/* ==========================================================================
   THE DRAFTING SKIN: Cyanotype and Vellum (D145, 2026-10-12).

   The owner, after two rounds of concepts (Desktop\WrenchUr-hub-concepts):
   "I like pitch circle, its a nice design, lets use that design look and redo
   all of wrenchur.com". The whole app is drawn as an engineering print:
     dark  = Cyanotype: white linework on Prussian blue, a faint grid
     light = Vellum:    blue-black ink on drafting film, a non-repro blue grid
   One lettering face (M PLUS Rounded 1c, self-hosted), square corners, real
   line weights, depth by line and never by shadow. Every top bar is a title
   block. Counts are balloons with a word. SAFETY is the one double-framed,
   hatched note and the one use of the red.

   NOW THE HUB FAMILY ONLY (port 6, STYLE-A, 2026-10-31). The owner: every
   screen except the menu, the landing page, sign-in, recover, new password and
   the boot screen looks like the other line's. Every rule below is written
   under :where(<html> not marked data-look="plain"), so it draws on those six
   screens and on nothing else; core/router.js showScreen() marks the page
   plain for every other screen (core/icons.js lookFor), and the shared sheets
   alone draw it. tools/scope-look.mjs wrote the scope and
   tests/look-scope.test.mjs fails on any rule left outside it. :where() weighs
   nothing, so each rule keeps the exact weight it had and the menu draws as it
   did. Rules that only a work or data screen used were taken out, not scoped.

   Loaded LAST in index.html, after skin.css (the shop skin, D102), the way
   that file was: it re-points the tokens every sheet already reads, then
   restates the components in the drawing's terms. The hub's own geometry
   (the flange) is hubring.css and core/hubring.js. Nothing here changes a
   screen's structure, its copy or its behaviour.

   Rule 8 holds: nothing signals by hue alone. State is a word, a frame
   weight, a dash or a hatch; colour rides on top.
   ========================================================================== */

/* ---------- the lettering: M PLUS Rounded 1c, Latin only (SIL OFL, fonts/OFL.txt) ---------- */
@font-face{font-family:'M PLUS Rounded 1c'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/fonts/mplusrounded1c-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'M PLUS Rounded 1c'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/fonts/mplusrounded1c-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'M PLUS Rounded 1c'; font-style:normal; font-weight:800; font-display:swap;
  src:url('/fonts/mplusrounded1c-latin-800.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- the tokens ----------
   --d-* are the drawing's own. The old names every sheet reads (--bg, --chrome,
   --panel, --text, --accent ...) are pointed at them, so a module that never
   heard of this file still draws on the right paper in the right ink. */
:root:where(:not([data-look="plain"])){
  --draft:'M PLUS Rounded 1c','Segoe UI',system-ui,sans-serif;
  /* --cond stays the shop skin's condensed stack: the map's department names
     (mod/map/names.js) are measured in it, held to 22 px capitals, and the map
     is not redrawn here. Everything else that used it is set below. */
  --sans:var(--draft); --mono:var(--draft);

  /* line weights, as a drawing sets them: visible, thin, centre */
  --d-wv:1.9px; --d-wt:1px; --d-wc:.85px;

  /* Cyanotype */
  --d-ground:#143f71; --d-paper:#123a68; --d-lift:#1a4a80;
  --d-ink:#f3f7fb; --d-ink-2:#c3d5ea; --d-ink-3:#8db0d8;
  --d-rule:rgba(232,241,250,.42);
  --d-grid-1:rgba(214,232,255,.06); --d-grid-2:rgba(214,232,255,.12);
  --d-shade:rgba(220,235,255,.09);
  --d-red:#ff8a5e; --d-red-ink:#0a2242; --d-focus:#ffe169;

  --bg:var(--d-ground); --chrome:var(--d-paper); --panel:#164272; --panel-2:var(--d-lift);
  --line:var(--d-rule);
  --text:var(--d-ink); --muted:var(--d-ink-2);
  --accent:#a8d8ff; --accent-text:#0a2242; --accent-hover:#c9e7ff;
  --accent-dim:rgba(168,216,255,.13); --accent-line:rgba(168,216,255,.55); --accent-hi:rgba(168,216,255,.24);
  --brand:#a8d8ff; --brand-ink:var(--d-paper); --brand-lt:#a8d8ff; --ink-muted:var(--d-ink-2);
  --good:#8fe3a8; --warn:#ffd27a; --bad:#ffa3ad;
  --cta:var(--d-ink); --cta-text:#0a2242; --cta-hover:#ffffff; --cta-dim:rgba(243,247,251,.14);
  --motif-ink:var(--d-ink); --glow:transparent;
  --shadow:none; --shadow-sm:none;
  --r-sm:0; --r-md:0; --r-lg:0; --r-btn:0; --r-pill:0;
}
html:where(:not([data-look="plain"]))[data-theme="light"]{
  /* Vellum */
  --d-ground:#eef1ec; --d-paper:#fafbf7; --d-lift:#ffffff;
  --d-ink:#14263f; --d-ink-2:#3b5070; --d-ink-3:#5f7591;
  --d-rule:rgba(20,38,63,.42);
  --d-grid-1:rgba(58,152,214,.12); --d-grid-2:rgba(58,152,214,.26);
  --d-shade:rgba(20,38,63,.06);
  --d-red:#c8301b; --d-red-ink:#ffffff; --d-focus:#0a62c4;

  --bg:var(--d-ground); --chrome:var(--d-paper); --panel:#f6f8f3; --panel-2:var(--d-lift);
  --line:var(--d-rule);
  --text:var(--d-ink); --muted:var(--d-ink-2);
  --accent:#0b57b8; --accent-text:#ffffff; --accent-hover:#08468f;
  --accent-dim:rgba(11,87,184,.09); --accent-line:rgba(11,87,184,.5); --accent-hi:rgba(11,87,184,.16);
  --brand:#0b57b8; --brand-ink:var(--d-paper); --brand-lt:#0b57b8; --ink-muted:var(--d-ink-2);
  --good:#137140; --warn:#8a4b00; --bad:#a3233f;
  --cta:var(--d-ink); --cta-text:#ffffff; --cta-hover:#0a1a2e; --cta-dim:rgba(20,38,63,.08);
  --motif-ink:var(--d-ink); --glow:transparent;
  --shadow:none; --shadow-sm:none;
}
/* The green print (D148, the owner: "maybe a third press for another style
   print color"; of two drawn, he picked white lines on deep green). A dark
   style: the page keeps data-theme="dark", so every dark rule here and in
   every other sheet still applies, and data-print="green" re-points only the
   colours. The few blues written out in full (the coating's tint, the
   vignette, the map's surround, the dim behind a box) have their green below
   and in hubring.css. The map's own colours are untouched. */
html:where(:not([data-look="plain"]))[data-print="green"]{
  --d-ground:#1a4a36; --d-paper:#17432f; --d-lift:#1f5740;
  --d-ink:#f1f8f3; --d-ink-2:#c6dfcd; --d-ink-3:#90c0a1;
  --d-rule:rgba(232,248,238,.42);
  --d-grid-1:rgba(214,255,228,.06); --d-grid-2:rgba(214,255,228,.12);
  --d-shade:rgba(220,255,232,.09);
  --d-red:#ff8a5e; --d-red-ink:#0b2a1c; --d-focus:#ffe169;

  --bg:var(--d-ground); --chrome:var(--d-paper); --panel:#1b4a35; --panel-2:var(--d-lift);
  --accent:#a9efc3; --accent-text:#0b2a1c; --accent-hover:#cbf7da;
  --accent-dim:rgba(169,239,195,.13); --accent-line:rgba(169,239,195,.55); --accent-hi:rgba(169,239,195,.24);
  --brand:#a9efc3; --brand-lt:#a9efc3; --cta-text:#0b2a1c;
}

/* ---------- the paper ----------
   Cyanotype: an uneven coating, paper grain and darker edges, under a faint
   drawing grid (minor 20 px, major 100 px). Vellum: drafting film with the
   non-repro blue grid showing through. Flat colour under everything else, so
   a card or a row is opaque paper and the grid shows only in the gutters. */
html:where(:not([data-look="plain"])),:where(html:not([data-look="plain"])) body{background-color:var(--d-ground); color:var(--d-ink);}
:where(html:not([data-look="plain"])) body{
  font-family:var(--draft); font-weight:500;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(ellipse 120% 95% at 50% 42%, transparent 55%, rgba(5,22,48,.42) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .93  0 0 0 0 1  .30 0 0 0 -.12'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .14 0 0 0 -.04'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(var(--d-grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid-2) 1px, transparent 1px),
    linear-gradient(var(--d-grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid-1) 1px, transparent 1px);
  background-size:auto, 520px 520px, 180px 180px, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-attachment:fixed;
}
/* the green print's coating: the same grain and grid, tinted green, its edges darker green */
html:where(:not([data-look="plain"]))[data-print="green"] body{
  background-image:
    radial-gradient(ellipse 120% 95% at 50% 42%, transparent 55%, rgba(4,30,18,.45) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 1  0 0 0 0 .9  .30 0 0 0 -.12'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .14 0 0 0 -.04'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(var(--d-grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid-2) 1px, transparent 1px),
    linear-gradient(var(--d-grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid-1) 1px, transparent 1px);
}
html:where(:not([data-look="plain"]))[data-theme="light"] body{
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .15  0 0 0 0 .2  .10 0 0 0 -.03'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"),
    linear-gradient(var(--d-grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid-2) 1px, transparent 1px),
    linear-gradient(var(--d-grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--d-grid-1) 1px, transparent 1px);
  background-size:180px 180px, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
:where(html:not([data-look="plain"])) ::selection{background:var(--d-ink); color:var(--d-ground);}
html:where(:not([data-look="plain"])){scrollbar-color:var(--d-ink-3) transparent;}
:where(html:not([data-look="plain"])) a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px;}

/* ---------- lettering ----------
   Titles, labels, controls and tags in capitals, as on a drawing; what a
   person wrote (notes, messages, a repair) stays as they wrote it. */
:where(html:not([data-look="plain"])) h1,:where(html:not([data-look="plain"])) h2,:where(html:not([data-look="plain"])) h3,:where(html:not([data-look="plain"])) .tile .tn,:where(html:not([data-look="plain"])) .hub-label,:where(html:not([data-look="plain"])) .topbar h2,:where(html:not([data-look="plain"])) .hero-title,:where(html:not([data-look="plain"])) .hero-line,
:where(html:not([data-look="plain"])) button,:where(html:not([data-look="plain"])) .admtab,:where(html:not([data-look="plain"])) .tabs button,:where(html:not([data-look="plain"])) label,:where(html:not([data-look="plain"])) .kv dt{font-family:var(--draft);}
:where(html:not([data-look="plain"])) h1{font-size:24px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
:where(html:not([data-look="plain"])) h2{font-size:17px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
:where(html:not([data-look="plain"])) h3{font-size:11.5px; font-weight:800; letter-spacing:.16em; color:var(--d-ink-2);
   text-transform:uppercase; border-bottom:1px solid var(--d-rule); padding-bottom:5px;}
:where(html:not([data-look="plain"])) p{line-height:1.55;}
:where(html:not([data-look="plain"])) .sub,:where(html:not([data-look="plain"])) .muted{color:var(--d-ink-2);}
:where(html:not([data-look="plain"])) label:not(:has(input)):not(:has(select)):not(:has(textarea)){
  font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--d-ink-2);
}
:where(html:not([data-look="plain"])) .mono,:where(html:not([data-look="plain"])) .kv dd,:where(html:not([data-look="plain"])) .ano b,:where(html:not([data-look="plain"])) .brow .bn,:where(html:not([data-look="plain"])) .srow .n,:where(html:not([data-look="plain"])) .item .h .n,:where(html:not([data-look="plain"])) .entry .c .h .n,:where(html:not([data-look="plain"])) table.ord td,:where(html:not([data-look="plain"])) table.ord th,
:where(html:not([data-look="plain"])) .ord .ov,:where(html:not([data-look="plain"])) .ord .od,:where(html:not([data-look="plain"])) .badge,:where(html:not([data-look="plain"])) .pill{font-variant-numeric:tabular-nums;}
:where(html:not([data-look="plain"])) .step{font-family:var(--draft); font-weight:800; color:var(--d-ink-2); letter-spacing:.18em;}

/* ---------- the drawn icons: one ink, the line weight set by the slot ---------- */
:where(html:not([data-look="plain"])) svg.ic{stroke:currentColor;}

/* ---------- controls: title-block cells ----------
   A button is a cell lettered in capitals: thin frame at rest, the visible
   line weight and the lifted paper under the pointer. The primary action is
   the one filled in ink. Focus is a dashed line, as a drawing marks a change. */
:where(html:not([data-look="plain"])) button{
  font-family:var(--draft); font-size:13px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; border-radius:0;
  background:transparent; color:var(--d-ink); border:1px solid var(--d-ink-3);
  transition:background .12s, box-shadow .12s, transform .06s;
}
:where(html:not([data-look="plain"])) button:hover:not(:disabled){background:var(--d-lift); box-shadow:inset 0 0 0 1px var(--d-ink);}
:where(html:not([data-look="plain"])) button:focus-visible{outline:2px dashed var(--d-focus); outline-offset:2px;}
:where(html:not([data-look="plain"])) button.primary,:where(html:not([data-look="plain"])) button.cta{
  background:var(--d-ink); border-color:var(--d-ink); color:var(--d-ground); font-weight:800;
}
:where(html:not([data-look="plain"])) button.primary:hover:not(:disabled),:where(html:not([data-look="plain"])) button.cta:hover:not(:disabled){
  background:var(--d-ink); box-shadow:inset 0 0 0 2px var(--d-ground), 0 0 0 1px var(--d-ink);
}
:where(html:not([data-look="plain"])) button.danger{color:var(--bad); border-color:var(--bad);}
:where(html:not([data-look="plain"])) button.ghost{background:transparent; border-color:transparent;}
:where(html:not([data-look="plain"])) button.ghost:hover:not(:disabled){background:var(--d-lift); border-color:var(--d-ink-3); box-shadow:none;}
:where(html:not([data-look="plain"])) button.small{font-size:12px; letter-spacing:.06em;}
:where(html:not([data-look="plain"])) button:disabled{opacity:.42;}
/* the password eye is a word in the field, not a cell */
:where(html:not([data-look="plain"])) .pw .pw-eye{border:0; background:transparent; color:var(--d-ink-2); font-size:11.5px;}
:where(html:not([data-look="plain"])) .pw .pw-eye:hover:not(:disabled){background:transparent; box-shadow:none; color:var(--d-ink);}

:where(html:not([data-look="plain"])) input,:where(html:not([data-look="plain"])) textarea,:where(html:not([data-look="plain"])) select{
  font-family:var(--draft); font-weight:500; border-radius:0;
  background:var(--d-paper); color:var(--d-ink); border:1px solid var(--d-ink-3);
}
:where(html:not([data-look="plain"])) input::placeholder,:where(html:not([data-look="plain"])) textarea::placeholder{color:var(--d-ink-3); opacity:1;}
:where(html:not([data-look="plain"])) input:focus,:where(html:not([data-look="plain"])) textarea:focus,:where(html:not([data-look="plain"])) select:focus{
  outline:2px dashed var(--d-focus); outline-offset:1px; box-shadow:inset 0 0 0 1px var(--d-ink); border-color:var(--d-ink);
}
:where(html:not([data-look="plain"])) input[type=checkbox],:where(html:not([data-look="plain"])) input[type=radio],:where(html:not([data-look="plain"])) .permrow input{accent-color:var(--d-ink);}

/* segments and tabs: the chosen one is filled in ink, never a tint alone */
:where(html:not([data-look="plain"])) button.seg{border-radius:0; background:transparent; color:var(--d-ink-2); border:1px solid var(--d-ink-3);
  font-size:11.5px; letter-spacing:.08em;}
:where(html:not([data-look="plain"])) button.seg:hover:not(:disabled){color:var(--d-ink); background:var(--d-lift);}
:where(html:not([data-look="plain"])) button.seg.on{background:var(--d-ink); border-color:var(--d-ink); color:var(--d-ground); font-weight:800;}
:where(html:not([data-look="plain"])) .tabs{border-bottom:1px solid var(--d-rule);}
:where(html:not([data-look="plain"])) .tabs button{border:1px solid transparent; border-bottom:3px solid transparent; background:transparent;
  color:var(--d-ink-2); font-size:12px; letter-spacing:.09em;}
:where(html:not([data-look="plain"])) .tabs button:hover:not(:disabled){box-shadow:none; color:var(--d-ink);}
:where(html:not([data-look="plain"])) .tabs button.on{color:var(--d-ink); background:var(--d-paper); border-color:var(--d-rule); border-bottom:3px solid var(--d-ink);}

/* ---------- views: paper in a frame, corner brackets on the ones that matter ---------- */
:root:where(:not([data-look="plain"])){
  --d-brk:14px;
  --d-brackets:
    linear-gradient(var(--d-ink),var(--d-ink)) 0 0 / var(--d-brk) 2px no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 0 0 / 2px var(--d-brk) no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 100% 0 / var(--d-brk) 2px no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 100% 0 / 2px var(--d-brk) no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 0 100% / var(--d-brk) 2px no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 0 100% / 2px var(--d-brk) no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 100% 100% / var(--d-brk) 2px no-repeat,
    linear-gradient(var(--d-ink),var(--d-ink)) 100% 100% / 2px var(--d-brk) no-repeat;
}
:where(html:not([data-look="plain"])) .card{border-radius:0; box-shadow:none; border:1px solid var(--d-rule); background:var(--d-brackets), var(--d-paper);}
:where(html:not([data-look="plain"])) .item{border-radius:0; box-shadow:none; border:1px solid var(--d-rule); background:var(--d-paper);}

/* ---------- tags and balloons ----------
   A tag is a word in a thin frame, in capitals. A count is a BALLOON: the one
   round shape a drawing allows, a number in a circle. */
:where(html:not([data-look="plain"])) .pill{border-radius:0; background:transparent; border:1px solid var(--d-ink-3); color:var(--d-ink);
  font-family:var(--draft); font-size:10.5px; font-weight:800; letter-spacing:.08em; padding:3px 7px;}
:where(html:not([data-look="plain"])) .pill.accent{color:var(--accent); border-color:var(--accent); background:transparent;}
:where(html:not([data-look="plain"])) .pill.good{color:var(--good); border-color:var(--good);}
:where(html:not([data-look="plain"])) .pill.warn{color:var(--warn); border-color:var(--warn);}
:where(html:not([data-look="plain"])) .pill.bad{color:var(--bad); border-color:var(--bad);}
:where(html:not([data-look="plain"])) .badge{
  border-radius:50%; min-width:24px; height:24px; padding:0 4px;
  background:var(--d-paper); color:var(--d-ink); border:1.5px solid var(--d-ink);
  font-family:var(--draft); font-size:12px; font-weight:800;
}


/* ---------- the title block: every top bar ----------
   One row of cells on paper with a 2 px ink rule under it: the mark and the
   wordmark, the screen's title, who is signed in, then each action as its
   drawn symbol in a cell of its own. The same in both modes, in each mode's
   own ink: Vellum's bar is paper too, no longer the navy band. */
:where(html:not([data-look="plain"])) .topbar,
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar{
  background:var(--d-paper); color:var(--d-ink);
  border-bottom:2px solid var(--d-ink); box-shadow:0 1px 0 var(--d-rule);
  min-height:52px; padding:var(--sat) 0 0; gap:0; align-items:stretch;
}
:where(html:not([data-look="plain"])) .topbar.oneline{padding-top:var(--sat); padding-bottom:0; gap:0;}
:where(html:not([data-look="plain"])) .topbar .wordmark{align-self:stretch; align-items:center; padding:0 16px 0 14px; border-right:1px solid var(--d-rule); gap:10px;}
:where(html:not([data-look="plain"])) .topbar h2{color:var(--d-ink); align-self:center; padding:0 14px; font-size:14px; letter-spacing:.16em; font-weight:800;}
:where(html:not([data-look="plain"])) .topbar button,
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar button{
  border:0; border-left:1px solid var(--d-rule); background:transparent; color:var(--d-ink);
  min-height:44px; min-width:44px; padding:0 12px; align-self:stretch; font-size:12px;
}
:where(html:not([data-look="plain"])) .topbar button:hover:not(:disabled),
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar button:hover:not(:disabled){background:var(--d-lift); box-shadow:inset 0 -3px 0 var(--d-ink);}
:where(html:not([data-look="plain"])) .topbar button:focus-visible{outline:2px dashed var(--d-focus); outline-offset:-4px;}
:where(html:not([data-look="plain"])) .topbar button.ghost,html:where(:not([data-look="plain"]))[data-theme="light"] .topbar button.ghost{background:transparent;}
:where(html:not([data-look="plain"])) .topbar button.primary,
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar button.primary{background:var(--d-ink); color:var(--d-ground); border-color:var(--d-ink);}
:where(html:not([data-look="plain"])) .topbar.oneline button.icon{min-width:44px;}
:where(html:not([data-look="plain"])) .topbar .pill,
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar .pill{
  align-self:stretch; display:block; line-height:50px; padding:0 14px; max-width:42vw;
  border:0; border-left:1px solid var(--d-rule); background:transparent; color:var(--d-ink);
  font-size:11.5px; letter-spacing:.12em;
}
:where(html:not([data-look="plain"])) .topbar .pill.accent,html:where(:not([data-look="plain"]))[data-theme="light"] .topbar .pill.accent{color:var(--accent);}
:where(html:not([data-look="plain"])) .topbar .pill.warn,html:where(:not([data-look="plain"]))[data-theme="light"] .topbar .pill.warn{color:var(--warn);}
:where(html:not([data-look="plain"])) .topbar .pill.bad,html:where(:not([data-look="plain"]))[data-theme="light"] .topbar .pill.bad{color:var(--bad);}
:where(html:not([data-look="plain"])) .topbar .pill.good,html:where(:not([data-look="plain"]))[data-theme="light"] .topbar .pill.good{color:var(--good);}
:where(html:not([data-look="plain"])) .topbar .wm-text{color:var(--d-ink-2);}
:where(html:not([data-look="plain"])) .topbar .wm-text b{color:var(--d-ink);}
/* the shop skin's light-mode chain (0,6,2) painted every bar button white on
   navy; the same selectors here, later, put them back on the paper */
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar button:not(.primary):not(.cta):not(.danger):not(.seg.on):not(.admtab.on),
html:where(:not([data-look="plain"]))[data-theme="light"] .ahead button:not(.primary):not(.cta):not(.danger):not(.seg.on):not(.admtab.on),
html:where(:not([data-look="plain"]))[data-theme="light"] #findWrap .hd button:not(.primary):not(.cta):not(.danger):not(.seg.on):not(.admtab.on){
  background:transparent; color:var(--d-ink);
}
html:where(:not([data-look="plain"]))[data-theme="light"] .topbar button:not(.primary):not(.cta):not(.danger):hover:not(:disabled),
html:where(:not([data-look="plain"]))[data-theme="light"] .ahead button:not(.primary):not(.cta):not(.danger):hover:not(:disabled),
html:where(:not([data-look="plain"]))[data-theme="light"] #findWrap .hd button:not(.primary):not(.cta):not(.danger):hover:not(:disabled){
  background:var(--d-lift);
}
@media (max-width:480px){
  :where(html:not([data-look="plain"])) .topbar{gap:0;}
  :where(html:not([data-look="plain"])) .topbar .wordmark{padding:0 10px;}
  :where(html:not([data-look="plain"])) .topbar button{padding:0 8px; font-size:11.5px;}
  :where(html:not([data-look="plain"])) .topbar .pill{padding:0 10px; font-size:10.5px; letter-spacing:.08em;}
}
@media (pointer:coarse){
  :where(html:not([data-look="plain"])) .topbar{padding-top:var(--sat); padding-bottom:0;}
  :where(html:not([data-look="plain"])) .topbar button{min-height:var(--tap);}
}

/* ---------- the mark: the starburst lettered in ink, no disc ---------- */
:where(html:not([data-look="plain"])) .wm-mark,
html:where(:not([data-look="plain"]))[data-theme="light"] .wm-mark{
  border-radius:0; box-shadow:none; background:var(--d-ink);
  -webkit-mask:var(--motif) center / 92% no-repeat; mask:var(--motif) center / 92% no-repeat;
}
:where(html:not([data-look="plain"])) .wm-text{color:var(--d-ink-2); letter-spacing:.16em; font-weight:500;}
:where(html:not([data-look="plain"])) .wm-text b{color:var(--d-ink); font-weight:800; letter-spacing:.1em;}

:where(html:not([data-look="plain"])) #findWrap{background:var(--d-paper); border:2px solid var(--d-ink); border-radius:0; box-shadow:none;}
:where(html:not([data-look="plain"])) #findWrap .hd,
html:where(:not([data-look="plain"]))[data-theme="light"] #findWrap .hd{background:var(--d-paper); border-bottom:1px solid var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] #findWrap .hd input{background:var(--d-paper); border:1px solid var(--d-ink-3); color:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] #findWrap .hd input::placeholder{color:var(--d-ink-3);}
html:where(:not([data-look="plain"]))[data-theme="light"] #findWrap .hd button{background:transparent; border:1px solid var(--d-ink-3); color:var(--d-ink);}

/* ---------- the map: the drawing's surround, the engine untouched ----------
   Only the frame around the floor plan changes. The pins keep their
   field-tested colours (app.css --pin-*): they sit on the plan, not on the paper. */
:where(html:not([data-look="plain"])) #mapWrap{background:#0b2a4f;}
html:where(:not([data-look="plain"]))[data-theme="light"] #mapWrap{background:#dfe4dc;}
:where(html:not([data-look="plain"])) .mapbar{background:linear-gradient(transparent, rgba(18,58,104,.94) 34%);}
html:where(:not([data-look="plain"]))[data-theme="light"] .mapbar{background:linear-gradient(transparent, rgba(238,241,236,.96) 34%);}
html:where(:not([data-look="plain"]))[data-print="green"] #mapWrap{background:#0c2b1e;}
/* the KPI charts' grid and axis are navy in the blueprint (mod/kpi.css); the data colours stay */
html:where(:not([data-look="plain"]))[data-print="green"] .kpi{--viz-gl:#16402d; --viz-axis:#2f6a4e;}
html:where(:not([data-look="plain"]))[data-print="green"] .mapbar{background:linear-gradient(transparent, rgba(23,67,47,.94) 34%);}
:where(html:not([data-look="plain"])) .maphint{border-radius:0; background:var(--d-paper); border:1px solid var(--d-ink); color:var(--d-ink-2); box-shadow:none;}
:where(html:not([data-look="plain"])) .chip{border-radius:0; background:var(--d-paper); box-shadow:none; border:1px solid var(--d-ink-3);}
:where(html:not([data-look="plain"])) .chip button{border-radius:0;}

/* ---------- modal, toast, spinner ---------- */
:where(html:not([data-look="plain"])) .modal{background:rgba(5,22,48,.66); backdrop-filter:none; -webkit-backdrop-filter:none;}
html:where(:not([data-look="plain"]))[data-theme="light"] .modal{background:rgba(20,38,63,.34);}
html:where(:not([data-look="plain"]))[data-print="green"] .modal{background:rgba(4,30,18,.66);}
:where(html:not([data-look="plain"])) .modal .card{border:2px solid var(--d-ink); box-shadow:none;}
:where(html:not([data-look="plain"])) .modal .card h2{border-bottom:2px solid var(--d-ink); padding-bottom:7px; margin-bottom:12px;}
/* a box's title takes focus when the box opens (core/ui.js, D150): ruled
   only for a keyboard, as every control is */
:where(html:not([data-look="plain"])) .modal .card h2:focus,:where(html:not([data-look="plain"])) .modal .card:focus{outline:none;}
:where(html:not([data-look="plain"])) .modal .card h2:focus-visible{outline:2px dashed var(--d-focus); outline-offset:3px;}
:where(html:not([data-look="plain"])) #toast{border-radius:0; background:var(--d-paper); color:var(--d-ink); border:2px solid var(--d-ink); box-shadow:none; font-weight:700;}
:where(html:not([data-look="plain"])) .spinner{border-radius:50%; border:2px dashed var(--d-ink-3); border-top:2px solid var(--d-ink);}

/* ---------- the landing: the cover sheet ---------- */
:where(html:not([data-look="plain"])) .landing::after{content:''; position:absolute; inset:calc(var(--sat) + 8px) 8px calc(var(--sab) + 8px); border:1px solid var(--d-ink-3); pointer-events:none;}
:where(html:not([data-look="plain"])) .landing-glow{display:none;}
:where(html:not([data-look="plain"])) .landing-motif{opacity:.05;}
html:where(:not([data-look="plain"]))[data-theme="light"] .landing-motif{opacity:.06;}
:where(html:not([data-look="plain"])) .hero-mark{width:84px; height:84px;}
:where(html:not([data-look="plain"])) .hero-title{font-weight:500; letter-spacing:.16em; color:var(--d-ink);}
:where(html:not([data-look="plain"])) .hero-title b{color:var(--d-ink); font-weight:800;}
:where(html:not([data-look="plain"])) .hero-tag{color:var(--d-ink-2); font-variant:normal; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.16em;}
:where(html:not([data-look="plain"])) .hero-line{font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
:where(html:not([data-look="plain"])) .hero-line::after{content:''; display:block; width:64px; height:2px; margin:10px auto 0; background:var(--d-ink);}
:where(html:not([data-look="plain"])) .lede{color:var(--d-ink-2);}
:where(html:not([data-look="plain"])) button.lg{font-size:15px; letter-spacing:.12em;}
:where(html:not([data-look="plain"])) .landing-band,
html:where(:not([data-look="plain"]))[data-theme="light"] .landing-band{background:var(--d-brackets), var(--d-paper); border:1px solid var(--d-rule); margin-left:0; margin-right:0;}
:where(html:not([data-look="plain"])) .landing-band::before{display:none;}
:where(html:not([data-look="plain"])) .feature-list .fi,
html:where(:not([data-look="plain"]))[data-theme="light"] .feature-list .fi{
  width:38px; height:38px; border-radius:50%; background:var(--d-paper);
  border:1.9px solid var(--d-ink); color:var(--d-ink);
}
:where(html:not([data-look="plain"])) .feature-list b{font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:13px;}
:where(html:not([data-look="plain"])) .landing-foot{font-variant:normal; font-size:11.5px; letter-spacing:.02em; color:var(--d-ink-2);}
:where(html:not([data-look="plain"])) .landing-foot a{color:var(--d-ink);}

/* ---------- sign-in and the password screens: a sheet with its title block ---------- */
:where(html:not([data-look="plain"])) .login-card{border:2px solid var(--d-ink);}
:where(html:not([data-look="plain"])) .login-card .wordmark .wm-text{font-size:15px;}

/* ---------- light mode: Vellum keeps the thin lines of a drawing ----------
   theme.css drew a 2 px outline on every surface and control for the old
   white look; on film the frame is the thin rule and the weight is earned. */
html:where(:not([data-look="plain"]))[data-theme="light"] button,
html:where(:not([data-look="plain"]))[data-theme="light"] input,
html:where(:not([data-look="plain"]))[data-theme="light"] textarea,
html:where(:not([data-look="plain"]))[data-theme="light"] select{border-width:1px; border-color:var(--d-ink-3);}
html:where(:not([data-look="plain"]))[data-theme="light"] .card,
html:where(:not([data-look="plain"]))[data-theme="light"] .tile,
html:where(:not([data-look="plain"]))[data-theme="light"] .item,
html:where(:not([data-look="plain"]))[data-theme="light"] .brow,
html:where(:not([data-look="plain"]))[data-theme="light"] .permlist,
html:where(:not([data-look="plain"]))[data-theme="light"] .vaddr,
html:where(:not([data-look="plain"]))[data-theme="light"] .mailbody,
html:where(:not([data-look="plain"]))[data-theme="light"] .maphint,
html:where(:not([data-look="plain"]))[data-theme="light"] .chip{border-width:1px; border-color:var(--d-rule);}
html:where(:not([data-look="plain"]))[data-theme="light"] #toast{border-width:2px; border-color:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] .modal .card,
html:where(:not([data-look="plain"]))[data-theme="light"] .login-card{border-width:2px; border-color:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] .pill{border-width:1px; border-color:var(--d-ink-3); color:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] .pill.accent{border-color:var(--accent); color:var(--accent);}
html:where(:not([data-look="plain"]))[data-theme="light"] .pill.warn{border-color:var(--warn); color:var(--warn);}
html:where(:not([data-look="plain"]))[data-theme="light"] .pill.bad{border-color:var(--bad); color:var(--bad);}
html:where(:not([data-look="plain"]))[data-theme="light"] .pill.good{border-color:var(--good); color:var(--good);}
html:where(:not([data-look="plain"]))[data-theme="light"] .pill.lineno,
html:where(:not([data-look="plain"]))[data-theme="light"] select.lineno{border-color:var(--d-ink); color:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] .tabs{border-bottom-width:1px; border-bottom-color:var(--d-rule);}
html:where(:not([data-look="plain"]))[data-theme="light"] .tabs button{border-color:transparent;}
html:where(:not([data-look="plain"]))[data-theme="light"] .tabs button.on{border-color:var(--d-rule); border-bottom:3px solid var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] button.primary,
html:where(:not([data-look="plain"]))[data-theme="light"] button.cta{background:var(--d-ink); border-color:var(--d-ink); color:#fff;}
html:where(:not([data-look="plain"]))[data-theme="light"] button.primary:hover:not(:disabled),
html:where(:not([data-look="plain"]))[data-theme="light"] button.cta:hover:not(:disabled){background:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] button.ghost{border-color:transparent;}
html:where(:not([data-look="plain"]))[data-theme="light"] button.seg{border-color:var(--d-ink-3); color:var(--d-ink-2);}
html:where(:not([data-look="plain"]))[data-theme="light"] button.seg.on{background:var(--d-ink); border-color:var(--d-ink); color:#fff;}
html:where(:not([data-look="plain"]))[data-theme="light"] .entry, html:where(:not([data-look="plain"]))[data-theme="light"] .ord, html:where(:not([data-look="plain"]))[data-theme="light"] .arow,
html:where(:not([data-look="plain"]))[data-theme="light"] .vrow, html:where(:not([data-look="plain"]))[data-theme="light"] .urow, html:where(:not([data-look="plain"]))[data-theme="light"] .srow,
html:where(:not([data-look="plain"]))[data-theme="light"] .contact, html:where(:not([data-look="plain"]))[data-theme="light"] .lockrow,
html:where(:not([data-look="plain"]))[data-theme="light"] .permrow{border-bottom-color:var(--d-rule);}
html:where(:not([data-look="plain"]))[data-theme="light"] .rolebtn .rn{background:var(--d-ink); border-color:var(--d-ink); color:#fff;}
/* the shop skin set every plain button to solid white in light; on film a
   cell is the paper it sits on */
html:where(:not([data-look="plain"]))[data-theme="light"] button:not(.primary):not(.cta):not(.danger):not(.seg.on):not(.admtab.on){background:transparent;}
html:where(:not([data-look="plain"]))[data-theme="light"] .tabs button.on:not(.primary),
html:where(:not([data-look="plain"]))[data-theme="light"] button.admtab.on{background:var(--d-paper);}
/* Admin's index in Vellum: the rule above frames every button; an entry is
   a line of the index, not a cell, so only the chosen one keeps its ink rule
   on the left (D150; it drew fourteen boxed tabs). */
html:where(:not([data-look="plain"]))[data-theme="light"] button.admtab{border-width:0 0 0 3px; border-style:solid; border-color:transparent;}
html:where(:not([data-look="plain"]))[data-theme="light"] button.admtab.on{border-left-color:var(--d-ink);}
html:where(:not([data-look="plain"]))[data-theme="light"] input,html:where(:not([data-look="plain"]))[data-theme="light"] textarea,html:where(:not([data-look="plain"]))[data-theme="light"] select{background:var(--d-paper);}
/* ...and a job's line is a sheet of paper in both modes, with its safety band
   drawn on it. The rule above (0,6,2) was making every line see-through in
   light and wiping the hatch off a safety line (2026-10-12); the same chain
   plus the line's class wins, and the fill is the line's own (see .jobline). */
html:where(:not([data-look="plain"]))[data-theme="light"] button.jobline:not(.primary):not(.cta):not(.danger):not(.seg.on):not(.admtab.on){background:var(--jl-fill);}

/* ---------- print: black ink on white paper, whatever the mode ---------- */
@media print{
  :root:where(:not([data-look="plain"])),html:where(:not([data-look="plain"]))[data-theme="light"]{
    --d-ground:#fff; --d-paper:#fff; --d-lift:#fff; --d-ink:#000; --d-ink-2:#222; --d-ink-3:#555;
    --d-rule:rgba(0,0,0,.45); --d-grid-1:transparent; --d-grid-2:transparent; --d-red:#b00; --d-red-ink:#fff;
    --bg:#fff; --chrome:#fff; --panel:#fff; --panel-2:#fff; --text:#000; --muted:#333; --line:rgba(0,0,0,.45);
  }
  :where(html:not([data-look="plain"])) body,html:where(:not([data-look="plain"]))[data-theme="light"] body{background:#fff; background-image:none; color:#000;}
  :where(html:not([data-look="plain"])) .landing::after{display:none;}
}

@media (max-width:480px){
  :where(html:not([data-look="plain"])) .topbar h2{padding:0 8px; letter-spacing:.1em;}
}


/* the title block's symbols: drawn at a size a thumb can read in its cell
   (they inherited the 12 px lettering and came out at 12.7 px) */
:where(html:not([data-look="plain"])) .topbar button svg.ic{width:18px; height:18px;}