/* CALIBRE WNBA — dark sports board, basketball idiom, single warm accent. No CDN fonts. */
:root {
  --s0: #0c0f14;          /* page anchor */
  --s1: #10141c;          /* chrome */
  --s2: #161c26;          /* content raise */
  --hairline: #232a36;
  --edge: #2f3846;
  --fg: #f4f6fa;          /* AA 4.5:1+ on --s0 */
  --fg-mut: #aab3c2;
  --fg-dim: #7d8695;
  --accent: #ff7a33;      /* WNBA warm — single point light */
  --accent-deep: #e85f1c;
  --ink-on-accent: #160b04;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  color: var(--fg);
  background: var(--s0);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  line-height: 1.55;
  background:
    radial-gradient(120% 60% at 88% -10%, rgba(255, 122, 51, .10) 0, transparent 46%),
    var(--s0);
}
a { color: inherit; text-underline-offset: .25em; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { letter-spacing: -.02em; }
.mono, .num, .bx, .bx-t, .m-status { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

.skip { position: fixed; left: 1rem; top: -5rem; background: var(--accent); color: var(--ink-on-accent); padding: .75rem 1rem; z-index: 30; font-weight: 800; }
.skip:focus { top: 1rem; }

/* ---- chrome (S1): header sits at background level, hairline bottom ---- */
header {
  max-width: 1180px; margin: auto; min-height: 72px;
  padding: .9rem 24px; display: flex; align-items: center; gap: 22px;
  border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; white-space: nowrap; }
.mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--accent); color: var(--ink-on-accent); border-radius: 50%; font-weight: 900; }
.brand-tx { display: flex; flex-direction: column; line-height: 1.05; font-weight: 900; letter-spacing: .04em; }
.brand-tx em { font-style: normal; font-weight: 600; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
nav { display: flex; gap: 16px; align-items: center; overflow-x: auto; scrollbar-width: none; }
nav::-webkit-scrollbar { display: none; }
nav a { font-size: .86rem; color: var(--fg-mut); text-decoration: none; white-space: nowrap; padding: .2rem 0; }
nav a:hover { color: var(--fg); }
nav a[aria-current=page] { color: var(--fg); font-weight: 750; box-shadow: inset 0 -2px 0 var(--accent); }
.locale { margin-left: auto; border: 1px solid var(--edge); padding: .42rem .7rem; border-radius: 999px; text-decoration: none; white-space: nowrap; font-size: .8rem; font-weight: 700; color: var(--fg-mut); }
.locale:hover { border-color: var(--accent); color: var(--accent); }

main { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 60px 0 96px; display: grid; gap: 56px; }
main > *, .board, .panel { min-width: 0; }

/* ---- hero (S3, sole promoted surface) ---- */
.hero { max-width: 900px; }
.eyebrow { color: var(--accent); font-size: .72rem; letter-spacing: .18em; font-weight: 800; text-transform: uppercase; margin: 0 0 .5rem; }
.hero h1, .page-head h1 { font-size: clamp(2.5rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.045em; margin: .1em 0 .35em; }
.hero > p:not(.eyebrow) { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--fg-mut); max-width: 720px; }
.actions { display: flex; gap: 22px; align-items: center; margin-top: 1.9rem; flex-wrap: wrap; }
.button { display: inline-block; background: var(--accent); color: var(--ink-on-accent); padding: .8rem 1.2rem; text-decoration: none; font-weight: 850; border-radius: 4px; }
.button:hover { color: var(--ink-on-accent); background: #ff8f52; }
.link-arw { color: var(--fg); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--edge); padding-bottom: 2px; white-space: nowrap; }
.link-arw:hover { color: var(--accent); border-color: var(--accent); }

/* ---- season strip (D chrome ribbon, not a card) ---- */
.season-strip { display: flex; align-items: center; gap: .7rem; font-size: .92rem; color: var(--fg-mut); border-left: 3px solid var(--accent); padding: .55rem 0 .55rem 14px; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 122, 51, .55); animation: pulse 1.9s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255, 122, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 122, 51, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* ---- data status ribbon (S1 thin, warm left edge) ---- */
.ribbon { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; background: var(--s1); border-left: 3px solid var(--accent-deep); padding: 18px 22px; }
.ribbon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-deep); }
.ribbon p { margin: 0; color: var(--fg-mut); }
.ribbon .eyebrow { margin: 0 0 .25rem; color: var(--fg-dim); }
.ribbon .eyebrow strong { color: var(--accent); }
.ribbon dl { margin: 0; font-size: .74rem; color: var(--fg-dim); }
.ribbon dl div + div { margin-top: .35rem; }
.ribbon dt { color: var(--fg-dim); display: inline; }
.ribbon dd { margin: 0; display: inline; overflow-wrap: anywhere; color: var(--fg-mut); }
.ribbon dt::after { content: " "; }
.freshness-contract { max-width: 1160px; margin: 34px auto 0; padding: 13px 24px; border-top: 1px solid var(--line); color: var(--fg-mut); font: 600 .72rem/1.6 var(--mono); }
.freshness-contract strong { color: var(--fg); text-transform: uppercase; letter-spacing: .06em; }
.freshness-contract time { color: var(--accent); }

section > .eyebrow { margin-bottom: .3rem; }
section > h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 1.1rem; }
.page-head { max-width: 900px; }
.page-head > p:not(.eyebrow):not(.meta-line) { font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--fg-mut); max-width: 720px; }
.meta-line { display: flex; align-items: center; gap: .5rem; color: var(--fg-mut); margin: .6rem 0 0; }
.meta-line a { display: inline-flex; align-items: center; gap: .5rem; color: var(--fg); text-decoration: none; font-weight: 700; }
.meta-line a:hover { color: var(--accent); }

/* ---- procedural team badge (no logos; monochrome abbr) ---- */
.tbadge { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; background: #1d2531; border: 1px solid var(--edge); color: var(--fg); font-weight: 800; font-size: .74rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; flex: none; }
.tbadge.ghost { background: transparent; border-style: dashed; color: var(--fg-dim); }

/* ---- discovery glance grid ---- */
.disc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.disc { display: block; background: var(--s2); border: 1px solid var(--hairline); border-radius: 12px; padding: 20px; text-decoration: none; transition: border-color .15s, transform .15s; }
.disc:hover { border-color: var(--accent); transform: translateY(-2px); color: inherit; }
.disc .eyebrow { margin-bottom: .5rem; }
.disc h3 { margin: 0 0 .35rem; font-size: 1.18rem; }
.disc p { margin: 0; color: var(--fg-mut); font-size: .9rem; }

/* ---- board (honest empty-state container) ---- */
.board { background: var(--s2); border: 1px solid var(--hairline); border-radius: 14px; padding: 24px; }
.board-head h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.board-head p { margin: 0 0 20px; color: var(--fg-mut); max-width: 660px; }
.home-surface-link { display: inline-block; margin-top: 18px; }
.preview-note { margin: 14px 0 0; font-size: .8rem; color: var(--fg-dim); }

/* ---- match row: stack-left (Principle 14, team-sport list — NOT mirror) ---- */
.match { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 16px; background: var(--s1); }
.m-time { display: flex; flex-direction: column; gap: 3px; }
.m-status { font-size: .82rem; color: var(--accent); font-weight: 700; }
.m-tz { font-size: .68rem; color: var(--fg-dim); letter-spacing: .04em; }
.m-teams { display: grid; gap: 8px; }
.m-game { display: grid; gap: 12px; min-width: 0; }
.m-corner { grid-column: 1 / -1; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.m-team { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.m-name { color: var(--fg-mut); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-score { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; color: var(--fg-dim); font-weight: 700; }
.m-detail-link { grid-column: 2; justify-self: end; color: var(--fg-mut); font-size: .76rem; font-weight: 750; text-decoration: none; }
.m-detail-link:hover { color: var(--accent); }
.quarter-wrap { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.quarter-score { width: 100%; min-width: 330px; border-collapse: collapse; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; }
.quarter-score th, .quarter-score td { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.quarter-score thead th { color: var(--fg-dim); font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.quarter-score th:first-child { text-align: left; }
.quarter-score tbody th { color: var(--fg-mut); font-size: .72rem; }
.quarter-score tbody td { color: var(--fg-mut); font-size: .78rem; }
.quarter-score .quarter-total { color: var(--fg); font-weight: 850; border-left: 1px solid var(--edge); }

/* ---- dual timezone card ---- */
.tzcard { border: 1px solid var(--hairline); border-radius: 12px; padding: 20px; background: var(--s1); }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 8px; }
.time-grid > div { border-left: 3px solid var(--accent); padding: 8px 0 8px 14px; display: grid; gap: 3px; }
.time-grid span { color: var(--fg-dim); font-size: .78rem; }
.time-grid strong { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; font-size: 1.02rem; }
small { color: var(--fg-dim); font-size: .78rem; }

/* ---- standings (two conference tables) ---- */
.stand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.stand { border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 18px 8px; background: var(--s2); overflow-x: auto; }
.stand h2, .stand h3 { font-size: 1.05rem; margin: 0 0 12px; }
.stand table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 320px; }
.stand th { text-align: right; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); font-weight: 700; padding: 0 0 8px; border-bottom: 1px solid var(--hairline); }
.stand th.rk, .stand th.tm { text-align: left; }
.stand td { padding: 9px 0; border-bottom: 1px solid rgba(35, 42, 54, .55); }
.stand tr:last-child td { border-bottom: none; }
.stand .rk { width: 28px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.stand .tm a { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--fg); font-weight: 650; }
.stand .tm a:hover { color: var(--accent); }
.stand .tm .tbadge { min-width: 30px; height: 30px; font-size: .68rem; }
.contributors { display: block; margin-top: 5px; color: var(--fg-dim); font-size: .68rem; line-height: 1.45; }
.contributors a, .stand .contributors a { display: inline; color: var(--fg-mut); font-weight: 600; text-decoration: underline; }
.contributor-method { margin: 0; color: var(--fg-dim); font-size: .8rem; }
.stand .num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; color: var(--fg-dim); padding-left: 10px; }

/* ---- team directory cards ---- */
.conf { }
.conf h2 { font-size: 1.15rem; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.tcard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.tcard { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; background: var(--s2); border: 1px solid var(--hairline); border-radius: 10px; transition: border-color .15s; }
.tcard:hover { border-color: var(--accent); }
.tcard .tbadge { grid-row: 1 / 3; }
.tc-name { font-weight: 750; color: var(--fg); text-decoration: none; }
.tc-city { font-size: .8rem; color: var(--fg-dim); }
.tc-city em { color: var(--accent); font-style: normal; font-weight: 700; }
.tcard .contributors { grid-column: 1 / -1; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }

/* ---- team / player hub ---- */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.panel { border: 1px solid var(--hairline); border-radius: 12px; padding: 22px; background: var(--s2); }
.panel h2 { margin: 0 0 .6rem; font-size: 1.15rem; }
.panel p { margin: 0 0 1rem; color: var(--fg-mut); }
.panel a + a { margin-left: 16px; }
.steps { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--fg-mut); }
.steps li { margin: .5rem 0; }

/* ---- box score grid ---- */
.boxscore { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 340px; }
.boxscore th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); font-weight: 700; padding: 0 0 10px; border-bottom: 1px solid var(--hairline); }
.boxscore th.bx-team { text-align: left; }
.boxscore .bx { text-align: center; width: 46px; }
.boxscore .bx-t { color: var(--fg-mut); }
.boxscore td { padding: 12px 0; border-bottom: 1px solid rgba(35, 42, 54, .55); }
.boxscore .bx-team { text-align: left; }
.boxscore tbody .bx { text-align: center; color: var(--fg-dim); font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, monospace; }
.boxscore tbody .bx-t { color: var(--fg-mut); font-weight: 700; }
.board > .boxscore { display: block; overflow-x: auto; }

/* ---- Phase 1 populated data surfaces ---- */
.schedule-list { display: grid; gap: 28px; }
.slate-nav { display: flex; align-items: end; gap: 10px; overflow: visible; }
.slate-nav button, .slate-nav input { min-height: 44px; border: 1px solid var(--edge); border-radius: 8px; background: var(--s1); color: var(--fg); font: inherit; }
.slate-nav button { padding: 8px 14px; cursor: pointer; font-weight: 800; }
.slate-nav button:hover { border-color: var(--accent); color: var(--accent); }
.slate-nav label { display: grid; gap: 3px; color: var(--fg-dim); font-size: .7rem; }
.slate-nav input { padding: 7px 10px; color-scheme: dark; }
.slate-nav .today-button { color: var(--accent); }
.slate-current { margin-left: auto; color: var(--fg-dim); font: .76rem/44px ui-monospace, Menlo, monospace; }
.slate-empty { margin: 0; padding: 22px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--fg-mut); background: var(--s1); }
.date-board { display: grid; gap: 12px; }
.date-board .board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--hairline); }
.date-board .board-head h2, .date-board .board-head p { margin: 0 0 10px; }
.date-board .board-head p { color: var(--fg-dim); font-size: .82rem; }
.game-list, .mini-games { display: grid; gap: 10px; }
.match:has(.m-detail-link):hover { border-color: var(--edge); }
.m-time time { color: var(--fg-mut); font-size: .76rem; font-variant-numeric: tabular-nums; }
.source-note { color: var(--fg-mut); border-left: 3px solid var(--accent); padding-left: 14px; margin: 0; }
.table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.roster-table, .player-box, .team-stats, .ledger-table, .shooting-table, .game-log { width: 100%; min-width: 520px; border-collapse: collapse; }
.roster-table th, .player-box th, .team-stats th, .ledger-table th, .shooting-table th, .game-log th { color: var(--fg-dim); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--edge); padding: 8px 10px; }
.roster-table td, .player-box td, .team-stats td, .ledger-table td, .shooting-table td, .game-log td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); color: var(--fg-mut); }
.roster-table tr:last-child td, .player-box tr:last-child td, .team-stats tr:last-child td, .ledger-table tr:last-child td, .shooting-table tr:last-child td, .game-log tr:last-child td { border-bottom: none; }
.roster-table .num, .player-box .num, .team-stats .num, .shooting-table .num, .game-log .num { text-align: right; }
.shooting-table { margin-top: 22px; min-width: 360px; }
.game-log { min-width: 960px; }
.game-log time { white-space: nowrap; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 1px; padding: 1px; margin: 20px 0 0; background: var(--hairline); }
.stat-grid > div { display: grid; gap: 4px; padding: 16px; background: var(--s1); }
.stat-grid dt { color: var(--fg-dim); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.stat-grid dd { margin: 0; color: var(--fg); font: 850 1.55rem/1 ui-monospace, Menlo, monospace; }
.stat-grid span { color: var(--fg-dim); font-size: .72rem; }
.player-groups { display: grid; gap: 22px; }
.player-group { padding: 22px; border: 1px solid var(--hairline); border-radius: 12px; background: var(--s2); }
.player-group .board-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.player-group .board-head h2 { display: flex; align-items: center; gap: 10px; }
.player-group h3 { margin: 18px 0 8px; color: var(--fg-dim); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.player-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--hairline); }
.player-list a, .player-list .player-entry { display: grid; gap: 3px; height: 100%; padding: 12px 14px; background: var(--s1); text-decoration: none; }
.player-list strong { color: var(--fg); font-size: .9rem; }
.player-list span { color: var(--fg-dim); font-size: .72rem; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tip-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tip-list li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 7px; border-bottom: 1px solid var(--hairline); color: var(--fg-mut); }
.tip-list span { color: var(--accent); font-variant-numeric: tabular-nums; }
.score-hero { display: grid; gap: 10px; padding: 22px; background: var(--s2); border: 1px solid var(--hairline); border-radius: 14px; }
.score-hero > div:not(.quarter-wrap) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.score-hero span { font-weight: 750; }
.score-hero strong { color: var(--fg); font: 900 2rem/1 ui-monospace, Menlo, monospace; }
.score-hero .quarter-wrap { margin-top: 8px; }
.matchup-hero strong { color: var(--fg-dim); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
.game-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--hairline); }
.game-facts > div { display: grid; gap: 4px; padding: 17px 18px; background: var(--s1); }
.game-facts span { color: var(--fg-dim); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.game-facts strong { color: var(--fg); font-size: .9rem; }
.game-narrative, .season-context { max-width: 900px; }
.game-narrative p, .season-context p { line-height: 1.8; }
.game-links { display: flex; gap: 20px; flex-wrap: wrap; overflow: visible; padding-top: 6px; }
.mini-games .match { grid-template-columns: 90px 1fr; }
.call-list { display: grid; gap: 14px; }
.call { background: var(--s2); border: 1px solid var(--hairline); border-radius: 12px; padding: 22px; }
.call h2 { margin: 0 0 .5rem; }
.call p:not(.eyebrow) { color: var(--fg-mut); }

/* ---- prose ---- */
.prose { max-width: 760px; }
.prose h2 { margin-top: 2rem; font-size: 1.2rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--fg-mut); }

footer { width: min(1180px, calc(100% - 48px)); margin: auto; border-top: 1px solid var(--hairline); padding: 28px 0 52px; display: flex; justify-content: space-between; color: var(--fg-dim); font-size: .82rem; gap: 20px; }
footer a { color: var(--fg-mut); text-decoration: none; }
footer a:hover { color: var(--accent); }
footer div { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- mobile-first (Principle 9): 390px zero horizontal overflow ---- */
@media (max-width: 860px) {
  header { padding: 12px 18px; display: grid; grid-template-columns: 1fr auto; gap: 10px; min-height: 0; }
  .brand { grid-column: 1; }
  .locale { grid-column: 2; grid-row: 1; margin-left: 0; }
  nav { grid-column: 1 / -1; width: 100%; padding: 4px 0; }
  main { width: min(100% - 32px, 1180px); padding: 40px 0 72px; gap: 40px; }
  .hero h1, .page-head h1 { font-size: clamp(2.3rem, 12vw, 3.6rem); }
  .ribbon { grid-template-columns: auto 1fr; }
  .ribbon dl { grid-column: 1 / -1; }
  .disc-grid { grid-template-columns: 1fr 1fr; }
  .stand-grid, .hub-grid, .guide-grid { grid-template-columns: 1fr; }
  .time-grid { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 16px; width: calc(100% - 32px); }
}
@media (max-width: 460px) {
  .disc-grid { grid-template-columns: 1fr; }
  .tcard-grid { grid-template-columns: 1fr; }
  .match { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; }
  .m-time { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
  .m-time .m-tz { grid-column: 2; }
  .m-detail-link { grid-column: 1; }
  .slate-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: end; }
  .slate-nav label, .slate-nav input { width: 100%; min-width: 0; }
  .slate-nav .today-button { grid-column: 1 / 3; }
  .slate-current { margin: 0; text-align: right; }
}