/* Optixwise shared styles: brand tokens, page frame (top bar, footer), cards and base type.
   Every page links this file; tool-specific styles stay in the page itself. */
:root{
  --logo-amber:#e8791a; --logo-ink:#1a1f26; --bl1:#2b3038; --bl2:#3b424c; --bl3:#4d5561; --bl4:#626b78; --bl5:#7a8492;
  --bg:#eef0f3; --surface:#ffffff; --sunken:#f6f7f9; --ink:#1a1f26; --muted:#626b78; --line:#e1e5ea;
  --accent:#e8791a; --accent-ink:#b35c00; --accent-soft:#fdf1e3; --zone:#e8791a2e; --warn:#c0392b;
  --shadow:0 1px 2px #1a1f260d, 0 8px 24px #1a1f260f;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --logo-amber:#f59e2e; --logo-ink:#f2f4f7; --bl1:#e9ecf0; --bl2:#c9cfd6; --bl3:#a9b1bb; --bl4:#8a939f; --bl5:#6c7581;
  --bg:#111418; --surface:#1a1f25; --sunken:#14181d; --ink:#e9ecf0; --muted:#a9b1bb; --line:#2b323b;
  --accent:#f59e2e; --accent-ink:#f7b25c; --accent-soft:#36281566; --zone:#f59e2e2a; --warn:#f07a6a;
  --shadow:0 1px 2px #0006, 0 8px 24px #0004; color-scheme:dark}}
:root[data-theme="dark"]{
  --logo-amber:#f59e2e; --logo-ink:#f2f4f7; --bl1:#e9ecf0; --bl2:#c9cfd6; --bl3:#a9b1bb; --bl4:#8a939f; --bl5:#6c7581;
  --bg:#111418; --surface:#1a1f25; --sunken:#14181d; --ink:#e9ecf0; --muted:#a9b1bb; --line:#2b323b;
  --accent:#f59e2e; --accent-ink:#f7b25c; --accent-soft:#36281566; --zone:#f59e2e2a; --warn:#f07a6a;
  --shadow:0 1px 2px #0006, 0 8px 24px #0004; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:24px 40px}
.wrap{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
a{color:var(--accent-ink)}
h1{margin:0;font-size:clamp(1.5rem,3.2vw,2rem);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Top bar: logo (light/dark files) on the left, site links on the right */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:4px}
.brand{display:block;width:max-content;border-radius:6px}
.brand img{display:block;height:34px;width:auto}
.brand .dk{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .lt{display:none}:root:not([data-theme="light"]) .brand .dk{display:block}}
:root[data-theme="dark"] .brand .lt{display:none}:root[data-theme="dark"] .brand .dk{display:block}
.brand:focus-visible{outline-offset:4px}
.nav{display:flex;gap:4px}
.nav a{font-size:.9rem;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px}
.nav a:hover{color:var(--ink);background:var(--sunken)}
.nav a[aria-current="page"]{color:var(--ink)}

/* Breadcrumb above a tool's title */
.crumbs{font-size:.84rem;color:var(--muted);margin:0 0 6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

.foot{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:.84rem;color:var(--muted)}
.foot a{color:var(--muted)}

/* Tool pages: title row, setup/result card, form controls, result stats, diagram card and formulas */
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}

.seg{display:inline-flex;padding:3px;gap:2px;background:var(--sunken);border:1px solid var(--line);border-radius:10px}
.seg button{font:600 .85rem var(--sans);border:0;background:transparent;color:var(--muted);padding:7px 14px;border-radius:7px;cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #1a1f2622}

.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.setup{padding:24px;display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line)}
.result{padding:24px;display:flex;flex-direction:column;gap:20px;background:linear-gradient(180deg,var(--accent-soft),transparent 70%);border-radius:0 16px 16px 0}
@media (max-width:780px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .setup{border-right:0;border-bottom:1px solid var(--line)}
  .result{border-radius:0 0 16px 16px}
}

.group{display:flex;flex-direction:column;gap:10px}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:.88rem;background:var(--surface);transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--muted)}
.chip:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.chip input[type=radio]{-webkit-appearance:none;appearance:none;margin:0;flex:none;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--bl5);background:var(--surface);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.chip input[type=radio]:checked{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2.5px var(--surface)}
.chip small{color:var(--muted);font-family:var(--mono);font-size:.78rem}
.chip .unit{font-size:.84rem;color:var(--muted)}

.ghost{font:600 .8rem var(--sans);color:var(--accent-ink);background:transparent;border:1px solid var(--line);border-radius:7px;padding:5px 10px;cursor:pointer}
.ghost:hover{border-color:var(--accent)}

.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:420px){.fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>span{font-size:.8rem;font-weight:500;color:var(--muted)}
.box{display:flex;align-items:center;background:var(--sunken);border:1px solid var(--line);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--zone)}
.box{overflow:hidden}
.box input{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;padding:10px 0 10px 12px}
.box i{font-style:normal;font-family:var(--mono);font-size:.8rem;color:var(--muted);padding-right:12px}
.box i.pre{padding:0 0 0 12px}
.box i.pre+input{padding-left:2px}
.box input:last-child{padding-right:12px}

input[type=number]{font:500 1rem var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--sunken);border:1px solid var(--line);border-radius:7px;-moz-appearance:textfield;appearance:textfield}
.box input[type=number]{border:0;border-radius:0;font-size:1.05rem}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.big{display:flex;flex-direction:column;gap:4px;min-width:0}
.big b{font:600 clamp(1.9rem,4.6vw,2.6rem)/1.05 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--accent-ink);overflow-wrap:anywhere}
.big b small,.stat b small{font-size:.5em;font-weight:500;color:var(--muted);margin-left:.25em;letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stat{background:var(--surface);padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat b{font:600 1.15rem var(--sans);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:480px){.stats{grid-template-columns:minmax(0,1fr)}.stat{flex-direction:row;justify-content:space-between;align-items:baseline}}
.msg{margin:0;font-size:.9rem;color:var(--muted);max-width:60ch}
.msg.warn{color:var(--warn)}

.diagram{padding:18px 20px 12px}
.diagram svg{display:block;width:100%;height:auto;overflow:visible}
.diagram text{font:12px var(--mono);fill:var(--muted)}

details{font-size:.85rem;color:var(--muted);line-height:1.7}
summary{cursor:pointer;font-weight:600;width:max-content;max-width:100%}
details p{margin:8px 0 0;max-width:72ch}
details code{font-family:var(--mono);font-size:.8rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.box select{flex:1;min-width:0;width:100%;border:0;background:transparent;outline:none;font:500 .95rem var(--sans);color:var(--ink);padding:10px 30px 10px 12px;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.box select option{color:#1a1f26}

/* "More tools" links at the bottom of each tool page */
.related{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.related-grid a{padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink);box-shadow:none;transition:border-color .15s,transform .15s}
.related-grid a:hover{border-color:var(--accent);transform:translateY(-1px)}
.related-grid b{font-size:.95rem}
.related-grid b::after{content:" →";color:var(--accent-ink)}
.related-grid span{font-size:.84rem;color:var(--muted)}

/* Learn articles and glossary: readable prose column, figures, callouts and tables */
.article{max-width:46rem;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.article .meta{font-size:.84rem;color:var(--muted);margin:0}
.article .dek{font-size:1.1rem;color:var(--muted);margin:0;text-wrap:pretty}
.prose{font-size:1.02rem;line-height:1.7;color:var(--ink)}
.prose h2{font-size:1.3rem;letter-spacing:-.01em;margin:1.8em 0 .4em;line-height:1.25}
.prose h3{font-size:1.05rem;margin:1.4em 0 .3em}
.prose p,.prose ul,.prose ol{margin:0 0 1em;text-wrap:pretty}
.prose li{margin:.25em 0}
.prose a{color:var(--accent-ink);text-underline-offset:2px}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1px 5px;white-space:nowrap}
.prose strong{font-weight:600}
.prose figure{margin:1.4em 0;padding:16px 18px 12px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.prose figure svg{display:block;width:100%;height:auto}
.prose figure svg text{font:12px var(--mono);fill:var(--muted)}
.prose figcaption{font-size:.84rem;color:var(--muted);margin-top:8px;line-height:1.5}
.prose .tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:1.2em 0;background:var(--surface)}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums;line-height:1.4}
.prose th,.prose td{text-align:left;padding:8px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.prose th{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--sunken)}
.prose td.n{font-family:var(--mono);font-size:.84rem}
.prose tbody tr:last-child td{border-bottom:0}
.tryit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:1.4em 0;padding:14px 18px;border-radius:14px;background:linear-gradient(180deg,var(--accent-soft),var(--surface));border:1px solid var(--zone)}
.tryit p{margin:0;font-size:.95rem}
.tryit a{font-weight:600;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.tryit a:hover{text-decoration:underline}
.readmore{font-size:.9rem;color:var(--muted);margin:4px 0 0}
.readmore a{color:var(--accent-ink);font-weight:600}

.gloss{margin:0}
.gloss dt{font-weight:600;font-size:1.02rem;margin-top:1.2em;scroll-margin-top:16px}
.gloss dd{margin:.2em 0 0;color:var(--ink)}
.gloss dt:target{color:var(--accent-ink)}
.learn-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.learn-grid a{padding:18px;gap:6px}
.learn-grid b{font-size:1.02rem;line-height:1.3}
.related-grid a .eyebrow{color:var(--accent-ink)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}