:root {
    /* Camp arc tokens (variant F) */
    --shell-3: #151b25;

    --aerobic-tint: rgba(156, 163, 255, 0.12);
    --aerobic-line: #9ca3ff;
    --aerobic-strong: rgba(156, 163, 255, 0.22);

    --fight-tint: rgba(98, 230, 198, 0.12);
    --fight-line: #62e6c6;
    --fight-strong: rgba(98, 230, 198, 0.22);

    --taper-tint: rgba(248, 113, 113, 0.12);
    --taper-line: #f87171;
    --taper-strong: rgba(248, 113, 113, 0.20);

    --prep-tint: rgba(148, 163, 184, 0.12);
    --prep-line: #94a3b8;
    --prep-strong: rgba(148, 163, 184, 0.22);

    --weight-tint: rgba(251, 191, 36, 0.12);
    --weight-line: #fbbf24;
    --weight-strong: rgba(251, 191, 36, 0.22);

    --t-fast: 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Light theme override — keep wk cards readable on a light page */
:root[data-theme="light"] {
    --shell-3: #eaf0f6;
}

/* ── Custom tooltips (replaces native title=) ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--shell);
    color: var(--text);
    border: 1px solid var(--line);
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease 80ms;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
[data-tooltip-side="right"]::after {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}
[data-tooltip-side="left"]::after {
    bottom: auto;
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
}
[data-tooltip-side="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}
[data-tooltip-align="start"]::after {
    left: 0;
    transform: translateX(0);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; }

/* ── V2 Shell ── */

.v2-shell {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: 1fr;
    height: 100dvh;
    overflow: hidden;
    font-family: "IBM Plex Sans", sans-serif;
}

.v2-main {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.v2-content-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-row: 3;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
    position: relative;
}

/* ── Sidebar (desktop) ── */

.v2-sidebar {
    padding: 16px 16px 16px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    background: var(--shell);
    border-right: 1px solid var(--line);
    overflow: visible;
}

.v2-sidebar-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-sidebar-brand,
.v2-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.v2-sidebar-brand:hover,
.v2-mobile-brand:hover {
    border-color: var(--line);
    background: color-mix(in srgb, var(--shell) 60%, transparent);
}

.v2-sidebar-brand:focus-visible,
.v2-mobile-brand:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

.v2-sidebar-brand.is-home,
.v2-mobile-brand.is-home {
    border-color: color-mix(in srgb, var(--signal) 35%, transparent);
    background: color-mix(in srgb, var(--signal) 8%, transparent);
}

.v2-sidebar-brand.is-home .v2-brand-text,
.v2-mobile-brand.is-home .v2-brand-text {
    color: var(--signal);
}

/* Quieter tooltip just for the logo — generic [data-tooltip] is too loud here */
.v2-sidebar-brand[data-tooltip]::after,
.v2-mobile-brand[data-tooltip]::after {
    padding: 3px 7px;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--text-soft);
    background: var(--shell);
    border-color: color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    top: calc(100% + 4px);
    transition-delay: 200ms;
}

.v2-brand-text {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.v2-logo {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--signal);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.v2-sidebar-nav,
.v2-sidebar-bottom {
    display: grid;
    gap: 2px;
}

.v2-sidebar-nav {
    align-content: start;
}


.v2-sidebar-bottom {
    align-content: end;
}

.v2-nav-item {
    position: relative;
    display: block;
    padding: 10px 10px;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    width: 100%;
    transition: color 180ms ease, background 180ms ease;
}

.v2-nav-item:hover,
.v2-nav-item:active,
.v2-nav-item:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    outline: none;
}

.v2-nav-item.active {
    color: var(--text);
    font-weight: 600;
    background: color-mix(in srgb, var(--signal) 18%, transparent);
}

.v2-nav-settings {
    color: var(--text-faint);
    font-size: 0.78rem;
}

/* ── Programming nav parent + sub-items (sidebar & drawer) ── */

/* The parent "Programming" button inherits .v2-nav-item styles;
   we only need to add flex layout for the chevron. */
.v2-nav-item--parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.v2-nav-chevron {
    flex-shrink: 0;
    color: var(--text-faint);
    transition: transform 180ms ease, color 180ms ease;
}

.v2-nav-chevron.is-open {
    transform: rotate(180deg);
    color: var(--text-soft);
}

.v2-nav-subitems {
    background: var(--shell);
    border-left: 1px solid var(--line);
    margin-left: 14px;
    margin-bottom: 14px;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}

.v2-nav-subitem {
    display: block;
    padding: 8px 10px;
    font-size: 0.78rem;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    min-height: 36px;
    transition: color 140ms ease, background 140ms ease;
}

.v2-nav-subitem:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
}

.v2-nav-subitem.active {
    color: var(--signal);
    font-weight: 600;
}

/* Drawer sub-items mirror nav sub-items */
.v2-drawer-item--parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.v2-drawer-subitems {
    background: var(--shell);
    border-left: 1px solid var(--line);
    margin-left: 14px;
    margin-bottom: 14px;
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}

.v2-drawer-subitem {
    display: block;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 140ms ease, background 140ms ease;
}

.v2-drawer-subitem:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
}

.v2-drawer-subitem.active {
    color: var(--signal);
    font-weight: 600;
}

/* ── Programming segmented control (mobile sticky, desktop hidden) ── */

.v2-seg-control {
    display: none;
}

@media (max-width: 900px) {
    .v2-seg-control {
        display: flex;
        /* In v2-main 4-row grid this element sits in row 2 (auto), directly
           below the global header. v2-main is overflow:hidden so sticky has
           no scrolling ancestor to pin against — dropping sticky and letting
           the element scroll naturally with the grid is both simpler and
           consistent across Schedule / Readiness / Camps sub-pages. */
        z-index: 10;
        background: var(--shell);
        border-bottom: 1px solid var(--line);
        padding: 8px 12px;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .v2-seg-control::-webkit-scrollbar {
        display: none;
    }

    .v2-seg-pill {
        flex: 1;
        min-width: 0;
        min-height: 36px;
        padding: 6px 12px;
        border-radius: 6px;
        border: 1px solid var(--line-strong);
        background: var(--shell-2);
        color: var(--text);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
        -webkit-tap-highlight-color: transparent;
        font-family: inherit;
    }

    .v2-seg-pill:hover {
        color: var(--text);
        border-color: var(--line-strong);
    }

    .v2-seg-pill.active {
        color: var(--signal);
        background: color-mix(in srgb, var(--signal) 14%, transparent);
        border-color: color-mix(in srgb, var(--signal) 50%, transparent);
    }

    .v2-seg-pill:focus-visible {
        outline: 2px solid var(--signal);
        outline-offset: 2px;
    }
}

/* ── Focus visible ── */

.v2-shell *:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Mobile header bar ── */

.v2-header-mobile-bar {
    display: none;
}

.v2-header-expanded {
    display: none;
}

.v2-hamburger {
    display: none;
}

button.v2-header-burger {
    display: none;
}

/* ── Desktop header ── */

.v2-header {
    padding: 0 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--bg) 0%, rgba(0, 0, 0, 0.12));
    position: relative;
    z-index: 50;
}

.v2-header-objective {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 8px 0 7px;
    border-bottom: 1px solid var(--line);
}

.v2-objective-text {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    margin: 0;
}

.v2-header-meta {
    color: var(--text-faint);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: capitalize;
}

.v2-meta-sep {
    margin: 0 2px;
    opacity: 0.4;
}

.v2-header-right {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.v2-header-org {
    color: var(--text-soft);
    font-size: 0.78rem;
}

.v2-field-label {
    display: inline;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent, #84d0e4);
    margin-right: 4px;
    white-space: nowrap;
}

.v2-field-label::after {
    content: ':';
}

.v2-field-group {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
}

.v2-header-meta-labeled {
    display: flex;
    gap: 18px;
    align-items: baseline;
}

.v2-header-athlete {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 7px 0 8px;
    background: var(--surface);
    margin: 0 -20px;
    padding-inline: 20px;
    border-bottom: 1px solid var(--line);
}

.v2-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* User menu avatar + popover */
.v2-user-menu {
    position: relative;
}

.v2-user-menu-trigger {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
}

/* When a real photo is shown, remove the fallback initial background */
button.v2-user-menu-trigger.v2-user-menu-trigger--avatar {
    background: transparent;
    border: 1px solid var(--line-strong);
}

.v2-user-menu-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.v2-user-menu-trigger:hover {
    background: var(--surface-strong);
    border-color: var(--signal);
}

.v2-user-menu[data-open] .v2-user-menu-trigger {
    border-color: var(--signal);
    background: var(--surface-strong);
}

.v2-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    max-width: calc(100vw - 24px);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    z-index: 120;
}

.v2-user-menu-row {
    min-width: 0;
}

.v2-user-menu-label,
.v2-user-menu-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-user-menu-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-user-menu-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.v2-user-menu-value {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 600;
    text-transform: capitalize;
}

.v2-user-menu-value.v2-user-menu-value--email {
    text-transform: none;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Team list inside the user-menu panel — flat list of selectable rows */
.v2-user-menu-teams {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.v2-user-menu-teams .v2-user-menu-label {
    margin-bottom: 4px;
}

button.v2-user-menu-team-item {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

button.v2-user-menu-team-item:hover {
    background: var(--surface-strong);
    color: var(--text);
}

button.v2-user-menu-team-item.is-active {
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    border-color: color-mix(in srgb, var(--signal) 35%, transparent);
    color: var(--text);
    font-weight: 600;
    cursor: default;
}

.v2-user-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.v2-user-menu-action {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.v2-user-menu-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    flex-shrink: 0;
}

.v2-user-menu-action-label {
    flex: 1;
}

/* Icon-only variant — small square button for utility toggles like the
   theme switch. Sits at the top of the action list, right-aligned so it
   reads as a quick utility, not a primary action. */
.v2-user-menu-action--icon {
    width: 28px;
    height: 28px;
    padding: 0;
    align-self: flex-end;
    justify-content: center;
    color: var(--text-faint);
}
.v2-user-menu-action--icon:hover {
    color: var(--text);
}

.v2-user-menu-action:hover {
    border-color: var(--line-strong);
    background: var(--shell);
}

.v2-user-menu-action:hover .v2-user-menu-action-icon {
    color: var(--text);
}

.v2-user-menu-action--danger {
    color: var(--danger);
}

.v2-user-menu-action--danger .v2-user-menu-action-icon {
    color: color-mix(in srgb, var(--danger) 70%, transparent);
}

.v2-user-menu-action--danger:hover {
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.v2-user-menu-action--danger:hover .v2-user-menu-action-icon {
    color: var(--danger);
}

.v2-athlete-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Athlete dropdown — big display style, no box */
.v2-athlete-identity .v2-dropdown {
    width: auto;
    min-width: 0;
}

.v2-athlete-identity .v2-dropdown-trigger {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    color: var(--text);
    background: transparent;
    border: none;
    padding: 2px 4px 2px 0;
    min-height: 0;
    border-radius: 6px;
}

.v2-athlete-identity .v2-dropdown-trigger:hover {
    background: var(--surface);
}

.v2-athlete-identity .v2-dropdown-trigger[aria-expanded="true"] {
    background: var(--surface);
    border: none;
}

.v2-athlete-identity .v2-dropdown-caret {
    width: 11px;
    height: 11px;
}

.v2-athlete-identity .v2-dropdown-menu {
    min-width: 240px;
}

/* Mobile header dropdown — compact, no box */
.v2-header-mobile-bar .v2-dropdown {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 240px;
    width: auto;
}

.v2-header-mobile-bar .v2-dropdown-trigger {
    font-size: 0.95rem;
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 6px 8px;
    min-height: 36px;
    width: auto;
    gap: 4px;
    justify-content: flex-start;
}

.v2-header-mobile-bar .v2-dropdown-label {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-header-mobile-bar .v2-dropdown-trigger:hover {
    background: var(--surface);
}

.v2-header-mobile-bar .v2-header-expand {
    margin-left: auto;
    order: 4;
}

.v2-header-mobile-bar .v2-activity-btn {
    order: 5;
}

.v2-header-mobile-bar .v2-user-menu {
    order: 10;
}

.v2-athlete-select {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 20px 4px 0;
    min-height: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23748396' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right center;
}

.v2-athlete-select:focus {
    outline: 1px solid var(--signal);
    outline-offset: 4px;
    border-radius: 4px;
}

.v2-risk-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.v2-risk-stable {
    background: color-mix(in srgb, var(--ok) 14%, transparent);
    color: var(--ok);
}

.v2-risk-watch {
    background: color-mix(in srgb, var(--warn) 14%, transparent);
    color: var(--warn);
}

.v2-risk-constrained,
.v2-risk-high-risk {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

.v2-athlete-posture {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.v2-athlete-posture .v2-field-group {
    white-space: normal;
}

.v2-posture-text {
    color: var(--text-faint);
    font-size: 0.76rem;
    max-width: 36ch;
    text-align: right;
    line-height: 1.4;
}

.v2-confidence {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.2rem;
    letter-spacing: -0.04em;
    color: var(--signal);
}

/* ── Streaming cursor ── */
.v2-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--accent, #84d0e4);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: v2-blink 0.8s step-end infinite;
}

@keyframes v2-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.v2-msg-streaming .v2-streaming-text {
    white-space: pre-wrap;
    min-height: 1.6em;
}

/* ── Loading animation ── */
.v2-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    color: var(--text-faint, #748396);
    font-size: 0.875rem;
}

.v2-loading-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #84d0e4);
    animation: v2-pulse 1.2s ease-in-out infinite;
}

@keyframes v2-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* ── Skeleton shimmer ── */
.v2-msg-skeleton {
    padding: 14px 16px;
}

.v2-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        var(--surface) 25%,
        var(--surface-strong) 50%,
        var(--surface) 75%
    );
    background-size: 200% 100%;
    animation: v2-shimmer 1.5s ease-in-out infinite;
}

.v2-skeleton-title {
    width: 40%;
    height: 16px;
    margin-bottom: 12px;
}

.v2-skeleton-text {
    width: 90%;
    margin-top: 8px;
}

.v2-skeleton-short {
    width: 60%;
}

@keyframes v2-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-skeleton-line { animation: none; }
}

/* ── Chat-first conversation layout ── */
.v2-conversation {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.v2-conversation-actions {
    position: absolute;
    top: 10px;
    right: 16px;
    z-index: 6;
    display: flex;
    gap: 8px;
}

.v2-conversation-actions:empty {
    display: none;
}

.v2-conv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: color-mix(in srgb, var(--shell) 80%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.v2-conv-btn:hover {
    color: var(--text);
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 12%, var(--shell));
}

.v2-conv-btn svg {
    flex-shrink: 0;
}

.v2-mobile-only {
    display: none;
}

@media (max-width: 900px) {
    .v2-mobile-only {
        display: inline-flex;
    }
    /* Push transcript content below the absolute action buttons so they don't overlay */
    .v2-conversation .v2-transcript {
        padding-top: 50px;
    }
}

.v2-transcript {
    flex: 1;
    overflow-y: auto;
    padding: 24px 28px 140px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-strong) transparent;
}

.v2-transcript::-webkit-scrollbar {
    width: 6px;
}

.v2-transcript::-webkit-scrollbar-track {
    background: transparent;
}

.v2-transcript::-webkit-scrollbar-thumb {
    background: var(--surface-strong);
    border-radius: 3px;
}

.v2-transcript::-webkit-scrollbar-thumb:hover {
    background: var(--line);
}

/* ── Quick prompts near composer ── */
.v2-prompts-composer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.v2-prompts-composer::-webkit-scrollbar {
    display: none;
}

button.v2-prompt {
    font-size: 0.8125rem;
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-faint, #748396);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    min-height: 32px;
}

button.v2-prompt:hover {
    border-color: var(--accent, #84d0e4);
    color: var(--text, #eef3f8);
}

/* Quick prompt carousel — sits just above the composer */
.v2-prompts-carousel {
    position: relative;
    margin: 0 0 8px;
}

.v2-prompts-tiles {
    display: flex;
    gap: 8px;
    padding: 2px 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    mask-image: linear-gradient(to right, transparent 0, var(--bg) 20px, var(--bg) calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--bg) 20px, var(--bg) calc(100% - 32px), transparent 100%);
}

@media (min-width: 640px) {
    .v2-prompts-tiles {
        padding: 2px 44px;
        margin-inline: 44px;
        mask-image: linear-gradient(to right, transparent 0, var(--bg) 12px, var(--bg) calc(100% - 12px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0, var(--bg) 12px, var(--bg) calc(100% - 12px), transparent 100%);
    }
}

.v2-prompts-nav {
    display: none;
}

@media (min-width: 640px) {
    .v2-prompts-nav {
        display: grid;
        place-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--line-strong);
        background: var(--surface-strong);
        color: var(--text-soft);
        cursor: pointer;
        z-index: 2;
        transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }

    .v2-prompts-nav:hover {
        color: var(--text);
        border-color: var(--signal);
        background: var(--shell-2);
    }

    .v2-prompts-nav-prev { left: 4px; }
    .v2-prompts-nav-next { right: 4px; }
}

.v2-prompts-tiles::-webkit-scrollbar {
    display: none;
}

button.v2-prompt-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    flex: 0 0 auto;
    scroll-snap-align: start;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

@media (min-width: 640px) {
    button.v2-prompt-tile {
        padding: 14px 16px;
        border-radius: 14px;
    }
}

button.v2-prompt-tile:hover {
    border-color: var(--accent, #84d0e4);
    background: var(--surface-strong);
    transform: translateY(-1px);
}

.v2-prompt-tile-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.v2-prompt-tile-preview {
    display: none;
}

.v2-transcript-empty {
    display: flex;
    flex: 1;
    align-items: center;
}

/* ── Messages ── */

.v2-msg {
    line-height: 1.55;
}

.v2-msg p {
    margin: 4px 0 0;
    color: var(--text-soft);
}

.v2-msg-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-bottom: 4px;
}

/* ── User message (signal-tinted bubble, distinct from page bg) ── */
.v2-msg-user {
    align-self: flex-end;
    max-width: 75%;
    padding: 8px 14px;
    border-radius: 14px 14px 4px 14px;
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
    color: var(--text);
}

.v2-msg-user p {
    color: var(--text);
}

.v2-msg-user .v2-msg-label {
    color: var(--signal);
}

/* ── Assistant message (legacy, no-op container) ── */
.v2-msg-assistant {
    max-width: 100%;
}

/* ── Conversational reply (non-decision intent) ── */
.v2-msg-reply {
    max-width: 80%;
    padding: 4px 0;
    color: var(--text-soft);
}

.v2-msg-reply-body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
}

.v2-msg-reply-body p {
    margin: 0 0 8px;
}

.v2-msg-reply-ts {
    display: block;
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.v2-stop-btn {
    min-height: 44px;
    min-width: 72px;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    background: rgba(220, 80, 80, 0.15);
    color: #dc5050;
    border: 1px solid rgba(220, 80, 80, 0.3);
    cursor: pointer;
}

.v2-stop-btn:hover {
    background: rgba(220, 80, 80, 0.25);
}

/* ── Historical decision (single-line row) ── */
.v2-msg-historical {
    appearance: none;
    background: transparent;
    border: none;
    border-left: 2px solid var(--line);
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    display: flex;
    gap: 12px;
    align-items: baseline;
    cursor: pointer;
    color: var(--text-soft);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color 180ms ease, background 180ms ease, padding-left 180ms ease;
}

.v2-msg-historical:hover,
.v2-msg-historical:focus-visible {
    border-left-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    padding-left: 18px;
    outline: none;
}

.v2-msg-historical .stance {
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
    font-size: 0.86rem;
    flex-shrink: 0;
}

.v2-msg-historical .question {
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.v2-msg-historical .ts {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Historical decision, expanded inline */
.v2-msg-historical-expanded {
    position: relative;
}

.v2-msg-historical-collapse {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-faint);
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.v2-msg-historical-collapse:hover {
    color: var(--text);
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 10%, var(--surface));
}

.v2-msg-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.v2-msg-head .v2-msg-label {
    margin-bottom: 0;
}

.v2-msg-meta {
    color: var(--text-faint);
    font-size: 0.74rem;
}

/* ── Athlete switch animations ── */
@keyframes v2-athlete-slide-in {
    0% {
        opacity: 0;
        transform: translateX(16px);
        filter: blur(4px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}

.v2-athlete-switching .v2-decision,
.v2-athlete-switching .v2-status,
.v2-athlete-switching .v2-msg,
.v2-athlete-switching .v2-prompts-tiles {
    animation: v2-athlete-slide-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.v2-athlete-switching .v2-msg:nth-child(2)   { animation-delay: 40ms; }
.v2-athlete-switching .v2-msg:nth-child(3)   { animation-delay: 80ms; }
.v2-athlete-switching .v2-msg:nth-child(4)   { animation-delay: 120ms; }
.v2-athlete-switching .v2-msg:nth-child(n+5) { animation-delay: 160ms; }

@keyframes v2-athlete-pulse {
    0% {
        color: var(--text);
        text-shadow: 0 0 0 transparent;
    }
    40% {
        color: var(--signal);
        text-shadow: 0 0 18px color-mix(in srgb, var(--signal) 60%, transparent);
    }
    100% {
        color: var(--text);
        text-shadow: 0 0 0 transparent;
    }
}

.v2-athlete-name-pulse {
    animation: v2-athlete-pulse 600ms ease-out;
}

/* ── Status (empty state — no decision) ── */
.v2-status {
    padding: 18px 22px;
    border-left: 2px solid var(--state-color, var(--line));
    color: var(--text-soft);
}

.v2-status[data-state="high-risk"]   { --state-color: var(--danger); }
.v2-status[data-state="watch"]       { --state-color: var(--warn); }
.v2-status[data-state="stable"]      { --state-color: var(--ok); }

.v2-status-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.v2-status-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--state-color, var(--text-faint));
    margin-bottom: 8px;
}

.v2-status-sep {
    opacity: 0.5;
    color: var(--text-faint);
}

.v2-status-system {
    font-size: 0.95rem;
    color: var(--text-soft);
    margin-bottom: 8px;
}

.v2-status-system-state {
    color: var(--state-color, var(--text));
    font-weight: 700;
    letter-spacing: 0.05em;
}

.v2-status-hint {
    font-size: 0.86rem;
    color: var(--text-faint);
    margin: 14px 0 0;
}

.v2-status-summary {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    margin: 8px 0 16px;
    line-height: 1.4;
}

/* ── Fight-week badge + taper note ── */
.v2-fight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    color: var(--warn);
    white-space: nowrap;
    line-height: 1.2;
}

.v2-fight-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
}

.v2-fight-badge[data-stage="race-day"] {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 22%, transparent);
    color: var(--danger);
    animation: fightPulse 1.6s ease-in-out infinite;
}

@keyframes fightPulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 0%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 22%, transparent); }
}

.v2-status-taper,
.v2-decision[data-fight-stage] .v2-decision-taper {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-left: 3px solid var(--warn);
    background: color-mix(in srgb, var(--warn) 7%, transparent);
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.4;
    border-radius: 0 8px 8px 0;
}

.v2-status-taper[data-stage="race-day"] {
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 9%, transparent);
}

/* Card-level fight-week accent — a colored top rail so the whole
   surface reads 'we're in the sharp end of camp'. */
.v2-status.is-fight-week,
.v2-decision.is-fight-week {
    position: relative;
    box-shadow: inset 0 3px 0 0 var(--warn);
}

.v2-status[data-fight-stage="race-day"],
.v2-decision[data-fight-stage="race-day"] {
    box-shadow: inset 0 3px 0 0 var(--danger);
}

/* Header meta emphasis when in fight week */
.v2-header-meta[data-fight-stage] {
    color: var(--warn);
    font-weight: 600;
}

.v2-header-meta[data-fight-stage="race-day"] {
    color: var(--danger);
}

.v2-status-flags {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.v2-status-flags-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0 0 18px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s ease;
}

.v2-status-flags-link:hover {
    color: var(--signal);
}

.v2-status-flags-link span {
    transition: transform 0.15s ease;
}

.v2-status-flags-link:hover span {
    transform: translateX(2px);
}

.v2-status-flag {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "name value" "sub sub";
    column-gap: 12px;
    row-gap: 4px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.v2-status-flag[data-status="danger"]  { --flag-color: var(--danger); }
.v2-status-flag[data-status="warning"] { --flag-color: var(--warn); }

.v2-status-flag-name {
    grid-area: name;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    position: relative;
    padding-left: 14px;
}

.v2-status-flag-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--flag-color, var(--line));
}

.v2-status-flag-value {
    grid-area: value;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--flag-color, var(--text));
    font-variant-numeric: tabular-nums;
}

.v2-status-flag-sub {
    grid-area: sub;
    font-size: 0.74rem;
    color: var(--text-faint);
    padding-left: 14px;
}

.v2-status-metrics {
    font-size: 0.78rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    margin: 0 0 6px;
    letter-spacing: 0.02em;
}

/* ── Decision surface (stance / action / worst system / why) ── */
.v2-decision {
    position: relative;
    padding: 24px 28px 20px;
    background: var(--shell);
    border-top: 4px solid var(--state-color, var(--line-strong));
    border-bottom: 1px solid var(--line);
}

.v2-decision[data-state="high-risk"]   { --state-color: var(--danger); }
.v2-decision[data-state="watch"]       { --state-color: var(--warn); }
.v2-decision[data-state="stable"]      { --state-color: var(--ok); }

.v2-decision-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.v2-decision-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--state-color, var(--text-faint));
    margin: 0;
    line-height: 1;
}

.v2-decision-title::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--state-color, var(--text-faint));
}

.v2-decision-days {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.v2-decision-action {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: 18px;
}

.v2-decision-why-flag {
    padding: 8px 12px;
    border-left: 2px solid var(--state-color, var(--line));
    background: color-mix(in srgb, var(--state-color, var(--line)) 6%, transparent);
    font-size: 0.88rem;
    color: var(--text-soft);
    margin: 4px 0 12px;
    border-radius: 0 6px 6px 0;
}


.v2-decision-why-flag-name {
    color: var(--text);
    font-weight: 600;
}

.v2-decision-why-flag-state {
    color: var(--state-color, var(--text));
    font-weight: 700;
    letter-spacing: 0.02em;
}

.v2-decision-why-summary {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 8px 0;
    user-select: none;
    transition: color 0.15s ease;
}

.v2-decision-why-summary:hover { color: var(--text-soft); }

.v2-decision-why[data-open="false"] .v2-decision-why-summary::before { content: '▸  '; }
.v2-decision-why[data-open="true"]  .v2-decision-why-summary::before { content: '▾  '; }

.v2-decision-why[data-open="true"] {
    padding-top: 4px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
}

.v2-decision-why-body {
    padding: 4px 0 8px;
}

.v2-decision-why-body p {
    color: var(--text-soft);
    margin: 4px 0 12px;
}

.v2-decision-why-body ul {
    color: var(--text-soft);
    padding-left: 18px;
    margin: 4px 0;
}

.v2-decision-why-body li {
    margin-bottom: 4px;
}

.v2-decision-why-trust {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.72rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v2-trust-pill {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted color-mix(in srgb, var(--text-faint) 60%, transparent);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.v2-trust-pill:hover {
    color: var(--text);
    border-bottom-color: var(--signal);
}

.v2-trust-pill::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 180px;
    max-width: 320px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    white-space: pre-line;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 100;
}

.v2-trust-pill:hover::after,
.v2-trust-pill:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.v2-msg-body ul {
    margin: 6px 0;
    padding-left: 18px;
}

.v2-msg-body li {
    margin-bottom: 3px;
    line-height: 1.5;
}

.v2-msg-body p {
    margin: 4px 0;
}

.v2-msg-body p:first-child {
    margin-top: 0;
}

.v2-msg-reasoning {
    margin-top: 10px;
}

.v2-msg-reasoning ul {
    margin: 4px 0 0;
    padding-left: 18px;
    color: var(--text-soft);
}

.v2-msg-reasoning li {
    margin-bottom: 2px;
}

.v2-msg-trust {
    margin-top: 10px;
    display: flex;
    gap: 14px;
    color: var(--text-faint);
    font-size: 0.74rem;
}

/* ── Composer ── */

.v2-composer-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 16px 16px;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(transparent, var(--bg) 20%);
    z-index: 5;
}

.v2-composer {
    display: flex;
    align-items: flex-end;
    gap: 0;
    border-radius: 24px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    padding: 6px 6px 6px 16px;
    transition: border-color 0.15s ease;
}

.v2-composer:focus-within {
    border-color: var(--signal);
}

.v2-composer textarea {
    flex: 1;
    resize: none;
    min-height: 24px;
    max-height: 120px;
    padding: 8px 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    outline: none;
}

.v2-composer textarea::placeholder {
    color: var(--text-faint);
}

.v2-composer textarea:focus,
.v2-composer textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

.v2-composer-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.v2-mic-btn,
.v2-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.v2-mic-btn {
    background: transparent;
    color: var(--text-faint);
}

.v2-mic-btn:hover:not(:disabled) {
    background: var(--surface-strong);
    color: var(--text);
}

.v2-mic-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: var(--text-faint);
}

.v2-mic-active {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--danger);
    animation: v2-pulse 1.2s ease-in-out infinite;
}

.v2-send-btn {
    background: var(--signal);
    color: var(--bg);
}

.v2-send-btn:hover {
    filter: brightness(1.15);
}

/* ── Settings ── */

.v2-toggle-group {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.v2-toggle-group button {
    padding: 6px 14px;
    border-radius: 10px;
    /* Visible border + stronger surface so the inactive pill reads as a
       button against its parent card. The previous `border:none` + plain
       `--surface` (4% tint) made the button bg identical to the card,
       which collapsed the pill outline and made the label appear to float
       against an empty area — especially in light mode where contrast was
       too low for the soft text colour. */
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    transition: background 150ms ease, border-color 150ms ease;
}

.v2-toggle-group button:hover {
    background: var(--surface-strong);
    border-color: var(--line-strong);
}

.v2-toggle-group .is-active {
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    border-color: color-mix(in srgb, var(--signal) 40%, transparent);
    color: var(--signal);
}

.v2-session-identity {
    font-size: 0.75rem;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* ── Settings View ── */

.v2-view-container {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.v2-settings-view {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    width: 100%;
    min-height: 0;
    flex: 1;
}

.v2-settings-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 4px;
    flex-shrink: 0;
}

.v2-settings-sections {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    align-content: start;
    gap: 4px;
    flex: 1;
    min-height: 0;
}

/* Named section wrappers — span all 12 columns, contain their own group layout. */
.v2-settings-section {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-settings-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin: 10px 0 0;
    padding: 0 2px;
}
.v2-settings-section:first-child .v2-settings-section-title {
    margin-top: 0;
}

/* 12-column placement:
     row 1 [Identity 4] [Prefs 4] [About 4]
     row 2 [Quick prompts 6] [Data sources 6]
   Appearance removed (theme toggle lives in the user menu). Send-feedback
   is rendered but hidden on desktop — the bottom-right FAB covers that
   surface; mobile keeps the in-settings form because the FAB is harder to
   reach on small screens. */
.v2-settings-group--identity   { grid-column: span 4; }
.v2-settings-group--prefs      { grid-column: span 4; }
.v2-settings-group--about      { grid-column: span 4; }
.v2-settings-group--prompts    { grid-column: span 6; }
.v2-settings-group--sources    { grid-column: span 6; }
.v2-settings-group--feedback   { display: none; }

/* Tablet: 2 cards per row. */
@media (max-width: 1100px) {
    .v2-settings-sections { grid-template-columns: repeat(2, 1fr); }
    .v2-settings-group--identity,
    .v2-settings-group--prefs,
    .v2-settings-group--prompts,
    .v2-settings-group--sources,
    .v2-settings-group--about { grid-column: span 1; }
    .v2-settings-group--prompts,
    .v2-settings-group--sources { grid-column: span 2; }
}

@media (max-width: 900px) {
    /* Mobile shows the in-settings feedback form because the bottom-right
       FAB is harder to reach on phones (and may collide with bottom-nav). */
    .v2-settings-group--feedback { display: grid; grid-column: span 2; }
}

@media (max-width: 720px) {
    .v2-settings-sections {
        grid-template-columns: 1fr;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .v2-settings-group--prompts,
    .v2-settings-group--sources,
    .v2-settings-group--feedback { grid-column: span 1; }
}

.v2-settings-group {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.v2-settings-label {
    display: grid;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--text-soft);
}

.v2-settings-label input,
.v2-settings-label select,
.v2-settings-label textarea {
    min-height: 30px;
    padding: 0 9px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

/* On touch devices keep 36px minimum for tap targets */
@media (hover: none) {
    .v2-settings-label input,
    .v2-settings-label select,
    .v2-settings-label textarea {
        min-height: 36px;
    }
}

.v2-settings-label textarea {
    min-height: auto;
    padding: 7px 9px;
    resize: vertical;
}

.v2-settings-label input:focus,
.v2-settings-label select:focus,
.v2-settings-label textarea:focus {
    outline: none;
    border-color: var(--signal);
}

/* 2-column mini-grid used in the Identity card (name + org side-by-side) */
.v2-settings-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
@media (max-width: 480px) {
    .v2-settings-row2 { grid-template-columns: 1fr; }
}

/* Inline label: label text left, control right — used in Preferences card */
.v2-settings-label--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
}
.v2-settings-label--inline select,
.v2-settings-label--inline input {
    flex: 0 1 54%;
    min-width: 0;
}

.v2-settings-group button[type="submit"] {
    justify-self: end;
    margin-top: 1px;
    padding: 4px 10px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.v2-settings-group button[type="submit"]:hover {
    border-color: var(--signal);
    background: var(--surface-strong);
}

/* Compact dropdown trigger height inside settings cards */
.v2-settings-group .v2-dropdown-trigger {
    min-height: 30px;
    font-size: 0.82rem;
    padding: 0 9px;
    border-radius: 7px;
}

/* ── Settings: Data Sources ── */
.v2-data-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.v2-data-source-name {
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 600;
}

.v2-data-source-status {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.v2-data-source-connected {
    background: color-mix(in srgb, var(--ok) 14%, transparent);
    color: var(--ok);
}

.v2-data-source-not-configured {
    background: var(--surface-strong);
    color: var(--text-faint);
}

/* "Coming soon" rows are visibly inert — desaturated label, faint pill,
   reduced opacity. No hover/cursor changes since they're non-interactive. */
.v2-data-source-row--soon {
    opacity: 0.55;
}

.v2-data-source-row--soon .v2-data-source-name {
    color: var(--text-soft);
    font-weight: 500;
}

.v2-data-source-soon {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--text-faint);
    font-weight: 500;
}

/* 2-column grid for integrations — denser information density on desktop. */
.v2-data-source {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 8px;
}
@media (max-width: 480px) {
    .v2-data-source { grid-template-columns: 1fr; }
}

/* Settings-scoped label override — the global .v2-msg-label is shared with
   chat message headers; keep the global rule and just shrink the bottom
   margin in settings cards so the box stays tight. */
.v2-settings-view .v2-msg-label {
    margin-bottom: 0;
    font-size: 0.62rem;
}

/* ── Settings: About ── */
.v2-about-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.v2-about-label {
    font-size: 0.78rem;
    color: var(--text-faint);
}

.v2-about-value {
    font-size: 0.78rem;
    color: var(--text-soft);
}

/* ── Settings: Left-rail + Right-pane shell (LinkedIn-style) ── */

/* Desktop: two-column — fixed rail left, fluid pane right. */
.v2-settings-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    flex: 1;
    min-height: 0;
    align-items: start;
}

.v2-settings-rail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.v2-settings-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-soft);
    border: 0;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 140ms ease, color 140ms ease;
    -webkit-tap-highlight-color: transparent;
}

.v2-settings-rail-item:hover {
    background: var(--shell);
    color: var(--text);
}

.v2-settings-rail-item.is-active {
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    color: var(--signal);
    border-left: 2px solid var(--signal);
    padding-left: 10px;
}

.v2-settings-rail-item:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

.v2-settings-rail-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v2-settings-pane {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Mobile tab pills — shown only below 900px; hidden on desktop. */
.v2-settings-tabs {
    display: none;
}

.v2-settings-pane-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Inside the pane, groups fill available width. */
.v2-settings-pane-body .v2-settings-group {
    grid-column: unset;
    width: 100%;
    max-width: 640px;
}

/* Widen the prompts + sources groups since they have more content. */
.v2-settings-pane-body .v2-settings-group--prompts,
.v2-settings-pane-body .v2-settings-group--sources {
    max-width: 760px;
}

@media (max-width: 900px) {
    /* Stack to single column; rail hides, tabs appear. */
    .v2-settings-shell {
        display: block;
    }

    .v2-settings-rail {
        display: none;
    }

    .v2-settings-tabs {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
        margin-bottom: 10px;
    }

    .v2-settings-tabs::-webkit-scrollbar {
        display: none;
    }

    .v2-settings-tab-pill {
        flex-shrink: 0;
        padding: 5px 12px;
        border-radius: 6px;
        border: 1px solid var(--line);
        background: transparent;
        color: var(--text-soft);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        font-family: inherit;
        transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .v2-settings-tab-pill:hover {
        color: var(--text);
        border-color: var(--line-strong);
    }

    .v2-settings-tab-pill.is-active {
        color: var(--signal);
        background: color-mix(in srgb, var(--signal) 14%, transparent);
        border-color: color-mix(in srgb, var(--signal) 50%, transparent);
    }

    .v2-settings-tab-pill:focus-visible {
        outline: 2px solid var(--signal);
        outline-offset: 2px;
    }

    .v2-settings-pane-body .v2-settings-group {
        max-width: unset;
    }

    .v2-settings-pane-body .v2-settings-group--prompts,
    .v2-settings-pane-body .v2-settings-group--sources {
        max-width: unset;
    }
}

/* ── Athlete Setup View ── */

.v2-athlete-setup-view {
    max-width: 1100px;
}

.v2-athlete-setup-view .v2-settings-sections {
    overflow: hidden;
}

@media (min-width: 900px) {
    .v2-athlete-setup-view .v2-settings-sections {
        display: grid;
        grid-template-columns: minmax(260px, 340px) 1fr;
        gap: 12px;
        align-items: start;
    }
}

.v2-athlete-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px 10px;
}

.v2-athlete-form-grid .v2-athlete-form-wide {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .v2-athlete-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .v2-athlete-form-grid {
        grid-template-columns: 1fr;
    }
}

.v2-athlete-custom-form .v2-settings-label {
    gap: 3px;
    font-size: 0.75rem;
}

.v2-athlete-custom-form .v2-settings-label input,
.v2-athlete-custom-form .v2-settings-label select,
.v2-athlete-custom-form .v2-dp-trigger {
    min-height: 32px;
    padding: 0 10px;
    font-size: 0.8125rem;
}

.v2-athlete-setup-desc {
    font-size: 0.8125rem;
    color: var(--text-faint);
    margin: 0 0 10px;
    flex-shrink: 0;
}

.v2-seed-list {
    display: grid;
    gap: 5px;
}

.v2-seed-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: left;
}

.v2-seed-option:hover {
    border-color: var(--signal);
    background: var(--surface-strong);
}

.v2-seed-option strong {
    font-size: 0.875rem;
}

.v2-seed-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--text-faint);
    white-space: nowrap;
}

.v2-settings-group select {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.v2-settings-group select:focus {
    outline: none;
    border-color: var(--signal);
}

/* ── Twin View ── */

.v2-twin-view {
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: var(--bg);
}

.v2-twin-view .twin-pane {
    padding: 0;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.twin-pane-empty {
    display: grid;
    place-items: center;
    place-content: center;
    text-align: center;
    padding: 48px 24px;
    color: var(--text-faint);
    gap: 8px;
}

.twin-pane-empty h2 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-soft);
    margin: 0;
}

.twin-pane-empty p {
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 32ch;
    margin: 0;
}

.v2-twin-view .twin-canvas {
    border: none;
    box-shadow: none;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
}

/* ── 3D Twin ── */

.twin-3d-stage {
    flex: 1;
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: 0;
    position: relative;
    background: radial-gradient(ellipse at 50% 40%, var(--shell-2) 0%, var(--bg) 70%);
}

.twin-3d-cards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 16px;
    z-index: 10;
    overflow-y: auto;
}

.twin-3d-body-area {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.twin-3d-readiness-overlay {
    text-align: center;
    padding: 8px 0;
    z-index: 5;
    flex-shrink: 0;
}

.twin-3d-canvas {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.twin-3d-readiness-score {
    display: block;
    font-size: 32px;
    font-weight: 800;
    font-family: "Bricolage Grotesque", sans-serif;
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 0, 0, 0.4);
}

.twin-3d-readiness-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 4px;
}

/* Loading */
.twin-3d-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: opacity 0.5s ease-out;
}

.twin-3d-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

.twin-3d-loading p {
    color: var(--text-faint);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 24px;
}

.twin-3d-pulse {
    width: 80px;
    height: 160px;
    border: 2px solid rgba(132, 208, 228, 0.15);
    border-radius: 40px 40px 30px 30px;
    animation: twin3d-pulse 1.5s ease-in-out infinite;
}

@keyframes twin3d-pulse {
    0%, 100% { opacity: 0.3; transform: scale(0.95); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

/* Category cards */
.twin-3d-stage .card {
    border-radius: 12px;
    background: #1a2636;
    padding: 12px 14px;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
    border: 1.5px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
    position: relative;
    z-index: 1;
}

@media (hover: hover) {
    .twin-3d-stage .card:hover:not(.expanded) {
        transform: translateY(-2px) scale(1.015);
        border-color: color-mix(in srgb, var(--status-color, var(--signal)) 40%, transparent);
        background: color-mix(in srgb, var(--status-color, var(--signal)) 8%, #1a2636);
        box-shadow: 0 6px 20px color-mix(in srgb, var(--status-color, var(--signal)) 18%, transparent);
        z-index: 3;
    }

    .twin-3d-stage .card:hover .card-dot {
        transform: scale(1.2);
        box-shadow: 0 0 12px color-mix(in srgb, var(--status-color, var(--signal)) 60%, transparent);
    }
}

.twin-3d-stage .card-dot {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.twin-3d-stage .card:active {
    transform: scale(0.97);
}

.twin-3d-stage .card.dimmed {
    pointer-events: auto;
}
.twin-3d-stage .card.dimmed > * {
    opacity: 0.5;
}

.twin-3d-stage .card.expanded {
    z-index: 10;
    transform: scale(1.02);
    border-color: var(--status-color);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--status-color) 25%, transparent);
}

.twin-3d-stage .card-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: var(--status-color);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.twin-3d-stage .card-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

.twin-3d-stage .card-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twin-3d-stage .card-sublabel {
    font-size: 11px;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twin-3d-stage .card-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--status-color);
    margin-top: 2px;
}
.card-trend {
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
}
.card-trend--up {
    color: var(--color-good, #22C55E);
}
.card-trend--down {
    color: var(--color-danger, #EF4444);
}

.twin-3d-stage .card.expanded .card-label {
    color: var(--text);
}

/* Mobile carousel — hidden by default, shown on small screens */
.twin-3d-carousel {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 12px 16px;
    z-index: 10;
}

/* Inline detail overlay */
.card-detail-overlay {
    position: relative;
    z-index: 10;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 12px;
    border-radius: 8px;
    background: #1a2636;
    border: 1px solid color-mix(in srgb, var(--status-color) 40%, var(--line));
    animation: card-detail-in 0.2s ease-out;
}

@keyframes card-detail-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.card-detail-overlay .twin-3d-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}

.card-detail-overlay .twin-3d-detail-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-detail-overlay .twin-3d-detail-value {
    font-size: 16px;
    font-weight: 800;
}

.card-detail-overlay .twin-3d-detail-sublabel {
    font-size: 11px;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.card-detail-overlay .twin-3d-detail-scale {
    position: relative;
    margin-bottom: 12px;
}

.card-detail-overlay .twin-3d-detail-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    gap: 1px;
}

.card-detail-overlay .twin-3d-detail-zone {
    height: 100%;
    opacity: 0.35;
    border-radius: 2px;
}

.card-detail-overlay .twin-3d-detail-marker {
    position: absolute;
    top: -3px;
    width: 3px;
    height: 12px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.card-detail-overlay .twin-3d-detail-labels {
    display: flex;
    margin-top: 4px;
}

.card-detail-overlay .twin-3d-detail-labels span {
    font-size: 8px;
    font-weight: 500;
    color: var(--text-faint);
    text-transform: uppercase;
    text-align: center;
}

.card-detail-overlay .twin-3d-detail-inference {
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-faint);
    border-top: 1px solid var(--line);
    padding-top: 12px;
    margin: 0;
}

.twin-3d-detail-trend {
    font-size: 11px;
    margin-left: 8px;
    font-weight: 500;
}
.twin-3d-detail-trend--up { color: var(--color-good, #22C55E); }
.twin-3d-detail-trend--down { color: var(--color-danger, #EF4444); }
.twin-3d-detail-trend--stable { color: var(--text-soft); }

/* Mobile twin — body fills stage, cards float at bottom over body legs */
@media (max-width: 900px) {
    .twin-3d-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        position: relative;
    }

    .twin-3d-body-area {
        order: 1;
        position: absolute;
        inset: 0;
        z-index: 1;
        min-height: 0;
    }

    .twin-3d-cards {
        order: 2;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        flex-shrink: 0;
        padding: 12px 12px 4px;
        gap: 8px;
        margin-top: auto;
        margin-bottom: 0;
        background: transparent;
        position: relative;
        z-index: 2;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .twin-3d-stage .card {
        min-width: 140px;
        flex-shrink: 0;
    }

    .card-detail-overlay {
        order: 3;
        flex-shrink: 0;
        margin: 2px 12px 8px;
    }

    .twin-3d-readiness-overlay {
        position: relative;
        padding: 8px 0 0;
    }

    .twin-3d-readiness-score {
        font-size: 24px;
    }
}

/* SVG fallback */
.twin-svg-fallback {
    padding: 24px;
}

@media (prefers-reduced-motion: reduce) {
    .twin-3d-pulse { animation: none; opacity: 0.5; }
    .twin-3d-loading { transition: none; }
}

/* ── Mobile overlay + drawer ── */

.v2-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

/* The header-expanded overlay sits under the header, not above all content */
.v2-overlay.v2-header-overlay {
    z-index: 99;
}

.v2-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    background: var(--shell);
    z-index: 210;
    border-right: 1px solid var(--line);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: visible;
    animation: slideInLeft 200ms ease;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Drawer head: brand + close button */
.v2-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px 8px;
    flex-shrink: 0;
}

.v2-drawer-close {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.12s ease;
}

.v2-drawer-close:hover {
    color: var(--text);
}

/* Nav takes remaining space */
.v2-drawer-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-drawer-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 10px;
    min-height: 44px;
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: inherit;
    text-align: left;
    width: 100%;
    transition: color 180ms ease, background 180ms ease, padding-left 180ms ease;
}

.v2-drawer-item::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scaleY(0.2);
    width: 3px;
    height: 60%;
    border-radius: 2px;
    background: var(--signal);
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

.v2-drawer-item:hover,
.v2-drawer-item:active,
.v2-drawer-item:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    padding-left: 18px;
    outline: none;
}

.v2-drawer-item:hover::before,
.v2-drawer-item:active::before,
.v2-drawer-item:focus-visible::before,
.v2-drawer-item.active::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.v2-drawer-item.active {
    color: var(--text);
    font-weight: 600;
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    padding-left: 18px;
}

/* Footer: backoffice link (admin only), pinned to bottom */
.v2-drawer-footer {
    flex-shrink: 0;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Responsive ── */

.v2-desktop-only {
    display: flex;
}

@media (max-width: 900px) {
    .v2-shell {
        grid-template-columns: 1fr;
    }

    .v2-sidebar {
        display: none;
    }

    .v2-content-area {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        /* row 3 col 1: content area sits directly below the seg-control row.
           The nav-hud wrapper is zero-height in grid flow; its body overlays via absolute. */
        grid-row: 3;
        grid-column: 1;
    }

    .v2-view-container,
    .v2-camp-content {
        /* Same grid placement as v2-content-area: row 3 col 1.
           Without this, children without an explicit grid-column auto-flow into
           an implicit column 2, squeezing visible content on mobile. */
        grid-row: 3;
        grid-column: 1;
    }

    .v2-nav-hud {
        /* Grid row 2 col 1 — zero-height positioning anchor.
           The outer wrapper reserves no vertical space; it is only used so the
           toggle and collapsible body can use position:absolute to appear directly
           below the header on mobile. Background, border, and padding are removed
           here; the collapsible re-adds them as an absolute layer.
           z-index is overridden to 11 in the nav-hud mobile block below, which
           lifts the entire HUD stacking context above the seg-control (z-index:10)
           so the toggle and expanded strip paint on top of it. */
        grid-row: 2;
        grid-column: 1;
        background: transparent;
        border-bottom: none;
        padding: 0;
        min-height: 0;
        height: 0;
        overflow: visible;
    }

    .v2-header {
        grid-row: 1;
        grid-column: 1;
    }

    .v2-seg-control {
        /* Moves to row 2 — sits in the same grid row as the zero-height nav-hud
           wrapper. The nav-hud stacking context is z-index:11 (set in the nav-hud
           mobile block), so on mobile the toggle and expanded strip paint above
           the seg-control (z-index:10). Because the nav-hud wrapper is height:0,
           no space is displaced. */
        grid-row: 2;
        grid-column: 1;
    }

    .v2-main {
        padding-bottom: 38px;
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        /* 3-row × 1-col grid: header | seg-control (auto, collapses when absent) | content.
           The nav-hud wrapper shares row 2 at zero height; its body floats absolutely.
           position:relative is the stacking context for the absolutely-positioned toggle button. */
        position: relative;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
    }

    .pwa-standalone .v2-main {
        padding-bottom: 44px;
    }

    /* Mobile header */
    .v2-desktop-only {
        display: none !important;
    }

    .v2-header {
        padding: 0 12px;
        min-width: 0;
    }

    .v2-header-mobile-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: max(10px, env(safe-area-inset-top)) 0 10px;
        border-bottom: 1px solid var(--line);
        min-width: 0;
        /* overflow:visible so the user-menu panel (position:absolute, dropping
           below the bar) is not clipped. Horizontal overflow of flex children
           is contained by min-width:0 on the bar and on individual items. */
        overflow: visible;
    }

    /* Give the user-menu a local stacking context so the trigger and its panel
       sit above any sibling elements — the header (z-index:100) already protects
       the whole row against the seg-control (z-index:10). */
    .v2-header-mobile-bar .v2-user-menu {
        position: relative;
        z-index: 1;
    }

    .v2-hamburger {
        display: none;
    }

    .v2-mobile-brand {
        flex-shrink: 0;
    }

    .v2-mobile-brand .v2-logo {
        width: 44px;
        height: 44px;
    }

    .v2-mobile-brand .v2-brand-text {
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: 0.04em;
    }

    .v2-athlete-select-mobile {
        font-size: 0.95rem;
        font-weight: 700;
        padding-right: 16px;
        flex: 0 1 auto;
        min-width: 0;
    }

    .v2-header-expand {
        margin-left: auto;
        background: transparent;
        border: none;
        color: var(--text-faint);
        cursor: pointer;
        font-size: 1rem;
        padding: 4px 8px;
        flex-shrink: 0;
    }

    button.v2-header-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-faint);
        cursor: pointer;
        transition: color 0.12s ease, background 0.12s ease;
        -webkit-tap-highlight-color: transparent;
    }

    button.v2-header-burger:hover {
        color: var(--text);
        background: color-mix(in srgb, var(--signal) 10%, transparent);
    }

    .v2-header {
        position: relative;
        z-index: 100;
    }

    .v2-header-overlay {
        z-index: 99;
    }

    .v2-header-expanded {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 12px 12px 14px;
        background: var(--shell);
        border-bottom: 1px solid var(--line-strong);
        box-shadow: var(--shadow);
        z-index: 100;
    }

    .v2-header-expanded .v2-field-group {
        margin-bottom: 2px;
    }

    .v2-header-expanded .v2-field-label {
        font-size: 0.7rem;
    }

    .v2-header-expanded .v2-objective-text {
        font-size: 0.85rem;
        display: block;
        margin-bottom: 0;
    }

    .v2-header-expanded .v2-header-meta-labeled {
        flex-wrap: wrap;
        gap: 4px 14px;
    }

    .v2-header-expanded .v2-header-meta {
        display: block;
        font-size: 0.75rem;
    }

    .v2-header-expanded-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        align-items: start;
    }

    .v2-header-expanded-row .v2-posture-text {
        text-align: left;
        max-width: none;
        font-size: 0.72rem;
        word-break: break-word;
        white-space: normal;
        overflow: visible;
    }

    .v2-header-expanded-row .v2-confidence {
        font-size: 0.9rem;
    }

    .v2-header-expanded .v2-session-identity {
        font-size: 0.7rem;
    }

    .v2-conversation {
        padding: 0 12px;
    }

    .v2-msg-user {
        max-width: 90%;
    }

    .v2-msg-title {
        font-size: 1rem;
    }

    .v2-composer {
        padding: 6px 6px 6px 14px;
    }

    .v2-composer textarea {
        min-height: 32px;
        padding: 6px 0;
        font-size: 16px;
    }

    .v2-mic-btn,
    .v2-send-btn {
        width: 40px;
        height: 40px;
    }
}

/* ── Mobile bottom nav ── */
.v2-bottom-nav {
    display: none;
}

@media (max-width: 900px) {
    .pwa-standalone .v2-bottom-nav {
        bottom: -12px;
        padding-bottom: 12px;
    }

    .v2-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 190;
        background: var(--shell);
        border-top: 1px solid var(--line);
        padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0);
    }

    .v2-bottom-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 4px 2px 2px;
        background: none;
        border: none;
        color: var(--text-faint);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
        position: relative;
        min-height: 38px;
        transition: color 150ms ease;
        -webkit-tap-highlight-color: transparent;
    }

    .v2-bottom-tab span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }

    .v2-bottom-tab svg {
        width: 22px;
        height: 22px;
    }

    .v2-bottom-tab.active {
        color: var(--signal);
    }

    .v2-bottom-tab.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background: var(--signal);
    }
}

/* ── Sign-in fields ── */

.sign-in-form {
    display: grid;
    gap: 14px;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
}

.sign-in-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sign-in-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sign-in-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 480px) {
    .sign-in-row {
        grid-template-columns: 1fr;
    }
}

.sign-in-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    margin-bottom: 2px;
}

@media (min-width: 480px) {
    .sign-in-group {
        padding: 10px 14px 12px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--surface) 40%, transparent);
        border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    }

    .sign-in-group-title {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }
}

.sign-in-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.sign-in-label[hidden] {
    display: none;
}

.sign-in-label input,
.sign-in-label select {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.sign-in-label input:focus,
.sign-in-label select:focus {
    outline: none;
    border-color: var(--signal);
}

.sign-in-label input::placeholder {
    color: var(--text-faint);
}

.sign-in-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-faint);
    font-size: 0.74rem;
    margin-left: 4px;
}

.v2-settings-support {
    margin: 0 0 2px;
    font-size: 0.71rem;
    color: var(--text-faint);
    line-height: 1.35;
}

.v2-settings-optional {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.78rem;
}

.v2-settings-status {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--text-soft);
}

.v2-settings-status[data-kind="success"] {
    color: var(--signal);
}

.v2-settings-status[data-kind="error"] {
    color: var(--danger, #ff6b6b);
}

.sign-in-prompts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 4px;
    margin-top: 2px;
}

.sign-in-prompts[hidden] {
    display: none;
}

.sign-in-prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--text-soft);
    background: var(--surface);
    user-select: none;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
    min-width: 0;
    line-height: 1.2;
}

.sign-in-prompt-chip > span {
    flex: 1;
    min-width: 0;
}

.sign-in-prompt-chip input {
    width: 11px;
    height: 11px;
}

.sign-in-prompt-chip:hover {
    border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
}

.sign-in-prompt-chip:has(input:checked) {
    background: color-mix(in srgb, var(--signal) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--signal) 55%, var(--line));
    color: var(--text);
}

.sign-in-prompt-chip input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: var(--signal);
    cursor: pointer;
    flex: none;
}

.sign-in-submit {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    border: none;
    background: var(--signal);
    color: var(--bg);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
    margin-top: 6px;
}

.sign-in-submit:hover {
    filter: brightness(1.15);
}

.sign-in-submit:active {
    transform: scale(0.99);
}

/* Enabled Google button: custom anchor that redirects to server-side OAuth flow */
a.v2-auth-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: #3c4043;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}

a.v2-auth-google-btn:hover {
    border-color: var(--line-strong);
    background: #f8f8f8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

a.v2-auth-google-btn:active {
    background: #f0f0f0;
}

/* Disabled Google button: shown when GOOGLE_CLIENT_ID is not set */
button.v2-auth-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

button.v2-auth-google-btn:hover:not(:disabled) {
    border-color: var(--line-strong);
    background: var(--surface-strong);
}

button.v2-auth-google-btn--disabled,
button.v2-auth-google-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.v2-auth-google-icon {
    flex-shrink: 0;
}

/* "or" divider between Google button and email/password form */
.v2-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-faint);
    font-size: 0.78rem;
}

.v2-auth-divider::before,
.v2-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Email + password form group */
.v2-auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-auth-error {
    margin: 0;
    color: var(--danger);
    font-size: 0.82rem;
}

/* Primary sign-in button */
button.v2-auth-submit-btn {
    width: 100%;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: none;
    background: var(--signal);
    color: var(--bg);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.08s ease;
}

button.v2-auth-submit-btn:hover {
    filter: brightness(1.12);
}

button.v2-auth-submit-btn:active {
    transform: scale(0.99);
}

/* Sign-out button — inherits v2-btn base; adds warn-tint border */
button.v2-auth-signout-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent);
    background: transparent;
    color: var(--warn);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

button.v2-auth-signout-btn:hover {
    background: color-mix(in srgb, var(--warn) 12%, transparent);
}

/* "Continue exploring the playground" quiet text link */
button.v2-auth-playground-link {
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    text-align: center;
    transition: color 0.12s ease;
    text-decoration: underline;
    text-decoration-color: transparent;
}

button.v2-auth-playground-link:hover {
    color: var(--text-soft);
    text-decoration-color: currentColor;
}

/* Signed-in account display */
.v2-auth-signed-in {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.v2-auth-signed-in-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.v2-auth-signed-in-email {
    font-size: 0.9rem;
    color: var(--text);
    word-break: break-all;
}

/* Email line shown on onboarding page under the title */
p.v2-auth-onboarding-email {
    font-size: 0.82rem;
    color: var(--text-faint);
    margin: 0;
}

/* ── Auth top nav (marketing strip on sign-in) ── */

.auth-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 18px;
    background: color-mix(in srgb, var(--shell) 70%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

/* Push the auth shell down so the fixed topbar doesn't overlap content */
.auth-shell:has(.auth-topbar) {
    padding-top: 72px;
}

.auth-topbar-left,
.auth-topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.auth-topbar-org-wrap {
    position: relative;
    display: inline-flex;
}

.auth-topbar-org {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.auth-topbar-org:hover,
.auth-topbar-org:focus {
    text-decoration: none;
}

.auth-topbar-org-wrap.is-open .auth-topbar-org-caret {
    transform: rotate(180deg);
}

.auth-topbar-org-caret {
    transition: transform 0.15s ease;
}

.auth-topbar-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    padding: 6px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--shell) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--bg) 70%, transparent);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10001;
}

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

.auth-topbar-menu-item {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
}

.auth-topbar-menu-item:hover {
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
    color: var(--text);
}

.auth-topbar-org-mark {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
}

.auth-topbar-org-mark svg {
    width: 34px;
    height: 34px;
}

.auth-topbar-org-name {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    text-decoration: none;
}

.auth-topbar-org-caret {
    color: var(--text-faint);
}

.auth-topbar-link {
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 2px;
    transition: color 0.12s ease;
}

.auth-topbar-link:hover {
    color: var(--text);
}

.auth-topbar-cta {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--signal);
    color: var(--bg);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.12s ease, transform 0.08s ease;
}

.auth-topbar-cta:hover {
    filter: brightness(1.1);
}

.auth-topbar-cta:active {
    transform: scale(0.98);
}

/* Appearance toggle — sun/moon icon swap is CSS-driven via [data-theme],
   so a tap flips the icon without waiting on a re-render. */
.auth-topbar-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    color: var(--text-soft);
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.auth-topbar-theme-toggle:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 50%, transparent);
    border-color: color-mix(in srgb, var(--line) 100%, transparent);
}

.auth-topbar-theme-toggle:active {
    transform: scale(0.96);
}

/* Playground icon — mobile-only, hidden on desktop */
.auth-topbar-cta-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    color: var(--text-soft);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.auth-topbar-cta-icon:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 50%, transparent);
    border-color: color-mix(in srgb, var(--line) 100%, transparent);
}

.auth-topbar-cta-icon:active {
    transform: scale(0.96);
}

.auth-topbar-theme-icon {
    display: none;
}

:root[data-theme="dark"] .auth-topbar-theme-icon-sun {
    display: inline-block;
}

:root[data-theme="light"] .auth-topbar-theme-icon-moon {
    display: inline-block;
}

@media (max-width: 720px) {
    .auth-topbar {
        height: 52px;
        padding: 0 14px;
    }

    .auth-topbar-left,
    .auth-topbar-right {
        gap: 10px;
    }

    .auth-topbar-cta {
        height: 30px;
        padding: 0 12px;
        font-size: 0.78rem;
    }

    .auth-topbar-link {
        font-size: 0.82rem;
    }

    .auth-topbar-org-mark,
    .auth-topbar-org-mark svg {
        width: 38px;
        height: 38px;
    }

    .auth-topbar-org-name {
        font-size: 1.35rem;
    }
}

/* ── Marketing nav (shown only on public marketing pages) ── */

.auth-topbar-has-nav {
    /* Center column fills the space between left logo and right CTAs */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

/* Center slot: contains both the desktop nav and the mobile hamburger */
.auth-topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-topbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Wide variant used on marketing pages — fills center slot so auto-margin works */
.auth-topbar-nav--wide {
    justify-content: flex-start;
    flex: 1;
}

/* Pricing is the rightmost desktop nav link — auto-margin pushes it to the right edge */
.auth-topbar-nav-item--right {
    margin-left: auto;
}

.auth-topbar-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--text-soft);
    font-size: 0.83rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
    white-space: nowrap;
}

.auth-topbar-nav-item:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
}

.auth-topbar-nav-trigger {
    /* Shared with .auth-topbar-nav-item above */
}

.auth-topbar-nav-wrap {
    position: relative;
    display: inline-flex;
}

.auth-topbar-nav-wrap.is-open .auth-topbar-nav-caret {
    transform: rotate(180deg);
}

.auth-topbar-nav-caret {
    color: var(--text-faint);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.auth-topbar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    padding: 6px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--shell) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--bg) 70%, transparent);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10001;
}

.auth-topbar-dropdown[hidden] {
    display: none;
}

.auth-topbar-dropdown-item {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.12s ease, color 0.12s ease;
    cursor: pointer;
}

.auth-topbar-dropdown-item:hover {
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
    color: var(--text);
}

.auth-topbar-nav-disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
}

/* Hamburger — hidden on desktop, shown on mobile */
.auth-topbar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.auth-topbar-hamburger:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
}

/* Mobile nav sheet — sits below topbar, full-width */
.auth-topbar-mobile-menu {
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    z-index: 9999;
    background: color-mix(in srgb, var(--shell) 96%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    padding: 8px 0 12px;
    display: flex;
    flex-direction: column;
}

.auth-topbar-mobile-menu[hidden] {
    display: none;
}

.auth-topbar-mobile-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
    min-height: 44px;
}

.auth-topbar-mobile-item:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 50%, transparent);
}

.auth-topbar-mobile-group {
    display: flex;
    flex-direction: column;
}

.auth-topbar-mobile-group-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: var(--text-soft);
    font-size: 0.9rem;
    font-weight: 500;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.12s ease, background 0.12s ease;
    min-height: 44px;
}

.auth-topbar-mobile-group-trigger:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 50%, transparent);
}

.auth-topbar-mobile-group-trigger[aria-expanded="true"] .auth-topbar-nav-caret {
    transform: rotate(180deg);
}

.auth-topbar-mobile-group-body {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--surface) 50%, transparent);
}

.auth-topbar-mobile-group-body[hidden] {
    display: none;
}

.auth-topbar-mobile-group-body .auth-topbar-mobile-item {
    padding-left: 36px;
    font-size: 0.85rem;
}

/* Scroll-margin so fixed topbar doesn't cover section headings */
#lp-why,
#lp-programming,
#lp-decisions,
#lp-intelligence {
    scroll-margin-top: 64px;
}

/* ── Responsive: collapse nav to hamburger at ≤900px ── */

@media (max-width: 900px) {
    /* Flex 3-zone single row: hamburger far-left, logo dead-center, CTA far-right.
       Two equal flex:1 side zones sandwich a flex:0 logo so it stays centered. */
    .auth-topbar-has-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Center slot (contains hamburger): order 1, flex:1, anchored to the left */
    .auth-topbar-center {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }

    /* Logo slot: order 2, no flex growth — stays auto width in the true center */
    .auth-topbar-has-nav .auth-topbar-left {
        order: 2;
        flex: 0 0 auto;
    }

    /* CTA slot: order 3, flex:1, content pushed to the right */
    .auth-topbar-has-nav .auth-topbar-right {
        order: 3;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }

    .auth-topbar-nav {
        display: none;
    }

    .auth-topbar-hamburger {
        display: inline-flex;
    }

    /* Right-side CTAs: hide the quiet link on small screens to save space */
    .auth-topbar-has-nav .auth-topbar-right .auth-topbar-link-quiet {
        display: none;
    }

    /* Swap text pill for compact icon on mobile */
    .auth-topbar-has-nav .auth-topbar-cta {
        display: none;
    }

    .auth-topbar-has-nav .auth-topbar-cta-icon {
        display: inline-flex;
    }
}

/* ── Static marketing pages (coming-soon for /docs, /pricing) ── */

.auth-shell-static {
    position: relative;
    min-height: 100vh;
    padding: 0;
}

.coming-soon-stage {
    max-width: 560px;
    margin: 0 auto;
    padding: 140px 24px 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.coming-soon-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
}

.coming-soon-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.1;
    color: var(--text);
}

.coming-soon-body {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 460px;
}

.coming-soon-back {
    margin-top: 12px;
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.12s ease;
}

.coming-soon-back:hover {
    color: var(--text);
}

/* ── Lead gate (modal that captures lead before playground access) ── */

.auth-shell-gate {
    position: relative;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
}

.lead-gate-twin-bg {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--bg);
    background-image: url('/workspace/assets/playground-twin-bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: blur(2.5px);
}

.lead-gate-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: transparent;
    pointer-events: none;
}

.lead-gate-backdrop > * {
    pointer-events: auto;
}

.lead-gate-card {
    width: 100%;
    max-width: 440px;
    padding: 32px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--shell) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 24px 60px color-mix(in srgb, var(--bg) 60%, transparent);
}

.lead-gate-monogram {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--line-strong) 80%, transparent);
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
    display: grid;
    place-items: center;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.lead-gate-headline {
    margin: 0;
    text-align: center;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.1;
    color: var(--text);
}

.lead-gate-sub {
    margin: 0;
    text-align: center;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.5;
}

.lead-gate-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.lead-gate-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lead-gate-field-label {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}

.lead-gate-field-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--text-faint);
    margin-left: 4px;
}

.lead-gate-field-input {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.lead-gate-field-input::placeholder {
    color: var(--text-faint);
}

.lead-gate-field-input:focus {
    outline: none;
    border-color: var(--signal);
    background: color-mix(in srgb, var(--surface-strong) 50%, var(--surface));
}

.lead-gate-submit {
    min-height: 48px;
    margin-top: 6px;
    padding: 0 18px;
    border-radius: 12px;
    border: none;
    background: var(--signal);
    color: var(--bg);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.08s ease;
}

.lead-gate-submit:hover {
    filter: brightness(1.1);
}

.lead-gate-submit:active {
    transform: scale(0.99);
}

.lead-gate-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.lead-gate-error {
    margin: 0;
    color: var(--danger);
    font-size: 0.82rem;
    text-align: center;
}

@media (max-width: 720px) {
    /* Top-align the card so it sits near the topbar instead of floating in
       the middle of a tall viewport with empty space above and below. */
    .lead-gate-backdrop {
        padding: 16px 16px 24px;
        place-items: start center;
    }

    .lead-gate-card {
        margin-top: 24px;
        padding: 26px 22px;
        gap: 14px;
    }

    .lead-gate-headline {
        font-size: 1.5rem;
    }

    .lead-gate-sub {
        font-size: 0.88rem;
    }

    .lead-gate-form {
        gap: 10px;
    }
}

@media (max-width: 420px) {
    .lead-gate-card {
        padding: 22px 18px;
    }

    .lead-gate-headline {
        font-size: 1.35rem;
    }
}

/* ── Custom dropdown ── */

.v2-dropdown {
    position: relative;
    width: 100%;
}

.v2-dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.v2-dropdown-trigger:hover {
    border-color: var(--line-strong);
}

.v2-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--signal);
    background: var(--surface-strong);
}

.v2-dropdown-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-dropdown-caret {
    flex-shrink: 0;
    color: var(--text-faint);
    transition: transform 0.15s ease;
}

.v2-dropdown-trigger[aria-expanded="true"] .v2-dropdown-caret {
    transform: rotate(180deg);
}

.v2-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 500;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-height: 280px;
    overflow-y: auto;
}

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

.v2-dropdown-option {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.v2-dropdown-option::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%) scaleY(0.2);
    width: 3px;
    height: 60%;
    border-radius: 2px;
    background: var(--signal);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.v2-dropdown-option:hover,
.v2-dropdown-option:active,
.v2-dropdown-option:focus-visible,
.v2-dropdown-option.is-pressing {
    background: color-mix(in srgb, var(--signal) 14%, transparent);
    padding-left: 16px;
    color: var(--text);
    outline: none;
}

.v2-dropdown-option:hover::before,
.v2-dropdown-option:active::before,
.v2-dropdown-option:focus-visible::before,
.v2-dropdown-option.is-pressing::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.v2-dropdown-option.is-selected {
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    color: var(--text);
    font-weight: 600;
}

.v2-dropdown-option.is-selected::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}

.setup-back {
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: inline-block;
}

.setup-back:hover {
    color: var(--text);
}

/* ── Inline chat error ── */

.v2-msg-error {
    border: 1px dashed var(--line);
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    margin: 4px 0;
    transition: border-color 0.15s;
}

.v2-msg-error:hover {
    border-color: var(--text-faint);
}

.v2-msg-error .v2-msg-label {
    color: var(--text-faint);
}

.v2-msg-error p {
    margin: 4px 0 0;
    font-size: 0.85rem;
}

/* ── Light mode: dark cockpit for 3D twin ── */
[data-theme="light"] .twin-3d-stage {
    background: radial-gradient(ellipse at 50% 40%, #1a2636 0%, #0d1621 70%);
    border-radius: 16px;
    margin: 4px;
    overflow: hidden;
}

[data-theme="light"] .twin-3d-readiness-label {
    color: #afbac8;
}

[data-theme="light"] .twin-3d-stage .card {
    background: #1a2636;
}

[data-theme="light"] .twin-3d-stage .card-label,
[data-theme="light"] .twin-3d-stage .card-sublabel {
    color: #afbac8;
}

[data-theme="light"] .twin-3d-stage .card.expanded .card-label {
    color: #edf3f7;
}

[data-theme="light"] .card-detail-overlay {
    background: rgba(13, 22, 33, 0.92);
    border-color: color-mix(in srgb, var(--status-color) 40%, rgba(170, 190, 214, 0.12));
}

[data-theme="light"] .card-detail-overlay .twin-3d-detail-title {
    color: #edf3f7;
}

[data-theme="light"] .card-detail-overlay .twin-3d-detail-sublabel,
[data-theme="light"] .card-detail-overlay .twin-3d-detail-inference {
    color: #748396;
}

.v2-camp-content {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .v2-camp-content {
        grid-template-columns: 1fr;
    }
}

/* ── Camp view ── */

.v2-camp-page {
    display: flex;
    height: 100%;
    position: relative;
}

/* Drawer overlay + panel */
.v2-camp-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 90;
}

.v2-camp-drawer {
    position: fixed;
    left: 140px;
    top: 0;
    bottom: 0;
    width: 280px;
    background: var(--shell);
    border-right: 1px solid var(--line);
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: none;
    z-index: 100;
    animation: v2-drawer-slide-in 0.2s ease-out;
}

.v2-camp-drawer::-webkit-scrollbar {
    display: none;
}

@keyframes v2-drawer-slide-in {
    from { transform: translateX(-100%); opacity: 0.8; }
    to { transform: translateX(0); opacity: 1; }
}

.v2-camp-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.v2-camp-drawer-close {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1.2rem;
    cursor: pointer;
}

.v2-camp-drawer-close:hover {
    color: var(--text);
}

/* Drawer items */
.v2-camp-drawer-item {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 6px;
    border: 1px solid transparent;
}

.v2-camp-drawer-item:hover {
    background: var(--surface);
}

.v2-camp-drawer-item.is-selected {
    background: var(--surface-strong);
    border-color: var(--line);
}

.v2-camp-drawer-item.is-active .v2-camp-drawer-item-head strong {
    color: var(--signal);
}

.v2-camp-drawer-item.is-inactive {
    opacity: 0.5;
}

.v2-camp-drawer-item.is-inactive:hover {
    opacity: 0.8;
}

.v2-camp-drawer-item-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-camp-drawer-item-head strong {
    font-size: 0.8125rem;
    color: var(--text);
}

.v2-camp-drawer-badge {
    font-size: 0.68rem;
    color: var(--signal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.v2-camp-drawer-sub {
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-top: 2px;
}

.v2-camp-drawer-dates {
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-top: 1px;
}

/* Content columns (detail + opponent) */
.v2-camp-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
    min-height: 0;
    margin-left: 28px;
}

.v2-camp-col {
    padding: 20px 28px;
    overflow-y: auto;
}

.v2-camp-col-full {
    grid-column: 1 / -1;
    padding: 0;
}

.v2-camp-col-opponent {
    border-left: 1px solid var(--line);
}

.v2-camp-col-opponent .v2-camp-dl dd {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Column headings */
.v2-col-heading {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

/* Camp detail */
.v2-camp-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    font-size: 0.8125rem;
    margin: 0;
}

.v2-camp-dl dt {
    font-size: 0.72rem;
    color: var(--text-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 2px;
}

.v2-camp-dl dd {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 400;
    margin: 0;
}

.v2-camp-detail-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Text actions (Edit · Switch · Delete) */
.v2-camp-text-actions {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.v2-camp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    min-height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.01em;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.v2-camp-btn:hover,
.v2-camp-btn:focus-visible {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 12%, var(--surface));
    outline: none;
}

.v2-camp-btn:active {
    transform: scale(0.97);
}

.v2-camp-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.v2-camp-btn-primary {
    border-color: color-mix(in srgb, var(--signal) 50%, transparent);
    background: color-mix(in srgb, var(--signal) 14%, var(--surface));
    color: var(--text);
}

.v2-camp-btn-primary:hover,
.v2-camp-btn-primary:focus-visible {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 22%, var(--surface));
}

.v2-camp-btn-danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

.v2-camp-btn-danger:hover,
.v2-camp-btn-danger:focus-visible {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

/* Switch confirmation banner */
.v2-camp-switch-banner {
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    font-size: 0.8125rem;
    color: var(--text-soft);
}

.v2-camp-switch-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.v2-camp-switch-actions button {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.v2-camp-switch-actions button:first-child {
    background: var(--accent, #84d0e4);
    color: var(--bg);
    border: none;
}

/* Mobile */
@media (max-width: 900px) {
    .v2-camp-drawer {
        left: 0;
    }
}

@media (max-width: 768px) {
    .v2-camp-columns {
        grid-template-columns: 1fr;
    }
    .v2-camp-col-opponent {
        border-left: none;
        border-top: 1px solid var(--line);
    }
    .v2-camp-drawer {
        width: min(280px, 85vw);
    }
}

/* Legacy camp card (kept for delete modal reference) */
.v2-camp-card {
    position: relative;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color 0.15s;
}

.v2-camp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.v2-camp-card-name {
    font-size: 0.95rem;
    color: var(--text);
}

.v2-camp-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent, #84d0e4);
    border: 1px solid var(--accent, #84d0e4);
    border-radius: 4px;
    padding: 1px 6px;
}

.v2-camp-card-dates {
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-top: 2px;
    display: block;
}

.v2-camp-card-objective {
    font-size: 0.8rem;
    color: var(--text-soft);
    margin-top: 2px;
    display: block;
}

.v2-camp-card-goal {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 4px 0 0;
}

.v2-camp-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.v2-camp-switch-btn {
    font-size: 0.75rem;
    color: var(--accent, #84d0e4);
    background: none;
    border: 1px solid var(--accent, #84d0e4);
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.v2-camp-switch-btn:hover {
    background: var(--accent, #84d0e4);
    color: var(--bg);
}

.v2-camp-delete {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.v2-camp-delete:hover {
    color: var(--warn);
}

.v2-camp-new {
    margin-top: 8px;
    padding: 12px 16px;
    background: none;
    border: 1px dashed var(--line);
    border-radius: 8px;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: border-color 0.15s, color 0.15s;
}

.v2-camp-new:hover {
    border-color: var(--accent, #84d0e4);
    color: var(--accent, #84d0e4);
}

.v2-camp-empty {
    color: var(--text-faint);
    font-size: 0.9rem;
}

.v2-camp-divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: 16px 0;
}

.v2-camp-menu-wrap {
    position: relative;
    margin-left: auto;
}

.v2-camp-menu {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    letter-spacing: 2px;
    border-radius: 4px;
}

.v2-camp-menu:hover {
    color: var(--text);
    background: var(--surface-strong);
}

.v2-camp-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--shell, #0d1621);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px 0;
    min-width: 120px;
    z-index: 100;
    box-shadow: var(--shadow);
    animation: v2-modal-fade-in 0.1s ease-out;
}

.v2-camp-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.v2-camp-dropdown-item:hover {
    background: var(--surface-strong);
}

.v2-camp-dropdown-danger {
    color: var(--warn);
}

.v2-camp-new-wrap {
    position: relative;
}

.v2-camp-new-disabled .v2-camp-new {
    opacity: 0.4;
    cursor: not-allowed;
}

.v2-camp-new-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--shell, #0d1621);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: var(--text-soft);
    white-space: nowrap;
    z-index: 50;
    box-shadow: var(--shadow);
}

.v2-camp-new-disabled:hover .v2-camp-new-tooltip {
    display: block;
}

.v2-camp-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.v2-camp-form-actions button {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}

.v2-camp-form-actions button[type="submit"] {
    background: var(--accent, #84d0e4);
    color: var(--bg);
    border: none;
}

.v2-camp-form-actions button[data-action="cancel-edit-camp"] {
    background: none;
    border: 1px solid var(--line);
    color: var(--text-soft);
}

.v2-camp-form-actions button[data-action="cancel-edit-camp"]:hover {
    border-color: var(--text-faint);
    color: var(--text);
}

/* ── Delete modal ── */

.v2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: v2-modal-fade-in 0.15s ease-out;
}

.v2-modal {
    background: var(--shell, #0d1621);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 200ms ease;
}
.v2-modal:hover,
.v2-modal.is-scrolling {
    scrollbar-color: color-mix(in srgb, var(--text-faint) 40%, transparent) transparent;
}
.v2-modal::-webkit-scrollbar { width: 8px; }
.v2-modal::-webkit-scrollbar-track { background: transparent; }
.v2-modal::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background 200ms ease; }
.v2-modal:hover::-webkit-scrollbar-thumb,
.v2-modal.is-scrolling::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-faint) 35%, transparent); }

.v2-modal-title {
    font-size: 1rem;
    color: var(--text);
    margin: 0 0 8px;
}

.v2-modal-text {
    font-size: 0.85rem;
    color: var(--text-soft);
    margin: 0 0 20px;
    line-height: 1.5;
}

.v2-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.v2-modal-actions button {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
}

.v2-modal-actions button:hover {
    border-color: var(--text-faint);
}

.v2-modal-actions .v2-btn-primary {
    background: var(--accent, #84d0e4);
    color: #0a1428;
    border: 1px solid transparent;
}

.v2-modal-actions .v2-btn-primary:hover {
    filter: brightness(1.08);
}

.v2-seed-form-hint {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 4px 0 12px;
    line-height: 1.4;
}

.v2-seed-form-error {
    font-size: 0.8rem;
    color: var(--color-danger, #e05c5c);
    margin: 4px 0 12px;
    line-height: 1.4;
}

.v2-btn-primary {
    background: var(--accent, #84d0e4);
    color: #0a1428;
    border: 1px solid transparent;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
}
.v2-btn-primary:hover {
    filter: brightness(1.08);
}
.v2-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.v2-btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.v2-btn-secondary:hover {
    border-color: var(--text-faint);
    color: var(--text);
}

@keyframes v2-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Header camp indicator ── */

.v2-camp-indicator {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.001em;
    text-transform: capitalize;
    color: var(--text-soft);
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
    background: color-mix(in srgb, var(--signal) 8%, transparent);
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    max-width: 220px;
    min-width: 0;
    margin-right: 4px;
}

.v2-camp-indicator::before {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.v2-camp-indicator-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-camp-indicator::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    flex-shrink: 0;
}

.v2-camp-indicator:hover,
.v2-camp-indicator:focus-visible {
    border-color: var(--signal);
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--signal) 22%, transparent);
    outline: none;
}

.v2-camp-indicator:hover::before,
.v2-camp-indicator:focus-visible::before {
    transform: scale(1.25);
    box-shadow: 0 0 10px color-mix(in srgb, var(--signal) 70%, transparent);
}

.v2-camp-indicator:active {
    transform: translateY(0);
}

.v2-text-faint {
    color: var(--text-faint);
}

/* ── Sign out ── */

.v2-settings-hint {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0 0 8px;
}

.v2-btn-signout {
    background: none;
    border: 1px solid var(--warn);
    color: var(--warn);
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}

.v2-btn-signout:hover {
    background: var(--warn);
    color: var(--bg);
}

/* ── Date picker ── */

.v2-dp-field {
    display: contents;
}

.v2-dp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
    text-align: left;
}

.v2-dp-trigger:hover {
    border-color: var(--line-strong);
}

.v2-dp-trigger:focus {
    outline: none;
    border-color: var(--signal);
}

.v2-dp-trigger[data-empty] {
    color: var(--text-faint);
}

.v2-dp-trigger::after {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--text-faint);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
    margin-left: 8px;
}

.v2-dp-popup {
    position: fixed;
    display: none;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    width: 280px;
    z-index: 1100;
    box-shadow: var(--shadow);
    animation: v2-modal-fade-in 0.1s ease-out;
    font-family: "IBM Plex Sans", sans-serif;
}

.v2-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.v2-dp-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.v2-dp-prev, .v2-dp-next {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: var(--surface);
    color: var(--text-soft);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.v2-dp-prev:hover, .v2-dp-next:hover {
    background: var(--surface-strong);
    color: var(--text);
}

.v2-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-bottom: 4px;
    padding: 0 2px;
}

.v2-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 2px;
}

.v2-dp-day {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text);
    font-size: 0.8125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background 0.1s ease;
}

.v2-dp-day:hover {
    background: var(--surface-strong);
}

.v2-dp-day:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
}

.v2-dp-today {
    border: 1px solid var(--line-strong);
}

.v2-dp-selected {
    background: var(--signal);
    color: var(--bg);
}

.v2-dp-selected:hover {
    background: var(--signal);
    opacity: 0.9;
}

.v2-dp-outside {
    color: var(--text-faint);
    opacity: 0.4;
}

@media (pointer: coarse) {
    .v2-dp-day {
        width: 40px;
        height: 40px;
    }
    .v2-dp-popup {
        width: 312px;
    }
}

@media (max-width: 360px) {
    .v2-dp-popup {
        width: calc(100vw - 16px);
    }
}

/* ── Time picker ── */

.v2-tp-field {
    display: contents;
}

.v2-tp-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.15s ease;
    text-align: left;
}

.v2-tp-trigger:hover {
    border-color: var(--line-strong);
}

.v2-tp-trigger:focus {
    outline: none;
    border-color: var(--signal);
}

.v2-tp-trigger[data-empty] {
    color: var(--text-faint);
}

.v2-tp-trigger::after {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--text-faint);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
    margin-left: 8px;
}

.v2-tp-popup {
    position: fixed;
    display: none;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px;
    width: 160px;
    z-index: 1100;
    box-shadow: var(--shadow);
    animation: v2-modal-fade-in 0.1s ease-out;
    font-family: "IBM Plex Sans", sans-serif;
}

.v2-tp-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-faint) 40%, transparent) transparent;
}

.v2-tp-list::-webkit-scrollbar { width: 8px; }
.v2-tp-list::-webkit-scrollbar-track { background: transparent; }
.v2-tp-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-faint) 35%, transparent);
    border-radius: 4px;
}

.v2-tp-item {
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s ease;
}

.v2-tp-item:hover {
    background: var(--surface-strong);
}

.v2-tp-item:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
}

.v2-tp-selected {
    background: var(--signal);
    color: var(--bg);
    font-weight: 600;
}

.v2-tp-selected:hover {
    background: var(--signal);
    opacity: 0.9;
}

/* ── Select picker ── */

.v2-sel-field {
    display: contents;
}

.v2-sel-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease;
    text-align: left;
}

.v2-sel-trigger:hover { border-color: var(--line-strong); }
.v2-sel-trigger:focus { outline: none; border-color: var(--signal); }
.v2-sel-trigger[data-empty] { color: var(--text-faint); }

.v2-sel-trigger::after {
    content: '';
    width: 14px;
    height: 14px;
    background: var(--text-faint);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    flex-shrink: 0;
    margin-left: 8px;
}

.v2-sel-popup {
    position: fixed;
    display: none;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 6px;
    z-index: 1100;
    box-shadow: var(--shadow);
    animation: v2-modal-fade-in 0.1s ease-out;
    font-family: "IBM Plex Sans", sans-serif;
}

.v2-sel-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-faint) 40%, transparent) transparent;
}
.v2-sel-list::-webkit-scrollbar { width: 8px; }
.v2-sel-list::-webkit-scrollbar-track { background: transparent; }
.v2-sel-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-faint) 35%, transparent);
    border-radius: 4px;
}

.v2-sel-item {
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.1s ease;
}
.v2-sel-item:hover { background: var(--surface-strong); }
.v2-sel-item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }

.v2-sel-selected {
    background: var(--signal);
    color: var(--bg);
    font-weight: 600;
}
.v2-sel-selected:hover { background: var(--signal); opacity: 0.9; }

/* ── Pill group (radio-based selector) ── */

.v2-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
}

.v2-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
    user-select: none;
}

.v2-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.v2-pill:hover { border-color: var(--text-soft); color: var(--text); }
.v2-pill:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }

.v2-pill-low:has(input:checked) {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 60%, transparent);
    background: color-mix(in srgb, var(--ok) 18%, transparent);
}
.v2-pill-moderate:has(input:checked) {
    color: var(--signal);
    border-color: color-mix(in srgb, var(--signal) 60%, transparent);
    background: color-mix(in srgb, var(--signal) 18%, transparent);
}
.v2-pill-high:has(input:checked) {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 60%, transparent);
    background: color-mix(in srgb, var(--warn) 18%, transparent);
}
.v2-pill-max:has(input:checked) {
    color: var(--warn);
    border-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 32%, transparent);
    font-weight: 700;
}

/* ── Camp edit form ── */

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

.v2-camp-form-title {
    margin: 0;
}

.v2-camp-form .v2-settings-label {
    gap: 3px;
    font-size: 0.75rem;
}

.v2-camp-form .v2-settings-label input,
.v2-camp-form .v2-settings-label select,
.v2-camp-form .v2-settings-label textarea,
.v2-camp-form .v2-dp-trigger {
    min-height: 36px;
    font-size: 0.8125rem;
    border-radius: 8px;
    padding: 0 10px;
}

.v2-camp-form .v2-settings-label textarea {
    padding: 8px 10px;
}

.v2-camp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

@media (max-width: 768px) {
    .v2-camp-form-grid {
        grid-template-columns: 1fr;
    }
}

/* Grouped edit form — cards per section, mirrors the sign-up layout */
.v2-camp-form-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.v2-camp-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.v2-camp-form-group-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.v2-camp-form-group-title .v2-text-faint {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
}

.v2-camp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 520px) {
    .v2-camp-form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Opponent profile ── */

.v2-opponent-name {
    display: block;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 14px;
}

.v2-opponent-searching {
    color: var(--text-faint);
    font-size: 0.8125rem;
    animation: v2-pulse 1.5s ease-in-out infinite;
}

/* ── Opponent scouting / searching animation ── */
.v2-opponent-scan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
    background: color-mix(in srgb, var(--signal) 4%, var(--surface));
    overflow: hidden;
    animation: v2-scan-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.v2-opponent-scan-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.v2-opponent-scan-orbit {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.v2-opponent-scan-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid color-mix(in srgb, var(--signal) 35%, transparent);
    border-radius: 50%;
}

.v2-opponent-scan-orbit::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1.5px solid transparent;
    border-top-color: var(--signal);
    border-radius: 50%;
    animation: v2-scan-spin 900ms linear infinite;
}

.v2-opponent-scan-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--signal);
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    animation: v2-scan-orbit 2400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
    box-shadow: 0 0 6px color-mix(in srgb, var(--signal) 70%, transparent);
}

.v2-opponent-scan-dot:nth-child(1) { animation-delay: 0ms; }
.v2-opponent-scan-dot:nth-child(2) { animation-delay: 800ms; }
.v2-opponent-scan-dot:nth-child(3) { animation-delay: 1600ms; }

.v2-opponent-scan-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.v2-opponent-scan-title strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.v2-opponent-scan-status {
    position: relative;
    display: block;
    height: 14px;
    font-size: 0.72rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v2-opponent-scan-step {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    opacity: 0;
    animation: v2-scan-step 3s steps(1) infinite;
}

.v2-opponent-scan-step[data-step="1"] { animation-delay: 0s; }
.v2-opponent-scan-step[data-step="2"] { animation-delay: 1s; }
.v2-opponent-scan-step[data-step="3"] { animation-delay: 2s; }

.v2-opponent-scan-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-opponent-scan-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 10px;
    align-items: center;
}

.v2-opponent-scan-label {
    height: 10px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--text-faint) 20%, transparent) 0%,
        color-mix(in srgb, var(--text-faint) 35%, transparent) 50%,
        color-mix(in srgb, var(--text-faint) 20%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: v2-scan-shimmer 1.6s ease-in-out infinite;
}

.v2-opponent-scan-bar {
    display: block;
    height: 10px;
    width: var(--w, 70%);
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--signal) 14%, transparent) 0%,
        color-mix(in srgb, var(--signal) 30%, transparent) 50%,
        color-mix(in srgb, var(--signal) 14%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: v2-scan-shimmer 1.6s ease-in-out infinite;
}

.v2-opponent-scan-row:nth-child(2) .v2-opponent-scan-label,
.v2-opponent-scan-row:nth-child(2) .v2-opponent-scan-bar { animation-delay: 150ms; }
.v2-opponent-scan-row:nth-child(3) .v2-opponent-scan-label,
.v2-opponent-scan-row:nth-child(3) .v2-opponent-scan-bar { animation-delay: 300ms; }
.v2-opponent-scan-row:nth-child(4) .v2-opponent-scan-label,
.v2-opponent-scan-row:nth-child(4) .v2-opponent-scan-bar { animation-delay: 450ms; }

.v2-opponent-scan-sweep {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--signal) 10%, transparent) 50%,
        transparent 100%
    );
    animation: v2-scan-sweep 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes v2-scan-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes v2-scan-orbit {
    0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(16px); }
    100% { transform: translate(-50%, -50%) rotate(360deg) translateX(16px); }
}

@keyframes v2-scan-step {
    0%, 30% { opacity: 1; transform: translateY(0); }
    33%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes v2-scan-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes v2-scan-sweep {
    0% { left: -40%; }
    100% { left: 100%; }
}

@keyframes v2-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.v2-opponent-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.v2-opponent-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-opponent-value {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 400;
    line-height: 1.5;
}

.v2-opponent-emphasis {
    color: var(--text);
    font-weight: 400;
    font-size: 0.9375rem;
}

.v2-opponent-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-faint);
}

.v2-opponent-refresh-btn {
    position: relative;
    min-height: 32px;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.v2-opponent-refresh-btn:hover {
    color: var(--text);
    border-color: var(--signal);
    background: var(--surface-strong);
}

.v2-opponent-refresh-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.68rem;
    color: var(--text-soft);
    white-space: nowrap;
}

.v2-opponent-refresh-btn:hover .v2-opponent-refresh-tip {
    display: block;
}

.v2-opponent-empty {
    font-size: 0.8125rem;
    color: var(--text-faint);
    margin: 0 0 10px;
}

.v2-opponent-meta {
    font-size: 0.68rem;
    color: var(--text-faint);
}

/* ── Schedule view ── */

.v2-schedule {
    padding: 14px 24px 24px;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.v2-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v2-schedule-page-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.v2-schedule-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
    gap: 32px;
    max-width: 1400px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.v2-schedule-sessions {
    max-width: 820px;
    min-height: 0;
}

@media (min-width: 901px) {
    .v2-schedule-sessions {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
        transition: scrollbar-color 200ms ease;
        min-height: 0;
        /* Bottom padding lets the last session scroll to center (scrollIntoView
           can only scroll as far as content below the target allows). */
        padding-bottom: 50vh;
        scroll-padding-bottom: 50vh;
    }
    .v2-schedule-sessions:hover,
    .v2-schedule-sessions.is-scrolling {
        scrollbar-color: color-mix(in srgb, var(--text-faint) 40%, transparent) transparent;
    }
    .v2-schedule-sessions::-webkit-scrollbar { width: 8px; }
    .v2-schedule-sessions::-webkit-scrollbar-track { background: transparent; }
    .v2-schedule-sessions::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
        transition: background 200ms ease;
    }
    .v2-schedule-sessions:hover::-webkit-scrollbar-thumb,
    .v2-schedule-sessions.is-scrolling::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text-faint) 35%, transparent);
    }
    .v2-schedule-sessions::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--text-faint) 60%, transparent);
    }
    .v2-schedule-sessions .v2-schedule-sticky {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg);
        padding-top: 4px;
        margin: 0 0 4px;
    }
    .v2-schedule-sessions .v2-schedule-sticky .v2-col-heading {
        margin: 0 0 6px;
    }
    .v2-schedule-sessions .v2-schedule-sticky .v2-schedule-heading-row .v2-col-heading {
        margin: 0;
    }
    .v2-schedule-sessions .v2-schedule-sticky .v2-schedule-header-row {
        margin: 0;
    }
}

.v2-schedule-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}
.v2-schedule-heading-row .v2-col-heading {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.v2-schedule-heading-row .v2-btn-secondary {
    flex-shrink: 0;
}

.v2-schedule-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-soft);
}

.v2-schedule-empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.v2-faint { color: var(--text-faint); }

.v2-schedule-day { margin-bottom: 16px; }
.v2-schedule-day-label {
    font-size: 0.82rem;
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
}

.v2-schedule-row {
    display: grid;
    grid-template-columns: 28px 60px minmax(160px, 1fr) 120px 80px 110px;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    min-height: 44px;
    transition: background 120ms ease;
    position: relative;
}
.v2-schedule-row .v2-schedule-chevron { justify-self: end; }
.v2-schedule-row-proposed { background: color-mix(in srgb, var(--signal) 6%, transparent); }
.v2-schedule-row-proposed:hover { background: color-mix(in srgb, var(--signal) 10%, var(--surface)); }
.v2-schedule-row-proposed::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--signal);
}
.v2-schedule-proposal-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--signal);
    color: var(--bg);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.v2-schedule-row:hover { background: var(--surface); }
.v2-schedule-time { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; }
.v2-schedule-session-title { color: var(--text); }
.v2-schedule-type { color: var(--text-soft); font-size: 0.85rem; }
.v2-intensity-badge {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: max-content;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--line);
    line-height: 1;
}
.v2-intensity-low {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 50%, transparent);
    background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.v2-intensity-moderate {
    color: var(--signal);
    border-color: color-mix(in srgb, var(--signal) 55%, transparent);
    background: color-mix(in srgb, var(--signal) 14%, transparent);
}
.v2-intensity-high {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 60%, transparent);
    background: color-mix(in srgb, var(--warn) 16%, transparent);
}
.v2-intensity-max {
    color: var(--warn);
    border-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 28%, transparent);
    font-weight: 700;
}
.v2-schedule-header-row {
    display: grid;
    grid-template-columns: 28px 60px minmax(160px, 1fr) 120px 80px 110px;
    gap: 10px;
    padding: 0 10px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--text-soft);
    margin-bottom: 4px;
}
.v2-schedule-row-detail { padding: 10px 12px 14px 108px; background: var(--surface); border-bottom: 1px solid var(--line); }
.v2-schedule-row-completed {
    opacity: 0.5;
}
.v2-schedule-row-completed::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ok);
}
.v2-schedule-row-skipped .v2-schedule-session-title { font-style: italic; color: var(--text-faint); }
.v2-schedule-row-skipped .v2-schedule-time,
.v2-schedule-row-skipped .v2-schedule-type { color: var(--text-faint); }
.v2-schedule-row-ghost {
    grid-template-columns: 28px 60px minmax(160px, 1fr) 120px 80px 110px;
    gap: 10px;
    padding: 8px 10px;
    border: 1px dashed color-mix(in srgb, var(--signal) 55%, transparent);
    background: color-mix(in srgb, var(--signal) 7%, transparent);
    border-radius: 6px;
    margin: 4px 0 8px 16px;
    cursor: default;
    min-height: 36px;
}
.v2-schedule-row-ghost:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.v2-schedule-ghost-mark {
    color: var(--signal);
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.v2-schedule-ghost-label {
    color: var(--signal);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    justify-self: end;
}
.v2-schedule-row-past .v2-schedule-time,
.v2-schedule-row-past .v2-schedule-session-title,
.v2-schedule-row-past .v2-schedule-type,
.v2-schedule-row-past .v2-intensity-badge { color: var(--text-soft); }
.v2-schedule-row-past .v2-schedule-time { color: var(--text-soft); }
.v2-schedule-row-pastmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
    line-height: 1;
}
.v2-schedule-row-trail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: end;
}
.v2-schedule-quick {
    width: 32px;
    height: 30px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease, transform 80ms ease;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.v2-schedule-quick-ok {
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
    background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.v2-schedule-quick-ok:hover {
    background: color-mix(in srgb, var(--ok) 24%, transparent);
    border-color: var(--ok);
    transform: translateY(-1px);
}
.v2-schedule-quick-skip {
    color: var(--text);
    border: 1px solid var(--text-soft);
    background: color-mix(in srgb, var(--text-soft) 14%, transparent);
}
.v2-schedule-quick-skip:hover {
    background: color-mix(in srgb, var(--text-soft) 24%, transparent);
    border-color: var(--text);
    transform: translateY(-1px);
}
.v2-schedule-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}
.v2-schedule-status-completed {
    background: color-mix(in srgb, var(--ok) 15%, transparent);
    color: var(--ok);
}
.v2-schedule-status-skipped {
    background: color-mix(in srgb, var(--text-faint) 20%, transparent);
    color: var(--text-faint);
}
.v2-schedule-notes { color: var(--text-soft); font-size: 0.9rem; margin-bottom: 8px; }
.v2-schedule-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-schedule-row-actions button { font-size: 0.82rem; padding: 6px 14px; }
.v2-schedule-chevron {
    color: var(--text-soft);
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform 120ms ease, color 120ms ease;
    line-height: 1;
    padding: 0 2px;
}
.v2-schedule-row:hover .v2-schedule-chevron { color: var(--signal); }
.v2-schedule-row.is-expanded .v2-schedule-chevron { transform: rotate(90deg); color: var(--signal); }
.v2-action-danger {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-faint);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
}
.v2-action-danger:hover { color: var(--warn); }
.v2-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 900px) {
    /* Layout */
    .v2-schedule { padding: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .v2-schedule-columns { display: block; flex: 0 0 auto; min-height: auto; }
    .v2-schedule-sessions { max-width: 100%; max-height: none; overflow: visible; padding-bottom: 16px; margin-bottom: 0; }
    .v2-schedule-sticky { position: static; }
    .v2-schedule-row { grid-template-columns: 24px 52px 1fr auto; grid-template-areas: "status time title intensity" "status type type type"; min-height: 56px; }
    .v2-schedule-status { grid-area: status; align-self: start; margin-top: 2px; }
    .v2-schedule-time { grid-area: time; }
    .v2-schedule-session-title { grid-area: title; }
    .v2-schedule-type { grid-area: type; font-size: 0.8rem; }
    .v2-intensity-badge { grid-area: intensity; }
    .v2-schedule-chevron { display: none; }
    .v2-schedule-header-row { display: none; }

    /* Hide desktop heading row on mobile */
    .v2-schedule-heading-row { display: none; }

    /* Mobile compact header */
    .v2-schedule-mobile-header {
        display: flex;
        flex-direction: column;
        gap: 8px;
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--bg);
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
    }
    .v2-schedule-mobile-next {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .v2-schedule-mobile-next-label {
        display: inline-flex;
        align-items: center;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        color: var(--signal);
        background: color-mix(in srgb, var(--signal) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
        border-radius: 999px;
        padding: 2px 7px;
        flex-shrink: 0;
    }
    .v2-schedule-mobile-next-body {
        color: var(--text);
        font-size: 0.88rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .v2-schedule-mobile-actions {
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .v2-schedule-mobile-actions .v2-btn-primary {
        flex: 1 1 auto;
        min-height: 40px;
        font-size: 0.88rem;
    }
    .v2-schedule-mobile-add {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: transparent;
        color: var(--text);
        font-size: 1.2rem;
        cursor: pointer;
    }

    /* Today row highlight */
    .v2-schedule-row-today {
        border-left: 3px solid var(--signal);
        padding-left: 9px;
    }

}

/* Desktop: hide mobile-only elements */
@media (min-width: 901px) {
    .v2-schedule-mobile-header { display: none; }
    .v2-schedule { padding: 14px 24px 24px; }
}

/* ── Proposal cards ── */
.v2-proposal { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.v2-proposal-urgency {
    font-weight: 600;
}
.v2-proposal-act-now .v2-proposal-urgency { color: var(--warn); }
.v2-proposal-preferred .v2-proposal-urgency { color: var(--signal); }
.v2-proposal-nice-to-have .v2-proposal-urgency { color: var(--text-soft); }
.v2-proposal-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--signal);
    color: var(--bg);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    vertical-align: middle;
    margin-right: 6px;
}
.v2-proposal-body { margin: 8px 0 10px; }
.v2-proposal-recommendation {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
    margin: 0 0 8px;
}
.v2-proposal-rec-instead {
    color: var(--text-soft);
}
.v2-proposal-rec-do {
    color: var(--text);
    font-weight: 600;
}
.v2-proposal-act-now .v2-proposal-rec-do { color: var(--warn); }
.v2-proposal-why {
    margin-top: 4px;
}
.v2-proposal-why-label {
    display: block;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin: 0 0 4px;
    font-weight: 500;
}
.v2-proposal-why-text {
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}
.v2-proposal-why-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.5;
}
.v2-proposal-why-list li {
    margin: 0 0 4px;
}
.v2-proposal-why-list li:last-child {
    margin-bottom: 0;
}
.v2-proposal-why-list li::marker {
    color: var(--text-faint);
}
.v2-proposal-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 20px;
    margin: 0 0 8px;
    padding: 0;
}
.v2-proposal-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.v2-proposal-meta dt {
    color: var(--text-faint);
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    font-weight: 500;
    margin: 0;
}
.v2-proposal-meta dd {
    color: var(--text);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.35;
    word-break: break-word;
}
.v2-proposal-actions { display: flex; gap: 12px; align-items: center; }
.v2-schedule-proposals .v2-col-heading { margin-bottom: 12px; }
.v2-schedule-proposals .v2-proposal:first-of-type { margin-top: 0; }

.v2-dropdown-wrap { position: relative; display: inline-block; }
.v2-dropdown-wrap > .v2-dropdown { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: var(--shell); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,0,0,0.3); z-index: 200; padding: 4px; }
.v2-dropdown-wrap .v2-dropdown-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px; background: transparent; border: 0; color: var(--text); text-align: left; cursor: pointer; border-radius: 4px; font-size: 0.9rem; }
.v2-dropdown-wrap .v2-dropdown-item:hover { background: var(--surface); }
.v2-dropdown-wrap .v2-dropdown-item-soon { color: var(--text-faint); cursor: not-allowed; opacity: 0.55; }
.v2-dropdown-wrap .v2-dropdown-item-soon:hover { background: transparent; }
.v2-dropdown-wrap .v2-dropdown-item-soon .v2-soon { opacity: 0.8; }
.v2-soon { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); border: 1px solid var(--line); padding: 2px 6px; border-radius: 10px; }

@media (max-width: 600px) {
    /* Dropdown: bottom-sheet pattern */
    .v2-dropdown-wrap > .v2-dropdown { position: fixed; left: 0; right: 0; bottom: 0; top: auto; border-radius: 12px 12px 0 0; padding: 8px; }
    .v2-dropdown-wrap .v2-dropdown-item { min-height: 48px; padding: 14px 16px; font-size: 1rem; }

    /* Schedule page padding + title */
    .v2-schedule { padding: 0; }
    .v2-schedule-page-title { font-size: 1.05rem; }

    /* Session rows: tap area */
    .v2-schedule-row { min-height: 56px; padding: 12px; }
    .v2-schedule-row-actions { gap: 8px; }
    .v2-schedule-row-actions button { flex: 1 1 140px; min-height: 44px; }

    /* Proposal card: tighten + stack */
    .v2-proposal { padding: 14px; margin-bottom: 16px; }
    .v2-proposal-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .v2-proposal-window-label::after { display: none; }
    .v2-proposal-meta { grid-template-columns: 1fr; gap: 10px; }
    .v2-proposal-recommendation { font-size: 1rem; line-height: 1.45; }
    .v2-proposal-why { padding-top: 10px; }
    .v2-proposal-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .v2-proposal-actions .v2-btn-primary,
    .v2-proposal-actions .v2-btn-secondary { width: 100%; min-height: 44px; }
    .v2-dropdown-wrap { width: 100%; }
    .v2-dropdown-wrap .v2-btn-primary { width: 100%; }

    /* Schedule header: stack actions */
    .v2-schedule-header { flex-direction: column; align-items: stretch; gap: 12px; }
    .v2-schedule-header-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .v2-schedule-header-actions button { width: 100%; min-height: 44px; }

    /* Modals: full-width bottom-sheet */
    .v2-modal { width: 100%; max-width: 100vw; border-radius: 12px 12px 0 0; margin-top: auto; }
    .v2-form-row { grid-template-columns: 1fr; }
    /* 16px prevents iOS auto-zoom on focus */
    .v2-camp-form input,
    .v2-camp-form select,
    .v2-camp-form textarea { min-height: 44px; font-size: 16px; }
}

.v2-schedule-header-actions { display: flex; gap: 8px; align-items: center; }

/* ── Chat seed pin ── */
.v2-chat-seed-pin {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--signal) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
    border-radius: 8px;
    margin: 0 0 12px;
}
.v2-chat-seed-label { font-weight: 600; color: var(--signal); font-size: 0.85rem; white-space: nowrap; }
.v2-chat-seed-excerpt { flex: 1 1 auto; color: var(--text-soft); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v2-chat-seed-pin button.v2-btn-secondary { flex-shrink: 0; font-size: 0.8rem; padding: 6px 12px; }

/* ── Review panel ── */

.v2-review-panel {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    background: var(--surface);
}

.v2-review-body { color: var(--text-soft); font-size: 0.9rem; margin: 0 0 14px; line-height: 1.45; }
.v2-review-footnote { color: var(--text-faint); font-size: 0.75rem; margin: 12px 0 0; }
.v2-review-error { color: var(--warn); font-size: 0.82rem; margin: 10px 0 0; }

.v2-review-idle .v2-btn-primary { width: 100%; min-height: 44px; }

.v2-review-shimmer {
    height: 18px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--text-faint) 15%, transparent) 0%,
        color-mix(in srgb, var(--text-faint) 25%, transparent) 50%,
        color-mix(in srgb, var(--text-faint) 15%, transparent) 100%);
    background-size: 200% 100%;
    animation: v2-shimmer 1.4s linear infinite;
    margin: 8px 0;
}
.v2-review-shimmer:nth-child(2) { width: 80%; }
.v2-review-shimmer:nth-child(3) { width: 60%; }

@keyframes v2-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.v2-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v2-review-head-left { display: inline-flex; align-items: center; gap: 10px; }
.v2-review-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-soft);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.v2-review-prev:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
    background: color-mix(in srgb, var(--signal) 8%, transparent);
}
.v2-review-progress { display: inline-flex; align-items: center; gap: 8px; }
.v2-review-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-faint) 30%, transparent);
    transition: background 200ms ease;
}
.v2-review-dot.is-active { background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent); }
.v2-review-dot.is-done { background: color-mix(in srgb, var(--signal) 60%, transparent); }
.v2-review-dot.is-accepted {
    background: var(--signal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--signal) 20%, transparent);
}
.v2-review-dot.is-skipped {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text-faint) 40%, transparent);
    position: relative;
}
.v2-review-dot.is-skipped::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 1px;
    background: var(--text-faint);
}
.v2-review-count { font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-left: 4px; }

.v2-review-chip {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 10px;
    border: 1px solid var(--line);
}
.v2-review-urgency-actnow { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.v2-review-urgency-preferred { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 60%, transparent); background: color-mix(in srgb, var(--signal) 10%, transparent); }
.v2-review-urgency-nice { color: var(--text-soft); border-color: var(--line); }

.v2-review-headline {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.v2-review-rec {
    font-size: 1.08rem;
    line-height: 1.5;
    margin: 0 0 12px;
    color: var(--text);
}

.v2-review-finding {
    color: var(--text-soft);
    font-size: 0.95rem;
    margin: 0 0 12px;
    line-height: 1.5;
}

.v2-review-session-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
    margin: 0 0 12px;
    cursor: pointer;
    transition: background 150ms ease;
}
.v2-review-session-chip:hover {
    background: color-mix(in srgb, var(--signal) 20%, transparent);
}

.v2-review-rethink {
    color: var(--warn);
    font-size: 0.82rem;
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--warn);
}

.v2-review-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--warn) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
    border-radius: 999px;
    padding: 4px 10px;
    margin: 0 0 8px;
    cursor: pointer;
    transition: background 150ms ease;
    font-family: inherit;
}
button.v2-review-linked-chip:hover {
    background: color-mix(in srgb, var(--warn) 16%, transparent);
}
.v2-review-linked-chip.is-done {
    opacity: 0.6;
}

@keyframes v2-row-pulse {
    from { outline-color: var(--signal); }
    to   { outline-color: transparent; }
}
.v2-schedule-row.v2-schedule-row-pulse {
    outline: 2px solid var(--signal);
    outline-offset: -1px;
    animation: v2-row-pulse 1200ms ease-out forwards;
}

.v2-review-checkin { margin: 0 0 14px; }
.v2-review-checkin-q {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.v2-review-checkin-q:last-of-type { margin-bottom: 10px; }
.v2-review-checkin-label {
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: var(--text-soft);
}
.v2-checkin-scale-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.v2-checkin-endpoint {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-soft);
    min-width: 28px;
    white-space: nowrap;
}
.v2-checkin-endpoint:last-of-type { text-align: right; }
.v2-checkin-scale {
    display: flex;
    flex: 1 1 auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.v2-checkin-cell {
    flex: 1 1 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-soft);
    background: var(--surface);
    border: 0;
    border-right: 1px solid var(--line);
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, color 120ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.v2-checkin-cell:last-child { border-right: 0; }
.v2-checkin-cell:hover { background: var(--shell); color: var(--text); }
.v2-checkin-cell:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; z-index: 1; position: relative; }
.v2-checkin-cell.is-selected {
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    color: var(--signal);
    font-weight: 700;
}
/* Checkin slider rows — reuses .v2-headimpact-slider base (line ~7801); don't override that rule */
.v2-checkin-scale-row--slider input.v2-checkin-slider {
    width: 100%;
}
.v2-checkin-scale-row--slider .v2-checkin-anchors {
    margin-top: 2px;
}
@media (max-width: 420px) {
    .v2-checkin-scale-row--slider input.v2-checkin-slider {
        height: 24px;
    }
}

.v2-review-note { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.82rem; resize: vertical; box-sizing: border-box; }
.v2-review-note:focus { outline: none; border-color: var(--signal); }

.v2-review-feel-banner { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 10px; background: color-mix(in srgb, var(--signal) 6%, transparent); border-left: 3px solid color-mix(in srgb, var(--signal) 60%, transparent); border-radius: 4px; font-size: 0.78rem; color: var(--text-soft); }
.v2-review-feel-banner-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.v2-review-complete-feel { margin: 0 0 10px; font-size: 0.85rem; color: var(--text-soft); font-style: italic; }

.v2-review-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.v2-review-complete .v2-review-body { margin-bottom: 12px; }
.v2-review-applied-list { list-style: none; padding: 0; margin: 0 0 14px; }
.v2-review-applied-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 8px;
}
.v2-review-applied-session {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    grid-column: 1 / 2;
}
.v2-review-applied-when {
    grid-column: 1 / 2;
    color: var(--text-faint);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}
.v2-review-applied-summary {
    grid-column: 1 / 2;
    color: var(--text-soft);
    font-size: 0.86rem;
    line-height: 1.4;
}

.v2-review-applied-item .v2-btn-secondary {
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    align-self: center;
    font-size: 0.78rem;
    padding: 6px 12px;
}

button.v2-btn-primary.is-accepted { background: color-mix(in srgb, var(--signal) 30%, transparent); color: var(--signal); }

.v2-review-unqueue {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    grid-column: 2 / 3;
    grid-row: 1 / 4;
    align-self: center;
    justify-self: center;
}
.v2-review-unqueue:hover { color: var(--warn); border-color: var(--warn); }

.v2-review-apply-error {
    grid-column: 1 / 2;
    color: var(--warn);
    font-size: 0.78rem;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.v2-review-applying {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-soft);
    font-size: 0.9rem;
}
.v2-review-applying::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--signal) 30%, transparent);
    border-top-color: var(--signal);
    animation: v2-spin 800ms linear infinite;
    flex-shrink: 0;
}
@keyframes v2-spin { to { transform: rotate(360deg); } }

.v2-review-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 0 0 12px;
}
.v2-review-edit-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-soft);
}
.v2-review-edit-form input,
.v2-review-edit-form select {
    background: var(--shell);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    min-height: 36px;
}
.v2-review-edit-form input:focus,
.v2-review-edit-form select:focus {
    outline: none;
    border-color: var(--signal);
}
.v2-review-edited-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--signal);
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
    margin-left: 8px;
}

@media (max-width: 900px) {
    .v2-review-edit-form { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Keyboard-aware bottom nav ── */
@media (max-width: 900px) {
    body.keyboard-open .v2-bottom-nav {
        display: none;
    }
    body.keyboard-open .v2-main {
        padding-bottom: 0;
    }
}

/* ── Native-app feel: no callout/select on UI chrome ── */
.v2-bottom-nav,
.v2-bottom-tab,
.v2-header,
.v2-header-mobile-bar,
.v2-mic-btn,
.v2-send-btn,
.v2-user-menu-trigger,
.v2-header-expand,
.v2-prompts-nav {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Mobile / PWA defenses ── */
html, body {
    overscroll-behavior: none;
}

button, a, [data-action] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.v2-shell {
    touch-action: manipulation;
}

/* ── Twin Shell (new grouped layout) ── */

.twin-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}

.twin-pane-empty {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    gap: 12px;
    color: var(--text-soft);
}

/* Flagged banner — sits just above .twin-groups, visually attached.
   button.twin-flagged selector bumps specificity over v1 button{} rules. */
.twin-flagged,
button.twin-flagged {
    grid-area: flagged;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 12px 0;
    padding: 9px 14px;
    border-radius: 8px 8px 4px 4px;
    background: color-mix(in srgb, var(--danger) 10%, var(--shell));
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-bottom-color: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    min-height: 38px;
    flex-shrink: 0;
}

.twin-flagged:hover,
button.twin-flagged:hover {
    background: color-mix(in srgb, var(--danger) 16%, var(--shell));
}

.twin-flagged-arrow {
    opacity: 0.7;
    font-size: 1rem;
}

/* Body wrapper — desktop: 2-column grid (groups | figure); mobile: flex column.
   The "flagged" row sits just above "groups" so the banner reads as a lead-in.
   Cards take ~36% (clamped 280–480px); the body figure takes the rest so the
   twin is the visual focal point and doesn't get crushed at iPad Pro widths. */
.twin-body {
    display: grid;
    grid-template-columns: clamp(280px, 36%, 480px) minmax(360px, 1fr);
    grid-template-areas:
        "tabs    figure"
        "flagged figure"
        "groups  figure";
    grid-template-rows: auto auto 1fr;
    gap: 0 var(--space-3, 12px);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* 3D body figure — right rail on desktop. Flex column so the readiness overlay
   gets dedicated top space and the canvas takes the remainder, preventing the
   readiness number from overlapping the body's head.
   Explicit `var(--bg)` underneath the gradient so the figure never flashes
   white before the gradient paints or before Three.js mounts the canvas. */
.twin-body-figure {
    grid-area: figure;
    position: relative;
    /* Dark theme: deep space backdrop for additive-blended luminous particles.
       Light theme overrides below switch to a soft light gradient that pairs
       with the normal-blended dark particles built in body.js / shaders.js. */
    background-color: #050b14;
    background-image: radial-gradient(ellipse at 50% 50%, #0e1a2a 0%, #050b14 70%);
    height: 100%;
    min-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Deliberate "scope panel" framing — reads as an instrument view in either
       theme, so the dark-by-default appearance never feels accidental. */
    border-radius: 14px;
    border: 1px solid var(--line);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 32px rgba(0, 0, 0, 0.18);
}

:root[data-theme="light"] .twin-body-figure {
    background-color: #e6ecf3;
    background-image: radial-gradient(ellipse at 50% 50%, #f4f7fb 0%, #d9e2ec 75%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(20, 40, 70, 0.08);
}

.twin-body-figure .twin-3d-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background-color: #050b14;
    background-image: radial-gradient(ellipse at 50% 50%, #0e1a2a 0%, #050b14 70%);
}

:root[data-theme="light"] .twin-body-figure .twin-3d-loading {
    background-color: #e6ecf3;
    background-image: radial-gradient(ellipse at 50% 50%, #f4f7fb 0%, #d9e2ec 75%);
}

:root[data-theme="light"] .twin-body-figure .twin-3d-readiness-label {
    color: var(--text-faint);
}

:root[data-theme="light"] .twin-body-figure .twin-3d-readiness-score {
    /* Knock back the heavy dark-bg shadow so the score doesn't smear on light. */
    text-shadow: 0 1px 2px rgba(20, 40, 70, 0.12);
}

.twin-body-figure .twin-3d-readiness-overlay {
    position: static;
    padding: 14px 0 6px;
    text-align: center;
    z-index: 5;
    flex-shrink: 0;
}

.twin-body-figure .twin-3d-canvas {
    display: block;
    width: 100%;
    flex: 1;
    min-height: 0;
    background: transparent;
    /* Hide canvas until Three.js has rendered (engine.js adds `.hidden` to the
       loading overlay once mounted). Without this the unpainted canvas flashes
       opaque white in some browsers before the WebGL context attaches. */
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.twin-body-figure .twin-3d-loading.hidden ~ .twin-3d-canvas {
    opacity: 1;
}

/* Tab bar — hidden on desktop (grid handles layout) */
.twin-tabs {
    grid-area: tabs;
    display: none;
    gap: 4px;
    padding: 8px 12px;
    background: var(--shell);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

button.twin-tab {
    flex: 1;
    padding: 7px 8px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-soft);
    border: none;
    cursor: pointer;
    min-height: 36px;
    transition: background 0.15s ease, color 0.15s ease;
}

button.twin-tab[aria-selected="true"] {
    background: var(--signal);
    color: var(--bg); /* --bg contrasts with --signal in both light and dark themes */
}

/* Tab-level danger badge — replaces the standalone "⚠ N flagged" banner.
   The pill carries the count of danger cards in that tab's group; clicking
   the tab jumps to the first one. has-flagged adds a coral underline so the
   tab is recognizable as actionable even before the user reads the badge. */
.twin-tab.has-flagged {
    color: var(--bad, #EF4444);
}
button.twin-tab[aria-selected="true"].has-flagged {
    color: var(--bg);
}
.twin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bad, #EF4444) 85%, transparent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
}
button.twin-tab[aria-selected="true"] .twin-tab-badge {
    background: color-mix(in srgb, var(--bg) 85%, var(--bad, #EF4444));
    color: var(--bad, #EF4444);
}

/* Groups container — scrolls vertically when an expanded card's inline
   detail panel pushes the column past viewport height. The detail itself
   has its own max-height/scroll for very long content. */
.twin-groups {
    grid-area: groups;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    /* Themed scrollbar — matches the panel background instead of the OS
       default chrome rail. Same treatment applied to .twin-card-detail. */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-faint) 35%, transparent) transparent;
}
.twin-groups::-webkit-scrollbar,
.twin-card-detail::-webkit-scrollbar {
    width: 6px;
}
.twin-groups::-webkit-scrollbar-track,
.twin-card-detail::-webkit-scrollbar-track {
    background: transparent;
}
.twin-groups::-webkit-scrollbar-thumb,
.twin-card-detail::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-faint) 30%, transparent);
    border-radius: 3px;
}
.twin-groups::-webkit-scrollbar-thumb:hover,
.twin-card-detail::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-faint) 55%, transparent);
}
.twin-card-detail {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-faint) 35%, transparent) transparent;
}

/* Individual group panel */
.twin-group {
    background: var(--shell);
    border-radius: 10px;
    padding: 6px 8px 8px;
    border: 1px solid var(--line);
}

.twin-group--headless {
    background: transparent;
    border: none;
    padding: 0;
}

.twin-group-header {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 0 0 6px;
}

/* Group body layouts */
.twin-group-body {
    display: block;
}

.twin-group[data-group="systems"] .twin-group-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.twin-group[data-group="output"] .twin-group-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.twin-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name values';
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--shell-2);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-height: 36px;
}

/* Sublabel is mobile-only — the mobile media query reveals it as a third
   row in each card. On desktop the cards are dense, single-row, no room. */
.twin-card-sublabel { display: none; }

.twin-card:hover {
    border-color: var(--line-strong);
}

.twin-card[data-status="danger"] {
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 5%, var(--shell-2));
}

/* Expanded card keeps its in-flow size — the detail floats over the bottom
   of .twin-groups instead of pushing siblings down. Cards stay put. The
   border picks up the card's own status color (set on the card via
   --status-color in ui.js) so a flagged card highlights coral, a good card
   green, etc. — matches the original mobile design where the active card
   was clearly the source of the detail panel. */
.twin-card.expanded {
    border-color: var(--status-color, var(--signal));
    border-width: 2px;
    background: color-mix(in srgb, var(--status-color, var(--signal)) 8%, var(--shell-2));
    cursor: default;
}

.twin-card-head {
    grid-area: name;
    display: flex;
    align-items: center;
    gap: 9px;
}

.twin-card-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   HOME VIEW — Variant D
   All classes use .v2-home-* prefix.
   ═══════════════════════════════════════════════════════════════ */

/* ── Activity panel ── */

.v2-activity-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
    border-radius: 999px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.v2-activity-btn:hover {
    background: var(--shell-2);
    color: var(--text);
}

.v2-activity-btn[aria-expanded="true"] {
    background: var(--shell-2);
    color: var(--text);
}

.v2-activity-scrim {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 118;
}

.v2-activity-panel {
    position: fixed;
    top: 52px;
    right: 16px;
    width: 360px;
    max-height: 480px;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 8px 32px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 119;
}

.v2-activity-panel::before {
    content: '';
    position: absolute;
    top: -9px;
    right: 24px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 9px solid var(--line);
}

.v2-activity-panel::after {
    content: '';
    position: absolute;
    top: -7px;
    right: 25px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid var(--shell);
}

.v2-activity-tabs {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.v2-activity-tab {
    background: transparent;
    border: none;
    color: var(--text-soft);
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 150ms ease;
}

.v2-activity-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 150ms ease;
}

.v2-activity-tab--active {
    color: var(--text);
}

.v2-activity-tab--active::after {
    background: var(--signal);
}

.v2-activity-tab[disabled],
.v2-activity-tab[aria-disabled="true"] {
    opacity: 0.36;
    cursor: not-allowed;
}

.v2-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.v2-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    transition: background 120ms ease;
}

.v2-activity-row:last-child {
    border-bottom: none;
}

.v2-activity-row:hover {
    background: var(--shell-2);
}

.v2-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.5em;
}

.v2-activity-dot--danger {
    background: var(--danger);
}

.v2-activity-dot--warn {
    background: var(--warn);
}

.v2-activity-dot--signal {
    background: var(--signal);
}

.v2-activity-dot--ok {
    background: var(--ok);
}

.v2-activity-dot--muted {
    background: var(--text-faint);
}

.v2-activity-text {
    flex: 1;
    min-width: 0;
}

.v2-activity-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.v2-activity-subtitle {
    color: var(--text-soft);
    font-size: 13px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.v2-activity-time {
    color: var(--text-faint);
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

.v2-activity-empty {
    color: var(--text-faint);
    text-align: center;
    padding: 48px 24px;
    font-size: 14px;
}

@media (max-width: 900px) {
    .v2-activity-panel {
        left: 16px;
        right: 16px;
        width: auto;
        max-height: min(70vh, 480px);
    }

    .v2-activity-panel::before,
    .v2-activity-panel::after {
        display: none;
    }
}

/* ── Notifications ── */

.v2-activity-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--signal);
    color: var(--shell);
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

/* Summary header strip */
.v2-notif-summary {
    padding: 8px 16px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.v2-notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.v2-notif-card {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    transition: background 120ms ease;
}

.v2-notif-card:last-child {
    border-bottom: none;
}

.v2-notif-card--pending {
    border-left: 2px solid var(--signal);
    padding-left: 14px;
}

.v2-notif-card--rating {
    background: var(--shell-2);
    border-left: 2px solid var(--signal);
    padding-left: 14px;
}

.v2-notif-card--answered .v2-notif-title {
    color: var(--text-soft);
}

.v2-notif-card--answered .v2-notif-subtitle {
    color: var(--text-faint);
}

/* Card head row: text block + optional action button */
.v2-notif-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.v2-notif-text {
    flex: 1;
    min-width: 0;
}

.v2-notif-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.v2-notif-subtitle {
    color: var(--text-soft);
    font-size: 13px;
    margin-top: 2px;
}

/* "Rate →" pill button in pending card head */
button.v2-notif-rate-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 40%, transparent);
    border-radius: 999px;
    color: var(--signal);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, border-color 120ms ease;
}

button.v2-notif-rate-btn:hover {
    background: color-mix(in srgb, var(--signal) 20%, transparent);
    border-color: var(--signal);
}

button.v2-notif-rate-btn:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* Inline rating dialog */
.v2-notif-rating {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Label + current value row */
.v2-notif-rating-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.v2-notif-intake-label {
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Large prominent numeric value feedback */
.v2-headimpact-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--signal);
    line-height: 1;
    min-width: 1.2ch;
    text-align: right;
}

/* Draggable range slider */
input.v2-headimpact-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background: transparent;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 0;
}

input.v2-headimpact-slider:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Track — webkit */
input.v2-headimpact-slider::-webkit-slider-runnable-track {
    height: 5px;
    background: var(--line-strong);
    border-radius: 999px;
}

/* Thumb — webkit */
input.v2-headimpact-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--shell);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    margin-top: -7.5px;
    cursor: pointer;
    transition: box-shadow 120ms ease;
}

input.v2-headimpact-slider:hover::-webkit-slider-thumb {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Track — firefox */
input.v2-headimpact-slider::-moz-range-track {
    height: 5px;
    background: var(--line-strong);
    border-radius: 999px;
    border: none;
}

/* Progress fill left of thumb — firefox */
input.v2-headimpact-slider::-moz-range-progress {
    height: 5px;
    background: var(--signal);
    border-radius: 999px;
}

/* Thumb — firefox */
input.v2-headimpact-slider::-moz-range-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--signal);
    border: 2px solid var(--shell);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 120ms ease;
}

input.v2-headimpact-slider:hover::-moz-range-thumb {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Anchor hint row beneath the slider */
.v2-headimpact-anchors {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 11px;
    line-height: 1.2;
}

/* Action row: Cancel + Save */
.v2-notif-rating-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

button.v2-notif-cancel-btn {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

button.v2-notif-cancel-btn:hover {
    background: var(--shell-2);
    border-color: var(--line-strong);
    color: var(--text);
}

button.v2-notif-cancel-btn:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

button.v2-notif-save-btn {
    background: var(--signal);
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--shell);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 14px;
    cursor: pointer;
    transition: filter 120ms ease;
}

button.v2-notif-save-btn:hover {
    filter: brightness(1.1);
}

button.v2-notif-save-btn:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* Answered state */
.v2-notif-logged {
    margin-top: 8px;
}

.v2-notif-logged-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--ok) 14%, transparent);
    color: var(--ok);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .v2-notif-card {
        padding: 10px 12px;
    }

    .v2-notif-card--pending,
    .v2-notif-card--rating {
        padding-left: 10px;
    }

    .v2-notif-head {
        gap: 8px;
        align-items: center;
    }

    .v2-headimpact-anchors {
        font-size: 10px;
    }

    .v2-headimpact-anchors span:nth-child(2) {
        display: none;
    }

    button.v2-notif-rate-btn {
        min-height: 36px;
    }

    button.v2-notif-cancel-btn,
    button.v2-notif-save-btn {
        min-height: 36px;
    }
}

/* ── Layout: main + rail ── */
.v2-home-shell {
    display: grid;
    grid-template-columns: 1fr 300px;
    min-height: 0;
    flex: 1;
}

.v2-home-main {
    padding: 20px 48px 20px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.v2-home {
    width: 100%;
}

/* ── Greeting ── */
.v2-home-greeting {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 24px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.4px;
}

.v2-home-greeting strong {
    background: linear-gradient(90deg, var(--signal), color-mix(in srgb, var(--signal) 60%, #8b5cf6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.v2-home-greeting-date {
    color: var(--text-soft);
    font-size: 13.5px;
    font-weight: 400;
}

/* ── Hero ask ── */
/* ── Ask card: shared wrapper for input form + chips ── */
.v2-home-ask-card {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    max-width: 560px;
    margin-bottom: 24px;
}

.v2-home-ask-hero {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 10px 16px;
}

.v2-home-ask-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    min-width: 0;
}

.v2-home-ask-input::placeholder {
    color: var(--text-faint);
}

/* ── Quick-prompt chips carousel ── */
.v2-home-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 12px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.v2-home-chips::-webkit-scrollbar {
    display: none;
}

.v2-home-chip {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    color: var(--text-soft);
    font-size: 12.5px;
    cursor: pointer;
    transition: all 140ms;
    white-space: nowrap;
    flex-shrink: 0;
}

.v2-home-chip:hover {
    border-color: color-mix(in srgb, var(--signal) 40%, transparent);
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 12%, transparent);
}

/* ── Section row ── */
.v2-home-section-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 12px;
}

.v2-home-section-h {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-soft);
}

.v2-home-section-link {
    color: var(--signal);
    font-size: 12.5px;
    text-decoration: none;
}

.v2-home-section-link:hover {
    text-decoration: underline;
}

/* ── Page tiles ── */
.v2-home-tiles-section {
    width: 100%;
}

.v2-home-tiles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.v2-home-tile {
    background: var(--shell);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    color: var(--text);
    text-align: left;
    font: inherit;
    position: relative;
    transition: border-color 180ms, background 180ms, transform 180ms, box-shadow 180ms;
    overflow: hidden;
}

.v2-home-tile-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex: 0 0 110px;
}

.v2-home-tile-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    flex: 0 0 auto;
    min-width: 44px;
}

.v2-home-tile-value--ok      { color: var(--ok); }
.v2-home-tile-value--warn    { color: var(--warn); }
.v2-home-tile-value--danger  { color: var(--danger); }
.v2-home-tile-value--neutral { color: var(--text-faint); font-weight: 500; }

.v2-home-tile-sub {
    font-size: 12px;
    color: var(--text-faint);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-home-tile-go {
    flex: 0 0 auto;
    color: var(--signal);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 180ms, transform 180ms;
    pointer-events: none;
}

@media (hover: hover) {
    .v2-home-tile:hover {
        border-color: color-mix(in srgb, var(--signal) 50%, var(--line));
        background: color-mix(in srgb, var(--signal) 6%, var(--shell));
    }

    .v2-home-tile:hover .v2-home-tile-go {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2-home-tile-go {
        transition: opacity 180ms;
        transform: translateX(0);
    }
}

/* ── Athletes pill row ── */
.v2-home-athlete-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 0;
}

.v2-home-athlete-pills::-webkit-scrollbar {
    display: none;
}

.v2-home-athlete-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-soft);
    font-size: 12.5px;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all 140ms;
}

.v2-home-athlete-pill:hover {
    border-color: color-mix(in srgb, var(--signal) 40%, transparent);
    color: var(--text);
    background: color-mix(in srgb, var(--signal) 12%, transparent);
}

.v2-home-athlete-pill.is-pinned {
    border-color: color-mix(in srgb, var(--signal) 40%, transparent);
    color: var(--text);
}

.v2-home-athlete-pill--manage {
    color: var(--signal);
    border-style: solid;
    font-size: 11px;
    font-weight: 400;
    padding: 4px 8px;
}

.v2-home-ath-name {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.v2-home-ath-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.twin-card-dot[data-status="good"]    { background: var(--ok); }
.twin-card-dot[data-status="warning"] { background: var(--warn); }
.twin-card-dot[data-status="danger"]  { background: var(--danger); }
.twin-card-dot[data-status="unknown"] { background: var(--text-faint); }

.twin-card-name {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twin-card-values {
    grid-area: values;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    justify-content: flex-end;
}

.twin-card-single-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--status-color, var(--text));
    font-family: "Bricolage Grotesque", sans-serif;
}

.twin-card-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.twin-card-metric-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--status-color, var(--text));
    font-family: "Bricolage Grotesque", sans-serif;
    line-height: 1;
}

.twin-card-metric-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1;
}

/* Detail block — floats at the bottom of .twin-groups (position: relative)
   instead of expanding the card inline. Cards never get pushed down. A
   ::before pseudo-element draws a soft dim/blur behind it so the layering
   reads as a deliberate overlay panel and the cards behind it look "out of
   focus" rather than randomly covered. */
.twin-card-detail {
    position: relative;
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--shell);
    border: 1px solid color-mix(in srgb, var(--signal) 50%, var(--line));
    border-radius: 12px;
    box-shadow: 0 -16px 40px -12px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.22);
    animation: card-detail-in 0.18s ease-out;
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 5;
}

/* Backdrop dim — pseudo on .twin-groups so it stretches the full card column
   when any card is expanded. Fades the cards underneath without hiding them,
   so the user can still see the structure while focus is on the detail. */
.twin-groups:has(.twin-card.expanded)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 25%, transparent);
    z-index: 3;
    pointer-events: none;
    animation: card-detail-in 0.18s ease-out;
}

/* Keep the expanded card itself above the dim so it visually anchors the detail.
   `isolation: isolate` creates a stacking context without `position: relative`,
   so the detail's absolute positioning still anchors to .twin-groups (the bottom
   of the card column) instead of getting trapped inside the card. */
.twin-card.expanded {
    isolation: isolate;
    z-index: 4;
}

:root[data-theme="light"] .twin-card-detail {
    box-shadow: 0 -16px 40px -12px rgba(20, 40, 70, 0.18), 0 6px 18px rgba(20, 40, 70, 0.10);
}

.twin-card-detail .twin-3d-detail-header {
    display: none;
}

.twin-card-detail .twin-3d-detail-sublabel {
    margin-bottom: 12px;
}

.twin-card-detail .twin-3d-detail-inference {
    padding-top: 10px;
}


/* Mobile layout — full screen, NO scrolling: the figure + tabs + carousel + detail
   all fit within the viewport. */
@media (max-width: 900px) {
    .v2-twin-view .twin-pane,
    .twin-pane {
        overflow: hidden;
    }

    .twin-3d-stage {
        grid-template-columns: 1fr;
    }
    .twin-3d-cards {
        display: none;
    }

    /* Mobile body uses fixed-allocation flex with a reserved detail slot at
       the bottom. position: relative + padding-bottom carves out 220px of
       guaranteed space — the figure (flex 1 1 0) absorbs everything above,
       and the absolutely-positioned .twin-detail-slot sits in the reserved
       padding area. Result: opening, switching, or staying on a card never
       resizes the figure or the cards row. */
    .twin-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1;
        min-height: 0;
        position: relative;
        padding-bottom: 168px;
        grid-template-areas: none; /* override desktop grid */
        grid-template-columns: none;
    }

    /* Reserved detail slot — absolute, anchored to the body's bottom padding
       area. The slot uses align-items:end + height auto so the detail panel
       hugs its content from the bottom (no dead space below the inference
       text). The body's padding-bottom is the max headroom — content shorter
       than that visually leaves figure space, which is what we want. */
    .twin-detail-slot {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 160px;
        padding: 0 12px 6px;
        z-index: 6;
        pointer-events: none;
        display: flex;
        align-items: flex-end;
    }
    .twin-detail-slot > .twin-card-detail {
        pointer-events: auto;
    }

    .twin-groups {
        overflow: hidden;
    }

    .twin-body-figure {
        /* The figure absorbs whatever vertical space remains after the tabs,
           flagged banner, and cards row claim their fixed slots — the detail
           panel lives in body's reserved padding area, so the figure never
           resizes when a card opens. min-height 280px keeps it readable on
           short viewports. */
        position: relative;
        flex: 1 1 0;
        min-height: 280px;
        z-index: 15;
        overflow: hidden;
        border: none;
        border-radius: 0;
        box-shadow: none;
        isolation: isolate;
        /* Match the page bg exactly so there's no visible seam between the
           figure's dark backdrop and the cards section below it. The radial
           gradient still gives a subtle vignette around the body silhouette. */
        background-color: var(--bg);
        background-image: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--bg), white 6%) 0%, var(--bg) 75%);
    }

    /* Loading overlay needs to match the same backdrop on mobile, otherwise
       the brief load flash exposes the seam we just removed. */
    .twin-body-figure .twin-3d-loading {
        background-color: var(--bg);
        background-image: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--bg), white 6%) 0%, var(--bg) 75%);
    }

    /* Trim the readiness overlay padding on mobile — every pixel saved here
       is a pixel the body silhouette can fill. */
    .twin-body-figure .twin-3d-readiness-overlay {
        padding: 8px 0 2px;
    }

    /* Flagged banner — compact pill on mobile, sits between tabs and the
       cards section. flex-shrink:0 so it holds its height even when other
       content is competing for space in .twin-body. */
    .twin-flagged,
    button.twin-flagged {
        margin: 4px 12px 0;
        padding: 7px 12px;
        font-size: 0.78rem;
        min-height: 32px;
        border-radius: 8px;
    }

    /* Tabs sit naturally above the cards section. With the new fixed-slot
       layout, the figure flex-shrinks to fill remaining space — there's no
       dead band beneath the figure, so no lift is needed. */
    .twin-tabs {
        display: flex;
        flex-shrink: 0;
        z-index: 16;
        margin-top: 0;
        background: transparent;
        border-top: none;
        border-bottom: none;
        padding: 4px 12px 4px;
    }

    /* Smaller tab buttons — short height + tight font, less visual weight.
       Inactive tabs get a faint pill so they read as tappable instead of
       floating as plain text labels in the figure dead-space. */
    button.twin-tab {
        padding: 4px 10px;
        font-size: 0.7rem;
        min-height: 26px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--shell) 70%, transparent);
        border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    }
    button.twin-tab[aria-selected="true"] {
        border-color: transparent;
    }

    /* Tab filtering: hide groups not matching active tab */
    .twin-groups[data-active-tab="input"]   .twin-group[data-group="systems"],
    .twin-groups[data-active-tab="input"]   .twin-group[data-group="output"],
    .twin-groups[data-active-tab="systems"] .twin-group[data-group="input"],
    .twin-groups[data-active-tab="systems"] .twin-group[data-group="output"],
    .twin-groups[data-active-tab="output"]  .twin-group[data-group="input"],
    .twin-groups[data-active-tab="output"]  .twin-group[data-group="systems"] {
        display: none;
    }

    /* The .twin-groups column takes only the height its compact contents need;
       body figure absorbs the rest via flex:1. Modest gap between groups so
       the carousels aren't crammed against each other. */
    .twin-groups {
        flex-shrink: 0;
        padding: 0;
        gap: 10px;
    }

    /* Group container — carousel + (when expanded) detail. Tight padding. */
    .twin-group {
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }

    /* Show compact section headers on mobile so users can identify which
       carousel is which (Load / Systems / Signals) when scrolling through.
       Tiny font + tight padding so they don't steal much room from the body. */
    .twin-group-header {
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--text-faint);
        padding: 0 12px 2px;
        margin: 0;
    }
    .twin-group-header .twin-group-count {
        opacity: 0.65;
        font-weight: 600;
    }

    /* The Input group is .twin-group--headless (no <h2> in the markup), so
       it has no header to show. A ::before synthetic label gives it the
       same affordance as the other sections without touching the JS template
       or affecting desktop. */
    .twin-group--headless::before {
        content: "Load";
        display: block;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--text-faint);
        padding: 0 12px 2px;
    }

    /* Horizontal carousel — peek next card. */
    .twin-group-body,
    .twin-group[data-group="systems"] .twin-group-body,
    .twin-group[data-group="output"] .twin-group-body {
        display: flex;
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 12px;
        padding: 2px 12px 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .twin-group-body::-webkit-scrollbar { display: none; }

    /* Compact card on mobile — three vertical rows like the reference design:
       (1) name on top
       (2) dot + sublabel
       (3) value (status-colored)
       Layout uses CSS grid with the name + sublabel stacked on the left
       column and the value either inline (small cards) or on its own row.
       For mobile we stack everything vertically inside each card. */
    .twin-card {
        /* Halved from 56%/240px so ~3 cards fit per viewport on phones — the
           horizontal carousel feels like a chip strip instead of swipe-one-
           at-a-time. Names/sublabels are short enough that 120px holds them
           cleanly; the expanded card sits in the detail slot below at full
           width regardless. */
        flex: 0 0 28%;
        max-width: 120px;
        scroll-snap-align: start;
        min-height: 78px;
        padding: 8px 12px;
        gap: 2px;
        border-width: 1px;
        grid-template-columns: 1fr;
        grid-template-areas:
            'name'
            'sub'
            'values';
        align-items: start;
    }

    .twin-card-head {
        grid-area: name;
        display: flex;
        align-items: center;
        gap: 0;
    }
    /* Mobile reference puts the dot beside the SUBLABEL, not the name —
       hide the head's dot and rely on .twin-card-sublabel's leading dot. */
    .twin-card-head .twin-card-dot {
        display: none;
    }

    .twin-card-sublabel {
        grid-area: sub;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        color: var(--text-soft);
        line-height: 1.15;
    }
    .twin-card-sublabel::before {
        content: '';
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: var(--status-color, var(--text-faint));
        flex-shrink: 0;
    }

    .twin-card-values {
        grid-area: values;
        margin-top: 4px;
    }

    .twin-card.expanded {
        border-width: 2px;
    }

    .twin-card-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--text);
    }
    /* Reference design: inactive cards have a softened name color so the
       expanded card's bright label clearly reads as "active". */
    .twin-card:not(.expanded) .twin-card-name {
        color: var(--text-soft);
    }

    .twin-card-single-val {
        font-size: 1.15rem;
        font-weight: 700;
    }

    .twin-card-metric-val {
        font-size: 1rem;
        font-weight: 700;
    }

    .twin-card-metric-label {
        font-size: 0.6rem;
    }

    .twin-group--headless .twin-group-body {
        padding: 2px 12px 0;
    }
    .twin-group--headless .twin-card {
        flex: 1 1 auto;
        max-width: none;
    }

    /* Right-edge fade only on multi-card carousels — strong visual hint that
       more cards exist off-screen. Skipped for the headless Load group whose
       single card spans full width (we don't want its right edge to fade). */
    .twin-group:not(.twin-group--headless) .twin-group-body {
        -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 36px), transparent 100%);
                mask-image: linear-gradient(to right, black 0, black calc(100% - 36px), transparent 100%);
    }

    /* Detail panel fills the .twin-detail-slot at the bottom of .twin-body.
       Position is static (slot does the layout), height fills the slot, and
       internal scroll handles overflow. Sliding the detail to a fixed slot
       (not absolute over .twin-groups) means the cards row stays visible
       above it — neither the figure nor the cards move when content swaps.
       The !important on background overrides the global .card-detail-overlay
       rule (line ~2472), which hardcodes a dark popover bg meant for the
       old over-figure overlay style — wrong for the in-flow mobile layout. */
    .twin-card-detail {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 0;
        width: 100%;
        height: auto;
        max-height: 100%;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 -8px 22px -8px rgba(0, 0, 0, 0.35);
        background: var(--shell);
        border: 1.5px solid color-mix(in srgb, var(--status-color, var(--signal)) 60%, var(--line));
        border-radius: 12px;
        padding: 10px 14px 11px;
        z-index: 5;
    }
    /* Trim inner spacing — the inference paragraph was leaving an obvious gap
       below the last line. */
    .twin-card-detail .twin-3d-detail-inference {
        padding-top: 4px;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Light-mode override: the global [data-theme="light"] .card-detail-overlay
       rule paints the detail dark (legacy popover style). In the new fixed-slot
       layout it should match the page theme like every other card section. */
    :root[data-theme="light"] .twin-card-detail {
        background: var(--shell);
        border-color: color-mix(in srgb, var(--status-color, var(--signal)) 50%, var(--line));
    }
    :root[data-theme="light"] .twin-card-detail .twin-3d-detail-title {
        color: var(--text);
    }
    :root[data-theme="light"] .twin-card-detail .twin-3d-detail-sublabel,
    :root[data-theme="light"] .twin-card-detail .twin-3d-detail-inference {
        color: var(--text-soft);
    }

    .twin-card-detail .twin-3d-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 3px;
    }

    .twin-card-detail .twin-3d-detail-title {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--text);
    }

    .twin-card-detail .twin-3d-detail-value {
        font-size: 1rem;
        font-weight: 700;
        font-family: "Bricolage Grotesque", sans-serif;
    }

    .twin-card-detail .twin-3d-detail-sublabel {
        font-size: 0.72rem;
        margin-bottom: 6px;
    }

    .twin-card-detail .twin-3d-detail-inference {
        font-size: 0.72rem;
        line-height: 1.35;
        padding-top: 6px;
    }

    /* No backdrop dim on mobile — the detail lives in its own fixed slot
       below the cards, not overlapping them, so there's nothing to dim. */
    .twin-groups:has(.twin-card.expanded)::before {
        display: none;
    }

    /* Reset the desktop stacking context — not needed when there's no overlay */
    .twin-card.expanded {
        isolation: auto;
        z-index: auto;
    }
}

.v2-home-athlete-pill .v2-home-ath-dot {
    width: 6px;
    height: 6px;
}

.v2-home-ath-dot--ok   { background: var(--ok); }
.v2-home-ath-dot--warn { background: var(--warn); }
.v2-home-ath-dot--danger { background: var(--danger); }

/* ── Activity rail ── */
.v2-home-rail {
    border-left: 1px solid var(--line-strong);
    padding: 36px 22px;
    background: var(--bg);
    overflow-y: auto;
}

.v2-home-rail-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.v2-home-activity {
    display: flex;
    flex-direction: column;
}

.v2-home-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    cursor: pointer;
    min-height: 44px;
}

.v2-home-activity-row:last-child {
    border-bottom: 0;
}

.v2-home-activity-row:hover .v2-home-activity-title {
    color: var(--signal);
}

.v2-home-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

/* Activity dots reuse ath-dot color modifiers */
.v2-home-activity-dot--ok     { background: var(--ok); }
.v2-home-activity-dot--warn   { background: var(--warn); }
.v2-home-activity-dot--danger { background: var(--danger); }

.v2-home-activity-body {
    flex: 1;
    min-width: 0;
}

.v2-home-activity-title {
    color: var(--text);
    line-height: 1.35;
    transition: color 140ms;
}

.v2-home-activity-time {
    color: var(--text-faint);
    font-size: 11px;
    margin-top: 3px;
    font-family: 'JetBrains Mono', 'Fira Mono', monospace;
}

.v2-home-rail-foot {
    margin-top: 14px;
    text-align: right;
}

.v2-home-rail-foot a {
    color: var(--signal);
    font-size: 12.5px;
    text-decoration: none;
}

.v2-home-rail-foot a:hover {
    text-decoration: underline;
}

/* ── Get-started (zero state) ── */
.v2-home-get-started {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 48px 24px;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-soft);
}

/* ── Skeleton loading rows ── */
.v2-home-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    min-height: 50px;
}

/* Reuse project shimmer for skeleton fill lines */
.v2-home-skeleton-row .v2-skeleton-line {
    flex: 1;
}

/* ── Stagger-in animation ── */
@keyframes v2-home-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .v2-home-tile,
    .v2-home-athlete-pills,
    .v2-home-section-row,
    .v2-home-ask-card {
        animation: v2-home-fade-up 220ms ease-out both;
        will-change: transform, opacity;
    }

    .v2-home-tile:nth-child(1) { animation-delay: 0ms; }
    .v2-home-tile:nth-child(2) { animation-delay: 40ms; }
    .v2-home-tile:nth-child(3) { animation-delay: 80ms; }

    .v2-home-ask-card    { animation-delay: 0ms; }
    .v2-home-section-row { animation-delay: 40ms; }
    .v2-home-athlete-pills { animation-delay: 80ms; }
}

/* ── Mobile breakpoint ── */
@media (max-width: 900px) {
    .v2-home-shell {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
    }

    .v2-home-rail {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 24px 16px 32px;
        overflow-y: visible;
    }

    .v2-home-main {
        padding: 20px 16px 24px;
    }

    .v2-home-ask-card {
        max-width: none;
    }

    .v2-home-tiles-section {
        max-width: none;
    }

    .v2-home-tiles {
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .v2-home-tile {
        padding: 8px 12px;
        min-width: 0;
        gap: 10px;
    }

    .v2-home-tile-label {
        font-size: 10.5px;
    }

    .v2-home-tile-value {
        font-size: 13px;
    }

    .v2-home-tile-sub {
        font-size: 11.5px;
    }

    .v2-home-athlete-pills {
        min-width: 0;
        width: 100%;
        padding-right: 16px;
    }

    .v2-home-ask-input {
        font-size: 16px; /* prevent iOS zoom */
    }

    .v2-home-chip {
        padding: 10px 14px; /* ≥44px touch target height via line-height+padding */
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

}

/* ── Narrow mobile: tighter label column ── */
@media (max-width: 480px) {
    .v2-home-tiles-section {
        max-width: none;
    }

    .v2-home-tile {
        padding: 8px 12px;
        gap: 8px;
    }

    .v2-home-tile-label {
        font-size: 10.5px;
        flex: 0 0 90px;
    }

    .v2-home-tile-value {
        font-size: 13px;
    }

    .v2-home-tile-sub {
        font-size: 11.5px;
    }
}

/* ── Feedback FAB (global) ── */

.ozai-feedback-root {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10500;
    font-family: inherit;
}

.feedback-fab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    background: color-mix(in srgb, var(--shell) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bg) 50%, transparent);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.feedback-fab:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--line-strong) 100%, transparent);
}

.feedback-fab:active {
    transform: scale(0.97);
}

.feedback-fab svg {
    color: var(--signal);
}

.feedback-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 320px;
    max-width: calc(100vw - 32px);
    border-radius: 14px;
    background: color-mix(in srgb, var(--shell) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--bg) 70%, transparent);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-popover[hidden] {
    display: none;
}

.feedback-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text);
    font-size: 0.92rem;
}

.feedback-popover-close {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.12s ease;
}

.feedback-popover-close:hover {
    color: var(--text);
}

.feedback-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feedback-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feedback-field-label {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}

.feedback-field-optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.feedback-textarea,
.feedback-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.feedback-textarea {
    min-height: 84px;
}

.feedback-input {
    min-height: 34px;
}

.feedback-textarea:focus,
.feedback-input:focus {
    outline: none;
    border-color: var(--signal);
}

.feedback-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.feedback-status {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-faint);
    flex: 1;
}

.feedback-status[data-kind="error"] {
    color: var(--danger);
}

.feedback-status[data-kind="success"] {
    color: var(--signal);
}

.feedback-submit {
    appearance: none;
    border: none;
    background: var(--signal);
    color: var(--bg);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.08s ease;
}

.feedback-submit:hover {
    filter: brightness(1.1);
}

.feedback-submit:active {
    transform: scale(0.98);
}

.feedback-submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* On mobile the FAB has no resting spot that doesn't fight the bottom-nav,
   the chat composer, or content. Hide it entirely under 720px — desktop
   FAB stays. We'll surface feedback via a settings-menu entry on mobile
   in a separate pass if it turns out to be missed. */
@media (max-width: 720px) {
    .ozai-feedback-root {
        display: none;
    }
}

/* ── Docs page (/docs) ── */

.auth-shell-docs {
    padding-bottom: 80px;
}

.docs-stage {
    max-width: 880px;
    margin: 0 auto;
    padding: 100px 28px 0;
    color: var(--text);
}

.docs-hero {
    padding: 12px 0 28px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    margin-bottom: 32px;
}

.docs-hero-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
    margin-bottom: 14px;
}

.docs-hero-title {
    margin: 0 0 14px;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text);
}

.docs-hero-sub {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.55;
    color: var(--text-soft);
    max-width: 620px;
}

.docs-hero-meta {
    margin-top: 16px;
    font-size: 0.78rem;
    color: var(--text-faint);
    letter-spacing: 0.02em;
}

.docs-toc {
    position: sticky;
    top: 60px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 36px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--shell) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.docs-toc-link {
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
}

.docs-toc-link:hover {
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
    color: var(--text);
}

.docs-section {
    padding: 12px 0 36px;
    border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    scroll-margin-top: 120px;
}

.docs-section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.docs-section-title {
    margin: 0 0 14px;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.15;
    color: var(--text);
}

.docs-section-lede {
    margin: 0 0 24px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 720px;
}

.docs-subhead {
    margin: 26px 0 10px;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--text);
}

.docs-section p {
    margin: 0 0 14px;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 720px;
}

.docs-section p:last-child {
    margin-bottom: 0;
}

.docs-section em {
    color: var(--text);
    font-style: normal;
    font-weight: 600;
}

.docs-section strong {
    color: var(--text);
    font-weight: 600;
}

.docs-section code {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.84em;
    padding: 1px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--surface-strong) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
    color: var(--text);
}

.docs-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    max-width: 720px;
}

.docs-list li {
    position: relative;
    padding: 8px 0 8px 18px;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--text-soft);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
}

.docs-list li:last-child {
    border-bottom: none;
}

.docs-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 17px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-faint);
}

.docs-tag {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 7px;
    margin: 0 1px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    color: var(--text);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    vertical-align: 1px;
}

.docs-tag-stable {
    background: color-mix(in srgb, var(--signal) 16%, transparent);
    border-color: color-mix(in srgb, var(--signal) 35%, transparent);
    color: var(--signal);
}

.docs-tag-warning {
    background: color-mix(in srgb, var(--warning, #d39d3a) 16%, transparent);
    border-color: color-mix(in srgb, var(--warning, #d39d3a) 35%, transparent);
    color: var(--warning, #d39d3a);
}

.docs-tag-danger {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
    color: var(--danger);
}

.docs-footer {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.docs-back {
    color: var(--text-faint);
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.12s ease;
}

.docs-back:hover {
    color: var(--text);
}

@media (max-width: 720px) {
    .docs-stage {
        padding: 80px 16px 0;
    }

    .docs-hero {
        padding-bottom: 22px;
        margin-bottom: 24px;
    }

    .docs-hero-title {
        font-size: 1.85rem;
    }

    .docs-hero-sub {
        font-size: 0.96rem;
    }

    .docs-toc {
        position: static;
        padding: 8px;
        margin-bottom: 28px;
        gap: 4px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .docs-toc-link {
        font-size: 0.78rem;
        padding: 5px 9px;
        white-space: nowrap;
    }

    .docs-section {
        padding: 8px 0 28px;
    }

    .docs-section-title {
        font-size: 1.5rem;
    }

    .docs-subhead {
        font-size: 0.96rem;
        margin-top: 22px;
    }

    .docs-section p,
    .docs-list li {
        font-size: 0.9rem;
    }
}

/* ── Team switcher (sidebar) ── */

.v2-team-switcher {
    margin: 0 0 4px;
    position: relative;
}

.v2-team-switcher-trigger.v2-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    min-height: 36px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--shell-2);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.v2-team-switcher-trigger.v2-dropdown-trigger:hover {
    border-color: var(--line-strong);
    color: var(--text);
    background: var(--surface-strong);
}

.v2-team-switcher-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--text-faint);
}

.v2-team-switcher-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-team-switcher-menu.v2-dropdown-menu {
    min-width: 100%;
    /* Grow up to the sidebar edge; `right: 0` ensures it can't overflow the container */
    max-width: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
}

/* Ensure team option labels ellipsize rather than wrapping or clipping */
.v2-team-switcher-menu .v2-dropdown-option {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Admin nav item — subtle signal tint to distinguish from regular nav */
a.v2-nav-item--admin {
    color: color-mix(in srgb, var(--signal) 70%, var(--text-soft));
    font-size: 0.78rem;
}

a.v2-nav-item--admin:hover,
a.v2-nav-item--admin.active {
    color: var(--signal);
}

/* Backoffice footer link — quieter than the main nav items */
a.v2-nav-item--backoffice {
    font-size: 0.72rem;
    min-height: 32px;
    padding: 6px 10px;
    color: var(--text-faint);
}

a.v2-nav-item--backoffice:hover {
    color: color-mix(in srgb, var(--signal) 70%, var(--text-soft));
    background: color-mix(in srgb, var(--signal) 8%, transparent);
}

a.v2-nav-item--backoffice.active {
    color: var(--signal);
    background: color-mix(in srgb, var(--signal) 14%, transparent);
}

/* ── Backoffice page ── */

.v2-bo-shell {
    padding: 24px 28px 48px;
    max-width: 900px;
    margin: 0 auto;
    overflow-y: auto;
    height: 100%;
    font-size: 0.9rem;
}

.v2-bo-header {
    margin-bottom: 28px;
}

.v2-bo-title {
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--text);
}

.v2-bo-subtitle {
    color: var(--text-faint);
    font-size: 0.85rem;
    margin: 0;
}

.v2-bo-card {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 20px;
}

.v2-bo-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.v2-bo-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-faint);
}

/* Inputs */
.v2-bo-input {
    padding: 7px 11px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--shell-2);
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    transition: border-color 0.15s ease;
    min-width: 0;
}

.v2-bo-input:focus {
    outline: none;
    border-color: var(--signal);
}

.v2-bo-checkbox {
    accent-color: var(--signal);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Button sizing inside backoffice — reuse v2-btn-primary/secondary tokens */
.v2-bo-btn {
    padding: 7px 14px;
    min-height: 36px;
    font-size: 0.84rem;
    white-space: nowrap;
}

button.v2-bo-btn--danger {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

button.v2-bo-btn--danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border-color: var(--danger);
}

/* Create team row */
.v2-bo-create-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.v2-bo-create-row .v2-bo-input {
    flex: 1;
    min-width: 140px;
}

.v2-bo-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.84rem;
    color: var(--text-soft);
    white-space: nowrap;
}

/* Teams list */
.v2-bo-teams-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-bo-team-row {
    border-radius: 8px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--shell-2);
}

.v2-bo-team-row--archived {
    opacity: 0.7;
}

.v2-bo-team-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 44px;
    flex-wrap: wrap;
}

.v2-bo-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    color: var(--text-faint);
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.12s ease, background 0.12s ease;
}

.v2-bo-expand-btn:hover {
    color: var(--text);
    background: var(--surface);
}

.v2-bo-chevron {
    transition: transform 0.18s ease;
}

.v2-bo-chevron.is-open {
    transform: rotate(180deg);
}

.v2-bo-team-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.v2-bo-team-id {
    font-size: 0.74rem;
    color: var(--text-faint);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.v2-bo-team-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.v2-bo-team-counts {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.v2-bo-count-chip {
    font-size: 0.72rem;
    color: var(--text-faint);
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
}

/* Badges */
.v2-bo-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.v2-bo-badge--ok {
    background: color-mix(in srgb, var(--ok) 14%, transparent);
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
}

.v2-bo-badge--warn {
    background: color-mix(in srgb, var(--warn) 14%, transparent);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
}

.v2-bo-badge--danger {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.v2-bo-badge--neutral {
    background: var(--surface);
    color: var(--text-faint);
    border: 1px solid var(--line);
}

/* Team detail section */
.v2-bo-team-detail {
    border-top: 1px solid var(--line);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg);
}

.v2-bo-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-bo-detail-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

.v2-bo-detail-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    align-items: center;
}

/* Email chip group */
.v2-bo-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.v2-bo-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px 3px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--text-soft);
    max-width: 220px;
}

.v2-bo-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.v2-bo-chip-remove {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
    transition: color 0.12s ease;
    font-family: inherit;
}

button.v2-bo-chip-remove:hover {
    color: var(--danger);
}

/* Add email row */
.v2-bo-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.v2-bo-add-row .v2-bo-input {
    flex: 1;
    min-width: 200px;
}

/* Archive confirm */
.v2-bo-confirm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.v2-bo-confirm-label {
    font-size: 0.82rem;
    color: var(--warn);
    font-weight: 600;
}

/* Users section */
.v2-bo-users-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-bo-user-row {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--shell-2);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 44px;
}

.v2-bo-user-email {
    font-weight: 500;
    color: var(--text);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
    flex: 1;
    min-width: 140px;
}

.v2-bo-user-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.v2-bo-user-login {
    font-size: 0.72rem;
    color: var(--text-faint);
    white-space: nowrap;
}

/* Password editor */
.v2-bo-pw-editor {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}

.v2-bo-pw-actions {
    display: flex;
    gap: 8px;
}

.v2-bo-hint {
    font-size: 0.75rem;
    color: var(--text-faint);
    margin: 0;
}

/* Inline error */
.v2-bo-inline-error {
    color: var(--danger);
    font-size: 0.82rem;
    margin: 0;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: 6px;
}

.v2-bo-loading {
    color: var(--text-faint);
    font-size: 0.86rem;
    padding: 8px 0;
    margin: 0;
}

.v2-bo-empty {
    color: var(--text-faint);
    font-size: 0.82rem;
    font-style: italic;
}

/* Access denied */
.v2-bo-access-denied {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    text-align: center;
    gap: 12px;
    color: var(--text-soft);
}

/* Mobile adjustments */
@media (max-width: 900px) {
    .v2-bo-shell {
        padding: 16px 16px 60px;
    }

    .v2-bo-title {
        font-size: 1.4rem;
    }

    .v2-bo-card {
        padding: 14px 14px;
    }

    .v2-bo-create-row {
        flex-direction: column;
        align-items: stretch;
    }

    .v2-bo-create-row .v2-bo-input {
        min-width: 0;
    }

    .v2-bo-team-counts {
        margin-left: 0;
        width: 100%;
    }

    .v2-bo-user-email {
        max-width: none;
    }
}

/* ── Pricing page (/pricing) ── */

.auth-shell-pricing {
    padding-bottom: 80px;
}

.pricing-stage {
    max-width: 520px;
    margin: 0 auto;
    padding: 110px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
    font-weight: 600;
}

.pricing-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--text);
}

.pricing-lede {
    margin: 0 0 8px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-soft);
}

.pricing-form {
    margin-top: 6px;
}

.pricing-thanks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 22px 24px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--shell) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}

.pricing-thanks-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--signal) 22%, transparent);
    color: var(--signal);
    font-weight: 700;
    font-size: 0.95rem;
}

.pricing-thanks-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text);
}

.pricing-thanks-body {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1.55;
}

.pricing-stage .docs-back {
    margin-top: 24px;
}

@media (max-width: 720px) {
    .pricing-stage {
        padding: 90px 16px 0;
    }

    .pricing-title {
        font-size: 1.85rem;
    }

    .pricing-lede {
        font-size: 0.95rem;
    }
}

/* ── Pricing bespoke placeholder ── */

/* Center the sparse content block both horizontally and vertically,
   leaving the topbar overhead clear (topbar is ~52px, so 52px from top
   is already consumed; the section fills the rest of the viewport). */
.pricing-stage-bespoke {
    min-height: calc(100vh - 52px);
    max-width: 520px;
    /* override base .pricing-stage padding-top; centering handles the vertical offset */
    padding: 0 24px 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    /* lp-btn-pri uses --lp-cta-fg, which is normally scoped to .lp-root;
       set it here so the CTA button text is readable outside the landing shell */
    --lp-cta-fg: #06222b;
}

:root[data-theme="light"] .pricing-stage-bespoke {
    --lp-cta-fg: #ffffff;
}

/* The CTA is an <a> styled as an inline-flex button.
   Auto width so it doesn't stretch to the column width. */
.pricing-bespoke-cta {
    margin-top: 10px;
    align-self: flex-start;
}

@media (max-width: 720px) {
    .pricing-stage-bespoke {
        padding-inline: 16px;
        min-height: calc(100vh - 52px);
    }
}

/* ── Pricing comparison (two-tier) ── */

.pricing-stage-compare {
    max-width: 1040px;
    padding: 100px 28px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 18px;
}

.pricing-tier-card {
    background: color-mix(in srgb, var(--shell) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 16px;
    padding: 26px 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pricing-tier-card.is-recommended {
    border-color: color-mix(in srgb, var(--signal) 55%, var(--line) 45%);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--bg) 50%, transparent);
}

.pricing-tier-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pricing-tier-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    font-weight: 600;
}

.pricing-tier-card.is-recommended .pricing-tier-eyebrow {
    color: var(--signal);
}

.pricing-tier-badge {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    color: var(--signal);
    border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
}

.pricing-tier-title {
    margin: 0;
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    letter-spacing: -0.005em;
}

.pricing-tier-for {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

.pricing-tier-leadin {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.pricing-feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pricing-feature {
    position: relative;
    padding-left: 22px;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.pricing-feature::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: var(--signal);
    font-size: 0.78rem;
    font-weight: 700;
}

.pricing-tier-form {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    gap: 10px;
}

.pricing-tier-card .pricing-thanks {
    margin-top: 6px;
}

@media (max-width: 720px) {
    .pricing-stage-compare {
        padding: 90px 16px 0;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .pricing-tier-card {
        padding: 22px 18px 20px;
    }

    .pricing-tier-title {
        font-size: 1.35rem;
    }
}

/* ── Landing v2 (redesign) ── */

/* Local tokens scoped to the landing root — avoids hex literals below */
.lp-root {
    --lp-cta-fg: #06222b;       /* CTA button foreground (dark teal) */
    --lp-bar-dot: #2a3a4b;      /* Mac-chrome dot colour */
    --lp-grad-mid: #8be8d6;     /* "Every day." gradient midpoint */
    --lp-aurora1: #1ea7c6;      /* Aurora blob 1 core */
    --lp-aurora2: #2de2c0;      /* Aurora blob 2 core */
    --lp-aurora3: #3f7f93;      /* Aurora blob 3 core */

    /* ── App-card local palette (fixed light-on-dark; no light-mode override) ──
       The .lp-app card is an intentionally dark "embedded UI preview" surface.
       These tokens do NOT flip with page theme so the card stays readable in
       both dark and light page themes.  Values match the dark-mode design tokens
       so the card looks identical in dark mode. */
    --lp-app-signal: #84d0e4;   /* ring / bar / highlight accent */
    --lp-app-ok:     #a6d3a0;   /* HRV "steady" value */
    --lp-app-warn:   #e6c47a;   /* Head-impact value */
    --lp-app-dan:    #e9a0a0;   /* Training-load value */
    --lp-app-bar-warn: #d7a64a; /* warn bar fill */
    --lp-app-bar-dan:  #e06b6b; /* danger bar fill */
    --lp-app-text:   #eef2f7;   /* primary card text */
    --lp-app-soft:   #9fb0c0;   /* secondary card text */
    --lp-app-faint:  #6b7c8c;   /* tertiary card text / labels */
    --lp-app-line:   rgba(255,255,255,.10);  /* card internal borders */
    --lp-app-shell2: #111c29;   /* schedule card background */
    --lp-app-badge-bg: rgba(132,208,228,.10);  /* "OzAI suggested" badge bg */
    --lp-app-badge-line: rgba(132,208,228,.35); /* badge border */
    --lp-app-changed-bg: rgba(132,208,228,.08); /* Wed cell tint */
    --lp-app-changed-line: rgba(132,208,228,.60); /* Wed cell border */
    --lp-app-brief-bg: rgba(132,208,228,.10);   /* brief gradient start */
    --lp-app-brief-line: rgba(132,208,228,.35);  /* brief border */
    --lp-app-approve-bg: rgba(132,208,228,.12);  /* approve pill bg */
    --lp-app-approve-line: rgba(132,208,228,.35); /* approve pill border */
}

/* Light-mode overrides for landing local tokens.
   --lp-cta-fg: white on #0f5e7a (signal) → ~7.2:1 contrast.
   --lp-grad-mid: #17708c on #eef2f7 (bg) → ~5:1 contrast; darker than the
   pale-mint dark default so all three gradient stops stay readable on light bg. */
:root[data-theme="light"] .lp-root {
    --lp-cta-fg: #ffffff;
    --lp-grad-mid: #17708c;
}

/* Shared display font helper (scoped) */
.lp-disp { font-family: 'Bricolage Grotesque', system-ui, sans-serif; letter-spacing: -0.015em; }

/* Wrap */
.lp-page { width: 100%; align-self: stretch; overflow-x: hidden; }
.lp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }

/* Scroll-reveal — IO adds .in */
.lp-sr {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.2,0.7,0.2,1), transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
    transition-delay: var(--d, 0s);
}
.lp-sr.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-sr { opacity: 1; transform: none; }
}

/* Sticky topbar modifier (applied via JS on scroll) */
.auth-topbar.lp-stuck {
    border-bottom-color: var(--line);
    background: color-mix(in srgb, var(--shell) 85%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Landing bleeds under the fixed topbar (aurora frosts behind the glass) */
.auth-shell-landing.auth-shell { padding-top: 0; }

/* ── Hero ── */
.lp-hero {
    position: relative;
    padding: 108px 0 70px;
    overflow: hidden;
}

/* Aurora */
.lp-aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 140%;
    z-index: 0;
    filter: blur(70px);
    opacity: 0.7;
    pointer-events: none;
}
.lp-aurora i {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: screen;
}
.lp-aurora .lp-b1 {
    width: 560px; height: 560px; left: 46%; top: -12%;
    background: radial-gradient(circle, var(--lp-aurora1), transparent 65%);
    animation: lp-drift1 16s ease-in-out infinite;
}
.lp-aurora .lp-b2 {
    width: 500px; height: 500px; left: 84%; top: 18%;
    background: radial-gradient(circle, var(--lp-aurora2), transparent 65%);
    animation: lp-drift2 20s ease-in-out infinite;
}
.lp-aurora .lp-b3 {
    width: 480px; height: 480px; left: 6%; top: 6%;
    background: radial-gradient(circle, var(--lp-aurora3), transparent 65%);
    animation: lp-drift3 24s ease-in-out infinite;
}
@keyframes lp-drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.12); } }
@keyframes lp-drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-26px) scale(1.08); } }
@keyframes lp-drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,28px) scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
    .lp-aurora .lp-b1,
    .lp-aurora .lp-b2,
    .lp-aurora .lp-b3 { animation: none; }
}

/* Closing aurora variant */
.lp-aurora-closing {
    inset: auto;
    top: -30%;
    left: -10%;
    right: -10%;
    height: 120%;
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 38px;
    align-items: center;
    text-align: center;
    justify-items: center;
}
.lp-hero-copy { max-width: 720px; }
.lp-hero-grid .lp-card3d { width: 100%; max-width: 920px; }

/* Desktop two-column: copy left, card right */
@media (min-width: 901px) {
    .lp-hero-grid {
        grid-template-columns: 1fr 1.05fr;
        text-align: left;
        justify-items: stretch;
    }
    .lp-hero-copy { max-width: none; }
    .lp-hero-grid .lp-card3d {
        max-width: none;
        align-self: center;
        display: flex;
        flex-direction: column;
    }
    .lp-hero-form { margin-left: 0; margin-right: 0; justify-content: flex-start; }
    .lp-cta-row { justify-content: flex-start; }
}

/* H1 */
.lp-hh {
    font-weight: 800;
    font-size: clamp(2.7rem, 5.2vw, 4.2rem);
    line-height: 1.0;
}
.lp-lineMask { display: block; overflow: hidden; }
.lp-lineMask span {
    display: block;
    transform: translateY(110%);
    animation: lp-rise 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
}
.lp-lineMask:nth-child(2) span { animation-delay: 0.12s; }
@keyframes lp-rise { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .lp-lineMask span { transform: none; animation: none; }
}

/* Gradient "Every day." */
.lp-grad {
    background: linear-gradient(100deg, var(--signal), var(--lp-grad-mid), var(--signal));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lp-flow 6s linear infinite;
}
@keyframes lp-flow { to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .lp-grad { animation: none; background-position: 0 0; } }

.lp-lede {
    margin: 22px auto 28px;
    font-size: 1.15rem;
    color: var(--text-soft);
    max-width: 42ch;
    line-height: 1.5;
}
.lp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Hero rotating typewriter subline */
.lp-hero-type {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    color: var(--text-soft);
    margin: 16px 0 0;
    min-height: 1.5em;
    letter-spacing: -0.01em;
}
.lp-hero-type .lp-cur {
    display: inline-block;
    width: 9px;
    height: 1.05em;
    vertical-align: -0.16em;
    background: var(--signal);
    margin-left: 3px;
    border-radius: 1px;
    animation: lp-blink 1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .lp-hero-type .lp-cur { animation: none; } }

/* Hero email pill form */
.lp-hero-form {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 460px;
    margin: 26px auto 14px;
    background: var(--shell-2);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 6px 6px 6px 22px;
}
.lp-hero-form input[type="email"] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    /* 1rem (16px+) keeps iOS Safari from zooming the form on focus. */
    font-size: 1rem;
    height: 46px;
}
/* Restore a visible focus indicator for keyboard users; outline:none above
   strips the UA default for mouse focus only. */
.lp-hero-form input[type="email"]:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 6px;
}
.lp-hero-form input[type="email"]::placeholder { color: var(--text-faint); }
.lp-hero-form .lp-btn-pri { height: 44px; border-radius: 999px; flex: none; padding: 0 22px; }

/* Hero microcopy */
.lp-hero-micro { font-size: 0.86rem; color: var(--text-faint); }
.lp-hero-micro a { color: var(--signal); font-weight: 700; text-decoration: none; }

/* CTA buttons */
.lp-btn-pri {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 26px;
    border-radius: 10px;
    background: var(--signal);
    color: var(--lp-cta-fg);
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 0 0 rgba(132,208,228,0);
    transition: box-shadow 0.3s, transform 0.15s;
    text-decoration: none;
}
.lp-btn-pri:hover { box-shadow: 0 8px 40px rgba(132,208,228,.45); }

.lp-btn-sec {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--line-strong);
    transition: border-color 0.2s, color 0.2s;
    text-decoration: none;
}
.lp-btn-sec:hover { border-color: var(--signal); color: var(--signal); }

/* Product card (glass + tilt) */
.lp-card3d { perspective: 1200px; }
.lp-app {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    background: linear-gradient(180deg, rgba(17,28,41,.92), rgba(13,22,33,.92));
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow: 0 40px 110px rgba(0,0,0,.55);
    overflow: hidden;
    backdrop-filter: blur(8px);
    position: relative;
    /* Intentionally-dark embedded "app preview" — text stays light-on-dark
       in BOTH page themes. All inner labels use --lp-app-* tokens, which are
       fixed to their dark values and never flip with [data-theme="light"]. */
    color: var(--lp-app-text);
}
@media (prefers-reduced-motion: reduce) { .lp-app { transition: none; } }
.lp-app::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 16px; padding: 1px;
    pointer-events: none;
    background: linear-gradient(130deg, rgba(132,208,228,.6), transparent 40%, transparent 60%, rgba(132,208,228,.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 200% 200%;
    animation: lp-flow 7s linear infinite;
    opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) { .lp-app::before { animation: none; } }

.lp-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--lp-app-line);
    background: rgba(17,28,41,.6);
}
.lp-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--lp-bar-dot); }
.lp-bar-ttl { margin-left: 10px; font-size: 0.78rem; color: var(--lp-app-faint); }

.lp-app-body { display: grid; grid-template-columns: 1.1fr 1fr; }
.lp-app-left { padding: 16px; border-right: 1px solid var(--lp-app-line); }
.lp-app-right { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* Readiness ring */
.lp-ring {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.lp-ring svg { flex: none; }
.lp-ring-n {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 1.6rem; font-weight: 800;
    color: var(--lp-app-text);
    line-height: 1;
}
.lp-ring-l { font-size: 0.7rem; color: var(--lp-app-faint); margin-top: 2px; }

/* Metrics */
.lp-metric {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid var(--lp-app-line);
    margin-bottom: 4px;
}
.lp-metric:last-of-type { border-bottom: none; }
.lp-lab { font-size: 0.73rem; color: var(--lp-app-faint); min-width: 80px; }
.lp-bar2 { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); margin: 0 10px; overflow: hidden; }
.lp-bar2 b { display: block; height: 100%; border-radius: 3px; background: var(--lp-app-signal); width: 0; transition: width 1.1s cubic-bezier(0.2,0.7,0.2,1); }
.lp-bar2-warn { background: var(--lp-app-bar-warn) !important; }
.lp-bar2-dan  { background: var(--lp-app-bar-dan)  !important; }
.lp-metric.in .lp-bar2 b { width: var(--w); }
@media (prefers-reduced-motion: reduce) {
    .lp-bar2 b { transition: none; }
    .lp-metric.in .lp-bar2 b { width: var(--w); }
}
.lp-val { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.lp-ok { color: var(--lp-app-ok); }
.lp-warn { color: var(--lp-app-warn); }
.lp-dan { color: var(--lp-app-dan); }

/* Athlete figure */
.lp-figwrap {
    display: flex; align-items: center; justify-content: center;
    padding: 0; position: relative;
    overflow: hidden;
    height: 170px;
    border-radius: 8px;
}
.lp-figwrap svg { height: 150px; }
.lp-twin-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* image is 616x1210 portrait; top ~14% is the "48% READINESS" header — skip it */
    object-position: center 18%;
    display: block;
}
.lp-zone {
    transform-origin: center;
    animation: lp-glow 2.4s ease-in-out infinite;
}
@keyframes lp-glow { 0%,100% { opacity: 0.35; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .lp-zone { animation: none; opacity: 0.6; } }

/* ECG — uses fixed card-local signal so the stroke stays light against the
   dark card background in both page themes. */
.lp-ecg { height: 34px; width: 100%; margin-top: 4px; }
.lp-ecg path {
    stroke: var(--lp-app-signal); stroke-width: 1.6; fill: none;
    stroke-dasharray: 340; stroke-dashoffset: 340;
    animation: lp-ecg 2.6s linear infinite;
}
@keyframes lp-ecg { to { stroke-dashoffset: -340; } }
@media (prefers-reduced-motion: reduce) { .lp-ecg path { animation: none; stroke-dashoffset: 0; } }

/* Decision brief — fixed dark-card tokens so it reads in both page themes */
.lp-brief {
    border: 1px solid var(--lp-app-brief-line);
    border-radius: 11px;
    padding: 13px 14px;
    background: linear-gradient(180deg, var(--lp-app-brief-bg), rgba(17,28,41,.7));
}
.lp-brief-tag {
    display: inline-block;
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 700;
    color: var(--lp-app-signal);
    padding: 2px 8px; border-radius: 6px; margin-bottom: 8px;
}
.lp-brief-q { font-size: 0.8rem; color: var(--lp-app-soft); margin-bottom: 6px; }
.lp-brief-a {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700; font-size: 1rem; line-height: 1.25; min-height: 2.4em;
    color: var(--lp-app-text);
}
.lp-cur {
    display: inline-block; width: 8px; background: var(--signal); margin-left: 1px;
    animation: lp-blink 1s steps(1) infinite;
}
/* Inside the dark card, force the cursor to the fixed light signal so it
   stays visible in both page themes (--signal flips to dark teal in light mode). */
.lp-app .lp-cur { background: var(--lp-app-signal); }
@keyframes lp-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lp-cur { animation: none; } }

/* ── Schedule-change card (inside .lp-app-right, fixed dark-card tokens) ── */
.lp-schedcard {
    background: var(--lp-app-shell2);
    border: 1px solid var(--lp-app-line);
    border-radius: 12px;
    padding: 12px;
    flex: 1; /* fill the remaining right-column height */
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lp-schedhead {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 9px;
}
.lp-schedhead-t {
    font-size: 0.69rem; color: var(--lp-app-faint);
    letter-spacing: 0.05em; text-transform: uppercase;
}
.lp-autobadge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.66rem; font-weight: 700; color: var(--lp-app-signal);
    background: var(--lp-app-badge-bg);
    border: 1px solid var(--lp-app-badge-line);
    border-radius: 999px; padding: 3px 9px;
}
.lp-autobadge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lp-app-signal);
    flex-shrink: 0;
    animation: lp-pulse 1.8s infinite;
}
@keyframes lp-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(132,208,228,.5); }
    70%  { box-shadow: 0 0 0 7px rgba(132,208,228,0); }
    100% { box-shadow: 0 0 0 0 rgba(132,208,228,0); }
}
@media (prefers-reduced-motion: reduce) { .lp-autobadge-dot { animation: none; } }

/* 7-day week grid */
.lp-week {
    display: grid; grid-template-columns: repeat(7,1fr); gap: 4px;
    margin-bottom: 9px;
}
.lp-day {
    background: rgba(255,255,255,.03);
    border: 1px solid var(--lp-app-line);
    border-radius: 7px; padding: 6px 3px; text-align: center;
}
.lp-day-d {
    font-size: 0.6rem; color: var(--lp-app-faint);
    text-transform: uppercase; line-height: 1;
}
.lp-day-s {
    font-size: 0.66rem; font-weight: 700; margin-top: 4px;
    color: var(--lp-app-soft);
}
/* Changed cell (Wed swap) */
.lp-day-changed {
    border-color: var(--lp-app-changed-line);
    background: var(--lp-app-changed-bg);
}
.lp-day-changed .lp-day-s { color: var(--lp-app-signal); }
.lp-day-was {
    font-size: 0.6rem; color: var(--lp-app-faint);
    text-decoration: line-through; line-height: 1; margin-top: 3px;
}

.lp-swapline {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.72rem; color: var(--lp-app-soft);
    margin-bottom: 9px;
}
.lp-swapline-ico { color: var(--lp-app-signal); flex-shrink: 0; }

/* ✓ Approve pill */
button.lp-approve-pill {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--lp-app-approve-line);
    background: var(--lp-app-approve-bg);
    color: var(--lp-app-signal);
    font-family: inherit; font-size: 0.73rem; font-weight: 700;
    cursor: default; /* visual affordance only on the marketing card */
    transition: background 0.15s ease;
}
button.lp-approve-pill:hover {
    background: rgba(132,208,228,.2);
}

/* Legacy week-row (old card) — kept for stylesheet compat, no longer rendered */
.lp-wkrow { display: flex; gap: 5px; margin-top: 10px; }
.lp-seg {
    flex: 1; height: 24px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: var(--text-soft);
    border: 1px solid var(--line);
}
.lp-seg-tech { background: rgba(132,208,228,.2); color: var(--text); }

/* ── Problem section ── */
.lp-prob { padding: 90px 0 80px; border-top: 1px solid var(--line); }
.lp-kicker {
    font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-faint); font-weight: 700; margin-bottom: 12px;
}
.lp-prob-h2 {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    max-width: 920px;
}
.lp-em { color: var(--signal); }
.lp-prob-lede {
    margin-top: 18px;
    color: var(--text-soft);
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: 54ch;
}
.lp-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 34px; }
.lp-tile {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 22px;
    position: relative; overflow: hidden;
}
.lp-tile-n {
    font-weight: 800;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    color: var(--signal);
    line-height: 1;
    text-shadow: 0 0 30px rgba(132,208,228,.3);
}
.lp-tiles .lp-tile:nth-child(1) .lp-tile-n { color: var(--danger); text-shadow: 0 0 30px color-mix(in srgb, var(--danger) 35%, transparent); }
.lp-tiles .lp-tile:nth-child(2) .lp-tile-n { color: var(--warn); text-shadow: 0 0 30px color-mix(in srgb, var(--warn) 35%, transparent); }
.lp-tiles .lp-tile:nth-child(3) .lp-tile-n { color: var(--ok); text-shadow: 0 0 30px color-mix(in srgb, var(--ok) 35%, transparent); }
.lp-tile-c { margin-top: 8px; color: var(--text-soft); font-size: 0.9rem; }

/* ── What it is ── */
.lp-what { padding: 70px 0 30px; }
.lp-what-h2 { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.2rem); }
.lp-what-p { margin: 16px 0 0; color: var(--text-soft); max-width: 56ch; }

/* ── Camp trajectory ── */
.lp-traj { padding: 20px 0 30px; }
.lp-trajcard {
    background: var(--shell); border: 1px solid var(--line);
    border-radius: 16px; padding: 24px 26px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-trajcard:hover {
    border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--signal) 12%, rgba(0,0,0,.3));
}
@media (prefers-reduced-motion: no-preference) {
    .lp-trajcard:hover {
        transform: translateY(-3px);
    }
}
.lp-trajcard-lab {
    display: flex; justify-content: space-between;
    color: var(--text-faint); font-size: 0.78rem; margin-bottom: 8px;
}
.lp-trajsvg { width: 100%; height: 150px; display: block; }
.lp-traj-grid line { stroke: var(--line); stroke-width: 1; }
.lp-traj-plan { stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
/* Default: fully drawn (Safari/Firefox) */
.lp-traj-act {
    stroke: var(--signal); stroke-width: 2.5; fill: none;
    filter: drop-shadow(0 0 6px rgba(132,208,228,.5));
}
/* Chromium-only scroll-draw animation */
@supports (animation-timeline: view()) {
    .lp-traj-act {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: lp-draw linear forwards;
        animation-timeline: view();
        animation-range: entry 10% cover 55%;
    }
}
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .lp-traj-act {
        stroke-dasharray: unset;
        stroke-dashoffset: unset;
        animation: none;
    }
}
.lp-traj-seg { opacity: 0.5; }

/* ── Connect band ── */
.lp-connect {
    padding: 30px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.lp-connect-inner {
    display: flex;
    align-items: center;
    gap: 36px;
}
.lp-connect-glyphs {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}
.lp-connect-glyph {
    width: 44px;
    height: 44px;
    color: var(--signal);
    opacity: 0.75;
}
.lp-connect-kick { margin-bottom: 10px; }
.lp-connect-h2 {
    font-weight: 800;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1.15;
    margin-bottom: 10px;
}
.lp-connect-p {
    color: var(--text-soft);
    font-size: 0.97rem;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0;
}
@media (max-width: 900px) {
    .lp-connect-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ── Moat / roles section ── */
.lp-roles { padding: 30px 0 78px; }
.lp-roles-h2 {
    font-weight: 800;
    font-size: clamp(1.9rem, 4.2vw, 3rem);
    margin-top: 6px;
}
.lp-roles-h2 em { font-style: normal; color: var(--signal); }
.lp-rlede {
    margin: 16px 0 24px;
    color: var(--text-soft);
    max-width: 66ch;
    font-size: 1.04rem;
    line-height: 1.6;
}
.lp-consolidate { margin-bottom: 22px; }
.lp-voices { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 700; font-size: 0.88rem;
    color: var(--text);
    background: var(--shell);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 8px 15px;
    transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.lp-chip:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }
.lp-chip-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: color-mix(in srgb, var(--signal) 50%, var(--line));
    color: var(--signal);
}

/* Inline octagon mark inside the OzAI signals chip */
.lp-chip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
}

.lp-chip-mark svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lp-arrow { color: var(--signal); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.lp-onecall {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-weight: 800; font-size: 0.95rem;
    color: var(--lp-cta-fg); background: var(--signal);
    border-radius: 999px; padding: 9px 18px;
    box-shadow: 0 8px 30px rgba(132,208,228,.3);
}

/* ── Signal-flow diagram (replaces orbit) ── */

/* Desktop layout: [sources] [wires] [node] in a horizontal row.
   Wire column uses 1fr so it fills all remaining space between chips and
   node — the SVG is position:absolute inset:0 inside it, so it spans
   exactly from the chips' right edge to the node's left edge regardless
   of copy-column width. max-width keeps the whole cluster compact so
   there's never a large dead zone at wide viewports. */
.lp-flow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 440px;
}

/* Left column: five chips stacked evenly */
.lp-flow-sources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    grid-column: 1;
    grid-row: 1;
}

/* Wire region stretches vertically to match the chips column height */
.lp-flow-wires {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    position: relative;
}

/* Desktop SVG fills the wire column */
.lp-flow-svg-h {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Mobile SVG hidden on desktop */
.lp-flow-svg-v {
    display: none;
}

/* Wire paths: thin signal-colored strokes */
.lp-wire {
    fill: none;
    stroke: var(--signal);
    stroke-width: 2;
    opacity: 0.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 0;
}

/* Flowing pulse: a short bright segment travels toward the node */
@media (prefers-reduced-motion: no-preference) {
    .lp-wire {
        stroke-dasharray: 45 255;
        stroke-dashoffset: 300;
        animation: lp-wire-pulse 2.6s linear infinite;
        opacity: 0.75;
    }
    .lp-wire-1 { animation-delay: 0s; }
    .lp-wire-2 { animation-delay: 0.52s; }
    .lp-wire-3 { animation-delay: 1.04s; }
    .lp-wire-4 { animation-delay: 1.56s; }
    .lp-wire-5 { animation-delay: 2.08s; }
}

@keyframes lp-wire-pulse {
    0%   { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: -300; }
}

/* Right column: the single decision node */
.lp-flow-node {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Node pill: bright focal point with pulsing glow */
.lp-flow-node .lp-onecall {
    white-space: normal;
    text-align: center;
    max-width: 200px;
    line-height: 1.35;
    animation: lp-node-glow 2.6s ease-in-out infinite;
}

@keyframes lp-node-glow {
    0%, 100% { box-shadow: 0 6px 24px color-mix(in srgb, var(--signal) 32%, transparent); }
    50%       { box-shadow: 0 8px 40px color-mix(in srgb, var(--signal) 62%, transparent),
                            0 0 56px   color-mix(in srgb, var(--signal) 24%, transparent); }
}

/* Reduced-motion: static wired diagram, node has a steady glow */
@media (prefers-reduced-motion: reduce) {
    .lp-flow-node .lp-onecall {
        animation: none;
        box-shadow: 0 6px 28px color-mix(in srgb, var(--signal) 44%, transparent);
    }
    .lp-wire {
        stroke-dasharray: unset;
        stroke-dashoffset: 0;
        opacity: 0.5;
    }
}

/* ── Mobile: vertical flow (≤900px) ── */
@media (max-width: 900px) {
    .lp-flow {
        grid-template-columns: 1fr;
        grid-template-rows: auto 52px auto;
        max-width: 100%;
    }

    .lp-flow-sources {
        grid-column: 1;
        grid-row: 1;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .lp-flow-wires {
        grid-column: 1;
        grid-row: 2;
        align-self: auto;
        position: static;
        width: 100%;
        height: 52px;
    }

    /* Desktop SVG hidden on mobile; mobile vertical SVG shown */
    .lp-flow-svg-h {
        display: none;
    }
    .lp-flow-svg-v {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        position: static;
    }

    .lp-flow-node {
        grid-column: 1;
        grid-row: 3;
        justify-content: center;
    }

    .lp-flow-node .lp-onecall {
        max-width: 280px;
    }
}
.lp-rbac {
    display: flex; align-items: flex-start; gap: 12px;
    color: var(--text-soft); font-size: 0.95rem; line-height: 1.55;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px; max-width: 820px;
}
.lp-rbac svg { width: 22px; height: 22px; color: var(--signal); flex-shrink: 0; margin-top: 1px; }
.lp-rbac b { color: var(--text); font-weight: 600; }

/* ── Moat split layout (photo + copy side-by-side on desktop) ── */
.lp-roles-split {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 60px;
    align-items: center;
}

.lp-roles-photo {
    position: relative;
    border-radius: 16px;
    /* Faint brand-tint overlay so the dark photo reads intentional in both themes */
    isolation: isolate;
    align-self: center;
}

.lp-roles-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--signal) 8%, transparent) 0%,
        transparent 55%
    );
    pointer-events: none;
}

.lp-roles-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 16px 48px rgba(0, 0, 0, 0.45);
}

.lp-roles-copy {
    min-width: 0;
}

/* ── How it works (pillars as ordered flow) ── */
.lp-pillars { padding: 30px 0 80px; }
.lp-how-h2 {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    margin-bottom: 32px;
    margin-top: 6px;
}

/* Step flow: 3 cards connected by directional arrows */
.lp-howsteps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
}

/* Arrow connector between steps */
.lp-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    color: var(--text-faint);
    flex-shrink: 0;
}
.lp-step-arrow::after {
    content: '→';
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.45;
}

/* Individual step card */
.lp-step {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 18px 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp-step:hover {
    border-color: color-mix(in srgb, var(--signal) 55%, var(--line));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--signal) 14%, rgba(0,0,0,.35));
}
@media (prefers-reduced-motion: no-preference) {
    .lp-step:hover {
        transform: translateY(-4px);
    }
}

.lp-step-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.lp-step-ic {
    width: 28px;
    height: 28px;
    color: var(--signal);
    margin-bottom: 10px;
    flex-shrink: 0;
}

.lp-step-h3 {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    margin-bottom: 6px;
    color: var(--text);
}

.lp-step-p {
    color: var(--text-soft);
    font-size: 0.86rem;
    line-height: 1.5;
    flex: 1;
}

/* ── Platform-grade spec strip ── */
.lp-caps { padding: 0 0 70px; }

/* Horizontal row of 4 spec items */
.lp-specstrip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Top-align cells so items with longer bodies don't make shorter ones look sunken */
    align-items: start;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 16px;
}

.lp-specitem {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 18px;
    border-right: 1px solid var(--line);
    transition: background 0.2s ease;
}
.lp-specitem:last-child {
    border-right: none;
}
.lp-specitem:hover {
    background: color-mix(in srgb, var(--signal) 5%, var(--shell));
}

.lp-spec-ic {
    width: 22px;
    height: 22px;
    color: var(--signal);
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.8;
}

.lp-specitem-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.lp-specitem-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.lp-specitem-body {
    font-size: 0.78rem;
    color: var(--text-soft);
    line-height: 1.45;
    /* Wrap freely — some bodies are longer than a single line */
    white-space: normal;
    overflow-wrap: break-word;
}

/* ── Closing / waitlist ── */
.lp-closing {
    padding: 80px 0 56px;
    border-top: 1px solid var(--line);
    text-align: center;
    position: relative; overflow: hidden;
}
/* Brand stamp above the closing kicker */
.lp-closing-mark {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.lp-closing-mark svg {
    width: 56px;
    height: 56px;
    fill: none;
    stroke: var(--signal);
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--signal) 55%, transparent))
            drop-shadow(0 0 4px  color-mix(in srgb, var(--signal) 30%, transparent));
}

.lp-closing-kick {
    color: var(--signal); font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; font-size: 0.95rem; margin-bottom: 14px;
}
.lp-closing-h2 { font-weight: 800; font-size: clamp(2rem, 4.6vw, 3rem); }
.lp-closing-p { color: var(--text-soft); margin: 14px auto 26px; max-width: 46ch; }
.lp-form {
    display: flex; flex-direction: column; gap: 10px;
    max-width: 520px; margin: 0 auto;
}
.lp-foot-social {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.lp-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    min-height: 44px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-social-pill:hover {
    border-color: var(--signal);
    color: var(--signal);
}
.lp-social-ic {
    display: block;
    flex-shrink: 0;
}
.lp-social-label {
    line-height: 1;
}

.lp-foot {
    margin-top: 54px;
    color: var(--text-faint);
    font-weight: 700;
}
.lp-foot-em { color: var(--signal); }

/* Compat: landing-thanks reuses the existing pricing-thanks styles */
.auth-shell-landing .landing-thanks { align-items: flex-start; }

/* ── Responsive (900px project standard) ── */
@media (max-width: 900px) {
    .lp-tiles { grid-template-columns: 1fr; }

    /* How-it-works: stack steps vertically, hide arrows */
    .lp-howsteps {
        grid-template-columns: 1fr;
    }
    .lp-step-arrow {
        display: none;
    }

    /* Spec strip: 2-up on tablet, 1-up on small mobile */
    .lp-specstrip {
        grid-template-columns: 1fr 1fr;
    }
    .lp-specitem:nth-child(2) {
        border-right: none;
    }
    .lp-specitem:nth-child(3) {
        border-top: 1px solid var(--line);
    }
    .lp-specitem:nth-child(4) {
        border-top: 1px solid var(--line);
        border-right: none;
    }

    .lp-wrap { padding: 0 20px; }
    /* Hero: keep generous top for fixed bar clearance, smaller bottom */
    .lp-hero { padding: 84px 0 50px; }
    .lp-hh { font-size: clamp(2.3rem, 8vw, 3.5rem); }
    .lp-lede { font-size: 1rem; }
    .lp-what-p { max-width: none; }
    .lp-rlede { max-width: none; }
    .lp-hero-form { max-width: 100%; }
    .lp-prob-lede { max-width: none; }
    /* Normalize vertical rhythm: 56px top/bottom on every post-hero section
       so each seam sums to ~112px on mobile (was: 50–170px, wildly uneven) */
    .lp-prob    { padding-top: 56px; padding-bottom: 56px; }
    .lp-what    { padding-top: 56px; padding-bottom: 30px; }
    .lp-traj    { padding-top: 26px; padding-bottom: 56px; }
    .lp-connect { padding-top: 56px; padding-bottom: 56px; }
    .lp-roles   { padding-top: 56px; padding-bottom: 56px; }

    /* Split → stack: photo first as full-width portrait, text below */
    .lp-roles-split {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .lp-roles-photo {
        border-radius: 12px;
    }
    .lp-roles-img {
        border-radius: 12px;
    }

    .lp-pillars { padding-top: 56px; padding-bottom: 56px; }
    .lp-caps    { padding-top: 56px; padding-bottom: 56px; }
    .lp-closing { padding-top: 56px; padding-bottom: 48px; }

    /* App card: stack left/right columns vertically on mobile */
    .lp-app-body { grid-template-columns: 1fr; }
    .lp-app-left { border-right: none; border-bottom: 1px solid var(--lp-app-line); }
    /* Week grid: keep 7 columns but allow day cells to be tiny */
    .lp-week { gap: 3px; }
    .lp-day { padding: 5px 2px; }
    .lp-day-d { font-size: 0.55rem; }
    .lp-day-s, .lp-day-was { font-size: 0.6rem; }
}

/* Spec strip: 1-up at narrow mobile */
@media (max-width: 480px) {
    .lp-specstrip {
        grid-template-columns: 1fr;
    }
    .lp-specitem {
        border-right: none;
        border-top: 1px solid var(--line);
    }
    .lp-specitem:first-child {
        border-top: none;
    }
}

/* ── Feedback FAB visibility (route-aware) ── */

.ozai-feedback-root.is-hidden {
    display: none;
}

/* Lift the FAB above the mobile bottom-nav so it doesn't overlap the right-most tab. */
@media (max-width: 900px) {
    .ozai-feedback-root {
        bottom: calc(68px + env(safe-area-inset-bottom, 0));
    }
}

/* ── [hidden] overrides for forms / thanks cards ──
   These elements explicitly set `display: flex` which clobbers the browser
   default `[hidden] { display: none }`. Use a higher-specificity attribute
   selector so the hidden attribute actually hides them on initial render. */

.lead-gate-form[hidden],
.pricing-thanks[hidden],
.landing-thanks[hidden] {
    display: none;
}

/* Block chip in schedule header — Step 4 */
button.v2-block-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--surface-strong);
    border: 1px solid transparent;
    color: var(--text-soft);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
    min-height: 32px;
    margin-bottom: 8px;
}

button.v2-block-chip:hover,
button.v2-block-chip:focus-visible {
    border-color: var(--signal);
    color: var(--text);
    outline: none;
}

@media (max-width: 900px) {
    button.v2-block-chip {
        min-height: 44px;
        padding: 8px 14px;
        margin-bottom: 0;
    }
}

/* ── Camp page — vertical block cards-stack (Step 5) ──────────────────────── */

.v2-camp-stack-page {
    padding: 24px 28px 96px;
    width: 80%;
    box-sizing: border-box;
}

/* Camp header */
.v2-camp-head {
    position: relative;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 20px;
}

/* Quiet "Edit goal" / "Author goal" button in the top-right of the
   active-camp summary card. Routes through data-action="edit-camp"
   to open the camp goal-authoring wizard. */
button.v2-camp-card-action {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
    min-height: 28px;
}

button.v2-camp-card-action:hover,
button.v2-camp-card-action:focus-visible {
    color: var(--text);
    border-color: var(--signal);
    outline: none;
}

.v2-camp-card-action-icon {
    font-size: 0.8125rem;
    line-height: 1;
}

.v2-camp-card-action-label {
    line-height: 1;
}

@media (max-width: 900px) {
    button.v2-camp-card-action {
        top: 12px;
        right: 12px;
    }
}

.v2-camp-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.v2-camp-head-allcamps {
    font-size: 0.85rem;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--text);
    font-weight: 500;
}

.v2-camp-head-allcamps:hover {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 12%, var(--surface));
}

.v2-camp-head-crumb {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.v2-camp-head-title {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

.v2-camp-head-goal {
    color: var(--text-soft);
    font-size: 0.9375rem;
    margin: 0 0 14px;
}

.v2-camp-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.v2-camp-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.v2-camp-meta-label {
    font-size: 0.6875rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.v2-camp-meta-value {
    font-size: 0.9375rem;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.v2-camp-meta-value strong {
    color: var(--signal);
    font-weight: 500;
}

/* Mobile-only: standalone opp chip row and countdown pill above the meta grid.
   Hidden on desktop; visible on mobile via the ≤900px media query below. */
.v2-camp-head-opp {
    display: none;
}

.v2-camp-head-countdown {
    display: none;
}

/* Opponent chip */
button.v2-opp-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--surface-strong);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 120ms ease;
    font-family: inherit;
    color: inherit;
}

button.v2-opp-chip:hover,
button.v2-opp-chip:focus-visible {
    border-color: var(--signal);
    outline: none;
}

.v2-opp-chip-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--signal), var(--warn));
    display: inline-block;
    flex-shrink: 0;
}

.v2-opp-chip-name {
    color: var(--text);
    font-weight: 500;
}

.v2-opp-chip-style {
    color: var(--text-faint);
    font-size: 0.75rem;
}

.v2-opp-chip-arrow {
    color: var(--text-faint);
    font-size: 0.75rem;
    margin-left: 2px;
}

/* Opponent dossier inline panel */
.v2-opp-dossier-panel {
    margin: 0 0 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
}

.v2-opp-dossier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.v2-opp-dossier-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

button.v2-opp-dossier-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    font-family: inherit;
}

button.v2-opp-dossier-close:hover,
button.v2-opp-dossier-close:focus-visible {
    background: var(--surface-strong);
    color: var(--text);
    outline: none;
}

.v2-opponent-not-found {
    font-size: 0.9rem;
    color: var(--text);
    margin: 0 0 6px;
    line-height: 1.5;
}

.v2-opponent-not-found-reason {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0;
    line-height: 1.4;
}

/* ── Weekly targets card (camp overview page) ── */
.v2-camp-targets-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.v2-camp-targets-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    flex-shrink: 0;
}
.v2-camp-targets-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.v2-camp-tgt-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
    background: var(--shell-2);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 3px 7px;
    min-height: 24px;
    white-space: nowrap;
}
.v2-camp-tgt-pill.is-met {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
    background: color-mix(in srgb, var(--ok) 6%, var(--shell-2));
}
@media (max-width: 900px) {
    .v2-camp-targets-card {
        padding: 7px 10px;
        border-radius: 8px;
        align-items: flex-start;
    }
    .v2-camp-tgt-pill {
        min-height: 28px;
        padding: 4px 9px;
        font-size: 12px;
    }
}

/* ── Proposal card inline target chip ── */
.v2-proposal-tgt-chip {
    display: inline-block;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
    background: var(--shell-3);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 4px 0 0;
    white-space: nowrap;
}
.v2-proposal-tgt-chip.is-met {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
    background: color-mix(in srgb, var(--ok) 6%, var(--shell-3));
}

/* Camp action row */
.v2-camp-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
    flex-wrap: wrap;
}

.v2-camp-actions-label {
    font-size: 0.8125rem;
    color: var(--text-faint);
    margin-right: 4px;
}

button.v2-camp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
    min-height: 34px;
}

button.v2-camp-action-btn:hover,
button.v2-camp-action-btn:focus-visible {
    color: var(--text);
    border-color: var(--signal);
    outline: none;
}

/* Block card stack */
.v2-block-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Block card */
article.v2-block-card {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 120ms ease;
}

article.v2-block-card.is-active {
    border-color: color-mix(in srgb, var(--signal) 40%, var(--line));
}

/* Block card header — full-width button */
button.v2-block-card-head {
    display: grid;
    grid-template-columns: 28px 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-align: left;
    min-height: 44px;
}

button.v2-block-card-head:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
}

/* Block icon */
.v2-block-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.v2-block-icon.is-done {
    background: color-mix(in srgb, var(--ok) 18%, transparent);
    color: var(--ok);
}

.v2-block-icon.is-active {
    background: color-mix(in srgb, var(--signal) 18%, transparent);
    color: var(--signal);
}

.v2-block-icon.is-future {
    background: var(--surface-strong);
    color: var(--text-faint);
}

/* Block heading area */
.v2-block-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v2-block-name {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-block-num {
    color: var(--text-faint);
    font-weight: 500;
    margin-right: 6px;
}

.v2-block-meta-line {
    font-size: 0.8125rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active pill */
.v2-block-pill {
    flex-shrink: 0;
}

.v2-block-pill.is-active {
    font-size: 0.6875rem;
    padding: 3px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--signal);
    border: 1px solid color-mix(in srgb, var(--signal) 50%, transparent);
}

.v2-block-chev {
    color: var(--text-faint);
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Block body */
.v2-block-body {
    padding: 4px 20px 22px;
    border-top: 1px solid var(--line);
}

article.v2-block-card.is-collapsed .v2-block-body {
    display: none;
}

/* Progress bar */
.v2-block-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.v2-block-progress-label {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--text-soft);
    min-width: 130px;
    flex-shrink: 0;
}

.v2-block-progress-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--surface-strong);
    position: relative;
    overflow: hidden;
    display: block;
}

.v2-block-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--signal);
    border-radius: 3px;
}

/* This week's mix */
.v2-block-mix-head {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    padding-top: 4px;
}

.v2-block-mix {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.v2-block-mix-tag {
    font-size: 0.8125rem;
    padding: 6px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
}

.v2-block-mix-n {
    color: var(--signal);
    font-weight: 600;
    margin-right: 6px;
}

/* Drilling targets */
.v2-block-targets {
    background: var(--shell-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.v2-block-targets-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--signal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 10px;
}

.v2-block-targets-src {
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.6875rem;
}

.v2-block-targets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-block-targets li {
    display: flex;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text);
}

.v2-block-targets li::before {
    content: '→';
    color: var(--text-faint);
    flex-shrink: 0;
}

.v2-block-targets li q {
    color: var(--text-soft);
    font-style: normal;
}

/* AI proposal card (placeholder — Step 6 will enrich) */
.v2-block-ai {
    background: color-mix(in srgb, var(--warn) 8%, var(--shell-2));
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.v2-block-ai-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6875rem;
    color: var(--warn);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-bottom: 6px;
}

.v2-block-ai-head::before {
    content: '⚠';
}

.v2-block-ai-text {
    font-size: 0.875rem;
    color: var(--text);
    margin-bottom: 10px;
}

.v2-block-ai-actions {
    display: flex;
    gap: 10px;
}

button.v2-block-ai-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

button.v2-block-ai-btn:hover,
button.v2-block-ai-btn:focus-visible {
    color: var(--text);
    border-color: var(--signal);
    outline: none;
}

button.v2-block-ai-btn.v2-block-ai-btn-primary {
    background: color-mix(in srgb, var(--signal) 12%, var(--shell-2));
    color: var(--signal);
    border-color: color-mix(in srgb, var(--signal) 50%, transparent);
}

/* 2-block was/now sketch inside AI proposal card */
.v2-block-ai-sketch {
    margin: 10px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-block-ai-sketch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.v2-block-ai-sketch-rowlabel {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    width: 28px;
    flex-shrink: 0;
    text-align: right;
}

.v2-block-ai-sketch-bars {
    flex: 1;
    display: flex;
    gap: 3px;
    height: 18px;
    border-radius: 4px;
    overflow: hidden;
}

.v2-block-ai-sketch-bar {
    display: block;
    height: 100%;
    min-width: 4px;
    background: var(--surface-strong);
    border-radius: 3px;
}

.v2-block-ai-sketch-bar.is-signal {
    background: color-mix(in srgb, var(--signal) 50%, var(--shell-2));
}

.v2-block-ai-sketch-bar.is-warn {
    background: color-mix(in srgb, var(--warn) 55%, var(--shell-2));
}

.v2-block-ai-sketch-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.v2-block-ai-sketch-warn {
    font-size: 0.6875rem;
    color: var(--warn);
    padding-top: 2px;
}

/* Block proposal section in schedule review panel */
.v2-review-block-proposal {
    background: color-mix(in srgb, var(--warn) 8%, var(--shell-2));
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.v2-review-block-proposal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.v2-review-block-proposal-title {
    font-size: 0.6875rem;
    color: var(--warn);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.v2-review-block-proposal-reason {
    font-size: 0.875rem;
    color: var(--text);
    margin-bottom: 10px;
}

.v2-review-block-proposal-actions {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--warn) 20%, transparent);
}

/* Block footer actions */
.v2-block-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

button.v2-block-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid var(--line-strong);
    background: var(--shell-2);
    color: var(--text-soft);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
    min-height: 32px;
}

button.v2-block-action-btn:hover,
button.v2-block-action-btn:focus-visible {
    color: var(--text);
    border-color: var(--signal);
    outline: none;
}

button.v2-block-action-btn.v2-block-action-btn-primary {
    background: color-mix(in srgb, var(--signal) 12%, var(--shell-2));
    color: var(--signal);
    border-color: color-mix(in srgb, var(--signal) 50%, transparent);
    margin-left: auto;
}

/* Empty state */
.v2-camp-empty {
    color: var(--text-faint);
    font-size: 0.9375rem;
    padding: 24px 0;
}

/* Mobile — ≤900px */
@media (max-width: 900px) {
    .v2-camp-stack-page {
        padding: 16px 16px 80px;
        width: 100%;
    }

    .v2-camp-head {
        padding: 16px;
        border-radius: 12px;
    }

    .v2-camp-head-title {
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

    /* Standalone opp chip row: full-width below the title */
    .v2-camp-head-opp {
        display: block;
        margin-bottom: 8px;
    }

    /* Standalone countdown pill: full-width below the opp chip */
    .v2-camp-head-countdown {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: color-mix(in srgb, var(--signal) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--signal) 28%, transparent);
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 0.8125rem;
        color: var(--signal);
        font-weight: 600;
        margin-bottom: 12px;
    }

    .v2-camp-head-countdown-label {
        font-weight: 400;
        color: var(--text-soft);
    }

    /* Meta items: 2×2 grid; hide the duplicate countdown + opp items
       that exist for desktop display */
    .v2-camp-meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .v2-camp-meta-item--countdown,
    .v2-camp-meta-item--opp {
        display: none;
    }

    button.v2-block-card-head {
        padding: 14px 16px;
        gap: 10px;
    }

    .v2-block-body {
        padding: 4px 16px 20px;
    }

    button.v2-block-action-btn.v2-block-action-btn-primary {
        margin-left: 0;
        margin-top: 4px;
    }

    .v2-camp-actions {
        gap: 8px;
    }

    button.v2-camp-action-btn {
        min-height: 40px;
    }

    button.v2-opp-chip {
        min-height: 36px;
    }
}

/* ========================================================================
   Nav HUD strip (slice 4.2)
   Single-row HUD mounted directly under the workspace header. Block label,
   quiet Phys readout, goal date, and a thin progress bar with you-pin and
   time-to-goal coloring. Hidden when no active camp.
   ======================================================================== */

.v2-nav-hud {
    position: relative;
    z-index: 6;
    padding: 6px 13px 13px;
    background: var(--shell-2);
    border-bottom: 1px solid var(--hairline);
    cursor: pointer;
}
/* Toggle tab — sticks out from the bottom-center of the HUD so it stays
   visible even when the HUD collapses. */
.v2-nav-hud-toggle {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    appearance: none;
    background: var(--shell-2);
    border: 1px solid var(--line);
    border-top: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1;
    padding: 3px 11px;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.v2-nav-hud-toggle:hover {
    color: var(--signal);
    border-color: var(--signal);
}
.v2-nav-hud-collapsible {
    overflow: hidden;
    max-height: 160px;
    opacity: 1;
    transition: max-height 220ms cubic-bezier(0.4, 0, 0.2, 1), opacity 160ms ease;
}
.v2-nav-hud.is-collapsed {
    padding-top: 3px;
    padding-bottom: 3px;
}
.v2-nav-hud.is-collapsed .v2-nav-hud-collapsible {
    max-height: 0;
    opacity: 0;
}
.v2-nav-hud-row {
    display: flex;
    align-items: baseline;
    gap: 13px;
    font-size: 10px;
    margin-bottom: 5px;
}
.v2-nav-hud-block {
    color: var(--text);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-nav-hud-block-muted { color: var(--text-quiet); }
.v2-nav-hud-phys { color: var(--text-quiet); font-variant-numeric: tabular-nums; }
.v2-nav-hud-goal { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.v2-nav-hud-flag { color: var(--text-quiet); font-size: 8px; }
/* ── Mini-arc bar: flex row of block segments ── */
.v2-nav-hud-bar {
    position: relative;
    display: flex;
    height: 18px;
    border-radius: 3px;
    /* No overflow: hidden — the you-pin's chevron and "now" label
       extend above/below the bar and must not be clipped. Segments use
       per-corner radius via :first-child / :last-child below. */
}
.v2-nav-hud-seg:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.v2-nav-hud-seg:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

/* Segment: one per mesocycle block */
.v2-nav-hud-seg {
    display: flex;
    align-items: center;
    min-width: 22px;
    padding: 2px 5px;
    overflow: hidden;
    border-right: 1px solid var(--shell);
}
.v2-nav-hud-seg:last-child {
    border-right: none;
}

/* Segment label */
.v2-nav-hud-seg-name {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Status modifiers ── */

/* future: tint bg (quiet, subtle) */
.v2-nav-hud-seg[data-status="future"] { opacity: 1; }

/* past: tint bg, dimmed */
.v2-nav-hud-seg[data-status="past"] { opacity: 0.5; }

/* current: strong bg + thick accent border-top + label bolder + full text color */
.v2-nav-hud-seg[data-status="current"] .v2-nav-hud-seg-name {
    color: var(--text);
    font-weight: 700;
}

/* ── Block-type colors: future/current/past via data-block-type ── */

/* aerobic-base */
.v2-nav-hud-seg[data-block-type="aerobic-base"] {
    background: var(--aerobic-tint);
    border-top: 2px solid var(--aerobic-line);
}
.v2-nav-hud-seg[data-block-type="aerobic-base"][data-status="current"] {
    background: color-mix(in srgb, var(--aerobic-line) 30%, var(--shell-2));
    border-top: 3px solid var(--aerobic-line);
}

/* fight-specific */
.v2-nav-hud-seg[data-block-type="fight-specific"] {
    background: var(--fight-tint);
    border-top: 2px solid var(--fight-line);
}
.v2-nav-hud-seg[data-block-type="fight-specific"][data-status="current"] {
    background: color-mix(in srgb, var(--fight-line) 30%, var(--shell-2));
    border-top: 3px solid var(--fight-line);
}

/* taper-cut */
.v2-nav-hud-seg[data-block-type="taper-cut"] {
    background: var(--taper-tint);
    border-top: 2px solid var(--taper-line);
}
.v2-nav-hud-seg[data-block-type="taper-cut"][data-status="current"] {
    background: color-mix(in srgb, var(--taper-line) 30%, var(--shell-2));
    border-top: 3px solid var(--taper-line);
}

/* general-prep: fall back to aerobic palette (no dedicated token) */
.v2-nav-hud-seg[data-block-type="general-prep"] {
    background: var(--aerobic-tint);
    border-top: 2px solid var(--aerobic-line);
}
.v2-nav-hud-seg[data-block-type="general-prep"][data-status="current"] {
    background: color-mix(in srgb, var(--aerobic-line) 30%, var(--shell-2));
    border-top: 3px solid var(--aerobic-line);
}

/* weight-cut: fall back to taper palette (no dedicated token) */
.v2-nav-hud-seg[data-block-type="weight-cut"] {
    background: var(--taper-tint);
    border-top: 2px solid var(--taper-line);
}
.v2-nav-hud-seg[data-block-type="weight-cut"][data-status="current"] {
    background: color-mix(in srgb, var(--taper-line) 30%, var(--shell-2));
    border-top: 3px solid var(--taper-line);
}

/* You-pin: signal-colored vertical marker with a downward chevron pointer
   above the bar — communicates "now / you are here" at a glance. */
.v2-nav-hud-you {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--signal);
    transform: translateX(-1px);
    z-index: 2;
    box-shadow: 0 0 6px color-mix(in srgb, var(--signal) 60%, transparent);
    pointer-events: none;
}
.v2-nav-hud-you::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--signal);
}
.v2-nav-hud-you::after {
    content: 'now';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    font-weight: 700;
    color: var(--signal);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
}

/* Goal flag at right edge: sits inside the bar */
.v2-nav-hud-flag-end {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-right: 2px;
    z-index: 2;
    pointer-events: none;
}
/* padding-right kept at 2px: 2 x 0.8 = 1.6 floors to 1, but 1px is visually negligible here; held at 2px */

/* ========================================================================
   Active-block axis bars (slice 1)
   Variant A from active-block-axes-20260507/board.html. Three markers per
   axis (you-pin, projected tick, if-accepted tick) plus goal pennant.
   Inserted inside the active block card, above target qualities.
   ======================================================================== */

.v2-axis-section {
    background: rgba(98, 230, 198, 0.025);
    margin: -12px -18px 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--hairline);
}

.v2-axis-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-quiet);
    font-weight: 600;
    margin-bottom: 8px;
}

.v2-axis-row {
    display: grid;
    grid-template-columns: 92px 1fr 92px;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.v2-axis-row + .v2-axis-row {
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

.v2-axis-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.v2-axis-name-status {
    display: block;
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-quiet);
    margin-top: 1px;
}

.v2-axis-name.is-on .v2-axis-name-status { color: var(--ok); }
.v2-axis-name.is-behind .v2-axis-name-status { color: var(--warn); }
.v2-axis-name.is-at-risk .v2-axis-name-status { color: var(--danger); }

.v2-axis-bar {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}

.v2-axis-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
}

.v2-axis-bar--physical .v2-axis-fill {
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.30), rgba(74, 222, 128, 0.55));
}

.v2-axis-bar--technical .v2-axis-fill {
    background: linear-gradient(90deg, rgba(244, 185, 85, 0.25), rgba(244, 185, 85, 0.55));
}

.v2-axis-bar.is-at-risk .v2-axis-fill {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.30), rgba(248, 113, 113, 0.55));
}

.v2-axis-pin {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--text);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
    transform: translateX(-1.5px);
}

.v2-axis-bar--physical.is-on .v2-axis-pin {
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.15);
}

.v2-axis-bar--physical.is-behind .v2-axis-pin,
.v2-axis-bar--technical.is-behind .v2-axis-pin {
    background: var(--warn);
    box-shadow: 0 0 0 3px rgba(244, 185, 85, 0.15);
}

.v2-axis-bar.is-at-risk .v2-axis-pin {
    background: var(--danger);
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

.v2-axis-tick-projected {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 1px;
    transform: translateX(-1px);
}

.v2-axis-tick-ifaccept {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: var(--signal);
    border-radius: 1px;
    box-shadow: 0 0 0 3px rgba(98, 230, 198, 0.18);
    transform: translateX(-1px);
}

.v2-axis-target-end {
    position: absolute;
    top: -8px;
    right: -2px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1;
}

.v2-axis-readout {
    text-align: right;
    font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--text-soft);
    line-height: 1.3;
}

.v2-axis-readout-now {
    color: var(--text);
}

.v2-axis-readout-delta {
    color: var(--signal);
    font-weight: 500;
}

.v2-axis-readout-delta.is-cost {
    color: var(--warn);
}

.v2-axis-rec-card {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(98, 230, 198, 0.05);
    border: 1px solid rgba(98, 230, 198, 0.20);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.v2-axis-rec-arrow {
    color: var(--signal);
    font-size: 14px;
}

.v2-axis-rec-text {
    flex: 1;
    color: var(--text);
}

.v2-axis-rec-delta {
    color: var(--signal);
    font-weight: 600;
}

.v2-axis-rec-actions {
    display: flex;
    gap: 6px;
}

button.v2-axis-btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--hairline-strong);
    background: var(--surface);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

button.v2-axis-btn-primary {
    background: var(--signal);
    color: #052119;
    border-color: transparent;
}

.v2-axis-no-recs {
    margin-top: 10px;
    padding: 8px 12px;
    color: var(--text-quiet);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.v2-axis-legend {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-quiet);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.v2-axis-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.v2-axis-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 1px;
}

.v2-axis-legend-dot.is-you { background: var(--ok); }
.v2-axis-legend-dot.is-proj { background: rgba(255, 255, 255, 0.18); }
.v2-axis-legend-dot.is-acc { background: var(--signal); }

/* Criterion ticking (slice 3a) */
.v2-axis-criteria {
    margin: 6px 0 10px;
    padding: 8px 10px 10px;
    background: color-mix(in srgb, var(--shell) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-quiet) 18%, transparent);
    border-radius: 6px;
}

.v2-axis-criteria-head {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-quiet);
    margin-bottom: 6px;
}

.v2-axis-criteria-count {
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}

.v2-axis-criteria-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-axis-criterion {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text);
}

button.v2-axis-tick {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--text-quiet) 60%, transparent);
    background: transparent;
    color: var(--text);
    font-size: 11px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

button.v2-axis-tick:hover {
    border-color: var(--text);
}

.v2-axis-criterion.is-pending button.v2-axis-tick {
    background: transparent;
    color: transparent;
}

.v2-axis-criterion.is-partial button.v2-axis-tick {
    background: color-mix(in srgb, var(--warn) 30%, transparent);
    border-color: var(--warn);
    color: var(--warn);
}

.v2-axis-criterion.is-met button.v2-axis-tick {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--shell);
}

.v2-axis-criterion-label {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-axis-criterion.is-met .v2-axis-criterion-label {
    color: var(--text-quiet);
    text-decoration: line-through;
}

.v2-axis-criterion-target {
    color: var(--text-quiet);
    font-size: 11px;
}

.v2-axis-criterion-stale {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--warn) 18%, transparent);
    color: var(--warn);
    border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}

/* Empty axis state (unknown) — no criteria authored yet */
.v2-axis-row.v2-axis-row-unknown {
    /* Left name column keeps its width; the hint spans bar + readout
       columns so vertical alignment matches authored rows. */
    grid-template-columns: 92px 1fr;
}

.v2-axis-name.is-quiet {
    color: var(--text-quiet);
}

.v2-axis-name.is-quiet .v2-axis-name-status {
    color: var(--text-quiet);
}

.v2-axis-empty-hint {
    color: var(--text-quiet);
    font-size: 12px;
    font-style: italic;
}

@media (max-width: 900px) {
    .v2-axis-row.v2-axis-row-unknown {
        grid-template-columns: 76px 1fr;
    }
}

@media (max-width: 900px) {
    .v2-axis-criterion {
        grid-template-columns: 22px 1fr auto;
        grid-template-areas:
            "tick label stale"
            "tick target target";
    }
    .v2-axis-tick { grid-area: tick; }
    .v2-axis-criterion-label { grid-area: label; }
    .v2-axis-criterion-target { grid-area: target; }
    .v2-axis-criterion-stale { grid-area: stale; }
}

@media (max-width: 900px) {
    /* On mobile the outer .v2-nav-hud wrapper is a zero-height grid anchor;
       all visible chrome lives inside .v2-nav-hud-collapsible (absolutely positioned).
       Override the desktop padding/min-height so the wrapper is truly invisible.
       z-index:11 lifts the entire HUD stacking context above the seg-control
       (z-index:10) so children — toggle and expanded collapsible — paint on top.
       Children retain their local z-index values (toggle:12, collapsible:6);
       those are relative to this context, not to the seg-control. */
    .v2-nav-hud {
        padding: 0;
        min-height: 0;
        z-index: 11;
    }

    /* The collapsible body becomes an absolute layer that overlays content.
       It starts at the top of grid row 2 (directly below the header) and
       expands downward over the seg-control / content area. Background and
       border are restored here so the expanded strip looks identical to desktop,
       without a strip appearing when collapsed. */
    .v2-nav-hud-collapsible {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--shell-2);
        border-bottom: 1px solid var(--hairline);
        padding: 6px 11px 13px;
        overflow: hidden;
        /* max-height and opacity transitions are already set by the base rule;
           they still drive the collapse animation. */
    }

    /* Toggle button: floats above the seg-control because the parent .v2-nav-hud
       now has z-index:11 (> seg-control z-index:10). The toggle's own z-index:12
       is local to that stacking context — it ensures the toggle paints above the
       collapsible body (z-index:6 within the same context). */
    .v2-nav-hud-toggle {
        position: absolute;
        bottom: auto;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 12;
    }

    /* Override the base is-collapsed rule that adds 3px padding — on mobile
       the wrapper must stay zero-height so it doesn't create a visible strip. */
    .v2-nav-hud.is-collapsed {
        padding-top: 0;
        padding-bottom: 0;
    }

    .v2-nav-hud-row {
        gap: 10px;
        margin-bottom: 5px;
        font-size: 10px;
    }

    .v2-axis-section {
        margin: -12px -14px 12px;
        padding: 12px 14px;
    }

    .v2-axis-row {
        grid-template-columns: 76px 1fr 80px;
        gap: 8px;
    }
}


/* ── Camp authoring wizard (slice 2) ────────────────────────────── */

.v2-wiz-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 80%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .v2-wiz-form {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .v2-camp-stack-page {
        padding: 10px 10px 60px;
    }
}

/* The base v2-col-heading carries margin-bottom:16px for non-wizard call sites.
   Inside the wizard the flex gap already provides the 16px spacing, so zero out
   the margin to avoid the double-gap dead space below the heading. */
.v2-wiz-form .v2-col-heading {
    margin-bottom: 0;
}

/* Cap input widths to standard form best practice (~280-320px is a comfortable
   target line length for short text fields). Single-column labels stay narrow;
   2-col rows split naturally. Prevents inputs ballooning when the wizard is
   rendered at full width. */
.v2-wiz-form .v2-settings-label {
    max-width: 320px;
}
.v2-wiz-form .v2-camp-form-row {
    max-width: 660px;
}
.v2-wiz-form .v2-camp-form-row .v2-settings-label {
    max-width: none;
}

.v2-wiz-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line-strong);
    overflow-x: auto;
}

button.v2-wiz-tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: var(--text-quiet);
    font-size: 12px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-family: inherit;
}

button.v2-wiz-tab:hover {
    color: var(--text-soft);
}

.v2-wiz-tab-num {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-quiet);
}

button.v2-wiz-tab.is-done {
    color: var(--text-soft);
}

button.v2-wiz-tab.is-done .v2-wiz-tab-num {
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    color: var(--ok);
}

button.v2-wiz-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--signal);
    font-weight: 600;
}

button.v2-wiz-tab.is-active .v2-wiz-tab-num {
    background: var(--signal);
    color: #052119;
}

@media (max-width: 600px) {
    .v2-wiz-tabs {
        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent);
        scrollbar-width: none;
    }

    button.v2-wiz-tab {
        padding: 8px 10px;
        font-size: 11px;
        gap: 5px;
    }

    .v2-wiz-tab-num {
        width: 16px;
        height: 16px;
        font-size: 9px;
    }
}

@media (max-width: 420px) {
    button.v2-wiz-tab:not(.is-active) .v2-wiz-tab-label {
        display: none;
    }
}

.v2-wiz-panels {
    display: flex;
    flex-direction: column;
}

.v2-wiz-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.v2-wiz-panel.is-hidden {
    display: none;
}

.v2-wiz-panel-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}

.v2-wiz-panel-sub {
    font-size: 12px;
    color: var(--text-soft);
    margin: 0 0 4px;
    line-height: 1.4;
}

.v2-wiz-template-note {
    color: var(--text-quiet);
    font-size: 12px;
}

.v2-wiz-wearable-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.v2-wiz-wearable-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--shell);
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    min-height: 36px;
}

.v2-wiz-wearable-card input[type="radio"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.v2-wiz-wearable-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.v2-wiz-wearable-card:hover {
    border-color: var(--signal);
}

.v2-wiz-wearable-card.is-selected {
    border-color: var(--signal);
    background: color-mix(in srgb, var(--signal) 8%, transparent);
}

.v2-wiz-wearable-card.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.v2-wiz-wearable-card.is-disabled:hover {
    border-color: var(--line);
}

/* ── Auth panel (sign-in page) ─────────────────────────────────────── */

.v2-auth-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
}

/* Signed-in confirmation block */
.v2-auth-signed-in {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.v2-auth-signed-in-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    font-weight: 600;
}

.v2-auth-signed-in-email {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
    word-break: break-all;
}

/* Google GIS container */
.v2-auth-google-container {
    display: flex;
    justify-content: center;
    min-height: 44px;
}

/* "or" divider between Google and password form */
.v2-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-faint);
    font-size: 0.78rem;
}

.v2-auth-divider::before,
.v2-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--line);
}

/* Email + password fields wrapper */
.v2-auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Inline error message */
.v2-auth-error {
    margin: 0;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: 6px;
    color: var(--danger);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Base v2-btn (used as a namespace prefix in the sign-in panel) */
button.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Submit (primary) — signal-colored */
button.v2-auth-submit-btn {
    width: 100%;
    background: var(--signal);
    color: #052119;
    border: 1px solid transparent;
}

button.v2-auth-submit-btn:hover {
    filter: brightness(1.1);
}

button.v2-auth-submit-btn:active {
    transform: scale(0.99);
}

button.v2-auth-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Sign-out (secondary destructive) */
button.v2-auth-signout-btn {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
    color: var(--danger);
}

button.v2-auth-signout-btn:hover {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: var(--danger);
}

/* "Continue exploring the playground" tertiary link-button */
button.v2-auth-playground-link {
    background: transparent;
    border: none;
    padding: 4px 0;
    color: var(--text-faint);
    font-size: 0.82rem;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: inherit;
    transition: color 140ms ease;
}

button.v2-auth-playground-link:hover {
    color: var(--text);
}

/* ── Sidebar footer (backoffice link + account chip) ──────────────── */

.v2-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.v2-block-editor-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-block-editor-row {
    display: grid;
    grid-template-columns: 24px 1fr 120px 100px 100px 40px 32px;
    gap: 8px;
    padding: 10px 12px;
    background: var(--shell-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    align-items: center;
    font-size: 13px;
    position: relative;
}

.v2-block-editor-num {
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.v2-block-editor-name {
    color: var(--text);
    cursor: pointer;
}

.v2-block-editor-name:hover {
    color: var(--signal);
}

.v2-block-editor-type {
    color: var(--text-soft);
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
}

.v2-block-editor-start,
.v2-block-editor-end {
    color: var(--text-soft);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.v2-block-editor-start:hover,
.v2-block-editor-end:hover {
    color: var(--signal);
}

.v2-block-editor-wks {
    color: var(--text-faint);
    font-size: 12px;
    text-align: right;
}

button.v2-block-editor-delete {
    color: var(--text-faint);
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
}

button.v2-block-editor-delete:hover {
    color: var(--danger);
}

button.v2-block-editor-add {
    background: transparent;
    border: 1px dashed var(--line-strong);
    color: var(--text-soft);
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

button.v2-block-editor-add:hover {
    color: var(--signal);
    border-color: var(--signal);
}

.v2-block-editor-warning {
    grid-column: 2 / -1;
    color: var(--warn);
    font-size: 11px;
    margin-top: 4px;
}

/* Inline editor inputs (Task 12) — keep row geometry stable when a cell
   swaps from read span to text/date/select input. */
.v2-block-edit-input {
    width: 100%;
    background: var(--shell);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    color: var(--text);
    padding: 4px 6px;
    font: inherit;
    font-size: 13px;
}

.v2-block-edit-input:focus {
    outline: none;
    border-color: var(--signal);
}

.v2-block-edit-dp,
.v2-block-edit-sel {
    width: 100%;
}

.v2-block-edit-dp .v2-dp-trigger,
.v2-block-edit-sel .v2-sel-trigger {
    width: 100%;
    font-size: 12px;
    padding: 4px 6px;
}

.v2-block-editor-row-actions {
    display: inline-flex;
    gap: 6px;
    grid-column: 2 / -1;
    margin-top: 6px;
    justify-content: flex-end;
}

.v2-block-editor-row-actions .v2-btn-primary,
.v2-block-editor-row-actions .v2-btn-ghost {
    font-size: 12px;
    padding: 4px 10px;
}

.v2-btn-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}

.v2-btn-ghost:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

.v2-block-editor-confirm {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid var(--danger);
    border-radius: 6px;
    padding: 12px;
    margin-top: 8px;
    color: var(--text);
    font-size: 13px;
}

.v2-block-editor-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.v2-wiz-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    gap: 12px;
}

.v2-wiz-footer-left {
    flex: 1;
    min-width: 0;
}

.v2-wiz-footer-status {
    color: var(--text-quiet);
    font-size: 12px;
}

.v2-wiz-footer-error {
    color: var(--danger);
    font-size: 12px;
}

.v2-wiz-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Bug 1: validation error banner above the wizard panels */
.v2-wiz-error-banner {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid var(--danger);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text);
    font-size: 13px;
}

.v2-wiz-error-banner ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--danger);
    font-size: 12px;
}

/* Bug 5: wearable section labels */
.v2-wiz-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-faint);
    margin-bottom: 4px;
}

.v2-wiz-section-label--spaced {
    margin-top: 16px;
}

/* Bug 6: custom goal input */
.v2-wiz-custom-goal-label {
    margin-top: 4px;
}

.v2-wiz-custom-goal-input {
    margin-top: 4px;
    width: 100%;
}

/* Bug 8: block editor header row */
.v2-block-editor-header {
    display: grid;
    grid-template-columns: 24px 1fr 120px 100px 100px 50px 32px;
    gap: 8px;
    padding: 0 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}

/* Bug 8: updated block editor row to match header */
.v2-block-editor-row {
    grid-template-columns: 24px 1fr 120px 100px 100px 50px 32px;
}

/* Bug 8: editable weeks cell */
.v2-block-edit-wks-input {
    width: 100%;
    max-width: 60px;
    text-align: center;
}

/* Bug 9: editable cell affordance */
.v2-editable-cell {
    cursor: pointer;
    transition: color 120ms ease;
    position: relative;
}

.v2-editable-cell:hover {
    color: var(--signal);
}

/* Always-visible pencil affordance inside editable cells */
.v2-edit-pencil {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.35;
    flex-shrink: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.v2-editable-cell:hover .v2-edit-pencil {
    opacity: 0.8;
}

.v2-block-editor-row:hover {
    background: color-mix(in srgb, var(--shell-2) 92%, var(--signal) 8%);
}

.v2-block-editor-type.v2-editable-cell {
    cursor: pointer;
}

/* Bug 10: aggregate overlap banner above block list */
.v2-block-editor-overlap-banner {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border: 1px solid var(--warn);
    border-radius: 6px;
    padding: 10px 14px;
    color: var(--text-soft);
    font-size: 12px;
    margin-bottom: 8px;
}

/* Bug 11: plan preferences section */
.v2-wiz-prefs-section {
    background: var(--shell-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-wiz-prefs-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.v2-wiz-prefs-optional {
    font-size: 11px;
    font-weight: 400;
}

/* Header row: title left, Regenerate button right */
.v2-wiz-prefs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

/* Bug 11: focus area chips */
.v2-wiz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

button.v2-wiz-chip {
    appearance: none;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-soft);
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

button.v2-wiz-chip:hover {
    border-color: var(--signal);
    color: var(--text);
}

button.v2-wiz-chip.is-active {
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border-color: var(--signal);
    color: var(--signal);
}

@media (max-width: 900px) {
    .v2-wiz-wearable-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-block-editor-header {
        display: none;
    }
    .v2-block-editor-row {
        grid-template-columns: 24px 1fr 80px 80px 80px 40px 32px;
    }
}

/* ── Block editor row: phone layout (≤600px) ───────────────────────────────
   Collapses the 7-column grid into a two-row card so nothing clips at 375px.

   Row 1:  [#]  [Block name ···]              [Targets ×]
   Row 2:  [ ]  [Type] [Start] [End]    [Wks]

   Approach: keep display:grid, redefine columns and use explicit grid-column /
   grid-row placement on each nth-child. The actions span (Targets + ×) sits in
   col 5 and spans both rows so it's anchored to the top-right corner.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .v2-block-editor-row {
        grid-template-columns: 22px 1fr auto auto auto;
        grid-template-rows: auto auto;
        gap: 4px 8px;
        align-items: center;
    }

    /* (1) Row number */
    .v2-block-editor-row > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    /* (2) Block name — spans cols 2–4 in row 1 */
    .v2-block-editor-row > :nth-child(2) {
        grid-column: 2 / 5;
        grid-row: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* (3) Block type — row 2 col 2, can truncate */
    .v2-block-editor-row > :nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    /* (4) Start date */
    .v2-block-editor-row > :nth-child(4) {
        grid-column: 3;
        grid-row: 2;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    /* (5) End date */
    .v2-block-editor-row > :nth-child(5) {
        grid-column: 4;
        grid-row: 2;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }

    /* (6) Weeks */
    .v2-block-editor-row > :nth-child(6) {
        grid-column: 5;
        grid-row: 2;
        text-align: right;
        font-size: 11px;
    }

    /* (7) Actions (Targets + ×) — col 5, row 1 only (not row-spanning;
       wks occupies row 2 col 5). Targets + × stack vertically or sit inline. */
    .v2-block-editor-row > :nth-child(7) {
        grid-column: 5;
        grid-row: 1;
        margin-top: 0;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: nowrap;
    }

    /* Keep pencil icons inline with their cell value — prevents stacking */
    .v2-block-editor-row .v2-editable-cell {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        max-width: 100%;
    }

    /* Inline editors fill their grid cell on mobile */
    .v2-block-editor-row .v2-block-edit-input,
    .v2-block-editor-row .v2-block-edit-dp,
    .v2-block-editor-row .v2-block-edit-sel {
        width: 100%;
        min-width: 0;
    }

    /* Suppress the desktop grid-column span on the actions cell */
    .v2-block-editor-row-actions {
        grid-column: unset;
        margin-top: 0;
    }

    /* Targets button: shrink font on very small screens */
    .v2-block-editor-targets-btn {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* Camp arc — variant F */
.v2-camp-arc-card {
    background: var(--shell-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px 18px;
    margin-top: 16px;
}
.v2-camp-arc-label {
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.v2-camp-arc-label-helper {
    color: var(--text-faint);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}
.v2-camp-arc-show-overview {
    color: var(--text-soft);
    cursor: pointer;
    margin-left: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
}
.v2-camp-arc-show-overview:hover { color: var(--signal); }

.v2-camp-arc {
    display: flex;
    gap: 4px;
    border-radius: 8px;
    overflow: hidden;
    align-items: flex-start;
}
.v2-camp-arc-block {
    flex: 1;
    transition: flex var(--t-fast);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 70px;
}
/* Focused block expands — keyed on per-block data-focused="true" so only the
   specific focused block grows, even when multiple blocks share the same blockType. */
.v2-camp-arc-block[data-focused="true"] { flex: 4; overflow: visible; }

.v2-camp-arc-strip {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast);
    overflow: hidden;
    padding: 6px 10px;
    background: transparent;
    border: 0;
    width: 100%;
    font-family: inherit;
}
.v2-camp-arc-strip-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.v2-camp-arc-strip-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.v2-camp-arc-strip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    flex-shrink: 0;
}
.v2-camp-arc-block[data-status="done"] .v2-camp-arc-strip-dot { opacity: 0.25; }
.v2-camp-arc-block[data-status="active"] .v2-camp-arc-strip-dot { opacity: 1; box-shadow: 0 0 4px currentColor; }

.v2-camp-arc-block[data-block-type="aerobic-base"] .v2-camp-arc-strip {
    background: var(--aerobic-tint);
    color: var(--aerobic-line);
}
.v2-camp-arc-block[data-block-type="fight-specific"] .v2-camp-arc-strip {
    background: var(--fight-tint);
    color: var(--fight-line);
}
.v2-camp-arc-block[data-block-type="taper-cut"] .v2-camp-arc-strip {
    background: var(--taper-tint);
    color: var(--taper-line);
}
.v2-camp-arc-block[data-block-type="general-prep"] .v2-camp-arc-strip {
    background: var(--prep-tint);
    color: var(--prep-line);
}
.v2-camp-arc-block[data-block-type="weight-cut"] .v2-camp-arc-strip {
    background: var(--weight-tint);
    color: var(--weight-line);
}
/* Focused strip highlight — keyed on per-block data-focused="true" to avoid
   highlighting all blocks of the same type when duplicates exist. */
.v2-camp-arc-block[data-focused="true"][data-block-type="aerobic-base"] .v2-camp-arc-strip {
    background: var(--aerobic-strong);
    box-shadow: inset 0 -3px 0 var(--aerobic-line);
}
.v2-camp-arc-block[data-focused="true"][data-block-type="fight-specific"] .v2-camp-arc-strip {
    background: var(--fight-strong);
    box-shadow: inset 0 -3px 0 var(--fight-line);
}
.v2-camp-arc-block[data-focused="true"][data-block-type="taper-cut"] .v2-camp-arc-strip {
    background: var(--taper-strong);
    box-shadow: inset 0 -3px 0 var(--taper-line);
}
.v2-camp-arc-block[data-focused="true"][data-block-type="general-prep"] .v2-camp-arc-strip {
    background: var(--prep-strong);
    box-shadow: inset 0 -3px 0 var(--prep-line);
}
.v2-camp-arc-block[data-focused="true"][data-block-type="weight-cut"] .v2-camp-arc-strip {
    background: var(--weight-strong);
    box-shadow: inset 0 -3px 0 var(--weight-line);
}
.v2-camp-arc-block:not([data-focused="true"]) .v2-camp-arc-strip:hover { filter: brightness(1.18); }

/* Focused-phase detail panel — rendered as a sibling row below the strip bar,
   spans full card width so wk cards are not squeezed into the narrow strip column.
   --focus-offset is set inline (%) to left-align the detail row under the focused strip. */
.v2-camp-arc-detail-row {
    margin-top: 10px;
    padding: 0 2px 4px;
}
.v2-camp-arc-detail-row[data-block-type="aerobic-base"] .v2-camp-arc-wk { border-top: 2px solid var(--aerobic-line); }
.v2-camp-arc-detail-row[data-block-type="fight-specific"] .v2-camp-arc-wk { border-top: 2px solid var(--fight-line); }
.v2-camp-arc-detail-row[data-block-type="taper-cut"] .v2-camp-arc-wk { border-top: 2px solid var(--taper-line); }
.v2-camp-arc-detail-row[data-block-type="general-prep"] .v2-camp-arc-wk { border-top: 2px solid var(--prep-line); }
.v2-camp-arc-detail-row[data-block-type="weight-cut"] .v2-camp-arc-wk { border-top: 2px solid var(--weight-line); }

/* Scroll wrapper so wk cards never wrap to a second line */
.v2-camp-arc-weeks-scroll {
    overflow-x: auto;
    /* Hide scrollbar on non-hover to keep UI clean */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    padding-bottom: 4px;
}
.v2-camp-arc-weeks-scroll:not(:hover) {
    scrollbar-color: transparent transparent;
}

.v2-camp-arc-weeks {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    /* Each card is at least 140px, max 200px — grows to fill if few cards */
    min-width: max-content;
}
/* Keep the old grid rules as a no-op fallback; the new flex layout
   on .v2-camp-arc-weeks overrides them */
.v2-camp-arc-wk {
    background: var(--shell-3);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 116px;
    position: relative;
    /* Fixed card width — prevents vertical stretching in narrow strip columns */
    flex: 0 0 160px;
    max-width: 200px;
}
.v2-camp-arc-block[data-block-type="aerobic-base"] .v2-camp-arc-wk { border-top: 2px solid var(--aerobic-line); }
.v2-camp-arc-block[data-block-type="fight-specific"] .v2-camp-arc-wk { border-top: 2px solid var(--fight-line); }
.v2-camp-arc-block[data-block-type="taper-cut"] .v2-camp-arc-wk { border-top: 2px solid var(--taper-line); }
.v2-camp-arc-block[data-block-type="general-prep"] .v2-camp-arc-wk { border-top: 2px solid var(--prep-line); }
.v2-camp-arc-block[data-block-type="weight-cut"] .v2-camp-arc-wk { border-top: 2px solid var(--weight-line); }
.v2-camp-arc-wk[data-status="done"] { opacity: 0.55; }
.v2-camp-arc-wk[data-status="current"] {
    background: rgba(98, 230, 198, 0.06);
    border-color: rgba(98, 230, 198, 0.30);
}
.v2-camp-arc-wk-num { color: var(--text); font-size: 11px; font-weight: 600; }
.v2-camp-arc-wk[data-status="current"] .v2-camp-arc-wk-num { color: var(--signal); }
.v2-camp-arc-wk-dates {
    color: var(--text-faint);
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.v2-camp-arc-wk-focus {
    color: var(--text);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
}
.v2-camp-arc-wk[data-status="done"] .v2-camp-arc-wk-focus { color: var(--text-faint); }
.v2-camp-arc-wk-adherence {
    color: var(--text-faint);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
    padding-top: 4px;
}
.v2-camp-arc-wk-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--text-faint);
    font-size: 11px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.15s;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    border-radius: 3px;
}
.v2-camp-arc-wk:hover .v2-camp-arc-wk-edit { opacity: 1; }
.v2-camp-arc-wk-edit:hover { color: var(--signal); }
/* Coach-edited week indicator — always-visible inline badge */
.v2-camp-arc-wk-coach-edited {
    position: absolute;
    top: 8px;
    left: 8px;
    color: var(--signal);
    font-size: 11px;
    opacity: 0.7;
    cursor: default;
    line-height: 1;
}

.v2-camp-arc-wk-edit-input {
    width: 100%;
    background: var(--shell);
    color: var(--text);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 4px 6px;
    font: inherit;
    font-size: 12px;
}
.v2-camp-arc-wk-edit-actions {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.v2-camp-arc-toolbar {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 2px;
    color: var(--text-soft);
    font-size: 11px;
    align-items: center;
}
.v2-camp-arc-toolbar-info strong { color: var(--text); font-weight: 500; }

.v2-camp-arc-add {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}
.v2-camp-arc-add-btn {
    background: transparent;
    border: 1px dashed var(--line-strong);
    color: var(--text-faint);
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}
.v2-camp-arc-add-btn:hover {
    color: var(--text-soft);
    border-color: var(--text-faint);
}

.v2-camp-arc-confirm {
    background: rgba(244, 185, 85, 0.08);
    border: 1px solid rgba(244, 185, 85, 0.30);
    color: var(--text);
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}
.v2-camp-arc-confirm-icon { color: var(--warn); font-size: 14px; }
.v2-camp-arc-confirm-msg { flex: 1; }
.v2-camp-arc-confirm-actions { display: flex; gap: 6px; }

/* Wizard block-row focus highlight — set when opened via "Edit block" deep-link */
.v2-block-editor-row[data-wizard-focused="true"] {
    box-shadow: 0 0 0 2px rgba(98, 230, 198, 0.40);
}

/* ── Base v2-btn (neutral ghost style, used in arc-top-actions row) ── */
button.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--shell-2);
    color: var(--text-soft);
    border: 1px solid var(--line);
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 400;
    transition: border-color 0.12s ease, color 0.12s ease;
}
button.v2-btn:hover {
    color: var(--text);
    border-color: var(--line-strong);
}
button.v2-btn.v2-btn-primary {
    background: var(--accent, #84d0e4);
    color: #0a1428;
    border-color: transparent;
    font-weight: 500;
}
button.v2-btn.v2-btn-primary:hover {
    filter: brightness(1.08);
}
.v2-btn-icon {
    font-size: 0.875em;
    line-height: 1;
}

/* ── Arc-top-actions row ── */
.v2-camp-arc-top-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* ── Minimal week-number row (overview mode only) ── */
.v2-camp-arc-minweeks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 10px 4px;
    color: var(--text-faint);
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    line-height: 1.3;
    border-top: 1px dashed var(--line);
    margin-top: 2px;
}
.v2-camp-arc-minwk {
    white-space: nowrap;
}

/* ── Arc overview panel (all blocks, shown when no block is focused) ── */
.v2-camp-arc-overview {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 14px;
}
.v2-camp-arc-overview-block {
    padding: 0 2px 4px;
}

/* Pyramid indentation — each successive block steps in by --space-3 (12px) */
.v2-camp-arc-overview-block:nth-child(2) { padding-left: var(--space-3, 12px); }
.v2-camp-arc-overview-block:nth-child(3) { padding-left: calc(var(--space-3, 12px) * 2); }
.v2-camp-arc-overview-block:nth-child(4) { padding-left: calc(var(--space-3, 12px) * 3); }
.v2-camp-arc-overview-block:nth-child(n+5) { padding-left: calc(var(--space-3, 12px) * 4); }
.v2-camp-arc-overview-block[data-block-type="aerobic-base"] .v2-camp-arc-wk { border-top: 2px solid var(--aerobic-line); }
.v2-camp-arc-overview-block[data-block-type="fight-specific"] .v2-camp-arc-wk { border-top: 2px solid var(--fight-line); }
.v2-camp-arc-overview-block[data-block-type="taper-cut"] .v2-camp-arc-wk { border-top: 2px solid var(--taper-line); }
.v2-camp-arc-overview-block-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}
.v2-camp-arc-overview-block-name {
    font-size: 13px;
    color: var(--text);
}
.v2-camp-arc-overview-block-meta {
    font-size: 11.5px;
    color: var(--text-soft);
}
.v2-camp-arc-overview-block-status {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-left: auto;
}
.v2-camp-arc-overview-block[data-status="active"] .v2-camp-arc-overview-block-status {
    color: var(--signal);
}
.v2-camp-arc-overview-block[data-status="done"] .v2-camp-arc-overview-block-header {
    opacity: 0.65;
}
.v2-camp-arc-overview-empty {
    color: var(--text-faint);
    font-size: 12px;
    padding: 8px 0;
}

/* ── Camp arc accordion — mobile only (≤900px) ── */

/* Hidden on desktop; the desktop arc strips remain visible */
.v2-camp-arc-accordion {
    display: none;
}

@media (max-width: 900px) {
    /* Show accordion, hide desktop arc strips and detail row */
    .v2-camp-arc-accordion {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 8px;
    }
    .v2-camp-arc,
    .v2-camp-arc-detail-row {
        display: none;
    }

    /* Accordion block card */
    .v2-camp-arc-block--accordion {
        background: var(--shell-2);
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
    }

    /* Pyramid indentation — each successive block steps in by --space-3 (12px) */
    .v2-camp-arc-block--accordion:nth-child(2) { margin-left: var(--space-3, 12px); }
    .v2-camp-arc-block--accordion:nth-child(3) { margin-left: calc(var(--space-3, 12px) * 2); }
    .v2-camp-arc-block--accordion:nth-child(4) { margin-left: calc(var(--space-3, 12px) * 3); }
    .v2-camp-arc-block--accordion:nth-child(n+5) { margin-left: calc(var(--space-3, 12px) * 4); }

    /* Phase-color left border via block-type */
    .v2-camp-arc-block--accordion[data-block-type="aerobic-base"] {
        border-left: 3px solid var(--aerobic-line);
    }
    .v2-camp-arc-block--accordion[data-block-type="fight-specific"] {
        border-left: 3px solid var(--fight-line);
    }
    .v2-camp-arc-block--accordion[data-block-type="taper-cut"] {
        border-left: 3px solid var(--taper-line);
    }

    /* Clickable header row */
    button.v2-camp-arc-block-head {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 14px;
        background: transparent;
        border: 0;
        color: var(--text);
        font-family: inherit;
        font-size: 13px;
        cursor: pointer;
        text-align: left;
    }
    button.v2-camp-arc-block-head:hover {
        background: var(--shell-3);
    }

    /* Phase-color dot in header */
    .v2-camp-arc-block-head-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--line-strong);
    }
    .v2-camp-arc-block--accordion[data-block-type="aerobic-base"] .v2-camp-arc-block-head-dot {
        background: var(--aerobic-line);
    }
    .v2-camp-arc-block--accordion[data-block-type="fight-specific"] .v2-camp-arc-block-head-dot {
        background: var(--fight-line);
    }
    .v2-camp-arc-block--accordion[data-block-type="taper-cut"] .v2-camp-arc-block-head-dot {
        background: var(--taper-line);
    }
    .v2-camp-arc-block--accordion[data-status="done"] .v2-camp-arc-block-head-dot {
        opacity: 0.35;
    }

    /* Header text elements */
    .v2-camp-arc-block-head-name {
        flex: 1;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .v2-camp-arc-block-head-dur {
        font-size: 11px;
        color: var(--text-faint);
        font-family: 'Geist Mono', monospace;
        flex-shrink: 0;
    }
    .v2-camp-arc-block-head-type {
        font-size: 11px;
        color: var(--text-faint);
        flex-shrink: 0;
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--shell-3);
        border: 1px solid var(--line);
    }
    .v2-camp-arc-block--accordion[data-block-type="aerobic-base"] .v2-camp-arc-block-head-type {
        background: var(--aerobic-tint);
        color: var(--aerobic-line);
        border-color: transparent;
    }
    .v2-camp-arc-block--accordion[data-block-type="fight-specific"] .v2-camp-arc-block-head-type {
        background: var(--fight-tint);
        color: var(--fight-line);
        border-color: transparent;
    }
    .v2-camp-arc-block--accordion[data-block-type="taper-cut"] .v2-camp-arc-block-head-type {
        background: var(--taper-tint);
        color: var(--taper-line);
        border-color: transparent;
    }

    /* Chevron rotates when expanded */
    .v2-camp-arc-block-head-chevron {
        font-size: 16px;
        color: var(--text-faint);
        flex-shrink: 0;
        transition: transform 0.18s ease;
        display: inline-block;
    }
    .v2-camp-arc-block--accordion[data-expanded="true"] .v2-camp-arc-block-head-chevron {
        transform: rotate(90deg);
    }

    /* Expanded weeks list — scrollable */
    .v2-camp-arc-weeks-list {
        overflow-y: auto;
        max-height: 280px;
        border-top: 1px solid var(--line);
        padding: 6px 0;
        scrollbar-width: thin;
        scrollbar-color: var(--line) transparent;
    }

    /* Individual week row */
    .v2-camp-arc-week-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 7px 14px;
        font-size: 12px;
        border-bottom: 1px solid var(--line);
    }
    .v2-camp-arc-week-row:last-child {
        border-bottom: 0;
    }
    .v2-camp-arc-week-row.is-done {
        opacity: 0.55;
    }
    .v2-camp-arc-week-row.is-current {
        background: rgba(98, 230, 198, 0.05);
    }

    .v2-camp-arc-week-row-num {
        font-size: 11px;
        font-weight: 600;
        color: var(--text);
        flex-shrink: 0;
        min-width: 30px;
    }
    .v2-camp-arc-week-row.is-current .v2-camp-arc-week-row-num {
        color: var(--signal);
    }
    .v2-camp-arc-week-row-dates {
        color: var(--text-faint);
        font-family: 'Geist Mono', monospace;
        font-size: 10px;
        flex-shrink: 0;
        white-space: nowrap;
    }
    .v2-camp-arc-week-row-focus {
        color: var(--text-soft);
        font-size: 12px;
        flex: 1;
        min-width: 0;
    }
    .v2-camp-arc-week-row.is-done .v2-camp-arc-week-row-focus {
        color: var(--text-faint);
    }
}

/* ── Block editor: weekly-targets panel ── */
.v2-block-targets-panel {
    padding: 8px 10px;
    background: var(--shell-3);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
}
.v2-block-targets-subhead { font-size: 11px; color: var(--text-faint); margin: 0 0 2px; }
.v2-block-targets-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 32px; }
.v2-block-targets-label { font-size: 12px; color: var(--text-soft); flex: 0 0 auto; white-space: nowrap; }
.v2-block-targets-row .v2-sel-trigger { flex: 1 1 auto; min-width: 0; width: auto; }
.v2-block-targets-actions { display: flex; gap: 6px; margin-top: 4px; }
.v2-block-editor-targets-btn {
    font-size: 11px; padding: 3px 8px; border-radius: 4px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--text-soft);
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════
   Trajectory preview — proposal card + ghost row
   Spec: docs/superpowers/specs/2026-05-13-trajectory-preview-programming-page-design.md
   ════════════════════════════════════════════════════════════════════ */

/* ── Schedule list: focused-proposal target row + ghost twin ── */
.v2-schedule-row-proposal-target {
    border-left: 2px solid var(--signal);
    background: color-mix(in srgb, var(--signal) 5%, transparent);
}
.v2-schedule-row-ghost {
    border: 1px dashed color-mix(in srgb, var(--signal) 45%, transparent);
    background: color-mix(in srgb, var(--signal) 6%, transparent);
    position: relative;
}
/* connecting tick from the target row down into the ghost row */
.v2-schedule-row-ghost::before {
    content: '';
    position: absolute;
    top: -5px; left: 22px;
    width: 1px; height: 5px;
    background: color-mix(in srgb, var(--signal) 55%, transparent);
}
.v2-schedule-ghost-mark { color: var(--signal); }
.v2-schedule-ghost-label {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--signal);
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 32%, transparent);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

/* ── Proposal card: anchor header ── */
.v2-review-anchor {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-faint);
    margin: 2px 0 10px;
}
.v2-review-anchor-name { color: var(--text); }
.v2-review-anchor-sep { color: var(--line-strong); }
.v2-review-anchor-when { color: var(--signal); }

/* ── Proposal card: trajectory block wrapper ── */
.v2-review-trajectory {
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 14px;
}

/* ── Composition meter (C5 two-segment bar) ── */
.v2-meter { margin: 0 0 16px; }
.v2-meter-title { font-size: 12.5px; color: var(--text-soft); margin: 0 0 22px; }
.v2-meter-track {
    position: relative;
    height: 12px;
    background: var(--shell-3);
    border-radius: 6px;
    margin-bottom: 22px;
}
.v2-meter-before {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    background: var(--signal);
    border-radius: 6px 0 0 6px;
}
.v2-meter-delta {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--signal);
    border: 1px dashed color-mix(in srgb, var(--signal) 85%, transparent);
    border-radius: 0 6px 6px 0;
}
.v2-meter-delta.is-over {
    background: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 90%, transparent);
}
.v2-meter-delta-decrease {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
    border: 1px dashed color-mix(in srgb, var(--danger) 70%, transparent);
    border-radius: 0;
}
.v2-meter-result {
    position: absolute;
    bottom: calc(100% + 5px);
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 700;
    color: var(--signal);
    white-space: nowrap;
}
.v2-meter-result.is-over { color: var(--warn); }
.v2-meter-target {
    position: absolute;
    top: -4px; bottom: -4px;
    width: 2px;
    background: var(--text);
    box-shadow: 0 0 0 1px var(--shell);
}
.v2-meter-target::after {
    content: 'target ' attr(data-target);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
}

/* ── Day-of recovery dial ── */
.v2-recovery {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--line);
}
.v2-recovery-dial {
    position: relative;
    width: 50px; height: 50px;
    flex-shrink: 0;
}
.v2-recovery-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--dial-color) var(--arc), var(--shell-3) var(--arc));
    -webkit-mask: radial-gradient(circle at center, transparent 56%, #000 58%);
    mask: radial-gradient(circle at center, transparent 56%, #000 58%);
}
.v2-recovery-dial.v2-recovery-high   .v2-recovery-ring { --dial-color: var(--ok); }
.v2-recovery-dial.v2-recovery-medium .v2-recovery-ring { --dial-color: var(--warn); }
.v2-recovery-dial.v2-recovery-low    .v2-recovery-ring { --dial-color: var(--danger); }
.v2-recovery-num {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px; font-weight: 600;
    color: var(--text);
}
.v2-recovery-meta { display: flex; flex-direction: column; gap: 3px; }
.v2-recovery-label { font-size: 12.5px; color: var(--text-soft); }
.v2-recovery-state { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.v2-recovery-state.v2-recovery-high   { color: var(--ok); }
.v2-recovery-state.v2-recovery-medium { color: var(--warn); }
.v2-recovery-state.v2-recovery-low    { color: var(--danger); }
.v2-recovery-tip {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--text-faint);
    font-size: 9px; font-weight: 600;
    cursor: help;
}

/* Recovery tip carries a multi-sentence tooltip — override the global
   white-space:nowrap so it wraps at a reasonable width. */
.v2-recovery-tip[data-tooltip]::after {
    white-space: normal;
    max-width: 260px;
    text-align: left;
}

/* ── Disclosure line ── */
.v2-review-disclosure {
    font-size: 10.5px;
    font-style: italic;
    color: var(--text-faint);
    margin: 10px 0 0;
    line-height: 1.4;
}

.v2-checkin-scale-row {
    display: grid;
    grid-template-columns: minmax(110px, max-content) minmax(0, 320px);
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    margin-bottom: 12px;
}
.v2-checkin-slider-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.v2-checkin-scale-label {
    font-size: 0.82rem;
    color: var(--text-soft);
}

.v2-checkin-scale-row .v2-checkin-scale-label {
    text-align: right;
}

@media (max-width: 600px) {
    .v2-checkin-scale-row {
        grid-template-columns: 1fr;
    }
    .v2-checkin-scale-row .v2-checkin-scale-label {
        text-align: left;
    }
}

.v2-checkin-slider-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.v2-checkin-scale-segs {
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.v2-checkin-seg {
    flex: 1 1 0;
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-right: 1px solid var(--line);
    background: transparent;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-family: inherit;
    border-radius: 0;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    padding: 0;
    text-align: center;
}

.v2-checkin-seg:last-child {
    border-right: 0;
}

.v2-checkin-seg:hover {
    background: var(--shell);
    color: var(--text);
}

.v2-checkin-seg.is-active {
    background: color-mix(in srgb, var(--signal) 20%, transparent);
    color: var(--signal);
    font-weight: 600;
}

.v2-checkin-seg:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
    z-index: 1;
    position: relative;
}

/* ── Proposals badge in schedule header ── */
.v2-proposals-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    border-radius: 20px;
    color: var(--warn);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.v2-proposals-badge:hover {
    background: color-mix(in srgb, var(--warn) 18%, transparent);
}

/* Desktop: restore side-panel layout for proposals; focus overlay is mobile-only */
@media (min-width: 901px) {
    .v2-schedule-proposals {
        position: static;
        transform: none;
        transition: none;
        max-height: none;
        overflow-y: visible;
        background: transparent;
        border-top: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }
}

/* Mobile: hide the proposals section by default; .is-open makes it full-screen */
@media (max-width: 900px) {
    .v2-schedule-proposals {
        display: none;
    }
    .v2-schedule-proposals.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: var(--shell);
        padding: 16px 16px 32px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .v2-schedule-proposals.is-open .v2-mobile-review-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 -16px 12px;
        padding: 12px 16px;
        border-bottom: 1px solid var(--line);
        background: var(--shell);
        position: sticky;
        top: -16px;
        z-index: 1;
    }
}

/* Hide mobile review topbar on desktop (only shown inside .is-open on mobile) */
.v2-mobile-review-topbar {
    display: none;
}

.v2-mobile-review-close {
    background: none;
    border: none;
    color: var(--text-soft);
    font-size: 1.3rem;
    line-height: 1;
    padding: 4px 8px 4px 0;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-mobile-review-close:hover {
    color: var(--text);
}

.v2-mobile-review-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}