/* AI Swimsuit Index — local dashboard. Clean, data-dense, artificialanalysis.ai-inspired. */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --ink:#0f1419; --muted:#667085; --line:#e7e9ee; --line2:#f1f2f5;
  --accent:#FF6719; --accent-2:#ff9a4d; --accent-soft:#FFF1EA; --chip:#eef0f3; --row-hover:#fafbfc;
  --good:#1f7a45; --good-bg:#e7f5ec; --warn:#c24e12; --warn-bg:#ffe9dd; --ctx:#6a5bb0; --ctx-bg:#f0eef6;
  --glow:#ffe7d6; --header-bg:rgba(255,255,255,.82);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px -6px rgba(16,24,40,.10);
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Space Grotesk","Inter",ui-sans-serif,system-ui,sans-serif;
  /* chart chrome (read by dash.js TH() and passed into ECharts) */
  --c-text:#667085; --c-text2:#475067; --c-grid:#f1f2f5; --c-axis:#d9dce1; --c-dotbd:#ffffff;
  --s-disclose:#1a1a1a;   /* trend "Names a deployment (filings)" line + legend swatch (black in light, white in dark) */
  /* logo ladder: dark top (lg1) graying down to an orange base (lg5) — 5 rungs */
  --lg1:#2b3440; --lg2:#697079; --lg3:#9aa1ab; --lg4:#cbcfd5; --lg5:#FF6719;
}
:root[data-theme="dark"]{
  --bg:#0e1117; --panel:#161b22; --ink:#e6e9ef; --muted:#9aa4b2; --line:#283040; --line2:#1d232e;
  --accent:#ff7a38; --accent-2:#ff9a4d; --accent-soft:#2a1c12; --chip:#1e2530; --row-hover:#1b212c;
  --good:#4cc68a; --good-bg:#16301f; --warn:#ff9a5a; --warn-bg:#352011; --ctx:#a99be8; --ctx-bg:#221d33;
  --glow:#2a1206; --header-bg:rgba(15,18,24,.78);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 26px -10px rgba(0,0,0,.65);
  --c-text:#9aa4b2; --c-text2:#aab3c0; --c-grid:#232b37; --c-axis:#3a4250; --c-dotbd:#161b22;
  --s-disclose:#ffffff;
  /* inverted ramp: orange base (lg5), graying up to a visible slate top (lg1) on the dark header — 5 rungs */
  --lg1:#687079; --lg2:#8f97a1; --lg3:#aeb5bd; --lg4:#cdd2d8; --lg5:#ff7a38;
}
*{box-sizing:border-box}
body{margin:0;
  background:radial-gradient(900px 360px at 50% -150px, var(--glow), transparent 70%), var(--bg);
  color:var(--ink); font:14px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

header.top{border-bottom:1px solid var(--line);background:var(--header-bg);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  position:sticky;top:0;z-index:20}
.brandrow{display:flex;align-items:center;gap:13px;padding:15px 0 12px;position:relative}
.theme-btn{margin-left:auto;flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}
.theme-btn:hover{color:var(--accent);border-color:var(--accent)}
.funbtn{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--panel);
  color:var(--accent);font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s}
.funbtn:hover{border-color:var(--accent)}
#funRange{accent-color:var(--accent);height:4px;cursor:pointer}
.seemore{font:inherit;font-size:12.5px;margin-top:10px;padding:6px 13px;border:1px solid var(--line);
  background:var(--panel);color:var(--c-text2);border-radius:8px;cursor:pointer;transition:border-color .15s,color .15s}
.seemore:hover{border-color:var(--accent);color:var(--accent)}
/* Insights: Substack essay cards */
.insight-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin-top:18px}
.insight-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.insight-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.09)}
.insight-thumb{aspect-ratio:16/9;background:var(--line);overflow:hidden}
.insight-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.insight-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.insight-title{margin:0;font-size:15.5px;font-weight:700;line-height:1.32;color:var(--ink)}
.insight-sum{margin:0;font-size:13px;line-height:1.5;color:var(--muted);flex:1}
.insight-link{font-size:12.5px;font-weight:600;color:var(--accent)}
.brand{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit;cursor:pointer}
.logo-mark{flex:none;display:block;width:28px;height:28px}
.logo-mark .lg1{fill:var(--lg1)} .logo-mark .lg2{fill:var(--lg2)} .logo-mark .lg3{fill:var(--lg3)}
.logo-mark .lg4{fill:var(--lg4)} .logo-mark .lg5{fill:var(--lg5)}
.brand .tm{color:var(--accent)}
.tagline{color:var(--muted);font-size:14px}
.disc-chip{margin-left:auto;font-size:11px;color:var(--muted);background:var(--chip);
  border:1px solid var(--line);border-radius:999px;padding:4px 11px;max-width:520px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:10px 16px 9px;font-size:15px;font-weight:600;color:var(--c-text2);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;transition:color .12s ease,border-color .12s ease}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--accent)}

.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 0}
.filters label{font-size:12px;color:var(--muted);margin-right:-4px}
select,input[type=text],input[list]{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel);color:var(--ink);min-width:150px}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.spacer{flex:1}
.count-pill{font-size:12px;color:var(--muted)}

main{padding:8px 0 64px}
.section{display:none} .section.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.intro-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:26px;align-items:start}
.intro-ladder{background:var(--chip);border-radius:10px;padding:14px 16px}
@media(max-width:760px){.intro-grid{grid-template-columns:1fr;gap:16px}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px 20px}
.card h3{margin:0 0 2px;font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em}
.card > h3{position:relative;padding-left:12px}
.card > h3::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3px;border-radius:3px;
  background:linear-gradient(var(--accent),var(--accent-2))}
.card .sub{color:var(--muted);font-size:12.5px;margin:0 0 12px}
.chart{width:100%;height:430px}
.chart.tall{height:520px}

/* tables */
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.03em;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
th.num,td.num{text-align:right}
td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top}
tbody tr:hover{background:var(--row-hover)}
.tk{font-weight:700} .nm{color:var(--ink)} .src{color:var(--muted);font-size:11px}

.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.p-impact{background:var(--good-bg);color:var(--good)} .p-ctx{background:var(--ctx-bg);color:var(--ctx)}
.p-gated{background:var(--ctx-bg);color:var(--ctx)} .p-warn{background:var(--warn-bg);color:var(--warn)}
.p-mute{background:var(--chip);color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{font:inherit;font-size:12px;font-weight:600;padding:5px 11px;border:0;background:var(--panel);color:var(--muted);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button.active{background:var(--accent-soft);color:var(--accent)}
.tier{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;
  font-weight:800;font-size:12px;color:#fff;box-shadow:0 0 0 1px rgba(128,128,128,.22)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.thchip{cursor:pointer}
.thchip.on{outline:2px solid currentColor;outline-offset:1px}

/* company analysis */
.co-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.co-head h2{margin:0;font-size:22px;letter-spacing:-.02em}
.metricrow{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0 4px}
.metric{display:flex;flex-direction:column}
.metric .v{font-size:24px;font-weight:800;letter-spacing:-.02em}
.metric .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.bar{height:7px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:6px;width:150px}
.bar > span{display:block;height:100%;background:var(--accent)}
.empty{color:var(--muted);padding:24px 12px;text-align:center}
.co-loading{display:flex;align-items:center;justify-content:center;gap:11px;color:var(--muted);
  font-size:14px;padding:54px 12px}
.spinner{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* per-chart loading wheel: a spinner centered INSIDE each chart while its data fetches, removed once
   the chart renders (no separate "loading card"). The chart box reserves its height, so the overlay
   sits over an empty plot, not a layout jump. */
.chart{position:relative}
.chart-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--card);border-radius:8px;z-index:3}

footer{border-top:1px solid var(--line);color:var(--muted);font-size:11.5px;padding:16px 0 40px}
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:8px;font-size:12px;color:var(--muted)}

/* company search: a real filter-as-you-type dropdown (native <datalist> is unusable on mobile) */
.co-search{position:relative;flex:1 1 240px;min-width:0;max-width:360px}
.co-search input{width:100%}
.co-results{position:absolute;top:100%;left:0;width:100%;min-width:240px;z-index:60;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;margin-top:4px;max-height:50vh;overflow-y:auto;
  box-shadow:var(--shadow);display:none;-webkit-overflow-scrolling:touch}
.co-results.open{display:block}
.co-opt{padding:11px 12px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-opt:last-child{border-bottom:none}
.co-opt:hover{background:var(--row-hover)}
.co-opt.empty{color:var(--muted);cursor:default}

/* ---- Insight Explorer (AI initiatives) ---- */
.exgroup{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line2)}
.exgroup:first-child{border-top:none;padding-top:2px}
.exlabel{flex:0 0 124px;font-size:12px;color:var(--muted);padding-top:5px;font-weight:700}
.exchips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.exchip{font-size:12.5px;padding:4px 11px;border-radius:999px;background:var(--chip);color:var(--ink);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;user-select:none}
.exchip .c{color:var(--muted);font-size:10.5px;margin-left:4px}
.exchip:hover{border-color:var(--line)}
.exchip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.exchip.on .c{color:var(--accent)}
.exchip.more{background:none;color:var(--muted);text-decoration:underline;padding-left:4px}
.exhead{font-size:14px;color:var(--ink);line-height:1.5;margin-bottom:2px}
.exstat{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px}
.exstat .u{font-size:13px;font-weight:600;color:var(--muted);margin-left:8px}
.exthin{font-size:12px;color:var(--warn);background:var(--warn-bg);border-radius:6px;padding:3px 9px;display:inline-block;margin-left:8px}
.exfnrow{display:flex;align-items:center;gap:9px;margin:4px 0;font-size:12.5px}
.exfnrow .nm{flex:0 0 210px;white-space:nowrap;color:var(--ink)}
.exfnrow .track{flex:1;background:var(--line2);border-radius:5px;height:14px;overflow:hidden}
.exfnrow .track > span{display:block;height:100%;background:#6a5bb0;border-radius:5px}
.exfnrow .n{flex:0 0 34px;text-align:right;color:var(--muted)}
.exdl{font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border:1px solid var(--accent);
  color:var(--accent);background:var(--accent-soft);border-radius:8px;cursor:pointer}
.exdl:hover{background:#ffe6d8}
.expager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.exnav{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.exnav button{font:inherit;font-size:12.5px;padding:5px 11px;border:1px solid var(--line);background:#fff;
  color:var(--ink);border-radius:7px;cursor:pointer}
.exnav button:disabled{opacity:.4;cursor:default}
.exnav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}

/* ---- visual polish (jazz pass) ---- */
#introCard{background:linear-gradient(180deg,#ffffff,#fffaf6);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 36px -14px rgba(255,103,25,.16)}
:root[data-theme="dark"] #introCard{background:linear-gradient(180deg,#181d27,#1d1712)}
:root[data-theme="dark"] .intro-ladder{background:#11161e}
#introCard h2{font-family:var(--font-display)}
/* key numbers + titles in the display face for a touch more character */
.co-head h2,.metric .v,.exstat,.brand{font-family:var(--font-display)}
.metric .v{letter-spacing:-.03em}
.tab{font-family:var(--font-display);font-weight:600}
tbody tr{transition:background .12s}

/* ---- mobile polish ---- */
@media(max-width:640px){
  .wrap{padding:0 12px}
  .brandrow{flex-wrap:wrap;align-items:center;gap:4px 10px;padding:12px 0 10px}
  .brand{font-size:19px}
  .theme-btn{order:2}
  .tagline{order:3;flex-basis:100%;font-size:13px;line-height:1.35}
  .card{padding:14px 13px}
  .tab{padding:8px 12px 7px;font-size:13.5px}
  .co-search{flex:1 1 100%;max-width:none}
  .filters{padding:10px 0}

  /* finding/claim tables: 2-5 cramped columns -> one stacked card per row */
  #coDetail table, #exResult table{display:block}
  #coDetail thead, #exResult thead{display:none}
  #coDetail tbody, #exResult tbody{display:block}
  #coDetail tr, #exResult tr{display:block;border:1px solid var(--line);border-radius:9px;
    padding:9px 11px;margin:0 0 9px;background:var(--panel)}
  #coDetail tr:hover, #exResult tr:hover{background:var(--panel)}
  #coDetail td, #exResult td{display:block;width:auto!important;border:none;padding:3px 0}
  #coDetail td:first-child, #exResult td:first-child{padding-top:0}
  #coDetail td:last-child, #exResult td:last-child{padding-bottom:0}
  #coDetail td.empty{text-align:left;padding:6px 0}

  /* explorer chips: stack the label above its chips so chips get the full width */
  .exgroup{flex-direction:column;gap:5px}
  .exlabel{flex-basis:auto;padding-top:0}
}