/* ============================================================
   tables.css — Tables hub
   The unified Tables section: a two-pane reference library. The left menu
   pins a Name Generator entry, then lists the 130 roll tables grouped by
   category (searchable). The right pane shows the Name Generator form or a
   selected roll table.

   Merges the former names.css (Name Generator) with the roll-table library
   styles (formerly in components.css). Reuses existing OSR tokens; no new
   color tokens. Respects prefers-reduced-motion.
   ============================================================ */

/* Inline header row (Forge/Oracle pattern). Fortunes has no page-level action
   button — its primary control (the table filter) lives in the library menu —
   so this row carries the title alone but is tightened to cut the stacked
   whitespace and stay consistent with the other section heads. */
.tables-module__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

/* ============================================================
   Roll-Table / Tables library — two-pane shell
   ============================================================ */

.rt-library {
  margin-bottom: var(--space-xl);
}

.rt-library__heading {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  color: var(--color-heading);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-md);
}

/* Two-pane grid: fixed-ish menu column + fluid display column.
   Stacks to a single column on narrow viewports (see media query). */
.rt-library__panes {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* ---- Left menu ---- */
.rt-library__menu {
  background: radial-gradient(ellipse at 30% 20%, #252018 0%, #1e1a16 70%);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  /* Sticky on tall viewports so the menu stays in reach while scrolling. */
  position: sticky;
  top: var(--space-md);
  max-height: calc(100vh - 2 * var(--space-md));
}

.rt-menu__search {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.rt-menu__search-input {
  width: 100%;
}

/* Pinned tools (Name Generator) sit above the scrollable category list and
   stay visible while the groups scroll. */
.rt-menu__pinned {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}

.rt-menu__link--pinned {
  font-family: var(--font-heading-ui);
  font-size: 0.82rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-heading);
}

/* Scrollable category list */
.rt-menu__groups {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.rt-menu__loading {
  font-style: italic;
  font-size: 0.9rem;
  padding: var(--space-md);
  margin: 0;
}

.rt-menu__no-results {
  font-style: italic;
  font-size: 0.9rem;
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  border-top: 1px solid var(--color-border);
}

/* Category group — collapsible <details>; the summary is a sticky header
   so the active category label stays visible while its list scrolls. */
.rt-menu__group {
  border-bottom: 1px solid var(--color-border);
}

.rt-menu__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  user-select: none;
  font-family: var(--font-heading-ui);
  font-size: 0.82rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-heading);
  background-color: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 2;
  list-style: none;
}

.rt-menu__group-title::-webkit-details-marker {
  display: none;
}

/* Disclosure caret in front of the category name */
.rt-menu__group-title::before {
  content: '\25B8'; /* ► */
  color: var(--color-text-muted);
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
  margin-right: var(--space-xs);
}

.rt-menu__group[open] > .rt-menu__group-title::before {
  transform: rotate(90deg);
}

.rt-menu__group-name {
  flex: 1;
}

.rt-menu__group-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.rt-menu__group-title:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.rt-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rt-menu__link {
  appearance: none;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.4rem var(--space-md) 0.4rem calc(var(--space-md) + 0.5rem);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.rt-menu__link:hover {
  background-color: var(--color-surface-hover);
}

.rt-menu__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.rt-menu__link.is-active {
  background-color: var(--color-oracle-bg);
  border-left-color: var(--color-accent);
  color: var(--color-heading);
}

.rt-menu__link-name {
  min-width: 0;
}

.rt-menu__link-die {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ---- Display pane ---- */
.rt-library__display {
  background: radial-gradient(ellipse at 30% 20%, #252018 0%, #1e1a16 70%);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-lg);
  min-height: 240px;
}

.rt-display__empty {
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.rt-display__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.rt-display__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-heading);
  letter-spacing: 0.03em;
  margin: 0;
}

.rt-display__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}

.rt-display__die {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-accent);
}

.rt-display__source {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-cinzel-caps);
  color: var(--color-text-muted);
}

.rt-display__verbiage {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--color-text-muted);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-md);
}

.rt-display__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

/* Rolled value readout, e.g.
   "d20 = 14 — Air: A rogue wind blows through. DC 15 DEX or the flames go out." */
.rt-display__roll-readout {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-accent);
  min-height: 1.2em;
  flex: 1 1 16rem;
  min-width: 0;
  line-height: var(--lh-body);
}

/* Rulebook-style ruled roll table. The skeleton — width/collapse/body-font, the
   uppercase muted Cinzel sticky <th>, the ruled <td> padding/border/last-row
   strip, zebra, the framing wrap border, AND the canonical row-hover — now all
   come from the shared .sd-dtable base (lore.css). The markup carries
   `class="sd-dtable rt-table"`, `class="sd-dtable__wrap rt-table__wrap"`, and the
   rows/cells carry `.sd-dtable__row`/`.sd-dtable__td` alongside the rt-specific
   classes (2026-06-24, KDL 2026-06-27 — table consolidation, mirroring the
   .feedback-table precedent). Only the roll-table-specific deltas live below: the
   narrow roll column, the mono accent roll cell, and the dice bounce/landed
   states. */
.rt-table__col-roll {
  width: 4.5rem;
  white-space: nowrap;
}

.rt-table__roll {
  font-family: var(--font-mono);
  color: var(--color-accent);
  white-space: nowrap;
}

.rt-table__result {
  color: var(--color-text);
}

/* ---- Bounce / landing highlight ----
   Cells now carry .sd-dtable__td, so the shared zebra rule
   (.sd-dtable__row:nth-of-type(even) .sd-dtable__td, lore.css) has specificity
   (0,3,0). These transient roll-landing highlights must out-rank zebra on even
   rows, so they qualify with .sd-dtable__td too (2026-06-24, KDL 2026-06-27). */
.rt-table__row.is-bouncing td.sd-dtable__td {
  background-color: rgba(100, 149, 237, 0.16);
  box-shadow: inset 3px 0 0 0 var(--color-accent);
}

.rt-table__row.is-landed td.sd-dtable__td {
  background-color: rgba(100, 149, 237, 0.26);
  box-shadow: inset 3px 0 0 0 var(--color-accent);
  animation: rt-land-pulse 600ms ease-out 1;
}

@keyframes rt-land-pulse {
  0%   { background-color: rgba(100, 149, 237, 0.55); }
  100% { background-color: rgba(100, 149, 237, 0.26); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-table__row.is-landed td {
    animation: none;
  }
}

/* ---- Responsive: stack panes; menu becomes a capped scroll region ---- */
@media (max-width: 720px) {
  .rt-library__panes {
    grid-template-columns: 1fr;
  }

  .rt-library__menu {
    position: static;
    max-height: 320px;
  }
}

/* ============================================================
   Name Generator — display-pane view
   Reuses .field / .btn / .module-view and mirrors the segmented-control
   look for the kind selector. Results are a scannable list with per-row copy.
   ============================================================ */

.names-pane {
  display: flex;
  flex-direction: column;
}

.names-module__intro {
  margin: 0 0 var(--space-lg);
  max-width: 60ch;
}

.names-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Ancestry/place + count sit on one responsive row. */
.names-form__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  align-items: end;
}

/* The kind toggle is a true either/or: only the active mode's controls show.
   .field sets display, which would out-specify the UA [hidden] rule and leave
   the inactive control visible — this guard makes [hidden] win. */
.names-form__field[hidden] {
  display: none;
}

.names-form__count {
  max-width: 10rem;
}

.names-form__error {
  background-color: var(--color-danger-bg);
  border-left: 3px solid var(--color-danger);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: var(--space-sm) var(--space-md);
}

.names-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ---- Kind selector — segmented control (mirrors .enc-mode; no new tokens) ---- */

.names-kind {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--color-border);
}

.names-kind__btn {
  font-family: var(--font-heading-ui);
  font-size: 0.72rem;
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: none;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.names-kind__btn + .names-kind__btn {
  border-left: 1px solid var(--color-border);
}

.names-kind__btn:hover,
.names-kind__btn:focus-visible {
  color: var(--color-accent);
}

.names-kind__btn--active {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.names-kind__btn--active:hover {
  color: var(--color-bg);
}

/* ---- Result region ---- */

.names-empty__text {
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0;
}

.names-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.names-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.names-result__heading {
  font-family: var(--font-heading-ui);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-cinzel-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

.names-result__again {
  flex: none;
}

/* ---- Name list — clean, scannable rows with a gentle settle on first paint;
   dropped under reduced-motion. ---- */

.names-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-xs);
}

.names-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: var(--space-xs) var(--space-sm);
  transition: border-color 0.12s ease, background-color 0.12s ease;
  animation: names-row-reveal 0.28s ease both;
}

.names-row:hover {
  border-color: var(--color-accent);
}

@keyframes names-row-reveal {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.names-row__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.names-row__primary {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.names-row__parts {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.names-row__sep {
  color: var(--color-border);
}

/* Sub-line wrapper: name parts + rolled gender sit together beneath the full
   name (character rows only). */
.names-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
}

/* Rolled gender — a quiet chip, 50/50 Male/Female, rolled per name at
   generation. Kept subdued so it reads as metadata, not part of the name. */
.names-row__gender {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: 0.02rem 0.34rem;
}

/* Per-row copy control — quiet until hover/focus, then accents. */
.names-row__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.names-row__copy:hover,
.names-row__copy:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.names-row__copy-icon {
  width: 0.95rem;
  height: 0.95rem;
}

/* Copied confirmation — flips to the heal/confirm accent briefly. */
.names-row__copy--copied {
  color: var(--color-heal-hover);
  border-color: var(--color-heal-hover);
}

/* ---- Responsive ---- */

/* Touch-target floor (mobile-optimization Phase 3, 2026-06-14): the per-row
   copy button is 1.7rem (~27px) by desktop design. Grow its tap target to
   ~44px on touch widths only; the glyph (.names-row__copy-icon) is unchanged,
   so desktop density is preserved. */
@media (max-width: 700px) {
  .names-row__copy {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 480px) {
  .names-form__controls {
    grid-template-columns: 1fr;
  }
  .names-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .names-row,
  .names-kind__btn,
  .names-row__copy {
    transition: none;
  }
  .names-row {
    animation: none;
  }
}