:root{--bg:#f4f5f3;--fg:#1b211e;--dim:#5b665f;--line:#d3d9d1;--hot:#b4185f;--card:#fff;
  --early:#3f7a3a;--late:#a86a12;--miss:#b4185f;--eta:#3e7ca6;--warn:#a86a12;--trail:#3e7ca6}
@media(prefers-color-scheme:dark){:root{--bg:#121614;--fg:#e6eae4;--dim:#98a49b;--line:#2c3531;
  --hot:#ff5c97;--card:#1a201d;--early:#8fbf88;--late:#d9a441;--miss:#ff5c97;--eta:#74acd2;--warn:#d9a441;--trail:#74acd2}}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,sans-serif;
  display:flex;justify-content:center;padding:20px 12px}
main{width:100%;max-width:56rem;min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px}
h1{margin:0 0 4px;font-size:1.3rem;letter-spacing:-.01em}
h2{margin:0 0 6px;font-size:1.05rem}
p{margin:0 0 8px}
a{color:var(--eta)}
.dim{color:var(--dim)}
.small{font-size:.85rem}
.warn{color:var(--warn)}
.eta{color:var(--eta);font-style:italic}
.range{font-size:.85em;color:var(--dim);font-style:normal}
.scroll{overflow-x:hidden}
table{border-collapse:collapse;width:100%;font-size:.9rem;font-variant-numeric:tabular-nums;table-layout:fixed}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:normal;overflow-wrap:anywhere;vertical-align:top}
td.n,th.n,td.time{white-space:nowrap}
th[scope="row"]{background:var(--card)}
thead th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
td.n,th.n{text-align:right}
td.c,th.c{text-align:center}
.yes{color:var(--early);font-weight:700}
tr.ahead th,tr.ahead td{color:var(--dim)}
tr td.eta,tr.ahead td.eta{color:var(--eta);font-style:italic}
tr td.early,tr.ahead td.early{color:var(--early)}
tr td.late,tr.ahead td.late{color:var(--late)}
tr td.miss,tr.ahead td.miss{color:var(--miss);font-weight:700}
.flag{color:var(--miss);font-weight:800}
.rep{font-size:.7em;color:var(--dim)}
.btn{display:inline-block;padding:9px 14px;border-radius:9px;text-decoration:none;font-weight:600;
  background:var(--hot);color:#fff;border:0;font:inherit;cursor:pointer}
.btn.alt{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.sm{padding:4px 9px;font-size:.8rem;border-radius:7px}
.links a{margin-right:12px;font-size:.9rem}
select,input[type=text],input[type=datetime-local]{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--fg);max-width:100%}
form.report{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.report label{font-size:.85rem;color:var(--dim)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tab{padding:6px 12px;border-radius:8px;border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.tab.on{background:var(--hot);color:#fff;border-color:var(--hot)}
.dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.35em;vertical-align:-.05em}
a.ib{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;color:var(--fg);margin:0 4px 0 0;vertical-align:middle}
a.ib:hover{background:var(--line)}
a.st{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
a.why{color:var(--dim);text-decoration:underline dotted;text-underline-offset:3px}
p.quiet{margin:0 0 8px;text-align:right}
.sortby{display:inline-block;margin-left:8px}.sortby select{font:inherit;font-size:.9em}
h3{margin:14px 0 4px;font-size:1rem}ol li{margin-bottom:6px}
footer{color:var(--dim);font-size:.8rem;text-align:center;margin-top:8px}
nav.top{font-size:.9rem;margin:0 0 10px;color:var(--dim)}nav.top a{color:var(--eta);text-decoration:none}
footer a{color:inherit}
.notice{background:color-mix(in srgb,var(--eta) 12%,transparent);border:1px solid var(--eta);border-radius:8px;padding:8px 12px;margin-bottom:10px}
.error{background:color-mix(in srgb,var(--miss) 12%,transparent);border:1px solid var(--miss);border-radius:8px;padding:8px 12px;margin-bottom:10px}
@media(max-width:36rem){body{padding:12px 8px}.card{padding:12px}th,td{padding:6px 7px;font-size:.82rem}}
/* Every table stacks on a phone: one block per row, cells laid out inline
   with a small label, wide cells on their own line. Nothing ever scrolls
   sideways. */
@media(max-width:44rem){
  table.stack{table-layout:auto}
  table.stack thead{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack th{display:block;width:100%}
  table.stack tr{padding:10px 0;border-bottom:1px solid var(--line)}
  table.stack tr:last-child{border-bottom:0}
  table.stack th[scope="row"]{border:0;padding:0 0 3px;font-size:1.05rem}
  table.stack td{display:inline-block;width:auto;border:0;padding:2px 14px 2px 0;line-height:1.4;font-size:.95rem;vertical-align:baseline}
  table.stack td.wide,table.stack td.links,table.stack td.tools,table.stack tr.more td{display:block;width:100%;padding-right:0}
  table.stack td[data-label]::before{content:attr(data-label) " ";color:var(--dim);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
  table.stack td.links{padding-top:6px}
  table.stack td.links a:not(.ib){display:inline-block;padding:4px 10px;margin:2px 6px 2px 0;border:1px solid var(--line);border-radius:7px;text-decoration:none}
  table.stack td:empty{display:none}
  .tabs{display:none}
  .tabs-select{display:block}
  /* Thumbs, not mouse pointers: every control at least 40px. */
  a.ib{width:44px;height:44px}
  .btn.sm{min-height:40px;padding:8px 14px;font-size:.9rem}
  .more-toggle{min-width:40px;min-height:40px}
  dialog#entry .close{padding:10px 14px}
}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.9rem;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:20;max-width:90vw}
#queue{background:color-mix(in srgb,var(--warn) 14%,transparent);border:1px solid var(--warn);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-size:.9rem}
.tabs-select{display:none;margin-bottom:10px}

dialog#entry{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);padding:0;max-width:22rem;width:calc(100% - 24px)}
dialog#entry form{padding:16px;position:relative}
dialog#entry .close{position:absolute;top:6px;right:8px;border:0;background:transparent;color:var(--dim);font:inherit;font-size:1.6rem;line-height:1;padding:4px 8px;cursor:pointer}
dialog#entry::backdrop{background:rgba(0,0,0,.45)}
dialog#entry label{display:block;margin:8px 0;font-size:.9rem;color:var(--dim)}
dialog#entry select,dialog#entry input{width:100%;margin-top:3px}
dialog#entry .now{display:flex;gap:8px;margin:12px 0}
dialog#entry .now .btn{flex:1;padding:12px;font-size:1.05rem}
dialog#entry details{margin-top:6px}dialog#entry summary{cursor:pointer;color:var(--eta);font-size:.9rem}
.btn.entry{background:var(--hot);color:#fff}