@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/dm-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Layout: phone-first field app. Sticky top bar, one content column (max 780px), fixed bottom tab bar.
   Diagrams are soil cross-sections and plan views; where numbers matter they are drawn to scale.
   Visual system: the same as the landing page and the Interactive Pitch. DM Sans for text and headings,
   IBM Plex Mono for eyebrows, citations, and key numbers; charcoal, cream, and one orange; hairline
   rules and ledgers instead of heavy cards. The app keeps a light and a dark scheme (the page is cream
   in light, charcoal in dark; the header is charcoal in both). Nothing on screen is smaller than 12px. */
:root{
  --bg:#f7f5f0; --surface:#fcfbf8; --surface-2:#ebe8e1; --ink:#121212; --muted:#64615b; --line:#d5d1c8;
  --accent:#e65a0a; --accent-ink:#121212; --accent-soft:#f6dfd0; --accent-text:#ad3e00;
  --hazard:#f0b400; --hazard-soft:#f8ecc4;
  --good:#2b7a2f; --good-soft:#d8ecd6; --bad:#c22a2a; --bad-soft:#f6d6d4; --warn:#8a5200;
  --sky:#dde6ea; --soil:#b8683f; --soil-2:#93502f; --caliche:#d8c49a; --steel:#6f7d85; --steel-2:#9aa7ae; --spoil:#a35a35; --plan:#c9a77f; --planvoid:#6e3f27;
  --f-display:"DM Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"DM Sans","Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:12px; --rc:0px; --banner:#121212; --banner-ink:#f7f5f0;
  /* Solid copies of the surface tokens. The glass look (below) turns --surface, --surface-2, --line, and --bg
     translucent; diagrams, text halos, and the reduced-transparency fallback keep using these. */
  --paper:#fcfbf8; --paper-2:#ebe8e1; --rule:#d5d1c8; --ink-2:#64615b; --page:#f7f5f0;
  /* Heights of the header strip and the tab bar, measured by helpers.js; the content pads itself by them. */
  --top-h:121px; --bot-h:53px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121212; --surface:#1a1917; --surface-2:#25231f; --ink:#f7f5f0; --muted:#b6b1a8; --line:#3a3935;
  --accent:#e65a0a; --accent-ink:#121212; --accent-soft:#482314; --accent-text:#ff9a57;
  --hazard:#f5c518; --hazard-soft:#3d3312;
  --good:#6cc070; --good-soft:#1d3a1f; --bad:#f06a63; --bad-soft:#4a1f1d; --warn:#ffb74d;
  --sky:#1f2a30; --soil:#8a4b2d; --soil-2:#6c3a23; --caliche:#7d6d4f; --steel:#9aa8ae; --steel-2:#6f7d85; --spoil:#7a4227; --plan:#5c4632; --planvoid:#2c1a10;
  --banner:#121212; --banner-ink:#f7f5f0; --paper:#1a1917; --paper-2:#25231f; --rule:#3a3935; --ink-2:#b6b1a8; --page:#121212;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121212; --surface:#1a1917; --surface-2:#25231f; --ink:#f7f5f0; --muted:#b6b1a8; --line:#3a3935;
  --accent:#e65a0a; --accent-ink:#121212; --accent-soft:#482314; --accent-text:#ff9a57;
  --hazard:#f5c518; --hazard-soft:#3d3312;
  --good:#6cc070; --good-soft:#1d3a1f; --bad:#f06a63; --bad-soft:#4a1f1d; --warn:#ffb74d;
  --sky:#1f2a30; --soil:#8a4b2d; --soil-2:#6c3a23; --caliche:#7d6d4f; --steel:#9aa8ae; --steel-2:#6f7d85; --spoil:#7a4227; --plan:#5c4632; --planvoid:#2c1a10; --banner:#121212; --banner-ink:#f7f5f0;
  --paper:#1a1917; --paper-2:#25231f; --rule:#3a3935; --ink-2:#b6b1a8; --page:#121212;
  color-scheme:dark}

/* ---------- Glass look: tokens ----------
   The same frosted surfaces as the Safety Observations app (app.safetyobservations.ai, its "glass look"
   section): translucent panels that blur what scrolls beneath them, over a warm backdrop of soft color
   glows and a faint site-plan grid. On by default; Account > Appearance > Flat sets data-glass="off" on
   the html element and every rule below stops applying, which leaves the flat cream and charcoal look.
   The glows are at about two thirds of that app's strength and the muted text is a notch darker (light)
   or lighter (dark), because this app sets ledgers straight on the page where that app uses cards, so
   small labels keep at least the contrast they have on the flat page. The rules live in app.css. */
:root:not([data-glass="off"]){
  --surface:rgba(255,255,255,.42); --surface-2:rgba(18,18,18,.06); --line:rgba(18,18,18,.12); --muted:#5a574f; --bg:rgba(255,255,255,.42);
  --glass-fill:linear-gradient(135deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.22) 55%,rgba(255,255,255,.14) 100%);
  --glass-edge:rgba(255,255,255,.70); --glass-hi:rgba(255,255,255,.95); --glass-sh:0 24px 48px -30px rgba(60,35,10,.55);
  --glass-solid:rgba(250,248,244,.56); --glass-head:rgba(250,248,244,.72); --glass-in:rgba(255,255,255,.42); --glass-bar:rgba(255,255,255,.38);
  --glass-wash:rgba(247,245,240,.78); --glass-smoke:rgba(18,18,18,.90); --glass-smoke-line:rgba(255,255,255,.10); --glass-brand:#f6d0b0;
  --grid:rgba(18,18,18,.06); --tint:linear-gradient(rgba(247,245,240,.46),rgba(247,245,240,.40));
  --amb:radial-gradient(40% 26% at 90% 6%,rgba(255,112,30,.40),transparent 72%),
        radial-gradient(36% 24% at 6% 28%,rgba(255,190,40,.34),transparent 72%),
        radial-gradient(42% 28% at 96% 50%,rgba(70,130,180,.30),transparent 72%),
        radial-gradient(38% 26% at 8% 72%,rgba(230,80,10,.28),transparent 72%),
        radial-gradient(34% 22% at 74% 94%,rgba(90,180,110,.24),transparent 72%),
        linear-gradient(180deg,#f6f2ea 0%,#ece5da 100%);
  --bf-panel:blur(14px) saturate(180%); --bf-bar:blur(16px) saturate(180%); --bf-head:blur(14px);
  --bf-foot:blur(22px) saturate(170%); --bf-sheet:blur(20px) saturate(180%); --bf-toast:blur(16px);
  --rc:18px;
}
@media (prefers-color-scheme: dark){:root:not([data-glass="off"]):not([data-theme="light"]){
  --surface:rgba(255,255,255,.07); --surface-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.12); --muted:#c4bfb6; --bg:rgba(255,255,255,.07);
  --glass-fill:linear-gradient(135deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.03) 100%),rgba(22,20,18,.22);
  --glass-edge:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.16); --glass-sh:0 28px 54px -26px rgba(0,0,0,.85);
  --glass-solid:rgba(22,20,18,.58); --glass-head:rgba(22,20,18,.74); --glass-in:rgba(255,255,255,.07); --glass-bar:rgba(24,22,20,.42);
  --glass-wash:rgba(18,17,15,.80); --glass-smoke:rgba(18,18,18,.62); --glass-smoke-line:rgba(255,255,255,.08); --glass-brand:#d8a47e;
  --grid:rgba(255,255,255,.045); --tint:linear-gradient(rgba(10,9,8,.62),rgba(10,9,8,.50));
  --amb:radial-gradient(40% 26% at 90% 6%,rgba(255,100,20,.38),transparent 72%),
        radial-gradient(36% 24% at 6% 28%,rgba(190,110,40,.34),transparent 72%),
        radial-gradient(42% 28% at 96% 50%,rgba(60,110,160,.28),transparent 72%),
        radial-gradient(38% 26% at 8% 72%,rgba(230,80,10,.27),transparent 72%),
        radial-gradient(34% 22% at 74% 94%,rgba(70,150,90,.20),transparent 72%),
        linear-gradient(180deg,#17130f 0%,#0d0c0b 100%)}}
:root:not([data-glass="off"])[data-theme="dark"]{
  --surface:rgba(255,255,255,.07); --surface-2:rgba(255,255,255,.08); --line:rgba(255,255,255,.12); --muted:#c4bfb6; --bg:rgba(255,255,255,.07);
  --glass-fill:linear-gradient(135deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.03) 100%),rgba(22,20,18,.22);
  --glass-edge:rgba(255,255,255,.16); --glass-hi:rgba(255,255,255,.16); --glass-sh:0 28px 54px -26px rgba(0,0,0,.85);
  --glass-solid:rgba(22,20,18,.58); --glass-head:rgba(22,20,18,.74); --glass-in:rgba(255,255,255,.07); --glass-bar:rgba(24,22,20,.42);
  --glass-wash:rgba(18,17,15,.80); --glass-smoke:rgba(18,18,18,.62); --glass-smoke-line:rgba(255,255,255,.08); --glass-brand:#d8a47e;
  --grid:rgba(255,255,255,.045); --tint:linear-gradient(rgba(10,9,8,.62),rgba(10,9,8,.50));
  --amb:radial-gradient(40% 26% at 90% 6%,rgba(255,100,20,.38),transparent 72%),
        radial-gradient(36% 24% at 6% 28%,rgba(190,110,40,.34),transparent 72%),
        radial-gradient(42% 28% at 96% 50%,rgba(60,110,160,.28),transparent 72%),
        radial-gradient(38% 26% at 8% 72%,rgba(230,80,10,.27),transparent 72%),
        radial-gradient(34% 22% at 74% 94%,rgba(70,150,90,.20),transparent 72%),
        linear-gradient(180deg,#17130f 0%,#0d0c0b 100%)}
/* Reduced transparency, or no backdrop-filter at all: every glass token goes back to the solid scheme
   colors and the blurs to none, so the surfaces are plain and the text sits on solid color. (The glass
   rules still apply, but with these values they draw the flat look.) */
@media (prefers-reduced-transparency: reduce){:root:root:not([data-glass="off"]){
  --surface:var(--paper); --surface-2:var(--paper-2); --line:var(--rule); --muted:var(--ink-2); --bg:var(--page);
  --glass-fill:var(--paper); --glass-edge:var(--rule); --glass-hi:transparent; --glass-sh:none; --glass-solid:var(--paper); --glass-head:var(--paper);
  --glass-in:var(--paper); --glass-bar:var(--paper); --glass-wash:var(--page); --glass-smoke:var(--banner); --glass-smoke-line:rgba(255,255,255,.1); --glass-brand:#d8a47e;
  --grid:transparent; --tint:none; --amb:var(--page); --bf-panel:none; --bf-bar:none; --bf-head:none; --bf-foot:none; --bf-sheet:none; --bf-toast:none; --rc:0px}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){:root:root:not([data-glass="off"]){
  --surface:var(--paper); --surface-2:var(--paper-2); --line:var(--rule); --muted:var(--ink-2); --bg:var(--page);
  --glass-fill:var(--paper); --glass-edge:var(--rule); --glass-hi:transparent; --glass-sh:none; --glass-solid:var(--paper); --glass-head:var(--paper);
  --glass-in:var(--paper); --glass-bar:var(--paper); --glass-wash:var(--page); --glass-smoke:var(--banner); --glass-smoke-line:rgba(255,255,255,.1); --glass-brand:#d8a47e;
  --grid:transparent; --tint:none; --amb:var(--page); --bf-panel:none; --bf-bar:none; --bf-head:none; --bf-foot:none; --bf-sheet:none; --bf-toast:none; --rc:0px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--f-body);margin:0;font-synthesis:none;text-rendering:optimizeLegibility}
/* The page scrolls inside .scroller, not the document. iOS 26's WebKit drifts fixed and sticky
   elements after the keyboard has been used (Safari, Home Screen apps, and native web views
   alike), so the header strip and the tab bar are plain grid children that no viewport bug can move:
   body is a three-row grid (header strip, the rest, tab bar) and the scroller spans all three rows,
   so the content runs beneath the two bars (the glass look blurs it there) and pads itself by their
   measured heights (--top-h, --bot-h, set by helpers.js). Nothing here is fixed or sticky. Other
   children of body are position:fixed and stay out of the grid. */
html,body{height:100%}
body{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,100%);overflow:hidden;overscroll-behavior:none}
.scroller{grid-row:1/4;grid-column:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-padding:calc(var(--top-h) + 8px) 0 calc(var(--bot-h) + 8px)}
body.gating{--top-h:60px;--bot-h:0px}
button,input,select,textarea{font:inherit;color:inherit}
/* Text fields never go under 16px: iOS zooms the page in when a smaller field gets focus, and a
   home-screen app stays zoomed until the person pinches out. Labels and cards may use smaller type. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea,body textarea.secret{font-size:max(1em,16px)}
a{color:var(--accent-text)}
::selection{background:var(--accent);color:#121212}
:focus-visible{outline:3px solid var(--hazard);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);font-weight:650;line-height:1.06;letter-spacing:-.04em;text-wrap:balance;margin:0}
h1{font-size:2.1rem;letter-spacing:-.045em}
h2{font-size:1.65rem}
h3{font-size:1.2rem;letter-spacing:-.03em}
h4{font-weight:650;letter-spacing:-.02em}
p{margin:0}
.mono{font-family:var(--f-mono)}
/* Eyebrow: the small mono label above a heading, as on the landing page. */
.eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}

/* Top bar: charcoal in both schemes, the icon and the HYPERSCALE / Safety wordmark on the left. */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--banner);color:var(--banner-ink);border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px;padding:9px 16px;min-height:60px}
.top .brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1;text-decoration:none;color:inherit}
.top .mark{width:34px;height:34px;flex:none;border-radius:6px;display:block}
.top .name{font-family:var(--f-display);font-weight:750;font-size:1.2rem;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .ask{flex:none;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);border-radius:var(--r);padding:9px 14px;min-height:40px;font-weight:700;font-size:14px;letter-spacing:-.01em;cursor:pointer}
.top .ask[hidden]{display:none}

.wrap{max-width:780px;margin:0 auto;padding-inline:16px;padding-block:calc(var(--top-h) + 18px) calc(var(--bot-h) + 32px)}
/* "Pick your craft first" under the craft bar, with a small pointer up at the dropdown. */
.crafthint{padding-block:0;margin-top:10px;font-size:.95rem;line-height:1.45}
.crafthint[hidden]{display:none}
.crafthint::before{content:"";display:block;width:0;height:0;margin-left:50%;border:9px solid transparent;border-top:0;border-bottom-color:var(--hazard-soft)}
.crafthint>span{display:block;background:var(--hazard-soft);padding:12px 14px;color:var(--ink)}
.crafthint a{color:var(--ink)}
/* Desktop: a wider column (about an inch more each side) that still leaves the craft photo showing beside it. */
@media (min-width:1000px){.wrap{max-width:960px;padding-inline:28px}}

/* Bottom tabs */
.tabs{position:relative;grid-row:3;grid-column:1;z-index:20;background:var(--surface);border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px 9px;min-height:52px;text-decoration:none;color:var(--muted);background:none;border:0;font-size:12px;font-weight:600;letter-spacing:-.01em;cursor:pointer}
.tabs svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs .on{color:var(--accent-text)}

/* Home */
.tagline{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);padding-bottom:10px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.hello{display:grid;gap:10px;margin-bottom:18px}
.hello .eyebrow{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.hello p{color:var(--muted);max-width:60ch}
.meter{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}
.progress{display:flex;justify-content:space-between;font:500 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--muted);gap:8px}
.group{margin-top:24px}
.group>h3{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* The topic list is a ledger: one ruled row per topic, no boxes. */
.mods{display:grid;gap:0;border-top:1px solid var(--line)}
.mod{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 0;min-height:52px;text-decoration:none;color:var(--ink);min-width:0}
.mod:hover b{color:var(--accent-text)}
.mod .n{font:500 12px var(--f-mono);color:var(--accent-text);width:2ch;text-align:right}
.mod b{font-weight:650;letter-spacing:-.02em;line-height:1.25}
.mod small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.mod .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--line)}
.mod .dot.done{background:var(--good);border-color:var(--good)}

/* Module page */
.crumb{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.rule{background:var(--banner);color:var(--banner-ink);padding:18px 18px 18px 20px;margin:14px 0;display:grid;gap:10px;border-left:4px solid var(--accent)}
.rule p{font-family:var(--f-display);font-size:1.4rem;line-height:1.12;font-weight:650;letter-spacing:-.035em}
.cites{display:flex;flex-wrap:wrap;gap:6px}
.cite{font:500 12px/1.5 var(--f-mono);letter-spacing:.02em;background:var(--surface-2);color:var(--ink);border-radius:4px;padding:2px 7px;white-space:nowrap}
.rule .cite{background:rgba(247,245,240,.14);color:inherit}
.sec{margin-top:24px;display:grid;gap:10px}
.sec>*{min-width:0} /* a grid child otherwise refuses to shrink below its content, so a wide table widened the whole page instead of scrolling inside .tbl */
.sec>h3{border-bottom:1px solid var(--line);padding-bottom:8px}
.lead{font-size:1.05rem;line-height:1.55}
ul.pts,ol.pts{margin:0;padding-left:1.2em;display:grid;gap:6px}
.card{background:var(--surface);border:1px solid var(--line);padding:14px;min-width:0}
.callout{background:var(--hazard-soft);padding:12px 14px;display:grid;gap:4px}
.callout.bad{background:var(--bad-soft)}
.callout.good{background:var(--good-soft)}
.callout b{font-weight:650}

details.deep{background:var(--surface);border:1px solid var(--line)}
details.deep>summary{cursor:pointer;list-style:none;padding:12px 14px;min-height:44px;font-weight:650;letter-spacing:-.015em;display:flex;justify-content:space-between;gap:8px;align-items:center}
details.deep>summary::-webkit-details-marker{display:none}
details.deep>summary::after{content:"+";font:500 1.3rem var(--f-mono);color:var(--accent-text)}
details.deep[open]>summary::after{content:"\2212"}
details.deep .body{padding:0 14px 14px;display:grid;gap:10px}
details.deep .body h4{margin:6px 0 0;font-size:1rem}

/* Diagram */
.viz{background:var(--surface);border:1px solid var(--line);padding:12px;display:grid;gap:10px;min-width:0}
.viz svg{width:100%;height:auto;display:block}
.viz .cap{font-size:.85rem;color:var(--muted)}
.controls{display:grid;gap:10px}
.ctl{display:grid;gap:4px}
.ctl label{display:flex;justify-content:space-between;font-weight:600;font-size:.92rem}
.ctl output{font-family:var(--f-mono);color:var(--accent-text)}
input[type=range]{width:100%;accent-color:var(--accent)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.field{display:grid;gap:4px;font-size:.9rem;font-weight:600}
.field input{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 10px;min-height:44px;width:100%;font-family:var(--f-mono)}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.readout div{background:var(--surface-2);padding:8px 10px}
.readout small{display:block;color:var(--muted);font:500 12px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.readout b{font:500 1.15rem var(--f-mono)}
.verdict{padding:10px 12px;font-weight:650}
.verdict.ok{background:var(--good-soft);color:var(--good)}
.verdict.no{background:var(--bad-soft);color:var(--bad)}
.verdict.hm{background:var(--hazard-soft);color:var(--warn)}

/* SVG paint */
.s-sky{fill:var(--sky)} .s-soil{fill:var(--soil)} .s-soil2{fill:var(--soil-2)} .s-cal{fill:var(--caliche)} .s-spoil{fill:var(--spoil)}
.s-steel{fill:var(--steel)} .s-steel2{fill:var(--steel-2)} .s-plan{fill:var(--plan)} .s-planvoid{fill:var(--planvoid)} .s-surf{fill:var(--surface)}
.s-haz{fill:var(--hazard)} .s-acc{fill:var(--accent)} .s-bad{fill:var(--bad)} .s-good{fill:var(--good)}
.k-ink{stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.k-mut{stroke:var(--muted);fill:none;stroke-width:1}
.k-acc{stroke:var(--accent);fill:none;stroke-width:2}
.k-bad{stroke:var(--bad);fill:none;stroke-width:1.6}
.k-good{stroke:var(--good);fill:none;stroke-width:1.6}
.k-haz{stroke:var(--hazard);fill:none;stroke-width:3}
.k-dash{stroke-dasharray:4 3}
/* Diagram labels are in the drawing's own units (360 wide) and scale with it: a 390px phone draws the
   picture about 334px wide, so 13 units land at 12px. */
.t{fill:var(--ink);font:600 13px var(--f-body)}
.t-s{fill:var(--muted);font:500 13px var(--f-body)}
.t-a{fill:var(--accent-text);font:700 13px var(--f-body)}
.halo{paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round}
.t-b{fill:var(--bad);font:700 13px var(--f-body)}
.t-m{fill:var(--ink);font:500 13px var(--f-mono)}
.hot{cursor:pointer}
.hot circle{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.hot text{fill:var(--accent-ink);font:500 13px var(--f-mono);text-anchor:middle;pointer-events:none}
.hot.on circle{fill:var(--ink)} .hot.on text{fill:var(--bg)}
.hot:focus{outline:none} .hot:focus-visible circle{stroke:var(--hazard);stroke-width:3}
.hotinfo{background:var(--surface-2);padding:10px 12px;min-height:3.2em}
.hotinfo b{display:block}
.hotkeys{display:flex;flex-wrap:wrap;gap:6px}

/* Checklists: ruled rows; a ticked row turns green. */
.checks{display:grid;gap:0;border-top:1px solid var(--line)}
.chk{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 8px;min-height:48px;cursor:pointer;text-align:left}
.chk input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--good)}
.chk:has(input:checked){background:var(--good-soft)}
.chk span{min-width:0}

/* Reviewer rows */
.rev{display:grid;gap:0;border-top:1px solid var(--line)}
.row{background:none;border-bottom:1px solid var(--line);padding:12px 0;display:grid;gap:6px}
.row.ok{border-left:4px solid var(--good);background:var(--good-soft);padding-left:10px}
.row.flag{border-left:4px solid var(--bad);background:var(--bad-soft);padding-left:10px}
.row h4{margin:0;font-size:1rem}
.row .g{font-size:.9rem}
.row .g b{color:var(--good)} .row .r b{color:var(--bad)}
.row .r{font-size:.9rem}
.seg{display:flex;gap:6px;flex-wrap:wrap}
/* Buttons: 12px corners; the primary one is orange with charcoal text. */
.btn{border:1px solid var(--line);background:transparent;border-radius:var(--r);padding:9px 16px;font-weight:700;font-size:15px;letter-spacing:-.01em;line-height:1.1;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;text-decoration:none}
.btn:hover{border-color:var(--ink)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:#fa701e;border-color:#fa701e}
.btn.sm{padding:7px 12px;font-size:14px;min-height:44px}
.btn.okb[aria-pressed=true]{background:var(--good);border-color:var(--good);color:#fff}
.btn.flb[aria-pressed=true]{background:var(--bad);border-color:var(--bad);color:#fff}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.summary{position:sticky;bottom:calc(var(--bot-h) + 8px);z-index:5;background:var(--banner);color:var(--banner-ink);border-radius:var(--r);padding:10px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;font-weight:600}
.summary .btn{color:var(--banner-ink);border-color:rgba(247,245,240,.4)}
.summary .btn.pri{color:var(--accent-ink);border-color:var(--accent)}

/* Table */
.tbl{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
th{background:var(--surface-2);text-align:left;padding:8px 10px;font:500 12px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
td{border-top:1px solid var(--line);padding:8px 10px;vertical-align:top}
td:first-child{font-weight:600}
td.num{font-family:var(--f-mono);font-weight:500;white-space:nowrap}
/* Long citations (the numbers card's Source column) wrap instead of running off the card. */
td.src{font-family:var(--f-mono);font-size:.82rem;overflow-wrap:anywhere}
#nt td:nth-child(2){font-weight:600;min-width:11em}
.search{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;min-height:44px;width:100%}

/* Glossary: a ledger of terms */
.terms{display:grid;gap:0;border-top:1px solid var(--line)}
.term{background:none;border-bottom:1px solid var(--line)}
.term summary{padding:12px 0;min-height:44px;font-weight:650;letter-spacing:-.015em;cursor:pointer}
.term .body{padding:0 0 12px;display:grid;gap:8px}

/* Swatches */
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sw div{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);padding:8px}
.sw i{width:26px;height:26px;border-radius:6px;flex:none;border:1px solid var(--line)}
.sw b{display:block;font-size:.9rem} .sw small{color:var(--muted);font-size:.8rem;line-height:1.2;display:block}

/* Quiz / games */
.q{display:grid;gap:10px}
.q .qtext{font-weight:650;font-size:1.08rem;letter-spacing:-.015em}
.opts{display:grid;gap:6px}
.opt{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:44px;cursor:pointer;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--ink)}
.opt.right{background:var(--good-soft);border-color:var(--good)}
.opt.wrong{background:var(--bad-soft);border-color:var(--bad)}
.opt:disabled{cursor:default}
.why{background:var(--surface-2);padding:10px 12px}
.score{font:650 2.4rem/1 var(--f-display);letter-spacing:-.05em}

/* Photo drills */
.photo{border-radius:10px;overflow:hidden;background:var(--surface-2)}
.photo img{display:block;width:100%;max-height:520px;object-fit:cover}
/* On a phone the checked photo takes at most 40% of the screen, uncropped, so the state or the verdict shows beside it without scrolling. */
@media (max-width:640px){.photo img{max-height:40vh;object-fit:contain}}
/* Follow-up bubbles scroll to just under the sticky header and craft bar. */
.pcchat .msg{scroll-margin-top:124px}

/* Steps */
.steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.steps button{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;min-height:44px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}
.steps button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pager{display:flex;justify-content:space-between;gap:8px;margin-top:28px}
.pager a{flex:1;background:var(--surface);border:1px solid var(--line);padding:10px 12px;text-decoration:none;color:var(--ink);min-width:0}
.pager a small{display:block;color:var(--muted);font:500 12px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.pager a.nx{text-align:right}

/* Coach */
.coach{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;background:var(--bg);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.coach header{display:flex;align-items:center;gap:10px;padding:10px 16px;min-height:60px;background:var(--banner);color:var(--banner-ink)}
.coach header b{font-family:var(--f-display);font-size:1.2rem;font-weight:650;letter-spacing:-.03em;flex:1}
.coach header button{background:none;border:1px solid rgba(247,245,240,.4);color:inherit;border-radius:var(--r);padding:7px 12px;min-height:40px;font-weight:600;cursor:pointer}
.chat{flex:1;overflow-y:auto;padding:14px 16px;display:grid;align-content:start;gap:10px;max-width:780px;width:100%;margin:0 auto}
.msg{border-radius:14px;padding:12px 14px;max-width:92%;min-width:0;overflow-wrap:anywhere;line-height:1.55}
.msg.me{justify-self:end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px}
.msg.ai{justify-self:start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.ai p+p,.msg.ai p+ul,.msg.ai ul+p,.msg.ai p+ol,.msg.ai ol+p{margin-top:8px}
.msg.ai ul,.msg.ai ol{margin:6px 0 0;padding-left:1.2em}
.msg.ai h4{margin:8px 0 2px}
.msg img{max-width:160px;border-radius:10px;display:block;margin-bottom:6px}
.msg.note{justify-self:center;background:none;color:var(--muted);font-size:.85rem;text-align:center}
.thinking{color:var(--muted);font-style:italic}
/* Chips: pills with a hairline border; a chosen chip turns orange. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;min-height:44px;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;text-align:left;color:var(--ink);display:inline-flex;align-items:center}
.chip:hover{border-color:var(--accent)}
a.chip{text-decoration:none}
.composer{border-top:1px solid var(--line);background:var(--surface);padding:10px 16px}
.composer .in{max-width:780px;margin:0 auto;display:grid;gap:8px}
.composer textarea{width:100%;min-height:52px;max-height:160px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
.composer .bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.composer .grow{flex:1}
.attach{display:flex;align-items:center;gap:8px;font-size:.85rem}
.attach img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.fine{font-size:.8rem;color:var(--muted)}
.ctabs{display:flex;gap:6px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto}
.ctabs button{flex:none;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:8px 14px;min-height:44px;font-weight:600;font-size:14px;cursor:pointer}
.ctabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.cview{flex:1;display:flex;flex-direction:column;min-height:0}
.lib{flex:1;overflow-y:auto;padding:14px 16px 28px}
.lib .in{max-width:780px;margin:0 auto;display:grid;gap:10px}
.lib .term .body p+p,.lib .term .body p+ul,.lib .term .body ul+p,.lib .term .body p+ol{margin-top:6px}
.lib .term .body ul,.lib .term .body ol{margin:4px 0 0;padding-left:1.2em}
.handoff{display:grid;gap:8px}
.handoff textarea{width:100%;min-height:70px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
a.btn{text-decoration:none;display:inline-flex}
.pcnew{display:grid;gap:10px}
.pcpick{text-align:center;padding:14px;font-size:1.05rem}
.pcprev img{width:100%;max-height:340px;object-fit:contain;border-radius:10px;background:var(--surface-2)}
.pcnote{width:100%;min-height:64px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--bg)}
/* Lists of photo checks, plans, and people: ruled rows. */
.pclist{display:grid;gap:0;border-top:1px solid var(--line)}
.pclist:has(>.card){border-top:0;gap:8px} /* a list of cards (notices, ideas) keeps its spacing */
.pcrow{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;background:none;border-bottom:1px solid var(--line);padding:10px 0;min-height:52px;text-decoration:none;color:var(--ink);min-width:0}
.pcrow img{width:56px;height:56px;object-fit:cover;border-radius:6px}
.pcrow b{display:block;font-weight:650;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcrow small{color:var(--muted);font-size:.8rem}
.pcrow span{min-width:0}
.pill{font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;border-radius:999px;padding:2px 9px;background:var(--surface-2);color:var(--muted);white-space:nowrap;text-transform:uppercase}
.pill.no,.pill.bad{background:var(--bad);color:#fff} .pill.hm,.pill.warn{background:var(--hazard);color:#121212} .pill.ok{background:var(--good);color:#fff} .pill.low{background:var(--surface-2);color:var(--ink)}
.pcverdict{display:grid;gap:2px;font-size:1.3rem;font-family:var(--f-display);font-weight:650;letter-spacing:-.03em;line-height:1.15;margin-top:12px}
.pcverdict small{font-family:var(--f-body);font-size:.95rem;font-weight:600;letter-spacing:0}
.hz{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);padding:12px;display:grid;gap:6px}
.hz.bad{border-left-color:var(--bad)} .hz.warn{border-left-color:var(--hazard)} .hz.low{border-left-color:var(--steel-2)}
.hzh{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pcchat{display:grid;gap:8px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
@media (min-width:700px){h1{font-size:2.6rem}.rule p{font-size:1.7rem}}
/* working indicator: three dots that pulse, plus a label */
.thinking{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-style:normal}
.thinking .dots{display:inline-flex;gap:4px}
.thinking .dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.35;animation:dot 1.2s infinite ease-in-out}
.thinking .dots i:nth-child(2){animation-delay:.2s} .thinking .dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.thinking .dots i{animation:none;opacity:.8}}
/* talk-to-type on every text box */
.micwrap{position:relative;display:block;min-width:0;flex:1 1 auto}
.micwrap.in{display:flex;align-items:center}
.micwrap textarea,.micwrap input{width:100%;padding-right:52px;box-sizing:border-box}
.micbtn{position:absolute;right:6px;bottom:6px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;padding:0;cursor:pointer}
.micwrap.in .micbtn{bottom:auto;top:50%;transform:translateY(-50%);width:38px;height:38px}
.micbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.micbtn:hover{border-color:var(--accent);color:var(--accent-text)}
.micbtn.on,.micbtn[aria-pressed=true]{background:var(--bad);border-color:var(--bad);color:#fff;animation:micpulse 1.2s infinite}
@keyframes micpulse{50%{box-shadow:0 0 0 6px rgba(194,42,42,.25)}}
@media (prefers-reduced-motion:reduce){.micbtn.on{animation:none}}

/* Account: the appearance switch (one row of three) and the sign-out section (one full-width button on its own). */
.seg{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;min-width:0;min-height:44px;padding:8px 6px;border:0;border-left:1px solid var(--line);background:transparent;color:var(--ink);font:600 15px/1.2 var(--f-body);cursor:pointer}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.signout .btn.big{width:100%;min-height:52px;font-size:17px;justify-content:center}

/* ---- Hyperscale Safety additions ---- */
.stick{position:relative;grid-row:1;grid-column:1;z-index:20}
.stick .top{position:static}
/* The wordmark beside the icon: HYPERSCALE in small tracked caps over Safety, as on the landing page. */
.brandtxt{display:grid;gap:3px;line-height:1;min-width:0}
.brandtxt small{font:650 12px/1.05 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#d8a47e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandtxt b{font:750 1.15rem/1 var(--f-body);letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.craftbar{background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px}
.craftbar .in{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:8px}
.craftbar label{font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.craftbar select{flex:1;min-width:0;border:1px solid var(--accent);background:var(--bg);border-radius:10px;padding:9px 10px;min-height:44px;font-weight:600;color:var(--ink)}
.badge{font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;border-radius:999px;padding:3px 10px;text-transform:uppercase}
.badge.draft{background:var(--hazard-soft);color:var(--warn)}
.badge.ok{background:var(--good-soft);color:var(--good)}
.mod .n{width:2.2ch}
.libmod{grid-template-columns:auto 1fr auto}
.libscope{display:flex;gap:6px;flex-wrap:wrap}
.wmount+.wmount{margin-top:12px}
details.deep .wmount{margin-top:4px}
select.search{border-radius:10px}
.foot{margin-top:28px;text-align:center}
.foot a{color:var(--muted);font-size:.85rem}
/* ---- offline bar, install tip, toast ---- */
.netbar{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 58px);z-index:30;background:var(--banner);color:var(--banner-ink);border:1px solid var(--hazard);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600;max-width:calc(100% - 32px);text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.tip{position:fixed;left:12px;right:12px;bottom:calc(var(--bot-h) + 12px);z-index:25;max-width:756px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:12px 14px;display:grid;gap:8px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.tip b{font-family:var(--f-display);font-weight:650;font-size:1.15rem;letter-spacing:-.03em}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bot-h) + 16px);z-index:35;background:var(--good);color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;font-size:.88rem;max-width:calc(100% - 32px);text-align:center}
/* ---- account, organization console, error banner ---- */
.top .acct{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--banner-ink);border:1px solid rgba(247,245,240,.4);position:relative}
.top .acct svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.top .acct.in::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--good);border:2px solid var(--banner)}
.signin{display:grid;gap:10px}
.signin .or{text-align:center}
.field select,.field textarea{width:100%}
.field input[readonly]{opacity:.85}
.captcha:empty{display:none}
.balance{display:grid;gap:10px}
.readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.orgrow{grid-template-columns:auto 1fr auto}
.orgrow .btnrow{flex-wrap:nowrap}
.packs .btn{flex:1 1 auto}
.danger{display:grid;gap:10px;border-color:var(--bad)}
textarea.secret{font-family:var(--f-mono);font-size:.8rem;min-height:90px}
.tbl select.search{padding:5px 8px;border-radius:8px;min-width:8.5em;min-height:40px}
.errbar{position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:60;max-width:756px;margin:0 auto;background:var(--bad-soft);color:var(--ink);border:1px solid var(--bad);border-left:4px solid var(--bad);border-radius:var(--r);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.errbar .errtxt{flex:1 1 220px;font-weight:600}
/* Private test mode: until gate.js opens the app, only the brand header and the gate screen show. */
body.gating .craftbar,body.gating .tabs,body.gating #topAsk,body.gating #topAcct,body.gating .coach,body.gating .tip{display:none!important}
#gate{display:grid;gap:14px;max-width:520px}

/* ---------- Photo Check report ---------- */
.pcv{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:14px;margin-top:12px;border:1px solid var(--pcline);border-left:4px solid var(--pcline);background:var(--pcbg);color:var(--pcink)}
.pcv svg{width:44px;height:44px;display:block}
.pcv svg .m{stroke:var(--pcbg);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pcv svg circle.m{fill:var(--pcbg);stroke:none}
.pcv b{display:block;font-family:var(--f-display);font-weight:650;font-size:1.5rem;line-height:1.05;letter-spacing:-.035em}
.pcv span{display:block;font-size:.95rem;font-weight:600;margin-top:3px;color:var(--ink)}
.pcv.v-stop{--pcbg:var(--bad-soft);--pcink:var(--bad);--pcline:var(--bad)}
.pcv.v-fix{--pcbg:var(--hazard-soft);--pcink:var(--warn);--pcline:var(--hazard)}
.pcv.v-ok{--pcbg:var(--good-soft);--pcink:var(--good);--pcline:var(--good)}
.pcv.v-unclear{--pcbg:var(--surface-2);--pcink:var(--muted);--pcline:var(--line)}
.pcsum{font-size:1.02rem}
.pcgrid{display:grid;gap:10px}
.hzc{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line);padding:12px;display:grid;gap:8px;min-width:0}
.hzc.sev-high{border-left-color:var(--bad)} .hzc.sev-medium{border-left-color:var(--hazard)} .hzc.sev-low{border-left-color:var(--muted)}
.hzc header{display:flex;gap:8px;align-items:center;min-width:0}
.hzc .hzn{font:500 12px var(--f-mono);width:24px;height:24px;border-radius:50%;border:1px solid var(--line);color:var(--accent-text);display:grid;place-items:center;flex:none}
.hzc header b{flex:1;font-size:1.05rem;font-weight:650;letter-spacing:-.02em;line-height:1.2;min-width:0;overflow-wrap:anywhere}
.hzl{display:grid;grid-template-columns:7.2em 1fr;gap:8px;font-size:.95rem;line-height:1.4}
.hzk{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
@media (max-width:340px){.hzl{grid-template-columns:1fr;gap:2px}}
button.hzcite{border:0;cursor:pointer;justify-self:start;background:var(--accent-soft);color:var(--ink);white-space:normal;text-align:left}
button.hzcite:hover{text-decoration:underline}
.pctodo{display:grid;gap:8px}
.pctodo label{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;cursor:pointer;min-height:28px}
.pctodo input{margin-top:4px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.pctodo input:checked+span{color:var(--muted);text-decoration:line-through}
ul.pclist{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:.95rem;border-top:0}
.pclesson h4{font-family:var(--f-display);font-weight:650;font-size:1.2rem;letter-spacing:-.03em;margin:0 0 6px}
.pcmore[hidden]{display:none}

/* ---------- Desktop background photos (one per craft group) ----------
   body[data-bg] is set by render() from the current craft's group. Only at 1000px and
   wider: phones never load these files. Dark mode dims the photo so text stays readable. */
@media (min-width:1000px){
  body[data-bg]{background:var(--bg-photo,none) center / cover no-repeat fixed var(--bg)}
  body[data-bg] .wrap{background:var(--bg);box-shadow:0 0 0 1px var(--line),0 0 48px rgba(0,0,0,.22)}
  body[data-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:rgba(18,18,18,0)}
  :root:not([data-theme="light"]) body[data-bg]::before{background:rgba(18,18,18,.38)}
  body[data-bg="site"]{--bg-photo:url(bg/site.jpg)}
  body[data-bg="lifting"]{--bg-photo:url(bg/lifting.jpg)}
  body[data-bg="power"]{--bg-photo:url(bg/power.jpg)}
  body[data-bg="mechanical"]{--bg-photo:url(bg/mechanical.jpg)}
  body[data-bg="logistics"]{--bg-photo:url(bg/logistics.jpg)}
  body[data-bg="emergency"]{--bg-photo:url(bg/emergency.jpg)}
  body[data-bg="semi"]{--bg-photo:url(bg/semi.jpg)}
}
@media (min-width:1000px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) body[data-bg]::before{background:rgba(18,18,18,.38)}}
@media (min-width:1000px) and (prefers-color-scheme: light){:root:not([data-theme="dark"]) body[data-bg]::before{background:rgba(18,18,18,0)}}

/* ---------- PTP Assistant ---------- */
.ptpsteps{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.ptpsteps::-webkit-scrollbar{display:none}
.ptpsteps button{flex:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;min-height:44px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink);display:flex;gap:6px;align-items:center}
.ptpsteps button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ptpsteps button .n{font:500 12px var(--f-mono);opacity:.8}
.ptpsteps button.flag::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--hazard)}
.ptphead{display:grid;gap:4px;margin-top:10px}
.ptphead .fine{display:flex;flex-wrap:wrap;gap:6px 12px}
.ptpitem{background:var(--surface);border:1px solid var(--line);padding:10px 12px;display:grid;gap:6px;min-width:0}
.ptpitem.sug{border-style:dashed;border-color:var(--accent)}
.ptpitem.flash{box-shadow:0 0 0 3px var(--hazard-soft);border-color:var(--hazard)}
.ptpitem .t{font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.prow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ptpitem .why{font-size:.88rem;color:var(--muted)}
.ptptag{font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:1px 6px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.ptptag.sug{background:var(--accent-soft);color:var(--ink)}
.ptptag.he{background:var(--bad-soft);color:var(--bad)}
.ptptag.direct{background:var(--good-soft);color:var(--good)}
.ptptag.ask{background:var(--hazard-soft);color:var(--warn)}
.ptptag.lv-eliminate{background:#2b7a2f;color:#fff}.ptptag.lv-substitute{background:#4f9d3a;color:#fff}.ptptag.lv-engineer{background:#2d6ea8;color:#fff}.ptptag.lv-administrative{background:#c78a00;color:#121212}.ptptag.lv-ppe{background:#8a3b3b;color:#fff}
.ptpen{font:500 12px/1.4 var(--f-mono);border-radius:999px;padding:2px 8px;background:var(--surface-2);color:var(--ink);white-space:nowrap}
.ptpstep{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);padding:12px;display:grid;gap:10px;min-width:0}
.ptpstep.sug{border-left-style:dashed}
.ptpstep>header{display:flex;gap:8px;align-items:center;min-width:0}
.ptpstep>header .hzn{font:500 12px var(--f-mono);width:24px;height:24px;border-radius:50%;border:1px solid var(--line);color:var(--accent-text);display:grid;place-items:center;flex:none}
.ptpstep>header b{flex:1;font-size:1.05rem;font-weight:650;letter-spacing:-.02em;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.ptpcol{display:grid;gap:6px}
.ptpcol>small{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ptpcol .ptpitem{padding:8px 10px}
.ptpcol .ptpitem .t{font-size:.95rem}
.ptpbar{position:sticky;bottom:calc(var(--bot-h) + 8px);z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;display:grid;gap:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);margin-top:16px}
.ptpbar textarea{width:100%;min-height:44px;max-height:120px;resize:vertical;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.ptpbar .bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ptpbar .grow{flex:1;min-width:0}
.btn.mic[aria-pressed=true]{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.mic.big{width:100%;min-height:56px;font-size:1.05rem}
.listen{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--bad)}
.listen .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--bad);animation:listen 1s ease-in-out infinite}
@keyframes listen{0%,100%{opacity:1}50%{opacity:.25}}
#acLangs{scroll-margin-top:76px}
.acstart{margin-bottom:14px;display:grid;gap:8px}
.acstart .btnrow .btn{flex:1 1 auto}
.ptptoggle button{overflow-wrap:anywhere}
/* The members list reads as one ruled row per member on a phone: the column labels come from data-l. */
@media (max-width:640px){
.tbl.members table,.tbl.members tbody,.tbl.members tr,.tbl.members td{display:block;min-width:0}
.tbl.members thead{display:none}
.tbl.members tr{padding:10px 12px;border-top:1px solid var(--line)}
.tbl.members tr:first-child{border-top:0}
.tbl.members td{border:0;padding:3px 0}
.tbl.members td:first-child{font-weight:650;font-size:1.02rem;letter-spacing:-.015em}
.tbl.members td[data-l]:not([data-l=""]):not(:first-child)::before{content:attr(data-l) ": ";font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin:4px 0 2px}
.tbl.members td .btnrow,.tbl.members td .prow{flex-wrap:wrap}
}
.ptpedit{display:grid;gap:6px}
.ptpedit textarea,.ptpedit input,.ptpedit select{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--bg)}
.ptpedit textarea{min-height:56px}
.ptpadd{display:flex;gap:6px;flex-wrap:wrap}
.ptpadd input{flex:1;min-width:140px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:44px;background:var(--bg)}
.ptpadd select{border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:44px;background:var(--bg)}
.ptptoggle{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ptptoggle button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:10px 12px;min-height:44px;cursor:pointer;color:var(--ink);display:grid;gap:4px;min-width:0}
.ptptoggle button[aria-pressed=true]{border-color:var(--good);background:var(--good-soft)}
.ptptoggle button.sug{border-style:dashed;border-color:var(--accent)}
.ptptoggle button b{font-weight:650;letter-spacing:-.015em}
.ptptoggle button small{color:var(--muted);font-size:.8rem;line-height:1.25}
.ptpq{display:grid;gap:4px}
.ptpq>b{font-size:.98rem}
.ptpcheck{display:grid;gap:6px}
.ptpcheck .ptpitem{border-left:4px solid var(--hazard)}
.ptpcheck .ptpitem.ok{border-left-color:var(--good)}
.wheel{display:grid;gap:10px}
.wheel svg{width:100%;max-width:360px;height:auto;display:block;margin:0 auto}
/* energy wheel: one hue per source, same in both themes. Uncircled = light tint, circled = full color, suggested = half tint + dashed outline */
.ew-gravity{--ec:#2f6db0;--eo:#fff}.ew-motion{--ec:#e08a00;--eo:#121212}.ew-mechanical{--ec:#56636b;--eo:#fff}.ew-electrical{--ec:#f0b400;--eo:#121212}.ew-pressure{--ec:#12827f;--eo:#fff}
.ew-sound{--ec:#4b55b8;--eo:#fff}.ew-radiation{--ec:#b83a86;--eo:#fff}.ew-biological{--ec:#3f8f3a;--eo:#fff}.ew-chemical{--ec:#7c4dbd;--eo:#fff}.ew-temperature{--ec:#c8352b;--eo:#fff}
.wheel .wedge{fill:color-mix(in srgb,var(--ec,var(--line)) 16%,var(--surface));stroke:var(--line);stroke-width:1;cursor:pointer;transition:fill .15s}
.wheel .ew.on .wedge{fill:var(--ec);stroke:var(--ec)}
.wheel .ew.sug .wedge{fill:color-mix(in srgb,var(--ec) 45%,var(--surface));stroke:var(--accent);stroke-width:2.5;stroke-dasharray:5 3}
.wheel .wedge:hover{stroke:var(--accent)}
.wheel g:focus{outline:none}.wheel g:focus-visible .wedge{stroke:var(--hazard);stroke-width:3;stroke-dasharray:none}
.wheel .wi{fill:none;stroke:var(--ec);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.wheel .ew.on .wi{stroke:var(--eo)}
/* Wheel text is in the drawing's 320-unit box; at phone width (358px and up) 11px lands at 12px or more. */
.wheel .wl{font:700 11px var(--f-body);letter-spacing:-.01em;text-transform:uppercase;fill:var(--ink);text-anchor:middle;pointer-events:none}
.wheel .ew.on .wl{fill:var(--eo)}
.wheel .ew.sug .wi{stroke:var(--ec)}.wheel .ew.sug .wl{fill:var(--ink)}
.wheel .hub{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.wheel .wn{font:650 32px var(--f-display);letter-spacing:-.04em;fill:var(--ink);text-anchor:middle;pointer-events:none}
.wheel .wc{font:500 11px var(--f-mono);fill:var(--muted);text-anchor:middle;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
@media (prefers-reduced-motion:reduce){.wheel .wedge{transition:none}}
.echip{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ec);color:var(--eo);margin-right:8px;vertical-align:-7px}
.echip .ewi{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ptpinfo .body p+p{margin-top:6px}
/* The sheet and the paper form are always white paper with charcoal ink, whatever the scheme, so they print as seen. */
.sheet{background:#fff;color:#121212;border:1px solid var(--line);padding:14px;display:grid;gap:10px;font-size:.92rem}
.sheet h3{color:#121212;border-bottom:1px solid #121212;padding-bottom:4px;font-size:1.05rem}
.sheet .shdr{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.sheet .shdr div{border:1px solid #d5d1c8;padding:6px 8px;min-height:2.6em}
.sheet .shdr small,.sheet .sq small,.sheet .sl small{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:#64615b}
.sheet .sboxes{display:flex;flex-wrap:wrap;gap:6px}
.sheet .sbox{border:1px solid #d5d1c8;padding:4px 8px;font-weight:600}
.sheet .sbox.x{background:#121212;color:#fff}
.sheet .sq{border:1px solid #d5d1c8;padding:6px 8px;min-height:2.4em}
.sheet table{min-width:0;font-size:.88rem}
.sheet th{background:#ebe8e1;color:#121212}
.sheet td{border-top:1px solid #d5d1c8;vertical-align:top;color:#121212}
.sheet td:first-child{font-weight:400}
.sheet .stbl{overflow-x:auto;border:1px solid #d5d1c8}
.sheet .sl{display:grid;gap:4px}
.sheet .sfoot{font-size:.82rem;color:#64615b;border-top:1px solid #d5d1c8;padding-top:8px;display:grid;gap:4px}
.sheet .sign{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px}
.sheet .sign div{border:1px dashed #d5d1c8;padding:14px 8px 4px;font-size:12px;color:#64615b}
.copymode{display:grid;gap:12px}
.copymode .big{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);padding:18px;font-size:1.35rem;line-height:1.35;min-height:120px;overflow-wrap:anywhere}
.copymode .big small{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ptpresume{background:var(--surface-2);padding:10px 12px;display:grid;gap:4px}
/* ---------- PTP: a company's own form (upload, review side by side) ---------- */
.alsohdr{flex-basis:100%;display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:6px 0 2px}
.sheet h3.also{color:#64615b;border-bottom-style:dashed}
.tplreview{display:grid;gap:12px;align-items:start}
@media (min-width:900px){.tplreview{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.tplsrc{position:sticky;top:calc(var(--top-h) + 10px)}}
.tplsrc{background:var(--surface);border:1px solid var(--line);padding:8px;min-height:200px}
.tplsrc img{width:100%;height:auto}.tplsrc iframe,.tplsrc object{width:100%;height:70vh;border:0;background:#fff}
.tplsec{background:var(--surface);border:1px solid var(--line);padding:10px;display:grid;gap:8px}
.tplsec.also{border-style:dashed;opacity:.85}.tplsec.custom{border-left:4px solid var(--accent)}
.tplsec .kind{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tplsec input.search,.tplsec textarea{width:100%}
.tplsec .ent{display:flex;gap:6px;align-items:center}.tplsec .ent input{flex:1;min-width:0}.tplsec .ent .tag{font-size:12px;color:var(--muted);white-space:nowrap}
.tpllist .pcrow{grid-template-columns:auto minmax(0,1fr)}.tpllist .pcrow .btnrow{grid-column:1/-1;flex-wrap:wrap}

/* ---------- PTP: holds, confirmations, step ideas, the paper-form layout ---------- */
.hold{display:flex;gap:10px;align-items:center;background:var(--bad);color:#fff;padding:10px 12px;margin-top:8px;font-weight:600}.hold b{font:750 1rem var(--f-display);letter-spacing:-.01em}
.holditem{display:flex;justify-content:space-between;gap:8px;align-items:center;border-top:1px solid var(--line);padding:6px 0}.holditem .t{flex:1}.holditem.no .t{color:var(--bad)}
.ptpcheck .holdline{border-left:4px solid var(--bad)}
.ptpconfirm{display:grid;gap:6px;margin-bottom:10px}
.ptpideas{margin:10px 0;display:grid;gap:6px}
.ptpways{display:grid;gap:8px;margin-top:10px}@media (min-width:700px){.ptpways{grid-template-columns:1fr 1fr}}
.ptpways .card{display:grid;gap:6px}
#ptpList .ptprow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 10px;align-items:start}
#ptpList .ptprow>span:nth-child(2){min-width:0}#ptpList .ptprow>span:nth-child(2) b{display:block}#ptpList .ptprow>span:nth-child(2) small{display:block;color:var(--muted)}
#ptpList .ptprow .ptprowbtns{grid-column:1/-1;flex-wrap:wrap;justify-content:flex-start}.ptprow small.warn{display:block;color:var(--bad);font-weight:600}
.crewlist{display:grid;gap:6px}.crewlist .prow input{flex:1;min-width:0}
.sheet .noplan{font:700 .9rem var(--f-display);color:#c22a2a;text-transform:uppercase;letter-spacing:.04em}
.sheet .shold{background:#c22a2a;color:#fff;padding:4px 8px;font-weight:700}
.sheet .screw b{display:block;margin-bottom:4px}.sheet .screw table{width:100%;border-collapse:collapse}.sheet .screw th,.sheet .screw td{border:1px solid #d5d1c8;padding:3px 6px;text-align:left;height:1.8em}.sheet .screw small{display:block;margin-top:4px;color:#64615b}
.pform{background:#fff;color:#121212;border:1px solid var(--line);padding:12px;display:grid;gap:8px;font-size:.8rem;page:pform;min-width:0;max-width:100%;overflow-wrap:anywhere}
.pform>*{min-width:0}
.pform h4{margin:0 0 4px;font:700 .8rem var(--f-display);text-transform:uppercase;letter-spacing:.04em;background:#121212;color:#fff;padding:3px 6px}
.pform .pf-sec{border:1px solid #d5d1c8;padding:6px;display:grid;gap:4px;align-content:start;min-width:0}
.pform .pf-top{display:grid;gap:6px}
.pform .pf-title{font:750 1.3rem var(--f-display);letter-spacing:-.02em;text-transform:uppercase} /* the paper form's own title, as printed */
.pform .pf-noplan{font:700 .85rem var(--f-display);color:#c22a2a;text-transform:uppercase;letter-spacing:.04em}
.pform .pf-hdr{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px}
.pform .fb{border:1px solid #d5d1c8;padding:3px 5px;min-height:2.2em}
.pform .fb small{display:block;font:500 12px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:#64615b}
.pform .fb.tall{min-height:5em}
.pform .pf-boxes{display:flex;flex-wrap:wrap;gap:4px}.pform .pf-boxes.col{flex-direction:column}
.pform .pf-boxes>span{border:1px solid #d5d1c8;padding:2px 6px;font-weight:600}.pform .pf-boxes>span.x{background:#121212;color:#fff}
.pform .pf-boxes .grow{flex:1 1 100%}
.pform .pf-row3{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:8px}.pform .pf-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:700px){.pform .pf-row3,.pform .pf-row2{grid-template-columns:1fr}}
.pform .pf-hier{margin:0;padding-left:1.2em}.pform .pf-hier li{padding:2px 4px;margin:2px 0;font-weight:700}
.pform .pf-wheel{display:grid;grid-template-columns:1fr 1fr;gap:3px}.pform .pf-wheel div{border:1px solid #d5d1c8;padding:2px 4px;min-width:0;overflow-wrap:anywhere}.pform .pf-wheel div.x{background:#f6dfd0}.pform .pf-wheel small{display:block;font-size:12px;color:#64615b}
.pform table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;overflow-wrap:anywhere}.pform th,.pform td{border:1px solid #121212;padding:3px 4px;vertical-align:top;text-align:left}.pform th{background:#ebe8e1;font-size:12px}.pform th small{display:block;font-weight:400;text-transform:none}
.pform .pf-steps td{height:2.6em}.pform .pf-steps td:first-child{width:24%}
.pform .pf-q{display:flex;gap:6px;border-bottom:1px solid #ebe8e1;padding:2px 0}.pform .pf-q span{white-space:nowrap;font-family:var(--f-mono)}
.pform .pf-ifyes{font-weight:700;color:#c22a2a;margin-top:4px}
.pform .pf-hold{color:#c22a2a}
.pform .pf-stop{background:#c22a2a;color:#fff;font-weight:700;padding:4px 8px}
.pform .screw td{height:1.8em}
.pform .pf-foot{font-size:12px;color:#64615b}
@page pform{size:letter landscape;margin:.4in}

@media print{
  html,body{height:auto;overflow:visible;display:block}
  .scroller{overflow:visible}
  body{background:#fff!important;color:#000}
  .pform{border:0;padding:0;font-size:9pt}
  .stick,.tabs,.coach,.netbar,.tip,.toast,.errbar,.ptpbar,.noprint,.craftbar{display:none!important}
  .wrap{max-width:none;padding:0}
  .sheet{border:0;padding:0;font-size:11pt}
  .sheet .stbl{overflow:visible;border:0}
  .sheet table{width:100%}
  .sheet .sq,.sheet .shdr div{min-height:3.4em}
  @page{size:letter;margin:.5in}
}

/* ---------- Read the drawing: sheet viewer, tap spots, drills ---------- */
.dsheet{display:grid;gap:10px}
.dsview{position:relative;height:min(58vh,520px);min-height:300px;overflow:hidden;background:#fff;border:1px solid var(--line);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.dsview:focus-visible{outline:3px solid var(--hazard);outline-offset:2px}
.dsinner{position:absolute;left:0;top:0;transform-origin:0 0;--z:1}
.dsinner img{display:block;pointer-events:none;background:#fff}
.dspot{position:absolute;width:28px;height:28px;border-radius:50%;background:#fff;border:2.5px solid #e65a0a;color:#ad3e00;font:500 13px var(--f-mono);display:grid;place-items:center;padding:0;margin:0;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(calc(1 / var(--z)));transform-origin:center}
.dspot.on{background:#e65a0a;color:#121212;border-color:#ad3e00}
.dspot:focus-visible{outline:3px solid #f0b400;outline-offset:1px}
.dsbox{position:absolute;box-sizing:border-box;border:3px solid #e65a0a;border-width:calc(3px / var(--z));border-radius:6px;background:rgba(230,90,10,.14);pointer-events:none}
.dsbox.ok{border-color:#1f6f99;background:rgba(31,111,153,.18)}
.dsctl{position:absolute;right:8px;bottom:8px;display:flex;gap:6px}
.dsctl .btn{background:var(--surface);min-width:44px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.dsinfo{background:var(--surface);border:1px solid var(--line);padding:12px 14px;min-height:3.4em}
.dsinfo>b{display:flex;align-items:center;gap:8px;font-size:1.05rem;font-weight:650;letter-spacing:-.02em;margin-bottom:4px}
.dsinfo p{margin:6px 0 0}
.dswhy{color:var(--accent-text)}
.dsok{color:var(--good);display:block} .dsbad{color:var(--bad);display:block}
.dsn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:500 12px var(--f-mono);display:inline-grid;place-items:center}
.dslist{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.dslist button{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;min-height:44px;cursor:pointer;color:var(--ink);font:inherit}
.dslist button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.dslist small{display:block;color:var(--muted);font-size:.82rem;line-height:1.3}
.dsfig{display:block;margin-top:12px;overflow:hidden}
.dsfig .dsview{height:240px;min-height:240px;cursor:pointer}
.mod.soon{opacity:.75}
.qtext .eyebrow{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.ptpbar.closed{background:transparent;border:0;box-shadow:none;padding:4px 0;justify-items:end;pointer-events:none}
.ptpbar.closed .ptpbarbody{display:none}
.ptpbar:not(.closed) .ptpbaropen{display:none}
.ptpbaropen{width:auto;max-width:100%;padding:10px 16px;border-radius:999px;pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.ptpbarbody{display:grid;gap:6px}
.ptpsaved{color:var(--good)}
/* "Why go Pro" on the sign-in screens: the three plans as a ledger, the same words as the landing page. */
.plans{display:grid;gap:0;border-top:1px solid var(--line);margin-top:8px}
.plans>div{display:grid;grid-template-columns:minmax(96px,.5fr) minmax(0,1.5fr);gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.plans b{font:650 16px/1.25 var(--f-body);letter-spacing:-.02em}
.plans .price{display:block;font:500 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--accent-text);margin-top:3px}
.plans p{font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.plans>div.pro{border-left:4px solid var(--accent);padding-left:10px}
@media (max-width:360px){.plans>div{grid-template-columns:minmax(0,1fr)}}
.pitch .btnrow{margin-top:12px}
/* Create an account: the plan choice. A chosen plan is outlined in orange. */
.planpick{grid-template-columns:1fr;margin-top:8px}
.planpick button[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.planpick button b{font-size:16px}
/* training, dashboards, badges */
.trainbanner{display:grid;text-decoration:none;color:inherit;margin-bottom:14px}
.card.hilite{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ctabs.acview,.ctabs.octabs{margin:0 0 14px;display:flex;gap:6px;flex-wrap:wrap;padding:0;background:none;border:0}
.ctabs.acview button,.ctabs.octabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:8px 14px;min-height:44px;font-weight:600;font-size:14px;cursor:pointer;color:var(--ink)}
.ctabs.acview button.on,.ctabs.octabs button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.notice{display:grid;gap:6px}
.rvline{display:grid;gap:6px;margin-top:8px}
.rvline .ok{color:var(--good);font-weight:600}
/* company-specific items (src/company.js) and the privacy screen (src/privacy.js) */
.pill.cs{background:var(--accent);color:var(--accent-ink)}
.card.cs{border-left:4px solid var(--accent)}
.csitem{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--line)}.csitem:first-of-type{border-top:0;padding-top:0}
.csitem .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.csitem .kind{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.csitem .says{font-size:.92rem;color:var(--muted)}.csitem .src{font-size:.8rem;color:var(--muted)}
.cdocsec .prow{display:grid;gap:6px}@media (min-width:640px){.cdocsec .prow{grid-template-columns:1fr 1fr}}
.cdocsec select.search{width:100%}
.whosees{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.privtbl td:first-child{font-weight:600}.privtbl td{vertical-align:top}
.fbnot{margin:8px 0}
.crewcard{margin-top:10px;display:grid;gap:8px}
#acUsers .pcrow{grid-template-columns:auto minmax(0,1fr)}#acUsers .pcrow .btnrow{grid-column:1/-1;flex-wrap:wrap}

/* ---------- Glass look: rules (tokens in base.css) ----------
   Modeled on the Safety Observations app (app.safetyobservations.ai, "glass look"). The big panels blur what
   scrolls behind them: the header strip, the craft bar, the tab bar, cards, the floating bars, and the Coach.
   Everything nested only carries the translucent tints that --surface, --surface-2, --line, and --bg already
   have under glass, so phones stay smooth. :where() keeps the gating selector at zero specificity, so the
   ordinary rules (.card.hilite, .ptpbar.closed, pressed buttons) still win where they should. Flat look:
   Account > Appearance > Flat sets data-glass="off" and none of this applies. */
:where(:root:not([data-glass="off"])) body{background:repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 36px),repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 36px),var(--amb)}
/* header strip: smoked glass in both schemes, the craft bar frosted */
:where(:root:not([data-glass="off"])) .top{background:var(--glass-smoke);border-bottom-color:var(--glass-smoke-line);-webkit-backdrop-filter:var(--bf-bar);backdrop-filter:var(--bf-bar)}
:where(:root:not([data-glass="off"])) .brandtxt small{color:var(--glass-brand)}
:where(:root:not([data-glass="off"])) .craftbar{background:var(--glass-head);border-bottom-color:var(--glass-edge);-webkit-backdrop-filter:var(--bf-bar);backdrop-filter:var(--bf-bar)}
/* tab bar: a floating glass pill, the content scrolling beneath and beside it */
:where(:root:not([data-glass="off"])) .tabs{justify-self:center;width:100%;max-width:580px;margin:0;padding:0 6px env(safe-area-inset-bottom,0px);border:1px solid var(--glass-edge);border-bottom:0;border-radius:26px 26px 0 0;background:var(--glass-bar);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 40px -18px rgba(0,0,0,.45);-webkit-backdrop-filter:var(--bf-bar);backdrop-filter:var(--bf-bar)}
:where(:root:not([data-glass="off"])) .tabs a,:where(:root:not([data-glass="off"])) .tabs button{min-height:56px;border-radius:20px}
/* cards and the other big panels */
:where(:root:not([data-glass="off"])) .card,:where(:root:not([data-glass="off"])) details.deep,:where(:root:not([data-glass="off"])) .viz,:where(:root:not([data-glass="off"])) .tbl,
:where(:root:not([data-glass="off"])) .ptpstep,:where(:root:not([data-glass="off"])) .hzc,:where(:root:not([data-glass="off"])) .tplsec,:where(:root:not([data-glass="off"])) .tplsrc,
:where(:root:not([data-glass="off"])) .dsinfo,:where(:root:not([data-glass="off"])) .copymode .big{background:var(--glass-fill);border-top-color:var(--glass-edge);border-right-color:var(--glass-edge);border-bottom-color:var(--glass-edge);border-radius:var(--rc);box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-sh);-webkit-backdrop-filter:var(--bf-panel);backdrop-filter:var(--bf-panel)}
:where(:root:not([data-glass="off"])) .card.danger{border-color:var(--bad)}
:where(:root:not([data-glass="off"])) .tbl{overflow:hidden;overflow-x:auto}
/* the Coach: a frosted sheet over the app, smoked header, frosted tab row and composer */
:where(:root:not([data-glass="off"])) .coach{background:var(--glass-wash);-webkit-backdrop-filter:var(--bf-sheet);backdrop-filter:var(--bf-sheet)}
:where(:root:not([data-glass="off"])) .coach header{background:var(--glass-smoke);-webkit-backdrop-filter:var(--bf-bar);backdrop-filter:var(--bf-bar)}
:where(:root:not([data-glass="off"])) .ctabs:not(.acview):not(.octabs){background:var(--glass-head);border-bottom-color:var(--glass-edge);-webkit-backdrop-filter:var(--bf-head);backdrop-filter:var(--bf-head)}
:where(:root:not([data-glass="off"])) .composer{background:var(--glass-bar);border-top-color:var(--glass-edge);-webkit-backdrop-filter:var(--bf-foot);backdrop-filter:var(--bf-foot)}
:where(:root:not([data-glass="off"])) .msg.ai{background:var(--glass-in);border-color:var(--glass-edge)}
/* floating bars: the PTP bar and the summary stick above the tab pill; the install tip, offline pill, toast, and error bar float */
:where(:root:not([data-glass="off"])) .ptpbar{background:var(--glass-solid);border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 24px rgba(0,0,0,.18);-webkit-backdrop-filter:var(--bf-foot);backdrop-filter:var(--bf-foot)}
:where(:root:not([data-glass="off"])) .ptpbar.closed{-webkit-backdrop-filter:none;backdrop-filter:none}
:where(:root:not([data-glass="off"])) .summary{background:var(--glass-smoke);-webkit-backdrop-filter:var(--bf-bar);backdrop-filter:var(--bf-bar)}
:where(:root:not([data-glass="off"])) .tip{background:var(--glass-solid);border-top-color:var(--glass-edge);border-right-color:var(--glass-edge);border-bottom-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-hi),0 8px 24px rgba(0,0,0,.2);-webkit-backdrop-filter:var(--bf-sheet);backdrop-filter:var(--bf-sheet)}
:where(:root:not([data-glass="off"])) .netbar{background:var(--glass-smoke);-webkit-backdrop-filter:var(--bf-bar);backdrop-filter:var(--bf-bar)}
:where(:root:not([data-glass="off"])) .toast{background:color-mix(in srgb,var(--good) 92%,transparent);-webkit-backdrop-filter:var(--bf-toast);backdrop-filter:var(--bf-toast)}
:where(:root:not([data-glass="off"])) .errbar{background:color-mix(in srgb,var(--bad-soft) 88%,transparent);-webkit-backdrop-filter:var(--bf-toast);backdrop-filter:var(--bf-toast)}
/* diagrams keep solid paper where a see-through fill would muddle them: surface fills, text halos, hotspots, the wheel hub */
:where(:root:not([data-glass="off"])) .s-surf{fill:var(--paper)}
:where(:root:not([data-glass="off"])) .halo{stroke:var(--paper)}
:where(:root:not([data-glass="off"])) .hot circle{stroke:var(--paper)}
:where(:root:not([data-glass="off"])) .hot.on text{fill:var(--paper)}
:where(:root:not([data-glass="off"])) .wheel .hub{fill:var(--paper)}
:where(:root:not([data-glass="off"])) .wheel .wedge{fill:color-mix(in srgb,var(--ec,var(--rule)) 16%,var(--paper))}
:where(:root:not([data-glass="off"])) .wheel .ew.sug .wedge{fill:color-mix(in srgb,var(--ec) 45%,var(--paper))}
/* desktop: the craft photo stays behind a frosted content column */
@media (min-width:1000px){
  :where(:root:not([data-glass="off"])) body[data-bg]{background:var(--tint),var(--bg-photo,none) center / cover no-repeat fixed,var(--amb)}
  :where(:root:not([data-glass="off"])) body[data-bg] .wrap{background:var(--glass-solid);box-shadow:0 0 0 1px var(--glass-edge),0 0 48px rgba(0,0,0,.22);-webkit-backdrop-filter:var(--bf-sheet);backdrop-filter:var(--bf-sheet)}
}
.glassnote{margin-top:10px}