/* ============================================================
   MORNING MARKET CHECK - style.css
   ============================================================
   This file controls how the page LOOKS: colors, fonts, spacing.
   It does not control what the page DOES - that's app.js.

   Design idea: a warm morning coffee-shop feel - a light cream
   page (like morning light on a wooden desk), bookended top and
   bottom by a dark espresso-brown header and footer, with a
   caramel/coffee accent color throughout.
   ============================================================ */

/* ---- Import fonts from Google Fonts (free) ----
   Playfair Display = elegant serif, used for big headings (keeps
   the "morning newspaper" feel even after the color change).
   IBM Plex Mono = monospace, used for numbers (feels like a ticker tape).
   Inter = clean sans-serif, used for regular reading text. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=IBM+Plex+Mono:wght@500;600&family=Inter:wght@400;500;600&display=swap');

/* ---- Design tokens ----
   Defining colors/fonts once here means if we ever want to
   change the look, we only change it in ONE place. */
:root {
  --color-bg: #f5ead6;          /* warm cream - page background */
  --color-bg-alt: #3d2c20;      /* dark espresso brown - header/footer */
  --color-paper: #fffbf2;       /* warm white - card backgrounds */
  --color-paper-soft: #f7ede0;  /* slightly deeper warm white - inner panels */
  --color-ink: #3d2c20;         /* dark espresso brown - main text on cards */
  --color-ink-soft: #9c8360;    /* soft tan-brown - secondary text */
  --color-gold: #c9a273;        /* caramel accent - borders, buttons */
  --color-gold-bright: #a8672e; /* deeper caramel - readable accent text on light backgrounds */
  --color-good: #5b7c4f;        /* muted sage green - positive numbers */
  --color-bad: #a6402c;         /* muted brick red - negative numbers */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-body: 'Inter', -apple-system, sans-serif;

  --radius: 6px;
  --max-width: 900px;
}

/* ---- Reset some default browser spacing so our own spacing is predictable ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(201, 162, 115, 0.18), transparent 40%);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

/* ===================== HEADER ===================== */
.site-header {
  background-color: var(--color-bg-alt);
  border-bottom: 2px solid rgba(201, 162, 115, 0.7);
  padding: 2.5rem 1.5rem 2rem;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(201, 162, 115, 0.85);
  margin-bottom: 0.4rem;
}

.site-title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-bg);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.espresso-mark {
  color: rgba(201, 162, 115, 0.9);
  flex-shrink: 0;
}

.site-subtitle {
  margin-top: 0.4rem;
  color: rgba(245, 234, 214, 0.65);
  font-size: 1rem;
}

/* ===================== LAYOUT ===================== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ===================== SEARCH PANEL ===================== */
.search-panel {
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#search-form {
  display: flex;
  gap: 0.75rem;
}

#ticker-input {
  flex: 1;
  padding: 0.8rem 1rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  border: 1.5px solid rgba(28, 26, 18, 0.2);
  border-radius: var(--radius);
  background: var(--color-paper-soft);
  color: var(--color-ink);
  text-transform: uppercase;
}

#ticker-input:focus {
  outline: 2px solid var(--color-gold);
  outline-offset: 1px;
}

#search-button {
  padding: 0.8rem 1.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--color-bg-alt);
  color: var(--color-paper);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#search-button:hover {
  background-color: var(--color-good);
}

#search-button:focus-visible,
.link-button:focus-visible,
.range-button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.link-button {
  margin-top: 0.9rem;
  background: none;
  border: none;
  color: var(--color-ink-soft);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

.settings-panel {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(28, 26, 18, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.settings-panel label {
  width: 100%;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.settings-panel input {
  flex: 1;
  min-width: 200px;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  border: 1.5px solid rgba(28, 26, 18, 0.2);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-ink);
}

.settings-panel button {
  padding: 0.6rem 1rem;
  border: none;
  border-radius: var(--radius);
  background-color: var(--color-gold);
  color: var(--color-ink);
  font-weight: 600;
  cursor: pointer;
}

.settings-panel .hint {
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}

.hidden {
  display: none !important;
}

/* ===================== PREVIOUSLY VIEWED (cached tickers) ===================== */
.cached-panel {
  margin-top: 1rem;
}

.cached-panel-label {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  margin-bottom: 0.5rem;
}

.cached-ticker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cached-ticker-chip {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px solid rgba(201, 162, 115, 0.4);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cached-ticker-chip:hover {
  border-color: var(--color-gold);
  background: var(--color-paper-soft);
}

.cached-ticker-chip .chip-age {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  margin-left: 0.4rem;
}

/* ===================== STATUS MESSAGE ===================== */
.status-message {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background-color: rgba(201, 162, 115, 0.15);
  border: 1px solid rgba(201, 162, 115, 0.4);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.status-message.error {
  background-color: rgba(166, 64, 44, 0.15);
  border-color: rgba(166, 64, 44, 0.5);
}

/* ===================== RESULTS ===================== */
.results {
  margin-top: 2rem;
}

.company-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-gold-bright);
}

/* Small label introducing a secondary group of metric cards, quieter
   than the main company-name heading so it doesn't compete for attention. */
.section-heading {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
  margin: 1.75rem 0 0.75rem;
}

.results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.results-header-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.results-header .link-button {
  margin-top: 0;
  color: var(--color-ink-soft);
}

/* Small pills under the company name showing exchange/sector/industry -
   quiet, secondary information, not competing with the metric cards. */
.company-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.company-tags:empty {
  display: none;
}

.company-tag {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(61, 44, 32, 0.2);
  color: var(--color-ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* The "verdict strip": Valuation Signal, Analyst Sentiment, and Public
   Sentiment sit side by side in their own full-width row below the
   metric cards. Grid's default stretch behavior gives all three equal
   height automatically, which is what makes the row look tidy. Wraps
   to fewer columns (then one) on narrower screens. */
.signal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

/* The metric cards sit in a responsive grid: as many columns
   as fit, each at least 200px wide. */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.metric-card {
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 3px solid var(--color-gold);
}

.metric-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
  font-weight: 600;
}

.metric-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-ink);
}

.metric-explainer {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  line-height: 1.35;
}

/* ===================== VALUATION SIGNAL ===================== */
.verdict-box {
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.2rem;
  border-top: 3px solid var(--color-gold); /* default/neutral color - overridden below by state classes */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.verdict-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.verdict-headline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.verdict-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.verdict-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
  line-height: 1.25;
}

.verdict-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}

.verdict-checklist li {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  line-height: 1.35;
}

.verdict-checklist .check-mark {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 600;
}

.verdict-checklist .check-mark.pass {
  color: var(--color-good);
}

.verdict-checklist .check-mark.fail {
  color: var(--color-bad);
}

/* The row of coffee bean icons for the Company Strength rating.
   Filled/dark beans = criteria passed, outlined/muted beans = not. */
.bean-row {
  display: flex;
  gap: 0.3rem;
  margin: 0.3rem 0 0.6rem;
}

.bean-row svg {
  flex-shrink: 0;
}

.verdict-disclaimer {
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  line-height: 1.35;
  margin-top: auto; /* pushes the disclaimer to the bottom of the square */
}

/* Color-coded left border + icon color depending on the verdict. */
.verdict-box.undervalued {
  border-top-color: var(--color-good);
}
.verdict-box.overvalued {
  border-top-color: var(--color-bad);
}
.verdict-box.neutral {
  border-top-color: var(--color-gold);
}

/* Same idea, different names - used by the Technical Sentiment box. */
.verdict-box.bullish {
  border-top-color: var(--color-good);
}
.verdict-box.bearish {
  border-top-color: var(--color-bad);
}
.verdict-box.mixed {
  border-top-color: var(--color-gold);
}

/* ===================== ANALYST SENTIMENT (smaller box) ===================== */
.analyst-box {
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.2rem;
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* The BUY / HOLD / SELL pill. Neutral gold by default; color-coded
   once we know the actual rating (see .buy / .hold / .sell below). */
.analyst-rating {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  background: rgba(201, 162, 115, 0.18);
  color: var(--color-ink);
}

.analyst-rating.buy {
  background: rgba(47, 111, 78, 0.18);
  color: var(--color-good);
}
.analyst-rating.sell {
  background: rgba(166, 64, 44, 0.18);
  color: var(--color-bad);
}
.analyst-rating.hold {
  background: rgba(201, 162, 115, 0.2);
  color: #8a6a2f;
}

.analyst-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
}

.analyst-detail-label {
  color: var(--color-ink-soft);
}

.analyst-detail-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-ink);
}

/* ===================== PUBLIC SENTIMENT (gauge) ===================== */
.sentiment-box {
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.2rem;
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  text-align: center;
}

.sentiment-box .verdict-eyebrow {
  align-self: flex-start;
}

.gauge-wrap {
  width: 100%;
  max-width: 200px;
}

.gauge-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.sentiment-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
  line-height: 1.3;
}

.sentiment-box .verdict-disclaimer {
  text-align: left;
}

/* ===================== CASH & DEBT ===================== */
.cash-debt-box {
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.2rem;
  border-top: 3px solid var(--color-gold);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cash-debt-headline {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-ink);
  line-height: 1.3;
}

.cash-debt-headline .amount {
  font-family: var(--font-mono);
  font-weight: 600;
}

.cash-debt-headline.net-cash .amount {
  color: var(--color-good);
}

.cash-debt-headline.net-debt .amount {
  color: var(--color-bad);
}

/* ===================== CHART PANEL ===================== */
.chart-panel {
  margin-top: 2rem;
  background-color: var(--color-paper);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* Given to the Price History panel only, to make it visually read as
   the "main" chart - same gold-top-border treatment the metric cards
   use, plus a slightly bigger heading. */
.chart-panel--primary {
  border-top: 3px solid var(--color-gold);
}

.chart-panel--primary .chart-header h3 {
  font-size: 1.35rem;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.chart-header h3 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-size: 1.2rem;
}

.range-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.range-button {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid rgba(28, 26, 18, 0.25);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.range-button:hover {
  border-color: var(--color-gold);
}

.range-button.active {
  background-color: var(--color-bg-alt);
  color: var(--color-paper);
  border-color: var(--color-bg-alt);
}

.rsi-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.rsi-label {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rsi-badge {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}

/* "Thick and colored" when RSI is in an extreme zone - green/bold for
   oversold (<30), red/bold for overbought (>70). Plain otherwise. */
.rsi-badge.oversold {
  color: var(--color-good);
  font-weight: 800;
  font-size: 1.15rem;
}

.rsi-badge.overbought {
  color: var(--color-bad);
  font-weight: 800;
  font-size: 1.15rem;
}

/* The clickable chips that show/hide lines on the Price History chart.
   Each is colored to match its line on the chart when active, so the
   chip itself doubles as a legend - no separate Chart.js legend needed. */
.series-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.series-toggle {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1.5px solid rgba(28, 26, 18, 0.25);
  background: transparent;
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.series-toggle:hover {
  border-color: var(--color-gold);
}

.series-toggle.sma50.active {
  background: #4a76a8;
  border-color: #4a76a8;
  color: #ffffff;
}

.series-toggle.sma200.active {
  background: #8a5aa0;
  border-color: #8a5aa0;
  color: #ffffff;
}

.series-toggle.spy.active {
  background: var(--color-good);
  border-color: var(--color-good);
  color: #ffffff;
}

.series-toggle.qqq.active {
  background: var(--color-bad);
  border-color: var(--color-bad);
  color: #ffffff;
}

.chart-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  line-height: 1.4;
}

/* ===================== DCF CALCULATOR ===================== */
/* Inputs on the left, the result "verdict box" on the right - stacks
   on narrow screens like the other two-column layouts in this app. */
.dcf-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 640px) {
  .dcf-layout {
    grid-template-columns: 1fr;
  }
}

.dcf-inputs {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.dcf-input-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dcf-input-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.dcf-input-row label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.dcf-input-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-gold-bright);
  background: var(--color-bg-alt);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
}

.dcf-input-hint {
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

/* Style the native range slider to match the app's gold accent, since
   the unstyled browser default looks out of place against the rest
   of the design. */
.dcf-input-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(28, 26, 18, 0.15);
  outline: none;
}

.dcf-input-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  border: 2px solid var(--color-paper);
  box-shadow: 0 0 0 1px rgba(28, 26, 18, 0.2);
}

.dcf-input-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-gold);
  cursor: pointer;
  border: 2px solid var(--color-paper);
}

.dcf-input-row select {
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  border: 1.5px solid rgba(28, 26, 18, 0.25);
  background: var(--color-paper-soft);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.dcf-fair-value {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-ink);
}

.dcf-comparison {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  line-height: 1.4;
}

/* The collapsible "How this works" sections. Using the native <details>
   element means this needs no JavaScript at all - the browser handles
   opening/closing on its own. Collapsed by default so the explanatory
   text doesn't compete visually with the actual chart; still just one
   click away for anyone who wants it. */
.info-toggle {
  margin-top: 1rem;
}

.info-toggle summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  list-style: none; /* hide the default triangle marker in most browsers */
}

.info-toggle summary::-webkit-details-marker {
  display: none; /* hide the default triangle marker in Chrome/Safari */
}

.info-toggle summary::before {
  content: 'ⓘ ';
}

.info-toggle[open] summary {
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}

.info-toggle .chart-note {
  margin-top: 0.4rem;
}

/* Used instead of inline styles for the green/red "beat/miss" legend
   text, so the color lives in one place (this file) rather than being
   hardcoded into the HTML. */
.beat-color {
  color: var(--color-good);
  font-weight: 600;
}

.miss-color {
  color: var(--color-bad);
  font-weight: 600;
}

/* Two charts (P/E and EPS trend) side by side on wide screens,
   stacked on narrow screens - same auto-fit trick as the metric cards. */
.valuation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.valuation-chart-box {
  background-color: var(--color-paper-soft);
  border-radius: var(--radius);
  padding: 1rem;
}

.valuation-chart-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}

/* The small "1 Year: 24.1  |  5 Years: 21.8  |  10 Years: 19.4"
   line shown under each trend chart, listing the exact averages. */
.trend-stats {
  margin-top: 0.75rem;
  display: flex;
  justify-content: space-around;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-ink);
  flex-wrap: wrap;
  gap: 0.5rem;
}

.trend-stats .trend-stat-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===================== FOOTER ===================== */
.site-footer {
  background-color: var(--color-bg-alt);
  text-align: center;
  padding: 1.5rem;
  font-size: 0.78rem;
  color: rgba(245, 234, 214, 0.55);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
  #search-form {
    flex-direction: column;
  }
  .site-title {
    font-size: 1.6rem;
  }
}

/* ===================== PRINT / "SAVE AS PDF" ===================== */
/*
  This section only applies when the page is printed (which is exactly
  what happens when the user clicks "Save as PDF" - browsers implement
  "Save as PDF" as a print destination). Without this, the browser would
  print the page exactly as it looks on screen: dark background, buttons,
  the search box, etc. - wasteful and messy for a document you might want
  to save or hand to someone. Instead we turn it into a clean, white-
  background report showing just the data.
*/
@media print {
  /* Hide anything that's only useful for interacting with the live page. */
  .site-header,
  .search-panel,
  .cached-panel,
  .status-message,
  .site-footer,
  .results-header-actions,
  .range-toggle,
  .series-toggle-row,
  .dcf-inputs,
  #settings-panel {
    display: none !important;
  }

  .dcf-layout {
    grid-template-columns: 1fr;
  }

  body {
    background: #ffffff;
    color: #3d2c20;
  }

  .container {
    padding: 0;
    max-width: 100%;
  }

  .company-name {
    color: #3d2c20;
  }

  .company-tag {
    color: #9c8360;
    border-color: #ccc;
  }

  .section-heading {
    color: #9c8360;
  }

  /* A printed report shouldn't hide anything behind a click - always
     show the "How this works" text fully expanded, and hide the
     (non-functional on paper) toggle arrow/summary styling. */
  .info-toggle summary {
    display: none;
  }

  .info-toggle .chart-note {
    display: block !important;
    margin-top: 0;
  }

  .metric-card,
  .chart-panel,
  .valuation-chart-box,
  .verdict-box,
  .analyst-box,
  .sentiment-box,
  .cash-debt-box {
    background: #ffffff;
    border: 1px solid #ccc;
    box-shadow: none;
    /* Try not to slice a chart or card in half across a page break. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .chart-panel {
    margin-top: 1rem;
  }
}