:root{--ink:#1F3A5F;--teal:#D72229;--teal-soft:#fbe9ea;--bg:#f5f5f5;--card:#fff;--muted:#5F5E5A;--warn:#A01920}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 Calibri,Carlito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#111}
header{background:#fff;color:var(--teal);padding:10px 16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:3px solid var(--teal);display:flex;align-items:center;gap:10px}
header img{height:32px;width:32px}
header .sub{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:.85rem}
header a{color:var(--teal);text-decoration:none}
main{max-width:720px;margin:0 auto;padding:16px 12px 140px}
h1{font-size:1.25rem;margin:8px 0 4px}
h2{font-size:1rem;margin:0 0 6px;word-break:break-word}
.muted{color:var(--muted);font-size:.9rem}
.warn{color:var(--warn)}
.pill{display:inline-block;background:var(--teal-soft);color:var(--teal);border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);text-align:center}
.card h2 a{color:var(--ink);text-decoration:none}
.qr{display:block;width:100%;max-width:240px;margin:10px auto}
.btn{display:inline-block;background:var(--teal);color:#fff;border:0;border-radius:10px;padding:12px 18px;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;width:100%}
.btn:disabled{background:#b9c7c5;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--teal);border:2px solid var(--teal)}
.row{display:flex;gap:10px;margin-top:10px}
input,select{width:100%;padding:12px;font-size:1rem;border:1px solid #c9d3d2;border-radius:10px;background:#fff;margin:6px 0 14px}
label{display:block;font-weight:600}
form button[type=submit]{margin-top:6px}
.tabs{display:flex;gap:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.tab{flex:1;padding:12px;border:0;background:#fff;color:var(--muted);font-weight:600;font-size:.95rem}
.tab.active{color:var(--teal);border-bottom:3px solid var(--teal)}
.progress{height:4px;background:#dfe6e5;border-radius:2px;margin:6px 0 10px}
#bar{height:100%;width:0;background:var(--teal);border-radius:2px;transition:width .2s}
#pages{background:var(--card);border-radius:12px;padding:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.page{display:block;width:100%;height:auto;aspect-ratio:1/1.4142;margin-bottom:8px;border:1px solid #e3e8e7;background:#fafafa}
.sticky{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #dfe6e5;padding:10px 12px 14px;box-shadow:0 -2px 8px rgba(0,0,0,.06)}
.sticky>*{max-width:720px;margin-left:auto;margin-right:auto}
.confirm{display:flex;gap:10px;align-items:flex-start;background:var(--teal-soft);border:2px solid var(--teal);border-radius:10px;padding:10px;font-weight:500}
.confirm input{width:22px;height:22px;margin:2px 0 0;flex:none}
.hint{margin:6px 0 8px;font-size:.85rem;color:var(--muted)}
#pad{display:block;width:100%;height:220px;background:#fff;border:2px dashed #9fb3b0;border-radius:10px;touch-action:none}
.btn.big{font-size:1.15rem;padding:16px;margin:10px 0 4px}
.or{margin:6px 0 0}
/* take-5 */
.t5card{border:2px solid var(--teal)}
.t5card .or{display:block;font-size:.75rem;word-break:break-all}
.lbl{font-weight:600;margin:4px 0 6px}
textarea{width:100%;padding:12px;font-size:1rem;border:1px solid #c9d3d2;border-radius:10px;background:#fff;margin:6px 0 14px;font-family:inherit}
.hz{background:#fff;border-radius:12px;padding:6px 10px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:14px}
.hzrow{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid #eee;font-weight:500}
.hzrow:last-child{border-bottom:0}
.hzrow input{width:26px;height:26px;margin:2px 0 0;flex:none}
.hzrow small{display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin-top:2px}
.tasks-h{margin:22px 0 8px;font-size:1.05rem}
.task{margin-bottom:10px}
.taskline{margin:4px 0 8px}
.finish{display:flex;gap:8px;align-items:center}
.finish input{margin:0;flex:1;padding:10px}
.finish .btn{width:auto;flex:none;padding:10px 16px}

/* report */
.alert{background:#fbe9ea;border:2px solid #D72229;color:#A01920;border-radius:10px;padding:12px;margin:0 0 12px;font-size:1.05rem}
.kinds .hzrow input{width:26px;height:26px}
.report-card{margin-top:22px;text-align:left}
.report-card .btn{margin-top:6px}
.report-card details{margin-top:8px}
.report-card summary{cursor:pointer}
input[type=file]{padding:10px;background:#fff}
.signed{font-size:.85rem;text-align:left;margin:8px 0 0}
.missing{color:#A01920;font-weight:600;margin:6px 0 4px}

/* ---------------------------------------------------------------- sign on / off + my week */
.flash{border-radius:10px;padding:10px 12px;margin:0 0 12px;font-weight:600}
.flash.ok{background:#eaf4ec;border:2px solid #2f7d4f;color:#1e5c39}
.flash.warn{background:var(--teal-soft);border:2px solid var(--teal);color:var(--warn)}
.btn.big{min-height:64px}
/* lunch — three fat targets, 0:30 already picked. One tap changes it, no dropdown. */
.chips{display:flex;gap:10px;margin:0 0 14px}
.chip{flex:1;position:relative;font-weight:700}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;left:0;top:0}
.chip span{display:block;text-align:center;padding:16px 4px;border:2px solid #c9d3d2;border-radius:10px;background:#fff;font-size:1.05rem}
.chip input:checked+span{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.wknav{display:flex;gap:16px;margin:14px 0 0;font-size:.9rem}
/* the timesheet — this IS the LFCS form, not a table of hours */
.ts{background:#fff;border:1px solid #b9c0bf;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:14px}
.ts-head{padding:8px 10px;border-bottom:2px solid var(--teal)}
.ts-title{font-weight:700;font-size:.9rem;letter-spacing:.02em}
.ts-meta{display:flex;justify-content:space-between;gap:10px;margin-top:6px;font-size:.72rem;line-height:1.5}
.ts-lic{text-align:right;color:var(--muted);white-space:nowrap}
.ts-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ts-grid{border-collapse:collapse;font-size:.72rem;white-space:nowrap}
.ts-grid th,.ts-grid td{border:1px solid #c9cfce;padding:7px 4px;text-align:center;height:38px}
.ts-grid thead th{background:#f0f2f2;font-size:.62rem;font-weight:700;line-height:1.15;color:#333}
.ts-grid tfoot td{background:#f0f2f2;font-weight:700;text-align:right;padding-right:8px}
.ts-grid tfoot .c-hrs{text-align:center}
.ts-grid .c-day{width:40px;font-weight:700}
.ts-grid .c-date{width:48px}
.ts-grid .c-hrs{width:48px;font-weight:700}
.ts-grid .c-job{min-width:150px;max-width:180px;text-align:left;overflow:hidden;text-overflow:ellipsis}
.ts-grid .c-desc{min-width:170px;max-width:200px;text-align:left;overflow:hidden;text-overflow:ellipsis}
.ts-grid td.c-day,.ts-grid th.c-day{position:sticky;left:0;background:#fff;z-index:1}
.ts-grid thead th.c-day{background:#f0f2f2}
.ts-grid tr.today td{background:#fffbe6}
.ts-grid tr.today td.c-day{background:#fffbe6}
.ts-grid tr.live td{background:var(--teal-soft)}
.ts-grid tr.live td.c-day{background:var(--teal-soft)}
.onnow{color:var(--teal);font-weight:700}
.ts-grid td.auto{color:var(--muted);font-style:italic}

/* ---------------------------------------------------------------- foreman v2 + device binding */
.panel{text-align:left;margin-bottom:12px;padding:12px 14px}
.panel-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.panel-h h2{margin:0}
.daynav{font-size:.85rem;color:var(--muted);white-space:nowrap}
.daynav a{color:var(--teal);text-decoration:none;font-size:1.2rem;padding:0 6px}
/* who's on — a dot you can read from arm's length, not a legend to decode */
.manrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #eee}
.manrow:last-child{border-bottom:0}
.manrow .dot{width:12px;height:12px;border-radius:50%;flex:none;background:#c9d3d2}
.manrow.on .dot{background:#2f7d4f}
.manrow.off .dot{background:var(--ink)}
.manrow.none .dot{background:#dfe6e5;border:2px solid #c9d3d2}
.manrow .man{font-weight:600;flex:1;min-width:0}
.manrow .man small{display:block;font-weight:400}
.manrow .times{font-size:.85rem;color:#333;white-space:nowrap}
.adj{color:var(--teal);font-style:normal;font-weight:700;font-size:.75rem}
/* phone waiting on a foreman's thumb */
.devrow{padding:10px 0;border-bottom:1px solid #eee}
.devrow:last-child{border-bottom:0}
.devwho{font-size:1.05rem;margin-bottom:8px}
.devbtns{display:flex;gap:10px}
.devbtns form{flex:1}
.devnote{margin:6px 0 0;font-size:.75rem}
.knocked{margin-top:8px}
.knocked summary{cursor:pointer}
/* fix a time */
.fixman{border-bottom:1px solid #eee;padding:9px 0}
.fixman:last-child{border-bottom:0}
.fixman summary{cursor:pointer;font-size:1rem}
.fixform{margin-top:10px}
.fixgrid{display:flex;gap:8px}
.fixgrid label{flex:1;font-size:.8rem;font-weight:600}
.fixgrid input,.fixgrid select{margin:4px 0 10px;padding:10px 6px;font-size:.95rem}
.adjnote{margin:6px 0 0;font-size:.8rem}
/* crew */
.crewrow.inactive .man{text-decoration:line-through;color:var(--muted)}
.crewbtns{display:flex;gap:8px;align-items:center;flex:none}
.crewbtns form{margin:0}
.btn.small,.btn.ring{width:auto;padding:8px 12px;font-size:.85rem}
.addman{margin-top:10px}
.addman summary{cursor:pointer;font-weight:600;color:var(--teal)}
.addman form{margin-top:8px}
.boundname{font-size:1.1rem;font-weight:700;margin:0 0 14px}
.ringline{margin-top:18px}
.big-say{font-size:1.1rem;margin:10px 0 18px}
/* fullscreen QR — plain white, biggest code the phone will draw. Sun beats a small QR. */
body.qrfull{background:#fff;margin:0;height:100vh;display:flex;align-items:center;justify-content:center;cursor:pointer}
.qrwrap{text-align:center;padding:8px;width:100%}
.qrbig{display:block;width:min(96vw,96vh);max-width:100%;height:auto;margin:0 auto;image-rendering:pixelated}
.qrtitle{font-weight:700;margin:8px 0 2px;font-size:.95rem}
.qrhint{color:#5F5E5A;font-size:.8rem;margin:0}
.qrtap{display:block}
/* an adjusted cell on My week — shaded, same as the .xlsx the office opens */
.ts-grid td.adj{background:#FFE9A8}
.ts-grid tr.today td.adj,.ts-grid tr.live td.adj{background:#FFE9A8}
/* ---------------------------------------------------------------- wave 2: T&M, materials, photo, plant */
/* T&M — tap a name, tap his hours. No number pad anywhere. */
.men{margin:0 0 14px}
.manpick{margin-bottom:8px}
.manchip{display:block;flex:none}
.manchip span{text-align:left;padding:12px 14px}
.hrs{margin:6px 0 10px}
.hourchips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 6px}
.hchip{flex:none;min-width:56px;padding:14px 6px;border:2px solid #c9d3d2;border-radius:10px;background:#fff;font-size:1.05rem;font-weight:700;color:#111}
.hchip.on{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.tmsum .tmdesc{margin:2px 0 10px;font-size:1.05rem}
.tmmen .manrow{padding:7px 0}
.tmtotal{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
.tmplant{margin:8px 0 0}
.tmrow.unsigned{background:var(--teal-soft);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px}
.tmrow.unsigned .man{color:var(--warn)}
.tmrow .btn.small{flex:none}
#tm .btn.big{margin-top:12px}
/* materials — three buttons, no fourth */
.matreq{padding:10px 0;border-bottom:1px solid #eee}
.matreq:last-child{border-bottom:0}
.matreq .devbtns .btn{padding:10px 8px;font-size:.85rem;width:100%}
.matrow .mstat{font-size:.8rem;font-weight:700;white-space:nowrap;flex:none}
.mstat.s-open{color:var(--muted)}
.mstat.s-got,.mstat.s-ordered{color:#1e7f4f}
.mstat.s-not-needed{color:var(--muted);text-decoration:line-through}
.warnpill{background:var(--teal);color:#fff}
.jobtools{margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
/* photo drop */
.camera{display:block;background:var(--teal);color:#fff;border-radius:10px;padding:22px;font-size:1.2rem;font-weight:700;text-align:center;cursor:pointer}
.shotinput{margin:10px 0}
.shot .thumb{display:block;width:100%;height:auto;border-radius:8px;margin-top:8px}
/* vehicle prestart — big targets, one screen, under a minute */
.allok{margin:6px 0 2px}
.allhint{margin:0 0 12px}
.checks{background:#fff;border-radius:12px;padding:4px 10px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:14px}
.checkrow{display:flex;gap:10px;align-items:center;padding:10px 2px;border-bottom:1px solid #eee}
.checkrow:last-child{border-bottom:0}
.checkwhat{flex:1;min-width:0;font-weight:600}
.checkwhat small{display:block;font-weight:400;font-size:.78rem}
.yn{display:flex;gap:8px;flex:none}
.ynchip{flex:none;width:62px}
.ynchip span{padding:14px 4px;font-size:.95rem}
/* OK is green, NO is red. On a red-branded page a red OK reads as a problem at arm's length. */
.ynchip input:checked+span{border-color:#2f7d4f;background:#eaf4ec;color:#1e5c39}
.ynchip.bad input:checked+span{border-color:var(--warn);background:#fbe9ea;color:var(--warn)}
.defectstrip{border:2px solid var(--teal)}
.defectcard{border:2px solid var(--teal)}
.vcard{display:block;text-decoration:none;color:inherit}
.vcard h2{color:var(--ink)}
.vcard.bad{border:2px solid var(--teal)}
.ts-grid .c-dw{width:36px;color:var(--teal);font-weight:700}

/* ---------------------------------------------------------------- wave 3: the board, /today, the live diary */
/* [hidden] must actually hide. The pick bar and the long-press sheet are both display:flex, and a
   class rule beats the browser's own [hidden] rule - so a "hidden" overlay sat over the whole board
   swallowing every tap. Caught by Playwright refusing to click a deck card, 25/08. */
[hidden]{display:none !important}
/* Every target on the board is at least 1 cm on a phone. Anything smaller gets missed in gloves,
   and a missed tap on a board is a man in the wrong place, not a typo. */
.boardnav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 12px}
.boardnav .btn{width:auto;padding:10px 14px;font-size:.9rem}
.boardnav .daynav{margin-left:auto}
/* the one line telling him what the board is waiting for */
.pickbar{position:sticky;top:0;z-index:20;display:flex;gap:10px;align-items:center;justify-content:space-between;
  background:var(--teal);color:#fff;border-radius:10px;padding:12px 14px;margin:0 0 12px;font-weight:700}
.pickbar .btn{width:auto;flex:none;background:#fff;border-color:#fff}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.gonerow{margin-top:8px;padding-top:8px;border-top:1px solid #eee}
/* a man */
.mchip{min-height:44px;padding:11px 14px;border:2px solid #c9d3d2;border-radius:999px;background:#fff;
  font-size:1rem;font-weight:700;color:#111;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.mchip.on{border-color:var(--ink);background:#eef2f7}
.mchip.picked{border-color:var(--teal);background:var(--teal-soft);color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.mchip.dragging{opacity:.35}
.mchip.gone{border-style:dashed;color:var(--muted);font-weight:500;cursor:default}
.mchip.gone small{display:block;font-size:.7rem;font-weight:400}
/* the deck */
.deckcard{min-height:44px;padding:11px 12px;border:2px dashed var(--ink);border-radius:10px;background:#fff;
  font-size:.85rem;font-weight:700;letter-spacing:.03em;color:var(--ink);cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.deckcard.picked{border-style:solid;border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}
.newzone{margin-top:12px}
.newzone summary{cursor:pointer;font-weight:700;color:var(--teal);padding:10px 0}
/* a work area */
.zones{display:flex;flex-direction:column;gap:12px}
.zone{background:var(--card);border-radius:12px;padding:12px 14px;box-shadow:0 1px 3px rgba(0,0,0,.08);
  border:2px solid transparent;text-align:left}
.zone.waiting{border-color:#c9d3d2;border-style:dashed}
.zone.over{border-color:var(--teal);background:var(--teal-soft)}
.zone.zdone{opacity:.65}
.zone.zfixed{background:#fafbfb}
.zonehead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.zonehead h2{margin:0;font-size:1.05rem}
.zpills{display:flex;gap:6px;flex:none}
.stagepill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:700;
  background:#eef2f7;color:var(--ink);text-transform:uppercase;letter-spacing:.03em}
.stagepill.s-inspected{background:#eaf4ec;color:#1e5c39}
.stagepill.s-poured{background:var(--teal-soft);color:var(--teal)}
.stagepill.s-done{background:var(--ink);color:#fff}
.estpill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:700;
  background:#FFF3CD;color:#7a5b00}
.drop{display:flex;flex-wrap:wrap;gap:8px;min-height:52px;align-items:center;margin-top:8px;
  border-top:1px dashed #e3e8e7;padding-top:8px}
.dropempty{font-style:italic}
.sheet{margin-top:8px}
.sheet summary{cursor:pointer;color:var(--muted);font-size:1.4rem;line-height:1;padding:4px 0}
.sheetbtns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sheetbtns form{margin:0}
.sheetbtns .btn{width:auto;padding:11px 14px;font-size:.85rem}
.sheetbtns .btn.onnowbtn{background:var(--ink);color:#fff;border-color:var(--ink)}
.movejob{display:flex;gap:6px;align-items:center}
.movejob select{margin:0;padding:10px;width:auto;max-width:170px;font-size:.85rem}
/* what the finger is dragging */
.dragghost{position:fixed;z-index:60;transform:translate(-50%,-50%);pointer-events:none;
  background:var(--teal);color:#fff;border-radius:999px;padding:11px 16px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.28)}
/* the long-press sheet */
.actionsheet{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);display:flex;align-items:flex-end}
.sheetbox{background:#fff;width:100%;border-radius:14px 14px 0 0;padding:16px 14px 22px;max-height:80vh;overflow:auto}
.sheetbox .lbl{font-size:1.1rem;margin:0 0 12px}
.sheetbox .sheetbtns .btn{width:100%}
.sheetbox .sheetbtns form{flex:1 1 100%}
/* take 5 cards waiting to be put somewhere */
.saidcard{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #eee;
  touch-action:pan-y;-webkit-user-select:none;user-select:none}
.saidcard:last-child{border-bottom:0}
.saidcard.picked{background:var(--teal-soft);border-radius:8px;padding-left:8px;padding-right:8px}
.saidcard .man{flex:1;min-width:0}
.saidcard .man small{display:block;font-weight:400}
.saidcard .dismiss{margin:0;flex:none}
.saidcard .dismiss .btn{width:auto;white-space:nowrap}
/* the admin board — columns are jobs */
.jobcols{display:flex;flex-direction:column;gap:12px}
.joblabel{margin:2px 0 0;font-size:.8rem}
.jobcol .drop{min-height:60px}
#post textarea{font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre;margin-top:10px}
/* /today */
.pickjob{margin:0 0 12px}
.pickjob .btn{padding:20px 14px}
.pickjob small{font-weight:400;opacity:.85;font-size:.8rem}
.tomorrow{margin-top:16px}
.viafix{margin:-6px 0 12px}
/* the live diary */
.dsec{scroll-margin-top:12px}
.dline{margin:4px 0;font-size:.95rem}
.dline.sub{padding-left:12px;font-size:.88rem}
.tbc{font-style:italic}
.mic{flex:none;min-height:40px;padding:9px 14px;border:2px solid var(--teal);border-radius:999px;background:#fff;
  color:var(--teal);font-weight:700;font-size:.85rem;cursor:pointer}
.mic:disabled{border-color:#c9d3d2;color:var(--muted);cursor:not-allowed}
.mic.rec{background:var(--teal);color:#fff}
.micstate{margin:6px 0 0;font-size:.85rem;color:var(--muted)}
.typeit{margin-top:8px}
.typeit summary{cursor:pointer;font-size:.85rem}
.typeit input{margin:8px 0}
.typeit .btn{width:auto;padding:10px 16px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.dthumb{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid #e3e8e7}
.incrow{padding:6px 0;border-bottom:1px solid #eee}
.incrow:last-child{border-bottom:0}

/* ---------------------------------------------------------------- Liam's screen (wave 4)
   Traffic lights, read at arm's length from across an office. Everything here is sized for a
   glance, not a read: the money number is the biggest thing on the page and the tiles are the
   second biggest, and there is nothing third. */
.a-day{color:var(--muted);font-size:.9rem;margin:4px 0 10px;text-transform:uppercase;letter-spacing:.06em}
.a-h1{font-size:1.35rem;margin:4px 0 12px}
.a-back{margin:0 0 6px;font-size:.9rem}
.a-back a{color:var(--muted);text-decoration:none}

.money{border-radius:14px;padding:20px 14px;text-align:center;margin:0 0 16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.money .mnum{font-size:2.9rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.money .mlab{margin-top:6px;font-size:.95rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.money .msub{margin-top:8px;font-size:.85rem;opacity:.85}
.m-red{background:#A01920;color:#fff}
.m-amber{background:#E8A33D;color:#26200f}
.m-grey{background:#fff;color:var(--muted)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tilewrap{display:flex;flex-direction:column;align-items:stretch}
.tile{display:flex;flex-direction:column;justify-content:space-between;min-height:104px;border-radius:14px;
      padding:14px;text-decoration:none;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08);
      -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tile .tname{font-size:1.05rem;line-height:1.2;word-break:break-word}
.tile .ton{font-size:.85rem;font-weight:600;opacity:.85;margin-top:10px}
.tile.held{transform:scale(.97)}
.t-red{background:#A01920;color:#fff}
.t-amber{background:#E8A33D;color:#26200f}
.t-green{background:#2E7D4F;color:#fff}
.t-red-ink{color:#A01920}
.t-amber-ink{color:#8a5f10}
.t-green-ink{color:#2E7D4F}
.lookin{display:block;text-align:center;margin:6px 0 0;font-size:.8rem;color:var(--muted);text-decoration:none}

.a-tomorrow{margin-top:18px}
.wd{margin-top:18px;font-size:.8rem;text-align:center}

/* the what's-wrong page. One line per reason, nothing softening it. */
.wrongline{background:#fff;border-left:5px solid #A01920;border-radius:8px;padding:12px 14px;margin:0 0 10px;
           font-size:1.05rem;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.wrongline.w-amber{border-left-color:#E8A33D}
.rightline{background:#fff;border-left:5px solid #2E7D4F;border-radius:8px;padding:12px 14px;margin:0 0 10px;
           font-size:1.05rem;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ringbig{margin-top:18px;font-size:1.2rem;padding:20px}

/* the read-only drill-in. The bar says so, because a page that looks live and is not is worse
   than one that says what it is. */
.robar{background:#eceff1;border:1px solid #cfd8dc;border-radius:10px;padding:8px 12px;margin:0 0 12px;
       font-size:.85rem;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.robar a{color:var(--ink);text-decoration:none;font-weight:600}
.robar .rotag{font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mchip.rochip{background:#fff;border:1px solid #c9d3d2;color:#111;border-radius:999px;padding:8px 12px;
              font-weight:600;font-size:.9rem;display:inline-block}

/* the one amber line on the foreman screen: what the office can already see on his job. */
.liamline{background:#fdf4e3;border:2px solid #E8A33D;color:#6b4c0c;border-radius:10px;padding:10px 12px;
          margin:0 0 12px;font-weight:600}