:root {
    --color-bg: #d7e3ef;
    --color-surface: #ffffff;
    --color-inset: #eef3f8;
    --color-ink: #12202c;
    --color-muted: #3a5163;
    --color-ocean: #0a3d6b;
    --color-ocean-hover: #083256;
    --color-sky: #0067b8;
    --color-sky-hover: #00539a;
    --color-sky-wash: #cfe4f6;
    --color-border: #8fa9c0;
    --color-on-accent: #ffffff;
    --color-danger: #c42b1c;
    --color-danger-wash: #fde8e5;
    --color-success: #0f6b3d;
    --color-success-wash: #d8f0e3;
    --color-amber: #8a4b0f;
    --color-amber-wash: #f6ead4;
    --tap-min: 44px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: "Segoe UI", system-ui, sans-serif;
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--color-ocean);
}

/* Route focus announces the new page without drawing a box around its title. */
h1:focus {
    outline: none;
}

/* Fluent UI injects a body reset after startup. Pages use document scrolling;
   the more specific editor rule below still locks the background for dialogs. */
html body {
    height: auto;
    overflow-y: auto;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.test-mode-banner {
    background: repeating-linear-gradient(
        -45deg,
        #ffcc00,
        #ffcc00 14px,
        #1a1a1a 14px,
        #1a1a1a 28px
    );
    padding: 0.55rem 0.75rem;
}

.test-mode-banner p {
    margin: 0 auto;
    max-width: 46rem;
    background: #fff8dc;
    color: #1a1200;
    border: 3px solid #1a1a1a;
    border-radius: 0.35rem;
    padding: 0.6rem 0.85rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: -3rem;
    background: var(--color-sky);
    color: #fff;
    padding: 0.5rem 0.75rem;
    z-index: 10;
    text-decoration: none;
}

.skip-link:focus {
    top: 0.75rem;
    color: #fff;
}

.app-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    padding: 0.4rem 0.85rem;
    background: var(--color-ocean);
    color: var(--color-on-accent);
}

.brand a,
.brand a:visited {
    color: var(--color-on-accent);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.brand-logo {
    height: 2rem;
    width: 2rem;
    border-radius: 0.45rem;
    object-fit: contain;
    flex-shrink: 0;
}

.brand a:hover,
.brand a:focus {
    color: #b4d6fa;
    text-decoration: none;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    gap: 0.1rem;
    align-items: center;
    justify-content: flex-end;
}

.nav-links a,
.nav-links a:visited {
    color: #d7e6f4;
    text-decoration: none;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.45rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active {
    color: #fff;
    text-decoration: none;
}

.nav-links a.active,
.nav-links a[aria-current="page"] {
    background: var(--color-sky);
    border-radius: 0.35rem;
}

.nav-links a.nav-signup,
.nav-links a.nav-signup:visited {
    background: var(--color-sky);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    margin-left: 0.2rem;
    padding: 0 0.9rem;
}

.nav-links a.nav-signup:hover,
.nav-links a.nav-signup:focus,
.nav-links a.nav-signup.active {
    background: var(--color-sky-hover);
    color: #fff;
}

.nav-user {
    color: #d7e6f4;
    min-height: 2.25rem;
    max-width: 9.5rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.45rem;
    font-size: 0.8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tenant-switch {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.2rem;
}

.tenant-switch select,
.tenant-switch button {
    min-height: 2.25rem;
    border-radius: 0.35rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
}

.tenant-switch select {
    max-width: 8.5rem;
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-ink);
    padding: 0 0.4rem;
}

.tenant-switch button {
    border: 1px solid transparent;
    background: transparent;
    color: #d7e6f4;
    padding: 0 0.5rem;
    cursor: pointer;
}

.tenant-switch button:hover,
.tenant-switch button:focus {
    color: #fff;
}

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

.nav-settings-label {
    font: inherit;
}

.app-icon {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    color: currentColor;
}

.app-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.app-tabs,
.settings-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin: 0 0 1.15rem;
    border-bottom: 1px solid var(--color-border);
}

.app-tab,
.settings-nav a {
    appearance: none;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    min-height: 2.25rem;
    padding: 0 0.75rem;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.app-tab .app-icon,
.settings-nav a .app-icon {
    width: 0.95rem;
    height: 0.95rem;
}

.app-tab:hover,
.app-tab:focus,
.settings-nav a:hover,
.settings-nav a:focus {
    color: var(--color-ocean);
    text-decoration: none;
}

.app-tab.on,
.app-tab[aria-current="page"],
.settings-nav a.active,
.settings-nav a[aria-current="page"] {
    color: var(--color-ocean);
    border-bottom-color: var(--color-sky);
}

.app-tab:focus-visible,
.settings-nav a:focus-visible,
.section-toolbar a:focus-visible {
    outline: 2px solid var(--color-sky);
    outline-offset: 2px;
}

.section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0 0 1rem;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid var(--color-border);
}

.section-toolbar a,
.section-toolbar a:visited {
    color: var(--color-ocean);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.section-toolbar a:hover,
.section-toolbar a:focus,
.section-toolbar a.on,
.section-toolbar a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.nav-sign-out {
    min-height: 2.25rem;
    border: 0;
    background: transparent;
    color: #d7e6f4;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0 0.45rem;
    cursor: pointer;
}

.nav-sign-out:hover,
.nav-sign-out:focus {
    color: #fff;
}

.app-main {
    flex: 1;
    width: min(56rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.app-main.auth-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: min(20.5rem, calc(100% - 2rem));
    padding-top: 1.5rem;
}

.app-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem 0.85rem;
    border-top: 1px solid rgba(10, 61, 107, 0.12);
    color: var(--color-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: center;
}

.app-footer p {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
}

.app-footer-brand, .app-footer-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.app-footer-links a { padding: 0.45rem 0.2rem; color: var(--color-ocean); }
.legal-signup-notice { font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); margin: 1rem 0; }

.app-footer-mark {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.28rem;
    object-fit: contain;
    flex-shrink: 0;
}

.app-shell-embed .app-header,
.app-shell-embed .nav-links,
.app-shell-embed .app-footer {
    display: none;
}

html:has(.app-shell-embed),
html:has(.app-shell-embed) body,
.app-shell-embed {
    min-height: 0;
    height: auto;
}

.app-shell-embed .app-main {
    width: 100%;
    margin: 0;
    padding: 0;
    flex: none;
}

.app-shell-embed .embed-sheet-body {
    margin-bottom: 0;
}

.embed-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #3d6f91;
    color: #fff;
}

.embed-sheet-head h1 {
    margin: 0;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.embed-sheet-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.embed-sheet-body {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 1.1rem 1.25rem;
}

.quick-auth h2 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 0.35rem;
}

.quick-auth .login-lede {
    margin-bottom: 0.9rem;
}

.quick-auth .oauth-stack,
.quick-auth .login-password,
.quick-auth > form,
.quick-auth .login-footer {
    width: min(100%, 22rem);
    margin-inline: auto;
}

.quick-auth .oauth-stack .btn,
.quick-auth .login-password .btn {
    width: 100%;
}

.quick-auth-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.2rem 0 0.85rem;
}

.quick-auth-actions .btn {
    border-radius: 999px;
    min-width: 7rem;
}

.auth-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.auth-logo {
    width: min(13rem, 88%);
    height: auto;
    display: block;
    margin: 0 auto 0.25rem;
    border-radius: 0.5rem;
}

.login-card {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.5rem 1.35rem 1.75rem;
    box-shadow: 0 16px 36px rgba(10, 61, 107, 0.08);
}

.login-card h1 {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    line-height: 1.2;
    margin: 0.15rem 0 0.5rem;
}

.login-lede,
.login-message {
    color: var(--color-muted);
    margin: 0 0 1.15rem;
}

.login-message {
    background: var(--color-sky-wash);
    color: var(--color-ocean);
    border-radius: 0.5rem;
    padding: 0.7rem 0.8rem;
}

.login-message[role="alert"] {
    background: var(--color-danger-wash);
    color: var(--color-danger);
}

.login-message[role="status"] {
    background: var(--color-success-wash);
    color: var(--color-success);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-sky);
    margin: 0;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.field[hidden] {
    display: none !important;
}

.field-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.field-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.field-label-row label {
    margin: 0;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field select,
.field textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--tap-min);
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    padding: 0.45rem 0.7rem;
    background: #fff;
    color: var(--color-ink);
    font: inherit;
    font-size: 1rem;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus {
    outline: 2px solid var(--color-sky);
    outline-offset: 1px;
    border-color: var(--color-sky);
}

.field.measure-text,
.class-add-list.measure-text,
.field-hint.measure-text {
    max-width: 28rem;
}

.field input.measure-amount:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field input.measure-amount:not([type="checkbox"]):not([type="radio"]):not([type="color"]):hover,
.field input.measure-amount:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
.field input.measure-date:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field input.measure-date:not([type="checkbox"]):not([type="radio"]):not([type="color"]):hover,
.field input.measure-date:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus {
    width: 8.5rem;
    max-width: 100%;
}

.field input.measure-date:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.field input.measure-date:not([type="checkbox"]):not([type="radio"]):not([type="color"]):hover,
.field input.measure-date:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus {
    width: 11.5rem;
}

.field select.measure-choice,
.field select.measure-choice:hover,
.field select.measure-choice:focus {
    width: 12rem;
    max-width: 100%;
}

.validation-message {
    color: var(--color-danger);
    font-size: 0.85rem;
}

.btn {
    min-height: var(--tap-min);
    min-width: 7.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
    padding: 0 0.9rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.login-card .btn,
.auth-stack .btn {
    width: 100%;
}

.btn-primary,
.btn-primary:visited {
    background: var(--color-sky);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-sky-hover);
    color: #fff;
}

.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-oauth,
.btn-oauth:visited {
    background: #fff;
    color: var(--color-ink);
    border-color: var(--color-border);
}

.btn-oauth:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.oauth-stack {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.oauth-mark {
    width: 1.15rem;
    height: 1.15rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.15rem 0 0.9rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.login-password {
    margin: 0.2rem 0 0;
}

.login-password > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--tap-min);
    list-style: none;
    cursor: pointer;
    color: var(--color-sky);
    font-size: 0.9rem;
    font-weight: 600;
}

.login-password > summary::-webkit-details-marker,
.login-password > summary::marker {
    content: none;
    display: none;
}

.login-password > summary::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    flex-shrink: 0;
}

.login-password[open] > summary {
    margin-bottom: 0.85rem;
}

.login-password[open] > summary::after {
    transform: translateY(0.12rem) rotate(225deg);
}

.login-password-extra {
    margin: 0.75rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
}

.studio-header-open,
.studio-header-static {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--tap-min);
    margin: 0 0 0.85rem;
    text-decoration: none;
    color: inherit;
}

.studio-header-open::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.2rem;
    border-right: 2px solid var(--color-ocean);
    border-bottom: 2px solid var(--color-ocean);
    transform: translateY(-0.12rem) rotate(45deg);
    flex-shrink: 0;
}

.studio-header-open:focus-visible {
    outline: 2px solid var(--color-sky);
    outline-offset: 3px;
    border-radius: 0.35rem;
}

.studio-header-photo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface, #e8eef4);
}

.profile-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0 0 0.85rem;
}

.profile-identity-main {
    flex: 1;
    min-width: 0;
}

.profile-identity .settings-value {
    margin: 0.15rem 0 0.35rem;
}

.studio-header-open .studio-header-photo,
.studio-header-static .studio-header-photo {
    width: 2.75rem;
    height: 2.75rem;
}

.studio-header-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.studio-header-title {
    color: var(--color-ocean);
    font-weight: 700;
    line-height: 1.25;
}

.studio-header-place {
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.3;
}


.studio-about-photo {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    margin: 0.35rem auto 0.9rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-inset);
}

.studio-about-panel h2,
.studio-about-studio,
.studio-about-place,
.studio-about-link {
    text-align: center;
}

.studio-about-studio,
.studio-about-place {
    margin: 0.15rem 0 0;
    color: var(--color-muted);
}

.studio-about-bio {
    margin: 1rem 0 0;
    white-space: pre-wrap;
    color: var(--color-ink);
}

.studio-about-section {
    margin: 1.15rem 0 0;
    padding-top: 0.95rem;
    border-top: 1px solid var(--color-border);
    text-align: left;
}

.studio-about-section h3 {
    margin: 0 0 0.7rem;
    font-size: 1.05rem;
}

.studio-about-classes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-about-teacher-photo {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.studio-about-classes li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.7rem;
}

.studio-about-locations {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: studio-location;
}

.studio-about-locations li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 0.85rem;
    counter-increment: studio-location;
}

.studio-about-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.45rem;
    background: var(--color-inset);
    color: var(--color-ocean);
    flex-shrink: 0;
}

.studio-about-mark .app-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.studio-about-location-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.studio-about-location-name {
    font-weight: 600;
    line-height: 1.3;
}

.studio-about-locations .studio-about-location-name::before {
    content: counter(studio-location) ". ";
    font-weight: 700;
}

.studio-about-location-detail,
.studio-about-location-kind {
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.35;
}

.studio-about-location-kind {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-card .studio-header-bio {
    margin: 0 0 0.45rem;
    white-space: pre-wrap;
    max-width: 40rem;
}

.home-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2rem);
    line-height: 1.2;
    margin: 0.2rem 0 0.5rem;
}

.home-hero p {
    color: var(--color-muted);
    margin: 0 0 1.25rem;
}

.home-hero .eyebrow {
    margin: 0;
}

.home-hero-facts {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1.15rem;
}

.home-hero .home-hero-facts p {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.35;
}

.home-hero-facts .app-icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.12rem;
    color: var(--color-sky);
}

.home-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

.home-tile {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem 1.1rem;
    min-height: 5.5rem;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(10, 61, 107, 0.06);
}

.home-tile:hover,
.home-tile:focus {
    border-color: var(--color-sky);
    color: inherit;
    text-decoration: none;
}

.home-tile span {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-sky);
}

.home-tile strong {
    display: block;
    margin: 0.25rem 0 0.35rem;
    color: var(--color-ocean);
}

.home-tile p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.overview-cards {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}

.overview-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(10, 61, 107, 0.08);
}

a.overview-card:hover,
a.overview-card:focus {
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 32px rgba(10, 61, 107, 0.16);
}

.overview-band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.05rem;
    background: var(--color-sky);
    color: var(--color-on-accent);
}

.overview-card-payments .overview-band {
    background: var(--color-success);
}

.overview-card-attendance .overview-band {
    background: var(--color-amber);
}

.overview-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.18);
    flex-shrink: 0;
}

.overview-mark .app-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.overview-band h2 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-on-accent);
}

.overview-card .overview-kicker {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-sky);
}

.overview-card-payments .overview-kicker {
    color: var(--color-success);
}

.overview-card-attendance .overview-kicker {
    color: var(--color-amber);
}

.overview-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    padding: 1rem 1.05rem 1.15rem;
}

.overview-card .overview-figure {
    margin: 0;
    max-width: 100%;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-sky);
}

.overview-card-payments .overview-figure {
    color: var(--color-success);
}

.overview-card-attendance .overview-figure {
    font-size: 1.35rem;
    letter-spacing: 0;
    color: var(--color-amber);
}

.overview-card p {
    margin: 0;
    color: var(--color-muted);
}

.overview-card .overview-rate {
    font-weight: 700;
    color: var(--color-amber);
}

.overview-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
}

.overview-split p {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 0.6rem;
    border-radius: 0.55rem;
    background: var(--color-success-wash);
}

.overview-split a {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-height: var(--tap-min);
    color: inherit;
    text-decoration: none;
}

.overview-split a:hover,
.overview-split a:focus {
    text-decoration: underline;
}

.overview-split span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-success);
}

.overview-split p.is-wide {
    grid-column: 1 / -1;
}

.overview-split strong {
    color: var(--color-ink);
    font-size: 0.95rem;
}

.overview-card .overview-compare,
.overview-card .overview-compare-up,
.overview-card .overview-compare-down {
    margin-top: 0.15rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}

.overview-card .overview-compare {
    background: var(--color-inset);
    color: var(--color-muted);
}

.overview-card .overview-compare-up {
    background: var(--color-success-wash);
    color: var(--color-success);
}

.overview-card .overview-compare-down {
    background: var(--color-danger-wash);
    color: var(--color-danger);
}

.overview-card .overview-cue {
    margin-top: 0.15rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.55rem;
    background: var(--color-amber-wash);
    color: var(--color-amber);
    font-weight: 700;
}

@media (min-width: 48rem) {
    .overview-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.app-main:has(.landing-page) {
    width: min(70rem, calc(100% - 2rem));
}

.landing-hero {
    display: grid;
    gap: 1.25rem 2.25rem;
    align-items: center;
}

.landing-hero h1 {
    font-size: clamp(1.85rem, 4vw, 2.35rem);
    max-width: none;
}

.landing-hero-break {
    display: block;
}

.landing-hero-copy > p {
    max-width: 38rem;
}

.home-hero .landing-offer {
    margin: 0 0 1rem;
    color: var(--color-ocean);
    font-weight: 650;
}

.landing-wordmark {
    display: none;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    margin: 0.15rem 0 0;
}

.landing-cta .btn {
    width: auto;
}

.btn-signup,
.btn-signup:visited {
    border-radius: 999px;
    padding-inline: 1.25rem;
}

.landing-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: 1.25rem 2rem;
    margin: 1.75rem 0 0;
}

.landing-overview h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
}

.landing-overview p,
.plan-card-audience {
    color: var(--color-muted);
    line-height: 1.6;
}

.plan-card-audience {
    margin: 0.5rem 0;
    font-size: 0.85rem;
    min-height: 3.2em;
}

.plan-card-audience span {
    display: block;
}

.landing-overview p {
    margin: 0;
}

.landing-overview .eyebrow {
    margin-bottom: 0.4rem;
}

.landing-multiple {
    grid-column: 1 / -1;
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}

.landing-facts {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
}

.landing-facts .home-tile {
    min-height: 0;
}

.landing-facts .home-tile:hover,
.landing-facts .home-tile:focus {
    border-color: var(--color-border);
}

.landing-how {
    margin: 1.75rem 0 0;
}

.landing-how h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

.landing-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem;
    counter-reset: landing-step;
}

.landing-steps li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--color-muted);
    counter-increment: landing-step;
}

.landing-steps li::before {
    content: counter(landing-step);
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--color-sky-wash);
    color: var(--color-ocean);
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.landing-steps strong {
    display: block;
    color: var(--color-ocean);
}

.landing-steps div {
    min-width: 0;
}

/* Go somewhere: <a class="text-link">. Commit on this page: <button class="btn">. Empty-state CTA may be <a class="btn">. Cancel next to Save is <a class="btn btn-secondary">. A POST in a link row uses <button class="text-link-button">. */
.text-link,
.text-link:visited {
    color: var(--color-sky);
    font-weight: 600;
    text-decoration: none;
}

.text-link:hover,
.text-link:focus {
    color: var(--color-sky-hover);
}

.login-footer {
    margin: 1rem 0 0;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.page-links,
.settings-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0;
    margin: 1rem 0 0;
}

.settings-links {
    margin: 0;
}

.invite-share-link {
    overflow-wrap: anywhere;
}

.page-links-sep {
    width: 0.25rem;
    height: 0.25rem;
    margin: 0 0.65rem;
    border-radius: 50%;
    background: var(--color-muted);
    flex-shrink: 0;
}

.home-auth-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0;
}

.home-auth-links form {
    display: inline;
    margin: 0;
}

.settings-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1.1rem 1.15rem 1.2rem;
    box-shadow: 0 8px 20px rgba(10, 61, 107, 0.06);
    margin: 0 0 1.25rem;
}

#plan,
#pay-pack {
    scroll-margin-top: 0.75rem;
}

#plan:focus,
#pay-pack:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 2px rgba(0, 103, 184, 0.28), 0 8px 20px rgba(10, 61, 107, 0.06);
}

.settings-card-confirm {
    border: 2px solid var(--color-ocean);
    box-shadow: 0 0 0 3px rgba(10, 61, 107, 0.12);
}

.settings-card-confirm:focus {
    outline: none;
}

.settings-card h2 {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.settings-fold-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
    cursor: pointer;
    min-height: var(--tap-min);
    margin: -0.15rem 0 0;
}

.settings-fold-summary::-webkit-details-marker,
.settings-fold-summary::marker {
    display: none;
}

.settings-fold-summary .settings-heading {
    margin: 0;
}

.settings-fold[open] > .settings-fold-summary {
    margin-bottom: 0.75rem;
}

.settings-fold-summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid var(--color-ocean);
    border-bottom: 2px solid var(--color-ocean);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.settings-fold[open] > .settings-fold-summary::after {
    transform: rotate(225deg);
    margin-top: 0.15rem;
}

.settings-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-heading .app-icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--color-sky);
}

.settings-card h3 {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
}

.settings-signin-form {
    margin: 0 0 0.75rem;
}

.settings-signin-form + .settings-links {
    margin: 0 0 0.75rem;
}

.settings-card p {
    color: var(--color-muted);
    margin: 0 0 0.4rem;
}

.settings-value {
    color: var(--color-ink);
    font-weight: 600;
    margin: 0;
}

.settings-facts {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0 0 0.65rem;
}

.settings-facts p {
    margin: 0;
}

.settings-plan-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
}

.settings-plan-row .settings-value {
    margin: 0;
}

.settings-plan-sep {
    color: var(--color-muted);
    font-weight: 400;
}

.widget-theme-preview-label {
    margin: 0 0 0.4rem;
    color: var(--color-ocean);
    font-weight: 700;
}

.widget-theme-preview {
    --bar: var(--color-ocean);
    --background: var(--color-bg);
    --button: var(--color-sky);
    container-type: inline-size;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.8rem 0.85rem;
    margin: 0 0 1rem;
    background: var(--background);
}

.widget-theme-preview-name {
    margin: 0;
    color: var(--bar);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.widget-theme-preview-place {
    margin: 0.15rem 0 0.45rem;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.widget-theme-preview-name:not([hidden]) + .widget-theme-preview-tabs,
.widget-theme-preview-place:not([hidden]) + .widget-theme-preview-tabs {
    margin-top: 0.45rem;
}

.widget-theme-preview-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: .35rem .4rem;
    border-radius: .55rem;
    background: var(--bar);
    margin: 0 0 0.75rem;
    color: var(--tab-foreground, #fff);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}

.widget-theme-preview-tabs > span {
    padding: .4rem .5rem;
    border-bottom: 3px solid transparent;
}

.widget-theme-preview-tabs .on {
    font-weight: 750;
    border-bottom-color: var(--tab-foreground, #fff);
    background: color-mix(in srgb, var(--tab-highlight, #000) 12%, transparent);
}

.widget-theme-preview-day {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.55rem;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.widget-theme-preview-day::before,
.widget-theme-preview-day::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.widget-theme-preview-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    align-items: end;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.8rem 0.95rem;
}

.widget-theme-preview-time,
.widget-theme-preview-class {
    grid-column: 1 / -1;
    margin: 0;
}

.widget-theme-preview-time,
.widget-theme-preview-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.widget-theme-preview-time {
    font-size: 0.85rem;
    font-weight: 600;
}

.widget-theme-preview-time .app-icon,
.widget-theme-preview-fact .app-icon {
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.12rem;
    color: var(--button);
    flex: 0 0 auto;
}

.widget-theme-preview-class {
    color: var(--bar);
    font-size: 1.05rem;
    font-weight: 700;
}

.widget-theme-preview-facts {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    grid-column: 1;
    align-self: end;
}

.widget-theme-preview-actions {
    display: contents;
}

.widget-theme-preview-price {
    grid-column: 2;
    align-self: end;
    margin: 0;
    color: var(--bar);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.widget-theme-preview-cta {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 0.35rem;
    color: #fff;
    background: var(--button);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    min-height: 1.75rem;
    padding: 0 0.55rem;
    border-radius: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@container (min-width: 40rem) {
    .widget-theme-preview-card {
        grid-template-areas:
            "time cta"
            "name cta"
            "facts cta";
        column-gap: 1rem;
        align-items: start;
    }

    .widget-theme-preview-time {
        grid-area: time;
        grid-column: auto;
    }

    .widget-theme-preview-class {
        grid-area: name;
        grid-column: auto;
    }

    .widget-theme-preview-facts {
        grid-area: facts;
        grid-column: auto;
    }

    .widget-theme-preview-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 0.2rem;
        grid-area: cta;
        align-self: end;
    }

    .widget-theme-preview-price,
    .widget-theme-preview-cta {
        grid-column: auto;
        width: auto;
        margin-top: 0;
    }

    .widget-theme-preview-cta {
        min-width: 4.6rem;
    }
}

.widget-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.9rem;
    margin: 0 0 0.35rem;
}

.widget-theme-row {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin: 0 0.5rem 0.5rem 0;
    min-width: 0;
    width: calc((100% - 1.2rem) / 3);
    vertical-align: top;
}

.widget-theme-grid .widget-theme-row {
    width: auto;
    margin: 0;
}

.widget-theme-row input[type="color"] {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    min-height: var(--tap-min);
    padding: 0.15rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: repeating-conic-gradient(var(--color-border) 0% 25%, #fff 0% 50%) 50% / 8px 8px;
    cursor: pointer;
}

.widget-theme-row label {
    display: block;
    margin: 0;
    color: var(--color-ocean);
    font-weight: 700;
}

.widget-theme-row .field-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.35;
}

.waiver-copy {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 14rem;
    overflow: auto;
    padding: 0.75rem 0.85rem;
    margin: 0 0 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-inset);
    color: var(--color-ink);
}

.class-roster {
    margin-top: 1rem;
}

.class-roster-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.class-roster-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.class-roster-list li:has(.class-remove-confirm) {
    flex-wrap: wrap;
    align-items: flex-start;
}

.class-remove-confirm {
    flex: 1 1 100%;
    min-height: 0;
    overflow: visible;
}

.class-remove-confirm > p {
    margin: 0 0 0.65rem;
}

.class-remove-confirm .settings-actions {
    margin-top: 0;
}

.class-roster-list form {
    margin: 0;
    flex: 1;
}

.class-roster-list label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--tap-min);
}

.class-roster-name {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
}

.class-zoom-mark {
    display: inline-flex;
    align-items: center;
    color: var(--color-sky);
}

.class-zoom-mark .app-icon {
    width: 0.95rem;
    height: 0.95rem;
}

.class-zoom-mark.is-unmatched {
    color: var(--color-muted);
    opacity: 0.7;
}

.class-roster-list input[type="checkbox"] {
    margin: 0;
    width: auto;
}

.class-save-attendance {
    margin: 0.85rem 0 0.4rem;
}

.class-save-attendance .btn {
    margin: 0;
    width: 100%;
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: stretch;
    margin-top: 0.65rem;
}

.settings-actions .text-link {
    align-self: center;
}

.settings-actions form {
    display: flex;
    margin: 0;
}

.settings-actions .btn {
    width: auto;
    margin-top: 0;
}

.plan-choice {
    align-items: center;
    gap: 0.45rem;
}

.plan-choice select {
    min-height: var(--tap-min);
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    padding: 0.35rem 0.6rem;
    background: #fff;
    color: var(--color-ink);
    font: inherit;
}

.plan-change .btn {
    white-space: normal;
    height: auto;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    text-align: center;
}

.btn-secondary,
.btn-secondary:visited {
    background: #fff;
    color: var(--color-ocean);
    border-color: var(--color-border);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--color-sky-wash);
    color: var(--color-ocean);
}

.btn-danger,
.btn-danger:visited {
    background: var(--color-danger);
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #a52316;
    color: #fff;
}

/* Action buttons show press feedback; toggles retain their selected state. */
.btn:not(:disabled):active {
    filter: brightness(0.85);
}

.btn[aria-pressed="true"],
.btn[aria-selected="true"] {
    background: var(--color-ocean);
    border-color: var(--color-ocean);
    color: var(--color-on-accent);
}

.integration-list,
.sign-in-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}

.integration-item,
.sign-in-method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    min-height: var(--tap-min);
    padding: 0.65rem 0;
    border-top: 1px solid var(--color-border);
}

.integration-item:first-child,
.sign-in-method:first-child {
    border-top: 0;
    padding-top: 0;
}

.integration-item strong,
.sign-in-method strong {
    display: block;
    color: var(--color-ocean);
}

.integration-item span,
.sign-in-method span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.integration-item > .field-hint {
    flex-basis: 100%;
}

.integration-item .business-plan-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
}

.integration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.text-link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-sky);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.text-link-button:hover,
.text-link-button:focus {
    color: var(--color-sky-hover);
}

.people-roster-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    margin: 0 0 0.75rem;
}

.people-roster-head h2 {
    margin: 0;
}

.people-roster-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
}

.bookings-list-tools {
    margin: 0 0 0.85rem;
}

.people-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.35rem;
}

.people-toolbar .btn,
.people-toolbar form {
    width: auto;
    margin: 0;
}

.people-invite-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
    margin: 0 0 0.85rem;
}

.people-invite-form .field {
    min-width: 0;
    margin: 0;
}

.people-invite-form .field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.people-invite-form .field input[type="email"]:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.people-invite-form .field select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.people-invite-name {
    grid-column: 1 / -1;
}

.people-invite-form .btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    align-self: stretch;
}

.people-roster-search {
    margin: 0.35rem 0 0.75rem;
}

.people-pulse {
    margin: 0 0 0.85rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: var(--color-surface);
}

.people-pulse-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.people-pulse-head h2 {
    margin: 0;
}

.people-pulse-grid {
    display: grid;
    gap: 0.9rem;
}

.people-pulse-grid h3 {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ocean);
}

.people-pulse-grid p,
.people-pulse-list {
    margin: 0;
}

.people-pulse-list {
    padding: 0;
    list-style: none;
}

.people-pulse-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.45rem;
    margin: 0.2rem 0;
}

.people-pulse-list a {
    font-weight: 700;
}

.people-pulse-list span,
.people-labels {
    color: var(--color-muted);
}

.people-tag-filters,
.people-audience-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0 0 0.75rem;
}

.people-tag-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    padding: 0.2rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ocean);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.people-tag-chip.is-on,
.people-tag-chip:hover,
.people-tag-chip:focus {
    background: var(--color-sky-wash);
    border-color: transparent;
    color: var(--color-ocean);
    text-decoration: none;
}

.people-filter-clear {
    margin: -0.35rem 0 0.75rem;
}

.people-labels {
    grid-column: 1 / -1;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.people-labels a {
    font-weight: 700;
    color: var(--color-ocean);
    text-decoration: none;
}

.people-identity:has(.staff-facts) {
    align-items: center;
    row-gap: 0.35rem;
}

.people-identity:has(.staff-facts) .people-who {
    grid-column: 1;
    grid-row: 1;
}

.people-identity:has(.staff-facts) .people-chip-role {
    grid-row: 1;
    align-self: center;
}

.people-identity:has(.staff-facts) .people-chip-status {
    grid-row: 1;
    align-self: center;
}

.staff-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
}

a.staff-fact {
    display: inline-flex;
    color: inherit;
    text-decoration: none;
}

a.staff-fact:hover,
a.staff-fact:focus {
    text-decoration: none;
}

.staff-facts fluent-badge::part(control) {
    padding: 0.2rem 0.7rem;
    font-weight: 700;
}

.staff-facts fluent-badge.lightweight::part(control) {
    background: var(--color-sky-wash);
    color: var(--color-ocean);
}

.staff-facts fluent-badge.accent::part(control) {
    background: var(--color-ocean);
    color: #fff;
}

.staff-facts fluent-badge.neutral::part(control) {
    background: var(--color-inset);
    color: var(--color-ink);
}

a.staff-fact:hover fluent-badge::part(control),
a.staff-fact:focus-visible fluent-badge::part(control) {
    background: var(--color-ocean);
    color: #fff;
}

.tag-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.tag-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 30, 50, 0.45);
}

.tag-dialog {
    position: relative;
    z-index: 1;
    width: min(28rem, 100%);
    max-height: min(32rem, calc(100dvh - 2rem));
    overflow: auto;
    padding: 1.1rem 1.15rem 1.15rem;
    border-radius: 0.9rem;
    background: var(--color-surface, #fff);
    box-shadow: 0 1rem 2.5rem rgba(10, 30, 50, 0.22);
}

.tag-dialog-close,
.tag-pill-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 999px;
    color: var(--color-ocean);
    text-decoration: none;
}

.tag-dialog-close {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
}

.tag-dialog-close:hover,
.tag-dialog-close:focus,
.tag-pill-edit-btn:hover,
.tag-pill-edit-btn:focus {
    background: #fff;
    text-decoration: none;
}

.tag-pill-edit input,
.tag-add-form input {
    flex: 1 1 10rem;
    min-width: 0;
    min-height: var(--tap-min);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    font: inherit;
}

.tag-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: var(--tap-min);
    color: var(--color-ocean);
    font-weight: 700;
    text-decoration: none;
}

.tag-new:hover,
.tag-new:focus {
    text-decoration: none;
}

.tag-new .app-icon {
    width: 1rem;
    height: 1rem;
}

.tag-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.35rem;
}

.tag-dialog-head h2 {
    margin: 0;
    color: var(--color-ocean);
}

.tag-dialog-note {
    margin: 0 0 0.85rem;
    color: var(--color-muted);
}

.tag-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    min-height: var(--tap-min);
    padding: 0.15rem 0.35rem 0.15rem 0.85rem;
    border-radius: 999px;
    background: var(--color-sky-wash);
    color: var(--color-ocean);
    font-weight: 700;
}

.tag-pill-edit,
.tag-pill-confirm,
.tag-add-form {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.tag-new {
    width: 100%;
    justify-content: center;
}

.tag-pick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}

.tag-pick label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin: 0;
    padding: 0.2rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-ocean);
    font-weight: 700;
    cursor: pointer;
}

.tag-pick input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tag-pick label:has(input:checked) {
    background: var(--color-ocean);
    border-color: transparent;
    color: #fff;
}

.people-audience {
    border: 0;
    margin: 0 0 0.85rem;
    padding: 0;
}

.people-audience legend {
    margin-bottom: 0.4rem;
    font-weight: 700;
    color: var(--color-ocean);
}

.people-audience > label,
.people-audience-tags label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--tap-min);
    margin: 0;
    font-weight: 600;
}

.people-audience input,
.people-audience-tags input {
    flex: none;
    width: auto;
    min-width: 1rem;
    margin: 0;
}

.people-tag-manage {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.people-tag-manage li {
    margin: 0.55rem 0;
}

.people-tag-rename {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.people-tag-rename input {
    flex: 1 1 10rem;
    min-width: 0;
}

@media (min-width: 40rem) {
    .landing-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .people-pulse-grid {
        grid-template-columns: auto 1fr 1fr;
        align-items: start;
    }
}

.people-roster-search input[type="search"] {
    flex: 1 1 12rem;
    min-height: var(--tap-min);
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    font: inherit;
    font-size: 1rem;
}

.people-staff-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    min-height: var(--tap-min);
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-ocean);
}

.people-roster-search input[type="checkbox"] {
    flex: none;
    width: auto;
    min-width: 1rem;
    margin: 0;
}

.table-wrap {
    overflow-x: auto;
    margin: 0 0 1rem;
}

.people-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.people-table th,
.people-table td {
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    white-space: nowrap;
}

.people-table td:has(.people-identity) {
    width: 100%;
    white-space: normal;
}

.people-table th {
    color: var(--color-ocean);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.people-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 5.25rem 6.75rem;
    align-items: center;
    column-gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.people-who {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
    overflow: hidden;
    grid-column: 1 / -1;
}

.people-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.people-name {
    color: var(--color-ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.people-chips {
    display: contents;
}

.people-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--color-inset);
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}

.people-chip-role,
.people-head-role {
    grid-column: 2;
}

.people-chip-status,
.people-head-status {
    grid-column: 3;
}

.people-head-role,
.people-head-status {
    justify-self: end;
}

.people-name {
    color: var(--color-ink);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.people-chips {
    display: contents;
}

.people-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--color-inset);
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    white-space: nowrap;
}

.people-chip.is-role-owner,
.people-chip.is-role-admin,
.people-chip.is-role-teacher {
    background: var(--color-sky-wash);
    color: var(--color-ocean);
}

.people-chip.is-status-invited {
    background: var(--color-sky-wash);
    color: var(--color-sky);
}

.people-chip.is-status-disabled {
    color: var(--color-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.masked-email > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    list-style: none;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.masked-email.is-inline {
    display: inline;
}

.masked-email.is-inline > summary {
    font-size: inherit;
    color: inherit;
}

.masked-email.is-reveal {
    display: inline-flex;
    flex-shrink: 0;
}

.masked-email.is-reveal > summary {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    padding: 0 0.15rem;
    font-size: 0.88rem;
}

.masked-email.is-reveal[open] > summary {
    gap: 0.4rem;
}

.people-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.people-table tr:has(.staff-facts) > .people-col-actions {
    vertical-align: top;
}

.tag-dialog.note-dialog {
    width: min(36rem, 100%);
}

.people-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.05rem;
}

.people-action,
.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    color: var(--color-sky);
    text-decoration: none;
    border-radius: 0.4rem;
}

.people-action:hover,
.people-action:focus,
.people-action.is-on,
.icon-action:hover,
.icon-action:focus,
.icon-action.is-on {
    color: var(--color-sky-hover);
    background: var(--color-sky-wash);
    text-decoration: none;
}

.people-action.is-muted {
    color: var(--color-amber);
}

.people-action.is-muted:hover,
.people-action.is-muted:focus {
    color: var(--color-amber);
    background: var(--color-amber-wash);
}

.people-action .app-icon,
.icon-action .app-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.masked-email > summary::-webkit-details-marker {
    display: none;
}

.masked-email-mask,
.masked-email-full {
    overflow-wrap: anywhere;
}

.masked-email-full {
    display: none;
}

.masked-email[open] .masked-email-mask {
    display: none;
}

.masked-email[open] .masked-email-full {
    display: inline;
}

.people-identity .masked-email-full {
    overflow-wrap: normal;
    white-space: nowrap;
}

.masked-email-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-sky);
}

.masked-email-toggle svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
}

.masked-email-toggle svg + svg {
    display: none;
}

.masked-email-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.2rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
    transform-origin: center;
    pointer-events: none;
}

.masked-email[open] .masked-email-toggle::after {
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(1);
}

.field-check {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
}

.field-check label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: var(--tap-min);
    font-weight: 600;
}

.field-check input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    min-height: 1.15rem;
    max-width: 1.15rem;
    padding: 0;
    margin: 0;
    flex: 0 0 1.15rem;
    accent-color: var(--color-sky);
}

.field-check input[type="checkbox"]:focus {
    outline: 2px solid var(--color-sky);
    outline-offset: 2px;
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    min-height: 1.15rem;
}

.field-check-block {
    margin: 0 0 0.85rem;
}

.field-check-block label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: var(--tap-min);
}

.field-check-block input[type="checkbox"],
.field-check-block input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    min-height: 1.15rem;
    max-width: 1.15rem;
    padding: 0;
    margin: 0.2rem 0 0;
    flex: 0 0 1.15rem;
    accent-color: var(--color-sky);
}

.field-check-block input[type="checkbox"]:focus,
.field-check-block input[type="radio"]:focus {
    outline: 2px solid var(--color-sky);
    outline-offset: 2px;
}

.field-check-copy {
    display: grid;
    gap: 0.12rem;
}

.field-check-copy strong {
    font-weight: 700;
}

.field-check-copy .field-hint {
    margin: 0;
    font-weight: 400;
}

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

.catalog-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    background: var(--color-inset);
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
}

.catalog-card-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 0.08rem;
}

.catalog-card.is-selected {
    border-color: var(--color-sky);
    background: var(--color-sky-wash);
    box-shadow: 0 0 0 1px var(--color-sky);
}

.catalog-card strong {
    color: var(--color-ocean);
    font-size: 1.02rem;
}

.catalog-card span,
.catalog-card p {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.catalog-card p {
    margin: 0;
}

.catalog-card-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalog-card .schedule-item-actions {
    margin-top: 0;
    flex: 0 0 auto;
}

.catalog-card-desc {
    flex: 1 0 100%;
}

.catalog-card-desc summary {
    display: inline;
    cursor: pointer;
    color: var(--color-sky);
    font-weight: 600;
    font-size: 0.88rem;
}

.catalog-card-desc summary:hover,
.catalog-card-desc summary:focus {
    color: var(--color-sky-hover);
}

.catalog-card-desc summary:focus-visible {
    outline: 2px solid var(--color-sky);
    outline-offset: 2px;
}

.catalog-card-desc[open] summary {
    display: inline-block;
    margin-bottom: 0.3rem;
}

.catalog-card-desc p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.choice-grid {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.choice-grid.is-compact {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    max-height: 10.5rem;
    overflow: auto;
    margin-bottom: 0.75rem;
}

.choice-grid.is-compact .choice-card {
    padding: 0.45rem 0.55rem;
}

.choice-grid.is-compact .choice-card span {
    display: none;
}

.choice-grid.is-compact .choice-card:has(input:checked) span {
    display: block;
}

.choice-grid.is-repeat {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.choice-grid.is-repeat .choice-card {
    padding: 0.5rem 0.6rem;
}

.choice-grid.is-repeat .choice-card span {
    font-size: 0.78rem;
}

.choice-grid legend {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0 0 0.45rem;
    color: var(--color-ink);
}

.choice-card {
    position: relative;
    display: grid;
    gap: 0.12rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: #fff;
    cursor: pointer;
}

.choice-card input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.choice-card input:focus {
    outline: none;
}

.choice-card:has(input:checked) {
    border-color: var(--color-sky);
    background: var(--color-sky-wash);
    box-shadow: 0 0 0 1px var(--color-sky);
}

.choice-card:has(input:focus-visible) {
    outline: 2px solid var(--color-sky);
    outline-offset: 2px;
}

.choice-card strong {
    color: var(--color-ocean);
}

.choice-card span {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.sheet-confirm {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--color-inset);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    padding: 1rem 1.05rem 1.1rem;
}

.sheet-confirm h3 {
    margin: 0 0 0.4rem;
    font-size: 1.12rem;
}

.sheet-confirm > p {
    margin: 0 0 1rem;
}

.sheet-form-title {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-ocean);
}

.public-class-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.public-class-list .settings-card {
    margin: 0;
}

.public-class-list .settings-card.is-cancelled {
    background: var(--color-inset);
    border-color: #c5d4e3;
    box-shadow: none;
}

.public-class-list .settings-card.is-cancelled h2 {
    color: #5a7188;
    text-decoration: line-through;
}

.public-class h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.btn.booking-management-button {
    width: 12rem;
    max-width: 100%;
}
.booking-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.settings-card .booking-title h2 {
    margin: 0;
    min-width: 0;
}

.public-class .btn,
.public-book {
    margin-top: 0.45rem;
}

.field-row {
    display: grid;
    gap: 0 0.75rem;
}

.field-row .field,
.field-row .field-check {
    margin-bottom: 0.9rem;
}

.schedule-hero {
    margin-bottom: 0.75rem;
}

.schedule-hero h1 {
    margin: 0;
}

.app-main:has(.public-studio) {
    padding-top: 0.65rem;
}

.public-studio .studio-header-open,
.public-studio .studio-header-static {
    min-height: 0;
    margin: 0 0 0.35rem;
}

.public-tabs-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 0.35rem 0.75rem;
    margin: 0 0 0.75rem;
    background: var(--public-tab-background, #0a3d6b);
    color: var(--public-tab-foreground, #fff);
    padding: .4rem .5rem;
    border-radius: .6rem;
}

.public-studio .public-tabs-row .public-tabs {
    flex: 1 1 auto;
    margin: 0;
}

.public-earlier {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.35rem auto;
    white-space: nowrap;
    font-size: 0.92rem;
}

.public-earlier .app-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.public-earlier.on {
    color: var(--color-ocean);
}

.public-studio .public-tabs-row .public-tabs { border-bottom: 0; }
.public-studio .public-tabs-row .app-tab {
    color: var(--public-tab-foreground, #fff);
    border-bottom: 3px solid transparent;
    background: transparent;
}
.public-studio .public-tabs-row .app-tab.on {
    font-weight: 750;
    border-bottom-color: var(--public-tab-foreground, #fff);
    background: color-mix(in srgb, var(--public-tab-highlight, #000) 12%, transparent);
}
.public-studio .public-tabs-row .app-tab:hover {
    background: color-mix(in srgb, var(--public-tab-highlight, #000) 16%, transparent);
}
.public-studio .public-tabs-row .public-earlier { color: var(--public-tab-foreground, #fff); }
.public-studio .public-tabs-row a:focus-visible {
    outline: 2px solid var(--public-tab-foreground, #fff);
    outline-offset: -3px;
}
.public-schedule-dates { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }

.public-studio-head h1 {
    margin-bottom: 0.25rem;
}

.public-studio-head p {
    margin-bottom: 0.35rem;
}

.public-video-summary {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.schedule-board {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--color-inset);
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(10, 61, 107, 0.06);
}

.schedule-board-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 1rem 1rem 1.25rem;
}

/* Full booking pages follow the document; the owner desktop workspace keeps
   its controls visible while its class list scrolls. Embeds size themselves. */
.schedule-scroll {
    min-height: 0;
    overflow: visible;
    padding-bottom: 1.5rem;
    overflow-anchor: none;
}

.public-schedule-dates { flex-shrink: 0; align-items: center; }
[data-schedule-pagination] [role="status"] { font-size: .875rem; }
[data-schedule-more][aria-disabled="true"] { opacity: .65; cursor: progress; }

@media (min-width: 48rem) {
    .app-shell:has(.schedule-board .schedule-scroll) {
        height: 100dvh;
        overflow: hidden;
    }
    .app-shell:has(.schedule-board .schedule-scroll) .app-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }
    .app-shell:has(.schedule-board .schedule-scroll) .schedule-hero { margin-bottom: 0; }
    .schedule-board .schedule-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }
}

.schedule-now {
    height: 0;
    scroll-margin-top: 0.35rem;
}

.schedule-now-item {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 0;
    overflow: hidden;
}

.schedule-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.85rem;
}

.schedule-heading h2 {
    margin: 0;
}

.schedule-empty {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
}

.schedule-empty p {
    margin: 0 0 0.5rem;
    color: var(--color-muted);
}

.schedule-empty p:last-child {
    margin-bottom: 0;
}

.schedule-attendance-cue {
    margin: 0 0 0.85rem;
}

.schedule-day {
    margin: 0 0 1.15rem;
}

.schedule-day:last-child {
    margin-bottom: 0;
}

.schedule-day h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.schedule-day h3::before,
.schedule-day h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.schedule-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.schedule-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.8rem 2.7rem 0.8rem 0.95rem;
}

.schedule-item.public-class {
    padding: 0.8rem 0.95rem;
}

.schedule-time,
.schedule-place,
.schedule-teacher,
.schedule-price {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.schedule-time {
    font-size: 0.85rem;
    font-weight: 600;
}

.schedule-place {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.4rem;
    row-gap: 0.15rem;
    align-items: start;
}

.schedule-place .app-icon {
    grid-column: 1;
    grid-row: 1;
}

.schedule-place-name {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.schedule-address {
    display: inline;
}

.schedule-address summary {
    display: inline;
    color: var(--color-sky);
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.schedule-address summary::-webkit-details-marker {
    display: none;
}

.schedule-address summary::marker {
    content: "";
}

.schedule-address summary:hover,
.schedule-address summary:focus {
    color: var(--color-sky-hover);
}

.schedule-place .schedule-address-line {
    display: none;
    grid-column: 2;
    grid-row: 2;
    margin: 0;
}

.schedule-place:has(.schedule-address[open]) .schedule-address-line {
    display: block;
}

.schedule-address-line {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-muted);
    font-weight: 400;
}

.schedule-time .app-icon,
.schedule-place .app-icon,
.schedule-teacher .app-icon,
.schedule-price .app-icon {
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.12rem;
    color: var(--color-sky);
}

.schedule-facts {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.schedule-item strong,
.schedule-class-name {
    color: var(--color-ocean);
    font-size: 1.05rem;
    font-weight: 700;
}

.schedule-class-name,
.schedule-class-name:visited {
    text-decoration: none;
}

.schedule-class-name:hover,
.schedule-class-name:focus {
    color: var(--color-sky);
    text-decoration: none;
}

.schedule-meeting-warn,
.schedule-class-name:hover .schedule-meeting-warn,
.schedule-class-name:focus .schedule-meeting-warn,
.schedule-item.is-past .schedule-class-name .schedule-meeting-warn {
    color: var(--color-danger);
    font-weight: 700;
    margin-left: 0.1rem;
    text-decoration: none;
}

.schedule-item-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.2rem;
}

.schedule-item-meta .schedule-facts {
    flex: 1;
    min-width: 0;
}

.schedule-item-meta .schedule-occupancy,
.schedule-item-meta a.schedule-occupancy,
.schedule-item-meta a.schedule-occupancy:visited,
.schedule-item-meta .schedule-item-status,
.schedule-item-meta .schedule-register {
    margin: 0;
    flex: 0 0 auto;
    align-self: auto;
    min-height: 0;
}

.schedule-item-cta {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 0.2rem;
    margin-top: 0.45rem;
}

.schedule-price.is-cta {
    color: var(--color-ocean);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: normal;
    text-align: end;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0.35rem;
}

.first-free-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.02rem 0.38rem;
    border-radius: 999px;
    background: var(--color-sky-wash);
    color: var(--color-ocean);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.schedule-list-toolbar {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: .55rem;
}
.schedule-list-toolbar .first-free-note {
    margin: 0 0 0 auto;
    text-align: right;
}
@media (max-width: 640px) {
    .schedule-list-toolbar { flex-direction: column; align-items: flex-start; }
    .schedule-list-toolbar .first-free-note { margin-left: 0; text-align: left; }
}

.first-free-note {
    margin: 0 0 0.55rem;
    color: var(--color-ocean);
    font-size: 0.85rem;
    font-weight: 600;
}

.first-free-yours {
    margin: 0;
    color: var(--color-ocean);
    font-weight: 700;
}

.donation-choices {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.6rem 0;
}

.donation-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: var(--tap-min);
    margin: 0;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
}

.donation-choice:has(input[type="radio"]:checked) {
    border-color: var(--color-sky);
    background: var(--color-sky-wash);
}

.donation-choice input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
}

.donation-choice-other {
    padding-right: 0.35rem;
}

.donation-amount {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    min-width: 6.5rem;
    max-width: 6.5rem;
    min-height: 2rem;
    margin: 0;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: #fff;
    color: var(--color-ink);
    font: inherit;
    font-size: 1rem;
}

.donation-amount:focus {
    outline: 2px solid var(--color-sky);
    outline-offset: 1px;
    border-color: var(--color-sky);
}

.schedule-item-meta .schedule-item-cta {
    margin-top: 0;
    align-self: flex-end;
    flex: 0 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.2rem;
}

.schedule-register,
.schedule-register:visited {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-on-accent);
    background: var(--color-sky);
    text-decoration: none;
    min-height: 1.75rem;
    min-width: 4.6rem;
    padding: 0 0.55rem;
    border-radius: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.schedule-register:hover,
.schedule-register:focus {
    background: var(--color-sky-hover);
    color: var(--color-on-accent);
    text-decoration: none;
}

.schedule-register.is-registered,
.schedule-register.is-registered:visited {
    color: var(--color-muted);
    background: var(--color-inset);
    font-weight: 600;
}

.schedule-register.is-registered:hover,
.schedule-register.is-registered:focus {
    color: var(--color-ocean);
    background: var(--color-sky-wash);
}

.schedule-closed {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.schedule-occupancy {
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 600;
}

a.schedule-occupancy,
a.schedule-occupancy:visited {
    margin-left: auto;
    color: var(--color-sky);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    white-space: nowrap;
}

a.schedule-occupancy.is-done {
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

a.schedule-occupancy.is-done:hover,
a.schedule-occupancy.is-done:focus {
    text-decoration: underline;
}

a.schedule-occupancy.is-done .app-icon {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0;
}

.schedule-item-cta .schedule-register {
    gap: 0.28rem;
}

a.schedule-occupancy:hover,
a.schedule-occupancy:focus {
    color: var(--color-sky-hover);
}

.class-occupancy {
    margin: 0 0 0.85rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.class-add-search,
.class-add-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    margin: 0.85rem 0 0.4rem;
}

.class-add-search {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.class-add-search input,
.class-add-picker select {
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
}

.class-add-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.55rem;
    max-height: 12rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-inset);
}

.class-add-list li {
    margin: 0;
}

.class-add-list label {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.4rem 0.15rem;
    min-height: var(--tap-min);
}

.class-add-list input {
    margin: 0.2rem 0 0;
    width: auto;
}

.class-add-picker .btn {
    margin: 0;
    width: 100%;
}

.class-person-meta {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 500;
}

.pass-owned {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.pass-owned li {
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    background: var(--color-inset);
    overflow: hidden;
}

.pass-owned-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    min-height: var(--tap-min);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pass-owned-open:hover,
.pass-owned-open:focus-visible {
    background: color-mix(in srgb, var(--color-ocean) 8%, transparent);
}

.pass-owned-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.pass-owned-copy strong {
    color: var(--color-ocean);
}

.pass-owned .settings-value {
    margin: 0;
}

.pass-owned-go {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-ocean);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.pass-owned-go::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.pass-use-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.pass-use-list li {
    display: grid;
    gap: 0.1rem;
}

.pass-use-list span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.pass-use-more {
    margin: 0 0 1rem;
}

.pass-use-more > summary {
    min-height: var(--tap-min);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-ocean);
}

.pass-use-more .pass-use-list {
    margin-top: 0.55rem;
}

.stripe-checkout,
.stripe-payment {
    margin: 0.75rem 0 1rem;
    min-height: 12rem;
}

.register-choices {
    display: grid;
    gap: 0.85rem;
}

.register-form {
    display: grid;
    gap: 0.85rem;
}

.register-form .field-check {
    margin: 0;
}

.register-choice {
    display: grid;
    gap: 0.35rem;
}

.register-choice p {
    margin: 0;
}

.register-pack {
    display: grid;
    gap: 0.35rem;
}

.register-pack p {
    margin: 0;
}

.register-choices .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
}

.register-choices .btn-dropin,
.register-choices .btn-dropin:visited {
    background: var(--color-ocean);
    border-color: var(--color-ocean);
    color: #fff;
}

.register-choices .btn-dropin:hover,
.register-choices .btn-dropin:focus {
    background: var(--color-ocean-hover);
    border-color: var(--color-ocean-hover);
    color: #fff;
}

.register-choices .btn-pack,
.register-choices .btn-pack:visited {
    background: var(--color-sky-wash);
    border-color: #7eafd6;
    color: var(--color-ocean);
}

.register-choices .btn-pack:hover,
.register-choices .btn-pack:focus {
    background: #b9d4ec;
    border-color: var(--color-ocean);
    color: var(--color-ocean);
}

.pass-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.pass-list li {
    display: grid;
    gap: 0.35rem;
}

.pass-list span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.pass-search input[type="search"] {
    flex: 0 1 18rem;
    width: 18rem;
    max-width: 100%;
    min-height: var(--tap-min);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.45rem;
    background: #fff;
    color: var(--color-ink);
    font: inherit;
    font-size: 1rem;
}

.pass-pack-counts {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
}

.pass-pack-counts span {
    font-weight: 700;
    color: var(--color-ocean);
}

.pass-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem 0.85rem;
}

.pass-fold {
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    padding: 0.35rem 0.7rem;
    background: var(--color-inset);
}

.pass-fold summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-ocean);
}

.pass-fold form {
    width: 28rem;
    max-width: 100%;
    margin: 0.7rem 0 0.35rem;
}

.class-details-copy {
    margin: 0 0 1.1rem;
    color: var(--color-ink);
    font-size: 0.95rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.class-details-copy.is-empty {
    color: var(--color-muted);
}

.schedule-sheet.is-class-details {
    justify-content: center;
    align-items: center;
    padding: 0.75rem;
}

.schedule-sheet.is-class-details .class-details-panel {
    width: min(26.5rem, 100%);
    max-height: min(92vh, 44rem);
    min-height: min(28rem, 92vh);
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 24px 48px rgba(10, 61, 107, 0.22);
}

.schedule-sheet.is-class-details .class-details-panel.studio-about-panel {
    min-height: 0;
    height: auto;
    overflow: auto;
}

.class-details-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.class-details-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-top: 0;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--color-border);
}

.class-join {
    margin: 0.75rem 0 0;
}

.schedule-sheet.is-class-details .schedule-sheet-head {
    margin-bottom: 0.35rem;
}

.schedule-sheet.is-class-details .schedule-sheet-close {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
}

.plan-compare-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.1rem;
    margin: 1.35rem 0 0;
}

.plan-compare-cta .btn {
    width: auto;
}

.app-main:has(.plans-page) {
    width: min(64rem, calc(100% - 2rem));
}

.plans-hero p {
    max-width: none;
}

.plans-hero p + p {
    color: var(--color-muted);
}

.plan-view-toggle {
    display: inline-flex;
    margin: 0;
    padding: 0.2rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
}

.plans-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 0 1.1rem;
}

.plan-view-toggle a,
.plan-view-toggle a:visited {
    min-height: 2.25rem;
    min-width: 5.5rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plan-view-toggle a:hover,
.plan-view-toggle a:focus {
    color: var(--color-ocean);
}

.plan-view-toggle a.on,
.plan-view-toggle a.on:visited {
    background: var(--color-ocean);
    color: #fff;
}

.plan-cards {
    display: grid;
    gap: 1rem;
}

.plan-card {
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 1.25rem 1.2rem 1.4rem;
    box-shadow: 0 12px 28px rgba(10, 61, 107, 0.06);
}

.plan-tone-free {
    background: #e8edf2;
    border-color: #b7c4d0;
}

.plan-tone-pro {
    background: #c5e6fb;
    border-color: #5aa8dc;
}

.plan-tone-team {
    background: #d5dbeb;
    border-color: #7d8fb8;
}

.plan-card.is-featured {
    box-shadow: 0 18px 40px rgba(0, 103, 184, 0.14);
}

.plan-card.is-current {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 2px rgba(0, 103, 184, 0.28);
}

.plan-card-position {
    margin: 0.15rem 0 0;
    min-height: 2.8em;
    line-height: 1.4;
    color: var(--color-muted);
}

.plan-card-saving {
    color: var(--color-success);
    font-weight: 700;
}

.plan-card-billing {
    line-height: 1.4;
}

.plan-coming-note {
    margin: 1.25rem 0 0;
    color: var(--color-muted);
}

.plan-card-kicker {
    min-height: 1.05rem;
    margin: 0 0 0.4rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink);
}

.plan-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 1.7rem;
}

.plan-card h2 {
    margin: 0;
    font-size: 1.35rem;
}

.plan-card-badge {
    margin-left: auto;
    padding: 0.22rem 0.55rem;
    border-radius: 0.4rem;
    background: var(--color-ocean);
    color: var(--color-on-accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-card-price {
    margin: 0.7rem 0 0;
    font-size: clamp(1.8rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-ocean);
}

.plan-card-cadence {
    margin: 0.35rem 0 0;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.plan-card-blurb {
    margin: 0.85rem 0 0;
    color: var(--color-muted);
    line-height: 1.4;
    min-height: 2.8em;
}

.plan-card-highlights {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(10, 61, 107, 0.12);
    display: grid;
    gap: 0.5rem;
    flex: 1;
}

.plan-card-highlights li {
    position: relative;
    padding-left: 1.05rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.plan-card-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-sky);
}

.plan-card-highlights li.plan-card-plus {
    padding-left: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-sky);
}

.plan-card-highlights li.plan-card-plus::before {
    content: none;
}

.plan-card-features {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px solid rgba(10, 61, 107, 0.12);
    display: grid;
    gap: 0.55rem;
}

.plan-card-features li {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem 0.7rem;
    align-items: baseline;
    font-size: 0.88rem;
}

.plan-card-features li span:last-child {
    text-align: right;
    flex: 0 1 9.5rem;
}

.plan-card-features li span:first-child {
    color: var(--color-muted);
}

.plan-yes {
    color: var(--color-ocean);
    font-weight: 700;
}

.plan-no {
    color: #8aa0b5;
}

.plan-coming {
    color: var(--color-muted);
    font-weight: 600;
    font-size: 0.82rem;
}

.plan-compare-name {
    display: block;
}

.plan-compare-price {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
}

.plan-compare-cadence {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: normal;
}

.plan-compare-group th {
    padding-top: 0.95rem;
    padding-bottom: 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan-compare-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 14px 32px rgba(10, 61, 107, 0.07);
}

.plan-compare {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.plan-compare th,
.plan-compare td {
    text-align: left;
    vertical-align: top;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid rgba(10, 61, 107, 0.08);
}

.plan-compare tbody tr:last-child th,
.plan-compare tbody tr:last-child td {
    border-bottom: 0;
}

.plan-compare thead th {
    font-weight: 700;
    white-space: nowrap;
}

.plan-compare thead th:first-child {
    border-radius: 1rem 0 0 0;
    background: var(--color-inset);
    color: var(--color-ocean);
}

.plan-compare thead th:last-child {
    border-radius: 0 1rem 0 0;
}

.plan-compare tbody th {
    color: var(--color-ink);
    font-weight: 600;
    min-width: 8.5rem;
    background: var(--color-surface);
    position: sticky;
    left: 0;
    z-index: 1;
}

.plan-compare td {
    color: var(--color-ink);
    font-weight: 600;
}

.plan-compare-current {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-sky);
}

.plan-compare .is-current {
    box-shadow: inset 0 0 0 1px rgba(0, 103, 184, 0.28);
}

.plan-compare tbody th.plan-group-head {
    background: #2f74b3;
    color: #f4f8fc;
    font-weight: 800;
}

@media (min-width: 48rem) {
    .plan-cards {
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: 1.1rem;
    }
}

.class-details-day {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.class-details-panel h2 {
    margin: 0.15rem 0 0.9rem;
    font-size: 1.35rem;
}

.class-meta-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
}

.class-meta-label {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.class-teacher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.class-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--color-sky-wash);
    color: var(--color-ocean);
    font-weight: 700;
    font-size: 0.85rem;
}

.class-teacher-name,
.class-venue-name {
    margin: 0.1rem 0 0;
    font-weight: 600;
    color: var(--color-ocean);
}

.class-venue {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem;
    background: var(--color-bg);
    border-radius: 0.75rem;
}

.class-venue-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    background: var(--color-surface);
    color: var(--color-muted);
}

.class-venue-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.class-venue-kind {
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.class-register {
    min-width: 7.25rem;
}

.schedule-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.15rem;
}

.schedule-item-actions form {
    margin: 0;
}

.schedule-item-status {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.schedule-item-menu {
    position: absolute;
    top: 0.45rem;
    right: 0.4rem;
    z-index: 2;
}

.schedule-item-menu[open] {
    z-index: 50;
}

.schedule-item-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    color: var(--color-muted);
    cursor: pointer;
    list-style: none;
}

.schedule-item-menu-toggle::-webkit-details-marker {
    display: none;
}

.schedule-item-menu-toggle svg {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.schedule-item-menu-toggle:hover,
.schedule-item-menu-toggle:focus,
.schedule-item-menu[open] > .schedule-item-menu-toggle {
    color: var(--color-ocean);
    background: var(--color-sky-wash);
}

.schedule-item-menu[open] > .schedule-item-menu-toggle::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
}

.schedule-item-menu-panel {
    position: absolute;
    top: calc(100% + 0.15rem);
    right: 0;
    z-index: 1;
    min-width: 11.5rem;
    padding: 0.35rem 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    box-shadow: 0 10px 28px rgba(10, 61, 107, 0.16);
}

.schedule-item-menu-panel form {
    margin: 0;
}

.schedule-item-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

a.schedule-item-menu-item,
a.schedule-item-menu-item:visited {
    color: var(--color-ink);
    text-decoration: none;
}

.schedule-item-menu-item svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--color-muted);
}

.schedule-item-menu-item:hover,
.schedule-item-menu-item:focus {
    background: var(--color-sky-wash);
}

.schedule-item-menu-item.is-danger {
    color: var(--color-danger);
}

.schedule-item-menu-item.is-danger svg {
    color: var(--color-danger);
}

.schedule-item.is-cancelled {
    opacity: 0.7;
}

.schedule-item.is-past {
    background: var(--color-inset);
    border-color: #c5d4e3;
}

.schedule-item.is-past .schedule-class-name,
.schedule-item.is-past .schedule-class-name:visited {
    color: #5a7188;
}

.schedule-item.is-past .schedule-time,
.schedule-item.is-past .schedule-place,
.schedule-item.is-past .schedule-teacher,
.schedule-item.is-past .schedule-price,
.schedule-item.is-past .schedule-closed {
    color: #7a8b9c;
}

.schedule-item.is-past .schedule-time .app-icon,
.schedule-item.is-past .schedule-place .app-icon,
.schedule-item.is-past .schedule-teacher .app-icon,
.schedule-item.is-past .schedule-price .app-icon {
    color: #7a8b9c;
}

.schedule-item.is-cancelled .schedule-class-name,
.schedule-item.is-cancelled strong {
    text-decoration: line-through;
}

.schedule-sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    justify-content: flex-end;
}

.schedule-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 61, 107, 0.32);
}

.schedule-sheet-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: var(--color-surface);
    padding: 1.15rem 1.2rem 1.6rem;
    box-shadow: -18px 0 40px rgba(10, 61, 107, 0.16);
}

.schedule-sheet-panel > p {
    color: var(--color-muted);
    margin: 0 0 1rem;
    flex: 0 0 auto;
}

.schedule-sheet-panel > .login-message {
    flex: 0 0 auto;
}

.schedule-sheet-panel:has(.sheet-catalog),
.schedule-sheet-panel:has(.sheet-body) {
    overflow: hidden;
}

.schedule-sheet-panel > .catalog-grid {
    flex: 0 1 auto;
    align-content: start;
    min-height: 0;
    max-height: min(70vh, 36rem);
    overflow: auto;
}

.sheet-body,
.sheet-catalog {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.sheet-catalog {
    flex: 0 1 auto;
    max-height: min(42vh, 22rem);
}

.sheet-catalog.is-flush {
    max-height: min(70vh, 36rem);
}

.sheet-body > p {
    color: var(--color-muted);
    margin: 0 0 1rem;
}

.sheet-catalog > p {
    color: var(--color-muted);
    margin: 0;
}

.sheet-add {
    margin: 0 0 0.75rem;
    flex: 0 0 auto;
}

.sheet-form {
    flex: 0 1 auto;
    max-height: 58%;
    min-height: 0;
    overflow: auto;
    margin-bottom: 0.45rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--color-border);
}

.sheet-form.is-solo {
    margin-bottom: 0.35rem;
    padding-bottom: 0;
    border-bottom: 0;
    max-height: none;
}

.private-operations .sheet-form {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

.private-operations > .sheet-catalog {
    flex: 0 1 auto;
    max-height: 9rem;
}

.sheet-form .login-message,
.schedule-sheet-panel form .login-message,
.settings-card form .login-message {
    margin: 0 0 0.9rem;
}

.schedule-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex: 0 0 auto;
}

.schedule-sheet-head h2 {
    margin: 0;
    min-width: 0;
}

.schedule-sheet-head-actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex: 0 0 auto;
}

.schedule-sheet-head-actions .text-link {
    font-weight: 700;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.schedule-sheet-close,
.schedule-sheet-close:visited {
    font-weight: 700;
    color: var(--color-sky);
    text-decoration: none;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
}

.schedule-sheet-close:hover,
.schedule-sheet-close:focus {
    color: var(--color-sky-hover);
    text-decoration: none;
}

@media (min-width: 40rem) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }

    .people-invite-form {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr) auto;
    }

    .people-invite-form.people-invite-staff {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) 8.5rem auto;
    }

    .people-invite-name,
    .people-invite-form .btn {
        grid-column: auto;
        width: auto;
    }

    .people-who {
        grid-column: 1;
    }

    .schedule-item.public-class {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "time cta"
            "name cta"
            "facts cta";
        column-gap: 1rem;
        align-items: start;
    }

    .schedule-item.public-class .schedule-time {
        grid-area: time;
    }

    .schedule-item.public-class .schedule-class-name {
        grid-area: name;
    }

    .schedule-item.public-class .schedule-facts {
        grid-area: facts;
    }

    .schedule-item.public-class .schedule-item-cta {
        grid-area: cta;
        align-self: end;
        margin-top: 0;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .schedule-sheet-panel {
        width: min(30rem, 92vw);
        border-radius: 1rem 0 0 1rem;
    }
}

.btn,
.schedule-register,
.nav-sign-out,
.nav-links a {
    touch-action: manipulation;
}

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(10, 61, 107, 0.72);
    color: #fff;
    text-align: center;
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-visible,
#components-reconnect-modal.components-reconnect-retrying {
    display: none;
}

#components-reconnect-modal::before {
    content: "Connection lost. Reload the page to continue.";
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    max-width: 22rem;
}

#components-reconnect-modal.components-reconnect-failed::before,
#components-reconnect-modal.components-reconnect-rejected::before {
    content: "Connection lost. Reload the page to continue.";
}

#components-reconnect-modal a {
    color: #fff;
    font-weight: 700;
}

#blazor-error-ui {
    display: none;
}

.wait-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 61, 107, 0.55);
}

.wait-overlay.is-visible {
    display: flex;
}

.wait-overlay-card {
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    min-width: min(16rem, calc(100vw - 2.5rem));
    padding: 1.35rem 1.4rem 1.25rem;
    border-radius: 0.85rem;
    background: #fff;
    color: var(--color-ocean);
    box-shadow: 0 0.75rem 2rem rgba(10, 61, 107, 0.28);
    text-align: center;
}

.wait-overlay-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.wait-overlay-detail {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
}

.wait-overlay fluent-spinner {
    color: var(--color-sky);
}

@media (min-width: 40rem) {
    .home-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 48rem) {
    .login-card {
        padding: 1.5rem 1.35rem 1.6rem;
    }

    .landing-hero {
        grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
    }

    .landing-wordmark {
        display: block;
        width: 100%;
        height: auto;
        justify-self: end;
        border-radius: 0.75rem;
    }
}

@media (min-width: 64rem) {
    .landing-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 52rem) {
    .brand a span {
        display: none;
    }

    .nav-user {
        display: none;
    }
}

@media (max-width: 40rem) {
    html {
        overflow-x: hidden;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px;
    }

    .app-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }

    .section-toolbar,
    .schedule-heading .section-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 0.25rem;
    }

    .section-toolbar a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--tap-min);
        padding: 0.35rem 0.5rem;
        text-align: center;
    }

    .public-studio .public-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.1rem;
        width: 100%;
    }

    .app-tab,
    .app-tabs a {
        justify-content: center;
        min-height: var(--tap-min);
        padding: 0 0.3rem;
        font-size: 0.68rem;
        letter-spacing: 0.02em;
        text-align: center;
    }

    .public-tabs-row {
        gap: 0.2rem 0.35rem;
    }

    .public-earlier {
        justify-content: center;
        min-width: 2.25rem;
        min-height: 2.25rem;
        margin-bottom: 0.15rem;
    }

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

    .public-studio .public-tabs a {
        justify-content: center;
        width: 100%;
        min-height: 2.25rem;
        padding: 0 0.15rem;
        gap: 0.25rem;
        letter-spacing: 0;
        font-size: 0.64rem;
    }

    .public-studio .public-tabs a .app-icon {
        width: 0.85rem;
        height: 0.85rem;
    }

    .settings-card .btn,
    .home-hero .btn,
    .register-choices .btn,
    .class-register,
    .stripe-checkout,
    .stripe-payment,
    .public-class-list .btn {
        width: 100%;
        min-width: 0;
    }

    .people-invite-form .btn {
        width: 100%;
    }

    .schedule-item.public-class {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: none;
        column-gap: 0.75rem;
        row-gap: 0.15rem;
        align-items: end;
    }

    .schedule-item.public-class .schedule-time,
    .schedule-item.public-class .schedule-class-name {
        grid-area: auto;
        grid-column: 1 / -1;
    }

    .schedule-item.public-class .schedule-facts {
        grid-area: auto;
        grid-column: 1;
        align-self: end;
    }

    /* Let location span the card while keeping teacher and price side by side. */
    .schedule-item.public-class:not(:has(.schedule-price.is-donation)) .schedule-facts { display: contents; }
    .schedule-item.public-class:not(:has(.schedule-price.is-donation)) .schedule-place { grid-column: 1 / -1; }
    .schedule-item.public-class:not(:has(.schedule-price.is-donation)) .schedule-teacher { grid-column: 1; align-self: center; }

    .schedule-item.public-class .schedule-item-cta {
        display: contents;
    }

    .schedule-item.public-class .schedule-price {
        grid-area: auto;
        grid-column: 2;
        align-self: end;
        margin: 0;
    }

    .schedule-item.public-class .schedule-register,
    .schedule-item.public-class .schedule-closed {
        grid-area: auto;
        grid-column: 1 / -1;
        margin-top: 0.35rem;
    }

    .schedule-register,
    .schedule-register:visited {
        width: 100%;
    }

    .nav-sign-out,
    .nav-links a {
        min-height: var(--tap-min);
    }

    .waiver-copy {
        max-height: 12rem;
    }
}

@media (max-width: 52rem) {
    .schedule-item.public-class:has(.schedule-price.is-donation) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "time"
            "name"
            "facts"
            "price"
            "action";
        align-items: stretch;
    }

    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-time {
        grid-area: time;
    }

    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-class-name {
        grid-area: name;
    }

    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-facts {
        grid-area: facts;
        grid-column: auto;
    }

    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-item-cta {
        display: contents;
    }

    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-price {
        grid-area: price;
        grid-column: auto;
        justify-content: flex-start;
        text-align: start;
        align-self: stretch;
        margin: 0.45rem 0 0;
    }

    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-register,
    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-register:visited,
    .schedule-item.public-class:has(.schedule-price.is-donation) .schedule-closed {
        grid-area: action;
        grid-column: auto;
        width: 100%;
        margin-top: 0.35rem;
    }

    .schedule-item-meta:has(.schedule-price.is-donation) {
        flex-direction: column;
        align-items: stretch;
    }

    .schedule-item-meta:has(.schedule-price.is-donation) .schedule-item-cta {
        align-items: stretch;
        width: 100%;
    }

    .schedule-item-meta:has(.schedule-price.is-donation) .schedule-price {
        justify-content: flex-start;
        text-align: start;
    }

    .schedule-item-meta:has(.schedule-price.is-donation) .schedule-register,
    .schedule-item-meta:has(.schedule-price.is-donation) .schedule-register:visited {
        width: 100%;
    }
}

@media (max-width: 28rem) {
    .settings-actions,
    .people-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .settings-actions .btn,
    .settings-actions form,
    .people-toolbar .btn,
    .people-toolbar form {
        width: 100%;
    }

    .plan-choice {
        flex-direction: column;
        align-items: stretch;
    }
}

.replay-window {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 0.9rem;
}

.replay-window .field {
    flex: 0 0 16.5rem;
    width: 16.5rem;
    max-width: 100%;
    margin-bottom: 0;
}

.replay-window .field input[type="datetime-local"] {
    width: 100%;
}

.replay-window > .field-hint {
    flex: 1 0 100%;
}

.replay-access {
    display: grid;
    gap: 0;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.replay-access legend {
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.replay-access label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap-min);
    margin: 0;
    padding: 0.2rem 0;
    line-height: 1.4;
    cursor: pointer;
}

.replay-access label[hidden] { display: none; }
.replay-access input { flex: 0 0 auto; margin: 0; }
.replay-access > .field-hint { margin-top: 0.35rem; }

@media (hover: hover) and (pointer: fine) {
    .replay-access label { min-height: 2rem; }
}

.replay-list {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.replay-list > li {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0.75rem 0.95rem;
}

.replay-list > li p {
    margin: 0 0 0.2rem;
}

.replay-row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.35rem;
}

.replay-row-actions form {
    margin: 0;
}

.replay-player {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 0.75rem;
    background: #111;
    border-radius: 0.75rem;
    overflow: hidden;
}

.replay-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.class-replay {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.class-replay .btn {
    width: 100%;
}

.private-compact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 0.8rem;
}

.private-compact-row .field {
    flex: 0 1 auto;
}

.private-field-day,
.private-field-rule,
.private-field-kind,
.private-field-status {
    width: 12rem;
}

.private-field-time,
.private-field-duration,
.private-field-price,
.private-field-ahead {
    width: 10rem;
}

.private-field-datetime {
    width: 18rem;
}

.private-field-name {
    max-width: 30rem;
}

.private-field-description {
    max-width: 40rem;
}

.private-field-location,
.private-field-instructor {
    width: 22rem;
}

.private-row-action {
    margin-bottom: 0.05rem;
}

.private-operations .catalog-grid,
.settings-card > .catalog-grid {
    margin-top: 0.75rem;
}

.private-operations form > .field-hint {
    margin: 0.35rem 0 0.9rem;
}

.private-operations fieldset.field {
    display: grid;
    gap: 0.35rem;
    margin: 0.9rem 0;
    border: 0;
    padding: 0;
}

.private-operations fieldset.field label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.settings-card .register-choices,
.schedule-sheet .register-choices {
    margin-top: 0.9rem;
}

.schedule-sheet .private-compact-row {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem 0.7rem;
}

.schedule-sheet .private-field-instructor {
    width: 16rem;
    max-width: 100%;
}

.schedule-sheet .private-field-day {
    flex: 0 0 9.25rem;
    width: 9.25rem;
}

.schedule-sheet .private-field-time {
    flex: 0 0 8rem;
    width: 8rem;
}

.schedule-sheet .private-field-kind {
    flex: 0 0 11.25rem;
    width: 11.25rem;
}

.schedule-sheet .private-field-datetime {
    flex: 0 0 15.5rem;
    width: 15.5rem;
    max-width: 100%;
}

.schedule-sheet .private-row-break {
    flex: 1 0 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.schedule-sheet .private-row-action {
    width: auto;
    min-width: 5.5rem;
    margin-bottom: 0.9rem;
}

.schedule-sheet #private-schedule h3 {
    margin: 1.1rem 0 0.55rem;
    font-size: 1rem;
}

.private-hour-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem 0.85rem;
    margin: 0 0 0.4rem;
}

.private-hour-row > span {
    min-width: 0;
    white-space: nowrap;
}

.private-hour-confirm {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.35rem 0.7rem;
    margin: 0;
    flex: 0 0 auto;
}

.private-hour-confirm > span {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.private-exception {
    margin: 0.65rem 0 0.15rem;
}

.private-exception-kind {
    margin: 0 0 0.1rem;
    font-weight: 700;
    color: var(--color-ocean);
}

.private-exception .private-hour-row:has(.private-hour-confirm) {
    flex-wrap: wrap;
}

.private-exception .private-hour-confirm {
    flex: 1 0 100%;
    justify-content: flex-start;
}

@media (max-width: 680px) {
    .private-compact-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .private-compact-row .field,
    .private-field-day,
    .private-field-rule,
    .private-field-kind,
    .private-field-status,
    .private-field-time,
    .private-field-duration,
    .private-field-price,
    .private-field-ahead,
    .private-field-datetime,
    .private-field-name,
    .private-field-description,
    .private-field-location,
    .private-field-instructor {
        width: 100%;
        max-width: none;
    }
}

/* Schedule destinations share the workspace; focused tasks share one editor. */
.schedule-heading-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.schedule-workspace .sheet-catalog,
.schedule-workspace .sheet-body,
.schedule-editor .sheet-form,
.schedule-editor .sheet-body,
.schedule-editor .catalog-grid { max-height: none; overflow: visible; flex: none; }
.schedule-editor .sheet-form { border: 0; padding-bottom: 0; }
.schedule-editor .schedule-sheet-panel { overflow-y: auto; width: min(42rem, 100%); height: 100dvh; }
.schedule-editor .schedule-sheet-head { position: sticky; top: -1.15rem; background: var(--color-surface); z-index: 2; padding-block: 1rem; }
.schedule-editor .settings-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.schedule-editor .settings-actions > .btn { white-space: normal; min-width: 0; max-width: 100%; padding-block: .65rem; overflow-wrap: anywhere; }
.schedule-workspace .catalog-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.schedule-editor.is-confirmation { align-items: center; justify-content: center; padding: 1rem; }
.schedule-editor.is-confirmation .schedule-sheet-panel { height: auto; max-height: calc(100dvh - 2rem); width: min(32rem, 100%); border-radius: 1rem; }
body:has(.schedule-editor) { overflow: hidden; }
@media (max-width: 40rem) {
    .schedule-section-tabs { display: flex; }
    .schedule-section-tabs a { flex: 1; font-size: .85rem; }
    .schedule-section-tabs + .section-toolbar { display: flex; flex-wrap: wrap; }
    .schedule-section-tabs + .section-toolbar a { flex: 1; font-size: .875rem; }
    .schedule-editor .schedule-sheet-panel { width: 100%; border-radius: 0; padding-bottom: max(1.6rem, env(safe-area-inset-bottom)); }
    .schedule-editor .settings-actions > .btn { flex: 1; }
    .schedule-workspace .schedule-sheet-head { flex-wrap: wrap; gap: .75rem; }
}

/* Keep descriptions directly under the page title across schedule tabs. */
.schedule-page-heading { position: relative; margin: 0 0 .25rem; }
.schedule-page-heading > h1 { margin: 0; padding-right: 7rem; }
.schedule-page-heading > a { position: absolute; right: 0; top: 0; }
.schedule-hero > h1 { margin: 0 0 .25rem; }
.schedule-work-area-heading { margin-bottom: 1rem; }
.private-form-actions { margin: .75rem 0 1.25rem; }
@media (max-width: 40rem) {
    .schedule-work-area-heading,
    .schedule-workspace > .schedule-workspace-body > .schedule-sheet-head {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
    }
    .schedule-heading-actions { width: 100%; gap: .75rem; }
}

.availability-section { padding-block: 1rem; border-top: 1px solid var(--color-border); }
.availability-section .schedule-heading h3 { margin: 0; }
.availability-section .private-hour-row { flex-wrap: wrap; gap: .75rem; }
.availability-section .schedule-item-actions { flex-shrink: 0; }

.availability-section > .schedule-heading > .btn {
    width: 12rem;
    max-width: 100%;
    min-height: var(--tap-min);
    white-space: normal;
    padding-block: .65rem;
    overflow-wrap: anywhere;
    flex-shrink: 0;
}

/* Keep focused editor fields visible below the sticky heading and phone keyboard. */
.schedule-editor .schedule-sheet-panel { scroll-padding-block: 6rem 2rem; }
.schedule-editor :is(input, select, textarea, button, a) { scroll-margin-block: 6rem 2rem; }
.schedule-editor :is(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--color-primary, #246b55); outline-offset: 3px; }
@media (max-width: 640px) {
    .schedule-editor .schedule-sheet-panel { height: var(--editor-viewport-height, 100dvh); }
    .schedule-editor.is-confirmation .schedule-sheet-panel { height: auto; max-height: calc(var(--editor-viewport-height, 100dvh) - 2rem); }
    .schedule-editor .schedule-sheet-close { min-height: 44px; display: inline-flex; align-items: center; padding-inline: .5rem; }
    .schedule-editor :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: max(1rem, 16px); }
}

/* Compact class offer; the deadline is visible in details and Register. */
.early-bird-price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; min-width: 0; }
.early-bird-amounts { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.early-bird-amounts s { color: #626b65; font-weight: 400; font-size: .9em; }
.early-bird-badge { border-radius: 999px; padding: .15rem .45rem; background: #e3f3e7; color: #235c37; font-size: .72rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.early-bird-deadline { flex-basis: 100%; color: #626b65; font-size: .8rem; font-weight: 400; }

/* Form controls use content-appropriate widths, bounded by the viewport. */
.control-medium { width: min(100%, 26rem); }
.control-wide { width: min(100%, 40rem); }
#publish-class-form select { width: fit-content; max-width: 100%; align-self: flex-start; justify-self: start; }
#publish-class-form input[type="date"] { width: min(100%, 12rem); align-self: flex-start; justify-self: start; }
#publish-class-form input[type="time"] { width: min(100%, 10rem); align-self: flex-start; justify-self: start; }

#meeting-options-field fieldset { min-width: 0; border: 0; padding: 0; margin: 1rem 0; }
#meeting-options-field legend { font-weight: 600; margin-bottom: .5rem; }
#meeting-options-field label { display: block; margin: .4rem 0; }
#meeting-options-field input[type="radio"] { width: auto; margin-right: .4rem; }
#meeting-options-field [data-managed-details] { margin-left: 1.5rem; }

#publish-class-form input:not([type]) { width: min(100%, 26rem); }

.control-medium select { width: fit-content; max-width: 100%; align-self: flex-start; justify-self: start; }

.private-appointment { display: grid; gap: .35rem; padding: 1rem 0; border-bottom: 1px solid var(--border, #ddd); min-width: 0; overflow-wrap: anywhere; }
.private-appointment-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.private-appointment-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.private-appointment-actions a, .private-appointment-actions button { min-height: 44px; display: inline-flex; align-items: center; }

button[data-copy-meeting] { min-height: 44px; }

/* Overview summaries remain compact and wrap independently from studio totals. */
.overview-totals { margin-top: 1rem; }
.overview-card { min-width: 0; }
.overview-card .text-link { min-height: 44px; display: flex; align-items: center; }
.overview-attention summary { cursor: pointer; min-height: 44px; padding-block: 0.5rem; }
.overview-attention a { display: inline-block; padding-block: 0.5rem; }
.overview-card-privates .overview-band { background: var(--color-ocean); }
.overview-card-videos .overview-band { background: var(--color-ocean); }
@media (min-width: 48rem) {
    .overview-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.overview-split span { white-space: normal; overflow-wrap: anywhere; }
.overview-split strong { overflow-wrap: anywhere; }

/* Student booking: one summary, one funding decision, one next action. */
.booking-summary { max-width: 48rem; }
.booking-summary .home-hero-facts { gap: .55rem; }
.booking-panel, .booking-message { max-width: 48rem; }
.booking-panel > h2, .booking-state-title { margin-top: 0; }
.booking-funding { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .85rem; }
.booking-funding legend { font-size: 1.15rem; font-weight: 700; margin-bottom: .8rem; color: var(--color-ocean); }
.booking-funding-option { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: .65rem; cursor: pointer; background: var(--color-surface); min-height: var(--tap-min); }
.booking-funding-option:has(input:checked) { background: var(--color-inset); border-color: var(--color-ocean); box-shadow: inset 3px 0 var(--color-ocean); }
.booking-funding-option:has(input:focus-visible) { outline: 3px solid var(--color-sky); outline-offset: 3px; }
.booking-funding-option input { margin: .2rem 0 0; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; accent-color: var(--color-ocean); }
.booking-funding-option > span { min-width: 0; overflow-wrap: anywhere; }
.booking-funding-detail { display: block; color: var(--color-muted); font-size: .9rem; line-height: 1.5; margin-top: .25rem; }
.booking-funding > .btn { width: 100%; min-height: var(--tap-min); white-space: normal; }
.booking-funding:has([name="funding"][value="pass"]:checked) .booking-donation { display: none; }
.booking-pass-help { padding: .85rem 1rem; background: var(--color-inset); border-radius: .65rem; margin-bottom: .8rem; }
.booking-pass-help h3 { font-size: .95rem; margin: 0 0 .5rem; }
.booking-pass-help ul { padding: 0; margin: 0; list-style: none; display: grid; gap: .65rem; }
.booking-pass-help li span { display: block; color: var(--color-muted); font-size: .9rem; }
.booking-pack-options { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.booking-pack-options summary { cursor: pointer; color: var(--color-ocean); min-height: var(--tap-min); padding: .5rem 0; }
.booking-pack-options .register-pack { margin: .75rem 0; }
.booking-state { display: inline-block; padding: .3rem .65rem; border-radius: .4rem; background: var(--color-inset); font-weight: 600; }
.booking-state.is-pending { color: var(--color-amber); background: var(--color-amber-wash); }
.booking-state.is-confirmed { color: var(--color-success); background: var(--color-success-wash); }
.booking-panel .login-message { margin-block: .75rem; }
@media (max-width: 480px) {
    .booking-funding-option { padding: .8rem; }
    .booking-panel { padding: 1rem; }
    .booking-pass-help { padding: .75rem; }
}

.embed-booking-summary { padding: 1rem; background: var(--color-inset); border-radius: .65rem; margin-block: .75rem; }
.embed-booking-summary p { margin: .35rem 0; }

/* Staff class editors keep scope and required setup visible. */
.class-edit-scope { display: grid; gap: .25rem; padding: .85rem 1rem; margin-block: .75rem; border-left: 3px solid var(--color-ocean); background: var(--color-inset); border-radius: .4rem; }
.class-edit-scope span { color: var(--color-muted); }
.class-more-settings { margin-block: 1rem; border-block: 1px solid var(--color-border); padding-block: .4rem; }
.class-more-settings > summary { color: var(--color-ocean); font-weight: 600; padding-block: .7rem; cursor: pointer; min-height: var(--tap-min); }
.class-more-settings[open] > summary { margin-bottom: .75rem; }
.schedule-item-menu-panel { min-width: min(15rem, calc(100vw - 3rem)); }


/* Full date/time labels need more room than compact date inputs. */
.schedule-sheet .private-compact-row .private-field-slot {
    flex: 0 1 24rem;
    width: 24rem;
    min-width: 0;
    max-width: 100%;
}

.private-field-slot select {
    width: 100%;
    min-width: 0;
}

/* Upcoming appointments: aligned summaries, with repair details spanning the row. */
.private-appointment { gap: .25rem; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: .65rem; margin-bottom: .75rem; background: var(--color-surface); }
.private-appointment-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .65rem 1rem; align-items: start; }
.private-appointment-heading, .private-appointment-when, .private-appointment-place { display: grid; gap: .2rem; min-width: 0; }
.private-appointment-heading { justify-content: normal; }
.private-appointment-heading > span, .private-appointment-place { font-size: .9rem; }
.private-appointment-label { color: var(--color-muted); font-size: .8rem; }
.private-appointment-when, .private-appointment-place { grid-column: 1 / -1; }
.private-appointment-actions { margin: 0; gap: .5rem 1rem; }
.private-appointment > .login-message, .private-appointment > .field-hint { margin: 0; }
.private-appointment-meeting-actions > details { min-width: 0; }
.private-appointment-meeting-actions > details > summary { min-height: 44px; box-sizing: border-box; padding-top: .2rem; align-content: start; }
.private-appointment-meeting-actions > details[open] { flex: 1 0 100%; }
.private-appointment-meeting-actions > details[open] > form { margin-top: .5rem; }
.private-appointment-actions:empty { display: none; }
@media (min-width: 64rem) {
    .private-appointment-overview { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr) minmax(0, 2fr) auto; }
    .private-appointment-when, .private-appointment-place, .private-appointment-status { grid-column: auto; grid-row: auto; }
}

.private-appointment-when { font-size: .9rem; }
.private-appointment-when > .private-appointment-label { font-size: inherit; font-weight: 600; }

.private-appointment-meeting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; min-width: 0; }
.private-appointment-meeting-actions > button { display: inline-flex; align-items: flex-start; min-height: 44px; box-sizing: border-box; padding-top: .2rem; }
.private-appointment-meeting-actions:empty { display: none; }

.availability-past { margin-top: .5rem; }
.availability-past > summary { cursor: pointer; color: var(--color-ocean); min-height: 44px; align-content: center; font-weight: 600; }

.availability-section .private-hour-row > span:first-child { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

.availability-editor-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); gap: 0 1rem; }
.availability-editor-fields .field { width: 18rem; max-width: 100%; min-width: 0; }
.availability-editor-fields .availability-day, .availability-editor-fields .availability-day + .field { grid-column: 1; }
.availability-editor-fields input, .availability-editor-fields select { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 40rem) {
    .availability-editor-fields { grid-template-columns: minmax(0, 18rem); }
}

.private-slot-picker { min-width: 0; width: 100%; }
.private-slot-picker > .field-hint { margin: 0 0 .5rem; }
.private-slot-picker .private-field-slot { flex: 0 1 24rem; width: 24rem; max-width: 100%; min-width: 0; }
.private-slot-picker input { width: 100%; min-width: 0; box-sizing: border-box; }

.private-slot-times { border: 0; padding: 0; margin: .5rem 0 1rem; min-width: 0; }
.private-slot-times legend { font-weight: 600; margin-bottom: .5rem; }
.private-slot-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.private-slot-choice { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--color-border); border-radius: .4rem; cursor: pointer; }
.private-slot-choice input { width: auto; margin: 0; }
.private-slot-choice:has(input:checked) { background: var(--color-inset); border-color: var(--color-ocean); }
.private-slot-choice:focus-within { outline: 2px solid var(--color-ocean); outline-offset: 2px; }

.private-slot-calendar { width: 24rem; max-width: 100%; margin-bottom: .75rem; }
.private-slot-calendar-nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.private-slot-calendar-nav .btn { min-width: 44px; padding: .4rem; }
.private-slot-calendar-week, .private-slot-calendar-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; text-align: center; }
.private-slot-calendar-month[hidden] { display: none; }
.private-slot-calendar-month button { min-height: 44px; border: 1px solid var(--color-border); border-radius: .35rem; background: var(--color-surface); color: var(--color-ocean); font: inherit; font-weight: 600; cursor: pointer; padding: .2rem; }
.private-slot-calendar-month button:disabled { color: var(--color-muted); background: var(--color-inset); opacity: .55; cursor: default; }
.private-slot-calendar-month button[aria-pressed="true"] { background: var(--color-ocean); color: white; }
.private-slot-calendar button:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; }
.private-slot-buttons .private-slot-choice { color: var(--color-ocean); font-weight: 600; text-decoration: none; background: var(--color-surface); border-color: var(--color-ocean); }
.private-slot-buttons .private-slot-choice:hover { background: var(--color-inset); }
.private-slot-buttons .private-slot-choice:has(input:checked) { background: var(--color-ocean); color: white; }
.private-slot-buttons .private-slot-choice input { accent-color: var(--color-ocean); }
.private-slot-buttons a:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; }

.private-slot-calendar-nav .btn:disabled { opacity: .45; cursor: default; }

.pass-toolbar { min-width: 0; }
.pass-toolbar .pass-fold { min-width: 0; max-width: 100%; box-sizing: border-box; }
.pass-toolbar .pass-fold[open] { flex: 0 1 30rem; }
.student-private-catalog { margin-block: 1rem; }
.student-private-catalog .catalog-card { padding: 1rem; gap: .65rem 1rem; }
.student-private-catalog .catalog-card-copy { flex: 1 1 18rem; }
.student-private-catalog .catalog-card-copy h2 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--color-ocean); overflow-wrap: anywhere; }
.student-private-catalog .catalog-card-copy span { white-space: normal; overflow-wrap: anywhere; }
.student-private-catalog .catalog-card-desc summary { display: inline-flex; align-items: center; min-height: 44px; }
.student-private-catalog .catalog-card-desc p { margin-top: .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.student-private-catalog .btn { min-height: 44px; }

.people-tools { margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); padding-bottom: .5rem; }
.people-tools > summary { cursor: pointer; color: var(--color-ocean); font-weight: 600; min-height: 44px; align-content: center; }
.people-tools[open] > summary { margin-bottom: .5rem; }

.settings-fold-summary:has(.settings-fold-status) { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.settings-fold-summary:has(.settings-fold-status)::after { grid-column: 2; grid-row: 1; }
.settings-fold-summary .settings-fold-status { grid-column: 1 / -1; }
.settings-fold-status { color: var(--ink-soft, #52606d); font-size: .875rem; font-weight: 400; overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 640px) {
    .people-table:has(.people-identity) thead { display: none; }
    .people-table:has(.people-identity) tbody,
    .people-table:has(.people-identity) tr,
    .people-table:has(.people-identity) td { display: block; width: 100%; box-sizing: border-box; }
    .people-table:has(.people-identity) tr { border-bottom: 1px solid var(--color-border); padding: .5rem 0; }
    .people-table:has(.people-identity) td { border: 0; }
    .people-table .people-identity { display: flex; flex-wrap: wrap; gap: .35rem; }
    .people-table .people-who { flex-basis: 100%; }
    .people-table .people-name { white-space: normal; overflow-wrap: anywhere; }
    .people-table .staff-facts { flex-basis: 100%; }
    .people-table .people-row-actions { justify-content: flex-start; flex-wrap: wrap; }
}

.video-grid, .replay-list.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 1rem 0; }
.video-card, .replay-list.video-grid > .video-card { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; min-width: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface, #fff); overflow-wrap: anywhere; }
.video-card h3, .video-card p { margin: 0; }
.video-card h3 { font-size: 1.05rem; }
.video-card-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--color-muted); }
.video-access { font-weight: 600; }
.video-card-actions, .video-card .replay-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.video-card .catalog-card-desc > summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; }

.video-details-copy { white-space: pre-wrap; overflow-wrap: anywhere; margin: 1rem 0; }

/* Manage content follows its trigger in normal flow; opening it reserves space. */
.people-invite-tools { display: block; min-width: 0; margin-bottom: 1rem; }
.people-invite-tools > .people-tools { display: block; min-width: 0; border: 0; padding: 0; }
.people-invite-tools > .people-tools > summary { display: inline-flex; width: fit-content; gap: .4rem; margin: 0; }
.people-invite-tools .people-roster-head { display: block; min-width: 0; width: 100%; margin: .65rem 0 0; }
.people-invite-tools .people-roster-tools { width: 100%; min-width: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.people-invite-panel { width: 100%; min-width: 0; margin-top: .65rem; }
.people-invite-tools > .people-tools:not([open]) > .people-roster-head { display: none; }
.referral-banner { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .35rem 1rem; padding: .6rem .85rem; margin: .6rem 0; border: 1px solid var(--color-border); border-radius: .5rem; background: var(--color-inset); }
.referral-banner > button { min-height: var(--tap-min); }
.referral-banner .invite-share-link { overflow-wrap: anywhere; }

.history-attendance { width: 100%; min-width: 0; }
.history-attendance > summary { cursor: pointer; min-height: 44px; align-content: center; color: var(--color-ocean); }
.history-attendance > ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.history-attendance > ul > li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--color-border); overflow-wrap: anywhere; }

.plans-hero { margin-bottom: 1rem; }
.plans-hero p { margin-top: .5rem; margin-bottom: .5rem; }
.plan-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.plan-price-period { font-size: .95rem; font-weight: 400; letter-spacing: normal; color: var(--color-muted); }
.plan-card-position { min-height: 0; }
.plan-card-highlights { margin-top: .75rem; padding-top: .65rem; gap: .4rem; align-content: start; }

@media (min-width: 48rem) {
    .plan-card-highlights { align-content: space-between; }
}

.plan-card-limits { border-top: 1px solid rgba(10, 61, 107, .12); padding-top: .65rem; margin-top: .85rem; font-size: .85rem; color: var(--color-muted); }
.plan-card-limits p { margin: 0 0 .3rem; }
@media (min-width: 48rem) { .plan-card-limits { min-height: 4.5rem; } }

.info-tip { display: inline; }
.info-tip-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin-left: .25rem; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-ocean); font: inherit; font-weight: 700; cursor: pointer; vertical-align: middle; }
.info-tip-trigger:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; }
.info-tip-content { max-width: min(22rem, calc(100vw - 3rem)); padding: 1rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); color: var(--color-ink); font-size: .95rem; line-height: 1.5; box-shadow: 0 8px 24px rgba(10, 61, 107, .18); }
.plan-fee-note { font-size: .875rem; color: var(--color-muted); margin: .65rem 0 0; }
.overview-reporting { margin: 0 0 1rem; }

.plans-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1rem; }
.plans-footer .plan-compare-cta { margin: 0; }
.plans-footer .plan-fee-note { margin: 0 0 0 auto; text-align: right; }
@media (max-width: 48rem) { .plans-footer .plan-fee-note { flex-basis: 100%; margin-left: 0; text-align: left; } }

/* Menu labels stay readable without changing the size on hover or focus. */
.schedule-item-menu-toggle { width: auto; min-width: 2.75rem; gap: .3rem; padding-inline: .55rem; }

.timezone-picker { width: 100%; max-width: 34rem; min-width: 0; }
.field .timezone-picker select, #publish-class-form .timezone-picker select { width: 100%; max-width: 100%; }

.workflow-heading { display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; min-width: 0; }
.workflow-help { display: inline-flex; vertical-align: middle; }
.workflow-help-panel { margin: auto; width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 12px 40px #0003; }
.workflow-help-panel::backdrop { background: #0003; }
.workflow-help-panel h2 { font-size: 1.25rem; }
.workflow-checklist { padding-left: 1.4rem; }
.workflow-checklist li { margin-block: .6rem; }

.workflow-help .info-tip-trigger { width: var(--tap-min); height: var(--tap-min); flex-shrink: 0; }

.calendar-day-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; margin-block: .75rem; }
.calendar-day-controls .field { margin: 0; }
.availability-day-preview { padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.teaching-calendar-list { list-style: none; padding: 0; }
.teaching-calendar-list li { display: grid; gap: .4rem; padding-block: 1rem; border-top: 1px solid var(--color-border); }

.calendar-day-controls a.btn { width: auto; }

.availability-day-preview > summary { cursor: pointer; font-weight: 600; }
.availability-day-summary { display: block; margin-top: .3rem; color: var(--color-muted); font-size: .85rem; font-weight: 400; }
.availability-day-content { padding-top: .5rem; }

.schedule-sheet-head > .workflow-heading { flex-wrap: nowrap; min-width: 0; }
.schedule-sheet-head > .workflow-heading > .workflow-help { flex-shrink: 0; }

/* Compact header icon with a full-size keyboard/touch target. */
.workflow-help > .info-tip-trigger,
.attendance-help > .info-tip-trigger,
.editor-timezone-help > .info-tip-trigger {
    position: relative;
    margin-left: 0;
    border: 0;
    background: transparent;
    font-size: .8rem;
    line-height: 1;
}
.workflow-help > .info-tip-trigger::before,
.attendance-help > .info-tip-trigger::before,
.editor-timezone-help > .info-tip-trigger::before {
    content: "";
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    pointer-events: none;
}
.workflow-help > .info-tip-trigger:hover::before,
.attendance-help > .info-tip-trigger:hover::before,
.editor-timezone-help > .info-tip-trigger:hover::before {
    border-color: var(--color-ocean);
}

/* One management-heading scale across schedule, catalogs, videos and editors. */
.schedule-work-area-heading > h2,
.schedule-work-area-heading > .workflow-heading > h2,
.schedule-sheet-head > h2,
.schedule-sheet-head > .workflow-heading > h2 {
    margin: 0;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
}

.private-slot-buttons .private-slot-choice.is-current { color: var(--color-muted); background: var(--color-inset); border-color: var(--color-border); border-style: dashed; cursor: default; }

.profession-select { width: 100%; min-width: 0; }
.profession-select select { max-width: 28rem; }
.profession-select .class-more-settings { width: 100%; }
.profession-help-rows p { margin: 0 0 .5rem; }
.profession-help-rows p:last-child { margin-bottom: 0; }

/* The bounded customer selector follows the existing wrapping header. */
.booking-language { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.booking-language label { margin: 0; }
.booking-language select, .booking-language button { min-height: var(--tap-min); width: auto; padding: .35rem .5rem; }
.app-header .booking-language label { color: var(--color-on-accent); }

/* Batch 6C-2: longer translated operational actions wrap inside existing controls. */
form[action^='/replays/'] .settings-actions > .btn,
form[action^='/passes/'] .settings-actions > .btn { white-space: normal; min-width: 0; max-width: 100%; }

.language-trigger { display: inline-flex; align-items: center; gap: .4rem; }
.language-menu { position: fixed; inset: auto; margin: 0; min-width: 10rem; max-width: calc(100vw - 16px); padding: .5rem; border: 1px solid var(--color-border, #ddd); border-radius: .65rem; background: var(--color-surface, #fff); color: var(--color-text, #2c3d4f); box-shadow: 0 6px 24px #0002; }
.language-menu p { margin: .25rem .5rem; font-size: .85rem; }
.booking-language .language-menu button { display: flex; width: 100%; align-items: center; gap: .5rem; text-align: left; background: transparent; color: inherit; border: 0; }
.language-menu button span { width: 1rem; }
.language-menu button:hover, .language-menu button:focus-visible { background: #edf3f1; }

.register-card .login-lede { margin-bottom: 0.85rem; }
.register-card .field { margin-bottom: 0.7rem; }
.register-card .legal-signup-notice { margin: 0.65rem 0; line-height: 1.4; }
.register-card .field-help { margin: 0; }
.register-card .password-toggle {
    background: transparent;
    border: 0;
    padding: 0.25rem 0;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.attendance-help { margin: 0 0 1rem; }
.attendance-help > summary.info-tip-trigger {
    width: var(--tap-min);
    height: var(--tap-min);
    color: var(--color-ocean);
    font-weight: 700;
    text-decoration: none;
    list-style: none;
}
.attendance-help > summary::-webkit-details-marker { display: none; }
.attendance-help > summary::marker { content: ""; }
.attendance-help > summary:focus-visible {
    outline: 2px solid var(--color-sky);
    outline-offset: 2px;
}
.attendance-help[open] > summary { margin-bottom: 0.65rem; }

/* Compact roster sheet: metadata and secondary actions share wrapping rows. */
.compact-roster-sheet h2 { margin: .2rem 0 .25rem; }
.compact-roster-sheet .schedule-time { margin: 0 0 .65rem; }
.class-summary-meta, .class-secondary-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
}
.class-summary-meta:empty, .class-secondary-actions:empty { display: none; }
.compact-roster-sheet .class-summary-meta { margin-bottom: .35rem; }
.compact-roster-sheet .class-summary-meta .schedule-price,
.compact-roster-sheet .class-summary-meta .class-occupancy { margin: 0; }
.compact-roster-sheet .class-secondary-actions { margin-bottom: .6rem; }
.compact-roster-sheet .class-replay { display: contents; }
.compact-roster-sheet .class-roster { position: relative; margin-top: .75rem; }
.compact-roster-sheet .class-meta-head { padding-right: 3rem; min-height: var(--tap-min); margin-bottom: .25rem; }
.compact-roster-sheet .attendance-help { margin: 0; }
.compact-roster-sheet .attendance-help > summary { position: absolute; top: 0; right: 0; padding: 0; }
.compact-roster-sheet .attendance-help[open] { margin: .5rem 0; }
.compact-roster-sheet .class-add-picker { padding-top: .75rem; border-top: 1px solid var(--color-border); gap: .35rem; }
.compact-roster-sheet .class-add-list { padding: 0; border: 0; border-radius: 0; background: transparent; }
.compact-roster-sheet .class-add-list label { align-items: center; padding: .25rem 0; }
.compact-roster-sheet .class-add-list input { margin: 0; }
.compact-roster-sheet .class-add-picker > .btn { width: auto; align-self: flex-end; min-width: 5rem; }
.compact-roster-sheet .class-save-attendance { margin: .5rem 0 .75rem; }
.compact-roster-sheet .btn { min-height: 2.75rem; padding-top: .55rem; padding-bottom: .55rem; }

/* Cohesive compact workspaces: keep controls readable and secondary detail quiet. */
.class-editor-clean .editor-group { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.class-editor-clean .editor-group:first-of-type { padding-top: .25rem; }
.class-editor-clean .editor-group > h3,
.settings-tools-heading { margin: 0 0 .75rem; color: var(--color-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.class-editor-clean .field { margin-bottom: .75rem; }
.class-editor-clean .editor-group > #class-timezone-hint { margin: -.3rem 0 .75rem; font-size: .8rem; }
.class-editor-clean .class-more-settings { margin: .8rem 0; }
.class-editor-clean .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.class-editor-clean .field-row > * { min-width: 0; }
.publish-review { margin: .85rem 0; padding: .75rem .9rem; border-radius: .5rem; background: var(--color-inset); color: var(--color-ink); font-size: .875rem; line-height: 1.6; white-space: pre-line; }
.class-editor-clean .settings-actions { justify-content: flex-end; border-top: 1px solid var(--color-border); padding-top: .85rem; }
.people-primary-toolbar { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin: .65rem 0; }
.people-primary-toolbar .people-roster-search { flex: 1 1 18rem; margin: 0; }
.people-primary-toolbar .people-email-action { width: auto; margin: 0; }
.clean-people .people-table td { padding-top: .7rem; padding-bottom: .7rem; }
.clean-people .people-invite-tools { margin-top: .65rem; }
.clean-business .settings-card,
.clean-account .settings-card { padding: 1rem 1.15rem; margin-bottom: .85rem; }
.clean-business .settings-fold-summary,
.clean-account .settings-fold-summary { gap: .35rem .75rem; }
.clean-business .settings-fold-status,
.clean-account .settings-fold-status { line-height: 1.4; }
.clean-account .integration-item { gap: .75rem; padding: .85rem 0; }
.clean-account .integration-item > div:first-child { min-width: 0; }
.clean-account .integration-actions { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.settings-tools-heading { margin-top: 1.5rem; }
.clean-business .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.clean-business .field-row > * { min-width: 0; }
.clean-passes .pass-plan-grid { gap: 1rem; }
.clean-passes .pass-plan-card { padding: 1rem; }
.clean-passes .pass-plan-card p { margin-top: .4rem; margin-bottom: .4rem; }
.clean-passes .pass-plan-cost { margin: .85rem 0 .65rem; }
.clean-passes .pass-plan-price { font-size: 1.5rem; margin: 0; }
.clean-passes .pass-plan-billing { color: var(--color-muted); font-size: .875rem; }
.clean-passes .pass-plan-card .settings-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 1rem; }
.compact-login .login-divider { margin: 1rem 0; }
.compact-login .legal-signup-notice { margin: .65rem 0; line-height: 1.45; font-size: .8rem; }
.compact-login .login-password-extra { text-align: right; margin: .6rem 0 .85rem; }
.compact-login .login-footer { margin-top: 1rem; }
.compact-login .password-toggle { background: transparent; border: 0; padding: .25rem 0; font: inherit; font-size: .875rem; cursor: pointer; }
@media (max-width: 40rem) {
    .class-editor-clean .field-row,
    .clean-business .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .people-primary-toolbar .people-roster-search { flex-basis: 100%; }
    .clean-account .integration-item { flex-wrap: wrap; }
    .clean-passes .pass-plan-card .settings-actions .btn { width: auto; }
}
.clean-people .home-hero .workflow-heading { flex-wrap: wrap; }
.clean-people .home-hero .people-invite-action { margin-left: auto; width: auto; }
@media (max-width: 40rem) {
    .clean-people .home-hero .people-invite-action { margin-left: 0; }
}
.class-editor-clean .field > input:not([type="checkbox"]):not([type="radio"]),
.class-editor-clean .field > select { width: 100%; max-width: 100%; }
#publish-class-form.class-editor-clean .field > input:not([type="checkbox"]):not([type="radio"]):not([type="date"]),
#publish-class-form.class-editor-clean .field > select { width: 100%; max-width: 100%; align-self: stretch; }
.clean-passes .pass-view-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.clean-passes .pass-view-tabs > .btn { width: auto; flex: 1 1 auto; }

/* Keep language and close actions in the editor heading instead of a separate row. */
.schedule-editor .schedule-sheet-head { padding-block: .5rem; margin-bottom: .5rem; gap: .75rem; flex-wrap: wrap; }
.editor-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .85rem; margin-left: auto; }
.editor-header-actions .booking-language { margin: 0; }
.editor-header-actions .language-trigger { min-height: var(--tap-min); padding: .35rem .55rem; border: 1px solid var(--color-border); border-radius: .4rem; background: var(--color-surface); color: var(--color-ocean); font: inherit; font-size: .875rem; cursor: pointer; }
.class-editor-clean .editor-group { padding: .75rem 0; }
.class-editor-clean .editor-group:first-of-type { padding-top: 0; }
.class-editor-clean .editor-group > h3 { margin-bottom: .55rem; }
.editor-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; margin-bottom: .55rem; }
.editor-group-head > h3 { margin: 0; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.editor-group-head .editor-timezone { margin: 0 0 0 auto; font-size: .8rem; overflow-wrap: anywhere; }
.editor-timezone-help { position: relative; }
.editor-timezone-help > summary { list-style: none; margin: 0; width: var(--tap-min); height: var(--tap-min); }
.editor-timezone-help > summary::-webkit-details-marker { display: none; }
.editor-timezone-help > summary::marker { content: ""; }
.editor-timezone-help > p { position: absolute; right: 0; top: 100%; width: min(19rem, calc(100vw - 3rem)); z-index: 3; padding: .75rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .5rem; box-shadow: 0 4px 16px #0002; }
.class-editor-clean .class-more-settings[data-meeting-disclosure] { margin: .25rem 0 0; padding: 0; border: 0; }
.class-editor-clean .class-more-settings[data-meeting-disclosure] > summary { padding-block: .35rem; }
.class-editor-clean > .class-more-settings { border-top: 0; margin-top: 0; }

/* Account summaries and separate sign-in rows match the approved layout. */
.account-profile-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; width: 100%; }
.account-summary-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: 50%; object-fit: cover; background: var(--color-inset); color: var(--color-ocean); font-size: 1rem; font-weight: 600; }
.account-profile-edit { margin-left: auto; color: var(--color-sky); text-decoration: underline; text-underline-offset: .18rem; }
.clean-account #account-profile[open] .account-profile-edit { display: none; }
.clean-account .account-email-row { border-bottom: 1px solid var(--color-border); margin-top: .5rem; }
.clean-account .account-email-row > div > span { display: block; }
.clean-business .business-identity-fields .field,
.clean-business .business-locale-fields .field { width: 100%; max-width: 100%; }
.clean-business .business-identity-fields input,
.clean-business .business-locale-fields select { width: 100%; max-width: 100%; }
.clean-passes .pass-list > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1rem; align-items: start; padding-block: .75rem; }
.clean-passes .pass-holder-identity,
.clean-passes .pass-holder-balance { min-width: 0; overflow-wrap: anywhere; }
.clean-passes .pass-holder-balance { text-align: right; }
.clean-passes .pass-list > li > .pass-toolbar { grid-column: 1 / -1; margin-top: .25rem; }
@media (max-width: 25rem) {
    .clean-passes .pass-list > li { grid-template-columns: minmax(0, 1fr); }
    .clean-passes .pass-holder-balance { text-align: left; }
}
.clean-passes .pass-holder-identity,
.clean-passes .pass-holder-balance { display: flex; flex-direction: column; gap: .2rem; }
.tag-dialog-head { flex-wrap: wrap; }
.tag-dialog-head > h2 { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.tag-dialog-head > .editor-header-actions { flex: 0 0 auto; }

/* Customer browsing and account tabs stay on one row on small screens. */
@media (max-width: 40rem) {
    .customer-schedule > .customer-schedule-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        max-width: 100%;
        min-width: 0;
        padding: 3px;
        gap: .15rem;
    }
    .customer-schedule-tabs .app-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
        padding: 0 .75rem;
        font-size: .75rem;
    }
}


/* Shared form feedback, controls and dialog chrome across account workspaces. */
.app-message { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5; border: 1px solid currentColor; border-left-width: 3px; }
.app-message > .app-icon { flex: 0 0 1.2rem; margin-top: .15rem; }
.app-message-content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-message-content > :last-child { margin-bottom: 0; }
.app-message[hidden] { display: none; }
.app-status-badge { vertical-align: middle; white-space: nowrap; font-size: .8rem; }
.private-appointment-status { grid-column: 2; grid-row: 1; justify-self: end; }
.searchable-select, .search-select-ui { width: 100%; min-width: 0; }
.search-select-ui[hidden], .searchable-select > select[hidden] { display: none; }
.search-select-ui fluent-dropdown { width: 100%; min-width: 0; border: 1px solid var(--color-border); border-radius: .45rem; background: var(--color-surface); color: var(--color-ink); }

.search-select-ui [role="listbox"] { max-height: min(18rem, 40dvh); overflow: auto; }
.dialog-close, .dialog-close:visited { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-min); min-height: var(--tap-min); flex-shrink: 0; border-radius: .45rem; color: var(--color-ocean); text-decoration: none; }
.dialog-close:hover { background: var(--color-sky-wash); }
.dialog-close .app-icon { width: 1.25rem; height: 1.25rem; }
.schedule-sheet-head, .tag-dialog-head { align-items: center; gap: .75rem; }
.schedule-sheet-head h2, .tag-dialog-head h2 { line-height: 1.3; overflow-wrap: anywhere; }
.btn, .schedule-register { border-radius: .45rem; min-height: var(--tap-min); line-height: 1.2; gap: .4rem; }
.btn:focus-visible, .schedule-register:focus-visible, .dialog-close:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"], .schedule-register[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.settings-actions { align-items: center; }

.field .searchable-select .search-select-ui input[role="combobox"],
.field .searchable-select .search-select-ui input[role="combobox"]:focus {
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    min-height: var(--tap-min);
}

.search-select-ui fluent-dropdown:focus-within { outline: 2px solid var(--color-sky); outline-offset: 2px; border-radius: .45rem; }