/* My Strature command centre (sitebuild/mycommand/; release 1; design _handoff/2026-10-19/mystrature/design/).
   Phone first (W-115, WS-360 (1)): the map 260 px high, the first section's headline on the first 375 x 667 screen, no
   horizontal scroll from 320 px; the six chips scroll inside their own row. From 1024 px the map takes the left
   two-thirds and the sections scroll in the right column (WS-366 (4)). Section-only rules (.mc-s-*) are website 3's
   mycommand-sections.css. No animation. */
body.my-cc{
  --mc-sea:#DCE5EC; --mc-land:#A99F8C; --mc-faded:#CBC5B8; --mc-edge:#F4F1EA; --mc-mine:#132338; --mc-card:#FFFFFF;
  --mc-slot:#F4F1EA; --mc-slot-line:#C9C3B6; --mc-sel-bg:#132338; --mc-sel-fg:#FFFFFF;
  --s-strong:#A8321C; --s-mod:#D2764F; --s-weak:#8E959C; --s-nf:#B9BDC1;
  --ol-low:#2E6B4F; --ol-elev:#8A6A12; --ol-high:#A34A1C; --ol-sev:#8E1B1B;
}
@media (prefers-color-scheme: dark){
  body.my-cc{
    --paper:#0E1722; --tint:#15212E; --hair:#2B3A4B; --graphite:#9EABB8; --ink:#E8EDF2; --verm:#E8735A;
    --mc-sea:#0B1520; --mc-land:#5B7088; --mc-faded:#2E3D4F; --mc-edge:#0B1520; --mc-mine:#E8EDF2; --mc-card:#132030;
    --mc-slot:#192636; --mc-slot-line:#3A4A5D; --mc-sel-bg:#E8EDF2; --mc-sel-fg:#0E1722;
    --s-strong:#E8735A; --s-mod:#E0A07A; --s-weak:#8E9AA6; --s-nf:#56636F;
    --ol-low:#5FA884; --ol-elev:#C9A23E; --ol-high:#E07A4E; --ol-sev:#E25B5B;
    background:var(--paper); color:var(--ink); color-scheme:dark;
  }
  body.my-cc .btn.ghost{color:var(--ink);border-color:var(--hair)}
  /* WS-554: panels the shared sheets paint var(--white) keep light text in dark mode; give them the dark card. Only
     classes /my/ can carry (review M1): a selector for another page's markup invites a same-specificity clash */
  body.my-cc :where(.my-state,.my-sheet,.my-fbtn,.my-eye){background:var(--mc-card)}
  /* WS-579: controls that fill with var(--ink) when selected, hovered or pressed keep var(--white) text, white on near-white
     in dark mode; give them the page colour. The primary .btn keeps its vermilion fill with dark text. Navy controls
     (.knock, .knock-ghost, the masthead) keep --white as it is. */
  body.my-cc .my-tabs [role="tab"][aria-selected="true"],body.my-cc .my-eye:hover,body.my-cc .my-x:hover,
  body.my-cc .my-fbtn:hover,body.my-cc .my-fbtn[aria-pressed="true"],
  body.my-cc .btn:not(.knock):not(.knock-ghost):hover,body.my-cc .btn.ghost:hover{color:var(--paper)}
  body.my-cc .btn:not(.ghost):not(.knock):not(.knock-ghost){color:var(--paper)}
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mc [hidden],.mo [hidden]{display:none !important}
.mc{max-width:1440px;margin:0 auto;overflow-x:clip}
.mc h2,.mc h3,.mc h4,.mo h1,.mo h2{font-family:var(--serif);font-weight:600;margin:0;line-height:1.15;letter-spacing:-.01em}
.mc p,.mc ol,.mc ul{margin:0}
.mc ol,.mc ul{padding:0;list-style:none}

/* the map */
.mc-map{background:var(--paper);border-bottom:1px solid var(--hair)}
.mc-chips{display:flex;align-items:center;gap:6px;min-height:56px;padding:6px 16px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}
.mc-chips::-webkit-scrollbar{display:none}
.mc-chip{flex:0 0 auto;font:500 13px/1 var(--sans);min-height:44px;padding:0 12px;border:1px solid var(--hair);background:var(--mc-card);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center}
.mc-chip[aria-pressed="true"]{background:var(--mc-sel-bg);border-color:var(--mc-sel-bg);color:var(--mc-sel-fg)}
.mc-canvas{height:260px;background:var(--mc-sea);overflow:hidden;position:relative}
.mc-svg{width:100%;height:100%;display:block}
.mc-land path{fill:var(--mc-faded);stroke:var(--mc-edge);stroke-width:.35}
.mc-land path.lk{fill:var(--mc-land)}
.mc-land path.me{fill:var(--mc-mine)}
.mc-land path.rg{stroke:var(--mc-mine);stroke-width:1.2}
.mc-land path.mc-ol-Low{fill:var(--ol-low)}
.mc-land path.mc-ol-Elevated{fill:var(--ol-elev)}
.mc-land path.mc-ol-High{fill:var(--ol-high)}
.mc-land path.mc-ol-Severe{fill:var(--ol-sev)}
.mc-dot{fill-opacity:.85;stroke:var(--paper);stroke-width:1}
.mc-lv-High{fill:var(--s-strong)}
.mc-lv-Medium{fill:var(--s-mod)}
.mc-lv-Low,.mc-lv-none{fill:var(--s-weak)}
.mc-ln{stroke-linecap:round;fill:none;stroke-opacity:.8}
.mc-ln-S{stroke:var(--s-strong);stroke-width:2.4}
.mc-ln-M{stroke:var(--s-mod);stroke-width:1.6}
.mc-ln-W{stroke:var(--s-weak);stroke-width:.9}
.mc-route{fill:none;stroke:var(--verm);stroke-width:1.1;stroke-opacity:.8}
.mc-ev{fill:var(--s-weak);fill-opacity:.5}
.mc-ev.me{fill:var(--verm);fill-opacity:.9}
.mc-op{fill:var(--ol-low);fill-opacity:.8}
.mc-legend{min-height:28px;padding:5px 16px;font:12px/1.4 var(--sans);color:var(--graphite)}
.mc-map-fallback{padding:16px}

/* the column of sections */
.mc-col{padding:0 16px 40px;min-width:0}
.mc-status{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-height:44px;padding:0;font:13px/1.35 var(--sans);color:var(--graphite);border-bottom:1px solid var(--hair)}
.mc-status-a{font-weight:600;color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.mc-status:focus{outline:2px solid var(--ink);outline-offset:2px}
.mc-s{border-top:1px solid var(--hair);padding:16px 0 18px}
.mc-status + .mc-s{border-top:0;padding-top:12px}
.mc-s h2{font-size:22px}
.mc-why{margin-top:3px}
.mc-list > li{padding:12px 0;border-top:1px solid var(--hair)}
.mc-list > li:first-child{border-top:0}
.mc-item-h{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.3;overflow-wrap:anywhere}
.mc-item-h a{color:inherit}
.mc-item-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px;font:12.5px/1.4 var(--sans)}
.mc-item-c,.mc-cite{font:11.5px/1.4 var(--sans);color:var(--graphite);margin-top:5px;overflow-wrap:anywhere}
.mc-cite{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;cursor:pointer}
.mc-cite.mc-open{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
/* review S7: the Source button is a 44 px target beside the clamped citation */
.mc-citew{display:flex;align-items:center;gap:6px;margin-top:2px}
.mc-citew .mc-cite{flex:1 1 auto;min-width:0;margin-top:0}
.mc-src-t{flex:0 0 auto;font:600 11.5px/1 var(--sans);color:var(--ink);background:none;border:0;padding:0 6px 0 0;min-height:44px;min-width:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.mc-cite a{color:var(--graphite)}
.mc-fid{font-family:var(--mono);font-size:10.5px}
.mc-str{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.mc-bar i{width:6px;height:12px;border:1px solid var(--s-nf);display:inline-block;margin-right:2px}
.mc-str .mc-bar{display:inline-flex}
.mc-str-S .mc-bar i{background:var(--s-strong);border-color:var(--s-strong)}
.mc-str-M .mc-bar i:nth-child(-n+2){background:var(--s-mod);border-color:var(--s-mod)}
.mc-str-M .mc-bar i:nth-child(3){border-color:var(--s-mod)}
.mc-str-W .mc-bar i:first-child{background:var(--s-weak);border-color:var(--s-weak)}
.mc-str-W .mc-bar i:nth-child(n+2){border-color:var(--s-weak)}
.mc-str-nf .mc-bar i{border-style:dashed}
.mc-buf{border:1px solid var(--hair);padding:1px 7px;background:var(--mc-card)}
.mc-path{margin-top:6px}
.mc-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mc-acts button,.mc-rm,.mc-restore,.mc-undo,.mc-clear button,.mc-weekly-off{font:600 12.5px/1 var(--sans);min-height:44px;padding:0 12px;border:1px solid var(--hair);background:var(--mc-card);color:var(--ink);cursor:pointer}
.mc-more{display:inline-flex;align-items:center;min-height:44px;font:600 13.5px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.mc-empty{font:14px/1.45 var(--sans);color:var(--graphite);padding:8px 0}
.mc-empty a{color:var(--ink);font-weight:600}
.mc-method,.mc-note{margin-top:8px}
.mc-quiet{margin-top:8px;font:13px/1.4 var(--sans)}
.mc-quiet a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.mc-lend{margin-top:6px}
.mc-lend a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.mc-team{margin-top:14px}
.mc-slot{display:block;margin-top:10px;padding:10px 12px;border:1px dashed var(--mc-slot-line);background:var(--mc-slot);font:13px/1.4 var(--sans)}
.mc-slot-k{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.mc-picks h3,.mc-hidden h3{font-size:17px;margin:14px 0 6px}
.mc-pick,.mc-hid{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;border-top:1px solid var(--hair);font:14px/1.35 var(--sans)}
.mc-consent{margin-top:12px}
.mc-clear{margin-top:12px}
.mc-clear-q p{margin:6px 0}
.mo-lend{border:0;padding:0;margin:10px 0 0}
.mo-lend legend{font-weight:600}
.mo-lend label{display:flex;align-items:center;gap:8px;min-height:44px;border-top:1px solid var(--hair)}
.mc-consent p{margin-top:6px}
.mc-account{margin-top:16px;border-top:1px solid var(--hair)}
.mc-account .wrap{padding-left:0;padding-right:0}
.mc-account .sec{padding-top:16px;padding-bottom:16px}
/* review S6: the merge sheet is a modal dialog over the page */
.mc-merge-bg{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.45)}
.mc-merge{width:100%;max-width:480px;max-height:100%;overflow:auto;padding:16px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mc-merge h2{flex:1 0 100%;font-size:18px}
.mc-merge h2:focus{outline:2px solid var(--ink);outline-offset:2px}
.mc-merge .btn{min-height:44px}
.mc-merge p{flex:1 0 100%}
.mc-toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 14px;background:var(--ink);color:var(--paper);font:14px/1.3 var(--sans);max-width:480px;margin:0 auto}
.mc-toast[hidden]{display:none}
.mc-toast .mc-undo{background:var(--paper);color:var(--ink);border-color:var(--paper)}

@media (min-width:1024px){
  .mc{display:grid;grid-template-columns:minmax(0,2fr) minmax(320px,1fr);align-items:start}
  .mc-map{position:sticky;top:var(--mh,60px);border-right:1px solid var(--hair);border-bottom:0}
  .mc-canvas{height:calc(100vh - var(--mh,60px) - 80px);min-height:420px}
  .mc-col{max-height:calc(100vh - var(--mh,60px));overflow-y:auto;padding:0 24px 40px}
}

/* the setup sheet */
.mo{padding:24px 0 48px}
.mo h1{font-size:clamp(28px,6vw,38px)}
.mo .standfirst{margin-top:6px}
.mo-step{margin-top:20px;padding-top:16px;border-top:1px solid var(--hair);max-width:640px}
.mo-step h2{font-size:24px;margin-top:4px}
.mo-body{margin-top:10px;font-family:var(--sans);font-size:15px}
.mo-field{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.mo-field select{min-height:44px;font:15px var(--sans);max-width:100%;padding:0 8px}
.mo-q{margin-top:10px;color:var(--graphite)}
.mo-sugs li,.mo-radio{display:flex;align-items:center;min-height:44px;border-top:1px solid var(--hair)}
.mo-sugs label{display:flex;align-items:center;gap:8px;min-height:44px}
.mo-sectors{border:0;padding:0;margin:0}
.mo-sectors legend{font-weight:600;margin-bottom:4px}
.mo-acts{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
/* section 13: the shell's fixed search box and Ask link (shell.py _ask_extra; the form styles are mycommand-sections.css .mc-s-search) */
.mc-fixed{margin:4px 0 10px}
.mc-fixed .mc-ask{margin:8px 0 0}
.mc-fixed .mc-ask a{min-height:44px;display:inline-flex;align-items:center}