/* Nexthosting Logs — quiet by design: one text face (DM Sans), one monospace (JetBrains Mono), the log in the middle.
   Light and dark follow the system setting. Colour only marks the kind of a log line. */
@font-face{font-family:"NH Sans";src:url(/assets/fonts/dm-sans-v17-latin-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NH Sans";src:url(/assets/fonts/dm-sans-v17-latin-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NH Sans";src:url(/assets/fonts/dm-sans-v17-latin-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NH Mono";src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap;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:"NH Mono";src:url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* light */
  --bg:#f3f4f6;--sheet:#ffffff;--sheet-2:#f8f9fa;--line:#e1e3e8;--line-2:#cfd3da;
  --text:#1c1e23;--text-2:#5a5f6b;--text-3:#7f8490;
  --accent:#5143d9;--accent-hover:#4436c4;--accent-ink:#4033b5;--on-accent:#ffffff;
  --e:#a23434;--e-bg:#fbefef;--w:#7d5a10;--w-bg:#fbf5e7;--p:#24648a;--mask-bg:#eceef2;--hit:#ffe08a;
  --gutter:#9ca1ab;
  --font:"NH Sans","DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"NH Mono","JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:8px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141518;--sheet:#1b1c20;--sheet-2:#202226;--line:#2a2c32;--line-2:#383b43;
    --text:#e4e5e8;--text-2:#a0a4ad;--text-3:#7a7e88;
    --accent:#5143d9;--accent-hover:#5d50e6;--accent-ink:#a59cf5;--on-accent:#ffffff;
    --e:#e69292;--e-bg:rgba(230,120,120,.08);--w:#d9b36b;--w-bg:rgba(217,179,107,.07);--p:#8fbcd9;--mask-bg:rgba(255,255,255,.08);--hit:#e9c46a;
    --gutter:#585c66;
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:8px 12px;border-radius:var(--r);background:var(--accent);color:var(--on-accent)}
.skip:focus{top:12px}
.icon{flex:none}
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 32px}
main{flex:1;min-width:0;display:flex;flex-direction:column;outline:none}

/* ---------- head ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;padding-bottom:22px}
.mark{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--text);text-decoration:none}
.mark img{display:block;height:28px;width:auto}
.mark span{font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--text-2);padding-left:12px;border-left:1px solid var(--line-2);line-height:22px}
@media (prefers-color-scheme:light){.mark img,.foot img{filter:invert(1)}}
.claim{margin:0;text-align:right;font-size:14px;font-weight:400;color:var(--text-2);line-height:1.4;letter-spacing:0}
.claim b{display:block;font-size:17px;font-weight:500;color:var(--text)}

/* ---------- foot ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:28px;font-size:13.5px;color:var(--text-3)}
.foot ul{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot a{display:inline-flex;align-items:center;min-height:32px;color:var(--text-2);text-decoration:none}
.foot a:hover{color:var(--text);text-decoration:underline}
.foot .lang a[aria-current]{color:var(--text);font-weight:700}
.foot .by{display:flex;align-items:center;gap:8px;color:var(--text-3)}
.foot img{height:16px;width:auto;opacity:.8}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 22px;border:0;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:15px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn[disabled]{opacity:.6;cursor:progress}
.textlink{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;color:var(--text-2);font-size:14px;cursor:pointer;text-decoration:none}
.textlink:hover{color:var(--text);text-decoration:underline;text-underline-offset:.2em}
.textlink.danger{color:var(--e)}
@media (pointer:coarse){.textlink{min-height:44px}}

/* ---------- paste page: the field already looks like the log it will become ---------- */
.paste{flex:1;display:flex;flex-direction:column;min-height:0}
.sheet{position:relative;flex:1;display:flex;min-height:max(380px,min(calc(100vh - 250px),820px));border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);overflow:hidden}
.sheet:focus-within{border-color:var(--line-2)}
.gutter{flex:none;margin:0;padding:14px 12px 14px 0;width:5.5ch;text-align:right;font:400 13px/1.6 var(--mono);color:var(--gutter);background:var(--sheet-2);border-right:1px solid var(--line);overflow:hidden;user-select:none;-webkit-user-select:none;white-space:pre;box-sizing:content-box}
.sheet textarea{flex:1;min-width:0;margin:0;padding:14px 16px;border:0;outline:none;resize:none;background:transparent;color:var(--text);font:400 13px/1.6 var(--mono);white-space:pre;overflow:auto;tab-size:4}
.blank{position:absolute;inset:0 0 0 calc(5.5ch + 13px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;pointer-events:none;text-align:center;padding:24px}
.blank p:first-child{font-size:19px;font-weight:500;color:var(--text)}
.blank .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:0 10px;pointer-events:auto}
.blank .acts > :not([hidden]) ~ *::before{content:"·";margin-right:10px;color:var(--text-3)}
.blank .acts span{color:var(--text-3);font-size:14px;display:inline-flex;align-items:center;min-height:32px}
.sheet.is-drop{border-color:var(--accent-ink);border-style:dashed}
.sheet.is-drop .blank{display:flex!important;background:color-mix(in srgb,var(--sheet) 90%,transparent)}
.under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:12px}
.under .stats{font-size:13.5px;color:var(--text-3)}
.under .stats.is-over{color:var(--w)}
.paste-error{margin-top:10px;color:var(--e);font-size:14px}
.note{margin-top:10px;max-width:110ch;font-size:13px;color:var(--text-3)}

/* ---------- text below the field (what it does, what it finds, questions) ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px 72px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.about h2{font-size:16px;font-weight:700;margin:0 0 8px}
.about p,.about li,.about dd{font-size:15px;color:var(--text-2);max-width:68ch}
.about p+h2,.about ul+h2{margin-top:28px}
.dash li{position:relative;padding-left:18px;margin-top:6px}
.dash li::before{content:"–";position:absolute;left:0;color:var(--text-3)}
.faq dt{font-weight:500;color:var(--text);margin-top:18px}
.faq dt:first-child{margin-top:0}
.faq dd{margin:4px 0 0}
.about .shop{grid-column:1/-1;margin-top:32px;font-size:14px}
.about .shop a{display:inline-flex;align-items:center;min-height:32px}

/* ---------- viewer ---------- */
.doc{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 32px;padding-bottom:16px}
.doc h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
.doc h1 .id{margin-left:10px;font:400 14px var(--mono);color:var(--text-3);letter-spacing:0}
.meta{margin-top:4px;font-size:14px;color:var(--text-2)}
.meta span+span::before{content:" · ";color:var(--text-3)}
.facts{margin-top:4px;font-size:12.5px;color:var(--text-3)}
.facts span+span::before{content:" · "}
.facts b{font-weight:400;color:var(--text-2)}
.doc-acts{display:flex;flex-wrap:wrap;gap:0 20px;padding-top:2px}
.trunc{margin-bottom:14px;font-size:14px;color:var(--w)}

.report{border-top:1px solid var(--line);margin-bottom:18px}
.report h2{font-size:13px;font-weight:700;color:var(--text-2);padding:14px 0 4px}
.finding{display:grid;grid-template-columns:6.5rem minmax(0,1fr) auto;gap:2px 20px;padding:11px 0;border-bottom:1px solid var(--line)}
.finding .kind{font-size:13.5px;font-weight:500;padding-top:1px}
.finding.error .kind{color:var(--e)}
.finding.warn .kind{color:var(--w)}
.finding.info .kind{color:var(--text-3)}
.finding .what{font-weight:500}
.finding .what .n{font-weight:400;color:var(--text-3)}
.finding .msg{margin-top:2px;font:400 12.5px/1.5 var(--mono);color:var(--text-2);overflow-wrap:anywhere}
.finding .hint{margin-top:3px;font-size:14px;color:var(--text-2);max-width:92ch}
.finding .more{margin-top:3px;display:flex;flex-wrap:wrap;gap:0 16px;font-size:13px}
.finding .more .mono{font-size:12px;color:var(--text-3);overflow-wrap:anywhere;min-width:0}
.finding .where{font-size:13px;color:var(--text-3);text-align:right;white-space:nowrap;padding-top:2px}
.finding .where a{color:var(--text-2)}
.infos summary{padding:10px 0;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--line);cursor:pointer}
.infos summary:hover{color:var(--text)}
.infos[open] summary{color:var(--text)}
.calm{padding:12px 0;font-size:14px;color:var(--text-2);border-bottom:1px solid var(--line)}
.privacy{padding-top:10px;font-size:13px;color:var(--text-3)}

.bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding:8px 0;background:var(--bg)}
.filters{display:flex;flex-wrap:wrap;gap:0 18px}
.filters button{display:inline-flex;align-items:baseline;gap:6px;min-height:34px;padding:0;border:0;border-bottom:2px solid transparent;background:none;color:var(--text-2);font-size:14px;cursor:pointer;align-items:center}
.filters button .num{font-size:12.5px;color:var(--text-3)}
.filters button:hover{color:var(--text)}
.filters button[aria-pressed=true]{color:var(--text);border-bottom-color:currentColor}
.filters button[disabled]{opacity:.45;cursor:default}
.filters .f-e{color:var(--e)}.filters .f-w{color:var(--w)}.filters .f-p{color:var(--p)}
.filters .f-e:hover{color:var(--e)}.filters .f-w:hover{color:var(--w)}.filters .f-p:hover{color:var(--p)}
.search{display:flex;align-items:center;gap:8px;flex:1;min-width:200px;max-width:380px;margin-left:auto;border-bottom:1px solid var(--line-2)}
.search .icon{color:var(--text-3)}
.search input{flex:1;min-width:0;height:34px;border:0;outline:none;background:transparent;color:var(--text);font:inherit;font-size:14px}
.search input::placeholder{color:var(--text-3)}
.search input::-webkit-search-cancel-button{opacity:.5}
.search:focus-within{border-bottom-color:var(--accent-ink)}
.search .hits{font-size:12.5px;color:var(--text-3);white-space:nowrap}
.wraptoggle[aria-pressed=false]{color:var(--text-3)}

.log{border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);font:400 13px/1.6 var(--mono);color:var(--text);padding:10px 0;overflow-x:auto;margin-bottom:8px}
.chunk.lazy{content-visibility:auto;contain-intrinsic-size:auto 8320px}
.log.is-filtered .chunk.lazy{content-visibility:visible}
.l{display:flex;min-width:0}
.n{flex:none;width:7ch;padding:0 14px 0 6px;text-align:right;color:var(--gutter);text-decoration:none;user-select:none;-webkit-user-select:none}
.n::before{content:attr(data-n)}
.n:hover{color:var(--text-2)}
.t{flex:1;min-width:0;padding-right:16px;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
.log.nowrap .t{white-space:pre;overflow-wrap:normal}
.log.nowrap .l{width:max-content;min-width:100%}
.l.e{background:var(--e-bg)}.l.e .t{color:var(--e)}
.l.w{background:var(--w-bg)}.l.w .t{color:var(--w)}
.l.p .t{color:var(--p)}
.l:target,.l.is-jump{background:color-mix(in srgb,var(--accent) 16%,transparent)!important}
.l:target .n,.l.is-jump .n{color:var(--text)}
.ts{color:var(--text-3)}
.mk{border-radius:2px;background:var(--mask-bg)}
mark{background:var(--hit);color:#1c1e23;border-radius:2px}
.log[data-filter=e] .l:not(.e),.log[data-filter=w] .l:not(.w),.log[data-filter=p] .l:not(.p),.log[data-filter=i] .l:not(.i){display:none}
.l.miss{display:none}
.log-empty,.log-nothing{padding:20px 24px;color:var(--text-3);font-family:var(--font);font-size:14px}

.toast-region{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;display:grid;gap:8px;width:max-content;max-width:calc(100vw - 32px)}
.toast{padding:10px 16px;border-radius:var(--r);background:var(--text);color:var(--bg);font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.18)}

.gone{flex:1;padding:12vh 0;display:grid;align-content:start;gap:12px;max-width:640px}
.gone h1{font-size:24px}
.gone p{color:var(--text-2)}
.gone .btn{justify-self:start;margin-top:8px}

@media (max-width:900px){
  .finding{grid-template-columns:minmax(0,1fr)}
  .finding .where{text-align:left;order:2}
  .top{flex-wrap:wrap;gap:6px 24px}
  .claim{text-align:left;flex-basis:100%}
  .claim b{font-size:16px}
  .about{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .top{padding-top:18px;padding-bottom:14px}
  .mark img{height:20px}
  .mark span{font-size:17px}
  .sheet{min-height:min(62vh,560px)}
  .under .btn{width:100%}
  .doc h1 .id{display:block;margin:2px 0 0}
  .search{max-width:none;flex-basis:100%;margin-left:0;order:3}
  .log{margin-left:-16px;margin-right:-16px;border-radius:0;border-left:0;border-right:0;font-size:12px}
  .n{width:5.5ch;padding:0 10px 0 2px}
  .foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
