@import url("./player/player-core.css");
@import url("./player/design/layouts/standard-lms/shell.css");

/* Prevent first-paint FOUC until runtime design tokens are applied. */
body.design-pending .dev-shell {
  visibility: hidden;
}

/* Consistent keyboard focus visibility across interactive controls. */
button:focus-visible,
a[href]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--nls-color-primary-bg, #dbeafe) 78%, transparent);
}

/* Slightly larger hit targets for key navigation toggles. */
.dev-sidebar .dev-nav-icon,
.panel-toggle,
.dev-section-toggle,
.brand-builder-toggle {
  min-height: 2.5rem;
}

/* Improve readability of dynamic status and message copy. */
.panel-message,
.auth-meta,
#player-status {
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.adaptive-connected-outcomes {
  margin-top: 1rem;
  border: 1px solid var(--nls-color-border-soft, rgba(148, 163, 184, 0.35));
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75),
    rgba(248, 250, 252, 0.96)
  );
}

.adaptive-connected-outcomes__unit {
  margin-top: -0.35rem;
}

.adaptive-connected-outcomes__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adaptive-connected-outcomes__item {
  display: block;
  padding-top: 0.6rem;
  border-top: 1px solid var(--nls-color-border-soft, rgba(148, 163, 184, 0.25));
}

.adaptive-connected-outcomes__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.adaptive-connected-outcomes__label {
  color: var(--nls-color-text, #0f172a);
}

.adaptive-connected-outcomes__value {
  display: inline;
  color: var(--nls-color-text-muted, #475569);
}

.adaptive-connected-outcomes__value p {
  display: inline;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.landing-auth-panel[hidden] {
  display: none !important;
}

body.is-logged-out .dev-sidebar {
  display: none !important;
}

body.is-logged-out .dev-shell {
  grid-template-columns: 1fr;
}

body.is-logged-out .player-region {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  overflow: visible;
}

body.is-logged-out #layout-shell-region {
  display: none !important;
}

body.is-logged-out #player-panel {
  order: 1;
  width: 100%;
}

/* Remove inherited panel card chrome for pre-auth login surface. */
body.is-logged-out #landing-auth-panel.panel {
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Logged-out shell (option 1): single column — login only; no duplicate player/placeholder. */
body.is-logged-out #player-container {
  display: grid;
  grid-template-columns: minmax(0, 560px);
  grid-template-areas: "auth";
  column-gap: 0;
  row-gap: 0.75rem;
  align-items: start;
  justify-content: center;
  max-width: min(100%, 560px);
  margin: 0 auto;
  width: 100%;
}

body.is-logged-out .legacy-player__status {
  display: none;
}

body.is-logged-out .legacy-player__workspace {
  display: none !important;
}

body.is-logged-out .legacy-player__layout {
  display: none !important;
}

body.is-logged-out #player-nav {
  display: none !important;
}

body.is-logged-out .player-fallback {
  display: none !important;
}

.landing-auth-panel {
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
}

.landing-auth-slot {
  display: flex;
  justify-content: center;
  padding: 0 16px 12px;
}

.landing-auth-slot[hidden] {
  display: none !important;
}

/* Prevent empty shell mount point from showing a top sliver. */
#layout-shell-region {
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
}

#layout-shell-region:empty {
  display: none !important;
}

/* Standard LMS/GME runtime: suppress legacy status rail to avoid top gap shifts. */
body[data-layout="standard-lms"]:not(.is-logged-out) #player-status,
body[data-layout="gme-platform"]:not(.is-logged-out) #player-status {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
}

body.is-logged-out .landing-auth-slot {
  grid-area: auth;
  justify-content: stretch;
  align-self: start;
  padding: 0;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.landing-auth-panel--in-fallback {
  margin: 0.75rem auto 0.65rem;
  padding: 0;
  width: min(100%, 560px);
  border-radius: 18px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 72%, #d1d5db 28%);
  background: linear-gradient(180deg, #fafbff 0%, #f2f4fa 100%);
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body.is-logged-out .landing-auth-panel--in-fallback {
  width: 100%;
  margin: 0;
  height: auto;
  box-sizing: border-box;
}

/* Option 2 (visible logged-out player): restore two-column grid and
   optional `body.is-logged-out[data-theme="dev-view"] .player-placeholder` rules. */

@media (max-width: 900px) {
  body.is-logged-out #player-container {
    grid-template-columns: 1fr;
    grid-template-areas: "auth";
    max-width: 100%;
    margin: 0 auto;
  }

  body.is-logged-out .landing-auth-slot {
    max-width: 100%;
    height: auto;
  }

  body.is-logged-out .landing-auth-panel--in-fallback {
    height: auto;
    border-radius: 0;
    padding: 0;
  }
}

.landing-auth-panel--in-fallback .panel-header {
  margin-bottom: 0;
}

.landing-auth-panel__header {
  display: grid;
  gap: 0.62rem;
}

.landing-auth-panel--in-fallback .panel-title {
  width: min(100%, 400px);
  margin-inline: auto;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  padding-left: 0.35rem;
  text-align: left;
  font-size: 0.92rem;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 88%,
    #334155 12%
  );
  letter-spacing: 0.01em;
  font-weight: 650;
}

.dev-brand-module {
  width: min(100%, 400px);
  margin-inline: auto;
  border-radius: 12px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 75%, #d1d5db 25%);
  background: linear-gradient(180deg, #f8f9fc 0%, #f0f3fa 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 8px 20px rgba(15, 23, 42, 0.06);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.7rem;
}

.dev-brand-module__logo {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #3671bc 0%, #24508f 100%);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(36, 80, 143, 0.28);
}

.dev-brand-module__logo svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

/* Full-width hero strip (GME Connected webp); no title/chip row */
.dev-brand-module--image-only {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  padding: 0;
  gap: 0;
  grid-template-columns: unset;
  overflow: hidden;
  background: color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 92%, #e2e8f0 8%);
}

.dev-brand-module--image-only .dev-brand-module__media {
  display: block;
  width: 100%;
  line-height: 0;
}

.dev-brand-module--image-only .dev-brand-module__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  vertical-align: top;
}

/* Pre-auth login panel: same max width as inset fields + Login title */
.landing-auth-panel__header .dev-brand-module--image-only {
  width: min(100%, 400px);
  max-width: min(100%, 400px);
  margin-inline: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.landing-auth-panel__header .dev-brand-module--compact-books {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

.landing-auth-panel__header .dev-brand-logo-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.landing-auth-panel__header .dev-brand-logo-row--dual {
  justify-content: space-between;
}

.landing-auth-panel__header .dev-brand-logo-row--platforms {
  justify-content: space-between;
  gap: 0.32rem;
}

.landing-auth-panel__header .dev-brand-logo-row__item {
  min-width: 0;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-auth-panel__header .dev-brand-logo-row__item--platforms-books {
  flex: 1.2 1 0;
}

.landing-auth-panel__header
  .dev-brand-logo-row__item--platforms-books
  .dev-united-books-anim {
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.18rem;
}

.landing-auth-panel__header
  .dev-brand-logo-row__item--platforms-books
  .dev-united-book {
  border-radius: 6px;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--nls-shadow-color, #0f172a) 16%, transparent 84%);
}

.landing-auth-panel__header .dev-brand-logo-row__image {
  max-width: 100%;
  height: auto;
  display: block;
}

.landing-auth-panel__header .dev-brand-logo-row__image--gme {
  width: min(100%, 15.5rem);
}

.landing-auth-panel__header .dev-brand-logo-row__image--uniandes {
  width: min(100%, 15.5rem);
}

.landing-auth-panel__header .dev-brand-logo-row__image--connected-wordmark {
  width: 100%;
  max-width: 100%;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-books-anim {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.4rem;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book {
  display: block;
  border-radius: 9px;
  border: 1px solid var(--nls-cover-border-color, #d1d5db);
  overflow: hidden;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nls-shadow-color, #0f172a) 24%, transparent 76%);
  opacity: 0;
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book img {
  width: 100%;
  height: auto;
  display: block;
}

/* Global compact-books fallback: keep pre-auth strips responsive across
   host variants even when wrapper/context classes differ. */
.dev-brand-module--compact-books {
  width: 100%;
  max-width: 100%;
}

.dev-brand-module--compact-books .dev-united-books-anim {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.12rem, 1.2vw, 0.4rem);
}

.dev-brand-module--compact-books .dev-united-book {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dev-brand-module--compact-books .dev-united-book img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--1,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--2,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--3 {
  animation-name: dev-compact-book-drop;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--4,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--5,
.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--6 {
  animation-name: dev-compact-book-rise;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--1 {
  animation-delay: 40ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--2 {
  animation-delay: 120ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--3 {
  animation-delay: 200ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--4 {
  animation-delay: 70ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--5 {
  animation-delay: 150ms;
}

.landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book--6 {
  animation-delay: 230ms;
}

.landing-auth-panel__header .dev-brand-module--compact-uniandes {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.landing-auth-panel__header .dev-brand-module--compact-uniandes .dev-brand-logo-row {
  gap: 0.32rem;
}

.landing-auth-panel__header .dev-brand-module--compact-platforms .dev-brand-logo-row {
  gap: 0.26rem;
}

/* Legacy login hero image guard for cached/older markup variants. */
.landing-auth-panel__header .dev-brand-module__hero-image {
  display: none !important;
}

/* Global GME guard: hide legacy hero/media logo blocks regardless active theme. */
.dev-placeholder--gme-connected-surface .dev-brand-module__hero-image,
.dev-placeholder--gme-connected-surface .dev-brand-module__media {
  display: none !important;
}

.landing-auth-panel__header .dev-brand-module--compact-platforms .dev-platforms-books-row {
  width: 100%;
  display: block;
}

.landing-auth-panel__header .dev-brand-module--compact-platforms .dev-platforms-books-row--third {
  margin-top: 0.34rem;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--1 {
  animation-delay: 230ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--2 {
  animation-delay: 150ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--3 {
  animation-delay: 70ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--4 {
  animation-delay: 200ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--5 {
  animation-delay: 120ms;
}

.landing-auth-panel__header
  .dev-brand-module--compact-platforms
  .dev-platforms-books-row--third
  .dev-united-book--6 {
  animation-delay: 40ms;
}

@keyframes dev-compact-book-drop {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes dev-compact-book-rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-auth-panel__header .dev-brand-module--compact-books .dev-united-book {
    opacity: 1;
    animation: none;
    transform: none;
    filter: none;
  }
}

.dev-brand-module__copy {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.dev-brand-module__copy strong {
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--nls-color-text-mid, #334155);
}

.dev-brand-module__copy span {
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--nls-color-text-soft, #64748b);
}

.dev-env-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  min-height: 1.35rem;
  padding: 0 0.5rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 76%, #d1d5db 24%);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #eef2ff 30%);
  font-size: 0.69rem;
  line-height: 1;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.landing-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.82rem;
}

.landing-auth-form .auth-grid {
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

/* Inset fields: idle = large centered caption; stacked when focused, filled, or autofill.
   ~3.5rem (56px) min height follows common “comfortable” single-line + floating-label density
   (e.g. Material default outlined field) and ≥44px touch guidance; fields may exceed Login height. */
.landing-inset-field {
  width: min(100%, 400px);
  margin-inline: auto;
}

.landing-inset-field__shell {
  --landing-inset-idle-pad-block: 0.875rem;
  --landing-inset-stacked-pad-top: 1.45rem;
  --landing-inset-stacked-pad-bottom: 0.92rem;
  position: relative;
  border-radius: 12px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft, #cbd5e1) 75%, #d1d5db 25%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nls-color-surface-alt, #f8fafc) 92%, #e2e8f0 8%) 0%,
    color-mix(in srgb, var(--nls-color-surface-soft, #f1f5f9) 88%, #e2e8f0 12%)
      100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  min-height: 3.5rem;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.landing-inset-field:focus-within .landing-inset-field__shell {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary, #2563eb) 42%,
    var(--nls-color-border-soft, #cbd5e1) 58%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--nls-color-primary-bg-soft, #e0e7ff) 55%,
        transparent
      );
}

.landing-inset-field:has(.landing-inset-field__input:user-invalid)
  .landing-inset-field__shell {
  border-color: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #dc2626) 45%,
    var(--nls-color-border-soft, #cbd5e1) 55%
  );
}

body[data-theme="dev-view"] .landing-auth-form .landing-inset-field__label {
  display: block;
  margin: 0;
  padding: 0;
  min-height: 3.5rem;
  cursor: text;
  font-size: inherit;
  color: inherit;
  flex-direction: unset;
  gap: 0;
}

.landing-inset-field__caption {
  position: absolute;
  left: 1.05rem;
  z-index: 1;
  line-height: 1.3;
  pointer-events: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  transition:
    top 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    font-size 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 180ms ease;
}

/* Remembered credentials: skip idle→stacked tween */
.landing-inset-field:has(.landing-inset-field__input:-webkit-autofill)
  .landing-inset-field__caption,
.landing-inset-field--prefill-no-caption-motion .landing-inset-field__caption {
  transition: none;
}

.landing-inset-field:not(.landing-inset-field--password)
  .landing-inset-field__caption {
  right: 1.05rem;
}

.landing-inset-field--password .landing-inset-field__caption {
  right: 2.95rem;
}

.landing-inset-field:not(:focus-within):not(.landing-inset-field--filled):not(
    :has(.landing-inset-field__input:-webkit-autofill)
  )
  .landing-inset-field__caption {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 82%,
    #111827 18%
  );
}

.landing-inset-field:focus-within .landing-inset-field__caption,
.landing-inset-field.landing-inset-field--filled .landing-inset-field__caption,
.landing-inset-field:has(.landing-inset-field__input:-webkit-autofill)
  .landing-inset-field__caption {
  top: 0.38rem;
  transform: translateY(0);
  font-size: 0.625rem;
  line-height: 1.2;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 88%,
    #111827 12%
  );
}

.landing-inset-field:focus-within .landing-inset-field__caption {
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 82%,
    #111827 18%
  );
}

body[data-theme="dev-view"] .landing-auth-form .landing-inset-field__input,
.landing-inset-field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  background: transparent;
  min-height: 3.5rem;
  padding: var(--landing-inset-idle-pad-block, 0.875rem) 1.05rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--nls-color-text-mid, #334155);
  outline: none;
  box-shadow: none;
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.landing-inset-field:focus-within .landing-inset-field__input,
.landing-inset-field.landing-inset-field--filled .landing-inset-field__input,
.landing-inset-field:has(.landing-inset-field__input:-webkit-autofill)
  .landing-inset-field__input {
  padding-top: var(--landing-inset-stacked-pad-top, 1.45rem);
  padding-bottom: var(--landing-inset-stacked-pad-bottom, 0.92rem);
}

.landing-inset-field--password .landing-inset-field__input {
  padding-right: 2.95rem;
}

@keyframes landing-inset-autofill {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}

.landing-inset-field__input:-webkit-autofill,
.landing-inset-field__input:-webkit-autofill:hover,
.landing-inset-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nls-color-text-mid, #334155);
  caret-color: var(--nls-color-text-mid, #334155);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  transition: background-color 9999s ease-out;
  animation-name: landing-inset-autofill;
  animation-duration: 0.001s;
}

.landing-inset-field__input:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.landing-inset-field__reveal {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: color-mix(
    in srgb,
    var(--nls-color-text-soft, #64748b) 72%,
    var(--nls-color-text-subtle, #94a3b8) 28%
  );
  cursor: pointer;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}

.landing-inset-field__reveal:hover {
  color: var(--nls-color-text-mid, #334155);
  background: color-mix(
    in srgb,
    var(--nls-color-surface-soft, #f1f5f9) 88%,
    transparent
  );
}

.landing-inset-field__reveal:focus-visible {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 2px;
}

.landing-inset-field__reveal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-inset-field__reveal-icon--on[hidden],
.landing-inset-field__reveal-icon--off[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .landing-inset-field__shell,
  .landing-inset-field__caption {
    transition-duration: 0.01ms !important;
  }
}

.landing-auth-form .auth-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  width: 100%;
}

.landing-auth-form .auth-actions button,
.account-summary button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.landing-auth-form .auth-actions button {
  width: 100%;
  min-width: 0;
}

/* OAuth divider + buttons: same max width as primary controls; hidden when no providers */
.landing-auth-oauth-block {
  display: none;
  flex-direction: column;
  gap: 0.62rem;
  width: 100%;
  margin-top: 0.12rem;
}

.landing-auth-oauth-block:has(#social-auth-actions:not(:empty)) {
  display: flex;
}

.landing-auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 400px);
  margin-inline: auto;
}

.landing-auth-oauth-divider__rule {
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: color-mix(in srgb, var(--nls-color-border-soft) 72%, #e5e7eb 28%);
}

.landing-auth-oauth-divider__label {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--nls-color-text-soft) 82%, #111827 18%);
  white-space: nowrap;
}

.landing-auth-form .auth-actions--social {
  display: grid;
  gap: 0.52rem;
}

.landing-auth-form .auth-actions--social:empty {
  display: none;
}

.landing-auth-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.75rem;
  row-gap: 0.45rem;
  width: min(100%, 400px);
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: 0.35rem;
}

.landing-auth-options #landing-auth-remember-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.landing-auth-options:has(#landing-auth-remember-wrap[hidden]) {
  justify-content: flex-end;
}

/* Override dev-view `label { flex-direction: column }` so checkbox + copy stay on one line */
.landing-auth-form .landing-auth-remember {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--nls-color-text-soft) 82%, #111827 18%);
}

.landing-auth-form .landing-auth-remember input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  accent-color: #2b5ea5;
  border-radius: 4px;
}

.landing-auth-form .auth-actions > button:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .landing-auth-form .auth-actions {
    grid-template-columns: 1fr;
  }
}

.landing-auth-form #login-btn {
  order: 1;
  width: min(100%, 400px);
  margin-inline: auto;
  min-height: 2.95rem;
  border-radius: 12px;
  border: 1px solid #1f57a5;
  background: linear-gradient(180deg, #3d78c4 0%, #2b5ea5 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.landing-auth-form #register-btn {
  order: 2;
  width: min(100%, 400px);
  margin-inline: auto;
  min-height: 2.95rem;
  border-radius: 12px;
  border: 1px solid #d18a29;
  background: linear-gradient(180deg, #f6b04c 0%, #e8942f 100%);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.landing-auth-form #register-btn[hidden] {
  display: none !important;
}

.landing-auth-form #register-btn:hover,
.landing-auth-form #login-btn:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.landing-auth-form #register-btn:active,
.landing-auth-form #login-btn:active {
  transform: translateY(0);
}

.landing-auth-forgot {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: color-mix(in srgb, var(--nls-color-text-soft) 82%, #111827 18%);
  text-decoration: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 88%,
    transparent 12%
  );
  text-underline-offset: 0.18em;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 4px;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
}

.landing-auth-forgot[hidden] {
  display: none !important;
}

.landing-auth-forgot:hover {
  color: #1f57a5;
  text-decoration-color: color-mix(in srgb, #1f57a5 50%, transparent 50%);
}

.landing-auth-forgot:focus-visible {
  outline: 2px solid color-mix(in srgb, #1f57a5 65%, transparent 35%);
  outline-offset: 2px;
}

.landing-auth-form #auth-message {
  width: min(100%, 400px);
  margin-inline: auto;
  text-align: center;
}

.social-auth-btn {
  min-height: 40px;
  border-radius: 6px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 140ms ease;
}

/* Match primary Login / Register (12px radius); modest min-height vs inset fields. */
.landing-auth-form .auth-actions .social-auth-btn,
.landing-auth-form #social-auth-actions .social-auth-btn {
  width: min(100%, 400px);
  margin-inline: auto;
  border-radius: 12px;
  min-height: 2.95rem;
  box-sizing: border-box;
  padding-inline: 14px;
}

.social-auth-btn .social-auth-btn__label {
  flex: 1 1 auto;
  text-align: left;
  line-height: 1;
}

.social-auth-btn:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.social-auth-btn:active:not(:disabled) {
  box-shadow: none;
}

.social-auth-btn:disabled {
  cursor: not-allowed;
}

.social-auth-btn.is-coming-soon {
  opacity: 0.72;
}

.social-auth-btn__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.social-auth-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.social-auth-btn--google {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
}

.social-auth-btn--google:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: #d2d6da;
}

.social-auth-btn--facebook {
  background: #1877f2;
  color: #ffffff;
  border-color: #1877f2;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  border-radius: 6px;
}

.social-auth-btn--facebook:hover:not(:disabled) {
  background: #166fe5;
  border-color: #166fe5;
}

.social-auth-btn--apple {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  font-family:
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-weight: 600;
  border-radius: 6px;
}

.social-auth-btn--apple:hover:not(:disabled) {
  background: #111111;
  border-color: #111111;
}

.social-auth-sdk {
  width: 100%;
}

.social-auth-sdk.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.social-auth-sdk__mount {
  width: min(100%, 400px);
  margin-inline: auto;
  min-height: 40px;
}

.social-auth-sdk__mount > div {
  width: 100% !important;
}

.social-auth-sdk__mount iframe {
  width: 100% !important;
  max-width: 100%;
}

.notices-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

#messages-tools > button {
  width: 100%;
}

#messages-tools {
  display: grid;
  grid-template-columns: 1fr;
}

#messages-tools > button.is-active {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

.messages-tools {
  display: grid;
  gap: 0.4rem;
}

.messages-tools > button.is-active {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

.notices-compose {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
}

.notices-compose label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.notices-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.notices-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  padding: 0.65rem;
  background: var(--nls-color-surface);
}

.notices-card__meta {
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
  display: grid;
  gap: 0.2rem;
}

.notices-card__sender {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--nls-color-text);
  font-weight: 600;
}

.notices-card__sender-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.notice-inline-action {
  font-size: 0.68rem;
  line-height: 1;
  padding: 0.12rem 0.36rem;
  min-height: 1.1rem;
  border-radius: 999px;
}

.notices-card__details {
  color: var(--nls-color-text-soft);
}

.notices-card__body {
  margin: 0.4rem 0 0.55rem;
  line-height: 1.35;
}

.notices-card__body > :first-child {
  margin-top: 0;
}

.notices-card__body > :last-child {
  margin-bottom: 0;
}

.notices-card__actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

/* Unified inbox selected-detail card (announcement + support). */
.admin2-shell--unified-inbox .inbox-unified-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  padding: 0.65rem;
  background: var(--nls-color-surface);
}

.admin2-shell--unified-inbox .inbox-unified-card__title {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.32;
}

.admin2-shell--unified-inbox .inbox-unified-card__meta {
  margin: 0.35rem 0 0;
  color: var(--nls-color-text-soft);
}

.admin2-shell--unified-inbox .inbox-unified-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
}

.admin2-shell--unified-inbox .inbox-unified-card__body {
  margin: 0.65rem 0 0;
  line-height: 1.35;
}

.admin2-shell--unified-inbox .inbox-unified-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
}

.admin2-shell--unified-inbox .inbox-unified-card__inline {
  margin-top: 0.65rem;
}

.support-filters {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-bottom: 0.15rem;
}

.support-filters > button {
  position: relative;
}

.support-filters > button.support-filter-btn--disabled:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  color: var(--nls-color-text-muted);
}

.support-filter-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.2rem;
}

.support-thread-card {
  padding: 0;
  overflow: hidden;
}

.support-thread-card--resolved {
  opacity: 0.92;
}

.support-thread-head {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.65rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.support-thread-select {
  display: inline-flex;
  align-items: center;
  padding-top: 0.22rem;
}

.support-thread-select input {
  margin: 0;
}

.support-thread-head__main {
  min-width: 0;
  display: grid;
  gap: 0.35rem;
  flex: 1 1 auto;
}

.support-thread-head__controls {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.support-thread-head:hover {
  background: var(--nls-color-surface-soft);
}

.support-thread-status {
  display: inline-flex;
  justify-self: start;
  position: relative;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  padding: 0.1rem 0.65rem 0.1rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--nls-color-text-soft);
  background: var(--nls-color-surface-soft);
}

.support-thread-status.has-alert::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  right: 0.18rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 1.5px var(--nls-color-surface, #fff);
}

.support-thread-card:not(.support-thread-card--resolved)
  .support-thread-status {
  color: var(--nls-color-primary-strong);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 48%,
    var(--nls-color-border-soft)
  );
  background: color-mix(in srgb, var(--nls-color-primary-bg) 55%, transparent);
}

.support-thread-status.support-thread-status--own {
  color: var(--nls-color-primary-strong);
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 48%,
    var(--nls-color-border-soft)
  );
  background: color-mix(in srgb, var(--nls-color-primary-bg) 55%, transparent);
}

.support-reply-block {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.support-reply-block__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.support-reply-block__heading-wrap {
  min-width: 0;
  display: grid;
  gap: 0.12rem;
}

.support-reply-block__title {
  margin: 0;
  font-weight: 700;
  color: var(--nls-color-text);
}

.support-reply-block__meta {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.76rem;
  color: var(--nls-color-text-soft);
}

.support-reply-block__body {
  margin: 0;
  line-height: 1.35;
}

.support-reply-block__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.support-thread-preview {
  margin: 0;
  color: var(--nls-color-text);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-thread-head__main .notices-card__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-thread-meta-line {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-thread-head__main .support-thread-meta-line .inline-user-identity {
  min-width: 0;
  max-width: 100%;
}

.support-thread-head__main
  .support-thread-meta-line
  .inline-user-identity__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}

.support-thread-status-toggle {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface-soft);
  color: var(--nls-color-text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
}

.support-thread-body {
  border-top: 1px solid var(--nls-color-border-soft);
  padding: 0.2rem 0.65rem 0.65rem;
}

.support-thread-body.support-thread-body--inline {
  border-top: 0;
  padding: 0;
}

.support-thread-body.support-thread-body--inline .support-reply-block:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Support video embeds: match player `asset-video` / `asset-video__player` (player-core.css) */
.support-thread-body .support-thread-video-figure.asset-video {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 12px;
  max-width: min(100%, 280px);
}

.support-thread-body .support-thread-video-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0a;
}

.support-thread-body .support-thread-video-fs {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 4;
  padding: 0.2rem 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition:
    background 0.15s ease,
    transform 0.12s ease;
}

.support-thread-body .support-thread-video-fs:hover {
  background: rgba(0, 0, 0, 0.72);
}

.support-thread-body .support-thread-video-fs:active {
  transform: scale(0.97);
}

.support-thread-body .support-thread-video-fs__label {
  pointer-events: none;
}

.support-thread-body .support-thread-video:fullscreen,
.support-thread-body .support-thread-video:-webkit-full-screen {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.support-thread-body .support-thread-video.asset-video__player,
.support-thread-body .asset-video__player.support-thread-video {
  display: block;
  max-width: 260px;
  width: 100%;
  vertical-align: middle;
}

.support-thread-body .support-thread-video-caption {
  margin: 0.35rem 0 0;
  padding: 0 0.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--nls-color-text, #111);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.support-thread-body
  .support-thread-video-figure--staff
  .support-thread-video-caption {
  color: var(--nls-color-text-soft, #555);
}

.support-thread-body
  .support-thread-video-figure--placeholder
  .support-thread-video-caption {
  font-weight: 500;
  color: var(--nls-color-text-soft, #555);
}

.support-thread-section-label {
  margin: 0.1rem 0 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nls-color-text-soft);
  position: relative;
  width: fit-content;
  padding-right: 0.75rem;
}

/* Support video library modal (dev-app) */
.support-video-upload-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--nls-color-border-soft, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: var(--nls-color-surface-soft, rgba(0, 0, 0, 0.03));
}

.support-video-upload-card .writing-input {
  width: 100%;
}

/**
 * Upload + file picker: WebKit/Safari often ignores programmatic input.click() when the
 * input is clipped to 1px. Overlay the real file input on the Upload button so the user
 * activates the picker directly (same gesture the browser trusts).
 */
.support-video-save-area {
  position: relative;
  display: block;
  width: 100%;
}

.support-video-save-area:not(.has-file) .support-video-save-btn {
  pointer-events: none;
}

.support-video-file-input.support-video-file-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  font-size: 1rem;
}

.support-video-save-area.has-file
  .support-video-file-input.support-video-file-overlay {
  display: none;
}

.support-video-file-hint {
  margin: 0;
  min-height: 1.15em;
  font-size: 0.72rem;
  word-break: break-all;
}

.support-video-save-btn {
  width: 100%;
  margin: 0;
  padding: 0.62rem 1rem;
  border: none;
  border-radius: 10px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(165deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.35);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.support-video-save-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.45);
}

.support-video-save-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.support-video-save-btn:disabled {
  cursor: not-allowed;
  opacity: 0.88;
}

.support-video-save-btn.is-loading {
  opacity: 0.92;
}

.support-video-upload-status {
  margin: 0;
  font-size: 0.72rem;
  min-height: 1.15em;
}

.support-video-upload-status.is-error {
  color: var(--nls-color-danger, #b00020);
}

.support-video-picker-list {
  max-height: 220px;
  overflow: auto;
  display: grid;
  gap: 0.35rem;
}

.support-resolve-composer {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  margin-top: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
}

.support-resolve-composer.support-resolve-composer--inline-actions {
  margin-top: 0.35rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-resolve-composer--inline-actions .support-thread-action-section {
  margin: 0;
}

.support-resolve-composer--inline-actions .support-thread-action-section__panel {
  padding-inline: 0;
}

.support-resolve-composer--inline-actions
  .support-thread-action-section
  .courses-hub-expandable__toggle.admin2-hierarchy-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0.45rem;
}

.support-resolve-composer--inline-actions
  .support-thread-action-section
  .courses-hub-expandable__toggle
  .admin2-hierarchy-row__title {
  grid-column: 1;
  grid-row: 1;
}

.support-resolve-composer--inline-actions
  .support-thread-action-section
  .courses-hub-expandable__toggle
  .admin2-hierarchy-row__meta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
}

.support-thread-inline-row > .courses-hub-row-expand {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.support-resolve-composer__field {
  display: grid;
  gap: 0.25rem;
}

.support-resolve-composer__field > span {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.support-resolve-composer__field > textarea,
.support-resolve-composer__field > .support-thread-editor-wrap {
  width: 100%;
}

.support-resolve-composer__field > textarea {
  min-height: 5.2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  padding: 0.52rem 0.56rem;
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}

.support-resolve-composer__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.support-resolve-composer__media-toolbar {
  flex-wrap: wrap;
}

.notices-card__body .notice-embed-image-wrap,
.notice-embed-image-wrap {
  margin: 0.4rem 0;
}

.notices-card__body .notice-embed-image,
.notice-embed-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--nls-color-border-soft);
}

.support-resolve-composer--locked textarea[readonly] {
  resize: none;
  cursor: default;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
}

.support-thread-entry-edit-actions {
  margin-top: 0.45rem;
}

.support-thread-editor-wrap {
  display: grid;
  gap: 0.32rem;
}

.support-thread-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.support-thread-editor-wrap > .writing-note__toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.support-thread-rich-editor {
  width: 100%;
  min-height: 5.2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  padding: 0.52rem 0.56rem;
  font: inherit;
  font-weight: 400;
  line-height: 1.35;
  overflow: auto;
}

.support-thread-rich-editor b,
.support-thread-rich-editor strong {
  font-weight: 700 !important;
}

.support-thread-rich-editor:focus {
  outline: 2px solid
    color-mix(in srgb, var(--nls-color-primary, #2563eb) 45%, white);
  outline-offset: 1px;
}

.support-thread-rich-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--nls-color-text-soft);
  pointer-events: none;
}

.support-thread-rich-editor ul {
  margin: 0.35rem 0 0.35rem 1.1rem;
  padding: 0;
}

.support-modal-form-shell .support-thread-rich-editor--modal {
  min-height: 6.75rem;
}

.notice-composer-player .account-editor-grid {
  align-items: end;
}

.notice-composer-player .account-editor-grid .notice-compose__meta-field {
  grid-column: auto;
}

.notice-composer-player .account-editor-grid__full {
  width: 100%;
  min-width: 0;
}

.notice-composer-player .account-editor-grid__full .support-resolve-composer__field,
.notice-composer-player .account-editor-grid__full .support-thread-editor-wrap,
.notice-composer-player .account-editor-grid__full .support-thread-rich-editor {
  width: 100%;
  max-width: none;
}

.notice-composer-player
  .account-editor-grid
  .account-editor-grid__full.notice-compose__scope-required {
  border: 1px solid #f59e0b;
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}

.notice-compose__toolbar {
  margin: 0.3rem 0 0.45rem;
}

.notice-compose__input {
  width: 100%;
  min-height: 8.2rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  background: var(--nls-color-surface-soft);
  color: var(--nls-color-text);
  padding: 0.65rem 0.7rem;
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}

.notice-compose__input--title {
  min-height: 2.5rem;
  height: 2.5rem;
  resize: none;
}

.notice-compose__input--reason {
  min-height: 5.2rem;
}

.notice-compose-students__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem 0 0.45rem;
}

.notices-card__manage {
  display: inline-block;
  position: relative;
}

.notices-card__title {
  margin: 0 0 0.35rem;
  text-align: left;
}

.notices-card__manage-summary {
  cursor: pointer;
  list-style: none;
}

.notices-card__manage-summary::-webkit-details-marker {
  display: none;
}

.notices-card__manage-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-soft);
  min-width: 11.5rem;
}

.notices-card__manage-action {
  width: 100%;
  justify-content: center;
}

.notices-card__manage-action--danger {
  color: #b91c1c;
}

.notices-card__edit-meta {
  margin: -0.2rem 0 0.45rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.notices-card__edit-history {
  margin: 0.15rem 0 0.55rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
  padding: 0.35rem 0.45rem;
}

.notices-card__edit-history > summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.notices-card__edit-history-row {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--nls-color-border-soft);
  display: grid;
  gap: 0.28rem;
}

.notices-card__edit-history-head,
.notices-card__edit-history-reason {
  margin: 0;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.notices-card__edit-history-body {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface);
  padding: 0.34rem 0.45rem;
  font-size: 0.76rem;
  line-height: 1.3;
}

.notices-card__edit-history-body--previous::before {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--nls-color-text-soft);
  margin-bottom: 0.18rem;
}

.notices-card__edit-history-body--previous::before {
  content: "Previous version";
}

.notice-compose-students__list {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
  max-height: 10rem;
  overflow: auto;
  padding: 0.35rem 0.45rem;
  display: grid;
  gap: 0.2rem;
}

.notice-compose-students__option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.84rem;
}

.notice-compose-students__option input[type="checkbox"] {
  margin: 0;
}

.notice-compose-students__option label {
  margin: 0;
  cursor: pointer;
}

.notice-composer-player .account-editor-grid > button {
  width: 100%;
}

.notice-modal-host[hidden] {
  display: none !important;
}

.notice-modal-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
}

.notice-modal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4rem;
  background: rgba(0, 0, 0, 0.36);
  pointer-events: auto;
}

.notice-modal-card {
  width: min(540px, calc(100% - 2rem));
  background: var(--nls-color-surface);
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  padding: 0.9rem;
  box-shadow: 0 16px 36px var(--nls-shadow-color-soft);
}

.notice-modal-card p {
  margin: 0.45rem 0 0.8rem;
  white-space: pre-wrap;
}

.notice-modal-card .notice-modal-body {
  margin: 0.45rem 0 0.8rem;
  white-space: normal;
}

.notice-modal-card .notice-modal-info {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
}

.notice-modal-card .notice-modal-footer-copy {
  margin: 0.1rem 0 0.7rem;
  font-size: 0.75rem;
  color: var(--nls-color-text-soft);
}

.notice-modal-actions {
  display: flex;
  justify-content: flex-end;
}

:root {
  --dev-overlay-top-safe: 0px;
  --autotest-live-panel-top: 0px;
  --autotest-live-panel-left: 0px;
  /* Mobile: bottom of rail + swipe handle; Support/Dev overlays start below this. */
  --mobile-shell-top-chrome: var(--mobile-rail-anchor-height, 0px);
}

/*
 * Rail chrome: tall strip uses a vertical gradient; the thin swipe row under the rail must
 * use the gradient *bottom* as a solid — reusing the full gradient on a ~0.9rem bar mostly
 * shows the lighter top stop (Background A lighter than Background B).
 */
body[data-layout="standard-lms"] {
  --dev-rail-chrome-surface: var(--nls-color-surface-rail);
  --dev-rail-chrome-seam: var(--nls-color-surface-rail);
}

/* Match top rail / swipe seam to the active page canvas (design tokens). */
body[data-theme="dev-view"][data-layout="standard-lms"] {
  --dev-rail-chrome-surface: var(--nls-color-surface);
  --dev-rail-chrome-seam: color-mix(
    in srgb,
    var(--nls-color-border) 40%,
    var(--nls-color-surface)
  );
}

.support-modal-host[hidden] {
  display: none !important;
}

.support-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
}

/* Mobile standard LMS: keep top nav rail + handle visible above Support / Dev overlays. */
@media (max-width: 900px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .support-modal-host {
    top: var(--mobile-shell-top-chrome, 0px);
  }
}

.support-modal-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: calc(0.75rem + var(--dev-overlay-top-safe)) 0.75rem 0.75rem 0.75rem;
  pointer-events: none;
}

.support-modal-overlay.support-modal-overlay--capture-minimized {
  background: transparent;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.support-modal-card {
  position: relative;
  width: min(460px, 100%);
  height: auto;
  max-height: calc(100vh - 1.5rem);
  overflow: auto;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg) 14%,
    var(--nls-color-surface)
  );
  box-shadow: 0 18px 44px var(--nls-shadow-color-soft);
  padding: 0.9rem;
  display: grid;
  gap: 0.75rem;
  pointer-events: auto;
  align-self: flex-start;
}

.support-modal-card.support-modal-card--capture-minimized {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.support-modal-card--capture-minimized > :not(.support-capture-chip) {
  display: none !important;
}

.support-capture-chip {
  display: none;
}

.support-modal-card--capture-minimized .support-capture-chip {
  display: inline-flex;
  position: relative;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-primary) 35%, transparent);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 78%, #ffffff 22%);
  color: var(--nls-color-primary-ink);
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(8, 12, 22, 0.28);
}

.support-modal-card--capture-minimized .support-capture-chip__icon {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-primary) 38%, transparent);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 82%, #ffffff 18%);
  box-shadow: 0 6px 16px rgba(8, 12, 22, 0.2);
}

.support-capture-chip__icon,
.support-capture-chip__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-capture-chip__spinner {
  animation: support-capture-spin 0.9s linear infinite;
}

@keyframes support-capture-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.support-modal-title {
  margin: 0;
  padding-right: 2.75rem;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--nls-color-primary-ink);
}

/* Match Groups announcement compose: soft primary-tint panel + compose-like controls */
.support-modal-card .support-modal-form-shell.support-resolve-composer {
  margin-top: 0;
  box-sizing: border-box;
}

.support-modal-form-shell .support-form-grid--modal {
  gap: 0.55rem;
}

.support-modal-form-shell .support-form-grid--modal label {
  gap: 0.3rem;
}

.support-modal-form-shell .support-form-field > span,
.support-modal-form-shell .support-resolve-composer__field > span,
.support-modal-form-shell .support-form-screenshot-field > span:first-child {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.support-modal-form-shell .support-form-grid select {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.35rem;
  margin: 0;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text) !important;
  -webkit-text-fill-color: var(--nls-color-text) !important;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.25;
  cursor: pointer;
}

.support-modal-form-shell .support-form-grid select:hover:not([disabled]) {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 35%,
    var(--nls-color-border-soft)
  );
}

.support-modal-form-shell .support-form-grid select:focus-visible {
  border-color: var(--nls-color-primary, #2563eb);
}

.support-modal-form-shell .support-form-grid select[disabled] {
  color: var(--nls-color-text-muted) !important;
  -webkit-text-fill-color: var(--nls-color-text-muted) !important;
  background: var(--nls-color-surface-alt);
  cursor: not-allowed;
  opacity: 1;
}

.support-modal-card .support-modal-actions.admin2-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.support-modal-card .support-modal-actions .course-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.support-modal-card .support-form-context-message[hidden] {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.support-form-screenshot-field {
  display: grid;
  gap: 0.25rem;
}

.support-form-screenshot-preview:not([hidden]) {
  margin-top: 0.35rem;
}

.support-modal-screenshot-actions {
  flex-wrap: wrap;
}

.support-attachment-strip {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.support-attachment-strip__count {
  margin: 0;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.support-attachment-strip__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.support-attachment-chip {
  position: relative;
  width: min(31%, 6rem);
  min-width: 4rem;
  max-width: 6rem;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--nls-color-surface-soft);
}

.support-attachment-chip__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.support-attachment-chip__remove {
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #7f1d1d 55%, transparent);
  background: color-mix(in srgb, #ef4444 86%, #7f1d1d 14%);
  color: #fff;
  font-size: 0.86rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.support-attachment-chip__remove svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor;
  display: block;
}

.support-attachment-chip__remove:hover {
  background: color-mix(in srgb, #dc2626 88%, #7f1d1d 12%);
}

.notice-compose__attachment-strip {
  margin-top: 0.45rem;
}

.support-attachment-chip--readonly {
  margin-top: 0.3rem;
}

.support-thread-body .notice-embed-image-wrap.support-attachment-chip--readonly,
.support-thread-body
  .support-attachment-chip.support-attachment-chip--readonly {
  display: inline-block;
  margin: 0.25rem 0.4rem 0.15rem 0;
  vertical-align: top;
}

.support-attachment-chip__action {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #1f2937 55%, transparent);
  background: color-mix(in srgb, #111827 86%, #0f172a 14%);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.support-attachment-chip__action svg {
  width: 0.76rem;
  height: 0.76rem;
  fill: currentColor;
  display: block;
}

.support-attachment-chip__action--expand {
  top: 0.22rem;
  right: 0.22rem;
}

.support-attachment-chip__action--download {
  bottom: 0.22rem;
  right: 0.22rem;
}

.support-attachment-chip__action:hover {
  background: color-mix(in srgb, #1f2937 88%, #111827 12%);
}

.support-resolve-composer.admin2-announce-compose__composer
  > .panel-message:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
}

.notice-composer-player > .panel-message:empty {
  display: none;
  margin: 0;
  min-height: 0;
  padding: 0;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.support-form-grid label {
  display: grid;
  gap: 0.25rem;
}

.support-form-grid .support-form-grid__full {
  grid-column: 1 / -1;
}

.support-form-grid textarea {
  min-height: 6.5rem;
}

/* Support modal message uses same field styling as thread compose; override generic grid min-height. */
.support-form-grid .support-resolve-composer__field > textarea {
  min-height: 5.2rem;
}

.support-screenshot-preview {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  display: block;
}

.support-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.dev-tools-overlay-host[hidden] {
  display: none !important;
}

.dev-tools-overlay-host {
  position: fixed;
  inset: 0;
  z-index: 1525;
  pointer-events: none;
}

@media (max-width: 900px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-tools-overlay-host {
    top: var(--mobile-shell-top-chrome, 0px);
  }
}

.dev-tools-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: calc(0.75rem + var(--dev-overlay-top-safe)) 0.75rem 0.75rem 0.75rem;
  pointer-events: none;
}

.dev-tools-overlay__card {
  width: min(460px, 100%);
  max-height: calc(100vh - 1.5rem);
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 14px;
  background: var(--nls-color-surface);
  box-shadow: 0 18px 44px var(--nls-shadow-color-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

.dev-tools-overlay__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0.25rem;
  padding: 0.32rem 0.45rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.dev-tools-overlay__title {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--nls-color-primary-ink);
  text-align: center;
}

.dev-tools-overlay__close {
  margin-left: 0;
  position: absolute;
  right: 0.34rem;
  top: 50%;
  transform: translateY(-50%);
}

.dev-tools-overlay__close:hover {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 45%,
    var(--nls-color-border-soft)
  );
}

.dev-tools-overlay__content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.03rem 0.1rem 0.14rem;
}

.dev-tools-overlay__content .module-body {
  display: block !important;
}

.dev-tools-overlay__content .dev-tools {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.05rem;
  gap: 0.14rem;
}

.dev-tools-overlay__content .module-body,
.dev-tools-overlay__content .module-body * {
  font-size: 0.68rem;
}

.dev-tools-overlay__content .dev-build-line {
  margin: 0 0 0.06rem;
  font-size: 0.58rem;
  line-height: 1.2;
}

.dev-tools-overlay__content .dev-section-toggle {
  padding: 0.15rem 0.22rem;
  min-height: 1.24rem;
  border-radius: 7px;
}

.dev-tools-overlay__content .dev-section-title {
  font-size: 0.68rem;
  gap: 0.14rem;
}

.dev-tools-overlay__content .dev-section-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

.dev-tools-overlay__content .dev-section-toggle__icon svg {
  width: 0.5rem;
  height: 0.5rem;
}

.dev-tools-overlay__content .dev-section-body {
  padding: 0.12rem 0.2rem;
  gap: 0.14rem;
  overflow-x: hidden;
}

.dev-tools-overlay__content .dev-launch-subtitle,
.dev-tools-overlay__content .dev-section-subtitle {
  margin: 0.05rem 0 0.02rem;
  font-size: 0.58rem;
}

.dev-tools-overlay__content button,
.dev-tools-overlay__content .ghost,
.dev-tools-overlay__content .course-action,
.dev-tools-overlay__content input,
.dev-tools-overlay__content select,
.dev-tools-overlay__content textarea {
  font-size: 0.68rem;
}

.dev-tools-overlay__content input,
.dev-tools-overlay__content select,
.dev-tools-overlay__content textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 1.2rem;
  padding: 0.08rem 0.2rem;
}

.dev-tools-overlay__content .toggle {
  gap: 0.08rem;
}

.dev-tools-overlay__content .dev-autotest-subtoggles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
}

.dev-tools-overlay__content .dev-toggle-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "counter toggle";
  align-items: center;
  row-gap: 0.08rem;
  column-gap: 0.16rem;
  padding: 0.02rem 0;
}

.dev-tools-overlay__content .dev-toggle-inline__label {
  grid-area: label;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--nls-color-text-muted);
  white-space: nowrap;
}

.dev-tools-overlay__content .dev-toggle-inline__counter-wrap {
  grid-area: counter;
  display: grid;
  grid-template-columns: minmax(2.8rem, 1fr) auto;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 0.14rem;
  row-gap: 0.08rem;
  min-width: 0;
}

.dev-tools-overlay__content .dev-toggle-counter {
  width: 100%;
  min-width: 2.8rem;
  max-width: none;
  text-align: center;
  min-height: 1.08rem;
  padding: 0.02rem 0.06rem;
  font-size: 0.68rem;
  line-height: 1.1;
  appearance: textfield;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.dev-tools-overlay__content .dev-toggle-counter::-webkit-outer-spin-button,
.dev-tools-overlay__content .dev-toggle-counter::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dev-tools-overlay__content .dev-toggle-step-btn {
  min-width: 1.02rem;
  min-height: 0.5rem;
  padding: 0 0.16rem;
  border-radius: 7px;
  border: 1px solid var(--nls-color-border);
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  font-size: 0.68rem;
  line-height: 1;
  cursor: pointer;
}

.dev-tools-overlay__content .dev-toggle-inline__counter-wrap .dev-toggle-step-btn:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
}

.dev-tools-overlay__content .dev-toggle-inline__counter-wrap .dev-toggle-step-btn:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
}

/* Dev Tools counters: keep + on top, - on bottom. */
.dev-tools-overlay__content #dev-autotest-page-wait-plus,
.dev-tools-overlay__content #dev-autotest-audio-plus {
  grid-column: 2;
  grid-row: 1;
}

.dev-tools-overlay__content #dev-autotest-page-wait-minus,
.dev-tools-overlay__content #dev-autotest-audio-minus {
  grid-column: 2;
  grid-row: 2;
}

.dev-tools-overlay__content .dev-toggle-step-btn:hover {
  background: var(--nls-color-surface-muted);
}

.dev-tools-overlay__content .dev-toggle-inline > input[type="checkbox"] {
  grid-area: toggle;
}

.dev-tools-overlay__content #dev-autotest-pause {
  justify-self: start;
  min-height: 1.05rem;
  padding: 0.04rem 0.3rem;
  border-radius: 7px;
  font-size: 0.62rem;
  line-height: 1.05;
}

.dev-tools-overlay__content #dev-page-id-go,
.dev-tools-overlay__content #dev-page-id-display {
  min-height: 1.05rem;
  padding: 0.04rem 0.26rem;
  border-radius: 7px;
  font-size: 0.62rem;
  line-height: 1.05;
}

@media (min-width: 901px) {
  body[data-layout="standard-lms"] .dev-tools-overlay-host {
    inset: auto;
    left: var(--dev-tools-overlay-left, 0px);
    top: var(--dev-tools-overlay-top, 0px);
    width: var(--dev-tools-overlay-width, min(320px, 40vw));
    height: var(--dev-tools-overlay-height, 100vh);
  }

  body[data-layout="standard-lms"] .dev-tools-overlay {
    inset: 0;
    justify-content: flex-start;
    padding: 0;
  }

  body[data-layout="standard-lms"] .dev-tools-overlay__card {
    width: 100%;
    max-height: 100%;
    border-radius: 10px;
  }
}

.overlay-close-icon {
  border: none;
  background: transparent;
  color: var(--nls-color-primary-ink);
  border-radius: 0;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 120ms ease,
    color 120ms ease;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.overlay-close-icon:hover {
  color: #1d4ed8;
}

.overlay-close-icon:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.overlay-close-icon svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

.overlay-close-icon svg path {
  fill: #2563eb !important;
}

.overlay-close-icon__glyph {
  display: inline-block;
  color: var(--nls-color-primary-ink);
  font-size: 1em;
  line-height: 1;
  transform: translateY(-1px);
}

.support-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
}

@media (max-width: 900px) {
  .support-modal-overlay {
    justify-content: center;
    align-items: flex-start;
    padding: calc(0.55rem + var(--dev-overlay-top-safe)) 0.55rem 0.55rem 0.55rem;
  }

  .support-modal-card {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - var(--mobile-shell-top-chrome, 0px) - 1.1rem);
  }

  .dev-tools-overlay {
    justify-content: center;
    padding: calc(0.55rem + var(--dev-overlay-top-safe)) 0.55rem 0.55rem 0.55rem;
  }

  .dev-tools-overlay__card {
    width: 100%;
    max-height: calc(100dvh - var(--mobile-shell-top-chrome, 0px) - 1.1rem);
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .support-modal-card--capture-minimized
    .support-capture-chip__icon {
    top: calc(0.5rem + var(--mobile-shell-top-chrome, 0px));
  }
}

.messages-tools__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.2rem;
}

button[data-panel="messages"] {
  position: relative;
}

button[data-panel="announcements"] {
  position: relative;
}

#sidebar-support-report-btn {
  position: relative;
}

#messages-support-btn {
  position: relative;
}

#messages-announcements-btn {
  position: relative;
}

.support-screenshot-media {
  position: relative;
  display: inline-block;
  width: min(100%, 320px);
  max-width: 100%;
  margin-top: 0.2rem;
}

.support-screenshot-control {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  border: 1px solid #ffffff !important;
  background: #000000 !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  opacity: 1 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.48);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-family:
    "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
    "Noto Sans Symbols", system-ui, sans-serif;
  text-indent: 0;
  letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.support-screenshot-control svg {
  width: 16px;
  height: 16px;
  display: block;
}

.support-screenshot-control__fallback {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
}

/* Use actual button text glyphs; disable pseudo overlays */
.support-screenshot-control::before,
.support-image-preview-close::before {
  content: none !important;
}

/* Shared utility sets text glyphs; keep pseudo overlays off by default. */
.support-screenshot-control--enlarge::before,
.support-screenshot-control--download::before,
.support-image-preview-close::before {
  content: none !important;
}

.support-screenshot-control--enlarge {
  top: 0.4rem;
  right: 0.4rem;
}

.support-screenshot-control--download {
  bottom: 0.4rem;
  right: 0.4rem;
}

/* Backward-compatible placement for earlier control-wrapper markup */
.support-screenshot-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.support-screenshot-controls .support-screenshot-control {
  position: absolute;
  pointer-events: auto;
}

.support-screenshot-controls .support-screenshot-control:first-child {
  top: 0.4rem;
  right: 0.4rem;
}

.support-screenshot-controls .support-screenshot-control:last-child {
  bottom: 0.4rem;
  right: 0.4rem;
}

.support-image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(9, 12, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.support-image-preview-overlay[hidden] {
  display: none !important;
}

.support-image-preview-card {
  position: relative;
  width: calc(100vw - 1rem);
  height: calc(100vh - 1rem);
  border-radius: 12px;
  overflow: hidden;
  background: var(--nls-color-surface);
  border: 1px solid var(--nls-color-border-soft);
  box-shadow: 0 18px 44px var(--nls-shadow-color-soft);
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-image-preview-card img,
.support-image-preview-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: contain;
}

.support-image-preview-close {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  background: rgba(15, 23, 42, 0.78) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
  z-index: 20;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.support-image-preview-close svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
}

.support-image-preview-close:hover {
  background: rgba(15, 23, 42, 0.92) !important;
}

.support-image-preview-close:active {
  transform: translateY(1px);
}

.support-image-preview-close:focus-visible {
  outline: 2px solid var(--nls-color-text);
  outline-offset: 2px;
}

.app-popup-host[hidden] {
  display: none !important;
}

.app-popup-host {
  position: fixed;
  inset: 0;
  z-index: 1600;
}

.app-popup-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--nls-color-text) 38%, transparent);
}

.app-popup-dialog {
  width: min(520px, calc(100% - 1rem));
  border-radius: 12px;
  border: 1px solid
    var(--nls-color-primary-border-strong, var(--nls-color-border-soft));
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light, #eef4ff) 70%,
    var(--nls-color-surface) 30%
  );
  box-shadow: 0 14px 36px var(--nls-shadow-color-soft);
  padding: 0.85rem;
  display: grid;
  gap: 0.58rem;
}

.app-popup-dialog__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
}

.app-popup-dialog__message {
  margin: 0;
  white-space: pre-wrap;
  color: var(--nls-color-text-soft);
}

.app-popup-dialog__input {
  width: 100%;
}

.app-popup-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.app-popup-dialog__actions .app-popup-btn {
  min-height: 1.9rem;
  border-radius: 10px;
  padding: 0.3rem 0.68rem;
  font-size: 0.78rem;
}

body[data-theme="dev-view"] .app-popup-dialog {
  border-color: var(
    --nls-color-primary-border-strong,
    var(--nls-color-border-soft)
  );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light, #e8f0ff) 74%,
    var(--nls-color-surface) 26%
  );
}

.app-popup-dialog__choices {
  display: grid;
  gap: 0.5rem;
  max-height: min(46vh, 360px);
  overflow: auto;
  padding-right: 0.2rem;
}

.app-popup-dialog__choice {
  width: 100%;
  display: grid;
  gap: 0.2rem;
  text-align: left;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  padding: 0.62rem 0.72rem;
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 92%,
    var(--nls-color-text) 8%
  );
  color: var(--nls-color-text);
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease;
}

.app-popup-dialog__choice:hover,
.app-popup-dialog__choice:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 58%,
    var(--nls-color-border-soft)
  );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 86%,
    var(--nls-color-primary) 14%
  );
  box-shadow: 0 8px 16px var(--nls-shadow-color-soft);
}

.app-popup-dialog__choice:active {
  transform: translateY(1px);
}

.app-popup-dialog__choice.is-selected {
  border-color: var(--nls-color-primary);
  background: color-mix(
    in srgb,
    var(--nls-color-primary) 16%,
    var(--nls-color-surface) 84%
  );
}

.app-popup-dialog__choice-label {
  font-weight: 600;
}

.app-popup-dialog__choice-description {
  font-size: 0.86rem;
  color: var(--nls-color-text-soft);
}

@media (max-width: 700px) {
  .app-popup-overlay {
    padding: 0.5rem;
  }

  .app-popup-dialog {
    width: min(420px, calc(100% - 0.5rem));
    padding: 0.7rem;
    gap: 0.5rem;
    border-radius: 11px;
  }

  .app-popup-dialog__title {
    font-size: 0.92rem;
  }

  .app-popup-dialog__message {
    font-size: 0.84rem;
  }

  .app-popup-dialog__actions {
    width: 100%;
    justify-content: stretch;
    gap: 0.35rem;
  }

  .app-popup-dialog__actions .app-popup-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 1.75rem;
    font-size: 0.74rem;
    padding: 0.28rem 0.48rem;
  }
}

button.danger {
  background: var(--nls-color-danger-strong, #b91c1c);
  color: var(--nls-color-surface, #fff);
  border-color: var(--nls-color-danger-strong, #b91c1c);
}

button.danger:hover,
button.danger:focus-visible {
  background: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #b91c1c) 86%,
    var(--nls-color-text) 14%
  );
  border-color: color-mix(
    in srgb,
    var(--nls-color-danger-strong, #b91c1c) 86%,
    var(--nls-color-text) 14%
  );
}

button.warning {
  background: var(--nls-color-warning-bg, #fef3c7);
  color: var(--nls-color-warning-text, #8a6500);
  border-color: var(--nls-color-warning, #c48f00);
}

button.warning:hover,
button.warning:focus-visible {
  background: color-mix(
    in srgb,
    var(--nls-color-warning-bg, #fef3c7) 82%,
    var(--nls-color-warning, #c48f00) 18%
  );
  border-color: color-mix(
    in srgb,
    var(--nls-color-warning, #c48f00) 88%,
    var(--nls-color-text) 12%
  );
}

.account-action__icon {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
}

.account-action__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.account-summary {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.account-summary__identity {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.account-summary__name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.28;
  color: var(--nls-color-text);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.account-role-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.76rem;
  line-height: 1.2;
}

.account-role-line__type {
  color: var(--nls-color-primary-strong, #1d4ed8);
  font-weight: 700;
}

.account-role-line__sep {
  color: var(--nls-color-text-soft, #64748b);
  font-weight: 700;
}

.account-role-line__value {
  color: var(--nls-color-text, #0f172a);
  font-weight: 700;
}

.account-profile-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-bottom: 0.2rem;
}

.account-profile-header > .account-summary__identity {
  flex: 1 1 auto;
  min-width: 0;
}

.account-profile-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  width: auto;
  max-width: none;
  margin-top: 0;
}

/* Log out (right) vs archive / hard-archive (left column), spaced below profile image */
.account-danger-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.account-danger-actions__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.account-danger-actions__right {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 520px) {
  .account-danger-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .account-danger-actions__right {
    margin-left: 0;
    align-self: flex-end;
  }
}

.inline-user-identity {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.inline-user-identity__name {
  overflow-wrap: anywhere;
}

.account-summary button {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0.12rem;
}

@media (max-width: 900px) {
  .account-profile-logout__label {
    display: inline;
    font-size: 0.78rem;
  }
}

.account-groups {
  border-top: 1px solid var(--nls-color-border-soft);
  padding-top: 0.5rem;
  display: grid;
  gap: 0.35rem;
}

.account-groups__title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.account-groups__list {
  font-size: 0.75rem;
  line-height: 1.35;
}

.account-groups__tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.account-groups__tree ul {
  list-style: none;
  margin: 0.25rem 0 0 0.85rem;
  padding: 0 0 0 0.55rem;
  border-left: 1px solid var(--nls-color-border-soft);
  display: grid;
  gap: 0.22rem;
}

.account-groups__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.account-groups__name {
  color: var(--nls-color-text);
  overflow-wrap: anywhere;
}

.account-groups__meta {
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.role-tools {
  display: grid;
  gap: 0.6rem;
}

/* Tighten side-panel vertical rhythm uniformly across tabs. */
.panel.side-panel .module-body[data-panel-body] {
  margin-top: 0;
  padding-top: 0.2rem;
  gap: 0.45rem;
  padding-bottom: 0.2rem;
}

.panel.side-panel .module-body[data-panel-body] > section {
  margin: 0;
}

.dev-build-line {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--nls-color-text-muted);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.panel.side-panel .panel-header {
  margin-bottom: 0;
}

.panel.side-panel .panel-title {
  line-height: 1.2;
}

.panel.side-panel .panel-toggle {
  min-height: 2.1rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.panel.side-panel .panel-message {
  min-height: 0;
}

.panel.side-panel .panel-message:empty {
  display: none;
}

.role-tools .dev-section-title {
  margin: 0.35rem 0 0;
}

.admin-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}

.panel.side-panel[data-panel-content="admin"] .admin-tools-grid > button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* Standardize sidebar button alignment across all panels. */
.panel.side-panel .module-body .course-action {
  justify-content: flex-start;
  text-align: left;
}

.panel.side-panel .module-body .course-action__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

/* Non-Dev-Tools sidebar actions: smaller card-like button language. */
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  .course-action,
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.secondary,
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.ghost {
  border: 1px solid var(--nls-color-primary-border-strong);
  border-radius: 10px;
  padding: 0.28rem 0.62rem;
  min-height: 1.9rem;
  font-size: 0.76rem;
  line-height: 1.15;
  justify-content: flex-start;
  text-align: left;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 82%,
    var(--nls-color-surface) 18%
  );
  color: var(--nls-color-primary-ink);
}

.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  .course-action__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

.course-action__icon {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.course-action__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  .course-action:is(:hover, :focus-visible),
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.secondary:is(:hover, :focus-visible),
.panel.side-panel[data-panel-content]:not([data-panel-content="developer"])
  .module-body
  button.ghost:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

/* Dev Tools primary actions only (not utility controls). */
.panel.side-panel[data-panel-content="developer"] .dev-actions > button,
.panel.side-panel[data-panel-content="developer"]
  .progress-devtools-actions
  > button {
  border: 1px solid var(--nls-color-primary-border-strong);
  border-radius: 10px;
  padding: 0.28rem 0.62rem;
  min-height: 1.9rem;
  font-size: 0.76rem;
  line-height: 1.15;
  justify-content: flex-start;
  text-align: left;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 82%,
    var(--nls-color-surface) 18%
  );
  color: var(--nls-color-primary-ink);
}

.panel.side-panel[data-panel-content="developer"]
  .dev-actions
  > button:is(:hover, :focus-visible),
.panel.side-panel[data-panel-content="developer"]
  .progress-devtools-actions
  > button:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary);
  background: var(--nls-color-primary-bg);
  color: var(--nls-color-primary-strong);
}

/* Dev tools sections use the same expandable row language as Admin2 node view. */
.panel.side-panel[data-panel-content="developer"] .dev-tools {
  display: grid;
  gap: 0.45rem;
}

.panel.side-panel[data-panel-content="developer"] .dev-tools__section {
  display: grid;
  gap: 0;
}

.panel.side-panel[data-panel-content="developer"] .dev-section-toggle {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  background: var(--nls-color-surface);
  padding: 0.42rem 0.55rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  text-align: left;
}

.panel.side-panel[data-panel-content="developer"]
  .dev-section-toggle[aria-expanded="true"] {
  border-color: var(--nls-color-primary-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.panel.side-panel[data-panel-content="developer"] .dev-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}

.panel.side-panel[data-panel-content="developer"] .dev-section-toggle__icon {
  color: var(--nls-color-text-soft);
}

.panel.side-panel[data-panel-content="developer"] .dev-section-body {
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary-border-strong) 40%,
      var(--nls-color-border-soft) 60%
    );
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 32%,
    var(--nls-color-surface) 68%
  );
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.45rem;
}

/* Prevent label truncation when button copy is long in narrow sidebars. */
.panel.side-panel .module-body button {
  white-space: normal;
  overflow-wrap: anywhere;
}

.admin-tool-group {
  display: grid;
  gap: 0.35rem;
}

.teacher-classes-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.classes-action-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.35rem 0 0.55rem;
}

.classes-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--nls-text-muted, #6b7280);
}

.classes-inline-check input[type="checkbox"] {
  margin: 0;
}

.manage-groups-archive-filters {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 82%, #ffffff 18%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--nls-color-surface-alt) 82%, #ffffff 18%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent);
}

.manage-groups-archive-filters .account-editor-note {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.manage-groups-archive-filters .panel-message {
  margin: 0;
  max-width: 65ch;
}

.manage-groups-archive-filters__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.5rem;
}

.manage-groups-archive-filters .classes-inline-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.1rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 80%, #ffffff 20%);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 92%,
    var(--nls-color-primary-bg-light) 8%
  );
  color: var(--nls-color-text-soft);
  font-size: 0.82rem;
  line-height: 1.2;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.manage-groups-archive-filters .classes-inline-check:hover {
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary) 42%,
    var(--nls-color-border-soft)
  );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 28%,
    var(--nls-color-surface) 72%
  );
}

.manage-groups-archive-filters .classes-inline-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.manage-groups-archive-filters
  .classes-inline-check
  input[type="checkbox"]:checked
  + span {
  color: var(--nls-color-primary-strong);
  font-weight: 700;
}

.manage-groups-archive-filters .classes-inline-check.is-forced-context {
  border-style: dashed;
  border-color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 50%,
    transparent
  );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 52%,
    var(--nls-color-surface) 48%
  );
}

.allowed-domains-dashboard {
  display: grid;
  gap: 0.6rem;
}

.allowed-domains-dashboard .dev-section-title {
  margin: 0;
}

.allowed-domains-dashboard .panel-message {
  margin: 0;
  max-width: 65ch;
}

.allowed-domains-dashboard__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: center;
}

.allowed-domains-dashboard__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--nls-color-text-soft);
  font-size: 0.82rem;
  line-height: 1.2;
  transition: color 120ms ease;
}

.allowed-domains-dashboard__option input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.allowed-domains-dashboard__option input[type="checkbox"]:checked + span {
  color: var(--nls-color-primary-strong);
  font-weight: 700;
}

.classes-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  font-size: 0.78rem;
  padding: 0.24rem 0.45rem;
  text-align: left;
  white-space: normal;
}

.classes-action-bar .classes-action-btn {
  justify-content: flex-start !important;
  text-align: left !important;
}

.classes-action-bar .course-action {
  justify-content: flex-start !important;
  text-align: left !important;
}

.classes-action-bar .course-action__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

.class-teacher-assignment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.class-teacher-assignment-row__label {
  font-weight: 600;
}

.class-teacher-assignment-row__select {
  min-width: min(26rem, 100%);
  max-width: 100%;
}

.class-teacher-assignment-row__status {
  font-size: 0.76rem;
}

#classes-hub-message:empty {
  display: none;
}

#classes-hub-message {
  min-height: 1.15rem;
  margin: 0 0 0.3rem;
  transition: opacity 140ms ease;
}

#progress-courses-message:empty {
  display: none;
}

.teacher-class-btn {
  width: 100%;
  text-align: left;
}

.teacher-class-btn--class-hierarchy {
  display: grid;
  justify-items: start;
  gap: 0.12rem;
  padding: 0.42rem 0.56rem;
  border-radius: 10px;
}

.class-hierarchy-row {
  display: block;
  width: 100%;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.class-hierarchy-row--level-1 {
  font-size: 0.69rem;
  font-weight: 700;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 68%,
    var(--nls-color-text) 32%
  );
}

.class-hierarchy-row--level-2 {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, #117b95 62%, var(--nls-color-text) 38%);
}

.class-hierarchy-row--level-3 {
  font-size: 0.67rem;
  font-weight: 650;
  color: color-mix(in srgb, #6b7280 70%, var(--nls-color-text) 30%);
}

.class-hierarchy-row--level-4 {
  font-size: 0.66rem;
  font-weight: 640;
  color: color-mix(in srgb, #8b5cf6 66%, var(--nls-color-text) 34%);
}

.class-hierarchy-row--parent-distributor {
  font-size: 0.69rem;
  font-weight: 700;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 68%,
    var(--nls-color-text) 32%
  );
}

.class-hierarchy-row--parent-customer {
  font-size: 0.68rem;
  font-weight: 650;
  color: color-mix(in srgb, #117b95 62%, var(--nls-color-text) 38%);
}

.class-hierarchy-row--parent-campus {
  font-size: 0.67rem;
  font-weight: 650;
  color: color-mix(in srgb, #6b7280 70%, var(--nls-color-text) 30%);
}

.class-hierarchy-row--parent-faculty {
  font-size: 0.66rem;
  font-weight: 640;
  color: color-mix(in srgb, #8b5cf6 66%, var(--nls-color-text) 34%);
}

.class-hierarchy-row--parent-default {
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--class {
  margin-top: 0.06rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.class-hierarchy-row--rollup {
  margin-top: 0.06rem;
  font-size: 0.67rem;
  font-weight: 650;
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--teacher {
  display: inline-flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nls-color-text-soft);
}

.class-hierarchy-row--archived {
  width: fit-content;
  margin-top: 0.08rem;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #d4a83a 46%, transparent);
  background: color-mix(in srgb, #fff1a8 78%, #ffffff 22%);
  color: color-mix(in srgb, #7a5a00 82%, var(--nls-color-text) 18%);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.class-hierarchy-row--metaid {
  font-size: 0.63rem;
  font-weight: 560;
  color: color-mix(in srgb, var(--nls-color-text-soft) 84%, #ffffff 16%);
}

.manage-user-bulk-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

.manage-user-bulk-row input[type="checkbox"] {
  margin: 0;
  align-self: center;
}

.manage-user-bulk-row .teacher-class-btn {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.manage-user-bulk-row.is-inactive .teacher-class-btn {
  background: #fff8db;
  border-color: #e6d58a;
}

.manage-user-bulk-row.is-hard-archived .teacher-class-btn {
  background: #fee2e2;
  border-color: #fca5a5;
}

.manage-user-bulk-row .teacher-class-btn.is-archived {
  background: #fff8db;
  border-color: #e6d58a;
}

.manage-user-bulk-row .teacher-class-btn.is-hard-archived {
  background: #fee2e2;
  border-color: #fca5a5;
}

.manage-user-bulk-row.is-selected .teacher-class-btn {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 1px;
}

.manage-user-status-chip {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.09rem 0.35rem;
  border-radius: 999px;
  border: 1px solid #e6d58a;
  background: #fff8db;
  color: #7a4a00;
}

.manage-user-status-chip--hard-archived {
  border-color: #fca5a5;
  background: #fee2e2;
  color: #7f1d1d;
}

.manage-groups-bulk-row {
  --hierarchy-indent-step: 0.62rem;
  --hierarchy-indent: calc(
    var(--hierarchy-depth, 0) * var(--hierarchy-indent-step)
  );
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.42rem;
  width: calc(100% - var(--hierarchy-indent));
  margin-left: var(--hierarchy-indent);
}

.manage-groups-bulk-row__checkbox {
  margin: 0;
  align-self: center;
}

.manage-groups-bulk-row.is-selected .teacher-class-btn--hierarchy {
  outline: 2px solid var(--nls-color-primary, #2563eb);
  outline-offset: 1px;
}

.manage-groups-bulk-row.is-inactive .teacher-class-btn--hierarchy {
  background: #fff8db;
  border-color: #e6d58a;
}

.manage-groups-announce-audience-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.manage-groups-announce-audience {
  margin-top: 0.25rem;
}

.admin2-announce-compose {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: min(58vh, 480px);
  overflow-y: auto;
  padding-right: 0.2rem;
  margin-top: 0.25rem;
}

.admin2-announce-compose__composer {
  margin-top: 0;
}

.admin2-announce-compose__audience-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.admin2-announce-compose__anchor-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

/* Match “Everyone in scope” lozenge: filled primary pill, one per selected scope root. */
.admin2-announce-compose__scope-pill {
  flex: 0 1 auto;
  max-width: min(100%, 16rem);
  overflow-wrap: anywhere;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--nls-color-primary, #2563eb);
  background: var(--nls-color-primary, #2563eb);
  color: var(--nls-color-on-primary, #fff);
}

.admin2-announce-compose__role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-soft);
}

.admin2-announce-compose__role-row .notice-compose-students__option {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  grid-template-columns: unset;
}

.inactive-user-avatar {
  background: #f5f0d2;
  color: #8a7b2d;
}

.inactive-user-avatar__icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.inactive-user-avatar__icon svg {
  width: 72%;
  height: 72%;
  fill: currentColor;
}

.manage-user-section-label {
  margin: 0.25rem 0 0.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nls-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-groups__item--class-detail {
  display: grid;
  justify-items: start;
  gap: 0.12rem;
}

.account-class-line {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.account-class-line--parent-1 {
  font-size: 0.68rem;
  font-weight: 700;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 66%,
    var(--nls-color-text) 34%
  );
}

.account-class-line--parent-2 {
  font-size: 0.67rem;
  font-weight: 650;
  color: color-mix(in srgb, #117b95 62%, var(--nls-color-text) 38%);
}

.account-class-line--parent-3 {
  font-size: 0.66rem;
  font-weight: 640;
  color: color-mix(in srgb, #6b7280 72%, var(--nls-color-text) 28%);
}

.account-class-line--parent-4 {
  font-size: 0.65rem;
  font-weight: 630;
  color: color-mix(in srgb, #8b5cf6 64%, var(--nls-color-text) 36%);
}

.account-class-line--class {
  margin-top: 0.05rem;
  font-size: 0.8rem;
  font-weight: 760;
  color: var(--nls-color-text);
}

.account-class-line--teacher {
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--nls-color-text-soft);
}

.account-class-line__teacher-icon {
  width: 0.78rem;
  height: 0.78rem;
  display: inline-flex;
  flex: 0 0 auto;
}

.account-class-line__teacher-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.teacher-class-btn--hierarchy {
  --hierarchy-indent-step: 0.62rem;
  --hierarchy-indent: calc(
    var(--hierarchy-depth, 0) * var(--hierarchy-indent-step)
  );
  width: calc(100% - var(--hierarchy-indent));
  margin-left: var(--hierarchy-indent);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 0;
  padding: 0.32rem 0.46rem;
  white-space: normal;
  border-radius: 10px;
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 70%,
    #ffffff 30%
  );
  background: color-mix(in srgb, var(--nls-color-surface) 84%, #ffffff 16%);
}

.teacher-class-btn--hierarchy-selectable {
  width: 100%;
  margin-left: 0;
}

.teacher-class-btn--hierarchy.teacher-class-btn--archived {
  border-color: color-mix(
    in srgb,
    #d4a83a 42%,
    var(--nls-color-border-soft) 58%
  );
  background: color-mix(in srgb, #fff3bf 68%, var(--nls-color-surface) 32%);
}

.teacher-classes-list--hierarchy {
  gap: 0.3rem;
}

@media (max-width: 900px) {
  .panel.side-panel .module-body[data-panel-body] {
    padding-top: 0.16rem;
    gap: 0.4rem;
    padding-bottom: 0.12rem;
  }
}

.teacher-class-btn--hierarchy:hover {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 40%, #ffffff 60%);
}

.teacher-class-btn--hierarchy.teacher-class-btn--archived:hover {
  border-color: color-mix(
    in srgb,
    #c58b12 58%,
    var(--nls-color-primary-border-strong) 42%
  );
  background: color-mix(in srgb, #ffe08a 72%, var(--nls-color-surface) 28%);
}

.teacher-class-btn--hierarchy.is-active {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(in srgb, var(--nls-color-primary-bg) 64%, #ffffff 36%);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--nls-color-primary) 18%, transparent);
}

.teacher-class-btn--hierarchy.teacher-class-btn--archived.is-active {
  border-color: color-mix(
    in srgb,
    #c58b12 54%,
    var(--nls-color-primary-border-strong) 46%
  );
  background: color-mix(in srgb, #f8d96a 64%, var(--nls-color-primary-bg) 36%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4a83a 24%, transparent);
}

.hierarchy-row {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-items: start;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
}

.hierarchy-row__main {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.hierarchy-row__type-inline {
  color: var(--nls-color-primary-ink);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.hierarchy-row__name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--nls-color-text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
}

.hierarchy-row__meta {
  min-width: 0;
  color: var(--nls-color-text-soft);
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.hierarchy-row__status {
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
  width: fit-content;
  padding: 0.08rem 0.34rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.hierarchy-row__status--archived {
  border-color: color-mix(in srgb, #d4a83a 46%, transparent);
  background: color-mix(in srgb, #fff1a8 78%, #ffffff 22%);
  color: color-mix(in srgb, #7a5a00 82%, var(--nls-color-text) 18%);
}

.hierarchy-row__status--context {
  border-color: color-mix(in srgb, #5f6f85 40%, transparent);
  background: color-mix(in srgb, #e8edf3 80%, #ffffff 20%);
  color: color-mix(in srgb, #31455d 84%, var(--nls-color-text) 16%);
}

.hierarchy-row__status-icon {
  width: 0.78rem;
  height: 0.78rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.hierarchy-row__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.22rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 80%, #ffffff 20%);
  color: var(--nls-color-text-muted);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #ffffff 30%);
  font-size: 0.66rem;
  font-weight: 700;
}

.hierarchy-row__count:empty {
  display: none;
}

@media (max-width: 900px) {
  .teacher-class-btn--hierarchy {
    --hierarchy-indent-step: 0.45rem;
    padding: 0.3rem 0.42rem;
  }

  .manage-groups-bulk-row {
    --hierarchy-indent-step: 0.45rem;
  }

  .hierarchy-row__name {
    font-size: 1rem;
  }
}

.teacher-roster-list {
  display: grid;
  gap: 0.4rem;
}

.teacher-roster-list--expanded {
  gap: 0.34rem;
}

.teacher-roster-btn {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  text-align: left;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}

.teacher-roster-btn:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
}

.teacher-roster-btn__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.teacher-roster-btn__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.teacher-roster-btn__meta {
  font-size: 0.74rem;
  color: var(--nls-color-text-muted);
}

.teacher-roster-btn__sub {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.teacher-course-list {
  display: grid;
  gap: 0.35rem;
}

.teacher-course-btn {
  width: 100%;
  text-align: left;
}

.teacher-student-node {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  overflow: hidden;
}

/* Match class-row expand/collapse chrome: toggle + panel own the shape. */
.teacher-student-node.teacher-student-node-expandable {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.teacher-student-node__summary {
  list-style: none;
  cursor: pointer;
  padding: 0.42rem 0.48rem;
  display: grid;
  gap: 0.14rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.teacher-student-node-expandable__toggle.teacher-student-node__summary {
  box-sizing: border-box;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  overflow: hidden;
}

.teacher-student-node:not(.is-expanded)
  .teacher-student-node-expandable__toggle.teacher-student-node__summary {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}

.teacher-student-node.is-expanded .teacher-student-node-expandable__toggle.teacher-student-node__summary {
  border-color: var(--nls-color-primary-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.teacher-student-node__summary::-webkit-details-marker {
  display: none;
}

.teacher-student-node__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nls-color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.teacher-student-node__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}

.teacher-student-node__meta {
  font-size: 0.75rem;
  color: var(--nls-color-text-muted);
}

.teacher-student-node__sub {
  font-size: 0.73rem;
  color: var(--nls-color-text-soft);
}

.teacher-student-node__metrics {
  justify-self: start;
  margin-left: 0;
  justify-content: flex-start;
}

.teacher-student-node__status {
  justify-self: start;
}

.classes-student-courses-eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nls-color-text-soft);
  margin: 0 0 0.35rem;
}

.teacher-student-node__courses {
  border-top: 1px solid var(--nls-color-border-soft);
  padding: 0.5rem 0.6rem 0.5rem;
  display: grid;
  gap: 0.42rem;
}

.teacher-student-node-expandable__panel .teacher-student-node__courses {
  border-top: 0;
  padding: 0;
}

/* Remove inherited inner gutter so course rows align with student row edges. */
.teacher-student-node-expandable__panel {
  padding: 0;
}

.teacher-student-node-expandable__panel .progress-history-list {
  gap: 0.12rem;
}

.teacher-student-node-expandable__panel .progress-history-item {
  margin: 0;
}

.teacher-course-progress {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  background: var(--nls-color-surface);
  padding: 0.4rem 0.5rem;
  display: grid;
  gap: 0.32rem;
  position: relative;
}

.teacher-social-post-flag-btn {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.teacher-social-post-flag-btn > svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.support-social-context {
  display: grid;
  gap: 0.35rem;
}

.support-social-context__audio {
  width: 100%;
}

.teacher-class-summary {
  margin-bottom: 0.35rem;
}

.teacher-class-view > .progress-player-detail__title {
  margin-bottom: 0.45rem;
}

.teacher-class-container {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.28rem 0.32rem 0.34rem;
}

@media (max-width: 900px) {
  .teacher-class-container {
    padding: 0.2rem 0.22rem 0.26rem;
  }

  .teacher-student-node__summary {
    padding: 0.38rem 0.42rem;
  }
}

.manage-group-archived-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.58rem;
  border: 1px solid color-mix(in srgb, #d4a83a 52%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #fff1a8 82%, #ffffff 18%);
  color: color-mix(in srgb, #6f5100 82%, var(--nls-color-text) 18%);
}

.manage-group-archived-banner--hard {
  border-color: color-mix(in srgb, #991b1b 48%, transparent);
  background: color-mix(in srgb, #fee2e2 80%, #ffffff 20%);
  color: color-mix(in srgb, #7f1d1d 84%, var(--nls-color-text) 16%);
}

.manage-group-archived-banner__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  margin-top: 0.08rem;
  display: inline-flex;
}

.manage-group-archived-banner__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.manage-group-archived-banner__text {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  line-height: 1.2;
}

.manage-group-archived-banner__text strong {
  font-size: 0.76rem;
}

.manage-group-archived-banner__text span {
  font-size: 0.7rem;
}

.teacher-course-progress--student {
  margin-bottom: 0.35rem;
}

.teacher-course-progress__title {
  font-weight: 700;
  color: var(--nls-color-text);
}

.teacher-social-feed-hint {
  margin-bottom: 0.35rem;
}

.teacher-social-question-title-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  min-width: 0;
}

.teacher-social-course-label {
  font-size: 0.66rem;
  line-height: 1.15;
  color: var(--nls-color-text-soft);
  font-weight: 500;
}

.teacher-social-question-title {
  line-height: 1.22;
}

.teacher-course-progress--social-post {
  position: relative;
}

.teacher-social-post-dev-actions {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  z-index: 9999;
}

.teacher-social-post-dev-action {
  min-width: 3.25rem;
  height: 1.75rem;
  padding: 0 0.45rem;
  border: 2px solid #111 !important;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #111 !important;
  background: #ffea00 !important;
  cursor: pointer;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition:
    color 120ms ease,
    opacity 120ms ease;
}

.teacher-social-post-dev-action:hover {
  color: #111;
  opacity: 0.95;
}

.teacher-social-post-dev-action--danger {
  background: #ff4d4f !important;
  color: #fff !important;
}

.teacher-social-post-dev-action--danger:hover {
  color: #fff;
  opacity: 1;
}

.teacher-social-post-dev-action > svg {
  width: 0.85rem;
  height: 0.85rem;
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
  fill: #dc2626 !important;
}

.teacher-social-post-dev-action > svg path {
  fill: #dc2626 !important;
}

.teacher-course-progress__stats {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.teacher-course-progress__metrics {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.teacher-course-progress .progress-open-inline {
  justify-self: start;
}

.teacher-course-progress__expanded {
  margin-top: 0.15rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--nls-color-border-soft);
}

.teacher-course-progress__expanded .progress-player-detail__tree {
  margin: 0;
}

.teacher-course-progress__bar {
  width: 120px;
  height: 0.44rem;
  border-radius: 999px;
  background: var(--nls-color-border-soft);
  overflow: hidden;
}

.teacher-course-progress__bar-fill {
  display: block;
  height: 100%;
  background: var(--nls-color-primary);
}

.teacher-activity-list {
  display: grid;
  gap: 0.28rem;
}

.teacher-activity-row {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  padding: 0.35rem 0.45rem;
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
}

.teacher-activity-row__id {
  overflow-wrap: anywhere;
  color: var(--nls-color-text);
}

.teacher-activity-row__score {
  color: var(--nls-color-text-muted);
  white-space: nowrap;
}

.design-sources-toggle {
  margin-top: 0.25rem;
}

.design-sources-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.5rem;
}

.design-sources-copy-all {
  white-space: nowrap;
  flex: 0 0 auto;
}

.design-sources {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.design-sources[hidden] {
  display: none !important;
}

.design-sources__section {
  border: 1px solid var(--nls-color-border);
  border-radius: 10px;
  overflow: hidden;
}

.design-sources__heading {
  background: var(--nls-color-surface-muted);
  color: var(--nls-color-text);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
}

.design-sources__row {
  padding: 0.35rem 0.6rem;
  background: var(--nls-color-surface);
  border-top: 1px solid var(--nls-color-border-soft);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.design-sources__text {
  flex: 1;
}

.design-sources__copy {
  appearance: none;
  border: 1px solid var(--nls-color-border);
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text-muted);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.62rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}

.design-sources__copy:hover {
  border-color: var(--nls-color-primary-border-strong);
  color: var(--nls-color-text);
}

#auth-message {
  color: var(--nls-color-text);
}

#auth-message.is-error,
.courses-hub-status.is-error {
  color: var(--nls-color-danger-strong);
}

.progress-dashboard {
  margin-top: 0;
}

.courses-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.courses-add-button {
  width: 100%;
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  gap: 0.42rem;
  min-height: 1.9rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--nls-color-primary-ink);
  border-color: var(--nls-color-primary-border-strong);
  border-style: solid;
  border-radius: 10px;
  padding: 0.28rem 0.62rem;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 82%,
    var(--nls-color-surface) 18%
  );
}

.courses-add-button:hover {
  border-color: var(--nls-color-primary);
  color: var(--nls-color-primary-strong);
  background: var(--nls-color-primary-bg);
}

.courses-add-button__icon {
  width: 0.9rem;
  height: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.courses-add-button .courses-add-button__icon {
  order: -1;
  margin-left: 0;
  margin-right: 0.35rem;
}

.courses-add-button__icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.dev-section-subtitle {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--nls-color-text);
}

.progress-courses-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-history-button {
  width: 100%;
  margin-top: 0.55rem;
}

.progress-history-button[hidden] {
  display: none !important;
}

.progress-history-button .courses-add-button__icon {
  order: -1;
}

.course-actions--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.courses-player-view {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.courses-catalog-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.courses-catalog-section {
  display: grid;
  gap: 0.45rem;
}

.courses-catalog-section-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nls-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.courses-catalog-section-list {
  display: grid;
  gap: 0.5rem;
}

.courses-my-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.courses-my-row .progress-chip {
  flex-shrink: 0;
}

.courses-my-course-button {
  flex: 1;
}

.courses-my-resume-btn {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
}

.courses-my-resume-btn svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.courses-catalog-item {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: stretch;
  gap: 0.45rem;
}

.courses-catalog-media-column {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 100%;
}

.courses-catalog-head {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: #ffffff;
  padding: 0.6rem 0.75rem;
}

.courses-catalog-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nls-color-text);
}

.courses-catalog-media {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--nls-color-border-soft);
  background: color-mix(in srgb, var(--nls-color-surface) 88%, #fff 12%);
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.courses-catalog-media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #ffffff;
  padding: 0.25rem;
}

.courses-catalog-item > .courses-catalog-pushdown {
  grid-column: 1 / -1;
}

.courses-catalog-media-column > .course-actions {
  margin-top: auto;
}

.courses-catalog-kicker {
  display: inline-flex;
  align-self: flex-start;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nls-color-primary, #1d4ed8);
}

.courses-draft-meta {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
}

.courses-catalog-pushdown {
  margin-top: 0.45rem;
  border: 1px dashed var(--nls-color-border-soft);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--nls-color-surface);
}

.courses-catalog-pushdown[hidden] {
  display: none !important;
}

.courses-catalog-pushdown--purchase {
  padding: 0.55rem;
}

.courses-payment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.courses-payment-tile {
  min-height: 124px;
  border-radius: 10px;
  border: 1px solid var(--nls-color-border-soft);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nls-color-surface) 80%, #fff 20%),
    var(--nls-color-surface-alt)
  );
  padding: 0.5rem;
  display: grid;
  align-content: start;
  gap: 0.35rem;
  opacity: 0.96;
  filter: none;
  position: relative;
  overflow: hidden;
}

.courses-payment-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  pointer-events: none;
}

.courses-payment-tile__brand {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--nls-color-text);
}

.courses-payment-tile__logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.courses-payment-tile__logo {
  display: block;
  width: 100%;
  max-width: 180px;
  height: 54px;
  object-fit: contain;
  border-radius: 10px;
  background: #ffffff;
}

.courses-payment-tile__flag {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-height: 32px;
  object-fit: contain;
}

.courses-payment-tile--qris .courses-payment-tile__logo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  align-items: center;
  column-gap: 0.45rem;
}

.courses-payment-tile--qris .courses-payment-tile__flag {
  height: 54px;
  max-height: 54px;
  max-width: 82px;
  justify-self: center;
  align-self: center;
}

.courses-payment-tile__sub {
  font-size: 0.7rem;
  color: var(--nls-color-text-muted);
  margin-bottom: 0.1rem;
}

.courses-payment-tile__meta {
  font-size: 0.62rem;
  line-height: 1.2;
  color: var(--nls-color-text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.courses-payment-tile--gpay {
  border-color: color-mix(in srgb, #5f6368 28%, var(--nls-color-border-soft));
}

.courses-payment-tile--card {
  border-color: color-mix(in srgb, #1a73e8 22%, var(--nls-color-border-soft));
}

.courses-payment-tile--paypal {
  border-color: color-mix(in srgb, #003087 22%, var(--nls-color-border-soft));
}

.courses-payment-tile--qris {
  border-color: color-mix(in srgb, #00a86b 28%, var(--nls-color-border-soft));
}

.courses-payment-tile--unavailable {
  opacity: 0.78;
}

.courses-payment-tile--unavailable .course-action {
  opacity: 0.9;
  cursor: not-allowed;
}

.courses-payment-tile--unavailable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(243, 244, 246, 0.42);
  pointer-events: none;
  z-index: 1;
}

.courses-payment-tile--unavailable > * {
  position: relative;
  z-index: 2;
}

.courses-payment-tile__watermark {
  position: absolute;
  left: -32px;
  right: -32px;
  top: 50%;
  transform: translateY(-50%) rotate(-18deg);
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, #111827 72%, transparent);
  background: color-mix(in srgb, #f3f4f6 85%, transparent);
  border-top: 1px dashed color-mix(in srgb, #111827 35%, transparent);
  border-bottom: 1px dashed color-mix(in srgb, #111827 35%, transparent);
  padding: 0.18rem 0;
  pointer-events: none;
  z-index: 4;
}

.courses-payment-tile .course-action {
  width: 100%;
  justify-content: center;
}

.courses-payment-tile__qr {
  display: grid;
  gap: 0.35rem;
  align-items: start;
}

.courses-payment-tile__qr-code {
  width: 100%;
  aspect-ratio: 1;
  max-width: 96px;
  border-radius: 8px;
  border: 1px solid
    color-mix(in srgb, #111827 18%, var(--nls-color-border-soft));
  background:
    linear-gradient(
      90deg,
      #111827 0 12%,
      transparent 12% 18%,
      #111827 18% 30%,
      transparent 30% 36%,
      #111827 36% 52%,
      transparent 52% 58%,
      #111827 58% 70%,
      transparent 70% 76%,
      #111827 76% 100%
    ),
    linear-gradient(
      #111827 0 12%,
      transparent 12% 18%,
      #111827 18% 30%,
      transparent 30% 36%,
      #111827 36% 52%,
      transparent 52% 58%,
      #111827 58% 70%,
      transparent 70% 76%,
      #111827 76% 100%
    ),
    linear-gradient(135deg, rgba(0, 168, 107, 0.08), rgba(17, 24, 39, 0.03));
  background-size:
    18px 18px,
    18px 18px,
    auto;
  background-position:
    0 0,
    0 0,
    center;
  background-color: #ffffff;
  box-shadow: inset 0 0 0 6px #ffffff;
}

.courses-payment-tile__qr-label {
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--nls-color-text-soft);
}

.course-action.is-active {
  border-color: var(--nls-color-primary-border-strong);
  background: var(--nls-color-primary-bg-light);
  color: var(--nls-color-primary-strong);
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1px var(--nls-color-primary-border-strong),
    0 1px 0 rgba(0, 0, 0, 0.03);
}

.courses-hub-inline-actions .course-action.is-active {
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 72%,
    var(--nls-color-surface) 28%
  );
}

@media (max-width: 560px) {
  .courses-catalog-item {
    grid-template-columns: 1fr;
  }

  .courses-catalog-media-column > .course-actions {
    margin-top: 0;
  }

  .courses-catalog-media__image {
    height: 100%;
    max-height: none;
  }

  .courses-payment-grid {
    grid-template-columns: 1fr;
  }
}

.course-action--muted {
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft);
}

.courses-info-html,
.courses-info-lead,
.courses-info-bullets,
.courses-info-images {
  margin: 0;
}

.courses-info-html {
  color: var(--nls-color-text);
}

.courses-info-html img,
.courses-info-images img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
}

.courses-info-bullets {
  padding-left: 1.2rem;
  color: var(--nls-color-text);
}

.courses-info-images {
  display: grid;
  gap: 0.5rem;
}

.courses-player-back {
  display: flex;
  width: fit-content;
  align-self: flex-start;
  margin-left: 0 !important;
  margin-right: auto;
  margin-top: 0.3rem;
}

.courses-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.courses-progress-label {
  font-size: 0.82rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.courses-progress-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.courses-progress-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--nls-color-border);
  background: var(--nls-color-surface-alt);
}

.courses-progress-dot.is-filled {
  border-color: var(--nls-color-primary-border-strong, #1d4ed8);
  background: var(--nls-color-primary, #1d4ed8);
}

.course-action:disabled {
  opacity: 1;
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft);
  background: var(--nls-color-surface-muted, var(--nls-color-surface-alt));
  cursor: not-allowed;
}

.course-action[hidden] {
  display: none !important;
}

.progress-devtools-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem;
}

.progress-devtools-stack[hidden] {
  display: none !important;
}

.progress-devtools-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.progress-devtools-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.progress-devtools-actions button {
  width: 100%;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 7px;
  border-width: 1px;
  white-space: nowrap;
}

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

.dev-hard-archive-inline {
  margin-top: 1.25rem;
}

.dev-hard-archive-panel .dev-hard-archive-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dev-hard-archive-output {
  margin-top: 0.75rem;
  max-height: 14rem;
  overflow: auto;
  font-size: 0.75rem;
}

.dev-hard-archive-revert {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.bulk-row-tools-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
}

.bulk-row-tools-inline .progress-inline-input {
  width: 5.5rem;
  flex: 0 0 5.5rem;
}

.bulk-row-tools-inline button {
  width: auto;
  flex: 0 0 auto;
}

.bulk-row-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
}

.bulk-row-delete-btn:hover {
  color: #962d22;
}

.bulk-row-delete-btn:active {
  color: #7c241b;
}

.bulk-row-delete-btn .course-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.bulk-row-delete-btn .course-action__icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.bulk-row-delete-cell {
  text-align: center;
  vertical-align: middle;
  width: 2.2rem;
}

.teacher-progress-table tbody tr:only-child .bulk-row-delete-btn {
  display: none !important;
}

.progress-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
}

.progress-field span {
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
  min-width: 0;
  line-height: 1.2;
}

.progress-field input,
.progress-field select {
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  min-width: 0;
}

.create-class-course-list {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  padding: 0.45rem;
  max-height: none;
  overflow: visible;
  display: grid;
  gap: 0.35rem;
  background: var(--nls-color-surface-alt);
}

.create-class-course-group-title {
  margin: 0.2rem 0 0.05rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--nls-color-text-soft);
}

.create-class-course-group-title:first-child {
  margin-top: 0;
}

.create-class-course-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
}

.create-class-course-group-header .create-class-course-group-title {
  margin: 0;
}

.create-class-course-group-toggle {
  margin: 0;
  white-space: nowrap;
}

.create-class-course-group-toggle--master {
  justify-self: end;
}

.create-class-course-option {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  text-align: left;
}

.create-class-course-option input[type="checkbox"] {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.create-class-course-option span {
  display: inline !important;
  line-height: 1.35;
}

.progress-maintenance {
  margin-top: 0.25rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--nls-color-border-soft);
}

.progress-maintenance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.progress-maintenance-actions button {
  width: 100%;
  border-radius: 7px;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.2rem 0.45rem;
  border-width: 1px;
}

.domain-mapping-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.domain-mapping-toolbar button {
  width: 100%;
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
  border-radius: 7px;
  border-width: 1px;
}

.domain-mapping-results {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  padding: 0.5rem;
  background: var(--nls-color-surface-alt);
  display: grid;
  gap: 0.5rem;
}

.domain-mapping-results__summary {
  display: grid;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
}

.domain-mapping-history h4 {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
}

.domain-mapping-history ul {
  margin: 0.35rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.progress-toggle {
  margin-top: 0.35rem;
}

.progress-toggle span {
  font-size: 0.84rem;
  line-height: 1.2;
}

@media (max-width: 520px) {
  .progress-devtools-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .progress-devtools-actions button:nth-child(3) {
    grid-column: 1 / -1;
  }

  .progress-maintenance-actions {
    grid-template-columns: 1fr;
  }
}

.progress-course-card {
  border: 1px solid var(--nls-color-primary-border-strong);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 82%,
    var(--nls-color-surface) 18%
  );
  padding: 0.28rem 0.62rem;
}

.progress-course-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--nls-color-primary-ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  cursor: pointer;
  padding: 0;
  min-height: 1.25rem;
  font-size: 0.76rem;
  line-height: 1.15;
}

.progress-course-button:is(:hover, :focus-visible) .progress-course-title {
  color: var(--nls-color-primary-strong);
  text-decoration: none;
}

.progress-course-title {
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.progress-course-meta {
  font-size: 0.75rem;
  color: var(--nls-color-text-muted);
}

.progress-course-stats {
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.progress-node {
  border: 1px solid var(--nls-color-border);
  border-radius: 10px;
  background: var(--nls-color-surface);
  margin-top: 0;
  padding: 0.4rem 0.55rem;
}

.progress-player-detail__tree .progress-node[data-depth="0"] {
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 18%,
    var(--nls-color-surface) 82%
  );
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.progress-player-detail__tree > .progress-node[data-depth="0"]:first-child {
  border-top: 1px solid var(--nls-color-border-soft);
}

.progress-player-detail__tree .progress-node[data-depth="1"] {
  background: color-mix(in srgb, #eef6ff 45%, var(--nls-color-surface) 55%);
}

.progress-player-detail__tree .progress-node[data-depth="2"] {
  background: color-mix(in srgb, #eef8f1 38%, var(--nls-color-surface) 62%);
}

.progress-player-detail__tree .progress-node[data-depth="3"],
.progress-player-detail__tree .progress-node[data-depth="4"] {
  background: color-mix(in srgb, #fff8ec 35%, var(--nls-color-surface) 65%);
}

.progress-node--expandable {
  padding: 0;
  overflow: hidden;
}

.progress-node__details.menu-expandable-item {
  border: none;
  border-radius: inherit;
  background: transparent;
  padding: 0;
  overflow: visible;
}

.progress-node__summary {
  cursor: pointer;
  list-style: none;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0.4rem 0.55rem 0.4rem 1.28rem;
  position: relative;
}

.progress-node__summary::-webkit-details-marker {
  display: none;
}

.progress-node__summary::before {
  content: "▸";
  position: absolute;
  left: 0.48rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: color-mix(
    in srgb,
    var(--nls-color-primary-strong) 65%,
    var(--nls-color-text) 35%
  );
  text-shadow: 0 0 0.01px currentColor;
  transition: color 140ms ease;
}

.progress-node__details[open] > .progress-node__summary {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.progress-node__details[open] > .progress-node__summary::before {
  content: "▾";
  color: var(--nls-color-primary-strong);
}

@media (max-width: 900px) {
  .progress-node__summary::before {
    font-size: 1.08rem;
    left: 0.44rem;
  }
}

.progress-node__panel.menu-expandable-panel {
  margin-top: 0;
  border: 0;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 0.12rem 0 0 0.7rem;
  background: transparent;
  position: relative;
}

.progress-node__panel.menu-expandable-panel::before {
  display: none;
}

.progress-node__panel.menu-expandable-panel > .progress-node:first-child {
  margin-top: 0;
}

.progress-node__panel.menu-expandable-panel > .progress-node {
  position: relative;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
}

.progress-node__panel.menu-expandable-panel > .progress-node::before {
  content: "";
  position: absolute;
  left: -0.48rem;
  top: -0.12rem;
  bottom: -0.12rem;
  border-left: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 88%, var(--nls-color-primary) 12%);
  opacity: 0.95;
}

.progress-node__panel.menu-expandable-panel > .progress-node::after {
  content: "";
  position: absolute;
  left: -0.48rem;
  top: 0.98rem;
  width: 0.42rem;
  border-top: 1px solid color-mix(in srgb, var(--nls-color-border-soft) 88%, var(--nls-color-primary) 12%);
  opacity: 0.95;
}

.progress-node__panel.menu-expandable-panel > .progress-node:last-child::before {
  bottom: calc(50% - 0.02rem);
}

/* Start the page connector a little below the chevron for cleaner hierarchy. */
.progress-node--kind-activity
  > .progress-node__details[open]
  > .progress-node__panel.menu-expandable-panel
  > .progress-node::before {
  top: 0.18rem;
}

.progress-node__title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.progress-node__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex: 0 0 auto;
  align-self: flex-start;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.progress-node__stats {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: 220px;
}

.progress-open-inline {
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  border-radius: 999px;
  padding: 0.08rem 0.52rem;
  font-size: 0.68rem;
  cursor: pointer;
}

.progress-open-inline:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 72%,
    var(--nls-color-surface) 28%
  );
}

.progress-node__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.45rem;
  row-gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.progress-node__kind {
  display: none;
}


.progress-node__label {
  font-size: 1rem;
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  flex-wrap: wrap;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-node__label-text {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-player-detail__tree > .progress-node + .progress-node {
  margin-top: 0;
}

.progress-node__panel.menu-expandable-panel > .progress-node + .progress-node {
  margin-top: 0;
  border-top: 1px solid var(--nls-color-border-soft);
}

.progress-node:not(.progress-node--expandable) .progress-node__title {
  padding-left: 0.73rem;
}

.progress-node__main .progress-open-inline {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

@media (min-width: 901px) {
  .progress-node__main {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    flex-wrap: wrap;
  }

  .progress-node__main .progress-open-inline {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    margin-left: 0;
  }
}

.progress-node__bar-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.progress-node__bar-label {
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
}

.progress-node__bar {
  width: 110px;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--nls-color-border-soft);
  overflow: hidden;
}

.progress-node__bar-fill {
  display: block;
  height: 100%;
  background: var(--nls-color-primary, #1d4ed8);
}

.progress-node__bar-text {
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
}

.progress-node__metrics {
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
  white-space: nowrap;
}

.progress-node__meta {
  margin-top: 0.2rem;
  font-size: 0.74rem;
  color: var(--nls-color-text-muted);
}

.progress-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  border: 1px solid color-mix(in srgb, var(--nls-color-primary) 50%, var(--nls-color-border-soft) 50%);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.68rem;
  color: var(--nls-color-primary-strong);
  background: color-mix(in srgb, var(--nls-color-primary-bg-light) 32%, var(--nls-color-surface) 68%);
  white-space: nowrap;
  box-sizing: border-box;
  width: 3.85rem;
  justify-content: center;
}

.progress-score-chip__icon {
  display: inline-flex;
  width: 0.72rem;
  height: 0.72rem;
  color: var(--nls-color-primary-strong);
}

.progress-score-chip__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.progress-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--nls-color-border);
  padding: 0.1rem 0.5rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  box-sizing: border-box;
  width: 13.75ch;
  text-align: center;
  overflow: hidden;
}

.progress-chip--completed {
  border-color: var(--nls-color-success-strong, #16803b);
  color: var(--nls-color-success-strong, #16803b);
}

.progress-chip--in-progress {
  border-color: var(--nls-color-warning-strong, #a15a00);
  color: var(--nls-color-warning-strong, #a15a00);
}

.progress-chip--not-started,
.progress-chip--info {
  color: var(--nls-color-text-muted);
}

.progress-chip--not-enrolled {
  color: var(--nls-color-text-muted);
  border-color: var(--nls-color-border-soft);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 75%, #fff 25%);
}

/* Courses hub: teaching access — icon + label, not a pill/button */
.courses-hub-access-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--nls-color-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.courses-hub-access-label__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
  color: var(--nls-color-text-muted);
}

.courses-hub-access-label__icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.courses-hub-access-label__text {
  min-width: 0;
}

.progress-target {
  margin-top: 0.25rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  padding: 0.3rem 0.45rem;
  width: 100%;
  text-align: left;
  color: var(--nls-color-text);
}

.progress-target:is(:hover, :focus-visible) {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 68%,
    var(--nls-color-surface) 32%
  );
}

.progress-tree {
  margin-top: 0.35rem;
}

.progress-dashboard--devtools {
  margin-top: 0.9rem;
  border-top: 1px solid var(--nls-color-border-soft);
  padding-top: 0.55rem;
}

.progress-player-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem;
}

/* Hub/list content envelope: centered column that can shrink when side menus take space. */
.progress-player-detail.courses-player-view {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

/* Player views run without title/subtitle header strip. */
.progress-player-detail__title,
.progress-player-detail__subtitle-row,
.progress-player-detail__subtitle {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.progress-player-detail__title {
  margin: 0;
  font-size: 1.1rem;
}

.progress-player-detail__subtitle {
  margin: 0.35rem 0 0.8rem;
  color: var(--nls-color-text-muted);
  font-size: 0.78rem;
}

.progress-player-detail__subtitle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.2rem 0 0.8rem;
}

.progress-player-detail__subtitle-row .progress-player-detail__subtitle {
  margin: 0;
}

.progress-player-detail__subtitle-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 900px) {
  .progress-player-detail__subtitle-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.progress-player-detail--admin2-compact .progress-player-detail__title {
  font-size: 0.92rem;
  line-height: 1.15;
  color: var(--nls-color-text-soft);
  font-weight: 600;
  margin-bottom: 0.18rem;
}

.progress-player-detail--admin2-compact .progress-player-detail__subtitle {
  margin-top: 0.12rem;
  margin-bottom: 0.46rem;
  font-size: 0.74rem;
}

.progress-player-detail__subtitle--meta {
  margin-top: 0.18rem;
  margin-bottom: 0.46rem;
  color: var(--nls-color-text-soft);
  font-size: 0.72rem;
}

.progress-player-detail__course-rollup {
  margin: 0 0 0.55rem;
  display: flex;
  justify-content: flex-end;
}

.progress-player-detail__tree {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.progress-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.progress-history-item {
  display: grid;
  gap: 0;
  margin: 0 0 0.35rem;
}

.progress-history-toggle {
  width: 100%;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  box-sizing: border-box;
}

.progress-history-toggle:hover {
  border-color: var(--nls-color-primary-border-strong);
}

.progress-history-toggle__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nls-color-text);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-history-toggle__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.progress-history-toggle__meta {
  font-size: 0.76rem;
  color: var(--nls-color-text-soft);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.progress-history-toggle__stats {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  align-self: flex-start;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

@media (max-width: 900px) {
  .progress-history-toggle__stats {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
}

.progress-history-panel {
  margin-top: 0;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary-border-strong) 42%,
      var(--nls-color-border-soft) 58%
    );
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 0.45rem 0.55rem;
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 24%,
    var(--nls-color-surface) 76%
  );
}

.progress-history-toggle[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

#progress-output {
  max-height: 260px;
  overflow: auto;
}

.progress-player-detail__payload {
  margin: 0;
  max-height: min(70vh, 760px);
  overflow: auto;
}

.progress-player-detail__actions {
  margin-top: 0.55rem;
  display: flex;
  justify-content: flex-start;
}

.progress-player-detail__copy {
  min-width: 88px;
}

.admin2-shell {
  display: grid;
  gap: 0.75rem;
}

.admin2-inline-create-distributor,
.admin2-inline-create-node {
  margin-top: 0.55rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: transparent;
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.45rem;
}

.admin2-inline-create-distributor[hidden],
.admin2-inline-create-node[hidden] {
  display: none;
}

.admin2-inline-create-distributor__title,
.admin2-inline-create-node__title {
  margin: 0;
  font-size: 0.9rem;
}

.admin2-inline-create-distributor__hint,
.admin2-inline-create-node__hint {
  margin: 0;
  display: none;
}

.admin2-inline-create-node .panel-message:empty {
  display: none;
}

.admin2-inline-create-distributor__field,
.admin2-inline-create-node__field {
  display: grid;
  gap: 0.22rem;
}

.admin2-inline-create-distributor__domains,
.admin2-inline-create-node__domains {
  display: grid;
  gap: 0.32rem;
}

.admin2-inline-create-distributor__domains-label,
.admin2-inline-create-node__domains-label {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-muted);
  font-weight: 600;
}

.admin2-inline-create-distributor__domains-grid,
.admin2-inline-create-node__domains-grid {
  display: grid;
  gap: 0.28rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.admin2-inline-create-distributor__domains-grid .classes-inline-check,
.admin2-inline-create-node__domains-grid .classes-inline-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
  line-height: 1.2;
}

.admin2-inline-create-distributor__domains--single-row,
.admin2-inline-create-node__domains--single-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
}

.admin2-inline-create-distributor__domains--single-row
  .admin2-inline-create-distributor__domains-grid,
.admin2-inline-create-node__domains--single-row
  .admin2-inline-create-node__domains-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
}

.admin2-inline-create-distributor__actions,
.admin2-inline-create-node__actions {
  margin-top: 0.12rem;
}

.admin2-shell .admin2-actions .course-action,
.admin2-shell .classes-action-bar .course-action {
  background: transparent;
}

.admin2-shell .admin2-actions .course-action:is(:hover, :focus-visible),
.admin2-shell .classes-action-bar .course-action:is(:hover, :focus-visible) {
  background: transparent;
}

.admin2-shell .admin2-actions .course-action.is-active,
.admin2-shell .classes-action-bar .course-action.is-active {
  background: transparent;
}

.admin2-shell .admin2-actions .course-action:disabled,
.admin2-shell .classes-action-bar .course-action:disabled {
  background: transparent;
}

.admin2-shell .classes-inline-check:has(input[type="checkbox"]),
.admin2-shell .create-class-course-option:has(input[type="checkbox"]),
.admin2-shell .notice-compose-students__option:has(input[type="checkbox"]),
.admin2-shell .dev-hard-archive-check:has(input[type="checkbox"]),
.admin2-shell .admin2-hierarchy-controls:has(input[type="checkbox"]) {
  border: none;
  border-radius: 10px;
  background: transparent;
  padding: 0.38rem 0.52rem;
}

.admin2-shell .classes-inline-check:has(input[type="checkbox"]):hover,
.admin2-shell .create-class-course-option:has(input[type="checkbox"]):hover,
.admin2-shell .notice-compose-students__option:has(input[type="checkbox"]):hover,
.admin2-shell .dev-hard-archive-check:has(input[type="checkbox"]):hover,
.admin2-shell .admin2-hierarchy-controls:has(input[type="checkbox"]):hover {
  border: none;
  background: transparent;
}

.admin2-shell
  .manage-groups-archive-filters
  .classes-inline-check:has(input[type="checkbox"]),
.admin2-shell
  .manage-groups-archive-filters
  .classes-inline-check:has(input[type="checkbox"]):hover {
  border: none;
}

.admin2-shell .admin2-search-filters .admin2-search-checkbox-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  text-align: left !important;
}

.admin2-shell .admin2-search-filters .admin2-search-checkbox-row input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.admin2-shell__header {
  display: grid;
  gap: 0.25rem;
}

.admin2-shell__title {
  margin: 0;
  font-size: 0.98rem;
}

.admin2-shell__subtitle {
  margin: 0;
  color: var(--nls-color-text-muted);
  font-size: 0.78rem;
}

.admin2-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.55rem 0.7rem;
}

.admin2-context__label {
  font-size: 0.74rem;
  color: var(--nls-color-text-soft);
}

.admin2-context__value {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  color: var(--nls-color-text);
}

/* Player context strip (e.g. Add course flow); hub uses Details column only. */
.admin2-context.courses-hub-context-rich {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.courses-hub-context__title {
  display: block;
  width: 100%;
}

.courses-hub-context__body {
  display: grid;
  gap: 0.2rem;
}

.courses-hub-context__line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--nls-color-text);
}

.courses-hub-context__line.muted {
  color: var(--nls-color-text-muted);
}

/* Courses hub: scrollable body — course title + info + progress live here. */
.courses-hub-detail__body {
  flex: 1;
  min-height: 0;
  max-height: min(52vh, 480px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.courses-hub-detail__course-title {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--nls-color-text);
}

.courses-hub-detail__line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--nls-color-text);
}

.courses-hub-detail__line.muted {
  color: var(--nls-color-text-muted);
}

.courses-hub-detail-courseinfo {
  display: grid;
  gap: 0.35rem;
}

.courses-hub-detail-courseinfo .info-page-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--nls-color-text);
}

.courses-hub-detail-courseinfo .info-page-body,
.courses-hub-detail-courseinfo .info-page-lead {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--nls-color-text);
}

.courses-hub-detail-courseinfo .info-page-bullets {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.76rem;
  line-height: 1.4;
}

.courses-hub-detail-courseinfo .question-line--with-media-card + .info-page-lead,
.courses-hub-detail-courseinfo .question-line--with-media-card + .info-page-bullets,
.courses-hub-detail-courseinfo .question-line + .info-page-lead,
.courses-hub-detail-courseinfo .question-line + .info-page-bullets {
  margin-top: 0.28rem;
}

.courses-hub-detail-courseinfo .info-page-lead + .info-page-bullets {
  margin-top: 0.08rem;
}

.courses-hub-detail-courseinfo .question-line img,
.courses-hub-detail-courseinfo .question-line video {
  max-width: 100%;
  max-height: 160px;
  border-radius: 8px;
}

/* Courses > Course info: let media frame hug actual image size (no fixed placeholder box). */
.courses-hub-detail-courseinfo .question-line--with-media-card {
  align-items: flex-start;
}

.courses-hub-detail-courseinfo .question-line--with-media-card .question-media-inline--card {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

.courses-hub-detail-courseinfo
  .question-line--with-media-card
  .question-media-inline--card
  .question-image--inline
  .asset-wrap,
.courses-hub-detail-courseinfo
  .question-line--with-media-card
  .question-media-inline--card
  .question-image--inline
  .asset-image {
  width: auto;
}

.courses-hub-detail-courseinfo
  .question-line--with-media-card
  .question-media-inline--card
  .question-image--inline
  .asset-image__img {
  width: auto;
  max-width: min(100%, 260px);
  height: auto;
}

.courses-hub-detail__progress {
  margin-top: 0.15rem;
}

.courses-hub-detail__progress .courses-progress-label {
  font-size: 0.72rem;
}

.courses-hub-detail__progress .courses-progress-dot {
  width: 0.42rem;
  height: 0.42rem;
}

.courses-hub-list-scroll {
  max-height: min(60vh, 520px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: 0.15rem;
}

.menu-expandable-item {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.42rem;
  overflow: hidden;
}

.menu-expandable-toggle {
  width: 100%;
}

.menu-expandable-panel {
  margin-top: 0.42rem;
}

.courses-hub-row-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0 0 0.35rem;
}

.courses-hub-row-item .menu-expandable-panel {
  margin-top: 0;
}

/* Courses rows should be the expandable container (no extra outer wrapper chrome). */
.courses-hub-row-item.menu-expandable-item {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
}

.admin2-hierarchy-row__title.courses-hub-row__title--with-role {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.courses-hub-row__role-badge {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  color: var(--nls-color-text-muted);
}

.courses-hub-row__role-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

.courses-hub-row__title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.courses-hub-expandable__toggle {
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft) 70%,
    var(--nls-color-primary) 30%
  );
  background: var(--nls-color-surface);
}

/* Courses list rows using quick-access markup should mirror Home spacing/chrome. */
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-border-soft) 62%,
      var(--nls-color-primary) 38%
    );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 42%,
    var(--nls-color-surface) 58%
  );
  box-shadow: 0 1px 0 color-mix(in srgb, var(--nls-shadow-color) 14%, transparent);
  border-radius: 12px;
  padding: 0.42rem 0.5rem;
  gap: 0.6rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item.dev-surface-brief__started-item--with-mini {
  padding: 0 0.5rem 0 0;
  gap: 0.24rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  > .course-action {
  display: none;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover {
  position: relative;
  align-self: stretch;
  flex: 0 0 3.1rem;
  width: 3.1rem;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  border-right: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-border-soft) 52%,
      var(--nls-color-primary) 48%
    );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 48%,
    var(--nls-color-surface) 52%
  );
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover-placeholder {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__mini-cover-badge {
  display: none;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.42rem 0;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.32rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-subject-line {
  width: 100%;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-secondary {
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-secondary-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
  .dev-surface-brief__started-detail-row
  .dev-surface-brief__started-detail-secondary-item
  + .dev-surface-brief__started-detail-secondary-item::before {
  content: "·";
  margin: 0 0.32rem;
}

body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item:hover,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item:focus-visible,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item.is-active {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg) 72%,
    var(--nls-color-surface) 28%
  );
}

/* Courses + Progress row parity: title/meta left, progress stats right. */
.courses-hub-expandable__toggle.admin2-hierarchy-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__title {
  grid-column: 1;
  grid-row: 1;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__meta {
  grid-column: 1;
  grid-row: 2;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .progress-history-toggle__stats {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  margin-left: 0;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
}

@media (max-width: 900px) {
  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail {
    width: 100%;
  }

  body[data-theme="dev-view"]
    button.admin2-hierarchy-row.courses-hub-expandable__toggle.dev-surface-brief__started-item
    .dev-surface-brief__started-detail-row
    .dev-surface-brief__started-detail-secondary-item
    + .dev-surface-brief__started-detail-secondary-item::before {
    content: "";
    margin: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.courses-hub-row--no-meta {
    grid-template-rows: auto auto;
    row-gap: 0.14rem;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0.18rem;
    position: relative;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__title {
    grid-column: 1;
    grid-row: 1;
    max-width: calc(100% - 6.8rem);
    min-height: 1.25rem;
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row .admin2-hierarchy-row__meta {
    grid-column: 1;
    grid-row: 2;
    max-width: calc(100% - 6.8rem);
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.courses-hub-row--no-meta
    .progress-history-toggle__stats {
    grid-row: 2;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row .progress-history-toggle__stats {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
    align-self: start;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.25rem;
    margin-left: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row
    .progress-history-toggle__stats
    .progress-node__bar-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row
    .progress-history-toggle__stats
    .progress-chip {
    grid-column: 2;
    grid-row: 1;
    min-width: 15ch;
    width: 15ch;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row
    .progress-history-toggle__stats
    .progress-score-chip {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    min-width: 0;
    width: fit-content;
    padding: 0.08rem 0.32rem;
    font-size: 0.66rem;
    justify-content: center;
  }

  .progress-node__title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 0.35rem;
    row-gap: 0.2rem;
    align-items: start;
  }

  .progress-node__main {
    grid-column: 1;
    grid-row: 1;
  }

  .progress-node__actions {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
  }

  .progress-node__stats {
    grid-column: 1 / span 2;
    grid-row: 2;
    min-width: 0;
    width: 100%;
  }

  .progress-node__stats .progress-node__bar-wrap {
    width: 100%;
  }

  .progress-node__stats .progress-node__bar {
    flex: 1 1 auto;
    width: auto;
  }
}

.courses-hub-row-item.is-expanded .courses-hub-expandable__toggle {
  border-color: var(--nls-color-primary-border-strong);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.courses-hub-row-item:not(.is-expanded) .courses-hub-expandable__toggle {
  border-bottom-left-radius: 9px !important;
  border-bottom-right-radius: 9px !important;
}

.courses-hub-row-expand {
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary-border-strong) 40%,
      var(--nls-color-border-soft) 60%
    );
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 35%,
    var(--nls-color-surface) 65%
  );
  border-top: 0;
  border-radius: 0 0 8px 8px;
  padding: 0.45rem 0.5rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.courses-hub-expandable__content {
  display: grid;
  gap: 0.35rem;
}

/* Progress rows should align with the course panel edges (no extra inset). */
.courses-hub-row-expand .progress-player-detail__tree,
.courses-hub-row-expand .progress-tree {
  margin-inline: -0.5rem;
}

.courses-hub-row-expand .courses-hub-detail__body {
  max-height: none;
  overflow-x: visible;
  overflow-y: visible;
  padding-right: 0;
}

.courses-hub-row-expand .courses-hub-inline-actions {
  margin-top: 0.35rem;
}

.courses-hub-row-expand .courses-hub-inline-actions .course-action {
  background: var(--nls-color-surface);
}

/* Universal Add course on narrow viewports (Actions card is below long Details). */
.courses-hub-mobile-add-bar {
  display: block;
  margin-top: 0.2rem;
  padding-top: 0;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.courses-hub-mobile-add-bar__btn {
  width: auto;
  justify-content: center;
}

.courses-hub-status.is-error {
  color: var(--nls-color-danger, #c62828);
}

.courses-hub-secondary-actions {
  margin-top: 0.35rem;
}

.admin2-courses-add-backbar {
  padding: 0.5rem 0.65rem;
}

.admin2-courses-add-backbar .course-action {
  margin: 0;
}

/* Narrow viewports: list-first workspace; context + detail + actions open as second step with Back. */
.admin2-mobile-context-backbar {
  display: none;
}

@media (max-width: 900px) {
  .admin2-shell--responsive-mobile[data-mobile-phase="list"] > .admin2-context {
    display: none !important;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="list"]
    .admin2-mobile-pane--detail,
  .admin2-shell--responsive-mobile[data-mobile-phase="list"]
    .admin2-mobile-pane--actions {
    display: none !important;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="detail"]
    .admin2-mobile-pane--list {
    display: none !important;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="detail"]
    > .admin2-mobile-context-backbar {
    display: block;
  }

  .admin2-shell--responsive-mobile[data-mobile-phase="detail"]
    > .admin2-context {
    display: flex !important;
  }

  /* Courses hub: put Actions above Details so Start/Progress/Unenroll stay visible. */
  .admin2-shell--courses-hub[data-mobile-phase="detail"]
    .admin2-grid--courses-hub {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    align-items: stretch;
  }

  .admin2-shell--courses-hub[data-mobile-phase="detail"]
    .admin2-grid--courses-hub
    > .admin2-mobile-pane--actions {
    order: -1;
  }

  .courses-hub-mobile-add-bar {
    display: block;
  }

  .courses-hub-mobile-add-bar__btn {
    width: auto;
  }

  .course-action--hub-add-desktop {
    display: none !important;
  }

  /* Course info (hub + Add course): no nested scroll — phone/page scroll only. */
  .courses-hub-detail__body {
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    flex: 0 1 auto;
    min-height: auto;
  }

  .admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-detail {
    min-height: auto;
  }

  /*
   * Course list column: same as detail — #player-main scrolls; no inner list scroller.
   * (Avoids double scroll: player column + list box on mobile list phase.)
   */
  .admin2-shell--courses-hub .courses-hub-list-scroll {
    max-height: none;
    overflow-y: visible;
  }

  .admin2-shell--courses-hub
    .admin2-card--courses-hub-list
    .courses-hub-list-scroll {
    flex: 0 1 auto;
    min-height: auto;
  }

  .admin2-shell--courses-hub[data-mobile-phase="list"]
    .admin2-card.admin2-card--courses-hub-list {
    min-height: auto;
  }

}

/*
 * Courses/Classes player hubs: list + detail grow with content; `#player-main` is the single scroller.
 * Prevent nested scrolling in hierarchy/context cards (both list and detail panes).
 */
.admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-list,
.admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-detail {
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-shell--classes-hub .admin2-card--classes-hub-main {
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-shell--courses-hub
  .admin2-card--courses-hub-list
  .courses-hub-list-scroll,
.admin2-shell--courses-hub .courses-hub-detail__body {
  flex: 0 1 auto;
  min-height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding-right: 0;
}

.admin2-shell--classes-hub .admin2-card--classes-hub-main .courses-hub-list-scroll {
  flex: 0 1 auto;
  min-height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding-right: 0;
}

.admin2-shell--classes-hub .admin2-card--classes-hub-main {
  min-height: auto;
  min-width: 0;
}

/* Any list/detail pane using admin2 mobile-pane layout should never become an inner scroller. */
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--list,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail {
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-card.admin2-mobile-pane.admin2-mobile-pane--list
  .courses-hub-list-scroll,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--list .inbox-feed-scroll,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail
  .courses-hub-detail__body,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail
  .classes-hub-detail__body,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail .inbox-detail-body,
.admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail .notices-list {
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  padding-right: 0;
}

/* Classes hub: single full-width column; strip outer card chrome (matches Groups / Courses). */
.admin2-grid--classes-hub {
  grid-template-columns: minmax(0, 1fr);
}

.admin2-shell--classes-hub .admin2-grid--classes-hub > .admin2-card--classes-hub-main {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.admin2-shell--classes-hub .classes-hub-aux-mount {
  min-width: 0;
}

.admin2-shell--classes-hub .classes-hub-aux-mount:not(:empty) {
  margin-top: 0.35rem;
}

.classes-hub-class-row__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 0.7rem;
  row-gap: 0.08rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    border-radius 160ms ease;
}

.classes-hub-class-row__titles {
  display: grid;
  grid-template-rows: auto auto;
  align-items: flex-start;
  gap: 0.08rem;
  min-width: 0;
  width: 100%;
  grid-column: 1;
  grid-row: 1 / span 2;
}

.classes-hub-class-row__teacher-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  max-width: 100%;
  justify-content: flex-start;
  text-align: left;
  grid-column: 1;
  grid-row: 3;
}

.courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
  .classes-hub-class-row__teacher-meta {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  justify-self: start;
  max-width: 100%;
}

.classes-hub-class-row__rollups {
  display: contents;
}

.classes-hub-class-row__rollup {
  display: inline-flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}

.classes-hub-class-row__rollup--progress {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

.classes-hub-class-row__rollup--score {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: start;
}

.classes-hub-class-row__rollup--counts {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: start;
}

.classes-hub-class-row__progress-wrap {
  min-width: 168px;
}

.classes-hub-class-row__progress-wrap .progress-node__bar {
  width: 110px;
}

.classes-hub-class-row__progress-wrap .progress-node__bar-text {
  font-size: 0.68rem;
}

.classes-hub-class-row__rollup--score .progress-score-chip {
  font-size: 0.68rem;
}

.classes-hub-class-row__rollup--counts .progress-node__meta {
  font-size: 0.67rem;
  color: var(--nls-color-text-soft);
  text-align: right;
}

.classes-hub-class-row__metric-text {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0.78rem;
  font-size: 0.68rem;
  color: var(--nls-color-text-soft);
  text-align: right;
}

.classes-hub-class-row__loading-spinner {
  width: 0.72rem;
  height: 0.72rem;
  display: inline-block;
  border-radius: 50%;
  border: 1.6px solid rgba(27, 111, 255, 0.24);
  border-top-color: rgba(27, 111, 255, 1);
  animation: support-capture-spin 0.75s linear infinite;
  vertical-align: middle;
}

.classes-hub-class-row__rollup--counts .progress-node__meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 0.78rem;
}

@media (max-width: 900px) {
  .classes-hub-class-row__panel {
    padding: 0.06rem 0.06rem 0.08rem;
  }

  .classes-hub-class-row__panel.admin2-manage-section__panel {
    --classes-nesting-inset-x: 0.55rem;
  }

  .classes-hub-class-row__panel .teacher-student-node__summary {
    padding: 0.24rem 0.24rem;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    row-gap: 0.08rem;
    position: static;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__titles {
    grid-column: 1;
    grid-row: 1 / span 2;
    max-width: none;
    min-height: 0;
    display: grid;
    margin: 0;
  }

  .courses-hub-expandable__toggle.admin2-hierarchy-row.classes-hub-class-row__toggle
    .classes-hub-class-row__teacher-meta {
    grid-column: 1;
    grid-row: 3;
    max-width: 100%;
  }
}

.classes-hub-class-row__panel {
  padding: 0.08rem 0.08rem 0.1rem;
}

.teacher-class-view--inline {
  padding-top: 0;
}

.teacher-class-view__title--inline {
  font-size: 1rem;
  margin: 0 0 0.35rem;
}

/* Tighten expanded class internals so student cards nearly touch panel edges. */
.classes-hub-class-row__panel .panel-message {
  margin: 0.04rem 0 0.08rem;
}

.classes-hub-class-row__panel .teacher-roster-list--expanded {
  gap: 0.1rem;
}

.classes-hub-class-row__panel .teacher-roster-list--expanded > .teacher-student-node {
  margin: 0;
}

/* Make student rows flush to class-panel sides (no horizontal gutter). */
.classes-hub-class-row__panel .teacher-roster-list--expanded {
  width: calc(100% + (var(--classes-nesting-inset-x, 0.55rem) * 2));
  margin-left: calc(var(--classes-nesting-inset-x, 0.55rem) * -1);
  margin-right: calc(var(--classes-nesting-inset-x, 0.55rem) * -1);
  max-width: none;
}

.classes-hub-class-row__panel .teacher-class-container {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.classes-hub-class-row__panel .teacher-student-node__summary {
  padding: 0.28rem 0.3rem;
}

/* Keep identical horizontal nesting inset across levels:
   class -> student and student -> course. */
.classes-hub-class-row__panel.admin2-manage-section__panel {
  --classes-nesting-inset-x: 0.55rem;
  padding-left: var(--classes-nesting-inset-x);
  padding-right: var(--classes-nesting-inset-x);
}

.classes-hub-class-row__panel .teacher-student-node-expandable__panel {
  padding-left: var(--classes-nesting-inset-x);
  padding-right: var(--classes-nesting-inset-x);
}

/* Remove extra bottom space below the last unit row in expanded course panels. */
.classes-hub-class-row__panel
  .teacher-student-node-expandable__panel
  .progress-history-panel {
  padding-bottom: 0;
}

@media (min-width: 901px) {
  .admin2-shell--responsive-mobile > .admin2-mobile-context-backbar {
    display: none !important;
  }
}

.admin2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}

/* Keep hub/list surfaces aligned to the same centered player content width. */
.admin2-grid--player-hub,
.admin2-grid--courses-hub,
.admin2-grid--classes-hub {
  width: min(100%, 760px);
  max-width: 760px;
  margin-inline: auto;
}

/* Shell-level centering guard against grid/flex stretch behavior. */
.admin2-shell--courses-hub .admin2-grid--courses-hub,
.admin2-shell--classes-hub .admin2-grid--classes-hub,
.admin2-shell--groups .admin2-grid--player-hub,
.admin2-shell--store .admin2-grid--player-hub {
  justify-self: center;
}

/* Ensure shell children don't re-stretch wider than the centered envelope. */
.progress-player-detail.courses-player-view .admin2-shell {
  width: 100%;
}

/* Simple player hubs (Admin, Messages, Shop, catalog): one full-width column like list pane. */
.admin2-grid--player-hub {
  grid-template-columns: minmax(0, 1fr);
}

/* Admin2 Groups/Home + Node views: remove extra outer card chrome. */
.admin2-shell--groups .admin2-grid--player-hub > .admin2-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Node-focused panes still use .admin2-grid (not player-hub); strip that wrapper too. */
.admin2-shell--groups .admin2-card.admin2-mobile-pane.admin2-mobile-pane--list,
.admin2-shell--groups .admin2-card.admin2-mobile-pane.admin2-mobile-pane--detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Shop follows the same cleaner, no-outer-wrapper treatment. */
.admin2-shell--store .admin2-grid--player-hub > .admin2-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Courses uses same full-width shell as Admin/Progress/Shop/Account. */
.admin2-grid--courses-hub {
  grid-template-columns: minmax(0, 1fr);
}

/* Unified Messages inbox: row 1 = tabs + Archived + compose; row 2 = summary; row 3 = issue subfilters (Support tab). */
.inbox-messages-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.inbox-messages-toolbar__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.inbox-messages-toolbar__summary {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--nls-color-text-soft);
}

.inbox-messages-toolbar__issues {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

/* Unified Messages inbox: compact filter chips (not hero nav). */
.inbox-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.15rem;
}

.inbox-filter-chip {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  line-height: 1.2;
}

.inbox-filter-chip.is-active {
  border-color: var(--nls-color-accent, #3b82f6);
  background: color-mix(
    in srgb,
    var(--nls-color-accent, #3b82f6) 14%,
    transparent
  );
}

/* Unified inbox: secondary filters (match Support list + announcement rules). */
.inbox-subfilter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.inbox-subfilter-bar--announcements {
  flex-wrap: wrap;
  align-items: center;
}

.inbox-subfilter-bar--announcements .inbox-subfilter-summary {
  flex-basis: 100%;
  margin-top: 0.1rem;
}

.inbox-subfilter-bar__label {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nls-color-text-soft);
}

.inbox-subfilter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  min-width: 0;
}

.inbox-subfilter-chip {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 999px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  cursor: pointer;
  line-height: 1.2;
}

.inbox-subfilter-chip.is-active {
  border-color: var(--nls-color-accent, #3b82f6);
  background: color-mix(
    in srgb,
    var(--nls-color-accent, #3b82f6) 12%,
    transparent
  );
}

.inbox-subfilter-chip:disabled,
.inbox-subfilter-chip.inbox-subfilter-chip--disabled {
  opacity: 0.48;
  cursor: not-allowed;
  color: var(--nls-color-text-muted);
}

.inbox-subfilter-chip.is-active:disabled,
.inbox-subfilter-chip.is-active.inbox-subfilter-chip--disabled {
  opacity: 0.55;
}

.inbox-subfilter-summary {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--nls-color-text-soft);
  width: 100%;
}

.inbox-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nls-color-border-soft);
}

.inbox-search-bar__input {
  flex: 1 1 260px;
  min-width: 180px;
  max-width: 100%;
}

/* Inbox list row: badges (kind on “All” + state) → preview → “Yours”|sender · time (see paintUnifiedInboxIntoPlayer). */
.admin2-hierarchy-row.inbox-feed-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
}

.inbox-feed-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.inbox-feed-row__badges:empty {
  display: none;
}

.inbox-feed-row__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.18rem;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.inbox-feed-row__preview {
  display: block;
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}

.inbox-feed-row__sender {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.32rem;
  min-width: 0;
}

.inbox-feed-row__sender-name {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--nls-color-text, #0f172a);
  overflow-wrap: anywhere;
}

.inbox-feed-row__details {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.38;
  font-weight: 500;
  color: var(--nls-color-text-soft);
  overflow-wrap: anywhere;
}

.inbox-feed-row__sender .inbox-you-pill {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 0.06rem 0.32rem;
  border-radius: 4px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-accent, #7c3aed) 42%,
      var(--nls-color-border-soft)
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 76%,
    var(--nls-color-accent-bg, #ede9fe) 24%
  );
  color: var(--nls-color-accent-strong, #5b21b6);
}

.inbox-feed-row .inbox-type-pill,
.inbox-feed-row .inbox-state-pill,
.inbox-feed-row .inbox-meta-pill,
.inbox-feed-row .inbox-audience-pill,
.support-thread-card .inbox-feed-row__badges .inbox-type-pill,
.support-thread-card .inbox-feed-row__badges .inbox-state-pill,
.support-thread-card .inbox-feed-row__badges .inbox-meta-pill,
.notices-card .notices-card__context-badges .inbox-type-pill,
.notices-card .notices-card__context-badges .inbox-meta-pill,
.notices-card .notices-card__context-badges .inbox-audience-pill {
  flex-shrink: 0;
}

/* Compact “You” before name (notice sender row + support from-line), not in the type/state badge row. */
.notices-card__sender .inbox-you-pill,
.support-thread-meta-line .inbox-you-pill {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 0.06rem 0.32rem;
  border-radius: 4px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-accent, #7c3aed) 42%,
      var(--nls-color-border-soft)
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 76%,
    var(--nls-color-accent-bg, #ede9fe) 24%
  );
  color: var(--nls-color-accent-strong, #5b21b6);
}

.support-thread-meta-line--from {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.inbox-feed-row .inbox-meta-pill,
.inbox-feed-row .inbox-audience-pill,
.notices-card .notices-card__context-badges .inbox-meta-pill,
.notices-card .notices-card__context-badges .inbox-audience-pill,
.notice-compose__scope-pill {
  font-weight: 600;
  opacity: 0.95;
}

/* Explicit chip colors so badges never inherit dev-view `button { color: surface }`. */
.inbox-feed-row .class-status-chip,
.support-thread-card .inbox-feed-row__badges .class-status-chip,
.notices-card .notices-card__context-badges .class-status-chip,
.notice-compose__scope-pill {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--nls-color-primary, #2563eb) 38%,
      var(--nls-color-border-soft)
    );
  background: color-mix(
    in srgb,
    var(--nls-color-surface) 82%,
    var(--nls-color-primary-bg, #dbeafe) 18%
  );
  color: var(--nls-color-primary-strong, #1d4ed8);
}

.inbox-feed-row .inbox-priority-pill,
.notices-card .notices-card__context-badges .inbox-priority-pill {
  color: #7c2d12;
  border-color: color-mix(in srgb, #ea580c 58%, #f59e0b 42%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffedd5 86%, #ffffff 14%),
    color-mix(in srgb, #fdba74 34%, #ffffff 66%)
  );
  font-weight: 800;
}

.support-thread-context-badges {
  justify-self: start;
}

.support-thread-card .inbox-feed-row__badges .inbox-state-pill.has-alert,
.support-thread-meta-line .inbox-you-pill.has-alert {
  position: relative;
  padding-right: 0.55rem;
}

.support-thread-card .inbox-feed-row__badges .inbox-state-pill.has-alert::after,
.support-thread-meta-line .inbox-you-pill.has-alert::after {
  content: "";
  position: absolute;
  top: 0.08rem;
  right: 0.12rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 1.5px var(--nls-color-surface, #fff);
}

.admin2-announce-compose__meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.35rem 0 0.5rem;
}

.notice-compose__meta-inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  overflow: visible;
}

.notice-compose__meta-inline-row .support-resolve-composer__field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  min-width: 0;
}

.notice-compose__meta-inline-row .support-resolve-composer__field > span {
  font-size: 0.78rem;
  margin: 0;
}

.notice-compose__inline-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.2rem;
  white-space: nowrap;
}

.notice-compose__meta-select {
  display: block;
  margin-top: 0.28rem;
  width: 100%;
  max-width: 22rem;
}

.notice-compose__meta-select--inline {
  margin-top: 0;
  width: auto;
  min-width: 5.5rem;
  max-width: none;
}

.notice-compose__input--inline {
  width: auto;
  max-width: 100%;
  min-height: 2rem;
  height: 2rem;
  padding: 0.22rem 0.55rem;
  border-radius: 9px;
  line-height: 1.15;
  resize: none;
}

.notice-compose__input--inline-datetime {
  min-width: 0;
  width: 12.5rem;
}

.inbox-feed-row__sender-prefix,
.inbox-feed-row__scope-label {
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.notices-card .notices-card__context-badges {
  margin: 0 0 0.25rem;
}

.admin2-hierarchy-row.inbox-feed-row .admin2-hierarchy-row__title,
.admin2-hierarchy-row.inbox-feed-row .admin2-hierarchy-row__meta,
.admin2-hierarchy-row.inbox-feed-row .inbox-feed-row__details {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin2-hierarchy-row.inbox-feed-row .admin2-hierarchy-row__title {
  align-self: flex-start;
  text-align: left;
}

/*
 * Unified Inbox: list + detail grow with content (taller column sets row height).
 * No nested scroll inside the list or detail body — `#player-main` scrolls as one pane.
 * (Card `min-height: auto` is re-applied after `.admin2-card.admin2-card--courses-hub-*` below — same two-class specificity would otherwise lose the cascade tie.)
 */

.admin2-shell--unified-inbox
  .admin2-card--courses-hub-list
  .courses-hub-list-scroll,
.admin2-shell--unified-inbox .courses-hub-list-scroll.inbox-feed-scroll {
  flex: 0 1 auto;
  min-height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
}

.admin2-shell--unified-inbox .courses-hub-detail__body,
.admin2-shell--unified-inbox .inbox-detail-body {
  flex: 0 1 auto;
  min-height: auto;
  min-width: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  overflow-wrap: anywhere;
}

.admin2-shell--unified-inbox .inbox-detail-body .notices-list {
  min-height: auto;
  overflow: visible;
}

.admin2-shell--unified-inbox .inbox-notice-compose__intro {
  margin: 0;
}

.admin2-shell--unified-inbox .inbox-detail-body--notice-compose {
  max-height: min(62vh, 520px);
  overflow-y: auto;
  padding-right: 0.15rem;
}

/*
 * Courses / Classes hubs reuse `.admin2-grid` (2 columns on desktop for list | detail).
 * On mobile list phase only the list pane is visible — without this, the list card sits in
 * column 1 only (~half viewport width) while Progress uses a single full-width column.
 */
@media (max-width: 900px) {
  .admin2-shell--courses-hub[data-mobile-phase="list"]
    .admin2-grid--courses-hub,
  .admin2-shell--classes-hub[data-mobile-phase="list"]
    .admin2-grid--classes-hub {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin2-card {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 12px;
  background: var(--nls-color-surface-alt);
  padding: 0.65rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-content: start;
}

/* Player Courses hubs: no admin2-card__title row — flex fills the pane (overrides display:grid above). */
.admin2-card.admin2-card--courses-hub-list,
.admin2-card.admin2-card--courses-hub-detail,
.admin2-card.admin2-card--courses-hub-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}

/* Course rows already carry their own container chrome. */
.admin2-shell--courses-hub .admin2-card.admin2-card--courses-hub-list {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.admin2-card--courses-hub-list .courses-hub-list-scroll {
  flex: 1;
  min-height: 0;
}

.admin2-shell--unified-inbox .admin2-card.admin2-card--courses-hub-list,
.admin2-shell--unified-inbox .admin2-card.admin2-card--courses-hub-detail {
  min-height: auto;
  min-width: 0;
}

.admin2-card--full {
  grid-column: 1 / -1;
}

.admin2-card.admin2-card--player-hub {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 0;
}

/* Progress course rows are self-contained; remove extra shell chrome. */
.admin2-card.admin2-card--progress-hub-list {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

/* Titles that are direct children of the card span the full width (no empty “column 1” gap). */
.admin2-card__title {
  grid-column: 1;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  padding-left: 0;
}

.admin2-card__title-row {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0;
}

.admin2-card__title-row .admin2-card__title {
  padding-left: 0;
}

.admin2-title-refresh {
  border: none;
  background: transparent;
  color: var(--nls-color-text-soft, #64748b);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.05rem;
  cursor: pointer;
}

.admin2-title-refresh:hover,
.admin2-title-refresh:focus-visible {
  color: var(--nls-color-text, #0f172a);
}

.admin2-title-refresh:disabled {
  opacity: 0.5;
  cursor: default;
}

.admin2-card__title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin2-card__title-bar .admin2-card__title {
  min-width: 0;
}

.admin2-node-title__type {
  color: var(--nls-color-primary-strong, #1d4ed8);
}

.admin2-node-title__sep {
  color: var(--nls-color-text-soft, #64748b);
}

.admin2-node-title__name {
  color: var(--nls-color-text, #0f172a);
}

.admin2-context-open-next {
  margin-left: auto;
}

.admin2-home-table {
  display: grid;
  gap: 0.45rem;
}

.admin2-home-table__actions {
  margin-bottom: 0.05rem;
}

.admin2-people-hub-entry {
  font-weight: 600;
}

.admin2-card--people-hub .admin2-people-hub__primary {
  margin-bottom: 0.65rem;
}

.admin2-card--people-hub .admin2-people-hub__primary .course-action {
  width: 100%;
  justify-content: center;
}

.admin2-people-hub__shortcuts-label {
  margin: 0 0 0.35rem;
}

.admin2-people-hub__shortcuts {
  flex-wrap: wrap;
  gap: 0.35rem;
}

.admin2-bulk-flow-back {
  margin-bottom: 0.35rem;
}

.account-editor-form--add-user .create-user-node-search {
  width: 100%;
  margin-bottom: 0.35rem;
  box-sizing: border-box;
}

.account-editor-form--add-user .create-user-placement-select {
  width: 100%;
  min-height: 10rem;
  max-height: 18rem;
  box-sizing: border-box;
}

.admin2-home-table__section {
  display: grid;
  gap: 0.35rem;
}

.admin2-home-table__section-head {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.admin2-home-table__toggle {
  flex: 0 0 auto;
  min-width: 2.2rem;
  padding-inline: 0.6rem;
}

.admin2-home-table__check {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.admin2-home-table__level {
  flex: 1 1 0;
  justify-content: flex-start;
}

.admin2-home-table__rows {
  display: grid;
  gap: 0.45rem;
  margin-left: 1.55rem;
}

.admin2-home-table .admin2-hierarchy-row {
  width: 100%;
}

.admin2-hierarchy-item--expandable {
  grid-template-columns: 1.2rem 0.95rem minmax(0, 1fr);
}

.admin2-hierarchy-row__expander {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--nls-color-text-soft);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.admin2-hierarchy-row__expander:disabled {
  opacity: 0.35;
  cursor: default;
}

.admin2-card__empty {
  margin: 0;
  color: var(--nls-color-text-muted);
  font-size: 0.76rem;
}

.admin2-card .course-action {
  width: auto;
  justify-self: start;
  align-self: start;
}

.admin2-hierarchy-list {
  display: grid;
  gap: 0.45rem;
}

.admin2-hierarchy-domain-group {
  display: grid;
  gap: 0.35rem;
}

.admin2-hierarchy-domain-heading {
  margin: 0;
  font-size: 0.69rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--nls-color-text-soft);
}

/* Ensure each subsequent category header has vertical separation from the previous row group. */
.admin2-hierarchy-domain-group
  + .admin2-hierarchy-domain-group
  .admin2-hierarchy-domain-heading {
  margin-top: 0.35rem;
}

.admin2-hierarchy-controls {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  margin-top: 0;
}

.admin2-hierarchy-controls input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--nls-color-primary);
}

.admin2-hierarchy-backbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.2rem;
}

.admin2-scope-back {
  justify-self: start;
  margin: 0;
}

.admin2-hierarchy-nav {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0.1rem;
}

.admin2-scope-open {
  margin-left: 0;
}

.admin2-hierarchy-row {
  width: 100%;
  text-align: left;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface);
  border-radius: 9px;
  padding: 0.5rem 0.55rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: 0.22rem;
  align-items: center;
  cursor: pointer;
}

.admin2-hierarchy-row__check {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--nls-color-primary);
}

.admin2-hierarchy-item {
  display: grid;
  grid-template-columns: 0.95rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: center;
}

/* Home expandable rows use three fixed slots: expander, checkbox, full row card. */
.admin2-hierarchy-item.admin2-hierarchy-item--expandable {
  grid-template-columns: 1.2rem 0.95rem minmax(0, 1fr);
}

.admin2-hierarchy-item--expandable .admin2-hierarchy-row__expander {
  grid-column: 1;
  justify-self: center;
}

.admin2-hierarchy-item--expandable .admin2-hierarchy-row__check {
  grid-column: 2;
}

.admin2-hierarchy-item--expandable .admin2-hierarchy-row {
  grid-column: 3;
}

/* Home header aligns with expandable rows: [expander slot][checkbox][label]. */
.admin2-home-title-row {
  grid-template-columns: 1.2rem 0.95rem minmax(0, 1fr);
}

.admin2-home-title-row .admin2-hierarchy-controls {
  grid-column: 2;
}

.admin2-home-title-row .admin2-card__title {
  grid-column: 3;
  padding-left: 0;
}

.admin2-hierarchy-row:hover,
.admin2-hierarchy-row:focus-visible {
  border-color: var(--nls-color-primary-border-strong);
}

.admin2-hierarchy-row.is-active {
  border-color: var(--nls-color-primary-border-strong);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 58%,
    var(--nls-color-surface) 42%
  );
}

.admin2-hierarchy-row.is-archived {
  border-color: color-mix(
    in srgb,
    #d4a83a 42%,
    var(--nls-color-border-soft) 58%
  );
  background: color-mix(in srgb, #fff3bf 68%, var(--nls-color-surface) 32%);
}

.admin2-hierarchy-row.is-hard-archived {
  border-color: color-mix(
    in srgb,
    #991b1b 40%,
    var(--nls-color-border-soft) 60%
  );
  background: color-mix(in srgb, #fee2e2 68%, var(--nls-color-surface) 32%);
}

body[data-theme="dev-view"] button.admin2-hierarchy-row.is-archived {
  border-color: color-mix(
    in srgb,
    #d4a83a 42%,
    var(--nls-color-border-soft) 58%
  );
  background: color-mix(in srgb, #fff3bf 68%, var(--nls-color-surface) 32%);
}

body[data-theme="dev-view"] button.admin2-hierarchy-row.is-hard-archived {
  border-color: color-mix(
    in srgb,
    #991b1b 40%,
    var(--nls-color-border-soft) 60%
  );
  background: color-mix(in srgb, #fee2e2 68%, var(--nls-color-surface) 32%);
}

/*
 * Player hub rows are semantic <button>s; dev-view theme styles all buttons as solid CTAs
 * (light text on primary). Restore list-row chrome + readable inherited text on tinted .is-active.
 */
body[data-theme="dev-view"] button.admin2-hierarchy-row {
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  padding: 0.5rem 0.55rem;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
}

body[data-theme="dev-view"] button.admin2-hierarchy-row:hover,
body[data-theme="dev-view"] button.admin2-hierarchy-row:focus-visible {
  border-color: var(--nls-color-primary-border-strong);
}

.admin2-hierarchy-row.is-archived:hover,
.admin2-hierarchy-row.is-archived:focus-visible,
body[data-theme="dev-view"] button.admin2-hierarchy-row.is-archived:hover,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.is-archived:focus-visible {
  border-color: color-mix(
    in srgb,
    #c58b12 58%,
    var(--nls-color-primary-border-strong) 42%
  );
  background: color-mix(in srgb, #ffe08a 72%, var(--nls-color-surface) 28%);
}

.admin2-hierarchy-row.is-hard-archived:hover,
.admin2-hierarchy-row.is-hard-archived:focus-visible,
body[data-theme="dev-view"] button.admin2-hierarchy-row.is-hard-archived:hover,
body[data-theme="dev-view"]
  button.admin2-hierarchy-row.is-hard-archived:focus-visible {
  border-color: color-mix(
    in srgb,
    #7f1d1d 56%,
    var(--nls-color-primary-border-strong) 44%
  );
  background: color-mix(in srgb, #fecaca 72%, var(--nls-color-surface) 28%);
}

body[data-theme="dev-view"] button.admin2-hierarchy-row.is-active {
  color: var(--nls-color-text);
  background: color-mix(
    in srgb,
    var(--nls-color-primary-bg-light) 58%,
    var(--nls-color-surface) 42%
  );
}

.admin2-hierarchy-row__title {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: inherit;
  color: var(--nls-color-primary-strong, #1d4ed8);
  align-self: center;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.admin2-hierarchy-row__title-type {
  color: var(--nls-color-primary-strong, #1d4ed8);
}

.admin2-hierarchy-row__title-sep {
  color: var(--nls-color-text-soft, #64748b);
}

.admin2-hierarchy-row__title-name {
  color: var(--nls-color-text, #0f172a);
}

.admin2-hierarchy-row__title-wrap {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.admin2-hierarchy-row__badge {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.09rem 0.35rem;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, #c58b12 58%, var(--nls-color-border-soft) 42%);
  background: color-mix(in srgb, #ffe08a 72%, var(--nls-color-surface) 28%);
  color: #7a4a00;
}

.admin2-hierarchy-row__badge--hard-archived {
  border-color: color-mix(in srgb, #991b1b 56%, var(--nls-color-border-soft) 44%);
  background: color-mix(in srgb, #fee2e2 74%, var(--nls-color-surface) 26%);
  color: #7f1d1d;
}

.admin2-hierarchy-row__meta {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.72rem;
  font-family: inherit;
  color: var(--nls-color-text-soft);
  align-self: center;
}

.admin2-hierarchy-row__count {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.22rem;
  border-radius: 6px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-border-soft) 80%, #ffffff 20%);
  color: var(--nls-color-text-muted);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #ffffff 30%);
  font-size: 0.66rem;
  font-weight: 700;
}

.courses-hub-detail__enrollment-meta {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  display: block;
  text-align: left;
  justify-self: start;
  align-self: start;
}

.courses-hub-detail__context-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.15rem 0 0.1rem;
}

.courses-hub-detail__context-pills .notice-compose__scope-pill {
  font-size: 0.72rem;
}

.classes-hub-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.classes-hub-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--nls-color-surface-muted);
  color: var(--nls-color-text);
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
  max-width: min(68vw, 32rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.courses-hub-detail__teacher-line {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Stacked label / value pairs (one column) — avoids a 2×N “window” beside each field. */
.admin2-context-grid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem 0;
  align-items: start;
}

.admin2-context-grid dt {
  margin: 0.45rem 0 0.05rem;
  font-size: 0.72rem;
  color: var(--nls-color-text-soft);
}

.admin2-context-grid dt:first-of-type {
  margin-top: 0;
}

.admin2-context-grid dd {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: var(--nls-color-text);
  overflow-wrap: anywhere;
}

.admin2-context-grid dd:last-of-type {
  margin-bottom: 0;
}

.admin2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin2-manage-sections {
  display: grid;
  gap: 0.45rem;
}

.admin2-manage-section__panel {
  padding: 0.38rem 0.45rem;
}

/* Classes view override: enforce nesting insets after generic panel rule. */
.admin2-manage-section__panel.classes-hub-class-row__panel {
  padding-top: 0.08rem;
  padding-bottom: 0.1rem;
  padding-left: var(--classes-nesting-inset-x, 0.55rem);
  padding-right: var(--classes-nesting-inset-x, 0.55rem);
}

.classes-hub-class-row__panel
  .admin2-manage-section__panel.teacher-student-node-expandable__panel {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Final high-specificity override: student rows must be flush to class panel edges. */
.admin2-manage-section__panel.classes-hub-class-row__panel
  .teacher-roster-list.teacher-roster-list--expanded {
  width: calc(100% + (var(--classes-nesting-inset-x, 0.55rem) * 2)) !important;
  margin-left: calc(var(--classes-nesting-inset-x, 0.55rem) * -1) !important;
  margin-right: calc(var(--classes-nesting-inset-x, 0.55rem) * -1) !important;
  max-width: none !important;
}

/* Hard lock: class panel and student rows must be flush on left/right. */
.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel
  .teacher-roster-list.teacher-roster-list--expanded {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel
  .courses-hub-row-item.menu-expandable-item.teacher-student-node.teacher-student-node-expandable {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Remove inherited progress wrapper inset in expanded class view. */
.courses-hub-row-expand.admin2-manage-section__panel.classes-hub-class-row__panel
  > .progress-player-detail.teacher-class-view--inline {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.admin2-manage-section__panel .teacher-class-container {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.admin2-manage-section__panel
  .teacher-class-container
  > .admin2-card__title:first-child,
.admin2-manage-section__panel
  .teacher-class-container
  > .dev-section-title:first-child {
  display: none;
}

.admin2-context-manage-embed {
  display: grid;
  gap: 0.5rem;
}

.admin2-context-manage-embed .teacher-class-container {
  margin: 0;
}

.admin2-context-manage-embed .teacher-class-container > .dev-section-title,
.admin2-context-manage-embed .teacher-class-container > .admin2-card__title {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  line-height: 1.2;
}

.admin2-context-manage-embed
  .teacher-class-container
  > .panel-message.muted:first-of-type {
  margin: 0 0 0.24rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin2-context-manage-embed .classes-action-bar {
  margin: 0;
  flex-wrap: wrap;
}

.admin2-context-manage-embed .classes-action-bar .course-action {
  margin: 0;
}

.admin2-node-children-card,
.admin2-node-courses-card {
  padding: 0.36rem 0.45rem 0.42rem;
}

.admin2-node-children-card .admin2-card__title,
.admin2-node-courses-card .admin2-card__title {
  font-size: 0.82rem;
  margin: 0 0 0.2rem;
}

.admin2-node-children-card__hint {
  margin: 0 0 0.24rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin2-node-children-card__actions,
.admin2-node-courses-card__actions {
  margin: 0 0 0.2rem;
}

.admin2-node-courses-card__header-actions {
  margin: 0 0 0.2rem;
}

.admin2-node-courses-card__content[hidden] {
  display: none !important;
}

.admin2-node-courses-card__hint {
  margin: 0 0 0.24rem;
  font-size: 0.72rem;
  line-height: 1.3;
}

.admin2-node-courses-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.admin2-node-logo-card__actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  align-items: center;
  overflow-x: auto;
}

.admin2-node-logo-card__actions .course-action {
  flex: 0 0 auto;
}

.admin2-node-logo-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
}

.admin2-node-logo-preview {
  border: none;
  background: transparent;
  border-radius: 10px;
  min-height: 64px;
  overflow: hidden;
}

.admin2-node-logo-preview.admin2-node-logo-preview--has-image {
  min-height: 180px !important;
  height: 180px;
  max-width: 460px;
  width: min(100%, 460px);
  margin: 0 auto;
  border: 1px solid var(--nls-color-border-soft);
  background: color-mix(in srgb, var(--nls-color-surface-alt) 70%, #ffffff 30%);
}

.admin2-node-children-card__list {
  display: grid;
  gap: 0.24rem;
}

.admin2-node-children-card__list .admin2-hierarchy-item {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

.admin2-node-children-card__list .admin2-hierarchy-row {
  width: 100%;
  min-width: 0;
}

.admin2-node-children-card__list .admin2-hierarchy-row__title-wrap {
  flex-wrap: nowrap;
}

.admin2-node-children-card__list .admin2-hierarchy-row__title,
.admin2-node-children-card__list .admin2-hierarchy-row__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .admin2-grid {
    grid-template-columns: 1fr;
  }

  .admin2-hierarchy-nav {
    flex-wrap: wrap;
  }

  .admin2-scope-open {
    margin-left: 0;
  }

  .admin2-context-open-next {
    margin-left: 0;
  }

  .admin2-context-manage-embed .classes-action-bar .course-action {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
  }

  .admin2-context-manage-embed .classes-action-bar,
  .admin2-context-manage-embed .teacher-class-container {
    min-width: 0;
  }

  .admin2-context-manage-embed .classes-inline-check {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
  }

  .admin2-context-manage-embed .class-teacher-assignment-row__select {
    flex: 1 1 100%;
    min-width: 0;
  }

  .admin2-node-children-card__list .admin2-hierarchy-row__title-wrap {
    flex-wrap: wrap;
  }

  .admin2-node-children-card__list .admin2-hierarchy-row__title,
  .admin2-node-children-card__list .admin2-hierarchy-row__meta {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

.account-editor-form {
  display: grid;
  gap: 0.65rem;
}

.account-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.account-editor-grid label {
  display: grid;
  gap: 0.3rem;
}

.account-editor-grid label.classes-inline-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
}

.account-editor-grid label.classes-inline-check input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

.account-editor-grid label.account-editor-grid__full {
  grid-column: 1 / -1;
}

.account-editor-grid span {
  font-size: 0.8rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.account-editor-label-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.account-editor-label-with-icon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.account-editor-grid input,
.account-editor-grid select {
  color: var(--nls-color-text) !important;
  -webkit-text-fill-color: var(--nls-color-text) !important;
}

.account-editor-grid input[disabled],
.account-editor-grid select[disabled] {
  color: var(--nls-color-text-muted) !important;
  -webkit-text-fill-color: var(--nls-color-text-muted) !important;
  opacity: 1;
}

.account-editor-readonly-value {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 8px;
  background: var(--nls-color-surface-alt);
  color: var(--nls-color-text);
  padding: 0.45rem 0.55rem;
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.account-editor-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.account-editor-note {
  margin: 0;
  font-size: 0.78rem;
  color: var(--nls-color-text-muted);
}

.profile-avatar-editor {
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.65rem;
  display: grid;
  gap: 0.6rem;
}

.profile-avatar-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.profile-avatar-editor__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.profile-avatar-editor__header-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-avatar-editor__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.profile-avatar-editor__details {
  display: grid;
  gap: 0.6rem;
}

.profile-avatar-editor__details[hidden] {
  display: none !important;
}

.profile-avatar-editor__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.profile-avatar-preview {
  --avatar-bg: #dbeafe;
  --avatar-fg: #1e3a8a;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--nls-color-border-soft);
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.profile-avatar-preview.profile-avatar-preview--rounded {
  border-radius: 12px;
}

.profile-avatar-preview--lg {
  width: 72px;
  height: 72px;
}

.profile-avatar-preview--xs {
  width: 18px;
  height: 18px;
}

.dev-nav-account-avatar.profile-avatar-preview--xs {
  width: 22px;
  height: 22px;
  border-color: color-mix(
    in srgb,
    var(--nls-color-border-soft, #cbd5e1) 72%,
    transparent
  );
}

.profile-avatar-role-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 42%;
  min-width: 8px;
  min-height: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid
    color-mix(in srgb, var(--nls-color-surface, #fff) 80%, transparent);
  background: color-mix(
    in srgb,
    var(--nls-color-surface, #fff) 88%,
    transparent
  );
  color: var(--nls-color-text-soft, #6b7280);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.profile-avatar-role-badge svg {
  width: 72%;
  height: 72%;
}

.profile-avatar-role-badge--teacher {
  color: #475569;
}

.profile-avatar-role-badge--admin {
  color: #7c2d12;
}

.profile-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-preview__emoji {
  font-size: 1.15rem;
}

.profile-avatar-preview--lg .profile-avatar-preview__emoji {
  font-size: 1.65rem;
}

.profile-avatar-preview--xs .profile-avatar-preview__emoji {
  font-size: 0.65rem;
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 0.45rem;
}

.profile-avatar-filter {
  display: grid;
  gap: 0.3rem;
  max-width: 260px;
}

.profile-avatar-filter span {
  font-size: 0.78rem;
  color: var(--nls-color-text-soft);
  font-weight: 600;
}

.profile-avatar-option {
  --avatar-bg: #dbeafe;
  --avatar-fg: #1e3a8a;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface);
  color: var(--nls-color-text);
  padding: 0.5rem;
  display: grid;
  justify-items: center;
  align-items: center;
}

.profile-avatar-option:hover {
  border-color: var(--nls-color-primary, #2563eb);
}

.profile-avatar-option.is-selected {
  border-color: var(--nls-color-primary, #2563eb);
  box-shadow: 0 0 0 2px var(--nls-color-primary-bg, rgba(37, 99, 235, 0.18));
}

.profile-avatar-option__emoji {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: var(--avatar-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  overflow: hidden;
}

.profile-avatar-option__emoji img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-user-inline-error {
  align-self: center;
  font-size: 0.76rem;
  color: var(--nls-color-danger-strong);
  min-height: 1em;
}

.create-user-inline-error:not(.is-visible) {
  visibility: hidden;
}

@media (max-width: 700px) {
  .account-editor-grid {
    grid-template-columns: 1fr;
  }
}

.whisper-player-debug {
  margin-top: 0.7rem;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 10px;
  background: var(--nls-color-surface-alt);
  padding: 0.55rem 0.65rem;
  display: grid;
  gap: 0.35rem;
}

.whisper-player-debug__title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--nls-color-text);
}

.whisper-player-debug__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--nls-color-text-muted);
}

.whisper-player-debug__row--stack {
  display: grid;
  gap: 0.25rem;
}

.whisper-player-debug__row--stack pre {
  margin: 0;
  white-space: pre-wrap;
  font-size: 0.74rem;
  color: var(--nls-color-text);
}

/* Keep response payloads in the player pane, not sidebar. */
#auth-response,
#courses-response,
#progress-output {
  display: none !important;
}

.simulation-badge {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 8;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--nls-color-warning, #c48f00);
  border-radius: 999px;
  background: var(--nls-color-warning-bg, rgba(196, 143, 0, 0.16));
  color: var(--nls-color-warning-text, #8a6500);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* Anchor auto-test overlay positioning to the sidebar rail. */
.dev-sidebar__rail {
  position: relative;
  overflow-y: visible;
}

.autotest-live-panel {
  position: fixed;
  top: var(--autotest-live-panel-top);
  left: var(--autotest-live-panel-left);
  right: auto;
  z-index: 1450;
  min-width: 176px;
  border: 1px solid var(--nls-color-border-soft);
  border-radius: 9px;
  background: var(--nls-color-surface-alt);
  box-shadow: 0 5px 12px var(--nls-shadow-color-light);
  padding: 0.3rem 0.35rem;
  display: grid;
  gap: 0.24rem;
}

.autotest-live-panel[hidden] {
  display: none !important;
}

.autotest-live-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--nls-color-text-muted);
}

.autotest-live-panel__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.autotest-live-panel__pause,
.autotest-live-panel__close {
  min-height: 1.15rem;
  min-width: 2.2rem;
  padding: 0.04rem 0.25rem;
  border-radius: 6px;
  font-size: 0.6rem;
  border-width: 1px;
}

.autotest-live-panel .toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: center;
  column-gap: 0.45rem;
  justify-content: initial;
  width: 100%;
  margin: 0;
}

.autotest-live-panel .dev-toggle-inline {
  grid-template-columns: minmax(0, 1fr) 52px;
}

.autotest-live-panel .dev-toggle-inline .dev-toggle-inline__lead {
  display: grid !important;
  grid-template-columns: 0.9rem minmax(0, 4rem);
  align-items: center;
  column-gap: 0.25rem;
  min-width: 0;
}

.autotest-live-panel .dev-toggle-inline span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  width: auto;
  min-width: 0;
  color: var(--nls-color-text-muted);
}

.autotest-live-panel .dev-toggle-inline span svg,
.autotest-live-panel .dev-toggle-inline__lead svg {
  width: 0.86rem;
  height: 0.86rem;
  flex: 0 0 auto;
}

.autotest-live-panel .dev-toggle-counter {
  width: 100%;
  min-width: 3.3rem;
  text-align: left;
  padding: 0.13rem 0.28rem !important;
  border-radius: 7px !important;
  border-width: 1px !important;
  min-height: 1.15rem;
  font-size: 0.66rem;
  justify-self: start;
}

.autotest-live-panel .toggle > input[type="checkbox"] {
  margin-left: 0;
  flex: 0 0 auto;
  justify-self: end;
  transform: translateX(8px);
}

@media (max-width: 900px) {
  .autotest-live-panel {
    width: min(calc(100vw - 16px), 360px);
    min-width: 0;
    max-width: calc(100vw - 16px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem 0.4rem;
    padding: 0.32rem 0.35rem;
    border-radius: 10px;
  }

  .autotest-live-panel__header {
    grid-column: 1 / -1;
    margin-bottom: 0.04rem;
    font-size: 0.66rem;
  }

  .autotest-live-panel__actions {
    gap: 0.16rem;
  }

  .autotest-live-panel__pause,
  .autotest-live-panel__close {
    min-width: 2rem;
    min-height: 1.05rem;
    font-size: 0.58rem;
    padding: 0.03rem 0.22rem;
  }

  .autotest-live-panel .toggle {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  .autotest-live-panel .dev-toggle-inline {
    grid-template-columns: minmax(0, 1fr);
  }

  .autotest-live-panel .dev-toggle-inline .dev-toggle-inline__lead {
    grid-template-columns: 0.86rem minmax(0, 1fr);
  }

  /* Mobile compact mode: keep counters visible and hide per-row switches. */
  .autotest-live-panel .toggle > input[type="checkbox"] {
    display: none;
  }
}

.dev-sandbox-toolkit {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
}

.dev-sandbox-toolkit__lead {
  margin-bottom: 0.5rem;
}

.dev-sandbox-toolkit__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.dev-sandbox-toolkit__field input,
.dev-sandbox-toolkit__field select {
  width: 100%;
  min-width: 0;
}

.dev-sandbox-toolkit__row {
  flex-wrap: wrap;
}

/* Compact rail layout can run up to 1180px (see JS `canUseCompactNavRailLayout`). */
@media (max-width: 1180px) {
  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed)
    ~ .player-region {
    padding-top: var(--mobile-rail-anchor-height, 0px) !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar.collapsed
    ~ .player-region {
    padding-top: 0 !important;
  }

  /* Hidden-nav shells: keep a small readable top gap under rail/handle. */
  body:not(.is-logged-out)[data-layout="standard-lms"]:has(
      .dev-sidebar:not(.collapsed)
    )
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.38rem !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]:has(.dev-sidebar.collapsed)
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.62rem !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]:has(
      .dev-sidebar.collapsed
    )[data-sidebar-active-panel="classes"]
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.48rem !important;
  }
}

/* Mobile top toolbar: keep all nav icons reachable via swipe. */
@media (max-width: 900px) {
  /* Pre-auth guard: never show mobile rail before login. */
  body.is-logged-out .dev-sidebar,
  body.is-logged-out .dev-sidebar__rail {
    display: none !important;
  }

  /* Mobile anchor model: rail fixed, player scrolls beneath it. */
  body[data-layout="standard-lms"] {
    --mobile-rail-anchor-height: 5.2rem;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed) {
    position: relative;
    z-index: 30;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed)
    .dev-sidebar__rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 31;
    /* Keep icons and scroll area inside horizontal safe areas (avoids “rail” under notch/home). */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
  }

  /* `#dev-panel` sits between sidebar and `.player-region`; use `~` not `+`. */
  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar:not(.collapsed)
    ~ .player-region {
    padding-top: var(--mobile-rail-anchor-height) !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]
    .dev-sidebar.collapsed
    ~ .player-region {
    padding-top: 0 !important;
  }

  /*
   * Course outline: keep z-index under .dev-sidebar__rail (31) so the top rail + grabber
   * stay painted above the overlay. Drop .player-region’s stacking context so the fixed
   * panel’s z-index (28 in player-core) participates at the root below the shell (30/31+).
   * Slight horizontal inset when the rail is expanded = a bit less width, more scroll.
   */
  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    .player-region {
    z-index: auto !important;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #course-menu-panel.course-menu--in-player {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #player-container
    #player-layout {
    overflow: hidden;
  }

  body[data-layout="standard-lms"].course-menu-open-mobile:not(.is-logged-out)
    #player-container
    #player-main {
    visibility: hidden;
    pointer-events: none;
    overflow: hidden !important;
  }

  body.is-logged-out[data-layout="standard-lms"]:not([data-theme="dev-view"])
    .player-region {
    padding-top: 0 !important;
  }

  /* Mobile: remove player-region framing/border chrome entirely. */
  body[data-layout="standard-lms"] .player-region,
  body[data-layout="standard-lms"] #player-container,
  body[data-layout="standard-lms"] .legacy-player,
  body[data-layout="standard-lms"] .legacy-player__layout,
  body[data-layout="standard-lms"] #player-main {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-clip: border-box;
  }

  body[data-layout="standard-lms"] .dev-sidebar__rail {
    background: var(--dev-rail-chrome-surface);
  }

  .dev-sidebar__rail {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    border-bottom: 1px solid var(--nls-color-border);
  }

  @media (hover: hover) and (pointer: fine) {
    .dev-sidebar__rail {
      cursor: grab;
    }
  }

  .dev-sidebar__rail.dev-sidebar__rail--dragging,
  .dev-sidebar__rail.dev-sidebar__rail--dragging * {
    cursor: grabbing !important;
    user-select: none;
  }

  .dev-sidebar__rail::-webkit-scrollbar {
    height: 0;
  }

  .dev-sidebar__rail > .dev-nav-icon {
    flex: 0 0 auto;
  }

  /*
   * Mobile rail: full viewport width, original short bar height (not a tall grip strip).
   * Hamburger glyph hidden — minimal centered line; swipe + tap wired in JS.
   */
  .dev-sidebar #sidebar-toggle.dev-nav-collapse--rail-swipe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    width: 100%;
    min-width: 0;
    height: 1.02rem;
    min-height: 1.02rem;
    margin: 0;
    padding: 0 calc(0.35rem + env(safe-area-inset-right, 0px)) 0
      calc(0.35rem + env(safe-area-inset-left, 0px));
    border: 1px solid var(--nls-color-border);
    border-radius: 999px;
    background: var(--dev-rail-chrome-surface);
    /* Same ink as unselected rail tabs; ::after grip uses currentColor */
    color: var(--nls-color-text-muted);
    box-shadow: 0 2px 8px
      color-mix(in srgb, var(--nls-shadow-color) 50%, transparent);
    box-sizing: border-box;
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }

  .dev-sidebar
    #sidebar-toggle.dev-nav-collapse--rail-swipe.dev-nav-collapse--pulled {
    opacity: 0.9;
  }

  .dev-sidebar
    #sidebar-toggle.dev-nav-collapse--rail-swipe
    .dev-nav-icon__label,
  .dev-sidebar
    #sidebar-toggle.dev-nav-collapse--rail-swipe
    .dev-nav-icon__glyph {
    display: none !important;
  }

  .dev-sidebar #sidebar-toggle.dev-nav-collapse--rail-swipe::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 0.22rem;
    border-radius: 999px;
    background: currentColor;
  }

  .dev-sidebar:not(.collapsed) #sidebar-toggle.dev-nav-collapse--rail-swipe {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    top: var(
      --mobile-open-toggle-top,
      calc(env(safe-area-inset-top, 0px) + 5.02rem)
    );
    z-index: 80;
    height: 0.9rem;
    min-height: 0.9rem;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0 0 11px 11px;
    border-bottom: 1px solid var(--nls-color-border);
    box-shadow: none;
    background: var(--dev-rail-chrome-surface);
  }

  /* Collapsed: hide full rail; keep Menu control to reopen. */
  .dev-sidebar.collapsed {
    position: relative;
    z-index: 61;
    height: 0;
    min-height: 0;
    border-bottom: 0;
    overflow: visible;
  }

  .dev-sidebar.collapsed
    .dev-sidebar__rail
    > .dev-nav-icon:not(#sidebar-toggle) {
    display: none;
  }

  .dev-sidebar.collapsed .dev-sidebar__rail {
    height: 0;
    min-height: 0;
    justify-content: center;
    border-bottom: 0;
    overflow: visible;
    padding: 0;
  }

  .dev-sidebar.collapsed #sidebar-toggle.dev-nav-collapse--rail-swipe {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    z-index: 70;
    top: calc(env(safe-area-inset-top, 0px) - 1px);
    border-top: 0;
    border-radius: 0 0 11px 11px;
    height: 0.9rem;
    min-height: 0.9rem;
    background: var(--dev-rail-chrome-surface);
  }

  /* Dev view mobile: restore readable player padding after global strip */
  body[data-theme="dev-view"][data-layout="standard-lms"] #player-panel.panel {
    padding: 0.55rem 0.85rem 0.9rem !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] #player-main {
    padding: 10px 0 calc(var(--player-nav-height, 56px) + 18px) !important;
  }

  /* Lesson Back/Next hidden in hub shells — dev-view rule above uses !important; match collapse here. */
  body[data-theme="dev-view"][data-layout="standard-lms"]
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding: 10px 0 max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Side-rail pages (Home/Account/Courses/etc.): use outer workspace scroll, not nested #player-main scroll. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  .player-region:has(#player-nav[hidden]) {
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:has(#player-nav[hidden]),
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:has(#player-nav[hidden])
  .legacy-player__workspace,
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:has(#player-nav[hidden])
  .legacy-player__layout {
  height: auto;
  min-height: 0;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-layout:has(#player-nav[hidden])
  #player-main {
  overflow-y: visible !important;
  height: auto !important;
  min-height: 0;
  padding-top: 0 !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
}

/*
 * Dev view — continuous canvas (pre-auth + post-auth, mobile + desktop):
 * no floating player “card”; body --nls-color-bg-alt no longer reads as a blue frame.
 */
body[data-theme="dev-view"][data-layout="standard-lms"] {
  background: var(--nls-color-surface);
}

body[data-theme="dev-view"][data-layout="standard-lms"] .player-region {
  background: var(--nls-color-surface);
}

body[data-theme="dev-view"][data-layout="standard-lms"] #player-panel.panel {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.85rem 1.5rem 1.35rem;
  gap: 0.85rem;
}

/*
 * Launched course (embedded player): flush to shell edges — same continuous canvas as other
 * dev-view surfaces; removes legacy .player-region / #player-panel gutters and extra
 * #player-main bottom pad so the bottom nav sits on the viewport edge.
 */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  .player-region:has(
    #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
  ) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 0 !important;
}

/* Mobile: restore space below fixed top rail + handle so course body/menu are not covered. */
@media (max-width: 900px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .dev-sidebar:not(.collapsed)
    ~ .player-region:has(
      #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
    ) {
    padding-top: var(--mobile-rail-anchor-height) !important;
    /* Contain full-bleed / 100vw descendants so content does not slide under the right inset. */
    overflow-x: hidden;
    box-sizing: border-box;
  }
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  .player-region:has(
    #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
  )
  #player-panel.panel {
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:not(.player-placeholder-mode):not(.player-course-placeholder) {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  height: 100% !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container:not(.player-placeholder-mode):not(.player-course-placeholder)
  #player-main {
  padding-top: 0 !important;
  padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: calc(
    var(--player-nav-height, 56px) + max(0px, env(safe-area-inset-bottom, 0px))
  ) !important;
  min-height: 0 !important;
}

body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
  .player-region {
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/* Brand strip: neutral edge (theme border-soft reads very blue) */
body[data-theme="dev-view"] .dev-brand-module {
  border: 1px solid color-mix(in srgb, #e2e8f0 90%, #cbd5e1 10%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 5px 18px rgba(15, 23, 42, 0.045);
}

body[data-theme="dev-view"] .landing-auth-panel__header .dev-brand-module--image-only,
body[data-theme="dev-view"] .landing-auth-panel__header .dev-brand-module--compact-books {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sidebar rail: same neutral family as login / inputs (all breakpoints) */
body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
  background: var(--dev-rail-chrome-surface);
}

body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
  background: var(--nls-color-surface);
}

/* Desktop guardrail: keep left rail always clickable above player/menu layers. */
@media (min-width: 901px) {
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-sidebar {
    position: relative;
    z-index: 2000;
    pointer-events: auto;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-sidebar__rail,
  body:not(.is-logged-out)[data-layout="standard-lms"] .dev-sidebar__rail .dev-nav-icon {
    pointer-events: auto;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"] .player-region {
    position: relative;
    z-index: 1;
  }
}

/*
 * Narrow rail + sidebar widths must NOT apply below 901px: mobile uses a full-width
 * horizontal rail with position:fixed + left:0;right:0 — a 72px rail width breaks scroll/swipe.
 */
@media (min-width: 901px) {
  /* Pin desktop rail order for bottom utility cluster. */
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    .dev-nav-icon[data-panel="developer"] {
    order: 900 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-review-shortcut {
    order: 901 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-store {
    order: 910 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-admin {
    order: 920 !important;
  }
  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    #sidebar-quick-logout {
    order: 930 !important;
  }

  /* Rail-only sidebar (#dev-panel deprecated) */
  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar {
    width: 72px;
    border-right: 1px solid color-mix(in srgb, #e2e8f0 88%, #cbd5e1 12%);
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-sidebar__rail {
    width: 72px;
    padding: 0.62rem 0.28rem;
    gap: 0.16rem;
    align-items: center;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-sidebar__rail
    .dev-nav-icon {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding: 0.48rem 0.22rem;
    border-radius: 10px;
    gap: 0.1rem;
    font-size: 0.68rem;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]
    .dev-nav-icon__glyph
    svg {
    width: 21px;
    height: 21px;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"] .dev-nav-icon__label {
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.012em;
    line-height: 1.15;
    padding-bottom: 0.08em;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* Desktop: center pre-auth login vertically (avoids tiny card lost in empty canvas) */
@media (min-width: 901px) {
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
    .player-region {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: max(1.25rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }
}

/*
 * Mobile / narrow: pre-auth shell — fill viewport height with safe-area padding and
 * optical top weight (avoids full vertical center + keyboard overlap). See AEX dev note
 * `DEV_NOTES_AEX_DEV_APP_PREAUTH_POLISH_v0.1.txt`.
 */
@media (max-width: 900px) {
  body.is-logged-out[data-theme="dev-view"][data-layout="standard-lms"]
    .player-region {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: max(
      0.75rem,
      calc(env(safe-area-inset-top, 0px) + 10vh)
    ) !important;
    padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
  }
}

/*
 * Dev-view post-auth placeholders: one primary scroll for the workspace (not `#player-main`).
 * `#player-main` is narrower than the player column, so `overflow-y: auto` there draws a
 * “mid-screen” scrollbar; outer scroll keeps the bar at the canvas edge. Applies to empty +
 * course placeholder variants; real course player keeps `#player-main` as the lesson pane.
 */
@media (min-width: 901px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__workspace {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-panel.panel {
    padding: 0 !important;
    gap: 0 !important;
    /* Shrink-wrap to content — `flex: 1` was stretching the panel to ~full viewport height,
       which made `.player-region` think it needed to scroll even when copy + video fit. */
    flex: 0 0 auto;
    align-self: stretch;
    min-height: 0;
    width: 100%;
    height: auto;
    max-height: none;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-placeholder-mode
    #player-main {
    display: block;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-placeholder-mode
    .player-placeholder {
    width: 100%;
    margin-inline: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder) {
    height: auto;
    min-height: 0;
    flex: 0 1 auto;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__layout {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-placeholder-mode
    #player-main {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    overflow-y: visible;
    height: auto;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container.player-course-placeholder
    #player-main {
    display: block;
    box-sizing: border-box;
    min-height: 0;
    overflow-y: visible;
    height: auto;
  }
}

/* Mobile: `.dev-shell` already scrolls — avoid nested scroll on `#player-main` for placeholders. */
@media (max-width: 900px) {
  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out):has(
      .dev-sidebar:not(.collapsed)
    )
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    padding-top: var(--mobile-rail-anchor-height) !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    /* Keep content below fixed top rail in placeholder-mode hubs. */
    padding-top: var(--mobile-rail-anchor-height) !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    flex-direction: column;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out):has(
      .dev-sidebar.collapsed
    )
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    ) {
    padding-top: 0 !important;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__workspace {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder) {
    height: auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    .player-region:has(
      #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    )
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    .legacy-player__layout {
    height: auto;
    flex: 0 1 auto;
    min-height: 0;
  }

  body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
    #player-container:is(.player-placeholder-mode, .player-course-placeholder)
    #player-main {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 0;
    padding-bottom: 16px !important;
  }
}
/* Home placeholder alignment lock: match Account/Courses container envelope exactly. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container.player-placeholder-mode
  #player-main
  > .player-placeholder {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

/* Match Home placeholder inner content envelope to progress-player-detail. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-container.player-placeholder-mode
  #player-main
  > .player-placeholder
  > .player-placeholder__content {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

/* Absolute Home lock: when dev Home stage exists, use shared centered envelope. */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main:has(.dev-surface-brief)
  > .player-placeholder {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main:has(.dev-surface-brief)
  > .player-placeholder
  > .player-placeholder__content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Deterministic Home shell lock (class set by dev-view placeholder on post-auth). */
body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main
  > .dev-home-player-shell {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0.75rem !important;
  box-sizing: border-box !important;
}

body[data-theme="dev-view"][data-layout="standard-lms"]:not(.is-logged-out)
  #player-main
  > .dev-home-player-shell
  > .dev-home-content-root {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Shared tuning: one rhythm across all panels/open-closed states. */
@media (max-width: 1180px) {
  body:not(.is-logged-out)[data-layout="standard-lms"]:has(
      .dev-sidebar:not(.collapsed)
    )
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.78rem !important;
  }

  body:not(.is-logged-out)[data-layout="standard-lms"]:has(.dev-sidebar.collapsed)
    #player-layout:has(#player-nav[hidden])
    #player-main {
    padding-top: 0.74rem !important;
  }
}