/* ──────────────────────────────────────────────────────────────────
   Horatio Design System — global entry point.
   Consumers link THIS file. Keep it as @import lines only.
------------------------------------------------------------------- */
/* ── Horatio webfonts ──────────────────────────────────────────────
   CDN-loaded (Google Fonts). Binaries are NOT vendored into the repo —
   see README "Typographic personality". If you need offline/self-hosted
   fonts, download the woff2 files and replace this @import with local
   @font-face rules.

   Space Grotesk  — display / headings / big numerals (technical, geometric)
   Manrope        — UI + body (geometric humanist, high legibility)
   JetBrains Mono — metadata: durations, deadlines, counts, ids, kbd
------------------------------------------------------------------- */
/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



/* ──────────────────────────────────────────────────────────────────
   Horatio — Color tokens
   Dark-first, low-eye-strain. Cool-neutral darks (not pure black),
   muted teal accent, hot→cool 5-level priority ramp.
   Base scales first, semantic aliases at the bottom.
------------------------------------------------------------------- */
:root {
  /* ── Neutral scale (cool-neutral, dark-first) ─────────────────── */
  --gray-0:  #0f1011;   /* deepest — behind panels, scrim base   */
  --gray-1:  #161719;   /* app background                        */
  --gray-2:  #1c1d20;   /* sunken / sidebar                      */
  --gray-3:  #212327;   /* panel                                 */
  --gray-4:  #282a2f;   /* card / raised surface                 */
  --gray-5:  #303238;   /* hover surface                         */
  --gray-6:  #3a3c43;   /* active surface / strong border        */
  --gray-7:  #4a4c54;   /* disabled fg, faint dividers on light  */
  --gray-8:  #6c6e78;   /* tertiary text                         */
  --gray-9:  #9a9ca6;   /* secondary text                        */
  --gray-10: #c8c9d0;   /* high-contrast secondary               */
  --gray-11: #e7e8ec;   /* primary text                          */
  --gray-12: #f6f6f8;   /* max-contrast text / pure white-ish     */

  /* ── Accent — muted teal ──────────────────────────────────────── */
  --teal-bright:  #4fd0c0;
  --teal:         #36b3a3;   /* primary accent                    */
  --teal-deep:    #2a9183;
  --teal-darkest: #163b37;
  --accent-tint:  rgba(54, 179, 163, 0.14);   /* subtle fill      */
  --accent-tint-strong: rgba(54, 179, 163, 0.22);
  --accent-ring:  rgba(54, 179, 163, 0.45);    /* focus ring      */

  /* ── Priority ramp (hot → cool, tuned for dark) ───────────────── */
  --prio-urgent:  #f0575d;   /* U  */
  --prio-high:    #f5853f;   /* H  */
  --prio-mhigh:   #e3b341;   /* MH */
  --prio-medium:  #5b93ef;   /* M  */
  --prio-low:     #7e8290;   /* L  cool slate */
  --prio-none:    #43454d;   /* unprioritised — distinct from Low, neutral */

  /* priority fills (chips / left-edges on dark) */
  --prio-urgent-fill: rgba(240, 87, 93, 0.16);
  --prio-high-fill:   rgba(245, 133, 63, 0.16);
  --prio-mhigh-fill:  rgba(227, 179, 65, 0.16);
  --prio-medium-fill: rgba(91, 147, 239, 0.16);
  --prio-low-fill:    rgba(126, 130, 144, 0.16);
  --prio-none-fill:   rgba(120, 122, 132, 0.08);

  /* ── Semantic status hues ─────────────────────────────────────── */
  --green:  #4cae6a;   /* success / done confirmation        */
  --violet: #b08be0;   /* waiting_external / blocked          */
  --amber:  #e3b341;   /* warning                             */
  --red:    #f0575d;   /* danger / overdue / error            */

  --green-fill:  rgba(76, 174, 106, 0.16);
  --violet-fill: rgba(176, 139, 224, 0.16);
  --amber-fill:  rgba(227, 179, 65, 0.16);
  --red-fill:    rgba(240, 87, 93, 0.16);

  /* ════════════════════════════════════════════════════════════════
     SEMANTIC ALIASES — prefer these in components
     ════════════════════════════════════════════════════════════════ */

  /* surfaces */
  --bg-app:          var(--gray-1);
  --surface-sunken:  var(--gray-2);
  --surface-panel:   var(--gray-3);
  --surface-card:    var(--gray-4);
  --surface-hover:   var(--gray-5);
  --surface-active:  var(--gray-6);
  --surface-overlay: #1a1b1e;          /* dialogs / popovers */
  --scrim:           rgba(8, 9, 10, 0.66);

  /* text */
  --text-primary:    var(--gray-11);
  --text-secondary:  var(--gray-9);
  --text-tertiary:   var(--gray-8);
  --text-disabled:   var(--gray-7);
  --text-on-accent:  #062521;          /* on teal fills */
  --text-link:       var(--teal-bright);

  /* borders */
  --border-subtle:   #26282c;
  --border-default:  #2f3137;
  --border-strong:   var(--gray-6);
  --focus-ring:      var(--accent-ring);

  /* accent */
  --accent:          var(--teal);
  --accent-hover:    var(--teal-bright);
  --accent-active:   var(--teal-deep);
  --accent-fg:       var(--text-on-accent);

  /* feedback */
  --success:  var(--green);
  --warning:  var(--amber);
  --danger:   var(--red);
  --info:     var(--prio-medium);
  --blocked:  var(--violet);
  --overdue:  var(--red);
}

/* ──────────────────────────────────────────────────────────────────
   Horatio — Typography tokens
   Space Grotesk (display) · Manrope (UI/body) · JetBrains Mono (meta)
------------------------------------------------------------------- */
:root {
  /* families */
  --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale (rem; 1rem = 16px) — comfortable, UI-first */
  --text-2xs:  0.6875rem;  /* 11px — micro labels, kbd      */
  --text-xs:   0.75rem;    /* 12px — meta, chips            */
  --text-sm:   0.8125rem;  /* 13px — secondary UI, table     */
  --text-base: 0.875rem;   /* 14px — body / default UI       */
  --text-md:   0.9375rem;  /* 15px — comfortable reading     */
  --text-lg:   1.0625rem;  /* 17px — lead / list titles      */
  --text-xl:   1.25rem;    /* 20px — section headings        */
  --text-2xl:  1.5rem;     /* 24px — page subhead            */
  --text-3xl:  1.875rem;   /* 30px — page title              */
  --text-4xl:  2.5rem;     /* 40px — display                 */
  --text-5xl:  3.25rem;    /* 52px — hero numerals           */

  /* weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* line-heights */
  --lh-tight:    1.15; /* @kind font */
  --lh-snug:     1.3; /* @kind font */
  --lh-normal:   1.5; /* @kind font */
  --lh-relaxed:  1.65; /* @kind font */

  /* letter-spacing */
  --ls-tighter: -0.02em; /* @kind font */
  --ls-tight:   -0.01em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.02em; /* @kind font */
  --ls-wider:   0.08em; /* @kind font */
}

/* ──────────────────────────────────────────────────────────────────
   Horatio — Spacing, radii, sizing
   4px base grid. Comfortable density.
------------------------------------------------------------------- */
:root {
  /* spacing scale */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   16px;
  --space-6:   20px;
  --space-7:   24px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-11:  64px;
  --space-12:  80px;

  /* radii — soft (6–10px) */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  /* control heights — comfortable */
  --control-sm: 28px;
  --control-md: 34px;
  --control-lg: 40px;

  /* layout */
  --sidebar-w:    272px;
  --page-max:     760px;   /* markdown reading column   */
  --content-max:  1080px;  /* app content width         */
  --border-w:     1px;
}

/* ──────────────────────────────────────────────────────────────────
   Horatio — Elevation & motion
   On dark, elevation comes mostly from lighter surfaces + hairline
   borders; shadows are deep and soft, used sparingly for overlays.
------------------------------------------------------------------- */
:root {
  /* shadows (deep, soft — for popovers/dialogs/dragging) */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 14px 40px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-default);

  /* focus */
  --ring:        0 0 0 3px var(--focus-ring);
  --ring-inset:  inset 0 0 0 1px var(--accent);

  /* ── Motion — smooth & subtle ──────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */

  --dur-instant: 80ms; /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    300ms; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; /* @kind other */
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}

/* ──────────────────────────────────────────────────────────────────
   Horatio — base element styles (shipped to consumers)
   Resets, document defaults, focus, scrollbars, markdown prose.
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-tint-strong); color: var(--text-primary); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }

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

/* thin, unobtrusive scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--gray-6) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--gray-6);
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--gray-7); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* monospace numerals helper */
.tabular { font-variant-numeric: tabular-nums; }

/* eyebrow / overline label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── Markdown prose (project/task descriptions) ──────────────────── */
.prose { color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.prose > * + * { margin-top: 0.9em; }
.prose h1, .prose h2, .prose h3 { color: var(--text-primary); line-height: var(--lh-snug); margin-top: 1.4em; }
.prose h1 { font-size: var(--text-2xl); }
.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-lg); }
.prose strong { color: var(--text-primary); font-weight: var(--fw-semibold); }
.prose a { color: var(--text-link); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
}
.prose pre {
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow: auto;
}
.prose pre code { background: none; border: none; padding: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: var(--space-5);
  color: var(--text-tertiary);
  margin-left: 0;
}
.prose hr { border: none; border-top: 1px solid var(--border-default); margin: 1.6em 0; }



  html, body { height: 100%; }
  body { margin: 0; overflow: hidden; }
  #app { height: 100vh; display: flex; background: var(--bg-app); color: var(--text-primary); font-family: var(--font-sans); }
  .sidebar { width: 272px; flex: none; background: var(--surface-sunken); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 14px 10px; gap: 4px; }
  .brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 12px; }
  .brand-mark { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-fg); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
  .brand-word { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
  .qa { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; border: none; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg); font-family: var(--font-sans); font-weight: 600; font-size: 14px; cursor: pointer; margin: 4px 4px 10px; }
  .qa svg { width: 16px; height: 16px; }
  .nav { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; font-weight: 500; }
  .nav svg { width: 17px; height: 17px; }
  .nav--active { background: var(--accent-tint); color: var(--accent-hover); }
  .nav-count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); background: var(--surface-active); border-radius: var(--radius-full); padding: 1px 7px; }
  .sec-label { padding: 16px 10px 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
  .tree { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; }
  .tree svg { width: 15px; height: 15px; color: var(--text-tertiary); }
  .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid var(--border-subtle); min-height: 56px; }
  .eyebrow2 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
  .title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 2px; }
  .bar-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
  .body { overflow-y: auto; padding: 24px 28px 80px; flex: 1; }
  .col { max-width: 780px; margin: 0 auto; }
  .sec { margin-bottom: 26px; }
  .sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 12px; }
  .sec-head .eyebrow2 { font-size: 11px; }
  .list > * + * { border-top: 1px solid var(--border-subtle); }