/* AlphaScreen v17.5.0 — theme.css
   Sitewide unification layer. Loaded LAST on every page so it wins ties with
   per-page inline styles. Scope: cards, panels, charts, tables, inputs get one
   consistent "piano finish" — do NOT add page-specific rules here. */

:root{
  --as-bg:#0a0a14; --as-panel:#12121f; --as-card:rgba(255,255,255,.04);
  --as-line:rgba(255,255,255,.09); --as-cyan:#00e5ff; --as-purple:#a29bfe;
  --as-green:#4ade80; --as-orange:#ff9f0a; --as-red:#ff5252;
  --as-text:#e4e4ef; --as-text2:#8888a8;
  --as-radius:14px; --as-radius-sm:9px;
  --as-shadow:0 8px 28px rgba(0,0,0,.35);
}

/* Typography + iOS behavior */
body{
  /* Aurora refresh (v17.10.0): prefer Outfit when the page loads it — most
     pages reference Outfit on elements but this !important body rule was
     forcing the system stack, giving two typefaces on one page. Pages without
     the webfont fall back to the system stack unchanged. */
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif !important;
  -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(0,229,255,.25)}

/* One card language: any element that calls itself a card/panel/tile */
[class*="card"],[class*="panel"],[class*="tile"],[class*="-box"]{
  border-radius:var(--as-radius) !important;
}
[class*="card"]{
  transition:transform .15s ease, box-shadow .15s ease;
}
@media(hover:hover){
  [class*="card"]:hover{transform:translateY(-2px);box-shadow:var(--as-shadow)}
}

/* Buttons + inputs: consistent pill/rounded controls, 44px iOS touch target */
button,.btn,[class*="btn-"]{border-radius:var(--as-radius-sm) !important;min-height:38px}
input,select,textarea{border-radius:var(--as-radius-sm) !important;font-family:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible{
  outline:2px solid rgba(0,229,255,.55) !important;outline-offset:1px;
}

/* Charts: never overflow their container (iOS pan-behind bug class) */
canvas{max-width:100% !important;border-radius:var(--as-radius-sm)}
svg{max-width:100%}

/* Tables: one grid style */
table{border-collapse:collapse}
th{color:var(--as-text2);font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em}
td,th{border-bottom:1px solid var(--as-line)}
tr:last-child td{border-bottom:none}

/* Scrollbars (WebKit) — slim, unobtrusive */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* iOS momentum scrolling + safe-area padding at page bottom */
body{-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom)}

/* Master-banner gear states (E, 2026-07-13): amber SELECTIVE DEPLOY + yellow
   IMPROVING slot between green DEPLOY and red HALT. Defined sitewide here so all
   pages pick them up; HALT/deploy/reduce/hold stay inline per-page unchanged. */
.master-state-selective{background:linear-gradient(145deg,rgba(255,159,10,.15),rgba(255,159,10,.05));border-color:rgba(255,159,10,.35);color:#ff9f0a}
.master-state-improving{background:linear-gradient(145deg,rgba(251,192,45,.15),rgba(251,192,45,.05));border-color:rgba(251,192,45,.35);color:#fbc02d}

/* MARKETS dropdown category (2026-07-15). "Markets" became a dropdown when Top
   Movers moved to its own page (movers.html). The other categories' colors are
   inlined per page; this one lives here because theme.css is the sitewide
   unification layer and is linked by all 14 nav pages -- one rule instead of
   fourteen copies to drift. Cyan matches the Markets accent already used on
   pulse.html section headers. */
.nav-dropdown[data-cat="markets"] .dropdown-content { border-top: 2px solid #00e5ff; }
.nav-dropdown[data-cat="markets"] > .nav-link:hover,
.nav-dropdown[data-cat="markets"].active > .nav-link { color: #00e5ff; }

/* ── Shared "parent" card (2026-07-16) ──────────────────────────────────────
   The content cards (pulse-card / sector-card / etf-card / stock-card) each
   duplicated the same glass shell per page. `.alpha-card` is the single source;
   a page adds only what differs (e.g. .pulse-card keeps just its entrance
   animation). theme.css loads AFTER each page's inline <style>, so this base
   authoritatively provides the shell on any element carrying `alpha-card`.
   The hover z-index is the stages tooltip-overlay fix -- backdrop-filter makes
   each card its own stacking context, which trapped hover tooltips behind
   sibling cards -- baked in for ALL cards so it can never recur per page.
   Values below are copied verbatim from the existing .pulse-card so migrating a
   page to `.alpha-card` is visually a no-op. Requires the page to define the
   usual :root tokens (--glass, --glass-b, --border, --radius, --shadow, --accent). */
.alpha-card {
    background: var(--glass);
    backdrop-filter: blur(var(--glass-b));
    -webkit-backdrop-filter: blur(var(--glass-b));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    min-width: 0;
}
.alpha-card:hover,
.alpha-card:focus-within {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    z-index: 20;
    /* Solidify on hover. The base card is translucent (--glass ~72% alpha) with a
       backdrop-filter blur; a `transform` creates a new containing block that
       DROPS the backdrop-filter in most browsers, so the frosted glass collapses
       to plain see-through — the "goes translucent on hover" bug. The lift also
       overlaps the (translucent) card above, stacking the see-through. A near-
       opaque hover background makes the dropped blur invisible either way. */
    background: rgba(18, 18, 40, .98);
}
@media (max-width: 768px) {
    .alpha-card { padding: 1rem; gap: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AURORA GLASS aesthetic layer (v17.10.0, 2026-07-21)
   User-picked direction: Aurora Glass cards + machined slider thumbs +
   Nav Option 1 (anchored, edge-aware dropdowns). AESTHETICS ONLY — no
   behavior changes. theme.css loads LAST on every page, so rules here
   deliberately override per-page inline styles (hence the !importants).
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Frost opacity: every page defines --glass at ~72% alpha, which lets page
   content bleed through cards (the "goes transparent" complaint). Re-declared
   here so ALL pages get near-opaque frost without touching 14 inline blocks. */
:root{
  --glass: rgba(16, 16, 34, .92);
  --glass-b: 14px;
}

/* 2. Gradient hairline ring on the shared parent card. Mask trick renders the
   gradient only as a 1px border ring, keeping backdrop-filter intact. */
.alpha-card{ border-color: rgba(255,255,255,.06); }
.alpha-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:linear-gradient(145deg, rgba(162,155,254,.40), rgba(255,255,255,.05) 40%, rgba(0,229,255,.30));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.alpha-card:hover::before,
.alpha-card:focus-within::before{ opacity:0; } /* hover shows the solid accent border instead */

/* 3. NAV OPTION 1 — anchored dropdown panels.
   Straight-down opening, frosted near-opaque, soft entrance; the right-most
   category (stocks) right-aligns so its panel can never overflow the viewport
   (the "opens to the side" bug). Mobile bottom-sheet rules in each page use
   higher-specificity !important rules and keep winning — sheet unchanged. */
.nav-dropdown .dropdown-content{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  background:rgba(13,13,30,.96) !important;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  padding:6px !important;
  min-width:210px;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) !important;
  animation:as-nav-drop .18s ease both;
}
@keyframes as-nav-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-dropdown[data-cat="stocks"] .dropdown-content{ left:auto !important; right:0 !important; }

/* Category color: was a heavy 2px border-top strip; now a dot per item and an
   underline on the open trigger. Overrides the markets border-top above. */
.nav-dropdown .dropdown-content{ border-top:1px solid rgba(255,255,255,.10) !important; }
.nav-dropdown[data-cat="markets"]{ --as-cat:#00e5ff; }
.nav-dropdown[data-cat="universe"]{ --as-cat:#a29bfe; }
.nav-dropdown[data-cat="sectors"]{ --as-cat:#4ade80; }
.nav-dropdown[data-cat="stocks"]{ --as-cat:#ff9f0a; }
.dropdown-item{
  display:flex !important; align-items:center; gap:10px;
  border-radius:9px !important; padding:10px 12px !important;
}
.dropdown-item::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--as-cat, #8888a8); flex:none;
}
.nav-dropdown > .nav-link{ position:relative; }
.nav-dropdown.active > .nav-link::after{
  content:''; position:absolute; left:10px; right:10px; bottom:-3px; height:2px;
  border-radius:2px; background:var(--as-cat, #8888a8);
}
@media(hover:hover){
  .nav-dropdown:hover > .nav-link::after{
    content:''; position:absolute; left:10px; right:10px; bottom:-3px; height:2px;
    border-radius:2px; background:var(--as-cat, #8888a8);
  }
}

/* 4. Filter chips (.quality-toggle rows on dashboard/lookup/funds_flow):
   Aurora chip — quiet glass at rest, purple-cyan gradient + glowing cyan dot
   when active. Overrides inline per-page styles incl. style="" attributes. */
.quality-toggle, .toggle-btn{
  border-radius:12px !important; min-height:40px;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#b9b9d2 !important;
  transition:all .2s !important;
}
.quality-toggle:hover, .toggle-btn:hover{ border-color:rgba(162,155,254,.5) !important; color:#fff !important; }
.quality-toggle.active, .toggle-btn.active{
  background:linear-gradient(145deg, rgba(108,92,231,.28), rgba(0,229,255,.10)) !important;
  border-color:rgba(162,155,254,.65) !important;
  color:#fff !important;
  box-shadow:0 6px 18px -8px rgba(108,92,231,.6) !important;
}
.quality-dot, .toggle-dot{
  width:6px !important; height:6px !important;
  background:currentColor !important; opacity:.4;
}
.quality-toggle.active .quality-dot, .toggle-btn.active .toggle-dot{
  background:#00e5ff !important; opacity:1;
  box-shadow:0 0 8px rgba(0,229,255,.8) !important;
}

/* 5. Numeric alignment: financial digits line up in columns everywhere.
   Tabular figures give every digit the same width, so RS scores, prices and
   percentages stack into clean columns instead of drifting with the glyphs. */
table, td, th,
[class*="num"], [class*="price"], [class*="pct"], [class*="score"], [class*="rank"]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
/* Numeric table cells read right-aligned; first column (names/tickers) stays left. */
td:not(:first-child)[align="right"], td.num, th.num{ text-align:right; }

/* 6. Sweep fixes (2026-07-21 visual pass):
   a) Native checkboxes/radios (stages.html stage filters etc.) pick up the
      accent instead of stock browser blue.
   b) .flip-badge ran an infinite gold glow whose halo bled over the adjacent
      company/industry text on screener cards — badge stays, halo goes.
   c) Long industry/sector lines wrap inside their column instead of running
      under the badge column. */
input[type="checkbox"], input[type="radio"]{ accent-color:#6c5ce7; }
.flip-badge{ animation:none !important; box-shadow:none !important; }
.meta-info{ overflow-wrap:anywhere; }

/* 7. Sideways lock (2026-07-21 mobile pass): body content wider than the
   viewport makes iOS rubber-band horizontally ("jiggle") even under
   overflow-x:hidden. `clip` forbids page-level horizontal scrolling outright
   (and, unlike hidden, does not create a scroll container, so position:sticky
   keeps working). Wide tables (index compare table, etf_picks holdings) then
   scroll inside their own box instead of dragging the whole page. Inner
   horizontal strips (e.g. the mobile nav swipe row) are unaffected. */
html, body{ overflow-x:clip !important; overscroll-behavior-x:none; }
@media (max-width:768px){
  table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* master-banner: on pages without a universal border-box reset (rotation,
   stock_rotation) width:100% + padding + 2px border overflowed the viewport
   by ~9px at phone width. Border-box everywhere makes it exact. */
.master-banner{ box-sizing:border-box !important; max-width:100%; }
/* Residual mobile overflows found by measurement (body scrollWidth > viewport):
   rotation's quality-toggle row and sprint's stat strip were nowrap flex rows
   wider than the phone; stock_rotation's nav strip overflowed visibly instead
   of scrolling like the other pages' nav. */
@media (max-width:768px){
  .q-toggles, .portfolio-stats{ flex-wrap:wrap !important; }
  /* iOS: -webkit-overflow-scrolling:touch on a scroller traps fixed
     descendants (the bottom sheet). Force it OFF on the nav strip —
     pages still declare it inline; this !important beats them. */
  .nav-links{ overflow-x:auto; -webkit-overflow-scrolling:auto !important; }
  .unified-nav{ -webkit-overflow-scrolling:auto !important; }
}

/* 8. Filter-card composition (2026-07-22): the approved sample groups the
   screener controls inside a titled glass card; the live pages had them as a
   loose full-width strip. dashboard/funds_flow/lookup wrap .dashboard-tools
   in an .alpha-card.filters-card with this shared title style. */
.as-card-title{
  font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  background:linear-gradient(90deg,#a29bfe,#00e5ff);
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:0;
}
.filters-card{ margin:1rem 0 2rem; }
.filters-card .dashboard-tools{ margin:0; }

/* 9. (2026-07-22 REVERT) The mobile bottom sheet (#124) and its two iOS
   hotfixes (#125 scroll-trap removal, #126 body portal) never rendered on
   the owner's iPhone. All sheet CSS is withdrawn; footer.html's original
   inline-row mobile dropdown (proven on device) is restored and, being
   fetch-injected last, owns the mobile cascade exactly as before #124.
   Any future sheet attempt MUST be validated on a real WebKit device
   before merging. */

/* 10. Aurora ambient identity (2026-07-22): the approved sample's diagonal
   wash — purple glow top-right, cyan glow bottom-left — is the visual
   signature of the direction. Pages painted a fainter version into the
   SCROLLING body background, where it stretches across the whole document
   and vanishes from any given viewport. This fixed backdrop keeps the
   diagonal present in every viewport on every page (and is the iOS-safe
   alternative to background-attachment:fixed). Opaque: it supersedes each
   page's flat --bg behind all content. */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(100% 80% at 85% 0%, rgba(108, 92, 231, .24), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0, 229, 255, .13), transparent 50%),
    linear-gradient(180deg, #0a0a18, #07070f);
}

/* 11. Aurora diagonal glass on ALL cards (2026-07-22, v2 after user review:
   the curated-list version missed card variants and was too faint to read
   as the identity). Generic card-family selector — anything that calls
   itself a card gets the visible purple→cyan diagonal — with narrow
   exclusions: title/label/header elements (as-card-title is gradient-
   clipped TEXT and must keep its own background) and the tiny delete
   button. background-image only, so each card's frost color stays;
   !important survives hover-solidify background shorthands. */
[class*="card"]:not(.as-card-title):not(.card-delete):not(.card-header):not(.card-inner-header):not(.sector-card-header):not(.tooltip-card){
  background-image:
    linear-gradient(145deg, rgba(108, 92, 231, .16), rgba(16, 16, 34, 0) 45%, rgba(0, 229, 255, .11)),
    radial-gradient(120% 100% at 100% 0%, rgba(108, 92, 231, .12), transparent 55%) !important;
}

/* 12. Master banner: glassmorphic + Aurora identity (2026-07-22).
   Was a flat state-tinted wash (no blur, no identity). Now: frosted glass
   with the purple/cyan diagonal under every state, and the user's semantic
   brightness map — OPTIMISM (deploy) and DANGER (halt) run BRIGHT (vivid
   border, outer glow, saturated wash); the pessimistic middle gears
   (selective / reduce / hold / improving) run deliberately MUTED. */
.master-banner{
  background-color: rgba(16, 16, 34, .88) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  background-image:
    linear-gradient(145deg, rgba(108, 92, 231, .14), rgba(16, 16, 34, 0) 45%, rgba(0, 229, 255, .10)) !important;
}
/* BRIGHT: optimism */
.master-banner.master-state-deploy{
  border-color: rgba(0, 230, 118, .75) !important;
  color: #00e676 !important;
  box-shadow: 0 0 48px -10px rgba(0, 230, 118, .5) !important;
  background-image:
    linear-gradient(145deg, rgba(108, 92, 231, .12), rgba(16, 16, 34, 0) 45%, rgba(0, 229, 255, .08)),
    radial-gradient(120% 120% at 50% 0%, rgba(0, 230, 118, .16), transparent 60%) !important;
}
/* BRIGHT: danger */
.master-banner.master-state-halt{
  border-color: rgba(255, 82, 82, .8) !important;
  color: #ff5252 !important;
  box-shadow: 0 0 48px -10px rgba(255, 82, 82, .55) !important;
  background-image:
    linear-gradient(145deg, rgba(108, 92, 231, .12), rgba(16, 16, 34, 0) 45%, rgba(0, 229, 255, .08)),
    radial-gradient(120% 120% at 50% 0%, rgba(255, 82, 82, .18), transparent 60%) !important;
}
/* MUTED: pessimism / caution gears */
.master-banner.master-state-selective,
.master-banner.master-state-reduce{
  border-color: rgba(255, 159, 10, .26) !important;
  color: #c9994f !important;
  box-shadow: none !important;
}
.master-banner.master-state-hold,
.master-banner.master-state-improving{
  border-color: rgba(251, 192, 45, .22) !important;
  color: #b3a05c !important;
  box-shadow: none !important;
}

/* 13. COLOR CONSTITUTION (2026-07-22, critic round 1). Purple/cyan =
   identity & interaction. Green/red = market direction only — as tint +
   border, never a saturated solid fill. Amber = master-system status only.
   Metadata is quiet. */
/* Tier-3 metadata badges (INSTITUTIONAL / PRIME FLIP / MUTED / SPECULATIVE):
   were solid colored pills outshouting the ticker — now quiet ghosts. */
.flip-badge{
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:rgba(255,255,255,.75) !important;
}
/* Card dismiss: saturated red disc on every card read as a stack of errors.
   Ghost at rest; danger color appears on hover-intent only. */
.card-delete{
  background:transparent !important;
  border-color:transparent !important;
  color:rgba(255,255,255,.35) !important;
  box-shadow:none !important;
}
.card-delete:hover{
  background:rgba(255,82,82,.15) !important;
  color:#ff5252 !important;
}
/* Barometer tracks: five full-saturation rainbows buried their own knobs —
   discipline the track, let the ringed knob carry the data. */
.baro-track{ filter:saturate(.68); }
/* State checkboxes (rotation/stock_rotation q-labels) -> chip pattern.
   The label sets its state color inline; the chip derives tint/border from
   currentColor so each control speaks ONE color. */
.q-label{
  display:inline-flex; align-items:center; gap:8px;
  min-height:34px; padding:0 14px; border-radius:99px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  cursor:pointer; user-select:none; font-weight:700;
  transition:all .2s;
}
.q-label:has(input:checked){
  border-color:color-mix(in srgb, currentColor 55%, transparent);
  background:color-mix(in srgb, currentColor 13%, transparent);
}
.q-label input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:.35; margin:0;
  border:none !important;
  transition:opacity .2s;
}
.q-label:has(input:checked) input[type="checkbox"]{ opacity:1; }
/* Movers: pin both card footers to a shared bottom edge. */
.mover-card{ display:flex; flex-direction:column; }
.mover-card > a:last-child{ margin-top:auto !important; padding-top:10px; } /* !important: beats the inline margin-top:10px */