/* progress.css — extracted from frontend/progress.html inline <style>
   during Phase 4 of the design migration (2026-04-22). No CSS changes,
   pure lift-and-shift. See docs/design/MIGRATION-PLAN-2026-04-21.md. */

:root {
    --accent: #4facfe;
    --accent-2: #9479ff;
    --accent-warm: #f97316;
    --success: #34d399;
    --danger: #ef4444;
    --glass-bg: rgba(6, 12, 24, 0.75);
    --glass-border: rgba(79, 172, 254, 0.22);
    --shadow-lg: 0 45px 120px rgba(15, 23, 42, 0.45);
    --text-primary: #f8fafc;
    --text-muted: rgba(248, 250, 252, 0.7);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: radial-gradient(circle at top left, rgba(79, 172, 254, 0.18), transparent 45%),
        radial-gradient(circle at top right, rgba(148, 121, 255, 0.2), transparent 50%),
        linear-gradient(165deg, #050811 0%, #01030a 100%);
    color: var(--text-primary);
    min-height: 100dvh;
}

a {
    color: inherit;
    text-decoration: none;
}

.execution-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3.5rem) 1.6rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.glass-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    box-shadow: var(--shadow-lg);
    padding: clamp(1.8rem, 4vw, 2.6rem);
}

/* Collapse empty panels that only have a loading div or no content */
.glass-panel:empty,
.glass-panel:has(> .loading:only-child) {
    padding: 1rem;
    min-height: 0;
}

.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.35rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(79, 172, 254, 0.4);
    box-shadow: 0 18px 44px rgba(79, 172, 254, 0.28);
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.brand-chip img {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid rgba(79, 172, 254, 0.35);
    box-shadow: 0 12px 28px rgba(79, 172, 254, 0.3);
}

.brand-chip-text {
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.6rem;
    border-radius: 999px;
    border: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(5, 10, 20, 0.65);
    color: var(--text-primary);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.35);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 26px 58px rgba(79, 172, 254, 0.28);
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #05070f;
    box-shadow: 0 24px 60px rgba(148, 121, 255, 0.35);
}

.btn-outline {
    background: rgba(5, 10, 20, 0.65);
    border: 1px solid rgba(79, 172, 254, 0.35);
}

.btn-outline:hover {
    border-color: rgba(148, 121, 255, 0.5);
    box-shadow: 0 22px 52px rgba(79, 172, 254, 0.28);
}

.btn-secondary {
    background: linear-gradient(135deg, #5b3aa0, #47307e); /* §98: deepened so WHITE clears AA on BOTH stops (light stop #667eea failed white at 3.66) */
    color: #ffffff; /* §98: white clears AA on the purple gradient (was #05070f 3.16:1) */
    box-shadow: 0 22px 52px rgba(102, 126, 234, 0.28);
}

/* Ghost / outline button for milestone actions — less visual noise */
.btn-ghost {
    flex: 1;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(79, 172, 254, 0.3);
    border-radius: 8px;
    color: rgba(79, 172, 254, 0.9);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: none;
}

.btn-ghost:hover {
    background: rgba(79, 172, 254, 0.1);
    border-color: rgba(79, 172, 254, 0.55);
    transform: none;
    box-shadow: 0 0 16px rgba(79, 172, 254, 0.12);
}

/* Compact variant: icon-only, label appears on hover */
.btn-ghost-compact {
    flex: 0 0 auto;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    gap: 0.3rem;
    display: inline-flex;
    align-items: center;
}

.btn-ghost-compact .btn-ghost-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.btn-ghost-compact:hover .btn-ghost-label {
    max-width: 120px;
    opacity: 1;
}

.execution-hero {
    background: linear-gradient(160deg, rgba(79, 172, 254, 0.22), rgba(148, 121, 255, 0.2)), rgba(6, 12, 24, 0.72);
    border: 1px solid rgba(79, 172, 254, 0.32);
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3vw, 2.4rem);
}

.execution-hero .hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.execution-hero h1 {
    margin: 0 0 0.85rem 0;
    font-size: clamp(2.2rem, 4.2vw, 3.2rem);
    letter-spacing: -0.02em;
}

.execution-hero p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.metric-card {
    display: flex;
    gap: 0.9rem;
    padding: 1.3rem 1.5rem;
    border-radius: 24px;
    background: rgba(5, 10, 20, 0.7);
    border: 1px solid rgba(79, 172, 254, 0.26);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28);
}

.metric-icon {
    font-size: 1.7rem;
}

.metric-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.metric-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
}

.gamification-panel {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* CEC Credits Indicator — roadmap §6.1 */
.cec-credits-indicator {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.2rem 1.5rem;
}

.cec-credits-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.cec-credits-icon {
    font-size: 1.6rem;
    flex: 0 0 auto;
}

.cec-credits-text {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cec-credits-primary {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.cec-credits-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.cec-credits-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #05070f;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(148, 121, 255, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cec-credits-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(148, 121, 255, 0.38);
}

.cec-credits-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.cec-credits-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: width 0.4s ease;
}

.cec-credits-bar-fill[data-level="mid"] {
    background: linear-gradient(135deg, #fbbf24, var(--accent-warm));
}

.cec-credits-bar-fill[data-level="high"] {
    background: linear-gradient(135deg, var(--accent-warm), var(--danger));
}

.cec-credits-indicator[data-exhausted="true"] {
    border-color: rgba(239, 68, 68, 0.35);
}

.dashboard-header {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dashboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.dashboard-header p {
    margin: 0;
    color: var(--text-muted);
}

#dashboardStats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.2rem;
}

.stat-card {
    background: rgba(5, 10, 20, 0.7);
    border: 1px solid rgba(79, 172, 254, 0.26);
    border-radius: 22px;
    padding: 1.4rem 1.5rem;
    text-align: left;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.28);
    position: relative;
    overflow: hidden;
}

.stat-card[data-icon]::after {
    content: attr(data-icon);
    position: absolute;
    right: -10px;
    bottom: -20px;
    font-size: 6rem;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
}

.stat-value {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    position: relative;
    z-index: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.points-guide-section {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    background: linear-gradient(140deg, rgba(14, 25, 44, 0.82), rgba(10, 18, 36, 0.82));
    border: 1px solid rgba(79, 172, 254, 0.24);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.feed-title {
    margin: 0;
    font-size: 1.4rem;
}

.points-guide-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-milestones {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Compact full-width milestone rows (owner request 2026-07-06).
   NOTE: app-shell.css loads after this file and forces
   `.milestone-list { display:flex; column }` — the old 2-col grid here never
   applied. Full-width rows are now the intended design, so the #id-scoped
   rules below own the layout regardless of load order. */
#timelineMilestones.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

#timelineMilestones .milestone-item {
    padding: 0.8rem 1.15rem;
    gap: 0.45rem;
    border-radius: 14px;
}

#timelineMilestones .milestone-item::before,
#timelineMilestones .milestone-item::after {
    border-radius: 14px;
}

#timelineMilestones .milestone-item:hover {
    transform: translateY(-2px);
}

#timelineMilestones .milestone-item {
    align-items: stretch;
}

.ms-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    width: 100%;
}

.ms-row-head .milestone-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#timelineMilestones .milestone-goal-label {
    flex: 0 1 auto;
    margin: 0;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-row-head .milestone-date,
.ms-row-head .milestone-status {
    flex: 0 0 auto;
}

.ms-row-progress .milestone-progress-bar {
    flex: 1 1 auto;
    margin: 0;
}

.ms-progress-label {
    flex: 0 0 auto;
    min-width: 92px;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
}

.ms-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--text-muted, #94a3b8);
}

.ms-row-detail .milestone-priority,
.ms-row-detail .milestone-wizard-btn {
    flex: 0 0 auto;
}

#timelineMilestones .milestone-priority {
    margin: 0;
}

#timelineMilestones .milestone-tasks-section {
    margin-top: 0.2rem;
    padding-top: 0.45rem;
}

@media (max-width: 760px) {
    .ms-row-head,
    .ms-row-detail {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .ms-row-head .milestone-title,
    .ms-summary {
        flex-basis: 100%;
        white-space: normal;
    }

    .ms-progress-label {
        min-width: 64px;
    }
}

.milestone-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.25rem;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.85), rgba(20, 30, 55, 0.75));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(79, 172, 254, 0.25);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(79, 172, 254, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Gradient Border Pseudo-element for milestones */
.milestone-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.4), rgba(148, 121, 255, 0.2), rgba(79, 172, 254, 0.3));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.milestone-item:hover {
    transform: translateY(-5px);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(148, 121, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(148, 121, 255, 0.4);
}

.milestone-item:hover::before {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.6), rgba(148, 121, 255, 0.4), rgba(79, 172, 254, 0.5));
    opacity: 1;
}

/* Inner glow effect on hover */
.milestone-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(148, 121, 255, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.milestone-item:hover::after {
    opacity: 1;
}

.milestone-item.completed {
    background: linear-gradient(145deg, rgba(34, 197, 94, 0.15), rgba(20, 60, 40, 0.75));
    border-color: rgba(34, 197, 94, 0.35);
}

.milestone-item.completed::before {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.3));
}

.milestone-item.completed .milestone-title {
    color: #bbf7d0;
}

.milestone-goal-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.milestone-goal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.milestone-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.milestone-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.milestone-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.milestone-progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    overflow: hidden;
}

.milestone-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: inherit;
    transition: width 0.3s ease;
}

.milestone-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.milestone-priority {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.milestone-priority label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.milestone-priority input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.milestone-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(79, 172, 254, 0.15);
    border: 1px solid rgba(79, 172, 254, 0.32);
    font-size: 0.8rem;
    color: var(--text-primary);
}

.milestone-status.completed {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.35);
}

.milestone-status.overdue {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
}

.milestone-actions {
    display: flex;
    gap: 0.6rem;
}

.milestone-empty {
    padding: 1.5rem;
    text-align: center;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed rgba(79, 172, 254, 0.22);
    color: var(--text-muted);
}

.milestone-modal-section {
    margin-bottom: 1.25rem;
}

.milestone-modal-section h4 {
    margin: 0 0 0.6rem 0;
    font-size: 1rem;
}

.milestone-modal-section p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.milestone-progress-input {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.milestone-progress-input input[type="range"] {
    width: 100%;
}

.milestone-progress-value {
    font-weight: 600;
    font-size: 1.2rem;
}

.milestone-modal-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.milestone-evidence-select {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.milestone-evidence-select select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(79, 172, 254, 0.28);
    background: rgba(5, 10, 20, 0.7);
    color: var(--text-primary);
}

.milestone-evidence-help {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.milestone-warning {
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-size: 0.9rem;
}

.ai-celebration-toast {
    position: fixed;
    right: 24px;
    bottom: 32px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    max-width: 360px;
    border-radius: 20px;
    background: rgba(5, 10, 20, 0.92);
    border: 1px solid rgba(79, 172, 254, 0.32);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.45);
    color: var(--text-primary);
    z-index: 24000;
    animation: fadeInUp 0.25s ease;
}

.ai-celebration-toast .toast-icon {
    font-size: 1.6rem;
}

.ai-celebration-toast .toast-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ai-celebration-toast .toast-title {
    font-weight: 600;
    font-size: 1rem;
}

.ai-celebration-toast .toast-message {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.ai-celebration-toast button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.points-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.points-category {
    background: rgba(5, 10, 20, 0.72);
    border-radius: 22px;
    padding: 1.4rem;
    border: 1px solid rgba(79, 172, 254, 0.2);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28);
}

.points-category h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

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

.point-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(79, 172, 254, 0.18);
}

.point-value {
    font-weight: 600;
    color: var(--accent);
}

.point-action {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.level-progression-section,
.rewards-section,
.important-notes {
    background: rgba(5, 10, 20, 0.72);
    border-radius: 24px;
    border: 1px solid rgba(79, 172, 254, 0.2);
    padding: 1.6rem;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28);
}

.level-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.level-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    background: rgba(15, 23, 42, 0.55);
    border-radius: 16px;
    border: 1px solid rgba(79, 172, 254, 0.2);
}

.level-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #05070f;
    font-weight: 700;
}

.level-name {
    flex: 1;
    font-weight: 600;
}

.level-requirement {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.reward-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(79, 172, 254, 0.2);
}

.reward-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(79, 172, 254, 0.16);
}

.reward-title {
    font-weight: 600;
}

.reward-description {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.important-notes ul {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.5rem;
}

.important-notes li {
    color: var(--text-muted);
    line-height: 1.5;
}

/* Task List Styles */
.milestone-tasks-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(79, 172, 254, 0.15);
}

.milestone-tasks-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 12px;
    background: rgba(5, 10, 20, 0.4);
    transition: background 0.2s ease;
}

.milestone-tasks-toggle:hover {
    background: rgba(79, 172, 254, 0.1);
}

.milestone-tasks-toggle-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.milestone-tasks-toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.milestone-tasks-toggle-icon.expanded {
    transform: rotate(90deg);
}

.milestone-tasks-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(79, 172, 254, 0.15);
    border: 1px solid rgba(79, 172, 254, 0.25);
    font-size: 0.875rem;
    color: var(--accent);
}

.milestone-tasks-list {
    display: none;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.milestone-tasks-list.expanded {
    display: flex;
}

.task-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    background: rgba(5, 10, 20, 0.5);
    border: 1px solid rgba(79, 172, 254, 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.task-item:hover {
    background: rgba(79, 172, 254, 0.08);
    border-color: rgba(79, 172, 254, 0.3);
}

.task-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.task-item-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
}

.task-item-status {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.task-item-status.pending {
    background: rgba(148, 163, 184, 0.15);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.task-item-status.in_progress,
.task-item-status.active {
    background: rgba(79, 172, 254, 0.15);
    color: var(--accent);
    border: 1px solid rgba(79, 172, 254, 0.3);
}

.task-item-status.completed {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.task-item-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.task-item-checkpoint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.task-item-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.milestone-tasks-empty {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

/* The legacy "Recent Achievements" feed (#achievementFeed) is marked
   `hidden` in progress.html — it's a data source that stats-bridge.js mirrors
   into the visible "Recent recognition" list (#achievementList). Scope the
   display rule to :not([hidden]) so the `hidden` attribute is actually honored
   (it was leaking a duplicate of "Recent recognition" onto the page). 2026-06-28. */
.achievement-feed:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.achievement-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(79, 172, 254, 0.2);
}

.achievement-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: rgba(79, 172, 254, 0.18);
}

.achievement-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.achievement-title {
    font-weight: 600;
    font-size: 1rem;
}

.achievement-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.progress-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.chart-card {
    border-radius: 28px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(79, 172, 254, 0.24);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
    padding: 1.6rem;
}

.chart-title {
    margin: 0 0 1rem 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.loading {
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed rgba(79, 172, 254, 0.22);
    color: var(--text-muted);
}

.error {
    text-align: center;
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    font-weight: 600;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(5, 10, 20, 0.9);
    backdrop-filter: blur(16px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 22000;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: linear-gradient(155deg, rgba(15, 23, 42, 0.96), rgba(10, 15, 28, 0.92));
    border-radius: 28px;
    border: 1px solid rgba(79, 172, 254, 0.3);
    max-width: min(95vw, 760px);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 55px 120px rgba(15, 23, 42, 0.5);
    position: relative;
}

.modal-header {
    padding: 1.8rem 2.2rem 1.2rem;
    border-bottom: 1px solid rgba(79, 172, 254, 0.18);
}

.modal-title {
    margin: 0;
    font-size: 1.5rem;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(79, 172, 254, 0.35);
    background: rgba(5, 10, 20, 0.65);
    color: rgba(248, 250, 252, 0.8);
    font-size: 1.4rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.modal-close:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 18px 44px rgba(79, 172, 254, 0.28);
}

.modal-body {
    padding: 2rem 2.2rem;
    color: var(--text-primary);
}

.modal-body label {
    color: var(--text-primary);
    font-weight: 500;
}

/* Notification checkbox layout — each on its own line, large tap target */
.setting-group {
    margin-bottom: 1.25rem;
}

.setting-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    min-height: 44px;
    cursor: pointer;
}

.setting-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.setting-item span {
    font-size: 0.95rem;
}

.modal-body input[type="text"],
.modal-body input[type="number"],
.modal-body select,
.modal-body textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border-radius: 14px;
    border: 1px solid rgba(79, 172, 254, 0.28);
    background: rgba(5, 10, 20, 0.7);
    color: var(--text-primary);
    margin-top: 0.35rem;
    margin-bottom: 0.9rem;
}

.modal-body input[type="checkbox"] {
    accent-color: var(--accent);
}

@media (max-width: 900px) {
    .brand-chip {
        display: none;
    }

    .execution-page {
        padding: 2rem 1.25rem 3rem;
    }

    #dashboardStats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .dashboard-actions,
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn,
    .btn-outline,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .execution-page {
        padding: 1.5rem 1rem 3rem;
    }

    .modal {
        padding: 1.25rem;
    }

    .modal-content {
        border-radius: 26px;
    }
}

@media (max-width: 480px) {
    .milestone-priority input[type="checkbox"],
    .setting-item input[type="checkbox"],
    .modal-body input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 11px;
        box-sizing: content-box;
    }
    .milestone-priority label,
    .setting-item label,
    .modal-body label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .milestone-wizard-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .milestone-status,
    .milestone-tasks-toggle-icon,
    .stat-info-icon {
        font-size: 14px;
    }
    .milestone-meta {
        font-size: 14px;
    }
}

/* Today three-pane integrated into progress page (was /today.html) */
.today-embed { display: flex; flex-direction: column; gap: 1.1rem; }
.today-embed-header { margin: 0; }
.today-embed-header h2 { margin: 0 0 0.35rem; }
.today-embed-panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

/* Phase 4 — .page-head replaces the decorative .execution-hero block.
   Flex row: title + sub on left, action buttons on right; stacks on narrow. */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.page-head h1 {
    margin: 0 0 0.4rem 0;
    font-size: clamp(2.2rem, 4.2vw, 3rem);
    letter-spacing: -0.02em;
}
.page-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.6;
}

/* ─── Design-gap-close 2026-05-17 ─────────────────────────────────────────
   Gap 1: Page h1 was rendering cyan because typography.css sets a gradient
   on ALL h1 elements. The .page-head h1 must reset this to white Poppins.
   Tokens used so cozy mode still works (--fg-strong flips to navy ink).
   ────────────────────────────────────────────────────────────────────────── */
.page-head h1 {
    /* Cancel the gradient text-fill applied by src/styles/base/typography.css */
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--fg-strong, #ffffff);
    color: var(--fg-strong, #ffffff);
    font-family: var(--font-display, 'Poppins', sans-serif);
}

/* Gap 4: Header action buttons — "Reminders" = secondary (dark subtle border),
   "Sync stats" = primary (cyan→purple gradient, already .btn-primary).
   The base .btn in this page's CSS is already dark-bg + no-border; we just
   need to add the subtle border so "Reminders" reads as secondary. */
.page-head-actions .btn:not(.btn-primary) {
    background: rgba(5, 10, 20, 0.65);
    border: 1px solid rgba(79, 172, 254, 0.28);
    color: var(--fg, #e6edf3);
}
.page-head-actions .btn:not(.btn-primary):hover {
    border-color: rgba(148, 121, 255, 0.45);
}

/* Cozy mode: secondary button gets warm paper + warm border */
[data-ux-mode="cozy"] .page-head-actions .btn:not(.btn-primary) {
    background: #fffbf2;
    border-color: rgba(166, 130, 85, 0.35);
    color: var(--fg, #1a2438);
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* Phase 4 — Lucide icon baseline inside buttons + header glyphs. Keeps the
   SVG aligned with the adjacent label text so icon-buttons read as one unit. */
.btn .icon,
h2 .icon, h3 .icon, h4 .icon,
.feed-title .icon, .chart-title .icon, .modal-title .icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -2px;
    margin-right: 2px;
}
.btn .icon svg { width: 1em; height: 1em; }
.btn-label { display: inline; }

/* ─── Round 4 design-gap-close 2026-05-17 ─────────────────────────────────
   Structural rebuild of "Today with iSpirit" panel: 3-col dashboard
   (FINISHED OVERNIGHT / YOUR ACTION TODAY / WAITING ON YOUR CALL) +
   Milestones-in-motion w/ gradient progress bars + Weekly rhythm SVG chart.
   ──────────────────────────────────────────────────────────────────────── */

/* The legacy filter bar was hidden here from the 3-col layout until 2026-09-02,
   when its markup and script were removed for good (owner) — nothing to hide. */

/* "MON · MAY 11" eyebrow in the top-right of the Today panel */
.today-day-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.85);
    font-weight: 600;
    align-self: flex-start;
}

/* Column eyebrow + status dot for each of the 3 panes */
.today-embed-panes .today-pane h3 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: rgba(148, 163, 184, 0.85);
    margin: 0 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.today-embed-panes .today-pane h3::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.5);
    flex-shrink: 0;
}
.today-embed-panes .today-pane[data-pane="digital"] h3::before {
    background: #34d399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}
.today-embed-panes .today-pane[data-pane="action"] h3::before {
    background: #4facfe;
    box-shadow: 0 0 8px rgba(79, 172, 254, 0.7);
}
.today-embed-panes .today-pane[data-pane="decision"] h3::before {
    background: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
}
/* Hide the lucide icons inside the column eyebrows — the colored dot does
   the job; keeping the icon would double up the visual weight. */
.today-embed-panes .today-pane h3 .icon { display: none; }

/* Pane bodies stay a column of cards with a tight gap */
.today-embed-panes .today-pane {
    background: rgba(5, 10, 20, 0.55);
    border: 1px solid rgba(79, 172, 254, 0.15);
    border-radius: 18px;
    padding: 1.1rem 1.1rem 1.25rem;
}

/* Override the today.css card with the round-4 dashboard card variant.
   Compact, white title, single-line meta with iSpirit attribution. */
.today-embed-panes .today-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(79, 172, 254, 0.18);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    gap: 0.35rem;
}
.today-embed-panes .today-card__goal {
    /* Hidden for a single-goal user (title is enough). dashboard.js marks the
       panel .today-embed--multi-goal when the cards span more than one goal —
       then the eyebrow is the only thing that says which ambition a card
       belongs to (owner 2026-09-02). */
    display: none;
}
.today-embed--multi-goal .today-embed-panes .today-card__goal {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.2rem;
}
.today-embed-panes .today-card h3 {
    /* Override the column-header rules above (which target only .today-pane > h3) */
    font-size: 0.92rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.today-embed-panes .today-card h3::before { content: none; }
.today-embed-panes .today-card .today-card__body { display: none; }
.today-embed-panes .today-card .today-card__trace { display: none; }
.today-embed-panes .today-card .today-card__actions { display: none; }
/* Decision option / record-decision controls MUST stay visible in the compact
   embed pane — they're the only way to close a decision task. Hiding them left
   the Decisions pane read-only (no pick/record affordance). 2026-06-04 */
.today-embed-panes .today-card .today-decision-option { display: block; }
/* The 👍/👎 feedback row on DECISION cards (OPEN_TASKS §295, 2026-08-28).
   decisionCard() appends feedbackRow() like every other card but never sets
   .today-card--expanded, so the blanket .today-card__actions hide above left
   the thumbs invisible and /v1/goals/tasks/{id}/feedback unreachable from the
   Decisions pane — the same defect §291 fixed on digital cards. A decision
   card gets a punch-through rather than §291's Details toggle because its
   options ARE the card: there is no collapsed body to reveal, so a toggle
   would open nothing. Same shape as the .today-decision-option exception
   above, and safe because feedbackRow is the ONLY .today-card__actions a
   decision card renders (reviewRow belongs to digitalCard). */
.today-embed-panes .today-card--decision .today-card__actions { display: flex; }
/* Proactive review controls MUST stay visible in the compact embed pane —
   Accept / Request-changes is the only way to complete a pending_review task
   (spec 2026-07-10 §5; same rationale as the decision-option exception). The
   --review modifier also restores the draft preview so the user can read what
   they're accepting. */
.today-embed-panes .today-card .today-card__review {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.today-embed-panes .today-card--review .today-card__body { display: block; }
.today-embed-panes .today-card--review .today-card__trace { display: block; }
.today-embed-panes .today-card .today-card__drafted-pill { display: none; }

/* Action-card details toggle (2026-07-25). The compact pane hides
   .today-card__body, so an action task's briefing — who / when / context /
   likely questions / opening — was unreachable: clicking the card did nothing.
   Same shape as the --review and --decision exceptions above: a modifier
   un-hides the body, driven by an explicit affordance rather than a bare
   click, so it's discoverable and keyboard-reachable. */
.today-embed-panes .today-card--expanded .today-card__body { display: block; }
/* Task-feedback row on EXPANDED cards (2026-08-08). Same shape as the --review
   and --decision exceptions above. dashboard.js appends feedbackRow() (the
   👍 / 👎 pair, Task 12) to every task card, but the blanket
   .today-card__actions hide above meant it had never once been visible on
   /progress.html — the only page these cards render on — so the feedback
   endpoint could not be reached from the UI at all. Restored on expanded cards
   only, so the compact pane stays compact and the row appears when the user
   has explicitly opened a card to read it. */
.today-embed-panes .today-card--expanded .today-card__actions { display: flex; }
/* Step-by-step execution instructions — the nightly review writes flowing
   "First, … Next, … Done when …" prose, so give it real line height and a
   left rule to separate it from the briefing fields below. */
.today-card__steps {
    margin: 0 0 0.4rem;
    padding-left: 0.6rem;
    border-left: 2px solid color-mix(in srgb, var(--accent-purple, #9479ff) 45%, transparent);
    line-height: 1.55;
}
.today-card__steplist {
    margin: 0;
    padding-left: 1.2rem;
}
.today-card__steplist li { margin: 0 0 0.3rem; }
.today-card__steplist li::marker {
    color: var(--accent-purple, #9479ff);
    font-weight: 700;
}
/* "Done when …" — the completion test, set apart from the steps themselves. */
.today-card__stepdone {
    margin-top: 0.35rem;
    font-weight: 600;
    color: var(--text-primary, #e2e8f0);
}
.today-card__details-toggle {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.15rem 0.5rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 999px;
    cursor: pointer;
}
.today-card__details-toggle:hover,
.today-card__details-toggle:focus-visible {
    color: var(--text-primary, #e2e8f0);
}

/* Per-column meta line — synthesised by JS into a `.today-card__metaline` div */
.today-card__metaline {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.85);
    margin-top: 0.15rem;
}
.today-card__metaline-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}
/* Per-column meta color tint matches the column dot */
.today-pane[data-pane="digital"] .today-card__metaline { color: rgba(134, 239, 172, 0.85); }
.today-pane[data-pane="action"] .today-card__metaline { color: rgba(125, 211, 252, 0.85); }
.today-pane[data-pane="decision"] .today-card__metaline { color: rgba(252, 211, 77, 0.85); }

/* Action "Start →" anchor button (right-aligned inside meta row) */
.today-card__start {
    margin-left: auto;
    color: rgba(125, 211, 252, 0.95);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}
.today-card__start:hover { color: #fff; }

/* Empty state inside a column reads as quiet body, not an alert */
.today-embed-panes .today-empty {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem 0.2rem;
    background: transparent;
    border: none;
}

/* Header row now wraps the "MON · MAY 11" eyebrow on the right.
   Override the today.css definition (justify-content: space-between with
   flex-start) so the eyebrow drops to the right of the title cluster. */
.today-embed-header {
    align-items: center;
}
.today-embed-actions {
    align-items: flex-end;
    gap: 0.5rem;
}

/* ─── Milestones in motion (gradient-bar variant) ─────────────────────── */
/* We're rewriting #timelineMilestones items as goal cards. Each item has
   a title row (date right-aligned), a one-line sub, a progress bar, and a
   percentage chip on the bar. */
.milestone-list { display: flex; flex-direction: column; gap: 0.85rem; }
.milestone-list .milestone-item.is-goal-card {
    /* Reset the heavy gradient-border treatment from the legacy milestone
       block — round 4 wants flat, calm cards */
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(79, 172, 254, 0.16);
    border-radius: 16px;
    padding: 1rem 1.15rem 1.1rem;
    box-shadow: none;
    cursor: default;
    gap: 0.5rem;
    flex-direction: column;
    transform: none;
    transition: border-color 0.2s ease;
}
.milestone-list .milestone-item.is-goal-card::before,
.milestone-list .milestone-item.is-goal-card::after { content: none; }
.milestone-list .milestone-item.is-goal-card:hover {
    border-color: rgba(148, 121, 255, 0.35);
    transform: none;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.4);
}
.goal-card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.goal-card-top .goal-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.goal-card-top .goal-card-title::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    flex-shrink: 0;
}
.goal-card-top .goal-card-date {
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.goal-card-sub {
    margin: 0;
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.85rem;
    line-height: 1.4;
}
.goal-card-bar-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.4rem;
}
.goal-card-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
.goal-card-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: width 0.5s ease;
}
.goal-card-pct {
    color: rgba(148, 163, 184, 0.95);
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 2.7em;
    text-align: right;
}

/* Card head w/ "View all" link/button on the right */
.two-col .card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 1.4rem 1.5rem 1.5rem;
    box-shadow: var(--shadow-lg);
}
.two-col .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.two-col .card-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.two-col .card-head .btn,
.two-col .card-head .btn-sm {
    background: rgba(5, 10, 20, 0.65);
    border: 1px solid rgba(79, 172, 254, 0.28);
    color: var(--fg, #e6edf3);
    padding: 0.35rem 0.85rem;
    font-size: 0.82rem;
    border-radius: 999px;
    min-height: auto;
    box-shadow: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.two-col .card-head .btn:hover,
.two-col .card-head .btn-sm:hover {
    border-color: rgba(148, 121, 255, 0.5);
    transform: none;
    box-shadow: none;
}

/* ─── Recent recognition list (icon + title + +XP) ────────────────────── */
.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
/* Collapsed overflow rows (Recent recognition shows the latest 3).
   REQUIRED: the rule below is `display: flex` at specificity 0,2,0, which beats
   the UA sheet's `[hidden] { display: none }` at 0,1,0 — so `row.hidden = true`
   alone leaves the row on screen. Scope the force-hide to match. */
.achievement-list .achievement-row[hidden] { display: none !important; }
/* Same force-hide for the OTHER writer's row class. #achievementList has two
   renderers: round4-bridge emits `.achievement-row`, stats-bridge mirrors
   #achievementFeed as `.achievement`. Both set `display: flex` from author
   CSS, which always beats the UA's `[hidden]` regardless of specificity. */
.achievement-list .achievement[hidden] { display: none !important; }
.achievement-showmore {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding: 0.3rem 0.75rem;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted, #94a3b8);
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 999px;
    cursor: pointer;
}
.achievement-showmore:hover,
.achievement-showmore:focus-visible { color: var(--text-primary, #e2e8f0); }
.achievement-list .achievement-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(79, 172, 254, 0.16);
    border-radius: 14px;
}
.achievement-list .achievement-row .achievement-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.25), rgba(251, 191, 36, 0.18));
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    flex-shrink: 0;
}
.achievement-list .achievement-row .achievement-body {
    flex: 1;
    min-width: 0;
}
.achievement-list .achievement-row .achievement-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.achievement-list .achievement-row .achievement-meta {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.85);
}
.achievement-list .achievement-row .achievement-xp {
    color: rgba(125, 211, 252, 0.95);
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    white-space: nowrap;
}
.achievement-list .achievement-empty {
    color: rgba(148, 163, 184, 0.55);
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.6rem 0.2rem;
}

/* ─── Weekly rhythm bar chart ─────────────────────────────────────────── */
.chart-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 1.4rem 1.5rem 1.6rem;
    box-shadow: var(--shadow-lg);
}
.chart-card .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.chart-card .card-head .card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.chart-card .card-head .card-eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(148, 163, 184, 0.85);
    font-weight: 600;
}
.weekly-chart {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: 0.85rem;
    height: 180px;
    padding: 0 0.2rem;
}
.weekly-chart-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 0.5rem;
}
.weekly-chart-bar .wcb-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.15rem;
    opacity: 0.95;
}
.weekly-chart-bar .wcb-bar {
    width: 100%;
    max-width: 64px;
    background: linear-gradient(180deg, var(--accent), var(--accent-2));
    border-radius: 12px 12px 4px 4px;
    box-shadow: 0 10px 28px rgba(79, 172, 254, 0.2);
    min-height: 6px;
    transition: height 0.5s ease;
}
.weekly-chart-bar.is-empty .wcb-bar {
    background: rgba(148, 163, 184, 0.18);
    box-shadow: none;
}
.weekly-chart-bar.is-empty .wcb-value {
    /* 0.45 composited to ~2.4:1 on the dark card — the "0" label failed AA.
       0.85 → ~5:1 while still reading as the de-emphasised empty state. */
    color: rgba(148, 163, 184, 0.85);
    font-weight: 600;
}
.weekly-chart-bar.is-today .wcb-bar {
    box-shadow: 0 14px 36px rgba(148, 121, 255, 0.45);
    outline: 1px solid rgba(148, 121, 255, 0.5);
    outline-offset: -1px;
}
.weekly-chart-bar .wcb-day {
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.75);
    margin-top: 0.45rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.weekly-chart-caption {
    text-align: center;
    /* 0.55 alpha composited on the dark card was 3.0:1 (AA needs 4.5); 0.8
       clears it with margin (2026-07-03 review). */
    color: rgba(148, 163, 184, 0.8);
    font-size: 0.78rem;
    font-style: italic;
    margin-top: 0.85rem;
}

/* Responsive: stack chart bars tighter on narrow viewports */
@media (max-width: 600px) {
    .weekly-chart { gap: 0.5rem; height: 150px; }
    .weekly-chart-bar .wcb-value { font-size: 0.72rem; }
    .weekly-chart-bar .wcb-day { font-size: 0.72rem; }
    .today-embed-panes { grid-template-columns: 1fr; }
}

/* Legacy ACTIVE GOALS controls panel (#goalControlsPanel) — hidden here from
   Round 4, removed with its fetch on 2026-09-02 (OPEN_TASKS §142/§346). The
   working controls live on /missions.html. */

/* ─── Round 7 (2026-05-17): page-head subtitle reads quieter, no fake "X
 *  decisions still on your desk" numbers when data hasn't loaded yet. The
 *  bridge updates this dynamically — until then, the calm phrase below
 *  matches the target screenshot's tone. */
.page-head p {
    font-size: clamp(0.98rem, 1.4vw, 1.05rem);
    line-height: 1.55;
    max-width: 720px;
    color: var(--text-muted);
}

/* Stat-grid layout matches the target: 1fr 1fr 2fr (level card spans wider).
 * On narrow viewports it stacks into a single column. */
.stat-grid {
    grid-template-columns: 1fr 1fr 2fr;
}
@media (max-width: 900px) {
    .stat-grid {
        grid-template-columns: 1fr 1fr;
    }
    .stat-grid .level-card {
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px) {
    .stat-grid {
        grid-template-columns: 1fr;
    }
    .stat-grid .level-card {
        grid-column: 1;
    }
}

/* Stat card icon as a small chip in the top-left, matching target.
 * The legacy .stat-card had no .stat-ico styling, so the icon sat as a
 * raw glyph. We treat it as a 36×36 rounded square with subtle gradient. */
.stat-card .stat-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(79,172,254,0.18), rgba(148,121,255,0.14));
    border: 1px solid rgba(79,172,254,0.25);
    color: rgba(125,211,252,0.95);
    margin-bottom: 0.7rem;
}
.stat-card .stat-ico .icon svg { width: 18px; height: 18px; }

.stat-card .stat-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(148, 163, 184, 0.85);
    margin-bottom: 0.3rem;
}

.stat-card .stat-value {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.stat-card .stat-delta {
    display: block;
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.75);
    line-height: 1.4;
}

/* Level card — purple gradient chip on the left holding the level number,
 * name + XP on top, progress bar full-width, two-line meta beneath. */
.level-card {
    background: linear-gradient(160deg, rgba(79,172,254,0.18), rgba(148,121,255,0.12)) , rgba(5, 10, 20, 0.7);
    border: 1px solid rgba(148, 121, 255, 0.28);
    border-radius: 22px;
    padding: 1.3rem 1.5rem;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.level-card .level-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.level-card .level-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #05070f;
    font-weight: 800;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(148, 121, 255, 0.35);
}
.level-card .level-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.level-card .level-xp {
    display: block;
    font-size: 0.82rem;
    color: rgba(148, 163, 184, 0.85);
    margin-top: 0.15rem;
}
.level-card .progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}
.level-card .progress-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.level-card .level-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: rgba(148, 163, 184, 0.75);
}

/* Cozy mode: warm paper background, navy ink */
[data-ux-mode="cozy"] .level-card {
    background: linear-gradient(160deg, #fff8ec, #fffaf2);
    border-color: rgba(166, 130, 85, 0.35);
    color: #1a2438;
}
[data-ux-mode="cozy"] .level-card .level-name { color: #1a2438; }
[data-ux-mode="cozy"] .stat-card { background: #fffbf2; border-color: rgba(166, 130, 85, 0.30); }
[data-ux-mode="cozy"] .stat-card .stat-value { color: #1a2438; }
[data-ux-mode="cozy"] .stat-card .stat-label { color: rgba(72, 60, 40, 0.85); }
[data-ux-mode="cozy"] .stat-card .stat-delta { color: rgba(72, 60, 40, 0.65); }

/* Recap banner: make event text wrap politely and never grow taller than ~3
 * lines per item even if the API surfaces a verbose title. Together with the
 * 80-char clip in recap-banner.js this keeps the banner glanceable. */
.recap-banner .recap-list li {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}

/* Chip text must ellipsize inside the inline-flex pill (compact rows 2026-07-06) */
.milestone-goal-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── QA 2026-07-16 r2: [hidden] must always win on this page. ──────────────
 * Author display rules (.page-head{display:flex} + .btn{display:inline-flex}
 * in app-shell.css, #dashboardStats{display:grid} above) out-rank the UA
 * [hidden]{display:none} rule, so three legacy-hidden regions rendered
 * visibly (duplicate action row, stray Refresh button, duplicate stat grid /
 * welcome card). Same bug class as the .recap-banner JS force-hide
 * (recap-banner.js) and the #goalControlsPanel !important hide above. */
.page-head--actions[hidden],
#refreshMilestonesBtn[hidden],
#dashboardStats[hidden] { display: none !important; }

/* Held-task ask (mig 0104). Visually separated from `Why it slipped` on
   purpose: these were the same field until 2026-07-31, so a question the user
   had to ANSWER rendered as a slippage explanation. Amber rail = needs you,
   matching the "Your action today" lane accent rather than the purple used for
   iSpirit-authored steps. */
.today-card__blocked {
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.6rem;
    border-left: 2px solid color-mix(in srgb, var(--accent-amber, #d9a441) 65%, transparent);
    background: color-mix(in srgb, var(--accent-amber, #d9a441) 8%, transparent);
    border-radius: 0 4px 4px 0;
}
.today-card__blocked-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.2rem;
}
.today-card__blocked-ask { line-height: 1.5; margin-bottom: 0.45rem; }
.today-card__blocked-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.today-card__blocked-input {
    flex: 1 1 12rem;
    min-width: 0;                 /* else the flex item refuses to shrink */
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
}
.today-card__blocked-ok { line-height: 1.5; opacity: 0.85; }
.today-card__blocked-err { margin-top: 0.35rem; font-size: 0.85rem; opacity: 0.9; }

/* §49 detection floor: calm, honest engine-delay note above the panes. */
.engine-delay-note { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.35); color: var(--fg, #e6edf3); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: .9rem; }