/* console — Linear's design language, ported honestly.
 *
 * ONE stylesheet, ONE :root. Pages link this and never declare a palette of their own;
 * two pages with two private :root blocks is the drift this file exists to end.
 *
 * WHY LINEAR, AND WHAT WE ACTUALLY TOOK
 * Linear is the most rigorously built keyboard-first list app shipping, and every page here is a
 * list of things with state. The values below were scraped from Linear's production CSS, not
 * eyeballed from screenshots. What makes it read as Linear, in order of importance:
 *
 *   1. Inter at 15px with NEGATIVE tracking (-0.011em), tightening as text shrinks. Not 16px.
 *   2. Borders do the work that shadows do elsewhere. In dark mode there is NO shadow below the
 *      highest elevation — a popover is a translucent-white hairline, nothing more.
 *   3. 100ms ease-out on everything interactive. 250ms only for things that move a long way.
 *   4. Exactly one accent, indigo, and it means "selected" or "link" — never decoration.
 *
 * What we did NOT take: Linear ships Berkeley Mono (paid) for issue IDs and code. We have neither,
 * so there is no webfont monospace here at all. Every number is Inter with tabular figures, which
 * is what Linear does for numbers too. `--mono` survives as a system stack for genuine code.
 *
 * Inter is SIL OFL and self-hosted as a variable font: one file per subset covers the whole weight
 * axis, hence `font-weight: 300 700`. latin-ext is not optional — ₹ (U+20B9) lives there, and every
 * rent figure needs it.
 *
 * Weights are Inter's variable-axis values as Linear sets them, and they are deliberately odd:
 *   400 normal · 510 medium · 590 semibold · 680 bold.  Rounding 510 to 500 visibly softens the UI.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  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;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
/* LIGHT. Linear's light theme: white canvas, cool near-black ink. Not warm, not #000. */

:root {
  --canvas:          #ffffff;
  --instrument:      #f4f4f4;   /* bg-level-2 — the hero plate sinks below canvas in daylight */
  --surface:         #f8f8f8;   /* bg-level-1 — panels */
  --surface-raised:  #ffffff;   /* popovers, menus: white + a real shadow */
  --hairline:        #e9e8ea;
  --hairline-strong: #dcdbdd;
  --ink:             #282a30;   /* 12.9:1 on canvas */
  --ink-dim:         #3c4149;   /* 10.2:1 — descriptions, body prose */
  --ink-faint:       #6f6e77;   /*  5.3:1 — meta, still safely readable */
  --ink-ghost:       #86848d;   /*  3.6:1 — disabled and decorative ONLY, never a fact */

  /* One accent, indigo. Brand #5e6ad2 clears 4.70:1 on white, so it is safe as link text here. */
  --accent:        #5e6ad2;
  --accent-bright: #7070ff;
  --accent-deep:   #4a54b8;
  --accent-wash:   #5e6ad21f;
  --brand:         #5e6ad2;     /* button fill — identical in both themes, like Linear's */
  --on-accent:     #ffffff;

  /* Semantic. Linear's hue family, but contrast-checked pairs: its raw #eb5757 is a 3.4:1 glyph
     colour and fails as text on white. Glyph fills use --status-*; text uses these. */
  --positive: #1a7f37;  --positive-bg: #1a7f3714;
  --negative: #cf222e;  --negative-bg: #cf222e14;
  --warning:  #9a6700;  --warning-bg:  #9a670014;
  --muted:    #6f6e77;  --muted-bg:    #6f6e770f;

  /* Status glyph fills. Never text — these are drawn, so Linear's raw values are correct. */
  --status-backlog:   #86848d;
  --status-todo:      #6f6e77;
  --status-started:   #f2c94c;
  --status-done:      #5e6ad2;
  --status-cancelled: #86848d;
  --priority-urgent:  #fc7840;

  --sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;   /* genuine code only */

  /* Linear's radius scale. 4px controls, 6px buttons/inputs/menu items, 8px cards, 12px modals. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Dark mode gets NO shadow below the top elevation; light mode gets soft, low-opacity ones. */
  --shadow-low:  0 1px 4px -1px #00000017;
  --shadow-high: 0 7px 24px #0000000f, 0 0 0 1px #0000000a;
  --overlay:     #ffffffa6;

  --focus: 0 0 0 2px var(--accent);

  /* 100ms is the workhorse. Anything slower has to justify itself. */
  --dur: .1s;
  --dur-slow: .25s;
  --ease: cubic-bezier(.215, .61, .355, 1);   /* ease-out-cubic. No bounce, ever. */
}

/* DARK. Linear's native theme, and the one its palette was designed in: canvas #08090a, borders as
 * translucent white rather than solid grey.
 *
 * Two selectors, one value set, because CSS has no way to share a declaration block between a
 * media query and an attribute selector. They must be edited together. An explicit `data-theme`
 * always beats the OS preference, in both directions: that's why the media query excludes
 * `[data-theme="light"]` rather than simply targeting `:root`. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:          #08090a;
    --instrument:      #0f1011;   /* in the dark the hero plate RISES above canvas */
    --surface:         #0f1011;
    --surface-raised:  #191a1b;
    --hairline:        #ffffff14;
    --hairline-strong: #ffffff26;
    --ink:             #f7f8f8;
    --ink-dim:         #d0d6e0;
    --ink-faint:       #8a8f98;
    --ink-ghost:       #62666d;

    /* Brand #5e6ad2 falls to 4.18:1 on #08090a. Linear lifts link/accent text to #7170ff (4.99:1)
       in the dark and keeps #5e6ad2 only as a button FILL, where white sits on top of it. */
    --accent:        #7170ff;
    --accent-bright: #828fff;
    --accent-deep:   #5e6ad2;
    --accent-wash:   #7170ff26;
    --brand:         #5e6ad2;
    --on-accent:     #ffffff;

    --positive: #3fb950;  --positive-bg: #3fb9501a;
    --negative: #ff7b72;  --negative-bg: #ff7b721a;
    --warning:  #d29922;  --warning-bg:  #d299221a;
    --muted:    #8a8f98;  --muted-bg:    #8a8f9814;

    --status-backlog:   #62666d;
    --status-todo:      #8a8f98;
    --status-started:   #f2c94c;
    --status-done:      #7170ff;
    --status-cancelled: #62666d;
    --priority-urgent:  #fc7840;

    --shadow-low:  0 0 0 transparent;
    --shadow-high: 0 7px 32px #00000059;
    --overlay:     #000000d9;
  }
}

/* Explicit dark, chosen by the toggle. Keep in lockstep with the block above. */
:root[data-theme="dark"] {
  --canvas:          #08090a;
  --instrument:      #0f1011;
  --surface:         #0f1011;
  --surface-raised:  #191a1b;
  --hairline:        #ffffff14;
  --hairline-strong: #ffffff26;
  --ink:             #f7f8f8;
  --ink-dim:         #d0d6e0;
  --ink-faint:       #8a8f98;
  --ink-ghost:       #62666d;

  --accent:        #7170ff;
  --accent-bright: #828fff;
  --accent-deep:   #5e6ad2;
  --accent-wash:   #7170ff26;
  --brand:         #5e6ad2;
  --on-accent:     #ffffff;

  --positive: #3fb950;  --positive-bg: #3fb9501a;
  --negative: #ff7b72;  --negative-bg: #ff7b721a;
  --warning:  #d29922;  --warning-bg:  #d299221a;
  --muted:    #8a8f98;  --muted-bg:    #8a8f9814;

  --status-backlog:   #62666d;
  --status-todo:      #8a8f98;
  --status-started:   #f2c94c;
  --status-done:      #7170ff;
  --status-cancelled: #62666d;
  --priority-urgent:  #fc7840;

  --shadow-low:  0 0 0 transparent;
  --shadow-high: 0 7px 32px #00000059;
  --overlay:     #000000d9;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  /* 15px, not 16. `cv01` is Inter's single-storey `a`; `ss03` its curved `l`. Both are Linear's. */
  font: 400 0.9375rem/1.6 var(--sans);
  letter-spacing: -0.011em;
  font-feature-settings: 'cv01', 'ss03';
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Every figure. Columns must align; digits must not jitter when a refresh lands.
   Inter's tabular figures, not a monospace face — same thing Linear does. */
.num, .metric, .readout-v, td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv01', 'ss03';
}

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }

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

.wrap { max-width: 1180px; margin: 0 auto; padding: 48px 22px 72px; }

/* ── Type ───────────────────────────────────────────────────────────────────── */
/* Tracking tightens as size drops. This is the single most Linear-ish thing in the file, and the
   thing clones most often skip: 10px labels sit at -0.015em, 15px body at -0.011em. */

/* Section names. Sentence case, 13px, semibold — NOT uppercase letterspaced mono. Linear never
   shouts a heading; it just makes it slightly heavier than the rows beneath it. */
.label {
  display: block;
  font: 590 0.8125rem/1.5 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}

h1, .display {
  margin: 0;
  font: 590 clamp(1.5rem, 3.5vw, 2.25rem)/1.1 var(--sans);
  letter-spacing: -0.022em;
}

h2, .title { margin: 0; font: 590 1.25rem/1.3 var(--sans); letter-spacing: -0.02em; }

.prose { max-width: 68ch; color: var(--ink-dim); font-size: 0.875rem; letter-spacing: -0.013em; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
/* 32px tall, 6px radius, 13px medium, sentence case. Linear's buttons are quiet and small; the old
   44px uppercase mono slabs were the loudest thing on every page here. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 510 0.8125rem/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary { background: var(--brand); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-bright); }
.btn-primary:active:not(:disabled) { background: var(--accent-deep); }

.btn-secondary { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn-secondary:hover { background: var(--surface); border-color: var(--hairline-strong); }

.btn-quiet { background: transparent; color: var(--ink-faint); padding: 0 8px; }
.btn-quiet:hover { background: var(--surface); color: var(--ink); }

.btn svg { width: 14px; height: 14px; flex: none; }
.btn.is-busy svg { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Chips ──────────────────────────────────────────────────────────────────── */

.chip {
  min-height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink-faint);
  font: 510 0.8125rem/1 var(--sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent-wash); border-color: transparent; color: var(--accent); }

/* ── Panels. Flat at rest. No resting shadow, anywhere, ever. ───────────────── */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 20px;
}

/* ── Tags ───────────────────────────────────────────────────────────────────── */

.tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font: 510 0.75rem/1.5 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;   /* "No response" split across two lines reads as two facts */
}
.tag-flag  { color: var(--warning);  background: var(--warning-bg); }
.tag-muted { color: var(--ink-faint); background: var(--muted-bg); }

/* ── Notices ────────────────────────────────────────────────────────────────── */
/* Full border + background tint. Never a side stripe. */

.notice {
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  letter-spacing: -0.013em;
  color: var(--ink-dim);
}
.notice-warn { border-color: var(--warning); background: var(--warning-bg); color: var(--warning); }
.notice-err  { border-color: var(--negative); background: var(--negative-bg); color: var(--negative); }