/* All Areas Build: what this app adds to the suite's look (ui/app.css, copied from packages/ui).
   The dashboard look (Angus, 29 Oct 2026: the same as Tour and Patch, in Build orange, with a light switch). The frame
   below follows Tour's tour.css class for class (.shell, .topbar, .side-nav, .menu, .crumbbar, .page), so it swaps for
   the shared packages/ui/dash.css when that lands (the Patch chat is making it). Build orange is used sparingly: the
   main button, the live dot, the selected unit. Printing stays black on white. */

/* ---------------------------------------------------------------- colours */
:root{--aa:#C0362D}
:root.dash{color-scheme:dark;--mono:"Source Code Pro",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root.dash:not(.x) body[data-pass="build"]{
  --page:#171717; --panel:#1C1C1C; --head:#1F1F1F; --raise:#232323; --hover:#2A2A2A; --field:#171717;
  --text:#EDEDED; --text-2:#A1A1A1; --text-3:#8F8F8F; --line:#2E2E2E; --line-soft:#2A2A2A; --line-2:#3A3A3A;
  --link:#EDEDED; --focus:#F29A5C;
  --ok:#3ECF8E; --ok-bg:#15291F; --warn:#F0C25A; --warn-bg:#352B12; --bad:#F38B82; --bad-bg:#3A1C1A; --info-bg:#262626;
  --brand:#E07B2E; --brand-ink:#1E0C00; --brand-soft:#2A2A2A; --accent-text:#F29A5C; --aa:#C0362D;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:14px; line-height:1.5}
/* Daylight (the workshop with the roller door open): the same layout, light greys. */
:root.dash[data-theme="light"]{color-scheme:light}
:root.dash[data-theme="light"]:not(.x) body[data-pass="build"]{
  --page:#F6F6F5; --panel:#FFFFFF; --head:#F2F2F1; --raise:#FFFFFF; --hover:#ECECEA; --field:#FFFFFF;
  --text:#171717; --text-2:#5C5C5C; --text-3:#6B6B6B; --line:#E2E2E0; --line-soft:#EBEBE9; --line-2:#CFCFCC;
  --link:#171717; --focus:#B4500B;
  --ok:#1B6E3A; --ok-bg:#E3F3E8; --warn:#7A5100; --warn-bg:#FCF1D6; --bad:#B4231B; --bad-bg:#FBE4E2; --info-bg:#EFEFEE;
  --brand:#C2570C; --brand-ink:#FFFFFF; --brand-soft:#FBE9DC; --accent-text:#B4500B; --aa:#B4231B}

/* ---------------------------------------------------------------- the frame: sidebar, then the trail bar over the page */
.aa-home{display:inline-flex;align-items:center;gap:7px;min-height:40px;color:var(--text);font-weight:600;text-decoration:none;white-space:nowrap}
.aa-mark{background:var(--aa);color:#fff;font:400 .72rem/1.2 "Saira Stencil One","Arial Narrow",Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;height:24px;padding:0 7px;border-radius:5px}
.aa-home:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.dash a:hover{color:var(--text)}
.dash h1{font-size:22px;font-weight:500}
.dash h2{font-size:13px;font-weight:500}
.dash h3{font-size:13px;font-weight:600}
.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 .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}
.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}
}
.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;text-decoration: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 a.sub{padding-left:22px}
.dash .menu-head{margin:14px 10px 4px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash .topbar .who{margin:auto 0 0;padding:10px 8px 0;border-top:1px solid var(--line);display:grid;gap:4px;font-size:13px;color:var(--text-2)}
.dash .who .me{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash .who .acts{display:flex;flex-wrap:wrap;gap:0 6px;margin-left:-.4rem}
.dash .who button.link{font-size:12px;color:var(--text-3);min-height:28px;text-decoration:none}
.dash .who button.link:hover{color:var(--text)}
.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(--text-3)}
.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 .live.bad{color:var(--bad)}.dash .live.bad .live-dot{background:var(--bad)}
.dash .page{max-width:1440px;margin:0;width:100%;padding:22px 24px 64px;gap:18px}
.dash .page:focus{outline:none}
.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)}
.dash table.list td{padding:10px 14px;border-bottom-color:var(--line-soft);background:var(--page)}
.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 .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)}
.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 button.danger{background:var(--raise);color:var(--bad);border:1px solid var(--line-2)}
.dash .tag{font-size:11px;font-weight:500}
.dash .tag.info{background:var(--hover);color:var(--text-2)}
.dash .tag.brand{background:var(--brand);color:var(--brand-ink)}
.dash .toast{background:var(--text);color:var(--page);font-weight:500;font-size:13px}
.dash dialog{border:1px solid var(--line-2);border-radius:8px;padding:0;max-width:520px;width:calc(100% - 32px);background:var(--panel);color:var(--text)}
.dash dialog::backdrop{background:rgba(0,0,0,.6)}
.dash dialog form{display:grid;gap:12px;padding:16px}
.dash .mono{font-family:var(--mono)}
a.btn{display:inline-flex;align-items:center;text-decoration:none}
a.btn.secondary{background:var(--raise);color:var(--text);border:1px solid var(--line-2)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.note{border-radius:8px;border:1px solid var(--line);padding:12px 16px;background:var(--panel)}
.note p{margin:0}.note p + p{margin-top:6px}
.note.ok{background:var(--ok-bg);border-color:transparent}
.note.warn{background:var(--warn-bg);border-color:transparent}
.note.bad{background:var(--bad-bg);border-color:transparent}
.grid{display:grid;gap:12px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grid.cols-2,.grid.cols-3{grid-template-columns:minmax(0,1fr)}}
.gate{max-width:520px;width:100%}
.gate .panel-body,.gate form{display:grid;gap:12px}
.gate .links{display:flex;flex-wrap:wrap;gap:4px 12px;margin-left:-.4rem}
.aa-signin{display:grid;gap:10px}.aa-signin-list{display:grid;gap:8px}.aa-signin-btn{display:flex;align-items:center;width:100%;justify-content:center;gap:.6em}
.aa-signin-btn svg{flex:none}.aa-signin-or{margin:0;color:var(--text-2);font-size:.9rem}

/* 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 .topbar .aa-home{padding:4px 0 4px 6px}.dash .topbar .logo{padding:4px 0}
  .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 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}}

/* ---------------------------------------------------------------- the builds list and a build's page */
.builds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.bcard{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;color:var(--text);text-decoration:none;min-width:0}
.bcard:hover{border-color:var(--line-2);background:var(--raise)}
.bcard .top{display:flex;gap:8px;align-items:baseline;justify-content:space-between}
.bcard .name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcard .sub{font-size:12px;color:var(--text-3)}
.meter{height:6px;border-radius:3px;background:var(--hover);overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok);transition:width .2s}
.status{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:var(--text-2);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:4px;background:var(--text-3)}
.status.building::before{background:var(--accent-text)}.status.testing::before{background:var(--warn)}.status.done::before{background:var(--ok)}.status.cancelled::before{background:var(--bad)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,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)}
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.toolcard{display:grid;gap:4px;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);text-decoration:none}
.toolcard:hover{border-color:var(--brand)}
.toolcard b{font-weight:600;font-size:14px}
.toolcard span{font-size:12px;color:var(--text-3)}
.steps{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;width:max-content;max-width:100%}
.steps button{border:0;border-radius:0;background:var(--raise);color:var(--text-2);border-right:1px solid var(--line-2)}
.steps button:last-child{border-right:0}
.steps button[aria-pressed="true"]{background:var(--brand);color:var(--brand-ink)}
.empty{display:grid;gap:10px;justify-items:start;padding:28px;border:1px dashed var(--line-2);border-radius:8px}
.pick{display:grid;gap:6px;max-height:50vh;overflow:auto}
.pick label{display:flex;gap:10px;align-items:center;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.pick label:has(input:checked){border-color:var(--brand)}
.pick input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--brand)}
.check{display:flex;align-items:center;gap:8px;font-weight:400}
.check input{width:18px;height:18px;min-height:0;margin:0;accent-color:var(--brand)}

/* ---------------------------------------------------------------- the workshop checklist (phone first) */
.ws{max-width:680px;width:100%;display:grid;gap:14px}
.ws-bar{position:sticky;top:48px;z-index:4;background:var(--page);padding:8px 0}
@media (max-width:900px){.ws-bar{top:0}}
.ws-count{display:flex;justify-content:space-between;font-size:12px;color:var(--text-2);margin-top:6px}
.ws-list{list-style:none;margin:0;padding:0}
.ws-list li label{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border-top:1px solid var(--line-soft);cursor:pointer;font-weight:400;color:var(--text);font-size:14px}
.ws-list li:first-child label{border-top:0}
.ws-list input{width:22px;height:22px;min-height:0;margin:1px 0 0;accent-color:var(--ok)}
.ws-list .d{display:block;color:var(--text-3);font-size:12px}
.ws-list .by{display:block;color:var(--text-3);font-size:11px;margin-top:2px}
.ws-list li.done .t{text-decoration:line-through;color:var(--text-2)}
.allset{border:1px solid var(--ok);background:var(--ok-bg);color:var(--ok);border-radius:8px;padding:12px 14px;font-weight:600}

/* ---------------------------------------------------------------- the tools (rack planner, wiring, looms) inside the frame
   Each tool's own stylesheet is scoped to .tool; these map its colour names onto the dashboard's. */
.tool{--bg:var(--page);--surface:var(--panel);--ink:var(--text);--muted:var(--text-2);--build:var(--brand);--build-ink:var(--brand-ink);
  --sel:color-mix(in srgb,var(--brand) 18%,transparent);--bad:var(--bad);--warn:var(--warn);--ok:var(--ok);
  --font-body:var(--font);--font-head:var(--font);--font-display:"Saira Stencil One","Arial Narrow",Impact,sans-serif;
  display:grid;gap:18px;min-width:0}
.tool .card{border-radius:8px}

@media print{
  .dash .shell{display:block}
  .dash .topbar,.dash .crumbbar,.no-print{display:none!important}
  :root.dash body[data-pass="build"]{background:#fff;color:#111}
  .dash .page{padding:0}
}
.tool button.ghost,.tool .btn.ghost{background:var(--raise);color:var(--text);border:1px solid var(--line-2)}
.tool button.ghost:hover{background:var(--hover)}
.tool button.x{background:none;border:0;color:var(--text-2);min-height:28px;padding:0 6px}