/* The Ramadan campaign page.
   Same tokens as flow.css on purpose — this is another room in the same
   building, not another building. */
:root{
  --ink:#16202f; --muted:#6b7a90; --line:#e3e9f2; --bg:#f5f7fb; --card:#fff;
  --blue:#2563eb; --blue-soft:#eaf1ff;
  --ok:#177245; --ok-bg:#e8f6ed; --ok-edge:#bfe3cc;
  --warn:#b26a00; --warn-bg:#fff6e6; --warn-edge:#f3ddb0;
  --bad:#b3261e; --bad-bg:#fdeceb; --bad-edge:#f2c9c5;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* the ladder, one colour per rung — the same order the Control Room uses */
  --s-nofootage:#c9d2e0; --s-needlines:#b3261e; --s-borrowed:#e8a33d;
  --s-ready:#2563eb; --s-listed:#7c5cd6; --s-sent:#0f8a8a; --s-counted:#177245;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--blue)}
.note{color:var(--muted);font-size:.78rem}
.mono{font-family:var(--mono);font-size:.8rem}
.spacer{margin-left:auto}

.top{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.top .in{max-width:1720px;margin:0 auto;padding:8px 14px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap}
.brand{font-weight:700;font-size:.95rem;letter-spacing:-.01em}

.btn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 11px;
  font:inherit;font-size:.82rem;cursor:pointer;color:var(--ink)}
.btn:hover{border-color:#c6d2e4}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.danger{color:var(--bad);border-color:var(--bad-edge);background:var(--bad-bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-xs{padding:2px 8px;font-size:.72rem}
input[type=search],input[type=text],input[type=time],input[type=number],select{
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;font:inherit;font-size:.82rem;
  background:#fff;color:var(--ink);width:100%}
label{display:flex;flex-direction:column;gap:3px;font-size:.76rem;color:var(--muted);margin:6px 0}
label.chk{flex-direction:row;align-items:center;gap:6px;color:var(--ink);font-size:.8rem}
label.chk input{width:auto}
.frow{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0}
.frow>label{flex:1 1 150px}
.empty{padding:26px 12px;text-align:center;color:var(--muted)}
.gate{padding:30px;text-align:center}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card+.card{margin-top:12px}
.cardhead{display:flex;gap:10px;align-items:center;padding:9px 12px;background:#fbfcff;
  border-bottom:1px solid var(--line)}
.cardhead h2{margin:0;font-size:.88rem;letter-spacing:-.01em}
.pad{padding:12px}
.msg{font-size:.8rem;padding:4px 0;min-height:1.2em}
.msg.bad{color:var(--bad)} .msg.good{color:var(--ok)}
.tag{display:inline-block;font-size:.7rem;border:1px solid var(--line);border-radius:999px;
  padding:1px 8px;color:var(--muted);background:#fbfcff;white-space:nowrap}
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-edge)}
.tag.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-edge)}
.tag.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-edge)}
.wrap{max-width:1720px;margin:0 auto;padding:12px 14px 60px}

/* ---------------------------------------------------------- band 1: state */
.band1{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,1fr);gap:12px}
@media(max-width:1250px){.band1{grid-template-columns:1fr}}
.kpi{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.kpi .n{font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.kpi .k{font-size:.72rem;color:var(--muted);display:block;margin-top:3px}
.burn{height:12px;border-radius:999px;background:#eef2f8;overflow:hidden;margin:10px 0 4px;
  display:flex}
.burn i{display:block;height:100%}
.burn i.done{background:var(--s-counted)}
.burn i.p1{background:var(--s-ready)}
.burn i.p2{background:var(--s-borrowed)}
.spark{display:flex;align-items:flex-end;gap:2px;height:44px;margin-top:8px}
.spark i{flex:1 1 0;background:var(--blue-soft);border-radius:2px 2px 0 0;min-height:2px;
  position:relative}
.spark i.hi{background:var(--blue)}
.mach{border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-bottom:8px}
.mach:last-child{margin-bottom:0}
.machhead{display:flex;gap:8px;align-items:center;font-weight:600;font-size:.84rem}
.machhead .tag{font-weight:400}
.streams{display:flex;gap:3px;margin:6px 0 4px;flex-wrap:wrap}
.streams b{width:22px;height:16px;border-radius:3px;background:#eef2f8;border:1px solid var(--line);
  font-size:.6rem;font-weight:600;color:var(--muted);display:flex;align-items:center;
  justify-content:center;cursor:default}
.streams b.busy{background:var(--ok-bg);border-color:var(--ok-edge);color:var(--ok)}
.streams b.down{background:var(--bad-bg);border-color:var(--bad-edge);color:var(--bad)}
.bar{height:7px;border-radius:999px;background:#eef2f8;overflow:hidden;margin-top:3px}
.bar i{display:block;height:100%;background:var(--blue)}
.bar i.warn{background:var(--warn)} .bar i.bad{background:var(--bad)}
.exlist{margin:0;padding:0;list-style:none;max-height:260px;overflow:auto}
.exlist li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.8rem;display:flex;gap:7px}
.exlist li:last-child{border-bottom:0}
.exlist .w{flex:0 0 auto;width:15px;text-align:center;font-weight:700}
.exlist li.sev-bad .w{color:var(--bad)} .exlist li.sev-warn .w{color:var(--warn)}

/* ---------------------------------------------------------- band 2: scope */
.band2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0}
@media(max-width:1100px){.band2{grid-template-columns:1fr}}
#map{height:460px;background:#e8eef6}
.dotkey{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:7px 12px;
  border-top:1px solid var(--line);font-size:.72rem;color:var(--muted)}
.sdot{display:inline-block;width:10px;height:10px;border-radius:50%;
  border:1px solid rgba(0,0,0,.25);flex:0 0 auto;vertical-align:-1px}
.sidelist{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
@media(max-width:1100px){.sidelist{border-left:0;border-top:1px solid var(--line)}}
.filters{padding:9px 12px;border-bottom:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;
  align-items:center}
.filters .seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.filters .seg button{border:0;background:#fff;padding:4px 10px;font:inherit;font-size:.76rem;
  color:var(--muted);cursor:pointer}
.filters .seg button[aria-pressed=true]{background:var(--blue);color:#fff;font-weight:600}
.sites{overflow:auto;max-height:420px}
.srow{display:flex;gap:9px;align-items:center;width:100%;border:0;background:#fff;
  border-bottom:1px solid var(--line);padding:7px 12px;cursor:pointer;text-align:left;font:inherit}
.srow:hover{background:#fbfcff}
.srow[aria-current=true]{background:var(--blue-soft)}
.srow .nm{font-weight:600;font-size:.83rem}
.srow .meta{font-size:.72rem;color:var(--muted)}
.srow .rt{margin-left:auto;text-align:right;font-size:.72rem;color:var(--muted);white-space:nowrap}

/* ------------------------------------------------------- band 3: the site */
.gridwrap{overflow:auto;padding:4px 12px 12px}
table.daygrid{border-collapse:separate;border-spacing:3px;font-size:.72rem}
table.daygrid th{font-weight:600;color:var(--muted);font-size:.68rem;text-align:center;
  padding:2px 4px;white-space:nowrap}
table.daygrid th.cam{text-align:right;padding-right:8px}
td.cell{padding:0}
td.cell button{width:46px;height:34px;border-radius:6px;border:1px solid rgba(0,0,0,.12);
  background:#eef2f8;cursor:pointer;font:inherit;font-size:.62rem;color:#fff;font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0}
td.cell button:disabled{cursor:not-allowed;opacity:.5}
td.cell button .ph{font-size:.55rem;opacity:.9;font-weight:500}
td.cell button[aria-current=true]{outline:3px solid var(--ink);outline-offset:1px}
td.cell button.picked{box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.sitehead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 12px;
  border-bottom:1px solid var(--line);background:#fbfcff}
.ladder{display:flex;gap:0;align-items:stretch;margin:0;padding:10px 12px;flex-wrap:wrap}
.ladder .rung{flex:1 1 0;min-width:96px;border:1px solid var(--line);border-right:0;padding:6px 8px}
.ladder .rung:last-child{border-right:1px solid var(--line);border-radius:0 8px 8px 0}
.ladder .rung:first-child{border-radius:8px 0 0 8px}
.ladder .rung .n{font-size:1.05rem;font-weight:700;line-height:1.1}
.ladder .rung .k{font-size:.68rem;color:var(--muted)}
.ladder .rung.on{background:var(--blue-soft);border-color:#cfdcf7}

/* -------------------------------------------------------- band 4: the day */
.daywrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0}
@media(max-width:1100px){.daywrap{grid-template-columns:1fr}}
.framebox{position:relative;background:#0e141d;display:flex;align-items:center;
  justify-content:center;min-height:240px}
.framebox img{max-width:100%;display:block}
.framebox canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.framenote{padding:7px 12px;border-top:1px solid var(--line);font-size:.74rem;color:var(--muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dayside{border-left:1px solid var(--line);padding:10px 12px}
@media(max-width:1100px){.dayside{border-left:0;border-top:1px solid var(--line)}}
.readylist{list-style:none;margin:6px 0;padding:0}
.readylist li{display:flex;gap:7px;padding:3px 0;font-size:.79rem;align-items:flex-start}
.readylist .rmark{flex:0 0 auto;width:14px;text-align:center;font-weight:700}
.readylist li.r-ok .rmark{color:var(--ok)}
.readylist li.r-warn .rmark{color:var(--warn)}
.readylist li.r-no .rmark{color:var(--bad)}
.edoverlay{position:fixed;inset:0;z-index:5000;background:#fff;display:flex;flex-direction:column}
.edbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 12px;
  border-bottom:1px solid var(--line);font-size:.82rem;background:#f7f9fc}
.edbar .spacer{flex:1}
.edstate{color:var(--muted)}
.edstate.good{color:var(--ok);font-weight:600}
.edframe{flex:1;width:100%;border:0;display:block}
body.edopen{overflow:hidden}
body.edopen .fleet-home{display:none}

/* ---------------------------------------------------------- band 5: NAS */
.nas{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0}
@media(max-width:1100px){.nas{grid-template-columns:1fr}}
.nasbrowse{padding:10px 12px}
.crumbs{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-size:.76rem;margin-bottom:7px}
.crumbs button{border:0;background:none;color:var(--blue);cursor:pointer;font:inherit;
  font-size:.76rem;padding:0}
.naslist{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.naslist .nrow{display:flex;gap:8px;align-items:center;width:100%;border:0;background:#fff;
  border-bottom:1px solid var(--line);padding:5px 9px;font:inherit;font-size:.78rem;text-align:left;
  cursor:pointer}
.naslist .nrow:last-child{border-bottom:0}
.naslist .nrow:hover{background:#fbfcff}
.naslist .nrow .sz{margin-left:auto;color:var(--muted);font-size:.72rem;white-space:nowrap}
.naslist .nrow.file{cursor:default}
.queue{border-left:1px solid var(--line);padding:10px 12px}
@media(max-width:1100px){.queue{border-left:0;border-top:1px solid var(--line)}}
.qrow{display:flex;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);
  font-size:.78rem}
.qrow:last-child{border-bottom:0}
.qrow .rt{margin-left:auto;color:var(--muted);font-size:.72rem;white-space:nowrap}

/* ------------------------------------------- counting lines: the worklist */
.lcwrap{max-height:560px;overflow:auto;border-top:1px solid var(--line)}
table.lctable{width:100%;border-collapse:collapse;font-size:.79rem}
table.lctable th{position:sticky;top:0;background:#fbfcff;text-align:left;font-size:.7rem;
  color:var(--muted);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line)}
table.lctable td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.lctable td:first-child{white-space:nowrap}
table.lctable li{margin:1px 0}

/* quick edit on the day's own picture */
.qesvg{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.qesvg.draw{cursor:crosshair}
.qesvg .grip{cursor:grab}
.qesvg .hit{cursor:move;pointer-events:stroke}
.qepanel{border-top:1px solid var(--line);padding:8px 12px;background:#fbfcfe}
.qehead{font-size:.8rem;margin-bottom:6px}
.qechips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.qechip[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}
.qechip .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.qepanel .frow>label{flex:1 1 120px;font-size:.74rem}
.qepanel .frow input,.qepanel .frow select{width:100%}
.qeacts,.qesave{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}
.qeacts .spacer{flex:1}

/* footage strip: every picture of the day with its lines */
.strip{border-top:1px solid var(--line);padding:8px 12px}
.striphead{font-size:.8rem}
.stripsum{margin:4px 0 6px}
.striprow{display:flex;gap:10px;align-items:flex-start;padding:5px 0;border-top:1px dashed var(--line)}
.stripname{flex:0 0 150px;font-size:.78rem;word-break:break-all}
.thumbs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.thumb{border:2px solid transparent;border-radius:6px;background:none;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:stretch;width:150px;text-align:left}
.thumb.on{border-color:var(--blue)}
.thumb.ref .tcap{font-weight:700}
.tbox{position:relative;display:block;background:#0e141d;border-radius:4px;overflow:hidden;aspect-ratio:3/2}
.tbox img{width:100%;height:100%;object-fit:fill;display:block}
.tbox svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tcap{font-size:.68rem;color:var(--muted);padding:1px 2px}
.vb{font-size:.66rem;padding:0 4px;border-radius:4px;align-self:flex-start;margin:0 2px 2px}
.vb-same{background:var(--ok-bg,#e7f5ec);color:var(--ok)}
.vb-moved,.vb-other{background:var(--bad-bg);color:var(--bad);font-weight:700}
.vb-dark,.vb-unsure,.vb-unread{background:#eef1f5;color:var(--muted)}
@media(max-width:700px){.striprow{flex-direction:column}.stripname{flex:none}.thumb{width:31%}}

/* quick edit: the footage pictures beside the picture being edited, in their own scroll */
.daywrap.qe{grid-template-columns:1fr}
.daywrap.qe .dayside{border-left:0;border-top:1px solid var(--line)}
.qegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);align-items:start}
.qemain{min-width:0}
.qeside{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;border-left:1px solid var(--line);
  background:#fff}
.qeside .strip{border-top:0}
.qeside .striprow{flex-direction:column;gap:4px}
.qeside .stripname{flex:none}
.qeside .thumb{width:calc(50% - 3px)}
@media(max-width:900px){.qegrid{grid-template-columns:1fr}.qeside{position:static;max-height:60vh;border-left:0;
  border-top:1px solid var(--line)}}

/* The camera-day on one screen (2026-09-22): map over picture over "Can it run?"
   on the left, the day's footage pictures scrolling on the right. The map and the
   picture share one height so they read side by side in the eye. */
/* div.daygrid only: table.daygrid is the site's camera x date grid and must stay a table */
div.daygrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);align-items:start}
.daymain{min-width:0}
.daymap{padding:10px 12px 0}
.daymap .camloc{margin:0}
.daymap .camloc-body img{max-height:41vh;width:auto;max-width:100%}
div.daygrid .framebox img{max-height:41vh;width:auto;max-width:100%}
.dayrun{border-top:1px solid var(--line);padding:10px 12px}
.dayfoot{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto;border-left:1px solid var(--line);
  background:#fbfcfe}
.dayfoot .strip{border-top:0}
.dayfoot .striprow{flex-direction:column;gap:4px}
.dayfoot .stripname{flex:none}
.dayfoot .thumb{width:calc(50% - 3px)}
@media(max-width:1000px){div.daygrid{grid-template-columns:1fr}
  .dayfoot{position:static;max-height:60vh;border-left:0;border-top:1px solid var(--line)}}

/* the survey team's login, and what it hides */
.signin{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;justify-content:center;max-width:520px;margin:0 auto}
.signin label{flex:1 1 180px;text-align:left}
.gate .msg{min-height:1.4em}
html.fieldmode .fleet-home{display:none}
html.fieldmode #reloadHard,html.fieldmode header.top a[href="/control"],html.fieldmode header.top a[href="/flow"]{display:none}

/* counting-lines worklist rows link to their site on the map */
table.lctable tr.lcrow{cursor:pointer}
table.lctable tr.lcrow:hover td{background:#f4f8ff}
table.lctable tr.lcsel td{background:#fff7d6}
table.lctable a.lcsite{color:inherit;text-decoration:none;border-bottom:1px dashed #6b86b5}
table.lctable a.lcsite:hover{color:#1f5fd6;border-bottom-style:solid}
tr.lccam th.cam{background:#ffe9a8;box-shadow:inset 3px 0 0 #d99a00}