/* Admin portal (S24), after "Admin Portal - Wireframe - V0.01": header, left menu
   (full / rail / hidden, drawer below 1024 px), page header, content on a 24-column
   grid, footer. Brand direction A "Line Level" (S24 stage 3, docs/brand/): a studio
   console, dark first, graphite neutrals, one amber accent (a VU needle) for actions
   and live signal; Archivo, Archivo Narrow for figures, Fragment Mono for identifiers. */
@font-face { font-family:"Archivo"; src:url(/ui/vendor/fonts/Archivo-var.woff2) format("woff2"); font-weight:400 800; font-display:swap; }
@font-face { font-family:"Archivo Narrow"; src:url(/ui/vendor/fonts/ArchivoNarrow-var.woff2) format("woff2"); font-weight:500 700; font-display:swap; }
@font-face { font-family:"Fragment Mono"; src:url(/ui/vendor/fonts/FragmentMono-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
/* colours, type and radii: ui/shared/tokens.css (shared with the board page); the layout here */
:root { --menu-w:244px; --rail-w:60px; --hdr-h:52px; --ftr-h:49px; }
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font:14px/1.5 var(--sans); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.hidden, [hidden] { display:none !important; }   /* [hidden]: also on a button or link, whose display is set */
.muted { color:var(--muted); } .dim { color:var(--dim); } .small { font-size:12.5px; }
.ok { color:var(--ok); } .warn { color:var(--warn); } .err { color:var(--err); }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
svg.i { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* buttons: 32 px in toolbars and the header, 36 px in page headers and dialogs; a.btn is a
   link that looks like one (S30: links no longer wrap buttons, which made two tab stops) */
button, a.btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r); cursor:pointer;
  border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); font-weight:600; white-space:nowrap; }
a.btn { text-decoration:none; font-size:inherit; box-sizing:border-box; }
button.ghost, a.btn.ghost { background:transparent; color:var(--fg); border-color:var(--line); }
button.ghost:hover, a.btn.ghost:hover { background:var(--chip); }
button.danger { background:transparent; color:var(--err); border-color:var(--err); }
button.big, a.btn.big { height:36px; }
button.sm, a.btn.sm { height:30px; padding:0 10px; font-size:12.5px; font-weight:500; }
button.icon { width:32px; padding:0; justify-content:center; background:transparent; color:var(--fg); border-color:var(--line); position:relative; }
button.icon:hover { background:var(--chip); }
button:disabled { opacity:.45; cursor:default; }
input[type=file] { padding:4px; color:var(--muted); }
input[type=file]::file-selector-button { font:600 13px var(--sans); height:24px; padding:0 10px; margin-right:12px; border:1px solid var(--line); border-radius:3px; background:var(--chip); color:var(--fg); cursor:pointer; }
input, select, textarea { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:5px 9px; min-height:32px; }
input:focus, select:focus, textarea:focus { border-color:var(--muted); outline:none; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:12px; line-height:20px; padding:0 9px; border-radius:99px;
  background:var(--chip); white-space:nowrap; color:var(--fg); }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--dim); }
.pill.ok::before { background:var(--ok); } .pill.warn::before { background:var(--warn); } .pill.err::before { background:var(--err); }
.pill.plain::before { display:none; }
/* the Wi-Fi signal (S36): ten segments lit by strength, in the status colour of its quality */
.sig { display:inline-flex; gap:2px; margin-right:7px; vertical-align:-1px; }
.sig i { width:4px; height:12px; border-radius:1px; background:var(--line); }
.sig i.on { background:var(--ok); } .sig.fair i.on { background:var(--warn); } .sig.weak i.on { background:var(--err); }
.count { font:500 11px/18px var(--mono); padding:0 6px; border-radius:99px; background:var(--chip); color:var(--fg); }
.live { font:600 10px/16px var(--mono); letter-spacing:.04em; padding:0 6px; border-radius:3px; background:var(--accent); color:var(--on-accent); }

/* ---------- shell */
#v-app { display:grid; height:100%; grid-template-columns:var(--menu-w) minmax(0,1fr); grid-template-rows:var(--hdr-h) minmax(0,1fr);
  grid-template-areas:"hdr hdr" "menu main"; }
#v-app.rail { grid-template-columns:var(--rail-w) minmax(0,1fr); }
#v-app.nomenu { grid-template-columns:0 minmax(0,1fr); }
#hdr { grid-area:hdr; display:flex; align-items:center; gap:8px; padding:0 12px 0 0; border-bottom:1px solid var(--line); background:var(--bar); min-width:0; }
#brand { display:flex; align-items:center; gap:10px; width:var(--menu-w); padding-left:14px; text-decoration:none; color:var(--strong); flex:none; }
#v-app.rail #brand, #v-app.nomenu #brand { width:auto; padding-right:6px; }
#brand .mark { width:24px; height:24px; flex:none; }
#brand b { font-weight:800; font-size:15px; letter-spacing:.03em; text-transform:none; }
#brand span { color:var(--dim); font-weight:400; }
.hsp { flex:1; min-width:8px; }
#ws { position:relative; }
#ws > button { gap:8px; }
#search-wrap { position:relative; display:flex; align-items:center; width:min(440px, 36vw); }
#search-wrap svg { position:absolute; left:9px; color:var(--dim); }
#search { width:100%; padding-left:30px; padding-right:40px; background:var(--bg); }
#search-wrap kbd { position:absolute; right:8px; font:11px var(--mono); color:var(--dim); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
#search-results { position:absolute; top:38px; left:0; right:0; z-index:40; }
#user > button { height:36px; border:0; background:transparent; color:var(--fg); padding:0 4px 0 6px; gap:8px; }
.avatar { width:28px; height:28px; border-radius:50%; background:var(--chip); display:grid; place-items:center; font:600 11px var(--mono); position:relative; }
.avatar::after { content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background:var(--ok); border:2px solid var(--card); }
.dot-badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--err); color:#fff; font:600 10px/17px var(--mono); }
.menu-pop { position:absolute; right:0; top:42px; z-index:40; min-width:240px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:0 12px 32px rgba(0,0,0,.35); padding:6px; }
.menu-pop a, .menu-pop .mi { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:6px; color:var(--fg); text-decoration:none; cursor:pointer; }
.menu-pop a:hover, .menu-pop .mi:hover { background:var(--chip); }
.menu-pop button.mi { width:100%; height:auto; border:0; background:transparent; color:var(--fg); font-weight:400;
  justify-content:flex-start; text-align:left; white-space:normal; }
.menu-pop .mi:focus-visible, button.nitem:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.menu-pop hr { border:0; border-top:1px solid var(--line); margin:6px 0; }
.menu-pop .head { padding:6px 9px; color:var(--dim); font-size:12px; }
#notif-pop { width:min(380px, 92vw); padding:0; }
#notif-pop .nh { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); }
#notif-list { max-height:min(420px, 60vh); overflow:auto; }
.nitem { display:grid; grid-template-columns:10px 1fr auto; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
button.nitem { width:100%; height:auto; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent;
  color:var(--fg); font-weight:400; text-align:left; white-space:normal; align-items:start; }
.badge { display:inline-block; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; background:var(--chip); color:var(--fg); }
.badge.ok { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.nitem:hover { background:var(--raise); }
.nitem i { width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--dim); }
.nitem.err i { background:var(--err); } .nitem.warn i { background:var(--warn); } .nitem.ok i { background:var(--ok); }
.nitem.read { opacity:.6; }

#menu { grid-area:menu; display:flex; flex-direction:column; border-right:1px solid var(--line); background:var(--bar); min-height:0; overflow:hidden; }
#v-app.nomenu #menu { border:0; }
#menu nav { flex:1; overflow:auto; padding:10px 8px; }
.msec { margin-bottom:6px; }
.msec > button { width:100%; justify-content:space-between; background:transparent; border:0; color:var(--dim); height:28px; padding:0 8px; font-size:12px; font-weight:500; }
.msec > button:hover { color:var(--fg); }
.msec > button svg { transition:transform .15s; }
.msec.closed > button svg { transform:rotate(-90deg); }
.msec.closed .mitems { display:none; }
.mitem { position:relative; display:flex; align-items:center; gap:10px; height:34px; padding:0 9px; margin:1px 0; border-radius:var(--r); color:var(--muted); text-decoration:none; }
.mitem:hover { background:var(--chip); color:var(--fg); }
.mitem.on { background:var(--chip); color:var(--strong); }
.mitem.on::before { content:""; position:absolute; left:-8px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.mitem .lbl { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mfoot { border-top:1px solid var(--line); height:var(--ftr-h); display:flex; align-items:center; padding:0 8px; gap:6px; flex:none; }
.mfoot .mitem { flex:1; }
#v-app.rail .msec > button, #v-app.rail .mitem .lbl, #v-app.rail .mitem .count, #v-app.rail .mitem .live, #v-app.rail #menu-close { display:none; }
#v-app.rail .mitem { justify-content:center; padding:0; }
#v-app.rail .msec.closed .mitems { display:block; }
#menu-close { display:none; }
#scrim { display:none; }

#main { grid-area:main; overflow:auto; display:flex; flex-direction:column; min-width:0; }
#content { flex:1; padding:22px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); padding-inline:clamp(16px, 2.2vw, 36px); width:100%; max-width:2200px; margin:0 auto; }
#ftr { min-height:var(--ftr-h); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:8px clamp(16px, 2.2vw, 36px);
  color:var(--dim); font-size:12.5px; }
#ftr a { color:var(--muted); text-decoration:none; } #ftr a:hover { color:var(--fg); }
#ftr .sp { flex:1; }

/* drawer: below 1024 px or portrait */
@media (max-width:1023px), (orientation:portrait) and (max-width:1366px) {
  #v-app, #v-app.rail, #v-app.nomenu { grid-template-columns:minmax(0,1fr); grid-template-areas:"hdr" "main"; }
  #brand { width:auto; padding-right:6px; }
  #menu { position:fixed; z-index:60; top:0; bottom:0; left:0; width:min(300px, 86vw); transform:translateX(-102%); transition:transform .2s; border-right:1px solid var(--line); }
  #v-app.drawer #menu { transform:none; }
  #v-app.drawer #scrim { display:block; position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.45); }
  #menu-close { display:flex; }
  #v-app.rail .msec > button, #v-app.rail .mitem .lbl, #v-app.rail .mitem .count, #v-app.rail .mitem .live { display:revert; }
  #v-app.rail .mitem { justify-content:flex-start; padding:0 9px; }
}
@media (max-width:899px) { #search-wrap { display:none; } #search-btn { display:inline-flex !important; } }
@media (max-width:767px) { #ws, #user .uname, #brand span { display:none; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* ---------- page header, tabs, banner */
.phead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 20px; margin-bottom:18px; }
.crumbs { font-size:12.5px; color:var(--dim); margin-bottom:4px; }
.crumbs a { color:var(--muted); text-decoration:none; } .crumbs a:hover { color:var(--fg); }
.phead h1 { margin:0; font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.015em; color:var(--strong); display:flex; align-items:center; gap:12px; flex-wrap:wrap; text-wrap:balance; }
.phead p { margin:4px 0 0; color:var(--muted); max-width:72ch; }
.pact { display:flex; flex-wrap:wrap; gap:8px; }
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; }
.tabs a { padding:9px 12px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; display:flex; gap:6px; align-items:center; }
.tabs a:hover { color:var(--fg); }
.tabs a.on { color:var(--strong); border-bottom-color:var(--strong); }
.banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:10px 14px; margin-bottom:16px; border:1px solid var(--line);
  border-left:3px solid var(--warn); border-radius:var(--r2); background:var(--card); }
.banner .t { flex:1; min-width:220px; }

/* ---------- content grid and widgets */
.g24 { display:grid; grid-template-columns:repeat(24, minmax(0,1fr)); gap:14px; }
.s6 { grid-column:span 6; } .s8 { grid-column:span 8; } .s16 { grid-column:span 16; } .s24 { grid-column:span 24; }
@media (min-width:2200px) { .g24 .kpi { grid-column:span 4; } }
@media (max-width:1279px) { .s6 { grid-column:span 12; } .s16, .s8 { grid-column:span 24; } }
@media (max-width:640px) { .s6 { grid-column:span 24; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:16px; min-width:0; }
.card > h2:first-child, .wh h2 { margin-top:0; }
h2 { font-size:15px; font-weight:600; margin:22px 0 10px; color:var(--strong); }
.wh { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.wh h2 { margin:0; }
/* figures: no boxes, a hairline between them (S28) */
#kpis, #k-kpis { margin:8px 0 28px; }
.card.kpi { background:none; border:0; border-left:1px solid var(--line); border-radius:0; padding:2px 0 2px 16px; }
.kpi .lbl { color:var(--muted); font-size:12.5px; }
.dot { width:7px; height:7px; border-radius:50%; flex:none; background:var(--dim); } .dot.ok { background:var(--ok); } .dot.warn { background:var(--warn); } .dot.err { background:var(--err); }
.phead h1 .vtitle { font:600 24px/30px var(--mono); letter-spacing:-.01em; }
.prog { display:inline-block; width:120px; height:4px; border-radius:2px; background:var(--chip); vertical-align:middle; margin-right:10px; overflow:hidden; }
.prog i { display:block; height:100%; background:var(--accent); }
.phead p.takeaway { color:var(--fg); font-size:15px; display:flex; align-items:center; gap:8px; }
.kpi .val { font:700 30px/38px var(--narrow); letter-spacing:0; color:var(--strong); font-variant-numeric:tabular-nums; margin:4px 0 2px; }
.kpi .sub { font-size:12.5px; color:var(--dim); }
.seg { display:inline-flex; gap:2px; padding:2px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); }
.seg button { height:26px; padding:0 10px; border:0; background:transparent; color:var(--muted); border-radius:6px; font-size:12px; }
.seg button.on { background:var(--chip); color:var(--strong); }
.legend { display:flex; gap:14px; font-size:12px; color:var(--muted); }
.legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; vertical-align:-1px; }
#chart svg { width:100%; height:220px; display:block; }
#chart .gl { stroke:var(--line); stroke-width:1; }
#chart text { fill:var(--dim); font:11px var(--mono); }
.ev { display:grid; grid-template-columns:auto 1fr auto; gap:4px 10px; align-items:start; padding:9px 0; border-bottom:1px solid var(--line); }
.ev:last-child { border-bottom:0; }
.ev .when { color:var(--dim); font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.empty { text-align:center; padding:36px 16px; color:var(--muted); }
.empty b { display:block; color:var(--fg); font-size:15px; margin-bottom:4px; }

/* table */
.tbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.tbar .sp { flex:1; }
.chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border:1px dashed var(--line); border-radius:99px;
  background:transparent; color:var(--muted); font-size:12.5px; font-weight:400; }
.chip.on { border-style:solid; border-color:var(--muted); color:var(--strong); background:var(--chip); }
.tscroll { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r2); background:var(--card); }
table { width:100%; border-collapse:collapse; }
td, th { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-weight:500; color:var(--dim); font-size:12.5px; white-space:nowrap; background:var(--raise); }
tbody tr:last-child td { border-bottom:0; }
.rows tbody tr { cursor:pointer; } .rows tbody tr:hover { background:var(--raise); }
td.num { font-variant-numeric:tabular-nums; }
td.nowrap { white-space:nowrap; }
.mono { font-family:var(--mono); font-size:12.5px; }
.rowmenu { position:relative; }
.rowmenu .menu-pop { top:34px; min-width:200px; }
dl { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 20px; margin:0; }
dt { color:var(--muted); } dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.fgrid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start; }
@media (max-width:1100px) { .fgrid { grid-template-columns:minmax(0,1fr); } }
.fields { display:flex; flex-wrap:wrap; gap:14px 18px; }
.field { display:flex; flex-direction:column; gap:5px; min-width:150px; }
.field > span { font-size:12.5px; color:var(--muted); }
.aside .ev .when { font-size:11.5px; }
/* the board page's first card (S37): the board, its connection, its hardware side by side */
.bgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:18px 32px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.bgrid h2 { margin:0 0 10px; }
.bgrid dl { gap:7px 16px; }
.card > h2 + .fields { margin-top:-2px; }
.field .row input { width:190px; }
.field .fval { line-height:32px; }
.facts { margin:12px 0 0; }

/* logs, health, toolkit, docs (kept from the previous UI) */
#log-out { background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; height:min(560px, 62vh); overflow:auto;
  font:12px/1.5 var(--mono); white-space:pre-wrap; word-break:break-word; margin:10px 0 0; }
#log-out .E { color:var(--err); } #log-out .W { color:var(--warn); } #log-out .D, #log-out .V { color:var(--dim); }
#log-out .t { color:var(--dim); }
/* S33: lines of an earlier start, read back from the board's flash after it started again */
#log-out .e { box-shadow:inset 2px 0 0 var(--line); padding-left:8px; }
#tk-log { background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; height:240px; overflow:auto;
  font:12px/1.5 var(--mono); white-space:pre-wrap; margin:0; }
#tk-log .ok { color:var(--ok); } #tk-log .err { color:var(--err); } #tk-log .warn { color:var(--warn); }
#tk-log .t { color:var(--dim); }
/* S39: the serial monitor, the firmware's console with its log colours */
.tk-mon { background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; height:320px; overflow:auto;
  font:12px/1.45 var(--mono); white-space:pre-wrap; word-break:break-all; margin:8px 0 0; }
.tk-mon .i { color:var(--ok); } .tk-mon .w { color:var(--warn); } .tk-mon .e { color:var(--err); } .tk-mon .d { color:var(--dim); }
#tk-nvs .filters { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 8px; }
.tk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:14px; margin-bottom:14px; }
.tk-grid h2 { margin-top:0; }
label.opt { display:block; margin:6px 0; }
/* Health and tasks: the panel itself is ui/shared/health.css (shared with the board page) */
#healthpanel > .wh { margin-bottom:16px; }
#docs-wrap { display:grid; grid-template-columns:260px minmax(0,1fr); gap:14px; align-items:start; }
#docs-nav { padding:8px; position:sticky; top:0; }
#docs-nav a { display:block; padding:7px 9px; border-radius:var(--r); color:var(--fg); text-decoration:none; }
#docs-nav a.on { background:var(--chip); }
@media (max-width:860px) { #docs-wrap { grid-template-columns:minmax(0,1fr); } #docs-nav { position:static; } }
:is(#doc, #lib-page) { line-height:1.6; overflow-wrap:break-word; padding:32px 40px 48px; }
:is(#doc, #lib-page) > :not(figure):not(table):not(pre):not(#doc-editor):not(#lib-editor) { max-width:72ch; }
:is(#doc, #lib-page) h1 { font-size:28px; line-height:1.15; margin:0 0 16px; letter-spacing:-.015em; }
:is(#doc, #lib-page) h2 { font-size:18px; line-height:1.3; margin:40px 0 12px; padding-top:24px; border-top:1px solid var(--line); }
:is(#doc, #lib-page) h1 + p, :is(#doc, #lib-page) h1 + p + p { color:var(--muted); font-size:15px; }
:is(#doc, #lib-page) h3 { font-size:15px; margin:28px 0 8px; }
:is(#doc, #lib-page) li + li { margin-top:4px; }
:is(#doc, #lib-page) th { text-align:left; font-weight:500; color:var(--muted); background:var(--raise); }
:is(#doc, #lib-page) th, :is(#doc, #lib-page) td { padding:7px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
:is(#doc, #lib-page) tr:last-child td { border-bottom:0; }
:is(#doc, #lib-page) td:first-child { white-space:nowrap; }
:is(#doc, #lib-page) table code { white-space:nowrap; }
:is(#doc, #lib-page) code { background:var(--chip); border-radius:4px; padding:1px 4px; font:12.5px var(--mono); }
:is(#doc, #lib-page) pre { background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; overflow:auto; }
:is(#doc, #lib-page) pre code { background:none; padding:0; }
:is(#doc, #lib-page) table { display:block; overflow-x:auto; margin:16px 0; font-size:13.5px; border:1px solid var(--line); border-radius:var(--r2); border-collapse:collapse; }
:is(#doc, #lib-page) blockquote { border-left:3px solid var(--line); margin:0; padding-left:12px; color:var(--muted); }
:is(#doc, #lib-page) figure { margin:16px 0; } :is(#doc, #lib-page) figcaption { font-size:12.5px; color:var(--muted); margin-top:4px; }
:is(#doc, #lib-page) .dg { background:#fff; border:1px solid var(--line); border-radius:var(--r2); padding:6px; min-height:60px; color:#1d2330; }
.dg-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.dg-modal { position:fixed; inset:0; z-index:80; background:var(--bg); display:flex; flex-direction:column; }
.dg-bar { display:flex; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--card); }
.dg-canvas { flex:1; position:relative; }
#doc-editor, #lib-editor { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:1100px) { #doc-editor, #lib-editor { grid-template-columns:1fr; } }
#doc-src, #lib-src { width:100%; min-height:65vh; font:13px/1.5 var(--mono); background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; }
#doc-prev, #lib-prev { border:1px solid var(--line); border-radius:var(--r2); padding:10px 14px; max-height:70vh; overflow:auto; }
/* Library (S34): models by vendor on the left; a model's section in two columns, the vendor's and ours */
#lib-wrap { display:grid; grid-template-columns:260px minmax(0,1fr); gap:14px; align-items:start; }
#lib-nav { padding:8px; position:sticky; top:0; }
#lib-nav a { display:block; padding:7px 9px; border-radius:var(--r); color:var(--fg); text-decoration:none; overflow-wrap:anywhere; }
#lib-nav a.on { background:var(--chip); }
#lib-nav .lib-vendor { font-size:12.5px; color:var(--dim); padding:10px 9px 4px; }
#lib-nav .lib-vendor:first-child { padding-top:4px; }
#lib-add { width:100%; margin-top:8px; }
@media (max-width:860px) { #lib-wrap { grid-template-columns:minmax(0,1fr); } #lib-nav { position:static; } }
.lib-note { margin:-6px 0 14px; max-width:72ch; }
.lib-cols { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; align-items:start; }
@media (max-width:1100px) { .lib-cols { grid-template-columns:minmax(0,1fr); } }
.lib-col > h2 { margin:0; font-size:15px; }
.lib-col > p.small { margin:2px 0 10px; }
.lib-list { list-style:none; margin:0; padding:0; }
.lib-list li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line); }
.lib-list li:first-child { border-top:0; }
.lib-ic { color:var(--muted); padding-top:2px; flex:none; }
.lib-t { flex:1; min-width:0; overflow-wrap:anywhere; }
.lib-t > a { color:var(--strong); text-decoration:none; font-weight:500; }
.lib-t > a:hover { text-decoration:underline; }
.lib-n { font-size:13px; color:var(--fg); margin-top:3px; }
.lib-list .icon { flex:none; color:var(--dim); }
.lib-list .icon:hover { color:var(--fg); }
.lib-empty { color:var(--muted); margin:6px 0 2px; }
.lib-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px; margin-top:8px; }
.lib-gal-h { font-size:12.5px; color:var(--muted); margin:16px 0 0; }
.lib-pic { position:relative; margin:0; background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.lib-pic img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:contain; background:var(--raise); }
.lib-pic figcaption { font-size:12px; line-height:1.35; color:var(--muted); padding:6px 8px 8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lib-pic .lib-del { position:absolute; top:4px; right:4px; background:var(--card); border-radius:var(--r); }
.lib-acts { margin-top:12px; gap:6px; }
#lib-page { padding:28px 36px 40px; }
.lib-pbar { justify-content:flex-end; gap:8px; }
.lib-pfoot { margin-top:24px; }
progress { width:100%; }

/* modal, bulk bar, rollout */
#modal { position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:16px; }
#modal .box { width:min(520px, 100%); max-height:90vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:20px; box-shadow:0 24px 64px rgba(0,0,0,.45); }
#modal h3 { margin:0 0 4px; font-size:17px; color:var(--strong); }
#modal .sub { color:var(--muted); margin:0 0 14px; }
#modal .acts { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
.bulk { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; margin-bottom:10px; border:1px solid var(--accent);
  border-radius:var(--r2); background:color-mix(in srgb, var(--accent) 8%, var(--card)); }
.bulk b { margin-right:6px; }
td.cb, th.cb { width:36px; padding-right:0; }
/* the Boards table (S37): views and the column chooser; the selection and the board's name stay in
   place while the other columns scroll; a cell of several lines (LAN IP, MAC address) as a stack */
.chips { display:flex; flex-wrap:wrap; gap:6px; }
#b-q { width:min(320px, 100%); }
/* a filter as a dropdown: its name, then the choice (S37) */
.fsels { display:flex; flex-wrap:wrap; gap:6px; }
.fsel { display:inline-flex; align-items:center; height:28px; border:1px dashed var(--line); border-radius:99px; padding:0 4px 0 11px; font-size:12.5px; color:var(--muted); }
.fsel.on { border-style:solid; border-color:var(--muted); background:var(--chip); color:var(--fg); }
.fsel select { min-height:0; height:24px; border:0; background:transparent; padding:0 4px; font-size:12.5px; color:var(--fg); cursor:pointer; field-sizing:content; }
.fsel select:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* a table with its own bar on top: how it shows (views, columns) and how many (S37) */
.tcard { border:1px solid var(--line); border-radius:var(--r2); background:var(--card); }
.tcard > .tscroll { border:0; border-top:1px solid var(--line); border-radius:0 0 var(--r2) var(--r2); }
.tcard-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 10px; }
.tcard-bar .sp { flex:1; }
.colpick { position:relative; }
.colpick .menu-pop { left:0; right:auto; top:34px; min-width:220px; max-height:min(440px, 70vh); overflow:auto; }
.menu-pop label.mi { cursor:pointer; }
.menu-pop label.mi input { margin:0; min-height:0; }
table.boards .stick { position:sticky; z-index:1; background:var(--card); }
table.boards th.stick { background:var(--raise); z-index:2; }
table.boards .cb.stick { left:0; }
table.boards .name.stick { left:36px; box-shadow:1px 0 0 var(--line); }
.rows tbody tr:hover td.stick { background:var(--raise); }
table.boards td { white-space:nowrap; }
.stack { display:grid; gap:3px; }
td .sub { font-size:12px; line-height:16px; color:var(--muted); }
td .sub .k { display:inline-block; min-width:76px; padding-right:6px; color:var(--dim); }   /* S42: "Connection" fits */
a.ext { color:var(--fg); text-decoration:underline dotted var(--dim); text-underline-offset:3px; }
a.ext:hover { color:var(--accent); text-decoration-color:var(--accent); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
input[type=checkbox] { width:16px; height:16px; min-height:0; accent-color:var(--accent); }
.steps { display:flex; flex-direction:column; gap:10px; }
.batch { border:1px solid var(--line); border-radius:var(--r2); padding:10px 12px; }
.batch .bh { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--muted); font-size:12.5px; }
.brow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:4px 0; align-items:center; }
.pick { max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:var(--r2); }
.pick label { display:flex; gap:10px; align-items:center; padding:7px 10px; border-bottom:1px solid var(--line); cursor:pointer; }
.pick label:last-child { border-bottom:0; }
.fsec { display:grid; grid-template-columns:minmax(180px, 260px) minmax(0,1fr); gap:10px 24px; padding:18px 0; border-top:1px solid var(--line); }
.fsec:first-of-type { border-top:0; padding-top:4px; }
.fsec h3 { margin:0; font-size:14px; color:var(--strong); } .fsec .help { color:var(--muted); font-size:12.5px; margin-top:4px; }
@media (max-width:760px) { .fsec { grid-template-columns:minmax(0,1fr); } }
.ferr { color:var(--err); font-size:12.5px; }

/* side drawer (wireframe pattern): quick view without leaving the page */
#drawer { position:fixed; inset:0; z-index:84; display:flex; justify-content:flex-end; background:rgba(0,0,0,.4); }
#drawer .panel { width:min(420px, 100%); height:100%; overflow:auto; background:var(--card); border-left:1px solid var(--line); padding:18px 20px; }
#drawer .panel h3 { margin:0 0 2px; font-size:18px; color:var(--strong); }
.skip { position:absolute; left:-9999px; top:8px; z-index:100; background:var(--accent); color:var(--on-accent); padding:8px 12px; border-radius:var(--r); }
.skip:focus { left:8px; }
.toast button { height:28px; }

/* login, toast */
#v-login { min-height:100%; display:grid; place-items:center; padding:16px; }
.login { width:min(360px, 100%); }
.login .mark { width:36px; height:36px; margin-bottom:14px; }
.toast { position:fixed; right:16px; bottom:16px; z-index:90; display:flex; gap:12px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--ok); border-radius:var(--r2); padding:10px 14px; box-shadow:0 12px 32px rgba(0,0,0,.3); max-width:min(460px, calc(100vw - 32px)); }
.toast.err { border-left-color:var(--err); }
/* S36: the camera boards' photos (js/photos.js) */
.ph-big, .ph-thumb { height: auto; min-height: 0; line-height: 0; font: inherit; }   /* not the 32 px of a button */
.ph-big { display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bar); cursor: zoom-in; width: 100%; max-width: 640px; overflow: hidden; }
.ph-big img { display: block; width: 100%; height: auto; }
.ph-strip, .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-top: 10px; }
.ph-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ph-thumb { position: relative; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bar); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.ph-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph-thumb:focus-visible, .ph-big:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ph-sound { position: absolute; right: 6px; bottom: 4px; font-size: 12px; color: var(--strong); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 0 5px; border-radius: var(--r); }
.ph-day { margin: 18px 0 4px; font-size: 14px; font-weight: 600; }
.ph-view { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--r); }
/* the camera's live view (S37): a monitor over the page, its picture through the RPS server */
#live { position:fixed; inset:0; z-index:86; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.72); }
#live .lv { width:min(1120px, 100%); max-height:100%; display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r2); box-shadow:0 24px 64px rgba(0,0,0,.45); }
.lv-top, .lv-foot { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.lv-top h3 { flex:1; min-width:0; margin:0; font-size:16px; color:var(--strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lv-state { display:inline-flex; align-items:center; gap:8px; font:12px/20px var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; }
.lv-screen { position:relative; display:grid; place-items:center; min-height:min(300px, 50vh); background:#000; border-radius:var(--r); overflow:hidden; }
.lv-screen img { display:block; max-width:100%; max-height:calc(100vh - 170px); }
.lv-screen img:not([src]) { visibility:hidden; }
.lv-screen p { position:absolute; inset:auto 16px; margin:0; padding:10px 12px; text-align:center; color:var(--fg); background:rgba(0,0,0,.6); border-radius:var(--r); }
.lv-foot .sp { flex:1; }

/* S39: the files on a board's card */
#bd-files .crumbs a { color:var(--fg); }
#bd-files .fusage { display:inline-flex; align-items:center; gap:8px; }
#bd-files .fusage .hx-meter { width:90px; }
.fl-table td { vertical-align:middle; }
.fl-img { max-width:100%; max-height:70vh; border:1px solid var(--line); border-radius:var(--r2); display:block; }
.fl-text { background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); padding:10px; max-height:420px; overflow:auto;
  font:12px/1.45 var(--mono); white-space:pre-wrap; word-break:break-all; margin:0; }