/* ================================================================
 * landscape-cards.css   (2026-08-13)
 * ----------------------------------------------------------------
 * COMMAND-CENTER-WIDE landscape card layout.
 *
 * A card is a horizontal-strip that packs Summary / Evidence /
 * Ratings / Fundamentals in 4 columns so the user sees everything
 * without scrolling per card.
 *
 * Any panel can adopt this by wrapping cards in `.lc-grid` and
 * using `.lc-card` on the card container, then filling in named
 * grid areas: `.lc-header`, `.lc-summary`, `.lc-evidence`,
 * `.lc-ratings`, `.lc-fundamentals`, `.lc-footer`.
 *
 * Sizing rules (compact enough to compare 3-6 tickers per screen,
 * large enough to read without squinting):
 *   - Card MIN height: 220px (fits ~3-4 cards per 900px viewport)
 *   - Content font: 11.5-13px (readable on desktop and laptop)
 *   - Padding: 10px 14px (compact but breathable)
 *   - Border-radius: 8px
 *   - Row gap: 10px (visual breathing room)
 * ================================================================ */

.lc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 1900px) {
  .lc-grid { grid-template-columns: 1fr 1fr; }
}

.lc-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "header header header header"
    "ideas ideas ideas ideas"
    "summary evidence ratings fundamentals"
    "footer footer footer footer";
  gap: 8px 12px;
  align-items: start;
  font-size: 12px;
  line-height: 1.4;
  color: #e6edf3;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.lc-card:hover {
  border-color: rgba(88, 166, 255, 0.35);
}
.lc-card.high-conviction {
  border-color: rgba(74, 222, 128, 0.55);
  background: rgba(74, 222, 128, 0.05);
}
.lc-card.in-buy-zone {
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.2);
  border-color: rgba(88, 166, 255, 0.55);
}
.lc-card.strong-canslim {
  border-left: 3px solid #4ade80;
}

/* Named-area assignments */
.lc-header {
  grid-area: header;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lc-ideas {
  grid-area: ideas;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 0;
}
.lc-ideas:empty { display: none; }
.lc-summary {
  grid-area: summary;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lc-evidence {
  grid-area: evidence;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lc-ratings {
  grid-area: ratings;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lc-fundamentals {
  grid-area: fundamentals;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.lc-footer {
  grid-area: footer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.lc-footer:empty { display: none; padding: 0; border: 0; }

/* Column-header labels — tiny caption showing what each column contains */
.lc-col-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b949e;
  margin-bottom: 2px;
}

/* Ticker + pattern chips in header */
.lc-ticker {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: 15px;
  color: #e6edf3;
  letter-spacing: 0.02em;
}
.lc-price {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  color: #58a6ff;
}
.lc-price-chg {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  font-size: 11.5px;
  padding: 1px 6px;
  border-radius: 3px;
}
.lc-price-chg.up { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
.lc-price-chg.down { color: #f87171; background: rgba(248, 113, 113, 0.1); }

.lc-pattern-tag {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(88, 166, 255, 0.14);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.4);
}

/* Score chips row (Composite / Validity / Volume / Stage) */
.lc-scores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.lc-score {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  cursor: help;
}
.lc-score-label {
  font-size: 9px;
  font-weight: 700;
  color: #7d8590;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.lc-score-value {
  font-family: ui-monospace, monospace;
  font-weight: 800;
  font-size: 15px;
  color: #e6edf3;
  line-height: 1;
}
.lc-score.composite .lc-score-value { color: #58a6ff; }

/* Zone rows (BUY / PROFIT / STOP) */
.lc-zones {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.lc-zone-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 10.5px;
  font-family: ui-monospace, monospace;
}
.lc-zone-label {
  font-weight: 800;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  min-width: 44px;
  text-align: center;
  cursor: help;
}
.lc-zone-buy { background: rgba(74, 222, 128, 0.14); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.4); }
.lc-zone-profit { background: rgba(88, 166, 255, 0.12); color: #58a6ff; border: 1px solid rgba(88, 166, 255, 0.35); }
.lc-zone-stop { background: rgba(248, 113, 113, 0.12); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.35); }
.lc-zone-range { color: #c9d1d9; font-weight: 600; }
.lc-zone-note { color: #7d8590; font-size: 10px; margin-left: auto; }

/* Position bar (visual where price sits between stop and profit) */
.lc-position-bar {
  height: 4px;
  background: linear-gradient(to right, rgba(248, 113, 113, 0.4), rgba(255, 166, 40, 0.4), rgba(74, 222, 128, 0.4));
  border-radius: 2px;
  margin-top: 4px;
  position: relative;
}
.lc-position-marker {
  position: absolute;
  top: -1px;
  width: 3px;
  height: 6px;
  background: #e6edf3;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

/* Ratings section (IBD + O'Neil + Weekly) — dense key/value rows */
.lc-kv-row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 1px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(139, 148, 158, 0.06);
}
.lc-kv-row:last-child { border-bottom: 0; }
.lc-kv-label {
  color: #8b949e;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: help;
}
.lc-kv-value {
  color: #e6edf3;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.lc-kv-value.good { color: #4ade80; }
.lc-kv-value.warn { color: #ffa628; }
.lc-kv-value.bad { color: #f87171; }
.lc-kv-value.muted { color: #7d8590; }

/* Compact table variant (used in Ratings + Fundamentals cols) */
.lc-mini-table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 6px;
  font-size: 10.5px;
}
.lc-mini-table > div:nth-child(odd) { color: #8b949e; }
.lc-mini-table > div:nth-child(even) { color: #c9d1d9; text-align: right; font-variant-numeric: tabular-nums; }

/* Idea trigger pill (why this popped) */
.lc-trigger-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #c9d1d9;
  cursor: pointer;
  transition: background 120ms ease;
}
.lc-trigger-pill:hover {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
}

/* Freshness badge (live / stale / partial) */
.lc-freshness {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: help;
}
.lc-freshness.live { background: rgba(74, 222, 128, 0.12); color: #4ade80; }
.lc-freshness.partial { background: rgba(255, 166, 40, 0.12); color: #ffa628; }
.lc-freshness.stale { background: rgba(139, 148, 158, 0.12); color: #8b949e; }

/* Verdict bar (top-line action) */
.lc-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: help;
}
.lc-verdict.buy { background: rgba(74, 222, 128, 0.18); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.5); }
.lc-verdict.watch { background: rgba(255, 166, 40, 0.14); color: #ffa628; border: 1px solid rgba(255, 166, 40, 0.4); }
.lc-verdict.avoid { background: rgba(248, 113, 113, 0.14); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.4); }
.lc-verdict.neutral { background: rgba(139, 148, 158, 0.1); color: #8b949e; border: 1px solid rgba(139, 148, 158, 0.3); }

/* Section subtitle (rendered inside each column) */
.lc-section-title {
  font-size: 10px;
  font-weight: 700;
  color: #58a6ff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: help;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(88, 166, 255, 0.15);
}

/* Footer buttons */
.lc-footer button {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(88, 166, 255, 0.14);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: background 120ms ease;
}
.lc-footer button:hover {
  background: rgba(88, 166, 255, 0.22);
}

/* Enrichment loading placeholder (skeleton) */
.lc-enrich-loading {
  padding: 6px 10px;
  font-size: 10px;
  color: #7d8590;
  font-style: italic;
  background: rgba(255, 166, 40, 0.05);
  border: 1px dashed rgba(255, 166, 40, 0.25);
  border-radius: 3px;
  cursor: default;
}

/* Responsive fallback — on narrower viewports (<1100px), stack the columns */
@media (max-width: 1100px) {
  .lc-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: 8px;
  }
  .lc-card > * { grid-area: auto !important; }
  .lc-scores { grid-template-columns: repeat(4, 1fr); }
}

/* Extra compact mode — for panels that need to show 6+ cards on screen at once */
.lc-grid.lc-compact .lc-card {
  padding: 8px 10px;
  font-size: 11px;
  gap: 6px 10px;
}
.lc-grid.lc-compact .lc-ticker { font-size: 13px; }
.lc-grid.lc-compact .lc-score-value { font-size: 13px; }
.lc-grid.lc-compact .lc-kv-row { font-size: 10.5px; }

/* ================================================================
 * COMPATIBILITY: apply landscape sizing to legacy panel card classes
 * without requiring each panel's JS to be rewritten.
 *
 * Best Longs (.bl-card, .bl-cards)
 * Cascade (.cas-card, .cas-cards)
 * Research Bench (.rb-card, .rb-cards)
 * Small-cap Rally (.sm-card, .sm-cards)
 * Earnings (.earn-card)
 * Actionable Picks (.ap-card)
 *
 * These stay in their existing layouts but get uniform sizing so
 * every panel across the command center feels consistent.
 * ================================================================ */
.bl-cards, .cas-cards, .rb-cards, .sm-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 1400px) {
  .bl-cards, .cas-cards, .rb-cards, .sm-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 2100px) {
  .bl-cards, .cas-cards, .rb-cards, .sm-cards { grid-template-columns: 1fr 1fr 1fr; }
}

/* 2026-08-13 v2: UNIVERSAL stock-analysis card sizing. Every card class that
   represents a ticker/setup card in the command center inherits these dimensions,
   so cards feel identical everywhere regardless of which panel emits them. */
.bl-card, .cas-card, .rb-card, .sm-card, .earn-card, .ap-card,
.accw-card, .apw-card, .bkc-card, .brka-card, .bnb-tod-card, .cfa-card,
.emp-card, .ep-card, .fwt-card, .hcm-card, .htfs-card, .imb-card,
.mc-card, .op-card, .pta-card, .scr-card, .sip-status-card,
.ua-radar-card, .wa-confluence-card, .wa-method-card, .wfc-card,
.signal-card, .macro-signal-card, .macro-ind-card, .lwc-card {
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  padding: 8px 12px !important;
  border-radius: 7px !important;
  min-height: unset !important;
  transition: border-color 120ms ease, background 120ms ease;
}

.bl-card:hover, .cas-card:hover, .rb-card:hover, .sm-card:hover,
.earn-card:hover, .ap-card:hover, .accw-card:hover, .apw-card:hover,
.bkc-card:hover, .brka-card:hover, .bnb-tod-card:hover, .cfa-card:hover,
.emp-card:hover, .ep-card:hover, .fwt-card:hover, .hcm-card:hover,
.htfs-card:hover, .imb-card:hover, .mc-card:hover, .op-card:hover,
.pta-card:hover, .scr-card:hover, .sip-status-card:hover,
.ua-radar-card:hover, .wa-confluence-card:hover, .wa-method-card:hover,
.wfc-card:hover, .signal-card:hover, .macro-signal-card:hover,
.macro-ind-card:hover, .lwc-card:hover {
  border-color: rgba(88, 166, 255, 0.4) !important;
}

/* Legacy panel section headers get consistent color + tooltip cursor */
.bl-card [class*="-head"], .cas-card [class*="-head"], .rb-card [class*="-head"], .sm-card [class*="-head"] {
  font-size: 11.5px !important;
}

/* ================================================================
 * BEST LONGS panel (.bl-card) \u2014 shape into 4-column landscape.
 * Tier 1 (ticker + entry/stop/target/RR) \u2192 col 1
 * Tier 2 (fakeout + price/RVOL/hold)      \u2192 col 2
 * Tier 3 (theory + institutional + sector) \u2192 cols 3+4
 * ================================================================ */
@media (min-width: 1100px) {
  .bl-card {
    display: grid !important;
    /* 2026-08-19: was `220px 1fr 1fr 1fr`. .bl-card lives in
       .bl-grid { repeat(auto-fill, minmax(380px, 1fr)) }, so a card can be as
       narrow as 380px. A fixed 220px first track then left ~160px to split
       across three more tracks (~53px each), overflowing the card.
       Collapsed to two proportional tracks with a 0 floor: `minmax(0, …)` is
       what stops a wide child forcing the track past the card edge, and the
       1fr/2fr split keeps tier1 readable at 380px (~127px) while scaling up
       cleanly on wide screens. Areas are unchanged in intent: tier1 left,
       tier2 right, tier3 spanning the full width beneath. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "tier1 tier2"
      "tier3 tier3" !important;
    gap: 6px 12px !important;
    align-items: start !important;
  }
  .bl-card > * { min-width: 0; overflow-wrap: anywhere; }
  .bl-card > .bl-t1 { grid-area: tier1; }
  .bl-card > .bl-t2 { grid-area: tier2; align-self: center; }
  .bl-card > .bl-t3-toggle, .bl-card > .bl-t3 { grid-area: tier3; }
}

/* ================================================================
 * CASCADE panel (.cas-card) \u2014 also enforce landscape shape.
 * cas-card-head (ticker + grade)                  \u2192 header row
 * cas-card-metrics (spot/entry/stop/target/RR)   \u2192 col 1-2
 * cas-card-reasons                                 \u2192 col 3-4
 * ================================================================ */
@media (min-width: 1100px) {
  .cas-card {
    display: grid !important;
    /* 2026-08-19: 0-floor tracks so no child can force overflow. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "header header"
      "metrics reasons" !important;
    gap: 6px 14px !important;
    align-items: start !important;
  }
  /* 2026-08-19: REQUIRED alongside the minmax(0, …) tracks above.
     `minmax(0, 1fr)` lets the TRACK shrink, but a grid item still defaults to
     min-width:auto, so a long unbreakable string (a ticker run, a URL, a wide
     number) refuses to shrink below its min-content and punches straight out of
     the card. Both halves are needed. Omitting this produced +8px to +109px of
     overflow on .cas-card at 230-432px container widths, caught by
     /_qa-card-layout.html. */
  .cas-card > * { min-width: 0; overflow-wrap: anywhere; }
  .cas-card > .cas-card-head { grid-area: header; }
  .cas-card > .cas-card-metrics { grid-area: metrics; }
  .cas-card > .cas-card-reasons { grid-area: reasons; }
}

/* ================================================================
 * Research Bench (.rb-card) \u2014 same landscape pattern.
 * ================================================================ */
@media (min-width: 1100px) {
  .rb-card {
    display: grid !important;
    /* 2026-08-19: 0-floor tracks so no child can force overflow. Renders
       full-width, so the fixed lead column is safe here (unlike .bl-card). */
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
      "header header header header"
      "summary evidence ratings fundamentals" !important;
    gap: 6px 12px !important;
    align-items: start !important;
  }
  .rb-card > * { min-width: 0; overflow-wrap: anywhere; }
  .rb-card > [class*="-head"], .rb-card > .rb-card-head { grid-area: header; }
}

/* ================================================================
 * UNIVERSAL landscape shape for the rest of the stock-analysis panels.
 * These cards vary in internal structure, so we simply enforce a
 * 3-part horizontal band layout: HEADER (top row) + BODY (grid of
 * whatever the panel emits, laid out horizontally when possible) +
 * FOOTER. This gives visual consistency without requiring per-panel JS
 * rewrites. Applies only ≥ 1100px viewports.
 *
 * DO NOT ADD .wa-method-card OR .hcm-card HERE
 * (.wa-method-card removed 2026-08-19, .hcm-card removed 2026-08-21)
 * -----------------------------------------------------
 * This rule assumes the card is a FULL-WIDTH band. .wa-method-card is not:
 * it is a child of .wa-cards-grid (3 x 432px columns), and each card emits
 * 8-18 rich vertical sections (phase, stage, P&F cause count, significant
 * bars, Weis wave, key levels, evidence...).
 * Forcing grid-auto-flow:column on it produced:
 *   - grid-template-columns: 140px x 18  ->  scrollWidth 2748px in a 430px card
 *   - row height stretched to the tallest column -> ~1700px of dead black space
 *     above every short section
 *   - text clipped mid-word at each 140px column edge
 *   - overflow trapped inside the card with no visible scrollbar affordance
 * .wa-method-card defines its own `display:flex; flex-direction:column`
 * in wave-analyzer.html, which is the correct shape for it. Leave it alone.
 * (.wa-confluence-card stays in the list: it emits only 2 short children,
 * so the horizontal band genuinely suits it.)
 *
 * .hcm-card hit the identical failure on 2026-08-21. It emits FOUR tall
 * children - header, ticker input row, a scan list of 11 .hcm-row grids, and a
 * usage explainer - so auto-fit at 260px handed it four side-by-side columns of
 * roughly 285px inside the 1320px band. Each .hcm-row is itself a
 * `72px 120px 1fr auto` grid, so inside a 285px column the 1fr detail cell
 * collapsed to almost nothing and, with `overflow-wrap: anywhere` from the
 * child rule below, wrapped ONE CHARACTER PER LINE: "Liquidity sweep of
 * EQ_HIGHS at $335.90" rendered as a vertical column of single letters, and the
 * check marks became vertical strings. The card was reported as unreadable.
 *
 * The tell is the same as .wa-method-card: a card that emits several tall,
 * internally-structured sections is NOT a horizontal band. This rule is for
 * cards whose children are short, comparable strips. .hcm-card declares its own
 * vertical block layout in hourly-confirmation-widget.js, which is correct for
 * it. Leave it alone.
 * ================================================================ */
/* Applies at EVERY viewport width - no breakpoint. Each card sizes itself
   from its own inline width (see the note inside the rule). */
.accw-card, .apw-card, .bkc-card, .brka-card, .bnb-tod-card, .cfa-card,
.emp-card, .ep-card, .fwt-card, .htfs-card,
.op-card, .pta-card, .scr-card,
.ua-radar-card, .wa-confluence-card,
.signal-card, .macro-signal-card, .macro-ind-card, .lwc-card {
  display: grid !important;

  /* ----------------------------------------------------------------
     INTRINSIC RESPONSIVE COLUMNS  (rewritten 2026-08-19)

     The previous rule was `grid-auto-flow: column` with
     `grid-auto-columns: minmax(140px, 1fr)`. That creates ONE row and
     as many columns as the card has children, ALWAYS horizontal, with
     no ability to wrap. Combined with a viewport-based @media gate it
     assumed every card is a full-width band. Many are not: .ep-card and
     .scr-card sit in 3-column grids, .pta-card and .wfc-card in
     2-column, .accw-card in 230px auto-fill tracks. Those cards were
     being handed 8-18 columns of 140px inside ~230-430px of space, so
     content ran 3-6x past the card edge, the single row stretched to
     the tallest column leaving huge dead space, and text clipped
     mid-word. (.wa-method-card hit exactly this; see note above.)

     `repeat(auto-fit, minmax(min(100%, N), 1fr))` fixes the class of
     bug rather than each instance:
       - the browser fits as many >=N columns as the CARD's OWN width
         allows and WRAPS to more rows instead of overflowing;
       - `min(100%, N)` means when the card is narrower than N the track
         floor becomes 100%, collapsing to exactly ONE column - a clean
         vertical stack, which is what a narrow card wants and what
         these panels declare natively;
       - it is driven by the card's real inline size, so it is correct
         on a 1920px desktop, an iPad in either orientation, a phone, a
         split-screen window, or any future size, with NO breakpoint.

     Tune per card class with --lc-col-min where a panel wants denser or
     looser banding.
  ---------------------------------------------------------------- */
  grid-auto-flow: row !important;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, var(--lc-col-min, 260px)), 1fr)) !important;
  gap: 8px 12px !important;
  align-items: start !important;

  /* Wrapping means nothing should overflow horizontally any more. Kept as
     `auto` only as a last-resort affordance rather than the primary
     mechanism it used to be. */
  overflow-x: auto;
  scrollbar-width: thin;
  min-width: 0;
}

/* Grid/flex children default to min-width:auto, so one long unbreakable
   string (a ticker list, a URL, a wide number) can still force a cell
   wider than its track and reintroduce overflow. This is the standard
   fix and is required for the wrapping above to hold. */
.accw-card > *, .apw-card > *, .bkc-card > *, .brka-card > *,
.bnb-tod-card > *, .cfa-card > *, .emp-card > *, .ep-card > *,
.fwt-card > *, .htfs-card > *, .op-card > *,
.pta-card > *, .scr-card > *, .ua-radar-card > *,
.wa-confluence-card > *, .signal-card > *,
.macro-signal-card > *, .macro-ind-card > *, .lwc-card > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* If a card has a clear "header" element (ticker + grade) it should take
   a smaller fixed column and NOT get stretched by grid-auto-columns. */
.accw-card > [class*="-hdr"], .apw-card > [class*="-hdr"],
.brka-card > [class*="-hdr"], .cfa-card > [class*="-hdr"],
.emp-card > [class*="-hdr"], .ep-card > [class*="-hdr"],
.fwt-card > [class*="-hdr"],
.htfs-card > [class*="-hdr"], .pta-card > [class*="-hdr"],
.scr-card > [class*="-hdr"], .wfc-card > [class*="-hdr"],
.op-card > [class*="-head"], .signal-card > [class*="-top"] {
  /* Header spans the whole card and starts a fresh row. Previously this
     pinned the header into a 180-220px column 1, which on a wrapping grid
     leaves a ragged first row and squeezes the title. Spanning is both
     tidier and width-agnostic. */
  grid-column: 1 / -1;
  min-width: 0;
  max-width: none;
}


/* The <1100px `display:block` revert was REMOVED on 2026-08-19.
   It existed only because the desktop rule above was viewport-gated and had to
   be undone on small screens. The rule is now driven by each card's own inline
   size: below roughly 272px of card width the auto-fit track floor becomes 100%
   and the card collapses to a single column by itself. A `display:block`
   override here would now do active harm - it would strip the grid `gap`,
   re-collapsing the spacing between sections on phones and tablets, and would
   reintroduce a viewport breakpoint into layout that no longer needs one. */

/* ================================================================
 * CHARTS MUST SPAN THE FULL CARD  (2026-08-19)
 * ----------------------------------------------------------------
 * A candlestick / OHLC chart is not a text block and cannot be banded
 * next to one. Once the universal rule above gives a card multiple
 * auto-fit columns, any chart child would be handed a single ~260px
 * track beside the summary text, which crushes candle bodies and wicks
 * into an indiscernible smear.
 *
 * .wfc-card was REMOVED from the universal rule entirely: it is
 * fundamentally a chart card (header -> 220px candlestick chart ->
 * one-line summary) and it renders inside .wfc-grid at only 1fr of a
 * 2-column grid, so each card is roughly half the container width. Its
 * native block flow already stacks those children correctly; the
 * override was the only thing pulling the chart alongside the text.
 *
 * For the remaining cards that embed a chart (.pta-card,
 * .bkc-card, .ua-radar-card) the chart container is forced to span every
 * column so it always gets the card's full width at any device size.
 * Both the class-name patterns and the :has() forms are listed so this
 * holds for existing wrappers and for any future chart child.
 * ================================================================ */
.pta-card > [class*="-chart"], .bkc-card > [class*="-chart"],
.ua-radar-card > [class*="-chart"], .accw-card > [class*="-chart"],
.apw-card > [class*="-chart"], .op-card > [class*="-chart"],
.scr-card > [class*="-chart"], .signal-card > [class*="-chart"],
.macro-signal-card > [class*="-chart"], .macro-ind-card > [class*="-chart"],
.lwc-card > [class*="-chart"], .emp-card > [class*="-chart"],
.fwt-card > [class*="-chart"], .brka-card > [class*="-chart"],
.cfa-card > [class*="-chart"], .hcm-card > [class*="-chart"],
.pta-card > canvas, .bkc-card > canvas, .ua-radar-card > canvas,
.op-card > canvas, .scr-card > canvas, .lwc-card > canvas {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0;
}
/* :has() catches a chart nested one level inside a wrapper div. */
.pta-card > *:has(canvas), .bkc-card > *:has(canvas),
.ua-radar-card > *:has(canvas), .op-card > *:has(canvas),
.scr-card > *:has(canvas), .lwc-card > *:has(canvas),
.emp-card > *:has(canvas), .fwt-card > *:has(canvas) {
  grid-column: 1 / -1 !important;
  min-width: 0;
}