/* ChipFlip 3-pane layout shell — TradingView-style redesign.
   Palette from reports/palette.scss. Loaded after scanner.css, which still
   owns .stoggle, #t table styling (Screener overlay), .aff-* (Buy-it pane),
   and .fb-* (Screener filter bar) — this file owns only the new shell. */

:root {
  --cf-white: #FFFFFF;
  --cf-alabaster: #E5E0DC;
  --cf-ochre: #D07712;
  --cf-indigo: #2E3C56;
  --cf-platinum: #EAECEE;
  --cf-blaze: #FF5E07;
  --cf-green: #16A34A;
  --cf-red: #DC2626;
  --cf-purple: #6D5DAA;
  --cf-blue: #378ADD;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--cf-platinum);
  font-family: -apple-system, 'Segoe UI', Inter, sans-serif;
  color: var(--cf-indigo);
}

* { box-sizing: border-box; }

.cf-root { min-height: 100vh; display: flex; flex-direction: column; }

/* ---- Warning banner ---- */
.cf-banner {
  background: #FCEEDD; border-bottom: 1px solid var(--cf-ochre); color: var(--cf-indigo);
  font-size: 12px; padding: 8px 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.cf-banner.hidden { display: none; }
.cf-banner .ti { color: var(--cf-ochre); margin-right: 6px; vertical-align: -2px; font-size: 14px; }
.cf-banner-close { background: none; border: none; color: var(--cf-indigo); cursor: pointer; font-size: 14px; padding: 0 4px; flex-shrink: 0; }

/* ---- Shell: left pane / resize / right column / icon rail ---- */
.cf-shell { flex: 1; display: flex; min-height: 0; }

.cf-left { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.cf-topbar { background: var(--cf-indigo); padding: 10px 16px; display: flex; align-items: center; gap: 10px; position: relative; }
.cf-logo { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--cf-white); font-size: 15px; white-space: nowrap; }
.cf-logo-mark { width: 33px; height: 33px; flex-shrink: 0; }

.cf-search-wrap { flex: 1; max-width: 320px; position: relative; }
.cf-search-wrap .ti-search { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cf-indigo); opacity: .5; font-size: 15px; }
.cf-search-input {
  width: 100%; padding: 8px 86px 8px 32px; background: var(--cf-white);
  border: 1px solid var(--cf-indigo); border-radius: 6px; color: var(--cf-indigo);
}
.cf-search-icons {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 7px;
}
.cf-search-icons button { background: none; border: none; padding: 0; cursor: pointer; display: flex; color: var(--cf-indigo); opacity: .5; }
.cf-search-icons button:hover { opacity: .85; }
.cf-search-icons .ti { font-size: 15px; }
.cf-search-icons #search-hint { color: var(--cf-indigo); opacity: .45; cursor: help; }

.cf-topbar-spacer { flex: 1; }
.cf-hamburger-btn { background: none; border: 1px solid transparent; color: var(--cf-white); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; flex-shrink: 0; }
.cf-hamburger-btn:hover { border-color: rgba(255,255,255,.25); }

.cf-menu {
  position: absolute; top: calc(100% + 4px); right: 16px; z-index: 50;
  background: var(--cf-white); border: 1px solid var(--cf-alabaster); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(46,60,86,.15); min-width: 220px; padding: 8px 0; display: none;
}
.cf-menu.open { display: block; }
.cf-menu-section { padding: 4px 0; }
.cf-menu-section + .cf-menu-section { border-top: 1px solid var(--cf-alabaster); }
.cf-menu a, .cf-menu button.cf-menu-item {
  display: block; width: 100%; text-align: left; padding: 7px 14px; font-size: 13px;
  color: var(--cf-indigo); text-decoration: none; background: none; border: none; cursor: pointer;
}
.cf-menu a:hover, .cf-menu button.cf-menu-item:hover { background: var(--cf-platinum); }
.cf-menu-stat { padding: 5px 14px; font-size: 11px; color: var(--cf-indigo); opacity: .6; }

/* ---- Product panel ---- */
.cf-product-panel { flex: 1; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; }
/* Missing override let the guide panel render stacked underneath the still-
   visible product panel instead of replacing it — same recurring "later
   class rule beats .hidden" specificity bug as every other element listed
   near .cf-right.hidden below. Audited every classList.toggle("hidden")
   call site in scanner.js after finding this one; this was the only gap. */
.cf-product-panel.hidden { display: none; }

.cf-product-header { display: flex; align-items: center; gap: 10px; }
.cf-product-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--cf-white); border: 1px solid var(--cf-alabaster); flex-shrink: 0; object-fit: contain; }
.cf-product-name { font-size: 16px; font-weight: 500; color: var(--cf-indigo); margin: 0; }
.cf-product-sub { font-size: 11px; color: var(--cf-indigo); opacity: .6; }
.cf-product-spacer { flex: 1; }
.cf-scalp-badge {
  display: flex; align-items: center; gap: 4px; font-size: 11px; color: #663D08;
  background: #FAEEDA; border: 1px solid var(--cf-ochre); border-radius: 6px; padding: 3px 8px;
}
.cf-scalp-badge .ti { font-size: 13px; color: var(--cf-ochre); }
.cf-scalp-badge.hidden { display: none; }
.cf-external-link { color: var(--cf-indigo); opacity: .6; }
.cf-external-link .ti { font-size: 16px; }
.cf-star-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--cf-indigo); opacity: .4; }
.cf-star-btn .ti { font-size: 17px; }
.cf-star-btn:hover { opacity: .7; }
.cf-star-btn.in-watchlist { color: var(--cf-ochre); opacity: 1; }

.cf-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 2px 0; }
.cf-price-cell-label { font-size: 11px; color: var(--cf-indigo); opacity: .6; }
.cf-price-cell-value { font-size: 16px; font-weight: 500; color: var(--cf-indigo); }
.cf-price-cell-value.no-data { opacity: .5; }
.cf-price-cell-change { font-size: 11px; font-weight: 500; margin-left: 4px; }
.cf-price-cell-change.up { color: var(--cf-green); }
.cf-price-cell-change.down { color: var(--cf-red); }
/* Starts empty (JS fills in "Updated Xd ago" after loadProducts() resolves)
   -- with no reserved height an empty div renders at 0px, so all 4 cells
   populating at once grows the 2-row price grid by ~11px per row,
   pushing everything below (chart included) down. Confirmed via direct
   measurement: 0px empty vs 10.67px populated at this font-size. This was
   the real remaining source behind the chart-wrap "layout shift culprit"
   PageSpeed kept attributing to it even after fixing the chart's own
   height (static/css/layout.css .cf-chart-wrap) -- the chart's box never
   moved size, its position did, because everything above it grew. */
.cf-price-cell-updated { font-size: 9px; color: var(--cf-indigo); opacity: .45; min-height: 11px; }

.cf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cf-chip {
  display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--cf-indigo);
  background: var(--cf-white); border: 1px solid var(--cf-alabaster); border-radius: 6px;
  padding: 3px 8px; cursor: pointer;
}
.cf-chip.active { color: var(--cf-white); background: var(--cf-indigo); border-color: var(--cf-indigo); }
.cf-chip.disabled { opacity: .4; cursor: not-allowed; }
.cf-chip-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cf-chip-dot.new { background: var(--cf-blue); }
.cf-chip-dot.used { background: var(--cf-green); }
.cf-chip-dot.parts { background: var(--cf-red); }
.cf-chip-dot.refurb { background: var(--cf-purple); }

.cf-chart-wrap {
  /* min-height was 120px — with a scrolling product panel this long
     (price grid, chart, buy rating, compare, specs, community, news,
     footer all stacked in one flex column), flex:1 alone squeezed the
     chart down to that floor every time, since the sections below it
     have real content-driven heights that don't yield space. 280px gives
     the chart real presence as the panel's centerpiece instead of a sliver.

     flex: 1 (grow-to-fill) is what turned that floor into a real layout
     shift, though: on first paint the async sections below (buy rating,
     compare, specs, community, news) are still empty/loading, so flex:1
     hands the chart a big "leftover space" share; once those sections
     populate with real content a moment later, the chart gets squeezed
     back down toward its 280px floor — a real, measured shift (PageSpeed
     Insights: 0.117 CLS on desktop, 0.394 on mobile, almost entirely this
     element). A fixed height doesn't grow/shrink as siblings change, so
     there's nothing left to shift — 320px keeps the same "real presence"
     the min-height comment above was going for. */
  flex: 0 0 320px; background: var(--cf-white); border: 1px solid var(--cf-alabaster);
  border-radius: 8px; padding: 8px; position: relative;
}
.cf-chart-wrap canvas { width: 100% !important; height: 100% !important; display: block; }
.cf-chart-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--cf-indigo); opacity: .4; font-size: 12px; }
.cf-chart-placeholder.hidden { display: none; }

.cf-range-row { display: flex; gap: 6px; }
.cf-range-btn {
  font-size: 11px; color: var(--cf-indigo); background: var(--cf-platinum); border: none;
  border-radius: 6px; padding: 3px 8px; cursor: pointer;
}
.cf-range-btn.active { color: var(--cf-white); background: var(--cf-indigo); }

/* ---- Guide panel — reuses site.css's .wrap/.content-header/.prose/etc for
   the injected article content (both files now share the same light
   palette), this file only owns the panel chrome around it. ---- */
.cf-guide-panel { flex: 1; overflow-y: auto; padding: 14px; }
.cf-guide-panel.hidden { display: none; }
.cf-guide-back {
  display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: var(--cf-indigo); opacity: .7; font-size: 12px; padding: 4px 0 14px; font-family: -apple-system, 'Segoe UI', sans-serif;
}
.cf-guide-back:hover { opacity: 1; }
.cf-guide-back .ti { font-size: 14px; }
/* site.css's .wrap sets a max-width/centering meant for a full browser
   window — the guide panel is much narrower, so let content use the
   available width instead. */
.cf-guide-panel .wrap { max-width: none; padding: 0; margin: 0; }
.cf-guide-panel .content-page { padding: 0; }
.cf-guide-panel .related-guides .guide-card,
.cf-guide-panel #gpu-table-wrap { pointer-events: auto; }

/* ---- Product detail sections (compare, specs, community, news, buy rating) ---- */
.cf-section { border-top: 1px solid var(--cf-alabaster); padding-top: 14px; margin-top: 4px; }
.cf-section-title { font-size: 11px; font-weight: 500; color: var(--cf-indigo); text-transform: uppercase; letter-spacing: .04em; opacity: .6; margin-bottom: 10px; }
.cf-empty-note { font-size: 12px; color: var(--cf-indigo); opacity: .6; line-height: 1.5; }
.cf-empty-note a { color: var(--cf-blaze); opacity: 1; text-decoration: underline; }

.cf-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cf-compare-card {
  background: var(--cf-platinum); border-radius: 8px; padding: 8px 10px; cursor: pointer; border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 2px;
}
.cf-compare-card:hover { border-color: var(--cf-alabaster); background: var(--cf-white); }
.cf-compare-name { font-size: 12px; color: var(--cf-indigo); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-compare-meta { font-size: 11px; color: var(--cf-indigo); opacity: .6; }
.cf-compare-margin { font-size: 11px; color: var(--cf-green); font-weight: 500; }

.cf-news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; align-items: start; }
.cf-news-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
}
.cf-news-item:hover { background: var(--cf-platinum); }
.cf-news-title { font-size: 12px; color: var(--cf-indigo); font-weight: 500; line-height: 1.4; }
.cf-news-meta { font-size: 11px; color: var(--cf-indigo); opacity: .5; }

.cf-specs-list { display: flex; flex-direction: column; gap: 12px; }
.cf-spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 20px; }
.cf-spec-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--cf-platinum); }
.cf-spec-label { color: var(--cf-indigo); opacity: .55; }
.cf-spec-value { color: var(--cf-indigo); font-weight: 500; text-align: right; }
.cf-specs-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-spec-pill { font-size: 11px; color: var(--cf-indigo); background: var(--cf-platinum); border-radius: 999px; padding: 4px 10px; }

.cf-buyrating { display: flex; align-items: center; gap: 20px; }
.cf-buyrating-label { font-size: 20px; font-weight: 600; color: var(--cf-indigo); margin-bottom: 4px; }
.cf-buyrating-factors { font-size: 12px; color: var(--cf-indigo); opacity: .55; line-height: 1.5; max-width: 420px; }

.cf-footer { border-top: 1px solid var(--cf-alabaster); margin-top: 32px; padding: 28px 0 20px; }
.cf-footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 28px; }
.cf-footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--cf-indigo); flex-shrink: 0; }
.cf-footer-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.cf-footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 120px; }
.cf-footer-col-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-indigo); opacity: .45; margin-bottom: 2px; }
.cf-footer-col a { font-size: 13px; color: var(--cf-indigo); opacity: .75; text-decoration: none; }
.cf-footer-col a:hover { opacity: 1; }
.cf-footer-bottom { border-top: 1px solid var(--cf-alabaster); padding-top: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cf-footer-disclosure { font-size: 11px; color: var(--cf-indigo); opacity: .5; line-height: 1.6; max-width: 560px; }
.cf-footer-copyright { font-size: 11px; color: var(--cf-indigo); opacity: .4; white-space: nowrap; }

/* ---- Resize handles ---- */
.cf-resize-v { width: 4px; background: var(--cf-platinum); position: relative; cursor: col-resize; flex-shrink: 0; }
.cf-resize-v-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 24px; background: var(--cf-alabaster); border-radius: 2px; }
.cf-resize-h { height: 4px; background: var(--cf-platinum); position: relative; cursor: row-resize; flex-shrink: 0; border-left: 1px solid var(--cf-alabaster); }
.cf-resize-h-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 2px; background: var(--cf-alabaster); border-radius: 2px; }
body.cf-resizing { cursor: inherit; user-select: none; }
body.cf-resizing-v { cursor: col-resize !important; }
body.cf-resizing-h { cursor: row-resize !important; }

/* ---- Right column: Watchlist + Buy-it ---- */
.cf-right { width: 280px; display: flex; flex-direction: column; flex-shrink: 0; }
.cf-right.hidden, .cf-resize-v.hidden { display: none; }

.cf-watchlist { flex: 1.4; display: flex; flex-direction: column; border-left: 1px solid var(--cf-alabaster); background: var(--cf-white); min-height: 0; }
.cf-watchlist-header { padding: 10px 12px 6px; display: flex; align-items: center; gap: 6px; }
.cf-watchlist-title { flex: 1; font-size: 11px; font-weight: 500; color: var(--cf-indigo); text-transform: uppercase; letter-spacing: .04em; }
.cf-watchlist-select {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 500; color: var(--cf-indigo); text-transform: uppercase;
  letter-spacing: .04em; background: var(--cf-white); border: 1px solid var(--cf-alabaster); border-radius: 4px;
  padding: 3px 4px; cursor: pointer;
}
#watchlist-delete-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--cf-indigo); opacity: .45; }
#watchlist-delete-btn:hover { opacity: .8; color: var(--cf-red); }
#watchlist-delete-btn:disabled { opacity: .2; cursor: default; }
#watchlist-delete-btn .ti { font-size: 14px; }
.cf-watchlist-header .ti { color: var(--cf-indigo); opacity: .6; font-size: 15px; cursor: pointer; background: none; border: none; }
.cf-watchlist-colheader { display: flex; align-items: center; gap: 6px; padding: 0 12px 6px; border-bottom: 1px solid var(--cf-alabaster); }
.cf-watchlist-colheader-label { font-size: 9px; color: var(--cf-indigo); opacity: .55; text-transform: uppercase; letter-spacing: .04em; }
/* Mirrors the data rows' star(16px)/name(flex:1)/indicator(16px)/price(48px)
   column widths exactly, so the header labels line up with real values.
   CSP has no 'unsafe-inline' in style-src, so this must be real CSS
   classes, not inline style="" attributes (which get silently dropped). */
.cf-watchlist-colheader-spacer { flex: 0 0 16px; }
.cf-watchlist-colheader-product { flex: 1; }
.cf-watchlist-colheader-price { text-align: right; width: 48px; flex-shrink: 0; }
.cf-watchlist-col-resize-handle {
  cursor: col-resize; display: flex; align-items: center; justify-content: center;
}
.cf-watchlist-col-resize-handle::after {
  content: ""; width: 1px; height: 14px; background: rgba(46, 60, 86, .3);   /* always-visible line, same reasoning as .col-resize-handle */
}
.cf-watchlist-col-resize-handle:hover::after, .cf-watchlist-col-resize-handle.resizing::after { background: var(--cf-indigo); }
.cf-watchlist-body { flex: 1; overflow-y: auto; }
.cf-watchlist-row { display: flex; align-items: center; gap: 6px; padding: 8px 12px; cursor: pointer; }
.cf-watchlist-row:hover, .cf-watchlist-row.active { background: var(--cf-platinum); }
.cf-watchlist-star {
  color: var(--cf-indigo); opacity: .3; font-size: 13px; cursor: pointer; background: none; border: none;
  width: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.cf-watchlist-star.fav { color: var(--cf-ochre); opacity: 1; }
.cf-watchlist-name { flex: 1; min-width: 0; font-size: 12px; color: var(--cf-indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fixed-width slot even when empty (neither scalp nor deal applies) — the
   header reserves the same width for this column, so an empty slot must
   still take up space or every column after it drifts out of alignment. */
.cf-watchlist-indicator { width: 16px; flex-shrink: 0; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.cf-watchlist-indicator .scalp { color: var(--cf-ochre); }
.cf-watchlist-indicator .deal { color: var(--cf-blaze); }
.cf-watchlist-price-col { text-align: right; width: 48px; flex-shrink: 0; }
.cf-watchlist-price-col-value { font-size: 12px; color: var(--cf-indigo); }
.cf-watchlist-price-col-change { font-size: 10px; }
.cf-watchlist-price-col-change.up { color: var(--cf-green); }
.cf-watchlist-price-col-change.down { color: var(--cf-red); }
.cf-watchlist-price-col-change.flat { color: var(--cf-indigo); opacity: .5; }
.cf-watchlist-empty { padding: 24px 16px; text-align: center; font-size: 11px; color: var(--cf-indigo); opacity: .5; }
.cf-watchlist-footer { padding: 6px 12px; border-top: 1px solid var(--cf-alabaster); font-size: 10px; color: var(--cf-indigo); opacity: .55; }

.cf-buyit { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--cf-alabaster); background: var(--cf-white); min-height: 0; }
.cf-buyit-header { padding: 10px 12px; border-bottom: 1px solid var(--cf-alabaster); font-size: 11px; font-weight: 500; color: var(--cf-indigo); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-buyit-body { flex: 1; padding: 10px 12px; overflow-y: auto; }
/* #aff-links (scanner.css) is an ID selector — it beats .cf-buyit-body on
   specificity regardless of load order, so the fixed 2x2 grid has to be
   declared against the ID here too, or scanner.css's #aff-links{display:flex}
   silently wins and the grid never applies. */
#aff-links.cf-buyit-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start;
}
/* .aff-link etc are reused from scanner.css (dark-theme component styles) —
   overridden here to the light shell palette. */
.cf-buyit-body .aff-link {
  flex-direction: column; align-items: flex-start; font-family: -apple-system, 'Segoe UI', sans-serif;
  background: var(--cf-platinum); border: 1px solid transparent;
}
.cf-buyit-body .aff-thumb { width: 100%; height: 56px; background: var(--cf-white); }
.cf-buyit-body .aff-info .aff-title { color: var(--cf-indigo); }
.cf-buyit-body .aff-info .aff-cond { color: var(--cf-indigo); opacity: .6; }
.cf-buyit-body .aff-link:hover { background: var(--cf-alabaster); }
.cf-buyit-body .aff-link.aff-disabled { background: var(--cf-platinum); }
.cf-buyit-body .aff-link.aff-deal { background: #FFF1E6; border-color: var(--cf-blaze); }

/* ---- Screener overlay: retheme scanner.css's dark variables to the new
   light palette, scoped to this overlay only. scanner.css's table/filter-bar
   rules all reference these same custom-property names (var(--bg0) etc), so
   redefining them here cascades to every reused component automatically —
   no need to duplicate or rewrite scanner.css's actual rules. ---- */
.cf-screener-overlay {
  --bg0: var(--cf-platinum);
  --bg1: var(--cf-white);
  --bg2: var(--cf-platinum);
  --bg3: var(--cf-alabaster);
  --border: var(--cf-alabaster);
  --border2: var(--cf-alabaster);
  --tx0: var(--cf-indigo);
  --tx1: rgba(46, 60, 86, .68);
  --tx2: rgba(46, 60, 86, .5);
  background: var(--bg0);
}
.cf-screener-body { background: var(--bg0); }

/* ---- Settings export/import modal ---- */
.cf-modal-overlay {
  position: fixed; inset: 0; background: rgba(46,60,86,.5); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.cf-modal-overlay.hidden { display: none; }
.cf-modal { background: var(--cf-white); border-radius: 10px; width: 460px; max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); overflow-y: auto; }
.cf-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--cf-alabaster); font-weight: 500; }
.cf-modal-close { background: none; border: none; color: var(--cf-indigo); cursor: pointer; }
.cf-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.cf-modal-body textarea {
  width: 100%; min-height: 80px; font-family: monospace; font-size: 11px; padding: 8px;
  border: 1px solid var(--cf-alabaster); border-radius: 6px; resize: vertical; color: var(--cf-indigo);
}
.cf-modal-body .cf-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-modal-body button {
  font-size: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--cf-alabaster); background: var(--cf-platinum); color: var(--cf-indigo);
}
.cf-modal-body button.primary { background: var(--cf-indigo); color: var(--cf-white); border-color: var(--cf-indigo); }
.cf-modal-error { color: var(--cf-red); font-size: 12px; }
.cf-modal-success { color: var(--cf-green); font-size: 12px; }

/* ---- Watchlist column picker popover ---- */
.cf-colpicker {
  position: absolute; z-index: 1500; background: var(--cf-white); border: 1px solid var(--cf-alabaster);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(46,60,86,.15); padding: 6px 0; min-width: 160px; display: none;
}
.cf-colpicker.open { display: block; }
.cf-colpicker label { display: flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; color: var(--cf-indigo); cursor: pointer; }
.cf-colpicker label:hover { background: var(--cf-platinum); }
.cf-colpicker-hint { padding: 5px 12px; font-size: 10px; color: var(--cf-indigo); opacity: .55; border-top: 1px solid var(--cf-alabaster); margin-top: 4px; }

/* ---- Icon rail ---- */
.cf-rail { width: 38px; border-left: 1px solid var(--cf-alabaster); background: var(--cf-platinum); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0; flex-shrink: 0; }
.cf-rail button { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.cf-rail .ti { color: var(--cf-indigo); font-size: 18px; opacity: .7; }
.cf-rail .ti-list-search, .cf-rail .ti-help-circle { opacity: 1; }
.cf-rail-icon.active .ti { opacity: 1; color: var(--cf-blaze); }
.cf-rail-divider { width: 20px; height: 1px; background: var(--cf-alabaster); }
.cf-rail-spacer { flex: 1; }

/* ---- Screener overlay ---- */
.cf-screener-overlay {
  position: fixed; inset: 0; background: var(--cf-platinum); z-index: 1000;
  display: none; flex-direction: column;
}
.cf-screener-overlay.open { display: flex; }
.cf-screener-topbar { display: flex; align-items: center; padding: 10px 16px; background: var(--cf-indigo); gap: 12px; }
.cf-screener-topbar-title { color: var(--cf-white); font-size: 14px; font-weight: 500; flex: 1; }
.cf-screener-close { background: none; border: none; color: var(--cf-white); cursor: pointer; padding: 6px; }
.cf-screener-close .ti { font-size: 18px; }
.cf-screener-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* CSP-audit fixes: style="" attributes (including those injected via innerHTML)
   are silently dropped since style-src has no 'unsafe-inline'. Converted to classes. */
.cf-new-watchlist-input { width: 100%; font-size: 11px; padding: 4px 6px; border: 1px solid var(--cf-alabaster); border-radius: 4px; box-sizing: border-box; }
.cf-file-label { display: flex; align-items: center; }
.cf-import-file { font-size: 12px; }
.cf-search-dropdown-empty { padding: 10px 12px; font-size: 12px; color: var(--cf-indigo); opacity: .6; }
.search-dropdown-row { padding: 8px 12px; font-size: 12px; color: var(--cf-indigo); cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.cf-dropdown-row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-dropdown-row-price { opacity: .5; flex-shrink: 0; }
.cf-load-search-item { cursor: pointer; }
.cf-guide-error { padding: 20px; color: var(--cf-indigo); }

/* ================================================================
   Mobile layout — implements the approved design in
   reports/mobile-mockup-v1.html: bottom tab bar (Browse / Product /
   Watchlist / Menu), Screener re-cut as a row list, full-screen search
   overlay, Buy-It folded into the product page, no resize handles.
   Components are defined unscoped (they're display:none by default and
   only ever opened from mobile-only triggers); the media query at the
   bottom does the actual layout switching.
   ================================================================ */

.cf-mobile-only { display: none; }

/* ---- Bottom tab bar ---- */
.cf-tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  background: var(--cf-white); border-top: 1px solid var(--cf-alabaster);
  padding: 6px 4px max(10px, env(safe-area-inset-bottom));
}
.cf-tab {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--cf-indigo); opacity: .55; padding: 4px 0 0; font-family: inherit;
}
.cf-tab .ti { font-size: 22px; }
.cf-tab span { font-size: 10px; font-weight: 500; }
.cf-tab.active { opacity: 1; color: var(--cf-blaze); }

/* ---- Mobile search overlay ---- */
.cf-mso {
  position: fixed; inset: 0; background: var(--cf-platinum); z-index: 1300;
  display: none; flex-direction: column;
}
.cf-mso.open { display: flex; }
.cf-mso-top { background: var(--cf-indigo); padding: 12px; display: flex; align-items: center; gap: 8px; }
.cf-mso-input-wrap { flex: 1; position: relative; }
.cf-mso-input-wrap .ti { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: .5; color: var(--cf-indigo); }
.cf-mso-input-wrap input {
  width: 100%; padding: 9px 12px 9px 32px; background: var(--cf-white);
  border: 1px solid var(--cf-indigo); border-radius: 8px; font-size: 16px;
  color: var(--cf-indigo); font-family: inherit; box-sizing: border-box;
}
.cf-mso-cancel { background: none; border: none; color: var(--cf-white); font-size: 13px; cursor: pointer; padding: 6px 4px; font-family: inherit; }
.cf-mso-body { flex: 1; overflow-y: auto; padding: 14px 12px; }
.cf-mso-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; font-weight: 500; margin: 4px 0 8px; color: var(--cf-indigo); }
.cf-mso-saved { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.cf-mso-result {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 11px 12px; background: var(--cf-white); border-bottom: 1px solid rgba(46,60,86,.08);
  font-size: 13px; cursor: pointer; color: var(--cf-indigo);
}
.cf-mso-result .pr { font-size: 12px; opacity: .55; flex-shrink: 0; }
.cf-mso-empty { font-size: 12px; opacity: .6; color: var(--cf-indigo); padding: 4px 0; }
.cf-mso-hint {
  margin-top: 18px; font-size: 11px; opacity: .55; line-height: 1.6; color: var(--cf-indigo);
  background: var(--cf-white); border: 1px solid var(--cf-alabaster); border-radius: 8px; padding: 10px 12px;
}

/* ---- Bottom sheets ---- */
.cf-sheet-backdrop { position: fixed; inset: 0; background: rgba(46,60,86,.5); z-index: 1200; display: none; }
.cf-sheet-backdrop.open { display: block; }
.cf-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--cf-white);
  border-radius: 18px 18px 0 0; z-index: 1250; transform: translateY(105%);
  transition: transform .22s ease; max-height: 78%; display: flex; flex-direction: column;
}
.cf-sheet.open { transform: none; }
.cf-sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--cf-alabaster); margin: 10px auto 2px; flex-shrink: 0; }
.cf-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--cf-indigo); flex-shrink: 0; }
.cf-sheet-close { background: none; border: none; cursor: pointer; color: var(--cf-indigo); opacity: .6; padding: 4px; display: flex; }
.cf-sheet-close .ti { font-size: 18px; }
.cf-sheet-body { overflow-y: auto; padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); }
.cf-sheet-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; font-weight: 500; margin: 14px 0 8px; color: var(--cf-indigo); }
.cf-sheet-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 12px 4px; font-size: 14px; color: var(--cf-indigo); text-decoration: none;
  background: none; border: none; border-bottom: 1px solid rgba(46,60,86,.08); cursor: pointer; font-family: inherit;
}
.cf-sheet-item .ti { font-size: 18px; opacity: .65; }
.cf-menu-stats-row { display: flex; gap: 8px; margin: 12px 0 4px; }
.cf-menu-stat-card { flex: 1; background: var(--cf-platinum); border-radius: 8px; padding: 8px 10px; }
.cf-menu-stat-card .k { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .55; color: var(--cf-indigo); }
.cf-menu-stat-card .v { font-size: 13px; font-weight: 600; margin-top: 2px; color: var(--cf-indigo); }
.cf-pill-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-pill {
  font-size: 12px; background: var(--cf-platinum); border: 1px solid transparent;
  border-radius: 6px; padding: 7px 12px; cursor: pointer; color: var(--cf-indigo); font-family: inherit;
}
.cf-pill.on { background: var(--cf-indigo); color: var(--cf-white); }
.cf-seg { display: flex; border: 1px solid var(--cf-alabaster); border-radius: 8px; overflow: hidden; width: max-content; }
.cf-seg button { font-size: 12px; padding: 7px 16px; background: var(--cf-white); border: none; cursor: pointer; color: var(--cf-indigo); font-family: inherit; }
.cf-seg button.on { background: var(--cf-indigo); color: var(--cf-white); }
.cf-sheet-note { font-size: 11px; opacity: .55; line-height: 1.5; margin-top: 10px; color: var(--cf-indigo); }
.cf-sheet-apply {
  width: 100%; margin-top: 18px; background: var(--cf-indigo); color: var(--cf-white);
  border: none; border-radius: 8px; padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit;
}

/* ---- Mobile Browse row list ---- */
.cf-fchip {
  flex-shrink: 0; font-size: 11px; background: var(--cf-white); border: 1px solid var(--cf-alabaster);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; color: var(--cf-indigo); font-family: inherit;
}
.cf-browse-sortbar { display: none; align-items: center; gap: 8px; padding: 6px 12px; }
.cf-browse-count { margin-left: auto; font-size: 11px; opacity: .65; color: var(--cf-indigo); }
.cf-browse-colhead {
  display: none; align-items: center; gap: 8px; padding: 4px 12px 6px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em; opacity: .55; color: var(--cf-indigo);
}
.cf-browse-colhead .c-name { flex: 1; padding-left: 24px; }
.cf-browse-colhead .c-col { width: 74px; text-align: right; flex-shrink: 0; }
#mobile-browse-list { display: none; flex: 1; overflow-y: auto; min-height: 0; }
.cf-brow {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 56px;
  background: var(--cf-white); border-bottom: 1px solid rgba(46,60,86,.08); cursor: pointer;
}
.cf-brow:active { background: var(--cf-platinum); }
.cf-brow-star { width: 18px; flex-shrink: 0; font-size: 15px; color: rgba(46,60,86,.25); text-align: center; }
.cf-brow-star.on { color: var(--cf-ochre); }
.cf-brow-main { flex: 1; min-width: 0; }
.cf-brow-name { font-size: 13px; color: var(--cf-indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-brow-tags { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.cf-brow-cat { font-size: 10px; background: var(--cf-platinum); border-radius: 3px; padding: 1px 6px; opacity: .75; color: var(--cf-indigo); }
.cf-brow-flag { font-size: 10px; }
.cf-brow-col { width: 74px; text-align: right; flex-shrink: 0; }
.cf-brow-col .v { font-size: 12.5px; color: var(--cf-indigo); }
.cf-brow-col .v.margin-high { color: var(--cf-green); font-weight: 500; }
.cf-brow-col .v.margin-mid { color: var(--cf-ochre); }
.cf-brow-col .v.margin-low { opacity: .7; }
.cf-browse-end { padding: 18px; text-align: center; font-size: 11px; opacity: .5; color: var(--cf-indigo); }

/* ---- The breakpoint ---- */
@media (max-width: 767px) {
  .cf-mobile-only { display: block; }
  button.cf-mobile-only { display: flex; }

  /* Icon rail dissolved into the tab bar; resize handles are meaningless
     on touch (their job moves to the Sort & columns sheet). */
  .cf-rail, .cf-resize-v, .cf-resize-h,
  .cf-watchlist-col-resize-handle, .col-resize-handle { display: none !important; }

  /* Topbar: logo + mobile search icon only */
  .cf-search-wrap, #save-settings-btn, #tb-hamburger { display: none; }

  .cf-tabbar { display: flex; }
  .cf-shell { padding-bottom: 58px; }

  .cf-news-list { grid-template-columns: 1fr; }

  /* Screens: exactly one of product / browse / watchlist visible at a time,
     driven by a body class the tab bar sets. Product (the .cf-left pane) is
     the default. */
  body.m-watchlist .cf-left { display: none; }
  .cf-right { display: none; }
  body.m-watchlist .cf-right { display: flex !important; width: 100% !important; flex: 1; }
  body.m-watchlist .cf-watchlist { flex: 1 !important; }

  /* Browse = the screener overlay, shown as a tab instead of a dismissable
     overlay: no title bar/close button, and it stops above the tab bar. */
  body.m-browse .cf-screener-overlay { display: flex; bottom: 58px; }
  .cf-screener-topbar { display: none; }

  /* Screener content: table swaps for the row list */
  #table-wrap { display: none; }
  .cf-browse-sortbar { display: flex; }
  .cf-browse-colhead { display: flex; }
  #mobile-browse-list { display: block; }

  /* Filterbar: wrap into rows, hide the sort selects (the Sort & columns
     sheet owns sorting on mobile) and desktop-only labels */
  #filterbar { flex-wrap: wrap; padding: 8px 10px; gap: 6px; }
  #filterbar .fb-search { width: 100%; flex: 1 1 100%; font-size: 16px; }
  #filterbar .fb-label, #filterbar .fb-sep, #filterbar .fb-spacer,
  #filterbar #sort-select, #filterbar #order-select, #filterbar .fb-count { display: none; }

  /* Buy-It lives inside the product page on mobile (relocated by JS) —
     restyle from "bordered side pane" to "inline section" */
  .cf-product-panel .cf-buyit { border-left: none; background: none; flex: none; }
  .cf-product-panel .cf-buyit-header { padding: 10px 0 8px; border-bottom: none; }
  .cf-product-panel .cf-buyit-body { padding: 0; overflow: visible; }

  /* Guide/product content breathing room above the tab bar */
  .cf-product-panel, .cf-guide-panel { padding-bottom: 24px; }
}