/* ============================================================================
   supplement-theme.css
   ----------------------------------------------------------------------------
   Dresses the standalone Economic Growth Model in the AI-2030 ("AI 2040")
   supplement chrome: ET Book serif body, Tufte heading scale, the #fffff8
   paper background, the ink two-tone accent, and Geist Mono for numerals.

   It is loaded AFTER assets/app.css (the app's base styles), and many of the
   app's controls carry inline styles (some re-applied by JS on tab/region
   switches). Stylesheet `!important` rules beat non-important inline styles,
   so the visual tokens below win cleanly without rewriting the app body.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
@font-face {
  font-family: "et-book";
  src: url("fonts/et-book/et-book-roman-line-figures.woff");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("fonts/et-book/et-book-italic.woff2");
  font-weight: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "et-book";
  src: url("fonts/et-book/et-book-bold-line-figures.woff");
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMonoVF.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---- Design tokens (mirrors ai-2030-mg4 globals.css) -------------------- */
:root {
  --vivid-background: #fffff8;
  --vivid-foreground: #000;
  --dull-background: #f0f0f0;
  --dull-foreground: #666;
  --accent: #111111;            /* figure ink (two-tone print chrome, no green) */
  --accent-dark: #000000;
  --accent-tint: #f2f1e8;       /* warm paper tint for hovers */
  --rule: #d9d7c8;              /* hairline rules on the paper bg */
  --serif: et-book, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mono: "Geist Mono", "SFMono-Regular", Menlo, Consolas, Monaco, monospace;
}

/* ---- Base typography ---------------------------------------------------- */
body {
  font-family: var(--serif) !important;
  background: var(--vivid-background) !important;
  color: #111 !important;
  max-width: 1800px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Controls that opted into `font-family:inherit` now inherit ET Book; force
   the few that hardcode their own family back onto the serif so the whole
   instrument reads as one document. */
button, input, select, textarea, table, .preset-btn, .region-btn,
.output-section-btn, [data-tab] {
  font-family: var(--serif) !important;
}

/* Numerals: keep tables/inputs aligned with tabular figures, and route the
   genuinely code-like / data-cell content through Geist Mono. */
input[type="number"], input[type="text"], td, th,
.mono, code, pre, .num, .data-cell {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
code, pre, .mono { font-family: var(--mono) !important; }

a { color: var(--accent); text-decoration: underline;
    text-decoration-thickness: 1.5px; text-underline-offset: 1.5px;
    text-decoration-skip-ink: auto; }
a:hover { text-decoration-thickness: from-font; }

/* Tufte heading scale (light weight, generous leading). Scoped so the dense
   in-tool section headers stay sized by their own inline rules unless they
   are genuine page headings. */
h1, h2, h3, h4, h5 { font-family: var(--serif) !important; font-weight: 400; color: #111; }
h3, h4, h5 { font-style: italic; }

/* ============================================================================
   Site header — mirrors GoodEndingSiteHeader ("AI 2040" eyebrow + nav) plus
   the EssayPage title block.
   ========================================================================== */
.sg-siteheader {
  max-width: 1800px;
  margin: 0 auto;
  padding: 18px 28px 0;
}
.sg-siteheader-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
}
.sg-eyebrow {
  font-size: 24px; line-height: 1; text-transform: uppercase;
  letter-spacing: 0.5px; margin: 4px 0 0;
}
.sg-eyebrow a { color: #111; text-decoration: none; }
.sg-eyebrow a:hover { text-decoration: underline; }
.sg-nav { display: flex; gap: 40px; align-items: center; font-size: 20px; margin-top: 6px; }
.sg-nav a { color: #111; text-decoration: none; }
.sg-nav a:hover { text-decoration: underline; }
.sg-nav img { height: 18px; width: 18px; display: block; }

.sg-titleblock { padding: 18px 0 22px; border-bottom: 1px solid var(--rule); }
.sg-title {
  font-family: var(--serif) !important;
  font-weight: 400 !important;
  font-size: 64px !important;
  line-height: 1.02 !important;
  margin: 8px 0 0 !important;
  color: #111 !important;
  text-align: left !important;
  letter-spacing: -0.5px;
}
.sg-subtitle {
  font-size: 19px; font-style: italic; color: #555;
  margin: 14px 0 0; font-weight: 400;
}
.sg-byline { font-size: 18px; color: #555; margin: 10px 0 0; font-style: italic; }
@media (max-width: 767px) {
  .sg-title { font-size: 40px !important; }
  .sg-siteheader { padding: 12px 16px 0; }
}

/* The original loud red draft ribbon becomes a quiet inline note in keeping
   with the supplement's restraint. */
.draft-banner {
  background: transparent !important;
  color: var(--dull-foreground) !important;
  text-align: right !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-style: italic;
  font-size: 11px !important;
  padding: 6px 28px 0 !important;
  margin: 0 auto !important;
  max-width: 1800px;
}

/* ============================================================================
   Controls — recolor the dark/grey button system onto the ink accent.
   The app re-applies inline backgrounds on state changes; `!important` here
   keeps the palette stable across those toggles.
   ========================================================================== */

/* Active / primary buttons → solid ink.
   Preset buttons toggle `.active`; region / output / nav buttons toggle the
   marker class `.sg-on` (added alongside their inline-style state code). */
.preset-btn.active,
.output-section-btn.sg-on,
.region-btn.sg-on,
[data-tab].sg-on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* Inactive pill buttons → paper with ink text */
.preset-btn,
.output-section-btn,
.region-btn,
[data-tab] {
  background: #fffefb !important;
  border-color: var(--rule) !important;
  color: var(--accent) !important;
  border-radius: 5px !important;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.preset-btn:hover,
.output-section-btn:hover,
.region-btn:hover,
[data-tab]:hover {
  background: var(--accent-tint) !important;
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
}
.preset-btn.active:hover,
.output-section-btn.sg-on:hover,
.region-btn.sg-on:hover,
[data-tab].sg-on:hover {
  background: var(--accent-dark) !important;
  color: #fff !important;
}

/* Run button stays prominent but on-palette */
#runModel {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
#runModel:hover { background: var(--accent-dark) !important; }

/* Custom-scenario chip: red-italic "modified" marker */
#customPresetLabel { border-radius: 5px !important; }

/* Nav grid section labels (Presets / Inputs / ...) */
.sg-navgrid td:first-child { color: var(--dull-foreground) !important; }
.sg-navgrid table { font-family: var(--serif) !important; }

/* Cards / panels pick up the warm paper rule instead of hard grey */
.side-panel, .modal-content { background: var(--vivid-background) !important; }

/* ============================================================================
   Polish layer — tufte tables, paper cards, green focus, mobile.
   ========================================================================== */

/* ---- Tables: serif, tabular numerals, hairline rules ------------------- */
#scenarioTable, #costSideLearningTable, #costSideSdomTable,
#costSideSigmaAcrossTable, .side-panel table, .tab-content table {
  font-family: var(--serif) !important;
}
#scenarioTable td, #scenarioTable th, #scenarioTable input,
#scenarioTable .derived-cell, .tab-content table td, .tab-content table th {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Header row: drop the grey fill for a single strong baseline rule */
#scenarioTable th,
#costSideLearningTable th, #costSideSdomTable th, #costSideSigmaAcrossTable th {
  background: var(--vivid-background) !important;
  color: #1a1a1a !important;
  border-bottom: 1.5px solid #1a1a1a !important;
}
#scenarioTable td, #scenarioTable th { border-bottom: 1px solid var(--rule) !important; }

/* Section / subsection header bands → on-brand ink */
.scenario-section-header td {
  background: var(--accent) !important;
  color: #fff !important;
}
.scenario-subsection-header td {
  background: var(--accent-tint) !important;
  color: var(--accent-dark) !important;
}

/* ---- Inputs: ink focus ring (was #007bff blue) ----------------------- */
#scenarioTable input:focus,
.side-panel input:focus,
.param-group input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  background: #fff !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.15) !important;
}
#scenarioTable input:hover { border-color: var(--rule) !important; background: #fffdf4 !important; }

/* ---- Cards / panels: paper + hairline rule, gentle shadow -------------- */
#growthModelTableExpanded,
#modelInfoPanel,
.side-panel {
  background: var(--vivid-background) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  border-radius: 6px !important;
}

/* ---- Model Explanation tab: keep prose to a readable measure ----------- */
#tab-model-explanation { font-family: var(--serif) !important; }
#tab-model-explanation p,
#tab-model-explanation li,
#tab-model-explanation h2,
#tab-model-explanation h3 { max-width: 820px; }

/* ============================================================================
   Opening intro (wide expandable overview) + redesigned control panel.
   ========================================================================== */
.sg-intro { max-width: 1000px; margin: 8px auto 14px; }
.sg-disclosure {
  background: var(--vivid-background);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 4px 20px;
}
.sg-disclosure > summary {
  list-style: none;
  cursor: pointer;
  font-style: italic;
  color: var(--accent-dark);
  padding: 10px 0;
  font-size: 18px;
  display: flex; align-items: center; gap: 8px;
}
.sg-disclosure > summary::-webkit-details-marker { display: none; }
.sg-disclosure > summary::before {
  content: "▸"; color: var(--accent); font-style: normal; transition: transform .15s ease;
}
.sg-disclosure[open] > summary::before { content: "▾"; }
.sg-disclosure-body { padding: 0 0 14px; }
.sg-disclosure-body p { font-size: 16px; line-height: 1.5; color: #222; margin: 6px 0 14px; max-width: 820px; }
.sg-intro-links { display: flex; flex-wrap: wrap; gap: 12px; }
.sg-link-btn {
  font-family: var(--serif) !important;
  background: var(--accent-tint) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-dark) !important;
  padding: 7px 16px !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  cursor: pointer;
}
.sg-link-btn:hover { background: var(--accent) !important; color: #fff !important; }

/* ---- Control panel ----------------------------------------------------- */
.sg-navgrid.sg-controls {
  max-width: none;            /* full content width — aligns with the tabs / view bar / charts */
  margin: 0 0 10px;
  background: transparent;    /* no card — the rows flow seamlessly under the tab strip */
  border: 0;
  border-radius: 0;
  padding: 0;
}
.sg-control-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.sg-control-row:last-child { border-bottom: 0; }
.sg-control-label {
  flex: 0 0 76px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dull-foreground);
}
.sg-control-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; flex: 1; }
.sg-control-btns .sg-spacer { flex: 1 1 auto; }
.sg-control-btns button {
  font-family: var(--serif);
  padding: 4px 12px;
  font-size: 12.5px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  cursor: pointer;
  background: #fffefb;
  color: var(--accent);
}
/* Primary preset + run buttons read a touch heavier */
.sg-control-btns .preset-btn { font-weight: 600; }
.sg-run-btn {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.sg-run-btn:hover { background: var(--accent-dark) !important; }
/* Ghost (secondary) + utility buttons sit quieter */
.sg-ghost-btn { color: var(--accent) !important; background: transparent !important; }
.sg-ghost-btn:hover { background: var(--accent-tint) !important; }
.sg-util-btn {
  font-size: 10.5px !important;
  padding: 3px 9px !important;
  color: var(--dull-foreground) !important;
  background: transparent !important;
  border-color: var(--rule) !important;
}
.sg-util-btn:hover { color: var(--accent-dark) !important; border-color: var(--accent) !important; }
.sg-custom-chip {
  padding: 5px 12px; border-radius: 5px; font-size: 12px; font-weight: 600; font-style: italic;
  border: 1px solid #8b0000; background: #fffff8; color: #8b0000;
}
.sg-divider { display: inline-block; width: 1px; height: 18px; background: var(--rule); margin: 0 4px; }
.sg-sub { color: var(--dull-foreground); font-size: 10px; }

/* ---- Mobile: tighten the page gutters ---------------------------------- */
@media (max-width: 600px) {
  body { padding: 12px !important; }
  .sg-navgrid { max-width: 100% !important; }
  .sg-control-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sg-control-label { flex-basis: auto; }
}

/* ---- View switcher: minimal full-width underline rule (no box/band) ----- */
.sg-output-tabs {
  margin: 0 0 18px;
  padding: 0;
}
.output-tab-row {
  display: flex;
  border-bottom: 1px solid var(--rule);    /* one hairline straight across the page */
  background: transparent;
}
.output-tab-btn {
  flex: 1 1 0;                  /* labels spread evenly across the line */
  font-family: var(--serif) !important;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 10px;
  border: 0;
  border-bottom: 2px solid transparent;     /* active-underline slot */
  margin-bottom: -1px;          /* underline sits right on the hairline */
  border-radius: 0;
  background: transparent;
  color: var(--dull-foreground);
  cursor: pointer;
  text-align: center;
  transition: color .12s, border-color .12s;
}
.output-tab-btn:hover {
  color: var(--accent-dark);
  background: var(--accent-tint);   /* warm highlight - overrides app.css blue button:hover */
}
.output-tab-btn.sg-on {
  color: var(--accent-dark);
  font-weight: 700;
  border-bottom-color: var(--accent);       /* a simple line under the active view */
}
@media (max-width: 600px) {
  .output-tab-btn { font-size: 13px; padding: 10px 6px; }
}

/* ============================================================================
   Two-tone figure dress (mirrors app/figures-code/figureStyle.tsx): charts sit
   frameless on the paper like the supplement's print figures, and the small
   in-chart controls become ink-outline chips (active = solid ink, paper text).
   ========================================================================== */

/* Charts lose the card box — no shadow, no rounded frame, just the paper. */
.chart-container, .r-chart-container {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Chart titles: italic serif, like the figures' caption titles. */
.chart-container h3, .r-chart-container h3 {
  font-style: italic;
  font-weight: 400 !important;
}

/* In-chart mode chips: the figures' toggle-button vocabulary. */
.ai-cost-mode-btn {
  font-family: var(--serif) !important;
  letter-spacing: 0 !important;
  background: #fffff8 !important;
  color: #1a1a1a !important;
  border: 1px solid #111111 !important;
  border-radius: 4px !important;
}
.ai-cost-mode-btn:hover { background: #f2f1e8 !important; }
.ai-cost-mode-btn.active {
  background: #111111 !important;
  color: #fffff8 !important;
}

/* Navigation-back + Simple/Advanced toggles: same ink chip vocabulary. */
.sync-btn {
  font-family: var(--serif) !important;
  background: #111111 !important;
  color: #fffff8 !important;
  border: 1px solid #111111 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.sync-btn:hover { background: #333333 !important; }
.r-mode-btn {
  font-family: var(--serif) !important;
  background: #fffff8 !important;
  color: #1a1a1a !important;
  border: 1px solid #111111 !important;
}
.r-mode-btn.active {
  background: #111111 !important;
  color: #fffff8 !important;
}
.r-mode-btn:hover:not(.active) { background: #f2f1e8 !important; }

/* Download buttons: quiet ink-outline squares instead of dark translucent. */
.chart-toolbar button.chart-download-btn {
  background: #fffff8 !important;
  color: #111111 !important;
  border: 1px solid #111111 !important;
  border-radius: 4px !important;
}
.chart-toolbar button.chart-download-btn:hover {
  background: #111111 !important;
  color: #fffff8 !important;
}

/* ---- Embedded mode (iframed under the ai-2030 site header) -------------- */
body.embedded .sg-siteheader-bar,
body.embedded .draft-banner { display: none !important; }
body.embedded .sg-siteheader { padding-top: 0; }

/* ---- 3 stacked sections: seamless full-width banners separated by simple
   lines (no boxes, no fill) ---------------------------------------------- */
.explorer-accordion { margin: 8px 0 24px; padding: 0 28px; }   /* one consistent inset (matches the site header) for banners + all content */
.exp-section { border: 0; border-radius: 0; background: transparent; }
.exp-banner {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: #1a1a1a;
  padding: 16px 0;            /* title + hairline align to the shared content inset */
  display: flex; align-items: center; gap: 12px;
  list-style: none;
  background: transparent;                   /* no fill / no box */
  border-bottom: 1px solid var(--rule);      /* one simple line across the page under each banner */
  user-select: none;
}
summary.exp-banner { cursor: pointer; }
summary.exp-banner:hover { color: var(--accent-dark); }
summary.exp-banner::-webkit-details-marker { display: none; }
summary.exp-banner::before {
  content: '\25B8'; font-size: 14px; color: var(--accent);
  transition: transform .15s ease; display: inline-block;
}
details.exp-section[open] > summary.exp-banner::before { transform: rotate(90deg); }
.exp-banner-static { color: var(--accent-dark); }   /* Full Explorer: same line treatment, no fill, no chevron */
.exp-body { padding: 6px 0 16px; }

/* ---- Tab strip: a prominent Full model / Simple model switch styled as real
   folder tabs sitting on the content's top rule. One panel shows at a time. --- */
.explorer-tabwrap { margin: 8px 0 24px; padding: 0 28px; }
.explorer-tabs {
  display: flex; align-items: flex-end; gap: 4px;
  border-bottom: 2px solid var(--rule);
  margin: 2px 0 16px;
}
.explorer-tab {
  font-family: var(--serif);
  font-size: 16px; font-weight: 600;
  color: var(--dull-foreground);        /* muted until selected */
  background: transparent;
  border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px;                  /* sit the underline on the 2px strip rule */
  padding: 9px 18px; cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.explorer-tab:hover { color: var(--accent-dark); background: var(--accent-tint); }
.explorer-tab.active { color: var(--accent-dark); background: var(--accent-tint); border-bottom-color: var(--accent); }
.exp-panel { min-width: 0; }
.exp-panel:not(.active) { display: none; }

/* The Simple panel's calculator and the relocated explanation are .tab-content
   nodes the app never marks .active, so reveal them via their container state. */
#sec-explanation[open] #tab-model-explanation,
#sec-simple.active #tab-calculator { display: block !important; }

/* "How the Model Works" explanation: pull its old mono/blue/red styling into the
   page's serif + ink-accent + paper palette (content/structure unchanged). The
   equation displays keep their own inline monospace. */
#tab-model-explanation a { color: var(--accent-dark); }
#tab-model-explanation a.deep-link { color: var(--accent); }
/* override the old inline blue links + maroon callout text to the green accent */
#tab-model-explanation [style*="3B82F6"], #tab-model-explanation [style*="3b82f6"],
#tab-model-explanation [style*="991b1b"], #tab-model-explanation [style*="7f1d1d"] { color: var(--accent-dark) !important; }
/* recolor the old red/pink callout boxes and generic-grey panels to the theme */
#tab-model-explanation [style*="fef2f2"] { background: var(--accent-tint) !important; }
#tab-model-explanation [style*="fca5a5"],
#tab-model-explanation [style*="fecaca"] { border-color: var(--accent) !important; }
#tab-model-explanation [style*="f8f9fa"] { background: #fffef8 !important; }
#tab-model-explanation [style*="e5e7eb"] { border-color: var(--rule) !important; }

/* View switch: slide the chart grid in from the side. The accordion's 28px side
   padding absorbs the translate so there's no horizontal overflow/scrollbar. */
@keyframes sgViewInRight { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes sgViewInLeft  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
.sg-view-anim-right { animation: sgViewInRight .26s cubic-bezier(.22,.61,.36,1); }
.sg-view-anim-left  { animation: sgViewInLeft  .26s cubic-bezier(.22,.61,.36,1); }
/* Chart grid: two equal columns that flex with the width. Once the page gets too
   narrow for two readable columns it collapses to one — and at the same time the
   side margins tighten and the charts shorten so a single column doesn't sprawl.
   (All on coordinated viewport breakpoints so the margin change can't flip-flop
   the column count near the boundary.) */
.charts-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  .charts-section    { grid-template-columns: 1fr; }   /* single column */
  .chart-container   { height: 340px; }                /* squeeze the graphs */
  .explorer-accordion,
  .explorer-tabwrap  { padding: 0 14px; }              /* tighter side margins */
}
@media (max-width: 767px) {
  .chart-container   { height: 388px; }                /* toolbar sits in-flow below 768px (app.css); give its ~48px back */
}
@media (max-width: 600px) {
  .chart-container   { height: 348px; }
  .explorer-accordion,
  .explorer-tabwrap  { padding: 0 6px; }
}