/* Brand skin for the original calculators (px-em, rqrwd, bse64).
   Loaded AFTER each tool's own main.css. The markup and behaviour are left
   exactly as they were; this only pulls the palette, typography and rhythm onto
   the site's design system. lolcolors is excluded — its white canvas is the
   product. See site/BRAND.md. */
:root{--blue:#1565c0;--blue-deep:#0f4e97;--orange:#fb8c00;--orange-deep:#ef6c00;--indigo:#1a237e;
 --ink-950:#0b1026;--ink:#16203a;--line:#e3e8f0;--paper:#fff;
 --shell:1180px;--gutter:clamp(18px,4vw,28px)}
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-latin-wght.woff2') format('woff2-variations');
 font-weight:300 700;font-style:normal;font-display:swap}

html{background:var(--ink-950)}
body{background:
  repeating-linear-gradient(-55deg,rgba(255,255,255,.025) 0 1px,transparent 1px 56px),
  linear-gradient(150deg,var(--ink-950) 30%,#101c45 75%,#14245c 100%);
 background-attachment:fixed;color:#fff;
 font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
 font-size:16px;line-height:1.65}
h1,h2,h3,h4{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(1.9rem,4vw,2.6rem)}
::selection{background:var(--orange);color:#2b1600}
::-moz-selection{background:var(--orange);color:#2b1600}

/* the tools' own white header bar is redundant under the site header */
body>header,.container>header{display:none}

/* one shared measure so the tool body lines up with the hero above it,
   plus room to breathe before the footer */
.container{max-width:var(--shell);width:100%;margin:0 auto;padding:0 var(--gutter) 88px}
.intro{text-align:left;width:auto;max-width:62ch;margin:0 0 30px;color:#c6d2e4}
.intro p{color:#c6d2e4;margin:0}

a{color:#8fbdf2;font-weight:500}
a:hover{color:#fff;text-decoration:underline;font-weight:500}

/* form: a calm panel rather than centred full-bleed inputs */
.form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;
 padding:26px 28px;max-width:520px;margin:0 0 22px}
label{display:block;text-align:left;margin:0 0 6px;font-family:'Space Grotesk',system-ui,sans-serif;
 font-weight:600;font-size:.9rem;color:#fff}
.form label+label{margin-top:18px}
input[type=text],input[type=number],select,textarea{
 display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;
 border-radius:8px;padding:11px 13px;font:inherit;max-width:100%;width:100%;margin:0 0 18px}
input[type=text]::placeholder,input[type=number]::placeholder{color:#7e8aa0}
input[type=text]:focus,input[type=number]:focus,textarea:focus,select:focus{
 border:1px solid var(--orange);outline:2px solid rgba(251,140,0,.3);outline-offset:1px}
input[type=submit],button:not(.btn):not(.wdr-chrome__toggle){
 background:var(--orange);color:#2b1600;border:0;border-radius:8px;padding:.62em 1.35em;
 font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;cursor:pointer}
input[type=submit]:hover,button:not(.btn):not(.wdr-chrome__toggle):hover{background:var(--orange-deep);color:#fff}

/* the answer: a compact card, not a slab */
.result{background:var(--orange);color:#2b1600;border-radius:12px;padding:20px 24px;
 max-width:520px;width:auto;margin:0 0 8px;display:flex;align-items:baseline;gap:14px;
 box-shadow:0 18px 40px rgba(11,16,38,.35)}
.result .total{display:inline;margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;
 font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;text-align:left;opacity:.75}
.result .add{display:inline;margin:0;font-size:2rem;line-height:1.1;font-weight:700;
 font-family:'Space Grotesk',system-ui,sans-serif;text-align:left}

/* bse64's drop zone + output */
form[name=myForm]{max-width:520px;margin:0 0 22px;border:2px dashed rgba(255,255,255,.26);
 border-radius:12px;background:rgba(255,255,255,.035);transition:border-color .15s,background .15s}
form[name=myForm]:hover,form[name=myForm]:focus-within{border-color:var(--orange);background:rgba(251,140,0,.07)}
form[name=myForm] p{color:#c6d2e4;margin:0}
.image-area{background:rgba(255,255,255,.06);border-radius:12px;padding:14px;max-width:520px}
#bse64-output{max-width:760px}
#bse64-output h2{font-size:1.05rem;margin:26px 0 8px}
#bse64-output textarea{min-height:110px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}

/* the tools' bespoke footers are replaced by the real site footer */
.container>footer,body>footer:not(.wdr-foot){display:none}

/* heading injected by export/scripts/tool_chrome.py, replacing the image-only
   wordmark that lived in the tool's old white header bar */
.wdr-hero{padding:46px 0 4px}
.wdr-hero__in{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter)}
.wdr-hero h1{margin:0 0 .3em;color:#fff}
.wdr-hero__eyebrow{font-family:'Space Grotesk',system-ui,sans-serif;text-transform:uppercase;
 letter-spacing:.14em;font-weight:600;font-size:.76rem;color:var(--orange);margin:0 0 12px}
.wdr-hero__sub{color:#c6d2e4;max-width:60ch;margin:0 0 26px}