@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  --paper:#eef1ec; --ink:#15231d; --ink-2:#44564d; --line:#c9d3cc; --face:#fbfcfa;
  --enamel:#b8321b; --enamel-ink:#fff; --harbor:#1f5673; --brass:#c9902c; --over:#b8321b; --ok:#1f5673;
  --shadow:0 1px 0 #fff inset,0 1px 2px rgba(21,35,29,.10),0 6px 16px -8px rgba(21,35,29,.28);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif; --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0e1d26; --ink:#e8efea; --ink-2:#a9bbb2; --line:#27414f; --face:#16303d;
  --enamel:#e2543a; --enamel-ink:#0e1d26; --harbor:#7fc0de; --brass:#e3b15a; --over:#ff8a73; --ok:#7fc0de;
  --shadow:0 1px 0 rgba(255,255,255,.06) inset,0 8px 20px -10px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--body);min-height:100dvh}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:.005em;line-height:1.02;margin:0}
a{color:var(--harbor)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:9}
.skip:focus{left:8px;top:8px}

.top{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;max-width:68rem;margin:0 auto}
.mark{display:flex;gap:.55rem;align-items:center;font:800 1.45rem/1 var(--display);color:var(--ink);text-decoration:none}
.mark-plate{width:1.7rem;height:1.05rem;border-radius:3px;background:var(--enamel);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--brass)}
.top nav{display:flex;gap:1rem;font-size:.95rem}
.top nav a{color:var(--ink-2)}

main{max-width:68rem;margin:0 auto;padding:0 1.1rem 3rem}
.intro{display:grid;gap:1.6rem;padding-top:.6rem}
h1{font-size:clamp(2.6rem,9.5vw,5.2rem);max-width:14ch}
.lede{margin:.7rem 0 0;max-width:34rem;color:var(--ink-2);font-size:1.12rem}

.form{display:grid;gap:1rem;background:var(--face);border:1px solid var(--line);border-radius:10px;padding:1.1rem;box-shadow:var(--shadow)}
.field{display:grid;gap:.35rem}
.field>span{font-weight:700;font-size:.98rem}
.field em{font-weight:400;font-style:normal;color:var(--ink-2)}
.field small,.hint,.fine{color:var(--ink-2);font-size:.92rem;margin:0}
input,textarea{font:inherit;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:7px;padding:.7rem .8rem;width:100%;min-height:3rem}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--ink-2) 70%,transparent)}
input:focus,textarea:focus{border-color:var(--harbor);outline:2px solid var(--harbor);outline-offset:0}
.pair{display:grid;gap:1rem}
.more summary{cursor:pointer;font-weight:700;padding:.4rem 0;min-height:2.75rem;display:flex;align-items:center}
.more[open] summary{margin-bottom:.4rem}
.actions{display:grid;gap:.6rem}
.go{font:800 1.4rem/1 var(--display);letter-spacing:.02em;background:var(--enamel);color:var(--enamel-ink);border:0;border-radius:8px;min-height:3.4rem;padding:0 1.4rem;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.go:hover{filter:brightness(1.06)} .go:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.go[disabled]{opacity:.6;cursor:progress}
.go.small{font-size:1.15rem;min-height:3rem}
.ghost{font:700 1rem var(--body);background:transparent;color:var(--ink);border:1.5px solid var(--ink-2);border-radius:8px;min-height:3rem;padding:0 1rem;cursor:pointer}
.ghost:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.err{margin:0;color:var(--over);font-weight:700;border-left:4px solid var(--over);padding:.2rem 0 .2rem .7rem}

.sample{margin:0;display:grid;gap:.6rem;align-content:start;order:2}.form{order:3}
.sample figcaption{color:var(--ink-2);font-size:.95rem;max-width:26rem}

/* the plate: one per ad line, with a character ruler */
.plate{position:relative;display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:center;background:var(--face);border:1px solid var(--line);border-radius:8px;padding:.7rem .85rem .95rem;box-shadow:var(--shadow);outline:2px solid transparent}
.plate::before{content:"";position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--brass) 55%,transparent);border-radius:5px;pointer-events:none}
.plate-text,.plate input,.plate textarea{font:700 1.2rem/1.2 var(--body)}
.plate input,.plate textarea{border:0;background:transparent;padding:.35rem .15rem;min-height:2.6rem;border-radius:4px;resize:none}
.plate textarea{font-weight:400;font-size:1.05rem;line-height:1.4;min-height:4.2rem}
.plate input:focus,.plate textarea:focus{outline:2px solid var(--harbor);background:color-mix(in srgb,var(--harbor) 8%,transparent)}
.count{font:800 1.6rem/1 var(--display);color:var(--ok);font-variant-numeric:tabular-nums}
.count span{font-size:1rem;color:var(--ink-2);font-weight:700}
.ruler{grid-column:1/-1;position:relative;height:.55rem;border-radius:2px;background:
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/var(--max)));overflow:hidden}
.ruler i{position:absolute;inset:0 auto 0 0;width:calc(var(--used)/var(--max)*100%);max-width:100%;background:var(--brass);opacity:.9;transition:width .18s ease-out}
.ruler::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--face) 0 1px,transparent 1px calc(100%/var(--max)));opacity:.7}
.plate.over{border-color:var(--over)}
.plate.over .count{color:var(--over)} .plate.over .ruler i{background:var(--over)}
.plate .msg{grid-column:1/-1;margin:0;color:var(--over);font-size:.92rem;font-weight:700}

.status{margin-top:1.4rem;display:grid;gap:.6rem}
.status p{margin:0;font-weight:700}
.bar{height:.5rem;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:40%;background:var(--enamel);animation:slide 1.1s ease-in-out infinite alternate}
@keyframes slide{to{margin-left:60%}}

.out{margin-top:2rem;display:grid;gap:1.8rem}
.out-head{display:grid;gap:.4rem}
.out-head h2{font-size:clamp(2rem,7vw,3.2rem)}
.badge{margin:0;font-weight:700;color:var(--ok)} .badge.warn{color:var(--over)}
.notes{margin:0;padding:0;list-style:none;display:grid;gap:.3rem;color:var(--ink-2)}
.block{display:grid;gap:.7rem}
.block h3{font-size:1.9rem} .block h4{font-size:1.3rem;margin-top:.8rem}
.plates{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}

.serp{background:#fff;color:#202124;border:1px solid #dadce0;border-radius:10px;padding:1rem 1.1rem;font-family:Arial,Helvetica,sans-serif;min-height:7.5rem}
.serp .s-top{font-size:.8rem;color:#202124;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}
.serp .s-top b{font-weight:700;color:#202124}
.serp .s-title{display:block;margin:.35rem 0 .25rem;font-size:1.2rem;line-height:1.3;color:#1a0dab}
.serp .s-desc{font-size:.92rem;line-height:1.5;color:#4d5156;margin:0}
@media (prefers-color-scheme:dark){.serp{box-shadow:0 0 0 1px #000}}

.kwgroup{border-top:1px solid var(--line);padding:.7rem 0}
.kwgroup h5{font:800 1.25rem var(--display);margin:0 0 .4rem}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{background:var(--face);border:1px solid var(--line);border-radius:6px;padding:.35rem .6rem;font-size:.98rem}
.gaps{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem}
.foot{max-width:68rem;margin:0 auto;padding:1.5rem 1.1rem 3rem;color:var(--ink-2);font-size:.92rem;border-top:1px solid var(--line)}
.legal{max-width:42rem;margin:0 auto;padding:1rem 1.1rem 3rem} .legal h1{font-size:2.6rem;max-width:none;margin-bottom:.6rem} .legal h2{font-size:1.5rem;margin:1.4rem 0 .3rem} .legal .pilot{background:var(--face);border-left:4px solid var(--brass);padding:.6rem .8rem}

@media (min-width:52rem){
  .top,main,.foot{padding-left:2rem;padding-right:2rem}
  .intro{grid-template-columns:1.05fr .95fr;column-gap:3rem;align-items:start;padding-top:2rem}
  .intro>h1,.intro>.lede{grid-column:1} .form{grid-column:1;grid-row:3;order:0} .sample{order:0} .sample{grid-column:2;grid-row:1/4;padding-top:1rem}
  .pair{grid-template-columns:1fr 1fr}
  .plates.wide{grid-template-columns:1fr 1fr}
  .plates:not(.wide){grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.bar i{margin-left:0;width:100%}}
[data-sample] .ruler{--used:20;--max:30}