/* Match the standalone review workspace's apply_theme() in desergo/app/presentation.py. */
:root {
    color-scheme: light;
    --red: #ab1e2c;
    --red-dark: #8f1723;
    --window: #f7f5f2;
    --text: #292725;
    --muted: #625e5a;
    --surface: #fff;
    --line: #dfdbd6;
    --canvas: #f8fafc;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--text);
    background: var(--window);
    font: 16px/1.5 Arial, sans-serif;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px clamp(16px, 3vw, 48px);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}
header div, .bar, .heading, .job {
    display: flex;
    gap: 12px;
    align-items: center;
}
.brand { color: var(--red); font-size: 28px; font-weight: 700; line-height: 1; }
.project-home { max-width: 720px; }
.project-home .card { padding: clamp(24px, 4vw, 40px); }
.project-home form { margin-top: 20px; }
.project-home .create-project { display: grid; gap: 8px; }
.project-home .create-project label { font-weight: 600; }
.project-home .create-project input { border: 1px solid var(--line); border-radius: 4px; padding: 8px; font: inherit; }
.project-home .create-project button { justify-self: start; }
.project-home .start-study { display: flex; flex-wrap: wrap; gap: 8px; }
.project-home ul { list-style: none; padding: 0; }
.project-home li { border-top: 1px solid var(--line); padding: 12px 0; }
.project-home a { color: var(--red-dark); font-weight: 600; }
header small { font-size: 14px; }

main { max-width: 1700px; margin: auto; padding: clamp(16px, 3vw, 48px); }
.heading { justify-content: space-between; margin: 0 0 16px; flex-wrap: wrap; }
.source { color: var(--muted); margin: 0 0 3px; font-size: 14px; }
h1 { font-size: 28px; line-height: 1.2; margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 18px; margin: 0; }
h3 { font-size: 18px; line-height: 1.3; margin: 0 0 4px; }
.heading a {
    text-decoration: none;
    color: white;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 5px;
    padding: 8px 13px;
    font-weight: 650;
}
.heading a:hover { background: var(--red-dark); border-color: var(--red-dark); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--red-dark); outline-offset: 3px; }

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 36%);
    gap: 16px;
    align-items: start;
}
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bar, .assessment, details { padding: 14px 16px; }
.bar { justify-content: space-between; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bar span, .job span { color: var(--muted); font-size: 14px; }
.job { justify-content: space-between; }
.job strong {
    color: var(--text);
    background: #efebe7;
    border: 1px solid #d7d1cb;
    border-radius: 10px;
    padding: 4px 9px;
    font-size: 14px;
    text-transform: capitalize;
}
.board {
    min-height: 240px;
    padding: clamp(12px, 2vw, 28px);
    display: grid;
    place-items: center;
    background: var(--canvas);
}
.board img { display: block; width: 100%; max-height: 65vh; }
.notice {
    margin-top: 14px;
    background: #fff7e8;
    border: 1px solid #dfc68f;
    border-radius: 6px;
    padding: 10px;
}
.notice p { margin: 0; }
.assessment p, li p { font-size: 14px; }
ul { padding-left: 18px; }
ul:empty { display: none; }
.scopes { list-style: none; padding: 0; font-size: 14px; }
li + li { margin-top: 7px; }
details { border-top: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
summary { cursor: pointer; font-weight: 600; }
summary:hover { color: var(--red-dark); }
summary span { float: right; font-variant-numeric: tabular-nums; }
dd { margin: 0 0 10px; font: 13px/1.5 ui-monospace, monospace; }
dt { color: var(--muted); }
.technical { white-space: pre-line; }
.mobile-status { display: none; }
header a { color: var(--red-dark); font-size: 14px; font-weight: 600; }
.program-content {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.program-page > p { color: var(--muted); }
.program-page [hidden] { display: none; }
.program-form, .program-form fieldset { min-width: 0; }
.program-heading {
    position: sticky;
    z-index: 1;
    top: 0;
    margin-bottom: 12px;
    padding: 8px 0;
    background: var(--window);
}
.program-actions, .draft-navigation, .draft-navigation form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.draft-navigation { justify-content: space-between; margin-bottom: 16px; }
.draft-navigation a { color: var(--red-dark); font-weight: 600; }
.save-draft, .draft-navigation button, .draft-navigation select {
    padding: 7px 12px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid #bcb5af;
    border-radius: 5px;
    font: inherit;
}
.save-draft, .draft-navigation button { cursor: pointer; font-weight: 600; }
.draft-navigation select { max-width: min(100%, 36ch); }
.draft-status { margin: 0; color: var(--muted); font-size: 14px; }
.program-form .assessment { display: grid; gap: 8px; padding: clamp(12px, 1.8vw, 24px); }
.program-form label { font-size: 14px; font-weight: 600; }
.program-form #room-retention { scroll-margin-top: 90px; }
.program-form #room-retention input[type="checkbox"] { accent-color: var(--red); }
.program-form input, .program-form select, .program-form textarea {
    background: var(--surface);
    color: var(--text);
    border: 1px solid #bcb5af;
    border-radius: 4px;
    padding: 8px;
    min-width: 0;
    font: inherit;
}
.program-form fieldset {
    display: grid;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    align-items: center;
    gap: 8px 12px;
    margin: 14px 0 0;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 12px;
}
.program-form legend { font-weight: 600; }
.program-form fieldset p { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--muted); }
.check-program {
    padding: 8px 16px;
    color: white;
    background: var(--red);
    border: 1px solid var(--red);
    border-radius: 5px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.check-program:hover { background: var(--red-dark); }
.check-program:focus-visible,
.program-form :focus-visible { outline: 2px solid var(--red-dark); outline-offset: 2px; }
.program-content .assessment section + section { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.program-form .geometry-controls {
    padding: 10px 0;
    border-top: none;
    border-bottom: 1px solid var(--line);
}
.program-form .geometry-controls summary span { color: var(--muted); font-weight: 400; }
.program-form .edit-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 12px;
}
.select-row { display: grid; grid-template-columns: minmax(100px, .75fr) minmax(0, 1.6fr); align-items: center; gap: 8px; }
.select-row select { width: 100%; max-width: 100%; }
.program-form .control-note { margin: 0; color: var(--muted); font-size: 14px; }
.room-group h3 { margin: 6px 0 8px; font-size: 15px; }
.count-grid { display: grid; gap: 6px; }
.room-count { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 12px; }
.room-count span { font-weight: 400; }
.room-count input { text-align: end; }
.additional-counts { padding: 12px 0 0; }
.additional-counts[open] .room-group { margin-top: 12px; }
.program-feedback { min-width: 0; }
#checked-result:not(:empty):not([hidden]) + .pending-review { display: none; }
#checked-result section p, #authored-overview section p { white-space: pre-line; }
@media (max-width: 820px) {
    .workspace, .program-content { grid-template-columns: minmax(0, 1fr); }
    .board img { max-height: none; }
    .mobile-status { display: block; margin: 0 0 16px; color: var(--red-dark); font-size: 14px; }
}
@media (max-width: 480px) {
    .select-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .program-form .geometry-controls summary span { float: none; display: block; }
}

/* Result controls use the same palette and drawing units as the desktop. */
.review-actions, .review-tools, .path-filters { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.review-actions form:has(select) { display:flex; flex-wrap:wrap; gap:6px; align-items:end; }
.review-actions label { display:grid; font-size:13px; gap:3px; }
.review-actions button, .review-tools button, .assessment + details button, .card details button,
.review-actions select, .inspect-panel select, .path-filters select { font:inherit; font-size:14px; padding:6px 10px; color:var(--text); background:var(--surface); border:1px solid #bcb5af; border-radius:4px; max-width:100%; }
.review-tools button, .review-actions button, .card details button { cursor:pointer; }
.review-tools { padding:10px 16px; }
.review-tools button[aria-pressed="true"] { color:var(--red-dark); border-color:var(--red); }
#plan-view { display:block; width:100%; max-height:65vh; touch-action:none; }
.room-hit { fill:transparent; stroke:transparent; cursor:pointer; }
.room-hit.selected { fill:#ab1e2c18; stroke:var(--red); stroke-width:2; }
.room-label { fill:#1f2937; stroke:none; pointer-events:none; }
#plan-view.pan-ready, #plan-view.pan-ready .room-hit { cursor:grab; }
#plan-view.panning, #plan-view.panning .room-hit { cursor:grabbing; }
#canvas-scale { color:var(--muted); font-size:13px; }
.finding { border:0; padding:3px 0; }
.finding > summary { font-weight:600; }
.opening-hit { cursor:pointer; }
.opening-hit text { font: bold 9px sans-serif; }
.opening-target { stroke:transparent; stroke-width:14; vector-effect:non-scaling-stroke; pointer-events:stroke; }
.opening-hit:focus-visible .opening-target, .opening-hit[aria-pressed="true"] .opening-target { stroke:#ab1e2c60; }
#ruler-line, #ruler-label { pointer-events:none; }
#ruler-line, .journey-mark { vector-effect:non-scaling-stroke; }
#ruler-label { paint-order:stroke; stroke:white; stroke-width:3px; stroke-linejoin:round; fill:var(--text); vector-effect:non-scaling-stroke; }
.journey-mark { stroke:#555; stroke-width:2.5; pointer-events:none; }
.journey-mark[data-actor="patient"] { stroke:#086f9b; }
.journey-mark[data-actor="doctor"] { stroke:#933996; stroke-dasharray:8 4; }
.journey-mark[data-actor="staff"] { stroke:#20673e; stroke-dasharray:2 4; }
.journey-mark.focused-path { stroke-width:4; }
.journey-mark.other-path { opacity:.4; }
#plan-view[data-inspector="paths"] .witness-mark { display:none; }
.review-inspector { display:grid; gap:8px; min-width:0; }
.review-tabs { display:flex; border-bottom:1px solid var(--line); gap:8px; }
.review-tabs a { padding:8px 12px; border-bottom:3px solid transparent; color:var(--muted); font-weight:600; text-decoration:none; }
.review-tabs a[aria-selected="true"] { color:var(--red-dark); border-color:var(--red); }
.review-inspector [role="tabpanel"][hidden] { display:none; }
.paths-content { padding:12px 16px; }
@media (min-width:821px) {
    .review-inspector:has([role="tablist"]) { position:sticky; top:12px; }
    .review-inspector [role="tabpanel"] { max-height:calc(100vh - 82px); overflow:auto; overscroll-behavior:contain; }
    .review-inspector .path-list { max-height:none; overflow:visible; }
}
.paths-panel .path-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.paths-panel .path-filters select { width:100%; max-width:none; }
.paths-panel .review-tools { padding:8px 0; }
.route-key { display:flex; gap:16px; flex-wrap:wrap; }
.route-key span::before { display:inline-block; content:""; width:20px; margin:0 5px 3px 0; border-top:3px solid #086f9b; }
.route-key span:nth-child(2)::before { border-top-style:dashed; border-color:#933996; }
.route-key span:nth-child(3)::before { border-top-style:dotted; border-color:#20673e; }
.path-list [data-consult-finding] { display:inline-block; margin-left:6px; color:var(--red-dark); }
.inspect-panel, .review-metrics { padding:12px 16px; border-top:1px solid var(--line); }
.inspect-panel label { display:block; font-weight:600; margin-bottom:5px; }
.inspect-panel select { max-width:100%; }
.inspect-panel select + label { margin-top:8px; }
.inspect-panel p:empty { display:none; }
.lines { white-space:pre-line; }
.paths-panel .path-filters { align-items:flex-end; margin:8px 0; }
.path-filters label { font-size:13px; min-width:0; }
.path-filters select { display:block; max-width:200px; }
.path-list { max-height:420px; overflow:auto; list-style:none; padding:0; }
.path-list li { padding:6px 0; border-top:1px solid var(--line); }
.path-list label { cursor:pointer; font-weight:600; }
.path-list p { margin:4px 0; }
.path-list details { padding:4px 0; border:none; }
.downloads { position:relative; overflow:visible; padding:0; border:0; }
.downloads summary { padding:8px 15px; border-radius:5px; color:white; background:var(--red); }
.downloads ul { position:absolute; right:0; z-index:2; min-width:180px; margin:0; padding:5px; list-style:none; border:1px solid var(--line); background:var(--surface); }
.heading .downloads a { display:block; color:var(--red-dark); font-size:14px; padding:5px; border:0; background:transparent; }

#shape-editor { grid-column: 1 / -1; padding: 10px 0; }
#foot-canvas { display: block; width: 100%; height: 180px; background: var(--canvas); border: 1px solid var(--line); touch-action: none; cursor: crosshair; }
#foot-canvas rect { fill: #dde6e9; fill-opacity: .7; stroke: #505c68; vector-effect: non-scaling-stroke; }
.foot-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; gap: 4px; align-items: end; margin: 8px 0; }
.foot-row input { width: 100%; }
.foot-row label { font-size: 12px; }
#shape-editor button { color: var(--text); background: white; border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.brief-import { display: grid; gap: 12px; padding: 18px; max-width: 640px; }
.program-actions { flex-wrap: wrap; }
.witness-mark { stroke:#0969da; stroke-width:2; stroke-dasharray:5 3; fill:none; pointer-events:none; }
#open-study { display: grid; gap: 12px; }
#open-study button { justify-self: start; }
#open-study [role=status]:empty { display: none; }

/* Interactive footprint editor. Color follows the same accent as the program form. */
#foot-canvas { height: clamp(260px, 39vh, 440px); cursor: grab; border-radius: 4px; }
#foot-canvas[data-mode]:not([data-mode="select"]) { cursor: crosshair; }
#foot-canvas:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
#foot-canvas .selected { stroke: var(--red); stroke-width: 2px; }
#foot-canvas .ghost { fill: none; stroke: var(--red); stroke-dasharray: 5 3; }
#foot-canvas line { stroke: var(--red); stroke-width: 6px; vector-effect: non-scaling-stroke; }
#foot-canvas circle { fill: white; stroke: var(--red); stroke-width: 2px; vector-effect: non-scaling-stroke; }
#foot-canvas text { fill: var(--text); text-anchor: middle; user-select: none; }
#foot-canvas[data-mode="select"][data-hit="move"],
#foot-canvas[data-mode="select"][data-hit^="opening"] { cursor: move; }
#foot-canvas[data-mode="select"]:is([data-hit="left"],[data-hit="right"]) { cursor: ew-resize; }
#foot-canvas[data-mode="select"]:is([data-hit="top"],[data-hit="bottom"]) { cursor: ns-resize; }
#foot-canvas[data-mode="select"]:is([data-hit="top-left"],[data-hit="bottom-right"]) { cursor: nwse-resize; }
#foot-canvas[data-mode="select"]:is([data-hit="top-right"],[data-hit="bottom-left"]) { cursor: nesw-resize; }
#foot-context[hidden] { display: none; }
.foot-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#shape-editor button[aria-pressed="true"] { color: white; background: var(--red); }
#shape-editor button:disabled { opacity: .55; }
#foot-properties { margin-top: 8px; }
.foot-row { grid-template-columns: auto repeat(4,minmax(0,1fr)); }
@media (max-width: 570px) { .foot-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .foot-row > button { grid-column: 1 / -1; } }
.full-input-details pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }