/* ============================================================
   DIALETIKA — Design System
   Art direction: Swiss-editorial with intellectual warmth.
   Near-black ink on warm paper, Fraunces serif display +
   Inter Tight grotesque body, JetBrains Mono micro-labels.
   One deep cobalt accent. Hairline rules, no heavy shadows.
   ============================================================ */

/* --- Reset --- */
* { box-sizing: border-box; margin: 0; }

/* --- Tokens --- */
:root {
    color-scheme: light dark;

    /* Neutrals — warm paper hue (85), tinted, never gray */
    --gray-0: oklch(96.5% 0.008 85);     /* paper bg */
    --gray-1: oklch(99% 0.004 85);       /* card surface */
    --gray-2: oklch(93% 0.008 85);
    --gray-3: oklch(88% 0.01 85);
    --gray-4: oklch(74% 0.011 85);
    --gray-5: oklch(60% 0.012 85);
    --gray-6: oklch(48% 0.013 85);
    --gray-7: oklch(38% 0.014 85);
    --gray-8: oklch(28% 0.015 85);
    --gray-9: oklch(21% 0.016 85);      /* ink */

    /* Accent — deep cobalt */
    --accent: oklch(42% 0.13 257);
    --accent-hover: oklch(36% 0.13 257);
    --accent-subtle: color-mix(in oklch, var(--accent), var(--gray-0) 88%);

    /* Semantic colors */
    --ok: oklch(52% 0.13 150);
    --ok-subtle: color-mix(in oklch, var(--ok), transparent 88%);
    --warn: oklch(52% 0.17 28);
    --warn-subtle: color-mix(in oklch, var(--warn), transparent 88%);

    /* Semantic mapping */
    --bg: var(--gray-0);
    --panel: var(--gray-1);
    --ink: var(--gray-9);
    --muted: var(--gray-5);
    --line: oklch(0% 0 0 / 8%);
    --line-strong: oklch(0% 0 0 / 14%);

    /* Type */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "Inter Tight", -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --text-xs: clamp(0.69rem, 0.67rem + 0.1vw, 0.75rem);
    --text-sm: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --text-base: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
    --text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
    --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    --text-2xl: clamp(1.8rem, 1.45rem + 1.8vw, 2.6rem);
    --text-display: clamp(2.2rem, 1.5rem + 3.5vw, 3.8rem);

    /* Space */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2.5rem;
    --space-7: 4rem;
    --space-8: 6.5rem;

    /* Shape */
    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 14px;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 400ms;

    /* Layout */
    --content-max: 960px;
    --prose-max: 65ch;
  }

  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --gray-0: oklch(17% 0.012 257);
      --gray-1: oklch(20% 0.013 257);
      --gray-2: oklch(24% 0.014 257);
      --gray-3: oklch(28% 0.014 257);
      --gray-4: oklch(40% 0.012 257);
      --gray-5: oklch(58% 0.011 257);
      --gray-6: oklch(65% 0.01 257);
      --gray-7: oklch(74% 0.009 257);
      --gray-8: oklch(84% 0.006 257);
      --gray-9: oklch(92% 0.005 257);
      --accent: oklch(62% 0.14 257);
      --accent-hover: oklch(68% 0.14 257);
      --accent-subtle: color-mix(in oklch, var(--accent), var(--gray-0) 82%);
      --line: oklch(100% 0 0 / 7%);
      --line-strong: oklch(100% 0 0 / 13%);
      --ok: oklch(62% 0.12 150);
      --warn: oklch(62% 0.15 28);
    }
  }
  [data-theme="dark"] {
    --gray-0: oklch(17% 0.012 257);
    --gray-1: oklch(20% 0.013 257);
    --gray-2: oklch(24% 0.014 257);
    --gray-3: oklch(28% 0.014 257);
    --gray-4: oklch(40% 0.012 257);
    --gray-5: oklch(58% 0.011 257);
    --gray-6: oklch(65% 0.01 257);
    --gray-7: oklch(74% 0.009 257);
    --gray-8: oklch(84% 0.006 257);
    --gray-9: oklch(92% 0.005 257);
    --accent: oklch(62% 0.14 257);
    --accent-hover: oklch(68% 0.14 257);
    --accent-subtle: color-mix(in oklch, var(--accent), var(--gray-0) 82%);
    --line: oklch(100% 0 0 / 7%);
    --line-strong: oklch(100% 0 0 / 13%);
  }

/* --- Base --- */
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
  a:hover { color: var(--accent-hover); }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 1px;
  }
  ::selection { background: var(--accent-subtle); color: var(--ink); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  /* Scrollbar */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

/* --- Layout --- */
main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-6);
  min-height: calc(100dvh - 60px);
}
  main:has(#landing) { max-width: 1180px; }

  #topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) max(var(--space-6), calc((100vw - var(--content-max)) / 2 + var(--space-6)));
    background: color-mix(in oklch, var(--panel), transparent 22%);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
  }
  #brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  #brand:hover { color: var(--accent); }
  #nav a, #nav button {
    margin-left: var(--space-4);
    color: var(--ink);
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
  }
  #nav a:hover { color: var(--accent); }
  #nav button:hover { color: var(--accent); }
  #langbtn { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em; }

/* --- Components --- */
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
  }

  .muted {
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .error { color: var(--warn); }
  .success { color: var(--ok); }

  #auth-msg:empty { display: none; }
  #auth-msg.error {
    background: var(--warn-subtle);
    border: 1px solid color-mix(in oklch, var(--warn), transparent 60%);
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
  }
  #auth-msg.success {
    background: var(--ok-subtle);
    border: 1px solid color-mix(in oklch, var(--ok), transparent 60%);
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
  }

  .row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

  label {
    display: block;
    margin: var(--space-4) 0 var(--space-1);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.01em;
  }

  input, textarea, select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    font: inherit;
    font-size: var(--text-base);
    background: var(--panel);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    outline: none;
  }
  input::placeholder, textarea::placeholder { color: var(--muted); }

  button.primary {
    background: var(--accent);
    color: oklch(98% 0.005 85);
    border: 0;
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-5);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  }
  button.primary:hover { background: var(--accent-hover); }
  button.primary:active { transform: scale(0.98); }
  button.primary:disabled { opacity: 0.45; cursor: default; transform: none; }

  button.ghost {
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  button.ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  button.ghost:active { transform: scale(0.98); }
  button.ghost:disabled { opacity: 0.4; cursor: default; }

  .clickable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
  .clickable:hover {
    border-color: var(--accent);
    translate: 0 -2px;
    box-shadow: 0 6px 18px -8px oklch(0% 0 0 / 18%);
  }

  /* Landing — asymmetric split: editorial hero + rolling showcase | auth card */
  #landing {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px);
    gap: var(--space-8);
    align-items: center;
    min-height: min(680px, calc(100dvh - 160px));
  }
  #hero .display {
    font-size: var(--text-display);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: var(--space-2) 0 var(--space-4);
  }
  /* router focuses the h1 for screen readers; no ring needed on a non-interactive heading */
  #hero .display:focus, #hero .display:focus-visible { outline: none; }
  #hero .lede {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.4;
    max-width: 44ch;
    color: var(--gray-7);
  }
  #rolling-label {
    margin: var(--space-6) 0 var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line-strong);
  }
  #ticker {
    overflow: hidden;
    height: min(300px, 34dvh);
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 82%, transparent);
  }
  #ticker-track { animation: tickRoll var(--tick-dur, 48s) linear infinite; }
  #ticker:hover #ticker-track { animation-play-state: paused; }
  @keyframes tickRoll { to { translate: 0 -50%; } }
  @media (prefers-reduced-motion: reduce) {
    #ticker-track { animation: none; }
    #ticker { overflow-y: auto; mask-image: none; -webkit-mask-image: none; }
  }
  .tick {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
  }
  .tick-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  #auth-card { padding: var(--space-6); margin: 0; }

  /* Pills */
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 99px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
    background: color-mix(in oklch, var(--accent), transparent 90%);
    color: var(--accent);
  }
  .pill.live {
    background: color-mix(in oklch, var(--ok), transparent 88%);
    color: var(--ok);
  }

  /* Chat */
  #chat {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: calc(100dvh - 130px);
    min-height: 0;
  }
  #theme-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--panel);
    margin-bottom: var(--space-3);
  }
  #theme-panel summary {
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
  }
  #theme-panel iframe { width: 100%; height: 220px; border: 0; border-top: 1px solid var(--line); }

  #msgs {
    overflow-y: auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .msg {
    max-width: 72%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-l);
    background: var(--panel);
    border: 1px solid var(--line);
    align-self: flex-start;
    overflow-wrap: anywhere;
  }
  .msg.mine {
    align-self: flex-end;
    background: var(--accent-subtle);
    border-color: color-mix(in oklch, var(--accent), transparent 75%);
  }
  .msg.sys {
    align-self: center;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    max-width: 100%;
    padding: var(--space-2);
  }
  .msg.host {
    align-self: center;
    background: color-mix(in oklch, oklch(85% 0.08 80), transparent 82%);
    border-color: color-mix(in oklch, oklch(75% 0.1 80), transparent 65%);
    border-radius: var(--radius-m);
    max-width: 85%;
  }
  .msg .quote {
    border-left: 2px solid var(--accent);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--muted);
    background: color-mix(in oklch, var(--ink), transparent 94%);
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
  }
  .msg .meta {
    font-size: var(--text-xs);
    color: var(--muted);
    text-align: right;
    margin-top: var(--space-1);
    font-variant-numeric: tabular-nums;
  }
  .ticks { letter-spacing: -1px; }
  .ticks.seen { color: var(--accent); }

  #composer {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
    align-items: flex-end;
  }
  #composer textarea {
    resize: none;
    height: 2.7rem;
  }
  #reply-bar {
    font-size: var(--text-sm);
    color: var(--muted);
    padding: var(--space-2) var(--space-3);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    margin-top: var(--space-2);
    display: flex;
    justify-content: space-between;
  }
  #reply-bar[hidden] { display: none; }

  #status-bar {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--muted);
    padding: var(--space-1) 0;
  }

  #context-bar {
    margin: var(--space-2) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  #context-bar[hidden] { display: none; }
  .ctx-task {
    background: color-mix(in oklch, oklch(85% 0.08 80), transparent 82%);
    border: 1px solid color-mix(in oklch, oklch(75% 0.1 80), transparent 65%);
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }
  .ctx-step {
    background: var(--accent-subtle);
    border: 1px solid color-mix(in oklch, var(--accent), transparent 75%);
    border-radius: var(--radius-m);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
  }

  #filter-msg[hidden], #theme-panel[hidden], #moveon[hidden] { display: none; }
  #moveon { white-space: nowrap; }

  /* Host dashboard */
  #roomgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-3);
  }
  .roomcard {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--panel);
    padding: var(--space-4);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .roomcard.stale { border-color: var(--warn); }
  .roomcard.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
  .roomcard.movetarget {
    outline: 2px dashed var(--accent);
    outline-offset: 2px;
  }

  .seatchip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--line-strong);
    border-radius: 99px;
    padding: 0.15rem 0.6rem;
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: grab;
    background: var(--bg);
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .seatchip.task0 {
    background: color-mix(in oklch, oklch(80% 0.06 250), transparent 80%);
    border-color: color-mix(in oklch, oklch(70% 0.08 250), transparent 55%);
  }
  .seatchip.task1 {
    background: color-mix(in oklch, oklch(80% 0.06 30), transparent 80%);
    border-color: color-mix(in oklch, oklch(70% 0.08 30), transparent 55%);
  }
  .seatchip.armed {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }
  .seatchip .tasklbl {
    font-weight: 700;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
  }
  .seatchip:hover { border-color: var(--accent); }

  .dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--muted);
    display: inline-block;
  }
  .dot.on { background: var(--ok); }
  .dropover { outline: 2px dashed var(--accent); }

  #roompanel { max-height: 380px; overflow-y: auto; }

  pre.report {
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--bg);
    padding: var(--space-4);
    border-radius: var(--radius-m);
    border: 1px solid var(--line);
  }
  img.qr { border: 1px solid var(--line); border-radius: var(--radius-m); }
  /* Public Debates topic cards: inline text brief, tap to expand */
  .topic-card { cursor: pointer; }
  .topic-brief {
    color: var(--muted);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .topic-card[aria-expanded="true"] .topic-brief { display: block; overflow: visible; }
  .topic-actions { margin-top: var(--space-3); }
  .avatar {
    width: 72px;
    height: 72px;
    border-radius: 99px;
    object-fit: cover;
    border: 1px solid var(--line);
  }
  .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;
  }
  .research-notice {
    font-size: var(--text-xs);
    color: var(--muted);
    font-family: var(--font-mono);
    letter-spacing: 0.01em;
    margin: var(--space-1) 0;
  }

  /* Guided tour */
  #tour-pop {
    position: fixed;
    z-index: 100;
    max-width: min(340px, calc(100vw - 16px));
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-m);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    box-shadow: 0 12px 40px -12px oklch(0% 0 0 / 35%);
  }
  #tour-pop h3 { margin: var(--space-1) 0 var(--space-2); }
  #tour-pop .tour-body { color: var(--gray-7); line-height: 1.5; }
  .tour-hl {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--radius-s);
  }
  .tour-replay {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 99px;
    font-family: var(--font-mono);
    font-weight: 700;
  }

/* --- Utilities --- */
  /* Micro-label: mono, uppercase, tracked out — Swiss signature */
  .micro-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
  /* Eyebrow label for section headers */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-bottom: var(--space-2);
    display: block;
  }
  .hairline {
    border: 0;
    border-top: 1px solid var(--line);
    margin: var(--space-5) 0;
  }

/* Admin dashboard */
.admin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.admin-stats {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.01em;
  line-height: 1.5;
  max-width: 50ch;
}
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: thin;
}
.admin-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.admin-panel { animation: adminFade var(--dur-base) var(--ease-out); }
.admin-panel.hidden { display: none; }
@keyframes adminFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Host dashboard: tabs + analysis infographics --- */
#an-pie[hidden] { display: none; }
/* the router focuses each view's h1 for screen readers; no ring on a
   non-interactive heading */
h1[tabindex]:focus, h1[tabindex]:focus-visible { outline: none; }

.tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line-strong);
  margin: var(--space-4) 0 var(--space-5);
}
.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

#an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  align-items: start;
}
#an-map-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--bg);
  overflow: hidden;
}
#an-scatter { display: block; }
#an-scatter circle { cursor: pointer; }
#an-scatter circle:hover, #an-scatter circle:focus-visible, #an-scatter circle.hl {
  stroke: var(--ink);
  stroke-width: 2.5;
  r: 7;
}
#an-tip {
  min-height: 3.4em;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--accent);
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
#an-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xs); }
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); }
.legend-item .dot { width: 9px; height: 9px; }

.statgrid { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span { color: var(--muted); font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }

/* Ranked per-room rows: count bar (A·B) + words/msg median–IQR band */
.roomrank {
  display: grid;
  grid-template-columns: 1.6rem 4.6rem minmax(90px, 1fr) auto minmax(80px, 0.7fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: 0.3rem 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--line);
}
.roomrank:last-child { border-bottom: 0; }
.roomrank .rank { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.roomrank .bar { display: flex; height: 10px; border-radius: 99px; background: color-mix(in oklch, var(--ink), transparent 94%); overflow: hidden; }
.roomrank .bar i { display: block; height: 100%; background: var(--accent); }
.roomrank .bar i.b { background: var(--gray-4); }
.roomrank .barnum { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); white-space: nowrap; }
.roomrank .iqr { position: relative; height: 10px; border-radius: 99px; background: color-mix(in oklch, var(--ink), transparent 94%); }
.roomrank .iqr .band { position: absolute; top: 0; height: 100%; min-width: 2px; border-radius: 99px; background: color-mix(in oklch, var(--accent), transparent 55%); }
.roomrank .iqr .med { position: absolute; top: -2px; width: 2px; height: 14px; border-radius: 1px; background: var(--accent); translate: -50% 0; }
.roomrank-head {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: var(--space-3);
}

.barrow { display: flex; align-items: center; gap: var(--space-3); padding: 0.2rem 0; font-size: var(--text-sm); }
.barrow .barlbl { flex: 0 0 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .bar { flex: 1; display: flex; height: 10px; border-radius: 99px; background: color-mix(in oklch, var(--ink), transparent 94%); overflow: hidden; }
.barrow .bar i { display: block; height: 100%; background: var(--accent); }
.barrow .bar i.b { background: var(--gray-4); }
.barrow .barnum { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }

/* Responsive */
@media (max-width: 900px) {
  #landing { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
  #ticker { height: 200px; }
  main { padding: var(--space-6) var(--space-5); }
}
@media (max-width: 640px) {
  .msg { max-width: 88%; }
  main { padding: var(--space-5) var(--space-4); }
  #topbar { padding: var(--space-3) var(--space-4); }
  #nav a, #nav button { margin-left: var(--space-3); }
}

/* Reveal animation (progressive enhancement) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card {
      animation: cardRise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    @keyframes cardRise {
      from { opacity: 0; translate: 0 0.8rem; }
    }
  }
}