/* ─────────────────────────────────────────────────────────────────────────────
   mfc-dir.css — V25.7
   Shared chrome + layout for the generated Stock Directory
   (/screener/stocks/index.html + the 27 per-letter pages).

   WHY THIS FILE EXISTS
   The directory is written by screener/export_static.py on every data refresh —
   28 pages. Inlining the site's token block and nav CSS into each of them would
   duplicate ~4 KB twenty-eight times inside a Python string literal, which is
   both unreviewable and guaranteed to drift from the hand-maintained pages the
   first time the nav changes. One stylesheet, linked from all 28, keeps the
   generator readable and the chrome honest.

   Tokens and nav rules below are copied verbatim from fii-dii/index.html so the
   directory renders identically to the rest of the site. mfc-finish.css supplies
   the html[data-theme="dark"] var-flip site-wide; only the directory-specific
   surfaces need explicit dark overrides here.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --ink:#f0f5ff;--ink2:#ffffff;--ink3:#e4eeff;
  --white:#0c1831;
  --accent:#1a50d8;--accent2:#2563eb;--accent3:#3b82f6;
  --gold:#d97706;--teal:#0891b2;--green:#059669;--red:#dc2626;
  --text:#0c1831;--text2:#1e3a5f;--text3:#475569;
  --border:rgba(37,99,235,0.10);--border2:rgba(37,99,235,0.20);
  --r:16px;--r-sm:10px;--r-lg:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,0.04);
  --green-bg:rgba(5,150,105,0.08);--red-bg:rgba(220,38,38,0.07);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ink);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 900px 600px at 70% -10%,rgba(37,99,235,0.08) 0%,transparent 60%),radial-gradient(ellipse 500px 400px at 5% 25%,rgba(45,212,191,0.05) 0%,transparent 60%),radial-gradient(ellipse 700px 500px at 95% 75%,rgba(45,212,191,0.03) 0%,transparent 60%)}
h1,h2,h3,h4{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',Arial,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}

/* ── NAV (verbatim from the hand-maintained pages) ─────────────────────────── */
nav{position:sticky;top:0;z-index:200;background:rgba(240,245,255,0.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:0.5px solid var(--border2);box-shadow:0 1px 16px rgba(37,99,235,0.05);padding:0 32px}
.nav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;height:64px;gap:26px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{height:44px;width:auto;display:block}
@media(max-width:768px){.logo img{height:36px}}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto}
.nav-links a{font-size:14px;font-weight:400;color:var(--text2);transition:color .2s;white-space:nowrap;display:inline-flex;align-items:center;height:40px;line-height:1;position:relative}
.nav-links a:hover{color:var(--white)}
.nav-links a.active{color:var(--white)}
.nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),#2dd4bf);transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.nav-links a:not(.nav-cta).active::after,.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-links a.nav-cta{color:#fff}
.nav-links a.nav-cta:hover{color:#fff}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;z-index:300}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:all .3s}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-cta{background:linear-gradient(135deg,#1a50d8 0%,#2563eb 46%,#0891b2 100%);background-size:170% 170%;color:#fff;font-size:14px;font-weight:600;padding:10px 22px;border-radius:var(--r-sm);transition:transform .25s cubic-bezier(.22,.8,.2,1),box-shadow .25s cubic-bezier(.22,.8,.2,1),background-position .55s cubic-bezier(.22,.8,.2,1);white-space:nowrap;box-shadow:0 6px 16px -8px rgba(26,80,216,.55)}
.nav-cta:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 10px 22px -8px rgba(26,80,216,.7),0 0 0 4px rgba(45,212,191,.10)}
@media(max-width:1024px){
  nav{padding:0 16px}
  .nav-inner{gap:12px;height:56px}
  .nav-hamburger{display:flex}
  .nav-links{display:none;position:fixed;top:56px;left:0;right:0;margin-left:0;background:rgba(240,245,255,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:0.5px solid var(--border2);flex-direction:column;align-items:stretch;padding:18px 22px 26px;gap:2px;z-index:250;box-shadow:0 8px 32px rgba(26,80,216,0.10)}
  .nav-links.open{display:flex}
  .nav-links a{font-size:16px;padding:12px 2px;width:100%;height:auto;border-bottom:0.5px solid var(--border);white-space:nowrap;text-align:left}
  .nav-links a:hover,.nav-links a.active{background:none}
  .nav-links a:not(.nav-cta)::after{display:none}
  .nav-links a.nav-cta{margin-top:14px;text-align:center;padding:15px 28px;font-size:15px;border-bottom:none;border-radius:var(--r-sm)}
}

/* ── DIRECTORY LAYOUT ──────────────────────────────────────────────────────── */
.dir-wrap{max-width:1180px;margin:0 auto;padding:0 24px 64px;position:relative;z-index:1}
@media(max-width:600px){.dir-wrap{padding:0 16px 48px}}

.dir-crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text3);padding:20px 0 4px;flex-wrap:wrap}
.dir-crumb a{color:var(--accent2);font-weight:500}
.dir-crumb a:hover{text-decoration:underline}

.dir-head{padding:10px 0 26px;border-bottom:0.5px solid var(--border2);margin-bottom:26px}
.dir-head h1{font-size:36px;margin-bottom:10px}
@media(max-width:600px){.dir-head h1{font-size:27px}}
.dir-lede{font-size:15px;color:var(--text2);max-width:70ch;line-height:1.65}
.dir-lede a{color:var(--accent2);font-weight:500}
.dir-lede a:hover{text-decoration:underline}
.dir-count{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent2);background:rgba(37,99,235,.08);border:1px solid var(--border2);border-radius:999px;padding:5px 12px}

/* A–Z rail */
.dir-az{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:30px}
.dir-az a,.dir-az span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border-radius:var(--r-sm);font-size:14px;font-weight:700;border:1px solid var(--border2);background:var(--ink2);color:var(--accent2);transition:transform .18s cubic-bezier(.22,.8,.2,1),box-shadow .18s,border-color .18s}
.dir-az a:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.45);box-shadow:0 8px 18px -10px rgba(26,80,216,.45)}
.dir-az a.here{background:linear-gradient(135deg,#1a50d8,#2563eb 46%,#0891b2);color:#fff;border-color:transparent}
.dir-az span{opacity:.38;color:var(--text3)}
@media(prefers-reduced-motion:reduce){.dir-az a{transition:none}.dir-az a:hover{transform:none}}

/* Company list */
.dir-sec{margin-bottom:34px}
.dir-sec h2{font-size:20px;margin-bottom:14px;display:flex;align-items:baseline;gap:10px}
.dir-sec h2 .n{font-size:12px;font-weight:600;color:var(--text3);letter-spacing:0}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:10px}
.dir-item{display:block;background:var(--ink2);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;transition:transform .18s cubic-bezier(.22,.8,.2,1),box-shadow .18s,border-color .18s}
.dir-item:hover{transform:translateY(-2px);border-color:rgba(37,99,235,.34);box-shadow:0 10px 22px -14px rgba(26,80,216,.5)}
.dir-item .nm{font-size:14px;font-weight:600;color:var(--text);line-height:1.35;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One line, never two: the ticker and the market cap are the load-bearing values,
   so they never shrink — the sector truncates instead. Wrapping here made card
   heights ragged and orphaned the market cap onto its own line. */
.dir-item .mt{font-size:11.5px;color:var(--text3);margin-top:3px;display:flex;gap:7px;flex-wrap:nowrap;align-items:center;min-width:0}
.dir-item .sym{font-weight:700;color:var(--accent2);letter-spacing:.02em;flex:0 0 auto}
.dir-item .mc{flex:0 0 auto}
.dir-item .sec{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dir-item .dot{opacity:.4;flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.dir-item{transition:none}.dir-item:hover{transform:none}}

/* Hub cards */
.dir-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 34px}
.dir-card{background:var(--ink2);border:1px solid var(--border);border-radius:var(--r);padding:18px 18px 16px;transition:transform .2s cubic-bezier(.22,.8,.2,1),box-shadow .2s,border-color .2s}
.dir-card:hover{transform:translateY(-3px);border-color:rgba(37,99,235,.34);box-shadow:0 14px 30px -18px rgba(26,80,216,.5)}
.dir-card h3{font-size:15px;margin-bottom:6px}
.dir-card p{font-size:13px;color:var(--text3);line-height:1.55}
@media(prefers-reduced-motion:reduce){.dir-card{transition:none}.dir-card:hover{transform:none}}

.dir-foot{max-width:1180px;margin:26px auto 0;padding:18px 24px 8px;border-top:0.5px solid var(--border2);font-size:12px;line-height:1.65;color:var(--text3);text-align:center;position:relative;z-index:1}
.dir-foot a{color:inherit;text-decoration:underline}

/* ── DARK (mfc-finish.css flips the tokens; these surfaces need explicit help) ─ */
html[data-theme="dark"] nav{background:rgba(10,16,32,0.94)}
@media(max-width:1024px){html[data-theme="dark"] .nav-links{background:rgba(10,16,32,0.98)}}
html[data-theme="dark"] .dir-az a,
html[data-theme="dark"] .dir-item,
html[data-theme="dark"] .dir-card{background:rgba(120,160,240,.06);border-color:var(--border2)}
html[data-theme="dark"] .dir-az a.here{background:linear-gradient(135deg,#1a50d8,#2563eb 46%,#0891b2)}
html[data-theme="dark"] .dir-count{background:rgba(120,160,240,.10)}