/* ==========================================================================
   Personal dashboard - v2

   Dark, dense widget wall. Left icon rail, saturated per-widget accents,
   accent bars on every row, glow on the hero. Built to be scanned in 20
   seconds over coffee, not read like a document.

   Accent colors here are UI/status, not chart series. They pass contrast
   (all >= 3:1 on #14141c). When charts arrive, validate a categorical set
   separately - do not reuse these as series colors.
   ========================================================================== */

:root {
  color-scheme: dark;

  --page:      #0a0a0f;
  --surface:   #14141c;
  --raised:    #1c1c26;
  --hover:     #232330;
  --border:    #282836;
  --border-hi: #3a3a4d;

  --ink:       #f2f2f7;
  --ink-2:     #a8a8c0;
  --ink-3:     #6e6e88;

  /* Widget accents are SLOTS, not color promises. A theme redefines --c1..--c8
     and every widget follows. The semantic names are kept only because the
     section->accent map reads better that way. */
  --violet: var(--c1); --pink:   var(--c2);
  --blue:   var(--c3); --mint:   var(--c4);
  --coral:  var(--c5); --cyan:   var(--c6);
  --orchid: var(--c7); --amber:  var(--c8);

  --critical: #ff4d6d;
  --serious:  #ff8c42;
  --warning:  #ffc93c;
  --good:     #3ddc97;

  --grad: linear-gradient(115deg, #a855f7 0%, #ff4d8d 55%, #ff8c42 100%);

  --rail-w: 62px;
  --radius: 14px;
  --radius-sm: 9px;

  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Light mode is a deliberate second design, not an inverted filter. Kept
   restrained on purpose: the dark view is the primary one. */
:root[data-theme="light"] {
  color-scheme: light;
  --page:      #f4f4f8;
  --surface:   #ffffff;
  --raised:    #fafaff;
  --hover:     #eeeef5;
  --border:    #e2e2ec;
  --border-hi: #cdcddb;
  --ink:       #14141c;
  --ink-2:     #4a4a60;
  --ink-3:     #8686a0;
  /* One rule darkens whatever the active theme set, so themes need no light
     variant of their own. Falls back to the theme hex where oklch() relative
     color is unsupported, which is an acceptable degradation. */
  --violet: oklch(from var(--c1) .48 c h); --pink:   oklch(from var(--c2) .48 c h);
  --blue:   oklch(from var(--c3) .48 c h); --mint:   oklch(from var(--c4) .46 c h);
  --coral:  oklch(from var(--c5) .50 c h); --cyan:   oklch(from var(--c6) .48 c h);
  --orchid: oklch(from var(--c7) .48 c h); --amber:  oklch(from var(--c8) .52 c h);
  --critical: #d02840; --serious: #c25a15; --warning: #a67c00; --good: #0d9c63;
}

/* ---------- Accent themes ----------
   Each supplies 8 hues plus a gradient. Surface tints are optional. Light mode
   is handled generically above, so a theme never needs a second definition. */

:root, :root[data-accent="nebula"] {
  --c1:#a855f7; --c2:#ff4d8d; --c3:#4dabf7; --c4:#3ddc97;
  --c5:#ff8c42; --c6:#22d3ee; --c7:#c084fc; --c8:#ffc93c;
  --grad: linear-gradient(115deg, #a855f7 0%, #ff4d8d 55%, #ff8c42 100%);
}
:root[data-accent="electric"] {
  --c1:#6c8cff; --c2:#22d3ee; --c3:#4dabf7; --c4:#5eead4;
  --c5:#a78bfa; --c6:#38bdf8; --c7:#818cf8; --c8:#7dd3fc;
  --grad: linear-gradient(115deg, #6c8cff 0%, #38bdf8 55%, #5eead4 100%);
}
:root[data-accent="sunset"] {
  --c1:#ff7847; --c2:#ff4d8d; --c3:#ffa94d; --c4:#ffd166;
  --c5:#f472b6; --c6:#fb7185; --c7:#c084fc; --c8:#fbbf24;
  --grad: linear-gradient(115deg, #ffd166 0%, #ff7847 50%, #ff4d8d 100%);
}
:root[data-accent="ocean"] {
  --c1:#38bdf8; --c2:#2dd4bf; --c3:#60a5fa; --c4:#34d399;
  --c5:#22d3ee; --c6:#7dd3fc; --c7:#818cf8; --c8:#a7f3d0;
  --grad: linear-gradient(115deg, #60a5fa 0%, #22d3ee 55%, #2dd4bf 100%);
  --page:#070d14; --surface:#0f1822; --raised:#16212d; --border:#22303f; --border-hi:#33465a;
}
:root[data-accent="ember"] {
  --c1:#ff6b4a; --c2:#f87171; --c3:#fbbf24; --c4:#fb923c;
  --c5:#ef4444; --c6:#fdba74; --c7:#f472b6; --c8:#facc15;
  --grad: linear-gradient(115deg, #fbbf24 0%, #ff6b4a 55%, #ef4444 100%);
  --page:#0f0908; --surface:#1a1210; --raised:#241917; --border:#332320; --border-hi:#4a332e;
}
:root[data-accent="forest"] {
  --c1:#4ade80; --c2:#2dd4bf; --c3:#a3e635; --c4:#34d399;
  --c5:#fbbf24; --c6:#5eead4; --c7:#86efac; --c8:#d9f99d;
  --grad: linear-gradient(115deg, #a3e635 0%, #4ade80 55%, #2dd4bf 100%);
  --page:#070f0a; --surface:#101a14; --raised:#17251c; --border:#20342a; --border-hi:#2f4b3c;
}
:root[data-accent="grape"] {
  --c1:#c084fc; --c2:#e879f9; --c3:#a78bfa; --c4:#f0abfc;
  --c5:#8b5cf6; --c6:#d8b4fe; --c7:#f472b6; --c8:#c4b5fd;
  --grad: linear-gradient(115deg, #8b5cf6 0%, #c084fc 55%, #e879f9 100%);
  --page:#0b0713; --surface:#150f1f; --raised:#1e162b; --border:#2b2039; --border-hi:#3d2f50;
}
:root[data-accent="rose"] {
  --c1:#fb7185; --c2:#f472b6; --c3:#fda4af; --c4:#e879f9;
  --c5:#f9a8d4; --c6:#fbcfe8; --c7:#c084fc; --c8:#fcd34d;
  --grad: linear-gradient(115deg, #fb7185 0%, #f472b6 55%, #c084fc 100%);
  --page:#100810; --surface:#1b101a; --raised:#251725; --border:#352132; --border-hi:#4b3047;
}
:root[data-accent="gold"] {
  --c1:#fbbf24; --c2:#f59e0b; --c3:#fcd34d; --c4:#a3e635;
  --c5:#fb923c; --c6:#fde68a; --c7:#eab308; --c8:#facc15;
  --grad: linear-gradient(115deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
  --page:#0f0c05; --surface:#1a1509; --raised:#241d0f; --border:#332918; --border-hi:#4a3c23;
}
:root[data-accent="arctic"] {
  --c1:#7dd3fc; --c2:#a5b4fc; --c3:#93c5fd; --c4:#99f6e4;
  --c5:#c7d2fe; --c6:#bae6fd; --c7:#ddd6fe; --c8:#e0f2fe;
  --grad: linear-gradient(115deg, #bae6fd 0%, #a5b4fc 55%, #ddd6fe 100%);
  --page:#080c12; --surface:#111721; --raised:#18202c; --border:#232d3c; --border-hi:#344255;
}
:root[data-accent="matrix"] {
  --c1:#4ade80; --c2:#22c55e; --c3:#86efac; --c4:#16a34a;
  --c5:#a3e635; --c6:#5eead4; --c7:#bbf7d0; --c8:#65a30d;
  --grad: linear-gradient(115deg, #86efac 0%, #4ade80 55%, #16a34a 100%);
  --page:#000000; --surface:#0a0f0b; --raised:#101711; --border:#1a2a1c; --border-hi:#274029;
}
:root[data-accent="mono"] {
  --c1:#94a3b8; --c2:#cbd5e1; --c3:#64748b; --c4:#a1a1aa;
  --c5:#d4d4d8; --c6:#818cf8; --c7:#e2e8f0; --c8:#a8a29e;
  --grad: linear-gradient(115deg, #e2e8f0 0%, #94a3b8 55%, #64748b 100%);
  --page:#0a0a0b; --surface:#141416; --raised:#1c1c1f; --border:#27272b; --border-hi:#3a3a40;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Ambient wash behind everything, the glow in the reference shots. */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(760px 420px at 12% -8%, color-mix(in srgb, var(--c1) 16%, transparent), transparent 70%),
    radial-gradient(680px 400px at 88% 4%,  color-mix(in srgb, var(--c2) 11%, transparent), transparent 70%);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(760px 420px at 12% -8%, color-mix(in srgb, var(--c1) 10%, transparent), transparent 70%),
    radial-gradient(680px 400px at 88% 4%,  color-mix(in srgb, var(--c2) 7%, transparent), transparent 70%);
}

a { color: var(--blue); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blue) 34%, transparent); }
a:hover { border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: var(--raised); padding: 10px 14px; border-radius: 8px; }

/* ---------- Left rail ---------- */

.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 30;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 12px; gap: 6px;
}

.rail-logo {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--grad);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
  margin-bottom: 14px; flex-shrink: 0;
}

.rail-btn {
  appearance: none; border: 0; cursor: pointer;
  width: 42px; height: 42px; border-radius: 11px;
  background: transparent; color: var(--ink-3);
  display: grid; place-items: center; position: relative;
  transition: background .13s, color .13s;
}
.rail-btn:hover { background: var(--hover); color: var(--ink-2); }
.rail-btn[aria-selected="true"] { background: color-mix(in srgb, var(--c1) 16%, transparent); color: var(--violet); }
.rail-btn[aria-selected="true"]::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--violet);
}
.rail-btn svg { width: 19px; height: 19px; }

.rail-tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--raised); border: 1px solid var(--border);
  padding: 4px 9px; border-radius: 7px; font-size: 11.5px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s; color: var(--ink);
}
.rail-btn:hover .rail-tip { opacity: 1; }

.rail-spacer { flex: 1; }

/* ---------- Shell ---------- */

.shell { margin-left: var(--rail-w); position: relative; z-index: 1; }
main { max-width: 1440px; margin: 0 auto; padding: 26px 26px 10px; }

.view-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 20px;
}
.view-title {
  font-size: 34px; font-weight: 700; letter-spacing: -.028em; margin: 0 0 3px; line-height: 1.05;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.view-meta { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: -.01em; }

.loading, .empty-state { color: var(--ink-3); padding: 60px 0; text-align: center; }
.empty-state strong { display: block; color: var(--ink-2); font-size: 15px; margin-bottom: 5px; }

/* ---------- Countdown rail ---------- */

.countdowns {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.cd {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 14px 12px;
}
.cd::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c, var(--border-hi)); }
.cd[data-status="critical"] { --c: var(--critical); }
.cd[data-status="serious"]  { --c: var(--serious); }
.cd[data-status="warning"]  { --c: var(--warning); }
.cd[data-status="good"]     { --c: var(--good); }
.cd[data-status="critical"] { background: linear-gradient(100deg, color-mix(in srgb, var(--critical) 10%, transparent), transparent 62%), var(--surface); }

.cd-value { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; color: var(--ink); }
.cd-unit  { font-size: 11px; font-weight: 500; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.cd-label { font-size: 12px; color: var(--ink-2); line-height: 1.35; margin-top: 3px; }
.cd-date  { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 5px; }

/* ---------- Widget wall ---------- */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.card { grid-column: span 1; }
.card.span-2 { grid-column: span 2; }
.card.span-full { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.span-2, .card.span-full { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .grid { grid-template-columns: 1fr; }
  .card, .card.span-2, .card.span-full { grid-column: 1 / -1; }
}

.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 0 4px;
  transition: border-color .14s;
}
.card:hover { border-color: var(--border-hi); }

/* Hero widget: gradient hairline + glow bleed, like the Scale cards. */
.card.hero {
  border-color: color-mix(in srgb, var(--c1) 34%, transparent);
  background:
    radial-gradient(620px 190px at 6% 0%, color-mix(in srgb, var(--c1) 15%, transparent), transparent 72%),
    radial-gradient(520px 170px at 96% 0%, color-mix(in srgb, var(--c2) 10%, transparent), transparent 72%),
    var(--surface);
}
.card.hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad);
}

.card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px 11px; border-bottom: 1px solid var(--border);
}
.card-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--violet)) 17%, transparent);
  color: var(--c, var(--violet));
}
.card-icon svg { width: 14px; height: 14px; }
.card-title { font-size: 13.5px; font-weight: 650; letter-spacing: -.012em; margin: 0; color: var(--ink); }
.card-count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--c, var(--ink-3));
  background: color-mix(in srgb, var(--c, var(--ink-3)) 14%, transparent);
  padding: 2px 7px; border-radius: 6px;
}
.card.hero .card-title { font-size: 15px; }

.items { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; }

/* Rows are collapsed by default: a title you can scan, a detail you open.
   The whole point is that the wall of text is opt-in. */
.item {
  position: relative;
  border-left: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
.item + .item { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.item:hover { background: var(--hover); border-left-color: var(--c, var(--violet)); }
.item.has-status { border-left-color: var(--s); }

.item-head {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 15px 10px 17px;
  cursor: pointer; user-select: none;
  background: none; border: 0; width: 100%; text-align: left;
  font: inherit; color: inherit;
}
.item-chev {
  flex-shrink: 0; width: 13px; height: 13px; margin-top: 3px;
  color: var(--ink-3); transition: transform .22s cubic-bezier(.4,0,.2,1), color .12s;
}
.item[data-open="true"] .item-chev { transform: rotate(90deg); color: var(--c, var(--violet)); }
.item-head:hover .item-chev { color: var(--c, var(--violet)); }

.item-title {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; line-height: 1.42; color: var(--ink);
  letter-spacing: -.008em;
}
.item-title .tag { font-weight: 600; }
.card.hero .item-title { font-size: 13.5px; }

/* Height is set in px by JS on toggle, then released to auto. The 0fr->1fr
   grid trick resolved to 0px in this layout, so exact measurement it is. */
.item-body {
  height: 0; overflow: hidden;
  transition: height .26s cubic-bezier(.4,0,.2,1);
}
.item-detail {
  padding: 0 16px 12px 39px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.item-detail strong, .item-detail b { color: var(--ink); font-weight: 600; }
.item-detail em { font-style: italic; }

/* Card-level collapse, so a whole widget can be folded away. */
.card-toggle {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); padding: 2px; margin-left: 4px; display: grid; place-items: center;
  transition: transform .22s cubic-bezier(.4,0,.2,1), color .12s;
}
.card-toggle svg { width: 14px; height: 14px; }
.card-toggle:hover { color: var(--ink); }
.card[data-collapsed="true"] .card-toggle { transform: rotate(-90deg); }
.card-body { overflow: hidden; transition: height .26s cubic-bezier(.4,0,.2,1); }
.no-anim, .no-anim * { transition: none !important; }
.card[data-collapsed="true"] .card-head { border-bottom-color: transparent; }

/* Expand/collapse all */
.view-actions { display: flex; gap: 7px; align-items: center; position: relative; }

/* Accent picker */
.pal-btn {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-2);
  font-family: var(--mono); font-size: 10.5px; padding: 5px 10px 5px 6px; border-radius: 8px;
  transition: border-color .12s, color .12s;
}
.pal-btn:hover { border-color: var(--border-hi); color: var(--ink); }
.pal-swatch { width: 16px; height: 16px; border-radius: 5px; background: var(--grad); flex-shrink: 0; }

.pal-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  background: var(--raised); border: 1px solid var(--border-hi);
  border-radius: 12px; padding: 10px; width: 268px;
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
  display: none; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.pal-pop.open { display: grid; }
.pal-opt {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-2);
  padding: 7px 9px; border-radius: 8px; font-family: var(--sans); font-size: 11.5px;
  transition: border-color .12s, color .12s;
}
.pal-opt:hover { border-color: var(--border-hi); color: var(--ink); }
.pal-opt[aria-checked="true"] { border-color: var(--c1); color: var(--ink); }
.pal-chip { width: 26px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.act-btn {
  appearance: none; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink-2);
  font-family: var(--mono); font-size: 10.5px; padding: 6px 11px; border-radius: 8px;
  transition: border-color .12s, color .12s;
}
.act-btn:hover { border-color: var(--border-hi); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .item-body, .card-body, .item-chev, .card-toggle { transition: none; }
}

.card-note {
  margin: 0; padding: 10px 16px 11px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--ink-3);
}

/* ---------- Tags ----------
   Status always ships icon + label. Color never carries meaning alone. */

.tag {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: 1px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .01em;
  padding: 2px 7px; border-radius: 6px; margin-left: 6px; white-space: nowrap;
  background: var(--raised); border: 1px solid var(--border); color: var(--ink-3);
}
.tag-icon { font-size: 8px; line-height: 1; }
.tag[data-status="critical"] { color: var(--critical); background: color-mix(in srgb, var(--critical) 15%, transparent); border-color: color-mix(in srgb, var(--critical) 38%, transparent); }
.tag[data-status="serious"]  { color: var(--serious);  background: color-mix(in srgb, var(--serious) 15%, transparent);  border-color: color-mix(in srgb, var(--serious) 38%, transparent); }
.tag[data-status="warning"]  { color: var(--warning);  background: color-mix(in srgb, var(--warning) 15%, transparent);  border-color: color-mix(in srgb, var(--warning) 38%, transparent); }
.tag[data-status="good"]     { color: var(--good);     background: color-mix(in srgb, var(--good) 15%, transparent);     border-color: color-mix(in srgb, var(--good) 38%, transparent); }

/* ---------- Banners ---------- */

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: var(--radius); padding: 12px 15px; margin-bottom: 16px; font-size: 12.5px;
  background: color-mix(in srgb, var(--warning) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
  color: var(--ink-2);
}
.banner.crit {
  background: color-mix(in srgb, var(--critical) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--critical) 34%, transparent);
}
.banner strong { color: var(--ink); }
.banner-icon { flex-shrink: 0; margin-top: 1px; }

code {
  font-family: var(--mono); font-size: .87em;
  background: var(--raised); border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 5px; color: var(--orchid);
}

/* ---------- Footer / coverage ---------- */

.coverage {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.cov-chip {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  background: var(--surface); border: 1px solid var(--border);
  padding: 4px 9px; border-radius: 7px;
}
.cov-chip b { color: var(--ink-2); font-weight: 600; }
.cov-chip.warn { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }

.footer { padding: 16px 26px 30px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }

/* ---------- Mobile: rail becomes a top bar ---------- */

@media (max-width: 700px) {
  body { font-size: 14px; }
  .rail {
    flex-direction: row; inset: 0 0 auto 0; width: auto; height: 54px;
    padding: 0 12px; gap: 4px; border-right: 0; border-bottom: 1px solid var(--border);
  }
  .rail-logo { margin-bottom: 0; margin-right: 6px; width: 28px; height: 28px; }
  .rail-btn { width: 38px; height: 38px; }
  .rail-btn[aria-selected="true"]::before { left: 50%; top: auto; bottom: -8px; transform: translateX(-50%); width: 18px; height: 3px; border-radius: 3px 3px 0 0; }
  .rail-tip { display: none; }
  .shell { margin-left: 0; padding-top: 54px; }
  main { padding: 18px 14px 6px; }
  .view-title { font-size: 27px; }
  .countdowns { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 8px; }
  .cd-value { font-size: 22px; }
}

@media print {
  .rail { display: none; } .shell { margin-left: 0; }
  body::before { display: none; }
  .card { break-inside: avoid; }
}