/* ═══════════════════════════════════════════════════════════════════════════
   AskDoodle — a quiet metasearch engine.

   The design has to earn the tagline: no tracking cookies, no ad auction.
   So: system fonts only (no CDN, no web font, nothing that phones out),
   no scripts beyond the theme toggle, generous whitespace, one accent.

   THEMING — three blocks, in this order, and the order matters:
     1. :root                              light palette (the default)
     2. @media (prefers-color-scheme:dark) :root:not([data-theme="light"])
                                           system dark, UNLESS the visitor
                                           explicitly chose light
     3. :root[data-theme="dark"]           explicit dark, beats a light OS
   Together these make an explicit choice win in BOTH directions while an
   untouched visitor simply gets their OS preference. With JS disabled only
   block 2 applies, which is still the right answer.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #fcfcfa;
  --surface:   #ffffff;
  --raised:    #f4f3ef;
  --ink:       #14171a;
  --ink-soft:  #565f68;
  --ink-faint: #8a939c;
  --rule:      #e3e0d9;
  --rule-firm: #cbc6bb;
  --accent:    #b4531a;
  --accent-in: #ffffff;
  --link:      #1c5d8f;
  --good:      #1d6b45;
  --warn:      #8a5a08;
  --warn-bg:   #fdf4e4;
  --good-bg:   #eaf4ee;
  --focus:     #b4531a;
  --shadow:    0 1px 2px rgba(20,23,26,.04), 0 10px 30px -18px rgba(20,23,26,.28);
  /* Wordmark: a restrained vertical sheen. Light theme reads as warm metal on
     paper. i* = the "Ask" ink, a* = the "Doodle" accent gradient. */
  --wm-i1: #2b3138;
  --wm-i2: #0e1114;
  --wm-a1: #e08a4a;
  --wm-a2: #c05f22;
  --wm-a3: #97430f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0f1215;
    --surface:   #161b20;
    --raised:    #1c2228;
    --ink:       #e9ecef;
    --ink-soft:  #a7b1bb;
    --ink-faint: #6f7a85;
    --rule:      #262e35;
    --rule-firm: #3a444e;
    --accent:    #ff9256;
    --accent-in: #1a1005;
    --link:      #7fb4e0;
    --good:      #5fc79a;
    --warn:      #e5b567;
    --warn-bg:   #2a2113;
    --good-bg:   #12241c;
    --focus:     #ff9256;
    --shadow:    0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
    /* On dark the sheen inverts: bright at the top, settling into the accent.
       Reusing the light stops here goes muddy and near-invisible. */
    --wm-i1: #ffffff;
    --wm-i2: #b9c2cb;
    --wm-a1: #ffc79a;
    --wm-a2: #ff9256;
    --wm-a3: #e0702f;
  }
}

:root[data-theme="dark"] {
  --bg:        #0f1215;
  --surface:   #161b20;
  --raised:    #1c2228;
  --ink:       #e9ecef;
  --ink-soft:  #a7b1bb;
  --ink-faint: #6f7a85;
  --rule:      #262e35;
  --rule-firm: #3a444e;
  --accent:    #ff9256;
  --accent-in: #1a1005;
  --link:      #7fb4e0;
  --good:      #5fc79a;
  --warn:      #e5b567;
  --warn-bg:   #2a2113;
  --good-bg:   #12241c;
  --focus:     #ff9256;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 10px 30px -18px rgba(0,0,0,.9);
  --wm-i1: #ffffff;
  --wm-i2: #b9c2cb;
  --wm-a1: #ffc79a;
  --wm-a2: #ff9256;
  --wm-a3: #e0702f;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection { background: var(--accent); color: var(--accent-in); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-header {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: 1.35rem clamp(1rem, 5vw, 2rem);
}
.wordmark {
  display: inline-flex; align-items: flex-start; gap: 1px;
  text-decoration: none; color: var(--ink); line-height: 1;
}
.wordmark-svg {
  height: 20px; width: auto; display: block; overflow: visible;
  /* Belt and braces behind the SVG's width/height attributes: if those are
     ever stripped, aspect-ratio still gives Chromium a width to compute from
     instead of collapsing the element to 0px. 126/30 matches the viewBox. */
  aspect-ratio: 126 / 30;
  transition: filter .15s ease, opacity .15s ease;
}
/* ⚠ Gradient stops are set HERE, not as stop-color="var(...)" presentation
   attributes on the <stop> elements. var() is only resolved inside CSS
   declarations; a presentation attribute is not one, so Chromium falls back to
   the initial stop-color — BLACK — and the wordmark renders as a black slab.
   Some engines are more permissive, which is why it looked fine in Firefox.
   The custom properties remain the single source of truth for both themes;
   only the point where they are resolved has moved. */
.wordmark-svg .wm-i1 { stop-color: var(--wm-i1); }
.wordmark-svg .wm-i2 { stop-color: var(--wm-i2); }
.wordmark-svg .wm-a1 { stop-color: var(--wm-a1); }
.wordmark-svg .wm-a2 { stop-color: var(--wm-a2); }
.wordmark-svg .wm-a3 { stop-color: var(--wm-a3); }

.wordmark:hover .wordmark-svg { filter: brightness(1.1) saturate(1.08); }
/* currentColor is the fallback paint for the "Ask" half, so give the link a
   real colour to fall back TO. */
.wordmark { color: var(--ink); }
/* Windows High Contrast / forced-colors: gradient fills are overridden by the
   OS palette and a url() paint can end up painting nothing. Force plain system
   colours so the wordmark is never invisible in that mode. */
@media (forced-colors: active) {
  .wordmark-svg text, .wordmark-svg tspan { fill: CanvasText !important; }
}
/* ™ is kept as live text everywhere it appears (header and footer) so it stays
   selectable and scales with the user's font settings — never drawn into the
   SVG, never dropped. Generic rule first, header override after. */
sup.tm { font-size: .55em; font-weight: 600; line-height: 0; vertical-align: super; }
/* ⚠ .wordmark is display:inline-flex, and vertical-align has NO effect on a
   flex item — the old `vertical-align: baseline` here did nothing at all and
   the position came from the parent's align-items plus a margin. Position it
   explicitly for a flex context instead: pin to the top of the line box and
   raise it against the CAP HEIGHT of the SVG glyphs, so it hangs off the top
   right of the final letter the way a trademark should. The SVG box is 20px
   tall and the glyph caps start ~5px down, so the mark is nudged up to sit
   just above that. */
.wordmark sup.tm {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px; line-height: 1;
  vertical-align: initial;      /* inert on a flex item; stated so it is not misread as doing work */
  align-self: flex-start;
  margin-top: -1px;
  color: var(--ink-faint);
}
.wordmark:hover sup.tm { color: var(--accent); }
/* Footer wordmark stays plain text — the SVG is a header treatment only. */
.site-footer .wordmark-name { font-weight: 600; color: var(--ink-soft); }

.site-header nav {
  display: flex; align-items: center; gap: 1.25rem;
  margin-left: auto; flex-wrap: wrap;
}
.site-header nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .9rem;
  padding-bottom: 1px; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-header nav a:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }

/* ── the tiny theme toggle ───────────────────────────────────────────────── */
/* ⚠ ALWAYS RENDERED — deliberately NOT gated behind a .js class.
   It used to be `display:none` until an inline script added .js to <html>.
   That makes any upstream JS hiccup remove the control entirely rather than
   degrade it, and it means one failure produces two confusing symptoms at
   once: invisible AND unclickable. A control that is present but inert is
   easier to reason about than one that vanishes. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: 50%;
  color: var(--ink-faint); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--rule); background: var(--raised); }
/* ⚠ NO `display` HERE. This rule has specificity (0,2,0) and would beat the
   per-icon rules below at (0,1,0), forcing BOTH glyphs visible — which is
   exactly the "two buttons" symptom. The old nested :root:not() chains only
   worked because they were specific enough to outrank it; the moment the
   selectors were simplified, this rule silently won. Sizing only; which glyph
   shows is owned by .icon-sun / .icon-moon. */
.theme-toggle .icon { width: 16px; height: 16px; }
.icon-sun  { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; display: none; }
.icon-moon { fill: currentColor; stroke: none; display: block; }

/* ⚠ SIMPLIFIED. This was five overlapping blocks with nested :not() chains and
   two media queries deciding which of two glyphs to show — far too many ways
   for a browser to disagree, and it showed BOTH icons when any of them failed
   to match. The head script now always stamps data-theme, so exactly one rule
   decides. Default is the moon (light theme, click to go dark); dark swaps it.
   With JS disabled no data-theme is stamped, the moon shows, and the button is
   inert anyway. */
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ── layout ──────────────────────────────────────────────────────────────── */
main {
  width: 100%; max-width: 900px; margin: 0 auto; flex: 1;
  padding: 1rem clamp(1rem, 5vw, 2rem) 4rem;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 .5rem; font-weight: 700; }
h2 { font-size: 1.2rem; letter-spacing: -.015em; margin: 2.75rem 0 .75rem; font-weight: 650; }
p  { max-width: 66ch; }
a  { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
.lede      { font-size: 1.05rem; color: var(--ink-soft); max-width: 60ch; }
.fineprint { font-size: .82rem; color: var(--ink-faint); max-width: 74ch; }
.notice    { color: var(--ink-soft); font-style: italic; }
.error {
  color: var(--warn); background: var(--warn-bg);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: .7rem 1rem; max-width: 60ch; font-size: .92rem;
}

/* ── the hero: the search field is unmistakably the primary element ──────── */
.hero { text-align: center; padding: clamp(3rem, 12vh, 7rem) 0 2rem; }
.hero h1 {
  font-size: clamp(2.6rem, 9vw, 4rem); letter-spacing: -.04em;
  margin: 0 0 .6rem; font-weight: 750;
}
.hero .accent { color: var(--accent); }
.hero .lede { margin: 0 auto 2.5rem; }

.searchbox { display: flex; gap: .5rem; max-width: 560px; margin: 0 auto; }
.searchbox input {
  flex: 1; min-width: 0;
  padding: .9rem 1.25rem; font: inherit; font-size: 1.02rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 999px;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow);
}
.searchbox button {
  padding: .9rem 1.5rem; font: inherit; font-size: .97rem; font-weight: 600;
  color: var(--accent-in); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; cursor: pointer;
  transition: filter .15s ease;
}
.searchbox button:hover { filter: brightness(1.08); }
.searchbox.compact { margin: 0 0 2.5rem; max-width: 560px; }

/* ── results: comfortable to scan ───────────────────────────────────────── */
.results { list-style: none; padding: 0; margin: 0; }
.results li { margin-bottom: 1.9rem; max-width: 66ch; }
.result-title { font-size: 1.06rem; font-weight: 600; line-height: 1.4; text-decoration: none; display: inline-block; }
.result-title:hover { text-decoration: underline; }
.result-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; color: var(--good); margin-top: .15rem;
  overflow-wrap: anywhere;
}
.result-snippet { font-size: .93rem; color: var(--ink-soft); margin: .35rem 0 0; }

/* ── the feed ───────────────────────────────────────────────────────────── */
.feed { list-style: none; padding: 0; margin: 1rem 0 0; }
.feed li {
  padding: .55rem .2rem; border-bottom: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink-soft);
}
.feed li:last-child { border-bottom: none; }
.feed-full { counter-reset: f; max-width: 60ch; }
.feed-full li { counter-increment: f; position: relative; padding-left: 2.4rem; }
.feed-full li::before {
  content: counter(f); position: absolute; left: .3rem; top: .55rem;
  font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: var(--ink-faint);
}
.feed-teaser {
  max-width: 560px; margin: 4rem auto 0; padding: 1.25rem 1.5rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
}
.feed-teaser h2 { margin: 0 0 .25rem; font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.feed-teaser p { margin: .9rem 0 0; font-size: .87rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: 2rem clamp(1rem, 5vw, 2rem) 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint); font-size: .85rem;
}
.site-footer .copyright {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink-soft); margin: 0 0 .4rem; word-spacing: -.28em;
}
.site-footer .footer-note { margin: 0; max-width: 66ch; }
.site-footer a { color: var(--ink-soft); }

/* ── admin / analytics (same palette, so Dan's pages match) ─────────────── */
.panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-firm); border-radius: 10px;
  padding: 1.1rem 1.35rem; margin: 1.4rem 0; box-shadow: var(--shadow);
}
.panel h2 { margin-top: 0; font-size: 1.05rem; }
.panel-alert { border-left-color: var(--warn); background: var(--warn-bg); }
.panel-good  { border-left-color: var(--good); background: var(--good-bg); }

button, .btn {
  font: inherit; font-size: .88rem;
  padding: .42rem .95rem; cursor: pointer;
  color: var(--ink); background: var(--raised);
  border: 1px solid var(--rule-firm); border-radius: 7px;
  transition: border-color .15s ease;
}
button:hover { border-color: var(--accent); }
button.danger { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); font-weight: 600; }
button.link { border: none; background: none; color: var(--link); padding: 0 .25rem; text-decoration: underline; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; margin: 0 .5rem .5rem 0; }
input[type=text], input[type=search], input[type=number] {
  font: inherit; font-size: .9rem; padding: .42rem .7rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 7px;
}

.table-scroll {
  overflow-x: auto; margin: 1rem 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 10px;
}
table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 560px; }
th, td { text-align: left; padding: .55rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: ui-monospace, Menlo, monospace; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); background: var(--raised); font-weight: 600;
}
tbody tr:last-child td { border-bottom: none; }
td.num { text-align: right; font-family: ui-monospace, Menlo, monospace; }
td.num.strong { font-weight: 700; color: var(--accent); }
td.name { font-weight: 600; }
td.break, .break { overflow-wrap: anywhere; }
table.dense td { padding: .34rem .7rem; font-size: .8rem; }
.row-hidden { opacity: .5; }
.row-bot { opacity: .58; }
.admin-table td.qtext { max-width: 34rem; overflow-wrap: anywhere; }

.pill {
  display: inline-block;
  font-family: ui-monospace, Menlo, monospace; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .14rem .48rem; border-radius: 999px;
  border: 1px solid var(--rule-firm); color: var(--ink-soft); white-space: nowrap;
}
.pill.yes { color: var(--good); border-color: currentColor; }
.pill.no  { color: var(--warn); border-color: currentColor; }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); margin: 1rem 0; }
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: 1rem 1.15rem; box-shadow: var(--shadow);
}
.card-human { border-left: 3px solid var(--good); }
.card-num { font-family: ui-monospace, Menlo, monospace; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.card-label { font-size: .82rem; color: var(--ink-soft); margin-top: .15rem; }
.eu-split { display: flex; gap: 2rem; flex-wrap: wrap; margin: 1rem 0; font-size: 1rem; }
.windowbar { font-size: .86rem; }
.windowbar a { margin-right: .7rem; text-decoration: none; }
.windowbar a.current { font-weight: 700; text-decoration: underline; }
.denylist { list-style: none; padding: 0; }
.denylist li { padding: .25rem 0; border-bottom: 1px solid var(--rule); }
.bulkbar { margin: .8rem 0; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .site-header { gap: .75rem; }
  .site-header nav { gap: .9rem; }
  .hero { padding-top: 2.5rem; }
  .searchbox { flex-direction: column; }
  .searchbox input, .searchbox button { border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}