/* The three faces, self-hosted next to this file under the versioned asset
   path: a year in the cache, no third-party request. Each has a local
   fallback scaled to the same letter widths, with the real face's ascent,
   descent, and line gap, so text set in Arial or Courier New while a font
   loads sits exactly where the real glyphs land: the swap changes shapes,
   never layout. Values from tools/font-metrics.mjs; re-run it after
   changing a font file. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.5%;ascent-override:90.12%;descent-override:22.44%;line-gap-override:0%}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/instrument-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans Fallback";src:local("Arial");size-adjust:102.88%;ascent-override:94.28%;descent-override:24.3%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New");size-adjust:99.98%;ascent-override:102.02%;descent-override:30%;line-gap-override:0%}

:root{
  --paper:#F7F8F6; --panel:#FFFFFF; --ink:#12181C; --slate:#5A6B72;
  --rule:#E2E7E4; --alive:#0B775E; --alive-soft:#E3F3ED;
  --critical:#C6362F; --high:#AD580C; --medium:#856800; --low:#5F6F76; --info:#3D7B9C;
  --shadow:0 1px 0 rgba(18,24,28,.04), 0 12px 28px -18px rgba(18,24,28,.28);
}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden} /* decorative glow may reach past the edges; the page must not scroll sideways */
body{
  background:var(--paper); color:var(--ink);
  font-family:"Inter","Inter Fallback",system-ui,sans-serif; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
a{color:var(--alive);text-decoration:none}
a:hover{text-decoration:underline}
.linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--alive);cursor:pointer;text-align:left}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* Keyboard and screen readers: a skip link that appears on focus, a main that
   can take focus without a ring, underlined links wherever they sit in text. */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{left:12px;outline:2px solid var(--alive);outline-offset:2px}
#main:focus,.scorecard h2:focus{outline:none}
footer a,.guide a,.body a,.faq a,.note a,.empty a,.muted a,.err a,.done a,.cta p a,.sub a,.code a,.fix-plan p a{text-decoration:underline;text-underline-offset:2px}
.linklike:hover{text-decoration:underline}

header{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.mark{display:flex;align-items:center;gap:9px;font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:700;font-size:1.125rem;letter-spacing:-.01em}
.mark-icon{width:26px;height:26px;display:block;color:var(--ink)}
.mark a{color:inherit}
code{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:.92em;background:#f3f5f4;border:1px solid var(--rule);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}
/* The header's links carry the same face and weight as the site's buttons, in
   ink, so they read as places to go rather than as small print; the small grey
   Inter they used to be was the easiest thing on the page to miss. Pricing is
   the one framed item: a single emphasised link is a signpost, four bold ones
   are noise, and the paid part of the product is the one the header should
   point at. The hero's scan button stays the loudest thing on the page. */
header nav{display:flex;align-items:center;gap:22px}
header nav a,header nav .linklike{display:inline-flex;align-items:center;height:32px;line-height:1;color:var(--ink);font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:0.9375rem;letter-spacing:-.005em}
header nav .nav-cta{border:1.5px solid var(--ink);border-radius:999px;padding:0 14px}
header nav .nav-cta:hover{background:var(--ink);color:#fff;text-decoration:none}
#nav-user{display:contents} /* the wrapper must not become its own flex item; its link aligns like the others */
.nav-user{gap:8px}
.nav-user img{width:24px;height:24px;border-radius:50%;display:block}

/* Dashboard + sign-in */
.btn-github{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border-radius:12px;padding:12px 18px;font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:0.9375rem}
.btn-github:hover{text-decoration:none;background:#f3f5f4}
.cta .or{margin:12px 0 10px;font-size:0.8125rem;color:#c9d2d0}
.cta .done{margin:12px 0 0}
.cta .done a{color:var(--alive-soft);text-decoration:underline}
.app-card{background:var(--panel);border:1.5px solid var(--rule);border-radius:16px;padding:18px 20px;margin-top:14px;box-shadow:var(--shadow)}
.app-head{display:flex;align-items:center;gap:16px}
.app-head .grade{width:56px;height:56px;font-size:1.75rem;border-radius:12px}
.grade.none{background:var(--slate)}
.app-head .target{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.875rem;font-weight:500;flex:1;min-width:0;overflow-wrap:anywhere}
.more{position:relative;flex:none;margin-left:auto}
.more-btn{width:40px;height:40px;padding:0;display:grid;place-items:center;border:1.5px solid var(--rule);border-radius:12px;background:#fff;cursor:pointer;color:var(--ink)}
.more-btn:hover,.more-btn[aria-expanded="true"]{border-color:var(--ink)}
.more-btn:disabled{opacity:.55;cursor:default}
.more-btn .dots{display:block;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:-7px 0 0 currentColor,7px 0 0 currentColor}
.more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:15;min-width:210px;background:#fff;border:1.5px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column}
.more-menu[hidden]{display:none}
.more-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:10px 12px;font:inherit;font-size:0.9063rem;color:var(--ink);cursor:pointer}
.more-menu button:hover{background:#f3f5f4}
.more-menu button:focus-visible{background:#f3f5f4;outline:2px solid var(--alive);outline-offset:-2px}
.more-menu button.danger{color:var(--critical)}
.more-menu .sep{height:1px;background:var(--rule);margin:6px 4px}
.more-menu .lbl{display:block;font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.7188rem;color:var(--slate);padding:6px 12px 2px;word-break:break-all}
.more-menu .ttl{display:none}
button.ghost{background:transparent;border:1.5px solid var(--rule);border-radius:10px;padding:8px 12px;font:inherit;font-size:0.8125rem;cursor:pointer;color:var(--ink)}
button.ghost:hover{border-color:var(--ink)}
button.ghost.danger:hover{border-color:var(--critical);color:var(--critical)}
button.ghost:disabled{opacity:.55;cursor:default}
.app-meta{margin-top:10px}
.app-card .tally{margin-top:8px}
.app-card .findings{margin-top:14px}
.app-card .fix{margin-top:14px}
.dash-hero{padding-bottom:0}
.dash-hero #dashMsg{margin:0 0 10px}
.add-app{margin-top:18px}
.add-app details{border:1.5px dashed var(--rule);border-radius:16px}
.add-app details[open]{border-style:solid;background:var(--panel);box-shadow:var(--shadow)}
.add-app summary{padding:14px 18px;gap:10px;font-weight:600;color:var(--ink)}
.add-app summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--alive-soft);color:var(--alive);font-weight:700;font-size:0.9375rem;flex:none}
.add-app form{display:flex;flex-wrap:wrap;gap:10px;padding:0 18px 14px}
.add-app .field{flex:1 1 260px}
.add-app #addMsg{margin:0;padding:0 18px 14px}
.add-app #addMsg:empty{display:none}
.fix-plan{border:1.5px solid var(--rule);border-radius:16px;background:var(--panel);padding:14px 16px}
.fix-plan p{margin:0 0 8px}
.fix-plan .snip pre{max-height:320px;overflow:auto}
.fix-plan .open-pr{margin-top:10px}
.fix-plan .fix-msg{margin:10px 0 0}
.fix-plan .note{margin-top:10px}
.fix-plan .snip summary > span:first-child{overflow-wrap:anywhere;min-width:0}
.app-card .code{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--rule)}
.app-card .code:empty{display:none}
.repo-pick{font:inherit;font-size:0.8125rem;padding:7px 10px;border:1.5px solid var(--rule);border-radius:10px;background:#fff;max-width:100%}
.muted{color:var(--slate);font-size:0.8125rem}
.note{background:#fbf8ec;border:1px solid #ece0b3;border-radius:12px;padding:12px 16px;font-size:0.875rem;color:#5a4a00;margin-top:16px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;background:var(--panel);border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px}
.share input{flex:1 1 260px;min-width:0;font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.8125rem;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;background:#f6f8f7;color:var(--ink)}
.share .copied{color:var(--alive);font-size:0.8125rem}
.empty{color:var(--slate);padding:26px 0}
#dash-sub{margin-bottom:18px}

.hero{padding:40px 0 8px}
h1{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:700;font-size:clamp(1.875rem,5.4vw,2.875rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 14px;max-width:20ch;text-wrap:balance}
.sub{color:var(--slate);font-size:1.0625rem;max-width:52ch;margin:0 0 26px}

form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.field{flex:1 1 340px;display:flex;align-items:center;background:var(--panel);border:1.5px solid var(--rule);border-radius:12px;padding:0 14px;box-shadow:var(--shadow);transition:border-color .15s}
.field:focus-within{border-color:var(--alive)}
.field .scheme{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;color:var(--slate);font-size:0.8125rem;padding-right:2px;user-select:none}
.field input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:1rem;color:var(--ink);padding:17px 6px}
button.scan{background:var(--ink);color:#fff;border:0;border-radius:12px;padding:12px 26px;min-height:48px;font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1rem;cursor:pointer;transition:transform .1s ease-out, background .15s ease-out}
@media (max-width:520px){button.scan{width:100%}}
button.scan:hover{background:#000}
button.scan:active{transform:scale(.98)}
button.scan:disabled{opacity:.55;cursor:default}

.consent{display:flex;align-items:center;gap:9px;margin:14px 2px 0;color:var(--slate);font-size:0.8438rem}
.consent input{width:16px;height:16px;accent-color:var(--alive)}

/* EKG line: the one bold flourish */
.ekg{margin:30px 0 6px;height:46px;width:100%;overflow:hidden}
.ekg svg{width:100%;height:100%}
.ekg path{fill:none;stroke:var(--rule);stroke-width:2}
/* A monitor sweep: one green segment glides along the line at constant speed and
   wraps from the right edge to the left, because the dash pattern repeats exactly
   once per path (pathLength=1000 on the path). One cycle ends where it began, so
   the loop has no seam; scanning only shortens the cycle. */
.ekg .live{stroke:var(--alive);stroke-dasharray:280 720;stroke-dashoffset:0;opacity:.55;animation:sweep 7s linear infinite}
body.scanning .ekg .live{opacity:1;animation-duration:1.2s}
@keyframes sweep{to{stroke-dashoffset:-1000}}

.platforms{color:var(--slate);font-size:0.8125rem;margin-top:2px}
.platforms b{color:var(--ink);font-weight:500}

/* Report */
#report{margin:34px 0 20px;display:none}
#report.show{display:block}
.err{background:#fff;border:1.5px solid var(--rule);border-left:4px solid var(--critical);border-radius:12px;padding:16px 18px;color:var(--ink)}

.scorecard{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center;background:var(--panel);border:1.5px solid var(--rule);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.score-meta{display:contents} /* its three lines are grid items: beside the grade on a desktop, under it on a phone */
.scorecard .grade{grid-row:1/4;grid-column:1}
.score-meta h2,.score-meta .line,.score-meta .tally{grid-column:2}
.grade{width:78px;height:78px;flex:none;border-radius:16px;display:grid;place-items:center;font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:700;font-size:2.5rem;color:#fff;line-height:1}
.grade.A{background:var(--alive)} .grade.B{background:#2F7A5C} .grade.C{background:var(--medium)} .grade.D{background:var(--high)} .grade.F{background:var(--critical)}
.score-meta h2{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1.1875rem;margin:0 0 3px}
.score-meta .line{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.7813rem;color:var(--slate)}
.tally{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:0.75rem;font-weight:500;padding:3px 9px;border-radius:20px;border:1px solid var(--rule)}
.chip.critical{color:var(--critical);border-color:#eecac7;background:#fdf4f3}
.chip.high{color:var(--high);border-color:#f0dcc4;background:#fdf7f0}
.chip.medium{color:var(--medium);border-color:#ece0b3;background:#fbf8ec}
.chip.low,.chip.info{color:var(--slate);border-color:var(--rule);background:#f6f8f7}
.chip.pass{color:var(--alive);border-color:#c6e7db;background:var(--alive-soft)}

.findings{margin-top:16px;border:1.5px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--panel)}
details{border-top:1px solid var(--rule)}
details:first-child{border-top:0}
summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:15px 18px}
summary::-webkit-details-marker{display:none}
.sev-bar{width:4px;align-self:stretch;border-radius:4px;flex:none}
.sev-bar.critical{background:var(--critical)} .sev-bar.high{background:var(--high)} .sev-bar.medium{background:var(--medium)} .sev-bar.low{background:var(--low)} .sev-bar.info{background:var(--info)} .sev-bar.pass{background:var(--alive)}
.f-title{flex:1;font-weight:500;font-size:0.9688rem}
.sev-tag{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.6875rem;text-transform:lowercase;letter-spacing:.02em;padding:2px 8px;border-radius:6px;color:#fff}
.sev-tag.critical{background:var(--critical)} .sev-tag.high{background:var(--high)} .sev-tag.medium{background:var(--medium)} .sev-tag.low{background:var(--low)} .sev-tag.info{background:var(--info)} .sev-tag.pass{background:var(--alive)}
.chev{color:var(--slate);transition:transform .18s}
details[open] .chev{transform:rotate(90deg)}
.body{padding:2px 18px 18px 34px;color:var(--ink);font-size:0.9063rem}
.body .evidence{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.7813rem;background:#f3f5f4;border:1px solid var(--rule);border-radius:8px;padding:9px 11px;color:#33424a;word-break:break-word;margin:0 0 12px}
.body dt{font-weight:600;color:var(--slate);font-size:0.75rem;margin:10px 0 2px}
.body dd{margin:0}
.body dl{margin:0}
.body .wrong{margin:12px 0 0;font-size:0.8125rem;color:var(--slate)}
details.pass .f-title,details.info .f-title{color:var(--slate)}

.cta{margin-top:20px;background:var(--ink);color:#fff;border-radius:16px;padding:22px 24px}
.cta h3{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1.125rem;margin:0 0 6px}
.cta p{color:#c9d2d0;font-size:0.875rem;margin:0 0 14px;max-width:56ch}
.cta form{gap:10px}
.cta .field{background:#1b232a;border-color:#2a343c;box-shadow:none}
.cta input{color:#fff;font-family:"Inter","Inter Fallback",system-ui,sans-serif}
.cta button.scan{background:var(--alive)}
.cta button.scan:hover{background:#0aa07f}
.cta .done{color:var(--alive-soft);font-size:0.875rem}

footer{color:var(--slate);font-size:0.7813rem;padding:34px 0 46px;border-top:1px solid var(--rule);margin-top:30px}
footer p{margin:4px 0}
footer b{color:var(--ink)}
footer .spaced{margin-top:12px}

@media (prefers-reduced-motion:reduce){
  body.scanning .ekg .live{animation:none;stroke-dasharray:none}
  #report.show{animation:none}
}
#report.show{animation:rise .3s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px}
.plan{background:var(--panel);border:1.5px solid var(--rule);border-radius:16px;padding:22px 22px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.plan.featured{border-color:var(--alive);box-shadow:0 0 0 3px var(--alive-soft),var(--shadow)}
.plan h2{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1.125rem;margin:0 0 2px}
.plan .who{color:var(--slate);font-size:0.8125rem;margin:0 0 14px}
.plan .price{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:700;font-size:2.125rem;letter-spacing:-.02em;line-height:1;margin:0 0 6px}
.plan .price small{font-family:"Inter","Inter Fallback",system-ui,sans-serif;font-weight:400;font-size:0.875rem;color:var(--slate);letter-spacing:0}
.plan .early{align-self:flex-start;font-size:0.75rem;font-weight:500;color:var(--alive);background:var(--alive-soft);border-radius:20px;padding:3px 9px;margin:2px 0 12px}
.plan ul{list-style:none;padding:0;margin:4px 0 18px;font-size:0.875rem;flex:1}
.plan li{padding:5px 0 5px 22px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:11px;border-radius:50%;background:var(--alive-soft);border:1.5px solid var(--alive)}
.plan form{display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;margin:0} /* nowrap: a wrapping column stretches items to the widest item, not to the card */
.plan .field{flex:none;margin:0}
.plan input{flex:1;border:0;outline:0;background:transparent;font-family:"Inter","Inter Fallback",system-ui,sans-serif;font-size:0.9375rem;color:var(--ink);padding:13px 4px;min-width:0}
.plan button.scan{padding:13px 22px}
.plan .btn-link{display:inline-flex;justify-content:center;align-items:center;border:1.5px solid var(--ink);border-radius:12px;padding:12px 18px;font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:0.9375rem;color:var(--ink)}
.plan .btn-link:hover{background:var(--ink);color:#fff;text-decoration:none}
.plan .muted:empty{display:none}
.plan .done{color:var(--alive);font-size:0.875rem;margin:4px 0 0}
.faq{margin-top:36px}
.faq h2{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1.25rem;margin:0 0 4px}
.faq dl{margin:0}
.faq dt{font-weight:500;margin-top:16px}
.faq dd{margin:4px 0 0;color:var(--slate);font-size:0.875rem;max-width:64ch}

/* Uptime */
.status{display:inline-block;font-family:"Inter","Inter Fallback",system-ui,sans-serif;font-size:0.75rem;font-weight:500;padding:2px 8px;border-radius:20px;border:1px solid var(--rule);color:var(--slate);margin-left:8px;vertical-align:middle;white-space:nowrap}
.status.up{color:var(--alive);border-color:#c6e7db;background:var(--alive-soft)}
.status.down{color:var(--critical);border-color:#eecac7;background:#fdf4f3}
.incidents{margin-top:12px}
.incidents ul{margin:6px 0 0;padding-left:18px}
.incidents li{font-size:0.8125rem;color:var(--slate);margin:4px 0}

/* Paste-ready fixes */
.snips{margin-top:14px}
.snips-title{font-weight:600;color:var(--slate);font-size:0.75rem;margin:10px 0 6px}
.snip{border:1px solid var(--rule);border-radius:10px;margin-top:8px;background:#fff;position:relative;overflow:hidden}
.snip summary{padding:9px 12px;font-size:0.8438rem;font-weight:500;gap:8px;flex-wrap:wrap}
.snip summary::after{content:"\203A";color:var(--slate);margin-left:auto;transition:transform .18s}
.snip[open] summary::after{transform:rotate(90deg)}
.snip .file{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-weight:400;font-size:0.75rem;color:var(--slate)}
.snip pre{margin:0;padding:10px 12px;background:#f3f5f4;border-top:1px solid var(--rule);font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.7813rem;line-height:1.5;overflow-x:auto;white-space:pre;-webkit-overflow-scrolling:touch;max-width:100%}
.snip pre.plain{font-family:"Inter","Inter Fallback",system-ui,sans-serif;font-size:0.8438rem;white-space:pre-wrap;background:#fff}
.snip pre code{background:none;border:0;padding:0;font:inherit}
.snip .snote{font-size:0.7813rem;color:var(--slate);padding:8px 12px 10px;margin:0;border-top:1px solid var(--rule)}
.snip .copy{display:block;margin:0 8px 6px auto;font:inherit;font-size:0.75rem;padding:3px 9px;border:1px solid var(--rule);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.snip .copy:hover{border-color:var(--ink)}
@media (max-width:520px){
  .body{padding:2px 12px 16px 14px}
  summary{padding:14px 12px;gap:10px}
  .app-head .target .status{display:table;margin:6px 0 0}
  .more-menu{position:fixed;left:10px;right:10px;top:auto;bottom:10px;z-index:30;min-width:0;padding:8px;border-radius:18px;box-shadow:0 18px 48px rgba(15,23,20,.25)}
  .more-menu .ttl{display:block;font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:0.9375rem;padding:8px 14px 6px;overflow-wrap:anywhere}
  .more-menu button{padding:13px 14px;font-size:1rem}
  .more-menu .lbl{padding:10px 14px 2px}
  .snip .copy{padding:7px 12px;font-size:0.8125rem}
  /* The scorecard: grade and score on one row, the address and the numbers on their own lines under them. */
  .scorecard{grid-template-columns:56px 1fr;column-gap:14px;padding:16px 16px 18px}
  .scorecard .grade{grid-row:1;width:56px;height:56px;font-size:1.75rem;border-radius:12px}
  .score-meta h2{font-size:1.0625rem;margin:0}
  .score-meta .line,.score-meta .tally{grid-column:1/-1}
  .score-meta .line{margin-top:12px}
  .score-meta .line span{display:block}
  .score-meta .line .dot{display:none}
  .score-meta .tally{margin-top:8px}
  /* A finding row: the severity tag drops under a long title instead of squeezing it. */
  .findings > details > summary{display:grid;grid-template-columns:4px 1fr auto;grid-template-areas:"bar title chev" "bar tag chev";column-gap:10px;row-gap:5px;align-items:center}
  .findings > details > summary .sev-bar{grid-area:bar}
  .findings > details > summary .f-title{grid-area:title}
  .findings > details > summary .sev-tag{grid-area:tag;justify-self:start}
  .findings > details > summary .chev{grid-area:chev}
}

/* Guides */
.guide{margin-top:34px}
.guide h2{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1.3125rem;margin:30px 0 8px;letter-spacing:-.01em}
.guide h3{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1rem;margin:18px 0 6px}
.guide p,.guide li,.guide dd{font-size:0.9375rem;color:var(--ink);max-width:66ch}
.guide ul,.guide ol{padding-left:22px;margin:0}
.guide li{margin:6px 0}
.guide ol.risks li{margin:10px 0}
.guide pre.code{margin:0;padding:12px 14px;background:#f3f5f4;border:1px solid var(--rule);border-radius:10px;font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.7813rem;line-height:1.5;overflow-x:auto;white-space:pre;max-width:100%}
.guide pre.code code{background:none;border:0;padding:0;font:inherit}
.guide dl{margin:0}
.guide dt{font-weight:500;margin-top:14px}
.guide dd{margin:4px 0 0;color:var(--slate);font-size:0.875rem}
.guide .cta{margin-top:30px}
.guide-card{color:var(--ink)}
.guide-card:hover{text-decoration:none;border-color:var(--ink)}
.guide-card p{font-size:0.8438rem;color:var(--slate);margin:0}
.guide-card .who{color:var(--ink);font-weight:500;font-size:0.875rem;margin:0 0 8px}

/* What changed since the last scan */
.changes{margin:12px 12px 0;font-size:0.875rem;background:#f6f8f7;border:1px solid var(--rule);border-radius:10px;padding:10px 12px}
p.changes{padding:10px 12px;margin:12px 12px 0}
.changes .ch{display:block;margin-top:4px}
.changes .fixed{color:var(--alive)}
.changes .new{color:var(--critical)}
.hist{display:flex;flex-wrap:wrap;gap:6px;margin:10px 12px 12px}
.hist .chip{font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.7188rem}
.hist .chip.A{color:var(--alive);border-color:#c6e7db;background:var(--alive-soft)}
.hist .chip.B{color:#2F7A5C;border-color:#c6e7db;background:#eef7f2}
.hist .chip.C{color:var(--medium);border-color:#ece0b3;background:#fbf8ec}
.hist .chip.D{color:var(--high);border-color:#f0dcc4;background:#fdf7f0}
.hist .chip.F{color:var(--critical);border-color:#eecac7;background:#fdf4f3}

/* Hero: a pulse at idle, the box as the page */
.hero{position:relative}
.hero > *{position:relative;z-index:1}
.hero > .glow{position:absolute;z-index:0;left:50%;top:-40px;width:min(760px,130vw);height:440px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(14,143,113,.20),rgba(14,143,113,.07) 55%,transparent 75%);filter:blur(26px);pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-56%) translateY(0) scale(1)}to{transform:translateX(-44%) translateY(26px) scale(1.06)}}
.consent-line{margin:12px 2px 0;color:var(--slate);font-size:0.8125rem;max-width:62ch}
.scan-status{margin:10px 2px 0;font-family:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,"Courier New",monospace;font-size:0.8125rem;color:var(--alive);min-height:1.5em}
.scan-status .cancel{color:var(--slate);text-decoration:underline;text-underline-offset:2px;margin-left:6px}
.scan-status::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--alive);margin-right:8px;vertical-align:middle;animation:blink 1s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0}
.chip-link{font-size:0.8125rem;font-weight:500;padding:6px 12px;border-radius:20px;border:1px solid var(--rule);background:#fff;color:var(--ink)}
.chip-link:hover{border-color:var(--ink);text-decoration:none}
.chip-link.primary{background:var(--alive-soft);border-color:#c6e7db;color:var(--alive)}
.chips-label{color:var(--slate);font-size:0.8125rem;margin-left:6px}
.live-line{color:var(--slate);font-size:0.8125rem;margin:6px 0 0;min-height:1.4em}
.live-line:empty{display:none}
@media (prefers-reduced-motion:reduce){.hero > .glow,.ekg .live,.scan-status::before{animation:none}.ekg .live{stroke-dasharray:none}}

/* Header on small screens: the wordmark stays on one line and the links fold behind a menu button (no script needed) */
.menu-toggle{display:none}
.menu-btn{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){
  header{position:relative;flex-wrap:nowrap;gap:12px}
  .mark{white-space:nowrap;min-width:0}
  .menu-btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:1.5px solid var(--rule);border-radius:12px;background:#fff;cursor:pointer;margin-left:auto}
  .menu-btn .bars{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative}
  .menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px}
  .menu-btn .bars::before{top:-6px}
  .menu-btn .bars::after{top:6px}
  .menu-toggle{display:block;position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-toggle:focus-visible + .menu-btn{outline:2px solid var(--alive);outline-offset:2px}
  .menu-toggle:checked + .menu-btn{border-color:var(--ink)}
  header nav{display:none;position:absolute;right:0;top:calc(100% - 8px);z-index:20;flex-direction:column;align-items:stretch;gap:0;min-width:210px;background:#fff;border:1.5px solid var(--rule);border-radius:14px;box-shadow:var(--shadow);padding:6px;transform-origin:top right;opacity:0;transform:scale(.96) translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete}
  .menu-toggle:checked ~ nav{display:flex;opacity:1;transform:none}
  @starting-style{.menu-toggle:checked ~ nav{opacity:0;transform:scale(.96) translateY(-4px)}}
  .chip-link{padding:9px 14px}
  header nav a,header nav .nav-user,header nav .linklike{height:auto;padding:12px 14px;font-size:0.9375rem;color:var(--ink);border-radius:10px}
  header nav a:hover,header nav .linklike:hover{background:#f3f5f4;text-decoration:none}
  header nav .nav-cta{border:0;border-radius:10px;padding:12px 14px} /* in the sheet, a row like the others; the class outranks the row rule above, so the padding is said again */
  header nav .nav-cta:hover{background:#f3f5f4;color:var(--ink)}
}

/* The user's own settings, not a widget. Text sizes are rem, so the browser's
   font-size preference and zoom both apply. Windows high contrast mode strips
   backgrounds, so the parts drawn with colour alone get system colours; the
   "more contrast" preference darkens the quiet greys and underlines links. */
@media (forced-colors: active){
  .more-btn .dots,.menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after,.grade,.sev-bar{forced-color-adjust:none}
  .more-btn .dots{background:CanvasText;box-shadow:-7px 0 0 CanvasText,7px 0 0 CanvasText}
  .menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{background:CanvasText}
  .grade{background:CanvasText;color:Canvas}
  .sev-bar{border:1px solid CanvasText}
  .skip:focus,.more-btn:focus-visible,.menu-toggle:focus-visible + .menu-btn{outline:3px solid Highlight}
}
@media (prefers-contrast: more){
  :root{--slate:#3A474D;--rule:#8F9A96}
  a{text-decoration:underline}
}

/* Press feedback. Everything tappable answers on pointer-down, within a frame,
   the way it answers a hover on a desktop: a phone never hovers. The browser's
   own grey tap flash gives way to these states. */
a,button,summary,label{-webkit-tap-highlight-color:transparent}
.chip-link,.btn-github,.plan .btn-link,.guide-card,button.ghost,.more-btn,.menu-btn,.snip .copy{transition:transform .1s ease-out,background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.chip-link:active,.btn-github:active,.plan .btn-link:active,.guide-card:active,button.ghost:active,.more-btn:active,.menu-btn:active,.snip .copy:active{transform:scale(.97)}
.more-menu button:active,header nav a:active,header nav .linklike:active{background:#e6ebe8}
.findings > details > summary:active,.snip summary:active,.add-app summary:active{background:#f3f5f4}
a:active,.linklike:active{opacity:.6}
.chip-link:active,.btn-github:active,.plan .btn-link:active,.guide-card:active{opacity:1}

/* Menus travel a path. The dropdown grows out of its button and shrinks back
   into it; on phones the sheet rises from the bottom edge and leaves the way
   it came, its dimmer fading with it. The transition runs through display:none
   (allow-discrete), so a browser without that gets the instant menu it had. */
.more-menu{transform-origin:top right;transition:opacity .15s ease-out,transform .15s ease-out,display .15s allow-discrete}
.more-menu[hidden]{opacity:0;transform:scale(.96) translateY(-4px)}
@starting-style{.more-menu:not([hidden]){opacity:0;transform:scale(.96) translateY(-4px)}}
@media (max-width:520px){
  .more::before{content:"";position:fixed;inset:0;z-index:29;background:rgba(15,23,20,.3);opacity:0;pointer-events:none;transition:opacity .22s ease-out}
  .more.open::before{opacity:1;pointer-events:auto}
  .more-menu{transform-origin:50% 100%;transition-duration:.22s}
  .more-menu[hidden]{transform:translateY(18px)}
  @starting-style{.more-menu:not([hidden]){transform:translateY(18px)}}
}
@media (prefers-reduced-motion:reduce){
  .more-menu,.more-menu[hidden],header nav,.menu-toggle:checked ~ nav{transform:none;transition-duration:.12s}
  button.scan:active,.chip-link:active,.btn-github:active,.plan .btn-link:active,.guide-card:active,button.ghost:active,.more-btn:active,.menu-btn:active,.snip .copy:active{transform:none;opacity:.7}
}

/* Stopping an app: asked once, in place, with what goes. */
.confirm{margin-top:12px;background:#fff;border:1.5px solid var(--rule);border-left:4px solid var(--critical);border-radius:12px;padding:12px 14px;font-size:0.9063rem}
.confirm p{margin:0 0 10px}
.confirm .row{display:flex;flex-wrap:wrap;gap:8px}
.confirm .row button{min-height:40px}

/* The ask under the score: what a pull request would do, or a watch by email. */
.next{margin-top:14px;background:var(--panel);border:1.5px solid var(--rule);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.next h3{font-family:"Instrument Sans","Instrument Sans Fallback",system-ui,sans-serif;font-weight:600;font-size:1.125rem;margin:0 0 6px}
.next p{margin:0 0 12px;font-size:0.9375rem;max-width:62ch}
.next .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0}
.next .btn-github{border:1.5px solid var(--ink)}
.next .or{margin:14px 0 0;color:var(--slate);font-size:0.875rem}
.next .next-msg{color:var(--critical);font-size:0.875rem;margin:8px 0 0}
.next .next-msg:empty{display:none}
.next .done{color:var(--alive);font-size:0.875rem}
.trust{color:var(--slate);font-size:0.8125rem;margin:10px 0 0;max-width:62ch}
.cta .trust{color:#c9d2d0}
form.watch{margin-top:10px}
form.watch input{font-family:"Inter","Inter Fallback",system-ui,sans-serif;font-size:0.9375rem;padding:14px 4px}
form.watch .watch-note,form.watch .done{flex-basis:100%;margin:0}
form.watch .watch-note{color:var(--slate);font-size:0.8125rem}
.cta form.watch .watch-note{color:#c9d2d0}
form.watch .done:empty{display:none}
form.watch.sent .field,form.watch.sent button,form.watch.sent .watch-note{display:none}

/* Where the fix sits for a signed-out reader. The finding above it is complete:
   what is wrong and why it matters are never hidden. */
.locked{margin-top:12px;background:#f6f8f7;border:1.5px solid var(--rule);border-radius:12px;padding:14px 16px}
.locked p{margin:0 0 8px;font-size:0.9063rem}
.locked .lock-what{color:var(--slate);font-size:0.875rem;max-width:58ch}
.locked .btn-github{border:1.5px solid var(--ink);margin-top:2px}
.locked .trust{margin:10px 0 0}

/* What the plan allows, above the add form. */
.plan-note{margin-top:16px;background:var(--panel);border:1.5px solid var(--rule);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.plan-note p{margin:0 0 12px;font-size:0.9375rem;max-width:62ch}
.plan-note .btn-github{border:1.5px solid var(--ink)}
.plan-line{margin:16px 0 0}