/* Matthew House - Settings view (Phase H3).
   Ported verbatim from the frozen _handoff mock (#view-settings block) plus the two
   app-wide appearance rules (reduced motion, larger text) that the Appearance panel
   drives. Design is FROZEN: no colour or token changes - these selectors only consume
   existing tokens (--mh-surface, --mh-line, --mh-green, --mh-ink, --mh-muted, ...).
   The full-bleed layout relies on .content's 28/30/40 padding being cancelled by the
   matching negative margins below, exactly as the mock cancels its content padding. */

#view-settings{padding:0; margin:-28px -30px -40px; height:calc(calc(100 * var(--mh-vh)) - 70px); overflow:hidden;}
#view-settings .set-wrap{display:flex; gap:14px; height:100%; padding:16px; min-height:0;}
#view-settings .set-side{width:252px; flex:none; background:var(--mh-surface); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07));}
#view-settings .set-shead{padding:18px 18px 12px; border-bottom:1px solid var(--mh-line);}
#view-settings .set-shead h3{font-family:var(--mh-font-head); font-size:20px; color:var(--mh-ink);}
#view-settings .set-scroll{flex:1; overflow-y:auto; padding:8px;}
/* KICKOFF 18: a global `button{justify-content:center}` reset was centering the tab
   content, so wider labels started further left than narrow ones (staggered, not
   left-aligned). Pin flex-start so every tab shares one left edge. */
#view-settings .set-item{display:flex; align-items:center; justify-content:flex-start; gap:11px; width:100%; text-align:left; border:none; background:none; padding:11px 12px; border-radius:12px; font-family:inherit; font-size:14px; font-weight:700; color:var(--mh-slate); cursor:pointer; transition:.13s;}
#view-settings .set-item svg{width:18px; height:18px; color:var(--mh-muted); flex:none;}
#view-settings .set-item:hover{background:var(--mh-cream-2);}
#view-settings .set-item.on{background:rgba(78,124,114,.12); color:var(--mh-green-d);}
#view-settings .set-item.on svg{color:var(--mh-green-d);}
#view-settings .set-body{flex:1; min-width:0; background:var(--mh-surface); border-radius:18px; overflow-y:auto; padding:8px 26px 26px; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07));}
#view-settings .set-panel{display:none;} #view-settings .set-panel.on{display:block; animation:dzfade .18s ease;}
#view-settings .set-h{font-family:var(--mh-font-head); font-size:22px; color:var(--mh-ink); font-weight:600; padding:18px 0 6px; position:sticky; top:0; background:var(--mh-surface);}
#view-settings .set-row{display:flex; align-items:center; gap:18px; padding:15px 0; border-bottom:1px solid var(--mh-line-2,#E7ECEA);}
#view-settings .set-row:last-child{border-bottom:none;}
#view-settings .set-tx{flex:1; min-width:0;}
#view-settings .set-tx .t{font-size:14px; font-weight:700; color:var(--mh-ink);}
#view-settings .set-tx .s{font-size:12.5px; color:var(--mh-muted); font-weight:500; margin-top:2px;}
/* FILLED SOFT toggle (PROMPT FS1): 44x26 track, sage-100 off -> sage-500 on, 20px
   springy thumb. set-sel: sage fill + transparent border -> white + sage ring on focus. */
#view-settings .set-sw{width:44px; height:26px; border-radius:999px; border:none; background:var(--mh-ctrl-fill-2); position:relative; cursor:pointer; transition:background .2s ease, box-shadow .16s ease; flex:none;}
#view-settings .set-sw::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(30,38,42,.3); transition:left .22s cubic-bezier(.34,1.4,.5,1);}
#view-settings .set-sw[aria-checked="true"]{background:var(--mh-ctrl-accent);} #view-settings .set-sw[aria-checked="true"]::after{left:21px;}
#view-settings .set-sw:focus-visible{outline:none; box-shadow:var(--mh-ctrl-focus-ring);}
#view-settings .set-sel{flex:none; min-width:160px; height:40px; border:1px solid transparent; border-radius:var(--mh-ctrl-r); background-color:var(--mh-ctrl-fill); padding:0 40px 0 14px; font:inherit; font-size:13.5px; color:var(--mh-ink); outline:none; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:var(--mh-ctrl-caret); background-repeat:no-repeat; background-position:right 14px center; background-size:14px 14px; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;}
#view-settings .set-sel:open{background-image:var(--mh-ctrl-caret-up);}
#view-settings .set-sel:focus{background-color:var(--mh-surface); border-color:var(--mh-ctrl-focus-border); box-shadow:var(--mh-ctrl-focus-ring);}

/* KICKOFF 18: "Coming soon" pill + disabled control for settings that persist but
   have no downstream effect yet. The pill sits just left of the (disabled) control. */
#view-settings .set-soon{flex:none; display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:999px;
  background:var(--mh-ctrl-fill-2); color:var(--mh-muted); font-size:11px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
  border:1px solid var(--mh-line);}
#view-settings .set-row.soon .set-sw[disabled],
#view-settings .set-row.soon .set-sel[disabled]{opacity:.5; cursor:not-allowed; pointer-events:none;}

body.reduce-motion *{ animation:none !important; transition:none !important; }
/* Text size was replaced by Display resolution (global root zoom, shell.js MHsetScale),
   which scales the whole app uniformly - no per-element font bump is needed here. */
@media(max-width:900px){ #view-settings .set-wrap{flex-direction:column; height:auto;} #view-settings .set-side{width:100%;} }

/* =============================================================================
   DARK MODE - added Aug 9 2026. Until now this stylesheet had ZERO body.dark rules:
   the whole Settings screen was built light-only, which is why the CEO saw its text
   "darked out" on the dark theme.

   THE ACTUAL CULPRIT, for the record: --mh-slate. Every other token this screen uses
   (--mh-ink, --mh-muted, --mh-surface, --mh-line) has a dark override in mh-theme.css
   and flips correctly. --mh-slate has exactly ONE definition, #34454D, and no dark
   value - so the rail items painted near-black ink on the near-black dark panel. The
   fix is per-surface rather than adding a dark --mh-slate globally, because that token
   is used elsewhere in the app and changing it would move screens nobody asked about.
   ============================================================================= */
body.dark #view-settings .set-side{ background:var(--mh-surface); box-shadow:none; border:1px solid var(--mh-line); }
body.dark #view-settings .set-shead{ border-bottom-color:var(--mh-line); }
body.dark #view-settings .set-shead h3{ color:#EEF2F1; }

/* THE FIX: the rail items no longer ride --mh-slate. */
body.dark #view-settings .set-item{ color:#C3CECB; }
body.dark #view-settings .set-item svg{ color:#8FA3A6; }
body.dark #view-settings .set-item:hover{ background:rgba(255,255,255,.06); color:#EEF2F1; }
body.dark #view-settings .set-item:hover svg{ color:#EEF2F1; }
body.dark #view-settings .set-item.on{ background:rgba(78,124,114,.22); color:#9FC7BD; }
body.dark #view-settings .set-item.on svg{ color:#9FC7BD; }

body.dark #view-settings .set-row{ border-bottom-color:rgba(255,255,255,.08); }
body.dark #view-settings .set-tx .t{ color:#EEF2F1; }
body.dark #view-settings .set-tx .s{ color:#A7B5B1; }
body.dark #view-settings .set-note{ color:#A7B5B1; border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.04); }
body.dark #view-settings .set-sel{ background-color:rgba(255,255,255,.06); color:#EEF2F1; border-color:rgba(255,255,255,.10); }
body.dark #view-settings .set-sel:focus{ background-color:rgba(255,255,255,.09); }
body.dark #view-settings .set-sel option{ background:#222B27; color:#EEF2F1; }

/* -----------------------------------------------------------------------------
   The panel titles are GONE (CEO, Aug 9): the rail already names the section you
   are standing in, so an <h3> repeating it directly below said the same word twice.
   The rule is kept as a no-op guard rather than deleted, so a future .set-h added
   back by habit cannot silently reintroduce a sticky heading with a light-only
   background sitting over dark content.
   ----------------------------------------------------------------------------- */
#view-settings .set-h{ display:none; }

/* First panel row needs the breathing room the heading used to provide. */
#view-settings .set-panel > .set-row:first-child,
#view-settings .set-panel > .set-note:first-child{ margin-top:6px; }

/* An explanatory line at the top of a panel - not a heading, a sentence. */
#view-settings .set-note{
  margin:2px 0 6px; padding:12px 14px; border-radius:12px;
  background:var(--mh-cream-2,#F1F4F7); border:1px solid var(--mh-line);
  font-size:12.5px; line-height:1.55; color:var(--mh-muted); font-weight:500; max-width:72ch;
}

/* The zone picker carries city names, so it needs more room than a Light/Dark select. */
#view-settings .set-sel--wide{ min-width:260px; }
/* A read-only value on the right of a row (the live clock in the chosen zone). */
#view-settings .set-readout{
  flex:none; font-size:13.5px; font-weight:700; color:var(--mh-green-d,#3D655D);
  background:rgba(78,124,114,.10); border-radius:10px; padding:9px 14px; white-space:nowrap;
}
body.dark #view-settings .set-readout{ background:rgba(78,124,114,.22); color:#9FC7BD; }

/* "Use This Zone" - applies the detected zone. Pine, because it is a safe action. */
#view-settings .set-apply{
  flex:none; height:38px; padding:0 16px; border-radius:11px; cursor:pointer;
  border:1px solid rgba(78,124,114,.45); background:var(--mh-surface);
  font-family:inherit; font-size:13px; font-weight:700; color:var(--mh-green-d,#3D655D);
  transition:background .15s ease, color .15s ease;
}
#view-settings .set-apply:hover:not(:disabled){ background:var(--mh-green,#4E7C72); color:#fff; }
#view-settings .set-apply:disabled{ opacity:.55; cursor:default; }
body.dark #view-settings .set-apply{ background:rgba(255,255,255,.05); color:#9FC7BD; }