/* KnownFix: a fast, credible developer utility. Dark, dense, calm. The paste box is the product.
   Tokens first; every color, size and duration below reads from them. Light theme lives at the token layer
   ([data-theme="light"]) and is not switched on automatically yet (no toggle shipped). */

@font-face{font-family:"Inter Tight";src:url(/static/fonts/inter-tight.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fonts/jetbrains-mono.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  /* surfaces, one tonal step apart; depth comes from borders and tone, never shadows or glow */
  --bg:#0b0d11; --surface:#12151b; --surface-2:#181c24; --code-bg:#0a0c10;
  --line:#252a34; --line-strong:#323846; --line-control:#5b6579;
  --text:#e7eaf0; --text-muted:#98a2b3; --text-faint:#7c8694;
  /* one accent for actions; the mint brand color is the mark only, never a surface */
  --accent:#8ab0ff; --accent-ink:#0b0d11; --brand:#7cf0c5;
  /* semantic status colors, used for status only */
  --alive:#4cc38a; --degraded:#e9a93f; --down:#f0606d;
  --alive-tint:#1a2d2b; --degraded-tint:#302a20; --down-tint:#312026;
  --open:#4cc38a; --critical:#f0606d; --high:#f0606d; --medium:#e9a93f;
  /* type */
  --font-ui:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-h1:clamp(26px,3.4vw,34px); --fs-h2:20px; --fs-h3:16px; --fs-body:15px; --fs-small:13px; --fs-mono:13px; --fs-mono-input:14px;
  --lh-tight:1.1; --lh-heading:1.3; --lh-body:1.55; --lh-mono:1.5;
  /* space, radius */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --r-1:4px; --r-2:8px; --r-3:12px; --r-pill:999px;
  --wrap:1120px; --gut:20px;
  /* motion: one scale, opening slower than closing, short travel */
  --t-1:90ms; --t-2:150ms; --t-3:220ms; --t-4:350ms;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:ease-in-out;
  --stagger:40ms; --dist:8px; --dist-micro:4px; --blur:2px;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f1f3f6; --code-bg:#f3f5f8;
  --line:#e3e6ec; --line-strong:#c9d0da; --line-control:#8690a0;
  --text:#151922; --text-muted:#5d6675; --text-faint:#636c7a;
  --accent:#2b63d9; --accent-ink:#ffffff; --brand:#0f9a6e;
  --alive:#167a46; --degraded:#9b5c0a; --down:#c02a38;
  --alive-tint:#e8f2ec; --degraded-tint:#f5efe6; --down-tint:#f9eaeb;
  --open:#167a46; --critical:#c02a38; --high:#c02a38; --medium:#9b5c0a;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--font-ui)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.15em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.01em}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading)}
h3{font-size:var(--fs-h3);line-height:var(--lh-heading)}
h3 a{color:var(--text)}
p{margin:0 0 var(--sp-3)}
ul{margin:0 0 var(--sp-3);padding-left:1.2em}
strong,b{font-weight:600}
code,kbd,pre,.mono{font-family:var(--font-mono);font-size:var(--fs-mono);line-height:var(--lh-mono);font-variant-numeric:tabular-nums}
code{font-size:.92em;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-1);padding:.05em .35em}
pre{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-2);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
pre code{background:none;border:0;padding:0;font-size:var(--fs-mono)}
kbd{font-size:11px;border:1px solid var(--line-strong);border-radius:var(--r-1);padding:0 4px;color:var(--text-muted)}
.small{font-size:var(--fs-small)}
.muted{color:var(--text-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px}
mark{background:none;color:var(--text);border-bottom:2px solid var(--accent);padding:0}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
main{display:block;padding:var(--sp-5) var(--gut) var(--sp-8)}
section{margin:0 0 var(--sp-7)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.sechead.sub{margin-top:var(--sp-5)}
.prose{max-width:760px;overflow-wrap:anywhere}
.prose h1{margin-bottom:var(--sp-3)}
.prose h2{margin:var(--sp-6) 0 var(--sp-2)}
.prose h3{margin:var(--sp-4) 0 var(--sp-2)}
.prose p,.prose li{color:var(--text)}
.prose .lead{color:var(--text-muted)}
.lead{color:var(--text-muted);font-size:16px;max-width:720px;margin:var(--sp-3) 0 var(--sp-4)}
.datameta{margin-top:var(--sp-4)}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:56px}
.brand{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;flex:none}
.brand:hover{text-decoration:none}
.brand .mark{width:18px;height:18px;color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);border-radius:5px;padding:2px}
nav.site{display:flex;gap:var(--sp-4);align-items:center}
nav.site a{color:var(--text-muted);font-size:14px;font-weight:500;padding:6px 0;white-space:nowrap}
nav.site a.on,nav.site a:hover{color:var(--text);text-decoration:none}
nav.site a.on{box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:640px){
  .nav{flex-wrap:wrap;padding-top:var(--sp-2);padding-bottom:var(--sp-2);gap:var(--sp-1) var(--sp-3);min-height:0}
  nav.site{width:calc(100% + var(--gut) * 2);margin:0 calc(var(--gut) * -1);padding:0 var(--gut);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{font-size:var(--fs-small);padding:4px 0}
}

/* ---------- controls ---------- */
input,select,textarea,button{font:inherit;color:var(--text)}
input,select{background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-2);padding:8px 11px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
input[type=search]{flex:1;min-width:200px}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--r-2);padding:9px 14px;font-weight:600;font-size:14px;cursor:pointer;transition:filter var(--t-1) var(--ease)}
.btn:hover{filter:brightness(1.06)}
.btn:active{filter:brightness(.96)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-2);padding:5px 10px;font-size:var(--fs-small);font-weight:500;cursor:pointer;transition:border-color var(--t-1) var(--ease)}
.btn-ghost:hover{border-color:var(--line-control)}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);border-radius:var(--r-pill);padding:4px 11px;font-size:var(--fs-small);cursor:pointer;user-select:none;max-width:100%;overflow-wrap:anywhere;transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease)}
.chip:hover{border-color:var(--line-control)}
.chip input{width:auto;margin:0;accent-color:var(--accent)}
.chip:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface-2))}
.pickbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin:0 0 var(--sp-3)}

/* pills: hairline chips; status pills are the only filled ones */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-muted);white-space:nowrap}
.hpill{color:var(--text)}
.hpill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--hc,var(--text-faint))}
.sev-critical{color:var(--critical);border-color:color-mix(in srgb,var(--critical) 45%,transparent)}
.sev-high{color:var(--high);border-color:color-mix(in srgb,var(--high) 35%,transparent)}
.sev-medium{color:var(--medium);border-color:color-mix(in srgb,var(--medium) 35%,transparent)}
.sev-low{color:var(--text-muted)}
.st-open{color:var(--open);border-color:color-mix(in srgb,var(--open) 35%,transparent)}
.st-closed{color:var(--text-muted)}
.stpill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;letter-spacing:.06em;padding:2px 8px;border-radius:var(--r-pill);cursor:help;white-space:nowrap}
.stpill.st-ALIVE{color:var(--alive);background:var(--alive-tint)}
.stpill.st-DEGRADED{color:var(--degraded);background:var(--degraded-tint)}
.stpill.st-DOWN{color:var(--down);background:var(--down-tint)}
.stpill.st-UNKNOWN{color:var(--text-muted);background:var(--surface-2);border:1px solid var(--line)}
.st-word{font-weight:600;letter-spacing:.04em;font-size:12px}
.st-word.st-DEGRADED{color:var(--degraded)}.st-word.st-DOWN{color:var(--down)}.st-word.st-ALIVE{color:var(--alive)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--alive);flex:none}
.dot.st-DEGRADED{background:var(--degraded)}.dot.st-DOWN{background:var(--down)}.dot.st-UNKNOWN{background:var(--text-faint)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-4) 18px;min-width:0;overflow-wrap:anywhere;transition:border-color var(--t-1) var(--ease)}
.card:hover{border-color:var(--line-strong)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--sp-3)}
.list{display:grid;gap:var(--sp-3)}
.meta{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.meta.foot{gap:var(--sp-3);margin-top:var(--sp-2);color:var(--text-faint)}
.issue h3{margin:var(--sp-2) 0 var(--sp-1)}
.issue .sum{color:var(--text-muted);font-size:14px;margin:0 0 var(--sp-2)}
.wa{background:var(--alive-tint);border:1px solid color-mix(in srgb,var(--alive) 30%,transparent);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0;font-size:14px}
.wa-k{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--alive);margin-bottom:2px}
.wa-k .muted{text-transform:none;letter-spacing:0;font-weight:500}
.wa q{display:block;quotes:none;color:var(--text)}
.fx{color:var(--alive);font-size:14px;margin:var(--sp-1) 0}
.nowa{color:var(--text-muted);font-size:14px;margin:var(--sp-2) 0}

/* ---------- hero: the paste box ---------- */
.hero{margin-bottom:var(--sp-6)}
.hero h1{margin-top:var(--sp-3)}
.fixbox{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-3);padding:var(--sp-3);max-width:880px}
.fixbox textarea{display:block;width:100%;min-height:120px;resize:vertical;background:var(--code-bg);color:var(--text);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-3) 14px;font:var(--fs-mono-input)/var(--lh-mono) var(--font-mono);tab-size:2}
.fixbox textarea::placeholder{color:var(--text-faint)}
.fixbar{display:flex;gap:var(--sp-2) var(--sp-3);align-items:center;flex-wrap:wrap;margin-top:var(--sp-2)}
.fixbar .hint{flex:1 1 200px}
.fixbar .btn{margin-left:auto}
.scope-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);border-radius:var(--r-2);padding:6px 10px;font-size:var(--fs-small);font-weight:500;cursor:pointer;max-width:100%;transition:border-color var(--t-1) var(--ease)}
.scope-btn:hover{border-color:var(--line-control)}
.scope-btn .scope-k{color:var(--text-muted);font-weight:500}
.scope-btn .chev{width:14px;height:14px;flex:none;transform:scaleY(1);transform-origin:center;transition:transform var(--t-3) var(--ease)}
.scope-btn .chev path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.scope-btn[aria-expanded="true"] .chev{transform:scaleY(-1)}
.scope-foot{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-1)}
.fixex{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3);align-items:center}
.fix-ex{font-family:var(--font-mono);font-size:12px;text-align:left;color:var(--text-muted);align-items:flex-start}
.fix-ex .exh{color:var(--text);font-weight:500;white-space:nowrap;flex:none}

/* disclosure: grid-rows 0fr -> 1fr, no height measuring; symmetric 220ms */
.acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-3) var(--ease)}
.acc[data-open="true"]{grid-template-rows:1fr}
.acc-inner{min-height:0;overflow:hidden;opacity:0;filter:blur(var(--blur));visibility:hidden;transition:opacity var(--t-3) var(--ease),filter var(--t-3) var(--ease),visibility 0s linear var(--t-3)}
.acc[data-open="true"] .acc-inner{opacity:1;filter:blur(0);visibility:visible;transition-delay:0s} /* hidden once closed, so its controls leave the tab order */
.acc-inner>.chips{margin-top:var(--sp-3)}

/* ---------- results ---------- */
.fixres-list{display:grid;gap:var(--sp-3);margin-top:var(--sp-4);max-width:880px}
.fxmeta{margin:0}
/* reveal: each result rises 8px out of a 2px blur, 40ms apart; nothing replays on exit */
.fixres-list>.rv{opacity:0;transform:translateY(var(--dist));filter:blur(var(--blur));transition:opacity var(--t-4) var(--ease-io),transform var(--t-4) var(--ease),filter var(--t-4) var(--ease-io);transition-delay:calc(var(--stagger) * var(--i,0));will-change:transform,opacity,filter}
.fixres-list.is-shown>.rv{opacity:1;transform:translateY(0);filter:blur(0)}
.res .conf{margin-left:auto;font-size:12px;color:var(--text-muted);white-space:nowrap}
.res.conf-high{border-left:3px solid var(--accent)}
.res.conf-medium{border-left:3px solid var(--line-control)}
.res.conf-low{opacity:.85}
.res h3{margin:var(--sp-2) 0 var(--sp-1)}
.snip{margin:0 0 var(--sp-2);padding:6px 10px;background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-2);color:var(--text-muted);font-family:var(--font-mono);font-size:12.5px;line-height:var(--lh-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.nores{color:var(--text)}
.nores .btn-ghost{margin-left:var(--sp-1)}

/* ---------- status strip ---------- */
.ststrip{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.stp{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-small);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 11px;color:var(--text);transition:border-color var(--t-1) var(--ease)}
.stp:hover{border-color:var(--line-strong);text-decoration:none}
.stp .st-t{font-size:11px;letter-spacing:.06em;font-weight:600}
.stp .st-t.st-DEGRADED{color:var(--degraded)}.stp .st-t.st-DOWN{color:var(--down)}
.stnotes{list-style:none;padding:0;margin:var(--sp-3) 0 0;display:grid;gap:var(--sp-1);color:var(--text-muted)}

/* ---------- issues page ---------- */
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;margin:var(--sp-4) 0 var(--sp-2)}
.chk{display:flex;gap:6px;align-items:center}.chk input{width:auto}
.subnav{margin:0 0 var(--sp-4);color:var(--text-muted)}
.subnav a{white-space:nowrap}
.upgwrap{display:grid;grid-template-columns:3fr 2fr;gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-5)}
@media (max-width:760px){.upgwrap{grid-template-columns:1fr}}
.upg h2{margin:0 0 var(--sp-1);font-size:18px}
.upgform{display:flex;gap:var(--sp-2);margin:var(--sp-2) 0}
.upgform input{flex:1;min-width:0;font-family:var(--font-mono);font-size:var(--fs-mono-input)}
.upg .chips{align-items:center}
.upg-v{font-family:var(--font-mono);font-size:12px}
.upgrow{padding:6px 0;border-top:1px solid var(--line);font-size:14px}
.ok{color:var(--alive)}.warn{color:var(--degraded)}.bad{color:var(--down)}
.wa-pill{color:var(--alive);border-color:color-mix(in srgb,var(--alive) 35%,transparent)}
.hside .hrow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-2)}
.hnums{display:flex;gap:var(--sp-4);margin:var(--sp-3) 0;flex-wrap:wrap}
.hnums b{display:block;font-size:22px;line-height:1.1;font-family:var(--font-mono);font-weight:500}
.hnums span{font-size:12px;color:var(--text-muted)}
.sparkw{display:block;line-height:0;margin:var(--sp-2) 0}
.sparkw svg{width:100%;max-width:260px;height:auto}
.spark rect{fill:var(--text-faint)}

/* ---------- tables, code blocks, copy ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl td,.tbl th{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top;overflow-wrap:break-word}
.tbl th{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
@media (max-width:640px){.tbl{display:block;overflow-x:auto}}
.codeblock{position:relative;margin:0 0 var(--sp-3)}
.codeblock pre{margin:0;padding-right:72px}
.codeblock .copyb{position:absolute;top:8px;right:8px}
/* copy confirmation: the label's two states share one cell and cross-blur, 4px travel, 150ms */
.swap{display:inline-grid;text-align:left}
.swap>span{grid-area:1/1;white-space:nowrap;transition:opacity var(--t-2) var(--ease-io),filter var(--t-2) var(--ease-io),transform var(--t-2) var(--ease-io)}
.swap[data-state="b"]>span:first-child,.swap:not([data-state="b"])>span:last-child{opacity:0;filter:blur(var(--blur));transform:translateY(var(--dist-micro))}
.swap[data-state="b"]>span:last-child{opacity:1;filter:blur(0);transform:translateY(0)}

/* ---------- signup (renders only with a provider), footer ---------- */
.signup{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin:var(--sp-4) 0;max-width:640px}
.signup input[type=email]{flex:1;min-width:220px}
.signup .note{width:100%;margin:0}
.foot{border-top:1px solid var(--line);padding:var(--sp-5) 0;margin-top:var(--sp-6);color:var(--text-muted);font-size:var(--fs-small)}
.footgrid{display:grid;gap:var(--sp-3)}
.foot a{color:var(--text-muted)}
.foot a:hover{color:var(--text)}
.xsite{display:inline-block;margin-top:var(--sp-1)}

/* ---------- reduced motion: everything that moves, off ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .fixres-list>.rv{opacity:1;transform:none;filter:none}
}