/* Roadworthy — the drivers' hours checker's week timeline. Builds on legal.css + guide.css, with the MOT page as
   its pattern, and John's approved mock-up as the look. A new name, not hours.css, so a phone on a failing signal
   can never run the new page against the old form's stylesheet out of its offline copy.
   Inputs are 16px or larger, because iPhones zoom the page into anything smaller. */

.hours{--h-drive:#28497e;--h-break:#f5a300;--h-track:#e9eff8;--h-stop:#c1121f;
  --h-over-bg:#fde8e8;--h-over-line:#f2b8b8;--h-over-ink:#8f1218;
  --h-fix-bg:#fff4d6;--h-fix-line:#f0d488;--h-fix-ink:#6b4e00;}
:root[data-theme="dark"] .hours{--h-drive:#6f9be0;--h-break:#ffc233;--h-track:#20304c;--h-stop:#f0555f;
  --h-over-bg:#3a1414;--h-over-line:#5c2020;--h-over-ink:#ff9a9a;
  --h-fix-bg:#33280c;--h-fix-line:#5c4a12;--h-fix-ink:#ffd98a;}

.hcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:0 0 16px;box-shadow:0 2px 10px rgba(31,56,100,.07);}
.hcard h2{margin:0 0 10px;border:none;padding:0;font-size:17px;}
.hcard[hidden],.hfield[hidden],#assimilated-only[hidden],#after[hidden],#totals[hidden]{display:none;}
.hint{margin:0 0 12px;font-size:14px;color:var(--muted);}

/* ---- the set-up fold-out ---- */
.hsetup{margin:0 0 16px;}
.hsetup > summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;cursor:pointer;list-style:none;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;font-size:14.5px;}
.hsetup > summary::-webkit-details-marker{display:none;}
.hsetup > summary::after{content:"Change";margin-left:auto;padding-left:6px;font-weight:700;color:var(--muted);}
.hsetup[open] > summary{margin-bottom:12px;}
.hsetup[open] > summary::after{content:"Close";}

/* ---- which rules ---- */
.hchoice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;margin:0 0 8px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);}
.hchoice:has(input:checked){border-color:var(--amber-2);box-shadow:inset 0 0 0 1px var(--amber-2);}
.hchoice input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy-2);}
:root[data-theme="dark"] .hchoice input{accent-color:var(--amber);}
.hchoice b{display:block;font-size:15.5px;}
.hchoice small{display:block;font-size:13.5px;color:var(--muted);line-height:1.4;}

/* ---- boxes ---- */
.hours input[type="number"],.hours input[type="time"],.hours input[type="date"],.hours select,.hours textarea{font:inherit;font-size:16px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;min-height:44px;}
.hours input[type="number"]{width:62px;padding:8px 4px;text-align:center;-moz-appearance:textfield;appearance:textfield;}
.hours input[type="number"]::-webkit-outer-spin-button,.hours input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
:root[data-theme="dark"] .hours input[type="time"],:root[data-theme="dark"] .hours input[type="date"]{color-scheme:dark;}
.hours input[readonly]{background:var(--surface-2);color:var(--muted);}
.hfield{display:block;margin:0 0 12px;}
.hfield > span{display:block;font-size:14px;font-weight:600;margin-bottom:4px;}
.hfield select,.hfield input[type="date"]{width:100%;}
.hdur{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);}

/* ---- the reference period's weeks ---- */
.hweeks[hidden]{display:none;}
.hweeks summary{cursor:pointer;font-size:14.5px;font-weight:700;padding:10px 0;min-height:44px;box-sizing:border-box;}
.hweek{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;
  padding:8px 0;border-top:1px solid var(--line);}
.hname{font-size:14.5px;font-weight:600;}

/* ---- the timeline ---- */
.hwkhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px 10px;flex-wrap:wrap;margin-bottom:8px;}
.hwkhead h2{margin:0;}
.hlegend{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted);}
.hlegend i{display:inline-block;width:14px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px;}
.hwk{display:flex;flex-direction:column;gap:6px;}
.haxis,.hdrow{display:grid;grid-template-columns:42px 1fr 58px;gap:8px;align-items:center;}
.hscale{position:relative;height:16px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;}
.hscale span{position:absolute;top:0;transform:translateX(-50%);line-height:16px;}
.hscale span:first-child{transform:none;}
.hscale span:last-child{transform:translateX(-100%);}
.hdrow{width:100%;font:inherit;color:var(--ink);cursor:pointer;text-align:left;background:transparent;border:1px solid transparent;border-radius:10px;padding:3px 4px;min-height:44px;}
.hdrow[aria-pressed="true"]{background:var(--surface-2);border-color:var(--line-2);box-shadow:inset 3px 0 0 var(--amber-2);}
.hdname{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:5px;}
.hdot{width:9px;height:9px;border-radius:50%;flex:none;}
.hdot.over{background:var(--h-stop);}
.hdot.wait{background:var(--amber-2);}
.hbar{position:relative;display:block;height:30px;border-radius:6px;background-color:var(--h-track);
  background-image:linear-gradient(to right,var(--line-2) 1px,transparent 1px);background-size:25% 100%;border:1px solid var(--line);}
.hblk{position:absolute;top:3px;bottom:3px;border-radius:4px;min-width:2px;}
.hblk.drive,.hsw.drive{background:var(--h-drive);}
.hblk.break,.hsw.break{background:var(--h-break);}
.hblk.work,.hsw.work{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 6px);border:1.5px solid var(--muted);}
.hblk.poa,.hsw.poa{background:transparent;border:1.5px dashed var(--ink);}
.hblk.bad{outline:2px solid var(--h-stop);outline-offset:1px;z-index:2;}
.hblk.bad::after{content:"!";position:absolute;top:-9px;left:-5px;width:15px;height:15px;border-radius:50%;
  background:var(--h-stop);color:#fff;font-size:11px;font-weight:800;line-height:15px;text-align:center;}
:root[data-theme="dark"] .hblk.bad::after{color:#14264a;}
.hdsum{text-align:right;white-space:nowrap;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);}
.htotals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.htot small{display:block;color:var(--muted);font-size:12.5px;}
.htot small.hof{display:inline;}
.htot b{font-size:17px;font-variant-numeric:tabular-nums;}
.hmeter{height:6px;border-radius:3px;background:var(--h-track);margin-top:5px;overflow:hidden;}
.hmeter i{display:block;height:100%;background:var(--navy-2);}
:root[data-theme="dark"] .hmeter i{background:var(--amber-ink);}

/* ---- the day builder ---- */
#editor{scroll-margin-top:84px;}
.hedhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.hedhead h2{flex:1;text-align:center;margin:0;}
.hsq{width:44px;height:44px;font:inherit;font-size:20px;line-height:1;cursor:pointer;color:var(--ink);border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);}
.hsq:disabled{opacity:.4;cursor:default;}
.htail{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 10px;margin:0 0 10px;font-size:14px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);}
.hshift{padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid var(--line);}
.hshead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.hshead h3{margin:0;font-size:15.5px;}
.hstart{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-end;margin-bottom:8px;}
.hstart .hfield{margin:0;}
.hstart input[type="time"]{width:130px;}
.hrest{flex:1 1 180px;margin:0;padding:6px 10px;font-size:13.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2);}
.hrest[hidden]{display:none;}
.hsteps{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.hstep{display:grid;grid-template-columns:6px 1fr auto;gap:10px;align-items:center;margin:0;padding:6px 6px 6px 0;
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);overflow:hidden;}
.hstep > .hsw{align-self:stretch;}
.hstep.bad{border-color:var(--h-over-line);background:var(--h-over-bg);}
.hnm{font-weight:700;font-size:15px;min-width:0;}
.hwhen{display:block;font-weight:400;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.hstep.bad .hwhen{color:var(--h-over-ink);}
.hctl{display:flex;align-items:center;gap:4px;}
.hmini{width:44px;height:44px;font:inherit;font-size:16px;line-height:1;cursor:pointer;color:var(--muted);background:transparent;border:0;border-radius:10px;}
.hmini:disabled{opacity:.35;cursor:default;}
.hempty{text-align:center;margin:10px 0;color:var(--muted);font-size:14.5px;}
.hadds{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px;}
.hadd{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;color:var(--ink);
  border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);}
.hadd .hsw{width:14px;height:14px;border-radius:3px;display:inline-block;}
.hdist{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);}
.hdisthead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.hdisthead b{font-size:14.5px;}
.hdisthead small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);}
.hseg{display:inline-flex;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--surface);}
.hseg button{font:inherit;font-weight:700;font-size:14.5px;min-height:44px;padding:0 18px;cursor:pointer;color:var(--muted);background:transparent;border:0;}
.hseg button[aria-pressed="true"]{background:var(--navy-2);color:#fff;}
:root[data-theme="dark"] .hseg button[aria-pressed="true"]{background:var(--amber-2);color:#14264a;}
.hodo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 14px;}
.hodo .hfield{flex:1 1 120px;min-width:0;margin:0;}
.hours .hodo input[type="number"]{width:100%;text-align:left;padding:8px 10px;}
.htiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:12px;}
.htile{min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);}
.htile small{display:block;color:var(--muted);font-size:12.5px;}
.htile b{display:block;font-size:19px;font-variant-numeric:tabular-nums;line-height:1.25;}
.htile em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;}
.htile.warn{background:var(--h-fix-bg);border-color:var(--h-fix-line);color:var(--h-fix-ink);}
.htile.warn small,.htile.warn em{color:inherit;}
.hnote{display:block;margin:0 0 12px;}
.hnote span{display:block;font-size:14px;font-weight:600;margin-bottom:4px;}
.hours .hnote textarea{display:block;width:100%;min-height:84px;padding:10px;resize:vertical;}

/* ---- buttons: press feedback and hover as on the rest of the site ---- */
.hbtn,.hmain{font:inherit;cursor:pointer;border-radius:10px;min-height:44px;}
.hbtn,.hmain,.hsq,.hadd,.hmini,.hfind{transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .15s;}
.hbtn:active,.hmain:active,.hsq:active:not(:disabled),.hadd:active,.hmini:active:not(:disabled),button.hfind:active{transform:scale(.97);}
.hbtn{font-size:14px;font-weight:700;padding:8px 12px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);}
.hbtn:disabled,.hmain:disabled{opacity:.45;cursor:default;}
.hquiet{background:transparent;border-color:transparent;color:var(--muted);font-weight:600;padding:8px 6px;}
.hmain{display:block;width:100%;margin:6px 0 10px;padding:14px 18px;font-size:17px;font-weight:800;
  background:var(--amber-2);color:#14264a;border:0;}
.hend{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:0 0 16px;}
#editor .hend{margin-bottom:12px;}
@media (hover:hover) and (pointer:fine){
  .hbtn:hover:not(:disabled),.hsq:hover:not(:disabled),.hadd:hover{border-color:var(--faint);}
  .hmini:hover:not(:disabled){color:var(--ink);}
  .hmain:hover:not(:disabled){background:var(--amber);}
  .hdrow:hover{background:var(--surface-2);}
}

/* ---- the answer: colour plus words, and each state set for both themes ---- */
#result{scroll-margin-top:84px;}
#result:empty{display:none;}
.hverdict{border-radius:14px;border:1px solid;padding:16px 18px;margin:0 0 16px;scroll-margin-top:84px;outline-offset:2px;}
.hverdict h2{margin:0;border:none;padding:0;font-size:20px;color:inherit;}
.hverdict p,.hverdict li{color:inherit;font-size:15px;}
.hverdict p{margin:8px 0 0;}
.hverdict ul{margin:10px 0 0;}
.hverdict a{color:inherit;}
:root[data-theme="dark"] .hverdict a{color:inherit;}
.hverdict.flash{animation:hflash .7s cubic-bezier(.23,1,.32,1);}
@keyframes hflash{from{box-shadow:0 0 0 4px var(--amber);}to{box-shadow:0 0 0 0 transparent;}}
.hcost{display:block;margin-top:2px;font-weight:700;}
/* ⚠️ Never green. "Nothing over" comes with a list of what was not checked, and green reads as a pass. */
.hverdict.clear{background:var(--surface);border-color:var(--line-2);border-left:4px solid var(--navy-2);color:var(--ink);}
.hverdict.over{background:#fde8e8;border-color:#f2b8b8;color:#8f1218;}
.hverdict.fix{background:#fff4d6;border-color:#f0d488;color:#6b4e00;}
:root[data-theme="dark"] .hverdict.clear{border-left-color:var(--amber-ink);}
:root[data-theme="dark"] .hverdict.over{background:#3a1414;border-color:#5c2020;color:#ff9a9a;}
:root[data-theme="dark"] .hverdict.fix{background:#33280c;border-color:#5c4a12;color:#ffd98a;}
.hverdict ul.hfinds{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.hfinds li{margin:0;}
.hfind{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;text-align:left;font:inherit;font-size:15px;color:inherit;
  background:rgba(255,255,255,.55);border:1px solid var(--h-over-line);border-radius:10px;padding:9px 12px;min-height:44px;}
button.hfind{cursor:pointer;}
:root[data-theme="dark"] .hfind{background:rgba(0,0,0,.22);}
.hfday{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding-top:2px;}
.hwhat{min-width:0;}
.hgo{font-size:20px;line-height:1;padding-top:1px;}
.huses{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.huse{font-size:13.5px;border:1px solid var(--h-fix-line);background:var(--h-fix-bg);color:var(--h-fix-ink);border-radius:8px;padding:4px 10px;}
.hverdict .hwaiting{font-size:14.5px;}
.hverdict .hbelow{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;}
#hours-not{scroll-margin-top:84px;}
.hsum .vtable{min-width:0;}
.hsum b{white-space:nowrap;}
.hnot li{font-size:14.5px;color:var(--muted);}

/* ---- installed on a phone: the page is the app, with the website's bar gone. Its links would not
   open offline anyway, and the install advice has done its job. ---- */
@media (display-mode:standalone){
  header.site,.crumbs,body > footer,.hkeep{display:none;}
}
@media (max-width:520px){
  .hweek .hname{width:100%;}
  .hstep{grid-template-columns:6px minmax(0,1fr);}
  .hstep > .hsw{grid-row:1 / span 2;}
  .hctl{grid-column:2;justify-content:space-between;flex-wrap:wrap;}
}
@media (max-width:460px){
  .haxis,.hdrow{grid-template-columns:46px 1fr 50px;gap:6px;}
  .hdsum{font-size:12px;}
  .hfind{grid-template-columns:1fr auto;}
  .hfday{grid-column:1 / -1;padding:0;}
  .hcard{padding:14px;}
}
@media (prefers-reduced-motion:reduce){
  .hverdict.flash{animation:none;}
  .hbtn,.hmain,.hsq,.hadd,.hmini,.hfind{transition:none;}
}