/* LessonCaddie app CSS bundle. Generated by scripts/build-frontend.mjs from public/index.html (LESSONLINK_APP_CSS markers); do not edit. */
/* ---- public/style/boot-skeleton.css ---- */
/* Early boot skeleton — loads before the main CSS manifest so first paint has shape. */

html {
    background: #0c1218;
    color-scheme: dark;
}

body {
    margin: 0;
    background: #0c1218;
    color: #e8e4dc;
}

html[data-theme="light"],
body[data-theme="light"] {
    background: #f4f6f8;
    color: #1a2330;
    color-scheme: light;
}

@keyframes ll-boot-skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.app-boot-skeleton {
    --ll-boot-skeleton-bg: #12161c;
    --ll-boot-skeleton-bone: #1c232c;
    --ll-boot-skeleton-shine: #2a3340;
    --ll-boot-skeleton-accent: #0f766e;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: min(100%, 100dvh);
    width: 100%;
    padding: 12px 12px 16px;
    background: var(--ll-boot-skeleton-bg);
    color: #e8eef5;
}

[data-theme="light"] .app-boot-skeleton {
    --ll-boot-skeleton-bg: #f4f6f8;
    --ll-boot-skeleton-bone: #e2e6eb;
    --ll-boot-skeleton-shine: #f7f8fa;
    --ll-boot-skeleton-accent: #0f766e;
    color: #1a2330;
}

.app-boot-skeleton *,
.app-boot-skeleton *::before,
.app-boot-skeleton *::after {
    box-sizing: border-box;
}

.app-boot-skeleton__layout {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    width: min(720px, 100%);
    margin: 0 auto;
}

.app-boot-skeleton__toolbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 2px 4px;
}

.app-boot-skeleton__bone {
    display: block;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--ll-boot-skeleton-bone) 0%,
        var(--ll-boot-skeleton-shine) 45%,
        var(--ll-boot-skeleton-bone) 90%
    );
    background-size: 200% 100%;
    animation: ll-boot-skeleton-shimmer 1.35s ease-in-out infinite;
}

.app-boot-skeleton__bone--btn {
    width: 5.5rem;
    height: 2rem;
}

.app-boot-skeleton__bone--btn-wide {
    width: 7.5rem;
    height: 2rem;
}

.app-boot-skeleton__scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
    min-height: 12rem;
    padding: 8px 4px 12px;
}

.app-boot-skeleton__row {
    display: flex;
    width: 100%;
}

.app-boot-skeleton__row--assistant {
    justify-content: flex-start;
}

.app-boot-skeleton__row--user {
    justify-content: flex-end;
}

.app-boot-skeleton__bubble {
    width: min(78%, 22rem);
    min-height: 3.25rem;
    border-radius: 18px;
    background: linear-gradient(
        90deg,
        var(--ll-boot-skeleton-bone) 0%,
        var(--ll-boot-skeleton-shine) 45%,
        var(--ll-boot-skeleton-bone) 90%
    );
    background-size: 200% 100%;
    animation: ll-boot-skeleton-shimmer 1.35s ease-in-out infinite;
}

.app-boot-skeleton__bubble--short {
    width: min(52%, 14rem);
    min-height: 2.5rem;
    animation-delay: 120ms;
}

.app-boot-skeleton__bubble--mid {
    width: min(68%, 18rem);
    min-height: 4rem;
    animation-delay: 240ms;
}

.app-boot-skeleton__composer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #334155 70%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, #0f141a 88%, #1a2330);
}

.app-boot-skeleton__bone--composer {
    flex: 1 1 auto;
    height: 1.15rem;
    border-radius: 8px;
    animation-delay: 80ms;
}

.app-boot-skeleton__bone--send {
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ll-boot-skeleton-accent) 55%, var(--ll-boot-skeleton-bone));
    background-image: none;
    animation: none;
    opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
    .app-boot-skeleton__bone,
    .app-boot-skeleton__bubble {
        animation: none;
        background: var(--ll-boot-skeleton-bone);
    }
}

/* ---- public/style/features/schedule-calendar-body.css ---- */
/* Feature: schedule-calendar-body.css
 * Google Calendar–like light canvas for FullCalendar under `.availability-calendar`.
 * Visual only — no behavior changes. Loads after theme-overrides to win cascade.
 */

/* Parent shells: only the scroll/grid canvas goes light — keep toolbar (New, search) on dark shell. */
.home-panel.home-schedule-panel-root .availability-grid-scroll,
.availability-shell .availability-grid-scroll,
.availability-editor--embedded .availability-grid-scroll,
.availability-editor--embedded .availability-calendar {
    background: #ffffff !important;
    color: #3c4043;
    box-shadow: none;
}

/* Restore schedule New button on dark hub toolbar (12% brand tint needs dark parent + light label). */
.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--text-primary, #fff);
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn__label {
    color: inherit;
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn__icon {
    background: var(--brand-primary);
    color: #fff;
}

.availability-calendar {
    --ll-fc-page-bg: #ffffff;
    --ll-fc-cell-bg: #ffffff;
    --ll-fc-border: #dadce0;
    --ll-fc-axis-text: #70757a;
    --ll-fc-header-text: #3c4043;
    --ll-fc-today-bg: color-mix(in srgb, #1a73e8 6%, #ffffff);
    --ll-fc-today-mark: #1a73e8;
    --ll-fc-today-mark-text: #ffffff;
    --ll-fc-now: #ea4335;
    --ll-fc-highlight: color-mix(in srgb, #1a73e8 14%, #ffffff);
    --ll-fc-event-text: #202124;
    --ll-fc-lesson-bg: color-mix(in srgb, var(--ll-calendar-google-lesson-green, #51b749) 22%, #ffffff);
    --ll-fc-lesson-accent: var(--ll-calendar-google-lesson-green, #51b749);
    --ll-fc-practice-bg: color-mix(in srgb, #1a73e8 16%, #ffffff);
    --ll-fc-practice-accent: #1a73e8;
    --ll-fc-thought-bg: color-mix(in srgb, #f9ab00 18%, #ffffff);
    --ll-fc-thought-accent: #e37400;
    background: var(--ll-fc-page-bg) !important;
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc {
    --fc-border-color: var(--ll-fc-border);
    --fc-page-bg-color: var(--ll-fc-page-bg);
    --fc-neutral-bg-color: var(--ll-fc-cell-bg);
    --fc-neutral-text-color: var(--ll-fc-axis-text);
    --fc-list-event-hover-bg-color: color-mix(in srgb, #1a73e8 8%, #ffffff);
    --fc-today-bg-color: var(--ll-fc-today-bg);
    --fc-now-indicator-color: var(--ll-fc-now);
    --fc-non-business-color: color-mix(in srgb, #70757a 6%, #ffffff);
    --fc-highlight-color: var(--ll-fc-highlight);
    --fc-event-bg-color: var(--ll-fc-lesson-bg);
    --fc-event-border-color: transparent;
    --fc-event-text-color: var(--ll-fc-event-text);
    /* Prev/next use FullCalendar button tokens — keep brand green */
    --fc-button-bg-color: var(--primary, #3fa85a);
    --fc-button-border-color: var(--primary, #3fa85a);
    --fc-button-text-color: #ffffff;
    --fc-button-hover-bg-color: var(--primary-strong, #2d7a38);
    --fc-button-hover-border-color: var(--primary-strong, #2d7a38);
    --fc-button-hover-text-color: #ffffff;
    --fc-button-active-bg-color: var(--primary-strong, #2d7a38);
    --fc-button-active-border-color: var(--primary-strong, #2d7a38);
    --fc-button-active-text-color: #ffffff;
    color: var(--ll-fc-header-text);
    background: var(--ll-fc-page-bg) !important;
}

/* Beat theme-overrides bare `.fc` / cell rules — force light on every grid surface */
.availability-calendar .fc,
.availability-calendar .fc-view-harness,
.availability-calendar .fc-view,
.availability-calendar .fc-scrollgrid,
.availability-calendar .fc-scrollgrid-section,
.availability-calendar .fc-scrollgrid-sync-table,
.availability-calendar .fc-daygrid-body,
.availability-calendar .fc-timegrid-body,
.availability-calendar .fc-timegrid-slots,
.availability-calendar .fc-timegrid-cols,
.availability-calendar .fc-list,
.availability-calendar .fc-list-table,
.availability-calendar .fc-popover {
    background: var(--ll-fc-page-bg) !important;
    color: var(--ll-fc-header-text);
    border-color: var(--ll-fc-border);
}

.availability-calendar .fc-theme-standard td,
.availability-calendar .fc-theme-standard th,
.availability-calendar .fc-daygrid-day,
.availability-calendar .fc-daygrid-day-frame,
.availability-calendar .fc-daygrid-day-bg,
.availability-calendar .fc-daygrid-day-events,
.availability-calendar .fc-col-header,
.availability-calendar .fc-col-header-cell,
.availability-calendar .fc-timegrid-axis,
.availability-calendar .fc-timegrid-slot,
.availability-calendar .fc-timegrid-col,
.availability-calendar .fc-scrollgrid-section > td,
.availability-calendar .fc-scrollgrid-section > th {
    background: var(--ll-fc-cell-bg) !important;
    border-color: var(--ll-fc-border) !important;
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc-scrollgrid {
    border: 0;
}

/* Toolbar date range + day headers: dark ink on light canvas (not theme --text-primary) */
.availability-calendar .fc-toolbar-title {
    color: #202124 !important;
    font-weight: 600;
}

.availability-calendar .fc-col-header-cell-cushion {
    color: #3c4043 !important;
    font-weight: 500;
}

.availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    color: var(--ll-fc-today-mark-text) !important;
}

/* Typography: muted axis + headers (override shared-misc weight 700) */
.availability-calendar .fc-col-header-cell-cushion,
.availability-calendar .fc-timegrid-axis-cushion,
.availability-calendar .fc-timegrid-slot-label-cushion,
.availability-calendar .fc .fc-daygrid-day-number {
    color: var(--ll-fc-axis-text);
    font-weight: 500;
}

.availability-calendar .fc-col-header-cell-cushion {
    color: var(--ll-fc-header-text);
    font-weight: 500;
    padding: 6px 2px;
}

.availability-calendar .fc-timeGridWeek-view .fc-col-header-cell-cushion {
    /* Custom week header stacks day + DOW; keep cushion from clipping letter. */
    overflow: visible;
}

.availability-calendar .fc-timegrid-slot-label-cushion {
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.availability-calendar .fc-timegrid-axis-cushion {
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 400;
}

/* Today column + blue day mark (after forced white cells) */
.availability-calendar .fc .fc-day-today,
.availability-calendar .fc-daygrid-day.fc-day-today,
.availability-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    background: var(--ll-fc-today-bg) !important;
}

.availability-calendar .fc-col-header-cell.fc-day-today {
    background: var(--ll-fc-page-bg) !important;
}

.availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65em;
    min-height: 1.65em;
    margin: 2px auto;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--ll-fc-today-mark);
    color: var(--ll-fc-today-mark-text);
    font-weight: 500;
}

.availability-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    margin: 2px;
    padding: 0;
    border-radius: 999px;
    background: var(--ll-fc-today-mark);
    color: var(--ll-fc-today-mark-text);
    font-weight: 500;
}

/* Now indicator — thin GCal red */
.availability-calendar .fc-timegrid-now-indicator-line {
    border-color: var(--ll-fc-now);
    border-width: 2px 0 0;
}

.availability-calendar .fc-timegrid-now-indicator-arrow {
    border-color: var(--ll-fc-now);
    border-top-color: var(--ll-fc-now);
    border-bottom-color: var(--ll-fc-now);
}

.availability-calendar .fc-highlight {
    background: var(--ll-fc-highlight) !important;
}

/* ----- TimeGrid week/day: GCal pastel blocks (title then time) ----- */
.availability-calendar .fc-timegrid-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-v-event.availability-lesson-event {
    /* Kill FC's default green event border (shows on the right of narrow/overlap chips). */
    border: 0 !important;
    border-right: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    /* Square corners — rounded left edge looked pill-like on short week chips. */
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ll-fc-event-text) !important;
    overflow: hidden;
}

.availability-calendar .fc-timegrid-event-harness .fc-timegrid-event.availability-lesson-event {
    border-radius: 0 !important;
    border-right: 0 !important;
}

.availability-calendar .fc-timegrid-event .fc-event-main,
.availability-calendar .fc-timegrid-event .fc-event-main-frame {
    color: inherit !important;
    /* Extra top pad so bold titles are not clipped by overflow + hour lines. */
    padding: 4px 5px 4px 6px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0 !important;
}

.availability-calendar .fc-timeGridWeek-view .fc-timegrid-event .fc-event-main,
.availability-calendar .fc-timeGridWeek-view .fc-timegrid-event .fc-event-main-frame {
    padding: 3px 3px 3px 4px;
}

/* No left accent stripe — on side-by-side overlaps it reads as green on the right of the prior chip. */
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson {
    background: var(--ll-fc-lesson-bg) !important;
    background-color: var(--ll-fc-lesson-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: none !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--practice {
    background: var(--ll-fc-practice-bg) !important;
    background-color: var(--ll-fc-practice-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: none !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--thought {
    background: var(--ll-fc-thought-bg) !important;
    background-color: var(--ll-fc-thought-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: none !important;
}

/* Synced: bottom edge only (never left/right). */
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson.availability-lesson-event--sync-synced {
    box-shadow: inset 0 -2px 0 var(--ll-fc-lesson-accent) !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--practice.availability-lesson-event--sync-synced {
    box-shadow: inset 0 -2px 0 var(--ll-fc-practice-accent) !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--thought.availability-lesson-event--sync-synced {
    box-shadow: inset 0 -2px 0 var(--ll-fc-thought-accent) !important;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.08em;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    line-height: 1.3;
    font-size: var(--ll-type-meta-size, 0.75rem);
    color: var(--ll-fc-event-text);
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-title-line {
    font-weight: 600;
    font-size: var(--ll-type-meta-size, 0.75rem);
    line-height: 1.3;
    color: var(--ll-fc-event-text) !important;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.availability-calendar .fc-timeGridDay-view .fc-timegrid-event .calendar-lesson-fc-event-day-line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.availability-calendar .fc-timeGridDay-view .fc-timegrid-event .calendar-lesson-fc-event-day-line .calendar-lesson-fc-event-title-line {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.availability-calendar .fc-timeGridDay-view .fc-timegrid-event .calendar-lesson-fc-event-day-line .calendar-lesson-fc-event-time {
    flex: 0 0 auto;
    font-size: inherit;
    line-height: inherit;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-time,
.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-person {
    font-weight: 400;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    line-height: 1.3;
    color: color-mix(in srgb, var(--ll-fc-event-text) 78%, transparent) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.availability-calendar .fc-timeGridWeek-view .fc-timegrid-event .calendar-lesson-fc-event-inner--week {
    line-height: 1.3;
    padding: 0;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator {
    filter: none;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--pending {
    color: #b45309;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--error,
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--stale {
    color: #b91c1c;
}

/* Do NOT set position:relative on .fc-timegrid-event — FullCalendar sizes the harness
   to the lesson duration and absolutely fills it. relative collapses the chip to content height.
   Leave a 2px right / 1px bottom gap so side-by-side overlaps do not fuse and the
   hour line does not clip the first line of text. */
.availability-calendar .fc-timegrid-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-v-event.availability-lesson-event {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 1px;
    left: 0;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-inner--has-sync {
    position: relative;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-right: 1.15em;
    padding-bottom: 0;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-sync-indicator {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 3;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event:hover,
.availability-calendar .fc-timegrid-event.availability-lesson-event:focus-visible {
    filter: brightness(0.97);
}

/* ----- Month dayGrid: GCal list row (dot + time + title), not filled pills ----- */
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event.availability-lesson-event,
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-block-event.availability-lesson-event,
.availability-calendar .fc-dayGridMonth-view .fc-h-event.availability-lesson-event {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ll-fc-event-text) !important;
    margin: 0 2px 1px !important;
    padding: 0 !important;
    display: block;
    width: calc(100% - 4px);
}

.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main,
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main-frame {
    background: transparent !important;
    color: var(--ll-fc-event-text) !important;
    padding: 0 2px !important;
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-inner--month {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
    padding: 1px 0;
    line-height: 1.25;
    color: var(--ll-fc-event-text);
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ll-fc-lesson-accent);
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event--practice .calendar-lesson-fc-event-dot {
    background: var(--ll-fc-practice-accent);
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event--thought .calendar-lesson-fc-event-dot {
    background: var(--ll-fc-thought-accent);
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-day-main {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: 500;
    color: var(--ll-fc-event-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event:hover,
.availability-calendar .fc-dayGridMonth-view .availability-lesson-event:focus-visible {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff) !important;
    filter: none;
    border-radius: 3px !important;
}

.availability-calendar .fc-more-link {
    color: #70757a !important;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: 500;
}

/* Prev / next: brand green (match Month pill / primary actions) */
.availability-calendar .fc .fc-button-primary.fc-prev-button,
.availability-calendar .fc .fc-button-primary.fc-next-button,
.availability-calendar .fc .fc-prev-button,
.availability-calendar .fc .fc-next-button,
.availability-calendar .fc-toolbar .fc-button.fc-prev-button,
.availability-calendar .fc-toolbar .fc-button.fc-next-button {
    background-color: var(--primary, #3fa85a) !important;
    background-image: none !important;
    border: 1px solid var(--primary, #3fa85a) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.availability-calendar .fc .fc-button-primary.fc-prev-button:hover,
.availability-calendar .fc .fc-button-primary.fc-next-button:hover,
.availability-calendar .fc .fc-prev-button:hover,
.availability-calendar .fc .fc-next-button:hover,
.availability-calendar .fc .fc-button-primary.fc-prev-button:focus-visible,
.availability-calendar .fc .fc-button-primary.fc-next-button:focus-visible,
.availability-calendar .fc .fc-prev-button:focus-visible,
.availability-calendar .fc .fc-next-button:focus-visible,
.availability-calendar .fc .fc-button-primary.fc-prev-button:active,
.availability-calendar .fc .fc-button-primary.fc-next-button:active {
    background-color: var(--primary-strong, #2d7a38) !important;
    background-image: none !important;
    border-color: var(--primary-strong, #2d7a38) !important;
    color: #ffffff !important;
}

.availability-calendar .fc .fc-prev-button .fc-icon,
.availability-calendar .fc .fc-next-button .fc-icon {
    color: #ffffff !important;
}

.availability-calendar .fc .fc-prev-button:disabled,
.availability-calendar .fc .fc-next-button:disabled {
    opacity: 0.45;
}

/* List view stays readable on light canvas if used */
.availability-calendar .fc-list {
    border: 1px solid var(--ll-fc-border);
    background: var(--ll-fc-page-bg);
}

.availability-calendar .fc-list-day-cushion {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff);
    color: var(--ll-fc-header-text);
    border-bottom: 1px solid var(--ll-fc-border);
}

.availability-calendar .fc-list-event td {
    border-color: var(--ll-fc-border);
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc-list-event-time {
    color: var(--ll-fc-axis-text);
}

.availability-calendar .fc-list-event-title > a {
    color: var(--ll-fc-header-text);
}

/* Mobile density: keep compact sizes but muted weights */
@media (max-width: 640px) {
    .availability-calendar .fc-timegrid-slot-label-cushion {
        font-weight: 400;
        color: var(--ll-fc-axis-text);
    }

    .availability-calendar .fc-col-header-cell-cushion {
        font-weight: 500;
        color: var(--ll-fc-header-text);
    }

    .availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
        color: var(--ll-fc-today-mark-text);
        min-width: 1.45em;
        min-height: 1.45em;
    }
}

/* ---- public/lessonlink-env-badges.css ---- */
.lessonlink-footer-badges {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 1;
}

/*
 * Toast-line dock — optional Demo chip only (Dev tools live in journey footer).
 */

/* Dev journey footer (WMB-style bottom link) */
.lessonlink-journey-footer-badges {
    display: none;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding:
        0.35rem 1rem
        calc(0.5rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

.lessonlink-journey-footer-badges--ask-dock {
    order: 2;
    gap: 0;
    margin: 0;
    padding: 0.1rem 0 0;
    pointer-events: none;
}

.lessonlink-journey-footer-badges__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    pointer-events: auto;
}

.lessonlink-journey-footer-badges.has-badges,
.lessonlink-journey-footer-badges:has(.lessonlink-dev-cache-panel) {
    display: flex;
    pointer-events: auto;
}

.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel__toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: inline;
    box-sizing: border-box;
    min-height: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-transform: none;
    color: #0f766e;
    white-space: nowrap;
}

.lessonlink-journey-footer-badges--ask-dock .lessonlink-dev-cache-panel__toggle,
.lessonlink-journey-footer-badges--student-caddie-dock .lessonlink-dev-cache-panel__toggle {
    min-height: 0;
    padding: 0;
    font-size: 0.65rem;
    line-height: 1.2;
}

.lessonlink-journey-footer-badges .lessonlink-portal-admin-panel__toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: inline;
    box-sizing: border-box;
    min-height: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-transform: none;
    color: #7c3aed;
    white-space: nowrap;
}

.lessonlink-journey-footer-badges--ask-dock .lessonlink-portal-admin-panel__toggle,
.lessonlink-journey-footer-badges--student-caddie-dock .lessonlink-portal-admin-panel__toggle {
    min-height: 0;
    padding: 0;
    font-size: 0.65rem;
    line-height: 1.2;
}

.lessonlink-journey-footer-badges--student-caddie-dock {
    order: 2;
    gap: 0;
    margin: 0;
    padding: 0.12rem 0 0;
    pointer-events: none;
}

.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel__toggle--update {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #dc2626;
    font-weight: 700;
}

.lessonlink-toast-line-env {
    position: fixed;
    left: 50%;
    bottom: var(--ask-toast-line-bottom, var(--ask-keyboard-inset, 0px));
    z-index: calc(var(--lessonlink-z-app-chrome, 1280) - 1);
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    box-sizing: border-box;
    width: min(100%, var(--app-shell-max-width, 520px));
    max-width: var(--app-shell-max-width, 520px);
    min-height: 0;
    padding: 2px 10px max(2px, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    pointer-events: none;
}

.lessonlink-toast-line-env:has(#lessonlink-sandbox-footer-badge:not([hidden])) {
    display: flex;
    min-height: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

.lessonlink-toast-line-env > * {
    pointer-events: auto;
}

.lessonlink-toast-line-env--ask-idle {
    min-height: calc(1.85rem + env(safe-area-inset-bottom, 0px));
    padding: 1px 8px max(1px, env(safe-area-inset-bottom, 0px));
}

.lessonlink-toast-line-env__leading,
.lessonlink-toast-line-env__trailing {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.lessonlink-toast-line-env__leading {
    grid-column: 1;
    justify-content: flex-start;
    justify-self: start;
}

.lessonlink-toast-line-env__trailing {
    grid-column: 2;
    justify-content: flex-end;
    justify-self: end;
}

.lessonlink-viewport-sim-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    margin: 0;
    padding: 2px 8px;
    overflow: hidden;
    border: 1px solid rgba(51, 65, 85, 0.28);
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.96);
    color: #334155;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    -webkit-user-select: none;
}

.lessonlink-viewport-sim-toggle:hover,
.lessonlink-viewport-sim-toggle:focus-visible {
    background: #e2e8f0;
    outline: none;
    box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.18);
}

.lessonlink-viewport-sim-toggle[hidden],
.lessonlink-viewport-sim-toggle.hidden {
    display: none !important;
}

.lessonlink-env-float {
    position: static;
    z-index: 1;
    max-width: none;
    box-sizing: border-box;
    pointer-events: none;
    display: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.lessonlink-env-float__badges,
.lessonlink-footer-badges {
    pointer-events: auto;
}

.lessonlink-env-float:has(#lessonlink-sandbox-footer-badge:not([hidden])) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lessonlink-env-float__badges {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 4px;
}

.lessonlink-sandbox-footer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    margin: 0;
    padding: 1px 6px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #0f766e;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid rgba(15, 118, 110, 0.34);
    border-radius: 999px;
    background: rgba(204, 251, 241, 0.92);
    pointer-events: auto;
    cursor: context-menu;
    user-select: none;
    -webkit-user-select: none;
}

.lessonlink-sandbox-footer-badge:hover,
.lessonlink-sandbox-footer-badge:focus-visible {
    background: rgba(153, 246, 228, 0.98);
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.lessonlink-sandbox-footer-menu {
    position: fixed;
    z-index: 100060;
    display: flex;
    flex-direction: column;
    min-width: 148px;
    padding: 4px;
    pointer-events: auto;
    border: 1px solid color-mix(in srgb, var(--border-default, #e5e7eb) 82%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card-strong, #ffffff) 96%, transparent);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.14),
        0 2px 8px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lessonlink-sandbox-footer-menu[hidden] {
    display: none !important;
}

.lessonlink-sandbox-footer-menu__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-primary, #0f172a);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.lessonlink-sandbox-footer-menu__item:hover,
.lessonlink-sandbox-footer-menu__item:focus-visible {
    background: color-mix(in srgb, rgba(15, 118, 110, 0.12) 72%, transparent);
    outline: none;
}

.lessonlink-sandbox-footer-menu__item--danger {
    color: #b91c1c;
}

.lessonlink-sandbox-footer-menu__item--danger:hover,
.lessonlink-sandbox-footer-menu__item--danger:focus-visible {
    background: rgba(254, 226, 226, 0.92);
}

.lessonlink-sandbox-footer-badge[hidden] {
    display: none !important;
}

.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel__toggle--update:hover,
.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel__toggle--update:focus-visible {
    background: transparent;
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

.lessonlink-dev-cache-panel__toggle--update.is-reloading {
    opacity: 0.72;
    cursor: wait;
    pointer-events: none;
}

.dialog-content--sandbox-welcome .dialog-message--rich {
    max-width: 34rem;
}

.sandbox-welcome-dialog {
    display: grid;
    gap: 12px;
}

.sandbox-welcome-dialog__lede,
.sandbox-welcome-dialog__hint,
.sandbox-welcome-dialog__actions-title {
    margin: 0;
    color: var(--text-secondary, #475569);
    line-height: 1.55;
}

.sandbox-welcome-dialog__chip-preview {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.sandbox-welcome-dialog__chip {
    pointer-events: none;
    cursor: default;
}

.sandbox-welcome-dialog__list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-primary, #0f172a);
    line-height: 1.55;
}

.sandbox-welcome-dialog__list li + li {
    margin-top: 8px;
}

/* ---- public/dev-cache-panel.css ---- */
.lessonlink-dev-cache-panel {
    position: fixed;
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    top: max(0.35rem, env(safe-area-inset-top, 0px));
    z-index: 100060;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    font: 12px/1.35 system-ui, -apple-system, Segoe UI, sans-serif;
    pointer-events: none;
}

/* Fallback mount on <html> stays hidden until relocated into the journey-footer Dev slot. */
.lessonlink-dev-cache-panel:not(.lessonlink-dev-cache-panel--in-title-bar):not(.lessonlink-dev-cache-panel--in-journey-footer) {
    visibility: hidden;
    pointer-events: none;
}

.lessonlink-dev-cache-panel--in-title-bar,
.lessonlink-dev-cache-panel--in-journey-footer {
    position: relative;
    right: auto;
    top: auto;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.28rem;
    font: inherit;
    pointer-events: auto;
    visibility: visible;
}

.lessonlink-dev-cache-panel--open {
    z-index: 100080;
    pointer-events: auto;
}

.lessonlink-dev-cache-panel__toggle,
.lessonlink-dev-cache-panel__actions button,
.lessonlink-dev-cache-stale-banner {
    pointer-events: auto;
}

.lessonlink-dev-cache-panel--indicator-hidden {
    display: none !important;
}

.lessonlink-dev-cache-panel__toggle {
    border: 0;
    background: transparent;
    color: #0f766e;
    border-radius: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-transform: none;
}

.lessonlink-dev-cache-panel__toggle.is-reloading {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.lessonlink-dev-cache-panel__toggle.is-reloading::before {
    content: '';
    width: 0.7em;
    height: 0.7em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: dev-cache-reload-spin 0.75s linear infinite;
}

@keyframes dev-cache-reload-spin {
    to { transform: rotate(360deg); }
}

/* Floating fallback / title-bar chip (not journey footer). */
.lessonlink-dev-cache-panel:not(.lessonlink-dev-cache-panel--in-journey-footer) .lessonlink-dev-cache-panel__toggle {
    border: 1px solid rgba(15, 118, 110, 0.35);
    background: rgba(255, 255, 255, 0.94);
    color: #0f766e;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.lessonlink-dev-cache-panel--in-journey-footer,
.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel {
    background: transparent;
}

.lessonlink-dev-cache-panel--in-journey-footer .lessonlink-dev-cache-panel__toggle,
.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel__toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-transform: none;
}

.lessonlink-dev-cache-panel:not(.lessonlink-dev-cache-panel--in-journey-footer) .lessonlink-dev-cache-panel__toggle--update {
    border-color: rgba(185, 28, 28, 0.5);
    background: rgba(254, 226, 226, 0.96);
    color: #b91c1c;
    box-shadow: 0 1px 4px rgba(185, 28, 28, 0.18);
}

.lessonlink-dev-cache-panel:not(.lessonlink-dev-cache-panel--in-journey-footer) .lessonlink-dev-cache-panel__toggle--update:hover {
    background: #fecaca;
}

.lessonlink-journey-footer-badges .lessonlink-dev-cache-panel__toggle--update {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #dc2626;
    font-weight: 700;
}

.lessonlink-dev-cache-panel__toggle:focus-visible,
.lessonlink-dev-cache-panel__actions button:focus-visible,
.lessonlink-dev-cache-stale-banner:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
}

.lessonlink-dev-cache-panel__toggle--update:focus-visible {
    outline-color: #b91c1c;
}

.lessonlink-dev-cache-panel__actions {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: 0;
    z-index: 100070;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(15, 118, 110, 0.25);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    min-width: 14rem;
    max-width: min(22rem, calc(100vw - 1.5rem));
}

/* Titlebar Dev tools — dropdown opens below the chip, left of Ask. */
.titlebar-action-slot--tools .lessonlink-dev-cache-panel {
    align-items: flex-start;
}

.titlebar-action-slot--tools .lessonlink-dev-cache-panel__actions,
.lessonlink-dev-cache-panel--in-title-bar .lessonlink-dev-cache-panel__actions {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
}

@media (max-width: 640px) {
    .lessonlink-dev-cache-panel--in-title-bar:not(.lessonlink-dev-cache-panel--in-journey-footer) .lessonlink-dev-cache-panel__actions {
        transform: scale(1.5);
        transform-origin: top left;
    }
}

.lessonlink-dev-cache-panel--in-journey-footer .lessonlink-dev-cache-panel__actions {
    top: auto;
    bottom: calc(100% + 0.28rem);
    left: 0;
    right: auto;
    transform: none;
    transform-origin: bottom left;
}

/* Toast-line dock (Demo chip only): open upward from the bottom-right chip. */
.lessonlink-toast-line-env .lessonlink-dev-cache-panel {
    align-items: flex-end;
}

.lessonlink-toast-line-env .lessonlink-dev-cache-panel__actions {
    top: auto;
    bottom: calc(100% + 6px);
    left: auto;
    right: 0;
}

.lessonlink-dev-cache-panel--open .lessonlink-dev-cache-panel__actions {
    display: flex;
}

.lessonlink-dev-cache-panel__actions button {
    border: 1px solid rgba(15, 118, 110, 0.2);
    background: #fff;
    color: #134e4a;
    border-radius: 0.35rem;
    padding: 0.28rem 0.45rem;
    text-align: left;
    cursor: pointer;
}

.lessonlink-dev-cache-panel__meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    color: #475569;
    font-size: 11px;
    padding: 0.1rem 0.2rem 0.2rem;
}

.lessonlink-dev-cache-panel__meta-line {
    display: block;
    white-space: nowrap;
}

.lessonlink-reload-progress {
    --text-primary: #17212b;
    --text-heading: #17212b;
    --text-secondary: #526171;
    color-scheme: light;
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(82vh, 48rem);
    margin: auto;
    padding: 1.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 1rem;
    background: #fff;
    color: #17212b;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    font: 14px/1.5 system-ui, -apple-system, Segoe UI, sans-serif;
    z-index: 100500;
}

.lessonlink-reload-progress::backdrop {
    background: rgba(10, 18, 27, 0.65);
}

.lessonlink-reload-progress__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.lessonlink-reload-progress h2 {
    margin: 0;
    font-size: 1.35rem;
}

.lessonlink-reload-progress__header p,
.lessonlink-reload-progress__note {
    margin: 0.2rem 0 0;
    color: #526171;
}

.lessonlink-reload-progress__header button {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

.lessonlink-reload-progress__summary {
    margin: 1.25rem 0 0.75rem;
    font-weight: 700;
}

.lessonlink-reload-progress__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lessonlink-reload-progress__steps li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
}

.lessonlink-reload-progress__steps li[data-state="active"] { color: #0f766e; font-weight: 700; }
.lessonlink-reload-progress__steps li[data-state="complete"] { color: #166534; }
.lessonlink-reload-progress__steps li[data-state="failed"] { color: #b91c1c; font-weight: 700; }

.lessonlink-reload-progress__mark {
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.7rem;
}

.lessonlink-reload-progress__steps li[data-state="active"] .lessonlink-reload-progress__mark::before { content: '…'; }
.lessonlink-reload-progress__steps li[data-state="complete"] .lessonlink-reload-progress__mark::before { content: '✓'; }
.lessonlink-reload-progress__steps li[data-state="failed"] .lessonlink-reload-progress__mark::before { content: '!'; }

.lessonlink-reload-progress__elapsed {
    margin: 1rem 0 0;
    font-variant-numeric: tabular-nums;
}

.lessonlink-reload-progress__note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.lessonlink-dev-cache-panel__meta-line--url {
    white-space: normal;
    word-break: break-all;
}

.lessonlink-dev-cache-stale-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.65rem;
    z-index: 10060;
    max-width: min(34rem, calc(100vw - 1rem));
    border: 1px solid #b45309;
    background: #fff7ed;
    color: #9a3412;
    border-radius: 0.5rem;
    padding: 0.45rem 0.7rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    cursor: pointer;
    text-align: center;
}

.lessonlink-dev-cache-stale-banner[hidden] {
    display: none !important;
}

/* ---- public/portal-admin-panel.css ---- */
.lessonlink-portal-admin-panel {
    position: fixed;
    right: max(0.5rem, env(safe-area-inset-right, 0px));
    top: max(0.35rem, env(safe-area-inset-top, 0px));
    z-index: 100060;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    font: 12px/1.35 system-ui, -apple-system, Segoe UI, sans-serif;
    pointer-events: none;
}

.lessonlink-portal-admin-panel--hidden {
    display: none !important;
}

.lessonlink-portal-admin-panel:not(.lessonlink-portal-admin-panel--in-journey-footer) {
    visibility: hidden;
    pointer-events: none;
}

.lessonlink-portal-admin-panel--in-journey-footer {
    position: relative;
    right: auto;
    top: auto;
    z-index: auto;
    flex-direction: row;
    align-items: center;
    gap: 0.28rem;
    font: inherit;
    pointer-events: auto;
    visibility: visible;
    background: transparent;
}

.lessonlink-portal-admin-panel--in-journey-footer,
.lessonlink-journey-footer-badges .lessonlink-portal-admin-panel {
    background: transparent;
}

.lessonlink-portal-admin-panel--open {
    z-index: 100080;
    pointer-events: auto;
}

.lessonlink-portal-admin-panel__toggle,
.lessonlink-portal-admin-panel__action {
    pointer-events: auto;
}

.lessonlink-portal-admin-panel__toggle {
    border: 0;
    background: transparent;
    color: #7c3aed;
    border-radius: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-transform: none;
    appearance: none;
    -webkit-appearance: none;
    display: inline;
    box-sizing: border-box;
    min-height: 0;
}

.lessonlink-portal-admin-panel--in-journey-footer .lessonlink-portal-admin-panel__toggle,
.lessonlink-journey-footer-badges .lessonlink-portal-admin-panel__toggle {
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 0.14em;
    text-transform: none;
    color: #7c3aed;
}

.lessonlink-portal-admin-panel__toggle:focus-visible,
.lessonlink-portal-admin-panel__action:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.lessonlink-portal-admin-panel__actions {
    display: none;
    position: absolute;
    top: auto;
    bottom: calc(100% + 0.28rem);
    left: 0;
    right: auto;
    z-index: 100070;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.45rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(124, 58, 237, 0.25);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
    min-width: 12rem;
    max-width: min(22rem, calc(100vw - 1.5rem));
}

.lessonlink-portal-admin-panel--open .lessonlink-portal-admin-panel__actions {
    display: flex;
}

.lessonlink-portal-admin-panel__action {
    border: 0;
    background: transparent;
    color: #1e293b;
    border-radius: 0.35rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.lessonlink-portal-admin-panel__action:hover,
.lessonlink-portal-admin-panel__action:focus-visible {
    background: rgba(124, 58, 237, 0.08);
}

.lessonlink-portal-admin-panel__action.hidden,
.lessonlink-portal-admin-panel__action[hidden] {
    display: none !important;
}

.lessonlink-journey-footer-badges.has-badges:has(.lessonlink-portal-admin-panel:not(.lessonlink-portal-admin-panel--hidden)),
.lessonlink-journey-footer-badges:has(.lessonlink-portal-admin-panel:not(.lessonlink-portal-admin-panel--hidden)) {
    display: flex;
    pointer-events: auto;
}

.lessonlink-journey-footer-badges--ask-dock.has-badges,
.lessonlink-journey-footer-badges--student-caddie-dock.has-badges {
    gap: 0.5rem;
}

/* ---- public/style.css ---- */
/* ---- public/style-layers.css ---- */
/* ---- public/scrollbar-hidden.css ---- */
/*
 * Hide visible scrollbars app-wide; overflow scrolling unchanged
 * (mouse wheel, trackpad, touch swipe, keyboard Page/arrow keys).
 */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}


/*
 * ============================================================================
 * LessonCaddie UI layer stack (split from style.css — FND-001)
 * ============================================================================
 * Layer inventory: docs/ui-layer-inventory.md
 *
 * PAGE (not a numbered layer): primary route content — #app, .home-panel,
 * .today-shell, lesson workspace main column. Default stacking context.
 *
 * Layer types (data-lessonlink-layer on roots that still use the registry):
 *   modal · drawer · sheet · anchor · blocking · toast · coachmark
 *   (Legacy modal variant compact|window|full is retired for instructor stack surfaces.)
 *
 * Z-index tokens — single source of truth; legacy rules in style.css should use var(--lessonlink-z-*).
 *
 * Optional BEM on layer roots (alongside data-lessonlink-layer):
 *   .lessonlink-layer.lessonlink-layer--modal | --drawer | --sheet | --anchor | --blocking | --toast (admin modals use --modal)
 *
 * Admin app (public/admin): separate surface; see migration plan MOD-ADM-* rows.
 * ============================================================================
 */

:root {
    --lessonlink-z-drawer: 1240;
    --lessonlink-z-drawer-reach: 1800;
    --lessonlink-z-modal-global: 1250;
    /* Titlebar chrome: above global modals clipped to .app-shell-main so profile actions stay usable */
    --lessonlink-z-app-chrome: 1280;
    /* Immersive swing player + its bottom sheets (above attach menus / Capture Video modal). */
    --lessonlink-z-swing-analysis-player: calc(var(--lessonlink-z-app-chrome) + 60);
    --lessonlink-z-swing-analysis-sheet: calc(var(--lessonlink-z-app-chrome) + 80);
    --lessonlink-z-blocking: 2000;
    --lessonlink-z-toast: 100100;
    --lessonlink-z-dialog-helper: 10000;
    /* Fixed children (e.g. reCAPTCHA) that must sit above dialog-helper but below toast */
    --lessonlink-z-dialog-ancillary: 10050;
    --lessonlink-z-modal-record-audio: 58;
    --lessonlink-z-modal-record-notes: 60;
    --lessonlink-z-playbook-ai: 1100;
    --lessonlink-z-playbook-system: 1110;
    --lessonlink-z-playbook-library-link: 1115;
    --lessonlink-z-anchor: 1000;
}

/*
 * Optional BEM on layer roots (with data-lessonlink-layer):
 *   .lessonlink-layer.lessonlink-layer--modal | --drawer | --sheet | --anchor | --blocking | --toast
 */
.lessonlink-layer {
    box-sizing: border-box;
}

/* Declared bands — drop redundant z-index on the same node in style.css when both apply. */
[data-lessonlink-layer="blocking"] {
    z-index: var(--lessonlink-z-blocking);
}

[data-lessonlink-layer="toast"].toast,
.toast[data-lessonlink-layer="toast"] {
    z-index: var(--lessonlink-z-toast);
}

/* Immersive video player covers app titlebar while open (back control lives in surface header). */
[data-lessonlink-layer-id="swing-analysis-player"] {
    z-index: var(--lessonlink-z-swing-analysis-player);
}

/* Modal band — z only on layer roots (see style.css for layout chrome). */
.email-panel-overlay.email-panel-overlay--global-modal {
    z-index: var(--lessonlink-z-modal-global);
}

/* Full-screen capture overlay uses modal data attrs without --global-modal-full layout class */
.email-panel-overlay[data-lessonlink-layer-id="record-video"] {
    z-index: var(--lessonlink-z-modal-global);
}

[data-lessonlink-layer-id="record-audio"] {
    z-index: var(--lessonlink-z-modal-record-audio);
}

[data-lessonlink-layer-id="record-notes"] {
    z-index: var(--lessonlink-z-modal-record-notes);
}

[data-lessonlink-layer-id="playbook-system-editor"] {
    z-index: var(--lessonlink-z-playbook-system);
}

[data-lessonlink-layer-id="playbook-library-link"] {
    z-index: var(--lessonlink-z-playbook-library-link);
}

/* Add-to-Lesson chooser covers titlebar/menu + Ask chrome (body-mounted fixed overlay). */
[data-lessonlink-layer-id="staged-media-attach"] {
    z-index: calc(var(--lessonlink-z-app-chrome, 1280) + 20);
}

[data-lessonlink-layer-id="playbook-ai-helper"] {
    z-index: var(--lessonlink-z-playbook-ai);
}

.dialog-overlay[data-lessonlink-layer="modal"] {
    z-index: var(--lessonlink-z-dialog-helper);
}

/* Titlebar profile menu — lesson workspace anchor popovers keep local stacking in style.css */
#titlebar-profile-menu[data-lessonlink-layer="anchor"] {
    z-index: var(--lessonlink-z-anchor);
}

/* Lesson schedule datetime popover — portaled under <html> while open (see theme-overrides). */
#lessonlink-datetime-popover-root {
    z-index: var(--lessonlink-z-dialog-ancillary, 10050);
}

/* Bottom drawers: backdrop + anchored sheet. Pair .lessonlink-drawer-overlay with child .lessonlink-drawer. */
.lessonlink-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--lessonlink-z-drawer);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--ll-drawer-padding-y) var(--ll-drawer-padding-x);
    padding-bottom: max(var(--ll-drawer-padding-y), env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 180ms ease;
}

.lessonlink-drawer-overlay[hidden] {
    display: none;
}

.lessonlink-drawer-overlay.is-open {
    opacity: 1;
}

.lessonlink-drawer {
    width: min(100%, 460px);
    max-height: calc(100vh - (var(--ll-drawer-padding-y) * 2));
    max-height: calc(100dvh - (var(--ll-drawer-padding-y) * 2));
    overflow-y: auto;
    padding: var(--ll-drawer-padding-y) var(--ll-drawer-padding-x) calc(var(--ll-drawer-padding-y) + env(safe-area-inset-bottom));
    border: 1px solid var(--stroke);
    border-radius: 24px 24px 18px 18px;
    background: var(--surface);
    box-shadow: 0 -18px 46px rgba(15, 23, 42, 0.25);
    transform: translateY(110%);
    transition: transform 200ms ease;
}

.lessonlink-drawer-overlay.is-open .lessonlink-drawer {
    transform: translateY(0);
}

/* Reach sheet: keep id hook + stack above global modals when both could exist */
.contact-reach-sheet-overlay.lessonlink-drawer-overlay {
    z-index: var(--lessonlink-z-drawer-reach);
}

.media-share-sheet-overlay.lessonlink-drawer-overlay {
    z-index: var(--lessonlink-z-drawer-reach);
}

.contact-reach-sheet-handle {
    display: block;
    width: 100%;
    margin: 0 0 var(--ll-space-3);
    padding: 10px 0 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.contact-reach-sheet-handle::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto;
    border-radius: 999px;
    background: var(--border-subtle);
}

.contact-reach-sheet-handle:hover::before,
.contact-reach-sheet-handle:focus-visible::before {
    background: color-mix(in srgb, var(--ink) 28%, var(--border-subtle));
}

.contact-reach-sheet-handle:focus-visible {
    outline: none;
}

.contact-reach-sheet-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin-bottom: var(--ll-space-3);
}

.contact-reach-sheet-header h3 {
    margin: 0;
    color: var(--ink);
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
}

.contact-reach-sheet-subtitle {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
}

.contact-reach-sheet-actions {
    display: grid;
    gap: var(--ll-space-2);
}

.contact-reach-sheet-option {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: var(--ll-space-3);
    padding: var(--ll-sheet-padding-y) var(--ll-sheet-padding-x);
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--ink);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    text-align: left;
    text-decoration: none;
}

.contact-reach-sheet-option--hero {
    min-height: 58px;
    border-color: color-mix(in srgb, var(--brand) 54%, var(--stroke));
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, var(--surface)), var(--bg-elevated));
    color: var(--primary-strong);
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
}

.contact-reach-sheet-option:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--brand) 44%, var(--stroke));
    text-decoration: none;
}

.contact-reach-sheet-option:disabled,
.contact-reach-sheet-option[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.52;
}

.contact-reach-sheet-option.is-loading {
    cursor: wait;
    opacity: 0.72;
}

.contact-reach-sheet-option-icon {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(63, 168, 90, 0.12);
    color: var(--primary-strong);
    flex: 0 0 auto;
}

.contact-reach-sheet-option-status {
    margin-left: auto;
    color: var(--muted);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
}


/* CSS manifest — @see docs/css-architecture.md */
/* ---- public/style/tokens.css ---- */
/* Canonical tokens — Instructor dark default; Student light via [data-theme] */

:root {
    color-scheme: dark;





    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;
    /* Outer shell fills the viewport; only device safe-areas inset inside it. */
    --app-inline-inset-start: env(safe-area-inset-left, 0px);
    --app-inline-inset-end: env(safe-area-inset-right, 0px);
    --app-page-pad-block: env(safe-area-inset-top, 0px);
    --app-page-pad-block-end: env(safe-area-inset-bottom, 0px);
    --app-view-stack-gap: 4px;
    /* Fixed overlays sit on the viewport; clear in-shell titlebar (Ask icon up to 64px + padding + shell top pad). */
    --dialog-top-offset: max(100px, calc(env(safe-area-inset-top, 0px) + 96px));

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.82rem;
    --font-size-md: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.35rem;
    --line-tight: 1.2;
    --line-normal: 1.45;
    --line-relaxed: 1.6;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --app-button-max-width: 180px;
    /* Instructor /app column fills the viewport. Phone sim still frames 375px. */
    --app-shell-max-width: 100%;
    --app-shell-column-inset: 0px;
    --app-shell-backout: var(--bg, #0b1220);
    --app-page-fill:
        radial-gradient(circle at top left, var(--bg-glow-a), transparent 30%),
        radial-gradient(circle at bottom right, var(--bg-glow-b), transparent 35%),
        linear-gradient(160deg, var(--bg), var(--bg-accent));

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;

    --shadow-sm: 0 8px 22px rgba(43, 58, 46, 0.1);
    --shadow-md: 0 16px 38px rgba(43, 58, 46, 0.14);
    --shadow-lg: 0 22px 50px rgba(43, 58, 46, 0.12);
    --shadow-dialog: 0 28px 70px rgba(29, 49, 44, 0.22);

    --motion-fast: 160ms;
    --motion-base: 220ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);


    --radius: 28px;

    /* Disclosure: accordion chevrons fade to this opacity when expanded (see disclosure language block) */
    --ll-disclosure-accordion-chevron-expanded-opacity: 0.16;
    --ll-disclosure-chevron-size: 1.125rem;
    --ll-disclosure-chevron-color: color-mix(in srgb, var(--text-secondary, #94a3b8) 88%, transparent);
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

/* ============================================================
 * LessonCaddie density / layout tokens  ·  FND-DEN-001
 * ============================================================
 *
 * Use --ll-* tokens for all density-aware new code.
 * The existing --space-* scale remains a compatibility alias
 * while individual components migrate across phases.
 *
 * Compact-mode override pattern (future):
 *   [data-density="compact"] { --ll-density-scale: 0.875; }
 *
 * Token families:
 *   --ll-space-*        spacing scale (4px grid)
 *   --ll-page-*         safe-area-aware page edge insets
 *   --ll-card-*         surface card padding / gap / radius
 *   --ll-panel-*        content panel padding / gap
 *   --ll-toolbar-*      chrome bar heights / padding
 *   --ll-nav-*          pill navigation heights
 *   --ll-list-*         list container gap / row sizing
 *   --ll-composer-*     search / ask bar padding
 *   --ll-modal-*        overlay gutter safe-area tokens
 *   --ll-sheet-*        bottom sheet padding
 *   --ll-drawer-*       bottom drawer padding
 *   --ll-touch-*        minimum touch target sizes
 *   --ll-line-*         workflow typography line-heights
 * ============================================================ */
:root {
    /* Density scale multiplier.
       1 = default layout; reduce (e.g. 0.875) for compact mode.
       Components that support density can scale their spacings
       by calc(var(--ll-density-scale) * <base>) in later phases. */
    --ll-density-scale: 1;

    /* Spacing scale — parallel to --space-* for migration clarity.
       Values use the same 4px grid as --space-*. */
    --ll-space-0: 0px;
    --ll-space-1: 4px;
    --ll-space-2: 8px;
    --ll-space-3: 12px;
    --ll-space-4: 16px;
    --ll-space-5: 20px;
    --ll-space-6: 24px;
    --ll-space-7: 28px;
    --ll-space-8: 32px;
    --ll-space-9: 40px;
    --ll-space-10: 48px;

    /* Mobile safe-area + page edge tokens.
       Consumed by .app-shell padding and fullscreen topbars in Phase 2. */
    --ll-page-pad-x-start: max(var(--ll-space-2), env(safe-area-inset-left, 0px));
    --ll-page-pad-x-end: max(var(--ll-space-2), env(safe-area-inset-right, 0px));
    --ll-page-pad-top: max(6px, env(safe-area-inset-top, 0px));
    --ll-page-pad-bottom: max(var(--ll-space-2), env(safe-area-inset-bottom, 0px));

    /* View / section stacking gaps */
    --ll-view-gap: 4px;
    --ll-section-gap: var(--ll-space-2);

    /* Touch targets — primary targets must never fall below --ll-touch-target */
    --ll-touch-target: 44px;
    --ll-touch-target-compact: 40px;

    /* Card tokens.
       Current values match .common-card defaults; tighten in Phase 3. */
    --ll-card-padding-x: var(--ll-space-4);
    --ll-card-padding-y: var(--ll-space-3);
    --ll-card-gap: var(--ll-space-3);
    --ll-card-radius: var(--radius-lg);

    /* Panel tokens.
       Fullscreen panels / contact editor / lesson workspace. */
    --ll-panel-padding-x: var(--ll-space-4);
    --ll-panel-padding-y: var(--ll-space-3);
    --ll-panel-gap: var(--ll-space-4);

    /* Toolbar / navigation chrome */
    --ll-toolbar-height: var(--ll-touch-target);
    --ll-toolbar-padding-y: 6px;
    --ll-nav-height: var(--ll-touch-target);

    /* List / row tokens */
    --ll-list-gap: var(--ll-space-2);
    --ll-list-row-height: var(--ll-touch-target);
    --ll-list-row-padding-x: 10px;
    --ll-list-row-padding-y: var(--ll-space-2);

    /* Composer / search / ask bar */
    --ll-composer-padding-x: 10px;
    --ll-composer-padding-y: 6px;

    /* Modal / overlay gutter tokens.
       Consumed by .dialog-overlay, .email-panel-overlay etc in Phase 5. */
    --ll-modal-gutter-x: max(10px, env(safe-area-inset-left, 0px));
    --ll-modal-gutter-x-end: max(10px, env(safe-area-inset-right, 0px));
    --ll-modal-gutter-y-bottom: max(10px, env(safe-area-inset-bottom, 0px));

    /* Sheet tokens (bottom sheets, contact editor, lesson dialog) */
    --ll-sheet-padding-x: var(--ll-space-3);
    --ll-sheet-padding-y: 10px;

    /* Drawer tokens (bottom drawers, reach sheet) */
    --ll-drawer-padding-x: var(--ll-space-4);
    --ll-drawer-padding-y: 10px;

    /* Workflow typography line-heights.
       Use --line-* (relaxed / normal / tight) for prose and marketing;
       use --ll-line-* for dense mobile workflow UI. */
    --ll-line-title: 1.12;
    --ll-line-body: 1.35;
    --ll-line-helper: 1.35;
    --ll-line-meta: 1.2;
    --ll-line-list: 1.2;
}

/* ============================================================
 * LessonCaddie typography tokens · FND-TYP-001
 * ============================================================
 * Semantic type roles — @see docs/typography-spec.md
 *
 * Use --ll-type-{role}-{size|weight|line|tracking} or .ll-type-{role}
 * utility classes. Size primitives (--font-size-*) remain for legacy code.
 *
 * Line-heights resolve from --ll-line-* above (FND-DEN-001).
 * ============================================================ */
:root {
    --ll-type-display-size: clamp(1.375rem, 3.5vw, 1.5rem);
    --ll-type-display-weight: var(--weight-bold);
    --ll-type-display-line: var(--ll-line-title);

    --ll-type-title-size: 1.125rem;
    --ll-type-title-weight: var(--weight-bold);
    --ll-type-title-line: var(--ll-line-title);
    --ll-type-title-tracking: -0.015em;

    --ll-type-heading-size: 1rem;
    --ll-type-heading-weight: var(--weight-semibold);
    --ll-type-heading-line: var(--ll-line-body);

    --ll-type-body-size: 0.9375rem;
    --ll-type-body-weight: 400;
    --ll-type-body-line: var(--ll-line-body);

    --ll-type-body-sm-size: 0.875rem;
    --ll-type-body-sm-weight: 400;
    --ll-type-body-sm-line: var(--ll-line-body);

    --ll-type-label-size: 0.8125rem;
    --ll-type-label-weight: var(--weight-semibold);
    --ll-type-label-line: var(--ll-line-list);

    --ll-type-meta-size: var(--font-size-xs);
    --ll-type-meta-weight: var(--weight-medium);
    --ll-type-meta-line: var(--ll-line-meta);

    --ll-type-micro-size: 0.6875rem;
    --ll-type-micro-weight: var(--weight-semibold);
    --ll-type-micro-line: var(--ll-line-meta);

    --ll-type-section-tracking: 0.04em;
}

/* ============================================================
 * LessonCaddie density tokens · MOBILE OVERRIDES  (FND-DEN-001)
 * ============================================================
 * Tighten card/panel/drawer surfaces on phone widths so that the
 * semantic --ll-* tokens deliver the mobile density savings the
 * audit plan recommends without changing desktop layout.
 *
 * Selectors that consume --ll-card-*, --ll-panel-*, --ll-drawer-*
 * pick these values up automatically (.common-card, .summary-card,
 * .email-panel, .lesson-dialog, .lessonlink-drawer, etc.).
 * ============================================================ */
@media (max-width: 767.98px) {
    :root {
        /* Card surfaces: 16/12 → 12/10, gap 12 → 8 */
        --ll-card-padding-x: var(--ll-space-3);
        --ll-card-padding-y: 10px;
        --ll-card-gap: var(--ll-space-2);

        /* Panel surfaces: 16/12 → 12/10, gap 16 → 8 */
        --ll-panel-padding-x: var(--ll-space-3);
        --ll-panel-padding-y: 10px;
        --ll-panel-gap: var(--ll-space-2);

        /* Drawer chrome: 16/10 → 12/10 */
        --ll-drawer-padding-x: var(--ll-space-3);
    }
}

/* Modern Golf Tech semantic color tokens — Instructor dark is the baseline. */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    --bg-main: #0c1218;
    --bg-card: #141c24;
    --bg-elevated: #1a232d;
    --bg-surface-quiet: #101820;

    /* Accent role system — quiet surfaces + loud actions */
    --accent-capture: #c4564a;
    --accent-capture-strong: #a84338;
    --accent-capture-soft: rgba(196, 86, 74, 0.14);
    --accent-capture-border: rgba(196, 86, 74, 0.38);

    --accent-success: #3f8f58;
    --accent-success-strong: #4da86a;
    --accent-success-soft: rgba(77, 168, 106, 0.12);
    --accent-success-border: rgba(77, 168, 106, 0.28);

    --accent-ai: #c4a35a;
    --accent-ai-strong: #d4b872;
    --accent-ai-soft: rgba(196, 163, 90, 0.11);
    --accent-ai-border: rgba(196, 163, 90, 0.26);
    --accent-ai-glow: rgba(196, 163, 90, 0.16);

    --accent-info: #6eb4c8;
    --accent-info-strong: #85c5d6;
    --accent-info-soft: rgba(110, 180, 200, 0.1);
    --accent-info-border: rgba(110, 180, 200, 0.24);

    --accent-share: #9a87c9;
    --accent-share-strong: #b09fd8;
    --accent-share-soft: rgba(154, 135, 201, 0.11);
    --accent-share-border: rgba(154, 135, 201, 0.26);

    --accent-neutral: #8a96a6;
    --accent-neutral-soft: rgba(138, 150, 166, 0.1);
    --accent-neutral-border: rgba(138, 150, 166, 0.2);

    /* Legacy aliases — green reserved for success/completion */
    --primary: var(--accent-success);
    --primary-strong: var(--accent-success-strong);
    --accent: var(--accent-ai);

    --text-primary: #e8e4dc;
    --text-secondary: #9aa8b6;
    --text-muted: #8fa3b6;
    --text-heading: #f2ede4;
    --text-heading-warm: #ebe3d2;

    --border-subtle: rgba(255, 255, 255, 0.07);
    --border-quiet: rgba(255, 255, 255, 0.05);

    --radius-lg: 16px;
    --radius-md: 12px;

    --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.32);
    --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.36);

    --glow-none: none;
    --glow-subtle: 0 4px 14px rgba(0, 0, 0, 0.28);
    --glow-action: 0 10px 26px rgba(196, 86, 74, 0.22);
    --glow-success: 0 8px 20px rgba(77, 168, 106, 0.16);
    --glow-ai: 0 8px 22px rgba(196, 163, 90, 0.14);
    --glow-info: 0 6px 18px rgba(110, 180, 200, 0.12);

    --gradient-surface-quiet: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 48%);
    --gradient-action: linear-gradient(180deg, color-mix(in srgb, var(--accent-capture) 94%, #fff 6%), var(--accent-capture-strong));
    --gradient-success: linear-gradient(180deg, color-mix(in srgb, var(--accent-success-strong) 88%, #fff 12%), var(--accent-success));
    --gradient-ai: linear-gradient(180deg, color-mix(in srgb, var(--accent-ai-strong) 82%, transparent), color-mix(in srgb, var(--accent-ai) 72%, transparent));

    --bg: var(--bg-main);
    --bg-accent: #0e161e;
    --bg-glow-a: rgba(110, 180, 200, 0.04);
    --bg-glow-b: rgba(196, 163, 90, 0.03);
    --surface: var(--bg-card);
    --surface-strong: var(--bg-elevated);
    --surface-page: var(--bg-main);
    --surface-primary: var(--bg-card);
    --surface-secondary: var(--bg-surface-quiet);
    --surface-elevated: var(--bg-elevated);
    --surface-page-accent: #121c26;
    --surface-card: var(--bg-card);
    --surface-card-strong: var(--bg-elevated);
    --surface-soft: rgba(31, 42, 54, 0.78);
    --action-primary: var(--primary);
    --action-primary-text: #ffffff;
    --action-secondary: rgba(255, 255, 255, 0.04);
    --shadow-card: var(--shadow-soft);
    --status-success: var(--accent-success);
    --status-warning: var(--accent-ai);
    --status-danger: var(--color-danger-600, #dc2626);
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --text: var(--text-primary);
    --color-muted: var(--text-secondary);
    --text-link: var(--accent-info-strong);
    --brand: var(--primary);
    --brand-deep: #1f5a2a;
    --brand-primary: var(--primary);
    --brand-strong: var(--primary-strong);
    --brand-soft: var(--accent-success-soft);
    --accent-warm: var(--accent-ai);
    --stroke: var(--border-subtle);
    --border-default: var(--border-subtle);
    --border-strong: rgba(255, 255, 255, 0.12);
    --focus-ring: rgba(110, 180, 200, 0.32);
    --hover-bg: rgba(255, 255, 255, 0.06);
    --shadow: var(--shadow-soft);
    --shadow-sm: var(--shadow-soft);
    --shadow-md: var(--shadow-panel);
    --shadow-lg: var(--shadow-elevated);
    --shadow-dialog: 0 28px 70px rgba(0, 0, 0, 0.58);
    --card-background: var(--bg-card);
    --banner-accent: var(--accent-info);
    --banner-glow: rgba(110, 180, 200, 0.1);
    --banner-bg-a: rgba(20, 28, 36, 0.98);
    --banner-bg-b: rgba(26, 35, 45, 0.96);
    --role-instructor-surface: rgba(20, 28, 36, 0.94);
    --role-student-surface: rgba(26, 35, 45, 0.94);
    --role-hub-surface: rgba(26, 35, 45, 0.94);
    --role-instructor-accent: var(--accent-success-soft);
    --role-student-accent: var(--accent-info-soft);
    --role-hub-accent: var(--accent-ai-soft);

    --lesson-surface-page: var(--bg-main);
    --lesson-surface-card: #161f28;
    --lesson-surface-card-strong: #1c2732;
    --lesson-surface-control: #222e3a;
    --lesson-border-subtle: var(--border-subtle);
    --lesson-border-strong: var(--accent-info-border);
    --lesson-header-text: var(--text-heading);
    --lesson-muted-text: var(--text-secondary);
    --lesson-selected: var(--accent-success-strong);

    /* Section identity rails */
    --section-rail-details: var(--accent-info);
    --section-rail-media: var(--accent-success-strong);
    --section-rail-summary: var(--accent-ai);
    --section-rail-sharing: var(--accent-share);
    --section-rail-capture: var(--accent-capture);
    --section-rail-neutral: var(--accent-neutral);
}

/* Student light foundation — override semantic values only; shared components stay the same. */
[data-theme="light"] {
    color-scheme: light;

    --bg-main: #f4f6f8;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-surface-quiet: #eef1f4;
    --bg-accent: #e8eef2;
    --bg-glow-a: rgba(15, 118, 110, 0.06);
    --bg-glow-b: rgba(15, 23, 32, 0.04);
    --app-shell-backout: #c5cbd3;
    --app-page-fill:
        radial-gradient(circle at top left, var(--bg-glow-a), transparent 30%),
        radial-gradient(circle at bottom right, var(--bg-glow-b), transparent 35%),
        linear-gradient(160deg, var(--bg), var(--bg-accent));

    --text-primary: #1a2330;
    --text-secondary: #5b6775;
    --text-muted: #6b7785;
    --text-heading: #121820;
    --text-heading-warm: #1c2430;

    --border-subtle: rgba(15, 23, 32, 0.1);
    --border-quiet: rgba(15, 23, 32, 0.06);
    --border-strong: rgba(15, 23, 32, 0.16);
    --border-default: var(--border-subtle);

    --shadow-soft: 0 2px 12px rgba(15, 23, 32, 0.08);
    --shadow-panel: 0 8px 24px rgba(15, 23, 32, 0.08);
    --shadow-elevated: 0 12px 32px rgba(15, 23, 32, 0.1);
    --shadow-dialog: 0 28px 70px rgba(15, 23, 32, 0.16);
    --shadow-card: var(--shadow-soft);
    --shadow: var(--shadow-soft);
    --shadow-sm: var(--shadow-soft);
    --shadow-md: var(--shadow-panel);
    --shadow-lg: var(--shadow-elevated);

    --focus-ring: rgba(15, 118, 110, 0.28);
    --hover-bg: rgba(15, 23, 32, 0.06);
    --action-secondary: rgba(15, 23, 32, 0.04);

    --surface: var(--bg-card);
    --surface-strong: var(--bg-elevated);
    --surface-page: var(--bg-main);
    --surface-primary: var(--bg-card);
    --surface-secondary: var(--bg-surface-quiet);
    --surface-elevated: var(--bg-elevated);
    --surface-page-accent: #e8eef2;
    --surface-card: var(--bg-card);
    --surface-card-strong: var(--bg-elevated);
    --surface-soft: rgba(255, 255, 255, 0.92);
    --ink: var(--text-primary);
    --muted: var(--text-secondary);
    --text: var(--text-primary);
    --color-muted: var(--text-secondary);
    --card-background: var(--bg-card);
    --stroke: var(--border-subtle);

    --glow-none: none;
    --glow-subtle: 0 4px 14px rgba(15, 23, 32, 0.08);
    --glow-action: 0 10px 26px rgba(196, 86, 74, 0.16);
    --glow-success: 0 8px 20px rgba(63, 143, 88, 0.14);
    --glow-ai: 0 8px 22px rgba(196, 163, 90, 0.12);
    --glow-info: 0 6px 18px rgba(15, 118, 110, 0.1);

    --gradient-surface-quiet: linear-gradient(180deg, rgba(15, 23, 32, 0.03), transparent 48%);
    --banner-bg-a: rgba(255, 255, 255, 0.98);
    --banner-bg-b: rgba(244, 246, 248, 0.96);
    --role-instructor-surface: rgba(255, 255, 255, 0.96);
    --role-student-surface: rgba(255, 255, 255, 0.96);
    --role-hub-surface: rgba(255, 255, 255, 0.96);

    --lesson-surface-page: var(--bg-main);
    --lesson-surface-card: #ffffff;
    --lesson-surface-card-strong: #f7f8fa;
    --lesson-surface-control: #f2f4f7;
    --lesson-border-subtle: var(--border-subtle);
    --lesson-header-text: var(--text-heading);
    --lesson-muted-text: var(--text-secondary);
}

/* Persona (not palette): Student density / readability only. */
[data-persona="student"] {
    --ll-type-body-size: 1rem;
    --ll-touch-target: 48px;
}

/* ---- public/style/theme-spinner.css ---- */
/* Canonical non-button loading ring. Button loading uses .button-spinner in buttons.css. */

@keyframes theme-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.theme-spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--brand) 25%, transparent);
    border-top-color: var(--brand-deep);
    animation: theme-spin 900ms linear infinite;
    flex: 0 0 auto;
}

.theme-spinner--sm {
    width: 22px;
    height: 22px;
    border-width: 2px;
}

.theme-spinner--boot {
    width: 2rem;
    height: 2rem;
    border-width: 2px;
}

.theme-spinner--md {
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
}

.theme-spinner--thumb {
    width: 28px;
    height: 28px;
    border-width: 3px;
}

.theme-spinner--overlay {
    width: 42px;
    height: 42px;
    border-width: 3px;
}

.theme-spinner--on-dark {
    border-color: color-mix(in srgb, #fff 25%, transparent);
    border-top-color: #fff;
}

.lesson-create-busy-overlay.is-delete-busy .theme-spinner {
    width: 80px;
    height: 80px;
    border-width: 5px;
}

/* Admin auth shell — teal ring on slate (same visual as legacy admin boot/login busy). */
.admin-auth-mount .theme-spinner:not(.theme-spinner--on-dark) {
    border-color: color-mix(in srgb, #334155 65%, transparent);
    border-top-color: #5eead4;
}

/* ---- public/style/base.css ---- */
/* Base / reset */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    overscroll-behavior: none;
}

body {
    margin: 0;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    background: var(--app-page-fill);
    color: var(--ink);
    line-height: var(--line-normal);
    letter-spacing: 0.01em;
}

html,
body {
    overflow-x: hidden;
    overscroll-behavior: none;
}

@supports (height: 100dvh) {
    html {
        height: 100dvh;
    }

    body {
        min-height: 100dvh;
        height: 100dvh;
    }
}

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

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-inline-start: 8px;
    background-color: currentColor;
    opacity: 0.72;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.8 4.8 10 9l4.2-4.2 1 1L11 10l4.2 4.2-1 1L10 11l-4.2 4.2-1-1L9 10 4.8 5.8l1-1Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.8 4.8 10 9l4.2-4.2 1 1L11 10l4.2 4.2-1 1L10 11l-4.2 4.2-1-1L9 10 4.8 5.8l1-1Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* Max-width scoped to toolbars — not all buttons (see docs/button-system.md) */
.media-controls-toolbar button,
.titlebar-actions button,
.lesson-workspace-quick-actions button {
    max-width: min(100%, var(--app-button-max-width));
}

a {
    color: var(--text-link);
}

/* --------------------------------------------------------------------------
   LessonCaddie disclosure language — one affordance per interaction type
   Chevrons: structural accordions / phase <details> only (subtle; fade when open)
   Menus: avatar / kebab / gear — never a dropdown chevron beside the avatar
   Pickers / inline fields: .ll-picker-trigger (rail dots), not chevrons
   -------------------------------------------------------------------------- */

.ll-disclosure-chevron--accordion,
.ll-disclosure-chevron.ll-disclosure-chevron--accordion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: var(--ll-disclosure-chevron-size);
    line-height: 1;
    color: var(--ll-disclosure-chevron-color);
    transition: opacity 0.2s ease, transform 0.18s ease;
}

.ll-disclosure-chevron--accordion i,
i.ll-disclosure-chevron--accordion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    line-height: 1;
    color: inherit;
    transition: opacity 0.2s ease, transform 0.18s ease;
}

/* Profile / sheet menu: ring communicates tap target (no chevron) */
.titlebar-avatar-trigger.ll-menu-trigger {
    padding: 6px;
    gap: 0;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.titlebar-avatar-trigger.ll-menu-trigger .titlebar-avatar-trigger__mark {
    transition: box-shadow 0.22s ease, transform 0.12s ease;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary, #0f172a) 9%, transparent);
}

[data-theme="light"] .titlebar-avatar-trigger.ll-menu-trigger .titlebar-avatar-trigger__mark {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text-primary, #1a2330) 18%, transparent);
}

.titlebar-avatar-trigger.ll-menu-trigger:hover .titlebar-avatar-trigger__mark,
.titlebar-avatar-trigger.ll-menu-trigger:focus-visible .titlebar-avatar-trigger__mark {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--brand) 52%, transparent),
        0 10px 28px color-mix(in srgb, var(--brand) 20%, transparent);
}

.titlebar-avatar-trigger.ll-menu-trigger[aria-expanded="true"] .titlebar-avatar-trigger__mark {
    box-shadow:
        0 0 0 2px var(--brand, #0f766e),
        0 12px 32px color-mix(in srgb, var(--brand) 26%, transparent);
}

/* Picker / inline expandable row — subtle “more” rail, not accordion chevron */
.lesson-tags-trigger.ll-picker-trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lesson-tags-trigger.ll-picker-trigger::after {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 4px;
    opacity: 0.38;
    background: radial-gradient(circle, currentColor 50%, transparent 52%) 0 50% / 4px 4px no-repeat,
        radial-gradient(circle, currentColor 50%, transparent 52%) 8px 50% / 4px 4px no-repeat,
        radial-gradient(circle, currentColor 50%, transparent 52%) 16px 50% / 4px 4px no-repeat;
}

.lesson-tags-trigger.ll-picker-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--border-subtle));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--brand) 24%, transparent),
        0 10px 26px color-mix(in srgb, var(--brand) 12%, transparent);
}

.lesson-tags-trigger.ll-picker-trigger[aria-expanded="true"]::after {
    opacity: 0.62;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.app-shell {
    max-width: var(--app-shell-max-width);
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    margin-inline: auto;
    padding:
        var(--app-page-pad-block) var(--app-inline-inset-end) var(--app-page-pad-block-end) var(--app-inline-inset-start);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    /* Phone viewport sim (375px frame) keys off this column, not 100vw. */
    container-type: inline-size;
    container-name: lessonlink-shell;
}

/* Main column + root-level overlays (Ask, App Feedback, lesson busy): below titlebar. */
.app-shell-main {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.view-root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    gap: var(--ll-view-gap);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Authenticated hub: titlebar already owns chrome — drop the extra view gap. */
body:has(header.titlebar.titlebar--lesson) .view-root {
    gap: 0;
}

.view-root>.today-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---- public/style/features/shared-misc.css ---- */
/* Feature: shared-misc.css */
/* === Responsive layer: compact viewports (<=767px) ===
   Canonical tokens live on :root above; here we only override for small screens
   so >=768px matches the prior desktop/tablet look. */
@media (max-width: 767.98px) {
    :root {
        --font-size-xs: 0.72rem;
        --font-size-sm: 0.8rem;
        --font-size-md: 0.9rem;
        --font-size-lg: 1.04rem;
        --font-size-xl: 1.22rem;

        /* FND-TYP-001 — Meta floor; do not shrink below outdoor-readability minimum */
        --ll-type-meta-size: max(0.75rem, var(--font-size-xs));
        --ll-type-body-size: max(0.9375rem, var(--font-size-md));
        --ll-type-body-sm-size: max(0.875rem, var(--font-size-sm));
        --ll-type-label-size: max(0.8125rem, var(--font-size-sm));
    }

    .view-root {
        gap: var(--app-view-stack-gap);
    }

    .titlebar:not(.titlebar--lesson) {
        padding: var(--ll-space-2) clamp(var(--ll-space-2), 3vw, var(--ll-space-3));
        margin-bottom: var(--ll-space-2);
        gap: var(--ll-space-2);
    }

    .titlebar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 4px;
    }

    /* Compact hub / lesson-flow header: single row; avoid wrap changing bar height. */
    header.titlebar.titlebar--lesson .titlebar-actions {
        flex-wrap: nowrap;
    }

    .dialog-overlay {
        padding: var(--dialog-top-offset) var(--ll-modal-gutter-x-end) var(--ll-modal-gutter-y-bottom) var(--ll-modal-gutter-x);
    }

    .dialog-content {
        padding: var(--ll-space-5);
        max-width: min(560px, calc(100vw - var(--ll-modal-gutter-x) - var(--ll-modal-gutter-x-end)));
        max-height: min(calc(100dvh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4)),
                calc(100vh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4)));
    }

    .dialog-content--profile-contact-verify {
        padding: 16px 18px;
    }

    .dialog-content.dialog-content--profile-contact-verify {
        max-height: none;
        overflow: visible;
    }

    .dialog-content--profile-contact-verify .panel-copy h2 {
        font-size: clamp(1.15rem, 5vw, 1.55rem);
    }

    .dialog-title {
        font-size: clamp(1.05rem, 4.2vw, var(--font-size-xl));
        margin-bottom: 10px;
    }

    .dialog-message {
        font-size: var(--font-size-sm);
        margin-bottom: 16px;
    }

    /* Tighter dashboard section gap on mobile. */
    .today-dashboard-section {
        gap: var(--ll-list-gap);
        /* 8px */
    }
}

body[data-app-surface="student"] .titlebar,
body[data-active-role="student"] .titlebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-student-surface) 86%, white), color-mix(in srgb, var(--surface-card) 88%, white));
}

body[data-app-surface="student"] .common-card,
body[data-active-role="student"] .common-card {
    border-color: color-mix(in srgb, var(--role-student-accent) 70%, var(--border-default));
}

body[data-app-surface="instructor"] .titlebar,
body[data-active-role="instructor"] .titlebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--role-instructor-surface) 86%, white), color-mix(in srgb, var(--surface-card) 88%, white));
}

body[data-app-surface="instructor"] .common-card,
body[data-active-role="instructor"] .common-card {
    border-color: color-mix(in srgb, var(--role-instructor-accent) 80%, var(--border-default));
}

.titlebar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(var(--ll-space-2), 2.4vw, var(--ll-space-4));
    margin-bottom: var(--ll-space-2);
    position: relative;
    /* Above global modals in .app-shell-main (z ~1250) and #app fullscreen shells; below reach (1800) / blocking */
    z-index: var(--lessonlink-z-app-chrome);
    padding: var(--ll-space-3) clamp(var(--ll-space-2), 3.8vw, var(--ll-space-4));
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border-default));
    border-radius: 0;
    background: linear-gradient(180deg, color-mix(in srgb, white 97%, var(--surface-card-strong)), color-mix(in srgb, var(--surface-card-strong) 92%, var(--surface-card)));
    box-shadow: none;
    backdrop-filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.titlebar-brand-wrap {
    /* Leading (Ask + brand) | flexible middle (lesson titles) | trailing actions. */
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: clamp(8px, 2.4vw, 12px);
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.titlebar-leading {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2.4vw, 12px);
    justify-content: flex-start;
    justify-self: start;
    min-width: 0;
}

.app-shell-menu-button {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--brand-deep);
    box-shadow: none;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.app-shell-menu-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.app-shell-menu-button:hover {
    background: color-mix(in srgb, var(--brand) 9%, transparent);
}

.app-shell-menu-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.app-shell-menu-button[hidden] {
    display: none !important;
}

.app-shell-search[hidden] {
    display: none !important;
}

.titlebar-center {
    /* Stretch search or lesson titles across the center column. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    justify-self: stretch;
    gap: clamp(6px, 1.5vw, 10px);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.titlebar-center > .app-shell-search,
.titlebar-center > .titlebar-lesson-util,
.titlebar-center > .titlebar-hub-panel-title,
.titlebar-center > .titlebar-session-context {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
}

.titlebar-hub-panel-title[hidden] {
    display: none !important;
}

.app-shell-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    box-shadow: none;
}

.app-shell-search>i {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.app-shell-search input {
    flex: 1 1 0%;
    width: 0;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: clamp(var(--ll-type-body-size), 3.8vw, var(--ll-type-title-size));
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
    cursor: text;
    caret-color: var(--text-primary);
}

.app-shell-search input::placeholder {
    color: color-mix(in srgb, var(--text-primary) 45%, transparent);
    opacity: 1;
}

.app-shell-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.app-shell-search__clear,
.app-shell-search__send,
.app-shell-search__mic {
    position: relative;
    flex-shrink: 0;
    width: var(--ll-touch-target-compact, 40px);
    height: var(--ll-touch-target-compact, 40px);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition:
        color 140ms ease,
        border-color 140ms ease,
        background 140ms ease;
}

.app-shell-search__clear::before,
.app-shell-search__send::before,
.app-shell-search__mic::before {
    content: '';
    position: absolute;
    inset: -4px;
}

.app-shell-search__clear[hidden],
.app-shell-search__send[hidden] {
    display: none !important;
}

.app-shell-search__clear {
    border-color: var(--border-subtle);
    background: rgba(255, 255, 255, 0.06);
}

.app-shell-search__send {
    color: var(--brand, #0d9488);
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.app-shell-search__clear:hover:not(:disabled),
.app-shell-search__send:hover:not(:disabled),
.app-shell-search__mic:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.08);
}

.app-shell-search__clear:disabled,
.app-shell-search__send:disabled,
.app-shell-search__mic:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.app-shell-search__mic {
    font-size: 0.85rem;
}

.app-shell-search__mic.is-listening {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.app-shell-search:focus-within,
.app-shell-search.app-shell-search--hint {
    border-color: var(--accent-info-border);
    box-shadow: 0 0 0 3px var(--accent-info-soft);
}

.app-shell-search-suggest {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: calc(var(--lessonlink-z-app-chrome, 50) + 8);
    max-height: min(36vh, 240px);
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--stroke));
    background: var(--surface-card, #fff);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.app-shell-search-suggest__scroller {
    max-height: min(36vh, 240px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app-shell-search-filter-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 3px 6px 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.app-shell-search-filter-hint[hidden] {
    display: none !important;
}

.app-shell-search-filter-hint__options {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.app-shell-search-filter-hint__options:hover,
.app-shell-search-filter-hint__options:focus-visible {
    color: color-mix(in srgb, var(--brand) 78%, var(--ink));
    outline: none;
}

#app-shell-search-filter-hint-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell-search-suggest__group {
    padding: 8px 0 6px;
}

.app-shell-search-suggest__group + .app-shell-search-suggest__group {
    border-top: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
}

.app-shell-search-suggest__label {
    padding: 4px 14px 6px;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    color: var(--text-muted);
}

.app-shell-search-suggest__row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
    text-align: left;
    cursor: pointer;
}

.app-shell-search-suggest__row:hover,
.app-shell-search-suggest__row:focus-visible {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-card));
    outline: none;
}

#today-lessons-list .today-dashboard-section--title-search-empty .today-recent-lessons__grid {
    display: none;
}

.app-shell-drawer-open {
    overflow: hidden;
}

.app-shell-drawer-overlay {
    position: absolute;
    inset: 0;
    z-index: calc(var(--lessonlink-z-app-chrome) + 20);
    display: block;
    background: rgba(15, 23, 42, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.app-shell-drawer-overlay[hidden] {
    display: none !important;
}

.app-shell-drawer-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.app-shell-drawer {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: 0;
    bottom: auto;
    width: fit-content;
    min-width: min(100%, 13.5rem);
    max-width: min(84%, 20rem);
    height: auto;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top, 0px)) - env(safe-area-inset-bottom, 0px));
    padding: 16px 14px 14px;
    background: var(--bg-elevated, var(--surface-card));
    border: 1px solid var(--border-subtle, var(--stroke));
    border-radius: 0 18px 18px 0;
    box-shadow: var(--shadow-panel, 24px 0 54px rgba(15, 23, 42, 0.45));
    transform: translateX(-102%);
    transition: transform 180ms ease;
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--text-primary);
}

.app-shell-drawer-overlay.is-open .app-shell-drawer {
    transform: translateX(0);
}

.app-shell-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    width: 100%;
    padding: 2px 2px 12px;
    box-sizing: border-box;
}

.app-shell-drawer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.app-shell-drawer__title {
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
    letter-spacing: var(--ll-type-section-tracking);
    color: var(--text-primary, var(--brand-deep));
    text-transform: uppercase;
}

.app-shell-drawer__version {
    font-size: var(--ll-type-meta-size);
    font-weight: 500;
    line-height: var(--ll-type-meta-line);
    letter-spacing: 0.02em;
    color: var(--text-muted);
    opacity: 0.88;
}

.app-shell-drawer__version[hidden] {
    display: none;
}

/* Drawer matches dark app chrome (elevated surface). */
.app-shell-drawer .app-shell-drawer__close {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--ll-touch-target, 44px);
    height: var(--ll-touch-target, 44px);
    border: 1px solid var(--border-subtle, var(--stroke));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong, var(--bg-elevated)) 92%, transparent);
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.app-shell-drawer .app-shell-drawer__close i {
    font-size: 1.15rem;
    font-weight: 700;
    color: inherit;
}

.app-shell-drawer .app-shell-drawer__close:hover,
.app-shell-drawer .app-shell-drawer__close:focus-visible {
    background: color-mix(in srgb, var(--surface-card-strong, var(--bg-elevated)) 98%, var(--brand-primary, var(--brand)) 4%);
    border-color: color-mix(in srgb, var(--stroke) 70%, var(--brand-primary, var(--brand)) 30%);
    color: var(--text-primary);
}

.app-shell-drawer .app-shell-drawer__close:hover i,
.app-shell-drawer .app-shell-drawer__close:focus-visible i {
    color: inherit;
}

.app-shell-drawer__nav {
    display: grid;
    gap: 4px;
    width: fit-content;
    min-width: 100%;
}

.app-shell-drawer__item {
    display: grid;
    grid-template-columns: 28px max-content auto;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    width: 100%;
    max-width: none;
    padding: 10px 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-size: 0.96rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.app-shell-drawer__item[hidden] {
    display: none !important;
}

.app-shell-drawer__item:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
    transform: translateX(2px);
}

.app-shell-drawer__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.app-shell-drawer__item.is-active {
    background: color-mix(in srgb, var(--brand-primary, var(--brand)) 16%, transparent);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--brand-primary, var(--brand));
}

.app-shell-drawer__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--brand-primary, var(--brand));
}

.app-shell-drawer__icon--app {
    overflow: hidden;
    border-radius: 6px;
}

.app-shell-drawer__app-icon {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.app-shell-drawer .app-shell-drawer__item>span:not(.home-pill-unread-badge) {
    color: inherit;
    opacity: 1;
}

.app-shell-drawer .app-shell-drawer__item .app-shell-drawer__icon {
    color: var(--brand-primary, var(--brand));
    opacity: 1;
}

.app-shell-drawer .app-shell-drawer__item.is-active .app-shell-drawer__icon,
.app-shell-drawer .app-shell-drawer__item:hover .app-shell-drawer__icon {
    color: var(--text-primary);
}

.app-shell-drawer__separator {
    height: 1px;
    width: 100%;
    margin: 8px 4px;
    background: color-mix(in srgb, var(--stroke) 78%, transparent);
}

.titlebar-trailing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: clamp(8px, 2vw, 12px);
    min-width: 0;
}

.titlebar-trailing .titlebar-actions {
    margin-left: 0;
}

.titlebar-default-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(8px, 2.4vw, 12px);
    min-width: 0;
    max-width: 100%;
}

.titlebar-lesson-util {
    display: none;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.titlebar-lesson-back {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.titlebar-lesson-back::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
}

.titlebar-lesson-back i {
    font-size: 1.12rem;
    line-height: 1;
    opacity: 1;
}

.titlebar-lesson-back-label {
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.titlebar-lesson-back-label[hidden] {
    display: none;
}

.titlebar-lesson-back:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.titlebar-lesson-titles {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: 0 4px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.titlebar-lesson-title-primary {
    margin: 0;
    font-size: clamp(0.85rem, 2.6vw, 1rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

@keyframes titlebar-recording-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.45;
        transform: scale(0.88);
    }
}

.titlebar-lesson-title-secondary {
    margin: 2px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.titlebar-lesson-title-secondary[hidden] {
    display: none;
}

.titlebar-messages[hidden] {
    display: none !important;
}

.titlebar-messages {
    display: none;
    box-sizing: border-box;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 6px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    line-height: 0;
}

.titlebar-messages:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.titlebar-messages__icon-wrap {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.titlebar-messages__icon-wrap>i {
    font-size: 1rem;
}

.titlebar-logo {
    display: block;
    height: clamp(32px, 6vw, 48px);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
}

.titlebar-logo-button {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 10px;
}

.titlebar-logo-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

.titlebar-actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
    margin-left: auto;
    flex: 0 0 auto;
}

/* Leading titlebar action slot (Ask shortcut or Ask-surface calendar). Hidden when empty. */
.titlebar-action-slot--placeholder {
    display: none;
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
    width: 32px;
    min-width: 32px;
    min-height: var(--titlebar-compact-row, 44px);
    height: var(--titlebar-compact-row, 44px);
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    pointer-events: none;
}

.titlebar-profile-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* menu-shell is for dropdown panels — not the titlebar avatar host wrapper. */
.titlebar-profile-menu.menu-shell {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
}

.titlebar-avatar-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    line-height: 0;
    position: relative;
}

.titlebar-role-indicator-shell {
    position: static;
    transform: none;
    width: auto;
    margin: 0;
    min-height: 0;
    pointer-events: none;
}

.titlebar-role-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    box-shadow: none;
    font-size: var(--ll-type-micro-size);
    font-weight: var(--ll-type-micro-weight);
    line-height: var(--ll-type-micro-line);
    letter-spacing: 0.02em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.titlebar-role-label[hidden] {
    display: none;
}

.titlebar-role-label--instructor {
    color: #ffffff;
}

.titlebar-role-label--student {
    color: #ffffff;
}

.titlebar-role-label--player-plus {
    color: color-mix(in srgb, var(--ll-role-instructor-primary, #3fa85a) 82%, white);
}

.titlebar-role-label--dual {
    color: color-mix(in srgb, var(--ll-role-instructor-primary, #3fa85a) 62%, #ffffff 38%);
}

.titlebar-role-label--system,
.titlebar-role-label--admin {
    color: #ffffff;
}

.titlebar-logo--right {
    margin-left: auto;
}

.titlebar-avatar-trigger:hover {
    background: transparent;
}

.titlebar-avatar-trigger:hover .titlebar-avatar-trigger__mark {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--text-primary, #0f172a) 12%, transparent),
        0 4px 12px color-mix(in srgb, var(--text-primary, #0f172a) 8%, transparent);
}

.titlebar-avatar-trigger:active {
    transform: scale(0.97);
}

.titlebar-avatar-trigger__frame {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.titlebar-avatar-trigger__mark {
    position: relative;
    width: clamp(36px, 6vw, 48px);
    height: clamp(36px, 6vw, 48px);
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    overflow: hidden;
}

.titlebar-avatar-notices-unread-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
    pointer-events: none;
}

.titlebar-avatar-notices-unread-badge[hidden] {
    display: none !important;
}

.titlebar-avatar-button__fallback {
    color: var(--brand-deep);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: transparent;
    position: absolute;
    inset: 0;
}

.titlebar-avatar-button__fallback--initials {
    color: var(--ll-role-instructor-ink, var(--brand-deep));
    font-size: clamp(0.82rem, 2vw, 1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    background: var(--ll-role-instructor-tint, color-mix(in srgb, var(--brand) 12%, var(--surface-card)));
    border: 1px solid color-mix(in srgb, var(--ll-role-instructor-primary, var(--brand)) 42%, transparent);
    box-sizing: border-box;
}

body.ll-student-portal .titlebar-avatar-button__fallback--initials {
    color: var(--ll-role-student-ink, var(--text-primary));
    background: var(--ll-role-student-tint, color-mix(in srgb, var(--accent) 14%, var(--surface-card)));
    border-color: color-mix(in srgb, var(--ll-role-student-primary-strong, var(--accent)) 48%, transparent);
}

.titlebar-avatar-button__fallback svg {
    width: 58%;
    height: 58%;
}

.titlebar-avatar-button__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 999px;
    background: transparent;
    position: absolute;
    inset: 0;
}

/* Author `display` on these nodes must not defeat the `hidden` attribute (broken avatar overlay). */
.titlebar-avatar-button__image[hidden],
.titlebar-avatar-button__fallback[hidden] {
    display: none !important;
}

.titlebar-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    /* Widen to longest label; cap by viewport (global button max-width otherwise pins each row ~180px). */
    width: max-content;
    min-width: 0;
    max-width: min(400px, calc(100vw - 12px));
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--stroke));
    border-radius: 16px;
    background: rgba(255, 252, 247, 0.98);
    box-shadow: 0 24px 44px rgba(29, 49, 44, 0.18);
    animation: menu-in 170ms ease;
    /* z-index: #titlebar-profile-menu[data-lessonlink-layer="anchor"] in style-layers.css */
    /* Parent `.titlebar-avatar-stack` uses line-height:0 for the avatar; reset line-height for menu text. */
    line-height: normal;
}

.titlebar-profile-dropdown[hidden] {
    display: none;
}

.titlebar-profile-dropdown__role {
    display: flex;
    align-items: flex-start;
    padding: 6px 10px 8px;
    margin: -2px -2px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
}

.titlebar-profile-dropdown__role-stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.titlebar-profile-dropdown__name {
    display: block;
    width: 100%;
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    line-height: var(--ll-type-body-line);
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titlebar-profile-dropdown__name[hidden] {
    display: none;
}

.titlebar-app-version {
    flex-shrink: 0;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    opacity: 0.88;
    white-space: nowrap;
}

.titlebar-profile-dropdown__role[hidden] {
    display: none;
}

.titlebar-role-label--dropdown {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 0;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    text-align: left;
    background: transparent;
    border: 0;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titlebar-profile-dropdown__role .titlebar-role-label {
    color: var(--text-muted);
}

.titlebar-profile-dropdown__separator {
    height: 1px;
    margin: 4px 2px;
    background: color-mix(in srgb, var(--stroke) 75%, transparent);
    border-radius: 1px;
}

.titlebar-profile-dropdown__item {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: transparent;
    color: var(--ink);
    display: grid;
    grid-template-columns: 24px minmax(0, max-content);
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    max-width: none;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.titlebar-profile-dropdown__item--with-badge {
    grid-template-columns: 24px minmax(0, 1fr) auto;
}

.titlebar-profile-dropdown__item[hidden] {
    display: none !important;
}

.titlebar-profile-dropdown__item:hover {
    background: color-mix(in srgb, var(--brand) 10%, white);
    transform: translateY(-1px);
}

.titlebar-profile-dropdown__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.titlebar-profile-dropdown__icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--brand-deep);
}

.titlebar-profile-dropdown__item>span:not(.titlebar-profile-dropdown__icon):not(.home-pill-unread-badge) {
    min-width: 0;
    line-height: 1.35;
    white-space: nowrap;
}

.titlebar-profile-dropdown__item--danger {
    color: #9f1239;
}

.titlebar-profile-dropdown__item--danger .titlebar-profile-dropdown__icon {
    color: inherit;
}

.avatar-upload-panel {
    max-width: 440px;
}

.avatar-upload-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
}

.avatar-upload-current[hidden] {
    display: none !important;
}

.avatar-upload-current__image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--stroke);
    background: rgba(255, 250, 243, 0.92);
}

.avatar-upload-current-hint,
.avatar-upload-choose-hint {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.85rem);
    color: color-mix(in srgb, var(--text-primary) 62%, transparent);
    text-align: center;
}

.avatar-upload-choose-hint {
    margin: 0 0 0.45rem;
    text-align: left;
}

.avatar-upload-crop-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
}

.avatar-upload-crop-wrap[hidden] {
    display: none !important;
}

.avatar-upload-crop-wrap:not([hidden]) + .avatar-upload-choose-hint {
    margin-top: 0;
}

.avatar-upload-crop {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--stroke);
    background: rgba(255, 250, 243, 0.92);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.avatar-upload-crop.is-dragging {
    cursor: grabbing;
}

.avatar-upload-crop__image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    pointer-events: none;
}

.avatar-upload-summary-style {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}

.avatar-upload-summary-style[hidden] {
    display: none;
}

.avatar-upload-summary-style-details {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-page-accent, #121c26);
}

.avatar-upload-summary-style-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
    cursor: pointer;
    padding: 0.7rem 0.85rem;
    user-select: none;
}

.avatar-upload-summary-style-summary::-webkit-details-marker {
    display: none;
}

.avatar-upload-summary-style-summary-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.avatar-upload-summary-style-summary-title {
    color: var(--text-primary);
    font-weight: var(--ll-type-label-weight, 600);
    font-size: var(--ll-type-body-size);
}

.avatar-upload-summary-style-summary-hint {
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.78rem);
}

.avatar-upload-summary-style-chevron {
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: transform 0.16s ease;
}

.avatar-upload-summary-style-details[open] .avatar-upload-summary-style-chevron {
    transform: rotate(180deg);
}

.avatar-upload-summary-style-body {
    padding: 0 0.85rem 0.85rem;
}

.avatar-upload-summary-style-body .instructor-voice-lede {
    margin-top: 0;
}

.avatar-upload-crop-hint {
    margin: 0;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--text-primary) 62%, transparent);
    text-align: center;
}

.titlebar-brand {
    margin: 0;
    font-size: clamp(1rem, calc(0.5rem + 3vw), 2.35rem);
    letter-spacing: clamp(0.08em, 0.5vw, 0.18em);
    font-weight: var(--ll-type-display-weight);
    line-height: var(--ll-type-display-line);
    text-align: left;
    color: color-mix(in srgb, var(--text-primary) 88%, #0f1513);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.titlebar-mark {
    display: none;
    height: clamp(32px, 6vw, 48px);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
}

@media (min-width: 600px) {
    .titlebar-mark {
        display: block;
    }
}

@media (min-width: 900px) {
    .titlebar-mark--wide {
        display: block;
    }
}

@media (min-width: 1120px) {
    .titlebar-mark--extra {
        display: block;
    }
}

.title-icon-button {
    width: 48px;
    height: 48px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: rgba(255, 250, 243, 0.92);
    color: var(--ink);
    box-shadow: var(--shadow);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.title-icon-button:hover {
    background: white;
}

.main-menu {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--stroke);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 254, 0.98), rgba(248, 252, 249, 0.95));
    box-shadow: 0 24px 56px rgba(17, 28, 24, 0.17);
    animation: menu-in 170ms ease;
    z-index: 999;
    margin-top: 8px;
}

.main-menu[hidden] {
    display: none;
}

.main-menu-header {
    display: grid;
    gap: 4px;
}

/* Light-gradient shell: global dark-theme tokens are pale text — force readable ink on this panel */
.main-menu .main-menu-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #152028;
}

.main-menu .main-menu-subtitle {
    margin: 0;
    color: #3d4d5c;
    font-size: 0.9rem;
}

.main-menu-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.main-menu-card {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--stroke));
    border-radius: 16px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px 1fr;
    align-items: flex-start;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.main-menu-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--brand) 38%, var(--stroke));
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.16);
}

.main-menu-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.main-menu-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 17%, white);
    color: var(--brand-deep);
    display: grid;
    place-items: center;
}

.main-menu-card-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.main-menu-card-title {
    font-weight: 700;
    line-height: 1.2;
}

.main-menu-card-description {
    color: var(--lesson-muted-text, var(--text-secondary));
    font-size: 0.88rem;
    line-height: 1.3;
}

.main-menu-submenu {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0 0 0 10px;
    border-left: 2px solid color-mix(in srgb, var(--brand) 24%, var(--stroke));
}

.main-menu-submenu[hidden] {
    display: none;
}

.home-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ll-view-gap);
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
}

.home-pill-button {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: clamp(3px, 0.65cqi + 2px, 6px);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    width: auto;
    padding: clamp(5px, 0.55cqi + 4px, 9px) clamp(5px, 0.9cqi + 3px, 12px);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    cursor: pointer;
    /* Same footprint as active shadow so switching tabs does not change layout or optical weight above the row. */
    box-shadow: 0 4px 14px transparent;
    font-size: clamp(var(--ll-type-label-size), 1.35cqi + 0.48rem, 0.82rem);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    /* Single compact row: inactive vs active must not change cross-axis size (read as titlebar “jump”). */
    height: 2.5rem;
    box-sizing: border-box;
    transition: background 100ms ease, border-color 100ms ease, box-shadow 100ms ease, color 100ms ease;
}

.home-pill-button>i {
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
}

.home-pill-button>span:not(.home-pill-unread-badge):not(.home-pill-messages-icon-wrap) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-pill-messages-icon-wrap {
    display: inline-flex;
    flex-direction: row;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.home-pill-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

/* Never show an empty chip; beat container-query display overrides. */
.home-pill-unread-badge[hidden] {
    display: none !important;
}

.home-pill-unread-badge.home-pill-unread-badge--notices:empty {
    display: none !important;
}

.home-pill-unread-badge--notices {
    position: static;
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 16px;
    height: 16px;
    width: auto;
    max-width: none;
    padding: 0 4px;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

.titlebar-profile-notices-unread-badge {
    justify-self: end;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: var(--ll-type-micro-size, 0.6875rem);
}

.home-pill-button:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-primary);
}

.home-pill-button:active {
    opacity: 0.92;
    transition-duration: 80ms;
}

.home-pill-button.is-active:hover {
    background: var(--primary-strong);
    color: #fff;
    box-shadow: 0 4px 14px rgba(63, 168, 90, 0.32);
}

.home-panel[hidden] {
    display: none;
}

.home-panel {
    border-radius: 20px;
}

.home-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ll-stack-shell:has(.ll-stack-shell__lede, .app-route-fullscreen-lede) .ll-stack-route-duplicate-lede,
.lessonlink-stack-host.lessonlink-stack-host--screen:has(.ll-stack-shell__lede, .app-route-fullscreen-lede) .ll-stack-route-duplicate-lede {
    display: none !important;
}

.ll-stack-shell[data-ll-stack-id="contact-edit"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="contact-edit"] .app-route-fullscreen-body-inner {
    padding:
        4px
        max(2px, env(safe-area-inset-right, 0px))
        max(4px, env(safe-area-inset-bottom, 0px))
        max(2px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="contact-edit"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contact-edit"] .ll-stack-shell__content {
    /* Let the form define height so body-inner can scroll (flex:1 + overflow:hidden clips). */
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
}

.ll-stack-shell[data-ll-stack-id="contact-edit"] .contact-edit-route-root,
.ll-stack-shell[data-ll-stack-id="contact-edit"] .contact-edit-panel {
    width: 100%;
    max-width: none;
}

/* Beat `.email-panel { padding: var(--ll-space-6) }` so New/Edit contact uses the full width. */
.ll-stack-shell[data-ll-stack-id="contact-edit"] .contact-edit-panel.email-panel,
#contact-edit-overlay.contact-edit-route-root .contact-edit-panel.email-panel {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

#contact-edit-overlay .contact-flat-form-section.contact-history-section {
    padding-inline: 4px;
}

#contact-edit-overlay .contact-edit-stack-meta {
    padding-inline: 2px;
}

.app-route-fullscreen-body-inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-3) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.app-route-fullscreen-lede {
    margin: 0;
    max-width: 72ch;
    color: var(--text-secondary, var(--muted-ink, #64748b));
    line-height: 1.45;
    font-size: var(--font-size-sm, 0.9rem);
}

/* Hub Schedule: in-flow panel (Messages and App Feedback are stack routes). */
.home-panel.home-schedule-panel-root[data-home-panel-content="schedule"].is-active {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.home-panel[data-home-panel-content="schedule"]:not([hidden]) {
    overflow-x: hidden;
    overflow-y: hidden;
}

.home-panel[data-home-panel-content="schedule"] .today-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
}

.app-route-fullscreen-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-route-fullscreen-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding:
        max(var(--ll-toolbar-padding-y), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) var(--ll-toolbar-padding-y) max(var(--space-4), env(safe-area-inset-left));
    border-bottom: 1px solid var(--stroke, rgba(148, 163, 184, 0.35));
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 88%, transparent);
}

/* Back on the left, page title centered — avoids "← Title" reading as one control. */
.ll-header-bar--centered-title {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
}

.ll-header-bar--centered-title > .ll-back-action,
.ll-header-bar--centered-title > .dialog-header-back,
.ll-header-bar--centered-title > .ll-stack-shell__back,
.ll-header-bar--centered-title > .titlebar-lesson-back {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;
    max-width: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
}

.ll-header-bar--centered-title > .ll-surface__title:not(.ll-header-title-merged) {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    text-align: center;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ll-header-bar--centered-title > :not(.ll-back-action):not(.dialog-header-back):not(.ll-stack-shell__back):not(.titlebar-lesson-back):not(.ll-header-bar__spacer):not(.ll-surface__header-spacer):not(.ll-surface__title):not(h1):not(h2):not(h3) {
    grid-column: 1 / -1;
}

.app-route-fullscreen-topbar.ll-header-bar--centered-title {
    justify-content: stretch;
}

.ll-header-bar--centered-title > .ll-header-bar__spacer,
.ll-header-bar--centered-title > .ll-surface__header-spacer {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    pointer-events: none;
}

.app-route-fullscreen-topbar .ll-back-action__label.ll-surface__title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-route-fullscreen-topbar .ll-back-action__label.ll-surface__title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Legacy: titles were merged into the back button; JS now keeps them as centered siblings. */
.app-route-fullscreen-topbar:has(.ll-back-action--has-label) > .ll-surface__title,
.app-route-fullscreen-topbar:has(.ll-back-action--has-label) > .ll-surface__title.ll-header-title-merged {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    white-space: nowrap;
}

.app-route-fullscreen-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0 0 max(0px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

/* Transient stack overlays (LessonCaddieNavigator) */
.lessonlink-stack-host {
    position: fixed;
    inset: 0;
    z-index: var(--lessonlink-z-modal-global);
    display: flex;
    flex-direction: column;
    background: var(--surface-page, var(--surface-card-strong, #0f172a));
    box-sizing: border-box;
    padding: 0;
}

/* Coach Split picker: cover the swing player (fixed + above its z-index). */
.lessonlink-stack-host.lessonlink-stack-host--above-coach,
.lessonlink-stack-host.lessonlink-stack-host--screen.lessonlink-stack-host--above-coach {
    position: fixed;
    inset: 0;
    z-index: calc(var(--lessonlink-z-swing-analysis-player, calc(var(--lessonlink-z-app-chrome, 1280) + 20)) + 10);
}

/* Compact confirms on stack host — float below app titlebar. */
.lessonlink-stack-host.lessonlink-stack-host--sheet {
    position: fixed;
    inset: 0;
    padding-top: var(--dialog-top-offset, 0);
}

/* Full transient stack screens — fill app-shell-main below titlebar. */
.lessonlink-stack-host.lessonlink-stack-host--screen {
    position: absolute;
    inset: 0;
    padding: 0;
}

.lessonlink-stack-host.lessonlink-stack-host--screen > .ll-stack-shell {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__inner,
.lessonlink-stack-host.lessonlink-stack-host--screen .app-route-fullscreen-inner {
    min-height: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__body,
.lessonlink-stack-host.lessonlink-stack-host--screen .app-route-fullscreen-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__body-inner,
.lessonlink-stack-host.lessonlink-stack-host--screen .app-route-fullscreen-body-inner {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    gap: var(--space-2);
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__lede,
.lessonlink-stack-host.lessonlink-stack-host--screen .app-route-fullscreen-lede {
    flex: 0 0 auto;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content {
    width: 100%;
    max-width: none;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
 * Stack screens sit above the Ask composer. Pin any surface footer/actions and
 * let the body scroll so Cancel/Continue never render under the dock.
 */
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-lesson-transient-in-stack,
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-lesson-transient-in-stack > .ll-surface__body,
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-surface > .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-lesson-transient-in-stack > .ll-surface__footer,
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-surface > .ll-surface__footer,
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-lesson-transient-in-stack > .action-buttons,
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .ll-surface > .action-buttons {
    flex-shrink: 0;
    margin-top: auto;
}

.lessonlink-stack-host[hidden] {
    display: none !important;
}

.lessonlink-stack-host > .ll-stack-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Participants picker: app titlebar owns Back + search; stack topbar stays empty/hidden. */
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .ll-stack-shell__topbar--no-back:empty,
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .ll-stack-shell__topbar.ll-stack-shell__topbar--no-back:not(:has(*)) {
    display: none !important;
}

/* Guided tour stack chrome removed — feature retired */

.ll-stack-shell--layout-narrow .ll-stack-shell__content {
    max-width: min(100%, 520px);
    margin-inline: auto;
    width: 100%;
}

.ll-stack-shell--layout-confirm .ll-stack-shell__content {
    max-width: min(100%, 420px);
    margin-inline: auto;
    width: 100%;
}

.ll-stack-shell__topbar--back-only {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
}

.lessonlink-stack-host .ll-stack-shell__content > .dialog-content.ll-surface--sheet-confirm {
    width: 100%;
}

.ll-stack-shell__content > .ll-lesson-transient-in-stack {
    width: 100%;
    max-width: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.ll-stack-shell__content > .lesson-start-picker-panel.ll-lesson-transient-in-stack {
    padding: 0;
}

.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-workspace-participants-panel__body,
.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-people-picker-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-people-picker-panel__section[data-people-picker-panel="existing"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-people-picker-autocomplete,
.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-people-picker-viewer-autocomplete {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.ll-stack-shell__body-inner:has(.lesson-workspace-participants-panel.ll-lesson-transient-in-stack),
.ll-stack-shell__body-inner:has(.record-notes-dialog__surface.ll-lesson-transient-in-stack),
.ll-stack-shell__body-inner:has(.summary-voice-override-panel.ll-lesson-transient-in-stack),
.ll-stack-shell__body-inner:has(.general-availability-panel.ll-lesson-transient-in-stack) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ll-stack-shell__body-inner:has(.summary-voice-override-panel.ll-lesson-transient-in-stack) {
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
}

.ll-stack-shell__body-inner:has(.lesson-workspace-participants-panel.ll-lesson-transient-in-stack) .ll-stack-shell__content {
    flex: 1 1 auto;
    min-height: 0;
}

.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-workspace-participants-panel__header,
.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack .lesson-people-picker-panel__header {
    display: none !important;
}

/* Add students — full width + 6px insets on transient stack */
/* Stack screen: subtitle stays in panel body; titlebar search filters recipients
   for Add students. Summary Share runs on the session-workspace titlebar (no
   app-shell search), so keep the in-panel search visible there. */
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:not(:has(.is-summary-share-contacts-only)) .lesson-people-picker-search-field {
    display: none !important;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:has(.is-summary-share-contacts-only) .lesson-people-picker-search-field {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:has(.is-summary-share-contacts-only) .lesson-people-picker-search-toolbar {
    display: flex;
    align-items: center;
    gap: var(--ll-space-2);
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 max(6px, env(safe-area-inset-right, 0px)) var(--ll-space-2) max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:has(.is-summary-share-contacts-only) .lesson-people-picker-search-input,
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:has(.is-summary-share-contacts-only) .lesson-people-picker-search-input.email-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .lesson-people-picker-panel__lede {
    flex-shrink: 0;
    margin: 0 max(6px, env(safe-area-inset-right, 0px)) var(--ll-space-2) max(6px, env(safe-area-inset-left, 0px));
    padding: 0 var(--ll-space-1);
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

/* Add students: search-first via titlebar — no Existing/New segment step on stack. */
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:not(:has(.is-summary-share-contacts-only)) .ll-people-picker-segmented {
    display: none !important;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"]:has(.is-summary-share-contacts-only) .ll-people-picker-segmented {
    flex-shrink: 0;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .lesson-workspace-participants-panel__footer,
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .lesson-people-picker-panel__footer {
    flex-shrink: 0;
}

/* #12 lesson-student-form — nested New Student panel inside Add students stack (not a separate card) */
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] [data-ll-surface-id="lesson-student-form"].ll-surface--sheet-panel {
    margin: 0;
    width: 100% !important;
    max-width: none !important;
    max-height: none;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] #lesson-people-picker-panel-new {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .lesson-people-picker-form,
.ll-stack-shell[data-ll-stack-id="lesson-workspace-participants"] .lesson-people-picker-form-grid {
    width: 100%;
    max-width: none;
}

.ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .lesson-workspace-video-view-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .lesson-workspace-summary-view-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .summary-source-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .general-availability-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .playbook-library-link-dialog.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .playbook-library-viewer-dialog.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .playbook-library-shelf-dialog.ll-lesson-transient-in-stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
}

.ll-stack-shell__content > .playbook-library-shelf-dialog.ll-lesson-transient-in-stack > .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-block: 6px 12px;
}

.ll-stack-shell[data-ll-stack-id="general-availability"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="general-availability"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell__content > .general-availability-panel.ll-lesson-transient-in-stack .ll-surface__body,
.ll-stack-shell__content > .general-availability-panel.ll-lesson-transient-in-stack .general-availability-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

/* Beat global `.email-panel { width: min(100%, 620px) }` — full-width availability rules */
.ll-stack-shell[data-ll-stack-id="general-availability"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

/* Playbook library add-link — full width on transient stack */
.ll-stack-shell[data-ll-stack-id="playbook-library-link"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-library-link"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="playbook-library-link"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="playbook-library-viewer"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-library-viewer"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="playbook-library-viewer"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell__content > .playbook-library-viewer-dialog.ll-lesson-transient-in-stack > .ll-surface__header {
    display: none !important;
}

.ll-stack-shell__content > .playbook-library-viewer-dialog.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .playbook-library-viewer-dialog.ll-lesson-transient-in-stack > .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-inline: 0;
    padding-block: 6px 8px;
}

.ll-stack-shell__content > .playbook-library-viewer-dialog.ll-lesson-transient-in-stack > .ll-surface__body.playbook-library-viewer__body--transcript-open {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ll-stack-shell__content > .playbook-library-link-dialog.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .playbook-library-link-dialog.ll-lesson-transient-in-stack > .ll-surface__body,
.ll-stack-shell__content > .playbook-library-link-dialog.ll-lesson-transient-in-stack > .ll-surface__footer {
    padding-inline: 0;
}

.ll-stack-shell__content > .playbook-library-link-dialog.ll-lesson-transient-in-stack > .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-block: 6px 8px;
}

.home-panel.home-schedule-panel-root .calendar-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home-panel.home-schedule-panel-root .calendar-card-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.home-panel.home-schedule-panel-root .calendar-card {
    flex: 1 1 auto;
    min-height: 0;
}

.library-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.library-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.library-workspace {
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.directory-shell {
    width: 100%;
}

.directory-card {
    position: relative;
    gap: 10px;
    padding-bottom: 72px;
}

/*
 * Hub panels occupy the available app-shell height. The global Ask dock adds
 * its clearance to the root; keep the panel surface in that remaining space
 * and let its existing screen body own overflow.
 */
.home-panel[data-home-panel-content="library"] > .ll-surface--screen-top > .ll-surface__body > .library-shell,
.home-panel[data-home-panel-content="library"] > .ll-surface--screen-top > .ll-surface__body > .directory-shell,
.home-panel[data-home-panel-content="directory"] > .ll-surface--screen-top > .ll-surface__body > .directory-shell,
.home-panel[data-home-panel-content="sessions"] > .ll-surface--screen-top > .ll-surface__body > .directory-shell,
.home-panel[data-home-panel-content="playbook"] > .ll-surface--screen-top > .ll-surface__body > .playbook-workspace,
.home-panel[data-home-panel-content="playbook"] .playbook-workspace > .directory-shell,
.home-panel[data-home-panel-content="schedule"] > .ll-surface--screen-top > .ll-surface__body > .today-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.home-panel[data-home-panel-content="library"] .library-card,
.home-panel[data-home-panel-content="directory"] .directory-card,
.home-panel[data-home-panel-content="sessions"] .sessions-hub-card,
.home-panel[data-home-panel-content="playbook"] .playbook-hub-card {
    /* Match .library-card: flex column, not .common-card grid — grid + flex:1
       stretches implicit rows and leaves huge empty bands above/below search. */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Tight under titlebar — match Library’s dense first paint. */
    padding: var(--ll-space-2) var(--ll-card-padding-x) 72px;
    gap: var(--ll-space-2);
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-card > #student-sessions-list,
.home-panel[data-home-panel-content="directory"] .directory-card > #directory-list {
    align-content: start;
}

.home-panel[data-home-panel-content="library"] .library-workspace {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.directory-loading-skeleton {
    padding: 12px 0;
}

.directory-dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.directory-dashboard-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.directory-dashboard-section__title {
    margin: 0;
    padding: 0 2px;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.directory-dashboard-section__body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.directory-dashboard-group {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong, #fff) 94%, white);
}

/* Last row menus must escape the rounded group clip and stack above the next section. */
.directory-dashboard-group:has(.today-row-actions-menu[open]) {
    overflow: visible;
}

.directory-dashboard-section:has(.today-row-actions-menu[open]),
.sessions-hub-panel-group:has(.today-row-actions-menu[open]) {
    position: relative;
    z-index: 25;
}

.directory-dashboard-row,
.directory-dashboard-preview-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--stroke);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary, var(--ink));
    font: inherit;
    text-align: left;
}

.directory-dashboard-row__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.directory-dashboard-row__avatar .ll-role-avatar {
    box-shadow: none;
}

.directory-dashboard-row__avatar--spacer {
    flex-shrink: 0;
    pointer-events: none;
}

.directory-dashboard-preview-row {
    padding-left: 4px;
    box-sizing: border-box;
}

.directory-dashboard-preview-row__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 4px 8px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.directory-contact-lessons-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, var(--ink));
    font: inherit;
    font-size: var(--ll-type-body-sm-size);
    cursor: pointer;
}

.directory-contact-lessons-button:hover,
.directory-contact-lessons-button:focus-visible {
    border-color: var(--brand);
    color: var(--brand);
}

.directory-dashboard-row {
    width: 100%;
    max-width: none;
    padding: 8px 12px 8px 4px;
    cursor: pointer;
    box-sizing: border-box;
}

.directory-dashboard-row__label {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.directory-dashboard-preview-row__open {
    max-width: none;
}

.directory-favorite-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--brand-primary, #2f6f5e) 72%, var(--text-secondary));
    cursor: pointer;
}

.directory-favorite-star:hover,
.directory-favorite-star:focus-visible {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 10%, transparent);
    outline: none;
}

.directory-favorite-star[aria-pressed="true"] {
    color: #d4a017;
}

.contact-row-main > .directory-favorite-star {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    width: 32px;
    height: 32px;
    margin-right: 0;
}

.contact-row-main > .contact-row-actions {
    grid-column: 2 / 3;
}

.contact-row-main:has(.directory-favorite-star) > .contact-row-actions {
    grid-column: 3 / 4;
}

.contact-row-main:has(.directory-favorite-star) {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.contact-row-main > .contact-row-switch-user-button {
    grid-column: 2 / 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}

.contact-row-main:has(.directory-favorite-star) > .contact-row-switch-user-button {
    grid-column: 3 / 4;
}

.contact-row-main:has(.contact-row-switch-user-button) > .contact-row-actions {
    grid-column: 3 / 4;
}

.contact-row-main:has(.directory-favorite-star):has(.contact-row-switch-user-button) > .contact-row-actions {
    grid-column: 4 / 5;
}

.contact-row-main:has(.contact-row-switch-user-button):not(:has(.directory-favorite-star)) {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.contact-row-main:has(.directory-favorite-star):has(.contact-row-switch-user-button) {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.contact-row-main > .contact-row-reach-button {
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
}

.contact-row-main:has(.contact-row-reach-button):not(:has(.directory-favorite-star)):not(:has(.contact-row-switch-user-button)) {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.contact-row-main:has(.contact-row-reach-button):not(:has(.directory-favorite-star)):not(:has(.contact-row-switch-user-button)) > .contact-row-reach-button {
    grid-column: 2 / 3;
}

.contact-row-main:has(.contact-row-reach-button):not(:has(.directory-favorite-star)):not(:has(.contact-row-switch-user-button)) > .contact-row-actions {
    grid-column: 3 / 4;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):not(:has(.contact-row-switch-user-button)) {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):not(:has(.contact-row-switch-user-button)) > .contact-row-reach-button {
    grid-column: 2 / 3;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):not(:has(.contact-row-switch-user-button)) > .directory-favorite-star {
    grid-column: 3 / 4;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):not(:has(.contact-row-switch-user-button)) > .contact-row-actions {
    grid-column: 4 / 5;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):has(.contact-row-switch-user-button) {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):has(.contact-row-switch-user-button) > .contact-row-reach-button {
    grid-column: 2 / 3;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):has(.contact-row-switch-user-button) > .contact-row-switch-user-button {
    grid-column: 3 / 4;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):has(.contact-row-switch-user-button) > .directory-favorite-star {
    grid-column: 4 / 5;
}

.contact-row-main:has(.contact-row-reach-button):has(.directory-favorite-star):has(.contact-row-switch-user-button) > .contact-row-actions {
    grid-column: 5 / 6;
}

button.ll-btn.ll-btn--ghost.contact-row-switch-user-button {
    gap: 0;
    min-width: 34px;
    width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid color-mix(in srgb, var(--stroke) 80%, transparent);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary, #e2e8f0);
    font-size: 1.25rem;
    font-weight: var(--ll-type-label-weight);
    line-height: 1;
    cursor: pointer;
}

button.ll-btn.ll-btn--ghost.contact-row-switch-user-button:hover,
button.ll-btn.ll-btn--ghost.contact-row-switch-user-button:focus-visible {
    border-color: var(--accent, #0d9488);
    color: var(--accent, #5eead4);
    outline: none;
}

.contact-row-switch-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.directory-dashboard-group > :last-child {
    border-bottom: 0;
}

.directory-dashboard-row:hover,
.directory-dashboard-row:focus-visible,
.directory-dashboard-preview-row__open:hover,
.directory-dashboard-preview-row__open:focus-visible {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 6%, transparent);
    outline: none;
}

.directory-dashboard-row__title,
.directory-dashboard-preview-row__name {
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    color: var(--text-primary, var(--ink));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.directory-dashboard-row__trail,
.directory-dashboard-preview-row__chevron {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    color: var(--text-secondary);
}

.ll-count-badge,
.directory-dashboard-row__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 12%, transparent);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-toolbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-toolbar .sessions-panel-search-mount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

/* Match inline "New student" control size + style (42px row, tinted chip, icon badge). */
.hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.hub-toolbar-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 42px;
    height: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    box-shadow: none;
    color: var(--text-primary, #fff);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    white-space: nowrap;
    cursor: pointer;
    transform: none;
}

.hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.hub-toolbar-new-btn:hover,
.hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary:focus-visible,
.hub-toolbar-new-btn:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    border-color: transparent;
    box-shadow: none;
    outline: none;
    transform: none;
}

.hub-toolbar-new-btn__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: var(--ll-type-label-size);
}

.hub-toolbar-new-btn__label {
    flex: 0 1 auto;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    white-space: nowrap;
    color: inherit;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="directory"] .directory-hub-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="schedule"] .calendar-hub-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="library"] .library-hub-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="playbook"] .playbook-panel-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="sessions"] .common-card .sessions-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel[data-home-panel-content="directory"] .common-card .directory-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel[data-home-panel-content="schedule"] .calendar-card .calendar-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel[data-home-panel-content="library"] .library-card .library-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel[data-home-panel-content="playbook"] .playbook-hub-card .playbook-panel-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary {
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin-left: 0;
    min-height: 42px;
    height: auto;
}

.home-panel[data-home-panel-content="schedule"] .calendar-hub-toolbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0;
}

.home-panel[data-home-panel-content="schedule"] .calendar-hub-toolbar .calendar-panel-search-mount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.home-panel[data-home-panel-content="sessions"]:not([hidden]) {
    overflow: hidden;
}

.home-panel[data-home-panel-content="sessions"] > .ll-surface--screen-top > .ll-surface__body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-panel[data-home-panel-content="sessions"] > .ll-surface--screen-top > .ll-surface__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.directory-dashboard-row__subtitle {
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    color: var(--text-secondary);
}

.directory-dashboard-row__chevron,
.directory-dashboard-preview-row__chevron {
    font-size: var(--ll-type-meta-size);
    line-height: var(--ll-type-meta-line);
    opacity: 0.7;
}

.directory-dashboard-preview-row > .contact-row-switch-user-button {
    flex: 0 0 auto;
    margin-right: 2px;
}

.directory-dashboard-preview-row > .contact-row-reach-button {
    flex: 0 0 auto;
    margin-right: 2px;
}

.directory-dashboard-preview-row > .directory-favorite-star {
    flex: 0 0 auto;
}

.directory-dashboard-empty-hint {
    margin: 0;
    padding: 4px 2px;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
    color: var(--text-secondary);
}

.directory-list-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.directory-list-view__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.directory-list-view__header--inline-search {
    gap: 0;
}

.directory-list-view__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    cursor: pointer;
}

.directory-list-view__title {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
}

.directory-list-view__summary {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
}

.directory-list-view__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.directory-list-view__row-select {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    cursor: pointer;
}

.directory-list-view__row-select input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent, #2563eb);
    cursor: pointer;
}

.directory-list-view__load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 8px 0 16px;
}

.directory-list-view__load-more {
    padding: 10px 16px;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: var(--surface-elevated, #fff);
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-line);
    cursor: pointer;
}

.directory-list-view__empty {
    margin: 0;
}

.sessions-list-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-3, 12px);
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 4px 2px;
}

.sessions-list-bulk-bar__select-all {
    display: inline-flex;
    align-items: center;
    gap: var(--ll-space-2, 8px);
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line-height);
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.sessions-list-bulk-bar__select-all input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent, #2563eb);
    cursor: pointer;
    flex: 0 0 auto;
}

.sessions-list-bulk-bar__delete.ll-btn {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
}

/* Keep chrome readable when idle; opacity alone washes out danger on dark surfaces. */
.sessions-list-bulk-bar__delete.ll-btn.ll-btn--solid.ll-btn--danger:disabled,
.sessions-list-bulk-bar__delete.ll-btn.ll-btn--solid.ll-btn--danger[disabled] {
    opacity: 1;
    color: #fff;
    background: color-mix(in srgb, var(--color-danger-600, #dc2626) 55%, #1a1a1a);
    border-color: color-mix(in srgb, var(--color-danger-500, #ef4444) 70%, transparent);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.sessions-list-bulk-bar__delete.ll-btn.ll-btn--solid.ll-btn--danger:not(:disabled):not([aria-disabled="true"]) {
    color: #fff;
    background: var(--color-danger-600, #dc2626);
    border-color: var(--color-danger-700, #b91c1c);
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row--bulk-select {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--ll-space-2, 8px);
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row--bulk-select > .sessions-hub-session-row__select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
    /* Optical align with avatar / first text line */
    padding-top: 10px;
    cursor: pointer;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row--bulk-select > .contact-row-avatar {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row--bulk-select > .contact-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row__select input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--accent, #2563eb);
    cursor: pointer;
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .directory-dashboard-row {
        min-height: 38px;
        padding: 7px 10px;
    }

    .directory-dashboard-preview-row__open {
        min-height: 38px;
        padding: 7px 4px 7px 10px;
    }
}

.directory-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.directory-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.directory-search-header .email-panel-label {
    margin: 0;
}

.directory-search-header--toolbar {
    justify-content: flex-end;
    margin: 0 0 8px;
}

.relationship-roster-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.relationship-roster-heading-row--tools-only {
    justify-content: flex-end;
    margin-bottom: 4px;
}

.relationship-roster-heading-row h3 {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.directory-add-button {
    position: static;
    margin-left: auto;
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--brand);
    z-index: auto;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        opacity 160ms ease;
}

.directory-add-button:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.82;
}

.directory-add-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 42%, white);
    outline-offset: 2px;
}

.directory-add-button--compact {
    min-width: 0;
    height: auto;
    width: auto;
    padding: 0;
    gap: 6px;
    justify-content: center;
}

.directory-add-button--compact i {
    font-size: 1em;
}

.directory-add-button--compact .calendar-add-lesson-label {
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
}

.directory-list {
    display: grid;
    gap: var(--ll-space-3);
    /* 12px: was 18px */
}

.relationship-roster-section {
    display: grid;
    gap: var(--ll-list-gap);
    /* 8px: was 10px */
}

.relationship-roster-section>h3 {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.relationship-roster-subsection {
    display: grid;
    gap: var(--ll-list-gap);
}

.relationship-roster-subheading {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.lesson-workspace-participants-viewers-section {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--stroke);
}

.lesson-workspace-participants-viewers-help {
    margin: 0;
}

.lesson-workspace-participants-viewer-row,
.lesson-details-viewer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.lesson-workspace-participants-viewer-row .email-input,
.lesson-details-viewer-row .email-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.lesson-workspace-participants-viewer-list,
.lesson-details-viewer-list {
    margin: 8px 0 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.lesson-workspace-participants-viewer-list__empty,
.lesson-details-viewer-list__empty {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
}

.lesson-workspace-participants-viewer-list__item {
    color: var(--text-secondary);
}

.relationship-roster-list {
    display: grid;
    gap: var(--ll-list-gap);
    /* 8px: unchanged, explicit token */
}

.contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--ll-space-3) var(--ll-space-4);
    /* 12px 16px: was 16px all sides */
    border: 1px solid var(--stroke);
    border-radius: 14px;
    position: relative;
    overflow: visible;
}

.contact-row--compact {
    gap: 6px;
    padding: 8px 10px 8px 12px;
    min-height: 0;
}

.contact-row--compact .contact-row-avatar {
    flex: 0 0 auto;
}

.contact-row--compact .contact-row-copy {
    gap: 1px;
}

.contact-row--compact .relationship-roster-last,
.contact-row--compact .contact-row-meta-line,
.contact-row--compact .contact-row-meta {
    line-height: 1.15;
}

.contact-row--compact .relationship-roster-focus {
    padding: 2px 6px;
    font-size: var(--ll-type-micro-size);
}

.contact-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.contact-row-main>.contact-row-name {
    grid-column: 1 / 2;
}

.contact-row-main>.contact-row-stats-line {
    grid-column: 1 / 2;
}

.contact-row-main>.students-contact-role-stat-line {
    grid-column: 1 / 2;
}

.contact-row-main>.contact-row-copy {
    grid-column: 1 / 2;
}

.contact-row-main>.contact-row-actions {
    grid-column: 2 / 3;
    grid-row: 1 / -1;
}

.contact-row--student-select {
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.contact-row--student-select:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--stroke));
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.contact-row--student-select:active {
    transform: scale(0.99);
}

.contact-row--student-select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.contact-row-book-lesson-label {
    white-space: normal;
    text-align: left;
    line-height: 1.25;
}

.contact-row--student-select .contact-row-new-lesson {
    white-space: normal;
}

.contact-row-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.contact-row-name {
    margin: 0;
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
}

.contact-row-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-contact-link-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1;
}

.directory-contact-link-icon--claimed {
    color: var(--success, #3ecf8e);
}

.directory-contact-link-icon--pending {
    color: color-mix(in srgb, var(--muted) 88%, var(--text-primary));
}

.contact-row--compact .contact-row-name {
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line);
}

.relationship-roster-last {
    color: var(--text-secondary);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
}

.contact-row-stats-line {
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-row--compact .contact-row-stats-line {
    font-size: max(var(--ll-type-meta-size), 0.7rem);
    line-height: var(--ll-type-meta-line);
}

.students-contact-role-stat-line {
    color: var(--text-secondary);
    font-size: max(var(--ll-type-meta-size), 0.68rem);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-row--compact .students-contact-role-stat-line {
    font-size: max(var(--ll-type-meta-size), 0.66rem);
    line-height: var(--ll-type-meta-line);
}

#contact-edit-overlay .students-contact-role-stat-line {
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    color: color-mix(in srgb, var(--ink) 88%, var(--muted));
}

.relationship-roster-focus {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid rgba(63, 168, 90, 0.24);
    border-radius: 999px;
    background: rgba(63, 168, 90, 0.14);
    color: var(--primary-strong);
    font-size: var(--ll-type-micro-size);
    font-weight: var(--ll-type-micro-weight);
    line-height: var(--ll-type-micro-line);
}

.contact-row-meta {
    margin: 0;
    color: var(--muted);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-row-meta-line {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
}

.contact-row-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-row-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.contact-row-phone-icon:hover {
    text-decoration: none;
}

.contact-row-phone-icon:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.contact-row-phone-icon i {
    font-size: var(--ll-type-meta-size);
}

.summary-phone-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.contact-row--compact .contact-row-actions {
    align-self: start;
}

.contact-row:has(.today-row-actions-menu[open]) {
    z-index: 24;
}

.contact-row-new-lesson {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 32px;
    min-height: 32px;
    padding: 0 4px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease, opacity 120ms ease;
}

.contact-row-new-lesson:hover {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: color-mix(in srgb, var(--brand) 88%, var(--ink));
}

.contact-row-new-lesson:active {
    transform: scale(0.96);
}

.contact-row-new-lesson:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.contact-row-new-lesson i {
    font-size: var(--ll-type-body-sm-size);
    line-height: 1;
}

.contact-row-reach-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

button.ll-btn.ll-btn--ghost.contact-row-reach-button {
    gap: 0;
    min-width: 34px;
    width: 34px;
    min-height: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.055);
}

button.ll-btn.ll-btn--ghost.contact-row-reach-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

button.ll-btn.ll-btn--ghost.contact-row-reach-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

button.ll-btn.ll-btn--ghost.contact-row-reach-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.contact-row-reach-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 18px;
}

.contact-row-reach-icon .fa-comment {
    font-size: var(--ll-type-body-sm-size);
}

.contact-row-reach-icon .fa-plus {
    position: absolute;
    right: -4px;
    bottom: -3px;
    width: 12px;
    height: 12px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--brand);
    color: #ffffff;
    font-size: var(--ll-type-micro-size);
    line-height: 1;
}

.contact-row-edit {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.contact-edit-panel {
    width: min(100%, 1200px);
}

.contact-phone-field {
    display: grid;
    gap: 6px;
}

.contact-phone-link {
    justify-self: start;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
}

.contact-phone-link:hover {
    text-decoration: underline;
}

#contact-edit-overlay .contact-claim-status-row {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    line-height: 1.35;
}

.contact-edit-stack-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.contact-edit-stack-avatar {
    flex: 0 0 auto;
    line-height: 0;
}

.contact-edit-stack-avatar .ll-role-avatar {
    --ll-role-avatar-size: 52px;
    box-shadow: none;
}

.contact-edit-stack-header-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#contact-edit-overlay .contact-edit-stack-header-copy .contact-edit-overlay-title-row {
    width: 100%;
}

#contact-edit-overlay .contact-claim-status-label {
    flex: 0 0 auto;
}

#contact-edit-overlay .contact-claim-status-meta:not([hidden])::before {
    content: "·";
    margin-right: 6px;
    color: color-mix(in srgb, var(--muted) 88%, transparent);
}

#contact-edit-overlay .contact-claim-status-meta {
    color: var(--muted);
    font-weight: 500;
    min-width: 0;
}

.contact-new-person-hint {
    margin: 0 0 12px;
}

.contact-system-match-preview-wrap:not([hidden]) {
    margin: 0 0 12px;
}

.contact-system-match-preview {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--accent, #0f766e) 35%, var(--border, #d1d5db));
    background: color-mix(in srgb, var(--accent, #0f766e) 8%, var(--surface, #fff));
}

.contact-system-match-preview__title {
    margin: 0 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent, #0f766e);
}

.contact-system-match-preview__name {
    margin: 0;
    font-weight: 600;
}

.contact-system-match-preview__meta {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.ll-rel-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ll-rel-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    color: var(--muted);
}

.ll-rel-badge--member,
.ll-rel-badge--connected {
    color: var(--accent, #0f766e);
    background: color-mix(in srgb, var(--accent, #0f766e) 12%, transparent);
}

.ll-rel-badge--system {
    color: #7c3aed;
    background: color-mix(in srgb, #7c3aed 12%, transparent);
}

.contact-edit-overlay-reach-button {
    max-width: none;
    flex-shrink: 0;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 12px;
    border-radius: 12px;
    white-space: nowrap;
}

.contact-edit-overlay-reach-button[hidden] {
    display: none !important;
}

.contact-edit-overlay-switch-user-button[hidden] {
    display: none !important;
}

#contact-edit-overlay .contact-history-disclosure-row {
    gap: 6px;
}

#contact-edit-overlay .contact-history-disclosure-toggle {
    padding: 10px 12px;
}

#contact-edit-overlay .contact-history-lesson-stack {
    gap: var(--space-4);
}

.contact-new-kind-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.contact-new-kind-toggle[hidden] {
    display: none !important;
}

.contact-history-form--flat .contact-flat-form-section {
    gap: var(--ll-space-3);
}

.contact-edit-form--link-instructor .contact-edit-fields {
    max-width: 28rem;
}

/* Author display on .lesson-field / .contact-claim-status-row overrides [hidden] without !important. */
.contact-edit-form--link-instructor .contact-claim-status-row {
    display: none !important;
}

.contact-edit-form--link-instructor #contact-edit-fields>label.lesson-field {
    display: none !important;
}

.contact-edit-form--link-instructor #contact-edit-fields>label.lesson-field:has(#contact-edit-email),
.contact-edit-form--link-instructor #contact-edit-fields>label.lesson-field:has(#contact-edit-phone) {
    display: grid !important;
}

.contact-history-form--flat .contact-edit-fields {
    display: grid;
    gap: var(--ll-space-3);
}

#contact-edit-overlay #contact-edit-status.contact-history-status {
    min-height: 0;
}

.contact-danger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.contact-delete-button {
    width: auto;
    margin-right: auto;
}

.contact-danger-row .dialog-action-group {
    margin-left: auto;
}

.contact-edit-save-footer {
    margin-top: 20px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.contact-edit-save-footer__trailing {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.contact-portal-invite-send {
    white-space: nowrap;
}

.contact-edit-history {
    display: grid;
    gap: 8px;
}

.contact-history-form {
    display: grid;
    gap: var(--space-4);
    align-content: start;
    padding-top: 4px;
}

.contact-history-section {
    display: grid;
    gap: var(--ll-list-gap);
    min-width: 0;
    justify-items: stretch;
    align-content: start;
    padding: var(--ll-sheet-padding-y) var(--ll-sheet-padding-x);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
        var(--bg-card);
    box-shadow: var(--shadow-soft);
}

.contact-history-section-heading {
    position: relative;
    margin: 0;
    padding-left: 12px;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    text-transform: uppercase;
    letter-spacing: var(--ll-type-section-tracking);
    color: var(--muted);
}

.contact-history-section-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.1rem;
    bottom: -0.1rem;
    width: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--primary-strong), color-mix(in srgb, var(--accent) 70%, var(--primary-strong)));
}

.contact-history-disclosure-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.contact-history-disclosure-toggle {
    /* Global `button { max-width: 180px }` otherwise caps these rows. */
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-3);
    padding: var(--ll-sheet-padding-y) var(--ll-sheet-padding-x);
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card-strong) 88%, white);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.contact-history-disclosure-toggle:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--stroke));
}

.contact-history-disclosure-toggle.is-expanded {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--stroke));
    background: color-mix(in srgb, var(--surface-card-strong) 86%, var(--brand-soft, #e8f5ec) 14%);
}

.contact-history-disclosure-toggle.is-expanded .contact-history-disclosure-chevron {
    opacity: var(--ll-disclosure-accordion-chevron-expanded-opacity, 0.16);
}

.contact-history-disclosure-toggle.is-expanded .contact-history-disclosure-chevron i {
    transform: none;
}

.contact-history-disclosure-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1;
    color: var(--ll-disclosure-chevron-color);
}

.contact-history-disclosure-chevron i {
    font-size: inherit;
    line-height: 1;
    color: inherit;
    transition: transform 0.18s ease;
}

.contact-history-disclosure-main {
    min-width: 0;
    flex: 1;
}

.contact-history-disclosure-summary {
    display: block;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-body-sm-line);
    color: var(--ink);
}

.contact-history-disclosure-summary {
    overflow-wrap: anywhere;
}

#contact-edit-overlay .contact-student-summary-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    text-align: left;
}

#contact-edit-overlay .contact-student-summary-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.38;
    color: var(--ink);
    min-width: 0;
}

#contact-edit-overlay .contact-student-summary-line--phone {
    font-weight: 550;
    color: color-mix(in srgb, var(--ink) 90%, var(--muted));
}

#contact-edit-overlay .contact-student-summary-icon {
    flex: 0 0 auto;
    width: 1.15em;
    text-align: center;
    color: var(--muted);
    font-size: 0.92em;
}

#contact-edit-overlay .contact-student-summary-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

#contact-edit-overlay .contact-student-summary-line[hidden],
#contact-edit-overlay .contact-student-summary-fallback[hidden] {
    display: none !important;
}

.contact-history-status {
    margin: 0;
    min-height: 1.1em;
}

/* Do not set display on [hidden] nodes — author display wins over the hidden attribute without !important. */
.contact-history-details-form:not([hidden]) {
    display: grid;
    gap: var(--space-4);
    padding: 4px 2px 2px;
}

.contact-history-disclosure-body[hidden],
#contact-student-details-region[hidden],
#contact-past-lessons-region[hidden] {
    display: none !important;
}

.contact-history-lesson-stack {
    display: grid;
    gap: var(--ll-space-4);
    /* 16px: was var(--space-5)=20px */
    align-content: start;
}

.contact-history-lesson-block .contact-history-section-heading {
    margin-bottom: -2px;
}

.contact-history-past-lessons-panel {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.contact-history-disclosure-toggle--past {
    margin-top: 0;
    background: color-mix(in srgb, var(--bg-card) 92%, var(--muted));
    border-color: var(--border-subtle);
    box-shadow: none;
}

.contact-history-disclosure-toggle--past:hover {
    border-color: color-mix(in srgb, var(--primary-strong) 35%, var(--border-subtle));
    background: color-mix(in srgb, var(--bg-card) 85%, var(--muted));
}

.contact-history-disclosure-toggle--past .contact-history-disclosure-summary {
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-meta-weight);
    color: var(--muted);
}

.contact-history-past-lessons-region:not([hidden]) {
    display: grid;
    gap: 6px;
    padding-top: 2px;
}

.contact-edit-lessons {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-edit-lesson-item {
    display: grid;
    gap: 6px;
    align-items: start;
    justify-items: stretch;
    justify-self: stretch;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.contact-edit-lesson-item:hover {
    border-color: rgba(15, 118, 110, 0.3);
    background: #fff;
}

.contact-edit-lesson-title-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.contact-edit-lesson-title-row .ll-lesson-sent-badge {
    flex: 0 0 auto;
}

.contact-edit-lesson-title {
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-edit-lesson-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--muted);
}

.contact-edit-lesson-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.contact-edit-lesson-meta {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.3;
    word-break: break-word;
}

.loading-shell {
    flex: 1;
    min-height: clamp(280px, 50vh, 520px);
    display: grid;
    place-items: center;
    padding: 20px;
}

.loading-card {
    width: min(420px, 100%);
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 30px 24px;
    border: 1px solid var(--stroke);
    border-radius: calc(var(--radius) - 6px);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

/* Full-screen blocker while POST /api/lessons runs before opening the lesson workspace. */
.lesson-create-busy-overlay {
    position: fixed;
    inset: 0;
    /* z-index: use [data-lessonlink-layer="blocking"] in style-layers.css */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(16, 27, 23, 0.42);
    backdrop-filter: blur(8px);
    pointer-events: all;
}

/* Mounted on the open lesson stack so Back-save feedback covers the form the user is on.
   Must beat `.ll-surface-host:not(.dialog-overlay)` (fixed + z 1200 in surface-sheet.css). */
.ll-surface-host.lesson-create-busy-overlay.lesson-create-busy-overlay--on-lesson {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    z-index: var(--lessonlink-z-blocking);
    box-sizing: border-box;
}

.ll-stack-shell[data-ll-stack-id="edit-lesson"],
#app.view-root--session-workspace-fullscreen,
#app.view-root--stack-screen {
    position: relative;
}

.ll-surface-host.lesson-create-busy-overlay.lesson-create-busy-overlay--viewport {
    position: fixed !important;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 100dvh;
    z-index: var(--lessonlink-z-blocking);
    box-sizing: border-box;
}

/* Pin inside app shell / phone sim frame instead of the browser viewport. */
.ll-vp-sim-screen > .lesson-create-busy-overlay.lesson-create-busy-overlay--viewport,
.app-shell-main > .lesson-create-busy-overlay.lesson-create-busy-overlay--viewport,
#app > .lesson-create-busy-overlay.lesson-create-busy-overlay--viewport {
    position: absolute !important;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 100%;
    max-height: none;
}

.lesson-create-busy-overlay[hidden] {
    display: none !important;
}

.lesson-create-busy-card {
    pointer-events: none;
}

.lesson-create-busy-overlay.is-delete-busy .loading-title,
.lesson-create-busy-overlay.is-delete-busy .ll-surface__title.loading-title {
    font-size: 1.35rem;
}

.loading-title {
    margin: 4px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.loading-message {
    margin: 0;
    text-align: center;
    color: var(--muted);
}

.dashboard {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 768px) {
    .dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .dashboard {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.nav-card,
.stub-card {
    border: 1px solid var(--stroke);
    border-radius: 22px;
    background: color-mix(in srgb, white 90%, var(--surface-card));
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 48px rgba(17, 28, 24, 0.14);
}

.nav-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.nav-card:hover {
    transform: translateY(-5px);
    border-color: rgba(15, 118, 110, 0.35);
    background: #fff;
    box-shadow: 0 28px 56px rgba(15, 118, 110, 0.16);
}

.nav-card strong {
    font-size: 1.5rem;
    line-height: 1.05;
    margin-bottom: 12px;
}

.nav-card span {
    color: var(--muted);
    max-width: 20ch;
}

.stub-card {
    padding: 28px;
    max-width: 720px;
}

.calendar-shell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

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

.calendar-schedule-new-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
}

.calendar-toolbar-status {
    margin: 0;
    flex: 1;
    min-width: min(260px, 100%);
    text-align: left;
}

.calendar-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
}

.calendar-toolbar-actions--solo {
    flex: 1 1 100%;
    justify-content: space-between;
}

@media (max-width: 520px) {
    .calendar-toolbar-actions--solo {
        flex-wrap: nowrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .calendar-toolbar-actions--solo .calendar-view-toggle {
        flex: 0 1 auto;
        min-width: 0;
    }

    .calendar-toolbar-actions--solo .calendar-view-pill {
        padding: 4px 7px;
        font-size: 0.72rem;
    }

    .calendar-toolbar-actions--solo .calendar-toolbar-lesson-cta {
        margin-left: auto;
    }

    .calendar-toolbar-actions--solo .calendar-toolbar-secondary-button {
        padding: 0 8px;
        min-height: 28px;
    }
}

.calendar-toolbar-lesson-cta {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.calendar-view-toggle {
    display: flex;
    flex-shrink: 0;
    gap: 0;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-strong);
}

.calendar-view-pill {
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 500;
    border: 0;
    border-right: 1px solid var(--stroke);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms;
}

.calendar-view-pill:last-child {
    border-right: 0;
}

.calendar-view-pill:hover {
    background: var(--hover-bg);
}

.calendar-view-pill.is-active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 82%, white), var(--brand));
    color: #fff;
}

.calendar-card {
    flex: 1;
    height: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
    padding: 12px;
    overflow: hidden;
}

.calendar-card-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.calendar-card-wrap .calendar-card {
    min-width: 0;
    width: 100%;
}

.home-availability-card {
    padding: 12px;
    width: 100%;
}

.availability-editor--embedded {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.calendar-add-lesson-button {
    position: absolute;
    top: 18px;
    right: 18px;
    min-width: 45px;
    height: 45px;
    padding: 0 16px 0 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--brand), var(--brand-deep));
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 18px 30px color-mix(in srgb, var(--brand) 28%, transparent);
    cursor: pointer;
    z-index: 4;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.calendar-add-lesson-button--schedule-row {
    position: static;
    margin: 0;
    min-width: 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: 999px;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--brand) 22%, transparent);
}

.calendar-add-lesson-button--schedule-row.calendar-add-lesson-button--toolbar-labeled {
    width: auto;
    min-width: 30px;
    padding: 0 10px 0 8px;
    gap: 6px;
    justify-content: center;
}

.calendar-add-lesson-button--compact.calendar-add-lesson-button--schedule-row {
    min-width: 30px;
    width: auto;
    height: 30px;
}

.calendar-add-lesson-button--compact.calendar-add-lesson-button--toolbar-labeled .calendar-add-lesson-label {
    font-size: 0.72rem;
}

.calendar-toolbar-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.calendar-toolbar-secondary-button:hover {
    background: var(--hover-bg);
}

.calendar-toolbar-secondary-button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
    outline-offset: 2px;
}

.calendar-add-lesson-button--toolbar-labeled .calendar-add-lesson-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: inherit;
}

.calendar-add-lesson-button--header-icon {
    position: static;
    top: auto;
    right: auto;
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    margin-left: 8px;
    border-radius: 999px;
    font-size: 1.2rem;
    line-height: 1;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--brand) 22%, transparent);
    z-index: auto;
}

.calendar-add-lesson-button--practice {
    background: linear-gradient(180deg, color-mix(in srgb, #059669 88%, white), #047857);
    box-shadow: 0 10px 20px color-mix(in srgb, #059669 26%, transparent);
}

.calendar-add-lesson-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 36px color-mix(in srgb, var(--brand) 34%, transparent);
}

.calendar-add-lesson-button--practice:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, color-mix(in srgb, #059669 92%, white), #065f46);
    box-shadow: 0 22px 36px color-mix(in srgb, #059669 34%, transparent);
}

.calendar-add-lesson-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 24%, white);
    outline-offset: 3px;
}

.calendar-add-lesson-button i {
    display: block;
    width: 1em;
    line-height: 1;
    font-size: 0.95rem;
    text-align: center;
}

.calendar-add-lesson-label {
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.general-availability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
}

.general-availability-header h3 {
    margin: 0;
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: 1.2;
}

.general-availability-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-card-strong, var(--surface-strong)) 92%, transparent);
    color: var(--text-primary, var(--ink));
    cursor: pointer;
}

.general-availability-close:hover {
    background: var(--hover-bg);
}

.general-availability-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.general-availability-status {
    margin: 0;
    min-height: 0;
    font-size: var(--ll-type-meta-size);
    flex-shrink: 0;
}

.general-availability-section--compact {
    padding: 5px 8px;
}

.general-availability-section--compact .general-availability-section__title {
    margin-bottom: 2px;
}

.general-availability-weekly-times--display {
    margin-bottom: 0;
}

.general-availability-section {
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--stroke) 85%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-strong) 94%, var(--brand) 6%);
    flex-shrink: 0;
}

.general-availability-section--rules {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
}

.general-availability-section__title {
    margin: 0 0 4px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.general-availability-weekday-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 6px;
}

.general-availability-weekday {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    flex: 1 1 0;
    min-height: 1.85rem;
    padding: 0 2px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
    cursor: pointer;
    user-select: none;
}

.general-availability-weekday:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--stroke));
    background: color-mix(in srgb, var(--brand) 18%, var(--surface-strong));
    color: var(--brand-deep, var(--brand));
    font-weight: var(--ll-type-label-weight);
}

.general-availability-weekday input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.general-availability-weekday__letter {
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: 1;
}

.general-availability-weekly-times {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    margin-bottom: 6px;
    min-width: 0;
}

.general-availability-period-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 6px;
    min-width: 0;
}

.general-availability-period-row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.general-availability-period-row__label {
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--ink-muted, var(--muted));
}

.general-availability-panel .general-availability-status {
    flex-shrink: 0;
    min-width: 0;
}

.general-availability-panel .general-availability-form-row .lesson-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: inherit;
}

.general-availability-panel .general-availability-form-row .lesson-field > span {
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    margin: 0;
}

.general-availability-form-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: end;
    min-width: 0;
    margin-bottom: 0;
}

.general-availability-form-row__grow {
    flex: 1 1 auto;
    min-width: 0;
}

.general-availability-form-row__grow .email-input {
    min-height: 32px;
    padding: 5px 8px;
    font-size: var(--ll-type-body-sm-size);
}

.general-availability-add-button {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 10px;
    font-size: var(--ll-type-meta-size);
}

.general-availability-time-trigger {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    justify-content: flex-start;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--ll-type-body-sm-size);
    padding: 5px 10px;
}

.general-availability-date-input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 8px;
    font-size: var(--ll-type-body-sm-size);
    box-sizing: border-box;
}

.general-availability-rule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: visible;
    max-width: 100%;
    flex: 0 0 auto;
}

/* lesson-field defaults to 104px label column — breaks narrow From/To cells */
.general-availability-panel .general-availability-time-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    width: 100%;
    font-weight: inherit;
}

.general-availability-time-block > span {
    display: block;
    margin-bottom: 0;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--ink-muted, var(--muted));
}

.general-availability-time-field {
    min-width: 0;
    width: 100%;
}

.general-availability-section--inline .general-availability-section__title {
    margin: 0;
}

.general-availability-section .field-help {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    line-height: 1.3;
}

.general-availability-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.general-availability-count {
    font-size: var(--ll-type-meta-size);
    color: var(--ink-muted, var(--muted));
}

.general-availability-empty {
    margin: 0;
    overflow-x: hidden;
    font-size: var(--ll-type-meta-size);
}

.general-availability-header__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.general-availability-rule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-strong) 92%, var(--brand) 8%);
}

.general-availability-rule-item__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.general-availability-rule-item__kind {
    font-size: max(var(--ll-type-micro-size), 0.68rem);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted, var(--muted));
}

.general-availability-rule-item__summary {
    font-size: var(--ll-type-label-size);
    line-height: 1.3;
}

.general-availability-rule-item__remove {
    flex-shrink: 0;
    min-height: 28px;
    padding: 0 8px;
    font-size: var(--ll-type-meta-size);
}

/* ----- FullCalendar 6 (home schedule + set-availability): `.availability-calendar` root ----- */
.availability-calendar {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 100%;
}

.availability-calendar .fc {
    /* Light GCal canvas from first paint — avoid dark --bg-elevated flash before schedule-calendar-body */
    --fc-border-color: #dadce0;
    --fc-page-bg-color: #ffffff;
    --fc-neutral-bg-color: #ffffff;
    --fc-neutral-text-color: #70757a;
    --fc-list-event-hover-bg-color: color-mix(in srgb, #1a73e8 8%, #ffffff);
    --fc-today-bg-color: color-mix(in srgb, #1a73e8 6%, #ffffff);
    --fc-now-indicator-color: #ea4335;
    --fc-non-business-color: color-mix(in srgb, #70757a 6%, #ffffff);
    --fc-highlight-color: color-mix(in srgb, #1a73e8 14%, #ffffff);
    min-width: 720px;
    background: #ffffff;
    color: #3c4043;
}

.availability-calendar .fc-scrollgrid {
    border: 0;
}

.availability-calendar .fc-theme-standard td,
.availability-calendar .fc-theme-standard th {
    border-color: var(--fc-border-color);
}

.availability-calendar .fc-list {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid #dadce0;
    background: #ffffff;
}

.availability-calendar .fc-list-table {
    width: 100%;
    table-layout: auto;
}

.availability-calendar .fc-list-day th {
    position: static !important;
}

.availability-calendar .fc-list-day-cushion {
    background: color-mix(in srgb, var(--brand) 12%, var(--bg-elevated));
    color: var(--text-primary);
    font-weight: var(--ll-type-label-weight);
    font-size: var(--ll-type-meta-size);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-subtle);
}

.availability-calendar .fc-list-event {
    position: relative;
    transition: background-color var(--motion-fast) var(--ease-standard);
}

.availability-calendar .fc-list-event td {
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.availability-calendar .fc-list-event:hover td {
    background: var(--fc-list-event-hover-bg-color);
}

.availability-calendar .fc-list-event:hover td a,
.availability-calendar .fc-list-event:hover .fc-list-event-time,
.availability-calendar .fc-list-event:hover .fc-list-event-title,
.availability-calendar .fc-list-event:hover .calendar-event-content,
.availability-calendar .fc-list-event:hover .calendar-entry-name,
.availability-calendar .fc-list-event:hover .calendar-entry-title,
.availability-calendar .fc-list-event:hover .calendar-entry-description {
    color: var(--text-primary);
}

.availability-calendar .fc-daygrid-event:hover,
.availability-calendar .fc-timegrid-event:hover,
.availability-calendar .fc-daygrid-event:focus-visible,
.availability-calendar .fc-timegrid-event:focus-visible {
    filter: brightness(1.06);
    box-shadow: var(--shadow-sm);
}

.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day {
    cursor: pointer;
}

.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day-frame {
    min-height: 5.75rem;
}

.availability-calendar .fc-list-event-time {
    width: 122px;
    min-width: 122px;
    max-width: 122px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.25;
    vertical-align: top;
    padding-right: 10px;
    color: var(--text-secondary);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
}

.availability-calendar .fc-list-event-title {
    position: relative;
    width: auto;
    min-width: 0;
    vertical-align: top;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 8px;
}

.availability-calendar .fc-list-event-title>a {
    display: block;
    width: 100%;
    min-width: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.availability-calendar .fc-list-event-graphic {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.availability-calendar .fc-list-event-time .calendar-sent-indicator,
.availability-calendar .fc-list-event-time .calendar-sent-indicator i {
    color: var(--primary-strong) !important;
}

.availability-calendar .fc-view-harness,
.availability-calendar .fc-scroller-harness,
.availability-calendar .fc-scroller {
    min-height: 0;
}

.availability-calendar .fc-toolbar-title {
    font-size: max(var(--ll-type-display-size), clamp(1rem, 3.2vw, 1.45rem));
    font-weight: var(--ll-type-display-weight);
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-align: center;
    color: var(--text-primary);
}

.availability-calendar .fc-header-toolbar .fc-toolbar-chunk {
    min-width: 0;
}

.availability-calendar .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
    flex: 1 1 auto;
}

.availability-calendar .fc .fc-button {
    padding: 0.35em 0.58em;
    font-size: var(--ll-type-label-size);
    border-radius: var(--radius-sm);
}

@media (max-width: 420px) {
    .availability-calendar .fc-header-toolbar {
        gap: 10px;
    }

    .availability-calendar .fc-toolbar-title {
        font-size: clamp(0.95rem, 4.4vw, 1.12rem);
        line-height: 1.15;
    }

    .availability-calendar .fc .fc-button {
        padding: 0.32em 0.46em;
        font-size: var(--ll-type-meta-size);
    }

    .availability-calendar .fc-list-event {
        padding: 0;
    }

    .availability-calendar .fc-list-day-cushion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }

    .availability-calendar .fc-list-event-time {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
        white-space: normal;
        padding: 10px 6px 10px 8px;
        font-size: var(--ll-type-label-size);
        line-height: 1.3;
    }

    .availability-calendar .fc-list-event-title {
        display: table-cell;
        width: auto;
        padding-left: 8px;
        padding-right: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: var(--ll-type-body-size);
    }

    .calendar-entry {
        gap: 3px;
    }

    .calendar-entry-description {
        font-size: 0.78rem;
    }

    .availability-calendar .fc-list-event-title>a,
    .calendar-event-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
    }

    .calendar-sent-indicator {
        display: block;
        margin-top: 2px;
        margin-left: 0;
    }
}

@media (max-width: 360px) {
    .availability-calendar .fc-toolbar-title {
        font-size: clamp(0.88rem, 4.2vw, 1rem);
    }

    .availability-calendar .fc-header-toolbar {
        gap: 8px;
    }

    .availability-calendar .fc-list-event-time {
        width: 92px;
        min-width: 92px;
        max-width: 92px;
        white-space: normal;
        padding-right: 4px;
        padding-left: 8px;
        font-size: var(--ll-type-meta-size);
    }

    .availability-calendar .fc-list-event-title {
        width: auto;
    }
}

.calendar-error {
    margin: 0;
    padding: 16px;
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md);
    background: var(--color-danger-100);
    color: var(--color-danger-600);
}

.calendar-event-open-button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-sm);
    background: var(--surface-card-strong);
    color: var(--text-primary);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin: 0;
}

.calendar-event-open-button:hover {
    background: white;
}

.calendar-event-wrapper {
    width: 100%;
    min-width: 0;
}

.calendar-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.calendar-entry-name {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: start;
}

.calendar-entry-title {
    grid-row: 2;
    grid-column: 1;
    min-width: 0;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: start;
}

.calendar-entry-location {
    grid-row: 3;
    grid-column: 1;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.calendar-entry-description {
    grid-row: 4;
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.calendar-entry--no-location .calendar-entry-description {
    grid-row: 3;
}

.event-icons {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.event-icons i {
    font-size: 0.8rem;
    color: var(--brand);
}

.calendar-event-content {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-detail-line {
    word-break: break-word;
}

.calendar-event-phone-link {
    color: inherit;
}

.calendar-event-buttons {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
}

.calendar-sent-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
}

.calendar-sent-indicator i {
    font-size: 0.85rem;
    opacity: 0.9;
}

.recording-shell {
    right: 18px;
    height: 14px;
    border-radius: 999px;
    background: #d92d20;
    box-shadow: 0 0 0 7px rgba(217, 45, 32, 0.12);
}

.recording-timer {
    margin: 0;
    font-size: clamp(2.6rem, 8vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
}

.recording-primary-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.record-button,
.pause-record-button,
.stop-record-button,
.transport-icon-button {
    border: 1px solid var(--stroke);
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.record-button:hover,
.pause-record-button:hover,
.stop-record-button:hover,
.transport-icon-button:hover {
    transform: translateY(-1px);
}

.record-button:disabled,
.pause-record-button:disabled,
.stop-record-button:disabled,
.transport-icon-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.record-button {
    min-width: 90px;
    min-height: 90px;
    padding: 16px;
    border-color: var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.pause-record-button {
    min-width: 90px;
    min-height: 90px;
    padding: 16px;
    border-color: var(--border-subtle);
    border-radius: 24px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 1rem;
    box-shadow: var(--shadow-soft);
}

.stop-record-button {
    min-width: 90px;
    min-height: 90px;
    padding: 16px;
    border-color: color-mix(in srgb, var(--color-danger-600, #dc2626) 38%, var(--border-subtle));
    border-radius: 24px;
    background: color-mix(in srgb, var(--color-danger-600, #dc2626) 18%, var(--bg-elevated));
    color: #ff8585;
    font-size: 1rem;
    box-shadow: var(--shadow-soft);
}

.playhead-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    background: var(--bg-elevated);
}

.recording-secondary-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.transport-icon-button {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 1.8rem;
    box-shadow: var(--shadow-soft);
}

.pause-record-button i,
.stop-record-button i,
.transport-icon-button i {
    font-size: 1.8rem;
    line-height: 1;
}

.playhead-slider-row {
    min-width: 0;
    flex: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.playhead-slider {
    width: 100%;
    accent-color: var(--brand);
}

.playhead-time {
    min-width: 44px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.92rem;
}

.save-recording-button {
    flex-shrink: 0;
    white-space: nowrap;
}

.recording-transcript-button {
    margin: 0;
}

.recording-card audio {
    width: 100%;
}

.summary-shell {
    width: 100%;
}

.lesson-workspace-panel {
    display: grid;
    gap: var(--ll-space-3);
}

@media (max-width: 767.98px) {
    .lesson-workspace-panel {
        gap: var(--ll-space-2);
    }
}

.summary-card,
.summary-dialog {
    display: grid;
    gap: var(--ll-space-5);
    padding: var(--ll-space-7);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

.summary-card {
    gap: var(--ll-card-gap);
    padding: var(--ll-card-padding-y) var(--ll-card-padding-x);
}

.summary-card .panel-copy {
    gap: 6px;
}

.summary-file-name {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.summary-progress-wrap {
    display: grid;
    gap: 8px;
}

.summary-progress-wrap[hidden] {
    display: none;
}

.summary-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.86rem;
    color: var(--muted);
}

.summary-progress {
    width: 100%;
    height: 10px;
}

.summary-system-options {
    display: grid;
    gap: var(--ll-list-gap);
    /* 8px: was 10px */
    padding: 10px var(--ll-space-4);
    /* 10px 16px: was 14px 16px */
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, var(--surface-page));
    color: var(--text-primary);
}

.common-card .summary-system-options .summary-prompt-help,
.common-card .summary-system-options p.summary-prompt-help {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-relaxed);
}

.common-card .summary-system-options .recording-kicker {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: var(--ll-type-section-tracking);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.common-card .summary-system-options .settings-push-toggle-title {
    color: var(--text-primary);
}

.common-card .summary-system-options .settings-push-toggle-hint {
    color: var(--text-secondary);
}

.settings-push-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.settings-push-toggle-text {
    display: grid;
    gap: 4px;
    min-width: 0;
    flex: 1 1 200px;
}

.settings-push-toggle-title {
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--ink);
}

.settings-push-toggle-hint {
    font-size: var(--ll-type-label-size);
    color: var(--muted);
    line-height: 1.35;
}

.settings-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle-track {
    position: relative;
    display: block;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-secondary) 22%, var(--stroke));
    border: 1px solid var(--stroke);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.settings-toggle-input:checked+.settings-toggle-track {
    background: color-mix(in srgb, var(--brand-primary) 65%, #0f766e);
    border-color: color-mix(in srgb, var(--brand-primary) 40%, var(--stroke));
}

.settings-toggle-input:checked+.settings-toggle-track .settings-toggle-thumb {
    transform: translateX(20px);
}

.settings-toggle-input:disabled+.settings-toggle-track {
    opacity: 0.45;
    cursor: not-allowed;
}

.summary-system-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: var(--ll-type-body-size);
}

.summary-system-meta {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, var(--surface-page));
    color: var(--text-primary);
}

.settings-divider {
    width: 100%;
    margin: 0.75rem 0;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--brand) 24%, var(--stroke));
    opacity: 0.9;
}

.summary-triggered-from {
    margin: 0;
    color: var(--ink);
    font-size: 0.95rem;
}

.summary-prompt-details summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
}

.summary-prompt-text {
    margin: 10px 0 0;
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    white-space: pre-wrap;
    max-height: 240px;
    overflow: auto;
}

.summary-doc-indicator {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1.5px solid color-mix(in srgb, var(--brand-primary) 28%, var(--border-default));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong) 94%, white);
    text-align: left;
}

.summary-doc-top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.summary-doc-status {
    min-width: 0;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-secondary, var(--ink-muted, #6b7280));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-doc-teaser {
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding-right: 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text-secondary, var(--ink-muted, #6b7280));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-doc-indicator[hidden] {
    display: none;
}

.summary-doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    justify-self: end;
    min-width: 0;
}

.summary-doc-action-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
    width: min(17rem, 100%);
}

.summary-doc-action-pair--single {
    grid-template-columns: 1fr;
    width: min(8.5rem, 100%);
}

.summary-doc-action-pair .ll-btn.ll-btn--ghost {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 32px;
    max-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    transform: none;
    font-size: 0.8125rem;
    font-weight: 600;
    justify-content: center;
}

.summary-doc-indicator .summary-doc-action-pair #create-lesson-summary.ll-btn.ll-btn--ghost {
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    color: var(--brand);
}

.summary-doc-indicator .summary-doc-action-pair #create-lesson-summary.ll-btn.ll-btn--ghost:hover:not(:disabled) {
    transform: none;
    background: color-mix(in srgb, var(--brand) 14%, var(--surface-card-strong));
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border-default));
}

.summary-doc-actions .ll-btn.ll-btn--solid.ll-btn--primary,
.summary-doc-actions .ll-btn.ll-btn--ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.summary-doc-actions .ll-btn.ll-btn--solid.ll-btn--primary:disabled,
.summary-doc-actions .ll-btn.ll-btn--ghost:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.summary-doc-actions .ll-btn.ll-btn--solid.ll-btn--primary:disabled {
    background: color-mix(in srgb, var(--bg-elevated, var(--surface-card-strong)) 78%, var(--primary));
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border-default));
    color: var(--text-secondary);
    box-shadow: none;
}

.summary-doc-actions .ll-btn.ll-btn--ghost:disabled {
    background: color-mix(in srgb, var(--bg-elevated, var(--surface-card-strong)) 88%, transparent);
    border-color: color-mix(in srgb, var(--text-secondary) 18%, var(--border-default));
    color: var(--text-secondary);
    box-shadow: none;
    transform: none;
}

.summary-action-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
}

/* Summary “View” — same compact pill as media transcript controls (standalone / upload panel) */
.summary-doc-indicator .lesson-details-media-transcript-view.ll-btn.ll-btn--ghost {
    min-height: 32px;
    max-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    transform: none;
    box-sizing: border-box;
    font-size: 0.8125rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    color: var(--brand);
}

.summary-doc-indicator .lesson-details-media-transcript-view.ll-btn.ll-btn--ghost:hover {
    transform: none;
    background: color-mix(in srgb, var(--brand) 14%, var(--surface-card-strong));
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border-default));
}

.summary-doc-indicator .lesson-details-media-transcript-view.ll-btn.ll-btn--ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--text-secondary) 22%, var(--border-default));
    background: color-mix(in srgb, var(--surface-card-strong) 88%, white);
}

@media (max-width: 400px) {
    .summary-doc-top-row {
        gap: 8px;
    }

    .summary-doc-action-pair {
        width: min(17rem, 100%);
    }
}

.summary-panel {
    width: 100%;
    margin-top: var(--ll-space-4);
}

.summary-panel[hidden] {
    display: none;
}

.summary-panel-inner {
    position: relative;
    width: 100%;
    max-width: none;
    border: 1px solid var(--stroke);
    background: var(--surface-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--ll-space-7);
    min-height: clamp(320px, 70vh, 980px);
}

/* Prominent circular back control (icon-only). Labeled backs use pill chrome. */
.ll-back-action,
.dialog-header-back {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    box-shadow: none;
    color: var(--text-primary, var(--ink));
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard);
}

.ll-back-action.ll-back-action--icon-only,
.dialog-header-back.ll-back-action--icon-only,
.ll-back-action:not(.ll-back-action--has-label):not(:has(.ll-back-action__label)),
.dialog-header-back:not(.ll-back-action--has-label):not(:has(.ll-back-action__label)) {
    width: 44px;
    height: 44px;
    min-width: 44px;
    max-width: 44px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
}

.ll-back-action.ll-back-action--icon-only::before,
.dialog-header-back.ll-back-action--icon-only::before,
.ll-back-action:not(.ll-back-action--has-label):not(:has(.ll-back-action__label))::before,
.dialog-header-back:not(.ll-back-action--has-label):not(:has(.ll-back-action__label))::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
}

.ll-back-action i,
.dialog-header-back i {
    flex: 0 0 auto;
    display: block;
    font-size: var(--ll-type-title-size);
    line-height: 1;
    min-width: 1em;
    min-height: 1em;
    opacity: 1;
    pointer-events: none;
}

.titlebar-lesson-back i,
.today-chat-back-button i {
    pointer-events: none;
}

/* Inline workflow backs must not inherit the floating 44×44 email-panel-close hit box. */
:is(.ll-back-action, .dialog-header-back, .ll-stack-shell__back, .titlebar-lesson-back):is(.email-panel-close, .summary-panel-close) {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    left: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:is(.ll-back-action, .dialog-header-back).ll-back-action--has-label:is(.email-panel-close, .summary-panel-close),
:is(.ll-back-action, .dialog-header-back):is(.email-panel-close, .summary-panel-close):has(.ll-back-action__label) {
    width: auto;
    max-width: 100%;
}

.email-panel-header:has(> .dialog-header-back) > .dialog-header-back,
.email-panel-header:has(> .ll-back-action) > .ll-back-action {
    position: relative;
    z-index: 2;
}

.ll-back-action__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.ll-back-action:hover,
.dialog-header-back:hover,
.titlebar-lesson-back:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--surface-card-strong) 98%, var(--brand-primary, var(--brand)) 4%);
    border-color: color-mix(in srgb, var(--stroke) 70%, var(--brand-primary, var(--brand)) 30%);
    box-shadow: none;
    transform: none;
    color: var(--text-primary, var(--ink));
}

.ll-back-action:focus-visible,
.dialog-header-back:focus-visible {
    outline: 2px solid var(--brand-primary, var(--brand));
    outline-offset: 2px;
}

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

.lesson-workspace-phase__title.ll-header-title-merged {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 4px;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
}

.summary-panel-close,
.email-panel-close {
    position: absolute;
    top: var(--ll-space-4);
    right: var(--ll-space-4);
    width: var(--ll-touch-target, 44px);
    height: var(--ll-touch-target, 44px);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--surface-card-strong) 86%, white);
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.summary-panel-close:hover,
.email-panel-close:hover {
    background: color-mix(in srgb, var(--surface-card-strong) 98%, var(--brand-primary, var(--brand)) 4%);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--stroke) 70%, var(--brand-primary, var(--brand)) 30%);
    transform: none;
}

.summary-panel-body {
    line-height: 1.7;
    color: var(--ink);
}

.summary-markdown-wrap {
    min-width: 0;
}

.summary-media-links {
    display: grid;
    gap: 10px;
    margin: 12px 0 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.summary-media-link-item {
    display: block;
    width: 100%;
    min-width: 0;
}

.summary-media-link-item.is-expanded .summary-media-link-card {
    display: none;
}

.summary-media-link-inline {
    display: none;
    width: 100%;
    min-width: 0;
}

.summary-media-link-item.is-expanded .summary-media-link-inline {
    display: block;
}

.summary-media-link-inline[hidden] {
    display: none !important;
}

.lesson-video-preview-shell {
    position: relative;
    width: 100%;
    min-width: 0;
}

.lesson-video-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 68%, transparent);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 28%, transparent);
}

.lesson-video-preview-close:hover {
    background: color-mix(in srgb, var(--ink) 82%, transparent);
}

.lesson-video-preview-close:focus-visible {
    outline: 2px solid var(--brand-primary, #0d6efd);
    outline-offset: 2px;
}

.summary-media-link-inline__video {
    display: block;
    width: 100%;
    max-height: min(52vh, 420px);
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    object-fit: contain;
}

.summary-media-link-inline__video[hidden] {
    display: none !important;
}

.summary-media-link-inline__embed-host {
    display: block;
    width: 100%;
    min-width: 0;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
}

.summary-media-link-inline__embed-host[hidden] {
    display: none !important;
}

.summary-media-link-inline__embed-host iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(52vh, 420px);
    border: 0;
}

.summary-media-link-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
    overflow: hidden;
}

.summary-media-link-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border-default));
}

.summary-media-link-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.summary-media-link-card__thumb {
    position: relative;
    display: flex;
    flex: 0 0 148px;
    align-items: center;
    justify-content: center;
    width: 148px;
    min-height: 84px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
}

.summary-media-link-card__thumb.is-loading-thumbnail::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: color-mix(in srgb, var(--ink) 42%, transparent);
    pointer-events: none;
}

.summary-media-link-card__thumb-busy {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.summary-media-link-card__thumb-busy[hidden] {
    display: none !important;
}

.summary-media-link-inline__loading {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    color: #fff;
}

.summary-media-link-inline__loading[hidden] {
    display: none !important;
}

.summary-media-link-inline__loading-label {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.summary-media-link-inline__player.is-loading-video .summary-media-link-inline__video {
    visibility: hidden;
}

.summary-media-link-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.summary-media-link-card__play,
.summary-media-link-card__play-overlay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 82%, #000);
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}

.summary-media-link-card__play-overlay {
    position: absolute;
    inset: 0;
    margin: auto;
    pointer-events: none;
}

.summary-media-link-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 10px 12px;
}

.summary-media-link-card__label {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-media-link-card__hint {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary, var(--muted));
}

.summary-doc-body .summary-media-links,
.summary-markdown-wrap .summary-media-links {
    width: 100%;
    max-width: 100%;
}

.summary-markdown-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.summary-markdown-host {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.summary-markdown-mode-bar {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.summary-markdown-mode-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.summary-markdown-mode-toggle {
    display: inline-flex;
    border-radius: 10px;
    border: 1px solid var(--border-default);
    overflow: hidden;
}

.summary-markdown-mode-btn {
    margin: 0;
    padding: 7px 14px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--text-secondary, var(--muted));
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.summary-markdown-mode-btn.is-active {
    background: color-mix(in srgb, var(--brand-primary) 20%, var(--surface-strong));
    color: var(--text-primary, var(--ink));
}

.summary-markdown-audio-slot {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.summary-markdown-audio-slot .summary-audio-toolbar {
    margin: 0;
    justify-content: flex-end;
}

.summary-markdown-markup-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.summary-markdown-markup-toolbar[hidden] {
    display: none !important;
}

.summary-markdown-toolbar-btn {
    min-width: 2rem;
    min-height: 2rem;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--surface-soft, rgba(255, 255, 255, 0.7)) 100%, transparent);
    color: var(--text-primary, var(--ink));
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    font-family: inherit;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.summary-markdown-toolbar-btn:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border-default));
}

.summary-markdown-toolbar-btn:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand-primary));
    outline-offset: 2px;
}

.summary-markdown-toolbar-btn__abbr {
    pointer-events: none;
}

.lesson-workspace-editor-stack .summary-markdown-mode-toggle {
    border-color: var(--lesson-border-subtle, var(--border-default));
}

.lesson-workspace-editor-stack .summary-markdown-mode-btn {
    color: var(--lesson-muted-text, var(--text-secondary));
}

.lesson-workspace-editor-stack .summary-markdown-mode-btn.is-active {
    background: var(--lesson-surface-control);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .summary-markdown-toolbar-btn {
    border-color: var(--lesson-border-subtle);
    background: var(--lesson-surface-control);
    color: var(--lesson-header-text);
}

.summary-markdown-wrap.summary-markdown-wrap--preview {
    min-width: 0;
}

.summary-markdown-wrap.summary-markdown-wrap--editable {
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 12rem;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    outline: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.55;
    color: #0f172a;
    background: #f7fafc;
    -webkit-text-fill-color: #0f172a;
    caret-color: #0f766e;
}

.lesson-workspace-editor-stack .summary-markdown-wrap.summary-markdown-wrap--editable {
    color: #0f172a;
    background: #f7fafc;
    -webkit-text-fill-color: #0f172a;
    border-color: rgba(15, 23, 42, 0.22);
}

.summary-markdown-wrap.summary-markdown-wrap--editable:focus {
    border-color: color-mix(in srgb, var(--brand-primary) 55%, rgba(15, 23, 42, 0.22));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.summary-audio-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 0.5rem;
}

.summary-audio-toolbar .summary-audio-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.summary-audio-toolbar .summary-audio-btn .fa-solid {
    font-size: 0.9em;
}

.summary-audio-toolbar+h1,
.summary-audio-toolbar+h2,
.summary-audio-toolbar+h3 {
    margin-top: 0.45em;
}

.summary-markdown-wrap .summary-narration-active-block {
    transition: background-color 0.2s ease;
    background: rgba(251, 191, 36, 0.26);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.22);
}

.summary-panel-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.summary-send-custom-wrap {
    display: grid;
    gap: 8px;
}

.summary-send-custom-wrap[hidden] {
    display: none !important;
}

.summary-panel-body h1,
.summary-panel-body h2,
.summary-panel-body h3,
.summary-panel-body h4 {
    margin: 1.4em 0 0.5em;
    font-weight: var(--ll-type-heading-weight);
    line-height: 1.25;
}

.summary-panel-body h1 {
    font-size: var(--ll-type-display-size);
}

.summary-panel-body h2 {
    font-size: var(--ll-type-title-size);
}

.summary-panel-body h3 {
    font-size: var(--ll-type-heading-size);
}

.summary-panel-body p {
    margin: 0.6em 0;
}

.summary-panel-body ul,
.summary-panel-body ol {
    margin: 0.6em 0;
    padding-left: 1.5em;
}

.summary-panel-body li {
    margin: 0.25em 0;
}

.summary-panel-body strong {
    font-weight: var(--ll-type-title-weight);
}

.summary-panel-body em {
    font-style: italic;
}

.summary-panel-body s {
    text-decoration: line-through;
    color: var(--muted);
}

.summary-panel-body code {
    font-family: ui-monospace, monospace;
    font-size: var(--ll-type-body-sm-size);
    background: rgba(15, 118, 110, 0.08);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

.summary-panel-body pre {
    background: rgba(15, 118, 110, 0.06);
    border-radius: 10px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 1em 0;
}

.summary-panel-body pre code {
    background: none;
    padding: 0;
    font-size: var(--ll-type-body-sm-size);
}

.summary-panel-body hr {
    border: none;
    border-top: 1px solid var(--stroke);
    margin: 1.5em 0;
}

.summary-info-box {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    overflow: hidden;
    margin: 0 0 1.4em;
    font-size: var(--ll-type-body-size);
}

.summary-info-box tbody tr {
    border-bottom: 1px solid var(--stroke);
}

.summary-info-box tbody tr:last-child {
    border-bottom: none;
}

.summary-info-label {
    padding: 7px 12px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    width: 1%;
    background: rgba(15, 118, 110, 0.04);
}

.summary-info-value {
    padding: 7px 12px;
    color: var(--ink);
    width: 100%;
}

.summary-info-value > .summary-info-name-line,
.summary-info-value > .summary-info-party-list {
    width: 100%;
}

.summary-info-value a {
    color: var(--accent);
    text-decoration: none;
}

.summary-info-value a:hover {
    text-decoration: underline;
}

.summary-info-party-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
}

.summary-info-name-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}

.summary-info-name {
    flex: 1 1 auto;
    min-width: 0;
}

.summary-info-reach-button {
    flex-shrink: 0;
    margin-left: auto;
    min-height: 1.75rem;
    min-width: 1.75rem;
    padding: 0.15rem 0.35rem;
}

.summary-info-party-sep {
    display: none;
}

.summary-info-divider {
    border: none;
    border-top: 1px solid var(--stroke);
    margin: 1.5em 0 1.2em;
}

.settings-menu-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.settings-menu-card[hidden] {
    display: none;
}

.settings-menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-elevated) 86%, var(--bg-card));
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.settings-menu-card:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.28);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.settings-menu-title {
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
}

.settings-menu-description {
    color: var(--text-secondary);
    line-height: 1.55;
}

.settings-menu-title-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-right: 8px;
    vertical-align: -0.15em;
    flex-shrink: 0;
    color: #ff0000;
}

.youtube-integration-root {
    display: grid;
    gap: 18px;
}

.youtube-integration-lede {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.youtube-integration-playlists {
    display: grid;
    gap: 14px;
}

.youtube-integration-playlist-row {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-card));
}

.youtube-integration-playlist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.youtube-integration-playlist-heading {
    font-weight: var(--ll-type-heading-weight);
}

.youtube-integration-playlist-sync,
.youtube-integration-meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size);
}

.youtube-integration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.instructor-voice-settings {
    display: grid;
    gap: 18px;
}

.instructor-voice-lede {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.instructor-voice-sliders {
    display: grid;
    gap: 20px;
}

.instructor-voice-slider-block {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--bg-card));
}

.instructor-voice-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.instructor-voice-slider-label {
    font-weight: var(--ll-type-heading-weight);
}

.instructor-voice-slider-value {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: var(--ll-type-body-size);
}

.instructor-voice-slider-row {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 2fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.instructor-voice-slider-end-label {
    font-size: var(--ll-type-meta-size);
    line-height: 1.35;
    color: var(--text-secondary);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
}

.instructor-voice-slider-end-label--high {
    text-align: right;
}

.instructor-voice-slider {
    min-width: 0;
}

@media (max-width: 840px) {
    .instructor-voice-slider-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "low high"
            "slider slider";
        align-items: start;
        gap: 8px 12px;
    }

    .instructor-voice-slider-row > .instructor-voice-slider-end-label:first-child {
        grid-area: low;
    }

    .instructor-voice-slider-row > .instructor-voice-slider {
        grid-area: slider;
        width: 100%;
    }

    .instructor-voice-slider-row > .instructor-voice-slider-end-label--high {
        grid-area: high;
        text-align: right;
    }
}

.settings-subscreen-actions {
    margin-bottom: 16px;
}

.upload-media-card {
    display: grid;
    gap: var(--space-5);
}

.add-media-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    display: grid;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: rgba(255, 250, 243, 0.98);
    box-shadow: var(--shadow);
    z-index: 50;
    animation: menu-in 140ms ease;
}

.lesson-workspace-editor-sibling--capture .add-media-menu {
    z-index: 500;
}

.add-media-menu[hidden] {
    display: none;
}

.add-media-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-meta-weight);
    text-align: left;
    cursor: pointer;
    transition: background 100ms;
}

.add-media-menu-item:hover {
    background: rgba(15, 118, 110, 0.1);
}

.add-media-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--brand);
    flex-shrink: 0;
}

.upload-capture-menu {
    background: #fffaf3;
    border-color: rgba(15, 23, 42, 0.18);
}

.upload-capture-menu .add-media-menu-item {
    color: #172033;
    font-weight: var(--ll-type-title-weight);
}

.upload-capture-menu .add-media-menu-item span {
    color: inherit;
}

.upload-capture-menu .add-media-menu-item:hover,
.upload-capture-menu .add-media-menu-item:focus-visible {
    background: rgba(15, 118, 110, 0.14);
    color: #0f172a;
}

.record-notes-dialog[hidden] {
    display: none !important;
}

.record-notes-dialog:not([hidden]) {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--dialog-top-offset) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.record-notes-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 27, 23, 0.45);
    backdrop-filter: blur(6px);
}

.record-notes-dialog__surface {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - var(--dialog-top-offset) - max(var(--space-4), env(safe-area-inset-bottom)) - var(--space-4));
    max-height: calc(100dvh - var(--dialog-top-offset) - max(var(--space-4), env(safe-area-inset-bottom)) - var(--space-4));
    overflow: auto;
    box-sizing: border-box;
    padding: 22px 22px 18px;
    border-radius: var(--radius, 14px);
    border: 1px solid var(--stroke);
    background: var(--surface-strong, #fffaf3);
    box-shadow: var(--shadow);
}

.record-notes-dialog__close {
    position: static;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: var(--ll-type-heading-size);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.record-notes-dialog__header {
    align-items: center;
    margin-bottom: 6px;
}

.record-notes-dialog__surface.ll-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.record-notes-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack .record-notes-dialog__body {
    padding: 0;
}

.record-notes-dialog__header .ll-surface__title,
.record-notes-dialog__title {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    color: var(--ink);
}

.record-notes-dialog__hint {
    margin: 0 36px 12px 0;
}

.record-notes-dialog__editor {
    position: relative;
    width: 100%;
    margin: 0 0 14px;
    min-width: 0;
}

.record-notes-dialog__textarea {
    display: block;
    width: 100%;
    min-height: 220px;
    max-width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 12px 52px 12px 12px;
}

.record-notes-dialog__mic-btn {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--stroke);
    background: color-mix(in srgb, var(--surface-card-strong, #fff) 92%, var(--brand-primary, #0d9488) 8%);
    color: var(--ink);
    font-size: var(--ll-type-heading-size);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.record-notes-dialog__mic-btn:hover,
.record-notes-dialog__mic-btn:focus-visible {
    border-color: color-mix(in srgb, var(--brand-primary, #0d9488) 35%, var(--stroke));
    background: color-mix(in srgb, var(--surface-card-strong, #fff) 82%, var(--brand-primary, #0d9488) 18%);
    outline: none;
}

.record-notes-dialog__mic-btn.is-active {
    border-color: color-mix(in srgb, var(--brand-primary, #0d9488) 55%, var(--stroke));
    background: color-mix(in srgb, var(--brand-primary, #0d9488) 22%, var(--surface-card-strong, #fff));
    color: var(--ink);
}

.record-notes-dialog__actions {
    flex-wrap: wrap;
    margin-top: 4px;
    justify-content: flex-end;
    gap: 10px;
}

.record-notes-dialog--record:not([hidden]) {
    align-items: center;
    justify-content: center;
    padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}

.record-notes-dialog--link:not([hidden]) {
    z-index: var(--z-modal, 1200);
}

.record-notes-dialog--link .record-notes-dialog__body .email-label {
    display: block;
    margin-top: 12px;
}

.record-notes-dialog--link .record-notes-dialog__body .email-label:first-child {
    margin-top: 0;
}

.record-notes-dialog--link .record-notes-dialog__body .email-input {
    width: 100%;
    margin-top: 6px;
}

.record-notes-dialog--link .upload-link-input {
    min-height: 7rem;
    resize: vertical;
}

.upload-media-embed-host {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(70vh, 520px);
    border-radius: 8px;
    overflow: hidden;
    background: #0b0f14;
}

.upload-media-embed-host > .linked-embed-facade {
    /* Global `button { max-width: 180px }` otherwise pins embed previews to the left. */
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}

.upload-media-embed-host iframe,
.upload-media-embed-host .linked-embed-preview-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.linked-embed-facade {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    background: #0b0f14;
    cursor: pointer;
    overflow: hidden;
    appearance: none;
    font: inherit;
    color: inherit;
}

.linked-embed-facade--active {
    cursor: default;
}

.linked-embed-facade__thumb {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center center;
}

.linked-embed-facade__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #000 28%, transparent);
    color: #fff;
    font-size: 1.75rem;
    pointer-events: none;
}

.linked-embed-facade__generic {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    font: var(--ll-type-body-sm);
    background: color-mix(in srgb, #000 45%, transparent);
}

.linked-embed-facade:focus-visible {
    outline: 2px solid var(--accent, #0f766e);
    outline-offset: 2px;
}

.record-notes-dialog--record .record-notes-dialog__surface {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: none;
    height: 75vh;
    height: 75dvh;
    max-height: 75vh;
    max-height: 75dvh;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 16px max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
}

.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
    border: none;
    background: transparent;
}

.record-notes-dialog--record .record-notes-dialog__editor,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack .record-notes-dialog__editor {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.record-notes-dialog--record .record-notes-dialog__textarea,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack .record-notes-dialog__textarea {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    resize: none;
    box-sizing: border-box;
}

.record-notes-dialog--record .record-notes-dialog__actions,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack .record-notes-dialog__actions {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    margin-top: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: stretch;
    gap: 10px;
}

.record-notes-dialog--record .record-notes-dialog__actions .ll-btn.ll-btn--solid.ll-btn--primary,
.record-notes-dialog--record .record-notes-dialog__actions .ll-btn.ll-btn--ghost,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack .record-notes-dialog__actions .ll-btn.ll-btn--solid.ll-btn--primary,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack .record-notes-dialog__actions .ll-btn.ll-btn--ghost {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.upload-media-list {
    display: grid;
    gap: 0;
}

.upload-transcription-progress-wrap {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
}

.upload-transcription-progress-wrap[hidden] {
    display: none;
}

.upload-media-row--transcribing {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
}

.upload-media-row__head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    grid-column: 1;
}

.upload-media-row__head .upload-media-include-toggle {
    flex: 0 0 auto;
    /* Generous hit target so checkbox taps don't miss into the video-open row. */
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    margin-inline-end: 2px;
    padding: 12px 10px 12px 8px;
    gap: 0;
    align-items: center;
    justify-content: center;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.upload-media-row__head .upload-media-name {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.upload-media-progress-ring {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
}

.upload-media-progress-ring__svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.upload-media-progress-ring__track {
    fill: none;
    stroke: color-mix(in srgb, var(--brand-primary, #0b6bcb) 22%, transparent);
    stroke-width: 3;
}

.upload-media-progress-ring__fill {
    fill: none;
    stroke: var(--brand-deep, var(--color-primary-600, #0b6bcb));
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 180ms ease;
}

.upload-media-transcript-stream-line {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0 2px;
    font-size: 0.78rem;
    line-height: 1.35;
    font-style: italic;
    color: var(--text-secondary, var(--ink-muted, #6b7280));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.1em;
}

.upload-media-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content 100px;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    color: var(--muted);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upload-media-header-main {
    justify-self: start;
}

.upload-media-header-include {
    justify-self: center;
    white-space: nowrap;
}

.upload-media-header-actions {
    display: block;
    width: 100px;
}

.upload-media-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.upload-media-list .upload-media-row + .upload-media-row {
    border-top: none;
    margin-top: 0;
}

.upload-media-include-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    flex: 1 1 auto;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--text-secondary);
    cursor: pointer;
}

.upload-media-include-toggle .upload-media-option-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
    accent-color: #3b82f6;
}

.upload-media-row__head .upload-media-include-toggle .upload-media-option-checkbox {
    width: 18px;
    height: 18px;
    /* Expand the native control's clickable box inside the padded label. */
    min-width: 18px;
    min-height: 18px;
}

.upload-media-include-toggle .upload-media-option-label {
    line-height: 1.25;
    user-select: none;
}

.upload-media-include-toggle:has(.upload-media-option-checkbox:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

.upload-media-include-toggle:has(.upload-media-option-checkbox:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.upload-media-include-toggle:has(.upload-media-option-checkbox:disabled) .upload-media-option-checkbox {
    cursor: not-allowed;
}

.upload-media-link-summary-toggle {
    flex: 0 0 auto;
}

.upload-media-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0;
    min-width: 0;
    grid-column: 2;
    flex-shrink: 0;
}

.upload-media-include-toggle {
    flex: 0 0 auto;
    margin-right: 0;
}

.upload-media-controls-meta {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    line-height: 1.25;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.upload-media-transcript-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    font-size: var(--ll-type-micro-size);
    line-height: 1;
}

.upload-media-transcript-status--ready {
    color: var(--status-success, #3ecf8e);
}

.upload-media-transcript-status--missing {
    color: var(--text-tertiary, #7a8494);
    opacity: 0.85;
}

.upload-media-transcript-status--no-transcript {
    color: var(--text-tertiary, #7a8494);
    opacity: 0.9;
}

.lesson-workspace-summarize-media-card {
    display: grid;
    gap: 0;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--lesson-border-subtle, var(--border-subtle));
    border-radius: var(--radius, 12px);
    background: var(--gradient-surface-quiet), var(--lesson-surface-card, var(--surface-card-strong));
    box-shadow: var(--shadow-soft);
}

.lesson-workspace-summarize-media-card[hidden] {
    display: none !important;
}

.lesson-workspace-summarize-media-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

.lesson-workspace-summarize-media-list[hidden] {
    display: none !important;
}

.lesson-details-media-row__actions .lesson-details-media-transcript-view {
    min-width: 2rem;
    padding-inline: 0.45rem;
}

.upload-media-actions {
    display: flex;
    gap: 12px;
    justify-content: end;
    flex-shrink: 0;
}

.upload-media-name {
    display: flex;
    align-items: baseline;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}

.upload-media-name__base {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-media-name__ext {
    flex: 0 0 auto;
    white-space: nowrap;
}

.upload-media-meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    line-height: 1.25;
}

.upload-media-delete {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--color-danger-600) 28%, var(--border-default));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    box-shadow: none;
    color: var(--color-danger-600);
}

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

.upload-media-delete-icon {
    width: 18px;
    height: 18px;
}

.upload-media-transcript {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    box-shadow: none;
    color: var(--brand);
}

.upload-media-transcript svg {
    width: 18px;
    height: 18px;
}

.upload-media-video-preview {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    box-shadow: none;
    color: var(--brand);
}

.upload-media-video-preview svg {
    width: 18px;
    height: 18px;
}

.upload-media-actions-menu {
    position: relative;
}

/*
 * Open clip menus float via JS (position:fixed + app chrome z-index).
 * Do not put z-index on the <details> host, which traps the panel.
 */

.upload-media-actions-menu__trigger {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    color: var(--brand);
    cursor: pointer;
    list-style: none;
}

.upload-media-actions-menu[data-upload-media-menu-disabled="true"] .upload-media-actions-menu__trigger,
.upload-media-actions-menu__trigger[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.upload-media-actions-menu__trigger::-webkit-details-marker {
    display: none;
}

.upload-media-actions-menu__trigger::marker {
    content: '';
}

.upload-media-actions-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 180px;
    padding: 6px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    background: var(--surface-card-strong);
    box-shadow: var(--shadow-lg);
}

/* Viewport-fixed while open, above app chrome. */
.upload-media-actions-menu__panel.row-actions-menu__panel--floating,
.today-row-actions-menu__panel.row-actions-menu__panel--floating {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: calc(var(--lessonlink-z-app-chrome, 1280) + 40);
    max-width: min(320px, calc(100vw - 16px));
}

.upload-media-actions-menu:not([open]) .upload-media-actions-menu__panel {
    display: none;
}

.upload-media-actions-menu__item:hover,
.upload-media-actions-menu__item:focus-visible {
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    outline: none;
}

.upload-media-actions-menu__item:disabled {
    color: var(--text-secondary);
    cursor: not-allowed;
    opacity: 0.55;
}

.upload-media-actions-menu__item--danger:hover,
.upload-media-actions-menu__item--danger:focus-visible {
    background: color-mix(in srgb, var(--color-danger-600) 12%, transparent);
}

.upload-media-actions-menu__toggle {
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.upload-media-actions-menu__toggle input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--brand-primary, #3b82f6);
    cursor: pointer;
}

.upload-media-actions-menu__toggle:has(input[type="checkbox"]:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.upload-media-actions-menu__toggle:has(input[type="checkbox"]:disabled) input[type="checkbox"] {
    cursor: not-allowed;
}

.upload-media-video-dialog__header {
    align-items: center;
    gap: 10px;
}

.upload-media-video-dialog__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    color: var(--text-primary);
    word-break: break-word;
}

.lesson-workspace-video-view-panel__body,
.upload-media-video-dialog__body,
#upload-media-video-body {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 12px;
}

.upload-media-video-dialog__body .lesson-video-preview-shell,
#upload-media-video-body .lesson-video-preview-shell {
    flex-shrink: 0;
}

.upload-media-video-player:not([hidden]) {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: min(70vh, 520px);
    border-radius: 8px;
    background: #0b0f14;
}

.lesson-workspace-video-view-panel.ll-lesson-transient-in-stack .lesson-workspace-video-view-panel__header,
.lesson-workspace-video-view-panel.ll-lesson-transient-in-stack .upload-media-video-dialog__header {
    display: none !important;
}

.ll-stack-shell__content > .lesson-workspace-video-view-panel.ll-lesson-transient-in-stack {
    border: none;
    background: transparent;
    padding: 0;
}

.lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .lesson-workspace-transcript-view-panel__header,
.lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .email-panel-header,
.lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .ll-surface__header {
    display: none !important;
}

/* Transient stack: in-panel chrome suppressed by lesson-transient-stack-bridge.js */
.ll-stack-shell__content .ll-transient-suppressed-chrome {
    display: none !important;
}

/* Upload audio recorder — same full-bleed shell as Capture Video; stack owns back/title. */
.ll-stack-shell__content > .record-audio-panel.ll-lesson-transient-in-stack > .record-audio-header,
.ll-stack-shell__content > .record-audio-panel.ll-lesson-transient-in-stack > .record-video-header {
    display: none !important;
}

/* Record notes — stack chrome owns back/title */
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack > .record-notes-dialog__header .record-notes-dialog__close,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack > .record-notes-dialog__header #record-notes-title,
.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack > .record-notes-dialog__header .ll-surface__header-spacer {
    display: none !important;
}

.ll-stack-shell__content > .record-notes-dialog__surface.ll-lesson-transient-in-stack > .record-notes-dialog__header {
    display: none !important;
}

.ll-stack-shell__content > .lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .lesson-workspace-transcript-view-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    gap: 0;
}

.ll-stack-shell__content > .lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .lesson-transcript-view-pre,
.ll-stack-shell__content > .lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .summary-panel-body p {
    max-height: none;
    margin: 0 0 0.85em;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: var(--ll-type-body-size);
    line-height: 1.6;
    color: var(--text-primary, var(--ink));
}

.ll-stack-shell__content > .lesson-workspace-transcript-view-panel.ll-lesson-transient-in-stack .summary-panel-body p:last-child {
    margin-bottom: 0;
}

.ll-stack-shell[data-ll-stack-id="lesson-summary"] .app-route-fullscreen-body-inner {
    gap: 0;
    padding-top: 0;
}

.ll-stack-shell__content > .lesson-workspace-summary-view-panel.ll-lesson-transient-in-stack {
    flex: 0 1 auto;
    min-height: auto;
    overflow: visible;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.ll-stack-shell__content > .lesson-workspace-summary-view-panel.ll-lesson-transient-in-stack .lesson-workspace-summary-view-panel__body {
    flex: 0 1 auto;
    min-height: auto;
    overflow-y: visible;
    overflow-x: hidden;
    gap: 0;
    padding: 0 var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
}

.ll-stack-shell__content > .lesson-workspace-summary-view-panel.ll-lesson-transient-in-stack .summary-markdown-host {
    gap: 8px;
}

.ll-stack-shell__content > .lesson-workspace-summary-view-panel.ll-lesson-transient-in-stack .summary-info-box {
    margin-bottom: 0.75em;
}

.upload-media-video-overlay .upload-media-video-dialog,
.upload-media-video-overlay .lesson-workspace-video-view-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
}

/* Session list summary: fullscreen video player above the summary reader. */
.email-panel-overlay.session-summary-video-overlay {
    z-index: calc(var(--lessonlink-z-modal-global) + 2);
}

.email-panel-overlay.session-summary-video-overlay .session-summary-video-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.session-summary-video-panel__player {
    position: relative;
    width: 100%;
    min-width: 0;
}

.session-summary-video-panel__player.is-loading-video .session-summary-video-panel__video {
    visibility: hidden;
}

.session-summary-video-panel__video {
    display: block;
    width: 100%;
    max-height: min(72vh, 560px);
    border-radius: 10px;
    background: #0b0f14;
    object-fit: contain;
}

@media (max-width: 720px) {
    .upload-media-header {
        grid-template-columns: minmax(0, 1fr) max-content 100px;
        padding: 0 4px;
    }

    .upload-media-header-include {
        justify-self: center;
    }

    .upload-media-actions {
        justify-content: flex-end;
    }
}

#record-audio-preview,
.record-audio-preview {
    max-width: 100%;
}

.today-shell {
    position: relative;
    width: 100%;
}

/* Hub Messages: semantic shell/body (not a second `.common-card` on Today). */
.notices-hub-shell {
    position: relative;
    width: 100%;
}

/* Cancel app-shell horizontal inset so Today and workspace shells align edge-to-edge. */
.view-root>.today-shell,
.home-panel>.today-shell,
.home-panel>.ll-surface--screen-top>.ll-surface__body>.today-shell,
.lesson-workspace-panel>.today-shell {
    margin-left: calc(-1 * var(--app-inline-inset-start));
    margin-right: calc(-1 * var(--app-inline-inset-end));
    width: auto;
    max-width: none;
    box-sizing: border-box;
}

/* Today: lessons scroll within the active panel; weather chip lives in the titlebar on Today only. */
.home-panel[data-home-panel-content="today"]:not([hidden]) {
    overflow-x: hidden;
    overflow-y: hidden;
}

.home-panel[data-home-panel-content="today"] .today-shell {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
}

.home-panel[data-home-panel-content="notices"]:not([hidden]) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.home-panel[data-home-panel-content="notices"] .ll-surface--screen-top {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.home-panel[data-home-panel-content="notices"] .notices-home-panel-body,
.home-panel[data-home-panel-content="notices"] .notices-hub-shell,
.home-panel[data-home-panel-content="notices"] .notices-hub-body,
.home-panel[data-home-panel-content="notices"] .today-chat-panel,
.home-panel[data-home-panel-content="notices"] .today-chat-iphone {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* Notices list: fill down to the Ask dock; rows scroll in the leftover space. */
.home-panel[data-home-panel-content="notices"] .today-chat-list-view {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.home-panel[data-home-panel-content="notices"] .today-chat-conversations {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.home-panel[data-home-panel-content="notices"] .today-chat-conversations:has(.notices-inbox-empty) {
    display: flex;
    flex-direction: column;
}

.notices-inbox-empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: min(52vh, 100%);
    padding: 28px 20px 36px;
    box-sizing: border-box;
    text-align: center;
}

.notices-inbox-empty__message {
    margin: 0;
    max-width: 16rem;
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-title-weight, 600);
    line-height: var(--ll-type-title-line, 1.3);
    letter-spacing: var(--ll-type-title-tracking, -0.015em);
    color: color-mix(in srgb, var(--text-secondary, #8b9aab) 82%, var(--text-primary, #f2ede4));
}

.home-panel[data-home-panel-content="notices"] .today-chat-thread-view {
    flex: 1 1 auto;
    min-height: 0;
}

.home-panel[data-home-panel-content="today"] .today-dashboard-card__calendar-nav {
    position: absolute;
    top: max(4px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    line-height: 0;
    box-sizing: border-box;
}

.home-panel[data-home-panel-content="today"] .today-dashboard-card__calendar-nav:hover {
    background: color-mix(in srgb, var(--surface-card-strong) 96%, var(--brand-primary) 8%);
}

.home-panel[data-home-panel-content="today"] .today-dashboard-card__calendar-nav:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.home-panel[data-home-panel-content="today"] .today-dashboard-card__calendar-nav>i {
    font-size: 1.05rem;
}

/* Keep hero copy clear of the corner calendar control. */
.home-panel[data-home-panel-content="today"] .today-dashboard-card:has(.today-dashboard-card__calendar-nav) #today-lessons-list>.today-hero-card .today-hero-card__copy {
    padding-right: 44px;
}

.home-panel[data-home-panel-content="lessons"] .common-card.student-lessons-card,
.home-panel[data-home-panel-content="practice"] .common-card.student-lessons-card {
    padding: 4px var(--space-4) var(--space-3);
    gap: 8px;
}

.home-panel[data-home-panel-content="today"] #today-lessons-list {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Flex gives this node a tall box; default grid align-content:stretch grows auto rows
       and stretches hero/lesson cards. Pack rows to content height and scroll instead. */
    align-content: start;
}

.common-card {
    display: grid;
    gap: var(--ll-card-gap);
    padding: var(--ll-card-padding-y) var(--ll-card-padding-x);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border-default));
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-card-strong) 94%, white);
    box-shadow: 0 28px 64px rgba(17, 28, 24, 0.17);
}

.today-lessons-list {
    display: grid;
    gap: var(--ll-list-gap);
    min-width: 0;
}

.today-weather-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 12px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.today-weather-banner__header {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    min-width: 0;
    color: var(--text-secondary);
}

.today-weather-banner__header strong {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    flex-shrink: 0;
}

.today-weather-banner__header .today-weather-banner__location {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.today-weather-banner__location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
}

.today-weather-banner__location-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

.today-weather-banner__edit {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.today-weather-banner__edit:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.18);
}

.today-weather-banner__edit i {
    font-size: 0.64rem;
}

.today-weather-banner__grid {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    width: auto;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.today-weather-banner__grid::-webkit-scrollbar {
    display: none;
}

.today-weather-banner__grid.is-dragging {
    cursor: grabbing;
}

.today-weather-day {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
}

.today-weather-day--interactive {
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 10px;
    transition: background 120ms ease, color 120ms ease;
}

.today-weather-day--interactive:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

.today-weather-day--interactive:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand-primary) 70%, transparent);
    outline-offset: 2px;
}

.today-weather-day__name,
.today-weather-day__temp,
.today-weather-day__icon {
    margin: 0;
}

.today-weather-day.is-today {
    color: var(--text-primary);
    font-weight: 700;
}

.today-weather-day__icon {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1;
}

.today-weather-day__name {
    color: inherit;
    font-weight: 600;
}

.today-weather-day__temp {
    color: var(--text-primary);
    font-weight: 700;
}

.today-weather-banner__empty {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.2;
}

.today-dashboard-card {
    container-type: inline-size;
    container-name: today-dashboard;
    display: grid;
    gap: 12px;
    min-width: 0;
}

.today-hero-card {
    display: grid;
    gap: 10px;
    padding: clamp(12px, 3.2vw, 18px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--gradient-surface-quiet), var(--bg-card);
    box-shadow: var(--shadow-soft);
}

/* Hero sits in the scroll list: flush with section headings and lesson cards (no inset frame). */
#today-lessons-list>.today-hero-card {
    margin: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0 clamp(6px, 1.5vw, 10px);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

#today-lessons-list>.today-hero-card .today-hero-card__copy {
    gap: 4px;
}

.today-hero-card__copy {
    display: grid;
    gap: 6px;
    max-width: 48ch;
    min-width: 0;
}

.today-hero-card__copy:has(.today-hero-card__headline-row .today-hero-card__actions) {
    max-width: none;
}

.today-hero-card__eyebrow-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.today-hero-card__eyebrow {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.today-hero-card__headline-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(8px, 2.5cqi, 16px);
    width: 100%;
    min-width: 0;
}

.today-hero-card__headline-row .today-hero-card__actions {
    flex: 0 0 auto;
    display: grid;
    gap: 0;
    margin-top: 0;
    max-width: none;
    width: auto;
    align-self: center;
    justify-self: auto;
}

.today-hero-card h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    color: var(--text-heading);
    font-size: max(var(--ll-type-display-size), clamp(1.25rem, 4.8vw, 1.75rem));
    font-weight: var(--ll-type-display-weight);
    line-height: var(--ll-type-display-line);
    letter-spacing: -0.025em;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Keep Start Lesson beside the headline from ~360px; grow with the dashboard card. */
.today-hero-card__headline-row .today-hero-card__primary-action.ll-btn--lg {
    width: auto;
    max-width: none;
    flex-shrink: 0;
    min-height: clamp(30px, 10cqi, 44px);
    padding:
        clamp(var(--ll-space-1), 1.5cqi, var(--ll-space-2))
        clamp(10px, 3.6cqi, 20px);
    font-size: clamp(var(--ll-type-meta-size), 3.1cqi, var(--ll-type-body-size));
    font-weight: var(--ll-type-label-weight);
    line-height: 1.2;
    white-space: nowrap;
    border-radius: clamp(8px, 2cqi, 12px);
}

.today-hero-card p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 54ch;
}

.today-hero-card__actions {
    display: grid;
    gap: 8px;
    align-self: center;
    justify-self: start;
    max-width: 280px;
    width: auto;
}

.today-hero-card__primary-action {
    width: auto;
    max-width: none;
    min-height: 36px;
    padding: 9px 16px;
    gap: 6px;
    justify-content: center;
    justify-self: start;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    white-space: nowrap;
    text-align: center;
    border-radius: 12px;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.today-hero-card__primary-action:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
    filter: none;
}

.today-hero-card__primary-action:active {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    transform: translateY(1px) scale(0.97);
    box-shadow: var(--glow-subtle);
}

.today-hero-card__secondary-group {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card-strong) 68%, transparent);
}

.today-hero-card__secondary-label {
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.today-hero-card__secondary-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.today-hero-card__secondary-action {
    min-height: 38px;
    padding: 8px 12px;
    border-color: var(--border-subtle);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card-strong) 88%, white);
    color: var(--text-primary);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
    box-shadow: none;
}

.today-hero-card__secondary-action:hover {
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    border-color: color-mix(in srgb, var(--text-secondary) 24%, var(--border-subtle));
}

.today-hero-card__golf-bag-icon {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.today-dashboard-section {
    display: grid;
    gap: var(--ll-space-2);
    /* 8px: was 12px */
    min-width: 0;
}

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

.today-dashboard-section__header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.today-dashboard-section__subtext {
    margin: 2px 0 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
}

.today-lesson-stack,
.today-recent-lessons__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* Instructor Today: delete via trash in card side (all widths). Swipe strip markup stays; button hidden. */
.today-lesson-swipe-row {
    position: relative;
    overflow-x: visible;
    overflow-y: visible;
    z-index: 0;
    border-radius: var(--radius-md);
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.today-lesson-swipe-track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.today-lesson-swipe-track.is-swiping-touch {
    transition: none;
}

.today-lesson-swipe-main {
    grid-column: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    touch-action: auto;
}

.today-recent-lesson-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--ll-list-row-padding-x);
    row-gap: 2px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--ll-list-row-padding-y) var(--ll-list-row-padding-x) var(--ll-list-row-padding-y) 14px;
    text-align: left;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    overflow: visible;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.today-lesson-swipe-row:has(.today-row-actions-menu[open]),
.today-recent-lesson-card:has(.today-row-actions-menu[open]) {
    z-index: 24;
}

/* Global `button { max-width: 180px }` would shrink the open row to a pill; cards must stay full width. */
.today-recent-lesson-card .today-recent-lesson-card__body,

.today-recent-lesson-card>.today-recent-lesson-card__content,
.today-recent-lesson-card .today-row-actions-menu__item,
.today-lesson-swipe-delete {
    max-width: none;
}

.today-recent-lesson-card--no-side {
    grid-template-columns: 1fr;
}

.today-recent-lesson-card:hover {
    transform: translateY(-1px);
    border-color: rgba(63, 168, 90, 0.42);
}

.today-recent-lesson-card:active {
    transform: scale(0.99);
}

.today-recent-lesson-card__body {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.today-recent-lesson-card__body:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.today-recent-lesson-card__side {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    align-self: center;
}

.today-row-actions-menu {
    position: relative;
}

.today-row-actions-menu[open] {
    z-index: 3;
}

.today-row-actions-menu__toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.today-row-actions-menu__toggle::-webkit-details-marker {
    display: none;
}

.today-row-actions-menu__toggle::marker {
    content: '';
}

.today-row-actions-menu__toggle:hover,
.today-row-actions-menu[open]>.today-row-actions-menu__toggle {
    background: color-mix(in srgb, var(--surface) 86%, var(--brand));
    color: var(--text-primary);
}

.today-row-actions-menu__toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.today-row-actions-menu__toggle>span {
    font-size: 1.1rem;
    font-weight: var(--ll-type-label-weight);
    letter-spacing: 0.08em;
    line-height: 1;
    transform: translateY(-1px);
}

.today-row-actions-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    gap: 4px;
    min-width: 148px;
    z-index: 12;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    box-shadow: 0 18px 44px rgba(17, 28, 24, 0.18);
}

.today-row-actions-menu__panel[data-drop-direction="up"] {
    top: auto;
    bottom: calc(100% + 6px);
}

.upload-media-actions-menu__panel[data-drop-direction="up"] {
    top: auto;
    bottom: calc(100% + 6px);
}

.today-row-actions-menu__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    width: 100%;
    min-height: 38px;
    margin: 0;
    padding: 8px 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.today-row-actions-menu__item:hover {
    background: color-mix(in srgb, var(--surface) 88%, var(--brand));
}

.today-row-actions-menu__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.today-row-actions-menu__item i,
.today-row-actions-menu__item .contact-row-reach-icon {
    flex: 0 0 auto;
}

.today-row-actions-menu__item--reach .contact-row-reach-icon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.today-row-actions-menu__item--danger {
    color: #b91c1c;
}

.today-row-actions-menu__item--danger:hover {
    background: rgba(220, 38, 38, 0.1);
    color: #991b1b;
}

.today-recent-lesson-card__schedule-line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.today-recent-lesson-card__schedule-line .today-recent-lesson-card__status {
    margin-top: 0;
    margin-left: auto;
    width: auto;
    flex: 0 0 auto;
    gap: 10px;
}

.today-recent-lesson-card__schedule-line .today-recent-lesson-card__date + .today-recent-lesson-card__time::before {
    content: '·';
    margin-right: 6px;
    color: var(--text-secondary);
    font-weight: var(--ll-type-meta-weight);
    opacity: 0.72;
}

.today-recent-lesson-card__schedule-line .today-recent-lesson-card__meta {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-recent-lesson-card__schedule-line :is(
    .today-recent-lesson-card__date,
    .today-recent-lesson-card__time,
    .today-recent-lesson-card__kind
) + .today-recent-lesson-card__meta::before {
    content: '·';
    margin-right: 6px;
    color: var(--text-secondary);
    font-weight: var(--ll-type-meta-weight);
    opacity: 0.72;
}

.today-recent-lesson-card__name-line {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.today-recent-lesson-card__detail-line {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.today-recent-lesson-card__detail-line .today-recent-lesson-card__meta {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-recent-lesson-card__detail-line .today-recent-lesson-card__title-sub {
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-recent-lesson-card__detail-line .today-recent-lesson-card__status {
    margin-top: 0;
    flex: 0 0 auto;
}

.today-recent-lesson-card__detail-line .lesson-insight-tags {
    margin-top: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.today-recent-lesson-card__time {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: max(var(--ll-type-meta-size), clamp(0.72rem, 0.52rem + 1.05vw, 0.82rem));
    font-weight: var(--ll-type-meta-weight);
    font-variant-numeric: tabular-nums;
    line-height: var(--ll-type-meta-line);
    letter-spacing: -0.02em;
}

.today-recent-lesson-card__date {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.5rem + 0.8vw, 0.78rem));
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.today-recent-lesson-card__kind {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: max(var(--ll-type-micro-size), clamp(0.62rem, 0.48rem + 0.75vw, 0.7rem));
    font-weight: var(--ll-type-micro-weight);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-recent-lesson-card__kind--lesson {
    color: rgba(34, 197, 94, 0.95);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.today-recent-lesson-card__kind--practice {
    color: rgba(56, 189, 248, 0.98);
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.28);
}

.today-recent-lesson-card__kind--thought,
.today-recent-lesson-card__kind--note {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.today-recent-lesson-card__name-line .today-recent-lesson-card__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-recent-lesson-card__title {
    color: var(--text-primary);
    font-size: max(var(--ll-type-heading-size), clamp(0.86rem, 0.38rem + 2.05vw, 1.02rem));
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.today-recent-lesson-card__meta {
    color: var(--text-secondary);
    font-size: max(var(--ll-type-body-sm-size), clamp(0.74rem, 0.56rem + 0.95vw, 0.86rem));
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
}

.today-recent-lesson-card__title-sub {
    display: block;
    margin-top: 0;
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.5rem + 0.9vw, 0.78rem));
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    color: var(--text-secondary);
}

.today-recent-lesson-card--student-hidden {
    opacity: 0.72;
    border-style: dashed;
}

.today-recent-lesson-card--student-hidden .today-recent-lesson-card__title {
    font-style: italic;
}

/* Media / summary / sent — single line on narrow viewports (e.g. 360px). */
.today-recent-lesson-card__status {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    color: var(--text-secondary);
    font-size: max(var(--ll-type-meta-size), clamp(0.62rem, 0.5rem + 0.65vw, 0.7rem));
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
}

.today-recent-lesson-card__status-item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.today-recent-lesson-card__status-item i {
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.56rem + 0.55vw, 0.78rem));
    opacity: 0.92;
}

.today-recent-lesson-card__status-item--media i {
    color: color-mix(in srgb, var(--text-primary) 72%, var(--brand, #3fa85a) 28%);
}

.today-recent-lesson-card__status-item--summary i {
    color: color-mix(in srgb, var(--brand, #3fa85a) 88%, var(--text-secondary) 12%);
}

.today-recent-lesson-card__status-item--sent i {
    color: color-mix(in srgb, var(--text-primary) 68%, var(--brand, #3fa85a) 32%);
    opacity: 0.9;
}

.ll-lesson-sent-badge {
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand, #3fa85a) 38%, var(--stroke) 62%);
    background: color-mix(in srgb, var(--brand, #3fa85a) 16%, var(--surface, #1a1a1a) 84%);
    color: color-mix(in srgb, var(--brand, #3fa85a) 78%, var(--text-primary) 22%);
    font-size: max(var(--ll-type-meta-size), 0.62rem);
    font-weight: var(--ll-type-label-weight);
    line-height: 1.2;
    white-space: nowrap;
}

.ll-lesson-sent-badge i {
    font-size: max(0.58rem, calc(var(--ll-type-meta-size) * 0.92));
    opacity: 0.92;
}

.ll-lesson-sent-badge__label {
    letter-spacing: 0.02em;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .contact-row-name .ll-lesson-sent-badge {
    flex: 0 0 auto;
}

.today-recent-lesson-card__status-item--gap {
    gap: 0;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger, #c44) 42%, var(--stroke) 58%);
    background: color-mix(in srgb, var(--danger, #c44) 14%, var(--surface, #1a1a1a) 86%);
    color: color-mix(in srgb, var(--danger, #e05555) 72%, var(--text-secondary) 28%);
    font-size: max(var(--ll-type-meta-size), 0.62rem);
    font-weight: var(--ll-type-label-weight);
    line-height: 1.2;
    white-space: nowrap;
}

.today-recent-lesson-card__status-sent {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    overflow: hidden;
}

.today-recent-lesson-card__status-sent>i {
    flex: 0 0 auto;
    font-size: max(var(--ll-type-meta-size), clamp(0.63rem, 0.52rem + 0.45vw, 0.72rem));
    opacity: 0.88;
}

.today-recent-lesson-card__status-sent-text {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    overflow: hidden;
}

.today-recent-lesson-card__status-sent-text>span[aria-hidden="true"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.today-recent-lesson-card .lesson-insight-tags {
    margin-top: 2px;
}

.today-recent-lessons__view-all {
    justify-self: stretch;
    margin-top: 2px;
    min-height: 44px;
    max-width: none;
    color: var(--primary-strong);
    border-color: rgba(63, 168, 90, 0.28);
    background: rgba(63, 168, 90, 0.08);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
}

.today-dashboard-empty {
    margin: 0;
    color: color-mix(in srgb, var(--text-secondary) 58%, transparent);
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
}

.today-recent-lessons__empty-stack {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.today-student-empty-state {
    display: grid;
    gap: 16px;
    margin-top: 4px;
}

.today-student-empty-state__lead {
    max-width: 36rem;
}

.today-dashboard-card .student-practice-upsell-root {
    width: 100%;
    max-width: 36rem;
}

.today-dashboard-card .student-practice-upsell-card .student-practice-upsell-card__cta.ll-btn.ll-btn--solid.ll-btn--primary {
    width: auto;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.88rem;
    margin-top: 2px;
}

.today-recent-lessons__empty-cta {
    min-height: 44px;
    color: var(--primary-strong);
    border-color: rgba(63, 168, 90, 0.28);
    background: rgba(63, 168, 90, 0.08);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
}

.today-dashboard-card .today-weather-banner {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.today-weather-banner--hero,
.today-weather-banner--titlebar {
    flex: 0 1 auto;
    min-width: 0;
}

.today-weather-banner__chip,
.today-weather-banner__fallback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid rgba(63, 168, 90, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    box-shadow: none;
}

.today-weather-banner--hero .today-weather-banner__chip,
.today-weather-banner--hero .today-weather-banner__fallback,
.today-weather-banner--titlebar .today-weather-banner__chip,
.today-weather-banner--titlebar .today-weather-banner__fallback {
    box-sizing: border-box;
    min-height: 34px;
}

.today-weather-banner__fallback {
    cursor: pointer;
    font: inherit;
}

.today-weather-banner__fallback--loading {
    cursor: default;
    pointer-events: none;
}

.today-weather-banner__edit--placeholder {
    width: 22px;
    height: 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    visibility: hidden;
}

.today-weather-banner--hero .today-weather-banner__fallback .today-weather-banner__empty,
.today-weather-banner--titlebar .today-weather-banner__fallback .today-weather-banner__empty {
    display: inline-block;
    min-width: 19ch;
}

.today-weather-banner__summary {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.today-weather-banner--hero .today-weather-day__temp,
.today-weather-banner--hero .today-weather-banner__empty,
.today-weather-banner--titlebar .today-weather-day__temp,
.today-weather-banner--titlebar .today-weather-banner__empty {
    font-size: 0.74rem;
}

.today-weather-banner--hero .today-weather-banner__city,
.today-weather-banner--titlebar .today-weather-banner__city,
.today-weather-banner--hero .today-weather-banner__location-text,
.today-weather-banner--titlebar .today-weather-banner__location-text {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.today-weather-banner--hero .today-weather-banner__primary,
.today-weather-banner--titlebar .today-weather-banner__primary {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: max-content;
    flex: 0 0 auto;
}

.today-weather-banner--hero .today-weather-banner__summary,
.today-weather-banner--titlebar .today-weather-banner__summary {
    gap: 4px;
    flex: 0 0 auto;
    min-width: max-content;
}

.today-weather-banner--hero .today-weather-banner__chip,
.today-weather-banner--titlebar .today-weather-banner__chip,
.today-weather-banner--hero .today-weather-banner__fallback,
.today-weather-banner--titlebar .today-weather-banner__fallback {
    gap: 6px;
    padding: 6px 7px;
}

.today-weather-banner--hero .today-weather-day__temp,
.today-weather-banner--titlebar .today-weather-day__temp {
    display: inline-block;
    flex-shrink: 0;
    min-width: 3ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.today-weather-banner--hero .today-weather-day__temp--placeholder,
.today-weather-banner--titlebar .today-weather-day__temp--placeholder {
    color: var(--text-muted);
    opacity: 0.72;
}

.today-weather-banner--hero .today-weather-day__icon,
.today-weather-banner--titlebar .today-weather-day__icon {
    flex-shrink: 0;
    font-size: 0.82rem;
}

.today-weather-banner--hero .today-weather-banner__empty,
.today-weather-banner--titlebar .today-weather-banner__empty {
    color: var(--text-secondary);
}

.today-weather-banner--titlebar {
    /* display is owned by shell-titlebar (Ask/Today + [hidden] only). */
    align-items: center;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .today-weather-banner--titlebar .today-weather-day--interactive {
        transition: none;
    }
}

/* Wide dashboard: hero copy spans the card; CTA stays inline in the headline row. */
@container today-dashboard (min-width: 880px) {
    .today-hero-card__copy {
        max-width: none;
        min-width: 0;
    }

    .today-recent-lessons__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 480px) {
    .today-weather-day {
        border-radius: 10px;
    }
}

@media (min-width: 640px) {
    .today-weather-banner__location-text {
        max-width: 36ch;
    }
}

.today-empty-actions {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.today-lesson-row {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
    column-gap: 10px;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--stroke));
    border-radius: var(--radius-md);
    padding: 10px 12px 10px 16px;
    /* was: 14px 14px 14px 20px */
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.today-lesson-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(20, 30, 26, 0.12);
}

.today-lesson-row:active {
    transform: scale(0.99);
}

.today-lesson-row__time {
    grid-row: 1;
    grid-column: 1;
    font-size: max(var(--ll-type-meta-size), clamp(0.72rem, 0.52rem + 1.05vw, 0.82rem));
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    color: var(--brand-deep);
    white-space: nowrap;
    align-self: center;
}

.today-lesson-row__main {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
    border-top: 1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
    margin: 0;
}

.today-lesson-row__title {
    min-width: 0;
    font-size: max(var(--ll-type-heading-size), clamp(0.87rem, 0.38rem + 2.05vw, 1.03rem));
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.today-lesson-row__meta {
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.52rem + 0.9vw, 0.78rem));
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    color: var(--text-muted);
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.today-lesson-row__actions {
    grid-row: 1;
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.today-lesson-row__goto {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 64px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--surface-strong);
    color: var(--brand-deep);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.today-lesson-row__goto:hover {
    background: var(--surface);
    border-color: var(--brand);
    color: var(--brand);
}

.today-lesson-row__goto i {
    font-size: 1em;
}

.today-lesson-row__goto--icon {
    min-width: 34px;
    width: 34px;
    padding: 0;
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.today-lesson-row__goto--icon:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.today-lesson-row__message {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface-strong);
    color: var(--brand-deep);
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.today-lesson-row__message:hover {
    background: var(--surface);
    border-color: var(--brand);
    color: var(--brand);
}

.today-lesson-row__message i {
    font-size: 1em;
}

.home-panel[data-home-panel-content="sessions"] .directory-shell--student-practice-upsell {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.home-panel[data-home-panel-content="sessions"] .directory-shell--student-practice-upsell .sessions-hub-card {
    flex: 0 1 auto;
    margin-bottom: 0;
}

.home-panel[data-home-panel-content="sessions"]:has(.student-practice-upsell-root) {
    scroll-padding-bottom: 108px;
}

.student-practice-upsell-root {
    width: 100%;
}

.home-panel[data-home-panel-content="sessions"] .student-practice-upsell-root {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    z-index: 8;
    flex-shrink: 0;
    margin-top: 0;
    padding: 0 0 4px;
}

.student-practice-upsell-card {
    padding: 14px 16px 16px;
    border: 1px solid color-mix(in srgb, var(--brand, #0f766e) 45%, var(--stroke));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand-soft, rgba(15, 118, 110, 0.12)) 85%, var(--surface-card-strong, #1a2332));
    box-shadow:
        0 8px 28px color-mix(in srgb, var(--brand, #0f766e) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--brand, #0f766e) 22%, transparent);
}

.student-practice-upsell-card__lead {
    margin: 0 0 8px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
}

.student-practice-upsell-card__desc {
    margin: 0 0 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.home-panel[data-home-panel-content="sessions"] .student-practice-upsell-card .student-practice-upsell-card__cta.ll-btn.ll-btn--solid.ll-btn--primary {
    width: auto;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.88rem;
    margin-top: 2px;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-dashboard {
    gap: var(--ll-space-2);
}

.home-panel[data-home-panel-content="sessions"] .directory-dashboard-group .sessions-hub-session-row {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--stroke);
    padding-left: 4px;
    padding-right: 8px;
}

.home-panel[data-home-panel-content="sessions"] .directory-dashboard-group .sessions-hub-session-row:last-child,
.home-panel[data-home-panel-content="sessions"] .directory-dashboard-group .sessions-hub-load-more-row:last-child {
    border-bottom: 0;
}

.home-panel[data-home-panel-content="sessions"] .directory-dashboard-group .sessions-hub-session-row:hover,
.home-panel[data-home-panel-content="sessions"] .directory-dashboard-group .sessions-hub-session-row:has(.today-row-actions-menu[open]) {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 6%, transparent);
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-load-more-row {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row:has(.today-row-actions-menu[open]) {
    z-index: 24;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row__open {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row__open:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .contact-row-stats-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .contact-row-status-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1px;
    min-width: 0;
    max-width: 100%;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .today-recent-lesson-card__status {
    display: inline-flex;
    margin-top: 0;
    width: auto;
    max-width: 100%;
    gap: 5px;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .lesson-insight-tags {
    margin-top: 0;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row--student-hidden {
    opacity: 0.72;
    border-style: dashed;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row--student-hidden .today-recent-lesson-card__title {
    font-style: italic;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .today-recent-lesson-card__student-history {
    max-width: none;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-session-row .today-recent-lesson-card__student-history .ll-role-avatar {
    --ll-role-avatar-size: 36px;
}

.sessions-hub-group {
    margin-bottom: 10px;
}

.sessions-hub-group__summary {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    padding: 8px 2px;
}

.sessions-hub-group__label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sessions-hub-group__count {
    flex: 0 0 auto;
}

.sessions-hub-group__body {
    padding-top: 4px;
}

.sessions-hub-group__summary::-webkit-details-marker {
    display: none;
}

.sessions-hub-group__summary .ll-disclosure-chevron {
    margin-left: auto;
}

.sessions-hub-group[open] > .sessions-hub-group__summary .ll-disclosure-chevron--accordion {
    opacity: var(--ll-disclosure-accordion-chevron-expanded-opacity, 0.16);
    transform: rotate(180deg);
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-section--collapsible {
    gap: 0;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-panel-group {
    margin-bottom: 0;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-panel-group > .sessions-hub-group__summary {
    padding: 8px 2px;
}

.home-panel[data-home-panel-content="sessions"] .sessions-hub-panel-group .directory-dashboard-section__title {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.sessions-hub-group__load-more,
.sessions-hub-clear-filters {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    padding: 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--stroke) 80%, var(--brand));
    border-radius: 10px;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.home-panel[data-home-panel-content="sessions"] .directory-dashboard-empty-hint + .sessions-hub-clear-filters {
    margin-top: 4px;
}

.today-recent-lesson-card__content {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.today-recent-lesson-card__content .today-recent-lesson-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.today-recent-lesson-card__student-history {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 999px;
    max-width: none;
    width: auto;
    height: auto;
    line-height: 0;
}

.today-recent-lesson-card__student-history .ll-role-avatar {
    --ll-role-avatar-size: 28px;
}

.today-recent-lesson-card__student-history .ll-role-avatar:has(.ll-role-avatar__photo:not([hidden])) .ll-role-avatar__initials {
    visibility: hidden;
}

.today-recent-lesson-card__student-history:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
    outline-offset: 2px;
}

.today-recent-lesson-card__student-history--placeholder {
    cursor: default;
    pointer-events: none;
}

.sessions-hub-student-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 14%, var(--surface-muted, #f3f4f6));
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
}

.student-session-history {
    padding: 4px 0 12px;
}

.student-session-history__header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.student-session-history__name {
    margin: 0;
    font-size: 1.05rem;
}

.student-session-history__stats {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.student-session-history__timeline .sessions-hub-group {
    margin-bottom: 12px;
}

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

.student-lesson-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 1px solid var(--stroke);
    border-radius: var(--radius-md);
    padding: 16px 14px 16px 20px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.student-lesson-row:hover {
    transform: translateY(-1px);
    border-color: rgba(63, 168, 90, 0.42);
}

.student-lesson-row:active {
    transform: scale(0.99);
}

.student-lesson-row__main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.student-lesson-row__title {
    color: var(--text-primary);
    font-size: max(var(--ll-type-heading-size), clamp(0.87rem, 0.38rem + 2.05vw, 1.04rem));
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-lesson-row__instructor {
    color: var(--text-secondary);
    font-size: max(var(--ll-type-body-sm-size), clamp(0.78rem, 0.6rem + 1vw, 0.9rem));
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.student-lesson-row__meta {
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.52rem + 0.9vw, 0.78rem));
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-lesson-row__goto {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    min-width: 64px;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--brand-deep);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    cursor: pointer;
    transition: color 140ms ease, transform 140ms ease;
}

.student-lesson-row__goto:hover {
    color: var(--brand);
    transform: translateX(1px);
}

.student-lesson-row__goto i {
    font-size: 1em;
    flex-shrink: 0;
}

.lesson-insight-accent {
    position: absolute;
    inset: 10px auto 10px 0;
    width: 4px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 18px rgba(63, 168, 90, 0.3);
}

.lesson-insight--driver .lesson-insight-accent {
    background: #38bdf8;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.32);
}

.lesson-insight--putting .lesson-insight-accent {
    background: #f4c542;
    box-shadow: 0 0 18px rgba(244, 197, 66, 0.3);
}

.lesson-insight--tempo .lesson-insight-accent {
    background: #a78bfa;
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.32);
}

.lesson-insight--short-game .lesson-insight-accent {
    background: #fb7185;
    box-shadow: 0 0 18px rgba(251, 113, 133, 0.3);
}

.lesson-insight-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.lesson-insight-tag {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(63, 168, 90, 0.24);
    border-radius: 999px;
    background: rgba(63, 168, 90, 0.14);
    color: var(--primary-strong);
    font-size: var(--ll-type-micro-size);
    font-weight: var(--ll-type-micro-weight);
    line-height: var(--ll-type-micro-line);
}

.contact-edit-lesson-item {
    position: relative;
    padding-left: 20px;
    background: var(--bg-card);
    border-color: var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.contact-edit-lesson-item::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 999px;
    background: var(--primary);
}

.contact-edit-lesson-item:hover {
    transform: translateY(-1px);
    border-color: rgba(63, 168, 90, 0.42);
}

.contact-edit-lesson-item:active {
    transform: scale(0.99);
}

.contact-edit-lesson-title {
    color: var(--text-primary);
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
}

.contact-edit-lesson-meta,
.contact-edit-lesson-date {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.home-lesson-ask {
    width: 100%;
    max-width: min(100%, 560px);
    margin: 0 auto var(--ll-space-2);
    /* 8px: was 14px */
    padding: 0 4px;
    box-sizing: border-box;
}

.home-lesson-ask__composer {
    display: flex;
    align-items: flex-end;
    gap: var(--ll-space-2);
    padding: var(--ll-composer-padding-y) var(--ll-space-2) var(--ll-composer-padding-y) 12px;
    /* 6px 8px 6px 12px: was 8px 8px 8px 14px */
    border: 1px solid var(--stroke);
    border-radius: 22px;
    background: var(--surface-strong);
    box-shadow: var(--shadow);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.home-lesson-ask__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.home-lesson-ask__composer:focus-within {
    border-color: var(--brand);
    box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.home-lesson-ask__input {
    flex: 1;
    min-width: 0;
    min-height: 24px;
    max-height: 160px;
    margin: 0;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
    resize: none;
    outline: none;
}

.home-lesson-ask__input::placeholder {
    color: var(--muted);
}

.home-lesson-ask__mic {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition:
        color 140ms ease,
        border-color 140ms ease,
        background 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease;
}

.home-lesson-ask__mic:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--brand);
    background: var(--brand-soft);
}

.home-lesson-ask__mic:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.home-lesson-ask__mic.is-listening {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.home-lesson-ask__send {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.home-lesson-ask__send:disabled {
    background: var(--muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.home-lesson-ask__send:not(:disabled):hover {
    filter: brightness(1.05);
}

.home-lesson-ask__send:not(:disabled):active {
    transform: scale(0.96);
}

.home-lesson-ask__answer {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    /* Match composer / cards: hard-coded white breaks dark theme (light --ink on light bg). */
    background: var(--surface-strong);
    color: var(--ink);
}

.home-lesson-ask__answer-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.home-lesson-ask__answer-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.home-lesson-ask__answer-close {
    flex-shrink: 0;
}

.home-lesson-ask__answer-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.today-chat-panel {
    display: grid;
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.today-chat-header h3 {
    margin: 0;
}

.today-chat-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.today-chat-iphone {
    border: none;
    border-radius: var(--radius-lg);
    min-height: 420px;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.today-chat-list-view,
.today-chat-thread-view {
    height: 100%;
    position: absolute;
    inset: 0;
}

.today-chat-list-view {
    position: relative;
    padding: var(--ll-space-1);
    /* 4px: was 6px */
}

.today-chat-instructor-invites {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.today-chat-instructor-invite-card {
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface-soft);
    padding: 10px 12px;
}

.today-chat-instructor-invite-text {
    margin: 0 0 10px;
    font-size: var(--ll-type-body-size);
    line-height: 1.45;
    color: var(--text-primary);
}

.today-chat-instructor-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.today-chat-thread-view {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: var(--ll-space-2);
    /* 8px: was 10px */
    padding: var(--ll-space-2);
    /* 8px: was 10px */
}

.today-chat-list-view[hidden],
.today-chat-thread-view[hidden] {
    display: none !important;
}

.today-chat-thread-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.today-chat-thread-title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
    text-align: center;
}

.today-chat-back-button {
    border: none;
    background: transparent;
    color: var(--primary-strong);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
}

.today-chat-to-row {
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface-soft);
    padding: 6px 8px;
    display: grid;
    gap: 6px;
}

.today-chat-to-row[hidden] {
    display: none !important;
}

.today-chat-thread-view:not(.is-compose-mode) .today-chat-to-row {
    display: none !important;
}

.contact-inline-search,
.context-inline-search {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.sessions-panel-search-mount,
.directory-panel-search-mount,
.library-panel-search-mount,
.calendar-panel-search-mount,
.playbook-panel-search-mount {
    padding: 0 0 var(--ll-space-2);
}

.sessions-browse-filters {
    margin: 0 0 var(--ll-space-3);
    padding: var(--ll-space-3);
    border: 1px solid var(--ll-border-color, #d7dce2);
    border-radius: 10px;
}

.sessions-browse-filters summary {
    cursor: pointer;
    font-weight: 600;
}

.sessions-browse-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.sessions-browse-filters__grid label {
    display: grid;
    gap: 4px;
    font-size: 0.875rem;
}

.sessions-browse-filters__grid input,
.sessions-browse-filters__grid select {
    width: 100%;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--ll-border-color, #d7dce2);
    border-radius: 6px;
    background: var(--ll-surface, #fff);
    color: inherit;
}

.home-panel[data-home-panel-content="directory"] .directory-hub-toolbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0;
    position: relative;
    z-index: 4;
    overflow: visible;
}

.home-panel[data-home-panel-content="directory"] .directory-hub-toolbar .directory-panel-search-mount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.home-panel[data-home-panel-content="directory"] .directory-panel-new-mount {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
}

.home-panel[data-home-panel-content="directory"] .directory-panel-new-mount:empty,
.home-panel[data-home-panel-content="directory"] .directory-panel-new-mount[hidden] {
    display: none;
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu {
    position: relative;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    height: auto;
    min-height: 42px;
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu > summary {
    list-style: none;
    align-self: stretch;
    height: 100%;
    min-height: 42px;
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu > summary::-webkit-details-marker {
    display: none;
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu > summary::marker {
    content: '';
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu[open] > .hub-toolbar-new-btn {
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    border-color: transparent;
    box-shadow: none;
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: grid;
    gap: 4px;
    min-width: 148px;
    padding: 6px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    box-shadow: 0 18px 44px rgba(17, 28, 24, 0.18);
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu:not([open]) > .directory-new-menu__panel {
    display: none;
}

.home-panel[data-home-panel-content="directory"] .directory-new-menu__item {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
}

.context-inline-search--no-suggestions .context-inline-search__suggestions {
    display: none !important;
}

/* Compact hub search to match New student search row (42px total). */
.sessions-hub-card .context-inline-search--filter,
.directory-card .context-inline-search--filter,
.library-card .context-inline-search--filter,
.calendar-card .context-inline-search--filter,
.playbook-library .context-inline-search--filter,
.playbook-hub-card .context-inline-search--filter {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface-soft);
    padding: 0 10px;
}

.sessions-hub-card .context-inline-search--filter .context-inline-search__field-row,
.directory-card .context-inline-search--filter .context-inline-search__field-row,
.library-card .context-inline-search--filter .context-inline-search__field-row,
.calendar-card .context-inline-search--filter .context-inline-search__field-row,
.playbook-library .context-inline-search--filter .context-inline-search__field-row,
.playbook-hub-card .context-inline-search--filter .context-inline-search__field-row {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    align-items: center;
}

.sessions-hub-card .context-inline-search--filter .context-inline-search__input,
.directory-card .context-inline-search--filter .context-inline-search__input,
.library-card .context-inline-search--filter .context-inline-search__input,
.calendar-card .context-inline-search--filter .context-inline-search__input,
.playbook-library .context-inline-search--filter .context-inline-search__input,
.playbook-hub-card .context-inline-search--filter .context-inline-search__input {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
}

.sessions-hub-card .context-inline-search--filter .context-inline-search__input:focus,
.sessions-hub-card .context-inline-search--filter .context-inline-search__input:focus-visible,
.directory-card .context-inline-search--filter .context-inline-search__input:focus,
.directory-card .context-inline-search--filter .context-inline-search__input:focus-visible,
.library-card .context-inline-search--filter .context-inline-search__input:focus,
.library-card .context-inline-search--filter .context-inline-search__input:focus-visible,
.calendar-card .context-inline-search--filter .context-inline-search__input:focus,
.calendar-card .context-inline-search--filter .context-inline-search__input:focus-visible,
.playbook-hub-card .context-inline-search--filter .context-inline-search__input:focus,
.playbook-hub-card .context-inline-search--filter .context-inline-search__input:focus-visible {
    outline: none;
    box-shadow: none;
}

.library-card .library-panel-search-mount,
.playbook-library .library-panel-search-mount {
    padding-bottom: 0;
}

.library-hub-toolbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 8px;
    min-width: 0;
    position: relative;
    z-index: 4;
    overflow: visible;
}

.library-hub-toolbar .library-panel-search-mount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.library-hub-toolbar .playbook-library-add-section {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    align-self: stretch;
    width: auto;
    min-width: 0;
    margin: 0;
    position: relative;
}

.library-hub-toolbar .playbook-library-add-section > summary.hub-toolbar-new-btn {
    list-style: none;
    align-self: stretch;
    width: auto;
    height: 100%;
    min-height: 42px;
    /* Match Lessons/Contacts tinted New chip — do not keep solid primary fill. */
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    border: 0;
    box-shadow: none;
    color: var(--text-primary, #fff);
}

.library-hub-toolbar .playbook-library-add-section > summary.hub-toolbar-new-btn:hover,
.library-hub-toolbar .playbook-library-add-section > summary.hub-toolbar-new-btn:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

.library-hub-toolbar .playbook-library-add-section > summary::-webkit-details-marker {
    display: none;
}

.library-hub-toolbar .playbook-library-add-section > summary::marker {
    content: '';
}

.library-hub-toolbar .playbook-library-add-section[open] > .hub-toolbar-new-btn {
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.library-hub-toolbar .playbook-library-add-section__body {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: min(360px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    box-shadow: 0 18px 44px rgba(17, 28, 24, 0.18);
}

.library-hub-toolbar .playbook-library-add-section:not([open]) > .playbook-library-add-section__body {
    display: none;
}

.playbook-library-dashboard {
    margin-top: 0;
}

.playbook-library-dashboard .directory-dashboard-row__avatar--icon {
    font-size: var(--ll-type-heading-size);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.playbook-library-dashboard .directory-dashboard-row__avatar--icon .playbook-library-shelf-icon-glyph {
    width: 1.25rem;
    height: 1.25rem;
}

.playbook-library .directory-list-view__header,
.playbook-library-list-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}

.playbook-library-list-header--actions-only {
    justify-content: flex-end;
}

.playbook-library .directory-list-view__header .directory-list-view__title,
.playbook-library-list-header .directory-list-view__title {
    flex: 1 1 auto;
    margin: 0;
}

.playbook-library-shelf-actions {
    margin-left: auto;
}

.contact-inline-search--has-selection {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px;
}

.contact-inline-search--has-selection .contact-inline-search__field-row {
    display: contents;
}

.contact-inline-search--has-selection .contact-inline-search__label {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

.contact-inline-search--has-selection .contact-inline-search__value-wrap {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.contact-inline-search--has-selection .contact-inline-search__search-row {
    grid-column: 2;
    grid-row: 2;
}

.contact-inline-search--has-selection .contact-inline-search__suggestions {
    grid-column: 2;
    grid-row: 3;
}

.contact-inline-search__field-row,
.context-inline-search__field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 0;
}

.contact-inline-search__label,
.context-inline-search__label,
.today-chat-to-label {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    color: var(--muted);
}

.contact-inline-search__value-wrap,
.context-inline-search__value-wrap,
.today-chat-to-input-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.contact-inline-search--has-selection .contact-inline-search__value-wrap,
.today-chat-to-row--recipient-selected .today-chat-to-input-wrap {
    flex-wrap: nowrap;
}

.contact-inline-search__search-row,
.context-inline-search__search-row,
.today-chat-to-search-row {
    display: block;
    min-width: 0;
}

.contact-inline-search__search-row[hidden],
.context-inline-search__search-row[hidden],
.today-chat-to-search-row[hidden] {
    display: none !important;
}

.contact-inline-search--has-selection .contact-inline-search__search-row .contact-inline-search__input,
.today-chat-to-row--recipient-selected .today-chat-to-search-row .today-chat-to-input {
    width: 100%;
    padding: 4px 0 0;
}

.contact-inline-search__input,
.context-inline-search__input,
.today-chat-to-input {
    flex: 1 1 8rem;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-title-line);
}

.contact-inline-search__input:focus,
.contact-inline-search__input:focus-visible,
.context-inline-search__input:focus,
.context-inline-search__input:focus-visible,
.today-chat-to-input:focus,
.today-chat-to-input:focus-visible {
    outline: none;
    box-shadow: none;
}

.contact-inline-search__chips,
.context-inline-search__chips,
.today-chat-selected-to {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.contact-inline-search__chip,
.context-inline-search__chip,
.today-chat-to-chip {
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--surface);
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.contact-inline-search__suggestions,
.context-inline-search__suggestions,
.today-chat-to-suggestions {
    display: grid;
    gap: 6px;
}

.contact-inline-search__count,
.context-inline-search__count,
.today-chat-suggestions-count {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    color: var(--muted);
}

.contact-inline-search__more,
.context-inline-search__more,
.today-chat-suggestions-more {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    color: var(--muted);
}

.contact-inline-search__empty,
.context-inline-search__empty,
.ll-empty-state.contact-inline-search__empty,
.ll-empty-state.context-inline-search__empty {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    color: var(--muted);
}

.contact-inline-search__suggestion,
.context-inline-search__suggestion,
.today-chat-suggestion {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface);
    padding: 8px 10px;
    display: block;
    text-align: left;
    cursor: pointer;
}

.contact-inline-search__suggestion-line,
.context-inline-search__suggestion-line,
.today-chat-suggestion-line {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-line);
    color: var(--text-primary, inherit);
}

.lesson-people-picker-inline-search-mount {
    display: none;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-search-mount {
    display: block;
    margin: 0 -10px;
    padding: 6px 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-search-mount .contact-inline-search__field-row {
    min-height: 28px;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-search-mount .contact-inline-search__input {
    padding-left: 8px;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-search-mount .contact-inline-search--has-selection .contact-inline-search__search-row .contact-inline-search__input {
    padding: 4px 0 0 8px;
}

/* Participant pills (name only). Student chips use cool info blue so green CTAs stay primary. */
.contact-inline-search--share-pill .lesson-event-student-chip--share-pill,
.lesson-workspace-share-recipient-lists .lesson-event-student-chip--share-pill,
.lesson-workspace-share-recipient-lists .lesson-event-student-chip--share-student,
.lesson-workspace-inline-participants-field--book .lesson-event-student-chips .lesson-event-student-chip--share-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: auto;
    max-width: min(42vw, 220px);
    padding: 3px 10px 3px 12px;
    border-radius: 999px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    background: color-mix(in srgb, var(--accent-info, #38bdf8) 28%, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 72%);
    border: 1px solid color-mix(in srgb, var(--accent-info, #38bdf8) 48%, transparent);
    color: var(--text-primary, var(--ink));
}

.contact-inline-search--share-pill .lesson-event-student-chip--share-pill .lesson-event-student-chip__label,
.lesson-workspace-share-recipient-lists .lesson-event-student-chip--share-pill .lesson-event-student-chip__label,
.lesson-workspace-share-recipient-lists .lesson-event-student-chip--share-student .lesson-event-student-chip__label,
.lesson-workspace-inline-participants-field--book .lesson-event-student-chips .lesson-event-student-chip--share-pill .lesson-event-student-chip__label {
    max-width: min(38vw, 180px);
}

.contact-inline-search--share-pill .lesson-event-student-chip--share-pill .lesson-event-student-chip__remove,
.lesson-workspace-share-recipient-lists .lesson-event-student-chip--share-pill .lesson-event-student-chip__remove,
.lesson-workspace-inline-participants-field--book .lesson-event-student-chips .lesson-event-student-chip--share-pill .lesson-event-student-chip__remove {
    flex-shrink: 0;
    opacity: 0.85;
}

.lesson-workspace-inline-participants-field--share .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar,
.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar {
    display: flex !important;
}

.lesson-workspace-inline-participants-field--share .lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card,
.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card {
    margin-top: 0;
}

.lesson-workspace-inline-participants-field--share .lesson-people-picker-inline-search-mount,
.lesson-workspace-inline-participants-field--share .lesson-people-picker-inline-search-mount .contact-inline-search__chips,
.lesson-workspace-inline-participants-field--book .lesson-people-picker-inline-search-mount,
.lesson-workspace-inline-participants-field--book .lesson-people-picker-inline-search-mount .contact-inline-search__chips,
.lesson-workspace-inline-participants-field--unified .lesson-people-picker-inline-search-mount,
.lesson-workspace-inline-participants-field--unified .lesson-people-picker-inline-search-mount .contact-inline-search__chips {
    display: none !important;
}

.lesson-workspace-inline-participants-field--share .lesson-workspace-inline-participants-picker #lesson-people-picker-recent[hidden],
.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker #lesson-people-picker-recent[hidden],
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker #lesson-people-picker-recent[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
}

.today-chat-conversations {
    border: none;
    border-radius: 12px;
    background: transparent;
    padding: 4px;
    height: 100%;
    overflow: auto;
}

.today-chat-messages {
    border: none;
    border-radius: 12px;
    background: transparent;
    padding: 8px 4px;
    overflow: auto;
}

.today-chat-conversation-item {
    display: flex;
    align-items: stretch;
    gap: 4px;
    width: 100%;
}

.today-chat-conversation-item .today-chat-conversation {
    flex: 1;
    min-width: 0;
}

.today-chat-conversation-hide {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.today-chat-conversation-item:hover .today-chat-conversation-hide,
.today-chat-conversation-hide:focus-visible {
    opacity: 1;
}

.today-chat-conversation-hide:hover {
    color: var(--text-primary);
    border-color: var(--stroke);
    background: var(--surface-soft);
}

.today-chat-conversation-hide:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.today-chat-conversation {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ll-list-gap);
    /* 8px: was 8px, explicit token */
    text-align: left;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    padding: var(--ll-list-row-padding-y) var(--ll-list-row-padding-x);
    /* 8px 10px: same as token */
    color: inherit;
    cursor: pointer;
    max-width: 100%;
}

.today-chat-conversation:hover {
    border-color: var(--stroke);
    background: var(--surface-soft);
}

.today-chat-conversation.is-active {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.today-chat-conversation-title {
    font-weight: var(--ll-type-heading-weight);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.today-chat-conversation-preview {
    color: var(--muted);
    font-size: var(--ll-type-body-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.today-chat-conversation-open {
    color: var(--muted);
    font-size: var(--ll-type-body-sm-size);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
}

.today-chat-empty {
    margin: 0;
    color: var(--muted);
}

.today-chat-message {
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.today-chat-message.is-current-user {
    border-color: rgba(63, 168, 90, 0.45);
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    color: #fff;
}

.today-chat-message-meta {
    margin: 0 0 4px;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
}

.today-chat-message-body {
    margin: 0;
    color: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
}

.today-chat-composer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-elevated);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.today-chat-input {
    border-radius: 999px;
    min-height: 38px;
    border-color: transparent;
    background: rgba(255, 255, 255, 0.04);
    padding-inline: 14px;
}

.today-chat-accessory-button,
.today-chat-send-button {
    border: none;
    border-radius: 999px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 100ms ease, background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.today-chat-accessory-button {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.today-chat-accessory-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.today-chat-accessory-button:active,
.today-chat-send-button:active {
    transform: scale(0.94);
}

.today-chat-accessory-button.is-recording {
    background: #fee2e2;
    color: #dc2626;
}

.today-chat-send-button {
    width: 38px;
    padding: 0;
    background: var(--primary);
    color: #fff;
    font-size: var(--ll-type-body-size);
    box-shadow: 0 6px 18px rgba(45, 122, 59, 0.3);
}

.today-chat-send-button:hover {
    background: var(--primary-strong);
}

.today-chat-compose-fab {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.34);
    cursor: pointer;
}

.today-chat-message.is-current-user .today-chat-message-meta {
    color: rgba(255, 255, 255, 0.88);
}

.lesson-workspace-card {
    gap: 14px;
    padding: 16px 18px;
}

.lesson-workspace-card[hidden] {
    display: none;
}

.lesson-workspace-card.is-collapsed {
    padding: 16px 18px;
    border: 1px solid var(--stroke);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

.lesson-inline-warning {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--warning, #d97706);
    background: var(--warning-soft, #fff7ed);
}

.lesson-inline-warning-message {
    margin: 0;
    color: var(--ink);
    line-height: 1.4;
}

.lesson-inline-warning-actions {
    margin-top: 0;
}

.lesson-workspace-body {
    display: grid;
    gap: 12px;
}

.lesson-workspace-body[hidden] {
    display: none;
}

.lesson-collapsed-summary {
    margin: 0;
}

.lesson-collapsed-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: var(--surface);
}

.lesson-collapsed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lesson-collapsed-primary {
    line-height: 1.35;
    font-weight: 700;
    color: var(--ink);
}

.lesson-collapsed-secondary {
    margin-top: 2px;
    line-height: 1.35;
    color: var(--muted);
    font-size: 0.95rem;
}

.lesson-summary-actions {
    margin-top: 0;
    display: grid;
    gap: 10px;
}

.lesson-summary-steps {
    display: grid;
    gap: 10px;
}

.lesson-summary-step {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface-soft);
}

.lesson-summary-step-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lesson-summary-step-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface);
}

.lesson-summary-step-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.lesson-summary-step-action {
    width: fit-content;
    max-width: min(100%, var(--app-button-max-width));
    align-self: flex-start;
}

.lesson-summary-step-select {
    color: white;
    min-height: 37px;
    text-align: center;
    text-align-last: center;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.2;
}

.lesson-summary-step-select option {
    color: var(--ink);
}

.lesson-collapsed-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lesson-collapsed-icon-button {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--stroke);
    border-radius: 8px;
    background: transparent;
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
}

.lesson-collapsed-icon-button:hover {
    background: var(--surface-soft);
}

.lesson-collapsed-icon-button i {
    font-size: 0.9rem;
}

.lesson-collapsed-close {
    position: static;
    border-color: var(--stroke);
    background: transparent;
    color: var(--ink);
}

.lesson-collapsed-close:hover {
    background: var(--surface-soft);
    color: var(--ink);
    border-color: var(--stroke);
}

.panel-copy {
    display: grid;
    gap: 6px;
}

.panel-copy-with-close {
    position: relative;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 10px;
    min-height: 30px;
    padding-right: 0;
}

.panel-copy-with-close .dialog-header-back {
    grid-row: 1 / span 2;
}

.panel-copy-with-close h2,
.panel-copy-with-close p {
    grid-column: 2;
}

/* Dialog headers with workflow back: inline back label on row 1; hints below. */
.email-panel-header:has(> .dialog-header-back),
.email-panel-header:has(> .ll-back-action),
.lesson-workspace-screen-header:has(> .dialog-header-back),
.lesson-workspace-screen-header:has(.ll-back-action--has-label),
.lesson-dialog-header:has(> .dialog-header-back),
.lesson-details-booking-header:has(> .dialog-header-back),
.contact-reach-sheet-header:has(> .dialog-header-back),
.record-notes-dialog__header:has(> .dialog-header-back) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
}

.email-panel-header.ll-header-bar--centered-title,
.lesson-workspace-screen-header.ll-header-bar--centered-title,
.lesson-dialog-header.ll-header-bar--centered-title,
.lesson-details-booking-header.ll-header-bar--centered-title,
.contact-reach-sheet-header.ll-header-bar--centered-title,
.record-notes-dialog__header.ll-header-bar--centered-title,
.dialog-header-with-dismiss.ll-header-bar--centered-title,
.admin-dialog__header.ll-header-bar--centered-title {
    display: grid;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
}

.email-panel-header:has(> .dialog-header-back) > .dialog-header-back,
.email-panel-header:has(> .ll-back-action) > .ll-back-action,
.lesson-dialog-header:has(> .dialog-header-back) > .dialog-header-back,
.lesson-details-booking-header:has(> .dialog-header-back) > .dialog-header-back,
.contact-reach-sheet-header:has(> .dialog-header-back) > .dialog-header-back,
.record-notes-dialog__header:has(> .dialog-header-back) > .dialog-header-back {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    max-width: 100%;
}

.email-panel-header:has(> .dialog-header-back) > div:not(.contact-edit-overlay-header-lead),
.lesson-dialog-header:has(> .dialog-header-back) > .panel-copy {
    display: contents;
}

.email-panel-header:has(> .dialog-header-back) > .contact-edit-overlay-header-lead,
.lesson-details-booking-header:has(> .dialog-header-back) > .lesson-details-booking-header__copy {
    grid-column: 2;
    grid-row: 1 / -1;
    min-width: 0;
}

.email-panel-header:has(> .dialog-header-back:not(.ll-back-action--has-label)) :is(h1, h2, h3, .dialog-header-bar__title),
.lesson-workspace-screen-header:has(> .dialog-header-back:not(.ll-back-action--has-label)) .lesson-workspace-header__title,
.lesson-dialog-header:has(> .dialog-header-back:not(.ll-back-action--has-label)) :is(h1, h2, h3, .dialog-header-bar__title),
.record-notes-dialog__header:has(> .dialog-header-back:not(.ll-back-action--has-label)) :is(h1, h2, h3, .record-notes-dialog__title) {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    align-self: center;
    min-width: 0;
}

.email-panel-header:has(.ll-back-action--has-label) :is(h1, h2, h3, .dialog-header-bar__title).ll-header-title-merged,
.lesson-dialog-header:has(.ll-back-action--has-label) :is(h1, h2, h3, .dialog-header-bar__title).ll-header-title-merged,
.record-notes-dialog__header:has(.ll-back-action--has-label) :is(h1, h2, h3, .record-notes-dialog__title).ll-header-title-merged {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    grid-column: 2;
    grid-row: 1;
}

.email-panel-header:has(> .dialog-header-back) > div > :is(p, .email-empty-state, .lesson-panel-hint),
.lesson-workspace-screen-header:has(> .dialog-header-back) .lesson-workspace-header-hint,
.lesson-dialog-header:has(> .dialog-header-back) .panel-copy > :is(p, .email-empty-state, .lesson-panel-hint, .field-help) {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.lesson-workspace-screen-header:has(> .dialog-header-back):has(.lesson-workspace-header__session-name) .lesson-workspace-header__session-name {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
}

.lesson-workspace-screen-header:has(> .dialog-header-back):has(.lesson-workspace-header__session-name) .lesson-workspace-header-hint {
    grid-row: 3;
}

.lesson-workspace-screen-header:has(> .dialog-header-back) > .lesson-workspace-header__meta {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin: 2px 0 0;
    min-width: 0;
}

.lesson-workspace-screen-header:has(> .dialog-header-back):not(:has(.lesson-workspace-header__session-name)) > .lesson-workspace-header__meta {
    grid-row: 3;
}

.panel-copy h2,
.email-panel h3 {
    margin: 0;
    font-size: clamp(1.45rem, 3.6vw, 2.2rem);
    line-height: var(--line-tight);
    letter-spacing: -0.01em;
}

.panel-copy p,
.ll-helper-text,
.ll-status-text,
.ll-empty-state,
.email-empty-state {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--ll-type-body-sm-size, var(--font-size-md));
    font-weight: var(--ll-type-body-sm-weight, 400);
    line-height: var(--ll-line-helper);
}

/* Prefer semantic roles over .email-empty-state for new markup.
 * .ll-empty-state — true empty lists; .ll-helper-text — field/panel guidance; .ll-status-text — live status. */
.ll-empty-state {
    color: var(--text-secondary, var(--text-muted));
}

.common-card .panel-copy>p:not(.recording-kicker) {
    color: var(--text-secondary);
}

.today-panel-date {
    font-size: clamp(1.2rem, 2.1vw, 1.5rem);
    font-weight: 600;
    line-height: 1.35;
}

.email-panel-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--dialog-top-offset) var(--ll-modal-gutter-x-end) var(--ll-modal-gutter-y-bottom) var(--ll-modal-gutter-x);
    background: rgba(16, 27, 23, 0.4);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 30;
}

.lesson-dialog-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--dialog-top-offset) var(--ll-modal-gutter-x-end) var(--ll-modal-gutter-y-bottom) var(--ll-modal-gutter-x);
    background: rgba(16, 27, 23, 0.4);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 35;
}

/* Stack above lesson-details when both are open (e.g. + New student from details). */
#lesson-student-dialog-overlay {
    z-index: 45;
}

#lesson-student-dialog-overlay.lesson-inline-panel {
    position: static;
    inset: auto;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    display: block;
    margin-top: var(--space-4);
    z-index: auto;
}

#lesson-student-dialog-overlay.lesson-inline-panel[hidden] {
    display: none;
}

#lesson-student-dialog-overlay.lesson-inline-panel .lesson-dialog {
    width: 100%;
    max-width: none;
    max-height: min(70vh, 560px);
    overflow: auto;
    box-shadow: 0 16px 36px rgba(17, 28, 24, 0.14);
}

#lesson-student-dialog-status {
    margin: 0 0 var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius, 8px);
    border: 1px solid color-mix(in srgb, #b42318 35%, var(--border-default, #ccc));
    background: color-mix(in srgb, #b42318 12%, var(--surface-card-strong, #fff));
    opacity: 1;
    line-height: 1.35;
}

#lesson-student-dialog-status[hidden] {
    display: none !important;
}

.lesson-dialog-overlay.is-open {
    display: flex;
}

.lesson-workspace-editor-stack {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-phase-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-top: 0;
}

/* Pinned capture toolbar lives inside <summary> so Record stays visible when the phase is collapsed; media list stays in the body. */
.lesson-workspace-editor-sibling--capture .lesson-workspace-phase>.lesson-workspace-phase__summary--capture {
    display: grid;
    gap: var(--lesson-compact-spacing, 7px);
    align-content: start;
}

.lesson-capture-phase-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.lesson-capture-phase-summary-head .panel-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-record-btn,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-action-btn,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-summarize-btn,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
    width: 100%;
    min-height: 44px;
    padding: 8px 8px;
    font-size: var(--ll-type-label-size);
    gap: 6px;
    border-radius: 12px;
    line-height: 1.15;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-record-btn i,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-action-btn i,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn i,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-share-btn i {
    font-size: var(--ll-type-body-sm-size);
    flex-shrink: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-record-btn span:not(.button-spinner),
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-action-btn span:not(.button-spinner),
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn span:not(.button-spinner),
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-share-btn span:not(.button-spinner) {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Narrow phones: icon above label so Record/Attach/Summarize/Share stay fully readable.
   Keep through ~520px — horizontal icon+label needs ~480px+ before Summarize/Share fit. */
@media (max-width: 520px) {
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar {
        gap: 4px;
    }

    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-record-btn,
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-action-btn,
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-summarize-btn,
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        padding: 6px 2px;
        gap: 3px;
        font-size: var(--ll-type-label-size);
        font-weight: 600;
        line-height: 1.1;
    }

    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-record-btn i,
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-action-btn i,
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn i,
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-share-btn i {
        font-size: var(--ll-type-body-sm-size);
        margin: 0;
    }

    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-record-btn span:not(.button-spinner),
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-action-btn span:not(.button-spinner),
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn span:not(.button-spinner),
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-share-btn span:not(.button-spinner) {
        display: block;
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        text-align: center;
        letter-spacing: -0.01em;
    }
}

.lesson-workspace-editor-sibling--capture .lesson-workspace-capture-summary {
    display: grid;
    gap: 0;
    margin-top: var(--space-3);
    min-width: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group {
    position: relative;
    z-index: 0;
    margin-bottom: 0;
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--lesson-surface-card-strong) 86%, transparent);
    overflow: hidden;
}

/* Attach/media must not reveal an empty Lesson Summary accordion. */
#lesson-capture-summary-details[hidden],
.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group[hidden] {
    display: none !important;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group > .lesson-capture-summary-group__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    margin: 0;
    color: var(--text-primary);
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    line-height: 1.25;
    text-transform: none;
    letter-spacing: normal;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group__icon {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--ll-type-body-sm-size);
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group__title.is-placeholder {
    color: var(--text-secondary);
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-edit-btn {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 12px;
    gap: 6px;
    font-size: var(--ll-type-label-size);
    line-height: 1.2;
    white-space: nowrap;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-edit-btn .button-label {
    font-weight: var(--ll-type-label-weight);
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-edit-btn[hidden] {
    display: none !important;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-edit-btn.is-active {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 28%, transparent);
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group > .lesson-capture-summary-group__summary .ll-disclosure-chevron {
    margin-left: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group[open] > .lesson-capture-summary-group__summary .ll-disclosure-chevron--accordion {
    opacity: var(--ll-disclosure-accordion-chevron-expanded-opacity, 0.16);
    transform: rotate(180deg);
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group__body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--stroke);
}

.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] #lesson-workspace-summarize-media-card {
    display: none !important;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summary-group > .lesson-capture-summary-group__summary::-webkit-details-marker {
    display: none;
}

.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] #summary-media-required-note {
    display: none !important;
}

.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] .summary-doc-heading,
.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] .summary-doc-heading-row,
.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] .summary-doc-edit-icon-btn {
    display: none !important;
}

.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] .summary-doc-body > :is(h1, h2, h3):first-child {
    display: none;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-summarize-btn--gate,
.lesson-workspace-editor-sibling--capture .lesson-capture-summarize-btn:disabled,
.lesson-workspace-editor-sibling--capture .lesson-capture-share-btn:disabled,
.lesson-workspace-editor-sibling--capture .lesson-capture-action--setup-locked,
.lesson-workspace-editor-sibling--capture .upload-record-btn:has(:disabled),
.lesson-workspace-editor-sibling--capture #upload-capture-menu-trigger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-section--embedded {
    display: grid;
    gap: 0;
    padding: var(--lesson-section-padding, 14px);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
}

#lesson-capture-section[hidden],
.lesson-capture-section--embedded[hidden] {
    display: none !important;
}

.lesson-details-disclosure,
.lesson-feedback-disclosure {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.lesson-capture-section--embedded {
    display: grid;
    gap: 0;
}

.lesson-capture-panel-copy--embed-toggle {
    cursor: pointer;
    border-radius: var(--radius-md, 10px);
    margin: -4px -6px;
    padding: 4px 6px;
    transition: background-color 0.15s ease;
}

.lesson-workspace-editor-sibling .lesson-capture-panel-copy--embed-toggle:hover {
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 100%, transparent);
}

.lesson-workspace-editor-sibling .lesson-capture-panel-copy--embed-toggle:focus-visible {
    outline: 2px solid var(--primary-strong, #3fa85a);
    outline-offset: 2px;
}

.lesson-details-inline-root {
    display: grid;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.lesson-details-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.lesson-details-heading-row h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-booking-capture-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid var(--color-danger-600);
    background: var(--color-danger-600);
    color: #fff;
    box-shadow: 0 6px 16px rgba(180, 35, 24, 0.28);
    transition: filter var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}

.lesson-booking-capture-btn:hover {
    filter: brightness(1.06);
    color: #fff;
}

.lesson-booking-capture-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-danger-600) 55%, white);
    outline-offset: 2px;
}

.lesson-details-booking-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.lesson-details-booking-header__copy {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.lesson-details-heading-row--booking {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.lesson-details-heading-row--booking .lesson-session-kind--capture-header {
    align-self: center;
}

.lesson-booking-modal-close {
    flex-shrink: 0;
    align-self: flex-start;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    margin: 0;
    padding: 0;
    border-radius: var(--radius-pill, 999px);
    border: none;
    background: transparent;
    color: var(--text-muted, var(--muted));
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lesson-booking-modal-close:hover {
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 100%, var(--primary-strong, #3fa85a) 10%);
    color: var(--text-primary, var(--ink));
}

.lesson-booking-modal-close:focus-visible {
    outline: 2px solid var(--primary-strong, #3fa85a);
    outline-offset: 2px;
}

.lesson-details-booking-capture-row {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 6px;
    box-sizing: border-box;
}

.lesson-details-panel-copy--booking-modal .lesson-panel-hint {
    margin-top: 4px;
}

.lesson-details-collapsed-preview {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lesson-details-collapsed-preview[hidden] {
    display: none !important;
}

.lesson-details-collapsed-primary {
    margin: 0;
    font-weight: 700;
    font-size: clamp(0.94rem, 2.2vw, 1.02rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
    color: inherit;
    overflow-wrap: anywhere;
    display: block;
}

.lesson-details-collapsed-secondary {
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 78%, transparent);
    overflow-wrap: anywhere;
    display: block;
}

.lesson-details-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: 4px 0 2px;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: inherit;
    line-height: 1.35;
    color: inherit;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.lesson-details-toggle:hover {
    background: rgba(255, 255, 255, 0.04);
}

.lesson-details-toggle__main {
    min-width: 0;
    text-align: left;
}

.lesson-details-toggle__chevron-wrap {
    display: inline-flex;
    width: 2.25rem;
    justify-self: end;
    justify-content: center;
    align-items: flex-start;
    padding-top: 2px;
}

.lesson-details-toggle__icon-single {
    font-size: var(--ll-disclosure-chevron-size);
    line-height: 1;
    color: var(--ll-disclosure-chevron-color);
    opacity: 0.92;
}

.lesson-editor-route {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.lesson-editor-route>.lesson-workspace-panel {
    gap: 12px;
}

/* Lesson workspace on phone: fit Capture + phase headers without excess scroll. */
@media (max-width: 767.98px) {
    .lesson-editor-route {
        gap: 6px;
        --lesson-workspace-gap: 10px;
        --lesson-card-gap: 10px;
        --lesson-section-padding: 12px;
        --lesson-section-padding-compact: 10px;
        --lesson-compact-gap: 7px;
        --lesson-summary-height: 38px;
        --lesson-chip-height: 30px;
        --lesson-action-height: 34px;
        --lesson-header-min-height: 56px;
        --lesson-compact-spacing: 7px;
        --lesson-action-chip-gap: 6px;
    }

    .lesson-editor-route>.lesson-workspace-panel {
        gap: 10px;
        /* Room below delete / last card so controls are not clipped by footer or home indicator */
        padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 32px));
    }

    .lesson-editor-route .lesson-workspace-editor-stack {
        gap: var(--lesson-card-gap);
    }

    .lesson-editor-route .lesson-workspace-quick-action {
        min-height: 42px;
        padding: 10px 14px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-phase {
        gap: var(--lesson-compact-spacing);
    }

    .lesson-editor-route .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-section--embedded {
        padding: 12px;
        gap: 10px;
    }

    .lesson-editor-route .lesson-capture-section--embedded {
        gap: var(--space-3);
    }

    .lesson-editor-route .lesson-capture-section--embedded .panel-copy>h2 {
        font-size: clamp(1rem, 4.2vw, 1.15rem);
        margin: 0 0 4px;
    }

    .lesson-editor-route .lesson-capture-section--embedded .lesson-panel-hint {
        margin-bottom: 6px;
        font-size: var(--font-size-sm, 0.82rem);
    }

    .lesson-editor-route .upload-record-btn,
    .lesson-editor-route .upload-action-btn,
    .lesson-editor-route .lesson-capture-summarize-btn {
        padding: 10px 14px;
        font-size: 0.92rem;
    }

    .lesson-editor-route .upload-record-btn i,
    .lesson-editor-route .upload-action-btn i,
    .lesson-editor-route .lesson-capture-summarize-btn i {
        font-size: 1.05rem;
    }

    .lesson-editor-route .capture-action-group {
        min-height: 50px;
    }

    .lesson-editor-route .media-controls-toolbar .upload-record-btn,
    .lesson-editor-route .media-controls-toolbar .upload-action-btn,
    .lesson-editor-route .media-controls-toolbar .lesson-capture-summarize-btn {
        min-height: 50px;
    }

    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group {
        min-height: 0;
    }

    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-record-btn,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-action-btn,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-summarize-btn,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
        min-height: 44px;
        padding: 8px 6px;
        font-size: 0.78rem;
    }

    .lesson-editor-route .media-controls-toolbar .record-video-btn {
        min-height: 44px;
    }

    .lesson-editor-route .media-controls-toolbar .upload-media-quick-btn {
        min-height: 40px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .contact-history-disclosure-toggle.lesson-workspace-disclosure-toggle {
        min-height: 44px;
        padding: 8px 10px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--participant>.lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--summarize>.lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture>.lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--save>.lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--send>.lesson-phase-card {
        padding: 12px 14px;
    }

    .lesson-editor-route .lesson-workspace-shell :is(
        .lesson-workspace-header__copy h2
    ) {
        font-size: clamp(0.98rem, 2.8vw, 1.08rem);
        margin: 0 0 4px;
    }

    .lesson-editor-route .lesson-workspace-shell :is(
        .lesson-workspace-phase__title,
        .lesson-workspace-phase__summary-copy h2,
        .lesson-workspace-phase__summary-copy .lesson-workspace-details-phase__heading
    ) {
        font-size: max(var(--ll-type-display-size), clamp(1.25rem, 3.8vw, 1.55rem));
        font-weight: var(--ll-type-display-weight);
        line-height: 1.2;
        margin: 0 0 4px;
    }

    .lesson-editor-route .lesson-workspace-shell :is(
        .lesson-panel-hint,
        .email-empty-state,
        .lesson-workspace-section-meta,
        .panel-copy > p
    ) {
        font-size: var(--font-size-sm, 0.82rem);
        line-height: var(--ll-line-helper, 1.35);
    }

    /* Keep phase / capture headings visible when browser scrolls into view under sticky nav */
    .lesson-editor-route .lesson-workspace-editor-sibling--capture,
    .lesson-editor-route .lesson-workspace-phase {
        scroll-margin-top: clamp(56px, 22vw, 88px);
    }

    .view-root:has(.lesson-editor-route) {
        scroll-padding-top: clamp(48px, 18vw, 80px);
        scroll-padding-bottom: max(52px, calc(env(safe-area-inset-bottom) + 36px));
    }

    .lesson-editor-route .lesson-workspace-delete-slot {
        padding-top: 6px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
        scroll-margin-bottom: max(48px, calc(env(safe-area-inset-bottom) + 28px));
    }
}

/* After phone defaults: keep capture labels fully visible through the cramped mid-phone band. */
@media (max-width: 520px) {
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar {
        gap: 4px;
    }

    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-record-btn,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-action-btn,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-summarize-btn,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 52px;
        padding: 6px 2px;
        gap: 3px;
        font-size: clamp(0.62rem, 2.7vw, 0.72rem);
        font-weight: 600;
        line-height: 1.1;
    }

    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-record-btn i,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-action-btn i,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn i,
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-share-btn i {
        font-size: 0.95rem;
        margin: 0;
    }

    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-record-btn span:not(.button-spinner),
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .upload-action-btn span:not(.button-spinner),
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-summarize-btn span:not(.button-spinner),
    .lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .lesson-capture-share-btn span:not(.button-spinner) {
        display: block;
        max-width: 100%;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
        text-align: center;
        letter-spacing: -0.01em;
    }
}

.lesson-details-expand-body {
    display: grid;
    gap: var(--space-4);
}

.lesson-details-inline-lead {
    margin: 0;
}

.lesson-dialog {
    position: relative;
    width: min(100%, 620px);
    max-height: calc(100vh - clamp(96px, 16vh, 132px));
    max-height: calc(100dvh - clamp(96px, 16vh, 132px));
    overflow-y: auto;
    display: grid;
    gap: var(--ll-panel-gap);
    padding: var(--ll-space-6);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    box-shadow: 0 36px 84px rgba(17, 28, 24, 0.28);
}

#lesson-details-main-fields {
    display: grid;
    gap: var(--ll-panel-gap);
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

#lesson-form-primary-fields {
    display: grid;
    gap: var(--ll-space-3);
    border: 0;
    margin: 0;
    padding: 0;
    min-inline-size: 0;
}

.lesson-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.lesson-dialog-header .panel-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-form {
    display: grid;
    gap: var(--ll-space-3);
}

.lesson-field {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 4px;
    align-items: center;
    font-weight: 600;
    font-size: 0.8rem;
}

.lesson-field>span,
.lesson-field>label {
    margin: 0;
    font-size: 0.8rem;
}

.lesson-field.location-field {
    align-items: start;
}

.lesson-field.location-field>label {
    align-self: center;
}

.lesson-field.location-field .location-row,
.lesson-field.location-field .field-help {
    grid-column: 2;
}

.lesson-shared-feedback-field {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 6px;
}

.lesson-shared-feedback-field>span:first-child {
    font-size: 0.86rem;
}

.lesson-shared-feedback-field .field-help {
    margin: 0;
}

.lesson-start-field {
    align-items: start;
}

.lesson-start-native-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lesson-start-card {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card-strong) 88%, white);
    box-shadow: 0 8px 18px rgba(17, 28, 24, 0.06);
}

.lesson-start-summary {
    min-width: 0;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: var(--ll-type-title-weight);
    line-height: 1.3;
}

.lesson-start-change {
    flex: 0 0 auto;
    min-height: 38px;
    padding-inline: 14px;
}

.lesson-start-picker-overlay {
    z-index: 50;
}

.lesson-start-picker-panel {
    width: min(100%, 680px);
    gap: var(--space-4);
}

.lesson-start-picker-panel.ll-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.lesson-start-picker-body {
    display: grid;
    gap: var(--space-4);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--ll-space-6);
}

.ll-stack-shell__content > .lesson-start-picker-panel.ll-lesson-transient-in-stack .lesson-start-picker-body {
    padding: 0;
}

.lesson-start-picker-header .ll-surface__title,
.lesson-start-picker-header h3,
.lesson-start-step-heading h4 {
    margin: 0;
}

.lesson-start-picker-eyebrow {
    margin: 0 0 2px;
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-start-picker-back {
    justify-self: start;
    min-height: 38px;
}

.lesson-start-picker-step {
    display: grid;
    gap: var(--space-4);
}

.lesson-start-picker-step[hidden] {
    display: none;
}

.lesson-start-step-heading {
    display: grid;
    gap: 4px;
}

.lesson-start-step-heading .field-help {
    margin: 0;
}

.lesson-start-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lesson-start-choice,
.lesson-start-date-pill,
.lesson-start-time-button {
    appearance: none;
    border: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--surface-card-strong) 94%, white);
    color: var(--text);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.lesson-start-choice {
    display: grid;
    gap: 4px;
    min-height: 74px;
    padding: 14px;
    border-radius: var(--radius-lg);
    text-align: left;
}

.lesson-start-choice span {
    font-weight: var(--ll-type-title-weight);
}

.lesson-start-choice small {
    color: var(--text-muted);
    font-weight: var(--ll-type-label-weight);
}

.lesson-start-choice:hover,
.lesson-start-date-pill:hover,
.lesson-start-time-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand) 48%, var(--border-default));
    box-shadow: 0 12px 24px rgba(17, 28, 24, 0.12);
}

.lesson-start-choice.is-selected,
.lesson-start-date-pill.is-selected,
.lesson-start-time-button.is-selected {
    border-color: color-mix(in srgb, var(--brand) 72%, var(--border-default));
    background: color-mix(in srgb, var(--brand-soft) 68%, var(--surface-card-strong));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.lesson-start-date-strip {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 8px;
}

.lesson-start-date-pill {
    flex: 0 0 92px;
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 72px;
    padding: 10px;
    border-radius: var(--radius-lg);
}

.lesson-start-date-pill span {
    color: var(--text-muted);
    font-weight: var(--ll-type-title-weight);
}

.lesson-start-date-pill strong {
    font-size: 0.95rem;
}

.lesson-start-fallback {
    display: grid;
    gap: 6px;
    max-width: 280px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: var(--ll-type-title-weight);
}

.lesson-start-time-groups {
    display: grid;
    gap: var(--space-4);
}

.lesson-start-time-group {
    display: grid;
    gap: 8px;
}

.lesson-start-time-group h5 {
    margin: 0;
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}

.lesson-start-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
}

.lesson-start-time-button {
    min-height: 48px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-weight: var(--ll-type-title-weight);
}

.lesson-duration-field {
    display: grid;
    gap: 10px;
}

.lesson-duration-stepper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lesson-duration-input {
    width: min(128px, 32vw);
    font-weight: var(--ll-type-title-weight);
    font-size: 1.05rem;
    text-align: center;
}

.lesson-duration-nudge,
.lesson-duration-preset {
    min-height: 44px;
    padding: 8px 12px;
    font-weight: var(--ll-type-title-weight);
}

.lesson-duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lesson-start-time-fine {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
    display: grid;
    gap: 12px;
}

.lesson-start-time-fine__title {
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 850;
}

.lesson-start-time-fine__hint {
    margin: 0;
}

.lesson-start-time-fine__live {
    font-size: clamp(1.35rem, 5vw, 2rem);
    font-weight: var(--ll-type-title-weight);
    text-align: center;
}

.lesson-start-time-fine__nudge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.lesson-start-time-nudge {
    min-height: 48px;
    padding: 10px 14px;
    font-weight: 850;
}

.lesson-start-time-fine__exact {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
}

.lesson-start-time-fine__exact-field {
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: var(--ll-type-title-weight);
}

.lesson-start-time-continue {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}

@media (max-width: 520px) {
    .lesson-start-time-fine__exact {
        grid-template-columns: 1fr;
    }
}

.lesson-start-confirm-step {
    text-align: center;
}

.lesson-start-picker-length-wrap {
    text-align: left;
    max-width: 28rem;
    margin: 0 auto;
    padding-top: 4px;
}

.lesson-start-picker-length-label {
    margin: 0;
}

.lesson-start-picker-length-label .lesson-duration-stepper,
.lesson-start-picker-length-label .lesson-duration-presets {
    justify-content: center;
}

.lesson-start-confirm-summary {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.2rem, 4vw, 1.7rem);
    font-weight: 850;
    line-height: 1.25;
}

.lesson-start-confirm-actions,
.lesson-start-secondary-actions {
    display: grid;
    gap: 10px;
}

.lesson-start-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-student-visible-fields,
.lesson-private-fields {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--stroke));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand-soft) 48%, transparent);
}

.lesson-student-visible-fields {
    border-color: color-mix(in srgb, var(--accent) 18%, var(--stroke));
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}

.lesson-feedback-section-heading {
    display: grid;
    gap: 3px;
}

.lesson-feedback-section-heading h3 {
    margin: 0;
    color: var(--text-primary, var(--ink));
    font-size: 0.9rem;
    font-weight: 850;
}

.lesson-feedback-section-heading p {
    margin: 0;
    color: var(--text-secondary, var(--muted));
    font-size: 0.78rem;
    line-height: 1.35;
}

.lesson-feedback-panel-section {
    display: grid;
    gap: var(--ll-space-3);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.lesson-feedback-focus-fields > .lesson-details-focus-fieldset > .lesson-event-field--focus .lesson-event-field__icon {
    display: none;
}

.lesson-send-phase-inline-fields {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    width: 100%;
    min-width: 0;
}

.lesson-send-phase-inline-fields[hidden] {
    display: none !important;
}

.lesson-private-fields__copy {
    margin: 0;
}

.lesson-shared-tags-field {
    align-items: start;
}

.lesson-shared-tags-field__label-col {
    display: grid;
    gap: 4px;
    align-self: start;
    min-width: 0;
}

.lesson-shared-tags-field__label-col>span {
    margin: 0;
}

.lesson-shared-tags-field__controls {
    grid-column: 2;
    display: grid;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.lesson-tags-trigger {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    /* Buttons often clip children; summary needs to scroll or wrap without clipping. */
    overflow: visible;
}

.lesson-tags-trigger[aria-expanded="true"]:not(.ll-picker-trigger) {
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border-subtle));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}

.lesson-tags-summary {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 6px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: visible;
}

.lesson-tags-placeholder {
    padding: 3px 2px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
}

.lesson-tags-hint {
    min-height: 16px;
    margin: -2px 0 0;
    color: var(--text-secondary);
    font-size: 0.76rem;
    opacity: 0;
    transition: color 120ms ease-out, opacity 120ms ease-out;
}

.lesson-tags-hint.is-visible {
    color: var(--primary-strong);
    opacity: 1;
}

.lesson-tags-hint.is-shaking {
    animation: lessonTagShake 160ms ease-out;
}

.lesson-tag-picker-panel {
    display: grid;
    width: 100%;
    min-width: 0;
    max-height: min(360px, 48vh);
    overflow-y: auto;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 82%, var(--bg-elevated));
}

.lesson-tag-picker-panel[hidden] {
    display: none;
}

.lesson-tag-picker-section {
    display: grid;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.lesson-tag-picker-section__hint {
    margin: -2px 0 0;
    font-size: 0.76rem;
}

.lesson-tag-picker-section h5 {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lesson-tag-picker {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(5.5rem, 100%), 1fr));
    gap: 4px;
    align-items: stretch;
}

.lesson-tag-picker--recent {
    grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
    gap: 8px;
}

.lesson-tag-picker .lesson-tag-chip {
    width: 100%;
    min-width: 0;
    min-height: 18px;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    hyphens: auto;
}

.lesson-tag-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out, transform 120ms ease-out;
    user-select: none;
}

.lesson-tag-chip__check {
    display: none;
    flex: 0 0 auto;
    font-weight: var(--ll-type-title-weight);
    line-height: 1;
}

.lesson-tag-chip__label {
    min-width: 0;
}

.lesson-tag-chip.is-selected {
    border-color: transparent;
    background: var(--primary);
    color: #fff;
}

.lesson-tag-chip.is-popping {
    animation: lessonTagPop 150ms ease-out;
}

.lesson-tag-chip.is-denied {
    animation: lessonTagDenied 150ms ease-out;
}

.lesson-tag-chip--summary {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 10px;
    border-color: transparent;
    background: var(--primary);
    color: #fff;
    font-size: 0.76rem;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
}

.lesson-tag-input[hidden] {
    display: none;
}

@keyframes lessonTagPop {
    0% {
        transform: scale(0.96);
    }

    60% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lessonTagDenied {

    0%,
    100% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(-3px);
    }

    70% {
        transform: translateX(3px);
    }
}

@keyframes lessonTagShake {

    0%,
    100% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(-4px);
    }

    70% {
        transform: translateX(4px);
    }
}

.lesson-field .lesson-field-help {
    grid-column: 2;
    margin-top: -2px;
}

.lesson-custom-feeling-field input[hidden] {
    display: none;
}

.lesson-feeling-display {
    display: grid;
    gap: 6px;
    margin: 2px 0 0;
}

.lesson-feeling-display:empty {
    display: none;
}

.lesson-feeling-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lesson-feeling-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--stroke));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-soft) 72%, transparent);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
}

.lesson-feeling-pill__label {
    color: var(--text-muted);
    font-weight: 700;
}

.location-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.field-help {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: var(--ll-line-helper);
}

.email-panel-overlay.is-open {
    display: flex;
}

.app-shell-main > .lesson-create-busy-overlay:not(.lesson-create-busy-overlay--viewport):not(.lesson-create-busy-overlay--on-lesson) {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    box-sizing: border-box;
    /* Stack screens in #app use z-modal-global; keep the shell busy gate above them. */
    z-index: var(--lessonlink-z-blocking);
}

.lesson-workspace-participants-panel__header {
    flex-shrink: 0;
}

.lesson-workspace-participants-panel > .lesson-people-picker-panel__lede {
    flex-shrink: 0;
}

.lesson-workspace-participants-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-3);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.lesson-workspace-participants-email-form {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-2);
}

.lesson-workspace-participants-email-field {
    margin: 0;
}

.lesson-workspace-participants-email-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ll-space-2);
    align-items: stretch;
}

.lesson-workspace-participants-email-row .email-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.lesson-workspace-participants-email-submit {
    flex: 0 0 auto;
    align-self: stretch;
}

.lesson-workspace-participants-email-status {
    margin: 0;
}

.lesson-workspace-participants-new.calendar-add-lesson-button--toolbar-labeled {
    align-self: flex-start;
    width: auto;
    max-width: 100%;
}

.lesson-workspace-participants-select-label {
    margin: 0;
    font-weight: 600;
}

.lesson-workspace-participants-list .lesson-workspace-participants-option,
.lesson-workspace-participants-list .lesson-workspace-share-recipient-option {
    padding: 0.35rem 0;
}

.lesson-workspace-participants-option.is-attached-existing input[type="checkbox"],
.lesson-workspace-share-recipient-option.is-attached-existing input[type="checkbox"] {
    accent-color: #3b82f6;
}

.lesson-workspace-participants-option.is-attached-new input[type="checkbox"],
.lesson-workspace-share-recipient-option.is-attached-new input[type="checkbox"] {
    accent-color: var(--brand, #3fa85a);
}

.lesson-workspace-participants-option.is-attached-existing > span,
.lesson-workspace-share-recipient-option.is-attached-existing > span {
    color: color-mix(in srgb, #3b82f6 88%, var(--text-primary, #fff));
}

.lesson-workspace-participants-option.is-attached-new > span,
.lesson-workspace-share-recipient-option.is-attached-new > span {
    color: color-mix(in srgb, var(--brand, #3fa85a) 88%, var(--text-primary, #fff));
}

.lesson-workspace-participants-empty {
    margin: 0;
}

.lesson-workspace-participants-panel__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--ll-space-2);
}

.lesson-workspace-participants-panel__footer .ll-btn.ll-btn--solid.ll-btn--primary {
    width: 100%;
}

/* Lesson people picker (segmented, search-first existing students). */
.lesson-people-picker-overlay > .lesson-people-picker-panel {
    gap: var(--ll-space-2);
}

.lesson-people-picker-subtitle {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
}

.lesson-people-picker-panel__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-bottom: 0;
}

.lesson-people-picker-panel__header[hidden] {
    display: none !important;
}

.lesson-people-picker-panel__header .ll-back-action {
    align-self: flex-start;
    flex-shrink: 0;
}

.lesson-people-picker-panel__header .lesson-people-picker-subtitle {
    margin: 0;
}

.ll-people-picker-segmented {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ll-people-picker-segmented::-webkit-scrollbar {
    display: none;
}

.ll-people-picker-segmented .lesson-people-picker-segment {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.ll-people-picker-segmented .lesson-people-picker-segment[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.lesson-people-picker-overlay.is-summary-share-contacts-only .lesson-people-picker-segment[data-segment="viewer"],
.lesson-workspace-participants-panel.is-summary-share-contacts-only .lesson-people-picker-segment[data-segment="viewer"],
.lesson-people-picker-overlay.is-summary-share-contacts-only [data-people-picker-panel="viewer"],
.lesson-workspace-participants-panel.is-summary-share-contacts-only [data-people-picker-panel="viewer"],
.lesson-people-picker-overlay.is-summary-share-contacts-only .lesson-people-picker-new-send-invite-row,
.lesson-workspace-participants-panel.is-summary-share-contacts-only .lesson-people-picker-new-send-invite-row {
    display: none !important;
}

.lesson-people-picker-overlay.is-viewer-share-only .ll-people-picker-segmented,
.lesson-workspace-participants-panel.is-viewer-share-only .ll-people-picker-segmented {
    display: none;
}

.lesson-people-picker-overlay.is-summary-invite-by-email-only .lesson-people-picker-viewer-roster-block,
.lesson-workspace-participants-panel.is-summary-invite-by-email-only .lesson-people-picker-viewer-roster-block,
.lesson-people-picker-overlay.is-summary-invite-by-email-only .lesson-people-picker-viewer-roster-list,
.lesson-workspace-participants-panel.is-summary-invite-by-email-only .lesson-people-picker-viewer-roster-list,
.lesson-people-picker-overlay.is-summary-invite-by-email-only label[for="lesson-people-picker-viewer-search"],
.lesson-workspace-participants-panel.is-summary-invite-by-email-only label[for="lesson-people-picker-viewer-search"],
.lesson-people-picker-overlay.is-summary-invite-by-email-only .lesson-people-picker-viewer-new-divider,
.lesson-workspace-participants-panel.is-summary-invite-by-email-only .lesson-people-picker-viewer-new-divider,
.lesson-people-picker-overlay.is-summary-invite-by-email-only .lesson-people-picker-viewer-relation-field,
.lesson-workspace-participants-panel.is-summary-invite-by-email-only .lesson-people-picker-viewer-relation-field,
.lesson-people-picker-overlay.is-summary-invite-by-email-only label[for="lesson-people-picker-viewer-relation"],
.lesson-workspace-participants-panel.is-summary-invite-by-email-only label[for="lesson-people-picker-viewer-relation"],
.lesson-people-picker-overlay.is-summary-invite-by-email-only .lesson-people-picker-viewer-on-lesson,
.lesson-workspace-participants-panel.is-summary-invite-by-email-only .lesson-people-picker-viewer-on-lesson {
    display: none !important;
}

.lesson-people-picker-panel__body {
    gap: var(--ll-space-2);
}

.lesson-people-picker-panel__section {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-2);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.lesson-people-picker-panel__section[data-people-picker-panel="existing"] {
    overflow: visible;
}

/* Author `display:flex` on sections overrides the UA [hidden] rule without this. */
.lesson-people-picker-panel__section[hidden] {
    display: none !important;
}

.lesson-people-picker-search-field {
    display: flex;
    align-items: center;
    gap: var(--ll-space-2);
    margin: 0;
    flex-shrink: 0;
}

.lesson-people-picker-search-field__icon {
    color: var(--muted, #5c6b64);
    font-size: 0.9rem;
    line-height: 1;
}

.lesson-people-picker-search-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.contact-autocomplete-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.contact-autocomplete-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.28rem 0.45rem 0.28rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    line-height: 1.2;
}

.contact-autocomplete-chip.is-attached-existing {
    border-color: rgba(120, 190, 140, 0.35);
}

.contact-autocomplete-chip.is-attached-new {
    border-color: rgba(120, 190, 140, 0.65);
    background: rgba(120, 190, 140, 0.12);
}

.contact-autocomplete-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-autocomplete-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
}

.contact-autocomplete-chip__remove:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.contact-autocomplete-input-wrap {
    position: relative;
}

.contact-autocomplete-dropdown {
    display: flex;
    flex-direction: column;
    max-height: min(42vh, 18rem);
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--panel, #15201b);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.contact-autocomplete-dropdown[hidden] {
    display: none !important;
}

.contact-autocomplete-result {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    padding: 0.62rem 0.75rem;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.contact-autocomplete-result:last-child {
    border-bottom: 0;
}

.contact-autocomplete-result.is-active,
.contact-autocomplete-result:hover {
    background: rgba(120, 190, 140, 0.12);
}

.contact-autocomplete-result.is-selected {
    opacity: 0.72;
    cursor: default;
}

.contact-autocomplete-result__badge--selected {
    background: rgba(120, 190, 140, 0.2);
    color: #d7f5df;
}

.contact-autocomplete-result__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-autocomplete-result__avatar .ll-role-avatar:has(.ll-role-avatar__photo:not([hidden])) .ll-role-avatar__initials {
    opacity: 0;
    visibility: hidden;
}

.contact-autocomplete-result__avatar--create {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #d7f5df;
    font-size: 0.78rem;
}

.contact-autocomplete-result__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    width: 100%;
}

.contact-autocomplete-result--create {
    align-items: center;
}

.contact-autocomplete-result--create .contact-autocomplete-result__text {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}

.contact-autocomplete-result--create .contact-autocomplete-result__primary,
.contact-autocomplete-result--create .contact-autocomplete-result__secondary {
    width: 100%;
    max-width: none;
}

.contact-autocomplete-result__primary {
    font-size: 0.92rem;
    line-height: 1.25;
}

.contact-autocomplete-result__secondary {
    font-size: 0.78rem;
    line-height: 1.25;
    color: var(--muted, #9db0a7);
}

.contact-autocomplete-result__badge {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 0.1rem;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted, #9db0a7);
}

.contact-autocomplete-highlight,
.title-search-highlight {
    background: rgba(120, 190, 140, 0.35);
    color: inherit;
    padding: 0;
}

.summary-markdown-wrap--editable .title-search-highlight,
.summary-markdown-wrap--editable mark.title-search-highlight {
    background: rgba(120, 190, 140, 0.4);
    color: inherit;
    padding: 0;
    border-radius: 2px;
}

::highlight(lessonlink-title-search) {
    background: rgba(120, 190, 140, 0.35);
    color: inherit;
}

.contact-autocomplete-guidance,
.contact-autocomplete-status {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.35;
    color: var(--muted, #9db0a7);
}

.contact-autocomplete-recent__label {
    margin: 0;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #9db0a7);
}

.contact-autocomplete-recent__list {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.contact-autocomplete-recent__list .contact-autocomplete-result {
    background: rgba(255, 255, 255, 0.02);
}

.contact-autocomplete-result--compact {
    align-items: center;
    padding: 0.3rem 0.75rem;
}

.contact-autocomplete-result--compact .contact-autocomplete-result__text {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    min-width: 0;
}

.contact-autocomplete-result--compact .contact-autocomplete-result__primary {
    font-size: 0.88rem;
    line-height: 1.2;
}

.lesson-people-picker-option {
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.28rem 0;
}

.lesson-people-picker-option input[type="checkbox"] {
    margin-top: 0.15rem;
}

.lesson-people-picker-option__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.lesson-people-picker-option__name {
    font-weight: 600;
    line-height: 1.25;
}

.lesson-people-picker-option__meta {
    font-size: 0.78rem;
    color: var(--muted, #5c6b64);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-people-picker-panel__footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--bg-elevated, #fff) 92%, transparent);
    padding-bottom: max(var(--ll-space-2), env(safe-area-inset-bottom, 0px));
}

.lesson-people-picker-panel__footer .ll-btn.ll-btn--solid.ll-btn--primary:disabled {
    opacity: 0.55;
}

.lesson-people-picker-form {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-2);
}

.lesson-people-picker-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ll-space-2);
}

.lesson-people-picker-form-grid__full {
    grid-column: 1 / -1;
}

.lesson-people-picker-option__secondary {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lesson-people-picker-option__role {
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    color: color-mix(in srgb, var(--brand) 72%, var(--text-primary));
}

.lesson-people-picker-optional {
    font-weight: 400;
    color: var(--muted, #5c6b64);
}

.lesson-people-picker-details {
    margin: 0;
}

.lesson-people-picker-details summary {
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted, #5c6b64);
}

.lesson-people-picker-notes-field {
    display: block;
    width: 100%;
}

.lesson-people-picker-notes-field .lesson-people-picker-notes {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 3.5rem;
    resize: vertical;
}

.lesson-people-picker-checkbox-row {
    margin: 0;
    padding: 0.2rem 0;
}

.lesson-people-picker-permissions {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lesson-people-picker-permissions .email-panel-label {
    margin-bottom: 0.15rem;
}

.lesson-people-picker-viewer-roster-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 12rem;
    overflow-y: auto;
}

.lesson-people-picker-viewer-roster-empty {
    margin: 0;
}

.lesson-people-picker-viewer-new-divider {
    margin: var(--ll-space-2) 0 var(--ll-space-1);
}

.lesson-people-picker-viewer-on-lesson {
    margin-top: var(--ll-space-1);
}

.lesson-people-picker-viewer-on-lesson-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lesson-people-picker-viewer-on-lesson-list__empty {
    margin: 0;
    font-size: 0.86rem;
    color: var(--muted, #5c6b64);
}

.lesson-people-picker-viewer-on-lesson-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.lesson-people-picker-viewer-revoke {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted, #5c6b64);
    background: transparent;
    border: none;
    padding: 0.15rem 0;
    cursor: pointer;
    text-decoration: underline;
}

.lesson-people-picker-viewer-revoke:hover {
    color: var(--text, #1a2e28);
}

@media (max-width: 480px) {
    .lesson-people-picker-form-grid {
        grid-template-columns: 1fr;
    }
}

.lesson-workspace-send-feedback-panel__header {
    flex-shrink: 0;
}

.lesson-workspace-send-feedback-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 2px;
}

.lesson-workspace-send-feedback-panel__body .lesson-details-focus-fieldset,
.lesson-workspace-send-feedback-panel__body .lesson-student-visible-fields,
.lesson-workspace-send-feedback-panel__body .lesson-feedback-focus-fields,
.lesson-send-phase-inline-fields .lesson-student-visible-fields,
.lesson-send-phase-inline-fields .lesson-feedback-focus-fields {
    margin: 0;
    width: 100%;
    min-width: 0;
}

.lesson-workspace-send-feedback-panel__body .lesson-feedback-panel-section,
.lesson-send-phase-inline-fields .lesson-feedback-panel-section {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.lesson-workspace-send-feedback-panel__body .lesson-feedback-section-heading {
    margin-bottom: var(--ll-space-2);
}

.lesson-workspace-send-feedback-panel__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--ll-space-2);
}

.lesson-workspace-send-feedback-panel__footer .ll-btn.ll-btn--solid.ll-btn--primary {
    width: 100%;
}

.lesson-workspace-summary-view-panel__header,
.lesson-workspace-transcript-view-panel__header,
.lesson-workspace-video-view-panel__header {
    flex-shrink: 0;
}

.lesson-workspace-summary-view-panel__body,
.lesson-workspace-transcript-view-panel__body,
.lesson-workspace-video-view-panel__body {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 12px;
}

.lesson-workspace-summary-view-panel__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: var(--ll-space-2);
}

.lesson-workspace-summary-view-panel__footer .summary-panel-actions,
.lesson-workspace-summary-view-panel__footer .ll-btn.ll-btn--solid.ll-btn--primary {
    width: 100%;
}

.lesson-workspace-transcript-view-panel__body .lesson-transcript-view-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: var(--ll-type-body-size);
    line-height: 1.6;
}

.lesson-send-phase-shared-launcher {
    width: 100%;
    min-width: 0;
}

.lesson-send-phase-shared-launcher[hidden] {
    display: none !important;
}

.lesson-send-phase-shared-launcher .lesson-feedback-disclosure--send-icon {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
}

@media (max-width: 359px) {
}

@media (min-width: 360px) and (max-width: 520px) {
}/* After the user scrolls the Ask thread {
    margin: 0;
    padding: 0;
    gap: 0;
    min-height: 0;
}

#location-settings-overlay {
    z-index: 40;
}

/* #summary-send-overlay uses global modal window band (1250); do not pin a lower z-index here. */
#summary-confirm-overlay > .email-panel,
#summary-confirm-overlay > .ll-surface,
#summary-source-overlay > .summary-source-panel,
#summary-source-overlay > .ll-surface {
    width: min(100%, 420px);
}

.ll-stack-shell[data-ll-stack-id="summary-source-choice"] .ll-stack-shell__content {
    max-width: min(100%, 520px);
    margin-inline: auto;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="summary-source-choice"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="summary-source-choice"] .app-route-fullscreen-body-inner {
    padding-top: 0;
    gap: var(--space-2);
}

/* Titlebar owns back/title; never show in-panel header chrome on these stack mounts. */
.ll-stack-shell__content > .summary-source-panel.ll-lesson-transient-in-stack > .ll-surface__header,
.ll-stack-shell__content > .summary-source-panel.ll-lesson-transient-in-stack > .email-panel-header,
.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack > .ll-surface__header,
.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack > .email-panel-header {
    display: none !important;
}

.ll-stack-shell__content > .summary-source-panel.ll-lesson-transient-in-stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    gap: var(--space-3);
    overflow: hidden;
}

.ll-stack-shell__content > .summary-source-panel.ll-lesson-transient-in-stack .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.ll-stack-shell__content > .summary-source-panel.ll-lesson-transient-in-stack .ll-surface__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: var(--ll-space-2) 0 max(var(--ll-space-2), env(safe-area-inset-bottom, 0px));
}

.summary-source-message {
    line-height: 1.45;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    gap: var(--space-3);
    overflow: hidden;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .ll-surface__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: var(--ll-space-2) 0 max(var(--ll-space-2), env(safe-area-inset-bottom, 0px));
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .instructor-voice-sliders {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    width: 100%;
    overflow-y: auto;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .instructor-voice-slider-block {
    width: 100%;
    box-sizing: border-box;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .instructor-voice-slider-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "low high"
        "slider slider";
    align-items: start;
    gap: 8px 12px;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .instructor-voice-slider-row > .instructor-voice-slider-end-label:first-child {
    grid-area: low;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .instructor-voice-slider-row > .instructor-voice-slider {
    grid-area: slider;
    width: 100%;
}

.ll-stack-shell__content > .summary-voice-override-panel.ll-lesson-transient-in-stack .instructor-voice-slider-row > .instructor-voice-slider-end-label--high {
    grid-area: high;
    text-align: right;
}

.summary-source-options {
    display: grid;
    gap: 10px;
}

.summary-source-option-hint {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.summary-voice-override-panel {
    width: min(100%, 480px);
}

.summary-voice-override-panel .instructor-voice-sliders {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 4px;
}

.summary-source-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-3);
    flex-wrap: wrap;
}

.email-panel {
    position: relative;
    width: min(100%, 620px);
    max-height: calc(100vh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4));
    max-height: calc(100dvh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4));
    overflow-y: auto;
    display: grid;
    gap: var(--ll-panel-gap);
    padding: var(--ll-space-6);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    box-shadow: 0 36px 84px rgba(17, 28, 24, 0.28);
}

.email-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding-right: 0;
}

.contact-delete-button {
    font-size: 0.75rem;
    margin-top: 4px;
}

.email-panel-label {
    font-weight: var(--weight-semibold);
    font-size: var(--font-size-sm);
}

.email-input {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, color-mix(in srgb, var(--brand-primary) 22%, var(--border-default)));
    border-radius: var(--radius-sm);
    background: var(--bg-elevated, color-mix(in srgb, white 96%, var(--surface-card)));
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}

.email-input:focus {
    outline: none;
    border-color: var(--accent-info-border, rgba(63, 168, 90, 0.56));
    box-shadow: 0 0 0 3px var(--accent-info-soft, rgba(45, 122, 59, 0.4));
    background: var(--bg-elevated);
}

/* Search fields: title-size copy (beats .email-input body-sm default). */
:is(.context-inline-search__input, .contact-inline-search__input, .today-chat-to-input, .lesson-people-picker-search-input).email-input,
input[type="search"].email-input:is(.context-inline-search__input, .contact-inline-search__input, .lesson-people-picker-search-input, .contact-autocomplete-input) {
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-title-line);
}

:is(.context-inline-search__input, .contact-inline-search__input, .today-chat-to-input, .lesson-people-picker-search-input, .contact-autocomplete-input)::placeholder {
    font-size: inherit;
    line-height: inherit;
    opacity: 1;
}

/* Native selects: compact triangles — distinct from accordion chevrons */
#contact-edit-overlay select.email-input,
.lesson-form.lesson-feedback-form select.email-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.35rem;
    background-image: linear-gradient(
            45deg,
            transparent 50%,
            color-mix(in srgb, var(--text-primary) 44%, transparent) 50%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--text-primary) 44%, transparent) 50%,
            transparent 50%
        );
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.tools-request-message-field {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#tools-request-message,
.tools-request-message-field__input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 2.75rem;
    white-space: pre-wrap;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
    resize: vertical;
}

.tools-request-panel .tools-request-mic {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    width: 34px;
    height: 34px;
    font-size: var(--ll-type-heading-size);
}

.tools-request-panel .tools-request-mic[hidden] {
    display: none;
}

.tools-request-panel .tools-request-actions {
    justify-content: flex-end;
    align-items: center;
}

.tools-request-attachments-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.tools-request-attachment-heading {
    font-weight: 600;
}

.tools-request-attachment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.tools-request-attachment-file-label,
.tools-request-attach-previous-button {
    flex: 1 1 calc(50% - 4px);
    min-width: min(100%, 9.5rem);
    margin: 0;
}

.tools-request-attachment-file-label {
    display: flex;
    cursor: pointer;
}

.tools-request-attachment-file-button,
.tools-request-attach-previous-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    margin: 0;
    text-align: center;
}

.tools-request-attachment-file-button {
    pointer-events: none;
}

.tools-request-attach-previous-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.snapshot-mode *,
.snapshot-mode *::before,
.snapshot-mode *::after {
    animation: none !important;
    transition: none !important;
}

.tools-request-attachment-hint {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.4;
    color: var(--text-secondary, #5b6f68);
}

.tools-request-attachment-summary {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-secondary, #5b6f68);
}

.tools-request-attachment-summary[hidden] {
    display: none !important;
}

.tools-request-attachment-summary-meta {
    margin: 0 0 8px;
    font-weight: 600;
    line-height: 1.4;
}

.tools-request-attachment-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tools-request-attachment-thumb {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.12));
    background: var(--surface-muted, #f4f7f6);
}

.tools-request-attachment-thumb-expand {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.tools-request-attachment-thumb-expand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tools-request-attachment-thumb-expand:disabled {
    cursor: default;
}

.tools-request-attachment-file-chip {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    color: var(--text-secondary, #5b6f68);
    font-size: var(--ll-type-label-sm-size);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.tools-request-attachment-file-chip span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tools-request-attachment-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1;
    cursor: pointer;
}

.tools-request-attachment-thumb-remove:hover,
.tools-request-attachment-thumb-remove:focus-visible {
    background: rgba(15, 23, 42, 0.92);
}

.tools-request-attachment-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.tools-request-attachment-lightbox-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.72);
    cursor: pointer;
}

.tools-request-attachment-lightbox-inner {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1100px);
    max-height: min(92vh, 900px);
}

.tools-request-attachment-lightbox-image {
    display: block;
    max-width: min(96vw, 1100px);
    max-height: min(92vh, 900px);
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.tools-request-attachment-lightbox-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: var(--ll-type-heading-size);
    cursor: pointer;
}

.email-search-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.95rem;
}

.email-suggestions {
    display: grid;
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
}

.email-suggestion {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: rgba(255, 250, 243, 0.92);
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.email-suggestion:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.35);
    background: white;
}

.location-settings-panel {
    position: relative;
    width: min(100%, 620px);
    max-height: min(90vh, 720px);
    overflow-y: auto;
    display: grid;
    gap: 18px;
    padding: 26px;
    border: 1px solid var(--stroke);
    border-radius: 26px;
    background: rgba(255, 250, 243, 0.98);
    box-shadow: 0 28px 70px rgba(29, 49, 44, 0.22);
}

.location-settings-form {
    display: grid;
    gap: 14px;
}

.location-settings-list {
    display: grid;
    gap: 10px;
}

.location-settings-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--color-ink-900) 14%, transparent);
    border-radius: 16px;
    background: rgba(255, 250, 243, 0.92);
    /* Sand card is always light; ink tokens stay dark so text is readable in app dark theme */
    color: var(--color-ink-900);
}

.location-settings-item .ll-btn.ll-btn--ghost {
    color: var(--color-ink-700);
    background: rgba(255, 255, 255, 0.72);
    border-color: color-mix(in srgb, var(--color-ink-900) 18%, transparent);
}

.location-settings-item .ll-btn.ll-btn--ghost:hover {
    color: var(--color-ink-900);
    background: #fff;
    border-color: color-mix(in srgb, var(--color-ink-900) 28%, transparent);
}

.location-settings-item .ll-btn.ll-btn--outline.ll-btn--danger {
    color: var(--color-danger-600);
    border-color: rgba(180, 35, 24, 0.35);
}

.location-settings-item .ll-btn.ll-btn--outline.ll-btn--danger:hover {
    color: #9a1f16;
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(180, 35, 24, 0.45);
}

.location-settings-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-ink-900);
}

.compact-action {
    padding: 10px 14px;
}

.stub-card p {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 1.05rem;
}

/* ll-btn base styles: public/style/features/buttons.css */

.lesson-workspace-card .action-buttons {
    display: flex;
    gap: 8px;
}

.lesson-workspace-card .action-buttons .ll-btn.ll-btn--solid.ll-btn--primary {
    margin-left: auto;
}

.lesson-card-delete-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--lesson-border-subtle, var(--border-subtle));
}

.lesson-card-delete-footer__btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    font-weight: 700;
}

.lesson-workspace-shell {
    width: 100%;
    max-width: 100%;
}

.lesson-workspace-delete-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 12px 2px 4px;
    border: none;
    background: transparent;
    box-shadow: none;
}

.lesson-workspace-delete-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 107, 107, 0.78);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.lesson-workspace-duplicate-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    min-height: 0;
    background: transparent;
    box-shadow: none;
    color: var(--color-text-secondary, #718096);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.lesson-workspace-duplicate-link:hover,
.lesson-workspace-duplicate-link:focus-visible {
    color: var(--color-text-primary, #f7fafc);
    outline: none;
    text-decoration: underline;
}

.lesson-workspace-delete-link:hover,
.lesson-workspace-delete-link:focus-visible {
    color: #ff8585;
    outline: none;
    text-decoration: underline;
}

.lesson-workspace-delete-link.is-double-delete-armed,
.ll-btn.ll-btn--text.ll-btn--text-danger.is-double-delete-armed {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: 1px solid var(--color-danger-700, #b91c1c) !important;
    border-radius: 12px;
    white-space: nowrap;
    cursor: pointer;
}

.lesson-workspace-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    min-height: 0;
    line-height: 1.25;
    width: auto;
    max-width: none;
}

.lesson-workspace-delete-btn .fa-trash-can {
    font-size: 0.92rem;
    opacity: 0.95;
}

.is-double-delete-armed {
    background: var(--color-danger-600, #dc2626) !important;
    border-color: var(--color-danger-700, #b91c1c) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger-600, #dc2626) 36%, transparent);
    min-height: 44px;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    font-weight: var(--ll-type-title-weight) !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
    transform: scale(1.03);
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    animation: double-delete-pulse 180ms ease-out;
}

.is-double-delete-armed:hover,
.is-double-delete-armed:focus-visible {
    background: var(--color-danger-700, #b91c1c) !important;
    border-color: var(--color-danger-800, #991b1b) !important;
    color: #ffffff !important;
}

.is-double-delete-armed > i,
.is-double-delete-armed > svg,
.is-double-delete-armed > .contact-row-reach-icon {
    display: none !important;
}

.is-double-delete-armed [data-double-delete-label] {
    display: inline !important;
    color: inherit !important;
    font: inherit !important;
    font-weight: inherit !important;
    white-space: nowrap;
}

.is-double-delete-icon-only.is-double-delete-armed {
    min-width: 44px;
    justify-content: center;
}

.is-double-delete-busy {
    opacity: 0.92;
    cursor: progress !important;
    transform: none !important;
}

.ll-btn.ll-btn--outline.ll-btn--danger.action-with-spinner,
.lesson-workspace-delete-btn.action-with-spinner,
.today-row-actions-menu__item.action-with-spinner,
.ll-btn.ll-btn--ghost.action-with-spinner,
.ll-btn.ll-btn--solid.ll-btn--primary.action-with-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ll-btn.ll-btn--outline.ll-btn--danger.action-with-spinner.is-loading .button-spinner,
.lesson-workspace-delete-btn.action-with-spinner.is-loading .button-spinner,
.today-row-actions-menu__item.action-with-spinner.is-loading .button-spinner {
    display: inline-block;
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
}

.is-double-delete-busy.action-with-spinner.is-loading .button-spinner {
    display: inline-block;
}

.today-row-actions-menu__item--danger.is-double-delete-armed {
    justify-content: center;
}

.lesson-workspace-delete-link.is-double-delete-armed,
.lesson-workspace-delete-btn.is-double-delete-armed,
.contact-delete-button.is-double-delete-armed,
.upload-media-actions-menu__item--danger.is-double-delete-armed,
.ll-btn.ll-btn--text.ll-btn--text-danger.is-double-delete-armed {
    background: var(--color-danger-600, #dc2626) !important;
    border-color: var(--color-danger-700, #b91c1c) !important;
    color: #ffffff !important;
}

@keyframes double-delete-pulse {
    0% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(-1px);
    }

    70% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}

.upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost,
.upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost,
.upload-media-actions .upload-media-delete.ll-btn.ll-btn--outline.ll-btn--danger {
    min-height: 32px;
    max-height: 32px;
    padding: 0;
    border-radius: 8px;
    transform: none;
    box-sizing: border-box;
}

.upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost,
.upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost {
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-default));
    color: var(--brand);
}

.upload-media-actions .upload-media-delete.ll-btn.ll-btn--outline.ll-btn--danger {
    background: color-mix(in srgb, var(--surface-card-strong) 92%, white);
    border: 1px solid color-mix(in srgb, var(--color-danger-600) 28%, var(--border-default));
    color: var(--color-danger-600);
}

.upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost:hover,
.upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost:hover,
.upload-media-actions .upload-media-delete.ll-btn.ll-btn--outline.ll-btn--danger:hover {
    transform: none;
}

.upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost:hover,
.upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost:hover {
    background: color-mix(in srgb, var(--brand) 14%, var(--surface-card-strong));
    border-color: color-mix(in srgb, var(--brand) 38%, var(--border-default));
}

.upload-media-actions .upload-media-delete.ll-btn.ll-btn--outline.ll-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger-600) 14%, transparent);
    border-color: color-mix(in srgb, var(--color-danger-600) 48%, var(--border-default));
    color: var(--color-danger-600);
}

.upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost:disabled,
.upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--text-secondary) 22%, var(--border-default));
    background: color-mix(in srgb, var(--surface-card-strong) 88%, white);
}

.toast {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(100%, var(--app-shell-max-width, 520px));
    max-width: var(--app-shell-max-width, 520px);
    z-index: var(--lessonlink-z-toast, 100100);
    padding: 8px 14px max(10px, calc(6px + env(safe-area-inset-bottom, 0px)));
    border-radius: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 28, 36, 0.96);
    color: var(--text-heading, #f2ede4);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.38);
    text-align: center;
    font-size: var(--font-size-sm, 0.82rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
    transform: translate3d(-50%, 100%, 0);
    transform-origin: center bottom;
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
}

.toast__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: min(100%, 48rem);
    margin: 0 auto;
    padding-right: 2px;
}

.toast__message {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.toast__dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.toast__dismiss:hover {
    background: rgba(255, 255, 255, 0.22);
}

.toast__dismiss:focus-visible {
    outline: 2px solid var(--brand-primary, #7ec8ff);
    outline-offset: 2px;
}

.toast--error {
    border-top-color: color-mix(in srgb, #f87171 55%, transparent);
}

.toast--warn {
    border-top-color: color-mix(in srgb, #fbbf24 55%, transparent);
}

/* Centered large toast — big, bold, mid-screen (opt-in via showToast(..., { variant: 'large' })). */
.toast.toast--center {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(calc(100vw - 2rem), 28rem);
    max-width: min(calc(100vw - 2rem), 28rem);
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--brand-primary, #7ec8ff) 35%, transparent);
    background: color-mix(in srgb, rgba(12, 18, 24, 0.96) 88%, var(--brand-primary, #7ec8ff) 12%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 18px 48px rgba(0, 0, 0, 0.45);
    font-size: var(--ll-type-title-size, 1.15rem);
    font-weight: var(--ll-type-title-weight, 700);
    line-height: var(--ll-type-title-line, 1.25);
    letter-spacing: 0.01em;
    transform: translate3d(-50%, calc(-50% + 12px), 0) scale(0.96);
    transform-origin: center center;
}

.toast.toast--center.is-visible {
    transform: translate3d(-50%, -50%, 0) scale(1);
}

.toast.toast--center .toast__message {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.toast.toast--center .toast__dismiss {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.16);
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 560px) {
    :root {
        --app-inline-inset-start: env(safe-area-inset-left, 0px);
        --app-inline-inset-end: env(safe-area-inset-right, 0px);
    }

    /* .app-shell padding intentionally removed — the base rule uses
       --app-page-pad-block / --app-inline-inset-* which are already
       overridden in the :root block above for this breakpoint. */

    .titlebar {
        margin-bottom: var(--space-3);
        border-radius: 0;
    }

    .stub-card,
    .nav-card {
        padding: 16px;
        border-radius: 22px;
    }

    .recording-card {
        padding: 16px;
        border-radius: 22px;
    }

    .common-card,
    .email-panel,
    .lesson-dialog,
    .location-settings-panel {
        padding: var(--ll-card-padding-y) var(--ll-card-padding-x);
        border-radius: var(--radius-lg);
    }

    .email-input {
        border-radius: 10px;
    }

    .lesson-field {
        gap: 4px;
    }

    .common-card .lesson-form {
        gap: 8px;
    }

    .common-card .lesson-field {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 6px;
        align-items: center;
    }

    .common-card .location-row {
        gap: 6px;
    }

    .common-card .location-row .ll-btn.ll-btn--ghost,
    .common-card .ll-btn.ll-btn--solid.ll-btn--primary,
    .common-card .ll-btn.ll-btn--ghost,
    .common-card .ll-btn.ll-btn--outline.ll-btn--danger {
        width: 100%;
        min-height: 46px;
    }

    .common-card .sessions-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
    .common-card .student-portal__toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary {
        width: auto;
        flex: 0 0 auto;
        min-height: 42px;
    }

    .common-card .media-controls-toolbar .ll-btn.ll-btn--solid.ll-btn--primary,
    .common-card .media-controls-toolbar .ll-btn.ll-btn--ghost,
    .common-card .media-controls-toolbar .upload-record-btn,
    .common-card .media-controls-toolbar .upload-action-btn {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .common-card .action-buttons {
        gap: 6px;
    }

    .common-card .field-help {
        font-size: 0.8rem;
    }

    .lesson-dialog-overlay {
        padding: var(--dialog-top-offset) var(--ll-modal-gutter-x-end) var(--ll-modal-gutter-y-bottom) var(--ll-modal-gutter-x);
    }

    .lesson-dialog {
        width: 100%;
        max-height: calc(100vh - var(--dialog-top-offset) - var(--ll-sheet-padding-x) - var(--ll-modal-gutter-y-bottom));
        max-height: calc(100dvh - var(--dialog-top-offset) - var(--ll-sheet-padding-x) - var(--ll-modal-gutter-y-bottom));
        overflow-y: auto;
        padding: var(--ll-sheet-padding-x);
        gap: var(--ll-sheet-padding-y);
        border-radius: var(--ll-space-4);
    }

    .lesson-form {
        gap: var(--ll-list-gap);
    }

    .lesson-field {
        gap: 6px;
    }

    .lesson-dialog .location-row {
        gap: 8px;
    }

    .lesson-dialog .location-row .ll-btn.ll-btn--ghost {
        border-radius: 10px;
    }

    .lesson-dialog .action-buttons {
        gap: 8px;
    }

    .lesson-details-dialog-actions {
        width: 100%;
    }

    .lesson-dialog .field-help {
        font-size: 0.84rem;
    }

    .lesson-dialog .lesson-field {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    .lesson-start-picker-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .lesson-start-picker-panel {
        width: 100%;
        max-height: min(86dvh, 86vh, 720px);
        overflow-y: auto;
        border-radius: 22px 22px 0 0;
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }

    .lesson-start-field {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .lesson-start-card {
        grid-column: 1;
        min-height: 52px;
    }

    .lesson-start-quick-grid {
        grid-template-columns: 1fr;
    }

    .lesson-start-choice {
        min-height: 68px;
    }

    .lesson-start-date-pill {
        flex-basis: 86px;
        min-height: 70px;
    }

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

    .lesson-start-time-button,
    .lesson-start-confirm-actions .ll-btn.ll-btn--solid.ll-btn--primary,
    .lesson-start-secondary-actions .ll-btn.ll-btn--ghost {
        min-height: 52px;
    }

    .lesson-start-secondary-actions {
        grid-template-columns: 1fr;
    }

    .summary-card,
    .summary-dialog {
        padding: var(--ll-card-padding-y) var(--ll-card-padding-x);
        border-radius: 16px;
    }

    .summary-card {
        gap: var(--ll-card-gap);
    }

    .summary-status,
    .summary-progress-meta {
        font-size: 0.9rem;
    }

    .recording-primary-controls {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(8px, 2.2vw, 12px);
        align-items: stretch;
    }

    .record-button,
    .pause-record-button,
    .stop-record-button,
    .transport-icon-button {
        min-width: 0;
        min-height: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: clamp(6px, 1.8vw, 10px);
        font-size: clamp(0.8rem, 3.2vw, 1rem);
        display: grid;
        place-items: center;
    }

    .transport-icon-button {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    .pause-record-button i,
    .stop-record-button i,
    .transport-icon-button i {
        font-size: clamp(1.15rem, 5vw, 1.5rem);
    }

    .playhead-panel {
        grid-auto-flow: row;
        display: grid;
    }

    .playhead-slider-row {
        width: 100%;
    }

    .email-panel-header:not(:has(> .dialog-header-back)),
    .email-search-meta {
        grid-auto-flow: row;
        display: grid;
        justify-content: stretch;
    }

}

/* Profile Page Styles */
.profile-section {
    margin: 1.25rem 0;
    padding: 14px 16px 16px;
    border-radius: 14px;
    box-sizing: border-box;
    min-width: 0;
}

/* Billing / account bodies drop `.loading-shell` padding after load; keep gutters like usage stats. */
#subscription-content:not(.loading-shell),
#profile-content:not(.loading-shell) {
    padding-inline: var(--space-3);
    padding-block: 0 var(--space-3);
    box-sizing: border-box;
    min-width: 0;
}

/* Usage page: inset metrics + activity log from card / scroll edges */
#usage-statistics-content:not(.loading-shell) {
    display: grid;
    gap: var(--space-4);
    padding-inline: var(--space-3);
    padding-block: var(--space-2) var(--space-3);
    box-sizing: border-box;
    min-width: 0;
}

.profile-account-form {
    display: grid;
    gap: 14px;
}

.profile-account-form .action-buttons {
    align-items: center;
}

.profile-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--stroke);
}

.profile-item:last-child {
    border-bottom: none;
}

.profile-label {
    font-weight: 600;
    color: var(--ink);
}

.profile-value {
    color: var(--muted);
    text-align: right;
}

.profile-referral-code {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.profile-referral-link-block {
    display: grid;
    gap: 0.35rem;
}

.profile-referral-link-block .lesson-field {
    margin-bottom: 0;
}

.profile-code-display {
    font-family: "Courier New", monospace;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-align: center;
    background: var(--surface-strong);
    border: 2px solid var(--brand);
}

.profile-code-display:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--bg-glow-a);
}

.profile-referral-text {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.5;
    margin-top: 0.5rem;
}

.usage-activity-log {
    display: grid;
    gap: 10px;
    max-height: min(42vh, 360px);
    padding: 6px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    overflow-y: auto;
    /* Light panel: app dark theme sets --ink to a light color; keep log text readable */
    color: #0f1720;
    color-scheme: light;
}

.usage-activity-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(29, 49, 44, 0.14);
    border-radius: 12px;
    background: rgba(255, 250, 243, 0.92);
    color: #0f1720;
}

.usage-activity-date {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--brand-deep);
}

.usage-activity-copy {
    color: #14251f;
    line-height: 1.35;
    font-size: 0.88rem;
}

/* Subscription page */
.sub-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(29, 49, 44, 0.09);
    color: var(--muted);
}

.sub-status-active {
    background: rgba(15, 118, 110, 0.14);
    color: var(--brand-deep);
}

.sub-status-trialing {
    background: rgba(202, 138, 4, 0.14);
    color: #92400e;
}

.sub-status-past_due,
.sub-status-canceled {
    background: rgba(217, 45, 32, 0.12);
    color: #b42318;
}

.sub-status-paid {
    background: rgba(15, 118, 110, 0.14);
    color: var(--brand-deep);
}

.sub-status-failed {
    background: rgba(217, 45, 32, 0.12);
    color: #b42318;
}

.billing-plans-section {
    display: grid;
    gap: var(--space-3);
}

.billing-plans-grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.billing-plan-card {
    display: grid;
    gap: 10px;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 88%, white);
}

.billing-plan-card--recommended {
    border-color: color-mix(in srgb, var(--brand) 48%, var(--border-default));
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-card));
}

.billing-plan-card__badge {
    display: inline-flex;
    align-self: start;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 18%, transparent);
    color: var(--brand-deep);
    font-size: var(--ll-type-caption-size);
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.billing-plan-card__title {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
}

.billing-plan-card__summary {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--ll-type-body-size);
    line-height: 1.45;
}

.billing-plan-card__features {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-primary);
    font-size: var(--ll-type-body-size);
    line-height: 1.4;
}

.billing-plan-card__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.billing-plan-card__cta {
    width: 100%;
    justify-content: center;
}

.billing-plan-card__current-note {
    margin: 0;
    color: var(--brand-deep);
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-title-weight);
}

.billing-manage-row {
    display: grid;
    gap: 8px;
    margin-top: var(--space-2);
}

@media (max-width: 560px) {
    .billing-plan-card__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sub-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--stroke);
    border-radius: 16px;
    background: var(--surface-strong);
    margin-bottom: 4px;
}

.sub-card-chip {
    flex-shrink: 0;
}

.sub-card-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-card-name {
    font-weight: 600;
    color: var(--ink);
}

.sub-card-exp {
    font-size: 0.85rem;
    color: var(--muted);
}

.sub-card-form-wrap {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--stroke);
    border-radius: 18px;
    background: var(--surface-strong);
}

.sub-card-form {
    display: grid;
    gap: 14px;
}

.sub-card-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .sub-card-form-row {
        grid-template-columns: 1fr;
    }
}

.auth-pricing-section,
.auth-referral-section {
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: var(--surface-strong);
    border-radius: calc(var(--radius) / 2);
    border: 1px solid var(--stroke);
}

.auth-pricing-text,
.auth-referral-text {
    margin: 0.35rem 0;
    color: var(--ink);
    line-height: 1.5;
    font-size: var(--ll-type-body-size);
}

.auth-pricing-text:first-child,
.auth-referral-text:first-child {
    margin-top: 0;
}

.auth-pricing-text strong,
.auth-referral-text strong {
    color: var(--brand);
    font-weight: var(--ll-type-label-weight);
}

.auth-screen .common-card {
    gap: 8px;
    padding: 10px 10px 12px;
    /* reCAPTCHA challenge iframe breaks inside backdrop-filter ancestors. */
    backdrop-filter: none;
    overflow: visible;
}

@media (max-width: 400px) {
    .auth-screen .common-card {
        padding: 8px 8px 10px;
    }
}

.auth-screen .panel-copy {
    gap: 6px;
}

.auth-screen .auth-login-intro__body {
    margin: 0;
    color: var(--ll-color-text-secondary, rgba(255, 255, 255, 0.78));
}

.auth-screen .panel-copy h2 {
    font-size: max(var(--ll-type-display-size), clamp(1.45rem, 5vw, 1.7rem));
    font-weight: var(--ll-type-display-weight);
    line-height: 1.2;
}

.auth-screen .panel-copy p,
.auth-screen .email-empty-state,
.auth-screen .summary-system-option,
.auth-screen .auth-link-button,
.auth-screen .auth-pricing-text,
.auth-screen .auth-referral-text {
    font-size: var(--ll-type-heading-size);
}

.auth-screen .recording-kicker {
    margin: 0;
}

.auth-screen .lesson-field {
    margin: 0;
}

.auth-screen .lesson-field>span {
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
}

.auth-screen #auth-referral-code-status {
    grid-column: 2;
    margin-top: 0;
}

.auth-screen .email-input {
    min-height: 42px;
    padding: 8px 12px;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    border-radius: 10px;
}

.auth-screen .summary-system-option {
    margin: 0;
    gap: 6px;
}

.auth-screen .settings-divider {
    margin: 0;
}

.auth-screen .auth-pricing-section,
.auth-screen .auth-referral-section {
    margin: 8px 0 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.auth-screen .auth-pricing-text,
.auth-screen .auth-referral-text {
    margin: 6px 0;
    line-height: 1.5;
}

.auth-screen .auth-navigation,
.auth-screen .action-buttons {
    margin: 0;
    gap: 6px;
}

.auth-screen .login-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.auth-screen .login-action-buttons .ll-btn.ll-btn--solid.ll-btn--primary,
.auth-screen .login-action-buttons .ll-btn.ll-btn--ghost {
    width: 100%;
}

.auth-screen .login-auth-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.auth-screen .login-auth-option {
    display: grid;
    gap: 6px;
}

.auth-screen .login-auth-option__label {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    color: var(--muted);
}

.auth-screen .login-auth-option .ll-btn.ll-btn--solid.ll-btn--primary,
.auth-screen .login-auth-option .ll-btn.ll-btn--ghost {
    width: 100%;
}

.auth-screen .login-google-row .ll-btn.ll-btn--solid.ll-btn--primary {
    width: 100%;
}

.auth-screen .login-separator {
    height: 10px;
}

.auth-screen .login-email-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.auth-screen .login-email-row>span {
    grid-column: 1;
}

.auth-screen .login-email-row__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.auth-screen .login-email-row__controls--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.auth-screen .required-profile-start-over-wrap {
    margin-top: 12px;
    text-align: center;
}

.auth-screen .login-send-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.auth-screen .login-send-row .login-send-otp-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.auth-screen .login-identifier-inline-error {
    color: #b42318;
    margin-top: 6px;
    opacity: 1;
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.35;
}

.auth-screen .login-verify-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    width: 100%;
    text-align: center;
}

.auth-screen .login-verify-actions .auth-link-button {
    text-align: center;
    line-height: 1.35;
    max-width: 22rem;
}

.login-phone-recaptcha-hint {
    margin: 8px 0 0;
    font-size: var(--ll-type-body-size);
    line-height: 1.35;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 88%, transparent);
}

/* Fixed host on document.body — outside login card clipping / backdrop-filter. */
.login-phone-recaptcha-host {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: var(--lessonlink-z-dialog-ancillary);
    width: min(420px, calc(100vw - 28px));
    padding: 12px 14px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-default, rgba(148, 163, 184, 0.4));
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 96%, #fff);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);
    box-sizing: border-box;
}

.login-phone-recaptcha-host[hidden] {
    display: none !important;
}

.login-phone-recaptcha-host #login-phone-recaptcha {
    min-height: 74px;
    width: 100%;
    overflow: visible;
}

.auth-screen .compact-action {
    padding: 10px 14px;
    font-size: var(--ll-type-body-size);
    border-radius: 10px;
    white-space: nowrap;
}

.auth-screen .ll-btn.ll-btn--solid.ll-btn--primary,
.auth-screen .ll-btn.ll-btn--ghost {
    min-height: 52px;
    font-size: var(--ll-type-heading-size);
    border-radius: 12px;
}

.auth-navigation {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-link-button {
    background: none;
    border: none;
    color: var(--brand);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0;
    transition: color 120ms;
}

.auth-link-button:hover {
    color: var(--brand-deep);
}

.required-profile-footer {
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-align: center;
}

.required-profile-footer .auth-link-button {
    font-size: 0.85rem;
}

.field-validation-message {
    display: block;
    font-size: 0.85rem;
    margin-top: 4px;
    transition: color 200ms, opacity 200ms;
    opacity: 0.8;
}

.field-validation-message.form-autosave-status:not(:empty) {
    opacity: 1;
    font-weight: 500;
    min-height: 1.35em;
}

.form-autosave-footer {
    margin-top: var(--ll-space-3, 12px);
    padding-top: var(--ll-space-2, 8px);
    border-top: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
}

.lesson-workspace-autosave-status:not(:empty) {
    margin: 0 0 var(--ll-space-2, 8px);
    padding: 0 var(--ll-space-3, 12px);
}

.field-validation-message.validating {
    color: var(--muted);
}

.field-validation-message.valid {
    color: #2d7a3b;
}

.field-validation-message.invalid {
    color: #b42318;
}

/* Mic capture control and inline audio recorder */
.upload-record-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: auto;
    min-width: 44px;
    padding: 8px 16px;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 16px;
    color: white;
    font-size: 1.08rem;
    font-weight: var(--ll-type-title-weight);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.upload-record-btn:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
}

.upload-record-btn:active {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
}

.upload-record-btn i {
    font-size: 1.2rem;
}

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

.upload-record-split-control {
    display: flex;
    order: -1;
    flex: 2.7 1 0;
    min-width: min(100%, 180px);
    min-height: 72px;
    border-radius: 16px;
    box-shadow: none;
}

.upload-record-split-control .upload-record-btn {
    flex: 1 1 auto;
    min-height: 72px;
    border-radius: 16px 0 0 16px;
    box-shadow: none;
}

.upload-record-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    min-width: 52px;
    min-height: 72px;
    padding: 0 14px;
    border: 1px solid #dc2626;
    border-left-color: rgba(255, 255, 255, 0.28);
    border-radius: 0 16px 16px 0;
    background: #dc2626;
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.2s, border-color 0.2s;
}

.upload-record-menu-btn:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    border-left-color: rgba(255, 255, 255, 0.32);
}

.upload-record-menu-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.media-controls-toolbar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}

.media-controls-toolbar .ll-btn.ll-btn--solid.ll-btn--primary,
.media-controls-toolbar .ll-btn.ll-btn--ghost,
.media-controls-toolbar .upload-record-btn,
.media-controls-toolbar .upload-action-btn {
    min-height: 46px;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
}

.media-controls-toolbar .upload-record-btn,
.media-controls-toolbar .upload-action-btn {
    min-height: 72px;
}

.media-controls-toolbar .capture-action-group {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.media-controls-toolbar .capture-action-group > .upload-record-btn,
.media-controls-toolbar .capture-action-group > .upload-action-btn {
    flex: 1 1 auto;
    width: 100%;
}

.upload-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: auto;
    height: auto;
    min-width: 44px;
    padding: 8px 16px;
    background: var(--brand, #0f766e);
    border: 1px solid var(--brand, #0f766e);
    border-radius: 16px;
    color: #fff;
    font-size: 1.08rem;
    font-weight: var(--ll-type-title-weight);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.upload-action-btn:hover {
    background: #0b5d57;
    border-color: #0b5d57;
}

.upload-action-btn:active {
    background: #0a4a45;
    border-color: #0a4a45;
}

.upload-action-btn i {
    font-size: 1.2rem;
}

.lesson-workspace-editor-sibling--capture .media-controls-toolbar .record-video-btn {
    flex: 1.6 1 0;
    align-self: center;
    min-height: 56px;
    border-radius: 14px;
    font-weight: var(--ll-type-title-weight);
    color: var(--text-primary);
}

.record-video-btn i {
    margin-right: 6px;
}

.media-controls-toolbar .upload-media-quick-btn {
    flex: 0.55 1 0;
    min-height: 46px;
    align-self: center;
    padding-inline: 8px;
    border-radius: 12px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.01em;
    box-shadow: none;
}

.record-video-panel {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    overflow: hidden;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #000;
}

/* Beat sheet-overlay default gap so preview can go edge-to-edge. */
.ll-surface-host[data-ll-surface-host='embedded'].email-panel-overlay--global-modal-full > .ll-surface--sheet-overlay.record-video-panel {
    gap: 0;
}

/* App titlebar owns Back; chrome top only needs a light inset. */
.ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack .record-video-chrome__top {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 100%);
}

body:has(.record-video-panel.ll-lesson-transient-in-stack) .lessonlink-stack-host.lessonlink-stack-host--screen,
body:has(.record-audio-panel.ll-lesson-transient-in-stack) .lessonlink-stack-host.lessonlink-stack-host--screen {
    bottom: 0 !important;
}

/* Zero stack padding so the live preview can go edge-to-edge. */
.ll-stack-shell[data-ll-stack-id="record-video"] .ll-stack-shell__body,
.ll-stack-shell[data-ll-stack-id="record-video"] .app-route-fullscreen-body,
.ll-stack-shell[data-ll-stack-id="record-video"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="record-video"] .app-route-fullscreen-body-inner,
.ll-stack-shell[data-ll-stack-id="record-audio"] .ll-stack-shell__body,
.ll-stack-shell[data-ll-stack-id="record-audio"] .app-route-fullscreen-body,
.ll-stack-shell[data-ll-stack-id="record-audio"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="record-audio"] .app-route-fullscreen-body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-library-record-audio"] .ll-stack-shell__body,
.ll-stack-shell[data-ll-stack-id="playbook-library-record-audio"] .app-route-fullscreen-body,
.ll-stack-shell[data-ll-stack-id="playbook-library-record-audio"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-library-record-audio"] .app-route-fullscreen-body-inner {
    padding: 0 !important;
    gap: 0 !important;
}

.ll-stack-shell[data-ll-stack-id="record-video"] .ll-stack-shell__content,
.ll-stack-shell[data-ll-stack-id="record-audio"] .ll-stack-shell__content,
.ll-stack-shell[data-ll-stack-id="playbook-library-record-audio"] .ll-stack-shell__content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.ll-stack-shell__content > .record-audio-panel.ll-lesson-transient-in-stack .record-video-chrome__top {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 100%);
}

.record-video-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    flex: 0 0 auto;
    align-items: center;
    padding:
        max(8px, env(safe-area-inset-top, 0px))
        max(10px, env(safe-area-inset-right, 0px))
        12px
        max(10px, env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 70%, transparent 100%);
    color: #fff;
    pointer-events: none;
}

.record-video-header > * {
    pointer-events: auto;
}

.record-video-header .ll-surface__title,
.record-video-header .email-panel-close,
.record-video-header .ll-surface__back {
    color: #fff;
}

.record-video-status--ambient[hidden],
.record-video-dock-label[hidden] {
    display: none;
}

.record-video-panel__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.record-video-preview-shell {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden;
}

.record-video-preview-shell--zoomable {
    touch-action: none;
}

.record-video-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.record-video-video--css-zoom {
    transform-origin: center center;
    will-change: transform;
}

.record-video-video[hidden] {
    display: none;
}

.record-video-zoom-badge,
.record-video-chrome__top > .record-video-zoom-badge {
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.record-video-zoom-badge[hidden] {
    display: none;
}

.record-video-camera-fps,
.record-video-chrome__top > .record-video-camera-fps {
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.record-video-camera-fps[hidden] {
    display: none;
}

/* iPhone-style floating chrome over the live preview. */
.record-video-chrome {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.record-video-chrome__top,
.record-video-chrome__bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    pointer-events: none;
}

.record-video-chrome__top {
    align-items: center;
    gap: 8px;
    padding:
        max(12px, calc(env(safe-area-inset-top, 0px) + 52px))
        max(12px, env(safe-area-inset-right, 0px))
        8px
        max(12px, env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%);
}

.record-video-chrome__bottom {
    gap: 8px;
    padding:
        40px
        max(12px, env(safe-area-inset-right, 0px))
        max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px))
        max(12px, env(safe-area-inset-left, 0px));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%);
}

.record-video-chrome__top > *,
.record-video-chrome__bottom > *,
.record-video-dock,
.record-video-clips-drawer {
    pointer-events: auto;
}

.record-video-status--ambient {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    min-height: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

[data-capture-phase="recording"] .record-video-status--ambient {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    height: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.record-video-recording-hud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 80, 80, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: record-video-hud-in 220ms ease-out;
}

/* Author `display:flex` overrides the UA [hidden] rule — collapse when idle. */
.record-video-recording-hud[hidden] {
    display: none;
}

@keyframes record-video-hud-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.record-video-recording-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: #fff;
}

.record-video-recording-label {
    text-transform: none;
}

.record-video-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b30;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55);
    animation: record-video-pulse-dot 1.2s ease-out infinite;
}

@keyframes record-video-pulse-dot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 12px rgba(255, 59, 48, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }
}

.record-video-elapsed--hud {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.record-video-dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    column-gap: 10px;
    row-gap: 4px;
    width: 100%;
    padding-top: 0;
}

.record-video-dock__primary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    grid-column: 2;
}

.record-video-dock__side {
    display: flex;
    align-items: center;
    min-width: 0;
}

.record-video-dock__side--start {
    grid-column: 1;
    justify-self: start;
    justify-content: flex-start;
    align-self: center;
    width: 100%;
    padding-left: max(0px, env(safe-area-inset-left, 0px));
}

.record-video-dock__side--end {
    grid-column: 3;
    justify-self: stretch;
    justify-content: flex-end;
    align-self: center;
    width: 100%;
    padding-right: max(0px, env(safe-area-inset-right, 0px));
}

.record-video-go-lesson {
    appearance: none;
    display: block;
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 4px 4px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(180, 220, 170, 0.98);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
}

.record-video-go-lesson:hover:not(:disabled) {
    color: rgba(200, 235, 190, 1);
    background: transparent;
    text-decoration: underline;
}

.record-video-go-lesson:focus-visible {
    outline: 2px solid rgba(180, 220, 170, 0.85);
    outline-offset: 2px;
}

.record-video-go-lesson:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

.record-video-go-lesson[hidden] {
    display: none;
}

/* Staged Videos / Clips sheet — dark chrome on the drawer only so Start sits over video. */
.record-video-panel--has-clips .record-video-chrome__bottom {
    gap: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    border-radius: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.record-video-clips-drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    z-index: 2;
}

.record-video-clips-drawer[hidden] {
    display: none;
}

.record-video-clips-drawer__toggle {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 8px 16px 10px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.record-video-clips-drawer__toggle:hover {
    background: rgba(255, 255, 255, 0.04);
}

.record-video-clips-drawer__toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: -2px;
}

.record-video-clips-drawer__grabber {
    display: block;
    width: 36px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38);
}

.record-video-clips-drawer__title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.record-video-clips-drawer__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.record-video-clips-drawer__panel {
    display: block;
    min-height: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 240ms ease, opacity 180ms ease;
}

.record-video-clips-drawer--open .record-video-clips-drawer__panel {
    max-height: min(42dvh, 360px);
    opacity: 1;
    pointer-events: auto;
}

.record-video-clips-drawer__panel[hidden] {
    display: none;
}

.record-video-clips-drawer__panel-inner {
    min-height: 0;
    max-height: min(42dvh, 360px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 10px;
}

.record-video-panel--has-clips .record-video-preview-shell {
    flex: 1 1 auto;
    max-height: none;
}

.record-video-panel--has-clips .record-video-dock {
    padding:
        8px
        max(12px, env(safe-area-inset-right, 0px))
        8px
        max(12px, env(safe-area-inset-left, 0px));
    background: transparent;
}

.record-video-panel--has-clips .record-video-clips-drawer {
    border-radius: 16px 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 14, 16, 0.92);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px));
}

.record-video-panel--has-clips .capture-recording-call-hint {
    padding-inline: max(12px, env(safe-area-inset-left, 0px));
}

.record-video-media-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.record-video-media-list .upload-media-row {
    padding: 10px 4px;
    color: rgba(255, 255, 255, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.record-video-media-list .upload-media-row:first-child {
    border-top: 0;
}

.record-video-media-list .upload-media-name,
.record-video-media-list .upload-media-meta,
.record-video-media-list .field-help,
.record-video-media-list .upload-media-controls-meta {
    color: rgba(255, 255, 255, 0.82);
}

.record-video-media-list .ll-btn--text-accent {
    color: rgba(180, 220, 170, 0.98);
}

.record-video-media-list .ll-btn--text-danger {
    color: rgba(255, 160, 150, 0.96);
}

/* Audio stage sits in the Capture Video preview shell (dark full-bleed). */
.record-audio-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 24px 20px;
    pointer-events: none;
}

.record-audio-stage__mic {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 2rem;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.record-audio-panel[data-capture-phase="recording"] .record-audio-stage__mic {
    color: #fff;
    border-color: rgba(255, 80, 80, 0.55);
    background: radial-gradient(circle at 35% 30%, #ff8a80, #d92d20 70%);
    box-shadow:
        0 0 0 8px rgba(255, 59, 48, 0.12),
        0 12px 32px rgba(217, 45, 32, 0.4);
    animation: capture-audio-mic-pulse 1.25s ease-in-out infinite;
}

.record-audio-stage__waveform {
    width: min(100%, 320px);
    min-height: 64px;
}

.record-audio-panel .capture-waveform {
    height: 64px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.record-audio-panel .capture-waveform__bar {
    background: linear-gradient(180deg, rgba(180, 220, 170, 0.45), rgba(61, 220, 151, 0.95));
}

.record-audio-panel[data-capture-phase="recording"] .capture-waveform__bar {
    background: linear-gradient(180deg, rgba(255, 140, 130, 0.55), rgba(255, 70, 60, 0.98));
}

.record-audio-panel .capture-audio-preview,
.record-audio-preview {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 120px;
    z-index: 2;
    width: auto;
    margin: 0;
}

.record-audio-media-list {
    gap: 0;
}

.record-video-dock-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: var(--ll-type-label-weight);
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    min-height: 1.2em;
    line-height: 1.2;
    transition: color 180ms ease;
}

[data-capture-phase="recording"] .record-video-dock-label {
    color: #ff8a80;
}

/* Video capture only — keep audio shutter sizing elsewhere. */
.record-video-panel .capture-shutter {
    width: 52px;
    height: 52px;
}

.record-video-panel .capture-shutter::before {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(61, 220, 151, 0.28);
}

.record-video-panel .capture-shutter:focus-visible::before {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 0 4px rgba(15, 157, 116, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.35);
}

.record-video-panel .capture-shutter--recording:focus-visible::before {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.7),
        0 0 0 4px rgba(224, 45, 45, 0.55),
        0 6px 16px rgba(0, 0, 0, 0.35);
}

.record-video-panel .capture-shutter--recording::before {
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.65),
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(255, 80, 80, 0.32);
}

.record-video-panel .capture-shutter--recording .capture-shutter-core {
    border-radius: 4px;
}

.record-video-panel .capture-shutter--busy::before {
    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.45),
        0 6px 14px rgba(0, 0, 0, 0.2);
}

.capture-shutter {
    position: relative;
    width: 88px;
    height: 88px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    display: grid;
    place-items: center;
    box-shadow: none;
    transition: transform 160ms ease, filter 160ms ease;
}

/* Author `display:grid` overrides the UA [hidden] rule — collapse when unused. */
.capture-shutter[hidden] {
    display: none;
}

.capture-shutter::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 42%),
        linear-gradient(145deg, #3ddc97, #0f9d74 55%, #0a7d5c);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.55),
        0 12px 28px rgba(15, 157, 116, 0.45),
        0 0 28px rgba(61, 220, 151, 0.35);
    transition:
        background 240ms ease,
        box-shadow 240ms ease,
        transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.capture-shutter:hover:not(:disabled)::before {
    transform: scale(1.03);
    filter: brightness(1.04);
}

.capture-shutter:focus-visible {
    outline: none;
}

.capture-shutter:focus-visible::before {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.55),
        0 0 0 6px rgba(15, 157, 116, 0.55),
        0 12px 28px rgba(15, 157, 116, 0.45);
}

.capture-shutter--recording:focus-visible::before {
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.55),
        0 0 0 6px rgba(224, 45, 45, 0.55),
        0 12px 32px rgba(224, 45, 45, 0.45);
}

.capture-shutter:active:not(:disabled)::before {
    transform: scale(0.96);
}

.capture-shutter:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.capture-shutter:disabled::before {
    filter: grayscale(0.25) brightness(0.95);
}

.capture-shutter-core {
    position: relative;
    z-index: 1;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35);
    transition:
        border-radius 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        background 260ms ease,
        width 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
        height 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.capture-shutter--recording::before {
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%),
        linear-gradient(145deg, #ff6b6b, #e02d2d 52%, #b42318);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.5),
        0 12px 32px rgba(224, 45, 45, 0.5),
        0 0 32px rgba(255, 80, 80, 0.38);
}

.capture-shutter--recording .capture-shutter-core {
    width: 38%;
    height: 38%;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.capture-shutter--busy::before {
    background: linear-gradient(145deg, #6b7280, #4b5563);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 24px rgba(0, 0, 0, 0.2);
    animation: capture-shutter-busy 1.1s ease-in-out infinite;
}

.capture-shutter--busy .capture-shutter-core {
    width: 52%;
    height: 52%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.1));
    animation: capture-shutter-spin 0.85s linear infinite;
}

@keyframes capture-shutter-busy {
    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.08);
    }
}

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

.record-video-fallback-primary {
    appearance: none;
    width: auto;
    max-width: min(100%, 280px);
    margin: 0;
    min-height: 44px;
    padding: 12px 18px;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
    transition: background 140ms ease, border-color 140ms ease;
}

.record-video-fallback-primary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.58);
    border-color: rgba(255, 255, 255, 0.5);
}

.record-video-fallback-primary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.record-video-fallback-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.record-video-fallback-primary[hidden] {
    display: none;
}

.record-video-cancel--ghost {
    align-self: center;
    margin-top: 0;
    padding: 1px 6px;
    min-height: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--muted, rgba(29, 49, 44, 0.62));
    font-weight: 600;
    font-size: 0.65rem;
    line-height: 1.15;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 140ms ease, background 140ms ease;
}

.record-video-cancel--ghost:hover:not(:disabled) {
    color: var(--ink, #1d312c);
    background: rgba(29, 49, 44, 0.05);
}

.record-video-cancel--ghost:focus-visible {
    outline: 2px solid rgba(15, 157, 116, 0.55);
    outline-offset: 2px;
    border-radius: 6px;
}

.record-video-cancel--ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    text-decoration: none;
}

.capture-recording-call-hint {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--muted, rgba(29, 49, 44, 0.58));
}

.record-video-panel .capture-recording-call-hint {
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    max-width: 22rem;
    margin-inline: auto;
}

/* --- Shared capture framework (audio + future modes) --- */
.capture-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    padding: 8px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(245, 248, 246, 0.85));
    border: 1px solid rgba(29, 49, 44, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.capture-waveform__bar {
    flex: 1 1 0;
    min-width: 2px;
    max-width: 5px;
    height: 40px;
    border-radius: 99px;
    background: linear-gradient(180deg, rgba(15, 157, 116, 0.35), rgba(15, 157, 116, 0.85));
    transform: scaleY(0.22);
    transform-origin: center bottom;
    transition: opacity 120ms ease;
    will-change: transform;
}

[data-capture-phase="recording"] .capture-modal--audio .capture-waveform__bar {
    background: linear-gradient(180deg, rgba(255, 90, 90, 0.45), rgba(200, 40, 40, 0.95));
}

@keyframes capture-audio-mic-pulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

.capture-audio-waveform-host {
    min-height: 56px;
}

[data-capture-variant="fallback"][data-capture-mode="video"] .record-video-dock-label {
    color: rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .record-audio-stage__mic {
        animation: none !important;
    }

    .capture-waveform__bar {
        transition: none !important;
    }

    .record-video-recording-hud,
    .record-video-pulse-dot,
    .capture-shutter::before,
    .capture-shutter-core,
    .capture-shutter--busy::before,
    .capture-shutter--busy .capture-shutter-core {
        animation: none !important;
        transition: none !important;
    }

    .capture-shutter:hover:not(:disabled)::before {
        transform: none;
    }
}

@media (max-width: 720px) {
    .media-controls-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .media-controls-toolbar .capture-action-group {
        min-height: 64px;
        width: 100%;
    }

    .media-controls-toolbar .upload-record-btn,
    .media-controls-toolbar .upload-action-btn,
    .media-controls-toolbar .upload-record-menu-btn {
        min-height: 64px;
    }

    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .upload-record-btn,
    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .upload-action-btn {
        padding-inline: clamp(6px, 2.4vw, 14px);
        font-size: clamp(0.9rem, 3.6vw, 1.06rem);
        gap: clamp(4px, 1.8vw, 10px);
    }

    .record-video-overlay.email-panel-overlay.email-panel-overlay--global-modal-full {
        padding: 0;
    }

    .record-video-panel {
        border-radius: 0;
    }

    .record-video-preview-shell {
        min-height: 0;
    }

    .record-video-video {
        max-height: none;
        border-radius: 0;
    }

    .app-shell-main > .email-panel-overlay.record-video-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.record-video-panel {
        padding: 0;
        gap: 0;
    }

    .record-video-panel__body {
        gap: 0;
    }

    /* When app titlebar owns navigation, chrome top needs less inset. */
    .ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack .record-video-chrome__top,
    .ll-stack-shell__content > .record-audio-panel.ll-lesson-transient-in-stack .record-video-chrome__top {
        padding-top: max(10px, env(safe-area-inset-top, 0px));
    }

}

@media (max-width: 420px) {
    .lesson-workspace-editor-sibling--capture .media-controls-toolbar {
        gap: 6px;
    }

    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .capture-action-group {
        min-height: 52px;
    }

    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .upload-record-btn,
    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .upload-action-btn {
        min-height: 52px;
        padding-inline: clamp(6px, 2vw, 10px);
        font-size: clamp(0.84rem, 3.1vw, 0.94rem);
        gap: clamp(4px, 1.4vw, 8px);
    }

    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .upload-record-btn i,
    .lesson-workspace-editor-sibling--capture .media-controls-toolbar .upload-action-btn i {
        font-size: clamp(0.95rem, 3.6vw, 1.05rem);
    }
}

.record-audio-inline[hidden] {
    display: none !important;
}

/* Fallback overlay (no transient stack): same full-bleed shell as Capture Video. */
.record-audio-inline:not([hidden]) {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
}

.record-audio-inline__backdrop {
    position: absolute;
    inset: 0;
    background: #000;
}

.record-audio-inline > .record-audio-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
}

.recorder-close-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--muted);
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 1;
    border-radius: var(--radius-pill, 999px);
}

.recorder-close-btn:hover {
    color: var(--text);
    background: var(--hover-bg);
}

/* Dialog Overlay and Content */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 27, 23, 0.46);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--dialog-top-offset) var(--ll-modal-gutter-x-end) var(--ll-modal-gutter-y-bottom) var(--ll-modal-gutter-x);
    overflow-y: auto;
    overscroll-behavior: contain;
    backdrop-filter: blur(10px);
    animation: fadeIn var(--motion-fast) var(--ease-standard);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dialog-content {
    background: color-mix(in srgb, var(--surface-card-strong) 96%, white);
    border-radius: var(--radius-xl);
    padding: var(--ll-space-6);
    max-width: 90vw;
    max-height: calc(100vh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4));
    max-height: calc(100dvh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4));
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 40px 86px rgba(9, 11, 14, 0.34);
    animation: slideUp var(--motion-base) var(--ease-standard);
    border: 1px solid var(--border-default);
}

.dialog-content--player-plus {
    max-width: min(92vw, 560px);
}

.dialog-content.dialog-content--transcript-view {
    max-width: min(92vw, 640px);
    width: 100%;
}

.dialog-content--transcript-view .dialog-message--rich {
    margin-top: 8px;
}

.dialog-overlay:has(.dialog-content--session-summary-view) {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

.dialog-content.dialog-content--session-summary-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    min-height: 100svh;
    max-height: none;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}

.dialog-content.dialog-content--session-summary-view.dialog-content--dismiss-icon .dialog-header-with-dismiss {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) var(--space-3) 0;
}

.dialog-content.dialog-content--session-summary-view.dialog-content--dismiss-icon .dialog-header-with-dismiss .dialog-icon-dismiss.ll-back-action {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: var(--space-4);
}

.dialog-content.dialog-content--session-summary-view.dialog-content--dismiss-icon .dialog-header-with-dismiss .ll-back-action i {
    pointer-events: none;
}

.dialog-content.dialog-content--session-summary-view.dialog-content--dismiss-icon .dialog-header-with-dismiss .ll-back-action__label {
    pointer-events: none;
}

.dialog-content.dialog-content--session-summary-view .dialog-message--rich {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dialog-content.dialog-content--session-summary-view .session-summary-dialog__body {
    font-size: 0.95rem;
    line-height: 1.55;
}

.dialog-content.dialog-content--session-summary-view .summary-shell--session-menu.summary-shell--read-only {
    max-width: none;
}

.dialog-content.dialog-content--session-summary-view .session-summary-dialog__pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.88rem;
    line-height: 1.45;
}

.dialog-content.dialog-content--session-summary-view .summary-media-links {
    margin-top: var(--space-3);
}

.lesson-transcript-view-pre {
    margin: 0;
    padding: 12px 14px;
    max-height: min(60vh, 480px);
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 0.88rem;
    line-height: 1.45;
    border-radius: 12px;
    border: 1px solid var(--border-default, var(--stroke));
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    color: var(--text-primary, var(--ink));
}

/* reCAPTCHA v2 + challenge iframe break when this card clips descendants or the overlay uses backdrop-filter. */
.dialog-overlay:has(.dialog-content--profile-contact-verify) {
    backdrop-filter: none;
    background: rgba(16, 27, 23, 0.76);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom), 120px);
}

.dialog-content.dialog-content--profile-contact-verify {
    max-width: min(92vw, 520px);
    display: grid;
    gap: 14px;
    padding: 20px 24px;
    overflow: visible;
    max-height: none;
}

.dialog-content--profile-contact-verify [hidden] {
    display: none !important;
}

.profile-contact-verify-panel {
    margin-top: 0;
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    overflow: visible;
}

.profile-contact-verify-panel:not([hidden])+.profile-contact-verify-panel:not([hidden]) {
    margin-top: 0;
}

.dialog-content--profile-contact-verify .otp-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 6px;
    margin-bottom: 8px;
}

.dialog-content--profile-contact-verify .otp-code-group {
    display: grid;
    grid-template-columns: repeat(6, minmax(36px, 1fr));
    gap: 8px;
    width: 100%;
}

.dialog-content--profile-contact-verify .otp-digit-input {
    width: 100%;
    min-width: 0;
    height: 50px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    background: #fff;
    color: #0f1720;
    color-scheme: light;
    caret-color: #0f1720;
}

.dialog-content--profile-contact-verify .otp-digit-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.dialog-content--profile-contact-verify .otp-code-row .compact-action {
    justify-self: stretch;
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
}

.dialog-content--profile-contact-verify .panel-copy h2 {
    font-size: 1.7rem;
    line-height: 1.2;
}

.dialog-content--profile-contact-verify .panel-copy p,
.dialog-content--profile-contact-verify .email-empty-state,
.dialog-content--profile-contact-verify .recording-kicker {
    font-size: 1.05rem;
}

.dialog-content--profile-contact-verify .recording-kicker {
    margin: 0;
}

.dialog-content--profile-contact-verify .login-email-row__controls--stacked {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.dialog-content--profile-contact-verify .login-email-row__controls--stacked .compact-action {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
}

.profile-contact-verify-recaptcha-hint {
    margin: 0 0 8px;
    font-size: 0.92rem;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 88%, transparent);
}

/* Fixed host on document.body — outside modal clipping / stacking. */
.profile-contact-verify-recaptcha-host {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: var(--lessonlink-z-dialog-ancillary);
    width: min(420px, calc(100vw - 28px));
    padding: 12px 14px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-default, rgba(148, 163, 184, 0.4));
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 96%, #fff);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38);
    box-sizing: border-box;
}

.profile-contact-verify-recaptcha-host #profile-contact-verify-recaptcha {
    min-height: 74px;
    width: 100%;
    overflow: visible;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 600px) {
    .dialog-content {
        width: auto;
        min-width: 320px;
        max-width: 500px;
    }
}

@media (max-width: 560px) {
    .dialog-content {
        width: min(100%, 560px);
        border-radius: var(--radius-lg);
        padding: var(--ll-space-4);
    }

    .dialog-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .dialog-action-group {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-left: 0;
    }

    .dialog-action-spacer {
        display: none;
    }

    .dialog-buttons .ll-btn.ll-btn--solid.ll-btn--primary,
    .dialog-buttons .ll-btn.ll-btn--ghost,
    .dialog-buttons .ll-btn.ll-btn--outline.ll-btn--danger {
        width: 100%;
        min-height: 46px;
    }
}

.dialog-title {
    margin: 0 0 12px 0;
    font-size: var(--font-size-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-tight);
}

.dialog-message {
    margin: 0 0 20px 0;
    font-size: var(--font-size-md);
    color: var(--text-muted);
    line-height: var(--line-relaxed);
}

.dialog-message.dialog-message--prewrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dialog-message.dialog-message--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}

.dialog-content.dialog-content--weather-detail {
    max-width: min(92vw, 440px);
    max-height: min(88dvh,
            calc(100dvh - var(--dialog-top-offset) - max(var(--space-4), env(safe-area-inset-bottom)) - var(--space-4)));
    max-height: min(88vh,
            calc(100vh - var(--dialog-top-offset) - max(var(--space-4), env(safe-area-inset-bottom)) - var(--space-4)));
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: none;
    box-shadow:
        0 28px 80px rgba(9, 11, 14, 0.42),
        0 0 0 1px color-mix(in srgb, var(--border-default) 70%, transparent);
}

.dialog-content.dialog-content--weather-detail:not(.dialog-content--dismiss-icon) .dialog-title {
    margin: 0;
    padding: var(--space-4) var(--space-4) 4px;
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.dialog-content.dialog-content--weather-detail.dialog-content--dismiss-icon .dialog-header-with-dismiss.ll-header-bar--centered-title {
    display: grid;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    column-gap: 8px;
    padding: var(--space-4) var(--space-4) 8px;
    position: relative;
    z-index: 1;
}

.dialog-content.dialog-content--weather-detail.dialog-content--dismiss-icon .dialog-header-with-dismiss:not(.ll-header-bar--centered-title) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--space-4) var(--space-4) 8px;
    position: relative;
    z-index: 1;
}

.dialog-header-with-dismiss {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-5) var(--space-5) 8px;
}

.dialog-header-with-dismiss:has(.ll-back-action--has-label) .dialog-title.ll-header-title-merged {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

.dialog-header-with-dismiss:has(.ll-back-action--has-label) .dialog-icon-dismiss.ll-back-action {
    flex: 1 1 auto;
    max-width: none;
    text-align: left;
}

.dialog-header-with-dismiss .dialog-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.dialog-icon-dismiss {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.dialog-icon-dismiss:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--text-primary) 55%, transparent);
    outline-offset: 2px;
}

.dialog-icon-dismiss:active {
    transform: scale(0.96);
}

.dialog-content.dialog-content--weather-detail .dialog-message--rich {
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    line-height: var(--line-relaxed);
}

.dialog-content.dialog-content--weather-detail .dialog-buttons {
    padding: 0 var(--space-4) var(--space-4);
}

.weather-detail-dialog {
    display: grid;
    gap: 0;
}

.weather-detail-dialog__body {
    padding: var(--space-4);
}

.weather-detail-dialog--sunny {
    --weather-detail-accent: color-mix(in srgb, #fbbf24 65%, var(--text-muted));
}

.weather-detail-dialog--partly-cloudy {
    --weather-detail-accent: color-mix(in srgb, #93c5fd 60%, var(--text-muted));
}

.weather-detail-dialog--cloudy {
    --weather-detail-accent: color-mix(in srgb, #94a3b8 70%, var(--text-muted));
}

.weather-detail-dialog--rain {
    --weather-detail-accent: color-mix(in srgb, #60a5fa 65%, var(--text-muted));
}

.weather-detail-dialog--snow {
    --weather-detail-accent: color-mix(in srgb, #bae6fd 55%, var(--text-muted));
}

.weather-detail-dialog--storm {
    --weather-detail-accent: color-mix(in srgb, #818cf8 65%, var(--text-muted));
}

.weather-detail-dialog--mixed {
    --weather-detail-accent: color-mix(in srgb, #fcd34d 60%, var(--text-muted));
}

.weather-detail-dialog__eyebrow {
    margin: 0 0 4px 0;
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--weather-detail-accent, var(--text-muted));
}

.weather-detail-dialog__headline {
    margin: 0 0 6px 0;
    font-size: var(--font-size-xl);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: var(--line-tight);
}

.weather-detail-dialog__vibe {
    margin: 0 0 10px 0;
    font-size: var(--font-size-md);
    font-style: italic;
    color: color-mix(in srgb, var(--text-muted) 55%, var(--text-primary));
    line-height: var(--line-relaxed);
}

.weather-detail-dialog__location-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    margin: 0 0 var(--space-3) 0;
}

.weather-detail-dialog__location {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
    flex: 1 1 12rem;
    font-size: var(--font-size-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.weather-detail-dialog__location-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.weather-detail-dialog__edit-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-default) 55%, transparent);
    background: color-mix(in srgb, var(--surface-card) 40%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.weather-detail-dialog__edit-location:hover {
    background: color-mix(in srgb, var(--surface-card) 62%, transparent);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--border-default) 75%, transparent);
}

.weather-detail-dialog__edit-location i {
    font-size: 0.72rem;
    opacity: 0.9;
}

.weather-detail-dialog__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: var(--space-3);
}

.weather-detail-stat {
    display: grid;
    gap: 3px;
    justify-items: center;
    text-align: center;
    padding: 8px 6px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-default) 55%, transparent);
}

.weather-detail-stat__icon {
    font-size: 1.15rem;
    line-height: 1;
}

.weather-detail-stat__label {
    font-size: var(--font-size-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.weather-detail-stat__value {
    font-size: var(--font-size-md);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
}

.weather-detail-dialog__wind-card {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-default) 55%, transparent);
}

.weather-detail-dialog__wind-icon {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1;
    margin-top: 1px;
}

.weather-detail-dialog__wind-text {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    line-height: var(--line-normal);
}

@media (max-width: 560px) {
    .dialog-content.dialog-content--weather-detail.dialog-content--dismiss-icon .dialog-header-with-dismiss {
        padding: var(--space-3) var(--space-3) 6px;
        gap: 8px;
    }

    .dialog-content.dialog-content--weather-detail .dialog-buttons {
        padding: 0 var(--space-3) var(--space-3);
    }

    .weather-detail-dialog__body {
        padding: var(--space-3);
    }

    .weather-detail-dialog__headline {
        font-size: clamp(1.02rem, 4.2vw, 1.22rem);
    }

    .weather-detail-dialog__vibe {
        margin-bottom: 8px;
        font-size: var(--font-size-sm);
        line-height: var(--line-normal);
    }

    .weather-detail-dialog__stats {
        gap: 6px;
        margin-bottom: var(--space-2);
    }

    .weather-detail-stat {
        padding: 6px 4px;
    }

    .weather-detail-stat__value {
        font-size: var(--font-size-sm);
    }

    .weather-detail-dialog__wind-card {
        padding: 6px 8px;
    }

    .weather-detail-dialog__wind-text {
        font-size: var(--font-size-sm);
    }
}

.dialog-message .player-plus-upgrade-dialog {
    display: grid;
    gap: 16px;
}

.player-plus-upgrade-dialog p {
    margin: 0;
}

.player-plus-upgrade-dialog__beta-note {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--border-default));
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-card));
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.player-plus-upgrade-dialog__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.player-plus-upgrade-dialog__plan {
    display: grid;
    gap: 2px;
    padding: 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-card) 86%, white);
    color: var(--text-muted);
}

.player-plus-upgrade-dialog__plan--featured {
    border-color: color-mix(in srgb, var(--brand) 48%, var(--border-default));
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-card-strong));
}

.player-plus-upgrade-dialog__plan-name {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.player-plus-upgrade-dialog__plan strong {
    color: var(--text-primary);
    font-size: 1.55rem;
    line-height: 1.1;
}

.player-plus-upgrade-dialog__features {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-primary);
}

@media (max-width: 560px) {
    .player-plus-upgrade-dialog__plans {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dialog-input {
    width: 100%;
    padding: 10px 12px;
    margin: 0 0 20px 0;
    font-size: 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    box-sizing: border-box;
    font-family: inherit;
}

.dialog-input:focus {
    outline: none;
    border-color: rgba(63, 168, 90, 0.56);
    box-shadow: 0 0 0 2px rgba(45, 122, 59, 0.4);
}

.dialog-content--student-lesson-title {
    max-width: min(92vw, 520px);
}

.dialog-message--compact {
    margin-top: 0;
    margin-bottom: 6px;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.dialog-stacked-fields {
    display: grid;
    gap: 14px;
    margin: 4px 0 0;
}

.dialog-field-group {
    display: grid;
    gap: 6px;
}

.dialog-field-label {
    font-size: 0.78rem;
    font-weight: var(--ll-type-label-weight);
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.dialog-confirm-facts {
    display: grid;
    gap: 12px;
    margin: 4px 0 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--border-default) 78%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-strong, #1a1f24) 72%, transparent);
}

.dialog-confirm-facts__row {
    display: grid;
    gap: 2px;
}

.dialog-confirm-facts dt {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dialog-confirm-facts dd {
    margin: 0;
    font-size: 1.08rem;
    font-weight: var(--ll-type-heading-weight);
    line-height: 1.35;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.dialog-confirm-hint {
    margin: 0 0 12px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.dialog-input--readonly {
    cursor: default;
    resize: none;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
}

.dialog-input--readonly:focus {
    border-color: var(--border-default);
    box-shadow: none;
}

.dialog-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dialog-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.dialog-action-spacer {
    flex: 1 1 auto;
    min-width: 12px;
}

.dialog-buttons--three-way .dialog-action-group--wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin-left: 0;
}

.email-panel .action-buttons,
.lesson-dialog .action-buttons,
.dialog-content .dialog-buttons {
    width: 100%;
}

.email-panel .action-buttons,
.lesson-dialog .action-buttons {
    justify-content: space-between;
}

.email-panel .action-buttons .ll-btn.ll-btn--outline.ll-btn--danger,
.lesson-dialog .action-buttons .ll-btn.ll-btn--outline.ll-btn--danger,
.dialog-buttons .ll-btn.ll-btn--outline.ll-btn--danger {
    margin-right: auto;
}

.email-panel .action-buttons .ll-btn.ll-btn--solid.ll-btn--primary,
.lesson-dialog .action-buttons .ll-btn.ll-btn--solid.ll-btn--primary {
    margin-left: 0;
}

.email-panel .action-buttons .ll-btn.ll-btn--ghost:first-child:not(:last-child),
.lesson-dialog .action-buttons .ll-btn.ll-btn--ghost:first-child:not(:last-child) {
    margin-left: auto;
}

.availability-shell .common-card {
    max-width: min(1100px, 100%);
    padding: 12px 14px;
}

.availability-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.availability-segmented {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: rgba(255, 250, 243, 0.85);
    box-shadow: inset 0 1px 2px rgba(29, 49, 44, 0.08);
}

.availability-mode-pill {
    border: 0;
    background: transparent;
    color: var(--ink);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    cursor: pointer;
}

.availability-mode-pill.is-active {
    background: var(--brand);
    color: #fff;
}

.availability-paint-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
}

.availability-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.availability-field {
    display: grid;
    gap: 6px;
}

.availability-field span {
    font-size: var(--ll-type-body-size);
    color: var(--muted);
    font-weight: var(--ll-type-label-weight);
}

.availability-day-actions {
    margin-top: 8px;
}

.availability-grid-scroll {
    margin-top: 8px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.6);
    overflow: auto;
    max-height: min(68vh, 820px);
    -webkit-overflow-scrolling: touch;
    /* Keep outer scroll from eating the gesture before FullCalendar’s touch long-press completes */
    overscroll-behavior: contain;
    position: relative;
}

.availability-calendar-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    background: var(--bg-elevated, #fff);
    pointer-events: none;
}

.availability-grid-scroll.is-calendar-loading .availability-calendar-loading {
    display: flex;
}

.availability-calendar-loading__label {
    color: var(--text-secondary);
    font: var(--ll-type-label-sm, 600 0.75rem/1.2 system-ui, sans-serif);
    letter-spacing: 0.02em;
}

.availability-editor--embedded .calendar-toolbar {
    flex-shrink: 0;
}

.availability-editor--embedded .availability-grid-scroll {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: auto;
}

/* FullCalendar grid density + availability overlays (see `.availability-calendar` theme block earlier) */
.availability-calendar .fc-timegrid-slot,
.availability-calendar .fc-timegrid-axis {
    height: 2.6rem;
}

.availability-calendar .fc-col-header-cell-cushion,
.availability-calendar .fc-timegrid-axis-cushion,
.availability-calendar .fc-timegrid-slot-label-cushion {
    color: var(--text-primary);
    font-weight: 700;
}

.availability-calendar .fc-timeGridWeek-view .calendar-week-day-header {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em;
    white-space: nowrap;
}

.availability-calendar .fc-timeGridWeek-view .calendar-week-day-header__dow-letter {
    display: none;
}

.availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse {
    width: 1.75rem;
    min-width: 1.75rem;
    max-width: 2rem;
}

/* Sparse week columns: stack day number + single-letter DOW (fits ~1.75rem). */
.availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse .calendar-week-day-header {
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.05;
    white-space: normal;
}

.availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse .calendar-week-day-header__dow-short {
    display: none;
}

.availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse .calendar-week-day-header__num {
    font-size: var(--ll-type-meta-size);
    font-weight: 700;
    line-height: 1;
}

.availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse .calendar-week-day-header__dow-letter {
    display: block;
    font-size: var(--ll-type-micro-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.availability-calendar .fc-timeGridWeek-view .fc-col-header-cell.fc-day-today.fc-day-col--sparse .fc-col-header-cell-cushion {
    min-width: 0;
    width: auto;
    min-height: 0;
    padding: 3px 2px;
    border-radius: 0.55em;
}

.availability-calendar .fc-bg-event {
    overflow: hidden;
}

.availability-calendar .fc-bg-event .fc-event-title,
.availability-calendar .fc-bg-event .fc-event-main {
    display: none;
}

.availability-calendar .calendar-availability-overlay-label {
    position: absolute;
    inset: 2px 4px auto;
    z-index: 1;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.availability-calendar .calendar-availability-overlay-label--explicit {
    color: #5f6368;
}

.availability-calendar .fc-daygrid-bg-harness .calendar-availability-overlay-label,
.availability-calendar .fc-daygrid-day-bg .calendar-availability-overlay-label {
    position: absolute;
    inset: auto 3px 3px;
    display: block;
    padding: 0;
    font-size: var(--ll-type-micro-size);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.availability-calendar .availability-lesson-event {
    border-color: transparent;
}

.availability-calendar .availability-lesson-event:hover .fc-event-main,
.availability-calendar .availability-lesson-event:hover .fc-event-title,
.availability-calendar .availability-lesson-event:hover .fc-event-time,
.availability-calendar .availability-lesson-event:hover .calendar-lesson-fc-event-time,
.availability-calendar .availability-lesson-event:hover .calendar-lesson-fc-event-title-line,
.availability-calendar .availability-lesson-event:hover .calendar-lesson-fc-event-person,
.availability-calendar .availability-lesson-event:hover .calendar-lesson-fc-event-day-main {
    color: inherit;
}

/* Lesson blocks: title + optional person (hidden when FC marks event as short) */
.availability-calendar .calendar-lesson-fc-event-inner {
    display: flex;
    flex-direction: column;
    gap: 0.08em;
    min-height: 0;
    padding: 1px 2px 2px;
    overflow: hidden;
    line-height: 1.12;
    font-size: var(--ll-type-micro-size);
}

.availability-calendar .calendar-lesson-fc-event-time {
    font-size: 1em;
    font-weight: var(--ll-type-label-weight);
    opacity: 0.92;
    flex-shrink: 0;
}

.availability-calendar .calendar-lesson-fc-event-title-line {
    font-weight: var(--ll-type-label-weight);
    font-size: var(--ll-type-label-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Week grid: compact surname-only label (availability-feature.js) */
.availability-calendar .fc-timeGridWeek-view .calendar-lesson-fc-event-inner--week {
    gap: 0.04em;
    padding: 0 1px 1px;
    line-height: 1.05;
}

.availability-calendar .fc-timeGridWeek-view .calendar-lesson-fc-event-inner--week .calendar-lesson-fc-event-title-line {
    font-size: var(--ll-type-micro-size);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: 0.01em;
}

.availability-calendar .calendar-lesson-fc-event-person {
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    opacity: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.availability-calendar .fc-timegrid-event-short .calendar-lesson-fc-event-person {
    display: none;
}

.availability-calendar .calendar-lesson-fc-event-inner--day {
    padding: 0 2px 1px;
}

.availability-calendar .calendar-lesson-fc-event-inner--day .calendar-lesson-fc-event-day-main {
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.availability-calendar .fc-highlight {
    background: color-mix(in srgb, var(--brand) 22%, var(--bg-elevated));
}

.availability-grid {
    display: grid;
    grid-template-columns: 68px repeat(var(--availability-day-count, 7), minmax(96px, 1fr));
    width: max-content;
    min-width: 100%;
}

.availability-grid-header,
.availability-grid-time {
    padding: 6px 4px;
    background: rgba(15, 118, 110, 0.08);
    border-right: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--ink);
}

.availability-grid-time {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(235, 246, 242, 0.98);
}

.availability-grid-time--sticky {
    z-index: 2;
}

.availability-slot {
    min-height: 40px;
    border: 0;
    border-right: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    touch-action: none;
}

.availability-slot.is-available {
    background: color-mix(in srgb, var(--brand) 74%, white);
}

.availability-slot.is-unavailable {
    background: rgba(132, 141, 152, 0.56);
    box-shadow: inset 0 0 0 1px rgba(72, 82, 94, 0.45);
}

.availability-slot.is-empty {
    background: rgba(255, 255, 255, 0.75);
}

.availability-slot:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

@media (max-width: 640px) {
    .availability-shell .common-card {
        padding: 10px 12px;
    }

    .availability-calendar .fc {
        min-width: 640px;
    }

    .availability-calendar .fc-toolbar-title {
        font-size: clamp(0.92rem, 6vw, 1.3rem);
        text-align: center;
    }

    .availability-grid {
        grid-template-columns: 64px repeat(var(--availability-day-count, 7), minmax(84px, 1fr));
    }

    .availability-grid-header,
    .availability-grid-time {
        font-size: var(--ll-type-micro-size);
        padding: 6px 4px;
    }

    .availability-mode-pill {
        padding: 7px 11px;
        font-size: var(--ll-type-body-size);
    }
}

/* ---- public/style/features/media-queue.css ---- */
.upload-media-controls-meta--capture {
    display: grid;
    grid-template-columns: minmax(2.25rem, auto) 1.125rem 1rem;
    align-items: center;
    column-gap: 4px;
    justify-items: end;
}

.upload-media-controls-meta__size {
    justify-self: end;
    font-variant-numeric: tabular-nums;
    font-size: var(--ll-type-micro-size);
    line-height: 1.1;
    color: var(--text-tertiary, var(--text-secondary, #6b7280));
}

.upload-media-source-pill,
.upload-media-queue-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    padding: 0;
    font-size: 0.5625rem;
    font-weight: var(--ll-type-label-weight);
    line-height: 1;
    border: 1px solid transparent;
    box-sizing: border-box;
    flex-shrink: 0;
}

.upload-media-source-pill--slot {
    visibility: hidden;
    pointer-events: none;
}

.upload-media-source-pill--upload {
    color: var(--text-secondary, #6b7280);
    border-color: color-mix(in srgb, var(--text-secondary, #6b7280) 22%, transparent);
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 8%, transparent);
}

.upload-media-source-pill--camera {
    color: var(--status-info, #3b82f6);
    border-color: color-mix(in srgb, var(--status-info, #3b82f6) 24%, transparent);
    background: color-mix(in srgb, var(--status-info, #3b82f6) 8%, transparent);
}

.upload-media-queue-status--slot {
    visibility: hidden;
    pointer-events: none;
}

.upload-media-queue-status--pending {
    color: var(--text-secondary, #6b7280);
    border-color: color-mix(in srgb, var(--text-secondary, #6b7280) 22%, transparent);
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 10%, transparent);
}

.upload-media-queue-status--uploaded,
.upload-media-queue-status--library,
.upload-media-queue-status--practice,
.upload-media-queue-status--notes,
.upload-media-queue-status--link {
    color: var(--status-success, #3ecf8e);
    border-color: color-mix(in srgb, var(--status-success, #3ecf8e) 28%, transparent);
    background: color-mix(in srgb, var(--status-success, #3ecf8e) 10%, transparent);
}

.upload-media-queue-status--transcribing {
    color: var(--status-info, #3b82f6);
    border-color: color-mix(in srgb, var(--status-info, #3b82f6) 28%, transparent);
    background: color-mix(in srgb, var(--status-info, #3b82f6) 10%, transparent);
}

.upload-media-queue-status--no-speech {
    color: var(--text-tertiary, #7a8494);
    border-color: color-mix(in srgb, var(--text-tertiary, #7a8494) 24%, transparent);
    background: color-mix(in srgb, var(--text-tertiary, #7a8494) 8%, transparent);
}

.upload-media-queue-status--failed {
    color: var(--status-danger, #ef4444);
    border-color: color-mix(in srgb, var(--status-danger, #ef4444) 28%, transparent);
    background: color-mix(in srgb, var(--status-danger, #ef4444) 10%, transparent);
}

.upload-media-queue-status--canceled {
    color: var(--text-secondary, #6b7280);
    border-color: color-mix(in srgb, var(--text-secondary, #6b7280) 28%, transparent);
    background: color-mix(in srgb, var(--text-secondary, #6b7280) 8%, transparent);
}

.upload-media-batch-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    padding: 6px 10px;
    border: 1px solid var(--border-subtle, var(--stroke, #d7dee8));
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-card-strong, var(--bg-elevated, #1e293b)) 92%, var(--surface-page, transparent));
    max-width: 100%;
    overflow: hidden;
}

.upload-media-batch-progress__tracks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upload-media-batch-progress__track--complete .upload-media-batch-progress__label {
    color: var(--text-muted, var(--text-secondary, #6b7280));
}

.upload-media-batch-progress__track--transcribe .upload-media-batch-progress__bar::-webkit-progress-value {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent-success, #3ecf8e) 72%, var(--accent-success-strong, #4da86a)),
        var(--accent-success-strong, var(--brand-secondary, #059669))
    );
}

.upload-media-batch-progress__track--transcribe .upload-media-batch-progress__bar::-moz-progress-bar {
    background: var(--accent-success-strong, var(--brand-secondary, #059669));
}

.upload-media-batch-progress__label {
    flex: 0 1 34%;
    min-width: 0;
    color: var(--text-primary, #111827);
    font-weight: var(--ll-type-label-weight);
    font-size: var(--ll-type-caption-size);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-media-batch-progress__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.upload-media-batch-progress__percent {
    flex: 0 0 auto;
    min-width: 2.4em;
    color: var(--text-primary, #374151);
    font-size: var(--ll-type-caption-size);
    font-weight: var(--ll-type-label-weight);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: right;
}

.upload-media-batch-progress__cancel {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--text-link, var(--accent-info-strong, #85c5d6));
    font: inherit;
    font-size: var(--ll-type-caption-size);
    font-weight: var(--ll-type-label-weight);
    line-height: 1.25;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    flex: 0 0 auto;
    white-space: nowrap;
}

.upload-media-batch-progress__cancel:hover,
.upload-media-batch-progress__cancel:focus-visible {
    color: color-mix(in srgb, var(--text-link, var(--accent-info-strong, #85c5d6)) 82%, white);
}

.upload-media-batch-progress__bar {
    display: block;
    flex: 1 1 40%;
    min-width: 56px;
    width: auto;
    height: 8px;
}

.upload-media-batch-progress__bar::-webkit-progress-bar {
    background: color-mix(in srgb, var(--text-primary, #111827) 16%, transparent);
    border-radius: 999px;
}

.upload-media-batch-progress__bar::-webkit-progress-value {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent-info, #6eb4c8) 78%, var(--accent-info-strong, #85c5d6)),
        var(--accent-info-strong, #85c5d6)
    );
    border-radius: 999px;
    transition: width 240ms ease;
}

.upload-media-batch-progress__bar::-moz-progress-bar {
    background: var(--accent-info-strong, #85c5d6);
    border-radius: 999px;
}

.playbook-library-upload-progress {
    margin: 0 0 12px;
}

.playbook-library-upload-progress .upload-media-batch-progress {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .upload-media-batch-progress {
        gap: 5px;
        padding: 4px 8px;
        border-radius: 8px;
    }

    .upload-media-batch-progress__label,
    .upload-media-batch-progress__percent,
    .upload-media-batch-progress__cancel {
        font-size: var(--ll-type-micro-size);
        line-height: 1.15;
    }

    .upload-media-batch-progress__label {
        flex: 0 1 auto;
        max-width: 5rem;
    }

    .upload-media-batch-progress__percent {
        min-width: 1.9em;
    }

    .upload-media-batch-progress__bar {
        flex: 1 1 32%;
        min-width: 36px;
        height: 7px;
    }

    .upload-media-batch-progress__cancel {
        padding-inline: 0;
        text-underline-offset: 1px;
    }
}

@media (max-width: 380px) {
    .upload-media-batch-progress {
        gap: 4px;
        padding-inline: 6px;
    }

    .upload-media-batch-progress__label {
        max-width: 4.25rem;
    }

    .upload-media-batch-progress__percent {
        min-width: 1.75em;
    }

    .upload-media-batch-progress__bar {
        min-width: 28px;
    }
}

/* ---- public/style/features/shell-titlebar.css ---- */
/* Feature: shell-titlebar.css */
.titlebar-page-heading,
header.titlebar .titlebar-page-ai {
    display: none;
}

header.titlebar .titlebar-page-ai {
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--brand, #50a68a);
    cursor: pointer;
    pointer-events: auto;
}

header.titlebar .titlebar-page-ai .fa-question {
    font-size: 0.95rem;
}

header.titlebar .titlebar-page-ai:hover {
    background: color-mix(in srgb, var(--brand, #50a68a) 14%, transparent);
}

header.titlebar .titlebar-page-ai:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

header.titlebar.titlebar--today-panel:not(.titlebar--auth-gate) .titlebar-page-heading--today,
body[data-lc-visible-surface="assistant"] header.titlebar:not(.titlebar--auth-gate):not(.titlebar--lesson-workflow) .titlebar-page-heading--today,
header.titlebar.titlebar--hub-panel-title:not(.titlebar--auth-gate):has(#titlebar-hub-panel-title:not([hidden])) .titlebar-page-heading--hub {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    gap: 2px;
    z-index: 2;
    width: max-content;
    max-width: calc(100% - 8rem);
    min-width: 0;
}

header.titlebar.titlebar--today-panel .titlebar-center .titlebar-page-heading--today .titlebar-app-title,
body[data-lc-visible-surface="assistant"] header.titlebar .titlebar-center .titlebar-page-heading--today .titlebar-app-title,
header.titlebar.titlebar--hub-panel-title .titlebar-center .titlebar-page-heading--hub #titlebar-hub-panel-title:not([hidden]) {
    display: block;
    position: static;
    transform: none;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

header.titlebar .titlebar-page-heading .titlebar-page-ai,
header.titlebar .titlebar-student-portal-brand .titlebar-page-ai,
header.titlebar .titlebar-free-student-home-brand .titlebar-page-ai,
header.titlebar.titlebar--lesson-workflow:not(.titlebar--session-context) .titlebar-page-ai--lesson,
header.titlebar.titlebar--session-context:not(.titlebar--transient-stack) .titlebar-page-ai--session {
    display: inline-flex;
}

header.titlebar.titlebar--session-context .titlebar-page-ai--session {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    z-index: 2;
}

header.titlebar.titlebar--session-context .titlebar-session-context:not([hidden]) {
    box-sizing: border-box;
    padding-right: 36px;
}

header.titlebar .titlebar-student-portal-brand:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 4px;
}

header.titlebar.titlebar--auth-gate .titlebar-page-ai,
header.titlebar.titlebar--booking-gate .titlebar-page-ai {
    display: none;
}

/* Title search stays hidden until initializeApp clears `titlebar--search-pending` (see app.js). */
header.titlebar.titlebar--search-pending .app-shell-search {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

header.titlebar.titlebar--title-search-filter-active .app-shell-search {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--stroke));
}

header.titlebar.titlebar--search-pending .app-shell-search-filter-hint {
    display: none !important;
}

#playbook-workspace .titlebar-search-filter-hidden,
#today-lessons-list .today-recent-lesson-card.titlebar-search-filter-hidden {
    display: none !important;
}

/* Lesson back: hidden on marketing / hub compact (use Today pill); shown only for lesson workflow (`.titlebar--lesson-workflow`). */
header.titlebar:not(.titlebar--lesson) .titlebar-lesson-back {
    display: none !important;
}

/* Compact hub titles: stable line box so switching panels (esp. after calendar layout) does not shift vertically. */
header.titlebar.titlebar--lesson .titlebar-lesson-title-primary {
    line-height: 1.25;
    min-height: 1.25em;
}

header.titlebar.titlebar--lesson.titlebar--recording .titlebar-lesson-title-primary::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background: #dc2626;
    vertical-align: middle;
    animation: titlebar-recording-dot 1.15s ease-in-out infinite;
}

/* Logged-in app shell: compact header. Lesson workflow hides center brand for capture/edit titles. */
header.titlebar.titlebar--lesson {
    /* Hub Today / Students / Practice / Playbook / Messages share this bar; keep one stable row height. */
    --titlebar-compact-row: 44px;
    padding: 4px 8px;
    min-height: calc(var(--titlebar-compact-row) + 8px);
    margin-bottom: 0;
    gap: 6px;
    align-items: center;
    box-sizing: border-box;
}

header.titlebar.titlebar--lesson .titlebar-brand-wrap {
    gap: 6px;
    min-height: var(--titlebar-compact-row);
}

header.titlebar.titlebar--lesson .titlebar-leading,
header.titlebar.titlebar--lesson .titlebar-trailing {
    gap: 6px;
}

/* Hub chrome is hamburger + Ask + avatar; keep the brand mark off the titlebar. */
header.titlebar.titlebar--lesson:not(.titlebar--lesson-workflow) .titlebar-default-brand {
    display: none !important;
}

/* Lesson workspace still uses the compact LessonCaddie lockup in the leading slot. */
header.titlebar.titlebar--lesson.titlebar--lesson-workflow .titlebar-default-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

header.titlebar.titlebar--lesson .titlebar-default-brand .titlebar-mark {
    display: block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
}

header.titlebar.titlebar--lesson .titlebar-default-brand .titlebar-brand {
    font-size: var(--ll-type-title-size, 1.05rem);
    font-weight: var(--ll-type-heading-weight, 700);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-shadow: none;
}

header.titlebar.titlebar--lesson.titlebar--lesson-workflow .titlebar-lesson-util {
    display: flex !important;
    min-width: 0;
    width: 100%;
    align-items: center;
    justify-content: center;
}

header.titlebar.titlebar--lesson .titlebar-actions {
    margin-left: 0;
    gap: 6px;
}

/* Hub compact header: back control removed (Today pill). Lesson capture flow keeps back. */
header.titlebar.titlebar--lesson:not(.titlebar--lesson-workflow) .titlebar-lesson-back {
    display: none !important;
}

/* Hub center brand: fixed line box so panel layout reflow does not nudge the titlebar vertically. */
header.titlebar.titlebar--lesson:not(.titlebar--lesson-workflow) .titlebar-brand {
    display: flex;
    align-items: center;
    line-height: 1;
    min-height: var(--titlebar-compact-row);
    box-sizing: border-box;
    font-size: var(--ll-type-title-size);
}

header.titlebar.titlebar--lesson.titlebar--lesson-workflow .titlebar-lesson-back {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    padding: 0;
    border-radius: 50%;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-line);
    white-space: nowrap;
    align-self: center;
}

header.titlebar.titlebar--lesson .titlebar-avatar-trigger__mark {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}

header.titlebar.titlebar--lesson .titlebar-avatar-trigger {
    box-sizing: border-box;
    min-height: var(--titlebar-compact-row);
    min-width: 40px;
    padding: 0 6px;
    border-radius: 10px;
    align-self: center;
}

header.titlebar.titlebar--lesson .titlebar-action-slot--placeholder {
    display: inline-flex;
}

/* Hub: empty reserved slot reads as dead space before the avatar. */
header.titlebar.titlebar--lesson:not(.titlebar--lesson-workflow) .titlebar-action-slot--placeholder {
    display: none !important;
}

/* Standard app header action slot. */
header.titlebar.titlebar--lesson .titlebar-action-slot--tools {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    pointer-events: auto;
}

header.titlebar.titlebar--lesson .titlebar-action-slot--tools:empty {
    display: none !important;
}

header.titlebar .titlebar-today-calendar-nav {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--brand-deep, var(--text-primary));
    box-shadow: none;
    cursor: pointer;
    line-height: 0;
    transition: background 140ms ease, color 140ms ease;
}

header.titlebar .titlebar-surface-toggle {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--brand-deep, var(--text-primary));
    box-shadow: none;
    cursor: pointer;
    line-height: 0;
    transition: background 140ms ease, color 140ms ease;
}

header.titlebar .titlebar-surface-toggle[hidden] {
    display: none !important;
}

header.titlebar .titlebar-surface-toggle:hover {
    background: color-mix(in srgb, var(--brand) 9%, transparent);
}

header.titlebar .titlebar-surface-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

header.titlebar .titlebar-surface-toggle__icon {
    display: none;
    place-items: center;
    font-size: 1.15rem;
}

header.titlebar .titlebar-surface-toggle__app-icon {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

body:not([data-lc-visible-surface="assistant"]) header.titlebar .titlebar-surface-toggle__icon--chat,
body[data-lc-visible-surface="assistant"] header.titlebar .titlebar-surface-toggle__icon--app {
    display: inline-grid;
}

.mobile-surface-edge:not([hidden]) {
    position: fixed;
    z-index: calc(var(--lessonlink-z-modal-global) + 1);
    top: 25%;
    bottom: 25%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
}

body[data-lc-visible-surface="assistant"] .mobile-surface-edge:not([hidden]) {
    right: auto;
    left: 0;
    justify-content: flex-start;
}

.mobile-surface-edge__indicator {
    display: grid;
    place-items: center;
    width: 16px;
    height: 54px;
    opacity: 0.4;
    border-radius: 8px 0 0 8px;
    background: var(--brand, #50a68a);
    box-shadow: 0 1px 8px rgb(0 0 0 / 25%);
}

.mobile-surface-edge__indicator::after {
    content: '';
    width: 6px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(225deg);
}

body[data-lc-visible-surface="assistant"] .mobile-surface-edge__indicator {
    border-radius: 0 8px 8px 0;
}

body[data-lc-visible-surface="assistant"] .mobile-surface-edge__indicator::after {
    transform: rotate(45deg);
}

.mobile-surface-edge:focus-visible .mobile-surface-edge__indicator {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

html[data-persona="instructor"] header.titlebar #titlebar-surface-toggle,
body[data-lc-visible-surface="assistant"] header.titlebar #titlebar-surface-toggle,
header.titlebar #titlebar-calendar-nav {
    display: none !important;
}

body[data-lc-visible-surface="assistant"] header.titlebar:not(.titlebar--lesson-workflow) .titlebar-page-heading--hub {
    display: none !important;
}

/* Hub destinations opened while Assistant is showing (Students, Lessons, …).
   Stack/account/settings already use --lessonlink-z-modal-global on #app. */
.view-root.view-root--over-assistant {
    position: relative;
    z-index: var(--lessonlink-z-modal-global);
    background: var(--app-page-fill, var(--surface-page, #0b1220));
}

/* Keep every subpage and its stacked children below the chat frame. */
body[data-lc-surface="assistant"] #app.view-root:not(.view-root--over-assistant) {
    position: relative;
    z-index: 0;
}

.app-shell-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.instructor-assistant-surface {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: var(--app-page-fill, #0b1220);
    visibility: hidden;
    pointer-events: none;
}

.instructor-assistant-surface.is-active {
    visibility: visible;
    pointer-events: auto;
}

.instructor-assistant-app-nav {
    display: none;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 2px;
    min-height: 36px;
    padding: 2px 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    background: color-mix(in srgb, var(--app-page-fill, #0b1220) 88%, var(--brand, #50a68a));
}

html[data-persona="instructor"] .app-shell:has(> header.titlebar.titlebar--lesson:not(.titlebar--auth-gate):not(.titlebar--booking-gate)) .instructor-assistant-app-nav {
    display: flex;
}

.instructor-assistant-app-nav__item {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 32px;
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.instructor-assistant-app-nav__item:hover {
    background: color-mix(in srgb, var(--brand) 12%, transparent);
}

.instructor-assistant-app-nav__item.is-active,
.instructor-assistant-app-nav__item[aria-current="page"] {
    background: color-mix(in srgb, var(--brand) 18%, transparent);
}

.instructor-assistant-app-nav__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.instructor-assistant-app-nav__item--on-chat,
.instructor-assistant-app-nav__item--on-app {
    display: none;
}

body[data-lc-visible-surface="assistant"] .instructor-assistant-app-nav__item--on-chat,
body:not([data-lc-visible-surface="assistant"]) .instructor-assistant-app-nav__item--on-app {
    display: inline-flex;
}

.instructor-assistant-app-nav__icon {
    display: inline-grid;
    place-items: center;
    color: var(--brand-primary, var(--brand));
    font-size: 0.85rem;
}

.instructor-assistant-app-nav__app-icon {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.instructor-assistant-app-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.instructor-assistant-surface__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#lessoncaddie-page-help-backdrop {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(8, 12, 16, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#lessoncaddie-page-help-backdrop[hidden] {
    display: none !important;
}

#lessoncaddie-page-help {
    position: absolute;
    z-index: 4;
    top: 12px;
    left: 50%;
    width: min(680px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    overflow: auto;
    box-sizing: border-box;
    transform: translateX(-50%);
    padding: 12px 14px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: #101820;
    color: #e8e4dc;
    font: 15px/1.45 "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
}

#lessoncaddie-page-help[hidden] {
    display: none !important;
}

.lessoncaddie-page-help__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

#lessoncaddie-page-help h2 {
    margin: 0;
    color: #f2ede4;
    font-size: 1.05rem;
}

.lessoncaddie-page-help__dismiss {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8be5b4;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: underline;
}

#lessoncaddie-page-help ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#lessoncaddie-page-help li {
    display: grid;
    gap: 1px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#lessoncaddie-page-help li p {
    margin: 0;
}

#lessoncaddie-page-help li span {
    color: #9aa8b6;
}

#lessoncaddie-page-help a {
    margin-left: 0.35em;
    color: #8be5b4;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
}

.instructor-assistant-surface__frame {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--app-page-fill, #0c1218);
}

@media (max-width: 767.98px) {
    .instructor-assistant-app-nav {
        min-height: 32px;
        padding: 1px 2px;
        gap: 0;
    }

    .instructor-assistant-app-nav__item {
        gap: 4px;
        min-height: 30px;
        padding: 4px 2px;
        font-size: 0.68rem;
    }
}

@media (max-width: 459.98px) {
    .instructor-assistant-app-nav__item {
        gap: 0;
    }

    .instructor-assistant-app-nav__icon {
        display: none;
    }
}

.instructor-assistant-surface__loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--app-page-fill, #0b1220) 92%, transparent);
}

.instructor-assistant-surface__loading[hidden] {
    display: none !important;
}

header.titlebar .titlebar-today-calendar-nav:hover {
    background: color-mix(in srgb, var(--brand) 9%, transparent);
}

header.titlebar .titlebar-today-calendar-nav:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

header.titlebar .titlebar-today-calendar-nav>i {
    font-size: 1.1rem;
    line-height: 1;
}

/* Keep the calendar action beside the avatar on authenticated screens. */
header.titlebar.titlebar--auth-gate #titlebar-calendar-nav {
    display: none !important;
}

/* Ask: Today + date + weather sit on one centered title line. */
header.titlebar:not(.titlebar--today-weather) .titlebar-today-line {
    display: none !important;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-today-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

header.titlebar #titlebar-today-date[hidden],
header.titlebar:not(.titlebar--today-weather) #titlebar-today-date {
    display: none !important;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-date:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    margin: 0;
    padding: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary, #f2ede4);
    font: inherit;
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-heading-weight, 700);
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: color 140ms ease, background 140ms ease;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-date:not([hidden]):hover,
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-date:not([hidden]):focus-visible {
    color: var(--text-primary, #f2ede4);
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-date:not([hidden]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Ask: next calendar event sits under Today · date. */
header.titlebar #titlebar-today-next-event[hidden],
header.titlebar:not(.titlebar--today-weather) #titlebar-today-next-event {
    display: none !important;
}

/* Brand title anchors to header.titlebar (not the narrow center column). */
header.titlebar.titlebar--today-weather.titlebar--today-brand-title:not(.titlebar--lesson-workflow) .titlebar-brand-wrap,
header.titlebar.titlebar--today-weather.titlebar--today-brand-title:not(.titlebar--lesson-workflow) .titlebar-center {
    position: static;
    overflow: visible;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event:not([hidden]).titlebar-today-next-event--brand {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    padding: 0 4px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 6.75rem);
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    color: var(--text-primary, #f2ede4);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-heading-weight, 700);
    line-height: var(--ll-type-heading-line, 1.25);
    letter-spacing: normal;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-brand-wrap {
    position: static;
    /* Row 1: menu / Today+weather / profile — row 2: next event only (center). */
    align-items: center;
    grid-template-rows: auto auto;
    row-gap: 1px;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event:not([hidden]):not(.titlebar-today-next-event--brand) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    grid-row: 2;
    grid-column: 2;
    margin: 0;
    padding: 0 6px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-align: center;
    color: var(--text-secondary, #b6c0ca);
    font-size: var(--ll-type-meta-size, 0.78rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.2;
    letter-spacing: 0.01em;
    user-select: none;
    -webkit-user-select: none;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event:not([hidden]):not(.titlebar-today-next-event--stacked):not(.titlebar-today-next-event--brand) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-today-next-event__when,
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-today-next-event__name {
    display: inline;
    min-width: 0;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-today-next-event__name {
    color: var(--text-secondary, #b6c0ca);
    font-weight: var(--ll-type-body-weight, 500);
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event.titlebar-today-next-event--link {
    cursor: pointer;
    color: color-mix(in srgb, var(--primary-strong, #3dd68c) 75%, var(--text-primary, #f2ede4));
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event.titlebar-today-next-event--link .titlebar-today-next-event__when,
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event.titlebar-today-next-event--link .titlebar-today-next-event__name {
    color: inherit;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event.titlebar-today-next-event--link:hover,
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-today-next-event.titlebar-today-next-event--link:focus-visible {
    color: color-mix(in srgb, var(--primary-strong, #3dd68c) 95%, #fff);
    outline: none;
}

/* Keep menu + Ask icon + weather to content width so they cannot paint over the center title. */
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-leading {
    gap: 8px;
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    z-index: 1;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
}

header.titlebar.titlebar--lesson .app-shell-menu-button {
    width: var(--titlebar-compact-row);
    height: var(--titlebar-compact-row);
    min-width: var(--titlebar-compact-row);
    min-height: var(--titlebar-compact-row);
    border-radius: 12px;
    box-shadow: none;
}

/*
 * Hub panel labels (Today / Sessions / …): true horizontal center of header.titlebar.
 * header.titlebar is already position:relative — do not make .titlebar-brand-wrap a
 * containing block, or the overlay can resolve against the middle grid column instead.
 */
header.titlebar.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-brand-wrap {
    position: static;
}

header.titlebar.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-hub-panel-title:not([hidden]) {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 10rem);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
    font-size: clamp(0.95rem, 2.8vw, 1.08rem);
    font-weight: var(--ll-type-heading-weight, 700);
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--text-primary, var(--ink));
    user-select: none;
    -webkit-user-select: none;
}

header.titlebar.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-center {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: var(--titlebar-compact-row, 44px);
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-hub-panel-title {
    display: none !important;
}

/* Ask/Today: cloud + temp stay on the Today line (right). */
header.titlebar #titlebar-weather-banner[hidden],
header.titlebar:not(.titlebar--today-weather) #titlebar-weather-banner {
    display: none !important;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-weather-banner:not([hidden]) {
    display: inline-flex;
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: auto;
    margin: 0;
    box-sizing: border-box;
    width: max-content;
    max-width: none;
    min-width: 0;
    overflow: visible;
    pointer-events: auto;
    flex: 0 0 auto;
}

/* Compact titlebar chip: icon + temp only. */
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-weather-banner .today-weather-banner__chip,
header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-weather-banner .today-weather-banner__fallback {
    min-height: 0;
    padding: 0;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) #titlebar-weather-banner .today-weather-banner__empty {
    display: none !important;
    min-width: 0 !important;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-center {
    display: contents;
}

.titlebar-app-title {
    display: none;
}

header.titlebar.titlebar--today-panel:not(.titlebar--lesson-workflow) .titlebar-app-title,
body[data-lc-visible-surface="assistant"] header.titlebar:not(.titlebar--lesson-workflow) .titlebar-app-title {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 12rem);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    color: var(--text-primary, var(--ink));
    font-size: clamp(0.78rem, 2.4vw, 1.1rem);
    font-weight: var(--ll-type-heading-weight, 700);
    line-height: 1.25;
}

/* Hub z-index:2 on leading covers the next-event line — keep Ask chrome flat. */
header.titlebar.titlebar--today-weather.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-leading {
    z-index: 1;
}

header.titlebar.titlebar--today-weather.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-trailing {
    z-index: 2;
    grid-row: 1;
    grid-column: 3;
    align-self: center;
}

header.titlebar.titlebar--today-weather:not(.titlebar--lesson-workflow) .titlebar-trailing {
    grid-row: 1;
    grid-column: 3;
    align-self: center;
}

/* Titlebar weather: never ellipsize the city — size to content (Gold Canyon, etc.). */
header.titlebar #titlebar-weather-banner .today-weather-banner__chip,
header.titlebar #titlebar-weather-banner .today-weather-banner__fallback {
    max-width: none;
    width: max-content;
    flex-shrink: 0;
}

header.titlebar #titlebar-weather-banner .today-weather-banner__summary,
header.titlebar #titlebar-weather-banner .today-weather-banner__primary {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: max-content;
    max-width: none;
    flex: 0 0 auto;
    overflow: visible;
}

header.titlebar #titlebar-weather-banner .today-weather-banner__city,
header.titlebar #titlebar-weather-banner .today-weather-banner__location-text {
    display: inline;
    min-width: 0;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
}

header.titlebar.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) :is(.titlebar-leading, .titlebar-trailing) {
    position: relative;
    z-index: 2;
}

@media (max-width: 720px) {
    header.titlebar.titlebar--lesson.titlebar--hub-panel-title .titlebar-default-brand .titlebar-brand {
        display: none;
    }

    header.titlebar.titlebar--lesson .titlebar-brand-wrap {
        gap: 8px;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    header.titlebar.titlebar--lesson .titlebar-leading {
        gap: 6px;
    }

    header.titlebar.titlebar--lesson .app-shell-search {
        height: 40px;
        padding-inline: 12px;
    }

    header.titlebar.titlebar--lesson .app-shell-search__clear,
    header.titlebar.titlebar--lesson .app-shell-search__send,
    header.titlebar.titlebar--lesson .app-shell-search__mic {
        width: 28px;
        height: 28px;
        font-size: var(--ll-type-meta-size);
        line-height: var(--ll-type-meta-line);
    }
}

/* Small phones (375–430 px): tighten the titlebar so all elements fit on one row. */
@media (max-width: 430px) {

    /* Compact lesson-mode bar: less side padding on narrow viewports. */
    header.titlebar.titlebar--lesson {
        padding: 4px 6px;
        gap: 4px;
    }

    /* Reduce column gaps so leading, center, and trailing share space efficiently. */
    header.titlebar.titlebar--lesson .titlebar-brand-wrap {
        gap: 6px;
    }

    header.titlebar.titlebar--lesson .titlebar-leading,
    header.titlebar.titlebar--lesson .titlebar-trailing {
        gap: 4px;
    }

    /* Keep the date visible on narrow phones — it toggles weather in the titlebar. */
    /* Allow the hub-panel title to use slightly more of the available width so it
     * stays fully visible even when leading + trailing are both present. */
    header.titlebar.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-hub-panel-title:not([hidden]) {
        max-width: calc(100% - 8rem);
    }

    /* Keep the mark; drop the wordmark so it does not collide with the centered page title. */
    header.titlebar.titlebar--lesson.titlebar--hub-panel-title .titlebar-default-brand .titlebar-brand {
        display: none;
    }

    /* Session-workspace: keep the context title to a 2-line max so the bar height
     * stays predictable on phones and does not push content off screen. */
    header.titlebar.titlebar--session-workspace .titlebar-session-context__line .lesson-workspace-context-bar__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
    }
}

.titlebar-avatar-button.titlebar-avatar-trigger {
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    position: relative;
    line-height: 0;
    isolation: isolate;
    overflow: visible;
    transition:
        background 160ms ease,
        transform 120ms ease;
}

.titlebar-avatar-button.titlebar-avatar-trigger:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.titlebar-mark.titlebar-mark--wide {
    display: none;
}

.titlebar-mark.titlebar-mark--extra {
    display: none;
}

/* Hub Settings / Account / booking / contact editor: #app fills the main column below the titlebar. */
.view-root.view-root--settings-fullscreen,
.view-root.view-root--account-fullscreen,
.view-root.view-root--stack-screen,
.view-root.view-root--lesson-booking-fullscreen {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    z-index: var(--lessonlink-z-modal-global);
    overflow: hidden;
    overscroll-behavior: none;
    box-sizing: border-box;
    -webkit-overflow-scrolling: auto;
}

/* Settings / Account routes: fill fixed #app; scroll content under topbar (matches hub fullscreen). */
.view-root.view-root--settings-fullscreen>.today-shell.app-route-fullscreen-root,
.view-root.view-root--account-fullscreen>.today-shell.app-route-fullscreen-root,
.view-root.view-root--stack-screen>.today-shell.app-route-fullscreen-root,
.view-root.view-root--stack-screen>.today-shell.ll-stack-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-page, var(--surface-card-strong, #0f172a));
}

/* Settings / Account stack shells: scroll in body-inner (stack-screen routes delegate scroll inward). */
.view-root.view-root--settings-fullscreen .app-route-fullscreen-inner,
.view-root.view-root--account-fullscreen .app-route-fullscreen-inner,
.view-root.view-root--settings-fullscreen .ll-stack-shell__inner,
.view-root.view-root--account-fullscreen .ll-stack-shell__inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--settings-fullscreen .ll-stack-shell__inner>.ll-surface--screen-stack,
.view-root.view-root--account-fullscreen .ll-stack-shell__inner>.ll-surface--screen-stack {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--settings-fullscreen .app-route-fullscreen-body,
.view-root.view-root--account-fullscreen .app-route-fullscreen-body,
.view-root.view-root--settings-fullscreen .ll-stack-shell__body,
.view-root.view-root--account-fullscreen .ll-stack-shell__body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--settings-fullscreen .app-route-fullscreen-body-inner,
.view-root.view-root--account-fullscreen .app-route-fullscreen-body-inner,
.view-root.view-root--settings-fullscreen .ll-stack-shell__body-inner,
.view-root.view-root--account-fullscreen .ll-stack-shell__body-inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.view-root.view-root--settings-fullscreen .ll-stack-shell__content,
.view-root.view-root--account-fullscreen .ll-stack-shell__content {
    flex: 0 1 auto;
    min-height: auto;
    overflow: visible;
}

.view-root.view-root--stack-screen .ll-stack-shell__inner,
.view-root.view-root--stack-screen .app-route-fullscreen-inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .ll-stack-shell__inner>.ll-surface--screen-stack {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .ll-stack-shell__body,
.view-root.view-root--stack-screen .app-route-fullscreen-body {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .ll-stack-shell__body-inner,
.view-root.view-root--stack-screen .app-route-fullscreen-body-inner {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Match Library hub density — less air under the app titlebar. */
    padding-top: var(--ll-space-2);
    gap: var(--ll-space-2);
}

/* Empty stack topbars (title moved to app titlebar) must not reserve a chrome row. */
.view-root.view-root--stack-screen .ll-stack-shell__topbar--no-back:empty,
.view-root.view-root--stack-screen .ll-stack-shell__topbar.ll-stack-shell__topbar--no-back:not(:has(*)),
.view-root.view-root--settings-fullscreen .ll-stack-shell__topbar--no-back:empty,
.view-root.view-root--settings-fullscreen .ll-stack-shell__topbar.ll-stack-shell__topbar--no-back:not(:has(*)),
.view-root.view-root--account-fullscreen .ll-stack-shell__topbar--no-back:empty,
.view-root.view-root--account-fullscreen .ll-stack-shell__topbar.ll-stack-shell__topbar--no-back:not(:has(*)),
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__topbar--no-back:empty,
.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__topbar.ll-stack-shell__topbar--no-back:not(:has(*)) {
    display: none !important;
}

/* Settings / Account: in-stack header is unused — title + back live in the app titlebar. */
.view-root.view-root--settings-fullscreen .ll-stack-shell[data-ll-stack-id="settings"] .ll-stack-shell__topbar,
.view-root.view-root--settings-fullscreen .ll-stack-shell[data-ll-stack-id="settings"] header.app-route-fullscreen-topbar,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="account"] .ll-stack-shell__topbar,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="account"] header.app-route-fullscreen-topbar {
    display: none !important;
}

.view-root.view-root--stack-screen .ll-stack-shell__content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-lesson-transient-in-stack,
.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-lesson-transient-in-stack > .ll-surface__body,
.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-surface > .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-lesson-transient-in-stack > .ll-surface__footer,
.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-surface > .ll-surface__footer,
.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-lesson-transient-in-stack > .action-buttons,
.view-root.view-root--stack-screen .ll-stack-shell__content > .ll-surface > .action-buttons {
    flex-shrink: 0;
    margin-top: auto;
}

/* Route stack chrome: shell topbar (+ optional lede) own title/intro; mark in-panel duplicates explicitly. */
.view-root.view-root--stack-screen .ll-stack-route-duplicate-title,
.view-root.view-root--stack-screen [data-ll-stack-duplicate-title="true"],
.lessonlink-stack-host .ll-stack-route-duplicate-title,
.lessonlink-stack-host [data-ll-stack-duplicate-title="true"] {
    display: none !important;
}

.view-root.view-root--stack-screen .ll-stack-route-duplicate-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.view-root.view-root--stack-screen .ll-stack-route-duplicate-title-row:not(:has(button:not([hidden]), a:not([hidden]))) {
    display: none;
}

.view-root.view-root--stack-screen .ll-stack-shell__content>.lesson-editor-route,
.view-root.view-root--stack-screen .ll-stack-shell__content .lesson-editor-route {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .lesson-editor-route>.lesson-workspace-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
    padding-bottom: 0;
}

.view-root.view-root--stack-screen .lesson-editor-route .lesson-workspace-panel>.lesson-workspace-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Cancel .lesson-workspace-panel > .today-shell negative bleed — it clips under overflow-x here. */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.view-root.view-root--stack-screen .lesson-workspace-editor-stack[data-lesson-panel-mode="booking"] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .lesson-workspace-editor-sibling--details.summary-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    margin: 0;
}

.view-root.view-root--stack-screen .lesson-workspace-editor-sibling--details .summary-card.lesson-section-card--details {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.view-root.view-root--stack-screen #lesson-details-inline-root {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Booking on /edit-lesson: stack shell topbar already has back + title. */
.view-root.view-root--stack-screen .lesson-details-booking-header--stack-route {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.view-root.view-root--stack-screen .lesson-details-booking-header--stack-route .lesson-booking-modal-close {
    display: none !important;
}

.view-root.view-root--stack-screen .lesson-details-panel-copy--stack-route {
    padding-top: 0;
}

.view-root.view-root--stack-screen .lesson-details-heading-row--booking {
    justify-content: flex-end;
    gap: 12px;
}

.view-root.view-root--stack-screen .lesson-workspace-delete-slot {
    flex-shrink: 0;
    justify-content: center;
    margin-top: 0;
    padding: 10px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    border-top: 1px solid var(--stroke);
}

.view-root.view-root--stack-screen .lesson-capture-section--stack-route,
.view-root.view-root--stack-screen .summary-shell--stack-route {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.view-root.view-root--stack-screen .lesson-capture-section--stack-route .upload-media-card,
.view-root.view-root--stack-screen .summary-shell--stack-route .summary-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.view-root.view-root--stack-screen .contact-edit-route-root {
    flex: 0 0 auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.view-root.view-root--stack-screen .contact-edit-route-root .contact-edit-panel {
    flex: 0 0 auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    /* Beat `.email-panel` modal max-height / grid so the stack route can scroll. */
    max-height: none;
    width: 100%;
    overflow: visible;
    border: none;
    box-shadow: none;
    background: transparent;
}

.view-root.view-root--stack-screen .contact-edit-route-root .contact-history-form {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    padding-bottom: calc(var(--ask-toast-band, 3rem) + env(safe-area-inset-bottom, 0px));
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contact-edit"] .ll-stack-shell__body-inner,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contact-edit"] .app-route-fullscreen-body-inner {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.view-root.view-root--stack-screen .contact-edit-stack-meta {
    margin-bottom: 8px;
}

.view-root.view-root--stack-screen .contact-edit-stack-meta .contact-claim-status-row[hidden] {
    display: none !important;
}

/* Contact import: full-width content; list scroll is on #contact-import-review-table-wrap. */
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contacts-import"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.view-root.view-root--stack-screen .contact-import-route-root {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    min-width: 0;
    overflow: visible;
}

/* Edit Lesson (booking): lesson form fills #app below the titlebar. */
.view-root.view-root--lesson-booking-fullscreen {
    background: var(--surface-page, var(--surface-card-strong, #0f172a));
}

.view-root.view-root--lesson-booking-fullscreen>.lesson-editor-route {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
}

.view-root.view-root--lesson-booking-fullscreen>.lesson-editor-route>.lesson-workspace-panel {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.view-root.view-root--lesson-booking-fullscreen>.lesson-editor-route>.lesson-workspace-panel>.lesson-workspace-shell {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.view-root.view-root--lesson-booking-fullscreen .lesson-workspace-editor-stack[data-lesson-panel-mode="booking"] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.view-root.view-root--lesson-booking-fullscreen .lesson-workspace-editor-sibling--details.summary-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    margin: 0;
}

.view-root.view-root--lesson-booking-fullscreen .lesson-workspace-editor-sibling--details .summary-card.lesson-section-card--details {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 10px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.view-root.view-root--lesson-booking-fullscreen #lesson-details-inline-root {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.view-root.view-root--lesson-booking-fullscreen .lesson-workspace-delete-slot {
    flex-shrink: 0;
    justify-content: center;
    margin-top: 0;
    padding: 10px max(12px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    border-top: 1px solid var(--stroke);
}

.app-shell:has(#app.view-root--session-workspace-fullscreen) {
    --lesson-session-inline-gutter-start: max(12px, env(safe-area-inset-left, 0px));
    --lesson-session-inline-gutter-end: max(12px, env(safe-area-inset-right, 0px));
    padding: 0;
}

/* Session workspace (/edit-lesson): app titlebar + tabs; in-stack route topbar hidden. */
/* Session workspace: LESSON / date / name in the app titlebar (may wrap). */
header.titlebar.titlebar--session-workspace.titlebar--session-context {
    align-items: center;
    height: auto;
    min-height: calc(var(--titlebar-compact-row) + 8px);
}

header.titlebar.titlebar--session-workspace.titlebar--session-context .titlebar-brand-wrap {
    align-items: center;
    min-height: var(--titlebar-compact-row);
    height: auto;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context[hidden] {
    display: none !important;
}

/* Capture / picker stacks: stack title replaces LESSON context in the app titlebar. */
header.titlebar.titlebar--session-workspace.titlebar--transient-stack .titlebar-session-context {
    display: none !important;
}

header.titlebar.titlebar--session-workspace.titlebar--transient-stack.titlebar--hub-panel-title .titlebar-hub-panel-title:not([hidden]) {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    margin: 0;
    padding: 0 6px;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 10rem);
    min-width: 0;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context:not([hidden]) {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 2px 4px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context--title:not([hidden]) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context.titlebar-session-context--interactive:not([hidden]) {
    pointer-events: auto;
    user-select: auto;
    -webkit-user-select: auto;
}

header.titlebar.titlebar--session-workspace .titlebar-session-kind-host {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__kind,
header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__kind--lesson,
header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__kind--practice,
header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__kind--thought,
header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__kind--note {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--text-muted) 92%, transparent);
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
    border-color: color-mix(in srgb, var(--text-muted) 16%, transparent);
    font-weight: 600;
    letter-spacing: 0.03em;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line .lesson-workspace-context-bar__schedule {
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__date,
header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__time {
    flex: 0 0 auto;
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    font-weight: var(--ll-type-meta-weight);
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.5rem + 0.75vw, 0.76rem));
    line-height: 1.25;
    white-space: nowrap;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__date+.today-recent-lesson-card__time::before {
    content: '·';
    margin-right: 6px;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent);
    font-weight: 500;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line .lesson-workspace-context-bar__schedule+.lesson-workspace-context-bar__title::before,
header.titlebar.titlebar--session-workspace .titlebar-session-context__line .today-recent-lesson-card__kind+.lesson-workspace-context-bar__title::before {
    content: '·';
    margin-right: 6px;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent);
    font-weight: 500;
}

header.titlebar.titlebar--session-workspace .titlebar-session-context__line .lesson-workspace-context-bar__title {
    flex: 1 1 8rem;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: var(--ll-type-label-weight, 600);
    color: var(--text-primary, var(--ink));
    font-size: clamp(0.82rem, 2.4vw, 0.98rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: center;
}

/* In-page duplicate is unused while titlebar hosts the session context. */
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-context-bar {
    display: none !important;
}

/* In-stack route header (Session Workspace): hidden — app titlebar owns chrome. */
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] header.app-route-fullscreen-topbar,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .ll-surface__header.app-route-fullscreen-topbar,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .ll-stack-shell__topbar {
    display: none !important;
}

/* Keep the titlebar free of offline-cache chrome on Capture Session (status lives in the form). */
header.titlebar.titlebar--session-workspace #titlebar-client-cache-sync {
    display: none !important;
}

/* Transient participants stack: titlebar filter (same app bar as workspace). */
html.lessonlink-participants-title-search-active .app-shell>header.titlebar {
    display: flex !important;
}

/* Live titlebar page filter: Today, Sessions, Contacts, Library, Playbook, Messages, etc. */
html.lessonlink-live-search-affordance header.titlebar .app-shell-search,
html.lessonlink-participants-search-affordance header.titlebar .app-shell-search {
    border-color: color-mix(in srgb, var(--brand) 32%, var(--stroke));
    background: color-mix(in srgb, var(--brand) 7%, var(--surface-card, var(--surface-page)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

html.lessonlink-live-search-affordance header.titlebar .app-shell-search:focus-within,
html.lessonlink-participants-search-affordance header.titlebar .app-shell-search:focus-within {
    border-color: color-mix(in srgb, var(--brand) 44%, var(--stroke));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}

html.lessonlink-live-search-affordance header.titlebar.titlebar--title-search-filter-active .app-shell-search,
html.lessonlink-participants-search-affordance header.titlebar.titlebar--title-search-filter-active .app-shell-search {
    border-color: color-mix(in srgb, var(--brand) 44%, var(--stroke));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 20%, transparent);
}

#app.view-root.view-root--session-workspace-fullscreen {
    gap: 0;
    overflow: hidden;
}

#app.view-root.view-root--session-workspace-fullscreen>.ll-stack-shell[data-ll-stack-id="edit-lesson"] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-page, var(--surface-card-strong, #0f172a));
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-inner,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .ll-surface--screen-stack,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-body,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-body-inner,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .ll-stack-shell__content,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-editor-route,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-panel,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-shell,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-body-inner {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-panel {
    gap: 0;
    padding-bottom: 0;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-shell {
    overflow: hidden;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-shell.lesson-workspace-shell--capture-menu-open,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-workspace-editor-stack {
    overflow: visible;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .app-route-fullscreen-inner,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .ll-surface--screen-stack,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .app-route-fullscreen-body,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .app-route-fullscreen-body-inner,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .ll-stack-shell__content,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .lesson-editor-route,
#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"]:has(.lesson-workspace-shell--capture-menu-open) .lesson-workspace-panel {
    overflow: visible;
}

.view-root.view-root--stack-screen .lesson-editor-route .lesson-workspace-shell.lesson-workspace-shell--capture-menu-open {
    overflow: visible;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack:has(.lesson-workspace-tabs) {
    gap: 0;
    padding-inline: var(--lesson-session-inline-gutter-start) var(--lesson-session-inline-gutter-end);
    box-sizing: border-box;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack:has(.lesson-workspace-tabs)>.lesson-workspace-context-bar {
    padding-inline: 0;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack:has(.lesson-workspace-tabs) .lesson-workspace-tab-panel__body {
    padding-inline: 0;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack:has(.lesson-workspace-tabs)> :is(.lesson-workspace-tabs, .lesson-workspace-context-bar, .lesson-workspace-header) {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab-panel:not([hidden]) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab-panel:not([hidden])>.summary-card {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab-panel:not([hidden]) .lesson-workspace-tab-panel__body {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    align-content: start;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-capture-phase-card {
    height: auto;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-phase__body--capture>.lesson-capture-section--embedded {
    align-self: stretch;
    height: auto;
    min-height: 0;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-delete-slot {
    flex: 0 0 auto;
}

.view-root.view-root--stack-screen .notices-hub-shell--stack {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.view-root.view-root--stack-screen .notices-hub-shell--stack .notices-hub-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.view-root.view-root--stack-screen .send-lesson-link-route,
.view-root.view-root--stack-screen .availability-shell--stack-route {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

header.titlebar.titlebar--auth-gate.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-hub-panel-title:not([hidden]) {
    font-size: clamp(0.78rem, 2.2vw, 0.9rem);
    font-weight: var(--ll-type-label-weight, 600);
    letter-spacing: 0.02em;
    max-width: calc(100% - 7rem);
}

header.titlebar.titlebar--auth-gate.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-trailing {
    visibility: hidden;
    pointer-events: none;
}

/* Public booking gate: brand-only titlebar — no shell menu escape or titlebar back. */
header.titlebar.titlebar--booking-gate:not(.titlebar--lesson-workflow) .titlebar-lesson-back {
    display: none !important;
}

header.titlebar.titlebar--booking-gate:not(.titlebar--lesson-workflow) .titlebar-booking-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--titlebar-compact-row, 44px);
    height: var(--titlebar-compact-row, 44px);
    margin: 0;
    border-radius: 10px;
    text-decoration: none;
}

header.titlebar.titlebar--booking-gate:not(.titlebar--lesson-workflow) .titlebar-booking-home-link[hidden] {
    display: none !important;
}

header.titlebar.titlebar--booking-gate:not(.titlebar--lesson-workflow) .titlebar-booking-home-link__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 8px;
}

header.titlebar.titlebar--booking-gate.titlebar--auth-gate.titlebar--hub-panel-title:not(.titlebar--lesson-workflow) .titlebar-hub-panel-title:not([hidden]) {
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-title-weight, 700);
    letter-spacing: normal;
    max-width: calc(100% - 8.5rem);
}

/* Value landing: titlebar back chevron only (no app icon). */
header.titlebar.titlebar--booking-gate.titlebar--booking-value-nav:not(.titlebar--lesson-workflow) .titlebar-lesson-back {
    display: inline-flex !important;
}

header.titlebar.titlebar--booking-gate.titlebar--booking-value-nav:not(.titlebar--lesson-workflow) .titlebar-booking-home-link {
    display: none !important;
}

body:has(header.titlebar.titlebar--booking-gate) .app-shell-menu-button {
    display: none !important;
}

/*
 * Hub destinations + App Feedback + contact edit + Settings/Account + session workspace:
 * title + back live in the app titlebar. Lesson-workflow titlebar may be off,
 * so these surfaces opt into the shared titlebar back control.
 *
 * Standard header: quiet chevron (same visual weight as hamburger) — not a circular primary.
 * Keep a full 44px hit target.
 */
header.titlebar.titlebar--hub-nav-back:not(.titlebar--lesson-workflow) .app-shell-menu-button {
    display: none !important;
}

header.titlebar.titlebar--hub-nav-back:not(.titlebar--lesson-workflow) .titlebar-lesson-back,
header.titlebar.titlebar--app-request:not(.titlebar--lesson-workflow) .titlebar-lesson-back,
header.titlebar.titlebar--contact-edit:not(.titlebar--lesson-workflow) .titlebar-lesson-back,
header.titlebar.titlebar--session-workspace:not(.titlebar--lesson-workflow) .titlebar-lesson-back,
header.titlebar.titlebar--transient-stack:not(.titlebar--lesson-workflow) .titlebar-lesson-back {
    display: inline-flex !important;
    box-sizing: border-box;
    width: var(--titlebar-compact-row, 44px);
    height: var(--titlebar-compact-row, 44px);
    min-width: var(--titlebar-compact-row, 44px);
    min-height: var(--titlebar-compact-row, 44px);
    max-width: var(--titlebar-compact-row, 44px);
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary, #b6c0ca);
    align-self: center;
    align-items: center;
    justify-content: center;
    font-size: inherit;
    font-weight: inherit;
}

body[data-lc-visible-surface="assistant"] #titlebar-lesson-back {
    display: none !important;
}

header.titlebar.titlebar--hub-nav-back:not(.titlebar--lesson-workflow) .titlebar-lesson-back::before,
header.titlebar.titlebar--app-request:not(.titlebar--lesson-workflow) .titlebar-lesson-back::before,
header.titlebar.titlebar--contact-edit:not(.titlebar--lesson-workflow) .titlebar-lesson-back::before,
header.titlebar.titlebar--session-workspace:not(.titlebar--lesson-workflow) .titlebar-lesson-back::before,
header.titlebar.titlebar--transient-stack:not(.titlebar--lesson-workflow) .titlebar-lesson-back::before {
    /* Hit area is the 44px control itself; no oversized circular chrome. */
    content: none;
}

header.titlebar.titlebar--hub-nav-back:not(.titlebar--lesson-workflow) .titlebar-lesson-back i,
header.titlebar.titlebar--app-request:not(.titlebar--lesson-workflow) .titlebar-lesson-back i,
header.titlebar.titlebar--contact-edit:not(.titlebar--lesson-workflow) .titlebar-lesson-back i,
header.titlebar.titlebar--session-workspace:not(.titlebar--lesson-workflow) .titlebar-lesson-back i,
header.titlebar.titlebar--transient-stack:not(.titlebar--lesson-workflow) .titlebar-lesson-back i {
    font-size: 1.05rem;
    line-height: 1;
    min-width: 0;
    min-height: 0;
    opacity: 1;
}

header.titlebar.titlebar--hub-nav-back:not(.titlebar--lesson-workflow) .titlebar-lesson-back:hover,
header.titlebar.titlebar--app-request:not(.titlebar--lesson-workflow) .titlebar-lesson-back:hover,
header.titlebar.titlebar--contact-edit:not(.titlebar--lesson-workflow) .titlebar-lesson-back:hover,
header.titlebar.titlebar--session-workspace:not(.titlebar--lesson-workflow) .titlebar-lesson-back:hover,
header.titlebar.titlebar--transient-stack:not(.titlebar--lesson-workflow) .titlebar-lesson-back:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-color: transparent;
    color: var(--text-primary, #e8e4dc);
    box-shadow: none;
}

header.titlebar.titlebar--hub-nav-back:not(.titlebar--lesson-workflow) .titlebar-lesson-back:focus-visible,
header.titlebar.titlebar--app-request:not(.titlebar--lesson-workflow) .titlebar-lesson-back:focus-visible,
header.titlebar.titlebar--contact-edit:not(.titlebar--lesson-workflow) .titlebar-lesson-back:focus-visible,
header.titlebar.titlebar--session-workspace:not(.titlebar--lesson-workflow) .titlebar-lesson-back:focus-visible,
header.titlebar.titlebar--transient-stack:not(.titlebar--lesson-workflow) .titlebar-lesson-back:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="app-request"] .ll-stack-shell__topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="app-request"] header.app-route-fullscreen-topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contact-edit"] .ll-stack-shell__topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contact-edit"] header.app-route-fullscreen-topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contacts-import"] .ll-stack-shell__topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="contacts-import"] header.app-route-fullscreen-topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"] .ll-stack-shell__topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"] header.app-route-fullscreen-topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] .ll-stack-shell__topbar,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] header.app-route-fullscreen-topbar {
    display: none !important;
}

/* App Feedback stack route: no inner card chrome (matches Messages hub). */
.view-root.view-root--stack-screen .tools-request-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-3);
    width: 100%;
    max-width: none;
    max-height: none;
    /* Ask dock is hidden here; keep the toast-line / env-badge band clear of Send. */
    padding: 0 0 calc(var(--ask-toast-band, 3rem) + env(safe-area-inset-bottom, 0px));
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    box-sizing: border-box;
}

.view-root.view-root--stack-screen .send-lesson-link-route__lede,
.view-root.view-root--stack-screen .ll-stack-shell__lede,
.view-root.view-root--stack-screen .app-route-fullscreen-lede {
    margin: 0 0 var(--ll-space-2);
}

.view-root.view-root--stack-screen .tools-request-panel .tools-request-message-field {
    flex: 1 1 auto;
    min-height: 10rem;
    max-height: min(42dvh, 280px);
    display: flex;
    flex-direction: column;
}

.view-root.view-root--stack-screen .tools-request-panel #tools-request-message {
    flex: 1 1 auto;
    min-height: 10rem;
    max-height: none;
    height: 100%;
}

.view-root.view-root--stack-screen .tools-request-panel .action-buttons {
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    padding-top: var(--ll-space-2);
}

.view-root.view-root--stack-screen .contact-edit-overlay-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="lesson-summary"] .ll-stack-shell__content {
    flex: 0 1 auto;
    min-height: auto;
    overflow: visible;
}

@media (max-width: 767.98px) {
    .view-root.view-root--stack-screen .tools-request-panel .tools-request-message-field {
        min-height: 5rem;
        max-height: min(42dvh, 240px);
    }

    .view-root.view-root--stack-screen .tools-request-panel #tools-request-message {
        min-height: 5rem;
    }

    .view-root.view-root--stack-screen .tools-request-panel .action-buttons .ll-btn.ll-btn--solid.ll-btn--primary {
        width: 100%;
        max-width: none;
    }
}

.titlebar-client-cache-sync {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-muted, #5f6368);
    background: color-mix(in srgb, var(--stroke, #d7dbe0) 55%, transparent);
}

/* Base display:inline-flex overrides the UA [hidden] rule — collapse fully when idle. */
.titlebar-client-cache-sync[hidden] {
    display: none !important;
    margin: 0;
    padding: 0;
}

.titlebar-client-cache-sync[data-sync-state='pending'] {
    color: var(--warning-text, #8a6116);
    background: color-mix(in srgb, var(--warning-bg, #fff4d6) 85%, transparent);
}

.titlebar-client-cache-sync[data-sync-state='syncing'] {
    color: var(--brand, #1a73e8);
    background: color-mix(in srgb, var(--brand, #1a73e8) 12%, transparent);
}

.titlebar-client-cache-sync[data-sync-state='failed'] {
    color: var(--danger-text, #b3261e);
    background: color-mix(in srgb, var(--danger-bg, #fde8e7) 85%, transparent);
}

/* ---- public/style/features/shared-dialogs.css ---- */
/* Feature: shared-dialogs.css */
/* Fullscreen route topbar: circular back in centered grid. */
.app-route-fullscreen-topbar .app-route-fullscreen-close.email-panel-close,
.app-route-fullscreen-topbar .ll-back-action.app-route-fullscreen-close {
    position: relative;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    min-width: 44px;
    max-width: 44px;
    width: 44px;
    height: 44px;
}

.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack.email-panel,
.ll-stack-shell__content > .lesson-workspace-participants-panel.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    gap: var(--ll-space-3);
}

.ll-stack-shell__content > .lesson-workspace-send-feedback-panel.ll-lesson-transient-in-stack.email-panel,
.ll-stack-shell__content > .lesson-workspace-send-feedback-panel.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack.email-panel,
.ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
}

.ll-stack-shell__content > .lesson-workspace-send-feedback-panel.ll-lesson-transient-in-stack .ll-surface__body,
.ll-stack-shell__content > .lesson-workspace-send-feedback-panel.ll-lesson-transient-in-stack .lesson-workspace-send-feedback-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.ll-stack-shell__content > .lesson-workspace-send-feedback-panel.ll-lesson-transient-in-stack .ll-surface__footer,
.ll-stack-shell__content > .lesson-workspace-send-feedback-panel.ll-lesson-transient-in-stack .lesson-workspace-send-feedback-panel__footer {
    padding: 0;
}

.ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack .ll-surface__body,
.ll-stack-shell__content > .record-video-panel.ll-lesson-transient-in-stack .record-video-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.ll-stack-shell__content > .general-availability-panel.ll-lesson-transient-in-stack.email-panel,
.ll-stack-shell__content > .general-availability-panel.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--space-3);
}

#general-availability-overlay.email-panel-overlay--global-modal-full {
    overflow: hidden;
    box-sizing: border-box;
}

.app-shell-main > #general-availability-overlay.email-panel-overlay--global-modal-full {
    overflow: hidden;
    overscroll-behavior: contain;
}

.app-shell-main > #general-availability-overlay.email-panel-overlay--global-modal-full.is-open {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#general-availability-overlay.email-panel-overlay--global-modal-full.is-open {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#general-availability-overlay.email-panel-overlay--global-modal-full > .general-availability-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
    overflow-x: hidden;
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
    gap: 4px;
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 540px) {
    #general-availability-overlay.email-panel-overlay--global-modal-full > .general-availability-panel {
        padding:
            4px
            max(4px, env(safe-area-inset-right, 0px))
            max(4px, env(safe-area-inset-bottom, 0px))
            max(4px, env(safe-area-inset-left, 0px));
    }

    .general-availability-period-row {
        grid-template-columns: 2.6rem minmax(0, 1fr) minmax(0, 0.85fr);
        gap: 4px;
    }
}

.dialog-header-back.email-panel-close,
.dialog-header-back.summary-panel-close {
    position: relative;
    top: auto;
    right: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    box-shadow: none;
    font-size: var(--ll-type-heading-size);
    justify-content: center;
}

.dialog-header-back.email-panel-close.ll-back-action--has-label,
.dialog-header-back.summary-panel-close.ll-back-action--has-label,
.dialog-header-back.email-panel-close:has(.ll-back-action__label),
.dialog-header-back.summary-panel-close:has(.ll-back-action__label) {
    width: auto;
    max-width: 100%;
    border-radius: 12px;
    padding: 0 12px;
}

.ll-back-action.email-panel-close,
.ll-back-action.summary-panel-close {
    position: relative;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    border: 1px solid var(--stroke);
    box-shadow: none;
}

.dialog-header-back.email-panel-close:hover,
.dialog-header-back.summary-panel-close:hover,
.ll-back-action.email-panel-close:hover,
.ll-back-action.summary-panel-close:hover {
    background: transparent;
    color: var(--text-primary, var(--ink));
    border-color: transparent;
    box-shadow: none;
    transform: none;
    opacity: 0.9;
}

/* Global modal family: z-index on layer roots — style-layers.css (.email-panel-overlay--global-modal, record-video id). Bottom drawers: .lessonlink-drawer-overlay + .lessonlink-drawer */
/* Full-height global modals (App Feedback) when not inside .app-shell-main (legacy). */
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100svh;
    min-height: 100dvh;
    z-index: calc(var(--lessonlink-z-modal-global) + 1);
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full.is-open {
    flex-direction: column;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full>.email-panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    padding:
        max(var(--ll-space-6), env(safe-area-inset-top)) max(var(--ll-space-6), env(safe-area-inset-right)) max(var(--ll-space-6), env(safe-area-inset-bottom)) max(var(--ll-space-6), env(safe-area-inset-left));
}

/* App Feedback: clip to main column (see .app-shell-main in index.html), not full viewport. */
.app-shell-main > .email-panel-overlay.email-panel-overlay--global-modal {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.app-shell-main > .email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full {
    min-height: 0;
}

/* Inset global modals (switch user, avatar, instructor invite): 0.3vh below top, 10% side margins, height from content */
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-window {
    box-sizing: border-box;
    padding:
        calc(0.3vh + env(safe-area-inset-top, 0px)) max(10%, env(safe-area-inset-right, 0px)) max(var(--ll-space-4), var(--ll-modal-gutter-y-bottom)) max(10%, env(safe-area-inset-left, 0px));
    align-items: flex-start;
    justify-content: center;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-window.is-open {
    flex-direction: column;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-window>.email-panel {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    max-height: min(calc(100dvh - 0.3vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - max(var(--ll-space-4), var(--ll-space-3)) - var(--ll-space-4)),
            calc(100svh - 0.3vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - max(var(--ll-space-4), var(--ll-space-3)) - var(--ll-space-4)));
    overflow-y: auto;
    border-radius: var(--radius-xl);
    box-shadow: 0 36px 84px rgba(17, 28, 24, 0.28);
    padding: var(--ll-space-6);
}

.email-panel-overlay.email-panel-overlay--global-modal .email-panel-header {
    padding-right: 0;
}

.email-panel-overlay.email-panel-overlay--global-modal .email-panel-close.email-panel-close--global-modal.dialog-header-back,
.email-panel-overlay.email-panel-overlay--global-modal .ll-back-action.email-panel-close.email-panel-close--global-modal {
    position: relative;
    z-index: 2;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    box-shadow: none;
    color: var(--text-primary, var(--ink));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    margin: 0;
    padding: 0;
    font-size: var(--ll-type-heading-size);
    line-height: 1.2;
    justify-content: center;
}

.email-panel-overlay.email-panel-overlay--global-modal .email-panel-close.email-panel-close--global-modal.dialog-header-back.ll-back-action--has-label,
.email-panel-overlay.email-panel-overlay--global-modal .ll-back-action.email-panel-close.email-panel-close--global-modal.ll-back-action--has-label,
.email-panel-overlay.email-panel-overlay--global-modal .email-panel-close.email-panel-close--global-modal.dialog-header-back:has(.ll-back-action__label),
.email-panel-overlay.email-panel-overlay--global-modal .ll-back-action.email-panel-close.email-panel-close--global-modal:has(.ll-back-action__label) {
    width: auto;
    max-width: 100%;
    border-radius: 12px;
    padding: 0 12px;
}

.email-panel-overlay.email-panel-overlay--global-modal .email-panel-close.email-panel-close--global-modal.dialog-header-back:hover,
.email-panel-overlay.email-panel-overlay--global-modal .ll-back-action.email-panel-close.email-panel-close--global-modal:hover {
    background: color-mix(in srgb, var(--surface-card-strong) 98%, var(--brand-primary, var(--brand)) 4%);
    color: var(--text-primary, var(--ink));
    border-color: color-mix(in srgb, var(--stroke) 70%, var(--brand-primary, var(--brand)) 30%);
    box-shadow: none;
    transform: none;
    opacity: 1;
}

.email-panel-overlay.email-panel-overlay--global-modal .email-panel-close.email-panel-close--global-modal:focus-visible {
    outline: 2px solid var(--brand-primary, var(--brand));
    outline-offset: 2px;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full>.tools-request-panel {
    display: flex;
    flex-direction: column;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full>.tools-request-panel .tools-request-message-field {
    flex: 1 1 auto;
    flex-shrink: 1;
    min-width: 0;
    min-height: 10rem;
    max-height: min(42dvh, 280px);
    display: flex;
    flex-direction: column;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full>.tools-request-panel #tools-request-message {
    flex: 1 1 auto;
    flex-shrink: 1;
    min-width: 0;
    min-height: 10rem;
    max-height: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    resize: vertical;
}

.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full>.tools-request-panel .action-buttons {
    flex-shrink: 0;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--ll-space-2);
}

#general-availability-overlay.email-panel-overlay--global-modal-full > .general-availability-panel.email-panel,
#general-availability-overlay.email-panel-overlay--global-modal-full > .general-availability-panel {
    width: 100% !important;
    max-width: none !important;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.record-video-overlay.email-panel-overlay.email-panel-overlay--global-modal-full {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

/* Full-bleed capture inside clipped global modal shell (override generic full-modal .email-panel padding). */
.app-shell-main > .email-panel-overlay.record-video-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.record-video-panel {
    padding: 0;
    gap: 0;
}

/* ---- public/style/features/contact.css ---- */
/* Feature: contact.css */
.contact-edit-overlay-switch-user-button,
.contact-row-switch-user-button.contact-edit-overlay-switch-user-button {
    max-width: none;
    flex-shrink: 0;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: var(--ll-type-label-weight);
    line-height: 1;
}

/* Contact edit: tighter vertical rhythm on typical mobile viewports. */
@media (max-width: 767.98px) {
    .ll-stack-shell[data-ll-stack-id="contact-edit"] .ll-stack-shell__topbar.ll-surface__header {
        min-height: 2.5rem;
        padding-top: max(4px, env(safe-area-inset-top, 0px));
        padding-bottom: 4px;
    }

    .view-root.view-root--stack-screen .contact-edit-stack-meta {
        margin-bottom: 4px;
    }

    #contact-edit-overlay .contact-edit-stack-header {
        gap: 8px;
        align-items: center;
    }

    #contact-edit-overlay .contact-edit-stack-avatar .ll-role-avatar {
        --ll-role-avatar-size: 40px;
    }

    #contact-edit-overlay .contact-edit-stack-header-copy {
        gap: 2px;
    }

    #contact-edit-overlay .contact-claim-status-row {
        line-height: 1.25;
        gap: 2px 8px;
    }

    #contact-edit-overlay .contact-edit-overlay-reach-button,
    #contact-edit-overlay .contact-edit-overlay-switch-user-button {
        min-width: 40px;
        min-height: 40px;
        padding: 0 8px;
        border-radius: 10px;
    }

    #contact-edit-overlay .contact-history-form {
        gap: 6px;
        padding-top: 0;
    }

    #contact-edit-overlay .contact-flat-form-section.contact-history-section {
        gap: 4px;
        padding: 4px 2px;
        border-radius: var(--radius-md);
        box-shadow: none;
    }

    #contact-edit-overlay .contact-edit-fields.contact-history-details-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        padding: 2px 0 0;
    }

    #contact-edit-overlay .contact-edit-fields label.lesson-field {
        font-size: var(--ll-type-body-size);
        line-height: var(--ll-type-body-line);
    }

    #contact-edit-overlay .contact-edit-fields label.lesson-field span,
    #contact-edit-overlay .contact-edit-player-details__body > label.lesson-field span {
        font-weight: var(--ll-type-label-weight);
    }

    #contact-edit-overlay .contact-edit-fields label.lesson-field span,
    #contact-edit-overlay .contact-edit-player-details__body > label.lesson-field span {
        font-weight: var(--ll-type-label-weight);
    }

    #contact-edit-overlay .contact-edit-fields > .contact-danger-row {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    #contact-edit-overlay .contact-edit-fields > .contact-edit-identity-details,
    #contact-edit-overlay .contact-edit-fields .contact-edit-player-details {
        grid-column: 1 / -1;
    }

    #contact-edit-overlay .email-input {
        min-height: 34px;
        padding: 6px 10px;
        font-size: max(var(--font-size-sm, 0.875rem), 0.82rem);
    }

    #contact-edit-overlay #contact-edit-notes {
        min-height: 3rem;
        max-height: 4.25rem;
        resize: vertical;
    }

    #contact-edit-overlay .contact-phone-field {
        gap: 4px;
    }
}

.lesson-people-picker-autocomplete.contact-autocomplete {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-2);
    min-height: 0;
}

/* Contact card: one stacked field list. Claimed vs unclaimed shares the same layout;
   ownership is readonly styling on identity fields, not a second surface. */
#contact-edit-overlay .contact-edit-fields.contact-edit-fields--flat .contact-edit-layer-heading,
#contact-edit-overlay .contact-edit-fields.contact-edit-fields--flat .contact-edit-layer-help:not(.contact-edit-layer-help--account),
#contact-edit-overlay .contact-edit-layer-heading {
    display: none;
}

#contact-edit-overlay .contact-edit-fields.contact-edit-fields--flat .contact-edit-layer,
#contact-edit-overlay .contact-edit-layer {
    display: contents;
}

#contact-edit-overlay .contact-edit-layer-help--account {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: var(--ll-type-caption-size, 0.8rem);
    line-height: 1.35;
    color: var(--text-muted, inherit);
}

#contact-edit-overlay .contact-edit-field--account-readonly,
#contact-edit-overlay .contact-edit-fields.contact-edit-fields--claimed .contact-edit-layer--account .email-input[readonly],
#contact-edit-overlay .contact-edit-fields.contact-edit-fields--dual-layer .contact-edit-layer--account .email-input[readonly] {
    opacity: 0.85;
    cursor: default;
    caret-color: transparent;
}

#contact-edit-overlay .contact-edit-fields.contact-edit-fields--claimed .contact-edit-layer--account .email-input[readonly]:focus,
#contact-edit-overlay .contact-edit-fields.contact-edit-fields--dual-layer .contact-edit-layer--account .email-input[readonly]:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--input-border, var(--border, transparent));
}

/* Name / email / phone — collapsed by default on existing student cards. */
#contact-edit-overlay .contact-edit-identity-details {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px solid var(--stroke, var(--border-default, transparent));
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--surface-card-strong, transparent) 88%, white);
}

#contact-edit-overlay .contact-edit-identity-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-3, 12px);
    padding: 10px 12px;
    list-style: none;
    cursor: pointer;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    color: var(--ink, inherit);
}

#contact-edit-overlay .contact-edit-identity-details__summary::-webkit-details-marker {
    display: none;
}

#contact-edit-overlay .contact-edit-identity-details__summary::marker {
    content: '';
}

#contact-edit-overlay .contact-edit-identity-details[open] .contact-edit-identity-details__summary {
    border-bottom: 1px solid color-mix(in srgb, var(--stroke, currentColor) 55%, transparent);
}

#contact-edit-overlay .contact-edit-identity-details[open] .ll-disclosure-chevron--accordion {
    opacity: var(--ll-disclosure-accordion-chevron-expanded-opacity, 0.16);
}

#contact-edit-overlay .contact-edit-identity-details__body {
    display: grid;
    gap: var(--ll-space-3, 12px);
    padding: 10px 12px 12px;
}

@media (max-width: 767.98px) {
    #contact-edit-overlay .contact-edit-identity-details__body {
        gap: 6px;
        padding: 8px 10px 10px;
    }
}

/* Optional player/golf fields — collapsed by default on Add Contact. */
#contact-edit-overlay .contact-edit-player-details {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px solid var(--stroke, var(--border-default, transparent));
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--surface-card-strong, transparent) 88%, white);
}

#contact-edit-overlay .contact-edit-player-details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-3, 12px);
    padding: 10px 12px;
    list-style: none;
    cursor: pointer;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    color: var(--ink, inherit);
}

#contact-edit-overlay .contact-edit-player-details__summary::-webkit-details-marker {
    display: none;
}

#contact-edit-overlay .contact-edit-player-details__summary::marker {
    content: '';
}

#contact-edit-overlay .contact-edit-player-details[open] .contact-edit-player-details__summary {
    border-bottom: 1px solid color-mix(in srgb, var(--stroke, currentColor) 55%, transparent);
}

#contact-edit-overlay .contact-edit-player-details[open] .ll-disclosure-chevron--accordion {
    opacity: var(--ll-disclosure-accordion-chevron-expanded-opacity, 0.16);
}

#contact-edit-overlay .contact-edit-player-details__body {
    display: grid;
    gap: inherit;
    gap: var(--ll-space-3, 12px);
    padding: 10px 12px 12px;
}

@media (max-width: 767.98px) {
    #contact-edit-overlay .contact-edit-player-details__body {
        gap: 6px;
        padding: 8px 10px 10px;
    }
}

.contact-student-portal-preview {
    display: grid;
    gap: var(--ll-space-3, 12px);
    margin: 0 0 var(--ll-space-4, 16px);
    padding: var(--ll-space-4, 16px);
    border: 1px solid color-mix(in srgb, var(--stroke, currentColor) 40%, transparent);
    border-radius: 12px;
}

.contact-edit-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ll-space-4, 16px);
    align-items: start;
}

.contact-edit-lessons-aside {
    min-width: 0;
}

.contact-edit-lessons-aside[hidden] {
    display: none;
}

.contact-edit-lessons-aside-inner {
    display: grid;
    gap: var(--ll-space-4, 16px);
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Match Lessons hub / All Past session rows (scoped to contact editor). */
#contact-edit-overlay .contact-edit-lessons-hub.sessions-hub-dashboard {
    gap: var(--ll-space-2, 8px);
}

#contact-edit-overlay .contact-edit-lessons-hub .directory-dashboard-group .sessions-hub-session-row {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--stroke);
    padding-left: 4px;
    padding-right: 8px;
    box-shadow: none;
    transform: none;
}

#contact-edit-overlay .contact-edit-lessons-hub .directory-dashboard-group .sessions-hub-session-row:last-child {
    border-bottom: 0;
}

#contact-edit-overlay .contact-edit-lessons-hub .directory-dashboard-group .sessions-hub-session-row:hover,
#contact-edit-overlay .contact-edit-lessons-hub .directory-dashboard-group .sessions-hub-session-row:has(.today-row-actions-menu[open]) {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 6%, transparent);
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row:has(.today-row-actions-menu[open]) {
    z-index: 24;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row__open {
    grid-column: 1 / 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row__open:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row .contact-row-stats-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row .contact-row-status-line {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1px;
    min-width: 0;
    max-width: 100%;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row .today-recent-lesson-card__student-history .ll-role-avatar {
    --ll-role-avatar-size: 36px;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-session-row .contact-row-name .ll-lesson-sent-badge {
    flex: 0 0 auto;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-section--collapsible {
    gap: 0;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-panel-group {
    margin-bottom: 0;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-panel-group > .sessions-hub-group__summary {
    padding: 8px 2px;
}

#contact-edit-overlay .contact-edit-lessons-hub .sessions-hub-panel-group .directory-dashboard-section__title {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.contact-edit-lessons-heading {
    margin: 0;
    padding: 0 2px;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.contact-edit-lessons-empty {
    margin: 0;
}

.contact-edit-lessons-see-all {
    justify-self: start;
}

.contact-student-portal-preview[hidden] {
    display: none;
}

/* ---- public/style/features/contact-import.css ---- */
/* Feature: contact-import.css
 * Step contract: contact-import-feature.js (CONTACT_IMPORT_STEPS)
 * Review scroll: #contact-import-review-table-wrap (overflow-y + viewport max-height)
 */

.contact-import-route-root {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    padding: var(--ll-space-2) 0 var(--ll-space-6);
    min-width: 0;
}

.contact-import-route-root--boot-pending {
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    position: relative;
}

.contact-import-route-boot-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-import-route-boot-spinner[hidden] {
    display: none !important;
}

.contact-import-step {
    min-width: 0;
}

.contact-import-export-help {
    margin: 0 0 var(--ll-space-4);
    border: 1px solid var(--border-subtle, var(--ll-color-border, #e0e3e7));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card, var(--ll-color-surface, #fff)) 96%, transparent);
    overflow: hidden;
}

.contact-import-export-help__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle, var(--ll-color-border, #e0e3e7));
}

.contact-import-export-help__tab {
    flex: 1 1 auto;
    min-width: 4.5rem;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary, var(--ll-color-text-secondary, #5f6368));
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line-height);
    cursor: pointer;
}

.contact-import-export-help__tab.is-active {
    color: var(--text-primary, inherit);
    border-bottom-color: var(--accent-success-strong, #4da86a);
}

.contact-import-export-help__tab:focus-visible {
    outline: 2px solid var(--accent-success-strong, #4da86a);
    outline-offset: -2px;
}

.contact-import-export-help__panel {
    padding: var(--ll-space-4);
}

.contact-import-export-help__intro,
.contact-import-export-help__meta {
    margin: 0;
    color: var(--text-secondary, var(--ll-color-text-secondary, #5f6368));
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-export-help__intro {
    margin-bottom: var(--ll-space-3);
}

.contact-import-export-help__meta {
    margin-top: var(--ll-space-3);
    font-size: var(--ll-type-caption-size);
}

.contact-import-export-help__steps {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--ll-space-2);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-export-help__steps a {
    color: var(--text-link, var(--accent-info-strong, #2d6cdf));
}

.contact-import-template-link {
    display: inline-block;
    color: var(--accent-success-strong, #4da86a);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line-height);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.contact-import-template-link:hover,
.contact-import-template-link:focus-visible {
    color: var(--accent-success, #3f8f58);
}

.contact-import-step__title {
    margin: 0 0 var(--ll-space-2);
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line-height);
}

.contact-import-row-limit-warning {
    margin: 0 0 var(--ll-space-4);
    padding: var(--ll-space-3) var(--ll-space-4);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #e9a100 35%, var(--border-subtle, #e0e3e7));
    background: color-mix(in srgb, #e9a100 14%, var(--bg-elevated, #fff));
    color: var(--text-primary, inherit);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-invite-option {
    margin: 0 0 var(--ll-space-4);
    padding: var(--ll-space-3) var(--ll-space-4);
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--ll-color-danger, #b3261e) 28%, var(--border-subtle, #e0e3e7));
    background: color-mix(in srgb, var(--ll-color-danger, #b3261e) 8%, var(--bg-elevated, #fff));
}

.contact-import-invite-option__label {
    display: flex;
    align-items: flex-start;
    gap: var(--ll-space-2);
    margin: 0 0 var(--ll-space-3);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
    cursor: pointer;
}

.contact-import-invite-option__label input[type="checkbox"] {
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.contact-import-invite-option__warning {
    margin: 0 0 var(--ll-space-2);
    color: var(--text-primary, inherit);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-invite-option__meta {
    margin: 0;
    color: var(--ll-color-text-secondary, #5f6368);
    font-size: var(--ll-type-caption-size, var(--ll-type-body-size));
    line-height: var(--ll-type-caption-line-height, var(--ll-type-body-line-height));
}

.contact-import-step__lede {
    margin: 0 0 var(--ll-space-4);
    color: var(--ll-color-text-secondary, #5f6368);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-instructions {
    margin: 0 0 var(--ll-space-4);
    padding-left: 1.25rem;
    display: grid;
    gap: var(--ll-space-2);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-source-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ll-space-2);
    margin: 0 0 var(--ll-space-3);
}

.contact-import-apple-help {
    margin: 0 0 var(--ll-space-4);
    padding: var(--ll-space-3) var(--ll-space-4);
    border: 1px solid var(--border-subtle, var(--ll-color-border, #e0e3e7));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card, var(--ll-color-surface, #fff)) 96%, transparent);
}

.contact-import-apple-help > summary {
    cursor: pointer;
    color: var(--ll-color-text-secondary, #5f6368);
    font-size: var(--ll-type-body-sm-size, var(--ll-type-body-size));
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-line-height);
    list-style: none;
}

.contact-import-apple-help > summary::-webkit-details-marker {
    display: none;
}

.contact-import-apple-help > summary::after {
    content: 'Show steps';
    display: inline-block;
    margin-left: var(--ll-space-2);
    color: var(--brand, var(--ll-color-accent, #1a73e8));
    font-weight: var(--ll-type-label-weight);
}

.contact-import-apple-help[open] > summary::after {
    content: 'Hide steps';
}

.contact-import-apple-help__intro {
    margin: var(--ll-space-3) 0 0;
    color: var(--ll-color-text-secondary, #5f6368);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-apple-help__steps {
    margin: var(--ll-space-3) 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--ll-space-2);
    color: var(--text-primary, inherit);
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-source-toggle__option {
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-subtle, var(--ll-color-border, #e0e3e7));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card, var(--ll-color-surface, #fff)) 96%, transparent);
    color: var(--text-primary, inherit);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line-height);
    cursor: pointer;
    text-align: center;
}

.contact-import-source-toggle__option:hover,
.contact-import-source-toggle__option:focus-visible {
    border-color: color-mix(in srgb, var(--brand, var(--ll-color-accent, #1a73e8)) 45%, var(--border-subtle, #e0e3e7));
    background: color-mix(in srgb, var(--brand, var(--ll-color-accent, #1a73e8)) 8%, var(--surface-card, #fff));
}

.contact-import-source-toggle__option.is-active {
    border-color: color-mix(in srgb, var(--accent-success-strong, #4da86a) 55%, var(--border-subtle, #e0e3e7));
    background: color-mix(in srgb, var(--accent-success-strong, #4da86a) 12%, var(--surface-card, #fff));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-success-strong, #4da86a) 35%, transparent);
}

.contact-import-source-toggle__option:disabled {
    opacity: 0.65;
    cursor: wait;
}

.contact-import-csv-panel {
    display: grid;
    gap: var(--ll-space-4);
    margin-bottom: var(--ll-space-2);
}

.contact-import-csv-panel[hidden] {
    display: none;
}

.contact-import-csv-panel .contact-import-export-help {
    margin-bottom: 0;
}

.contact-import-source-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ll-space-3);
    margin: 0 0 var(--ll-space-3);
}

.contact-import-google-start {
    min-width: 0;
}

.contact-import-source-divider {
    display: flex;
    align-items: center;
    gap: var(--ll-space-3);
    margin: 0 0 var(--ll-space-4);
    color: var(--ll-color-text-secondary, #5f6368);
    font-size: var(--ll-type-caption-size);
    line-height: var(--ll-type-caption-line-height);
}

.contact-import-source-divider::before,
.contact-import-source-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--border-subtle, var(--ll-color-border, #e0e3e7));
}

.contact-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ll-space-3);
    align-items: center;
    margin-top: var(--ll-space-4);
}

.contact-import-actions--split {
    justify-content: space-between;
}

.contact-import-dropzone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: var(--ll-space-3) var(--ll-space-4);
    border: 1px dashed color-mix(in srgb, var(--stroke, var(--ll-color-border-strong, #c7cacf)) 82%, var(--brand, var(--ll-color-accent, #1a73e8)));
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card, var(--ll-color-surface, #fff)) 94%, transparent);
    color: var(--text-primary, var(--ll-color-text-primary, inherit));
    cursor: pointer;
    text-align: center;
}

.contact-import-dropzone:hover,
.contact-import-dropzone:focus-within {
    border-color: color-mix(in srgb, var(--brand, var(--ll-color-accent, #1a73e8)) 50%, var(--stroke, var(--ll-color-border-strong, #c7cacf)));
    background: color-mix(in srgb, var(--brand, var(--ll-color-accent, #1a73e8)) 7%, var(--surface-card, var(--ll-color-surface, #fff)));
}

.contact-import-dropzone__title {
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line-height);
    color: var(--text-primary, var(--ll-color-text-primary, inherit));
}

.contact-import-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.contact-import-table-wrap {
    border: 1px solid var(--border-subtle, var(--ll-color-border, #e0e3e7));
    border-radius: 12px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.contact-import-route-root[data-contact-import-step="review"] #contact-import-review-table-wrap {
    /* JS sets max-height from viewport; fallback before/without JS */
    max-height: calc(100dvh - 17rem);
}

.contact-import-table-empty {
    margin: 0;
    padding: var(--ll-space-4);
    color: var(--ll-color-text-secondary, #5f6368);
    text-align: center;
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-type-body-line-height);
}

.contact-import-row--empty td {
    white-space: normal;
    border-bottom: 0;
}

.contact-import-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--ll-type-body-size);
}

.contact-import-table th,
.contact-import-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle, var(--ll-color-border, #e0e3e7));
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-import-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--text-primary, inherit);
    background: var(--surface-card, var(--ll-color-surface, #fff));
    box-shadow: inset 0 -1px 0 var(--border-subtle, var(--ll-color-border, #e0e3e7));
}

.contact-import-col--import {
    width: 3.25rem;
    text-align: center;
}

.contact-import-col--name {
    width: 42%;
}

.contact-import-col--email {
    width: auto;
}

.contact-import-col--import input[type="checkbox"] {
    margin: 0;
}

.contact-import-row--error .contact-import-col--name,
.contact-import-col--email-error {
    color: var(--ll-color-danger, #b3261e);
}

.contact-import-row--skip .contact-import-col--name,
.contact-import-row--skip .contact-import-col--email {
    color: var(--text-secondary, var(--ll-color-text-secondary, #5f6368));
}

.contact-import-review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ll-space-3);
    margin: 0 0 var(--ll-space-3);
}

.contact-import-review-filter-wrap {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
    max-width: 20rem;
}

.contact-import-review-filter {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: color-mix(in srgb, white 96%, var(--surface-card));
    font-size: var(--ll-type-label-size);
}

.contact-import-review-filter::placeholder {
    color: var(--text-muted);
}

.contact-import-review-toolbar--confirm {
    justify-content: flex-end;
}

.contact-import-review-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ll-space-2);
    margin-left: auto;
}

.contact-import-select-all {
    display: inline-flex;
    align-items: center;
    gap: var(--ll-space-2);
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line-height);
    cursor: pointer;
}

.contact-import-log__list {
    margin: 0 0 var(--ll-space-4);
    padding-left: 1.25rem;
    display: grid;
    gap: var(--ll-space-2);
}

.contact-import-log__empty {
    margin: 0 0 var(--ll-space-4);
    color: var(--ll-color-text-secondary, #5f6368);
}

.contact-import-status {
    margin-top: var(--ll-space-3);
}

.contact-import-confirm-note {
    margin: 0 0 var(--ll-space-2);
    color: var(--ll-color-text-secondary, #5f6368);
    font-size: var(--ll-type-caption-size);
}

@media (max-width: 720px) {
    .contact-import-source-toggle {
        grid-template-columns: 1fr;
    }

    .contact-import-export-help__tab {
        flex: 1 1 45%;
    }

    .contact-import-review-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-import-review-toolbar__actions {
        width: 100%;
        margin-left: 0;
    }

    .contact-import-review-toolbar__actions .ll-btn.ll-btn--solid.ll-btn--primary,
    .contact-import-review-toolbar__actions .ll-btn.ll-btn--ghost {
        flex: 1 1 auto;
    }

    .contact-import-actions--split {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-import-actions--split .ll-btn.ll-btn--solid.ll-btn--primary,
    .contact-import-actions--split .ll-btn.ll-btn--ghost {
        width: 100%;
    }
}

/* ---- public/style/features/home-schedule.css ---- */
/* Feature: home-schedule.css */
.availability-calendar .fc-toolbar.fc-header-toolbar {
    margin: 0;
    padding: 4px 4px 10px;
    gap: 10px;
}

.home-panel.home-schedule-panel-root .home-availability-card {
    flex: 1 1 auto;
    min-height: 0;
}

.home-panel.home-schedule-panel-root .availability-editor--embedded {
    flex: 1 1 auto;
    min-height: 0;
}

.home-panel.home-schedule-panel-root .availability-editor--embedded .availability-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
}

.home-panel.home-schedule-panel-root .availability-editor--embedded .availability-calendar,
.home-panel.home-schedule-panel-root .availability-editor--embedded .availability-calendar .fc {
    height: 100%;
    min-height: 0;
}

.home-panel.home-schedule-panel-root .availability-editor--embedded .availability-calendar .fc-view-harness {
    flex: 1 1 auto;
    min-height: 0;
}

/* Use almost the full panel: keep only a few px around the calendar chrome. */
.home-panel.home-schedule-panel-root .calendar-shell {
    gap: 4px;
}

.home-panel.home-schedule-panel-root .calendar-card,
.home-panel.home-schedule-panel-root .home-availability-card {
    padding: 4px;
}

.home-panel.home-schedule-panel-root .availability-editor--embedded {
    gap: 4px;
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar {
    margin-bottom: 4px;
    gap: 6px;
}

.home-panel.home-schedule-panel-root .availability-editor--embedded .availability-grid-scroll {
    margin-top: 0;
}

/* Week view: reclaim horizontal space on narrow screens */
@media (max-width: 640px) {
    .availability-calendar .fc {
        min-width: 100%;
    }

    .availability-calendar .fc-timegrid-slot,
    .availability-calendar .fc-timegrid-axis {
        height: 2.15rem;
    }

    .availability-calendar .fc-timegrid-axis {
        width: 1.75rem;
    }

    .availability-calendar .fc-timegrid-axis-frame,
    .availability-calendar .fc-timegrid-axis-cushion {
        padding: 0;
    }

    .availability-calendar .fc-timegrid-slot-label-frame {
        text-align: center;
    }

    .availability-calendar .fc-timegrid-slot-label-cushion {
        padding: 0 1px;
        font-size: var(--ll-type-micro-size, 0.6875rem);
        font-weight: 600;
        line-height: 1.15;
    }

    .availability-calendar .fc-col-header-cell-cushion {
        padding: 2px 1px;
        font-size: var(--ll-type-micro-size, 0.6875rem);
        font-weight: 700;
        line-height: 1.15;
    }

    .availability-calendar .fc-timeGridWeek-view .calendar-lesson-fc-event-inner--week .calendar-lesson-fc-event-title-line {
        font-size: var(--ll-type-meta-size, 0.75rem);
    }

    .availability-calendar .fc-timeGridWeek-view .calendar-availability-overlay-label--external-busy {
        font-size: var(--ll-type-meta-size, 0.75rem);
        line-height: 1;
        min-width: 0.95em;
        padding: 0;
    }

    .availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse {
        width: 1.25rem;
        min-width: 1.25rem;
        max-width: 1.45rem;
    }

    .availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse .calendar-week-day-header__num {
        font-size: 0.65rem;
    }

    .availability-calendar .fc-timeGridWeek-view .fc-day-col--sparse .calendar-week-day-header__dow-letter {
        font-size: 0.58rem;
    }

    .availability-calendar .fc-toolbar.fc-header-toolbar {
        padding: 2px 2px 6px;
        gap: 6px;
    }

    .availability-calendar .fc-toolbar-title {
        font-size: clamp(0.82rem, 3.8vw, 0.98rem);
    }
}

/* ---- public/style/features/settings-profile.css ---- */
/* Feature: settings-profile.css */

/* Profiles screen (My Profile / Assistant Profile)
 * /profiles uses view-root--account-fullscreen. Outer shells stay overflow:hidden;
 * .profiles-root is the scrollport so Summary Style (Humor / Expressiveness) is reachable.
 */
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"],
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-stack-shell__inner,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-surface--screen-stack,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-stack-shell__body,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-stack-shell__body-inner,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-stack-shell__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-stack-shell__body-inner,
.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .ll-stack-shell__content {
    overflow: hidden;
}

.view-root.view-root--account-fullscreen .ll-stack-shell[data-ll-stack-id="profiles"] .profiles-root {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.profiles-root {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profiles-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-muted, var(--bg-elevated));
    border: 1px solid var(--stroke, var(--border-subtle));
    border-radius: 999px;
}

.profiles-tab {
    flex: 1;
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, var(--text-secondary));
    font: inherit;
    font-weight: var(--ll-type-label-weight, 500);
    font-size: var(--ll-type-body-size, 0.9375rem);
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.profiles-tab:hover {
    color: var(--text);
}

.profiles-tab.is-active {
    background: var(--surface-card, var(--bg-elevated));
    color: var(--text);
    border-color: var(--stroke, var(--border-subtle));
    font-weight: var(--ll-type-weight-semibold, 600);
}

.profiles-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.profiles-form .form-autosave-footer {
    min-height: 1.4em;
}

.profiles-form .form-autosave-status {
    margin: 0;
}

.profiles-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Author display:flex beats the UA [hidden] rule — keep inactive panels closed. */
.profiles-panel[hidden] {
    display: none;
}

.profiles-summary-style-host {
    margin-top: 0.25rem;
}

/* Assistant voice profile picker (Ask delivery persona) */
.profiles-voice-fieldset {
    margin: 0.35rem 0 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.profiles-voice-legend {
    margin: 0 0 0.35rem;
    padding: 0;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: var(--ll-type-weight-semibold, 600);
    color: var(--text);
}

.profiles-voice-lede,
.profiles-voice-empty {
    margin: 0 0 0.65rem;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
    color: var(--text-muted, var(--text-secondary));
}

.profiles-voice-options {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.profiles-voice-option {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--stroke, var(--border-subtle));
    border-radius: 12px;
    background: var(--surface-card, var(--bg-elevated));
    cursor: pointer;
    transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.profiles-voice-option:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--stroke, var(--border-subtle)));
}

.profiles-voice-option.is-selected {
    border-color: color-mix(in srgb, var(--brand) 55%, var(--stroke, var(--border-subtle)));
    background: color-mix(in srgb, var(--brand) 7%, var(--surface-card, var(--bg-elevated)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 25%, transparent);
}

.profiles-voice-option:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.profiles-voice-option__input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.profiles-voice-option__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.profiles-voice-option__name {
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: var(--ll-type-weight-semibold, 600);
    color: var(--text);
}

.profiles-voice-option__description {
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
    color: var(--text-muted, var(--text-secondary));
}

.profiles-voice-option__sample {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.2rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: var(--surface-muted, color-mix(in srgb, var(--text) 4%, transparent));
}

.profiles-voice-option__sample-label {
    font-size: var(--ll-type-label-size, 0.75rem);
    font-weight: var(--ll-type-weight-semibold, 600);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted, var(--text-secondary));
}

.profiles-voice-option__sample-text {
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
    color: var(--text);
    font-style: italic;
}

@media (max-width: 640px) {
    .profiles-voice-option {
        padding: 0.7rem 0.7rem;
    }
}

.profiles-summary-style-host .profiles-summary-style {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profiles-photo-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem;
    border: 1px solid var(--stroke, var(--border-subtle));
    border-radius: 12px;
    background: var(--surface-card, var(--bg-elevated));
}

.profiles-photo-card__preview {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-muted, var(--bg-elevated));
    border: 1px solid var(--stroke, var(--border-subtle));
    display: grid;
    place-items: center;
}

.profiles-photo-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profiles-photo-card__empty {
    font-size: var(--ll-type-body-sm-size, 0.8125rem);
    color: var(--text-muted, var(--text-secondary));
    text-align: center;
    padding: 0.25rem;
    line-height: 1.2;
}

.profiles-photo-card__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.profiles-photo-card__title {
    margin: 0;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: var(--ll-type-weight-semibold, 600);
    color: var(--text);
}

label.settings-toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

label.settings-toggle:has(.settings-toggle-input:disabled) {
    cursor: not-allowed;
}

label.settings-toggle:has(.settings-toggle-input:focus-visible) .settings-toggle-track {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Narration voice settings (Settings → Narration Voice) */
.voice-clone-settings-host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.narration-voice-picker {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.narration-voice-option-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface-card);
}

.narration-voice-option-row--clone-ready {
    flex-direction: column;
    gap: 0.55rem;
}

.narration-voice-option {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.narration-voice-option input[type="radio"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.narration-voice-option-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.narration-voice-option-label {
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: var(--ll-type-weight-semibold, 600);
    color: var(--text);
}

.narration-voice-option-description {
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    color: var(--text-muted);
    line-height: 1.4;
}

.narration-voice-option-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.narration-voice-option-row--clone-ready .voice-clone-status {
    width: 100%;
}

.voice-clone-guided-host[hidden] {
    display: none;
}

.voice-clone-loading,
.voice-clone-error {
    margin: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    color: var(--text-muted);
}

.voice-clone-error {
    color: var(--danger, #dc2626);
}

.voice-clone-disabled-notice {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 25%, var(--stroke));
    background: color-mix(in srgb, var(--danger, #dc2626) 6%, var(--surface-card));
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
}

.voice-clone-disabled-notice p {
    margin: 0;
}

.voice-clone-status {
    border: 1px solid var(--stroke);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    background: var(--surface-card);
}

.voice-clone-status--compact {
    padding: 0.45rem 0.55rem 0.45rem 0.65rem;
}

.voice-clone-status--ready {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--stroke));
    background: color-mix(in srgb, var(--brand) 6%, var(--surface-card));
}

.voice-clone-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.voice-clone-status-line {
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.35;
    overflow: hidden;
    white-space: nowrap;
}

.voice-clone-status-label {
    font-weight: 600;
    flex-shrink: 0;
}

.voice-clone-status-sep {
    color: var(--text-muted);
    flex-shrink: 0;
}

.voice-clone-status-name {
    flex-shrink: 0;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.voice-clone-status-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.35rem;
}

.voice-clone-start-over-inline {
    color: var(--danger, #dc2626);
}

.voice-clone-guided-host {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.voice-clone-guided {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.voice-clone-guided--idle {
    align-items: stretch;
    gap: 1rem;
    padding: 0.5rem 0 1rem;
}

.voice-clone-intro-block {
    border: 1px solid var(--stroke);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    background: var(--surface-muted, var(--surface-card));
}

.voice-clone-intro {
    margin: 0 0 0.65rem;
    font-size: var(--ll-type-body-size, 0.9375rem);
    line-height: 1.55;
}

.voice-clone-intro-steps {
    margin: 0;
    padding-left: 1.15rem;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.55;
    color: var(--text-muted);
}

.voice-clone-intro-steps li + li {
    margin-top: 0.35rem;
}

.voice-clone-guided-instructions {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: var(--surface-muted, var(--surface-card));
    border: 1px solid var(--stroke);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.55;
}

.voice-clone-guided-progress {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.voice-clone-guided-step {
    font-size: var(--ll-type-label-size, 0.8125rem);
    font-weight: 500;
    color: var(--text-muted);
}

.voice-clone-guided-bar {
    height: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, var(--stroke));
    overflow: hidden;
}

.voice-clone-guided-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand);
    transition: width 0.2s ease;
}

.voice-clone-reading-box {
    border: 2px solid color-mix(in srgb, var(--brand) 35%, var(--stroke));
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    background: var(--surface-card);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

.voice-clone-guided-prompt {
    margin: 0;
    font-size: var(--ll-type-body-size);
    line-height: 1.65;
    font-weight: 500;
}

.voice-clone-meter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--stroke));
}

.voice-clone-meter {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 1.1rem;
    flex: 1 1 auto;
    min-width: 4.5rem;
    max-width: 7rem;
}

.voice-clone-meter-bar {
    flex: 1 1 0;
    min-width: 3px;
    height: 35%;
    border-radius: 2px;
    background: color-mix(in srgb, var(--brand) 18%, var(--stroke));
    transition: height 0.06s ease, background-color 0.08s ease;
}

.voice-clone-meter-bar.is-lit {
    background: var(--brand);
}

.voice-clone-meter-panel.is-live .voice-clone-meter-bar.is-lit {
    background: #5b8f4a;
}

.voice-clone-meter-panel.is-low .voice-clone-meter-bar.is-lit {
    background: #c9a227;
}

.voice-clone-mic-warn {
    margin: 0;
    width: 100%;
    font-size: var(--ll-type-micro-size);
    font-weight: 600;
    color: var(--danger, #dc2626);
}

.voice-clone-mic-warn.is-flashing {
    animation: voice-clone-mic-flash 0.85s ease-in-out infinite;
}

@keyframes voice-clone-mic-flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.voice-clone-guided-phase {
    margin: 0;
    min-height: 1.25rem;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    color: var(--text-muted);
}

.voice-clone-guided-actions,
.voice-clone-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.voice-clone-record-toggle.is-recording {
    color: var(--danger, #dc2626);
    border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, var(--stroke));
    background: color-mix(in srgb, var(--danger, #dc2626) 6%, transparent);
}

.voice-clone-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
    cursor: pointer;
}

.voice-clone-consent input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.voice-clone-tips-link,
.voice-clone-retake-link {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--brand);
    text-decoration: underline;
    cursor: pointer;
}

.voice-clone-session-start {
    align-self: center;
}

.voice-clone-guided--idle .voice-clone-tips-link {
    align-self: center;
}

.voice-clone-guided > .voice-clone-tips-link {
    align-self: center;
}

/* ---- public/style/features/capture-media.css ---- */
/* Feature: capture-media.css */
.upload-media-actions-menu__item,
.upload-media-actions-menu__item.upload-media-delete {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    font: inherit;
    font-size: var(--ll-type-body-sm-size);
    text-align: left;
    cursor: pointer;
}

.upload-media-actions-menu__item--danger,
.upload-media-actions-menu__item--danger.upload-media-delete {
    color: var(--color-danger-600);
}

.common-card.upload-media-card {
    gap: var(--ll-panel-gap);
}

/* Global `button { max-width: … }` must not cap the Today hero CTA. */
.today-dashboard-card .today-hero-card__primary-action.upload-record-btn {
    max-width: none;
}

.lesson-capture-embedded-inner.upload-media-card {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    gap: 0;
}

/* Staged media → Add to Lesson chooser (full viewport above titlebar/menu) */
.staged-attach-overlay.email-panel-overlay.email-panel-overlay--global-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--lessonlink-z-app-chrome, 1280) + 20);
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    height: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    background: var(--surface-page, var(--surface-card-strong, #0f172a));
}

.staged-attach-overlay.email-panel-overlay.email-panel-overlay--global-modal.is-open {
    display: flex;
}

.staged-attach-overlay > .staged-attach-dialog.ll-surface--sheet-overlay {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface-page, var(--surface-card-strong, #0f172a));
    padding:
        max(var(--ll-space-4), env(safe-area-inset-top, 0px))
        max(var(--ll-space-4), env(safe-area-inset-right, 0px))
        max(var(--ll-space-4), env(safe-area-inset-bottom, 0px))
        max(var(--ll-space-4), env(safe-area-inset-left, 0px));
}

.staged-attach-body {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    min-height: 0;
}

.staged-attach-help,
.staged-attach-section-label,
.staged-attach-empty {
    margin: 0;
}

.staged-attach-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.staged-attach-search {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.staged-attach-new-inline-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.staged-attach-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #94a3b8);
    font-size: var(--ll-type-body-sm-size);
    pointer-events: none;
}

.staged-attach-search__input {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px 12px 40px;
    border: 1px solid color-mix(in srgb, var(--border, #334155) 85%, transparent);
    border-radius: 12px;
    background: var(--surface-elevated, color-mix(in srgb, var(--surface-card, #1e293b) 92%, #fff));
    color: var(--text-primary, #fff);
    font-size: var(--ll-type-body-size, 1rem);
    font-weight: 400;
    line-height: 1.35;
}

.staged-attach-search__input::placeholder {
    color: var(--text-muted, #94a3b8);
}

.staged-attach-search__input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--brand-primary, #2d7a3b) 55%, var(--border, #334155));
}

.staged-attach-search__input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.staged-attach-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.staged-attach-lesson-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'student chevron'
        'title chevron'
        'meta chevron';
    gap: 2px 12px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--border, #334155) 85%, transparent);
    border-radius: 12px;
    background: var(--surface-elevated, color-mix(in srgb, var(--surface-card, #1e293b) 92%, #fff));
    color: var(--text-primary, #fff);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    transition:
        background var(--motion-fast, 120ms) var(--ease-standard, ease),
        border-color var(--motion-fast, 120ms) var(--ease-standard, ease),
        transform var(--motion-fast, 120ms) var(--ease-standard, ease);
}

.staged-attach-lesson-row:hover:not(:disabled),
.staged-attach-lesson-row:focus-visible {
    border-color: color-mix(in srgb, var(--brand-primary, #2d7a3b) 55%, var(--border, #334155));
    background: color-mix(in srgb, var(--brand-primary, #2d7a3b) 10%, var(--surface-elevated, #1e293b));
    outline: none;
    transform: translateY(-1px);
}

.staged-attach-lesson-row:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.staged-attach-lesson-row__student {
    grid-area: student;
    font-size: var(--ll-type-body-size, 1rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary, #fff);
}

.staged-attach-lesson-row__title {
    grid-area: title;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-secondary, #cbd5e1);
}

.staged-attach-lesson-row__meta {
    grid-area: meta;
    font-size: var(--ll-type-caption-size, 0.78rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-muted, #94a3b8);
}

.staged-attach-lesson-row__chevron {
    grid-area: chevron;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #94a3b8);
    font-size: var(--ll-type-body-sm-size);
}

/* ---- public/style/features/home-today.css ---- */
/* Feature: home-today.css */
.student-home-hero {
    margin-bottom: var(--space-4, 16px);
}

.student-home-hero .today-hero-card__copy {
    max-width: none;
}

.student-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4, 16px);
}

.student-home-grid .common-card,
.student-content-shell .common-card {
    min-width: 0;
}

.student-home-grid > .common-card:nth-child(-n + 2) {
    grid-column: 1 / -1;
}

.student-home-instructor,
.student-home-instructor__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-home-instructor {
    justify-content: space-between;
    padding: 8px 0;
}

.student-home-instructor + .student-home-instructor {
    border-top: 1px solid var(--border-color, #e0e0e0);
}

.student-home-instructor__photo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
}

.student-home-instructor__photo--placeholder {
    display: grid;
    place-items: center;
    background: var(--surface-muted, #edf2f2);
}

.student-home-grid h2,
.student-content-shell h2 {
    margin: 0 0 var(--space-3, 12px);
}

.student-content-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    text-decoration: none;
}

button.student-content-row { cursor: pointer; }

@media (max-width: 700px) {
    .student-home-grid { grid-template-columns: minmax(0, 1fr); }
}

.home-panel[data-home-panel-content="today"] .common-card.today-dashboard-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    position: relative;
    /* Pull hero / list up; default common-card padding leaves a tall band above weather. */
    padding: 4px var(--space-4) var(--space-3);
    gap: 8px;
}

/* Instructor Today: keep weather in the hero, larger than the titlebar chip. */
.home-panel[data-home-panel-content="today"] .today-weather-banner--hero {
    flex: 1 1 auto;
    max-width: 100%;
}

.home-panel[data-home-panel-content="today"] .today-weather-banner--hero .today-weather-banner__chip,
.home-panel[data-home-panel-content="today"] .today-weather-banner--hero .today-weather-banner__fallback {
    min-height: 44px;
    padding: 8px 12px;
    gap: 8px;
}

.home-panel[data-home-panel-content="today"] .today-weather-banner--hero .today-weather-day__icon {
    font-size: 1.15rem;
}

.home-panel[data-home-panel-content="today"] .today-weather-banner--hero .today-weather-day__temp,
.home-panel[data-home-panel-content="today"] .today-weather-banner--hero .today-weather-banner__empty {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Instructor Today Start Lesson: coral split CTA (capture accent), not success green. */
.home-panel[data-home-panel-content="today"] .today-hero-card .ll-split-btn.ll-split-btn--capture.today-hero-card__primary-action,
.home-panel[data-home-panel-content="today"] .today-hero-card .today-hero-card__actions .ll-split-btn.ll-split-btn--capture {
    background: var(--accent-capture, #c4564a);
    border-color: var(--accent-capture, #c4564a);
    color: #fff;
    box-shadow: var(--glow-action, 0 10px 26px rgba(196, 86, 74, 0.22));
}

.home-panel[data-home-panel-content="today"] .today-hero-card .ll-split-btn.ll-split-btn--capture.today-hero-card__primary-action:hover,
.home-panel[data-home-panel-content="today"] .today-hero-card .today-hero-card__actions .ll-split-btn.ll-split-btn--capture:hover {
    background: var(--accent-capture-strong, #a84338);
    border-color: var(--accent-capture-strong, #a84338);
    box-shadow: var(--glow-action, 0 10px 26px rgba(196, 86, 74, 0.28));
}

.today-hero-card h2.today-hero-card__statement {
    opacity: 1;
    text-wrap: balance;
    transition: opacity 260ms ease-out;
}

.today-hero-card h2.today-hero-card__statement[data-hero-fade='in'] {
    opacity: 0;
}

/* Breathing room between Today hero CTA and session group headings. */
#today-lessons-list > .today-dashboard-section.today-recent-lessons {
    margin-top: var(--ll-space-3);
}

#today-lessons-list > .today-dashboard-section.today-recent-lessons + .today-dashboard-section.today-recent-lessons {
    margin-top: var(--ll-space-4);
}

#today-lessons-list .today-panel-group {
    margin-bottom: 0;
}

#today-lessons-list .today-panel-group > .sessions-hub-group__summary.today-dashboard-section__header {
    padding: 0;
    margin: 0;
}

#today-lessons-list .today-panel-group .today-dashboard-section__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    color: var(--text-primary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

#today-lessons-list .today-dashboard-section--collapsible {
    gap: 0;
}

.today-lesson-swipe-delete,
button.today-lesson-swipe-delete.ll-btn.ll-btn--outline.ll-btn--danger {
    display: none !important;
}

@media (max-width: 640px) {
    .home-panel[data-home-panel-content="today"] .common-card.today-dashboard-card {
        gap: 6px;
    }

    .home-panel[data-home-panel-content="today"] #today-lessons-list,
    .home-panel[data-home-panel-content="today"] .today-recent-lessons__grid {
        gap: 6px;
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card {
        column-gap: 8px;
        row-gap: 2px;
        padding: 8px 10px 8px 12px;
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__body {
        gap: 1px;
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__schedule-line {
        gap: 8px;
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__detail-line .today-recent-lesson-card__status {
        gap: 10px;
        width: auto;
        max-width: 100%;
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__schedule-line .today-recent-lesson-card__time {
        font-size: max(var(--ll-type-meta-size), clamp(0.7rem, 0.58rem + 0.55vw, 0.78rem));
        line-height: var(--ll-type-meta-line);
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__schedule-line .today-recent-lesson-card__kind {
        font-size: max(var(--ll-type-micro-size), clamp(0.58rem, 0.5rem + 0.45vw, 0.66rem));
        padding: 1px 5px;
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__title {
        font-size: max(var(--ll-type-heading-size), clamp(0.82rem, 0.72rem + 0.7vw, 0.92rem));
        line-height: var(--ll-type-heading-line);
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__meta {
        font-size: max(var(--ll-type-body-sm-size), clamp(0.72rem, 0.64rem + 0.5vw, 0.8rem));
        line-height: var(--ll-type-body-sm-line);
    }

    .home-panel[data-home-panel-content="today"] .today-recent-lesson-card__detail-line {
        gap: 5px;
    }
}

/* ---- public/style/features/playbook.css ---- */
/* Feature: playbook.css — Playbook home panel + stack editors (system, practice, AI helper) */

/* Section headers — match Today dashboard meta labels */
.home-panel[data-home-panel-content="playbook"] .today-dashboard-section__header h3,
.home-panel[data-home-panel-content="playbook"] .today-dashboard-section__header .today-dashboard-section__title {
    margin: 0;
    text-align: left;
    color: var(--text-primary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}


/* Section tabs — reuse session workflow segmented control (lesson-workspace.css) */
.playbook-main-area .playbook-section-tabs-chrome.lesson-workspace-workflow-chrome {
    margin: 0;
    padding: 0;
}

.playbook-main-area .playbook-section-tabs-chrome .lesson-workspace-tabs {
    margin-bottom: 0;
}


/* Playbook panel scroll — hidden scrollbars (wheel / trackpad / keyboard still work). */
.home-panel[data-home-panel-content="playbook"]:not([hidden]) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-panel[data-home-panel-content="playbook"]:not([hidden])::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.view-root:has(.home-panel[data-home-panel-content="playbook"]:not([hidden])) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.view-root:has(.home-panel[data-home-panel-content="playbook"]:not([hidden]))::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Playbook panel: scroll inside the screen body — flex min-height:0 on ll-surface__body
   clips content when the panel does not grow with the list. */
.home-panel[data-home-panel-content="playbook"] > .ll-surface--screen-top > .ll-surface__body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}



.home-panel[data-home-panel-content="playbook"] > .ll-surface--screen-top > .ll-surface__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.playbook-main-area {
    display: grid;
    gap: var(--ll-space-2);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.playbook-main-area--loading {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.playbook-loading-line {
    margin: 0;
    font-size: var(--ll-type-body-size);
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-primary));
    letter-spacing: 0.01em;
}

.playbook-ideas {
    display: grid;
    gap: var(--ll-space-3);
}

/* Composer */
.playbook-composer-atrium__field {
    display: block;
    margin: 0;
}

.playbook-composer-atrium__editor {
    position: relative;
    width: 100%;
    min-width: 0;
}

.playbook-composer-textarea.email-input {
    min-height: 96px;
    padding: 10px 48px 10px 12px;
    font-size: var(--ll-type-body-size);
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.playbook-composer-atrium__mic {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    color: var(--text-muted, var(--muted));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ll-type-body-sm-size);
    transition:
        color 140ms ease,
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.playbook-composer-atrium__mic:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.08);
}

.playbook-composer-atrium__mic:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.playbook-composer-atrium__mic.is-listening {
    color: var(--brand, #0d9488);
    border-color: var(--brand, #0d9488);
    background: var(--brand-soft);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.playbook-composer-atrium__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}


/* AI whispers */
.playbook-ai-whisper-stack {
    display: grid;
    gap: 10px;
    padding: 2px 2px 0;
}

.playbook-ai-whisper {
    display: grid;
    gap: 6px;
    padding: 0 2px;
}

.playbook-ai-whisper__line {
    margin: 0;
    font-size: var(--ll-type-body-size);
    line-height: 1.55;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
    font-weight: 400;
}

.playbook-ai-whisper__message {
    font-weight: 400;
}

.playbook-ai-whisper__mark {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: var(--ll-type-micro-size);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--primary-strong) 70%, var(--text-secondary));
    background: color-mix(in srgb, var(--primary-strong) 10%, transparent);
    vertical-align: 0.1em;
}

.playbook-ai-whisper__detail {
    display: block;
    margin-top: 4px;
    font-size: var(--ll-type-body-size);
    font-style: italic;
    color: color-mix(in srgb, var(--text-secondary) 95%, var(--text-primary));
}

.playbook-ai-whisper__link {
    justify-self: start;
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--ll-type-body-size);
    font-weight: 500;
    color: color-mix(in srgb, var(--primary-strong) 65%, var(--text-secondary));
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}

.playbook-ai-whisper__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.playbook-ai-whisper__head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.playbook-ai-whisper__head .playbook-ai-whisper__line {
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-ai-whisper__dismiss {
    flex-shrink: 0;
    margin-top: -2px;
}

.playbook-ai-hints-block {
    display: grid;
    gap: 6px;
    padding: 0 2px 4px;
}

.playbook-ai-hints-block__foot {
    padding: 0 2px 4px;
}

.playbook-ai-hints-block__foot--solo {
    padding-top: 4px;
}

/* Editorial sections */
.playbook-editorial-section {
    display: grid;
    gap: 10px;
}

.playbook-editorial-section--dim {
    opacity: 0.92;
}

.playbook-editorial-section__head {
    display: grid;
    gap: 3px;
}

.playbook-editorial-section__head--flush {
    margin-bottom: 2px;
}

.playbook-editorial-section__title {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: color-mix(in srgb, var(--text-primary) 96%, transparent);
    text-transform: none;
}

.playbook-editorial-section__sub {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.5;
    color: color-mix(in srgb, var(--text-secondary) 94%, var(--text-primary));
    max-width: 40rem;
}

/* Thought stream */
.playbook-thought-stream {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 25%, transparent);
}

.playbook-thought-stream__item {
    padding: var(--ll-list-row-padding-y) var(--ll-space-1) var(--ll-list-row-padding-y);
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
    transition: transform 140ms ease, border-color 140ms ease;
}

.playbook-thought-stream__item:hover {
    border-bottom-color: rgba(63, 168, 90, 0.35);
}

.playbook-thought-stream__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.playbook-thought-stream__body {
    margin: 0 0 4px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
    letter-spacing: normal;
    color: color-mix(in srgb, var(--text-primary) 97%, transparent);
}

.playbook-thought-stream__actions {
    flex-shrink: 0;
    align-self: flex-start;
}

.playbook-thought-stream__item:has(.today-row-actions-menu[open]) {
    position: relative;
    z-index: 2;
}

.playbook-thought-stream__actions .today-row-actions-menu__toggle[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.playbook-thought-stream__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.playbook-thought-stream__edit-field {
    display: block;
    margin: 0;
}

.playbook-thought-stream__edit-input {
    width: 100%;
    box-sizing: border-box;
}

.playbook-thought-stream__item--editing {
    padding-top: 12px;
    padding-bottom: 12px;
}

.playbook-thought-stream__when {
    display: block;
    font-size: var(--ll-type-label-size);
    font-weight: 400;
    font-style: normal;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    letter-spacing: 0.02em;
}

.playbook-thought-stream__empty {
    margin: 0;
    padding: 12px 6px 6px;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.55;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    font-weight: 400;
}

.playbook-grouping-whisper-stack {
    display: grid;
    gap: 8px;
}

.playbook-grouping-whisper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: baseline;
    padding: 4px 2px;
    font-size: var(--ll-type-body-size);
    line-height: 1.45;
}

.playbook-grouping-whisper__title {
    font-weight: 600;
    color: color-mix(in srgb, var(--text-primary) 92%, transparent);
    letter-spacing: -0.02em;
}

.playbook-grouping-whisper__hint {
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
}

.playbook-grouping-whisper--with-dismiss {
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 18%, transparent);
    background: color-mix(in srgb, #000 6%, transparent);
}

.playbook-grouping-whisper__text {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 4px;
}

.playbook-grouping-whisper--with-dismiss .playbook-grouping-whisper__title {
    display: block;
}

.playbook-grouping-whisper--with-dismiss .playbook-grouping-whisper__hint {
    display: block;
}

.playbook-grouping-whisper__dismiss {
    flex-shrink: 0;
    margin-top: -2px;
}

.playbook-theme-ledger {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.65;
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-primary));
    letter-spacing: -0.01em;
}

.playbook-theme-ledger span {
    margin-right: 6px;
}

.playbook-theme-ledger span::after {
    content: " · ";
    color: color-mix(in srgb, var(--text-secondary) 45%, transparent);
}

.playbook-theme-ledger span:last-child::after {
    content: "";
}

.playbook-theme-ledger--editable {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.playbook-theme-ledger--editable>span {
    margin-right: 0;
}

.playbook-theme-ledger--editable>span::after {
    content: none;
}

.playbook-theme-ledger__chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.35;
    font-weight: 500;
    color: color-mix(in srgb, var(--text-primary) 94%, transparent);
    background: color-mix(in srgb, #000 14%, var(--surface-card-strong));
    border: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-theme-ledger__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playbook-theme-ledger__dismiss {
    flex-shrink: 0;
}

/* Systems — Lessons/Contacts group chrome (one shared border, row dividers) */
.playbook-systems {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.playbook-system-rill-stack.directory-dashboard-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.playbook-system-rill.contact-row {
    flex-wrap: wrap;
    align-items: stretch;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--stroke);
    background: transparent;
    padding-left: 4px;
    padding-right: 8px;
}

.playbook-system-rill.contact-row:last-child {
    border-bottom: 0;
}

.playbook-system-rill.contact-row:hover,
.playbook-system-rill.contact-row:has(.today-row-actions-menu[open]) {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 6%, transparent);
}

.playbook-system-rill:has(.today-row-actions-menu[open]) {
    position: relative;
    z-index: 2;
    overflow: visible;
}

.directory-dashboard-group:has(.playbook-system-rill .today-row-actions-menu[open]) {
    overflow: visible;
}

.playbook-system-rill__head {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

.playbook-system-rill__face,
.playbook-system-rill__open {
    /* Full-width row: global `button { max-width: 180px }` otherwise shrinks this control. */
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.playbook-system-rill__menu {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.playbook-system-rill__chev {
    flex-shrink: 0;
    align-self: center;
    max-width: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
    color: var(--ll-disclosure-chevron-color);
    cursor: pointer;
    font: inherit;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.playbook-system-rill.is-expanded .playbook-system-rill__chev {
    opacity: var(--ll-disclosure-accordion-chevron-expanded-opacity, 0.16);
}

.playbook-system-rill.is-expanded .playbook-system-rill__chev i {
    transform: rotate(180deg);
}

.playbook-system-rill__drawer {
    flex: 1 0 100%;
    width: 100%;
    padding: 0 4px 8px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 20%, transparent);
}

.playbook-system-drawer__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding-top: 10px;
}

.playbook-panel-toolbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    margin-bottom: 8px;
}

.playbook-panel-toolbar .playbook-panel-search-mount {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.home-panel[data-home-panel-content="playbook"] .playbook-panel-toolbar .hub-toolbar-new-btn {
    flex: 0 0 auto;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin-left: 0;
    min-height: 42px;
    height: auto;
}

.playbook-systems__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.playbook-systems__head-text {
    flex: 1 1 220px;
    min-width: 0;
}

.playbook-systems__head .ll-btn.ll-btn--text.ll-btn--text-accent {
    flex-shrink: 0;
    align-self: flex-start;
}



.playbook-system-editor-overlay {
    --playbook-system-editor-top-inset: max(6px, calc(env(safe-area-inset-top, 0px) + 58px));
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 14, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
        var(--playbook-system-editor-top-inset)
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
}

.playbook-system-editor {
    width: min(640px, 100%);
    max-width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    min-width: 0;
    margin-top: 0;
    align-self: flex-start;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 28%, transparent);
    background: var(--surface-card-strong);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: min(calc(100dvh - var(--playbook-system-editor-top-inset) - max(6px, env(safe-area-inset-bottom, 0px)) - 12px), 900px);
}

.playbook-system-editor__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-system-editor__head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-system-editor__head .ll-surface__title,
.playbook-system-editor__head h3 {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.playbook-system-editor__head .ll-surface__subtitle,
.playbook-system-editor__head-subtitle {
    margin: 3px 0 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-system-editor__body {
    padding: var(--ll-panel-padding-y) var(--ll-panel-padding-x);
    overflow-y: auto;
    display: grid;
    gap: var(--ll-space-2);
}

.playbook-system-editor__body textarea[rows="1"] {
    min-height: 2.65rem;
    resize: none;
}

.playbook-system-editor__ai-assist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: -2px;
}

.playbook-system-editor__ai-status {
    margin: 0;
    color: var(--text-muted, #6b7280);
    font: var(--ll-type-caption, 400 0.8125rem/1.35 system-ui, sans-serif);
}

.playbook-system-editor__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--ll-panel-padding-y) var(--ll-panel-padding-x);
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-system-editor__foot-left,
.playbook-system-editor__foot-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.playbook-system-drawer__grid {
    display: grid;
    gap: 10px;
    padding-top: 10px;
}

@media (min-width: 640px) {
    .playbook-system-drawer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.playbook-system-drawer__label {
    display: block;
    margin: 0 0 8px;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.playbook-system-drawer__block ul {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 6px;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-system-rill__thread {
    margin: 18px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.5;
    font-weight: 400;
    background: color-mix(in srgb, #000 18%, var(--surface-card-strong));
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.playbook-system-rill__thread span {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ll-type-micro-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: color-mix(in srgb, var(--text-secondary) 75%, var(--text-primary));
}

.playbook-ai-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.playbook-ai-chip--ghost {
    min-height: var(--ll-touch-target-compact);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--border-subtle) 35%, transparent);
    padding: 5px 10px;
    font-size: var(--ll-type-label-size);
    font-weight: 500;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.playbook-ai-chip--ghost:hover {
    border-color: color-mix(in srgb, var(--border-subtle) 55%, transparent);
    color: var(--text-primary);
}

.playbook-onboarding--journal {
    padding: 12px 8px 20px;
    max-width: 480px;
    margin-inline: auto;
    text-align: center;
}

.playbook-onboarding--journal .playbook-onboarding__hero h2 {
    margin: 8px 0 0;
    font-size: var(--ll-type-display-size);
    font-weight: 600;
    letter-spacing: -0.04em;
}

.playbook-onboarding--journal .playbook-onboarding__hero p {
    margin: 8px 0 0;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
    line-height: 1.55;
    font-size: var(--ll-type-body-size);
    font-weight: 400;
}

.playbook-onboarding__solo {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.playbook-onboarding__eyebrow {
    font-size: var(--ll-type-label-size);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    margin: 0;
}

.playbook-inline-alert {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 30%, transparent);
    background: color-mix(in srgb, #92400e 12%, var(--surface-card-strong));
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.playbook-inline-alert p {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
}

.playbook-ai-helper {
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 28%, transparent);
    background: color-mix(in srgb, #000 16%, var(--surface-card-strong));
    padding: 12px 14px;
    display: grid;
    gap: 10px;
}

.playbook-ai-helper__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-ai-helper__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
}

.playbook-ai-helper--inline .playbook-ai-helper__head,
.playbook-ai-helper--inline .playbook-ai-helper__body {
    padding-inline: 0;
}

.playbook-ai-helper--modal.ll-surface {
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: min(calc(100dvh - var(--dialog-top-offset) - 24px), 720px);
}

.playbook-ai-helper--modal {
    margin-top: 8px;
}

.playbook-ai-helper .ll-surface__title,
.playbook-ai-helper h3 {
    margin: 0;
    font-size: var(--ll-type-heading-size);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.playbook-ai-helper__lede {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
    line-height: 1.45;
}

.playbook-ai-helper .ll-surface__title,
.playbook-ai-helper h3,
.playbook-ai-helper p,
.playbook-ai-helper__status {
    margin: 0;
}

.playbook-ai-helper__status {
    font-size: var(--ll-type-body-size);
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-primary));
}

.playbook-ai-helper__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.playbook-ai-helper__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

.playbook-field {
    display: grid;
    gap: 8px;
}

.playbook-field--minimal>span {
    font-size: var(--ll-type-label-size);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    text-transform: none;
}

.playbook-input,
.playbook-textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 35%, transparent);
    padding: 10px 12px;
    font: inherit;
    background: color-mix(in srgb, #000 18%, var(--surface-card-strong));
    color: var(--text-primary);
}

.playbook-textarea--soft {
    min-height: 0;
    resize: vertical;
}

.playbook-textarea--compact {
    min-height: 0;
    resize: vertical;
}

.playbook-inline-icon {
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
}

.playbook-inline-icon:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, #fff 5%, transparent);
}

.playbook-ai-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 14, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--dialog-top-offset) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    overflow-y: auto;
}

.playbook-ai-modal {
    width: min(720px, 100%);
    min-width: 0;
    max-width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    margin-top: 8px;
    max-height: min(calc(100dvh - var(--dialog-top-offset) - 24px), 900px);
}

@keyframes playbook-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767px) {

    .playbook-ai-modal-overlay {
        align-items: center;
        padding:
            var(--dialog-top-offset) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    .playbook-system-editor-overlay {
        align-items: flex-start;
    }

    .playbook-ai-modal {
        margin-top: 0;
        max-height: calc(100dvh - var(--dialog-top-offset) - max(10px, env(safe-area-inset-bottom)) - 12px);
    }

    .playbook-system-editor {
        margin-top: 0;
        max-height: min(calc(100dvh - var(--playbook-system-editor-top-inset) - max(10px, env(safe-area-inset-bottom)) - 12px), 900px);
    }

    .playbook-composer-textarea.email-input {
        min-height: 88px;
        padding: 10px 44px 10px 12px;
    }

    .playbook-onboarding__solo {
        flex-direction: column;
    }
}

/* Stack editors — transient stack geometry */
.ll-stack-shell__body-inner:has(.playbook-system-editor.ll-lesson-transient-in-stack) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ll-stack-shell__content > .playbook-system-editor.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .playbook-ai-modal.ll-lesson-transient-in-stack {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="playbook-system-editor"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-system-editor"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="playbook-system-editor"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="playbook-practice-editor"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-practice-editor"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="playbook-practice-editor"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="playbook-ai-helper"] .playbook-ai-helper__lede {
    display: none !important;
}

.ll-stack-shell[data-ll-stack-id="playbook-ai-helper"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="playbook-ai-helper"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="playbook-ai-helper"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell__content > .playbook-system-editor.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .playbook-system-editor.ll-lesson-transient-in-stack .playbook-system-editor__body,
.ll-stack-shell__content > .playbook-system-editor.ll-lesson-transient-in-stack .playbook-system-editor__foot {
    padding-inline: 0;
}

.ll-stack-shell__content > .playbook-ai-modal.ll-lesson-transient-in-stack,
.ll-stack-shell__content > .playbook-ai-helper--modal.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .playbook-ai-modal.ll-lesson-transient-in-stack .playbook-ai-helper__body,
.ll-stack-shell__content > .playbook-ai-helper--modal.ll-lesson-transient-in-stack .playbook-ai-helper__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-inline: 0;
    padding-block: 6px 8px;
}

.ll-stack-shell__content > .playbook-system-editor.ll-lesson-transient-in-stack .playbook-system-editor__body {
    padding-block: 6px 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.ll-stack-shell__content > .playbook-system-editor.ll-lesson-transient-in-stack .playbook-system-editor__foot {
    padding-block: 8px 6px;
    flex-shrink: 0;
}

.ll-stack-shell__content > .playbook-practice-editor.ll-lesson-transient-in-stack {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ll-stack-shell__content > .playbook-practice-editor.ll-lesson-transient-in-stack .playbook-practice-editor__body,
.ll-stack-shell__content > .playbook-practice-editor.ll-lesson-transient-in-stack .playbook-practice-editor__foot {
    padding-inline: 0;
}

.ll-stack-shell__content > .playbook-practice-editor.ll-lesson-transient-in-stack .playbook-practice-editor__body {
    padding-block: 6px 8px;
    flex: 1 1 auto;
    min-height: 0;
}

.ll-stack-shell__content > .playbook-practice-editor.ll-lesson-transient-in-stack .playbook-practice-editor__foot {
    padding-block: 8px 6px;
    flex-shrink: 0;
}

.ll-stack-shell[data-ll-stack-id="playbook-system-editor"] .ll-stack-shell__topbar.ll-header-bar--centered-title > .ll-surface__title,
.ll-stack-shell[data-ll-stack-id="playbook-practice-editor"] .ll-stack-shell__topbar.ll-header-bar--centered-title > .ll-surface__title,
.ll-stack-shell[data-ll-stack-id="playbook-ai-helper"] .ll-stack-shell__topbar.ll-header-bar--centered-title > .ll-surface__title {
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
}

/* ---- public/style/features/playbook-practices.css ---- */
/* Feature: playbook-practices.css — training system practices (read + editor) */

.playbook-system-practices {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 20%, transparent);
}

.playbook-system-practices__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.playbook-system-practices__title {
    margin: 0;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.playbook-system-practices__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 6px;
    border-radius: 999px;
    font-size: var(--ll-type-micro-size);
    font-weight: 600;
    line-height: 1.4;
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-primary));
    background: color-mix(in srgb, #000 18%, var(--surface-card-strong));
}

.playbook-system-practices__empty,
.playbook-practice-stack__empty {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 78%, var(--text-primary));
}

.playbook-system-practices__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.playbook-system-practices__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #000 16%, var(--surface-card-strong));
    border: 1px solid color-mix(in srgb, var(--border-subtle) 18%, transparent);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.playbook-system-practices__item:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--border-subtle) 38%, transparent);
}

.playbook-system-practices__item-copy {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-system-practices__item-chev,
.playbook-practice-editor-row__chev {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--text-secondary) 65%, transparent);
}

.playbook-system-practices__item-title {
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-primary);
}

.playbook-system-practices__item-meta {
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-practice-stack {
    display: grid;
    gap: 8px;
}

.playbook-practice-row {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #000 16%, var(--surface-card-strong));
    border: 1px solid color-mix(in srgb, var(--border-subtle) 18%, transparent);
}

.playbook-practice-row__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.playbook-practice-row__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-practice-row__title {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
    line-height: 1.4;
}

.playbook-practice-row__system {
    margin: 2px 0 0;
    font-size: var(--ll-type-micro-size);
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-primary));
}

.playbook-practice-row__details {
    margin: 0;
    display: grid;
    gap: 6px;
}

.playbook-practice-row__detail {
    display: grid;
    gap: 2px;
}

.playbook-practice-row__detail dt {
    margin: 0;
    font-size: var(--ll-type-micro-size);
    font-weight: 600;
    color: color-mix(in srgb, var(--text-secondary) 75%, var(--text-primary));
}

.playbook-practice-row__detail dd {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-practice-editor-section {
    display: grid;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-practice-editor-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.playbook-practice-editor-section__title {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.playbook-practice-editor-section__sub {
    margin: 4px 0 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-practice-editor-section__stack {
    display: grid;
    gap: 8px;
}

.playbook-practice-editor-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #000 14%, var(--surface-card-strong));
    border: 1px solid color-mix(in srgb, var(--border-subtle) 18%, transparent);
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.playbook-practice-editor-row:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--border-subtle) 38%, transparent);
}

.playbook-practice-editor-row__copy {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-practice-editor-row__title {
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
    line-height: 1.4;
}

.playbook-practice-editor-row__meta {
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-practice-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--lessonlink-z-modal-global, 1250) + 3);
    background: rgba(4, 8, 14, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
        var(--dialog-top-offset, 0)
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
}

.playbook-practice-editor {
    width: min(640px, 100%);
    max-width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    min-width: 0;
    margin-top: 0;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 28%, transparent);
    background: var(--surface-card-strong);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: min(calc(100dvh - var(--dialog-top-offset) - 24px), 900px);
    min-height: 0;
    align-self: flex-start;
}

.playbook-practice-editor.ll-surface--sheet-overlay > .ll-surface__body {
    flex: 0 1 auto;
    max-height: calc(100dvh - var(--dialog-top-offset, 0px) - 120px);
}

.playbook-practice-editor-overlay.is-open {
    display: flex;
}

.playbook-practice-editor-overlay[hidden] {
    display: none !important;
}

.playbook-practice-editor__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-practice-editor__head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-practice-editor__head .ll-surface__title {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.playbook-practice-editor__head-subtitle {
    margin: 3px 0 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.playbook-practice-editor__body {
    padding: 12px 14px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.playbook-practice-editor__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-practice-editor__foot-left,
.playbook-practice-editor__foot-right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.playbook-practice-editor-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: color-mix(in srgb, #000 12%, var(--surface-card-strong));
    border: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-practice-editor-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.playbook-practice-editor-card__title {
    margin: 0;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
}

.playbook-practice-editor-card__body {
    display: grid;
    gap: 10px;
}

.lesson-assigned-practices {
    display: grid;
    gap: 10px;
}

.lesson-assigned-practices__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lesson-assigned-practices__title {
    margin: 0;
    font-size: var(--ll-type-title-size);
    font-weight: 600;
}

.lesson-assigned-practices__stack {
    display: grid;
    gap: 8px;
}

.lesson-assigned-practices__empty {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-primary));
}

.lesson-assigned-practice-row {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, #000 14%, var(--surface-card-strong));
    border: 1px solid color-mix(in srgb, var(--border-subtle) 18%, transparent);
}

.lesson-assigned-practice-row__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.lesson-assigned-practice-row__title {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
}

.lesson-assigned-practice-row__system {
    margin: 2px 0 0;
    font-size: var(--ll-type-micro-size);
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-primary));
}

@media (max-width: 767px) {
    .playbook-practice-editor-overlay {
        align-items: flex-start;
    }

    .playbook-practice-editor {
        max-height: calc(100dvh - var(--dialog-top-offset, 0px) - max(10px, env(safe-area-inset-bottom)) - 12px);
    }

    .playbook-practice-editor.ll-surface--sheet-overlay > .ll-surface__body {
        max-height: calc(100dvh - var(--dialog-top-offset, 0px) - max(10px, env(safe-area-inset-bottom)) - 96px);
    }
}

/* Lesson capture — practice picker stack (Upload → Practice; mirrors library picker) */

.lesson-practice-picker-host,
.playbook-library--practice-picker {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    gap: 8px;
}

.lesson-practice-picker__groups {
    display: grid;
    gap: 16px;
}

.lesson-practice-picker__group {
    display: grid;
    gap: 8px;
}

.lesson-practice-picker__group-head {
    display: grid;
    gap: 2px;
}

.lesson-practice-picker__group-title {
    margin: 0;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.lesson-practice-picker__group-tagline {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 400;
    line-height: 1.45;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.lesson-practice-picker__group-list {
    display: grid;
    gap: 6px;
}

.playbook-library-controls--practice-picker {
    grid-template-columns: auto;
}

.summary-assigned-practices {
    display: grid;
    gap: var(--ll-space-3, 0.75rem);
    margin: 0.75rem 0 0;
}

.summary-assigned-practice-card {
    padding: 0.75rem 0.875rem;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
    border-radius: var(--ll-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--surface-elevated) 92%, transparent);
}

.summary-assigned-practice-card__title {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
    line-height: 1.4;
}

.summary-assigned-practice-card__system {
    margin: 0.25rem 0 0.5rem;
    font-size: var(--ll-type-micro-size);
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-primary));
}

.lesson-assigned-practice-view__system {
    margin: 0 0 0.75rem;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 500;
    color: color-mix(in srgb, var(--text-secondary) 85%, var(--text-primary));
}

.lesson-assigned-practice-view__empty {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-secondary);
}

.playbook-practice-system-links {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 24%, transparent);
}

.playbook-practice-drills {
    display: grid;
    gap: 1rem;
    margin-block: 1.25rem;
}

.playbook-practice-drills__head,
.playbook-practice-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.playbook-practice-drills__head h2,
.playbook-practice-drills__head h3,
.playbook-practice-drills__head h4 {
    margin: 0;
}

.playbook-practice-drill {
    display: grid;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid var(--border-color, #d8d8d8);
    border-radius: .75rem;
}

.playbook-practice-drill__ask {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
}

.playbook-practice-step > input {
    flex: 1;
    min-width: 0;
}

.playbook-practice-system-links__title {
    margin: 0 0 0.25rem;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
}

.playbook-practice-system-links__hint,
.playbook-practice-system-links__empty {
    margin: 0 0 0.75rem;
    font-size: var(--ll-type-micro-size);
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.playbook-practice-system-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.playbook-practice-system-links__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ll-type-body-sm-size);
}

.playbook-practices-catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.875rem;
}

.playbook-practices-catalog__filter.is-active {
    color: var(--text-primary);
    font-weight: 600;
}

.playbook-practice-row--catalog {
    display: block;
    width: 100%;
    text-align: left;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 30%, transparent);
    border-radius: var(--ll-radius-md, 0.5rem);
    background: color-mix(in srgb, var(--surface-card-strong) 88%, transparent);
    padding: 0.75rem 0.875rem;
    margin: 0 0 0.5rem;
    cursor: pointer;
}

.playbook-practice-row--catalog .playbook-practice-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.playbook-practice-editor__foot {
    display: flex;
    justify-content: flex-start;
    padding: 0.75rem 1rem 1rem;
}

.playbook-practices-catalog .directory-list-view__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.playbook-practices-catalog .directory-list-view__header .directory-list-view__title {
    flex: 1 1 auto;
    margin: 0;
}

.playbook-practices-catalog .directory-list-view__header .ll-btn {
    margin-left: auto;
}

.playbook-practices-catalog__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.playbook-practices-dashboard {
    margin-top: 0.25rem;
}

.playbook-practices-catalog-row .playbook-practices-catalog-row__open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.playbook-practices-catalog-row .playbook-practices-catalog-row__open:disabled {
    opacity: 0.6;
    cursor: default;
}

.playbook-practices-catalog-row .contact-row-main {
    align-items: flex-start;
}

.playbook-practices-catalog-row .playbook-practices-catalog-row__open {
    min-width: 0;
}

/* Practices list — shared group border like Lessons/Contacts */
.directory-dashboard-group.playbook-practices-catalog__rows {
    gap: 0;
}

.directory-dashboard-group .playbook-practices-catalog-row.contact-row {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--stroke);
    background: transparent;
    padding-left: 4px;
    padding-right: 8px;
}

.directory-dashboard-group .playbook-practices-catalog-row.contact-row:last-child {
    border-bottom: 0;
}

.directory-dashboard-group .playbook-practices-catalog-row.contact-row:hover,
.directory-dashboard-group .playbook-practices-catalog-row.contact-row:has(.today-row-actions-menu[open]) {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 6%, transparent);
}

.playbook-practices-catalog-row .contact-row-name,
.playbook-practices-catalog-row .contact-row-name-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.playbook-practices-catalog-row .contact-row-stats-line {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---- public/style/features/in-app-browser.css ---- */
/* Feature: in-app-browser.css — external link styling */

.ll-external-link,
.ll-in-app-browser-link {
    color: var(--primary, #3fa85a);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}

/* ---- public/style/features/notices.css ---- */
/* Notices — dark, email-like list + detail.
 * Builds on the shared .today-chat-* chrome in shared-misc.css. */

/* --- Filter tabs / Notices label --- */
.notices-filter-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin: 0 4px 6px;
    background: var(--surface-page-accent, #121c26);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.notices-filter-tab {
    flex: 1;
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-weight: var(--ll-type-label-weight, 500);
    font-size: var(--ll-type-body-size);
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease;
}

.notices-filter-tab:hover {
    color: var(--text-primary);
}

.notices-filter-tab.is-active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* --- Unread list rows (Notices + Messages) --- */
.today-chat-conversation-trailing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}

.notices-row-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary, #4da86a);
    color: #fff;
    font-size: var(--ll-type-caption-size, 0.72rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.notice-row.is-unread,
.today-chat-conversation.is-unread {
    position: relative;
    background: color-mix(in srgb, var(--primary, #4da86a) 10%, var(--surface-soft));
    border-color: color-mix(in srgb, var(--primary, #4da86a) 28%, var(--stroke));
}

.notice-row.is-unread::before,
.today-chat-conversation.is-unread:not(.is-active)::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--notice-unread-bar-inset, 7px);
    bottom: var(--notice-unread-bar-inset, 7px);
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--primary, #4da86a);
}

.notice-row.is-unread .today-chat-conversation-title,
.today-chat-conversation.is-unread .today-chat-conversation-title {
    font-weight: var(--ll-type-heading-weight, 600);
    color: var(--text-primary);
}

.notice-row.is-unread .today-chat-conversation-preview,
.today-chat-conversation.is-unread .today-chat-conversation-preview {
    color: var(--text-primary);
}

.notice-row.is-read .today-chat-conversation-title,
.today-chat-conversation.is-read:not(.is-active) .today-chat-conversation-title {
    font-weight: var(--ll-type-label-weight, 500);
    color: var(--text-secondary);
}

.notice-row.is-read .today-chat-conversation-preview,
.today-chat-conversation.is-read:not(.is-active) .today-chat-conversation-preview {
    color: var(--muted);
}

/* Legacy dot — keep for any older markup paths */
.inbox-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    background: var(--primary, #4da86a);
}

/* --- Notice list rows: icon avatar instead of person avatar --- */
.notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 15px;
    background: var(--accent-neutral-soft);
    color: var(--accent-neutral);
    border: 1px solid var(--accent-neutral-border);
}

.notice-icon--summary {
    background: var(--accent-ai-soft);
    color: var(--accent-ai-strong);
    border-color: var(--accent-ai-border);
}

.notice-icon--media {
    background: var(--accent-info-soft);
    color: var(--accent-info-strong);
    border-color: var(--accent-info-border);
}

.notice-icon--lesson {
    background: var(--accent-success-soft);
    color: var(--accent-success-strong);
    border-color: var(--accent-success-border);
}

.notice-icon--practice {
    background: var(--accent-capture-soft);
    color: var(--accent-capture);
    border-color: var(--accent-capture-border);
}

.notice-icon--request {
    background: var(--accent-share-soft);
    color: var(--accent-share-strong);
    border-color: var(--accent-share-border);
}

.notice-icon--reminder {
    background: var(--accent-ai-soft);
    color: var(--accent-ai-strong);
    border-color: var(--accent-ai-border);
}

.notice-icon--caddie {
    background: var(--accent-ai-soft);
    color: var(--accent-ai-strong);
    border-color: var(--accent-ai-border);
}

.notice-icon--student {
    background: var(--accent-success-soft);
    color: var(--accent-success-strong);
    border-color: var(--accent-success-border);
}

/* --- Inline notice rows (no detail page) --- */
.notice-row-item {
    outline: none;
}

.notice-row-item:focus-visible .notice-row {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.notice-row {
    --notice-row-pad-y: var(--ll-list-row-padding-y);
    --notice-row-gap: var(--ll-list-gap);
    --notice-icon-size: 36px;
    --notice-icon-font: 15px;
    --notice-delete-size: 36px;
    --notice-unread-bar-inset: 7px;
    --notice-action-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
    align-items: flex-start;
    cursor: pointer;
    gap: var(--notice-row-gap);
    padding-top: var(--notice-row-pad-y);
    padding-bottom: var(--notice-row-pad-y);
}

.notice-row .notice-icon {
    width: var(--notice-icon-size);
    height: var(--notice-icon-size);
    font-size: var(--notice-icon-font);
}

.notice-row-copy {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-1);
    min-width: 0;
}

.notice-row-heading {
    display: flex;
    align-items: center;
    gap: var(--ll-space-2);
    min-width: 0;
    flex-wrap: wrap;
}

.notice-row-heading .today-chat-conversation-title {
    flex: 1 1 auto;
    min-width: 0;
}

.notice-row-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ll-space-2);
    min-width: 0;
}

.notice-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ll-space-2);
    margin-top: 0;
    width: 100%;
}

.notice-row-actions .notice-action--go-link {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    min-height: 0;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--primary-strong, #3fa85a) 55%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
    font-weight: var(--ll-type-label-weight);
}

.notice-row-actions .notice-action--go-link:hover:not(:disabled):not([aria-disabled="true"]),
.notice-row-actions .notice-action--go-link:focus-visible {
    background: color-mix(in srgb, var(--primary-strong, #3fa85a) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary-strong, #3fa85a) 80%, transparent);
    text-decoration: none;
    outline: none;
}

.notice-row-actions .notice-action--go-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-strong, #3fa85a) 55%, transparent);
    outline-offset: 2px;
}

.notice-row-delete {
    flex-shrink: 0;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--notice-delete-size);
    height: var(--notice-delete-size);
    margin-top: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.notice-row-delete:hover,
.notice-row-delete:focus-visible {
    opacity: 1;
    color: var(--text-primary);
    border-color: var(--stroke);
    background: var(--surface-soft);
}

.notice-row-delete:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* --- Thread layout: flex column, composer pinned (no overlay) --- */
.today-chat-iphone > .today-chat-thread-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
    padding: var(--ll-space-2);
    box-sizing: border-box;
}

.today-chat-thread-view .today-chat-thread-top {
    flex: 0 0 auto;
}

.today-chat-thread-view .today-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
}

.today-chat-thread-view .today-chat-composer {
    flex: 0 0 auto;
    margin-top: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--surface-soft);
    box-shadow: none;
}

.today-chat-thread-view .today-chat-input {
    min-height: 38px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    padding-inline: 12px;
}

.today-chat-thread-view .today-chat-input:focus {
    box-shadow: 0 0 0 2px rgba(45, 122, 59, 0.28);
}

/* --- Thread messages: email-like rows (plain text, no chat bubbles) --- */
.today-chat-thread-view .today-chat-message {
    width: 100%;
    margin: 0;
    padding: 14px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.today-chat-thread-view .today-chat-message + .today-chat-message {
    border-top: 1px solid var(--border-subtle);
}

.today-chat-thread-view .today-chat-message-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.today-chat-thread-view .today-chat-message-avatar {
    flex: 0 0 auto;
}

.today-chat-thread-view .today-chat-message-row > div:last-child {
    min-width: 0;
    flex: 1 1 auto;
}

.today-chat-thread-view .today-chat-message-meta {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
}

.today-chat-thread-view .today-chat-message-body {
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 4px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    line-height: 1.55;
    white-space: pre-wrap;
}

.today-chat-thread-view .today-chat-message-body:last-child {
    margin-bottom: 0;
}

.today-chat-thread-view .today-chat-message.is-current-user .today-chat-message-row,
.today-chat-thread-view .today-chat-message.is-current-user .today-chat-message-row > div:last-child {
    flex-direction: row;
    align-items: flex-start;
}

.today-chat-thread-view .today-chat-message.is-current-user .today-chat-message-body,
.today-chat-thread-view .today-chat-message.is-current-user .today-chat-message-meta {
    color: inherit;
}

/* Phone + Phone viewport sim: pack the card vertically. */
@media (max-width: 767.98px) {
    .notice-row {
        --notice-row-pad-y: var(--ll-space-1);
        --notice-row-gap: var(--ll-space-1);
        --notice-icon-size: var(--ll-space-8);
        --notice-icon-font: 13px;
        --notice-delete-size: var(--ll-space-8);
        --notice-unread-bar-inset: var(--ll-space-1);
        --notice-action-shadow: none;
    }
}

html.ll-vp-sim--phone .notice-row {
    --notice-row-pad-y: var(--ll-space-1);
    --notice-row-gap: var(--ll-space-1);
    --notice-icon-size: var(--ll-space-8);
    --notice-icon-font: 13px;
    --notice-delete-size: var(--ll-space-8);
    --notice-unread-bar-inset: var(--ll-space-1);
    --notice-action-shadow: none;
}

@media (max-width: 767.98px) {
    .notice-row-footer {
        gap: var(--ll-space-1);
    }

    .notice-row-actions .notice-action--go-link {
        min-height: var(--ll-space-8);
        padding: 6px 10px;
    }

    .notice-row .today-chat-conversation-preview {
        line-height: var(--ll-line-list, 1.2);
    }
}

html.ll-vp-sim--phone .notice-row-footer {
    gap: var(--ll-space-1);
}

html.ll-vp-sim--phone .notice-row-actions .notice-action--go-link {
    min-height: var(--ll-space-8);
    padding: 6px 10px;
}

html.ll-vp-sim--phone .notice-row .today-chat-conversation-preview {
    line-height: var(--ll-line-list, 1.2);
}

/* ---- public/style/features/auth-onboarding.css ---- */
/* Feature: auth-onboarding.css */
/* Login / required-profile gates: pin form near the top and stop touch rubber-banding. */

html:has(.auth-screen),
html:has(.auth-screen) body {
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

.view-root:has(> .auth-screen),
.view-root > .auth-screen.today-shell {
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    touch-action: manipulation;
}

.auth-screen.ll-surface--gate-fullscreen {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.auth-screen.ll-surface--gate-fullscreen > .ll-surface__header {
    flex-shrink: 0;
    padding-top: 0;
    padding-bottom: 4px;
    min-height: 0;
}

.auth-screen.ll-surface--gate-fullscreen > .ll-surface__header .ll-surface__title {
    font-size: var(--ll-type-display-size);
    line-height: 1.2;
}

.auth-screen.ll-surface--gate-fullscreen > .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
    justify-content: flex-start;
    padding: 4px 8px 8px;
}

.auth-screen .common-card {
    gap: 8px;
    padding: 10px 10px 12px;
    flex-shrink: 0;
}

@media (max-width: 400px) {
    .auth-screen .common-card {
        padding: 8px 8px 10px;
    }
}

.auth-screen .login-verify-row {
    margin-top: 10px;
}

.auth-screen .login-verify-otp-button:disabled,
.auth-screen .login-verify-row .ll-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.auth-screen .otp-code-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 8px;
}

.auth-screen .otp-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 6px;
    margin-bottom: 8px;
    min-width: 0;
    width: 100%;
}

.auth-screen .otp-code-row .otp-code-group {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: max-content;
    margin-top: 0;
    margin-bottom: 0;
}

.auth-screen .otp-digit-input {
    box-sizing: border-box;
    width: 2.75rem;
    min-width: 2.75rem;
    max-width: 2.75rem;
    flex: 0 0 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    text-align: center;
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-title-weight);
    /* Light box on dark theme: --ink is a light color, so use explicit dark text */
    background: #fff;
    color: #0f1720;
    color-scheme: light;
    caret-color: #0f1720;
}

.auth-screen .otp-code-row .compact-action {
    box-sizing: border-box;
    height: clamp(48px, 12vw, 58px);
    min-height: clamp(48px, 12vw, 58px);
    min-width: min(100%, 108px);
    padding-left: 16px;
    padding-right: 16px;
    align-self: center;
}

.auth-screen .otp-digit-input:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* ---- public/style/features/auth-entry-choice.css ---- */
/* Feature: auth-entry-choice.css — pre-login account type selection (premium gate) */

.app-shell:has(#app .auth-entry-choice-screen) > header.titlebar {
    display: none !important;
}

.auth-entry-choice-screen.ll-surface--gate-fullscreen {
    background: radial-gradient(120% 80% at 50% -10%, #1a2f4d 0%, #0a1220 42%, #060b14 100%);
    color: #f1f5f9;
    min-height: 100%;
}

.auth-entry-choice-screen.ll-surface--gate-fullscreen > .ll-surface__body {
    align-items: stretch;
    justify-content: flex-start;
    padding: 10px 16px 16px;
}

.auth-entry-choice {
    --auth-entry-gold: #d4a853;
    --auth-entry-gold-strong: #e8bc62;
    --auth-entry-card-bg: rgba(8, 16, 30, 0.72);
    --auth-entry-card-border: rgba(148, 163, 184, 0.28);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 26rem;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.auth-entry-choice__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 4px 0 10px;
    text-align: center;
}

.auth-entry-choice__brand-name {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}

.auth-entry-choice__brand-accent {
    color: var(--auth-entry-gold-strong);
}

.auth-entry-choice__brand-tagline {
    margin: 6px 0 0;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 188, 98, 0.92);
}

.auth-entry-choice__title {
    flex-shrink: 0;
    margin: 0 0 6px;
    text-align: center;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.auth-entry-choice__subtitle {
    margin: 0 0 16px;
    text-align: center;
    color: #7eb6d9;
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
}

.auth-entry-choice__choices {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 10px;
    margin-bottom: 14px;
}

.auth-entry-choice__card {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: 0 40px 0 0;
    overflow: hidden;
    border: 1px solid var(--auth-entry-card-border);
    border-radius: 16px;
    background: var(--auth-entry-card-bg);
    color: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.auth-entry-choice__card:hover:not(:disabled) {
    border-color: rgba(212, 168, 83, 0.55);
}

.auth-entry-choice__card.is-selected {
    border-color: var(--auth-entry-gold-strong);
    box-shadow: 0 0 0 1px var(--auth-entry-gold-strong), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.auth-entry-choice__card--sign-in {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 76px;
    padding: 8px 40px 8px 8px;
    background: rgba(10, 18, 34, 0.55);
}

.auth-entry-choice__check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    border: 1.5px solid var(--auth-entry-gold-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--auth-entry-gold-strong);
    font-size: 0.65rem;
}

.auth-entry-choice__card.is-selected .auth-entry-choice__check {
    display: inline-flex;
}

.auth-entry-choice__media {
    display: flex;
    align-self: stretch;
    overflow: hidden;
    background: #0f172a;
}

.auth-entry-choice__card--sign-in .auth-entry-choice__media {
    align-self: center;
    width: 58px;
    height: 58px;
    border: 2px solid var(--auth-entry-gold-strong);
    border-radius: 999px;
    background: #1a2438;
}

.auth-entry-choice__media-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 72px;
    object-fit: cover;
    object-position: center 20%;
}

.auth-entry-choice__card--sign-in .auth-entry-choice__media-img {
    min-height: 0;
    object-position: 50% 12%;
}

.auth-entry-choice__card--player-plus .auth-entry-choice__media-img {
    object-position: 35% 20%;
}

.auth-entry-choice__card--instructor .auth-entry-choice__media-img {
    object-position: 42% 20%;
}

.auth-entry-choice__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 10px 12px;
    min-width: 0;
}

.auth-entry-choice__card--sign-in .auth-entry-choice__content {
    padding: 4px 10px 4px 12px;
}

.auth-entry-choice__card-title {
    display: block;
    min-width: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}

.auth-entry-choice__card-body {
    display: block;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.3;
}

.auth-entry-choice__footer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.auth-entry-choice__scene {
    min-height: 108px;
    aspect-ratio: 1024 / 341;
    border-radius: 16px;
    overflow: hidden;
    background: url('/images/auth-entry-footer-scene.jpg') center / cover no-repeat;
}

.auth-entry-choice__pillars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.auth-entry-choice__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
    color: var(--auth-entry-gold-strong);
}

.auth-entry-choice__pillar i {
    font-size: 1.05rem;
}

.auth-screen .auth-entry-choice-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 4px 0;
    color: rgba(226, 232, 240, 0.8);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-body-weight, 400);
}

@media (max-height: 700px) {
    .auth-entry-choice__title {
        font-size: 1.4rem;
    }

    .auth-entry-choice__scene {
        min-height: 72px;
    }

    .auth-entry-choice__card,
    .auth-entry-choice__media-img {
        min-height: 64px;
    }
}

@media (min-width: 900px) {
    .auth-entry-choice-screen.ll-surface--gate-fullscreen > .ll-surface__body {
        justify-content: flex-start;
        padding: 20px 24px 28px;
    }

    .auth-entry-choice {
        max-width: 28rem;
        padding: 8px 0 12px;
    }

    .auth-entry-choice__card {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .auth-entry-choice__card--sign-in {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .auth-entry-choice__card--sign-in .auth-entry-choice__media {
        width: 64px;
        height: 64px;
    }

    .auth-entry-choice__title {
        font-size: 1.9rem;
    }

    .auth-entry-choice__scene {
        min-height: 128px;
    }
}

/* ---- public/style/features/auth-signup-profile.css ---- */
/* Feature: auth-signup-profile.css — pre-login student + instructor profile forms */

.app-shell:has(#app .student-signup-profile-screen) > header.titlebar,
.app-shell:has(#app .instructor-signup-profile-screen) > header.titlebar {
    display: none !important;
}

.student-signup-profile-screen.ll-surface--gate-fullscreen,
.instructor-signup-profile-screen.ll-surface--gate-fullscreen {
    background: radial-gradient(120% 80% at 50% -10%, #1a2f4d 0%, #0a1220 42%, #060b14 100%);
    color: #f1f5f9;
}

.student-signup-profile-screen.ll-surface--gate-fullscreen > .ll-surface__body,
.instructor-signup-profile-screen.ll-surface--gate-fullscreen > .ll-surface__body {
    align-items: stretch;
    justify-content: flex-start;
    padding: 4px 12px max(10px, env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-signup-profile {
    --auth-signup-gold: #d4a853;
    --auth-signup-gold-strong: #e8bc62;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 26rem;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.auth-signup-profile__back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--auth-signup-gold-strong);
    cursor: pointer;
}

.auth-signup-profile__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 2px 36px 0;
    text-align: center;
}

.auth-signup-profile__brand-name {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}

.auth-signup-profile__brand-accent {
    color: var(--auth-signup-gold-strong);
}

.auth-signup-profile__brand-tagline {
    margin: 4px 0 8px;
    font-size: 0.54rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 188, 98, 0.92);
}

.auth-signup-profile__portrait {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 3px;
    overflow: hidden;
    border: 2px solid var(--auth-signup-gold-strong);
    border-radius: 999px;
    background: #4d6b38;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.auth-signup-profile__caddie {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 28%;
}

.auth-signup-profile__title {
    flex-shrink: 0;
    margin: 10px 0 2px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: var(--ll-type-title-weight);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.auth-signup-profile__subtitle {
    margin: 0 0 10px;
    text-align: center;
    color: #7eb6d9;
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
}

.auth-signup-profile__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    min-width: 0;
}

.auth-signup-profile__name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.auth-signup-profile .lesson-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
}

.auth-signup-profile .lesson-field > span {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.auth-signup-profile .email-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(8, 16, 30, 0.72);
    color: #f8fafc;
}

.auth-signup-profile .email-input::placeholder {
    color: rgba(148, 163, 184, 0.85);
}

.auth-signup-profile__photo {
    display: block;
    margin: 2px 0 0;
}

.auth-signup-profile__photo-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1.5px dashed var(--auth-signup-gold-strong);
    border-radius: 999px;
    color: var(--auth-signup-gold-strong);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.auth-signup-profile__photo-preview {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 999px;
}

.auth-signup-profile__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.84rem;
    line-height: 1.35;
}

.auth-signup-profile__check input {
    margin-top: 2px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--auth-signup-gold-strong);
}

.auth-signup-profile__check a {
    color: var(--auth-signup-gold-strong);
    font-weight: 600;
    text-decoration: underline;
}

.auth-signup-profile .ll-status-text,
.auth-signup-profile .email-empty-state {
    margin: 0;
    color: #fca5a5;
    font-size: 0.78rem;
    text-align: center;
}

.auth-signup-profile .auth-signup-profile__submit.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    margin-top: 4px;
    min-height: 44px;
    border: none;
    border-radius: 12px;
    color: #1a1208;
    font-weight: 700;
    font-size: 1rem;
    background: linear-gradient(180deg, #f0c96e 0%, #d4a24a 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    text-transform: none;
}

.auth-signup-profile .auth-signup-profile__submit.ll-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, #f6d37a 0%, #e0b056 100%);
    color: #1a1208;
}

.auth-signup-profile__submit-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.auth-signup-profile__signin {
    margin: 10px 0 4px;
    padding: 0;
    text-align: center;
    color: #7eb6d9;
    font-size: 0.88rem;
}

.auth-signup-profile__signin-link {
    display: inline;
    min-height: 0;
    padding: 0;
    color: var(--auth-signup-gold-strong);
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 400px) {
    .student-signup-profile-screen.ll-surface--gate-fullscreen > .ll-surface__body,
    .instructor-signup-profile-screen.ll-surface--gate-fullscreen > .ll-surface__body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auth-signup-profile__name-row {
        gap: 10px;
    }
}

@media (max-height: 760px) {
    .auth-signup-profile__portrait {
        width: 84px;
        height: 84px;
    }

    .auth-signup-profile__title {
        margin-top: 8px;
        font-size: 1.28rem;
    }

    .auth-signup-profile__form {
        gap: 6px;
    }

    .auth-signup-profile .email-input {
        min-height: 38px;
    }
}

@media (max-height: 680px) {
    .auth-signup-profile__brand-tagline {
        margin-bottom: 6px;
    }

    .auth-signup-profile__portrait {
        width: 72px;
        height: 72px;
    }

    .auth-signup-profile__subtitle {
        margin-bottom: 8px;
        font-size: 0.84rem;
    }

    .auth-signup-profile .email-input {
        min-height: 36px;
        padding: 6px 10px;
    }

    .auth-signup-profile__photo-button,
    .auth-signup-profile .auth-signup-profile__submit.ll-btn {
        min-height: 40px;
    }
}

@media (min-width: 900px) {
    .student-signup-profile-screen.ll-surface--gate-fullscreen > .ll-surface__body,
    .instructor-signup-profile-screen.ll-surface--gate-fullscreen > .ll-surface__body {
        justify-content: flex-start;
        padding: 16px 24px 28px;
    }

    .auth-signup-profile {
        max-width: 28rem;
        padding: 8px 0 16px;
    }

    .auth-signup-profile__portrait {
        width: 108px;
        height: 108px;
    }

    .auth-signup-profile__title {
        font-size: 1.7rem;
    }
}

/* ---- public/style/features/auth-game-onboarding.css ---- */
/* Feature: auth-game-onboarding.css — post-auth student game profile gate */

.student-game-onboarding-screen.ll-surface--gate-fullscreen > .ll-surface__body {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 8px 12px;
}

.auth-game-onboarding {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 40rem;
    min-height: 0;
    margin: 0 auto;
    padding: 10px 0 12px;
    border-radius: var(--radius-md, 14px);
    background: var(--bg-card, #fff);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.auth-game-onboarding__intro {
    flex-shrink: 0;
    padding: 0 12px;
    text-align: center;
}

.auth-game-onboarding__title {
    margin: 0 0 8px;
    color: var(--text-heading);
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-title-weight, 700);
    line-height: var(--ll-line-title, 1.25);
}

.auth-game-onboarding__subtitle {
    margin: 0 0 var(--space-6);
    color: var(--text-secondary, #6b7280);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: var(--ll-line-body, 1.45);
}

.auth-game-onboarding__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 12px;
}

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

.auth-game-onboarding__roles {
    margin: 0;
    padding: 0;
    border: 0;
}

.auth-game-onboarding__role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.auth-game-onboarding__role {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 92px;
    padding: 10px 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 14px);
    background: var(--bg-card, #fff);
    color: inherit;
    cursor: pointer;
}

.auth-game-onboarding__role.is-selected {
    border-color: var(--accent-ai);
    box-shadow: 0 0 0 1px var(--accent-ai);
}

.auth-game-onboarding__role-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-ai) 12%, transparent);
    color: var(--accent-ai-strong, var(--accent-ai));
    font-size: 1.1rem;
}

.auth-game-onboarding__role-label {
    color: var(--text-heading);
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.2;
    text-align: center;
}

.auth-game-onboarding__role-check {
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--accent-ai);
    color: var(--bg-card, #fff);
    font-size: 0.625rem;
}

.auth-game-onboarding__role.is-selected .auth-game-onboarding__role-check {
    display: inline-flex;
}

.auth-game-onboarding__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-game-onboarding__field-label {
    color: var(--text-heading);
    font-size: var(--ll-type-label-size, 0.8125rem);
    font-weight: var(--ll-type-label-weight, 600);
}

.auth-game-onboarding__tag-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.auth-game-onboarding__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--accent-ai) 45%, var(--border-subtle));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-ai) 10%, var(--bg-card, #fff));
    color: var(--text-heading);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: var(--ll-type-label-weight, 600);
    cursor: pointer;
}

.auth-game-onboarding__tag.is-selected {
    border-color: var(--accent-ai);
    background: color-mix(in srgb, var(--accent-ai) 18%, var(--bg-card, #fff));
}

.auth-game-onboarding__segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.auth-game-onboarding__segment {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 10px);
    background: var(--bg-card, #fff);
    color: var(--text-heading);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: var(--ll-type-label-weight, 600);
    cursor: pointer;
}

.auth-game-onboarding__segment.is-selected {
    border-color: var(--accent-ai);
    box-shadow: 0 0 0 1px var(--accent-ai);
}

.auth-game-onboarding__instructor.is-hidden {
    display: none;
}

.auth-game-onboarding__search-wrap {
    position: relative;
    display: block;
}

.auth-game-onboarding__search-wrap .fa-magnifying-glass {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--text-secondary, #6b7280);
    pointer-events: none;
}

.auth-game-onboarding__search-input {
    padding-left: 36px;
}

.auth-game-onboarding__hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--text-secondary, #6b7280);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: var(--ll-line-body, 1.4);
}

.auth-game-onboarding__hint.is-connected {
    color: var(--accent-ai-strong, var(--accent-ai));
}

.auth-game-onboarding__hint .fa-check {
    margin-top: 2px;
}

.auth-game-onboarding .auth-game-onboarding__submit.ll-btn {
    flex-shrink: 0;
    margin-top: var(--space-4);
    min-height: 42px;
    color: var(--text-heading);
    background: linear-gradient(90deg, var(--accent-ai-strong), var(--accent-ai));
    border-color: var(--accent-ai);
    box-shadow: none;
    text-transform: none;
}

.auth-game-onboarding__skip-wrap {
    margin: 0;
    text-align: center;
}

.auth-game-onboarding__skip {
    min-height: 0;
    padding: 0;
    color: var(--text-secondary);
    text-decoration: underline;
}

.auth-game-onboarding__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: var(--space-4) 0 0;
    padding: 0 12px 8px;
    color: var(--text-secondary);
    font-size: var(--ll-type-micro-size, 0.6875rem);
}

.auth-game-onboarding__footer a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 380px) {
    .auth-game-onboarding__role-grid {
        grid-template-columns: 1fr;
    }

    .auth-game-onboarding__role {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 0;
        padding: 10px 12px;
    }

    .auth-game-onboarding__role-label {
        text-align: left;
        font-size: var(--ll-type-body-sm-size, 0.875rem);
    }
}

@media (min-width: 900px) {
    .student-game-onboarding-screen.ll-surface--gate-fullscreen > .ll-surface__body {
        justify-content: flex-start;
        padding: 12px 16px 24px;
    }

    .auth-game-onboarding {
        flex: 0 1 auto;
        max-width: 52rem;
        padding: 20px 24px 24px;
    }

    .auth-game-onboarding__intro,
    .auth-game-onboarding__form,
    .auth-game-onboarding__footer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ---- public/style/features/auth-sign-in.css ---- */
/* Feature: auth-sign-in.css — vision merge: premium gate + passwordless OTP */

.app-shell:has(#app .auth-sign-in-screen) > header.titlebar {
    display: none !important;
}

.auth-sign-in-screen.ll-surface--gate-fullscreen {
    background: radial-gradient(120% 80% at 50% -10%, #1a2f4d 0%, #0a1220 42%, #060b14 100%);
    color: #f1f5f9;
}

.auth-sign-in-screen.ll-surface--gate-fullscreen > .ll-surface__body {
    align-items: stretch;
    justify-content: flex-start;
    padding: 8px 10px 12px;
}

.auth-sign-in {
    --auth-sign-in-gold: #d4a853;
    --auth-sign-in-gold-strong: #e8bc62;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    max-width: 28rem;
    min-height: 0;
    margin: 0 auto;
    padding: 0 0 8px;
    background: transparent;
    color: inherit;
    box-shadow: none;
}

.auth-sign-in__back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--auth-sign-in-gold-strong);
    cursor: pointer;
}

.auth-sign-in__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 4px;
    padding-top: 4px;
    text-align: center;
}

.auth-sign-in__brand-name {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}

.auth-sign-in__brand-accent {
    color: var(--auth-sign-in-gold-strong);
}

.auth-sign-in__brand-tagline {
    margin: 6px 0 0;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 188, 98, 0.92);
}

.auth-sign-in__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 18px 0 20px;
}

.auth-sign-in__hero-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: var(--ll-type-title-weight);
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #fff;
}

.auth-sign-in__hero-accent {
    color: var(--auth-sign-in-gold-strong);
}

.auth-sign-in__hero-support {
    margin: 8px 0 18px;
    max-width: 18rem;
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.35;
    color: #7eb6d9;
}

.auth-sign-in__portrait {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(42vw, 168px);
    height: min(42vw, 168px);
    padding: 6px;
    overflow: hidden;
    border: 3px solid var(--auth-sign-in-gold-strong);
    border-radius: 999px;
    background: #4d6b38;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.auth-sign-in__hero-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center 28%;
}

.auth-sign-in__panel {
    padding: 18px 16px 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(12, 20, 34, 0.88);
}

.auth-sign-in__title {
    flex-shrink: 0;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
    color: #fff;
    font-size: 1.2rem;
    font-weight: var(--ll-type-title-weight);
    line-height: 1.25;
}

.auth-sign-in__body {
    margin: 0 0 14px;
    padding: 0;
    text-align: left;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.4;
}

.auth-sign-in__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
}

.auth-sign-in__field.lesson-field {
    margin: 0;
}

.auth-sign-in__field-label,
.auth-sign-in__field.lesson-field > span {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-sign-in__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-sign-in__input-icon {
    position: absolute;
    left: 12px;
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.9rem;
    pointer-events: none;
}

.auth-sign-in .auth-sign-in__input.email-input,
.auth-sign-in .email-input.auth-sign-in__input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.9rem;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(8, 16, 30, 0.72);
    color: #f8fafc;
}

.auth-sign-in .auth-sign-in__input.email-input::placeholder {
    color: rgba(148, 163, 184, 0.85);
}

.auth-sign-in .login-send-row {
    margin-top: 8px;
}

.auth-sign-in--signup-verify .auth-sign-in__send-busy {
    align-self: center;
    margin: 0 0 6px;
}

.auth-sign-in__contact-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.auth-sign-in__contact-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.auth-sign-in__contact-label {
    color: rgba(226, 232, 240, 0.85);
    font-size: 0.72rem;
    font-weight: 600;
}

.auth-sign-in__contact-value {
    margin: 0;
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.45;
    word-break: break-word;
}

.auth-sign-in__contact-row .login-send-row {
    margin-top: 4px;
}

.auth-sign-in__contact-row .login-send-email-button:disabled,
.auth-sign-in__contact-row .login-send-phone-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.auth-sign-in .login-send-row .login-send-otp-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.auth-sign-in .auth-sign-in__submit.ll-btn,
.auth-sign-in .login-verify-row .ll-btn.ll-btn--solid.ll-btn--ai {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-height: 48px;
    border: none;
    border-radius: 12px;
    color: #1a1208;
    font-weight: 700;
    font-size: 1.02rem;
    background: linear-gradient(180deg, #f0c96e 0%, #d4a24a 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.auth-sign-in__submit-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.auth-sign-in .auth-sign-in__submit.ll-btn:hover:not(:disabled):not([aria-disabled="true"]),
.auth-sign-in .login-verify-row .ll-btn.ll-btn--solid.ll-btn--ai:hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(180deg, #f0c96e 0%, #d4a853 100%);
    color: #1a1208;
}

.auth-sign-in .login-identifier-inline-error {
    margin-top: 6px;
    color: #fca5a5;
    font-size: 0.72rem;
    line-height: 1.35;
}

.auth-sign-in__status,
.auth-sign-in .email-empty-state {
    margin: 0;
    text-align: center;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.72rem;
}

.auth-sign-in .login-phone-recaptcha-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.78);
}

.auth-sign-in__footnote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 14px 0 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(226, 232, 240, 0.62);
}

.auth-sign-in__create {
    margin: 22px 0 0;
    text-align: center;
    color: #7eb6d9;
    font-size: 0.92rem;
}

.auth-sign-in__create-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--auth-sign-in-gold-strong);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.auth-sign-in--email-pending .auth-sign-in__hero,
.auth-sign-in--email-pending .auth-sign-in__title,
.auth-sign-in--email-pending .auth-sign-in__body,
.auth-sign-in--email-pending .auth-sign-in__footnote,
.auth-sign-in--email-pending .auth-sign-in__create,
.auth-sign-in--email-code .auth-sign-in__title,
.auth-sign-in--email-code .auth-sign-in__body,
.auth-sign-in--email-code .auth-sign-in__footnote,
.auth-sign-in--email-code .auth-sign-in__create {
    display: none;
}

.auth-sign-in--email-code .auth-sign-in__hero-title,
.auth-sign-in--email-code .auth-sign-in__hero-support {
    display: none;
}

.auth-sign-in--email-code .auth-sign-in__hero {
    display: flex;
    margin-bottom: 8px;
}

.auth-sign-in--email-code .auth-sign-in__portrait {
    width: min(40vw, 140px);
    height: min(40vw, 140px);
}

.auth-sign-in__send-step[hidden],
.auth-sign-in__email-pending[hidden],
.login-verify-field[hidden] {
    display: none !important;
}

.auth-sign-in__email-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 4px;
}

.auth-sign-in__email-pending-art {
    width: min(46vw, 168px);
    height: auto;
    margin: 0 0 4px;
    object-fit: contain;
    object-position: center;
}

.auth-sign-in__email-pending-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
    font-size: 1.75rem;
}

.auth-sign-in__email-pending-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.auth-sign-in__email-pending-lede {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.78);
}

.auth-sign-in__email-pending-address {
    margin: 0 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    word-break: break-word;
}

.auth-sign-in__email-continue {
    margin-top: 4px;
}

.auth-sign-in__resend-row {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.75);
}

.auth-sign-in__resend-link {
    padding: 0;
    border: 0;
    background: none;
    color: #93c5fd;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.auth-screen .otp-digit-input {
    background: #fff;
    color: #0f1720;
}

.auth-sign-in .otp-code-row {
    justify-content: center;
}

.auth-sign-in .otp-code-row .otp-code-group {
    justify-content: center;
}

@media (max-height: 700px) {
    .auth-sign-in__portrait,
    .auth-sign-in__email-pending-art {
        width: min(36vw, 132px);
        height: min(36vw, 132px);
    }

    .auth-sign-in__email-pending-art {
        height: auto;
    }

    .auth-sign-in__hero-title {
        font-size: 1.5rem;
    }

    .auth-sign-in__hero {
        margin: 10px 0 14px;
    }
}

@media (min-width: 900px) {
    .auth-sign-in-screen.ll-surface--gate-fullscreen > .ll-surface__body {
        justify-content: flex-start;
        padding: 16px 20px 24px;
    }

    .auth-sign-in {
        max-width: 32rem;
    }

    .auth-sign-in__portrait {
        width: 188px;
        height: 188px;
    }

    .auth-sign-in__hero-title {
        font-size: 2rem;
    }

    .auth-sign-in__email-pending-art {
        width: 190px;
    }
}

html.ll-vp-sim--phone .auth-sign-in-screen.ll-surface--gate-fullscreen > .ll-surface__body {
    justify-content: flex-start;
    padding: 8px 10px 12px;
}

html.ll-vp-sim--phone .auth-sign-in {
    flex: 1 1 auto;
    max-width: 28rem;
    padding: 0 0 8px;
}

html.ll-vp-sim--phone .auth-sign-in .auth-sign-in__submit.ll-btn,
html.ll-vp-sim--phone .auth-sign-in .login-verify-row .ll-btn.ll-btn--solid.ll-btn--ai {
    min-height: 42px;
}

/* ---- public/style/features/booking.css ---- */
/* Feature: booking.css */

.booking-time-picker {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0 2px 1px;
    min-height: auto;
    flex: 0 1 auto;
}

.booking-time-picker__shell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: auto;
    flex: 0 1 auto;
}

.booking-time-picker__marketing-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding: 4px var(--booking-card-inset, 8px) 2px;
    text-align: center;
}

.booking-time-picker__marketing-cta {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.2;
    text-decoration: none;
}

.booking-time-picker__marketing-link {
    display: inline-block;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.35;
    text-decoration: none;
}

.booking-time-picker__marketing-link:hover,
.booking-time-picker__marketing-link:focus-visible {
    color: var(--brand);
    text-decoration: underline;
}

.booking-time-picker__guest-signin {
    margin: 0.15rem var(--booking-card-inset, 8px) 0;
    padding: 0;
    text-align: center;
}

.booking-time-picker__guest-signin-link {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.35;
    text-decoration: underline;
    text-underline-offset: 0.12em;
    cursor: pointer;
}

.booking-time-picker__guest-signin-link:hover,
.booking-time-picker__guest-signin-link:focus-visible {
    color: var(--text-primary);
}

.booking-value-screen {
    padding: 0;
    min-height: auto;
}

.booking-value-screen__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding:
        8px
        max(12px, env(safe-area-inset-right, 0px))
        calc(max(12px, env(safe-area-inset-bottom, 0px)) + 8px)
        max(12px, env(safe-area-inset-left, 0px));
    background:
        radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--accent-ai, #c4a35a) 14%, transparent), transparent 55%),
        var(--bg-main, #0f1419);
}

.booking-value-screen__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
    text-align: center;
}

.booking-value-screen__title {
    margin: 0;
    max-width: 22rem;
    color: var(--text-heading);
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-title-weight, 700);
    line-height: var(--ll-type-title-line, 1.2);
}

.booking-value-screen__lede {
    margin: 0;
    max-width: 26rem;
    color: var(--text-secondary);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
}

.booking-value-screen__benefits {
    list-style: none;
    margin: 0 0 0.35rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.booking-value-screen__benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 10px);
    background: color-mix(in srgb, var(--ll-surface-sunken, #121820) 55%, transparent);
}

.booking-value-screen__benefit-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-ai, #c4a35a) 18%, transparent);
    color: var(--accent-ai-strong, #d4b872);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 700);
    line-height: 1;
}

.booking-value-screen__benefit strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--text-primary);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.25;
}

.booking-value-screen__benefit p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.35;
}

.booking-value-screen__footer {
    margin-top: 0.25rem;
    padding: 0;
    border-top: 0;
    background: transparent;
}

.booking-value-screen__tiers {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0;
}

.booking-value-screen__tier {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-sm, 10px);
    background: color-mix(in srgb, var(--ll-surface-sunken, #121820) 55%, transparent);
}

.booking-value-screen__tier--featured {
    border-color: color-mix(in srgb, var(--accent-ai, #c4a35a) 35%, transparent);
    background: color-mix(in srgb, var(--accent-ai, #c4a35a) 8%, var(--ll-surface-sunken, #121820));
}

.booking-value-screen__tier-badge {
    margin: 0;
    color: var(--accent-ai-strong, #d4b872);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 700);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.booking-value-screen__tier-title {
    margin: 0;
    color: var(--text-heading);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-label-weight, 700);
    line-height: 1.2;
}

.booking-value-screen__tier-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.35;
}

.booking-value-screen__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.booking-value-screen__plan {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.2;
}

.booking-value-screen__plan strong {
    color: var(--text-heading);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-label-weight, 700);
}

.booking-value-screen__plan--featured {
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}

.booking-value-screen__plan-name {
    color: var(--text-secondary);
    font-weight: var(--ll-type-label-weight, 600);
}

.booking-value-screen__features {
    margin: 0.15rem 0 0;
    padding-left: 1rem;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.35;
}

.booking-value-screen__features li + li {
    margin-top: 0.2rem;
}

.booking-value-screen__beta-note {
    margin: 0;
    padding: 0 12px;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.35;
    text-align: center;
}

.booking-time-picker__card.auth-sign-in {
    --booking-card-inset: 6px;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    gap: 0.15rem;
    padding: 0;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));
}

.booking-time-picker__instructor-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 var(--booking-card-inset) 1px;
    padding: 3px 6px;
    border-radius: var(--radius-sm, 10px);
    background: color-mix(in srgb, var(--ll-surface-sunken, #121820) 72%, transparent);
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.booking-time-picker__instructor-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.booking-time-picker__instructor-banner-label {
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 600);
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-transform: uppercase;
}

.booking-time-picker__instructor-banner-name {
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-time-picker__page-header {
    flex-shrink: 0;
}

.booking-time-picker__page-title {
    margin: 0 0 2px;
    padding: 0 var(--booking-card-inset);
    text-align: center;
    color: var(--text-heading);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-label-weight, 700);
    line-height: 1.2;
}

.booking-time-picker__page-lede {
    margin: 0 0 4px;
    padding: 0 var(--booking-card-inset);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-body-sm-weight, 400);
    line-height: 1.35;
}

.booking-time-picker__page-lede--detail {
    margin-top: calc(var(--space-3) * -1);
}

.booking-time-picker__page-lede strong {
    color: var(--text-primary);
    font-weight: var(--ll-type-label-weight, 600);
}

.booking-time-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.booking-time-picker__student-name {
    margin: 0;
    font-size: max(var(--ll-type-title-size, 1.125rem), 1.125rem);
    font-weight: var(--ll-type-title-weight, 600);
    line-height: var(--ll-type-title-line, 1.2);
}

.booking-time-picker__brand-logo {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.booking-time-picker__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.booking-time-picker__intro h2 {
    margin-bottom: 0.35rem;
}

.booking-time-picker__intro p {
    margin: 0;
}

.booking-time-picker__intro p + p {
    margin-top: 0.5rem;
}

.booking-time-picker__section {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0 var(--booking-card-inset);
}

.booking-time-picker__guest {
    margin-bottom: 0;
    padding: 0 var(--booking-card-inset);
}

.booking-time-picker__guest-grid {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-time-picker__guest-field.lesson-field {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    font-weight: inherit;
}

.booking-time-picker__guest-field.lesson-field > span {
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.15;
}

.booking-time-picker__guest .email-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    border-radius: var(--radius-sm, 10px);
}

.booking-time-picker__guest.auth-sign-in__form {
    gap: 3px;
}

.booking-time-picker__guest-email {
    grid-column: 1 / -1;
}

.booking-time-picker__section-label {
    margin: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: var(--ll-type-label-weight, 600);
    color: var(--text-secondary);
}

.booking-time-picker__months,
.booking-time-picker__days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.booking-time-picker__months {
    margin-bottom: 0.1rem;
}

.booking-time-picker__month {
    flex: 0 0 auto;
    min-width: 5.25rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--ll-border-subtle, #ffffff) 18%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--ll-surface-raised, #1b2230) 88%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-body-weight, 600);
    cursor: pointer;
    scroll-snap-align: start;
    white-space: nowrap;
}

.booking-time-picker__month:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--ll-accent, #3ecf8e) 45%, transparent);
}

.booking-time-picker__month.is-selected {
    border-color: var(--ll-accent, #3ecf8e);
    background: color-mix(in srgb, var(--ll-accent, #3ecf8e) 16%, var(--ll-surface-raised, #1b2230));
}

.booking-time-picker__month:disabled {
    opacity: 0.55;
    cursor: wait;
}

.booking-time-picker__days {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.booking-time-picker__day {
    flex: 0 0 auto;
    min-width: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--ll-border-subtle, #ffffff) 18%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--ll-surface-raised, #1b2230) 88%, transparent);
    color: inherit;
    cursor: pointer;
    scroll-snap-align: start;
}

.booking-time-picker__day:hover {
    border-color: color-mix(in srgb, var(--ll-accent, #3ecf8e) 45%, transparent);
}

.booking-time-picker__day.is-selected {
    border-color: var(--ll-accent, #3ecf8e);
    background: color-mix(in srgb, var(--ll-accent, #3ecf8e) 16%, var(--ll-surface-raised, #1b2230));
}

.booking-time-picker__day-weekday {
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-caption-weight, 500);
    opacity: 0.82;
}

.booking-time-picker__day-date {
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-body-weight, 600);
}

.booking-time-picker__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

.booking-time-picker__slot.ll-btn {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-subtle, color-mix(in srgb, var(--text-primary) 16%, transparent));
    border-radius: 0.65rem;
    background: var(--action-secondary, color-mix(in srgb, var(--surface-card-strong) 94%, white));
    color: var(--text-primary);
    font-size: var(--ll-type-body-size, 0.9375rem);
    font-weight: var(--ll-type-body-weight, 600);
    cursor: pointer;
    box-shadow: none;
    transform: none;
}

.booking-time-picker__slot.ll-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--primary, var(--ll-accent, #3ecf8e)) 45%, transparent);
    background: var(--hover-bg, color-mix(in srgb, var(--primary, var(--ll-accent, #3ecf8e)) 8%, var(--surface-card-strong, white)));
    transform: none;
}

.booking-time-picker__slot.ll-btn.is-selected {
    border-color: var(--action-primary, var(--primary, var(--ll-accent, #3ecf8e)));
    background: var(--action-primary, var(--primary, var(--ll-accent, #3ecf8e)));
    color: var(--action-primary-text, #fff);
    box-shadow: 0 8px 18px rgba(45, 122, 59, 0.24);
}

.booking-time-picker__slot.ll-btn.is-selected:hover:not(:disabled) {
    border-color: var(--primary-strong, var(--action-primary, var(--primary, var(--ll-accent, #3ecf8e))));
    background: var(--primary-strong, var(--action-primary, var(--primary, var(--ll-accent, #3ecf8e))));
    color: var(--action-primary-text, #fff);
}

.booking-time-picker__slot.is-unavailable,
.booking-time-picker__slot:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    text-decoration: line-through;
}

.booking-time-picker__summary {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 2.35rem;
    margin: 0 var(--booking-card-inset);
    padding: 0.45rem 0.55rem;
    border-radius: 0.75rem;
    font-size: var(--ll-type-body-size, 0.9375rem);
}

.booking-time-picker__summary:not(:empty) {
    background: color-mix(in srgb, var(--ll-surface-sunken, #121820) 72%, transparent);
}

.booking-time-picker__summary p {
    margin: 0;
}

.booking-time-picker__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0;
    padding: 0 var(--booking-card-inset);
}

.booking-time-picker__card.auth-sign-in .booking-time-picker__actions.dialog-buttons {
    margin-top: 0;
    margin-bottom: 0;
    gap: 0.35rem;
}

.booking-time-picker__actions .ll-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding: 0.32rem 0.5rem;
}

.booking-time-picker__actions .ll-btn.ll-btn--solid.ll-btn--primary:not(:disabled) {
    background: var(--action-primary, var(--primary, var(--ll-accent, #3ecf8e)));
    border-color: var(--action-primary, var(--primary, var(--ll-accent, #3ecf8e)));
    color: var(--action-primary-text, #fff);
    box-shadow: 0 8px 18px rgba(45, 122, 59, 0.24);
}

.booking-time-picker__card.auth-sign-in .field-help {
    margin: 0 var(--booking-card-inset);
}

.booking-time-picker__calendar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin: 0.5rem var(--booking-card-inset) 0.35rem;
    padding: 0.35rem var(--booking-card-inset) 0;
}

.booking-time-picker__calendar {
    border-radius: 0.75rem;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

/* Compact month grid: half the schedule calendar day-cell height (5.75rem → 2.875rem). */
.booking-time-picker__calendar--compact.availability-calendar {
    flex: 0 0 auto;
    min-height: 0;
}

.booking-time-picker__calendar--compact.availability-calendar .fc {
    min-width: 0 !important;
    max-width: 100%;
    width: 100%;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-view-harness,
.booking-time-picker__calendar--compact.availability-calendar .fc-scrollgrid,
.booking-time-picker__calendar--compact.availability-calendar .fc-scrollgrid-sync-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-header-toolbar {
    display: none !important;
}

.booking-time-picker__month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0;
    padding-inline: 0;
    gap: 0.2rem;
    min-height: 0;
}

.booking-time-picker__month-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-title-weight, 700);
    color: var(--text-primary, #202124);
    line-height: var(--ll-type-title-line, 1.2);
}

.booking-time-picker__month-nav-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 1.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.2rem;
    background: transparent;
    color: var(--primary, #3fa85a);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 0.75;
    cursor: pointer;
}

.booking-time-picker__month-nav-btn:hover {
    background: color-mix(in srgb, var(--primary, #3fa85a) 10%, transparent);
    color: var(--primary-strong, #2d7a38);
}

.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day-frame {
    min-height: 1.1rem;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day-top {
    padding-top: 0.1rem;
    padding-bottom: 0;
}

.booking-time-picker__calendar--compact.availability-calendar .fc .fc-daygrid-day-number {
    font-size: 0.6rem;
    padding: 0 1px;
    line-height: 1;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-col-header-cell-cushion {
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: var(--ll-type-label-weight, 600);
    padding: 0.15rem 0;
    line-height: 1.1;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day-events {
    margin-top: 0;
    min-height: 0;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event,
.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-block-event,
.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-h-event {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main,
.booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main-frame {
    background: transparent !important;
    padding: 0 !important;
}

.booking-time-picker__dot {
    width: 0.4rem;
    height: 0.4rem;
    background-color: var(--ll-accent, #3ecf8e);
    border-radius: 50%;
    margin: 0 auto;
}

@media (min-width: 900px) {
    .booking-time-picker {
        padding: 12px 16px 24px;
    }

    .booking-time-picker__card.auth-sign-in {
        max-width: 52rem;
        padding: 10px 24px 20px;
        --booking-card-inset: 0;
    }

    .booking-time-picker__page-title {
        margin-bottom: 4px;
    }

    .booking-time-picker__instructor-banner {
        margin-bottom: 6px;
    }
}

@media (max-width: 480px) {
    .booking-time-picker {
        padding: 0 2px 2px;
    }

    .booking-time-picker__card.auth-sign-in {
        gap: 0.1rem;
        padding: 0;
        --booking-card-inset: 4px;
    }

    .booking-time-picker__instructor-banner {
        padding: 2px 4px;
        gap: 4px;
    }

    .booking-time-picker__instructor-banner-label {
        font-size: 0.65rem;
    }

    .booking-time-picker__instructor-banner-name {
        font-size: 0.8125rem;
    }

    .booking-time-picker__guest-grid {
        gap: 3px;
    }

    .booking-time-picker__guest-field.lesson-field > span {
        font-size: 0.65rem;
    }

    .booking-time-picker__guest .email-input {
        min-height: 30px;
        padding: 4px 6px;
        font-size: 0.8125rem;
    }

    .booking-time-picker__guest.auth-sign-in__form {
        gap: 3px;
    }

    .booking-time-picker__guest-signin {
        margin-top: 0;
    }

    .booking-time-picker__calendar-wrap {
        margin: 0.2rem var(--booking-card-inset) 0.1rem;
        padding: 0.15rem var(--booking-card-inset) 0;
        gap: 0.15rem;
    }

    .booking-time-picker__shell {
        gap: 0.1rem;
    }

    .booking-time-picker__card.auth-sign-in .booking-time-picker__actions.dialog-buttons {
        margin-top: 0;
        margin-bottom: 0;
        gap: 0.25rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .booking-time-picker__actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.25rem;
        padding-top: 0;
    }

    .booking-time-picker__actions .ll-btn,
    .booking-time-picker__actions.dialog-buttons .ll-btn.ll-btn--md {
        width: auto;
        min-height: 34px;
        padding: 0.3rem 0.45rem;
        font-size: 0.8125rem;
    }

    .booking-time-picker__marketing-footer {
        margin-top: 0;
        padding: 2px var(--booking-card-inset) 0;
    }

    .booking-time-picker__marketing-cta.ll-btn--md {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 0.72rem;
    }

    .booking-time-picker__card {
        gap: 0.2rem;
    }

    .booking-time-picker__month-nav {
        margin-bottom: 0;
    }

    .booking-time-picker__month-label {
        font-size: var(--ll-type-heading-size, 1rem);
    }

    .booking-time-picker__month-nav-btn {
        width: 2rem;
        height: 1.2rem;
        font-size: 1.9rem;
    }

    .booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day-frame {
        min-height: 0.42rem;
    }

    .booking-time-picker__calendar--compact.availability-calendar .fc-dayGridMonth-view .fc-daygrid-day-top {
        padding-top: 0;
        padding-bottom: 0;
    }

    .booking-time-picker__calendar--compact.availability-calendar .fc .fc-daygrid-day-number {
        font-size: 0.52rem;
        padding: 0 1px;
    }

    .booking-time-picker__calendar--compact.availability-calendar .fc-col-header-cell-cushion {
        font-size: var(--ll-type-label-size, 0.8125rem);
        padding: 0.1rem 0;
    }

    .booking-time-picker__calendar--compact.availability-calendar .fc-theme-standard td,
    .booking-time-picker__calendar--compact.availability-calendar .fc-theme-standard th {
        padding: 0;
    }

    .booking-time-picker__calendar--compact.availability-calendar .fc-scrollgrid-section-body > td,
    .booking-time-picker__calendar--compact.availability-calendar .fc-scrollgrid-section-header > th {
        border-width: 0.5px;
    }

    .booking-time-picker__calendar-wrap {
        gap: 0.1rem;
    }

    .booking-time-picker__dot {
        width: 0.2rem;
        height: 0.2rem;
    }

    .booking-time-picker__marketing-footer {
        padding: 2px var(--booking-card-inset) 0;
    }

    .booking-time-picker__slots {
        grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
        gap: 0.3rem;
    }

    .booking-time-picker__slot.ll-btn {
        padding: 0.38rem 0.35rem;
        font-size: 0.78rem;
    }
}

.booking-time-picker__calendar .fc-event.booking-slot-event {
    cursor: pointer;
}

.booking-time-picker__calendar .fc-event.booking-slot-event.is-selected {
    outline: 2px solid var(--primary, #3fa85a);
    outline-offset: 1px;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #3fa85a) 28%, transparent);
}

/* Keep booking actions side-by-side; global dialog-buttons stacks on narrow screens. */
@media (max-width: 560px) {
    .booking-time-picker__card.auth-sign-in .booking-time-picker__actions.dialog-buttons {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        grid-template-columns: none;
        margin-top: 0;
        margin-bottom: 0;
    }

    .booking-time-picker__actions.dialog-buttons .ll-btn {
        width: auto;
    }
}

/* Booking success: fill the stack and celebrate the confirmation. */
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"]:has(.booking-time-picker--success) .ll-stack-shell__body-inner,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"]:has(.booking-time-picker--success) .ll-stack-shell__content {
    flex: 1 1 auto;
    min-height: 0;
}

.booking-time-picker--success {
    flex: 1 1 auto;
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.booking-time-picker__shell--success {
    flex: 1 1 auto;
    min-height: 100%;
    justify-content: space-between;
    gap: 1.5rem;
    padding:
        max(1.25rem, env(safe-area-inset-top, 0px))
        max(1rem, env(safe-area-inset-right, 0px))
        calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 0.5rem)
        max(1rem, env(safe-area-inset-left, 0px));
    background:
        radial-gradient(140% 90% at 50% -15%, color-mix(in srgb, var(--ll-accent, #3ecf8e) 24%, transparent), transparent 58%),
        radial-gradient(90% 55% at 50% 105%, color-mix(in srgb, var(--accent-ai, #c4a35a) 14%, transparent), transparent 52%),
        var(--bg-main, #0f1419);
}

.booking-time-picker__success {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding: 1.5rem 0 0.5rem;
    text-align: center;
}

.booking-time-picker__success-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
}

.booking-time-picker__success-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ll-accent, #3ecf8e) 22%, transparent);
    border: 2px solid color-mix(in srgb, var(--ll-accent, #3ecf8e) 55%, transparent);
    box-shadow: 0 10px 32px color-mix(in srgb, var(--ll-accent, #3ecf8e) 18%, transparent);
}

.booking-time-picker__success-mark-icon {
    color: var(--ll-accent, #3ecf8e);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}

.booking-time-picker__success-title {
    margin: 0;
    max-width: 18rem;
    color: var(--text-heading);
    font-size: clamp(1.5rem, 5vw, 1.875rem);
    font-weight: var(--ll-type-title-weight, 700);
    line-height: 1.15;
}

.booking-time-picker__success-lede {
    margin: 0;
    max-width: 22rem;
    color: var(--text-secondary);
    font-size: var(--ll-type-body-size, 0.9375rem);
    line-height: 1.45;
}

.booking-time-picker__success-lede strong {
    color: var(--text-primary);
    font-weight: var(--ll-type-label-weight, 600);
}

.booking-time-picker__success-detail {
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md, 14px);
    border: 1px solid color-mix(in srgb, var(--ll-accent, #3ecf8e) 28%, var(--border-subtle, rgba(255, 255, 255, 0.08)));
    background: color-mix(in srgb, var(--ll-surface-sunken, #121820) 72%, transparent);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.12));
}

.booking-time-picker__success-detail-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: var(--ll-type-label-weight, 600);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.booking-time-picker__success-when {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.125rem, 4.5vw, 1.375rem);
    font-weight: var(--ll-type-title-weight, 700);
    line-height: 1.25;
}

.booking-time-picker__success-instructor {
    width: 100%;
}

.booking-time-picker__success-instructor .booking-time-picker__instructor-banner {
    justify-content: center;
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md, 14px);
    background: color-mix(in srgb, var(--ll-surface-sunken, #121820) 55%, transparent);
}

.booking-time-picker__shell--success .booking-time-picker__marketing-footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0.5rem 0 0;
}

.booking-time-picker__shell--success .booking-time-picker__marketing-cta {
    min-height: 44px;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
}

/* Booking value landing: scroll with the stack body. */
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] .ll-stack-shell__body-inner,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] .ll-stack-shell__content {
    padding: 0;
    overflow: visible;
    min-height: auto;
}

/* Booking stacks: enable vertical scroll in the stack body (matches settings/account). */
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"] .ll-stack-shell__body-inner,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] .ll-stack-shell__body-inner,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-deep-link"] .ll-stack-shell__body-inner {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
    gap: 0;
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"] .ll-stack-shell__content,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] .ll-stack-shell__content,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-deep-link"] .ll-stack-shell__content {
    flex: 0 1 auto;
    min-height: auto;
    overflow: visible;
}

html.ll-vp-sim--phone .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-time-picker"] .ll-stack-shell__body-inner,
html.ll-vp-sim--phone .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-value"] .ll-stack-shell__body-inner,
html.ll-vp-sim--phone .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="booking-deep-link"] .ll-stack-shell__body-inner {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ---- public/style/features/availability.css ---- */
/* Feature: availability.css */

/* Local Set Avail overlays — subtle hatching on light GCal-style canvas. */
:root {
    --ll-avail-implicit-stripe-a: color-mix(in srgb, #9aa0a6 8%, transparent);
    --ll-avail-implicit-stripe-b: color-mix(in srgb, #9aa0a6 14%, transparent);
    --ll-avail-explicit-stripe-a: color-mix(in srgb, #80868b 12%, transparent);
    --ll-avail-explicit-stripe-b: color-mix(in srgb, #80868b 22%, transparent);
    --ll-avail-explicit-border: color-mix(in srgb, #80868b 28%, transparent);
}

.availability-calendar .fc-bg-event.availability-event--implicit-unavailable,
.availability-calendar .fc-daygrid-day-bg .fc-bg-event.availability-event--implicit-unavailable {
    background-color: color-mix(in srgb, #ffffff 94%, #9aa0a6 6%);
    background-image: repeating-linear-gradient(
        120deg,
        var(--ll-avail-implicit-stripe-a),
        var(--ll-avail-implicit-stripe-a) 9px,
        var(--ll-avail-implicit-stripe-b) 9px,
        var(--ll-avail-implicit-stripe-b) 18px
    );
    opacity: 1;
}

.availability-calendar .fc-bg-event.availability-event--explicit-unavailable,
.availability-calendar .fc-daygrid-day-bg .fc-bg-event.availability-event--explicit-unavailable {
    background-color: color-mix(in srgb, #ffffff 90%, #80868b 10%);
    background-image: repeating-linear-gradient(
        45deg,
        var(--ll-avail-explicit-stripe-a),
        var(--ll-avail-explicit-stripe-a) 7px,
        var(--ll-avail-explicit-stripe-b) 7px,
        var(--ll-avail-explicit-stripe-b) 14px
    );
    border: 1px solid var(--ll-avail-explicit-border);
    opacity: 1;
}

.availability-calendar .fc-daygrid-day:has(.availability-event--explicit-unavailable) .fc-daygrid-day-bg .fc-bg-event.availability-event--implicit-unavailable {
    opacity: 0.82;
}

/* ---- public/style/features/buttons.css ---- */
/* Feature: buttons.css — ll-btn design system (see docs/button-system.md) */

/* --- Tokens --- */
:root {
    --admin-accent-primary: #0d9488;
    --admin-accent-primary-strong: #0f766e;
    --ll-btn-radius: 12px;
    --ll-btn-radius-sm: 8px;
    --ll-btn-radius-lg: 16px;
    --ll-btn-radius-fab: 999px;
}

/* --- Base --- */
.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: none;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--ll-btn-radius);
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    transition:
        transform var(--motion-fast, 120ms) var(--ease-standard, ease),
        box-shadow var(--motion-fast, 120ms) var(--ease-standard, ease),
        border-color var(--motion-fast, 120ms) var(--ease-standard, ease),
        background var(--motion-fast, 120ms) var(--ease-standard, ease),
        color var(--motion-fast, 120ms) var(--ease-standard, ease),
        opacity var(--motion-fast, 120ms) var(--ease-standard, ease);
}

.ll-btn[hidden] {
    display: none !important;
}

.ll-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-1px);
}

.ll-btn:disabled,
.ll-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* --- Sizes --- */
.ll-btn--sm {
    min-height: 36px;
    padding: 8px 14px;
    font-size: var(--font-size-sm, 0.82rem);
    border-radius: var(--ll-btn-radius-sm);
}

.ll-btn--md {
    min-height: 44px;
    padding: 10px 18px;
    font-size: var(--font-size-sm, 0.82rem);
}

.ll-btn--lg {
    min-height: 56px;
    padding: 12px 20px;
    font-size: 1.08rem;
    font-weight: var(--ll-type-title-weight, 600);
    border-radius: var(--ll-btn-radius-lg);
}

.ll-btn--block {
    width: 100%;
}

/* --- Variants: solid --- */
.ll-btn--solid.ll-btn--primary {
    background: var(--action-primary, var(--primary));
    border-color: var(--action-primary, var(--primary));
    color: var(--action-primary-text, #fff);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.ll-btn--solid.ll-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
}

/* Capture actions use the same green solid style as primary CTAs. */
.ll-btn--solid.ll-btn--capture {
    background: var(--action-primary, var(--primary));
    border-color: var(--action-primary, var(--primary));
    color: var(--action-primary-text, #fff);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.ll-btn--solid.ll-btn--capture:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
    filter: none;
}

.ll-btn--solid.ll-btn--success {
    background: var(--gradient-success);
    border-color: var(--accent-success-border);
    color: #fff;
    box-shadow: var(--glow-success);
}

.ll-btn--solid.ll-btn--ai {
    background: var(--gradient-ai);
    border-color: var(--accent-ai-border);
    color: var(--text-heading-warm);
    box-shadow: var(--glow-ai);
}

.ll-btn--solid.ll-btn--danger {
    background: var(--color-danger-600, #dc2626);
    border-color: var(--color-danger-700, #b91c1c);
    color: #fff;
    box-shadow: none;
}

.ll-btn--solid.ll-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-danger-700, #b91c1c);
    border-color: var(--color-danger-800, #991b1b);
}

/* --- Variants: ghost --- */
.ll-btn--ghost {
    background: var(--action-secondary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    box-shadow: none;
}

.ll-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--hover-bg);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

/* --- Variants: outline --- */
.ll-btn--outline.ll-btn--danger {
    background: transparent;
    border-color: rgba(255, 107, 107, 0.3);
    color: #ff6b6b;
    box-shadow: none;
}

.ll-btn--outline.ll-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: rgba(255, 107, 107, 0.08);
    border-color: rgba(255, 107, 107, 0.45);
    color: #ff8585;
}

/* --- Variants: text --- */
.ll-btn--text {
    border: 0;
    background: transparent;
    padding: 6px 4px;
    min-height: 0;
    font-size: var(--ll-type-body-size, 0.875rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
    border-radius: 6px;
    box-shadow: none;
    transform: none;
}

.ll-btn--text:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--text-primary);
    background: color-mix(in srgb, #fff 4%, transparent);
    transform: none;
}

.ll-btn--text.ll-btn--text-accent {
    color: color-mix(in srgb, var(--primary-strong) 75%, var(--text-primary));
    font-weight: 600;
}

.ll-btn--text.ll-btn--text-accent:hover:not(:disabled):not([aria-disabled="true"]) {
    color: color-mix(in srgb, var(--primary-strong) 95%, #fff);
}

.ll-btn--text.ll-btn--text-danger {
    color: color-mix(in srgb, var(--color-danger-600, #dc2626) 88%, var(--text-primary));
}

.ll-btn--text.ll-btn--text-danger:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-danger-600, #dc2626);
    background: color-mix(in srgb, var(--color-danger-600, #dc2626) 8%, transparent);
}

.ll-btn--text.ll-btn--text-quiet {
    font-weight: 400;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
}

/* Auth tertiary link */
.ll-btn--text.auth-link-button,
.auth-link-button.ll-btn--text {
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Variants: icon --- */
.ll-btn--icon {
    padding: 0;
    gap: 0;
}

.ll-btn--icon.ll-btn--md {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px;
    border-radius: 50%;
}

.ll-btn--icon.ll-btn--sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    border-radius: 50%;
}

/* --- FAB --- */
.ll-btn--fab {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: none;
    border-radius: var(--ll-btn-radius-fab);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.34);
}

.ll-btn--fab:hover:not(:disabled) {
    transform: translateY(-2px);
}

/* --- Menu item --- */
.ll-btn--menu-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm, 0.82rem);
    font-weight: 500;
    text-align: left;
    box-shadow: none;
    transform: none;
}

.ll-btn--menu-item:hover:not(:disabled) {
    background: color-mix(in srgb, var(--surface) 86%, var(--brand));
    transform: none;
}

.ll-btn--menu-item.ll-btn--menu-item--danger {
    color: var(--color-danger-600, #dc2626);
}

.ll-btn--menu-item.ll-btn--menu-item--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-danger-600, #dc2626) 12%, transparent);
}

/* --- Admin scoped primary (Option C) --- */
:is(.admin-layout, .admin-auth-mount) .ll-btn--solid.ll-btn--primary {
    background: var(--admin-accent-primary);
    border-color: var(--admin-accent-primary);
    box-shadow: none;
}

:is(.admin-layout, .admin-auth-mount) .ll-btn--solid.ll-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--admin-accent-primary-strong);
    border-color: var(--admin-accent-primary-strong);
}

:is(.admin-layout, .admin-auth-mount) .ll-btn--ghost {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

:is(.admin-layout, .admin-auth-mount) .ll-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #475569;
    border-color: #64748b;
}

/* --- Loading spinner --- */
.ll-btn.action-with-spinner,
.action-with-spinner.ll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Keep spinner hidden unless loading — !important so toolbar label rules
   (e.g. `.lesson-capture-summarize-btn span { display: block }`) cannot leak it. */
.ll-btn.action-with-spinner:not(.is-loading) > .button-spinner,
.action-with-spinner.ll-btn:not(.is-loading) > .button-spinner {
    display: none !important;
}

.ll-btn.action-with-spinner.is-loading > .button-spinner,
.action-with-spinner.ll-btn.is-loading > .button-spinner {
    display: inline-block !important;
}

/* Replace icon with spinner in-place — do not grow the button. */
.ll-btn.action-with-spinner.is-loading > :is(i, svg, .summary-action-icon),
.action-with-spinner.ll-btn.is-loading > :is(i, svg, .summary-action-icon) {
    display: none !important;
}

.ll-btn.action-with-spinner.is-loading .button-label,
.action-with-spinner.ll-btn.is-loading .button-label {
    opacity: 0.92;
}

/* --- Double-delete (preserve existing behavior) --- */
.ll-btn.is-double-delete-armed {
    background: var(--color-danger-600, #dc2626) !important;
    border-color: var(--color-danger-700, #b91c1c) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger-600, #dc2626) 36%, transparent);
    min-height: 44px;
    padding: 10px 16px !important;
    font-weight: var(--ll-type-title-weight) !important;
    transform: scale(1.03);
}

.ll-btn.is-double-delete-busy {
    opacity: 0.92;
    cursor: progress !important;
    transform: none !important;
}

/* --- Action button groups --- */
.action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ll-space-2);
    flex-wrap: wrap;
    margin-top: var(--ll-space-4);
}

.dialog-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dialog-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.dialog-action-spacer {
    flex: 1 1 auto;
    min-width: 12px;
}

.email-panel .action-buttons,
.lesson-dialog .action-buttons,
.dialog-content .dialog-buttons {
    width: 100%;
}

.dialog-buttons .ll-btn--outline.ll-btn--danger {
    margin-right: auto;
}

@media (max-width: 560px) {
    .dialog-buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .dialog-action-group {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        margin-left: 0;
    }

    .dialog-action-spacer {
        display: none;
    }

    .dialog-buttons .ll-btn {
        width: 100%;
        min-height: 46px;
    }
}

.button-spinner {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, white 55%, transparent);
    border-top-color: white;
    display: none;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
    animation: theme-spin 900ms linear infinite;
}

.ll-btn--outline.ll-btn--danger.action-with-spinner.is-loading .button-spinner,
.ll-btn--menu-item.action-with-spinner.is-loading .button-spinner {
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    border-top-color: currentColor;
}

/* --- Split button (3/4 default action + 1/4 alternate menu) --- */
.ll-split-btn-wrap {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

.ll-split-btn {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: stretch;
    min-width: 0;
    max-width: 100%;
    border: 1px solid transparent;
    border-radius: var(--ll-btn-radius);
    overflow: hidden;
    box-sizing: border-box;
}

.ll-split-btn--lg {
    border-radius: var(--ll-btn-radius-lg);
}

.ll-split-btn--sm {
    border-radius: var(--ll-btn-radius-sm);
}

.ll-split-btn--capture {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.ll-split-btn--capture:hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
}

.ll-split-btn__main,
.ll-split-btn__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.ll-split-btn__main {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 12px;
    white-space: nowrap;
}

.ll-split-btn__toggle {
    min-height: 0;
    height: 100%;
    padding: 0;
    border-left: 1px solid color-mix(in srgb, #fff 28%, transparent);
    min-width: 0;
}

.ll-split-btn__toggle:hover,
.ll-split-btn__toggle:focus-visible,
.ll-split-btn__main:hover,
.ll-split-btn__main:focus-visible {
    background: color-mix(in srgb, #000 10%, transparent);
}

.ll-split-btn__toggle[aria-expanded="true"] {
    background: color-mix(in srgb, #000 14%, transparent);
}

/* Size variants only set radius / type — height comes from context (match sibling buttons). */
.ll-split-btn--lg .ll-split-btn__main {
    padding: 0 16px;
    font-size: 1.08rem;
    font-weight: var(--ll-type-title-weight, 600);
}

.ll-split-btn__menu:not(.add-media-menu--floating) {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: max(100%, 11rem);
}

.ll-split-btn__menu[hidden] {
    display: none !important;
}

/* Capture toolbar: match Attach / Summarize / Share height — no extra container padding. */
.media-controls-toolbar .capture-action-group.ll-split-btn-wrap {
    display: flex;
    align-items: stretch;
}

.media-controls-toolbar .capture-action-group > .ll-split-btn.upload-record-btn {
    display: grid;
    grid-template-columns: 3fr 1fr;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-radius: inherit;
    box-shadow: none;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .ll-split-btn.upload-record-btn,
.lesson-editor-route .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .ll-split-btn.upload-record-btn {
    display: grid;
    grid-template-columns: 3fr 1fr;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 44px;
    height: 44px;
    max-height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 12px;
    box-shadow: none;
}

.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main,
.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle {
    min-height: 0;
    height: auto;
    align-self: stretch;
}

.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main {
    flex-direction: row;
    gap: 10px;
    padding: 0 12px;
    font-size: 1.08rem;
}

.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle {
    font-size: 0.85rem;
}

.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle i {
    font-size: 0.8rem;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn {
    min-height: 44px;
    height: 44px;
    padding: 0;
    box-shadow: none;
    border-radius: 12px;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main,
.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle {
    min-height: 0;
    height: 100%;
    box-shadow: none;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main {
    font-size: 0.8rem;
    gap: 6px;
    padding: 0 6px;
}

.lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main i {
    font-size: 0.95rem;
}

@media (max-width: 520px) {
    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn {
        min-height: 52px;
        height: 52px;
    }

    .lesson-workspace-editor-sibling--capture .lesson-capture-workspace-pinned-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 2px;
        gap: 3px;
        font-size: clamp(0.62rem, 2.7vw, 0.72rem);
    }
}

/* Hero / Ask compact split CTA — beat .today-hero-card__primary-action padding/min-height. */
.today-hero-card__primary-action.ll-split-btn,
.today-hero-card__actions .ll-split-btn.ll-split-btn--capture {
    width: auto;
    max-width: none;
    padding: 0;
    min-height: 0;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.today-hero-card__headline-row .ll-split-btn.ll-split-btn--capture {
    min-height: clamp(30px, 10cqi, 44px);
    height: clamp(30px, 10cqi, 44px);
    padding: 0;
    border-radius: clamp(8px, 2cqi, 12px);
}

.today-hero-card__headline-row .ll-split-btn .ll-split-btn__main,
.today-hero-card__headline-row .ll-split-btn .ll-split-btn__toggle {
    min-height: 0;
    height: 100%;
    font-size: clamp(var(--ll-type-meta-size), 3.1cqi, var(--ll-type-body-size));
    font-weight: var(--ll-type-label-weight);
}

.today-hero-card__headline-row .ll-split-btn .ll-split-btn__main {
    padding: 0 clamp(8px, 2.8cqi, 14px);
}

.today-hero-card__headline-row .ll-split-btn .ll-split-btn__toggle {
    padding: 0 2px;
}

/* ---- public/style/features/calendar-integration.css ---- */
/* Google Calendar Basil (event colorId 10) — keep in sync with GOOGLE_CALENDAR_LESSON_EVENT_COLOR in calendar-lesson-sync.js */
:root {
    --ll-calendar-google-lesson-green: #51b749;
    /* Soft slate hatch for light GCal-style calendar canvas */
    --ll-calendar-external-busy-stripe-a: color-mix(in srgb, #9aa0a6 14%, transparent);
    --ll-calendar-external-busy-stripe-b: color-mix(in srgb, #9aa0a6 26%, transparent);
    --ll-calendar-external-busy-border: color-mix(in srgb, #9aa0a6 32%, transparent);
}

.settings-menu-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
}

.settings-menu-card[data-calendar-connected='true'] {
    border-color: rgba(22, 163, 74, 0.28);
}

.calendar-integration-connected-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.16);
    color: #15803d;
    font: var(--ll-type-label-sm, 600 0.8125rem/1.2 system-ui, sans-serif);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.calendar-integration-connected-badge::before {
    content: '✓';
    font-weight: 700;
}

.calendar-integration-card--connected .calendar-integration-card-title {
    margin: 0;
    font: var(--ll-type-title-sm, 600 1rem/1.35 system-ui, sans-serif);
}

.calendar-integration-banner {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
    padding: 0.75rem 0.95rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(22, 163, 74, 0.28);
    background: rgba(22, 163, 74, 0.1);
    color: var(--ll-text-primary, #0f172a);
    font: var(--ll-type-body-sm, 400 0.9375rem/1.45 system-ui, sans-serif);
}

.calendar-integration-banner-icon {
    color: #16a34a;
    font-weight: 700;
}

.calendar-integration-meta {
    margin: -0.35rem 0 0.85rem;
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-label-sm, 500 0.8125rem/1.35 system-ui, sans-serif);
}

.calendar-integration-root {
    display: grid;
    gap: 1rem;
}

.calendar-integration-cards {
    display: grid;
    gap: 1rem;
}

.calendar-integration-loading {
    margin: 0;
    color: var(--ll-text-muted, #667085);
}

.calendar-integration-card {
    border: 1px solid var(--ll-border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    background: var(--ll-surface-raised, #fff);
}

.calendar-integration-card--connected {
    border-color: rgba(22, 163, 74, 0.28);
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.06), rgba(22, 163, 74, 0));
}

.calendar-integration-card--soon {
    opacity: 0.82;
}

.calendar-integration-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.calendar-integration-card-title,
.calendar-integration-status {
    margin: 0;
    font: var(--ll-type-title-sm, 600 1rem/1.35 system-ui, sans-serif);
}

.calendar-integration-status {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ll-text-primary, #0f172a);
}

.calendar-integration-status-icon {
    color: #16a34a;
    font-weight: 700;
}

.calendar-integration-success-copy,
.calendar-integration-card-copy {
    margin: 0 0 0.85rem;
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-body-sm, 400 0.9375rem/1.45 system-ui, sans-serif);
}

.calendar-integration-card-note {
    margin: -0.35rem 0 0.85rem;
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-body-sm, 400 0.875rem/1.45 system-ui, sans-serif);
}

.calendar-integration-soon-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-label-sm, 500 0.75rem/1.2 system-ui, sans-serif);
    white-space: nowrap;
}

.calendar-integration-actions {
    margin-top: 0.35rem;
}

.calendar-sync-now-button:disabled {
    opacity: 0.65;
    cursor: wait;
}

.calendar-connection-chip-mount {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.calendar-connection-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font: var(--ll-type-label-sm, 600 0.75rem/1.2 system-ui, sans-serif);
    white-space: nowrap;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease;
}

.calendar-connection-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand, #0f766e) 55%, transparent);
    outline-offset: 2px;
}

.calendar-connection-chip--connected {
    border-color: rgba(22, 163, 74, 0.28);
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
}

.calendar-connection-chip--connect {
    border-color: var(--ll-border-subtle, rgba(15, 23, 42, 0.12));
    background: color-mix(in srgb, var(--surface-strong, #fff) 92%, #6366f1 8%);
    color: var(--ll-text-muted, #667085);
}

.calendar-connection-chip--connect:hover {
    border-color: rgba(99, 102, 241, 0.22);
    color: #4338ca;
}

.calendar-connection-chip--error {
    border-color: rgba(217, 119, 6, 0.28);
    background: rgba(217, 119, 6, 0.1);
    color: #b45309;
}

.calendar-connection-chip__icon {
    font-weight: 700;
    line-height: 1;
}

.calendar-connection-chip__label--compact {
    display: none;
}

/* Match the hub titlebar small-screen breakpoint so phone/tablet
   widths show "✓ Google" instead of "✓ Google connected". */
@media (max-width: 720px) {
    .calendar-connection-chip__label--full {
        display: none;
    }

    .calendar-connection-chip__label--compact {
        display: inline;
    }

    .calendar-connection-chip {
        padding: 0.22rem 0.5rem;
    }
}

.calendar-lesson-fc-event-inner--has-sync {
    position: relative;
    padding-right: 1.2em;
}

.calendar-lesson-sync-indicator {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    font-size: 0.95em;
    line-height: 1;
    opacity: 1;
    /* Allow native title tooltips on the status glyph */
    pointer-events: auto;
    cursor: help;
    /* Soft dark edge so the glyph stays readable on bright lesson greens */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.55)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.calendar-lesson-sync-indicator--synced {
    /* Legacy corner fold — week/day synced state uses a bottom edge on the event instead. */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 0.7em 0.7em;
    border-color: transparent transparent var(--ll-calendar-google-lesson-green, #51b749) transparent;
    color: transparent;
    filter: none;
    background: transparent;
    font-size: inherit;
    line-height: 0;
}

.calendar-lesson-sync-indicator--pending {
    color: #fff7cc;
}

.calendar-lesson-sync-indicator--error,
.calendar-lesson-sync-indicator--stale {
    color: #ffe4e6;
}

.availability-calendar .availability-lesson-event--lesson .calendar-lesson-sync-indicator--synced {
    border-bottom-color: var(--ll-fc-lesson-accent, var(--ll-calendar-google-lesson-green, #51b749));
    color: transparent;
}

.availability-calendar .availability-lesson-event--lesson .calendar-lesson-sync-indicator--pending {
    color: #fff7cc;
}

.availability-calendar .availability-lesson-event--lesson .calendar-lesson-sync-indicator--error,
.availability-calendar .availability-lesson-event--lesson .calendar-lesson-sync-indicator--stale {
    color: #ffe4e6;
}

.calendar-lesson-sync-indicator--pending i {
    animation: calendar-sync-spin 1.15s linear infinite;
}

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

/* External calendar busy — quiet slate hatch on light canvas. */
.availability-calendar .fc-bg-event.calendar-external-busy-overlay {
    background-color: color-mix(in srgb, #ffffff 88%, #9aa0a6 12%);
    background-image: repeating-linear-gradient(
        -45deg,
        var(--ll-calendar-external-busy-stripe-a),
        var(--ll-calendar-external-busy-stripe-a) 6px,
        var(--ll-calendar-external-busy-stripe-b) 6px,
        var(--ll-calendar-external-busy-stripe-b) 12px
    );
    border: 1px solid var(--ll-calendar-external-busy-border);
    opacity: 1;
}

.availability-calendar .calendar-availability-overlay-label--external-busy {
    color: #5f6368;
    background: color-mix(in srgb, #ffffff 82%, #9aa0a6 18%);
    border: 1px solid var(--ll-calendar-external-busy-border);
    font: var(--ll-type-label-sm, 500 0.75rem/1.2 system-ui, sans-serif);
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    inset: 2px auto auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 1.1em;
    padding: 0 0.15em;
}

/* ---- public/style/features/student-notifications.css ---- */
/*
 * Settings fullscreen shells clip at body-inner. This form is taller than the
 * phone viewport, so the notifications root is the scrollport (same pattern as
 * .profiles-root).
 */
.view-root.view-root--settings-fullscreen .ll-stack-shell[data-ll-stack-id="settings"]:has(#student-notifications-root) .ll-stack-shell__body-inner,
.view-root.view-root--settings-fullscreen .ll-stack-shell[data-ll-stack-id="settings"]:has(#student-notifications-root) .app-route-fullscreen-body-inner,
.view-root.view-root--settings-fullscreen .ll-stack-shell[data-ll-stack-id="settings"]:has(#student-notifications-root) .ll-stack-shell__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.student-notifications-root {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/*
 * Phone viewport sim: the frame is a viewport (see viewport-simulator.js).
 * Settings-fullscreen still clips at body-inner, so keep this form as the
 * scrollport inside that chain.
 */
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .app-shell-main,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) #app,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .today-shell,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .ll-stack-shell__inner,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .ll-surface--screen-stack,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .ll-stack-shell__body,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .app-route-fullscreen-body,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .ll-stack-shell__body-inner,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .app-route-fullscreen-body-inner,
html.ll-vp-sim--phone .app-shell:has(#student-notifications-root) .ll-stack-shell__content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
}

html.ll-vp-sim--phone .student-notifications-root {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-bottom: 2.75rem;
}

.student-notification-picker {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.2rem;
    margin: 0;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--ll-border-subtle, rgba(15, 23, 42, 0.12));
}

.student-notification-picker > span {
    margin: 0;
    color: var(--ll-text-primary, #0f172a);
    font: var(--ll-type-label-sm, 600 0.8125rem/1.35 system-ui, sans-serif);
}

.student-notification-picker .email-input {
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 2.25rem 10px 14px;
    border-radius: 10px;
    font-size: var(--ll-type-title-size, 1.125rem);
    font-weight: var(--ll-type-body-weight, 400);
    line-height: var(--ll-type-title-line, 1.35);
}

.student-notification-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    column-gap: 0.85rem;
    row-gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--ll-border-subtle, rgba(15, 23, 42, 0.12));
    border-radius: 1rem;
    background: var(--ll-surface-raised, #fff);
}

.student-notification-card__heading {
    display: flex;
    grid-column: 1 / -1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.student-notification-card__heading p {
    margin: 0;
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-body-sm, 400 0.9375rem/1.45 system-ui, sans-serif);
}

.student-notification-grid {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
}

.student-notification-card .lesson-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.2rem;
    margin: 0;
}

.student-notification-card .lesson-field > span {
    margin: 0;
    font: var(--ll-type-label-sm, 600 0.8125rem/1.35 system-ui, sans-serif);
}

.student-notification-card .lesson-field > .student-notification-help {
    grid-column: 1;
}

.student-notification-card [data-lead-time-field][hidden] {
    display: none;
}

.student-notification-help {
    display: block;
    margin-top: 0.2rem;
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-label-sm, 500 0.8125rem/1.35 system-ui, sans-serif);
}

.student-notification-template-field,
.student-notification-template-tools,
.student-notification-preview {
    grid-column: 1;
}

.student-notification-template {
    min-height: 6.25rem;
    resize: vertical;
    white-space: pre-wrap;
}

.student-notification-template-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

.student-notification-template-tools label {
    flex: 1 1 12rem;
    min-width: 0;
}

.student-notification-template-tools .ll-btn {
    flex: 0 0 auto;
}

.student-notification-preview {
    max-height: 7.5rem;
    overflow: auto;
    padding: 0.65rem 0.75rem;
    border-radius: 0.8rem;
    background: var(--ll-surface-muted, #f8fafc);
}

.student-notification-preview__label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ll-text-muted, #667085);
    font: var(--ll-type-label-sm, 600 0.8125rem/1.35 system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.student-notification-preview p {
    margin: 0;
    color: var(--ll-text-primary, #0f172a);
    font: var(--ll-type-body-sm, 400 0.9375rem/1.5 system-ui, sans-serif);
    white-space: pre-wrap;
}

.student-notification-preview p.student-notification-preview__error {
    color: var(--ll-color-danger, #b42318);
}

.student-notification-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.student-notification-actions .field-validation-message {
    margin: 0;
}

@media (min-width: 761px) {
    .student-notification-card {
        grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr);
    }

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

    .student-notification-grid:has([data-lead-time-field][hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }

    .student-notification-template-field {
        grid-column: 1;
    }

    .student-notification-template-tools {
        grid-column: 1 / -1;
    }

    .student-notification-preview {
        grid-column: 2;
        grid-row: 4;
        align-self: stretch;
        max-height: 9rem;
    }
}

@media (max-width: 760px) {
    .student-notification-template-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .student-notification-template-tools label,
    .student-notification-template-tools .ll-btn {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ---- public/style/features/free-student-landing.css ---- */
/* Free-plan student Activity panel + titlebar brand */

.titlebar-free-student-home-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    padding: 0 0.15rem;
}

.titlebar-free-student-home-brand[hidden] {
    display: none !important;
}

.titlebar-free-student-home-brand__copy {
    min-width: 0;
    text-align: left;
}

.titlebar-free-student-home-brand__name {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.titlebar-free-student-home-brand__handicap {
    margin: 0.05rem 0 0;
    font-size: 0.68rem;
    line-height: 1.2;
    color: #64748b;
}

.home-panel[data-home-panel-content="activity"] .student-activity-home-panel-body {
    padding: 0;
    background: #e8ecef;
}

.free-student-activity-panel {
    --free-student-landing-gutter: 0.28rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 28rem;
    margin: 0 auto;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    height: 100%;
    overflow: hidden;
}

.free-student-activity-panel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 0 0.5rem;
}

.free-student-landing__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.1rem;
    margin: 0.2rem var(--free-student-landing-gutter, 0.28rem) 0;
    padding: 0.28rem 0.25rem;
    border-radius: 0.55rem;
    background: linear-gradient(145deg, #1a3d32, #0f2922);
    color: #ecfdf5;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
    font-family: inherit;
    font-size: 0.56rem;
    flex: 0 0 auto;
}

.free-student-landing__stat {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 0.22rem;
    row-gap: 0.06rem;
    text-align: center;
    font-family: inherit;
    font-size: inherit;
}

button.free-student-landing__stat {
    appearance: none;
    margin: 0;
    padding: 0.1rem 0.05rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

button.free-student-landing__stat:focus-visible {
    outline: 2px solid #e8bc62;
    outline-offset: 2px;
}

.free-student-landing__stat i {
    order: 1;
    flex: 0 0 auto;
    font-size: 0.62rem;
    line-height: 1;
    opacity: 0.9;
}

.free-student-landing__stat-label {
    order: 2;
    flex: 0 1 auto;
    line-height: 1.15;
}

.free-student-landing__stat-value {
    order: 3;
    flex: 0 0 100%;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1;
}

.free-student-landing__stat-value--goal {
    font-size: 0.58rem;
    font-weight: 600;
}

.free-student-activity-feed {
    margin: 0.35rem var(--free-student-landing-gutter, 0.28rem) 0;
    padding-bottom: 0.15rem;
}

.free-student-activity-feed__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
}

.free-student-activity-feed__heading {
    margin: 0;
    font-size: 0.82rem;
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f172a;
}

.free-student-activity-feed__jump-latest {
    border: 0;
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 600;
    color: #0f766e;
    background: #d1fae5;
    cursor: pointer;
}

.free-student-activity-feed__jump-latest:focus-visible {
    outline: 2px solid #e8bc62;
    outline-offset: 2px;
}

.free-student-activity-feed__item--highlight {
    animation: free-student-feed-highlight 2.2s ease-out;
}

@keyframes free-student-feed-highlight {
    0% { background: rgba(232, 188, 98, 0.35); }
    100% { background: transparent; }
}

.free-student-activity-feed__list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.free-student-activity-feed__item {
    padding: 0.55rem 0.6rem;
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.free-student-activity-feed__item:last-child {
    margin-bottom: 0.15rem;
}

.free-student-activity-feed__item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.free-student-activity-feed__date {
    font-size: 0.68rem;
    color: #64748b;
}

.free-student-activity-feed__type {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #0f766e;
}

.free-student-activity-feed__item--round .free-student-activity-feed__type {
    color: #1d4ed8;
}

.free-student-activity-feed__item--goal .free-student-activity-feed__type {
    color: #c2410c;
}

.free-student-activity-feed__item--practice .free-student-activity-feed__type {
    color: #7c3aed;
}

.free-student-activity-feed__title {
    margin: 0 0 0.2rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.free-student-activity-feed__summary {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #475569;
}

.free-student-activity-feed__meta {
    margin: 0.25rem 0 0;
    font-size: 0.68rem;
    color: #64748b;
}

.free-student-activity-feed__media {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.45rem;
    min-height: 5.5rem;
    border-radius: 0.45rem;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    color: #f8fafc;
    font-size: 1.35rem;
}

.free-student-activity-feed__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.85rem;
    margin-top: 0.4rem;
}

.free-student-activity-feed__action,
.free-student-activity-feed__discuss {
    margin-top: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: #0f766e;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.free-student-activity-feed__empty {
    margin: 0.5rem 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #64748b;
    text-align: center;
}

.free-student-activity-feed__sentinel {
    height: 1px;
}

.free-student-activity-feed__loading {
    margin: 0.35rem 0 0;
    font-size: 0.65rem;
    color: #94a3b8;
    text-align: center;
}

.home-panel[data-home-panel-content="activity"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.home-panel[data-home-panel-content="activity"]:not([hidden]) > .ll-surface--screen-top {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.home-panel[data-home-panel-content="activity"]:not([hidden]) .ll-surface__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    .free-student-activity-panel {
        max-width: 32rem;
    }
}

/* ---- public/style/features/player-rounds.css ---- */
/* Player rounds log */

.player-rounds {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
    margin: 0 auto;
    padding: 0.75rem 0.85rem 1.5rem;
}

.player-rounds__form,
.player-rounds__list-wrap {
    padding: 0.85rem;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.player-rounds__form-title,
.player-rounds__list-title {
    margin: 0 0 0.65rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.player-rounds__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.65rem;
}

.player-rounds__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
}

.player-rounds__field--wide,
.player-rounds__status,
.player-rounds #player-rounds-save {
    grid-column: 1 / -1;
}

.player-rounds__field input,
.player-rounds__field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.55rem;
    background: #fff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 500;
}

.player-rounds__status {
    margin: 0;
    font-size: 0.78rem;
    color: #166534;
}

.player-rounds__status--error {
    color: #b91c1c;
}

.player-rounds__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.player-rounds__empty {
    margin: 0;
    color: #64748b;
    font-size: 0.85rem;
}

.player-rounds__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.player-rounds__row:last-child {
    border-bottom: 0;
}

.player-rounds__row-score {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.player-rounds__row-meta {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.player-rounds__delete {
    flex-shrink: 0;
}

/* ---- public/style/features/player-goals.css ---- */
/* Player goals log */

.player-goals {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
    margin: 0 auto;
    padding: 0.75rem 0.85rem 1.5rem;
}

.player-goals__form,
.player-goals__list-wrap {
    padding: 0.85rem;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

.player-goals__form-title,
.player-goals__list-title {
    margin: 0 0 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.player-goals__lede {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: #64748b;
}

.player-goals__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.player-goals__example {
    appearance: none;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}

.player-goals__example:hover,
.player-goals__example:focus-visible {
    background: #ecfdf5;
    border-color: rgba(22, 101, 52, 0.28);
}

.player-goals__example.is-selected {
    border-color: #1a3d32;
    background: rgba(26, 61, 50, 0.1);
    color: #0f2922;
    font-weight: 600;
}

.player-goals__field-input--filled {
    font-weight: 600;
}

.player-goals__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
}

.player-goals__field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.55rem;
    background: #fff;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 500;
}

.player-goals__status {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    color: #166534;
}

.player-goals__status--error {
    color: #b91c1c;
}

.player-goals__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.player-goals__empty {
    margin: 0;
    color: #64748b;
    font-size: 0.85rem;
}

.player-goals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.15rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.player-goals__row:last-child {
    border-bottom: 0;
}

.player-goals__row-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: var(--ll-type-heading-weight);
    color: #0f172a;
}

.player-goals__delete {
    flex-shrink: 0;
}

/* ---- public/style/theme-overrides.css ---- */
/* Theme overrides — shrink over time; move rules into feature files */
body {
    background:
        radial-gradient(ellipse 80% 50% at 12% -8%, var(--bg-glow-a), transparent 42%),
        radial-gradient(ellipse 70% 45% at 92% 102%, var(--bg-glow-b), transparent 40%),
        var(--bg-main);
    color: var(--text-primary);
}

body,
button,
input,
select,
textarea {
    color: var(--text-primary);
}

a {
    color: var(--accent-info-strong);
}

:is(h1, h2, h3, h4, h5, h6, .titlebar-brand, .section-title, .card-title, .panel-title, .tool-card-title) {
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: -0.015em;
}

:is(p, small, label, .field-help, .helper-text, .meta, .timestamp, .profile-meta, .lesson-meta, .empty-state, .today-chat-empty) {
    color: var(--text-secondary);
}

/* Hero cards: intro line under section title (Capture / Summarize / Create Lesson) */
.common-card .panel-copy>p.lesson-panel-hint,
.summary-card>p.lesson-panel-hint {
    margin: 0;
    color: var(--text-secondary, var(--muted));
    font-size: var(--font-size-md);
    line-height: var(--line-relaxed);
}

:is(.titlebar,
    .common-card,
    .lesson-card,
    .today-chat-iphone,
    .today-lesson-row,
    .student-lesson-row,
    .home-card,
    .home-panel,
    .home-directory-panel,
    .today-panel,
    .settings-panel,
    .settings-menu-card,
    .profile-section,
    .email-panel,
    .email-card,
    .modal,
    .dialog,
    .overlay-panel,
    .menu-shell,
    .titlebar-profile-dropdown,
    .lesson-workspace,
    .lesson-workspace-panel,
    .upload-panel,
    .availability-shell,
    .availability-editor,
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-surface"],
    [class*="-surface "]) {
    background: var(--bg-card);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-soft);
    color: var(--text-primary);
}

body[data-app-surface="student"] .titlebar,
body[data-active-role="student"] .titlebar,
body[data-app-surface="instructor"] .titlebar,
body[data-active-role="instructor"] .titlebar,
body[data-app-surface="student"] .common-card,
body[data-active-role="student"] .common-card,
body[data-app-surface="instructor"] .common-card,
body[data-active-role="instructor"] .common-card {
    background: var(--bg-card);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-soft);
    color: var(--text-primary);
}

/* Hub pills sit directly under this bar; full --shadow-soft reads as a heavy slab above the nav. */
body[data-app-surface="student"] header.titlebar.titlebar--lesson,
body[data-active-role="student"] header.titlebar.titlebar--lesson,
body[data-app-surface="instructor"] header.titlebar.titlebar--lesson,
body[data-active-role="instructor"] header.titlebar.titlebar--lesson {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

:is(.titlebar-profile-dropdown,
    .email-panel,
    .modal,
    .dialog,
    .overlay-panel,
    .lesson-workspace-panel,
    .settings-menu-card,
    .availability-segmented) {
    background: var(--bg-elevated);
}

/* Schedule grid canvas stays light — do not paint .availability-grid-scroll dark (FOUC). */
.home-panel.home-schedule-panel-root .availability-grid-scroll,
.availability-shell .availability-grid-scroll,
.availability-editor--embedded .availability-grid-scroll,
.availability-calendar {
    background: #ffffff;
    color: #3c4043;
    box-shadow: none;
}

:is(.availability-segmented, .tab-list, .segmented-control) {
    border: 1px solid var(--border-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-soft);
}

:is(.home-pill-button, .availability-mode-pill, .tab-button, .titlebar-profile-dropdown__item) {
    color: var(--text-secondary);
}

.home-pill-button.is-active {
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-info) 12%);
    color: var(--text-heading);
    font-weight: 600;
    border-color: var(--accent-info-border);
    box-shadow: var(--glow-subtle);
}

/* Unify active-pill hover: stays info-cyan, no green flash from base rule */
.home-pill-button.is-active:hover {
    background: color-mix(in srgb, var(--bg-elevated) 84%, var(--accent-info) 16%);
    color: var(--text-heading);
    border-color: var(--accent-info-border);
    box-shadow: var(--glow-info);
}

:is(.availability-mode-pill.is-active, .tab-button.is-active) {
    background: color-mix(in srgb, var(--bg-elevated) 82%, var(--accent-info) 18%);
    border-color: var(--accent-info-border);
    color: var(--text-heading);
    box-shadow: var(--glow-subtle);
}

/* ll-btn primary uses green from buttons.css — do not override to neutral here. */

:is(.ll-btn.ll-btn--ghost, .ghost-action, .lesson-action-secondary, .email-panel-close):not(.ll-back-action):not(.dialog-header-back) {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

:is(input, select, textarea, .email-input, .lesson-input, .search-input) {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

:is(input, select, textarea, .email-input, .lesson-input, .search-input)::placeholder {
    color: var(--text-muted);
}

/* Titlebar search is dark-native; override light-mode input defaults. */
header.titlebar .app-shell-search input {
    background: transparent;
    color: var(--text-primary);
}

header.titlebar .app-shell-search input::placeholder {
    color: color-mix(in srgb, var(--text-primary) 45%, transparent);
    opacity: 1;
}

/* ── Dark-native titlebar chrome ───────────────────────────────────────────── */
/* Menu button: icon-only — no nested chip / native button chrome */
.app-shell-menu-button {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--text-secondary);
}

.app-shell-menu-button:hover {
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
}

/* Suggest dropdown: dark card background */
.app-shell-search-suggest {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-panel);
}

.app-shell-search-suggest__row {
    color: var(--text-primary);
}

.app-shell-search-suggest__row:hover,
.app-shell-search-suggest__row:focus-visible {
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-info) 12%);
}
/* ─────────────────────────────────────────────────────────────────────────── */

:is(input, select, textarea, button):focus-visible {
    outline-color: var(--primary-strong);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.lesson-editor-route {
    background: transparent;
    --lesson-workspace-gap: 10px;
    --lesson-card-gap: 10px;
    --lesson-section-padding: 14px;
    --lesson-section-padding-compact: 10px;
    --lesson-compact-gap: 7px;
    --lesson-summary-height: 38px;
    --lesson-chip-height: 30px;
    --lesson-action-height: 32px;
    --lesson-header-min-height: 58px;
    --lesson-compact-spacing: 7px;
    --lesson-action-chip-gap: 6px;
}

.lesson-workspace-editor-stack {
    gap: var(--lesson-workspace-gap, var(--lesson-card-gap));
    min-width: 0;
    background: transparent;
    box-shadow: none;
}

.lesson-workspace-header {
    display: grid;
    gap: var(--lesson-compact-spacing);
    min-height: var(--lesson-header-min-height);
    padding: var(--lesson-section-padding);
    border: none;
    border-bottom: 1px solid var(--lesson-border-subtle, var(--border-default));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.lesson-workspace-screen-header.lesson-workspace-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-top: max(8px, var(--lesson-section-padding));
}

.lesson-workspace-screen-header--route-stack-chrome {
    padding-top: 0;
    border-bottom: none;
}

.lesson-workspace-screen-header--route-stack-chrome .lesson-workspace-screen-header__top {
    padding-top: 0;
}

.lesson-workspace-screen-header__top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.lesson-workspace-screen-header__top.app-route-fullscreen-topbar {
    width: 100%;
    margin: 0;
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
    border-bottom: none;
    background: transparent;
}

.lesson-workspace-screen-header__top.app-route-fullscreen-topbar.ll-header-bar--centered-title > .ll-stack-shell__title,
.lesson-workspace-screen-header__top.app-route-fullscreen-topbar.ll-header-bar--centered-title > .app-route-fullscreen-title {
    font-size: var(--ll-type-title-size);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, var(--ink));
}

.lesson-workspace-screen-header__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.lesson-workspace-screen-header__top.app-route-fullscreen-topbar + .lesson-workspace-screen-header__body {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.lesson-workspace-screen-header .lesson-workspace-header__title:is(h1, h2, h3) {
    margin: 0;
    font-size: max(var(--ll-type-display-size), clamp(1.45rem, 3.6vw, 2.2rem));
    font-weight: var(--ll-type-title-weight);
    line-height: var(--line-tight);
    letter-spacing: -0.01em;
    color: var(--lesson-header-text, var(--text-primary));
    text-align: left;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.lesson-workspace-screen-header .lesson-workspace-header__subtitle {
    margin: 0;
    font-size: var(--ll-type-body-size);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
}

.lesson-workspace-screen-header .lesson-workspace-header__subtitle-sep {
    margin: 0 0.35em;
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.lesson-workspace-screen-header .lesson-workspace-header__subtitle-part[data-part="title"] {
    color: var(--text-primary, var(--lesson-header-text));
    font-weight: 600;
}

.lesson-workspace-screen-header .lesson-workspace-header__status {
    margin: 6px 0 0;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.35;
    color: var(--text-secondary);
}

.lesson-workspace-screen-header .lesson-workspace-header__status-sep {
    margin: 0 0.35rem;
    opacity: 0.65;
}

.lesson-workspace-tab[data-lesson-workspace-tab="info"],
#ll-ws-tab-info {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tabs {
    margin-bottom: 0;
}

.lesson-workspace-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-subtle, rgba(148, 163, 184, 0.28)) 72%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.lesson-workspace-tabs[data-lesson-workspace-tab-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-workspace-tab {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 40px;
    padding: 6px 4px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 94%, var(--text-primary));
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: -0.01em;
    line-height: var(--ll-type-heading-line);
    cursor: pointer;
    transition:
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lesson-workspace-tab:hover:not(:disabled):not(.is-locked):not(.is-active) {
    color: var(--text-primary);
}

.lesson-workspace-tab__inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.lesson-workspace-tab__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ll-type-body-size);
    line-height: 1;
    opacity: 0.72;
}

.lesson-workspace-tab.is-active .lesson-workspace-tab__icon {
    opacity: 1;
}

.lesson-workspace-tab__label {
    min-width: 0;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    line-height: 1.05;
}

.lesson-workspace-tab__status {
    flex: 0 0 auto;
    margin: 0;
    line-height: 0;
}

.lesson-workspace-tab__status-mark {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    box-sizing: border-box;
}

.lesson-workspace-tab__status--empty {
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
}

.lesson-workspace-tab__status--empty .lesson-workspace-tab__status-mark {
    background: transparent;
}

.lesson-workspace-tab__status--complete {
    color: var(--accent-success-strong);
}

.lesson-workspace-tab__status--complete .lesson-workspace-tab__status-mark {
    border-color: currentColor;
    background: currentColor;
}

.lesson-workspace-tab__status--partial {
    color: var(--accent-warm, #ca8a04);
}

.lesson-workspace-tab__status--partial .lesson-workspace-tab__status-mark {
    border-color: currentColor;
    background: conic-gradient(currentColor 0deg 180deg, transparent 180deg 360deg);
}

.lesson-workspace-context-bar {
    margin: 0 0 8px;
    padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));
}

.lesson-workspace-context-bar__line {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--stroke) 88%, transparent);
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 42%, transparent);
    box-shadow: none;
}

.lesson-workspace-context-bar__line .today-recent-lesson-card__kind,
.lesson-workspace-context-bar__line .today-recent-lesson-card__kind--lesson,
.lesson-workspace-context-bar__line .today-recent-lesson-card__kind--practice,
.lesson-workspace-context-bar__line .today-recent-lesson-card__kind--thought,
.lesson-workspace-context-bar__line .today-recent-lesson-card__kind--note {
    color: color-mix(in srgb, var(--text-muted) 92%, transparent);
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
    border-color: color-mix(in srgb, var(--text-muted) 16%, transparent);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.lesson-workspace-context-bar__line .lesson-workspace-context-bar__schedule {
    display: inline-flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    min-width: 0;
    white-space: nowrap;
}

.lesson-workspace-context-bar__line .today-recent-lesson-card__date,
.lesson-workspace-context-bar__line .today-recent-lesson-card__time {
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
    font-weight: var(--ll-type-meta-weight);
    font-size: max(var(--ll-type-meta-size), clamp(0.68rem, 0.5rem + 0.75vw, 0.76rem));
}

.lesson-workspace-context-bar__line .today-recent-lesson-card__date + .today-recent-lesson-card__time::before {
    content: '·';
    margin-right: 6px;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent);
    font-weight: 500;
    opacity: 1;
}

.lesson-workspace-context-bar__line .lesson-workspace-context-bar__schedule + .lesson-workspace-context-bar__title::before,
.lesson-workspace-context-bar__line .today-recent-lesson-card__kind + .lesson-workspace-context-bar__title::before,
.lesson-workspace-context-bar__line .today-recent-lesson-card__time + .lesson-workspace-context-bar__title::before,
.lesson-workspace-context-bar__line .today-recent-lesson-card__date + .lesson-workspace-context-bar__title::before {
    content: '·';
    margin-right: 6px;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent);
    font-weight: 500;
    opacity: 1;
}

.lesson-workspace-context-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: var(--ll-type-label-weight);
    color: color-mix(in srgb, var(--text-muted) 92%, transparent);
    font-size: max(var(--ll-type-body-sm-size), clamp(0.78rem, 0.34rem + 1.7vw, 0.9rem));
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.lesson-workspace-context-bar .lesson-workspace-header__subtitle {
    margin: 0;
    font-size: var(--ll-type-body-size);
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-workspace-context-bar .lesson-workspace-header__subtitle-part[data-part="student"] {
    color: color-mix(in srgb, var(--text-muted) 92%, transparent);
    font-weight: var(--ll-type-label-weight);
}

.lesson-workspace-context-bar .lesson-workspace-header__subtitle-sep {
    margin: 0 0.35em;
    color: color-mix(in srgb, var(--text-muted) 72%, transparent);
}

.lesson-workspace-tab.is-active {
    color: var(--text-heading);
    font-weight: 600;
    border-bottom-color: color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 62%, transparent);
    background: transparent;
    box-shadow: none;
}

.lesson-workspace-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 55%, transparent);
    outline-offset: 2px;
}

.lesson-workspace-tab:disabled,
.lesson-workspace-tab.is-locked {
    opacity: 0.42;
    cursor: not-allowed;
}

.lesson-workspace-tab-panel[hidden] {
    display: none !important;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) {
    gap: 0;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) > .lesson-workspace-tabs {
    margin-top: 0;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) > .lesson-workspace-header:empty {
    display: none;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) .lesson-workspace-tab-panel {
    min-width: 0;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) .lesson-workspace-tab-panel .summary-card.lesson-phase-card,
.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) .lesson-workspace-tab-panel .summary-card.lesson-section-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-tabs) .lesson-workspace-tab-panel__body {
    min-width: 0;
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

.lesson-workspace-summarize-prereq {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md, 14px);
    border: 1px solid color-mix(in srgb, var(--accent-warm, #ca8a04) 35%, var(--stroke));
    background: color-mix(in srgb, var(--accent-warm, #ca8a04) 10%, var(--surface-card, rgba(255, 252, 247, 0.88)));
    color: var(--text-primary);
    text-align: left;
}

.lesson-workspace-summarize-prereq p {
    margin: 0;
    line-height: 1.5;
}

.lesson-workspace-summarize-content--blocked {
    opacity: 0.55;
    pointer-events: none;
}

.lesson-workspace-summarize-content--blocked #summary-media-required-note {
    display: none;
}

.lesson-workspace-screen-header .lesson-workspace-header__meta {
    margin: 2px 0 0;
}

.lesson-workspace-screen-header .lesson-workspace-header__progress,
.lesson-workspace-screen-header > .lesson-workspace-quick-actions {
    width: 100%;
}

.lesson-workspace-header__lead {
    min-width: 0;
}

.lesson-workspace-header__copy {
    min-width: 0;
    margin: 0;
}

.lesson-workspace-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

.lesson-workspace-header__session-kind {
    min-width: 0;
}

.lesson-workspace-header__session-name {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    color: var(--text-primary, var(--lesson-header-text));
}

.lesson-workspace-header__copy h2 {
    margin: 0;
    font-size: max(var(--ll-type-heading-size), clamp(0.98rem, 2.8vw, 1.08rem));
    font-weight: var(--ll-type-title-weight);
    line-height: var(--line-tight);
    letter-spacing: 0.01em;
}

.lesson-workspace-header__copy .lesson-panel-hint {
    font-size: var(--ll-type-body-size);
}

.lesson-workspace-header__title-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lesson-workspace-header__title-row .lesson-workspace-header__title-toggle,
.lesson-workspace-header__title-row > h2 {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}

.lesson-workspace-header__title-row .lesson-workspace-header__title-toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lesson-workspace-header__title-row .lesson-workspace-completion__mode-pill {
    flex: 0 0 auto;
    margin-left: auto;
}

.lesson-workspace-header__hint-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.lesson-workspace-header__hint-row .lesson-workspace-header-hint {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.lesson-workspace-header__title-toggle {
    position: relative;
    min-width: 0;
    margin: 0 0 4px;
    padding: 0;
    font-size: max(var(--ll-type-heading-size), clamp(0.98rem, 2.8vw, 1.08rem));
    font-weight: var(--ll-type-title-weight);
    line-height: var(--line-tight, 1.2);
    letter-spacing: 0.01em;
    color: var(--lesson-header-text, var(--text-primary));
}

/* Accent bar + title inset come from .lesson-workspace-editor-stack .panel-copy (do not double padding-left here). */
.lesson-workspace-header__copy.panel-copy {
    position: relative;
}

.lesson-workspace-header__copy > p.lesson-workspace-header__title-toggle.lesson-panel-hint {
    color: var(--lesson-header-text, var(--text-primary));
}

.lesson-workspace-header__copy > p.lesson-workspace-header__title-toggle .lesson-session-kind {
    margin: 0;
}

.lesson-workspace-header__session-kind {
    margin-top: 2px;
}

.lesson-workspace-header__copy > p.lesson-workspace-header__title-toggle .lesson-session-kind-toggle--workspace-header,
.lesson-workspace-header__session-kind .lesson-session-kind-toggle--workspace-header {
    gap: 3px;
}

.lesson-workspace-completion,
.lesson-workspace-quick-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lesson-action-chip-gap);
}

.lesson-workspace-header__progress {
    width: 100%;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--lesson-border-subtle, var(--border-default));
}

.lesson-workspace-header__progress .lesson-workspace-completion {
    width: 100%;
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

.lesson-workspace-header > .lesson-workspace-completion {
    width: 100%;
    margin: 0;
}

.lesson-workspace-completion__mode-pill,
.lesson-workspace-completion__step,
.lesson-workspace-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--lesson-chip-height, 32px);
    border-radius: 999px;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-title-weight);
    line-height: 1;
}

.lesson-workspace-completion {
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.lesson-workspace-completion::-webkit-scrollbar {
    display: none;
}

.lesson-workspace-completion__mode-pill {
    flex: 0 0 auto;
    padding: 5px 10px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-title-weight);
    letter-spacing: 0.02em;
    border: 1px solid var(--border-subtle, var(--lesson-border-subtle, var(--border-default)));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.06)) 88%, transparent);
    color: var(--text-primary, var(--lesson-header-text));
}

.lesson-workspace-completion__mode-pill--new {
    border-color: var(--accent-success-border);
    background: var(--accent-success-soft);
    color: var(--accent-success-strong);
}

.lesson-workspace-completion__mode-pill--edit {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(15, 23, 42, 0.05)) 76%, transparent);
}

.lesson-workspace-completion__step {
    flex: 0 0 auto;
    padding: 5px 7px 5px 5px;
    font-size: var(--ll-type-label-size);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(15, 23, 42, 0.05)) 76%, transparent);
}

.lesson-workspace-completion__step.is-complete {
    color: var(--accent-success-strong);
}

.lesson-workspace-completion__step--action {
    cursor: pointer;
}

.lesson-workspace-completion__mark {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: var(--ll-type-label-size);
    line-height: 1;
}

/* Workspace progress (Student / Time / Media / Summary / Shared): fit phone column (~360px). */
@media (max-width: 420px) {
    .lesson-editor-route {
        --lesson-section-padding: 6px;
        --lesson-section-padding-compact: 5px;
        --lesson-card-gap: 6px;
        --lesson-compact-gap: 4px;
        --lesson-compact-spacing: 5px;
    }

    .lesson-editor-route .lesson-workspace-phase__summary-row {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .lesson-editor-route .lesson-workspace-phase__summary-chevron {
        align-self: flex-start;
        flex-shrink: 0;
    }

    .lesson-editor-route .lesson-workspace-header > .lesson-workspace-completion,
    .lesson-editor-route .lesson-workspace-header__progress .lesson-workspace-completion,
    .lesson-editor-route .lesson-workspace-phase__summary-copy > .lesson-workspace-completion {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        overflow: visible;
        margin-top: 4px;
    }

    .lesson-editor-route .lesson-workspace-completion__mode-pill {
        justify-content: center;
        padding: 4px 8px;
        font-size: max(var(--ll-type-micro-size), clamp(0.64rem, 2.7vw, 0.74rem));
    }

    .lesson-editor-route .lesson-workspace-completion__step {
        flex: initial;
        min-width: 0;
        width: auto;
        justify-content: center;
        padding: 4px 1px;
        gap: 3px;
        font-size: max(var(--ll-type-micro-size), clamp(0.6rem, 2.4vw, 0.72rem));
    }

    .lesson-editor-route .lesson-workspace-completion__mark {
        width: 15px;
        height: 15px;
        font-size: var(--ll-type-micro-size);
        flex-shrink: 0;
    }

    .lesson-editor-route .lesson-workspace-completion__step > span:last-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Stack shell body is the main width budget on /edit-lesson (~16px/side at default). */
    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-body-inner {
        padding:
            4px
            max(6px, env(safe-area-inset-right, 0px))
            max(6px, env(safe-area-inset-bottom, 0px))
            max(6px, env(safe-area-inset-left, 0px));
        gap: 4px;
    }

    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack > .lesson-workspace-tabs {
        margin-bottom: 6px;
    }

    .lesson-editor-route .lesson-workspace-header {
        padding-inline: 0;
        padding-block: 4px 6px;
    }

    .lesson-editor-route .lesson-workspace-tabs {
        gap: 0;
        margin-bottom: 8px;
        padding: 0 0 1px;
    }

    .lesson-editor-route .lesson-workspace-tab {
        min-width: 0;
        min-height: 38px;
        padding: 5px 2px 7px;
        font-size: var(--ll-type-heading-size);
    }

    .lesson-editor-route .lesson-workspace-tab__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    .lesson-editor-route .lesson-workspace-tab__label {
        letter-spacing: -0.03em;
        font-size: inherit;
        line-height: var(--ll-type-label-line);
        text-align: center;
    }

    .lesson-editor-route .lesson-workspace-tab__status {
        margin-top: 0;
    }

    .lesson-editor-route .lesson-workspace-tab__status-mark {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }

    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tabs {
        gap: 0;
    }

    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab {
        min-height: 38px;
        padding: 5px 2px 7px;
        font-size: var(--ll-type-heading-size);
    }

    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }

    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab__label {
        font-size: inherit;
        line-height: var(--ll-type-label-line);
        text-align: center;
    }

    .view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-tab__status-mark {
        width: 12px;
        height: 12px;
        border-width: 1.5px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack:has(.lesson-workspace-tabs) .lesson-workspace-tab-panel__body {
        padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
    }

    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--participant > .lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture > .lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--summarize > .lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--finalize > .lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--share > .lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--save > .lesson-phase-card,
    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-editor-sibling--send > .lesson-phase-card {
        padding: 6px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .lesson-workspace-phase__body--capture > .lesson-capture-section--embedded {
        padding: 4px;
        gap: 4px;
    }

    .lesson-editor-route .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture > .lesson-capture-workspace-pinned-toolbar {
        margin-bottom: 4px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-row {
        padding: 0;
    }

    .lesson-editor-route .lesson-workspace-editor-sibling--capture .upload-media-row {
        padding: 6px 8px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-controls {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 2px;
        column-gap: 6px;
        gap: 2px 6px;
    }

    .lesson-editor-route .lesson-workspace-editor-sibling--capture .upload-media-controls {
        flex-wrap: nowrap;
        gap: 3px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-include-toggle {
        gap: 3px;
        min-height: 26px;
        font-size: max(var(--ll-type-meta-size), 0.68rem);
        flex: 0 1 auto;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-row__head .upload-media-include-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 12px 10px 12px 8px;
        flex: 0 0 auto;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-include-toggle .upload-media-option-checkbox {
        width: 13px;
        height: 13px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-row__head .upload-media-include-toggle .upload-media-option-checkbox {
        width: 18px;
        height: 18px;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-link-summary-toggle .upload-media-option-label {
        letter-spacing: -0.02em;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-controls-meta {
        order: 4;
        flex: 1 1 100%;
        min-width: 0;
        max-width: none;
        font-size: max(var(--ll-type-meta-size), 0.66rem);
        text-align: left;
        padding-inline-start: 16px;
    }

    .lesson-editor-route .lesson-workspace-editor-sibling--capture .upload-media-controls-meta--capture {
        order: unset;
        flex: 0 1 auto;
        flex-basis: auto;
        max-width: none;
        padding-inline-start: 0;
        font-size: max(var(--ll-type-micro-size), 0.6rem);
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-actions {
        order: 3;
        gap: 4px;
        margin-left: auto;
    }

    .lesson-editor-route .lesson-workspace-editor-stack .upload-media-actions-menu__trigger {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }

    .lesson-editor-route .lesson-workspace-editor-sibling--capture .upload-media-actions-menu__trigger {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
    }

    .lesson-editor-route .lesson-workspace-phase__summary-copy h2,
    .lesson-editor-route .lesson-workspace-phase__summary-copy .lesson-panel-hint {
        overflow-wrap: anywhere;
    }
}

.lesson-workspace-quick-action {
    padding: 10px 18px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary, var(--lesson-header-text));
    cursor: pointer;
    min-height: 42px;
    border-radius: 12px;
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.lesson-workspace-quick-action--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.lesson-workspace-quick-action:hover,
.lesson-workspace-quick-action:focus-visible {
    border-color: color-mix(in srgb, var(--text-primary, #fff) 20%, var(--border-subtle));
    outline: none;
    transform: translateY(-1px);
}

.lesson-workspace-quick-action--primary:hover,
.lesson-workspace-quick-action--primary:focus-visible {
    border-color: var(--primary-strong);
    background: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
}

.lesson-workspace-section-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lesson-compact-gap, var(--lesson-compact-spacing));
    min-height: var(--lesson-summary-height, 44px);
    margin-top: 6px;
}

.lesson-workspace-section-meta.lesson-panel-hint {
    margin: 0;
    min-width: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-section-summary {
    min-height: 0;
    margin-top: 4px;
}

.lesson-workspace-section-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-heading);
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.lesson-workspace-section-action:hover,
.lesson-workspace-section-action:focus-visible {
    border-color: color-mix(in srgb, var(--text-primary, #fff) 18%, var(--border-subtle));
    outline: none;
    transform: translateY(-1px);
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling {
    background: transparent;
    box-shadow: none;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture {
    overflow: visible;
}

.lesson-workspace-editor-stack .lesson-workspace-phase {
    display: grid;
    gap: var(--lesson-compact-spacing);
    min-width: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-phase>.lesson-workspace-phase__summary {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
    list-style: none;
}

/* Locked phases (prerequisites incomplete): clearly muted but still readable. */
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] > .lesson-phase-card {
    opacity: 0.48;
    filter: saturate(0.28) brightness(0.9);
    border-color: color-mix(in srgb, var(--lesson-border-subtle, var(--border-default)) 92%, transparent);
    background: color-mix(in srgb, var(--lesson-surface-card-strong, var(--bg-card)) 88%, var(--bg-elevated));
    box-shadow: none;
    outline: none;
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase > .lesson-workspace-phase__summary {
    cursor: not-allowed;
    pointer-events: none;
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .lesson-workspace-phase__title,
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy h2 {
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .lesson-workspace-phase__hint,
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .lesson-panel-hint {
    color: color-mix(in srgb, var(--text-secondary) 58%, transparent);
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-chevron {
    color: color-mix(in srgb, var(--text-secondary) 45%, transparent);
    opacity: 0.55;
}

.lesson-workspace-editor-stack .lesson-workspace-phase>.lesson-workspace-phase__summary::-webkit-details-marker {
    display: none;
}

.lesson-workspace-phase__summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--lesson-compact-spacing);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lesson-workspace-phase__summary-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.lesson-workspace-summarize-share-btn {
    min-height: 34px;
    padding: 6px 14px;
}

.lesson-workspace-share-tab-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 10px;
}

.lesson-workspace-share-new-recipients-filter {
    margin: 0;
}

.lesson-workspace-share-new-recipients-filter .lesson-people-picker-checkbox-row {
    margin: 0;
}

.lesson-workspace-editor-sibling--share .lesson-workspace-summary-share-banner:not([hidden]) + .lesson-workspace-share-tab-actions {
    margin-top: 4px;
}

.lesson-workspace-editor-sibling--share .lesson-workspace-summarize-share-btn {
    min-height: 40px;
    padding: 8px 18px;
}

.lesson-workspace-summarize-inline-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
}

.lesson-workspace-summarize-inline-toolbar[hidden] {
    display: none !important;
}

.lesson-workspace-summarize-inline-toolbar .lesson-workspace-summarize-toolbar-mount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lesson-workspace-summarize-inline-toolbar #create-lesson-summary.lesson-workspace-summarize-refresh-btn,
.lesson-workspace-summarize-inline-toolbar #edit-lesson-summary.lesson-workspace-summarize-edit-btn,
.lesson-workspace-summarize-inline-toolbar #play-lesson-summary.lesson-workspace-summarize-play-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: var(--ll-type-label-size);
}

.summary-workspace-audio-slot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lesson-workspace-summarize-inline-toolbar .summary-workspace-audio-slot .summary-audio-toolbar {
    margin: 0;
    gap: 8px;
}

.lesson-workspace-summarize-inline-toolbar .summary-workspace-audio-slot .summary-audio-btn.lesson-workspace-summarize-play-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: var(--ll-type-label-size);
}

.summary-markdown-wrap--wysiwyg[contenteditable="true"] {
    min-height: 240px;
    padding: 12px 14px;
    border: 1px solid var(--ll-border-subtle, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    outline: none;
}

.summary-markdown-wrap--wysiwyg[contenteditable="true"]:focus {
    border-color: var(--ll-accent, #0f766e);
    box-shadow: 0 0 0 1px var(--ll-accent, #0f766e);
}

.summary-panel-close-sink {
    display: none !important;
}

.lesson-workspace-summarize-inline-toolbar #create-lesson-summary.lesson-workspace-summarize-refresh-btn .summary-action-icon {
    width: 14px;
    height: 14px;
}

.lesson-workspace-summarize-toolbar-mount #create-lesson-summary.lesson-workspace-summarize-refresh-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: var(--ll-type-label-size);
}

.lesson-workspace-summarize-toolbar-mount #create-lesson-summary.lesson-workspace-summarize-refresh-btn .summary-action-icon {
    width: 14px;
    height: 14px;
}

.summary-doc-top-row--embedded {
    grid-template-columns: minmax(0, 1fr);
}

[data-summary-workspace-embedded="true"] .summary-doc-body {
    margin-top: 0;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.5;
    color: var(--text-primary, var(--ink));
    max-height: none;
    overflow: visible;
    white-space: normal;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--streaming {
    min-height: 4rem;
    overflow-anchor: none;
}

[data-summary-workspace-embedded="true"] .summary-doc-body p {
    margin: 0 0 0.65em;
}

[data-summary-workspace-embedded="true"] .summary-doc-body > :first-child,
[data-summary-workspace-embedded="true"] .summary-doc-body :is(h1, h2, h3, h4):first-child {
    margin-top: 0;
}

[data-summary-workspace-embedded="true"] .summary-doc-body :is(h1, h2, h3, h4) {
    margin: 0 0 0.5em;
    font-weight: 700;
    line-height: 1.25;
}

[data-summary-workspace-embedded="true"] .summary-doc-top-row--embedded {
    display: none;
}

.lesson-workspace-summary-share-banner {
    margin: 0 0 0.85rem;
    padding: 0;
    color: var(--text-secondary, var(--muted));
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.45;
}

.lesson-workspace-editor-sibling--summarize > .summary-card.lesson-phase-card > .lesson-workspace-tab-panel__body {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
}

.lesson-workspace-editor-sibling--summarize [data-lesson-summarize-summary-mount] > .lesson-workspace-editor-sibling--summary .summary-shell[data-summary-workspace-embedded="true"] > .summary-card,
.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] > .lesson-workspace-editor-sibling--summary .summary-shell[data-summary-workspace-embedded="true"] > .summary-card,
.lesson-workspace-editor-sibling--capture [data-lesson-summarize-summary-mount] > .lesson-workspace-editor-sibling--summary .summary-shell[data-summary-workspace-embedded="true"] > .summary-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 0;
    box-sizing: border-box;
}

[data-summary-workspace-embedded="true"] .lesson-workspace-summary-share-banner:not([hidden]) + .summary-doc-indicator {
    margin-top: 0;
}

.lesson-workspace-editor-sibling--summarize [data-lesson-summarize-summary-mount] [data-summary-workspace-embedded="true"] .summary-doc-indicator,
.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] [data-summary-workspace-embedded="true"] .summary-doc-indicator,
.lesson-workspace-editor-sibling--capture [data-lesson-summarize-summary-mount] [data-summary-workspace-embedded="true"] .summary-doc-indicator {
    padding: 0;
    gap: 12px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

[data-summary-workspace-embedded="true"] .lesson-workspace-summarize-inline-toolbar {
    margin: 0 0 4px;
}

[data-summary-workspace-embedded="true"] .summary-doc-teaser {
    display: none !important;
}

[data-summary-workspace-embedded="true"] .summary-doc-info {
    margin: 0 0 12px;
}

[data-summary-workspace-embedded="true"] .summary-doc-info[hidden] {
    display: none !important;
}

.summary-doc-heading-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.summary-doc-heading-row[hidden] {
    display: none !important;
}

.summary-doc-edit-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--lesson-border-subtle, var(--border-default));
    border-radius: 8px;
    background: var(--lesson-surface-control, var(--surface-card-strong));
    color: var(--lesson-header-text, var(--text-primary));
    cursor: pointer;
}

.summary-doc-edit-icon-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border-default));
}

.summary-doc-edit-icon-btn:focus-visible {
    outline: 2px solid var(--focus-ring, var(--brand-primary));
    outline-offset: 2px;
}

.summary-doc-edit-icon-btn.is-active {
    border-color: color-mix(in srgb, var(--brand-primary) 55%, var(--border-default));
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--lesson-surface-control, var(--surface-card-strong)));
}

.summary-doc-edit-icon-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.summary-doc-heading {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary, var(--lesson-header-text, #f4f9ff));
    font-size: max(var(--ll-type-display-size), clamp(1.25rem, 3.8vw, 1.55rem));
    font-weight: var(--ll-type-display-weight);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-inline-edit-text.summary-markdown-wrap--wysiwyg[contenteditable="true"] {
    min-height: 12rem;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing [data-summary-media-mount],
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-mount {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ll-border-subtle, rgba(255, 255, 255, 0.12));
}

[data-summary-workspace-embedded="true"] .summary-doc-info.summary-doc-info--editing .summary-info-row--edit-shell .summary-info-value[data-summary-info-editable="true"] {
    border-radius: 6px;
    outline: 1px dashed var(--ll-border-subtle, rgba(255, 255, 255, 0.28));
    outline-offset: 2px;
    cursor: pointer;
}

[data-summary-workspace-embedded="true"] .summary-doc-info.summary-doc-info--editing .summary-info-row--edit-shell .summary-info-value[data-summary-info-editable="true"]:hover {
    outline-color: var(--ll-accent, #0f766e);
}

[data-summary-workspace-embedded="true"] .summary-doc-info.summary-doc-info--editing .summary-info-placeholder {
    color: var(--text-secondary, rgba(244, 249, 255, 0.72));
    font-style: italic;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-link-item--editable {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.5rem;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-link-item--editable .summary-media-link-card {
    flex: 1 1 12rem;
    min-width: 0;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-toolbar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    padding: 0.15rem 0;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-handle,
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-open,
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-replace,
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ll-border-subtle, rgba(255, 255, 255, 0.16));
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary, rgba(244, 249, 255, 0.78));
    cursor: pointer;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-handle {
    cursor: grab;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-handle:active {
    cursor: grabbing;
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-remove:hover,
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-open:hover,
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-replace:hover,
[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-edit-handle:hover {
    color: var(--text-primary, #f4f9ff);
    border-color: var(--ll-accent, #0f766e);
}

[data-summary-workspace-embedded="true"] .summary-doc-body.summary-doc-body--editing .summary-media-link-item--editable.is-dragging {
    opacity: 0.55;
}

.summary-inline-markdown-sink {
    display: none !important;
}

.lesson-workspace-phase__summary-copy > .lesson-workspace-phase__title,
.lesson-workspace-phase__summary-copy > h2.lesson-workspace-phase__title,
.lesson-workspace-phase__title {
    display: block;
    visibility: visible;
    margin: 0 0 4px;
    padding: 0;
    color: var(--text-primary, var(--lesson-header-text, #f4f9ff));
    font-family: inherit;
    font-size: max(var(--ll-type-display-size), clamp(1.25rem, 3.8vw, 1.55rem));
    font-weight: var(--ll-type-display-weight);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.lesson-workspace-phase__hint {
    display: block;
    margin: 0;
    color: var(--lesson-muted-text, #b7c5d4);
    font-size: var(--ll-type-body-size);
    font-weight: 400;
    line-height: var(--ll-line-helper, 1.35);
}

.lesson-workspace-details-hint {
    margin: 0;
}

.lesson-workspace-details-students {
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--lesson-border-subtle, var(--border-default));
}

/* Book tab: compact students block, picker, and session-kind controls */
#lesson-workspace-tabpanel-info .lesson-workspace-details-students,
#lesson-workspace-section-save .lesson-workspace-details-students {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--lesson-border-subtle, var(--border-default));
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book .lesson-event-field__body,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book .lesson-event-field__body {
    width: 100%;
}

/* Unified layout: inline student picker (search + New student), no Students label row */
.lesson-workspace-details-students--unified-picker {
    margin-top: 10px;
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: 0;
}

.lesson-workspace-inline-participants-field--unified {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.lesson-workspace-inline-participants-field--unified .lesson-event-field__body {
    width: 100%;
    align-items: stretch;
}

/* Unified student picker: selected chip(s) above the search field + New student. */
.lesson-workspace-share-recipient-group--unified-picker {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
}

.lesson-workspace-share-recipient-group--unified-picker .lesson-event-student-chips--attached-only,
.lesson-workspace-share-recipient-group--unified-picker .lesson-event-student-chips {
    flex: 0 0 auto;
    justify-content: flex-start;
    align-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin-inline: 0;
}

.lesson-workspace-share-recipient-group--unified-picker .lesson-event-student-chips--attached-only:empty {
    display: none;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker.lesson-event-popover {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
    margin-top: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.lesson-workspace-share-recipient-group--with-inline-picker {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.lesson-workspace-share-recipient-group--with-inline-picker.lesson-workspace-share-recipient-group--unified-picker {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.lesson-workspace-share-recipient-group__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 20px;
    width: 100%;
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book:not(.lesson-workspace-inline-participants-field--unified) .lesson-workspace-inline-participants-picker.lesson-event-popover,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book:not(.lesson-workspace-inline-participants-field--unified) .lesson-workspace-inline-participants-picker.lesson-event-popover {
    margin-top: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker.lesson-event-popover,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker.lesson-event-popover {
    margin-top: 0;
    width: 100%;
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card {
    margin: 0;
}

/* Book + Share: shared inline participants field (icon + picker). */
.lesson-workspace-inline-participants-field {
    gap: 8px;
}

.lesson-workspace-inline-participants-add {
    position: relative;
    flex: 0 0 28px;
    align-self: flex-start;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 55%, transparent);
    cursor: pointer;
}

.lesson-workspace-inline-participants-add:hover,
.lesson-workspace-inline-participants-add:focus-visible {
    color: var(--text-primary, var(--ink));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 88%, var(--primary-strong, #3fa85a) 12%);
    outline: none;
}

.lesson-workspace-inline-participants-add:focus-visible {
    outline: 2px solid var(--brand-primary, var(--primary-strong, #3fa85a));
    outline-offset: 1px;
}

.lesson-workspace-inline-participants-add[aria-expanded="true"] {
    color: var(--primary-strong, #3fa85a);
}

.lesson-workspace-inline-participants-add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--ll-type-body-size);
    line-height: 1;
}

.lesson-workspace-inline-participants-add-plus {
    position: absolute;
    right: -3px;
    bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--lesson-surface-card-strong, #141c28) 55%, #000);
    background: var(--primary-strong, #3fa85a);
    color: #fff;
    font-size: var(--ll-type-micro-size);
    line-height: 1;
    pointer-events: none;
}

.lesson-workspace-inline-participants-add[aria-expanded="true"] .lesson-workspace-inline-participants-add-plus {
    background: color-mix(in srgb, var(--text-primary, var(--ink)) 72%, transparent);
}

.lesson-workspace-inline-participants-field .lesson-event-field__body {
    gap: 3px;
}

.lesson-workspace-inline-participants-field .lesson-event-student-chips {
    gap: 4px;
    min-height: 20px;
}

.lesson-workspace-inline-participants-field .lesson-event-student-chip {
    padding: 2px 6px 2px 8px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
}

.lesson-workspace-inline-participants-field .lesson-event-student-chip__label {
    max-width: min(42vw, 180px);
}

.lesson-workspace-inline-participants-segments-mount {
    margin: 2px 0 0;
}

.lesson-workspace-inline-participants-segments-mount {
    display: none;
}

.lesson-workspace-inline-participants-segments-mount .ll-people-picker-segmented {
    display: none;
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .contact-autocomplete-guidance,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .contact-autocomplete-guidance {
    display: none !important;
}

#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .contact-autocomplete-recent:not([hidden]),
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .contact-autocomplete-recent:not([hidden]) {
    margin-top: 2px;
}

.lesson-workspace-inline-participants-picker.lesson-event-popover {
    margin-top: 4px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar,
.lesson-workspace-inline-participants-picker .contact-autocomplete-chips {
    display: none !important;
}

.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin: 0 -10px;
    padding: 0 10px 6px;
    box-sizing: border-box;
}

.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar {
    margin: 0;
    padding: 0;
    min-height: 42px;
}

.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-field,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-field {
    position: relative;
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

/* Keep the magnifier inside the bordered input so the student chip left edge
   lines up with the search field (icon used to sit outside and shift the box). */
.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-field__icon,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-field__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input,
.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input.email-input,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input.email-input {
    width: 100%;
    padding-left: 36px;
}

.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    width: auto;
    max-width: none;
    min-height: 42px;
    height: auto;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    border-bottom: none;
    border-radius: 8px;
    box-sizing: border-box;
    white-space: nowrap;
}

.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row__label,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row__label {
    flex: 0 1 auto;
}

.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row__chevron,
.lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row__chevron {
    display: none;
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-dropdown:not([hidden]) {
    display: block;
    position: relative;
    max-height: min(42vh, 320px);
    overflow-y: auto;
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-guidance {
    margin: 6px 0 0;
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-recent:not([hidden]) {
    margin-top: 4px;
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-recent__label {
    margin: 0 0 2px;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-result--compact {
    padding: 0.22rem 0.55rem;
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-result--compact .contact-autocomplete-result__primary {
    font-size: var(--ll-type-body-sm-size);
    line-height: var(--ll-type-body-sm-line);
}

.lesson-workspace-inline-participants-picker .contact-autocomplete-result__secondary {
    display: none;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-panel__lede {
    margin: 0 0 4px;
    font-size: var(--ll-type-body-sm-size);
    line-height: var(--ll-type-body-sm-line);
}

.lesson-workspace-inline-participants-picker #lesson-people-picker-panel-new:not([hidden]) {
    display: block;
    width: 100%;
}

.lesson-workspace-inline-participants-picker #lesson-people-picker-panel-new .lesson-people-picker-form,
.lesson-workspace-inline-participants-picker #lesson-people-picker-panel-new .lesson-people-picker-form-grid {
    width: 100%;
    max-width: none;
}

/* New Student / New Contact row at the top of the inline Recent card */
.lesson-people-picker-new-row {
    display: none;
}

.lesson-people-picker-inline-recent-card {
    display: contents;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card {
    display: block;
    margin: 0 -10px;
    border: 0;
    border-radius: 0;
    background: none;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    text-align: left;
    cursor: pointer;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row:hover,
.lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    outline: none;
}

.lesson-people-picker-new-row__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: var(--ll-type-label-size);
}

.lesson-people-picker-new-row__label {
    flex: 1 1 auto;
}

.lesson-people-picker-new-row__chevron {
    flex: 0 0 auto;
    font-size: var(--ll-type-meta-size);
    opacity: 0.6;
}

/* Phone column: keep search + new-contact on one row; shrink the field, not wrap. */
@media (max-width: 390px) {
    .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar,
    .lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar {
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        gap: 6px;
    }

    .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-field,
    .lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-field {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input,
    .lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input,
    .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input.email-input,
    .lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-search-input.email-input {
        min-width: 0;
        width: 100%;
    }

    .lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row,
    .lesson-workspace-inline-participants-field--unified .lesson-workspace-inline-participants-picker .lesson-people-picker-search-toolbar .lesson-people-picker-new-row {
        flex: 0 0 auto;
        margin-left: 0;
        min-height: 40px;
        padding: 6px 8px;
    }
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card .contact-autocomplete-recent:not([hidden]) {
    margin-top: 0;
    padding: 6px 0 0;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card .contact-autocomplete-recent__label {
    margin: 0;
    padding: 0 10px 4px;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card .contact-autocomplete-recent__list {
    border: 0;
    border-radius: 0;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-inline-recent-card .contact-autocomplete-recent__list .contact-autocomplete-result {
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.35rem 10px;
}

/* Inline "back to list" link on the new-student form */
.lesson-people-picker-new-back {
    display: none;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-new-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 4px 2px;
    border: 0;
    background: none;
    color: var(--brand-primary);
    font-family: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    cursor: pointer;
}

.lesson-workspace-inline-participants-picker .lesson-people-picker-new-back:hover,
.lesson-workspace-inline-participants-picker .lesson-people-picker-new-back:focus-visible {
    text-decoration: underline;
    outline: none;
}

.lesson-workspace-inline-participants-field--share .lesson-people-picker-new-send-invite-row {
    display: none !important;
}

/* Share recipients picker is always open — no collapse toggle */
.lesson-workspace-inline-participants-field--share .lesson-workspace-inline-participants-add,
.lesson-workspace-inline-participants-field--book .lesson-workspace-inline-participants-add {
    display: none;
}

.lesson-workspace-inline-participants-hint {
    margin: 0 0 2px;
}

.lesson-workspace-phase__body--save .lesson-workspace-details-students .lesson-workspace-inline-participants-field {
    margin: 0;
}

#lesson-workspace-tabpanel-share .lesson-workspace-inline-participants-field {
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--lesson-border-subtle, var(--border-default));
}

.lesson-workspace-share-recipient-lists {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-workspace-share-recipient-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    min-height: 20px;
}

.lesson-workspace-share-recipient-group__label {
    flex: 0 0 auto;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 72%, transparent);
}

.lesson-workspace-share-recipient-group .lesson-event-student-chips {
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-workspace-share-panel {
    display: flex;
    flex-direction: column;
    max-height: min(92vh, 920px);
}

.lesson-workspace-share-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 16px 12px;
}

.lesson-workspace-share-panel__section-title {
    margin: 0 0 8px;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-title-weight);
}

.lesson-workspace-share-feedback-mount .lesson-feedback-panel-section,
.lesson-workspace-share-feedback-mount .lesson-student-visible-fields,
.lesson-workspace-share-feedback-mount .lesson-feedback-focus-fields {
    margin-top: 0;
}

.lesson-workspace-share-fields-host {
    display: none;
}

.lesson-workspace-phase__summary-copy.panel-copy {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.lesson-workspace-phase__summary-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 52%, transparent);
}

.lesson-workspace-phase__summary-chevron i {
    display: block;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1;
    color: var(--ll-disclosure-chevron-color);
    transition: transform 0.2s ease;
}

.lesson-workspace-editor-stack .lesson-workspace-phase:not([data-lesson-phase-access="locked"])[open] > .lesson-workspace-phase__summary {
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-strong, var(--brand)) 8%, transparent);
}

.lesson-workspace-phase:not([data-lesson-phase-access="locked"])[open] > .lesson-workspace-phase__summary .lesson-workspace-phase__summary-chevron i {
    transform: rotate(180deg);
}

.lesson-workspace-phase__body {
    padding: 0;
    display: grid;
    gap: var(--lesson-compact-spacing);
    min-width: 0;
}

.lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture {
    overflow: visible;
}

.lesson-workspace-phase__body--participant,
.lesson-workspace-phase__body--save,
.lesson-workspace-phase__body--send,
.lesson-workspace-phase__body--send-final {
    gap: var(--lesson-card-gap);
}

.lesson-workspace-shell[data-lesson-maturity="mid"],
.lesson-workspace-shell[data-lesson-maturity="complete"] {
    --lesson-workspace-gap: 8px;
    --lesson-card-gap: 8px;
    --lesson-section-padding: 12px;
    --lesson-section-padding-compact: 8px;
    --lesson-compact-gap: 6px;
    --lesson-summary-height: 34px;
}

.lesson-workspace-shell .lesson-workspace-header {
    box-shadow: none;
}

.lesson-workspace-shell[data-lesson-maturity="mid"] .lesson-phase-card,
.lesson-workspace-shell[data-lesson-maturity="complete"] .lesson-phase-card {
    border-color: color-mix(in srgb, var(--lesson-border-subtle, var(--border-default)) 70%, transparent);
    box-shadow: none;
}

.lesson-workspace-shell[data-lesson-maturity="mid"] .lesson-workspace-phase__summary,
.lesson-workspace-shell[data-lesson-maturity="complete"] .lesson-workspace-phase__summary {
    min-height: 0;
}

.lesson-workspace-shell .lesson-workspace-phase__body--capture>.lesson-capture-workspace-pinned-toolbar {
    margin-bottom: var(--lesson-compact-gap, 8px);
}

/* Workspace chrome stays compact; phase card titles stay prominent. */
.lesson-editor-route .lesson-workspace-shell :is(
    .lesson-workspace-header__copy h2,
    #lesson-workspace-participant-heading
) {
    font-size: max(var(--ll-type-heading-size), clamp(0.98rem, 2.8vw, 1.08rem));
    font-weight: var(--ll-type-title-weight);
    line-height: var(--line-tight);
    letter-spacing: 0.01em;
}

.lesson-editor-route .lesson-workspace-shell :is(
    .lesson-workspace-phase__title,
    .lesson-workspace-phase__summary-copy h2,
    .lesson-workspace-phase__summary-copy .lesson-workspace-details-phase__heading,
    .lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy h2,
    .lesson-workspace-editor-stack .summary-card .lesson-workspace-phase__summary-copy h2
),
.lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy .lesson-workspace-phase__title {
    font-size: max(var(--ll-type-display-size), clamp(1.25rem, 3.8vw, 1.55rem));
    font-weight: var(--ll-type-display-weight);
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.lesson-editor-route .lesson-workspace-shell :is(
    .lesson-panel-hint,
    .email-empty-state,
    .lesson-workspace-section-meta,
    .panel-copy > p,
    .lesson-workspace-disclosure-summary-secondary
) {
    font-size: var(--ll-type-body-size);
    line-height: var(--ll-line-helper, 1.35);
}

.lesson-workspace-shell .lesson-session-kind-toggle:not(.lesson-session-kind-toggle--workspace-header) .lesson-session-kind-toggle__btn {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-title-weight);
    line-height: 1;
}

.lesson-workspace-send-phase-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 8px;
    padding-top: 4px;
}

.lesson-workspace-send-phase-primary-btn {
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    padding: 15px 34px;
    min-width: 168px;
    border-radius: 14px;
}

.lesson-workspace-send-phase-primary-btn:disabled,
.lesson-workspace-send-phase-primary-btn.lessonlink-send-gate--blocked {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.25);
}

#open-summary-send-dialog.lessonlink-send-gate--blocked,
#summary-panel-send.lessonlink-send-gate--blocked,
#lesson-workspace-summarize-share.lessonlink-send-gate--blocked {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    filter: grayscale(0.25);
}

[data-summary-workspace-embedded="true"] {
    position: relative;
}

.lesson-summary-send-dialog-sink,
.summary-panel-actions--send-sink {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}

.lesson-workspace-phase__body--save>.lesson-workspace-send-embed,
.lesson-workspace-phase__body--send>.lesson-workspace-send-embed,
.lesson-workspace-phase__body--send-final>.lesson-workspace-send-embed {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.lesson-workspace-phase__body--save>.lesson-workspace-send-embed.lesson-workspace-editor-sibling--details .lesson-details-inline-root,
.lesson-workspace-phase__body--send>.lesson-workspace-send-embed.lesson-workspace-editor-sibling--details .lesson-details-inline-root,
.lesson-workspace-phase__body--send-final>.lesson-workspace-send-embed.lesson-workspace-editor-sibling--details .lesson-details-inline-root {
    gap: 12px;
}

.lesson-details-focus-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.lesson-workspace-editor-stack .lesson-details-focus-fieldset {
    background: transparent;
    width: 100%;
    min-inline-size: 0;
}

.lesson-workspace-editor-stack .lesson-details-focus-fieldset>.lesson-event-field {
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

.lesson-workspace-editor-stack .lesson-details-inline-form--compact-event .lesson-event-field--description,
.lesson-workspace-editor-stack .lesson-feedback-disclosure--send-icon .lesson-event-field--feedback {
    width: 100%;
    min-width: 0;
    min-inline-size: 0;
}

.lesson-workspace-editor-stack .lesson-details-inline-form--compact-event .lesson-event-expand-stack>.lesson-tags-trigger.lesson-event-icon-row-trigger,
.lesson-workspace-editor-stack .lesson-workspace-phase__body--send-final .lesson-event-expand-stack>.lesson-tags-trigger.lesson-event-icon-row-trigger {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
}

.lesson-feedback-disclosure--send-icon {
    width: 100%;
    min-width: 0;
}

.lesson-feedback-send-expand {
    width: 100%;
    min-width: 0;
}

.lesson-feedback-send-expand .lesson-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.lesson-details-inline-root--compact {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.lesson-details-inline-root--compact.lesson-details-inline-root--booking-open {
    gap: 14px;
}

.lesson-details-expand-body--compact-open {
    padding: 0 2px 8px;
}

.lesson-details-inline-form--compact-event {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
}

.lesson-event-field {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.lesson-event-field__icon {
    flex: 0 0 22px;
    width: 22px;
    text-align: center;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 55%, transparent);
    padding-top: 6px;
}

.lesson-event-field__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-event-field__body--session-time-stack {
    gap: 10px;
}

.lesson-session-kind--stacked {
    margin: 0;
}

.lesson-details-inline-form--compact-event .lesson-session-kind--stacked {
    margin: 0;
}

.lesson-details-inline-form--compact-event .lesson-session-kind--stacked .lesson-session-kind__label {
    margin: 0 0 4px;
}

.lesson-event-datetime-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.lesson-event-chip-btn {
    font: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-line);
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--lesson-surface-control, rgba(255, 255, 255, 0.06));
    color: var(--text-primary, var(--ink));
    cursor: pointer;
    text-align: left;
}

.lesson-event-chip-btn:hover:not(:disabled) {
    border-color: var(--lesson-border-strong, rgba(255, 255, 255, 0.22));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.06)) 88%, var(--primary-strong, #3fa85a) 12%);
}

.lesson-event-chip-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lesson-event-time-dash {
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent);
    font-weight: 600;
}

.lesson-event-datetime-shell {
    position: relative;
}

.lesson-event-datetime-row--gcal {
    align-items: center;
    gap: 8px 10px;
}

.lesson-details-inline-form--compact-event .lesson-event-field--schedule .lesson-event-field__icon {
    padding-top: 4px;
}

.lesson-details-inline-form--compact-event .lesson-event-field__body--session-time-stack {
    gap: 6px;
}

.lesson-session-time-toolbar {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.lesson-session-time-toolbar .lesson-session-time-compact {
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-session-time-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 0.92fr);
    gap: 6px;
    align-items: stretch;
    width: 100%;
}

.lesson-session-time-compact__cell {
    min-width: 0;
}

.lesson-session-time-slot {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.lesson-session-time-slot__value {
    width: 100%;
    min-width: 0;
}

.lesson-session-time-slot.has-clear .lesson-session-time-slot__value {
    padding-right: 28px;
}

.lesson-session-time-slot__clear[hidden] {
    display: none !important;
    pointer-events: none;
}

.lesson-session-time-slot__clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 88%, transparent);
    cursor: pointer;
    font-size: var(--ll-type-label-size);
    line-height: 1;
}

.lesson-session-time-slot__clear:hover {
    color: var(--text-primary, var(--ink));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.12)) 100%, transparent);
}

.lesson-gcal-popover-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--text-primary, var(--ink)) 10%, transparent);
}

.lesson-gcal-popover-clear {
    font: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.lesson-gcal-popover-clear:hover {
    color: var(--text-primary, var(--ink));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 100%, transparent);
}

.lesson-session-time-compact__cell--duration {
    display: flex;
    align-items: stretch;
}

.lesson-session-duration-select {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    font: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
    padding: 0 28px 0 10px;
    border-radius: 999px;
    border: none;
    background-color: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 100%, transparent);
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 92%, transparent);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, var(--ink)) 12%, transparent);
    appearance: none;
    background-image: linear-gradient(
        45deg,
        transparent 50%,
        color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent) 50%
    ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent) 50%,
            transparent 50%
        );
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.lesson-session-duration-select:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.1)) 100%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, var(--ink)) 20%, transparent);
}

.lesson-session-duration-select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lesson-schedule-more-btn {
    flex: 0 0 auto;
    align-self: center;
    font: inherit;
    font-size: var(--ll-type-label-size);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0 10px;
    min-height: 36px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 88%, transparent);
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.06)) 100%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, var(--ink)) 14%, transparent);
    white-space: nowrap;
}

.lesson-schedule-more-btn:hover {
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.1)) 100%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, var(--ink)) 22%, transparent);
}

.lesson-schedule-advanced-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--lessonlink-z-modal-local, 1200) + 2);
    border: none;
    margin: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.42);
    cursor: default;
}

.lesson-schedule-advanced-backdrop[hidden] {
    display: none !important;
    pointer-events: none !important;
}

.lesson-schedule-advanced-panel {
    margin-top: 6px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text-primary, var(--ink)) 10%, transparent);
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.04)) 100%, transparent);
    overflow: hidden;
}

.lesson-schedule-advanced-panel:not([hidden]) {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: calc(var(--lessonlink-z-modal-local, 1200) + 3);
    width: min(420px, calc(100vw - 24px));
    max-height: min(85vh, 560px);
    margin-top: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.42);
    overflow: auto;
}

.lesson-schedule-advanced-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary, var(--ink)) 10%, transparent);
}

.lesson-schedule-advanced-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ll-type-label-size);
    font-weight: 700;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 90%, transparent);
}

.lesson-schedule-advanced-panel__close {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 75%, transparent);
    background: transparent;
}

.lesson-schedule-advanced-panel__close:hover {
    background: color-mix(in srgb, var(--text-primary, var(--ink)) 8%, transparent);
    color: var(--text-primary, var(--ink));
}

.lesson-schedule-advanced-panel__body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lesson-schedule-advanced-lead {
    margin: 0;
    font-size: var(--ll-type-meta-size);
    line-height: 1.35;
}

.lesson-event-datetime-row--advanced-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-end;
}

.lesson-schedule-advanced-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 132px;
}

.lesson-schedule-advanced-field .lesson-event-gcal-btn {
    width: 100%;
    box-sizing: border-box;
}

.lesson-schedule-advanced-label {
    font-size: var(--ll-type-micro-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 55%, transparent);
}

.lesson-event-options-row--advanced-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 0;
    font-size: var(--ll-type-body-sm-size);
}

.lesson-event-options-row--advanced-block .lesson-event-recurrence {
    flex: 1 1 180px;
    min-width: 0;
}

.lesson-event-options-row--advanced-block .lesson-event-recurrence select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.lesson-event-field--session-type-compact .lesson-session-kind--stacked {
    margin: 0;
}

.lesson-event-field--session-type-compact .lesson-session-kind__label {
    margin: 0 0 4px;
}

/* Narrow phones: 2×2 schedule grid so Date/Time/Duration/More never clip.
   Keep through ~520px — single-row Date/Time/Duration/More still clips around 400–420. */
@media (max-width: 520px) {
    .lesson-details-inline-form--compact-event .lesson-event-field--schedule {
        gap: 8px;
    }

    .lesson-details-inline-form--compact-event .lesson-event-field--schedule > .lesson-event-field__icon {
        display: none;
    }

    .lesson-session-time-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .lesson-session-time-toolbar .lesson-session-time-compact {
        display: contents;
    }

    .lesson-session-time-compact__cell,
    .lesson-session-time-toolbar > .lesson-schedule-more-btn {
        min-width: 0;
    }

    .lesson-session-time-toolbar > .lesson-schedule-more-btn {
        width: 100%;
        justify-self: stretch;
        align-self: stretch;
    }

    .lesson-event-gcal-btn {
        min-height: 36px;
        padding: 5px 10px;
        font-size: var(--ll-type-label-size);
    }

    .lesson-session-duration-select {
        min-height: 36px;
        padding: 0 22px 0 10px;
        font-size: var(--ll-type-label-size);
        background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
    }

    .lesson-schedule-more-btn {
        min-height: 36px;
        padding: 0 10px;
        font-size: var(--ll-type-label-size);
    }
}

.lesson-event-gcal-btn {
    font: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 100%, transparent);
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 92%, transparent);
    cursor: pointer;
    text-align: left;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, var(--ink)) 12%, transparent);
}

.lesson-event-gcal-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.1)) 100%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary, var(--ink)) 20%, transparent);
}

.lesson-event-gcal-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lesson-event-gcal-btn.is-active {
    background: color-mix(in srgb, #1a73e8 22%, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 78%);
    box-shadow: inset 0 -3px 0 0 #1a73e8;
    color: var(--text-primary, var(--ink));
}

.lesson-event-gcal-btn.is-placeholder {
    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
    font-weight: 500;
}


.lesson-event-to {
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 55%, transparent);
    padding: 0 2px;
}

.lesson-details-datetime-popover {
    min-width: 260px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 10px 12px;
    border-radius: 12px;
    background: #f8f9fa;
    color: #202124;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
    font-family: inherit;
}

.lesson-details-datetime-popover[hidden] {
    display: none !important;
    pointer-events: none !important;
}

/*
 * Datetime calendar/time popover portals under <html> while open so Capture
 * toolbar buttons (Record / Attach / Summarize / Share) cannot paint through
 * a trapped fixed layer inside the lesson editor stacking context.
 */
.lessonlink-datetime-popover-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    z-index: var(--lessonlink-z-dialog-ancillary, 10050);
}

.lesson-details-datetime-popover.lesson-details-datetime-popover--floating {
    pointer-events: auto;
}

.lesson-gcal-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.lesson-gcal-cal__title {
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    color: #202124;
}

.lesson-gcal-cal__nav {
    font: inherit;
    font-size: var(--ll-type-title-size);
    line-height: 1;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #5f6368;
    cursor: pointer;
}

.lesson-gcal-cal__nav:hover {
    background: rgba(32, 33, 36, 0.08);
}

.lesson-gcal-cal__dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
    font-size: var(--ll-type-micro-size);
    font-weight: 600;
    color: #70757a;
    text-align: center;
}

.lesson-gcal-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.lesson-gcal-cal__cell {
    font: inherit;
    font-size: var(--ll-type-label-size);
    font-weight: 500;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #202124;
    cursor: pointer;
}

.lesson-gcal-cal__cell--muted {
    color: #babfc4;
}

.lesson-gcal-cal__cell:hover:not(.lesson-gcal-cal__cell--muted) {
    background: rgba(32, 33, 36, 0.06);
}

.lesson-gcal-cal__cell--selected {
    background: #d2e3fc;
    color: #1967d2;
    font-weight: 700;
}

.lesson-gcal-cal__cell--today {
    box-shadow: inset 0 0 0 2px #1a73e8;
}

.lesson-gcal-cal__cell--today.lesson-gcal-cal__cell--selected {
    background: #1a73e8;
    color: #fff;
    box-shadow: none;
}

.lesson-gcal-time-list {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    gap: 0;
    margin: 0 -4px;
}

.lesson-gcal-time-list__item {
    font: inherit;
    font-size: var(--ll-type-body-size);
    text-align: left;
    padding: 7px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #202124;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.lesson-gcal-time-list__item:hover {
    background: rgba(32, 33, 36, 0.06);
}

.lesson-gcal-time-list__item.is-selected {
    background: #e8eaed;
    font-weight: 600;
}

.lesson-gcal-time-list__primary {
    flex: 0 0 auto;
}

.lesson-gcal-time-list__meta {
    font-size: var(--ll-type-label-size);
    color: #5f6368;
    font-weight: 500;
}

.lesson-event-options-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    font-size: var(--ll-type-body-size);
}

.lesson-event-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 88%, transparent);
}

.lesson-event-checkbox input {
    width: 16px;
    height: 16px;
}

.lesson-event-recurrence {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 88%, transparent);
}

.lesson-event-recurrence span {
    font-weight: 600;
}

.lesson-event-recurrence--grow {
    flex: 1 1 140px;
    min-width: 0;
}

.lesson-event-field--entry-type {
    align-items: flex-start;
}

.lesson-event-field--entry-type .lesson-event-field__icon {
    padding-top: 2px;
}

.lesson-event-field--entry-type .lesson-session-kind {
    margin: 0;
}

.lesson-session-kind {
    position: relative;
    margin: 0 0 18px;
}

.lesson-details-inline-form--compact-event .lesson-session-kind {
    margin: 0 0 8px;
}

.lesson-session-kind--capture {
    margin-bottom: 0;
}

.lesson-session-kind--capture-header {
    flex: 0 0 auto;
    margin: 0;
    align-self: flex-start;
}

.lesson-session-kind--workspace-header {
    margin: 0;
    justify-self: start;
}

.lesson-session-kind__label {
    margin: 0 0 10px;
    font-size: var(--ll-type-label-size);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.72;
}

.lesson-details-inline-form--compact-event .lesson-session-kind__label {
    margin: 0 0 4px;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
}

.lesson-session-kind-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    border: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.14));
    background: var(--lesson-surface-control, rgba(255, 255, 255, 0.06));
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
}

.lesson-session-kind-toggle--capture-header,
.lesson-session-kind-toggle--workspace-header {
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
}

.lesson-session-kind-toggle--workspace-header {
    gap: 3px;
    padding: 3px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, var(--lesson-border-subtle, rgba(255, 255, 255, 0.2)));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    width: fit-content;
    max-width: 100%;
}

.lesson-details-inline-form--compact-event .lesson-session-kind-toggle {
    gap: 4px;
    padding: 3px;
    border-radius: 10px;
}

.lesson-session-kind-toggle__btn {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    border: 0;
    border-radius: 10px;
    padding: 12px 10px;
    font: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-label-weight);
    cursor: pointer;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    background: transparent;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.lesson-session-kind-toggle--capture-header .lesson-session-kind-toggle__btn {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: var(--ll-type-micro-size);
    font-weight: 700;
    line-height: 1.05;
}

.lesson-session-kind-toggle--workspace-header .lesson-session-kind-toggle__btn {
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
    background: transparent;
    box-shadow: none;
}

.lesson-session-kind-toggle--workspace-header .lesson-session-kind-toggle__btn.is-active {
    color: #fff;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-primary) 88%, #fff),
        var(--brand-primary)
    );
    border-color: color-mix(in srgb, var(--brand-primary) 55%, #000);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
}

.lesson-session-kind-toggle--workspace-header .lesson-session-kind-toggle__btn:not(.is-active):hover,
.lesson-session-kind-toggle--workspace-header .lesson-session-kind-toggle__btn:not(.is-active):focus-visible {
    color: var(--text-primary, var(--lesson-header-text));
    background: color-mix(in srgb, var(--lesson-accent-strong, rgba(255, 255, 255, 0.14)) 75%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
    outline: none;
}

.lesson-session-kind-toggle--workspace-header .lesson-session-kind-toggle__btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.lesson-workspace-book-session-kind {
    margin: 0 0 4px;
    display: flex;
    justify-content: center;
}

.lesson-session-kind--book-details {
    margin: 0 auto;
}

.lesson-session-kind-toggle--book-details {
    gap: 1px;
    padding: 1px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 38%, var(--lesson-border-subtle, rgba(255, 255, 255, 0.2)));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    width: fit-content;
    max-width: 100%;
}

.lesson-session-kind-toggle--book-details .lesson-session-kind-toggle__btn {
    padding: 2px 9px;
    min-height: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
    background: transparent;
    box-shadow: none;
}

.lesson-session-kind-toggle--book-details .lesson-session-kind-toggle__btn.is-active {
    color: #fff;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-primary) 88%, #fff),
        var(--brand-primary)
    );
    border-color: color-mix(in srgb, var(--brand-primary) 55%, #000);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.lesson-session-kind-toggle--book-details .lesson-session-kind-toggle__btn:not(.is-active):hover,
.lesson-session-kind-toggle--book-details .lesson-session-kind-toggle__btn:not(.is-active):focus-visible {
    color: var(--text-primary, var(--lesson-header-text));
    background: color-mix(in srgb, var(--lesson-accent-strong, rgba(255, 255, 255, 0.14)) 75%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
    outline: none;
}

.lesson-session-kind-toggle--book-details .lesson-session-kind-toggle__btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.lesson-session-kind--titlebar-center {
    margin: 0 auto;
}

.lesson-session-kind-toggle--titlebar-center {
    gap: 1px;
    padding: 1px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 38%, var(--lesson-border-subtle, rgba(255, 255, 255, 0.2)));
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 92%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    width: fit-content;
    max-width: 100%;
}

.lesson-session-kind-toggle--titlebar-center .lesson-session-kind-toggle__btn {
    padding: 2px 10px;
    min-height: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
    background: transparent;
    box-shadow: none;
}

.lesson-session-kind-toggle--titlebar-center .lesson-session-kind-toggle__btn.is-active {
    color: var(--text-primary, #fff);
    background: color-mix(in srgb, var(--brand-primary) 78%, #000 22%);
    border-color: color-mix(in srgb, var(--brand-primary) 55%, transparent);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.lesson-session-kind-toggle--titlebar-center .lesson-session-kind-toggle__btn:not(.is-active):hover,
.lesson-session-kind-toggle--titlebar-center .lesson-session-kind-toggle__btn:not(.is-active):focus-visible {
    color: var(--text-primary, rgba(255, 255, 255, 0.88));
    background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
}

.lesson-session-kind-toggle--titlebar-center .lesson-session-kind-toggle__btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

@media (max-width: 420px) {
    .lesson-workspace-book-session-kind {
        margin-bottom: 6px;
    }

    .lesson-session-kind-toggle--book-details .lesson-session-kind-toggle__btn {
        padding: 3px 9px;
        font-size: var(--ll-type-label-size);
    }
}

.lesson-details-inline-form--compact-event .lesson-session-kind-toggle__btn {
    padding: 5px 10px;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
    border-radius: 8px;
}

.lesson-session-kind-toggle__btn.is-active {
    color: var(--text-primary, var(--ink));
    background: var(--lesson-accent-strong, rgba(255, 255, 255, 0.16));
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.lesson-session-kind-hidden-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.lesson-event-select {
    font: inherit;
    font-size: var(--ll-type-body-sm-size);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--lesson-surface-control, rgba(255, 255, 255, 0.06));
    color: var(--text-primary, var(--ink));
    max-width: 100%;
}

.lesson-event-field--title {
    align-items: center;
}

.lesson-event-field--title .lesson-event-field__icon {
    padding-top: 0;
    align-self: center;
}

.lesson-event-field--title .lesson-event-title-input {
    flex: 1;
    min-width: 0;
}

.lesson-event-title-input {
    width: 100%;
    font-size: var(--ll-type-title-size);
    font-weight: 700;
    line-height: 1.25;
    padding: 6px 2px 8px;
    border: none;
    border-bottom: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.14));
    border-radius: 0;
    background: transparent;
    color: var(--text-primary, var(--ink));
}

/* Compact session / booking details: title matches other event row inputs */
.lesson-details-inline-form--compact-event .lesson-event-title-input {
    font: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--lesson-surface-control, rgba(255, 255, 255, 0.05));
}

.lesson-details-inline-form--compact-event .lesson-event-title-input::placeholder {
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent);
}

/* Picker/button empty labels must match adjacent text inputs (not bold faux-placeholders). */
.lesson-details-inline-form--compact-event .lesson-event-row-summary.is-placeholder,
.lesson-details-inline-form--compact-event .lesson-tags-placeholder {
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent);
}

.lesson-details-inline-form--compact-event .lesson-event-inline-input {
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
}

.lesson-details-inline-form--compact-event .lesson-event-inline-input::placeholder {
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent);
}

.lesson-details-inline-form--compact-event .lesson-event-title-input:focus {
    outline: none;
    border-color: var(--primary-strong, #3fa85a);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-strong, #3fa85a) 35%, transparent);
}

.lesson-details-inline-form--compact-event :is(.email-input, select.email-input, textarea.email-input) {
    font-size: var(--ll-type-body-sm-size);
    line-height: var(--ll-type-body-sm-line);
}

.lesson-event-title-input::placeholder {
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 38%, transparent);
}

.lesson-event-title-input:focus {
    outline: none;
    border-bottom-color: var(--primary-strong, #3fa85a);
}

.lesson-event-inline-input {
    width: 100%;
    font: inherit;
    font-size: var(--ll-type-body-size);
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--lesson-surface-control, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, var(--ink));
}

.lesson-event-inline-input::placeholder {
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent);
}

.lesson-event-text-btn {
    font: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary-strong, #5fc77a);
    cursor: pointer;
    text-align: left;
}

.lesson-event-text-btn:hover {
    text-decoration: underline;
}

.lesson-event-student-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 28px;
}

/* Share/Book title-bar search: show filtered roster matches below segment tabs. */
html.lessonlink-participants-title-search-active .lesson-workspace-inline-participants-picker.is-title-search-filtering .lesson-people-picker-panel__lede {
    display: none;
}

html.lessonlink-participants-title-search-active .lesson-workspace-inline-participants-picker.is-title-search-filtering .lesson-people-picker-autocomplete.is-title-search-filtering .contact-autocomplete-guidance {
    display: none !important;
}

html.lessonlink-participants-title-search-active .lesson-workspace-inline-participants-picker.is-title-search-filtering .lesson-people-picker-autocomplete.is-title-search-filtering .contact-autocomplete-dropdown {
    display: block !important;
    position: relative;
    max-height: min(42vh, 320px);
    overflow-y: auto;
    margin-top: 8px;
}

html.lessonlink-participants-title-search-active .lesson-workspace-inline-participants-picker.is-title-search-filtering .contact-autocomplete-dropdown .contact-autocomplete-recent__label {
    margin-top: 8px;
}

html.lessonlink-participants-title-search-active .lesson-workspace-inline-participants-picker.is-title-search-filtering .contact-autocomplete-dropdown .contact-autocomplete-recent__label:first-child {
    margin-top: 0;
}

html.lessonlink-participants-title-search-active .lesson-workspace-inline-participants-picker.is-title-search-filtering {
    display: block !important;
}

.lesson-workspace-inline-participants-picker .lesson-workspace-participants-panel__footer,
.lesson-workspace-inline-participants-picker .lesson-people-picker-panel__footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 12px;
}

.lesson-workspace-phase__body--share {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.lesson-share-phase-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.lesson-event-student-placeholder {
    font-size: var(--ll-type-body-size);
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 48%, transparent);
}

#lesson-workspace-section-save .lesson-workspace-inline-participants-field--book .lesson-event-student-chips,
#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--book .lesson-event-student-chips {
    cursor: pointer;
    justify-content: flex-start;
    width: 100%;
    margin-inline: 0;
}

#lesson-workspace-section-save .lesson-workspace-inline-participants-field--unified .lesson-event-student-chips--attached-only,
#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--unified .lesson-event-student-chips--attached-only,
#lesson-workspace-section-save .lesson-workspace-inline-participants-field--unified .lesson-event-student-chips,
#lesson-workspace-tabpanel-info .lesson-workspace-inline-participants-field--unified .lesson-event-student-chips {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.lesson-schedule-advanced-panel__body .lesson-event-field {
    margin-top: 10px;
}

.lesson-schedule-advanced-panel__body .lesson-event-field:first-of-type {
    margin-top: 8px;
}

.lesson-event-student-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    border-radius: 999px;
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    background: color-mix(in srgb, var(--lesson-surface-control, rgba(255, 255, 255, 0.08)) 72%, var(--accent-info, #38bdf8) 28%);
    border: 1px solid color-mix(in srgb, var(--accent-info, #38bdf8) 42%, transparent);
    color: var(--text-primary, var(--ink));
    max-width: 100%;
}

.lesson-event-student-chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.lesson-event-student-chip__remove {
    font: inherit;
    font-size: var(--ll-type-heading-size);
    line-height: 1;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: 0.75;
}

.lesson-event-student-chip__remove:hover {
    opacity: 1;
}

.lesson-event-popover {
    margin-top: 8px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.14));
    background: var(--lesson-surface-card-strong, rgba(20, 28, 40, 0.98));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.lesson-event-popover__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lesson-event-popover__header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.lesson-event-popover__header .lesson-event-popover__hint {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.lesson-event-popover__close {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.lesson-event-popover__close:focus-visible {
    outline: 2px solid var(--primary-strong, #3fa85a);
    outline-offset: 2px;
}

.lesson-event-popover__hint {
    margin: 0;
}

.lesson-event-student-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow: auto;
}

.lesson-event-student-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--ll-type-body-size);
    cursor: pointer;
}

.lesson-event-student-option input {
    margin-top: 3px;
}

.lesson-event-more-body {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--lesson-border-subtle, rgba(255, 255, 255, 0.1));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lesson-event-expand-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.lesson-event-expand-panel {
    width: 100%;
    min-width: 0;
}

.lesson-event-expand-panel .email-input {
    width: 100%;
    box-sizing: border-box;
}

.lesson-event-icon-row-trigger {
    align-items: center;
}

.lesson-event-icon-row-trigger i {
    margin-top: 0;
}

.lesson-event-row-summary {
    min-width: 0;
    text-align: left;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-event-row-summary.is-placeholder {
    color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
}

.lesson-details-inline-form--compact-event .lesson-event-expand-stack .lesson-tag-picker-panel {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.lesson-details-inline-form--compact-event .lesson-event-expand-stack .lesson-tag-picker--recent {
    grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
}

.lesson-details-inline-form--compact-event .lesson-event-expand-stack .lesson-tag-picker:not(.lesson-tag-picker--recent) {
    grid-template-columns: repeat(auto-fill, minmax(min(6.25rem, 100%), 1fr));
}

.lesson-event-description-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lesson-event-description-field span {
    font-size: var(--ll-type-body-size);
    font-weight: 600;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 78%, transparent);
}

.lesson-details-dialog-actions--event-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 4px;
    width: 100%;
}

.lesson-details-dialog-delete-slot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.lesson-details-dialog-actions--event-footer > .lesson-event-footer-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
}

.lesson-details-dialog-actions--event-footer .lesson-event-footer-actions--with-booking-capture {
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.lesson-event-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lesson-event-footer-actions--with-booking-capture {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.lesson-event-footer-actions--with-booking-capture .lesson-event-footer-actions__end {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    margin-left: 0;
}

.lesson-details-dialog-actions--event-footer .lesson-workspace-delete-btn,
.lesson-details-dialog-actions--event-footer .lesson-booking-capture-btn,
.lesson-details-dialog-actions--event-footer .ll-btn.ll-btn--ghost,
.lesson-details-dialog-actions--event-footer .ll-btn.ll-btn--solid.ll-btn--primary {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    white-space: nowrap;
}

.lesson-details-sync-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.lesson-workspace-disclosure-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    width: 100%;
}

.lesson-workspace-disclosure-summary-secondary {
    font-size: var(--ll-type-body-size);
    font-weight: 550;
    line-height: 1.3;
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 74%, transparent);
    overflow-wrap: anywhere;
}

.lesson-workspace-editor-stack .contact-history-disclosure-toggle.lesson-workspace-disclosure-toggle {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--lesson-border-subtle);
    background: var(--lesson-surface-control);
}

.lesson-workspace-editor-stack .contact-history-disclosure-toggle.lesson-workspace-disclosure-toggle:hover {
    border-color: var(--lesson-border-strong);
    background: color-mix(in srgb, var(--lesson-surface-control) 82%, var(--primary-strong));
}

.lesson-workspace-editor-stack .contact-history-disclosure-toggle.lesson-workspace-disclosure-toggle.is-expanded {
    border-color: color-mix(in srgb, var(--primary-strong) 40%, var(--lesson-border-subtle));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-strong) 16%, transparent);
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture>.lesson-phase-card {
    padding: var(--lesson-section-padding);
    overflow: visible;
    border-radius: var(--radius, 14px);
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--summarize>.lesson-phase-card,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--save>.lesson-phase-card,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--send>.lesson-phase-card {
    padding: var(--lesson-section-padding);
    overflow: hidden;
    border-radius: var(--radius, 14px);
}

.lesson-workspace-editor-stack :is(.summary-card.lesson-phase-card, .lesson-phase-card) {
    padding: var(--lesson-section-padding);
    gap: var(--lesson-compact-spacing, 7px);
}

.lesson-workspace-editor-stack[data-lesson-panel-mode="live"] .lesson-workspace-editor-sibling--capture:not([data-lesson-phase-access="locked"]) > .lesson-phase-card,
.lesson-workspace-editor-stack[data-lesson-panel-mode="live"] .lesson-workspace-editor-sibling--summarize:not([data-lesson-phase-access="locked"]) > .lesson-phase-card,
.lesson-workspace-editor-stack[data-lesson-panel-mode="live"] .lesson-workspace-editor-sibling--save:not([data-lesson-phase-access="locked"]) > .lesson-phase-card,
.lesson-workspace-editor-stack[data-lesson-panel-mode="live"] .lesson-workspace-editor-sibling--send:not([data-lesson-phase-access="locked"]) > .lesson-phase-card {
    border-color: var(--border-subtle);
    background: var(--gradient-surface-quiet), var(--lesson-surface-card-strong);
    box-shadow: var(--shadow-soft);
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling:not([data-lesson-phase-access="locked"]) > .lesson-phase-card:has(> .lesson-workspace-phase[open]) {
    outline: 1px solid color-mix(in srgb, var(--accent-info) 38%, transparent);
    outline-offset: -1px;
}

.lesson-workspace-editor-sibling--summarize [data-lesson-summarize-summary-mount]>.lesson-workspace-editor-sibling--summary .summary-shell>.summary-card,
.lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region]>.lesson-workspace-editor-sibling--summary .summary-shell>.summary-card,
.lesson-workspace-editor-sibling--capture [data-lesson-summarize-summary-mount]>.lesson-workspace-editor-sibling--summary .summary-shell>.summary-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0;
}

.lesson-workspace-editor-sibling--summarize [data-lesson-summarize-summary-mount] {
    min-width: 0;
}

.lesson-workspace-editor-sibling--summarize [data-lesson-summarize-summary-mount] #summary-media-required-note {
    display: none !important;
}

.lesson-workspace-editor-stack .lesson-section-card,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-section--embedded,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--summary .summary-card,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture-media .summary-card,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--lesson .summary-card {
    border: 1px solid var(--border-subtle);
    background: var(--gradient-surface-quiet), var(--lesson-surface-card);
    box-shadow: var(--shadow-soft);
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture [data-lesson-capture-summary-region] .lesson-workspace-editor-sibling--summary .summary-card {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

/* Student summary workspace: one outer card; inner feature shell is borderless like Details/Notes headers. */
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--summary .lesson-student-lesson-summary>.summary-shell[data-summary-workspace-embedded="true"]>.summary-card {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    min-width: 0;
}

.lesson-workspace-editor-stack[data-lesson-panel-mode="live"] .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-section--embedded {
    border-color: color-mix(in srgb, var(--accent-success-border) 55%, var(--border-subtle));
    background: var(--gradient-surface-quiet), var(--lesson-surface-card);
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-locked-card {
    width: 100%;
    margin: 0;
    padding: 16px 18px;
    border: 1px dashed var(--lesson-border-subtle);
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    background: var(--lesson-surface-card);
    color: inherit;
    font: inherit;
    display: block;
    box-sizing: border-box;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-locked-card:hover,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .lesson-workspace-phase__body--capture>.lesson-capture-locked-card:focus-visible {
    border-color: var(--lesson-border-strong);
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 168, 90, 0.35);
}

.lesson-capture-locked-card .lesson-capture-locked-cta {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--lesson-accent, #3fa85a);
}

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

.lesson-workspace-editor-stack:not([data-lesson-panel-mode="booking"]) .lesson-section-card--details,
.lesson-workspace-editor-stack:not([data-lesson-panel-mode="booking"]) .lesson-section-card--summary,
.lesson-workspace-editor-stack:not([data-lesson-panel-mode="booking"]) .lesson-section-card--capture-media,
.lesson-workspace-editor-stack:not([data-lesson-panel-mode="booking"]) .lesson-section-card--lesson {
    padding: var(--lesson-section-padding-compact) calc(var(--lesson-section-padding-compact) + 2px);
}

.lesson-workspace-editor-stack .lesson-workspace-combined-lesson-body {
    display: grid;
    gap: 22px;
    margin-top: 4px;
    min-width: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-combined-part .lesson-details-inline-root,
.lesson-workspace-editor-stack .lesson-workspace-combined-part__feedback {
    margin-top: 0;
    min-width: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-capture-media-body {
    margin-top: 4px;
    min-width: 0;
}

.lesson-workspace-editor-stack:not([data-lesson-panel-mode="booking"]) .lesson-section-card--details .lesson-details-inline-root {
    gap: 12px;
}

.lesson-workspace-editor-stack .panel-copy:not(.lesson-workspace-header__copy) {
    position: relative;
    gap: 8px;
    padding-left: 12px;
}

.lesson-workspace-editor-stack .panel-copy:not(.lesson-workspace-header__copy)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.22rem;
    bottom: 0.22rem;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--section-rail-neutral);
    opacity: 0.85;
}

.lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy > .lesson-workspace-phase__title,
.lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy > h2.lesson-workspace-phase__title,
.lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy :is(
    .lesson-workspace-phase__title,
    > h2,
    > .lesson-workspace-details-phase__heading,
    h2.lesson-workspace-phase__title
) {
    color: var(--text-primary, var(--lesson-header-text, #f4f9ff));
    font-family: inherit;
    font-weight: var(--ll-type-title-weight);
    font-size: max(var(--ll-type-display-size), clamp(1.25rem, 3.8vw, 1.55rem));
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.lesson-workspace-details-phase__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
}

.lesson-workspace-details-phase__heading .lesson-session-kind--workspace-header {
    margin: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy .lesson-workspace-phase__hint {
    color: var(--lesson-muted-text, #b7c5d4);
    font-size: var(--ll-type-body-size);
    font-weight: 400;
}

.lesson-workspace-editor-stack .lesson-panel-hint,
.lesson-workspace-editor-stack .panel-copy > p.lesson-panel-hint {
    font-size: var(--ll-type-body-size);
}

.lesson-workspace-editor-stack .panel-copy>p:not(.lesson-workspace-phase__hint),
.lesson-workspace-editor-stack .lesson-panel-hint:not(.lesson-workspace-phase__hint),
.lesson-workspace-editor-stack .email-empty-state:not(.lesson-workspace-phase__hint) {
    color: var(--lesson-muted-text);
}

/* Locked phases: win over live-mode chrome and stack title/hint colors. */
.lesson-workspace-editor-stack[data-lesson-panel-mode="live"] .lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] > .lesson-phase-card,
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] > .lesson-phase-card {
    opacity: 0.48;
    filter: saturate(0.28) brightness(0.9);
    border-color: color-mix(in srgb, var(--lesson-border-subtle, var(--border-default)) 92%, transparent);
    background: color-mix(in srgb, var(--lesson-surface-card-strong, var(--bg-card)) 88%, var(--bg-elevated));
    box-shadow: none;
    outline: none;
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .panel-copy::before {
    opacity: 0.35;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .panel-copy :is(h2, p, .lesson-panel-hint, .email-empty-state),
.lesson-editor-route .lesson-workspace-shell .lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy :is(h2, p, .lesson-panel-hint, .email-empty-state) {
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .lesson-workspace-phase__title,
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy h2 {
    color: color-mix(in srgb, var(--text-secondary) 72%, transparent);
}

.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .lesson-workspace-phase__hint,
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .lesson-panel-hint,
.lesson-workspace-editor-sibling[data-lesson-phase-access="locked"] .lesson-workspace-phase__summary-copy .email-empty-state {
    color: color-mix(in srgb, var(--text-secondary) 58%, transparent);
}

.lesson-workspace-editor-stack .summary-doc-status {
    color: color-mix(in srgb, var(--lesson-muted-text, var(--text-secondary)) 92%, transparent);
    font-size: var(--ll-type-meta-size);
}

.lesson-workspace-editor-stack .lesson-details-toggle {
    min-height: 48px;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--lesson-border-subtle);
    background: var(--lesson-surface-control);
}

.lesson-workspace-editor-stack .lesson-details-toggle:hover {
    border-color: var(--lesson-border-strong);
    background: color-mix(in srgb, var(--lesson-surface-control) 82%, var(--primary-strong));
}

.lesson-workspace-editor-stack :is(input, select, textarea, .email-input, .lesson-start-card, .lesson-tags-trigger) {
    border-color: var(--lesson-border-subtle);
    background: var(--lesson-surface-control);
}

.lesson-workspace-editor-stack .lesson-event-row-summary.is-placeholder {
    color: color-mix(in srgb, var(--lesson-muted-text, var(--text-secondary)) 92%, transparent);
}

/* Book compact form: empty picker labels match input ::placeholder (wins over rule above). */
.lesson-workspace-editor-stack .lesson-details-inline-form--compact-event :is(
    .lesson-event-row-summary.is-placeholder,
    .lesson-tags-placeholder
) {
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
    color: color-mix(in srgb, var(--text-primary, var(--ink)) 45%, transparent);
}

.lesson-workspace-editor-stack .lesson-shared-tags-field .lesson-tag-picker-panel,
.lesson-workspace-editor-stack .lesson-student-visible-fields:not(.lesson-feedback-panel-section),
.lesson-workspace-editor-stack .lesson-private-fields,
.lesson-workspace-editor-stack .summary-panel-inner {
    border-color: var(--lesson-border-subtle);
    background: color-mix(in srgb, var(--lesson-surface-card-strong) 86%, transparent);
}

.lesson-workspace-editor-stack .upload-media-list {
    gap: 0;
}

.lesson-workspace-editor-stack .upload-media-list .upload-media-row + .upload-media-row {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-list {
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-list .upload-media-row + .upload-media-row {
    border-top: 1px solid var(--stroke);
}

.lesson-workspace-editor-stack .upload-media-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-row {
    padding: 6px 8px;
    row-gap: 2px;
    column-gap: 6px;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-row__head {
    gap: 4px;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-row .upload-media-name {
    font-size: var(--ll-type-body-size);
    line-height: 1.25;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-row--open-preview {
    cursor: pointer;
    touch-action: manipulation;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-row--open-preview .upload-media-row__head {
    touch-action: manipulation;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-controls {
    flex-wrap: nowrap;
    gap: 4px;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-controls-meta--capture {
    order: unset;
    flex: 0 1 auto;
    padding-inline-start: 0;
    grid-template-columns: minmax(2rem, auto) 1.125rem 1rem;
    column-gap: 3px;
    font-size: var(--ll-type-micro-size);
    line-height: 1.1;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-controls-meta__size {
    font-size: var(--ll-type-micro-size);
    line-height: 1.1;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-queue-status,
.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-source-pill {
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
}

.lesson-workspace-editor-stack .lesson-workspace-editor-sibling--capture .upload-media-actions-menu__trigger {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.lesson-workspace-editor-stack .upload-media-row .upload-media-name {
    font-size: var(--ll-type-body-size);
    line-height: 1.25;
}

.lesson-workspace-editor-stack .lesson-details-media-row .upload-media-row__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

/* Column head + align-items:flex-start lets the name grow to full text width and get
   clipped by the grid cell (extension shows as ".m" instead of ".mp4"). Stretch so
   base ellipsis + extension split works like capture rows. */
.lesson-workspace-editor-stack .lesson-details-media-row .upload-media-row__head .upload-media-name {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.lesson-workspace-editor-stack .lesson-details-media-row .upload-media-summary-status {
    margin: 0;
    font-size: max(var(--ll-type-meta-size), 0.68rem);
    font-weight: var(--ll-type-meta-weight);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--text-muted) 88%, transparent);
}

.lesson-workspace-editor-stack .upload-media-row .upload-media-controls-meta {
    font-size: var(--ll-type-meta-size);
    color: var(--lesson-muted-text, var(--text-secondary));
}

.lesson-workspace-editor-stack .upload-media-controls-meta--capture {
    gap: 6px;
}

.lesson-workspace-editor-stack .lesson-details-media-row .upload-media-controls-meta {
    font-size: var(--ll-type-micro-size);
    color: var(--lesson-muted-text, var(--text-secondary));
}

.lesson-workspace-editor-stack .lesson-details-media-row .upload-media-controls-meta__size {
    font-size: var(--ll-type-micro-size);
    line-height: 1.1;
}

.lesson-workspace-editor-stack .upload-media-controls {
    gap: 8px;
    margin-top: 0;
}

.lesson-workspace-editor-stack .upload-media-include-toggle {
    gap: 6px;
    min-height: 32px;
    font-size: var(--ll-type-meta-size);
}

.lesson-workspace-editor-stack .upload-media-row__head .upload-media-include-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 12px 10px 12px 8px;
}

.lesson-workspace-editor-stack .upload-media-actions {
    gap: 8px;
}

.lesson-workspace-editor-stack .upload-media-actions-menu__trigger {
    background: var(--lesson-surface-control);
    border-color: var(--lesson-border-subtle);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .upload-media-actions-menu__trigger:hover {
    background: color-mix(in srgb, var(--lesson-surface-control) 78%, var(--primary-strong));
    border-color: color-mix(in srgb, var(--primary-strong) 35%, var(--lesson-border-subtle));
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost {
    background: var(--lesson-surface-control);
    border-color: var(--lesson-border-subtle);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost {
    background: var(--lesson-surface-control);
    border-color: var(--lesson-border-subtle);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost:hover {
    background: color-mix(in srgb, var(--lesson-surface-control) 78%, var(--primary-strong));
    border-color: color-mix(in srgb, var(--primary-strong) 35%, var(--lesson-border-subtle));
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost {
    background: var(--lesson-surface-control);
    border-color: var(--lesson-border-subtle);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost:hover {
    background: color-mix(in srgb, var(--lesson-surface-control) 78%, var(--primary-strong));
    border-color: color-mix(in srgb, var(--primary-strong) 35%, var(--lesson-border-subtle));
}

/* Compact “View” pill — lesson files media rows + summary (matches upload transcript control) */
.lesson-workspace-editor-stack .lesson-details-media-transcript-view.ll-btn.ll-btn--ghost {
    min-height: 32px;
    max-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    transform: none;
    box-sizing: border-box;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    background: var(--lesson-surface-control);
    border: 1px solid var(--lesson-border-subtle);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .lesson-details-media-transcript-view.ll-btn.ll-btn--ghost:hover {
    background: color-mix(in srgb, var(--lesson-surface-control) 78%, var(--primary-strong));
    border-color: color-mix(in srgb, var(--primary-strong) 35%, var(--lesson-border-subtle));
    transform: none;
}

.lesson-workspace-editor-stack .lesson-details-media-transcript-view.ll-btn.ll-btn--ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    color: var(--lesson-muted-text, var(--text-secondary));
    border-color: color-mix(in srgb, var(--lesson-muted-text, var(--text-secondary)) 22%, var(--lesson-border-subtle));
    background: color-mix(in srgb, var(--lesson-surface-control) 88%, transparent);
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-delete.ll-btn.ll-btn--outline.ll-btn--danger {
    background: var(--lesson-surface-control);
    border-color: color-mix(in srgb, var(--color-danger-600) 32%, var(--lesson-border-subtle));
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-delete.ll-btn.ll-btn--outline.ll-btn--danger:hover {
    background: color-mix(in srgb, var(--color-danger-600) 12%, var(--lesson-surface-control));
    border-color: color-mix(in srgb, var(--color-danger-600) 45%, var(--lesson-border-subtle));
}

.lesson-workspace-editor-stack .upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost:disabled,
.lesson-workspace-editor-stack .upload-media-actions .upload-media-video-preview.ll-btn.ll-btn--ghost:disabled {
    background: color-mix(in srgb, var(--lesson-surface-control) 88%, transparent);
    border-color: var(--lesson-border-subtle);
    color: color-mix(in srgb, var(--lesson-header-text) 45%, transparent);
}

.lesson-workspace-editor-stack .lesson-tag-chip {
    border-color: color-mix(in srgb, var(--lesson-border-subtle) 70%, var(--primary-strong));
    background: var(--lesson-surface-control);
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .lesson-tag-picker--recent .lesson-tag-chip {
    min-height: 40px;
    border-color: color-mix(in srgb, var(--primary-strong) 42%, var(--lesson-border-subtle));
    background: color-mix(in srgb, var(--lesson-surface-control) 82%, var(--primary-strong));
}

.lesson-workspace-editor-stack .lesson-tag-chip.is-selected,
.lesson-workspace-editor-stack .lesson-tag-chip--summary {
    border-color: color-mix(in srgb, var(--lesson-selected) 72%, white);
    background: linear-gradient(135deg, var(--lesson-selected), var(--primary-strong));
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(47, 158, 80, 0.24);
}

.lesson-workspace-editor-stack .lesson-tag-chip.is-selected .lesson-tag-chip__check,
.lesson-workspace-editor-stack .lesson-tag-chip--summary .lesson-tag-chip__check {
    display: inline-flex;
    margin-right: 6px;
}

.lesson-workspace-editor-stack .lesson-feedback-section-heading h3 {
    color: var(--lesson-header-text);
}

.lesson-workspace-editor-stack .lesson-feedback-section-heading p {
    color: var(--lesson-muted-text);
}

@media (prefers-reduced-motion: no-preference) {

    :is(button,
        [role="button"],
        .main-menu-card,
        .nav-card,
        .common-card,
        .settings-menu-card,
        .today-hero-card,
        .today-recent-lesson-card,
        .today-lesson-row,
        .student-lesson-row,
        .contact-row,
        .contact-edit-lesson-item,
        .lesson-workspace-card) {
        transition-duration: 120ms;
        transition-timing-function: ease;
    }

    :is(button, [role="button"]):not(:disabled):active {
        transform: scale(0.97);
    }

    :is(.main-menu-card,
        .nav-card,
        .settings-menu-card,
        .today-recent-lesson-card,
        .today-lesson-row,
        .student-lesson-row,
        .contact-row,
        .contact-edit-lesson-item,
        .lesson-workspace-card):hover {
        filter: brightness(1.03);
    }

    :is(.main-menu-card,
        .nav-card,
        .settings-menu-card,
        .today-recent-lesson-card,
        .today-lesson-row,
        .student-lesson-row,
        .contact-row,
        .contact-edit-lesson-item,
        .lesson-workspace-card):active {
        transform: scale(0.99);
    }
}

@media (hover: hover) and (pointer: fine) {
    :is(button, [role="button"]):not(:disabled):hover {
        filter: brightness(1.04);
    }

    :is(.ll-btn.ll-btn--solid.ll-btn--primary, .today-submit, .lesson-action-primary, .email-submit, .fc-button-primary, .today-chat-send-button):not(:disabled):hover {
        box-shadow: var(--glow-success);
        filter: brightness(1.04);
    }

    :is(.ll-btn.ll-btn--solid.ll-btn--capture, .upload-record-btn, .record-video-btn, .today-hero-card__primary-action, .lesson-workspace-quick-action--primary):not(:disabled):hover {
        box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
        filter: brightness(1.04);
    }
}

:is(.contact-row, .contact-history-disclosure-toggle, .lesson-row, .today-chat-conversation, .message-row, .settings-row, .availability-grid-header, .availability-grid-time) {
    background: var(--surface-card, var(--bg-card));
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.today-chat-iphone {
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}

:is(.availability-slot, .availability-slot.is-empty) {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}

.fc-theme-standard td,
.fc-theme-standard th {
    background: var(--bg-elevated);
    border-color: var(--border-subtle);
}

/* Schedule FullCalendar body uses a light GCal canvas — see schedule-calendar-body.css */
.availability-calendar .fc-theme-standard td,
.availability-calendar .fc-theme-standard th {
    background: #ffffff;
    border-color: #dadce0;
}

.availability-calendar.fc,
.availability-calendar .fc,
.availability-calendar .fc-scrollgrid,
.availability-calendar .fc-list,
.availability-calendar .fc-list-table,
.availability-calendar .fc-popover {
    background: #ffffff;
    color: #3c4043;
    border-color: #dadce0;
}

.availability-calendar .fc .fc-day-today {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff);
}

.availability-calendar .fc .fc-daygrid-day-number,
.availability-calendar .fc .fc-col-header-cell-cushion,
.availability-calendar .fc .fc-timegrid-axis-cushion,
.availability-calendar .fc .fc-timegrid-slot-label-cushion {
    color: #70757a;
}

.availability-slot.is-available {
    background: color-mix(in srgb, var(--primary) 74%, var(--bg-elevated));
}

.availability-slot.is-unavailable {
    background: color-mix(in srgb, var(--text-secondary) 38%, var(--bg-elevated));
    box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.fc,
.fc-scrollgrid,
.fc-list,
.fc-list-table,
.fc-popover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

/* Keep Schedule FullCalendar light even when these bare .fc rules apply later in this file */
.availability-calendar .fc,
.availability-calendar .fc-scrollgrid,
.availability-calendar .fc-list,
.availability-calendar .fc-list-table,
.availability-calendar .fc-popover,
.availability-calendar .fc-theme-standard td,
.availability-calendar .fc-theme-standard th {
    background: #ffffff;
    color: #3c4043;
    border-color: #dadce0;
}

.availability-calendar .fc .fc-day-today {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff);
}

.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
    color: var(--text-secondary);
}

.availability-calendar .fc .fc-daygrid-day-number,
.availability-calendar .fc .fc-col-header-cell-cushion,
.availability-calendar .fc .fc-timegrid-axis-cushion,
.availability-calendar .fc .fc-timegrid-slot-label-cushion {
    color: #70757a;
}

.fc .fc-day-today {
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
}

:is(.status-badge, .pill, .tag, .chip, .badge) {
    background: rgba(63, 168, 90, 0.14);
    border-color: rgba(63, 168, 90, 0.24);
    color: var(--primary-strong);
}

:is(.warning, .highlight, .accent, .usage-highlight) {
    color: var(--accent);
}

/* Instructor rate card settings */
.rate-card-settings {
    display: grid;
    gap: 14px;
}

.rate-card-section-lead {
    margin: 0 0 8px;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.45;
    color: var(--text-secondary);
}

.rate-card-repeat-list {
    display: grid;
    gap: 12px;
    margin-bottom: 10px;
}

.rate-card-repeat-row {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: var(--bg-elevated);
}

.rate-card-repeat-row-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
}

.rate-card-repeat-row .rate-card-row-remove {
    justify-self: start;
    align-self: center;
}

.rate-card-pack-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.rate-card-preview-out--plain {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.45;
}

.rate-card-disclosure {
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 10px 14px;
    background: var(--bg-card);
}

.rate-card-disclosure summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
}

.rate-card-disclosure-body {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.rate-card-std-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.rate-card-preview-out {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    font-size: var(--ll-type-body-size);
    overflow-x: auto;
    max-height: 280px;
}

.lesson-field--checkbox-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-direction: row;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.lesson-field--checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
}

.lesson-field--checkbox-row span {
    flex: 1;
}

/* Payment Setup (instructor Stripe Connect) */
.payment-setup-root {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.payment-setup-banner {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.35);
    font-size: var(--ll-type-body-size);
}

.payment-setup-developer-guard {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.14);
    color: #fde68a;
    font-size: var(--ll-type-body-size);
}

.payment-setup-developer-guard[hidden] {
    display: none;
}

.payment-setup-developer-guard strong,
.payment-setup-developer-guard p {
    margin: 0;
}

.payment-setup-developer-guard strong {
    color: #fef3c7;
    font-size: var(--ll-type-heading-size);
}

.payment-setup-developer-guard p {
    color: #fde68a;
}

.payment-setup-developer-guard--error {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
}

.payment-setup-developer-guard--error strong,
.payment-setup-developer-guard--error p {
    color: #fecaca;
}

.payment-setup-disclosure {
    border: 1px solid var(--stroke);
    border-radius: 14px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
}

.payment-setup-disclosure-summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.payment-setup-disclosure-summary::-webkit-details-marker {
    display: none;
}

.payment-setup-disclosure-body {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

.payment-setup-help {
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    margin: 0;
}

.payment-setup-state-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.payment-setup-state-card h4,
.payment-setup-state-card p {
    margin: 0;
}

.payment-setup-state-card h4 {
    font-size: var(--ll-type-heading-size);
}

.payment-setup-state-card p {
    color: var(--text-muted, rgba(255, 255, 255, 0.68));
}

.payment-setup-readiness-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

.payment-setup-readiness-label {
    font-weight: 600;
}

.readiness-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--ll-type-label-size);
    font-weight: 700;
    border: 1px solid var(--border-subtle);
}

.readiness-badge--neutral {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted, #cbd5e1);
}

.readiness-badge--warn {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

.readiness-badge--good {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.35);
    color: #34d399;
}

.readiness-badge--bad {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #f87171;
}

.payment-setup-line {
    margin: 0;
}

.payment-setup-muted {
    font-weight: 400;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    margin-left: 6px;
}

.payment-setup-status-list {
    margin: 8px 0 0;
    padding-left: 1.1rem;
    font-size: var(--ll-type-body-size);
}

.payment-setup-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payment-setup-flag--on {
    color: #34d399;
    font-weight: 600;
}

.payment-setup-flag--off {
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

.payment-setup-stripe-buttons {
    margin-top: 8px;
}

.payment-setup-deposit-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Playbook panel + editors — moved to features/playbook.css */

/* Library panel scroll */
.home-panel[data-home-panel-content="library"]:not([hidden]) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-panel[data-home-panel-content="library"]:not([hidden])::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.view-root:has(.home-panel[data-home-panel-content="library"]:not([hidden])) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.view-root:has(.home-panel[data-home-panel-content="library"]:not([hidden]))::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.home-panel[data-home-panel-content="library"] > .ll-surface--screen-top > .ll-surface__body,
.home-panel[data-home-panel-content="directory"] > .ll-surface--screen-top > .ll-surface__body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-panel[data-home-panel-content="library"]:has(.playbook-library-selection-bar) > .ll-surface--screen-top > .ll-surface__body {
    scroll-padding-bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 80px));
}

.home-panel[data-home-panel-content="directory"]:not([hidden]) {
    overflow: hidden;
}

.home-panel[data-home-panel-content="library"] > .ll-surface--screen-top > .ll-surface__body::-webkit-scrollbar,
.home-panel[data-home-panel-content="directory"] > .ll-surface--screen-top > .ll-surface__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.playbook-library-link-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 14, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:
        var(--dialog-top-offset, 0)
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
}

.playbook-library-link-dialog {
    width: min(560px, 100%);
    max-width: calc(100vw - max(28px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    min-width: 0;
    margin-top: 8px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 28%, transparent);
    background: var(--surface-card-strong);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    max-height: min(calc(100dvh - var(--dialog-top-offset) - 24px), 900px);
}

.playbook-library-link-dialog > .ll-surface__body {
    padding: 12px 14px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.playbook-library-link-dialog > .ll-surface__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid color-mix(in srgb, var(--border-subtle) 22%, transparent);
}

.playbook-library {
    display: grid;
    gap: 8px;
}

.playbook-library-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

.playbook-library-bulk-select-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 40px;
}

.playbook-library-bulk-select-row .playbook-library__summary {
    flex: 1 1 auto;
    min-width: 0;
}

.playbook-library-bulk-select-row .playbook-library-shelf-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.playbook-library-add-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    min-width: 0;
    margin: 0;
}

.playbook-library-add-section__summary {
    list-style: none;
}

.playbook-library-add-section__summary::-webkit-details-marker {
    display: none;
}

.playbook-library-add-section__label {
    min-width: 0;
}

.playbook-library-add-section__body {
    width: 100%;
    padding-top: 6px;
}

.playbook-library-capture-toolbar {
    width: 100%;
    min-width: 0;
    /* Cancel .action-buttons margin-top so Record/Attach sit centered in the dropdown body. */
    margin-top: 0;
    margin-bottom: 0;
    overflow: visible;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.playbook-library-add-section__body,
.playbook-library-capture-toolbar .capture-action-group {
    overflow: visible;
}

.playbook-library-capture-toolbar .capture-action-group {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    /* Beat .media-controls-toolbar mobile min-height:64px so compact 34px CTAs center. */
    min-height: 34px;
}

.playbook-library-capture-toolbar .capture-action-group.playbook-library-capture-toolbar__shelf {
    flex: 1 1 100%;
}

.playbook-library-add-shelf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 34px;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--brand-primary, #2d7a3b);
    color: #fff;
    font-size: var(--ll-type-label-size, 0.8125rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.25;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(45, 122, 59, 0.22);
}

.playbook-library-add-shelf-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.playbook-library-add-shelf-btn i {
    font-size: var(--ll-type-meta-size);
}

/* Panel body clips overflow-x; open menus toward the left so Attach stays fully visible. */
.playbook-library-capture-toolbar .add-media-menu {
    left: auto;
    right: 0;
    z-index: 80;
}

/* Match Today “Start Lesson” compact split CTA (beat .media-controls-toolbar Capture lg rules). */
.playbook-library-capture-toolbar.media-controls-toolbar .capture-action-group > .ll-split-btn.upload-record-btn,
.playbook-library-capture-toolbar.media-controls-toolbar .capture-action-group > .ll-split-btn.upload-action-btn {
    display: grid;
    grid-template-columns: 3fr 1fr;
    flex: 1 1 auto;
    align-self: center;
    width: 100%;
    min-height: 34px;
    height: 34px;
    max-height: 34px;
    padding: 0;
    gap: 0;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(45, 122, 59, 0.22);
}

.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-action-btn .ll-split-btn__main,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-action-btn .ll-split-btn__toggle {
    min-height: 0;
    height: 100%;
    align-self: stretch;
    font-size: var(--ll-type-label-size, 0.8125rem);
    font-weight: var(--ll-type-label-weight, 600);
    line-height: 1.25;
}

.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-action-btn .ll-split-btn__main {
    flex-direction: row;
    padding: 0 10px;
    gap: 6px;
}

.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-action-btn .ll-split-btn__toggle {
    padding: 0 2px;
    font-size: var(--ll-type-meta-size);
}

.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__main i,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-action-btn .ll-split-btn__main i,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-record-btn .ll-split-btn__toggle i,
.playbook-library-capture-toolbar.media-controls-toolbar .ll-split-btn.upload-action-btn .ll-split-btn__toggle i {
    font-size: var(--ll-type-meta-size);
}

.playbook-library-bulk-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: color-mix(in srgb, #000 8%, var(--surface-card-strong));
}

.playbook-library-bulk-select input {
    margin: 0;
}

.playbook-library-shelf-select-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.playbook-library-shelf-select-field__label {
    font-size: var(--ll-type-caption-size);
    font-weight: 500;
    line-height: 1.2;
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.playbook-library-shelf-select {
    width: 100%;
    min-height: 40px;
}

.playbook-library-config-menu {
    flex: 0 0 auto;
}

.playbook-library-config-menu__toggle {
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: color-mix(in srgb, #000 8%, var(--surface-card-strong));
}

.playbook-library__summary,
.playbook-library__status {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.playbook-library__alert {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.playbook-library__more {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.playbook-library--empty .playbook-library-empty-inner {
    padding: 16px 8px;
    text-align: center;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.playbook-library--empty .playbook-library-empty-inner p {
    margin: 0;
    max-width: 26rem;
    font-size: var(--ll-type-body-sm-size);
    line-height: 1.55;
    color: color-mix(in srgb, var(--text-secondary) 90%, var(--text-primary));
    font-weight: 400;
}

.playbook-library-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.directory-dashboard-group.playbook-library-list {
    gap: 0;
}

.playbook-library-item-row.library-search-filter-hidden,
.playbook-library-item-row.library-shelf-filter-hidden,
.playbook-library-item-row[hidden] {
    display: none !important;
}

.playbook-library-item-row {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: auto 54px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    /* Keep rows at least thumb-tall. min-height:0 let nested grid/flex crush
       rows so video thumbs painted over neighbors. */
    min-height: 64px;
    padding: 8px 10px 8px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--stroke);
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.directory-dashboard-group .playbook-library-item-row:last-child {
    border-bottom: 0;
}

.directory-dashboard-group .playbook-library-item-row:hover,
.directory-dashboard-group .playbook-library-item-row:has(.today-row-actions-menu[open]) {
    background: color-mix(in srgb, var(--brand-primary, #2f6f5e) 6%, transparent);
}

.playbook-library-item-row.is-selected {
    border-color: color-mix(in srgb, var(--accent-primary, var(--brand-primary, #2f6f5e)) 45%, var(--stroke));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary, var(--brand-primary, #2f6f5e)) 22%, transparent);
    background: color-mix(in srgb, var(--accent-primary, var(--brand-primary, #2f6f5e)) 8%, transparent);
}

/* Row overflow:hidden clips thumbs; unlock while the actions menu is open so
   the panel can sit on a simple absolute offset from the toggle. */
.playbook-library-item-row:has(.today-row-actions-menu[open]) {
    z-index: 24;
    overflow: visible;
}

.playbook-library-item-row__thumb {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    max-width: 54px;
    max-height: 54px;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, #000 28%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    contain: paint;
    isolation: isolate;
}

.playbook-library-item-row__thumb video,
.playbook-library-item-row__thumb img,
.playbook-library-item-row__thumb .linked-embed-list-thumb__image {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.playbook-library-item-row__thumb--video,
.playbook-library-item-row__thumb--embed {
    position: relative;
}

.playbook-library-item-row__thumb--video.is-thumb-ready .playbook-library-item-row__thumb-play {
    opacity: 0.82;
}

.playbook-library-item-row__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--ll-type-meta-size);
    text-shadow: 0 1px 3px color-mix(in srgb, #000 70%, transparent);
    pointer-events: none;
}

.playbook-library-item-row__thumb-play--solo {
    position: static;
    width: 100%;
    height: 100%;
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-primary));
    text-shadow: none;
}

.playbook-library-item-row__shared-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: var(--ll-type-caption-size, 0.68rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent) 88%, var(--text-primary));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.playbook-library-item-row__thumb--empty i {
    font-size: var(--ll-type-body-sm-size);
    color: color-mix(in srgb, var(--text-secondary) 82%, var(--text-primary));
}

.playbook-library-item-row__thumb-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.playbook-library-item-row__copy {
    display: grid;
    gap: 1px;
    min-width: 0;
    align-self: center;
}

.playbook-library-item-row__title {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playbook-library-item-row__meta {
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: 1.15;
    /* Prefer readable secondary ink on dark cards (theme --text-secondary can be too dim). */
    color: color-mix(in srgb, var(--text-primary) 72%, var(--text-secondary));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playbook-library-item-row__favorite-wrap {
    align-self: center;
    flex: 0 0 auto;
}

.playbook-library-item-row__favorite-wrap:empty {
    display: none;
}

.playbook-library-item-row__favorite {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #d4a017;
    cursor: pointer;
}

.playbook-library-item-row__favorite:hover,
.playbook-library-item-row__favorite:focus-visible {
    background: color-mix(in srgb, #d4a017 14%, transparent);
    outline: none;
}

.playbook-library-item-row__favorite i {
    font-size: var(--ll-type-label-size);
}

.playbook-library-item-row__menu {
    align-self: center;
    flex: 0 0 auto;
    cursor: default;
}

.playbook-library-item-row .today-row-actions-menu__toggle {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    border-radius: 8px;
}

.playbook-library-item-row__select {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    cursor: default;
}

.playbook-library-viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 14, 0.82);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding:
        var(--dialog-top-offset, 0)
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
}

.playbook-library-viewer-dialog {
    width: min(960px, 100%);
    max-width: calc(100vw - max(16px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    min-width: 0;
    margin-top: 4px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--border-subtle) 28%, transparent);
    background: var(--surface-card-strong);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    display: flex;
    flex-direction: column;
    max-height: min(calc(100dvh - var(--dialog-top-offset) - 16px), 960px);
}

.playbook-library-viewer__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 16px;
    min-height: 0;
    flex: 1 1 auto;
}

.playbook-library-viewer__body--transcript-open {
    overflow: hidden;
}

.playbook-library-viewer__body--transcript-open .playbook-library-viewer__video,
.playbook-library-viewer__body--transcript-open .playbook-library-viewer__embed,
.playbook-library-viewer__body--transcript-open .playbook-library-viewer__embed .linked-embed-preview-iframe,
.playbook-library-viewer__body--transcript-open .playbook-library-viewer__pdf {
    max-height: min(38vh, 320px);
}

.playbook-library-viewer__body--transcript-open .playbook-library-viewer__image {
    max-height: min(40vh, 360px);
}

.playbook-library-viewer__embed {
    width: 100%;
    min-height: min(52vh, 420px);
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.playbook-library-viewer__embed .linked-embed-preview-iframe {
    width: 100%;
    height: min(52vh, 420px);
    min-height: 240px;
    border: 0;
    display: block;
}

.playbook-library-viewer__video {
    width: 100%;
    max-height: min(60vh, 520px);
    border-radius: 12px;
    background: #000;
}

.playbook-library-viewer__body--portrait-media .playbook-library-viewer__video {
    width: auto;
    max-width: 100%;
    max-height: min(76vh, 680px);
    margin-inline: auto;
    display: block;
}

.playbook-library-viewer__body--transcript-open.playbook-library-viewer__body--portrait-media .playbook-library-viewer__video {
    max-height: min(52vh, 480px);
}

.playbook-library-viewer__image {
    display: block;
    width: 100%;
    max-height: min(65vh, 560px);
    object-fit: contain;
    border-radius: 12px;
    background: color-mix(in srgb, #000 24%, transparent);
}

.playbook-library-viewer__audio {
    width: 100%;
}

.playbook-library-viewer__pdf {
    width: 100%;
    height: min(60vh, 520px);
    min-height: 320px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}

.playbook-library-viewer__meta {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-secondary);
}

.playbook-library-viewer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.playbook-library-viewer__transcript {
    border: 1px solid color-mix(in srgb, var(--border-subtle) 36%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-card) 72%, transparent);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
}

.playbook-library-viewer__transcript-text,
.playbook-library-viewer__transcript-textarea {
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    font-size: var(--ll-type-body-size);
    line-height: 1.5;
    color: var(--text-primary);
    border: none;
    background: transparent;
    resize: none;
    padding: 0;
    font-family: inherit;
}

.playbook-library-viewer__transcript-status {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-secondary);
}

.playbook-library-viewer__transcript-status--error {
    color: var(--status-danger, #f87171);
}

.playbook-library-viewer__empty {
    margin: 0;
    color: var(--text-secondary);
}

.playbook-library-viewer__fallback {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 8px 0;
}

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


.playbook-library-selection-bar {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-card-strong, var(--surface-elevated));
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
    isolation: isolate;
}

.home-panel[data-home-panel-content="library"] .playbook-library:has(.playbook-library-selection-bar) {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.playbook-library-selection-bar p {
    margin: 0;
    font-size: var(--ll-type-label-size);
    font-weight: 500;
}

.playbook-library-selection-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.playbook-library-shelf-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--ll-z-modal, 1200);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: color-mix(in srgb, var(--overlay-backdrop, #000) 45%, transparent);
}

.playbook-library-shelf-dialog {
    width: min(100%, 520px);
    max-height: min(88vh, 720px);
}

.playbook-library-shelf-pick-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.playbook-library-shelf-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: var(--surface-elevated);
    text-align: left;
}

.playbook-library-shelf-pick__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    color: var(--text-primary);
}

.playbook-library-shelf-icon-glyph {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    object-fit: contain;
    /* SVG fill is currentColor→black as <img>; invert for dark UI */
    filter: invert(1);
    opacity: 0.95;
    flex-shrink: 0;
}

.playbook-library-shelf-icon-glyph--text {
    filter: none;
    opacity: 1;
    font-size: var(--ll-type-heading-size);
    line-height: 1;
}

.playbook-library-shelf-pick__label {
    font-size: var(--ll-type-body-size);
    font-weight: 500;
}

.playbook-library-shelf-pick__empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--ll-type-body-sm-size);
}

.playbook-library-shelf-editor__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.playbook-library-shelf-icon-field {
    margin: 0;
    flex: 0 0 auto;
}

.playbook-library-shelf-icon-matrix {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

@media (max-width: 520px) {
    .playbook-library-shelf-icon-matrix {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.playbook-library-shelf-icon-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 0;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: var(--surface-elevated);
    font-size: var(--ll-type-display-size);
    line-height: 1;
    color: var(--text-primary);
    cursor: pointer;
}

.playbook-library-shelf-icon-pick .playbook-library-shelf-icon-glyph {
    width: 1.65rem;
    height: 1.65rem;
    /* Clicks should hit the button, not the image */
    pointer-events: none;
}

.playbook-library-shelf-icon-pick.is-selected {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-elevated));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.playbook-library-shelf-editor__status {
    margin: 0;
    min-height: 1.25em;
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-secondary);
}

.playbook-library.is-loading .playbook-library-list {
    opacity: 0.72;
    pointer-events: none;
}

.playbook-library-organize__lede,
.playbook-library-organize__status,
.playbook-library-organize__alert {
    margin: 0 0 12px;
    font-size: var(--ll-type-body-sm-size);
    color: var(--text-secondary);
}

.playbook-library-organize__alert {
    color: var(--text-primary);
}

.playbook-library-organize-proposal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.playbook-library-organize-proposal {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: var(--surface-elevated);
}

.playbook-library-organize-proposal.is-selected {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.playbook-library-organize-proposal__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.playbook-library-organize-proposal__body strong {
    font-size: var(--ll-type-body-size);
    font-weight: 600;
}

.playbook-library-organize-proposal__body p {
    margin: 0;
    font-size: var(--ll-type-label-size);
    color: var(--text-secondary);
}

.playbook-library-organize-proposal__items {
    color: color-mix(in srgb, var(--text-secondary) 88%, var(--text-primary));
}

.lesson-library-picker-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] [data-lesson-library-picker-host] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    overflow: hidden;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .library-panel-search-mount {
    flex: 0 0 auto;
    order: -10;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library__more,
.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library-selection-bar {
    flex: 0 0 auto;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library--lesson-picker .playbook-library-item-row {
    flex: 0 0 auto;
    grid-template-columns: auto 54px minmax(0, 1fr) auto;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library--lesson-picker .playbook-library-item-row__menu {
    justify-self: end;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library--lesson-picker .playbook-library-item-row__menu .ll-btn.ll-btn--text {
    white-space: nowrap;
    font-size: var(--ll-type-label-size);
    padding-inline: 10px;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library--lesson-picker .playbook-library__summary {
    margin: 0;
}

.playbook-library__title-search-redirect {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.playbook-library__title-search-redirect .ll-title-search-redirect-row {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

.ll-stack-shell[data-ll-stack-id="lesson-library-picker"] .playbook-library__title-search-redirect {
    align-self: stretch;
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .ll-stack-shell__body-inner,
.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .app-route-fullscreen-body-inner {
    padding:
        6px
        max(6px, env(safe-area-inset-right, 0px))
        max(6px, env(safe-area-inset-bottom, 0px))
        max(6px, env(safe-area-inset-left, 0px));
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .ll-stack-shell__content {
    max-width: none !important;
    margin-inline: 0 !important;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] [data-lesson-practice-picker-host] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .playbook-library--practice-picker {
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .playbook-library--practice-picker .playbook-library-item-row {
    grid-template-columns: auto 54px minmax(0, 1fr) auto;
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .playbook-library--practice-picker .playbook-library-item-row__menu {
    justify-self: end;
}

.ll-stack-shell[data-ll-stack-id="lesson-practice-picker"] .playbook-library--practice-picker .playbook-library-item-row__menu .ll-btn.ll-btn--text {
    white-space: nowrap;
    font-size: var(--ll-type-label-size);
    padding-inline: 10px;
}

.ll-title-search-redirect-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--text-primary, #fff);
    font-family: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    text-align: left;
    cursor: pointer;
}

.ll-title-search-redirect-row:hover,
.ll-title-search-redirect-row:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    outline: none;
}

.ll-title-search-redirect-row__icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-info-strong, #38bdf8) 88%, #0f172a);
    color: #fff;
    font-size: var(--ll-type-label-size);
}

.ll-title-search-redirect-row__label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.ll-title-search-redirect-row__chevron {
    flex: 0 0 auto;
    font-size: var(--ll-type-meta-size);
    opacity: 0.6;
}

/* Playbook onboarding + AI helper — moved to features/playbook.css */

@media (max-width: 767px) {
    .playbook-library-link-overlay {
        align-items: center;
        padding:
            var(--dialog-top-offset) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    }

    .playbook-library-link-dialog {
        margin-top: 0;
        max-height: calc(100dvh - var(--dialog-top-offset) - max(10px, env(safe-area-inset-bottom)) - 12px);
    }
}


/* === Responsive utilities (opt-in; safe on desktop) === */
.u-min-w-0 {
    min-width: 0;
}

.u-max-w-full {
    max-width: 100%;
}

.u-shrink {
    flex-shrink: 1;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .u-sm-stack {
        flex-direction: column;
        align-items: stretch;
    }

    .u-sm-full {
        width: 100%;
        max-width: 100%;
    }

    .u-sm-tight-gap {
        gap: var(--space-2);
    }
}

.directory-search-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Demo Environment ribbon (play sandbox session) */
.lessonlink-sandbox-ribbon {
    background: linear-gradient(90deg, #0b4f4b, #0f766e);
    color: var(--text-inverse);
    font-size: var(--ll-type-meta-size);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.lessonlink-sandbox-ribbon__inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 14px 10px;
    max-width: 1200px;
    margin: 0 auto;
}

.lessonlink-sandbox-ribbon__row--header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 30px;
}

.lessonlink-sandbox-ribbon__row--body {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 12px;
}

.lessonlink-sandbox-ribbon.is-collapsed .lessonlink-sandbox-ribbon__row--body {
    display: none;
}

.lessonlink-sandbox-ribbon.is-collapsed .lessonlink-sandbox-ribbon__inner {
    padding-bottom: 8px;
}

.lessonlink-sandbox-ribbon__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    padding: 4px 5px 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    font-size: var(--ll-type-meta-size);
    line-height: 1.2;
}

.lessonlink-sandbox-ribbon__badge-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lessonlink-sandbox-ribbon__collapse {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
}

.lessonlink-sandbox-ribbon__collapse:hover {
    background: rgba(255, 255, 255, 0.22);
}

.lessonlink-sandbox-ribbon__collapse:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 2px;
}

.lessonlink-sandbox-ribbon__chevron {
    font-size: var(--ll-type-meta-size);
    line-height: 1;
}

.lessonlink-sandbox-ribbon__hint {
    flex: 1 1 220px;
    min-width: 0;
    opacity: 0.92;
    line-height: 1.35;
}

.lessonlink-sandbox-ribbon__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
    justify-content: flex-end;
}

.lessonlink-sandbox-ribbon__btn {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-inverse);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: var(--ll-type-meta-size);
    font-weight: 600;
    cursor: pointer;
}

.lessonlink-sandbox-ribbon__btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lessonlink-sandbox-ribbon__btn--ghost {
    background: transparent;
}

.lessonlink-sandbox-persona-overlay .dialog-content.lessonlink-sandbox-persona-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    max-height: min(88dvh, 640px);
    overflow: hidden;
}

/* Persona picker: one scroll surface (the list), not overlay + dialog + list. */
.lessonlink-sandbox-persona-overlay.dialog-overlay {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.lessonlink-sandbox-persona-overlay .dialog-message {
    flex: 0 0 auto;
}

.lessonlink-sandbox-persona-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-close {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-close:hover,
.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-close:focus-visible {
    opacity: 0.9;
    background: transparent;
    border-color: transparent;
}

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

.lessonlink-sandbox-persona-overlay--busy .lessonlink-sandbox-persona-list,
.lessonlink-sandbox-persona-overlay--busy .lessonlink-sandbox-persona-close,
.lessonlink-sandbox-persona-overlay--busy .dialog-message,
.lessonlink-sandbox-persona-overlay.lessonlink-sandbox-persona-overlay--busy .lessonlink-sandbox-persona-list,
.lessonlink-sandbox-persona-surface--busy .lessonlink-sandbox-persona-list {
    pointer-events: none;
    opacity: 0.45;
}

.lessonlink-sandbox-persona-dialog {
    position: relative;
}

.lessonlink-sandbox-persona-busy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 20px;
    border-radius: inherit;
    background: color-mix(in srgb, #ffffff 88%, transparent);
    text-align: center;
}

.lessonlink-sandbox-persona-busy[hidden] {
    display: none !important;
}

.lessonlink-sandbox-persona-busy__title {
    margin: 0;
    font-size: var(--ll-type-heading-size);
    font-weight: 700;
    color: #0f172a;
}

.lessonlink-sandbox-persona-busy__message {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    color: #64748b;
}

/* Workflow back controls use circular / pill chrome via .ll-back-action. */
:is(
    .lesson-event-popover__close,
    .home-lesson-ask__answer-close,
    .today-chat-back-button
) {
    border: none;
    background: transparent;
    box-shadow: none;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-list,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 4px;
    padding: 4px 2px;
    box-sizing: border-box;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    text-align: left;
    border: 2px solid rgba(15, 23, 42, 0.14);
    border-radius: 10px;
    padding: 8px 10px;
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    /* Force a dark text color so the white pill stays high contrast even when
       the parent dialog uses a dark/inverted text color. */
    color: #0f172a;
    box-sizing: border-box;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row:hover,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row:hover {
    border-color: rgba(37, 99, 235, 0.55);
    background: #f1f5ff;
    color: #0f172a;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row:focus-visible,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row--roster,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row--roster {
    background: #fef9c3;
    border-color: rgba(202, 138, 4, 0.4);
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row--roster:hover,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row--roster:hover {
    background: #fef08a;
    border-color: rgba(202, 138, 4, 0.55);
    color: #0f172a;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row--selected,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row--selected {
    border-color: rgba(37, 99, 235, 0.85);
    background: #eaf1ff;
    color: #0f172a;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row--selected.lessonlink-sandbox-persona-row--roster,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row--selected.lessonlink-sandbox-persona-row--roster {
    background: #fef08a;
    border-color: rgba(37, 99, 235, 0.85);
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__avatar,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.06);
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__avatar img,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__avatar--empty,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__avatar--empty {
    border: 1px dashed rgba(15, 23, 42, 0.25);
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__text,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-meta-size);
    font-weight: 600;
    line-height: 1.35;
    color: inherit;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__role,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__role {
    display: block;
    margin-top: 2px;
    font-size: var(--ll-type-meta-size);
    font-weight: 500;
    line-height: 1.3;
    color: #475569;
    text-transform: capitalize;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__plan,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__plan {
    text-transform: none;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__roster,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__roster {
    display: block;
    margin-top: 2px;
    font-size: var(--ll-type-meta-size);
    font-weight: 600;
    line-height: 1.3;
    color: #854d0e;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row__stats,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row__stats {
    display: block;
    margin-top: 2px;
    font-size: var(--ll-type-micro-size);
    font-weight: 500;
    line-height: 1.3;
    color: #64748b;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row--selected .lessonlink-sandbox-persona-row__role,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row--selected .lessonlink-sandbox-persona-row__role {
    color: #1d4ed8;
}

.lessonlink-sandbox-persona-overlay .lessonlink-sandbox-persona-row--selected .lessonlink-sandbox-persona-row__stats,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row--selected .lessonlink-sandbox-persona-row__stats {
    color: #475569;
}

.lesson-pricing-row {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.lesson-workspace-editor-stack[data-session-entry-type="practice"] #lesson-details-pricing-row,
.lesson-workspace-editor-stack[data-session-entry-type="practice"] #lesson-pricing-row-ghost {
    display: none !important;
}

.lesson-workspace-editor-stack[data-session-entry-type="practice"] #lesson-people-picker-new-student-row,
.lesson-workspace-editor-stack[data-session-entry-type="practice"] #lesson-people-picker-segment-new {
    display: none !important;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-row {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lesson-event-field--pricing .lesson-event-field__icon {
    padding-top: 8px;
}

.lesson-details-pricing-row__body {
    width: 100%;
    min-width: 0;
}

.lesson-details-pricing-tier-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 160px;
    min-width: 0;
    margin-bottom: 0;
    grid-template-columns: none;
}

.lesson-details-pricing-row .lesson-details-pricing-rate-wrap.lesson-field {
    grid-template-columns: none;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-inline {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 6px;
}

.lesson-details-pricing-row .lesson-field {
    margin-bottom: 10px;
}

.lesson-details-pricing-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.lesson-details-pricing-inline .lesson-field {
    margin-bottom: 0;
}

.lesson-details-pricing-icon-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 160px;
    min-width: 0;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-tier-field {
    flex: 1 1 auto;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-rate-wrap.lesson-field {
    flex: 0 0 auto;
    min-width: 0;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-row .lesson-field.lesson-details-pricing-tier-field,
.lesson-details-inline-form--compact-event .lesson-details-pricing-row .lesson-field.lesson-details-pricing-rate-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    grid-template-columns: none;
    margin-bottom: 0;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-row .lesson-details-pricing-tier-field > .lesson-details-pricing-rate-select,
.lesson-details-inline-form--compact-event .lesson-details-pricing-row .lesson-details-pricing-rate-wrap > .lesson-details-pricing-override-input {
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-row .lesson-details-pricing-rate-wrap > .lesson-details-pricing-override-input {
    width: 100%;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-rate-wrap {
    align-items: center;
}

.lesson-details-inline-form--compact-event .lesson-details-pricing-rate-wrap .lesson-details-pricing-field-label {
    flex: 0 0 auto;
    margin-bottom: 0;
    align-self: center;
}

.lesson-details-pricing-rate-wrap.lesson-field {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
}

.lesson-details-pricing-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    text-align: center;
    opacity: 0.88;
    color: var(--text-muted, #64748b);
}

.lesson-details-pricing-rate-select {
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-details-pricing-override-input {
    flex: 1 1 auto;
    min-width: 3.5rem;
    width: auto;
    max-width: none;
}

.lesson-details-pricing-rate-wrap .lesson-details-pricing-field-label {
    font-size: var(--ll-type-meta-size);
    font-weight: 600;
    color: var(--text-muted, #64748b);
    margin-right: 6px;
    white-space: nowrap;
}

/*
 * Hub New chips — buttons.css loads after shared-misc and restyles
 * `.ll-btn--solid.ll-btn--primary` to solid green. Keep Library/Playbook/
 * Contacts New on the tinted Lessons chip (icon badge + dark wash).
 */
.home-panel[data-home-panel-content="library"] .library-hub-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="library"] .library-hub-toolbar .playbook-library-add-section > summary.hub-toolbar-new-btn,
.home-panel[data-home-panel-content="playbook"] .playbook-panel-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="directory"] .directory-hub-toolbar .hub-toolbar-new-btn,
.home-panel[data-home-panel-content="sessions"] .sessions-hub-toolbar .hub-toolbar-new-btn,
body.ll-student-portal .student-portal__sessions-card .student-portal__toolbar .hub-toolbar-new-btn {
    background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-card-strong, #1c252e));
    border: 0;
    box-shadow: none;
    color: var(--text-primary, #fff);
}

.home-panel[data-home-panel-content="library"] .library-hub-toolbar .hub-toolbar-new-btn:hover,
.home-panel[data-home-panel-content="library"] .library-hub-toolbar .hub-toolbar-new-btn:focus-visible,
.home-panel[data-home-panel-content="library"] .library-hub-toolbar .playbook-library-add-section > summary.hub-toolbar-new-btn:hover,
.home-panel[data-home-panel-content="library"] .library-hub-toolbar .playbook-library-add-section > summary.hub-toolbar-new-btn:focus-visible,
.home-panel[data-home-panel-content="playbook"] .playbook-panel-toolbar .hub-toolbar-new-btn:hover,
.home-panel[data-home-panel-content="playbook"] .playbook-panel-toolbar .hub-toolbar-new-btn:focus-visible,
.home-panel[data-home-panel-content="directory"] .directory-hub-toolbar .hub-toolbar-new-btn:hover,
.home-panel[data-home-panel-content="directory"] .directory-hub-toolbar .hub-toolbar-new-btn:focus-visible,
.home-panel[data-home-panel-content="sessions"] .sessions-hub-toolbar .hub-toolbar-new-btn:hover,
.home-panel[data-home-panel-content="sessions"] .sessions-hub-toolbar .hub-toolbar-new-btn:focus-visible,
body.ll-student-portal .student-portal__sessions-card .student-portal__toolbar .hub-toolbar-new-btn:hover,
body.ll-student-portal .student-portal__sessions-card .student-portal__toolbar .hub-toolbar-new-btn:focus-visible {
    background: color-mix(in srgb, var(--brand-primary) 22%, var(--surface-card-strong, #1c252e));
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

/* ---- public/style/features/directory-scroll.css ---- */
/* Contact directory: keep its controls fixed while the contact results own scrolling. */
.home-panel[data-home-panel-content="directory"]>.ll-surface--screen-top>.ll-surface__body {
    overflow: hidden;
}

.home-panel[data-home-panel-content="directory"] .directory-card {
    padding-bottom: var(--ll-space-2);
}

.home-panel[data-home-panel-content="directory"] .directory-card>#directory-list {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--ll-space-4);
    scroll-padding-bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px));
    scrollbar-width: none;
}

.home-panel[data-home-panel-content="directory"] .directory-card>#directory-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ---- public/style/features/lesson-workspace.css ---- */
/* Session workspace workflow chrome (Setup / Capture / Share). */
.lesson-workspace-workflow-chrome {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
}

/* Segmented step tabs — overrides legacy underline rules in theme-overrides.css */
.lesson-workspace-workflow-chrome .lesson-workspace-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--stroke) 88%, transparent);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 36%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
    box-sizing: border-box;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tabs[data-lesson-workspace-tab-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-md, 12px) - 4px);
    background: transparent;
    color: color-mix(in srgb, var(--text-secondary) 92%, var(--text-primary));
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    letter-spacing: -0.01em;
    line-height: var(--ll-type-label-line);
    cursor: pointer;
    transition:
        color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__inner {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__label {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab:hover:not(:disabled):not(.is-locked):not(.is-active) {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 52%, transparent);
    border-color: color-mix(in srgb, var(--stroke) 72%, transparent);
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab.is-active {
    color: var(--text-heading, var(--text-primary));
    font-size: var(--ll-type-heading-size);
    font-weight: 600;
    line-height: var(--ll-type-heading-line);
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 88%, var(--bg-elevated, #0f172a));
    border-color: color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 58%, var(--stroke));
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent),
        0 0 0 1px color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 14%, transparent);
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab.is-active .lesson-workspace-tab__step--current {
    color: var(--primary-strong, var(--accent-info, #38bdf8));
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab--workflow-complete:not(.is-active):not(.is-locked) {
    color: color-mix(in srgb, var(--text-primary) 88%, var(--text-secondary));
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 55%, transparent);
    outline-offset: 1px;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab:disabled,
.lesson-workspace-workflow-chrome .lesson-workspace-tab.is-locked {
    opacity: 0.46;
    cursor: not-allowed;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__step {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: var(--ll-type-micro-size);
    line-height: 1;
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__step--complete {
    color: var(--accent-success-strong, #16a34a);
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__step--current {
    color: color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 88%, var(--text-secondary));
    font-size: var(--ll-type-micro-size);
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__step--upcoming {
    color: color-mix(in srgb, var(--text-secondary) 68%, transparent);
    font-size: var(--ll-type-micro-size);
}

.lesson-workspace-workflow-chrome .lesson-workspace-tab__step--locked {
    color: color-mix(in srgb, var(--text-secondary) 52%, transparent);
    font-size: var(--ll-type-micro-size);
}

.lesson-workspace-step-context {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--stroke) 82%, transparent);
    border-left: 3px solid color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 62%, transparent);
    border-radius: var(--radius-md, 12px);
    background: color-mix(in srgb, var(--surface-card-strong, #1e293b) 34%, transparent);
}

.lesson-workspace-step-context[data-workflow-locked="true"] {
    border-left-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.lesson-workspace-step-context__line {
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    color: var(--text-primary);
}

.lesson-workspace-step-context--enter {
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 180ms var(--ease-standard, ease),
        transform 180ms var(--ease-standard, ease);
}

.lesson-workspace-step-context--enter.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.lesson-workspace-step-context__nudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--stroke) 72%, transparent);
}

.lesson-workspace-step-context__nudge-text {
    flex: 1 1 12rem;
    margin: 0;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-body-sm-line);
    color: var(--text-primary);
}

.lesson-workspace-step-context__nudge-action {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 52%, var(--stroke));
    border-radius: calc(var(--radius-md, 12px) - 2px);
    background: color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 14%, transparent);
    color: var(--text-heading, var(--text-primary));
    font-size: var(--ll-type-label-size);
    font-weight: 600;
    line-height: var(--ll-type-label-line);
    cursor: pointer;
}

.lesson-workspace-step-context__nudge-action:hover {
    background: color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 22%, transparent);
}

.lesson-workspace-step-context__nudge-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-strong, var(--accent-info, #38bdf8)) 55%, transparent);
    outline-offset: 2px;
}

/* Capture actions stay primary within the step, below workflow chrome. */
.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .lesson-capture-workspace-pinned-toolbar {
    margin-top: 2px;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-record-btn,
.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-action-btn,
.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-summarize-btn {
    min-height: 44px;
    box-shadow: none;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .upload-record-split-control {
    min-height: 48px;
    box-shadow: none;
}

.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .upload-record-split-control .upload-record-btn,
.lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .upload-record-split-control .upload-record-menu-btn {
    min-height: 48px;
    box-shadow: none;
}

@media (max-width: 960px) {
    .lesson-workspace-workflow-chrome {
        margin-bottom: 8px;
        gap: 8px;
        padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
    }

    .lesson-workspace-workflow-chrome .lesson-workspace-tabs {
        padding: 3px;
        gap: 3px;
    }

    .lesson-workspace-workflow-chrome .lesson-workspace-tab {
        min-height: 44px;
        padding: 7px 4px;
    }

    .lesson-workspace-workflow-chrome .lesson-workspace-tab.is-active {
        font-size: max(var(--ll-type-heading-size), var(--ll-type-label-size));
    }

    .lesson-workspace-workflow-chrome .lesson-workspace-tab__inner {
        gap: 4px;
    }

    .lesson-workspace-step-context {
        padding: 8px 10px;
    }

    .lesson-workspace-step-context__line {
        font-size: var(--ll-type-body-size);
    }
}

@media (max-width: 390px) {
    .lesson-workspace-workflow-chrome .lesson-workspace-tab {
        min-height: 44px;
        padding: 6px 2px;
    }

    .lesson-workspace-workflow-chrome .lesson-workspace-tab__label {
        letter-spacing: -0.03em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-workspace-workflow-chrome .lesson-workspace-tab {
        transition: none;
    }

    .lesson-workspace-step-context--enter {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Beat legacy underline tab rules from theme-overrides on /edit-lesson */
.lesson-editor-route .lesson-workspace-workflow-chrome .lesson-workspace-tabs,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-workflow-chrome .lesson-workspace-tabs {
    margin-bottom: 0;
    padding-bottom: 4px;
    border-bottom: 0;
}

.lesson-editor-route .lesson-workspace-workflow-chrome .lesson-workspace-tab,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-workflow-chrome .lesson-workspace-tab {
    min-height: 44px;
    margin-bottom: 0;
    border-bottom: 0;
}

.lesson-editor-route .lesson-workspace-workflow-chrome .lesson-workspace-tab.is-active,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-workflow-chrome .lesson-workspace-tab.is-active {
    border-bottom: 0;
}

.lesson-editor-route .lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .lesson-workspace-tab-panel__body,
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack:has(.lesson-workspace-workflow-chrome) .lesson-workspace-tab-panel__body {
    padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
}

/* Feature: lesson-workspace.css */
/* Session workspace: participant subtitle sits under the stack-shell title. */
.ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-topbar.lesson-workspace-stack-topbar--has-subtitle {
    align-items: start;
    row-gap: 1px;
    padding-bottom: 8px;
}

.ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-topbar.lesson-workspace-stack-topbar--has-subtitle > .ll-stack-shell__back,
.ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-topbar.lesson-workspace-stack-topbar--has-subtitle > .app-route-fullscreen-close,
.ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-topbar.lesson-workspace-stack-topbar--has-subtitle > .ll-header-bar__spacer {
    grid-row: 1 / span 2;
    align-self: center;
}

.ll-stack-shell[data-ll-stack-id="edit-lesson"] .app-route-fullscreen-topbar.lesson-workspace-stack-topbar--has-subtitle > .ll-surface__title {
    grid-row: 1;
    align-self: end;
}

.ll-stack-shell[data-ll-stack-id="edit-lesson"] #lesson-workspace-header-subtitle.lesson-workspace-stack-topbar__subtitle {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 4px;
    text-align: center;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: 1.3;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ll-stack-shell[data-ll-stack-id="edit-lesson"] #lesson-workspace-header-subtitle.lesson-workspace-stack-topbar__subtitle .lesson-workspace-header__subtitle-part[data-part="title"] {
    color: var(--text-primary, var(--lesson-header-text));
    font-weight: var(--ll-type-label-weight);
}

@media (max-width: 960px) {
    .summary-doc-teaser {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .summary-doc-actions .ll-btn.ll-btn--solid.ll-btn--primary {
        flex: 1;
        min-width: 0;
    }

    .summary-doc-actions .ll-btn.ll-btn--ghost.lesson-details-media-transcript-view {
        flex: 0 0 auto;
        width: auto;
    }
}

.lesson-workspace-editor-sibling .summary-card.lesson-editor-sibling {
    margin: 0;
}

.lesson-details-toggle.lesson-details-toggle--expanded:hover {
    background: rgba(255, 255, 255, 0.06);
}

.lesson-details-toggle.lesson-details-toggle--expanded {
    align-items: center;
    min-height: 40px;
}

.lesson-details-toggle.lesson-details-toggle--expanded .lesson-details-toggle__chevron-wrap {
    padding-top: 0;
    align-items: center;
}

.lesson-details-expand-body[hidden],
.lesson-details-expand-body.lesson-details-expand-body--collapsed {
    display: none !important;
}

.lesson-details-inline-form.lesson-details-inline-form {
    max-width: none;
}

/* Lesson workspace: full-screen people picker (multi-select + New at top). */
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.lesson-workspace-participants-panel,
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.lesson-workspace-share-recipients-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    min-height: 0;
    overflow: hidden;
}

.app-shell-main > .email-panel-overlay.lesson-workspace-participants-overlay.email-panel-overlay--global-modal {
    overflow: hidden;
}

.lesson-workspace-participants-list.lesson-event-student-option-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: var(--ll-space-1) 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lesson-people-picker-existing-list.lesson-workspace-participants-list {
    padding-top: 0;
}

/* Lesson workspace: full-screen send feedback (thoughts + student-visible notes on Shared). */
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.lesson-workspace-send-feedback-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    min-height: 0;
    overflow: hidden;
}

/* Lesson workspace: full-screen summary, transcript, and video readers. */
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.lesson-workspace-summary-view-panel,
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.lesson-workspace-transcript-view-panel,
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.lesson-workspace-video-view-panel,
.email-panel-overlay.email-panel-overlay--global-modal.email-panel-overlay--global-modal-full > .email-panel.session-summary-video-panel {
    display: flex;
    flex-direction: column;
    gap: var(--ll-space-4);
    min-height: 0;
    overflow: hidden;
    width: 100%;
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

/* Unified session workspace: natural flow (Setup → Capture toolbar after Date).
   Fullscreen stack defaults to overflow:hidden — allow the stack itself to scroll
   so Record/Attach stay immediately under the Date row and are reachable when
   Setup (e.g. student picker) is tall. */
.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

#app.view-root.view-root--session-workspace-fullscreen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"],
.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="edit-lesson"] .lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] > * {
    flex: 0 0 auto;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-section--capture .lesson-workspace-tab-panel__body,
.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-editor-sibling--capture .lesson-workspace-tab-panel__body {
    padding-top: 0;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] #lesson-capture-section[hidden] {
    display: none !important;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-media-toolbar > .lesson-capture-share-btn {
    min-height: 44px;
    box-shadow: none;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-section {
    display: block;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-section .summary-card.lesson-phase-card,
.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-section .summary-card.lesson-section-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-editor-sibling--capture .lesson-capture-phase-card {
    padding-top: 0;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-workspace-tab-panel__body {
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
}

.lesson-capture-workspace-toolbar-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar {
    margin-top: 0;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-record-btn,
.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar .capture-action-group > .upload-action-btn,
.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-summarize-btn,
.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
    min-height: 44px;
    box-shadow: none;
    font-size: var(--ll-type-label-size);
    font-weight: 600;
}

.lesson-workspace-editor-stack[data-lesson-workspace-layout="unified"] .lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar > .lesson-capture-share-btn {
    flex: 1 1 0;
    min-width: 0;
}

.lesson-workspace-capture-toolbar-share,
.lesson-workspace-capture-toolbar-share-btn,
.lesson-workspace-inline-participants-field--toolbar-share {
    display: none !important;
}

/* Record / Attach menus must escape scroll and overflow:hidden ancestors. */
.lesson-capture-workspace-toolbar-row,
.lesson-capture-workspace-pinned-toolbar,
.lesson-capture-workspace-pinned-toolbar .lesson-capture-media-toolbar,
.lesson-capture-workspace-pinned-toolbar .capture-action-group {
    overflow: visible;
}

.lesson-capture-workspace-pinned-toolbar .capture-action-group {
    display: block;
    position: relative;
}

.lesson-capture-workspace-pinned-toolbar .add-media-menu {
    z-index: 600;
    min-width: 220px;
    background: var(--surface-card-strong, var(--lesson-surface-card-strong, #1e293b));
    border-color: var(--stroke);
    box-shadow: var(--shadow);
}

/*
 * Floating capture menus.
 * html/body use overflow:hidden (app shell). Absolute menus inside the session
 * card are clipped. While open we:
 *  1) portal the menu under a fixed root on <html>
 *  2) unlock html/body overflow so fixed children are not clipped
 */
/* Do not unlock html/body overflow for floating capture menus — that wedges
   stack screens whose scroll depends on the app overflow:hidden flex chain.
   Menus are portaled under <html> with position:fixed instead. */

.lessonlink-capture-menu-root {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1400;
}

.add-media-menu.add-media-menu--floating,
.add-media-menu.add-media-menu--floating.upload-capture-menu {
    position: fixed !important;
    inset: auto !important;
    margin: 0 !important;
    z-index: 1400 !important;
    min-width: 220px;
    width: max-content;
    max-width: min(320px, calc(100vw - 16px));
    overflow: visible;
    overscroll-behavior: contain;
    pointer-events: auto;
    /* Opaque dark panel + pure white labels — high contrast in the dark app shell. */
    background: #0f172a !important;
    border: 1px solid rgba(226, 232, 240, 0.28) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    color: #ffffff !important;
    opacity: 1 !important;
}

.add-media-menu.add-media-menu--floating .add-media-menu-item,
.add-media-menu.add-media-menu--floating.upload-capture-menu .add-media-menu-item,
.add-media-menu.add-media-menu--floating .add-media-menu-item span,
.add-media-menu.add-media-menu--floating.upload-capture-menu .add-media-menu-item span {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600;
}

.add-media-menu.add-media-menu--floating .add-media-menu-item i,
.add-media-menu.add-media-menu--floating.upload-capture-menu .add-media-menu-item i {
    color: #4ade80 !important;
}

.add-media-menu.add-media-menu--floating .add-media-menu-item:hover,
.add-media-menu.add-media-menu--floating .add-media-menu-item:focus-visible,
.add-media-menu.add-media-menu--floating.upload-capture-menu .add-media-menu-item:hover,
.add-media-menu.add-media-menu--floating.upload-capture-menu .add-media-menu-item:focus-visible {
    background: rgba(74, 222, 128, 0.18) !important;
    color: #ffffff !important;
}

.lesson-capture-workspace-pinned-toolbar .upload-capture-menu .add-media-menu-item {
    color: var(--text-primary);
    font-weight: var(--ll-type-label-weight);
}

.lesson-capture-workspace-pinned-toolbar .upload-capture-menu .add-media-menu-item:hover,
.lesson-capture-workspace-pinned-toolbar .upload-capture-menu .add-media-menu-item:focus-visible {
    background: color-mix(in srgb, var(--brand) 14%, transparent);
    color: var(--text-primary);
}

.lesson-capture-workspace-pinned-toolbar #record-media-menu {
    left: 0;
    right: auto;
}

.lesson-capture-workspace-pinned-toolbar #add-media-menu {
    left: auto;
    right: 0;
}

.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open,
.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-workspace-editor-stack,
.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-workspace-panel,
.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-editor-route,
.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-capture-phase-card,
.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-workspace-section--capture,
.lesson-workspace-shell.lesson-workspace-shell--capture-menu-open .lesson-workspace-tab-panel__body {
    overflow: visible;
}

/* Archived lessons: summary-only workspace (no setup or capture chrome). */
.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] [data-lesson-section="save"],
.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] .lesson-workspace-context-bar {
    display: none !important;
}

.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] .lesson-capture-workspace-toolbar-row,
.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] .lesson-capture-workspace-pinned-toolbar,
.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] .lesson-workspace-summarize-media-card,
.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] .upload-media-list {
    display: none !important;
}

.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] .lesson-capture-summary-edit-btn {
    display: none !important;
}

.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] #lesson-capture-summary-details {
    border: 0;
    background: transparent;
}

.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] #lesson-capture-summary-details > summary {
    pointer-events: none;
}

.lesson-workspace-editor-stack[data-lesson-delivered-readonly="true"] #lesson-capture-summary-details .ll-disclosure-chevron {
    display: none;
}

/* ---- public/style/features/swing-analysis.css ---- */
/* Swing analysis — Coach Mode video player (Phase 0) */

.swing-analysis-player-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--lessonlink-z-swing-analysis-player, calc(var(--lessonlink-z-app-chrome, 1280) + 20));
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: color-mix(in srgb, #000 72%, transparent);
    overscroll-behavior: none;
    /* Kill iOS/Android long-press Copy / Look Up / selection handles on scrubber & chrome. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* iOS can ignore inherited callout/select on nested controls — set on every node. */
.swing-analysis-player-overlay *,
.swing-analysis-player-overlay *::before,
.swing-analysis-player-overlay *::after,
.swing-analysis-sheet,
.swing-analysis-sheet *,
.swing-analysis-sheet *::before,
.swing-analysis-sheet *::after {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none;
}

/* Play mode has no scrollable chrome; block browser swipe/rubber-band on the bottom scrubber. */
.swing-analysis-player-overlay.is-play-mode {
    touch-action: none;
}

/*
 * Hard viewport lock while play-mode video is open. iOS still rubber-bands
 * position:fixed layers unless body is fixed and touchmove is canceled.
 */
html.swing-analysis-viewport-locked,
html.swing-analysis-viewport-locked body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
    height: 100% !important;
    width: 100% !important;
}

html.swing-analysis-viewport-locked body.swing-analysis-viewport-locked {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100% !important;
}

/* Freeze hub scroll under the player so bottom scrubbing cannot drag the page. */
body:has(#swing-analysis-player-overlay.is-open) .view-root,
body:has(#swing-analysis-player-overlay:not([hidden])) .view-root,
body:has(#swing-analysis-player-overlay.is-open) .view-root > .today-shell,
body:has(#swing-analysis-player-overlay:not([hidden])) .view-root > .today-shell,
html.swing-analysis-viewport-locked .view-root,
html.swing-analysis-viewport-locked .view-root > .today-shell {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
}

.swing-analysis-player-overlay[hidden] {
    display: none !important;
}

/*
 * Coach Mode owns the bottom of the viewport. Toasts overlay the player edge
 * when shown rather than reserving empty toast-band space under transport.
 */
body:has(#swing-analysis-player-overlay:not([hidden])) .toast:not(.toast--center),
body:has(#swing-analysis-player-overlay.is-open) .toast:not(.toast--center) {
    left: 50%;
    right: auto;
    bottom: 0;
    width: min(100%, 960px);
    max-width: 960px;
    box-sizing: border-box;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(20, 28, 36, 0.96);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.38);
    font-size: var(--font-size-sm, 0.82rem);
    font-weight: 600;
    line-height: 1.3;
    transform: translate3d(-50%, 100%, 0);
    transform-origin: center bottom;
}

body:has(#swing-analysis-player-overlay:not([hidden])) .toast:not(.toast--center).is-visible,
body:has(#swing-analysis-player-overlay.is-open) .toast:not(.toast--center).is-visible {
    transform: translate3d(-50%, 0, 0);
}

body:has(#swing-analysis-player-overlay:not([hidden])) .toast__inner,
body:has(#swing-analysis-player-overlay.is-open) .toast__inner {
    max-width: min(100%, 40rem);
}

.swing-analysis-player {
    display: flex;
    flex-direction: column;
    width: min(100%, 960px);
    max-height: 100dvh;
    margin: 0 auto;
    background: var(--surface-card-strong, #111);
    color: var(--text-primary, #fff);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Intentional typing surfaces only — still no iOS callout menu. */
.swing-analysis-player-overlay textarea,
.swing-analysis-player-overlay input,
.swing-analysis-player-overlay [contenteditable='true'],
.swing-analysis-sheet textarea,
.swing-analysis-sheet input,
.swing-analysis-sheet [contenteditable='true'],
.swing-analysis-text-editor {
    -webkit-touch-callout: none !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

.swing-analysis-player__header {
    gap: 8px;
    padding:
        max(8px, env(safe-area-inset-top, 0px))
        max(12px, env(safe-area-inset-right, 0px))
        4px
        max(12px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
}

.swing-analysis-player.ll-surface--sheet-overlay > .swing-analysis-player__header.ll-surface__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

/* Same chrome as hub/Library `#titlebar-lesson-back` — only reset sheet-overlay positioning. */
.swing-analysis-player.ll-surface--sheet-overlay > .swing-analysis-player__header .swing-analysis-player__header-back {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    left: auto;
    flex-shrink: 0;
    align-self: center;
    margin: 0;
    margin-top: 0;
}

.swing-analysis-player__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.swing-analysis-player__header .swing-analysis-player__title.ll-surface__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: normal;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.swing-analysis-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.swing-analysis-timeline__expanded,
.swing-analysis-timeline__collapsed {
    min-width: 0;
}

.swing-analysis-timeline__tools {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 10px;
    min-width: 52px;
}

.swing-analysis-timeline__frames-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.swing-analysis-timeline__frames-btn i {
    pointer-events: none;
}

.swing-analysis-timeline__frames-btn:hover {
    background: color-mix(in srgb, #fff 14%, transparent);
    color: #fff;
}

.swing-analysis-timeline__frames-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-timeline__frames-btn.is-active,
.swing-analysis-timeline__frames-btn[aria-pressed='true'] {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 70%, #fff);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 42%, #000);
    color: #fff;
}

.swing-analysis-timeline__frames-btn[hidden] {
    display: none !important;
}

.swing-analysis-timeline__scene-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding-top: 0;
}

.swing-analysis-timeline__scene-actions[hidden] {
    display: none !important;
}

.swing-analysis-timeline__main {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.swing-analysis-timeline__bottom-chrome > .swing-analysis-timeline__clock {
    flex: 0 0 auto;
    margin: 0;
    padding: 0 2px 0 0;
    max-width: 42%;
    font-size: var(--ll-type-caption-size, 0.75rem);
    text-align: left;
    pointer-events: none;
}

/* Ruler time labels (0:00, 0:15, …) removed — collapse if a stale client still injects the row. */
.swing-analysis-timeline__ruler,
.swing-analysis-timeline__ruler-tick,
.swing-analysis-timeline__ruler-label {
    display: none !important;
}

/* Legacy zoom/pan chrome removed from markup — hide if a stale client still injects it. */
.swing-analysis-timeline__bottom-chrome {
    display: none !important;
}

.swing-analysis-timeline__pan {
    flex: 1 1 auto;
    min-width: 0;
    height: 18px;
    padding: 5px 0;
    touch-action: none;
    cursor: pointer;
}

.swing-analysis-timeline__pan.is-disabled {
    opacity: 0.35;
    cursor: default;
}

.swing-analysis-timeline__pan-track {
    position: relative;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 12%, transparent);
}

.swing-analysis-timeline__pan-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: 24px;
    border-radius: inherit;
    background: color-mix(in srgb, #fff 42%, transparent);
}

.swing-analysis-timeline__zoom-controls {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.swing-analysis-timeline__zoom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-timeline__zoom-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

/* Full-height thumb hit target along the playhead line (not only the top knob). */
.swing-analysis-timeline__playhead-handle {
    position: absolute;
    top: -4px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    pointer-events: auto;
}

.swing-analysis-timeline__playhead-handle::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 55%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.swing-analysis-timeline__track.is-scrubbing .swing-analysis-timeline__playhead-handle {
    cursor: grabbing;
}

.swing-analysis-timeline__collapsed {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px 2px;
    overscroll-behavior: none;
    touch-action: none;
}

.swing-analysis-timeline__collapsed[hidden] {
    display: none !important;
}

.swing-analysis-timeline__expanded[hidden] {
    display: none !important;
}

.swing-analysis-timeline__slim-btn,
.swing-analysis-timeline__slim-play {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-timeline__slim-btn:disabled,
.swing-analysis-timeline__slim-play:disabled,
.swing-analysis-timeline__slim-btn[hidden] {
    opacity: 0.4;
}

.swing-analysis-timeline__slim-btn[hidden] {
    display: none !important;
}

.swing-analysis-timeline__slim-seek {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 18px 0;
    touch-action: none;
    cursor: pointer;
}

.swing-analysis-timeline__slim-seek-track {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 16%, transparent);
}

.swing-analysis-timeline__slim-seek-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 80%, #fff);
    pointer-events: none;
}

.swing-analysis-timeline__slim-seek-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-primary, #2f6f5e);
    box-shadow: 0 0 0 2px #fff;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.swing-analysis-timeline__phase.is-selected {
    z-index: 2;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--accent-primary, #7fd4bc) 92%, #fff),
        0 0 0 1px color-mix(in srgb, #000 35%, transparent);
}

.swing-analysis-timeline__cut.is-scene-cut::before {
    width: 4px;
    background: color-mix(in srgb, #fff 88%, var(--accent-primary, #7fd4bc));
    box-shadow:
        0 0 0 1px color-mix(in srgb, #000 55%, transparent),
        0 0 0 3px color-mix(in srgb, #000 22%, transparent);
}

.swing-analysis-timeline__phase + .swing-analysis-timeline__phase {
    /* Visual separation between adjacent scenes */
    box-shadow: inset 1px 0 0 color-mix(in srgb, #000 45%, transparent);
}

.swing-analysis-timeline__clock-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 0 2px;
}

.swing-analysis-player__clock,
.swing-analysis-timeline__clock {
    margin: 0;
    padding: 0 2px;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swing-analysis-timeline__clock-row .swing-analysis-timeline__clock {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
}

.swing-analysis-timeline__scene-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.8125rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.swing-analysis-timeline__scene-btn:hover {
    color: #fff;
    background: transparent;
}

.swing-analysis-timeline__scene-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-timeline__scene-btn:disabled,
.swing-analysis-timeline__scene-btn[hidden] {
    display: none;
}

.swing-analysis-timeline__scene-btn--delete:disabled:not([hidden]) {
    display: inline-flex;
    opacity: 0.35;
    cursor: not-allowed;
}

.swing-analysis-player__header-trailing {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.swing-analysis-player__header-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.swing-analysis-player__header-meta[hidden] {
    display: none !important;
}

.swing-analysis-player__edit-cancel[hidden],
.swing-analysis-player__edit-toggle[hidden],
.swing-analysis-player__coach-tools-toggle[hidden] {
    display: none !important;
}

.swing-analysis-player__edit-toggle,
.swing-analysis-player__edit-cancel,
.swing-analysis-player__coach-tools-toggle,
.swing-analysis-player__header-meta-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 6%, transparent);
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-player__edit-toggle,
.swing-analysis-player__edit-cancel {
    width: auto;
    padding: 0 12px;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 600;
}

.swing-analysis-player__edit-cancel {
    border-color: color-mix(in srgb, #fff 18%, transparent);
    color: var(--text-primary, #fff);
}

.swing-analysis-player__edit-toggle:hover,
.swing-analysis-player__edit-cancel:hover,
.swing-analysis-player__coach-tools-toggle:hover,
.swing-analysis-player__header-meta-btn:hover {
    color: var(--text-primary, #fff);
    background: color-mix(in srgb, #fff 10%, transparent);
}

.swing-analysis-player__edit-toggle.is-active,
.swing-analysis-player__coach-tools-toggle.is-active,
.swing-analysis-player__header-meta-btn.is-active,
.swing-analysis-player__header-meta-btn[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 22%, transparent);
    color: var(--text-primary, #fff);
}

.swing-analysis-player__coach-tools-toggle.is-tools-hidden {
    border-color: color-mix(in srgb, #fff 18%, transparent);
    background: color-mix(in srgb, #fff 8%, transparent);
    color: var(--text-primary, #fff);
}

.swing-analysis-player__header-meta-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.swing-analysis-player__edit-toggle:focus-visible,
.swing-analysis-player__edit-cancel:focus-visible,
.swing-analysis-player__coach-tools-toggle:focus-visible,
.swing-analysis-player__header-meta-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-player.is-coach-tools-hidden .swing-analysis-player__drawing-toolbar-host,
.swing-analysis-player.is-coach-tools-hidden .swing-analysis-context-bar {
    display: none !important;
}

.swing-analysis-player__coach-domains {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 2px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #000 45%, transparent);
}

.swing-analysis-player__coach-domains[hidden] {
    display: none !important;
}

.swing-analysis-player__coach-domain {
    min-height: 26px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-player__coach-domain.is-active {
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 28%, transparent);
    color: var(--text-primary, #fff);
}

.swing-analysis-player__coach-domain:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-player__coach-domain-hint {
    margin: 4px 12px 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.35;
}

.swing-analysis-player__coach-domain-hint[hidden] {
    display: none !important;
}

.swing-analysis-player.is-edit-mode .swing-analysis-player__header {
    border-bottom: 1px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 35%, transparent);
}

.swing-analysis-player.is-coach-domain-scenes .swing-analysis-timeline__phase.is-editable {
    cursor: default;
}

.swing-analysis-player.is-coach-domain-scenes .swing-analysis-timeline__phase-label {
    pointer-events: auto;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #000 55%, transparent);
    appearance: none;
    -webkit-appearance: none;
}

.swing-analysis-player.is-coach-domain-scenes .swing-analysis-timeline__phase-label:focus-visible {
    outline: 2px solid var(--accent-primary, #7fd4bc);
    outline-offset: 1px;
}

/* Keep playhead scrub on the knob only so the wide hit strip does not fight
   phase/handle cursors while moving across the filmstrip. */
.swing-analysis-player.is-coach-domain-scenes .swing-analysis-timeline__playhead {
    pointer-events: none;
    width: 2px;
}

.swing-analysis-player.is-coach-domain-scenes .swing-analysis-timeline__playhead-handle {
    pointer-events: auto;
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translateX(-50%);
    cursor: grab;
}

.swing-analysis-player.is-coach-domain-scenes .swing-analysis-timeline__playhead-handle::before {
    top: 50%;
}

.swing-analysis-player.is-play-mode .swing-analysis-context-bar {
    display: none !important;
}

.swing-analysis-player-overlay.is-play-mode .swing-analysis-timeline__slim-btn,
.swing-analysis-player.is-play-mode .swing-analysis-timeline__slim-btn {
    display: none !important;
}

.swing-analysis-player.is-play-mode .swing-analysis-comparison__zoom-controls {
    display: none !important;
}

.swing-analysis-player__normal-controls {
    position: absolute;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: 4px;
    z-index: 14;
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid color-mix(in srgb, #fff 20%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #000 64%, transparent);
    transition: opacity 180ms ease, transform 180ms ease;
}

.swing-analysis-player__scrub-feedback {
    position: absolute;
    left: 50%;
    bottom: 4px;
    z-index: 15;
    min-width: 0;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, #000 28%, transparent);
    color: #fff;
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-shadow: 0 1px 2px color-mix(in srgb, #000 55%, transparent);
    transform: translateX(-50%);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    box-shadow: 0 4px 16px color-mix(in srgb, #000 28%, transparent);
    pointer-events: none;
}

.swing-analysis-player.is-edit-mode .swing-analysis-player__scrub-feedback.is-edit-persistent {
    /* Keep the time readout at the bottom of the video stage. */
    bottom: 4px;
    top: auto;
}

.swing-analysis-player__scrub-feedback.is-frames-mode {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, #fff);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 28%, #000);
}

.swing-analysis-player__scrub-feedback[hidden] {
    display: none;
}

.swing-analysis-player__normal-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, #fff 14%, transparent);
    color: #fff;
    font-size: var(--ll-type-meta-size, 0.75rem);
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-player__normal-control:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-player.is-playback-chrome-hidden .swing-analysis-player__normal-controls,
.swing-analysis-player.is-playback-chrome-hidden .swing-analysis-player__timeline-host,
.swing-analysis-player.is-playback-chrome-hidden .swing-analysis-player__toolbar-host {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.swing-analysis-player__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.swing-analysis-player.ll-surface--sheet-overlay > .swing-analysis-player__body {
    overflow: hidden;
}

.swing-analysis-player__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    --view-zoom: 1;
    --view-pan-x: 0px;
    --view-pan-y: 0px;
}

.swing-analysis-player__view-zoom-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(var(--view-pan-x, 0px), var(--view-pan-y, 0px)) scale(var(--view-zoom, 1));
    transform-origin: center center;
    will-change: transform;
}

.swing-analysis-player__stage.is-view-zooming .swing-analysis-player__view-zoom-layer {
    transition: none;
}

.swing-analysis-player__view-zoom-chrome {
    position: absolute;
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    z-index: 14;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}

.swing-analysis-player__view-zoom-chrome[hidden] {
    display: none !important;
}

.swing-analysis-player__view-zoom-save,
.swing-analysis-player__view-zoom-reset {
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
    border: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    background: color-mix(in srgb, #000 62%, transparent);
    font-weight: 600;
    line-height: 1;
}

.swing-analysis-player__view-zoom-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
}

.swing-analysis-player__view-zoom-save:disabled {
    opacity: 0.45;
    cursor: default;
}

.swing-analysis-player__view-zoom-save[hidden],
.swing-analysis-player__view-zoom-reset[hidden] {
    display: none !important;
}

.swing-analysis-player__view-zoom-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.625rem;
}

.swing-analysis-player__view-zoom-save:focus-visible,
.swing-analysis-player__view-zoom-reset:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #54a0ff) 80%, #fff);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .swing-analysis-player__stage {
        min-height: 40dvh;
    }
}

.swing-analysis-player__drawing-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    touch-action: none;
}

.swing-analysis-player__drawing-canvas.is-interactive {
    cursor: crosshair;
}

.swing-analysis-player__drawing-canvas.is-select-mode.is-interactive {
    cursor: default;
}

.swing-analysis-player__drawing-canvas.is-select-mode.is-interactive.is-editing {
    cursor: grabbing;
}

.swing-analysis-player__drawing-toolbar-host {
    position: absolute;
    top: max(10px, env(safe-area-inset-top, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Widen only when tools wrap to a second column. */
    width: max-content;
    max-width: calc((44px * 2) + 4px + 8px);
    height: auto;
    max-height: none;
    padding: 6px 4px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, #000 22%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 4px 14px color-mix(in srgb, #000 16%, transparent);
    color: var(--text-primary, #fff);
    pointer-events: none;
}

/* Keep the full-height annotate bar pass-through so shape/draw gestures
   reach the canvas between buttons (critical on narrow mobile stages). */
.swing-analysis-player__drawing-toolbar-host .swing-analysis-annotate-bar,
.swing-analysis-player__drawing-toolbar-host .swing-analysis-annotate-bar__group {
    pointer-events: none;
}

.swing-analysis-player__drawing-toolbar-host .swing-analysis-annotate-bar__btn,
.swing-analysis-player__stage .swing-analysis-context-bar,
.swing-analysis-player__stage .swing-analysis-context-bar__btn,
.swing-analysis-player__stage .swing-analysis-context-bar__menu-item {
    pointer-events: auto;
}

.swing-analysis-player__drawing-toolbar-host[hidden] {
    display: none !important;
}

.swing-analysis-player__playback-hud {
    position: absolute;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 12;
    display: inline-flex;
    pointer-events: auto;
    align-items: center;
    gap: 4px;
    padding: 4px 4px 4px 6px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #000 52%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px color-mix(in srgb, #000 35%, transparent);
    color: var(--text-primary, #fff);
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.swing-analysis-audio-overlay-hud {
    position: absolute;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    z-index: 14;
    transform: translateX(-50%);
    width: min(92%, 22rem);
    pointer-events: auto;
}

.swing-analysis-audio-overlay-hud[hidden] {
    display: none !important;
}

.swing-analysis-audio-overlay-hud__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, #000 62%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 40%, transparent);
    color: var(--text-primary, #fff);
}

.swing-analysis-audio-overlay-hud__status {
    margin: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: color-mix(in srgb, #fff 88%, transparent);
}

.swing-analysis-audio-overlay-hud__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.swing-analysis-audio-overlay-hud__btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    background: color-mix(in srgb, #fff 12%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 600;
    cursor: pointer;
}

.swing-analysis-audio-overlay-hud__btn--primary {
    background: color-mix(in srgb, var(--ll-accent, #7fd4bc) 72%, #000);
    border-color: color-mix(in srgb, var(--ll-accent, #7fd4bc) 50%, transparent);
    color: #0b1a16;
}

.swing-analysis-audio-overlay-hud__btn--ghost {
    background: transparent;
}

.swing-analysis-audio-overlay-hud__btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.swing-analysis-player__stage.is-audio-overlay-recording .swing-analysis-audio-overlay-hud__btn--primary {
    background: color-mix(in srgb, #ff6b6b 78%, #000);
    border-color: color-mix(in srgb, #ff6b6b 50%, transparent);
    color: #fff;
}

.swing-analysis-annotate-bar__btn--narrate.is-active {
    color: var(--ll-accent, #7fd4bc);
}

.swing-analysis-player__playback-hud-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    font-variant-numeric: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease;
}

.swing-analysis-player__playback-hud-trigger:hover {
    background: color-mix(in srgb, #fff 8%, transparent);
}

.swing-analysis-player__playback-hud-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #7fd4bc) 85%, #fff);
    outline-offset: 1px;
}

.swing-analysis-player__playback-hud-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    font-size: 0.625rem;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.swing-analysis-player__playback-hud-reset:hover {
    color: var(--text-primary, #fff);
    background: color-mix(in srgb, #fff 10%, transparent);
}

.swing-analysis-player__playback-hud-reset:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #7fd4bc) 85%, #fff);
    outline-offset: 1px;
}

.swing-analysis-player__playback-hud:hover {
    border-color: color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, #000 62%, transparent);
}

.swing-analysis-player__playback-hud:focus-within {
    border-color: color-mix(in srgb, #fff 28%, transparent);
    background: color-mix(in srgb, #000 62%, transparent);
}

.swing-analysis-player__playback-hud-sep {
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-drawing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    flex-wrap: wrap;
}

.swing-analysis-drawing-toolbar__tools,
.swing-analysis-drawing-toolbar__colors,
.swing-analysis-drawing-toolbar__stroke-widths,
.swing-analysis-drawing-toolbar__font-sizes,
.swing-analysis-drawing-toolbar__backgrounds,
.swing-analysis-drawing-toolbar__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.swing-analysis-drawing-toolbar__colors {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.swing-analysis-drawing-toolbar__swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid color-mix(in srgb, #fff 20%, transparent);
    border-radius: 999px;
    background: var(--swatch-color);
    touch-action: manipulation;
    cursor: pointer;
    flex: 0 0 auto;
}

.swing-analysis-drawing-toolbar__swatch.is-active {
    border-color: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 70%, transparent);
}

.swing-analysis-drawing-toolbar__swatch:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-drawing-toolbar__swatch--bg.is-transparent {
    background:
        linear-gradient(45deg, color-mix(in srgb, #fff 18%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, #fff 18%, transparent) 75%, color-mix(in srgb, #fff 18%, transparent)),
        linear-gradient(45deg, color-mix(in srgb, #fff 18%, transparent) 25%, transparent 25%, transparent 75%, color-mix(in srgb, #fff 18%, transparent) 75%, color-mix(in srgb, #fff 18%, transparent));
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

.swing-analysis-drawing-toolbar__font-btn {
    min-width: 28px;
    min-height: 32px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 6%, transparent);
    color: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-drawing-toolbar__font-btn.is-active {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 65%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 24%, transparent);
}

.swing-analysis-drawing-toolbar__font-btn:disabled,
.swing-analysis-drawing-toolbar__swatch--bg:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-text-editor {
    position: absolute;
    z-index: 20;
    margin: 0;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    border-radius: 4px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    background: transparent;
    color: inherit;
    pointer-events: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: text;
    user-select: text;
}

.swing-analysis-text-editor--title {
    padding: 10px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.swing-analysis-drawing-toolbar__stroke-widths {
    flex: 0 0 auto;
}

.swing-analysis-drawing-toolbar__stroke-btn {
    width: 28px;
    min-height: 32px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 6%, transparent);
    color: inherit;
    touch-action: manipulation;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.swing-analysis-drawing-toolbar__stroke-btn.is-active {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 65%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 24%, transparent);
}

.swing-analysis-drawing-toolbar__stroke-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-drawing-toolbar__stroke-preview {
    display: block;
    width: 16px;
    height: var(--stroke-preview-height, 2px);
    border-radius: 999px;
    background: currentColor;
}

.swing-analysis-drawing-toolbar__btn {
    min-height: 32px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 6%, transparent);
    color: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-drawing-toolbar__btn.is-active {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 65%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 24%, transparent);
}

.swing-analysis-drawing-toolbar__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-drawing-toolbar.is-read-only .swing-analysis-drawing-toolbar__tools,
.swing-analysis-drawing-toolbar.is-read-only .swing-analysis-drawing-toolbar__colors,
.swing-analysis-drawing-toolbar.is-read-only .swing-analysis-drawing-toolbar__stroke-widths,
.swing-analysis-drawing-toolbar.is-read-only .swing-analysis-drawing-toolbar__font-sizes,
.swing-analysis-drawing-toolbar.is-read-only .swing-analysis-drawing-toolbar__backgrounds,
.swing-analysis-drawing-toolbar.is-read-only [data-drawing-action="toggle-range"],
.swing-analysis-drawing-toolbar.is-read-only [data-drawing-action="delete"],
.swing-analysis-drawing-toolbar.is-read-only [data-drawing-action="clear-all"] {
    display: none;
}

.swing-analysis-player__video {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    background: #000;
    transform: scale(var(--pane-zoom, 1));
    transform-origin: center center;
}

.swing-analysis-player__video.is-crop-applied,
.swing-analysis-comparison__video-shell video.is-crop-applied {
    transform: scale(var(--pane-zoom, 1)) scale(var(--crop-fill-scale, 1));
    transform-origin: var(--crop-fill-origin-x, 50%) var(--crop-fill-origin-y, 50%);
}

.swing-analysis-video-crop.is-crop-tool-active {
    pointer-events: auto;
}

.swing-analysis-video-crop.is-crop-tool-active .swing-analysis-video-crop__frame {
    pointer-events: none;
}

.swing-analysis-player__video.is-loading {
    opacity: 0;
    visibility: hidden;
}

.swing-analysis-player__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: min(280px, calc(100% - 32px));
    margin: 0;
    padding: 20px 22px;
    border-radius: 16px;
    background: color-mix(in srgb, #000 78%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 32px color-mix(in srgb, #000 40%, transparent);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.swing-analysis-player__loading[hidden] {
    display: none !important;
}

.swing-analysis-player__loading-label {
    margin: 0;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 600;
    text-align: center;
    color: var(--text-primary, #fff);
}

.swing-analysis-player__loading-detail {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-player__loading-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 18%, transparent);
    overflow: hidden;
}

.swing-analysis-player__loading-progress.is-indeterminate .swing-analysis-player__loading-progress-bar {
    width: 35% !important;
    animation: swing-analysis-loading-indeterminate 1.2s ease-in-out infinite;
}

@keyframes swing-analysis-loading-indeterminate {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(320%);
    }
}

.swing-analysis-player__loading-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: var(--accent-primary, #2f6f5e);
    transition: width 180ms ease;
    transform: translateX(0);
}

.swing-analysis-player__timeline-host {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    /* Keep the scrubber above the iOS home-indicator gesture band. Web pages
       cannot cancel that system swipe; padding is the reliable fix. */
    padding:
        4px
        10px
        max(12px, calc(env(safe-area-inset-bottom, 0px) + 10px));
    overflow: visible;
    background: color-mix(in srgb, #000 18%, var(--surface-card-strong, #111));
    transition: opacity 180ms ease, transform 180ms ease;
    overscroll-behavior: none;
    touch-action: none;
}

.swing-analysis-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    --swing-timeline-track-height: 4px;
    --swing-timeline-thumb-size: 19px;
    --swing-timeline-rail-height: 18px;
    --swing-timeline-rail-height-with-thumbs: 36px;
    --swing-timeline-handle-width: 21px;
    --swing-timeline-handle-grip-height: 9px;
    --swing-timeline-track-color: color-mix(in srgb, var(--text-secondary, rgba(255, 255, 255, 0.72)) 38%, transparent);
    --swing-timeline-thumb-color: var(--text-primary, #fff);
    --swing-timeline-thumb-border: var(--accent-primary, #2f6f5e);
    --swing-scrubber-height: 5px;
    --swing-scrubber-thumb-size: 16px;
    --swing-scrubber-thumb-color: var(--accent-primary, #2f6f5e);
}

.swing-analysis-timeline__rail.has-thumbnails {
    height: var(--swing-timeline-rail-height-with-thumbs, 52px);
    min-height: var(--swing-timeline-rail-height-with-thumbs, 52px);
}

.swing-analysis-timeline__thumbnails {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background: color-mix(in srgb, #000 10%, transparent);
}

.swing-analysis-timeline__thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    border-right: 1px solid color-mix(in srgb, #000 28%, transparent);
    box-sizing: border-box;
}

.swing-analysis-timeline__thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

.swing-analysis-timeline__thumb:not(.has-image) {
    background-image: linear-gradient(
        135deg,
        color-mix(in srgb, #fff 6%, #000) 0%,
        color-mix(in srgb, #fff 12%, #000) 100%
    );
}

.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase,
.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase--base,
.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase--alt,
.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase--active,
.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase--active.swing-analysis-timeline__phase--base,
.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase--active.swing-analysis-timeline__phase--alt {
    background: transparent;
}

.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase--active {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-primary, #7fd4bc) 82%, #fff);
}

.swing-analysis-timeline__rail.has-thumbnails .swing-analysis-timeline__phase-label {
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, #000 58%, transparent);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.swing-analysis-timeline__row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    border: 0;
    box-shadow: none;
}

.swing-analysis-timeline__scrubber-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.swing-analysis-timeline__slider-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.swing-analysis-timeline__side-slider {
    display: flex;
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-width: 0;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-timeline__side-slider-label,
.swing-analysis-timeline__side-slider-value {
    flex: 0 0 auto;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    text-align: center;
}

.swing-analysis-timeline__side-slider-value {
    min-width: 2.25rem;
    color: var(--text-primary, #fff);
    text-align: right;
}

.swing-analysis-timeline__side-slider .swing-analysis-timeline__zoom,
.swing-analysis-timeline__side-slider .swing-analysis-timeline__speed {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 28px;
    min-height: 28px;
}

.swing-analysis-timeline__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
    align-self: center;
}

.swing-analysis-timeline__tool-btn,
.swing-analysis-timeline__cut-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    font-size: 1rem;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-timeline__tool-btn:disabled,
.swing-analysis-timeline__cut-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.swing-analysis-timeline__tool-btn:focus-visible,
.swing-analysis-timeline__cut-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-timeline__track {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    touch-action: none;
    cursor: pointer;
}

.swing-analysis-timeline__zoom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.swing-analysis-timeline__zoom-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 500;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-timeline__zoom,
.swing-analysis-timeline__speed {
    flex: 1 1 auto;
    width: auto;
    min-width: 120px;
    max-width: none;
    height: 44px;
    min-height: 44px;
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-timeline__zoom-value {
    flex: 0 0 auto;
    min-width: 2.5rem;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-primary, #fff);
}

.swing-analysis-timeline__track.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-timeline__track.is-scrubbing {
    cursor: grabbing;
}

.swing-analysis-timeline__scrubber {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    /* Horizontal padding only on the times row — track must share width with the filmstrip.
       Vertical padding leaves room for the taller playhead thumb (overflow: hidden). */
    padding: 8px 0 10px;
    min-width: 0;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, #f4f4f5 86%, transparent);
    color: #111;
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
        0 8px 24px color-mix(in srgb, #000 28%, transparent);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    overflow: hidden;
    touch-action: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.swing-analysis-timeline__scrubber.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-timeline__scrubber.is-scrubbing {
    cursor: grabbing;
}

.swing-analysis-timeline__scrubber:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-timeline__scrubber-times {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.swing-analysis-timeline__scrubber-current,
.swing-analysis-timeline__scrubber-total {
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: #111;
}

.swing-analysis-timeline__scrubber-total {
    color: color-mix(in srgb, #111 62%, transparent);
}

.swing-analysis-timeline__scrubber-track {
    position: relative;
    width: 100%;
    height: var(--swing-scrubber-height, 5px);
    border-radius: 999px;
    background: color-mix(in srgb, #111 16%, transparent);
    overflow: visible;
}

.swing-analysis-timeline__scrubber-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
    background: color-mix(in srgb, #111 58%, transparent);
    pointer-events: none;
}

.swing-analysis-timeline__scrubber-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: var(--swing-scrubber-thumb-size, 16px);
    height: var(--swing-scrubber-thumb-size, 16px);
    border-radius: 50%;
    background: var(--swing-scrubber-thumb-color, var(--accent-primary, #2f6f5e));
    box-shadow:
        0 0 0 2px #fff,
        0 1px 4px color-mix(in srgb, #000 45%, transparent);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.swing-analysis-timeline__scrubber.is-scrubbing .swing-analysis-timeline__scrubber-track {
    height: calc(var(--swing-scrubber-height, 5px) + 2px);
}

.swing-analysis-timeline__scrubber.is-scrubbing .swing-analysis-timeline__scrubber-thumb {
    width: calc(var(--swing-scrubber-thumb-size, 16px) + 2px);
    height: calc(var(--swing-scrubber-thumb-size, 16px) + 2px);
}

.swing-analysis-timeline__marker-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    height: 0;
    min-height: 0;
    margin: 0;
    border: 0;
    background: transparent;
    overflow: visible;
    pointer-events: none;
    touch-action: none;
}

.swing-analysis-timeline__marker-row:empty {
    display: none !important;
}

.swing-analysis-timeline__marker-handle {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    transform: translate(-50%, -100%);
    touch-action: none;
    cursor: grab;
    pointer-events: auto;
}

.swing-analysis-timeline__marker-handle-dot {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 88%, #fff);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 35%, transparent);
    pointer-events: none;
}

.swing-analysis-timeline__marker-handle.is-dragging .swing-analysis-timeline__marker-handle-dot {
    box-shadow:
        0 0 0 1px color-mix(in srgb, #000 35%, transparent),
        0 0 0 6px rgba(255, 217, 102, 0.28);
}

.swing-analysis-timeline__marker-handle-label {
    position: absolute;
    bottom: calc(100% + 3px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 88%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

.swing-analysis-timeline__marker-handle.is-dragging .swing-analysis-timeline__marker-handle-label {
    opacity: 0;
}

.swing-analysis-timeline__marker-guide {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary, #7fd4bc) 88%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 45%, transparent);
    pointer-events: none;
}

.swing-analysis-timeline__marker-guide[hidden] {
    display: none !important;
}

.swing-analysis-timeline__cut.is-dragging::before {
    width: 3px;
    background: color-mix(in srgb, var(--accent-primary, #7fd4bc) 96%, #fff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #000 45%, transparent),
        0 0 0 4px rgba(255, 217, 102, 0.18);
}

.swing-analysis-timeline__marker-handle:active,
.swing-analysis-timeline__track.is-marker-dragging .swing-analysis-timeline__marker-handle {
    cursor: grabbing;
}

.swing-analysis-timeline__track.is-disabled .swing-analysis-timeline__marker-handle {
    cursor: default;
    opacity: 0.45;
}

.swing-analysis-timeline__marker-handle:focus-visible .swing-analysis-timeline__marker-handle-dot {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-timeline__rail {
    position: relative;
    height: var(--swing-timeline-rail-height, 21px);
    min-height: var(--swing-timeline-rail-height, 21px);
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, #000 28%, transparent);
    overflow: hidden;
}

.swing-analysis-timeline__rail.is-disabled {
    opacity: 0.45;
}

.swing-analysis-timeline__phases,
.swing-analysis-timeline__cuts,
.swing-analysis-timeline__handles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.swing-analysis-timeline__phases {
    z-index: 2;
}

.swing-analysis-timeline__handles {
    z-index: 4;
}

.swing-analysis-timeline__playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    /* Thumb-friendly vertical hit strip along the line. */
    width: 44px;
    transform: translateX(-50%);
    background: transparent;
    pointer-events: auto;
    overflow: visible;
    touch-action: none;
}

/* Line is drawn on the playhead box so the handle (same box width) cannot drift. */
.swing-analysis-timeline__playhead::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 55%, transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

.swing-analysis-timeline__playhead[hidden] {
    display: none !important;
}

.swing-analysis-timeline__phase {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.swing-analysis-timeline__phase.is-editable {
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    z-index: 2;
}

.swing-analysis-timeline__phase--base {
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 16%, transparent);
}

.swing-analysis-timeline__phase--alt {
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 28%, transparent);
}

.swing-analysis-timeline__phase--active {
    z-index: 1;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary, #7fd4bc) 72%, #fff);
}

.swing-analysis-timeline__phase--active.swing-analysis-timeline__phase--base {
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 34%, transparent);
}

.swing-analysis-timeline__phase--active.swing-analysis-timeline__phase--alt {
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 46%, transparent);
}

.swing-analysis-timeline__phase--active .swing-analysis-timeline__phase-label {
    color: #fff;
}

.swing-analysis-timeline__phase-label {
    padding: 0 4px;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 82%, transparent);
    pointer-events: none;
}

.swing-analysis-timeline__phase-label--custom {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.swing-analysis-timeline__cut {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--swing-timeline-handle-width, 21px);
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.swing-analysis-timeline__cut::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary, #7fd4bc) 88%, #fff);
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 45%, transparent);
}

.swing-analysis-timeline__phase-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--swing-timeline-handle-width, 21px);
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

.swing-analysis-timeline__phase-handle::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 50%;
    width: 8px;
    transform: translateX(-50%);
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-primary, #7fd4bc) 72%, #fff);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #000 50%, transparent),
        inset 0 0 0 1px color-mix(in srgb, #fff 24%, transparent);
}

.swing-analysis-timeline__phase-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: var(--swing-timeline-handle-grip-height, 9px);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: color-mix(in srgb, #000 55%, transparent);
    box-shadow: 3px 0 0 color-mix(in srgb, #000 55%, transparent);
}

.swing-analysis-timeline__phase-handle:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 1px;
}

.swing-analysis-timeline__track.is-marker-dragging {
    cursor: ew-resize;
}

.swing-analysis-timeline__track.is-marker-dragging .swing-analysis-timeline__phase-handle {
    cursor: ew-resize;
}

.swing-analysis-timeline__markers:empty {
    display: none;
    height: 0;
    margin: 0;
}

.swing-analysis-timeline__markers {
    display: none;
}

.swing-analysis-timeline__zoom,
.swing-analysis-timeline__speed,
.swing-analysis-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.swing-analysis-timeline__zoom::-webkit-slider-runnable-track,
.swing-analysis-timeline__speed::-webkit-slider-runnable-track,
.swing-analysis-slider::-webkit-slider-runnable-track {
    height: var(--swing-timeline-track-height);
    border: 0;
    border-radius: 999px;
    background: var(--swing-timeline-track-color);
}

.swing-analysis-timeline__zoom::-webkit-slider-thumb,
.swing-analysis-timeline__speed::-webkit-slider-thumb,
.swing-analysis-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--swing-timeline-thumb-size);
    height: var(--swing-timeline-thumb-size);
    margin-top: calc((var(--swing-timeline-track-height) - var(--swing-timeline-thumb-size)) / 2);
    border: 3px solid var(--swing-timeline-thumb-border);
    border-radius: 999px;
    background: var(--swing-timeline-thumb-color);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 40%, transparent);
    cursor: pointer;
}

.swing-analysis-timeline__zoom:focus-visible::-webkit-slider-thumb,
.swing-analysis-timeline__speed:focus-visible::-webkit-slider-thumb,
.swing-analysis-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 72%, #fff);
    outline-offset: 2px;
}

.swing-analysis-timeline__zoom::-moz-range-track,
.swing-analysis-timeline__speed::-moz-range-track,
.swing-analysis-slider::-moz-range-track {
    height: var(--swing-timeline-track-height);
    border: 0;
    border-radius: 999px;
    background: var(--swing-timeline-track-color);
}

.swing-analysis-timeline__zoom::-moz-range-thumb,
.swing-analysis-timeline__speed::-moz-range-thumb,
.swing-analysis-slider::-moz-range-thumb {
    width: var(--swing-timeline-thumb-size);
    height: var(--swing-timeline-thumb-size);
    border: 3px solid var(--swing-timeline-thumb-border);
    border-radius: 999px;
    background: var(--swing-timeline-thumb-color);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 40%, transparent);
    cursor: pointer;
}

.swing-analysis-timeline__zoom:focus-visible::-moz-range-thumb,
.swing-analysis-timeline__speed:focus-visible::-moz-range-thumb,
.swing-analysis-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 72%, #fff);
    outline-offset: 2px;
}

.swing-analysis-timeline__zoom:disabled::-webkit-slider-thumb,
.swing-analysis-timeline__speed:disabled::-webkit-slider-thumb,
.swing-analysis-slider:disabled::-webkit-slider-thumb,
.swing-analysis-timeline__zoom:disabled::-moz-range-thumb,
.swing-analysis-timeline__speed:disabled::-moz-range-thumb,
.swing-analysis-slider:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

.swing-analysis-timeline__marker-chip {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    min-width: 28px;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 24%, #000);
    color: inherit;
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-timeline__marker-chip-label {
    pointer-events: none;
}

.swing-analysis-player__marker-panel-host {
    flex-shrink: 0;
    padding: 0 12px;
    overflow: visible;
    background: color-mix(in srgb, #000 18%, var(--surface-card-strong, #111));
    border-top: 1px solid var(--stroke, rgba(255, 255, 255, 0.08));
}

.swing-analysis-player__marker-panel-host[hidden] {
    display: none !important;
}

.swing-analysis-marker-timeline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0 4px;
}

.swing-analysis-marker-timeline__track {
    position: relative;
    min-height: 22px;
    margin-bottom: 2px;
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    touch-action: none;
    cursor: crosshair;
    overflow: visible;
}

.swing-analysis-marker-timeline__track.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-marker-timeline__track.is-read-only {
    cursor: default;
}

.swing-analysis-marker-timeline__lane {
    position: absolute;
    inset: 0 0 0 0;
    overflow: visible;
}

.swing-analysis-marker-timeline__playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: color-mix(in srgb, #fff 72%, transparent);
    pointer-events: none;
    z-index: 1;
}

.swing-analysis-marker-timeline__playhead[hidden] {
    display: none !important;
}

.swing-analysis-marker-timeline__marker {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 28px;
    min-height: 28px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: inherit;
    transform: translate(-50%, -50%);
    touch-action: none;
    cursor: grab;
}

.swing-analysis-marker-timeline__handle {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 88%, #fff);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 35%, transparent);
    pointer-events: none;
    flex-shrink: 0;
}

.swing-analysis-marker-timeline__marker.is-dragging .swing-analysis-marker-timeline__handle {
    width: 16px;
    height: 16px;
    border-width: 3px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #000 35%, transparent),
        0 0 0 6px rgba(255, 217, 102, 0.28);
}

.swing-analysis-marker-timeline__label {
    display: block;
    max-width: 2.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 88%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

.swing-analysis-marker-timeline__marker:active,
.swing-analysis-marker-timeline__track.is-marker-dragging .swing-analysis-marker-timeline__marker {
    cursor: grabbing;
}

.swing-analysis-marker-timeline__track.is-read-only .swing-analysis-marker-timeline__marker {
    cursor: pointer;
}

.swing-analysis-marker-timeline__marker:focus-visible .swing-analysis-marker-timeline__handle {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-marker-timeline__hint {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-marker-timeline__hint[hidden],
.swing-analysis-marker-timeline__read-only[hidden] {
    display: none !important;
}

.swing-analysis-marker-timeline__read-only {
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 500;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-sheet:has(.swing-analysis-context-sheet) {
    align-items: flex-end;
}

.swing-analysis-sheet:has(.swing-analysis-context-sheet) .swing-analysis-sheet__panel {
    max-height: min(92dvh, 780px, 100%);
    min-height: 70dvh;
    width: min(100%, 520px);
}

.swing-analysis-sheet:has(.swing-analysis-context-sheet) .swing-analysis-sheet__body {
    display: flex;
    flex-direction: column;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
}

.swing-analysis-context-sheet {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    min-height: 100%;
}

.swing-analysis-context-sheet__section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
}

.swing-analysis-context-sheet__heading {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.swing-analysis-context-sheet__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swing-analysis-context-sheet__actions--row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 12px 0 4px;
    background: linear-gradient(
        to top,
        var(--surface-card-strong, #161616) 70%,
        color-mix(in srgb, var(--surface-card-strong, #161616) 88%, transparent)
    );
}

.swing-analysis-context-sheet__actions--row .swing-analysis-annotate-sheet__btn {
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
    padding-inline: 8px;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    white-space: nowrap;
}

.swing-analysis-context-sheet__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swing-analysis-context-sheet__field--cut-shapes {
    margin: 10px 0 4px;
}

.swing-analysis-context-sheet__label {
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-context-sheet__hint {
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-secondary, rgba(255, 255, 255, 0.62));
}

.swing-analysis-context-sheet__select {
    width: 100%;
    min-height: 40px;
    padding: 8px 36px 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    border-radius: 10px;
    background-color: #1a1f1d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: rgba(255, 255, 255, 0.94);
    color-scheme: dark;
    font: inherit;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.swing-analysis-context-sheet__select option {
    color: #f4f7f6;
    background-color: #111816;
}

.swing-analysis-context-sheet__select option:checked {
    background-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 42%, #111816);
    color: #fff;
}

.swing-analysis-context-sheet__select:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 1px;
}

.swing-analysis-marker-type-picker__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.swing-analysis-marker-type-picker__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #fff 5%, transparent);
    color: inherit;
    text-align: left;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-marker-type-picker__btn.is-set {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 48%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 16%, transparent);
}

.swing-analysis-marker-type-picker__btn.is-current {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 24%, transparent);
}

.swing-analysis-marker-type-picker__abbr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #000 24%, transparent);
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.swing-analysis-marker-type-picker__label {
    flex: 1 1 auto;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 500;
}

.swing-analysis-marker-type-picker__meta {
    font-size: var(--ll-type-caption-size, 0.6875rem);
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-marker-panel {
    display: block;
}

.swing-analysis-marker-panel__row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-height: 40px;
}

.swing-analysis-marker-panel__picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.swing-analysis-marker-panel__menu {
    display: none;
}

.swing-analysis-marker-panel__menu-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 0 28px 0 10px;
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    border-radius: 8px;
    background-color: #1a1f1d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #fff;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    text-align: left;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-marker-panel__menu-trigger-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swing-analysis-marker-panel__menu-trigger.is-set {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 65%, transparent);
    background-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 24%, #1a1f1d);
}

.swing-analysis-marker-panel__menu-trigger.is-open {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 75%, transparent);
}

.swing-analysis-marker-panel__menu-list {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    max-height: min(240px, 34dvh);
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    border-radius: 10px;
    background: #111816;
    box-shadow: 0 10px 28px color-mix(in srgb, #000 55%, transparent);
}

.swing-analysis-marker-panel__menu-list[hidden] {
    display: none !important;
}

.swing-analysis-marker-panel__menu-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #fff;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 500;
    cursor: pointer;
}

.swing-analysis-marker-panel__menu-option-label {
    min-width: 0;
}

.swing-analysis-marker-panel__menu-option-time {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, #fff 72%, transparent);
}

.swing-analysis-marker-panel__menu-option.is-set .swing-analysis-marker-panel__menu-option-time:not(:empty) {
    color: color-mix(in srgb, var(--accent-primary, #7fd4bc) 88%, #fff);
}

.swing-analysis-marker-panel__menu-option.is-selected,
.swing-analysis-marker-panel__menu-option:hover {
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 28%, #fff 4%);
}

.swing-analysis-marker-panel__menu-option.is-set .swing-analysis-marker-panel__menu-option-label::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--accent-primary, #2f6f5e);
    vertical-align: middle;
}

.swing-analysis-marker-panel__tabs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.swing-analysis-marker-panel__tabs::-webkit-scrollbar {
    display: none;
}

.swing-analysis-marker-panel__tab {
    position: relative;
    flex: 0 0 auto;
    min-width: 34px;
    min-height: 36px;
    padding: 4px 5px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 5%, transparent);
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.01em;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-marker-panel__tab-label {
    display: block;
    max-width: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swing-analysis-marker-panel__tab.is-selected {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 60%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 22%, transparent);
}

.swing-analysis-marker-panel__tab.is-set::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-primary, #2f6f5e);
}

.swing-analysis-marker-panel__tab:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 1px;
}

.swing-analysis-marker-panel__controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.swing-analysis-marker-panel__read-only {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 10%, transparent);
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.swing-analysis-marker-panel__read-only[hidden] {
    display: none !important;
}

.swing-analysis-marker-panel.is-read-only .swing-analysis-marker-panel__menu-trigger,
.swing-analysis-marker-panel.is-read-only .swing-analysis-marker-panel__tab {
    border-color: color-mix(in srgb, #fff 14%, transparent);
}

.swing-analysis-marker-panel__time {
    min-width: 2.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-marker-panel__btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
}

.swing-analysis-marker-panel__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-marker-panel__btn--ghost {
    background: transparent;
}

.swing-analysis-marker-panel__btn:focus-visible,
.swing-analysis-marker-panel__tab:focus-visible,
.swing-analysis-marker-panel__menu-trigger:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 1px;
}

@media (max-width: 570px) {
    .swing-analysis-marker-panel__tabs {
        display: none;
    }

    .swing-analysis-marker-panel__menu {
        display: block;
    }
}

@media (max-width: 360px) {
    .swing-analysis-player__marker-panel-host {
        padding-inline: 6px;
    }

    .swing-analysis-marker-panel__row {
        gap: 4px;
    }

    .swing-analysis-marker-panel__time {
        min-width: 2.35rem;
        font-size: 0.625rem;
    }

    .swing-analysis-marker-panel__btn {
        min-width: 32px;
        padding-inline: 5px;
        font-size: 0.625rem;
    }

    .swing-analysis-marker-panel__menu-trigger {
        min-height: 34px;
        padding-inline: 8px 24px;
        font-size: 0.75rem;
    }
}

.swing-analysis-player__toolbar-host {
    flex-shrink: 0;
    padding: 4px 10px max(4px, env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, #000 24%, var(--surface-card-strong, #111));
    border-top: 1px solid var(--stroke, rgba(255, 255, 255, 0.12));
    transition: opacity 180ms ease, transform 180ms ease;
}

.swing-analysis-coach-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.swing-analysis-coach-toolbar__cluster {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.swing-analysis-coach-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-md-size, 1rem);
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-coach-toolbar__btn:active {
    transform: scale(0.98);
}

.swing-analysis-coach-toolbar__btn--primary {
    min-width: 56px;
    min-height: 56px;
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 28%, transparent);
}

.swing-analysis-coach-toolbar__btn--speed {
    min-width: 64px;
    font-variant-numeric: tabular-nums;
}

.swing-analysis-coach-toolbar__btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

/* Mobile-first annotation toolbar (progressive disclosure) */

.swing-analysis-annotate-bar {
    display: flex;
    flex: 1 1 auto;
    flex-flow: column wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 4px;
    row-gap: 2px;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding: 0;
}

/* Flatten groups so tool buttons share one column-wrap flow. When the rail
   is shorter than the icon stack, extras move into a second column. */
.swing-analysis-annotate-bar__group {
    display: contents;
}

.swing-analysis-annotate-bar__group + .swing-analysis-annotate-bar__group {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.swing-analysis-annotate-bar__group--draw {
    flex: unset;
    min-height: 0;
    overflow: visible;
}

.swing-analysis-annotate-bar__group--actions {
    margin-top: 0;
}

.swing-analysis-player-help {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 2px;
    padding-bottom: 4px;
}

.swing-analysis-player-help__intro {
    margin: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.swing-analysis-player-help__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swing-analysis-player-help__heading {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.swing-analysis-player-help__list {
    margin: 0;
    padding-left: 1.15em;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    line-height: 1.45;
    color: var(--text-primary, #fff);
}

.swing-analysis-annotate-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 2px;
    padding-bottom: 4px;
}

.swing-analysis-annotate-settings__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swing-analysis-annotate-settings__heading {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.swing-analysis-annotate-settings__hint {
    margin: 0;
    font-size: var(--ll-type-caption-size, 0.75rem);
    line-height: 1.45;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

.swing-analysis-annotate-settings__duration-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.swing-analysis-annotate-settings__duration-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    color: var(--text-primary, #fff);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-annotate-settings__duration-btn.is-active {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 18%, transparent);
}

.swing-analysis-annotate-settings__duration-title {
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 600;
    line-height: 1.2;
}

.swing-analysis-annotate-settings__duration-hint {
    font-size: var(--ll-type-caption-size, 0.6875rem);
    line-height: 1.35;
    color: var(--text-secondary, rgba(255, 255, 255, 0.68));
}

.swing-analysis-annotate-settings__stroke-row,
.swing-analysis-annotate-settings__font-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.swing-analysis-annotate-settings__font-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.swing-analysis-annotate-settings__stroke-btn,
.swing-analysis-annotate-settings__font-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 56px;
    padding: 8px 6px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 4%, transparent);
    color: var(--text-primary, #fff);
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-annotate-settings__font-btn {
    min-height: 64px;
}

.swing-analysis-annotate-settings__stroke-btn.is-active,
.swing-analysis-annotate-settings__font-btn.is-active {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 18%, transparent);
}

.swing-analysis-annotate-settings__stroke-line {
    display: block;
    width: 100%;
    max-width: 52px;
    height: var(--stroke-preview-height, 2px);
    border-radius: 999px;
    background: currentColor;
}

.swing-analysis-annotate-settings__stroke-label,
.swing-analysis-annotate-settings__font-meta {
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-annotate-settings__font-preview {
    font-size: var(--annotate-preview-font-size, 18px);
    font-weight: 600;
    line-height: 1;
}

.swing-analysis-annotate-settings__custom-color {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    position: relative;
}

.swing-analysis-sheet-swatch--custom {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 24%, transparent);
}

.swing-analysis-annotate-settings__custom-color-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
    cursor: pointer;
}

.swing-analysis-annotate-settings__custom-color-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.swing-analysis-annotate-settings__custom-size {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.swing-analysis-annotate-settings__custom-size-label,
.swing-analysis-annotate-settings__custom-size-unit {
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.swing-analysis-annotate-settings__custom-size-input {
    width: 4.5rem;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #000 28%, transparent);
    color: var(--text-primary, #fff);
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-variant-numeric: tabular-nums;
}

.swing-analysis-annotate-settings__section--danger {
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, #ff6b6b 24%, transparent);
}

.swing-analysis-annotate-settings__reset-btn {
    width: 100%;
    min-height: 40px;
    margin-top: 4px;
    border: 1px solid color-mix(in srgb, #ff6b6b 42%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #ff6b6b 16%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 600;
    cursor: pointer;
}

.swing-analysis-annotate-settings__reset-btn:hover {
    background: color-mix(in srgb, #ff6b6b 24%, transparent);
}

.swing-analysis-annotate-settings__reset-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, #ff6b6b 70%, #fff);
    outline-offset: 2px;
}

.swing-analysis-annotate-bar__btn--undo {
    flex: 0 0 auto;
    /* Light visual break before Undo without breaking column wrap. */
    margin-top: 4px;
}

.swing-analysis-annotate-bar__btn--undo.is-undo-empty {
    opacity: 0.88;
}

.swing-analysis-annotate-bar__btn {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary, #fff);
    font-size: var(--ll-type-caption-size, 0.6875rem);
    font-weight: 600;
    line-height: 1.1;
    text-shadow:
        0 0 3px color-mix(in srgb, #000 88%, transparent),
        0 1px 2px color-mix(in srgb, #000 92%, transparent);
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-annotate-bar__btn i {
    font-size: 1.0625rem;
    filter:
        drop-shadow(0 0 1px color-mix(in srgb, #000 90%, transparent))
        drop-shadow(0 1px 2px color-mix(in srgb, #000 85%, transparent));
}

.swing-analysis-annotate-bar__btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swing-analysis-annotate-bar__btn.is-active {
    color: var(--text-primary, #fff);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 28%, transparent);
}

.swing-analysis-annotate-bar__btn--captions.is-active {
    color: var(--text-primary, #fff);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 22%, transparent);
}

.swing-analysis-annotate-bar__btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.swing-analysis-annotate-bar__btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-context-bar {
    /* Sit above scrub feedback + mute/more chrome at the stage bottom. */
    --swing-analysis-context-bar-clearance: 48px;
    position: absolute;
    left: 50%;
    bottom: var(--swing-analysis-context-bar-clearance);
    z-index: 16;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 24px);
    padding: 6px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, #000 55%, transparent);
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    backdrop-filter: blur(10px);
    transform: translateX(-50%);
    box-shadow: 0 8px 24px color-mix(in srgb, #000 35%, transparent);
}

.swing-analysis-context-bar[hidden] {
    display: none !important;
}

.swing-analysis-context-bar__btn[hidden] {
    display: none;
}

.swing-analysis-context-bar__btn {
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 10%, transparent);
    color: inherit;
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
    white-space: nowrap;
}

.swing-analysis-context-bar__split {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    flex: 0 0 auto;
    border-radius: 999px;
    overflow: visible;
    background: color-mix(in srgb, #ff6b6b 24%, transparent);
}

.swing-analysis-context-bar__btn--delete-main,
.swing-analysis-context-bar__btn--delete-toggle {
    background: transparent;
}

.swing-analysis-context-bar__btn--delete-main {
    border-radius: 999px 0 0 999px;
    padding-right: 8px;
}

.swing-analysis-context-bar__btn--delete-toggle {
    min-width: 28px;
    padding: 0 8px;
    border-radius: 0 999px 999px 0;
    border-left: 1px solid color-mix(in srgb, #fff 18%, transparent);
}

.swing-analysis-context-bar__btn--delete-toggle.is-open,
.swing-analysis-context-bar__btn--delete-main:hover,
.swing-analysis-context-bar__btn--delete-toggle:hover,
.swing-analysis-context-bar__btn--delete-main:focus-visible,
.swing-analysis-context-bar__btn--delete-toggle:focus-visible {
    background: color-mix(in srgb, #ff6b6b 18%, transparent);
}

.swing-analysis-context-bar__btn--delete-toggle i {
    font-size: 0.625rem;
}

.swing-analysis-context-bar__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 10.5rem;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    background: color-mix(in srgb, #000 78%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 40%, transparent);
}

.swing-analysis-context-bar__menu[hidden] {
    display: none !important;
}

.swing-analysis-context-bar__menu-item {
    display: block;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}

.swing-analysis-context-bar__menu-item:hover,
.swing-analysis-context-bar__menu-item:focus-visible {
    background: color-mix(in srgb, #ff6b6b 22%, transparent);
    outline: none;
}

.swing-analysis-annotate-sheet__toolbar {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

.swing-analysis-annotate-sheet__picker {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swing-analysis-annotate-sheet__select {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #000 24%, transparent);
    color: inherit;
    font: inherit;
}

.swing-analysis-annotate-sheet__config-btn {
    flex: 0 0 auto;
    width: 40px;
    min-height: 40px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-annotate-sheet__config-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 70%, transparent);
    outline-offset: 2px;
}

.swing-analysis-annotate-sheet__input--line {
    min-height: 40px;
    height: 40px;
}

.swing-analysis-annotate-preset-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swing-analysis-annotate-preset-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.swing-analysis-annotate-preset-list__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #000 24%, transparent);
    color: inherit;
    font: inherit;
}

.swing-analysis-annotate-preset-list__delete {
    flex: 0 0 auto;
    width: 40px;
    min-height: 40px;
    border: 1px solid color-mix(in srgb, #ff6b6b 35%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #ff6b6b 16%, transparent);
    color: inherit;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-annotate-preset-list__add {
    width: 100%;
    margin-bottom: 12px;
}

.swing-analysis-annotate-sheet__builtin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, #fff 8%, transparent);
    font-size: var(--ll-type-caption-size, 0.8125rem);
}

.swing-analysis-annotate-sheet__builtin-label {
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-annotate-sheet__builtin-value {
    font-weight: 700;
}

.swing-analysis-annotate-sheet__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swing-analysis-annotate-sheet__field-label {
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-annotate-sheet__input {
    width: 100%;
    min-height: 88px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #000 24%, transparent);
    color: inherit;
    font: inherit;
    line-height: 1.35;
    resize: vertical;
    box-sizing: border-box;
}

.swing-analysis-annotate-sheet__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.swing-analysis-annotate-sheet__btn {
    flex: 1;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 72%, #000);
    color: #fff;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-annotate-sheet__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.swing-analysis-annotate-sheet__btn--ghost {
    background: color-mix(in srgb, #fff 10%, transparent);
    color: inherit;
}

.swing-analysis-context-bar__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.swing-analysis-context-bar__btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-sheet {
    position: fixed;
    inset: 0;
    z-index: var(--lessonlink-z-swing-analysis-sheet, calc(var(--lessonlink-z-app-chrome, 1280) + 40));
    display: flex;
    /* Center vertically so tall scene/context sheets use upper video space
       instead of pinning to the viewport bottom (footer clip risk). */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        12px
        max(12px, env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

.swing-analysis-sheet.is-open {
    pointer-events: auto;
}

.swing-analysis-sheet[hidden] {
    display: none !important;
}

.swing-analysis-sheet__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in srgb, #000 52%, transparent);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: auto;
    cursor: pointer;
}

.swing-analysis-sheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 480px);
    max-height: min(78dvh, 560px, 100%);
    margin: 0;
    padding: 0 0 12px;
    border-radius: 16px;
    background: var(--surface-card-strong, #161616);
    color: inherit;
    transform: translateY(100%);
    transition: transform 220ms ease;
    pointer-events: auto;
    overflow: hidden;
    min-height: 0;
}

.swing-analysis-sheet.is-open .swing-analysis-sheet__backdrop {
    opacity: 1;
}

.swing-analysis-sheet.is-open .swing-analysis-sheet__panel {
    transform: translateY(0);
}

.swing-analysis-sheet__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--stroke, rgba(255, 255, 255, 0.1));
}

.swing-analysis-sheet__title {
    margin: 0;
    font-size: var(--ll-type-body-md-size, 1rem);
    font-weight: 600;
}

.swing-analysis-sheet__close {
    min-width: var(--ll-touch-target, 44px);
    min-height: var(--ll-touch-target, 44px);
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, #fff 8%, transparent);
    color: inherit;
    cursor: pointer;
}

.swing-analysis-sheet__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    --swing-timeline-track-height: 6px;
    --swing-timeline-thumb-size: 28px;
    --swing-timeline-track-color: color-mix(in srgb, var(--text-secondary, rgba(255, 255, 255, 0.72)) 38%, transparent);
    --swing-timeline-thumb-color: var(--text-primary, #fff);
    --swing-timeline-thumb-border: var(--accent-primary, #2f6f5e);
}

.swing-analysis-settings-sheet {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 4px;
}

.swing-analysis-settings-sheet__row {
    display: grid;
    grid-template-columns: minmax(0, 4.5rem) minmax(0, 1fr) minmax(0, 2.75rem);
    align-items: center;
    gap: 10px;
    margin: 0;
}

.swing-analysis-settings-sheet__label {
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.78));
}

.swing-analysis-settings-sheet__value {
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--text-primary, #fff);
}

.swing-analysis-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swing-analysis-sheet-list__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #fff 4%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 500;
    text-align: left;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-sheet-list__btn.is-active {
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 18%, transparent);
}

.swing-analysis-sheet-list__btn.is-set .swing-analysis-sheet-list__meta {
    color: var(--accent-primary, #7fd4bc);
}

.swing-analysis-sheet-list__meta {
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

.swing-analysis-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.swing-analysis-sheet-grid--colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 0;
}

.swing-analysis-sheet-grid--colors .swing-analysis-sheet-swatch {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    aspect-ratio: 1;
}

.swing-analysis-sheet-swatch {
    aspect-ratio: 1;
    width: 100%;
    border: 2px solid color-mix(in srgb, #fff 20%, transparent);
    border-radius: 999px;
    background: var(--swatch-color, #fff);
    cursor: pointer;
    touch-action: manipulation;
}

.swing-analysis-sheet-swatch.is-active {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.swing-analysis-sheet-swatch[data-sheet-color="#ffffff"],
.swing-analysis-sheet-swatch[data-sheet-bg-color="#ffffff"],
.swing-analysis-sheet-swatch[data-settings-color="#ffffff"] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 35%, #888);
}

.swing-analysis-sheet-swatch--bg.is-transparent {
    background:
        linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666),
        linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%, #666);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}

.swing-analysis-sheet-section-label {
    margin: 12px 0 8px;
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.swing-analysis-sheet-intro {
    margin: 0 0 12px;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    line-height: 1.45;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-sheet-list__btn--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 56px;
}

.swing-analysis-sheet-list__title {
    font-weight: 600;
}

.swing-analysis-sheet-list__hint {
    font-size: var(--ll-type-caption-size, 0.75rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-secondary, rgba(255, 255, 255, 0.68));
}

.swing-analysis-scene-rename__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.swing-analysis-scene-rename__label {
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-scene-rename__input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #000 24%, transparent);
    color: inherit;
    font: inherit;
    box-sizing: border-box;
}

.swing-analysis-scene-rename__input:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 85%, #fff);
    outline-offset: 1px;
}

.swing-analysis-scene-rename__speed-row {
    margin-top: 12px;
}

.swing-analysis-marker-panel--mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 4px;
}

.swing-analysis-marker-panel__add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px dashed color-mix(in srgb, #fff 24%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, #fff 4%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-marker-panel__add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.swing-analysis-marker-sheet__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--stroke, rgba(255, 255, 255, 0.1));
}

.swing-analysis-marker-sheet__time {
    flex: 1;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.swing-analysis-marker-sheet__action {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--accent-primary, #2f6f5e);
    color: #fff;
    font-size: var(--ll-type-caption-size, 0.8125rem);
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-marker-sheet__action--ghost {
    background: color-mix(in srgb, #fff 10%, transparent);
    color: inherit;
}

.swing-analysis-marker-sheet__action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.swing-analysis-playback-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.swing-analysis-playback-bar__side {
    display: none;
}

.swing-analysis-playback-bar__side--start {
    justify-content: flex-start;
}

.swing-analysis-playback-bar__side--end {
    justify-content: flex-end;
}

.swing-analysis-playback-bar__transport {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.swing-analysis-playback-bar__transport::-webkit-scrollbar {
    display: none;
}

.swing-analysis-playback-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, #fff 6%, transparent);
    color: inherit;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 600;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-playback-bar__btn--primary {
    min-width: 52px;
    min-height: 52px;
    border-color: color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 26%, transparent);
}

.swing-analysis-playback-bar__play-cluster {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 55%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-primary, #2f6f5e) 26%, transparent);
}

.swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn {
    border: 0;
    border-radius: 0;
    background: transparent;
    min-height: 52px;
}

.swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn--play {
    min-width: 52px;
    padding-inline: 14px;
}

.swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn--play i {
    font-size: 1.125rem;
}

.swing-analysis-playback-bar__btn--edge {
    min-width: 40px;
    padding-inline: 8px;
}

.swing-analysis-player__captions {
    position: absolute;
    left: 50%;
    top: auto;
    z-index: 20;
    transform: translateX(-50%);
    width: min(92%, 640px);
    pointer-events: none;
    touch-action: none;
}

.swing-analysis-player__captions.is-interactive {
    pointer-events: auto;
    cursor: grab;
}

.swing-analysis-player__captions.is-interactive.is-dragging {
    cursor: grabbing;
}

.swing-analysis-player__captions-frame {
    position: relative;
}

.swing-analysis-player__captions.is-editable.is-selected .swing-analysis-player__captions-text {
    outline: 2px solid color-mix(in srgb, var(--accent-primary, #2f6f5e) 72%, #fff);
    outline-offset: 2px;
}

.swing-analysis-player__captions-handles {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.swing-analysis-player__captions.is-editable.is-selected .swing-analysis-player__captions-handles {
    display: block;
}

.swing-analysis-player__captions-handle {
    position: absolute;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 88%, transparent);
    box-shadow: 0 1px 4px color-mix(in srgb, #000 45%, transparent);
    touch-action: none;
    pointer-events: auto;
    cursor: ew-resize;
}

.swing-analysis-player__captions-handle[data-caption-handle="w"] {
    top: 50%;
    left: -5px;
    width: 8px;
    height: 28px;
    transform: translateY(-50%);
}

.swing-analysis-player__captions-handle[data-caption-handle="e"] {
    top: 50%;
    right: -5px;
    width: 8px;
    height: 28px;
    transform: translateY(-50%);
}

.swing-analysis-player__captions-handle[data-caption-handle="se"] {
    right: -6px;
    bottom: -6px;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    cursor: nwse-resize;
}

.swing-analysis-player__captions-handle:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

.swing-analysis-player__captions-text {
    margin: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, #000 78%, transparent);
    color: #fff;
    font-size: var(--ll-type-body-md-size, 0.9375rem);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
}

.swing-analysis-playback-bar__btn:active {
    transform: scale(0.98);
}

.swing-analysis-playback-bar__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.swing-analysis-playback-bar__btn:focus-visible {
    outline: 2px solid var(--accent-primary, #2f6f5e);
    outline-offset: 2px;
}

@media (max-width: 430px) {
    .swing-analysis-player.ll-surface--sheet-overlay > .swing-analysis-player__header.ll-surface__header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 4px;
        padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
    }

    .swing-analysis-player.is-edit-mode .swing-analysis-player__heading {
        gap: 4px;
    }

    .swing-analysis-player.is-edit-mode .swing-analysis-player__title {
        display: none;
    }

    .swing-analysis-player__coach-domains {
        gap: 0;
        padding: 1px;
    }

    .swing-analysis-player__coach-domain {
        min-height: 28px;
        padding: 0 8px;
        font-size: 0.6875rem;
    }

    .swing-analysis-player__header-trailing {
        gap: 4px;
    }

    .swing-analysis-player__edit-toggle,
    .swing-analysis-player__edit-cancel,
    .swing-analysis-player__coach-tools-toggle,
    .swing-analysis-player__header-meta-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        border-radius: 8px;
    }

    .swing-analysis-player__edit-toggle,
    .swing-analysis-player__edit-cancel {
        width: auto;
        min-width: 0;
        padding: 0 8px;
        font-size: 0.75rem;
    }

    .swing-analysis-context-bar {
        --swing-analysis-context-bar-clearance: 46px;
        left: 6px;
        right: 6px;
        bottom: var(--swing-analysis-context-bar-clearance);
        width: auto;
        max-width: none;
        transform: none;
        justify-content: space-between;
        gap: 2px;
        padding: 3px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .swing-analysis-context-bar.is-delete-menu-open {
        overflow: visible;
    }

    .swing-analysis-context-bar::-webkit-scrollbar {
        display: none;
    }

    .swing-analysis-context-bar__btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 30px;
        padding: 0 5px;
        font-size: 0.625rem;
    }

    .swing-analysis-context-bar__split {
        flex: 1 1 0;
        min-width: 0;
    }

    .swing-analysis-context-bar__btn--delete-main {
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 3px;
        padding-left: 4px;
    }

    .swing-analysis-context-bar__btn--delete-toggle {
        flex: 0 0 auto;
        min-width: 20px;
        padding: 0 4px;
    }

    .swing-analysis-context-bar__btn--delete-toggle i {
        font-size: 0.5rem;
    }

    .swing-analysis-player__toolbar-host {
        padding-inline: 6px;
    }

    .swing-analysis-playback-bar {
        width: 100%;
    }

    .swing-analysis-playback-bar__transport {
        display: flex;
        width: 100%;
        gap: 2px;
        overflow: visible;
        justify-content: stretch;
    }

    .swing-analysis-playback-bar__btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        min-height: 40px;
        padding: 0;
        border-radius: 10px;
        font-size: 0.8125rem;
    }

    .swing-analysis-playback-bar__btn--edge {
        flex: 0.85 1 0;
        padding-inline: 0;
    }

    .swing-analysis-playback-bar__play-cluster {
        display: flex;
        flex: 1.25 1 0;
        min-width: 0;
    }

    .swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn {
        flex: 1 1 0;
        min-width: 0;
        min-height: 40px;
    }

    .swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn--play {
        min-width: 0;
        padding-inline: 0;
    }

    .swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn--play i {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .swing-analysis-player__edit-cancel {
        padding: 0 6px;
        font-size: 0.6875rem;
    }

    .swing-analysis-player__coach-domain {
        padding: 0 6px;
    }

    .swing-analysis-context-bar {
        left: 4px;
        right: 4px;
        gap: 1px;
        padding: 2px;
        /* Keep all six actions visible without horizontal scroll. */
        overflow-x: hidden;
    }

    .swing-analysis-context-bar__btn {
        font-size: 0.5625rem;
        letter-spacing: -0.02em;
        padding: 0 2px;
        min-height: 28px;
    }

    .swing-analysis-context-bar__btn--delete-main {
        padding-left: 3px;
        padding-right: 2px;
    }

    .swing-analysis-context-bar__btn--delete-toggle {
        min-width: 18px;
        padding: 0 3px;
    }

    .swing-analysis-playback-bar__btn {
        min-height: 36px;
        font-size: 0.75rem;
    }

    .swing-analysis-playback-bar__play-cluster .swing-analysis-playback-bar__btn {
        min-height: 36px;
    }
}

@media (max-width: 420px) {
    .swing-analysis-player__toolbar-host {
        padding-inline: 6px;
    }
}

@media (min-width: 768px) {
    .swing-analysis-player__drawing-toolbar-host {
        left: max(12px, env(safe-area-inset-left, 0px));
        padding: 8px 6px;
        max-width: calc((48px * 2) + 4px + 12px);
    }

    .swing-analysis-annotate-bar {
        column-gap: 4px;
        row-gap: 4px;
    }

    .swing-analysis-annotate-bar__btn {
        width: 48px;
        min-width: 48px;
        min-height: 48px;
        padding-inline: 4px;
    }

    .swing-analysis-annotate-bar__btn--undo {
        margin-top: 6px;
    }

    .swing-analysis-context-bar {
        --swing-analysis-context-bar-clearance: 52px;
        bottom: var(--swing-analysis-context-bar-clearance);
    }

    .swing-analysis-player-overlay {
        padding: 12px;
    }

    .swing-analysis-player {
        border-radius: 16px;
        overflow: hidden;
        max-height: calc(100dvh - 24px);
    }
}

/* Phase 4 — side-by-side comparison */
.swing-analysis-player__stage:not(.is-comparing) .swing-analysis-comparison {
    display: none !important;
}

.swing-analysis-player__stage:not(.is-comparing) .swing-analysis-comparison__zoom-controls {
    display: none !important;
}

.swing-analysis-player__stage:not(.is-comparing) .swing-analysis-comparison__video-shell--primary {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.swing-analysis-player__stage.is-comparing .swing-analysis-comparison {
    display: contents;
}

.swing-analysis-comparison__video-shell {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swing-analysis-comparison__video-shell video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--pane-zoom, 1));
    transform-origin: center center;
}

.swing-analysis-comparison__pane--secondary {
    position: relative;
    min-height: 0;
    background: #000;
    border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
}

.swing-analysis-comparison__label {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    margin: 0;
    padding: 4px 8px;
    border-radius: 999px;
    font: var(--ll-type-caption-strong, 500 0.75rem/1.2 system-ui);
    color: #fff;
    background: color-mix(in srgb, #000 55%, transparent);
}

.swing-analysis-comparison__state {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font: var(--ll-type-body, 400 0.875rem/1.4 system-ui);
    color: #fff;
    background: color-mix(in srgb, #000 45%, transparent);
}

.swing-analysis-comparison__state[hidden] {
    display: none !important;
}

.swing-analysis-comparison__state--error {
    color: #ffb4b4;
}

.swing-analysis-comparison__zoom-controls {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 5;
    display: none;
    gap: 4px;
}

.swing-analysis-comparison__zoom-controls button {
    min-width: 32px;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, #000 50%, transparent);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.swing-analysis-comparison__bar {
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    background: color-mix(in srgb, #000 72%, transparent);
    border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
    pointer-events: auto;
}

.swing-analysis-comparison__bar[hidden] {
    display: none !important;
}

.swing-analysis-comparison__bar button {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    background: color-mix(in srgb, #fff 8%, transparent);
    color: #fff;
    font: var(--ll-type-caption-strong, 500 0.75rem/1.2 system-ui);
    pointer-events: auto;
    touch-action: manipulation;
    cursor: pointer;
}

.swing-analysis-comparison__bar button[data-comparison-action="nudge-secondary-back"],
.swing-analysis-comparison__bar button[data-comparison-action="nudge-secondary-forward"] {
    min-width: 40px;
    padding-inline: 8px;
    font-size: 0.95rem;
    letter-spacing: -0.04em;
}

.swing-analysis-player__stage.is-comparing {
    display: grid;
    align-items: stretch;
    justify-items: stretch;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="stacked"] {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="side"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="stacked"] .swing-analysis-comparison__video-shell--primary {
    grid-row: 1;
    grid-column: 1;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="stacked"] .swing-analysis-comparison__pane--secondary {
    grid-row: 2;
    grid-column: 1;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="side"] .swing-analysis-comparison__video-shell--primary {
    grid-row: 1;
    grid-column: 1;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="side"] .swing-analysis-comparison__pane--secondary {
    grid-row: 1;
    grid-column: 2;
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, #fff 12%, transparent);
}

.swing-analysis-player__stage.is-comparing .swing-analysis-comparison__bar {
    grid-column: 1 / -1;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="stacked"] .swing-analysis-comparison__bar {
    grid-row: 3;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="side"] .swing-analysis-comparison__bar {
    grid-row: 2;
}

.swing-analysis-player__stage.is-comparing .swing-analysis-comparison__zoom-controls {
    display: flex;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="stacked"] .swing-analysis-player__drawing-canvas {
    height: 50%;
    bottom: auto;
}

.swing-analysis-player__stage.is-comparing[data-comparison-layout="side"] .swing-analysis-player__drawing-canvas {
    width: 50%;
    right: auto;
}

.swing-analysis-annotate-bar__btn--compare.is-active {
    color: #fff;
    background: color-mix(in srgb, var(--accent, #54a0ff) 28%, transparent);
}

.swing-analysis-comparison-picker {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.swing-analysis-comparison-picker__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swing-analysis-comparison-picker__heading {
    margin: 0;
    font: var(--ll-type-caption-strong, 600 0.75rem/1.2 system-ui);
    color: var(--text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.swing-analysis-comparison-picker__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--border, #ccc) 80%, transparent);
    background: var(--surface, #fff);
    text-align: left;
}

.swing-analysis-comparison-picker__item.is-selected {
    border-color: color-mix(in srgb, var(--accent, #54a0ff) 55%, transparent);
    background: color-mix(in srgb, var(--accent, #54a0ff) 8%, var(--surface, #fff));
}

.swing-analysis-comparison-picker__title {
    font: var(--ll-type-body-strong, 600 0.9375rem/1.3 system-ui);
    color: var(--text-primary, #111);
}

.swing-analysis-comparison-picker__meta {
    font: var(--ll-type-caption, 400 0.8125rem/1.3 system-ui);
    color: var(--text-secondary, #666);
}

.swing-analysis-comparison-picker__empty {
    margin: 0;
    font: var(--ll-type-body, 400 0.9375rem/1.4 system-ui);
    color: var(--text-secondary, #666);
}

.swing-analysis-video-crop {
    position: absolute;
    z-index: 11;
    pointer-events: none;
}

.swing-analysis-video-crop__frame {
    position: absolute;
    inset: 0;
    border: 2px solid color-mix(in srgb, #fff 88%, transparent);
    pointer-events: none;
}

.swing-analysis-video-crop__frame.has-crop {
    border-color: color-mix(in srgb, var(--accent, #54a0ff) 85%, #fff);
}

.swing-analysis-video-crop__handle {
    position: absolute;
    pointer-events: auto;
    border: 0;
    padding: 0;
    background: transparent;
    touch-action: none;
}

.swing-analysis-video-crop__handle::before,
.swing-analysis-video-crop__handle::after {
    content: '';
    position: absolute;
    background: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, #000 55%, transparent);
}

.swing-analysis-video-crop__handle--nw,
.swing-analysis-video-crop__handle--ne,
.swing-analysis-video-crop__handle--se,
.swing-analysis-video-crop__handle--sw {
    width: 22px;
    height: 22px;
}

.swing-analysis-video-crop__handle--nw::before,
.swing-analysis-video-crop__handle--ne::before,
.swing-analysis-video-crop__handle--se::before,
.swing-analysis-video-crop__handle--sw::before {
    width: 14px;
    height: 3px;
}

.swing-analysis-video-crop__handle--nw::after,
.swing-analysis-video-crop__handle--ne::after,
.swing-analysis-video-crop__handle--se::after,
.swing-analysis-video-crop__handle--sw::after {
    width: 3px;
    height: 14px;
}

.swing-analysis-video-crop__handle--nw {
    top: -2px;
    left: -2px;
}

.swing-analysis-video-crop__handle--nw::before { top: 0; left: 0; }
.swing-analysis-video-crop__handle--nw::after { top: 0; left: 0; }

.swing-analysis-video-crop__handle--ne {
    top: -2px;
    right: -2px;
}

.swing-analysis-video-crop__handle--ne::before { top: 0; right: 0; }
.swing-analysis-video-crop__handle--ne::after { top: 0; right: 0; }

.swing-analysis-video-crop__handle--se {
    right: -2px;
    bottom: -2px;
}

.swing-analysis-video-crop__handle--se::before { right: 0; bottom: 0; }
.swing-analysis-video-crop__handle--se::after { right: 0; bottom: 0; }

.swing-analysis-video-crop__handle--sw {
    bottom: -2px;
    left: -2px;
}

.swing-analysis-video-crop__handle--sw::before { left: 0; bottom: 0; }
.swing-analysis-video-crop__handle--sw::after { left: 0; bottom: 0; }

.swing-analysis-video-crop__handle--n,
.swing-analysis-video-crop__handle--s {
    left: 50%;
    width: 34px;
    height: 14px;
    transform: translateX(-50%);
}

.swing-analysis-video-crop__handle--n { top: -7px; }
.swing-analysis-video-crop__handle--s { bottom: -7px; }

.swing-analysis-video-crop__handle--n::before,
.swing-analysis-video-crop__handle--s::before {
    left: 50%;
    width: 24px;
    height: 3px;
    transform: translateX(-50%);
}

.swing-analysis-video-crop__handle--n::before { top: 5px; }
.swing-analysis-video-crop__handle--s::before { bottom: 5px; }

.swing-analysis-video-crop__handle--e,
.swing-analysis-video-crop__handle--w {
    top: 50%;
    width: 14px;
    height: 34px;
    transform: translateY(-50%);
}

.swing-analysis-video-crop__handle--e { right: -7px; }
.swing-analysis-video-crop__handle--w { left: -7px; }

.swing-analysis-video-crop__handle--e::before,
.swing-analysis-video-crop__handle--w::before {
    top: 50%;
    width: 3px;
    height: 24px;
    transform: translateY(-50%);
}

.swing-analysis-video-crop__handle--e::before { right: 5px; }
.swing-analysis-video-crop__handle--w::before { left: 5px; }

/* ---- public/style/utilities.css ---- */
/* Layout + typography utilities */
.ll-type-display {
    font-family: inherit;
    font-size: var(--ll-type-display-size);
    font-weight: var(--ll-type-display-weight);
    line-height: var(--ll-type-display-line);
}

.ll-type-title {
    font-family: inherit;
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
    letter-spacing: var(--ll-type-title-tracking);
}

.ll-type-heading {
    font-family: inherit;
    font-size: var(--ll-type-heading-size);
    font-weight: var(--ll-type-heading-weight);
    line-height: var(--ll-type-heading-line);
}

.ll-type-body {
    font-family: inherit;
    font-size: var(--ll-type-body-size);
    font-weight: var(--ll-type-body-weight);
    line-height: var(--ll-type-body-line);
}

.ll-type-body-sm {
    font-family: inherit;
    font-size: var(--ll-type-body-sm-size);
    font-weight: var(--ll-type-body-sm-weight);
    line-height: var(--ll-type-body-sm-line);
}

.ll-type-label {
    font-family: inherit;
    font-size: var(--ll-type-label-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-label-line);
}

.ll-type-meta {
    font-family: inherit;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-meta-weight);
    line-height: var(--ll-type-meta-line);
}

.ll-type-section-label {
    font-family: inherit;
    font-size: var(--ll-type-meta-size);
    font-weight: var(--ll-type-label-weight);
    line-height: var(--ll-type-meta-line);
    letter-spacing: var(--ll-type-section-tracking);
    text-transform: uppercase;
}

/* ============================================================
 * LessonCaddie layout primitive utilities  ·  FND-DEN-001
 * ============================================================
 *
 * These classes are additive — they do not override existing
 * component rules. Use them on new markup alongside component
 * classes to apply standard density behaviour from day one.
 *
 * Gap / gutter customisation: set the matching custom property
 * (--ll-stack-gap, --ll-cluster-gap) on the element or a parent
 * to override for a specific context.
 * ============================================================ */

/* .ll-stack — vertical flex column ----------------------------- */
.ll-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ll-stack-gap, var(--ll-section-gap));
}

.ll-stack--xs {
    --ll-stack-gap: var(--ll-space-1);
}

.ll-stack--sm {
    --ll-stack-gap: var(--ll-space-2);
}

.ll-stack--md {
    --ll-stack-gap: var(--ll-space-3);
}

.ll-stack--lg {
    --ll-stack-gap: var(--ll-space-4);
}

/* .ll-cluster — horizontal flex row with wrapping -------------- */
.ll-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ll-cluster-gap, var(--ll-space-2));
}

.ll-cluster--nowrap {
    flex-wrap: nowrap;
}

.ll-cluster--sm {
    --ll-cluster-gap: var(--ll-space-1);
}

.ll-cluster--md {
    --ll-cluster-gap: var(--ll-space-3);
}

.ll-cluster--lg {
    --ll-cluster-gap: var(--ll-space-4);
}

/* .ll-panel — padded content region ---------------------------- */
.ll-panel {
    padding: var(--ll-panel-padding-y) var(--ll-panel-padding-x);
}

/* .ll-card — surface card with standard padding ---------------- */
.ll-card {
    padding: var(--ll-card-padding-y) var(--ll-card-padding-x);
    border-radius: var(--ll-card-radius);
}

/* .ll-toolbar — horizontal chrome bar at standard height ------- */
.ll-toolbar {
    display: flex;
    align-items: center;
    min-height: var(--ll-toolbar-height);
    padding-block: var(--ll-toolbar-padding-y);
    gap: var(--ll-space-2);
}

/* .ll-list — vertical list of rows ----------------------------- */
.ll-list {
    display: flex;
    flex-direction: column;
    gap: var(--ll-list-gap);
}

/* .ll-list-row — single list item at standard touch-target height */
.ll-list-row {
    display: flex;
    align-items: center;
    min-height: var(--ll-list-row-height);
    padding: var(--ll-list-row-padding-y) var(--ll-list-row-padding-x);
    gap: var(--ll-space-2);
}

/* .ll-section — block-level content section -------------------- */
.ll-section {
    display: grid;
    gap: var(--ll-section-gap);
}

.shared-summary-route-root {
    display: grid;
    gap: 1.25rem;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.5rem 0 2rem;
}

.shared-summary-hero {
    display: grid;
    gap: 0.65rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 252, 0.98));
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.shared-summary-hero__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.55);
}

.shared-summary-hero__title {
    margin: 0;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.2;
}

.shared-summary-hero__lead {
    margin: 0;
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.55;
}

.shared-summary-hero__meta {
    display: grid;
    gap: 0.45rem;
    margin: 0.35rem 0 0;
}

.shared-summary-hero__meta div {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
}

.shared-summary-hero__meta dt {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.55);
}

.shared-summary-hero__meta dd {
    margin: 0;
    color: rgba(15, 23, 42, 0.88);
}

.shared-summary-card {
    display: grid;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

.shared-summary-card__header h3 {
    margin: 0;
    font-size: 1.05rem;
}

.shared-summary-loading,
.shared-summary-error {
    margin: 0;
}

.shared-summary-body {
    line-height: 1.6;
}

.shared-summary-workspace-action {
    display: flex;
    justify-content: flex-start;
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="view-lesson-summary"] .app-route-fullscreen-body-inner {
    overflow: hidden;
}

.view-root.view-root--stack-screen .ll-stack-shell[data-ll-stack-id="view-lesson-summary"] .ll-stack-shell__content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.lesson-viewer-summary-route {
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

.lesson-viewer-summary-route .lesson-workspace-shell,
.lesson-viewer-summary-route .lesson-workspace-editor-stack,
.lesson-viewer-summary-route .lesson-viewer-summary-card,
.lesson-viewer-summary-route .summary-shell,
.lesson-viewer-summary-route [data-summary-workspace-embedded="true"] .summary-doc-indicator,
.lesson-viewer-summary-route [data-summary-workspace-embedded="true"] #summary-doc-body {
    width: 100%;
    max-width: none;
}

.lesson-viewer-summary-route .lesson-viewer-summary-meta {
    margin: 0 0 12px;
    color: var(--text-muted, #667085);
    font-size: 0.95rem;
    line-height: 1.45;
}

.lesson-viewer-summary-route .lesson-viewer-summary-meta.is-error {
    color: var(--danger-text, #b42318);
}

.lesson-viewer-summary-route .lesson-workspace-editor-stack {
    gap: 0;
}

.lesson-viewer-summary-route .lesson-viewer-summary-card {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.lesson-viewer-summary-route .is-viewer-summary-only > .lesson-viewer-summary-card > .summary-shell {
    margin: 0;
}

.lesson-viewer-summary-route [data-summary-workspace-embedded="true"] .summary-doc-actions,
.lesson-viewer-summary-route #summary-source-overlay,
.lesson-viewer-summary-route #summary-voice-override-overlay,
.lesson-viewer-summary-route #summary-confirm-overlay,
.lesson-viewer-summary-route #summary-panel,
.lesson-viewer-summary-route #open-summary-send-dialog,
.lesson-viewer-summary-route #lesson-workspace-summarize-toolbar-source,
.lesson-viewer-summary-route .summary-panel-actions,
.lesson-viewer-summary-route #create-lesson-summary,
.lesson-viewer-summary-route #view-lesson-summary,
.lesson-viewer-summary-route #edit-lesson-summary {
    display: none !important;
}

.lesson-viewer-summary-route [data-summary-workspace-embedded="true"] .summary-doc-indicator .summary-doc-top-row {
    display: block;
}

.lesson-viewer-summary-route [data-summary-workspace-embedded="true"] #summary-status {
    margin-bottom: 8px;
}

.lesson-viewer-summary-route [data-summary-workspace-embedded="true"] #summary-doc-body {
    margin-top: 0;
}

/* ============================================================
 * LessonCaddie Design System v2 — Quiet surfaces + loud actions
 * Accent roles: capture (red) · success (green) · AI (amber)
 * · info (cyan) · share (purple) · neutral (slate)
 * ============================================================ */

/* --- Section accent rails (workspace phases) --- */
.lesson-workspace-editor-sibling[data-lesson-section="details"] .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-section-card--details .panel-copy:not(.lesson-workspace-header__copy)::before {
    background: var(--section-rail-details);
}

.lesson-workspace-editor-sibling[data-lesson-section="capture"] .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-workspace-editor-sibling--capture-media .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-section-card--capture-media .panel-copy:not(.lesson-workspace-header__copy)::before {
    background: var(--section-rail-media);
}

.lesson-workspace-editor-sibling[data-lesson-section="summarize"] .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-workspace-editor-sibling[data-lesson-section="summary"] .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-section-card--summary .panel-copy:not(.lesson-workspace-header__copy)::before {
    background: var(--section-rail-summary);
}

.lesson-workspace-editor-sibling[data-lesson-section="save"] .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-workspace-editor-sibling[data-lesson-section="send"] .panel-copy:not(.lesson-workspace-header__copy)::before,
.lesson-section-card--lesson .panel-copy:not(.lesson-workspace-header__copy)::before {
    background: var(--section-rail-sharing);
}

.lesson-workspace-editor-sibling[data-lesson-section="capture"] > .lesson-phase-card > .lesson-workspace-phase > .lesson-workspace-phase__summary .panel-copy::before {
    background: var(--section-rail-capture);
}

/* --- Section container accent (subtle left border) --- */
.lesson-section-card--details {
    border-left: 2px solid color-mix(in srgb, var(--section-rail-details) 42%, transparent);
}

.lesson-section-card--capture-media {
    border-left: 2px solid color-mix(in srgb, var(--section-rail-media) 38%, transparent);
}

.lesson-section-card--summary,
.lesson-workspace-editor-sibling[data-lesson-section="summarize"] > .lesson-phase-card {
    border-left: 2px solid color-mix(in srgb, var(--section-rail-summary) 40%, transparent);
}

.lesson-section-card--lesson,
.lesson-workspace-editor-sibling[data-lesson-section="send"] > .lesson-phase-card,
.lesson-workspace-editor-sibling[data-lesson-section="save"] > .lesson-phase-card {
    border-left: 2px solid color-mix(in srgb, var(--section-rail-sharing) 38%, transparent);
}

/* --- AI / Summary premium surface --- */
.lesson-workspace-editor-sibling[data-lesson-section="summarize"] > .lesson-phase-card,
.lesson-workspace-editor-sibling--summarize .summary-doc-indicator,
.lesson-workspace-editor-sibling[data-lesson-section="summary"] .summary-card {
    background:
        radial-gradient(ellipse 90% 60% at 100% 0%, var(--accent-ai-soft), transparent 52%),
        var(--gradient-surface-quiet),
        var(--lesson-surface-card);
}

.lesson-workspace-editor-sibling[data-lesson-section="summarize"] .lesson-workspace-phase__summary-copy :is(h2, .lesson-workspace-phase__title),
.lesson-workspace-editor-sibling[data-lesson-section="summary"] .lesson-workspace-phase__summary-copy :is(h2, .lesson-workspace-phase__title) {
    color: var(--text-heading-warm);
}

[data-summary-workspace-embedded="true"] .summary-doc-body :is(h1, h2, h3, h4) {
    color: var(--text-heading-warm);
}

/* --- Workspace phase titles: calmer hierarchy --- */
.lesson-workspace-editor-stack .lesson-workspace-phase__summary-copy :is(h2, .lesson-workspace-phase__title) {
    color: var(--text-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lesson-workspace-screen-header .lesson-workspace-header__title:is(h1, h2, h3) {
    color: var(--text-heading);
    font-weight: 700;
}

/* --- Pill / chip role system --- */
.ll-pill,
.lesson-workspace-completion__mode-pill,
.lesson-workspace-completion__step {
    border: 1px solid var(--accent-neutral-border);
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    color: var(--text-secondary);
    box-shadow: none;
}

.ll-pill--meta,
.lesson-workspace-completion__step {
    font-weight: 600;
}

.ll-pill--status,
.lesson-workspace-completion__mode-pill {
    font-weight: var(--ll-type-label-weight);
}

.ll-pill--success,
.lesson-workspace-completion__step.is-complete,
.lesson-workspace-completion__mode-pill--new {
    border-color: var(--accent-success-border);
    background: var(--accent-success-soft);
    color: var(--accent-success-strong);
}

.ll-pill--ai {
    border-color: var(--accent-ai-border);
    background: var(--accent-ai-soft);
    color: var(--accent-ai-strong);
}

.ll-pill--info {
    border-color: var(--accent-info-border);
    background: var(--accent-info-soft);
    color: var(--accent-info-strong);
}

.ll-pill--share {
    border-color: var(--accent-share-border);
    background: var(--accent-share-soft);
    color: var(--accent-share-strong);
}

/* --- Button role system --- */
.ll-btn--capture,
.lesson-workspace-quick-action--primary,
:is(.upload-record-btn, .record-video-btn, .record-button, .today-hero-card__primary-action) {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.ll-btn--capture:hover,
.lesson-workspace-quick-action--primary:hover,
:is(.upload-record-btn, .record-video-btn, .record-button, .today-hero-card__primary-action):hover {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
}

.ll-btn--success {
    background: var(--gradient-success);
    border-color: var(--accent-success-border);
    color: #fff;
    box-shadow: var(--glow-success);
}

.ll-btn--ai {
    background: var(--gradient-ai);
    border-color: var(--accent-ai-border);
    color: var(--text-heading-warm);
    box-shadow: var(--glow-ai);
}

.ll-btn--ghost,
.lesson-workspace-quick-action:not(.lesson-workspace-quick-action--primary),
.lesson-workspace-section-action.ll-btn--ghost {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--border-subtle);
    color: var(--text-primary);
    box-shadow: none;
}

/* --- Workspace section actions: capture = loud, default = quiet --- */
.lesson-workspace-section-action {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-subtle);
    color: var(--text-heading);
    box-shadow: none;
}

.lesson-workspace-editor-sibling--capture .lesson-workspace-section-action,
.lesson-workspace-editor-sibling--capture .lesson-workspace-quick-action--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

/* --- Reusable section header --- */
.ll-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-left: 12px;
    position: relative;
}

.ll-section-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--section-rail-neutral);
}

.ll-section-header__title {
    margin: 0;
    font-size: clamp(1.05rem, 2.8vw, 1.25rem);
    font-weight: 700;
    line-height: var(--line-tight);
    letter-spacing: -0.02em;
    color: var(--text-heading);
}

.ll-section-header__hint {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--ll-line-helper, 1.35);
}

.ll-section-header--details::before { background: var(--section-rail-details); }
.ll-section-header--media::before { background: var(--section-rail-media); }
.ll-section-header--summary::before { background: var(--section-rail-summary); }
.ll-section-header--sharing::before { background: var(--section-rail-sharing); }
.ll-section-header--capture::before { background: var(--section-rail-capture); }

.ll-section-header--summary .ll-section-header__title {
    color: var(--text-heading-warm);
}

/* --- Home dashboard: utility over marketing --- */
.home-panel[data-home-panel-content="today"] .common-card.today-dashboard-card {
    gap: 10px;
}

.home-panel[data-home-panel-content="today"] #today-lessons-list {
    gap: 8px;
}

/* --- Calmer global card surfaces --- */
:is(.common-card, .home-card, .home-panel, .today-panel, .student-lessons-card, .student-instructors-card) {
    box-shadow: var(--shadow-soft);
}

/* --- Override legacy green hover glows --- */
@media (hover: hover) and (pointer: fine) {
    :is(.ll-btn.ll-btn--solid.ll-btn--primary, .today-submit, .lesson-action-primary, .email-submit, .fc-button-primary, .today-chat-send-button):not(:disabled):hover {
        box-shadow: var(--glow-subtle);
        filter: brightness(1.04);
    }

    :is(.upload-record-btn, .record-video-btn, .today-hero-card__primary-action, .lesson-workspace-quick-action--primary, .ll-btn--solid.ll-btn--capture):not(:disabled):hover {
        box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
        filter: brightness(1.04);
    }
}

.lesson-workspace-quick-action--primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.28);
}

.lesson-workspace-quick-action--primary:hover,
.lesson-workspace-quick-action--primary:focus-visible {
    border-color: var(--primary-strong);
    background: var(--primary-strong);
    box-shadow: 0 10px 24px rgba(45, 122, 59, 0.32);
}

.lesson-workspace-completion__step.is-complete {
    color: var(--accent-success-strong);
}

.lesson-workspace-completion__mode-pill--new {
    border-color: var(--accent-success-border);
    background: var(--accent-success-soft);
    color: var(--accent-success-strong);
}

.lesson-workspace-editor-stack .lesson-details-toggle:hover {
    border-color: var(--accent-info-border);
    background: color-mix(in srgb, var(--lesson-surface-control) 88%, var(--accent-info-soft));
}

.lesson-workspace-editor-stack .upload-media-actions-menu__trigger:hover,
.lesson-workspace-editor-stack .upload-media-actions .upload-media-transcript.ll-btn.ll-btn--ghost:hover {
    border-color: var(--accent-info-border);
    background: color-mix(in srgb, var(--lesson-surface-control) 88%, var(--accent-info-soft));
}

.lesson-capture-locked-card .lesson-capture-locked-cta {
    color: var(--accent-capture);
}

/* Ghost / refresh summarize keeps AI styling; solid capture toolbar uses green primary. */
#create-lesson-summary:not(:disabled):not(.ll-btn--capture),
.lesson-workspace-summarize-refresh-btn:not(:disabled):not(.ll-btn--capture) {
    border-color: var(--accent-ai-border);
    background: color-mix(in srgb, var(--accent-ai-soft) 72%, var(--bg-elevated));
    color: var(--text-heading-warm);
    box-shadow: none;
}

#create-lesson-summary:not(:disabled):not(.ll-btn--capture):hover,
.lesson-workspace-summarize-refresh-btn:not(:disabled):not(.ll-btn--capture):hover {
    border-color: color-mix(in srgb, var(--accent-ai) 42%, var(--accent-ai-border));
    box-shadow: var(--glow-ai);
}

#lesson-workspace-summarize-share:not(:disabled),
#open-summary-send-dialog:not(:disabled) {
    border-color: var(--accent-share-border);
    background: color-mix(in srgb, var(--accent-share-soft) 68%, var(--bg-elevated));
    color: var(--accent-share-strong);
    box-shadow: none;
}

#lesson-workspace-summarize-share:not(:disabled):hover,
#open-summary-send-dialog:not(:disabled):hover {
    border-color: color-mix(in srgb, var(--accent-share) 40%, var(--accent-share-border));
    box-shadow: 0 6px 16px rgba(154, 135, 201, 0.14);
}

.availability-slot.is-available {
    background: color-mix(in srgb, var(--accent-success) 58%, var(--bg-elevated));
}

.lesson-workspace-editor-stack[data-delivered-summary-only="true"] #edit-lesson-summary,
.lesson-workspace-editor-stack[data-delivered-summary-only="true"] .lesson-capture-workspace-toolbar-row,
.lesson-workspace-editor-stack[data-delivered-summary-only="true"] #create-lesson-summary {
    display: none !important;
}

.lesson-workspace-editor-stack[data-delivered-summary-only="true"] .lesson-workspace-delete-slot {
    margin-top: 16px;
}

/* Last: keep Schedule light canvas + green nav arrows above FC inject / theme-overrides */
/* ---- public/style/features/schedule-calendar-body.css ---- */
/* Feature: schedule-calendar-body.css
 * Google Calendar–like light canvas for FullCalendar under `.availability-calendar`.
 * Visual only — no behavior changes. Loads after theme-overrides to win cascade.
 */

/* Parent shells: only the scroll/grid canvas goes light — keep toolbar (New, search) on dark shell. */
.home-panel.home-schedule-panel-root .availability-grid-scroll,
.availability-shell .availability-grid-scroll,
.availability-editor--embedded .availability-grid-scroll,
.availability-editor--embedded .availability-calendar {
    background: #ffffff !important;
    color: #3c4043;
    box-shadow: none;
}

/* Restore schedule New button on dark hub toolbar (12% brand tint needs dark parent + light label). */
.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn.ll-btn.ll-btn--solid.ll-btn--primary,
.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn {
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--text-primary, #fff);
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn__label {
    color: inherit;
}

.home-panel.home-schedule-panel-root .calendar-hub-toolbar .hub-toolbar-new-btn__icon {
    background: var(--brand-primary);
    color: #fff;
}

.availability-calendar {
    --ll-fc-page-bg: #ffffff;
    --ll-fc-cell-bg: #ffffff;
    --ll-fc-border: #dadce0;
    --ll-fc-axis-text: #70757a;
    --ll-fc-header-text: #3c4043;
    --ll-fc-today-bg: color-mix(in srgb, #1a73e8 6%, #ffffff);
    --ll-fc-today-mark: #1a73e8;
    --ll-fc-today-mark-text: #ffffff;
    --ll-fc-now: #ea4335;
    --ll-fc-highlight: color-mix(in srgb, #1a73e8 14%, #ffffff);
    --ll-fc-event-text: #202124;
    --ll-fc-lesson-bg: color-mix(in srgb, var(--ll-calendar-google-lesson-green, #51b749) 22%, #ffffff);
    --ll-fc-lesson-accent: var(--ll-calendar-google-lesson-green, #51b749);
    --ll-fc-practice-bg: color-mix(in srgb, #1a73e8 16%, #ffffff);
    --ll-fc-practice-accent: #1a73e8;
    --ll-fc-thought-bg: color-mix(in srgb, #f9ab00 18%, #ffffff);
    --ll-fc-thought-accent: #e37400;
    background: var(--ll-fc-page-bg) !important;
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc {
    --fc-border-color: var(--ll-fc-border);
    --fc-page-bg-color: var(--ll-fc-page-bg);
    --fc-neutral-bg-color: var(--ll-fc-cell-bg);
    --fc-neutral-text-color: var(--ll-fc-axis-text);
    --fc-list-event-hover-bg-color: color-mix(in srgb, #1a73e8 8%, #ffffff);
    --fc-today-bg-color: var(--ll-fc-today-bg);
    --fc-now-indicator-color: var(--ll-fc-now);
    --fc-non-business-color: color-mix(in srgb, #70757a 6%, #ffffff);
    --fc-highlight-color: var(--ll-fc-highlight);
    --fc-event-bg-color: var(--ll-fc-lesson-bg);
    --fc-event-border-color: transparent;
    --fc-event-text-color: var(--ll-fc-event-text);
    /* Prev/next use FullCalendar button tokens — keep brand green */
    --fc-button-bg-color: var(--primary, #3fa85a);
    --fc-button-border-color: var(--primary, #3fa85a);
    --fc-button-text-color: #ffffff;
    --fc-button-hover-bg-color: var(--primary-strong, #2d7a38);
    --fc-button-hover-border-color: var(--primary-strong, #2d7a38);
    --fc-button-hover-text-color: #ffffff;
    --fc-button-active-bg-color: var(--primary-strong, #2d7a38);
    --fc-button-active-border-color: var(--primary-strong, #2d7a38);
    --fc-button-active-text-color: #ffffff;
    color: var(--ll-fc-header-text);
    background: var(--ll-fc-page-bg) !important;
}

/* Beat theme-overrides bare `.fc` / cell rules — force light on every grid surface */
.availability-calendar .fc,
.availability-calendar .fc-view-harness,
.availability-calendar .fc-view,
.availability-calendar .fc-scrollgrid,
.availability-calendar .fc-scrollgrid-section,
.availability-calendar .fc-scrollgrid-sync-table,
.availability-calendar .fc-daygrid-body,
.availability-calendar .fc-timegrid-body,
.availability-calendar .fc-timegrid-slots,
.availability-calendar .fc-timegrid-cols,
.availability-calendar .fc-list,
.availability-calendar .fc-list-table,
.availability-calendar .fc-popover {
    background: var(--ll-fc-page-bg) !important;
    color: var(--ll-fc-header-text);
    border-color: var(--ll-fc-border);
}

.availability-calendar .fc-theme-standard td,
.availability-calendar .fc-theme-standard th,
.availability-calendar .fc-daygrid-day,
.availability-calendar .fc-daygrid-day-frame,
.availability-calendar .fc-daygrid-day-bg,
.availability-calendar .fc-daygrid-day-events,
.availability-calendar .fc-col-header,
.availability-calendar .fc-col-header-cell,
.availability-calendar .fc-timegrid-axis,
.availability-calendar .fc-timegrid-slot,
.availability-calendar .fc-timegrid-col,
.availability-calendar .fc-scrollgrid-section > td,
.availability-calendar .fc-scrollgrid-section > th {
    background: var(--ll-fc-cell-bg) !important;
    border-color: var(--ll-fc-border) !important;
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc-scrollgrid {
    border: 0;
}

/* Toolbar date range + day headers: dark ink on light canvas (not theme --text-primary) */
.availability-calendar .fc-toolbar-title {
    color: #202124 !important;
    font-weight: 600;
}

.availability-calendar .fc-col-header-cell-cushion {
    color: #3c4043 !important;
    font-weight: 500;
}

.availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    color: var(--ll-fc-today-mark-text) !important;
}

/* Typography: muted axis + headers (override shared-misc weight 700) */
.availability-calendar .fc-col-header-cell-cushion,
.availability-calendar .fc-timegrid-axis-cushion,
.availability-calendar .fc-timegrid-slot-label-cushion,
.availability-calendar .fc .fc-daygrid-day-number {
    color: var(--ll-fc-axis-text);
    font-weight: 500;
}

.availability-calendar .fc-col-header-cell-cushion {
    color: var(--ll-fc-header-text);
    font-weight: 500;
    padding: 6px 2px;
}

.availability-calendar .fc-timeGridWeek-view .fc-col-header-cell-cushion {
    /* Custom week header stacks day + DOW; keep cushion from clipping letter. */
    overflow: visible;
}

.availability-calendar .fc-timegrid-slot-label-cushion {
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.availability-calendar .fc-timegrid-axis-cushion {
    font-size: var(--ll-type-meta-size, 0.75rem);
    font-weight: 400;
}

/* Today column + blue day mark (after forced white cells) */
.availability-calendar .fc .fc-day-today,
.availability-calendar .fc-daygrid-day.fc-day-today,
.availability-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
    background: var(--ll-fc-today-bg) !important;
}

.availability-calendar .fc-col-header-cell.fc-day-today {
    background: var(--ll-fc-page-bg) !important;
}

.availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65em;
    min-height: 1.65em;
    margin: 2px auto;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--ll-fc-today-mark);
    color: var(--ll-fc-today-mark-text);
    font-weight: 500;
}

.availability-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65em;
    height: 1.65em;
    margin: 2px;
    padding: 0;
    border-radius: 999px;
    background: var(--ll-fc-today-mark);
    color: var(--ll-fc-today-mark-text);
    font-weight: 500;
}

/* Now indicator — thin GCal red */
.availability-calendar .fc-timegrid-now-indicator-line {
    border-color: var(--ll-fc-now);
    border-width: 2px 0 0;
}

.availability-calendar .fc-timegrid-now-indicator-arrow {
    border-color: var(--ll-fc-now);
    border-top-color: var(--ll-fc-now);
    border-bottom-color: var(--ll-fc-now);
}

.availability-calendar .fc-highlight {
    background: var(--ll-fc-highlight) !important;
}

/* ----- TimeGrid week/day: GCal pastel blocks (title then time) ----- */
.availability-calendar .fc-timegrid-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-v-event.availability-lesson-event {
    /* Kill FC's default green event border (shows on the right of narrow/overlap chips). */
    border: 0 !important;
    border-right: 0 !important;
    border-color: transparent !important;
    outline: none !important;
    /* Square corners — rounded left edge looked pill-like on short week chips. */
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ll-fc-event-text) !important;
    overflow: hidden;
}

.availability-calendar .fc-timegrid-event-harness .fc-timegrid-event.availability-lesson-event {
    border-radius: 0 !important;
    border-right: 0 !important;
}

.availability-calendar .fc-timegrid-event .fc-event-main,
.availability-calendar .fc-timegrid-event .fc-event-main-frame {
    color: inherit !important;
    /* Extra top pad so bold titles are not clipped by overflow + hour lines. */
    padding: 4px 5px 4px 6px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0 !important;
}

.availability-calendar .fc-timeGridWeek-view .fc-timegrid-event .fc-event-main,
.availability-calendar .fc-timeGridWeek-view .fc-timegrid-event .fc-event-main-frame {
    padding: 3px 3px 3px 4px;
}

/* No left accent stripe — on side-by-side overlaps it reads as green on the right of the prior chip. */
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson {
    background: var(--ll-fc-lesson-bg) !important;
    background-color: var(--ll-fc-lesson-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: none !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--practice {
    background: var(--ll-fc-practice-bg) !important;
    background-color: var(--ll-fc-practice-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: none !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--thought {
    background: var(--ll-fc-thought-bg) !important;
    background-color: var(--ll-fc-thought-bg) !important;
    color: var(--ll-fc-event-text) !important;
    box-shadow: none !important;
}

/* Synced: bottom edge only (never left/right). */
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson.availability-lesson-event--sync-synced {
    box-shadow: inset 0 -2px 0 var(--ll-fc-lesson-accent) !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--practice.availability-lesson-event--sync-synced {
    box-shadow: inset 0 -2px 0 var(--ll-fc-practice-accent) !important;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--thought.availability-lesson-event--sync-synced {
    box-shadow: inset 0 -2px 0 var(--ll-fc-thought-accent) !important;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.08em;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    line-height: 1.3;
    font-size: var(--ll-type-meta-size, 0.75rem);
    color: var(--ll-fc-event-text);
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-title-line {
    font-weight: 600;
    font-size: var(--ll-type-meta-size, 0.75rem);
    line-height: 1.3;
    color: var(--ll-fc-event-text) !important;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.availability-calendar .fc-timeGridDay-view .fc-timegrid-event .calendar-lesson-fc-event-day-line {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.availability-calendar .fc-timeGridDay-view .fc-timegrid-event .calendar-lesson-fc-event-day-line .calendar-lesson-fc-event-title-line {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.availability-calendar .fc-timeGridDay-view .fc-timegrid-event .calendar-lesson-fc-event-day-line .calendar-lesson-fc-event-time {
    flex: 0 0 auto;
    font-size: inherit;
    line-height: inherit;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-time,
.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-person {
    font-weight: 400;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    line-height: 1.3;
    color: color-mix(in srgb, var(--ll-fc-event-text) 78%, transparent) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.availability-calendar .fc-timeGridWeek-view .fc-timegrid-event .calendar-lesson-fc-event-inner--week {
    line-height: 1.3;
    padding: 0;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator {
    filter: none;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--pending {
    color: #b45309;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--error,
.availability-calendar .fc-timegrid-event.availability-lesson-event--lesson .calendar-lesson-sync-indicator--stale {
    color: #b91c1c;
}

/* Do NOT set position:relative on .fc-timegrid-event — FullCalendar sizes the harness
   to the lesson duration and absolutely fills it. relative collapses the chip to content height.
   Leave a 2px right / 1px bottom gap so side-by-side overlaps do not fuse and the
   hour line does not clip the first line of text. */
.availability-calendar .fc-timegrid-event.availability-lesson-event,
.availability-calendar .fc-timegrid-event.fc-v-event.availability-lesson-event {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 1px;
    left: 0;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-fc-event-inner--has-sync {
    position: relative;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-right: 1.15em;
    padding-bottom: 0;
}

.availability-calendar .fc-timegrid-event .calendar-lesson-sync-indicator {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 3;
}

.availability-calendar .fc-timegrid-event.availability-lesson-event:hover,
.availability-calendar .fc-timegrid-event.availability-lesson-event:focus-visible {
    filter: brightness(0.97);
}

/* ----- Month dayGrid: GCal list row (dot + time + title), not filled pills ----- */
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event.availability-lesson-event,
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-block-event.availability-lesson-event,
.availability-calendar .fc-dayGridMonth-view .fc-h-event.availability-lesson-event {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ll-fc-event-text) !important;
    margin: 0 2px 1px !important;
    padding: 0 !important;
    display: block;
    width: calc(100% - 4px);
}

.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main,
.availability-calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main-frame {
    background: transparent !important;
    color: var(--ll-fc-event-text) !important;
    padding: 0 2px !important;
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-inner--month {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    min-width: 0;
    width: 100%;
    padding: 1px 0;
    line-height: 1.25;
    color: var(--ll-fc-event-text);
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-dot {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ll-fc-lesson-accent);
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event--practice .calendar-lesson-fc-event-dot {
    background: var(--ll-fc-practice-accent);
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event--thought .calendar-lesson-fc-event-dot {
    background: var(--ll-fc-thought-accent);
}

.availability-calendar .fc-dayGridMonth-view .calendar-lesson-fc-event-day-main {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: 500;
    color: var(--ll-fc-event-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.availability-calendar .fc-dayGridMonth-view .availability-lesson-event:hover,
.availability-calendar .fc-dayGridMonth-view .availability-lesson-event:focus-visible {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff) !important;
    filter: none;
    border-radius: 3px !important;
}

.availability-calendar .fc-more-link {
    color: #70757a !important;
    font-size: var(--ll-type-micro-size, 0.6875rem);
    font-weight: 500;
}

/* Prev / next: brand green (match Month pill / primary actions) */
.availability-calendar .fc .fc-button-primary.fc-prev-button,
.availability-calendar .fc .fc-button-primary.fc-next-button,
.availability-calendar .fc .fc-prev-button,
.availability-calendar .fc .fc-next-button,
.availability-calendar .fc-toolbar .fc-button.fc-prev-button,
.availability-calendar .fc-toolbar .fc-button.fc-next-button {
    background-color: var(--primary, #3fa85a) !important;
    background-image: none !important;
    border: 1px solid var(--primary, #3fa85a) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.availability-calendar .fc .fc-button-primary.fc-prev-button:hover,
.availability-calendar .fc .fc-button-primary.fc-next-button:hover,
.availability-calendar .fc .fc-prev-button:hover,
.availability-calendar .fc .fc-next-button:hover,
.availability-calendar .fc .fc-button-primary.fc-prev-button:focus-visible,
.availability-calendar .fc .fc-button-primary.fc-next-button:focus-visible,
.availability-calendar .fc .fc-prev-button:focus-visible,
.availability-calendar .fc .fc-next-button:focus-visible,
.availability-calendar .fc .fc-button-primary.fc-prev-button:active,
.availability-calendar .fc .fc-button-primary.fc-next-button:active {
    background-color: var(--primary-strong, #2d7a38) !important;
    background-image: none !important;
    border-color: var(--primary-strong, #2d7a38) !important;
    color: #ffffff !important;
}

.availability-calendar .fc .fc-prev-button .fc-icon,
.availability-calendar .fc .fc-next-button .fc-icon {
    color: #ffffff !important;
}

.availability-calendar .fc .fc-prev-button:disabled,
.availability-calendar .fc .fc-next-button:disabled {
    opacity: 0.45;
}

/* List view stays readable on light canvas if used */
.availability-calendar .fc-list {
    border: 1px solid var(--ll-fc-border);
    background: var(--ll-fc-page-bg);
}

.availability-calendar .fc-list-day-cushion {
    background: color-mix(in srgb, #1a73e8 6%, #ffffff);
    color: var(--ll-fc-header-text);
    border-bottom: 1px solid var(--ll-fc-border);
}

.availability-calendar .fc-list-event td {
    border-color: var(--ll-fc-border);
    color: var(--ll-fc-header-text);
}

.availability-calendar .fc-list-event-time {
    color: var(--ll-fc-axis-text);
}

.availability-calendar .fc-list-event-title > a {
    color: var(--ll-fc-header-text);
}

/* Mobile density: keep compact sizes but muted weights */
@media (max-width: 640px) {
    .availability-calendar .fc-timegrid-slot-label-cushion {
        font-weight: 400;
        color: var(--ll-fc-axis-text);
    }

    .availability-calendar .fc-col-header-cell-cushion {
        font-weight: 500;
        color: var(--ll-fc-header-text);
    }

    .availability-calendar .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion {
        color: var(--ll-fc-today-mark-text);
        min-width: 1.45em;
        min-height: 1.45em;
    }
}

/* ---- public/style/surface-chrome.css ---- */
/* Shared surface chrome — one class, one rule. @see docs/ui-surface-truth-model.md */

.ll-surface {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.ll-surface__header {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    flex-shrink: 0;
    gap: 0.5rem;
    grid-template-columns: auto 1fr auto;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
}

/* Fullscreen / transient stack topbar — wins over generic .ll-surface__header (loads after style.css). */
.ll-surface__header.app-route-fullscreen-topbar.ll-header-bar--centered-title {
    align-items: center;
    column-gap: 8px;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
    padding:
        max(var(--ll-toolbar-padding-y, 0.5rem), env(safe-area-inset-top, 0px))
        max(var(--space-4, 1rem), env(safe-area-inset-right, 0px))
        var(--ll-toolbar-padding-y, 0.5rem)
        max(var(--space-4, 1rem), env(safe-area-inset-left, 0px));
    row-gap: 0;
}

.ll-surface__header.app-route-fullscreen-topbar.ll-header-bar--centered-title > :is(
    .ll-stack-shell__back,
    .ll-back-action,
    .dialog-header-back
) {
    align-items: center;
    align-self: center;
    display: inline-flex;
    justify-content: center;
    justify-self: start;
    margin-top: 0;
    padding-top: 0;
    position: relative;
    top: auto;
    right: auto;
}

.ll-surface__header.app-route-fullscreen-topbar.ll-header-bar--centered-title > :is(
    .ll-stack-shell__back,
    .ll-back-action,
    .dialog-header-back
) i {
    display: block;
    line-height: 1;
}

.ll-surface__header.app-route-fullscreen-topbar.ll-header-bar--centered-title > .ll-surface__title {
    align-self: center;
    justify-self: center;
}

.ll-surface__title {
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
    letter-spacing: var(--ll-type-title-tracking);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stack / route topbar titles (Phase 6 — was .app-route-fullscreen-title). */
.ll-header-bar--centered-title > .ll-surface__title {
    font-size: var(--ll-type-title-size);
    font-weight: var(--ll-type-title-weight);
    line-height: var(--ll-type-title-line);
    letter-spacing: var(--ll-type-title-tracking);
    color: var(--text-primary, var(--ink));
}

.ll-surface__back {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    min-height: var(--ll-touch-target, 44px);
    min-width: var(--ll-touch-target, 44px);
    padding: 0;
}

.ll-surface__back:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ll-surface__header-spacer {
    display: block;
    min-height: var(--ll-touch-target, 44px);
    min-width: var(--ll-touch-target, 44px);
}

.ll-surface__body {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Route stack screens: body-inner owns scroll; do not compete with .ll-surface__body overflow. */
.ll-surface__body.app-route-fullscreen-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ll-surface__footer {
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0.75rem;
}

/*
 * Confirm sheet (layout: confirm) — compact card on dialog overlay.
 * Target ≤600px tall @ 360×700; top-aligned host (surface-sheet.css).
 */
.dialog-content.ll-surface--sheet-confirm {
    animation: slideUp var(--motion-base) var(--ease-standard);
    height: auto;
    max-height: min(
        600px,
        calc(100dvh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4))
    );
    max-height: min(
        600px,
        calc(100vh - var(--dialog-top-offset) - var(--ll-modal-gutter-y-bottom) - var(--ll-space-4))
    );
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--ll-space-4);
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__header {
    border-bottom: 0;
    display: block;
    min-height: 0;
    padding: 0;
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__title {
    color: var(--text-primary);
    font-size: clamp(1.05rem, 4.2vw, 1.2rem);
    font-weight: var(--weight-semibold);
    line-height: var(--line-tight);
    margin: 0 0 8px;
    text-align: left;
    white-space: normal;
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__body {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__body .dialog-message {
    font-size: 0.92rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.dialog-content.ll-surface--sheet-confirm .dialog-confirm-facts {
    margin-top: 10px;
}

.dialog-content.ll-surface--sheet-confirm .dialog-confirm-facts dd {
    color: var(--text-heading, var(--text-primary));
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__footer {
    flex-shrink: 0;
    padding: 0;
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__footer.dialog-buttons {
    margin-top: 12px;
}

/* Player+ body — feature-specific; chrome stays on confirm variant above. */
.dialog-content.ll-surface--sheet-confirm .dialog-message .player-plus-upgrade-dialog {
    gap: 10px;
}

.dialog-content.ll-surface--sheet-confirm .player-plus-upgrade-dialog__beta-note {
    font-size: 0.85rem;
    line-height: 1.35;
    padding: 8px 10px;
}

.dialog-content.ll-surface--sheet-confirm .player-plus-upgrade-dialog > p:not([class]) {
    font-size: inherit;
    line-height: inherit;
}

.dialog-content.ll-surface--sheet-confirm .player-plus-upgrade-dialog__plans {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-content.ll-surface--sheet-confirm .player-plus-upgrade-dialog__plan {
    padding: 10px 12px;
}

.dialog-content.ll-surface--sheet-confirm .player-plus-upgrade-dialog__plan strong {
    font-size: 1.3rem;
}

.dialog-content.ll-surface--sheet-confirm .player-plus-upgrade-dialog__features {
    font-size: 0.88rem;
    gap: 3px;
    line-height: 1.35;
}

@media (max-width: 560px) {
    .dialog-content.ll-surface--sheet-confirm .dialog-buttons--three-way {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dialog-content.ll-surface--sheet-confirm .dialog-buttons--three-way .dialog-action-spacer {
        display: none;
    }

    .dialog-content.ll-surface--sheet-confirm .dialog-buttons--three-way .dialog-action-group--wrap {
        display: flex;
        flex: 1 1 100%;
        flex-wrap: wrap;
        gap: 8px;
        margin-left: 0;
        width: 100%;
    }

    .dialog-content.ll-surface--sheet-confirm .dialog-buttons--three-way .dialog-button {
        flex: 1 1 calc(50% - 4px);
        min-height: var(--ll-touch-target, 44px);
        width: auto;
    }

    /* First action on its own row (e.g. Maybe Later / Cancel). */
    .dialog-content.ll-surface--sheet-confirm .dialog-buttons--three-way .dialog-action-group--wrap > .dialog-button:first-child:not(:only-child) {
        flex: 1 1 100%;
    }
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__body .dialog-input {
    margin: 0 0 12px;
    width: 100%;
}

.dialog-input--prompt {
    min-width: 0;
    width: 100%;
    max-width: none;
    font-size: var(--ll-type-body-size);
}

.dialog-content.ll-surface--sheet-confirm .ll-surface__body .dialog-stacked-fields {
    margin-top: 4px;
}

@media (min-width: 768px) {
    .ll-surface--screen-stack.ll-surface--constrained .ll-surface__body {
        margin-inline: auto;
        max-width: 42rem;
        width: 100%;
    }
}

/* Dismiss-back rich sheets (weather detail, session summary, …) */
.dialog-content.dialog-content--dismiss-icon .ll-surface__header.dialog-header-with-dismiss {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    grid-template-columns: unset;
    min-height: 0;
    padding: var(--space-4) var(--space-4) 8px;
    position: relative;
}

.dialog-content.dialog-content--dismiss-icon .ll-surface__header .ll-surface__back.ll-back-action--has-label {
    align-items: flex-start;
    flex: 1 1 auto;
    height: auto;
    justify-content: flex-start;
    max-width: none;
    min-height: 0;
    min-width: 0;
    text-align: left;
}

.dialog-content.dialog-content--dismiss-icon .ll-surface__header .ll-back-action__label {
    line-height: 1.35;
    text-wrap: balance;
    white-space: normal;
}

.dialog-content.dialog-content--dismiss-icon .ll-surface__header .ll-surface__title.ll-header-title-merged {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.dialog-content.dialog-content--weather-detail.ll-surface--sheet-overlay {
    border: none;
    max-height: min(88dvh,
        calc(100dvh - var(--dialog-top-offset) - max(var(--space-4), env(safe-area-inset-bottom)) - var(--space-4)));
    max-height: min(88vh,
        calc(100vh - var(--dialog-top-offset) - max(var(--space-4), env(safe-area-inset-bottom)) - var(--space-4)));
    max-width: min(92vw, 440px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: min(100%, 440px);
}

.dialog-content.dialog-content--weather-detail .ll-surface__body {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
}

.dialog-content.dialog-content--weather-detail .ll-surface__body .dialog-message--rich {
    margin: 0;
    padding: 0;
}

.dialog-overlay.ll-surface-host.ll-surface-host--weather-detail {
    align-items: flex-start;
    justify-content: center;
    padding-top: var(--dialog-top-offset, 0);
}

.dialog-overlay.ll-surface-host.ll-surface-host--weather-detail > .dialog-content.dialog-content--weather-detail {
    align-self: flex-start;
    flex-shrink: 0;
    margin: 0;
}

/* Weather day detail — one card; theme accents live on inner .weather-detail-dialog--* */
.dialog-content.dialog-content--weather-detail {
    background: var(--surface-card-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.dialog-content.dialog-content--weather-detail .ll-surface__header.dialog-header-with-dismiss {
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--border-default) 55%, transparent);
    padding: var(--space-3) var(--space-4);
}

/* Centered title row — beat sheet-overlay flex-start + dismiss-icon flex overrides. */
.dialog-content.dialog-content--weather-detail .ll-surface__header.dialog-header-with-dismiss.ll-header-bar--centered-title {
    align-items: center;
    column-gap: 8px;
    display: grid;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
}

/* Same circular chrome as #titlebar-lesson-back — .ll-surface__back resets hide it by default. */
.dialog-content.dialog-content--weather-detail .ll-surface__header .ll-surface__back.ll-back-action,
.dialog-content.dialog-content--weather-detail .ll-surface__header .ll-surface__back.dialog-header-back {
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    flex-shrink: 0;
    justify-content: center;
    margin: 0;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
    height: 44px;
    max-width: 44px;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface-card-strong) 92%, transparent);
    color: var(--text-primary);
}

.dialog-content.dialog-content--weather-detail .ll-surface__header .ll-back-action__label {
    color: var(--text-primary);
    text-shadow: none;
}

.dialog-content.dialog-content--weather-detail .ll-surface__header .ll-surface__back.ll-back-action i,
.dialog-content.dialog-content--weather-detail .ll-surface__header .ll-surface__back.dialog-header-back i {
    color: inherit;
    opacity: 1;
}

@media (max-width: 560px) {
    .dialog-content.dialog-content--weather-detail .ll-surface__header.dialog-header-with-dismiss {
        padding: var(--space-3);
    }
}

/* Persona picker — scrollable list inside transient stack screen body.
   Markup uses stack + surface on the same root (not nested).
   Use flex-basis 0 so the list gets a bounded height and overflow-y can scroll
   (flex-basis:auto sized to all rows and parents clipped with overflow:hidden). */
.lessonlink-sandbox-persona-surface.lessonlink-sandbox-persona-stack,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-stack {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-surface--screen-stack {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-surface--screen-stack > .ll-surface__body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lessonlink-stack-host.lessonlink-stack-host--screen .ll-stack-shell__content > .lessonlink-sandbox-persona-surface {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lessonlink-sandbox-persona-overlay .dialog-content.lessonlink-sandbox-persona-dialog > .lessonlink-sandbox-persona-surface {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-search-mount {
    flex: 0 0 auto;
    padding: 0 0 0.65rem;
}

.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-list-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-list-panel > .lessonlink-sandbox-persona-list,
.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-list {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Stack host already clears the Ask dock; small end inset for the last row. */
    padding-bottom: 0.75rem;
}

.lessonlink-sandbox-persona-surface .lessonlink-sandbox-persona-row {
    flex-shrink: 0;
}

.lessonlink-sandbox-persona-list-more-wrap {
    flex-shrink: 0;
    padding: 0.35rem 0.25rem 0.5rem;
    text-align: center;
}

.lessonlink-sandbox-persona-list > .lessonlink-sandbox-persona-list-more-wrap {
    /* Sit directly under the last account row inside the scrollable list. */
    margin-top: 0.15rem;
}

.lessonlink-sandbox-persona-list-more-wrap[hidden] {
    display: none !important;
}

.lessonlink-sandbox-persona-list-more {
    background: none;
    border: none;
    color: var(--accent, #2563eb);
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    text-decoration: underline;
}

.lessonlink-sandbox-persona-list-more:hover,
.lessonlink-sandbox-persona-list-more:focus-visible {
    text-decoration: none;
}

.lessonlink-sandbox-persona-list-empty {
    color: var(--text-muted, #6b7280);
    font-size: 0.9375rem;
    margin: 0.75rem 0 0;
    padding: 0 0.25rem;
    text-align: center;
}

/* Persona picker fallback — full overlay sheet (no navigator) */
.lessonlink-sandbox-persona-overlay--full.ll-surface--sheet-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
}

.lessonlink-sandbox-persona-overlay--full .ll-surface__panel {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
}

.lessonlink-sandbox-persona-overlay--full .lessonlink-sandbox-persona-stack,
.lessonlink-sandbox-persona-overlay--full .lessonlink-sandbox-persona-surface.lessonlink-sandbox-persona-stack {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.lessonlink-sandbox-persona-overlay--full .lessonlink-sandbox-persona-list-panel {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.lessonlink-sandbox-persona-overlay--full .lessonlink-sandbox-persona-list-panel > .lessonlink-sandbox-persona-list,
.lessonlink-sandbox-persona-overlay--full .lessonlink-sandbox-persona-list {
    flex: 1 1 0;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
}

/* Phase 3 — embedded full-bleed overlay sheets (lesson workspace, upload readers) */
.ll-surface-host[data-ll-surface-host='embedded'].email-panel-overlay--global-modal-full > .ll-surface--sheet-overlay {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--ll-space-4);
    min-height: 0;
    overflow: hidden;
}

.ll-surface--sheet-overlay > .ll-surface__header {
    align-items: flex-start;
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    grid-template-columns: unset;
    min-height: 0;
    padding: 0;
}

.ll-surface--sheet-overlay > .ll-surface__header .ll-surface__back {
    align-items: flex-start;
    flex-shrink: 0;
    margin-top: 2px;
    min-height: 0;
    padding-top: 0;
}

.ll-surface--sheet-overlay .ll-surface__header-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ll-surface--sheet-overlay .ll-surface__header:not(.ll-header-bar--centered-title) .ll-surface__title:not(.swing-analysis-player__title) {
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    line-height: var(--line-tight);
    text-align: left;
    white-space: normal;
}

.ll-surface--sheet-overlay .ll-header-bar--centered-title > .ll-surface__title:not(.swing-analysis-player__title) {
    text-align: center;
    white-space: nowrap;
}

.ll-surface--sheet-overlay .ll-surface__subtitle {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-normal);
    margin: 4px 0 0;
}

.ll-surface--sheet-overlay > .ll-surface__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.ll-surface--sheet-overlay > .ll-surface__footer {
    flex-shrink: 0;
    margin-top: auto;
    padding: 0;
}

.ll-surface-host[hidden],
.email-panel-overlay.ll-surface-host[hidden],
[data-ll-surface-host='embedded'][hidden] {
    display: none !important;
}

/* UIC-021: legacy panel headers that host a back control share surface header geometry */
.email-panel-header:has(> .ll-surface__back),
.email-panel-header:has(> .dialog-header-back),
.lesson-dialog-header:has(> .ll-surface__back),
.lesson-dialog-header:has(> .dialog-header-back) {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: auto 1fr auto;
    min-height: var(--ll-touch-target, 44px);
    padding: 0.5rem 0.75rem;
}

/* ---- public/style/surface-screen.css ---- */
/* Screen layout geometry only. @see docs/ui-surface-truth-model.md */

.ll-surface--screen-top {
    min-height: 100%;
}

.home-panel > .ll-surface--screen-top {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.home-panel > .ll-surface--screen-top > .ll-surface__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    /* Home panels already own scroll (or delegate to inner lists). Default
       ll-surface__body overflow:auto clips the today-shell edge bleed and
       shows a spurious horizontal bar. */
    overflow-x: hidden;
    overflow-y: hidden;
}

.ll-surface--screen-stack {
    min-height: 100%;
}

.ll-stack-shell__inner > .ll-surface--screen-stack {
    flex: 1 1 auto;
    min-height: 0;
}

.view-root.view-root--stack-screen .ll-stack-shell__inner > .ll-surface--screen-stack {
    min-height: 0;
}

.ll-surface--screen-stack .ll-surface__body {
    padding: 0 0.75rem 1rem;
}

/* ---- public/style/surface-sheet.css ---- */
/* Sheet layout geometry only. @see docs/ui-surface-truth-model.md */

.ll-surface-host:not(.dialog-overlay) {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 0.75rem;
    position: fixed;
    z-index: var(--ll-layer-modal-z, 1200);
}

/* display:flex above beats the UA [hidden] rule — keep closed hosts out of the page. */
.ll-surface-host[hidden] {
    display: none !important;
}

/* Full-bleed backdrop: defer to legacy .dialog-overlay sizing (avoids width/padding conflicts). */
.dialog-overlay.ll-surface-host {
    align-items: flex-start;
    box-sizing: border-box;
    height: auto;
    inset: 0;
    justify-content: center;
    min-height: 100dvh;
    min-height: 100vh;
    width: auto;
}

.dialog-overlay.ll-surface-host > .dialog-content.ll-surface--sheet-confirm {
    align-self: flex-start;
    flex-shrink: 0;
    margin: 0;
    width: min(100%, 560px);
}

.ll-surface--sheet-overlay {
    height: 100%;
    max-height: 100%;
}

.ll-surface-host:not(.dialog-overlay) .ll-surface--sheet-panel[data-ll-surface-attach='center'] {
    margin: auto;
    max-height: min(90vh, 40rem);
    max-width: min(100%, 26rem);
}

.ll-surface-host:not(.dialog-overlay) .ll-surface--sheet-panel[data-ll-surface-attach='bottom'] {
    align-self: flex-end;
    max-height: 85vh;
    width: 100%;
}

.ll-surface-host:not(.dialog-overlay) .ll-surface--sheet-panel[data-ll-surface-attach='anchor'] {
    margin: 0;
    max-width: min(100%, 20rem);
}

.dialog-overlay.ll-surface-host > .ll-surface--sheet-panel[data-ll-surface-attach='center'] {
    align-self: center;
    margin: auto;
    max-height: min(90vh, 40rem);
    width: min(100%, 26rem);
}

.dialog-overlay.ll-surface-host > .ll-surface--sheet-overlay {
    height: auto;
    max-height: min(92vh, 40rem);
    width: min(100%, 560px);
}

.ll-surface-host:not(.dialog-overlay) .ll-surface--sheet-confirm {
    margin: auto;
    max-width: min(100% - 1.5rem, 26rem);
    width: 100%;
}

/* ---- public/style/app-shell-column.css ---- */
/* Instructor /app column: keep viewport-fixed overlays aligned with the shell. */

html.ll-vp-sim--phone {
    --app-shell-column-inset: 0px;
}

html:not(.ll-vp-sim--phone):has(.app-shell) .app-shell {
    background: var(--app-page-fill);
    isolation: isolate;
}

html:not(.ll-vp-sim--phone) body > .dialog-overlay,
html:not(.ll-vp-sim--phone) body > .ll-surface-host,
html:not(.ll-vp-sim--phone) body > .email-panel-overlay,
html:not(.ll-vp-sim--phone) body > .lesson-dialog-overlay,
html:not(.ll-vp-sim--phone) body > .swing-analysis-player-overlay,
html:not(.ll-vp-sim--phone) body > .record-notes-dialog,
html:not(.ll-vp-sim--phone) body > .contact-reach-sheet-overlay,
html:not(.ll-vp-sim--phone) body > .media-share-sheet-overlay {
    left: var(--app-shell-column-inset, 0px);
    right: var(--app-shell-column-inset, 0px);
    width: auto;
}

/* ---- public/style/surface-gate.css ---- */
/* Gate layout geometry only. @see docs/ui-surface-truth-model.md */

.ll-surface--gate-fullscreen {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}

.ll-surface--gate-fullscreen > .ll-surface__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-screen.ll-surface--gate-fullscreen > .ll-surface__header {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 0 24px;
}

.auth-screen.ll-surface--gate-fullscreen > .ll-surface__header .ll-surface__title {
    font-size: 1.7rem;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
}

@media (max-width: 400px) {
    .auth-screen.ll-surface--gate-fullscreen > .ll-surface__header {
        padding: 0 12px;
    }
}

.ll-surface--gate-blocking > .ll-surface__body {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    overflow: visible;
    text-align: center;
}

.ll-surface--gate-blocking .ll-surface__title.loading-title {
    margin: 4px 0 0;
}

.dialog-content.ll-surface--gate-blocking > .ll-surface__header .ll-surface__title {
    text-align: center;
    white-space: normal;
}

/* Demo entry: hide the signed-in shell until sandbox session is ready (avoids real Today flash). */
html.ll-sandbox-boot-pending .app-shell,
html.ll-sandbox-boot-pending #lessonlink-journey-footer-badges,
html.ll-sandbox-boot-pending #lessonlink-toast-line-env,
html.ll-sandbox-boot-pending #app-toast {
    visibility: hidden;
}

html.ll-sandbox-boot-pending body {
    background: var(--ll-color-bg-app, #0f1115);
}

.app-sandbox-boot-spinner {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

html.ll-sandbox-boot-pending .app-sandbox-boot-spinner {
    display: flex;
}

/* ---- public/role-profile.css ---- */
/**
 * Role-based profile accents (instructor vs student).
 * Standalone role avatars keep their tint/border treatment.
 * Titlebar profile buttons stay visually clean and use only a small role dot underneath.
 *
 * Example (standalone initials chip):
 *   <span class="ll-role-avatar ll-role-avatar--md ll-role-avatar--instructor" aria-hidden="true">
 *     <span class="ll-role-avatar__initials">AB</span>
 *   </span>
 *
 * Example (titlebar / hub host — classes on existing button):
 *   <button class="titlebar-avatar-button ll-role-accent--instructor" type="button">...</button>
 */

:root {
    --ll-role-instructor-primary: #2d7a3b;
    --ll-role-instructor-tint: #e6f2ea;
    --ll-role-instructor-ink: #1a4d25;

    --ll-role-student-primary: #d6b25e;
    --ll-role-student-primary-strong: #c49a2c;
    --ll-role-student-tint: #f8f1dc;
    --ll-role-student-ink: #6b5420;
}

.ll-role-avatar {
    --ll-role-avatar-size: 36px;
    --ll-role-border-w: 1px;
    --ll-role-weight: 600;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    width: var(--ll-role-avatar-size);
    height: var(--ll-role-avatar-size);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: var(--ll-role-border-w) solid transparent;
    background: var(--ll-role-student-tint);
    line-height: 0;
}

.ll-role-avatar--sm {
    --ll-role-avatar-size: 28px;
    font-size: 0.68rem;
}

.ll-role-avatar--md {
    --ll-role-avatar-size: 36px;
    font-size: 0.82rem;
}

.ll-role-avatar--lg {
    --ll-role-avatar-size: 44px;
    font-size: 0.95rem;
}

.ll-role-avatar--instructor {
    --ll-role-border-w: 2px;
    --ll-role-weight: 700;
    background: var(--ll-role-instructor-tint);
    border-color: var(--ll-role-instructor-primary);
}

.ll-role-avatar--student {
    --ll-role-border-w: 1px;
    --ll-role-weight: 600;
    background: var(--ll-role-student-tint);
    border-color: var(--ll-role-student-primary-strong);
}

.ll-role-avatar--unknown {
    --ll-role-border-w: 1px;
    --ll-role-weight: 600;
    background: color-mix(in srgb, var(--surface-muted, #f3f4f6) 88%, var(--stroke, #d1d5db));
    border-color: color-mix(in srgb, var(--stroke, #d1d5db) 80%, transparent);
}

.ll-role-avatar--unknown .ll-role-avatar__initials {
    color: var(--text-muted, #6b7280);
    letter-spacing: 0;
    text-transform: none;
}

.ll-role-avatar__initials {
    font-weight: var(--ll-role-weight);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ll-role-student-ink);
    line-height: 1;
}

.ll-role-avatar__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    background: transparent;
}

/* Messages / chat: user silhouette when no photo or when the image fails to load */
.ll-role-avatar--with-silhouette .ll-role-avatar__silhouette {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.ll-role-avatar--with-silhouette.ll-role-avatar--sm .ll-role-avatar__silhouette i {
    font-size: 0.72rem;
    opacity: 0.88;
}

.ll-role-avatar--with-silhouette.ll-role-avatar--md .ll-role-avatar__silhouette i {
    font-size: 0.95rem;
    opacity: 0.88;
}

.ll-role-avatar--with-silhouette.ll-role-avatar--lg .ll-role-avatar__silhouette i {
    font-size: 1.1rem;
    opacity: 0.88;
}

.ll-role-avatar--with-silhouette.ll-role-avatar--instructor .ll-role-avatar__silhouette i {
    color: var(--ll-role-instructor-ink);
}

.ll-role-avatar--with-silhouette.ll-role-avatar--student .ll-role-avatar__silhouette i {
    color: var(--ll-role-student-ink);
}

.ll-role-avatar--instructor .ll-role-avatar__initials {
    color: var(--ll-role-instructor-ink);
}

.ll-role-avatar--student .ll-role-avatar__initials {
    color: var(--ll-role-student-ink);
}

@media (prefers-contrast: more) {
    .ll-role-avatar--student {
        border-width: 2px;
    }
}

@media (forced-colors: active) {
    .ll-role-avatar--instructor,
    .ll-role-avatar--student {
        border-color: CanvasText;
        forced-color-adjust: none;
    }

    .ll-role-avatar__initials {
        color: CanvasText;
    }
}

/* —— Titlebar host (main app) —— */

.titlebar-avatar-button.ll-role-accent--instructor,
.titlebar-avatar-button.ll-role-accent--student {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.titlebar-avatar-button.ll-role-accent--instructor .titlebar-avatar-button__fallback,
.titlebar-avatar-button.ll-role-accent--student .titlebar-avatar-button__fallback {
    background: transparent;
    inset: 0;
    width: 100%;
    height: 100%;
}

.titlebar-avatar-button.ll-role-accent--instructor .titlebar-avatar-button__fallback--initials {
    background: var(--ll-role-instructor-tint);
    color: var(--ll-role-instructor-ink);
    font-weight: 700;
    border: 2px solid var(--ll-role-instructor-primary);
    box-sizing: border-box;
}

.titlebar-avatar-button.ll-role-accent--student .titlebar-avatar-button__fallback--initials {
    background: var(--ll-role-student-tint);
    color: var(--ll-role-student-ink);
    font-weight: 600;
    border: 1px solid var(--ll-role-student-primary-strong);
    box-sizing: border-box;
}

.titlebar-avatar-button.ll-role-accent--instructor .titlebar-avatar-button__image,
.titlebar-avatar-button.ll-role-accent--student .titlebar-avatar-button__image {
    background: transparent;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* —— Hub titlebar host —— */

.hub-avatar-button.ll-role-accent--instructor,
.hub-avatar-button.ll-role-accent--student {
    background: var(--ll-role-instructor-tint);
    border-style: solid;
}

.hub-avatar-button.ll-role-accent--instructor {
    border-width: 2px;
    border-color: var(--ll-role-instructor-primary);
}

.hub-avatar-button.ll-role-accent--student {
    border-width: 1px;
    border-color: var(--ll-role-student-primary-strong);
    background: var(--ll-role-student-tint);
}

.hub-avatar-button.ll-role-accent--instructor .hub-avatar-button__fallback,
.hub-avatar-button.ll-role-accent--student .hub-avatar-button__fallback {
    background: transparent;
    color: var(--ll-role-instructor-ink);
}

.hub-avatar-button.ll-role-accent--student .hub-avatar-button__fallback {
    color: var(--ll-role-student-ink);
}

.hub-avatar-button.ll-role-accent--instructor .hub-avatar-button__fallback--initials,
.hub-avatar-button.ll-role-accent--student .hub-avatar-button__fallback--initials {
    font-weight: 700;
}

.hub-avatar-button.ll-role-accent--student .hub-avatar-button__fallback--initials {
    font-weight: 600;
}

.hub-avatar-button.ll-role-accent--instructor .hub-avatar-button__image,
.hub-avatar-button.ll-role-accent--student .hub-avatar-button__image {
    background: transparent;
}

/* —— Directory / list rows —— */

.contact-row-avatar {
    align-self: flex-start;
    margin-top: 2px;
}

.contact-row-avatar .ll-role-avatar {
    --ll-role-avatar-size: 48px;
    border-width: 2px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.46);
}

.contact-row-avatar .ll-role-avatar__initials {
    font-size: 1rem;
}

.contact-row.contact-row--with-avatar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.contact-row.contact-row--with-avatar .contact-row-copy {
    min-width: 0;
}

.contact-row.contact-row--with-avatar.contact-row--directory-stack {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
}

.contact-row--directory-stack .contact-row-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.contact-row--directory-stack .contact-row-actions {
    align-self: flex-end;
    margin-top: 2px;
}

.contact-row--directory-stack .contact-row-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.contact-row.contact-row--with-avatar.contact-row--directory-stack.contact-row--compact {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    min-height: 48px;
}

.contact-row--compact .contact-row-avatar {
    align-self: center;
    margin-top: 0;
    transform: none;
}

.contact-row--compact .contact-row-avatar .ll-role-avatar {
    --ll-role-avatar-size: 36px;
    box-shadow: none;
}

.contact-row--compact .contact-row-avatar .ll-role-avatar__initials {
    font-size: 0.76rem;
}

.contact-row--directory-stack.contact-row--compact .contact-row-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
}

.contact-row--directory-stack.contact-row--compact .contact-row-name {
    grid-column: 1;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    font-size: 0.94rem;
    line-height: 1.12;
}

.contact-row--directory-stack.contact-row--compact .contact-row-actions {
    grid-column: 2;
    justify-self: end;
    align-self: center;
    margin-top: 0;
}

@media (max-width: 380px) {
    .contact-row--directory-stack.contact-row--compact .contact-row-main {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .contact-row--directory-stack.contact-row--compact .contact-row-name {
        font-size: 0.9rem;
    }
}

/* —— Today chat —— */

.today-chat-conversation.today-chat-conversation--with-avatar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    text-align: left;
}

.today-chat-conversation-avatar {
    align-self: center;
}

.today-chat-conversation-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.today-chat-message-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
}

.today-chat-message-avatar {
    margin-top: 2px;
}

.today-chat-message.is-current-user .today-chat-message-row {
    direction: rtl;
}

.today-chat-message.is-current-user .today-chat-message-row > * {
    direction: ltr;
}

/* Modern Golf Tech role accents */
:root,
[data-theme="dark"] {
    --ll-role-instructor-primary: var(--primary, #2D7A3B);
    --ll-role-instructor-tint: rgba(63, 168, 90, 0.16);
    --ll-role-instructor-ink: var(--text-primary, #e6edf3);

    --ll-role-student-primary: var(--accent, #f4c542);
    --ll-role-student-primary-strong: var(--accent, #f4c542);
    --ll-role-student-tint: rgba(244, 197, 66, 0.14);
    --ll-role-student-ink: var(--text-primary, #e6edf3);
}

[data-theme="light"] {
    --ll-role-instructor-primary: #2d7a3b;
    --ll-role-instructor-tint: #e6f2ea;
    --ll-role-instructor-ink: #1a4d25;

    --ll-role-student-primary: #d6b25e;
    --ll-role-student-primary-strong: #c49a2c;
    --ll-role-student-tint: #f8f1dc;
    --ll-role-student-ink: #6b5420;
}

.ll-role-avatar,
.ll-role-avatar--instructor,
.ll-role-avatar--student,
.hub-avatar-button.ll-role-accent--instructor,
.hub-avatar-button.ll-role-accent--student {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.ll-profile-photo-preview {
    cursor: zoom-in;
}

.ll-profile-photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.ll-profile-photo-lightbox-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.78);
    cursor: pointer;
}

.ll-profile-photo-lightbox-inner {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1100px);
    max-height: min(92vh, 900px);
}

.ll-profile-photo-lightbox-figure {
    margin: 0;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.ll-profile-photo-lightbox-image {
    display: block;
    max-width: min(96vw, 1100px);
    max-height: min(84vh, 820px);
    width: auto;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    object-fit: contain;
}

.ll-profile-photo-lightbox-caption {
    margin: 0;
    max-width: min(96vw, 720px);
    color: #f8fafc;
    font-size: var(--ll-type-body-sm-size, 0.875rem);
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
}

.ll-profile-photo-lightbox-close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.88);
    color: #fff;
    font-size: var(--ll-type-heading-size, 1.125rem);
    cursor: pointer;
}

.ll-profile-photo-lightbox-close:hover,
.ll-profile-photo-lightbox-close:focus-visible {
    background: rgba(15, 23, 42, 0.96);
}