/* =====================================================================
   IQ Bible API — brand.iqbible.com
   Shared stylesheet for the brand source-of-truth site.
   Tokens are transcribed verbatim from the live product surfaces
   (landing.html / portal.html / docs.css). If the product code and
   this file ever disagree, the product code wins — fix this file.
   ===================================================================== */

*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  /* Core palette — identical across every live surface today (light-mode only) */
  --bg:#f7f6fc;
  --ink:#1a1330;
  --brand:#6d28d9;
  --brand-2:#9333ea;
  --brand-hover:#5b21b6;
  --brand-soft:rgba(109,40,217,.09);
  --line:#eae7f2;
  --muted:#6b6480;
  --muted2:#a09bb3;

  /* Status / accent — used sparingly, outside the core token set */
  --live:#22c55e;
  --tl-red:#ff5f57;
  --tl-amber:#febc2e;
  --tl-green:#28c840;

  /* Surfaces */
  --surface:#ffffff;
  --surface-tint:#faf7ff;

  --radius-pill:999px;
  --radius-panel:22px;
  --radius-card:18px;
  --radius-control:12px;

  --shadow-soft:0 4px 14px rgba(26,19,48,.05);
  --shadow-panel:0 24px 60px rgba(26,19,48,.14);
  --shadow-glow:0 10px 24px rgba(109,40,217,.30);

  --maxw:1180px;
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{ text-decoration:none; color:var(--brand); }
a:hover{ color:var(--brand-hover); }
::selection{ background:rgba(109,40,217,.18); }
img{ max-width:100%; display:block; }
code,kbd,samp{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.top-in{
  max-width:var(--maxw); margin:0 auto; padding:0 26px;
  height:68px; display:flex; align-items:center; gap:14px;
}
.brand-lockup{ display:flex; align-items:center; gap:11px; color:var(--ink); }
.brand-lockup:hover{ color:var(--ink); }
.brand-lockup .mark{ width:30px; height:30px; }
.wordmark{
  display:flex; align-items:baseline; gap:2px;
  font-size:16px; font-weight:900; letter-spacing:-.02em;
}
.wordmark .iq{ color:var(--brand); }
.ver{
  font-size:11px; font-weight:800; color:var(--brand);
  background:var(--brand-soft); padding:4px 9px;
  border-radius:var(--radius-pill); letter-spacing:.02em;
}
.top nav{ margin-left:auto; display:flex; align-items:center; gap:2px; flex-wrap:wrap; }
.top nav a{
  font-size:13px; font-weight:700; color:#3d3552;
  padding:9px 13px; border-radius:10px;
}
.top nav a:hover{ background:#f4f0fd; color:var(--brand); }
.top nav a.active{ background:var(--brand-soft); color:var(--brand); }

/* ---------- layout ---------- */
.shell{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }
.layout{
  display:grid; grid-template-columns:210px 1fr; gap:48px;
  padding:44px 0 90px;
}
.sidenav{ position:sticky; top:92px; align-self:start; font-size:13px; }
.sidenav .grp{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted2); margin:18px 0 8px; }
.sidenav .grp:first-child{ margin-top:0; }
.sidenav a{
  display:block; padding:6px 10px; border-radius:8px;
  color:var(--muted); font-weight:600;
}
.sidenav a:hover{ background:#f4f0fd; color:var(--brand); }
.sidenav a.active{ background:var(--brand-soft); color:var(--brand); }

main{ min-width:0; }

/* ---------- hero / page intro ---------- */
.page-intro{ padding:52px 0 30px; }
.eyebrow{
  font-size:12px; font-weight:800; color:var(--brand);
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px;
}
h1{
  font-size:clamp(32px,4.4vw,48px); line-height:1.08;
  font-weight:900; letter-spacing:-.03em; text-wrap:pretty;
}
.lede{ margin-top:18px; font-size:17px; line-height:1.65; color:#524b63; max-width:640px; }

/* ---------- sections ---------- */
section.block{ scroll-margin-top:92px; padding:40px 0; border-top:1px solid var(--line); }
section.block:first-of-type{ border-top:none; }
h2{ font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:-.02em; }
h3{ font-size:16px; font-weight:800; margin:26px 0 10px; }
h4{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--muted2); margin:22px 0 8px; }
p{ margin:12px 0; color:#42394f; font-size:15px; }
.block > p:first-of-type{ color:var(--muted); font-size:15.5px; max-width:660px; }
ul,ol{ margin:12px 0 12px 22px; }
li{ margin:7px 0; font-size:14.5px; color:#42394f; }
strong{ font-weight:700; color:var(--ink); }
hr{ border:none; border-top:1px solid var(--line); margin:34px 0; }

/* ---------- cards / panels ---------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:22px;
  box-shadow:var(--shadow-soft);
}
.grid{ display:grid; gap:18px; }
.grid.c2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.c3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.c4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.note{
  background:var(--surface-tint); border:1px solid #ece5f9;
  border-left:3px solid var(--brand); border-radius:0 12px 12px 0;
  padding:13px 16px; margin:18px 0; font-size:14px; color:#4b4360;
}
.note strong{ color:var(--brand); }

/* ---------- color swatches ---------- */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-top:8px; }
.swatch{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.swatch .chip{ height:88px; display:flex; align-items:flex-end; padding:10px; }
.swatch .meta{ padding:11px 13px; }
.swatch .tok{ font-family:ui-monospace,Menlo,monospace; font-size:12px; font-weight:700; }
.swatch .hex{ font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--muted); margin-top:2px; }
.swatch .role{ font-size:11.5px; color:var(--muted2); margin-top:6px; line-height:1.45; }
.chip.on-dark span{ color:#fff; font-size:11px; font-weight:700; font-family:ui-monospace,Menlo,monospace; }
.chip.on-light span{ color:var(--ink); font-size:11px; font-weight:700; font-family:ui-monospace,Menlo,monospace; }

/* ---------- type specimen ---------- */
.spec{ border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--surface); margin:10px 0; }
.spec .label{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted2); margin-bottom:10px; }
.w900{ font-weight:900; } .w800{ font-weight:800; } .w700{ font-weight:700; }
.w600{ font-weight:600; } .w500{ font-weight:500; } .w400{ font-weight:400; }

/* ---------- icon spec ---------- */
.icon-badge{
  width:40px; height:40px; border-radius:12px; background:var(--brand-soft);
  display:flex; align-items:center; justify-content:center; color:var(--brand);
  flex:none;
}
.icon-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; }

/* ---------- do / don't ---------- */
.dd{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:10px; }
.dd .col{ border:1px solid var(--line); border-radius:14px; padding:16px 18px; background:var(--surface); }
.dd .col h4{ margin-top:0; display:flex; align-items:center; gap:7px; }
.dd .do h4{ color:#15803d; }
.dd .dont h4{ color:#b91c1c; }
.dd li{ font-size:13.5px; }

/* ---------- code ---------- */
pre{
  background:var(--ink); color:#e6def7; border-radius:14px;
  padding:16px 18px; overflow-x:auto; font-size:12.8px; line-height:1.75;
  margin:12px 0;
}
pre .k{ color:#f5b884; } pre .s{ color:#9dd6a8; } pre .c{ color:#a99bd6; } pre .m{ color:#6b6480; }
p code, li code, td code{
  background:var(--brand-soft); color:var(--brand);
  padding:1px 6px; border-radius:6px; font-size:12.5px; font-weight:600;
}

/* ---------- tables ---------- */
table{
  border-collapse:separate; border-spacing:0; width:100%;
  margin:16px 0; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; font-size:13.5px;
}
th,td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
th{
  background:#f6f2fd; font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}

/* ---------- download / asset tiles ---------- */
.assets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-top:8px; }
.asset{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-soft); }
.asset .prev{ display:flex; align-items:center; justify-content:center; padding:22px; min-height:130px; }
.asset .prev.dark{ background:var(--ink); }
.asset .prev.light{ background:var(--bg); }
.asset .prev.check{ background:
  linear-gradient(45deg,#eee 25%,transparent 25%),
  linear-gradient(-45deg,#eee 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,#eee 75%),
  linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0px; background-color:#fff;
}
.asset .info{ padding:13px 15px; border-top:1px solid var(--line); }
.asset .info .nm{ font-size:13px; font-weight:800; }
.asset .info .dt{ font-size:11.5px; color:var(--muted); margin-top:3px; font-family:ui-monospace,Menlo,monospace; }
.asset .info a{ font-size:12.5px; font-weight:800; display:inline-block; margin-top:9px; }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:800; color:#fff; background:var(--brand);
  padding:13px 22px; border-radius:13px; box-shadow:var(--shadow-glow);
}
.btn:hover{ background:var(--brand-hover); color:#fff; }
.btn.ghost{ background:var(--surface); color:#3d3552; border:1.5px solid #e3ddf3; box-shadow:none; }
.btn.ghost:hover{ border-color:var(--brand); color:var(--brand); }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); background:var(--surface); }
.foot-in{
  max-width:var(--maxw); margin:0 auto; padding:34px 26px 46px;
  display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between;
}
.foot-in .tag{ font-size:13px; font-weight:800; color:var(--brand); }
.foot-in .fine{ font-size:12px; color:var(--muted2); }

/* ---------- misc ---------- */
.pill{
  display:inline-block; font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:var(--radius-pill);
  background:var(--brand-soft); color:var(--brand); letter-spacing:.02em;
}
.wm-demo{
  display:inline-flex; align-items:baseline; gap:1px;
  font-weight:900; letter-spacing:-.02em; font-size:30px;
}
.wm-demo .iq{ color:var(--brand); }

/* ---------- directory ---------- */
.tbl-scroll{ overflow-x:auto; margin:16px 0; -webkit-overflow-scrolling:touch; }
.tbl-scroll table{ margin:0; min-width:640px; }
.pill.off{ background:#f0eef5; color:var(--muted); }
.pill.wip{ background:#fff4e5; color:#b9770e; }
td .pill{ white-space:nowrap; }
td .u{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:12.5px; font-weight:600; word-break:break-all; }
.dir-when{ font-size:12.5px; color:var(--muted2); margin-top:14px; }

@media (max-width:900px){
  .layout{ grid-template-columns:1fr; gap:0; }
  .sidenav{ position:static; margin-bottom:20px; display:flex; flex-wrap:wrap; gap:6px; }
  .sidenav .grp{ width:100%; margin:10px 0 4px; }
  .grid.c2,.grid.c3,.grid.c4{ grid-template-columns:1fr; }
  .dd{ grid-template-columns:1fr; }
  .top nav a:not(.home-x){ display:none; }
}