/* ==========================================================================
   Flash Finance — /fundamentals pages (ffd-* classes).
   Layers on top of market.css (ff-* tokens + components must be loaded first).
   ========================================================================== */

/* ------------------------------ hero header ------------------------------ */
.ffd-hero { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.ffd-hero-left { min-width: 260px; flex: 1 1 420px; }
.ffd-hero h1 { display: block; }
.ffd-hero h1 .sym { opacity: .75; font-weight: 500; font-size: 1.05rem; margin-left: 8px; }
.ffd-kind {
  display: inline-block; vertical-align: 4px; margin-left: 10px; padding: 2px 10px;
  border-radius: 20px; font-size: .64rem; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
}
.ffd-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ffd-hero-chips a.ff-hero-chip { text-decoration: none; transition: background .15s; }
.ffd-hero-chips a.ff-hero-chip:hover { background: rgba(255,255,255,.24); }
.ffd-price-box { text-align: right; flex: 0 0 auto; }
.ffd-price-box .px { font-size: 2rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.ffd-price-box .sub { font-size: .8rem; opacity: .85; margin-top: 3px; }

/* view (consolidated/standalone) toggle inside hero */
.ffd-view { display: inline-flex; gap: 6px; margin-top: 12px; }
.ffd-view a {
  padding: 4px 13px; border-radius: 20px; font-size: .76rem; font-weight: 600;
  color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.35);
}
.ffd-view a.active { background: #fff; color: var(--ff-primary); border-color: #fff; }

/* ----------------------------- sticky anchors ---------------------------- */
/* Sticks BELOW base_news' sticky header, not under it. top:0 put the whole
   bar behind the header the moment it stuck — invisible on desktop and
   completely so under 900px, where the header is ~108px tall. See
   --ff-header-h in market.css for why this is measured, not a literal. */
.ffd-nav {
  position: sticky; top: var(--ff-header-h); z-index: 50;
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--ff-card); border: 1px solid var(--ff-border); border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow); padding: 6px; margin-bottom: 14px; scrollbar-width: none;
}
.ffd-nav::-webkit-scrollbar { display: none; }
.ffd-nav a {
  padding: 7px 13px; border-radius: var(--ff-radius-sm); white-space: nowrap;
  color: var(--ff-text-soft); text-decoration: none; font-size: .82rem; font-weight: 500;
}
.ffd-nav a:hover { background: var(--ff-accent-soft); color: var(--ff-accent); }
/* Anchor targets must clear the header AND the sticky section nav, or the
   card you jumped to lands underneath both. 64px only ever cleared the
   desktop header. */
section[id], div.ff-card[id] { scroll-margin-top: calc(var(--ff-stick-h) + 12px); }

/* ------------------------------- narrative ------------------------------- */
.ffd-story { font-size: .94rem; line-height: 1.75; color: #2a3441; max-width: 920px; }
.ffd-story h3 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ff-accent); margin: 18px 0 6px;
}
.ffd-story h3:first-child { margin-top: 0; }
.ffd-story p { margin: 7px 0; }

/* FAQ answers are running text like .ffd-story, so they take the same
   reading cap — the accordion box still spans the card. */
.ffd-faq-a { max-width: 920px; }

/* ------------------------------ metric tiles ----------------------------- */
.ffd-km-group {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ff-text-soft); margin: 16px 0 8px;
}
.ffd-km-group:first-child { margin-top: 0; }
.ffd-km { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 9px; }
.ffd-km-tile { background: #fbfcfe; border: 1px solid var(--ff-border-soft); border-radius: var(--ff-radius-sm); padding: 10px 12px; }
.ffd-km-tile .l { font-size: .72rem; color: var(--ff-text-soft); display: flex; align-items: center; gap: 5px; }
.ffd-km-tile .v { font-size: 1.05rem; font-weight: 700; color: var(--ff-text); margin-top: 3px; }
.ffd-km-tile.pos .v { color: var(--ff-success); }
.ffd-km-tile.neg .v { color: var(--ff-danger); }
.ffd-km-tile.dim .v { color: var(--ff-text-faint); font-weight: 500; font-size: .92rem; }
.ffd-q {
  cursor: help; color: var(--ff-text-faint); border: 1px solid var(--ff-border);
  border-radius: 50%; width: 13px; height: 13px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1;
}
.ffd-km-badge { font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; margin-left: 6px; vertical-align: 2px; }
.ffd-km-badge.g { background: var(--ff-success-soft); color: var(--ff-success-deep); }
.ffd-km-badge.b { background: var(--ff-danger-soft); color: var(--ff-danger-deep); }

/* ----------------------------- financial tables --------------------------- */
.ffd-tablewrap { overflow-x: auto; }
table.ffd-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.ffd-table th {
  background: #f4f6fa; padding: 9px 12px; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; color: #56607a;
  border-bottom: 1px solid var(--ff-border); text-align: right; white-space: nowrap;
}
table.ffd-table td {
  padding: 8px 12px; border-bottom: 1px solid var(--ff-border-soft);
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
table.ffd-table tr:last-child td { border-bottom: none; }
table.ffd-table tbody tr:hover td { background: #f8fafc; }
table.ffd-table th:first-child, table.ffd-table td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--ff-card);
  color: var(--ff-text); font-weight: 500; box-shadow: 1px 0 0 var(--ff-border-soft);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
table.ffd-table th:first-child { background: #f4f6fa; z-index: 2; }
table.ffd-table tbody tr:hover td:first-child { background: #f8fafc; }

/* same-fiscal-quarter (YoY) highlight + latest column emphasis */
table.ffd-table th.hl, table.ffd-table td.hl { background: var(--ff-accent-soft); }
table.ffd-table th.hl { color: #1e40af; border-top: 2px solid var(--ff-accent); }
table.ffd-table tbody tr:hover td.hl { background: #dbe9fb; }
table.ffd-table td.cl, table.ffd-table th.cl { background: #eef4fd; font-weight: 600; }
table.ffd-table tbody tr:hover td.cl { background: #e2edfb; }

/* growth columns */
table.ffd-table th.gcol, table.ffd-table td.gcol { border-left: 2px solid var(--ff-border); background: #fbfcfe; font-weight: 600; }
td.gcol.pos, td.pos { color: var(--ff-success); }
td.gcol.neg, td.neg { color: var(--ff-danger); }
td.chg-flat { color: var(--ff-text-faint); }
.ffd-na { color: var(--ff-text-faint); }

/* ---------------------- best / worst heat map (ranks) ---------------------
   .b1-.b3 = best three, .w1-.w3 = weakest three, assigned server-side by
   _rank_classes(). GREEN IS THE GOOD END, NOT THE BIGGEST: on an Interest or
   NPA row the good end is the low one (see _lower_better), which keeps this
   consistent with the green/red the YoY/QoQ columns already use.

   These must out-paint .hl (same-fiscal-quarter tint) and .cl (latest column)
   and survive :hover, or the map vanishes exactly when a reader points at it
   — hence the matching hover rules and the ordering after those rules above.
   Rank 1 carries the weight; 2 and 3 are deliberately faint so the eye lands
   on the extreme first and reads the rest as context. */
table.ffd-table td.b1 { background: #cdf3da; color: #14532d; font-weight: 700; }
table.ffd-table td.b2 { background: #e2f8ea; color: #166534; font-weight: 600; }
table.ffd-table td.b3 { background: #f0fcf4; color: #166534; }
table.ffd-table td.w1 { background: #fcd9d9; color: #7f1d1d; font-weight: 700; }
table.ffd-table td.w2 { background: #fdeaea; color: #991b1b; font-weight: 600; }
table.ffd-table td.w3 { background: #fef5f5; color: #991b1b; }
table.ffd-table tbody tr:hover td.b1 { background: #bdeecd; }
table.ffd-table tbody tr:hover td.b2 { background: #d6f4e1; }
table.ffd-table tbody tr:hover td.b3 { background: #e7f9ee; }
table.ffd-table tbody tr:hover td.w1 { background: #f9c9c9; }
table.ffd-table tbody tr:hover td.w2 { background: #fbdede; }
table.ffd-table tbody tr:hover td.w3 { background: #fdecec; }
/* the growth columns colour their own text — don't fight them for it */
table.ffd-table td.gcol.b1, table.ffd-table td.gcol.b2, table.ffd-table td.gcol.b3,
table.ffd-table td.gcol.w1, table.ffd-table td.gcol.w2, table.ffd-table td.gcol.w3 { color: inherit; }

/* reader opt-out — .ffd-nohl on the page turns the whole map off */
.ffd-nohl table.ffd-table td.b1, .ffd-nohl table.ffd-table td.b2,
.ffd-nohl table.ffd-table td.b3, .ffd-nohl table.ffd-table td.w1,
.ffd-nohl table.ffd-table td.w2, .ffd-nohl table.ffd-table td.w3 {
  background: transparent; color: inherit; font-weight: inherit;
}
.ffd-nohl table.ffd-table td.cl { background: #eef4fd; }
.ffd-nohl table.ffd-table td.hl { background: var(--ff-accent-soft); }

/* heat-map legend + toggle in the card header */
.ffd-hm { display: flex; align-items: center; gap: 10px; font-size: .72rem; color: var(--ff-text-soft); flex-wrap: wrap; }
.ffd-hm i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; }
.ffd-hm i.g { background: #cdf3da; border: 1px solid #86d9a5; }
.ffd-hm i.r { background: #fcd9d9; border: 1px solid #f0a6a6; }
.ffd-hm label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }

/* legend chip above quarterly table */
.ffd-legend { font-size: .74rem; color: var(--ff-text-soft); display: flex; align-items: center; gap: 6px; }
.ffd-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--ff-accent-soft); border: 1px solid var(--ff-accent); display: inline-block; }

/* self row in peer table */
table.ffd-table tr.self td { background: var(--ff-accent-soft); font-weight: 600; }
table.ffd-table tr.self td:first-child { background: var(--ff-accent-soft); }

/* chart period chips */
.ffd-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.ffd-periods button {
  background: #fff; border: 1px solid var(--ff-border); color: var(--ff-text-soft);
  padding: 4px 12px; border-radius: 20px; cursor: pointer; font-size: .74rem;
  font-weight: 600; font-family: var(--ff-font); transition: all .15s;
}
.ffd-periods button:hover { border-color: var(--ff-accent); color: var(--ff-accent); }
.ffd-periods button.active { background: var(--ff-primary); border-color: var(--ff-primary); color: #fff; }
.ffd-chart-wrap { position: relative; height: 300px; }

/* empty state */
.ffd-empty {
  border: 1px dashed var(--ff-border); border-radius: var(--ff-radius-sm);
  padding: 22px; text-align: center; color: var(--ff-text-soft); font-size: .86rem; line-height: 1.6;
}
.ffd-empty strong { display: block; color: var(--ff-text); margin-bottom: 4px; }

/* ------------------------------ index page -------------------------------
   The search box is the primary action on this page, so it carries a heavier
   border and an explicit placeholder colour: a 1px --ff-border box on the
   near-white page background read as an empty gap, and the UA-default
   placeholder grey failed contrast against #fff. */
.ffd-search { position: relative; margin-bottom: 14px; }
.ffd-search input {
  width: 100%; box-sizing: border-box; padding: 15px 18px 15px 48px; font-size: 1rem;
  font-family: var(--ff-font); color: var(--ff-text); font-weight: 500;
  background: var(--ff-card) no-repeat 17px center / 19px 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c7be5' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.3-4.3'/%3E%3C/svg%3E");
  border: 2px solid #c3d0e0; border-radius: var(--ff-radius);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .07); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
/* Firefox dims placeholders by default — opacity:1 keeps the ratio we set */
.ffd-search input::placeholder { color: #5c6a7d; opacity: 1; font-weight: 400; }
.ffd-search input:hover { border-color: #9db4d0; }
.ffd-search input:focus { border-color: var(--ff-accent); box-shadow: 0 0 0 3px var(--ff-accent-soft); }
.ffd-search .results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 80;
  background: #fff; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-sm);
  box-shadow: var(--ff-shadow-hover); max-height: 380px; overflow-y: auto; display: none;
}
.ffd-search .results.open { display: block; }
.ffd-search .item {
  padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--ff-border-soft); font-size: .88rem;
}
.ffd-search .item:last-child { border-bottom: none; }
.ffd-search .item:hover, .ffd-search .item.selected { background: var(--ff-accent-soft); }
.ffd-search .item .code { font-weight: 700; color: var(--ff-primary); min-width: 96px; }
.ffd-search .item .name { color: var(--ff-text-soft); flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ffd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ffd-co-card {
  background: var(--ff-card); border: 1px solid var(--ff-border); border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow); padding: 13px 15px; text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.ffd-co-card:hover { border-color: var(--ff-accent); box-shadow: var(--ff-shadow-hover); transform: translateY(-1px); }
.ffd-co-card .nm { font-weight: 600; color: var(--ff-text); font-size: .88rem; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffd-co-card .sec { color: var(--ff-text-faint); font-size: .72rem; margin-bottom: 8px; }
.ffd-co-card .row { display: flex; justify-content: space-between; align-items: baseline; }
.ffd-co-card .px { font-weight: 700; color: var(--ff-primary); font-size: .95rem; }
.ffd-co-card .mc { color: var(--ff-text-soft); font-size: .74rem; }

.ffd-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.ffd-pills .ff-chip .n { color: var(--ff-text-faint); font-size: .72rem; margin-left: 4px; }

/* --------------------- price chart · event overlay ------------------------
   Corporate actions and AI-analysed filings pinned onto the price line.
   Per-kind colours live in one JS map (EV_KIND) and are injected inline, so
   the canvas glyphs and the DOM chips can never drift apart. */
.ffd-chart-tall { height: 340px; }

/* filter chips — one per event family, click to hide/show that family */
.ffd-evbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 10px; }
.ffd-evchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #fff; border: 1px solid var(--ff-border); color: var(--ff-text-soft);
  padding: 4px 11px; border-radius: 20px; font-size: .74rem; font-weight: 600;
  font-family: var(--ff-font); transition: all .15s; line-height: 1.5;
}
.ffd-evchip:hover { border-color: var(--ff-accent); color: var(--ff-text); }
.ffd-evchip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.ffd-evchip .n { color: var(--ff-text-faint); font-weight: 500; }
.ffd-evchip.off { opacity: .45; background: var(--ff-neutral-soft); }
.ffd-evchip.off i { background: var(--ff-text-faint) !important; }
.ffd-evbar .sep { flex: 1; }
.ffd-evbar .tip { font-size: .72rem; color: var(--ff-text-faint); }

/* "next up" strip — upcoming ex-dates / board meetings, always visible */
.ffd-evnext { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 11px; }
.ffd-evnext .lbl {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ff-text-faint);
}
.ffd-evnext button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--ff-font);
  background: var(--ff-accent-soft); border: 1px solid transparent; color: #1e40af;
  padding: 4px 11px; border-radius: 20px; font-size: .74rem; font-weight: 600; line-height: 1.5;
}
.ffd-evnext button:hover { border-color: var(--ff-accent); }
.ffd-evnext button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.ffd-evnext button .d { color: var(--ff-text-soft); font-weight: 500; }

/* detail panel — opens under the chart when a pin is clicked */
.ffd-evpanel {
  margin-top: 12px; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-sm);
  background: var(--ff-bg); overflow: hidden;
}
.ffd-evpanel[hidden] { display: none; }
.ffd-evpanel-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  background: #fff; border-bottom: 1px solid var(--ff-border);
}
.ffd-evpanel-head .d { font-weight: 700; font-size: .86rem; color: var(--ff-primary); }
.ffd-evpanel-head .rel { font-size: .74rem; color: var(--ff-text-faint); }
.ffd-evpanel-head .x {
  margin-left: auto; background: none; border: none; cursor: pointer; font-size: 1.25rem;
  line-height: 1; color: var(--ff-text-faint); padding: 0 4px;
}
.ffd-evpanel-head .x:hover { color: var(--ff-danger); }

.ffd-ev { padding: 12px 13px; border-bottom: 1px solid var(--ff-border); }
.ffd-ev:last-child { border-bottom: none; }
.ffd-ev-top { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 6px; }
.ffd-ev-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ffd-ev-when {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ff-text-faint);
}
.ffd-ev-src {
  margin-left: auto; font-size: .76rem; font-weight: 700; color: var(--ff-accent);
  text-decoration: none; white-space: nowrap;
}
.ffd-ev-src:hover { text-decoration: underline; }
.ffd-ev-label { font-size: .9rem; font-weight: 600; color: var(--ff-text); line-height: 1.45; }
.ffd-ev-detail { font-size: .78rem; color: var(--ff-text-soft); margin-top: 3px; }
.ffd-ev .ff-ai { margin-top: 9px; }
.ffd-ev-more { display: inline-block; margin-top: 7px; font-size: .76rem; color: var(--ff-accent); text-decoration: none; font-weight: 600; }
.ffd-ev-more:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .ffd-chart-tall { height: 280px; }
  .ffd-ev-src { margin-left: 0; }
}

/* Key metrics become a definition list on phones.
   Left-aligned label-over-value is the right call for a tile GRID, but under
   ~427px the auto-fill grid collapses to ONE column, and then each tile is a
   ~290px card holding a ~60px number — so the value sits in the middle of a
   mostly empty box with no second column to line up against. That dead space
   is the complaint, not the alignment. Pushing the value to the right edge on
   the same row restores the alignment relationship, and folding the cards
   into flush hairline rows drops this section's height by roughly 40% (there
   are ~25 metrics). Above 560px the grid has real columns again, so the tiles
   go back to being tiles. */
@media (max-width: 560px) {
  .ffd-km { grid-template-columns: 1fr; gap: 0; }
  .ffd-km-tile {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    background: transparent; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--ff-border-soft); padding: 9px 2px;
  }
  .ffd-km-tile:last-child { border-bottom: 0; }
  .ffd-km-tile .l { flex: 1 1 auto; min-width: 0; font-size: .8rem; }
  .ffd-km-tile .v { flex: 0 0 auto; margin-top: 0; font-size: 1rem; white-space: nowrap; }
}

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 768px) {
  .ffd-price-box { text-align: left; }
  .ffd-price-box .px { font-size: 1.6rem; }
  .ffd-chart-wrap { height: 240px; }
  .ffd-story { font-size: .9rem; }
  /* Let the metric label WRAP rather than ellipsis away. "Cash from Operating
     Activity" clipped to "Cash from Ope…" is indistinguishable from "Cash from
     Investing Activity", and a phone has no hover to reveal the title=. Two
     short lines cost a little row height and are unambiguous.
     min-width matters more than max-width here: every other column is
     nowrap, so the label is the only flexible one and auto table layout
     collapses it to min-content (~89px, the width of "Operating") the moment
     wrapping is allowed — which is 4 lines a row. 135px is where the long
     labels settle at 2 lines; wider buys no lines back and only steals room
     from the numbers. */
  table.ffd-table th:first-child, table.ffd-table td:first-child {
    min-width: 135px; max-width: 160px; font-size: .8rem;
    white-space: normal; text-overflow: clip; overflow-wrap: break-word;
    line-height: 1.3;
  }
}