/* CellChart theme — crisp technical reference: graphite, battery amber, mono codes */
:root{
  --bg:#f7f7f4;
  --fg:#1c1e1f;
  --muted:#66696b;
  --card:#ffffff;
  --border:#e3e2dc;
  --accent:#b45309;      /* battery amber */
  --accent-2:#2563eb;    /* spec blue */
  --accent-ink:#ffffff;
  --ring:#b45309;
  --ok:#1d8a55; --warn:#c98a1e; --bad:#cf4433;
  --font-display:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --radius:14px;--radius-sm:9px;--maxw:1080px;
  --shadow:0 1px 2px rgba(30,30,20,.05),0 16px 34px -22px rgba(80,60,10,.25);
}
body{
  background:
    radial-gradient(860px 460px at 90% -12%, rgba(180,83,9,.09), transparent 62%),
    radial-gradient(700px 400px at -5% 6%, rgba(37,99,235,.05), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
.brand-accent{color:var(--accent)}
h1,h2,h3{font-weight:700;letter-spacing:-.02em}
.eyebrow{color:var(--accent);font-weight:700}
.rule{height:1px;border:0;margin:1.4rem 0;background:linear-gradient(90deg,transparent,var(--border),transparent)}

/* battery code chips — always mono */
.code{font-family:var(--font-mono);font-weight:700}
.chip .code{font-weight:600}
.alias{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.88rem;font-weight:600;
  padding:.3em .7em;border-radius:7px;border:1px solid var(--border);background:var(--card);margin:.15rem}
.alias.hl{background:color-mix(in srgb,var(--accent) 12%,var(--card));border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent)}

/* lookup box */
.lookup{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.3rem 1.4rem;box-shadow:var(--shadow)}
.lookup input[type=search]{width:100%;padding:.75em 1em;font:600 1.1rem var(--font-mono);
  border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg)}
.lookup input[type=search]:focus{outline:none;border-color:var(--accent)}
#lookup-results{margin-top:.9rem}
.lr-item{display:flex;align-items:center;gap:.9rem;padding:.65rem .8rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);margin:.4rem 0;background:var(--bg);text-decoration:none;color:var(--fg)}
.lr-item:hover{border-color:var(--accent)}
.lr-item .code{color:var(--accent);min-width:6.5ch}
.lr-item .meta{font-size:.85rem;color:var(--muted)}
.lr-item .via{margin-left:auto;font-size:.78rem;color:var(--muted);font-family:var(--font-mono)}

/* spec strip */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin:1.2rem 0}
.spec{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.8rem 1rem}
.spec .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.spec .v{font-family:var(--font-mono);font-weight:700;margin-top:.15rem}

/* family badges */
.fam{display:inline-flex;align-items:center;gap:.5ch;font-weight:700;padding:.4em .9em;border-radius:999px;font-size:.85rem;line-height:1;border:1px solid var(--border);background:var(--card)}
.fam.lith{color:#7c3aed}.fam.alk{color:#b45309}.fam.silv{color:#475569}.fam.zinc{color:#0e7490}.fam.rech{color:#16a34a}

/* size-visual bar */
.sizebar{display:flex;align-items:flex-end;gap:2px;height:46px;margin:.6rem 0}
.sizebar .cellviz{background:linear-gradient(180deg,#d7d7d2,#b9b9b2);border:1px solid #a3a39c;border-radius:3px}

/* warning callout */
.callout{background:color-mix(in srgb,var(--accent-2) 6%,var(--card));border:1px solid color-mix(in srgb,var(--accent-2) 22%,transparent);
  border-radius:var(--radius-sm);padding:.9rem 1.1rem;margin:1.1rem 0}
.callout.danger{background:color-mix(in srgb,var(--bad) 7%,var(--card));border-color:color-mix(in srgb,var(--bad) 30%,transparent)}

/* tables */
table.cmp{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:.92rem;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
table.cmp th{background:color-mix(in srgb,var(--accent) 8%,var(--card));text-align:left;font-weight:700}
table.cmp th,table.cmp td{padding:.55em .75em;border-bottom:1px solid var(--border)}
table.cmp tr:last-child td{border-bottom:0}
table.cmp td:first-child{font-family:var(--font-mono);font-weight:600}
.table-scroll{overflow-x:auto}
.sources{font-size:.88rem;color:var(--muted)}
@media(max-width:640px){.lookup{padding:1rem}}

/* cell artwork figures — to-scale SVG diagrams */
.cellfig{margin:1.2rem 0 0;padding:1.1rem 1.2rem .8rem;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:.55rem}
.cellfig svg{max-width:100%;height:auto}
.cellfig figcaption{font-size:.82rem;color:var(--muted);text-align:center}
.cellart .dimtext{font:600 10px var(--font-mono);fill:#2563eb}
.cellart .engrave{font-family:var(--font-mono);font-weight:700;fill:#5c6167;letter-spacing:.02em}
.cellart .figlabel{font:700 12px var(--font-mono);fill:var(--fg)}

/* header search — always-visible lookup on every page */
.hdr-search{position:relative;flex:1 1 auto;min-width:0;max-width:340px;margin-left:.5rem}
.hdr-search input[type=search]{width:100%;padding:.5em .9em;font:600 .92rem var(--font-mono);
  border:2px solid var(--border);border-radius:9px;background:var(--card);color:var(--fg)}
.hdr-search input[type=search]:focus{outline:none;border-color:var(--accent)}
.hdr-results{display:none;position:absolute;top:calc(100% + 8px);right:0;
  width:min(360px,calc(100vw - 32px));max-height:min(420px,70vh);overflow:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:.35rem;z-index:60}
.hdr-results.open{display:block}
.hdr-results .lr-item{margin:.25rem}
@media(max-width:720px){
  .hdr-search{max-width:none;margin-left:0}
  .hdr-search input[type=search]{font-size:.85rem;padding:.45em .7em}
  .hdr-results{position:fixed;top:64px;left:12px;right:12px;width:auto}
}