/* ===== LOOKIECOOKIE — Bauhaus brutalist cookie scanner ===== */
:root {
  --ink: #0a0a0a;
  --paper: #f4f1ea;
  --paper-2: #e9e5d8;
  --red: #d62828;
  --bright-red: #ff1a1a;
  --blue: #1d3557;
  --yellow: #ffc857;
  --green: #2d7058;
  --bw: 4px;
  --cat-necessary: #2d7058;
  --cat-functional: #1d3557;
  --cat-analytics: #ffc857;
  --cat-marketing: #d62828;
  --cat-unclassified: #8a8578;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; overflow-x: clip; }
html, body { margin: 0; padding: 0; color: var(--ink); }
body {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
  min-height: 100dvh;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
.visually-hidden { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
a { color: var(--blue); }

/* ===== topbar ===== */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: var(--bw) solid var(--ink); padding: 14px 16px; }
.brand h1 { font-family: "Archivo Black", system-ui, sans-serif; font-size: clamp(30px, 8vw, 44px); line-height: .9; letter-spacing: -.025em; margin: 0; }
.brand .tag { margin: 4px 0 0; font-size: clamp(10px, 2.6vw, 12px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .72; }
.brand .tag .by { opacity: .55; margin-left: 4px; }
.brand .tag .by a { color: var(--bright-red); text-decoration: none; font-weight: 800; opacity: 1; }
.brand .tag .by a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) { .topbar { padding: 18px 24px; } }

/* ===== workspace ===== */
.workspace { max-width: 920px; margin: 0 auto; padding: 24px 16px 80px; }
@media (min-width: 720px) { .workspace { padding: 32px 24px 120px; } }

.purpose { margin: 0 0 22px; padding: 14px 18px; background: var(--yellow); border: var(--bw) solid var(--ink); font: 600 clamp(12px, 2.4vw, 14px)/1.45 "Space Grotesk", sans-serif; letter-spacing: .01em; }
.purpose strong { font-family: "Archivo Black", "Space Grotesk", sans-serif; font-weight: 900; letter-spacing: .03em; }

/* ===== lookup form ===== */
.lookup { display: flex; gap: 0; margin: 0 0 10px; }
.url { flex: 1; min-width: 0; font: 700 clamp(15px, 3.6vw, 19px)/1 "Space Grotesk", sans-serif; padding: 16px 16px; border: var(--bw) solid var(--ink); border-right: 0; background: #fff; color: var(--ink); border-radius: 0; outline: none; }
.url::placeholder { color: #9a958a; font-weight: 500; }
.url:focus { background: var(--paper-2); }
.go-btn { font: 800 clamp(13px, 3vw, 16px)/1 "Space Grotesk", sans-serif; letter-spacing: .08em; padding: 16px 20px; background: var(--ink); color: var(--paper); border: var(--bw) solid var(--ink); cursor: pointer; white-space: nowrap; transition: transform 100ms ease, box-shadow 100ms ease, background 100ms ease; }
.go-btn:hover { background: var(--bright-red); }
.go-btn:active { transform: translate(2px, 2px); }
.go-btn[disabled] { opacity: .55; cursor: default; }

.examples { margin: 0 0 24px; font-size: 12px; font-weight: 600; letter-spacing: .03em; opacity: .7; }
.examples button { font: inherit; background: none; border: 0; color: var(--blue); cursor: pointer; padding: 0 2px; text-decoration: underline; text-underline-offset: 2px; }
.examples button:hover { color: var(--bright-red); }

/* ===== verdict banner ===== */
.verdict { border: var(--bw) solid var(--ink); padding: 16px 18px; margin: 0 0 22px; font-weight: 700; }
.verdict.clean { background: var(--green); color: #fff; }
.verdict.warn { background: var(--yellow); }
.verdict.bad { background: var(--red); color: #fff; }
.verdict .vhead { font-family: "Archivo Black", sans-serif; font-size: clamp(16px, 4vw, 22px); letter-spacing: -.01em; margin: 0 0 4px; }
.verdict .vsub { font-size: 13px; font-weight: 600; opacity: .9; }

/* ===== summary chips ===== */
.summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.chip { border: var(--bw) solid var(--ink); background: #fff; padding: 10px 14px; min-width: 92px; }
.chip .n { font-family: "Archivo Black", sans-serif; font-size: 26px; line-height: 1; display: block; }
.chip .k { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; opacity: .8; }
.chip.necessary { border-color: var(--cat-necessary); } .chip.necessary .n { color: var(--cat-necessary); }
.chip.functional { border-color: var(--cat-functional); } .chip.functional .n { color: var(--cat-functional); }
.chip.analytics { border-color: #c79a1f; } .chip.analytics .n { color: #b8902f; }
.chip.marketing { border-color: var(--cat-marketing); } .chip.marketing .n { color: var(--cat-marketing); }

/* ===== flags ===== */
.flags { list-style: none; margin: 0 0 26px; padding: 0; }
.flags li { display: flex; gap: 12px; align-items: flex-start; border: var(--bw) solid var(--ink); border-left-width: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
.flags li.bad { border-left-color: var(--red); }
.flags li.warn { border-left-color: var(--yellow); }
.flags li.good { border-left-color: var(--green); }
.flags li .tick { font-family: "Archivo Black", sans-serif; font-size: 14px; }
.flags li.bad .tick { color: var(--red); } .flags li.warn .tick { color: #b8902f; } .flags li.good .tick { color: var(--green); }

/* ===== section blocks ===== */
.block { margin: 0 0 28px; }
.block > h2 { font-family: "Archivo Black", sans-serif; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; padding-bottom: 6px; border-bottom: var(--bw) solid var(--ink); }
.block .count { color: var(--bright-red); }

/* ===== cookie table ===== */
.ctable { width: 100%; border-collapse: collapse; border: var(--bw) solid var(--ink); background: #fff; font-size: 13px; }
.ctable th { font: 800 11px/1 "Space Grotesk", sans-serif; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 10px 10px; background: var(--ink); color: var(--paper); }
.ctable td { padding: 9px 10px; border-top: 2px solid var(--paper-2); vertical-align: middle; }
.ctable tr:nth-child(even) td { background: #faf8f2; }
.ctable .cname { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; }
.ctable .cvendor { font-size: 12px; opacity: .8; }
.pill { display: inline-block; font: 800 10px/1 "Space Grotesk", sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border: 2px solid var(--ink); }
.pill.necessary { background: var(--cat-necessary); color: #fff; border-color: var(--cat-necessary); }
.pill.functional { background: var(--cat-functional); color: #fff; border-color: var(--cat-functional); }
.pill.analytics { background: var(--cat-analytics); color: var(--ink); border-color: #c79a1f; }
.pill.marketing { background: var(--cat-marketing); color: #fff; border-color: var(--cat-marketing); }
.pill.unclassified { background: var(--paper-2); color: var(--ink); }
.pill.third { background: #fff; color: var(--red); border-color: var(--red); }
.pill.first { background: #fff; color: var(--ink); }
.flag-na { opacity: .4; }

/* ===== tracker list ===== */
.tlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tlist li { border: var(--bw) solid var(--ink); background: #fff; padding: 12px 14px; }
.tlist .tname { font-weight: 800; }
.tlist .tcookies { font-family: "JetBrains Mono", monospace; font-size: 11px; opacity: .75; margin-top: 5px; word-break: break-all; }

/* ===== loading / empty ===== */
.loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 50px 0; }
.loading-sq { width: 40px; height: 40px; background: var(--bright-red); border: var(--bw) solid var(--ink); animation: spin 900ms steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { font-weight: 700; letter-spacing: .04em; }
.empty { padding: 40px 0; }
.empty p { margin: 0; font-weight: 700; }
.empty .sub { font-weight: 500; opacity: .65; margin-top: 6px; font-size: 14px; }

.scan-note { font-size: 12px; line-height: 1.5; opacity: .7; border-left: var(--bw) solid var(--paper-2); padding-left: 12px; margin: 8px 0 0; }

/* ===== footer ===== */
.foot { border-top: var(--bw) solid var(--ink); padding: 22px 16px 60px; max-width: 920px; margin: 0 auto; font-size: 13px; line-height: 1.55; }
.foot strong { font-weight: 800; }
@media (min-width: 720px) { .foot { padding: 26px 24px 80px; } }

/* ===== toast ===== */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-weight: 700; padding: 12px 18px; border: var(--bw) solid var(--ink); z-index: 50; }

/* ── cross-promo: the rest of the Solarise tool suite (header strip) ── */
.suite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(127,127,127,.28); font-family: inherit; }
.suite-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-right: 2px; }
.suite a { font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--ink, #1a1a1a); border: 1px solid var(--ink, #1a1a1a); border-radius: 2px; padding: 3px 9px; line-height: 1.4; }
.suite a:hover { background: var(--accent, #c4513a); border-color: var(--accent, #c4513a); color: #fff; }

/* BETA label + limitations list (honest scope: HTTP-level scan) */
.beta {
  display: inline-block;
  font-family: 'Archivo Black', 'Space Grotesk', sans-serif;
  font-size: .42em;
  letter-spacing: .04em;
  background: #ffc857;
  color: #0a0a0a;
  border: 2px solid #0a0a0a;
  padding: 1px 6px;
  vertical-align: middle;
  transform: translateY(-3px);
}
.foot .beta { font-size: .72rem; transform: none; padding: 0 5px; margin: 0 2px; }
ul.limits { margin: 8px 0 12px; padding-left: 20px; }
ul.limits li { margin: 4px 0; line-height: 1.5; }

/* unclassified summary chip (so chip counts add up to the cookie total) */
.chip.unclassified { border-color: var(--cat-unclassified); }
.chip.unclassified .n { color: var(--cat-unclassified); }
/* per-results beta disclaimer (yellow accent so it's noticed, not buried) */
.scan-beta { font-size: 12px; line-height: 1.5; opacity: .85; border-left: var(--bw) solid var(--yellow); padding-left: 12px; margin: 10px 0 0; }
.scan-beta strong { font-family: "Archivo Black", "Space Grotesk", sans-serif; letter-spacing: .03em; }