/* LevelOwn -- shared design tokens and primitives.
   One system across the landing page, both builders and the check.

   Token NAMES are unchanged from the previous system on purpose: the four
   pages carry a lot of their own CSS, and remapping values here retunes all
   of it at once instead of touching every rule. */
:root{
  --paper:#F3F5F9; --surface:#FFFFFF; --raise:#EAEEF5;
  --ink:#0B0D12; --muted:#4A5366; --faint:#6B7488;
  --line:#D5DAE4; --line-soft:#E3E7EE;

  /* hex first, oklch second: the design is authored in oklch, and browsers
     that do not parse it keep the approximation rather than nothing */
  --accent:#0072C3;
  --accent:oklch(50% 0.19 229);
  --accent-soft:#E4EDF8; --accent-ink:#005699;

  /* the design paints alerts in the accent; errors still need to read as
     errors, so a real red stays separate from it */
  --signal:#B3261E; --signal-soft:#FBEAE8;
  --good:#2F6B3A;

  --shadow:0 12px 32px rgba(11,13,18,.14);
  --r:2px;
  --pad:32px;
  --max:1280px;
}
/* Single-theme by intent -- the design commits to one light surface, so every
   colour below is painted explicitly rather than inherited from the host. */
*{box-sizing:border-box}
/* an author display: rule outranks the UA sheet's [hidden], so panes that
   set their own display kept rendering while marked hidden */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.55 Manrope,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:Manrope,Helvetica,Arial,sans-serif;
  text-wrap:pretty;margin:0;letter-spacing:-.03em;font-weight:600}
a{color:var(--ink);text-underline-offset:3px}
a:hover{color:var(--accent)}
code,pre,.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{max-width:720px;margin:0 auto}

/* ---- header ---------------------------------------------------------- */
header.site{background:var(--paper)}
header.site .inner{display:flex;justify-content:space-between;align-items:center;
  padding:22px var(--pad);border-bottom:2px solid var(--line);gap:24px;flex-wrap:wrap}
.mark{font-weight:800;letter-spacing:-.03em;font-size:18px;text-transform:uppercase;
  text-decoration:none;color:var(--ink)}
header.site nav{display:flex;gap:28px;font-size:14px;flex-wrap:wrap}
header.site nav a{text-decoration:none;color:var(--ink);padding-bottom:2px;
  border-bottom:1px solid transparent}
header.site nav a:hover{color:var(--accent)}
header.site nav a[aria-current]{border-bottom-color:var(--ink)}

/* ---- footer ---------------------------------------------------------- */
/* width:100% and max-width:none so a page's own `footer{...}` rule cannot
   squeeze the site footer to a text measure */
footer.site{border-top:2px solid var(--line);margin-top:auto;
  width:100%;max-width:none;padding-top:0;font-size:13px}
footer.site .inner{padding:24px var(--pad);display:flex;flex-direction:column;gap:8px;
  font-size:13px;color:var(--faint);line-height:1.5}
footer.site .split{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.site .stamp{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px}

/* ---- type helpers ---------------------------------------------------- */
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;
  letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
.lede-copy{color:var(--muted);line-height:1.5;text-wrap:pretty}

/* ---- controls -------------------------------------------------------- */
input,select,textarea,button{font-family:inherit;font-size:14px;color:var(--ink)}
input[type=text],input[type=email],input[type=url],select,textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 9px;outline:none}
input[type=text]:focus,input[type=email]:focus,input[type=url]:focus,
select:focus,textarea:focus{border-color:var(--ink)}
input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
input[type=range]{accent-color:var(--ink)}
input[type=checkbox]{accent-color:var(--ink)}
button{cursor:pointer}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:14px;cursor:pointer;font-weight:500;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:9px 15px;border-radius:var(--r);text-decoration:none;
  transition:border-color .13s,background .13s,color .13s}
.btn:hover{border-color:var(--ink)}
.btn--go{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--go:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--ghost{border-color:var(--ink);background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- surfaces -------------------------------------------------------- */
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.out-area{background:var(--ink);color:#E6EAF2;border-color:var(--ink);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;line-height:1.5;
  width:100%;resize:vertical}

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

/* ---- touch targets ---------------------------------------------------
   A finger is about 9mm across; a 24px-tall link is under half that. Only
   where there is no hover, so a mouse keeps the tighter chrome it was drawn
   with. Padding, never a bigger font: the type stays exactly as designed. */
@media (hover:none){
  header.site nav{gap:10px 24px}
  header.site nav a{padding:9px 0}
  .mark{display:inline-block;padding:6px 0}
  footer.site a{display:inline-block;padding:9px 0}
  footer.site .split{gap:6px 24px}
}