:root {
  --bg: #0f1115;
  --panel: #161922;
  --text: #e6e9ef;
  --muted: #a6adbb;
  --accent: #7aa2f7;
  --accent-2: #9ece6a;
  --border: #232736;
  --code-bg: #0b0d12;
  --link: #8bd5ff;
  --bg-radial: #141825;
  --chip-bg-start: #1b2030;
  --chip-bg-end: #151a27;
  --pre-code: #cbd5e1;
}

/* Light theme overrides */
[data-theme="light"] {
  --bg: #f7f8fb;
  --panel: #ffffff;
  --text: #0b1220;
  --muted: #64748b;
  --accent: #2563eb;
  --accent-2: #16a34a;
  --border: #e5e7eb;
  --code-bg: #f3f4f6;
  --link: #1d4ed8;
  --bg-radial: #e8ecfb;
  --chip-bg-start: #f8fafc;
  --chip-bg-end: #f1f5f9;
  --pre-code: #7b8591;
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  line-height: 1.55;
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, var(--bg-radial), transparent 60%), var(--bg);
}
.site-header {
  position: sticky;
  top: 0; z-index: 3;
  backdrop-filter: saturate(120%) blur(8px);
  background: color-mix(in lab, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { max-width: 980px; margin: 0 auto; padding: 16px 20px; display:flex; align-items:center; justify-content:space-between; }
.brand {
  font-weight: 700; letter-spacing: 0.3px; font-size: 32px;
  color: var(--text); text-decoration: none;
  /* Subtle bevel + neon glow + soft drop shadow (tuned for dark theme) */
  text-shadow:
    /* stronger bevel highlight (top-left) */ -1px -1px 0 color-mix(in lab, #ffffff 80%, transparent),
    /* stronger bevel shadow (bottom-right) */ 1px 1px 0 color-mix(in lab, var(--bg) 40%, #000000 60%),
    /* soft accent inner glow */ 0 0 5px color-mix(in lab, var(--accent) 45%, transparent),
    /* outer glow to lift from dark header */ 0 0 14px color-mix(in lab, var(--accent) 28%, transparent),
    /* faint light rim for contrast on very dark bg */ 0 0 2px color-mix(in lab, #bcd 18%, transparent),
    /* gentle light drop shadow for dark bg contrast */ 0 3px 7px rgba(255,255,255,0.18);
  transition: text-shadow .12s ease;
}
.brand .dot { color: var(--accent); }
.brand:hover, .brand:focus {
  text-shadow:
    -1px -1px 0 color-mix(in lab, #ffffff 85%, transparent),
    1px 1px 0 color-mix(in lab, var(--bg) 40%, #000000 60%),
    0 0 6px color-mix(in lab, var(--accent) 55%, transparent),
    0 0 16px color-mix(in lab, var(--accent) 35%, transparent),
    /* slightly stronger light drop shadow on interaction */ 0 4px 9px rgba(255,255,255,0.22);
}

/* Keep the lighter, subtler effect on the light theme */
[data-theme="light"] .brand {
  text-shadow:
    /* toned-down bevel highlight */ -0.6px -0.6px 0 color-mix(in lab, #ffffff 55%, transparent),
    /* toned-down bevel shadow */   0.6px  0.6px 0 color-mix(in lab, var(--bg) 75%, #000000 25%),
    /* subtler inner glow */        0 0 2px  color-mix(in lab, var(--accent) 22%, transparent),
    /* very soft outer glow */      0 0 6px  color-mix(in lab, var(--accent) 12%, transparent),
    /* softer drop shadow */        0 2px 4px rgba(0,0,0,0.16);
}
[data-theme="light"] .brand:hover,
[data-theme="light"] .brand:focus {
  text-shadow:
    -0.6px -0.6px 0 color-mix(in lab, #ffffff 60%, transparent),
     0.6px  0.6px 0 color-mix(in lab, var(--bg) 70%, #000000 30%),
     0 0 3px color-mix(in lab, var(--accent) 28%, transparent),
     0 0 8px color-mix(in lab, var(--accent) 16%, transparent),
     0 3px 6px rgba(0,0,0,0.18);
}
.tagline { color: var(--muted); font-size: 13px; }
.header-right { display:flex; align-items:center; gap: 10px; }
.theme-toggle {
  appearance: none; cursor: pointer;
  background: linear-gradient(180deg, var(--chip-bg-start), var(--chip-bg-end));
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px; font-size: 13px; line-height: 1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.theme-toggle:hover { transform: translateY(-1px); border-color: #2d3350; }
[data-theme="light"] .theme-toggle:hover { border-color: #cbd5e1; }
.theme-toggle:focus { outline: 2px solid color-mix(in lab, var(--accent) 60%, transparent); outline-offset: 2px; }

.container { max-width: 980px; margin: 24px auto 80px; padding: 0 20px; }
.wip-note {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 20px 12px;
  /* Round only the top corners */
  border-radius: 12px 12px 0 0;
  /* Theme-cohesive blended background (works for dark and light) */
  background: linear-gradient(
    180deg,
    color-mix(in lab, var(--panel) 88%, var(--bg) 12%),
    color-mix(in lab, var(--panel) 78%, var(--bg) 22%)
  );
  color: var(--text);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  /* Subtle accent highlight */
  border-left: 3px solid color-mix(in lab, var(--accent) 55%, transparent);
  /* Soft inner separators for a subtle bar feel */
  box-shadow:
    inset 0 1px 0 color-mix(in lab, var(--text) 6%, transparent),
    inset 0 -1px 0 color-mix(in lab, var(--bg) 8%, transparent),
    /* gentle outer glow to lift the bar slightly */ 0 6px 18px color-mix(in lab, var(--accent) 14%, transparent);
}

/* Slightly increase the lift on hover/focus for discoverability */
.wip-note:hover,
.wip-note:focus-within {
  box-shadow:
    inset 0 1px 0 color-mix(in lab, var(--text) 6%, transparent),
    inset 0 -1px 0 color-mix(in lab, var(--bg) 8%, transparent),
    0 8px 24px color-mix(in lab, var(--accent) 18%, transparent);
}

.wip-note a { color: var(--link); text-decoration: underline; }

/* Dark theme only: make WIP bar background a bit lighter for contrast */
html:not([data-theme="light"]) .wip-note {
  background: linear-gradient(
    180deg,
    color-mix(in lab, var(--panel) 70%, var(--text) 30%),
    color-mix(in lab, var(--panel) 65%, var(--text) 35%)
  );
}
.index {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.index h2 { margin: 0 0 8px; font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0.2px; }
.filters { display:flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 12px; }
.search-wrap { flex: 1 1 260px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#searchInput {
  width: 100%;
  background: linear-gradient(180deg, var(--chip-bg-start), var(--chip-bg-end));
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}
.tags-wrap { display:flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tags { display:flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display:inline-block; cursor:pointer; user-select:none;
  background: linear-gradient(180deg, var(--chip-bg-start), var(--chip-bg-end));
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 999px; font-size: 12px; line-height: 1;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.chip:hover { transform: translateY(-1px); border-color: #2d3350; }
[data-theme="light"] .chip:hover { border-color: #cbd5e1; }
.chip[aria-pressed="true"], .chip.active {
  border-color: color-mix(in lab, var(--accent) 45%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in lab, var(--accent) 30%, transparent);
}
.clear-chip { background: transparent; }
.no-results { margin-top: 10px; color: var(--muted); font-size: 13px; }
.link-list { display:flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.link-list a {
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, var(--chip-bg-start), var(--chip-bg-end));
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 8px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.link-list a:hover { transform: translateY(-1px); border-color: #2d3350; }
[data-theme="light"] .link-list a:hover { border-color: #cbd5e1; }

.entry { margin-top: 22px; }
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}
.card.needs-checking {
  /* Subtle red border, slightly thicker as requested */
  border-color: rgba(231, 76, 60, 0.5); /* ~#e74c3c at 50% */
  border-width: 2px;
}
.card-header { padding: 16px 18px; border-bottom: 1px solid var(--border); display:flex; align-items:center; gap:10px; }
.card-header h2 { margin: 0; font-size: 18px; font-weight: 650; }
.anchor { color: var(--accent); text-decoration: none; font-size: 14px; }
.meta { color: var(--muted); font-size: 12px; }
.card-body { padding: 16px 18px; }

/* Typewriter-like font for article bodies (leave code sections as-is) */
/* Scoped to main page articles only so other pages (e.g., Partner) keep default UI font */
#articlesContainer .card-body {
  font-family: "Courier New", Courier, "Lucida Console", "DejaVu Sans Mono", ui-monospace, monospace;
}

/* Featured article subtle emphasis */
.card.featured {
  border-color: color-mix(in lab, var(--accent) 35%, var(--border));
  box-shadow: 0 14px 32px rgba(0,0,0,0.32);
}
.card.featured .card-header h2 {
  font-size: 21px;
}

/* Ensure needs-checking red border takes precedence when both featured and needs-checking */
.card.featured.needs-checking {
  border-color: rgba(231, 76, 60, 0.5);
  border-width: 2px;
}

/* Small note shown below header and above body when an article needs checking */
.check-note {
  padding: 10px 18px;
  font-size: 12px;
  color: color-mix(in lab, #e74c3c 70%, var(--text));
  background: color-mix(in lab, var(--panel) 92%, #e74c3c 8%);
  border-bottom: 1px solid var(--border);
}
p { margin: 0 0 10px; }
a { color: var(--link); }

code { font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace; font-size: 13px; }
pre { margin: 10px 0; background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; overflow:auto; }
pre code { color: var(--pre-code); }

footer { max-width: 980px; margin: 40px auto 60px; padding: 0 20px; color: var(--muted); font-size: 12px; text-align: center; }

/* Error message area */
#loadError { display: none; margin-top: 10px; color: var(--muted); }