/* All Areas: the dashboard look (Tour's, from Angus's "Tour · dashboard style" mockup, 27 Oct 2026), shared.
   Dark greys, 1px borders, 6px buttons and 8px panels, Inter for words and Source Code Pro for times and codes, a left
   sidebar, a 48px trail bar, and one accent used sparingly (the main button, the live dot). It sits on top of
   packages/ui/app.css and uses the same markup (topbar, panel, table.list, page-head…), so an app built on app.css
   turns it on without changing its pages.

   To use it in an app:
   1. Load it after app.css: <link rel="stylesheet" href="ui/dash.css?v=1"> (copy it into the app the way ui/app.css
      is copied, e.g. apps/arraycalc/tools/make-public.mjs), and the fonts:
      https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Saira+Stencil+One&family=Source+Code+Pro:wght@400;500&display=swap
   2. <html class="dash"> and <body data-pass="…">: the accent is the pass's (Tour blue, tools graphite…).
   3. The frame:
        <div class="shell">
          <header class="topbar"><div class="topbar-in">
            [the All Areas Home] <a class="logo">…</a>
            <button class="side-toggle" aria-controls="sideNav" aria-expanded="false">Menu</button>   (phones; the app toggles .open on .topbar)
            <div class="side-nav" id="sideNav"><nav class="menu">…</nav> <span class="who">…</span></div>
          </div></header>
          <div class="work"><div class="crumbbar"><nav class="crumbpath">…</nav><span class="live"></span></div><main class="page">…</main></div>
        </div>
   4. Optional light version, for an app with its own switch: add the class "dash-light" to <html> (only ever from the
      app's own switch, kept by the app: never from data-theme, so an app without a switch stays dark).
   Printing stays black on white. Each app keeps only its own extras in its own CSS. */

/* ---------- the colours: dark, then the light version ---------- */
:root.dash{color-scheme:dark;--mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root.dash:not(.x) body{
  --page:#171717; --panel:#1C1C1C; --head:#1F1F1F; --raise:#232323; --hover:#2A2A2A; --field:#171717;
  --text:#EDEDED; --text-2:#A1A1A1; --text-3:#8F8F8F; --text-4:#7A7A7A; --line:#2E2E2E; --line-soft:#2A2A2A; --line-2:#3A3A3A; --line-3:#4A4A4A;
  --sep:#555555; --link:#EDEDED; --link-hover:#FFFFFF; --toast-bg:#EDEDED; --toast-ink:#111111;
  --ok:#3ECF8E; --ok-bg:#15291F; --warn:#F0C25A; --warn-bg:#352B12; --bad:#F38B82; --bad-bg:#3A1C1A; --info-bg:#262626;
  --brand-soft:#2A2A2A; --aa:#C0362D;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.5}
/* the accent: the main button (brand), and text and dots in it (accent-text, also the focus ring) */
:root.dash:not(.x) body[data-pass="tour"]{--brand:#2D6BDC;--brand-ink:#FFFFFF;--accent-text:#7FAEF0;--focus:#7FAEF0}
:root.dash:not(.x) body[data-pass="tools"]{--brand:#C3CCD5;--brand-ink:#14191E;--accent-text:#C3CCD5;--focus:#C3CCD5}
:root.dash:not(.x) body[data-pass="patch"]{--brand:#5CC48A;--brand-ink:#0B2416;--accent-text:#5CC48A;--focus:#5CC48A}
:root.dash:not(.x) body[data-pass="crew"]{--brand:#E8B730;--brand-ink:#1A1400;--accent-text:#E8B730;--focus:#E8B730}
:root.dash:not(.x) body[data-pass="band"]{--brand:#F07AA6;--brand-ink:#2B0715;--accent-text:#F07AA6;--focus:#F07AA6}
:root.dash:not(.x) body[data-pass="rf"]{--brand:#4CC3CF;--brand-ink:#04282C;--accent-text:#4CC3CF;--focus:#4CC3CF}
:root.dash:not(.x) body[data-pass="hq"],:root.dash:not(.x) body[data-pass="hqstaff"]{--brand:#8FB0CF;--brand-ink:#0E1A26;--accent-text:#8FB0CF;--focus:#8FB0CF}
:root.dash:not(.x) body[data-pass="build"]{--brand:#F29A5C;--brand-ink:#2A1203;--accent-text:#F29A5C;--focus:#F29A5C}
:root.dash:not(.x) body[data-pass="load"]{--brand:#A9C95A;--brand-ink:#1A2200;--accent-text:#A9C95A;--focus:#A9C95A}
:root.dash:not(.x) body[data-pass="script"]{--brand:#D2A174;--brand-ink:#2A1A0B;--accent-text:#D2A174;--focus:#D2A174}
:root.dash:not(.x) body[data-pass="merch"]{--brand:#E58A98;--brand-ink:#2B0910;--accent-text:#E58A98;--focus:#E58A98}

:root.dash.dash-light{color-scheme:light}
:root.dash.dash-light:not(.x) body{
  --page:#F6F6F6; --panel:#FFFFFF; --head:#FAFAFA; --raise:#F1F1F1; --hover:#EBEBEB; --field:#FFFFFF;
  --text:#171717; --text-2:#5C5C5C; --text-3:#6B6B6B; --text-4:#767676; --line:#E1E1E1; --line-soft:#EBEBEB; --line-2:#CFCFCF; --line-3:#B5B5B5;
  --sep:#B5B5B5; --link:#171717; --link-hover:#000000; --toast-bg:#171717; --toast-ink:#FFFFFF;
  --ok:#1B6E3A; --ok-bg:#E3F3E8; --warn:#7A5100; --warn-bg:#FCF1D6; --bad:#B4231B; --bad-bg:#FBE4E2; --info-bg:#EEF0F2;
  --brand-soft:#EBEBEB; --aa:#B4231B}
:root.dash.dash-light:not(.x) body[data-pass="tour"]{--brand:#1F5FB8;--brand-ink:#FFFFFF;--accent-text:#1F5FB8;--focus:#1F5FB8}
:root.dash.dash-light:not(.x) body[data-pass="tools"]{--brand:#37414B;--brand-ink:#FFFFFF;--accent-text:#37414B;--focus:#37414B}
:root.dash.dash-light:not(.x) body[data-pass="patch"]{--brand:#1E7A47;--brand-ink:#FFFFFF;--accent-text:#1E7A47;--focus:#1E7A47}
:root.dash.dash-light:not(.x) body[data-pass="crew"]{--brand:#B98900;--brand-ink:#1A1400;--accent-text:#7A5A00;--focus:#7A5A00}
:root.dash.dash-light:not(.x) body[data-pass="band"]{--brand:#C02F64;--brand-ink:#FFFFFF;--accent-text:#C02F64;--focus:#C02F64}
:root.dash.dash-light:not(.x) body[data-pass="rf"]{--brand:#087C88;--brand-ink:#FFFFFF;--accent-text:#087C88;--focus:#087C88}
:root.dash.dash-light:not(.x) body[data-pass="hq"],:root.dash.dash-light:not(.x) body[data-pass="hqstaff"]{--brand:#334E68;--brand-ink:#FFFFFF;--accent-text:#334E68;--focus:#334E68}
:root.dash.dash-light:not(.x) body[data-pass="build"]{--brand:#C2570C;--brand-ink:#FFFFFF;--accent-text:#A3480A;--focus:#A3480A}
:root.dash.dash-light:not(.x) body[data-pass="load"]{--brand:#5E7A12;--brand-ink:#FFFFFF;--accent-text:#5E7A12;--focus:#5E7A12}
:root.dash.dash-light:not(.x) body[data-pass="script"]{--brand:#8A5A2E;--brand-ink:#FFFFFF;--accent-text:#8A5A2E;--focus:#8A5A2E}
:root.dash.dash-light:not(.x) body[data-pass="merch"]{--brand:#8C2D3C;--brand-ink:#FFFFFF;--accent-text:#8C2D3C;--focus:#8C2D3C}

.dash a:hover{color:var(--link-hover)}
.dash h1{font-size:22px;font-weight:500}
.dash h2{font-size:13px;font-weight:500}
.dash h3{font-size:13px;font-weight:600}

/* ---------- the frame: sidebar, then the trail bar over the page ---------- */
.dash .shell{display:flex;min-height:100vh}
.dash .topbar{flex:none;width:232px;height:100vh;position:sticky;top:0;overflow-y:auto;background:var(--panel);border:0;border-right:1px solid var(--line)}
.dash .topbar-in{max-width:none;margin:0;min-height:100%;padding:14px 10px;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px}
.dash .aa-home{border:0;padding:4px 8px;min-height:32px;font-size:13px;color:var(--text-2)}
.dash .aa-mark{font-size:.72rem}
.dash .logo{padding:6px 8px 14px;gap:10px;font-size:14px;font-weight:600}
.dash .logo .mark{min-width:0;height:24px;padding:0 6px;border-radius:5px;font-size:.85rem}
/* Just the two marks, side by side (Angus, 28 Oct 2026: "most people will know that the all areas button is home"):
   "Home" and the app's name stay for screen readers only. */
.dash .aa-mark{display:inline-flex;align-items:center;height:24px;padding:0 7px;border-radius:5px}
.dash .aa-word,.dash .logo-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:901px){
  .dash .topbar-in{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;align-items:center;column-gap:8px;row-gap:0}
  .dash .topbar-in > :not(.aa-home):not(.logo){grid-column:1/-1}
  .dash .side-nav{align-self:stretch}
  .dash .aa-home{padding:4px 0 4px 8px;margin-bottom:12px}
  .dash .logo{padding:4px 0;margin-bottom:12px;justify-self:start}
}
@media (max-width:900px){.dash .topbar .aa-home{padding:4px 0 4px 6px}.dash .topbar .logo{padding:4px 0}}
.dash .side-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.dash .side-toggle{display:none}
.dash .menu{flex-direction:column;flex-wrap:nowrap;gap:2px}
.dash .menu a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--text-2);font-size:13px}
.dash .menu a svg{flex:none}
.dash .menu a:hover{background:var(--hover);color:var(--text)}
.dash .menu a[aria-current]{background:var(--hover);color:var(--text);font-weight:500;box-shadow:none}
.dash .menu-head{margin:14px 10px 4px;font-size:11px;color:var(--text-4);text-transform:uppercase;letter-spacing:.5px}
.dash .topbar .who{margin:auto 0 0;padding:10px 8px 0;border-top:1px solid var(--line);display:grid;gap:4px;font-size:13px}
.dash .me{display:flex;align-items:center;gap:10px;min-width:0}
.dash .avatar{flex:none;width:26px;height:26px;border-radius:13px;background:var(--line-2);color:var(--text);font-size:11px;display:grid;place-items:center}
.dash .me-name{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash .me-acts{display:flex;flex-wrap:wrap;gap:0 6px;margin-left:-.4rem}
.dash .me-acts button.link{font-size:12px;color:var(--text-3);min-height:28px}
.dash .work{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.dash .crumbbar{position:sticky;top:0;z-index:5;min-height:48px;display:flex;align-items:center;gap:8px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--page);font-size:13px}
.dash .crumbpath{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap;color:var(--text)}
.dash .crumbpath a{color:var(--text-2);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.dash .crumbpath a:hover{color:var(--text)}
.dash .crumbpath .sep{color:var(--sep)}
.dash .live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);white-space:nowrap}
.dash .live:empty{display:none}
.dash .live-dot{width:7px;height:7px;border-radius:4px;background:var(--accent-text)}
.dash .page{max-width:1440px;margin:0;width:100%;padding:22px 24px 64px;gap:18px}
.dash .page-head p{font-size:13px;color:var(--text-3)}

/* ---------- panels, tables and controls ---------- */
.dash .panel{background:var(--panel);border-color:var(--line);border-radius:8px}
.dash .panel-head{padding:10px 14px;background:var(--panel);border-bottom-color:var(--line);border-radius:8px 8px 0 0}
.dash .panel-head .count{font-size:12px;background:var(--hover);color:var(--text-2)}
.dash .panel-head .aside{font-size:12px}
.dash .panel-body{padding:14px}
.dash table.list{font-size:13px}
.dash table.list th{padding:8px 14px;font-size:12px;font-weight:500;color:var(--text-3);background:var(--head);border-bottom-color:var(--line);text-transform:lowercase}
.dash table.list td{padding:10px 14px;border-bottom-color:var(--line-soft);background:var(--field)}
.dash label{font-size:13px;font-weight:500;color:var(--text-2)}
.dash input,.dash select,.dash textarea{background:var(--field);border-color:var(--line-2);border-radius:6px;min-height:32px;padding:5px 8px;font-size:13px;color:var(--text)}
.dash input:hover,.dash select:hover,.dash textarea:hover{border-color:var(--line-3)}
.dash .btn,.dash button{min-height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500}
.dash button.secondary,.dash a.btn.secondary{background:var(--raise);color:var(--text);border:1px solid var(--line-2);min-height:32px;padding:0 12px}
.dash button.secondary:hover,.dash a.btn.secondary:hover{background:var(--hover)}
.dash button.link{color:var(--text-2);min-height:28px}
.dash button.link:hover{color:var(--text)}
.dash .tag{font-size:11px;font-weight:500}
.dash .tag.info{background:var(--hover);color:var(--text-2)}
.dash .note{background:var(--panel)}
.dash .crumbs{font-size:13px}
.dash .toast{background:var(--toast-bg);color:var(--toast-ink);font-weight:500;font-size:13px}
.dash .toast-btn{color:var(--toast-ink)}
.dash dialog{border-color:var(--line-2)}
.dash dialog::backdrop{background:rgba(0,0,0,.6)}
.dash kbd,.dash .mono{font-family:var(--mono)}
.dash .gate,.dash .gate ~ .panel{max-width:560px;width:100%}

/* summary tiles (a label over a big number or word) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.tile{background:var(--head);border:1px solid var(--line);border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tile .k{font-size:12px;color:var(--text-3)}
.tile .v{font-size:20px;line-height:1.25;overflow-wrap:anywhere}
.tile .v small{font-size:13px;color:var(--text-3)}
.tile .v .mono{font-size:14px;color:var(--text-3)}
@media (max-width:560px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tile{padding:10px 12px;gap:4px}.tile .v{font-size:17px}}
.grid.times{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}

/* ---------- phones and small windows: the sidebar becomes a bar, and the menu folds away behind Menu ---------- */
@media (max-width:900px){
  .dash .shell{flex-direction:column}
  .dash .topbar{width:auto;height:auto;position:sticky;top:0;z-index:10;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .dash .topbar-in{flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px 12px;gap:4px 8px;min-height:0}
  .dash .logo{padding:4px 6px}
  .dash .side-toggle:not([hidden]){display:inline-flex;align-items:center;margin-left:auto;background:var(--raise);color:var(--text);border:1px solid var(--line-2);min-height:36px}
  .dash .side-nav{display:none;flex-basis:100%;padding:6px 0 4px}
  .dash .topbar.open .side-nav{display:flex}
  .dash .menu{overflow:visible;margin:0;padding:0;order:0;flex:none}
  .dash .menu a{padding:10px;font-size:14px}
  .dash .topbar .who{margin-top:8px}
  .dash .crumbbar{position:static;padding:0 16px}
  .dash .page{padding:16px 16px 56px}
  .dash input,.dash select,.dash textarea,.dash .btn,.dash button{min-height:40px}
  .dash button.link{min-height:32px}
}
@media (max-width:560px){.dash .live{display:none}}
/* Read-only tables on a phone: the first cell as the row's heading, then label and value side by side (not stacked). */
@media (max-width:720px){
  .dash table.kv td[data-label]{display:flex;gap:12px;align-items:baseline;padding:3px 14px}
  .dash table.kv td[data-label]::before{flex:0 0 40%;margin:0;font:500 12px/1.4 Inter,system-ui,sans-serif;color:var(--text-3)}
  .dash table.kv td:first-child{padding-top:10px;font-weight:600}
  .dash table.kv td:first-child::before{display:none}
  .dash table.kv td:last-child{padding-bottom:10px}
  .dash table.kv td:empty{display:none}
}
@media print{
  .dash .shell{display:block}
  .dash .topbar,.dash .crumbbar{display:none}
  :root.dash:not(.x) body{background:#fff;color:#111}
  .dash .page{padding:0}
}