/* =============================================================================
 * paper-trading-dashboard-v1 — global style polish (Agent C1).
 *
 * Goal: a consistent visual register across all eight pages without rewriting
 * the inline <style> blocks each page already ships. This stylesheet adds:
 *
 *   1. A single design-token layer (color, type scale, spacing, shadow,
 *      radius) usable from any page.
 *   2. Typography polish: serif display headings on h1/h2, clean sans body,
 *      tabular numerals on numeric cells.
 *   3. Table polish: zebra-striped rows, row hover, sticky-feel headers,
 *      monospace numerals — applied via `:is(table, .pt-table)` so both
 *      Inputs.table and any raw <table> in a markdown page pick it up.
 *   4. Card polish: subtle shadow + smoother hover on shared card classes
 *      already used on the pages (.pt-card, .pt-nav-tile, .sleeve-card,
 *      .pt-chart-wrap).
 *   5. Responsive baseline: container clamps and font scale ramps at the
 *      720px / 1024px breakpoints already used by the pages so we never
 *      introduce a NEW breakpoint that fights an existing one.
 *
 * NON-GOALS:
 *   - Do not redefine the per-page `<style>` blocks. They remain authoritative
 *     for page-specific grid layouts; this file is the shared baseline.
 *   - Do not touch sleeve colour assignments — those live in
 *     src/components/chart_helpers.js (SLEEVE_COLORS) and must not drift.
 *   - Do not change theme tokens that Observable Framework defines (var
 *     --theme-foreground etc) — we ADD a `--pt-*` token namespace alongside
 *     them so we never break the framework's light/dark toggle.
 *
 * BRIEF MAPPING (Agent C1 input contract):
 *   - #16a34a green   →  --pt-pos          (positive return / live badge)
 *   - #dc2626 red     →  --pt-neg          (negative return / failure)
 *   - #6b7280 neutral →  --pt-fg-muted     (secondary text, axis ticks)
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * 1. Design tokens
 * --------------------------------------------------------------------------- */

:root {
  /* --- color palette (brief-mandated) ------------------------------------ */
  --pt-pos:        #16a34a;
  --pt-pos-bg:     rgba(22, 163, 74, 0.08);
  --pt-pos-strong: #15803d;

  --pt-neg:        #dc2626;
  --pt-neg-bg:     rgba(220, 38, 38, 0.08);
  --pt-neg-strong: #b91c1c;

  --pt-neutral:    #6b7280;
  --pt-neutral-bg: rgba(107, 114, 128, 0.08);

  /* hiring-pro grays — anchored to Tailwind slate so the whole palette
   * reads as a single family rather than a grab-bag of mid-tones. */
  --pt-slate-50:   #f8fafc;
  --pt-slate-100:  #f1f5f9;
  --pt-slate-200:  #e2e8f0;
  --pt-slate-300:  #cbd5e1;
  --pt-slate-400:  #94a3b8;
  --pt-slate-500:  #64748b;
  --pt-slate-600:  #475569;
  --pt-slate-700:  #334155;
  --pt-slate-800:  #1e293b;
  --pt-slate-900:  #0f172a;

  /* Semantic shortcuts used by table + card rules below. */
  --pt-fg:           var(--pt-slate-900);
  --pt-fg-muted:     var(--pt-slate-500);
  --pt-fg-subtle:    var(--pt-slate-400);
  --pt-border:       var(--pt-slate-200);
  --pt-border-soft:  var(--pt-slate-100);
  --pt-bg-card:      #ffffff;
  --pt-bg-row-alt:   var(--pt-slate-50);
  --pt-bg-row-hover: #eef6f1;       /* mint tint that complements --pt-pos */

  /* --- type scale -------------------------------------------------------- */
  --pt-font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif;
  --pt-font-serif:
    "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman",
    serif;
  --pt-font-mono:
    ui-monospace, "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo,
    monospace;

  --pt-text-xs:   0.72rem;
  --pt-text-sm:   0.82rem;
  --pt-text-base: 0.95rem;
  --pt-text-md:   1.05rem;
  --pt-text-lg:   1.25rem;
  --pt-text-xl:   1.6rem;
  --pt-text-2xl:  2.1rem;

  /* --- spacing + radius + shadow ----------------------------------------- */
  --pt-radius-sm:  4px;
  --pt-radius:     8px;
  --pt-radius-lg:  12px;

  --pt-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --pt-shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06),
                   0 1px 2px rgba(15, 23, 42, 0.04);
  --pt-shadow:     0 4px 12px -2px rgba(15, 23, 42, 0.08),
                   0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --pt-shadow-lg:  0 12px 28px -8px rgba(15, 23, 42, 0.14),
                   0 4px 10px -4px rgba(15, 23, 42, 0.06);

  --pt-transition: 140ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark theme support — Observable Framework toggles `theme-dark` on <body>.
 * Soft-invert the surface tokens; keep the semantic positive / negative hues
 * intact so a green return is still green in dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --pt-fg:           #e2e8f0;
    --pt-fg-muted:     #94a3b8;
    --pt-fg-subtle:    #64748b;
    --pt-border:       #1e293b;
    --pt-border-soft:  #0f172a;
    --pt-bg-card:      #0f172a;
    --pt-bg-row-alt:   #111c2e;
    --pt-bg-row-hover: #0a2a1b;
  }
}

/* ---------------------------------------------------------------------------
 * 2. Typography baseline
 * --------------------------------------------------------------------------- */

body, .observablehq, main {
  font-family: var(--pt-font-sans);
  color: var(--pt-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

main h1,
main h2,
main h3 {
  font-family: var(--pt-font-serif);
  color: var(--pt-fg);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

main h1 {
  font-size: var(--pt-text-2xl);
  font-weight: 600;
  margin-top: 0.25rem;
  margin-bottom: 0.6rem;
}

main h2 {
  font-size: var(--pt-text-xl);
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--pt-border-soft);
}

main h3 {
  font-size: var(--pt-text-lg);
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

main p {
  line-height: 1.55;
  color: var(--pt-fg);
}

main p.meta,
main p.tagline,
main .pt-tagline,
main .oh-tagline {
  color: var(--pt-fg-muted);
}

/* Monospace tokens — fence SHA, sleeve_id, etc. */
main code,
main .pt-mono,
main .pt-sha,
main .pt-sleeve-code {
  font-family: var(--pt-font-mono);
  font-variant-numeric: tabular-nums;
}

main code {
  background: var(--pt-slate-100);
  padding: 0.05rem 0.35rem;
  border-radius: var(--pt-radius-sm);
  font-size: 0.88em;
}

/* ---------------------------------------------------------------------------
 * 3. Table polish (Inputs.table + raw <table>)
 *
 * Observable's Inputs.table renders into a <form><table> wrapper. We target
 * BOTH so a Markdown table and a JS-rendered one share the same skin.
 * --------------------------------------------------------------------------- */

main table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: var(--pt-text-sm);
  background: var(--pt-bg-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  overflow: hidden;
  box-shadow: var(--pt-shadow-xs);
}

main table thead th {
  background: var(--pt-slate-50);
  color: var(--pt-fg-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--pt-text-xs);
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--pt-border);
  text-align: left;
}

main table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--pt-border-soft);
  color: var(--pt-fg);
}

main table tbody tr:nth-child(even) td {
  background: var(--pt-bg-row-alt);
}

main table tbody tr:hover td {
  background: var(--pt-bg-row-hover);
  transition: background var(--pt-transition);
}

main table tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric columns — Observable adds `number` class to numeric <td>; align right. */
main table td.number,
main table th.number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Inputs.table form wrapper — clip overflow on narrow viewports. */
main form[data-input] {
  overflow-x: auto;
}

/* ---------------------------------------------------------------------------
 * 4. Card polish — shared classes across pages
 *
 * Page-local <style> blocks already define grid layout for these classes;
 * we layer in shadow + hover transitions only. Specificity stays low
 * (single class) so page-level rules still win where they need to.
 * --------------------------------------------------------------------------- */

.pt-card,
.sleeve-card,
.pt-chart-wrap,
.pt-nav-tile {
  box-shadow: var(--pt-shadow-xs);
  transition:
    box-shadow var(--pt-transition),
    transform var(--pt-transition),
    border-color var(--pt-transition);
  background: var(--pt-bg-card);
}

.pt-card:hover,
.sleeve-card:hover,
.pt-chart-wrap:hover {
  box-shadow: var(--pt-shadow-sm);
}

.pt-nav-tile:hover {
  box-shadow: var(--pt-shadow);
  transform: translateY(-2px);
}

/* The LIVE sleeve_5 card gets a slightly more prominent ring so the eye
 * tracks straight to it on landing. Composes with page-level border-color
 * already set on .pt-card.sleeve-5. */
.pt-card.sleeve-5 {
  box-shadow:
    0 0 0 1px rgba(22, 163, 74, 0.18),
    var(--pt-shadow-sm);
}

/* ---------------------------------------------------------------------------
 * 5. Pills + status badges — normalise the brief palette
 *
 * Several pages declare their own `.pill` / `.pt-status-pill` rules; we
 * provide a baseline so any NEW page (or any page that drops its inline
 * styling) still gets the right semantic colour.
 * --------------------------------------------------------------------------- */

.pill,
.pt-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: var(--pt-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.pill-live,
.pt-status-pill.live {
  background: var(--pt-pos-bg);
  color: var(--pt-pos-strong);
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.pill-shadow {
  background: var(--pt-neutral-bg);
  color: var(--pt-slate-700);
  border: 1px solid var(--pt-border);
}

.pt-status-pill.stale,
.pill-stale {
  background: #fff7e6;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Generic positivity helpers — already used inline; we centralise the hues. */
.pos        { color: var(--pt-pos); }
.neg        { color: var(--pt-neg); }
.neutral    { color: var(--pt-fg-muted); }

/* ---------------------------------------------------------------------------
 * 6. Hero blocks — title regions on every page
 * --------------------------------------------------------------------------- */

.hero,
.pt-hero {
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: var(--pt-text-sm);
  color: var(--pt-fg-muted);
  margin-bottom: 1.25rem;
}

.hero-links a {
  color: var(--pt-pos-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(22, 163, 74, 0.35);
  transition: border-color var(--pt-transition);
}

.hero-links a:hover {
  border-bottom-color: var(--pt-pos);
}

/* ---------------------------------------------------------------------------
 * 7. Note / callout boxes
 * --------------------------------------------------------------------------- */

.note {
  background: var(--pt-slate-50);
  border-left: 3px solid var(--pt-slate-300);
  border-radius: var(--pt-radius-sm);
  padding: 0.7rem 1rem;
  font-size: var(--pt-text-sm);
  line-height: 1.5;
  color: var(--pt-fg);
  margin: 1rem 0 1.5rem 0;
}

.callout-amber {
  background: #fffbeb;
  border-left-color: #d97706;
}

/* ---------------------------------------------------------------------------
 * 8. Focus accessibility — visible focus ring on every interactive element
 * --------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.pt-nav-tile:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pt-pos);
  outline-offset: 2px;
  border-radius: var(--pt-radius-sm);
}

/* ---------------------------------------------------------------------------
 * 9. Responsive baseline (mobile-first ramps).
 *
 * Pages already define their own grid breakpoints at 600px / 720px / 900px /
 * 1024px. We add font-scale ramps at the same breakpoints so the typography
 * compresses with the layout instead of fighting it.
 * --------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --pt-text-2xl: 1.85rem;
    --pt-text-xl:  1.45rem;
  }
}

@media (max-width: 720px) {
  :root {
    --pt-text-2xl: 1.6rem;
    --pt-text-xl:  1.3rem;
    --pt-text-lg:  1.15rem;
  }
  main table thead th,
  main table tbody td {
    padding: 0.4rem 0.55rem;
  }
  main table {
    font-size: var(--pt-text-xs);
  }
}

@media (max-width: 540px) {
  main h2 {
    margin-top: 1.5rem;
  }
  main code {
    word-break: break-all;
  }
}

/* ---------------------------------------------------------------------------
 * 10. Print — clean print of methodology / per-sleeve as one-pagers
 * --------------------------------------------------------------------------- */

@media print {
  .pt-nav-tile,
  .pt-footer a {
    color: var(--pt-fg);
    border: none;
    box-shadow: none;
  }
  .pt-card,
  .sleeve-card,
  .pt-chart-wrap {
    box-shadow: none;
    page-break-inside: avoid;
  }
}