/* ===================================================================
   FOX PERIODICAL — brand palette override + signature components
   Loaded AFTER @vite app.css so these win the cascade (no rebuild).
   =================================================================== */
:root{
  --color-bg:#FAFAF8; --color-surface:#F1EFEA; --color-card:#FFFFFF;
  --color-edge:#E5E1D8; --color-ink:#0D1B2A; --color-muted:#5C6470;
  --color-brand:#E25E2A; --color-brand-deep:#B8431D; --color-brand-soft:#FDE8DC;
  --color-accent:#0D1B2A; --color-accent-deep:#08121E; --color-accent-soft:#E8DFC8;
  --color-up:#16A34A; --color-down:#DC2626; --color-highlight:#F59E0B;
  /* fox semantic + asset-class coding */
  --color-navy:#0D1B2A; --color-cream:#E8DFC8;
  --color-eye-red:#D63E3E; --color-eye-green:#16A34A;
  --color-crypto:#E25E2A; --color-stocks:#16A34A; --color-etf:#2D7A8A;
  --color-markets:#6B5BCC; --color-analysis:#B8431D; --color-learn:#0E7490;
  --color-amber:#F59E0B;
}
[data-theme="dark"]{
  --color-bg:#0B1018; --color-surface:#141B26; --color-card:#1A222F;
  --color-edge:#2A313D; --color-ink:#F1ECE0; --color-muted:#8A95A8;
  --color-brand-soft:#2A140A; --color-accent-soft:#1A2230; --color-cream:#1A2230;
}
::selection{background:rgba(226,94,42,.22)}

/* ===== Both Eyes View — the signature bear/bull component ===== */
.fox-eyes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-edge);border:1px solid var(--color-edge);border-radius:16px;overflow:hidden;margin:1.6rem 0;box-shadow:var(--shadow-card)}
.fox-eyes__side{background:var(--color-card);padding:1.15rem 1.25rem}
.fox-eyes__side--red{background:linear-gradient(180deg,rgba(214,62,62,.07),var(--color-card) 62%)}
.fox-eyes__side--green{background:linear-gradient(180deg,rgba(22,163,74,.07),var(--color-card) 62%)}
.fox-eyes__head{display:flex;align-items:center;gap:.55rem;font-weight:800;font-family:var(--font-display,inherit);margin:0 0 .7rem;font-size:1.05rem;letter-spacing:-.01em}
.fox-eyes__eye{width:20px;height:20px;border-radius:50%;flex:none;position:relative;box-shadow:0 0 0 3px rgba(13,27,42,.06)}
.fox-eyes__eye::after{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(11,16,24,.82)}
.fox-eyes__side--red .fox-eyes__eye{background:var(--color-eye-red)}
.fox-eyes__side--green .fox-eyes__eye{background:var(--color-eye-green)}
.fox-eyes__side--red .fox-eyes__head{color:#b32d2d}
.fox-eyes__side--green .fox-eyes__head{color:#0f7a38}
.fox-eyes ul{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.45rem;list-style:disc}
.fox-eyes li{font-size:.94rem;line-height:1.55;color:var(--color-ink)}
.fox-eyes__cap{grid-column:1/-1;background:var(--color-surface);text-align:center;font-size:.78rem;color:var(--color-muted);padding:.55rem .75rem;border-top:1px solid var(--color-edge)}
[data-theme="dark"] .fox-eyes__side--red .fox-eyes__head{color:#f08a8a}
[data-theme="dark"] .fox-eyes__side--green .fox-eyes__head{color:#5bd98a}
@media(max-width:560px){.fox-eyes{grid-template-columns:1fr}}

/* ===== asset-class category badges ===== */
.fox-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.22rem .6rem;border-radius:999px;line-height:1}
.fox-badge--crypto{background:rgba(226,94,42,.12);color:#b8431d}
.fox-badge--stocks{background:rgba(22,163,74,.12);color:#0f7a38}
.fox-badge--etf{background:rgba(45,122,138,.14);color:#216574}
.fox-badge--markets{background:rgba(107,91,204,.14);color:#5346a8}
.fox-badge--analysis{background:rgba(184,67,29,.12);color:#8f3415}
[data-theme="dark"] .fox-badge--crypto{color:#f4a06f}
[data-theme="dark"] .fox-badge--stocks{color:#5bd98a}
[data-theme="dark"] .fox-badge--etf{color:#7cc3d2}
[data-theme="dark"] .fox-badge--markets{color:#a99cf0}

/* ===== ticker pill asset-class colors (homepage triple ticker) ===== */
.fox-tickpill--crypto{--pill:#E25E2A} .fox-tickpill--stock{--pill:#16A34A} .fox-tickpill--etf{--pill:#2D7A8A}

/* ===== ETF page components ===== */
.fox-holdtable{width:100%;border-collapse:collapse;font-size:.92rem}
.fox-holdtable thead th{background:var(--color-surface);text-align:left;font-weight:700;padding:.6rem .85rem;border-bottom:2px solid var(--color-edge);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted)}
.fox-holdtable td{padding:.6rem .85rem;border-bottom:1px solid var(--color-edge);vertical-align:middle}
.fox-holdtable tbody tr:last-child td{border-bottom:0}
.fox-ht__rank{color:var(--color-muted);width:2rem}.fox-ht__name{font-weight:600}
.fox-ht__sym{color:var(--color-muted);font-family:var(--font-mono,monospace);font-size:.85rem}
.fox-ht__w{text-align:right;white-space:nowrap;position:relative;font-weight:700;min-width:92px}
.fox-ht__bar{position:absolute;left:0;bottom:1px;height:3px;width:var(--w);background:var(--color-brand);border-radius:2px;opacity:.45}
.fox-sectors{display:flex;flex-direction:column;gap:.7rem;padding:1.1rem 1.25rem}
.fox-sector{display:grid;grid-template-columns:150px 1fr 58px;align-items:center;gap:.7rem}
.fox-sector__name{font-size:.86rem;font-weight:600}
.fox-sector__track{height:9px;background:var(--color-surface);border-radius:5px;overflow:hidden}
.fox-sector__fill{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,var(--color-brand),var(--color-brand-deep));border-radius:5px}
.fox-sector__val{text-align:right;font-size:.85rem;font-weight:700;color:var(--color-muted)}
@media(max-width:560px){.fox-sector{grid-template-columns:108px 1fr 46px}.fox-sector__name{font-size:.78rem}}
.fox-etfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.8rem}
.fox-etfcard{border:1px solid var(--color-edge);border-radius:12px;padding:.9rem 1rem;background:var(--color-card);display:flex;flex-direction:column;gap:.2rem;transition:border-color .15s,transform .15s}
.fox-etfcard:hover{border-color:var(--color-brand);transform:translateY(-2px)}
.fox-etfcard__sym{font-weight:800;font-family:var(--font-display,inherit)}
.fox-etfcard__name{font-size:.76rem;color:var(--color-muted);line-height:1.3;min-height:2em;overflow:hidden}
.fox-etfcard__meta{display:flex;justify-content:space-between;align-items:center;margin-top:.3rem;font-size:.8rem}
.fox-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.fox-catcard{border:1px solid var(--color-edge);border-radius:12px;padding:.95rem 1.05rem;background:var(--color-card);display:block;transition:border-color .15s,transform .15s}
.fox-catcard:hover{border-color:var(--color-etf);transform:translateY(-2px)}
.fox-catcard b{display:block;font-family:var(--font-display,inherit);font-size:1.02rem}
.fox-catcard span{font-size:.78rem;color:var(--color-muted)}
.fox-etftable-wrap{overflow-x:auto;border:1px solid var(--color-edge);border-radius:12px}
.fox-etftable{width:100%;border-collapse:collapse;font-size:.9rem;min-width:680px}
.fox-etftable thead th{position:sticky;top:0;background:var(--color-surface);text-align:right;padding:.55rem .7rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-muted);border-bottom:2px solid var(--color-edge)}
.fox-etftable thead th:nth-child(-n+2){text-align:left}
.fox-etftable td{padding:.55rem .7rem;border-bottom:1px solid var(--color-edge);text-align:right;white-space:nowrap}
.fox-etftable td:nth-child(-n+2){text-align:left}
.fox-etftable tbody tr:hover{background:var(--color-surface)}.fox-etftable a{font-weight:700}