/* ═══════════════════════════════════════════════
   BLC Component System
   Based on Cadenze visual system — depth, grain, glow
   Adapted for Body Language Curriculum brand
   ═══════════════════════════════════════════════ */

/* ── App Background ── */
body {
  font-family: var(--fn);
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 105%, rgba(100,80,200,0.15) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-base-top) 0%, var(--bg-base-mid) 45%, var(--bg-base-bottom) 100%);
  min-height: 100vh;
  max-width: 100%;
}

/* Keep an upward swipe at the top of the app from handing control back to the
   browser and triggering pull-to-refresh on mobile. */
html,
body {
  overscroll-behavior-y: none;
}

/* ── Cards always block the background texture ──
   Base rule: any card, panel, input or box sits on a solid dark surface.
   Per-component overrides below will naturally win via specificity. */
.card,
[class*="-card"],
[class*="-panel"],
input,
textarea,
select {
  background-color: #1a1a1f;
}

/* ── Shared form controls ──
   Keep the established 12px surface treatment from the teacher and local-dance
   forms available wherever a screen uses the shared .s-input hook. */
.s-input {
  min-height: 48px;
  box-sizing: border-box;
  border: 1px solid var(--panel-stroke);
  border-radius: 12px;
  outline: none;
  background: color-mix(in srgb, var(--blc-color-white) 6%, transparent);
  color: var(--text-primary);
  caret-color: var(--text-primary);
  font-family: var(--blc-font-body);
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 13px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.s-input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 82%, transparent);
  opacity: 1;
}

.s-input:focus {
  border-color: color-mix(in srgb, var(--blc-color-blue-soft) 56%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blc-color-blue-soft) 14%, transparent);
}

textarea.s-input {
  min-height: 96px;
  resize: vertical;
}

select.s-input {
  cursor: pointer;
}

select.s-input option {
  background: var(--bg-base-bottom);
  color: var(--text-primary);
}

.s-input:disabled {
  cursor: not-allowed;
  opacity: .55;
}

/* ── Noise grain overlay on body ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
}

/* ── Screen light source (top-right) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.06) 0%, transparent 60%);
}

/* ── Hide scrollbars globally ── */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }

/* ── Shared Grain Texture ── */
.blc-panel::after,
.blc-button::after,
.blc-tile::after,
.blc-tip::after,
.blc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
  border-radius: inherit;
}

/* ── Card center radial glow ── */
.blc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.10) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* ═══ PANEL SURFACE ═══ */
.blc-panel {
  background: linear-gradient(180deg, var(--panel-top) 0%, var(--panel-bottom) 100%);
  border-radius: var(--panel-radius);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 4px solid rgba(0,0,0,0.5);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
  margin: 0 16px 12px;
  overflow: hidden;
}

.blc-panel-inner {
  padding: 16px;
  position: relative;
  z-index: 1;
}

/* Pathways explainer panel */
.pw-explainer-panel {
  margin: 0 0 16px;
}

.pw-explainer-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.pw-explainer-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: white;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.pw-explainer-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,216,102,0.9);
}

.pw-explainer-body-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms ease, opacity 250ms ease;
  opacity: 1;
}

.pw-explainer-body-inner {
  overflow: hidden;
  min-height: 0;
}

.pw-explainer-body {
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pw-explainer-body p {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.68);
  overflow-wrap: anywhere;
}

.pw-explainer-panel[data-collapsed="true"] .pw-explainer-body-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* Student Pathways reference rebuild */
#screen-pathways {
  --pw-line: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  --pw-line-strong: color-mix(in srgb, var(--blc-color-white) 20%, transparent);
  --pw-muted: var(--text-secondary);
  --pw-faint: color-mix(in srgb, var(--blc-color-white) 32%, transparent);
  --pw-panel: color-mix(in srgb, var(--panel-bottom) 88%, transparent);
  --pw-panel-soft: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  --pw-accent: var(--blc-color-blue);
  --pw-accent-bg: color-mix(in srgb, var(--pw-accent) 12%, transparent);
  --pw-accent-border: color-mix(in srgb, var(--pw-accent) 26%, transparent);
  color: var(--text-primary);
}

.student-pathways__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  background: color-mix(in srgb, var(--bg-base-bottom) 92%, transparent);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--pw-line);
}

/* Student My Teachers reference rebuild */
#screen-my-teachers {
  --st-line: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  --st-line-strong: color-mix(in srgb, var(--blc-color-white) 20%, transparent);
  --st-panel: color-mix(in srgb, var(--blc-color-white) 3.5%, transparent);
  --st-panel-strong: color-mix(in srgb, var(--blc-color-white) 6%, transparent);
  --st-muted: color-mix(in srgb, var(--text-muted) 72%, transparent);
  --st-muted-soft: color-mix(in srgb, var(--text-muted) 48%, transparent);
  --st-accent: var(--blc-color-cyan);
  --st-accent-soft: color-mix(in srgb, var(--st-accent) 42%, var(--blc-color-white));
  --st-accent-bg: color-mix(in srgb, var(--st-accent) 8%, transparent);
  --st-accent-border: color-mix(in srgb, var(--st-accent) 30%, transparent);
  --st-gold-bg: color-mix(in srgb, var(--blc-color-gold) 7%, transparent);
  --st-gold-border: color-mix(in srgb, var(--blc-color-gold) 32%, transparent);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
}

#screen-my-teachers .student-teachers__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 220;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--bg-base-bottom) 92%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--st-line);
}

#screen-my-teachers .student-teachers__back,
#screen-my-teachers .student-teachers__header-spacer {
  width: 32px;
  height: 32px;
}

#screen-my-teachers .student-teachers__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--st-muted);
  cursor: pointer;
}

#screen-my-teachers .student-teachers__back .blc-svg-icon {
  width: 22px;
  height: 22px;
}

#screen-my-teachers .student-teachers__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  font-family: var(--blc-font-headline);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-primary);
}

#screen-my-teachers .student-teachers__title-icon {
  display: inline-flex;
  color: var(--st-accent);
}

#screen-my-teachers .student-teachers__title-icon .blc-svg-icon {
  width: 16px;
  height: 16px;
}

#screen-my-teachers .student-teachers__main {
  min-height: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 76px 18px 116px;
  box-sizing: border-box;
  font-family: var(--blc-font-body);
}

#screen-my-teachers .student-teachers__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#screen-my-teachers .student-teachers__eyebrow {
  margin: 0;
  font-family: var(--blc-font-label);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--st-accent);
}

#screen-my-teachers .student-teachers__list {
  min-height: 40px;
  color: var(--st-muted-soft);
  font-size: 13px;
}

#screen-my-teachers .student-teachers__card,
#screen-my-teachers .student-teachers__result-card,
#screen-my-teachers .student-teachers__empty {
  border-radius: 16px;
  background: var(--st-panel);
  border: 1px solid var(--st-line);
}

#screen-my-teachers .student-teachers__card {
  padding: 14px;
  margin-bottom: 12px;
}

#screen-my-teachers .student-teachers__card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#screen-my-teachers .student-teachers__avatar,
#screen-my-teachers .student-teachers__result-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  font-family: var(--blc-font-headline);
  font-weight: 700;
  color: var(--blc-color-white);
}

/* Prompt #1106 — uploaded profile photo, layered over an initials circle. It fills
   the circle; if the image is missing or fails to load it removes itself (see
   blcAvatarImgHtml / blcApplyAvatarToEl) and the initials underneath show through. */
.blc-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

/* Prompt #1110 — generic person row for search/followers/following lists. Reuses
   .blc-card for the row container and .blc-avatar-img for the photo overlay; this
   is just the initials circle + follow-button pieces those don't already provide. */
.blc-person-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  font-family: var(--blc-font-headline);
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

.blc-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.blc-person-row__body {
  flex: 1;
  min-width: 0;
}

.blc-person-row__name {
  font-family: var(--blc-font-headline);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blc-person-row__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.blc-follow-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 10px;
  font-family: var(--blc-font-body);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--blc-color-cyan) 34%, transparent);
  background: color-mix(in srgb, var(--blc-color-cyan) 14%, transparent);
  color: var(--blc-color-cyan);
}

.blc-follow-btn.is-following {
  border-color: var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 6%, transparent);
  color: var(--text-muted);
}

.blc-follow-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Prompt #1112 — Following-based leaderboard: sort pills + a person row that shows
   streak/badges/XP together (never a rank number). */
.blc-lb-sortpill {
  flex: 1;
  padding: 8px 4px;
  border-radius: 999px;
  border: 1px solid var(--panel-stroke);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--blc-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.blc-lb-sortpill.is-active {
  border-color: color-mix(in srgb, var(--accent-gold) 50%, transparent);
  background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
  color: var(--accent-gold);
}

.blc-lb-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}

.blc-lb-row__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blc-lb-row__stats {
  display: flex;
  gap: 8px;
}

.blc-lb-chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--text-muted);
  font-family: var(--blc-font-headline);
  font-size: 12px;
  font-weight: 700;
}

.blc-lb-chip .material-symbols-outlined {
  font-size: 15px;
}

.blc-lb-chip.is-active {
  background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
  color: var(--accent-gold);
}

.blc-lb-chip__label {
  font-family: var(--blc-font-body);
  font-weight: 600;
  text-transform: lowercase;
  opacity: 0.75;
}

#screen-my-teachers .student-teachers__avatar {
  width: 46px;
  height: 46px;
  font-size: 17px;
}

#screen-my-teachers .student-teachers__avatar--purple {
  background: linear-gradient(135deg, var(--blc-color-purple), var(--blc-color-blue));
}

#screen-my-teachers .student-teachers__avatar--pink {
  background: linear-gradient(135deg, var(--blc-color-pink), var(--blc-color-gold));
}

#screen-my-teachers .student-teachers__avatar--cyan {
  background: linear-gradient(135deg, var(--blc-color-cyan), var(--blc-color-cyan-bright));
}

#screen-my-teachers .student-teachers__card-copy,
#screen-my-teachers .student-teachers__result-copy {
  flex: 1;
  min-width: 0;
}

#screen-my-teachers .student-teachers__name,
#screen-my-teachers .student-teachers__result-name {
  font-family: var(--blc-font-headline);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-my-teachers .student-teachers__name {
  font-size: 15px;
}

#screen-my-teachers .student-teachers__meta,
#screen-my-teachers .student-teachers__result-meta,
#screen-my-teachers .student-teachers__empty-copy {
  color: var(--st-muted-soft);
  line-height: 1.5;
}

#screen-my-teachers .student-teachers__meta {
  margin-top: 2px;
  font-size: 11px;
}

#screen-my-teachers .student-teachers__count {
  flex-shrink: 0;
  text-align: right;
}

#screen-my-teachers .student-teachers__count-number {
  font-family: var(--blc-font-headline);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  color: var(--st-accent);
}

#screen-my-teachers .student-teachers__count-number.is-muted {
  color: var(--st-muted-soft);
}

#screen-my-teachers .student-teachers__count-label {
  margin-top: 3px;
  font-family: var(--blc-font-label);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--st-muted-soft);
}

#screen-my-teachers .student-teachers__book-button,
#screen-my-teachers .student-teachers__empty-action,
#screen-my-teachers .student-teachers__add-button,
#screen-my-teachers .student-teachers__request-button,
#screen-my-teachers .student-teachers__result-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 11px;
  font-family: var(--blc-font-headline);
  font-weight: 700;
  cursor: pointer;
}

#screen-my-teachers .student-teachers__book-button {
  width: 100%;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--st-accent-border);
  background: var(--st-accent-bg);
  color: var(--st-accent-soft);
  font-size: 13px;
}

#screen-my-teachers .student-teachers__book-button .blc-svg-icon {
  width: 16px;
  height: 16px;
}

#screen-my-teachers .student-teachers__add-button,
#screen-my-teachers .student-teachers__request-button {
  width: 100%;
  margin-top: 4px;
  padding: 13px 14px;
  border: 1px dashed var(--st-gold-border);
  background: var(--st-gold-bg);
  color: var(--blc-color-gold);
  font-size: 13px;
}

#screen-my-teachers .student-teachers__request-button {
  margin-top: 10px;
}

#screen-my-teachers .student-teachers__add-button .blc-svg-icon,
#screen-my-teachers .student-teachers__request-button .blc-svg-icon,
#screen-my-teachers .student-teachers__empty-action .blc-svg-icon {
  width: 14px;
  height: 14px;
}

#screen-my-teachers .student-teachers__empty {
  padding: 18px 16px;
}

#screen-my-teachers .student-teachers__empty-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--st-accent-bg);
  color: var(--st-accent);
}

#screen-my-teachers .student-teachers__empty-icon .blc-svg-icon {
  width: 22px;
  height: 22px;
}

#screen-my-teachers .student-teachers__empty-title {
  margin-bottom: 6px;
  font-family: var(--blc-font-headline);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

#screen-my-teachers .student-teachers__empty-copy {
  margin-bottom: 12px;
  font-size: 12px;
}

#screen-my-teachers .student-teachers__empty-action {
  padding: 10px 14px;
  border: 1px solid var(--st-accent-border);
  background: var(--st-accent-bg);
  color: var(--st-accent-soft);
  font-size: 13px;
}

#screen-my-teachers .student-teachers__search {
  margin-top: 2px;
}

#screen-my-teachers .student-teachers__search-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--st-muted);
}

#screen-my-teachers .student-teachers__search-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
  padding: 4px;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  background: rgba(255,255,255,0.035);
}

#screen-my-teachers .student-teachers__mode {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--st-muted);
  font-family: var(--blc-font-headline);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#screen-my-teachers .student-teachers__mode--active {
  background: var(--st-panel-strong);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--st-line-strong);
}

#screen-my-teachers .student-teachers__radius-search {
  margin-top: 0;
}

#screen-my-teachers .student-teachers__radius-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

#screen-my-teachers .student-teachers__search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--st-line-strong);
  background: var(--st-panel-strong);
}

#screen-my-teachers .student-teachers__search-icon {
  display: inline-flex;
  color: var(--st-muted);
}

#screen-my-teachers .student-teachers__search-icon .blc-svg-icon {
  width: 16px;
  height: 16px;
}

#screen-my-teachers #studentTeacherSearch {
  width: 100%;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  font-size: 13px;
}

#screen-my-teachers #studentTeacherZipSearch {
  width: 100%;
  min-width: 0;
  padding: 11px 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  font-size: 13px;
}

#screen-my-teachers .student-teachers__radius-select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--st-line-strong);
  border-radius: 12px;
  background: var(--st-panel-strong);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  font-size: 13px;
  outline: none;
  padding: 0 10px;
}

#screen-my-teachers #studentTeacherSearch::placeholder,
#screen-my-teachers #studentTeacherZipSearch::placeholder {
  color: var(--st-muted-soft);
}

#screen-my-teachers .student-teachers__search-results {
  margin-top: 8px;
}

#screen-my-teachers .student-teachers__search-message {
  padding: 10px 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--st-muted);
}

#screen-my-teachers .student-teachers__search-message--error {
  color: var(--blc-color-pink-hot);
}

#screen-my-teachers .student-teachers__result-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 6px;
}

#screen-my-teachers .student-teachers__result-avatar {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blc-color-gold), var(--blc-color-pink));
  font-size: 13px;
}

#screen-my-teachers .student-teachers__result-name {
  font-size: 13px;
}

#screen-my-teachers .student-teachers__result-meta {
  margin-top: 2px;
  font-size: 10px;
}

#screen-my-teachers .student-teachers__result-action {
  flex-shrink: 0;
  padding: 7px 12px;
  border: 1px solid var(--st-gold-border);
  background: var(--st-gold-bg);
  color: var(--blc-color-gold);
  font-size: 12px;
}

#screen-my-teachers .student-teachers__result-action.is-pending,
#screen-my-teachers .student-teachers__result-action:disabled {
  cursor: default;
  opacity: 0.78;
}

#screen-my-teachers .student-teachers__result-status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--blc-font-headline);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#screen-my-teachers .student-teachers__result-status--linked {
  color: var(--st-accent);
}

#screen-my-teachers .student-teachers__result-status--pending {
  color: var(--blc-color-gold);
}

#screen-my-teachers .student-teachers__result-status .blc-svg-icon {
  width: 12px;
  height: 12px;
}

.student-pathways__back {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pw-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.student-pathways__back .blc-svg-icon { width: 22px; height: 22px; }

.student-pathways__header-copy {
  flex: 1;
  min-width: 0;
}

.student-pathways__eyebrow,
.student-pathways__section-label,
.student-pathways__meta,
.student-pathways__chip,
.student-pathways__action,
.student-pathways__detail-progress-label,
.student-pathways__step-meta {
  font-family: var(--blc-font-label);
  text-transform: uppercase;
}

.student-pathways__eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: color-mix(in srgb, var(--pw-muted) 70%, transparent);
}

/* Step day is context, not a pill control. Keep it deliberately quieter than
   the adjacent DRILL / EXERCISE type badge. */
.student-pathways__step-day-label {
  color: color-mix(in srgb, var(--text-primary) 54%, transparent);
  font-family: var(--blc-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
}

.student-pathways__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--blc-font-display);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--text-primary);
}

.student-pathways__title .blc-svg-icon { width: 20px; height: 20px; color: var(--blc-color-blue); }

.student-pathways__tabbar {
  padding: 10px 18px 0;
  margin-top: 72px;
  background: color-mix(in srgb, var(--bg-base-bottom) 92%, transparent);
  border-bottom: 1px solid var(--pw-line);
}

.student-pathways__tabs {
  display: flex;
  gap: 3px;
  max-width: 300px;
  margin: 0 auto;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
}

.student-pathways__tab {
  flex: 1;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.student-pathways__tab.is-active {
  background: color-mix(in srgb, var(--blc-color-white) 18%, transparent);
  color: var(--text-primary);
}

.student-pathways__main {
  padding-top: 14px;
  padding-bottom: 120px;
}

.student-pathways__intro {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--pw-panel-soft);
  border: 1px solid var(--pw-line);
  margin-bottom: 18px;
}

.student-pathways__intro .blc-svg-icon {
  width: 15px;
  height: 15px;
  color: color-mix(in srgb, var(--pw-muted) 70%, transparent);
}

.student-pathways__intro-text {
  flex: 1;
  font-family: var(--blc-font-body);
  font-size: 11px;
  color: color-mix(in srgb, var(--pw-muted) 92%, transparent);
  line-height: 1.45;
}

.student-pathways__section-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--blc-color-blue-soft);
  margin: 0 0 10px;
}

.student-pathways__section-label.is-muted {
  color: color-mix(in srgb, var(--pw-muted) 70%, transparent);
  margin-top: 22px;
  margin-bottom: 12px;
}

.student-pathways__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.student-pathways__card {
  width: 100%;
  text-align: left;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--pw-accent-border);
  background: linear-gradient(140deg, color-mix(in srgb, var(--pw-accent) 11%, transparent), color-mix(in srgb, var(--pw-accent) 3%, transparent));
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  color: var(--text-primary);
}

.student-pathways__card.is-featured {
  display: block;
  padding: 16px;
  margin-bottom: 22px;
  box-shadow: 0 0 30px -10px var(--pw-accent);
}

.student-pathways__card.is-locked {
  cursor: pointer;
  opacity: .72;
  filter: saturate(.55);
}

.student-pathways__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--pw-accent-bg);
  border: 1px solid var(--pw-accent-border);
  color: var(--pw-accent);
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  white-space: nowrap;
}

.student-pathways__badge .blc-svg-icon { width: 12px; height: 12px; }

.student-pathways__card-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--pw-accent), color-mix(in srgb, var(--pw-accent) 40%, transparent));
  border: 1px solid color-mix(in srgb, var(--pw-accent) 50%, transparent);
  color: var(--text-primary);
  font-family: var(--blc-font-label);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 16px -4px var(--pw-accent);
}

.student-pathways__card-body {
  flex: 1;
  min-width: 0;
}

.student-pathways__card-top,
.student-pathways__featured-top,
.student-pathways__progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.student-pathways__name {
  font-family: var(--blc-font-display);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--text-primary);
}

.student-pathways__featured-name {
  margin: 10px 0 4px;
  font-family: var(--blc-font-display);
  font-size: 19px;
  line-height: 1.12;
  font-weight: 800;
}

.student-pathways__desc {
  margin: 3px 0 0;
  font-family: var(--blc-font-body);
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--pw-muted) 92%, transparent);
}

.student-pathways__featured-desc {
  margin: 0 0 12px;
  font-family: var(--blc-font-body);
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--pw-muted) 92%, transparent);
}

.student-pathways__meta {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: color-mix(in srgb, var(--pw-muted) 66%, transparent);
}

.student-pathways__action-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pw-accent) 40%, transparent);
  background: var(--pw-accent-bg);
  color: var(--blc-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.student-pathways__action-icon .blc-svg-icon { width: 18px; height: 18px; }
.student-pathways__action-icon [data-blc-icon="play02"] .blc-svg-icon { fill: currentColor; }
.student-pathways__action-icon [data-blc-icon="lock04"] .blc-svg-icon { stroke: currentColor; }

.student-pathways__progress {
  margin-bottom: 12px;
}

.student-pathways__bar {
  height: 6px;
  width: 100%;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  overflow: hidden;
}

.student-pathways__bar-fill {
  width: var(--pw-progress, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--pw-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pw-accent) 50%, transparent);
}

.student-pathways__meta-strong {
  font-family: var(--blc-font-label);
  font-size: 10px;
  color: var(--pw-accent);
}

.student-pathways__primary-action {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--blc-color-blue-soft);
  color: color-mix(in srgb, var(--bg-base-bottom) 82%, var(--blc-color-blue));
  font-family: var(--blc-font-display);
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.student-pathways__primary-action .blc-svg-icon { width: 18px; height: 18px; }

.student-pathways__detail-card {
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--pw-accent) 12%, transparent), color-mix(in srgb, var(--pw-accent) 3%, transparent));
  border: 1px solid var(--pw-accent-border);
  margin-bottom: 18px;
}

.student-pathways__detail-title {
  margin: 8px 0 6px;
  font-family: var(--blc-font-display);
  font-size: 23px;
  line-height: 1.12;
  font-weight: 800;
}

.student-pathways__detail-desc {
  margin: 0 0 12px;
  font-family: var(--blc-font-body);
  font-size: 12px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--pw-muted) 92%, transparent);
}

.student-pathways__lock-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  border: 1px solid var(--pw-line);
  color: var(--pw-muted);
  font-family: var(--blc-font-body);
  font-size: 12px;
  line-height: 1.45;
}

.student-pathways__lock-note .blc-svg-icon { width: 18px; height: 18px; flex: 0 0 auto; }

.student-pathways__detail-progress {
  margin-bottom: 12px;
}

.student-pathways__detail-progress-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--pw-muted) 70%, transparent);
}

.student-pathways__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.student-pathways__step {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--pw-line);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.student-pathways__step.is-complete {
  border-color: color-mix(in srgb, var(--accent-cyan) 24%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 6%, transparent);
}

.student-pathways__step.is-current {
  border-color: var(--pw-accent-border);
  background: var(--pw-accent-bg);
}

.student-pathways__step.is-time-locked {
  border-color: color-mix(in srgb, var(--accent-gold) 18%, transparent);
  background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
  cursor: default;
}

.student-pathways__step.is-sequence-locked {
  opacity: .58;
  cursor: default;
}

.student-pathways__step-mark {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--blc-color-white) 7%, transparent);
  color: color-mix(in srgb, var(--text-primary) 75%, transparent);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
}

.student-pathways__step.is-complete .student-pathways__step-mark {
  background: color-mix(in srgb, var(--accent-cyan) 20%, transparent);
  color: var(--accent-cyan);
}

.student-pathways__step.is-current .student-pathways__step-mark {
  background: color-mix(in srgb, var(--pw-accent) 18%, transparent);
  color: var(--pw-accent);
}

.student-pathways__step.is-time-locked .student-pathways__step-mark {
  background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
  color: var(--accent-gold);
}

.student-pathways__step-title {
  font-family: var(--blc-font-display);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--text-primary);
}

.student-pathways__step-copy {
  margin-top: 3px;
  font-family: var(--blc-font-body);
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--pw-muted) 78%, transparent);
}

.student-pathways__step-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--pw-muted) 64%, transparent);
}

.student-pathways__type {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--pw-type-bg);
  border: 1px solid var(--pw-type-border);
  color: var(--pw-type-color);
  font-family: var(--blc-font-label);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.student-pathways__countdown {
  margin-top: 5px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  color: var(--accent-gold);
}

.student-pathways__empty,
.student-pathways__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px;
  color: var(--pw-muted);
}

.student-pathways__empty .blc-svg-icon,
.student-pathways__error .blc-svg-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: var(--pw-faint);
}

#pw-drill-detail-view .student-drill-player {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#pw-drill-detail-view .student-drill-player__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

#pw-drill-detail-view .student-drill-player__badge,
#screen-pathways .student-drill-video__variant {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

#pw-drill-detail-view .student-drill-player__level {
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pw-muted) 64%, transparent);
}

#pw-drill-detail-view .student-drill-player__title {
  margin: 0;
  font-family: var(--blc-font-display);
  font-size: 24px;
  line-height: 1.08;
  font-weight: 800;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

#pw-drill-detail-view .student-drill-player__instruction-card {
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--pw-accent-bg), transparent);
  border: 1px solid var(--pw-accent-border);
}

#pw-drill-detail-view .student-drill-player__section-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pw-accent);
}

#pw-drill-detail-view .student-drill-player__instructions {
  margin: 0;
  font-family: var(--blc-font-body);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

#pw-drill-detail-view .student-drill-player__instructions.is-empty {
  color: color-mix(in srgb, var(--pw-muted) 45%, transparent);
}

#screen-pathways .student-drill-video {
  margin-top: 4px;
}

#screen-pathways .student-drill-video__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel-top) 92%, var(--pw-accent)), var(--bg-base-bottom));
  border: 1px solid var(--pw-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-pathways .student-drill-video__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blc-color-white) 8%, transparent), transparent 60%);
  pointer-events: none;
}

#screen-pathways .student-drill-video__frame video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--bg-base-bottom);
}

/* Topic panels on the BLC Community screen. `hidden` alone loses to the panel's
   own display rule, so state it outright. */
#screen-blc-community [data-blc-topic][hidden] { display: none !important; }

#screen-pathways .student-drill-video__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg-base-bottom) 45%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-pathways .student-drill-video__poster[hidden] { display: none; }

#screen-pathways .student-drill-video__poster-play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blc-color-white) 92%, transparent);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
  position: relative;
}

/* Play triangle, drawn rather than pulled from the icon sheet so it cannot
   arrive late and leave an empty circle. */
#screen-pathways .student-drill-video__poster-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #141220;
}

#screen-pathways .student-drill-video__poster-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--blc-color-white) 22%, transparent);
  border-top-color: color-mix(in srgb, var(--blc-color-white) 85%, transparent);
  animation: blcDrillPosterSpin 0.8s linear infinite;
  display: none;
}

#screen-pathways .student-drill-video__poster.is-loading .student-drill-video__poster-spinner { display: block; }
#screen-pathways .student-drill-video__poster.is-loading .student-drill-video__poster-play { display: none; }

@keyframes blcDrillPosterSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #screen-pathways .student-drill-video__poster-spinner { animation: none; }
}

#screen-pathways .student-drill-video__state {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100%;
  padding: 22px;
  text-align: center;
  color: var(--pw-muted);
}

#screen-pathways .student-drill-video__state .blc-svg-icon {
  width: 30px;
  height: 30px;
  color: var(--pw-accent);
}

#screen-pathways .student-drill-video__state-title {
  font-family: var(--blc-font-display);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--text-primary);
}

#screen-pathways .student-drill-video__state-copy {
  max-width: 260px;
  font-family: var(--blc-font-body);
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--pw-muted) 82%, transparent);
}

#screen-pathways .student-drill-video__toggles {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

#screen-pathways .student-drill-video__variant {
  padding: 6px 12px;
  border: 1px solid var(--pw-line);
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
  color: var(--pw-muted);
  cursor: pointer;
}

#screen-pathways .student-drill-video__variant.is-active {
  border-color: var(--blc-color-blue-soft);
  background: var(--blc-color-blue-soft);
  color: color-mix(in srgb, var(--bg-base-bottom) 84%, var(--blc-color-blue));
}

#screen-pathways .student-drill-video__variant .blc-svg-icon {
  width: 11px;
  height: 11px;
}

#screen-pathways .student-drill-video__carousel,
#screen-pathways .student-drill-video__sequence {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 9px 10px;
  border: 1px solid var(--pw-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
}

#screen-pathways .student-drill-video__dots {
  display: flex;
  gap: 6px;
}

#screen-pathways .student-drill-video__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pw-muted) 42%, transparent);
  cursor: pointer;
}

#screen-pathways .student-drill-video__dot.is-active {
  width: 20px;
  background: var(--pw-accent);
}

#screen-pathways .student-drill-video__position {
  flex: 1;
  text-align: center;
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pw-muted);
}

#screen-pathways .student-drill-video__nav {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--pw-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 7%, transparent);
  color: var(--text-primary);
  font-family: var(--blc-font-label);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#screen-pathways .student-drill-video__nav:disabled,
#screen-pathways .student-drill-video__dot:disabled {
  opacity: 0.36;
  cursor: default;
}

#screen-pathways .student-drill-video__sequence {
  justify-content: space-between;
}

#screen-pathways .student-drill-video__sequence > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--blc-font-label);
  font-size: 11px;
}

#screen-pathways .student-drill-video__sequence > div:first-child span {
  overflow: hidden;
  color: var(--pw-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-pathways .student-drill-video__sequence-actions {
  display: flex;
  gap: 6px;
}

#screen-pathways .student-drill-video__caption {
  margin-bottom: 8px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pw-muted) 62%, transparent);
}

#screen-pathways .student-drill-video__review {
  margin-top: -4px;
  margin-bottom: 8px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-gold);
}

#screen-pathways .student-drill-video__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  border: 1px solid var(--pw-line);
}

#screen-pathways .student-drill-video__control {
  flex: 0 0 auto;
  min-width: 30px;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--pw-line-strong);
  background: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  color: var(--text-primary);
  font-family: var(--blc-font-label);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

#screen-pathways .student-drill-video__scrub {
  flex: 1;
  min-width: 0;
  height: 24px;
  accent-color: var(--blc-color-blue-soft);
}

#screen-pathways .student-drill-video__time {
  flex: 0 0 auto;
  min-width: 88px;
  text-align: right;
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Fullscreen drill player — the container goes fullscreen wherever the element
   Fullscreen API exists, so the custom control bar stays usable. iOS falls back to
   native video fullscreen in JS and needs no styling here. Prefixed selectors are
   kept in separate rules so an unknown pseudo-class cannot invalidate the standard one. */
#screen-pathways .student-drill-video:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 12px;
  width: 100%;
  height: 100%;
  background: var(--bg-base-bottom);
}

#screen-pathways .student-drill-video:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 12px;
  width: 100%;
  height: 100%;
  background: var(--bg-base-bottom);
}

#screen-pathways .student-drill-video:fullscreen .student-drill-video__frame {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 10px;
}

#screen-pathways .student-drill-video:-webkit-full-screen .student-drill-video__frame {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 10px;
}

#screen-pathways .student-drill-video:fullscreen .student-drill-video__controls {
  flex: 0 0 auto;
}

#screen-pathways .student-drill-video:-webkit-full-screen .student-drill-video__controls {
  flex: 0 0 auto;
}

#screen-pathways .student-drill-video::backdrop {
  background: var(--bg-base-bottom);
}

.blc-glossary-highlight {
  appearance: none;
  border: 0;
  border-radius: 5px;
  padding: 0 3px;
  margin: 0;
  background: rgba(255,216,102,0.1);
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,216,102,0.62);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.blc-glossary-highlight:hover,
.blc-glossary-highlight:focus-visible {
  background: rgba(255,216,102,0.18);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,216,102,0.18);
}

.blc-glossary-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(0,0,0,0.54);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.blc-glossary-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.blc-glossary-sheet {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 92px;
  z-index: 1291;
  max-width: 430px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(31,29,45,0.98), rgba(18,17,25,0.98));
  box-shadow: 0 20px 60px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

.blc-glossary-sheet.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.blc-glossary-sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  margin: 0 auto 14px;
  background: rgba(255,255,255,0.18);
}

.blc-glossary-sheet-meta {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 6px;
}

.blc-glossary-sheet-title {
  margin: 0 0 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  color: var(--text-primary);
}

.blc-glossary-sheet-definition {
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
}

.blc-glossary-sheet-close {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,216,102,0.35);
  border-radius: 12px;
  background: rgba(255,216,102,0.1);
  color: var(--accent-gold);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* ═══ QUICK START BUTTON ═══ */
.blc-button {
  border-radius: var(--button-radius);
  border: 1px solid var(--button-stroke);
  box-shadow:
    0 8px 12px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.35);
  position: relative;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  font-family: var(--fn);
}

/* Convex dome highlight */
.blc-button::before {
  content: '';
  position: absolute;
  inset: 0;
  bottom: 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.blc-button:active {
  transform: translateY(2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.60), inset 0 2px 8px rgba(0,0,0,0.40);
}

.blc-button-icon {
  font-size: 20px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.blc-button-label {
  position: relative;
  z-index: 1;
}

/* Button color variants */
.blc-button--blue   { background: linear-gradient(180deg, var(--accent-blue-top) 0%, var(--accent-blue-bottom) 100%); }
.blc-button--purple { background: linear-gradient(180deg, var(--accent-purple-top) 0%, var(--accent-purple-bottom) 100%); }
.blc-button--pink   { background: linear-gradient(180deg, var(--accent-pink-top) 0%, var(--accent-pink-bottom) 100%); }
.blc-button--teal   { background: linear-gradient(180deg, var(--accent-teal-top) 0%, var(--accent-teal-bottom) 100%); }
.blc-button--gold   { background: linear-gradient(180deg, var(--accent-gold-top) 0%, var(--accent-gold-bottom) 100%); }

/* ═══ STAT TILE ═══ */
.blc-tile {
  background: linear-gradient(180deg, var(--tile-top) 0%, var(--tile-bottom) 100%);
  border-radius: var(--tile-radius);
  border: 1px solid var(--tile-stroke);
  box-shadow:
    var(--tile-shadow),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
  padding: 14px 10px;
  text-align: center;
}

.blc-tile-value {
  font-family: var(--fd);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.blc-tile-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ═══ TEACHING TIP (replaces theory card) ═══ */
.blc-tip {
  background: linear-gradient(135deg, var(--theory-top) 0%, var(--theory-bottom) 100%);
  border-radius: var(--theory-radius);
  border: 1px solid var(--theory-stroke);
  box-shadow:
    inset 0 2px 6px rgba(170,102,238,0.10),
    inset 0 3px 12px rgba(255,255,255,0.06);
  position: relative;
  margin: 0 16px 12px;
  padding: 16px 18px;
}

.blc-tip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 6px;
}

.blc-tip-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.35;
}

.blc-tip-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ═══ GRADIENT CARD (kingdom-colored) ═══ */
.blc-card {
  border-radius: var(--card-radius);
  border: 1px solid var(--card-stroke);
  box-shadow:
    var(--card-shadow),
    inset 0 2px 6px rgba(255,255,255,0.08),
    0 8px 16px rgba(0,0,0,0.50);
  position: relative;
  margin: 0 16px 12px;
  padding: 16px 18px;
  overflow: hidden;
}

.blc-card--ibm     { background: linear-gradient(145deg, var(--card-ibm-top), var(--card-ibm-bottom)); }
.blc-card--pcr     { background: linear-gradient(145deg, var(--card-pcr-top), var(--card-pcr-bottom)); }
.blc-card--eos     { background: linear-gradient(145deg, var(--card-eos-top), var(--card-eos-bottom)); }
.blc-card--gold    { background: linear-gradient(145deg, var(--card-gold-top), var(--card-gold-bottom)); }
.blc-card--culture { background: linear-gradient(145deg, var(--card-culture-top), var(--card-culture-bottom)); }

/* Glow variants for featured cards */
.blc-card--glow-ibm     { box-shadow: var(--card-shadow), 0 0 20px rgba(85,136,255,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }
.blc-card--glow-pcr     { box-shadow: var(--card-shadow), 0 0 20px rgba(255,85,153,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }
.blc-card--glow-eos     { box-shadow: var(--card-shadow), 0 0 20px rgba(170,102,238,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }
.blc-card--glow-gold    { box-shadow: var(--card-shadow), 0 0 20px rgba(255,216,102,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }
.blc-card--glow-culture { box-shadow: var(--card-shadow), 0 0 20px rgba(20,184,166,0.12), inset 0 1px 0 rgba(255,255,255,0.08); }

/* ═══ PILLAR TAG ═══ */
.blc-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blc-tag--ibm      { background: rgba(85,136,255,0.18); color: var(--kingdom-ibm); border: 1px solid rgba(85,136,255,0.30); }
.blc-tag--pcr      { background: rgba(255,85,153,0.18); color: var(--kingdom-pcr); border: 1px solid rgba(255,85,153,0.30); }
.blc-tag--eos      { background: rgba(170,102,238,0.18); color: var(--blc-color-purple-soft); border: 1px solid rgba(170,102,238,0.30); }
.blc-tag--culture  { background: rgba(20,184,166,0.18); color: var(--kingdom-culture); border: 1px solid rgba(20,184,166,0.30); }
.blc-tag--cyan     { background: rgba(68,238,221,0.15); color: var(--accent-cyan); border: 1px solid rgba(68,238,221,0.25); }
.blc-tag--gold     { background: rgba(255,216,102,0.15); color: var(--accent-gold); border: 1px solid rgba(255,216,102,0.25); }
.blc-tag--success  { background: rgba(85,221,136,0.15); color: var(--color-success); border: 1px solid rgba(85,221,136,0.25); }
.blc-tag--warning  { background: rgba(255,170,68,0.15); color: var(--color-warning); border: 1px solid rgba(255,170,68,0.25); }

/* ═══ PROGRESS BAR ═══ */
.blc-progress {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}

.blc-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.blc-progress-fill--ibm     { background: var(--progress-ibm); box-shadow: 0 0 8px rgba(85,136,255,0.40); }
.blc-progress-fill--pcr     { background: var(--progress-pcr); box-shadow: 0 0 8px rgba(255,85,153,0.40); }
.blc-progress-fill--eos     { background: var(--progress-eos); box-shadow: 0 0 8px rgba(170,102,238,0.40); }
.blc-progress-fill--culture { background: var(--kingdom-culture); box-shadow: 0 0 8px rgba(20,184,166,0.40); }

/* ═══ SECTION HEADER ═══ */
.blc-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 8px;
}

.blc-section-title {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
}

.blc-section-action {
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--fn);
}

/* ═══ QUICK START GRID ═══ */
.blc-qs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ═══ HORIZONTAL SCROLL ROW ═══ */
.blc-hscroll {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
}

/* ═══ BOTTOM NAV ═══ */
.blc-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, var(--nav-bg-top) 0%, var(--nav-bg-bottom) 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 -8px 20px rgba(0,0,0,0.3);
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  z-index: 100;
}

.blc-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 4px 0;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

.blc-nav-icon {
  width: 22px;
  height: 22px;
}

.blc-nav-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--fn);
}

/* Nav item colors — each tab has its own identity */
.blc-nav-item[data-tab="home"]     .blc-nav-icon { color: var(--nav-label); }
.blc-nav-item[data-tab="learn"]    .blc-nav-icon { color: var(--nav-label); }
.blc-nav-item[data-tab="practice"] .blc-nav-icon { color: var(--nav-label); }
.blc-nav-item[data-tab="profile"]  .blc-nav-icon { color: var(--nav-label); }
.blc-nav-item[data-tab="home"]     .blc-nav-label { color: var(--nav-label); }
.blc-nav-item[data-tab="learn"]    .blc-nav-label { color: var(--nav-label); }
.blc-nav-item[data-tab="practice"] .blc-nav-label { color: var(--nav-label); }
.blc-nav-item[data-tab="profile"]  .blc-nav-label { color: var(--nav-label); }

/* Active states — filled icons with kingdom color */
.blc-nav-item.active[data-tab="home"]     .blc-nav-icon { color: var(--nav-home); filter: drop-shadow(0 0 6px rgba(85,136,255,0.6)); }
.blc-nav-item.active[data-tab="learn"]    .blc-nav-icon { color: var(--nav-learn); filter: drop-shadow(0 0 6px rgba(170,102,238,0.6)); }
.blc-nav-item.active[data-tab="practice"] .blc-nav-icon { color: var(--nav-practice); filter: drop-shadow(0 0 6px rgba(68,238,221,0.6)); }
.blc-nav-item.active[data-tab="profile"]  .blc-nav-icon { color: var(--nav-profile); filter: drop-shadow(0 0 6px rgba(255,85,153,0.6)); }
.blc-nav-item.active[data-tab="home"]     .blc-nav-label { color: var(--nav-home); }
.blc-nav-item.active[data-tab="learn"]    .blc-nav-label { color: var(--nav-learn); }
.blc-nav-item.active[data-tab="practice"] .blc-nav-label { color: var(--nav-practice); }
.blc-nav-item.active[data-tab="profile"]  .blc-nav-label { color: var(--nav-profile); }

/* ── AI Jesse center button ── */
.blc-nav-ai {
  flex: 1;
  display: flex;
  justify-content: center;
  margin-top: -24px;
}

.blc-nav-ai-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

.blc-nav-ai-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--accent-gold), #e0a020);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 20px rgba(255,216,102,0.40),
    0 2px 8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
  border: 3px solid var(--bg-base-bottom);
  font-size: 22px;
}

/* AI glow */
.blc-nav-ai-btn::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 50px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,216,102,0.50) 0%, rgba(255,216,102,0.15) 35%, transparent 70%);
  pointer-events: none;
  filter: blur(16px);
  z-index: -1;
}

.blc-nav-ai-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0.05em;
  font-family: var(--fn);
}

/* ═══ LAYOUT SHELL ═══ */
.blc-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: none;
  box-sizing: border-box;
}

.blc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 10px;
  position: relative;
  z-index: 1;
}

/* Gradient fade that bleeds downward from the header into the content,
   softening the boundary so the atmospheric background reads as continuous */
.blc-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  background: linear-gradient(to bottom, rgba(42, 34, 56, 0.45) 0%, transparent 100%);
  pointer-events: none;
}

.blc-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ═══ SCREEN PANELS ═══ */
.blc-screen {
  display: none;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-y: contain;
}

.blc-screen.active {
  display: flex;
  background: #131315;
}

/* One role-aware navigation surface persists above every authenticated screen.
   Legacy screen-local nav shells stay in the markup as inert fallbacks, but
   they no longer decide whether a destination has navigation. */
.blc-persistent-bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 0;
  z-index: 480;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: min(100%, 480px);
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 8px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: color-mix(in srgb, var(--bg-base-bottom) 92%, transparent);
  box-shadow: 0 -10px 40px color-mix(in srgb, var(--bg-base-bottom) 62%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.blc-persistent-bottom-nav[hidden] {
  display: none;
}

.blc-persistent-bottom-nav > a {
  min-width: 0 !important;
  padding: 8px 2px !important;
}

.blc-persistent-bottom-nav > a > span:last-of-type {
  max-width: 100%;
  font-size: clamp(7px, 2.5vw, 10px) !important;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

body.blc-persistent-nav-ready .blc-screen nav:not([data-blc-static-nav]) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Prompt #1151 — one action-surface contract for every bottom sheet and
   full-screen form. Screen actions sit above (not on top of) the persistent
   nav. Modal sheets own the whole interaction layer and clear the home
   indicator. Runtime classification in blc-core-nav also covers sheets that
   feature modules insert after boot. */
body.blc-persistent-nav-ready [data-blc-action-bar] {
  bottom: var(--blc-persistent-nav-height) !important;
}

body.blc-persistent-nav-ready:has(.blc-screen.active [data-blc-action-bar]) #bugReportButton {
  bottom: calc(var(--blc-persistent-nav-height) + var(--blc-action-bar-height) + 12px) !important;
}

.blc-action-surface {
  box-sizing: border-box;
  padding-bottom: var(--blc-modal-safe-padding) !important;
  scroll-padding-bottom: var(--blc-modal-safe-padding);
}

.blc-action-surface-backdrop {
  pointer-events: auto;
}

[data-blc-action-surface] {
  box-sizing: border-box;
  padding-bottom: var(--blc-modal-safe-padding) !important;
  scroll-padding-bottom: var(--blc-modal-safe-padding);
}

[data-blc-modal-backdrop] {
  pointer-events: auto;
}

/* Runtime modules are allowed to replace className and cssText while reusing a
   modal. The persistent data contract survives both operations, so a promoted
   backdrop can never outlive the matching surface at a higher layer. Existing
   intentionally higher overlays are not marked for promotion and keep their
   original z-index. */
[data-blc-modal-layer="surface"] {
  z-index: var(--blc-modal-layer) !important;
  pointer-events: auto !important;
}

[data-blc-modal-layer="backdrop"] {
  z-index: calc(var(--blc-modal-layer) - 1) !important;
}

/* Centred dialogs opened on top of a sheet (#1340). */
[data-blc-modal-layer="dialog"] {
  z-index: calc(var(--blc-modal-layer) + 10) !important;
  pointer-events: auto !important;
}

/* Prompt #1167 — close must beat .cal-add-lesson-sheet { display:flex !important }
   and [data-blc-modal-layer="surface"] { pointer-events:auto !important }. */
#calTeacherActionSheet[data-cal-action-hidden="true"],
#calTeacherActionBackdrop[data-cal-action-hidden="true"] {
  display: none !important;
  pointer-events: none !important;
}

.blc-screen:has([data-blc-action-bar]) > main {
  padding-bottom: calc(var(--blc-persistent-nav-height) + var(--blc-action-bar-height) + 20px) !important;
  scroll-padding-bottom: calc(var(--blc-persistent-nav-height) + var(--blc-action-bar-height) + 20px);
}

/* Shared viewport containment keeps padding and long flex/grid descendants
   inside the application column without hiding content or disabling scroll. */
.blc-screen > main,
.blc-screen > [id$="-view"] > main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.blc-screen :where(main, section, article, form, fieldset, div, ul, ol, span, a, button) {
  min-width: 0;
}

.blc-screen :where(img, svg, video, canvas) {
  max-inline-size: 100%;
}

.blc-screen :where(h1, h2, h3, h4, p, label, button) {
  overflow-wrap: anywhere;
}

.blc-screen :where(input, textarea, select, button) {
  max-width: 100%;
  box-sizing: border-box;
}

/* Material Symbols are ligature text until the webfont finishes loading. Keep
   that fallback text from widening headers and controls on slow connections. */
:where([id^="screen-"]) .material-symbols-outlined {
  display: inline-block;
  max-width: 1em;
  overflow: hidden;
  white-space: nowrap;
}

.blc-screen-scroll-content {
  padding-top: var(--blc-screen-content-top, 80px) !important;
}

/* The curriculum artwork derives its block size from its inline size. Both
   layers share the same square ratio, so neither can stretch independently. */
.blc-wheel-nav,
.blc-wheel-nav > img,
.blc-wheel-nav > svg {
  aspect-ratio: 1 / 1;
}

.blc-wheel-nav {
  align-self: center;
  inline-size: min(100%, 24rem);
  block-size: auto;
  flex: 0 0 auto;
}

.blc-wheel-nav > img,
.blc-wheel-nav > svg {
  object-fit: contain;
}

/* Shared in-app screen headers live inside the 480px application shell, even
   when a fold exposes a wider dual-pane viewport. Positioning them against the
   viewport used to let the fixed header escape the shell and clip at its edges.
   The same rule also makes every shared title a wrapping flex item on narrow
   single-pane widths: content stays visible instead of being clipped or hidden.

   Centering must be valid for EVERY header regardless of its own `position`.
   `left:50% + translateX(-50%)` only centres a `position:fixed` header (which is
   viewport-anchored); applied to a `position:sticky`/in-flow header it shoves the
   box half its own width off the left edge, clipping the back button, eyebrow and
   title (regressed the sticky teacher headers — press kit, broadcast, submit,
   schedule, studio, dance form). `left:0;right:0` + auto side margins centres a
   fixed header inside the viewport AND leaves an in-flow header untouched, so the
   one rule is safe for both position schemes. */
.blc-shell .blc-screen > header {
  box-sizing: border-box;
  width: min(100%, 480px) !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

.blc-shell .blc-screen > header[class*="__header"] [class*="__title"],
.blc-shell .blc-screen > header[class*="__header"] [class*="__brand"],
.blc-shell .blc-screen > header[class*="__header"] [class*="__titlebar"] {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The injected fallback back pill is a fixed overlay. Its base rule (in app.js)
   pins it to left:16px of the viewport, which orphans it far from the centred
   480px shell on a wide dual-pane fold. Re-anchor it to 16px inside the shell's
   leading edge so it tracks the header at every width. Higher specificity than
   the base `.blc-auto-back` rule, so it wins regardless of stylesheet order. */
.blc-screen > .blc-auto-back {
  left: calc(50% - min(50vw, 240px) + 16px);
}

.student-pathways__title {
  min-width: 0;
  flex-wrap: wrap;
}

.student-pathways__title #pwHeaderTitle {
  min-width: 0;
  overflow-wrap: anywhere;
}

#screen-community-detail .student-cdetail__header .student-cdetail__title {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ═══ TITLE WAVE ANIMATION ═══ */
.blc-title-wave {
  font-family: var(--fd);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  background: var(--title-gradient);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: blcWave 20s linear infinite;
}

@keyframes blcWave {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

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

/* ═══ ACTIVITY DOT ═══ */
.blc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.blc-dot--success { background: var(--color-success); box-shadow: 0 0 6px rgba(85,221,136,0.50); }
.blc-dot--warning { background: var(--color-warning); box-shadow: 0 0 6px rgba(255,170,68,0.50); }
.blc-dot--danger  { background: var(--color-danger); box-shadow: 0 0 6px rgba(255,85,85,0.50); }
.blc-dot--ibm     { background: var(--kingdom-ibm); box-shadow: 0 0 6px rgba(85,136,255,0.50); }
.blc-dot--pcr     { background: var(--kingdom-pcr); box-shadow: 0 0 6px rgba(255,85,153,0.50); }
.blc-dot--eos     { background: var(--kingdom-eos); box-shadow: 0 0 6px rgba(170,102,238,0.50); }
.blc-dot--culture { background: var(--kingdom-culture); box-shadow: 0 0 6px rgba(20,184,166,0.50); }

/* ═══ UTILITY ═══ */
.blc-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.blc-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2a2030, #1a1520);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 2px 8px rgba(0,0,0,0.4);
  font-family: var(--fd);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* ═══════════════════════════════════════════════
   Curriculum Accordion
   ═══════════════════════════════════════════════ */

/* Kingdom card */
#curList section,
.cur-kingdom,
.cur-pillar {
  scroll-margin-top: 58px;
}
.cur-kingdom { margin-bottom: 12px; border-radius: 16px; overflow: hidden; }
.cur-top-level-section { margin-top: 22px; }
/* Styles the "Beyond the Dance" group header above Community Culture. That label
   is INTERIM (#1203): Community Culture is kingdom #4 and kingdoms 5 and 6 are
   planned, at which point "beyond the dance" stops being accurate — they are
   peers of the wheel's three, not a category outside them. Revisit when #5 lands. */
.cur-top-level-section__label {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cur-kingdom-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; cursor: pointer; position: relative;
}
.cur-kingdom-abbr {
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cur-kingdom-abbr--ibm     { background: rgba(85,136,255,0.2); color: var(--blc-color-blue-soft); }
.cur-kingdom-abbr--pcr     { background: rgba(255,85,153,0.2); color: #ff5599; }
.cur-kingdom-abbr--eos     { background: rgba(170,102,238,0.2); color: var(--blc-color-purple-soft); }
.cur-kingdom-abbr--culture { background: rgba(20,184,166,0.2); color: #14B8A6; }
.cur-kingdom-info { flex: 1; min-width: 0; }
.cur-kingdom-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px;
  color: #fff; text-transform: capitalize;
}
.cur-kingdom-sub {
  font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px;
}

/* Chevron */
.cur-chevron {
  flex-shrink: 0; width: 20px; height: 20px;
  color: rgba(255,255,255,0.4);
  transition: transform 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.cur-chevron--open { transform: rotate(180deg); }

/* Pillars container — collapsed by default */
.cur-pillars {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.cur-pillars--open { max-height: 2000px; }
.cur-pillars-inner { padding: 0 16px 12px; }

/* Pillar row */
.cur-pillar { margin-bottom: 4px; }
.cur-pillar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  border-radius: 10px; background: rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.cur-pillar-head:active { background: rgba(255,255,255,0.08); }
.cur-pillar-num {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 11px;
  color: rgba(178,197,255,0.7); letter-spacing: 0.05em;
  width: 28px; flex-shrink: 0;
}
.cur-pillar-name {
  flex: 1; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85);
}
.cur-pillar-count {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: rgba(255,255,255,0.06); border-radius: 6px; padding: 2px 6px;
}
.cur-pillar-chev {
  flex-shrink: 0; width: 16px; height: 16px;
  color: rgba(255,255,255,0.3);
  transition: transform 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.cur-pillar-chev--open { transform: rotate(180deg); }

/* Topics container — collapsed by default */
.cur-topics {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.cur-topics--open { max-height: 1200px; }

/* Topic row */
.cur-topic {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 40px; font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.cur-topic--defined {
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cur-topic--defined:hover,
.cur-topic--defined:focus-visible {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.84);
  outline: none;
}
.cur-topic-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.cur-topic-dot--ibm     { background: #5588ff; }
.cur-topic-dot--pcr     { background: #ff5599; }
.cur-topic-dot--eos     { background: #aa66ee; }
.cur-topic-dot--culture { background: #14B8A6; }
.cur-topic-label {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cur-topic-arrow {
  flex-shrink: 0; width: 14px; height: 14px;
  color: rgba(255,255,255,0.32);
}
.cur-topic-arrow svg { width: 14px; height: 14px; }

/* Curriculum wheel pillar shortcuts use kingdom semantics, not navigation
   semantics. Community Culture is a separate top-level section and has no wheel
   shortcut in this three-kingdom control. */
.blc-wheel-text-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  max-width: 380px;
  margin-top: 12px;
}

.blc-wheel-text-link {
  --pillar-family: var(--k-ibm);
  min-height: 44px;
  border: 1px solid color-mix(in srgb, #ffffff 22%, var(--pillar-family));
  border-radius: 9px;
  padding: 7px 5px;
  /* These sit directly under the wheel and are judged against it. A tint — even
     at 22% — still reads pale beside solid colour, so match the wheel outright.
     Dark ink, not white: white on full-strength kingdom colour is 3.0–3.6:1 at
     11px and fails AA, while dark ink is 5.4–6.4:1. Same treatment the Home
     hero's Resume button already uses. */
  background: var(--pillar-family);
  color: color-mix(in srgb, var(--bg-base-bottom) 88%, var(--pillar-family));
  font: 700 11px/1.2 var(--blc-font-body);
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.blc-wheel-text-link[data-kingdom="pcr"] { --pillar-family: var(--k-pcr); }

.blc-wheel-text-link[data-kingdom="eos"] { --pillar-family: var(--k-eos); }

.blc-wheel-text-link:hover {
  background: color-mix(in srgb, #ffffff 12%, var(--pillar-family));
}
.blc-wheel-text-link:active { transform: scale(0.97); }

.blc-wheel-text-link:focus-visible {
  outline: 3px solid var(--pillar-family);
  outline-offset: 2px;
}

.blc-wheel-text-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Hidden (search filter) */
.cur-hidden { display: none !important; }

/* Chip active state */
.cur-chip--active {
  background: rgba(178,197,255,0.15) !important;
  color: #b2c5ff !important;
  border-color: #b2c5ff !important;
}

/* ═══════════════════════════════════════════════
   Glossary Accordion
   ═══════════════════════════════════════════════ */

/* Category card */
.glo-cat-card { margin-bottom: 10px; border-radius: 14px; overflow: hidden; }
.glo-cat-card--ibm     { background: linear-gradient(145deg, rgba(85,136,255,0.10), rgba(85,136,255,0.04)), #1a1a1f; border: 1px solid rgba(85,136,255,0.16); }
.glo-cat-card--pcr     { background: linear-gradient(145deg, rgba(255,85,153,0.10), rgba(255,85,153,0.04)), #1a1a1f; border: 1px solid rgba(255,85,153,0.16); }
.glo-cat-card--eos     { background: linear-gradient(145deg, rgba(170,102,238,0.10), rgba(170,102,238,0.04)), #1a1a1f; border: 1px solid rgba(170,102,238,0.16); }
.glo-cat-card--culture { background: linear-gradient(145deg, rgba(20,184,166,0.10), rgba(20,184,166,0.04)), #1a1a1f; border: 1px solid rgba(20,184,166,0.16); }

/* Category header */
.glo-cat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 14px; cursor: pointer; position: relative;
}
.glo-cat-info { flex: 1; min-width: 0; }
.glo-cat-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  color: #fff; text-transform: capitalize;
}
/* .glo-cat-icon removed in #1020 along with the superseded www/assets/icons/ set */

/* Subdued badge tags inside glossary cards */
.glo-cat-card .blc-tag--ibm { background: rgba(85,136,255,0.07); color: var(--blc-color-blue-soft); border-color: rgba(85,136,255,0.12); }
.glo-cat-card .blc-tag--pcr { background: rgba(255,85,153,0.07); color: var(--blc-color-pink-soft); border-color: rgba(255,85,153,0.12); }
.glo-cat-card .blc-tag--eos { background: rgba(170,102,238,0.07); color: var(--blc-color-purple-soft); border-color: rgba(170,102,238,0.12); }

/* Chevron */
.glo-cat-chev {
  flex-shrink: 0; width: 18px; height: 18px;
  color: rgba(255,255,255,0.4);
  transition: transform 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.glo-cat-chev.open { transform: rotate(180deg); }

/* Category body — collapsed by default */
.glo-cat-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.glo-cat-body.open { max-height: 5000px; }

/* Term rows */
.glo-term-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.05);
}
.glo-term-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  color: rgba(255,255,255,0.9);
}
.glo-term-def {
  font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5;
}
.glo-term-row--ibm .glo-term-name { color: #88aaff; }
.glo-term-row--pcr .glo-term-name { color: #ff88bb; }
.glo-term-row--eos .glo-term-name { color: #cc99ff; }

/* ═══════════════════════════════════════════════
   Chat Pillar Accordion (AI Jesse structured responses)
   ═══════════════════════════════════════════════ */

.chat-pillar { margin: 6px 0; border-radius: 12px; overflow: hidden; }
.chat-pillar--ibm { background: rgba(85,136,255,0.06); border: 1px solid rgba(85,136,255,0.12); }
.chat-pillar--pcr { background: rgba(255,85,153,0.06); border: 1px solid rgba(255,85,153,0.12); }
.chat-pillar--eos { background: rgba(170,102,238,0.06); border: 1px solid rgba(170,102,238,0.12); }

.chat-pillar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px; cursor: pointer;
}

.chat-pillar-chev {
  flex-shrink: 0; width: 16px; height: 16px;
  color: rgba(255,255,255,0.3);
  transition: transform 0.3s ease;
  display: flex; align-items: center; justify-content: center;
}
.chat-pillar-chev.open { transform: rotate(180deg); }

.chat-pillar-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.chat-pillar-body.open { max-height: 3000px; }

.chat-pillar-content {
  padding: 0 12px 12px; font-size: 13px;
  color: rgba(255,255,255,0.7); line-height: 1.6;
}

/* ═══════════════════════════════════════════════
   Bottom Nav — 5-tab layout fix (375px safe)
   ═══════════════════════════════════════════════ */

/* Nav container: remove horizontal padding, prevent overflow */
nav[style*="position:fixed"][style*="bottom:0"] {
  padding-left: 8px !important;
  padding-right: 8px !important;
  box-sizing: border-box;
  overflow: hidden;
}

/* Tab items: reduce horizontal padding so 5 tabs fit at 375px */
nav[style*="position:fixed"][style*="bottom:0"] > a,
nav[style*="position:fixed"][style*="bottom:0"] > div {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Tab labels: ensure they don't wrap or overflow */
nav[style*="position:fixed"][style*="bottom:0"] > a > span:last-child,
nav[style*="position:fixed"][style*="bottom:0"] > div > span:last-child {
  font-size: 9px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Teacher root surfaces + tokenized teacher nav */
.teacher-bottom-nav {
  background: color-mix(in srgb, var(--bg-base-bottom) 94%, transparent) !important;
  border-top: 1px solid color-mix(in srgb, var(--blc-color-white) 10%, transparent);
  box-shadow: 0 -16px 38px color-mix(in srgb, var(--bg-base-bottom) 58%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.teacher-bottom-nav__item {
  --teacher-nav-tone: var(--blc-teacher-nav-home);
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--teacher-nav-tone);
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.teacher-bottom-nav__item[data-teacher-nav-tone="group"] { --teacher-nav-tone: var(--blc-teacher-nav-group); }
.teacher-bottom-nav__item[data-teacher-nav-tone="event"] { --teacher-nav-tone: var(--blc-teacher-nav-event); }
.teacher-bottom-nav__item[data-teacher-nav-tone="studio"] { --teacher-nav-tone: var(--blc-teacher-nav-mic); }
.teacher-bottom-nav__item[data-teacher-nav-tone="profile"] { --teacher-nav-tone: var(--blc-teacher-nav-person); }
.teacher-bottom-nav__item:active {
  transform: scale(0.96);
}
.teacher-bottom-nav__item.is-active {
  color: var(--teacher-nav-tone);
  background: color-mix(in srgb, var(--teacher-nav-tone) 13%, transparent);
  border-color: color-mix(in srgb, var(--teacher-nav-tone) 24%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blc-color-white) 10%, transparent), 0 0 18px color-mix(in srgb, var(--teacher-nav-tone) 18%, transparent);
}
.teacher-bottom-nav__icon {
  font-size: 22px;
  line-height: 1;
}
.teacher-bottom-nav__item.is-active .teacher-bottom-nav__icon {
  text-shadow: 0 0 18px color-mix(in srgb, var(--teacher-nav-tone) 72%, transparent);
}
.teacher-bottom-nav__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--blc-font-label);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.teacher-home,
.teacher-profile {
  --teacher-root-surface: color-mix(in srgb, var(--panel-bottom) 90%, var(--blc-color-white));
  --teacher-root-surface-strong: color-mix(in srgb, var(--panel-bottom) 82%, var(--blc-color-white));
  --teacher-root-line: color-mix(in srgb, var(--blc-color-white) 10%, transparent);
  --teacher-root-line-strong: color-mix(in srgb, var(--blc-color-white) 16%, transparent);
  --teacher-root-muted: color-mix(in srgb, var(--text-muted) 82%, transparent);
  box-sizing: border-box;
  width: min(100%, 560px);
  max-width: 100%;
  color: var(--text-primary);
  font-family: var(--blc-font-body);
}
.teacher-home {
  padding-top: 88px !important;
  padding-bottom: 150px !important;
}
.teacher-home__hero {
  margin-bottom: 14px;
}
.teacher-home__brandline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--teacher-root-muted);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.teacher-home__brandline .blc-wordmark {
  color: var(--blc-teacher-nav-mic);
}
.teacher-home__brandline .blc-wordmark span {
  font-size: 1.3em;
  vertical-align: -0.15em;
}
.teacher-home__greeting {
  font-family: var(--blc-font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}
.teacher-home__greeting span {
  color: var(--blc-teacher-nav-mic);
}
.teacher-home__up-next,
.teacher-home__today {
  margin-bottom: 14px;
}
.teacher-home__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}
.teacher-home__action {
  --teacher-action-tone: var(--blc-teacher-nav-person);
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--teacher-action-tone) 22%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--teacher-action-tone) 8%, transparent);
  color: var(--text-primary);
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.teacher-home__action[data-tone="studio"] { --teacher-action-tone: var(--blc-teacher-nav-mic); }
.teacher-home__action .material-symbols-outlined {
  color: var(--teacher-action-tone);
  font-size: 18px;
  font-variation-settings: 'FILL' 1;
}
.teacher-home__section-title {
  margin: 0 0 9px;
  color: var(--teacher-root-muted);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.teacher-home__studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.teacher-home__studio-card {
  --teacher-card-tone: var(--blc-teacher-nav-group);
  /* Matched to .student-home__lesson-tile. These read as flat next to the
     student Quick Links because every value was roughly half: an 11% body wash
     against 22%, a 22% border against 34%, a straight vertical gradient instead
     of the directional one, and no halo behind the icon at all. Same numbers
     now, so the two sides of the app feel like one app. */
  --card-body-fill: 22%;
  --card-border-strength: 34%;
  --card-icon-fill: 12%;
  --card-glow-strength: 34%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--teacher-card-tone) var(--card-border-strength), transparent);
  border-radius: 14px;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--teacher-card-tone) var(--card-body-fill), transparent) 0%,
    color-mix(in srgb, var(--teacher-card-tone) 5%, transparent) 62%,
    transparent 100%
  );
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.teacher-home__studio-card:active { transform: scale(.98); }
.teacher-home__studio-card[data-tone="event"] { --teacher-card-tone: var(--blc-teacher-nav-event); }
.teacher-home__studio-card[data-tone="profile"] { --teacher-card-tone: var(--blc-teacher-nav-person); }
.teacher-home__studio-card .teacher-home__studio-icon {
  /* 64px with a deep container and a coloured halo, as on the student side.
     The old 38px chip with a hairline border was the single biggest reason
     these looked smaller and duller than the Quick Links.

     max-width and display are set deliberately. A global rule,
     `:where([id^="screen-"]) .material-symbols-outlined`, clamps these glyphs to
     max-width:1em and display:inline-block. Because this rule never set
     max-width there was nothing to override, so the box kept its 64px height
     but was squeezed to one character wide — a tall pill instead of a square.
     The selector is scoped to the card so it outranks whatever sets display. */
  max-width: none;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teacher-card-tone) var(--card-icon-fill), var(--bg-base-bottom));
  box-shadow: 0 0 15px color-mix(in srgb, var(--teacher-card-tone) var(--card-glow-strength), transparent);
  color: var(--teacher-card-tone);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  overflow: visible;
  font-variation-settings: 'FILL' 1;
}
.teacher-home__studio-title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.teacher-home__studio-meta {
  margin-top: 4px;
  color: var(--teacher-root-muted);
  font-size: 10px;
  font-weight: 700;
}
.teacher-profile {
  padding-bottom: 132px;
}

/* ═══ Teacher Profile & Press Kit Tone Cards (#1179) ═══ */
.teacher-profile__card {
  --card-tone: var(--blc-teacher-nav-person);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-tone) 18%, var(--teacher-root-line));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-tone) 8%, var(--teacher-root-surface-strong)), var(--teacher-root-surface));
  padding: 16px 16px 18px;
  margin-bottom: 14px;
  box-sizing: border-box;
}
.teacher-profile__card[data-tone="blue"] { --card-tone: var(--blc-teacher-nav-person); }
.teacher-profile__card[data-tone="purple"] { --card-tone: var(--blc-teacher-nav-event); }
.teacher-profile__card[data-tone="teal"] { --card-tone: var(--kingdom-culture); }
.teacher-profile__card[data-tone="gold"] { --card-tone: var(--blc-color-gold); }
.teacher-profile__card[data-tone="pink"] { --card-tone: var(--blc-color-pink-soft); }
.teacher-profile__card[data-tone="cyan"] { --card-tone: var(--blc-color-cyan-bright); }
.teacher-profile__card[data-tone="coral"] { --card-tone: var(--blc-color-pink-hot); }

.teacher-profile__card .teacher-studio__rail,
.teacher-press-kit__card .teacher-studio__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-tone);
}

.teacher-profile__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.teacher-profile__head-left {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

.teacher-profile__card-head .teacher-studio__icon,
.teacher-press-kit__card .teacher-studio__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-tone) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-tone) 28%, transparent);
  color: var(--card-tone);
  font-size: 20px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
}

.teacher-profile__head-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.teacher-profile__identity-copy {
  min-width: 0;
}

.teacher-profile__name {
  font-family: var(--blc-font-display);
  font-size: 1.45rem;
  font-weight: 850;
  color: var(--text-primary);
  line-height: 1.1;
  word-break: break-word;
}

.teacher-profile__email {
  font-size: 12px;
  color: var(--teacher-root-muted);
  margin-top: 3px;
  word-break: break-all;
}

.teacher-profile__role {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blc-color-gold);
  margin-top: 6px;
}

.teacher-profile__card-title,
.teacher-press-kit__section-title {
  color: var(--text-primary);
  font-family: var(--blc-font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.teacher-profile__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-cyan-bright) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blc-color-cyan-bright) 28%, transparent);
  color: var(--blc-color-cyan-bright);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.teacher-profile__card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.teacher-profile__card .teacher-destination__primary {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--card-tone) 40%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--card-tone) 16%, transparent) !important;
  color: color-mix(in srgb, var(--card-tone) 75%, var(--text-primary)) !important;
  font-family: var(--blc-font-display) !important;
  font-weight: 850 !important;
  font-size: 13px !important;
  min-height: 44px !important;
  padding: 11px 16px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.teacher-profile__card .teacher-destination__primary:active {
  background: color-mix(in srgb, var(--card-tone) 26%, transparent) !important;
  transform: scale(0.99);
}

.teacher-profile__switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: color-mix(in srgb, var(--blc-color-white) 10%, transparent);
  border: 1px solid var(--teacher-root-line);
  border-radius: 24px;
  transition: 0.2s ease;
}
.teacher-profile__switch-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: 0.2s ease;
}
input:checked + .teacher-profile__switch-slider {
  background: var(--kingdom-culture);
  border-color: var(--kingdom-culture);
}
input:checked + .teacher-profile__switch-slider:before {
  transform: translateX(20px);
}

.teacher-profile__signup-box {
  padding: 14px;
  background: color-mix(in srgb, var(--bg-base-bottom) 58%, transparent);
  border: 1px solid var(--teacher-root-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teacher-profile__signup-url {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  color: var(--blc-color-blue-soft);
  word-break: break-all;
  text-align: center;
}

.teacher-profile__signup-qr {
  text-align: center;
}

/* Press Kit card treatments */
.teacher-press-kit__card {
  --card-tone: var(--blc-teacher-nav-person);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--card-tone) 18%, var(--tsd-line));
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-tone) 7%, var(--tsd-surface-strong)), var(--tsd-surface));
  padding: 16px;
  box-sizing: border-box;
}
.teacher-press-kit__card[data-tone="purple"] { --card-tone: var(--blc-color-purple-soft); }
.teacher-press-kit__card[data-tone="blue"] { --card-tone: var(--blc-color-blue-soft); }
.teacher-press-kit__card[data-tone="gold"] { --card-tone: var(--blc-color-gold); }
.teacher-press-kit__card[data-tone="pink"] { --card-tone: var(--blc-color-pink-soft); }
.teacher-press-kit__card[data-tone="cyan"] { --card-tone: var(--blc-color-cyan-bright); }
.teacher-press-kit__card[data-tone="coral"] { --card-tone: var(--blc-color-pink-hot); }

.teacher-press-kit__card .teacher-destination__section-head {
  margin-bottom: 12px;
}
.teacher-press-kit__card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#teacherProfileContent .s-label,
#teacherProfileContent label,
#teacherProfileContent [data-app-copy-key="app_profile_teacher_directory_title"] {
  color: var(--teacher-root-muted) !important;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
#teacherProfileContent .s-input,
#teacherProfileContent textarea,
#teacherProfileContent input[type="text"],
#teacherProfileContent input[type="number"] {
  border: 1px solid var(--teacher-root-line) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--bg-base-bottom) 58%, transparent) !important;
  color: var(--text-primary) !important;
  font-family: var(--blc-font-body) !important;
  outline: none !important;
}
#teacherProfileContent .s-input:focus,
#teacherProfileContent textarea:focus,
#teacherProfileContent input[type="text"]:focus,
#teacherProfileContent input[type="number"]:focus {
  border-color: color-mix(in srgb, var(--card-tone, var(--blc-teacher-nav-person)) 50%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-tone, var(--blc-teacher-nav-person)) 12%, transparent) !important;
}
#teacherProfileContent .teacher-profile-field {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  box-sizing: border-box !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
.blc-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 24px 0 8px;
  padding: 16px 12px 6px;
  color: rgba(168, 160, 192, 0.55);
  font-family: var(--blc-font-body, 'Manrope', sans-serif);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
}
.blc-about__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(229, 225, 228, 0.72);
}
.blc-about__mark {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.08em;
  line-height: 1;
}
.blc-about__mark span {
  display: inline-block;
  font-size: 1.28em;
  transform: translateY(1px);
}
.blc-about__name {
  font-family: var(--blc-font-display, 'Outfit', sans-serif);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.blc-about__version {
  color: rgba(229, 225, 228, 0.62);
  font-weight: 700;
}
.blc-about__credit a {
  color: inherit;
  text-underline-offset: 2px;
}
.blc-about__source {
  color: var(--text-muted);
  font-size: 9px;
}
#screen-settings.settings-drawer--teacher {
  --settings-teacher-surface: color-mix(in srgb, var(--panel-bottom) 90%, var(--blc-color-white));
  --settings-teacher-line: color-mix(in srgb, var(--blc-color-white) 10%, transparent);
}
#screen-settings.settings-drawer--teacher .settings-drawer__bar {
  border-bottom-color: var(--settings-teacher-line);
}
#screen-settings.settings-drawer--teacher .settings-drawer__profile,
#screen-settings.settings-drawer--teacher .settings-drawer__section,
#screen-settings.settings-drawer--teacher .settings-drawer__switch-row,
#screen-settings.settings-drawer--teacher .settings-drawer__action-row {
  border: 1px solid var(--settings-teacher-line);
  border-radius: 15px;
  background: var(--settings-teacher-surface);
  padding: 14px;
}
#screen-settings.settings-drawer--teacher .settings-drawer__title-icon,
#screen-settings.settings-drawer--teacher .settings-drawer__switch-icon {
  color: var(--blc-teacher-nav-event);
}
#screen-settings.settings-drawer--teacher .settings-drawer__button {
  border-radius: 12px;
}

@media (max-width: 390px) {
  .teacher-home__studio-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Booking Dashboard: pulsing dot ── */
@keyframes td-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.4); }
}

.slot-booked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.slot-booked div:first-child > div:first-child {
  text-decoration: line-through;
}

/* ── Booking Dashboard: toggle switch ── */
.bm-toggle {
  width: 36px; height: 20px; border-radius: 999px;
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background 140ms ease, border-color 140ms ease;
  border: 1px solid;
}
.bm-toggle[data-on="0"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}
.bm-toggle[data-on="1"] { /* color set via inline style */ }
.bm-toggle .bm-toggle-thumb {
  position: absolute; top: 1px;
  width: 16px; height: 16px; border-radius: 50%;
  transition: left 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.bm-toggle[data-on="0"] .bm-toggle-thumb {
  left: 1px; background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.bm-toggle[data-on="1"] .bm-toggle-thumb {
  left: 17px; background: #fff;
}

/* ─�� Booking Dashboard: glass panel ── */
.bm-glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* #581 — Hide scrollbar on chip bar */
#eteChipBar::-webkit-scrollbar { display: none; }

/* ── Library Hub (#631) ── */
#screen-library-hub.student-learn {
  --section-family: var(--section-learn);
  --learn-line: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  --learn-line-strong: color-mix(in srgb, var(--blc-color-white) 18%, transparent);
  --learn-muted: color-mix(in srgb, var(--text-muted) 72%, transparent);
  --learn-faint: color-mix(in srgb, var(--blc-color-white) 30%, transparent);
  --learn-panel: color-mix(in srgb, var(--panel-bottom) 88%, transparent);
  --learn-panel-soft: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text-primary);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--section-family) 12%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--section-family) 7%, transparent) 0%, transparent 42%),
    var(--bg-base-bottom);
}
#screen-library-hub .student-learn__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 220;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg-base-bottom) 92%, transparent);
  border-bottom: 1px solid var(--learn-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#screen-library-hub .student-learn__back,
#screen-library-hub .student-learn__header-spacer {
  width: 34px;
  height: 34px;
}
#screen-library-hub .student-learn__back {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--learn-muted);
  cursor: pointer;
}
#screen-library-hub .student-learn__back .blc-svg-icon { width: 22px; height: 22px; }
#screen-library-hub .student-learn__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--blc-font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--text-primary);
}
#screen-library-hub .student-learn__brand-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--section-family);
}
#screen-library-hub .student-learn__brand-icon .blc-svg-icon { width: 17px; height: 17px; }
#screen-library-hub .student-learn__main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  /* Clears the shared Community-style header, which is taller than the old
     centred brand bar. Matches Community's own top padding. */
  padding: 96px 18px 120px;
  box-sizing: border-box;
}
#screen-library-hub .student-learn__intro { margin-bottom: 18px; }
#screen-library-hub .student-learn__intro h2 {
  margin: 0 0 5px;
  font-family: var(--blc-font-display);
  font-size: 31px;
  font-weight: 900;
  line-height: 1.05;
  color: var(--text-primary);
}
#screen-library-hub .student-learn__intro p {
  margin: 0;
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--learn-muted);
}
#screen-library-hub .lib-hub-grid,
#screen-library-hub .student-learn__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#screen-library-hub .student-learn__tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
#screen-library-hub .student-learn__tool--wide { grid-column: 1 / -1; min-height: 92px; padding: 16px; }
#screen-library-hub .student-learn__tool--wide .student-learn__tool-icon { width: 56px; height: 56px; border-radius: 16px; }
#screen-library-hub .student-learn__tool--wide .student-learn__tool-icon .blc-svg-icon { width: 28px; height: 28px; }
#screen-library-hub .lib-hub-card {
  appearance: none;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--learn-line);
  border-radius: 14px;
  background: var(--learn-panel-soft);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#screen-library-hub .student-learn__tool {
  --card-tone: var(--section-family);
  /* #1101 — Glossary's restored intensity, applied uniformly to every card in its
     own hue: a tone-tinted body wash, a matching coloured border, a dark icon
     container and a bright saturated glyph. Restores the pre-#1088 structure
     (121ca1d) driven by the per-card --card-tone token.
     #1103 — depth: --card-body-fill now drives a DIRECTIONAL wash that carries
     its tint at the icon edge and falls off across the card toward near-black,
     and --card-glow-strength lights a soft hue halo behind the icon container. */
  --card-body-fill: 22%;
  --card-border-strength: 34%;
  --card-icon-fill: 14%;
  --card-glow-strength: 34%;
  min-height: 72px;
  padding: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-color: color-mix(in srgb, var(--card-tone) var(--card-border-strength), transparent);
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--card-tone) var(--card-body-fill), transparent) 0%,
    color-mix(in srgb, var(--card-tone) 5%, transparent) 60%,
    transparent 100%
  );
}
#screen-library-hub .student-learn__tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  /* #1101 — deep, low-saturation container; the bright glyph carries the hue.
     #1103 — soft coloured halo bleeding out from the container into the body. */
  background: color-mix(in srgb, var(--card-tone) var(--card-icon-fill), var(--bg-base-bottom));
  box-shadow: 0 0 16px color-mix(in srgb, var(--card-tone) var(--card-glow-strength), transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--card-tone);
}
#screen-library-hub .student-learn__tool-icon .blc-svg-icon { width: 20px; height: 20px; }
#screen-library-hub .student-learn__tool-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#screen-library-hub .student-learn__tool-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--section-family);
}
#screen-library-hub .student-learn__tool-title {
  font-family: var(--blc-font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
#screen-library-hub .student-learn__tool-meta {
  font-family: var(--blc-font-label);
  font-size: 10.5px;
  color: var(--learn-muted);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* #1101 — per-variant intensity escalation removed: every card now carries
   Glossary's full intensity and is distinguished by its own hue, not by a weaker
   or stronger wash. data-section-variant is retained on the markup but no longer
   dims siblings. */
/* Per-card tones — one distinct hue per Learn card, drawn from the shared
   destination palette (#1114). Learn shows five cards on one screen; each takes
   a different palette hue and none reuses the blue Learn nav colour, so nothing
   reads as monotone against the tab bar. Uniform intensity across all five. */
#screen-library-hub .student-learn__tool[data-tone="cyan"]    { --card-tone: var(--card-hue-cyan); }
#screen-library-hub .student-learn__tool[data-tone="violet"]  { --card-tone: var(--card-hue-violet); }
#screen-library-hub .student-learn__tool[data-tone="gold"]    { --card-tone: var(--card-hue-gold); }
#screen-library-hub .student-learn__tool[data-tone="magenta"] { --card-tone: var(--card-hue-magenta); }
/* Design-kit tones. The kit assigns Glossary cyan, Flashcards gold, Drills PCR
   pink, Visual Aids EOS purple, Pathways IBM blue. These replace the invented
   card hues on Learn; the older tones stay for screens not yet reconciled. */
#screen-library-hub .student-learn__tool[data-tone="k-ibm"]  { --card-tone: var(--k-ibm-soft); }
#screen-library-hub .student-learn__tool[data-tone="k-pcr"]  { --card-tone: var(--k-pcr); }
#screen-library-hub .student-learn__tool[data-tone="k-eos"]  { --card-tone: var(--k-eos-soft); }
#screen-library-hub .student-learn__tool[data-tone="k-cc"]   { --card-tone: var(--k-cc-soft); }
#screen-library-hub .student-learn__tool[data-tone="k-cyan"] { --card-tone: var(--k-cyan); }
#screen-library-hub .student-learn__tool[data-tone="k-gold"] { --card-tone: var(--k-gold); }
#screen-library-hub .student-learn__tool[data-tone="lime"]    { --card-tone: var(--card-hue-lime); }
#screen-library-hub .lib-hub-card:hover {
  background: color-mix(in srgb, var(--section-family) 18%, var(--learn-panel-soft));
}
#screen-library-hub .lib-hub-card:active {
  transform: scale(0.97);
  background: color-mix(in srgb, var(--section-family) 22%, var(--learn-panel-soft));
}
#screen-library-hub .student-learn__lock {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 8px;
  border: 1px solid var(--learn-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-base-bottom) 78%, transparent);
  color: var(--learn-muted);
  font-family: var(--blc-font-label);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
#screen-library-hub .student-learn__lock .blc-svg-icon { width: 10px; height: 10px; }
#screen-library-hub .student-learn__skeleton-row {
  height: 68px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  animation: libHubPulse 1.4s ease-in-out infinite;
}
#screen-library-hub .student-learn__skeleton-row:nth-child(2) { animation-delay: 0.2s; }
#screen-library-hub .student-learn__skeleton-row:nth-child(3) { animation-delay: 0.4s; }
#screen-library-hub .student-learn__skeleton-row:nth-child(4) { animation-delay: 0.6s; }
#screen-library-hub .student-learn__error {
  text-align: center;
  padding: 48px 24px;
}
#screen-library-hub .student-learn__error-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--kingdom-pcr);
}
#screen-library-hub .student-learn__error-icon .blc-svg-icon { width: 40px; height: 40px; }
#screen-library-hub .student-learn__error p {
  margin: 0 0 16px;
  font-family: var(--blc-font-body);
  font-size: 14px;
  color: var(--learn-muted);
}
#screen-library-hub .student-learn__retry {
  padding: 10px 24px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--kingdom-ibm) 22%, transparent);
  background: color-mix(in srgb, var(--kingdom-ibm) 10%, transparent);
  color: var(--kingdom-ibm);
  font-family: var(--blc-font-display);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
@keyframes libSlideIn {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.lib-slide-in { animation: libSlideIn 0.22s ease-out; }
@keyframes libHubPulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.7;  }
}

/* Teacher Studio hub */
#screen-teacher-studio {
  --studio-surface: color-mix(in srgb, var(--panel-bottom) 92%, var(--blc-color-white));
  --studio-surface-strong: color-mix(in srgb, var(--panel-bottom) 84%, var(--blc-color-white));
  --studio-line: color-mix(in srgb, var(--blc-color-white) 9%, transparent);
  --studio-line-strong: color-mix(in srgb, var(--blc-color-white) 14%, transparent);
  --studio-muted: color-mix(in srgb, var(--text-muted) 78%, transparent);
  --studio-faint: color-mix(in srgb, var(--text-primary) 42%, transparent);
  --studio-accent: var(--blc-teacher-nav-mic);
  position: fixed;
  inset: 0;
  z-index: 40;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--blc-color-white) 4%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--bg-base-bottom);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  overflow-y: auto;
}
#screen-teacher-studio .teacher-studio__header {
  position: sticky;
  top: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 57px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bg-base-top) 92%, transparent);
  border-bottom: 1px solid var(--studio-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
}
#screen-teacher-studio .teacher-studio__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
#screen-teacher-studio .teacher-studio__brand-icon {
  color: var(--studio-accent);
  font-size: 19px;
  font-variation-settings: 'FILL' 1;
}
#screen-teacher-studio .teacher-studio__main {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 18px 18px 118px;
  box-sizing: border-box;
}
#screen-teacher-studio .teacher-studio__intro {
  margin: 0 2px 16px;
  color: var(--studio-muted);
  font-family: var(--blc-font-body);
  font-size: 13px;
  line-height: 1.5;
}
#screen-teacher-studio .teacher-studio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
#screen-teacher-studio .teacher-studio__card {
  --card-tone: var(--studio-accent);
  position: relative;
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--studio-surface-strong), var(--studio-surface));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
#screen-teacher-studio .teacher-studio__card:active {
  transform: scale(0.99);
}
#screen-teacher-studio .teacher-studio__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--card-tone);
}
#screen-teacher-studio .teacher-studio__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-tone) 12%, transparent);
  color: var(--card-tone);
  font-size: 21px;
  font-variation-settings: 'FILL' 1;
}
#screen-teacher-studio .teacher-studio__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#screen-teacher-studio .teacher-studio__title {
  color: var(--text-primary);
  font-family: var(--blc-font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}
#screen-teacher-studio .teacher-studio__meta {
  color: var(--studio-muted);
  font-family: var(--blc-font-body);
  font-size: 12px;
  line-height: 1.25;
}
#screen-teacher-studio .teacher-studio__badge {
  --badge-tone: var(--studio-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 92px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--badge-tone) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--badge-tone) 10%, transparent);
  color: var(--badge-tone);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
#screen-teacher-studio .teacher-studio__chevron {
  color: var(--studio-faint);
  font-size: 18px;
}
#screen-teacher-studio .teacher-studio__card[data-tone="red"] { --card-tone: var(--color-danger); }
#screen-teacher-studio .teacher-studio__card[data-tone="purple"] { --card-tone: var(--blc-teacher-nav-event); }
#screen-teacher-studio .teacher-studio__card[data-tone="cyan"] { --card-tone: var(--blc-color-cyan-bright); }
#screen-teacher-studio .teacher-studio__card[data-tone="blue"] { --card-tone: var(--blc-teacher-nav-person); }
#screen-teacher-studio .teacher-studio__card[data-tone="teal"] { --card-tone: var(--kingdom-culture); }
#screen-teacher-studio .teacher-studio__card[data-tone="neutral"] { --card-tone: var(--text-muted); }
#screen-teacher-studio .teacher-studio__card[data-tone="orange"] { --card-tone: var(--color-warning); }
#screen-teacher-studio .teacher-studio__card[data-tone="green"] { --card-tone: var(--color-success); }
#screen-teacher-studio .teacher-studio__badge[data-tone="cyan"] { --badge-tone: var(--blc-color-cyan-bright); }
#screen-teacher-studio .teacher-studio__badge[data-tone="gold"] { --badge-tone: var(--blc-teacher-nav-mic); }
#screen-teacher-studio .teacher-studio__badge[data-tone="blue"] { --badge-tone: var(--blc-teacher-nav-person); }
#screen-teacher-studio .teacher-studio__badge[data-tone="muted"] { --badge-tone: var(--studio-muted); }
@media (min-width: 640px) {
  #screen-teacher-studio .teacher-studio__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #screen-teacher-studio .teacher-studio__card {
    grid-template-columns: 40px minmax(0, 1fr) 18px;
  }
  #screen-teacher-studio .teacher-studio__badge {
    grid-column: 2 / 3;
    justify-self: start;
    margin-top: 4px;
  }
  #screen-teacher-studio .teacher-studio__chevron {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
  }
}

/* Teacher Studio destinations */
#screen-submit-jesse,
#screen-broadcast,
#screen-press-kit {
  --tsd-surface: color-mix(in srgb, var(--panel-bottom) 90%, var(--blc-color-white));
  --tsd-surface-strong: color-mix(in srgb, var(--panel-bottom) 82%, var(--blc-color-white));
  --tsd-input: color-mix(in srgb, var(--blc-color-white) 6%, transparent);
  --tsd-line: color-mix(in srgb, var(--blc-color-white) 9%, transparent);
  --tsd-line-strong: color-mix(in srgb, var(--blc-color-white) 16%, transparent);
  --tsd-muted: var(--text-muted);
  --tsd-faint: var(--text-muted);
  --tsd-accent: var(--blc-teacher-nav-mic);
  min-height: 100vh;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--blc-color-white) 4%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--bg-base-bottom);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  overflow-y: auto;
}
#screen-broadcast { --tsd-accent: var(--blc-teacher-nav-group); }
#screen-press-kit { --tsd-accent: var(--blc-teacher-nav-person); }
.teacher-destination__header {
  position: sticky;
  top: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 11px 18px;
  background: color-mix(in srgb, var(--bg-base-top) 92%, transparent);
  border-bottom: 1px solid var(--tsd-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
}
.teacher-destination__back,
.teacher-destination__icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--tsd-line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.teacher-destination__titlebar {
  min-width: 0;
  text-align: center;
}
.teacher-destination__eyebrow,
.teacher-destination__label,
.teacher-destination__section-kicker,
.teacher-destination__count {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.teacher-destination__eyebrow {
  color: var(--tsd-muted);
}
.teacher-destination__title {
  color: var(--text-primary);
  font-family: var(--blc-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.teacher-destination__main {
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 18px 18px 122px;
  box-sizing: border-box;
}
.teacher-destination__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.teacher-destination__hero-copy {
  margin: 0;
  color: var(--tsd-muted);
  font-size: 13px;
  line-height: 1.5;
}
.teacher-destination__notice,
.teacher-destination__panel,
.teacher-destination__empty,
.teacher-destination__linkbar,
.teacher-destination__toggle {
  border: 1px solid var(--tsd-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--tsd-surface-strong), var(--tsd-surface));
}
.teacher-destination__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--blc-color-gold) 24%, transparent);
  background: color-mix(in srgb, var(--blc-color-gold) 8%, transparent);
  color: color-mix(in srgb, var(--blc-color-gold) 86%, var(--text-primary));
  font-size: 12px;
  line-height: 1.5;
}
.teacher-destination__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.teacher-destination__label,
.teacher-destination__section-kicker {
  color: var(--tsd-muted);
}
.teacher-destination__section-kicker[data-tone="gold"],
.teacher-destination__label[data-tone="gold"] { color: var(--blc-color-gold); }
.teacher-destination__section-kicker[data-tone="blue"],
.teacher-destination__label[data-tone="blue"] { color: var(--blc-color-blue-soft); }
.teacher-destination__section-kicker[data-tone="purple"],
.teacher-destination__label[data-tone="purple"] { color: var(--blc-color-purple-soft); }
.teacher-destination__section-kicker[data-tone="pink"],
.teacher-destination__label[data-tone="pink"] { color: var(--blc-color-pink-soft); }
.teacher-destination__section-kicker[data-tone="cyan"],
.teacher-destination__label[data-tone="cyan"] { color: var(--blc-color-cyan); }
.teacher-destination__section-kicker[data-tone="coral"],
.teacher-destination__label[data-tone="coral"] { color: var(--blc-color-pink-hot); }
.teacher-destination__count {
  color: var(--tsd-faint);
}
.teacher-destination__pills,
.teacher-destination__audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.teacher-destination__pill,
.teacher-destination__audience-button {
  border: 1px solid var(--tsd-line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: var(--tsd-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 8px 12px;
  text-align: left;
}
.teacher-destination__pill.is-active,
.teacher-destination__audience-button.is-active {
  border-color: color-mix(in srgb, var(--tsd-accent) 42%, transparent);
  background: color-mix(in srgb, var(--tsd-accent) 14%, transparent);
  color: var(--tsd-accent);
}
.teacher-destination__pill[data-tone="gold"] { --tsd-accent: var(--blc-color-gold); }
.teacher-destination__pill[data-tone="blue"] { --tsd-accent: var(--blc-color-blue-soft); }
.teacher-destination__pill[data-tone="pink"] { --tsd-accent: var(--blc-color-pink-soft); }
.teacher-destination__pill[data-tone="purple"] { --tsd-accent: var(--blc-color-purple-soft); }
.teacher-destination__field,
.teacher-destination__textarea,
.teacher-destination__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--tsd-line);
  border-radius: 12px;
  background: var(--tsd-input);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  font-size: 13px;
  line-height: 1.5;
  outline: none;
  padding: 12px 13px;
}
.teacher-destination__textarea {
  min-height: 96px;
  resize: vertical;
}
.teacher-destination__meta {
  color: var(--tsd-faint);
  font-size: 11px;
  margin-top: 5px;
  text-align: right;
}
.teacher-destination__primary,
.teacher-destination__secondary,
.teacher-destination__add-button {
  border-radius: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--blc-font-display);
  font-size: 14px;
  font-weight: 850;
  min-height: 46px;
  padding: 12px 16px;
}
.teacher-destination__primary {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, var(--tsd-accent), color-mix(in srgb, var(--tsd-accent) 58%, var(--blc-color-white)));
  color: var(--bg-base-bottom);
}
.teacher-destination__primary[data-tone="pink"] {
  --tsd-accent: var(--blc-color-pink);
  color: var(--blc-color-white);
}
.teacher-destination__primary:disabled {
  cursor: default;
  opacity: 0.45;
}
.teacher-destination__secondary,
.teacher-destination__add-button {
  border: 1px solid var(--tsd-line);
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--text-primary);
}
.teacher-destination__add-button {
  width: 100%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--tsd-accent) 34%, transparent);
  background: color-mix(in srgb, var(--tsd-accent) 9%, transparent);
  color: var(--tsd-accent);
}
.teacher-destination__empty {
  padding: 24px 14px;
  text-align: left;
  color: var(--tsd-muted);
  font-size: 13px;
  border-style: dashed;
}
.teacher-destination__submission {
  width: 100%;
  border: 1px solid var(--tsd-line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 13px;
  text-align: left;
}
.teacher-destination__submission-main {
  flex: 1;
  min-width: 0;
}
.teacher-destination__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.teacher-destination__chip,
.teacher-destination__status {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-family: var(--blc-font-display);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
}
.teacher-destination__chip {
  background: color-mix(in srgb, var(--tsd-accent) 14%, transparent);
  color: var(--tsd-accent);
}
.teacher-destination__chip[data-tone="gold"] { --tsd-accent: var(--blc-color-gold); }
.teacher-destination__chip[data-tone="blue"] { --tsd-accent: var(--blc-color-blue-soft); }
.teacher-destination__chip[data-tone="pink"] { --tsd-accent: var(--blc-color-pink-soft); }
.teacher-destination__chip[data-tone="purple"] { --tsd-accent: var(--blc-color-purple-soft); }
.teacher-destination__status[data-status="reviewed"] {
  background: color-mix(in srgb, var(--blc-color-green) 10%, transparent);
  color: var(--blc-color-green);
}
.teacher-destination__status,
.teacher-destination__status[data-status="pending"] {
  background: color-mix(in srgb, var(--blc-color-gold) 10%, transparent);
  color: var(--blc-color-gold);
}
.teacher-destination__preview {
  color: color-mix(in srgb, var(--text-primary) 68%, transparent);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-destination__tabs {
  border: 1px solid var(--tsd-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  display: flex;
  margin-bottom: 18px;
  padding: 3px;
}
.teacher-destination__tab {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--tsd-muted);
  cursor: pointer;
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 850;
  padding: 10px 12px;
}
.teacher-destination__tab.is-active {
  background: linear-gradient(135deg, var(--blc-color-cyan), var(--blc-color-blue));
  color: var(--bg-base-bottom);
}
#bcEmailTab,
#bcNotifyTab {
  margin-top: 14px;
}
#bcContent,
#bcContent section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.teacher-destination__panel {
  padding: 14px;
}
.teacher-destination__status-card {
  border: 1px solid var(--tsd-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--tsd-surface-strong), var(--tsd-surface));
  padding: 14px;
}
.teacher-destination__stat-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--tsd-muted);
  font-size: 12px;
  margin-top: 9px;
}
.teacher-destination__stat-row strong {
  color: var(--text-primary);
}
.teacher-destination__linkbar,
.teacher-destination__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.teacher-destination__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blc-color-cyan);
  box-shadow: 0 0 8px color-mix(in srgb, var(--blc-color-cyan) 70%, transparent);
  flex-shrink: 0;
}
.teacher-destination__link-text {
  color: var(--text-primary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-destination__text-button {
  border: none;
  background: transparent;
  color: var(--tsd-accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 800;
  padding: 0;
}
.teacher-destination__photo-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.teacher-destination__photo,
.teacher-destination__photo-add {
  width: 96px;
  flex: 0 0 auto;
}
.teacher-destination__photo-frame,
.teacher-destination__photo-add {
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
}
.teacher-destination__photo-frame {
  position: relative;
  border: 1px solid var(--tsd-line);
  background: var(--tsd-input);
}
.teacher-destination__photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.teacher-destination__photo-add {
  border: 1px dashed color-mix(in srgb, var(--tsd-accent) 42%, transparent);
  background: color-mix(in srgb, var(--tsd-accent) 8%, transparent);
  color: var(--tsd-accent);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
}
.teacher-destination__photo-remove,
.teacher-destination__row-remove,
.teacher-destination__move {
  border: 1px solid var(--tsd-line);
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--tsd-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teacher-destination__photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
}
.teacher-destination__photo-caption {
  margin-top: 6px;
  padding: 7px 8px;
  font-size: 11px;
}
.teacher-destination__move-row {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.teacher-destination__move {
  flex: 1;
  border-radius: 8px;
  padding: 5px;
}
.teacher-destination__move:disabled {
  opacity: 0.35;
  cursor: default;
}
.teacher-destination__row-card {
  border: 1px solid var(--tsd-line);
  border-radius: 10px;
  background: var(--tsd-input);
  padding: 10px;
}
.teacher-destination__row-card.is-credit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.teacher-destination__row-remove {
  border: none;
  background: transparent;
  padding: 5px;
}
.teacher-destination__row-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teacher-destination__inline-fields {
  display: flex;
  gap: 6px;
}
.teacher-destination__inline-fields .teacher-destination__input:last-child {
  width: 74px;
  flex: 0 0 auto;
}
.teacher-destination__social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.teacher-destination__social {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tsd-line);
  border-radius: 10px;
  background: var(--tsd-input);
  padding: 10px 11px;
}
.teacher-destination__sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  border-top: 1px solid var(--tsd-line);
  background: color-mix(in srgb, var(--bg-base-bottom) 96%, transparent);
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.teacher-destination__sticky-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
}
.teacher-destination__switch {
  position: relative;
  width: 44px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 12%, transparent);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.teacher-destination__switch[aria-checked="true"] {
  background: var(--blc-color-gold);
}
.teacher-destination__switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--blc-color-white);
  transition: transform 0.2s ease;
}
.teacher-destination__switch[aria-checked="true"] span {
  transform: translateX(18px);
}

/* Teacher Schedule hub */
#screen-booking-manage.teacher-schedule {
  --schedule-surface: color-mix(in srgb, var(--panel-bottom) 92%, var(--blc-color-white));
  --schedule-surface-strong: color-mix(in srgb, var(--panel-bottom) 84%, var(--blc-color-white));
  --schedule-line: color-mix(in srgb, var(--blc-color-white) 9%, transparent);
  --schedule-muted: var(--text-muted);
  --schedule-accent: var(--blc-color-purple-soft);
  min-height: 100vh;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--blc-color-white) 4%, transparent) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--bg-base-bottom);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  overflow-y: auto;
}
#screen-booking-manage .teacher-schedule__header {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 57px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 82px;
  align-items: center;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--bg-base-top) 92%, transparent);
  border-bottom: 1px solid var(--schedule-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
}
#screen-booking-manage .teacher-schedule__brand {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
#screen-booking-manage .teacher-schedule__brand-icon {
  width: 18px;
  height: 18px;
  color: var(--schedule-accent);
}
#screen-booking-manage .teacher-schedule__add-event {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--schedule-accent) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--schedule-accent) 10%, transparent);
  color: var(--schedule-accent);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
#screen-booking-manage .teacher-schedule__add-event [data-blc-icon] {
  width: 12px;
  height: 12px;
}
#screen-booking-manage .teacher-schedule__body {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 12px 18px 118px;
  box-sizing: border-box;
}
#screen-booking-manage .teacher-schedule__partner-switch {
  margin-bottom: 12px;
}
#screen-booking-manage .teacher-schedule__partner-switch > div {
  max-width: none !important;
  padding: 0 !important;
}
#screen-booking-manage .teacher-schedule__segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
#screen-booking-manage .teacher-schedule__segment {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--schedule-line);
  border-radius: 999px;
  background: transparent;
  color: var(--schedule-muted);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
#screen-booking-manage .teacher-schedule__segment.is-active {
  border-color: color-mix(in srgb, var(--blc-color-white) 16%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  color: var(--text-primary);
}
#screen-booking-manage .teacher-schedule__legacy-tabs {
  display: none !important;
}
#screen-booking-manage .teacher-schedule__main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
}
#screen-booking-manage .teacher-schedule__nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 16px 16px 32px;
  background: rgba(19,19,21,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  box-sizing: border-box;
}

/* --- Teacher Trial Banner --- */
.trial-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  padding: 0 40px 0 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trial-banner-message {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.trial-banner-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: currentColor;
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.trial-banner-close:active {
  transform: translateY(-50%) scale(0.95);
}
body.has-trial-banner #blcAppHeader,
body.has-trial-banner .blc-screen > header {
  top: var(--trial-banner-offset, 36px) !important;
}
body.has-trial-banner .blc-auto-back {
  top: calc(env(safe-area-inset-top, 0px) + 10px + var(--trial-banner-offset, 36px)) !important;
}
body.has-trial-banner .blc-screen > main,
body.has-trial-banner .blc-screen > [id$="-view"] > main {
  padding-top: calc(80px + var(--trial-banner-offset, 36px)) !important;
}
body.has-trial-banner #cal-grid-view {
  padding-top: calc(80px + var(--trial-banner-offset, 36px)) !important;
}
body.has-trial-banner #recordingsActionBar {
  top: calc(57px + var(--trial-banner-offset, 36px)) !important;
}
body.has-trial-banner #recordingsListBody {
  padding-top: calc(130px + var(--trial-banner-offset, 36px)) !important;
}
body.has-trial-banner #devModeBanner {
  top: calc(60px + var(--trial-banner-offset, 36px)) !important;
}

/* Student Recordings redesign */
#screen-recordings,
#screen-recording-detail {
  --recordings-surface: color-mix(in srgb, var(--panel-bottom) 92%, var(--blc-color-white));
  --recordings-surface-strong: color-mix(in srgb, var(--panel-bottom) 82%, var(--blc-color-white));
  --recordings-line: color-mix(in srgb, var(--blc-color-white) 9%, transparent);
  --recordings-line-strong: color-mix(in srgb, var(--blc-color-white) 14%, transparent);
  --recordings-muted: var(--text-muted);
  --recordings-faint: color-mix(in srgb, var(--blc-color-white) 36%, transparent);
  --recordings-cyan: var(--blc-student-nav-community);
  --recordings-gold: var(--blc-student-nav-home);
  --recordings-danger: var(--blc-student-nav-mic);
  --recordings-neutral: var(--text-muted);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
}

#screen-recordings .student-recordings__header,
#screen-recording-detail .student-recording-detail__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 57px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg-base-top) 95%, transparent);
  border-bottom: 1px solid var(--recordings-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-sizing: border-box;
}

#screen-recordings .student-recordings__back,
#screen-recording-detail .student-recording-detail__back {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--recordings-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#screen-recordings .student-recordings__title,
#screen-recording-detail .student-recording-detail__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

#screen-recordings .student-recordings__title [data-blc-icon],
#screen-recording-detail .student-recording-detail__title [data-blc-icon] {
  color: var(--recordings-gold);
  display: inline-flex;
}

#screen-recordings .student-recordings__header-spacer,
#screen-recording-detail .student-recording-detail__header-spacer {
  width: 34px;
}

#screen-recordings .student-recordings__action-bar {
  position: fixed;
  top: 57px;
  left: 0;
  right: 0;
  z-index: 190;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--bg-base-top) 97%, transparent);
  border-bottom: 1px solid var(--recordings-line);
  box-sizing: border-box;
}

#screen-recordings .student-recordings__primary,
#screen-recordings .student-recordings__empty-action {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--recordings-gold), color-mix(in srgb, var(--recordings-gold) 74%, var(--blc-color-white)));
  color: var(--bg-base-top);
  font-family: var(--blc-font-display);
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--recordings-gold) 24%, transparent);
}

#screen-recordings .student-recordings__body {
  padding: 130px 18px 120px;
  max-width: 448px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

#screen-recordings .student-recordings__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 12px;
  color: var(--recordings-muted);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

#screen-recordings .student-recordings__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#screen-recordings .student-recordings__row {
  width: 100%;
  border: 1px solid var(--recordings-line);
  border-radius: 13px;
  padding: 12px 13px;
  background: linear-gradient(180deg, var(--recordings-surface-strong), var(--recordings-surface));
  color: var(--text-primary);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

#screen-recordings .student-recordings__row-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--recordings-cyan);
  background: color-mix(in srgb, var(--recordings-cyan) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--recordings-cyan) 28%, transparent);
}

#screen-recordings .student-recordings__row-icon[data-tone="processing"] {
  color: var(--recordings-gold);
  background: color-mix(in srgb, var(--recordings-gold) 13%, transparent);
  border-color: color-mix(in srgb, var(--recordings-gold) 28%, transparent);
}

#screen-recordings .student-recordings__row-icon[data-tone="failed"] {
  color: var(--recordings-danger);
  background: color-mix(in srgb, var(--recordings-danger) 13%, transparent);
  border-color: color-mix(in srgb, var(--recordings-danger) 28%, transparent);
}

#screen-recordings .student-recordings__row-icon[data-tone="neutral"] {
  color: var(--recordings-neutral);
  background: color-mix(in srgb, var(--recordings-neutral) 13%, transparent);
  border-color: color-mix(in srgb, var(--recordings-neutral) 28%, transparent);
}

#screen-recordings .student-recordings__row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#screen-recordings .student-recordings__row-title {
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-recordings .student-recordings__row-meta {
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  color: var(--recordings-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-recordings .student-recordings__status,
#screen-recording-detail .student-recordings__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--recordings-cyan);
  background: color-mix(in srgb, var(--recordings-cyan) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--recordings-cyan) 25%, transparent);
}

#screen-recordings .student-recordings__status[data-tone="processing"],
#screen-recording-detail .student-recordings__status[data-tone="processing"] {
  color: var(--recordings-gold);
  background: color-mix(in srgb, var(--recordings-gold) 9%, transparent);
  border-color: color-mix(in srgb, var(--recordings-gold) 25%, transparent);
}

#screen-recordings .student-recordings__status[data-tone="failed"],
#screen-recording-detail .student-recordings__status[data-tone="failed"] {
  color: var(--recordings-danger);
  background: color-mix(in srgb, var(--recordings-danger) 9%, transparent);
  border-color: color-mix(in srgb, var(--recordings-danger) 25%, transparent);
}

#screen-recordings .student-recordings__status[data-tone="neutral"],
#screen-recording-detail .student-recordings__status[data-tone="neutral"] {
  color: var(--recordings-neutral);
  background: color-mix(in srgb, var(--recordings-neutral) 9%, transparent);
  border-color: color-mix(in srgb, var(--recordings-neutral) 25%, transparent);
}

#screen-recordings .student-recordings__chevron {
  color: var(--recordings-faint);
  display: inline-flex;
}

#screen-recordings .student-recordings__state,
#screen-recording-detail .student-recording-detail__state,
#screen-recordings .student-recordings__empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--recordings-muted);
  gap: 12px;
}

#screen-recordings .student-recordings__state-icon,
#screen-recording-detail .student-recording-detail__state-icon,
#screen-recordings .student-recordings__empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--recordings-gold);
  background: color-mix(in srgb, var(--recordings-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--recordings-gold) 24%, transparent);
}

#screen-recording-detail .student-recording-detail__state[data-tone="failed"] .student-recording-detail__state-icon {
  color: var(--recordings-danger);
  background: color-mix(in srgb, var(--recordings-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--recordings-danger) 24%, transparent);
}

#screen-recordings .student-recordings__empty-title {
  font-size: 16px;
  font-weight: 850;
  color: var(--text-primary);
}

#screen-recordings .student-recordings__empty-copy {
  max-width: 260px;
  font-size: 13px;
  line-height: 1.5;
}

#screen-recordings .student-recordings__empty-action {
  width: auto;
  min-width: 180px;
  padding: 0 18px;
}

#screen-recording-detail .student-recording-detail__body {
  padding: 80px 16px 120px;
  max-width: 448px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

#screen-recording-detail .student-recording-detail__hero {
  margin: 0 0 16px;
}

#screen-recording-detail .student-recording-detail__type {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--recordings-gold);
  background: color-mix(in srgb, var(--recordings-gold) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--recordings-gold) 26%, transparent);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#screen-recording-detail .student-recording-detail__name {
  margin: 10px 0 6px;
  font-family: var(--blc-font-display);
  font-size: 22px;
  font-weight: 850;
  line-height: 1.15;
  color: var(--text-primary);
}

#screen-recording-detail .student-recording-detail__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  color: var(--recordings-muted);
  font-size: 12px;
}

#screen-recording-detail .student-recording-detail__panel,
#screen-recording-detail .student-recording-detail__share {
  margin-bottom: 14px;
  padding: 15px;
  border-radius: 13px;
  border: 1px solid var(--recordings-line);
  background: linear-gradient(180deg, var(--recordings-surface-strong), var(--recordings-surface));
}

#screen-recording-detail .student-recording-detail__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--recordings-gold);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#screen-recording-detail .student-recording-detail__player {
  width: 100%;
  display: none;
  margin-bottom: 10px;
  border-radius: 8px;
}

#screen-recording-detail .student-recording-detail__audio-status,
#screen-recording-detail .student-recording-detail__placeholder,
#screen-recording-detail .student-recording-detail__hint,
#screen-recording-detail .student-recording-detail__vocab-context,
#screen-recording-detail .student-recording-detail__share-copy {
  color: var(--recordings-muted);
  font-size: 12px;
  line-height: 1.5;
}

#screen-recording-detail .student-recording-detail__download {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--recordings-cyan);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

#screen-recording-detail .student-recording-detail__notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--recordings-gold) 24%, transparent);
  background: color-mix(in srgb, var(--recordings-gold) 10%, transparent);
  color: var(--recordings-gold);
}

#screen-recording-detail .student-recording-detail__notice[data-tone="failed"] {
  border-color: color-mix(in srgb, var(--recordings-danger) 24%, transparent);
  background: color-mix(in srgb, var(--recordings-danger) 10%, transparent);
  color: var(--recordings-danger);
}

#screen-recording-detail .student-recording-detail__notice strong,
#screen-recording-detail .student-recording-detail__notice span {
  display: block;
}

#screen-recording-detail .student-recording-detail__notice strong {
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 2px;
}

#screen-recording-detail .student-recording-detail__section-title {
  margin: 0 0 10px;
  color: var(--recordings-muted);
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#screen-recording-detail .student-recording-detail__summary {
  color: color-mix(in srgb, var(--text-primary) 86%, transparent);
  font-size: 14px;
  line-height: 1.65;
}

#screen-recording-detail .student-recording-detail__toggle {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--recordings-cyan);
  font-family: var(--blc-font-body);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

#screen-recording-detail .student-recording-detail__transcript {
  display: none;
  margin-top: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--recordings-line);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: color-mix(in srgb, var(--text-primary) 72%, transparent);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 400px;
  overflow-y: auto;
}

#screen-recording-detail .student-recording-detail__transcript.is-open {
  display: block;
}

#screen-recording-detail .student-recording-detail__vocab-card {
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--recordings-line);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  margin-top: 9px;
}

#screen-recording-detail .student-recording-detail__vocab-term,
#screen-recording-detail .student-recording-detail__share-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 850;
  margin-bottom: 4px;
}

#screen-recording-detail .student-recording-detail__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#screen-recording-detail .student-recording-detail__text-action,
#screen-recording-detail .student-recording-detail__thread {
  border: 1px solid color-mix(in srgb, var(--recordings-cyan) 24%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--recordings-cyan) 10%, transparent);
  color: var(--recordings-cyan);
  font-family: var(--blc-font-body);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  padding: 9px 12px;
}

#screen-recording-detail .student-recording-detail__text-action {
  flex: 1;
}

#screen-recording-detail .student-recording-detail__text-action[data-tone="muted"] {
  border-color: var(--recordings-line-strong);
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--recordings-muted);
  flex: 0 0 auto;
}

#screen-recording-detail .student-recording-detail__share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

#screen-recording-detail .student-recording-detail__switch {
  width: 48px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 15%, transparent);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

#screen-recording-detail .student-recording-detail__switch span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--text-primary);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 0.2s ease;
}

#screen-recording-detail .student-recording-detail__switch.is-on {
  background: var(--recordings-cyan);
}

#screen-recording-detail .student-recording-detail__switch.is-on span {
  left: 23px;
}

#screen-recording-detail .student-recording-detail__thread {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

@media (max-width: 360px) {
  #screen-recordings .student-recordings__row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  #screen-recordings .student-recordings__status,
  #screen-recordings .student-recordings__chevron {
    grid-column: 2;
    justify-self: start;
  }
}

/* Student Home redesign */
.student-home {
  --section-family: var(--section-home);
  --home-panel: color-mix(in srgb, var(--panel-bottom) 88%, var(--blc-color-white));
  --home-panel-soft: color-mix(in srgb, var(--panel-bottom) 94%, var(--blc-color-white));
  --home-line: color-mix(in srgb, var(--blc-color-white) 10%, transparent);
  --home-muted: color-mix(in srgb, var(--text-muted) 76%, transparent);
  --home-faint: color-mix(in srgb, var(--blc-color-white) 34%, transparent);
  --home-ink: var(--text-primary);
  padding: 78px 18px 120px;
  max-width: 448px;
  margin: 0 auto;
  /* #1235 — #screen-home is the single vertical scroll host. An unconstrained
     nested overflow container cannot scroll itself, and overscroll containment
     prevents touch gestures from chaining to the screen. */
  touch-action: pan-y;
  font-family: var(--blc-font-body);
  color: var(--home-ink);
}

.student-home__greeting {
  margin: 4px 0 14px;
  font-family: var(--blc-font-display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.1;
}

.student-home__greeting-name { color: var(--kingdom-pcr); }

.student-home__spark {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 10%, transparent), color-mix(in srgb, var(--blc-color-white) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent-gold) 20%, transparent);
  box-shadow: 0 0 30px -12px var(--accent-gold);
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.student-home__spark:active { transform: scale(.98); }

.student-home__spark:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

.student-home__spark-art {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent-gold) 67%, transparent));
}

.student-home__spark-body { flex: 1; min-width: 0; }
.student-home__spark-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

.student-home__eyebrow {
  font-family: var(--blc-font-label);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-gold);
}

.student-home__spark-name {
  font-family: var(--blc-font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 3px;
}

.student-home__spark-level {
  color: var(--home-muted);
  font-weight: 600;
  font-size: 13px;
}

.student-home__streak { text-align: right; flex: 0 0 auto; }
.student-home__streak-row { display: flex; align-items: center; gap: 4px; justify-content: flex-end; color: var(--kingdom-pcr); }
.student-home__streak .blc-svg-icon { width: 20px; height: 20px; }
.student-home__streak-number { font-family: var(--blc-font-display); font-size: 34px; font-weight: 900; line-height: .9; letter-spacing: -.04em; }
/* Compact weekly-goal indicator — small dots (one per target session) with a
   check when the goal is met. Replaces the bare "1 of 5" that competed with the
   large streak number directly above it (#1099). */
.student-home__weekly-goal { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.student-home__goal-dot { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--home-muted) 45%, transparent); flex: 0 0 auto; }
.student-home__goal-dot.is-filled { background: var(--accent-gold); box-shadow: 0 0 6px color-mix(in srgb, var(--accent-gold) 55%, transparent); }
.student-home__goal-check { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-gold); }
.student-home__goal-check .blc-svg-icon { width: 12px; height: 12px; }
.student-home__weekly-goal.is-complete .student-home__goal-dot { background: var(--accent-gold); }

.student-home__progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 10px;
}

.student-home__progress-number,
.student-home__progress-remaining {
  font-family: var(--blc-font-label);
  font-size: 9px;
  color: var(--home-muted);
}

/* The current-XP number stays on one line; the "X XP to <stage>" label may wrap
   to its own line and never clips at the card edge, at any width (#1099). */
.student-home__progress-number { white-space: nowrap; flex: 0 0 auto; }
.student-home__progress-remaining { color: var(--accent-gold); min-width: 0; overflow-wrap: anywhere; text-align: right; }
.student-home__bar { flex: 1 1 60px; min-width: 60px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--blc-color-white) 8%, transparent); overflow: hidden; }
.student-home__bar-fill { width: 0%; height: 100%; border-radius: 999px; background: var(--accent-gold); box-shadow: 0 0 10px color-mix(in srgb, var(--accent-gold) 50%, transparent); transition: width 0.6s ease; }
/* #1103 — Calendar card matches the lesson tiles: directional tinted body (tint
   at the icon edge, falling off toward near-black) with a --card-glow-strength
   halo behind the icon. */
.student-home__weekly { --card-tone: var(--section-family); --card-glow-strength: 34%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 54px; border-radius: 14px; background: linear-gradient(100deg, color-mix(in srgb, var(--card-tone) 22%, transparent) 0%, color-mix(in srgb, var(--card-tone) 5%, transparent) 60%, transparent 100%); border: 1px solid color-mix(in srgb, var(--card-tone) 34%, transparent); margin-bottom: 18px; }
/* #1114 — Home Calendar strip: third distinct destination-palette hue, so the
   Home trio (Your Teachers sky, My Lessons cyan, Calendar violet) never repeats
   and never reuses the gold Home nav colour. */
.student-home__weekly[data-tone="violet"] { --card-tone: var(--card-hue-violet); }
.student-home__weekly[data-tone="k-cyan"] { --card-tone: var(--k-cyan); }
.student-home__weekly[data-tone="cyan"] { --card-tone: var(--card-hue-cyan); }
.student-home__weekly .blc-svg-icon { width: 16px; height: 16px; color: var(--section-family); }
/* #1103 — leading icon reverts to a deep, low-saturation container with the
   bright glyph carrying the hue (matching every other card); the #1099 inverted
   bright-fill pill is removed. */
.student-home__weekly > [data-blc-icon]:first-child {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--card-tone) 14%, var(--bg-base-bottom));
  box-shadow: 0 0 15px color-mix(in srgb, var(--card-tone) var(--card-glow-strength), transparent);
}
.student-home__weekly > [data-blc-icon]:first-child .blc-svg-icon { width: 20px; height: 20px; color: var(--card-tone); }
.student-home__section-label { font-family: var(--blc-font-label); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--section-family); margin: 0 0 9px; }
.student-home__section-label + .student-home__section-label, .student-home__spark + .student-home__section-label { margin-top: 18px; }
.student-home__hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 188px; border-radius: 18px; overflow: hidden; margin-bottom: 16px; border: 1px solid color-mix(in srgb, var(--kingdom-ibm) 42%, transparent); background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg-base-mid) 40%, transparent) 62%, color-mix(in srgb, var(--bg-base-mid) 70%, transparent) 100%), linear-gradient(135deg, color-mix(in srgb, var(--k-ibm) 78%, transparent), color-mix(in srgb, var(--k-eos) 42%, transparent)); }
.student-home__hero-glow { position: absolute; top: 12px; left: 18%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--k-ibm-soft) 42%, transparent), transparent 70%); filter: blur(28px); pointer-events: none; }
.student-home__hero-content { position: relative; z-index: 1; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; }
.student-home__pill-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.student-home__pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-family: var(--blc-font-label); font-size: 10px; letter-spacing: 0.06em; font-weight: 700; background: color-mix(in srgb, var(--bg-base-bottom) 68%, transparent); border: 1px solid color-mix(in srgb, var(--k-ibm-soft) 50%, transparent); color: var(--k-ibm-soft); white-space: nowrap; backdrop-filter: blur(4px); }
.student-home__pill--soft { background: color-mix(in srgb, var(--bg-base-bottom) 55%, transparent); border-color: color-mix(in srgb, var(--text-primary) 26%, transparent); color: var(--text-primary); }
.student-home__hero-kicker { font-size: 11px; color: var(--home-muted); margin-bottom: 2px; }
.student-home__hero-title { font-family: var(--blc-font-display); font-size: 23px; font-weight: 800; line-height: 1.1; margin: 0 0 4px; }
.student-home__hero-copy { font-size: 12px; color: var(--home-muted); margin-bottom: 14px; max-width: 78%; }
.student-home__hero-button { width: 100%; padding: 12px; border-radius: 12px; border: none; background: var(--kingdom-ibm); color: color-mix(in srgb, var(--bg-base-bottom) 82%, var(--blc-color-blue)); font-family: var(--blc-font-display); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; box-shadow: 0 0 22px color-mix(in srgb, var(--kingdom-ibm) 31%, transparent); }
.student-home__hero-button .blc-svg-icon { width: 18px; height: 18px; }
/* Free practice lives in the hero pill row — a real action, so it reads as a gold
   tappable chip rather than a status label while retaining the row's even spacing. */
.student-home__pill--action { appearance: none; cursor: pointer; text-transform: uppercase; padding: 4px 10px; background: color-mix(in srgb, var(--accent-gold) 16%, transparent); border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent); color: var(--accent-gold); box-shadow: 0 1px 10px color-mix(in srgb, var(--accent-gold) 20%, transparent); transition: transform 0.15s ease; }
.student-home__pill--action .blc-svg-icon { width: 13px; height: 13px; color: var(--accent-gold); }
.student-home__pill--action:active { transform: scale(0.94); }
/* Referral card moved to the Settings drawer — restate the home-scoped tokens it uses. */
#settingsReferralSection { --home-line: color-mix(in srgb, var(--blc-color-white) 10%, transparent); --home-muted: var(--text-muted); --home-ink: var(--text-primary); }
.student-home__referral { padding: 11px 14px; border-radius: 14px; border: 1px solid var(--home-line); background: color-mix(in srgb, var(--blc-color-white) 3%, transparent); display: flex; align-items: center; gap: 10px; }
.student-home__referral .blc-svg-icon { width: 18px; height: 18px; color: var(--home-muted); }
.student-home__referral-text { flex: 1; font-size: 12px; color: var(--home-muted); }
.student-home__referral-text strong { color: var(--home-ink); font-weight: 700; }
.student-home__referral-action { font-family: var(--blc-font-label); font-size: 10px; color: var(--kingdom-pcr); }
.student-home__skeleton { border-radius: 6px; background: color-mix(in srgb, var(--blc-color-white) 8%, transparent); }

.student-community-screen {
  --section-family: var(--section-community);
  background: var(--bg-base-bottom);
  color: var(--text-primary);
}

#screen-progress.student-community-screen {
  --section-family: var(--section-progress);
}

.student-community-screen .student-community__header {
  position: fixed;
  inset: 0 auto auto 50%;
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--panel-stroke);
  background: var(--panel-bottom);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.student-community-screen .student-community__back {
  display: none;
}

/* When shown as a Teacher Studio destination (a non-root screen) the Community
   header gets the shared floating back pill injected as the screen's first
   child (the sibling right before this header). Its own back button stays
   hidden because the screen is also a student root, so reserve room for the
   pill here — otherwise it sits on top of the eyebrow and title. The sibling
   combinator matches only while the pill is present, so student-root context
   (no pill) keeps the header flush. */
.student-community-screen > .blc-auto-back ~ .student-community__header {
  padding-left: 58px;
}

.student-community-screen .student-community__titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-community-screen .student-community__eyebrow,
.student-community-screen .student-community__section-label,
.student-community-screen .student-community__text-action,
.student-community-screen .student-community__form-label,
.student-community-screen .student-community__badge,
.student-community-screen .student-community__meta,
.student-community-screen .student-community__utility-meta {
  font-family: var(--blc-font-label);
  text-transform: uppercase;
}

.student-community-screen .student-community__eyebrow {
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--section-family);
}

.student-community-screen .student-community__title {
  font-family: var(--blc-font-display);
  font-size: 24px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--text-primary);
}

.student-community-screen .student-community__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.student-community-screen .student-community__icon-button,
.student-community-screen .student-community__new-button {
  min-width: 36px;
  height: 36px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--nav-label);
  cursor: pointer;
}

.student-community-screen .student-community__new-button {
  gap: 5px;
  padding: 0 10px;
  border-color: color-mix(in srgb, var(--section-family) 25%, transparent);
  background: color-mix(in srgb, var(--section-family) 12%, transparent);
  color: var(--section-family);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.student-community-screen .student-community__main {
  max-width: 520px;
  min-width: 0;
  margin: 0 auto;
  padding: 96px 18px 120px;
  overflow-x: hidden;
  font-family: var(--blc-font-body);
}

.student-community-screen .student-community__error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 700;
}

.student-community-screen .student-community__create {
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
}

.student-community-screen .student-community__form-label {
  margin-bottom: 8px;
  color: var(--nav-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.student-community-screen .student-community__visibility {
  margin-bottom: 12px;
}

.student-community-screen .student-community__type-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 6%, transparent);
}

.student-community-screen .student-community__type-button {
  flex: 1;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--nav-label);
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.student-community-screen .student-community__type-button.is-active {
  border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 18%, transparent);
  color: var(--accent-cyan);
}

.student-community-screen .student-community__form-actions {
  display: flex;
  gap: 8px;
}

.student-community-screen .student-community__secondary-button,
.student-community-screen .student-community__primary-button,
.student-community-screen .student-community__accept {
  border-radius: 10px;
  font-family: var(--blc-font-display);
  font-weight: 800;
  cursor: pointer;
}

.student-community-screen .student-community__secondary-button {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--panel-stroke);
  background: transparent;
  color: var(--nav-label);
  font-size: 12px;
}

.student-community-screen .student-community__primary-button {
  flex: 2;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 55%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 22%, transparent);
  color: var(--accent-cyan);
  font-size: 13px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-cyan) 10%, transparent);
}

.student-community-screen .student-community__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.student-community-screen .student-community__section-label {
  color: var(--section-family);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.student-community-screen .student-community__text-action {
  border: 0;
  background: transparent;
  color: var(--section-family);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.student-community-screen .student-community__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.student-community-screen .student-community__card {
  --card-tone: var(--section-family);
  /* #1101 — Glossary's restored intensity: tone-tinted body wash, matching
     coloured border, dark icon container, bright glyph. Uniform across siblings;
     hue alone distinguishes them.
     #1103 — depth: directional wash (tint at the icon edge, falling off toward
     near-black) plus a soft hue halo behind the icon container. */
  --card-body-fill: 22%;
  --card-border-strength: 34%;
  --card-icon-fill: 14%;
  --card-glow-strength: 34%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--card-tone) var(--card-border-strength), transparent);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--card-tone) var(--card-body-fill), transparent) 0%,
    color-mix(in srgb, var(--card-tone) 5%, transparent) 60%,
    transparent 100%
  );
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.student-community-screen .student-community__card.is-invited {
  cursor: default;
}

/* #1101 — explore entries no longer escalate their wash per position; each card
   carries Glossary's full intensity and is distinguished by its own hue. */

/* Per-card tones — drawn from the shared destination palette (#1114). Serves both
   Community (Calendar cyan, Local Dances coral, dynamic cards rotating the rest)
   and Progress (My Spark violet, WSDC Points gold, Leaderboard cyan). No card
   reuses its screen's purple/orange nav colour; no two cards on a screen collide.
   Uniform intensity across every hue. */
.student-community-screen .student-community__card[data-tone="cyan"]    { --card-tone: var(--card-hue-cyan); }
.student-community-screen .student-community__card[data-tone="sky"]     { --card-tone: var(--card-hue-sky); }
.student-community-screen .student-community__card[data-tone="violet"]  { --card-tone: var(--card-hue-violet); }
.student-community-screen .student-community__card[data-tone="magenta"] { --card-tone: var(--card-hue-magenta); }
.student-community-screen .student-community__card[data-tone="coral"]   { --card-tone: var(--card-hue-coral); }
.student-community-screen .student-community__card[data-tone="amber"]   { --card-tone: var(--card-hue-amber); }
.student-community-screen .student-community__card[data-tone="gold"]    { --card-tone: var(--card-hue-gold); }
.student-community-screen .student-community__card[data-tone="lime"]    { --card-tone: var(--card-hue-lime); }

/* Design-kit tones for the Community and Progress hubs (student-kit.jsx +
   student-screens-c/d.jsx). The kit assigns cyan to events/calendar, teal to
   the social/scene surfaces, and gold to the XP-and-spark layer. */
.student-community-screen .student-community__card[data-tone="k-cyan"] { --card-tone: var(--k-cyan); }
.student-community-screen .student-community__card[data-tone="k-cc"]   { --card-tone: var(--k-cc-soft); }
.student-community-screen .student-community__card[data-tone="k-gold"] { --card-tone: var(--k-gold); }
.student-community-screen .student-community__card[data-tone="k-ibm"]  { --card-tone: var(--k-ibm-soft); }
.student-community-screen .student-community__card[data-tone="k-eos"]  { --card-tone: var(--k-eos-soft); }
.student-community-screen .student-community__card[data-tone="k-pcr"]  { --card-tone: var(--k-pcr); }
.student-community-screen .student-community__card[data-tone="k-pcr-soft"] { --card-tone: var(--k-pcr-soft); }

/* #1279 — Progress gave four cards equal weight in four different hues, so
   nothing led the eye. My Spark is the primary destination there, so it keeps
   full intensity and its siblings step back. Hue still distinguishes them; only
   the strength changes, which is what the token system is for. Learn reads as
   more cohesive for the same reason: one card leads and the rest support. */
.student-community-screen .student-community__card--quiet {
  --card-body-fill: 9%;
  --card-border-strength: 16%;
  --card-icon-fill: 8%;
  --card-glow-strength: 0%;
}

.student-community-screen .student-community__card--explore .student-community__mark {
  border-radius: 999px;
}

.student-community-screen .student-community__card--explore .student-community__chevron {
  color: var(--section-family);
}

.student-community-screen .student-community__mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* #1101 — deep, low-saturation container; the bright glyph carries the hue.
     #1103 — soft coloured halo bleeding out from the container into the body. */
  background: color-mix(in srgb, var(--card-tone) var(--card-icon-fill), var(--bg-base-bottom));
  box-shadow: 0 0 16px color-mix(in srgb, var(--card-tone) var(--card-glow-strength), transparent);
  color: var(--card-tone);
}

.student-community-screen .student-community__mark .blc-svg-icon {
  width: 22px;
  height: 22px;
}

.student-community-screen .student-community__body {
  flex: 1;
  min-width: 0;
}

.student-community-screen .student-community__topline {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.student-community-screen .student-community__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--blc-font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.student-community-screen .student-community__badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--badge-color) 40%, transparent);
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  color: var(--badge-color);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
}

.student-community-screen .student-community__badge[data-tone="owner"],
.student-community-screen .student-community__badge[data-tone="invited"] {
  --badge-color: var(--accent-gold);
}

.student-community-screen .student-community__badge[data-tone="explore"] {
  --badge-color: var(--section-family);
}

.student-community-screen .student-community__badge[data-tone="admin"] {
  --badge-color: var(--accent-cyan);
}

.student-community-screen .student-community__badge[data-tone="member"] {
  --badge-color: var(--blc-color-blue-soft);
}

.student-community-screen .student-community__desc {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.student-community-screen .student-community__meta {
  margin-top: 5px;
  color: var(--nav-label);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

.student-community-screen .student-community__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--blc-color-white) 30%, transparent);
}

.student-community-screen #communitiesList .student-community__card:not(.is-invited) .student-community__chevron {
  color: var(--section-family);
}

.student-community-screen .student-community__accept {
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 32%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  color: var(--accent-cyan);
  font-size: 11px;
}

.student-community-screen .student-community__empty,
.student-community-screen .student-community__loading {
  text-align: center;
  color: var(--nav-label);
}

.student-community-screen .student-community__loading {
  padding-top: 40px;
}

.student-community-screen .student-community__empty {
  padding: 36px 18px;
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
}

.student-community-screen .student-community__empty-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
}

.student-community-screen .student-community__empty-icon .blc-svg-icon {
  width: 34px;
  height: 34px;
}

.student-community-screen .student-community__empty-title {
  margin: 10px 0 4px;
  font-family: var(--blc-font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
}

.student-community-screen .student-community__empty-body {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 12px;
}

.student-community-screen .student-community__empty-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.student-community-screen .student-community__utility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.student-community-screen .student-community__utility {
  appearance: none;
  width: 100%;
  text-align: left;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--utility-color) 18%, transparent);
  background: color-mix(in srgb, var(--utility-color) 6%, transparent);
  color: var(--utility-color);
  cursor: pointer;
}

.student-community-screen .student-community__utility[data-tone="calendar"] {
  --utility-color: var(--accent-cyan);
}

.student-community-screen .student-community__utility[data-tone="points"] {
  --utility-color: var(--accent-gold);
}

.student-community-screen .student-community__utility-title {
  margin-top: 8px;
  font-family: var(--blc-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.student-community-screen .student-community__utility-meta {
  margin-top: 2px;
  color: var(--nav-label);
  font-size: 8.5px;
  font-weight: 700;
}

/* ── Student community detail (#879) ─────────────────────────────────── */
#screen-community-detail .student-cdetail__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-stroke);
  background: var(--panel-bottom);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#screen-community-detail .student-cdetail__back {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--nav-label);
  cursor: pointer;
}

#screen-community-detail .student-cdetail__titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

#screen-community-detail .student-cdetail__title-icon {
  display: inline-flex;
  color: var(--blc-color-green);
}

#screen-community-detail .student-cdetail__title-icon .blc-svg-icon {
  width: 16px;
  height: 16px;
}

#screen-community-detail .student-cdetail__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--blc-font-display);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

#screen-community-detail .student-cdetail__main {
  max-width: 520px;
  min-width: 0;
  margin: 0 auto;
  padding: 84px 18px 120px;
  overflow-x: hidden;
  font-family: var(--blc-font-body);
  color: var(--text-primary);
}

#screen-community-detail .student-cdetail__loading {
  padding-top: 40px;
  text-align: center;
  color: var(--nav-label);
}

#screen-community-detail .student-cdetail__error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 700;
}

#screen-community-detail .student-cdetail__grow {
  flex: 1;
  min-width: 0;
}

#screen-community-detail .student-cdetail__info {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--blc-color-green) 25%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blc-color-green) 12%, transparent), transparent);
}

#screen-community-detail .student-cdetail__info-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__info-mark {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blc-color-green), var(--accent-cyan));
  color: var(--bg-base-bottom);
}

#screen-community-detail .student-cdetail__info-mark .blc-svg-icon {
  width: 26px;
  height: 26px;
}

#screen-community-detail .student-cdetail__info-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__info-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--blc-font-display);
  font-size: 18px;
  font-weight: 800;
}

#screen-community-detail .student-cdetail__info-desc {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

#screen-community-detail .student-cdetail__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#screen-community-detail .student-cdetail__chip {
  --chip-color: var(--blc-color-blue-soft);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--chip-color) 40%, transparent);
  background: color-mix(in srgb, var(--chip-color) 12%, transparent);
  color: var(--chip-color);
  font-family: var(--blc-font-label);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

#screen-community-detail .student-cdetail__chip[data-tone="gold"] { --chip-color: var(--accent-gold); }
#screen-community-detail .student-cdetail__chip[data-tone="cyan"] { --chip-color: var(--blc-color-cyan); }
#screen-community-detail .student-cdetail__chip[data-tone="green"] { --chip-color: var(--blc-color-green); }
#screen-community-detail .student-cdetail__chip[data-tone="purple"] { --chip-color: var(--blc-color-purple); }
#screen-community-detail .student-cdetail__chip[data-tone="danger"] { --chip-color: var(--color-danger); }
#screen-community-detail .student-cdetail__chip[data-tone="neutral"] { --chip-color: var(--blc-color-text-muted-solid); }

#screen-community-detail .student-cdetail__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
}

#screen-community-detail .student-cdetail__section-label {
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nav-label);
}

#screen-community-detail .student-cdetail__text-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blc-color-green);
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

#screen-community-detail .student-cdetail__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__section {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  box-sizing: border-box;
}

#screen-community-detail .student-cdetail__card {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
}

#screen-community-detail .student-cdetail__form-head {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__form-tile {
  --tile-color: var(--blc-color-blue-soft);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--tile-color) 32%, transparent);
  background: color-mix(in srgb, var(--tile-color) 15%, transparent);
  color: var(--tile-color);
  font-family: var(--blc-font-label);
  font-size: 13px;
  font-weight: 700;
}

#screen-community-detail .student-cdetail__form-tile[data-tone="pink"] { --tile-color: var(--blc-color-pink-soft); }
#screen-community-detail .student-cdetail__form-tile[data-tone="blue"] { --tile-color: var(--blc-color-blue-soft); }
#screen-community-detail .student-cdetail__form-tile[data-tone="purple"] { --tile-color: var(--blc-color-purple); }
#screen-community-detail .student-cdetail__form-tile[data-tone="gold"] { --tile-color: var(--accent-gold); }

#screen-community-detail .student-cdetail__form-title {
  font-family: var(--blc-font-display);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-community-detail .student-cdetail__form-desc {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

#screen-community-detail .student-cdetail__form-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

#screen-community-detail .student-cdetail__form-action {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: var(--text-muted);
  font-family: var(--blc-font-body);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

#screen-community-detail .student-cdetail__form-action[data-tone="open"] {
  border-color: color-mix(in srgb, var(--blc-color-green) 25%, transparent);
  background: color-mix(in srgb, var(--blc-color-green) 8%, transparent);
  color: var(--blc-color-green);
}

#screen-community-detail .student-cdetail__form-action[data-tone="dashboard"] {
  border-color: color-mix(in srgb, var(--accent-gold) 25%, transparent);
  background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
  color: var(--accent-gold);
}

#screen-community-detail .student-cdetail__button {
  --btn-color: var(--blc-color-blue-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--btn-color) 28%, transparent);
  background: color-mix(in srgb, var(--btn-color) 10%, transparent);
  color: var(--btn-color);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

#screen-community-detail .student-cdetail__button[data-tone="cyan"] { --btn-color: var(--blc-color-cyan); }
#screen-community-detail .student-cdetail__button[data-tone="gold"] { --btn-color: var(--accent-gold); }
#screen-community-detail .student-cdetail__button[data-tone="blue"] { --btn-color: var(--blc-color-blue-soft); }
#screen-community-detail .student-cdetail__button[data-tone="green"] { --btn-color: var(--blc-color-green); }
#screen-community-detail .student-cdetail__button[data-tone="danger"] { --btn-color: var(--color-danger); }

#screen-community-detail .student-cdetail__button[data-tone="neutral"] {
  border-color: var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--text-muted);
}

#screen-community-detail .student-cdetail__button--small {
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 10px;
}

#screen-community-detail .student-cdetail__button--big {
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 12px;
}

#screen-community-detail .student-cdetail__button--block {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-size: 13px;
}

#screen-community-detail .student-cdetail__button:disabled {
  opacity: .45;
  cursor: default;
}

#screen-community-detail .student-cdetail__panel {
  margin: 16px 0;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  box-sizing: border-box;
}

#screen-community-detail .student-cdetail__panel-label {
  margin-bottom: 10px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nav-label);
}

#screen-community-detail .student-cdetail__row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
  min-width: 0;
}

#screen-community-detail .student-cdetail__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blc-color-green), var(--accent-cyan));
  color: var(--blc-color-white);
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 700;
}

#screen-community-detail .student-cdetail__avatar[data-tone="owner"] {
  background: linear-gradient(135deg, var(--blc-color-purple), var(--blc-color-blue));
}

#screen-community-detail .student-cdetail__member-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-community-detail .student-cdetail__member-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

#screen-community-detail .student-cdetail__member-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

#screen-community-detail .student-cdetail__member-note {
  flex-shrink: 1;
  max-width: 130px;
  text-align: right;
  font-size: 9px;
  line-height: 1.35;
  color: var(--nav-label);
}

#screen-community-detail .student-cdetail__toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 6%, transparent);
}

#screen-community-detail .student-cdetail__toggle-button {
  --toggle-color: var(--blc-color-cyan);
  flex: 1;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--nav-label);
  font-family: var(--blc-font-display);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

#screen-community-detail .student-cdetail__toggle-button[data-tone="danger"] {
  --toggle-color: var(--color-danger);
}

#screen-community-detail .student-cdetail__toggle-button.is-active {
  border-color: color-mix(in srgb, var(--toggle-color) 40%, transparent);
  background: color-mix(in srgb, var(--toggle-color) 16%, transparent);
  color: var(--toggle-color);
}

#screen-community-detail .student-cdetail__mode-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__mode-title {
  font-family: var(--blc-font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#screen-community-detail .student-cdetail__mode-sub {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

#screen-community-detail .student-cdetail__muted {
  font-size: 12px;
  color: var(--nav-label);
}

#screen-community-detail .student-cdetail__field-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  color: color-mix(in srgb, var(--text-primary) 82%, transparent);
}

#screen-community-detail .student-cdetail__req {
  color: var(--accent-gold);
}

#screen-community-detail .student-cdetail__field-card {
  margin-bottom: 10px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
}

#screen-community-detail .student-cdetail__field-type {
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--blc-color-blue-soft);
}

#screen-community-detail .student-cdetail__options {
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 7%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
}

#screen-community-detail .student-cdetail__option-pill {
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blc-color-cyan) 22%, transparent);
  background: color-mix(in srgb, var(--blc-color-cyan) 8%, transparent);
  color: var(--blc-color-cyan);
  font-size: 11px;
  font-weight: 800;
}

#screen-community-detail .student-cdetail__check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text-primary) 82%, transparent);
}

#screen-community-detail .student-cdetail__check-row input[type="checkbox"],
#screen-community-detail .student-cdetail__choice input[type="checkbox"] {
  accent-color: var(--blc-color-cyan);
}

#screen-community-detail .student-cdetail__choice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  font-size: 12px;
  color: var(--text-primary);
}

#screen-community-detail .student-cdetail__kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--blc-color-white) 5%, transparent);
}

#screen-community-detail .student-cdetail__kv-key {
  font-size: 11px;
  color: var(--text-muted);
}

#screen-community-detail .student-cdetail__kv-value {
  font-size: 12px;
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}

#screen-community-detail .student-cdetail__stamp {
  margin-bottom: 8px;
  font-family: var(--blc-font-label);
  font-size: 10px;
  font-weight: 800;
  color: var(--nav-label);
}

#screen-community-detail .student-cdetail__table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

#screen-community-detail .student-cdetail__composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  box-sizing: border-box;
}

#screen-community-detail .student-cdetail__composer textarea.s-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #1d1d24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}

#screen-community-detail .student-cdetail__composer textarea.s-input:focus {
  border-color: color-mix(in srgb, var(--blc-color-blue-soft) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blc-color-blue-soft) 18%, transparent);
}

#screen-community-detail .student-cdetail__composer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

#screen-community-detail .student-cdetail__post {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  box-sizing: border-box;
  min-width: 0;
}

#screen-community-detail .student-cdetail__post-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__post-author {
  font-family: var(--blc-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-community-detail .student-cdetail__post-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

#screen-community-detail .student-cdetail__post-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

#screen-community-detail .student-cdetail__post-body {
  font-family: var(--blc-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text-primary) 90%, transparent);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#screen-community-detail .student-cdetail__delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}

#screen-community-detail .student-cdetail__delete-btn:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

/* ── Local Dances directory (#967) ─────────────────────────────────────── */
.dance-form__edit-note {
  margin: 0 0 17px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dance-form__location-row {
  display: flex;
  align-items: stretch;
  gap: 9px;
}

.dance-form__location-row .s-input {
  min-width: 0;
  flex: 1;
}

.dance-form__location-row button {
  min-width: 86px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 42%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent-cyan) 10%, var(--bg-surface));
  color: var(--accent-cyan);
  font: 800 12px var(--blc-font-display);
  cursor: pointer;
}

.dance-form__location-row button:disabled {
  opacity: .55;
  cursor: wait;
}

.dance-form__location-status {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.dance-form__location-status.is-resolved { color: #7ee0b8; }
.dance-form__location-status.is-error { color: #fca5a5; }

.dance-location-chooser {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
}

.dance-location-chooser__sheet {
  width: min(480px, 100%);
  max-height: min(720px, 88dvh);
  overflow-y: auto;
  padding: 22px;
  box-sizing: border-box;
  border: 1px solid var(--panel-stroke);
  border-radius: 22px;
  background: var(--bg-surface);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.dance-location-chooser__eyebrow {
  color: var(--accent-cyan);
  font: 800 9px var(--blc-font-label);
  letter-spacing: .13em;
}

.dance-location-chooser__sheet h2 {
  margin: 7px 0 8px;
  color: var(--text-primary);
  font: 800 25px var(--blc-font-display);
}

.dance-location-chooser__sheet > p {
  margin: 0 0 17px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.dance-location-chooser__options {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dance-location-chooser__options button {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--panel-stroke);
  border-radius: 13px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: var(--accent-cyan);
  text-align: left;
  cursor: pointer;
}

.dance-location-chooser__options button:hover,
.dance-location-chooser__options button:focus-visible {
  border-color: color-mix(in srgb, var(--accent-cyan) 58%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 10%, transparent);
  outline: 0;
}

.dance-location-chooser__options strong,
.dance-location-chooser__options small {
  display: block;
}

.dance-location-chooser__options strong {
  color: var(--text-primary);
  font: 750 13px var(--blc-font-display);
}

.dance-location-chooser__options small {
  margin-top: 3px;
  color: var(--text-muted);
  font: 600 10px var(--blc-font-label);
}

.dance-location-chooser__cancel {
  width: 100%;
  margin-top: 13px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 750 12px var(--blc-font-display);
  cursor: pointer;
}

.auth-location-field {
  margin-bottom: 14px;
}

.auth-location-field__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.auth-location-field__heading label {
  color: rgba(168, 160, 192, .8);
  font: 700 11px var(--blc-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.auth-location-field__heading label span {
  color: var(--text-muted);
  font-size: 9px;
}

.auth-location-field__heading button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 700 11px var(--blc-font-body);
  cursor: pointer;
}

.auth-location-field__controls,
.user-location-prompt__controls {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.auth-location-field__controls .s-input,
.user-location-prompt__controls .s-input {
  width: 100%;
  min-width: 0;
  flex: 1;
}

.user-location__resolve {
  min-width: 84px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 42%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-cyan) 10%, var(--bg-surface));
  color: var(--accent-cyan);
  font: 800 12px var(--blc-font-display);
  cursor: pointer;
}

.user-location__resolve:disabled {
  opacity: .55;
  cursor: wait;
}

.user-location__status {
  min-height: 30px;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.4;
}

.user-location__status.is-resolved { color: #7ee0b8; }
.user-location__status.is-error { color: #fca5a5; }

.user-location-prompt {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 18px;
  box-sizing: border-box;
  pointer-events: none;
}

.user-location-prompt.is-visible {
  display: flex;
}

.user-location-prompt__sheet {
  position: relative;
  width: min(390px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 22px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, var(--panel-stroke));
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .56), 0 0 32px rgba(0, 218, 243, .08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.user-location-prompt__close {
  position: absolute;
  top: 13px;
  right: 13px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--panel-stroke);
  border-radius: 50%;
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--text-muted);
  cursor: pointer;
}

.user-location-prompt__close .material-symbols-outlined {
  font-size: 18px;
}

.user-location-prompt__eyebrow {
  color: var(--accent-cyan);
  font: 800 9px var(--blc-font-label);
  letter-spacing: .13em;
}

.user-location-prompt__sheet h2 {
  margin: 7px 40px 8px 0;
  color: var(--text-primary);
  font: 800 24px var(--blc-font-display);
}

.user-location-prompt__sheet > p {
  margin: 0 0 17px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.user-location-prompt__confirm,
.user-location-prompt__skip {
  width: 100%;
  min-height: 46px;
  border-radius: 12px;
  font: 800 13px var(--blc-font-display);
  cursor: pointer;
}

.user-location-prompt__confirm {
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 52%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 16%, var(--bg-surface));
  color: var(--accent-cyan);
}

.user-location-prompt__confirm[hidden] {
  display: none;
}

.user-location-prompt__skip {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
}

@media (max-width: 520px) {
  .user-location-prompt {
    justify-content: center;
    padding: 12px;
  }

  .user-location-prompt__sheet {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 20px;
  }
}

@media (max-width: 340px) {
  .auth-location-field__controls,
  .user-location-prompt__controls {
    flex-direction: column;
  }

  .user-location__resolve {
    min-height: 44px;
  }
}

.dance-form__remove {
  border: 1px solid rgba(255, 107, 157, .38);
  border-radius: 12px;
  background: rgba(255, 107, 157, .08);
  color: #ff9fbd;
  font: 800 11px var(--blc-font-display);
  padding: 0 10px;
  cursor: pointer;
}

#screen-local-dances {
  min-height: 100vh;
  background: radial-gradient(circle at 50% -8%, rgba(0, 218, 243, .12), transparent 31%), var(--bg-base-bottom);
  color: var(--text-primary);
}

#screen-local-dances .local-dances__header {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  z-index: 200;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  width: min(100%, 760px);
  box-sizing: border-box;
  height: 62px;
  padding: 0 14px;
  border-bottom: 1px solid var(--panel-stroke);
  background: color-mix(in srgb, var(--bg-base-bottom) 90%, transparent);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

#screen-local-dances .local-dances__title,
#screen-local-dances .local-dances__subline,
#screen-local-dances .local-dance-list__day-head,
#screen-local-dances .local-dances__map-head > div > span,
#screen-local-dances .local-dances__intro > div > span,
#screen-local-dances .local-dances__field > span {
  font-family: var(--blc-font-label);
  text-transform: uppercase;
  letter-spacing: .12em;
}

#screen-local-dances .local-dances__title {
  justify-self: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
}

#screen-local-dances .local-dances__icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--panel-stroke);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  color: var(--text-primary);
  cursor: pointer;
}

#screen-local-dances .local-dances__icon-button .material-symbols-outlined {
  font-size: 19px;
}

#screen-local-dances .local-dances__main {
  width: min(760px, 100%);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 82px 16px 126px;
}

#screen-local-dances .local-dances__tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 24px;
  padding: 4px;
  border: 1px solid var(--panel-stroke);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
}

#screen-local-dances .local-dances__tabs button {
  flex: 1;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  font: 800 11px var(--blc-font-display);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

#screen-local-dances .local-dances__tabs button[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  color: var(--accent-cyan);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-cyan) 24%, transparent);
}

#screen-local-dances .local-dances__panel { display: none; }
#screen-local-dances .local-dances__panel.is-active { display: block; }

#screen-local-dances .local-dances__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

#screen-local-dances .local-dances__intro > div {
  min-width: 0;
}

#screen-local-dances .local-dances__intro-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

#screen-local-dances .local-dances__intro > div > span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent-cyan);
  font-size: 9px;
  font-weight: 800;
}

#screen-local-dances .local-dances__intro h1 {
  margin: 0;
  color: var(--text-primary);
  font: 850 clamp(28px, 7vw, 38px)/1 var(--blc-font-display);
  letter-spacing: -.035em;
}

#screen-local-dances .local-dances__intro p {
  max-width: 470px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

#screen-local-dances .local-dances__secondary-action {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-gold) 9%, transparent);
  color: var(--accent-gold);
  font: 800 11px var(--blc-font-display);
  cursor: pointer;
}

#screen-local-dances .local-dances__subline {
  margin: 0 2px 18px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .07em;
}

#screen-local-dances .local-dances__subline strong { color: var(--text-primary); font-weight: 800; }
#screen-local-dances .local-dances__subline span { color: var(--accent-gold); margin: 0 5px; }

#screen-local-dances .local-dances__search-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, .8fr) auto;
  align-items: end;
  gap: 10px;
  margin: 4px 0 12px;
  padding: 14px;
  border: 1px solid var(--panel-stroke);
  border-radius: 16px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
}

#screen-local-dances .local-dances__field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

#screen-local-dances .local-dances__field > span {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
}

#screen-local-dances .local-dances__field .s-input {
  width: 100%;
}

#screen-local-dances .local-dances__search-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-gold);
  color: #211807;
  font: 850 12px var(--blc-font-display);
  cursor: pointer;
}

#screen-local-dances .local-dances__search-button:disabled {
  cursor: wait;
  opacity: .65;
}

#screen-local-dances .local-dances__search-button .material-symbols-outlined {
  font-size: 18px;
}

#screen-local-dances .local-dances__search-status {
  min-height: 19px;
  margin: 0 2px 12px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

#screen-local-dances .local-dances__publish-missing {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding: 13px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent-gold) 34%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
  color: var(--accent-gold);
  text-align: left;
  cursor: pointer;
}

#screen-local-dances .local-dances__publish-missing strong,
#screen-local-dances .local-dances__publish-missing small {
  display: block;
}

#screen-local-dances .local-dances__publish-missing strong {
  font: 800 12px var(--blc-font-display);
}

#screen-local-dances .local-dances__publish-missing small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}

#screen-local-dances .local-dance-list__actions {
  box-sizing: border-box;
  padding-right: 44px;
}

.local-dance-list { display: flex; flex-direction: column; gap: 24px; }
.local-dance-list__day { display: flex; flex-direction: column; gap: 9px; }
.local-dance-list__day-head { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 10px; font-weight: 800; }
.local-dance-list__day-head i { height: 1px; flex: 1; background: linear-gradient(90deg, var(--panel-stroke), transparent); }
.local-dance-list__day-time, .local-dance-list__time { font: 800 10px var(--blc-font-label); letter-spacing: .06em; white-space: nowrap; }
.local-dance-list__card { border: 1px solid var(--card-stroke); border-left: 3px solid var(--dance-accent); border-radius: 14px; padding: 14px; background: color-mix(in srgb, var(--blc-color-white) 4%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,.1); }
.local-dance-list__topline, .local-dance-list__footer, .local-dance-list__name-wrap, .local-dance-list__actions, .local-dance-list__credit { display: flex; align-items: center; }
.local-dance-list__topline { justify-content: space-between; gap: 12px; }
.local-dance-list__name-wrap { min-width: 0; gap: 7px; }
.local-dance-list__name-wrap h3 { overflow: hidden; margin: 0; color: var(--text-primary); font: 600 16px var(--blc-font-body); text-overflow: ellipsis; white-space: nowrap; }
.local-dance-list__style { display: inline-flex; width: fit-content; flex: 0 0 auto; padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--accent-cyan) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent-cyan) 9%, transparent); color: var(--accent-cyan); font: 800 8px var(--blc-font-label); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.local-dance-list__yours { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent-gold) 12%, transparent); color: var(--accent-gold); font: 800 8px var(--blc-font-label); text-transform: uppercase; letter-spacing: .07em; }
.local-dance-list__edit { width: 29px; height: 29px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--accent-gold) 10%, transparent); color: var(--accent-gold); cursor: pointer; }
.local-dance-list__edit .material-symbols-outlined { font-size: 15px; }
.local-dance-list__venue { margin-top: 9px; color: var(--text-primary); font-size: 12px; font-weight: 800; }
.local-dance-list__address, .local-dance-list__description { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.local-dance-list__address { margin-top: 2px; }
.local-dance-list__description { margin: 8px 0 0; }
.local-dance-list__footer { justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--panel-stroke); }
.local-dance-list__credit { min-width: 0; gap: 6px; color: var(--text-muted); font-size: 10px; font-weight: 700; }
.local-dance-list__avatar { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--dance-accent) 17%, var(--bg-base-bottom)); color: var(--dance-accent); font: 800 9px var(--blc-font-display); }
.local-dance-list__actions { justify-content: flex-end; gap: 6px; }
.local-dance-list__share { display: inline-flex; width: 25px; height: 25px; align-items: center; justify-content: center; border: 1px solid var(--panel-stroke); border-radius: 999px; background: transparent; color: var(--text-muted); cursor: pointer; }
.local-dance-list__share .material-symbols-outlined { font-size: 14px; }
.local-dance-list__cover, .local-dance-list__book { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; border-radius: 999px; font: 800 9px var(--blc-font-label); letter-spacing: .04em; white-space: nowrap; }
.local-dance-list__cover { padding: 0 7px; border: 1px solid color-mix(in srgb, var(--accent-gold) 35%, transparent); background: color-mix(in srgb, var(--accent-gold) 11%, transparent); color: var(--accent-gold); }
.local-dance-list__cover--free { border-color: color-mix(in srgb, var(--blc-color-green) 38%, transparent); background: color-mix(in srgb, var(--blc-color-green) 11%, transparent); color: var(--blc-color-green); }
.local-dance-list__book { padding: 0 9px; border: 1px solid color-mix(in srgb, var(--accent-cyan) 35%, transparent); background: color-mix(in srgb, var(--accent-cyan) 10%, transparent); color: var(--accent-cyan); cursor: pointer; }
.local-dance-list__book { text-decoration: none; }
.local-dance-list__empty { padding: 28px 16px; border: 1px dashed var(--panel-stroke); border-radius: 14px; color: var(--text-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.local-dance-list__empty strong { display: block; margin-bottom: 5px; color: var(--text-primary); font: 800 16px var(--blc-font-display); }
.local-dance-list__empty button { min-height: 38px; margin-top: 14px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--accent-cyan) 34%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--accent-cyan) 9%, transparent); color: var(--accent-cyan); font: 800 11px var(--blc-font-display); cursor: pointer; }
.local-dance-list__week-action { display: inline-flex; min-height: 30px; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border-radius: 9px; font: 800 9px var(--blc-font-label); letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.local-dance-list__week-action .material-symbols-outlined { font-size: 14px; }
.local-dance-list__week-action--add { border: 1px solid color-mix(in srgb, var(--accent-cyan) 38%, transparent); background: color-mix(in srgb, var(--accent-cyan) 11%, transparent); color: var(--accent-cyan); }
.local-dance-list__week-action--added { border: 1px solid color-mix(in srgb, var(--blc-color-green) 32%, transparent); background: color-mix(in srgb, var(--blc-color-green) 9%, transparent); color: var(--blc-color-green); cursor: default; }
.local-dance-list__week-action--remove { border: 1px solid rgba(255,107,157,.34); background: rgba(255,107,157,.08); color: #ff9fbd; }
.local-dance-list__week-action:disabled { opacity: .72; }

#screen-public-dances { position: fixed; inset: 0; overflow-y: auto; background: radial-gradient(circle at 50% -12%, rgba(85, 136, 255, .2), transparent 32%), #101014; color: var(--text-primary); font-family: var(--blc-font-body); }
.public-dances__brandbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 390px; box-sizing: border-box; margin: 0 auto; padding: 17px 16px; border-bottom: 1px solid var(--panel-stroke); background: rgba(16, 16, 20, .86); backdrop-filter: blur(18px); }
.public-dances__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-primary); font: 800 10px var(--blc-font-label); letter-spacing: .14em; text-decoration: none; }
.public-dances__brand img { width: 25px; height: 25px; border-radius: 8px; }.public-dances__brandbar > .material-symbols-outlined { color: var(--accent-gold); font-size: 20px; }
.public-dances__main { width: min(390px, 100%); box-sizing: border-box; margin: 0 auto; padding: 42px 16px 44px; }.public-dances__hero { margin-bottom: 30px; }.public-dances__kicker, .public-dances__map-head > div > span, .public-dances__cta-kicker { color: var(--accent-gold); font: 800 9px var(--blc-font-label); letter-spacing: .13em; }.public-dances__hero h1, .public-dances__cta h2 { margin: 10px 0; font: 800 34px/1.04 var(--blc-font-display); letter-spacing: -.035em; }.public-dances__hero h1 em, .public-dances__cta h2 em { font-family: 'Instrument Serif', serif; font-weight: 400; }.public-dances__hero p, .public-dances__cta p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.public-dances__map { margin-top: 31px; padding-top: 20px; border-top: 1px solid var(--panel-stroke); }.public-dances__map-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; }.public-dances__map-head h2 { margin: 5px 0 0; font: 800 17px var(--blc-font-display); }.public-dances__map-head > span { color: var(--accent-cyan); font-size: 10px; font-weight: 800; }.public-dances__map-placeholder { display: flex; min-height: 156px; margin-top: 12px; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed color-mix(in srgb, var(--accent-cyan) 32%, transparent); border-radius: 16px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-cyan) 5%, transparent) 0 2px, transparent 2px 12px); color: var(--accent-cyan); text-align: center; }.public-dances__map-placeholder .material-symbols-outlined { font-size: 31px; }.public-dances__map-placeholder p { margin: 7px 0 2px; color: var(--text-primary); font: 800 13px var(--blc-font-display); }.public-dances__map-placeholder small { color: var(--text-muted); font-size: 10px; }.public-dances__legend { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 0; color: var(--text-muted); font-size: 9px; }.public-dances__legend span { display: inline-flex; align-items: center; gap: 5px; }.public-dances__legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-cyan); }
.public-dances__cta { margin-top: 34px; padding: 23px; border: 1px solid rgba(178, 197, 255, .25); border-radius: 18px; background: linear-gradient(135deg, rgba(85, 136, 255, .45), rgba(170, 102, 238, .42)); box-shadow: 0 16px 36px rgba(0, 0, 0, .2); }.public-dances__cta-kicker { color: rgba(255, 255, 255, .68); }.public-dances__cta h2 { margin-top: 8px; font-size: 27px; }.public-dances__cta p { color: rgba(255, 255, 255, .75); }.public-dances__cta > div:last-child { display: flex; gap: 9px; margin-top: 19px; }.public-dances__cta a { flex: 1; padding: 11px 8px; border-radius: 10px; color: var(--accent-gold); font-size: 11px; font-weight: 800; text-align: center; text-decoration: none; }.public-dances__cta a:first-child { background: var(--accent-gold); color: #201a09; }.public-dances__cta a:last-child { border: 1px solid rgba(255, 255, 255, .38); color: #fff; }.public-dances__footer { padding: 0 0 28px; color: var(--text-muted); font: 800 9px var(--blc-font-label); letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.public-dance-link-placeholder { padding: 23px; border: 1px solid rgba(0, 218, 243, .26); border-radius: 18px; background: rgba(0, 218, 243, .05); }.public-dance-link-placeholder h2 { margin: 10px 0; font: 800 25px/1.08 var(--blc-font-display); }.public-dance-link-placeholder h2 em { font-family: 'Instrument Serif', serif; font-weight: 400; }.public-dance-link-placeholder p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }.public-dance-link-placeholder a { display: inline-block; margin-top: 18px; color: #201a09; background: var(--accent-gold); border-radius: 10px; padding: 10px 13px; font-size: 11px; font-weight: 800; text-decoration: none; }

/* Shared dance adopt screen (#975) */
#screen-dance-adopt { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 50% -15%, rgba(0,218,243,.16), transparent 36%), #101014; color: var(--text-primary); font-family: var(--blc-font-body); }
.dance-adopt__header { display:flex; align-items:center; justify-content:space-between; width:min(430px,100%); box-sizing:border-box; margin:0 auto; padding:18px 18px 14px; color:var(--accent-gold); font:800 10px var(--blc-font-label); letter-spacing:.15em; }.dance-adopt__header button { display:grid; width:33px; height:33px; place-items:center; border:1px solid var(--panel-stroke); border-radius:50%; background:transparent; color:var(--text-primary); cursor:pointer; }.dance-adopt__header .material-symbols-outlined { font-size:18px; }
.dance-adopt__main { width:min(430px,100%); box-sizing:border-box; flex:1; overflow-y:auto; margin:0 auto; padding:6px 18px 14px; }.dance-adopt__sharer { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:11px; border:1px solid rgba(0,218,243,.23); border-radius:13px; background:rgba(0,218,243,.07); }.dance-adopt__avatar { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--accent-cyan); color:#102026; font:900 13px var(--blc-font-display); }.dance-adopt__sharer p { margin:0; font-size:11px; line-height:1.45; }.dance-adopt__sharer strong,.dance-adopt__sharer span { display:block; }.dance-adopt__sharer span { color:var(--text-muted); }
.dance-adopt__card { padding:17px; border:1px solid var(--card-stroke); border-radius:18px; background:rgba(255,255,255,.045); box-shadow:0 16px 36px rgba(0,0,0,.2); }.dance-adopt__top { display:flex; align-items:flex-start; gap:12px; }.dance-adopt__day { display:grid; width:48px; height:48px; flex:0 0 auto; place-items:center; border-radius:13px; background:var(--accent-gold); color:#29200a; font:900 12px var(--blc-font-label); }.dance-adopt__top h1 { margin:2px 0 5px; font:800 23px/1.05 var(--blc-font-display); }.dance-adopt__top p { margin:0; color:var(--text-muted); font-size:11px; }.dance-adopt__venue { display:flex; flex-direction:column; gap:4px; margin-top:19px; padding-top:15px; border-top:1px solid var(--panel-stroke); font-size:12px; }.dance-adopt__venue span { display:flex; align-items:center; gap:4px; color:var(--text-muted); font-size:11px; }.dance-adopt__venue .material-symbols-outlined { color:var(--accent-cyan); font-size:14px; }.dance-adopt__map,.blc-share-sheet__dance-map { margin-top:15px; overflow:hidden; border:1px solid rgba(0,218,243,.26); border-radius:14px; background:#0e1719; }.local-dance-map__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:38px; padding:0 11px; color:#bceff5; font:800 9px var(--blc-font-label); letter-spacing:.09em; text-transform:uppercase; }.local-dance-map__heading > span { display:inline-flex; align-items:center; gap:4px; }.local-dance-map__heading .material-symbols-outlined { color:var(--accent-cyan); font-size:15px; }.local-dance-map__heading a { color:var(--accent-gold); font:800 9px var(--blc-font-label); letter-spacing:.04em; text-decoration:none; text-transform:none; }.local-dance-map__frame { display:block; width:100%; height:190px; border:0; background:#192226; }.blc-share-sheet__dance-map .local-dance-map__frame { height:160px; }.dance-adopt__description { margin:13px 0 0; color:var(--text-muted); font-size:12px; line-height:1.55; }.dance-adopt__card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; padding-top:12px; border-top:1px solid var(--panel-stroke); color:var(--text-muted); font-size:10px; }.dance-adopt__card footer b { flex:0 0 auto; color:var(--accent-gold); font:800 11px var(--blc-font-label); }
.dance-adopt__dedupe { display:flex; width:min(394px,calc(100% - 36px)); box-sizing:border-box; gap:8px; margin:0 auto; padding:11px 12px; border:1px solid rgba(0,218,243,.28); border-radius:12px; background:rgba(0,218,243,.09); color:#bceff5; }.dance-adopt__dedupe .material-symbols-outlined { color:var(--accent-cyan); font-size:17px; }.dance-adopt__dedupe p { margin:0; font-size:10px; line-height:1.42; }.dance-adopt__actions { display:flex; width:min(430px,100%); box-sizing:border-box; gap:9px; margin:0 auto; padding:12px 18px calc(16px + env(safe-area-inset-bottom)); }.dance-adopt__actions button,.dance-adopt__actions a { display:flex; min-height:45px; flex:1; align-items:center; justify-content:center; border-radius:12px; font:800 11px var(--blc-font-label); text-decoration:none; cursor:pointer; }.dance-adopt__primary { border:1px solid var(--accent-gold); background:var(--accent-gold); color:#241b09; }.dance-adopt__primary:disabled { opacity:.68; cursor:default; }.dance-adopt__actions a { border:1px solid var(--panel-stroke); background:transparent; color:var(--text-primary); }.dance-adopt__loading,.dance-adopt__error { width:min(394px,calc(100% - 36px)); margin:80px auto; color:var(--text-muted); text-align:center; }.dance-adopt__error { padding:22px; border:1px solid var(--panel-stroke); border-radius:16px; }.dance-adopt__error h1 { color:var(--text-primary); font:800 25px var(--blc-font-display); }.dance-adopt__error p { line-height:1.5; }.dance-adopt__error a { color:#241b09; background:var(--accent-gold); border-radius:10px; padding:10px 13px; font-size:11px; font-weight:800; text-decoration:none; }

/* Shared weekly dance list (/dances/share/:token) */
.dance-list-share__header { display:flex; width:min(760px,100%); box-sizing:border-box; align-items:center; justify-content:space-between; margin:0 auto; padding:16px 18px 13px; border-bottom:1px solid var(--panel-stroke); color:var(--accent-gold); font:800 10px var(--blc-font-label); letter-spacing:.14em; }
.dance-list-share__header a { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--panel-stroke); border-radius:11px; color:var(--text-primary); text-decoration:none; }
.dance-list-share__header .material-symbols-outlined { font-size:18px; }
.dance-list-share__main { width:min(760px,100%); min-height:0; box-sizing:border-box; flex:1; overflow-y:auto; margin:0 auto; padding:28px 18px 30px; }
.dance-list-share__hero { margin-bottom:24px; }
.dance-list-share__kicker { color:var(--accent-cyan); font:800 9px var(--blc-font-label); letter-spacing:.14em; text-transform:uppercase; }
.dance-list-share__hero h1 { margin:8px 0 10px; color:var(--text-primary); font:850 clamp(31px,8vw,43px)/1 var(--blc-font-display); letter-spacing:-.04em; }
.dance-list-share__hero h1 em { font-family:'Instrument Serif',serif; font-weight:400; }
.dance-list-share__hero p { max-width:520px; margin:0; color:var(--text-muted); font-size:13px; line-height:1.55; }
.dance-list-share__count { display:inline-flex; margin-top:14px; padding:6px 9px; border:1px solid color-mix(in srgb,var(--accent-gold) 31%,transparent); border-radius:999px; background:color-mix(in srgb,var(--accent-gold) 8%,transparent); color:var(--accent-gold); font:800 9px var(--blc-font-label); letter-spacing:.06em; text-transform:uppercase; }
.dance-list-share__apply { width:min(760px,100%); box-sizing:border-box; margin:0 auto; padding:12px 18px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--panel-stroke); background:rgba(16,16,20,.94); backdrop-filter:blur(18px); }
.dance-list-share__apply p { margin:0 0 9px; color:var(--text-muted); font-size:10px; line-height:1.45; text-align:center; }
.dance-list-share__apply button { width:100%; min-height:48px; border:1px solid var(--accent-gold); border-radius:12px; background:var(--accent-gold); color:#241b09; font:850 12px var(--blc-font-display); cursor:pointer; }
.dance-list-share__apply button:disabled { cursor:default; opacity:.7; }
.dance-list-share__result { margin:0 0 9px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--blc-color-green) 32%,transparent); border-radius:11px; background:color-mix(in srgb,var(--blc-color-green) 8%,transparent); color:var(--blc-color-green); font-size:11px; line-height:1.45; text-align:center; }

/* Reusable local dances / teacher booking share sheet */
body.blc-share-sheet-open { overflow: hidden; }
.blc-share-sheet { position: fixed; inset: 0; z-index: 12000; display: flex; align-items: flex-end; font-family: var(--blc-font-body); }
.blc-share-sheet__scrim { position: absolute; inset: 0; border: 0; background: rgba(3, 4, 8, .68); cursor: default; }
.blc-share-sheet__panel { position: relative; width: min(560px, 100%); max-height: min(88vh, 760px); box-sizing: border-box; margin: 0 auto; overflow-y: auto; border: 1px solid rgba(255,255,255,.12); border-bottom: 0; border-radius: 26px 26px 0 0; background: radial-gradient(circle at 90% 0, rgba(0,218,243,.12), transparent 32%), #17151f; box-shadow: 0 -18px 54px rgba(0,0,0,.45); padding: 11px 20px calc(28px + env(safe-area-inset-bottom)); animation: blc-share-sheet-up .22s ease-out; }
@keyframes blc-share-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.blc-share-sheet__grip { width: 38px; height: 4px; margin: 0 auto 19px; border-radius: 999px; background: rgba(255,255,255,.22); }.blc-share-sheet__close { position: absolute; top: 17px; right: 15px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid var(--panel-stroke); border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text-muted); cursor: pointer; }.blc-share-sheet__close .material-symbols-outlined { font-size: 18px; }
.blc-share-sheet__eyebrow { color: var(--accent-cyan); font: 800 9px var(--blc-font-label); letter-spacing: .14em; }.blc-share-sheet h2 { margin: 7px 0 19px; color: var(--text-primary); font: 800 29px/1.02 var(--blc-font-display); letter-spacing: -.03em; }.blc-share-sheet h2 em { font-family: 'Instrument Serif', serif; font-weight: 400; }
.blc-share-sheet__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border: 1px solid var(--panel-stroke); border-radius: 12px; background: rgba(255,255,255,.035); }.blc-share-sheet__tabs button { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font: 800 10px var(--blc-font-label); letter-spacing: .06em; cursor: pointer; }.blc-share-sheet__tabs button.is-active { background: rgba(255,216,102,.16); color: var(--accent-gold); box-shadow: inset 0 0 0 1px rgba(255,216,102,.18); }.blc-share-sheet__tabs button:disabled { opacity: .35; cursor: not-allowed; }
.blc-share-sheet__mode { display: none; padding-top: 18px; }.blc-share-sheet__mode.is-active { display: block; }.blc-share-sheet__qr-wrap { display: flex; min-height: 172px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: #f7f3e9; }.blc-share-sheet__qr { display: block; width: 142px; height: 142px; }.blc-share-sheet__qr-wrap span { color: #3a3429; font: 800 9px var(--blc-font-label); letter-spacing: .1em; text-transform: uppercase; }
.blc-share-sheet__field { display: block; margin-top: 14px; }.blc-share-sheet__field > span { display: block; margin: 0 0 6px 2px; color: var(--text-muted); font: 800 9px var(--blc-font-label); letter-spacing: .09em; text-transform: uppercase; }.blc-share-sheet__field > div { display: flex; overflow: hidden; border: 1px solid var(--panel-stroke); border-radius: 12px; background: rgba(255,255,255,.035); }.blc-share-sheet__field input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 11px; background: transparent; color: var(--text-primary); font: 500 11px var(--blc-font-body); }.blc-share-sheet__field button, .blc-share-sheet__calendar-buttons button { border: 0; background: var(--accent-gold); color: #2a210b; font: 800 10px var(--blc-font-label); cursor: pointer; }.blc-share-sheet__field > div button { padding: 0 13px; }
.blc-share-sheet__social { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }.blc-share-sheet__social button { display: flex; min-height: 56px; align-items: center; justify-content: center; flex-direction: column; gap: 4px; border: 1px solid var(--panel-stroke); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--text-primary); font: 700 9px var(--blc-font-label); cursor: pointer; }.blc-share-sheet__social .material-symbols-outlined { color: var(--accent-cyan); font-size: 18px; }.blc-share-sheet__note { margin: 15px 0 0; padding: 10px 12px; border: 1px solid rgba(0,218,243,.24); border-radius: 11px; background: rgba(0,218,243,.07); color: #a8eaf0; font-size: 11px; line-height: 1.45; }
.blc-share-sheet__dance-card { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(255,216,102,.24); border-radius: 14px; background: rgba(255,216,102,.07); }.blc-share-sheet__day { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: var(--accent-gold); color: #2a210b; font: 900 10px var(--blc-font-label); }.blc-share-sheet__dance-card div { min-width: 0; }.blc-share-sheet__dance-card strong, .blc-share-sheet__dance-card span { display: block; }.blc-share-sheet__dance-card strong { overflow: hidden; color: var(--text-primary); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.blc-share-sheet__dance-card div span { margin-top: 3px; color: var(--text-muted); font-size: 11px; }
.blc-share-sheet__calendar > p, .blc-share-sheet__empty { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }.blc-share-sheet__calendar-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }.blc-share-sheet__calendar-buttons button { min-height: 42px; border-radius: 11px; background: rgba(255,216,102,.12); color: var(--accent-gold); box-shadow: inset 0 0 0 1px rgba(255,216,102,.24); }.blc-share-sheet__select { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid var(--panel-stroke) !important; border-radius: 12px; background: rgba(255,255,255,.035) !important; color: var(--text-primary) !important; font-family: var(--blc-font-body) !important; }.blc-share-sheet__select .material-symbols-outlined { color: var(--text-muted); font-size: 17px; }.blc-share-sheet__broadcast { display: flex; width: 100%; align-items: center; gap: 11px; margin-top: 14px; padding: 12px; border: 1px solid rgba(0,218,243,.22); border-radius: 13px; background: rgba(0,218,243,.06); color: var(--accent-cyan); text-align: left; cursor: pointer; }.blc-share-sheet__broadcast > span:last-child { margin-left: auto; }.blc-share-sheet__broadcast strong, .blc-share-sheet__broadcast small { display: block; }.blc-share-sheet__broadcast strong { color: var(--text-primary); font: 800 12px var(--blc-font-display); }.blc-share-sheet__broadcast small { margin-top: 3px; color: var(--text-muted); font-size: 10px; }
.blc-share-sheet__scope { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; }.blc-share-sheet__scope button { min-height: 36px; padding: 5px 8px !important; border-radius: 9px; background: transparent !important; color: var(--text-muted) !important; line-height: 1.25; }.blc-share-sheet__scope button.is-active { background: rgba(255,216,102,.16) !important; color: var(--accent-gold) !important; box-shadow: inset 0 0 0 1px rgba(255,216,102,.26); }.blc-share-sheet__scope button:disabled { cursor: wait; opacity: .48; }.blc-share-sheet__broadcast > span:nth-child(2) { min-width: 0; flex: 1; }.blc-share-sheet__broadcast > button { flex: 0 0 auto; min-width: 58px; min-height: 34px; border: 0; border-radius: 9px; background: var(--accent-gold); color: #2a210b; font: 800 10px var(--blc-font-label); cursor: pointer; }.blc-share-sheet__broadcast > button:disabled { cursor: default; opacity: .5; }

#screen-local-dances .local-dances__map { margin-top: 28px; padding-top: 19px; border-top: 1px solid var(--panel-stroke); }
#screen-local-dances .local-dances__map-head { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
#screen-local-dances .local-dances__map-head > div > span { color: var(--text-muted); font-size: 9px; font-weight: 800; }
#screen-local-dances .local-dances__map-head h2 { margin: 4px 0 0; font: 800 17px var(--blc-font-display); }
#screen-local-dances .local-dances__map-head > span { color: var(--accent-cyan); font-size: 10px; font-weight: 800; }
#screen-local-dances .local-dances__map-placeholder { display: flex; min-height: 156px; margin-top: 12px; align-items: center; justify-content: center; flex-direction: column; border: 1px dashed color-mix(in srgb, var(--accent-cyan) 32%, transparent); border-radius: 16px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-cyan) 5%, transparent) 0 2px, transparent 2px 12px); color: var(--accent-cyan); text-align: center; }
#screen-local-dances .local-dances__map-placeholder .material-symbols-outlined { font-size: 31px; }
#screen-local-dances .local-dances__map-placeholder p { margin: 7px 0 2px; color: var(--text-primary); font: 800 13px var(--blc-font-display); }
#screen-local-dances .local-dances__map-placeholder small { color: var(--text-muted); font-size: 10px; }

.student-community-screen .student-community__utility[data-tone="dances"] { --utility-color: var(--blc-color-green); }

@media (max-width: 620px) {
  #screen-local-dances .local-dances__search-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #screen-local-dances .local-dances__field:first-child { grid-column: 1 / -1; }
  #screen-local-dances .local-dances__search-button { width: 100%; }
}

@media (max-width: 380px) {
  #screen-local-dances .local-dances__main { padding-right: 12px; padding-left: 12px; }
  #screen-local-dances .local-dances__intro { align-items: stretch; flex-direction: column; gap: 12px; }
  #screen-local-dances .local-dances__intro-actions { justify-content: stretch; }
  #screen-local-dances .local-dances__secondary-action { width: 100%; }
  #screen-local-dances .local-dances__search-form { grid-template-columns: 1fr; padding: 12px; }
  #screen-local-dances .local-dances__field:first-child { grid-column: auto; }
  .local-dance-list__footer { align-items: flex-start; flex-direction: column; }
  .local-dance-list__actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 320px) {
  #screen-local-dances .blc-main-nav { box-sizing: border-box; padding-right: 2px !important; padding-left: 2px !important; }
  #screen-local-dances .blc-main-nav > a { min-width: 0; padding-right: 2px !important; padding-left: 2px !important; }
  #screen-local-dances .blc-main-nav > a > span:not(.material-symbols-outlined):not(.nav-indicator-dot) { font-size: 7px !important; letter-spacing: 0 !important; }
}

#screen-community-detail .student-cdetail__table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

#screen-community-detail .student-cdetail__table-grid {
  display: grid;
  grid-template-columns: var(--community-dashboard-columns);
  gap: 8px;
  min-width: 0;
}

#screen-community-detail .student-cdetail__col-head {
  min-width: 0;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--blc-color-green) 20%, transparent);
  background: color-mix(in srgb, var(--blc-color-green) 8%, transparent);
  color: var(--blc-color-green);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
}

#screen-community-detail .student-cdetail__table-row {
  padding: 9px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 7%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 3.5%, transparent);
  box-sizing: border-box;
}

#screen-community-detail .student-cdetail__cell {
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-primary);
  word-break: break-word;
}

.s-input:-webkit-autofill,
.s-input:-webkit-autofill:hover,
.s-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  caret-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--blc-color-white) 6%, transparent) inset;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--blc-color-white) 6%, transparent) inset;
  transition: background-color 5000s ease-in-out 0s;
}

#screen-community-detail .student-cdetail__empty-box {
  padding: 32px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

#screen-community-detail .student-cdetail__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}

#screen-community-detail .student-cdetail__pager-info {
  font-size: 11px;
  color: var(--text-muted);
}

#screen-badges {
  background: var(--bg-base-bottom);
  color: var(--text-primary);
}

#screen-badges .student-badges__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--panel-bottom);
  border-bottom: 1px solid var(--panel-stroke);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#screen-badges .student-badges__back {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-label);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#screen-badges .student-badges__back .blc-svg-icon {
  transform: rotate(180deg);
}

#screen-badges .student-badges__titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#screen-badges .student-badges__title-icon,
#screen-badges .student-badges__section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-gold);
}

#screen-badges .student-badges__title {
  font-family: var(--fd);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-primary);
}

#screen-badges .student-badges__count-chip,
#screen-badges .student-badges__preview-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--theory-stroke);
  background: var(--theory-bottom);
  color: var(--accent-gold);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

#screen-badges .student-badges__preview-pill {
  display: none;
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

#screen-badges .student-badges__dev-unlock {
  display: none;
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  padding: 5px 8px;
  background: transparent;
  color: var(--color-danger);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

#screen-badges .student-badges__main {
  max-width: 520px;
  margin: 0 auto;
  padding: 74px 18px 112px;
  overflow-x: hidden;
}

#screen-badges .student-badges__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#screen-badges .student-badges__count-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--theory-stroke);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--theory-bottom), transparent);
}

#screen-badges .student-badges__count-number {
  font-family: var(--fd);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  color: var(--text-primary);
}

#screen-badges .student-badges__count-number span {
  font-size: 15px;
  color: var(--nav-label);
}

#screen-badges .student-badges__count-label {
  margin-top: 4px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-gold);
  text-transform: uppercase;
}

#screen-badges .student-badges__count-art {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px var(--accent-gold));
}

#screen-badges .student-badges__section {
  min-width: 0;
}

#screen-badges .student-badges__section-head {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#screen-badges .student-badges__section h2 {
  margin: 0;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 700;
  color: var(--kingdom-ibm);
  text-transform: uppercase;
}

#screen-badges .student-badges__section--self-report h2 {
  color: var(--accent-gold);
}

#screen-badges .student-badges__section-desc {
  margin-top: 4px;
  font-family: var(--fm);
  font-size: 11px;
  line-height: 1.35;
  color: var(--nav-label);
}

#screen-badges .student-badges__grid {
  min-width: 0;
  display: grid;
  gap: 10px;
}

#screen-badges .student-badges__grid--achievements {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#screen-badges .student-badges__grid--self-report {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#screen-badges .student-badges__tile {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--card-stroke);
  border-radius: 17px;
  padding: 10px 7px 11px;
  background: var(--panel-bottom);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#screen-badges .student-badges__tile:active {
  transform: scale(.96);
}

#screen-badges .student-badges__tile.is-earned {
  border-color: var(--theory-stroke);
  background: linear-gradient(140deg, var(--card-gold-top), var(--panel-bottom));
  box-shadow: var(--card-shadow);
}

#screen-badges .student-badges__tile.is-locked {
  color: var(--nav-label);
  background: var(--panel-bottom);
}

#screen-badges .student-badges__art-wrap {
  width: 58px;
  height: 58px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-badges .student-badges__art {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

#screen-badges .student-badges__tile.is-locked .student-badges__art {
  filter: grayscale(1);
  opacity: .3;
}

#screen-badges .student-badges__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-label);
}

#screen-badges .student-badges__name {
  max-width: 82px;
  min-height: 24px;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#screen-badges .student-badges__desc {
  max-width: 126px;
  font-family: var(--fm);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-muted);
  text-align: center;
  overflow-wrap: anywhere;
}

#screen-badges .student-badges__claim {
  width: 100%;
  min-height: 32px;
  margin-top: auto;
  padding: 8px 6px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-gold-bottom));
  color: var(--bg-base-bottom);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  cursor: pointer;
}

#screen-badges .student-badges__empty {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid var(--card-stroke);
  border-radius: 14px;
  background: var(--panel-bottom);
  color: var(--text-muted);
  font-family: var(--fm);
  font-size: 12px;
}

#screen-badges .student-badges__skeleton-label {
  width: 124px;
  height: 15px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--panel-stroke);
}

#screen-badges .student-badges__skeleton-tile {
  height: 120px;
  border-radius: 14px;
  background: var(--panel-bottom);
  animation: badge-glow 1.5s ease-in-out infinite;
}

#screen-badges .student-badges__nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 14px 14px 28px;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid var(--panel-stroke);
  background: var(--panel-bottom);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: var(--panel-shadow);
}

#screen-badges .student-badges__nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 4px;
  color: var(--nav-label);
  text-align: center;
  text-decoration: none;
}

#screen-badges .student-badges__nav-item span:last-child {
  font-family: var(--fm);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

#screen-badges .student-badges__nav-item.is-active {
  color: var(--accent-gold);
}

@media (max-width: 360px) {
  #screen-badges .student-badges__main {
    padding-left: 12px;
    padding-right: 12px;
  }

  #screen-badges .student-badges__grid {
    gap: 8px;
  }

  #screen-badges .student-badges__nav-item span:last-child {
    font-size: 8.5px;
  }
}

.student-home__lesson-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 9px;
}

.student-home__lesson-tile {
  --card-tone: var(--section-family);
  /* #1101 — Glossary's restored intensity: tone-tinted body wash, matching
     coloured border, dark icon container, bright glyph.
     #1103 — depth: directional wash (tint at the icon edge, falling off toward
     near-black) plus a soft hue halo behind the icon container. This also lifts
     Your Teachers (gold) out of the flat near-black it read as before. */
  --card-body-fill: 22%;
  --card-border-strength: 34%;
  --card-icon-fill: 12%;
  --card-glow-strength: 34%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--card-tone) var(--card-border-strength), transparent);
  border-radius: 14px;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--card-tone) var(--card-body-fill), transparent) 0%,
    color-mix(in srgb, var(--card-tone) 5%, transparent) 62%,
    transparent 100%
  );
  color: var(--text-primary);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Per-card tones for the Home Quick Links tiles, drawn from the shared
   destination palette (#1114). */
.student-home__lesson-tile[data-tone="sky"]  { --card-tone: var(--card-hue-sky); }
.student-home__lesson-tile[data-tone="cyan"] { --card-tone: var(--card-hue-cyan); }
/* Design-kit tones for the current tiles. My Lessons carries the partnership
   side, Calendar keeps the kit's cyan, WSDC uses trophy gold, and Community
   uses EOS violet. */
.student-home__lesson-tile[data-tone="k-pcr"]  { --card-tone: var(--card-hue-magenta); }
.student-home__lesson-tile[data-tone="k-cyan"] { --card-tone: var(--card-hue-cyan); }
.student-home__lesson-tile[data-tone="k-gold"] { --card-tone: var(--k-gold); }
.student-home__lesson-tile[data-tone="k-eos"]  { --card-tone: var(--k-eos); }

.student-home__lesson-tile:active {
  transform: scale(.98);
}

.student-home__lesson-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  /* #1101 — deep, low-saturation container; the bright glyph carries the hue.
     #1103 — soft coloured halo bleeding out from the container into the body. */
  background: color-mix(in srgb, var(--card-tone) var(--card-icon-fill), var(--bg-base-bottom));
  box-shadow: 0 0 15px color-mix(in srgb, var(--card-tone) var(--card-glow-strength), transparent);
  color: var(--card-tone);
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-home__lesson-icon .blc-svg-icon {
  width: 28px !important;
  height: 28px !important;
}

.student-home__lesson-copy {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.student-home__lesson-title {
  font-family: var(--fm);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.student-home__lesson-meta {
  font-family: var(--fm);
  font-size: 10px;
  line-height: 1.25;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

/* #1234 — long-press feedback for pinning a My Communities card. */
#communitiesList .student-community__card:not(.is-invited) {
  position: relative;
  overflow: hidden;
  transition: transform 160ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

#communitiesList .student-community__card:not(.is-invited)::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--card-tone);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 560ms linear;
  pointer-events: none;
}

#communitiesList .student-community__card.is-hold-pending {
  transform: scale(.985);
  border-color: color-mix(in srgb, var(--card-tone) 58%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--card-tone) 20%, transparent);
}

#communitiesList .student-community__card.is-hold-pending::after {
  transform: scaleX(1);
}

#communitiesList .student-community__card.is-hold-complete {
  transform: scale(.975);
  background: color-mix(in srgb, var(--card-tone) 16%, var(--panel-bottom));
}

.student-community-screen .student-community__badge[data-tone="pinned"] {
  border-color: color-mix(in srgb, var(--k-eos-soft) 42%, transparent);
  background: color-mix(in srgb, var(--k-eos-soft) 14%, transparent);
  color: var(--k-eos-soft);
}

@media (prefers-reduced-motion: reduce) {
  #communitiesList .student-community__card:not(.is-invited),
  #communitiesList .student-community__card:not(.is-invited)::after {
    transition-duration: .01ms;
  }
}

#screen-booking {
  --sb-line: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  --sb-line-strong: color-mix(in srgb, var(--blc-color-white) 18%, transparent);
  --sb-panel: color-mix(in srgb, var(--blc-color-white) 4%, transparent);
  --sb-panel-strong: color-mix(in srgb, var(--blc-color-white) 7%, transparent);
  --sb-muted: var(--text-muted);
  --sb-faint: color-mix(in srgb, var(--text-primary) 36%, transparent);
  --sb-accent: var(--blc-color-purple);
  min-height: 100vh;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--blc-color-purple) 13%, transparent), transparent 42%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--blc-color-pink) 11%, transparent), transparent 42%),
    var(--bg-base-bottom);
  color: var(--text-primary);
  overflow-x: hidden;
}

#screen-booking .student-booking__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sb-line);
  background: color-mix(in srgb, var(--bg-base-bottom) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  box-sizing: border-box;
}

#screen-booking .student-booking__back,
#screen-booking .student-booking__header-spacer {
  width: 34px;
  height: 34px;
}

#screen-booking .student-booking__back {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-label);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#screen-booking .student-booking__title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--fm);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.1;
  color: var(--text-primary);
}

#screen-booking .student-booking__title-icon {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--sb-accent) 20%, transparent);
  color: var(--sb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

#screen-booking .student-booking__title-icon .blc-svg-icon {
  width: 14px;
  height: 14px;
}

#screen-booking .student-booking__main {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 76px 16px 32px;
  box-sizing: border-box;
}

#screen-booking .student-booking__list,
#screen-booking .student-booking__section-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#screen-booking .student-booking__section {
  margin-bottom: 20px;
}

#screen-booking .student-booking__section-title {
  margin: 0 0 10px;
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-muted);
}

#screen-booking .student-booking__card,
#screen-booking .student-booking__state {
  border: 1px solid var(--sb-line);
  border-radius: 14px;
  background: var(--sb-panel);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--bg-base-bottom) 34%, transparent);
}

#screen-booking .student-booking__card {
  padding: 14px;
}

#screen-booking .student-booking__card-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
}

#screen-booking .student-booking__avatar {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--blc-color-purple), var(--blc-color-pink));
  color: var(--blc-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fm);
  font-size: 13px;
  font-weight: 900;
}

#screen-booking .student-booking__card-copy {
  min-width: 0;
}

#screen-booking .student-booking__teacher {
  font-family: var(--fm);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

#screen-booking .student-booking__time {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sb-muted);
}

#screen-booking .student-booking__time .blc-svg-icon {
  width: 12px;
  height: 12px;
}

#screen-booking .student-booking__status {
  max-width: 92px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--sb-line-strong);
  background: var(--sb-panel-strong);
  color: var(--text-primary);
  font-family: var(--fm);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
}

#screen-booking .student-booking__status--pending {
  border-color: color-mix(in srgb, var(--blc-color-gold) 34%, transparent);
  background: color-mix(in srgb, var(--blc-color-gold) 12%, transparent);
  color: var(--blc-color-gold);
}

#screen-booking .student-booking__status--confirmed {
  border-color: color-mix(in srgb, var(--blc-color-cyan) 28%, transparent);
  background: color-mix(in srgb, var(--blc-color-cyan) 10%, transparent);
  color: var(--blc-color-cyan);
}

#screen-booking .student-booking__status--cancelled {
  border-color: color-mix(in srgb, var(--blc-color-pink) 28%, transparent);
  background: color-mix(in srgb, var(--blc-color-pink) 10%, transparent);
  color: var(--blc-color-pink-soft);
}

#screen-booking .student-booking__status--completed {
  border-color: color-mix(in srgb, var(--blc-color-blue-soft) 24%, transparent);
  background: color-mix(in srgb, var(--blc-color-blue-soft) 9%, transparent);
  color: var(--blc-color-blue-soft);
}

#screen-booking .student-booking__detail-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#screen-booking .student-booking__detail {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--sb-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
}

#screen-booking .student-booking__detail-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--fm);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-faint);
}

#screen-booking .student-booking__detail-value {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

#screen-booking .student-booking__notes {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
  color: var(--sb-muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#screen-booking .student-booking__context {
  margin-top: 10px;
  color: var(--sb-muted);
  font-size: 11px;
  line-height: 1.35;
}

#screen-booking .student-booking__cancel {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--blc-color-pink) 30%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blc-color-pink) 9%, transparent);
  color: var(--blc-color-pink-soft);
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

#screen-booking .student-booking__cancel .blc-svg-icon {
  width: 13px;
  height: 13px;
}

#screen-booking .student-booking__state {
  min-height: 220px;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#screen-booking .student-booking__state-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--sb-accent) 16%, transparent);
  color: var(--sb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

#screen-booking .student-booking__state-title {
  font-family: var(--fm);
  font-size: 15px;
  font-weight: 850;
  color: var(--text-primary);
}

#screen-booking .student-booking__state-copy {
  max-width: 260px;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sb-muted);
}

#screen-booking .student-booking__state-action {
  margin-top: 14px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--sb-accent) 32%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sb-accent) 13%, transparent);
  color: var(--blc-color-blue-soft);
  font-family: var(--fm);
  font-size: 12px;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

#screen-booking .student-booking__skeleton {
  width: min(260px, 100%);
  height: 14px;
  margin-top: 16px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blc-color-white) 8%, transparent);
  animation: pulse 1.4s ease-in-out infinite;
}

#screen-booking .student-booking__skeleton--short {
  width: min(190px, 74%);
  margin-top: 8px;
}

@media (max-width: 360px) {
  .student-home__lesson-links {
    grid-template-columns: 1fr;
  }

  #screen-booking .student-booking__main {
    padding-left: 12px;
    padding-right: 12px;
  }

  #screen-booking .student-booking__detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   #1124 — TEXT OVERFLOW SWEEP · shared breakout guards
   ─────────────────────────────────────────────────────────────────────────
   Root cause of the recurring "pill escaped the card" / "label clipped" /
   "badge pushed out" bugs (tester report 2026-07-31 + #1046 #1077 #1099 #1118):
   pills/chips/badges set no width cap, and flex-row titles set no `min-width:0`.
   A flex item's default `min-width:auto` refuses to shrink below its content, so
   the longest REAL values (long drill names, community/venue names, long display
   names) pushed trailing controls out of the row or spilled past the rounded
   card edge.

   Fixed once, at the shared-component layer — every rendered instance of these
   classes is covered, no per-instance HTML edits. Guards are INERT for content
   that already fits; they engage only past the real max-length. Nothing is
   hidden: titles WRAP at word boundaries (no word lost); pill atoms stay
   single-line and clip/ellipsis only past their real max, where the full value
   is present in the adjacent heading/detail. No font sizes changed; no copy
   changed. Verified at 320px and 280px, default and 1.4× system font.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · Pill / chip / badge atoms — cap to the container, stay single-line, and
   ellipsis-or-clip past the real max so a long value can never escape its own
   box or stretch its row. */
.blc-tag,
.blc-lb-sortpill,
.teacher-destination__pill,
.teacher-destination__audience-button,
.teacher-destination__chip,
.teacher-destination__status,
#screen-community-detail .student-cdetail__option-pill,
#screen-community-detail .student-cdetail__chip,
.student-community-screen .student-community__badge,
.dance-list-share__count,
.cur-pillar-count,
.student-pathways__badge,
#pw-drill-detail-view .student-drill-player__badge,
#screen-pathways .student-drill-video__variant,
.student-home__pill,
#screen-badges .student-badges__count-chip,
#screen-badges .student-badges__preview-pill,
#screen-teacher-studio .teacher-studio__badge {
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 2 · Leaderboard chip is itself a flex item with an inner label — let both
   shrink so a long label truncates instead of stretching the chip row. */
.blc-lb-chip { min-width: 0; box-sizing: border-box; }
.blc-lb-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 3 · Flex-row TITLES that truncate (they already carry text-overflow:ellipsis
   but it was inert without min-width:0). Activate it. */
.teacher-destination__preview,
.teacher-destination__link-text {
  min-width: 0;
}

/* 4 · Flex-row TITLES that should wrap: shrink (min-width:0) and break long
   unbroken tokens so they never push the trailing badge/count/chevron out of
   the row. Wrapping loses no words. */
.student-pathways__name,
.student-pathways__featured-name,
.student-pathways__detail-title,
.student-pathways__step-title,
.blc-section-title,
.cur-pillar-name,
.teacher-destination__title {
  min-width: 0;
  overflow-wrap: break-word;
}
.student-pathways__step > * { min-width: 0; }
.chat-pillar-head > :first-child { min-width: 0; overflow-wrap: break-word; }

/* 5 · Trailing controls hold their size so a long title can't crush them. */
.blc-section-action,
.student-pathways__badge,
.cur-pillar-count,
.teacher-destination__chip,
.teacher-destination__status {
  flex-shrink: 0;
}

/* 6 · Card / tip / stat titles: break long unbroken tokens rather than spilling
   past the rounded edge (#1099 XP label class of bug). */
.blc-tip-title,
.blc-glossary-sheet-title,
.student-home__spark-name,
.student-home__hero-title,
.teacher-home__studio-title,
.blc-tile-value,
.blc-tile-label {
  overflow-wrap: break-word;
}
/* Stat tiles as flex/grid items can shrink so a long value breaks to fit. */
.blc-tile { min-width: 0; }

/* 7 · Quick-start buttons in a two-up grid: `1fr` tracks refuse to shrink below
   the button's content, so a long label (or a large system font) forced the row
   past the screen. `minmax(0,1fr)` lets tracks shrink; the label then wraps.
   Same fix for the two-up teacher-search mode grid. */
.blc-qs-grid,
#screen-my-teachers .student-teachers__search-modes {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.blc-button { min-width: 0; }
.blc-button-label { min-width: 0; overflow-wrap: break-word; }

/* ═══ PRIVATE SOCIAL-DANCE HISTORY — #1131 ═══════════════════════════════ */
.social-dance-log-screen {
  --social-log-accent: var(--card-hue-lime);
  min-height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--social-log-accent) 9%, transparent), transparent 34%),
    var(--bg-base-bottom);
  color: var(--text-primary);
  font-family: var(--blc-font-body);
}

.social-dance-log__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 220;
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-stroke);
  background: color-mix(in srgb, var(--panel-bottom) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.social-dance-log__back,
.social-dance-editor__close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
  color: var(--nav-label);
  cursor: pointer;
}

.social-dance-log__back .blc-svg-icon { width: 18px; height: 18px; }
.social-dance-log__titlebar { min-width: 0; }
.social-dance-log__eyebrow,
.social-dance-summary__label,
.social-dance-history__eyebrow,
.social-dance-editor__field > span {
  font-family: var(--blc-font-label);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--social-log-accent);
}

.social-dance-log__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--blc-font-display);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
}

.social-dance-log__new {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 10px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--social-log-accent) 34%, transparent);
  background: color-mix(in srgb, var(--social-log-accent) 13%, transparent);
  color: var(--social-log-accent);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.social-dance-log__new .material-symbols-outlined { font-size: 18px; }

.social-dance-log__main {
  width: min(100%, 560px);
  min-width: 0;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 92px 16px 128px;
}

.social-dance-log__privacy {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--social-log-accent) 22%, transparent);
  border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--social-log-accent) 10%, transparent), transparent);
}

.social-dance-log__privacy > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--social-log-accent);
  font-size: 20px;
}

.social-dance-log__privacy div { min-width: 0; }
.social-dance-log__privacy strong,
.social-dance-log__privacy span { display: block; }
.social-dance-log__privacy strong {
  margin-bottom: 2px;
  font-family: var(--blc-font-display);
  font-size: 13px;
}
.social-dance-log__privacy div span {
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.social-dance-editor {
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--social-log-accent) 32%, transparent);
  border-bottom-width: 3px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--social-log-accent) 12%, var(--panel-top)), var(--panel-bottom));
  box-shadow: 0 16px 36px rgba(0,0,0,.32), 0 0 24px color-mix(in srgb, var(--social-log-accent) 7%, transparent);
}

.social-dance-editor__head,
.social-dance-editor__footer,
.social-dance-history__head,
.social-dance-history__item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.social-dance-editor__title {
  font-family: var(--blc-font-display);
  font-size: 18px;
  font-weight: 800;
}
.social-dance-editor__hint {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.social-dance-editor__kind,
.social-dance-history__tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--panel-stroke);
  border-radius: 11px;
  background: color-mix(in srgb, var(--blc-color-white) 5%, transparent);
}
.social-dance-editor__kind { margin: 16px 0 14px; }

.social-dance-editor__kind-btn,
.social-dance-history__tabs button {
  flex: 1;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--blc-font-display);
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.social-dance-editor__kind-btn.is-active,
.social-dance-history__tabs button.is-active {
  border-color: color-mix(in srgb, var(--social-log-accent) 38%, transparent);
  background: color-mix(in srgb, var(--social-log-accent) 15%, transparent);
  color: var(--social-log-accent);
}

.social-dance-editor__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.social-dance-editor__field {
  display: block;
  min-width: 0;
  margin-bottom: 13px;
}
.social-dance-editor__field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--nav-label);
}
.social-dance-editor__field > span i {
  font-style: normal;
  font-weight: 600;
  color: var(--text-muted);
}
.social-dance-editor__field .s-input { width: 100%; }
.social-dance-editor__field small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 9.5px;
  line-height: 1.35;
}

.social-dance-editor__stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 6px;
}
.social-dance-editor__stepper button {
  border: 1px solid color-mix(in srgb, var(--social-log-accent) 27%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--social-log-accent) 10%, transparent);
  color: var(--social-log-accent);
  font-family: var(--blc-font-display);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}
.social-dance-editor__stepper input { text-align: center; font-family: var(--blc-font-display); font-size: 20px; font-weight: 800; }
.social-dance-editor__footer { align-items: center; margin-top: 2px; }
.social-dance-editor__status {
  min-width: 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}
.social-dance-editor__status[data-state="saving"] { color: var(--accent-gold); }
.social-dance-editor__status[data-state="saved"] { color: var(--social-log-accent); }
.social-dance-editor__status[data-state="error"] { color: var(--color-danger); }
.social-dance-editor__delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-danger) 9%, transparent);
  color: var(--color-danger);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.social-dance-editor__delete .material-symbols-outlined { font-size: 15px; }

.social-dance-summary {
  margin-bottom: 26px;
}
.social-dance-summary__label { margin: 0 0 9px 2px; }
.social-dance-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.social-dance-summary__card {
  min-width: 0;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--social-log-accent) 20%, transparent);
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--social-log-accent) 9%, transparent), color-mix(in srgb, var(--blc-color-white) 3%, transparent));
}
.social-dance-summary__card span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 9.5px;
}
.social-dance-summary__card strong {
  display: block;
  font-family: var(--blc-font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  color: var(--text-primary);
}
.social-dance-summary__copy {
  margin: 10px 2px 0;
  color: var(--text-muted);
  font-size: 10.5px;
  line-height: 1.5;
}

.social-dance-history__head { align-items: end; margin-bottom: 12px; }
.social-dance-history__head h2 {
  margin: 2px 0 0;
  font-family: var(--blc-font-display);
  font-size: 19px;
  font-weight: 800;
}
.social-dance-history__tabs { flex: 0 0 auto; }
.social-dance-history__tabs button { padding: 7px 8px; font-size: 9px; }
.social-dance-history__list { display: flex; flex-direction: column; gap: 10px; }
.social-dance-history__item {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--card-stroke);
  border-radius: 15px;
  background: linear-gradient(105deg, color-mix(in srgb, var(--social-log-accent) 7%, transparent), color-mix(in srgb, var(--blc-color-white) 3%, transparent));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.social-dance-history__date,
.social-dance-history__kind {
  font-family: var(--blc-font-label);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--social-log-accent);
}
.social-dance-history__count {
  flex: 0 0 auto;
  font-family: var(--blc-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
}
.social-dance-history__count small { font-family: var(--blc-font-body); font-size: 9px; font-weight: 500; color: var(--text-muted); }
.social-dance-history__venue {
  margin-top: 5px;
  font-family: var(--blc-font-display);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.social-dance-history__note {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.social-dance-history__loading,
.social-dance-history__empty {
  padding: 30px 18px;
  border: 1px solid var(--card-stroke);
  border-radius: 16px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
  color: var(--text-muted);
  text-align: left;
  font-size: 11px;
  line-height: 1.55;
}
.social-dance-history__empty strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--blc-font-display);
  font-size: 16px;
  color: var(--text-primary);
}
.social-dance-history__empty button {
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--social-log-accent) 34%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--social-log-accent) 14%, transparent);
  color: var(--social-log-accent);
  font-family: var(--blc-font-display);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

@media (min-width: 430px) {
  .social-dance-editor__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

@media (max-width: 359px) {
  .social-dance-log__header { grid-template-columns: 36px minmax(0, 1fr) 36px; padding-inline: 10px; }
  .social-dance-log__new { width: 36px; padding: 0; }
  .social-dance-log__new span:last-child { display: none; }
  .social-dance-log__title { font-size: 17px; }
  .social-dance-history__head { display: block; }
  .social-dance-history__tabs { margin-top: 10px; }
}

/* Prompt #1140 — accessible interface-copy and recurring-empty-state floor. */
:is(
  [style^="color:rgba(168,160,192,0."],
  [style*=";color:rgba(168,160,192,0."],
  [style^="color:rgba(255,255,255,0.1"],
  [style*=";color:rgba(255,255,255,0.1"],
  [style^="color:rgba(255,255,255,0.2"],
  [style*=";color:rgba(255,255,255,0.2"],
  [style^="color:rgba(255,255,255,0.3"],
  [style*=";color:rgba(255,255,255,0.3"],
  [style^="color:rgba(255,255,255,0.4"],
  [style*=";color:rgba(255,255,255,0.4"]
):not(:where(nav *, .student-home__lesson-links *, #screen-library-hub .student-learn__tool *, [data-blc-icon], .material-symbols-outlined)) {
  color: var(--text-muted) !important;
}

:is(
  [style^="color:rgba(170,102,238,0."],
  [style*=";color:rgba(170,102,238,0."]
):not(:where(nav *, .student-home__lesson-links *, #screen-library-hub .student-learn__tool *, [data-blc-icon], .material-symbols-outlined)) {
  color: var(--blc-color-purple-soft) !important;
}

:is(
  [style^="color:rgba(255,85,153,0."],
  [style*=";color:rgba(255,85,153,0."]
):not(:where(nav *, .student-home__lesson-links *, #screen-library-hub .student-learn__tool *, [data-blc-icon], .material-symbols-outlined)) {
  color: var(--blc-color-pink-soft) !important;
}

:is(
  [style^="color:rgba(178,197,255,0."],
  [style*=";color:rgba(178,197,255,0."]
):not(:where(nav *, .student-home__lesson-links *, #screen-library-hub .student-learn__tool *, [data-blc-icon], .material-symbols-outlined)) {
  color: var(--blc-color-blue-soft) !important;
}

:is(
  [style^="color:rgba(255,216,102,0."],
  [style*=";color:rgba(255,216,102,0."]
):not(:where(nav *, .student-home__lesson-links *, #screen-library-hub .student-learn__tool *, [data-blc-icon], .material-symbols-outlined)) {
  color: var(--blc-color-gold) !important;
}

.blc-recurring-empty,
.student-community__empty,
.student-teachers__empty,
.student-booking__state:not(.student-booking__state--loading),
.student-recordings__empty,
#studentProfileContent .student-progress__empty,
.local-dance-list__empty,
.community-form-builder__empty,
.community-form-dashboard__empty {
  align-items: flex-start;
  text-align: left !important;
}

/* Runtime inline styles are serialized with spaces after JavaScript writes. */
:is(#blcAppHeader, #screen-flashcards, #screen-glossary) :is(
  [style*="color: rgb(106, 96, 128)"],
  [style*="color:rgb(106, 96, 128)"],
  [style*="color: rgba(106, 96, 128, 1)"],
  [style*="color:rgba(106,96,128,1)"],
  [style*="color: #6a6080"],
  [style*="color:#6a6080"]
) {
  color: var(--text-muted) !important;
}

#screen-community-discover [style*="color:rgba(68,238,221,0.25)"],
#screen-community-discover [style*="color: rgba(68, 238, 221, 0.25)"] {
  color: var(--blc-color-cyan) !important;
}

.community-discover__filter {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.community-discover__filter > label {
  display: block;
  margin-bottom: 8px;
  color: #e5e1e4;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
}

.community-discover__filter-row {
  display: flex;
  gap: 8px;
}

.community-discover__filter-row .s-input {
  min-width: 0;
  flex: 1;
}

.community-discover__filter-row button {
  padding: 0 13px;
  border: 1px solid rgba(68, 238, 221, 0.35);
  border-radius: 10px;
  background: rgba(68, 238, 221, 0.12);
  color: #44eedd;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.community-discover__filter-row #communityDiscoverZipClear {
  border-color: rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(229, 225, 228, 0.72);
}

.community-discover__filter-hint {
  margin-top: 8px;
  color: rgba(168, 160, 192, 0.62);
  font-size: 11px;
  line-height: 1.45;
}

#screen-certification .material-symbols-outlined[style*="color:rgba(255,255,255,0.15)"],
#screen-certification .material-symbols-outlined[style*="color:rgba(255,255,255,0.2)"] {
  color: var(--text-muted) !important;
}

#screen-project-status .material-symbols-outlined[style*="color:rgba(178,197,255,0.4)"],
#screen-wsdc .material-symbols-outlined[style*="color:rgba(178,197,255,0.3)"] {
  color: var(--blc-color-blue-soft) !important;
}

#screen-compete [style*="color:#aa66ee"],
#screen-compete [style*="color: #aa66ee"] {
  color: var(--blc-color-purple-soft) !important;
}

#screen-project-status [style*="color:rgba(255,100,100,0.7)"],
#screen-project-status [style*="color: rgba(255, 100, 100, 0.7)"] {
  color: #ff9a9a !important;
}

/* The flashcard toggle sits on a medium-gray translucent control shell. */
#gloDirDT,
#gloReviewAllBtn {
  color: var(--blc-color-white) !important;
}

/* Prompt #1157 — booking usernames are editable Settings data, never a first-run gate. */
.booking-username-edit {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--panel-stroke);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
}

.booking-username-edit__label {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
  font: 800 13px var(--blc-font-display);
}

.booking-username-edit__intro {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font: 400 12px/1.5 var(--blc-font-body);
  text-align: left;
}

.booking-username-edit__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.booking-username-edit__input {
  min-width: 0;
  min-height: 46px;
  font-family: var(--blc-font-body);
}

.booking-username-edit__input:focus {
  border-color: color-mix(in srgb, var(--accent-cyan) 58%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-cyan) 12%, transparent);
}

.booking-username-edit__save {
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--blc-color-pink) 46%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blc-color-pink) 13%, transparent);
  color: color-mix(in srgb, var(--blc-color-pink) 75%, var(--text-primary));
  font: 800 12px var(--blc-font-display);
  cursor: pointer;
}

.booking-username-edit__save:disabled {
  border-color: var(--panel-stroke);
  background: color-mix(in srgb, var(--blc-color-white) 3%, transparent);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: .72;
}

.booking-username-edit__status {
  min-height: 17px;
  margin: 7px 2px 0;
  color: color-mix(in srgb, var(--blc-color-pink) 72%, var(--text-primary));
  font: 500 11px/1.45 var(--blc-font-body);
  text-align: left;
}

.booking-username-edit__status[data-state="checking"],
.booking-username-edit__status[data-state="current"] {
  color: var(--text-muted);
}

.booking-username-edit__status[data-state="available"] {
  color: color-mix(in srgb, var(--accent-cyan) 72%, var(--text-primary));
}

.booking-username-edit__preview {
  margin-top: 8px;
  color: color-mix(in srgb, var(--accent-cyan) 70%, var(--text-primary));
  font: 700 11px/1.45 var(--blc-font-body);
  overflow-wrap: anywhere;
}

.booking-username-edit__warning {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--blc-color-pink) 25%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--blc-color-pink) 7%, transparent);
  color: var(--text-secondary);
  font: 400 11px/1.5 var(--blc-font-body);
  text-align: left;
}

.booking-username-edit__warning .material-symbols-outlined {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--blc-color-pink) 72%, var(--text-primary));
  font-size: 16px;
}

.booking-username-edit__share {
  margin-top: 10px;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 18%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-cyan) 6%, transparent);
}

.booking-username-edit__share > .material-symbols-outlined {
  flex: 0 0 auto;
  color: var(--accent-cyan);
  font-size: 16px;
}

.booking-username-edit__share > span:nth-child(2) {
  flex: 1;
  overflow: hidden;
  color: color-mix(in srgb, var(--accent-cyan) 78%, var(--text-primary));
  font: 500 11px var(--blc-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-username-edit__share button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-cyan) 10%, transparent);
  color: var(--accent-cyan);
  font: 800 10px var(--blc-font-display);
  cursor: pointer;
}

@media (max-width: 360px) {
  .booking-username-edit__row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Your Teachers left Home's top level (#1188); the My Lessons header carries it
   so the screen is still reachable when the student HAS lessons — the only
   other route was the empty-state button. */
#screen-booking .student-booking__teachers-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--k-pcr) 38%, transparent);
  background: color-mix(in srgb, var(--k-pcr) 14%, transparent);
  color: var(--k-pcr-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#screen-booking .student-booking__teachers-link .blc-svg-icon { width: 18px; height: 18px; }
#screen-booking .student-booking__teachers-link:active { transform: scale(0.94); }


/* Prompt #1208 — keep the library cards compact and evenly tinted. The previous
   stacked treatment made every two-column card feel like an empty poster, and
   its directional wash faded to black before the content had finished. */
#screen-library-hub .student-learn__tool {
  --card-body-fill: 12%;
  --card-border-strength: 26%;
  --card-icon-fill: 10%;
  --card-glow-strength: 18%;
  background: color-mix(in srgb, var(--card-tone) 8%, var(--learn-panel-soft));
}
#screen-library-hub .student-learn__tool--wide {
  min-height: 84px;
  padding: 12px;
}
#screen-library-hub .student-learn__tool--wide .student-learn__tool-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}
#screen-library-hub .student-learn__tool--wide .student-learn__tool-icon .blc-svg-icon {
  width: 26px;
  height: 26px;
}
#screen-library-hub .student-learn__tool:not(.student-learn__tool--wide) {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
}
#screen-library-hub .student-learn__tool:not(.student-learn__tool--wide) .student-learn__tool-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
#screen-library-hub .student-learn__tool:not(.student-learn__tool--wide) .student-learn__tool-icon .blc-svg-icon {
  width: 24px;
  height: 24px;
}
#screen-library-hub .student-learn__tool:not(.student-learn__tool--wide) .student-learn__tool-chevron {
  display: none;
}

/* Settings — Your Teachers row (#1189), a second route now that Home no longer
   carries the tile. */
#screen-settings .settings-drawer__link-row {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--k-pcr) 30%, transparent);
  background: color-mix(in srgb, var(--k-pcr) 10%, transparent);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
#screen-settings .settings-drawer__link-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--k-pcr) 16%, var(--bg-base-bottom));
  color: var(--k-pcr-soft);
}
#screen-settings .settings-drawer__link-icon .blc-svg-icon { width: 18px; height: 18px; }
#screen-settings .settings-drawer__link-text { flex: 1; font-size: 13.5px; font-weight: 600; }
#screen-settings .settings-drawer__link-arrow { color: var(--k-pcr-soft); }
#screen-settings .settings-drawer__link-arrow .blc-svg-icon { width: 18px; height: 18px; }
#screen-settings .settings-drawer__link-row:active { transform: scale(0.98); }