/* ── GrahamGrade report table + stock card ──────────────────────────────
   Shared by index.html (#sample, static) and report.html (step 2, dynamic).
   Two root scopes: .gg-report-table and .gg-stock-card. Every rule here is
   column-count-agnostic (:last-child / attribute selectors / explicit
   classes only — never :nth-child(N)) and content-shape-agnostic, since
   step 2 renders rows from a JS template literal with toggleable columns.

   Grade colors: PASS var(--grade-pass) #2a5c3f · WATCH var(--gold) #b89a4e
   (text: var(--gold-dk)) · FAIL var(--grade-fail) #8c2f2f. --grade-pass and
   --grade-fail are defined in theme.css; WATCH intentionally reuses the
   existing --gold / --gold-dk tokens rather than adding a third.

   Status-tone colors below (metric pass/marginal/fail, chip clean/
   caution/problem, MOS negative-fill) are report-table-local — they are a
   traffic-light system specific to this component, not site-wide brand
   colors, so they are literal values here rather than theme.css tokens.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Table wrapper ── */
.gg-report-table-wrap {
  margin: 1.5rem 0;
  /* Intentionally no overflow-x: auto — see mobile section below. Hiding
     half the columns behind horizontal scroll on the one section that
     exists to prove the product's value defeats the point on phones. */
}

/* ── Table base ── */
.gg-report-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Arial', sans-serif;
  font-size: 0.85rem;
}

.gg-report-table thead th {
  background: var(--navy);
  color: var(--paper);
  padding: 0.6rem 0.9rem;
  text-align: left;
  font-size: 9.5px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Shared with numeric <td> — right-aligns the header over right-aligned
   data instead of centering it, so digits line up under their label. */
.gg-report-table thead th.gg-num {
  text-align: right;
}

.gg-report-table tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: middle;
  font-size: 11.5px;
}

.gg-report-table tbody tr.gg-row:nth-child(even) td { background: var(--white); }

.gg-report-table tbody tr.gg-row:last-child td { border-bottom: none; }

/* Text columns */
.gg-ticker-cell { font-weight: bold; white-space: nowrap; }
.gg-name-cell {
  font-family: 'Georgia', 'Times New Roman', serif;
  word-break: normal;
  overflow-wrap: normal;
}

/* Numeric columns — right-aligned, tabular figures. Applied via an
   explicit class, not nth-child, so toggling columns in step 2 can't
   misalign it. */
.gg-num {
  text-align: right;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Graham Price is a formula-derived estimate, not a hard reported figure
   (see the disclaimer note above the table) — muted to read as secondary
   next to the harder numbers. Matched on the existing data-label attribute
   rather than position, consistent with the no-nth-child rule above. */
.gg-report-table tbody td.gg-num[data-label="Graham Price"] { color: #8a8378; }

/* Grade-colored left edge on the ticker cell. Row carries the grade
   modifier so step 2 can set it once per row rather than per cell.
   box-sizing: border-box is global (theme.css reset), so this border
   doesn't shift column width. */
.gg-row-pass .gg-ticker-cell { border-left: 3px solid var(--grade-pass); }
.gg-row-watch .gg-ticker-cell { border-left: 3px solid var(--gold); }
.gg-row-fail .gg-ticker-cell { border-left: 3px solid var(--grade-fail); }

/* Flags column */
.gg-flags-cell {
  font-family: 'Arial', sans-serif;
  font-size: 9px;
  font-weight: bold;
  color: #6b6355;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ── Grade band rows ── */
.gg-report-table tr.gg-band-row {
  /* Opt-out marker for step 2's click handler — data rows are clickable,
     band rows never are. Don't rely on "no handler attached" as the
     signal; check for this class explicitly. */
  cursor: default;
  pointer-events: none;
}

.gg-report-table tr.gg-band-row td {
  padding: 0.55rem 0.9rem;
  font-family: 'Arial', sans-serif;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: none;
}

.gg-band-pass td { background: rgba(42, 92, 63, 0.08); color: var(--grade-pass); }
.gg-band-watch td { background: rgba(184, 154, 78, 0.08); color: var(--gold-dk); }
.gg-band-fail td { background: rgba(140, 47, 47, 0.08); color: var(--grade-fail); }

/* ── Margin-of-safety bar ── */
.gg-mos-cell { min-width: 118px; }

.gg-mos {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-end;
}

.gg-mos-track {
  position: relative;
  width: 52px;
  height: 9px;
  background: #eceae4;
  flex-shrink: 0;
}

.gg-mos-track::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #b6b1a6;
}

.gg-mos-fill {
  position: absolute;
  top: 0;
  height: 100%;
  max-width: 50%;
}

.gg-mos-fill.is-positive {
  left: 50%;
  background: var(--gold);
}

.gg-mos-fill.is-negative {
  right: 50%;
  background: #c76b6b;
}

.gg-mos-value {
  min-width: 34px;
  text-align: right;
  font-weight: bold;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gg-mos-value.is-negative { color: #8b1a1a; }
.gg-mos-value.is-null { color: var(--muted); font-weight: normal; }

/* ── Legend ── */
.gg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  row-gap: 0.4rem;
  font-family: 'Arial', sans-serif;
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.85rem;
}

.gg-legend code {
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  color: var(--ink);
  margin-right: 0.35em;
}

/* ═══════════════════════════════════════════════════════════════════════
   Stock detail card — .gg-stock-card
   ═══════════════════════════════════════════════════════════════════════ */

.gg-stock-card {
  margin-top: 2rem;
  border: 1px solid var(--rule);
}

/* ── 6a. Header ── */
.gg-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.gg-card-header-main { min-width: 0; }

.gg-card-ticker {
  font-family: 'Arial', sans-serif;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dk);
  margin-bottom: 0.35rem;
}

.gg-card-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.gg-card-meta {
  font-family: 'Arial', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.gg-card-badge {
  flex: 0 0 auto;
  font-family: 'Arial', sans-serif;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.16em;
  color: var(--white);
  padding: 11px 22px;
  white-space: nowrap;
}

.gg-card-badge.gg-grade-pass { background: var(--grade-pass); }
.gg-card-badge.gg-grade-watch { background: var(--gold); }
.gg-card-badge.gg-grade-fail { background: var(--grade-fail); }

/* ── 6b. MOS strip ── */
.gg-mos-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  background: var(--paper);
  border-top: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
}

.gg-mos-strip-item {
  min-width: 90px;
}

.gg-mos-strip-label {
  font-family: 'Arial', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.gg-mos-strip-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--ink);
}

.gg-mos-strip-item.gg-mos-strip-headline .gg-mos-strip-value {
  font-size: 2.6rem;
}

.gg-mos-strip-item.gg-mos-strip-headline.gg-grade-pass .gg-mos-strip-value { color: var(--grade-pass); }
.gg-mos-strip-item.gg-mos-strip-headline.gg-grade-watch .gg-mos-strip-value { color: var(--gold-dk); }
.gg-mos-strip-item.gg-mos-strip-headline.gg-grade-fail .gg-mos-strip-value { color: var(--grade-fail); }

/* ── 6c. Grouped metrics ── */
.gg-metric-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
}

.gg-metric-group-title {
  font-family: 'Arial', sans-serif;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-dk);
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.gg-metric-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid #efede7;
  font-family: 'Georgia', 'Times New Roman', serif;
}

.gg-metric-row:last-child { border-bottom: none; }

.gg-metric-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.gg-metric-value-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-shrink: 0;
}

.gg-metric-threshold {
  font-family: 'Arial', sans-serif;
  font-size: 0.6rem;
  color: #9a9488;
  white-space: nowrap;
}

.gg-metric-value {
  font-size: 0.88rem;
  font-weight: bold;
  white-space: nowrap;
}

.gg-metric-value.is-pass { color: #1e6e3e; }
.gg-metric-value.is-marginal { color: #8a5a00; }
.gg-metric-value.is-fail { color: #8b1a1a; }

/* ── 6d. Qualitative chips ── */
.gg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0 1.5rem 1.5rem;
}

.gg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid;
  font-family: 'Arial', sans-serif;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
}

.gg-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.gg-chip-label { color: #4a4639; }

.gg-chip.is-clean { border-color: #c8e6d4; background: #edf7f1; }
.gg-chip.is-clean .gg-chip-dot { background: #1e6e3e; }
.gg-chip.is-clean .gg-chip-value { color: #1e6e3e; }

.gg-chip.is-caution { border-color: #e8d9a0; background: #fffbf0; }
.gg-chip.is-caution .gg-chip-dot { background: #8a5a00; }
.gg-chip.is-caution .gg-chip-value { color: #8a5a00; }

.gg-chip.is-problem { border-color: #f0c8c8; background: #fdf3f3; }
.gg-chip.is-problem .gg-chip-dot { background: #8b1a1a; }
.gg-chip.is-problem .gg-chip-value { color: #8b1a1a; }

.gg-chip-detail {
  padding: 0 1.5rem 1.25rem;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 12.5px;
  color: #3c3930;
  line-height: 1.6;
}

.gg-chip-detail-label {
  display: block;
  font-family: 'Arial', sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b6355;
  margin-bottom: 6px;
}

/* ── 6e. Rationale ── */
.gg-rationale {
  background: var(--paper);
  border-left: 4px solid;
  padding: 1.25rem 1.5rem;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.65;
}

.gg-rationale p + p { margin-top: 0.75rem; }

.gg-rationale.gg-grade-pass { border-left-color: var(--grade-pass); }
.gg-rationale.gg-grade-watch { border-left-color: var(--gold); }
.gg-rationale.gg-grade-fail { border-left-color: var(--grade-fail); }

.gg-rationale-label {
  display: block;
  font-family: 'Arial', sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b6355;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile — below 720px, table collapses to one card per row
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .gg-report-table thead { display: none; }

  .gg-report-table,
  .gg-report-table tbody,
  .gg-report-table tr,
  .gg-report-table td {
    display: block;
    width: 100%;
  }

  .gg-report-table tbody tr.gg-row {
    border: 1px solid var(--rule);
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
  }

  .gg-report-table tbody tr.gg-row td {
    border-bottom: none;
    padding: 0.2rem 0;
    width: auto;
  }

  .gg-report-table tbody tr.gg-row:nth-child(even) td { background: transparent; }

  /* Ticker + name share the first line; grade edge moves to the row. */
  .gg-row-pass { border-left: 3px solid var(--grade-pass); }
  .gg-row-watch { border-left: 3px solid var(--gold); }
  .gg-row-fail { border-left: 3px solid var(--grade-fail); }
  .gg-row-pass .gg-ticker-cell,
  .gg-row-watch .gg-ticker-cell,
  .gg-row-fail .gg-ticker-cell { border-left: none; }

  .gg-report-table td.gg-ticker-cell,
  .gg-report-table td.gg-name-cell {
    display: inline;
  }

  .gg-name-cell::before { content: ' — '; color: var(--muted); }

  /* MOS: full width, own line */
  .gg-mos-cell {
    min-width: 0;
    width: 100%;
    margin: 0.5rem 0;
  }

  .gg-mos { justify-content: flex-start; }
  .gg-mos-track { width: 96px; }

  /* Remaining metrics: label/value grid via data-label + ::before */
  .gg-report-table tbody tr.gg-row td.gg-num,
  .gg-report-table tbody tr.gg-row td.gg-flags-cell {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    text-align: right;
  }

  /* Scoped to the same two selectors as the grid rule above — not a bare
     [data-label] selector — so a ticker/name cell that happens to carry a
     data-label attribute never picks up a stray label prefix. */
  .gg-report-table tbody tr.gg-row td.gg-num[data-label]::before,
  .gg-report-table tbody tr.gg-row td.gg-flags-cell[data-label]::before {
    content: attr(data-label);
    text-align: left;
    font-family: 'Arial', sans-serif;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .gg-report-table tr.gg-band-row td {
    padding: 0.55rem 0.75rem;
  }

  /* Detail card */
  .gg-metric-groups { grid-template-columns: 1fr; }
  .gg-mos-strip { gap: 1.25rem 2rem; }
  .gg-card-header { padding: 1.25rem; }
  .gg-card-badge { font-size: 0.8rem; padding: 9px 16px; }
  .gg-card-name { font-size: 1.3rem; }
}