/* ==========================================================================
   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; }

/* The sticky section nav (.ffd-nav) moved to company.css on 25 Oct 2026: the stock page
   uses it too (UX_WEEKS4_6_FIXES.md). */

/* ------------------------------- narrative -------------------------------
   No reading cap: a 920px cap left the right third of a 1400px card blank
   (operator, 11 Nov 2026, TEXT_CARD_WIDTH.md). A wide card flows the text
   into two balanced columns instead, which keeps lines near 90 characters
   AND fills the card. Columns may break between paragraphs, never inside
   one, and .ffd-story-lead keeps a heading with its first paragraph; keeping
   whole sections together left up to ~140px blank under one column. The
   margin above a section that starts a column is dropped by the browser,
   so both columns start level. Under 900px it is one full-width column. */
.ffd-story { font-size: .94rem; line-height: 1.75; color: #2a3441; }
.ffd-story-sec + .ffd-story-sec { margin-top: 18px; }
.ffd-story-lead, .ffd-story p { break-inside: avoid; }
.ffd-story h3 {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ff-accent); margin: 0 0 6px;
}
.ffd-story p { margin: 7px 0; }
.ffd-story-sec > :last-child, .ffd-story-lead > p { margin-bottom: 0; }
@media (min-width: 900px) {
  .ffd-story { columns: 2; column-gap: 44px; }
}

/* FAQ answers span the accordion box like the rest of the card's text
   (their 920px cap left the same blank band, TEXT_CARD_WIDTH.md). */

/* ------------------------------ 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; }
/* Each group's tiles fill their rows (operator, 11 Nov 2026; TEXT_CARD_WIDTH.md): a group that
   fits on one row stretches across it (auto-fit), and a longer one is set in rows of equal
   length, 8 tiles as 4 + 4 and 12 as 6 + 6, instead of a full row and a stub (Growth's 7 + 1 left
   six empty slots, Market's 2 left five). How many 172px tiles fit is read off the card's own
   width (container "km"): 7 from 1,258px, 6 from 1,077, 5 from 896, 4 from 715. */
.ff-card-body:has(> .ffd-km) { container: km / inline-size; }
.ffd-km { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: 9px; }
@container km (min-width: 1258px) {
  .ffd-km:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ffd-km:is(:has(> :nth-child(9):last-child), :has(> :nth-child(10):last-child), :has(> :nth-child(15):last-child)) {
    grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ffd-km:is(:has(> :nth-child(11):last-child), :has(> :nth-child(12):last-child), :has(> :nth-child(16):last-child)) {
    grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container km (min-width: 1077px) and (max-width: 1257.98px) {
  .ffd-km:is(:has(> :nth-child(7):last-child), :has(> :nth-child(8):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ffd-km:is(:has(> :nth-child(9):last-child), :has(> :nth-child(10):last-child), :has(> :nth-child(13):last-child),
             :has(> :nth-child(14):last-child), :has(> :nth-child(15):last-child)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container km (min-width: 896px) and (max-width: 1076.98px) {
  .ffd-km:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ffd-km:is(:has(> :nth-child(7):last-child), :has(> :nth-child(8):last-child), :has(> :nth-child(11):last-child),
             :has(> :nth-child(12):last-child), :has(> :nth-child(16):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container km (min-width: 715px) and (max-width: 895.98px) {
  .ffd-km:is(:has(> :nth-child(5):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.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); }

/* The chart period chips and the empty state moved to company.css (price & events chart). */

/* ------------------------------ 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; }
/* screens, comparisons and sector, after the summary (UX_WEEKS4_6_FIXES.md) */
.ffd-related { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 14px; }
.ffd-related-h {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ff-text-soft); margin-right: 4px;
}
.ffd-pills .ff-chip .n { color: var(--ff-text-faint); font-size: .72rem; margin-left: 4px; }

/* The price chart's event overlay moved to company.css on 25 Oct 2026: the stock page draws
   the same chart (static/market/price_chart.js, UX_WEEKS4_6_FIXES.md). */

/* 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;
  }
}