/* Civic Candor — design tokens + layout primitives
 *
 * This file is the single source of truth for Civic Candor's visual language.
 * Copied verbatim from docs/design/civic-atlas/project/styles.css (Track A),
 * then extended with page-level layout helpers (.app-shell, .app-nav-left,
 * .app-main, .app-rail-right) so every UI track (I–N) has layout primitives
 * without touching the token layer.
 *
 * Public surface contract (§6.A — PARALLEL_PLAN.md):
 *   CSS variables:  --paper, --paper-2, --paper-3, --ink, --ink-2, --ink-3,
 *                   --ink-4, --rule, --rule-soft, --civic, --civic-soft,
 *                   --risk, --risk-soft, --support, --support-soft,
 *                   --highlight, --serif, --sans, --mono
 *   Class names:    .artboard-root  .mono  .serif  .hrule  .hrule-soft
 *                   .chip  .chip.civic|.risk|.support|.ghost
 *                   .dot  .dot.civic|.risk|.support
 *                   button.btn  button.btn.ghost|.sm
 *                   .num  .bar  .bar-civic|.bar-risk|.bar-support|.bar-soft
 *                   .placeholder  .scroll
 *                   .app-shell  .app-nav-left  .app-main  .app-rail-right
 *
 * Do NOT introduce new color tokens — additive-only changes from here on.
 * Track A owns this file; all other UI tracks extend with their own
 * page-specific stylesheets imported on top of this one.
 */

/* ─── Google Fonts: three-family type stack ──────────────────────────────── */
/* Using @import so the fonts resolve in both browser and Ktor static serving.
 * local() fallbacks are listed first per §9 of the bootstrap prompt so
 * locally-installed fonts are preferred over the network fetch.            */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap");

/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Warm paper base */
  --paper: #f4f1ea;
  --paper-2: #ebe7dd;
  --paper-3: #e1ddd1;

  /* Ink scale */
  --ink: #1a1713;
  --ink-2: #3d372e;
  --ink-3: #6b6254;
  --ink-4: #a09683;

  /* Rules */
  --rule: #d6d1c2;
  --rule-soft: #e7e2d4;

  /* Accents — OKLCH for perceptually-uniform chroma */
  --civic: oklch(52% 0.09 195);        /* deep teal-blue */
  --civic-soft: oklch(88% 0.04 195);
  --risk: oklch(52% 0.12 30);          /* muted brick red */
  --risk-soft: oklch(90% 0.04 30);
  --support: oklch(52% 0.08 150);      /* muted green */
  --support-soft: oklch(90% 0.04 150);
  --highlight: oklch(88% 0.08 85);     /* warm ochre highlight */

  /* Type stack */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter Tight", "Inter", system-ui, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, monospace;
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

/* ─── Artboard root ──────────────────────────────────────────────────────── */
/* Applied to the top-level container in every artboard / track view.        */
.artboard-root {
  width: 100%;
  height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  overflow: hidden;
  position: relative;
}

/* ─── Type utility classes ───────────────────────────────────────────────── */
.mono  { font-family: var(--mono);  font-feature-settings: "zero"; }
.serif { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.2; }

/* ─── Rules ──────────────────────────────────────────────────────────────── */
.hrule      { height: 1px; background: var(--rule);      border: 0; margin: 0; }
.hrule-soft { height: 1px; background: var(--rule-soft); border: 0; margin: 0; }

/* ─── Chip ───────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--mono);
  font-weight: 500;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.chip.civic   { background: var(--civic-soft);   color: oklch(32% 0.08 195); border-color: transparent; }
.chip.risk    { background: var(--risk-soft);    color: oklch(32% 0.09 30);  border-color: transparent; }
.chip.support { background: var(--support-soft); color: oklch(32% 0.08 150); border-color: transparent; }
.chip.ghost   { background: transparent; }

/* ─── Status dot ─────────────────────────────────────────────────────────── */
.dot          { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.dot.civic    { background: var(--civic);   }
.dot.risk     { background: var(--risk);    }
.dot.support  { background: var(--support); }

/* ─── Button ─────────────────────────────────────────────────────────────── */
button.btn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: -0.005em;
  transition: all 0.12s ease;
}
button.btn:hover          { background: var(--ink-2); }
button.btn.ghost          { background: transparent; color: var(--ink); }
button.btn.ghost:hover    { background: var(--paper-2); }
button.btn.sm             { font-size: 12px; padding: 6px 10px; }

/* ─── Tabular numerals ───────────────────────────────────────────────────── */
/* Every number-bearing element must carry this class per the design-system
 * ground rules (PRD §6). Enables fixed-width digit spacing so columns of
 * signed financial figures align without tweaking letter-spacing.          */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ─── Sparkline / bar blocks ─────────────────────────────────────────────── */
.bar         { background: var(--ink);     height: 100%; }
.bar-soft    { background: var(--ink-3);   }
.bar-civic   { background: var(--civic);   }
.bar-risk    { background: var(--risk);    }
.bar-support { background: var(--support); }

/* ─── Placeholder (striped empty-state block) ────────────────────────────── */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-2) 0 8px,
      var(--paper-3) 8px 9px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Scrollable regions ─────────────────────────────────────────────────── */
/* Hidden scrollbar per the artboard style — scrolling is available via
 * keyboard / pointer drag but the visual chrome stays out of the way.      */
.scroll             { overflow: auto; }
.scroll::-webkit-scrollbar { display: none; }
.scroll             { scrollbar-width: none; }

/* ─── App shell layout primitives ────────────────────────────────────────── */
/* Three-column layout (left nav + main + right rail) used by every UI track.
 * Tracks may override column widths via CSS Grid on their own .app-shell
 * selector; the class names are the stable API.                             */
.app-shell {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  grid-template-areas: "nav main rail";
  height: 100vh;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.app-nav-left {
  grid-area: nav;
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  scrollbar-width: none;
}
.app-nav-left::-webkit-scrollbar { display: none; }

.app-main {
  grid-area: main;
  overflow-y: auto;
  scrollbar-width: none;
}
.app-main::-webkit-scrollbar { display: none; }

.app-rail-right {
  grid-area: rail;
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  scrollbar-width: none;
}
.app-rail-right::-webkit-scrollbar { display: none; }

/* ─── Responsive collapse ────────────────────────────────────────────────── */
/* Below 900 px the rail disappears; below 640 px the nav collapses too.
 * UI tracks that need different breakpoints override on their own sheet.    */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 220px 1fr;
    grid-template-areas: "nav main";
  }
  .app-rail-right { display: none; }
}

/* Tablet portrait (641–820px) — keep 2-of-3 rails: left nav + main + a
 * collapsible right rail. Restores the rail dropped by the 900px block but
 * narrows it so the feed still has working vertical priority. The right rail
 * remains an accordion (see .ed-rail__accordion below) so users can collapse
 * sections to reclaim height. */
@media (min-width: 641px) and (max-width: 820px) {
  .app-shell {
    grid-template-columns: 200px 1fr 220px;
    grid-template-areas: "nav main rail";
  }
  .app-rail-right { display: block; }
}

@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "main";
  }
  .app-nav-left  { display: none; }
  .app-rail-right { display: none; }
}

/* ─── Mobile nav — shared across all civicast pages ──────────────────────── */
/* HP65 §13: at ≤640px the per-page left rail + right rail both vanish (see
 * editorial.css / map.css / terminal.css media queries). Without a
 * replacement, the user is stranded on each page with no way to navigate
 * elsewhere. This shared component renders a top-bar with hamburger toggle
 * + slide-out drawer at ≤640px only. Pages opt in by including
 *   <header class="civic-mobile-nav">…</header>
 *   <div class="civic-mobile-drawer">…</div>
 * markup at the top of <body> and loading mobile-nav.js.                  */
.civic-mobile-nav { display: none; }
.civic-mobile-drawer { display: none; }

@media (max-width: 640px) {
  .civic-mobile-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 48px;
    box-sizing: border-box;
  }
  .civic-mobile-nav__toggle {
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    margin-left: -10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .civic-mobile-nav__icon,
  .civic-mobile-nav__icon::before,
  .civic-mobile-nav__icon::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .civic-mobile-nav__icon { position: relative; }
  .civic-mobile-nav__icon::before,
  .civic-mobile-nav__icon::after {
    content: '';
    position: absolute;
    left: 0;
  }
  .civic-mobile-nav__icon::before { top: -7px; }
  .civic-mobile-nav__icon::after  { top:  7px; }
  /* Hamburger → X transform when drawer open */
  .civic-mobile-nav__toggle[aria-expanded="true"] .civic-mobile-nav__icon {
    background: transparent;
  }
  .civic-mobile-nav__toggle[aria-expanded="true"] .civic-mobile-nav__icon::before {
    transform: translateY(7px) rotate(45deg);
  }
  .civic-mobile-nav__toggle[aria-expanded="true"] .civic-mobile-nav__icon::after {
    transform: translateY(-7px) rotate(-45deg);
  }
  .civic-mobile-nav__brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .civic-mobile-nav__brand-name {
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink);
  }
  .civic-mobile-nav__brand-location {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: uppercase;
  }

  .civic-mobile-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    visibility: hidden;
    pointer-events: none;
  }
  .civic-mobile-drawer[data-open="true"] {
    visibility: visible;
    pointer-events: auto;
  }
  .civic-mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 17, 13, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .civic-mobile-drawer[data-open="true"] .civic-mobile-drawer__backdrop {
    opacity: 1;
  }
  .civic-mobile-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    background: var(--paper);
    padding: 18px 16px 24px;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(20, 17, 13, 0.08);
  }
  .civic-mobile-drawer[data-open="true"] .civic-mobile-drawer__panel {
    transform: translateX(0);
  }
  .civic-mobile-drawer__heading {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    margin: 8px 0 4px;
  }
  .civic-mobile-drawer__location {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .civic-mobile-drawer__menu {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .civic-mobile-drawer__menu li + li { margin-top: 2px; }
  .civic-mobile-drawer__menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    color: var(--ink);
    text-decoration: none;
    font-size: 17px;
    border-radius: 6px;
    min-height: 44px;
  }
  .civic-mobile-drawer__menu a[aria-current="page"] {
    background: var(--paper-2);
    font-weight: 500;
  }
  .civic-mobile-drawer__menu a:active,
  .civic-mobile-drawer__menu a:focus {
    background: var(--paper-2);
    outline: none;
  }
  .civic-mobile-drawer__badge {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-3);
  }
}

/* ─── Mobile bottom-tab bar (HP66 §3.B.1) ───────────────────────────────── */
/* Alternative one-handed navigation surface that coexists with the top
 * hamburger drawer at ≤640px. Five fixed tabs along the bottom of the
 * viewport; active tab highlighted with the civic accent. Pages opt in by
 * including the .civic-bottom-tabs markup near the end of <body>; the bar
 * is hidden by default and only renders at ≤640px.
 *
 * Token reference (no inline colours):
 *   --paper, --paper-2 — bar surface + active surface
 *   --rule              — top border
 *   --civic             — active label / icon foreground
 *   --ink, --ink-3      — inactive labels
 *
 * Coexistence with the drawer:
 *   - Drawer continues to expose the full menu via the hamburger top-bar.
 *   - The bottom tabs surface the five primary destinations only.
 *   - Bar height is 56px so iOS home-indicator stays clear; consumers may
 *     add safe-area-inset bottom padding on supported devices.
 */
.civic-bottom-tabs { display: none; }

@media (max-width: 640px) {
  .civic-bottom-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    z-index: 100;
    /* Honour iOS safe-area when present */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: content-box;
  }
  .civic-bottom-tabs__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-3);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 11px;
    line-height: 1.1;
    min-height: 44px;
  }
  .civic-bottom-tabs__icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
  }
  .civic-bottom-tabs__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .civic-bottom-tabs__label {
    font-family: var(--sans);
    font-size: 11px;
    color: inherit;
    letter-spacing: 0.01em;
  }
  .civic-bottom-tabs__item[aria-current="page"],
  .civic-bottom-tabs__item--active {
    color: var(--civic);
    background: var(--paper-2);
  }
  .civic-bottom-tabs__item[aria-current="page"] .civic-bottom-tabs__icon,
  .civic-bottom-tabs__item--active .civic-bottom-tabs__icon {
    color: var(--civic);
  }
  /* When the bottom-tabs bar is present, push the hamburger drawer's footer
   * scroll above it so the last menu item is reachable. */
  .civic-mobile-drawer__panel {
    padding-bottom: 80px;
  }
  /* Reserve space at the bottom of the document so the fixed bar never
   * occludes the final inline content. Pages that render their own
   * bottom-affixed CTAs should add additional spacing locally. */
  body:has(.civic-bottom-tabs) {
    padding-bottom: 56px;
  }
}

/* ─── Right-rail accordion on index.html / editorial.html (HP66 §3.B.3) ──── */
/* The right rail's KPI / Deadlines / Reps blocks are wrapped in <details>
 * collapsed-by-default at ≤640px so the feed gets vertical priority. The
 * desktop layout is unchanged — at >640px the <details> auto-expands and
 * the chevron disclosure UI is hidden so the rail looks identical to the
 * pre-HP66 layout. */
.ed-rail__accordion > summary {
  cursor: pointer;
  list-style: none;
}
.ed-rail__accordion > summary::-webkit-details-marker {
  display: none;
}

@media (min-width: 821px) {
  /* Force-open above the tablet breakpoint; hide the disclosure summary
   * chrome so the desktop layout is byte-for-byte the same as before HP66. */
  .ed-rail__accordion[open],
  .ed-rail__accordion {
    pointer-events: auto;
  }
  .ed-rail__accordion > summary {
    display: none;
  }
}

/* Tablet portrait (641–820px) — the right rail is narrow, so let users
 * collapse sections to reclaim feed height. Show the disclosure chrome
 * (matches the mobile pattern) but rely on the per-section <details open>
 * defaults set in the markup so KPI is open / Deadlines + Reps closed by
 * default. Sticky-to-top so the summaries stay visible while the main
 * column scrolls. */
@media (min-width: 641px) and (max-width: 820px) {
  .ed-rail__accordion {
    border-top: 1px solid var(--rule-soft);
    padding: 8px 0;
  }
  .ed-rail__accordion:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .ed-rail__accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: 32px;
    cursor: pointer;
  }
  .ed-rail__accordion > summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 16px;
    color: var(--ink-3);
    line-height: 1;
  }
  .ed-rail__accordion[open] > summary::after {
    content: "−";
  }
}

@media (max-width: 640px) {
  .ed-rail__accordion {
    border-top: 1px solid var(--rule-soft);
    padding: 12px 0;
  }
  .ed-rail__accordion:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .ed-rail__accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: 44px;
  }
  .ed-rail__accordion > summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 18px;
    color: var(--ink-3);
    line-height: 1;
  }
  .ed-rail__accordion[open] > summary::after {
    content: "−";
  }
  .ed-rail__accordion > summary > .ed-rail__section-label {
    /* Inside the summary the section label inherits sizing from summary */
    padding: 0;
    margin: 0;
  }
}