/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --bg:          #131316;
  --surface:     #1c1c20;
  --surface-2:   #242428;
  --surface-3:   #2e2e34;
  --border:      rgba(255,255,255,0.07);

  --accent:      #f2944f;
  --accent-dim:  rgba(242,148,79,0.15);
  --accent-glow: rgba(242,148,79,0.22);

  --text-primary:   #f0f0f2;
  --text-secondary: #9898a6;
  --text-muted:     #5a5a68;

  --blue:   #1980c3;
  --teal:   #34b8b8;
  --orange: #ee7802;
  --gold:   #B89F21;
  --green:  #80C319;
  --slate:  #415262;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-card:  0 4px 24px rgba(0,0,0,0.35);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.55);

  /* System font stacks — no remote font dependencies. */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  --max-w:        1100px;
  --header-h:     80px;
  --ease:         0.2s ease;
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ─── Inline SVG icons (replace previous Ionicons dependency) ─── */
.kb-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Layout ─────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: 16px; }
main        {
  flex: 1; background: var(--bg); padding-bottom: 48px;
  /* Own stacking context below the header (z-index 1100) so no
     descendant — profile title, hero, gallery, etc. — can paint
     above an open nav/user submenu. */
  position: relative;
  z-index: 0;
}
hr.divider  { border: none; border-top: 1px solid var(--border); margin-block: 8px; }

/* ─── Section Heading ────────────────────────────────────────── */
.section-heading {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 40px;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-heading a {
  margin-left: auto;          /* trailing "Show all →" link sticks to the right */
  color: var(--accent);
  font-size: 0.75rem;
  transition: opacity var(--ease);
}
.section-heading a:hover { opacity: 0.7; }

.section-intro {
  color: var(--text-muted);
  font-size: 0.84rem;
  margin-bottom: 14px;
  margin-top: 10px;
}

/* ─── Header ─────────────────────────────────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* The whole header sits in its own stacking context. Keep it
     above the cookie banner (z 1000) and any element that creates
     a stacking context inside the page (transforms, backdrop-filter,
     etc.) so the nav submenu is never covered. */
  z-index: 1100;
}

.main-header {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 16px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 16px; }

/* The brand wordmark is rendered as two stacked copies of the same
   asset, each clipped to its half. That lets the light theme invert
   only the wordmark portion while the rainbow icon keeps its colors.
   --header-logo-split is the fraction of the asset width where the
   wordmark begins; --header-logo-overlap lets the icon copy paint
   a few extra pixels into the wordmark zone (and z-index puts it
   on top there) so any colored sliver at the icon's right edge
   isn't picked up by the inverted wordmark layer. Tweak if the
   asset proportions change. */
.header-logo {
  --header-logo-split: 30%;
  --header-logo-overlap: 4%;
  height: 56px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.header-logo-img {
  display: block;
  height: 100%;
  width: auto;
}
.header-logo-icon {
  position: relative;
  z-index: 1;
  clip-path: inset(
    0
    calc(100% - var(--header-logo-split) - var(--header-logo-overlap))
    0 0
  );
}
.header-logo-text {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--header-logo-split));
}

.nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-menu > li { position: relative; }
/* Hover bridge: a transparent strip across the visual gap between the
   top-level link and the submenu. It's a child of the <li>, so hovering
   it keeps :hover active on the parent and the submenu stays open. */
.nav-menu > li::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-menu > li > a {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  display: block;
  transition: color var(--ease), background var(--ease);
  white-space: nowrap;
}
.nav-menu > li > a:hover { color: var(--text-primary); background: var(--surface-3); }

.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  list-style: none;
  min-width: 240px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  /* Sit on top of every page-level stacking context (sticky asides,
     transformed cards, backdrop-filtered tiles, etc.). Within the
     header's own stacking context this still keeps the submenu
     above the theme toggle and partner logo. */
  z-index: 9999;
}
.nav-menu > li:hover > .nav-submenu,
.nav-menu > li:focus-within > .nav-submenu { display: block; }
.nav-submenu li a {
  display: block;
  font-size: 0.86rem;
  color: var(--text-secondary);
  padding: 10px 16px;
  transition: background var(--ease), color var(--ease);
}
.nav-submenu li a:hover { background: var(--surface-3); color: var(--text-primary); }

/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  width: 40px;
  height: 40px;
  padding: 10px;
  margin-left: auto;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--ease), opacity var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.header-right img { height: 32px; width: auto; opacity: 0.85; }

/* Active-mode badge in the header. Only rendered when the backend
   surfaces config.activeMode (i.e. a regional overlay is in effect). */
.mode-badge {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  white-space: nowrap;
  margin-left: 4px;
  flex-shrink: 0;
}

.login-section-mobile { display: none; }

/* ─── User Menu ──────────────────────────────────────────────── */
.user-menu { position: relative; display: flex; align-items: center; }
.user-menu-button {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  gap: 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--ease), background var(--ease), border-color var(--ease);
}
.user-menu-button .kb-icon { font-size: 22px; flex-shrink: 0; }
.user-menu-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  padding-right: 6px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-menu-button:hover,
.user-menu.open .user-menu-button {
  color: var(--text-primary);
  background: var(--surface-3);
  border-color: var(--surface-3);
}
.user-menu-submenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  list-style: none;
  min-width: 180px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  z-index: 9999;
}
.user-menu.open .user-menu-submenu,
.user-menu:focus-within .user-menu-submenu { display: block; }
.user-menu-submenu li a {
  display: block;
  font-size: 0.86rem;
  color: var(--text-secondary);
  padding: 10px 16px;
  transition: background var(--ease), color var(--ease);
}
.user-menu-submenu li a:hover { background: var(--surface-3); color: var(--text-primary); }

/* ─── Hero ───────────────────────────────────────────────────── */
.hero {
  display: flex;
  gap: 48px;
  align-items: center;
  padding: 48px 32px 40px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  margin-block: 24px 32px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 90% at 80% 50%, var(--accent-glow), transparent 70%);
  pointer-events: none;
}

.hero-text { flex: 1; min-width: 0; position: relative; }
.hero-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero-text h1 span { color: var(--accent); }
.hero-text p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.hero-img {
  flex: 0 0 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero-img img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hero-img:hover img { transform: scale(1.03); }

/* ─── Search ─────────────────────────────────────────────────── */
.search-wrap { margin-block: 16px 8px; }

/* Advanced (AI) search toggle */
.search-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 4px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}
/* Honour the HTML `hidden` attribute even though we set an explicit
   display value above (CSS would otherwise win and the toggle would
   leak through to anonymous visitors before JS runs). */
.search-advanced-toggle[hidden] { display: none; }
.search-advanced-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.search-advanced-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--text-secondary);
  transition: transform var(--ease), background var(--ease);
}
.search-advanced-toggle input[type="checkbox"]:checked {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.search-advanced-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: var(--accent);
}

/* Advanced-mode answer block */
.search-answer {
  margin: 18px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.search-answer-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.search-answer-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.search-answer-body p { margin: 0 0 8px; }
.search-answer-body p:last-child { margin: 0; }
.search-answer-body h2,
.search-answer-body h3,
.search-answer-body h4,
.search-answer-body h5,
.search-answer-body h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  margin: 14px 0 6px;
  color: var(--text-primary);
}
.search-answer-body h2 { font-size: 1.05rem; }
.search-answer-body h3 { font-size: 0.98rem; }
.search-answer-body h4,
.search-answer-body h5,
.search-answer-body h6 { font-size: 0.92rem; }
.search-answer-body > :first-child { margin-top: 0; }
.search-answer-body ul,
.search-answer-body ol {
  margin: 4px 0 10px;
  padding-left: 1.4em;
}
.search-answer-body li { margin: 3px 0; }
.search-answer-body li::marker { color: var(--text-secondary); }
.search-answer-body ul ul,
.search-answer-body ul ol,
.search-answer-body ol ul,
.search-answer-body ol ol { margin: 2px 0; }
.search-answer-body strong,
.search-answer-body b { font-weight: 600; color: var(--text-primary); }
.search-answer-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.search-answer-body a:hover,
.search-answer-body a:focus { text-decoration: none; }
.search-answer-body blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border);
  color: var(--text-secondary);
}
.search-answer-body code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
}

/* Inline citation chip: superscript-style anchor pointing into a result */
.ai-cite {
  display: inline-block;
  margin: 0 1px;
  padding: 0 5px;
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: super;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3, var(--surface));
  color: var(--accent);
  text-decoration: none;
}
.ai-cite:hover,
.ai-cite:focus {
  background: var(--accent);
  color: var(--surface);
  text-decoration: none;
}

/* Sources footer rendered below the answer body */
.ai-sources {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ai-sources-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.ai-sources-list {
  margin: 0;
  padding-left: 1.6em;
  font-size: 0.9rem;
  line-height: 1.5;
}
.ai-sources-item { margin: 2px 0; }
.ai-sources-link {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ai-sources-link:hover,
.ai-sources-link:focus {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* Loading state inside the answer block during an AI fetch */
.search-answer-loading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-answer-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kb-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.search-answer-loading-text {
  color: var(--text-secondary);
  font-size: 0.92rem;
  /* Subtle pulse so the user keeps seeing motion even if the
     spinner ring blends into the surrounding card. */
  animation: kb-pulse 1.4s ease-in-out infinite;
}
@keyframes kb-spin  { to { transform: rotate(360deg); } }
@keyframes kb-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }

/* ─── Toasts (top-right notifications) ───────────────────────── */
.kb-toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.kb-toast {
  pointer-events: auto;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  color: var(--text-primary);
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity   0.25s ease;
}
.kb-toast.in  { transform: translateX(0);    opacity: 1; }
.kb-toast.out { transform: translateX(110%); opacity: 0; }
.kb-toast-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--accent-dim), 0 0 20px var(--accent-glow);
}
.kb-toast-body { min-width: 0; }
.kb-toast-title {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 2px;
}
.kb-toast-message {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
}
.kb-toast-action {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
}
.kb-toast-action:hover { text-decoration: underline; }
.kb-toast-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 14px;
  padding: 0 2px;
  cursor: pointer;
  line-height: 1;
  align-self: start;
}
.kb-toast-close:hover { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  .kb-toast { transition: opacity 0.15s ease; transform: none; }
  .kb-toast.out { transform: none; }
}

/* Mark stale results while a new search is in flight or is being
   navigated to. Blurred + non-interactive until the new render
   either replaces them or removes the class. */
.is-stale {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.2s ease;
}

#search-form {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 6px 6px 6px 20px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
#search-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
#search-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-primary);
}
#search-field::placeholder { color: var(--text-muted); }

#search-button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 9px 22px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--ease), transform var(--ease);
  white-space: nowrap;
}
#search-button:hover   { opacity: 0.85; transform: translateY(-1px); }
#search-button:active  { transform: translateY(0); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
}

/* ─── Suggested Topics (text rows) ──────────────────────────── */
.snippets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
  margin-block: 16px;
}
.snippet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease),
              transform var(--ease);
}
.snippet-row:hover {
  background: var(--surface-3);
  transform: translateX(2px);
}
.snippet-row-text { flex: 1; min-width: 0; }
.snippet-row-arrow {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.1em;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform var(--ease), opacity var(--ease);
}
.snippet-row:hover .snippet-row-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ─── Topics Grid ────────────────────────────────────────────── */
.topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-block: 16px;
}
.topics-grid.topics-grid-3 { grid-template-columns: repeat(3, 1fr); }
.topic-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
  text-align: center;
  padding: 12px;
}
.topic-card:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ─── Carousels ──────────────────────────────────────────────── */
.carousel-wrapper { position: relative; margin-block: 16px; }
.carousel-wrapper::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 60px; height: 100%;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none; z-index: 2;
  transition: opacity 0.3s;
}
.carousel-wrapper.at-end::after { opacity: 0; }

.bottom-content {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
}
.bottom-content::-webkit-scrollbar { display: none; }

.content-box {
  flex: 0 0 260px; height: 240px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  scroll-snap-align: start;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.content-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,255,255,0.13);
}

.image-link      { display: block; width: 100%; height: 100%; }
.image-container { width: 100%; height: 100%; position: relative; }
.image-container img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tile title — bigger and more legible. */
.title-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 36px 14px 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}

.carousel-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--text-primary);
  transition: opacity var(--ease), background var(--ease);
  user-select: none;
}
.carousel-arrow:hover  { background: var(--surface-3); }
.carousel-arrow.left   { left: -12px; }
.carousel-arrow.right  { right: -12px; }
.carousel-arrow.hidden { opacity: 0; pointer-events: none; }

/* ─── LINKS Cards ────────────────────────────────────────────── */
.links-sections {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-block: 16px;
}
.links-card {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1.5px solid;
  padding: 18px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.links-card:hover {
  background: var(--surface-3);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.links-card-icon  { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.links-card-title {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.links-card-desc  { font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); }

/* ─── Footer ─────────────────────────────────────────────────── */
footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.86rem;
  padding-block: 40px 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer-col ul  { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col a   { transition: color var(--ease); }
.footer-col a:hover { color: var(--text-primary); }
.footer-col p   { line-height: 1.6; color: var(--text-muted); font-size: 0.8rem; }
.footer-col p a { text-decoration: underline; text-underline-offset: 2px; }
.footer-logo    { height: 38px; width: auto; margin-bottom: 14px; opacity: 0.85; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.footer-bottom a { transition: color var(--ease); }
.footer-bottom a:hover { color: var(--text-primary); }

/* ─── Cookie Banner ──────────────────────────────────────────── */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  z-index: 1000;
  font-size: 0.86rem;
  color: var(--text-secondary);
}
#cookie-banner a { color: var(--accent); }
#cookie-banner button {
  background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: 7px 20px;
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .links-sections { grid-template-columns: repeat(2, 1fr); }
  .footer-grid    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  :root { --header-h: 68px; }
  .header-logo { height: 44px; }
  .user-menu-name { display: none; }
  .user-menu-button { padding: 0; min-width: 38px; }
  .main-header { gap: 12px; }
  .hero       { flex-direction: column; gap: 24px; padding: 28px 20px; }
  .hero-img   { flex: unset; width: 100%; }
  .topics-grid,
  .topics-grid.topics-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .links-sections { grid-template-columns: 1fr; }
  .header-right { display: none; }
  .login-section-mobile {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; color: var(--text-muted);
  }
  .login-section-mobile img { height: 26px; opacity: 0.85; }

  .nav-toggle { display: flex; }

  /* Collapsed nav drawer */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    padding: 8px 12px 14px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .nav-menu.open { display: flex; }
  .nav-menu > li::after { display: none; } /* no bridge inside the drawer */
  .nav-menu > li > a { padding: 14px 12px; font-size: 1rem; }
  .nav-submenu {
    position: static;
    display: none;
    margin: 4px 0 8px 12px;
    min-width: 0;
    box-shadow: none;
    background: var(--surface-2);
    border-color: var(--border);
  }
  /* Disable hover-open on touch; require explicit per-item toggle. */
  .nav-menu > li:hover > .nav-submenu,
  .nav-menu > li:focus-within > .nav-submenu { display: none; }
  .nav-menu > li.open > .nav-submenu { display: block; }
  .nav-submenu li a { font-size: 0.95rem; padding: 12px 14px; }

  #search-button { padding: 9px 16px; font-size: 0.85rem; }
  #search-form   { padding-left: 14px; }

  .content-box   { flex: 0 0 220px; height: 210px; }
  .title-overlay { font-size: 0.92rem; padding: 28px 12px 12px; }
  .carousel-arrow.left  { left: -4px; }
  .carousel-arrow.right { right: -4px; }
}
@media (max-width: 480px) {
  .topics-grid,
  .topics-grid.topics-grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-text h1 { font-size: 1.75rem; }
  .snippets { grid-template-columns: 1fr; gap: 6px; }
}

/* ─── Search tips list (search.html empty state) ─────────────── */
.search-tips {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}
.search-tips li { padding-left: 18px; position: relative; }
.search-tips li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.search-tips em { color: var(--text-primary); font-style: normal; font-weight: 600; }

/* ─── Search empty-state panel (no query yet) ────────────────── */
.search-empty { margin: 18px 0 32px; }
.search-empty-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
}
.search-empty-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.search-empty-card h2 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.search-empty-tips ul {
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.55;
}
.search-empty-tips li { padding-left: 18px; position: relative; }
.search-empty-tips li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.search-empty-tips em { color: var(--text-primary); font-style: normal; font-weight: 600; }
.search-empty-lede {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 12px;
}
.search-browse-list { list-style: none; display: grid; gap: 6px; }
.search-browse-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.search-browse-link:hover {
  background: var(--surface-3);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateX(2px);
}
.search-browse-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
}
.search-browse-desc {
  grid-column: 1 / 2;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.search-browse-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 18px;
}

@media (max-width: 768px) {
  .search-empty-grid { grid-template-columns: 1fr; }
}

/* ─── Page heading (overview / profile) ──────────────────────── */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-top: 28px;
}
.page-subtitle {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 6px;
  margin-bottom: 14px;
}

/* ─── Overview toolbar ───────────────────────────────────────── */
.overview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 18px 0 14px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.overview-filter {
  flex: 1 1 240px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 9px 12px;
  outline: none;
}
.overview-filter:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.overview-filter::placeholder { color: var(--text-muted); }

.overview-control {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.overview-control select {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
}
.overview-control select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle button {
  background: var(--surface);
  color: var(--text-secondary);
  border: 0;
  padding: 8px 14px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.view-toggle button + button { border-left: 1px solid var(--border); }
.view-toggle button:hover  { color: var(--text-primary); background: var(--surface-3); }
.view-toggle button.active { background: var(--accent); color: #fff; }

/* ─── Overview status / empty state ─────────────────────────── */
.overview-status {
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.overview-status-error { color: #d97a5b; }
.overview-empty {
  margin: 28px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ─── Overview tiles view ───────────────────────────────────── */
.overview-results-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.overview-tile {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.overview-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.13);
  box-shadow: var(--shadow-card);
}
.overview-tile-img {
  aspect-ratio: 16 / 10;
  background: #fff;
  overflow: hidden;
  /* `contain` so logos with their own backgrounds don't get cropped
     and centered awkwardly. The white surface gives transparent
     PNGs a clean canvas regardless of theme. */
  padding: 10px;
}
.overview-tile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.overview-tile-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.overview-tile-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}
.overview-tile-meta {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── Overview list view ────────────────────────────────────── */
.overview-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.overview-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  transition: background var(--ease), border-color var(--ease);
}
.overview-row:hover { background: var(--surface-3); border-color: rgba(255,255,255,0.13); }
.overview-row-img {
  flex: 0 0 96px;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 6px;
}
.overview-row-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.overview-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px; }
.overview-row-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.overview-row-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overview-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.overview-row-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.overview-row-meta {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 28px 0 8px;
}
.pagination-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 36px;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.pagination-btn:hover:not(.disabled):not(.current) {
  color: var(--text-primary);
  background: var(--surface-3);
}
.pagination-btn.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  cursor: default;
}
.pagination-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-gap { color: var(--text-muted); padding: 0 4px; }

/* ─── Profile (details) page ─────────────────────────────────── */
.back-link {
  margin: 22px 0 8px;
  font-size: 0.85rem;
}
.back-link a {
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-weight: 400;
  transition: color var(--ease);
}
.back-link a:hover { color: var(--text-primary); }

.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
  /* The meta aside is the third child (after hero + optional
     gallery), explicitly anchored to col 2. Default sparse
     auto-placement would then advance the cursor past col 1 of
     that row, dropping the body to the row below and leaving a
     tall gap on the left. `dense` lets the body backfill so the
     two columns sit side-by-side starting at the same row. */
  grid-auto-flow: row dense;
}
.profile-hero      { grid-column: 1 / -1; }
.profile-main      { grid-column: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.profile-aside     { grid-column: 2; }
.profile-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
  padding: 0;
  /* Plain in-flow content; never sticky/fixed even if some
     ancestor rule tries to elevate it. */
  position: static;
  margin-top: 12px;
}
.profile-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-figure-link {
  display: block;
  cursor: zoom-in;
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  /* Square canvas with contain-fit so logos and photos both render
     whole on a consistent white background, matching the overview
     tiles. */
  aspect-ratio: 1 / 1;
  padding: 12px;
}
.profile-figure-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.profile-figure-caption {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
}
.profile-hero-text { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.profile-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.profile-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.profile-body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.profile-body p     { margin-bottom: 14px; }
.profile-body h2,
.profile-body h3,
.profile-body h4    { font-family: var(--font-display); margin: 20px 0 8px; }
.profile-body ul,
.profile-body ol    { margin: 0 0 14px 20px; }
.profile-body li    { margin-bottom: 6px; }
.profile-body a     { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.profile-body img   { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 12px 0; }

.profile-aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto;
}
.profile-meta h3 {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.profile-meta-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.profile-meta-list a {
  color: var(--text-primary);
  font-size: 0.88rem;
  word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.profile-meta-list a:hover { color: var(--accent); }
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.profile-meta-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.profile-gallery {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.profile-gallery-thumb {
  width: 84px;
  height: 84px;
  padding: 6px;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: border-color var(--ease), transform var(--ease);
}
.profile-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.profile-gallery-thumb:hover { transform: translateY(-1px); }
.profile-gallery-thumb.is-active { border-color: var(--accent); }

/* Iframe preview of the first source URL. Lives inside
   .profile-main, which provides the gap between body and preview. */
.profile-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-preview-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.profile-preview-frame {
  width: 100%;
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-3);
}
.profile-preview-open {
  font-size: 0.85rem;
  color: var(--text-secondary);
  word-break: break-all;
}
.profile-preview-open:hover { color: var(--accent); }
.profile-preview-note {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.5;
}
.profile-preview-note a { color: var(--accent); text-decoration: underline; }
.profile-preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.profile-preview-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: kb-spin 0.8s linear infinite;
}
.profile-preview-loading-text {
  color: var(--text-secondary);
  font-size: 0.92rem;
  animation: kb-pulse 1.4s ease-in-out infinite;
}

/* Lightbox overlay — fullscreen modal triggered by clicking a figure
   image or gallery thumb. */
.kb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 32px;
  cursor: zoom-out;
}
.kb-lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}
.kb-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kb-lightbox-close:hover { background: rgba(0,0,0,0.7); }

/* Autocomplete dropdown */
.kb-autocomplete-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.kb-autocomplete-wrap > input { flex: 1; min-width: 0; width: 100%; }
.kb-autocomplete {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 320px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}
.kb-autocomplete.open { display: block; }
.kb-autocomplete a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.kb-autocomplete a:last-child { border-bottom: none; }
.kb-autocomplete a:hover,
.kb-autocomplete a.is-active { background: var(--surface-3); }
.kb-autocomplete .kb-ac-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-autocomplete .kb-ac-section {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .overview-toolbar { padding: 10px; gap: 8px; }
  .overview-filter { flex-basis: 100%; }
  .overview-results-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .overview-tile-body  { padding: 10px 12px 12px; }
  .overview-tile-title { font-size: 0.92rem; }
  .overview-row-img { flex-basis: 80px; }
  .overview-row-title { font-size: 0.95rem; }
  .overview-row-desc { font-size: 0.82rem; }
  .pagination-btn { padding: 7px 10px; font-size: 0.8rem; }

  .profile { grid-template-columns: 1fr; }
  .profile-hero, .profile-main, .profile-aside { grid-column: 1; }
  .profile-aside {
    position: static;
    max-height: none;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* ─── Light theme ────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:          #f7f7fb;
  --surface:     #ffffff;
  --surface-2:   #f1f1f6;
  --surface-3:   #e6e6ee;
  --border:      rgba(0, 0, 0, 0.10);

  --accent:      #d9701b;
  --accent-dim:  rgba(217, 112, 27, 0.15);
  --accent-glow: rgba(217, 112, 27, 0.20);

  --text-primary:   #16161a;
  --text-secondary: #3a3a44;
  --text-muted:     #5e5e6a;

  --shadow-card:  0 4px 18px rgba(20, 20, 30, 0.10);
  --shadow-hover: 0 10px 32px rgba(20, 20, 30, 0.15);
}
:root[data-theme="light"] .header-right img,
:root[data-theme="light"] .login-section-mobile img,
:root[data-theme="light"] .footer-logo { opacity: 1; }
/* The brand wordmark is white on transparent — invisible on the
   light surface. Invert + hue-rotate flips luminance while keeping
   hue, so the white text becomes black. Apply only to the .text
   half so the rainbow sphere icon (left) keeps its true colors. */
:root[data-theme="light"] .header-logo-text {
  filter: invert(1) hue-rotate(180deg);
}
:root[data-theme="light"] .title-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 50%, transparent 100%);
}

/* ─── Theme toggle button ────────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background var(--ease), color var(--ease), border-color var(--ease);
  font-size: 18px;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--text-primary); }
.theme-toggle .kb-icon { font-size: 18px; }
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark  { display: inline-block; }
:root[data-theme="light"] .theme-toggle .icon-light { display: inline-block; }
:root[data-theme="light"] .theme-toggle .icon-dark  { display: none; }

@media (max-width: 768px) {
  .theme-toggle { margin-left: 0; }
}

/* ─── Prose (legal pages) ────────────────────────────────────── */
.prose {
  max-width: 820px;
  margin-inline: auto;
  padding-block: 28px 48px;
  color: var(--text-primary);
  font-size: 0.98rem;
  line-height: 1.7;
}
.prose h1 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.15;
}
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 32px;
  margin-bottom: 8px;
  line-height: 1.25;
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 22px;
  margin-bottom: 6px;
}
.prose p { margin-bottom: 14px; }
.prose ul,
.prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { opacity: 0.8; }
.prose .meta-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 14px 0 18px;
}
.prose .meta-block p { margin: 0; }
.prose .meta-block p + p { margin-top: 4px; }
.prose .source {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 28px;
}

/* ─── Modern polish ──────────────────────────────────────────── */

/* Smoother default easing curve and a longer baseline duration. */
:root {
  --ease: 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  --easing: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ring-accent: 0 0 0 3px var(--accent-dim);
}

/* Cross-theme transitions so flipping dark <-> light is graceful. */
body,
header,
footer,
.hero,
.topic-card,
.content-box,
.links-card,
.overview-tile,
.overview-row,
.snippet-row,
.profile-hero,
.profile-aside,
.nav-submenu,
.theme-toggle,
.pagination-btn,
.overview-toolbar,
.overview-control select,
.overview-filter,
#search-form,
#search-button,
#cookie-banner {
  transition:
    background-color   0.25s var(--easing),
    background-image   0.25s var(--easing),
    color              0.25s var(--easing),
    border-color       0.25s var(--easing),
    box-shadow         0.25s var(--easing),
    transform          0.25s var(--easing),
    opacity            0.25s var(--easing);
}

/* Glass header — translucent, blurred, hairline border.
   In dark mode the chrome uses a dedicated dark token set so it stays
   consistent regardless of any page-level overrides; in light mode it
   inherits the bright theme tokens for a luminous look with dark text. */
header {
  --surface:        #1c1c20;
  --surface-2:      #242428;
  --surface-3:      #2e2e34;
  --border:         rgba(255, 255, 255, 0.10);
  --text-primary:   #ffffff;
  --text-secondary: #d0d0dc;
  --text-muted:     #a0a0ac;

  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
  color-scheme: dark;
}

/* Light-mode chrome: bright surface, dark text. */
:root[data-theme="light"] header,
:root[data-theme="light"] footer {
  --surface:        #ffffff;
  --surface-2:      #f4f4f9;
  --surface-3:      #e6e6ee;
  --border:         rgba(0, 0, 0, 0.10);
  --text-primary:   #16161a;
  --text-secondary: #3a3a44;
  --text-muted:     #5e5e6a;
  color-scheme: light;
}
:root[data-theme="light"] header {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border-bottom-color: color-mix(in srgb, #000 10%, transparent);
}

/* Footer mirrors the header. */
footer {
  --surface:        #1c1c20;
  --surface-2:      #242428;
  --surface-3:      #2e2e34;
  --border:         rgba(255, 255, 255, 0.10);
  --text-primary:   #ffffff;
  --text-secondary: #d0d0dc;
  --text-muted:     #a0a0ac;
  color-scheme: dark;
}

/* Hero — layered radial accents and tighter typographic feel. */
.hero {
  background:
    radial-gradient(60% 80% at 88% 30%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 65%),
    radial-gradient(40% 60% at  6% 100%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 60%),
    var(--surface);
}
.hero-text h1 {
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--text-primary), color-mix(in srgb, var(--text-primary) 65%, transparent));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-text h1 span {
  background: linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 60%, #ff6b6b) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Section headings — slightly larger with a small accent dot. */
.section-heading { font-size: 0.82rem; }
.section-heading::before {
  content: '';
  flex: 0 0 auto;            /* ::before is a flex item — pin its width */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-dim);
}

/* Search field — fancier focus ring + gradient ask button. */
#search-form { background: color-mix(in srgb, var(--surface-2) 92%, var(--surface)); }
#search-form:focus-within { box-shadow: var(--ring-accent), 0 6px 24px var(--accent-dim); }
#search-button {
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 65%, #ff6b6b) 100%);
  box-shadow: 0 6px 22px var(--accent-dim);
}
#search-button:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 30px var(--accent-dim); }

/* Topic cards — soft hover lift and accent glow. */
.topic-card { background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 88%, var(--surface))); }
.topic-card:hover {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Suggested-Topics rows — slightly lifted surface in light theme. */
.snippet-row {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
}

/* Content boxes (carousel + overview tiles + links cards) — modern hover. */
.content-box,
.overview-tile,
.overview-row,
.links-card {
  border-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.content-box:hover,
.overview-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px color-mix(in srgb, #000 35%, transparent),
              0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.links-card:hover {
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Pagination — pill-style buttons. */
.pagination-btn { border-radius: 999px; padding: 8px 14px; }
.pagination-btn.current {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #ff6b6b));
  box-shadow: 0 6px 18px var(--accent-dim);
}

/* Overview toolbar — softer surface, larger filter input. */
.overview-toolbar {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
}
.overview-filter { padding: 11px 14px; font-size: 0.98rem; }

/* Carousel arrows — slightly larger, glassy. */
.carousel-arrow {
  width: 36px; height: 36px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.carousel-arrow:hover { background: var(--surface-3); transform: translateY(-50%) scale(1.05); }

/* Footer — slightly translucent surface for continuity with the header. */
footer { background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }

/* Nav submenu — opaque card so it remains a clearly separate widget
   when it lands over arbitrary page content (profile hero, tinted
   cards, etc.). Uses the standard surface/border/shadow tokens. */
.nav-submenu {
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  animation: kb-submenu-in 0.18s var(--easing);
}
@keyframes kb-submenu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Theme toggle — match the modernized chrome. */
.theme-toggle {
  width: 40px; height: 40px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.theme-toggle:hover { background: var(--surface-3); transform: translateY(-1px); }