/*
  LEO round table stylesheet
  ------------------------------------------------------------------
  Owned by the `roundtable` agent (Phase 4, PLAN.md). Styles the real
  server-rendered SVG seating chart and its below-720px / no-JS
  fallback list rendered by src/components/roundtable.mjs, mounted by
  src/templates/pages/home.mjs inside `.tablewrap#roundtable` (page-
  shell's wrapper — margin/centring for the whole widget lives there,
  in layout.css; everything below is internal to the widget).

  Client change, 2026-08-30: the ring used to carry 41 seats (23 filled
  + 18 open industries as dashed seats). The 18 open seats have been
  pulled off the ring entirely — the ring is now exactly the 23 filled
  member seats, rendered as plain circles with no initials inside.
  `.rt-seat--open` / `.rt-seatdot--open` / `.rt-plus` /
  `.rt-fallback-item--open` (the old ring-seat and ring-fallback "open"
  variants) are gone with them — nothing in this file still emits those
  classes; if you find one in dist/, it is stale output, not live CSS.

  A later pass (also 2026-08-30) briefly reintroduced the 18 open
  industries as their own `.rt-open` "recruiting" card section rendered
  by this component directly under the ring. That duplicated
  home.mjs's own pre-existing "Open seats" section further down the
  home page (same 18 industries, "Seat open" appearing twice on one
  page) and has been removed again — `.rt-open`, `.rt-open-heading`,
  `.rt-open-lede`, `.rt-open-list`, `.rt-open-link`, `.rt-open-icon`
  and `.rt-open-text` no longer exist anywhere in this file or in
  roundtable.mjs's output. Open industries are home.mjs's `.seat`/
  `.seats` classes (layout.css) only — see that file.

  Class names are prefixed `rt-` deliberately: layout.css already owns
  unrelated `.seat`/`.seats` classes for a separate, non-linked "open
  industries" list further down the home page (home.mjs's own
  `seatsSection`, driven straight from seats.json, independent of this
  component) — no collisions here.

  Load order: tokens.css, base.css, layout.css, then this file (linked
  by roundtable.mjs itself, since build/pages.mjs does not yet forward a
  per-page stylesheet list from the page template — see roundtable.mjs's
  header comment).
  ------------------------------------------------------------------
*/

.rt-widget {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================
   1. THE SVG STAGE (>= 720px)
   ========================================================== */
.rt-stage {
  position: relative;
  width: min(560px, 92vw);
}

.rt-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.rt-ring {
  fill: none;
  stroke: var(--surface-tint);
  stroke-width: 1.5;
}

.rt-ring--inner {
  stroke: var(--border-soft);
}

/* -------- filled seats (the only seats on the ring — plain circles,
   no initials/text inside; see roundtable.mjs's renderSeat) -------- */
.rt-seatdot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
  transition: fill var(--duration-base) var(--ease-standard), stroke var(--duration-base) var(--ease-standard), stroke-width var(--duration-base) var(--ease-standard);
}

.rt-seat--filled:hover .rt-seatdot,
.rt-seat--filled:focus-visible .rt-seatdot,
.rt-seat--filled.is-active .rt-seatdot {
  fill: var(--highlight);
  stroke: var(--highlight);
  stroke-width: 2.5;
}

/* -------- seat focus ring (SVG-safe: box-shadow does not reliably
   paint on inline SVG <a> elements, so give seats their own halo
   rather than relying on base.css's global :focus-visible box-shadow) -------- */
.rt-seat {
  cursor: pointer;
  outline: none;
}

.rt-seat:focus-visible .rt-seatdot {
  filter: drop-shadow(0 0 0 3px var(--focus-ring-inner)) drop-shadow(0 0 0 5px var(--focus-ring));
}

/* -------- entrance animation (requirement 8: disabled entirely, not
   shortened, under prefers-reduced-motion: reduce) --------
   Default (and reduced-motion) state: fully visible, no animation at
   all. The animated version only exists inside the no-preference media
   query below, so a reduced-motion user's browser never even parses an
   `animation` declaration for these elements. */
.rt-seat {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .rt-seat {
    opacity: 0;
    transform-origin: center;
    animation: rt-seat-in var(--duration-slower) var(--ease-standard) both;
    animation-delay: calc(var(--i, 0) * 16ms);
  }

  @keyframes rt-seat-in {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ==========================================================
   2. CENTRE LABEL
   ========================================================== */
.rt-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding: 22%;
}

.rt-core-inner {
  text-align: center;
}

.rt-core-kicker {
  font-family: var(--font-heading-alt);
  /* Load-bearing text (part of the aria-live "who is this seat"
     announcement in .rt-core-inner), not decorative — must clear the
     12px floor. --text-2xs (11px) fails that; tokens.css has no exact
     12px step in its static scale, so this uses --text-xs (13.5px),
     the smallest token that is >=12px. See DESIGN-TOKENS.md / ux-qa
     Phase 4 fix-list. */
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.rt-core-title {
  font-family: var(--font-heading-alt);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-3) 0 0;
  line-height: var(--leading-tight);
  color: var(--text);
}

.rt-core-sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
  line-height: var(--leading-normal);
}

.rt-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-9);
  text-align: center;
}

/* ==========================================================
   3. NO-JS / BELOW-720px FALLBACK
   The same 23 member links as the SVG ring, as a plain list (the 18
   open industries are not part of the ring or this fallback — they
   are not rendered by this component at all; home.mjs's own
   pre-existing "Open seats" section, styled by layout.css, is the
   only place they appear). Hidden with display:none (removes it
   from the accessibility tree too, so nothing is announced twice)
   whenever the SVG stage is the one actually laid out, and vice versa
   — see the media queries below. This list is what requirement 1
   relies on for "every seat is still a plain link" at any width with
   JS off, and what requirement 5 relies on for the mobile fallback.
   ========================================================== */
.rt-fallback {
  display: none;
  width: 100%;
  list-style: none;
  margin: var(--space-11) 0 0;
  padding: 0;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.rt-fallback-item a {
  display: block;
  height: 100%;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.rt-fallback-item a:hover,
.rt-fallback-item a:focus-visible {
  border-color: var(--accent);
}

.rt-fallback-item strong {
  display: block;
  font-family: var(--font-heading-alt);
  font-size: var(--text-sm);
  color: var(--text);
}

.rt-fallback-item span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

/* ==========================================================
   4. RESPONSIVE — the mobile fallback (requirement 5)
   Below ~720px the SVG stage (small dots, tiny hit targets) is
   replaced outright by the two-column link grid rather than scaled
   further down, so nothing ever overflows and no text goes below
   12px. Both blocks exist server-side at all times; only display
   toggles here.
   ========================================================== */
@media (max-width: 719px) {
  .rt-stage,
  .rt-hint {
    display: none;
  }

  .rt-fallback {
    display: grid;
  }
}

@media (min-width: 720px) {
  .rt-fallback {
    display: none;
  }
}

/* Single column once two columns can no longer fit an md/lg-weight
   14px+ name plus role without the card itself overflowing — well
   above the 320px floor CLAUDE.md's a11y bar requires. */
@media (max-width: 380px) {
  .rt-fallback {
    grid-template-columns: 1fr;
  }
}