/* ============================================================
   Settings home, round 2 (session 387): board 11 on the "Settings redesign" canvas, MainV2.dc.html in mh-settings-home-mockup-v2.zip.
   Daniel, 25 October 2026: "Yes. This is what I want." ("My brain struggles with two columns. I want a one-column view." "I want THE HUB
   ITSELF at the top.") The board's stylesheet is the specification: its rules are copied here, each under .mhsx (the home's own root) with
   the board's class names prefixed sx-, so nothing else in the Hub changes. The Hub's header, stripe and left menu are its own.
   ============================================================ */
.mhsx{ font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif; color:#4d545a; font-size:14px; line-height:1.45; font-weight:450; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; max-width:1040px; margin:0 auto; display:flex; flex-direction:column; gap:22px; padding-top:4px; min-width:0 }
.mhsx *{ box-sizing:border-box }
.mhsx a{ color:#1d6e77; text-decoration:none }
.mhsx a:hover{ text-decoration:underline }
.mhsx .sx-h1{ margin:0; font-size:clamp(28px,4vw,40px); font-weight:800; color:#16181a; letter-spacing:-0.035em; line-height:1.02 }
.mhsx .sx-lead{ font-size:15px; margin-top:8px }
.mhsx .sx-card{ background:#fff; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08); overflow:hidden }
.mhsx .sx-ic{ width:40px; height:40px; border-radius:10px; background:#144d54; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 40px }
.mhsx .sx-ic.sx-yellow{ background:#ffd13a; color:#144d54 }
.mhsx .sx-sh{ display:flex; align-items:center; gap:14px; padding:18px 24px }
.mhsx .sx-st{ font-size:22px; font-weight:700; color:#16181a; letter-spacing:-0.025em; margin:0; line-height:1.15 }
.mhsx .sx-ss{ font-size:13px; color:#6b747b; margin-top:2px }
.mhsx .sx-count{ margin-left:auto; font-size:12.5px; font-weight:600; color:#6b747b; white-space:nowrap }
/* a setting: name, what it decides, Shows on, its value now, a chevron */
.mhsx .sx-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px) 20px; gap:20px; align-items:center; padding:16px 24px; border-top:1px solid #dfe3e6; color:inherit; text-decoration:none }
.mhsx a.sx-row:hover{ background:#f2f4f5; text-decoration:none }
.mhsx a.sx-row:focus-visible, .mhsx a.sx-hrow:focus-visible, .mhsx a.sx-lrow:focus-visible, .mhsx .sx-jump a:focus-visible, .mhsx .sx-seg button:focus-visible{ outline:3px solid #1d6e77; outline-offset:-3px }
.mhsx .sx-rn{ font-size:15.5px; font-weight:700; color:#16181a; letter-spacing:-0.01em; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.mhsx .sx-rd{ font-size:13.5px; color:#4d545a; margin-top:3px }
.mhsx .sx-on{ font-size:12.5px; color:#6b747b; margin-top:6px }
.mhsx .sx-on b{ font-weight:600; color:#4d545a }
.mhsx .sx-val{ justify-self:end; text-align:right; font-size:14px; font-weight:600; color:#16181a; line-height:1.35; min-width:0; overflow-wrap:anywhere }
.mhsx .sx-val .sx-v2{ display:block; font-weight:500; color:#6b747b }
.mhsx .sx-val .sx-pill + .sx-pill{ margin-left:4px }
.mhsx .sx-chev{ color:#9aa4ab; justify-self:end }
.mhsx .sx-pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap }
.mhsx .sx-orange{ background:#ffe8d6; color:#9a4a0e }
.mhsx .sx-green{ background:#e2f4ee; color:#08513f }
.mhsx .sx-amber{ background:#fdf0d8; color:#7a5312 }
.mhsx .sx-grey{ background:#e9ecee; color:#4d545a }
.mhsx .sx-lock{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:#6b747b }
/* The Hub itself: the page's one dark panel */
.mhsx .sx-hub{ background:linear-gradient(135deg,#144d54,#0e363b); color:#fff; border-radius:18px; box-shadow:0 10px 30px rgba(14,54,59,.22); overflow:hidden }
.mhsx .sx-hubh{ display:flex; align-items:center; gap:14px; padding:20px 24px }
.mhsx .sx-hubt{ margin:0; font-size:22px; font-weight:700; letter-spacing:-0.025em; line-height:1.15; color:#fff }
.mhsx .sx-hubs{ font-size:13px; color:#dceff0; margin-top:2px }
.mhsx .sx-hrow{ display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,320px) 20px; gap:16px; align-items:center; padding:16px 24px; border-top:1px solid rgba(255,255,255,.14); color:#fff; text-decoration:none }
.mhsx a.sx-hrow{ color:#fff }
.mhsx a.sx-hrow:hover{ background:rgba(255,255,255,.07); text-decoration:none }
.mhsx .sx-hic{ width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.12); color:#6fd5d4; display:flex; align-items:center; justify-content:center }
.mhsx .sx-hn{ font-size:16px; font-weight:700; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.mhsx .sx-hd{ font-size:13.5px; color:#dceff0; margin-top:2px }
.mhsx .sx-hrow .sx-val{ color:#fff }
.mhsx .sx-hrow .sx-val .sx-v2{ font-size:12.5px; font-weight:500; color:#dceff0 }
.mhsx .sx-hrow .sx-val .sx-v2.sx-ok{ color:#6fd5d4 }
.mhsx .sx-hrow .sx-val .sx-v2.sx-warn{ color:#ffd13a }
.mhsx .sx-hrow .sx-lock{ color:#dceff0 }
.mhsx .sx-hrow .sx-chev{ color:#6fd5d4 }
/* Needs a look */
.mhsx .sx-look{ background:#fff5cc; border-radius:14px; box-shadow:0 4px 14px rgba(14,54,59,.08),inset 0 0 0 1px #f1dfba; overflow:hidden }
.mhsx .sx-look .sx-ss, .mhsx .sx-look .sx-count{ color:#7a5312 }
.mhsx .sx-lrow{ display:grid; grid-template-columns:72px minmax(0,1fr) auto 20px; gap:16px; align-items:center; padding:14px 24px; border-top:1px solid #f1dfba; color:inherit; text-decoration:none }
.mhsx a.sx-lrow:hover{ background:#ffefb3; text-decoration:none }
.mhsx .sx-lrow .sx-rn{ font-size:15px }
.mhsx .sx-big{ font-size:30px; font-weight:800; color:#16181a; letter-spacing:-0.035em; line-height:1; text-align:center }
.mhsx .sx-big.sx-word{ font-size:20px; color:#9a4a0e }
/* Search, By area | By screen, the area buttons */
.mhsx .sx-tools{ display:flex; flex-direction:column; gap:12px }
.mhsx .sx-tline{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.mhsx .sx-search{ flex:1; min-width:260px; display:flex; align-items:center; gap:10px; height:52px; padding:0 20px; background:#fff; border:1px solid #c9d0d4; border-radius:999px; box-shadow:0 4px 14px rgba(14,54,59,.06) }
.mhsx .sx-search:focus-within{ border-color:#1d6e77; box-shadow:0 0 0 3px rgba(29,110,119,.18) }
.mhsx .sx-search input{ flex:1; border:0; outline:0; font-family:inherit; font-size:15.5px; color:#16181a; background:none; min-width:0 }
.mhsx .sx-seg{ display:inline-flex; background:#e9ecee; border-radius:999px; padding:4px }
.mhsx .sx-seg button{ font-family:inherit; font-size:13.5px; font-weight:700; border:0; background:none; color:#4d545a; padding:9px 16px; border-radius:999px; cursor:pointer }
.mhsx .sx-seg button:hover{ background:#dfe3e6 }
.mhsx .sx-seg button.sx-sel{ background:#144d54; color:#fff }
.mhsx .sx-jump{ display:flex; flex-wrap:wrap; gap:8px }
.mhsx .sx-jump a{ background:#fff; color:#144d54; font-size:13px; font-weight:600; border-radius:999px; padding:7px 14px; box-shadow:inset 0 0 0 1px #c9d0d4; text-decoration:none }
.mhsx .sx-jump a:hover{ background:#dceff0; text-decoration:none }
.mhsx .sx-none{ padding:22px 24px; font-size:15px; color:#4d545a }
.mhsx .sx-card[hidden], .mhsx .sx-row[hidden], .mhsx .sx-hrow[hidden], .mhsx .sx-look[hidden], .mhsx .sx-hub[hidden]{ display:none }
.mhsx .sx-card, .mhsx .sx-hub{ scroll-margin-top:90px }
/* "Code proposes better", labelled: where a screen setting also lives (By screen), the part of the screen it changes */
.mhsx .sx-part{ font-size:12.5px; color:#6b747b; margin-top:6px }
.mhsx .sx-part b{ font-weight:600; color:#4d545a }
@media (max-width:760px){
  .mhsx .sx-row{ grid-template-columns:minmax(0,1fr) 20px }
  .mhsx .sx-row .sx-val{ grid-column:1; justify-self:start; text-align:left }
  .mhsx .sx-row .sx-chev{ grid-row:1; grid-column:2 }
  .mhsx .sx-hrow{ grid-template-columns:44px minmax(0,1fr) 20px }
  .mhsx .sx-hrow .sx-val{ grid-column:2; justify-self:start; text-align:left }
  .mhsx .sx-hrow .sx-chev{ grid-row:1; grid-column:3 }
  .mhsx .sx-lrow{ grid-template-columns:56px minmax(0,1fr) 20px }
  .mhsx .sx-lrow .sx-pill{ display:none }
}