/* Dash: the look. Colour themes and font presets only swap tokens; the layout is one phone column with a fixed tab bar. */

/* Fonts (self-hosted, latin subset, SIL Open Font License; see fonts/LICENSE.txt) */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; src: url(/fonts/archivo.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/fonts/sora.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-display: swap; font-weight: 200 800; src: url(/fonts/manrope.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/fonts/fraunces.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-display: swap; font-weight: 400 700; font-stretch: 75% 100%; src: url(/fonts/instrument-sans.woff2) format('woff2'); }

/* Base reset */
html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:root {
  --bg:#EEF1F2; --surface:#FFFFFF; --raised:#E6EBED; --text:#1F2A30; --muted:#56646C; --line:#D7DEE1; --line-soft:#E4E9EB;
  --primary:#3F6B7B; --on-primary:#FFFFFF; --accent:#2F5A6A; --study:#4F7A8A; --warn:#A9583D; --track:#E3E9EB;
  --hero-bg:#DCE7EA; --hero-text:#1F2A30; --hero-muted:#4D5E66; --hero-accent:#2F5A6A; --scrim:rgba(31,42,48,.34);
  --s1:#5B8FA8; --s2:#6F9C7A; --s3:#C98A57; --s4:#9A80BA; --s5:#CC7F7F;
  --bw:1px; --r:16px;
  --f-display:'Archivo','Helvetica Neue',Arial,sans-serif; --wd-display:118%; --w-display:760; --ls-display:-0.015em;
  --f-body:'Archivo','Helvetica Neue',Arial,sans-serif; --wd-body:100%;
  --f-num:'Archivo','Helvetica Neue',Arial,sans-serif; --wd-num:110%; --w-num:700;
  --seg-on:var(--surface);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#1C1F26; --surface:#252933; --raised:#2F3440; --text:#E8E6E3; --muted:#A3A7B0; --line:#343946; --line-soft:#2F3440;
    --primary:#E7B98F; --on-primary:#2A1E14; --accent:#EBC29C; --study:#9DB4E0; --warn:#E8A3A3; --track:#2F3440;
    --hero-bg:#2C303B; --hero-text:#E8E6E3; --hero-muted:#B7B2AA; --hero-accent:#EBC29C; --scrim:rgba(10,12,16,.58);
    --s1:#9DB4E0; --s2:#A8CBB3; --s3:#E7B98F; --s4:#C9A8D9; --s5:#E8A3A3; --bw:0px; --r:18px;
    --seg-on:#3A3F4C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#1C1F26; --surface:#252933; --raised:#2F3440; --text:#E8E6E3; --muted:#A3A7B0; --line:#343946; --line-soft:#2F3440;
  --primary:#E7B98F; --on-primary:#2A1E14; --accent:#EBC29C; --study:#9DB4E0; --warn:#E8A3A3; --track:#2F3440;
  --hero-bg:#2C303B; --hero-text:#E8E6E3; --hero-muted:#B7B2AA; --hero-accent:#EBC29C; --scrim:rgba(10,12,16,.58);
  --s1:#9DB4E0; --s2:#A8CBB3; --s3:#E7B98F; --s4:#C9A8D9; --s5:#E8A3A3; --bw:0px; --r:18px;
  --seg-on:#3A3F4C;
    color-scheme: dark;
}
:root.t-mist.t-mist {
  --bg:#EEF1F2; --surface:#FFFFFF; --raised:#E6EBED; --text:#1F2A30; --muted:#56646C; --line:#D7DEE1; --line-soft:#E4E9EB;
  --primary:#3F6B7B; --on-primary:#FFFFFF; --accent:#2F5A6A; --study:#4F7A8A; --warn:#A9583D; --track:#E3E9EB;
  --hero-bg:#DCE7EA; --hero-text:#1F2A30; --hero-muted:#4D5E66; --hero-accent:#2F5A6A; --scrim:rgba(31,42,48,.34);
  --s1:#5B8FA8; --s2:#6F9C7A; --s3:#C98A57; --s4:#9A80BA; --s5:#CC7F7F; --bw:1px; --r:16px;
  --seg-on:var(--surface);
    color-scheme: light;
}
:root.t-paper.t-paper {
  --bg:#F6F1E7; --surface:#FFFDF8; --raised:#EFE7D6; --text:#1D1B18; --muted:#5E574B; --line:#1D1B18; --line-soft:#E2D9C6;
  --primary:#3E64C8; --on-primary:#FFFFFF; --accent:#2F55B8; --study:#3E64C8; --warn:#B4442F; --track:#ECE3D0;
  --hero-bg:#E3E8F5; --hero-text:#1D1B18; --hero-muted:#4A5470; --hero-accent:#2F55B8; --scrim:rgba(29,27,24,.34);
  --s1:#D9654F; --s2:#3E64C8; --s3:#C7922E; --s4:#3C8A60; --s5:#8061B8; --bw:1.5px; --r:14px;
  --seg-on:var(--surface);
    color-scheme: light;
}
:root.t-eletrico.t-eletrico {
  --bg:#FAF7F0; --surface:#FFFFFF; --raised:#F1ECE0; --text:#232323; --muted:#5F5A50; --line:#E3DCCC; --line-soft:#EDE7DA;
  --primary:#1F4E9C; --on-primary:#FFFFFF; --accent:#1F4E9C; --study:#1F4E9C; --warn:#B4472F; --track:#EEE8DA;
  --hero-bg:#FBEDBE; --hero-text:#232323; --hero-muted:#5A4708; --hero-accent:#1F4E9C; --scrim:rgba(35,35,35,.34);
  --s1:#1F4E9C; --s2:#C8553D; --s3:#C9951A; --s4:#3E7C59; --s5:#7B5EA7; --bw:1px; --r:14px;
  --seg-on:var(--surface);
    color-scheme: light;
}
:root.t-night.t-night {
  --bg:#121315; --surface:#1B1D20; --raised:#25282C; --text:#E8E8E6; --muted:#9A9DA4; --line:#2C2F34; --line-soft:#25282C;
  --primary:#8ED1B5; --on-primary:#11271F; --accent:#8ED1B5; --study:#A99CF0; --warn:#F0B866; --track:#25282C;
  --hero-bg:#1E2623; --hero-text:#E8E8E6; --hero-muted:#A7C9BA; --hero-accent:#8ED1B5; --scrim:rgba(0,0,0,.58);
  --s1:#A99CF0; --s2:#8ED1B5; --s3:#F0B866; --s4:#7FBDE8; --s5:#EFA0B4; --bw:0px; --r:16px;
  --seg-on:#2F3338;
    color-scheme: dark;
}
:root.t-dusk.t-dusk {
  --bg:#1C1F26; --surface:#252933; --raised:#2F3440; --text:#E8E6E3; --muted:#A3A7B0; --line:#343946; --line-soft:#2F3440;
  --primary:#E7B98F; --on-primary:#2A1E14; --accent:#EBC29C; --study:#9DB4E0; --warn:#E8A3A3; --track:#2F3440;
  --hero-bg:#2C303B; --hero-text:#E8E6E3; --hero-muted:#B7B2AA; --hero-accent:#EBC29C; --scrim:rgba(10,12,16,.58);
  --s1:#9DB4E0; --s2:#A8CBB3; --s3:#E7B98F; --s4:#C9A8D9; --s5:#E8A3A3; --bw:0px; --r:18px;
  --seg-on:#3A3F4C;
    color-scheme: dark;
}
:root.t-riso.t-riso {
  --bg:#F3EFE6; --surface:#FBF8F1; --raised:#ECE6D8; --text:#1B1A3A; --muted:#55547A; --line:#1B1A3A; --line-soft:#E2DCCD;
  --primary:#C93C88; --on-primary:#FFFFFF; --accent:#B3236F; --study:#2A7CB5; --warn:#C4501F; --track:#E8E1D1;
  --hero-bg:#F6DCE8; --hero-text:#1B1A3A; --hero-muted:#5B3A4C; --hero-accent:#B3236F; --scrim:rgba(27,26,58,.34);
  --s1:#E0559F; --s2:#2A7CB5; --s3:#D89A1E; --s4:#2E9E68; --s5:#765BA7; --bw:1.5px; --r:10px;
  --seg-on:var(--surface);
    color-scheme: light;
}
:root.t-fado.t-fado {
  --bg:#1D181D; --surface:#272027; --raised:#322A32; --text:#EFE7EB; --muted:#B3A6AE; --line:#3B323B; --line-soft:#322A32;
  --primary:#D9A2BE; --on-primary:#2B1824; --accent:#E5B2CB; --study:#E2B970; --warn:#F0A58C; --track:#322A32;
  --hero-bg:#352632; --hero-text:#EFE7EB; --hero-muted:#C9B4C1; --hero-accent:#E9BBD2; --scrim:rgba(10,6,10,.6);
  --s1:#E5B2CB; --s2:#9FC6B5; --s3:#E2B970; --s4:#A9B4E6; --s5:#E9967F; --bw:0px; --r:18px;
  --seg-on:#41373F;
    color-scheme: dark;
}
:root.f-round.f-round {
  --f-display:'Sora','Helvetica Neue',Arial,sans-serif; --wd-display:100%; --w-display:700; --ls-display:-0.025em;
  --f-body:'Manrope','Helvetica Neue',Arial,sans-serif; --wd-body:100%;
  --f-num:'Sora','Helvetica Neue',Arial,sans-serif; --wd-num:100%; --w-num:600;
}
:root.f-serif.f-serif {
  --f-display:'Fraunces',Georgia,'Times New Roman',serif; --wd-display:100%; --w-display:720; --ls-display:-0.01em;
  --f-body:'Instrument Sans','Helvetica Neue',Arial,sans-serif; --wd-body:100%;
  --f-num:'Fraunces',Georgia,'Times New Roman',serif; --wd-num:100%; --w-num:650;
}

/* Native feel on iPhone: the usual soft bounce at the top and bottom, but no sideways drift, no double-tap or pinch zoom,
   no text selection or long-press menus on UI. */
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-x: none; overscroll-behavior-y: auto; touch-action: pan-x pan-y; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--f-body); font-stretch: var(--wd-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-x: none; overscroll-behavior-y: auto; touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.locked { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
:where(h1, h2, h3, p) { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
button { transition: transform .12s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
button:active { transform: scale(.97); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes up { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hero-accent) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.wrap { max-width: 480px; margin: 0 auto; padding-inline: 16px; padding-block: 14px calc(108px + env(safe-area-inset-bottom, 0px)); }
.screen { display: flex; flex-direction: column; gap: 14px; }
.screen.enter > * { animation: rise .44s cubic-bezier(.2,.7,.2,1) both; }
.screen.enter > *:nth-child(2) { animation-delay: .05s; } .screen.enter > *:nth-child(3) { animation-delay: .1s; }
.screen.enter > *:nth-child(4) { animation-delay: .15s; } .screen.enter > *:nth-child(5) { animation-delay: .2s; }
.screen.enter > *:nth-child(6) { animation-delay: .25s; } .screen.enter > *:nth-child(7) { animation-delay: .3s; }
.screen.enter > *:nth-child(n+8) { animation-delay: .34s; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.head { padding: 6px 2px 2px; }
.kicker { font-size: 13px; color: var(--muted); }
.h1 { font-family: var(--f-display); font-stretch: var(--wd-display); font-weight: var(--w-display); letter-spacing: var(--ls-display); font-size: 30px; line-height: 1.06; margin-top: 4px; text-wrap: balance; }
.h2 { font-family: var(--f-display); font-stretch: var(--wd-display); font-weight: var(--w-display); letter-spacing: var(--ls-display); font-size: 18px; line-height: 1.2; }
.num { font-family: var(--f-num); font-stretch: var(--wd-num); font-weight: var(--w-num); font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--muted); } .accent { color: var(--accent); } .warn { color: var(--warn); }
.sm { font-size: 13px; } .xs { font-size: 11px; } .b { font-weight: 600; } .center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row-between > .h2 { flex-shrink: 0; }
.row-between > span:last-child { text-align: right; min-width: 0; }

.card { position: relative; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 16px; }
.hero { position: relative; background: var(--hero-bg); color: var(--hero-text); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 16px; }
.card .sub2, .card .lbl { color: var(--muted); } .hero .sub2, .hero .lbl { color: var(--hero-muted); }
.card .hl { color: var(--accent); } .hero .hl { color: var(--hero-accent); }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hero-k { font-size: 13px; font-weight: 600; color: var(--hero-muted); }
.hero-big { font-size: 60px; line-height: 1; margin-top: 10px; color: var(--hero-accent); }
.hero-cd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; font-weight: 600; font-size: 15px; }
.hero-dim { color: var(--hero-muted); }
.hero-sub { font-size: 13px; color: var(--hero-muted); margin-top: 8px; }
.hero-err .err { color: var(--hero-text); margin-top: 6px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--hero-accent); animation: pulse 1.6s ease-out infinite; flex-shrink: 0; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.peek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.peek .num { font-size: 15px; margin-top: 2px; }
.lbl { font-size: 12px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.big { font-size: 42px; line-height: 1.05; }
.line { font-size: 14px; margin-top: 10px; }

.seg { display: grid; gap: 4px; padding: 4px; border-radius: 12px; background: var(--raised); margin-top: 12px; }
.hero .seg { background: color-mix(in srgb, var(--hero-text) 9%, transparent); }
.seg-1 { grid-template-columns: 1fr; } .seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg-btn > span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-4 .seg-btn { font-size: 13px; }
.seg-btn { min-height: 46px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 4px; font-weight: 600; font-size: 14px; color: var(--muted); }
.hero .seg-btn { color: var(--hero-muted); }
.seg-btn.on, .hero .seg-btn.on { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg-sub { font-size: 12px; font-weight: 500; opacity: .85; }

.btn { min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: 15px; }
.btn2 { min-height: 48px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); color: var(--text); font-weight: 600; font-size: 15px; }
.btn-ghost { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--hero-text) 24%, transparent); font-weight: 600; font-size: 14px; margin-top: 12px; }
.full { width: 100%; }
.link { min-height: 44px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; }
.err { font-size: 13px; color: var(--warn); }
.tag { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--raised); color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.tag.warn { color: var(--warn); }
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot8 { width: 8px; height: 8px; } .dot12 { width: 12px; height: 12px; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.list { margin-top: 6px; }

.ev { display: grid; grid-template-columns: 54px 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ev-t { font-size: 15px; } .ev-t.allday { font-size: 12px; font-weight: 600; color: var(--muted); }
.ev-x { display: flex; flex-direction: column; min-width: 0; }
.ev-title { font-size: 14px; font-weight: 600; } .ev-sub { font-size: 12px; color: var(--muted); }
.ev.past { opacity: .5; } .ev.now .ev-t { color: var(--accent); }

.minis { display: grid; gap: 8px; margin-top: 6px; }
.minis-1 { grid-template-columns: 1fr; } .minis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .minis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini { background: var(--raised); border-radius: 12px; padding: 12px; min-width: 0; }
.mini-n { font-size: 32px; line-height: 1; }
.mini-s { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-top: 8px; min-width: 0; }

.nudge { display: flex; gap: 12px; align-items: flex-start; }
.nudge .dot { margin-top: 6px; }
.nudge p { font-size: 15px; line-height: 1.45; }

.mrow { display: block; padding: 10px 0; border-top: 1px solid var(--line-soft); text-decoration: none; }
.mline { display: flex; align-items: baseline; gap: 10px; }
.msub { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msub.unread { font-weight: 700; }
.mmeta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--muted); min-width: 0; }

.steps { position: relative; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.steps::before { content: ""; position: absolute; left: 61px; top: 9px; bottom: 9px; width: 2px; background: var(--line-soft); }
.step { position: relative; display: grid; grid-template-columns: 48px 10px minmax(0, 1fr); gap: 10px; align-items: center; }
.step-t { font-size: 17px; }
.step-dot { width: 10px; height: 10px; border-radius: 50%; }
.step-l { font-size: 14px; }
.why { background: var(--raised); border-radius: 12px; padding: 12px; margin-top: 16px; font-size: 13px; }

.selwrap { position: relative; z-index: 2; }
.select { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); text-align: left; font-size: 15px; font-weight: 600; }
.chev { margin-left: auto; transition: transform .2s ease; flex-shrink: 0; }
.chev.open { transform: rotate(180deg); }
.menu { position: absolute; left: 0; right: 0; top: 58px; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.menu.in { animation: drop .18s ease-out both; }
.opt { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border-radius: 10px; text-align: left; font-size: 15px; }
.opt.on { background: var(--raised); font-weight: 600; }
.menu-hint { padding: 8px 10px 4px; }
.timer { font-size: 72px; line-height: 1; text-align: center; margin-top: 24px; }
.laps { margin-top: 18px; }
.strip { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--track); }
.strip span { display: block; height: 100%; min-width: 3px; transition: flex-grow .9s linear; }
.lap-list { display: flex; flex-direction: column; margin-top: 8px; }
.lap { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.lap-t { width: 70px; text-align: right; }

.bars { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.b-top { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.bar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 5px; transform-origin: left center; transition: width .4s ease; }
.screen.enter .bar i { animation: grow .8s cubic-bezier(.2,.7,.2,1) both; }

.gridbox { overflow-x: auto; scrollbar-width: none; margin-top: 14px; overscroll-behavior-x: contain; }
.gridbox::-webkit-scrollbar { display: none; }
.months { display: grid; grid-template-columns: repeat(18, 14px); column-gap: 3px; font-size: 11px; color: var(--muted); width: max-content; }
.sgrid { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 3px; margin-top: 6px; width: max-content; }
.cell { width: 14px; height: 14px; border-radius: 3px; }
.lv0 { background: var(--track); }
.lv1 { background: color-mix(in srgb, var(--study) 35%, var(--track)); }
.lv2 { background: color-mix(in srgb, var(--study) 60%, var(--track)); }
.lv3 { background: color-mix(in srgb, var(--study) 80%, var(--track)); }
.lv4 { background: var(--study); }
.fut { background: transparent; border: 1px dashed var(--line); }
.tst { box-shadow: inset 0 0 0 2px var(--warn); }
.cell.now { outline: 2px solid var(--accent); outline-offset: 1px; }
.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.legend .cell { width: 12px; height: 12px; }

.recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.rec-v { font-size: 26px; line-height: 1.15; margin-top: 4px; }
.sess { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.sdots { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.sdots span { display: inline-flex; align-items: center; gap: 5px; }
.del { min-width: 44px; min-height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); font-size: 13px; font-weight: 600; }
.del.arm { background: var(--raised); color: var(--warn); padding: 0 10px; }

.track { position: relative; height: 28px; margin: 6px 8px 0; }
.track-line { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--track); }
.track-now { position: absolute; left: 0; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); }
.track-m { position: absolute; top: 6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 3px solid; background: var(--surface); }
.tcard { display: flex; gap: 16px; align-items: flex-start; }
.tdays { width: 64px; flex-shrink: 0; text-align: center; }
.tnum { font-size: 40px; line-height: 1; }
.ttl { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin-top: 12px; }
.fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tile { background: var(--raised); border: 2px solid transparent; border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; text-align: left; min-height: 44px; min-width: 0; }
.tile.on { border-color: var(--accent); }
.sws { display: flex; }
.sw { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(127,127,127,.35); box-shadow: 0 0 0 1.5px var(--raised); }
.sw + .sw { margin-left: -3px; }
.tile-n { font-size: 12px; font-weight: 600; margin-top: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa { display: flex; flex-direction: column; gap: 2px; font-size: 28px; line-height: 1.05; }
.srow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.srow-l { flex: 1; min-width: 0; font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 44px; height: 44px; border-radius: 10px; background: var(--raised); font-size: 20px; font-weight: 600; display: grid; place-items: center; }
.stepper .v { min-width: 62px; text-align: center; font-size: 15px; }

.overlay { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); touch-action: none; }
.overlay.in { animation: fade .2s ease-out both; }
.sheet { width: 100%; max-width: 448px; max-height: 100%; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; background: var(--surface); border: var(--bw) solid var(--line); border-radius: 22px; padding: 20px; }
.sheet.in { animation: up .38s cubic-bezier(.2,.8,.2,1) both; }
.sheet-big { font-size: 56px; line-height: 1.05; margin-top: 6px; color: var(--accent); }
.wrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; }
.btns2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line-soft); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); }
.tabs-in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tab { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.tab svg { width: 22px; height: 22px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.tab.on { color: var(--accent); }
.tab.on svg { transform: translateY(-2px) scale(1.08); }

.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; max-width: calc(100% - 32px); animation: fade .2s ease-out both; }

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

/* ---------- Site additions ---------- */
/* The status bar sits above the page (it takes the theme colour), so only the notch side needs the inset. */
.wrap { padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
body.signed-out .tabs { display: none; }
body.signed-out .wrap { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

/* Login */
.login-form { display: flex; flex-direction: column; }
.login-form .lbl { color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.input { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); color: var(--text); font: inherit; font-size: 17px; letter-spacing: .04em; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; -webkit-appearance: none; appearance: none; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn:disabled { opacity: .6; }

/* Live bus times */
.livechip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; color: var(--accent); background: color-mix(in srgb, currentColor 13%, transparent); }
.hero .livechip { color: var(--hero-accent); }
.livechip.pill { background: transparent; border: 1px solid currentColor; padding: 3px 9px; }
.livechip.gone { color: var(--muted); }
.hero .livechip.gone { color: var(--hero-muted); }
.row .livechip { margin-top: 4px; }

/* Settings: data section */
.filebtn { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.filebtn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.link.armed { color: var(--warn); }

/* Go → Next morning: the week strip and his own arrival time */
.days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--raised); }
.day { min-height: 60px; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); min-width: 0; }
.day-w { font-size: 11px; font-weight: 600; }
.day-n { font-size: 18px; line-height: 1.1; color: var(--text); }
.day.today .day-n { color: var(--accent); }
.day.on { background: var(--seg-on); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.day.on .day-w { color: var(--text); }
.day-dot { width: 5px; height: 5px; border-radius: 50%; margin-top: 3px; background: transparent; }
.day-dot.has { background: var(--accent); }
.custom-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 4px 6px 12px; border-radius: 12px; background: var(--raised); }
.custom-l { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-in { flex-shrink: 0; min-height: 44px; min-width: 92px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 18px; text-align: center; -webkit-user-select: text; user-select: text; -webkit-appearance: none; appearance: none; }
.time-in::-webkit-date-and-time-value { text-align: center; }
.time-in::-webkit-calendar-picker-indicator { display: none; }
.time-in:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.link + .link { margin-left: 18px; }