/* Driver Miles — its own look (deep green header, gauge logo), same habits as the other Journey apps.
   No inline styles (the security policy blocks them): sizes come from classes. */
:root{
  --selbg:#0d3b33;--selfg:#fff;
  --bg:#f3f6f5;--card:#fff;--text:#14211e;--muted:#56665f;--line:#dde5e2;--head:#edf3f1;
  --brand:#0d3b33;--brand2:#14574a;--accent:#0f7a66;--amberc:#f5b83d;
  --red:#c42a1f;--redbg:#fdecea;--amber:#9a5800;--amberbg:#fff3df;--green:#11803f;--greenbg:#e6f5ec;
  --drive:#0f7a66;--stopc:#a9bdb6;--restc:#f5b83d;--unk:#e1e7e5;--qmc:#8b6fd6;
  --shadow:0 1px 2px rgba(13,59,51,.06),0 1px 1px rgba(13,59,51,.04)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --selbg:#3fc2a5;--selfg:#04201a;
  --bg:#0e1513;--card:#16201d;--text:#e3ebe8;--muted:#9aaba5;--line:#26332f;--head:#1c2824;
  --brand:#0a2a24;--brand2:#123f36;--accent:#3fc2a5;--red:#ff6f63;--redbg:#3a1714;--amber:#ffbf5c;--amberbg:#3a2a10;
  --green:#4cd384;--greenbg:#11301f;--drive:#3fc2a5;--stopc:#4e625b;--restc:#e0a42e;--unk:#24302c;--qmc:#a58ff0;--shadow:none}}
:root[data-theme=dark]{
  --selbg:#3fc2a5;--selfg:#04201a;
  --bg:#0e1513;--card:#16201d;--text:#e3ebe8;--muted:#9aaba5;--line:#26332f;--head:#1c2824;
  --brand:#0a2a24;--brand2:#123f36;--accent:#3fc2a5;--red:#ff6f63;--redbg:#3a1714;--amber:#ffbf5c;--amberbg:#3a2a10;
  --green:#4cd384;--greenbg:#11301f;--drive:#3fc2a5;--stopc:#4e625b;--restc:#e0a42e;--unk:#24302c;--qmc:#a58ff0;--shadow:none}
:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
main{padding:20px 20px 48px;max-width:1440px;margin:0 auto}
h1{font-size:22px;margin:0;font-weight:700}h2{font-size:17px;margin:28px 0 10px}
.muted{color:var(--muted)}.small{font-size:14px}.src{color:var(--muted);font-size:13px}.bad{color:var(--red)}.warntext{color:var(--amber)}
.nowrap{white-space:nowrap}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 20px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:#fff}.brand:hover{text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px}
.stage{font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:6px;background:var(--amberc);color:#3b2a00}
nav{display:flex;flex-wrap:wrap;gap:4px}
nav a{padding:7px 12px;border-radius:8px;color:#d7e9e4;font-weight:500}nav a:hover{background:var(--brand2);text-decoration:none;color:#fff}
nav a.on{background:var(--brand2);color:#fff;box-shadow:inset 0 -2px 0 var(--amberc)}
.me{margin-left:auto;display:flex;align-items:center;gap:12px;color:#d7e9e4}
.me .first{display:none}
.top button.theme{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;padding:4px 10px}
.top button.link{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* basics */
input,select,button{font:inherit;color:inherit}
input,select{padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
button,.button{padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;display:inline-block;
  color:var(--text);font-weight:500;line-height:1.3}
.button:hover,button:hover{border-color:var(--accent);text-decoration:none}
button.primary{background:var(--accent);color:#fff;border-color:transparent}
button.link{border:0;background:none;padding:0;color:var(--accent)}
form.inline{display:inline}
.flash{padding:10px 14px;border-radius:10px;margin:10px 0;background:var(--head)}.flash.error{background:var(--redbg);color:var(--red)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.narrow{max-width:460px}.empty{color:var(--muted)}

/* page head */
.pagehead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:6px}
.pagehead h1{margin-right:auto}.pagehead .sub{display:block;font-size:15px;font-weight:400;color:var(--muted);margin-top:2px}
.intro{margin:8px 0 18px;color:var(--muted);font-size:14px;max-width:980px}
.back{display:inline-block;margin:2px 0 14px}

/* uniform tiles: label, number, short note — same size in a row */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:0 0 18px}
.tiles.t6{grid-template-columns:repeat(6,minmax(0,1fr))}.tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px 14px;min-height:112px;display:flex;flex-direction:column;
  gap:2px;box-shadow:var(--shadow);border-top:4px solid var(--line);min-width:0}
.tile .l{font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .v{font-size:28px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;margin-top:2px}
.tile .n{font-size:13px;color:var(--muted);line-height:1.35;margin-top:auto;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tile.red{border-top-color:var(--red)}.tile.red .v{color:var(--red)}
.tile.amber{border-top-color:#f0a020}.tile.amber .v{color:var(--amber)}
.tile.ok{border-top-color:var(--accent)}
.tile.zero .v{color:var(--muted)}
@media (max-width:1180px){.tiles.t6{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%}
th,td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th{background:var(--head);font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
td .big{font-size:16px;font-weight:700}
td.who{min-width:215px}td.who a{font-weight:600;font-size:15px}
td.flags{min-width:255px}
td.wk{min-width:180px;width:16%}
td.hist{width:64px}
svg.mini{display:block;width:52px;height:28px}svg.mini .mb{fill:var(--drive)}svg.mini .mb.over{fill:var(--red)}svg.mini .mb.none{fill:var(--line)}
svg.mini .limit{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;opacity:.7}
tr.sev-red td:first-child{box-shadow:inset 4px 0 var(--red)}tr.sev-amber td:first-child{box-shadow:inset 4px 0 #f0a020}
tr:hover td{background:color-mix(in srgb,var(--head) 60%,transparent)}

/* tags: one size everywhere */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;margin:2px 4px 2px 0;border-radius:12px;font-size:12.5px;font-weight:600;
  white-space:nowrap;background:var(--head);color:var(--muted)}
.tag.red{background:var(--redbg);color:var(--red)}.tag.amber{background:var(--amberbg);color:var(--amber)}
.tag.ok{background:var(--greenbg);color:var(--green)}.tag.watch{background:var(--amberc);color:#3b2a00}
.tag.qm{background:color-mix(in srgb,var(--qmc) 18%,transparent);color:var(--qmc)}

/* timelines */
svg.tl{display:block;width:100%;height:20px}
svg.tl.week{height:18px}
.k-drive{fill:var(--drive);background:var(--drive)}
.k-stop{fill:var(--stopc);background:var(--stopc)}
.k-unknown{fill:var(--unk);background:var(--unk)}
.k-qm{fill:var(--qmc);background:var(--qmc);fill-opacity:.6}
.k-off{fill:transparent;background:transparent;border:1px solid var(--line)}
.k-rest{fill:var(--restc);background:var(--restc)}
svg.tl .tick{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
svg.tl .daysep{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.45}
td.tlcol{width:60%}
.hours{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 2px 0;font-size:13.5px;color:var(--muted)}
.legend i{display:inline-block;width:16px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* driver page */
.flagrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:-6px 0 16px}
.flagrow .lbl{color:var(--muted);font-size:14px;margin-right:6px}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.watchbox form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.watchbox input[name=note]{flex:1;min-width:180px}
.vbars{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;align-items:end;height:170px;position:relative;margin-top:8px}
.vbars .col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px;min-width:0}
.vbars .bar{width:70%;max-width:46px;border-radius:6px 6px 0 0;background:var(--drive)}.vbars .bar.over{background:var(--red)}
.vbars .val{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.vbars .wk{font-size:12px;color:var(--muted);white-space:nowrap}.vbars .wk a{color:var(--muted)}.vbars .col.cur .wk a{color:var(--text);font-weight:700}
.vbars .none{font-size:12px;color:var(--muted)}
.chartarea{height:110px;display:flex;align-items:flex-end;justify-content:center;width:100%}
.h0{height:0}.h1{height:5%}.h2{height:10%}.h3{height:15%}.h4{height:20%}.h5{height:25%}.h6{height:30%}.h7{height:35%}.h8{height:40%}.h9{height:45%}
.h10{height:50%}.h11{height:55%}.h12{height:60%}.h13{height:65%}.h14{height:70%}.h15{height:75%}.h16{height:80%}.h17{height:85%}.h18{height:90%}
.h19{height:95%}.h20{height:100%}

/* how it works, changelog */
.prose{max-width:900px;line-height:1.6}.prose h2:first-child{margin-top:0}.prose li{margin:5px 0}
table.plain td{border:0;padding:6px 12px 6px 0;vertical-align:top}table.plain td:first-child{white-space:nowrap}
.changelog h2{font-size:17px;margin:18px 0 6px}.changelog h2:first-child{margin-top:0}.changelog ul{margin:0 0 8px;padding-left:22px}
.changelog li{margin:4px 0}
table.status td{border-bottom:1px solid var(--line)}table.status tr:last-child td{border-bottom:0}
.stack{display:grid;gap:14px}

/* login */
body.login main{display:flex;justify-content:center;padding-top:10vh}
.loginbox{width:380px;max-width:100%;display:grid;gap:14px}.loginbox h1{display:flex;gap:12px;align-items:center}
.loginbox h1 img{width:52px;height:52px;border-radius:12px}.loginbox label{display:flex;flex-direction:column;gap:5px;font-weight:500}
.foot{margin-top:22px}

/* phones: tables become cards */
@media (max-width:820px){
  main{padding:14px 12px 40px}
  .top{padding:8px 12px;gap:6px 10px}nav a{padding:6px 9px}
  .me .full{display:none}.me .first{display:inline}.top button.theme .lbl{display:none}
  .tiles,.tiles.t6,.tiles.t4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tile{min-height:104px;padding:10px 12px 12px}.tile .v{font-size:23px}
  .tile .l{white-space:normal}
  .split2{grid-template-columns:1fr}
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{border-bottom:1px solid var(--line);padding:8px 0}
  table.cards td{border:0;display:flow-root;padding:4px 14px 4px 118px;min-height:26px;text-align:left;max-width:none;min-width:0}
  table.cards td[data-l]::before{content:attr(data-l);float:left;width:100px;margin:1px 0 0 -104px;color:var(--muted);font-size:13px;line-height:1.35}
  table.cards td.who{padding-left:14px}table.cards td.who::before{display:none}
  table.cards td.blank{display:none}
  tr.sev-red td:first-child,tr.sev-amber td:first-child{box-shadow:none}
  table.cards tr.sev-red{box-shadow:inset 4px 0 var(--red)}table.cards tr.sev-amber{box-shadow:inset 4px 0 #f0a020}
  .vbars{gap:4px}.vbars .wk{font-size:11px}
  .brand{font-size:16px}.brand img{width:28px;height:28px}
}
@media (max-width:480px){nav a.ext{display:none}.pagehead h1{font-size:20px}}

.toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}.toolbar .legend{margin:0}
.cardh{margin:0 0 10px;font-size:16px}

/* driving per day (week page): 7 small bars, M..S; scale 0-18 h, dashed line at 11 h */
.daybars{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;width:100%;max-width:220px;min-width:168px}
.daybars::before{content:"";position:absolute;left:0;right:0;bottom:36px;border-top:1px dashed var(--muted);opacity:.7;pointer-events:none;z-index:1}
.daybars .db{display:flex;flex-direction:column;align-items:center;min-width:0}
.daybars .bararea{height:32px;width:100%;display:flex;align-items:flex-end;justify-content:center;background:var(--head);border-radius:4px 4px 0 0}
.daybars .b{width:68%;background:var(--drive);border-radius:3px 3px 0 0;min-height:2px}
.daybars .db.over .b{background:var(--red)}
.daybars .db.none .b{background:var(--line)}
.daybars .db.future .bararea{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.daybars .dl{font-size:11.5px;font-weight:600;color:var(--muted);line-height:14px;height:14px;margin-top:2px}
.legend .dash{width:16px;height:0;border-top:1.5px dashed var(--muted);border-radius:0}.legend .k-over{background:var(--red)}

/* week strip: the shown week is filled, the rest are plain buttons */
.weekstrip{display:flex;align-items:stretch;gap:6px;margin:4px 0 12px}
.weekstrip .weeks{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;flex:0 1 auto;min-width:0}
.weekstrip .wk{display:flex;flex-direction:column;justify-content:center;min-width:104px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--text);line-height:1.25;white-space:nowrap;box-shadow:var(--shadow)}
.weekstrip .wk:hover{text-decoration:none;border-color:var(--accent)}
.weekstrip .wk .t{font-weight:700;font-size:14px}.weekstrip .wk .d{font-size:12.5px;color:var(--muted)}
.weekstrip .wk.cur:not(.on) .t{color:var(--accent)}
.weekstrip .wk.on{background:var(--selbg);border-color:var(--selbg);color:var(--selfg);box-shadow:inset 0 -4px 0 var(--amberc),0 2px 8px rgba(13,59,51,.25)}
.weekstrip .wk.on .d{color:var(--selfg);opacity:.85}
.weekstrip .arrow{display:flex;align-items:center;justify-content:center;width:40px;flex:none;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--text);font-size:22px;line-height:1}
.weekstrip .arrow:hover{text-decoration:none;border-color:var(--accent)}.weekstrip .arrow.off{opacity:.35}
.weekhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 8px}
.weekhead .range{font-size:21px;font-weight:700}
.weekchip{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;font-size:13px;font-weight:700}
.weekchip.cur{background:var(--greenbg);color:var(--green)}.weekchip.past{background:var(--amberbg);color:var(--amber)}
.weekhead .tothis{font-weight:600;font-size:14px}
@media (max-width:820px){.weekstrip .wk{min-width:96px;padding:6px 10px}.weekstrip .arrow{width:34px}.weekhead .range{font-size:18px}}