.visual-brief-page {
    background:var(--pj-canvas);
    color:var(--pj-ink);
    padding:28px;
    max-width:1800px;
    margin:auto;
    font:16px/1.55 "Segoe UI",Arial,sans-serif;
    border-radius:3px;
}

.visual-brief-page * {
    box-sizing:border-box;
}

.visual-brief-page a {
    color:var(--pj-accent);
}

.visual-brief-page button,.visual-brief-page select {
    font:inherit;
    color:var(--pj-ink);
    background:var(--pj-paper);
    border:1px solid var(--pj-rule);
    border-radius:3px;
    padding:9px 14px;
    cursor:pointer;
}

.visual-brief-page button:hover,.visual-brief-page a:hover {
    background:var(--pj-accent-soft);
}

.visual-brief-page :focus-visible {
    outline:3px solid var(--pj-focus);
    outline-offset:3px;
}

.visual-brief-page button[aria-pressed=true] {
    background:var(--pj-accent);
    color:var(--pj-paper);
    border-color:var(--pj-accent);
}

.brief-topbar,.brief-controls,.brief-language,.flow-title {
    display:flex;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.brief-topbar {
    font-size:14px;
    margin-bottom:24px;
}

.brief-topbar>a {
    font-weight:750;
    text-decoration:none;
}

.brief-language {
    gap:5px;
}

.brief-catalog {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:28px;
}

.brief-card {
    display:flex;
    gap:12px;
    text-decoration:none;
    background:var(--pj-paper);
    border:1px solid var(--pj-rule);
    padding:16px;
    border-radius:3px;
    align-items:flex-start;
}

.brief-card[aria-current=page] {
    border:2px solid var(--pj-accent);
    background:var(--pj-accent-soft);
}

.brief-card>span {
    color:var(--pj-muted);
    font-size:13px;
    font-weight:700;
}

.brief-card strong {
    font-size:15px;
}

.brief-header {
    max-width:1000px;
    margin:24px 0;
}

.brief-kicker {
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:12px;
    font-weight:750;
    color:var(--pj-muted);
}

.visual-brief-page h1 {
    font-family:Georgia,Cambria,serif;
    font-size:clamp(26px,3.2vw,42px);
    line-height:1.2;
    font-weight:600;
    margin:12px 0 18px;
    color:var(--pj-ink);
}

.brief-lead {
    font-size:19px;
    line-height:1.6;
}

.brief-caveat,.proposal-notice {
    border-left:4px solid var(--pj-warning);
    background:var(--pj-warning-soft);
    padding:12px 16px;
}

.brief-meta {
    font-size:13px;
    color:var(--pj-muted);
}

.brief-controls {
    background:var(--pj-paper);
    border:1px solid var(--pj-rule);
    border-radius:3px;
    padding:16px;
    margin-top:28px;
}

.brief-controls label {
    display:flex;
    flex-direction:column;
    font-size:13px;
    font-weight:650;
    gap:5px;
    max-width:560px;
    flex:1;
}

.brief-controls select {
    min-width:200px;
    max-width:100%;
    font-size:15px;
}

.scenario-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.layer-controls {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    border:0;
    padding:16px 0 22px;
    margin:0;
}

.layer-controls legend {
    font-size:13px;
    width:auto;
    font-weight:650;
    margin-bottom:8px;
}

.layer-controls label {
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.layer-controls input {
    accent-color:var(--pj-accent);
    width:18px;
    height:18px;
}

.brief-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    gap:22px;
    align-items:start;
}

.brief-diagrams {
    min-width:0;
}

.flow-panel,.evidence-inspector,.brief-measures {
    background:var(--pj-paper);
    border:1px solid var(--pj-rule);
    border-radius:3px;
    padding:22px;
    margin-bottom:20px;
}

.visual-brief-page h3 {
    font-size:20px;
    line-height:1.3;
    color:var(--pj-ink);
    margin:0 0 12px;
}

.visual-brief-page h4 {
    font-size:16px;
    color:var(--pj-ink);
    margin:18px 0 10px;
}

.flow-title>span {
    font-size:13px;
    color:var(--pj-muted);
}

.flow-legend {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    margin:14px 0;
}

:where(.visual-brief-page, .flow-panel) .basis {
    display:inline-block;
    border-radius:0;
    padding:2px 0;
    font-size:11px;
    line-height:1.35;
    border:0;
    border-bottom:2px solid var(--pj-rule);
    color:var(--pj-muted);
    background:transparent;
}

:where(.visual-brief-page, .flow-panel) .basis.source-backed {
    color:var(--pj-success);
    background:transparent;
    border-color:var(--pj-success);
}

:where(.visual-brief-page, .flow-panel) .basis.proposal {
    color:var(--pj-proposal);
    background:transparent;
    border-color:var(--pj-proposal);
    border-bottom-style:dashed;
}

:where(.visual-brief-page, .flow-panel) .basis.unknown {
    color:var(--pj-warning);
    background:transparent;
    border-color:var(--pj-warning);
    border-bottom-style:dotted;
}

.flow-canvas {
    overflow:auto;
    padding:20px 0;
    background:var(--pj-canvas);
}

.flow-canvas svg {
    display:block;
    max-width:none;
}

.flow-panel .flow-node {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    text-align:left;
    border:2px solid var(--pj-rule);
    padding:14px;
    gap:10px;
    overflow:hidden;
}

.flow-panel .flow-node strong {
    display:block;
    overflow-wrap:anywhere;
    font-size:16px;
    line-height:1.35;
}

.flow-node small,.flow-edge small {
    display:block;
    font-size:11px;
    line-height:1.3;
    margin-top:auto;
}

.flow-panel .actor-label {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--pj-muted);
    max-height:30px;
    overflow:hidden;
}

.flow-node[aria-pressed=true] .actor-label {
    color:var(--pj-accent);
}

.flow-panel .flow-node.source-backed {
    border-color:var(--pj-success);
}

.flow-panel .flow-node.proposal,.flow-panel .flow-edge.proposal {
    border-color:var(--pj-proposal);
    border-style:dashed;
}

.flow-panel .flow-node.unknown {
    border-color:var(--pj-warning);
    border-style:dotted;
}

.flow-line {
    stroke:var(--pj-muted);
    fill:none;
    stroke-width:2;
}

.flow-line.proposal {
    stroke:var(--pj-proposal);
    stroke-dasharray:7 5;
}

.flow-line.unknown {
    stroke:var(--pj-warning);
    stroke-dasharray:2 5;
}

.flow-panel .flow-edge {
    width:100%;
    height:100%;
    overflow-wrap:anywhere;
    font-size:12px;
    line-height:1.3;
    padding:6px;
    overflow:hidden;
    background:var(--pj-paper);
    border:1px solid var(--pj-rule);
}

.flow-outline {
    border-top:1px solid var(--pj-rule);
    padding-top:14px;
    margin-top:16px;
}

.flow-outline button {
    border:0;
    text-align:left;
    padding:4px;
    background:transparent;
    text-decoration:underline;
}

.flow-outline li {
    margin:8px 0;
}

.flow-annotations {
    list-style:none;
    padding:0;
    margin:16px 0 0;
}

.flow-annotations li,.inspector-note {
    border-left:3px solid var(--pj-rule);
    background:var(--pj-canvas);
    margin:10px 0;
    padding:12px;
    font-size:14px;
}

.flow-annotations .basis {
    margin-left:6px;
}

.source-card {
    border-top:1px solid var(--pj-rule);
    padding-top:8px;
    margin-top:18px;
    overflow-wrap:anywhere;
}

.source-card blockquote {
    font-size:14px;
    white-space:pre-wrap;
    border-left:3px solid var(--pj-rule);
    padding:8px 12px;
    margin:12px 0;
    max-height:340px;
    overflow:auto;
}

.evidence-inspector ul {
    padding-left:20px;
}

.evidence-inspector li {
    font-size:14px;
    margin:12px 0;
}

.evidence-inspector li small {
    display:block;
    color:var(--pj-muted);
}

.visual-brief-page code,.visual-brief-page .technical {
    font-size:11px;
    overflow-wrap:anywhere;
    white-space:normal;
    color:var(--pj-muted);
}

.brief-footer {
    font-size:13px;
    color:var(--pj-muted);
    border-top:1px solid var(--pj-rule);
    padding-top:18px;
}

.brief-footer details {
    margin-top:12px;
}

.visual-brief-page summary {
    cursor:pointer;
    color:var(--pj-accent);
    font-size:14px;
}

.brief-measures p {
    font-size:14px;
    color:var(--pj-muted);
}

@media(max-width:1200px) {
    .brief-workspace {
        grid-template-columns:minmax(0,1fr);
    }
    .brief-catalog {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .evidence-inspector {
        position:static;
    }
}

@media(max-width:600px) {
    .visual-brief-page {
        padding:14px;
        border-radius:0;
    }
    .brief-catalog {
        grid-template-columns:1fr;
    }
    .brief-card {
        padding:10px;
    }
    .brief-controls {
        align-items:stretch;
    }
    .brief-controls label {
        flex-basis:100%;
    }
    .scenario-buttons button {
        font-size:13px;
        padding:8px;
    }
    .flow-panel,.evidence-inspector {
        padding:14px;
    }
    .brief-lead {
        font-size:17px;
    }
}

@media print {
    .visual-brief-page {
        padding:0;
        background:var(--pj-paper);
        color:#000;
        font-size:11pt;
    }
    .brief-topbar,.brief-catalog,.brief-controls,.layer-controls {
        display:none!important;
    }
    .brief-workspace {
        display:block;
    }
    .flow-canvas {
        display:block;
        overflow:visible;
    }
    .flow-canvas svg {
        width:100%!important;
        height:auto!important;
    }
    .flow-fit {
        display:none;
    }
    .flow-outline {
        display:block;
    }
    .flow-outline>ul,.flow-outline>h4 {
        display:block!important;
    }
    .flow-panel,.evidence-inspector,.source-card {
        break-inside:avoid;
    }
    .source-card blockquote {
        max-height:none;
        overflow:visible;
    }
    .visual-brief-page button {
        border:0!important;
        background:none!important;
        color:#000!important;
        padding:0;
    }
    .visual-brief-page a[href]::after {
        content:" (" attr(href) ")";
        font-size:9pt;
        overflow-wrap:anywhere;
    }
    .evidence-inspector,.brief-footer,.proposal-notice,.brief-caveat {
        display:block!important;
    }
    .brief-language {
        display:none;
    }
}

.brief-catalog-group {
    border-bottom:1px solid var(--pj-rule);
    margin-bottom:18px;
}

.catalog-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:12px;
}

.catalog-heading h2 {
    font-size:22px;
    margin:5px 0;
}

.catalog-heading p {
    max-width:700px;
    color:var(--pj-muted);
    margin:0;
}

.brief-catalog-secondary {
    background:var(--pj-canvas);
    border:1px solid var(--pj-rule);
    border-radius:3px;
    color:var(--pj-ink);
    padding:14px 16px;
    margin:12px 0;
}

.brief-catalog-secondary>summary {
    font-size:16px;
    font-weight:750;
}

.brief-catalog-secondary>p {
    color:var(--pj-muted);
}

.brief-card>span:last-child {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.comparison-badge {
    display:inline-block;
    width:fit-content;
    max-width:100%;
    overflow-wrap:anywhere;
    border-radius:0;
    padding:2px 0;
    font-size:11px;
    font-weight:800;
    letter-spacing:.02em;
}

.comparison-badge.defined-change {
    background:transparent;
    color:var(--pj-success);
}

.comparison-badge.investigation-only {
    background:transparent;
    color:var(--pj-warning);
}

.comparison-badge.no-change {
    background:transparent;
    color:var(--pj-muted);
}

.comparison-summary {
    background:var(--pj-paper);
    border:1px solid var(--pj-rule);
    border-left:3px solid var(--pj-rule);
    border-radius:3px;
    color:var(--pj-ink);
    padding:22px;
    margin:22px 0;
}

.comparison-summary.defined-change {
    border-left-color:var(--pj-success);
}

.comparison-summary.investigation-only {
    border-left-color:var(--pj-warning);
}

.comparison-summary h2 {
    font-size:25px;
    margin:8px 0;
}

.comparison-summary>p {
    max-width:950px;
    font-size:17px;
}

.comparison-counts {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    list-style:none;
    padding:0;
    margin:16px 0 0;
}

.comparison-counts li {
    border-left:2px solid var(--pj-rule);
    padding:4px 12px;
    font-weight:700;
}

.comparison-empty-state {
    background:var(--pj-warning-soft);
    border:2px dashed var(--pj-warning);
    border-radius:3px;
    color:var(--pj-ink);
    padding:24px;
    margin-bottom:20px;
}

.comparison-empty-state p {
    max-width:850px;
}

.change-legend {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin:12px 0;
}

.change-key {
    border-radius:0;
    padding:3px 0;
    border-bottom:2px solid currentColor;
    font-size:12px;
    font-weight:800;
}

.change-key.change-added {
    background:transparent;
    color:var(--pj-success);
}

.change-key.change-removed {
    border-bottom-style:dashed;
    background:transparent;
    color:var(--pj-danger);
}

.change-key.change-unchanged {
    background:transparent;
    color:var(--pj-muted);
}

.flow-panel .flow-node.change-unchanged,.flow-panel .flow-edge.change-unchanged {
    background:var(--pj-canvas);
    color:var(--pj-ink);
}

.flow-line.change-unchanged {
    stroke:var(--pj-muted);
}

.flow-panel .flow-node.change-added,.flow-panel .flow-edge.change-added {
    box-shadow:inset 6px 0 var(--pj-success);
}

.flow-line.change-added {
    stroke:var(--pj-success);
    stroke-width:3;
}

.flow-panel .flow-node.change-removed,.flow-panel .flow-edge.change-removed {
    box-shadow:inset 6px 0 var(--pj-danger);
}

.flow-line.change-removed {
    stroke:var(--pj-danger);
    stroke-width:3;
    stroke-dasharray:8 5;
}

@media(max-width:600px) {
    .catalog-heading {
        align-items:start;
        flex-direction:column;
        gap:8px;
    }
    .comparison-summary {
        padding:16px;
    }
    .comparison-counts {
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}


/* CaseFlowView also renders inside the evidence review page. Its controls and
   source semantics share the same presentation in both hosts. */
.flow-panel {
    color: var(--pj-ink);
    min-width: 0;
    font-family: "Segoe UI", Arial, sans-serif;
}

.flow-panel button {
    font: inherit;
    color: var(--pj-ink);
    background: var(--pj-paper);
    border: 1px solid var(--pj-rule);
    border-radius: 3px;
    padding: 9px 14px;
    cursor: pointer;
}

.flow-panel button:hover {
    background: var(--pj-accent-soft);
}

.flow-panel :focus-visible {
    outline: 3px solid var(--pj-focus);
    outline-offset: 3px;
}

.flow-panel .flow-node[aria-pressed=true],
.flow-panel .flow-edge[aria-pressed=true] {
    background: var(--pj-accent-soft);
    color: var(--pj-ink);
    outline: 2px solid var(--pj-accent);
    outline-offset: -5px;
}

.flow-panel .flow-node.analyst-inference,
.flow-panel .flow-edge.analyst-inference {
    border-color: var(--pj-info);
    border-style: double;
}

.flow-panel .flow-edge.source-backed {
    border-color: var(--pj-success);
}

.flow-panel .flow-edge.unknown {
    border-color: var(--pj-warning);
    border-style: dotted;
}

.flow-panel .basis.analyst-inference {
    color: var(--pj-info);
    border-color: var(--pj-info);
    border-bottom-style: double;
}

.flow-line.analyst-inference:not(.change-added):not(.change-removed) {
    stroke: var(--pj-info);
    stroke-dasharray: 10 3 2 3;
}

.flow-panel .flow-outline button {
    border: 0;
    text-align: left;
    padding: 4px;
    background: transparent;
    text-decoration: underline;
}

.brief-card:focus-visible,
.brief-card:hover {
    border-color: var(--pj-accent);
}

.visual-brief-page .comparison-summary h2,
.visual-brief-page .catalog-heading h2 {
    font-family: Georgia, Cambria, serif;
    font-weight: 600;
}


.flow-panel .flow-node:focus-visible,
.flow-panel .flow-edge:focus-visible {
    outline: 3px solid var(--pj-focus);
    outline-offset: -5px;
}