/* AIME dark theme (2026-09-28).
   Active when <html data-theme="dark">. js/theme-init (inline in every page head) sets it before the page paints:
   the visitor's saved choice from the header switch, otherwise the device setting (prefers-color-scheme).
   Every rule is scoped to html[data-theme="dark"], so the light site is unchanged. */
html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #0b1220; --d-surface: #121a2b; --d-surface-2: #182236; --d-line: #26324a; --d-line-2: #33415c;
  --d-ink: #e7ecf5; --d-ink-2: #c6cedd; --d-muted: #98a3b8; --d-blue: #60a5fa; --d-blue-2: #93c5fd; --d-blue-soft: #16243f;
  /* homepage variables */
  --ink: var(--d-ink); --ink-2: var(--d-ink-2); --muted: var(--d-muted); --line: var(--d-line); --card: var(--d-surface);
  --blue: #3b82f6; --blue-600: #93c5fd; --blue-50: var(--d-blue-soft); --blue-100: #1e3a6e; --band: #172554;
}
html[data-theme="dark"] body { background: var(--d-bg) !important; color: var(--d-ink); }
html[data-theme="dark"] a:hover { color: var(--d-blue-2); }

/* ---- shared header (tools/site-header.js) ---- */
html[data-theme="dark"] .ah-header { background: rgba(11, 18, 32, .94); border-bottom-color: var(--d-line); }
html[data-theme="dark"] .ah-brand, html[data-theme="dark"] .ah-brand:hover { color: var(--d-ink); }
html[data-theme="dark"] .ah-nav a, html[data-theme="dark"] .ah-mobile a { color: var(--d-ink-2); }
html[data-theme="dark"] .ah-nav a:hover, html[data-theme="dark"] .ah-mobile a:hover,
html[data-theme="dark"] .ah-nav a[aria-current="page"], html[data-theme="dark"] .ah-mobile a[aria-current="page"] { color: var(--d-blue); }
html[data-theme="dark"] .ah-search { background: var(--d-surface); border-color: var(--d-line-2); }
html[data-theme="dark"] .ah-search:focus-within { background: var(--d-surface-2); border-color: var(--d-blue); }
html[data-theme="dark"] .ah-search input { color: var(--d-ink); }
html[data-theme="dark"] .ah-search svg { stroke: var(--d-muted); }
html[data-theme="dark"] .ah-menu { background: var(--d-surface-2); }
html[data-theme="dark"] .ah-menu svg { stroke: var(--d-ink); }
html[data-theme="dark"] .ah-mobile { background: var(--d-bg); border-top-color: var(--d-line); }
html[data-theme="dark"] .ah-mobile a { border-bottom-color: var(--d-line); }

/* ---- page title block (tools/page-title.js) ---- */
html[data-theme="dark"] .pt-band { background: linear-gradient(180deg, #0f1a33 0%, rgba(11, 18, 32, 0) 100%); }
html[data-theme="dark"] .pt-card { background: var(--d-surface); border-color: var(--d-line); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .pt-title { color: var(--d-ink); }
html[data-theme="dark"] .pt-sub { color: var(--d-ink-2); }
html[data-theme="dark"] .pt-eyebrow, html[data-theme="dark"] .pt-eyebrow a { color: var(--d-blue); }
html[data-theme="dark"] .pt-meta { background: var(--d-blue-soft); color: var(--d-blue-2); }

/* ---- homepage (index.html) ---- */
html[data-theme="dark"] .hero, html[data-theme="dark"] .feat-card, html[data-theme="dark"] .job-tile, html[data-theme="dark"] .tabs,
html[data-theme="dark"] .shelf-card, html[data-theme="dark"] .kit-card, html[data-theme="dark"] .week-card, html[data-theme="dark"] .recent,
html[data-theme="dark"] .story-card { background: var(--d-surface); border-color: var(--d-line); box-shadow: none; }
html[data-theme="dark"] .job-tile:hover, html[data-theme="dark"] .recent-row:hover { background: var(--d-surface-2); }
html[data-theme="dark"] .job-tile:hover .job-icon { background: var(--d-bg); }
html[data-theme="dark"] .search-box { background: var(--d-bg); border-color: var(--d-line-2); }
html[data-theme="dark"] .popular a, html[data-theme="dark"] .chip-gray, html[data-theme="dark"] .story-src { background: var(--d-surface-2); color: var(--d-ink-2); }
html[data-theme="dark"] .popular span, html[data-theme="dark"] .recent-date, html[data-theme="dark"] .footer-note,
html[data-theme="dark"] .feat-card .feat-job, html[data-theme="dark"] .feat-card .paid-note { color: var(--d-muted); }
html[data-theme="dark"] .chip { color: var(--d-blue-2); }
html[data-theme="dark"] .chip-violet { background: #241a3d; color: #c4b5fd; }
html[data-theme="dark"] .collage-shot { border-color: #334155; background: #334155; box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }   /* 2026-09-30: solid slate frame */
html[data-theme="dark"] .shelf-visual, html[data-theme="dark"] .week-shot { background: var(--d-surface-2); }
html[data-theme="dark"] .shelf-logo-panel { background: linear-gradient(135deg, #16213a, #10233a); }
html[data-theme="dark"] .shelf-badge { background: var(--d-surface); color: var(--d-ink); }
html[data-theme="dark"] .stage-proven { background: #12331f; color: #86efac; }
html[data-theme="dark"] .stage-new { background: #3a2410; color: #fdba74; }
html[data-theme="dark"] .recent-row { background: var(--d-surface-2); }
html[data-theme="dark"] .kit-who { color: #c4b5fd; }
html[data-theme="dark"] .feat-dot { background-color: #33415c; }
html[data-theme="dark"] .site-footer { background: rgba(18, 26, 43, .7); border-top-color: var(--d-line); }
/* logos stay on a white chip so dark logos remain readable */
html[data-theme="dark"] .feat-logo-sm, html[data-theme="dark"] .shelf-logo, html[data-theme="dark"] .kit-logo,
html[data-theme="dark"] .week-logo, html[data-theme="dark"] .recent-logo { border-color: var(--d-line); background: #fff; }

/* ---- Spotlight pages (spotlight/view.html, design B) ---- */
html[data-theme="dark"] .sv { color: var(--d-ink); }
html[data-theme="dark"] .sv-nav { background: var(--d-bg); border-bottom-color: var(--d-line); }
html[data-theme="dark"] .sv-nav-btn { background: var(--d-surface); border-color: var(--d-line); color: var(--d-ink); }
html[data-theme="dark"] .sv-nav-btn:hover { color: var(--d-ink); border-color: #3b82f6; }
html[data-theme="dark"] .sv-all { background: var(--d-blue-soft); color: var(--d-blue-2); }
html[data-theme="dark"] .sv-logo, html[data-theme="dark"] .sv-alt-logo img, html[data-theme="dark"] .sv-nav-logo img { border-color: var(--d-line); }
html[data-theme="dark"] .sv-chip { background: var(--d-surface-2); color: var(--d-ink-2); }
html[data-theme="dark"] .sv-chip.green { background: #12331f; color: #86efac; }
html[data-theme="dark"] .sv-chip.amber { background: #3a2a0c; color: #fcd34d; }
html[data-theme="dark"] .sv-chip.blue { background: var(--d-blue-soft); color: var(--d-blue-2); }
html[data-theme="dark"] .sv-score { background: var(--d-surface); }
/* the featured (partner) band keeps its own colours */
html[data-theme="dark"] .sv-featured .sv-chip, html[data-theme="dark"] .sv-featured .sv-chip.green, html[data-theme="dark"] .sv-featured .sv-chip.blue,
html[data-theme="dark"] .sv-featured .sv-chip.amber { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-theme="dark"] .sv-featured .sv-score { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .sv-score b { color: var(--d-ink); }
html[data-theme="dark"] .sv-stage, html[data-theme="dark"] .sv-glance, html[data-theme="dark"] .sv-feat, html[data-theme="dark"] .sv-alt { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .sv-thumb { background: var(--d-surface); color: var(--d-ink); }
html[data-theme="dark"] .sv-thumb:hover { background: var(--d-surface-2); }
html[data-theme="dark"] .sv-thumb.active { background: var(--d-blue-soft); }
html[data-theme="dark"] .sv-thumb-img { border-color: var(--d-line); }
html[data-theme="dark"] .sv-thumb-text b, html[data-theme="dark"] .sv-alt-text b { color: var(--d-ink); }
html[data-theme="dark"] .sv-about p, html[data-theme="dark"] .sv-about p.words b, html[data-theme="dark"] .sv-feat p, html[data-theme="dark"] .sv-ready div span { color: var(--d-ink-2); }
html[data-theme="dark"] .sv-row { border-top-color: var(--d-line); }
html[data-theme="dark"] .sv-feat-i, html[data-theme="dark"] .sv-ready, html[data-theme="dark"] .sv-basic-note { background: var(--d-blue-soft); }
html[data-theme="dark"] .sv-basic-note { color: var(--d-blue-2); }
html[data-theme="dark"] .sv-basic-note a { color: var(--d-blue); }

/* ---- Tailwind-built pages (Find, Browse, Spotlight gallery, blog, legal) ---- */
html[data-theme="dark"] .bg-white { background-color: var(--d-surface) !important; }
html[data-theme="dark"] .bg-gray-50 { background-color: var(--d-bg) !important; }
html[data-theme="dark"] .bg-gray-100 { background-color: var(--d-surface-2) !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--d-line) !important; }
html[data-theme="dark"] .bg-blue-50 { background-color: var(--d-blue-soft) !important; }
html[data-theme="dark"] .bg-blue-100 { background-color: #1e3a6e !important; }
/* 2026-10-05: light gradient boxes (legal Core Statement, Contact Us card) kept their light gradient while their text turned light */
html[data-theme="dark"] [class*="bg-gradient-to"].from-blue-50 { background-image: none !important; background-color: var(--d-blue-soft) !important; }
html[data-theme="dark"] [class*="bg-gradient-to"].from-gray-50 { background-image: none !important; background-color: var(--d-surface-2) !important; border-color: var(--d-line) !important; }
html[data-theme="dark"] .bg-green-100 { background-color: #12331f !important; }
html[data-theme="dark"] .bg-orange-50, html[data-theme="dark"] .bg-orange-100 { background-color: #3a2410 !important; }
html[data-theme="dark"] .bg-yellow-50, html[data-theme="dark"] .bg-amber-50 { background-color: #33290c !important; }
html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800 { color: var(--d-ink) !important; }
html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-600 { color: var(--d-ink-2) !important; }
html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: var(--d-muted) !important; }
html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800 { color: var(--d-blue) !important; }
html[data-theme="dark"] .text-green-800, html[data-theme="dark"] .text-green-700 { color: #86efac !important; }
html[data-theme="dark"] .text-orange-800, html[data-theme="dark"] .text-orange-700 { color: #fdba74 !important; }
html[data-theme="dark"] .border-gray-100, html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300 { border-color: var(--d-line) !important; }
html[data-theme="dark"] .divide-gray-100 > * + *, html[data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--d-line) !important; }
html[data-theme="dark"] .hover\:bg-gray-50:hover, html[data-theme="dark"] .hover\:bg-gray-100:hover, html[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--d-surface-2) !important; }
html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow-lg { box-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--d-surface); color: var(--d-ink); border-color: var(--d-line-2); }
html[data-theme="dark"] .search-box input, html[data-theme="dark"] .ah-search input { background-color: transparent; }
/* small tool logos (Tailwind pages) sit on white so dark lettering stays readable */
html[data-theme="dark"] img.w-8, html[data-theme="dark"] img.w-10, html[data-theme="dark"] img.w-12, html[data-theme="dark"] img.w-14, html[data-theme="dark"] img.w-16 { background-color: #fff; }
html[data-theme="dark"] ::placeholder { color: #7c889e; }
html[data-theme="dark"] .prose, html[data-theme="dark"] .prose p, html[data-theme="dark"] .prose li { color: var(--d-ink-2); }
html[data-theme="dark"] .prose h1, html[data-theme="dark"] .prose h2, html[data-theme="dark"] .prose h3, html[data-theme="dark"] .prose strong { color: var(--d-ink); }

/* ---- header theme switch + logo swap ---- */
.ah-theme { width: 40px; height: 40px; flex-shrink: 0; border: 1.5px solid #d1d5db; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ah-theme:hover { border-color: #2563eb; }
.ah-theme:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ah-theme svg { width: 18px; height: 18px; fill: none; stroke: #374151; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ah-theme .i-sun { display: none; }
/* hover bubble: "Go to Light Theme" / "Go to Dark Theme" (2026-09-28) */
.ah-theme { position: relative; }
.ah-theme[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 8px; background: #111827; color: #fff; font: 600 12px/1.2 'Inter', -apple-system, 'Segoe UI', sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 70; }
.ah-theme[data-tip]::before { content: ''; position: absolute; top: calc(100% + 3px); right: 14px; border: 5px solid transparent; border-bottom-color: #111827; opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 70; }
.ah-theme:hover::after, .ah-theme:focus-visible::after, .ah-theme:hover::before, .ah-theme:focus-visible::before { opacity: 1; transform: none; }
html[data-theme="dark"] .ah-theme[data-tip]::after { background: #f8fafc; color: #0f172a; }
html[data-theme="dark"] .ah-theme[data-tip]::before { border-bottom-color: #f8fafc; }
@media (hover: none) { .ah-theme[data-tip]::after, .ah-theme[data-tip]::before { display: none; } }
html[data-theme="dark"] .ah-theme { background: var(--d-surface); border-color: var(--d-line-2); }
html[data-theme="dark"] .ah-theme svg { stroke: #fde68a; }
html[data-theme="dark"] .ah-theme .i-sun { display: block; }
html[data-theme="dark"] .ah-theme .i-moon { display: none; }
.ah-brand .logo-dark { display: none; }
html[data-theme="dark"] .ah-brand .logo-light { display: none; }
html[data-theme="dark"] .ah-brand .logo-dark { display: block; }

/* 2026-10-01: Featured Apps "How we choose" panel (white card with light text in dark mode) */
html[data-theme="dark"] .panel:not(.dark) { background: var(--d-surface); border-color: var(--d-line); }
html[data-theme="dark"] .panel:not(.dark) h2 { color: #f3f4f6; }
html[data-theme="dark"] .rule p { color: var(--d-ink-2); }
html[data-theme="dark"] .rule p strong { color: #f3f4f6; }
html[data-theme="dark"] .rule span { background: #1e3a8a; color: #bfdbfe; }
/* 2026-10-01: Featured Apps page cards and filters (white surfaces with light text in dark mode) */
html[data-theme="dark"] .filters button { background: var(--d-surface); border-color: var(--d-line-2); color: var(--d-ink-2); }
html[data-theme="dark"] .filters button.active { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-theme="dark"] .card { background: var(--d-surface); border-color: var(--d-line); box-shadow: none; }
html[data-theme="dark"] .visual:not(.dark):not(.violet) { background: var(--d-surface-2); }
html[data-theme="dark"] .card .score { color: var(--d-blue-2); }
html[data-theme="dark"] .card .themed-id .score { color: #fff; }
html[data-theme="dark"] .card .job, html[data-theme="dark"] .card .paid-note { color: var(--d-muted); }
html[data-theme="dark"] .card .actions a:not(.btn) { color: var(--d-blue-2); }
html[data-theme="dark"] .badge-pick { background: #1e3a8a; color: #dbeafe; }
html[data-theme="dark"] .badge-top { background: var(--d-surface-2); color: var(--d-ink); }
html[data-theme="dark"] .recent-logo.logo-fallback { background: linear-gradient(135deg, #60a5fa, #2563eb); }
html[data-theme="dark"] .band .pill.mid, html[data-theme="dark"] .band .pill.low { color: #0b1220; }

/* ===== Logo tile (2026-10-05): every tool logo sits whole (never cropped) in a white, slightly raised tile.
   Loaded on every page with the site header, so it covers Browse/Find cards, search suggestions, the homepage,
   Starter Kits and Spotlight pages. The Featured page keeps its own large logos (already tiled). ===== */
:root { --lt-bd: rgba(15, 23, 42, 0.10); --lt-sh: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(15, 23, 42, 0.07), 0 3px 8px rgba(15, 23, 42, 0.13), 0 1px 2px rgba(15, 23, 42, 0.15); }
html[data-theme="dark"] { --lt-bd: rgba(255, 255, 255, 0.14); --lt-sh: inset 0 -2px 0 rgba(15, 23, 42, 0.12), 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5); }
img.aime-tile, img.as-logo, img.feat-logo, img.feat-logo-band, img.kit-logo, img.week-logo, img.recent-logo, img.shelf-logo, img.shelf-logo-big, .kit-logos2 img {
  box-sizing: border-box !important; object-fit: contain !important; background: #fff !important;
  border: 1px solid var(--lt-bd) !important; box-shadow: var(--lt-sh) !important; image-rendering: auto; }
img.as-logo, img.shelf-logo { padding: 3px !important; }
img.aime-tile, img.kit-logo, img.week-logo, img.recent-logo, img.feat-logo-band, .kit-logos2 img { padding: 5px !important; }
img.feat-logo { padding: 7px !important; }
img.shelf-logo-big { padding: 9px !important; }
img.aime-tile, .aime-tile-init { border-radius: 14px !important; }
.aime-tile-init, .logo-fallback, .as-init, .kit-logos2 .fb { border: 1px solid var(--lt-bd); box-shadow: var(--lt-sh); }
.sv-logo, .sv-nav-logo, .sv-alt-logo { border: 1px solid var(--lt-bd) !important; box-shadow: var(--lt-sh) !important; }
.sv-logo img { padding: 9px !important; }
.sv-nav-logo img, .sv-alt-logo img { padding: 5px; box-sizing: border-box; }

/* ---- 2026-10-14 accessibility (WCAG 1.4.3 contrast, dark mode) ---- */
html[data-theme="dark"] .search button { background: #2563eb; }   /* white on #3b82f6 was 3.67:1 */
html[data-theme="dark"] .search button:hover { background: #1d4ed8; }
html[data-theme="dark"] .bg-blue-100.text-blue-700, html[data-theme="dark"] .bg-blue-100 .text-blue-700,
html[data-theme="dark"] .bg-blue-100.text-blue-600, html[data-theme="dark"] .bg-blue-50.text-blue-700 { color: var(--d-blue-2) !important; }   /* was 4.38:1 */
html[data-theme="dark"] .sv-nav-dir, html[data-theme="dark"] .sv-pos { color: var(--d-muted) !important; }   /* was 2.9:1 */
/* white text on the dark theme's #3b82f6 is 3.67:1; buttons and score chips use #2563eb (5.17:1). Text in var(--blue) stays. */
html[data-theme="dark"] :is(.alt .sc b, .band .pill:not(.mid):not(.low), .btn-primary, .btn2, .fc-try, .filters button.active, .header-cta,
  .sf button, .sig .n, .slb-pri, .slc-score, .slc-try, .slcmp .sc, .tabs button.active) { background: #2563eb !important; }
html[data-theme="dark"] .order li::before { background: #2563eb !important; }
html[data-theme="dark"] :is(.sv-score span, .sv-side-head, .sv-thumb-text span, .sv-side-hint, .sv-about p.words, .sv-row span, .sv-alt-text span) { color: var(--d-muted) !important; }
html[data-theme="dark"] :is(.sv-row a, .sv-sources a, .sv-maker a, .sv-about p.words button, .pm-eyebrow) { color: var(--d-blue) !important; }   /* #2563eb on dark was 3.36:1 */
html[data-theme="dark"] .pm-p .per { color: var(--d-muted) !important; }   /* premium pricing cards: was 3.66:1 */
html[data-theme="dark"] .pm-p .fo { color: var(--d-blue) !important; }   /* was 3.43:1 */
html[data-theme="dark"] .pm-thumb, html[data-theme="dark"] .pm-src a { color: var(--d-blue) !important; }   /* was 3.62:1 */
html[data-theme="dark"] .pm-src { color: var(--d-muted) !important; }   /* was 3.87:1 */