/* Admin surfaces of the live lecture room: the plan-lecture picker on a
   meeting, the deck panel in the session planner, and the unlock control.

   ONE PREFIX, `acr-`, ON TWO SCREENS THAT RUN IN OPPOSITE DIRECTIONS.
   /admin/course-cohorts is English LTR; /admin/session-management is a Hebrew
   RTL island (`.csm-page` re-establishes `direction: rtl`). So every rule here
   is written with LOGICAL properties - `padding-inline-*`, `border-block-*`,
   `margin-inline-*`, `text-align: start` - and never with left/right. Nothing
   below needs a mirrored variant, and nothing below may gain one.

   This file is linked LAST of the admin sheets, so it would win a same-property
   tie at equal specificity. Nothing here relies on that: every selector is
   `acr-`-prefixed and overrides nothing the shared kit owns. */

/* ── Shared vocabulary ────────────────────────────────────────
   The two notes this feature prints on both screens: a quiet reading and a
   warning. Declared once rather than per screen. */
.acr-note {
  margin: 0.3rem 0 0;
  color: var(--text-secondary, #5a5b6a);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: start;
}

.acr-note--warn {
  color: #92400e;
}

/* The rule people get wrong about this feature, said where they would get it
   wrong. Cool, not amber: it is a fact about scope, not a problem. */
.acr-note--scope {
  color: var(--text-tertiary, #494950);
}

/* ── /admin/course-cohorts: the sessions table ────────────────
   A meeting's two class-room readings sit in one cell, stacked, because they
   answer different questions and either one alone misleads: the tag says what
   will be projected, the lock says whether anybody can open it tonight. */
.acr-scope-note {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-light, #e8eef8);
  border-radius: 8px;
  background: var(--primary-light, rgba(0, 113, 227, 0.06));
  color: var(--text-secondary, #5a5b6a);
  font-size: 0.78rem;
  line-height: 1.5;
}

.acr-deck-cell {
  min-width: 11rem;
}

.acr-deck-tag {
  font-weight: 500;
  color: var(--text-color, #191a23);
}

.acr-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-block-start: 0.15rem;
  font-size: 0.72rem;
  color: var(--text-tertiary, #494950);
}

.acr-lock--open {
  color: #2e7d32;
}

/* A forced state is a person's decision standing over the clock, so it is the
   one reading here allowed to draw attention to itself. */
.acr-lock--forced {
  font-weight: 500;
  color: #92400e;
}

/* ── /admin/course-cohorts: the session editor ────────────────
   The class-room controls are their own block inside a modal that is otherwise
   about dates and links. A hairline and a heading, no card: a second surface
   inside a modal reads as a dialog within a dialog. */
.acr-block {
  margin-block-start: 1rem;
  padding-block-start: 0.9rem;
  border-block-start: 1px solid var(--border-light, #e8eef8);
}

.acr-block-title {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-color, #191a23);
}

/* The resolved deck, read-only. Decks are imported, never authored here, so
   this is a READING and is styled as one - no border that invites a click. */
.acr-deck-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 0.35rem 0 0.9rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  background: #f7f9fc;
  font-size: 0.78rem;
}

.acr-deck-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  color: var(--text-color, #191a23);
}

.acr-deck-kinds {
  color: var(--text-secondary, #5a5b6a);
}

.acr-deck-summary .acr-note {
  margin: 0;
}

/* ── /admin/course-cohorts: what the room answered ────────────
   Read-only aggregates for ONE meeting. Students are named in here, so the
   panel stays plain: nothing about it should look like a dashboard somebody
   would put on a projector. */
.acr-modal-sub {
  margin-inline-start: 0.5rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-secondary, #5a5b6a);
}

.acr-result {
  margin-block-start: 0.9rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-light, #e8eef8);
  border-radius: 10px;
  background: var(--bg-surface, #fff);
}

.acr-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
}

.acr-result-slide {
  font-size: 0.72rem;
  color: var(--text-tertiary, #494950);
}

.acr-result-prompt {
  flex: 1 1 12rem;
  font-weight: 500;
  color: var(--text-color, #191a23);
}

.acr-result-count {
  font-size: 0.75rem;
  color: var(--text-secondary, #5a5b6a);
}

.acr-result-score {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-color, #191a23);
}

.acr-options {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.acr-option {
  display: grid;
  grid-template-columns: minmax(6rem, 12rem) 1fr auto;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.acr-option-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-color, #191a23);
}

.acr-option-correct {
  color: #2e7d32;
  font-size: 0.72rem;
}

/* The bar is the only place a number becomes a shape here. Flat fill, no
   gradient: the brand gradient is rare on purpose, and a poll result is not
   where it earns its place. */
.acr-option-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--border-light, #e8eef8);
  overflow: hidden;
}

.acr-option-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary-color, #0071e3);
}

.acr-option-count {
  min-width: 1.6rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #5a5b6a);
}

.acr-answers {
  margin-block-start: 0.7rem;
  padding-block-start: 0.6rem;
  border-block-start: 1px dashed var(--border-light, #e8eef8);
}

.acr-answers-head {
  font-size: 0.75rem;
  color: var(--text-secondary, #5a5b6a);
}

.acr-answer-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.acr-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.acr-answer-text {
  flex: 1 1 12rem;
  color: var(--text-color, #191a23);
}

/* Held back until asked for, and quiet when it arrives. */
.acr-answer-name {
  font-size: 0.72rem;
  color: var(--text-tertiary, #494950);
}

.acr-names-toggle {
  margin-block-start: 1rem;
}

/* ── /admin/session-management: the deck panel (Hebrew RTL) ───
   One collapsible panel per plan lecture, at the foot of its card. Read-only
   throughout - a deck is written by hand and loaded by the import script - so
   nothing in here is styled as a control except the disclosure itself. */
.acr-deck-panel {
  margin-block-start: 0.7rem;
  padding-block-start: 0.6rem;
  border-block-start: 1px solid var(--border-light, #e8eef8);
}

.acr-deck-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.25rem 0;
  border: none;
  background: transparent;
  color: var(--text-secondary, #5a5b6a);
  font: inherit;
  font-size: 0.8rem;
  text-align: start;
  cursor: pointer;
}

.acr-deck-toggle:hover {
  color: var(--text-color, #191a23);
}

/* Matches `.csm-caret` next door: a chevron toward the inline start that turns
   down when the panel opens. Declared here rather than borrowed, so the LTR
   screen could reuse this panel without inheriting an RTL caret. */
.acr-deck-caret {
  flex: 0 0 auto;
  width: 1rem;
  font-size: 0.7rem;
  transition: transform 0.15s;
}

.acr-deck-caret.is-open {
  transform: rotate(-90deg);
}

.acr-deck-badge {
  background: #eef3fa;
  color: #5b6b85;
}

.acr-deck-body {
  padding-block-start: 0.4rem;
  padding-inline-start: 1.45rem;
}

.acr-deck-note {
  margin: 0.25rem 0 0;
  color: var(--text-secondary, #5a5b6a);
  font-size: 0.78rem;
  line-height: 1.55;
}

.acr-deck-note--warn {
  color: #b26a00;
}

.acr-deck-subhead {
  margin: 0.9rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-color, #191a23);
}

.acr-slide-list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.acr-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.8rem;
}

.acr-slide-num {
  flex: 0 0 auto;
  min-width: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary, #494950);
  font-size: 0.72rem;
}

.acr-slide-title {
  flex: 1 1 8rem;
  color: var(--text-color, #191a23);
}

.acr-slide-kind {
  background: #eef3fa;
  color: #5b6b85;
}

.acr-slide-steps {
  font-size: 0.72rem;
  color: var(--text-tertiary, #494950);
}

.acr-meeting-list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.acr-meeting {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.8rem;
}

.acr-meeting-cohort {
  font-weight: 500;
  color: var(--text-color, #191a23);
}

.acr-meeting-when {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #5a5b6a);
  font-size: 0.75rem;
}

.acr-meeting-answers {
  font-size: 0.72rem;
  color: var(--text-tertiary, #494950);
}

.acr-meeting-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--primary-color, #0071e3);
  font-size: 0.75rem;
  text-decoration: none;
}

.acr-meeting-link:hover {
  text-decoration: underline;
}

/* ── Phone ───────────────────────────────────────────────────
   767px is the panel's phone breakpoint. Two grids stop being grids here: an
   option row whose label column is a fixed 6rem leaves the bar no width at
   all, and the deck body's indent costs a whole word per line at this width. */
@media (max-width: 767px) {
  .acr-option {
    grid-template-columns: 1fr auto;
  }

  .acr-option-bar {
    grid-column: 1 / -1;
    order: 3;
  }

  .acr-deck-body {
    padding-inline-start: 0.5rem;
  }

  .acr-deck-cell {
    min-width: 0;
  }
}

/* The roster's "live" attendance badge: the student joined the live lecture
   room, so the system watched them attend rather than taking their word for it
   or a staff member's. `.cohort-badge` in admin.css supplies the shape; this
   rule only adds the colours, exactly as `.cohort-badge--self` does in
   admin-student-area.css. Cyan reads as "the room", against that badge's amber
   for a self-report. */
.cohort-badge--live {
  background: #cffafe;
  color: #155e75;
}