/* Real Number Lab: shared header, footer and content pages.
   Tool pages load this file too, so every rule here is scoped to rn- classes (no bare element selectors
   beyond body) to avoid restyling a calculator. Tokens match the calculators' own. */
:root{
  --bg:#F1F4F1; --surface:#FFFFFF; --ink:#15201A; --muted:#5A675F; --line:#D8DFD9;
  --accent:#0C6B46; --accent-ink:#FFFFFF; --accent-soft:#DCEFE4; --warn:#B04A22; --keep:#3556A3; --band:#E5ECE6;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1411; --surface:#161F1A; --ink:#E6EEE8; --muted:#91A198; --line:#283630;
  --accent:#4CC38A; --accent-ink:#06150D; --accent-soft:#173426; --warn:#F28C61; --keep:#8AA7EE; --band:#1B2822; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0E1411; --surface:#161F1A; --ink:#E6EEE8; --muted:#91A198; --line:#283630;
  --accent:#4CC38A; --accent-ink:#06150D; --accent-soft:#173426; --warn:#F28C61; --keep:#8AA7EE; --band:#1B2822; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);
  padding-block:0 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.rn-skip{position:absolute;left:-999px;top:8px;background:var(--surface);color:var(--ink);padding:8px 12px;border-radius:4px;z-index:10}
.rn-skip:focus{left:16px}
.rn-top :focus-visible,.rn-page :focus-visible,.rn-foot :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- header ---------- */
.rn-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;
  max-width:1120px;margin:0 auto 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.rn-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.rn-logo svg{display:block;width:32px;height:32px;flex:none}
.rn-mark-tile{fill:var(--accent)}.rn-mark-bar{fill:var(--accent-ink)}.rn-mark-dot{fill:var(--accent-ink);opacity:.6}
.rn-word{font:700 23px/1 var(--display);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.rn-word b{color:var(--accent);font-weight:700}
.rn-nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.rn-nav::-webkit-scrollbar{display:none}
.rn-nav a{font:500 14px/1 var(--body);color:var(--ink);text-decoration:none;padding:12px 10px;border-radius:4px;white-space:nowrap}
.rn-nav a:hover{background:var(--band)}
.rn-nav a[aria-current]{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);border-radius:4px 4px 0 0}
@media (max-width:760px){.rn-top{padding-bottom:0}.rn-nav{width:calc(100% + 20px);margin:0 -10px}}

/* ---------- footer ---------- */
.rn-foot{max-width:1120px;margin:56px auto 0;padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:24px;font-size:13px;color:var(--muted)}
.rn-foot svg{display:block;width:26px;height:26px}
.rn-foot .rn-logo{min-height:0}.rn-foot .rn-word{font-size:19px}
.rn-foot p{margin:8px 0 0;max-width:36ch}
.rn-fh{font:600 12px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:4px 0 10px}
.rn-foot ul{list-style:none;margin:0;padding:0}
.rn-foot li{margin-bottom:6px}
.rn-foot a{color:var(--ink);text-decoration:none}.rn-foot a:hover{text-decoration:underline}
.rn-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:16px}
@media (max-width:760px){.rn-foot{grid-template-columns:1fr 1fr}.rn-foot>:first-child{grid-column:1/-1}}

/* ---------- content pages ---------- */
.rn-page{max-width:1120px;margin:0 auto}
.rn-page a{color:var(--accent)}
.rn-eyebrow{font:600 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.rn-h1{font:700 clamp(40px,6.4vw,66px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 16px;text-wrap:balance}
.rn-h1.sm{font-size:clamp(34px,5vw,48px)}
.rn-h2{font:700 30px/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 6px}
.rn-lede{font-size:18px;color:var(--muted);max-width:56ch;margin:0 0 24px;text-wrap:pretty}
.rn-sec{margin-top:56px}
.rn-sechead{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:8px 24px;margin-bottom:18px}
.rn-sechead p{margin:0;color:var(--muted);max-width:60ch}
.rn-crumbs{font-size:13px;color:var(--muted);margin:0 0 14px}
.rn-crumbs a{color:var(--muted)}
.rn-btns{display:flex;flex-wrap:wrap;gap:10px}
.rn-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:4px;font:600 15px var(--body);text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.rn-page a.rn-btn{color:var(--ink)}
.rn-page a.rn-btn.primary,.rn-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rn-btn:hover{filter:brightness(1.06)}

/* hero */
.rn-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding:24px 0 8px}
@media (max-width:860px){.rn-hero{grid-template-columns:minmax(0,1fr);gap:28px}}
.rn-receipt{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px 22px;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(10,40,25,.45)}
.rn-receipt .rn-eyebrow{display:flex;justify-content:space-between;gap:12px}
.rn-receipt h3{font:600 22px/1.1 var(--display);margin:0 0 14px}
.rn-receipt dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0;font-variant-numeric:tabular-nums}
.rn-receipt dt,.rn-receipt dd{margin:0;padding:7px 0;border-bottom:1px dashed var(--line)}
.rn-receipt dd{text-align:right}
.rn-receipt .tot{font-weight:600;border-bottom:0;border-top:2px solid var(--ink)}
.rn-verdict{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rn-stamp{font:700 30px/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--keep);border:3px solid currentColor;border-radius:4px;padding:6px 12px;transform:rotate(-3deg)}
.rn-verdict p{margin:0;color:var(--muted);font-size:14px}
.rn-verdict strong{color:var(--ink)}

/* tool cards */
.rn-cat{margin-bottom:32px}
.rn-cathead{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.rn-cathead svg{width:22px;height:22px;flex:none;stroke:var(--accent)}
.rn-cathead h3{font:700 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0}
.rn-cathead a{margin-left:auto;font-size:13px}
.rn-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rn-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;text-decoration:none;min-height:132px;transition:border-color .15s,transform .15s}
.rn-page a.rn-card{color:var(--ink)}
.rn-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.rn-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rn-card-name{font-weight:600;font-size:16px;line-height:1.25}
.rn-card-sum{color:var(--muted);font-size:14px}
.rn-card-go{margin-top:auto;padding-top:6px;color:var(--accent);font-weight:600;font-size:14px}
.rn-card.live{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.rn-card.soon,.rn-card.planned{background:transparent;border-style:dashed}
.rn-badge{flex:none;font:600 11px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;padding:5px 7px;border-radius:3px;white-space:nowrap}
.rn-badge.live{background:var(--accent);color:var(--accent-ink)}
.rn-badge.soon{background:var(--accent-soft);color:var(--accent)}
.rn-badge.planned{border:1px solid var(--line);color:var(--muted)}

/* principles, guides, prose */
.rn-principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.rn-principles div{border-top:3px solid var(--accent);padding-top:12px}
.rn-principles h3{font:600 17px/1.2 var(--body);margin:0 0 4px}
.rn-principles p{margin:0;color:var(--muted);font-size:14px}
.rn-guides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.rn-guides li{border:1px dashed var(--line);border-radius:6px;padding:14px 16px}
.rn-guides .rn-eyebrow{font-size:11px;margin-bottom:6px}
.rn-guides strong{display:block;font-weight:600;line-height:1.3;margin-bottom:4px}
.rn-guides span{color:var(--muted);font-size:14px}
.rn-prose{max-width:68ch}
.rn-prose h2{font:700 24px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:36px 0 8px}
.rn-prose p,.rn-prose li{color:var(--ink)}
.rn-prose ul{padding-left:20px}
.rn-panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px}
.rn-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.rn-cols{grid-template-columns:minmax(0,1fr)}}
.rn-checks{list-style:none;padding:0;margin:0}
.rn-checks li{position:relative;padding:6px 0 6px 26px;border-bottom:1px solid var(--line)}
.rn-checks li:last-child{border-bottom:0}
.rn-checks li::before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}