/* ════════════════════════════════════════════════════════════════════════════
   SETTINGS (rebuilt 2026-10-13, settings-page.js) + the pinned Settings item
   and More-sheet report row it brought with it (admin.js).
   Flat rows on hairlines, one caption column, no helper lines (rules 35c, 38;
   Devin's 2026-10-03 Tasting Room Settings pick: no capsules, pills or boxes).
   Switches carry the Home board's warm brass on-state instead of an ink block
   (rule 35a); the knob's side still says on or off (rule 35b).
   ════════════════════════════════════════════════════════════════════════════ */

.stg {
  --stg-brass: #8A6516;
  --stg-brass-line: #C9A25C;
  --stg-brass-soft: #F6EEDA;
  max-width: 760px;
}
:root[data-theme="dark"] .stg {
  --stg-brass: #E0AA55;
  --stg-brass-line: #8A6516;
  --stg-brass-soft: rgba(192, 138, 46, 0.14);
}

.stg-tab { display: flex; flex-direction: column; }
/* Four tabs, one of them "Report & system": tighter spacing so all four fit
   on a 360px phone without the strip scrolling. */
.stg .subtabs { gap: 0; }
.stg .subtab + .subtab { margin-left: var(--space-3); }

/* ── groups and rows ─────────────────────────────────────────────────────── */
.stg-group { margin: 0 0 var(--space-7); }
.stg-group-title {
  margin: 0;
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--adm-border-strong);
  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);
}
.stg-rows { display: flex; flex-direction: column; }
.stg-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--adm-border);
}
.stg-row[hidden] { display: none; }
.stg-row-icon { flex: none; width: 18px; height: 18px; stroke: var(--adm-text-dim); }
.stg-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stg-row-label { font-size: var(--adm-text-base); font-weight: 600; color: var(--adm-text); overflow-wrap: anywhere; }
.stg-row-meta { font-size: var(--adm-text-2xs); color: var(--adm-text-mute); overflow-wrap: anywhere; }
.stg-row-meta.is-warn { color: var(--adm-status-pending-fg); }
.stg-row-meta.is-bad { color: var(--bad); }
.stg-row-end {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}
.stg-row-end .btn { min-height: 44px; padding: 0 var(--space-3); font-size: var(--adm-text-sm); }
/* Display: the switch or its fixed state ("Always on") in one slot, so the
   arrows on every row stand in one column (rules 11, 35c). */
.stg-slot { flex: none; width: 76px; display: flex; justify-content: flex-end; }

/* A section switched off in the sidebar reads quieter; its switch says why. */
.stg-row.is-off .stg-row-label { color: var(--adm-text-dim); font-weight: 500; }
.stg-row.is-off .stg-row-icon { stroke: var(--adm-text-mute); }

/* A fixed state where a control would sit: Always on, You, On/Off. */
.stg-tag {
  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;
}
.stg-value { font-size: var(--adm-text-sm); color: var(--adm-text); white-space: nowrap; }
.stg-value.is-warn { color: var(--adm-status-pending-fg); }
.stg-value.is-bad,
.stg-run .is-bad { color: var(--bad); }

/* Status lines say what happened and only take room when they speak. */
.stg-note { margin: var(--space-2) 0 0; font-size: var(--adm-text-sm); color: var(--adm-text-dim); }
.stg-note:empty { display: none; }
.stg-note.is-error { color: var(--bad); }
.stg-hint { margin: var(--space-2) 0 0; font-size: var(--adm-text-sm); color: var(--adm-text-dim); line-height: 1.45; }
.stg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.stg-actions:empty { display: none; }

/* ── switch on-state (scoped; every other house switch is unchanged) ─────── */
.stg .switch.is-on { background: var(--stg-brass-soft); border-color: var(--stg-brass-line); }
.stg .switch.is-on .switch-knob { background: var(--stg-brass); }
/* Under 900px the house switch is a clear 44px button and ::before paints the
   pill (admin.css, the one switch fix), so the brass goes on ::before there. */
@media (max-width: 899px) {
  .stg .switch.is-on { background: transparent; border-color: transparent; }
  .stg .switch.is-on::before { background: var(--stg-brass-soft); border-color: var(--stg-brass-line); }
}

/* ── Display: move buttons ───────────────────────────────────────────────── */
.stg-move { display: flex; gap: 2px; }
.stg-move-btn.btn {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stg-move-btn svg { width: 16px; height: 16px; stroke: currentColor; }
.stg-move-btn:disabled { opacity: 0.3; }

/* ── People ──────────────────────────────────────────────────────────────── */
.stg-role.seg-control { padding: 2px; }
.stg-role .seg-btn { min-height: 44px; padding: 0 var(--space-3); }
/* The picked role is marked, not just a shade lighter (rule 35b): the
   switches' brass fill and line. */
.stg-role .seg-btn.is-active {
  background: var(--stg-brass-soft);
  color: var(--stg-brass);
  box-shadow: inset 0 0 0 1px var(--stg-brass-line);
}
.stg-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--adm-border);
}
.stg-add .stg-add-email { flex: 1 1 220px; width: auto; }

/* ── System ──────────────────────────────────────────────────────────────── */
.stg-runs { display: flex; flex-direction: column; border-bottom: 1px solid var(--adm-border); }
.stg-runs[hidden] { display: none; }
.stg-run {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  font-size: var(--adm-text-sm);
  color: var(--adm-text-dim);
}
/* Robot keys keeps its own list (service-keys.js); here it loses the card
   frame, its heading takes the group-title look, and the make-a-key form
   waits behind New key. */
.stg-keys:not(.is-adding) .service-keys-form { display: none; }
.stg-keys .service-keys.set-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.stg-keys .service-keys-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--adm-border-strong);
}
.stg-keys .service-keys-head .set-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);
}

/* ── phone ───────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
  /* A long email and its controls: the controls take their own line. */
  .stg-person { flex-wrap: wrap; }
  .stg-person .stg-row-text { flex-basis: 100%; }
  .stg-person .stg-row-end { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .stg-add .btn { flex: 1 1 auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Sidebar: Settings pinned to the bottom (Devin, 2026-10-13). It sits under
   the scrolling list and above the footer, so it never scrolls away.
   ════════════════════════════════════════════════════════════════════════════ */
.sb-pinned { flex: none; display: flex; flex-direction: column; border-top: 1px solid var(--adm-sb-border); }
.sb-pinned:empty { display: none; }

/* ── More sheet: the register report row (phone twin of the sidebar chip) ── */
.sheet-report[hidden] { display: none; }
.sheet-report .sheet-report-label { flex: 1 1 auto; }
.sheet-report .sheet-report-age {
  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);
}
.sheet-report.is-stale .sheet-report-age { color: var(--adm-status-pending-fg); }