/*


 */

/* ---- Customer app — unified design language (Inter/Space Mono, blue = enclosures + buttons) ----
   Dark by default: the audience (devs/analysts) mostly works in dark mode, and this now shares
   the same palette as the marketing pages (landing/blog) rather than a separate light system.
   Soft tokens throughout — never pure white text on the dark bg (eye strain), matching the
   --ink/--muted/--faint discipline already used on the marketing pages. */
:root{
  --blue1:#4169ff; --blue2:#2d9cec; --text:#cdd9e6; --bg:#131e29; --bg-grad:radial-gradient(120% 90% at 50% 0%,#243648 0%,#1b2935 52%,#131e29 100%);
  --enc:rgba(255,255,255,.14); --encStrong:#4169ff; --line2:rgba(255,255,255,.06); --accent:#5aa9f2; --muted:#9bb0c4;
  --card:rgba(255,255,255,.03); --ink:#eef3f8;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg) var(--bg-grad); color:var(--text);
  font:14px/1.55 'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }
code{ font-family:'Space Mono',ui-monospace,monospace; background:var(--line2); padding:1px 5px; border-radius:5px; font-size:12px; color:var(--text); }
.muted{ color:var(--muted); }
.mono{ font-family:'Space Mono',ui-monospace,monospace; }

/* topbar */
.topbar{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:12px 22px; background:transparent; border-bottom:1.5px solid var(--enc); position:sticky; top:0; z-index:10; }
.topbar .brand{ font-weight:500; color:var(--ink); font-size:15px; }
.topbar .brand:hover{ text-decoration:none; }
.topbar .spacer{ flex:1; }
.topbar nav{ display:flex; gap:14px; flex-wrap:wrap; }
.market-nav{ gap:22px; }
.market-nav a{ color:var(--muted); font-weight:500; font-size:14px; }
.market-nav a:hover{ color:var(--ink); text-decoration:none; }
.topbar nav a{ color:var(--muted); font-size:13px; }
.topbar nav a:hover{ color:var(--ink); }

.container{ max-width:1200px; margin:0 auto; padding:24px 22px 64px; }
.container.wide{ max-width:1760px; }
.container.full{ max-width:none; }   /* explore/graph surfaces span the full canvas */
.chart-card.fill{ padding:10px; }
.subnav{ display:flex; gap:2px; margin-bottom:18px; border-bottom:1.5px solid var(--enc); }
.subnav-item{ padding:9px 16px; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1.5px; }
.subnav-item:hover{ color:var(--ink); text-decoration:none; }
.subnav-item.active{ color:var(--ink); border-bottom-color:var(--encStrong); font-weight:500; }
.foot{ text-align:center; color:var(--muted); font-size:12px; padding:18px; }

.page-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; }
h1{ font-size:clamp(1.3rem,2.6vw,1.6rem); font-weight:500; letter-spacing:-.01em; margin:0 0 4px; color:var(--ink); }
.crumb{ font-size:12px; color:var(--muted); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--blue1),var(--blue2)); color:#fff !important;
  border:none; border-radius:9px; padding:9px 16px; font-size:13px; font-weight:500; cursor:pointer; }
.btn:hover{ text-decoration:none; filter:brightness(1.06); }

/* enclosure cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-top:18px; }
.card{ display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--card);
  border:1.5px solid var(--enc); border-radius:14px; color:var(--text); }
.card:hover{ border-color:var(--encStrong); text-decoration:none; }
.card-label{ font-weight:500; color:var(--ink); }
.card-count{ font-size:24px; font-weight:500; color:var(--ink); }
.card-sub{ font-size:12px; color:var(--muted); }
.card-graph{ background:rgba(65,105,255,.10); border-color:var(--encStrong); color:var(--text); }
.card-graph .card-sub{ color:var(--muted); }
.card-image{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:9px; margin-bottom:2px; }

/* authored content — blog + market analysis */
.post{ max-width:720px; }
.post-image{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:14px; margin-bottom:20px; }
.post-body{ font-size:15px; line-height:1.7; }
.post-body p{ margin:0 0 1em; }

.searchbar{ display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.searchbar input[type=search]{ flex:0 1 320px; padding:9px 12px; border:1.5px solid var(--enc); border-radius:9px; font-size:13px; color:var(--text); background:var(--card); }
.searchbar input[type=submit]{ padding:9px 14px; border:1.5px solid var(--enc); background:var(--card); border-radius:9px; cursor:pointer; color:var(--text); font-size:13px; }
.searchbar input[type=submit]:hover{ border-color:var(--encStrong); }

/* tables — enclosure border blue, internal dividers subtle */
.table-wrap{ overflow-x:auto; background:var(--card); border:1.5px solid var(--enc); border-radius:14px; }
table.grid{ border-collapse:collapse; width:100%; font-size:13px; }
table.grid th, table.grid td{ text-align:left; padding:9px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; max-width:340px; overflow:hidden; text-overflow:ellipsis; }
table.grid th{ background:rgba(255,255,255,.04); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:500; position:sticky; top:0; font-family:'Space Mono',monospace; }
table.grid tr:last-child td{ border-bottom:none; }
table.grid tr:hover td{ background:rgba(255,255,255,.025); }
.row-link a{ font-size:12px; }
.empty{ padding:18px; }

table.kv{ border-collapse:collapse; width:100%; background:var(--card); border:1.5px solid var(--enc); border-radius:14px; overflow:hidden; }
table.kv th{ text-align:left; width:230px; vertical-align:top; padding:9px 13px; background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--line2); font-size:12px; color:var(--muted); font-weight:500; font-family:'Space Mono',monospace; }
table.kv td{ padding:9px 13px; border-bottom:1px solid var(--line2); word-break:break-word; }
table.kv tr:last-child th, table.kv tr:last-child td{ border-bottom:none; }
.nil{ color:var(--faint,#6f8499); }
.fk{ font-weight:500; }

/* graph */
.graph-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.graph-toolbar select{ padding:7px 10px; border:1.5px solid var(--enc); border-radius:9px; color:var(--text); background:var(--card); }

/* Graph type-ahead search (narrow/center the graph on a found company) */
.graph-search{ position:relative; }
.graph-search input{ padding:7px 11px; border:1.5px solid var(--enc); border-radius:9px; color:var(--text); background:#fff; font-size:13px; width:210px; }
.graph-search input:focus{ outline:none; border-color:var(--accent); }
.gs-results{ display:none; position:absolute; top:40px; left:0; z-index:30; min-width:230px; max-height:300px; overflow-y:auto; background:#fff; border:1.5px solid var(--enc); border-radius:10px; box-shadow:0 8px 22px rgba(40,45,80,.14); }
.gs-item{ display:block; padding:8px 13px; font-size:13px; color:var(--text); text-decoration:none; }
.gs-item:hover, .gs-item.gs-active{ background:#f3f6ff; }

#dag{ position:relative; height:86vh; min-height:600px; background:#fff; border:1.5px solid var(--enc); border-radius:14px; }
.dag-status{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); }

h2.section{ font-size:14px; font-weight:500; margin:30px 0 12px; color:var(--ink); }
.taglist{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ font-size:12px; padding:3px 10px; background:var(--card); border:1.5px solid var(--enc); border-radius:999px; color:var(--text); }
.tag:hover{ border-color:var(--encStrong); color:var(--ink); text-decoration:none; }

/* ---- left icon rail — dark, logo, blue active ---- */
.app{ display:flex; align-items:stretch; min-height:100vh; }
/* block, not flex-column: a flex column turns .container's `margin:0 auto` into flex
   auto-margins that suppress stretch, collapsing main to its content width. */
.app-main{ flex:1 1 auto; min-width:0; }
.rail{ flex:0 0 200px; width:200px; background:transparent; color:var(--muted); display:flex;
  flex-direction:column; padding:14px 12px 16px; border-right:1.5px solid var(--enc); position:sticky; top:0; height:100vh; overflow-y:auto; }
.rail-logo{ display:flex; align-items:center; height:40px; margin-bottom:14px; padding:0 8px; }
.rail-logo img{ height:28px; width:auto; max-width:100%; }
.rail-logo:hover{ text-decoration:none; }
.rail-item{ display:flex; flex-direction:row; align-items:center; gap:12px; padding:10px 8px;
  color:var(--muted); text-decoration:none; font-size:13px; line-height:1.1; text-align:left; position:relative; border-radius:8px; }
.rail-item svg{ width:20px; height:20px; flex:0 0 auto; }
.rail-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rail-item:hover{ color:var(--ink); background:var(--line2); text-decoration:none; }
.rail-item.active{ color:var(--accent); background:rgba(65,105,255,.12); box-shadow:inset 3px 0 0 var(--encStrong); }
.rail-item.soon{ opacity:.5; }
.rail-item.soon::after{ content:"•"; position:absolute; top:9px; right:8px; color:var(--blue2); font-size:13px; line-height:1; }
.rail-div{ height:1.5px; background:var(--enc); opacity:.5; margin:8px 16px; }

.chart-card{ background:var(--card); border:1.5px solid var(--enc); border-radius:14px; padding:16px; margin-bottom:18px; overflow-x:auto; }
.chart-card h2.section{ margin-top:0; }

.stub{ background:var(--card); border:1.5px solid var(--enc); border-radius:14px; padding:24px; max-width:640px; }
.stub-badge{ display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent); background:rgba(65,105,255,.10); border:1.5px solid var(--enc); border-radius:999px; padding:3px 11px; margin:0 0 10px; }


/* ---- Ask surface ---- */
.ask-surface{ max-width:780px; margin:0 auto; padding:0 0 48px; }
.ask-form{ background:var(--card); border:1.5px solid var(--enc); border-radius:14px; padding:20px; margin:24px 0; }
.ask-input{ width:100%; font:15px/1.6 var(--font,system-ui); color:var(--text); border:none; outline:none;
  resize:vertical; min-height:90px; background:transparent; }
.ask-controls{ display:flex; align-items:center; gap:14px; margin-top:12px; border-top:1.5px solid var(--enc); padding-top:12px; }
.ask-meta{ font-size:12px; }
.ask-response{ background:var(--card); border:1.5px solid var(--enc); border-radius:14px; padding:24px; }
.ask-response-body h1,.ask-response-body h2{ font-size:16px; font-weight:600; margin:20px 0 8px; color:var(--ink); }
.ask-response-body h3{ font-size:14px; font-weight:600; margin:16px 0 6px; color:var(--accent); }
.ask-response-body h4{ font-size:13px; font-weight:500; margin:12px 0 4px; color:var(--ink); }
.ask-response-body p{ margin:0 0 10px; font-size:14px; line-height:1.65; }
.ask-response-body ul{ margin:0 0 10px 18px; }
.ask-response-body li{ font-size:14px; line-height:1.6; margin-bottom:4px; }
.ask-response-body strong{ font-weight:600; color:var(--ink); }
.ask-error{ color:#f0938a; font-size:14px; }
.provenance{ font-size:11px; font-weight:600; letter-spacing:.04em; padding:1px 5px; border-radius:4px; vertical-align:middle; }
.provenance--GRAPH{ background:rgba(61,220,138,.16); color:#7fd992; }
.provenance--READING{ background:rgba(65,105,255,.16); color:#8fb8f5; }
.provenance--COLLECT{ background:rgba(217,119,6,.18); color:#e3ad5e; }
[class*="provenance--PRIOR"]{ background:rgba(124,58,237,.18); color:#c3a3f0; }