s/* ============================================================
   AI Architecture Guidance — Section-Specific Styles
   Imported after /styles.css for theme variables
   ============================================================ */

/* ---- Audience Mode Toggle ---- */
.audience-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.5rem;
    padding: 0.15rem;
    gap: 0.15rem;
}
.audience-toggle-btn {
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 0.375rem;
    transition: all 0.15s;
    border: none;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}
.audience-toggle-btn.active {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}
.audience-toggle-btn:not(.active):hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

/* ---- Instructor Panel ---- */
.instructor-toggle-btn {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 40px;
    height: 60px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-right: none;
    border-radius: 0.5rem 0 0 0.5rem;
    background: var(--bg-card);
    color: #fbbf24;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
}
.instructor-toggle-btn:hover {
    width: 46px;
    border-color: rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.08);
}
.instructor-toggle-btn i {
    font-size: 1rem;
}
.instructor-arrow {
    font-size: 0.7rem !important;
    animation: arrow-pulse 2s ease-in-out infinite;
}
body.instructor-open .instructor-arrow {
    animation: none;
}
@keyframes arrow-pulse {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-2px); opacity: 0.5; }
}

.instructor-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    z-index: 200;
    background: var(--bg-surface);
    border-left: 1px solid rgba(251, 191, 36, 0.2);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 2rem 1.5rem;
}
.instructor-panel.open { right: 0; }
.instructor-panel-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: var(--text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.instructor-panel-close:hover { background: var(--bg-card); color: var(--text-primary); }
.instructor-section { margin-bottom: 1.75rem; }
.instructor-section h4 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fbbf24;
    margin-bottom: 0.6rem;
}
.instructor-section p { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }
.instructor-section ul { list-style: none; padding: 0; }
.instructor-section ul li {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.35rem 0 0.35rem 1.25rem;
    position: relative;
    line-height: 1.5;
}
.instructor-section ul li::before {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #fbbf24;
    font-size: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 768px) {
    .instructor-panel { width: 100%; right: -100%; }
    .instructor-toggle-btn { top: auto; bottom: 1rem; right: 1rem; }
}

/* ---- FIX: Push body content left when instructor panel is open (desktop) ---- */
@media (min-width: 1024px) {
    body.instructor-open main,
    body.instructor-open nav.sticky {
        margin-right: 400px;
        transition: margin-right 0.3s ease;
    }
    body.instructor-open .instructor-toggle-btn {
        right: 400px;
        transition: right 0.3s ease;
    }
    body.instructor-open .floating-actions {
        right: 420px;
        transition: right 0.3s ease;
    }
    nav.sticky {
        transition: margin-right 0.3s ease;
    }
}

/* ---- Floating Action Buttons ---- */
.floating-actions {
    position: fixed;
    bottom: 1.5rem;
    right: 1rem;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: right 0.3s ease;
}
.fab-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    border: 1px solid var(--border-mid);
    backdrop-filter: blur(12px);
}
.fab-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.fab-export { color: var(--text-muted); background: var(--bg-card); }
.fab-brief { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent); }
.floating-actions.hidden { opacity: 0; pointer-events: none; transform: translateY(1rem); }
.floating-actions { transition: opacity 0.25s ease, transform 0.25s ease, right 0.3s ease; }
@media (max-width: 640px) {
    .fab-btn span { display: none; }
    .fab-btn { padding: 0.6rem 0.7rem; }
}

/* ---- Lifecycle Badge ---- */
.lifecycle-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--border-mid);
}
.lifecycle-badge.status-active { color: #34d399; border-color: rgba(52, 211, 153, 0.3); background: rgba(52, 211, 153, 0.08); }
.lifecycle-badge.status-planned { color: var(--text-subtle); border-style: dashed; }
.lifecycle-badge.status-needs-review { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.08); }
.lifecycle-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---- Regulation Tag Badges ---- */
.tag-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 0.25rem;
    letter-spacing: 0.03em;
}
.tag-badge.regulated { color: #f87171; background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.25); }
.tag-badge.practice { color: #60a5fa; background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.25); }

/* ---- Constraints Matrix ---- */
.constraints-matrix {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.75rem;
    overflow: hidden;
}
.constraints-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.85rem;
}
.constraints-row:last-child { border-bottom: none; }
.constraints-row .constraint-type {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: auto;
    min-width: 130px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    padding-top: 0;
}
.constraints-row .constraint-type.regulatory { color: #f87171; }
.constraints-row .constraint-type.technical { color: #00d4ff; }
.constraints-row .constraint-type.economic { color: #fbbf24; }
.constraints-row .constraint-type.operational { color: #a78bfa; }
.constraints-row .constraint-type.workforce { color: #34d399; }
.constraints-row .constraint-text { color: var(--text-muted); line-height: 1.5; }

/* ---- Budget Cost Cards ---- */
.budget-card {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.budget-deterministic-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 2fr);
    gap: 0.75rem 1rem;
    align-items: start;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.82rem;
}
.budget-deterministic-item:last-child { border-bottom: none; }
.budget-deterministic-item .item-name {
    color: var(--text-muted);
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.budget-deterministic-item .item-cost {
    font-weight: 700;
    color: var(--accent);
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
    text-align: right;
}
@media (max-width: 640px) {
    .budget-deterministic-item {
        grid-template-columns: 1fr;
    }
    .budget-deterministic-item .item-cost {
        text-align: left;
    }
}
.budget-tier-range {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.budget-tier-box {
    text-align: center;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
}
.budget-tier-box .tier-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; color: var(--text-subtle); letter-spacing: 0.05em; }
.budget-tier-box .tier-value { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); margin-top: 0.2rem; }

/* ---- Citation Cards ---- */
.citation-card {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.625rem;
    padding: 0.85rem 1rem;
    transition: border-color 0.15s;
}
.citation-card:hover { border-color: rgba(var(--accent-rgb), 0.3); }
.citation-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 0.25rem;
}
.tier-1 { color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.25); }
.tier-2 { color: #00d4ff; background: rgba(0, 212, 255, 0.1); border: 1px solid rgba(0, 212, 255, 0.25); }
.tier-3 { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.25); }
.tier-4 { color: var(--text-subtle); background: var(--bg-elevated); border: 1px solid var(--border-mid); }

/* ---- Dashboard Specific ---- */
.workflow-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.625rem;
    transition: all 0.15s;
    text-decoration: none;
    color: inherit;
}
.workflow-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-1px);
}
.workflow-card.viewed { opacity: 0.7; }
.workflow-card .wf-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: 0.18rem 0.35rem;
    border-radius: 999px;
    color: #67e8f9;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.28);
    font-size: 0.7rem;
    font-weight: 800;
    font-family: monospace;
    flex-shrink: 0;
}
[data-theme="light"] .workflow-card .wf-id {
    color: #075985;
    background: rgba(2, 132, 199, 0.1);
    border-color: rgba(2, 132, 199, 0.28);
}
.workflow-card .wf-title { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; }
.workflow-card .wf-badges { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.workflow-card.execution-card {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem 1rem;
}
.workflow-card.execution-card .wf-id {
    width: auto;
    padding-top: 0.12rem;
}
.execution-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}
.workflow-card.execution-card .wf-title {
    display: block;
    max-width: 100%;
    line-height: 1.35;
    width: 100%;
    overflow-wrap: anywhere;
}
.workflow-card.execution-card .wf-badges {
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: 100%;
}
.workflow-card .execution-rationale {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.workflow-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .workflow-list-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.view-toggle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-soft);
}
.guidance-view-toggle {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.2rem;
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    background: var(--bg-card);
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.15s;
    white-space: nowrap;
}
.view-toggle-btn:hover {
    color: var(--accent);
}
.view-toggle-btn.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
}

/* ---- Guidance Index Pull-Out Controls Panel ---- */
.guidance-controls-handle {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 160;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 46px;
    min-height: 78px;
    padding: 0.6rem 0.35rem;
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-right: none;
    border-radius: 0.75rem 0 0 0.75rem;
    background: var(--bg-card);
    color: var(--accent);
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: right 0.25s ease, width 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.guidance-controls-handle:hover {
    width: 52px;
    border-color: rgba(0, 212, 255, 0.65);
    background: rgba(var(--accent-rgb), 0.1);
}
.guidance-controls-handle .guidance-controls-main-icon {
    font-size: 1rem;
}
.guidance-controls-arrow {
    font-size: 0.72rem;
    animation: guidance-control-arrow-open 1.8s ease-in-out infinite;
}
body.guidance-controls-open .guidance-controls-handle {
    right: min(360px, calc(100vw - 3rem));
}
body.guidance-controls-open .guidance-controls-arrow {
    animation-name: guidance-control-arrow-close;
}
@keyframes guidance-control-arrow-open {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(-3px); opacity: 0.55; }
}
@keyframes guidance-control-arrow-close {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(3px); opacity: 0.55; }
}
.guidance-controls-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 155;
    width: 360px;
    max-width: calc(100vw - 3rem);
    height: 100vh;
    padding: 5.25rem 1rem 1.25rem;
    overflow-y: auto;
    background: var(--bg-surface);
    border-left: 1px solid rgba(0, 212, 255, 0.24);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
body.guidance-controls-open .guidance-controls-panel {
    transform: translateX(0);
}
.guidance-controls-backdrop {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.guidance-controls-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.guidance-controls-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
}
.guidance-controls-header p,
.guidance-control-helper {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}
.guidance-controls-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid var(--border-mid);
    border-radius: 0.5rem;
    color: var(--text-muted);
    background: var(--bg-card);
    cursor: pointer;
}
.guidance-controls-close:hover {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.35);
}
.guidance-control-group {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--border-soft);
}
.guidance-control-group.is-secondary {
    opacity: 0.9;
}
.guidance-control-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-subtle);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.guidance-control-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.guidance-controls-panel .guidance-control-chip-grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}
.guidance-controls-panel .guidance-control-chip-grid .filter-chip {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    line-height: 1.25;
}
.guidance-controls-panel .guidance-control-chip-grid .filter-chip i {
    flex-shrink: 0;
}
.guidance-controls-panel .guidance-view-toggle {
    flex-wrap: wrap;
    border-radius: 0.75rem;
}
.guidance-controls-panel .search-input {
    font-size: 0.82rem;
}

@media (min-width: 900px) {
    .guidance-controls-backdrop {
        display: none;
    }
}
@media (max-width: 640px) {
    body.guidance-controls-open .guidance-controls-handle {
        right: calc(100vw - 3rem);
    }
    .guidance-controls-panel {
        width: calc(100vw - 3rem);
    }
}

.execution-intro {
    border-left: 3px solid var(--accent);
}
.domain-intro {
    border-left: 3px solid var(--accent);
}
.domain-legend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    color: var(--text-muted);
}
.domain-legend::before {
    content: '\f05a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--accent);
}
.domain-section {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--domain-color, var(--accent));
    border-radius: 0.875rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--domain-color, #00d4ff) 8%, transparent), transparent 42%), var(--bg-surface);
}
.domain-section-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.domain-section-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--domain-color, var(--accent));
    border: 1px solid color-mix(in srgb, var(--domain-color, #00d4ff) 50%, transparent);
    background: color-mix(in srgb, var(--domain-color, #00d4ff) 12%, transparent);
}
.domain-section-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
}
.domain-section-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}
.domain-section-count {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-subtle);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.domain-section .workflow-list-grid {
    margin-top: 0.25rem;
}
.execution-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.85rem;
    color: var(--text-muted);
}
.recommended-start-panel {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-left: 3px solid #00d4ff;
    border-radius: 0.875rem;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.12), transparent 38%), var(--bg-surface);
}
.recommended-start-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.recommended-start-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.35);
}
.recommended-start-header h2 {
    margin: 0 0 0.3rem 0;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
}
.recommended-start-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.83rem;
    line-height: 1.55;
}
.recommended-start-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
}
.recommended-start-step {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
}
.recommended-start-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.28);
    font-size: 0.75rem;
    font-weight: 800;
}
@media (min-width: 900px) {
    .recommended-start-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.execution-stage {
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--stage-color, var(--accent));
    border-radius: 0.875rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--stage-color, #00d4ff) 8%, transparent), transparent 42%), var(--bg-surface);
}
.execution-stage-header {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.execution-stage-number {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--stage-color, var(--accent));
    border: 1px solid color-mix(in srgb, var(--stage-color, #00d4ff) 50%, transparent);
    background: color-mix(in srgb, var(--stage-color, #00d4ff) 12%, transparent);
    font-weight: 800;
    font-size: 0.8rem;
}
.execution-stage-header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 800;
}
.execution-stage-header h2 i {
    color: var(--stage-color, var(--accent));
}
.execution-stage-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}
.execution-stage-header .execution-stage-note {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.45rem;
    color: var(--text-subtle);
    font-size: 0.74rem;
}
.execution-stage-header .execution-stage-note i {
    color: var(--stage-color, var(--accent));
    margin-top: 0.15rem;
}
.execution-stage-count {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-subtle);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}
.execution-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid var(--border-mid);
}
.execution-badge.foundation,
.execution-badge.start { color: #00d4ff; background: rgba(0, 212, 255, 0.1); border-color: rgba(0, 212, 255, 0.28); }
.execution-badge.requires { color: #f87171; background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.25); }
.execution-badge.conditional { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.25); }
.execution-badge.advisory { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.25); }
.execution-badge.audience { color: #60a5fa; background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.25); }
.execution-badge.recommends { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.25); }
.execution-badge.trigger { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.25); }
.execution-badge.parallel { color: #34d399; background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.25); }
.execution-popover-trigger {
    position: relative;
    cursor: help;
    outline: none;
}
.execution-popover-trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
}
.execution-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 80;
    display: none;
    width: min(22rem, 80vw);
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 0.625rem;
    color: var(--text-primary);
    background: var(--bg-surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.45;
    white-space: normal;
    pointer-events: none;
}
.execution-popover strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #fbbf24;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.execution-popover-list {
    display: grid;
    gap: 0.35rem;
}
.execution-popover-list span {
    display: block;
    color: var(--text-muted);
}
.execution-popover-list b {
    color: var(--text-primary);
}
.execution-popover-trigger:hover .execution-popover,
.execution-popover-trigger:focus .execution-popover,
.execution-popover-trigger:focus-visible .execution-popover {
    display: block;
}

@media (max-width: 640px) {
    .workflow-card.execution-card {
        grid-template-columns: 1fr;
    }
    .workflow-card.execution-card .wf-badges {
        justify-content: flex-start;
    }
    .execution-stage-header {
        flex-wrap: wrap;
    }
    .domain-section-header {
        flex-wrap: wrap;
    }
    .execution-stage-count {
        margin-left: 2.85rem;
    }
    .domain-section-count {
        margin-left: 2.85rem;
    }
}

.search-input {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.5rem;
    transition: border-color 0.15s;
}
.search-input:focus { outline: none; border-color: var(--accent); }
.search-input::placeholder { color: var(--text-subtle); }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-chip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.3); }
.filter-chip.active { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.standards-browser-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    color: inherit;
    background: transparent;
    border: none;
    cursor: pointer;
}
.standards-browser-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.standards-browser-subtitle {
    display: block;
    max-width: 56rem;
    margin-top: 0.35rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.standards-browser-toggle-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    transition: transform 0.18s ease;
}
.standards-browser-toggle[aria-expanded="true"] .standards-browser-toggle-icon { transform: rotate(180deg); }
.standards-browser-content {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-soft);
}
.standards-browser-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1rem;
}
.standards-browser-search-wrap { width: 100%; }
.standards-browser-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.standards-browser-summary span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
}
.standards-browser-summary strong { color: var(--accent); }
.standards-browser-grid {
    display: grid;
    grid-template-columns: 1fr;     /* mobile: 1 column */
    gap: 1rem;
}
@media (min-width: 640px) and (max-width: 1399px) {   /* tablet & desktop: exactly 2 columns */
    .standards-browser-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1400px) {       /* ultra-wide: 3 columns */
    .standards-browser-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.standard-browser-card {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.75rem;
    padding: 1.05rem 1.1rem;
    transition: border-color 0.15s, transform 0.15s;
}
.standard-browser-card:hover { border-color: rgba(var(--accent-rgb), 0.3); transform: translateY(-1px); }
.standard-browser-card-head {
    margin-bottom: 0.65rem;
}
.standard-browser-title-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.standard-browser-title-block .standard-code {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.18rem 0.55rem;
    border-radius: 0.375rem;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html[data-theme="light"] .standard-browser-title-block .standard-code {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.35);
}
.standard-browser-card h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.standard-browser-type-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -0.2rem 0 0.65rem;
}
.standard-browser-type-row .standard-formal-badge,
.standard-browser-type-row .standard-informal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.1;
    white-space: nowrap;
}
.standard-browser-type-row .standard-formal-badge {
    color: #34d399;
}
.standard-browser-type-row .standard-informal-badge {
    color: #c084fc;
}
.standard-browser-type-row .standard-formal-badge i,
.standard-browser-type-row .standard-informal-badge i,
.standard-browser-meta i,
.standard-browser-group-chip i {
    margin-right: 0.12rem;
    flex-shrink: 0;
}
.standard-browser-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.standard-browser-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.standard-browser-group-chip i { font-size: 0.62rem; flex-shrink: 0; }
.standard-browser-group-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.standard-browser-desc {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.85rem;
}
.standard-browser-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
}
.standard-browser-meta .standard-formal-badge,
.standard-browser-meta .standard-informal-badge,
.standard-browser-meta .standard-scope-badge,
.standard-browser-meta .standard-related-chip,
.standard-browser-meta .lifecycle-badge {
    gap: 0.42rem;
    font-size: 0.6rem;
    line-height: 1;
    white-space: nowrap;
}
.standard-browser-workflows {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.75rem;
}
.standard-workflow-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.5rem;
    color: var(--text-muted);
    background: var(--bg-elevated);
    text-decoration: none;
    font-size: 0.73rem;
    line-height: 1.3;
}
.standard-workflow-chip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.3); }
.standard-workflow-chip span:nth-child(2) { flex: 1; color: var(--text-secondary); }
.standard-browser-empty {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-subtle);
}
.standard-browser-source {
    display: inline-flex;
    align-items: center;
    margin-top: 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
}
.standard-browser-source:hover { text-decoration: underline; }

@media (min-width: 900px) {
    .standards-browser-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
    .standards-browser-search-wrap { max-width: 28rem; }
}

/* ---- Step Items ---- */
.workflow-step {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: 0.625rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.workflow-step p {
    line-height: 1.7;
    margin-bottom: 0.75rem;
}
.workflow-step p:last-child {
    margin-bottom: 0;
}
.workflow-step .checklist-item {
    padding: 0.5rem 0;
    line-height: 1.5;
}
.workflow-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.checklist-item input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--accent);
}

/* ---- Mermaid Container (reuse from existing pages) ---- */
.mermaid-container {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 0.75rem;
    padding: 1rem;
    overflow-x: auto;
    text-align: center;
    min-height: 4rem;
}
.mermaid-container svg {
    display: inline-block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    vertical-align: top;
}

/* ---- Audience-specific content visibility ---- */
.architect-only { display: none; }
body[data-audience="architect"] .architect-only { display: block; }
body[data-audience="architect"] .decision-maker-only { display: none; }
body[data-audience="decision-maker"] .decision-maker-only { display: block; }

/* ---- Workflow Audience Summary Spacing ---- */
#audience-summary-section .architect-only {
    margin-top: 1rem;
}

/* ---- FIX: Larger KPI Stat Values ---- */
.stat-card .stat-value,
.stat-card [class*="stat-value"] {
    font-size: 2.5rem !important;
    font-weight: 800;
}

/* ---- FIX: Budget text readable in both themes ---- */
.budget-card p,
.budget-card .text-xs,
#budget-costs .text-xs {
    color: var(--text-muted) !important;
    line-height: 1.55;
}
#budget-costs h3 {
    color: var(--text-secondary);
}

/* ---- FIX: Sticky Search/Filter Bar (Dashboard) ---- */
.sticky-search-bar {
    position: sticky;
    top: 4rem;
    z-index: 35;
    background: var(--bg-surface, var(--bg-elevated, #111827));
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.75rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
[data-theme="light"] .sticky-search-bar {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(15,23,39,0.06);
}

/* ---- FIX: Jump-To Bar (Workflow Pages) ---- */
.jump-to-bar {
    position: sticky;
    top: 4rem;
    z-index: 40;
    background: var(--bg-surface, var(--bg-elevated, #111827));
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.5rem 0;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
.jump-to-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    transition: all 0.15s;
    white-space: nowrap;
    text-decoration: none;
}
.jump-to-link:hover {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05);
}

/* ---- FIX: Step tag badge after title ---- */
.workflow-step .step-tag {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* ---- FIX: Mermaid node text contrast ----
   Default Mermaid nodes use theme-aware fills: dark slate in dark mode and a
   light neutral fill in light mode. Keep labels aligned with that palette so
   unstyled shapes such as Start and enrichment steps remain readable after a
   theme switch. Explicit workflow style directives that set their own node
   colors still win for colored success/risk/failure/AI nodes. */
.mermaid-container foreignObject {
    overflow: visible !important;
}
.mermaid-container .nodeLabel,
.mermaid-container .nodeLabel div,
.mermaid-container .nodeLabel span,
.mermaid-container .nodeLabel p,
.mermaid-container .nodeLabel text,
.mermaid-container .nodeLabel tspan {
    color: #ffffff !important;
    fill: #ffffff !important;
    -webkit-text-stroke: 1px rgba(0,0,0,0.7);
    paint-order: stroke fill;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .mermaid-container .node:not([style*="fill:"]) .nodeLabel,
html[data-theme="light"] .mermaid-container .node:not([style*="fill:"]) .nodeLabel div,
html[data-theme="light"] .mermaid-container .node:not([style*="fill:"]) .nodeLabel span,
html[data-theme="light"] .mermaid-container .node:not([style*="fill:"]) .nodeLabel p,
html[data-theme="light"] .mermaid-container .node:not([style*="fill:"]) .nodeLabel text,
html[data-theme="light"] .mermaid-container .node:not([style*="fill:"]) .nodeLabel tspan {
    color: #0f172a !important;
    fill: #0f172a !important;
    -webkit-text-stroke: 0 transparent !important;
    paint-order: normal;
    text-shadow: none !important;
}
/* Edge labels (Yes/No decision text) — opaque theme-aware background cuts the
   connecting line, and var(--text-strong) gives maximum foreground contrast
   in both dark (pure white) and light (near-black) modes. (plan 026) */
.mermaid-container .edgeLabel {
    background: #0f172a !important;
}
.mermaid-container .edgeLabel,
.mermaid-container .edgeLabel foreignObject,
.mermaid-container .edgeLabel span,
.mermaid-container .edgeLabel div,
.mermaid-container .edgeLabel p,
.mermaid-container .edgeLabel text,
.mermaid-container .edgeLabel tspan {
    fill: #f8fafc !important;
    color: #f8fafc !important;
}
html[data-theme="light"] .mermaid-container .edgeLabel,
html[data-theme="light"] .mermaid-container .edgeLabel foreignObject,
html[data-theme="light"] .mermaid-container .edgeLabel span,
html[data-theme="light"] .mermaid-container .edgeLabel div,
html[data-theme="light"] .mermaid-container .edgeLabel p,
html[data-theme="light"] .mermaid-container .edgeLabel text,
html[data-theme="light"] .mermaid-container .edgeLabel tspan {
    fill: #0f172a !important;
    color: #0f172a !important;
    background: #ffffff !important;
}
/* Mermaid sometimes renders the edge-label background as a rect/path; cover it. */
.mermaid-container .edgeLabel rect,
.mermaid-container .edgeLabel path,
.mermaid-container .edgeLabel .labelBkg {
    fill: #0f172a !important;
    stroke: #334155 !important;
}
html[data-theme="light"] .mermaid-container .edgeLabel rect,
html[data-theme="light"] .mermaid-container .edgeLabel path,
html[data-theme="light"] .mermaid-container .edgeLabel .labelBkg {
    fill: #ffffff !important;
    stroke: #d6cdbf !important;
}

/* ============================================================
   Standards & References Panel (plan 026)
   ============================================================ */

/* Partition sub-heading: "Formal Standards" / "Advisory Frameworks & Legislation" */
.standards-partition-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-subtle);
    margin: 1.1rem 0 0.6rem;
}
.standards-partition-title:first-child { margin-top: 0; }
.standards-partition-title i { font-size: 0.8rem; }

/* Geographic scope group wrapper */
.standards-scope-group { margin-bottom: 0.9rem; }
.standards-scope-header {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.45rem;
    letter-spacing: 0.03em;
}

/* The card surface (mirrors .citation-card conventions) */
.standard-card {
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-left: 3px solid var(--border-mid);
    border-radius: 0.625rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    transition: border-color 0.15s;
}
.standard-card:hover { border-color: rgba(var(--accent-rgb), 0.3); }
.standard-card .standard-code-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.standard-card .standard-name {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.standard-card .standard-code {
    display: inline-block;
    font-size: 0.86rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 0.375rem;
    padding: 0.18rem 0.55rem;
    letter-spacing: 0.02em;
    margin-left: auto;
    word-break: break-word;
    line-height: 1.45;
}

/* Light-mode refinement: the accent chip can look thin on creamy cards,
   so strengthen the border and deepen the tint slightly for contrast. */
html[data-theme="light"] .standard-card .standard-code {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.35);
}

/* Lift the official name slightly so the accent code chip reads as the
   scannable identifier without competing for weight. */
.standard-card .standard-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}
.standard-card .standard-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 0.45rem;
}
.standard-card .standard-relevance {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    padding: 0.45rem 0.6rem;
    border-radius: 0.375rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    margin-bottom: 0.45rem;
}
.standard-card .standard-relevance::before {
    content: "\f0eb"; /* fa-lightbulb */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent);
    margin-right: 0.4rem;
    opacity: 0.8;
}
.standard-card .standard-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
    font-size: 0.68rem;
    color: var(--text-subtle);
}
.standard-card .standard-source-link {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}
.standard-card .standard-source-link:hover { text-decoration: underline; }
.standard-card .standard-related-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 0.25rem;
}

/* Applicability badges — color-coded binding strength */
.applicability-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0.25rem;
}
.applicability-badge.mandatory {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
}
.applicability-badge.regulated {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.applicability-badge.recommended {
    color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
}
.applicability-badge.advisory {
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-mid);
}
.applicability-badge.applicable {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.3);
}

/* Formal vs non-standard distinction badge */
.standard-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.08rem 0.45rem;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 0.25rem;
}
.standard-type-badge.formal {
    color: #34d399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.standard-type-badge.informal {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.1);
    border: 1px solid rgba(192, 132, 252, 0.25);
}

/* Geographic scope badge */
.standard-scope-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.08rem 0.45rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: 0.25rem;
}

/* Lifecycle warning for superseded/draft standards */
.standard-lifecycle-warn {
    color: #fbbf24;
    font-weight: 600;
}

/* Left border accent color per applicability (reinforces the badge) */
.standard-card[data-applicability="mandatory"] { border-left-color: #f87171; }
.standard-card[data-applicability="regulated"] { border-left-color: #fbbf24; }
.standard-card[data-applicability="recommended"] { border-left-color: #00d4ff; }
.standard-card[data-applicability="applicable"] { border-left-color: #a78bfa; }
.standard-card[data-applicability="advisory"] { border-left-color: var(--border-mid); }

/* ============================================================
   Sticky Section Jump Bar — fit all links on one row, no scroll
   (plan 026: Standards link added a 9th button)
   Overrides the inline overflow-x-auto/whitespace-nowrap utilities.
   ============================================================ */
nav[aria-label="Jump to workflow sections"] > div {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    white-space: normal !important;
    gap: 0.4rem !important;
    row-gap: 0.4rem !important;
    justify-content: flex-start;
    padding-bottom: 0.1rem !important;
}
nav[aria-label="Jump to workflow sections"] a {
    padding: 0.3rem 0.6rem !important;
    font-size: 0.7rem !important;
    white-space: nowrap;
}
/* Keep the "Jump to" label from wrapping awkwardly */
nav[aria-label="Jump to workflow sections"] > div > span:first-child {
    flex-shrink: 0;
}

/* ---- Workforce Augmentation Panel ---- */
.augmentation-panel{margin-top:.65rem;border:1px solid rgba(96,165,250,.3);border-radius:.625rem;background:rgba(96,165,250,.05);overflow:hidden}
.augmentation-summary{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;font-size:.75rem;font-weight:700;color:#60a5fa;cursor:pointer;list-style:none;transition:background .15s}
.augmentation-summary::-webkit-details-marker{display:none}
.augmentation-summary::before{content:'\f054';font-family:'Font Awesome 6 Free';font-weight:900;font-size:.65rem;transition:transform .15s}
.augmentation-panel[open] .augmentation-summary::before{transform:rotate(90deg)}
.augmentation-summary:hover{background:rgba(96,165,250,.1)}
.augmentation-body{padding:.65rem .85rem .85rem;border-top:1px solid rgba(96,165,250,.2)}
.augmentation-hypothesis{font-size:.8rem;color:var(--text-secondary);line-height:1.55;margin:0 0 .6rem}
.augmentation-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:999px;font-size:.65rem;font-weight:700;color:#60a5fa;background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.25);margin-bottom:.55rem}
.augmentation-section-label{display:flex;align-items:center;gap:.35rem;margin:.55rem 0 .3rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.augmentation-section-label i{color:#60a5fa}
.augmentation-risk-label i{color:#f87171}
.augmentation-list{list-style:none;padding:0;margin:0}
.augmentation-list li{padding:.2rem 0 .2rem 1rem;font-size:.75rem;color:var(--text-muted);line-height:1.45;position:relative}
.augmentation-list li::before{content:'\f111';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;left:0;top:.35rem;font-size:.35rem;color:#60a5fa}
.augmentation-risk-list li::before{color:#f87171}
.augmentation-risk-list li{color:rgba(248,113,113,.85)}
.augmentation-residual{display:flex;align-items:flex-start;gap:.35rem;margin-top:.55rem;padding:.5rem .65rem;border-radius:.4rem;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.2);font-size:.75rem;color:var(--text-secondary);line-height:1.5}
.augmentation-residual i{color:#34d399;margin-top:.15rem;flex-shrink:0}
.augmentation-disclaimer{display:flex;align-items:flex-start;gap:.35rem;margin-top:.55rem;padding:.5rem .65rem;border-radius:.4rem;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);font-size:.72rem;color:var(--text-muted);line-height:1.5}
.augmentation-disclaimer i{color:#fbbf24;margin-top:.15rem;flex-shrink:0}
.augmentation-disclaimer a{color:var(--accent);font-weight:700;text-decoration:none}
.augmentation-disclaimer a:hover{text-decoration:underline}

.augmentation-notfit-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .5rem;border-radius:999px;font-size:.62rem;font-weight:700;color:#f87171;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);cursor:help;vertical-align:middle;margin-left:.3rem}
.augmentation-moderate{border-color:rgba(251,191,36,.35)!important;background:rgba(251,191,36,.05)!important}
.augmentation-summary-moderate{color:#fbbf24!important}
.augmentation-summary-moderate:hover{background:rgba(251,191,36,.1)!important}
.augmentation-caveat{display:flex;align-items:flex-start;gap:.35rem;padding:.5rem .65rem;border-radius:.4rem;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.2);font-size:.75rem;color:var(--text-secondary);line-height:1.5;margin-bottom:.5rem}
.augmentation-caveat i{color:#fbbf24;margin-top:.15rem;flex-shrink:0}

/* ---- Workflow ROI Calculator ---- */
body.roi-calc-open { overflow: hidden; }
.roi-calc-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .65rem .9rem; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: .55rem;
    background: rgba(var(--accent-rgb), .1); color: var(--accent); font-size: .8rem; font-weight: 800; cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s;
}
.roi-calc-trigger:hover { transform: translateY(-1px); background: rgba(var(--accent-rgb), .16); border-color: var(--accent); }
.budget-section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.budget-section-header h2 { margin-bottom: 0 !important; }
.budget-section-header .roi-calc-trigger { flex-shrink: 0; }
.roi-calc-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 6, 23, .72); backdrop-filter: blur(10px); }
.roi-calc-overlay[hidden] { display: none; }
.roi-calc-modal { display: flex; flex-direction: column; width: min(72rem, 100%); max-height: 88vh; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .52); border-radius: 1rem; background: var(--bg-surface); box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .65), 0 0 0 1px rgba(0,0,0,.28), 0 0 2.5rem rgba(var(--accent-rgb), .12); outline: none; }
.roi-calc-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid rgba(var(--accent-rgb), .22); background: rgba(var(--bg-primary-rgb), .98); backdrop-filter: blur(12px); }
.roi-calc-eyebrow { margin: 0 0 .2rem; color: var(--accent); font: 800 .67rem ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.roi-calc-header h2 { margin: 0; color: var(--text-primary); font-size: 1.1rem; font-weight: 800; }
.roi-calc-domain { display: inline-flex; margin-top: .45rem; padding: .12rem .45rem; border: 1px solid var(--border-mid); border-radius: 999px; color: var(--text-muted); font-size: .67rem; }
.roi-calc-close { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border-mid); border-radius: .5rem; background: transparent; color: var(--text-muted); cursor: pointer; }
.roi-calc-close:hover { color: var(--text-primary); background: var(--bg-card); }
.roi-calc-body { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr); align-items: stretch; }
.roi-calc-inputs { min-height: 0; overflow-y: auto; padding: 1.25rem; border-right: 1px solid var(--border-soft); scrollbar-color: rgba(var(--accent-rgb), .6) var(--bg-elevated); scrollbar-width: thin; }
.roi-calc-summary { margin-bottom: 1rem; padding: .8rem .9rem; border-left: 3px solid var(--accent); border-radius: 0 .55rem .55rem 0; background: rgba(var(--accent-rgb), .07); color: var(--text-secondary); font-size: .8rem; line-height: 1.55; }
.roi-calc-provisional { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: 1rem; padding: .75rem .85rem; border: 1px solid rgba(251,191,36,.28); border-radius: .6rem; background: rgba(251,191,36,.08); color: var(--text-muted); font-size: .73rem; line-height: 1.5; }
.roi-calc-provisional > i { margin-top: .14rem; color: #fbbf24; }.roi-calc-provisional strong,.roi-calc-provisional span { display: block; }.roi-calc-provisional strong { margin-bottom: .14rem; color: #fbbf24; font-size: .75rem; }
.roi-calc-context { margin: 0 0 1rem; padding: .85rem; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: .65rem; background: rgba(var(--accent-rgb), .05); }.roi-calc-context h3 { margin: 0; color: var(--accent); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.roi-calc-context > p { margin: .35rem 0 .65rem; color: var(--text-muted); font-size: .7rem; line-height: 1.4; }.roi-calc-context label { display: block; color: var(--text-secondary); font-size: .72rem; font-weight: 700; }.roi-calc-context label small { display: block; margin: .14rem 0 .35rem; color: var(--text-subtle); font-size: .64rem; font-weight: 400; }.roi-calc-context-input { box-sizing: border-box; width: 100%; padding: .5rem .6rem; border: 1px solid var(--border-mid); border-radius: .4rem; outline: none; background: var(--bg-elevated); color: var(--text-primary); font: inherit; font-size: .75rem; }.roi-calc-context-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12); }
.roi-calc-panel { margin-top: .85rem; padding: 1rem; border: 1px solid var(--border-mid); border-radius: .7rem; background: var(--bg-card); }
.roi-calc-panel h3, .roi-calc-breakdown h3 { margin: 0 0 .85rem; color: var(--text-primary); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.roi-calc-panel h3 { color: var(--accent); }
.roi-calc-field { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; align-items: center; gap: .6rem; padding: .4rem 0; color: var(--text-muted); font-size: .75rem; }
.roi-calc-field > span:first-child small { display: block; margin-top: .16rem; color: var(--text-subtle); font-size: .63rem; line-height: 1.35; }
.roi-calc-tip { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-left: .22rem; padding: 0; border: 0; background: transparent; color: var(--accent); cursor: help; font-size: .66rem; vertical-align: text-top; position: relative; }.roi-calc-tip::after { content: attr(data-tooltip); position: absolute; z-index: 12; left: 0; bottom: calc(100% + .4rem); width: min(16rem, 70vw); padding: .55rem .65rem; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: .45rem; background: var(--bg-primary); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35); color: var(--text-secondary); font: 500 .68rem/1.4 Inter,system-ui,sans-serif; text-align: left; opacity: 0; pointer-events: none; transform: translateY(.2rem); transition: opacity .15s,transform .15s; }.roi-calc-tip:hover::after,.roi-calc-tip:focus-visible::after { opacity: 1; transform: translateY(0); }.roi-calc-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }.roi-calc-output-tip { color: var(--text-subtle); }.roi-calc-output-tip::after { left: auto; right: 0; }
.roi-calc-optional-control { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; color: #fbbf24; font-size: .62rem; font-style: normal; white-space: nowrap; }.roi-calc-optional-control input { accent-color: #fbbf24; }.roi-calc-field.is-optional .roi-calc-input-wrap { border-style: dashed; }.roi-calc-input:disabled { cursor: not-allowed; opacity: .4; }
.roi-calc-input-wrap { display: flex; align-items: center; gap: .25rem; min-width: 0; padding: .2rem .45rem; border: 1px solid var(--border-mid); border-radius: .4rem; background: var(--bg-elevated); color: var(--text-subtle); }
.roi-calc-input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; text-align: right; }
.roi-calc-input:focus { color: var(--accent); }
.roi-calc-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .12); }
.roi-calc-output { min-height: 0; overflow-y: auto; padding: 1.25rem; scrollbar-color: rgba(var(--accent-rgb), .6) var(--bg-elevated); scrollbar-width: thin; }
.roi-calc-recommendation { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--border-mid); border-radius: .7rem; background: var(--bg-card); }
.roi-calc-recommendation p { margin: .65rem 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }
.roi-calc-rec { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .65rem; border: 1px solid; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.roi-calc-rec-strong { color: #34d399; background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.28); }.roi-calc-rec-scale,.roi-calc-rec-pilot { color: #fbbf24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.28); }.roi-calc-rec-fix,.roi-calc-rec-stop { color: #f87171; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.28); }
.roi-calc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: 1rem; }
.roi-calc-metric { min-height: 4.6rem; padding: .7rem; border: 1px solid var(--border-mid); border-radius: .6rem; background: var(--bg-card); }.roi-calc-metric span { display: block; color: var(--text-subtle); font-size: .65rem; line-height: 1.25; }.roi-calc-metric strong { display: block; margin-top: .4rem; color: var(--text-primary); font-size: .88rem; }
.roi-calc-breakdown { margin-bottom: .85rem; padding: 1rem; border: 1px solid var(--border-mid); border-radius: .7rem; background: var(--bg-card); }
.roi-calc-bar-row { display: grid; grid-template-columns: 5.6rem minmax(2rem, 1fr) 4.8rem; align-items: center; gap: .45rem; margin-top: .48rem; color: var(--text-muted); font-size: .66rem; }.roi-calc-bar-row > div { height: .55rem; overflow: hidden; border-radius: 999px; background: var(--bg-soft); }.roi-calc-bar-row i { display: block; height: 100%; border-radius: inherit; }.roi-calc-bar-row b { color: var(--text-secondary); font-weight: 700; text-align: right; }
.roi-calc-formulas { margin-bottom: .85rem; padding: .8rem .9rem; border: 1px solid var(--border-mid); border-radius: .6rem; color: var(--text-muted); font-size: .72rem; line-height: 1.55; }.roi-calc-formulas summary { color: var(--accent); font-weight: 800; cursor: pointer; }.roi-calc-formulas code { display: block; margin-top: .5rem; color: var(--text-secondary); white-space: normal; }
.roi-calc-actions { display: flex; flex-wrap: wrap; gap: .5rem; }.roi-calc-actions button { padding: .55rem .65rem; border: 1px solid var(--border-mid); border-radius: .45rem; background: var(--bg-card); color: var(--text-secondary); font-size: .72rem; font-weight: 700; cursor: pointer; }.roi-calc-actions button:hover { border-color: rgba(var(--accent-rgb), .45); color: var(--accent); }.roi-calc-actions button.primary { border-color: rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .1); color: var(--accent); }.roi-calc-status { min-height: 1.2rem; margin: .65rem 0 0; color: #34d399; font-size: .72rem; }
.my-estimates-list { display: grid; gap: .75rem; }
.my-estimate-card { padding: 1rem; border: 1px solid var(--border-mid); border-radius: .7rem; background: var(--bg-card); }
.my-estimate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }.my-estimate-head h3 { margin: .2rem 0; color: var(--text-primary); font-size: .9rem; font-weight: 800; }.my-estimate-head p { margin: 0; color: var(--text-subtle); font-size: .7rem; }
.my-estimate-metrics { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .8rem; color: var(--text-muted); font-size: .73rem; }.my-estimate-metrics b { margin-left: .2rem; color: var(--text-primary); }
.my-estimate-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }.my-estimate-actions button { padding: .42rem .55rem; border: 1px solid var(--border-mid); border-radius: .4rem; background: var(--bg-elevated); color: var(--text-muted); font-size: .7rem; font-weight: 700; cursor: pointer; }.my-estimate-actions button:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
@media (max-width: 840px) { .roi-calc-body { display: block; overflow-y: auto; }.roi-calc-inputs,.roi-calc-output { overflow: visible; }.roi-calc-inputs { border-right: 0; border-bottom: 1px solid var(--border-soft); }.roi-calc-modal { max-height: 92vh; } }
@media (max-width: 640px) { .budget-section-header { align-items: flex-start; flex-direction: column; gap: .65rem; }.budget-section-header .roi-calc-trigger { width: 100%; } }
@media (max-width: 480px) { .roi-calc-overlay { padding: .4rem; }.roi-calc-header,.roi-calc-inputs,.roi-calc-output { padding: 1rem; }.roi-calc-field { grid-template-columns: 1fr; gap: .25rem; }.roi-calc-input-wrap { width: 100%; }.roi-calc-metrics { grid-template-columns: 1fr 1fr; } }