/*
 * Finks API roadmap. Tokens, fonts, type roles and components are copied by value from the status page
 * (Finks-ai/finks-api status/site/style.css), which copies the API dashboard's Signal design: every colour is
 * light-dark(light, dark); dark is the default (<html data-theme="dark">), data-theme="light" pins light, no data-theme
 * follows the OS.
 */
 */
@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { color-scheme: light dark; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

:root {
  /* signal.css */
  --background: light-dark(#ffffff, #0a0a0b);
  --foreground: light-dark(#111113, #ececef);
  --card: light-dark(#ffffff, #181819);
  --popover: light-dark(#ffffff, #202021);
  --muted: light-dark(#f5f5f5, rgb(236 236 239 / 6%));
  --muted-foreground: light-dark(#5d5d66, #b2b2bb);
  --accent: light-dark(rgb(17 17 19 / 8%), rgb(236 236 239 / 10%));
  --border: light-dark(#e5e5e5, rgb(236 236 239 / 7%));
  --input-fill: light-dark(rgb(17 17 19 / 13%), rgb(236 236 239 / 13%));
  --control-border: light-dark(#e5e5e5, rgb(236 236 239 / 38%));
  --field: light-dark(#ffffff, #0a0a0b);
  --brand: var(--foreground);
  --signal: var(--finks-olive);
  --ring: var(--signal);
  --link-line: color-mix(in oklab, currentColor 45%, transparent);
  --shadow-card: 0 1px 2px 0 light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 0%));
  --shadow-popover: 0 12px 28px -10px rgb(0 0 0 / 24%), 0 2px 4px -2px rgb(0 0 0 / 8%);
  /* tokens.css: the brand olive and the status colours (Signal keeps them as they are there) */
  --finks-olive: light-dark(#456626, #b7c48e);
  --success: light-dark(hsl(158 94% 30%), hsl(158 64% 52%));
  --success-foreground: light-dark(hsl(158 94% 24%), hsl(158 64% 70%));
  --warning: light-dark(hsl(36 96% 44%), hsl(48 96% 53%));
  --warning-foreground: light-dark(hsl(36 96% 30%), hsl(48 96% 72%));
  --destructive: light-dark(hsl(0 76% 50%), hsl(0 76% 62%));
  --destructive-foreground: light-dark(hsl(0 76% 32%), hsl(0 94% 82%));
  --info: light-dark(hsl(217 91% 60%), hsl(213 94% 68%));
  --info-foreground: light-dark(hsl(217 91% 34%), hsl(213 94% 68%));
  /* Radii: Signal's --radius 6px on globals.css's scale: rounded-sm (badges) 4px, rounded-lg (controls) 6px,
     rounded-2xl (cards) 12px. */
  --radius: 0.375rem;
  --radius-sm: max(4px, calc(var(--radius) - 4px));
  --radius-lg: var(--radius);
  --radius-2xl: calc(var(--radius) + 6px);
  /* Signal's spacing roles and the page gutter (tokens.css). */
  --related: 0.5rem;
  --group: 1.25rem;
  --section: 3rem;
  --gutter: 1.25rem;
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-base: 150ms;

  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
@media (width >= 48rem) { :root { --gutter: 2.5rem; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 3px; transition: text-decoration-color var(--duration-base) var(--ease-ui); }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: color-mix(in oklch, var(--signal) 32%, transparent); color: var(--foreground); }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted-foreground); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--card); padding: 8px 12px; z-index: 9; }

/* Type roles (globals.css): Geist for text, titles, labels, meta and figures; Geist Mono for code. Two weights. */
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
h1 { font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; line-height: 1.75rem; letter-spacing: -0.01em; }
h3 { font-size: 1rem; line-height: 1.5rem; letter-spacing: -0.01em; }
.label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.meta { font-size: 0.75rem; line-height: 1rem; }
.num { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.stat { font-size: 1.75rem; line-height: 2.25rem; font-weight: 400; }
code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.25rem; }

/* Top bar, cards, pills, footer and theme switch: as on the status page. */
.top { border-bottom: 1px solid var(--border); background: var(--background); }
.top-row { display: flex; align-items: center; justify-content: space-between; height: 3rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.375rem; text-decoration: none; color: var(--foreground); min-height: 2.75rem; }
.wordmark { height: 0.875rem; width: auto; display: block; }
.crumb { font-size: 0.75rem; margin-left: 0.25rem; display: inline-flex; gap: 0.5rem; }
nav { display: flex; gap: 1.25rem; }
nav a { text-decoration: none; color: var(--muted-foreground); display: inline-flex; align-items: center; min-height: 2.75rem; }
nav a:hover { color: var(--foreground); }

main.wrap { padding-top: var(--section); padding-bottom: var(--related); }
main > section { margin-bottom: var(--section); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--related); flex-wrap: wrap; margin-bottom: var(--group); }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-card); }
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding: 0 0.375rem; white-space: nowrap;
  border-radius: var(--radius-sm); font-size: 0.75rem; line-height: 1; font-weight: 500; color: var(--cf);
  background: light-dark(color-mix(in srgb, var(--c) 8%, transparent), color-mix(in srgb, var(--c) 16%, transparent));
}

/* Roadmap stages: now is the brand signal, next info, later muted, shipped success. */
.st-now { --c: var(--signal); --cf: var(--signal); }
.st-next { --c: var(--info); --cf: var(--info-foreground); }
.st-later { --c: var(--muted-foreground); --cf: var(--muted-foreground); }
.st-shipped { --c: var(--success); --cf: var(--success-foreground); }

/* Hero: one statement, one line of context, three figures. */
.hero { padding-bottom: var(--related); }
.eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--signal); margin-bottom: 0.75rem; }
.hero h1 { font-size: 2.5rem; line-height: 2.875rem; letter-spacing: -0.03em; max-width: 44rem; }
.lede { font-size: 1.125rem; line-height: 1.625rem; margin-top: 0.875rem; max-width: 40rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--group); margin: 2rem 0 0; padding-top: var(--group); border-top: 1px solid var(--border); }
.stats dt { font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.stats dd { margin: 0.25rem 0 0; }

/* Theme progress: each theme is a filter button with a ring of shipped / total. */
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--related); }
.theme {
  display: flex; align-items: center; gap: 0.875rem; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 0.875rem var(--group) 0.875rem 0.875rem; transition: background-color var(--duration-base) var(--ease-ui), border-color var(--duration-base) var(--ease-ui);
}
.theme:hover { background: light-dark(color-mix(in srgb, var(--foreground) 3%, var(--card)), color-mix(in srgb, var(--foreground) 4%, var(--card))); }
.theme[aria-pressed="true"] { border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: light-dark(color-mix(in srgb, var(--signal) 6%, var(--card)), color-mix(in srgb, var(--signal) 10%, var(--card))); }
.ring { width: 2.75rem; height: 2.75rem; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4; }
.ring .track { stroke: var(--accent); }
.ring .done { stroke: var(--success); stroke-linecap: round; }
.ring .wip { stroke: var(--signal); stroke-linecap: round; }
.theme .name { display: block; font-weight: 500; }
.theme .meta { display: block; color: var(--muted-foreground); margin-top: 2px; }

/* Toolbar: search plus status and theme chips (shown by app.js; the static page has no use for them). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem var(--group); align-items: center; margin-bottom: var(--group); }
.search { position: relative; flex: 1 1 16rem; max-width: 22rem; display: flex; }
.search svg { position: absolute; left: 0.625rem; top: 50%; translate: 0 -50%; width: 16px; height: 16px; fill: none; stroke: var(--muted-foreground); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input {
  width: 100%; height: 2.25rem; padding: 0 0.75rem 0 2.125rem; font: inherit; color: var(--foreground);
  background: var(--field); border: 1px solid var(--control-border); border-radius: var(--radius-lg);
}
.search input::placeholder { color: var(--muted-foreground); }
.search input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip {
  font: inherit; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); cursor: pointer;
  min-height: 2rem; padding: 0 0.625rem; border-radius: 999px; border: 1px solid transparent; background: var(--muted);
  transition: background-color var(--duration-base) var(--ease-ui), color var(--duration-base) var(--ease-ui);
}
.chip:hover { color: var(--foreground); background: var(--accent); }
.chip[aria-pressed="true"] { color: var(--foreground); border-color: color-mix(in srgb, var(--signal) 55%, transparent); background: light-dark(color-mix(in srgb, var(--signal) 10%, transparent), color-mix(in srgb, var(--signal) 16%, transparent)); }
.chip.clear { background: transparent; border-color: var(--border); border-style: dashed; }

/* Board: one column per shown stage (app.js sets --cols), cards with theme, title and summary. */
.board { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--group); align-items: start; }
.col h3 { display: flex; align-items: center; gap: var(--related); margin-bottom: 0.75rem; }
.col h3 .count { font-size: 0.75rem; color: var(--muted-foreground); font-weight: 400; }
.col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--related); }
.item { display: block; padding: var(--group); text-decoration: none; color: inherit; transition: border-color var(--duration-base) var(--ease-ui), background-color var(--duration-base) var(--ease-ui); }
.item:hover { border-color: color-mix(in srgb, var(--foreground) 20%, transparent); background: light-dark(color-mix(in srgb, var(--foreground) 2%, var(--card)), color-mix(in srgb, var(--foreground) 4%, var(--card))); }
.item:focus-visible { border-radius: var(--radius-2xl); }
.item .when { display: block; margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--success-foreground); }
.item .target, .item .activity { display: block; margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.item .progress { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.item .progress svg { flex: 1; height: 4px; }
.item .progress .track { fill: var(--accent); }
.item .progress .fill { fill: var(--signal); }
.item .progress + .activity { margin-top: 0.25rem; }
.item .tag { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); }
.item .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.item h4 { margin: 0.5rem 0 0.25rem; font-size: 1.0625rem; line-height: 1.375rem; font-weight: 500; letter-spacing: -0.01em; }
.item p { color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.3125rem; }
.empty { padding: var(--group); border: 1px dashed var(--border); border-radius: var(--radius-2xl); color: var(--muted-foreground); font-size: 0.75rem; }

/* Timeline: a scrolling card grouped by month (sticky month heads); the month chips zoom to one month. */
.timeline { max-height: 34rem; overflow: auto; padding: 0 var(--group); overscroll-behavior: contain; }
.timeline .month { position: sticky; top: 0; z-index: 1; background: var(--card); padding: var(--group) 0 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); }
.timeline ol { list-style: none; margin: 0; padding: 0; }
.timeline ol > li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--group); padding: var(--group) 0; border-top: 1px solid var(--border); }
.timeline ol > li:first-child { border-top: 0; }
.timeline time { font-weight: 500; }
.timeline .ver { display: block; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1rem; color: var(--muted-foreground); margin-top: 2px; }
.timeline .pill { white-space: normal; height: auto; min-height: 1.25rem; padding: 0.125rem 0.375rem; line-height: 1rem; text-decoration: none; }
.timeline .pill:hover { text-decoration: underline; }
.timeline ul { margin: 0.375rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }

/* Detail dialog: the dashboard's popover surface, centred; the native backdrop dims the page. */
dialog {
  width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 4rem); overflow: auto; padding: var(--group) calc(var(--group) + 0.25rem) calc(var(--group) + 0.25rem);
  color: var(--foreground); background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-popover);
}
dialog::backdrop { background: rgb(0 0 0 / 50%); backdrop-filter: blur(2px); }
.dhead { display: flex; align-items: center; gap: var(--related); margin-bottom: 0.75rem; }
.close { margin-left: auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--muted-foreground); cursor: pointer; }
.close:hover { background: var(--muted); color: var(--foreground); }
.close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
dialog h2 { margin-bottom: 0.5rem; }
#detail-summary { font-size: 1rem; line-height: 1.5rem; color: var(--muted-foreground); }
#detail-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem var(--group); margin: var(--group) 0 0; padding-top: var(--group); border-top: 1px solid var(--border); }
#detail-facts:empty { display: none; }
#detail-facts dt { color: var(--muted-foreground); }
#detail-facts dd { margin: 0; }
.dlinks { list-style: none; margin: var(--group) 0 0; padding: 0; display: grid; gap: 0.375rem; }

/* View tabs: the segmented control's look at control size. */
.tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-lg); background: var(--muted); }
.tabs button {
  font: inherit; font-weight: 500; font-size: 0.8125rem; color: var(--muted-foreground); cursor: pointer; min-height: 2rem;
  padding: 0 0.75rem; border: 0; border-radius: calc(var(--radius-lg) - 2px); background: transparent;
}
.tabs button:hover { color: var(--foreground); }
.tabs button[aria-selected="true"] { background: light-dark(var(--field), var(--input-fill)); color: var(--foreground); box-shadow: var(--shadow-card); }
.toolbar #result-note { margin-left: auto; }

/* Calendar: a label column and a track per item; bars placed by app.js in % of the window; today is one line. */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem var(--group); margin-bottom: 0.75rem; }
.calendar { overflow-x: auto; padding: 0.5rem var(--group) var(--group); }
.cal { --label: 15rem; position: relative; min-width: 46rem; }
.cal-row { display: grid; grid-template-columns: var(--label) 1fr; align-items: center; min-height: 2.25rem; }
.cal-label { padding-right: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--foreground); }
a.cal-label:hover { text-decoration: underline; text-decoration-color: var(--link-line); }
.cal-track {
  position: relative; height: 2.25rem;
  background: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / var(--cols)));
}
.cal-axis { position: sticky; top: 0; z-index: 1; background: var(--card); border-bottom: 1px solid var(--border); }
.cal-axis .cal-track { background: none; }
.cal-tick { position: absolute; top: 50%; translate: 0.5rem -50%; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); white-space: nowrap; }
.cal-group { padding: 0.875rem 0 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em; }
.bar {
  position: absolute; top: 0.5rem; height: 1.25rem; border-radius: var(--radius-sm); overflow: hidden; display: block;
  background: light-dark(color-mix(in srgb, var(--c) 14%, var(--card)), color-mix(in srgb, var(--c) 22%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.bar:hover { border-color: var(--c); }
.bar.st-shipped { background: var(--c); border-color: var(--c); }
.bar.st-later { border-style: dashed; background: transparent; opacity: 0.8; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--c); opacity: 0.85; }
.cal-now {
  position: absolute; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--destructive); pointer-events: none;
  left: calc(var(--label) + (100% - var(--label)) * var(--today-f));
}
.cal-unscheduled { margin-top: var(--group); padding-top: var(--group); border-top: 1px solid var(--border); }
.cal-unscheduled .chips { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.cal-unscheduled .pill { text-decoration: none; height: auto; min-height: 1.5rem; padding: 0.125rem 0.5rem; white-space: normal; }
.cal-empty { padding: var(--group) 0; color: var(--muted-foreground); }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.75rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.sw { width: 14px; height: 8px; border-radius: 2px; display: inline-block; background: var(--c); }
.sw.dashed { background: transparent; border: 1px dashed var(--c); }
.sw.today { width: 2px; height: 12px; background: var(--destructive); }

.foot { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--group); padding-top: var(--group); padding-bottom: var(--section); border-top: 1px solid var(--border); }
.foot p + p { margin-top: 0.25rem; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-lg); background: var(--muted); flex: none; }
.seg button {
  display: grid; place-items: center; width: 1.75rem; height: 1.5rem; padding: 0; border: 0; border-radius: calc(var(--radius-lg) - 2px);
  background: transparent; color: var(--muted-foreground); cursor: pointer; position: relative;
}
.seg button::after { content: ""; position: absolute; inset: -0.625rem -0.25rem; }
.seg button:hover { color: var(--foreground); }
.seg button[aria-checked="true"] { background: light-dark(var(--field), var(--input-fill)); color: var(--foreground); box-shadow: var(--shadow-card); }
.seg svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 64rem) {
  .board { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); }
}
@media (max-width: 56rem) {
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .crumb { display: none; }
  nav { gap: 1rem; }
  .hero h1 { font-size: 1.75rem; line-height: 2.125rem; }
  .stats { gap: 0.75rem; }
  .stats .stat { font-size: 1.5rem; line-height: 2rem; }
  .themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme { padding: 0.75rem; gap: 0.625rem; }
  .ring { width: 2.25rem; height: 2.25rem; }
  .timeline ol > li { grid-template-columns: 1fr; gap: 0.25rem; }
  .search { max-width: none; }
  .foot { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }