/* RRI Team — graphite and red. TWO reds on purpose (R132-10): --accent = brand red #B10206 (hover #d4161b) from the RRI site tokens, for the LOOK only (buttons, links, nav); --safety = a distinct orange-red #E03A1A for alarms, stop, danger and anything a person must not miss (--red / --red-bg are aliases of it, so every danger style uses it). Graphite #16181b / #2e3237, steel #8a9097. --green stays the status 'ok' colour: brand red must never read as 'good', and never as 'danger'. */
:root{
  --accent:#B10206; --accent-hi:#d4161b; --green:#0B843C; --green-d:#0B4A20; --deep:#16181b; --slate:#2e3237; --ink:#16181b; --line:#E6E9E6;
  --body:#2e3237; --muted:#4a5057; --bg:#F4F6F4; --card:#FFFFFF; --hair:#E4E8E4;
  --safety:#E03A1A; --safety-bg:#FDEBE6; --red:var(--safety); --red-bg:var(--safety-bg); --amber:#9A5B00; --amber-bg:#FFF3E0; --blue:#1F5F8B; --blue-bg:#E8F1F8; --ok-bg:#E6F4EC; --grey-bg:#EEF0EE;
  --r:8px; --shadow:0 1px 2px rgba(23,32,27,.06),0 2px 8px rgba(23,32,27,.05);
  font-family:Montserrat,"Segoe UI",system-ui,sans-serif; color:var(--body); font-size:15px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{min-height:100vh;-webkit-text-size-adjust:100%}
a{color:var(--accent)}
h1,h2,h3{color:var(--ink);margin:0 0 .4em;line-height:1.2}
h1{font-size:1.45rem;font-weight:700} h2{font-size:1.1rem;font-weight:700} h3{font-size:.95rem;font-weight:700}
.muted{color:var(--muted)} .small{font-size:.82rem} .tiny{font-size:.72rem}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .grow{flex:1} .right{margin-left:auto}
.stack>*+*{margin-top:12px}

/* the strip above the header: time · site weather · headlines. Not sticky — it scrolls away, the header sticks. */
.strip{display:block;background:var(--ink);color:#fff;font-size:.74rem;white-space:nowrap;overflow:hidden;border-bottom:1px solid #000}
.strip .sp-row{display:flex;align-items:stretch;height:30px;border-bottom:1px solid #2e3237;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.strip .sp-row::-webkit-scrollbar{display:none}
.strip .sp-cell,.strip .sp-cells{display:inline-flex;align-items:center;gap:6px;padding:0 9px;border-right:1px solid #2e3237;flex:none;font-variant-numeric:tabular-nums}
.strip .sp-cells{padding:0;border-right:0}
.strip .sp-cell i{font-style:normal;color:#8a9097;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.strip .sp-cell b{color:#fff;font-weight:800;font-size:.8rem}
.strip .sp-cell em{font-style:normal;color:#8a9097;font-size:.62rem;font-weight:600}
.strip .sp-cell em.up{color:#9fd4b3}
.strip .sp-cell em.dn{color:#f3b39a}
.strip .sp-ye b{color:#fff}
.strip .sp-time{color:#c9d3cc;font-weight:600;letter-spacing:.04em;font-size:.66rem}
.strip .sp-time b{font-size:.86rem;font-weight:800;color:#fff;letter-spacing:.01em}
.strip .sp-time small{font-size:.62rem;color:#8a9097;font-weight:700}
.strip .sp-wx i{color:#9fd4b3}
.strip .sp-wx .cond{color:#e6e9e6;font-weight:500}
.strip .sp-wx .t{font-weight:800;font-size:.86rem;color:#fff}
.strip .sp-wx .hl{color:#8a9097}
.strip .sp-wx .warn{color:#f3b39a;font-weight:700}
.strip .sp-wx .muted{color:#8a9097}
.strip .sp-tk{width:100%;overflow:hidden;height:30px;position:relative}
.strip .sp-track{display:flex;align-items:center;height:30px;width:max-content;will-change:transform;animation:sptk var(--dur,480s) linear infinite}
.strip .sp-tk:hover .sp-track,.strip .sp-tk:focus-within .sp-track{animation-play-state:paused}
@keyframes sptk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip .sp-reg{display:inline-flex;align-items:center;height:18px;margin:0 12px 0 22px;padding:0 7px;border-radius:4px;background:var(--accent);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.strip .sp-item{color:#fff;text-decoration:none;font-weight:500;margin-right:22px}
.strip .sp-item b{color:#9fd4b3;font-weight:700;font-size:.66rem;letter-spacing:.06em;margin-right:6px}
.strip .sp-item:hover{text-decoration:underline}
@media (max-width:640px){.strip .sp-cell{padding:0 10px}}
@media (prefers-reduced-motion:reduce){.strip .sp-track{animation:none}.strip .sp-tk{overflow-x:auto}}
@media print{.strip{display:none!important}}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:#fff;color:var(--ink);border-bottom:3px solid var(--accent);display:flex;align-items:center;gap:10px;padding:8px 14px;padding-top:max(8px,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand img{height:34px;width:auto;display:block}
.brand div{border-left:1px solid var(--line);padding-left:12px}
.brand b{font-weight:800;letter-spacing:.08em;font-size:.92rem}
.brand span{display:block;font-size:.6rem;letter-spacing:.14em;color:var(--accent);font-weight:700}
.top select{background:#fff;color:var(--ink);border:1px solid #cfd6d1;border-radius:6px;padding:6px 8px;font:inherit;font-size:.85rem;max-width:44vw;min-width:104px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){.top select{max-width:34vw;min-width:88px}}
/* 44x44 hit target via an invisible ::before layer — the visible icon stays its
   normal size, but the tappable area grows past it, for gloved/switch use. */
.iconbtn{background:none;border:0;color:var(--ink);position:relative;padding:6px;cursor:pointer;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px}
.iconbtn::before{content:'';position:absolute;inset:-6px}
.iconbtn:hover{background:var(--grey-bg)}
.badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;border-radius:9px;font-size:.62rem;font-weight:700;padding:1px 5px}
.sync{font-size:.7rem;opacity:.75;white-space:nowrap}
.sync.off{color:var(--red);opacity:1}
/* Offline/pending state, phone only — the full .sync chip is desktop-only
   (hide-m). Reuses paintSync()'s own state and the existing red, no new colour. */
.offbadge{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:var(--red);white-space:nowrap}
.offbadge[hidden]{display:none}
.offbadge .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none}
@media (min-width:821px){.offbadge{display:none!important} #menuBtn{display:none!important}}

/* layout */
.shell{display:block;min-height:calc(100vh - 90px)}
main{margin:0 auto}
main{padding:18px 20px 90px;max-width:1100px;width:100%}
.tabbar{display:none}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  main{padding:14px 12px 96px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{flex:1;text-align:center;padding:4px 2px 6px;font-size:.66rem;font-weight:700;color:var(--slate);text-decoration:none;border-top:3px solid transparent}
  .tabbar a svg{display:block;margin:0 auto 2px}
  .tabbar a.on{color:var(--accent);border-top-color:var(--accent)}
  .hide-m{display:none!important}
}

/* cards & tiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid.site4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.site4 .list .item .ttl.small{font-size:.86rem}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--accent)}
.tile .k{font-size:1.6rem;font-weight:800;color:var(--ink)}
.tile .l{font-size:.78rem;color:var(--muted);font-weight:600}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.kpi .k{font-size:1.4rem;font-weight:800;color:var(--ink)}
.kpi .l{font-size:.74rem;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:.01em;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi.bad .k{color:var(--red)} .kpi.good .k{color:var(--green)}
.kpi.none .k{font-size:.92rem;font-weight:700;color:var(--muted)}
.quick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.quick button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:#fff;cursor:pointer;font:inherit;box-shadow:var(--shadow);min-height:132px}
.quick button b{color:var(--ink);font-size:.92rem}
.quick button span{font-size:.74rem;color:var(--muted)}
.quick button .qicon{color:var(--accent)}
.quick button .blurb{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.32}
.quick button:hover{border-color:var(--accent)}
.quick button.hot{border-left:4px solid var(--red)}

/* buttons & inputs */
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 14px;border-radius:6px;font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;text-decoration:none;min-height:40px}
.btn:hover{border-color:var(--slate)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hi)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:none;border-color:transparent}
.btn.sm{padding:5px 10px;min-height:32px;font-size:.78rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-size:.78rem;font-weight:700;color:var(--slate);margin-bottom:4px}
label.f>span i{color:var(--red);font-style:normal}
label.f small{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}
input,select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);border:1px solid #cfd6d1;border-radius:6px;padding:9px 10px;background:#fff}
textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(177,2,6,.35);border-color:var(--accent)}
input[type=checkbox]{width:auto}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 14px}
.fgrid .wide{grid-column:1/-1}
.fsec{grid-column:1/-1;margin:14px 0 8px;padding-top:12px;border-top:2px solid var(--hair);font-weight:800;color:var(--deep);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.fsec:first-child{border-top:0;margin-top:0;padding-top:0}
.note{grid-column:1/-1;background:var(--blue-bg);border-left:3px solid var(--blue);padding:9px 12px;border-radius:4px;font-size:.85rem;margin-bottom:12px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #cfd6d1;background:#fff;border-radius:16px;padding:6px 11px;font:inherit;font-size:.8rem;cursor:pointer;font-weight:600;color:var(--slate)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* The visitor briefing at the gate — read on a phone, in daylight, by somebody who did not want to
   read anything. Generous line height, real bullets, and a tinted block so it reads as CONTENT and
   not as more form. */
.vbrief{background:var(--grey-bg,#EEF0EE);border-left:4px solid var(--accent);border-radius:3px;padding:10px 12px;margin:0 0 14px;text-align:left}
.vbrief p{margin:0 0 8px;font-size:.92rem;line-height:1.5}
.vbrief ul{margin:0;padding-left:18px}
.vbrief li{margin-bottom:7px;font-size:.92rem;line-height:1.5}
/* Language chooser — first-run setup and My profile. Two buttons side by side rather than a
   dropdown: a man looking for the word he recognises should see both languages at once, without
   opening anything. Each option is written in its own language for the same reason. */
.btn.lang-opt.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.lang-opt.on:hover{background:var(--accent)}
.yn{display:flex;gap:6px}
.chk{border:1px solid var(--line);border-radius:6px;margin-bottom:6px;padding:8px 10px;display:flex;gap:10px;align-items:center;background:#fff}
.chk .t{flex:1;font-size:.88rem;color:var(--ink)}
.chk .opts{display:flex;gap:4px}
.chk .opts button{border:1px solid #cfd6d1;background:#fff;border-radius:5px;padding:5px 9px;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;min-width:42px}
.chk .opts button.pass{background:var(--green);color:#fff;border-color:var(--green)}
.chk .opts button.fail{background:var(--red);color:#fff;border-color:var(--red)}
.chk .opts button.na{background:var(--slate);color:#fff;border-color:var(--slate)}
.chk.bad{border-color:var(--red);background:var(--red-bg)}

/* tables */
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.86rem}
.tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:8px;border-bottom:2px solid var(--hair);white-space:nowrap}
.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.click{cursor:pointer} .tbl tr.click:hover td{background:#f8faf8}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tedit td{padding:4px} .tedit input,.tedit select{padding:6px 7px;font-size:14px;min-width:90px}
.list .item{display:flex;gap:10px;align-items:flex-start;padding:12px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;background:#fff}
.list .item:hover{background:#f8faf8}
.list{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.list .item:last-child{border-bottom:0}
.item .num{font-size:.72rem;font-weight:800;color:var(--muted);letter-spacing:.04em}
.item .ttl{font-weight:700;color:var(--ink)}

/* status */
.st{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:10px;white-space:nowrap}
.st.grey{background:var(--grey-bg);color:var(--slate)} .st.blue{background:var(--blue-bg);color:var(--blue)}
.st.amber{background:var(--amber-bg);color:var(--amber)} .st.red{background:var(--red-bg);color:var(--red)}
.st.green{background:var(--ok-bg);color:var(--deep)}
.banner{padding:11px 14px;border-radius:6px;font-weight:600;font-size:.88rem;margin-bottom:12px}
.banner.red{background:var(--red-bg);color:var(--red);border-left:4px solid var(--red)}
.banner.amber{background:var(--amber-bg);color:var(--amber);border-left:4px solid var(--amber)}
.banner.blue{background:var(--blue-bg);color:var(--blue);border-left:4px solid var(--blue)}
.banner.green{background:var(--ok-bg);color:var(--deep);border-left:4px solid var(--green)}

/* empty-state spot illustrations */
.spot{width:110px;max-width:40%;height:auto;display:block;margin:0 auto 8px}
.banner .spot{width:56px;display:inline-flex;vertical-align:middle;margin:0 10px 4px 0}

/* record view */
.rhead{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.rhead .grow h1{margin:2px 0}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 16px}
.kv div>span{display:block;font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kv div>b{font-weight:600;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.kv .wide{grid-column:1/-1}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions-spacer{flex:1 1 auto}
@media (max-width:820px){
  .actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .actions .btn{flex:none;min-height:44px}
  .actions-spacer{flex:none;min-width:1px;align-self:stretch;border-left:1px dashed var(--line);margin:0 2px}
}
.timeline{font-size:.83rem}
.timeline .ev{padding:8px 0;border-bottom:1px dashed var(--line)}
.timeline .ev b{color:var(--ink)}
.sigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.sig{border:1px solid var(--line);border-radius:6px;padding:8px;background:#fff}
.sig img{width:100%;height:70px;object-fit:contain;background:#fafbfa;border-radius:4px}
.sig div{font-size:.74rem}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs a{display:block;width:96px;height:96px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:#fafbfa;font-size:.7rem;text-decoration:none;color:var(--slate)}
.thumbs img{width:100%;height:100%;object-fit:cover}

/* task cards (daily plan) */
.task{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:#fff;margin-bottom:8px}
.task.done{background:var(--ok-bg);border-color:#bfe2cc}
.task.hold{border-left:4px solid var(--red)}
.task .tt{font-weight:700;color:var(--ink)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(23,32,27,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:700px){.modal{align-items:center}}
.modal .box{background:#fff;border-radius:12px 12px 0 0;width:100%;max-width:560px;max-height:92vh;overflow:auto;padding:18px}
@media (min-width:700px){.modal .box{border-radius:12px}}
canvas.pad{width:100%;height:180px;border:1px dashed #8a9097;border-radius:6px;background:#fafbfa;touch-action:none}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;z-index:60;font-size:.86rem;font-weight:600;max-width:92vw}
.toast.err{background:var(--red)}
.empty{text-align:center;padding:30px 14px;color:var(--muted)}
.lib h3{margin-top:14px}
.pre{white-space:pre-wrap}
footer.foot{font-size:.7rem;color:var(--muted);padding:24px 0 0;border-top:1px solid var(--line);margin-top:30px}

@media print{
  .top,.rail,.scrim,.tabbar,.actions,.noprint,footer.foot{display:none!important}
  .shell{display:block} main{padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  body{background:#fff;font-size:11pt}
  .printhead{display:flex!important}
}
.printhead{display:none;justify-content:space-between;align-items:center;border-bottom:3px solid var(--accent);padding-bottom:8px;margin-bottom:12px}

.stickybar{position:sticky;bottom:0;margin:14px -4px 0;padding:10px 4px;background:rgba(244,246,244,.96);border-top:1px solid var(--line);z-index:5}
@media (max-width:820px){.stickybar{bottom:58px}}

/* sign-in */
.signin{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:18px;background:var(--bg)}
.signin .card{width:100%;max-width:400px;text-align:center;padding:26px 22px}
.signin img{height:42px;margin-bottom:14px}
.signin h1{font-size:1.15rem;letter-spacing:.06em}
.signin label.f{text-align:left;margin-top:14px}
.signin .banner{text-align:left}
/* Name-list rows on step 2 — full-width, glove-friendly, with a chevron. */
.who-row{width:100%;border:0;background:#fff;font:inherit;cursor:pointer;text-align:left;min-height:48px;display:flex;align-items:center;gap:8px}
.who-row .chev{margin-left:auto;color:var(--muted);font-size:1.1rem;flex:none}

/* ── the left menu (the rail) ──────────────────────────────────
   Joe, 2026-09-20: "build this into the left menu bar in a logical manner and remove the upper
   menu bar." One column: the four keys, a hairline, one block per part of the business (its
   dashboard, its sections, every form with its register a tap away), a hairline, Company.
   Laptop: always there, sticky under the header, scrolls on its own. Phone: a drawer behind ☰. */
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);align-items:start}
.rail{position:sticky;top:65px;height:calc(100vh - 65px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-right:1px solid var(--line);scrollbar-width:thin}
.rl-top{display:none}
.rl-body{padding:10px 8px 40px}
.rl-keys{display:grid;gap:2px}
.rl-key{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-left:3px solid transparent;border-radius:6px;color:var(--slate);font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
.rl-key svg{flex:none}
.rl-key:hover{background:var(--grey-bg);color:var(--ink)}
.rl-key.on{color:var(--deep);background:var(--grey-bg);border-left-color:var(--accent)}
.rl-key.emerg{color:#E03A1A}
.rl-key.emerg.on{background:#FDEBE6;border-left-color:#E03A1A;color:#E03A1A}
.rl-sep{border:0;border-top:1px solid var(--line);margin:10px 6px}
.rl-blk{margin:0 0 2px}
.rl-tgl{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-left:3px solid transparent;border-radius:6px;background:none;font:inherit;font-size:.86rem;font-weight:700;color:var(--slate);cursor:pointer;text-align:left}
.rl-tgl svg{flex:none}
.rl-tgl:hover{background:var(--grey-bg);color:var(--ink)}
.rl-blk.on>.rl-tgl{color:var(--deep);border-left-color:var(--accent)}
.rl-blk.open>.rl-tgl{color:var(--ink)}
.rl-blk.on.open>.rl-tgl{color:var(--deep)}
.rl-tgl .caret{margin-left:auto;font-size:.7rem;opacity:.6;transition:transform .18s}
.rl-blk.open>.rl-tgl .caret{transform:rotate(180deg)}
.rl-drop{display:none;padding:2px 0 8px 10px}
.rl-blk.open>.rl-drop{display:block}
.rl-dash{display:block;padding:6px 10px;font-size:.74rem;font-weight:700;color:var(--accent);text-decoration:none;border-radius:6px}
.rl-dash:hover{background:var(--grey-bg)}
.rl-dash.on{background:var(--grey-bg);color:var(--deep)}
.rl-sec{padding:10px 10px 3px;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rl-row{display:flex;align-items:stretch;border-radius:6px}
.rl-row:hover{background:var(--grey-bg)}
.rl-row.on{background:var(--ok-bg)}
.rl-fill{flex:1;min-width:0;display:flex;align-items:center;padding:7px 10px;border-left:3px solid transparent;border-radius:6px 0 0 6px;font-size:.82rem;font-weight:600;line-height:1.25;color:var(--ink);text-decoration:none}
.rl-fill.off{font-weight:500;color:var(--body)}
.rl-fill.off::after{content:'view';margin-left:6px;font-size:.62rem;font-weight:600;color:var(--muted)}
.rl-fill.on{color:var(--deep);border-left-color:var(--accent)}
.rl-reg{display:flex;align-items:center;gap:4px;padding:0 9px;border-radius:0 6px 6px 0;font-size:.66rem;font-weight:700;color:var(--muted);text-decoration:none;white-space:nowrap}
.rl-reg:hover{background:var(--accent);color:#fff}
.rl-reg.on{color:var(--deep)}
.rl-reg i{font-style:normal;background:var(--grey-bg);border-radius:9px;padding:1px 6px;color:var(--ink)}
.rl-reg:hover i{background:rgba(255,255,255,.25);color:#fff}
.rl-row:last-child{margin-bottom:0}
.scrim{position:fixed;inset:0;z-index:29;background:rgba(23,32,27,.45)}
.scrim[hidden]{display:none}
@media (min-width:821px){.scrim{display:none!important}}

@media (max-width:820px){
  .shell{display:block}
  .rail{position:fixed;top:0;bottom:0;left:0;z-index:30;width:min(86vw,330px);height:auto;padding-top:env(safe-area-inset-top);border-right:1px solid var(--line);box-shadow:0 0 30px rgba(23,32,27,.25);transform:translateX(-102%);visibility:hidden;transition:transform .22s ease-out,visibility .22s}
  .rail.open{transform:none;visibility:visible}
  .rl-top{display:flex;align-items:center;gap:10px;min-height:53px;padding:8px 12px;border-bottom:3px solid var(--accent)}
  .rl-top img{height:30px;width:auto}
  .rl-top b{font-weight:800;letter-spacing:.1em;font-size:.82rem;color:var(--ink)}
  .rl-top .iconbtn{margin-left:auto}
  .rl-body{padding:8px 8px 110px}
  .rl-key,.rl-tgl{min-height:46px;font-size:.95rem}
  .rl-fill{padding:11px 10px;font-size:.9rem}
  .rl-reg{padding:0 12px;font-size:.72rem}
  .rl-dash{padding:9px 10px;font-size:.8rem}
  body.rail-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.rail{transition:none}.rl-tgl .caret{transition:none}}

/* ── the printed controlled form ─────────────────────────────── */
#printArea{display:none}
.pform h2{font-size:12pt;margin:14px 0 4px;color:var(--deep);border-bottom:1px solid var(--hair);padding-bottom:2px;letter-spacing:.04em;text-transform:uppercase}
.pform h3{font-size:10.5pt;margin:10px 0 3px;color:var(--ink)}
table.pf{width:100%;border-collapse:collapse;margin:4px 0 8px;font-size:9.5pt}
table.pf th{border:1px solid #b9c2bc;background:#eef1ef;padding:4px 6px;text-align:left;font-size:8.5pt;text-transform:uppercase;letter-spacing:.04em}
table.pf td{border:1px solid #b9c2bc;padding:4px 6px;vertical-align:top}
table.pf td.pk{width:36%;background:#fafbfa;font-weight:600}
table.pf td.pc{width:22px;text-align:center;font-size:12pt}
table.pf td.pr{width:78px;text-align:center}
table.pf td.pblank{height:20px}
table.pf img{height:34px}
.phead{width:100%;border-collapse:collapse;border-bottom:2.5px solid var(--accent);margin-bottom:10px}
.phead td{padding:0 0 8px;vertical-align:bottom}
.pmut{font-size:8.5pt;color:var(--muted)}
.pfoot{margin-top:14px;border-top:1px solid var(--hair);padding-top:6px;font-size:8pt}

@media print{
  body>*{display:none!important}
  #printArea{display:block!important}
  @page{size:letter;margin:12mm}
  .pform{font-size:10pt;color:#000}
  table.pf,tr,img{break-inside:avoid}
  .pform h2{break-after:avoid}
}

/* ── acknowledge-by-link page (people with no account) ────────── */
.ackwrap{max-width:720px;margin:0 auto;padding:18px 14px 40px}
.ackwrap h1{font-size:1.25rem}
.ackwrap .card h2{font-size:.95rem;color:var(--deep);border-bottom:1px solid var(--hair);padding-bottom:4px}

/* ── document repository ─────────────────────────────────────── */
.repogrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.repocard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:11px 12px;box-shadow:var(--shadow)}
.repocard b{color:var(--ink);font-size:.9rem;line-height:1.25}
.ftype{background:var(--deep);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.08em;padding:3px 6px;border-radius:3px;align-self:flex-start}
.elcard .eln{font-size:1.4rem;font-weight:800;color:var(--accent)}

/* ── notices on the home screen ──────────────────────────────── */
.notices{display:grid;gap:8px;margin-bottom:14px}
.notice{display:block;padding:12px 14px;border-radius:var(--r);background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.notice:hover{border-color:var(--accent)}
.notice .k{font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.notice .h{font-weight:700;color:var(--ink);margin:2px 0}
.notice.urgent{border-left-color:var(--red);background:var(--red-bg)}
.notice.urgent .k{color:var(--red)}

/* ── English + Ukrainian ───────────────────────────────────────────────────
   The Ukrainian sits directly under its English line, a shade lighter, never
   in place of it. On paper it stays black enough to read after a photocopy. */
.uk{display:block;font-weight:400;font-style:normal;font-size:.86em;line-height:1.35;color:#5d6f64;letter-spacing:0;text-transform:none}
.chip .uk,.chk .t .uk{font-size:.82em}
/* On the sign-in door the Ukrainian is NOT a secondary gloss — for several of this crew it is the
   line they are actually reading, and it is the one screen they must get through before any
   language toggle exists. So it gets full contrast and near-full size there, not the lighter,
   smaller treatment that suits a bilingual form where English is the original. */
.signin .uk{color:#26352c;font-size:.94em;margin-top:2px}
/* A .btn is a flex container, so a block child becomes a flex ITEM and lands beside the English
   instead of under it. Force the button to stack, and keep the Ukrainian legible on the green. */
.signin .btn{flex-direction:column;line-height:1.25}
.signin .btn .uk{font-size:.86em;font-weight:600;opacity:.92;margin-top:1px}
.signin .btn.primary .uk{color:#eaf5ee}
/* Field labels carry both languages too — give the pair room to breathe. */
.signin label.f>span{line-height:1.3}
th .uk{font-weight:400;color:#607063}
.ukdecl{margin:6px 0 10px;padding:8px 10px;border-left:3px solid var(--accent,#B10206);background:var(--grey-bg);font-size:.95em;line-height:1.45}
p.pnote{margin:10px 0 14px;padding:8px 10px;border:1px solid var(--hair,#dfe5e0);border-radius:4px;background:#f7faf8;font-size:9.5pt;line-height:1.4}
p.pnote .uk{margin-top:3px}
.iconbtn.lang{font:600 12px/1 Montserrat,system-ui,sans-serif;letter-spacing:.06em;width:auto;padding:0 9px;border-radius:6px}
.iconbtn.lang.on{background:var(--accent,#B10206);color:#fff}
@media print{
  .uk{color:#333}
  th .uk{color:#333}
  p.pnote{background:#fff;border-color:#999;break-inside:avoid}
  .pform tr{break-inside:avoid}
}

/* Who may operate what — shown on the tailgate, read from the competency register. */
.authp{border:1px solid var(--hair,#dfe5e0);border-radius:6px;padding:8px;background:#fbfcfb}
.authheld{margin-top:8px;padding-top:8px;border-top:1px dashed var(--hair,#dfe5e0)}
.authheld .st{margin-right:4px}
.authp .st{display:inline-block;width:auto}
.authp .chk .t{display:block}

/* The emergency line stays findable at a glance (see .rl-key.emerg in the rail block). */
.shout{margin:8px 0 0;font-weight:800;letter-spacing:.04em;color:#E03A1A}

/* ── Forms index: sticky search + row layout ───────────────────── */
.searchbar{margin:10px 0}
.searchbar input{max-width:420px}
.formrow .blurb-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:820px){
  .searchbar{position:sticky;top:53px;z-index:15;background:var(--bg);padding:10px 12px;margin:0 -12px 10px;box-shadow:0 1px 0 var(--line)}
  .searchbar input{max-width:none;width:100%}
  .formrow{flex-direction:column;align-items:stretch}
  .formrow-actions{width:100%;justify-content:stretch}
  .formrow-actions .btn{flex:1;justify-content:center;min-height:44px}
}

/* ── focus-visible: keyboard and switch-access users ───────────── */
.btn:focus-visible,.chip:focus-visible,.tile:focus-visible,.notice:focus-visible,.rl-key:focus-visible,.rl-tgl:focus-visible,.rl-fill:focus-visible,.rl-reg:focus-visible,.rl-dash:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Desktop: the header runs the full width over the rail and the page; the page keeps its 1100 px
   column beside the rail (R2.19's shared column was for the top bar, gone in R2.22). */
@media (min-width:821px){
  .top{padding-left:18px;padding-right:20px}
  .strip .sp-row,.strip .sp-tk{margin-left:max(0px,calc((100% - 1100px)/2 + 11px));margin-right:max(0px,calc((100% - 1100px)/2 + 11px))}
  /* branding a size up */
  .brand img{height:44px}
  .brand div{padding-left:14px}
  .brand b{font-size:1.06rem}
  .brand span{font-size:.66rem;margin-top:1px}
  .top{padding-top:9px;padding-bottom:9px}
  .brand{flex:none}
  .brand b,.brand span{white-space:nowrap}
  .top select{flex:0 1 auto;min-width:140px}
}

/* Row one gives up detail tier by tier until it fits its width (fitStrip() in app.js measures and sets the class). */
.strip.t1 .sp-wx .hl,.strip.t1 .sp-time .yr{display:none}
.strip.t2 .sp-cell em.up,.strip.t2 .sp-cell em.dn,.strip.t2 .sp-wx .cond{display:none}
.strip.t3 .sp-cell,.strip.t3 .sp-cells{padding:0 7px;gap:5px}
.strip.t3 .sp-cell b{font-size:.74rem}
.strip.t3 .sp-cell i{letter-spacing:.04em;font-size:.56rem}
.strip.t4 .sp-time .dt{display:none}
.strip.t4 .sp-wx i{display:none}

/* R2.22 — with the menu in the left rail there is no centred column above the page any more: the strip runs
   the full width like the header and the rail (the 1100-column inset above was for the top-bar layout). */
@media (min-width:821px){.strip .sp-row,.strip .sp-tk{margin-left:0;margin-right:0}}

/* R2.24 — sign-in: two doors (pick your name / "First time here?"), and the password fields
   both it and the setup form use, with a show/hide toggle. */
.pwwrap{position:relative;display:block}
.pwwrap input{padding-right:40px;width:100%}
.pwtoggle{position:absolute;top:0;right:0;bottom:0;width:38px;display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--muted);cursor:pointer;padding:0}
.pwtoggle:hover{color:var(--ink)}

/* R2.24 — "Before you start on <project>": orientation, the emergency plan and the site hazard
   assessment, shown as a tick-and-date row once each is done, or a plain link/note while it isn't. */
.ob-card{border-left:4px solid var(--amber)}
.ob-rows{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:4px}
.ob-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;background:#fff}
.ob-row:last-child{border-bottom:0}
a.ob-row:hover{background:#f8faf8}
.ob-row.done{background:var(--ok-bg)}
.ob-tick{display:inline-flex;align-items:center;gap:5px;color:var(--green-d);font-weight:700;font-size:.82rem;white-space:nowrap}
.ob-tick.standalone{color:var(--green-d);font-weight:700}
.ob-go{display:inline-flex;align-items:center;gap:4px;color:var(--green-d);font-weight:700;font-size:.82rem;white-space:nowrap}
.ob-row.ob-none{color:inherit}

/* ── R2.25 — sign on / sign off: the big button at the top of Home and Today's plan ─────────
   One card, three states: not signed on (one big green button) → signed on (times so far, a big
   "Sign off" button) → signed off (both times, hours between, a travel-minutes entry). Never an
   accusation when a time falls outside the project's site hours — plain fact only, and only said
   at all when the project actually has site hours set. */
.stx-card{border-left:4px solid var(--accent)}
.stx-big{width:100%;justify-content:center;min-height:56px;font-size:1.05rem}
.stx-note{margin:8px 0 0;color:var(--amber);background:var(--amber-bg);border-left:3px solid var(--amber);padding:7px 10px;border-radius:4px;font-weight:600}
.stx-travel{margin-top:10px;gap:10px;align-items:flex-end}
.stx-travel input{max-width:140px}

/* ── R2.25 — crews: the "your crew" line on Home, and the crew-grouped sign-on roster on
   Today's plan / the Site & Crew dashboard. Lead always sorts first within their crew, and is
   marked, never just implied. Unnamed crew (nobody assigned yet) sorts last, per the server. */
.crewgrp{border:1px solid var(--line);border-radius:8px;margin-bottom:10px;overflow:hidden}
.crewgrp:last-child{margin-bottom:0}
.crewgrp-h{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:7px 10px;background:var(--grey-bg);font-size:.82rem}
.crewgrp-list{background:#fff}
.crewgrp-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-top:1px solid var(--line);font-size:.86rem}
.crewgrp-row:first-child{border-top:0}
.crewgrp-row.lead{background:var(--ok-bg)}
.crewgrp-row .st{margin-left:4px;padding:1px 6px;font-size:.6rem}

/* ── R2.25 — project schedule: pure-CSS planned/actual bars on a timeline that scrolls
   sideways rather than shrinking dates to nothing on a phone. Bar position and width are set
   inline as percentages of the project's date span (app.js) — this just styles the track. */
.sched-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.sched-inner{min-width:720px;padding:12px 16px 16px;position:relative}
.sched-axis{position:relative;height:20px;margin-bottom:8px;border-bottom:1px solid var(--hair);font-size:.68rem;color:var(--muted);font-weight:700}
.sched-axis span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.sched-axis-today{color:var(--green-d)!important;font-weight:800}
.sched-row{display:grid;grid-template-columns:190px 1fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--hair)}
.sched-row:last-child{border-bottom:0}
.sched-label{min-width:0}
.sched-label a{color:var(--ink);text-decoration:none}
.sched-label a:hover{text-decoration:underline}
.sched-label .st{margin-left:4px;vertical-align:1px}
.sched-track{position:relative;height:26px;background:var(--bg);border-radius:5px}
.sched-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--hair)}
.sched-bar{position:absolute;border-radius:4px}
.sched-bar.planned{background:#cfd6d1;top:2px;height:8px}
.sched-bar.actual{background:var(--green);top:12px;height:12px;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;min-width:2px}
.sched-bar.actual.hold{background:var(--amber)}
.sched-bar.actual.done{background:var(--green-d)}
.sched-pct{font-size:.62rem;font-weight:800;color:#fff;white-space:nowrap;padding:0 3px}
.sched-todayline{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--red);opacity:.55}
.sched-key{gap:14px}
.sched-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.sched-swatch.planned{background:#cfd6d1}
.sched-swatch.actual{background:var(--green)}
.sched-swatch.hold{background:var(--amber)}
.sched-swatch.done{background:var(--green-d)}
@media (max-width:820px){
  .sched-row{grid-template-columns:130px 1fr}
  .sched-inner{min-width:600px}
}

/* ── R2.26 — site gate (QR sign-on + visitor sign-in) and the emergency-screen incident /
   stand-down buttons (Joe, 2026-09-20). The anonymous gate/visitor pages reuse .ackwrap, .card,
   .f, .fgrid, .fsec, .chips, .pad, .row and .foot, all already above — nothing new needed there. */
.btn.amber{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.amber:hover{background:#7a4900}
.sos-card{border-left:4px solid var(--red)}
.sos-caution{margin:0 0 12px;font-weight:700;color:var(--red)}
.sos-row{display:flex;flex-wrap:wrap;gap:10px}
.sos-btn{flex:1 1 220px;justify-content:center;min-height:52px;font-size:1rem}
.sos-armed{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.sos-armed p{margin:0 0 10px}

/* ── R2.27 — working alone: the live check-in (spec §8). Appended at the END of this file on
   purpose: the left rail (.rl-*) and everything above is untouched. Two things live here — the
   worker's countdown card, which has to be readable and tappable in gloves on a phone in the
   sun, and the foreman's live list, where the row that is most overdue has to be the one your
   eye lands on first. Colour is never the only signal: every state also says what it is in
   words, because a red bar means nothing to somebody who cannot see red. */
.wa-card{border-left:4px solid var(--accent)}
.wa-card.wa-amber{border-left-color:var(--amber)}
.wa-card.wa-red{border-left-color:var(--red);background:var(--red-bg)}
.wa-count{margin:10px 0;font-size:.95rem;color:var(--slate)}
.wa-count b{font-size:2rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:inline-block;min-width:3.4ch}
.wa-count b.due{color:var(--red)}
.wa-big{width:100%;justify-content:center;min-height:72px;font-size:1.35rem;font-weight:800;letter-spacing:.01em}
.wa-sub{margin-top:10px;gap:10px;align-items:center}
.wa-done{white-space:nowrap}
.wa-pending{margin:10px 0;padding:9px 12px;border-radius:5px;background:var(--amber-bg);color:var(--amber);border-left:3px solid var(--amber);font-weight:600;font-size:.86rem}
/* The man-down caveat. Spec §5: plain words, on the screen, not in a footnote — so it is set at
   body size in a bordered block rather than as grey small print anybody would scroll past. */
.wa-caveat{margin:12px 0 0;padding:10px 12px;border-radius:5px;background:var(--grey-bg);border-left:3px solid var(--slate);color:var(--slate);font-size:.84rem;line-height:1.45}
.wa-caveat b{color:var(--ink)}
.wa-list .wa-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0 10px 10px;border-bottom:1px dashed var(--hair);border-left:3px solid transparent}
.wa-list .wa-row:last-child{border-bottom:0}
.wa-row.green{border-left-color:var(--green)}
.wa-row.amber{border-left-color:var(--amber);background:var(--amber-bg)}
.wa-row.red{border-left-color:var(--red);background:var(--red-bg)}
.wa-rowr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.wa-due{font-size:.72rem;font-weight:800;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-due.late{color:var(--red);text-transform:uppercase;letter-spacing:.04em}
.wa-start{margin-bottom:14px}
@media (max-width:620px){
  .wa-list .wa-row{flex-wrap:wrap}
  .wa-rowr{width:100%;justify-content:flex-start}
  .wa-sub{flex-direction:column;align-items:stretch}
  .wa-done{width:100%;min-height:44px;justify-content:center}
}

/* ── Drawings on a phone ───────────────────────────────────────────────────────────────────────
   Joe, 2026-09-20: "the drawings are buried, hard to get at — hard to find on the phone."
   These rows are deliberately taller than an ordinary list item. A man opening a sheet is usually
   standing up, outdoors, in gloves, and the cost of a mis-tap here is opening a 7 MB PDF he did
   not want over a rural cell connection. 64px minimum, and the discipline reads at arm's length. */
.dwglist .item.dwg{min-height:64px;padding:12px 12px;gap:12px;align-items:center}
.dwg-disc{flex:0 0 86px;font:700 11px/1.25 Montserrat,system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent,#B10206);word-break:break-word}
.dwglist .item.dwg .ttl{font-size:1rem;line-height:1.3}
.dwglist .item.dwg .chev{font-size:22px;opacity:.5}
@media (max-width:420px){
  .dwg-disc{flex-basis:72px;font-size:10px}
  .dwglist .item.dwg{padding:12px 10px;gap:10px}
}

/* Six tabs instead of five (Drawings became a main tab 2026-09-20).
   MEASURED against this stylesheet rather than guessed: at 375px every label fits at the original
   .66rem — even at .70rem — so the type is NOT shrunk there. Only at 320px (an iPhone SE) does
   "Equipment", the longest label, clip; .60rem is the largest that fits. A first attempt shrank
   every phone to .62rem to solve a problem only the narrowest screen has, which made the labels
   worse for everybody. Tap targets are untouched — the whole tab is still the target. */
@media (max-width:820px){
  .tabbar a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (max-width:360px){
  .tabbar a{font-size:.60rem;letter-spacing:-.01em}
}