/* ShieldHand prototype (folder name ShieldHand). Components from Q's round one design
   (Projects\App\Design\2026-11-10 Mock-ups\Source\style.css), made into a real
   app: no fixed phone sizes, no outside fonts or icon libraries. */
/* The brand's colours and typeface come from brand.css (one place for the app, the website and the log-in). */
:root{
  --ink:var(--brand-ink,#0B2341); --paper:var(--brand-paper,#F4F6F8); --white:#FFFFFF;
  --signal:var(--brand-hazard,#FFD13B);   /* serious and high priority only (not a brand colour) */
  --accent:var(--brand-accent,#009B3A); --action:var(--brand-action,#007A2E); --mint:var(--brand-soft,#E6F5EC);
  --head:var(--brand-font-head,var(--brand-font,'Segoe UI',system-ui,sans-serif));
  --pos:var(--brand-positive,#0A5E8C); --pos-t:#E2EEF6; --imp:var(--brand-improve,#A84B0C); --imp-t:#FCEBDD;
  --slate:#4A5A66; --line:#8A969E; --soft:#D5D9DC; --mat:#E3E7EE; --bad:#9B1C1C;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--brand-font,'Segoe UI',system-ui,sans-serif);color:var(--ink);background:var(--mat);-webkit-font-smoothing:antialiased;font-size:18px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
button:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
svg.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the app column: full screen on a phone, a phone-width column on the laptop */
.frame{min-height:100dvh;display:flex;justify-content:center}
.app{width:100%;max-width:480px;min-height:100dvh;background:var(--paper);display:flex;flex-direction:column;box-shadow:0 0 40px rgba(19,33,44,.18)}
/* "View as": WorkSafePro support looking, read-only. Hazard colours: it must never look like normal use. */
.viewas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--brand-hazard,#FFD13B);color:#0B2341;border-bottom:3px solid #0B2341;padding:8px 14px;font-size:16px;font-weight:600}
.viewas .viewback{min-height:48px;padding:0 16px;border-radius:12px;background:#0B2341;color:#fff;font-weight:700;font-size:16px;white-space:nowrap}
.app[data-desk="1"] > .tops{grid-column:1 / -1;grid-row:1}
.sharedas{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--ink);color:#fff;font-size:18px;padding:6px 16px}
.sharedas .sharedout{display:flex;align-items:center;gap:8px;min-height:66px;padding:0 20px;border-radius:14px;background:#fff;color:var(--ink);font-size:18px;font-weight:700}
/* The Planner as a tracker (12 Nov): a table on wider screens, cards on phones; a job's record with its documents and actions. */
table.track{border-collapse:collapse;width:100%;font-size:16px;background:#fff}
table.track th,table.track td{overflow-wrap:normal;word-break:normal;hyphens:manual}
table.track td:first-child{min-width:200px}   /* Snagger R6: never break words; the box scrolls before a title breaks */
table.track th,table.track td{padding:10px 12px;border-bottom:1px solid var(--soft);text-align:left;vertical-align:top}
table.track thead th{font-size:16px;color:var(--slate);background:var(--paper);white-space:nowrap}
table.track tbody tr{cursor:pointer}
table.track tbody tr:hover,table.track tbody tr:focus{background:var(--mint);outline:none}
table.track tr.over td:first-child{box-shadow:inset 5px 0 0 var(--bad)}
table.track .badge{white-space:nowrap}
.trackwrap{display:none}
@media (min-width:1240px){.trackwrap{display:block}.trackcards{display:none}}   /* the table on a laptop; cards on phones and tablets */
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:17px}.facts span{color:var(--slate)}
.h2.mini{font-size:17px;margin-top:8px}
.linked{border-left:4px solid var(--soft);padding:4px 0 4px 12px;display:flex;flex-direction:column;gap:4px}
.linked.open{border-left-color:var(--signal)}.linked.done{border-left-color:var(--action)}
.filelink{display:flex;align-items:center;gap:8px;min-height:48px;font-weight:700;color:var(--ink);text-decoration:underline;overflow-wrap:anywhere}
.attachbox{display:flex;flex-direction:column;gap:6px;border:2px dashed var(--soft);border-radius:12px;padding:10px}
/* the PROTOTYPE strip: navy, the same as the log-in page and the website, so yellow means danger only (Gaz, 13 Nov: M10).
   A thin line keeps it apart from the navy top bar under it. Under 400 px "· private test" drops, so it stays one line. */
.proto{background:var(--ink);color:var(--mint);font-size:16px;font-weight:700;text-align:center;padding:4px 8px;border-bottom:1px solid rgba(230,245,236,.3)}
@media (max-width:399px){.proto-x{display:none}}
/* long words and pasted text never push the page sideways */
.app{overflow-wrap:anywhere}
.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

.appbar{background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;flex:none}
.appbar .title{font-size:21px;font-weight:700}
/* M9: the title takes the space between the buttons and wraps evenly; on a small phone it's a touch smaller and the empty right-hand spacer goes */
.appbar .title{flex:1;min-width:0;text-align:center;text-wrap:balance}
/* Q's rule 1: every tap target at least 66px */
.iconbtn{width:66px;height:66px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:30px;flex:none}
.appbar .spacer{width:66px;flex:none}
.appbar .count{font-size:18px;font-weight:700;color:var(--mint);min-width:66px;text-align:right}
/* (after the spacer and the count, so it wins: the back button stays 66 px; only the empty spacer and the count's padding go) */
@media (max-width:399px){.appbar{padding:10px 14px;gap:8px}.appbar .title{font-size:18px;line-height:1.15}.appbar .spacer{width:0}.appbar .count{min-width:0}}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.switch{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;overflow:hidden;text-decoration:none;font-size:16px;font-weight:700;flex:none;min-height:44px}
.switch span{background:var(--ink);color:#fff;padding:9px 14px}.switch b{color:var(--ink);background:#fff;padding:9px 14px}
.acct{width:66px;height:66px;display:grid;place-items:center;flex:none;border-radius:50%}
.steps{display:flex;gap:6px;padding:0 18px 14px;background:var(--ink);flex:none}
.steps b{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}
.steps b.on{background:var(--accent)}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:18px;flex:none}

/* the logo: the hand-and-shield icon on a white tile (it has a navy hand), then "Shield" and a green "Hand" */
.wm{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.2px}
.wm .mark{width:36px;height:36px;border-radius:9px;background:#fff var(--brand-icon) center/30px no-repeat;flex:none}
.wm .pro{color:var(--accent)}

.content{flex:1;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
.bottom{flex:none;padding:14px 20px 24px;background:#fff;border-top:1px solid var(--soft);display:flex;flex-direction:column;gap:10px;position:sticky;bottom:0}
.h1{font-family:var(--head);font-size:30px;font-weight:700;line-height:1.15}
.h2{font-family:var(--head);font-size:22px;font-weight:700;line-height:1.2}
.sub{font-size:18px;color:var(--slate);line-height:1.3}
.center{text-align:center}

.where{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 14px;font-size:17px;font-weight:700;background:#fff;border:2px solid var(--soft)}
.whererow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.link{font-size:17px;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:66px;min-width:66px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.where{min-width:0}
.warn{display:flex;gap:10px;align-items:flex-start;background:var(--imp-t);border:2px dashed var(--imp);color:var(--imp);border-radius:14px;padding:10px 14px;font-size:16px;font-weight:700;line-height:1.3}
.warn .i{font-size:20px;margin-top:1px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:399px){.row2 .btn{font-size:18px;padding:8px 8px;gap:6px}}   /* a pair of buttons never pokes past a small phone's edge (Smithers, 12 Nov; live 2b082da) */
/* Manage, Org chart and the per-site module switches (Foundations step 1): one post or module per block, names on their own rows */
.orgpost{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--soft)}
.orgpost:first-of-type{border-top:0}
.orgrow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0}
.orgrow .q{min-width:0;overflow-wrap:anywhere}
.card.draft{border-color:var(--imp);border-style:dashed}
/* the PIN message has a fixed slot (3 short lines even at 320px wide), so the keypad never moves */
.pinmsg{min-height:84px;display:flex;flex-direction:column;justify-content:center}
.pinmsg .error{font-size:16px;padding:8px 12px;line-height:1.3}
.pinhead{display:flex;flex-direction:column;align-items:center;text-align:center}
.pinhead .avatar{width:64px;height:64px;font-size:24px;margin-bottom:10px}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;border-radius:16px;font-size:21px;font-weight:700;border:2px solid var(--ink);background:#fff;width:100%;text-align:center;line-height:1.15;padding:8px 14px}
.btn.hi{background:var(--action);border-color:var(--action);color:#fff}
/* N7: the gate's screens (block is yellow and navy, like the stop screen), the matrix's cells, and its print */
.gatescreen.block{background:var(--signal);border-radius:18px;padding:14px}
.gatebox{border:4px solid var(--ink);border-radius:18px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:10px}
.gatescreen.block .gatebox{background:var(--signal)}
.gatebox .h1{display:flex;gap:10px;align-items:flex-start;font-size:24px}
@media (max-height:700px){.gatebox .more{display:none}}
@media (max-width:599px){.gatescreen{padding-top:10px;gap:10px}.gatebox{padding:12px;gap:6px}.gatebox .h1{font-size:20px;line-height:1.2}.gatebox .q{font-size:16px;line-height:1.3}.gatescreen.block{padding:10px}}
.gatebox .h1 .i{flex:none;margin-top:2px}
table.tmatrix td.tc{min-width:150px;font-size:16px}
/* the training matrix's Person column stays put while the table scrolls sideways (Gaz, 12 Nov). Sticky cells lose
   collapsed borders, so the right-hand edge (and a problem row's red left edge) are drawn as shadows. */
table.tmatrix :is(th,td):first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:inset -2px 0 0 var(--soft)}
table.tmatrix thead th:first-child{background:var(--paper);z-index:2}
table.tmatrix tbody tr:is(:hover,:focus) td:first-child{background:var(--mint)}
table.tmatrix tr.over td:first-child{box-shadow:inset 5px 0 0 var(--bad),inset -2px 0 0 var(--soft)}
.tcell{display:inline-flex;gap:6px;align-items:center;padding:2px 8px;border-radius:8px}
td.tprob,.tcell.tprob{box-shadow:inset 0 0 0 3px var(--bad);font-weight:700}
td.tseen,.tcell.tseen{outline:2px dashed var(--ink);outline-offset:-4px}
td.tnone,.tcell.tnone{color:var(--slate)}
.printfoot{display:none}
@media print{
  @page{size:A4 landscape;margin:10mm}
  body,#app{background:#fff!important}
  .appbar,.tabbar,.subtabs,.mtabs,.proto,.tops,.btn,.tiles,.trackcards,.card:not(.tprint),.note,.error,select,label{display:none!important}
  .trackwrap{display:block!important;overflow:visible!important}
  table.track{font-size:10px}table.track th,table.track td{padding:3px 5px}
  table.tmatrix :is(th,td):first-child{position:static}
  td.tprob{box-shadow:none;border:3px solid #000!important}td.tseen{outline:1px dashed #000}
  .printfoot{display:block;font-size:10px;margin-top:6px}
}
.btn.faultsel{background:var(--bad);border-color:var(--bad);color:#fff}.btn.inksel{background:var(--ink);border-color:var(--ink);color:#fff}   /* a picked finding, and "not inspected": never green */
.btn.inkb{background:var(--ink);color:#fff}
.btn .i{font-size:26px}
.btn.big{min-height:118px;flex-direction:column;gap:6px;font-size:25px;border-radius:22px;border-width:3px}
.btn.big small{font-size:17px;font-weight:400}
.btn.big .i{font-size:36px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

.choice{border-radius:22px;border:3px solid;background:#fff;padding:20px 22px;display:flex;gap:18px;align-items:center;width:100%;min-height:150px}
.choice .ico{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;font-size:40px}
.choice .t{font-size:28px;font-weight:700;line-height:1.1}
.choice .s{font-size:18px;color:var(--slate);margin-top:6px;line-height:1.25}
.choice.pos{border-color:var(--pos)} .choice.pos .ico{background:var(--pos)}
.choice.imp{border-color:var(--imp);border-style:dashed} .choice.imp .ico{background:var(--imp)}

.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px 5px 8px;font-size:16px;font-weight:700;line-height:1.2;white-space:nowrap}
.badge .i{font-size:19px}
.badge.pos{background:var(--pos-t);color:var(--pos);border:1.5px solid var(--pos)}
.badge.imp{background:var(--imp-t);color:var(--imp);border:1.5px dashed var(--imp)}
.badge.cat{background:#fff;color:var(--ink);border:1.5px solid var(--soft)}
.badges{display:flex;gap:8px;flex-wrap:wrap}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:#fff;border:2px solid var(--soft);border-radius:18px;min-height:104px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:12px 16px;gap:8px;font-size:19px;font-weight:700;line-height:1.15;position:relative}
.tile .i{font-size:34px}
/* narrow phones: tile words shrink a touch so "Housekeeping" fits whole; hyphenate (phones can) before ever splitting a word */
.tile{font-size:clamp(16px,4.7vw,19px);padding:12px 12px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.tile.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
.tile .tk{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center;font-size:20px}
.tile.sel .tk{display:grid}
.tile.wide{grid-column:1/-1;min-height:84px;flex-direction:row;align-items:center;gap:12px}

textarea.field{width:100%;background:#fff;border:2px solid var(--line);border-radius:16px;padding:14px 16px;font:inherit;font-size:19px;line-height:1.35;min-height:130px;resize:vertical;color:var(--ink)}
textarea.field::placeholder{color:var(--slate)}
/* H2: text boxes and drop-downs look like the text areas (white, 2 px border, rounded), with a drawn arrow on drop-downs */
input.field.textin,select.field.textin{background:#fff;border:2px solid var(--line);border-radius:16px;color:var(--ink);font-family:inherit;font-size:18px}
input.field.textin:focus-visible,select.field.textin:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
select.field.textin{appearance:none;-webkit-appearance:none;padding-right:48px;text-overflow:ellipsis;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2341' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/22px no-repeat}
input.field.textin::placeholder{color:var(--slate)}
/* M1: one label style for every form: bold and dark, so it reads as the question (h1 stays only for a flow step's one question) */
label.meta,.lbl{display:block;font-size:17px;font-weight:700;color:var(--ink);margin-top:4px}
/* M2: "nothing here" is plain words, never a white box that looks like a text box */
.empty{color:var(--slate);font-size:17px;padding:4px 2px;background:none;border:0}

.note{display:flex;gap:12px;align-items:flex-start;background:#FFF3C4;border:2px solid #C99A12;border-radius:14px;padding:12px 14px;font-size:17px;line-height:1.3}
.error{background:#FDECEC;border:2px solid var(--bad);color:var(--bad);border-radius:14px;padding:12px 14px;font-size:17px;font-weight:700}
.card{background:#fff;border:2px solid var(--soft);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.meta{font-size:16px;color:var(--slate)}
.q{font-size:18px;line-height:1.3}

.tabbar{flex:none;display:flex;justify-content:space-around;background:#fff;border-top:1px solid var(--soft);padding:6px 0 14px;position:sticky;bottom:0}
.tab{flex:1;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:16px;font-weight:700;color:var(--slate);position:relative;text-align:center}
.tab .i{font-size:26px}
.tab.on{color:var(--ink)}
.tab.on .i{background:var(--mint);color:var(--action);border-radius:12px;padding:3px 10px;width:auto;box-sizing:content-box}
.tabcount{position:absolute;top:2px;left:calc(50% + 12px);min-width:26px;height:26px;border-radius:13px;background:var(--ink);color:#fff;font-size:16px;display:grid;place-items:center;padding:0 6px}
.tabcount.over{background:var(--bad)}

/* slice 2: actions, the serious flag and photos (Q's round two) */
.badge.over{background:#FDECEC;color:var(--bad);border:1.5px solid var(--bad)}
.badge.high{background:var(--signal);color:var(--ink);border:1.5px solid var(--ink)}
.badge.okb{background:var(--pos-t);color:var(--pos);border:1.5px solid var(--pos)}
.card.tap{text-align:left;width:100%;font:inherit;color:inherit}
.card.tap>span{display:block}
.card.tap>.whererow,.card.tap>.badges{display:flex}
.card.over{border-color:var(--bad);border-width:3px}
.status{display:flex!important;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--slate);border-top:1px solid var(--soft);padding-top:8px;margin-top:2px}
.status .i{font-size:20px}
.status.ok{color:var(--pos)}
.status.ask{color:var(--imp)}
.card.alert{border:3px solid var(--ink);background:#FFF8DC;position:relative;padding-left:26px;overflow:hidden}
.card.alert::before,.serious::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(135deg,var(--ink) 0 8px,var(--signal) 8px 16px)}
.card.fixing{gap:10px}
.card.fixing .h2{font-size:22px}
.btn .two{display:flex;flex-direction:column;align-items:center}
.btn .two small{font-size:16px;font-weight:400}
/* "Does it need fixing?" pinned to the bottom (Q's 01) */
.fixbar{gap:8px;padding-top:10px;padding-bottom:14px}
.fixbar .h2{font-size:21px}
.serioushead{display:flex;align-items:center;gap:12px}
.serioushead .ring{width:56px;height:56px;border-radius:50%;background:var(--signal);border:3px solid var(--ink);display:grid;place-items:center;font-size:30px;flex:none}
.serioushead .h2{font-size:22px}
.card.seen.none{border-color:var(--bad);background:#FDECEC}
.btn.confirm{border-color:var(--bad);color:var(--bad);border-width:3px}
/* serious ones on a manager's home: one short row each in one card, tap the words to open (re-test T8) */
.card.alert.alertlist{gap:6px;padding-top:10px;padding-bottom:8px}
.alertrow{display:flex;align-items:center;gap:8px;border-top:1px solid rgba(19,33,44,.15);padding-top:6px}
.alerttext{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;flex:1;min-width:0;min-height:66px;justify-content:center}
.alerttext .q{font-size:17px;width:100%}
.clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.btn.seenbtn{width:auto;flex:none;padding:0 14px;font-size:18px}
.alertlist .link{align-self:flex-start}
/* text boxes and big tick rows (Build 2 forms; review of Del's Build 2) */
input.field.textin,select.field.textin{min-height:66px;padding:10px 14px;font-size:18px;resize:none;width:100%}
/* slice 2.3: Manage tabs on one row (re-test U19), tappable cards (U18), history, contractors (U11), pre-start (U9) */
.mtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mtab{min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:16px;font-weight:700;border:2px solid var(--soft);border-radius:14px;background:#fff;padding:4px 2px;text-align:center}
.mtab .i{font-size:22px}
@media (max-width:599px){.mtabs{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x proximity}.mtab{flex:0 0 auto;min-width:108px;padding:4px 12px;scroll-snap-align:start}}   /* Snagger P2 */
.mtab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cardopen{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;width:100%;min-height:66px}
.clamp1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;cursor:pointer}
.clamp2.open{display:block}
/* a button's words never split in the middle (re-test V26): they go onto a second line whole */
.row2 .btn{overflow-wrap:normal;word-break:normal;hyphens:manual}
/* two long-worded buttons (the injury log's Open and "Days lost or RIDDOR…"): one above the other on a narrow phone */
@media (max-width:419px){.row2.stack{grid-template-columns:1fr}}
/* starter log-ins: big, easy to read out, easy to select */
.code{font-family:Consolas,'Courier New',monospace;font-size:20px;background:var(--paper);border-radius:6px;padding:1px 6px;user-select:all;white-space:nowrap;display:inline-block}
.histrow{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--soft);padding:8px 0}
.earlier{margin-top:4px;padding:8px;background:var(--mat);border-radius:10px;display:flex;flex-direction:column;gap:6px}
.btnstack{display:flex;flex-direction:column;gap:8px}
.badge.wrap{white-space:normal;text-align:left;align-self:flex-start;max-width:100%}   /* L4: never stretched the full width of a laptop */
.card.needs,input.needs{outline:3px solid var(--bad);outline-offset:2px}
.tiles.three{grid-template-columns:repeat(3,1fr)}
.card.outsum{text-align:left;width:100%;align-items:flex-start;gap:4px}
.card.outcard{gap:6px}
.checkrow{display:flex;align-items:center;gap:12px;min-height:66px;font-size:17px;cursor:pointer;border-bottom:1px solid var(--soft)}
.checkrow input{width:30px;height:30px;flex:none;accent-color:var(--ink)}
/* short phones (320x568): the fixing bar takes two rows, so "Not seen yet" stays in view (re-test T7) */
.sm{display:none}
@media (max-height:620px){
  /* and the serious screen's head, status and keep-away line are tighter and shorter, so both stay above the bar (re-test T7) */
  .lg{display:none}
  .sm{display:inline}
  .serioushead .ring{width:44px;height:44px;font-size:24px}
  .serioushead .h2{font-size:20px}
  .card.seen{padding:10px 12px}
  .card.seen .h2{font-size:18px}
  .card.seen .q,[data-view="saved"] .content>.note{font-size:16px;line-height:1.25}
  [data-view="saved"] .content>.note{padding:8px 10px}
  .fixbar{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .fixbar .h2,.fixbar [data-act="raise"]{grid-column:1/-1}
  .fixbar .h2{font-size:18px}
  .fixbar [data-act="fixthere"],.fixbar [data-act="noaction"]{font-size:16px;padding:6px 8px}
  .fixbar [data-act="fixthere"] .i{display:none}
}
/* serious, saved: seen or not seen yet (Q's 12) */
.card.seen{flex-direction:row;align-items:flex-start;gap:12px;border:3px solid var(--ink)}
.card.seen>.i{font-size:30px;margin-top:2px}
.card.seen .h2{font-size:20px}
.card.seen.ok{border-color:var(--pos);background:var(--pos-t)}
.done.serious-done{background:var(--signal);color:var(--ink);border:4px solid var(--ink)}
/* closing: before and after (Q's 05) */
.beforeafter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.beforeafter figure{display:flex;flex-direction:column;gap:4px;margin:0}
.beforeafter img.photo,.beforeafter .photo.empty{height:150px;max-height:none}
.beforeafter figcaption{font-size:16px;font-weight:700;color:var(--slate)}
.photo.empty{display:grid;place-items:center;border:2px dashed var(--line);border-radius:12px;color:var(--slate);font-size:16px;text-align:center;padding:8px}
.opt{font-weight:400;color:var(--slate);font-size:.85em}
.num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:16px;margin-right:8px;vertical-align:2px}
.sect{font-size:19px;display:flex;align-items:center;gap:8px;margin-top:4px}
.serious{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:96px;border:3px solid var(--ink);border-radius:18px;background:#fff;padding:12px 14px 12px 26px;overflow:hidden;text-align:left}
.serious.on{background:var(--signal)}
.serious .ico{font-size:30px;flex:none}
.serious .txt{flex:1;display:flex;flex-direction:column;gap:2px;font-size:16px;line-height:1.25}
.serious .txt b{font-size:20px}
.serious .sw{width:56px;height:32px;border-radius:16px;background:var(--soft);position:relative;flex:none;border:2px solid var(--ink)}
.serious .sw i{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--ink);transition:left .15s}
.serious.on .sw{background:var(--ink)}
.serious.on .sw i{left:26px;background:var(--signal)}
.serious .onoff{font-weight:700;font-size:17px;min-width:28px}
img.photo{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:12px;border:2px solid var(--soft);background:var(--mat)}
.photocard{gap:10px}
.fixedcard{border-color:var(--pos);background:var(--pos-t)}
.fixedcard .h2{display:flex;align-items:center;gap:8px;color:var(--pos)}
input.datefield{width:100%;min-height:66px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px 14px;font:inherit;font-size:19px;color:var(--ink)}
.trail{list-style:none;display:flex;flex-direction:column;gap:0}
.trail li{display:flex;gap:12px;position:relative;padding-bottom:16px}
.trail li:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:3px;background:var(--soft)}
.trail .dot{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--accent);display:grid;place-items:center;flex:none;font-size:20px}
.trail li.ok .dot{background:var(--pos);color:#fff}
.trail li.waiting .dot{background:var(--soft);color:var(--ink)}
.trail li>div{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.trail .tt{font-weight:700;font-size:18px}

/* sign-in */
.people{display:flex;flex-direction:column;gap:10px}
.person{display:flex;align-items:center;gap:14px;background:#fff;border:2px solid var(--soft);border-radius:18px;padding:12px 14px;width:100%}
.person .nm{font-size:20px;font-weight:700}
.pindots{display:flex;gap:16px;justify-content:center;margin:8px 0}
.pindots b{width:22px;height:22px;border-radius:50%;border:3px solid var(--ink)}
.pindots b.on{background:var(--ink)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pad button{min-height:76px;border-radius:18px;background:#fff;border:2px solid var(--soft);font-size:30px;font-weight:700;display:grid;place-items:center}
/* short screens (iPhone SE and the like): tighten the PIN screen so the whole keypad fits, keys still 66px */
@media (max-height:760px){
  [data-view="pin"] .appbar{padding-top:6px;padding-bottom:6px}
  [data-view="pin"] .content{padding-top:10px;padding-bottom:12px;gap:8px}
  .pinhead{flex-direction:row;justify-content:center;gap:12px;text-align:left}
  .pinhead .avatar{width:44px;height:44px;font-size:18px;margin:0}
  .pindots{margin:2px 0}
  .pad{gap:8px}
  .pad button{min-height:66px}
}
/* very short screens (the original iPhone SE, 568px): a shorter one-line prototype banner (still 16px, Q's rule), slimmer gaps and message slot */
@media (max-height:600px){
  [data-view="pin"] .proto{padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
  [data-view="pin"] .proto-x{display:none}
  [data-view="pin"] .appbar{padding-top:4px;padding-bottom:4px}
  [data-view="pin"] .content{padding-top:6px;padding-bottom:6px;gap:6px}
  .pinmsg{min-height:76px}
  .pinmsg .error{font-size:16px;padding:5px 10px;line-height:1.2}
  .pad{gap:6px}
}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.done:not(.badge){width:104px;height:104px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:var(--accent);font-size:60px;margin:0 auto}

/* QR at the gate (Manage, Site QR): the site's code, its address, and the visitor briefing. */
.qrbox{width:min(220px,60vw);aspect-ratio:1;margin:4px auto}
/* N1: the home tiles (Del 4.0) and the narrowest phones (re-test W14). */
.tilesgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tilecard{gap:4px;min-height:96px;justify-content:flex-start}
.tilecard .tilehead{display:flex;align-items:center;gap:8px;font-size:18px}
.tilecard.urgent{border:3px solid var(--ink);background:#FFF8DC}
/* N2 check sheets: the help line, and three answers (OK, Not OK, N/A) where a line allows N/A. */
.helpline{font-size:16px}   /* L1: nothing under 16 px (was 15) */
/* N5: a document's full text keeps its line breaks */
.docbody{white-space:pre-wrap;font-size:17px;line-height:1.5}
/* N4: the board pack table */
.tablewrap{overflow-x:auto;margin:4px -4px}
table.board{border-collapse:collapse;width:100%;font-size:16px}
table.board th,table.board td{padding:7px 8px;border-bottom:1px solid var(--soft);text-align:right;white-space:nowrap}
table.board th:first-child{text-align:left;white-space:normal;min-width:150px;font-weight:600}
table.board thead th{font-size:16px;color:var(--slate);text-align:right}
.btn.small{min-height:44px;font-size:16px;padding:6px 12px;width:auto}
/* Every Manage list (Gaz, 12 Nov; mlist in app.js): one row each, tap to open a panel under it.
   An overdue or problem row has a thick red edge, a draft a dashed amber one, kit out of use or danger the hazard stripe; the badge always says it in words. */
.plist{background:#fff;border:1.5px solid var(--soft);border-radius:16px;overflow:hidden}
.pitem+.pitem{border-top:1px solid var(--soft)}.pitem.off .pmain>b{color:var(--slate)}
.prow{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;padding:10px 14px;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.prow:hover,.prow:focus-visible{background:var(--mint)}
.pmain{display:flex;flex-direction:column;flex:1;min-width:0}.pmain>b{font-size:18px}
.pflags{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:55%}.pchev{flex:none;color:var(--slate);transition:transform .15s}.prow[aria-expanded="true"] .pchev{transform:rotate(90deg)}
.pmore{display:flex;flex-direction:column;gap:10px;padding:12px 14px 16px;background:var(--paper);border-top:1px solid var(--soft)}
@media (max-width:599px){.prow{flex-wrap:wrap}.pflags{order:3;max-width:100%;justify-content:flex-start;flex-basis:100%}.pflags:empty{display:none}}
.pitem{position:relative}
.pitem.over>.prow{box-shadow:inset 6px 0 0 var(--bad)}
.pitem.draft>.prow{box-shadow:inset 6px 0 0 var(--imp)}
.pitem.alert>.prow{background:#FFF8DC;padding-left:26px}
.pitem.alert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:repeating-linear-gradient(135deg,var(--ink) 0 8px,var(--signal) 8px 16px)}
.pitem.alert>.pmore{padding-left:26px}
.pmain{gap:2px}.pmain .q{font-size:18px}.pmain .meta,.pmore .meta,.pmore .q{overflow-wrap:anywhere}
.pmore .photo{max-width:480px}
.pmore .btn.small{min-height:66px}   /* gloves-on inside a list panel too (the 44 px small button stays as it was elsewhere) */
.plist+.h2,.plist+label{margin-top:4px}
@media (min-width:1024px){
  .app[data-desk="1"] .pmore>:is(.btn,a.btn){align-self:flex-start;width:auto;min-width:320px;padding-left:28px;padding-right:28px}
  .app[data-desk="1"] .pmore>:is(.row2,.textin,.btnstack,.warn){max-width:760px;width:100%}
}
.chips.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}.btn.pick{min-height:66px;width:100%;font-size:18px;padding:8px 14px;white-space:normal}   /* Hazel's quick picks: gloves-on, wrap at 320 */
/* N3: rule chips on the kit form */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--soft);border-radius:999px;padding:6px 12px;font-size:16px;background:#fff}
.chip input{width:20px;height:20px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.row3 .btn,.row2 .btn[data-act="preyes"],.row2 .btn[data-act="preno"]{white-space:nowrap}
@media (max-width:419px){.row3{grid-template-columns:1fr 1fr}.row3 .btn:last-child{grid-column:1 / -1;min-height:66px}}   /* OK and Not OK side by side, N/A under them: never squashed or wrapped (Gaz, 12 Nov); N/A 66 px too, gloves-on (Gaz, 13 Nov: H7) */
.stopnow{display:flex;gap:10px;align-items:center;background:var(--bad);color:#fff;border-radius:14px;padding:12px 14px;font-size:19px;font-weight:800;letter-spacing:.2px}   /* only once Not OK is picked on a stop line */
/* Safety stats: figure boxes and the month-by-month chart (plain boxes: nothing loaded from outside). */
.tiles.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.four .tile{min-width:0;padding:4px 2px;font-size:16px;overflow-wrap:anywhere}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.kpis.small{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.kpi{background:var(--paper);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-size:26px;font-family:var(--brand-font-head)}.kpis.small .kpi b{font-size:21px}
.kpi span{font-size:14px;color:var(--slate);line-height:1.25}
.kpi.wide{grid-column:span 2}.kpi.bad b{color:var(--bad)}
.bars{display:flex;align-items:flex-end;gap:3px;height:170px;padding-top:8px;overflow-x:auto}
.bar{flex:1 0 16px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;min-width:16px}
.bar .stack{width:100%;display:flex;flex-direction:column-reverse;border-radius:6px 6px 0 0;overflow:hidden;min-height:2px;background:var(--soft)}
.bar span{font-size:11px;color:var(--slate);white-space:nowrap}.bar em{font-size:9px;color:var(--bad);font-style:normal;text-align:center;line-height:1}
.b-lti{background:var(--bad)}.b-med{background:var(--imp)}.b-fa{background:var(--pos)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 4px 0 10px;vertical-align:middle}
@media (max-width:359px){.tiles.four{grid-template-columns:1fr 1fr}.kpi.wide{grid-column:auto}}
.btn:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:359px){.row2{grid-template-columns:1fr}.tilesgrid{grid-template-columns:1fr}}
.qrbox svg{display:block;width:100%;height:100%}
.qrurl{font-family:Consolas,'Courier New',monospace;font-weight:700;overflow-wrap:anywhere;word-break:break-all}
.brieflist{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;font-size:17px}
a.btn{text-decoration:none;text-align:center;color:inherit}

/* ---------- LAYOUT BY SCREEN SIZE (Q, 12 Nov 2026) ----------
   Replaces the whole "desk layout" block (@media (min-width:900px) {...}) in app.css. Goes at the END of app.css.
   One app, four bands, all by width:
     phone   under 600   the big-button column (unchanged)
     tablet  600-1023    full width, content centred (760 wide; 640 for the recording flow), bottom tab bar
     laptop  1024-1439   own device: menu down the left (with the Manage tabs inside it), content up to 1120 wide
     wide    1440 and up own device: content up to 1360 wide, more columns
   A shared site tablet (data-desk="0") never gets the left-hand menu: it keeps the bottom bar and the gloves-on sizes
   at every width, and goes up to 960 wide in landscape.
   Bands are set with three variables: --gut (the side margin), --col (the widest content), --flow (the recording flow). */
:root{--gut:20px;--col:100%;--flow:100%}

/* small fixes that apply at every size */
.card.tap>.tilehead{display:flex}            /* the tile's icon and name had no gap: .card.tap>span{display:block} beat .tilehead */
.kpi span{font-size:16px}                    /* was 14px, then 15px: nothing under 16 (Snagger P1) */
.bar span{font-size:16px}.bar span b{font-weight:400}.bar .ms{display:none}.bar em{font-size:16px;font-weight:700}   /* 16px (Snagger P1); a phone shows one letter a month */
@media (max-width:599px){.bar .ml{display:none}.bar .ms{display:inline}}
.tabbar .subtabs{display:none}              /* the Manage tabs inside the left-hand menu: laptop and wide only */
.tiles.period .tile{min-height:66px;justify-content:center;text-align:center;white-space:nowrap}
@media (max-width:599px){.tiles.four.period{grid-template-columns:1fr 1fr}}        /* replaces the inline 52px (stats) and 66px (trends): gloves-on */

/* ======================= TABLET: 600 and up (every device) ======================= */
@media (min-width:600px){
  :root{--gut:28px;--col:760px;--flow:640px}
  body{background:var(--paper)}
  .app{max-width:none;box-shadow:none}
  /* bars run edge to edge; what's inside them lines up with the content column */
  .app > :is(.appbar,.steps,.content,.bottom,.tabbar){padding-left:max(var(--gut),calc((100% - var(--col)) / 2));padding-right:max(var(--gut),calc((100% - var(--col)) / 2))}
  .app:not(:has(> .tabbar)) > :is(.appbar,.steps,.content,.bottom){padding-left:max(var(--gut),calc((100% - var(--flow)) / 2));padding-right:max(var(--gut),calc((100% - var(--flow)) / 2))}
  .content{padding-top:24px;padding-bottom:32px}
  .h1{font-size:32px}
  /* bottom tab bar: tabs sit together in the middle, not spread to the far edges */
  .tabbar{justify-content:center;gap:8px}
  .tabbar .tab{flex:0 1 200px}
  /* home: tiles three across */
  .tilesgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the flow's topic and "what did you say" tiles: taller, bigger icons, still two across */
  :is([data-view="step2"],[data-view="step4"]) .tile{min-height:116px;font-size:20px}
  :is([data-view="step2"],[data-view="step4"]) .tile .i{font-size:40px}
  /* Manage tabs: one row (seven fit at 760) */
  .mtabs{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
  /* period choices (Safety stats, Trends): a row of pills, not full-width boxes */
  .tiles.period{display:flex;flex-wrap:wrap;gap:8px}
  .tiles.period .tile{flex:0 0 auto;min-height:66px;padding:0 22px;border-radius:999px;justify-content:center}
  .kpi b{font-size:28px}.kpi span{font-size:16px}
  .bars{height:220px;gap:6px}

  /* the shared tablet's name list: a grid of big name cards */
  :is([data-view="people"],[data-view="unshare"]) .people{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .person{flex-direction:column;justify-content:flex-start;text-align:center;min-height:156px;gap:10px;padding:20px 12px 16px}
  .person .avatar{width:64px;height:64px;font-size:24px}
  .person .nm{font-size:22px}
  .person br{display:none}
  .person .wrap{display:flex;flex-direction:column;gap:4px}
  [data-view="people"] .content > :is(.btn,.note){width:100%;max-width:520px;align-self:center}
  /* the PIN pad: bigger keys, kept to a thumb-sized block in the middle */
  .pad{width:100%;max-width:480px;margin:0 auto;gap:14px}
  .pad button{min-height:92px;font-size:36px;border-radius:20px}
  .pindots{gap:20px}.pindots b{width:28px;height:28px}
  .pinhead .avatar{width:80px;height:80px;font-size:30px}
}

/* lists two across from 720 (tablet portrait and up, any screen with the tab bar) */
@media (min-width:720px){
  .app:has(> .tabbar) > .content{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start;align-content:start}
  .app:has(> .tabbar) > .content > :not(.card),
  .app:has(> .tabbar) > .content > :is(.alert,.draft,.counts,.summary,.months,.statsum,.chart){grid-column:1 / -1}
}

/* shared tablet in landscape: wider, PIN screen side by side */
@media (min-width:1024px){
  .app[data-desk="0"]{--col:960px;--flow:720px}
  .app[data-desk="0"] .tilesgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:900px) and (orientation:landscape){
  [data-view="pin"] .content{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,440px);grid-template-rows:auto auto auto;column-gap:56px;align-content:center}
  [data-view="pin"] :is(.pinhead,.pindots,.pinmsg){grid-column:1}
  [data-view="pin"] .pinhead{flex-direction:column;text-align:center}
  [data-view="pin"] .pinhead .avatar{width:80px;height:80px;font-size:30px;margin:0 0 10px}
  [data-view="pin"] .pad{grid-column:2;grid-row:1 / 4;align-self:center}
  [data-view="pin"] .pad button{min-height:96px}
}

/* ======================= TABLET SIDE RAIL: 768 and up (Gaz, 12 Nov: "Side menu") =======================
   Tablets from 768 wide (portrait iPad and up), shared site tablets included, get a slim rail down the left
   instead of the bottom bar: icon over label, 88 px tall, so it still works with gloves. Phones and anything
   under 768 keep the bottom bar. Your own laptop (1024 and up) gets the full menu below, which overrides this
   (same specificity, later in the file), so this must stay ABOVE the laptop block. */
@media (min-width:768px){
  .app:has(> .tabbar){display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;align-content:start;min-height:100dvh}
  .app:has(> .tabbar) > :is(.proto,.tops){grid-column:1 / -1;grid-row:1}
  .app:has(> .tabbar) > .appbar{grid-column:2;grid-row:2}
  .app:has(> .tabbar) > .steps{grid-column:2;grid-row:3}
  .app:has(> .tabbar) > .content{grid-column:2;grid-row:4}
  .app:has(> .tabbar) > .bottom{grid-column:2;grid-row:5}
  .app:has(> .tabbar) > .tabbar{grid-column:1;grid-row:2 / -1;position:sticky;top:0;bottom:auto;align-self:start;height:100dvh;overflow-y:auto;
    flex-direction:column;justify-content:flex-start;gap:8px;padding:16px 10px;border-top:0;border-right:1px solid var(--soft);background:#fff}
  .app:has(> .tabbar) > .tabbar .tab{flex:none;flex-direction:column;justify-content:center;gap:4px;min-height:88px;padding:8px 4px;font-size:16px;border-radius:14px;text-align:center}
}

/* ======================= LAPTOP: 1024 and up, your own device ======================= */
@media (min-width:1024px){
  .app[data-desk="1"]{--gut:32px;--col:1120px;--flow:680px;display:grid;grid-template-columns:264px minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;align-content:start;min-height:100dvh}
  .app[data-desk="1"] > :is(.proto,.tops){grid-column:1 / -1;grid-row:1}
  .app[data-desk="1"] > .appbar{grid-column:2;grid-row:2}
  .app[data-desk="1"] > .steps{grid-column:2;grid-row:3}
  .app[data-desk="1"] > .content{grid-column:2;grid-row:4;padding-top:28px;padding-bottom:48px}
  .app[data-desk="1"] > .bottom{grid-column:2;grid-row:5}
  /* the menu: down the left, the full height of the screen */
  .app[data-desk="1"] > .tabbar{grid-column:1;grid-row:2 / -1;position:sticky;top:0;bottom:auto;align-self:start;height:100dvh;overflow-y:auto;
    flex-direction:column;justify-content:flex-start;gap:4px;padding:20px 12px;border-top:0;border-right:1px solid var(--soft);background:#fff}
  .app[data-desk="1"] > .tabbar .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:14px;min-height:56px;padding:0 14px;font-size:18px;border-radius:14px;text-align:left}
  .app[data-desk="1"] > .tabbar .tab.on{background:var(--mint)}
  .app[data-desk="1"] > .tabbar .tab.on .i{background:none;padding:0}
  .app[data-desk="1"] > .tabbar .tabcount{position:static;margin-left:auto}
  /* Manage's tabs live in the menu, under Manage; the row of tabs on the page goes */
  .app[data-desk="1"] .subtabs{display:flex;flex-direction:column;gap:2px;margin:2px 0 8px 26px;padding-left:10px;border-left:2px solid var(--soft)}
  .app[data-desk="1"] .subtab{min-height:48px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;font-size:17px;font-weight:600;color:var(--slate);text-align:left}
  .app[data-desk="1"] .subtab .i{font-size:20px}
  .app[data-desk="1"] .subtab.on{background:var(--ink);color:#fff}
  .app[data-desk="1"] .mtabs{display:none}
  /* with the menu there, Manage's Back arrow is not needed */
  .app[data-desk="1"][data-view="manage"] > .appbar > .iconbtn{visibility:hidden}

  /* screens with the menu: a grid of cards, 340 wide or more; headings, notes and forms run the full width */
  .app[data-desk="1"]:has(> .tabbar) > .content{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;align-items:start;align-content:start}
  .app[data-desk="1"]:has(> .tabbar) > .content > :not(.card),
  .app[data-desk="1"]:has(> .tabbar) > .content > :is(.alert,.draft,.counts,.summary,.months,.statsum,.chart){grid-column:1 / -1}
  .app[data-desk="1"]:has(> .tabbar) > .content > :is(.btn,a.btn):not(.big){justify-self:start;width:auto;min-width:320px;padding:8px 28px}
  .app[data-desk="1"]:has(> .tabbar) > .content > :is(.note,.error,.warn,.sub,.meta){max-width:900px}
  /* M12: drop-downs and text boxes never stretch across a laptop; search boxes a little wider */
  .app[data-desk="1"] .content :is(select.field.textin,input.field.textin){max-width:520px}
  .app[data-desk="1"] .content input.field.textin[type=search]{max-width:640px}

  /* HOME: Record an observation runs the full width across the top; tiles in a row below. (Q's sweep H5: the counts card
     it used to sit beside is gone, so "dense" pulled a recent card up beside it, away from its heading, or left an empty third.) */
  .app[data-desk="1"][data-view="home"] > .content{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app[data-desk="1"][data-view="home"] > .content > :is(.btn.big,.card.obsdraft){grid-column:1 / -1;min-height:132px}
  .app[data-desk="1"][data-view="home"] > .content > .btn.big{font-size:28px}
  .app[data-desk="1"][data-view="home"] .tilesgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

  /* SAFETY STATS: the figures in one wide band, the chart full width and taller, sites three across */
  .app[data-desk="1"] .statsum .kpis{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .app[data-desk="1"] .kpi b{font-size:30px}
  .app[data-desk="1"] .bars{height:260px;gap:10px;justify-content:center}
  .app[data-desk="1"] .bar{max-width:72px}
  /* TRENDS: this month against last, as columns */
  .app[data-desk="1"] .card.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:24px}
  .app[data-desk="1"] .card.months > .q{grid-column:1 / -1}

  /* screens with no menu (the recording flow, closing an action, the saved screen, You): one centred column, 680 wide.
     The bars run full width; the white bottom bar's buttons line up with the column. */
  .app[data-desk="1"]:not(:has(> .tabbar)){grid-template-columns:minmax(0,1fr)}
  .app[data-desk="1"]:not(:has(> .tabbar)) > *{grid-column:1}
  .app[data-desk="1"]:not(:has(> .tabbar)) > .content{display:flex}
}
/* your own laptop with a mouse: buttons inside cards can be smaller (48px). Touch screens keep 66px. */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .app[data-desk="1"] .content .card .btn{min-height:48px;font-size:17px;border-radius:12px;padding:6px 14px}
  .app[data-desk="1"] .content .card .btn .i{font-size:20px}
  .app[data-desk="1"] .tiles.period .tile{min-height:44px}
}

/* ======================= WIDE: 1440 and up, your own device ======================= */
@media (min-width:1440px){
  .app[data-desk="1"]{--col:1360px;--flow:720px;grid-template-columns:272px minmax(0,1fr)}
  .app[data-desk="1"]:has(> .tabbar) > .content{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:20px}
  .app[data-desk="1"][data-view="home"] > .content{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app[data-desk="1"][data-view="home"] > .content > :is(.btn.big,.card.obsdraft){grid-column:1 / -1}
}

/* ======================= Q'S LAYOUT SWEEP FIXES (13 Nov 2026; report: App\Design\2026-11-12 Layout sweep) =======================
   At the end on purpose: these override the earlier rules of the same weight. */

/* H1: the incident sort pills (and the Trends periods) are three equal columns on a phone, words allowed onto two lines,
   so nothing pushes the page sideways */
@media (max-width:599px){
  .tiles.three.period{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tiles.three.period .tile{white-space:normal;padding:6px 8px;font-size:17px;line-height:1.15}
}
/* M13: choice pills and three-across tiles: words in the middle, picked or not */
.tiles.period .tile,.tiles.three .tile{align-items:center;justify-content:center;text-align:center}

/* H3: "This is serious" on a small phone: icon, title, switch and On on the top row; the explanation the full width under them */
@media (max-width:399px){
  .serious{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:10px;row-gap:6px;align-items:center}
  .serious .txt{display:contents}
  .serious .ico{grid-column:1;grid-row:1}
  .serious .txt b{grid-column:2;grid-row:1}
  .serious .sw{grid-column:3;grid-row:1}
  .serious .onoff{grid-column:4;grid-row:1}
  .serious .txt > span{grid-column:1 / -1;grid-row:2;font-size:16px;overflow-wrap:normal}
}

/* H6: Manage tabs. Phone: the row runs to the screen edge and fades out, so a whole tab plus a peek of the next shows
   and it reads as "scroll for more". Tablet (600 to 1023): one scrolling row, not three rows of boxes. */
@media (max-width:599px){
  .mtabs{margin:0 -20px;padding:0 20px 6px;scroll-padding-left:20px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent)}
}
@media (min-width:600px) and (max-width:1023px){
  .mtabs{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent)}
  .mtab{flex:0 0 auto;min-width:112px;padding:4px 14px;scroll-snap-align:start}
}

/* H7: a "small" button is only small with a mouse; on a touch screen or anything under laptop width it's gloves-on, 66 px */
@media (pointer:coarse), (max-width:1023px){ .btn.small{min-height:66px;font-size:18px;padding:8px 14px} }
/* a need's "Not needed" drops under its name rather than squeezing it */
.needrow{flex-wrap:wrap}.needrow .btn{white-space:nowrap;margin-left:auto}

/* M6: a heading with an icon has a gap between the icon and the words */
.h2:has(> svg.i){display:flex;align-items:center;gap:8px}
.h2 > svg.i{flex:none}

/* M8: inside a list panel every button sits in one grid, all one size (two or more across when there's room, one under
   another on a phone); green only for the one main action on a screen. Also used for a card's own buttons. */
.btnrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.btnrow .btn{font-size:18px;min-height:66px;width:100%;padding:8px 14px}
@media (min-width:1024px) and (pointer:fine){ .app[data-desk="1"] .btnrow .btn{min-height:52px} }
/* the Board pack's month and Print it: side by side when they fit, one under the other when they don't */
.bprow{display:flex;flex-wrap:wrap;gap:10px}
.bprow select{flex:1 1 220px;min-width:0}
.bprow .btn{flex:1 1 160px;width:auto}

/* M11: home tile names never split mid-word, and the icon sits by the first line of a two-line name */
.tilecard .tilehead{align-items:flex-start}
.tilecard .tilehead .i{margin-top:3px}
.tilecard .tilehead b{overflow-wrap:normal;word-break:normal;hyphens:auto}
@media (max-width:399px){.tilecard .tilehead{font-size:17px;gap:6px}}

/* M15: the incident kind tiles never hyphenate ("Dangerous oc-currence") */
[data-view="injury"] .tile{hyphens:manual;-webkit-hyphens:manual}

/* L3: a pre-start line's name in bold, so it stands apart from its "Not OK if" note */
[id^="pi-"] > .q{font-weight:700}
/* L5: a recent report's date goes under its badge rather than wrapping to three lines beside it */
.card.tap > .whererow{flex-wrap:wrap}
.card.tap > .whererow .meta{white-space:nowrap}
/* L7: a table that scrolls sideways fades at its right-hand edge while there's more to see (app.js sets data-more) */
.tablewrap[data-more="1"]{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),rgba(0,0,0,.25));mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 56px),rgba(0,0,0,.25))}

/* M5: screens that now keep the menu (Contractors, Read and sign, My training, a person's training, pre-start, the incident
   form and record, a calendar job, a report, an action). On a phone, a screen with a white bottom bar keeps that bar pinned
   and the tab bar sits at the end of the page, so the two never stack. From 720 wide these are one column next to the menu
   (860 wide), not a grid of cards: they read top to bottom. */
@media (max-width:767px){ .app:has(> .bottom) > .tabbar{position:static} }
@media (min-width:720px){
  .app:has(> .tabbar):is([data-view="report"],[data-view="action"],[data-view="doc"],[data-view="injury"],[data-view="prestart"],[data-view="precheck"],[data-view="pjob"],[data-view="tperson"],[data-view="incident"],[data-view="mytraining"],[data-view="contractors"]){--col:860px}
  .app:has(> .tabbar):is([data-view="report"],[data-view="action"],[data-view="doc"],[data-view="injury"],[data-view="prestart"],[data-view="precheck"],[data-view="pjob"],[data-view="tperson"],[data-view="incident"],[data-view="mytraining"],[data-view="contractors"]) > .content{display:flex}
}

/* ---------- MOVE STEP 3: sign-in and working with no signal (Smithers, for Q, 12 Nov 2026: new.css, APP part) ---------- */
/* ======================= APP (app.css) ======================= */

/* The four looks of a record that hasn't reached ShieldHand yet, as badges. Each one differs by WORD, ICON and
   OUTLINE as well as colour:   Saved on this phone = dashed navy outline, phone icon
                                Sending             = solid navy, up-arrow icon
                                Sent 02:41          = mint with a green line, tick icon
                                Needs you           = pale red with a red line, alarm icon   */
.badge.st-phone{background:#fff;color:var(--ink);border:2px dashed var(--ink)}
.badge.st-sending{background:var(--ink);color:#fff;border:2px solid var(--ink)}
.badge.st-sent{background:var(--mint);color:var(--action);border:2px solid var(--action)}
.badge.st-needs{background:#FDECEC;color:var(--bad);border:2px solid var(--bad)}
@media (prefers-reduced-motion:no-preference){.badge.st-sending .i{animation:stlift 1.1s ease-in-out infinite}}
@keyframes stlift{50%{transform:translateY(-3px)}}

/* No signal: one line across the top of every screen (it sits in .tops with the PROTOTYPE strip and the shared-tablet
   banner). Not a button: the outbox card on home is the way in. Dashed, like everything not yet sent. */
.netbar{display:flex;align-items:center;gap:10px;background:#fff;color:var(--ink);border-bottom:2px dashed var(--ink);padding:8px 16px;font-size:16px;font-weight:700;line-height:1.25}
.netbar .i{font-size:22px}
.netbar .when{font-weight:400;color:var(--slate);margin-left:auto;white-space:nowrap}

/* The outbox card on home, and the "kept on this phone" stamp on screens read from the phone's last copy */
.card.outbox{border:3px dashed var(--ink);text-align:left;width:100%}
.card.outbox .h2{font-size:21px;display:flex;align-items:center;gap:10px}
.card.outbox .h2 .i{font-size:28px}
.asat{font-size:16px;color:var(--slate)}

/* "Number when sent": stands in for A-0014 until the action reaches ShieldHand (D5) */
.refpend{display:inline-flex;align-items:center;gap:6px;border:2px dashed currentColor;border-radius:8px;padding:0 8px;font-weight:700;font-size:16px;line-height:1.6;white-space:nowrap}

/* The outbox list: a heading per group; "Needs you" cards use the existing .card.over (red, 3 px) */
.obxgroup{display:flex;align-items:center;gap:8px}
.card.obx{gap:6px}
.card.obx .why{font-size:17px;font-weight:700;color:var(--bad);line-height:1.3}

/* Two-step set-up (in the app, like "Choose your own password") */
.steplist{display:flex;flex-direction:column;gap:14px}
.qrcard{align-items:center;text-align:center}
.qr2{width:232px;height:232px;background:#fff;padding:14px;border:2px solid var(--soft);border-radius:14px}
.qr2 svg{display:block;width:100%;height:100%}
.setkey{font-family:Consolas,'Courier New',monospace;font-size:22px;font-weight:700;letter-spacing:1px;word-spacing:8px;user-select:all;background:var(--paper);border:2px solid var(--soft);border-radius:12px;padding:12px;text-align:center;overflow-wrap:normal}
input.otp{font-family:Consolas,'Courier New',monospace;font-size:34px;letter-spacing:14px;text-align:center;min-height:76px}
@media (max-width:419px){.setkey{font-size:20px;letter-spacing:0;word-spacing:2px;padding:12px 6px}}   /* the key stays on one line on a 360 phone */
.onphone{display:none}
@media (max-width:599px){.onphone{display:flex}.notphone{display:none}}   /* the QR can't be scanned by the phone showing it */

/* Shared tablet: what a manager signed in by PIN can and can't do here */
.canlist{list-style:none;display:flex;flex-direction:column;gap:8px}
.canlist li{display:flex;gap:10px;align-items:flex-start;font-size:17px;line-height:1.3}
.canlist .i{font-size:22px;flex:none;margin-top:1px}
.canlist li.yes .i{color:var(--action)}
.canlist li.no{color:var(--slate)}
details.why summary{min-height:66px;display:flex;align-items:center;font-size:17px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
details.why p{font-size:17px;line-height:1.35}

/* The truck check with no signal and an old copy (D4): a dashed box inside the gate's box, saying so */
.stale{display:flex;gap:10px;align-items:flex-start;border:2px dashed var(--ink);border-radius:12px;padding:10px 12px;background:#fff;font-size:16px;font-weight:700;line-height:1.3}
.stale .i{font-size:22px;flex:none}

/* The log-in, code and two-step screens live in the app now (they were the website's log-in page): the LOG-IN part of
   Smithers' new.css, scoped to the app. */
.logincard .lockbox{display:flex;gap:12px;align-items:flex-start;background:#FBE9E1;border:2px solid var(--imp);color:#6b2d06;border-radius:12px;padding:12px 14px;font-weight:700;font-size:17px;line-height:1.35}
.logincard .lockbox .i{font-size:26px;flex:none}
.logincard .who{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--slate)}
.logincard .who b{color:var(--ink)}
.logincard .waiting{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px dashed var(--ink);border-radius:12px;padding:12px 14px;font-weight:700;font-size:17px;line-height:1.35}
.logincard .waiting .i{font-size:26px;flex:none}
.logincard .waiting span span{display:block;font-weight:400;color:var(--slate);margin-top:2px}
.forgot summary{min-height:66px;display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.forgot p{font-size:17px;line-height:1.35}
/* the log-in uses the app's own content column */
/* The tablet's keypad shows the staff number as it's typed (no names on the tablet: 0012). */
.pindots .tsn{font-size:40px;font-weight:800;letter-spacing:8px;min-height:52px;display:block;text-align:center;font-family:Consolas,'Courier New',monospace}
button.filelink{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}

/* ---------- JOB ROLES (Smithers, for Q, 12 Nov 2026) ----------
   The only NEW styles the role-based training screens need. Paste at the end of app.css.
   Everything else is app.css at 361d89b as it is: mlist rows (.plist/.pitem/.prow/.pmore), cards, badges, .checkrow,
   .kpis, .warn, .note, .card.draft, the matrix (table.tmatrix, .tcell) and the layout bands.
   Rules kept: 66 px targets, nothing under 16 px, colour never the only clue (every state has a word and an icon or
   an edge of its own), hazard yellow only for serious, nothing loaded from outside. */

/* 1. Two views inside Manage > Training: "Training matrix" and "Job roles". The same look as the Manage tabs (.mtab),
      two halves, so it reads as "tabs within the tab", not as the shift pills below it. */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg .mtab{flex-direction:row;gap:8px;font-size:17px}
.seg .mtab .i{font-size:22px}
@media (min-width:1024px){.app[data-desk="1"] .seg{max-width:560px}}

/* 2. "Needed by 12 Dec": a need someone still has days to get. Not a problem, so no red. A white badge with a blue
      edge and the calendar icon (a held one is filled blue with a tick), and the words. In print it is the words only
      (a thin solid edge), like every other cell. */
.badge.due{background:#fff;color:var(--pos);border:2px solid var(--pos)}
td.tdue,.tcell.tdue{box-shadow:inset 0 0 0 2px var(--pos);color:var(--pos);font-weight:700}
@media print{td.tdue{box-shadow:none;border:1px solid #000!important;color:#000}}

/* 3. Exempt ("Not needed (exempt)"): the slate "nothing needed" look, plus a dotted underline that says "tap for why"
      to a manager. Shift leads and the printout never get the reason, so they never get the underline. */
td.tex .tcell,.tcell.tex{color:var(--slate);text-decoration:underline dotted;text-underline-offset:4px}

/* 4. The impact line before a role change is saved (3.3): one sentence, then the four numbers as figure boxes. */
.impact{border:3px solid var(--ink);gap:10px}
.impact .q b{font-size:19px}
.impact .kpi.bad b{color:var(--bad)}

/* 5. Tick lists: authorisations to end with a role (R2), job roles on the add-a-person form (R7), exemption reasons (R6).
      .checkrow is the app's own 66 px tick row; these only add the second line and the "why keep it" box under an untick. */
.checkrow .two{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.checkrow .two small{font-size:16px;color:var(--slate)}
.checkrow input[type="radio"]{width:30px;height:30px;flex:none;accent-color:var(--ink)}
.keepwhy{display:flex;flex-direction:column;gap:6px;padding:4px 0 12px 42px;border-bottom:1px solid var(--soft)}
.ticklist{background:#fff;border:1.5px solid var(--soft);border-radius:16px;padding:0 14px}
.ticklist .checkrow:last-child,.ticklist .keepwhy:last-child{border-bottom:0}

/* 6. "What they need" and "What your job needs": where a need comes from, under its name. */
.from{font-size:16px;color:var(--slate)}
.from b{color:var(--ink);font-weight:600}

/* A need's state can be long ("Authorised, review by 14 Jan 2027"): in these lists its badge wraps instead of running
   off a 360 phone (badges never wrap elsewhere, so this is scoped to .needlist). */
.needlist .badge{white-space:normal;text-align:left}

/* 7. The role's own needs in the editor, numbered in the matrix's column order. */
.needno{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--paper);border:1.5px solid var(--soft);font-size:16px;font-weight:700;margin-right:8px;vertical-align:1px}
/* "Report a problem" link at the foot of every signed-in screen (step 3, part 6): small, above the bottom tabs. */
.problemfoot{display:block;width:100%;align-self:stretch;box-sizing:border-box;text-align:center;padding:8px 16px 24px;font-size:14px}
.problemfoot .filelink{color:var(--muted,#5b6472);text-decoration:underline;min-height:44px}
@media (min-width:1024px){ .app[data-desk="1"] > .problemfoot{grid-column:2;grid-row:6;text-align:left;padding:0 var(--gut) 32px} }
@media (min-width:768px){ .app:has(> .tabbar) > .problemfoot{grid-column:2;grid-row:6;text-align:left;padding:0 var(--gut) 32px} }