@import url("/decisions/composition.css");

:root {
  /* Approved calm-explorer palette. Keep the short token names aligned with
     the CEO mockups; the aliases below let existing feature CSS adopt the
     system without changing feature behavior in this foundation wave. */
  --bg: #eef3f3;
  --panel: #0f4c52;
  --paneltx: #eaf4f4;
  --card: #ffffff;
  --ink: #17333a;
  --sub: #5b7a80;
  --line: #dfe9e9;
  --teal: #0f6875;
  --tealsoft: #e7f2f2;
  --gold: #926811;
  --goldbg: #fdf3dc;
  --green: #2e9e6b;
  --sel: #e8f4f6;
  --selring: #8bc4cd;

  --ink-soft: #36565c;
  --muted: var(--sub);
  --focus-ring: var(--teal);
  --line-strong: #91a7aa;
  --surface: var(--card);
  --surface-soft: var(--bg);
  --surface-tint: var(--tealsoft);
  --teal-mid: #167f8d;
  --teal-dark: var(--panel);
  --aqua: #9fd5da;
  --coral: #c74a37;
  --blue: #2f6fb0;
  --danger: #c14a45;
  --ok: #1f6f54;
  --radius-card: 12px;
  --radius-shell: 14px;
  --shadow: 0 16px 45px rgba(15, 76, 82, 0.14);
  --shadow-soft: 0 6px 18px rgba(15, 76, 82, 0.1);
  font-family: "Heebo", "Arial", "Helvetica Neue", sans-serif;
}

/* Wave 4 — admin and owner surfaces, matched to mockups-admin.html. */
#content:has(> .w4-tbar) {
  overflow: hidden;
  padding: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: var(--card);
  box-shadow: 0 8px 30px rgb(15 76 82 / 12%);
}

.w4-tbar {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: var(--panel);
  color: var(--paneltx);
}

.w4-tbar strong { font-size: 1.02rem; }
.w4-tbar-actions { display: flex; align-items: center; gap: 8px; }
.w4-tbar .btn { min-height: 38px; margin: 0; border: 0; text-decoration: none; }
.w4-tbar .btn.pri { background: #fff; color: var(--panel); }
.w4-tbar .btn.ghost { background: rgb(255 255 255 / 14%); color: #fff; }

.w4-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 20px 18px;
  padding-top: 20px;
}

.w4-pagehead h1 { margin: 2px 0; font-size: 1.55rem; line-height: 1.25; }
.w4-pagehead p { max-width: 690px; margin: 2px 0 0; color: var(--sub); }
.w4-crumb { color: var(--sub); font-size: .85rem; }

#content > .w4-tbar ~ :not(.w4-pagehead, .admin-action-scrim, .crm-drawer-scrim, .calendar-occurrence-scrim) {
  margin-inline: 20px;
}

.w4-summaryline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfd;
}

.w4-summaryline strong { display: flex; align-items: center; gap: 8px; }
.w4-summaryline small { color: var(--sub); }
.w4-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.w4-metrics-four { grid-template-columns: repeat(4, 1fr); }
.w4-metrics article,
.w4-metric-link {
  padding: 16px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.w4-metric-link {
  min-width: 0;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.w4-metric-link:hover { border-color: var(--teal); background: var(--tealsoft); transform: translateY(-1px); }
.w4-metric-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .w4-metric-link { transition: none; }
  .w4-metric-link:hover { transform: none; }
}
.w4-metrics span, .w4-metrics small { display: block; color: var(--sub); }
.w4-metrics span { font-size: .8rem; }
.w4-metrics strong { display: block; font-size: 1.65rem; line-height: 1.25; }

/* Management dashboard */
#content:has(> .w4-admin-tbar) > .page-header,
#content:has(> .w4-admin-tbar) .owner-desktop-hero { display: none; }
#content:has(> .w4-admin-tbar) .admin-desktop-workspace { display: block; }
#content:has(> .w4-admin-tbar) .admin-desktop-panels { display: grid; gap: 16px; }
#content:has(> .w4-admin-tbar) .admin-section-rail {
  position: sticky;
  top: 58px;
  z-index: 9;
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 8px 24px rgb(15 76 82 / 10%);
  backdrop-filter: blur(10px);
}
#content:has(> .w4-admin-tbar) .admin-section-rail a {
  flex: 0 0 auto;
  min-height: 40px;
}
#content:has(> .w4-admin-tbar) .admin-section-rail a.active {
  color: #fff;
  background: var(--teal);
}
#content:has(> .w4-admin-tbar) [data-admin-management-panel][hidden] { display: none; }
#content:has(> .w4-admin-tbar) .admin-today-panel,
#content:has(> .w4-admin-tbar) .admin-work-queue,
#content:has(> .w4-admin-tbar) .admin-reference-band .ops-panel,
#content:has(> .w4-admin-tbar) .admin-quick-actions {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
#content:has(> .w4-admin-tbar) .admin-desktop-console {
  display: block;
}
#content:has(> .w4-admin-tbar) .admin-queue-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  border-color: var(--line);
  border-radius: 0;
  border-width: 1px 0 0;
  background: #fff;
}
#content:has(> .w4-admin-tbar) .admin-queue-item:first-child { border-top: 0; }
#content:has(> .w4-admin-tbar) .admin-queue-item.is-clickable {
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
#content:has(> .w4-admin-tbar) .admin-queue-item.is-clickable:hover {
  background: var(--tealsoft);
  box-shadow: inset -3px 0 0 var(--teal);
}
#content:has(> .w4-admin-tbar) .admin-queue-item.is-clickable:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
#content:has(> .w4-admin-tbar) .admin-queue-item.is-clickable { position: relative; }
#content:has(> .w4-admin-tbar) .admin-queue-item.is-clickable:has(.admin-queue-open-row:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.admin-queue-open-row {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.admin-queue-open-row:focus-visible { outline: 0; }
.admin-queue-item.is-clickable .w4-queue-icon,
.admin-queue-item.is-clickable .w4-queue-copy { position: relative; z-index: 2; pointer-events: none; }
.admin-queue-item.is-clickable .w4-rowend { position: relative; z-index: 3; }
.w4-queue-copy { display: grid; gap: 3px; min-width: 0; }
.w4-queue-copy strong { color: var(--ink); font-size: .98rem; }
.w4-queue-copy span { overflow: hidden; color: var(--sub); font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.w4-queue-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: var(--tealsoft);
  color: var(--teal);
  font-weight: 800;
}
.w4-queue-action { display: grid; gap: 8px; }
.w4-rowend { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.w4-item-menu { position: relative; }
.w4-item-menu > summary {
  display: grid;
  width: 32px;
  min-height: 32px;
  place-items: center;
  border-radius: 8px;
  color: var(--sub);
  cursor: pointer;
  font-size: 1.1rem;
  list-style: none;
}
.w4-item-menu > summary::-webkit-details-marker { display: none; }
.w4-item-menu > summary:hover { background: var(--tealsoft); }
.w4-item-menu > div {
  position: absolute;
  z-index: 20;
  top: 35px;
  left: 0;
  display: grid;
  width: 180px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgb(15 76 82 / 16%);
}
.w4-item-menu:not([open]) > div { display: none; }
.w4-item-menu button {
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  text-align: right;
}
.w4-item-menu button:hover { background: var(--tealsoft); }
.w4-item-menu.has-form > div { width: min(340px, calc(100vw - 48px)); padding: 10px; }
.w4-item-menu.has-form .admin-queue-form,
.w4-item-menu.has-form .admin-queue-deadend { display: grid; gap: 9px; }
.w4-item-menu.has-form .admin-queue-form select { width: 100%; }
.w4-item-menu.has-form .admin-queue-form .btn,
.w4-item-menu.has-form .admin-queue-deadend .btn { width: 100%; }
.w4-item-menu.has-form .admin-queue-consequence { margin: 0; color: var(--sub); font-size: .78rem; }

/* Wave 5 — learner and coach surfaces from mockups-learner-coach.html. */
.w5-crumb {
  margin-bottom: 14px;
  color: var(--sub);
  font-size: .84rem;
}

.w5-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.w5-pagehead h1,
.w5-pagehead h2 {
  margin: 2px 0;
  color: var(--ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.22;
}

.w5-pagehead p { margin: 2px 0 0; color: var(--sub); }
.w5-pagehead .pill,
.w5-pagehead .readonly { flex: 0 0 auto; }

.w5-learner-home { display: grid; gap: 0; }
.w5-continue-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  min-height: 245px;
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--panel);
  color: #fff;
}

.w5-continue-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 4vw, 38px);
}

.w5-continue-copy .eyebrow,
.w5-continue-copy h2,
.w5-continue-copy p { color: #fff; }
.w5-continue-copy h2 { margin: 5px 0 2px; font-size: clamp(1.45rem, 3vw, 2rem); }
.w5-continue-copy p { margin: 0 0 14px; opacity: .82; }
.w5-progress-line { display: flex; justify-content: space-between; margin-bottom: 5px; }
.w5-continue-copy .progress-block { margin: 0 0 15px; }
.w5-continue-copy .progress-track { background: rgb(255 255 255 / 20%); }
.w5-continue-copy .progress-track span { background: #fff; }
.w5-continue-copy .progress-block > span { display: none; }
.w5-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.w5-actions .btn { min-height: 42px; }
.w5-actions .btn.pri { background: #fff; color: var(--panel); }
.w5-actions .btn.ghost { background: rgb(255 255 255 / 12%); color: #fff; border-color: rgb(255 255 255 / 34%); }

.w5-continue-thumb {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background:
    linear-gradient(180deg, transparent 45%, rgb(15 76 82 / 58%)),
    url("/assets/course/coach-demo-pool.webp") center / cover;
  color: #fff;
}

.w5-continue-thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 18%); }
.w5-thumb-play {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 1;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  color: var(--teal);
  font-size: 1.25rem;
  transform: translate(-50%, -50%);
}
.w5-duration { position: absolute; z-index: 1; bottom: 12px; left: 12px; padding: 4px 8px; border-radius: 6px; background: rgb(15 51 58 / 86%); font-size: .78rem; }

.w5-metric-grid,
.w5-home-lower { display: grid; gap: 16px; }
.w5-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.w5-metric-grid .metric { min-height: 112px; padding: 17px; border-radius: 12px; box-shadow: none; }
.w5-metric-grid .metric strong { color: var(--teal); font-size: 1.7rem; }
.w5-metric-grid .metric span,
.w5-metric-grid .metric small { display: block; }
.w5-metric-grid .metric small { color: var(--sub); }
.w5-home-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w5-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.w5-section-title h2,
.w5-section-title h3 { margin: 0; color: var(--ink); font-size: 1.05rem; }
.w5-section-title small { color: var(--sub); }
.w5-next-strip {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.w5-next-strip div { display: grid; gap: 2px; }
.w5-next-strip small { color: var(--sub); }

.w5-course-heading { margin-bottom: 14px; }
.w5-course-heading > div:last-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.w5-course-heading h1 { margin: 0; font-size: 1.35rem; }
.w5-course-heading p { margin: 0; color: var(--sub); }
.shell.role-user .w5-course-view .student-continue-desktop { display: none; }
.shell.role-user .w5-course-view .watch-stage,
.w5-materials-viewer .watch-stage { border: 1px solid var(--line); border-radius: 13px; box-shadow: none; }
.shell.role-user .w5-course-view .watch-context-bar { background: #fff; border-bottom-color: var(--line); }
.shell.role-user .w5-course-view .course-player-target { background: var(--panel); }
.shell.role-user .w5-course-view .lesson-detail-panel { border: 1px solid var(--line); border-top: 0; }

.w5-course-map { max-width: 880px; margin: 0 auto; }
.w5-course-map .student-map-head {
  display: grid;
  gap: 4px;
  margin-bottom: 15px;
  padding: 22px;
  border-radius: 14px;
  background: var(--panel);
  color: #fff;
}
.w5-course-map .student-map-head h2,
.w5-course-map .student-map-head p,
.w5-course-map .student-map-head .eyebrow { margin: 0; color: #fff; }
.w5-course-map .student-map-head .progress-track { background: rgb(255 255 255 / 20%); }
.w5-course-map .student-map-head .progress-track span { background: #fff; }
.w5-course-map .student-map-head .progress-block > span { color: #fff; }
.w5-course-map .student-map-list { display: grid; gap: 8px; }
.w5-course-map .student-map-unit { margin: 18px 2px 3px; color: var(--sub); font-size: .82rem; letter-spacing: .02em; }
.w5-course-map .student-map-card {
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: right;
}
.w5-course-map .student-map-card.current { border-color: var(--selring); outline: 2px solid var(--selring); background: var(--sel); }
.w5-course-map .student-map-card.done { background: #fbfefd; }
.w5-course-map .student-map-copy { display: grid; gap: 2px; }
.w5-course-map .student-map-copy small { color: var(--sub); }
.w5-course-map .student-map-state { flex: 0 0 auto; }
.w5-course-map .student-map-state.next { background: var(--goldbg); color: var(--gold); }
.w5-course-map .student-map-state.locked { background: var(--bg); color: var(--sub); }
.w5-course-map .student-map-card.locked { background: #fbfcfc; }
.w5-course-map .student-map-badge { order: -1; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--tealsoft); color: var(--teal); font-weight: 900; }
.w5-course-map .student-map-card.done .student-map-badge { background: var(--green); color: #fff; }

.lesson-area-tabs {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  margin: 14px 16px 0;
  border-bottom: 2px solid var(--line);
  scrollbar-width: thin;
}
.lesson-area-tabs button {
  min-width: max-content;
  min-height: 40px;
  padding: 7px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--sub);
  font-weight: 700;
}
.lesson-area-tabs button.on {
  margin-bottom: -2px;
  border-bottom-color: var(--teal);
  color: var(--teal);
}
.lesson-area-tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lesson-content-section[data-lesson-area],
[data-lesson-area="notes"] { scroll-margin-top: 86px; }
.lesson-pager {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 16px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.lesson-pager-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 46%;
  white-space: normal;
  text-align: start;
}
.lesson-pager-spacer { min-width: 1px; }

.learner-roster-ident > .learner-progress-line {
  display: block;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.w5-mine .student-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.w5-mine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.w5-mine .student-attendance-section,
.w5-mine .student-notes-section { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.w5-mine .student-attendance-head { display: flex; align-items: center; justify-content: space-between; }
.w5-mine .student-attendance-head h3 { margin: 0; }
.w5-mine .student-attendance-list { padding: 0; list-style: none; }
.w5-mine .student-attendance-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }

.w5-coach-pagehead { margin-bottom: 8px; }
.w5-coach-day-summary,
.w5-coach-materials-shortcut { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.w5-coach-day-summary { background: var(--tealsoft); }
.w5-coach-day-summary h3,
.w5-coach-materials-shortcut h3 { margin: 5px 0; }
.w5-coach-day-summary .typedrow { margin-top: 14px; }
.w5-coach-materials-shortcut { margin-top: 14px; }
.w5-coach-materials-shortcut .btn { width: 100%; }
.coach-desktop-primary .coach-today-panel { background: var(--tealsoft); box-shadow: none; }
.coach-desktop-panel { box-shadow: none; }

.w5-materials-viewer { display: grid; gap: 16px; }
.w5-materials-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.w5-materials-head h2 { margin: 2px 0; font-size: 1.25rem; }
.w5-materials-head small { color: var(--sub); }
.w5-materials-viewer .coach-course-materials { padding: 0; border: 0; box-shadow: none; }
.w5-materials-viewer .coach-course-visual,
.w5-materials-viewer .coach-course-materials > .lesson-head,
.w5-materials-viewer .coach-course-materials > p { display: none; }
.w5-materials-viewer .course-watch-shell { margin: 0; }
.w5-owner-materials-viewer { margin-inline: 20px; }

@media (max-width: 980px) {
  .w5-pagehead { align-items: flex-start; }
  .w5-course-heading { display: none; }
  .w5-course-map .w5-crumb,
  .w5-mine .w5-crumb { display: none; }
  .w5-mine .w5-pagehead { margin-bottom: 10px; }
  .w5-mine .w5-pagehead h2 { font-size: 1.35rem; }
  .w5-mine .w5-pagehead .pill { display: none; }
  .w5-mine-grid { grid-template-columns: 1fr; }
  .w5-mine .student-attendance-section,
  .w5-mine .student-notes-section { padding: 13px; }
  .w5-materials-head { align-items: stretch; flex-direction: column; padding: 13px; }
  .w5-materials-head .course-switcher-list { display: flex; overflow-x: auto; }
  .w5-materials-head .course-switcher-button { min-width: 160px; }
  .w5-materials-viewer .coach-course-materials { padding: 0; }
  .w5-owner-materials-viewer { margin-inline: 0; }
}

/* T18 — CRM v2 work-first composition. */
#content:has(> .w4-crm-tbar) {
  background: #fbfdfd;
}

#content:has(> .w4-crm-tbar) .w4-crm-tbar {
  min-height: 62px;
}

#content:has(> .w4-crm-tbar) .w4-crm-tbar > strong {
  white-space: nowrap;
}

#content:has(> .w4-crm-tbar) .w4-crm-tbar .w4-tbar-actions {
  flex: 1;
  justify-content: flex-end;
}

.crm-v2-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 520px;
}

.crm-v2-search::before {
  content: "⌕";
  position: absolute;
  inset-inline-start: 12px;
  top: 7px;
  z-index: 1;
  color: #d8e7e8;
  font-size: 18px;
  pointer-events: none;
}

.crm-v2-search input {
  width: 100%;
  min-height: 44px;
  padding: 7px 38px 7px 12px;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 9px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
}

.crm-v2-search input::placeholder { color: #c9dcdd; }
.crm-v2-search input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.crm-v2-tbar-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
}

.crm-table-view-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
}

.crm-table-view-toggle button {
  min-height: 44px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #cfe4e6;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.crm-table-view-toggle button.is-active {
  background: #fff;
  color: var(--panel);
}

.crm-table-view-toggle button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.crm-table-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 12px 18px;
}

.crm-queue-filter-disclosure {
  margin: 10px 18px;
}

.crm-queue-filter-disclosure > summary {
  width: max-content;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
}

.crm-queue-filter-disclosure > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.crm-queue-filter-tools {
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.crm-table-tools label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 750;
}

.crm-table-tools select,
.crm-table-export {
  min-height: 44px;
}

.crm-table-tools select {
  max-width: 210px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.crm-table-tools select:focus-visible,
.crm-table-export:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.crm-table-count {
  margin-inline-start: auto;
  color: var(--sub);
  font-size: 13px;
  white-space: nowrap;
}

.crm-table-card {
  max-width: calc(100% - 36px);
  max-height: min(70vh, 760px);
  min-width: 0;
  margin: 0 18px 18px;
  overflow: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  -webkit-overflow-scrolling: touch;
}

.crm-table-card:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.crm-leads-table {
  width: 100%;
  min-width: 1460px;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 13px;
}

.crm-leads-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 44px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: var(--tealsoft);
  color: var(--teal);
  text-align: start;
  white-space: nowrap;
}

.crm-leads-table th button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 7px 11px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: start;
  cursor: pointer;
}

.crm-leads-table th button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.crm-leads-table td {
  height: 44px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  white-space: nowrap;
  vertical-align: middle;
}

.crm-leads-table tbody tr {
  min-height: 44px;
  cursor: pointer;
}

.crm-leads-table tbody tr:hover td { background: var(--tealsoft); }
.crm-leads-table tbody tr:focus-visible { outline: 0; }
.crm-leads-table tbody tr:focus-visible td {
  outline: 2px solid var(--selring);
  outline-offset: -2px;
}

.crm-table-urgency {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: var(--green);
}

.crm-table-urgency.is-overdue { background: var(--danger); }
.crm-table-urgency.is-today { background: #d9a514; }
.crm-table-urgency.is-empty { visibility: hidden; }

.crm-table-stage {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.crm-table-stage.is-new { background: var(--goldbg); color: var(--gold); }
.crm-table-stage.is-active { background: #e8f5ee; color: var(--green); }
.crm-table-stage.is-hold { background: var(--tealsoft); color: var(--teal); }
.crm-table-next.is-overdue { color: var(--danger); font-weight: 800; }
.crm-table-next.is-today { color: var(--gold); font-weight: 800; }
.crm-table-created { color: var(--sub); }

.crm-view-list-shell.is-table-hidden { display: none; }

.crm-v2-mobile-nav { display: none; }

.crm-v2-workspace { min-width: 0; }

.crm-v2-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.crm-v2-page-head h1 {
  margin: 0 0 2px;
  font-size: 1.55rem;
  line-height: 1.25;
}

.crm-v2-page-head p { margin: 0; color: var(--sub); }

.crm-v2-done-meter {
  min-width: 176px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.crm-v2-done-meter > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
  color: var(--sub);
  font-size: 12px;
}

.crm-v2-done-meter strong { color: var(--ink); }

.crm-v2-meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--tealsoft);
}

.crm-v2-meter i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }

.crm-v2-hero {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}

.crm-v2-hero > header,
.crm-v2-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.crm-v2-hero > header {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.crm-v2-hero h2,
.crm-v2-panel h2 { margin: 0; font-size: 1rem; }
.crm-v2-hero header small { color: var(--sub); }

.crm-v2-queue { display: grid; }

.crm-v2-queue-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(190px, .9fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: opacity 160ms ease, background-color 160ms ease;
}

.crm-v2-queue-row:last-child { border-bottom: 0; }
.crm-v2-queue-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--gold); }
.crm-v2-queue-row.is-urgent::before { background: var(--danger, #c9574f); }
.crm-v2-queue-row.is-done { background: #f7fbfa; }
.crm-v2-queue-row.is-done::before { background: var(--green); }
.crm-v2-queue-row:hover { background: #fbfefe; }
.crm-v2-queue-row.is-done strong { color: #17333a; }
.crm-v2-queue-row.is-done small { color: #57757a; }
.crm-v2-queue-row:has(.crm-v2-open-row:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: -4px; }

.crm-v2-open-row {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.crm-v2-open-row:focus-visible { outline: 0; }

.crm-v2-identity {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  pointer-events: none;
}

.crm-v2-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tealsoft);
  color: var(--teal);
  font-size: 12px;
  font-weight: 900;
}

.crm-v2-identity strong,
.crm-v2-identity small,
.crm-v2-why strong,
.crm-v2-why small { display: block; }
.crm-v2-identity strong { font-size: 14px; }
.crm-v2-identity small,
.crm-v2-why small { overflow: hidden; color: var(--sub); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.crm-v2-why { position: relative; z-index: 2; min-width: 0; pointer-events: none; }
.crm-v2-why strong { font-size: 13px; }

.crm-v2-age {
  display: inline-flex;
  width: max-content;
  margin-bottom: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--goldbg);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
}

.crm-v2-queue-row.is-urgent .crm-v2-age { background: #fff0ee; color: #9f3933; }

.crm-v2-row-actions {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

.crm-v2-row-actions .btn:disabled { cursor: not-allowed; }

.crm-v2-row-actions .btn { min-height: 44px; padding: 7px 10px; white-space: nowrap; text-decoration: none; }
.crm-v2-done-outcome { color: #23623f; font-size: 13px; font-weight: 850; }
.crm-v2-more { position: relative; }
.crm-v2-more > summary { width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; list-style: none; }
.crm-v2-more > summary::-webkit-details-marker { display: none; }

.crm-v2-complete-state {
  margin: 12px;
  border-color: #b9dcca;
  background: #f2faf6;
  color: #23623f;
  font-weight: 800;
}

.crm-v2-handled {
  border-top: 1px solid var(--line);
  background: #f7fbfa;
}

.crm-v2-handled > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #23623f;
  font-weight: 850;
  cursor: pointer;
}

.crm-v2-handled > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.crm-v2-handled-list {
  border-top: 1px solid var(--line);
}

.crm-v2-sub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  margin-top: 16px;
}

.crm-v2-panel { min-width: 0; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.crm-v2-panel > header { margin-bottom: 12px; }
.crm-v2-link { min-height: 44px; padding: 6px; border: 0; background: transparent; color: var(--teal); font-weight: 750; cursor: pointer; }
.crm-v2-link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.crm-v2-panel-actions { display: inline-flex; align-items: center; gap: 6px; }
.crm-v2-truncation { margin: -4px 0 10px; color: var(--sub); font-size: 12px; }

.crm-v2-contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.crm-v2-contact { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); text-align: start; cursor: pointer; }
.crm-v2-contact:hover,
.crm-v2-contact:focus-visible { border-color: var(--selring); background: var(--sel); }
.crm-v2-contact:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.crm-v2-contact span { min-width: 0; }
.crm-v2-contact strong,
.crm-v2-contact small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-v2-contact strong { font-size: 13px; }
.crm-v2-contact small { color: var(--sub); font-size: 11px; }
.crm-v2-contact b { padding: 2px 7px; border-radius: 999px; background: var(--tealsoft); color: var(--teal); font-size: 10px; white-space: nowrap; }

.crm-v2-pipeline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, .32fr); gap: 10px; direction: rtl; }
.crm-v2-funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.crm-v2-pipeline button { position: relative; min-width: 0; min-height: 56px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: var(--tealsoft); color: var(--ink); text-align: start; cursor: pointer; }
.crm-v2-funnel button:not(:last-child)::after { content: "‹"; position: absolute; inset-inline-end: -6px; top: 16px; z-index: 1; color: #668f94; }
.crm-v2-pipeline button:hover { border-color: var(--teal); }
.crm-v2-pipeline button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.crm-v2-population { border-inline-start-color: var(--teal) !important; background: #fff !important; }
.crm-v2-population small { display: block; margin-bottom: 3px; color: var(--sub); font-size: 9px; }
.crm-v2-pipeline strong,
.crm-v2-pipeline span { display: block; }
.crm-v2-pipeline strong { font-size: 17px; line-height: 1; }
.crm-v2-pipeline span { overflow: hidden; color: var(--sub); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.crm-v2-pipeline-note { margin: 10px 0 0; color: var(--sub); font-size: 11px; line-height: 1.45; }

.crm-v2-composer { margin-bottom: 16px; padding: 13px; border: 2px solid var(--selring); border-radius: 11px; background: #fbfeff; }
.crm-v2-composer h3 { margin: 0 0 2px; font-size: 15px; }
.crm-v2-composer > p { margin: 0 0 10px; color: var(--sub); font-size: 12px; }
.crm-v2-mode-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.crm-v2-mode-row button { min-height: 34px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; }
.crm-v2-mode-row button.is-active { border-color: var(--teal); background: var(--teal); color: #fff; font-weight: 750; }
.crm-v2-mode-row button:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.crm-v2-quick-log-form textarea { width: 100%; min-height: 72px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.crm-v2-quick-log-form textarea:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.crm-v2-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; }
.crm-v2-composer-foot small { color: var(--sub); font-size: 11px; }
.crm-v2-more-tools { margin-top: 14px; border-top: 1px solid var(--line); }
.crm-v2-more-tools > summary { min-height: 44px; display: flex; align-items: center; color: var(--teal); font-weight: 750; cursor: pointer; }

.crm-v2-timeline { display: grid; }
.crm-v2-event { position: relative; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; padding-bottom: 11px; }
.crm-v2-event::before { content: ""; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--selring); }
.crm-v2-event:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 4px; top: 15px; bottom: 0; width: 1px; background: var(--line); }
.crm-v2-event strong { display: block; font-size: 12px; }
.crm-v2-event p { margin: 1px 0; color: var(--sub); font-size: 12px; }
.crm-v2-event time { color: #6f888d; font-size: 10px; }

@media (prefers-reduced-motion: reduce) {
  .crm-v2-queue-row,
  #content:has(> .w4-crm-tbar) .crm-drawer { transition: none; }
}

@media (max-width: 980px) {
  #content:has(> .w4-crm-tbar) .crm-view-switch-row { display: block; overflow-x: auto; }
  #content:has(> .w4-crm-tbar) .crm-view-switch { min-width: max-content; }
  #content:has(> .w4-crm-tbar) .crm-view-list-shell.is-board-hidden { display: none; }
  #content:has(> .w4-crm-tbar) .crm-board-desktop { display: block !important; }
  .crm-v2-queue-row { grid-template-columns: minmax(0, 1fr); }
  .crm-v2-row-actions { justify-content: flex-start; }
  .crm-v2-sub-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  #content:has(> .w4-crm-tbar) { border: 0; border-radius: 0; }
  #content:has(> .w4-crm-tbar) .w4-crm-tbar { align-items: stretch; flex-direction: column; padding: 12px; }
  #content:has(> .w4-crm-tbar) .w4-crm-tbar .w4-tbar-actions { width: 100%; flex-wrap: wrap; justify-content: stretch; }
  .crm-v2-search { order: 3; flex-basis: 100%; max-width: none; }
  .crm-v2-tbar-count { margin-inline-start: auto; }
  .w4-crm-tbar .btn.pri { display: none; }
  #content:has(> .w4-crm-tbar) .crm-view-switch-row,
  #content:has(> .w4-crm-tbar) .crm-view-list-shell { margin-inline: 12px; }
  #content:has(> .w4-crm-tbar) .crm-view-switch-row,
  #content:has(> .w4-crm-tbar) .crm-mobile-context { display: none !important; }
  .crm-v2-mobile-nav { display: flex; justify-content: flex-end; margin: 8px 12px 10px; }
  .crm-v2-mobile-more { position: relative; }
  .crm-v2-mobile-more > summary { min-width: 58px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--teal); font-weight: 800; cursor: pointer; list-style: none; }
  .crm-v2-mobile-more > summary::-webkit-details-marker { display: none; }
  .crm-v2-page-head { align-items: center; }
  .crm-v2-page-head p { font-size: 12px; }
  .crm-v2-done-meter { min-width: 124px; }
  .crm-v2-done-meter > div { display: grid; gap: 1px; }
  .crm-v2-hero > header { align-items: flex-start; }
  .crm-v2-queue-row { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; box-shadow: 0 4px 14px rgb(15 76 82 / 5%); }
  .crm-v2-queue { padding: 10px; background: #fbfdfd; }
  .crm-v2-queue-row:not(.is-first) { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-identity { grid-column: 1; grid-row: 1; grid-template-columns: minmax(0, 1fr); }
  .crm-v2-queue-row:not(.is-first) .crm-v2-avatar,
  .crm-v2-queue-row:not(.is-first) .crm-v2-identity small { display: none; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-why { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-why strong { grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-why small { display: none; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-age { grid-column: 2; grid-row: 1; margin: 0; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-row-actions { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .crm-v2-queue-row:not(.is-first) .crm-v2-row-actions > :not(.crm-v2-more) { display: none; }
  .crm-v2-row-actions { margin-top: 2px; }
  .crm-v2-row-actions .btn { min-height: 44px; }
  .crm-v2-queue-row.is-first .crm-v2-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 10px; border-top: 1px solid var(--line); }
  .crm-v2-queue-row.is-first .crm-v2-more { justify-self: start; }
  .crm-v2-contact-list { grid-template-columns: minmax(0, 1fr); }
  .crm-v2-contacts-panel { display: none; }
  .crm-v2-sub-grid { margin-top: 12px; }
  .crm-v2-sub-grid .crm-v2-panel { padding: 10px 11px; }
  .crm-v2-sub-grid .crm-v2-panel > header { margin-bottom: 8px; }
  .crm-v2-pipeline > div { padding-inline: 4px; text-align: center; }
  .crm-v2-composer-foot { align-items: stretch; flex-direction: column; }
  .crm-v2-composer-foot .btn { min-height: 44px; }
  #content:has(> .w4-crm-tbar) .crm-drawer,
  #content:has(> .w4-crm-tbar) .crm-drawer.is-expanded {
    inset: auto 0 0;
    width: 100%;
    height: min(72dvh, 680px);
    max-height: 72dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgb(15 76 82 / 20%);
  }
  #content:has(> .w4-crm-tbar) .crm-drawer .crm-detail-head { padding: 12px 14px; }
  #content:has(> .w4-crm-tbar) .crm-drawer .crm-detail-expand { display: none; }
  #content:has(> .w4-crm-tbar) .crm-drawer .crm-detail-body { display: block; padding: 12px 14px 20px; }
  #content:has(> .w4-crm-tbar) .crm-drawer .crm-v2-composer { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 18px rgb(15 76 82 / 8%); }
}

@media (max-width: 640px) {
  .w5-pagehead { display: grid; }
  .w5-pagehead h1,
  .w5-pagehead h2 { font-size: 1.35rem; }
  .w5-metric-grid,
  .w5-mine .student-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w5-home-lower { grid-template-columns: 1fr; }
  .w5-continue-hero { grid-template-columns: 1fr; }
  .w5-continue-thumb { min-height: 180px; }
  .w5-next-strip { align-items: stretch; flex-direction: column; }
  .w5-next-strip .btn { width: 100%; }
  .w5-course-map .student-map-head { padding: 17px; }
  .w5-course-map .student-map-card { min-height: 62px; padding: 11px; }
  .w5-course-map .student-map-state { padding-inline: 8px; }
  .w5-mine .student-attendance-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .lesson-area-tabs { gap: 18px; margin-inline: 12px; }
  .lesson-area-tabs button { min-height: 44px; }
  .lesson-pager { margin-inline: 12px; }
  .lesson-pager-button { max-width: 49%; padding-inline: 10px; font-size: .78rem; }
}
.admin-next-meetings { min-width: 0; }
.admin-next-meetings .admin-today-panel { height: 100%; margin: 0; }
#content:has(> .w4-admin-tbar) .owner-queue-type { color: var(--teal); }
#content:has(> .w4-admin-tbar) .admin-quick-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
#content:has(> .w4-admin-tbar) .admin-quick-group {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}
#content:has(> .w4-admin-tbar) .admin-quick-group-head { display: grid; margin: 0; }
#content:has(> .w4-admin-tbar) .admin-quick-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
#content:has(> .w4-admin-tbar) .admin-action-launcher {
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

/* Calendar */
#content:has(> .w4-calendar-tbar) > .page-header { display: none; }
#content:has(> .w4-calendar-tbar) .calendar-shell { border: 0; border-radius: 0; box-shadow: none; }
#content:has(> .w4-calendar-tbar) .calendar-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
#content:has(> .w4-calendar-tbar) .calendar-toolbar-heading { min-width: 0; }
#content:has(> .w4-calendar-tbar) .calendar-grid {
  min-height: 480px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfd;
}
#content:has(> .w4-calendar-tbar) .calendar-day { border-color: var(--line); }
#content:has(> .w4-calendar-tbar) .calendar-occurrence {
  border: 1px solid #cce1e3;
  border-radius: 9px;
  background: #fff;
}
#content:has(> .w4-calendar-tbar) .calendar-occurrence-drawer {
  width: min(335px, 100%);
  border-radius: 0;
  box-shadow: 14px 0 35px rgb(15 76 82 / 16%);
}

/* CRM */
#content:has(> .w4-crm-tbar) > .page-header { display: none; }
#content:has(> .w4-crm-tbar) .crm-view-switch-row { margin-bottom: 14px; }
#content:has(> .w4-crm-tbar) .crm-view-switch {
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: transparent;
}
#content:has(> .w4-crm-tbar) .crm-view-switch button { border-radius: 0; }
#content:has(> .w4-crm-tbar) .crm-view-switch button.active { border-bottom: 2px solid var(--teal); background: transparent; }
#content:has(> .w4-crm-tbar) .crm-list,
#content:has(> .w4-crm-tbar) .crm-list-table,
#content:has(> .w4-crm-tbar) .crm-board { border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
#content:has(> .w4-crm-tbar) .crm-contact-row:hover,
#content:has(> .w4-crm-tbar) .crm-contact-row.selected { background: #fbfefe; }
#content:has(> .w4-crm-tbar) .crm-drawer {
  width: min(380px, 100%);
  border-radius: 0;
  background: #fbfdfd;
  box-shadow: 14px 0 35px rgb(15 76 82 / 16%);
}
#content:has(> .w4-crm-tbar) .crm-drawer.is-expanded {
  inset-inline-start: 24px;
  width: min(75vw, calc(100vw - 48px));
  border-radius: 14px;
}

@media (max-width: 700px) {
  #content:has(> .w4-crm-tbar) .crm-drawer,
  #content:has(> .w4-crm-tbar) .crm-drawer.is-expanded {
    inset: 0;
    width: 100%;
    height: 100dvh;
    border-radius: 0;
  }
}

/* Communications */
#content:has(> .w4-communications-tbar) > .page-header { display: none; }
#content:has(> .w4-communications-tbar) .communication-compose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 16px;
  margin-top: 0;
}
#content:has(> .w4-communications-tbar) .communication-compose-form,
#content:has(> .w4-communications-tbar) .timeline-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
#content:has(> .w4-communications-tbar) .timeline-event {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.communication-compose-form { display: grid; gap: 14px; }
.communication-compose-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.communication-compose-head h2 { margin: 2px 0 0; }
.communication-channel-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.communication-channel-fieldset legend { margin-bottom: 7px; color: var(--ink); font-weight: 700; }
.communication-channel-bar { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfb; }
.communication-channel-bar button { flex: 1; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sub); font-weight: 700; }
.communication-channel-bar button.active { background: var(--tealsoft); color: var(--teal); box-shadow: inset 0 0 0 1px #b8d8dc; }
.communication-safety-note { display: flex; gap: 10px; padding: 12px 13px; border: 1px solid #b9ddcd; border-radius: 10px; background: #eff8f4; color: #215c46; }
.communication-safety-note > span { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--green); color: #fff; }
.communication-safety-note strong, .communication-safety-note p { display: block; margin: 0; }
.communication-safety-note p { margin-top: 2px; font-size: .82rem; }
.communication-compose-actions { display: flex; align-items: center; gap: 8px; }
.communication-draft-menu { margin-inline-start: auto; }
.communication-log-disclosure { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.communication-log-disclosure > summary { min-height: 46px; display: flex; align-items: center; padding: 10px 14px; color: var(--teal); cursor: pointer; font-weight: 800; }
.communication-log-disclosure > form { margin: 0 14px 14px; }
.communication-preview-dialog { width: min(560px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); box-shadow: 0 22px 65px rgb(15 76 82 / 25%); }
.communication-preview-dialog::backdrop { background: rgb(7 43 48 / 42%); }
.communication-preview-card { display: grid; gap: 14px; padding: 20px; }
.communication-preview-recipient { margin: 0; color: var(--sub); }
.communication-preview-subject { margin: 0; }
.communication-preview-body { min-height: 100px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfdfd; white-space: pre-wrap; }

/* Analytics */
#content:has(> .w4-analytics-tbar) > .page-header { display: none; }
#content:has(> .w4-analytics-tbar) .analytics-board { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
#content:has(> .w4-analytics-tbar) .ops-panel { border-color: var(--line); border-radius: 12px; box-shadow: none; }
#content:has(> .w4-analytics-tbar) .analytics-bar-track { height: 9px; background: var(--tealsoft); }
#content:has(> .w4-analytics-tbar) .analytics-bar-track > div { background: var(--teal); }
.attendance-donut-panel { display: grid; align-content: start; gap: 18px; }
.attendance-donut { --attendance-angle: calc(var(--attendance-percent) * 3.6deg); display: grid; width: 178px; aspect-ratio: 1; place-items: center; margin: 4px auto; border-radius: 50%; background: conic-gradient(var(--teal) var(--attendance-angle), #dfe9e9 0); }
.attendance-donut::before { content: ""; grid-area: 1 / 1; width: 122px; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.attendance-donut > span { z-index: 1; grid-area: 1 / 1; display: grid; text-align: center; }
.attendance-donut strong { color: var(--panel); font-size: 1.75rem; }
.attendance-donut small { color: var(--sub); }
.attendance-legend { display: flex; justify-content: center; gap: 18px; }
.attendance-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); }
.attendance-legend .status-dot.muted { background: #b7c9ca; }
.analytics-secondary-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 16px; margin-top: 16px; }
.analytics-attention-panel > p { margin-top: 0; }
.analytics-attention-list { display: grid; }
.analytics-attention-list > article { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px; border-top: 1px solid var(--line); }
.analytics-attention-list > article:first-child { border-top: 0; }
.analytics-attention-list div { display: grid; min-width: 0; }
.analytics-attention-list small { color: var(--sub); }
.analytics-attention-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: var(--goldbg); color: var(--gold); font-weight: 900; }

/* Course materials and owner decisions */
#content:has(> .w4-materials-tbar) > .page-header,
#content:has(> .w4-decisions-tbar) > .page-header { display: none; }
#content:has(> .w4-decisions-tbar) .ai-control-hero {
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}
.w4-materials-context { padding-block: 12px; }
.w4-materials-context p { margin: 3px 0 0; color: var(--sub); }
.owner-course-tbar-switcher { position: relative; }
.owner-course-tbar-switcher > summary { list-style: none; cursor: pointer; }
.owner-course-tbar-switcher > summary::-webkit-details-marker { display: none; }
.owner-course-tbar-switcher[open] > summary { background: rgb(255 255 255 / 16%); }
.owner-course-tbar-switcher > div {
  position: absolute;
  z-index: 12;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  display: grid;
  width: max-content;
  min-width: 210px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 30px rgb(15 76 82 / 20%);
}
.owner-course-tbar-switcher > div button {
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: start;
}
.owner-course-tbar-switcher > div button:hover,
.owner-course-tbar-switcher > div button:focus-visible,
.owner-course-tbar-switcher > div button[aria-checked="true"] { background: var(--tealsoft); color: var(--teal); }
#content:has(> .w4-decisions-tbar) .ai-control-hero { border-color: #eddbb5; background: var(--goldbg); }
#content:has(> .w4-decisions-tbar) .ai-control-grid > article,
#content:has(> .w4-decisions-tbar) .section-block { border-color: var(--line); border-radius: 12px; box-shadow: none; }

@media (max-width: 700px) {
  #content:has(> .w4-tbar) { border-radius: 0; }
  .w4-tbar { align-items: flex-start; padding: 10px 12px; }
  .w4-tbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .w4-tbar .btn { min-height: 44px; padding-inline: 10px; }
  .w4-pagehead { align-items: flex-start; flex-direction: column; margin-inline: 12px; }
  #content > .w4-tbar ~ :not(.w4-pagehead, .admin-action-scrim, .crm-drawer-scrim, .calendar-occurrence-scrim) { margin-inline: 12px; }
  .w4-summaryline { align-items: flex-start; flex-direction: column; }
  .w4-metrics { grid-template-columns: 1fr; gap: 10px; }
  #content:has(> .w4-admin-tbar) .admin-desktop-console,
  #content:has(> .w4-communications-tbar) .communication-compose-layout,
  #content:has(> .w4-analytics-tbar) .analytics-board,
  .analytics-secondary-grid { grid-template-columns: 1fr; }
  #content:has(> .w4-admin-tbar) .admin-quick-groups { grid-template-columns: 1fr; }
  #content:has(> .w4-admin-tbar) .admin-queue-item { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .w4-item-menu > div { left: 0; }
  .communication-recipient-row { grid-template-columns: 1fr; }
  .communication-channel-bar { overflow-x: auto; }
  .communication-channel-bar button { flex: 0 0 auto; min-width: 105px; }
  .communication-compose-actions { flex-wrap: wrap; }
  #content:has(> .w4-calendar-tbar) .calendar-toolbar { grid-template-columns: 1fr; }
  #content:has(> .w4-calendar-tbar) .calendar-results { overflow-x: auto; }
  #content:has(> .w4-calendar-tbar) .calendar-grid.calendar-view-week { min-width: 920px; }
}

/* Wave 3 — shared video library and in-context picker. */
.media-library {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 8px 30px rgb(15 76 82 / 12%);
}

.media-library-tbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 10px 18px;
  background: var(--panel);
  color: var(--paneltx);
}

.media-library-tbar h1 {
  margin: 0;
  color: inherit;
  font-size: 1.02rem;
}

.media-library-tbar .btn.pri {
  min-height: 44px;
  background: #fff;
  color: var(--panel);
}

.media-library-live {
  min-height: 1px;
  padding-inline: 20px;
  color: var(--sub);
}

.media-library-filters {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px 0;
}

.media-library-filters input,
.media-library-filters select {
  width: auto;
  min-width: 180px;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}

.media-library-filters input {
  width: min(260px, 100%);
}

.media-upload-zone,
.media-upload-drop {
  display: grid;
  place-items: center;
  width: calc(100% - 40px);
  min-height: 92px;
  margin: 16px 20px 0;
  padding: 18px;
  border: 2px dashed var(--selring);
  border-radius: 12px;
  background: #fbfeff;
  color: var(--teal);
  text-align: center;
}

.media-upload-zone small,
.media-upload-drop small {
  display: block;
  margin-top: 3px;
  color: var(--sub);
  font-weight: 400;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 20px;
  list-style: none;
}

.media-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 150ms ease;
}

.media-card:hover,
.media-card:focus-within {
  box-shadow: 0 6px 18px rgb(15 76 82 / 15%);
}

.media-card:has(.media-card-menu[open]) {
  overflow: visible;
}

.media-thumbnail {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  background: var(--tealsoft);
}

.media-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-thumbnail-pending {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 5px 10px;
  border: 1px dashed var(--selring);
  border-radius: 8px;
  background: rgb(255 255 255 / 64%);
  color: var(--sub);
  font-size: 12px;
}

.media-thumbnail-placeholder {
  background: var(--tealsoft);
}

.media-duration {
  position: absolute;
  bottom: 7px;
  left: 7px;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgb(10 30 33 / 82%);
  color: #fff;
  font-size: 11px;
}

.media-preview-trigger {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 94%);
  color: var(--teal);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 150ms ease;
}

.media-card:hover .media-preview-trigger,
.media-card:focus-within .media-preview-trigger,
.media-picker-card:hover .media-preview-trigger,
.media-picker-card:focus-within .media-preview-trigger {
  opacity: 1;
}

.media-card-meta {
  padding: 10px 13px 13px;
}

.media-card-heading,
.media-card-actions,
.media-dialog-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.media-card-heading {
  justify-content: space-between;
}

.media-card-heading strong {
  min-width: 0;
}

.media-card-meta > small,
.media-picker-meta small,
.media-version-truth {
  display: block;
  color: var(--sub);
  font-size: 12px;
}

.media-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.media-chip {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--tealsoft);
  color: var(--teal);
  font-size: 11px;
}

.media-version-truth {
  margin: 8px 0;
}

.media-card-actions {
  flex-wrap: wrap;
  justify-content: space-between;
}

.media-card-actions .btn {
  min-height: 44px;
}

.media-card-menu {
  position: relative;
}

.media-card-menu summary {
  display: grid;
  width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--teal);
  cursor: pointer;
  font-size: 1.25rem;
  list-style: none;
}

.media-card-menu summary::-webkit-details-marker {
  display: none;
}

.media-card-menu[open] > div {
  position: absolute;
  z-index: 4;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  display: grid;
  min-width: 150px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(15 76 82 / 18%);
}

.media-card-menu button {
  min-height: 40px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: start;
}

.media-card-menu button:hover,
.media-card-menu button:focus-visible {
  background: var(--tealsoft);
  color: var(--teal);
}

.media-card-details {
  display: grid;
  gap: 5px;
  margin: 10px 0 0;
  padding: 10px;
  border-radius: 9px;
  background: var(--tealsoft);
  font-size: 12px;
}

.media-card-details div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.media-card-details dt {
  color: var(--sub);
}

.media-card-details dd {
  margin: 0;
  font-weight: 700;
}

.media-preview-frame,
.media-picker-player iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.media-thumbnail.media-preview-playing .media-preview-frame {
  height: 100%;
}

.media-preview-loading {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 12px;
  place-content: center;
  gap: 8px;
  background: var(--panel);
  color: #fff;
  text-align: center;
  font-size: 13px;
}

.media-preview-fallback {
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 8px;
  z-index: 2;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgb(6 59 74 / 92%);
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}

.media-preview-stop {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 8px;
  background: rgb(15 76 82 / 92%);
  color: #fff;
  font-weight: 800;
}

.media-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 20px 24px;
  overflow: auto;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 20px 60px rgb(0 0 0 / 35%);
}

.media-dialog::backdrop {
  background: rgb(14 36 40 / 55%);
}

.media-dialog h2 {
  margin: 0 0 3px;
  font-size: 1.2rem;
}

.media-dialog-explainer {
  margin: 0 0 16px;
  color: var(--sub);
  font-size: 13px;
}

.media-upload-drop {
  width: 100%;
  margin: 8px 0;
  cursor: pointer;
}

.media-upload-drop input[type="file"] {
  width: min(420px, 100%);
  margin-top: 10px;
}

.media-rights-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
}

.media-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  max-height: 330px;
  padding: 3px;
  overflow: auto;
}

.media-picker-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: start;
}

.media-picker-card.is-selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px var(--tealsoft);
}

.media-picker-meta {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
}

.media-picker-preview {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--tealsoft);
  font-size: 13px;
}

.media-picker-player {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.media-picker-preview-copy {
  min-width: 0;
}

.media-picker-preview-button {
  display: flex;
  width: fit-content;
  margin-top: 9px;
}

.media-dialog-actions {
  flex-wrap: wrap;
  margin-top: 18px;
}

.media-dialog-actions .btn {
  min-height: 44px;
}

.content-video-association {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tealsoft);
}

@media (prefers-reduced-motion: reduce) {
  .media-card,
  .media-preview-trigger { transition: none; }
}

@media (max-width: 700px) {
  .media-library-tbar,
  .media-library-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .media-library-filters input,
  .media-library-filters select,
  .media-library-filters .btn {
    width: 100%;
  }

  .media-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }

  .media-upload-zone {
    width: calc(100% - 28px);
    margin-inline: 14px;
  }

  .media-dialog {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .media-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-picker-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-picker-player {
    width: 100%;
  }

  .media-preview-trigger { opacity: 1; }
}

@media (max-width: 390px) {
  .media-picker-grid { grid-template-columns: minmax(0, 1fr); }
  .media-dialog { padding: 16px; }
}

.schedule-slots-editor {
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
}

.schedule-slots-editor [data-schedule-rows] {
  display: grid;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.schedule-editor-head,
.schedule-slot-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.schedule-editor-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.schedule-slot-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-soft);
}
.schedule-slot-row.schedule-slot-error {
  border-color: var(--danger, #b42318);
  background: #fff6f5;
}
.schedule-row-error {
  color: var(--danger, #b42318);
  grid-column: 1 / -1;
}
.schedule-stale-recovery {
  border: 1px solid #d6b656;
  border-radius: 12px;
  padding: 12px;
  background: #fffbea;
}

.schedule-slot-row legend {
  padding-inline: 6px;
  font-weight: 800;
}

.schedule-slot-row > label,
.cohort-create-form,
.cohort-edit-form,
.cohort-create-form > *,
.cohort-edit-form > *,
.cohort-create-form .form-row > *,
.cohort-edit-form .form-row > * {
  min-width: 0;
  max-width: 100%;
}

.schedule-slot-actions {
  grid-column: 1 / -1;
  justify-content: space-between;
}

.schedule-slot-reorder {
  display: flex;
  gap: 8px;
  direction: rtl;
}

.schedule-slot-reorder .btn {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 12px;
}

.schedule-slot-reorder .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.cohort-create-form input,
.cohort-create-form select,
.cohort-edit-form input,
.cohort-edit-form select {
  min-height: 44px;
}

.cohort-edit-list {
  display: grid;
  gap: 10px;
}

.cohort-edit-disclosure {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.cohort-edit-disclosure > summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  color: var(--teal-dark);
  cursor: pointer;
}

.cohort-edit-disclosure > summary > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cohort-edit-disclosure > summary small,
.cohort-edit-summary-meta {
  color: var(--muted);
  font-size: 12px;
}

.cohort-edit-disclosure > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cohort-edit-summary-meta {
  margin-inline-start: auto;
  white-space: nowrap;
}

.cohort-edit-disclosure-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
}

.cohort-edit-disclosure .cohort-card-summary {
  display: none;
}

.cohort-edit-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px -14px -14px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 24px rgba(9, 30, 28, 0.08);
  backdrop-filter: blur(8px);
}

.cohort-edit-actions span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.cohort-edit-actions small {
  color: var(--muted);
}

.calendar-shell {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.calendar-shell.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 190;
  align-content: start;
  overflow: auto;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

.calendar-toolbar-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.calendar-toolbar-heading > div {
  min-width: 0;
}

.calendar-expand {
  flex: 0 0 auto;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
}

.calendar-toolbar h2 {
  margin: 4px 0 0;
  color: var(--teal-dark);
}

.calendar-navigation,
.calendar-view-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-navigation .btn {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 12px;
}

.calendar-view-toggle {
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

.calendar-view-toggle button {
  min-width: 64px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 9px;
  color: var(--ink-soft);
  background: transparent;
  font-weight: 800;
}

.calendar-view-toggle button[aria-pressed="true"] {
  color: #fff;
  background: var(--teal);
  box-shadow: var(--shadow-soft);
}

.calendar-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.calendar-filters label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
}

.calendar-filters select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  background: var(--surface);
}

.calendar-scope-note {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--ink-soft);
  background: var(--surface-tint);
}

.calendar-results {
  min-height: 240px;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.calendar-grid.calendar-view-day {
  grid-template-columns: minmax(0, 1fr);
}

.calendar-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.calendar-grid.calendar-view-month {
  gap: 4px;
}

.calendar-month-day {
  min-width: 0;
  min-height: 180px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.calendar-month-day.is-today {
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal);
}

.calendar-month-day.is-outside {
  background: var(--surface-soft);
}

.calendar-month-day.is-outside .calendar-month-day-button {
  color: var(--muted);
}

.calendar-month-day-button {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  border-radius: 50%;
  color: var(--teal-dark);
  background: transparent;
  font-weight: 900;
}

.calendar-month-day.is-today .calendar-month-day-button {
  color: #fff;
  background: var(--teal);
}

.calendar-month-occurrences {
  display: grid;
  gap: 3px;
}

.calendar-month-occurrence,
.calendar-month-more {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--surface-tint);
  text-align: start;
  font-size: 11px;
}

.calendar-month-occurrence span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-month-occurrence bdi,
.calendar-month-more {
  color: var(--teal-dark);
  font-weight: 800;
}

.calendar-month-dots {
  display: none;
}

.calendar-day {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.calendar-day.is-today {
  border-color: var(--teal-mid);
  box-shadow: inset 0 3px 0 var(--teal);
}

.calendar-day-heading {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: center;
  padding: 10px;
  text-align: start;
  color: var(--teal-dark);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.calendar-day-heading span {
  font-weight: 800;
}

.calendar-day-heading strong {
  direction: ltr;
}

.calendar-day-heading small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.calendar-day-occurrences {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
}

.calendar-occurrence {
  width: 100%;
  min-height: 88px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  text-align: start;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(16, 42, 48, 0.06);
}

button.calendar-occurrence:hover,
button.calendar-occurrence:focus-visible {
  border-color: var(--teal-mid);
  background: var(--surface-tint);
}

.calendar-occurrence-time {
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.calendar-occurrence strong,
.calendar-occurrence span {
  overflow-wrap: anywhere;
}

.calendar-occurrence > span:not(.calendar-occurrence-time) {
  color: var(--muted);
  font-size: 12px;
}

.calendar-occurrence.is-readonly {
  cursor: default;
}

.calendar-day-empty {
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 13px;
}

.calendar-empty {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
}

.calendar-occurrence-detail {
  display: grid;
  align-content: start;
  gap: 24px;
}

.calendar-occurrence-head {
  align-items: center;
}

.calendar-occurrence-heading,
.calendar-occurrence-title-row {
  min-width: 0;
}

.calendar-occurrence-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calendar-occurrence-title-row h2,
.calendar-occurrence-heading p {
  margin: 0;
}

.calendar-occurrence-heading p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.9rem;
}

.calendar-occurrence-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--surface-soft);
  font-size: 0.75rem;
  font-weight: 900;
}

.calendar-occurrence-facts {
  margin: 0;
  border-block: 1px solid var(--line);
}

.calendar-occurrence-facts > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(88px, 0.28fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 58px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}

.calendar-occurrence-facts > div:last-child {
  border-bottom: 0;
}

.calendar-occurrence-facts dt,
.calendar-occurrence-facts dd {
  margin: 0;
}

.calendar-occurrence-facts dt,
.calendar-occurrence-list span,
.calendar-meeting-chips span {
  color: var(--muted);
  font-size: 13px;
}

.calendar-occurrence-facts dt {
  font-weight: 800;
}

.calendar-occurrence-facts dd {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-weight: 750;
}

.calendar-occurrence-capacity-row dd {
  display: grid;
  grid-template-columns: auto minmax(100px, 1fr);
  align-items: center;
  gap: 12px;
}

.calendar-capacity-count {
  color: var(--teal-dark);
  font-weight: 900;
}

.calendar-capacity-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line);
}

.calendar-capacity-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.calendar-occurrence-section {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.calendar-occurrence-section h3,
.calendar-occurrence-empty,
.calendar-occurrence-readonly {
  margin: 0;
}

.calendar-occurrence-section h3 {
  color: var(--teal-dark);
  font-size: 1rem;
}

.calendar-occurrence-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-meeting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-meeting-chips li {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 0.78rem;
}

.calendar-occurrence-list li {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.calendar-occurrence-list.roster {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-occurrence-empty,
.calendar-occurrence-readonly {
  color: var(--muted);
  line-height: 1.6;
}

.calendar-roster-empty {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.calendar-inline-action {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  border-radius: 7px;
  color: var(--teal-dark);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.calendar-occurrence-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -10px 24px rgba(9, 30, 28, 0.08);
}

.calendar-occurrence-actions .btn {
  min-height: 44px;
}

.occurrence-override-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.occurrence-override-markers > span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--goldbg);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 850;
}

.calendar-occurrence.is-cancelled,
.calendar-month-occurrence.is-cancelled,
.schedule-today-occurrence.is-cancelled {
  border-style: dashed;
  background: var(--surface-soft);
  color: var(--muted);
  text-decoration: line-through;
  box-shadow: none;
}

.calendar-occurrence-override-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.calendar-occurrence-override-actions .btn { min-height: 44px; }

.occurrence-override-dialog {
  position: fixed;
  z-index: 240;
  inset: 50% auto auto 50%;
  width: min(520px, calc(100vw - 28px));
  max-width: 100%;
  max-height: min(720px, calc(100dvh - 28px));
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgb(9 30 28 / 40%);
  transform: translate(-50%, -50%);
}

.occurrence-override-form {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.occurrence-override-form header h2,
.occurrence-override-form header p { margin: 0; }
.occurrence-override-form header p { margin-top: 4px; color: var(--muted); }
.occurrence-override-form label { display: grid; gap: 6px; color: var(--teal-dark); font-weight: 800; }
.occurrence-override-form input,
.occurrence-override-form select,
.occurrence-override-form textarea { width: 100%; min-width: 0; }
.occurrence-override-form > small { margin-top: -10px; color: var(--muted); }
.occurrence-time-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.occurrence-cancel-warning { margin: 0; padding: 12px; border: 1px solid #e7c9c2; border-radius: 10px; background: #fff6f3; color: #813525; }
.occurrence-override-dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.occurrence-override-dialog-actions .btn { min-height: 44px; }

@media (max-width: 980px) {
  .calendar-shell {
    padding: 14px;
    border-radius: 14px;
  }

  .calendar-toolbar {
    grid-template-columns: 1fr;
  }

  .calendar-shell.is-expanded {
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  .calendar-navigation,
  .calendar-view-toggle {
    justify-content: stretch;
  }

  .calendar-navigation > *,
  .calendar-view-toggle > * {
    flex: 1 1 0;
  }

  .calendar-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-grid,
  .calendar-grid.calendar-view-day {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-grid.calendar-view-month {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  .calendar-month-day {
    min-height: 58px;
    display: grid;
    place-items: center;
    padding: 2px;
  }

  .calendar-month-day-button {
    width: 100%;
    min-width: 24px;
    min-height: 44px;
    margin: 0;
  }

  .calendar-month-occurrences {
    display: none;
  }

  .calendar-month-dots {
    min-height: 6px;
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: -7px;
  }

  .calendar-month-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--teal);
  }

  .calendar-day {
    display: grid;
    grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
  }

  .calendar-day-heading {
    min-height: 100%;
    align-content: center;
    border-bottom: 0;
    border-inline-end: 1px solid var(--line);
  }

  .calendar-day-occurrences {
    min-width: 0;
  }

  .calendar-occurrence {
    min-height: 76px;
  }
}

.crm-p3a-shell {
  display: grid;
  gap: 18px;
}

.crm-p3a-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--gold);
  border-radius: 18px;
  background: var(--surface);
}

.crm-p3a-banner h2,
.crm-p3a-banner p {
  margin: 4px 0 0;
}

.crm-p3a-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: start;
}

.crm-p3a-queue,
.crm-p3a-policy-rail,
.crm-p3a-policy-list {
  display: grid;
  gap: 12px;
}

.crm-p3a-draft {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--gold);
  border-radius: 14px;
  background: #fff9e9;
}

.crm-p3a-draft header,
.crm-p3a-draft header > div,
.crm-p3a-policy-list article,
.crm-p3a-permission-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.crm-p3a-draft header {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.crm-p3a-draft h4,
.crm-p3a-draft p {
  margin: 0;
}

.crm-p3a-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.crm-p3a-actions .btn,
.crm-view-switch button {
  min-height: 44px;
}

.crm-p3a-policy-list article,
.crm-p3a-permission-summary {
  padding-block: 10px;
  border-block-end: 1px solid var(--line);
}

.crm-p3a-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-p3a-segments > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.crm-p3a-retention {
  margin: 0;
  padding-inline-start: 20px;
}

@media (max-width: 980px) {
  .crm-p3a-banner,
  .crm-p3a-draft header {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-p3a-grid {
    grid-template-columns: 1fr;
  }

  .crm-p3a-actions .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 520px) {
  .calendar-toolbar-heading {
    align-items: flex-start;
  }

  .calendar-expand .crm-detail-expand-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .calendar-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-day {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .calendar-day-heading {
    padding: 8px;
  }

  .calendar-occurrence-list.roster {
    grid-template-columns: minmax(0, 1fr);
  }

  .calendar-occurrence-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding-block: 14px;
  }

  .calendar-occurrence-actions {
    padding-inline: 14px;
  }

  .calendar-occurrence-actions .btn {
    flex: 1 1 0;
  }

  .calendar-occurrence-override-actions { padding-inline: 14px; }
  .calendar-occurrence-override-actions .btn { flex: 1 1 100%; }
  .occurrence-time-fields { grid-template-columns: minmax(0, 1fr); }
  .occurrence-override-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .occurrence-override-form { padding: 16px; }
  .occurrence-override-dialog-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 760px) {
  .schedule-slot-row {
    grid-template-columns: 1fr;
  }

  .schedule-slot-actions {
    align-items: stretch;
  }

  .schedule-slot-actions > .danger {
    flex: 1 1 100%;
  }
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Skip-to-content link (WCAG 2.4.1): first focusable in the shell, off-screen
   until focused, then pinned to the inline-start (right in RTL) top corner. The
   white outline keeps the focus ring visible against the teal fill. */
.skip-link {
  position: fixed;
  top: -60px;
  inset-inline-start: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--teal);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  box-shadow: var(--shadow-soft);
  transition: top 0.16s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* The content region only takes focus programmatically (via the skip link); the
   tabindex must not add it to the tab order or show a persistent ring. */
#content:focus {
  outline: none;
}

.shell {
  min-height: 100vh;
  background: var(--card);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px clamp(16px, 3vw, 28px);
  background: var(--panel);
  color: var(--paneltx);
  border-bottom: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #fff;
  color: var(--panel);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 13px;
  font-weight: 900;
}

.brand-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.brand-mark.large {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  font-size: 18px;
}

.brand h1 {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 18px;
  margin: 0;
  letter-spacing: 0;
  color: var(--paneltx);
}

.brand span {
  display: block;
  font-size: 12px;
  color: #b9d2d4;
  margin-top: 2px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.attendance-actions {
  margin-top: 10px;
}

/* Poolside-loud attendance selected states: solid fills readable in sunlight. */
.attendance-actions .btn[data-action="attendance"][data-status="present"].is-selected {
  background: var(--ok);
  color: #fff;
}

.attendance-actions .btn[data-action="attendance"][data-status="absent"].is-selected {
  background: var(--danger);
  color: #fff;
}

.learner-progress-line {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
}

.learner-roster-ident {
  min-width: 0;
}

.coach-learner-profile-trigger {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  text-align: start;
}

.coach-learner-profile-trigger:hover,
.coach-learner-profile-trigger:focus-visible {
  border-color: var(--teal-mid);
  background: var(--surface-tint);
}

.coach-learner-profile-trigger .ico {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: var(--tealsoft);
  color: var(--teal);
  font-weight: 900;
}

.coach-learner-profile-trigger .copy {
  min-width: 0;
}

.coach-learner-profile-trigger .copy strong {
  display: block;
}

.coach-learner-profile-trigger .end {
  color: var(--sub);
  font-weight: 900;
}

.coach-learner-profile-drawer {
  width: min(520px, 94vw);
}

.coach-learner-profile-drawer .admin-action-head p {
  margin: 3px 0 0;
  color: var(--sub);
}

.coach-learner-profile-body {
  display: grid;
  align-content: start;
  gap: 16px;
}

.coach-learner-profile-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.coach-learner-profile-metrics article {
  display: grid;
  align-content: center;
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-tint);
}

.coach-learner-profile-metrics strong,
.coach-learner-profile-metrics span {
  display: block;
}

.coach-learner-profile-metrics strong {
  color: var(--teal-dark);
  font-size: 18px;
}

.coach-learner-profile-metrics span,
.coach-learner-profile-facts dt {
  color: var(--sub);
  font-size: 12px;
  font-weight: 800;
}

.coach-learner-profile-facts {
  display: grid;
  margin: 0;
  border-block: 1px solid var(--line);
}

.coach-learner-profile-facts > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.coach-learner-profile-facts > div:last-child {
  border-bottom: 0;
}

.coach-learner-profile-facts dd {
  margin: 0;
}

.coach-learner-profile-notes h3 {
  margin: 0 0 8px;
}

.learner-recent-notes {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.learner-recent-note {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

.learner-note-meta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 2px;
}

.learner-note-slot .coach-learner-note-form {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.user-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--panel);
  font-size: 13px;
  font-weight: 800;
}

.role-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--paneltx);
  font-size: 12px;
  font-weight: 800;
}

.role-chip.owner {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paneltx);
}

.role-chip.admin {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paneltx);
}

.role-chip.coach {
  background: rgba(255, 255, 255, 0.14);
  color: var(--paneltx);
}

.authstage,
.auth-stage {
  min-height: calc(100vh - 58px);
  display: grid;
  place-items: center;
  padding: 32px;
  background: linear-gradient(135deg, var(--tealsoft), #fbfdfd);
}

.authcard,
.auth-card,
.auth-panel {
  width: min(470px, 100%);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-shell);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

.authlogo,
.auth-logo {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--panel);
  color: #fff;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.authcard > h1,
.auth-card > h1 {
  margin: 2px 0 6px;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 25px;
  line-height: 1.3;
}

.authcard > p,
.auth-card > p {
  max-width: 360px;
  margin: 3px auto 16px;
  color: var(--sub);
}

.authcard .auth-form,
.auth-card .auth-form {
  text-align: start;
}

.authcard .auth-form > .btn,
.auth-card .auth-form > .btn,
.auth-provider-link,
.authcard .local-link {
  width: 100%;
  margin-top: 11px;
}

.authcard .form-note {
  margin-top: 0;
  text-align: center;
  font-size: 12px;
}

.auth-switch {
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 10px;
  background: transparent;
  color: var(--teal);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.eyebrow {
  color: var(--teal);
  font-weight: 700;
  margin: 0 0 12px;
}

.auth-story h2,
.page-title {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0 0 14px;
}

.auth-story p,
.lead {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
}

.auth-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.auth-panel-head h2,
.auth-form h3 {
  font-family: "Rubik", "Heebo", sans-serif;
  margin: 0;
  color: var(--ink);
}

.auth-panel-head p,
.form-note {
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.55;
}

.auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 20px;
}

.auth-tabs button {
  flex: 1;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  border-radius: 7px;
}

.lead-flow {
  display: grid;
  gap: 16px;
}

.lead-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.lead-progress-dots {
  display: inline-flex;
  gap: 6px;
}

.lead-progress-dots i {
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: var(--line-strong);
}

.lead-progress-dots i:first-child {
  background: var(--coral);
}

.lead-step[hidden] {
  display: none;
}

.lead-step.is-active {
  animation: lead-step-enter 180ms ease-out both;
}

.lead-primary {
  min-height: 48px;
  background: var(--coral);
  color: #fff;
}

.lead-primary:hover {
  background: #b94332;
}

.lead-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lead-chip-fieldset {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lead-chip-fieldset legend {
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 7px;
}

.lead-chip-fieldset legend small {
  color: var(--muted);
  font-weight: 400;
}

.lead-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.lead-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lead-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 700;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.lead-chip input:checked + span {
  border-color: var(--teal);
  background: var(--surface-tint);
  color: var(--teal-dark);
}

.lead-chip input:focus-visible + span {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.lead-marketing-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-tint);
  color: var(--ink-soft);
  line-height: 1.55;
  cursor: pointer;
}

.lead-marketing-consent input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--teal);
}

.lead-marketing-consent input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.lead-skip {
  justify-self: center;
  padding: 8px 12px;
  background: transparent;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lead-expansion-callout {
  padding: 12px 14px;
  border: 1px solid #eed49a;
  border-radius: 8px;
  background: #fff7df;
  color: #70500b;
  font-weight: 700;
}

.lead-success {
  padding: 18px 4px 4px;
  text-align: center;
}

.lead-success-icon {
  display: block;
  font-size: 42px;
  margin-bottom: 10px;
}

.lead-success p {
  color: var(--muted);
  line-height: 1.6;
}

.lead-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #176b50;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

@keyframes lead-step-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .lead-step.is-active {
    animation: none;
  }

  .lead-chip span {
    transition: none;
  }
}

.auth-tabs button:hover {
  color: var(--teal-dark);
  background: rgba(255, 255, 255, 0.7);
}

.auth-tabs .active,
.auth-tabs button.active:hover {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 1px 2px rgba(16, 42, 48, 0.08);
}

.panel-divider {
  height: 1px;
  background: var(--line);
  margin: 26px 0;
}

.auth-status {
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0 0;
  text-align: center;
  border: 0;
}

.auth-status.sent {
  background: var(--tealsoft);
}

.auth-status.invalid {
  background: #fcebe8;
  border-color: #f3cfca;
}

.auth-status h3 {
  margin: 12px 0 8px;
  font-family: "Rubik", "Heebo", sans-serif;
  color: var(--ink);
}

.auth-status p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 auto 14px;
}

.mailicon,
.mail-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #fff;
  color: var(--teal);
  font-size: 19px;
}

.auth-email {
  display: block;
  margin-top: -8px;
  color: var(--ink);
}

.authcard .pill {
  margin: 0 auto 8px;
}

.authcard .backlink {
  width: auto;
  display: inline-flex;
  margin-top: 10px;
  background: transparent;
  color: var(--teal);
  font-weight: 800;
}

.auth-status strong {
  color: var(--teal);
}

.auth-status .state-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.auth-status.invalid .state-icon {
  background: #fff;
  color: var(--danger);
}

.auth-status .local-link {
  width: 100%;
  margin-bottom: 8px;
}

.auth-logo-image {
  width: 100%;
  height: 92px;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 8px 0;
  border: none;
  border-radius: 8px;
  margin-bottom: 18px;
  background: transparent;
}

.auth-story {
  min-height: min(720px, calc(100vh - 128px));
  background: var(--teal-dark);
  color: #fff;
  border-radius: 8px;
  padding: clamp(28px, 5vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--shadow);
}

.visual-auth-story {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(6, 59, 74, 0.96), rgba(6, 59, 74, 0.78) 48%, rgba(6, 59, 74, 0.34)),
    url("/assets/course/hero-pool-action.webp") center / cover;
}

.visual-auth-story::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 24%, rgba(159, 213, 218, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(6, 59, 74, 0.08), rgba(6, 59, 74, 0.42));
}

.auth-story h2 {
  color: #fff;
  max-width: 760px;
}

.auth-story p {
  color: #cfe9ec;
  max-width: 620px;
}

.feature-list {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.feature-list span {
  color: #cfe9ec;
  font-weight: 600;
}

.feature-list span::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline-end: 10px;
  border-radius: 7px;
  color: var(--aqua);
  background: rgba(159, 213, 218, 0.18);
}

.panel,
.card,
.metric,
.lesson-row,
.video-row,
.note-row {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.panel {
  padding: 22px;
  box-shadow: var(--shadow);
}

.form-panel {
  margin-top: 22px;
  max-width: 760px;
}

.panel h3,
.section-title {
  margin: 0 0 14px;
  font-size: 20px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-hint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) auto;
  gap: 8px;
  align-items: end;
  min-width: 360px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 9px;
  min-height: 44px;
  padding: 10px 12px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--line-strong);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.btn {
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover {
  background: var(--teal-dark);
  box-shadow: var(--shadow-soft);
}

/* --focus-ring is the same teal as the .btn fill, so the default 2px outline is
   nearly invisible on a teal button. Add a white ring hugging the fill (visible on
   teal/coral) while keeping the teal outline outside (visible on the light page),
   so the focus indicator reads on any button variant and any background. */
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px #fff;
}

.btn.secondary {
  background: var(--surface-tint);
  color: var(--teal);
}

.btn.ghost {
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

.topbar .btn.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: transparent;
  box-shadow: none;
}

.topbar .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Shared calm-explorer primitives for subsequent waves. */
.btn.teal,
.btn.primary {
  background: var(--teal);
  color: #fff;
}

.btn.soft {
  background: var(--tealsoft);
  color: var(--teal);
}

.btn.line {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.dash,
.add-button {
  min-height: 44px;
  border: 1px dashed var(--selring);
  border-radius: 8px;
  padding: 8px 14px;
  background: #fff;
  color: var(--teal);
  font: inherit;
  font-weight: 700;
}

.dash:hover,
.add-button:hover {
  background: var(--tealsoft);
}

.pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--goldbg);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  margin: 0;
}

.pill.live {
  background: #e6f5ed;
  color: #237a55;
}

.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #d9a514;
}

.status-dot.live,
.status-dot.published {
  background: #2e9e6b;
}

.status-dot.draft {
  background: #d9a514;
}

.typed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.typed-row .row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--tealsoft);
  color: var(--teal);
  font-weight: 800;
}

.note-card {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.btn.warn {
  background: var(--coral);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
}

.lead-primary:disabled,
.btn.warn:disabled {
  background: #9b4d43;
  color: #fff;
  opacity: 1;
}

.btn:active,
button[data-action]:active,
button.is-pressing,
a.btn:active,
summary:active,
.student-map-card:active,
.student-bottom-tab:active,
.student-drawer-link:active,
.owner-more-item:active,
.lesson-video-button:active,
.course-switcher-button:active,
.sidebar-section > button:active {
  opacity: 0.86;
  transform: scale(0.97);
}

.is-pending,
[aria-busy="true"] {
  cursor: progress;
}

button.is-pending,
.btn.is-pending,
input[type="submit"].is-pending {
  position: relative;
  opacity: 0.66;
  pointer-events: none;
}

button.is-pending::after,
.btn.is-pending::after {
  content: "";
  width: 0.86em;
  height: 0.86em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 999px;
  animation: pending-spin 0.72s linear infinite;
}

form[aria-busy="true"] {
  position: relative;
}

@keyframes pending-spin {
  to {
    transform: rotate(360deg);
  }
}

.layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: calc(100vh - 58px);
  background: var(--card);
}

.sidebar {
  border-inline-start: 1px solid var(--line);
  background: #fbfdfd;
  padding: 16px 12px;
  position: sticky;
  top: 58px;
  align-self: start;
  overflow-y: auto;
  min-height: calc(100vh - 58px);
  max-height: calc(100vh - 58px);
}

.sidebar-title {
  color: var(--sub);
  font-size: 12px;
  font-weight: 800;
  margin: 2px 8px 12px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.sidebar-section {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.sidebar-section > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: right;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid transparent;
  font-weight: 700;
  box-shadow: none;
}

.sidebar-section > button:hover {
  background: var(--tealsoft);
  color: var(--teal-dark);
  border-color: transparent;
}

.sidebar-section > button.active,
.sidebar-section > button.active:hover {
  background: var(--sel);
  color: var(--teal);
  border-color: var(--selring);
  box-shadow: inset 0 0 0 1px var(--selring);
}

.accordion-caret {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 16px;
  line-height: 1;
}

.owner-sidebar .nav-list,
.owner-nav-list {
  gap: 16px;
}

.sidebar-group {
  display: grid;
  gap: 7px;
}

.sidebar-group-title {
  margin: 0 7px 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.sidebar-group-items {
  display: grid;
  gap: 7px;
}

.owner-sidebar-section > .owner-sidebar-link {
  justify-content: flex-start;
  min-height: 44px;
}

.owner-sidebar-section > .owner-sidebar-link[aria-current="page"] {
  background: var(--sel);
  color: var(--teal);
  border-color: var(--selring);
  box-shadow: inset 0 0 0 1px var(--selring);
}

.owner-sidebar .sidebar-course-menu {
  margin-top: 7px;
}

.sidebar-footer-links {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sidebar-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 8px;
  border-radius: 8px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.sidebar-footer-links a:hover {
  text-decoration: underline;
}

.sidebar-course-menu {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: none;
}

.sidebar-course-stack {
  display: grid;
  gap: 8px;
}

.sidebar-course-selector {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.sidebar-course-selector button {
  width: 100%;
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px 10px;
  text-align: right;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.sidebar-course-selector button:hover {
  color: var(--teal-dark);
  background: var(--surface-tint);
  border-color: var(--aqua);
}

.sidebar-course-selector button.active,
.sidebar-course-selector button.active:hover {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.sidebar-course-selector span {
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}

.sidebar-course-selector strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.sidebar-course-summary {
  padding: 8px 6px 10px;
  color: var(--ink);
}

.sidebar-course-summary strong,
.sidebar-course-summary span {
  display: block;
}

.course-map-label {
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 5px;
}

.sidebar-course-summary strong {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 15px;
  line-height: 1.25;
}

.sidebar-course-summary span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.sidebar .progress-block {
  color: var(--muted);
}

.sidebar .progress-track {
  background: var(--surface-tint);
}

.sidebar-lessons {
  display: grid;
  gap: 4px;
}

.sidebar-lessons[hidden] {
  display: none;
}

.sidebar-lesson {
  border: 1px solid transparent;
  border-inline-start: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.sidebar-lesson.open {
  background: #f7fbfb;
  border-color: #cce7e8;
  border-inline-start-color: var(--teal);
}

.sidebar-lesson-trigger {
  width: 100%;
  min-height: 44px;
  border-radius: 0;
  padding: 7px 8px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;
  direction: rtl;
  text-align: right;
  background: transparent;
  color: var(--ink);
  border: 0;
}

.sidebar-lesson-trigger:hover {
  background: #edf7f7;
}

.sidebar-lesson.open .sidebar-lesson-trigger {
  background: #eef8f8;
}

.sidebar-lesson.completed .lesson-menu-index {
  background: #e4f5ed;
  color: var(--ok);
}

.sidebar-lesson-copy {
  min-width: 0;
}

.sidebar-lesson-copy strong,
.sidebar-lesson-copy small {
  display: block;
}

.sidebar-lesson-copy strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.15;
}

.sidebar-lesson-copy small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.25;
  margin-top: 3px;
}

.sidebar-video-count {
  min-width: 23px;
  height: 23px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-tint);
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 12px;
  font-weight: 800;
  direction: ltr;
}

.sidebar-lesson-panel {
  display: grid;
  gap: 5px;
  margin: 0 35px 8px 8px;
  padding: 6px 8px 0 0;
  border-inline-start: 2px solid var(--line);
}

.sidebar .lesson-video-button {
  background: #fff;
  border-color: #dceced;
  min-height: 34px;
  padding: 7px;
  box-shadow: none;
}

.sidebar .lesson-video-button .video-dot {
  width: 27px;
  height: 27px;
  font-size: 11px;
}

.sidebar .lesson-video-button .video-menu-copy strong {
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sidebar .lesson-video-button .video-menu-copy small {
  font-size: 11px;
  line-height: 1.2;
}

.sidebar .lesson-video-button:hover {
  background: var(--surface-tint);
  border-color: var(--aqua);
  color: var(--teal-dark);
}

.sidebar .lesson-video-button.active,
.sidebar .lesson-video-button.active:hover {
  background: var(--teal);
  border-color: var(--aqua);
  color: #fff;
}

.sidebar .lesson-video-button.active .video-dot {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.sidebar .lesson-video-button.active .video-menu-copy small,
.sidebar .lesson-video-button.active .video-menu-copy strong {
  color: #fff;
}

.sidebar .lesson-menu-empty {
  background: var(--surface-soft);
  color: var(--muted);
}

.content {
  padding: clamp(20px, 3vw, 32px);
  max-width: 1360px;
  width: 100%;
  min-width: 0;
}

.student-learner-switcher {
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.student-learner-switcher select {
  min-width: min(260px, 58vw);
  margin: 0;
  background: #fff;
}

.student-mobile-topbar,
.student-bottom-nav,
.student-drawer,
.student-drawer-scrim,
.staff-mobile-chrome,
.staff-mobile-footer,
.owner-more-scrim,
.owner-more-sheet,
.content-mobile-tree-trigger,
.content-mobile-tree-close,
.content-mobile-tree-scrim,
.content-mobile-sticky-actions,
.media-mobile-sticky-actions,
.owner-materials-mobile-actions {
  display: none;
}

.student-course-map-screen,
.student-mine-screen {
  display: none;
}

.student-course-screen {
  display: block;
}

.student-course-screen:not(.active) {
  display: none;
}

.student-course-map-screen.active,
.student-mine-screen.active {
  display: block;
}

@keyframes student-screen-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.content.single-state {
  max-width: none;
  min-height: calc(100vh - 58px);
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.page-header {
  max-width: 900px;
  margin-bottom: 20px;
}

.page-header .eyebrow {
  color: var(--teal);
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-metrics {
  margin: 24px 0;
}

.card,
.metric,
.lesson-row,
.video-row,
.note-row {
  padding: 16px;
}

.card,
.metric,
.lesson-row,
.video-row,
.note-row,
.panel {
  box-shadow: var(--shadow-soft);
}

.metric strong {
  display: block;
  font-size: 30px;
  color: var(--teal-dark);
  margin-bottom: 4px;
}

.metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.muted {
  color: var(--muted);
}

.student-attendance-section {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.student-attendance-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.student-attendance-head h3 {
  margin: 0;
  color: var(--teal-dark);
  font-size: 16px;
}

.student-attendance-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.student-attendance-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.student-attendance-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
}

.student-attendance-status {
  flex: 0 0 auto;
  font-weight: 900;
}

.student-attendance-status.ok {
  color: var(--ok);
}

.student-attendance-status.danger {
  color: var(--danger);
}

.student-attendance-more {
  display: grid;
  gap: 8px;
}

.student-attendance-more summary {
  cursor: pointer;
  color: var(--teal);
  font-size: 13px;
  font-weight: 900;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #edf5f3;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
}

.status.danger {
  background: #fbe8e2;
  color: var(--danger);
}

.status.gold {
  background: #fff2d8;
  color: #77531b;
}

.status.ok {
  background: #e4f5ed;
  color: var(--ok);
}

.section-block {
  margin-top: 22px;
}

.onboarding-shell {
  max-width: 820px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.onboarding-head {
  background: var(--teal-dark);
  color: #fff;
  padding: 28px;
}

.onboarding-head h2 {
  font-family: "Rubik", "Heebo", sans-serif;
  margin: 8px 0;
  font-size: 28px;
}

.onboarding-head p {
  color: #cfe9ec;
  margin: 0;
}

.step-label {
  color: var(--aqua);
  font-size: 12px;
  font-weight: 800;
}

.step-bars {
  display: flex;
  gap: 6px;
  margin-top: 18px;
}

.step-bars span {
  height: 4px;
  flex: 1;
  border-radius: 999px;
  background: var(--aqua);
}

.step-bars .muted-bar {
  background: rgba(255, 255, 255, 0.18);
}

.onboarding-shell form {
  padding: 24px;
}

.course-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 22px;
}

.next-card {
  background: var(--teal-dark);
  color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}

.visual-next-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(6, 59, 74, 0.52), rgba(6, 59, 74, 0.92)),
    url("/assets/course/course-1-cover-freestyle.webp") center / cover;
}

.visual-next-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 54%;
  background: linear-gradient(180deg, transparent, rgba(3, 31, 39, 0.74));
}

.next-card .status {
  background: rgba(159, 213, 218, 0.18);
  color: var(--aqua);
}

.next-card strong {
  display: block;
  margin: 14px 0 8px;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 22px;
  line-height: 1.25;
}

.next-card span:last-child {
  color: #b9d8dc;
}

.course-overview {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 22px 0;
}

.course-overview > div,
.course-stats {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.progress-card {
  background: #fff;
}

.course-overview strong {
  display: block;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.15;
}

.course-next strong {
  font-size: 18px;
}

.course-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-width: 0;
}

.course-watch-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
}

.course-watch-intro h2 {
  margin: 2px 0 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}

.course-switcher {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.course-switcher h2 {
  margin: 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.12;
}

.course-switcher .eyebrow {
  margin-bottom: 6px;
}

.course-switcher-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.course-switcher-button {
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 13px;
  text-align: right;
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.course-switcher-button:hover {
  color: var(--teal-dark);
  background: var(--surface-tint);
  border-color: var(--aqua);
}

.course-switcher-button.active,
.course-switcher-button.active:hover {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}

.course-switcher-button span {
  color: inherit;
  font-size: 12px;
  font-weight: 900;
}

.course-switcher-button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-family: "Rubik", "Heebo", sans-serif;
}

.course-switcher-button small {
  color: inherit;
  opacity: 0.78;
  font-size: 12px;
}

.owner-preview-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  background: rgba(239, 252, 248, 0.86);
  color: var(--ink);
}

.owner-dashboard-grid {
  margin-top: 18px;
}

.owner-control-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin: 4px 0 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(7, 129, 129, 0.12), rgba(255, 255, 255, 0.95));
  box-shadow: var(--shadow-soft);
}

.owner-control-heading h2 {
  margin: 5px 0 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
}

.owner-control-heading p {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
}

.owner-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.owner-command-card,
.operation-form-card,
.action-card,
.channel-card,
.timeline-panel,
.ai-safety-card,
.ai-control-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.owner-command-card {
  min-height: 160px;
  padding: 18px;
  display: grid;
  align-content: space-between;
  gap: 12px;
}

.owner-command-card h3,
.owner-command-card p,
.ai-safety-card p,
.channel-card p {
  margin: 0;
}

.owner-command-card h3,
.ai-control-hero h3 {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 22px;
  line-height: 1.2;
}

.owner-command-card p,
.ai-safety-card p,
.channel-card p {
  color: var(--muted);
  line-height: 1.55;
}

.readiness-card {
  background: var(--teal-dark);
  color: #fff;
}

.readiness-card .eyebrow {
  color: var(--aqua);
}

.readiness-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.owner-course-inventory,
.owner-activity-list {
  display: grid;
  gap: 10px;
}

.owner-inventory-row,
.owner-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.owner-inventory-row div,
.owner-activity-row {
  min-width: 0;
}

.owner-inventory-row strong,
.owner-activity-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-inventory-row span,
.owner-inventory-row small,
.owner-activity-row span,
.owner-activity-row small {
  color: var(--muted);
}

.owner-activity-row {
  justify-content: flex-start;
}

.owner-activity-row span {
  flex: 0 0 68px;
  font-size: 0.84rem;
}

.owner-desktop-layout {
  display: grid;
  gap: 18px;
}

.owner-desktop-hero,
.owner-work-queue,
.owner-signal-rail {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.owner-desktop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
}

.owner-desktop-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 5px 0 0;
  color: var(--ink);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(1.7rem, 2.2vw, 2.45rem);
  line-height: 1.15;
}

.owner-desktop-hero-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-desktop-console {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.owner-work-queue,
.owner-signal-rail {
  padding: 18px;
}

.owner-console-panel-head,
.owner-signal-rail-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.owner-console-panel-head h2 {
  margin: 4px 0 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.45rem;
}

.owner-queue-list,
.owner-desktop-signal-list {
  display: grid;
  gap: 10px;
}

.owner-queue-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 13px 14px;
  text-align: right;
  color: var(--ink);
  background: #fbfdfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.owner-queue-row:hover,
.owner-queue-row:focus-visible {
  background: var(--surface-tint);
  border-color: var(--aqua);
}

.owner-queue-row strong,
.owner-queue-row small,
.owner-queue-type {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-queue-type {
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
}

.owner-queue-row strong {
  margin-top: 2px;
  font-size: 1.05rem;
}

.owner-queue-row small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 700;
}

.owner-queue-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--teal);
  font-weight: 900;
  white-space: nowrap;
}

.owner-signal-rail {
  display: grid;
  gap: 12px;
}

.owner-signal-rail-head strong {
  color: var(--teal-dark);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.1rem;
}

.owner-desktop-signal-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "hint value";
  gap: 2px 12px;
  min-height: 68px;
  padding: 12px;
  text-align: right;
  color: var(--ink);
  background: #f8fbfb;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
}

.owner-desktop-signal-card:hover,
.owner-desktop-signal-card:focus-visible {
  border-color: var(--aqua);
  background: var(--surface-tint);
}

.owner-desktop-signal-card.attention {
  border-color: rgba(213, 108, 83, 0.4);
  background: #fff8f5;
}

.owner-desktop-signal-card span {
  grid-area: label;
  color: var(--ink-soft);
  font-weight: 900;
}

.owner-desktop-signal-card strong {
  grid-area: value;
  align-self: center;
  color: var(--teal-dark);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.owner-desktop-signal-card small {
  grid-area: hint;
  color: var(--muted);
  font-weight: 800;
}

.owner-reference-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.owner-reference-details summary {
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--ink);
  font-weight: 900;
  list-style: none;
}

.owner-reference-details summary::-webkit-details-marker {
  display: none;
}

.owner-reference-details[open] .ops-disclosure-icon {
  transform: rotate(45deg);
}

.owner-reference-body {
  padding: 0 10px 12px;
}

/* --- Admin desktop console (desktop-ui.md פרק ב') -------------------------- */
/* The admin console reuses the owner-desktop skeleton (.owner-desktop-hero,
   .owner-desktop-console two-zone grid, .owner-*-signal-card). Only the
   admin-specific additions live here: the full-width reference band, the
   6-tile quick-action grid, the 3 labeled deep-work groups, the summary count
   badge, the within-console signal flash, and the per-item queue dead-end.
   All desktop-scoped; the mobile workbench (@≤980px) is untouched. */
.admin-desktop-layout {
  display: grid;
  gap: 18px;
}

/* Single hero: demote "ניהול" (now in the sidebar title) — hide the legacy
   admin page-header on desktop too so the verdict hero is the only H1. */
.shell.role-admin #content > .page-header {
  display: none;
}

.admin-desktop-hero .eyebrow {
  color: var(--teal-dark);
}

.admin-desktop-workspace {
  display: grid;
  grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-section-rail {
  position: sticky;
  top: 82px;
  z-index: 5;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.admin-section-rail a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-weight: 900;
  text-decoration: none;
}

.admin-section-rail a:hover,
.admin-section-rail a:focus-visible {
  background: var(--surface-tint);
  color: var(--teal-dark);
}

.admin-desktop-panels {
  display: grid;
  gap: 18px;
  min-width: 0;
}

@media (min-width: 981px) and (max-width: 1180px) {
  .admin-desktop-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-section-rail {
    display: flex;
    overflow-x: auto;
    top: 74px;
  }

  .admin-section-rail a {
    flex: 0 0 auto;
  }
}

/* --- Coach desktop console (desktop-ui.md פרק ג') --------------------------- */
/* Full-width two-column console: PRIMARY (wider, RTL start=right) = cohort
   switcher → live-session hero → roster → cohort note; SECONDARY (narrower) =
   collapsed course materials. Reuses the owner/admin verdict-hero skeleton
   (.owner-desktop-hero/.owner-desktop-status/.owner-status-dot). All rules here
   are desktop base; the @≤980px block hides .coach-desktop-layout and shows the
   untouched .coach-mobile-workbench instead. */
.coach-desktop-layout {
  display: grid;
  gap: 18px;
}

/* Demote the greeting: the verdict line is the only H1 on desktop coach. */
.shell.role-coach #content > .page-header {
  display: none;
}

.coach-desktop-hero .eyebrow {
  color: var(--teal-dark);
}

.coach-desktop-console {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.coach-desktop-primary {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.student-next-meeting,
.schedule-today-panel {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.student-next-meeting {
  display: grid;
  gap: 5px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border-inline-start: 4px solid var(--teal);
}

.student-next-meeting.is-now {
  border-inline-start-color: #c58a16;
  background: #fffaf0;
}

.student-next-meeting.is-empty {
  border-inline-start-color: var(--line-strong);
  background: var(--surface-soft);
}

.student-next-meeting strong,
.student-next-meeting p {
  margin: 0;
}

.student-next-meeting p {
  color: var(--muted);
  font-size: 0.88rem;
}

.schedule-today-panel {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
}

.schedule-today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-today-head h2 {
  margin: 2px 0 0;
  color: var(--teal-dark);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.08rem;
}

.schedule-today-count {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--teal-dark);
  font-size: 0.8rem;
  font-weight: 900;
}

.schedule-today-list {
  display: grid;
  gap: 8px;
}

.schedule-today-occurrence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  text-align: start;
}

.schedule-today-occurrence.interactive {
  width: 100%;
  min-height: 60px;
  cursor: pointer;
}

.schedule-today-occurrence.interactive:hover,
.schedule-today-occurrence.interactive:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 130, 140, 0.16);
  outline: none;
}

.schedule-today-time {
  grid-row: 1 / span 2;
  color: var(--teal-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.schedule-today-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.schedule-today-copy small,
.schedule-today-attendance {
  color: var(--muted);
  font-size: 0.78rem;
}

.schedule-today-status {
  align-self: start;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.schedule-today-status.now {
  color: #9a6700;
}

.schedule-today-attendance {
  grid-column: 2 / -1;
}

.schedule-today-empty {
  display: grid;
  gap: 3px;
}

.coach-schedule-warning,
.coach-schedule-blocked {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid #ead7aa;
  border-radius: 10px;
  background: #fffaf0;
  color: #6f4f0a;
  text-align: start;
}

.coach-schedule-warning span,
.coach-schedule-blocked span {
  font-size: 0.84rem;
  line-height: 1.5;
}

/* Desktop cohort switcher (tablist) — chips, not the mobile sticky scroller. */
.coach-desktop-primary .coach-cohort-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.coach-desktop-primary .coach-cohort-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.coach-desktop-primary .coach-cohort-chip small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.coach-desktop-primary .coach-cohort-chip:hover,
.coach-desktop-primary .coach-cohort-chip:focus-visible {
  border-color: var(--aqua);
}

.coach-desktop-primary .coach-cohort-chip.active {
  background: var(--teal);
  border-color: transparent;
  color: #fff;
}

.coach-desktop-primary .coach-cohort-chip.active small {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.coach-desktop-primary .coach-cohort-select {
  display: grid;
  gap: 4px;
  font-weight: 800;
  color: var(--muted);
}

.coach-desktop-primary .coach-cohort-select select {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.coach-desktop-panel {
  display: grid;
  gap: 16px;
}

.coach-desktop-cohort-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.coach-desktop-cohort-head h2 {
  margin: 2px 0 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.5rem;
}

.coach-desktop-count {
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

/* Live-session hero on desktop (reuses coachSessionHero markup). */
.coach-desktop-panel .coach-live-hero {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  background: #fbfdfd;
}

.coach-desktop-panel .coach-live-hero.is-open {
  border-color: rgba(20, 138, 121, 0.4);
  background: #f2fbf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.coach-desktop-panel .coach-live-copy {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.coach-desktop-panel .coach-live-copy h3 {
  margin: 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.4rem;
}

.coach-desktop-panel .coach-live-copy p {
  margin: 0;
}

.coach-desktop-panel .coach-live-start-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.coach-desktop-panel .coach-live-start-form label {
  display: grid;
  gap: 4px;
  flex: 1 1 240px;
  font-weight: 800;
  color: var(--muted);
}

.coach-desktop-panel .coach-live-start-form select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.coach-desktop-panel .coach-live-primary {
  min-height: 48px;
  padding: 0 22px;
  font-size: 1.05rem;
  font-weight: 900;
}

.coach-desktop-panel .coach-live-status {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coach-desktop-panel .coach-live-status strong {
  display: block;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.2rem;
  color: var(--teal-dark);
}

.coach-desktop-panel .coach-live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(20, 138, 121, 0.16);
}

.coach-desktop-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.coach-desktop-section-head h3 {
  margin: 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.15rem;
}

.coach-desktop-panel .coach-roster-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.coach-desktop-panel .coach-roster-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coach-desktop-panel .coach-roster-count {
  color: var(--muted);
  font-weight: 900;
}

.coach-desktop-roster-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.coach-desktop-roster-grid .learner-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 12px;
}

.learner-roster-ident {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.learner-roster-context > summary {
  width: max-content;
  min-height: 28px;
  display: flex;
  align-items: center;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.learner-roster-context[open] {
  padding-top: 3px;
}

.learner-roster-context .learner-progress-line {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.learner-roster-context .learner-recent-notes {
  margin-top: 6px;
}

.learner-note-slot:not(:empty) {
  grid-column: 1 / -1;
}

.coach-desktop-roster-grid .attendance-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
}

/* R8: distinct present/absent visual states even before selection (color-coded
   borders + text), on top of the global solid-fill .is-selected states. */
.coach-desktop-roster-grid .attendance-actions .btn[data-action="attendance"] {
  min-height: 44px;
  font-weight: 900;
}

.coach-desktop-roster-grid .attendance-actions .btn[data-action="attendance"][data-status="present"] {
  border-color: rgba(20, 138, 121, 0.5);
  color: var(--teal-dark);
}

.coach-desktop-roster-grid .attendance-actions .btn[data-action="attendance"][data-status="absent"] {
  border-color: rgba(197, 74, 58, 0.5);
  color: var(--danger);
}

.coach-desktop-roster-grid .attendance-actions .btn[data-action="attendance"][disabled] {
  opacity: 0.55;
  border-color: var(--line);
  color: var(--muted);
}

.coach-desktop-roster-grid .attendance-actions .learner-note-button {
  margin-inline-start: auto;
}

.coach-desktop-note-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.coach-desktop-note-details > summary {
  min-height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 900;
  color: var(--ink);
  list-style: none;
}

.coach-desktop-note-details > summary::-webkit-details-marker {
  display: none;
}

.coach-desktop-note-details .coach-note-form {
  padding: 0 14px 14px;
}

/* Secondary column: demoted course materials, collapsed by default. */
.coach-desktop-secondary {
  min-width: 0;
}

.coach-course-map-panel {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.coach-course-map-head {
  display: grid;
  gap: 4px;
}

.coach-course-map-head h3,
.coach-course-map-head p { margin: 0; }

.coach-course-map-panel .sidebar-course-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.coach-course-map-panel .sidebar-course-menu {
  width: 100%;
  min-width: 0;
}

.coach-materials-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.coach-materials-details > summary {
  min-height: 54px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.coach-materials-details > summary::-webkit-details-marker {
  display: none;
}

.coach-materials-summary-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.coach-materials-summary-text strong {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.05rem;
  color: var(--teal-dark);
}

/* Distinguishes materials-access count from cohorts taught: the courses accordion
   reflects course-material access, not cohort teaching assignments. */
.coach-materials-hint {
  font-size: 0.78rem;
  line-height: 1.3;
}

.coach-materials-details[open] > summary .ops-disclosure-icon {
  transform: rotate(45deg);
}

.coach-materials-body {
  padding: 0 12px 14px;
}

.coach-materials-body .course-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Narrower desktops: stack the console to one column so the roster keeps room. */
@media (min-width: 981px) and (max-width: 1160px) {
  .coach-desktop-console {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-queue-item .owner-queue-type {
  display: block;
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-desktop-layout .admin-queue-item {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.admin-desktop-layout .admin-queue-form {
  width: 100%;
}

.admin-queue-item.decision-lead {
  border-inline-start: 4px solid var(--teal);
  background: #f4fbfa;
}

.admin-queue-item.warn,
.admin-queue-item.decision-coach {
  border-color: #ead7aa;
  border-inline-start: 4px solid #c58a16;
  background: #fffaf0;
}

.admin-queue-item.danger,
.admin-queue-item.decision-capacity {
  border-color: #e8b8ad;
  border-inline-start: 4px solid #b54732;
  background: #fff6f3;
}

.admin-queue-decision-title {
  margin: 3px 0 8px;
  color: var(--teal-dark);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1rem;
  line-height: 1.35;
}

.admin-queue-form {
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
}

.admin-queue-form select {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.admin-queue-form .btn {
  width: 100%;
}

.admin-queue-consequence {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: start;
}

.admin-queue-deadend {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: end;
}

.admin-queue-deadend .muted {
  font-size: 0.86rem;
}

/* One dense reference table. Rows never truncate; narrow viewports scroll the
   table horizontally rather than hiding a cohort, schedule, capacity or coach. */
.admin-reference-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-cohort-reference-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.admin-cohort-reference-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: auto;
}

.admin-cohort-reference-table th,
.admin-cohort-reference-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  white-space: nowrap;
}

.admin-cohort-reference-table th {
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.75rem;
  font-weight: 900;
}

.admin-cohort-reference-table td {
  color: var(--ink);
  font-size: 0.84rem;
}

.admin-cohort-reference-table tr:last-child td {
  border-bottom: 0;
}

/* Quick actions — outcome-led: three semantic groups, one emphasized action. */
.admin-quick-groups {
  display: grid;
  gap: 22px;
  margin-top: 16px;
}

.admin-quick-group {
  min-width: 0;
}

.admin-quick-group-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.admin-quick-group-head h4,
.admin-quick-group-head p {
  margin: 0;
}

.admin-quick-group-head h4 {
  color: var(--teal-dark);
  font: 900 1rem/1.3 "Rubik", "Heebo", sans-serif;
}

.admin-quick-group-head p {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.admin-action-launcher {
  min-width: 0;
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 6px 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--teal-dark);
  text-align: start;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.admin-action-launcher.is-emphasized {
  border-color: var(--teal);
  background: var(--surface-tint);
}

.admin-action-launcher strong,
.admin-action-launcher small {
  min-width: 0;
}

.admin-action-launcher strong {
  font: 900 1rem/1.25 "Rubik", "Heebo", sans-serif;
}

.admin-action-launcher small {
  grid-column: 1 / -1;
  color: var(--muted);
  line-height: 1.45;
}

.admin-action-launcher:hover,
.admin-action-launcher:focus-visible {
  border-color: var(--teal);
  background: var(--surface-tint);
}

.admin-action-launcher:focus-visible,
.calendar-inline-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.learner-profile-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.learner-access-note,
.learner-access-clarification {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.learner-send-access-option {
  min-height: 52px;
}

.learner-send-access-option span {
  display: grid;
  gap: 2px;
}

.learner-send-access-option small,
[data-invite-cohort-field] small {
  color: var(--muted);
  line-height: 1.45;
}

.stable-overlay-scrim[data-overlay-entering="true"] {
  animation: stableOverlayScrimIn 150ms ease both;
}

.stable-overlay-scrim[data-overlay-entering="true"] .stable-overlay-panel {
  animation: stableOverlayPanelIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stable-overlay-scrim.is-closing {
  pointer-events: none;
  animation: stableOverlayScrimOut 180ms ease both;
}

.stable-overlay-scrim.is-closing .stable-overlay-panel {
  animation: stableOverlayPanelOut 220ms ease both;
}

.admin-action-scrim {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(9, 30, 28, 0.42);
  backdrop-filter: blur(2px);
}

.admin-action-drawer {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(560px, 94vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-inline-end: 3px solid var(--teal);
  background: var(--surface);
  box-shadow: 10px 0 48px rgba(9, 30, 28, 0.3);
}

.admin-action-drawer.is-expanded {
  width: min(880px, 60vw);
}

@media (min-width: 761px) {
  .admin-action-drawer.is-expanded .schedule-slot-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.admin-action-head {
  flex: 0 0 auto;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-tint), var(--surface));
}

.admin-action-head h2 {
  margin: 3px 0 0;
  color: var(--teal-dark);
  font-size: 1.35rem;
}

.admin-action-head > div:first-child {
  min-width: 0;
}

.admin-action-head-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-action-close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--teal-dark);
  cursor: pointer;
}

.admin-action-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding: 20px;
}

.admin-action-form-actions {
  position: sticky;
  bottom: -20px;
  z-index: 4;
  display: grid;
  gap: 10px;
  margin: 8px -16px -16px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 -12px 28px rgba(9, 30, 28, 0.12);
  backdrop-filter: blur(10px);
}

.admin-action-form-actions label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--teal-dark);
  font-weight: 800;
}

.admin-action-form-actions input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.admin-action-body > .operation-form-card,
.admin-action-body > .card,
.admin-action-body .operation-form-card {
  margin: 0;
  box-shadow: none;
}

.admin-action-success,
.admin-action-detail {
  min-height: 260px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-tint);
}

.admin-action-success h3,
.admin-action-detail h3,
.admin-action-success p,
.admin-action-detail p {
  margin: 0;
}

@keyframes stableOverlayPanelIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes stableOverlayPanelOut {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes stableOverlayScrimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes stableOverlayScrimOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Deep work: 3 labeled groups instead of 7 flat disclosures. */
.admin-deep-groups {
  display: grid;
  gap: 16px;
  margin-top: 10px;
}

.admin-deep-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.admin-deep-group-title {
  margin: 0 0 10px;
  color: var(--teal-dark);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 1.05rem;
}

/* Count badge in a disclosure summary (e.g. "מחזורים 12"). */
.ops-disclosure-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  margin-inline-start: auto;
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--teal-dark);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.operational-console {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.ops-command-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 16px;
  align-items: stretch;
  margin: 18px 0;
}

.ops-command-main {
  display: grid;
  align-content: center;
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(6, 59, 74, 0.96), rgba(10, 110, 117, 0.9)),
    #063b4a;
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.ops-command-main .eyebrow {
  color: var(--aqua);
}

.ops-command-main h2 {
  margin: 8px 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.04;
}

.ops-command-main p {
  max-width: 640px;
  margin: 0;
  color: #cfe9ec;
  line-height: 1.65;
  font-weight: 600;
}

.ops-command-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ops-board {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.ops-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.ops-task-list,
.ops-action-stack,
.crm-contact-queue,
.analytics-bars {
  display: grid;
  gap: 10px;
}

.ops-task,
.crm-queue-row,
.ops-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.ops-task > *,
.crm-queue-row > *,
.ops-compact-row > *,
.ops-disclosure summary > * {
  min-width: 0;
}

/* Queue rows open the shared lead drawer on body-click (same contract as board
   cards), so they carry a button-like affordance. Inner quick-actions / Move-menu
   keep their own cursor and stop the row from opening. */
.crm-queue-row[data-crm-card] {
  cursor: pointer;
  transition: border-color 140ms ease;
}

.crm-queue-row[data-crm-card]:hover {
  border-color: var(--teal);
}

.crm-queue-row[data-crm-card]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ops-task.warn {
  border-color: #ead7aa;
  background: #fffaf0;
}

.ops-task strong,
.ops-task span,
.ops-task small,
.crm-queue-row strong,
.crm-queue-row span,
.crm-queue-row small {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ops-task span,
.crm-queue-row span,
.crm-queue-row small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* List-view queue rows carry the same quick-actions + Move-menu as board cards
   (D5 a11y/mobile path). The side column stacks the status badge, quick-action
   links, and the Move-menu; positioning is relative so the menu anchors here. */
.crm-queue-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}

.crm-queue-side .crm-move-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.ops-compact-table {
  display: grid;
  gap: 8px;
}

.ops-compact-row {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.ops-compact-row span {
  min-width: 0;
}

.ops-compact-row small,
.ops-compact-row strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ops-compact-row small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.ops-compact-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-disclosure {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.ops-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.ops-disclosure summary::-webkit-details-marker {
  display: none;
}

.ops-disclosure summary strong,
.ops-disclosure summary small {
  display: block;
}

.ops-disclosure summary small {
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}

.ops-disclosure-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--surface-tint);
  color: var(--teal);
  font-weight: 900;
}

.ops-disclosure[open] .ops-disclosure-icon {
  color: #fff;
  background: var(--teal);
}

.ops-disclosure[open] .ops-disclosure-icon::before {
  content: "-";
}

.ops-disclosure[open] .ops-disclosure-icon {
  font-size: 0;
}

.ops-disclosure-body {
  padding: 14px;
  border-top: 1px solid var(--line);
  background: #f9fcfc;
}

.ops-disclosure .operation-form-card,
.ops-disclosure .card {
  box-shadow: none;
}

.ops-deep-work {
  margin-top: 18px;
}

.compact-pipeline {
  margin-top: 14px;
}

.crm-command-shell .ops-command-main,
.analytics-command-shell .ops-command-main {
  background:
    linear-gradient(135deg, rgba(13, 76, 92, 0.96), rgba(44, 132, 125, 0.88)),
    #0d4c5c;
}

.crm-operator-board {
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
}

.crm-action-panel .ops-disclosure + .ops-disclosure {
  margin-top: 10px;
}

.compact-crm-form {
  display: grid;
  gap: 12px;
}

.crm-history-board {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
}

.compact-timeline {
  max-height: 560px;
  overflow: auto;
  padding-inline-end: 4px;
}

.analytics-board {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(160px, 1.4fr) 56px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.analytics-bar-row:last-child {
  border-bottom: 0;
}

.analytics-bar-row span {
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-bar-row strong {
  color: var(--teal-dark);
  text-align: left;
  direction: ltr;
}

.analytics-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-tint);
}

.analytics-bar-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), #2f8f6b);
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-bottom: 14px;
}

.section-heading-row p {
  margin: 0;
  line-height: 1.55;
}

/* Subtle Owner/Admin toggle that re-fetches dashboards with QA/test rows. */
.qa-visibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted, #5d6f6b);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  user-select: none;
}

.qa-visibility-toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--teal, #0f766e);
  cursor: pointer;
}

@media (max-width: 980px) {
  /* Comfortable touch target on mobile. */
  .qa-visibility-toggle {
    min-height: 44px;
  }

  .qa-visibility-toggle input {
    width: 22px;
    height: 22px;
  }
}

/* Persistent "showing QA data" reminder chip next to page headers on the
   QA-aware tabs (CRM, analytics, owner home). Muted pill, one-tap off. */
.qa-data-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--muted);
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}

.qa-data-chip:hover,
.qa-data-chip:focus-visible {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.qa-data-chip .qa-data-chip-off {
  font-size: 0.85em;
}

@media (max-width: 980px) {
  .qa-data-chip {
    min-height: 44px;
  }
}

/* Inline lead-approval flow in the admin queue: visible cohort selector +
   confirm button, replacing the old blind approve button. */
.lead-approve-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.lead-approve-form select {
  max-width: 230px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
}

.admin-queue-form.lead-approve-form select {
  width: 100%;
  max-width: none;
}

@media (max-width: 980px) {
  .lead-approve-form select,
  .lead-approve-form .btn {
    min-height: 44px;
  }
}

/* Open live-session indicator + close action on the coach cohort panel. */
.live-session-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdfd;
}

.coach-mobile-workbench,
.coach-live-sticky-slot,
.admin-mobile-home,
.admin-mobile-workbench,
.owner-mobile-workbench {
  display: none;
}

/* Desktop CRM keeps the full 12-row timeline pixel-identical to before; the
   mobile variant (5 + collapsed "טיימליין מלא") is hidden on desktop and
   swapped in by the 980px media query. */
.crm-timeline-mobile {
  display: none;
}

/* ── CRM Kanban board (v1) — decisions D1-D7 in internal/skills/crm-board.md ── */

/* On desktop the list shell only shows when list view is active; board view sets
   .is-board-hidden which removes it (the 980px media query re-shows it on mobile). */
.crm-view-list-shell.is-board-hidden {
  display: none;
}

.crm-mobile-context {
  display: none;
}

.crm-view-switch-row {
  margin: 4px 0 14px;
}

/* Segmented control mirrors the .auth-tabs pattern (role=tablist + aria-pressed). */
.crm-view-switch {
  display: inline-flex;
  gap: 6px;
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 5px;
}

.crm-view-switch button {
  min-width: 96px;
  min-height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.crm-view-switch button:hover {
  color: var(--teal-dark);
  background: rgba(255, 255, 255, 0.7);
}

.crm-view-switch button.active {
  background: #fff;
  color: var(--teal);
  box-shadow: 0 1px 2px rgba(16, 42, 48, 0.08);
}

.crm-view-switch button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Type filter chip-row above the board (D3). */
.crm-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.crm-filter-chip {
  min-height: 44px;
  padding: 6px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.crm-filter-chip:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.crm-filter-chip.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.crm-board-stage-filter {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--selring);
  border-radius: 10px;
  background: var(--sel);
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.crm-board-stage-filter button {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--teal);
  border-radius: 8px;
  background: #fff;
  color: var(--teal);
  font-weight: 800;
  cursor: pointer;
}

.crm-board-stage-filter button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The 5-column board. RTL is inherited from the page; direction:rtl makes the
   first flex child (לידים) the rightmost column and flow run leftward. flex:1 with
   equal basis packs 5 columns into ≥1200px with no horizontal scroll, no wrap. */
.crm-board {
  direction: rtl;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.crm-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
}

.crm-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.crm-column-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--teal-dark);
}

.crm-column-count {
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.crm-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 120px;
  border-radius: 8px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.crm-column-body.is-drop-target {
  background: var(--surface-tint);
  box-shadow: inset 0 0 0 2px var(--teal-mid);
}

.crm-column-empty {
  border: 1.5px dashed var(--line-strong);
  border-radius: 8px;
  padding: 22px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* Card (D4). Whole card is the drag handle (cursor:grab) and a role=button surface
   whose body-click opens the detail panel. Left-border keys the contact type. */
.crm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line-strong);
  border-radius: 9px;
  padding: 11px 12px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.crm-card:hover {
  border-color: var(--teal);
}

.crm-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.crm-card.is-dragging {
  opacity: 0.5;
}

.crm-card-type-lead {
  border-inline-start-color: var(--blue);
}

.crm-card-type-enrolled {
  border-inline-start-color: var(--teal);
}

.crm-card-type-alumni {
  border-inline-start-color: var(--gold);
}

.crm-card-l1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-owner-avatar {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
}

.crm-card-name {
  flex: 1 1 auto;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-type-chip {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.crm-type-lead {
  background: #e7eff8;
  color: #2f6fb0;
}

.crm-type-enrolled {
  background: #e4f5ed;
  color: var(--ok);
}

.crm-type-alumni {
  background: #fff2d8;
  color: #77531b;
}

.crm-card-l2 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.crm-card-next {
  min-height: 34px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 7px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.crm-card-next small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.crm-card-next.is-overdue {
  background: #fde9e3;
  color: #8f3123;
}

.crm-health-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e4f5ed;
  color: var(--ok);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.crm-health-chip.is-compact {
  font-size: 10.5px;
}

.crm-health-risk,
.crm-health-chip.crm-health-risk {
  background: #fde9e3;
  color: #8f3123;
}

.crm-health-renewal,
.crm-health-chip.crm-health-renewal {
  background: #fff2d8;
  color: #77531b;
}

.crm-health-paused,
.crm-health-chip.crm-health-paused {
  background: #eef1f3;
  color: var(--muted);
}

.crm-substage-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.crm-card-l3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-card-age {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
}

.crm-stale-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px #fff2d8;
}

.crm-quick-actions {
  display: inline-flex;
  gap: 6px;
}

.crm-quick-action {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--teal-dark);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--line);
}

.crm-quick-action:hover {
  background: var(--surface-tint);
  color: var(--teal);
}

.crm-card-foot {
  display: flex;
  justify-content: flex-start;
}

/* Move-menu (D5): keyboard/SR/mobile stage-change path. */
.crm-move {
  position: relative;
}

.crm-move-trigger {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--teal-dark);
  border-radius: 7px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.crm-move-trigger:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.crm-move-menu {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  top: calc(100% + 4px);
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* The [hidden] attribute's default display:none is overridden by the display:flex
   above, so restore it explicitly — otherwise every card's closed menu lays out
   and pushes the board into horizontal overflow. */
.crm-move-menu[hidden] {
  display: none;
}

.crm-move-option {
  text-align: start;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.crm-move-option:hover {
  background: var(--surface-soft);
}

.crm-move-option.is-current {
  color: var(--teal);
  font-weight: 800;
  cursor: default;
}

.crm-move-lost {
  color: var(--danger);
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 10px;
}

.crm-more-cards {
  min-height: 44px;
  border: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--teal);
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.crm-more-cards:hover {
  border-color: var(--teal);
  background: var(--surface-soft);
}

/* lost drawer (D6). */
.crm-lost-drawer {
  margin-top: 18px;
}

.crm-lost-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-lost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.crm-lost-row strong {
  display: block;
  font-size: 14px;
}

.crm-lost-row small {
  color: var(--muted);
  font-size: 12px;
}

/* Detail panel (D4) — reuses the existing stage/communication forms. */
.crm-detail-panel {
  margin-top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.crm-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.crm-detail-head strong {
  font-size: 17px;
  margin-inline-end: 8px;
}

.crm-detail-sub {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.crm-detail-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.crm-detail-contact {
  margin-bottom: 14px;
}

.crm-detail-form {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.crm-detail-timeline h4 {
  margin: 0;
  color: var(--teal-dark);
}

/* CRM detail drawer (desktop): an inspect panel that can widen into a work surface. */
.crm-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(9, 30, 28, 0.36);
  backdrop-filter: blur(2px);
}

.crm-drawer {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-inline-end: 3px solid var(--teal);
  box-shadow: 10px 0 48px rgba(9, 30, 28, 0.28);
  transition: width 220ms ease, inset-inline-start 220ms ease, border-radius 220ms ease;
}

.crm-drawer.is-expanded {
  width: 75vw;
}

.crm-drawer .crm-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-tint, #f2f9f8), var(--surface));
}

.crm-detail-ident {
  min-width: 0;
}

.crm-detail-titles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.crm-detail-titles strong {
  font-size: 18px;
}

.crm-detail-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.crm-detail-expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--teal-dark);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.crm-stage-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--teal-dark);
  font-size: 11px;
  font-weight: 800;
}

.crm-composer-dock {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 14px;
  padding-top: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--surface) 20%);
}

.crm-composer-compact {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.crm-composer-open {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: start;
  font-weight: 800;
  cursor: pointer;
}

.crm-composer-open small {
  color: var(--muted);
  font-size: 12px;
}

.crm-composer-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-tint, #eef7f6);
  box-shadow: var(--shadow-soft);
}

.crm-composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.crm-composer-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.crm-composer-chip {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.crm-composer-chip.is-active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.crm-composer-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d8e7e4;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  line-height: 1.5;
}

.crm-composer-panel .crm-detail-form {
  margin: 0;
  padding: 0;
  border-bottom: none;
}

.crm-composer-panel input[type="file"] {
  padding: 8px;
  background: var(--surface);
}

.crm-recipient-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.crm-recipient-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e4f5ed;
  color: var(--ok);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.crm-recipient-badge.is-missing {
  background: #f8e2df;
  color: var(--danger);
}

.sms-counter {
  justify-self: start;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.crm-detail-expand:hover {
  border-color: var(--teal);
  background: var(--surface-tint, #eef7f6);
}

.crm-detail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 22px 26px;
}

.crm-drawer.is-expanded .crm-detail-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: start;
}

.crm-detail-main,
.crm-drawer .crm-detail-timeline {
  min-width: 0;
}

.crm-detail-contact {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
}

.crm-detail-contact strong {
  color: var(--teal-dark);
}

.crm-family-block,
.crm-health-block,
.crm-next-action-hero {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.crm-family-block strong,
.crm-health-block strong,
.crm-next-action-hero strong {
  color: var(--teal-dark);
}

.crm-family-block > span,
.crm-health-block span,
.crm-next-action-hero small {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}

.crm-family-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-sibling-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.crm-sibling-pill small {
  color: var(--muted);
  font-size: 11px;
}

.crm-health-block {
  border-color: #d7e7e3;
  background: #f6fbfa;
}

.crm-health-block > div:first-child {
  display: grid;
  gap: 6px;
}

.crm-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.crm-health-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.crm-health-grid strong {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.crm-next-action-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-inline-start: 4px solid var(--line-strong);
  background: var(--surface-soft);
}

.crm-next-action-hero > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.crm-next-action-hero > .crm-task-form {
  grid-column: 1 / -1;
  margin: 0;
}

.crm-next-overdue {
  border-inline-start-color: #d45b44;
  background: #fff4f1;
}

.crm-next-today {
  border-inline-start-color: var(--gold);
  background: #fff9ea;
}

.crm-next-future,
.crm-next-empty {
  border-inline-start-color: var(--line-strong);
}

.crm-task-form {
  display: grid;
  gap: 10px;
}

.crm-task-form .form-row {
  align-items: end;
}

.crm-detail-timeline {
  display: grid;
  gap: 10px;
}

.crm-detail-timeline-head {
  display: grid;
  gap: 10px;
}

.crm-detail-timeline-head small {
  color: var(--muted);
  font-weight: 700;
}

.crm-timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-timeline-filter {
  min-height: 34px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.crm-timeline-filter.is-active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.crm-detail-timeline-scroll {
  display: grid;
  gap: 10px;
}

.crm-record-event {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  margin-inline-start: 10px;
  border-inline-start: 3px solid var(--line-strong);
  background: var(--surface);
}

.crm-record-event::before {
  content: "";
  position: absolute;
  inset-inline-start: -8px;
  top: 18px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--teal);
}

.crm-record-call::before {
  background: var(--blue);
}

.crm-record-note::before {
  background: var(--gold);
}

.crm-record-system::before {
  background: var(--muted);
}

.crm-view-list-shell.is-inbox-hidden {
  display: none;
}

.crm-inbox-nav-count,
.crm-inbox-count {
  display: inline-grid;
  min-width: 1.7rem;
  min-height: 1.7rem;
  place-items: center;
  border-radius: 999px;
  background: var(--gold-soft, #f4ead0);
  color: var(--ink, #173f3d);
  font-size: 0.78rem;
  line-height: 1;
}

.crm-inbox-shell {
  display: grid;
  gap: 1rem;
}

.crm-inbox-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.crm-inbox-toolbar h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.25rem 0 0;
}

.crm-inbox-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.5fr);
  min-height: 620px;
  border: 1px solid var(--border, #d7e2e0);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
}

.crm-inbox-list-pane {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  border-inline-end: 1px solid var(--border, #d7e2e0);
}

.crm-inbox-list {
  display: grid;
  align-content: start;
  overflow-y: auto;
}

.crm-inbox-thread-group {
  display: grid;
  min-width: 0;
}

.crm-inbox-thread-label {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-block-end: 1px solid var(--border, #d7e2e0);
  background: var(--surface-soft, #f7faf9);
  color: var(--muted, #47605f);
  font-size: 0.75rem;
  font-weight: 700;
}

.crm-inbox-row {
  display: grid;
  width: 100%;
  gap: 0.45rem;
  padding: 1rem;
  border: 0;
  border-block-end: 1px solid var(--border, #d7e2e0);
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.crm-inbox-row:hover,
.crm-inbox-row.is-selected {
  background: var(--teal-soft, #eaf5f3);
}

.crm-inbox-row:focus-visible {
  outline: 3px solid var(--teal, #147f79);
  outline-offset: -3px;
}

.crm-inbox-row-head,
.crm-inbox-row-meta,
.crm-inbox-message-meta,
.crm-inbox-suggestion > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.crm-inbox-row-head time,
.crm-inbox-message-meta time,
.crm-inbox-row-meta,
.crm-inbox-snippet {
  color: var(--muted, #47605f);
  font-size: 0.82rem;
}

.crm-inbox-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-inbox-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding-inline: 0.55rem;
  border: 1px solid var(--border, #d7e2e0);
  border-radius: 999px;
  color: var(--muted, #47605f);
  font-size: 0.75rem;
}

.crm-inbox-status-open {
  border-color: var(--gold, #b68a2f);
  color: var(--ink, #173f3d);
}

.crm-inbox-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem;
  border-block-start: 1px solid var(--border, #d7e2e0);
}

.crm-inbox-detail {
  min-width: 0;
  padding: 1.1rem;
}

.crm-inbox-detail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--border, #d7e2e0);
}

.crm-inbox-detail-head h3 {
  margin: 0.15rem 0;
}

.crm-inbox-back {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border, #d7e2e0);
  border-radius: 12px;
  background: transparent;
}

.crm-inbox-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.7fr);
  gap: 1rem;
  padding-block-start: 1rem;
}

.crm-inbox-conversation,
.crm-inbox-context {
  display: grid;
  align-content: start;
  gap: 1rem;
  min-width: 0;
}

.crm-inbox-thread-history {
  display: grid;
  gap: 0.75rem;
}

.crm-inbox-message.is-outbound {
  margin-inline-start: min(12%, 3rem);
  border-color: var(--teal, #147f79);
  background: var(--teal-soft, #eaf5f3);
}

.crm-inbox-message.is-inbound {
  margin-inline-end: min(12%, 3rem);
}

.crm-inbox-message,
.crm-inbox-suggestion,
.crm-inbox-context,
.crm-inbox-resolved {
  padding: 1rem;
  border: 1px solid var(--border, #d7e2e0);
  border-radius: 14px;
}

.crm-inbox-message p,
.crm-inbox-suggestion p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.crm-inbox-suggestion {
  border-style: dashed;
  background: var(--gold-soft, #fbf6e9);
}

.crm-inbox-context {
  background: var(--surface-soft, #f7faf9);
}

.crm-inbox-context .crm-family-block,
.crm-inbox-context .crm-health-block {
  margin: 0;
}

.crm-timeline-expand {
  justify-self: start;
}

.crm-drawer.is-expanded .crm-detail-main .crm-detail-form:last-of-type {
  border-bottom: none;
}

@media (prefers-reduced-motion: reduce) {
  .crm-drawer,
  .crm-drawer-scrim,
  .stable-overlay-panel,
  .stable-overlay-scrim {
    animation: none;
    transition: none;
  }
}

/* Below ~1160px the 5 equal columns get tight; allow a small horizontal scroll
   ONLY under 1200px so the ≥1200px requirement (no scroll) holds, while narrow
   desktop windows still see whole cards rather than crushed text. */
@media (min-width: 981px) and (max-width: 1199px) {
  .crm-board {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .crm-column {
    flex: 0 0 220px;
  }
}

.operation-form-card {
  padding: 16px;
  align-content: start;
}

.form-card-head {
  display: grid;
  gap: 4px;
  margin-bottom: 4px;
}

.form-card-head h3,
.form-card-head p {
  margin: 0;
}

.form-card-head h3 {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 20px;
}

.form-card-head p {
  color: var(--muted);
  line-height: 1.5;
}

.cohort-grid {
  align-items: start;
}

.cohort-card {
  gap: 14px;
}

.cohort-card-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.cohort-card-summary strong,
.cohort-card-summary span,
.cohort-card-summary small {
  display: block;
}

.cohort-card-summary span,
.cohort-card-summary small {
  color: var(--muted);
  line-height: 1.4;
}

.action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
}

.action-card strong,
.action-card p {
  display: block;
  margin: 0;
}

.action-card p {
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}

.metric-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.metric-card span,
.metric-card strong {
  display: block;
}

.metric-card span {
  color: var(--muted);
  font-size: 13px;
}

.metric-card strong {
  color: var(--teal-dark);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 26px;
  margin-top: 5px;
}

.crm-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.crm-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 18px;
  align-items: start;
}

.crm-contact-list,
.crm-timeline {
  min-width: 0;
}

.crm-contact-card,
.timeline-event {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.crm-contact-card > div {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.crm-contact-card span,
.crm-contact-card small,
.timeline-event span,
.timeline-event small,
.timeline-event p {
  color: var(--muted);
}

.compact-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.compact-form .wide {
  grid-column: 1 / -1;
}

.timeline-event {
  display: grid;
  gap: 5px;
}

.timeline-event p {
  margin: 0;
}

.empty-card {
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  padding: 18px;
  color: var(--muted);
  background: var(--surface-soft);
}

.channel-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.channel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.channel-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--surface-tint);
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-weight: 900;
}

.channel-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 18px;
}

.communication-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: start;
}

.timeline-panel {
  padding: 16px;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.ai-safety-card {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.ai-safety-card strong {
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 20px;
}

.ai-control-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px;
  margin-bottom: 20px;
  background:
    linear-gradient(90deg, rgba(230, 242, 243, 0.86), #fff);
}

.ai-control-hero p {
  color: var(--muted);
  margin: 8px 0 0;
  line-height: 1.6;
}

.ai-control-grid {
  align-items: stretch;
}

.course-watch-progress {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.course-watch-progress > span {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.course-watch-shell {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 0;
}

.course-watch-shell.player-only {
  grid-template-columns: minmax(0, 1fr);
}

.lesson-menu,
.watch-stage {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}

.lesson-menu {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow: auto;
}

.lesson-menu-top {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.lesson-menu-top .eyebrow {
  display: block;
  margin-bottom: 6px;
}

.lesson-menu-top strong,
.lesson-menu-top small {
  display: block;
}

.lesson-menu-top small {
  color: var(--muted);
  margin-top: 3px;
}

.lesson-menu-list {
  display: grid;
  gap: 0;
}

.lesson-menu-group {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.lesson-menu-group:last-child {
  border-bottom: 0;
}

.lesson-menu-group.completed {
  background: #fbfefd;
}

.lesson-menu-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 10px;
}

.lesson-menu-lesson-select {
  width: 100%;
  min-height: 44px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: start;
  cursor: pointer;
}

.lesson-menu-lesson-select:hover,
.lesson-menu-lesson-select:focus-visible {
  border-color: var(--teal);
  background: var(--surface-tint);
}

.lesson-menu-group.active .lesson-menu-lesson-select,
.sidebar-lesson-trigger[aria-current="true"] {
  border-color: var(--teal);
  background: var(--surface-tint);
  box-shadow: inset -3px 0 0 var(--teal);
}

.lesson-menu-heading strong,
.lesson-menu-heading span {
  display: block;
}

.lesson-menu-heading strong {
  color: var(--ink);
}

.lesson-menu-heading span {
  color: var(--muted);
  line-height: 1.35;
}

.lesson-menu-index {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-tint);
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-weight: 800;
  direction: ltr;
  font-size: 13px;
}

.lesson-menu-videos {
  display: grid;
  gap: 8px;
}

.lesson-video-button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  text-align: right;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px;
}

.lesson-video-button:hover {
  border-color: var(--teal);
  background: #edf7f7;
}

.lesson-video-button.active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

.lesson-video-button.completed {
  border-color: #d8efe4;
}

.video-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface-tint);
  color: var(--teal);
  transform: scaleX(-1);
  font-size: 12px;
  font-weight: 800;
}

.lesson-video-button.completed .video-dot {
  background: #e4f5ed;
  color: var(--ok);
  transform: none;
}

.lesson-video-button.active .video-dot {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.lesson-video-button.active .video-menu-copy strong,
.lesson-video-button.active .video-menu-copy small {
  color: #fff;
}

.video-menu-copy {
  min-width: 0;
}

.video-menu-copy strong,
.video-menu-copy small {
  display: block;
}

.video-menu-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.video-menu-copy small,
.lesson-menu-empty {
  color: var(--muted);
  font-size: 12px;
}

.lesson-menu-empty {
  display: block;
  padding: 8px 10px;
  background: var(--surface-soft);
  border-radius: 8px;
}

.watch-panel {
  min-width: 0;
}

.watch-stage {
  position: sticky;
  top: 88px;
  overflow: hidden;
  border-radius: 8px;
}

.course-watch-shell.player-only .watch-stage {
  position: static;
}

.watch-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.watch-breadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.watch-breadcrumb strong {
  min-width: 0;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-progress-line {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.mini-progress-track {
  width: 120px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3eced;
}

.mini-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.watch-progress-line strong {
  color: var(--teal);
  direction: ltr;
  font-family: "Rubik", "Heebo", sans-serif;
}

.watch-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.watch-heading h3 {
  margin: 0 0 6px;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.18;
}

.watch-heading .eyebrow,
.watch-heading .muted {
  margin: 0;
}

.watch-progress-mini {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 72px;
  color: var(--muted);
  font-size: 12px;
}

.watch-progress-mini strong {
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 22px;
  line-height: 1;
}

.course-player-target {
  min-height: min(54vw, 520px);
  background: #06262f;
}

.watch-primary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.player-placeholder {
  min-height: min(54vw, 520px);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  padding: 28px;
  color: #fff;
}

.visual-player-placeholder {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(6, 38, 47, 0.44), rgba(6, 38, 47, 0.9)),
    url("/assets/course/water-motion-texture.webp") center / cover;
}

.visual-player-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(6, 59, 74, 0.48), transparent 58%),
    radial-gradient(circle at 50% 30%, rgba(159, 213, 218, 0.16), transparent 34%);
}

.player-placeholder h4 {
  margin: 0;
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.34);
}

.player-placeholder p {
  max-width: 520px;
  margin: 0;
  color: #cfe9ec;
  line-height: 1.6;
}

.player-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(159, 213, 218, 0.18);
  color: var(--aqua);
  transform: scaleX(-1);
}

.course-admin-card {
  display: grid;
  gap: 14px;
}

.course-card-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.course-card-head img {
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface-tint);
}

.course-card-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.coach-course-materials {
  overflow: hidden;
}

.coach-course-visual {
  height: 86px;
  margin: -22px -22px 18px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(6, 59, 74, 0.88), rgba(6, 59, 74, 0.2)),
    url("/assets/course/coach-demo-pool.webp") center / cover;
}

.lesson-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 18px;
  align-items: start;
  padding: 16px;
  border-top: 0;
  background: #fff;
}

@media (min-width: 1280px) {
  .shell.role-user .course-watch-shell.player-only .watch-primary-grid {
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) minmax(248px, 304px);
  }

  .shell.role-user .course-watch-shell.player-only .course-player-target,
  .shell.role-user .course-watch-shell.player-only .player-placeholder,
  .shell.role-user .course-watch-shell.player-only .lesson-detail-panel {
    direction: rtl;
  }

  .shell.role-user .course-watch-shell.player-only .lesson-detail-panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    border-top: 0;
    border-inline-start: 1px solid var(--line);
  }
}

@media (min-width: 981px) and (max-width: 1279px) {
  .shell.role-user .course-watch-shell.player-only .lesson-detail-panel {
    position: sticky;
    top: 76px;
    z-index: 5;
    grid-template-columns: minmax(0, 1fr) minmax(248px, 320px);
    box-shadow: 0 12px 28px rgba(6, 59, 74, 0.12);
  }
}

.watch-meta-panel h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: clamp(20px, 2vw, 24px);
}

.watch-meta-panel .eyebrow {
  margin: 0;
}

.lesson-detail-panel p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.watch-actions {
  display: grid;
  gap: 8px;
}

.watch-video-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.watch-nav-button,
.watch-video-position {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.watch-nav-button {
  background: #fff;
  color: var(--teal);
  border: 1px solid var(--line);
}

.watch-nav-button:not(.disabled):hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
}

.watch-nav-button.disabled {
  color: var(--muted);
  background: #edf3f3;
}

.watch-video-position {
  color: var(--muted);
  min-width: 72px;
}

/* פרק ד' RANK 6/7 — combined advance action + next hint + lesson helper.
   Hidden on mobile (see @media max-width:980px above); visible on desktop only. */
.watch-advance-button {
  width: 100%;
  background: var(--teal-dark);
  color: #fff;
  border: none;
  font-weight: 800;
}

.watch-advance-button:hover {
  background: var(--teal);
}

.watch-next-hint {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.watch-lesson-action {
  display: grid;
  gap: 4px;
}

.watch-lesson-helper {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.watch-progress-headline strong {
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-weight: 800;
}

/* פרק ד' RANK 1+5 — desktop continue/next-unwatched hero strip above the player. */
.student-continue-desktop {
  margin-bottom: 12px;
}

/* The legacy resume bar is mobile-only; on desktop the continue strip above
   supersedes it, and .student-resume-bar has no desktop styling — so hide it
   there to avoid a duplicated, unstyled button (committee round-2). */
@media (min-width: 981px) {
  .student-resume-mobile {
    display: none;
  }
}

.student-continue-strip {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(120deg, var(--teal-dark), var(--teal));
  color: #fff;
  text-align: right;
  cursor: pointer;
}

.student-continue-strip.variant-welcome {
  background: linear-gradient(120deg, #0f5b63, var(--teal));
}

.student-continue-strip.variant-review {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}

.student-continue-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.student-continue-eyebrow {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}

.student-continue-strip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 800;
  color: inherit;
}

.student-continue-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
}

.student-continue-track {
  flex: 0 0 120px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.student-continue-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fff;
}

.student-continue-go {
  flex: 0 0 auto;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--teal-dark);
  font-weight: 800;
  font-size: 13px;
}

.student-continue-strip.variant-review .student-continue-go {
  background: var(--teal);
  color: #fff;
}

/* RANK 3 fix — collapsible lesson + course headers in the student desktop tree.
   Lessons and the whole course fold via a dedicated chevron, separate from
   clicking a video to play it. */
.sidebar-lesson-collapse {
  cursor: pointer;
  width: 100%;
}

.sidebar-course-summary-toggle {
  position: relative;
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.sidebar-course-summary-toggle .course-map-caret {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  font-size: 15px;
  color: var(--muted, #6b8496);
}

.course-map-static .sidebar-lesson-panel {
  display: grid;
  gap: 6px;
}

.lesson-current-videos {
  display: none;
  padding: 14px 16px 16px;
  background: #fff;
  border-top: 1px solid var(--line);
}

.lesson-content-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface, #fff);
}

.lesson-content-section.preparation {
  grid-column: 1 / -1;
  border-inline-start: 4px solid var(--teal);
}

.lesson-content-section.homework {
  margin-top: 16px;
  border-inline-start: 4px solid var(--deep);
}

.lesson-content-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lesson-content-heading h3,
.lesson-content-block h4,
.lesson-content-block p {
  margin: 0;
}

.image-block img {
  display: block;
  width: min(100%, 760px);
  height: auto;
  margin-top: 10px;
  border-radius: 12px;
}

.file-block > a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.file-block > a small {
  margin-inline-start: auto;
}

.lesson-content-subunits {
  display: grid;
  gap: 10px;
  margin-block-start: 14px;
  padding-inline-start: 16px;
  border-inline-start: 2px solid var(--line);
}

.lesson-content-block p {
  white-space: pre-wrap;
  line-height: 1.7;
}

.callout-block {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.callout-block.safety::before {
  content: "⚠";
  margin-inline-end: 6px;
}

.external-link-block {
  display: grid;
  gap: 4px;
}

.external-link-block a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.content-management-workspace {
  margin-block: 18px 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
}

@media (min-width: 981px) {
  .shell.role-owner #content:has(> .content-management-workspace),
  .shell.role-admin #content:has(> .content-management-workspace) {
    max-width: none;
  }
}

#content-workspace-heading,
.content-editor-heading h3,
.content-preview-heading,
.content-management-workspace input,
.content-management-workspace select,
.content-management-workspace textarea,
.content-management-workspace button,
.content-management-workspace [tabindex="-1"] {
  scroll-margin-block-start: 96px;
  scroll-margin-block-end: 24px;
}

#content-workspace-heading:focus {
  outline: none;
}

#content-workspace-heading:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.content-workspace-orientation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--surface);
}

.content-readiness,
.content-preview-dirty-alert {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.content-readiness,
.content-preview-dirty-alert p {
  margin: 0;
}

.content-workspace-orientation span {
  min-width: 0;
}

.content-workspace-orientation button {
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
}

.content-workspace-orientation button:hover,
.content-workspace-orientation button:focus-visible {
  color: var(--ink);
  background: var(--surface-soft);
}

.content-preview-dirty-alert {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.content-preview-dirty-alert > div,
.content-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-workspace-header,
.content-editor-heading,
.content-block-editor > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.content-workspace-grid {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(260px, 300px);
  gap: 18px;
  margin-top: 16px;
  align-items: start;
}

.content-workspace-grid:has(> .content-comments-panel.is-compact) {
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(240px, 260px);
}

.content-workspace-grid > * {
  min-width: 0;
}

.content-workspace-orientation,
.content-readiness {
  display: none;
}

.content-explorer-tree,
.content-comments-panel {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.content-explorer-tree {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

.content-explorer-title,
.content-comments-panel > header,
.content-tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.content-explorer-title,
.content-comments-panel > header {
  justify-content: space-between;
}

.content-explorer-title h3,
.content-comments-panel h3 {
  margin: 0;
}

.content-explorer-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-explorer-tree [role="group"] {
  margin-inline-start: 15px;
  padding-inline-start: 9px;
  border-inline-start: 1px solid var(--line);
}

.content-tree-row {
  min-height: 56px;
  padding-block: 2px;
}

.content-explorer-tree [role="treeitem"]:focus {
  outline: 2px solid var(--teal);
  outline-offset: -2px;
  border-radius: 8px;
}

.content-tree-chevron,
.content-tree-chevron-spacer {
  width: 30px;
  min-width: 30px;
  height: 44px;
}

.content-tree-chevron {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 1.15rem;
}

.content-tree-chevron:hover,
.content-tree-chevron:focus-visible { background: var(--surface-soft); }

.content-tree-row > button[data-action="select-explorer-element"] {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 5px 4px;
  color: var(--ink);
  text-align: start;
  border: 0;
  background: transparent;
}

.content-tree-label {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.25;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.content-tree-row > button[data-action="select-explorer-element"]:hover,
.content-tree-row > button[data-action="select-explorer-element"]:focus-visible {
  color: var(--teal-dark);
  background: var(--surface-soft);
}

.content-comment-count {
  color: var(--muted);
  font-size: .75rem;
  white-space: nowrap;
}

.content-tree-handle {
  color: var(--muted);
  font-size: 1.2rem;
}

.content-tree-menu,
.content-item-menu > summary {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.content-tree-menu-wrap {
  position: relative;
}

.content-tree-action-menu {
  position: absolute;
  z-index: 12;
  inset-inline-end: 0;
  top: 42px;
  width: 190px;
  display: grid;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgb(20 43 54 / 14%);
}

.content-tree-action-menu button {
  min-height: 42px;
  padding-inline: 10px;
  border: 0;
  border-radius: 7px;
  color: var(--ink);
  background: transparent;
  text-align: start;
}

.content-tree-action-menu button:hover,
.content-tree-action-menu button:focus-visible { background: var(--surface-soft); }

.content-tree-action-menu button:disabled { opacity: .45; }

.content-item-menu {
  position: relative;
}

.content-item-menu > summary::-webkit-details-marker { display: none; }

.content-inline-add {
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  color: var(--teal-dark);
  background: transparent;
  font-weight: 800;
  text-align: start;
}

.content-inline-add:hover,
.content-inline-add:focus-visible { background: var(--surface-soft); }

.content-subunit-list {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding-inline-start: 22px;
  border-inline-start: 2px solid var(--line);
}

.content-subunit-editor {
  background: var(--surface-soft);
}

.content-breadcrumbs,
.content-class-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
}

.content-class-tabs {
  margin-block: 14px 8px;
  border-bottom: 1px solid var(--line);
}

.content-class-tabs button {
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.content-class-tabs button[aria-selected="true"] {
  color: var(--teal-dark);
  border-bottom-color: var(--teal);
}

.content-publish-dialog,
.content-create-dialog {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgb(20 43 54 / 15%);
}

.content-publish-dialog {
  margin-block: 12px;
}

.content-create-dialog {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: min(92vw, 440px);
  max-height: 82vh;
  margin: auto;
  overflow: auto;
}

.content-create-dialog::backdrop {
  background: rgb(16 38 49 / 42%);
}

.content-comments-panel {
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}

.content-comments-panel.is-compact {
  padding-block: 7px;
  overflow: visible;
}

.content-comments-panel.is-compact > header {
  min-height: 44px;
}

.content-comments-panel.is-compact .content-inline-add {
  white-space: nowrap;
}

.content-comment-list {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}

.content-comment-list li {
  padding-block-end: 10px;
  border-bottom: 1px solid var(--line);
}

.content-comment-list p { margin-block: 5px; white-space: pre-wrap; }
.content-comment-list time { color: var(--muted); font-size: .78rem; }

.content-block-workspace,
.content-block-editor,
.content-preview {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.content-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
}

.content-block-readonly {
  background: var(--surface-soft);
}

.content-block-readonly .lesson-content-block {
  margin-top: 12px;
}

.content-block-summary {
  align-items: start;
}

.content-block-expand {
  min-width: min(100%, 280px);
  min-height: 44px;
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  text-align: start;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.content-block-expand span,
.content-block-expand strong,
.content-block-expand small {
  display: block;
}

.content-block-expand small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.content-block-expand[aria-expanded="true"] {
  border-width: 2px;
  border-color: var(--teal);
}

.content-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.content-preview-truth-label {
  display: grid;
  gap: 3px;
  margin-block: 12px 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--gold);
  border-radius: 10px;
  background: var(--surface-soft);
}

.content-preview-truth-label.published {
  border-inline-start-color: var(--teal);
}

.content-preview-truth-label span {
  color: var(--muted);
  font-size: .88rem;
}

.content-add-block {
  min-height: 44px;
}

.content-block-edit-form,
.content-block-create-form,
.content-lesson-create-form {
  margin-top: 12px;
}

.content-version-truth {
  margin-block: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.content-version-truth > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--teal-dark);
  cursor: pointer;
  font-weight: 800;
}

.content-version-truth-details {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid var(--line);
}

.content-version-truth-details ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 0 0;
  margin: 0;
  list-style: none;
  color: var(--muted);
}

.content-version-truth-details p {
  margin: 0;
}

.content-version-truth-details .btn {
  width: fit-content;
}

.content-block-list {
  display: grid;
  gap: 14px;
  margin-block: 18px;
}

.content-block-editor[aria-grabbed="true"] {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.content-workspace-live {
  min-height: 24px;
  margin-top: 8px;
  font-weight: 700;
}

.content-preview {
  display: grid;
  gap: 14px;
}

.lesson-curriculum-signals,
.student-map-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.lesson-curriculum-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 7px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal-dark);
  background: var(--surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}

/* W2 — approved CMS explorer composition. These selectors intentionally sit
   after the behavior-oriented foundation rules above: the DOM contracts stay
   stable while the workspace takes on the reference mockup's three panes. */
.content-management-workspace {
  position: relative;
  margin-block: 0 28px;
  padding: 0;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 8px 30px rgba(15, 76, 82, 0.12);
}

.content-workspace-tbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--panel);
  color: var(--paneltx);
}

.content-workspace-tbar-title,
.content-workspace-tbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-workspace-tbar h2 {
  margin: 0;
  color: var(--paneltx);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
}

.content-course-picker select {
  width: auto;
  max-width: 190px;
  min-height: 44px;
  padding-block: 5px;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.content-course-picker option {
  color: var(--ink);
  background: #fff;
}

.content-workspace-tbar .btn {
  min-height: 44px;
  padding: 7px 16px;
}

.content-workspace-tbar .content-publish-primary {
  background: #fff;
  color: var(--panel);
}

.content-workspace-tbar .content-publish-primary:hover {
  background: var(--paneltx);
  color: var(--panel);
}

.content-workspace-live {
  position: absolute;
  z-index: 2;
  top: 58px;
  inset-inline: 0;
  min-height: 0;
  margin: 0;
  padding-inline: 18px;
  color: var(--teal);
  background: #fff;
}

.content-workspace-live:empty {
  display: none;
}

.content-management-workspace .content-workspace-grid,
.content-management-workspace .content-workspace-grid:has(> .content-comments-panel.is-compact) {
  grid-template-columns: 300px minmax(0, 1fr) 250px;
  gap: 0;
  min-height: 560px;
  margin-top: 0;
  align-items: stretch;
}

.content-management-workspace .content-explorer-tree,
.content-management-workspace .content-comments-panel,
.content-management-workspace .content-block-workspace {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.content-management-workspace .content-explorer-tree {
  top: 58px;
  max-height: calc(100vh - 82px);
  padding: 14px 11px;
  border-inline-start: 1px solid var(--line);
  background: #fbfdfd;
}

.content-explorer-title {
  min-height: 0;
}

.content-explorer-title h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.content-explorer-tree [role="group"] {
  margin-inline-start: 16px;
  padding-inline-start: 0;
  border-inline-start: 0;
}

.content-tree-row {
  position: relative;
  min-height: 44px;
  gap: 6px;
  padding: 0 6px;
  border-radius: 8px;
}

.content-tree-row:hover {
  background: var(--tealsoft);
}

.content-tree-row.is-selected {
  background: var(--sel);
  outline: 2px solid var(--selring);
  outline-offset: -1px;
}

.content-explorer-tree [role="treeitem"]:focus {
  outline: none;
}

.content-explorer-tree [role="treeitem"]:focus > .content-tree-row {
  outline: 2px solid var(--focus-ring);
  outline-offset: -1px;
}

.content-explorer-tree [role="treeitem"]:focus > .content-tree-row.is-selected {
  outline-color: var(--selring);
}

.content-tree-chevron,
.content-tree-chevron-spacer {
  width: 24px;
  min-width: 24px;
  height: 44px;
}

.content-tree-chevron {
  font-size: 15px;
}

.content-tree-icon {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  line-height: 1;
}

.content-tree-row > button[data-action="select-explorer-element"] {
  min-height: 44px;
  height: auto;
  gap: 5px;
  padding: 5px 0;
  border-radius: 7px;
}

.content-tree-row > button[data-action="select-explorer-element"]:hover,
.content-tree-row > button[data-action="select-explorer-element"]:focus-visible {
  color: var(--ink);
  background: transparent;
}

.content-tree-level-1 .content-tree-label {
  font-weight: 800;
}

.content-tree-level-4,
.content-tree-level-5 {
  font-size: 13px;
}

.content-tree-level-5 {
  color: var(--sub);
}

.content-tree-duration {
  flex: 0 0 auto;
  color: var(--sub);
  font-size: 11px;
}

.content-comment-count {
  min-width: max-content;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--goldbg);
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  direction: ltr;
}

.content-tree-row .status-dot {
  flex: 0 0 8px;
}

.content-tree-handle {
  display: none;
}

.content-tree-menu-wrap {
  width: 28px;
  flex: 0 0 28px;
}

.content-tree-menu {
  width: 44px;
  min-width: 44px;
  margin-inline-start: -8px;
  opacity: 0;
}

.content-tree-row:hover .content-tree-menu,
.content-tree-row:focus-within .content-tree-menu,
.content-tree-menu[aria-expanded="true"] {
  opacity: 1;
}

.content-tree-add-row {
  margin: 5px 0 9px;
  margin-inline-start: 24px;
}

.content-management-workspace .content-inline-add,
.content-course-add,
.content-editor-add,
.content-comment-add {
  min-height: 44px;
  border: 1px dashed var(--selring);
  border-radius: 8px;
  padding: 6px 12px;
  background: #fff;
  color: var(--teal);
  font-size: 12px;
  font-weight: 700;
}

.content-course-add {
  width: 100%;
  min-height: 44px;
  margin-top: 11px;
}

.content-management-workspace .content-block-workspace {
  padding: 19px 25px;
  background: #fff;
}

.content-editor-crumb {
  margin-bottom: 3px;
  color: var(--sub);
  font-size: 12px;
}

.content-editor-heading {
  min-height: 34px;
}

.content-editor-heading h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 2px 0;
  font-size: 21px;
}

.content-editor-heading .pill {
  font-family: inherit;
  font-size: 11px;
}

.content-class-tabs {
  gap: 22px;
  margin: 16px 0 19px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
}

.content-class-tabs button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 7px 0;
  border-bottom-width: 2px;
  font-size: 14px;
  font-weight: 500;
}

.content-class-tabs button[aria-selected="true"] {
  color: var(--teal);
  font-weight: 800;
}

.content-selected-block-form {
  gap: 0;
}

.content-selected-block-form label {
  margin: 14px 0 5px;
  color: var(--ink);
  font-weight: 700;
}

.content-selected-block-form textarea {
  min-height: 110px;
}

.content-editor-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 19px;
}

.content-editor-form-actions .btn {
  min-height: 44px;
}

.content-selected-subunits .content-block-list {
  margin-top: 0;
}

.content-management-workspace .content-comments-panel {
  top: 58px;
  max-height: calc(100vh - 82px);
  padding: 16px;
  border-inline-end: 1px solid var(--line);
  background: #fbfdfd;
}

.content-comments-panel.is-compact {
  padding: 16px;
  overflow: auto;
}

.content-comments-panel > header,
.content-comments-panel.is-compact > header {
  min-height: 0;
  display: block;
}

.content-comments-panel h3 {
  font-size: 14px;
  line-height: 1.4;
}

.content-comments-explainer {
  margin: 4px 0 11px;
  color: var(--sub);
  font-size: 11px;
  line-height: 1.5;
}

.content-comment-list {
  gap: 8px;
  margin: 0 0 10px;
}

.content-comment-list li.note-card {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 12px;
}

.content-comment-list li.note-card div {
  color: var(--sub);
  font-size: 11px;
}

.content-comment-list li.note-card strong {
  color: var(--ink);
}

.content-comment-list li.note-card p {
  margin: 5px 0 0;
  color: var(--ink);
}

.content-comment-add {
  width: 100%;
  margin-top: 7px;
}

.content-comment-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.content-comment-form[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .coach-course-materials .course-watch-shell > .lesson-menu {
    display: none;
  }

  .content-management-workspace {
    padding: 0;
  }

  .content-workspace-grid,
  .content-workspace-grid:has(> .content-comments-panel.is-compact) {
    grid-template-columns: 1fr;
  }

  .content-management-workspace .content-workspace-grid,
  .content-management-workspace .content-workspace-grid:has(> .content-comments-panel.is-compact) {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .content-explorer-tree,
  .content-comments-panel {
    position: static;
    max-height: none;
  }

  .content-management-workspace .content-explorer-tree {
    position: static;
    max-height: 52vh;
    border-inline-start: 0;
    border-bottom: 1px solid var(--line);
  }

  .content-management-workspace .content-comments-panel {
    position: static;
    max-height: none;
    border-inline-end: 0;
    border-top: 1px solid var(--line);
  }

  .content-management-workspace .content-block-workspace {
    min-height: 460px;
  }

  .content-editor-actions {
    position: sticky;
    bottom: 72px;
    z-index: 3;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
}

@media (max-width: 420px) {
  .content-management-workspace,
  .content-block-editor,
  .content-preview {
    padding: 10px;
  }

  .content-management-workspace {
    padding: 0;
    border-radius: 12px;
  }

  .content-workspace-tbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
  }

  .content-workspace-tbar-title,
  .content-workspace-tbar-actions {
    justify-content: space-between;
  }

  .content-course-picker select {
    max-width: 170px;
  }

  .content-workspace-tbar-actions .btn {
    flex: 1;
  }

  .content-management-workspace .content-block-workspace {
    min-height: 0;
    padding: 16px 14px;
  }

  .content-class-tabs {
    gap: 17px;
  }

  .content-editor-form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .content-editor-form-actions .btn {
    width: 100%;
  }

  .content-editor-actions,
  .content-preview-dirty-alert > div,
  .content-create-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .content-editor-actions > *,
  .content-preview-dirty-alert .btn,
  .content-create-actions .btn,
  .content-block-expand {
    width: 100%;
    min-width: 0;
  }

  .student-map-card {
    align-items: start;
  }

  .student-map-copy strong {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-block-editor {
    transition: none;
  }
}

.lesson-current-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.lesson-current-header strong {
  color: var(--teal);
}

.lesson-current-list {
  display: grid;
  gap: 8px;
}

.mobile-course-sheet {
  display: none;
}

.progress-block {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ddeae7;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.table-wrap:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: #f8fbfa;
}

.lesson-row,
.video-row,
.note-row {
  display: grid;
  gap: 10px;
}

.lesson-row {
  min-height: 44px;
  border-inline-start: 4px solid transparent;
}

.lesson-row.completed {
  border-inline-start-color: var(--ok);
  background: #fbfefd;
}

.lesson-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.lesson-index {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-tint);
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-weight: 800;
  direction: ltr;
}

.lesson-row.completed .lesson-index {
  background: #e4f3ec;
  color: var(--ok);
}

.lesson-row h4,
.video-row h4,
.note-row h4 {
  margin: 0;
  font-size: 18px;
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.lesson-videos {
  margin-top: 4px;
}

.video-frame {
  width: 100%;
  min-height: min(54vw, 420px);
  aspect-ratio: 16 / 9;
  background: #0b1618;
  border-radius: 8px;
  border: 0;
}

.video-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.video-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface-tint);
  color: var(--teal);
  transform: scaleX(-1);
  font-size: 13px;
}

.video-copy {
  min-width: 0;
}

.video-play {
  min-width: 84px;
}

.video-target {
  grid-column: 1 / -1;
}

.video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 10px 10px;
}

.video-actions .muted {
  color: #fff;
}

.message {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #edf5f3;
  color: var(--teal-dark);
}

.message.error {
  background: #fbe8e2;
  color: var(--danger);
}

.state-panel {
  width: min(100%, 620px);
  background: transparent;
  border: 0;
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 42px);
  text-align: center;
  box-shadow: none;
}

.state-panel.compact {
  width: 100%;
  padding: 18px;
  margin-top: 12px;
}

.state-panel h2 {
  font-family: "Rubik", "Heebo", sans-serif;
  margin: 12px 0 8px;
  font-size: clamp(24px, 3vw, 27px);
  letter-spacing: 0;
}

.state-panel p {
  margin: 0 auto 18px;
  max-width: 460px;
  color: var(--muted);
  line-height: 1.65;
}

.state-panel small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  direction: ltr;
}

.state-icon {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  display: inline-grid;
  place-items: center;
  background: var(--surface-tint);
  color: var(--teal);
  font-family: "Rubik", "Heebo", sans-serif;
  font-size: 28px;
  font-weight: 800;
}

.error-state.danger .state-icon {
  background: #fcebe8;
  color: var(--danger);
}

.error-state.warning .state-icon {
  background: var(--tealsoft);
  color: var(--teal);
}

.state-page,
.content.single-state {
  background: #fbfdfd;
}

.state-panel .eyebrow {
  display: block;
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 800;
}

.state-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.error-code {
  width: fit-content;
  display: block;
  margin: 14px auto 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--goldbg);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  direction: rtl;
}

.error-state.danger .error-code {
  background: #faeaea;
  color: #a43d3d;
}

.state-panel.empty-state {
  width: min(100%, 440px);
  padding: 22px 16px;
  border: 1px solid var(--line);
  background: #fff;
}

.empty-state .state-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 18px;
}

.empty-state .dash {
  width: 100%;
}

.spinner {
  border: 4px solid #cfe9ec;
  border-top-color: var(--teal);
  animation: spin 0.9s linear infinite;
}

.skeleton-stack {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.skeleton-stack span {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf3f3 0%, #dfeaea 45%, #edf3f3 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton-stack span:nth-child(2) {
  width: 78%;
  margin-inline: auto;
}

.skeleton-stack span:nth-child(3) {
  width: 54%;
  margin-inline: auto;
}

.loading-panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 980px) {
  .authstage,
  .auth-stage {
    padding: 22px;
  }

  .auth-story {
    min-height: 360px;
  }

  .auth-logo-image {
    height: 78px;
  }

  .layout {
    grid-template-columns: 1fr;
  }

  .content {
    order: 1;
  }

  .sidebar {
    order: 2;
    position: static;
    min-height: auto;
    max-height: none;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    padding: 12px 16px;
  }

  .nav-list {
    display: grid;
    gap: 8px;
  }

  .sidebar-section > button {
    white-space: normal;
  }

  .sidebar .sidebar-course-menu {
    display: none;
  }

  .grid.two,
  .grid.three,
  .owner-command-grid,
  .ops-command-shell,
  .ops-board,
  .crm-operator-board,
  .crm-history-board,
  .analytics-board,
  .course-hero,
  .course-overview,
  .course-switcher,
  .course-watch-intro,
  .course-watch-shell {
    grid-template-columns: 1fr;
  }

  .crm-workspace,
  .communication-workspace,
  .compact-form,
  .compact-crm-form {
    grid-template-columns: 1fr;
  }

  .crm-drawer {
    inset-inline: 0;
    inset-block-start: auto;
    width: 100%;
    height: min(88vh, 760px);
    border-inline-end: 0;
    border-block-start: 3px solid var(--teal);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 46px rgba(9, 30, 28, 0.22);
  }

  .crm-drawer.is-expanded {
    width: 100%;
  }

  .crm-drawer .crm-detail-head {
    padding: 14px 16px 12px;
  }

  .crm-detail-body,
  .crm-drawer.is-expanded .crm-detail-body {
    display: block;
    padding: 14px 16px 22px;
  }

  .crm-composer-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-record-event {
    grid-template-columns: 1fr;
  }

  /* Mobile CRM: compact the hero + pipeline so the contact queue and the
     log/stage form sit above the fold (פרק ו'). CRM-scoped so the admin mobile
     workbench (which hides .ops-command-shell) and analytics are untouched. */
  .crm-command-shell .ops-command-main {
    min-height: 0;
  }

  .crm-command-shell .ops-command-main p {
    display: none;
  }

  /* The four CRM stat tiles are pure display (counts already implied by the
     hero headline + pipeline strip). Drop them on mobile so the operator queue
     and log/stage form rise toward the fold. */
  .crm-command-shell .ops-command-stats {
    display: none;
  }

  .crm-pipeline.compact-pipeline {
    margin-top: 8px;
    grid-template-columns: none;
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .crm-pipeline.compact-pipeline::-webkit-scrollbar {
    display: none;
  }

  .crm-pipeline.compact-pipeline .metric-card {
    min-width: 108px;
    flex: 0 0 auto;
  }

  /* The always-visible 6-row "אנשי קשר אחרונים" preview duplicates the operator
     queue; hide it on mobile (the full library disclosure below stays reachable
     via its own summary, so its section heading is redundant too). Committee M4. */
  .crm-recent-preview,
  .crm-recent-contacts > .section-title {
    display: none;
  }

  .crm-recent-contacts {
    padding-top: 4px;
  }

  /* Mobile: swap the full desktop timeline for the 5-row + collapsed
     "טיימליין מלא" variant so the CRM screen is far shorter (פרק ו'). */
  .crm-timeline-desktop {
    display: none;
  }

  .crm-timeline-mobile {
    display: block;
  }

  /* Cap the visible head list so the (tall) event cards don't dominate the
     screen — it scrolls internally, and the rest sit in the "טיימליין מלא"
     disclosure. Keeps the CRM screen short (committee M4). */
  .crm-timeline-mobile > .timeline-list.compact-timeline {
    max-height: 240px;
  }

  .crm-timeline-more {
    display: block;
    margin-top: 8px;
    border-top: 1px solid var(--line);
  }

  .crm-timeline-more .timeline-list.compact-timeline {
    max-height: 320px;
  }

  .crm-timeline-more > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 2px;
    color: var(--teal-dark);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
  }

  .crm-timeline-more > summary::-webkit-details-marker {
    display: none;
  }

  /* Mobile CRM (≤980px): the drag board is never shown; the list view is forced.
     .crm-board-desktop only exists in the DOM when board view is selected, so
     hiding it here + unhiding the list shell keeps mobile on the (unregressed)
     list regardless of the persisted state.crmView (D2). The board/list switcher
     itself is also hidden — mobile has one CRM layout. */
  .crm-view-switch-row {
    display: none;
  }

  .crm-board-desktop {
    display: none !important;
  }

  .crm-view-list-shell.is-board-hidden {
    display: block;
  }

  .ops-command-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-command-main {
    min-height: 160px;
  }

  .analytics-bar-row {
    grid-template-columns: 1fr;
  }

  .analytics-bar-row strong {
    text-align: right;
  }

  .section-heading-row,
  .action-card,
  .cohort-card-summary,
  .owner-control-heading,
  .ai-control-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .channel-card {
    grid-template-columns: 1fr;
  }

  .watch-panel {
    order: 1;
  }

  .lesson-menu {
    order: 2;
    position: static;
    max-height: none;
  }

  .watch-stage {
    position: static;
  }

  .watch-context-bar {
    display: grid;
    gap: 8px;
  }

  .watch-breadcrumb {
    flex-wrap: wrap;
  }

  .watch-progress-line {
    justify-content: space-between;
    width: 100%;
  }

  .mini-progress-track {
    flex: 1 1 auto;
    width: auto;
  }

  .course-player-target,
  .player-placeholder {
    min-height: 280px;
  }

  .lesson-current-videos {
    display: block;
  }

  .lesson-detail-panel {
    grid-template-columns: 1fr;
  }

  .watch-actions .btn {
    width: 100%;
  }

  /* פרק ד' shared-code safety: the desktop-only student player extras
     (continue strip, combined advance action, next hint, lesson helper) are
     hidden on mobile so student-portal-composite stays pixel-identical. The
     mark-lesson button keeps its original direct-grid-child layout via display:contents. */
  .student-continue-desktop,
  .watch-advance-button,
  .watch-next-hint,
  .watch-lesson-helper {
    display: none;
  }

  .watch-lesson-action {
    display: contents;
  }

  .mobile-course-sheet {
    display: block;
    position: relative;
    top: auto;
    z-index: 6;
    margin: 14px 0 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-soft);
  }

  .mobile-course-sheet > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    color: var(--teal);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
  }

  .mobile-course-sheet > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-course-sheet > summary::before {
    content: "⌃";
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-tint);
    color: var(--teal);
    font-size: 13px;
  }

  .mobile-course-sheet[open] > summary::before {
    content: "⌄";
  }

  .mobile-course-sheet > summary strong {
    direction: ltr;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--surface-tint);
    font-size: 12px;
  }

  .mobile-course-sheet .sidebar-course-menu {
    display: block;
    max-height: min(58vh, 520px);
    overflow: auto;
    margin-top: 0;
    padding: 0 12px 12px;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-course-sheet .sidebar-course-summary {
    padding: 12px 8px;
  }

  .mobile-course-sheet .sidebar-lesson-copy small {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .course-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inline-form {
    grid-template-columns: 1fr;
    min-width: 220px;
  }

  .lesson-head,
  .video-row {
    grid-template-columns: 1fr;
  }

  .video-play {
    width: 100%;
  }

  .course-card-head {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .course-card-head img {
    width: 88px;
  }
}

@media (max-width: 980px) {
  .shell.role-user .topbar,
  .shell.role-user .sidebar {
    display: none;
  }

  .shell.role-user .layout {
    display: block;
    min-height: 100vh;
  }

  .shell.role-user .content {
    max-width: none;
    padding: 0;
  }

  .shell.role-user .site-footer {
    display: none;
  }

  .student-portal-composite {
    min-height: 100vh;
    padding: calc(66px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-left)) calc(80px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-right));
    background: var(--surface-soft);
    overflow-x: hidden;
  }

  .student-learner-switcher {
    width: 100%;
    margin: 0 0 10px;
  }

  .student-learner-switcher select {
    min-width: 0;
    flex: 1 1 auto;
  }

  .student-mobile-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(8px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px);
  }

  .student-mobile-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .student-mobile-brand .brand-mark {
    width: 38px;
    height: 34px;
  }

  .student-mobile-brand strong,
  .student-mobile-brand span {
    display: block;
  }

  .student-mobile-brand strong {
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 15px;
    line-height: 1.1;
  }

  .student-mobile-brand span {
    max-width: 220px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-menu-button {
    width: 44px;
    min-height: 44px;
    border-radius: 10px;
    background: var(--surface-tint);
    color: var(--teal-dark);
    font-size: 21px;
    font-weight: 800;
  }

  .student-mobile-screen {
    display: none;
    animation: student-screen-in 220ms ease;
  }

  .student-mobile-screen.active {
    display: block;
  }

  .student-course-screen .course-switcher {
    display: none;
  }

  .student-resume-bar {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 9px 13px;
    border-radius: 11px;
    background: var(--teal-dark);
    color: #fff;
    text-align: right;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .student-resume-bar strong {
    color: #fff;
  }

  .student-resume-go {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    color: var(--teal-dark);
    font-weight: 800;
  }

  .shell.role-user .watch-stage {
    border-radius: 12px;
  }

  .shell.role-user .watch-context-bar {
    padding: 10px 12px;
  }

  .shell.role-user .watch-breadcrumb,
  .shell.role-user .watch-progress-line {
    font-size: 12px;
  }

  .shell.role-user .lesson-detail-panel,
  .shell.role-user .lesson-current-videos {
    padding: 12px;
  }

  .shell.role-user .watch-panel > .section-block {
    display: none;
  }

  .student-course-map-panel,
  .student-mine-panel {
    display: grid;
    gap: 12px;
  }

  .student-map-head {
    display: grid;
    gap: 3px;
    padding: 2px 2px 0;
  }

  .student-map-head h2 {
    margin: 0;
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 17px;
  }

  .student-map-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
  }

  .student-map-head .progress-block {
    margin-top: 8px;
  }

  .student-map-head .progress-track {
    height: 7px;
  }

.student-map-list {
    display: grid;
    gap: 8px;
  }

  .student-map-card {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    text-align: right;
  }

  .student-map-card.current {
    border-color: var(--teal);
    border-width: 2px;
  }

  .student-map-card.done {
    background: #fbfefd;
  }

  .student-map-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .student-map-copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .student-map-copy small {
    color: var(--muted);
    font-size: 11.5px;
  }

  .student-map-badge {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--muted);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 12px;
    font-weight: 900;
    direction: ltr;
  }

  .student-map-card.current .student-map-badge {
    background: var(--teal);
    color: #fff;
  }

  .student-map-courses {
    display: grid;
    gap: 12px;
  }

  .student-map-course {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-tint);
    overflow: hidden;
  }

  .student-map-course.active {
    border-color: var(--teal);
  }

  .student-map-course-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px;
    background: #fff;
    color: var(--ink);
    text-align: right;
  }

  .student-map-course.active .student-map-course-head {
    background: #f4fbfa;
  }

  .student-map-course-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .student-map-course-label {
    color: var(--teal);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
  }

  .student-map-course-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .student-map-course-copy small {
    color: var(--muted);
    font-size: 11.5px;
  }

  .student-map-course-head .accordion-caret {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--muted);
    font-size: 16px;
    font-weight: 700;
  }

  .student-map-course .student-map-list {
    padding: 10px;
  }

  .student-map-card.done .student-map-badge {
    background: var(--ok);
    color: #fff;
  }

  .student-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .student-metric-grid .metric {
    min-height: 76px;
    padding: 11px;
    border-radius: 11px;
    text-align: center;
  }

  .student-metric-grid .metric strong {
    color: var(--teal);
    font-size: 21px;
  }

  .student-metric-grid .metric span {
    font-size: 11.5px;
  }

  .student-notes-section {
    display: grid;
    gap: 9px;
    margin-top: 4px;
  }

  .student-notes-section h3 {
    margin: 0;
    color: var(--teal-dark);
    font-size: 15px;
  }

  .student-note-card {
    display: grid;
    gap: 5px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }

  .student-note-card.unread {
    border-inline-start: 4px solid var(--danger);
  }

  .student-note-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 11.5px;
  }

  .student-note-card.unread .student-note-meta span:last-child {
    color: var(--danger);
    font-weight: 800;
  }

  .student-note-card p {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
  }

  .student-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 21;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: #fff;
    border-top: 1px solid var(--line);
  }

  .student-bottom-tab {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    background: transparent;
    font-size: 10.5px;
    font-weight: 700;
  }

  .student-bottom-icon {
    position: relative;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--surface-tint);
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
  }

  .student-bottom-tab.active {
    color: var(--teal);
    font-weight: 900;
  }

  .student-bottom-tab.active .student-bottom-icon {
    background: var(--teal);
    color: #fff;
  }

  .student-note-dot {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--danger);
  }

  .student-drawer-scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: block;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    background: rgba(6, 59, 74, 0.35);
    transition: opacity 280ms ease, visibility 0s linear 280ms;
  }

  .student-drawer-scrim.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: opacity 280ms ease, visibility 0s;
  }

  .student-drawer-scrim button {
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .student-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: calc(18px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 14px;
    background: #fff;
    box-shadow: -14px 0 34px rgba(6, 59, 74, 0.25);
    transform: translateX(105%);
    pointer-events: none;
    visibility: hidden;
    transition: transform 280ms ease, visibility 0s linear 280ms;
  }

  .student-drawer.open {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 280ms ease, visibility 0s;
  }

  .student-drawer-head {
    display: grid;
    gap: 2px;
    padding-bottom: 14px;
  }

  .student-drawer-head strong {
    color: var(--teal-dark);
    font-size: 15px;
  }

  .student-drawer-head span,
  .student-drawer-profile span {
    color: var(--muted);
    font-size: 12px;
  }

  .student-drawer-profile,
  .student-drawer-link {
    min-height: 46px;
    display: grid;
    align-content: center;
    gap: 2px;
    padding: 10px 6px;
    border-bottom: 1px solid var(--surface-soft);
    color: var(--ink);
    text-align: right;
    text-decoration: none;
    background: transparent;
    font-size: 14px;
  }

  .student-drawer-profile strong {
    color: var(--ink);
    font-size: 14px;
  }

  .student-drawer-link.logout {
    margin-top: auto;
    color: var(--danger);
    font-weight: 800;
  }
}

.student-map-unit {
  margin: 14px 2px 4px;
  color: var(--ink);
  font-size: 1rem;
}

@media (max-width: 560px) {
  .topbar {
    align-items: center;
    flex-direction: row;
    min-height: 58px;
    padding: 10px 12px;
  }

  .top-actions {
    width: auto;
    justify-content: flex-end;
  }

  .authstage,
  .auth-stage {
    min-height: calc(100vh - 58px);
    padding: 18px 14px;
  }

  .auth-story h2,
  .page-title {
    font-size: 28px;
  }

  .authcard,
  .auth-card,
  .auth-panel,
  .auth-story,
  .state-panel,
  .operational-console,
  .ops-panel,
  .ops-command-main,
  .operation-form-card,
  .timeline-panel,
  .ai-control-hero {
    padding: 18px;
  }

  .topbar .role-chip,
  .topbar .user-chip {
    display: none;
  }

  .topbar .btn {
    min-height: 44px;
    padding-inline: 12px;
  }

  .ops-command-stats,
  .ops-compact-row,
  .ops-task,
  .crm-queue-row {
    grid-template-columns: 1fr;
  }

  .ops-disclosure summary {
    align-items: flex-start;
  }

  .auth-logo-image {
    height: 68px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .course-stats {
    grid-template-columns: 1fr;
  }

  .watch-heading {
    display: grid;
  }

  .watch-heading .btn {
    width: 100%;
  }

  .watch-video-controls {
    grid-template-columns: 1fr;
  }

  .watch-video-position {
    order: -1;
    min-width: 0;
  }

  .video-menu-copy strong {
    white-space: normal;
  }

  .course-player-target,
  .player-placeholder {
    min-height: 220px;
  }

  .visual-next-card {
    min-height: 160px;
  }

  .coach-course-visual {
    height: 68px;
    margin: -14px -14px 14px;
  }

  .course-card-head {
    grid-template-columns: 1fr;
  }

  .course-card-head img {
    width: 100%;
  }

  .panel,
  .card,
  .metric,
  .lesson-row,
  .video-row,
  .note-row {
    padding: 14px;
  }

  .table-wrap {
    border-radius: 8px;
  }
}

/* --- Footer links (privacy / terms) --------------------------------------- */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px 26px;
  color: var(--muted);
  font-size: 13px;
}

.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 4px;
}

.site-footer a:hover {
  color: var(--teal-dark);
}

/* Help center entry point — slightly louder than the legal links. */
.site-footer .help-footer-link {
  color: var(--teal);
  font-weight: 600;
}

/* --- Inline action toast --------------------------------------------------- */

.action-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toast-dismiss {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
}

.toast-dismiss:hover {
  background: rgba(16, 42, 48, 0.1);
}

/* --- Touch targets: 44px on mobile and coarse pointers ---------------------- */

@media (max-width: 980px), (pointer: coarse) {
  .lesson-video-button,
  .sidebar .lesson-video-button {
    min-height: 44px;
  }

  .watch-nav-button,
  .watch-video-position {
    min-height: 44px;
  }

  .attendance-actions .btn {
    min-height: 44px;
  }
}

/* --- Staff mobile navigation: bottom tabs + top drawer ---------------------- */

@media (max-width: 980px) {
  .shell.role-coach {
    --staff-mobile-topbar-height: 70px;
    --staff-bottom-nav-height: 64px;
    --coach-live-bar-height: 48px;
  }

  .shell.role-admin {
    --staff-mobile-topbar-height: 70px;
    --staff-bottom-nav-height: 64px;
  }

  .shell.role-owner {
    --staff-mobile-topbar-height: 70px;
    --staff-bottom-nav-height: 64px;
  }

  .shell.role-owner .topbar,
  .shell.role-admin .topbar,
  .shell.role-coach .topbar {
    display: none;
  }

  .shell.role-owner .sidebar,
  .shell.role-admin .sidebar,
  .shell.role-coach .sidebar {
    display: none;
  }

  .shell.role-owner .layout,
  .shell.role-admin .layout,
  .shell.role-coach .layout {
    display: block;
    min-height: 100vh;
  }

  .shell.role-owner .content,
  .shell.role-admin .content,
  .shell.role-coach .content {
    max-width: none;
    padding: calc(66px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-left)) calc(80px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-right));
    background: var(--surface-soft);
    overflow-x: hidden;
  }

  .shell.role-owner .site-footer,
  .shell.role-admin .site-footer,
  .shell.role-coach .site-footer {
    display: none;
  }

  .staff-mobile-chrome,
  .staff-mobile-footer {
    display: block;
  }

  .staff-bottom-nav {
    grid-template-columns: repeat(var(--mobile-tab-count, 4), minmax(0, 1fr));
  }

  .shell.role-owner #content .qa-visibility-toggle,
  .shell.role-admin #content .qa-visibility-toggle {
    display: none;
  }

  .staff-drawer .staff-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: none;
    min-height: 44px;
  }

  .staff-drawer .staff-drawer-toggle input {
    width: 22px;
    height: 22px;
  }

  .shell.role-coach #content > .page-header,
  .shell.role-admin #content > .page-header {
    display: none;
  }

  /* Owner: only the HOME tab renders the command deck, so hide the page-header
     just there (other owner tabs — CRM/analytics/materials — keep theirs). */
  .shell.role-owner #content:has(.owner-mobile-workbench) > .page-header {
    display: none;
  }

  .shell.role-coach .coach-desktop-layout,
  .shell.role-admin .admin-desktop-layout,
  .shell.role-owner .owner-desktop-layout {
    display: none;
  }

  .shell.role-coach .coach-mobile-workbench {
    display: grid;
    gap: 10px;
    animation: student-screen-in 220ms ease;
  }

  .shell.role-admin .admin-mobile-home,
  .shell.role-admin .admin-mobile-workbench {
    display: grid;
    gap: 10px;
    animation: student-screen-in 220ms ease;
  }

  .student-next-meeting,
  .schedule-today-panel {
    border-radius: 12px;
  }

  .student-next-meeting {
    margin-bottom: 8px;
    padding: 11px 12px;
  }

  .schedule-today-panel {
    padding: 12px;
  }

  .schedule-today-occurrence {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .schedule-today-status {
    grid-column: 2;
    justify-self: start;
  }

  .schedule-today-attendance {
    grid-column: 1 / -1;
    padding-inline-start: 0;
  }

  .shell.role-owner .owner-mobile-workbench {
    display: grid;
    gap: 12px;
    animation: student-screen-in 220ms ease;
  }

  .shell.role-coach .coach-mobile-workbench.has-live-session {
    padding-bottom: calc(var(--staff-bottom-nav-height) + var(--coach-live-bar-height) + 24px + env(safe-area-inset-bottom));
  }

  .coach-cohort-switcher {
    position: sticky;
    top: calc(var(--staff-mobile-topbar-height, 70px) + env(safe-area-inset-top));
    z-index: 14;
    display: flex;
    gap: 7px;
    margin: -2px -2px 0;
    padding: 4px 2px 8px;
    overflow-x: auto;
    background:
      linear-gradient(to right, var(--surface-soft), transparent 18px),
      linear-gradient(to left, var(--surface-soft), transparent 18px),
      var(--surface-soft);
    background-attachment: local, local, scroll;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
  }

  .coach-cohort-switcher::-webkit-scrollbar {
    display: none;
  }

  .coach-cohort-chip {
    min-width: max-content;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--teal-dark);
    font-weight: 900;
    text-align: center;
  }

  .coach-cohort-chip small {
    min-width: 24px;
    min-height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--teal);
    font-size: 11px;
    line-height: 1;
  }

  .coach-cohort-chip.active {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
  }

  .coach-cohort-chip.active small {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  .coach-cohort-select {
    align-items: stretch;
    flex-direction: column;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .coach-cohort-select select {
    min-height: 44px;
    border-color: var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--teal-dark);
    font-weight: 800;
  }

  .coach-mobile-panel {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 8px;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
  }

  .coach-mobile-cohort-head,
  .coach-mobile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .coach-mobile-cohort-head h2,
  .coach-mobile-section-head h3 {
    margin: 0;
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
  }

  .coach-mobile-cohort-head h2 {
    font-size: 16px;
  }

  .coach-mobile-count,
  .coach-mobile-section-head span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
  }

  .coach-mobile-section-head > div:first-child {
    min-width: 0;
  }

  .coach-roster-hint {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.35;
  }

  .coach-roster-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .coach-bulk-present {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .coach-live-hero {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
  }

  .coach-live-hero.is-closed {
    min-height: 150px;
    align-content: stretch;
  }

  .coach-live-copy {
    display: grid;
    gap: 3px;
  }

  .coach-live-copy h3 {
    margin: 0;
    color: var(--teal-dark);
    font-size: 18px;
  }

  .coach-live-copy p {
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
  }

  .coach-live-start-form {
    display: grid;
    gap: 8px;
    align-self: end;
    margin-top: auto;
  }

  .coach-live-start-form label {
    display: grid;
    gap: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .coach-live-start-form select,
  .coach-live-primary {
    min-height: 44px;
  }

  .coach-live-hero.is-open {
    align-items: center;
    min-height: 72px;
  }

  .coach-live-status {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .coach-live-status strong,
  .coach-live-status span {
    display: block;
  }

  .coach-live-status strong {
    color: var(--teal-dark);
    font-size: 14px;
  }

  .coach-live-status span {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .coach-live-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--ok);
  }

  .coach-roster-section {
    display: grid;
    gap: 6px;
  }

  .coach-roster-grid {
    display: grid;
    gap: 7px;
  }

  .coach-mobile-workbench .learner-card {
    display: grid;
    grid-template-columns: minmax(90px, 0.75fr) minmax(190px, 1.45fr);
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
  }

  .coach-mobile-workbench .learner-card strong {
    color: var(--teal-dark);
    font-size: 14px;
  }

  .coach-mobile-workbench .attendance-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(54px, 0.52fr);
    gap: 6px;
    margin-top: 0;
  }

  .coach-mobile-workbench .learner-roster-context > summary {
    min-height: 26px;
  }

  .coach-mobile-workbench .learner-card:has(.learner-roster-context[open]) .learner-roster-ident,
  .coach-mobile-workbench .learner-card:has(.learner-roster-context[open]) .attendance-actions {
    grid-column: 1 / -1;
  }

  .coach-mobile-workbench .attendance-actions .btn {
    min-height: 44px;
    padding: 8px 7px;
    font-size: 12.5px;
  }

  .coach-mobile-workbench .attendance-actions .btn[disabled] {
    opacity: 0.48;
  }

  .coach-mobile-workbench .attendance-actions .learner-note-button {
    min-width: 54px;
    padding-inline: 5px;
    font-size: 11.5px;
  }

  .coach-mobile-workbench .learner-recent-notes {
    margin-top: 0;
    gap: 4px;
  }

  .coach-mobile-workbench .learner-recent-note {
    padding: 5px 7px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .coach-mobile-workbench .learner-note-meta {
    font-size: 10.5px;
  }

  .coach-cohort-note-details {
    border-top: 1px solid var(--line);
    padding-top: 4px;
  }

  .coach-cohort-note-details summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--teal-dark);
    font-weight: 900;
    cursor: pointer;
  }

  .coach-cohort-note-details .coach-note-form {
    padding-top: 8px;
  }

  .coach-live-sticky-slot {
    display: block;
  }

  .coach-live-sticky {
    position: fixed;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(var(--staff-bottom-nav-height, 64px) + 6px + env(safe-area-inset-bottom));
    left: calc(12px + env(safe-area-inset-left));
    z-index: 22;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 -12px 30px rgba(6, 59, 74, 0.18);
    color: var(--teal-dark);
    font-size: 12.5px;
    font-weight: 900;
  }

  .coach-live-sticky span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .coach-live-sticky .btn {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 6px 10px;
  }

  /* --- Admin mobile workbench (פרק ה') ------------------------------------- */
  /* top:0, not the topbar-height offset: the workbench lives inside .content
     whose padding-top already clears the fixed topbar and which is the sticky
     containing block, so a topbar-height offset double-counts it and slides the
     bar over the first block. Aligned with the owner status bar (committee M7). */
  .admin-status-bar {
    position: sticky;
    top: 0;
    z-index: 14;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .admin-status-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-dark);
    font-size: 12.5px;
    font-weight: 800;
  }

  .admin-status-line > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-status-dot {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
  }

  .admin-status-dot.busy {
    color: var(--danger);
  }

  .admin-status-dot.calm {
    color: var(--ok);
  }

  .admin-status-qa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
  }

  .admin-status-qa input {
    width: 22px;
    height: 22px;
  }

  .admin-status-qa {
    min-height: 44px;
    padding-inline: 4px;
  }

  .admin-home-tiles {
    display: grid;
    gap: 8px;
  }

  .admin-home-tile {
    min-height: 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    gap: 4px 10px;
    align-items: start;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    text-align: start;
  }

  .admin-home-tile.attention {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger), var(--shadow-soft);
  }

  .admin-home-eyebrow,
  .admin-home-tile small {
    color: var(--muted);
    font-weight: 800;
  }

  .admin-home-eyebrow {
    font-size: 11.5px;
  }

  .admin-home-tile strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: center;
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 34px;
    line-height: 1;
  }

  .admin-home-tile.attention strong {
    color: var(--danger);
  }

  .admin-home-tile small {
    align-self: end;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
  }

  .admin-mobile-workbench .panel.admin-queue-panel {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 10px;
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
  }

  .admin-mobile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .admin-mobile-section-head h2 {
    margin: 0;
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 16px;
  }

  .admin-queue-list {
    display: grid;
    gap: 7px;
  }

  .admin-queue-group {
    display: grid;
    gap: 6px;
  }

  .admin-queue-group > h3 {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 3px 2px 0;
    color: var(--teal-dark);
    font-size: 12px;
  }

  .admin-queue-group > h3 b {
    min-width: 26px;
    min-height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-tint);
    color: var(--teal);
  }

  .admin-queue-item {
    display: grid;
    gap: 7px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }

  details.admin-queue-item {
    padding: 0;
    overflow: hidden;
  }

  details.admin-queue-item > summary {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 2px 8px;
    padding: 8px 10px;
    cursor: pointer;
    list-style: none;
  }

  details.admin-queue-item > summary::-webkit-details-marker {
    display: none;
  }

  details.admin-queue-item > summary::after {
    content: "+";
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    color: var(--teal);
    font-size: 20px;
    font-weight: 900;
  }

  details.admin-queue-item[open] > summary::after {
    content: "−";
  }

  details.admin-queue-item > summary small {
    color: var(--teal);
    font-size: 11px;
    font-weight: 800;
  }

  .admin-queue-item-body {
    padding: 9px 10px 10px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.72);
  }

  .admin-queue-item.decision-lead {
    border-inline-start: 4px solid var(--teal);
    background: #f4fbfa;
  }

  .admin-queue-item.warn,
  .admin-queue-item.decision-coach {
    border-inline-start: 4px solid #c58a16;
    background: #fffaf0;
  }

  .admin-queue-item.danger,
  .admin-queue-item.decision-capacity {
    border-inline-start: 4px solid #b54732;
    background: #fff6f3;
  }

  .admin-queue-meta {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .admin-queue-meta strong {
    color: var(--teal-dark);
    font-size: 14px;
  }

  .admin-queue-decision-title {
    margin: 0 0 4px;
    font-size: 14px;
  }

  .admin-queue-meta span {
    color: var(--muted);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
  }

  /* Only the lead's "email · phone" meta is Latin/bidi — force LTR there. The
     coach-gap meta stays RTL (Hebrew course + "· חסר מאמן ראשי") so the "·"
     sits on the correct edge (committee R5). */
  .admin-queue-contact {
    direction: ltr;
  }

  .admin-queue-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: stretch;
    width: 100%;
  }

  .admin-queue-form select {
    min-height: 44px;
    min-width: 0;
    border-color: var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--teal-dark);
    font-weight: 700;
  }

  .admin-queue-form .btn {
    min-height: 44px;
    width: 100%;
    padding: 8px 14px;
    white-space: nowrap;
  }

  .admin-queue-consequence {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.4;
  }

  .admin-cohort-reference-table {
    min-width: 610px;
  }

  /* Per-item dead-end: explicit next step instead of dangling text
     (committee R2/R6). */
  .admin-queue-deadend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .admin-queue-deadend .muted {
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.3;
  }

  .admin-queue-deadend .btn {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 6px 12px;
    white-space: nowrap;
  }

  /* Soften the collapse after a queue item is cleared: the panel keeps at least
     one item's worth of height while items remain, and eases its height so the
     content below does not jump up under the thumb (committee R7). When the
     queue empties (data-queue-count="0") the reserve is released. */
  .admin-queue-list {
    min-height: 64px;
    transition: min-height 180ms ease;
  }

  .admin-queue-list[data-queue-count="0"] {
    min-height: 0;
  }

  .admin-more-count {
    margin: 6px 2px 0;
    font-size: 11.5px;
  }

  @media (prefers-reduced-motion: reduce) {
    .admin-queue-list {
      transition: none;
    }
  }

  .admin-quick-row {
    display: grid;
    gap: 7px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }

  .admin-quick-row .admin-quick-groups {
    gap: 20px;
    margin-top: 4px;
  }

  .admin-quick-row .admin-quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-quick-row .admin-action-launcher {
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 11px;
  }

  .admin-quick-row .admin-action-launcher small {
    font-size: 11.5px;
  }

  .admin-action-drawer {
    width: min(100vw, 560px);
  }

  .admin-action-drawer.is-expanded {
    width: 100%;
  }

  .admin-action-head {
    min-height: 72px;
    padding: 12px 14px;
  }

  .admin-action-body {
    padding: 14px;
  }

  .admin-action-form-actions {
    bottom: -14px;
    margin-inline: -14px;
  }

  .cohort-edit-disclosure > summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cohort-edit-summary-meta {
    width: 100%;
    margin-inline-start: 0;
  }

  .admin-reference-details {
    margin: 0;
  }

  .admin-mobile-deep-work {
    margin: 0;
    padding: 0;
  }

  .admin-mobile-deep-work > .section-title {
    margin: 6px 2px 4px;
    color: var(--teal-dark);
    font-size: 13px;
  }

  .admin-fix-access-stack,
  .admin-access-roster {
    display: grid;
    gap: 8px;
  }

  .admin-access-roster h4 {
    margin: 4px 0 0;
    color: var(--teal-dark);
    font-size: 13px;
  }

  .admin-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
  }

  .admin-access-row .btn {
    min-height: 44px;
    flex: 0 0 auto;
    padding: 6px 11px;
    font-size: 12px;
    white-space: nowrap;
  }

  .admin-mobile-workbench .grid,
  .admin-mobile-workbench .cohort-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-mobile-workbench .table-wrap {
    overflow-x: auto;
  }

  .crm-mobile-context {
    position: sticky;
    top: 0;
    z-index: 14;
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .crm-mobile-context-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
  }

  .crm-mobile-context-head strong {
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 16px;
  }

  .crm-mobile-stage-switcher {
    display: flex;
    gap: 7px;
    margin-inline: -2px;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .crm-mobile-stage-switcher::-webkit-scrollbar {
    display: none;
  }

  .crm-mobile-stage-switcher button {
    min-width: max-content;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--teal-dark);
    font-weight: 900;
    white-space: nowrap;
  }

  .crm-mobile-stage-switcher button.active {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff;
  }

  /* Compact disclosure summaries so seven collapsed deep-work rows + four
     quick actions stay dense: keep a 46px tap target, drop the subtitle line,
     shrink the +/- chip. Reference/queue content is unaffected. */
  .admin-mobile-workbench .ops-disclosure summary {
    min-height: 46px;
    padding: 8px 11px;
    align-items: center;
  }

  .admin-mobile-workbench .ops-disclosure summary small {
    display: none;
  }

  .admin-mobile-workbench .ops-disclosure summary strong {
    font-size: 13.5px;
  }

  .admin-mobile-workbench .ops-disclosure-icon {
    width: 26px;
    height: 26px;
  }

  .admin-mobile-workbench .ops-action-stack {
    gap: 7px;
  }

  /* --- Owner mobile command deck (פרק ו') ---------------------------------- */
  /* The workbench lives inside .content, whose padding-top already clears the
     fixed mobile topbar, and which is the sticky containing block. So the
     sticky offset is measured from that padded edge — top:0 rests the bar flush
     under the topbar with the signal cards cleanly below it (a non-zero offset
     double-counts the topbar and slides the bar over the first card). */
  .owner-status-bar {
    position: sticky;
    top: 0;
    z-index: 14;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .owner-status-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 800;
  }

  .owner-status-line > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .owner-status-dot {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1;
  }

  .owner-status-dot.busy {
    color: var(--danger);
  }

  .owner-status-dot.calm {
    color: var(--ok);
  }

  .owner-signal-grid {
    display: grid;
    /* Uniform, compact tiles. Priority is conveyed by the coral attention
       accent, not by size — a full-width hero tile only had content on one
       edge and read as empty/unbalanced. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .owner-signal-card {
    position: relative;
    /* keep cards clear of the sticky status bar when scrolled/focused to */
    scroll-margin-top: calc(var(--staff-mobile-topbar-height, 70px) + 56px);
    min-height: 96px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 2px 8px;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    text-align: start;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

  .owner-signal-card:active {
    transform: scale(0.98);
  }

  .owner-signal-eyebrow {
    grid-column: 1;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
  }

  .owner-signal-value {
    grid-column: 1;
    align-self: end;
    color: var(--teal-dark);
    font-family: "Rubik", "Heebo", sans-serif;
    font-size: 30px;
    line-height: 1;
  }

  .owner-signal-go {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--muted);
    font-size: 18px;
  }

  /* Only what's burning stands out: attention cards get a coral accent; zeroed
     cards are dimmed so the eye lands on live signals. */
  .owner-signal-card.attention {
    border-color: var(--danger);
    box-shadow: inset 0 0 0 1px var(--danger), var(--shadow-soft);
  }

  .owner-signal-card.attention .owner-signal-value {
    color: var(--danger);
  }

  .owner-signal-card.zero {
    opacity: 0.5;
  }

  .owner-inventory-details {
    margin: 0;
  }

  .owner-inventory-body {
    display: grid;
    gap: 12px;
  }

  .owner-inventory-section h4 {
    margin: 0 0 6px;
    color: var(--teal-dark);
    font-size: 13px;
  }

  .owner-more-scrim {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(6, 59, 74, 0.35);
    transition: opacity 280ms ease;
  }

  .owner-more-scrim.open {
    opacity: 1;
    pointer-events: auto;
  }

  .owner-more-scrim button {
    width: 100%;
    height: 100%;
    background: transparent;
  }

  .owner-more-sheet {
    position: fixed;
    right: calc(10px + env(safe-area-inset-right));
    bottom: 74px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    left: calc(10px + env(safe-area-inset-left));
    z-index: 26;
    display: grid;
    gap: 6px;
    min-height: 344px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 -14px 38px rgba(6, 59, 74, 0.22);
    /* Closed: slide fully below the viewport AND hide it. The sheet is anchored
       74px + safe-area above the bottom, so a plain translateY(100%) left a ~50px
       sliver poking over the bottom nav; the extra offset clears that and
       visibility:hidden guarantees nothing shows at rest. The 280ms visibility
       delay lets the slide-out animation finish before it hides. */
    transform: translate3d(0, calc(100% + 130px), 0);
    will-change: transform;
    pointer-events: none;
    visibility: hidden;
    transition: transform 280ms ease, visibility 0s linear 280ms;
  }

  .owner-more-sheet.open {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    visibility: visible;
    transition: transform 280ms ease, visibility 0s;
  }

  .owner-more-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--ink);
    text-align: right;
    text-decoration: none;
    background: transparent;
  }

  .owner-more-item.active {
    background: var(--surface-tint);
    color: var(--teal);
  }

  .owner-more-item strong {
    font-size: 14px;
  }
}

/* --- Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .skeleton-stack span,
  .student-mobile-screen,
  .student-drawer,
  .student-drawer-scrim,
  .owner-more-sheet,
  .owner-more-scrim {
    animation: none;
    transition: none;
  }

  .btn {
    transition: none;
  }

  .btn:active,
  button[data-action]:active,
  button.is-pressing,
  a.btn:active,
  summary:active,
  .student-map-card:active,
  .student-bottom-tab:active,
  .student-drawer-link:active,
  .owner-more-item:active,
  .lesson-video-button:active,
  .course-switcher-button:active,
  .sidebar-section > button:active {
    transform: none;
  }

  button.is-pending::after,
  .btn.is-pending::after {
    animation: none;
  }
}

/* --- In-app staff guide links (guide-admin.html / guide-coach.html) --------- */

.page-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-title-row .page-title {
  margin-bottom: 0;
}

.guide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  background: var(--surface);
}

.guide-link:hover,
.guide-link:focus-visible {
  color: var(--teal-dark);
  border-color: var(--teal);
}

/* Inline checkbox row inside operation forms (e.g. "שליחת קישור כניסה במייל"). */
.checkbox-option {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  min-height: 28px;
}

.checkbox-option input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--teal);
  cursor: pointer;
}

@media (max-width: 980px) {
  /* Comfortable 44px touch targets on mobile. */
  .guide-link {
    min-height: 44px;
    padding: 8px 18px;
  }

  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .checkbox-option {
    min-height: 44px;
  }

  .checkbox-option input {
    width: 22px;
    height: 22px;
  }

  .crm-inbox-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-inbox-toolbar .crm-filter-row {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .crm-inbox-workspace {
    display: block;
    min-height: 0;
    border-radius: 14px;
  }

  .crm-inbox-list-pane {
    min-height: 60vh;
    border-inline-end: 0;
  }

  .crm-inbox-detail {
    display: none;
    padding: 0.85rem;
  }

  .crm-inbox-shell.is-mobile-detail .crm-inbox-list-pane {
    display: none;
  }

  .crm-inbox-shell.is-mobile-detail .crm-inbox-detail {
    display: block;
  }

  .crm-inbox-back {
    display: inline-grid;
    place-items: center;
  }

  .crm-inbox-detail-head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .crm-inbox-detail-head > .btn {
    grid-column: 1 / -1;
    min-height: 44px;
  }

  .crm-inbox-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .crm-inbox-row,
  .crm-inbox-pagination .btn,
  .crm-inbox-suggestion button {
    min-height: 44px;
  }
}

/* T18 mobile geometry must win over the earlier W4 full-screen drawer rule. */
@media (max-width: 700px) {
  body #content:has(> .w4-crm-tbar) .crm-drawer,
  body #content:has(> .w4-crm-tbar) .crm-drawer.is-expanded {
    inset: auto 0 0;
    width: 100%;
    height: min(72dvh, 680px);
    max-height: 72dvh;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgb(15 76 82 / 20%);
  }
}

/* T19 — binding 390px mobile conformance pass. */
@media (max-width: 430px) {
  html,
  body,
  #app,
  .shell,
  .layout,
  #content {
    max-width: 100%;
    overflow-x: hidden;
  }

  :where(button, a, input, select, textarea, summary)[data-action],
  :where(.btn, .student-drawer-link, .owner-more-item, .content-inline-add) {
    min-height: 44px;
  }

  .shell.role-user .content,
  .shell.role-owner .content,
  .shell.role-admin .content,
  .shell.role-coach .content {
    padding-inline: 14px;
  }

  .student-portal-composite {
    padding: calc(56px + env(safe-area-inset-top)) 14px calc(78px + env(safe-area-inset-bottom));
  }

  .student-mobile-topbar {
    min-height: 56px;
    padding: calc(6px + env(safe-area-inset-top)) 8px 6px;
    background: #fff;
    backdrop-filter: none;
  }

  .student-home-composite .student-mobile-topbar,
  .staff-mobile-topbar {
    background: var(--panel);
    border-color: var(--panel);
    color: var(--paneltx);
  }

  .student-home-composite .student-mobile-brand strong,
  .student-home-composite .student-mobile-brand span,
  .staff-mobile-topbar .student-mobile-brand strong,
  .staff-mobile-topbar .student-mobile-brand span {
    color: var(--paneltx);
  }

  .student-home-composite .student-menu-button,
  .staff-mobile-topbar .student-menu-button {
    background: rgb(255 255 255 / 12%);
    color: #fff;
  }

  .student-mobile-brand .brand-mark { width: 34px; height: 32px; }
  .student-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .staff-bottom-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .student-drawer {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 77dvh;
    padding: 22px 14px calc(18px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -16px 40px rgb(15 76 82 / 20%);
    transform: translateY(105%);
  }

  .student-drawer::before {
    content: "";
    width: 42px;
    height: 4px;
    margin: -12px auto 10px;
    border-radius: 999px;
    background: var(--line);
  }

  .student-drawer.open { transform: translateY(0); }
  .student-drawer-profile,
  .student-drawer-link { min-height: 48px; }

  .w5-crumb,
  .w5-pagehead .pill { display: none; }
  .w5-pagehead { margin-bottom: 10px; }
  .w5-pagehead h1,
  .w5-pagehead h2 { font-size: 24px; }

  .w5-learner-home > .w5-pagehead { display: grid; }
  .w5-learner-home > .w5-pagehead h1 { font-size: 24px; }
  .w5-learner-home > .w5-pagehead p { font-size: 13px; }
  .w5-continue-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-bottom: 16px;
    border: 2px solid var(--teal);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
  }
  .w5-continue-copy { padding: 14px; }
  .w5-continue-copy .eyebrow { color: var(--teal); }
  .w5-continue-copy h2 { color: var(--ink); font-size: 18px; }
  .w5-continue-copy p { color: var(--sub); opacity: 1; }
  .w5-continue-copy .w5-progress-line { color: var(--sub); }
  .w5-actions { display: grid; grid-template-columns: 1fr; }
  .w5-actions .btn.pri { background: var(--teal); color: #fff; }
  .w5-actions .btn.ghost { display: none; }
  .w5-continue-thumb { display: none; }
  .w5-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .w5-metric-grid .metric { min-height: 78px; padding: 10px; border-radius: 13px; }
  .w5-metric-grid .metric:nth-child(n + 3) { display: none; }
  .w5-home-lower { display: flex; flex-direction: column; }
  .w5-home-lower > section:first-child { order: -1; }
  .w5-home-lower > section:last-child { display: none; }

  .student-course-screen .student-next-meeting,
  .student-course-screen .student-weekly-meetings,
  .student-course-screen .student-resume-mobile { display: none; }
  .student-course-screen .watch-stage { margin-inline: -14px; border-inline: 0; border-radius: 0; }
  .student-course-screen .watch-context-bar { display: none; }
  .course-player-target,
  .player-placeholder { min-height: 220px; border-radius: 0; }
  .student-course-screen .watch-panel,
  .student-course-screen .watch-stage { min-width: 0; }
  .student-course-screen .lesson-area-tabs {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: 14px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    scroll-padding-inline: 14px;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .student-course-screen .lesson-area-tabs::-webkit-scrollbar { display: none; }
  .student-course-screen .lesson-area-tabs button {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 44px;
    padding-inline: 10px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .lesson-detail-panel { padding: 12px 14px; }
  .watch-video-controls { grid-template-columns: 44px 1fr 44px; }
  .watch-nav-button { min-width: 44px; padding-inline: 6px; }
  .lesson-pager { margin: 16px 14px; gap: 8px; }
  .lesson-pager-button { max-width: calc(50% - 4px); font-size: 12px; }

  .w5-course-map .student-map-head { padding: 14px; border-radius: 14px; }
  .w5-course-map .student-map-card { min-height: 58px; gap: 8px; padding: 9px 10px; }
  .w5-course-map .student-map-copy strong { white-space: normal; }
  .w5-course-map .student-map-state { padding-inline: 7px; }
  .w5-course-map .student-map-badge { width: 28px; height: 28px; }
  .w5-mine .student-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w5-mine-grid { display: flex; flex-direction: column; }
  .w5-mine .student-notes-section { order: -1; }

  .shell.role-owner:has(#content > .w4-tbar) .staff-mobile-chrome,
  .shell.role-admin:has(#content > .w4-tbar) .staff-mobile-chrome,
  .shell.role-owner:has(#content > .media-library) .staff-mobile-chrome,
  .shell.role-admin:has(#content > .media-library) .staff-mobile-chrome,
  .shell.role-owner:has(#content > .content-management-workspace) .staff-mobile-chrome,
  .shell.role-admin:has(#content > .content-management-workspace) .staff-mobile-chrome { display: none; }
  .shell.role-owner:has(#content > .w4-tbar) .content,
  .shell.role-admin:has(#content > .w4-tbar) .content,
  .shell.role-owner:has(#content > .media-library) .content,
  .shell.role-admin:has(#content > .media-library) .content,
  .shell.role-owner:has(#content > .content-management-workspace) .content,
  .shell.role-admin:has(#content > .content-management-workspace) .content { padding-top: 0; }
  #content:has(> .w4-tbar) { border: 0; border-radius: 0; box-shadow: none; }
  .w4-tbar,
  .media-library-tbar {
    min-height: 56px;
    align-items: center;
    flex-direction: row;
    padding: 6px 8px;
  }
  .w4-tbar strong,
  .media-library-tbar h1 { min-width: 0; font-size: 14px; }
  .w4-tbar-actions { flex-wrap: nowrap; gap: 4px; }
  .w4-tbar-actions .btn[disabled] { display: none; }
  .w4-tbar .btn,
  .media-library-tbar .btn { min-width: 44px; min-height: 44px; padding: 7px 9px; font-size: 11px; }
  .w4-pagehead { margin: 14px 14px 10px; padding-top: 0; }
  .w4-pagehead h1 { font-size: 24px; }
  .w4-pagehead p { font-size: 12px; }
  #content > .w4-tbar ~ :not(.w4-pagehead, .admin-action-scrim, .crm-drawer-scrim, .calendar-occurrence-scrim) { margin-inline: 14px; }

  #content:has(> .w4-admin-tbar) .w4-pagehead,
  #content:has(> .w4-admin-tbar) .w4-metrics { display: none; }
  #content:has(> .w4-admin-tbar) .w4-summaryline {
    min-height: 44px;
    margin: 0 0 12px;
    padding: 9px 14px;
    border: 0;
    border-radius: 0;
    background: var(--goldbg);
    color: var(--gold);
  }
  #content:has(> .w4-admin-tbar) .w4-summaryline small { display: none; }
  .admin-mobile-workbench { gap: 10px; }
  .admin-mobile-workbench .admin-status-bar { display: none; }
  .admin-mobile-workbench .admin-today-panel { order: 2; }
  .admin-mobile-workbench .admin-queue-panel { order: 1; }
  .admin-mobile-workbench .admin-quick-row { order: 3; }
  .admin-mobile-workbench .admin-reference-details,
  .admin-mobile-workbench .admin-mobile-deep-work { order: 4; }
  .admin-queue-item { border-radius: 13px; }

  .coach-mobile-workbench { gap: 8px; }
  .coach-mobile-panel { padding: 10px; }
  .coach-mobile-workbench .learner-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
  }
  .coach-mobile-workbench .attendance-actions { margin-top: 7px; }
  .coach-cohort-note-details:not([open]) > :not(summary) { display: none; }

  #content:has(> .w4-calendar-tbar) .w4-pagehead { display: none; }
  #content:has(> .w4-calendar-tbar) .calendar-shell { margin: 12px 14px; }
  #content:has(> .w4-calendar-tbar) .calendar-toolbar { gap: 9px; padding: 0 0 10px; }
  #content:has(> .w4-calendar-tbar) .calendar-toolbar-heading { display: none; }
  #content:has(> .w4-calendar-tbar) .calendar-navigation { width: 100%; justify-content: center; }
  #content:has(> .w4-calendar-tbar) .calendar-view-toggle,
  #content:has(> .w4-calendar-tbar) .calendar-filters { display: none; }
  #content:has(> .w4-calendar-tbar) .calendar-results { overflow: hidden; }
  #content:has(> .w4-calendar-tbar) .calendar-grid,
  #content:has(> .w4-calendar-tbar) .calendar-grid.calendar-view-week,
  #content:has(> .w4-calendar-tbar) .calendar-grid.calendar-view-day { min-width: 0; grid-template-columns: 1fr; }
  .calendar-day { border-radius: 12px; }
  .calendar-occurrence { min-height: 58px; border-inline-start: 4px solid var(--teal); border-radius: 12px; }

  .crm-v2-mobile-nav { margin: 8px 14px; }
  .crm-table-view-toggle { display: none; }
  .crm-table-card { display: none; }
  .crm-view-list-shell.is-table-hidden { display: block; }
  .crm-table-tools {
    flex-wrap: wrap;
    margin: 8px 14px;
  }
  .crm-table-tools label { flex: 1 1 140px; }
  .crm-table-tools select { width: 100%; max-width: none; }
  .crm-table-count { margin-inline-start: 0; }
  .w4-crm-tbar { flex-wrap: wrap; }
  .w4-crm-tbar .w4-tbar-actions { width: 100%; }
  .w4-crm-tbar .crm-v2-search { order: 0; flex: 1 1 190px; max-width: none; }
  .w4-crm-tbar .crm-v2-tbar-count { flex: 0 0 auto; margin-inline-start: 0; }
  .w4-crm-tbar [data-admin-action="learner"] { width: 44px; padding: 0; overflow: hidden; font-size: 0; }
  .w4-crm-tbar [data-admin-action="learner"]::after { content: "＋"; font-size: 18px; }
  .crm-v2-page-head { padding: 0 14px 10px; }
  .crm-v2-page-head h1 { font-size: 24px; }
  .crm-v2-hero { margin-inline: 14px; border-radius: 14px; }
  .crm-v2-queue { padding: 8px; }
  .crm-v2-queue-row { border-radius: 13px; }
  .crm-v2-sub-grid { margin-inline: 14px; }
  .crm-v2-sub-grid .crm-v2-panel { border-radius: 12px; }
  .crm-v2-pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .crm-v2-pipeline strong { font-size: 16px; }
  .crm-v2-row-actions .btn,
  .crm-v2-more > summary,
  .crm-v2-mobile-more > summary,
  .crm-v2-mode-row button { min-height: 44px; }

  .calendar-mobile-agenda-shell { display: grid; gap: 12px; }
  .calendar-mobile-daystrip {
    display: grid;
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    gap: 6px;
    overflow-x: auto;
    padding: 2px 0 5px;
  }
  .calendar-mobile-daychip {
    display: grid;
    min-height: 72px;
    place-items: center;
    padding: 6px 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--sub);
  }
  .calendar-mobile-daychip strong { color: var(--ink); font-size: 18px; }
  .calendar-mobile-daychip small { font-size: 9px; }
  .calendar-mobile-daychip.is-active { border-color: var(--teal); background: var(--teal); color: #fff; }
  .calendar-mobile-daychip.is-active strong { color: #fff; }
  .calendar-mobile-agenda { display: grid; gap: 10px; }
  .calendar-mobile-agenda > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
  .calendar-mobile-agenda h3 { margin: 2px 0 0; font-size: 18px; }
  .calendar-mobile-agenda > header > strong { color: var(--teal); font-size: 12px; }
  .calendar-mobile-agenda-list { display: grid; gap: 8px; }

  .content-management-workspace { overflow: visible; border: 0; border-radius: 0; }
  .content-workspace-tbar { min-height: 56px; align-items: center; flex-direction: row; padding: 6px 8px; }
  .content-workspace-tbar-title { flex: 1; min-width: 0; }
  .content-workspace-tbar h2 { font-size: 14px; }
  .content-course-picker { display: none; }
  .content-workspace-tbar-actions .btn { min-width: 44px; width: auto; min-height: 44px; padding: 6px 8px; font-size: 10px; }
  .content-mobile-tree-trigger,
  .content-mobile-tree-close {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: rgb(255 255 255 / 14%);
    color: #fff;
    font-size: 20px;
  }
  .content-workspace-orientation,
  .content-readiness { display: none; }
  .content-workspace-grid { display: block; }
  .content-management-workspace .content-explorer-tree {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    z-index: 74;
    width: 82%;
    max-height: none;
    padding: 12px;
    overflow-y: auto;
    border: 0;
    background: #fbfdfd;
    box-shadow: -16px 0 36px rgb(15 76 82 / 22%);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 180ms ease, visibility 0s linear 180ms;
  }
  .content-management-workspace .content-explorer-tree.is-mobile-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 180ms ease;
  }
  .content-explorer-title { display: flex; align-items: center; justify-content: space-between; }
  .content-explorer-title .content-mobile-tree-close { background: var(--tealsoft); color: var(--teal); }
  .content-mobile-tree-scrim {
    position: fixed;
    inset: 56px 0 0;
    z-index: 73;
    display: none;
    width: 100%;
    border: 0;
    background: rgb(15 76 82 / 36%);
  }
  .content-mobile-tree-scrim.is-open { display: block; }
  .content-block-workspace { padding: 14px; }
  .content-editor-crumb { font-size: 11px; }
  .content-editor-heading h2 { font-size: 22px; }
  .content-class-tabs { margin-inline: -14px; padding-inline: 2px; overflow-x: auto; }
  .content-class-tabs button { min-width: max-content; min-height: 44px; padding-inline: 12px; }
  .content-comments-panel { margin-top: 12px; border-radius: 12px; }
  .content-mobile-sticky-actions,
  .media-mobile-sticky-actions,
  .owner-materials-mobile-actions {
    position: fixed;
    right: 0;
    bottom: calc(var(--staff-bottom-nav-height, 64px) + env(safe-area-inset-bottom));
    left: 0;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -8px 24px rgb(15 76 82 / 12%);
  }
  .content-mobile-sticky-actions .btn,
  .media-mobile-sticky-actions .btn,
  .owner-materials-mobile-actions .btn { min-height: 48px; }
  .content-block-workspace,
  .media-library,
  .w5-owner-materials-viewer { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .content-course-edit-form > .btn[type="submit"],
  .content-selected-block-form .content-editor-form-actions > .btn[type="submit"],
  .content-version-edit-form > .btn[type="submit"] { display: none; }

  .media-library { border: 0; border-radius: 0; box-shadow: none; }
  .media-library-tbar [data-action="open-media-upload"] { display: none; }
  .media-mobile-sticky-actions { grid-template-columns: minmax(0, 1fr); }
  .media-library-filters { padding: 12px 14px 0; }
  .media-library-filters select { width: calc(50% - 5px); min-width: 0; }
  .media-library-filters { flex-flow: row wrap; }
  .media-library-filters input { flex-basis: 100%; }
  .media-library-filters .btn { flex: 1 1 100%; }
  .media-upload-zone { display: none; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px; }
  .media-card { border-radius: 12px; }
  .media-preview-trigger { opacity: 1; }
  .media-card-meta { padding: 8px; }
  .media-card-heading { align-items: flex-start; }
  .media-card-heading strong { font-size: 12px; line-height: 1.3; }
  .media-card-heading .pill,
  .media-chips,
  .media-version-truth { display: none; }
  .media-card-meta > small { margin-top: 3px; font-size: 10px; }
  .media-card-actions { margin-top: 7px; }
  .media-card-actions .btn { flex: 1; padding-inline: 6px; font-size: 10px; }
  .media-card-menu button { min-height: 44px; }
  .media-dialog { padding: 14px; }
  .media-picker-preview { grid-template-columns: 1fr; }

  #content:has(> .w4-communications-tbar) .w4-pagehead { display: none; }
  #content:has(> .w4-communications-tbar) .communication-compose-layout { margin-top: 12px; }
  .communication-compose-form { gap: 12px; padding: 14px; border-radius: 14px; }
  .communication-channel-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .communication-channel-bar button { min-width: 0; min-height: 44px; padding-inline: 4px; font-size: 10px; }
  .communication-channel-bar [data-channel="sms"] { display: none; }
  .communication-compose-actions { display: grid; grid-template-columns: 1fr 1fr auto; }
  .communication-log-disclosure { border-radius: 12px; }

  #content:has(> .w4-analytics-tbar) .w4-pagehead { display: none; }
  #content:has(> .w4-analytics-tbar) .w4-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  #content:has(> .w4-analytics-tbar) .w4-metrics article { min-height: 76px; padding: 10px; border-radius: 13px; }
  #content:has(> .w4-analytics-tbar) .analytics-board,
  .analytics-secondary-grid { gap: 10px; }
  .analytics-chart-panel,
  .analytics-attention-panel { padding: 12px; border-radius: 14px; }
  .attendance-donut-panel { display: none; }
  .analytics-course-panel { display: none; }
  .analytics-bar-row { grid-template-columns: 72px minmax(0, 1fr) 34px; }

  #content:has(> .w4-decisions-tbar) .w4-pagehead { display: none; }
  .decision-control-room { gap: 10px; margin-top: 12px; }
  .control-pause-hero { padding: 10px 12px; border-radius: 0; }
  .control-pause-hero h2 { font-size: 16px; }
  .control-metrics { display: none; }
  .control-split { gap: 10px; }
  .control-inbox,
  .control-policy { border-radius: 14px; }
  .control-policy { display: none; }
  .control-decision { padding: 12px; }
  .control-decision:not(:first-of-type) .control-recommendation,
  .control-decision:not(:first-of-type) .control-decision-options,
  .control-decision:not(:first-of-type) .control-decision-details,
  .control-decision:not(:first-of-type) .control-decision-actions,
  .control-decision:not(:first-of-type) > p { display: none; }

  .w5-materials-head { display: none; }
  .w5-materials-viewer .course-watch-shell { margin-inline: -14px; }
  .w5-materials-viewer .watch-stage { border-inline: 0; border-radius: 0; }
  .w5-materials-viewer .watch-context-bar { display: none; }
  .w5-materials-viewer .lesson-menu { display: none; }
  .w5-materials-viewer .lesson-current-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .w5-materials-viewer .lesson-current-list > * { flex: 0 0 146px; scroll-snap-align: start; }
  .student-course-screen .lesson-current-list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .student-course-screen .lesson-current-list > * { flex: 0 0 146px; scroll-snap-align: start; }
  .owner-materials-mobile-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .authstage,
  .auth-stage {
    min-height: 100dvh;
    padding: 34px 24px 22px;
    background: var(--panel);
  }
  .shell:has(.authstage) > .topbar,
  .shell:has(.auth-stage) > .topbar { display: none; }
  .authstage + .site-footer,
  .auth-stage + .site-footer { display: none; }
  .authcard,
  .auth-card { width: 100%; max-width: none; margin: auto 0; padding: 20px; border-radius: 20px; }
  .authcard > h1,
  .auth-card > h1 { font-size: 26px; }

  .content.single-state,
  .state-page { min-height: 100dvh; padding: 14px; background: var(--bg); }
  .state-panel.empty-state,
  .state-panel.error-state { width: 100%; padding: 30px 18px; border: 0; background: transparent; }
  .state-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .calendar-occurrence-scrim { align-items: end; }
  .calendar-occurrence-drawer,
  body #content:has(> .w4-calendar-tbar) .calendar-occurrence-drawer {
    inset: auto 0 0;
    width: 100%;
    max-width: none;
    max-height: 77dvh;
    border-radius: 22px 22px 0 0;
  }
  .calendar-occurrence-override-actions { display: grid; grid-template-columns: 1fr; }
}

/* T30 — equipment store and fulfillment center. */
.equipment-store,
.equipment-orders,
.admin-fulfillment,
.store-product-page {
  min-width: 0;
  color: var(--ink);
}

.store-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.store-page-head h1,
.store-product-page h1 { margin: 3px 0 5px; font-size: clamp(1.75rem, 3vw, 2.55rem); }
.store-page-head p { max-width: 720px; margin: 0; color: var(--sub); }
.store-ordering-notice {
  display: flex;
  min-height: 52px;
  align-items: center;
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 2px solid var(--danger);
  border-radius: var(--radius-card);
  background: var(--goldbg);
  color: var(--ink);
  font-weight: 800;
}
.store-ordering-notice p { margin: 0; }
.store-category-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.store-category,
.store-view-toggle button {
  min-height: 44px;
  padding: 8px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.store-category[aria-pressed="true"],
.store-view-toggle button[aria-pressed="true"] { border-color: var(--teal); background: var(--tealsoft); color: var(--teal-dark); }
.store-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.store-product-card,
.store-learner-order,
.store-entry-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.store-product-visual {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  overflow: hidden;
  background: var(--tealsoft);
}
.store-product-visual.compact { width: 68px; min-width: 68px; min-height: 68px; border-radius: 10px; }
.store-product-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.store-image-placeholder {
  display: grid;
  width: 104px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
  color: var(--sub);
  font-size: .76rem;
  text-align: center;
}
.store-product-visual.compact .store-image-placeholder { width: 50px; font-size: 0; }
.store-product-copy { padding: 18px; }
.store-product-copy h2 { min-height: 2.7em; margin: 0 0 7px; font-size: 1.08rem; }
.store-product-copy p { min-height: 2.8em; margin: 0 0 15px; color: var(--sub); }
.store-product-copy > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.store-product-copy strong { font-size: 1.28rem; }
.store-product-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.store-ordering-helper {
  display: block;
  min-height: 0;
  margin: 9px 0 0;
  color: var(--ink);
  font-size: .84rem;
  font-weight: 700;
  text-align: center;
}
.store-entry-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 18px; padding: 20px; }
.store-entry-card h2,
.store-entry-card p { margin: 2px 0; }
.store-entry-card p { color: var(--sub); }
.store-entry-icon { display: grid; width: 58px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--tealsoft); color: var(--teal); font-size: 2rem; }

.store-back { min-height: 44px; margin-bottom: 14px; border: 0; background: transparent; color: var(--teal); font: inherit; font-weight: 700; cursor: pointer; }
.store-order-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); gap: 28px; }
.store-order-photo,
.store-order-form { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.store-order-photo { overflow: hidden; }
.store-order-photo h2,
.store-order-photo p { margin: 12px 20px; }
.store-order-photo p { margin-bottom: 20px; color: var(--sub); }
.store-order-form { padding: 26px; box-shadow: var(--shadow-soft); }
.store-order-form > p { color: var(--sub); }
.store-field-group { margin: 20px 0; padding: 0; border: 0; }
.store-field-group legend,
.store-field-group > strong { display: block; margin-bottom: 8px; font-weight: 800; }
.store-field-group > small { display: block; color: var(--sub); }
.store-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.store-size { min-height: 44px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.store-size[aria-pressed="true"] { border: 2px solid var(--teal); background: var(--tealsoft); font-weight: 800; }
.store-size:disabled { border-style: dashed; background: var(--surface-soft); color: var(--sub); opacity: .64; cursor: not-allowed; text-decoration: line-through; }
.store-quantity { display: inline-grid; grid-template-columns: 44px 58px 44px; align-items: center; margin-top: 9px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.store-quantity button { min-height: 44px; border: 0; background: var(--tealsoft); color: var(--ink); font: inherit; font-size: 1.25rem; cursor: pointer; }
.store-quantity output { text-align: center; font-weight: 800; }
.store-next-copy { display: flex; gap: 12px; margin: 18px 0; padding: 14px; border-radius: 10px; background: var(--tealsoft); }
.store-next-copy > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--panel); color: var(--paneltx); font-weight: 800; }
.store-next-copy p { margin: 3px 0 0; color: var(--sub); }
.store-order-total { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; border-top: 1px solid var(--line); }
.store-order-total strong { font-size: 1.45rem; }
.store-confirm-order { width: 100%; min-height: 50px; }
.store-fine-print { text-align: center; font-size: .83rem; }

.store-confirmation { display: flex; gap: 14px; margin-bottom: 18px; padding: 18px; border: 1px solid var(--green); border-radius: var(--radius-card); background: var(--tealsoft); }
.store-confirmation > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 800; }
.store-confirmation h2,
.store-confirmation p { margin: 0 0 3px; }
.store-order-list { display: grid; gap: 16px; }
.store-learner-order { padding: 20px; }
.store-learner-order > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.store-learner-order h2,
.store-learner-order p { margin: 2px 0; }
.store-order-items { display: grid; gap: 12px; margin-top: 15px; }
.store-order-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; }
.store-order-item small { display: block; margin-top: 4px; color: var(--sub); }
.store-status-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.store-status-pill,
.store-issue-count { display: inline-flex; min-height: 25px; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--sub); font-size: .76rem; font-weight: 800; }
.store-status-pill.paid,
.store-status-pill.delivered,
.store-status-pill.closed { background: var(--tealsoft); color: var(--ok); }
.store-status-pill.pending,
.store-status-pill.placed,
.store-status-pill.shipped { background: var(--goldbg); color: var(--gold); }
.store-status-pill.issue,
.store-status-pill.open,
.store-issue-count.open { background: #fff0ee; color: var(--danger); }
.store-issue-form,
.store-admin-issue-create-form,
.store-resolution-form { grid-column: 1 / -1; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.store-issue-form fieldset { padding: 0; border: 0; }
.store-admin-issue-create-form fieldset { padding: 0; border: 0; }
.store-issue-form fieldset label,
.store-admin-issue-create-form fieldset label { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; margin-inline-end: 14px; }
.store-issue-form textarea,
.store-admin-issue-create-form textarea { width: 100%; min-height: 82px; margin-top: 6px; }

.store-admin-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.store-admin-tools label { display: grid; gap: 5px; color: var(--sub); font-size: .82rem; }
.store-admin-tools select { min-height: 44px; min-width: 145px; }
.store-view-toggle { display: flex; gap: 4px; }
.store-counter { min-width: 140px; padding: 13px 17px; border-radius: var(--radius-card); background: var(--panel); color: var(--paneltx); }
.store-counter strong,
.store-counter span { display: block; }
.store-counter strong { font-size: 1.55rem; }
.store-pivot-context { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 13px 16px; border-radius: 10px; background: var(--tealsoft); }
.store-pivot-context strong,
.store-pivot-context span { display: block; }
.store-pivot-context span { color: var(--sub); font-size: .84rem; }
.store-table-card { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.store-orders-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.store-orders-table th,
.store-orders-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.store-orders-table td small { display: block; margin-top: 4px; color: var(--sub); }
.store-orders-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-soft); }
.store-orders-table th button,
.store-person-link { min-height: 44px; border: 0; background: transparent; color: var(--teal); font: inherit; font-weight: 800; cursor: pointer; }
.store-orders-table tbody tr { cursor: pointer; }
.store-orders-table tbody tr:hover,
.store-orders-table tbody tr:focus { background: var(--sel); outline: 0; }
.store-mobile-admin-list { display: none; }
.store-mobile-admin-card { width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.store-mobile-admin-card.issue { border-inline-start: 4px solid var(--danger); }
.store-mobile-admin-card > header { display: flex; justify-content: space-between; gap: 10px; }
.store-mobile-admin-card header strong,
.store-mobile-admin-card header small { display: block; }
.store-mobile-admin-card header small { margin-top: 3px; color: var(--sub); }
.store-mobile-admin-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.store-mobile-admin-facts span { padding: 10px; border-radius: 8px; background: var(--surface-soft); }
.store-mobile-admin-facts small,
.store-mobile-admin-facts b { display: block; }
.store-mobile-admin-facts small { color: var(--sub); }

.store-drawer-scrim { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-start; background: rgb(15 76 82 / 34%); }
.store-order-drawer { width: min(680px, 88vw); height: 100%; overflow: auto; background: var(--card); box-shadow: var(--shadow); }
.store-drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--card); }
.store-drawer-head h1,
.store-drawer-head p { margin: 2px 0; }
.store-drawer-close { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1.45rem; cursor: pointer; }
.store-drawer-body { display: grid; gap: 16px; padding: 22px 24px 80px; }
.store-drawer-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.store-drawer-summary > div { padding: 11px; border-radius: 9px; background: var(--surface-soft); }
.store-drawer-summary small,
.store-drawer-summary strong { display: block; }
.store-drawer-section { padding: 17px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.store-drawer-section > header,
.store-admin-issue > header { display: flex; justify-content: space-between; gap: 10px; }
.store-drawer-section h2 { margin: 0 0 13px; font-size: 1.05rem; }
.store-drawer-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding-block: 13px; border-top: 1px solid var(--line); }
.store-drawer-item:first-of-type { border-top: 0; }
.store-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.store-admin-issue { grid-column: 1 / -1; margin-top: 8px; padding: 13px; border-inline-start: 4px solid var(--danger); background: #fff8f7; }
.store-event-list { display: grid; gap: 10px; margin: 0; padding-inline-start: 22px; }
.store-event-list li { padding-inline-start: 5px; }
.store-event-list strong,
.store-event-list time { display: block; }
.store-event-list time { color: var(--sub); font-size: .8rem; }
.store-live-region:empty { display: none; }
.store-live-region { margin-top: 10px; padding: 10px; color: var(--ok); }
.store-admin-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.store-admin-pagination span { color: var(--sub); font-size: .9rem; }

.crm-equipment-orders { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--card); }
.crm-equipment-orders > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.crm-equipment-orders h3 { margin: 0; }
.crm-equipment-orders small { color: var(--sub); }
.crm-equipment-order-list { display: grid; gap: 7px; }
.crm-equipment-order { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(150px, 1.2fr) minmax(150px, 1fr); gap: 8px; min-height: 54px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.crm-equipment-order span,
.crm-equipment-order small { display: block; }

.store-category:focus-visible,
.store-size:focus-visible,
.store-back:focus-visible,
.store-quantity button:focus-visible,
.store-orders-table button:focus-visible,
.store-drawer-close:focus-visible,
.store-mobile-admin-card:focus-visible,
.crm-equipment-order:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 980px) {
  .store-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-order-stage { grid-template-columns: 1fr; }
  .store-order-photo .store-product-visual { min-height: 300px; }
  .store-admin-tools { align-items: stretch; }
  .store-admin-tools label { flex: 1 1 180px; }
  .store-order-drawer { width: min(720px, 94vw); }
}

@media (max-width: 520px) {
  .store-page-head { align-items: stretch; flex-direction: column; gap: 12px; }
  .store-product-grid { grid-template-columns: 1fr; }
  .store-product-visual { min-height: 190px; }
  .store-product-copy h2,
  .store-product-copy p { min-height: 0; }
  .store-product-footer { align-items: flex-start; flex-direction: column; }
  .store-product-actions { width: 100%; justify-content: stretch; }
  .store-product-actions .btn { flex: 1; min-height: 44px; }
  .store-entry-card { grid-template-columns: auto 1fr; padding: 15px; }
  .store-entry-card .btn { grid-column: 1 / -1; width: 100%; }
  .store-order-form { padding: 18px; }
  .store-size-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .store-order-item { grid-template-columns: auto minmax(0, 1fr); }
  .store-order-item > .store-problem,
  .store-order-item > .store-status-pill { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .store-learner-order { padding: 14px; }
  .store-admin-tools { display: grid; grid-template-columns: 1fr 1fr; }
  .store-admin-tools > * { min-width: 0; }
  .store-admin-tools .store-view-toggle,
  .store-admin-tools > .btn { grid-column: 1 / -1; }
  .store-view-toggle button { flex: 1; }
  .store-admin-tools select { width: 100%; min-width: 0; }
  .store-table-card { display: none; }
  .store-mobile-admin-list { display: grid; gap: 10px; }
  .store-order-drawer { inset: auto 0 0; width: 100%; height: min(88dvh, 820px); border-radius: 22px 22px 0 0; }
  .store-drawer-scrim { align-items: flex-end; }
  .store-drawer-head { padding: 16px; }
  .store-drawer-body { padding: 16px 14px 80px; }
  .store-drawer-summary { grid-template-columns: 1fr 1fr; }
  .store-drawer-item { grid-template-columns: auto minmax(0, 1fr); }
  .store-item-actions { grid-column: 1 / -1; justify-content: stretch; }
  .store-item-actions .btn { flex: 1; min-height: 44px; }
  .store-resolution-form > div { display: grid; gap: 7px; }
  .store-resolution-form .btn { width: 100%; min-height: 44px; }
  .crm-equipment-order { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .store-product-card,
  .store-order-drawer { scroll-behavior: auto; }
}

@media (max-width: 430px) and (prefers-reduced-motion: reduce) {
  .content-management-workspace .content-explorer-tree { transition: none; }
}

/* T21 — founder CRM flow ruling supersedes the T18 duplicate switcher and
   mobile single-view lock. The same five-view menu remains operable at every
   staff breakpoint, while board/table content stays bounded and scrollable. */
@media (max-width: 980px) {
  .crm-v2-mobile-nav {
    display: flex;
    justify-content: flex-end;
    margin: 8px 14px 10px;
  }

  .crm-v2-mobile-more > summary,
  .crm-v2-mobile-more button {
    min-height: 44px;
  }

  #content:has(> .w4-crm-tbar) .crm-board-desktop {
    display: block !important;
  }

  #content:has(> .w4-crm-tbar) .crm-view-list-shell.is-board-hidden,
  #content:has(> .w4-crm-tbar) .crm-view-list-shell.is-table-hidden {
    display: none;
  }

  .crm-table-card {
    display: block;
  }

  .crm-board {
    overflow-x: auto;
    padding-bottom: 6px;
  }

  .crm-column {
    flex: 0 0 min(82vw, 300px);
  }

  .crm-queue-filter-disclosure {
    margin-inline: 14px;
  }

  .crm-v2-handled .crm-v2-done-outcome {
    display: inline-flex !important;
  }
}

@media (max-width: 700px) {
  .crm-v2-mobile-more > summary {
    min-height: 44px;
  }

  .crm-v2-pipeline {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .crm-table-card {
    display: block;
  }

  .crm-view-list-shell.is-table-hidden {
    display: none;
  }
}

/* T31 — owner view-as stays visually unmistakable and server-enforced. */
.shell.view-as-active {
  padding-top: 72px;
}

.shell.view-as-active > .topbar {
  top: 72px;
}

.view-as-banner {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--panel);
  color: var(--paneltx);
  border-bottom: 4px solid var(--danger);
  text-align: center;
}

.view-as-banner:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: -4px;
}

.view-as-banner strong {
  line-height: 1.35;
}

.view-as-banner .view-as-exit {
  min-height: 44px;
  flex: 0 0 auto;
  background: var(--card);
  color: var(--panel);
  border-color: var(--card);
  font-weight: 900;
}

.view-as-dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(15 76 82 / 45%);
}

/* The closed dialog carries [hidden] + [inert]; the author display:grid above
   overrides the UA [hidden] display:none, which would leave a ghost dialog on
   screen that is inert (clicks pass through, cannot be dismissed). Force it. */
.view-as-dialog-scrim[hidden] {
  display: none;
}

.view-as-dialog {
  width: min(560px, 100%);
  max-height: min(720px, calc(100dvh - 40px));
  overflow: auto;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.view-as-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.view-as-dialog h2,
.view-as-dialog p {
  margin: 0;
}

.view-as-dialog-close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}

.view-as-role-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.view-as-role-options .btn {
  min-height: 44px;
}

.view-as-person-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.view-as-person-form label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.view-as-person-form input,
.view-as-person-form .btn {
  min-height: 44px;
}

.view-as-person-form .message {
  grid-column: 1 / -1;
}

@media (max-width: 980px) {
  .shell.view-as-active .student-mobile-topbar {
    top: 72px;
  }
}

@media (max-width: 560px) {
  .view-as-banner {
    gap: 8px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .view-as-banner .view-as-exit {
    max-width: 148px;
    padding-inline: 10px;
    line-height: 1.2;
  }

  .view-as-dialog-scrim {
    align-items: end;
    padding: 0;
  }

  .view-as-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 18px 18px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  .view-as-person-form {
    grid-template-columns: 1fr;
  }
}