/*
Theme Name: FAANG Stock Tracker
Theme URI: https://randybarham.com
Author: Randy Barham
Author URI: https://randybarham.com
Description: Bloomberg-terminal-style FAANG tracker. Live quotes (Yahoo Finance chart API) + live RSS news (Yahoo Finance / Google News), fixed viewport, amber-on-black terminal palette. TAPE DETAIL replaces notes.
Version: 6.3.1
License: GPL v2 or later
Text Domain: bespoke
*/

/* ══════════════════════════════════════════════════════════════
   FAANG STOCK TRACKER 6.1.3 — live terminal
   Palette: black #0a0a0a / amber #ff9f0a–#ffb000 / steel panels
   Up #2ecc71 · Down #ff4d4d. Mono numerals. No brown, ever.
   ══════════════════════════════════════════════════════════════ */
:root {
  --fa-bg: #0a0a0a;
  --fa-panel: #111214;
  --fa-panel-2: #16181c;
  --fa-steel: #1e2126;
  --fa-line: rgba(255, 159, 10, .22);
  --fa-line-soft: rgba(255, 159, 10, .10);
  --fa-amber: #ff9f0a;
  --fa-amber-hi: #ffb000;
  --fa-ink: #e9edf2;
  --fa-dim: #9aa3ad;
  --fa-faint: #5a6470;
  --fa-up: #2ecc71;
  --fa-down: #ff4d4d;
  --fa-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace, "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.fa-body {
  background: var(--fa-bg);
  color: var(--fa-ink);
  font-family: var(--fa-mono);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--fa-amber); outline-offset: -2px; }

/* ── Ticker tape ───────────────────────────── */
.fa-tape {
  height: 30px;
  border-bottom: 1px solid var(--fa-line);
  background: #060606;
  display: flex; align-items: center;
  overflow: hidden; flex: none;
}
.fa-tape-track {
  display: flex; gap: 42px; white-space: nowrap;
  animation: fa-tape 40s linear infinite;
  padding-left: 20px;
  font-size: 12px; letter-spacing: .04em;
}
.fa-tape:hover .fa-tape-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fa-tape-track { animation: none; }
  .fa-clock .dot { animation: none; }
}
@keyframes fa-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fa-tape-item { display: inline-flex; gap: 8px; align-items: baseline; }
.fa-tape-item b { color: var(--fa-amber-hi); font-weight: 600; }
.fa-tape-item .px { color: var(--fa-ink); }
.fa-tape-item .chg { font-size: 11px; }
.fa-tape-item.up .chg { color: var(--fa-up); }
.fa-tape-item.down .chg { color: var(--fa-down); }

/* ── Shell ─────────────────────────────────── */
.fa-shell { height: 100dvh; display: flex; flex-direction: column; }
.fa-masthead {
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 54px; flex: none;
  border-bottom: 1px solid var(--fa-line);
  background: linear-gradient(180deg, #14110a 0%, #0c0a06 100%);
}
.fa-brand { display: flex; align-items: baseline; gap: 10px; flex: none; }
.fa-brand h1 { font-size: 18px; font-weight: 800; letter-spacing: .1em; color: var(--fa-ink); }
.fa-brand h1 em { font-style: normal; color: var(--fa-amber-hi); }
.fa-brand .sub { font-size: 9px; letter-spacing: .28em; color: var(--fa-faint); text-transform: uppercase; }

.fa-nav { display: flex; gap: 2px; margin-left: auto; }
.fa-nav button {
  appearance: none; background: transparent; border: 1px solid transparent;
  color: var(--fa-dim); font-family: var(--fa-mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; padding: 8px 15px;
  cursor: pointer; border-radius: 2px; transition: color .15s, border-color .15s, background .15s;
}
.fa-nav button:hover { color: var(--fa-amber-hi); }
.fa-nav button.active { color: var(--fa-amber-hi); border-color: var(--fa-line); background: rgba(255, 159, 10, .07); }

.fa-status { display: flex; align-items: center; gap: 14px; flex: none; margin-left: 16px; }
.fa-chip {
  font-size: 10px; letter-spacing: .16em; padding: 4px 10px; border-radius: 2px;
  border: 1px solid var(--fa-line-soft);
}
.fa-chip.open { color: var(--fa-up); border-color: rgba(46, 204, 113, .4); background: rgba(46, 204, 113, .08); }
.fa-chip.closed { color: var(--fa-down); border-color: rgba(255, 77, 77, .35); background: rgba(255, 77, 77, .07); }
.fa-clock { font-size: 11px; color: var(--fa-dim); letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.fa-clock .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--fa-up);
  box-shadow: 0 0 6px rgba(46, 204, 113, .8); animation: fa-pulse 2.2s ease-in-out infinite;
}
@keyframes fa-pulse { 50% { opacity: .3; } }
.fa-stamp { font-size: 9px; letter-spacing: .16em; color: var(--fa-faint); text-transform: uppercase; }

/* ── Stage: board main + news side ─────────── */
.fa-stage { flex: 1; min-height: 0; display: flex; }
.fa-panel {
  display: none; flex: 1; min-width: 0;
  overflow-y: auto; padding: 14px 18px 22px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 159, 10, .3) transparent;
}
.fa-panel.active { display: flex; flex-direction: column; }
.fa-panel::-webkit-scrollbar { width: 6px; }
.fa-panel::-webkit-scrollbar-thumb { background: rgba(255, 159, 10, .25); border-radius: 3px; }

.fa-panel-title {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--fa-amber-hi); display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--fa-line-soft); margin-bottom: 10px;
}
.fa-panel-title .rule { flex: 1; height: 1px; background: var(--fa-line-soft); align-self: center; }
.fa-panel-title .meta, .fa-watch-head .meta, .meta {
  font-size: 9px; letter-spacing: .2em; color: var(--fa-faint); text-transform: uppercase;
}

/* ── Board rows — flex-fill so 5 rows + watchlist fill the viewport ── */
.fa-board { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.fa-row {
  display: grid;
  grid-template-columns: 150px 1fr 110px 140px 160px 90px;
  gap: 14px; align-items: center;
  flex: 1;
  padding: 11px 12px;
  border-bottom: 1px solid var(--fa-line-soft);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.fa-row:hover, .fa-row.sel { background: rgba(255, 159, 10, .06); border-left-color: var(--fa-amber); }
.fa-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa-id .sym { font-weight: 700; font-size: 16px; letter-spacing: .06em; color: var(--fa-amber-hi); display: flex; align-items: center; gap: 6px; }
.fa-id .nm { font-size: 10px; color: var(--fa-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-star {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: #3a4148; font-size: 12px; padding: 0 2px; transition: color .15s, transform .15s;
}
.fa-star:hover { color: var(--fa-amber); transform: scale(1.15); }
.fa-star.star-on { color: var(--fa-amber-hi); text-shadow: 0 0 6px rgba(255, 176, 0, .5); }
.fa-last { text-align: right; }
.fa-last .px { font-size: 17px; font-weight: 600; color: var(--fa-ink); font-variant-numeric: tabular-nums; }
.fa-chg { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.fa-chg .d1 { font-weight: 600; }
.fa-chg.up .d1, .fa-chg.up .pc { color: var(--fa-up); }
.fa-chg.down .d1, .fa-chg.down .pc { color: var(--fa-down); }
.fa-range { font-size: 9px; color: var(--fa-faint); }
.fa-range-bar {
  position: relative; height: 4px; border-radius: 2px; margin: 4px 0 3px;
  background: linear-gradient(90deg, rgba(255, 77, 77, .5), rgba(255, 159, 10, .25), rgba(46, 204, 113, .5));
}
.fa-range-bar i {
  position: absolute; top: -2.5px; width: 2px; height: 9px;
  background: var(--fa-amber-hi); border-radius: 1px; box-shadow: 0 0 5px rgba(255, 176, 0, .7);
}
.fa-range .lbls { display: flex; justify-content: space-between; }
.fa-spark svg { display: block; }
.fa-vol { text-align: right; }
.fa-vol-bar { width: 56px; height: 20px; display: inline-flex; align-items: flex-end; justify-content: flex-end; }
.fa-vol-bar i { display: block; width: 8px; background: linear-gradient(180deg, rgba(255, 159, 10, .85), rgba(255, 159, 10, .2)); border-radius: 1px; }
.fa-vol small { display: block; font-size: 9px; color: var(--fa-faint); margin-top: 2px; }

/* ── Watchlist strip — sized by content, capped so pins never crowd the board ── */
.fa-watchlist { margin-top: 14px; border: 1px solid var(--fa-line-soft); border-radius: 3px; background: var(--fa-panel); flex: 0 1 auto; max-height: 26%; min-height: 0; display: flex; flex-direction: column; }
.fa-watch-head {
  padding: 8px 12px 6px; font-size: 10px; letter-spacing: .24em;
  color: var(--fa-amber); border-bottom: 1px solid var(--fa-line-soft);
  display: flex; justify-content: space-between; align-items: baseline;
}
.fa-watch-strip { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; flex: 1; min-height: 0; overflow-y: auto; align-content: flex-start; align-items: center; scrollbar-width: thin; }
.fa-watch-item {
  border: 1px solid var(--fa-line-soft); background: var(--fa-panel-2);
  padding: 6px 10px; border-radius: 2px; font-size: 11px; cursor: pointer;
}
.fa-watch-item b { color: var(--fa-amber-hi); margin-right: 4px; }
.fa-watch-item.up i { color: var(--fa-up); font-style: normal; }
.fa-watch-item.down i { color: var(--fa-down); font-style: normal; }
.fa-watch-empty { font-size: 10px; color: var(--fa-faint); letter-spacing: .06em; }

/* ── News items ────────────────────────────── */
.fa-news-item {
  display: block; padding: 9px 14px; border-bottom: 1px solid rgba(255, 159, 10, .06);
  text-decoration: none; color: var(--fa-ink); position: relative;
  transition: background .12s;
}
.fa-news-item:hover { background: rgba(255, 159, 10, .05); }
.fa-news-hl { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s; }
.fa-news-item:hover .fa-news-hl { background: var(--fa-amber); }
.fa-news-t { display: block; font-size: 12px; line-height: 1.45; color: var(--fa-ink); }
.fa-news-item:hover .fa-news-t { color: var(--fa-amber-hi); }
.fa-news-meta { display: block; font-size: 9px; letter-spacing: .08em; color: var(--fa-faint); margin-top: 3px; text-transform: uppercase; }
.fa-news-meta b { color: var(--fa-amber); }
.fa-news-list .fa-news-item { padding: 11px 14px; }
/* Wide monitors: two columns so the feed fills the panel instead of
   stranding the right half in black. */
@media (min-width: 1181px) {
  .fa-news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; }
}

/* ── Detail (TAPE DETAIL — replaces notes) ─── */
.fa-back {
  appearance: none; background: transparent; border: 1px solid var(--fa-line);
  color: var(--fa-amber); font-family: var(--fa-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; padding: 7px 13px; cursor: pointer; border-radius: 2px; margin-bottom: 12px;
}
.fa-back:hover { color: var(--fa-amber-hi); border-color: var(--fa-amber); }
.fa-detail-head { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
.fa-detail-head .sym { font-size: 32px; font-weight: 800; color: var(--fa-amber-hi); letter-spacing: .04em; }
.fa-detail-head .nm { font-size: 11px; color: var(--fa-dim); letter-spacing: .12em; text-transform: uppercase; }
.fa-detail-head .big { font-size: 28px; font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.fa-chgbig { font-size: 13px; text-align: right; }
.fa-chgbig.up { color: var(--fa-up); } .fa-chgbig.down { color: var(--fa-down); }

.fa-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
#faDetailBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fa-detail-grid > .fa-chart-wrap { display: flex; flex-direction: column; }
.fa-chart-wrap svg { display: block; width: 100%; height: 100%; min-height: 300px; flex: 1; }
.fa-card {
  border: 1px solid var(--fa-line-soft); background: var(--fa-panel);
  border-radius: 3px; padding: 13px 15px;
}
.fa-card h3 { font-size: 10px; font-weight: 500; letter-spacing: .24em; color: var(--fa-dim); text-transform: uppercase; margin-bottom: 11px; }
.fa-stats { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--fa-line-soft); border: 1px solid var(--fa-line-soft); }
.fa-stat { background: var(--fa-panel); padding: 9px 11px; }
.fa-stat b { display: block; font-size: 13px; font-weight: 600; color: var(--fa-ink); font-variant-numeric: tabular-nums; }
.fa-stat span { display: block; font-size: 8px; letter-spacing: .2em; color: var(--fa-faint); text-transform: uppercase; margin-bottom: 4px; }
.fa-sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.fa-detail-news { margin-top: 14px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.fa-detail-news .fa-news-item { padding: 8px 6px; }
.fa-connecting { font-size: 11px; letter-spacing: .1em; color: var(--fa-faint); padding: 10px 0; text-transform: uppercase; }

/* ── Footer strip ──────────────────────────── */
.fa-foot {
  height: 24px; flex: none; border-top: 1px solid var(--fa-line-soft); background: #060606;
  display: flex; align-items: center; gap: 22px; padding: 0 18px;
  font-size: 8px; letter-spacing: .2em; color: var(--fa-faint); text-transform: uppercase;
}
.fa-foot .g { color: var(--fa-amber); }

/* ── Responsive: 480 stacks, news own scroll ─ */
@media (max-width: 1180px) {
  .fa-row { grid-template-columns: 130px 1fr 100px 120px 140px 80px; }
}
@media (max-width: 1080px) {
  .fa-row { grid-template-columns: 118px 1fr 96px 150px; }
  .fa-row .fa-spark, .fa-row .fa-vol { display: none; }
}
@media (max-width: 840px) {
  .fa-detail-grid { grid-template-columns: 1fr; }
  .fa-brand .sub { display: none; }
  .fa-stamp { display: none; }
  .fa-clock { display: none; }
}
@media (max-width: 620px) {
  .fa-masthead { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; }
  .fa-nav { width: 100%; justify-content: space-between; margin-left: 0; order: 3; }
  .fa-nav button { padding: 6px 10px; letter-spacing: .08em; }
  .fa-panel { padding: 10px 8px 20px; }
  .fa-row { grid-template-columns: 96px 1fr 84px; gap: 8px; padding: 10px 6px; }
  .fa-row .fa-range { display: none; }
  .fa-row .fa-spark { display: none; }
  .fa-row .fa-vol { display: none; }
  .fa-id .sym { font-size: 14px; }
  .fa-last .px { font-size: 15px; }
  .fa-chg { font-size: 10px; }
  .fa-detail-head .big { font-size: 22px; }
  .fa-detail-head .sym { font-size: 24px; }
  .fa-tape { height: 26px; }
  .fa-tape-track { font-size: 11px; gap: 26px; }
  .fa-foot { gap: 12px; white-space: nowrap; overflow: hidden; }
  .fa-foot span:nth-child(2) { display: none; }
}
@media (max-width: 480px) {
  /* board stacks; news panel becomes its own scroll region below nav */
  .fa-brand h1 { font-size: 15px; }
  .fa-status { gap: 8px; margin-left: auto; }
  .fa-watch-strip { padding: 8px; }
  .fa-stats { grid-template-columns: 1fr 1fr; }
  .fa-sessions { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── 6.2.0 — chart range tabs ──────────────── */
.fa-rtabs { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.fa-rtab {
  appearance: none; background: transparent; border: 1px solid var(--fa-line-soft);
  color: var(--fa-dim); font-family: var(--fa-mono); font-size: 9px; font-weight: 400;
  letter-spacing: .12em; padding: 2px 8px; cursor: pointer; border-radius: 2px;
  transition: color .15s, border-color .15s, background .15s;
}
.fa-rtab:hover { color: var(--fa-amber-hi); border-color: var(--fa-line); }
.fa-rtab.on { color: var(--fa-amber-hi); border-color: var(--fa-amber); background: rgba(255, 159, 10, .08); }
@media (max-width: 480px) {
  .fa-watchlist { flex: 0 0 auto; }
  .fa-watch-strip { max-height: 34vh; }
}