/* ============================================================
   Social Knowledge — Standalone Editorial Theme
   Loaded AFTER theme-vars.css in sk.html; overrides the design
   tokens the SK components use with an independent, editorial
   brand (warm paper/ink, petrol accent, Fraunces + Hanken Grotesk).
   Scoped to the standalone app — the embedded Lebensrad tab is
   untouched (it never loads sk.html).
   ============================================================ */

:root {
  --sk-serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sk-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Fluid editorial type scale */
  --sk-step--1: clamp(0.78rem, 0.75rem + 0.16vw, 0.86rem);
  --sk-step-0:  clamp(0.95rem, 0.91rem + 0.22vw, 1.06rem);
  --sk-step-1:  clamp(1.12rem, 1.02rem + 0.5vw, 1.4rem);
  --sk-step-2:  clamp(1.45rem, 1.25rem + 1vw, 2.05rem);
  --sk-step-3:  clamp(1.95rem, 1.55rem + 2vw, 3.1rem);
  --sk-step-4:  clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

  --sk-measure: 68ch;
  --sk-shadow: 0 1px 2px oklch(0.2 0.02 60 / 0.04), 0 8px 28px oklch(0.2 0.02 60 / 0.06);
}

/* ---------------- LIGHT — warm paper / ink ---------------- */
:root.light {
  --lr-font-family: var(--sk-sans);

  --bg-primary:   oklch(0.985 0.006 85);
  --bg-secondary: oklch(0.965 0.009 84);
  --surface-1:    oklch(0.998 0.003 85);
  --surface-2:    oklch(0.955 0.011 82);
  --bg-card:      oklch(0.998 0.003 85);
  --bg-panel:     oklch(0.998 0.003 85);
  --bg-hover:     oklch(0.93 0.013 82);
  --bg-input:     oklch(0.975 0.007 84);

  --text-primary:   oklch(0.245 0.018 58);
  --text-secondary: oklch(0.44 0.018 58);
  --text-muted:     oklch(0.535 0.015 62);  /* a11y: bumped from 0.575 → AA 4.5:1 on surfaces */

  --border:        oklch(0.245 0.02 58 / 0.13);
  --border-subtle: oklch(0.245 0.02 58 / 0.08);
  --border-input:  oklch(0.245 0.02 58 / 0.18);

  --accent-primary:   oklch(0.49 0.085 202);
  --accent-secondary: oklch(0.56 0.11 42);

  --sk-source:  oklch(0.49 0.085 202);  /* Quellen */
  --sk-opinion: oklch(0.56 0.11 42);    /* Meinungen */
  --sk-mood:    oklch(0.66 0.10 80);    /* Stimmungs-Heatmap */
  --shadow-card: var(--sk-shadow);
}

/* ---------------- DARK — warm anthracite ---------------- */
:root.dark {
  --lr-font-family: var(--sk-sans);

  --bg-primary:   oklch(0.185 0.011 75);
  --bg-secondary: oklch(0.215 0.013 75);
  --surface-1:    oklch(0.235 0.015 74);
  --surface-2:    oklch(0.275 0.017 72);
  --bg-card:      oklch(0.235 0.015 74);
  --bg-panel:     oklch(0.235 0.015 74);
  --bg-hover:     oklch(0.305 0.019 72);
  --bg-input:     oklch(0.26 0.016 74);

  --text-primary:   oklch(0.935 0.012 86);
  --text-secondary: oklch(0.745 0.014 86);
  --text-muted:     oklch(0.665 0.014 82);  /* a11y: bumped from 0.605 → AA 4.5:1 on surfaces */

  --border:        oklch(0.935 0.01 86 / 0.15);
  --border-subtle: oklch(0.935 0.01 86 / 0.08);
  --border-input:  oklch(0.935 0.01 86 / 0.22);

  --accent-primary:   oklch(0.72 0.10 200);
  --accent-secondary: oklch(0.70 0.12 46);

  --sk-source:  oklch(0.72 0.10 200);
  --sk-opinion: oklch(0.70 0.12 46);
  --sk-mood:    oklch(0.78 0.11 82);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.25), 0 12px 36px oklch(0 0 0 / 0.34);
}

/* ---------------- Base typography ---------------- */
html, body, #root { font-family: var(--sk-sans); }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--sk-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display serif for headings inside the standalone app */
h1, h2, h3, .sk-display {
  font-family: var(--sk-serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.06;
  color: var(--text-primary);
}
.sk-kicker {
  font-family: var(--sk-sans);
  font-size: var(--sk-step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

/* ---------------- Editorial polish ---------------- */
::selection { background: color-mix(in oklch, var(--accent-primary) 26%, transparent); color: var(--text-primary); }

/* a11y: keyboard focus must always be visible (WCAG 2.4.7 / 2.4.11).
   Not a :where() here so it wins over component inline `outline:none`. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="dialog"] :focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* a11y: skip-link — first focusable element, off-screen until focused. */
.sk-skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2000;
  transform: translateY(-150%);
  transition: transform 0.15s ease;
  background: var(--accent-primary);
  color: var(--bg-primary);
  font-family: var(--sk-sans);
  font-size: var(--sk-step--1);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.sk-skip-link:focus,
.sk-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* Quiet, paper-like scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--border-input) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; }

/* Staggered entrance for editorial reveals (reduced-motion safe) */
@keyframes sk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sk-rise { animation: sk-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
  /* a11y: honour the OS "reduce motion" setting — kill fade/slide/scale + the
     skip-link slide and keep transitions effectively instant (WCAG 2.3.3). */
  .sk-rise { animation: none !important; }
  .sk-skip-link { transition: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- Discussion index rows ---------------- */
.sk-disc-row { transition: background 0.15s ease; }
.sk-disc-row:hover { background: var(--bg-hover); }
.sk-disc-row:hover .sk-disc-title { color: var(--accent-primary); }
.sk-disc-row:last-child { border-bottom: none !important; }

/* ---------------- Topic tags (table of contents) ---------------- */
.sk-topic-tag {
  font-family: var(--sk-sans);
  font-size: var(--sk-step--1);
  font-weight: 500;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.sk-topic-tag:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--surface-1);
}

/* ---------------- Matrix points ---------------- */
.sk-matrix-point:hover {
  transform: translate(-50%, -50%) scale(1.18) !important;
  z-index: 6;
}

/* clickable axis labels on the matrix edges */
.sk-axis-label { transition: color 0.15s ease; }
.sk-axis-label:hover { color: var(--accent-primary) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Argument cards (Fakten-Tab) ---------------- */
.sk-arg-card { transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.sk-arg-card:hover { background: var(--surface-2); transform: translateY(-1px); }

/* ---------------- Matrix tab: matrix left, content right ---------------- */
.sk-matrix-layout {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: matrix, then content below */
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
@media (min-width: 920px) {
  .sk-matrix-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .sk-matrix-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* ---------------- Consensus doc: text left, alternatives right ---------------- */
.sk-consensus-layout {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: text, then panel below */
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
@media (min-width: 920px) {
  .sk-consensus-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  .sk-consensus-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* ---------------- Form fields ---------------- */
input, textarea, select { font-family: var(--sk-sans); color: var(--text-primary); }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:focus, textarea:focus { border-color: var(--accent-primary) !important; }