/* base.css — the theme-neutral floor under every neoseek theme.
 *
 * It does three things and nothing else:
 *   1. declares the cascade layers (a theme, then a layout's geometry over it:
 *      layouts/LAYOUTS.md), so each slots in at a known depth;
 *   2. sets the DEFAULT TOKENS (the --ns-* custom properties), which a theme
 *      overrides — so a theme that only sets tokens is already a theme;
 *   3. keeps the page usable with no theme at all: legible, keyboard-focus
 *      visible, the log scrolls, hidden things stay hidden.
 *
 * It has no opinion about how anything LOOKS beyond that. Themes live in
 * themes/<name>.css and write inside `@layer theme { … }`. Contract:
 * themes/CONTRACT.md.
 */
@layer reset, base, theme, layout, override;
/* the default game components' geometry (D73): base-layer, tokens only */
@import url("games.css") layer(base);
/* the room's topics (D70): the door, chat tag literals, a literal's menu */
@import url("roomtags.css") layer(base);

/* ── reset: structural guarantees; `!important` here outranks any theme ── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  /* hidden means hidden — views are switched with the hidden attribute */
  [hidden] { display: none !important; }
  /* a user who asked for less motion gets less motion, whatever the theme says */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ── base: tokens and a usable, unstyled page ─────────────────────────── */
@layer base {
  :root {
    /* colour */
    --ns-bg: #ffffff;          /* the page ground */
    --ns-fg: #161616;          /* body text */
    --ns-muted: #6b6b6b;       /* metadata, hints (≥4.5:1 on --ns-bg) */
    --ns-surface: #ffffff;     /* raised panels: editor, notes, status */
    --ns-sunk: #f4f4f4;        /* recessed ground: the chat log */
    --ns-line: #d9d9d9;        /* hairlines and quiet borders */
    --ns-accent: #c43a00;      /* the one accent: the ember, the primary action */
    --ns-accent-fg: #ffffff;   /* text drawn on --ns-accent */
    --ns-warn: #b3261e;        /* warnings, errors, the fork */
    --ns-ok: #2e7d32;          /* the rare good news */
    --ns-focus: #1a5fd0;       /* the keyboard focus ring */
    /* type */
    --ns-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ns-font-display: var(--ns-font-body);
    --ns-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --ns-size: 16px;
    --ns-leading: 1.5;
    /* shape */
    --ns-radius: 0;
    --ns-border: 1px;
    --ns-gap: 1rem;
    --ns-measure: 40rem;
    /* motion */
    --ns-dur: 160ms;
    --ns-ease: cubic-bezier(.2, .7, .2, 1);
    color-scheme: light dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-scheme="light"]) {
      --ns-bg: #121212; --ns-fg: #ececec; --ns-muted: #a0a0a0; --ns-surface: #1a1a1a;
      --ns-sunk: #0c0c0c; --ns-line: #333; --ns-accent: #ff6a2b; --ns-accent-fg: #140800;
      --ns-warn: #ff8a80; --ns-ok: #81c784; --ns-focus: #8ab4ff;
    }
  }
  :root[data-scheme="dark"] {
    --ns-bg: #121212; --ns-fg: #ececec; --ns-muted: #a0a0a0; --ns-surface: #1a1a1a;
    --ns-sunk: #0c0c0c; --ns-line: #333; --ns-accent: #ff6a2b; --ns-accent-fg: #140800;
    --ns-warn: #ff8a80; --ns-ok: #81c784; --ns-focus: #8ab4ff;
    color-scheme: dark;
  }
  :root[data-scheme="light"] { color-scheme: light; }

  body {
    background: var(--ns-bg); color: var(--ns-fg);
    font-family: var(--ns-font-body); font-size: var(--ns-size); line-height: var(--ns-leading);
    padding: 1rem 16px;
  }
  :focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 2px; }
  .ns-frame { max-width: var(--ns-measure); margin-inline: auto; }
  button, input, select { font: inherit; }
  code, .ns-tag, .ns-hash, .ns-key { font-family: var(--ns-font-mono); }
  .ns-key { word-break: break-all; }

  /* the skip link and the screen-reader-only label */
  .ns-vh, .ns-skip:not(:focus) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  /* just enough that an unthemed page reads and works */
  .ns-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
  .ns-log { list-style: none; padding: 0; max-height: 60vh; overflow-y: auto; }
  .ns-warn { color: var(--ns-warn); font-weight: 700; }
  .ns-field__input, .ns-say__input { width: 100%; }
  .ns-deco { pointer-events: none; }
  .ns-noscript { max-width: 32rem; margin: 3rem auto; }
}

/* INVARIANTS no theme or layout may undo. A topic is typed by a stranger and
   can be one long unbroken word ("byzantine-agreement{2}"). Themes like to
   keep a tag on one line (white-space: nowrap), which is right for short
   words and pushes the whole page sideways for long ones. A tag has no
   spaces inside it, so `normal` wrapping keeps short tags whole anyway; this
   only lets an over-long word break rather than overflow. */
@layer override {
  .ns-tag { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .ns-status__line, .ns-status__detail { overflow-wrap: anywhere; }
  /* the switchers grew a layout picker (D72); a theme that laid them out as
     one inline row for two controls must still fit three on a phone */
  .ns-switcher { flex-wrap: wrap; max-width: 100%; }
  .ns-switcher__select { max-width: 100%; min-width: 0; }
  /* `.ns-card` is ALSO the panel class every theme dresses on the explainer
     (padded, flex column, shadowed). A playing card inside a game is not that
     panel: undo the panel's geometry (games.css supplies the card's own). */
  .ns-game .ns-card {
    display: inline-block; flex-direction: initial; gap: 0; margin: 0; transform: none; position: static;
    padding: .15rem .3rem; box-shadow: none; background: var(--ns-bg); color: var(--ns-fg);
    border: var(--ns-border) solid var(--ns-line); border-radius: clamp(3px, var(--ns-radius), .4rem);
  }
  .ns-game .ns-card[data-red="true"] { color: var(--ns-warn); }
  .ns-game .ns-card::before, .ns-game .ns-card::after { content: none; }
  .ns-game .ns-holdem .ns-card { padding: .25rem 0; }
  .ns-game .ns-holdem .ns-card[data-down="true"] { color: var(--ns-muted); background: repeating-linear-gradient(45deg, var(--ns-sunk) 0 3px, var(--ns-bg) 3px 6px); }
  .ns-game .ns-holdem .ns-card[data-slot="true"] { border-style: dashed; color: var(--ns-muted); background: none; }
}