:root{--bg:#F6F8F7;--surface:#FFFFFF;--ink:#1B2A30;--ink-strong:#12262E;--muted:#5B6C72;--line:#D5DEDC;--line-soft:#E6ECEA;--accent:#0F7C74;--accent-ink:#0B5F59;--accent-soft:#DCEFEC;--warn:#B3701A;--warn-soft:#F8EBD3;--crit:#A63A2B;--crit-soft:#F6E1DC;--ok:#2C7A4B;--ok-soft:#DDEFE3;--code:#EEF3F2;--mark-ink:#12262E;--mark-accent:#0F7C74;--star:#D9962B}
@media (prefers-color-scheme:dark){:root{--bg:#0E181C;--surface:#15232A;--ink:#DCE6E4;--ink-strong:#F0F5F4;--muted:#93A5AB;--line:#2A3B42;--line-soft:#1F2F36;--accent:#3DB9AE;--accent-ink:#7BD6CD;--accent-soft:#163A3A;--warn:#E0A64C;--warn-soft:#3A2C14;--crit:#E07A67;--crit-soft:#3E1F1A;--ok:#63C48A;--ok-soft:#183324;--code:#0B1418;--mark-ink:#E4ECEA;--mark-accent:#3DB9AE;--star:#E0A64C}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,Segoe UI,Arial,sans-serif;font-size:16px;line-height:1.55}
a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','IBM Plex Sans',sans-serif;color:var(--ink-strong);line-height:1.15;margin:0 0 .5rem;text-wrap:balance}
h1{font-size:2rem;font-weight:800;letter-spacing:-.02em}h2{font-size:1.35rem;font-weight:700}h3{font-size:1.1rem;font-weight:700}h4{font-size:1rem;font-weight:600}
p{margin:.5rem 0}
.mono,code{font-family:'IBM Plex Mono',Consolas,monospace}
code{background:var(--code);padding:.05em .3em;border-radius:3px;font-size:.9em}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.page{padding:1.75rem 1.25rem 4rem;min-height:60vh}
.muted{color:var(--muted)}.small{font-size:.85rem}.tiny{font-size:.75rem}
.eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.right{text-align:right}.center{text-align:center}
.mt{margin-top:1.5rem}.mt-s{margin-top:.75rem}.mb{margin-bottom:1.5rem}
/* nav */
.nav{background:var(--surface);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding-top:.6rem;padding-bottom:.6rem}
.brand{display:flex;align-items:center;gap:.5rem;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.04em;color:var(--ink-strong)}
.brand:hover{text-decoration:none}.brand svg{width:34px;height:34px}
.links{display:flex;gap:.25rem;flex-wrap:wrap}
.links a,.authlinks a{padding:.35rem .6rem;border-radius:6px;color:var(--ink);font-weight:500;font-size:.95rem}
.links a:hover,.authlinks a:hover{background:var(--accent-soft);text-decoration:none}
.links a.on{background:var(--accent-soft);color:var(--accent-ink)}
.authlinks{margin-left:auto;display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.linkish{background:none;border:0;padding:.35rem .6rem;font:inherit;color:var(--ink);cursor:pointer;border-radius:6px}.linkish:hover{background:var(--accent-soft)}
.foot{border-top:1px solid var(--line);padding:1.5rem 0 2.5rem;color:var(--muted);font-size:.85rem}
.foot .wrap{display:flex;gap:1.5rem;flex-wrap:wrap}
/* buttons + forms */
.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:600;font-size:.95rem;padding:.55rem 1rem;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink-strong);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
/* .authlinks a and .links a are more specific than .btn, so a button in the
   header would otherwise take the nav link colour: dark ink on a green fill. */
.links a.btn,.authlinks a.btn{color:var(--ink-strong);padding:.55rem 1rem}
.links a.btn-sm,.authlinks a.btn-sm{padding:.35rem .7rem}
.links a.btn-primary,.authlinks a.btn-primary{color:#fff}
.links a.btn-primary:hover,.authlinks a.btn-primary:hover{background:var(--accent-ink);color:#fff}
.btn-sm{padding:.3rem .7rem;font-size:.85rem}
.btn-danger{color:var(--crit);border-color:var(--crit)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.field label,.field .lbl{font-weight:600;font-size:.9rem;color:var(--ink-strong)}
.field .hint{font-size:.8rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{font:inherit;padding:.55rem .7rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);width:100%}
textarea{min-height:140px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.err{color:var(--crit);font-size:.85rem}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem}.check input{margin-top:.3rem}
.row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:2rem}
@media(max-width:820px){.cols{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem}
.card h3{margin-top:0}
.card.soft{background:var(--accent-soft);border-color:transparent}
.flash{padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem;border-left:3px solid var(--accent);background:var(--accent-soft)}
.flash.err{border-left-color:var(--crit);background:var(--crit-soft)}
.flash.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.pill{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:.1rem .5rem;border-radius:999px;background:var(--code);color:var(--muted);white-space:nowrap}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.crit{background:var(--crit-soft);color:var(--crit)}.pill.ok{background:var(--ok-soft);color:var(--ok)}
.badge{display:inline-block;font-size:.7rem;font-weight:600;padding:.1rem .45rem;border-radius:4px;vertical-align:middle;white-space:nowrap}
.badge-vendor{background:var(--warn-soft);color:var(--warn)}.badge-aff{background:var(--code);color:var(--muted)}.badge-mod{background:var(--accent-soft);color:var(--accent-ink)}.badge-demo{background:var(--code);color:var(--ink-strong);border:1px dashed var(--line)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{font-size:.82rem;padding:.25rem .65rem;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--surface)}
.chip:hover{text-decoration:none;border-color:var(--accent)}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.stars{color:var(--star);letter-spacing:.05em;font-size:.95rem;white-space:nowrap}.stars .off{color:var(--line)}
.ratebtns{display:flex;gap:.3rem}.ratebtns button{font-size:1.3rem;line-height:1;padding:.3rem .5rem;background:var(--surface);border:1px solid var(--line);border-radius:6px;cursor:pointer;color:var(--star)}
.ratebtns button:hover,.ratebtns button.on{background:var(--warn-soft);border-color:var(--star)}
.bar{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}.bar i{display:block;height:100%;background:var(--accent)}
.axis{display:grid;grid-template-columns:1fr 100px 40px;gap:.6rem;align-items:center;font-size:.9rem;padding:.25rem 0}
.axis .n{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right}
.axis.axis-text{grid-template-columns:1fr 100px minmax(7.5rem,max-content)}
@media (max-width:640px){.axis,.axis.axis-text{grid-template-columns:1fr 70px minmax(4.5rem,max-content)}}
.list{list-style:none;margin:0;padding:0}
.list li{padding:.7rem 0;border-bottom:1px solid var(--line-soft)}.list li:last-child{border-bottom:0}
.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1rem;align-items:center}
.trow .t{font-weight:600;color:var(--ink-strong)}
.trow .m{font-size:.82rem;color:var(--muted);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.trow .c{font-size:.82rem;color:var(--muted);text-align:right;white-space:nowrap}
.prose{max-width:70ch;line-height:1.65}.prose p{margin:.75rem 0}.prose h1,.prose h2,.prose h3{margin-top:1.5rem}.prose ul,.prose ol{padding-left:1.3rem}.prose blockquote{border-left:3px solid var(--line);margin:1rem 0;padding:.2rem 1rem;color:var(--muted)}
.prose pre{background:var(--code);padding:.8rem 1rem;border-radius:6px;overflow-x:auto;font-size:.85rem}.prose table{border-collapse:collapse;width:100%;font-size:.92rem}.prose th,.prose td{border-bottom:1px solid var(--line-soft);padding:.4rem .5rem;text-align:left;vertical-align:top}
.prose img{max-width:100%}
.post{padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.post .who{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.post .who b{color:var(--ink-strong)}
.post.hidden{opacity:.55}
.tablewrap{overflow-x:auto}
table.tbl{border-collapse:collapse;width:100%;font-size:.92rem}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.55rem .6rem;border-bottom:1px solid var(--line-soft)}
.tbl th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tbl th.num{text-align:right}
.tbl td.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;text-align:right}
.stat{display:flex;flex-direction:column}.stat b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.7rem;font-weight:800;color:var(--ink-strong);line-height:1}.stat span{font-size:.8rem;color:var(--muted)}
.hero{padding:1.5rem 0 2rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.hero h1{font-size:2.5rem;max-width:20ch}.hero p{max-width:60ch;font-size:1.05rem}
@media(max-width:600px){.hero h1{font-size:1.9rem}h1{font-size:1.6rem}}
.pagination{display:flex;gap:.3rem;flex-wrap:wrap;margin:1.5rem 0;list-style:none;padding:0}
.pagination a,.pagination span{padding:.35rem .7rem;border:1px solid var(--line);border-radius:6px;font-size:.9rem;background:var(--surface)}
.pagination .on{background:var(--accent);color:#fff;border-color:var(--accent)}.pagination .dis{opacity:.45}
details.report{font-size:.85rem}details.report summary{cursor:pointer;color:var(--muted)}details.report form{margin-top:.5rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}details.report select{width:auto}
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);padding:.7rem 1rem;border-radius:0 6px 6px 0;margin:1rem 0}
.callout.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.msg{padding:.6rem 0;border-bottom:1px solid var(--line-soft)}.msg .who{font-size:.8rem;color:var(--muted)}
.score{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.6rem;color:var(--ink-strong);line-height:1}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;font-size:.9rem}.kv dt{color:var(--muted)}.kv dd{margin:0}
.tool-out{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:1rem 1.1rem;position:sticky;top:1rem}
.big{font-family:'Bricolage Grotesque',sans-serif;font-size:2.2rem;font-weight:800;color:var(--ink-strong);line-height:1}
.band{display:inline-block;padding:.2rem .6rem;border-radius:6px;font-weight:600;font-size:.85rem}
.band.low{background:var(--ok-soft);color:var(--ok)}.band.med{background:var(--warn-soft);color:var(--warn)}.band.high{background:var(--crit-soft);color:var(--crit)}
.range{display:grid;grid-template-columns:1fr 3rem;gap:.5rem;align-items:center}.range output{font-family:'IBM Plex Mono',monospace;text-align:right;font-size:.9rem}
input[type=range]{width:100%;accent-color:var(--accent)}
.q{padding:.6rem 0;border-bottom:1px solid var(--line-soft)}.q .opts{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.3rem}
.q .opts label{border:1px solid var(--line);border-radius:6px;padding:.25rem .6rem;font-size:.85rem;cursor:pointer;background:var(--surface)}
.q .opts input{display:none}.q .opts input:checked+span{color:var(--accent-ink);font-weight:600}
.q .opts label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.navsearch{margin-left:auto}
.navsearch input{font:inherit;font-size:.9rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);width:150px}
.navsearch input:focus{width:220px;background:var(--surface)}
.authlinks{margin-left:.5rem}
@media(max-width:820px){.navsearch{margin-left:0;order:3}.navsearch input:focus{width:100%}.authlinks{margin-left:auto}}
.ico{flex:0 0 auto;vertical-align:-.18em}
.toolbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0 0}
.toolbar form.engage{display:contents}
.chip-btn{gap:.35rem}
.chip-btn .n{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip-btn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.chip-btn.on .n{color:var(--accent-ink)}
.chip-btn.done{border-color:var(--ok);color:var(--ok)}
.chip-btn:disabled{opacity:.6;cursor:progress}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.toolcard{display:flex;flex-direction:column;gap:.35rem}
.toolcard .toolhead{display:flex;align-items:center;gap:.5rem;color:var(--accent)}
.toolcard h3{margin:0}
.toolcard .meta{margin-top:auto;padding-top:.6rem;display:flex;gap:.8rem;color:var(--muted);font-size:.78rem}
.notice{border:1px dashed var(--line);background:var(--code);color:var(--ink);padding:.6rem .8rem;border-radius:6px;font-size:.86rem;margin:0 0 1rem}

/* --- Small screens -------------------------------------------------------
   .wrap is a flex container, and a flex or grid child defaults to
   min-width:auto, so it refuses to shrink below its content. One wide table,
   one long token or one grid minimum was therefore pushing the whole document
   wider than the viewport, which is why every page could be scrolled sideways
   on a phone and the header ran off the edge. Letting children shrink, and
   capping each grid minimum at the available width, fixes it at the cause. */
.wrap > *{min-width:0}
.card,.tool-out,section,aside{min-width:0}
.navsearch{min-width:0}
.navsearch input{max-width:100%}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.toolgrid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.cols{grid-template-columns:minmax(0,2fr) minmax(min(260px,100%),1fr)}
.tablewrap{max-width:100%}
pre,code,.mono{overflow-wrap:anywhere}
img,svg,video{max-width:100%}
/* Monospace output blocks: pre carries the box, .code carries the family. */
.code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.82rem;line-height:1.55;margin:.3rem 0 0}
@media(max-width:560px){
  .navsearch{width:100%;order:4;margin:.35rem 0 0}
  .navsearch input,.navsearch input:focus{width:100%}
  .toolbar{gap:.3rem}
  .wrap{gap:.9rem}
}