/* Trackline product page — Quiet Dispatch Board, Persuade mode */

:root {
  --rail: #17263f;
  --rail-deep: #0f1b2e;
  --rail-line: rgba(159, 176, 200, .2);
  --rail-ink: #dce7f5;
  --rail-muted: #a7b6cb;
  --paper: #edf2f6;
  --plate: #ffffff;
  --ink: #172946;
  --ink-2: #4c5d76;
  --ink-3: #5a6a80;
  --line: #d4dfe9;
  --line-soft: #e3eaf1;
  --teal: #16a89a;
  --teal-deep: #118f84;
  --teal-text: #127a70;
  --teal-bright: #5ce0d2;
  --mint: #c7f0ea;
  --coral: #ef947c;
  --coral-text: #9c3d28;
  --coral-wash: #fde3da;

  --display: Manrope, ui-sans-serif, system-ui, sans-serif;
  --body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rail-w: clamp(390px, 36vw, 540px);
  --rail-pad: clamp(40px, 4.4vw, 72px);
  --wrap: 1180px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
  font-family: var(--body);
  font-size: 100%;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scrollbar-color: #9fb2c5 var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; background: var(--paper); }
img, svg { display: block; }
a { color: var(--teal-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code { font-family: var(--mono); font-size: .88em; }
::selection { background: #75d8ce; color: #10243b; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 5px; background: var(--plate); color: var(--ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Header ---------- */
.site-head {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  height: 72px;
  background: linear-gradient(90deg, var(--rail) 0 var(--rail-w), var(--paper) var(--rail-w));
}
.brand { display: inline-flex; align-items: center; gap: 11px; align-self: center; justify-self: start; margin-left: var(--rail-pad); color: #fff; text-decoration: none; font: 800 15px/1 var(--display); letter-spacing: .01em; }
.brand:hover { color: #fff; }
.brand-icon { width: 30px; height: 30px; box-shadow: 0 0 0 1px rgba(159, 176, 200, .25); border-radius: 7px; }
.site-head .brand:focus-visible, .rail-zone :focus-visible, .source :focus-visible, .site-foot :focus-visible { outline-color: var(--teal-bright); }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 clamp(20px, 3vw, 48px); }
.site-nav a { padding: 8px 12px; border-radius: 6px; color: var(--ink-2); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--ink); background: #e2eaf2; }
.site-nav .nav-gh { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; border: 1px solid #c4d2e0; color: var(--ink); }
.site-nav .nav-gh .ic { font-size: 17px; }

/* ---------- Theatre: rail + sticky replica ---------- */
.theatre {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: auto auto;
  background: linear-gradient(90deg, var(--rail) 0 var(--rail-w), var(--paper) var(--rail-w));
}
.hero, .steps { grid-column: 1; color: var(--rail-ink); }
.hero { grid-row: 1; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); display: flex; flex-direction: column; justify-content: center; padding: 24px var(--rail-pad) 96px; }
.hero h1 { font-size: clamp(2.6rem, 2.2vw + 1.6rem, 4.1rem); color: #fff; max-width: 11ch; }
.hero-lede { margin-top: 26px; max-width: 34ch; font-size: clamp(1.0625rem, .35vw + .95rem, 1.25rem); line-height: 1.55; color: var(--rail-ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 38px; }
.cta {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 22px 15px 19px; border-radius: 6px;
  background: var(--teal-deep); color: #fff;
  font: 800 1.1875rem/1.2 var(--display); letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 8px 20px rgba(2, 10, 23, .22);
  transition: background .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.cta .ic { font-size: 21px; }
.cta:hover { background: #0d7f74; color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(2, 10, 23, .28); }
.cta:active { transform: translateY(0); }
.hero .cta:focus-visible, .close .cta:focus-visible { outline-color: var(--teal-bright); outline-offset: 3px; }
.close .cta:focus-visible { outline-color: var(--teal); }
.cta-quiet { display: inline-flex; align-items: center; gap: 7px; color: var(--rail-ink); font-weight: 700; font-size: 1rem; text-decoration: none; padding: 6px 0; border-bottom: 1px solid rgba(220, 231, 245, .35); }
.cta-quiet:hover { color: #fff; border-bottom-color: var(--teal-bright); }
.cta-quiet:focus-visible { outline-color: var(--teal-bright); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 44px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--rail-line); color: var(--rail-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-bright); }

.steps { grid-row: 2; position: relative; padding-bottom: 12vh; }
.steps::before, .steps::after { content: ""; position: absolute; left: calc(var(--rail-pad) - 27px); top: 0; bottom: 0; width: 2px; }
.steps::before { background: var(--rail-line); }
.steps::after { background: var(--teal-bright); transform: scaleY(var(--progress, 0)); transform-origin: top; transition: transform .12s linear; }
.step { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding: 48px var(--rail-pad); }
.step h2 { position: relative; font-size: clamp(1.75rem, 1.1vw + 1.2rem, 2.35rem); color: #fff; max-width: 15ch; }
.station { position: absolute; left: -33px; top: .3em; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5f7391; background: var(--rail); z-index: 1; transition: border-color .3s, background .3s, box-shadow .3s; }
.step.is-past .station { border-color: var(--teal-bright); }
.step.is-active .station { border-color: var(--teal-bright); background: var(--teal-bright); box-shadow: 0 0 0 5px rgba(92, 224, 210, .16); }
.step p { margin-top: 18px; max-width: 40ch; color: var(--rail-ink); }
.step p strong { color: #fff; }
.step .step-note { margin-top: 16px; color: var(--rail-muted); font-size: .9375rem; }
.files { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.files li { justify-self: start; max-width: 100%; overflow-wrap: anywhere; padding: 7px 10px; border-radius: 5px; background: rgba(255, 255, 255, .06); border: 1px solid var(--rail-line); color: var(--rail-ink); font: 500 .75rem/1.4 var(--mono); }

.board-wrap { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.board-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 28px clamp(20px, 3vw, 52px); }
.board-frame { margin: 0; width: min(100%, 1040px); container: board / inline-size; }
.board-caption { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--ink-3); font-size: .8125rem; }
.board-caption-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hover-only { display: none; }
@media (hover: hover) and (pointer: fine) { span.hover-only { display: inline; } p.hover-only { display: block; } }

/* ---------- Replica ---------- */
.board {
  --b-bg: #edf2f6; --b-plate: #fff; --b-line: #d4dfe9; --b-line2: #e5ebf1; --b-soft: #fafcfe;
  --b-ink: #172946; --b-ink2: #5d6e85; --b-ink3: #65758b; --b-top: rgba(255, 255, 255, .62);
  --b-btn2: #e6edf4; --b-btn2-ink: #18304f; --b-rail: #17263f; --b-rail-active: #263b59;
  --b-meter: #e9eef3; --b-hover: #f4f8fb;
  --wl-teal: #c7f0ea; --wl-teal-ink: #153852; --wl-teal-rule: #30aa9f;
  --wl-blue: #dce3ff; --wl-blue-ink: #304272; --wl-blue-rule: #6e82df;
  --wl-violet: #e6dffc; --wl-violet-ink: #46376f; --wl-violet-rule: #9276d8;
  --b-h: min(calc(100vh - 200px), 760px);
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  height: max(var(--b-h), 540px);
  border-radius: 12px;
  overflow: hidden;
  background: var(--b-bg);
  color: var(--b-ink);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 30px 70px rgba(12, 28, 52, .16), 0 3px 10px rgba(12, 28, 52, .06), 0 0 0 1px rgba(23, 38, 63, .08);
  transition: background .3s, color .3s;
}
.board[data-theme="dark"] {
  --b-bg: #050608; --b-plate: #0a0e13; --b-line: #222d39; --b-line2: #1b2530; --b-soft: #080c11;
  --b-ink: #edf3f8; --b-ink2: #a9b6c6; --b-ink3: #8c9aab; --b-top: #07090c;
  --b-btn2: #17212d; --b-btn2-ink: #e6eef6; --b-rail: #080b10; --b-rail-active: #151e29;
  --b-meter: #1a232d; --b-hover: #111922;
  --wl-teal: #245b61; --wl-teal-ink: #e4ffff;
  --wl-blue: #384979; --wl-blue-ink: #eef2ff;
  --wl-violet: #4a3e71; --wl-violet-ink: #f3eaff;
}
.board button:focus-visible { outline-offset: 1px; }

.b-rail { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 18px 0 14px; background: var(--b-rail); border-right: 1px solid rgba(148, 170, 199, .18); color: #9fb0c8; transition: background .3s; }
.b-mark { display: inline-flex; align-items: flex-end; gap: 3px; width: 23px; height: 21px; margin-bottom: 22px; padding-bottom: 3px; border-bottom: 2px solid var(--teal-bright); }
.b-mark i { width: 5px; border-radius: 1px; background: var(--teal-bright); }
.b-mark i:nth-child(1) { height: 7px; } .b-mark i:nth-child(2) { height: 13px; } .b-mark i:nth-child(3) { height: 10px; }
.b-nav { display: grid; place-items: center; width: 38px; height: 36px; border-radius: 8px; font-size: 17px; transition: background .3s, color .3s, box-shadow .3s; }
.board[data-view="calendar"] .b-nav-cal, .board[data-view="team"] .b-nav-team, .board[data-view="tickets"] .b-nav-team { color: #f4fbff; background: var(--b-rail-active); box-shadow: inset 2px 0 var(--teal-bright); }
.b-spacer { flex: 1; }
.b-avatar { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 10px; border-radius: 50%; background: #6176e9; color: #fff; font-size: 10px; font-weight: 800; }

.b-main { display: grid; grid-template-rows: 58px minmax(0, 1fr); min-width: 0; min-height: 0; }
.b-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px 0 16px; border-bottom: 1px solid var(--b-line); background: var(--b-top); transition: background .3s, border-color .3s; }
.b-week { display: flex; align-items: center; gap: 6px; min-width: 0; }
.b-week > .ic { font-size: 17px; color: var(--b-ink2); }
.b-week div { padding: 0 4px; min-width: 0; }
.b-week strong { display: block; font: 700 13px/1.2 var(--display); white-space: nowrap; }
.b-week div span { display: block; margin-top: 2px; font-size: 10px; color: var(--b-ink3); white-space: nowrap; }
.b-sub-team { display: none !important; }
.board[data-view="team"] .b-sub-team, .board[data-view="tickets"] .b-sub-team { display: block !important; }
.board[data-view="team"] .b-sub-cal, .board[data-view="tickets"] .b-sub-cal { display: none !important; }
.b-today { margin-left: 4px; padding: 5px 9px; border: 1px solid var(--b-line); border-radius: 5px; font-size: 11px; font-weight: 600; }
.b-actions { display: flex; align-items: center; gap: 7px; }
.b-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--b-ink2); font-size: 16px; }
.b-icon:hover { background: var(--b-btn2); color: var(--b-ink); }
.b-icon .ic-sun, .board[data-theme="dark"] .b-icon .ic-moon { display: none; }
.board[data-theme="dark"] .b-icon .ic-sun { display: block; }
.b-export, .b-primary { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 6px; padding: 7px 11px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.b-export { background: var(--b-btn2); color: var(--b-btn2-ink); }
.b-export:hover { filter: brightness(.97); }
.b-primary { background: #0e8579; color: #fff; box-shadow: 0 5px 12px rgba(15, 139, 130, .19); }
.b-primary:hover { background: #0d7f74; }
.b-export .ic, .b-primary .ic { font-size: 14px; }

.b-views { display: grid; grid-template-areas: "v"; min-height: 0; position: relative; }
.b-view { grid-area: v; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 18px 20px 18px; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility 0s; }
.board:not([data-view="calendar"]) .b-cal, .board:not([data-view="team"]) .b-team, .board:not([data-view="tickets"]) .b-tickets { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }

.b-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.b-titles { min-width: 0; }
.b-title { display: block; font: 800 19px/1.15 var(--display); letter-spacing: -.04em; }
.b-summary { display: block; margin-top: 4px; color: var(--b-ink3); font-size: 11px; }
.b-focus-only { display: none; }
.board[data-focus="on"] .b-focus-only { display: inline; }
.b-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; }
.b-switch, .b-static { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 2px 0; background: transparent; color: var(--b-ink2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.b-switch:hover { color: var(--b-ink); }
.tg { display: inline-block; flex: 0 0 auto; width: 28px; height: 16px; padding: 2px; border-radius: 9px; background: #bcc9d5; transition: background .25s; }
.tg > i { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease-out); }
.tg.on, .b-switch[aria-checked="true"] .tg { background: #35b5a7; }
.tg.on > i, .b-switch[aria-checked="true"] .tg > i { transform: translateX(12px); }
.b-count { display: none; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #fde3da; color: var(--coral-text); font-size: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.board[data-focus="on"] .b-count { display: inline-block; }
.board[data-theme="dark"] .b-count { background: #4a2a22; color: #ffc2b1; }
.b-tabs { display: inline-flex; padding: 2px; border: 1px solid var(--b-line); border-radius: 6px; }
.b-tabs span { padding: 4px 9px; border-radius: 4px; color: var(--b-ink3); font-size: 11px; }
.b-tabs .sel { background: var(--b-plate); color: var(--b-ink); box-shadow: 0 1px 3px rgba(150, 170, 190, .5); }
.board[data-theme="dark"] .b-tabs .sel { background: #18222d; box-shadow: none; }

.b-legend { display: flex; align-items: center; gap: 15px; margin: 14px 0 10px; color: var(--b-ink3); font-size: 10px; }
.b-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #49cfc2; }
.dot.blue { background: #7588e9; } .dot.coral { background: var(--coral); }
.b-legend-help { margin-left: auto; color: #418479; }
.board[data-theme="dark"] .b-legend-help { color: #7fd9cf; }

/* Week calendar */
.cal {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 46px repeat(5, minmax(0, 1fr));
  grid-template-rows: 60px minmax(0, 1fr);
  border: 1px solid var(--b-line); border-radius: 9px; overflow: hidden;
  background: var(--b-plate);
  box-shadow: 0 9px 24px rgba(31, 53, 82, .055);
  transition: background .3s, border-color .3s;
}
.board[data-theme="dark"] .cal { box-shadow: none; }
.cal-corner { border-bottom: 1px solid var(--b-line2); background: var(--b-soft); }
.cal-day { position: relative; padding: 11px 9px 8px; border-bottom: 1px solid var(--b-line2); border-left: 1px solid var(--b-line2); white-space: nowrap; overflow: hidden; transition: background .35s; }
.cal-day > span { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--b-ink3); }
.cal-day > strong { margin-left: 4px; font: 800 17px/1 var(--display); }
.cal-day > small { display: block; margin-top: 6px; color: var(--b-ink2); font-size: 10px; font-weight: 700; }
.cal-day > small b { font-weight: 500; color: var(--b-ink3); }
.cal-day > span, .cal-day > strong, .cal-day > small { transition: opacity .35s; }
.meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--b-meter); }
.meter::after { content: ""; display: block; height: 100%; width: calc(var(--p) * 100%); background: #39bbaf; transition: background .35s; }
.cal-day.is-today, .lane.is-today { background: rgba(51, 204, 190, .055); }
.miss { display: none; margin-left: 5px; padding: 0 5px; border-radius: 3px; background: #fde3da; color: var(--coral-text); font-style: normal; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.board[data-theme="dark"] .miss { background: #4a2a22; color: #ffc2b1; }

.cal-times { display: grid; grid-template-rows: repeat(11, minmax(0, 1fr)); background: var(--b-soft); color: var(--b-ink3); font-size: 9px; font-variant-numeric: tabular-nums; }
.cal-times span { transform: translate(8px, -6px); }
.cal-times span:first-child { transform: translate(8px, 3px); }
.cal-grid { grid-column: 2 / -1; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lane {
  position: relative; border-left: 1px solid var(--b-line2);
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--b-line2) calc(100% - 1px));
  background-size: 100% calc(100% / 11);
  transition: background-color .35s;
}
.js .board[data-view="calendar"] .lane { cursor: pointer; }

.wl {
  position: absolute; z-index: 2;
  top: calc((var(--s) - 7) / 11 * 100% + 2px);
  height: calc(var(--d) / 11 * 100% - 5px);
  left: calc(var(--col, 0) * 100% / var(--cols, 1) + 4px);
  width: calc(100% / var(--cols, 1) - 8px);
  padding: 6px 7px 5px; overflow: hidden;
  border-radius: 4px; border-top: 2px solid var(--wl-teal-rule);
  background: var(--wl-teal); color: var(--wl-teal-ink);
  box-shadow: 0 2px 3px rgba(28, 89, 103, .1);
  transition: opacity .35s, background .3s, color .3s;
}
.wl.blue { background: var(--wl-blue); color: var(--wl-blue-ink); border-top-color: var(--wl-blue-rule); }
.wl.violet { background: var(--wl-violet); color: var(--wl-violet-ink); border-top-color: var(--wl-violet-rule); }
.wl b, .wl span, .wl em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl b { font-size: 9px; letter-spacing: .05em; }
.wl span { font-size: 10px; line-height: 15px; font-weight: 600; }
.wl em { margin-top: 2px; font-size: 9px; font-style: normal; opacity: .78; }

.now-line { position: absolute; left: 0; right: 0; z-index: 4; top: calc((var(--s) - 7) / 11 * 100%); height: 1px; background: #ee856d; pointer-events: none; }
.now-line::before { content: ""; position: absolute; left: calc(60% - 4px); top: -3px; width: 7px; height: 7px; border-radius: 50%; background: #ee856d; }
.now-line span { position: absolute; left: -44px; top: -7px; color: #d96f58; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }

.slot {
  position: absolute; z-index: 3; left: 4px; right: 4px;
  top: calc((var(--s) - 7) / 11 * 100% + 2px);
  height: calc(100% / 11 - 5px); min-height: 18px;
  display: none; align-items: flex-start; gap: 4px;
  padding: 4px 7px; border: 1px dashed #5cc4b9; border-radius: 4px;
  background: rgba(22, 168, 154, .08); color: #127a70;
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none;
}
.slot .ic { font-size: 11px; margin-top: 1px; }
.board[data-theme="dark"] .slot { border-color: #3f9f95; background: rgba(92, 224, 210, .07); color: #7fd9cf; }
.board[data-dialog="log"] .slot, .board.is-hovering .slot { display: flex; }

/* Focus on incomplete days */
.board[data-focus="on"] .miss { display: inline-block; }
.board[data-focus="on"] .cal-day.is-short { background: rgba(239, 148, 124, .13); }
.board[data-focus="on"] .cal-day.is-short .meter::after { background: var(--coral); }
.board[data-focus="on"] .lane.is-short { background-color: rgba(239, 148, 124, .07); }
.board[data-focus="on"] .cal-day:not(.is-short) > :not(.meter),
.board[data-focus="on"] .lane:not(.is-short) .wl { opacity: .42; }
.board[data-theme="dark"][data-focus="on"] .cal-day.is-short { background: rgba(239, 148, 124, .15); }

/* Team grid */
.b-scope { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 16px 0 12px; }
.b-scope-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.b-scope-label { margin-right: 3px; color: var(--b-ink2); font-size: 11px; font-weight: 700; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--b-line); border-radius: 5px; background: var(--b-plate); font-size: 11px; font-weight: 700; white-space: nowrap; }
.chip .ic { font-size: 12px; color: var(--b-ink3); }
.chip small { color: var(--b-ink2); font-weight: 500; }
.chip-add { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px dashed #b9c8d6; border-radius: 5px; color: #187e74; font-size: 11px; font-weight: 700; white-space: nowrap; }
.board[data-theme="dark"] .chip-add { border-color: #34404e; color: #7fd9cf; }
.av { display: inline-grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #6176e9; color: #fff; font-size: 8px; font-weight: 800; font-style: normal; line-height: 1; }
.av-s { width: 16px; height: 16px; font-size: 7px; }
.av-l { width: 34px; height: 34px; font-size: 12px; }

.tgrid-wrap { flex: 0 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--b-line); border-radius: 9px; background: var(--b-plate); box-shadow: 0 9px 24px rgba(31, 53, 82, .055); }
.board[data-theme="dark"] .tgrid-wrap { box-shadow: none; }
.tgrid { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tgrid th, .tgrid td { padding: 0; border-bottom: 1px solid var(--b-line2); border-left: 1px solid var(--b-line2); text-align: center; font-size: 11px; }
.tgrid thead th { position: sticky; top: 0; z-index: 2; padding: 8px 4px 7px; background: var(--b-soft); font-weight: 700; }
.tgrid thead th span { display: block; color: var(--b-ink3); font-size: 9px; letter-spacing: .08em; }
.tgrid thead th strong { font: 800 14px var(--display); }
.tgrid thead th.today-col { box-shadow: inset 0 2px 0 var(--teal); }
.tgrid thead th.today-col strong { color: var(--teal-deep); }
.board[data-theme="dark"] .tgrid thead th.today-col strong { color: var(--teal-bright); }
.tgrid .pc { min-width: 150px; padding: 0 12px; border-left: 0; text-align: left; }
.tgrid thead .pc { color: var(--b-ink2); font-size: 10px; }
.person { display: flex; align-items: center; gap: 8px; min-height: 42px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.person .pin { font-size: 11px; color: var(--b-ink3); }
.hc button { position: relative; width: 100%; min-width: 48px; height: 42px; border: 0; background: transparent; color: inherit; font-size: 11px; font-weight: 700; transition: opacity .35s, background .2s; }
.hc button:hover { background: var(--b-hover); }
.hc.empty button { color: #9aa7b6; font-weight: 500; }
.board[data-theme="dark"] .hc.empty button { color: #5a6878; }
.hc small { display: none; margin-top: 1px; color: var(--coral-text); font-size: 9px; font-weight: 700; }
.board[data-theme="dark"] .hc small { color: #ffb4a3; }
.cm { position: absolute; left: 7px; right: 7px; bottom: 5px; height: 3px; overflow: hidden; border-radius: 2px; background: var(--b-meter); }
.cm::after { content: ""; display: block; height: 100%; width: calc(var(--p) * 100%); background: #39bbaf; }
.hc { transition: background .35s; }
.board[data-focus="on"] .hc.is-short { background: rgba(239, 148, 124, .14); }
.board[data-focus="on"] .hc.is-short small { display: block; }
.board[data-focus="on"] .hc.is-short .cm::after { background: var(--coral); }
.board[data-focus="on"] .hc:not(.is-short) button { opacity: .4; }
.tgrid .tc { min-width: 58px; padding: 0 10px; background: var(--b-soft); font-weight: 800; }
.tgrid tfoot th, .tgrid tfoot td { padding: 9px 4px; border-top: 1px solid var(--b-line); border-bottom: 0; background: var(--b-soft); font-weight: 800; }
.tgrid tfoot .pc { padding: 9px 12px; font-size: 11px; }

/* Replica dialogs */
.b-modal { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px; background: rgba(8, 18, 34, .5); opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.b-dialog { position: relative; width: min(450px, 100%); max-height: 100%; overflow: hidden; padding: 22px 24px; border-radius: 10px; background: #fff; color: #1a2b47; box-shadow: 0 22px 60px rgba(2, 10, 23, .3); transform: translateY(14px) scale(.98); transition: transform .5s var(--ease-out); }
.board[data-dialog="log"] .b-modal-log, .board[data-dialog="export"] .b-modal-export, .board[data-dialog="detail"] .b-modal-detail { opacity: 1; visibility: visible; transition: opacity .3s .12s, visibility 0s; }
.board[data-dialog="log"] .b-modal-log .b-dialog, .board[data-dialog="export"] .b-modal-export .b-dialog, .board[data-dialog="detail"] .b-modal-detail .b-dialog { transform: none; transition-delay: .12s; }
.b-close { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 5px; background: transparent; color: #718299; font-size: 17px; }
.b-close:hover { background: #eef3f7; }
.b-dlabel { display: block; color: #2f9d92; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.b-dtitle { display: block; margin: 5px 0 4px; font: 800 20px/1.15 var(--display); letter-spacing: -.04em; }
.b-dcopy { margin: 0 0 14px; color: #5d6e85; font-size: 11px; }
.b-flabel { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; }
.b-picker { border: 1px solid #ccd9e6; border-radius: 6px; overflow: hidden; }
.b-filters { display: flex; gap: 2px; padding: 3px; background: #f3f6f9; border-bottom: 1px solid #dde6ee; }
.b-filters span { flex: 1; padding: 5px 8px; border-radius: 4px; color: #5d6e85; font-size: 11px; font-weight: 600; text-align: center; }
.b-filters .sel { background: #fff; color: #172946; box-shadow: 0 1px 3px #cfd9e4; }
.b-search { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-bottom: 1px solid #e3eaf1; font-size: 12px; }
.b-search .ic { color: #7a8aa0; font-size: 13px; }
.caret { width: 1px; height: 14px; margin-left: -8px; background: #172946; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.b-options { padding: 3px; }
.b-group { padding: 6px 8px 3px; color: #5d6e85; font-size: 10px; font-weight: 700; }
.b-opt { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); column-gap: 9px; align-items: baseline; padding: 6px 8px; border-radius: 5px; }
.b-opt.active { background: #e8f5f3; }
.b-opt b { font-size: 10px; letter-spacing: .03em; white-space: nowrap; }
.b-opt > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.b-opt small { grid-column: 2 / -1; color: #5d6e85; font-size: 10px; }
.it { align-self: center; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; color: #fff; font-size: 11px; }
.it .ic { stroke-width: 2.4; }
.it.bug { background: #e5493a; } .it.story { background: #63ba3c; } .it.task { background: #4bade8; }
.b-fields { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; margin-top: 12px; }
.b-field { display: grid; gap: 5px; font-size: 10px; font-weight: 700; }
.b-input { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 9px; border: 1px solid #ccd9e6; border-radius: 5px; background: #fff; font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; }
.b-select .ic { color: #7a8aa0; }
.b-desc { margin-top: 10px; }
.b-textarea { align-items: flex-start; min-height: 46px; padding-top: 7px; }
.b-dfoot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 16px; }
.b-cancel { color: #63758d; font-size: 11px; font-weight: 700; }
.b-save { padding: 8px 12px; }
.b-scopes { display: grid; gap: 7px; }
.b-scope-opt { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid #d5e0e9; border-radius: 6px; }
.b-scope-opt.sel { border-color: #24a99d; background: #effaf8; }
.b-scope-opt .tag { width: 40px; padding: 6px 0; border-radius: 4px; background: #e6edf6; color: #53708c; font-size: 8px; font-weight: 800; text-align: center; }
.b-scope-opt div { flex: 1; min-width: 0; }
.b-scope-opt strong, .b-scope-opt small { display: block; }
.b-scope-opt strong { font-size: 12px; }
.b-scope-opt small { margin-top: 2px; color: #5d6e85; font-size: 10px; }
.b-scope-opt i { display: grid; place-items: center; width: 16px; color: #159c8f; font-size: 15px; }
.b-dialog-detail { width: min(400px, 100%); }
.b-detail-head { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.b-detail-head .b-dtitle { margin: 0; font-size: 18px; }
.b-detail-meta { display: block; margin-top: 2px; color: #5d6e85; font-size: 11px; }
.b-detail-list { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid #e3eaf1; }
.b-detail-list li { padding: 9px 0; border-bottom: 1px solid #e3eaf1; }
.b-detail-list li div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: baseline; }
.b-detail-list b { font-size: 10px; letter-spacing: .03em; }
.b-detail-list span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.b-detail-list em { font-style: normal; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.b-detail-list small { display: block; margin-top: 2px; color: #5d6e85; font-size: 10px; }
.b-detail-empty { margin: 14px 0 0; color: #5d6e85; font-size: 12px; }

/* No JS: the calendar is the replica */
html:not(.js) .b-team, html:not(.js) .b-modal { display: none; }

/* Replica container adaptations */
@container board (max-width: 820px) {
  .b-legend { display: none; }
  .b-hide-we { display: none; }
  .b-view { padding: 14px 14px 14px; }
  .cal { margin-top: 12px; }
}
@container board (max-width: 640px) {
  .board { grid-template-columns: minmax(0, 1fr); }
  .b-rail, .b-today, .b-week > .ic, .b-tabs, .b-scope, .b-dcopy, .b-desc, .b-legend-help { display: none; }
  .b-main { grid-template-rows: 46px minmax(0, 1fr); }
  .b-topbar { padding: 0 10px; }
  .b-week strong { font-size: 12px; }
  .b-export { padding: 6px 8px; }
  .b-export span, .b-export { font-size: 0; gap: 0; }
  .b-export .ic { font-size: 14px; }
  .b-primary { padding: 6px 9px; }
  .b-view { padding: 10px 8px 8px; }
  .b-head { align-items: center; }
  .b-title { font-size: 15px; }
  .b-summary { font-size: 10px; }
  .b-switch { font-size: 10px; gap: 5px; }
  .b-switch .sw-long { display: none; }
  .cal { margin-top: 8px; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); grid-template-rows: 46px minmax(0, 1fr); border-radius: 7px; }
  .cal-day { padding: 7px 4px 6px; }
  .cal-day > span { font-size: 8px; letter-spacing: .04em; }
  .cal-day > strong { font-size: 13px; margin-left: 2px; }
  .cal-day > small { margin-top: 3px; font-size: 9px; }
  .cal-day > small b { display: none; }
  .miss { display: none !important; }
  .cal-times span { transform: translate(4px, -5px); font-size: 8px; }
  .now-line span { left: -32px; font-size: 8px; }
  .wl { padding: 3px 4px; left: calc(var(--col, 0) * 100% / var(--cols, 1) + 2px); width: calc(100% / var(--cols, 1) - 4px); }
  .wl b { font-size: 8px; letter-spacing: .02em; }
  .wl span { display: none; }
  .wl em { font-size: 8px; margin-top: 0; }
  .slot { left: 2px; right: 2px; padding: 2px 3px; font-size: 9px; }
  .slot .ic { display: none; }
  .tgrid .pc { min-width: 0; padding: 0 6px; }
  .person { gap: 5px; min-height: 34px; font-size: 10px; }
  .person .av { display: none; }
  .person .pin { font-size: 9px; }
  .tgrid thead th { padding: 5px 2px; }
  .tgrid thead th strong { font-size: 12px; }
  .hc button { min-width: 0; height: 34px; font-size: 10px; }
  .hc small { font-size: 8px; }
  .cm { left: 4px; right: 4px; bottom: 3px; }
  .tgrid .tc { min-width: 0; padding: 0 4px; }
  .tgrid tfoot th, .tgrid tfoot td { padding: 7px 2px; font-size: 10px; }
  .b-dialog { padding: 16px 16px; }
  .b-dtitle { font-size: 17px; }
  .b-opt small { display: none; }
  .b-opt:last-child { display: none; }
  .b-fields { gap: 6px; }
  .b-input { min-height: 28px; padding: 0 6px; font-size: 11px; }
  .b-scope-opt small { font-size: 9px; }
}

/* ---------- Sections ---------- */
.today, .details, .privacy, .connect, .download, .source, .close { padding: clamp(88px, 10vw, 140px) max(24px, calc((100% - var(--wrap)) / 2)); }
section h2 { font-size: clamp(2rem, 1.8vw + 1.3rem, 3rem); }

.today { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(48px, 7vw, 110px); align-items: start; }
.today-copy > p { margin-top: 20px; max-width: 54ch; color: var(--ink-2); }
.today-copy > h2 { max-width: 16ch; }
.today-copy strong { color: var(--ink); }
.dayrule { position: relative; margin-top: 56px; max-width: 640px; padding-bottom: 150px; }
.dayrule-track { position: relative; height: 30px; border-bottom: 2px solid var(--line); }
.dayrule-track span { position: absolute; left: calc(var(--h) / 8 * 100%); top: 0; transform: translateX(-50%); color: var(--ink-3); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dayrule-track span::after { content: ""; position: absolute; left: 50%; top: 22px; width: 1px; height: 8px; background: #b9c8d6; }
.dayrule-mark { position: absolute; left: calc(var(--h) / 8 * 100%); top: 28px; width: 2px; height: 46px; margin-left: -1px; background: #ee856d; }
.dayrule-mark::before { content: ""; position: absolute; left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #ee856d; box-shadow: 0 0 0 4px rgba(239, 148, 124, .2); }
.notice { position: absolute; top: 74px; right: calc(12.5% - 36px); display: flex; gap: 12px; align-items: flex-start; width: min(340px, 100%); padding: 13px 15px; border-radius: 12px; background: var(--plate); box-shadow: 0 16px 36px rgba(15, 30, 50, .14), 0 0 0 1px rgba(23, 38, 63, .07); }
.notice-icon { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; }
.notice div { min-width: 0; display: grid; gap: 1px; font-size: .875rem; line-height: 1.4; }
.notice-app { color: var(--ink-3); font-size: .75rem; font-weight: 600; }
.notice-app em { font-style: normal; font-weight: 500; margin-left: 4px; }
.notice strong { font-weight: 700; }
.notice div > span:last-child { color: var(--ink-2); }

.pulse { padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 9px; background: #f7fafd; box-shadow: 0 9px 24px rgba(31, 53, 82, .07); font-size: 12px; line-height: 1.45; }
.pulse-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pulse-head > .ic { font-size: 22px; color: #46b8ac; }
.pulse-label { display: block; color: #2f9d92; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.pulse-total { display: block; margin-top: 7px; font: 800 29px/1 var(--display); letter-spacing: -.06em; }
.pulse-total b { font: 500 12px var(--body); letter-spacing: 0; color: #5f6f85; }
.pulse-bar { height: 7px; margin-top: 18px; border-radius: 10px; background: #dfe8ef; overflow: hidden; }
.pulse-bar i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: #38b9ac; }
.pulse-copy { margin: 10px 0 14px; color: #5f6f85; }
.pulse-action { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 18px; padding: 6px 10px; border: 1px solid #9fd8d1; border-radius: 5px; background: #effaf8; color: #127a70; font-size: 11px; font-weight: 700; }
.pulse-reminder { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-top: 1px solid #dce5ed; border-bottom: 1px solid #dce5ed; }
.pulse-bell { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #e2f3f1; color: #299e93; font-size: 17px; }
.pulse-reminder div { flex: 1; }
.pulse-reminder strong, .pulse-reminder small { display: block; }
.pulse-reminder small { color: #5f6f85; font-size: 10px; }
.pulse-sec { margin-top: 20px; }
.pulse-sec-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.pulse-sec-head strong { font: 700 12px var(--display); }
.pulse-sec-head small { display: inline-flex; align-items: center; gap: 2px; color: #5f6f85; font-size: 10px; font-weight: 600; }
.pulse-sec-head small .ic { color: #318b82; }
.att, .rw { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid #e1e8ef; }
.att div, .rw div { flex: 1; min-width: 0; }
.att strong { display: block; font-size: 11px; }
.att small { display: block; color: #b0543d; font-size: 10px; font-weight: 600; }
.att-log { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border: 1px solid #cbd8e5; border-radius: 4px; font-size: 10px; font-weight: 700; }
.glyph { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 2px; background: #49b9ad; }
.glyph.coral { background: #ec8d72; } .glyph.blue { background: #7588e9; } .glyph.violet { background: #8c7cdb; }
.rw b { display: block; color: #587387; font-size: 9px; }
.rw strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }
.rw em { color: #5f6f85; font-size: 10px; font-style: normal; }
.rw > .ic { color: #8190a3; font-size: 13px; }

.details { background: var(--plate); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.details h2 { max-width: 18ch; }
.timetable { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); margin: 48px 0 0; border-top: 2px solid var(--ink); }
.timetable > div { display: grid; grid-template-columns: minmax(150px, 13rem) minmax(0, 1fr); gap: 20px; padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.timetable dt { display: flex; align-items: baseline; gap: 10px; font: 800 1.0625rem/1.35 var(--display); letter-spacing: -.02em; }
.timetable dt::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; background: var(--teal); transform: translateY(-2px); }
.timetable dd { margin: 0; color: var(--ink-2); font-size: 1rem; }

.privacy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto auto auto; column-gap: clamp(48px, 7vw, 110px); }
.privacy-copy { grid-column: 1; }
.privacy-copy h2 { max-width: 17ch; }
.privacy-copy p { margin-top: 20px; max-width: 50ch; color: var(--ink-2); }
.privacy-list { grid-column: 1; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: 620px; }
.privacy-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.privacy-list .ic { margin-top: 4px; font-size: 18px; color: var(--teal-text); }
.privacy-list strong { color: var(--ink); }
.privacy-foot { grid-column: 1; margin-top: 18px; max-width: 62ch; color: var(--ink-3); font-size: .875rem; }
.privacy-foot code { color: var(--ink-2); }
.route { grid-column: 2; grid-row: 1 / 4; align-self: start; display: grid; justify-items: start; padding: 44px 40px; border-radius: 9px; background: var(--rail); color: var(--rail-ink); box-shadow: 0 22px 50px rgba(15, 27, 46, .18); }
.route-stop { display: grid; grid-template-columns: 48px auto; column-gap: 16px; align-items: center; }
.route-stop strong, .route-ghost strong { font: 800 1rem/1.3 var(--display); color: #fff; }
.route-stop small, .route-ghost small { grid-column: 2; color: var(--rail-muted); font-size: .8125rem; }
.route-dot { grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--teal-bright); background: #0f1b2e; color: var(--teal-bright); font-size: 20px; }
.route-line { position: relative; width: 48px; height: 190px; }
.route-line::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--teal-bright); }
.route-ghost { position: absolute; left: 96px; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 40px auto; column-gap: 14px; align-items: center; white-space: nowrap; opacity: .72; }
.route-ghost::before { content: ""; position: absolute; left: -70px; top: 50%; width: 64px; border-top: 2px dashed #5f7391; }
.route-ghost strong { color: var(--rail-muted); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.route-dot.ghost { width: 40px; height: 40px; border: 2px dashed #5f7391; background: transparent; color: #7f93b0; font-size: 16px; }

.connect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); column-gap: clamp(48px, 7vw, 110px); align-items: center; background: var(--plate); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stations { position: relative; margin: 40px 0 0; padding: 0; list-style: none; display: grid; gap: 30px; }
.stations::before { content: ""; position: absolute; left: 17px; top: 20px; bottom: 20px; width: 2px; background: var(--mint); }
.stations li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; }
.st-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--teal); background: var(--plate); color: var(--teal-text); font: 800 .9375rem/1 var(--display); }
.stations strong { display: block; margin-top: 5px; font: 800 1.125rem/1.3 var(--display); letter-spacing: -.02em; }
.stations p { margin-top: 4px; color: var(--ink-2); }
.settings { padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); box-shadow: 0 9px 24px rgba(31, 53, 82, .07); font-size: 13px; }
.settings-intro { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; margin-bottom: 20px; }
.settings-intro > .ic { margin-top: 2px; color: #6c7d94; font-size: 17px; }
.settings-intro strong { display: block; font: 800 15px/1.3 var(--display); }
.settings-intro small { display: block; margin-top: 4px; color: #5d6e85; font-size: 12.5px; line-height: 1.5; }
.s-field { display: grid; gap: 6px; margin-top: 13px; }
.s-label { display: flex; justify-content: space-between; color: #3e5069; font-size: 12px; font-weight: 700; }
.s-link { display: inline-flex; align-items: center; gap: 4px; color: #157f75; }
.s-input { display: flex; align-items: center; height: 36px; padding: 0 10px; border: 1px solid #ccd9e6; border-radius: 5px; background: #fff; color: #172946; white-space: nowrap; overflow: hidden; }
.s-secret { letter-spacing: .12em; color: #3e5069; }
.s-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.s-foot > span:first-child { display: inline-flex; align-items: center; gap: 6px; color: #5d6e85; font-size: 12px; }
.s-foot .b-primary { padding: 9px 13px; font-size: 12px; }

.source { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: clamp(48px, 7vw, 110px); align-items: center; background: var(--rail); color: var(--rail-ink); }
.source h2 { color: #fff; }
.source-copy p { margin-top: 20px; max-width: 42ch; }
.prereqs { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rail-line); }
.prereqs li { padding: 12px 0; border-bottom: 1px solid var(--rail-line); color: var(--rail-muted); }
.prereqs a, .terminal-note a { color: #fff; font-weight: 700; text-decoration-color: var(--teal-bright); }
.prereqs a:hover { color: var(--teal-bright); }
.terminal { border-radius: 9px; background: var(--rail-deep); border: 1px solid var(--rail-line); box-shadow: 0 24px 60px rgba(2, 10, 23, .35); overflow: hidden; }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--rail-line); color: var(--rail-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .02em; }
.copy { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #3a4f6d; border-radius: 5px; background: transparent; color: var(--rail-ink); font-size: .8125rem; font-weight: 700; transition: border-color .2s, color .2s; }
.copy:hover { border-color: var(--teal-bright); color: #fff; }
.copy.is-done { border-color: var(--teal-bright); color: var(--teal-bright); }
.terminal pre { margin: 0; padding: 20px 22px 22px; overflow-x: auto; font: 500 .9375rem/2 var(--mono); color: #e6eef8; }
.cmd { display: inline; }
.cmd::before { content: "$ "; color: var(--teal-bright); user-select: none; }
.terminal-note { padding: 14px 18px 16px; border-top: 1px solid var(--rail-line); color: var(--rail-muted); font-size: .875rem; }
.terminal-note code { color: var(--rail-ink); }

.close { display: grid; justify-items: center; text-align: center; padding-top: 0; }
.close::before { content: ""; width: 2px; height: clamp(72px, 8vw, 110px); margin-bottom: 30px; background: linear-gradient(var(--rail) 0, var(--teal) 100%); }
.close h2 { max-width: 15ch; font-size: clamp(2.2rem, 2.6vw + 1.2rem, 3.6rem); }
.close p { margin: 18px 0 34px; color: var(--ink-2); }

.site-foot { padding: 44px max(24px, calc((100% - var(--wrap)) / 2)) 40px; background: var(--rail-deep); color: var(--rail-muted); font-size: .875rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 24px; border-bottom: 1px solid var(--rail-line); }
.site-foot .brand { margin-left: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot-nav a { color: var(--rail-ink); font-weight: 600; text-decoration: none; }
.foot-nav a:hover { color: var(--teal-bright); text-decoration: underline; }
.foot-legal { margin-top: 20px; max-width: 80ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .site-nav a[href="#connect"] { display: none; }
}

@media (max-width: 1023px) {
  .site-head { grid-template-columns: 1fr auto; height: 64px; background: var(--rail); }
  .brand { margin-left: 24px; }
  .site-nav { padding: 0 16px; }
  .site-nav a:not(.nav-gh) { display: none; }
  .site-nav .nav-gh { color: var(--rail-ink); border-color: #3a4f6d; }
  .site-nav .nav-gh:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .site-nav .nav-gh:focus-visible { outline-color: var(--teal-bright); }

  .theatre { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; background: var(--paper); }
  .hero { grid-column: 1; grid-row: 1; min-height: 0; padding: 40px 24px 56px; background: var(--rail); }
  .hero h1 { max-width: 13ch; }
  .board-wrap { grid-column: 1; grid-row: 2; z-index: 3; pointer-events: none; }
  .board-sticky { top: 0; height: auto; padding: 12px 12px 10px; background: var(--paper); box-shadow: 0 10px 18px -10px rgba(23, 38, 63, .25); pointer-events: auto; }
  .board { --b-h: min(56vh, 520px); height: var(--b-h); height: min(56svh, 520px); }
  .board-caption { margin-top: 8px; font-size: .75rem; }
  .steps { grid-column: 1; grid-row: 2; z-index: 1; padding: calc(min(56vh, 520px) + 76px) 0 16vh; color: var(--ink); }
  .steps::before, .steps::after { display: none; }
  .step { min-height: 72vh; justify-content: flex-start; padding: 28px 24px 24px; }
  .step h2 { color: var(--ink); max-width: 20ch; font-size: clamp(1.6rem, 4vw + .8rem, 2.1rem); padding-left: 26px; }
  .station { left: 0; top: .32em; border-color: #b9c8d6; background: var(--paper); }
  .step.is-active .station { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 4px rgba(22, 168, 154, .16); }
  .step.is-past .station { border-color: var(--teal); }
  .step p { color: var(--ink-2); max-width: 52ch; }
  .step p strong { color: var(--ink); }
  .step .step-note { color: var(--ink-3); }
  .files li { background: var(--plate); border-color: var(--line); color: var(--ink); }

  .today, .privacy, .connect, .download, .source { grid-template-columns: minmax(0, 1fr); }
  .download .platforms, .download .first-launch { grid-column: 1; grid-row: auto; }
  .pulse { max-width: 380px; margin-top: 56px; }
  .dayrule { margin-top: 44px; }
  .route { grid-column: 1; grid-row: auto; margin-top: 40px; width: 100%; max-width: 520px; }
  .privacy-list, .privacy-foot { grid-column: 1; }
  .settings { margin-top: 44px; max-width: 520px; }
  .terminal { margin-top: 40px; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .timetable { grid-template-columns: minmax(0, 1fr); }
  .timetable > div { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .notice { right: auto; left: 0; }
  .route { padding: 32px 24px; }
  .route-ghost { left: 84px; }
  .route-ghost::before { left: -60px; width: 54px; }
  .route-stop strong { overflow-wrap: anywhere; }
  .terminal pre { font-size: .8125rem; padding: 16px 16px 18px; }
  .pulse { margin-top: 8px; }
  .dayrule { padding-bottom: 150px; }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 2.35rem; }
  .cta { font-size: 1.1875rem; padding: 14px 18px 14px 16px; }
  .route-ghost small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
}

/* ---------- Download ---------- */
.hero-release { margin-top: 14px; color: var(--rail-muted); font-size: .8125rem; font-weight: 600; }
.hero-release a { color: var(--rail-ink); }
.download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 580px); grid-template-rows: auto 1fr; column-gap: clamp(48px, 7vw, 110px); row-gap: 36px; align-items: start; }
.download-copy p { margin-top: 20px; max-width: 42ch; color: var(--ink-2); }
.platforms { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 9px; background: var(--plate); box-shadow: 0 9px 24px rgba(31, 53, 82, .07); overflow: hidden; }
.platform { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-top: 1px solid var(--line-soft); }
.platform:first-child { border-top: 0; }
.platform strong { display: block; font: 800 1.0625rem/1.3 var(--display); letter-spacing: -.01em; }
.platform small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .8125rem; }
.platform.is-yours { background: #effaf8; }
.platform.is-yours strong::after { content: "Your system"; margin-left: 10px; padding: 2px 7px; border-radius: 4px; background: var(--mint); color: var(--teal-text); font: 700 .6875rem/1.4 var(--body); letter-spacing: .02em; vertical-align: 2px; }
.dl-group { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dl { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 5px; background: var(--teal-deep); color: #fff; font-size: .875rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s; }
.dl:hover { background: #0d7f74; color: #fff; }
.dl-quiet { background: transparent; color: var(--teal-text); border: 1px solid var(--line); padding: 8px 11px; }
.dl-quiet:hover { background: #effaf8; color: var(--teal-text); border-color: #9fd8d1; }
.first-launch { grid-column: 1; grid-row: 2; max-width: 48ch; }
.first-launch h3 { margin: 0; font: 800 1.125rem/1.3 var(--display); letter-spacing: -.02em; }
.first-launch p { margin-top: 8px; color: var(--ink-2); }
.first-launch ul { margin: 14px 0 0; padding-left: 18px; color: var(--ink-2); }
.first-launch li + li { margin-top: 8px; }
.first-launch li strong { color: var(--ink); }
.first-launch-links { font-weight: 700; }
.first-launch-links a { color: var(--teal-text); }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; }
.close-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line); padding: 6px 0; }
.close-link:hover { border-bottom-color: var(--teal); color: var(--teal-text); }
@media (max-width: 560px) {
  .platform { flex-direction: column; align-items: flex-start; }
  .dl-group { justify-content: flex-start; }
}

/* ---------- Replica: tickets view ---------- */
.tk-summary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 10px; margin: 14px 0 10px; }
.tk-card { padding: 10px 12px; border: 1px solid var(--b-line); border-radius: 8px; background: var(--b-plate); }
.tk-card-title { display: flex; justify-content: space-between; color: var(--b-ink2); font-size: 10px; font-weight: 700; }
.tk-card-title b { color: var(--b-ink); font: 800 12px var(--display); }
.tk-split { display: flex; gap: 2px; height: 8px; margin: 9px 0 8px; overflow: hidden; border-radius: 4px; background: var(--b-meter); }
.tk-split i { flex: var(--h) 1 0; }
.tk-split .capex, .tk-legend .capex { background: var(--teal); }
.tk-split .opex, .tk-legend .opex { background: #7588e9; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 10px; }
.tk-legend li { display: flex; align-items: center; gap: 5px; }
.tk-legend .dot { width: 7px; height: 7px; border-radius: 2px; }
.tk-legend b { font-variant-numeric: tabular-nums; }
.tk-legend small { color: var(--b-ink3); }
.tk-types { display: grid; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 10px; }
.tk-types li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 38px; align-items: center; gap: 8px; }
.tk-types span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tk-types i { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #8c9fb5 calc(var(--p) * 100%), var(--b-meter) 0); }
.board[data-theme="dark"] .tk-types i { background: linear-gradient(90deg, #5f7187 calc(var(--p) * 100%), var(--b-meter) 0); }
.tk-types b { text-align: right; font-variant-numeric: tabular-nums; }
.tk-wrap { flex: 1 1 auto; }
.tk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10px; font-variant-numeric: tabular-nums; }
.tk-table th, .tk-table td { padding: 6px 8px; border-bottom: 1px solid var(--b-line2); text-align: left; vertical-align: middle; }
.tk-table thead th { position: sticky; top: 0; z-index: 2; background: var(--b-soft); color: var(--b-ink2); font-size: 9px; font-weight: 700; white-space: nowrap; }
.tk-table .num { text-align: right; white-space: nowrap; }
.tk-table .strong { font-weight: 800; }
.tk-table tbody .tk-ticket { font-weight: 400; }
.tk-cell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tk-cell > span { min-width: 0; }
.tk-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tk-line b { flex: 0 0 auto; font-size: 9px; letter-spacing: .03em; }
.tk-line strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 600; }
.tk-cell small { display: block; margin-top: 1px; color: var(--b-ink3); font-size: 9px; }
.fchip { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #eef3f7; color: #2d4260; font-size: 9px; font-weight: 700; white-space: nowrap; }
.fchip.capex { background: #dff4f1; color: #0f6e65; }
.fchip.opex { background: #e6eaff; color: #34458a; }
.board[data-theme="dark"] .fchip { background: #18222d; color: #c9d6e4; }
.board[data-theme="dark"] .fchip.capex { background: #123c3d; color: #8ce1d8; }
.board[data-theme="dark"] .fchip.opex { background: #252e55; color: #c3cdff; }
.funset { color: var(--b-ink3); font-size: 9px; }
.spent { display: grid; gap: 3px; min-width: 88px; }
.spent small { color: var(--b-ink3); font-weight: 500; }
.spent-bar { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #39bbaf calc(var(--p) * 100%), var(--b-meter) 0); }
.spent-bar.over { background: linear-gradient(90deg, var(--coral) calc(var(--p) * 100%), var(--b-meter) 0); }
.spent .over-text { color: var(--coral-text); font-weight: 700; }
.board[data-theme="dark"] .spent .over-text { color: #ffb4a3; }
.stack { display: inline-flex; }
.stack .av { margin-left: -2px; box-shadow: 0 0 0 2px var(--b-plate); }
.stack .av:first-child { margin-left: 0; }
.tk-table tfoot th, .tk-table tfoot td { position: sticky; bottom: 0; z-index: 1; padding: 7px 8px; border-top: 1px solid var(--b-line); border-bottom: 0; background: var(--b-soft); font-weight: 800; }
@container board (max-width: 820px) {
  .tk-by { display: none; }
}
@container board (max-width: 640px) {
  .tk-summary { grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 8px 0 6px; }
  .tk-card:last-child { display: none; }
  .tk-type { display: none; }
  .tk-table th, .tk-table td { padding: 5px 5px; }
  .tk-cell .it, .tk-cell small { display: none; }
  .tk-line strong { display: none; }
  .spent { min-width: 0; }
  .spent small, .spent .over-text { display: none; }
}