/* Facilitator room: the orientation band, phase detail and fixed action dock. */
main.facilitator-console { max-width: 1360px; width: min(100% - 32px, 1360px); margin: var(--sp-4) auto; padding: var(--sp-4); }
.facilitator-console .case-catalog { min-width: 0; }
.facilitator-console .auth-form [hidden] { display: none; }
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); max-width: min(100%, 560px); margin-top: var(--sp-4); }
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) > label,
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) > .auth-status { grid-column: 1 / -1; }
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) > label > input[type="email"],
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) > label > input[type="text"] { display: block; width: 100%; min-height: 44px; margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--field-line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) > .btn { width: 100%; }
.facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) > .auth-status { margin: 0; color: var(--ink-muted); }
.facilitator-console.room-active > .case-catalog-eyebrow,
.facilitator-console.room-active > .case-catalog-heading,
.facilitator-console.room-active > .case-catalog-status { display: none; }
.facilitator-console.room-active > .auth-form { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.console-room { display: grid; gap: var(--sp-4); padding-bottom: 104px; scroll-padding-bottom: 120px; }
html:has(.console-room) { scroll-padding-bottom: 120px; }
.console-room button { scroll-margin-bottom: 120px; }
.console-orientation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); background: var(--nav-bg); color: var(--nav-ink); border: 1px solid var(--field-line); border-radius: var(--radius); padding: var(--sp-4); }
.console-orientation h1 { margin: 0 auto 0 0; font-size: var(--t-lg); }
.console-orientation .eyebrow { width: 100%; }
.console-phase-pill, .console-manual-pill { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); font-size: var(--t-sm); font-weight: var(--w-semibold); background: var(--ph-reveal-tint); color: var(--ph-reveal-ink); }
.console-manual-pill { background: var(--manual-tint); color: var(--manual-ink); }
.console-connection, .console-timer { font-size: var(--t-sm); }
.console-sound-status, .console-sound-hint { font-size: var(--t-sm); }
.console-sound-hint { width: 100%; color: var(--nav-ink); }
.console-tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--field-line); }
.console-tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; color: var(--ink-muted); }
.console-tab[aria-selected="true"] { background: var(--petrol-tint); color: var(--petrol-ink); border-bottom: 2px solid var(--petrol); }
.console-run { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: var(--sp-4); align-items: start; }
.console-run > :first-child { grid-column: 1; }
.console-run > :not(:first-child) { grid-column: 2; }
.console-run > .console-routes, .console-run > .console-presentation, .console-run > .console-secondary { grid-column: 1 / -1; }
.console-room-tab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.console-card, .console-run > section:not(.console-card), .console-room-tab > section:not(.console-card) { background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-1); display: grid; gap: var(--sp-3); }
.console-card h2, .console-run h2, .console-room-tab h2 { font-size: var(--t-lg); margin: 0; }
.console-card h3 { font-size: var(--t-md); margin: 0; }
.console-scene-text { max-width: 70ch; }
.console-tile { background: var(--sunken); border-radius: var(--radius-sm); padding: var(--sp-3); }
.console-tile h2 { font-size: var(--t-sm); }
.console-tile ul, .console-card ul { margin: 0; padding-inline-start: var(--sp-4); }
.console-phase { border-color: var(--ph-reveal); }
.console-phase[data-phase="responses_open"] { border-color: var(--ph-open); }
.console-phase[data-phase="responses_locked"], .console-phase[data-phase="path_selected"] { border-color: var(--ph-locked); }
.console-phase[data-phase="consequence_revealed"], .console-phase[data-phase="terminal_teaching"] { border-color: var(--ph-consequence); }
.console-phase[data-phase="discussion_paused"] { border-color: var(--ph-paused); }
.console-code { font-size: var(--t-xl); font-weight: var(--w-semibold); letter-spacing: .06em; }
.console-person, .console-route { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); border-top: 1px solid var(--field-line); padding-top: var(--sp-3); }
.console-person-identity { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.console-person-identity small { color: var(--ink-muted); }
.console-route p { flex-basis: 100%; margin: 0; }
.console-presentation { display: grid; gap: var(--sp-3); }
.console-presentation-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.console-presentation-controls .btn, .console-presentation-rows .btn { min-height: 44px; }
.console-presentation-unavailable { display: flex; align-items: center; justify-content: center; min-height: 44px; color: var(--ink); }
.console-presentation-rows { display: grid; gap: var(--sp-2); margin: 0; padding-inline-start: var(--sp-4); }
.console-presentation-rows .btn { width: 100%; justify-content: flex-start; text-align: start; }
.console-presentation-rows [aria-current="step"] { border-color: var(--petrol); background: var(--petrol-tint); color: var(--petrol-ink); }
.console-replay-notice { margin: 0; color: var(--ph-paused-ink); font-weight: var(--w-semibold); }
.console-presentation-help { margin: 0; color: var(--ink); font-size: var(--t-sm); }
.console-private { border-color: var(--field-line); }
.console-secondary { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.console-status { min-height: 1.5em; color: var(--ink-muted); }
.console-action-dock { position: fixed; z-index: var(--z-dock); inset: auto 0 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 84px; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--field-line); background: var(--nav-bg); box-shadow: var(--shadow-2); }
.console-primary { min-width: min(320px, 70vw); font-size: var(--t-md); }
.console-primary:disabled { background: var(--sunken); color: var(--ink-muted); border: 1px solid var(--field-line); }
.console-room .btn.danger { background: transparent; border: 1px solid var(--alert); color: var(--alert-ink); }
@media (max-width: 820px) {
  .console-run, .console-room-tab { grid-template-columns: minmax(0, 1fr); }
  .console-run > *, .console-run > :first-child, .console-run > :not(:first-child) { grid-column: 1; }
  .console-action-dock { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .facilitator-console:not(.room-active) > .auth-form:not(.is-signed-in) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .console-card { animation: console-enter 180ms cubic-bezier(.2,.8,.2,1) both; }
  @keyframes console-enter { from { opacity: .8; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

.ranked-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); width: 100%; }
.ranked-controls label { display: grid; gap: var(--sp-1); font-weight: var(--w-medium); max-width: 100%; }
.ranked-controls select { min-height: 44px; max-width: 100%; padding: var(--sp-2); background: var(--surface); color: var(--ink); border: 1px solid var(--field-line); border-radius: var(--radius-sm); font: inherit; }
.ranked-controls p { width: 100%; margin: 0; }