/* 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:var(--mh-side-w, 272px); 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,
#mhDetail.cn-host .set-sw,
#cnPop .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,
#mhDetail.cn-host .set-sw::after,
#cnPop .set-sw::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:rgb(var(--tg-rgb,255,255,255)); 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"],
#mhDetail.cn-host .set-sw[aria-checked="true"],
#cnPop .set-sw[aria-checked="true"]{background:var(--mh-ctrl-accent);} #view-settings .set-sw[aria-checked="true"]::after,
#mhDetail.cn-host .set-sw[aria-checked="true"]::after,
#cnPop .set-sw[aria-checked="true"]::after{left:21px;}
#view-settings .set-sw:focus-visible,
#mhDetail.cn-host .set-sw:focus-visible,
#cnPop .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],
#mhDetail.cn-host .set-row.soon .set-sw[disabled],
#cnPop .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(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); 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(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1))); }
body.dark #view-settings .set-sel{ background-color:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1))); color:#EEF2F1; border-color:rgba(255,255,255,.10); }
body.dark #view-settings .set-sel:focus{ background-color:rgba(var(--tg-rgb,255,255,255),calc(.09*var(--tg-k,1))); }
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,var(--tg-cream2,#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(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1))); color:#9FC7BD; }

/* =============================================================================
   SETMINT29 (29 Sep 2026) - SETTINGS IS BUILT FROM THE CLIENT RECORD'S MINT CARDS AND TILES.
   Owner: "that is still the old fields you added there - go to the client detail mock and check
   the new version that we added, work with that" + a screenshot of its INFO card.
   The Mint kit itself is NOT copied here: detail-view.css and client-detail-view.css carry
   #view-settings as a third selector on every Mint / selpop rule (beside #mhDetail, #hhDetail),
   and #view-settings.mint-host picks up the --mint-* tokens. This block holds only what the
   Settings page has that a record does not:
     - the record tokens those rules read (--ink-*, --brand*, --f-*, --r-*, --t, fonts), the same
       values #mhDetail declares, light and dark
     - the body: no panel of its own any more - the cards float on the theme, like a record pane
     - two tiles per row, a wide tile spans both, and a one-line description under each value
     - the SWITCH TILE: the value reads On / Off, the wizard switch sits at its right, the tile is
       the button (lifts on hover like every Mint tile, pine ring on keyboard focus)
   ============================================================================= */
#view-settings{
  --font-sans:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --mono:var(--font-mono);
  --brand:#2E4A43; --brand-600:#375A50; --brand-700:#213A33;
  --brand-tint:rgba(46,74,67,.12); --brand-tint-2:rgba(46,74,67,.20);
  --ink-1:#1C2733; --ink-2:#3B474B; --ink-3:#677579; --ink-4:#9AA7B3;
  --f-rest-bg:var(--tg-well,#DFE4EA); --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10);
  --f-hover-bg:var(--tg-well-h,#E4E8ED);
  --f-focus-bg:rgb(var(--tg-rgb,255,255,255)); --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14);
  --line:var(--tg-line,#D9DFE7);
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.25,1); --t:.2s var(--ease);
}
body.dark #view-settings{
  --ink-1:#EAF0F4; --ink-2:#C2CDD5; --ink-3:#8C9AA5; --ink-4:#5E6E7A;
  --brand:#3A5D51; --brand-600:#8FBBA5;
  --brand-tint:rgba(143,187,165,.18); --brand-tint-2:rgba(143,187,165,.26);
  --f-rest-bg:#121A20; --f-rest-bd:rgba(180,210,235,.10); --f-rest-sh:inset 0 1px 2px rgba(0,0,0,.4);
  --f-hover-bg:#16202A;
  --f-focus-bg:#222E38; --f-focus-bd:rgba(150,190,225,.28); --f-focus-sh:0 12px 30px rgba(0,0,0,.5);
  --line:rgba(180,210,235,.12);
}

/* ---- the body: the cards sit on the theme, the way a record's cards sit on its pane ---- */
#view-settings .set-body,
body:not(.dark) #view-settings .set-body,
body.dark #view-settings .set-body{
  background:transparent; border:0; box-shadow:none; border-radius:0;
  padding:2px 4px 26px;
}
#view-settings .set-panel.on{display:flex; flex-direction:column; gap:16px;}

/* ---- the grid: two tiles a row; a wide tile (display resolution, time zone) spans both ---- */
#view-settings .pd-card.mint .mint-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
#view-settings .pd-card.mint .mint-w.wide{grid-column:1 / -1;}
@media (max-width:900px){ #view-settings .pd-card.mint .mint-grid{grid-template-columns:minmax(0,1fr);} }

/* ---- the sentence under a value: what the setting does ---- */
#view-settings .mint-w .set-desc,
#mhDetail.cn-host .mint-w .set-desc,
#cnPop .mint-w .set-desc{
  margin-top:3px; font-size:12.5px; line-height:1.45; font-weight:500; color:#7A8A84;
  white-space:normal; overflow-wrap:anywhere;
}
#view-settings .mint-w .set-desc b,
#mhDetail.cn-host .mint-w .set-desc b,
#cnPop .mint-w .set-desc b{font-weight:700; color:#4E5E58;}
body.dark #view-settings .mint-w .set-desc,
body.dark #mhDetail.cn-host .mint-w .set-desc{color:#8C9AA5;}
body.dark #view-settings .mint-w .set-desc b,
body.dark #mhDetail.cn-host .mint-w .set-desc b{color:#C2CDD5;}
#view-settings .set-cardnote{margin:0 6px 14px; font-size:12.5px; line-height:1.5; font-weight:500; color:#7A8A84;}
body.dark #view-settings .set-cardnote{color:#8C9AA5;}

/* ---- the switch tile ---- */
#view-settings .mint-w.set-tgl,
#mhDetail.cn-host .mint-w.set-tgl,
#cnPop .mint-w.set-tgl{cursor:pointer; padding-right:84px; outline:none;}
#view-settings .mint-w.set-tgl .set-sw,
#mhDetail.cn-host .mint-w.set-tgl .set-sw,
#cnPop .mint-w.set-tgl .set-sw{position:absolute; right:18px; top:50%; transform:translateY(-50%); pointer-events:none;}
#view-settings .mint-w.set-tgl:focus-visible,
#mhDetail.cn-host .mint-w.set-tgl:focus-visible,
#cnPop .mint-w.set-tgl:focus-visible{border-color:rgba(47,107,87,.55); box-shadow:0 0 0 3px rgba(47,107,87,.13), var(--mint-lift-sm);}
#view-settings .mint-w.set-tgl.lockt,
#mhDetail.cn-host .mint-w.set-tgl.lockt,
#cnPop .mint-w.set-tgl.lockt{cursor:not-allowed; opacity:.6;}

/* ---- the switch itself: the wizard switch (48x28 well, 22px knob, pine when on) ---- */
#view-settings .set-sw,
#mhDetail.cn-host .set-sw,
#cnPop .set-sw{width:48px; height:28px; border-width:1px; border-style:solid; display:block;}
#view-settings .set-sw::after,
#mhDetail.cn-host .set-sw::after,
#cnPop .set-sw::after{top:2px; left:2px; width:22px; height:22px; box-shadow:0 2px 5px rgba(40,60,80,.28);}
#view-settings .set-sw[aria-checked="true"]::after,
#mhDetail.cn-host .set-sw[aria-checked="true"]::after,
#cnPop .set-sw[aria-checked="true"]::after{left:22px;}
body:not(.dark) #view-settings .set-sw,
body:not(.dark) #mhDetail.cn-host .set-sw,
body:not(.dark) #cnPop .set-sw{
  background:var(--tg-well,#DFE4EA); border-color:rgba(var(--tg-deep,40,60,80),.12);
  box-shadow:inset 0 1px 2px rgba(var(--tg-deep,40,60,80),.12);
}
body:not(.dark) #view-settings .set-sw[aria-checked="true"],
body:not(.dark) #mhDetail.cn-host .set-sw[aria-checked="true"],
body:not(.dark) #cnPop .set-sw[aria-checked="true"]{
  background:var(--mh-ctrl-accent,#4E7C72); border-color:var(--mh-ctrl-accent,#4E7C72); box-shadow:none;
}
body.dark #view-settings .set-sw,
body.dark #mhDetail.cn-host .set-sw{border-color:rgba(255,255,255,.10);}
body.dark #view-settings .set-sw[aria-checked="true"],
body.dark #mhDetail.cn-host .set-sw[aria-checked="true"]{border-color:var(--mh-ctrl-accent);}

/* ---- "Use This Zone" inside the Detected tile ---- */
#view-settings .mint-w .set-apply{align-self:flex-start; margin-top:10px; height:40px; border-radius:12px; padding:0 18px;}

/* CNSTD01 (1 Oct 2026) - the Settings switch tile also serves the Case Notes record (#mhDetail.cn-host, the
   in-place composer) and the case note popup (#cnPop): the protection switches Confidential / Safeguarding.
   At rest (read mode, .cn-rest) the tile is not a control - no pointer, no hover lift. */
:is(#cnPop,#mhDetail.cn-host) .mint-w.set-tgl.cn-rest{cursor:default}
:is(#cnPop,#mhDetail.cn-host) .mint-w.set-tgl.cn-rest:hover{transform:none}