/* Baker's Bay Grease Tracker — one stylesheet, phone first. */
:root{
  --ink:#0E1A1E; --ink-2:#3A4C52; --ink-3:#6B7F86;
  --paper:#F1F4F3; --surface:#FFFFFF; --surface-2:#E7ECEA;
  --line:#D2D9D7; --line-strong:#AFBAB7;
  --teal:#0E5A62; --teal-2:#0B4046; --teal-soft:#DCEAEA;
  --amber:#B87708; --amber-soft:#F8EBD2;
  --ok:#2C6E52; --ok-soft:#DEEBE3;
  --warn:#8F5E0C; --warn-soft:#F8EAD2;
  --crit:#A32C22; --crit-soft:#F7DFDC;
  --water:#C2DBDE; --grease:#E0A93F; --sludge:#6E5A43;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --on-fill:#FFFFFF;
  --shadow:0 1px 2px rgba(14,26,30,.07), 0 10px 24px -18px rgba(14,26,30,.5);
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#E9EEEC; --ink-2:#AEBEBC; --ink-3:#7E9092;
    --paper:#0A1214; --surface:#111E21; --surface-2:#18272B;
    --line:#25373B; --line-strong:#3A4F54;
    --teal:#5FB5B8; --teal-2:#7FCBCC; --teal-soft:#122E31;
    --amber:#E0A93F; --amber-soft:#2B2213;
    --ok:#6BC79A; --ok-soft:#12241C;
    --warn:#DFAF5A; --warn-soft:#2A2213;
    --crit:#E68A80; --crit-soft:#2E1815;
    --water:#2B4B51; --grease:#C8912F; --sludge:#5C4C39;
    --on-fill:#06181B;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -18px #000;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-text-size-adjust:100%}
a{color:var(--teal)}

/* ---------------------------------------------------------- chrome */
header.top{background:var(--teal);color:var(--on-fill);padding:calc(14px + env(safe-area-inset-top)) 14px 0}
header.top .in{max-width:640px;margin:0 auto}
body.wide header.top .in{max-width:1040px}
.brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.82}
h1{margin:3px 0 10px;font-size:25px;line-height:1.1;letter-spacing:-.01em;font-weight:700}
.tabs{display:flex;gap:6px}
.tabs a{flex:1;background:rgba(255,255,255,.16);color:var(--on-fill);font-size:14px;font-weight:600;text-decoration:none;
  padding:12px 8px;border-radius:10px 10px 0 0;text-align:center}
.tabs a.on{background:var(--paper);color:var(--teal)}
@media (hover:hover){
  .tabs a:hover{background:rgba(255,255,255,.28)}
  .tabs a.on:hover{background:var(--paper);color:var(--teal)}
}
.wrap{max-width:640px;margin:0 auto;padding:0 14px 120px}
body.wide .wrap{max-width:1040px}
.foot{border-top:1px solid var(--line);background:var(--surface);padding:14px;font-size:13px;color:var(--ink-3)}
.foot .in{max-width:640px;margin:0 auto}
body.wide .foot .in{max-width:1040px}

/* ---------------------------------------------------------- blocks */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px;margin-top:14px;
  box-shadow:var(--shadow)}
h2{margin:0 0 3px;font-size:19px;line-height:1.2;font-weight:700}
.hint{margin:0 0 12px;font-size:13px;color:var(--ink-3);line-height:1.5}
.small{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.45}
.field{margin-top:16px}
.field.first{margin-top:0}
.lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:7px}
.backlink{margin:18px 0 0;font-size:14px}

/* ---------------------------------------------------------- what's due */
.streak{margin-top:14px;background:var(--ok-soft);border:1px solid var(--ok);color:var(--ok);border-radius:12px;
  padding:12px 14px;display:flex;align-items:baseline;gap:10px;font-size:13.5px;line-height:1.4}
.streak strong{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.board{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
@media (min-width:560px){ .board{grid-template-columns:1fr 1fr} }
.trap{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  box-shadow:var(--shadow);text-decoration:none;color:inherit}
.trap.overdue{box-shadow:inset 4px 0 0 var(--crit),var(--shadow);border-color:var(--crit)}
.trap.due{box-shadow:inset 4px 0 0 var(--warn),var(--shadow)}
.trap.soon{box-shadow:inset 4px 0 0 var(--amber),var(--shadow)}
.trap.ok{box-shadow:inset 4px 0 0 var(--ok),var(--shadow)}
.trap.none{opacity:.72}
.trap .code{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--teal);font-weight:600}
.trap h3{margin:1px 0 8px;font-size:20px;line-height:1.1;font-weight:700}
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;font-weight:700;margin-bottom:8px}
.chip.overdue{background:var(--crit-soft);color:var(--crit)}
.chip.due{background:var(--warn-soft);color:var(--warn)}
.chip.soon{background:var(--amber-soft);color:var(--amber)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.none{background:var(--surface-2);color:var(--ink-3)}
.kv{display:flex;justify-content:space-between;gap:8px;margin:0;padding-top:5px;border-top:1px dotted var(--line);
  font-size:12.5px;color:var(--ink-2)}
.kv dt{margin:0}
.kv dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.kv dd.warn{color:var(--crit);font-weight:700}
.go{display:block;margin-top:10px;font-size:13px;font-weight:600;color:var(--teal)}
.fab{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:20;
  background:var(--teal);color:var(--on-fill);text-align:center;text-decoration:none;font-weight:700;font-size:17px;
  padding:16px;border-radius:12px;box-shadow:0 8px 24px -10px rgba(0,0,0,.5);max-width:612px;margin:0 auto}

.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list a{display:flex;gap:11px;align-items:baseline;padding:11px 0;text-decoration:none;color:inherit;font-size:13.5px}
.list .when{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;min-width:44px}
.list strong{display:block;font-size:14px}
.list.plain li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14.5px}

/* ---------------------------------------------------------- inputs */
.choices{display:flex;flex-direction:column;gap:8px}
.choices.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:11px;padding:13px 10px;
  min-height:56px;cursor:pointer;display:block;width:100%;text-align:center;line-height:1.2}
.opt.wide{text-align:left;padding:12px 14px}
.opt small{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-3);
  letter-spacing:.02em;margin-top:3px;line-height:1.35}
.opt[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-fill)}
.opt[aria-pressed="true"] small{color:var(--on-fill);opacity:.8}
.opt.yes[aria-pressed="true"]{background:var(--ok);border-color:var(--ok)}
.opt.no[aria-pressed="true"]{background:var(--crit);border-color:var(--crit)}
.opt:focus-visible,.chip-btn:focus-visible,.send:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-btn{-webkit-appearance:none;appearance:none;font-family:var(--mono);font-size:16px;font-weight:600;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--line-strong);border-radius:10px;
  min-width:54px;min-height:50px;padding:0 10px;cursor:pointer;font-variant-numeric:tabular-nums}
.chip-btn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:var(--on-fill)}

input[type="text"],input[type="password"],input[type="number"],input[type="email"],
textarea,select{
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:11px;padding:12px;width:100%;
  -webkit-appearance:none;appearance:none}
/* a select with appearance:none loses its arrow, so draw one back on */
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) calc(50% + 2px),calc(100% - 12px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
input.pin{font-family:var(--mono);font-size:26px;letter-spacing:.3em;text-align:center}
input.mini{width:90px;padding:8px;font-family:var(--mono)}
textarea{resize:vertical}
.hidden-file{position:absolute;width:1px;height:1px;opacity:0;left:-9999px}

.send{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:17px;font-weight:700;color:var(--on-fill);
  background:var(--teal);border:0;border-radius:12px;padding:16px 18px;cursor:pointer;width:100%;margin-top:6px}
.send:active{background:var(--teal-2)}
.send[disabled]{opacity:.55}
.send.small{width:auto;font-size:15px;padding:12px 18px;margin:0}
.btn{display:inline-block;font-size:14px;font-weight:600;color:var(--teal);background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:9px;padding:10px 14px;text-decoration:none;margin-right:8px}
.link{background:none;border:0;color:var(--crit);font-family:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;padding:0}
.inline{display:inline}
.row-form{display:flex;gap:8px;margin-top:12px}
.row-form input{flex:1}
/* A submit button that reads as a link — used where an action sits inside a
   sentence, like "the wells are next due on X. Use that day". */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--teal);
  font-weight:700;text-decoration:underline;cursor:pointer}
.linkbtn:hover{text-decoration:none}
.sendbar{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));z-index:20}
.sendbar .in{max-width:640px;margin:0 auto}

/* ---------------------------------------------------------- verdict */
.verdict{margin-top:14px;display:grid;grid-template-columns:100px 1fr;gap:14px;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.verdict.ok{border-color:var(--ok)}
.verdict.over{border-color:var(--crit);background:var(--crit-soft)}
.verdict .big{font-size:20px;font-weight:700;line-height:1.15}
.verdict.ok .big{color:var(--ok)}
.verdict.over .big{color:var(--crit)}
.verdict p{margin:5px 0 0;font-size:13px;color:var(--ink-2);line-height:1.45}

/* ---------------------------------------------------------- photos */
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slot{position:relative;display:block;border:2px dashed var(--line-strong);border-radius:12px;
  background:var(--surface-2);height:150px;cursor:pointer;overflow:hidden;text-align:center}
.slot .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:10px}
.slot.filled{border-style:solid;border-color:var(--ok)}
.slot.busy{opacity:.5}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700}
.slot .cam{font-size:24px;line-height:1}
.slot .note{font-size:12px;color:var(--ink-3)}
.slot .ribbon{position:absolute;left:0;right:0;bottom:0;background:rgba(10,18,20,.75);color:#fff;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;
  display:flex;justify-content:space-between;align-items:center}
.ribbon .rm{background:none;border:0;color:#fff;font-family:inherit;font-size:10.5px;text-decoration:underline;
  cursor:pointer;padding:0}
.shot{margin:0}
.shot img{width:100%;border-radius:11px;border:1px solid var(--line);display:block}
.shot figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:5px;letter-spacing:.06em;
  text-transform:uppercase}

/* ---------------------------------------------------------- flags */
.flag{margin-top:12px;border-radius:11px;padding:12px 13px;font-size:13.5px;line-height:1.5;display:none}
.flag.show{display:block}
.flag.bad{background:var(--crit-soft);color:var(--crit);border:1px solid var(--crit)}
.flag.warn{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.flag.good{background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}

/* ---------------------------------------------------------- tables */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:600px}
th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
tr.flag-row td{background:var(--crit-soft)}
tr.dim td,.dim{color:var(--ink-3)}
.good{color:var(--ok);font-weight:600}
/* A small dense table for diagnostics — the mail log in Admin. */
table.mini{width:100%;border-collapse:collapse;margin:8px 0 0;font-size:14px}
table.mini th{text-align:left;font:600 11px/1.3 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line);
  padding:0 8px 5px 0}
table.mini td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line);
  vertical-align:top;word-break:break-word}
.bad{color:var(--crit);font-weight:700}

.detail{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0;font-size:14px}
.detail dt{color:var(--ink-3);font-size:12.5px}
.detail dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- dashboard */
.monthbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:15px}
.mbtn{font-size:13px;font-weight:600;text-decoration:none;color:var(--teal);background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.mbtn.off{visibility:hidden}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}
@media (min-width:620px){ .tiles{grid-template-columns:repeat(4,1fr)} }
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;
  box-shadow:var(--shadow)}
.tile.bad{border-color:var(--crit)}
.tile .n{display:block;font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tile.bad .n{color:var(--crit)}
.tile .l{display:block;margin-top:5px;font-size:12px;color:var(--ink-3);line-height:1.35}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------- rev 2: tasks, schedule grid */
:root{
  --t-skim:#9FC5E8; --t-full:#CC99FF; --t-check:#FFE84D; --t-wash:#FF7A73;
}
@media (prefers-color-scheme: dark){
  :root{ --t-skim:#2F5C7A; --t-full:#4B3568; --t-check:#6E6017; --t-wash:#6E2A26; }
}
.streak.ok-all{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.kv.task-overdue dd .bad{font-weight:700}
.kv dd .warnx{color:var(--warn);font-weight:700}
.kv dd .dim{color:var(--ink-3)}
.opt.st-overdue{border-color:var(--crit)}
.opt.st-due{border-color:var(--warn)}
.opt .due{display:inline-block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;margin-left:7px;padding:2px 6px;border-radius:4px;background:var(--surface-2)}
.opt .due.bad{background:var(--crit-soft);color:var(--crit)}
.opt .due.warnx{background:var(--warn-soft);color:var(--warn)}
.opt[aria-pressed="true"] .due{background:rgba(255,255,255,.22);color:#fff}

.keygrid{display:flex;flex-direction:column;gap:7px}
.keyrow{display:grid;grid-template-columns:20px 96px 1fr 150px;gap:10px;align-items:center;font-size:13px}
@media (max-width:640px){
  .keyrow{grid-template-columns:20px auto 1fr;gap:1px 8px;align-items:start}
  .keyrow .sw{grid-row:1/span 2;margin-top:2px}
  .keyrow .ktask{grid-column:2/span 2;grid-row:1;font-weight:600}
  .keyrow .kname{grid-column:2;grid-row:2}
  .keyrow .kwhen{grid-column:3;grid-row:2}
}
.keyrow .sw{width:20px;height:16px;border-radius:3px;border:1px solid var(--line-strong)}
.sw-skim{background:var(--t-skim)} .sw-full{background:var(--t-full)}
.sw-check{background:var(--t-check)} .sw-wash{background:var(--t-wash)}
.kname{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.kwhen{font-size:12px;color:var(--ink-3)}

.gridwrap{margin-top:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table.grid{border-collapse:separate;border-spacing:0;min-width:900px;font-size:12px}
table.grid th,table.grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
table.grid thead th{background:var(--teal);color:var(--on-fill);font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-align:center;padding:5px 3px;white-space:nowrap;border-color:rgba(255,255,255,.18)}
table.grid th.mon{font-size:9.5px;letter-spacing:.09em}
table.grid th.day{font-size:11px;font-weight:700;min-width:26px}
table.grid th.day.today{background:var(--amber);color:#2b1c00}
table.grid th.stick,table.grid td.stick2{position:sticky;left:0;z-index:2;background:var(--surface);
  text-align:left;padding:6px 9px;font-size:12px;white-space:nowrap}
table.grid thead th.stick{background:var(--teal);z-index:3}
table.grid th.stick{font-weight:700;min-width:120px;vertical-align:middle;
  box-shadow:1px 0 0 var(--line)}
table.grid tbody th.stick{background:var(--surface-2)}
table.grid td.stick2{left:120px;z-index:2;color:var(--ink-2);min-width:98px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.04em;text-transform:uppercase;box-shadow:1px 0 0 var(--line)}
table.grid thead th:nth-child(2){left:120px;position:sticky;z-index:3}
table.grid td.stick2 .sm{display:none}
@media (max-width:640px){
  table.grid th.stick{min-width:92px;padding:6px;font-size:11px;white-space:normal;line-height:1.2}
  table.grid td.stick2{left:92px;min-width:46px;padding:6px;font-size:10px;letter-spacing:.02em}
  table.grid td.stick2 .lg{display:none}
  table.grid td.stick2 .sm{display:inline}
  table.grid thead th:nth-child(2){left:92px}
}
table.grid td{height:26px;text-align:center}
table.grid td.blank{background:transparent}
table.grid td.na{background:var(--surface-2)}
table.grid td.c-skim{background:var(--t-skim)} table.grid td.c-full{background:var(--t-full)}
table.grid td.c-check{background:var(--t-check)} table.grid td.c-wash{background:var(--t-wash)}
table.grid td.done{box-shadow:inset 0 0 0 2px var(--ok)}
table.grid td.done a{display:block;color:var(--ok);font-weight:800;text-decoration:none;font-size:14px;line-height:26px}
table.grid td.late{box-shadow:inset 0 0 0 2px var(--crit)}
table.grid td.tot,table.grid th.tot{background:var(--surface-2);font-family:var(--mono);font-weight:700;
  min-width:34px;color:var(--ink)}
table.grid thead th.tot{background:var(--teal)}

/* ---------------------------------------------------------- practice mode */
.practicebar{background:var(--warn);color:#1E1403;position:sticky;top:0;z-index:30;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.45)}
.practicebar .in{max-width:640px;margin:0 auto;padding:10px 14px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;font-size:13px;line-height:1.4}
body.wide .practicebar .in{max-width:1040px}
.practicebar .ptext{flex:1 1 200px}
.practicebar strong{font-weight:700}
.pdot{width:9px;height:9px;border-radius:50%;background:#1E1403;flex:0 0 auto;
  animation:ppulse 2.2s ease-in-out infinite}
@keyframes ppulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .pdot{animation:none} }
.pbtn{flex:0 0 auto;background:#1E1403;color:#fff;text-decoration:none;font-weight:700;font-size:12.5px;
  padding:7px 12px;border-radius:8px;white-space:nowrap}
.pbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}

.rules{list-style:none;margin:14px 0 18px;padding:0}
.rules li{padding:11px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.rules li:first-child{border-top:0}
.rules strong{color:var(--ink)}

.send.danger{background:var(--crit)}

/* ---------------------------------------------------------- header utility row */
.toprow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toprow .brand{flex:1 1 auto;min-width:0}
.topnav{display:flex;align-items:center;gap:6px 8px;flex:1 1 auto;justify-content:flex-end;
  flex-wrap:wrap;font-size:12.5px;padding-top:1px;white-space:nowrap}
/* Each one is a chip: it lifts under the pointer and stays lit on the page you
   are on, so the header answers "where am I" without anyone having to read it. */
.topnav a{color:var(--on-fill);text-decoration:none;font-weight:600;opacity:.92;
  padding:5px 10px;border-radius:999px;border:1px solid transparent;line-height:1.2;
  transition:background-color .12s ease, color .12s ease}
@media (hover:hover){
  .topnav a:hover{opacity:1;background:rgba(255,255,255,.2)}
}
.topnav a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.topnav a.on,.topnav a[aria-current="page"]{
  background:var(--paper);color:var(--teal);opacity:1;font-weight:700}
@media (hover:hover){
  .topnav a.on:hover,.topnav a[aria-current="page"]:hover{background:var(--paper);color:var(--teal)}
}
.twho{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-fill);opacity:.72}
/* the chips are wider than the old plain links, so on a phone they wrap onto a
   second row instead of running off the right-hand edge */
@media (max-width:560px){
  .topnav{gap:5px 6px;font-size:12px}
  .topnav a{padding:4px 8px}
  .topnav .tpill{padding:4px 9px}
}
@media (max-width:420px){ .twho{display:none} }

/* the floating "Log a task" button is gone — the tab at the top does that job,
   and the fixed one covered Sign out. Just enough room to breathe at the end. */
.wrap{padding-bottom:40px}

/* "Practice" reads as an action, not another link */
.topnav .tpill{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);
  font-weight:700;letter-spacing:.02em}
@media (prefers-color-scheme: dark){
  .topnav .tpill{background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.3)}
}
/* hover:hover keeps the highlight off touch screens, where it would stick
   after a tap and look like the wrong page was selected */
@media (prefers-color-scheme: dark) and (hover:hover){
  .topnav a:hover{background:rgba(0,0,0,.18)}
  .tabs a:hover{background:rgba(0,0,0,.14)}
}

/* ---------------------------------------------------------- SOP */
.method{margin-top:14px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);
  padding:0 13px}
.method[open]{padding-bottom:12px}
.method summary{cursor:pointer;padding:12px 0;font-size:14px;font-weight:600;color:var(--teal);
  list-style:none}
.method summary::-webkit-details-marker{display:none}
.method summary::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;
  border-radius:50%;background:var(--teal);color:var(--on-fill);font-size:12px;font-weight:700;
  margin-right:9px;vertical-align:-3px}
.method[open] summary::before{content:"\00d7"}
.method summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
ol.steps li{font-size:14.5px;line-height:1.5;color:var(--ink-2);padding-left:2px}
ol.steps li::marker{color:var(--teal);font-weight:700;font-size:13px}

.rules .bigrules{list-style:none;margin:10px 0 0;padding:0;counter-reset:r;
  display:flex;flex-direction:column;gap:14px}
.rules .bigrules li{counter-increment:r;position:relative;padding-left:38px;font-size:14.5px;
  line-height:1.55;color:var(--ink-2)}
.rules .bigrules li::before{content:counter(r);position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;background:var(--teal);color:var(--on-fill);
  display:grid;place-items:center;font-weight:700;font-size:14px}
.rules .bigrules strong{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}

ul.plainlist{list-style:none;margin:8px 0 0;padding:0}
ul.plainlist li{padding:10px 0 10px 20px;border-top:1px solid var(--line);font-size:14.5px;
  line-height:1.5;color:var(--ink-2);position:relative}
ul.plainlist li:first-child{border-top:0}
ul.plainlist li::before{content:"";position:absolute;left:4px;top:19px;width:5px;height:5px;
  border-radius:50%;background:var(--line-strong)}
ul.plainlist.bad li::before{background:var(--crit)}
ul.plainlist strong{color:var(--ink)}

.sopkey{display:flex;align-items:center;gap:9px;margin-bottom:6px;flex-wrap:wrap}
.sopkey .sw{width:22px;height:14px;border-radius:3px;border:1px solid var(--line-strong);flex:0 0 auto}

/* ---------------------------------------------------------- assignments */
/* "Yours" — the first thing a crew member should see on the board */
.card.yours{border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal),var(--shadow)}
.card.yours h2{color:var(--teal)}
.card.yours .list .when{min-width:40px;font-weight:700;color:var(--ink-2)}
.card.yours .list .when.bad{color:var(--crit)}
.card.yours .list .when.warnx{color:var(--warn)}
.card.yours .due{display:inline-block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;margin-left:7px;padding:2px 6px;border-radius:4px}
.card.yours .due.bad{background:var(--crit-soft);color:var(--crit)}
.card.yours .due.warnx{background:var(--warn-soft);color:var(--warn)}

.fillrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.fillrow select{flex:1 1 170px;min-width:0}
@media (max-width:520px){ .fillrow .send.small{width:100%} }

.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;
  color:var(--ink-2);cursor:pointer}
.checkrow input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0}
.checkrow strong{color:var(--ink)}

/* ------------------------------------------------- assignments: the day list */
.card.day h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card.day .daycount{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.card.day.needs{box-shadow:inset 3px 0 0 var(--warn),var(--shadow)}

.dayfill{margin:0 0 4px}
.fillrow .btn{flex:0 0 auto;padding:12px 14px}
.fillrow .btn.did{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}

ul.slots{list-style:none;margin:10px 0 0;padding:0}
ul.slots li{display:flex;align-items:center;gap:11px;padding:9px 0;
  border-top:1px solid var(--line)}
ul.slots li:first-child{border-top:0}
ul.slots .sw{width:14px;height:22px;border-radius:3px;border:1px solid var(--line-strong);
  flex:0 0 auto}
ul.slots .what{flex:1 1 auto;min-width:0;line-height:1.3}
ul.slots .what strong{display:block;font-size:14.5px}
ul.slots .what em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
ul.slots select{flex:0 0 auto;width:auto;min-width:148px;max-width:48%;font-size:14px;padding:10px 32px 10px 11px}
@media (max-width:520px){
  ul.slots li{flex-wrap:wrap}
  ul.slots select{width:100%;max-width:none;margin-left:25px;flex:1 1 100%}
  .fillrow .btn{width:100%}
}

/* the people table: name, role, address, remove */
.row-form select{flex:0 0 auto;width:auto;min-width:130px}

/* "Master user" badge in the header — it is a label, not a link */
.trole{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--teal);background:var(--paper);border-radius:999px;
  padding:4px 9px;flex:0 0 auto}
.choices.one{display:block}
.choices.one .opt{width:100%}

/* ---------------------------------------------------------- monthly report */
.report{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px;margin-top:14px;box-shadow:var(--shadow)}
.rhead{border-bottom:2px solid var(--teal);padding-bottom:14px;margin-bottom:18px}
.rkicker{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal)}
.report h2{margin:6px 0 4px;font-size:22px;line-height:1.2}
.rsub{margin:0;font-size:13px;color:var(--ink-3)}
.report h3{margin:26px 0 10px;font-size:15px;letter-spacing:.01em}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.tiles .tile{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px}
.tiles .tile strong{display:block;font-size:24px;line-height:1.1;color:var(--teal)}
.tiles .tile .l{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3);line-height:1.3}
.tiles .tile.bad{background:var(--crit-soft);border-color:var(--crit)}
.tiles .tile.bad strong{color:var(--crit)}
@media (max-width:640px){ .tiles{grid-template-columns:repeat(2,1fr)} }

.caveat{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:var(--ink-2);
  background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:0 8px 8px 0;
  padding:10px 12px}

table.rtab{width:100%;border-collapse:collapse;font-size:13px}
table.rtab th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-strong);
  padding:0 8px 7px 0}
table.rtab td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.rtab .num{text-align:right;font-family:var(--mono);padding-right:0}
table.rtab tr.tot td{font-weight:700;border-bottom:0;border-top:2px solid var(--line-strong)}
table.rtab tr.warnrow td{color:var(--crit)}

.rec{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;
  background:var(--surface)}
.rec.flagged{border-color:var(--crit);box-shadow:inset 3px 0 0 var(--crit)}
.rtop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.rtop strong{font-size:14.5px}
.rtask{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
.rwhen{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.rdue{display:inline-block;margin-left:6px;opacity:.8}

.rfacts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px 14px;
  margin:12px 0 0}
.rfacts div{min-width:0}
.rfacts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)}
.rfacts dd{margin:1px 0 0;font-size:13.5px;font-weight:600}
.rfacts dd.no{color:var(--crit)}
.rfacts dd .dim{font-weight:400;color:var(--ink-3)}
.rfacts .swap{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.07em;
  text-transform:uppercase;background:var(--warn-soft);color:var(--warn);
  padding:2px 5px;border-radius:4px;margin-left:5px}
.rnote{margin:11px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);
  border-left:3px solid var(--line-strong);padding-left:10px}

.rshots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.rshots figure{margin:0}
.rshots img{width:100%;height:190px;object-fit:contain;border-radius:9px;
  border:1px solid var(--line);display:block;background:var(--surface-2)}
.rshots .noshot{height:190px;border-radius:9px;border:1px dashed var(--line-strong);
  display:grid;place-items:center;font-size:11.5px;color:var(--ink-3);background:var(--surface-2)}
.rshots figcaption{margin-top:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.rid{margin:10px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
.rfoot{margin-top:24px;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3)}

/* ---- printing: the report and nothing else, in ink-friendly black on white */
@media print{
  @page{margin:14mm}
  header.top,.tabs,.practicebar,.noprint,.monthbar{display:none!important}
  body{background:#fff;color:#000}
  .wrap{padding:0!important;max-width:none!important}
  .report{border:0;border-radius:0;padding:0;margin:0;box-shadow:none;background:#fff}
  .rec{break-inside:avoid;page-break-inside:avoid}
  table.rtab{break-inside:auto}
  table.rtab tr{break-inside:avoid;page-break-inside:avoid}
  .report h3{break-after:avoid;page-break-after:avoid}
  /* tighter on paper: three services to a page instead of two */
  .rec{padding:10px;margin-top:8px}
  .rfacts{gap:5px 12px;margin-top:8px}
  .rshots{gap:8px;margin-top:9px}
  .rshots img,.rshots .noshot{height:108px}
  .rid{margin-top:7px}
  .report h3{margin:18px 0 8px}
  .tiles .tile{background:#fff;border-color:#999}
}

/* a practice report must never be mistaken for a real one, on screen or on paper */
.report.sample{border-color:var(--warn);box-shadow:inset 0 0 0 2px var(--warn-soft),var(--shadow)}
.samplebar{margin:0 0 16px;padding:11px 13px;border-radius:9px;background:var(--warn-soft);
  border-left:4px solid var(--warn);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.samplebar strong{color:var(--ink)}
.report.sample .rhead{border-bottom-color:var(--warn)}
.report.sample h2{color:var(--warn)}
@media print{
  .report.sample{border:2px solid #000;padding:10mm;box-shadow:none}
  .samplebar{background:#fff;border:1px solid #000;border-left-width:4px}
  .report.sample h2{color:#000}
  /* repeated down the page, so a loose sheet still says what it is */
  .report.sample .rec::after{content:"PRACTICE SAMPLE — not a real record";
    display:block;margin-top:6px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
    color:#666}
}

/* pump-out picker: tick what the truck is being asked to do */
.pickhead{margin:18px 0 6px;font-size:13px;font-family:var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3)}
ul.picks{list-style:none;margin:0;padding:0}
ul.picks li{border-top:1px solid var(--line)}
ul.picks li:first-child{border-top:0}
ul.picks label{display:flex;align-items:center;gap:11px;padding:9px 0;cursor:pointer}
ul.picks input[type="checkbox"]{width:20px;height:20px;flex:0 0 auto;margin:0}
ul.picks .sw{width:14px;height:22px;border-radius:3px;border:1px solid var(--line-strong);flex:0 0 auto}
ul.picks .sw.none{background:transparent;border-style:dashed}
ul.picks .what{min-width:0;line-height:1.3}
ul.picks .what strong{display:block;font-size:14.5px}
ul.picks .what em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}

/* --------------------------------------------------- the design credit ----
   Sits under the content, never fixed: the "Log a task" button owns the
   bottom of the screen on a phone, and anything pinned down there ends up
   underneath it. Quiet by intent — it is a credit, not a call to action. */
.sitefoot{padding:26px 16px 34px;margin-top:10px}
/* Log a task keeps a fixed Save bar pinned to the bottom of the screen, which
   would otherwise sit straight on top of this. Clear it on those pages only,
   rather than padding every page for a bar that is usually not there. */
body:has(.sendbar) .sitefoot{padding-bottom:104px}
.sitefoot .in{max-width:640px;margin:0 auto;text-align:center}
body.wide .sitefoot .in{max-width:1040px}

.ld-credit{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  justify-content:center;text-decoration:none;opacity:.62;
  transition:opacity .15s ease}
.ld-credit span{font-size:11.5px;letter-spacing:.02em;color:var(--ink-3)}
.ld-credit img{height:26px;width:auto;display:block}
@media (hover:hover){ .ld-credit:hover{opacity:1} }

/* One mark for a light page, one for a dark one — the navy wordmark
   disappears on a dark background, and the white one on a light background. */
.ld-credit .ld-dark{display:none}
@media (prefers-color-scheme: dark){
  .ld-credit .ld-light{display:none}
  .ld-credit .ld-dark{display:block}
}

@media (max-width:420px){
  .ld-credit img{height:22px}
}

@media print{ .sitefoot{display:none} }