/* ═══════════════════════════════════════════════════════════════════════════
   TASTING ROOM OS TAB (rebuilt 2026-10-14, tasting-tab.js): Tasting Room OS's settings page
   in Admin. Scoped under .trs; the rows are Settings' own (settings.css .stg-*). No boxes, no
   dots, no helper lines; state is a word; every tap is 44px; Approve wears Settings' brass
   (rule 35a). Devin's Round 0 pick B: the work and the watch side by side on the PC, one
   column below 1,100px and on a phone.
   ═══════════════════════════════════════════════════════════════════════════ */
.stg.trs {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 0 64px;
  align-items: start;
}
@media (max-width: 1099px) {
  .stg.trs { display: block; max-width: 760px; }
}
.trs .trs-col { min-width: 0; }

.trs .trs-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.trs .trs-title-end { letter-spacing: 0.06em; color: var(--adm-text-mute); }
.trs .trs-note { margin: var(--space-2) 0; }

.trs .trs-row { min-height: 56px; }
.trs .stg-row-end { flex-wrap: wrap; }
.trs .stg-row-end:empty { display: none; }
.trs .trs-approve { background: var(--stg-brass-soft); border-color: var(--stg-brass-line); color: var(--stg-brass); }
@media (hover: hover) {
  .trs .trs-approve:hover { border-color: var(--stg-brass); }
}
.trs .trs-danger { color: var(--bad); }

/* State as a word, Settings' fixed-state voice (.stg-tag). */
.trs .trs-word {
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--adm-text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--adm-text-mute);
  white-space: nowrap;
  padding: 0 var(--space-1);
}
.trs .trs-word.is-bad { color: var(--bad); }
.trs .trs-word.is-warn { color: var(--adm-status-pending-fg); }
.trs .trs-word.is-good { color: var(--good); }

.trs .trs-empty { min-height: 48px; }
.trs .trs-empty .stg-row-label { font-weight: 400; color: var(--adm-text-dim); }

/* ── people: the row opens in place; its phones sit under it on indented hairlines ── */
.trs .trs-person-head .stg-row-text { cursor: pointer; }
.trs .trs-chev {
  flex: none;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--adm-text-mute);
  cursor: pointer;
}
.trs .trs-chev:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.trs .trs-chev svg { width: 18px; height: 18px; stroke: currentColor; transition: transform 160ms ease; }
.trs .trs-person.is-open .trs-chev svg { transform: rotate(180deg); }
.trs .trs-person.is-open .trs-person-head { border-bottom-color: transparent; }
.trs .trs-person-detail { padding: 0 0 var(--space-2) var(--space-6); border-bottom: 1px solid var(--adm-border); }
.trs .trs-person-detail .trs-note { margin-top: 0; }
.trs .trs-person-facts { margin: 0; padding: 0 0 var(--space-2); font-size: var(--adm-text-sm); color: var(--adm-text-dim); overflow-wrap: anywhere; }
.trs .trs-device { min-height: 52px; }
.trs .trs-device:last-child { border-bottom: 0; }
.trs .trs-device .stg-row-label { font-weight: 500; }

/* ── Phone health and Bug reports keep their own hairline lists; their heads take the
   group-title look so the watch column reads as one page ── */
.trs .phone-health,
.trs .bug-reports { max-width: none; margin: 0 0 var(--space-7); }
.trs .phone-health-head,
.trs .bug-reports-head { padding: 0 0 var(--space-2); }
.trs .phone-health-head .section-title,
.trs .bug-reports-head .section-title {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--adm-text-2xs);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--adm-text-mute);
}
.trs .phone-health-current,
.trs .bug-reports-count { font-size: var(--adm-text-2xs); }
.trs .phone-health-note,
.trs .bug-reports-note { margin: var(--space-3) 0; }

/* ── Blocked: the type in words on visible buttons, Block asks twice ── */
.trs .trs-block-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--adm-border);
}
.trs .trs-kind.seg-control { padding: 2px; }
.trs .trs-kind .seg-btn { min-height: 44px; padding: 0 var(--space-3); }
.trs .trs-kind .seg-btn.is-active { background: var(--stg-brass-soft); color: var(--stg-brass); box-shadow: inset 0 0 0 1px var(--stg-brass-line); }
.trs .trs-value,
.trs .trs-reason { flex: 1 1 260px; width: auto; min-height: 44px; }
.trs .trs-block-form .btn { flex: none; min-height: 44px; }
.trs .trs-blocked .stg-row-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; }

/* ── phone ── */
@media (max-width: 699px) {
  .trs .trs-row { flex-wrap: wrap; }
  /* The name, its state word and the chevron share the first line; buttons take the next. */
  .trs .trs-row .stg-row-text { flex: 1 1 0; }
  .trs .trs-row .stg-row-end:not(:empty) { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .trs .trs-person-head .trs-chev { order: 2; }
  .trs .trs-person-detail { padding-left: var(--space-4); }
  .trs .trs-block-form > * { flex: 1 1 100%; }
  .trs .trs-kind { display: flex; }
  .trs .trs-kind .seg-btn { flex: 1 1 0; }
}