/* Shared by every page: color tokens (light and dark), type, the header, the footer and long-form text. Generator-only styles live in generator.css. */
:root{
  --paper:#F1F3EE; --card:#FAFBF8; --field:#FFFFFF; --proof:#E6EAE2;
  --ink:#14201A; --ink2:#52625A; --line:#D3D9D0;
  --accent:#1B6B4F; --accent-ink:#FFFFFF; --accent-soft:#DCEADF;
  --ok:#1B6B4F; --ok-soft:#DCEADF;
  --warn:#8A5A00; --warn-soft:#F7EACA;
  --bad:#A8322A; --bad-soft:#F6DCD7;
  --f-display:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --f-body:'Hanken Grotesk','Avenir Next','Segoe UI',system-ui,sans-serif;
  --f-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1411; --card:#151D19; --field:#0E1411; --proof:#1C2621;
    --ink:#E6EEE9; --ink2:#98A89F; --line:#2A362F;
    --accent:#5CC49A; --accent-ink:#06140D; --accent-soft:#1B3A2D;
    --ok:#5CC49A; --ok-soft:#1B3A2D;
    --warn:#E6B450; --warn-soft:#3A2D0E;
    --bad:#F08A7F; --bad-soft:#3F1A16;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1411; --card:#151D19; --field:#0E1411; --proof:#1C2621;
  --ink:#E6EEE9; --ink2:#98A89F; --line:#2A362F;
  --accent:#5CC49A; --accent-ink:#06140D; --accent-soft:#1B3A2D;
  --ok:#5CC49A; --ok-soft:#1B3A2D;
  --warn:#E6B450; --warn-soft:#3A2D0E;
  --bad:#F08A7F; --bad-soft:#3F1A16;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.5 var(--f-body);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:14px 48px;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shell{width:min(1120px,100%);margin-inline:auto}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:6px 18px}
.brand{display:flex;align-items:center;gap:10px;font:700 1.2rem/1 var(--f-display);letter-spacing:-.01em;color:inherit;text-decoration:none}
.brand svg{width:26px;height:26px;color:var(--accent);flex:none}
.top-note{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);text-align:right}
@media (max-width:860px){.top-note{display:none}}

.intro{display:grid;gap:8px;padding-block:6px 22px;max-width:60ch}
h1{margin:0;font:700 clamp(1.9rem,4.4vw,3rem)/1.04 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.intro p{margin:0;color:var(--ink2);font-size:1.02rem;text-wrap:pretty}

/* footer */
.foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:.82rem;color:var(--ink2)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px;width:100%}
.foot nav a{color:var(--ink2);text-underline-offset:3px}
.foot nav a:hover{color:var(--ink)}

/* long-form text: legal pages and the guides under each tool */
.doc{max-width:68ch}
.doc h2{margin:2em 0 .4em;font:600 1.35rem/1.2 var(--f-display);letter-spacing:-.01em}
.doc h3{margin:1.4em 0 .3em;font:600 1.05rem/1.3 var(--f-body)}
.doc p,.doc li{text-wrap:pretty}
.doc p{margin:0 0 .9em}
.doc ul,.doc ol{margin:0 0 .9em;padding-left:1.3em}
.doc li{margin-bottom:.35em}
.doc .lede{font-size:1.05rem;color:var(--ink2)}
.doc .meta{margin:.6em 0 0;font:500 .74rem/1.3 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.draft{border:1px solid var(--warn);background:var(--warn-soft);border-radius:12px;padding:14px 16px;margin:0 0 22px;font-size:.92rem}
.draft b{display:block;font:600 1rem/1.25 var(--f-display);margin-bottom:4px}
.draft p{margin:0}

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