/* ==========================================================================
   OpsMonsters Project Tracker — design system
   Glassmorphism, Poppins, light/dark themes driven by [data-theme] on <html>.
   ========================================================================== */

:root {
    color-scheme: light;

    /* Brand */
    --accent: #FF6417;
    --accent-dark: #E0540A;
    --accent-light: #FF8A50;

    /* Neutrals (light theme defaults) */
    --page-bg: #F5F5F5;
    --page-bg-2: #ECEDEE;
    --surface: rgba(255, 255, 255, 0.68);
    --surface-solid: #FFFFFF;
    --surface-strong: rgba(255, 255, 255, 0.88);
    --card-border: rgba(53, 62, 67, 0.10);
    --text: #353E43;
    --muted: #8A8C8F;
    --white: #FFFFFF;

    /* Status */
    --healthy: #2563EB;
    --attention: #F5CD47;
    --attention-text: #8F6A00;
    --delayed: #C9372C;
    --in-progress: #C98A00;
    --qa: #7C3AED;
    --repeat: #0D9488;

    /* Effects */
    --blur: 22px;
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 10px rgba(53, 62, 67, 0.06);
    --shadow-md: 0 12px 32px rgba(53, 62, 67, 0.10);
    --shadow-lg: 0 20px 60px rgba(53, 62, 67, 0.16);
    --shadow-glow: 0 10px 30px rgba(255, 100, 23, 0.28);

    --blob-1: rgba(255, 100, 23, 0.20);
    --blob-2: rgba(101, 84, 192, 0.16);
    --blob-3: rgba(34, 160, 107, 0.12);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --page-bg: #14171A;
    --page-bg-2: #1B1F23;
    --surface: rgba(53, 62, 67, 0.55);
    --surface-solid: #2A3136;
    --surface-strong: rgba(53, 62, 67, 0.85);
    --card-border: rgba(255, 255, 255, 0.10);
    --text: #F5F6F7;
    --muted: #A7ABAE;
    --white: #FFFFFF;

    --attention-text: #F5CD47;
    --healthy: #4C8DFF;
    --in-progress: #E8B923;
    --qa: #A78BFA;
    --repeat: #2DD4BF;

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 10px 34px rgba(255, 100, 23, 0.35);

    --blob-1: rgba(255, 100, 23, 0.28);
    --blob-2: rgba(101, 84, 192, 0.28);
    --blob-3: rgba(34, 160, 107, 0.16);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

html {
    background: var(--page-bg);
}

body {
    background: var(--page-bg);
    color: var(--text);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Ambient blurred blobs behind the glass surfaces - the "CRED glow" */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

body::before {
    width: 560px;
    height: 560px;
    top: -180px;
    right: -160px;
    background: var(--blob-1);
}

body::after {
    width: 620px;
    height: 620px;
    bottom: -220px;
    left: -200px;
    background: var(--blob-2);
}

.admin-container::before {
    content: "";
    position: fixed;
    z-index: -1;
    width: 500px;
    height: 500px;
    top: 30vh;
    right: 10vw;
    border-radius: 50%;
    filter: blur(100px);
    background: var(--blob-3);
    pointer-events: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; letter-spacing: -0.01em; }

.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    position: relative;
}

.container--wide {
    max-width: 1040px;
}

.layout {
    display: block;
}

.layout--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 24px;
}

.layout-main {
    min-width: 0;
}

.layout-sidebar {
    position: sticky;
    top: 24px;
}

@media (max-width: 860px) {
    .layout--split {
        grid-template-columns: 1fr;
    }

    .layout-sidebar {
        position: static;
    }
}

/* ---------- Glass surface base ---------- */

.card,
.panel,
.login-card,
.comment-form,
.stage-edit-form,
.name-modal,
.user-menu-dropdown {
    background: var(--surface);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ---------- Customer page ---------- */

.page-header {
    text-align: center;
    margin-bottom: 32px;
}

.page-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
}

.page-brand img {
    width: 34px;
    height: 34px;
}

.page-brand span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.page-header h1 {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}

.page-header p {
    color: var(--muted);
    margin: 0;
    font-size: 15px;
}

.card {
    padding: 24px;
    margin-bottom: 20px;
}

.health-card {
    border-left: none;
    position: relative;
    overflow: hidden;
}

.health-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--healthy);
    border-radius: 999px 0 0 999px;
}

.health-card.health--attention::before { background: var(--attention); }
.health-card.health--delayed::before { background: var(--delayed); }

.health-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.health-card-main {
    flex: 1;
}

.health-score {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.health-score-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--healthy);
}

.health--attention .health-score-value { color: var(--attention-text); }
.health--delayed .health-score-value { color: var(--delayed); }

/* A heart in place of a bare "%" - a light "empty" heart sits behind a
   colored one clipped to the health score's height, like a liquid gauge.
   --health-pct (set inline per card) drives both the clip and the
   one-time drain-in reveal on load. */
.health-heart {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: var(--healthy);
}

.health--attention .health-heart { color: var(--attention-text); }
.health--delayed .health-heart { color: var(--delayed); }

.health-heart-bg,
.health-heart-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.health-heart-bg {
    color: var(--muted);
    opacity: 0.3;
}

.health-heart-fill {
    clip-path: inset(calc(100% - var(--health-pct, 0%)) 0 0 0);
}

@media (prefers-reduced-motion: no-preference) {
    .health-heart-fill {
        animation: health-heart-drain 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1;
    }

    .health-heart {
        animation: health-heartbeat 2.2s ease-in-out infinite;
        animation-delay: 1.1s;
    }

    @keyframes health-heart-drain {
        from { clip-path: inset(0 0 0 0); }
        to { clip-path: inset(calc(100% - var(--health-pct, 0%)) 0 0 0); }
    }

    @keyframes health-heartbeat {
        0%, 100% { transform: scale(1); }
        15% { transform: scale(1.12); }
        30% { transform: scale(1); }
        45% { transform: scale(1.08); }
        60% { transform: scale(1); }
    }
}

.health-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.12);
    color: var(--healthy);
    flex-shrink: 0;
}

.health-icon svg { width: 22px; height: 22px; }

.health--attention .health-icon { background: rgba(245, 205, 71, 0.18); color: var(--attention-text); }
.health--delayed .health-icon { background: rgba(201, 55, 44, 0.12); color: var(--delayed); }

.health-label {
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 2px;
}

.health-message {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
}

.progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.progress-track {
    flex: 1;
    height: 9px;
    border-radius: 999px;
    background: var(--card-border);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.health-card.health--attention .progress-fill { background: linear-gradient(90deg, var(--attention-text), var(--attention)); }
.health-card.health--delayed .progress-fill { background: linear-gradient(90deg, var(--delayed), #E5584D); }

.progress-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.section-title {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted);
    margin: 0 0 18px;
}

/* Journey */

.journey {
    position: relative;
    padding-left: 6px;
}

.journey-row {
    position: relative;
    display: flex;
    gap: 16px;
    padding-bottom: 28px;
}

.journey-row:last-child { padding-bottom: 0; }

.journey-rail {
    position: relative;
    width: 28px;
    flex: 0 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.journey-rail::before {
    content: "";
    position: absolute;
    top: 26px;
    bottom: -28px;
    width: 2px;
    background: var(--card-border);
}

.journey-row:last-child .journey-rail::before {
    display: none;
}

.journey-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-solid);
    border: 2px solid var(--card-border);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.journey-row.is-completed .journey-dot {
    background: var(--healthy);
    border-color: var(--healthy);
    color: var(--white);
}

.journey-row.is-completed .journey-rail::before {
    background: var(--healthy);
}

.journey-row.is-current .journey-dot {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-color: var(--accent);
    font-size: 16px;
    box-shadow: 0 0 0 6px rgba(255, 100, 23, 0.18), var(--shadow-glow);
}

.journey-row.is-in_progress .journey-dot {
    background: var(--in-progress);
    border-color: var(--in-progress);
}

.journey-row.is-in_progress .journey-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white);
}

.journey-row.is-qa .journey-dot {
    background: var(--qa);
    border-color: var(--qa);
}

.journey-row.is-repeat .journey-dot {
    background: var(--repeat);
    border-color: var(--repeat);
}

.journey-row.is-qa .journey-dot::after,
.journey-row.is-repeat .journey-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white);
}

.journey-row.is-blocked .journey-dot {
    background: var(--delayed);
    border-color: var(--delayed);
    color: var(--white);
    box-shadow: 0 0 0 6px rgba(201, 55, 44, 0.18);
}

.journey-content {
    flex: 1;
    padding-top: 2px;
}

.journey-name {
    font-weight: 600;
    font-size: 15px;
    margin: 0;
}

.journey-row.is-upcoming .journey-name { color: var(--muted); }

/* ---------- Collapsible stages (Manage view + customer journey) ---------- */
/* Shared marker class on the <details>; each side keeps its own layout
   class (.stage-main / .journey-content) for everything but the fold. */

details.stage-collapsible > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

details.stage-collapsible > summary::-webkit-details-marker {
    display: none;
}

.stage-collapse-chevron {
    flex-shrink: 0;
    color: var(--muted);
    transition: transform 0.15s ease;
}

details.stage-collapsible[open] > summary .stage-collapse-chevron {
    transform: rotate(180deg);
}

.journey-name-text {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stage-collapsible-body {
    margin-top: 2px;
}

.journey-current-pill {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--white);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
}

.journey-current-pill--muted {
    background: var(--in-progress);
}

.journey-current-pill--qa {
    background: var(--qa);
}

.journey-current-pill--repeat {
    background: var(--repeat);
}

.journey-current-pill--blocked {
    background: var(--delayed);
}

.journey-status-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.journey-status-tag--qa { color: var(--qa); }
.journey-status-tag--repeat { color: var(--repeat); }

.journey-blocked-tag {
    display: inline-block;
    color: var(--delayed);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.journey-desc {
    color: var(--muted);
    font-size: 13.5px;
    margin: 4px 0 0;
}

.journey-desc p {
    margin: 0 0 8px;
}

.journey-desc p:last-child {
    margin-bottom: 0;
}

.journey-desc ul,
.journey-desc ol {
    margin: 0 0 8px;
    padding-left: 20px;
}

.journey-desc li {
    margin-bottom: 2px;
}

.journey-desc blockquote {
    margin: 0 0 8px;
    padding: 4px 10px;
    border-left: 3px solid var(--card-border);
}

.journey-desc code {
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.journey-desc pre {
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    margin: 0 0 8px;
}

.journey-desc pre code {
    background: none;
    border: none;
    padding: 0;
}

.journey-desc a {
    color: inherit;
}

.journey-date {
    color: var(--muted);
    font-size: 12px;
    margin: 4px 0 0;
}

.journey-modules {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--card-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.journey-modules li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    cursor: pointer;
    border-radius: 6px;
    margin: -3px -6px;
    padding: 3px 6px;
    transition: background 0.15s ease;
}

.journey-modules li:hover,
.journey-modules li:focus-visible {
    background: var(--page-bg-2);
    outline: none;
}

.journey-modules .module-name {
    color: var(--text);
}

.journey-modules .module-date {
    color: var(--muted);
    white-space: nowrap;
}

.journey-modules li.is-completed .module-name {
    color: var(--healthy);
}

.journey-modules li.is-in_progress .module-name {
    color: var(--in-progress);
}

.journey-modules li.is-qa .module-name {
    color: var(--qa);
}

.journey-modules li.is-repeat .module-name {
    color: var(--repeat);
}

.journey-modules li.is-blocked .module-name {
    color: var(--delayed);
    font-weight: 700;
}

/* Focus + Launch */

.focus-title {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px;
}

.focus-desc {
    color: var(--muted);
    margin: 0;
    font-size: 14.5px;
}

.launch-card {
    text-align: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--white);
    border: none;
    box-shadow: var(--shadow-glow);
}

.launch-card .section-title {
    color: rgba(255, 255, 255, 0.85);
}

.launch-date {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
}

/* History */

.history-item {
    padding: 14px 0;
    border-bottom: 1px dashed var(--card-border);
}

.history-item:last-child { border-bottom: none; }

.history-date {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.history-label {
    font-weight: 600;
    margin: 2px 0 4px;
}

.history-note {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0 0 4px;
}

.history-launch {
    font-size: 13px;
    color: var(--text);
}

.history-launch .arrow { color: var(--muted); margin: 0 4px; }

.history-item.is-current .history-date { color: var(--accent); }
.history-item.is-current .history-label::after {
    content: "In Progress";
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--accent);
    color: var(--white);
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
}

.page-footer {
    text-align: center;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 12px;
}

.standup-card {
    padding: 20px;
    margin-top: 20px;
}

.standup-entry {
    border-bottom: 1px solid var(--card-border);
    padding: 10px 0;
}

.standup-entry:last-of-type {
    border-bottom: none;
}

.standup-entry summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.standup-entry summary::-webkit-details-marker {
    display: none;
}

.standup-entry summary::before {
    content: "›";
    display: inline-block;
    color: var(--accent);
    transition: transform 0.15s ease;
    font-size: 16px;
    font-weight: 700;
}

.standup-entry[open] summary::before {
    transform: rotate(90deg);
}

.standup-bullets {
    margin: 8px 0 2px;
    padding-left: 18px;
    font-size: 12.5px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* ---------- Known Issues (customer-facing bugs) ---------- */

.bug-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--card-border);
}

.bug-item:last-child {
    border-bottom: none;
}

.bug-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.bug-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    flex: 1 1 100%;
}

.bug-item-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.bug-item-desc {
    font-size: 12.5px;
    color: var(--muted);
    margin: 4px 0 0;
}

.bug-item-meta {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 6px;
}

.bugs-view-all {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 12px;
}

.bug-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--card-border);
}

.bug-filters select,
.bug-filters input[type="date"] {
    font-size: 12.5px;
    padding: 9px 11px;
}

.bug-filters-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bug-filters-dates input {
    flex: 1;
    min-width: 0;
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.bug-filters-dates input:hover {
    border-color: var(--accent);
}

.bug-filters-dates input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.bug-filters-dates input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.admin-bug-filters {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

/* ---------- Comments ---------- */

.comments-card {
    margin-top: 4px;
}

.comment-search {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.comment-search input {
    flex: 1;
}

.commenter-banner {
    font-size: 12.5px;
    color: var(--muted);
    margin: -6px 0 14px;
}

.commenter-banner strong {
    color: var(--text);
}

.commenter-banner a {
    font-size: 12.5px;
}

.comment-form {
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: none;
}

.comment-form textarea {
    font-family: inherit;
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.comment-item {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--card-border);
}

.comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-meta {
    font-size: 13px;
    margin-bottom: 4px;
}

/* ---------- Priority picker (stage / sub-module priority) ---------- */

.priority-picker {
    position: relative;
    display: inline-block;
}

.priority-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}

.priority-picker-trigger:hover {
    border-color: var(--accent);
}

.js-priority-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.priority-picker-caret {
    color: var(--muted);
    margin-left: 2px;
}

.priority-picker-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--surface-strong);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 160px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.priority-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.priority-picker-option:hover {
    background: var(--page-bg-2);
}

.priority-flag-icon {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.priority-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    vertical-align: middle;
}

.activity-log-card {
    margin-top: 4px;
}

.activity-log-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-log-item {
    font-size: 13.5px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.activity-log-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Rendered comment / markdown output */
.comment-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    word-wrap: break-word;
}

.comment-body p {
    margin: 0 0 10px;
}

.comment-body p:last-child {
    margin-bottom: 0;
}

.comment-body ul,
.comment-body ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.comment-body li {
    margin-bottom: 3px;
}

.comment-body blockquote {
    margin: 0 0 10px;
    padding: 4px 12px;
    border-left: 3px solid var(--card-border);
    color: var(--muted);
}

.comment-body code {
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.9em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.comment-body pre {
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0 0 10px;
}

.comment-body pre code {
    background: none;
    border: none;
    padding: 0;
}

.comment-body a {
    word-break: break-word;
}

/* Bug descriptions reuse the markdown styles above at the bug list's
   smaller, muted size. */
.bug-item-desc.comment-body,
.history-note.comment-body {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* The project page's sidebar only previews a bug - long markdown
   descriptions are capped; the full text is on the Bugs page. */
.bug-item-desc--preview {
    max-height: 7.75em;
    overflow: hidden;
}

/* ---------- Name prompt modal ---------- */

.name-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 26, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 100;
}

.name-modal-overlay[hidden] {
    display: none;
}

.name-modal {
    padding: 28px;
    width: 100%;
    max-width: 360px;
    box-shadow: var(--shadow-lg);
}

.name-modal h2 {
    font-size: 19px;
    margin: 0 0 6px;
}

.name-modal input {
    margin: 14px 0;
}

/* ---------- Generic modal (Add Stage / Add Sub-module, etc.) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 23, 26, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 200;
    overflow-y: auto;
}

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

.modal-box {
    background: var(--surface-strong);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 28px;
    width: 100%;
    max-width: 440px;
    margin: auto;
}

.modal-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.modal-box-header h2 {
    font-size: 18px;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    padding: 4px;
}

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

/* ---------- Stakeholder sentiment prompt ---------- */

.sentiment-modal-box {
    max-width: 380px;
    text-align: center;
}

.sentiment-prompt-buttons {
    display: flex;
    gap: 12px;
}

.sentiment-prompt-buttons form {
    flex: 1;
}

.sentiment-choice {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--card-border);
    background: var(--page-bg-2);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.sentiment-choice svg {
    width: 28px;
    height: 28px;
}

.sentiment-choice--up:hover {
    border-color: var(--healthy);
    color: var(--healthy);
}

.sentiment-choice--down:hover {
    border-color: var(--delayed);
    color: var(--delayed);
}

.modal-close-text {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 12.5px;
    margin-top: 16px;
    text-decoration: underline;
}

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

/* ---------- Admin ---------- */

.admin-nav {
    background: var(--surface-strong);
    backdrop-filter: blur(var(--blur));
    -webkit-backdrop-filter: blur(var(--blur));
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.admin-nav-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-nav-inner .brand {
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.admin-nav-inner .brand img {
    width: 30px;
    height: 30px;
}

.admin-nav-inner .brand:hover { text-decoration: none; }

.admin-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 80px;
    position: relative;
}

.admin-h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 4px;
}

.admin-sub {
    color: var(--muted);
    font-size: 14px;
    margin: 0 0 24px;
}

.panel {
    padding: 24px;
    margin-bottom: 24px;
}

.panel-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--card-border);
}

/* A <details> whose <summary class="panel-title"> is the fold/expand
   toggle - used for panel content that doesn't need to be seen on every
   visit (e.g. Project Information's edit form + computed stats). */

.panel-collapsible > summary.panel-title {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.panel-collapsible > summary.panel-title::-webkit-details-marker {
    display: none;
}

.panel-collapsible > summary.panel-title::before {
    content: "›";
    display: inline-block;
    color: var(--accent);
    font-size: 19px;
    font-weight: 700;
    transition: transform 0.15s ease;
}

.panel-collapsible[open] > summary.panel-title::before {
    transform: rotate(90deg);
}

.panel-collapsible:not([open]) > summary.panel-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.field { margin-bottom: 16px; }

input[type=text],
input[type=email],
input[type=url],
input[type=date],
input[type=password],
select,
textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background: var(--page-bg-2);
}

:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=email],
:root[data-theme="dark"] input[type=url],
:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: rgba(0, 0, 0, 0.18);
    color-scheme: dark;
}

/* `color-scheme: dark` alone doesn't reliably theme a native <select>'s
   popup list in every browser - explicitly coloring the <option>s is what
   actually fixes it (Chrome in particular). */
:root[data-theme="dark"] select option {
    background-color: var(--surface-solid);
    color: var(--text);
}

textarea { resize: vertical; min-height: 64px; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 100, 23, 0.18);
}

.hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

.json-template {
    position: relative;
}

.json-template pre {
    margin: 0;
    padding: 16px;
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
    overflow-x: auto;
    white-space: pre;
}

:root[data-theme="dark"] .json-template pre {
    background: rgba(0, 0, 0, 0.18);
}

.json-template .btn {
    position: absolute;
    top: 10px;
    right: 10px;
}

.char-counter {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--shadow-glow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover { transform: translateY(-1px); text-decoration: none; box-shadow: 0 14px 36px rgba(255, 100, 23, 0.36); }
.btn:active { transform: translateY(0); }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

.btn-secondary:hover { background: var(--page-bg-2); box-shadow: none; transform: none; }

.btn-danger {
    background: var(--surface);
    color: var(--delayed);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

.btn-danger:hover { background: rgba(201, 55, 44, 0.10); box-shadow: none; transform: none; }

/* ---------- AJAX loading states ---------- */

.ajax-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    background-size: 50% 100%;
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
}

body.is-ajax-loading .ajax-loading-bar {
    opacity: 1;
    animation: ajax-loading-slide 0.9s linear infinite;
}

@keyframes ajax-loading-slide {
    0% { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

.btn.is-loading,
select.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.btn.is-loading {
    color: transparent !important;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

.btn-secondary.is-loading::after,
.btn-danger.is-loading::after {
    border-color: rgba(138, 140, 143, 0.3);
    border-top-color: var(--text);
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

fieldset[disabled] {
    opacity: 0.6;
}

.btn-sm { padding: 8px 16px; font-size: 12.5px; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.stage-row {
    display: flex;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--card-border);
}

.stage-row:last-child { border-bottom: none; }

.stage-order-btns {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 12px;
}

/* Zero footprint until hovered/focused - width and margin both collapse
   to 0 so there's no permanent empty gutter, then expand and pop in
   together as one motion rather than a static reveal. */
.stage-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), margin-right 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stage-row:hover .stage-row-actions,
.stage-row:focus-within .stage-row-actions {
    width: 26px;
    margin-right: 12px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.stage-order-btns button {
    background: var(--surface);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    width: 26px;
    height: 22px;
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
}

.stage-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 8px;
}

.stage-badge.completed { background: rgba(37, 99, 235, 0.16); color: var(--healthy); }
.stage-badge.current { background: rgba(255, 100, 23, 0.16); color: var(--accent); }
.stage-badge.in_progress { background: rgba(201, 138, 0, 0.16); color: var(--in-progress); }
.stage-badge.qa { background: rgba(124, 58, 237, 0.14); color: var(--qa); }
.stage-badge.repeat { background: rgba(13, 148, 136, 0.14); color: var(--repeat); }
.stage-badge.upcoming { background: var(--page-bg-2); color: var(--muted); }
.stage-badge.blocked { background: rgba(201, 55, 44, 0.14); color: var(--delayed); }
.stage-badge.open { background: rgba(201, 55, 44, 0.14); color: var(--delayed); }
.stage-badge.critical { background: var(--delayed); color: var(--white); }
.stage-badge.non-critical { background: var(--page-bg-2); color: var(--muted); }

.stage-main { flex: 1; }

.stage-main-name { font-weight: 600; font-size: 14.5px; }

.stage-main-desc { color: var(--muted); font-size: 13px; margin: 3px 0 0; }

.modules-block {
    margin-top: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--card-border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.modules-block .module-row,
.modules-block form.stage-edit-form {
    width: 100%;
}

.module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    flex-wrap: wrap;
}

.module-row-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Zero footprint until hovered/focused - width and margin both collapse
   to 0 so there's no permanent empty gutter, then expand and pop in
   together as one motion rather than a static reveal. */
.module-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), margin-right 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.module-row:hover .module-row-actions,
.module-row:focus-within .module-row-actions {
    width: 86px;
    margin-right: 8px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.module-row-name {
    font-weight: 600;
    margin-right: 8px;
}

.module-row-name.is-completed {
    color: var(--muted);
    text-decoration: line-through;
}

.module-row-name.is-in_progress {
    color: var(--in-progress);
}

.module-row-name.is-qa {
    color: var(--qa);
}

.module-row-name.is-repeat {
    color: var(--repeat);
}

.module-row-name.is-blocked {
    color: var(--delayed);
}

.btn-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--card-border);
    background: var(--surface-solid);
    color: var(--muted);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-tick svg {
    width: 13px;
    height: 13px;
}

.btn-tick:hover:not(:disabled) {
    border-color: var(--healthy);
    color: var(--healthy);
    transform: scale(1.08);
}

.btn-tick:active:not(:disabled) {
    transform: scale(0.94);
    transition-duration: 0.08s;
}

.btn-tick:disabled {
    background: var(--healthy);
    border-color: var(--healthy);
    color: var(--white);
    cursor: default;
}

/* A student's own "done" mark on a lesson - same filled look as a
   disabled/completed tick, but stays clickable so they can un-mark it. */
.btn-tick.is-done {
    background: var(--healthy);
    border-color: var(--healthy);
    color: var(--white);
}

/* ---------- Student status dropdown + tick (course journey) ---------- */

.student-progress-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    cursor: default;
}

.student-progress-controls form {
    display: inline-flex;
    margin: 0;
}

.student-progress-controls .btn-tick {
    width: 24px;
    height: 24px;
}

.student-progress-controls .btn-tick.is-done {
    background: linear-gradient(135deg, var(--healthy), color-mix(in srgb, var(--healthy) 65%, #22D3EE));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--healthy) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--healthy) 35%, transparent);
}

/* Colored pill per status - reads at a glance like the journey's pills. */
select.student-status-select {
    width: auto;
    padding: 3px 24px 3px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 999px;
    border: 1.5px solid var(--status-color, var(--card-border));
    color: var(--status-color, var(--muted));
    background-color: color-mix(in srgb, var(--status-color, var(--muted)) 10%, var(--surface-solid));
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

select.student-status-select:hover {
    transform: translateY(-1px);
}

select.student-status-select.is-new { --status-color: var(--muted); }
select.student-status-select.is-in_progress { --status-color: var(--in-progress); }
select.student-status-select.is-blocked { --status-color: var(--delayed); }
select.student-status-select.is-done { --status-color: var(--healthy); }

select.student-status-select option {
    color: var(--text);
    font-weight: 500;
}

.journey-modules .module-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.journey-modules li {
    align-items: center;
}

/* Let the stage name shrink/wrap so the controls never get pushed off. */
.journey-name .student-progress-controls ~ .stage-collapse-chevron,
.journey-name .student-progress-controls {
    flex-shrink: 0;
}

.journey-name:has(.student-progress-controls) .journey-name-text {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 560px) {
    .journey-modules li:has(.student-progress-controls) {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .journey-modules li:has(.student-progress-controls) .module-right {
        margin-left: auto;
        gap: 6px;
    }

    select.student-status-select {
        padding: 3px 18px 3px 8px;
        font-size: 11px;
        background-position: right 4px center;
    }

    .student-progress-controls {
        gap: 4px;
    }

    .journey-name:has(.student-progress-controls) {
        gap: 6px;
    }
}

/* ---------- Course sidebar: progress ring + up next ---------- */

.progress-ring {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 4px auto 0;
}

.progress-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: none;
    stroke-width: 11;
}

.progress-ring-track {
    stroke: var(--card-border);
}

.progress-ring-fill {
    stroke: url(#progress-ring-gradient);
    stroke-linecap: round;
    stroke-dasharray: var(--ring-pct) 100;
    filter: drop-shadow(0 3px 6px rgba(255, 100, 23, 0.35));
}

.progress-ring-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress-ring-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.progress-ring-caption {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.up-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: up-next;
}

.up-next-list li {
    counter-increment: up-next;
}

.up-next-list a {
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
    padding: 9px 12px 9px 42px;
    border-radius: var(--radius-sm);
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.up-next-list a::before {
    content: counter(up-next);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--white);
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
}

.up-next-list li:first-child a {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border));
}

.up-next-list a:hover {
    transform: translateX(3px);
    border-color: var(--accent);
}

.up-next-name {
    font-size: 13px;
    font-weight: 600;
}

.up-next-stage {
    font-size: 11.5px;
    color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
    .progress-ring-fill {
        animation: ringFill 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: 0.2s;
    }

    @keyframes ringFill {
        from { stroke-dasharray: 0 100; }
    }

    .student-progress-controls .btn-tick.is-done {
        animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    .up-next-list li {
        animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .up-next-list li:nth-child(2) { animation-delay: 0.06s; }
    .up-next-list li:nth-child(3) { animation-delay: 0.12s; }
    .up-next-list li:nth-child(4) { animation-delay: 0.18s; }
}

/* ---------- Icon-only Edit/Delete buttons (stage & sub-stage rows) ---------- */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid var(--card-border);
    background: var(--surface-solid);
    color: var(--muted);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-icon svg {
    width: 13px;
    height: 13px;
}

.btn-icon:hover {
    transform: scale(1.08);
}

.btn-icon:active {
    transform: scale(0.94);
    transition-duration: 0.08s;
}

.btn-icon--view:hover,
.btn-icon--edit:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-icon--delete:hover {
    border-color: var(--delayed);
    color: var(--delayed);
}

.status-quick-select {
    width: auto;
    padding: 7px 12px;
    font-size: 12.5px;
}

/* Two-option toggle with no default state - used for the mandatory
   Critical/Non-Critical choice when reporting a bug. */
.toggle-pair {
    display: inline-flex;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    overflow: hidden;
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--muted);
    border-right: 1px solid var(--card-border);
}

.toggle-option:last-child {
    border-right: none;
}

.toggle-option input[type="radio"] {
    width: auto;
    margin: 0;
}

.toggle-option:has(input:checked) {
    color: var(--white);
}

.toggle-option--critical:has(input:checked) {
    background: var(--delayed);
}

.toggle-option--noncritical:has(input:checked) {
    background: var(--healthy);
}

/* Segmented pill-button groups - used for status/critical filters,
   replacing plain <select> dropdowns. */
.filter-group {
    margin-bottom: 12px;
}

.filter-group-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.filter-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-pill:has(input:checked) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.module-row-date {
    color: var(--muted);
    margin-left: 8px;
}

.stage-edit-form {
    padding: 16px;
    margin-top: 10px;
    box-shadow: none;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .grid-2 { grid-template-columns: 1fr; }
}

.timeline-list-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.timeline-list-item:last-child { border-bottom: none; }

.badge-health {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--page-bg-2);
    border: 1px solid var(--card-border);
}

.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--healthy);
    flex-shrink: 0;
}

.health-dot--attention { background: var(--attention-text); }
.health-dot--delayed { background: var(--delayed); }

.dot-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    vertical-align: middle;
}

/* ---------- Streak (collapsed by default - expands on click) ---------- */

.streak-box {
    margin-top: 14px;
}

.streak-box summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 100, 23, 0.10);
    color: var(--accent-dark);
    font-size: 12.5px;
    font-weight: 700;
    user-select: none;
}

:root[data-theme="dark"] .streak-box summary {
    color: var(--accent-light);
}

.streak-box summary::-webkit-details-marker {
    display: none;
}

.streak-box summary svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.sentiment-face--positive { color: var(--healthy); }
.sentiment-face--neutral { color: var(--in-progress); }
.sentiment-face--negative { color: var(--delayed); }

/* ---------- Stakeholder happiness score card ---------- */

.sentiment-card {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--card-border);
}

.sentiment-face-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sentiment-face-badge svg {
    width: 24px;
    height: 24px;
}

.sentiment-face-badge--positive { background: rgba(37, 99, 235, 0.12); }
.sentiment-face-badge--neutral { background: rgba(201, 138, 0, 0.16); }
.sentiment-face-badge--negative { background: rgba(201, 55, 44, 0.12); }

.sentiment-card-body {
    flex: 1;
    min-width: 0;
}

.sentiment-card-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 9px;
}

.sentiment-card-score {
    font-size: 21px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.sentiment-card-score-max {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.sentiment-card-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
}

.sentiment-bar {
    display: flex;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--card-border);
    margin-bottom: 9px;
}

.sentiment-bar-up { background: var(--healthy); }
.sentiment-bar-down { background: var(--delayed); }

.sentiment-counts {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
}

.sentiment-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.sentiment-count svg {
    width: 14px;
    height: 14px;
}

.sentiment-count--up { color: var(--healthy); }
.sentiment-count--down { color: var(--delayed); }

.streak-box-body {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--page-bg-2);
    font-size: 13px;
    color: var(--muted);
}

.streak-box-body p {
    margin: 0;
}

.streak-box-body.is-milestone {
    background: rgba(255, 100, 23, 0.10);
    color: var(--text);
    font-weight: 600;
}

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-card {
    padding: 36px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.login-brand img {
    width: 56px;
    height: 56px;
}

.login-brand .login-brand-name {
    font-weight: 700;
    font-size: 15px;
}

.login-brand .login-brand-sub {
    color: var(--muted);
    font-size: 11.5px;
    text-align: center;
}

.login-card h1 {
    font-size: 19px;
    margin: 0 0 20px;
    text-align: center;
    font-weight: 700;
}

.alert {
    padding: 11px 15px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 18px;
}

.alert-error { background: rgba(201, 55, 44, 0.12); color: var(--delayed); }
.alert-success { background: rgba(37, 99, 235, 0.12); color: var(--healthy); }

.project-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--card-border);
    gap: 12px;
    flex-wrap: wrap;
}

.project-list-item:last-child { border-bottom: none; }

.muted { color: var(--muted); }

.top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------- Nav: theme toggle + avatar menu ---------- */

.theme-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--card-border);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle-floating {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    box-shadow: var(--shadow-md);
}

.floating-nav-actions {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
}

.floating-nav-actions .theme-toggle {
    box-shadow: var(--shadow-md);
}

.theme-toggle-icon--moon { display: none; }
:root[data-theme="dark"] .theme-toggle-icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle-icon--moon { display: block; }

.user-menu {
    position: relative;
}

.avatar-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: var(--white);
    font-weight: 700;
    font-size: 13px;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--shadow-glow);
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    padding: 8px;
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
}

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

.user-menu-info {
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 6px;
}

.user-menu-info strong {
    display: block;
    font-size: 13.5px;
}

.user-menu-info span {
    font-size: 12px;
    color: var(--muted);
}

.user-menu-dropdown a,
.user-menu-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
    background: rgba(255, 100, 23, 0.10);
    text-decoration: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {
    .container,
    .admin-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .card,
    .panel {
        padding: 18px;
        border-radius: var(--radius-md);
    }

    .page-header h1 {
        font-size: 25px;
    }

    .admin-h1 {
        font-size: 20px;
    }

    .health-score-value {
        font-size: 20px;
    }

    .launch-date {
        font-size: 24px;
    }

    .btn,
    .btn-secondary,
    .btn-danger {
        padding: 11px 18px;
    }

    .stage-row,
    .timeline-list-item {
        flex-wrap: wrap;
    }

    .top-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .top-actions .btn-row {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   Motion & micro-interactions
   Entrance animation, hover lift, animated borders, click feedback.
   Everything here is skipped for users who've asked for reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes shimmerSweep {
        0% { transform: translateX(-120%) rotate(8deg); }
        100% { transform: translateX(220%) rotate(8deg); }
    }

    /* `left` (unlike `transform: translateX`) resolves its percentage
       against the containing block, so this actually glides the full
       width of the card instead of just a sliver of the streak's own
       (much narrower) box. */
    @keyframes shimmerGlide {
        0% { left: -45%; }
        42% { left: 130%; }
        100% { left: 130%; }
    }

    @keyframes pulseRing {
        0% { box-shadow: 0 0 0 0 rgba(255, 100, 23, 0.45), var(--shadow-glow); }
        70% { box-shadow: 0 0 0 10px rgba(255, 100, 23, 0), var(--shadow-glow); }
        100% { box-shadow: 0 0 0 0 rgba(255, 100, 23, 0), var(--shadow-glow); }
    }

    @keyframes pulseRingBlocked {
        0% { box-shadow: 0 0 0 0 rgba(201, 55, 44, 0.55); }
        70% { box-shadow: 0 0 0 10px rgba(201, 55, 44, 0); }
        100% { box-shadow: 0 0 0 0 rgba(201, 55, 44, 0); }
    }

    @keyframes blockedPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
    }

    @keyframes focusGlow {
        0% { box-shadow: 0 0 0 0 rgba(255, 100, 23, 0.35); }
        100% { box-shadow: 0 0 0 5px rgba(255, 100, 23, 0); }
    }

    @keyframes popIn {
        0% { transform: scale(0.8); opacity: 0; }
        60% { transform: scale(1.04); opacity: 1; }
        100% { transform: scale(1); }
    }

    /* ---- Entrance: cards & panels settle into place as they render ---- */

    .card,
    .panel {
        animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .card:nth-of-type(2) { animation-delay: 0.05s; }
    .card:nth-of-type(3) { animation-delay: 0.1s; }
    .card:nth-of-type(4) { animation-delay: 0.15s; }
    .card:nth-of-type(5) { animation-delay: 0.2s; }
    .panel:nth-of-type(2) { animation-delay: 0.05s; }
    .panel:nth-of-type(3) { animation-delay: 0.1s; }
    .panel:nth-of-type(4) { animation-delay: 0.15s; }
    .panel:nth-of-type(5) { animation-delay: 0.2s; }

    .journey-row,
    .bug-item,
    .comment-item,
    .standup-entry {
        animation: fadeInUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* ---- Hover lift: anything glassy feels like it responds to you ---- */

    .card,
    .panel,
    .stage-row,
    .module-row,
    .project-list-item,
    .bug-item,
    .comment-item {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.2s ease;
    }

    .card:hover,
    .panel:hover {
        box-shadow: var(--shadow-lg);
    }

    .stage-row:hover,
    .project-list-item:hover,
    .bug-item:hover,
    .comment-item:hover {
        transform: translateX(3px);
    }

    .module-row:hover .module-row-name {
        color: var(--accent);
    }

    /* ---- Buttons: press feedback + brighter hover ---- */

    .btn,
    .btn-secondary,
    .btn-danger {
        transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
    }

    .btn:hover { transform: translateY(-2px) scale(1.015); }
    .btn:active,
    .btn-secondary:active,
    .btn-danger:active {
        transform: scale(0.96);
        transition-duration: 0.08s;
    }

    .btn-secondary:hover { transform: translateY(-1px); }
    .btn-danger:hover { transform: translateY(-1px); }

    .btn-ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.55);
        transform: scale(0);
        animation: btnRipple 0.6s ease-out forwards;
        pointer-events: none;
    }

    @keyframes btnRipple {
        to { transform: scale(2.6); opacity: 0; }
    }

    /* ---- Animated borders ---- */

    input:focus, select:focus, textarea:focus {
        animation: focusGlow 0.6s ease-out;
    }

    input, select, textarea {
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    }

    .launch-card {
        position: relative;
        overflow: hidden;
    }

    .launch-card::after {
        content: "";
        position: absolute;
        top: -60%;
        left: -45%;
        width: 26%;
        height: 220%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
        transform: rotate(8deg);
        animation: shimmerGlide 3.6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
        animation-delay: 1s;
        pointer-events: none;
    }

    .journey-row.is-current .journey-dot {
        animation: pulseRing 2.2s ease-out infinite;
    }

    .journey-row.is-blocked .journey-dot {
        animation: pulseRingBlocked 1.6s ease-out infinite;
    }

    .stage-badge.blocked,
    .module-row-name.is-blocked,
    .journey-current-pill--blocked,
    .journey-blocked-tag {
        animation: blockedPulse 1.6s ease-in-out infinite;
    }

    .badge-health,
    .stage-badge,
    .journey-current-pill,
    .filter-pill,
    .toggle-option {
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .filter-pill:hover,
    .toggle-option:hover {
        transform: translateY(-1px);
        border-color: var(--accent);
    }

    .badge-health:hover,
    .stage-badge:hover {
        transform: scale(1.05);
    }

    /* ---- Progress bar: shimmer + animated fill ---- */

    .progress-fill {
        position: relative;
        overflow: hidden;
        transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .progress-fill::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        animation: shimmerSweep 2.4s ease-in-out infinite;
    }

    /* ---- Nav & avatar ---- */

    .theme-toggle,
    .avatar-btn {
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    }

    .theme-toggle:hover { transform: rotate(-12deg) scale(1.08); }
    .avatar-btn:hover { transform: scale(1.08); box-shadow: var(--shadow-glow); }

    .admin-nav-inner .brand img,
    .page-brand img {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .admin-nav-inner .brand:hover img,
    .page-brand:hover img {
        transform: rotate(-8deg) scale(1.1);
    }

    .user-menu-dropdown {
        animation: popIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* ---- Journey checkmarks: little pop when they land ---- */

    .journey-row.is-completed .journey-dot,
    .module-row-name.is-completed,
    li.is-completed .module-name {
        animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
}

/* ---------- Celebration FX (sparkle / bug / hammer) ---------- */
/* Spawned by confetti.js only when motion is allowed, so no
   prefers-reduced-motion gate is needed here - they're just never
   inserted into the DOM when the user has asked for reduced motion. */

@keyframes sparkleTwinkle {
    0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; }
    35% { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(1.15) rotate(120deg); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.25) rotate(210deg); opacity: 0; }
}

.fx-sparkle {
    animation: sparkleTwinkle 0.75s ease-out forwards;
}

@keyframes bugScuttle {
    0% { transform: translate(-13px, -13px) scale(0.4); opacity: 0; }
    18% { transform: translate(-13px, -13px) scale(1); opacity: 1; }
    38% { transform: translate(-3px, -18px) scale(1); }
    58% { transform: translate(-21px, -10px) scale(1); }
    78% { transform: translate(-8px, -14px) scale(1); }
    100% { transform: translate(-13px, -13px) scale(0.7); opacity: 0; }
}

.fx-bug {
    animation: bugScuttle 1.1s ease-in-out forwards;
}

@keyframes hammerDrop {
    0% { transform: translate(-54px, -74px) rotate(-75deg); opacity: 0; }
    45% { transform: translate(-14px, -24px) rotate(-25deg); opacity: 1; }
    58% { transform: translate(-14px, -8px) rotate(2deg); }
    70% { transform: translate(-14px, -18px) rotate(-10deg); }
    82% { transform: translate(-14px, -8px) rotate(2deg); }
    100% { transform: translate(-14px, -8px) rotate(2deg); opacity: 0; }
}

.fx-hammer {
    animation: hammerDrop 0.65s cubic-bezier(0.55, 0, 0.55, 1) forwards;
}

@keyframes hammerImpact {
    0% { transform: translate(-15px, -6px) scale(0.3); opacity: 0.7; }
    100% { transform: translate(-15px, -6px) scale(2.4); opacity: 0; }
}

.fx-hammer-impact {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--delayed);
    animation: hammerImpact 0.45s ease-out forwards;
}