/* ui/station/station-crew.css — THE STATION crew screen (docs/station-crew-screen-spec.md §8).
 * Mission-control language (docs/ui-design-system.md); reuses the .ob-overlay
 * scaffolding from onboarding.css. Three columns on desktop, a vertical stack on
 * phone; --ui-scale honoured; 16px side gutter; no horizontal scroll. Per-crew
 * ring accent (surface/mid/deep) matches THE TAPESTRY's ring treatment. */

/* Per-screen scroll seam — same pattern as .ob-start / .ob-missions .ob-stage:
 * a tall roster (three sheets open on a short desktop) must scroll INSIDE the
 * overlay, never the page. */
.ob-station .ob-stage {
  height: 100%;
  overflow-y: auto;
  align-items: stretch;
  padding: clamp(16px, 4vh, 48px) 16px;
  box-sizing: border-box;
}

.ob-station .ob-heading { text-align: center; }
.ob-station .ob-rule { justify-content: center; margin-bottom: clamp(14px, 3vh, 28px); }

/* Roster: three columns on desktop, one column stacked on phone. */
.station-roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  width: min(1100px, 100%);
  margin: 0 auto clamp(16px, 4vh, 32px);
}
@media (max-width: 760px) {
  .station-roster { grid-template-columns: 1fr; }
}

/* One crew panel. --ring is set per panel by the ring-accent classes below and
 * drives the silhouette colour, the border tint and the play button. */
.station-crew {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 16px 14px;
  border: 1px solid color-mix(in srgb, var(--ring, var(--green)) 45%, transparent);
  background: color-mix(in srgb, var(--ring, var(--green)) 6%, var(--void));
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--ring, var(--green)) 8%, transparent);
}

/* Ring accents — same palette as tapestry.css .lr-ring-* (surface green /
 * mid cyan / deep gold). Kept subtle: the crew are your side, not a spoiler. */
.station-ring-surface { --ring: var(--green); }
.station-ring-mid     { --ring: var(--sort-accent, #4fd6ff); }
.station-ring-deep    { --ring: var(--rarity-exotic, #ffd34d); }

/* Portrait — the Option-B silhouette card. 4:5 aspect, backdrop owned here so a
 * swap to a live (transparent) mesh portrait needs no layout change. */
.station-portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%,
      color-mix(in srgb, var(--ring, var(--green)) 14%, transparent), transparent 70%),
    var(--void);
  border: 1px solid var(--fx-green-line-dim, rgba(120, 200, 160, 0.2));
  overflow: hidden;
}
.station-portrait-img { width: 100%; height: 100%; object-fit: contain; }
.station-silhouette {
  width: 78%;
  height: 78%;
  color: color-mix(in srgb, var(--ring, var(--green)) 80%, #ffffff 6%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ring, var(--green)) 45%, transparent));
  opacity: 0.92;
}
.station-optic {
  fill: #a9f0ff;                       /* cyan optic — the fx vocabulary's "on" tell */
  stroke: none;
}

.station-id { text-align: center; }
.station-name {
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 2px;
  color: color-mix(in srgb, var(--ring, var(--green)) 85%, #ffffff);
}
.station-role {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--green);
  opacity: 0.7;
  margin-top: 3px;
}

/* ▶ PLAY intro — inherits .ob-menu-btn; tinted to the ring, and the ■ STOP
 * state fills so it reads as "live". */
.station-play { width: 100%; text-align: center; }
.station-play .ob-menu-label { letter-spacing: 2px; }
.station-play.is-playing {
  background: color-mix(in srgb, var(--ring, var(--green)) 22%, var(--void));
  border-color: var(--ring, var(--green));
  color: color-mix(in srgb, var(--ring, var(--green)) 90%, #ffffff);
}

/* Transcript — hidden until this crew plays; the muted/deaf read (spec §8). */
.station-transcript {
  display: none;
  margin: 2px 0 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--green);
  opacity: 0.9;
  border-left: 2px solid var(--ring, var(--green));
  background: color-mix(in srgb, var(--ring, var(--green)) 5%, transparent);
}
.station-transcript.is-visible { display: block; }

/* Character sheet — <details>, expanded on desktop / collapsed on phone (set by
 * open()). */
.station-sheet { border-top: 1px dashed var(--fx-green-line-dim, rgba(120, 200, 160, 0.2)); padding-top: 8px; }
.station-sheet > summary {
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: 3px;
  color: var(--amber);
  opacity: 0.8;
  list-style: none;
}
.station-sheet > summary::-webkit-details-marker { display: none; }
.station-sheet > summary::before { content: '▸ '; }
.station-sheet[open] > summary::before { content: '▾ '; }

.station-sheet-body { margin-top: 8px; }
.station-sheet-dl { margin: 0; display: grid; gap: 6px; }
.station-sheet-dl dt {
  font-size: 9.5px;
  letter-spacing: 2px;
  color: var(--green);
  opacity: 0.6;
  text-transform: uppercase;
}
.station-sheet-dl dd {
  margin: 1px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--green);
  opacity: 0.92;
}
.station-lines {
  margin-top: 8px;
  display: grid;
  gap: 5px;
  border-top: 1px dashed var(--fx-green-line-dim, rgba(120, 200, 160, 0.16));
  padding-top: 8px;
}
.station-line {
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ring, var(--green)) 60%, var(--green));
  opacity: 0.85;
}

.ob-station .ob-missions-back { margin: 0 auto; min-width: 200px; }