/* ── Dashboard Global Styles (Dark Theme) ─────────────────────────────── */
/* Designed for wall-mounted displays. Always dark. */

/* ── Report pages (ReportLayout) ────────────────────────────────────────── */
.report-root { background: #fff; min-height: 100vh; }
html:has(.report-root),
body:has(.report-root) { background: #fff !important; }
@media print { body, html { background: #fff !important; } }

/* ── Concept cards (dark dashboard) ─────────────────────────────────────── */
.trace-concept-group { margin-bottom: 20px; }

.trace-concept-group__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #60a5fa;
    margin-bottom: 8px;
    padding: 0 2px;
}

.trace-concept-card {
    border: 1px solid rgba(96,165,250,0.25);
    border-left: 3px solid #3b82f6;
    border-radius: 0 6px 6px 0;
    margin-bottom: 10px;
    overflow: hidden;
}

.trace-concept-card__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(96,165,250,0.07);
    border-bottom: 1px solid rgba(96,165,250,0.15);
    flex-wrap: wrap;
}

.trace-concept-card__title {
    font-weight: 600;
    color: #e2e8f0;
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
}

.trace-concept-card__date {
    font-size: 0.7rem;
    color: #475569;
    margin-left: auto;
    white-space: nowrap;
}

.trace-concept-card__body {
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.trace-concept-card__body--empty {
    font-style: italic;
    color: #475569;
}

/* Light theme: the concept cards above are tuned for the dark dashboard — their near-white title
   (#e2e8f0) and light-grey body (#cbd5e1) wash out on white. Lift them to readable ink. */
html[data-theme="light"] .trace-concept-group__label { color: #2563eb; }
html[data-theme="light"] .trace-concept-card__title  { color: #1a2535; }
html[data-theme="light"] .trace-concept-card__body   { color: #334155; }

/* blue indicator dot variant for open concepts */
.trace-sidebar-item__warn-dot--blue { background: #3b82f6; }

/* ── Mermaid diagrams ────────────────────────────────────────────────────── */
.mermaid-rendered { margin: 1rem 0; text-align: center; }
.mermaid-rendered svg { max-width: 100%; height: auto; }
/* Contained fallback for an unrenderable diagram — must look tidy on the white report and in-app */
.mermaid-error { display: block; margin: 1rem 0; padding: 10px 14px; border: 1px solid rgba(180,83,9,0.4); border-radius: 8px; background: rgba(180,83,9,0.06); text-align: left; font-family: inherit; font-size: 0.85rem; }
.mermaid-error__note { font-weight: 600; color: #b45309; }
.mermaid-error__reason { margin-top: 2px; font-size: 0.78rem; color: #92744a; }
.mermaid-error__src { margin-top: 6px; }
.mermaid-error__src summary { cursor: pointer; color: #8a6d3b; font-size: 0.8rem; user-select: none; }
.mermaid-error__src pre { margin: 6px 0 0; padding: 8px 10px; background: rgba(0,0,0,0.05); border-radius: 6px; overflow-x: auto; font-size: 0.78rem; white-space: pre-wrap; word-break: break-word; }
.rpt-section__legend { font-size: calc(0.8rem * var(--rpt-scale, 1)); color: #666; margin-top: 0.5rem; }

:root {
    --bg-dashboard:   #1E2A35;
    --color-pass:     #4CAF50;
    --color-fail:     #B0171E;
    --color-running:  #2196F3;
    --color-idle:     #546E7A;
    --color-warning:  #FF9800;
    --brand-red:      #B0171E;
    --brand-red-dark: #8C1118;

    /* Typography tokens — change the font in ONE place. To adopt a web font,
       add an @font-face / <link> and prepend it to --font-sans here.
       The platform face is the brand monospace stack (matches the product-icon
       preview). --font-report is the printed/customer-facing report face. */
    --font-sans:   ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
    --font-mono:   ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
    --font-report: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    background-color: var(--bg-dashboard);
    color: #E0E4EA;
    -webkit-font-smoothing: antialiased;
}

/* Unified icon set (shared <Icon> component + <IconSprite>). Monochrome, inherits text colour. */
.we-ico { display: inline-block; vertical-align: -0.16em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.we-ico--accent { color: var(--brand-red, #B0171E); }

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

select {
    background-color: #1E2A35;
    color: #E0E4EA;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2390A4AE' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 2rem;
}

select:focus {
    outline: none;
    border-color: rgba(255,255,255,0.4);
}

select option {
    background-color: #1E2A35;
    color: #E0E4EA;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.28);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.45);
    background-clip: padding-box;
}

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.32) transparent; }

/* Light mode: dark thumb on light surfaces */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); background-clip: padding-box; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.45); background-clip: padding-box; }
html[data-theme="light"] { scrollbar-color: rgba(0,0,0,0.32) transparent; }

#blazor-error-ui {
    background: #B0171E;
    color: white;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Trace — Design System
   Palette:
     surface-0 #141d26  surface-1 #1b2736  surface-2 #243347
     border    #2c3e50  border-hi #3d5166
     text-pri  #e2e8f0  text-sec  #8fa8be  text-muted #506070
     accent    #38bdf8  pass #34d399  warn #fbbf24  fail #f87171
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────── */
.trace-page { max-width: 1400px; margin: 0 auto; padding: 28px 24px 48px; }
/* Project pages carry a section nav beside wide tables, so on a big screen the 1400px column left
   them cramped between empty margins (Bug #37). The narrow-screen padding further down still wins. */
.trace-page--wide { max-width: 2560px; }

/* ── Page header (generic — used by non-project pages) ───────────────── */
.trace-page__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #2c3e50; }
.trace-header-badges { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; flex-shrink: 0; }
.trace-metric-badge { display: inline-flex; flex-direction: column; align-items: center; min-width: 80px; padding: 6px 14px; border-radius: 10px; border: 1px solid transparent; cursor: default; }
.trace-metric-badge__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.75; }
.trace-metric-badge__value { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.trace-metric-badge--percent { background: hsl(var(--cov-hue,0),60%,18%); color: hsl(var(--cov-hue,0),70%,65%); border-color: hsl(var(--cov-hue,0),60%,35%); }
.trace-metric-badge--high   { background: rgba(52,211,153,0.12); color: #34d399; border-color: rgba(52,211,153,0.3); }
.trace-metric-badge--medium { background: rgba(251,191,36,0.12);  color: #fbbf24; border-color: rgba(251,191,36,0.3); }
.trace-metric-badge--low    { background: rgba(248,113,113,0.12); color: #f87171; border-color: rgba(248,113,113,0.3); }
.trace-page__header h1 { margin: 0 0 4px; font-size: 1.65rem; font-weight: 700; color: #e2e8f0; letter-spacing: -0.01em; }
.trace-page__subtitle { margin: 0; color: #8fa8be; font-size: 0.875rem; }

/* ── Project detail header ────────────────────────────────────────────── */
.trace-project-header { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #2c3e50; }
.trace-project-header__title { margin: 4px 0 6px; font-size: 1.9rem; font-weight: 700; color: #e2e8f0; letter-spacing: -0.02em; line-height: 1.2; }
.trace-project-header__sub { margin: 0 0 10px; font-size: 0.95rem; color: #8fa8be; font-weight: 500; }
.trace-project-header__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.trace-project-header__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.trace-nav-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 8px; font-size: 0.855rem; font-weight: 600; text-decoration: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s; white-space: nowrap; }
.trace-nav-btn:hover { opacity: 0.88; transform: translateY(-1px); color: #fff; }
.trace-nav-btn__ico { width: 15px; height: 15px; vertical-align: -2px; background: #fff; border-radius: 3px; padding: 1px; }
.trace-nav-btn--reports    { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); }
.trace-nav-btn--milestones { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%); }
.trace-nav-btn--repo       { background: linear-gradient(135deg, #064e3b 0%, #0f766e 100%); }
.trace-nav-btn--odb        { background: linear-gradient(135deg, #3730a3 0%, #6d28d9 100%); }
.trace-nav-btn--audit      { background: linear-gradient(135deg, #78350f 0%, #b45309 100%); }
.trace-nav-btn--federation { background: linear-gradient(135deg, #0747a6 0%, #2684ff 100%); }  /* external tracker (Jira blue) */
.trace-federation-links { align-items: center; }
.trace-federation-links__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #7f8ea3; margin-right: 2px; }
.trace-federation--conflict { outline: 2px solid #f87171; outline-offset: 1px; }               /* both sides moved */
.trace-federation--external_changed, .trace-federation--local_changed { outline: 2px solid #fbbf24; outline-offset: 1px; }  /* drifted */

/* ── Project metrics strip ────────────────────────────────────────────── */
.trace-project-header__metrics { display: flex; flex-wrap: wrap; border: 1px solid #2c3e50; border-radius: 8px; overflow: hidden; margin-top: 16px; }
.trace-project-metric { flex: 1; min-width: 80px; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; border-right: 1px solid #2c3e50; background: #141d26; }
.trace-project-metric:last-child { border-right: none; }
.trace-project-metric__value { font-size: 1.35rem; font-weight: 800; color: #e2e8f0; letter-spacing: -0.01em; }
.trace-project-metric__label { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8fa8be; margin-top: 3px; }
.trace-project-metric--pct { background: hsl(var(--cov-hue,0),55%,13%); }
.trace-project-metric--pct .trace-project-metric__value { color: hsl(var(--cov-hue,0),70%,65%); }
.trace-project-metric--pct .trace-project-metric__label { color: hsl(var(--cov-hue,0),40%,52%); }
.trace-project-metric--warn { background: rgba(251,191,36,0.07); }
.trace-project-metric--warn .trace-project-metric__value { color: #fbbf24; }
.trace-project-metric--error { background: rgba(248,113,113,0.07); }
.trace-project-metric--error .trace-project-metric__value { color: #f87171; }
.trace-home-title-row { display: flex; align-items: center; gap: 18px; }
.trace-home-logo { height: 72px; width: 72px; object-fit: contain; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); flex-shrink: 0; }
.trace-back { display: inline-flex; align-items: center; gap: 4px; color: #8fa8be; text-decoration: none; font-size: 0.825rem; margin-bottom: 8px; transition: color 0.12s; }
.trace-back:hover { color: #38bdf8; }

.trace-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8rem; margin-bottom: 8px; }
.trace-breadcrumb__sep { color: #506070; }
.trace-breadcrumb__current { color: #c8d9e6; font-weight: 600; }
/* beat `.trace-page a` (0,1,1) for the muted link colour */
.trace-page a.trace-breadcrumb__link,
.trace-page a.trace-breadcrumb__link:visited { color: #8fa8be; text-decoration: none; transition: color 0.12s; }
.trace-page a.trace-breadcrumb__link:hover { color: #38bdf8; }
html[data-theme="light"] .trace-page a.trace-breadcrumb__link,
html[data-theme="light"] .trace-page a.trace-breadcrumb__link:visited { color: #64748b; }
html[data-theme="light"] .trace-page a.trace-breadcrumb__link:hover { color: #2563eb; }
html[data-theme="light"] .trace-breadcrumb__sep { color: #94a3b8; }
html[data-theme="light"] .trace-breadcrumb__current { color: #1a2535; }
.trace-user-link { color: #7dd3fc; text-decoration: none; border-bottom: 1px dotted rgba(125,211,252,0.4); transition: color 0.12s, border-color 0.12s; }
.trace-user-link:hover { color: #38bdf8; border-bottom-color: #38bdf8; }

/* ── States ──────────────────────────────────────────────────────────── */
.trace-loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: #8fa8be; padding: 60px 0; font-size: 0.9rem; }
.trace-loading::before { content: ''; width: 18px; height: 18px; border: 2px solid #2c3e50; border-top-color: #38bdf8; border-radius: 50%; animation: trace-spin 0.8s linear infinite; }
@keyframes trace-spin { to { transform: rotate(360deg); } }
.trace-empty { color: #506070; padding: 48px 0; text-align: center; font-size: 0.9rem; }
.trace-error { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3); color: #f87171; padding: 14px 18px; border-radius: 8px; font-size: 0.9rem; margin: 16px 0; }

/* ── Section ─────────────────────────────────────────────────────────── */
.trace-section { margin-bottom: 28px; }
.trace-section h2 { font-size: 0.78rem; font-weight: 700; color: #8fa8be; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #2c3e50; }
.trace-section-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.trace-section-row h2 { margin: 0; border: none; padding: 0; }

/* ── Reusable collapse/expand chevron ────────────────────────────────────
   CSS-drawn caret (two borders): points right when closed, rotates down when
   open. Matches the Status & gates tree. Add .trace-chevron--open (state-
   driven toggles) — native <details> can instead drive it via the [open] rule
   below. Inherits currentColor, so it tints to its surrounding text. */
.trace-chevron { display: inline-block; flex: none; width: 8px; height: 8px;
    border: solid currentColor; border-width: 0 2.2px 2.2px 0; opacity: 0.6;
    transform: rotate(-45deg); transition: transform 0.15s ease; position: relative; top: -2px; }
.trace-chevron--open { transform: rotate(45deg); top: -1px; }
details[open] > summary > .trace-chevron { transform: rotate(45deg); top: -1px; }
/* the audit log's diff toggle — a button, not a <details> summary, because the diff it opens is a
   full-width row of its own and a <details> cannot span table cells. The marker rule is kept for any
   <summary> that still wears this class. */
.trace-diff-summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; color: #8fa8be; list-style: none;
    background: none; border: none; padding: 0; font: inherit; white-space: nowrap; }
.trace-diff-summary:hover { color: #c8d9e6; }
.trace-diff-summary::-webkit-details-marker { display: none; }

/* ── Recent changes digest (per-day, lazy) ───────────────────────────── */
.trace-changes__toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; width: 100%; text-align: left; }
.trace-changes__toggle h2 { margin: 0; border: none; padding: 0; }
.trace-changes__days { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.trace-changes__day { border: 1px solid #2c3e50; border-radius: 8px; overflow: hidden; }
.trace-changes__day-hdr { display: flex; align-items: center; gap: 10px; width: 100%; background: #1b2736; border: none; padding: 8px 12px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.trace-changes__day-hdr:hover { background: rgba(99,130,167,0.10); }
.trace-changes__date { font-weight: 600; font-variant-numeric: tabular-nums; color: #cbd5e1; }
.trace-changes__table { margin: 0; }
.trace-changes__more { display: inline-block; margin: 8px 12px 10px; font-size: 0.82rem; color: #6382a3; }
.trace-changes__more:hover { color: #93c5fd; }
html[data-theme="light"] .trace-changes__day { border-color: #d6e0ea; }
html[data-theme="light"] .trace-changes__day-hdr { background: #f1f5f9; }
html[data-theme="light"] .trace-changes__date { color: #334155; }

/* ── Project cards ───────────────────────────────────────────────────── */
.trace-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.trace-project-card { background: #1b2736; border: 1px solid #2c3e50; border-left: 4px solid #38bdf8; border-radius: 10px; padding: 18px 20px; text-decoration: none; color: inherit; display: block; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.trace-project-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); border-left-color: #7dd3fc; }
.trace-project-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.trace-project-card__code { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #38bdf8; background: rgba(56,189,248,0.1); padding: 2px 8px; border-radius: 4px; }
.trace-project-card__title { font-size: 1.05rem; font-weight: 600; color: #e2e8f0; margin-bottom: 10px; line-height: 1.4; }
.trace-project-card__meta { font-size: 0.78rem; color: #8fa8be; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── Pill badge (coverage / completion) ─────────────────────────────── */
.coverage-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 4px 12px; border-radius: 20px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; cursor: default; background: hsl(var(--cov-hue,0),60%,18%); color: hsl(var(--cov-hue,0),70%,65%); border: 1px solid hsl(var(--cov-hue,0),60%,35%); }
html[data-theme="light"] .coverage-badge { background: hsl(var(--cov-hue,0),65%,93%); color: hsl(var(--cov-hue,0),60%,28%); border-color: hsl(var(--cov-hue,0),50%,72%); }

/* ── Coverage stats ──────────────────────────────────────────────────── */
.trace-coverage-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.trace-stat { padding: 7px 18px; border-radius: 8px; font-size: 0.83rem; font-weight: 700; letter-spacing: 0.02em; border: 1px solid transparent; transition: filter 0.12s; }
.trace-stat--pass { background: rgba(52,211,153,0.1); color: #34d399; border-color: rgba(52,211,153,0.25); }
.trace-stat--warn { background: rgba(251,191,36,0.1); color: #fbbf24; border-color: rgba(251,191,36,0.25); }
.trace-stat--fail { background: rgba(248,113,113,0.1); color: #f87171; border-color: rgba(248,113,113,0.25); }
.trace-stat--idle { background: rgba(100,116,139,0.1); color: #94a3b8; border-color: rgba(100,116,139,0.25); }
a.trace-stat { text-decoration: none; cursor: pointer; }
a.trace-stat:hover { filter: brightness(1.15); }

/* ── Badges ──────────────────────────────────────────────────────────── */
.trace-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.trace-badge--ip     { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.trace-badge--notice { background: rgba(251,146,60,0.15);  color: #fb923c; border: 1px solid rgba(251,146,60,0.35); }
.trace-badge--fail { background: rgba(248,113,113,0.12); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.trace-badge--warn { background: rgba(251,191,36,0.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.trace-badge--pass { background: rgba(52,211,153,0.12);  color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.trace-badge--idle { background: rgba(100,116,139,0.12); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.trace-badge--info { background: rgba(56,189,248,0.12);  color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.trace-badge--discipline { background: rgba(45,212,191,0.12); color: #2dd4bf; border: 1px solid rgba(45,212,191,0.32); text-transform: capitalize; }
.trace-badge--discipline-default { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px dashed rgba(148,163,184,0.4); }
.trace-badge--rigor { background: rgba(168,85,247,0.12); color: #c084fc; border: 1px solid rgba(168,85,247,0.32); text-transform: capitalize; }

/* Project lead and planning-board membership.
   These four shipped in 0.189.0 with no rules at all, so "Lead: Martin" and "No lead — assign"
   rendered identically, as did "On the planning board" and "Not on the planning board" — a bare
   .trace-badge with no colour. The state a badge exists to show was the one thing it did not. */
.trace-badge--lead         { background: rgba(129,140,248,0.12); color: #a5b4fc; border: 1px solid rgba(129,140,248,0.32); text-transform: none; letter-spacing: 0.01em; }
/* Dashed, like every other "nobody has filled this in" affordance in the sheet — an absence should
   not look like a decision somebody took. */
.trace-badge--lead-missing { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px dashed rgba(148,163,184,0.45); text-transform: none; letter-spacing: 0.01em; }
.trace-badge--tracked      { background: rgba(56,189,248,0.12);  color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); text-transform: none; letter-spacing: 0.01em; }
.trace-badge--muted        { background: rgba(100,116,139,0.10); color: #94a3b8; border: 1px solid rgba(100,116,139,0.28); text-transform: none; letter-spacing: 0.01em; }

/* A badge that is also a control. Rendered as a real <button> so it is reachable by Tab and fires on
   Enter and Space: a <span role="button"> announces itself to a screen reader as a button and then
   cannot be operated by one, which is worse than not claiming to be a button at all. */
button.trace-badge { font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
button.trace-badge:hover { filter: brightness(1.18); }
button.trace-badge:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }
button.trace-badge:disabled { cursor: default; filter: none; opacity: 0.65; }

/* A refusal shown beside the badge it belongs to, rather than through the page's fatal-error slot.
   Wraps, because the API's refusals are sentences that name the capability and who can grant it. */
.trace-badge-note { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 12px; font-size: 0.72rem; font-weight: 500; line-height: 1.45; white-space: normal; max-width: 46ch; background: rgba(248,113,113,0.10); color: #fca5a5; border: 1px solid rgba(248,113,113,0.28); }
html[data-theme="light"] .trace-badge-note { background: rgba(185,28,28,0.07); color: #b91c1c; border-color: rgba(185,28,28,0.22); }
html[data-theme="light"] .trace-badge--rigor { background: rgba(147,51,234,0.08); color: #7e22ce; border-color: rgba(147,51,234,0.25); }

/* ── Search labels (free-text tags with colour) ──────────────────────────── */
/* Colour comes inline from the label's hex (see LabelStyle.Chip); these rules own shape only. */
.trace-label-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.trace-label-chip--sm { padding: 1px 7px; font-size: 0.66rem; }
.trace-label-chip__x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0; opacity: 0.65; }
.trace-label-chip__x:hover:not(:disabled) { opacity: 1; }
.trace-label-chip__x:disabled { cursor: default; opacity: 0.3; }

/* Quick-filter bar on the project list. */
.trace-label-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 16px; }
.trace-label-filterbar__hint { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-right: 2px; }
.trace-label-chip--filter { cursor: pointer; border-style: solid; opacity: 0.78; transition: opacity 0.1s, box-shadow 0.1s; }
.trace-label-chip--filter:hover { opacity: 1; }
.trace-label-chip--filter.is-active { opacity: 1; box-shadow: 0 0 0 2px currentColor inset; font-weight: 700; }
.trace-label-chip--pick { cursor: pointer; border-style: solid; }

.trace-project-card__labels { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

/* Discipline quick-filter (electronics, firmware, …). Neutral chips — no per-item colour. */
.trace-discipline-filterbar { margin-top: -6px; }
.trace-discipline-chip { cursor: pointer; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; line-height: 1.5; background: #1b2736; color: #94a3b8; border: 1px solid #2c3e50; transition: box-shadow 0.1s, color 0.1s, background 0.1s, border-color 0.1s; }
.trace-discipline-chip:hover { color: #cbd5e1; border-color: #3b5168; }
.trace-discipline-chip.is-active { color: #0b1118; background: #38bdf8; border-color: #38bdf8; font-weight: 700; }

/* Small discipline tags on the project card. */
.trace-project-card__disciplines { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.trace-project-card__discipline { font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; background: #1b2736; border: 1px solid #2c3e50; border-radius: 20px; padding: 1px 7px; }

/* Add-label control + popover in the project header. */
.trace-label-add { position: relative; display: inline-flex; }
.trace-label-add__btn { cursor: pointer; padding: 2px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; color: #94a3b8; background: rgba(148,163,184,0.10); border: 1px dashed rgba(148,163,184,0.4); }
.trace-label-add__btn:hover { color: #cbd5e1; border-color: rgba(148,163,184,0.7); }
.trace-label-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 260px; padding: 12px; background: #1b2736; border: 1px solid #2c3e50; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.trace-label-popover__section { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin: 2px 0 6px; }
.trace-label-popover__list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.trace-label-popover__input { width: 100%; margin-bottom: 8px; }
.trace-label-popover__swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.trace-label-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); cursor: pointer; padding: 0; }
.trace-label-swatch:hover:not(:disabled) { transform: scale(1.12); }
.trace-label-swatch:disabled { cursor: default; opacity: 0.35; }
.trace-label-swatch.is-selected { box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px currentColor; }

.trace-label-filterbar__manage { margin-left: auto; font-size: 0.74rem; color: #64748b; text-decoration: none; white-space: nowrap; }
.trace-label-filterbar__manage:hover { color: #38bdf8; }

/* Label manager page. */
.trace-label-mgr__create { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; background: #1b2736; border: 1px solid #2c3e50; border-radius: 10px; margin-bottom: 16px; }
.trace-label-mgr__create .trace-filter-input { min-width: 180px; }
.trace-label-mgr__msg { padding: 8px 12px; margin-bottom: 12px; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.3); border-radius: 8px; color: #fbbf24; font-size: 0.82rem; }
.trace-label-mgr__table { width: 100%; border-collapse: collapse; }
.trace-label-mgr__table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; padding: 6px 12px; border-bottom: 1px solid #2c3e50; }
.trace-label-mgr__table td { padding: 10px 12px; border-bottom: 1px solid rgba(44,62,80,0.5); vertical-align: middle; }
.trace-label-mgr__edit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.trace-label-mgr__actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.trace-label-mgr__confirm { font-size: 0.8rem; color: #fbbf24; }
.trace-nav-btn--danger { color: #f87171; border-color: rgba(248,113,113,0.4); }
.trace-nav-btn--danger:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.7); }

/* Collapsible status groups + expandable item rows (TraceOpenItems) */
.trace-group { margin-bottom: 10px; }
.trace-group__header { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 8px 14px; color: inherit; font-size: 0.9rem; }
.trace-group__header:hover { background: rgba(255,255,255,0.06); }
.trace-group__count { margin-left: auto; font-variant-numeric: tabular-nums; opacity: 0.7; font-weight: 600; }
.trace-table-wrap + .trace-group, .trace-group .trace-table-wrap { margin-top: 8px; }
.trace-row--clickable { cursor: pointer; }
.trace-row--clickable:hover { background: rgba(255,255,255,0.04); }
.trace-row--detail > td { background: rgba(255,255,255,0.02); }
.trace-item-detail { padding: 6px 8px 12px; }
.trace-item-detail__desc { font-size: 0.9rem; line-height: 1.6; margin: 0 0 10px; }
.trace-item-detail__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; opacity: 0.85; }
.trace-item-detail__meta strong { opacity: 0.7; font-weight: 600; margin-right: 4px; }
html[data-theme="light"] .trace-group__header { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .trace-group__header:hover { background: rgba(0,0,0,0.05); }
html[data-theme="light"] .trace-row--clickable:hover { background: rgba(0,0,0,0.03); }
html[data-theme="light"] .trace-row--detail > td { background: rgba(0,0,0,0.02); }

/* ── Milestone gate tree (15-MILESTONE_GATES.md) — read-only, theme-aware ──── */
.trace-gate-tree { display: flex; flex-direction: column; gap: 8px; }
.trace-gate-node { border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: rgba(255,255,255,0.03); }
.trace-gate-node__head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer;
    list-style: none; color: inherit; font-size: 0.9rem; border-radius: 8px; }
.trace-gate-node__head::-webkit-details-marker { display: none; }
/* modern chevron drawn from two borders — points right (closed) → down (open) */
.trace-gate-node__head::before { content: ""; display: inline-block; flex: none; width: 8px; height: 8px;
    border: solid currentColor; border-width: 0 2.2px 2.2px 0; opacity: 0.6;
    transform: rotate(-45deg); transition: transform 0.15s ease; position: relative; top: -2px; }
.trace-gate-node[open] > summary.trace-gate-node__head::before { transform: rotate(45deg); top: -1px; }
.trace-gate-node__head--flat { cursor: default; }
.trace-gate-node__head--flat::before { opacity: 0; }   /* keep title alignment, no caret on markers */
.trace-gate-node__head:hover { background: rgba(255,255,255,0.05); }
.trace-gate-node__head--flat:hover { background: transparent; }
.trace-gate-node__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.trace-gate-node__right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.trace-gate-node__counts { font-variant-numeric: tabular-nums; opacity: 0.8; font-size: 0.82rem; }
.trace-gate-node__body { padding: 2px 14px 12px 30px; display: flex; flex-direction: column; gap: 3px; }
.trace-gate-crit__head, .trace-gate-crit--leaf { display: flex; align-items: center; gap: 8px; padding: 3px 0;
    list-style: none; font-size: 0.86rem; }
.trace-gate-crit__head { cursor: pointer; }
.trace-gate-crit__head::-webkit-details-marker { display: none; }
.trace-gate-crit__head::before { content: ""; display: inline-block; flex: none; width: 7px; height: 7px;
    border: solid currentColor; border-width: 0 2px 2px 0; opacity: 0.5;
    transform: rotate(-45deg); transition: transform 0.15s ease; position: relative; top: -2px; }
.trace-gate-crit[open] > summary.trace-gate-crit__head::before { transform: rotate(45deg); top: -1px; }
.trace-gate-crit--leaf::before { content: ""; display: inline-block; flex: none; width: 4px; height: 4px;
    border-radius: 50%; background: currentColor; opacity: 0.3; }

/* Release is the terminal gate — set it apart at the bottom of the chronology */
.trace-gate-node--release { margin-top: 10px; border-color: rgba(255,255,255,0.2); }
.trace-gate-node--release::before { content: ""; display: block; width: 2px; height: 12px;
    margin: -10px auto 2px; background: rgba(255,255,255,0.15); }
html[data-theme="light"] .trace-gate-node--release { border-color: rgba(0,0,0,0.2); }
html[data-theme="light"] .trace-gate-node--release::before { background: rgba(0,0,0,0.15); }
.trace-gate-evidence { margin: 1px 0 6px 26px; padding-left: 14px; list-style: disc; font-size: 0.82rem; opacity: 0.8; }
.trace-gate-evidence li { padding: 1px 0; }
html[data-theme="light"] .trace-gate-node { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .trace-gate-node__head:hover { background: rgba(0,0,0,0.04); }
html[data-theme="light"] .trace-gate-node__head--flat:hover { background: transparent; }

/* ── Milestone timeline strip (colored gate tiles, horizontal) ───────────── */
.trace-mstrip-section { margin-bottom: 14px; }
.trace-mstrip { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 0 8px; }
.trace-mstrip__tile { flex: 0 0 auto; min-width: 124px; max-width: 220px; display: flex; flex-direction: column; gap: 3px;
    padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); cursor: default; }
.trace-mstrip__state { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; }
.trace-mstrip__title { font-size: 0.82rem; font-weight: 700; color: #e2e8f0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trace-mstrip__meta { font-size: 0.68rem; color: #8fa8be; display: flex; gap: 4px; flex-wrap: wrap; }
.trace-mstrip__counts { color: #64748b; }
.trace-mstrip__tile--pass { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.32); }
.trace-mstrip__tile--pass .trace-mstrip__state { color: #34d399; }
.trace-mstrip__tile--warn { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.32); }
.trace-mstrip__tile--warn .trace-mstrip__state { color: #fbbf24; }
.trace-mstrip__tile--fail { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.32); }
.trace-mstrip__tile--fail .trace-mstrip__state { color: #f87171; }
.trace-mstrip__tile--idle { background: rgba(100,116,139,0.10); border-color: rgba(100,116,139,0.28); }
.trace-mstrip__tile--idle .trace-mstrip__state { color: #94a3b8; }
.trace-mstrip__tile--release { border-width: 2px; }
html[data-theme="light"] .trace-mstrip__title { color: #1a2535; }
html[data-theme="light"] .trace-mstrip__tile { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .trace-mstrip__tile--pass { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.28); }
html[data-theme="light"] .trace-mstrip__tile--pass .trace-mstrip__state { color: #15803d; }
html[data-theme="light"] .trace-mstrip__tile--warn { background: rgba(180,83,9,0.08); border-color: rgba(180,83,9,0.28); }
html[data-theme="light"] .trace-mstrip__tile--warn .trace-mstrip__state { color: #b45309; }
html[data-theme="light"] .trace-mstrip__tile--fail { background: rgba(185,28,28,0.08); border-color: rgba(185,28,28,0.28); }
html[data-theme="light"] .trace-mstrip__tile--fail .trace-mstrip__state { color: #b91c1c; }
html[data-theme="light"] .trace-mstrip__tile--idle { background: rgba(71,85,105,0.08); border-color: rgba(71,85,105,0.24); }
html[data-theme="light"] .trace-mstrip__tile--idle .trace-mstrip__state { color: #475569; }

/* ── Table toolbar + filter ──────────────────────────────────────────── */
.trace-table-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trace-table-toolbar--wrap { flex-wrap: wrap; }
.trace-project-filter { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.trace-project-filter__input { width: 260px; }
.trace-filter-clear { padding: 5px 10px; background: transparent; border: 1px solid #2c3e50; border-radius: 5px; color: #64748b; font-size: 0.78rem; cursor: pointer; transition: all 0.12s; }
.trace-filter-clear:hover { border-color: #38bdf8; color: #e2e8f0; }
.trace-filter-input { flex: 1; max-width: 340px; background: #1b2736; border: 1px solid #2c3e50; border-radius: 6px; color: #e2e8f0; padding: 7px 12px; font-size: 0.85rem; outline: none; transition: border-color 0.15s; }
.trace-filter-input::placeholder { color: #506070; }
.trace-filter-input:focus { border-color: #38bdf8; }
.trace-filter-count { font-size: 0.78rem; color: #506070; white-space: nowrap; }

/* ── Table ───────────────────────────────────────────────────────────── */
.trace-table-wrap { overflow-x: auto; border: 1px solid #2c3e50; border-radius: 8px; background: #1b2736; }
.trace-table-wrap--scroll { max-height: 58rem; overflow-y: auto; }
.trace-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; min-width: 540px; }
.trace-table th { text-align: left; padding: 9px 14px; color: #8fa8be; background: #141d26; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; border-bottom: 1px solid #2c3e50; position: sticky; top: 0; z-index: 1; }
.trace-table td { padding: 9px 14px; border-bottom: 1px solid #1e2d3d; color: #c8d9e6; vertical-align: top; }
.trace-table td.trace-td--title { min-width: 260px; max-width: 480px; word-break: break-word; white-space: normal; line-height: 1.45; }
.trace-table td.trace-td--code { white-space: nowrap; }
.trace-table td.trace-td--narrow { white-space: nowrap; width: 1%; }
.trace-table td.trace-td--refdes { max-width: 180px; word-break: break-word; white-space: normal; line-height: 1.45; }
.trace-table td.trace-td--muted, .trace-td--muted { color: #506070; }
.trace-table tbody tr:last-child td { border-bottom: none; }
/* Direct children, not descendants: the audit log nests a diff table inside a cell, and a plain
   descendant selector made the OUTER row's hover repaint the inner cells too — washing the diff's
   red/green out from under the pointer. Rows are always direct children of tbody (the browser
   inserts one if the markup omits it), so this matches everything it did before. */
.trace-table > tbody > tr:hover > td { background: #243347; }
.trace-tr--nomount { opacity: 0.4; }
.trace-table code { font-size: 0.8rem; color: #7dd3fc; background: rgba(125,211,252,0.08); padding: 1px 5px; border-radius: 3px; }

/* ── Tab strip ───────────────────────────────────────────────────────── */
.trace-tabs { display: flex; gap: 2px; margin-bottom: 18px; border-bottom: 1px solid #2c3e50; overflow-x: auto; scrollbar-width: none; }
.trace-tabs::-webkit-scrollbar { display: none; }
.trace-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 18px; color: #8fa8be; font-size: 0.85rem; font-weight: 600; cursor: pointer; margin-bottom: -1px; white-space: nowrap; transition: color 0.12s; }
.trace-tab:hover { color: #e2e8f0; }
.trace-tab--active { color: #38bdf8; border-bottom-color: #38bdf8; }
.trace-tab--warn { color: #fbbf24; }
.trace-tab--warn.trace-tab--active { color: #fbbf24; border-bottom-color: #fbbf24; }

/* ── Misc ────────────────────────────────────────────────────────────── */
.trace-artifact-text { color: #c8d9e6; font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; }
.trace-assist-btn { background: #1b2736; border: 1px solid #2c3e50; color: #8fa8be; padding: 8px 14px; border-radius: 6px; font-size: 0.82rem; cursor: pointer; white-space: nowrap; align-self: flex-start; transition: border-color 0.12s, color 0.12s; }
.trace-assist-btn:hover { border-color: #38bdf8; color: #38bdf8; }
.trace-link-btn { font-size: 0.8rem; color: #8fa8be; text-decoration: none; border: 1px solid #2c3e50; padding: 5px 12px; border-radius: 6px; transition: border-color 0.12s, color 0.12s; white-space: nowrap; background: none; cursor: pointer; }
.trace-link-btn:hover { color: #38bdf8; border-color: #38bdf8; }
.trace-link-btn--active { color: #38bdf8; border-color: #38bdf8; background: rgba(56,189,248,0.07); }

/* ── Nudge bar ───────────────────────────────────────────────────────── */
.trace-nudge { padding: 12px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 0.875rem; line-height: 1.6; }
.trace-nudge--warn { background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.35); color: #fcd34d; }
.trace-nudge-link { color: #7dd3fc; text-decoration: underline; }
.trace-nudge code { background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 3px; font-size: 0.84em; }

/* Model guide — "how this fits together" collapsible explainer (dark defaults; light overrides below) */
.trace-model-guide { margin: 16px 0 4px; }
.trace-model-guide__toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 8px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
    background: rgba(125,211,252,0.08); border: 1px solid rgba(125,211,252,0.3); color: #7dd3fc;
}
.trace-model-guide__toggle:hover { background: rgba(125,211,252,0.14); }
.trace-model-guide__body {
    margin-top: 12px; padding: 18px 20px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
}
.trace-model-guide__intro { font-size: 0.9rem; line-height: 1.6; margin: 0 0 16px; opacity: 0.92; }
.trace-model-guide__intro code { background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 3px; font-size: 0.84em; }
.trace-model-guide__legend { margin-top: 18px; }
.trace-model-guide__legend h4 { margin: 0 0 10px; font-size: 0.95rem; }
.trace-model-guide__legend dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; margin: 0; font-size: 0.86rem; line-height: 1.5; }
.trace-model-guide__legend dt { font-weight: 600; color: #7dd3fc; white-space: nowrap; }
.trace-model-guide__legend dd { margin: 0; opacity: 0.9; }
.trace-model-guide__legend code { background: rgba(255,255,255,0.07); padding: 1px 6px; border-radius: 3px; font-size: 0.84em; }
@media (max-width: 640px) { .trace-model-guide__legend dl { grid-template-columns: 1fr; gap: 2px 0; } .trace-model-guide__legend dt { margin-top: 8px; } }

html[data-theme="light"] .trace-model-guide__toggle { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.3); color: #2563eb; }
html[data-theme="light"] .trace-model-guide__toggle:hover { background: rgba(37,99,235,0.12); }
html[data-theme="light"] .trace-model-guide__body { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.1); }
html[data-theme="light"] .trace-model-guide__legend dt { color: #2563eb; }
html[data-theme="light"] .trace-model-guide__intro code,
html[data-theme="light"] .trace-model-guide__legend code { background: rgba(0,0,0,0.06); }

/* Only our own card div is themed in CSS; the Mermaid SVG palette itself is theme-aware via
   RE-RENDER — TraceModelGuide rebuilds the diagram with a dark/light palette when the theme
   toggles. (Mermaid emits classDef styles as ID-scoped !important rules, which external CSS can't
   override, so CSS-only theming of the nodes/clusters/edges is not possible.) */
.trace-model-guide__diagram { border: 1px solid; border-radius: 8px; padding: 14px; overflow-x: auto; }
.trace-model-guide__diagram .mermaid-rendered { margin: 0; }
.trace-model-guide__diagram svg { max-width: 100%; height: auto; }
.trace-model-guide__diagram .node { cursor: pointer; }
.trace-model-guide__diagram .node:hover { opacity: 0.85; }
.trace-model-guide__diagram { background: #0e1722; border-color: rgba(255,255,255,0.10); }
html[data-theme="light"] .trace-model-guide__diagram { background: #ffffff; border-color: rgba(0,0,0,0.12); }

/* Mermaid hover tooltip (appended to <body>, outside the diagram) — theme it too. */
div.mermaidTooltip { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px; padding: 4px 9px; font-size: 0.8rem; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
html[data-theme="light"] div.mermaidTooltip { background: #ffffff; color: #1f2937; border-color: #cbd5e1; box-shadow: 0 4px 14px rgba(0,0,0,0.15); }

/* inline colour-key chips used in the guide intro */
.trace-mg-key { display: inline-block; padding: 0 7px; border-radius: 4px; font-size: 0.82em; font-weight: 600; color: #1f2937; }
.trace-mg-key--present { background: #dcfce7; border: 1px solid #16a34a; }
.trace-mg-key--empty { background: #f1f5f9; border: 1px dashed #94a3b8; }

/* ── Engineering Memory ──────────────────────────────────────────────── */
.trace-memory { display: flex; flex-direction: column; gap: 12px; }
.trace-memory__item { background: #141d26; border: 1px solid #2c3e50; border-left: 3px solid #38bdf8; border-radius: 8px; padding: 14px 18px; }
.trace-memory__item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.trace-memory__kind { font-size: 0.75rem; color: #8fa8be; text-transform: uppercase; letter-spacing: 0.05em; }
.trace-memory__date { font-size: 0.75rem; color: #506070; margin-left: auto; }
.trace-memory__statement { margin: 0; color: #c8d9e6; font-size: 0.9rem; line-height: 1.65; }

/* ── Component library ───────────────────────────────────────────────── */
.comp-lib-filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.comp-lib-search { flex: 1 1 220px; background: #1b2736; border: 1px solid #2c3e50; color: #c8d9e6; padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; min-width: 0; }
.comp-lib-search:focus { outline: none; border-color: #38bdf8; }
.comp-lib-status-filter { background: #1b2736; border: 1px solid #2c3e50; color: #c8d9e6; padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; cursor: pointer; }
.comp-lib-pagination { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 0.85rem; color: #8fa8be; }
.trace-btn { background: #1b2736; border: 1px solid #2c3e50; color: #8fa8be; padding: 8px 16px; border-radius: 6px; font-size: 0.855rem; cursor: pointer; transition: border-color 0.12s, color 0.12s; white-space: nowrap; }
.trace-btn:hover:not([disabled]) { border-color: #38bdf8; color: #38bdf8; }
.trace-btn[disabled] { opacity: 0.4; cursor: default; }
.comp-detail-status { font-size: 0.9rem; padding: 6px 14px; align-self: flex-start; }
.comp-detail-meta { border-collapse: collapse; font-size: 0.875rem; }
.comp-detail-meta th { text-align: left; padding: 6px 18px 6px 0; color: #8fa8be; font-weight: 600; white-space: nowrap; width: 130px; }
.comp-detail-meta td { padding: 6px 0; color: #c8d9e6; }
.comp-detail-eol { color: #fbbf24; }
.comp-specs-pre { background: #141d26; border: 1px solid #2c3e50; border-radius: 8px; padding: 16px 18px; color: #c8d9e6; font-size: 0.82rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-x: auto; margin: 0; }
.comp-copy-btn { font-size: 0.78rem; padding: 5px 12px; }
.comp-copy-confirm { font-size: 0.78rem; color: #4ade80; margin-left: 10px; }

/* ── Project event timeline ──────────────────────────────────────────── */
.trace-timeline { display: flex; flex-direction: column; gap: 0; }
.trace-timeline__item { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid #1b2736; }
.trace-timeline__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.trace-timeline__dot--pass { background: #4ade80; }
.trace-timeline__dot--fail { background: #f87171; }
.trace-timeline__dot--idle { background: #4b6882; }
.trace-timeline__dot--warn { background: #fbbf24; }
.trace-timeline__body { flex: 1; min-width: 0; }
.trace-timeline__header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.trace-timeline__action { font-size: 0.875rem; color: #c8d9e6; font-weight: 500; }
.trace-timeline__meta { font-size: 0.78rem; color: #506070; }

/* ── Link colors in dark theme ───────────────────────────────────────── */
.trace-page a { color: #7dd3fc; }
.trace-page a:visited { color: #93c5fd; }
.trace-page a:hover { color: #38bdf8; }
/* Navigation/interactive links keep their own visual design */
.trace-page a.trace-back,
.trace-page a.trace-back:visited { color: #8fa8be; }
.trace-page a.trace-back:hover { color: #38bdf8; }
.trace-page a.trace-link-btn,
.trace-page a.trace-link-btn:visited { color: #8fa8be; }
.trace-page a.trace-link-btn:hover { color: #38bdf8; }
.trace-page a.trace-project-card,
.trace-page a.trace-project-card:visited { color: inherit; text-decoration: none; }
/* Stat links keep their pass/warn/fail/idle colors */
.trace-page a.trace-stat--pass,
.trace-page a.trace-stat--pass:visited { color: #34d399; }
.trace-page a.trace-stat--warn,
.trace-page a.trace-stat--warn:visited { color: #fbbf24; }
.trace-page a.trace-stat--fail,
.trace-page a.trace-stat--fail:visited { color: #f87171; }
.trace-page a.trace-stat--idle,
.trace-page a.trace-stat--idle:visited { color: #94a3b8; }

/* ── Markdown body ───────────────────────────────────────────────────── */
.markdown-body { color: #c8d9e6; font-size: 0.9rem; line-height: 1.7; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 { color: #e2e8f0; margin: 1.2em 0 0.5em; font-weight: 700; }
.markdown-body h1 { font-size: 1.4rem; }
.markdown-body h2 { font-size: 1.15rem; }
.markdown-body h3 { font-size: 1rem; }
.markdown-body p { margin: 0 0 0.85em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0 0 0.85em; }
.markdown-body li { margin-bottom: 0.25em; }
.markdown-body code { background: #243347; color: #7dd3fc; padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }
.markdown-body pre { background: #141d26; border: 1px solid #2c3e50; border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 1em; }
.markdown-body pre code { background: none; padding: 0; color: #c8d9e6; font-size: 0.82em; }
.markdown-body table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 0.875rem; }
.markdown-body th { background: #141d26; color: #8fa8be; padding: 7px 12px; text-align: left; border-bottom: 1px solid #2c3e50; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.markdown-body td { padding: 7px 12px; border-bottom: 1px solid #1e2d3d; color: #c8d9e6; }
.markdown-body tbody tr:hover td { background: #243347; }
.markdown-body a { color: #7dd3fc; }
.markdown-body a:hover { color: #38bdf8; }
.markdown-body blockquote { border-left: 3px solid #38bdf8; margin: 0 0 0.85em; padding: 8px 16px; background: rgba(56,189,248,0.05); color: #8fa8be; }
.markdown-body hr { border: none; border-top: 1px solid #2c3e50; margin: 1.2em 0; }

/* ── Markdown body overrides for white-background report pages ──────── */
.rpt-doc .markdown-body { color: #1e293b; }
.rpt-doc .markdown-body h1, .rpt-doc .markdown-body h2, .rpt-doc .markdown-body h3, .rpt-doc .markdown-body h4 { color: #0f172a; }
.rpt-doc .markdown-body code { background: #f1f5f9; color: #1e40af; }
.rpt-doc .markdown-body pre { background: #f8fafc; border-color: #e2e8f0; }
.rpt-doc .markdown-body pre code { color: #1e293b; }
.rpt-doc .markdown-body th { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.rpt-doc .markdown-body td { color: #334155; border-color: #f1f5f9; }
.rpt-doc .markdown-body tbody tr:hover td { background: #f8fafc; }
.rpt-doc .markdown-body a { color: #2563eb; }
.rpt-doc .markdown-body a:hover { color: #1d4ed8; }
.rpt-doc .markdown-body blockquote { border-color: #3b82f6; background: rgba(59,130,246,0.05); color: #475569; }
.rpt-doc .markdown-body hr { border-color: #e2e8f0; }


/* ── Lifecycle badges ────────────────────────────────────────────────── */
.trace-badge--lifecycle-planned      { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.trace-badge--lifecycle-in_progress  { background: rgba(56,189,248,0.15);  color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.trace-badge--lifecycle-completed    { background: rgba(52,211,153,0.15);  color: #34d399; border: 1px solid rgba(52,211,153,0.3); }
.trace-badge--lifecycle-cancelled    { background: rgba(248,113,113,0.15); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }

/* ── Project card lifecycle border ──────────────────────────────────── */
.trace-project-card--lifecycle-in_progress { border-left-color: #38bdf8; }
.trace-project-card--lifecycle-planned     { border-left-color: #4b6882; }
.trace-project-card--lifecycle-completed   { border-left-color: #34d399; }
.trace-project-card--lifecycle-cancelled   { border-left-color: #f87171; }

/* ── Project description / repo ─────────────────────────────────────── */
.trace-project-desc { color: #8fa8be; font-size: 0.9rem; margin: 8px 0 0; line-height: 1.55; }
.trace-project-repo { font-size: 0.83rem; margin: 6px 0 0; }
.trace-project-repo a { word-break: break-all; }

/* ── Project relations ───────────────────────────────────────────────── */
.trace-relations-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid #2c3e50; border-radius: 8px; background: #1b2736; }
.trace-relations-table { width: 100%; border-collapse: collapse; font-size: 0.855rem; }
.trace-relations-table th { text-align: left; padding: 9px 14px; color: #8fa8be; background: #141d26; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; border-bottom: 1px solid #2c3e50; }
.trace-relations-table td { padding: 9px 14px; border-bottom: 1px solid #1e2d3d; color: #c8d9e6; vertical-align: top; }
.trace-relations-table tbody tr:last-child td { border-bottom: none; }
.trace-relations-table tbody tr:hover td { background: #243347; }
.trace-relations-table__rel { color: #8fa8be; white-space: nowrap; }
.trace-relations-table a { color: #93c5fd; text-decoration: none; }
.trace-relations-table a:hover { text-decoration: underline; }

/* ── Design rule rows (clickable + expandable) ───────────────────────── */
.trace-rule-row { cursor: pointer; }
.trace-rule-row:hover td { background: rgba(99,130,167,0.07); }
.trace-rule-row--expanded td { background: rgba(99,130,167,0.1); }
.trace-rule-row--waived td { opacity: 0.75; }
.trace-rule-detail-row td { padding: 0; background: rgba(99,130,167,0.05); border-bottom: 1px solid rgba(99,130,167,0.15); }
.trace-rule-detail { padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.trace-rule-detail__row { display: flex; gap: 12px; align-items: flex-start; font-size: 0.85rem; }
.trace-rule-detail__row--justification { background: rgba(248,113,113,0.07); border-radius: 5px; padding: 6px 8px; margin: 2px 0; }
.trace-rule-detail__label { min-width: 96px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8fa8be; padding-top: 2px; }
.trace-rule-detail__devs { display: flex; flex-direction: column; gap: 6px; }
/* Bug #37. A detail row is one colspan cell, and in an auto-layout table that cell's content votes on
   the table's width: one long code line, URL or markdown table in a body stretched the whole table past
   its panel, so prose ran off the right and scrolling back clipped the left. In a --details wrap the
   detail is pinned to the wrap's visible width instead (100cqw), stuck at left:0 for when the columns
   themselves still need to scroll, and its prose wraps inside that; code blocks scroll on their own. */
.trace-table-wrap--details { container-type: inline-size; }
.trace-table-wrap--details .trace-rule-detail { width: 100cqw; position: sticky; left: 0; overflow-x: auto; }
.trace-rule-detail__row > div { flex: 1; min-width: 0; }
.trace-rule-detail .markdown-body { overflow-wrap: anywhere; }
.trace-deviation-chip { display: flex; gap: 8px; align-items: baseline; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.2); border-radius: 5px; padding: 4px 10px; font-size: 0.82rem; text-decoration: none; color: inherit; }
.trace-deviation-chip:hover { background: rgba(248,113,113,0.15); }
.trace-deviation-chip code { color: #f87171; flex-shrink: 0; }
.trace-deviation-chip span { color: #8fa8be; }

/* ── Deviation banner (test case detail) ─────────────────────────────── */
.trace-deviation-banner { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); border-radius: 6px; padding: 10px 14px; margin: 0 0 16px; }
.trace-deviation-banner--expired { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.25); }
.trace-deviation-banner__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #f87171; flex-shrink: 0; }
.trace-deviation-banner--expired .trace-deviation-banner__label { color: #94a3b8; }
.trace-deviation-banner__justification { font-size: 0.88rem; color: #e2e8f0; flex: 1; }
.trace-deviation-banner__meta { font-size: 0.78rem; color: #8fa8be; }

/* ── Milestones section ──────────────────────────────────────────────── */
.trace-milestone-late { color: #f87171; font-weight: 600; }
.trace-ms-slip { font-size: 0.78rem; }
.trace-ms-achieve { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 0.6rem; font-size: 0.85rem; }
.trace-ms-achieve__label { display: inline-flex; align-items: center; gap: 8px; }
.trace-ms-achieve__date { flex: 0 0 auto; width: auto; }
.trace-ms-title { display: block; }
.trace-ms-body  { display: block; font-size: 0.78rem; color: #6382a3; margin-top: 2px; }
html[data-theme="light"] .trace-ms-body { color: #64748b; }
.trace-ms-tcs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.trace-ms-tc { font-size: 0.72rem; font-family: var(--font-mono); padding: 2px 7px; border-radius: 4px; text-decoration: none; border: 1px solid; white-space: nowrap; }
.trace-ms-tc--pass { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; }
.trace-ms-tc--fail { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.35); color: #f87171; }
.trace-ms-tc--warn,.trace-ms-tc--idle,.trace-ms-tc--open { background: rgba(148,163,184,0.1); border-color: rgba(148,163,184,0.3); color: #94a3b8; }
.trace-ms-tc:hover { filter: brightness(1.25); }
.trace-section-hint { text-align: right; font-size: 0.82rem; margin-top: 10px; color: #6382a3; }
.trace-section-hint a { color: #6382a3; }
.trace-section-hint a:hover { color: #93c5fd; }

/* ── Netlist viewer ──────────────────────────────────────────────────── */
.netlist-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.netlist-header__rev { font-weight: 700; font-size: 0.9rem; color: #e2e8f0; background: rgba(99,130,167,0.15); border: 1px solid rgba(99,130,167,0.3); border-radius: 4px; padding: 2px 8px; }
.netlist-header__stat { font-size: 0.82rem; color: #8fa8be; }
.netlist-net-row { cursor: pointer; }
.netlist-net-row:hover td { background: rgba(99,130,167,0.07); }
.netlist-net-row--expanded td { background: rgba(99,130,167,0.1); }
.netlist-pins-row td { padding: 4px 12px 10px 24px; background: rgba(99,130,167,0.05); border-bottom: 1px solid rgba(99,130,167,0.15); }
.netlist-pins { display: flex; flex-wrap: wrap; gap: 6px; }
.netlist-pin { font-size: 0.78rem; font-family: var(--font-mono); background: rgba(99,130,167,0.12); border: 1px solid rgba(99,130,167,0.2); border-radius: 4px; padding: 2px 7px; color: #a0bcd4; }

/* ── Netlist collapsible panels (one per ingested netlist) ───────────── */
.netlist-panel { border: 1px solid rgba(99,130,167,0.22); border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.netlist-panel__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer; background: rgba(99,130,167,0.06); }
.netlist-panel__head:hover { background: rgba(99,130,167,0.1); }
.netlist-panel--open .netlist-panel__head { border-bottom: 1px solid rgba(99,130,167,0.22); }
.netlist-panel__chevron { color: #8fa8be; font-size: 0.8rem; width: 0.9rem; text-align: center; }
.netlist-panel__file { font-family: var(--font-mono); font-size: 0.78rem; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netlist-panel__body { padding: 12px; }

/* ── Knowledge documents (FR #55) — reuse netlist-panel collapsibles ───── */
.trace-doc__title { font-weight: 600; flex: 1 1 auto; min-width: 0; }
.trace-doc__content { line-height: 1.55; }
/* Embedded images (e.g. rendered slide PNGs at 1920px) must fit the panel, not overflow it.
   Global (not scoped) so it reaches the <img> inside the child MarkdownView component. */
.trace-doc__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: .5rem 0;
    border: 1px solid rgba(128, 128, 128, .25);
    border-radius: 4px;
}
.trace-doc__content :is(pre, table) { max-width: 100%; overflow-x: auto; }

/* ── Lifecycle group headers (project list) ──────────────────────────── */
.trace-lifecycle-group-header { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 24px 0 8px; display: flex; align-items: center; gap: 8px; }
.trace-lifecycle-group-header--planned     { color: #94a3b8; }
.trace-lifecycle-group-header--in_progress { color: #38bdf8; }
.trace-lifecycle-group-header--completed   { color: #34d399; }
.trace-lifecycle-group-header--cancelled   { color: #f87171; }
.trace-lifecycle-group-count { background: rgba(255,255,255,0.06); border-radius: 10px; padding: 1px 8px; font-weight: 600; font-size: 0.85em; }

/* ── Audit diff table ────────────────────────────────────────────────── */
/* a full body replace can be thousands of characters — cap the row and scroll it, don't push the
   next audit event off the screen */
.audit-diff { margin-top: 0; max-height: 32rem; overflow-y: auto; }
.audit-diff-table { border-collapse: collapse; font-size: 0.8rem; width: 100%; table-layout: fixed; }
.audit-diff-table th { text-align: left; padding: 4px 10px; color: #8fa8be; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #2c3e50; background: #141d26; position: sticky; top: 0; z-index: 1; }
.audit-diff-table td { padding: 5px 10px; border-bottom: 1px solid #1e2d3d; vertical-align: top; overflow-wrap: anywhere; white-space: pre-wrap; }
/* field / before / after — the two value columns split the remaining width evenly */
.audit-diff-table th:first-child, .audit-diff-table td:first-child { width: 12rem; }
.audit-diff-table th:nth-child(2), .audit-diff-table th:nth-child(3) { width: auto; }
/* An expanded event and its diff are ONE open unit spanning two rows, and both are inert on hover:
   highlighting half of it as the pointer crosses the boundary reads as the page flickering.
   The tints are translucent overlays, never literal hexes — a hard-coded dark fill here survived into
   the light theme, where the generic row-hover rule repainted it light, so the open row flipped
   between dark and light as the mouse moved. The light twins each carry one class more than
   `html[data-theme="light"] .trace-table > tbody > tr:hover > td`, so they win on specificity
   wherever they sit in this file rather than relying on source order. */
.audit-diff-row > td { padding: 0 0 10px 0 !important; }
.audit-diff-row > td,
.trace-table > tbody > tr.audit-diff-row:hover > td { background: rgba(255,255,255,0.03); }
.trace-table > tbody > tr.audit-row--expanded > td,
.trace-table > tbody > tr.audit-row--expanded:hover > td { background: rgba(255,255,255,0.06); }
html[data-theme="light"] .audit-diff-row > td,
html[data-theme="light"] .trace-table > tbody > tr.audit-diff-row:hover > td { background: rgba(0,0,0,0.03); }
html[data-theme="light"] .trace-table > tbody > tr.audit-row--expanded > td,
html[data-theme="light"] .trace-table > tbody > tr.audit-row--expanded:hover > td { background: rgba(0,0,0,0.05); }

.diff-field { color: #8fa8be; font-style: italic; white-space: nowrap; }
.diff-before { color: #f87171; background: rgba(248,113,113,0.06); }
.diff-after  { color: #34d399; background: rgba(52,211,153,0.06); }

/* The diff table was dark-only — its header band, borders and the red/green of the two value columns
   were all fixed dark-theme values sitting on a white page. */
html[data-theme="light"] .audit-diff-table th { color: #4a6278; background: #f0f4f8; border-bottom-color: #d1dce8; }
html[data-theme="light"] .audit-diff-table td { border-bottom-color: #e8eef4; }
html[data-theme="light"] .diff-field  { color: #64748b; }
html[data-theme="light"] .diff-before { color: #b91c1c; background: rgba(185,28,28,0.07); }
html[data-theme="light"] .diff-after  { color: #15803d; background: rgba(22,163,74,0.07); }
html[data-theme="light"] .trace-diff-summary { color: #64748b; }
html[data-theme="light"] .trace-diff-summary:hover { color: #1a2535; }

/* ── Trace home info / changelog ───────────────────────────────────── */
.trace-home-info { margin-top: 72px; padding-top: 20px; border-top: 1px solid #2c3e50; }
.trace-version-line { font-size: 0.8rem; color: #506070; margin-bottom: 16px; }
.trace-changelog h3 { font-size: 0.78rem; font-weight: 700; color: #8fa8be; text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 12px; }
.trace-release { background: #1b2736; border: 1px solid #2c3e50; border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; }
.trace-release__version { font-size: 0.875rem; font-weight: 700; color: #38bdf8; margin-right: 12px; }
.trace-release__date { font-size: 0.78rem; color: #506070; }
.trace-release .markdown-body { margin-top: 10px; font-size: 0.85rem; }
html[data-theme="light"] .trace-changelog h3 { color: #4a6278; }
html[data-theme="light"] .trace-version-line { color: #7a9ab0; }
html[data-theme="light"] .trace-release { background: #ffffff; border-color: #d1dce8; }
html[data-theme="light"] .trace-release__version { color: #0284c7; }
html[data-theme="light"] .trace-release__date { color: #7a9ab0; }
html[data-theme="light"] .trace-home-info { border-top-color: #d1dce8; }

/* ── Timeline ────────────────────────────────────────────────────────── */
.timeline-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 20px; }
.trace-filter-select { background: #1b2736; border: 1px solid #2c3e50; color: #e2e8f0; padding: 6px 10px; border-radius: 5px; font-size: 0.85rem; }
.trace-filter-select:focus { outline: none; border-color: #38bdf8; }
.timeline-day-header { font-size: 0.72rem; font-weight: 700; color: #506070; text-transform: uppercase; letter-spacing: 0.07em; padding: 20px 0 6px; border-bottom: 1px solid #2c3e50; margin-bottom: 4px; }
.timeline-event { display: grid; grid-template-columns: 44px 12px 1fr; gap: 0 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid rgba(44,62,80,0.4); }
.timeline-event:last-child { border-bottom: none; }
.timeline-event__time { font-size: 0.75rem; color: #506070; padding-top: 2px; text-align: right; white-space: nowrap; }
.timeline-event__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.timeline-event__dot--pass { background: #34d399; box-shadow: 0 0 5px rgba(52,211,153,0.4); }
.timeline-event__dot--fail { background: #f87171; box-shadow: 0 0 5px rgba(248,113,113,0.4); }
.timeline-event__dot--warn { background: #fbbf24; box-shadow: 0 0 5px rgba(251,191,36,0.4); }
.timeline-event__dot--idle { background: #4b6882; }
.timeline-event__body { min-width: 0; }
.timeline-event__main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.875rem; }
.timeline-event__entity { color: #8fa8be; }
.timeline-event__id { font-family: var(--font-mono); font-size: 0.8rem; color: #7dd3fc; }
.timeline-event__meta { font-size: 0.78rem; color: #506070; margin-top: 2px; }

/* ── GRR study detail ────────────────────────────────────────────────── */
.trace-grr-verdict { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.trace-grr-verdict__reason { margin: 0; font-size: 0.875rem; color: #94a3b8; line-height: 1.6; max-width: 600px; }
.trace-badge--lg { font-size: 0.9rem; padding: 4px 14px; white-space: nowrap; flex-shrink: 0; }
.trace-grr-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.trace-grr-stat { display: flex; flex-direction: column; align-items: center; min-width: 110px; padding: 10px 16px; border-radius: 8px; background: #1b2736; border: 1px solid #2c3e50; }
.trace-grr-stat__label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; margin-bottom: 4px; }
.trace-grr-stat__value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.trace-grr-stat--pass { border-color: rgba(52,211,153,0.35); color: #34d399; }
.trace-grr-stat--warn { border-color: rgba(251,191,36,0.35); color: #fbbf24; }
.trace-grr-stat--fail { border-color: rgba(248,113,113,0.35); color: #f87171; }
html[data-theme="light"] .trace-grr-stat { background: #ffffff; border-color: #d1dce8; }
html[data-theme="light"] .trace-grr-stat--pass { border-color: rgba(22,163,74,0.4); color: #15803d; }
html[data-theme="light"] .trace-grr-stat--warn { border-color: rgba(180,83,9,0.4); color: #b45309; }
html[data-theme="light"] .trace-grr-stat--fail { border-color: rgba(185,28,28,0.4); color: #b91c1c; }
html[data-theme="light"] .trace-grr-verdict__reason { color: #4a6278; }

/* ── Help page layout ────────────────────────────────────────────────── */
.trace-help-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; min-height: 400px; }
.trace-help-sidebar { background: #1b2736; border: 1px solid #2c3e50; border-radius: 8px; padding: 12px 0; overflow-y: auto; max-height: 75vh; }
.trace-help-sidebar-item { display: block; padding: 8px 16px; font-size: 0.85rem; color: #8fa8be; text-decoration: none; cursor: pointer; transition: background 0.1s, color 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-help-sidebar-item:hover { background: rgba(56,189,248,0.08); color: #e2e8f0; }
.trace-help-sidebar-item--active { background: rgba(56,189,248,0.12); color: #38bdf8; font-weight: 600; }
.trace-help-content { background: #1b2736; border: 1px solid #2c3e50; border-radius: 8px; padding: 24px 28px; overflow-y: auto; max-height: 75vh; }

/* ── Project detail sidebar layout ──────────────────────────────────── */
.trace-project-layout { display: grid; grid-template-columns: 216px 1fr; border: 1px solid #2c3e50; border-radius: 10px; overflow: hidden; background: #141d26; min-height: 500px; }
.trace-project-layout--collapsed { grid-template-columns: 46px 1fr; }

.trace-project-sidebar { background: #141d26; border-right: 1px solid #2c3e50; display: flex; flex-direction: column; overflow: hidden; }

.trace-sidebar-collapse-btn { display: flex; align-items: center; justify-content: flex-end; padding: 7px 12px; background: none; border: none; border-bottom: 1px solid #2c3e50; color: #506070; cursor: pointer; font-size: 0.95rem; width: 100%; flex-shrink: 0; transition: color 0.12s; user-select: none; line-height: 1; }
.trace-sidebar-collapse-btn:hover { color: #38bdf8; }
.trace-project-layout--collapsed .trace-sidebar-collapse-btn { justify-content: center; }

.trace-sidebar-nav { flex: 1; overflow-y: auto; padding: 6px 0; }

.trace-sidebar-item { display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 12px; width: 100%; background: none; border: none; border-left: 2px solid transparent; color: #8fa8be; font-size: 0.845rem; cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s, border-color 0.1s; white-space: nowrap; overflow: hidden; }
.trace-sidebar-item:hover { background: rgba(56,189,248,0.06); color: #e2e8f0; }
.trace-sidebar-item--active { background: rgba(56,189,248,0.1); border-left-color: #38bdf8; color: #38bdf8; font-weight: 600; }

.trace-sidebar-item__ico { width: 1.15em; flex: none; text-align: center; opacity: 0.8; font-size: 0.95em; }
.trace-sidebar-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.trace-project-layout--collapsed .trace-sidebar-item__ico { font-size: 1.05em; opacity: 0.9; }
.trace-sidebar-item__count { font-size: 0.7rem; color: #506070; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.trace-sidebar-item--active .trace-sidebar-item__count { color: rgba(56,189,248,0.65); background: rgba(56,189,248,0.1); }
.trace-sidebar-item__warn-dot { width: 6px; height: 6px; background: #fbbf24; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px rgba(251,191,36,0.5); }

.trace-project-layout--collapsed .trace-sidebar-item { padding: 10px; justify-content: center; }
.trace-project-layout--collapsed .trace-sidebar-item__label { display: none; }
.trace-project-layout--collapsed .trace-sidebar-item__count { display: none; }

.trace-project-main { background: #1b2736; padding: 20px 24px; overflow: auto; min-width: 0; }

/* Mobile hamburger — hidden on desktop */
.trace-sidebar-mobile-bar { display: none; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #2c3e50; }
.trace-sidebar-toggle { display: none; background: #141d26; border: 1px solid #2c3e50; color: #8fa8be; padding: 7px 11px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; transition: border-color 0.12s, color 0.12s; }
.trace-sidebar-toggle:hover { border-color: #38bdf8; color: #38bdf8; }
.trace-mobile-section-label { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; }
.trace-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 199; cursor: pointer; }

/* Requirement rows tinted by coverage gap */
.trace-tr--gap-missing td { background: rgba(248,113,113,0.04); }
.trace-tr--gap-weak td { background: rgba(251,191,36,0.04); }
.trace-table tbody tr.trace-tr--gap-missing:hover td { background: rgba(248,113,113,0.08); }
.trace-table tbody tr.trace-tr--gap-weak:hover td { background: rgba(251,191,36,0.08); }
.trace-tr--obsolete td { opacity: 0.45; }
.trace-table tbody tr.trace-tr--obsolete:hover td { opacity: 0.65; }

/* Project health — card border */
.trace-project-card--health-blocked { border-left: 3px solid hsl(0,70%,50%) !important; }
.trace-project-card--health-warning { border-left: 3px solid hsl(38,80%,55%) !important; }

/* Project health — inline badges */
.trace-badge--health-blocked { background: hsl(0,60%,18%); color: hsl(0,70%,65%); border: 1px solid hsl(0,60%,35%); }
.trace-badge--health-warning { background: hsl(38,60%,18%); color: hsl(38,80%,65%); border: 1px solid hsl(38,60%,35%); }

/* Project health — detail page banner */
.trace-health-banner {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem; border-radius: 6px; margin-bottom: 1rem;
    font-size: 0.875rem;
}
.trace-health-banner--blocked {
    background: hsl(0,60%,14%); color: hsl(0,70%,70%); border: 1px solid hsl(0,60%,30%);
}
.trace-health-banner--warning {
    background: hsl(38,60%,14%); color: hsl(38,80%,70%); border: 1px solid hsl(38,60%,30%);
}
.trace-health-banner__icon { font-size: 1rem; }
.trace-health-banner__title { font-weight: 600; }
.trace-health-banner__detail { opacity: 0.85; }
.trace-health-banner__detail a { color: inherit; text-decoration: underline; }
.trace-health-banner__detail a:hover { opacity: 1; }

@media (max-width: 768px) {
    .trace-project-layout { grid-template-columns: 1fr; border-radius: 8px; }

    .trace-project-sidebar {
        position: fixed; top: 48px; left: 0; bottom: 0; width: 280px; z-index: 200;
        border-right: 1px solid #3d5166; box-shadow: 4px 0 24px rgba(0,0,0,0.65);
        transform: translateX(-100%); transition: transform 0.22s ease; border-radius: 0;
    }
    .trace-project-sidebar--open { transform: translateX(0); }
    .trace-sidebar-nav { padding-top: 14px; }
    .trace-sidebar-collapse-btn { display: none; }
    .trace-sidebar-mobile-bar { display: flex; }
    .trace-sidebar-toggle { display: block; }
    .trace-project-main { padding: 16px; }

    /* General narrow-screen breathing room + overflow containment */
    .trace-page { padding: 18px 14px 36px; }
    .trace-page__header { flex-wrap: wrap; }
    .trace-health-banner { flex-wrap: wrap; }
    .rpt-section { overflow-x: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   APPLICATION NAV BAR
   ═══════════════════════════════════════════════════════════════════════ */

/* App shell: persistent left side-nav + content column (mobile: nav becomes a drawer). */
.app-shell { flex: 1; min-height: 0; display: flex; }
.app-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

.app-sidenav {
    width: 208px; flex: none; display: flex; flex-direction: column;
    background: #0f1923; border-right: 1px solid #1e2d3d; z-index: 500;
}

.app-sidenav__brand {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    padding: 14px 18px; border-bottom: 1px solid #1e2d3d; flex-shrink: 0;
}
.app-sidenav__brand-name {
    font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em;
    text-transform: uppercase; color: #e2e8f0;
}
/* E# colour mark. Stays as the rail icon when the side-nav is collapsed (the wordmark hides). */
.app-sidenav__brand-logo {
    height: 24px; width: auto; flex: none; display: block;
}

/* ── Global footer — persistent E-Sharp AB credit + homepage link on every page ── */
.app-footer {
    flex: none; display: flex; align-items: center; gap: 1.25rem;
    padding: 6px 16px; border-top: 1px solid #1e2d3d; background: #0f1923;
    font-size: 0.78rem; color: #6b8299;
}
.app-footer__brand { display: inline-flex; align-items: center; gap: 7px; }
.app-footer__logo { height: 15px; width: auto; flex: none; display: block; }
.app-footer__link { color: inherit; text-decoration: none; }
.app-footer__link:hover { color: #e2e8f0; }
html[data-theme="light"] .app-footer { background: #f1f5f9; border-top-color: #d1dce8; color: #64748b; }
html[data-theme="light"] .app-footer__link:hover { color: #1a2535; }

.app-sidenav__links { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; flex: 1; overflow-y: auto; }

.app-sidenav__link {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 7px;
    color: #8fa8be; font-size: 0.875rem; font-weight: 500; text-decoration: none;
    transition: color 0.12s, background 0.12s; white-space: nowrap;
}
.app-sidenav__link:hover { color: #e2e8f0; background: rgba(255,255,255,0.04); }
.app-sidenav__link.active { color: #38bdf8; background: rgba(56,189,248,0.1); font-weight: 600; }
.app-sidenav__ico { width: 1.2em; flex: none; text-align: center; opacity: 0.85; }
.app-sidenav__ext { margin-left: auto; opacity: 0.5; flex: none; }
.app-sidenav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Expandable section group (e.g. Trace area pages) */
.app-sidenav__group { display: flex; flex-direction: column; }
.app-sidenav__grouphdr { display: flex; align-items: center; }
.app-sidenav__grouphdr .app-sidenav__link { flex: 1; }
.app-sidenav__expander { background: none; border: none; color: #8fa8be; cursor: pointer; padding: 6px 12px; display: flex; align-items: center; }
.app-sidenav__expander:hover { color: #e2e8f0; }
.app-sidenav__sublinks { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px; }
.app-sidenav__sublink { display: block; padding: 7px 12px 7px 38px; border-radius: 7px; color: #7c92a8; font-size: 0.83rem; text-decoration: none; white-space: nowrap; transition: color 0.12s, background 0.12s; }
.app-sidenav__sublink:hover { color: #e2e8f0; background: rgba(255,255,255,0.04); }
.app-sidenav__sublink.active { color: #38bdf8; background: rgba(56,189,248,0.1); font-weight: 600; }

/* WRAPS, because this row outgrew the sidebar and had no way to say so.
   208px of sidebar less 2x14px padding leaves 180px. The row now holds nine items — initials, key,
   sign-out, licence, usage, settings, access, collapse, theme — and at the old 32px with 8px gaps
   that wanted 350px. Without flex-wrap a flex row does not shrink past its content: it simply
   overflows, so the last icons rendered on top of the page next to it.
   At 30px with 6px gaps five fit per row (5x30 + 4x6 = 174), so nine land as 5 + 4. */
.app-sidenav__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 14px; border-top: 1px solid #1e2d3d; flex-shrink: 0; }
/* The initials badge is a link to the access page, so it must not inherit link styling: an
   underlined, differently-coloured circle reads as broken rather than as clickable. */
.app-sidenav__user { text-decoration: none; cursor: pointer; transition: background 0.15s ease; }
.app-sidenav__user:hover { background: rgba(56,189,248,0.24); }
.app-sidenav__user { width: 30px; height: 30px; border-radius: 50%; background: rgba(56,189,248,0.12); color: #38bdf8; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; }
.app-sidenav__action-btn, .app-sidenav__theme-btn {
    background: none; border: 1px solid #2c3e50; color: #8fa8be;
    width: 30px; height: 30px; border-radius: 6px; cursor: pointer; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.12s, color 0.12s; padding: 0;
}
.app-sidenav__action-btn:hover, .app-sidenav__theme-btn:hover { border-color: #38bdf8; color: #38bdf8; }
/* No margin-left:auto. It used to push the theme button to the far right of a single row; now that
   the row wraps, an auto margin strands it alone against the right edge of the second row with a
   hole beside it. The icons pack from the left instead. */

/* Mobile top bar + drawer backdrop (hidden on desktop) */
.app-topbar { display: none; }
.app-topbar__burger { background: none; border: none; color: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
.app-topbar__brand { font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; color: inherit; text-decoration: none; }
.app-nav-backdrop { display: none; }

@media (max-width: 768px) {
    .app-sidenav {
        position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
        transform: translateX(-100%); transition: transform 0.22s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.55);
    }
    .app-sidenav--open { transform: translateX(0); }
    .app-nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 480; }
    .app-topbar {
        display: flex; align-items: center; gap: 10px; height: 48px; flex-shrink: 0;
        padding: 0 12px; background: #0f1923; border-bottom: 1px solid #1e2d3d; color: #e2e8f0;
    }
}

.app-main { flex: 1; min-height: 0; overflow-y: auto; }

/* ── Force-collapsed side-nav rail (desktop only; toggled via the « button) ── */
@media (min-width: 769px) {
    html[data-sidenav="collapsed"] .app-sidenav { width: 56px; }
    html[data-sidenav="collapsed"] .app-sidenav__label,
    html[data-sidenav="collapsed"] .app-sidenav__brand-name,
    html[data-sidenav="collapsed"] .app-sidenav__sublinks,
    html[data-sidenav="collapsed"] .app-sidenav__expander,
    html[data-sidenav="collapsed"] .app-sidenav__user { display: none; }
    html[data-sidenav="collapsed"] .app-sidenav__link,
    html[data-sidenav="collapsed"] .app-sidenav__sublink,
    html[data-sidenav="collapsed"] .app-sidenav__brand { justify-content: center; padding-left: 0; padding-right: 0; }
    html[data-sidenav="collapsed"] .app-sidenav__links { padding-left: 6px; padding-right: 6px; }
    /* nowrap is deliberate. The base rule wraps so the expanded row does not overflow, but wrapping
       a COLUMN means wrapping into a second column — which on a short viewport would push icons
       straight out through the side of a 56px rail, the same bug wearing the other orientation. */
    html[data-sidenav="collapsed"] .app-sidenav__actions { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
}
/* The collapse toggle is desktop-only — on mobile the nav is a full drawer. */
@media (max-width: 768px) { .app-sidenav__collapse-btn { display: none; } }

html, body { display: flex; flex-direction: column; height: 100%; margin: 0; }

/* Printing (e.g. Trace reports): drop the app chrome and let content flow full-height */
@media print {
    .app-sidenav, .app-topbar, .app-nav-backdrop { display: none !important; }
    .app-shell, .app-content { display: block; height: auto; min-height: 0; }
    .app-main { overflow: visible; height: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ORCHESTRA / FLEET MONITOR
   ═══════════════════════════════════════════════════════════════════════ */

.orch-page { }

.orch-last-refresh { font-size: 0.8rem; color: #506070; }

/* Station grid */
.orch-station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Station card */
.orch-station-card {
    background: #1b2736;
    border: 1px solid #2c3e50;
    border-top: 3px solid #38bdf8;
    border-radius: 10px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.14s, box-shadow 0.14s, border-top-color 0.14s;
    min-height: 120px;
}
.orch-station-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.orch-station-card--offline { border-top-color: #4b6882; opacity: 0.75; }
.orch-station-card--offline:hover { opacity: 1; }

.orch-station-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.orch-station-card__name { font-size: 1rem; font-weight: 700; color: #e2e8f0; }
.orch-station-card__test { font-size: 0.845rem; color: #8fa8be; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orch-station-card__step { font-size: 0.78rem; color: #506070; }
.orch-station-card__offline-msg { font-size: 0.82rem; color: #506070; font-style: italic; }
.orch-station-card__idle-msg { font-size: 0.82rem; color: #506070; }

.orch-station-card__footer { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

.orch-step-name { color: #506070; }

/* State badge */
.orch-state-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}
.orch-state-badge--running { background: rgba(56,189,248,0.12); color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.orch-state-badge--idle    { background: rgba(52,211,153,0.1);  color: #34d399; border: 1px solid rgba(52,211,153,0.25); }
.orch-state-badge--offline { background: rgba(75,104,130,0.15); color: #6b8fa8; border: 1px solid rgba(75,104,130,0.3); }
.orch-state-badge--lg { font-size: 0.8rem; padding: 4px 14px; }

/* Progress bar */
.orch-progress {
    height: 4px;
    background: #1e2d3d;
    border-radius: 2px;
    overflow: hidden;
}
.orch-progress--wide { height: 6px; border-radius: 3px; margin: 6px 0; }
.orch-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #7dd3fc);
    border-radius: 2px;
    transition: width 0.4s ease;
    min-width: 2px;
}

/* Version + tag chips */
.orch-version { font-size: 0.72rem; color: #506070; font-family: var(--font-mono); }
.orch-tag { font-size: 0.68rem; color: #8fa8be; background: rgba(255,255,255,0.05); border: 1px solid #2c3e50; border-radius: 10px; padding: 1px 7px; }

/* Running card (station detail) */
.orch-running-card {
    background: #141d26;
    border: 1px solid #2c3e50;
    border-left: 3px solid #38bdf8;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.orch-running-card__test { font-size: 1.05rem; font-weight: 700; color: #e2e8f0; }
.orch-running-card__step { font-size: 0.855rem; color: #8fa8be; }
.orch-running-card__elapsed { font-size: 0.82rem; color: #506070; }

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Applied when <html data-theme="light">
   ═══════════════════════════════════════════════════════════════════════ */

html[data-theme="light"] {
    --lbg: #f0f4f8;
    --lsurface-0: #ffffff;
    --lsurface-1: #f8fafc;
    --lborder: #d1dce8;
    --ltext-pri: #1a2535;
    --ltext-sec: #4a6278;
    --ltext-muted: #7a9ab0;
    --laccent: #0284c7;
}

html[data-theme="light"] body {
    background-color: #f0f4f8;
    color: #1a2535;
}

html[data-theme="light"] select {
    background-color: #ffffff;
    color: #1a2535;
    border-color: #d1dce8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a6278' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* Nav (side-nav + mobile top bar) */
html[data-theme="light"] .app-sidenav { background: #ffffff; border-right-color: #d1dce8; }
html[data-theme="light"] .app-sidenav__brand { border-bottom-color: #d1dce8; }
html[data-theme="light"] .app-sidenav__brand-name { color: #1a2535; }
html[data-theme="light"] .app-sidenav__link { color: #4a6278; }
html[data-theme="light"] .app-sidenav__link:hover { color: #1a2535; background: rgba(2,132,199,0.06); }
html[data-theme="light"] .app-sidenav__link.active { color: #0284c7; background: rgba(2,132,199,0.1); }
html[data-theme="light"] .app-sidenav__expander { color: #4a6278; }
html[data-theme="light"] .app-sidenav__expander:hover { color: #1a2535; }
html[data-theme="light"] .app-sidenav__sublink { color: #64748b; }
html[data-theme="light"] .app-sidenav__sublink:hover { color: #1a2535; background: rgba(2,132,199,0.06); }
html[data-theme="light"] .app-sidenav__sublink.active { color: #0284c7; background: rgba(2,132,199,0.1); }
html[data-theme="light"] .app-sidenav__actions { border-top-color: #d1dce8; }
html[data-theme="light"] .app-sidenav__user { background: rgba(2,132,199,0.1); color: #0284c7; }
html[data-theme="light"] .app-sidenav__user:hover { background: rgba(2,132,199,0.2); }
html[data-theme="light"] .app-sidenav__action-btn,
html[data-theme="light"] .app-sidenav__theme-btn { border-color: #d1dce8; color: #4a6278; }
html[data-theme="light"] .app-sidenav__action-btn:hover,
html[data-theme="light"] .app-sidenav__theme-btn:hover { border-color: #0284c7; color: #0284c7; }
html[data-theme="light"] .app-topbar { background: #ffffff; border-bottom-color: #d1dce8; color: #1a2535; }

/* Stat badges */
html[data-theme="light"] .trace-stat--pass { background: rgba(22,163,74,0.08); color: #15803d; border-color: rgba(22,163,74,0.22); }
html[data-theme="light"] .trace-stat--warn { background: rgba(180,83,9,0.08);  color: #b45309; border-color: rgba(180,83,9,0.22);  }
html[data-theme="light"] .trace-stat--fail { background: rgba(185,28,28,0.08); color: #b91c1c; border-color: rgba(185,28,28,0.22); }
html[data-theme="light"] .trace-stat--idle { background: rgba(71,85,105,0.08); color: #475569; border-color: rgba(71,85,105,0.22); }

/* Metric badges */
html[data-theme="light"] .trace-metric-badge--percent { background: hsl(var(--cov-hue,0),65%,93%); color: hsl(var(--cov-hue,0),60%,28%); border-color: hsl(var(--cov-hue,0),50%,72%); }
html[data-theme="light"] .trace-metric-badge--high   { background: rgba(22,163,74,0.08);  color: #15803d; border-color: rgba(22,163,74,0.22);  }
html[data-theme="light"] .trace-metric-badge--medium { background: rgba(180,83,9,0.08);   color: #b45309; border-color: rgba(180,83,9,0.22);   }
html[data-theme="light"] .trace-metric-badge--low    { background: rgba(185,28,28,0.08);  color: #b91c1c; border-color: rgba(185,28,28,0.22);  }

/* Badges */
html[data-theme="light"] .trace-badge--fail   { background: rgba(185,28,28,0.08);  color: #b91c1c; border-color: rgba(185,28,28,0.22);  }
html[data-theme="light"] .trace-badge--warn   { background: rgba(180,83,9,0.08);   color: #b45309; border-color: rgba(180,83,9,0.22);   }
html[data-theme="light"] .trace-badge--pass   { background: rgba(22,163,74,0.08);  color: #15803d; border-color: rgba(22,163,74,0.22);  }
html[data-theme="light"] .trace-badge--idle   { background: rgba(71,85,105,0.08);  color: #475569; border-color: rgba(71,85,105,0.22);  }
html[data-theme="light"] .trace-badge--info   { background: rgba(2,132,199,0.08);  color: #0369a1; border-color: rgba(2,132,199,0.22);  }
html[data-theme="light"] .trace-badge--discipline { background: rgba(13,148,136,0.08); color: #0f766e; border-color: rgba(13,148,136,0.22); }
html[data-theme="light"] .trace-badge--discipline-default { background: rgba(100,116,139,0.08); color: #64748b; border-color: rgba(100,116,139,0.35); }
html[data-theme="light"] .trace-badge--ip     { background: rgba(180,83,9,0.08);   color: #b45309; border-color: rgba(180,83,9,0.22);   }
html[data-theme="light"] .trace-badge--notice { background: rgba(194,65,12,0.08);  color: #c2410c; border-color: rgba(194,65,12,0.22);  }
html[data-theme="light"] .trace-badge--health-blocked { background: hsl(0,65%,93%);  color: hsl(0,60%,28%);  border-color: hsl(0,50%,72%);  }
html[data-theme="light"] .trace-badge--health-warning { background: hsl(38,65%,92%); color: hsl(38,55%,28%); border-color: hsl(38,50%,70%); }
html[data-theme="light"] .trace-badge--lifecycle-planned     { background: rgba(71,85,105,0.08);   color: #475569; border-color: rgba(71,85,105,0.22);   }
html[data-theme="light"] .trace-badge--lifecycle-in_progress { background: rgba(2,132,199,0.08);   color: #0369a1; border-color: rgba(2,132,199,0.22);   }
html[data-theme="light"] .trace-badge--lifecycle-completed   { background: rgba(22,163,74,0.08);   color: #15803d; border-color: rgba(22,163,74,0.22);   }
html[data-theme="light"] .trace-badge--lifecycle-cancelled   { background: rgba(185,28,28,0.08);   color: #b91c1c; border-color: rgba(185,28,28,0.22);   }
html[data-theme="light"] .trace-badge--lead         { background: rgba(79,70,229,0.08);   color: #4338ca; border-color: rgba(79,70,229,0.22);   }
html[data-theme="light"] .trace-badge--lead-missing { background: rgba(100,116,139,0.06); color: #64748b; border-color: rgba(100,116,139,0.35); }
html[data-theme="light"] .trace-badge--tracked      { background: rgba(2,132,199,0.08);   color: #0369a1; border-color: rgba(2,132,199,0.22);   }
html[data-theme="light"] .trace-badge--muted        { background: rgba(71,85,105,0.06);   color: #475569; border-color: rgba(71,85,105,0.22);   }
html[data-theme="light"] button.trace-badge:focus-visible { outline-color: #0284c7; }

/* Health banners (project detail page) */
html[data-theme="light"] .trace-health-banner--blocked { background: hsl(0,65%,95%);  color: hsl(0,60%,28%);  border-color: hsl(0,50%,78%);  }
html[data-theme="light"] .trace-health-banner--warning { background: hsl(38,65%,94%); color: hsl(38,55%,28%); border-color: hsl(38,50%,76%); }
/* Links */
html[data-theme="light"] .trace-page a                            { color: #2563eb; }
html[data-theme="light"] .trace-page a:visited                    { color: #7c3aed; }
html[data-theme="light"] .trace-page a:hover                      { color: #1d4ed8; }
html[data-theme="light"] .trace-page a.trace-back,
html[data-theme="light"] .trace-page a.trace-back:visited        { color: #64748b; }
html[data-theme="light"] .trace-page a.trace-back:hover          { color: #2563eb; }
html[data-theme="light"] .trace-page a.trace-link-btn,
html[data-theme="light"] .trace-page a.trace-link-btn:visited    { color: #64748b; }
html[data-theme="light"] .trace-page a.trace-link-btn:hover      { color: #2563eb; }
html[data-theme="light"] .trace-page a.trace-project-card,
html[data-theme="light"] .trace-page a.trace-project-card:visited { color: inherit; }
html[data-theme="light"] .trace-page a.trace-stat--pass,
html[data-theme="light"] .trace-page a.trace-stat--pass:visited  { color: #15803d; }
html[data-theme="light"] .trace-page a.trace-stat--warn,
html[data-theme="light"] .trace-page a.trace-stat--warn:visited  { color: #b45309; }
html[data-theme="light"] .trace-page a.trace-stat--fail,
html[data-theme="light"] .trace-page a.trace-stat--fail:visited  { color: #b91c1c; }
html[data-theme="light"] .trace-page a.trace-stat--idle,
html[data-theme="light"] .trace-page a.trace-stat--idle:visited  { color: #475569; }
html[data-theme="light"] .trace-section-hint a                    { color: #4a6278; }
html[data-theme="light"] .trace-section-hint a:hover              { color: #2563eb; }
html[data-theme="light"] .timeline-event__id                       { color: #2563eb; }
html[data-theme="light"] .trace-timeline__action                  { color: #1a2535; }
html[data-theme="light"] .trace-timeline__meta                    { color: #4a6278; }
html[data-theme="light"] .trace-lifecycle-group-header--planned     { color: #64748b; }
html[data-theme="light"] .trace-lifecycle-group-header--in_progress { color: #0369a1; }
html[data-theme="light"] .trace-lifecycle-group-header--completed   { color: #15803d; }
html[data-theme="light"] .trace-lifecycle-group-header--cancelled   { color: #b91c1c; }

/* Trace pages */
html[data-theme="light"] .trace-page { background: transparent; }
html[data-theme="light"] .trace-page__header h1 { color: #1a2535; }
html[data-theme="light"] .trace-page__subtitle { color: #4a6278; }
html[data-theme="light"] .trace-project-header { border-bottom-color: #d1dce8; }
html[data-theme="light"] .trace-project-header__title { color: #1a2535; }
html[data-theme="light"] .trace-project-header__sub { color: #4a6278; }
/* Must beat html[data-theme="light"] .trace-page a { color: #2563eb } which has specificity (0,2,2) */
html[data-theme="light"] .trace-page a.trace-nav-btn,
html[data-theme="light"] .trace-page a.trace-nav-btn:visited { color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
html[data-theme="light"] .trace-page a.trace-nav-btn:hover   { color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
html[data-theme="light"] .trace-project-header__metrics { border-color: #d1dce8; }
html[data-theme="light"] .trace-project-metric { background: #f8fafc; border-right-color: #e2e8f0; }
html[data-theme="light"] .trace-project-metric__value { color: #1a2535; }
html[data-theme="light"] .trace-project-metric__label { color: #4a6278; }
html[data-theme="light"] .trace-project-metric--pct { background: hsl(var(--cov-hue,0),65%,93%); }
html[data-theme="light"] .trace-project-metric--pct .trace-project-metric__value { color: hsl(var(--cov-hue,0),60%,28%); }
html[data-theme="light"] .trace-project-metric--pct .trace-project-metric__label { color: hsl(var(--cov-hue,0),40%,45%); }
html[data-theme="light"] .trace-project-metric--warn { background: #fffbeb; }
html[data-theme="light"] .trace-project-metric--warn .trace-project-metric__value { color: #d97706; }
html[data-theme="light"] .trace-project-metric--error { background: #fef2f2; }
html[data-theme="light"] .trace-project-metric--error .trace-project-metric__value { color: #dc2626; }
html[data-theme="light"] .trace-relations-wrap { background: #ffffff; border-color: #d1dce8; }
html[data-theme="light"] .trace-relations-table th { background: #f0f4f8; color: #4a6278; border-bottom-color: #d1dce8; }
html[data-theme="light"] .trace-relations-table td { color: #1a2535; border-bottom-color: #e8eef4; }
html[data-theme="light"] .trace-relations-table tbody tr:hover td { background: #f0f4f8; }
html[data-theme="light"] .trace-relations-table__rel { color: #4a6278; }
html[data-theme="light"] .trace-section h2 { color: #4a6278; border-bottom-color: #d1dce8; }
html[data-theme="light"] .trace-table-wrap { background: #ffffff; border-color: #d1dce8; }
html[data-theme="light"] .trace-table th { background: #f0f4f8; color: #4a6278; }
html[data-theme="light"] .trace-table td { color: #1a2535; border-bottom-color: #e8eef4; }
html[data-theme="light"] .trace-table > tbody > tr:hover > td { background: #f0f4f8; }
html[data-theme="light"] .trace-table code { color: #1e40af; background: rgba(37,99,235,0.07); }
/* Component-detail meta tables (Details / Properties) */
html[data-theme="light"] .comp-detail-meta th { color: #4a6278; }
html[data-theme="light"] .comp-detail-meta td { color: #1a2535; }
html[data-theme="light"] .comp-detail-eol { color: #b45309; }
html[data-theme="light"] .trace-user-link { color: #2563eb; border-bottom-color: rgba(37,99,235,0.3); }
html[data-theme="light"] .trace-nudge-link { color: #2563eb; }
html[data-theme="light"] .trace-rule-detail__label { color: #64748b; }
html[data-theme="light"] .trace-deviation-chip code { color: #b91c1c; }
html[data-theme="light"] .netlist-pin { color: #4a6278; background: rgba(74,98,120,0.07); border-color: rgba(74,98,120,0.2); }
html[data-theme="light"] .trace-filter-input { background: #ffffff; border-color: #d1dce8; color: #1a2535; }
html[data-theme="light"] .trace-filter-input:focus { border-color: #0284c7; }
html[data-theme="light"] .trace-filter-select { background: #ffffff; border-color: #d1dce8; color: #1a2535; }
html[data-theme="light"] .trace-filter-select:focus { border-color: #0284c7; }
html[data-theme="light"] .trace-filter-clear { border-color: #d1dce8; color: #64748b; }
html[data-theme="light"] .trace-filter-clear:hover { border-color: #0284c7; color: #1a2535; }
html[data-theme="light"] .trace-project-card { background: #ffffff; border-color: #d1dce8; }
html[data-theme="light"] .trace-project-card__title { color: #1a2535; }
html[data-theme="light"] .trace-project-card__meta { color: #4a6278; }
/* Discipline chips/tags are neutral (no per-item colour), so they need explicit light-theme colours. */
html[data-theme="light"] .trace-discipline-chip { background: #f1f5f9; color: #475569; border-color: #d1dce8; }
html[data-theme="light"] .trace-discipline-chip:hover { color: #1a2535; border-color: #94a3b8; }
html[data-theme="light"] .trace-discipline-chip.is-active { background: #2563eb; border-color: #2563eb; color: #ffffff; }
html[data-theme="light"] .trace-project-card__discipline { background: #f1f5f9; color: #475569; border-color: #d1dce8; }
html[data-theme="light"] .trace-project-layout { background: #f0f4f8; border-color: #d1dce8; }
html[data-theme="light"] .trace-project-sidebar { background: #ffffff; border-right-color: #d1dce8; }
html[data-theme="light"] .trace-sidebar-collapse-btn { border-bottom-color: #d1dce8; color: #7a9ab0; }
html[data-theme="light"] .trace-sidebar-item { color: #4a6278; }
html[data-theme="light"] .trace-sidebar-item:hover { background: rgba(2,132,199,0.06); color: #1a2535; }
html[data-theme="light"] .trace-sidebar-item--active { background: rgba(2,132,199,0.08); border-left-color: #0284c7; color: #0284c7; }
html[data-theme="light"] .trace-sidebar-item__count { color: #7a9ab0; background: rgba(0,0,0,0.04); }
html[data-theme="light"] .trace-project-main { background: #f8fafc; }
html[data-theme="light"] .trace-sidebar-mobile-bar { border-bottom-color: #d1dce8; }
html[data-theme="light"] .trace-sidebar-toggle { background: #ffffff; border-color: #d1dce8; color: #4a6278; }
html[data-theme="light"] .trace-sidebar-toggle:hover { border-color: #0284c7; color: #0284c7; }
html[data-theme="light"] .trace-mobile-section-label { color: #1a2535; }
html[data-theme="light"] .trace-memory__item { background: #ffffff; border-color: #d1dce8; border-left-color: #0284c7; }
html[data-theme="light"] .trace-memory__statement { color: #1a2535; }
html[data-theme="light"] .trace-loading { color: #4a6278; }
html[data-theme="light"] .trace-empty { color: #7a9ab0; }
html[data-theme="light"] .trace-error { background: rgba(220,38,38,0.05); border-color: rgba(220,38,38,0.25); color: #b91c1c; }
html[data-theme="light"] .trace-nudge--warn { background: rgba(217,119,6,0.05); border-color: rgba(217,119,6,0.3); color: #92400e; }

/* Home landing */
html[data-theme="light"] .home-landing__title { color: #1a2535; }
html[data-theme="light"] .home-landing__subtitle { color: #4a6278; }
html[data-theme="light"] .home-landing__card { background: #ffffff; border-color: #d1dce8; color: #1a2535; }
html[data-theme="light"] .home-landing__card:hover { border-color: #0284c7; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
html[data-theme="light"] .home-landing__card-title { color: #1a2535; }
html[data-theme="light"] .home-landing__card-desc { color: #4a6278; }

/* Orchestra */
html[data-theme="light"] .orch-station-card { background: #ffffff; border-color: #d1dce8; border-top-color: #0284c7; }
html[data-theme="light"] .orch-station-card--offline { border-top-color: #94a3b8; }
html[data-theme="light"] .orch-station-card__name { color: #1a2535; }
html[data-theme="light"] .orch-station-card__test { color: #4a6278; }
html[data-theme="light"] .orch-running-card { background: #f8fafc; border-color: #d1dce8; border-left-color: #0284c7; }
html[data-theme="light"] .orch-running-card__test { color: #1a2535; }
html[data-theme="light"] .orch-progress { background: #e2eaf2; }
html[data-theme="light"] .orch-progress__bar { background: linear-gradient(90deg, #0284c7, #38bef8); }
html[data-theme="light"] .orch-tag { color: #4a6278; background: rgba(0,0,0,0.04); border-color: #d1dce8; }
html[data-theme="light"] .orch-version { color: #7a9ab0; }

/* Markdown */
html[data-theme="light"] .markdown-body { color: #1a2535; }
html[data-theme="light"] .markdown-body h1, html[data-theme="light"] .markdown-body h2,
html[data-theme="light"] .markdown-body h3, html[data-theme="light"] .markdown-body h4 { color: #0f1c29; }
html[data-theme="light"] .markdown-body code { background: #e8f0f8; color: #0284c7; }
html[data-theme="light"] .markdown-body pre { background: #f0f4f8; border-color: #d1dce8; }
html[data-theme="light"] .markdown-body pre code { background: none; color: #1a2535; }
html[data-theme="light"] .markdown-body td { color: #1a2535; border-bottom-color: #e8eef4; }
html[data-theme="light"] .markdown-body th { background: #f0f4f8; color: #4a6278; border-bottom-color: #d1dce8; }
html[data-theme="light"] .markdown-body tbody tr:hover td { background: #f0f4f8; }
html[data-theme="light"] .markdown-body a { color: #0284c7; }
html[data-theme="light"] .markdown-body a:hover { color: #0369a1; }
html[data-theme="light"] .markdown-body blockquote { border-left-color: #0284c7; background: rgba(2,132,199,0.05); color: #4a6278; }
html[data-theme="light"] .markdown-body hr { border-top-color: #d1dce8; }

/* Component library */
html[data-theme="light"] .comp-lib-search, html[data-theme="light"] .comp-lib-status-filter { background: #ffffff; border-color: #d1dce8; color: #1a2535; }
html[data-theme="light"] .trace-btn { background: #ffffff; border-color: #d1dce8; color: #4a6278; }
html[data-theme="light"] .trace-btn:hover:not([disabled]) { border-color: #0284c7; color: #0284c7; }

/* ── Orchestra lock banner ───────────────────────────────────────────────── */

.orch-lock-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 6px;
    color: #fbbf24;
    font-size: 0.875rem;
}

.orch-lock-banner__expiry { opacity: 0.7; font-size: 0.78rem; }

/* ── Capability editor ───────────────────────────────────────────────────── */

.orch-caps-editor { margin-top: 0.5rem; }
.orch-caps-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

.orch-cap-input {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    color: #E0E4EA;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
}

.orch-caps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.orch-cap-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 0.77rem;
    background: rgba(56,189,248,0.1);
    border: 1px solid rgba(56,189,248,0.22);
    color: #38bdf8;
}

.orch-cap-badge code { font-size: 0.75rem; }

.trace-btn--danger { color: #f87171; border-color: rgba(248,113,113,0.3); }
.trace-btn--danger:hover:not([disabled]) { background: rgba(248,113,113,0.1); }

.orch-tag--locked { background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.35); color: #fbbf24; }

/* ── Milestone Timeline ───────────────────────────────────────────────────── */

.milestone-track-container {
    overflow-x: auto;
    padding: 0 1rem 1rem;
    margin-bottom: 2rem;
}

.milestone-track {
    position: relative;
    height: 340px;
    min-width: 700px;
}

.milestone-track__line {
    position: absolute;
    top: 140px;
    left: 0;
    right: 0;
    height: 2px;
    background: #2c3e50;
    border-radius: 1px;
}

.milestone-node {
    position: absolute;
    height: 340px;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    z-index: 1;
}

.milestone-node__dot {
    position: absolute;
    top: 133px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #141d26;
    z-index: 1;
}

.milestone-node--achieved .milestone-node__dot  { background: #34d399; box-shadow: 0 0 8px rgba(52,211,153,0.4); }
.milestone-node--late     .milestone-node__dot  { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.35); }
.milestone-node--upcoming .milestone-node__dot  { background: #38bdf8; }
.milestone-node--cancelled .milestone-node__dot { background: #506070; }

.milestone-node__label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 120px;
    text-align: center;
}

.milestone-node__label--below { top: 158px; }
.milestone-node__label--above { bottom: 208px; }

.milestone-node__code {
    font-size: 0.75rem;
    font-weight: 600;
    color: #e2e8f0;
    font-family: var(--font-mono);
}

.milestone-node__title {
    font-size: 0.72rem;
    color: #8fa8be;
    line-height: 1.3;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.milestone-node__date {
    font-size: 0.68rem;
    color: #506070;
    font-family: var(--font-mono);
}

.milestone-node__plan {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
    font-family: var(--font-mono);
}

.milestone-node__plan--draft    { background: rgba(80,96,112,0.2); color: #506070; border: 1px solid rgba(80,96,112,0.3); }
.milestone-node__plan--approved { background: rgba(56,189,248,0.1); color: #38bdf8; border: 1px solid rgba(56,189,248,0.25); }
.milestone-node__plan--released { background: rgba(52,211,153,0.1); color: #34d399; border: 1px solid rgba(52,211,153,0.25); }

/* Tooltip — appears in the zone opposite the label */
.milestone-node__tooltip {
    display: none;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: #0d1921;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 6px;
    padding: 8px 12px;
    width: 180px;
    z-index: 20;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.milestone-node--label-above .milestone-node__tooltip { top: 158px; }

.milestone-node:hover .milestone-node__tooltip { display: flex; }

.milestone-node__tooltip-code {
    font-size: 0.75rem;
    font-weight: 700;
    color: #38bdf8;
    font-family: var(--font-mono);
}

.milestone-node__tooltip-title {
    font-size: 0.72rem;
    color: #e2e8f0;
    line-height: 1.3;
    white-space: normal;
}

.milestone-node__tooltip-body {
    font-size: 0.70rem;
    color: #94a3b8;
    line-height: 1.4;
    white-space: normal;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 4px;
    margin-top: 2px;
}

.milestone-node__tooltip-date {
    font-size: 0.68rem;
    color: #8fa8be;
    font-family: var(--font-mono);
}

.milestone-today {
    position: absolute;
    top: 100px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.milestone-today__line {
    width: 1px;
    height: 80px;
    background: rgba(248,113,113,0.6);
}

.milestone-today__label {
    font-size: 0.65rem;
    color: #f87171;
    margin-top: 4px;
    white-space: nowrap;
}

.milestone-track-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8fa8be;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem 0;
    border-top: 1px solid #2c3e50;
    margin-top: 0.5rem;
}

/* ── Milestone Timeline — light theme overrides ────────────────────────── */
html[data-theme="light"] .milestone-track__line           { background: #cbd5e1; }
html[data-theme="light"] .milestone-node__dot             { border-color: #fff; }
html[data-theme="light"] .milestone-node__code            { color: #1e293b; }
html[data-theme="light"] .milestone-node__title           { color: #475569; }
html[data-theme="light"] .milestone-node__date            { color: #94a3b8; }
html[data-theme="light"] .milestone-track-label           { color: #64748b; border-top-color: #e2e8f0; }
html[data-theme="light"] .milestone-node__plan--draft     { background: rgba(100,116,139,0.1); color: #475569;  border-color: rgba(100,116,139,0.25); }
html[data-theme="light"] .milestone-node__plan--approved  { background: rgba(2,132,199,0.08);  color: #0369a1;  border-color: rgba(2,132,199,0.2); }
html[data-theme="light"] .milestone-node__plan--released  { background: rgba(22,163,74,0.08);  color: #15803d;  border-color: rgba(22,163,74,0.2); }
html[data-theme="light"] .milestone-node__tooltip         { background: #1e293b; border-color: rgba(56,189,248,0.35); }
html[data-theme="light"] .milestone-undated__heading      { color: #475569; }
html[data-theme="light"] .milestone-today__label          { color: #dc2626; }
html[data-theme="light"] .milestone-today__line           { background: rgba(220,38,38,0.5); }

.milestone-undated {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #2c3e50;
}

.milestone-undated__heading {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8fa8be;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Assert tag filters ──────────────────────────────────────────────────── */

.trace-assert-filters { margin-bottom: 1.5rem; }
.trace-assert-filters h3 { font-size: 1rem; font-weight: 600; color: #c8d8e8; margin: 0 0 0.5rem; }

.trace-tag-filter-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }

.trace-tag-filter-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.25);
    border-radius: 6px; padding: 4px 8px; font-size: 0.83rem; color: #8fa8be;
}
.trace-tag-filter-chip code { font-size: 0.81rem; color: #38bdf8; }

.trace-tag-filter-chip__remove {
    background: none; border: none; cursor: pointer;
    color: #6b8099; font-size: 1rem; line-height: 1;
    padding: 0 2px; border-radius: 3px; transition: color 0.1s;
}
.trace-tag-filter-chip__remove:hover { color: #f87171; }

.trace-tag-filter-form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.trace-tag-filter-form .trace-filter-input { max-width: 220px; }

.trace-btn--primary { color: #38bdf8; border-color: rgba(56,189,248,0.4); }
.trace-btn--primary:hover:not([disabled]) { background: rgba(56,189,248,0.1); border-color: #38bdf8; }

/* ── DUT cards ────────────────────────────────────────────────────────────── */

.trace-dut-list { display: flex; flex-direction: column; gap: 0.75rem; }

.trace-dut-card {
    background: #0f1a25; border: 1px solid #2c3e50;
    border-radius: 8px; overflow: hidden;
}
.trace-dut-card--expanded { border-color: rgba(56,189,248,0.3); }

.trace-dut-card__header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 1rem; user-select: none;
}
.trace-dut-card__header:hover { background: rgba(56,189,248,0.04); }

.trace-dut-card__sn { font-weight: 600; color: #c8d8e8; }
.trace-dut-card__sn code { font-size: 0.9rem; }
.trace-dut-card__rev { font-size: 0.8rem; color: #6b8099; background: #1b2736; border-radius: 4px; padding: 2px 6px; }
.trace-dut-card__runs { font-size: 0.8rem; margin-left: auto; }
.trace-dut-card__chevron { font-size: 0.75rem; color: #6b8099; }

.trace-dut-card__notes { padding: 0 1rem 0.5rem; font-size: 0.85rem; color: #8fa8be; }

.trace-dut-card .trace-table-wrap { border-top: 1px solid #1b2736; }
.trace-dut-card .trace-table { border-radius: 0; }

.trace-empty--inline { padding: 0.75rem 1rem; margin: 0; color: #6b8099; font-size: 0.85rem; }

.trace-td--right { text-align: right; }

/* ── Cpk badges (global, reused from Statistics page) ────────────────────── */

/* ── Collapsible section panels ──────────────────────────────────────────── */

.trace-collapsible { border: 1px solid #2c3e50; border-radius: 8px; overflow: hidden; }

.trace-collapsible__header {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    background: #0f1a25; border: none; cursor: pointer;
    padding: 0.65rem 1rem; text-align: left;
    transition: background 0.1s;
}
.trace-collapsible__header:hover { background: rgba(56,189,248,0.05); }

.trace-collapsible__chevron { color: #6b8099; font-size: 0.75rem; width: 0.9rem; flex-shrink: 0; }
.trace-collapsible__title   { font-weight: 600; color: #c8d8e8; font-size: 0.9rem; }
.trace-collapsible__meta    { margin-left: auto; color: #6b8099; font-size: 0.8rem; }

.trace-loading--inline { padding: 0.75rem 1rem; color: #6b8099; font-size: 0.85rem; }

.trace-filter-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; color: #8fa8be; white-space: nowrap;
}
.trace-filter-input--narrow { width: 5rem !important; }

.cpk-badge {
    display: inline-block; padding: 2px 10px; border-radius: 12px;
    font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.cpk-bad      { background: rgba(248,113,113,0.15); color: #f87171; }
.cpk-marginal { background: rgba(251,191, 36,0.12); color: #fbbf24; }
.cpk-good     { background: rgba( 52,211,153,0.12); color: #34d399; }
.cpk-unknown  { background: rgba(143,168,190,0.12); color: #8fa8be; }

/* ── Light theme: DUTs, collapsible panels, tag filters, Cpk badges ─────── */
html[data-theme="light"] .trace-assert-filters h3 { color: #1a2535; }
html[data-theme="light"] .trace-tag-filter-chip { background: rgba(2,132,199,0.07); border-color: rgba(2,132,199,0.25); color: #4a6278; }
html[data-theme="light"] .trace-tag-filter-chip code { color: #0369a1; }
html[data-theme="light"] .trace-tag-filter-chip__remove { color: #7a9ab0; }
html[data-theme="light"] .trace-tag-filter-chip__remove:hover { color: #b91c1c; }
html[data-theme="light"] .trace-btn--primary { color: #0284c7; border-color: rgba(2,132,199,0.4); }
html[data-theme="light"] .trace-btn--primary:hover:not([disabled]) { background: rgba(2,132,199,0.08); border-color: #0284c7; }
html[data-theme="light"] .trace-filter-label { color: #4a6278; }
html[data-theme="light"] .trace-loading--inline { color: #7a9ab0; }
html[data-theme="light"] .trace-empty--inline { color: #7a9ab0; }

html[data-theme="light"] .trace-dut-card { background: #ffffff; border-color: #d1dce8; }
html[data-theme="light"] .trace-dut-card--expanded { border-color: rgba(2,132,199,0.4); }
html[data-theme="light"] .trace-dut-card__header:hover { background: rgba(2,132,199,0.04); }
html[data-theme="light"] .trace-dut-card__sn { color: #1a2535; }
html[data-theme="light"] .trace-dut-card__rev { color: #4a6278; background: #f0f4f8; }
html[data-theme="light"] .trace-dut-card__chevron { color: #7a9ab0; }
html[data-theme="light"] .trace-dut-card__notes { color: #4a6278; }
html[data-theme="light"] .trace-dut-card .trace-table-wrap { border-top-color: #e8eef4; }

html[data-theme="light"] .trace-collapsible { border-color: #d1dce8; }
html[data-theme="light"] .trace-collapsible__header { background: #f0f4f8; }
html[data-theme="light"] .trace-collapsible__header:hover { background: rgba(2,132,199,0.06); }
html[data-theme="light"] .trace-collapsible__chevron { color: #7a9ab0; }
html[data-theme="light"] .trace-collapsible__title { color: #1a2535; }
html[data-theme="light"] .trace-collapsible__meta { color: #7a9ab0; }

html[data-theme="light"] .cpk-bad      { background: rgba(185, 28, 28,0.08); color: #b91c1c; }
html[data-theme="light"] .cpk-marginal { background: rgba(180, 83,  9,0.08); color: #b45309; }
html[data-theme="light"] .cpk-good     { background: rgba( 22,163, 74,0.08); color: #15803d; }
html[data-theme="light"] .cpk-unknown  { background: rgba( 71, 85,105,0.08); color: #475569; }

/* ══════════════════════════════════════════════════════════════════════════
   REPORTS (global — shared by TraceProjectReport + the FR#18 Report Builder)
   Promoted from the former TraceProjectReport.razor.css scoped sheet so the
   builder's ReportHeader/ReportSection child components share the same styles.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Toolbar (not printed) ─────────────────────────────────────────────── */
.rpt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Breadcrumb sits on the always-white toolbar, so force light-surface colours
   regardless of the app theme (::deep pierces into the child component). */
.rpt-toolbar .trace-breadcrumb__link { color: #64748b; }
.rpt-toolbar .trace-breadcrumb__link:hover { color: #2563eb; }
.rpt-toolbar .trace-breadcrumb__sep { color: #94a3b8; }
.rpt-toolbar .trace-breadcrumb__current { color: #1e293b; }

.rpt-toolbar__tabs { display: flex; gap: 4px; flex-shrink: 0; }

.rpt-tab {
    padding: 5px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.12s;
}

.rpt-tab:hover { background: #f1f5f9; color: #334155; }

.rpt-tab--active { background: #1e40af; border-color: #1e40af; color: #fff; }

.rpt-print-btn {
    padding: 6px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s;
}

.rpt-print-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }

/* ── Document shell ────────────────────────────────────────────────────── */
.rpt-doc {
    /* Page-width sheet (≈ US Letter) so the on-screen preview matches the printed page in scale —
       at 1200px the same text looked much smaller on screen than on the narrower printed page. */
    max-width: 8.5in;
    margin: 0 auto;
    padding: 0.5in 0.7in 0.7in;
    background: #fff;
    color: #1e293b;
    min-height: calc(100vh - 48px);
    /* Font + scale are report-builder–controlled via CSS vars; defaults reproduce the original look. */
    font-family: var(--rpt-font-family, var(--font-report));
    font-size: calc(0.9rem * var(--rpt-scale, 1));
    line-height: 1.5;
}

/* ── Cover ─────────────────────────────────────────────────────────────── */
.rpt-cover {
    text-align: center;
    padding: 56px 0 40px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 36px;
}

.rpt-cover__title {
    font-size: calc(2.25rem * var(--rpt-scale, 1));
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.2;
}

.rpt-cover__sub {
    font-size: calc(1.05rem * var(--rpt-scale, 1));
    color: #475569;
    font-weight: 500;
    margin-bottom: 14px;
}

.rpt-cover__meta { margin-bottom: 10px; }

.rpt-cover__generated {
    font-size: calc(0.78rem * var(--rpt-scale, 1));
    color: #64748b;
    margin-bottom: 20px;
}

.rpt-cover__desc {
    max-width: 620px;
    margin: 0 auto;
    text-align: left;
    color: #475569;
    font-size: calc(0.9rem * var(--rpt-scale, 1));
}

/* ── Chips ─────────────────────────────────────────────────────────────── */
.rpt-chip {
    display: inline-block;
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: calc(0.72rem * var(--rpt-scale, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    margin: 0 3px;
}

.rpt-chip--lifecycle { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.rpt-chip--open      { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.rpt-chip--closed    { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

/* ── Health badge (Project Status) ─────────────────────────────────────── */
.rpt-health {
    display: inline-block;
    padding: 2px 12px;
    border-radius: 12px;
    font-size: calc(0.72rem * var(--rpt-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 3px;
    border: 1px solid transparent;
}
.rpt-health--green   { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.rpt-health--amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.rpt-health--red     { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.rpt-health--blocked { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.rpt-health--unknown { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* Health-tinted metric (value colour echoes the badge) */
.rpt-metric.rpt-health--green   .rpt-metric__value { color: #15803d; }
.rpt-metric.rpt-health--amber   .rpt-metric__value { color: #b45309; }
.rpt-metric.rpt-health--red     .rpt-metric__value { color: #dc2626; }
.rpt-metric.rpt-health--blocked .rpt-metric__value { color: #7e22ce; }

/* ── Metrics strip ─────────────────────────────────────────────────────── */
.rpt-metrics {
    display: flex;
    margin-bottom: 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.rpt-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    border-right: 1px solid #e2e8f0;
    background: #f8fafc;
}

.rpt-metric:last-child { border-right: none; }
.rpt-metric--warn  { background: #fffbeb; }
.rpt-metric--error { background: #fef2f2; }

.rpt-metric__label {
    font-size: calc(0.68rem * var(--rpt-scale, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 4px;
}

.rpt-metric__value { font-size: calc(1.3rem * var(--rpt-scale, 1)); font-weight: 700; color: #0f172a; }
.rpt-metric--warn  .rpt-metric__value { color: #d97706; }
.rpt-metric--error .rpt-metric__value { color: #dc2626; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.rpt-section { margin-bottom: 44px; }

.rpt-section__title {
    font-size: calc(1.05rem * var(--rpt-scale, 1));
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px;
    padding: 9px 14px;
    background: #f1f5f9;
    border-left: 4px solid #3b82f6;
    border-radius: 0 4px 4px 0;
}

.rpt-section__empty {
    color: #64748b;
    font-size: calc(0.875rem * var(--rpt-scale, 1));
    padding: 4px 0;
    font-style: italic;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(0.845rem * var(--rpt-scale, 1));
}

.rpt-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: calc(0.72rem * var(--rpt-scale, 1));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 7px 10px;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}

.rpt-table th:last-child { border-right: none; }

.rpt-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #f1f5f9;
    border-right: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: top;
    word-break: break-word;
}

.rpt-table td:last-child { border-right: none; }
.rpt-table tr:last-child td { border-bottom: none; }
.rpt-table tbody tr:hover td { background: #f8fafc; }

/* Wide content tables (Requirements, Test Cases): fixed layout gives the long-text
   columns predictable, roomy widths so they wrap evenly instead of cramming into very
   tall, hard-to-read rows. Percentage column widths are set on the <th>s in the markup. */
.rpt-table--fixed { table-layout: fixed; }
.rpt-table--fixed td { word-break: normal; overflow-wrap: anywhere; line-height: 1.4; }

/* Closed items in the overview table read as resolved — slightly dimmed (the status chip keeps its colour). */
.rpt-table tbody tr.rpt-row--closed td { color: #94a3b8; }

.rpt-table--kv th { display: none; }

.rpt-kv-key {
    width: 180px;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.rpt-code {
    font-family: var(--font-mono);
    font-size: calc(0.8rem * var(--rpt-scale, 1));
    color: #1e40af;
    white-space: nowrap;
}

/* Code cells that hold a list (e.g. linked test cases) must wrap, not spill the table */
.rpt-code--wrap { white-space: normal; word-break: break-word; }

.rpt-muted { color: #64748b; font-style: italic; }

/* ── Result / Coverage badges ─────────────────────────────────────────── */
.rpt-result--pass      { color: #16a34a; font-weight: 600; }
.rpt-result--fail      { color: #dc2626; font-weight: 600; }
.rpt-result--deviation { color: #d97706; font-weight: 600; }
.rpt-result--other     { color: #64748b; }

.rpt-cov--done     { color: #16a34a; font-weight: 600; }
.rpt-cov--partial  { color: #d97706; font-weight: 600; }
.rpt-cov--missing  { color: #dc2626; font-weight: 600; }
.rpt-cov--obsolete { color: #64748b; }

/* ── Severity badges ──────────────────────────────────────────────────── */
.rpt-sev {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: calc(0.68rem * var(--rpt-scale, 1));
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.rpt-sev--blocking { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.rpt-sev--warning  { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.rpt-sev--info     { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* ── Entry cards ──────────────────────────────────────────────────────── */
.rpt-entry-list { display: flex; flex-direction: column; gap: 12px; }

.rpt-entry {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.rpt-entry__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.rpt-entry__code {
    font-family: var(--font-mono);
    font-size: calc(0.78rem * var(--rpt-scale, 1));
    color: #1e40af;
    font-weight: 600;
    white-space: nowrap;
}

.rpt-entry__title { font-weight: 600; color: #0f172a; flex: 1; min-width: 0; }

.rpt-entry__date { font-size: calc(0.73rem * var(--rpt-scale, 1)); color: #64748b; white-space: nowrap; margin-left: auto; }

.rpt-entry__body {
    padding: 11px 13px;
    font-size: calc(0.86rem * var(--rpt-scale, 1));
    color: #334155;
    line-height: 1.6;
}

.rpt-entry__resolution {
    padding: 8px 13px 11px;
    background: #f0fdf4;
    border-top: 1px solid #d1fae5;
    font-size: calc(0.86rem * var(--rpt-scale, 1));
    color: #15803d;
}

.rpt-entry__resolution-label { font-weight: 600; margin-right: 5px; }

/* ── Loading / error ──────────────────────────────────────────────────── */
.rpt-loading {
    text-align: center;
    padding: 80px;
    color: #64748b;
    font-size: 1.1rem;
    background: #fff;
}

.rpt-error {
    text-align: center;
    padding: 80px;
    color: #dc2626;
    background: #fff;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.rpt-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 48px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.75rem;
    color: #64748b;
}

/* ── Design Brief ─────────────────────────────────────────────────────── */
.rpt-brief-banner {
    background: #fef9c3;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #713f12;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 9px 18px;
    margin-bottom: 32px;
    text-align: center;
}

.rpt-section__sub {
    font-size: 0.82rem;
    color: #64748b;
    font-style: italic;
    margin: -8px 0 16px;
}

.rpt-concept-card {
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    margin-bottom: 14px;
}

.rpt-concept-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    flex-wrap: wrap;
}

.rpt-concept-card__title {
    font-weight: 700;
    color: #1e3a5f;
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
}

.rpt-concept-card--closed {
    border-color: #e2e8f0;
    border-left-color: #94a3b8;
    opacity: 0.85;
}

.rpt-concept-card--closed .rpt-concept-card__header {
    background: #f8fafc;
    border-bottom-color: #e2e8f0;
}

.rpt-concept-card--closed .rpt-concept-card__title {
    color: #475569;
}

/* ── Print ────────────────────────────────────────────────────────────── */
@page { size: letter; margin: 0.6in; }

@media print {
    .rpt-toolbar, .rptb-drawer { display: none !important; }
    .rptb-layout        { display: block; }
    .rptb-preview       { overflow: visible; }
    /* The @page margin governs the printable edge; the sheet padding is on-screen only, so the
       printed page matches the preview's content width (and thus its text scale). */
    .rpt-doc            { max-width: 100%; padding: 0; }
    .rpt-cover          { page-break-after: always; }

    /* Sections routinely span more than one page (long tables, many concepts).
       DON'T keep the whole block on one page — that forced large empty gaps and
       pushed sections to the next page. Instead, just keep each heading with the
       content that follows it, and keep the small atomic units intact. */
    .rpt-section        { margin-bottom: 28px; }
    .rpt-section__title { break-after: avoid; page-break-after: avoid; }
    .rpt-section__sub   { break-after: avoid; page-break-after: avoid; }

    /* Repeat table column headers at the top of each page a table flows onto. */
    .rpt-table          { font-size: calc(0.78rem * var(--rpt-scale, 1)); }
    .rpt-table thead    { display: table-header-group; }
    .rpt-table tr       { break-inside: avoid; }
    .rpt-table th,
    .rpt-table td       { padding: 5px 8px; }

    /* Atomic blocks that should never be split across a page boundary. */
    .rpt-entry          { break-inside: avoid; }
    .rpt-concept-card   { break-inside: avoid; }
    .rpt-metrics        { break-inside: avoid; }

    .rpt-brief-banner   { background: #fef9c3 !important; -webkit-print-color-adjust: exact; }
}

/* ── Report header (shared title block + top-right logo, FR #18) ──────────── */
.rpt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0 28px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 32px;
}
.rpt-header__block { min-width: 0; }
.rpt-header__logo { flex-shrink: 0; }
.rpt-header__logo img { max-height: 64px; max-width: 220px; object-fit: contain; }

/* ── Report builder layout (FR #18) ──────────────────────────────────────── */
.rptb-layout { display: flex; align-items: flex-start; gap: 0; }
.rptb-preview { flex: 1; min-width: 0; overflow-x: auto; }
.rptb-drawer {
    flex: 0 0 380px;
    width: 380px;
    align-self: stretch;
    border-left: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 16px;
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
}
.rptb-drawer__title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 14px; }
.rptb-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.rptb-field > label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.rptb-field select, .rptb-field input[type=text] {
    padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.85rem; background-color: #fff; color: #1e293b;
}
/* background-color (not the `background` shorthand) above: the shorthand resets background-repeat to
   `repeat`, and the more-specific html[data-theme="light"] select rule re-adds the arrow image — which
   tiled the arrow down the whole control. Pin no-repeat + position + arrow padding for the dropdown. */
.rptb-field select { background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 1.8rem; }
.rptb-save-row { display: flex; gap: 6px; align-items: center; }
.rptb-save-row select { flex: 0 0 auto; }
.rptb-img-row { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; }
.rptb-btn {
    padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; color: #334155;
    font-size: 0.8rem; cursor: pointer;
}
.rptb-btn:hover { background: #f1f5f9; }
.rptb-btn--danger { color: #dc2626; border-color: #fecaca; }
.rptb-msg { font-size: 0.78rem; padding: 4px 0; }
.rptb-msg--err { color: #dc2626; }
.rptb-msg--ok { color: #15803d; }

.rptb-items { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 8px; }
.rptb-items th {
    text-align: left; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: #64748b; padding: 6px 6px; border-bottom: 1px solid #e2e8f0;
}
.rptb-items td { padding: 6px 6px; border-bottom: 1px solid #eef2f6; vertical-align: top; color: #334155; }
.rptb-items__on { background: #eff6ff; }
/* Each filter on its own line (display:flex → block-level), control right-aligned so the
   "Min severity" / "Kind" selects line up under one another. */
.rptb-filter { display: flex; align-items: center; gap: 6px; margin: 0 0 4px 0; font-size: 0.75rem; color: #475569; }
.rptb-filter select { margin-left: auto; padding: 2px 4px; font-size: 0.75rem; border: 1px solid #cbd5e1; border-radius: 3px; }
.rptb-order { white-space: nowrap; }
.rptb-ord-btn {
    border: 1px solid #cbd5e1; background: #fff; border-radius: 3px; cursor: pointer;
    font-size: 0.7rem; line-height: 1; padding: 3px 5px; color: #475569;
}
.rptb-ord-btn:hover { background: #f1f5f9; }

html[data-theme="light"] .rptb-drawer { background: #f8fafc; }

.rptb-order-input { width: 52px; padding: 3px 5px; border: 1px solid #cbd5e1; border-radius: 3px; font-size: 0.8rem; text-align: center; }
/* Use background-color (not the `background` shorthand): the shorthand resets background-repeat to
   `repeat`, and the more-specific html[data-theme="light"] select rule re-adds the arrow image — so the
   arrow tiled across the whole control. Keep no-repeat + position + arrow padding here so the dropdown
   arrow stays a single glyph in both themes. */
.rpt-report-select { padding: 5px 30px 5px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.85rem; background-color: #fff; background-repeat: no-repeat; background-position: right 0.6rem center; color: #1e293b; min-width: 220px; }

/* ── Export-as-HTML actions + Markdown→HTML converter page ─────────────────────────── */
.trace-page__header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.trace-btn--sm { padding: 2px 8px; font-size: 0.78rem; }

.mdc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { .mdc-grid { grid-template-columns: 1fr; } }
.mdc-pane { display: flex; flex-direction: column; min-height: 0; }
.mdc-label { font-size: 0.8rem; font-weight: 600; color: #64748b; margin: 0.5rem 0 0.25rem; }
.mdc-input { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.9rem; margin-bottom: 0.5rem; }
.mdc-textarea { flex: 1; min-height: 420px; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.mdc-preview { flex: 1; min-height: 420px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1rem 1.25rem; background: #fff; }

/* ── Restricted projects (concealment) ─────────────────────────────────────────
   The unlock bar is intentionally quiet: it must read as an invitation to anyone
   holding a passphrase, never as a hint that hidden projects exist. Only the
   unlocked state is allowed to be loud, because by then nothing is being kept. */
.trace-unlock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 8px 12px; border-radius: 6px;
    background: #16202c; border: 1px solid #24303f; font-size: 0.85rem; color: #8fa8be; }
.trace-unlock--collapsed { background: none; border: none; padding: 0 2px; margin-bottom: 10px; }
.trace-unlock--open { background: rgba(56,189,248,0.07); border-color: rgba(56,189,248,0.35); color: #cbd5e1; }
.trace-unlock__icon { font-size: 0.95rem; }
.trace-unlock__text { flex: 1; min-width: 12rem; }
.trace-unlock__project { color: #38bdf8; margin-left: 6px; font-weight: 600; }
.trace-unlock__input { max-width: 240px; }
.trace-unlock__error { color: #f87171; flex-basis: 100%; }
.trace-unlock__link { background: none; border: none; padding: 0; cursor: pointer;
    color: #506070; font-size: 0.8rem; transition: color 0.12s; }
.trace-unlock__link:hover { color: #38bdf8; }

.trace-restrict { margin: 18px 0; padding: 14px 16px; border-radius: 8px;
    background: #16202c; border: 1px solid #24303f; }
.trace-restrict__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trace-restrict__title { margin: 0; font-size: 0.95rem; color: #cbd5e1; }
.trace-restrict__summary { margin: 8px 0 0; font-size: 0.83rem; color: #8fa8be; line-height: 1.5; }
.trace-restrict__warning { margin-top: 12px; padding: 10px 12px; border-radius: 6px;
    background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.3);
    color: #fca5a5; font-size: 0.8rem; line-height: 1.5; }
.trace-restrict__form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.trace-restrict__label { display: flex; flex-direction: column; gap: 4px;
    font-size: 0.8rem; color: #8fa8be; }
.trace-restrict__hint { color: #506070; font-weight: 400; }
.trace-restrict__error { color: #f87171; font-size: 0.82rem; }
.trace-restrict__actions { display: flex; gap: 8px; flex-wrap: wrap; }

html[data-theme="light"] .trace-unlock { background: #f1f5f9; border-color: #d1dce8; color: #4a6278; }
html[data-theme="light"] .trace-unlock--collapsed { background: none; border: none; }
html[data-theme="light"] .trace-unlock--open { background: rgba(2,132,199,0.06); border-color: rgba(2,132,199,0.3); color: #334155; }
html[data-theme="light"] .trace-unlock__project { color: #0284c7; }
html[data-theme="light"] .trace-unlock__link { color: #7c8ea0; }
html[data-theme="light"] .trace-unlock__link:hover { color: #0284c7; }
html[data-theme="light"] .trace-restrict { background: #f8fafc; border-color: #d1dce8; }
html[data-theme="light"] .trace-restrict__title { color: #1e293b; }
html[data-theme="light"] .trace-restrict__summary { color: #4a6278; }
html[data-theme="light"] .trace-restrict__warning { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.25); color: #b91c1c; }
html[data-theme="light"] .trace-restrict__label { color: #4a6278; }

/* ── In-place editing inside rendered markdown (FR #31 follow-up) ──────────────
   Cells of a markdown table are click-to-edit; the table's shape is not. The hover
   affordance has to reach EMPTY cells too — the "tune-ups agreed" tables ship blank
   and are filled during the meeting, so a zero-height cell would be unclickable. */
.markdown-body td.md-cell {
    cursor: text;
    min-width: 2.5rem;
}

.markdown-body td.md-cell:hover {
    background: var(--surface-2, #f2f6fa);
    box-shadow: inset 0 0 0 1px var(--border, #d0d7de);
}

.markdown-body td.md-cell:empty::after {
    content: "";
    display: inline-block;
    min-height: 1em;
}

.markdown-body input.md-cell-input {
    width: 100%;
    min-width: 2rem;
    padding: 1px 3px;
    border: 1px solid var(--accent, #3b82f6);
    border-radius: 3px;
    background: var(--surface, #fff);
    color: var(--text, #1f2328);
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .85em;
}

/* A checkbox that writes back to the source is an active control, not decoration. */
.markdown-body input.md-task {
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
   RECONNECT MODAL (Bug #20)
   Styles the app-owned dialog declared in Components/App.razor. Blazor's own
   dialog offers RESUME in every state, including the one where the server has
   forgotten the circuit and resume can never succeed; App.razor replaces it and
   this sheet decides which panel the framework's state class reveals.

   The `components-reconnect-*` classes below belong to the framework, not to us
   — it toggles them on #components-reconnect-modal. Renaming one silently
   detaches the panel it guards, so leave them exactly as spelled.
   ═══════════════════════════════════════════════════════════════════════ */
.trace-reconnect {
    /* No state class yet (first paint) and `components-reconnect-hide` (reconnected)
       both land here: hidden. Only the states enumerated below reveal it. */
    display: none;
    position: fixed;
    inset: 0;
    /* Above #blazor-error-ui (1000), which is the highest thing in this sheet — a
       dropped circuit usually raises that red bar too, and the bar must not sit on
       top of the only control that can recover the page. The framework's own dialog
       used 10000; matching it keeps the layering unsurprising if this is ever removed. */
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(9, 14, 20, 0.72);
    backdrop-filter: blur(2px);
}

.trace-reconnect.components-reconnect-show,
.trace-reconnect.components-reconnect-paused,
.trace-reconnect.components-reconnect-failed,
.trace-reconnect.components-reconnect-resume-failed,
.trace-reconnect.components-reconnect-rejected { display: flex; }

.trace-reconnect__card {
    width: min(28rem, 100%);
    padding: 20px 22px;
    border-radius: 10px;
    background: #16202c;
    border: 1px solid #24303f;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: trace-reconnect-rise 0.22s ease-out both;
}

/* One panel per framework state; all hidden until the class that owns it appears.
   `retrying` is added ON TOP of `show`, never instead of it, so the trying panel
   covers both the first attempt and every retry. */
.trace-reconnect__state { display: none; flex-direction: column; gap: 12px; }
.trace-reconnect.components-reconnect-show           .trace-reconnect__state--trying        { display: flex; }
.trace-reconnect.components-reconnect-paused         .trace-reconnect__state--paused        { display: flex; }
.trace-reconnect.components-reconnect-failed         .trace-reconnect__state--failed        { display: flex; }
.trace-reconnect.components-reconnect-resume-failed  .trace-reconnect__state--resume-failed { display: flex; }
.trace-reconnect.components-reconnect-rejected       .trace-reconnect__state--rejected      { display: flex; }

/* The counters are only meaningful once the framework is waiting between attempts;
   it adds `retrying` exactly then. The spans stay in the DOM regardless so
   getElementById keeps finding them. */
.trace-reconnect__countdown { display: none; margin: 0; font-size: 0.78rem; font-family: var(--font-mono); color: #506070; }
.trace-reconnect.components-reconnect-retrying .trace-reconnect__countdown { display: block; }

.trace-reconnect__head { display: flex; align-items: center; gap: 10px; }
.trace-reconnect__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.trace-reconnect__dot--live { background: #38bdf8; animation: trace-reconnect-pulse 1.4s ease-in-out infinite; }
.trace-reconnect__dot--warn { background: #fbbf24; }
.trace-reconnect__title { margin: 0; font-size: 0.95rem; font-weight: 600; color: #cbd5e1; }
.trace-reconnect__body { margin: 0; font-size: 0.85rem; line-height: 1.55; color: #8fa8be; }
.trace-reconnect__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* The dialog appears without a click, so the focus ring is how a keyboard user knows
   where they landed — it must be visible against the card, not the page. */
.trace-reconnect .trace-btn:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

@keyframes trace-reconnect-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes trace-reconnect-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

/* This dialog interrupts, unasked, on a screen the reader was already using; a pulse
   they cannot dismiss is the wrong thing to force on someone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
    .trace-reconnect__card,
    .trace-reconnect__dot--live { animation: none; }
}

html[data-theme="light"] .trace-reconnect { background: rgba(15, 23, 42, 0.32); }
html[data-theme="light"] .trace-reconnect__card { background: #ffffff; border-color: #d1dce8; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
html[data-theme="light"] .trace-reconnect__title { color: #1a2535; }
html[data-theme="light"] .trace-reconnect__body { color: #4a6278; }
html[data-theme="light"] .trace-reconnect__countdown { color: #7a9ab0; }
html[data-theme="light"] .trace-reconnect__dot--live { background: #0284c7; }
html[data-theme="light"] .trace-reconnect__dot--warn { background: #b45309; }
html[data-theme="light"] .trace-reconnect .trace-btn:focus-visible { outline-color: #0284c7; }

/* ── Add a station (the one-line installer served by Orchestra) ─────────── */

.orch-add-station { margin-bottom: 1rem; border: 1px solid #2c3e50; border-radius: 8px; background: rgba(27, 39, 54, 0.5); }
.orch-add-station__summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: #cbd5e1; }
.orch-add-station__version { margin-left: auto; font-size: 0.78rem; font-weight: 400; color: #8fa8be; }
.orch-add-station__body { padding: 0 1rem 0.8rem; font-size: 0.86rem; color: #a9bdd0; }
.orch-add-station__line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.4rem 0; }
.orch-add-station__os { min-width: 9.5rem; font-size: 0.78rem; color: #8fa8be; }
.orch-add-station__cmd { flex: 1 1 22rem; padding: 0.35rem 0.6rem; border-radius: 5px; background: #0f1823; color: #e2e8f0; font-size: 0.82rem; overflow-wrap: anywhere; user-select: all; }
.orch-add-station__note { margin: 0.5rem 0 0; font-size: 0.8rem; color: #8fa8be; }
.orch-add-station__warn { margin: 0.5rem 0 0; font-size: 0.8rem; color: #fbbf24; }
.orch-add-station__sha { margin-left: 0.5rem; font-family: ui-monospace, monospace; opacity: 0.7; }
html[data-theme="light"] .orch-add-station { background: #f8fafc; border-color: #d1dce8; }
html[data-theme="light"] .orch-add-station__summary { color: #1a2535; }
html[data-theme="light"] .orch-add-station__body,
html[data-theme="light"] .orch-add-station__os,
html[data-theme="light"] .orch-add-station__note,
html[data-theme="light"] .orch-add-station__version { color: #4a6278; }
html[data-theme="light"] .orch-add-station__cmd { background: #eef2f7; color: #1a2535; }
html[data-theme="light"] .orch-add-station__warn { color: #b45309; }

/* ── Station identity (pg-isolation increment 5) ─────────────────────────── */

.orch-identity-alerts { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }

.orch-identity-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
}
.orch-identity-alert--new     { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.35); color: #93c5fd; }
.orch-identity-alert--changed { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.35); color: #fbbf24; }
.orch-identity-alert:hover { filter: brightness(1.15); }
.orch-identity-alert__icon { display: inline-flex; }
.orch-identity-alert__when { opacity: 0.75; }
.orch-identity-alert code { font-size: 0.8rem; opacity: 0.9; }

.orch-identity-status {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.orch-identity-status--active  { color: #4ade80; border-color: rgba(74, 222, 128, 0.35); background: rgba(74, 222, 128, 0.10); }
.orch-identity-status--pending { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.10); }
.orch-identity-status--revoked { color: #f87171; border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.10); }

.orch-identity { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.5rem 0 0; font-size: 0.875rem; }
.orch-identity dt { color: #9aa3b2; }
.orch-identity dd { margin: 0; color: #E0E4EA; }
.orch-identity code { font-size: 0.8rem; }