@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&family=JetBrains+Mono:wght@400;600&display=swap");

:root{
  --bg:#EDF1F0; --paper:#FFFFFF; --ink:#132227; --ink-2:#4A5C62; --line:#CAD5D4; --line-2:#E1E8E7;
  --sea:#1B6B86; --sea-soft:#D6E8EE; --kelp:#2F6B44; --kelp-soft:#DCEBDF;
  --amber:#A8641A; --amber-soft:#F5E6CF; --red:#A33A2C; --red-soft:#F3DAD5;
  --night:#E4E9EC; --shadow:0 1px 2px rgba(19,34,39,.08);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F191D; --paper:#172428; --ink:#E6EDEE; --ink-2:#9FB1B6; --line:#2E3F45; --line-2:#22343A;
    --sea:#5FB3CF; --sea-soft:#173A47; --kelp:#7CC494; --kelp-soft:#1B3626;
    --amber:#E2A44E; --amber-soft:#3E2E14; --red:#E27A69; --red-soft:#43221D;
    --night:#0B1215; --shadow:none;
  }
}
:root[data-theme="dark"]{
  --bg:#0F191D; --paper:#172428; --ink:#E6EDEE; --ink-2:#9FB1B6; --line:#2E3F45; --line-2:#22343A;
  --sea:#5FB3CF; --sea-soft:#173A47; --kelp:#7CC494; --kelp-soft:#1B3626;
  --amber:#E2A44E; --amber-soft:#3E2E14; --red:#E27A69; --red-soft:#43221D;
  --night:#0B1215; --shadow:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 "Source Sans 3","Source Sans Pro",system-ui,sans-serif;padding-block:env(safe-area-inset-top,0px) calc(32px + env(safe-area-inset-bottom,0px));padding-inline:16px}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.01em;margin:0;text-wrap:balance}
.wrap{max-width:900px;margin:0 auto}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font:600 12px/1 "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
/* header */
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;padding-block:20px 12px;border-bottom:2px solid var(--ink)}
header.top h1{font-size:40px;line-height:.95;font-weight:700}
header.top h1 small{display:block;font-size:16px;font-weight:500;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
header.top .meta{color:var(--ink-2);font-size:14px;text-align:right}
/* tabs */
nav.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;gap:6px;overflow-x:auto;padding-block:10px;margin-inline:-16px;padding-inline:16px;border-bottom:1px solid var(--line)}
nav.tabs button{flex:0 0 auto;min-height:44px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:8px 16px;font:600 14px "Source Sans 3",sans-serif;cursor:pointer}
nav.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
nav.tabs button:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
/* now bar */
.now{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:center;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--sea);padding:12px 16px;margin-block:14px 0;box-shadow:var(--shadow)}
.now .big{font:600 34px/1 "Barlow Condensed",sans-serif}
.now .big span{font-size:18px;color:var(--ink-2);font-weight:500}
.now .sub{color:var(--ink-2);font-size:14px}
.now .next{grid-column:1/-1;font-size:15px;border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}
/* day */
section.day,section.panel{display:none;padding-block:18px 0}
section.day.active,section.panel.active{display:block}
.dayhead{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;justify-content:space-between}
.dayhead h2{font-size:32px;font-weight:700}
.dayhead h2 em{font-style:normal;color:var(--sea)}
.leg{font-size:15px;color:var(--ink-2)}
.leg b{color:var(--ink)}
.sun{font-size:14px;color:var(--ink-2)}
.verdict{margin-block:14px 0;padding:12px 16px;border:1px solid var(--line);background:var(--paper);border-left:5px solid var(--kelp);font-size:15.5px}
.verdict.warn{border-left-color:var(--amber)}
.verdict.crit{border-left-color:var(--red)}
.verdict b{font-family:"Barlow Condensed",sans-serif;font-size:18px;letter-spacing:.02em;text-transform:uppercase}
/* crossings */
.xlist{display:grid;gap:10px;margin-block:14px 0}
.x{background:var(--paper);border:1px solid var(--line);padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;box-shadow:var(--shadow)}
.x .name{font:600 18px/1.2 "Barlow Condensed",sans-serif}
.x .km{font-size:13px;color:var(--ink-2)}
.x .cut{justify-self:end;text-align:right}
.x .cut .n{font:600 22px/1 "Barlow Condensed",sans-serif}
.x .cut .l{font-size:11px;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
.x .win{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-block;padding:3px 9px;border-radius:4px;font:600 13px "JetBrains Mono",monospace;background:var(--kelp-soft);color:var(--kelp);border:1px solid transparent}
.chip.dark{background:var(--night);color:var(--ink-2)}
.chip.closed{background:var(--red-soft);color:var(--red)}
.chip.lbl{background:transparent;border-color:var(--line);color:var(--ink-2);font-family:"Source Sans 3",sans-serif;font-weight:600}
.x .alt{grid-column:1/-1;font-size:14px;color:var(--ink-2)}
.x .alt b{color:var(--ink)}
/* chart */
figure.chart{margin:16px 0 0;background:var(--paper);border:1px solid var(--line);padding:10px 8px 4px;box-shadow:var(--shadow)}
figure.chart svg{width:100%;height:auto;display:block}
figure.chart figcaption{font-size:12.5px;color:var(--ink-2);padding:6px 6px 4px;display:flex;flex-wrap:wrap;gap:4px 14px}
.key{display:inline-flex;align-items:center;gap:5px}
.key i{display:inline-block;width:14px;height:10px;border-radius:2px}
/* tables */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
@media (max-width:640px){.grid2{grid-template-columns:minmax(0,1fr)}}
.card{min-width:0;background:var(--paper);border:1px solid var(--line);padding:10px 12px;box-shadow:var(--shadow)}
.card h3{font-size:17px;font-weight:600;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline}
.card h3 small{font:500 12px "Source Sans 3",sans-serif;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:4px 6px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
th{font:600 11.5px "Source Sans 3",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
td.n,th.n{text-align:right}
.hilo td:first-child{width:56px}
.tag{font:600 11px "Source Sans 3",sans-serif;letter-spacing:.06em;padding:1px 6px;border-radius:3px;background:var(--sea-soft);color:var(--sea)}
.tag.L{background:var(--kelp-soft);color:var(--kelp)}
.hourly{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:2px 8px;font-size:13.5px}
.hourly div{display:flex;justify-content:space-between;padding:2px 4px;border-bottom:1px solid var(--line-2)}
.hourly div.hi{background:var(--red-soft)}
.hourly div.lo{background:var(--kelp-soft)}
.hourly div.night{color:var(--ink-2)}
.card.stops{margin-top:12px}
.card.stops ul{list-style:none;margin:0;padding:0}
.card.stops li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.card.stops li .mono{font-size:12.5px;color:var(--amber);font-weight:600;padding-top:2px}
.card.stops li.cc .mono{color:var(--ink-2)} .card.stops li.food .mono{color:var(--red)}
.card.stops li b{font-size:15px}
.card.stops li span:last-child{grid-column:2;color:var(--ink-2)}
.strip .key{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-2);padding:6px 6px 2px}
.strip .key i{display:inline-block;width:12px;height:8px;margin-right:5px;vertical-align:middle}
.ah.food{border-left:4px solid var(--red)}
.tally{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.tally .tot{font-size:15px;margin-bottom:8px} .tally .tot b{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--amber)}
.tally .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tally input{width:96px;font:16px "Source Sans 3",sans-serif;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.shareout{width:100%;font:14px ui-monospace,Menlo,monospace;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
/* reference */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl table{min-width:480px}
section.panel{padding-block:18px 0}
section.panel h2{font-size:30px;margin-bottom:8px}
section.panel h3{font-size:22px;margin:22px 0 8px}
.tbl{overflow-x:auto}
.foot{margin-top:28px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.foot a{color:var(--sea)}
.rule{font-size:14.5px;background:var(--paper);border:1px solid var(--line);padding:10px 14px;margin-top:10px}
.rule b{font-family:"Barlow Condensed",sans-serif;font-size:17px}
.offline{font-size:13px;color:var(--ink-2);margin-top:8px}
.offline b{color:var(--kelp)}
/* print */
@media print{
  :root{--bg:#fff;--paper:#fff;--shadow:none;--night:#EEF0F1}
  body{padding:0;font-size:12.5px;color:#000}
  nav.tabs,.now,.offline{display:none!important}
  header.top{padding-block:0 8px}
  header.top h1{font-size:30px}
  section.day,section.panel{display:block!important;break-before:page;padding-top:0}
  section.day:first-of-type{break-before:auto}
  .x,.card,figure.chart,.verdict{break-inside:avoid}
  .dayhead h2{font-size:26px}
  .grid2{grid-template-columns:1fr 1fr}
  .hourly{grid-template-columns:repeat(8,1fr);font-size:11px}
  figure.chart{padding:4px}
  .chip{border:1px solid #999}
  table{font-size:11px}
  a{text-decoration:none;color:inherit}
}

/* PWA additions */
.status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--amber);display:inline-block}
.dot.on{background:var(--kelp)} .dot.off{background:var(--red)}
.form{display:grid;gap:14px;margin-top:12px}
.form .row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:end}
.form label{display:grid;gap:4px;font-size:13px;font-weight:600;color:var(--ink-2)}
.form input,.form select{font:16px "Source Sans 3",sans-serif;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);min-width:0}
.form input[type=number]{width:96px}
.camps{display:grid;gap:8px}
.camps .night{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:8px 10px;border:1px solid var(--line-2);border-radius:6px}
.camps .night .n{font:600 16px "Barlow Condensed",sans-serif;color:var(--ink-2);width:64px}
.camps .night select{width:100%}
.camps .night .dist{grid-column:2;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.camps .night.bad{border-color:var(--red)}
button{font:600 15px "Source Sans 3",sans-serif;min-height:44px;padding:9px 16px;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
button.primary{background:var(--sea);border-color:var(--sea);color:#fff}
button.quiet{background:transparent}
button:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
button[disabled]{opacity:.6;cursor:wait}
.hint{font-size:13px;color:var(--ink-2);margin:0}
.hint.err{color:var(--red);font-weight:600}
.empty{padding:24px 0;color:var(--ink-2);font-size:15px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.beta{font:600 11px "Source Sans 3",sans-serif;letter-spacing:.1em;text-transform:uppercase;background:var(--amber-soft);color:var(--amber);padding:2px 7px;border-radius:4px;vertical-align:middle;margin-left:6px}
.strip{margin-top:12px;background:var(--paper);border:1px solid var(--line);padding:10px 8px 4px;box-shadow:var(--shadow)}
.strip svg{width:100%;height:auto;display:block}
.you{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--amber);padding:12px 16px;margin-top:12px}
.you .big{font:600 34px/1 "Barlow Condensed",sans-serif}
.you .sub{color:var(--ink-2);font-size:14px}
.ah{background:var(--paper);border:1px solid var(--line);padding:10px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:2px 12px;align-items:center;box-shadow:var(--shadow)}
.ah .d{font:600 22px/1 "Barlow Condensed",sans-serif;min-width:64px}
.ah .d small{display:block;font:500 11px "Source Sans 3",sans-serif;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
.ah .k{font:600 11px "Source Sans 3",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.ah .n{font-weight:600}
.ah .s{grid-column:2/-1;font-size:13.5px;color:var(--ink-2)}
.ah.gate{border-left:4px solid var(--sea)} .ah.camp{border-left:4px solid var(--kelp)} .ah.ladders{border-left:4px solid var(--amber)} .ah.ferry{border-left:4px solid var(--red)} .ah.cablecar{border-left:4px solid var(--ink-2)}
.ok{color:var(--kelp);font-weight:700} .no{color:var(--red);font-weight:700}