/* LEVA brand tokens (navy, Kinetic Orange, DM Sans); source recorded in static/brand/PROVENANCE.json. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(brand/DMSans-Variable.woff2) format("woff2")}
:root{--leva-blue:#b9471f;--leva-action:#16756f;--leva-accent:#ff6b35;--leva-navy:#152a45;--leva-paper:#f7fafc;--leva-soft-blue:#ff8a5f;--leva-logo-blue:#ff6b35;--leva-logo-ink:#1e3a5f;--leva-surface:#FFFFFF;--leva-text:#132033;--leva-muted:#505C6C;--leva-rule:#CDD0E5;--leva-evidence:#0E7C7B;--leva-attention:#d97706;--leva-danger:#c53030;--leva-font:"DM Sans",system-ui,sans-serif;--leva-font-data:ui-monospace,SFMono-Regular,Menlo,monospace;--leva-radius-control:7px;--leva-radius-panel:8px}
:root{font-family:var(--leva-font);color:#132033;background:#edf0f5;font-synthesis:none;--navy:#152a45;--blue:#b9471f;--violet:#9067d9;--teal:#008577;--border:#e3e7ef;--muted:#7b8797;--rail:112px;--panel:270px}*{box-sizing:border-box}body{margin:0;font-size:12px}button,input,select,textarea{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button,a,input,select,textarea{outline-offset:4px}button:focus-visible,a:focus-visible{outline:2px solid var(--blue)}button{background:none;border:0}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button[hidden],[hidden]{display:none!important}.icon-button{width:30px;height:30px;display:inline-flex;justify-content:center;align-items:center;border-radius:6px;color:#778398;cursor:pointer}.icon-button:hover{background:#f0f3f8;color:var(--navy)}.icon-button svg{width:18px;height:18px}.workspace{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--panel);height:calc(100dvh - 54px)}.workspace.panel-closed{grid-template-columns:var(--rail) minmax(0,1fr)}.workspace.panel-closed .measurements{display:none}.page-rail{background:#f8f9fc;border-right:1px solid var(--border);overflow:auto;scrollbar-width:thin;z-index:10}.rail-heading{font-size:9px;letter-spacing:1.25px;color:#8a96a7;font-weight:650;display:flex;justify-content:space-between;padding:20px 13px 13px}.rail-heading span{letter-spacing:0;color:#a3adba}.page-thumb{display:block;width:100%;padding:10px 13px;text-align:left;position:relative}.page-thumb>div{height:61px;background:#fff;border:1px solid #e0e5ed;border-radius:3px;display:flex;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 1px 2px #13203305}.page-thumb img{width:100%;height:100%;object-fit:contain}.page-thumb .page-label{display:block;color:#7c889a;font-size:9px;margin-top:7px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.page-thumb.active{background:#fff3ee}.page-thumb.active>div{outline:1.5px solid var(--blue);border-color:transparent}.page-thumb.active .page-label{color:var(--blue);font-weight:600}.canvas-area{position:relative;min-width:0;overflow:hidden;background:#edf0f5}.canvas-top{position:absolute;left:22px;right:20px;top:18px;z-index:5;display:flex;align-items:flex-start;gap:12px;pointer-events:none}.sheet-title{display:flex;flex-direction:column;gap:5px;min-width:0}.sheet-title>span:first-child{font-size:11px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.sheet-title>span:last-child{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.25px;color:#919bad}.agents{margin-left:auto;display:flex;gap:6px;pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;max-width:65%}.agent-chip{display:flex;gap:6px;align-items:center;background:#ffffffef;border:1px solid #dce2ec;border-radius:16px;padding:5px 9px 5px 5px;box-shadow:0 2px 4px #13203304;max-width:200px}.agent-chip.following{border-color:var(--actor);box-shadow:0 0 0 1px var(--actor)}.agent-dot{display:flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--actor);color:white;font-size:9px;font-weight:600}.agent-name{font-size:10px;font-weight:570;white-space:nowrap}.agent-status{font-size:9px;color:#8c97a6;max-width:90px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;outline:none}.stage[data-tool=pan]{cursor:grab}.stage.panning{cursor:grabbing}.stage[data-tool=line],.stage[data-tool=polygon],.stage[data-tool=count],.stage[data-tool=calibrate]{cursor:crosshair}.paper{position:absolute;left:0;top:0;transform-origin:0 0;background:white;box-shadow:0 6px 24px #13203312,0 1px 3px #1320330c;user-select:none}.paper>img{display:block;width:100%;height:100%;pointer-events:none}.paper>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.shape{pointer-events:all;cursor:pointer}.shape-label{font:10px -apple-system,BlinkMacSystemFont,sans-serif;font-weight:600;paint-order:stroke;stroke:white;stroke-width:3px;stroke-linejoin:round;pointer-events:none}.handle{fill:white;stroke:var(--blue);pointer-events:all;cursor:move}.toolbar{position:absolute;top:83px;left:18px;z-index:7;display:flex;flex-direction:column;gap:3px;background:#fff;padding:5px;border:1px solid #dce2eb;border-radius:10px;box-shadow:0 4px 12px #1320330b}.tool{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:#8190a4}.tool svg{width:19px;height:19px}.tool:hover{background:#f0f3f8;color:var(--navy)}.tool.active{background:var(--navy);color:white}.toolbar-rule{height:1px;background:var(--border);margin:4px 5px}.follow-banner{position:absolute;top:66px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--actor);color:#fff;border-radius:5px;font-size:10px;padding:5px 7px 5px 11px;z-index:8;white-space:nowrap}.follow-banner button{color:#fff;font-size:16px;line-height:16px;padding:0 3px}.scale-status{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#8593a6;pointer-events:auto;cursor:pointer;background:#edf0f5da;padding:7px 0}.zoom{display:flex;align-items:center;border:1px solid #dde3ec;border-radius:7px;background:#fff;box-shadow:0 2px 4px #13203304;height:30px;pointer-events:auto}.zoom button{height:28px;min-width:25px;padding:0 7px;font-size:14px;color:#778397;display:flex;align-items:center;justify-content:center}.zoom #zoom-label{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;min-width:46px}.zoom span{height:13px;width:1px;background:var(--border)}.zoom svg{width:13px;height:13px}.run-button,.stop-button{height:30px;width:30px;background:var(--navy);color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center}.run-button svg{height:18px;width:18px}.stop-button svg{width:17px;height:17px;fill:currentColor;stroke:none}.run-error{color:#a04148;background:#fff3f2;border:1px solid #efcecf;padding:9px 12px;font-size:10px;border-radius:7px;margin-top:7px;max-height:70px;overflow:auto}.measurements{background:white;border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0;position:relative;z-index:10}.panel-header{height:62px;display:flex;align-items:center;padding:0 17px;gap:7px}.panel-header h1{margin:0;font-size:12px;font-weight:650;letter-spacing:-.1px}.panel-header>span{font:9px ui-monospace,SFMono-Regular,Menlo,monospace;color:#9ca7b6}.panel-header .icon-button{margin-left:auto;width:23px;height:23px}.panel-header .icon-button svg{width:14px;height:14px}.panel-tabs{display:flex;gap:17px;padding:0 17px;border-bottom:1px solid var(--border)}.panel-tabs button{font-size:10px;color:#94a0b0;padding:0 0 12px;border-bottom:2px solid transparent}.panel-tabs button.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}#measurement-list{overflow:auto;flex:1;padding-bottom:12px;scrollbar-width:thin}.measure-empty{padding:30px 20px;color:#a0aaba;text-align:center;font-size:11px;line-height:18px}.measure-row{width:100%;display:grid;grid-template-columns:6px 1fr auto;gap:9px;padding:15px 17px;text-align:left;border-bottom:1px solid #eef1f6;align-items:center}.measure-row:hover{background:#fafbfe}.measure-row.selected{background:#eff4fe}.measure-swatch{width:5px;height:22px;border-radius:3px;background:var(--actor)}.measure-label{font-size:11px;color:#344760;font-weight:530;line-height:16px;display:block}.measure-meta{font-size:9px;color:#9aa5b3;display:block;margin-top:4px;line-height:13px}.measure-value{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:550;white-space:nowrap}.measure-unit{font-size:9px;color:#9aa5b3;font-weight:400;display:block;text-align:right;margin-top:5px}.panel-footer{padding:13px 17px;border-top:1px solid var(--border);font-size:9px;color:#9aa5b3;display:flex;justify-content:space-between}.panel-footer>span:first-child{color:#79879b}#selection-detail{padding:16px 17px;border-top:1px solid var(--border);background:#fbfcfe;max-height:40%;overflow:auto}.detail-title{font-size:11px;font-weight:600;margin-bottom:10px}.detail-source{font-size:10px;line-height:16px;color:#8995a6;margin-bottom:13px;white-space:pre-wrap;overflow-wrap:anywhere}.detail-actions{display:flex;gap:6px}.detail-actions button{font-size:10px;padding:7px 9px;border:1px solid #dfe5ee;border-radius:5px;background:#fff}.detail-actions .accept{background:var(--navy);color:white;border-color:var(--navy)}.detail-actions .delete{margin-left:auto;color:#aa5960}.empty-canvas{position:absolute;top:45%;width:100%;text-align:center;color:#8e9caf;font-size:13px}#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);max-width:min(560px,90vw);background:var(--navy);color:white;padding:11px 18px;border-radius:7px;font-size:12px;box-shadow:0 5px 20px #13203320;z-index:100}dialog{border:1px solid #dfe4ed;border-radius:12px;width:340px;max-width:90vw;box-shadow:0 15px 80px #13203325;padding:25px;color:var(--navy)}dialog::backdrop{background:#13203328;backdrop-filter:blur(2px)}dialog h2{font-size:16px;letter-spacing:-.3px;margin:0 0 22px}dialog label{font-size:11px;color:#8190a4;display:block}dialog input{display:block;width:100%;border:1px solid #dce3ee;border-radius:6px;padding:10px;margin-top:7px;color:var(--navy);font-size:13px}@media(max-width:1100px){:root{--panel:240px;--rail:92px}.page-thumb>div{height:49px}.canvas-top{left:18px}.agents{max-width:60%}.agent-status{display:none}}@media(max-width:820px){:root{--rail:80px;--panel:225px}.measurements{position:absolute;right:0;top:54px;bottom:0;width:225px;box-shadow:-5px 0 20px #13203309}.workspace{grid-template-columns:var(--rail) minmax(0,1fr)}.canvas-top{right:12px}.sheet-title>span:first-child{max-width:150px}.agent-chip{padding-right:6px}.agent-name{max-width:65px;text-overflow:ellipsis;overflow:hidden}.page-thumb{padding:10px}.page-thumb>div{height:42px}.rail-heading{padding:18px 10px 12px;font-size:8px}.toolbar{left:12px}}@media(max-width:550px){:root{--rail:60px}.workspace{height:calc(100dvh - 50px)}.measurements{top:50px}.rail-heading{font-size:7px;padding:15px 6px 8px;letter-spacing:.7px}.page-thumb{padding:9px 6px}.page-thumb>div{height:34px}.page-label{font-size:8px!important}.sheet-title{display:none}.canvas-top{top:15px}.agents{max-width:100%;gap:3px}.agent-name{max-width:50px;font-size:9px}.agent-dot{width:18px;height:18px}.toolbar{top:67px}.scale-status{font-size:8px;max-width:120px}.tool{width:28px;height:29px}.toolbar{padding:4px}.toolbar-rule{margin:3px 5px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

dialog select{display:block;width:100%;border:1px solid #dce3ee;border-radius:6px;padding:10px;margin:7px 0 17px;color:var(--navy);font-size:12px;background:white}
#stage:not([data-tool="select"]) #shapes *,#draft *,#cursors *{pointer-events:none}

.coverage-panel{border-bottom:1px solid var(--border);flex-shrink:0;font-size:11px}.coverage-panel summary{cursor:pointer;padding:13px 17px;font-weight:600}.coverage-panel[open] summary{padding-bottom:8px}

.follow-banner select{font:inherit;color:inherit;background:transparent;border:1px solid #ffffff70;border-radius:4px;padding:3px 4px;margin-left:8px;cursor:pointer}.follow-banner select option{color:#132033;background:white}

.detail-actions{flex-wrap:wrap}
#notes-list{max-height:170px;overflow:auto;padding:0 8px 8px}.note-row{width:100%;text-align:left;display:block;padding:9px;font-size:11px;line-height:16px;border-bottom:1px solid var(--border)}.note-row span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-row small{display:block;color:#8593a6;font-size:9px;margin-top:3px}
.stage[data-tool=annotate]{cursor:crosshair}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Scope colours link the quantity list and the drawing. */
#shapes > g[data-shape]{transition:opacity 100ms linear}
.boq-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;width:100%;padding:13px 16px;border:0;border-bottom:1px solid #e5e9ef;background:white;text-align:left;color:#132033;cursor:pointer}
.boq-row:hover,.boq-row:focus-visible{background:#eef3f9}.boq-label{font-size:11px;line-height:1.5;max-width:165px}.boq-label i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px}.boq-row strong{font-size:23px;font-weight:600;text-align:right;font-family:var(--leva-font-data);font-variant-numeric:tabular-nums}.boq-row small{display:block;font-size:10px;font-weight:400;color:#69788a;margin-top:4px}
#boq-panel{flex-shrink:0}
@media(prefers-reduced-motion:reduce){#shapes > g[data-shape]{transition:none}}

.boq-item{border-bottom:1px solid #e5e9ef}.boq-item .boq-row{border-bottom:0}.boq-item .boq-row strong{font-size:19px}#geometry-panel{flex-shrink:0}

.takeoff-sections{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}.takeoff-sections #measurement-list{overflow:visible;flex:none}

#shapes .shape-label{display:none}.team-history{position:relative;font-size:10px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:8px}.team-history summary{cursor:pointer}.team-history>div{position:absolute;right:0;top:100%;display:grid;gap:6px;background:#fff;padding:10px;border:1px solid var(--border);min-width:190px;z-index:20}.team-history .agent-name{max-width:110px}.agent-chip .agent-name{max-width:110px}

.auto-follow{pointer-events:auto;border:1px solid #d9deea;border-radius:16px;padding:6px 10px;background:white;color:#536075;font-size:11px;white-space:nowrap}.auto-follow[aria-pressed=true]{background:#fff0eb;color:#b9471f;border-color:#ffd3c2}.activity-inset{position:absolute;right:20px;bottom:150px;width:320px;max-width:35%;padding:0;overflow:hidden;background:white;border:1px solid #d7deec;border-radius:10px;box-shadow:0 8px 30px #172c6526;z-index:8;text-align:left;cursor:pointer}.activity-inset[hidden]{display:none}.activity-inset>span{display:block;padding:9px 12px;font-size:11px;color:#536075;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-inset [data-inset-fill]{position:absolute;inset:0;width:100%;height:100%;max-width:none}.activity-inset .shape-label{display:none}@media(max-width:800px){.activity-inset{width:220px;bottom:160px;right:10px;max-width:40%}}

/* A brief overlay only; never reserves space or changes the main camera. */
.activity-inset{width:230px;max-width:28%;right:18px;bottom:120px;border-radius:8px}.activity-inset>span{font-size:10px;padding:7px 9px}@media(max-width:800px){.activity-inset{width:180px;max-width:32%;right:10px;bottom:140px}}

#drawing-upload { position: relative; display: flex; align-items: center; gap: 8px; font-size: 12px; }
#drawing-upload label, #drawing-upload button { border: 1px solid #d9deeb; border-radius: 6px; padding: 7px 10px; background: #fff; color: #152a45; cursor: pointer; white-space: nowrap; }
#drawing-upload input[type=file] { width: 190px; font-size: 11px; }
#drawing-upload .upload-limit { color: #667085; white-space: nowrap; }
#drawing-upload .upload-entry { display: flex; align-items: center; gap: 6px; }
#drawing-upload progress { width: 50px; }
#drawing-upload [role=alert] { color: #a62b36; max-width: 240px; }
#paper[hidden] { display: none; }
@media (max-width: 1100px) { #drawing-upload .upload-limit, #drawing-upload .upload-entry > span:first-child { display: none; } }

.project-page { max-width: 760px; width: 100%; margin: 48px auto; padding: 24px; overflow: auto; }
.project-page h1 { font-size: 28px; margin-bottom: 32px; }
.project-create { display: flex; align-items: end; gap: 16px; margin-bottom: 32px; }
.project-create label { display: block; margin-bottom: 8px; }
.project-create input { display: block; padding: 12px; border: 1px solid #cbd2de; border-radius: 6px; min-width: 300px; }
.project-create-button { padding: 13px 20px; background: #152a45; color: white; border-radius: 6px; }
.project-card { display: block; padding: 22px 0; border-bottom: 1px solid #dce1e8; color: #152a45; font-size: 18px; }

.measurement-dialog { margin: auto; padding: 24px; width: min(360px, 90vw); border: 1px solid #dce2ed; border-radius: 12px; color: #152a45; background: #fff; box-shadow: 0 16px 48px #10204030; }
.measurement-dialog::backdrop { background: #10204055; }
.measurement-dialog h2 { font-size: 18px; margin: 0 0 20px; }
.measurement-dialog label { display: block; font-size: 13px; margin-bottom: 8px; }
.measurement-dialog input { box-sizing: border-box; width: 100%; border: 1px solid #aab7cc; border-radius: 6px; padding: 10px; font: inherit; }
.measurement-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.measurement-actions button { padding: 8px 16px; border: 1px solid #dce2ed; border-radius: 6px; background: white; cursor: pointer; }
.measurement-actions button[type="submit"] { background: #152a45; color: white; border-color: #152a45; }

/* Supplier identity and navigation */
#sign-in { flex-direction: column; align-items: stretch; max-width: 420px; }
#sign-in input { min-width: 0; width: 100%; }
#sign-in button { align-self: flex-start; }
.project-page nav { display: flex; align-items: center; gap: 12px; }
.project-page a { text-decoration: none; }
.project-page .project-card { width: 100%; text-align: left; }
#members .project-card, #grants .project-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#members button { border: 1px solid #dce1e8; border-radius: 6px; padding: 8px 12px; font-size: 12px; white-space: nowrap; }
@media (max-width: 820px) {
  #members .project-card { align-items: flex-start; flex-direction: column; }
}

.boq-row small.review-status{font-weight:550;color:#2f6d5e}.boq-row small.review-status[data-review="To check"],.boq-row small.review-status[data-review=Unresolved],.boq-row small.review-status[data-review=Incomplete]{color:#895216}.boq-row small.review-note{margin-top:2px;overflow-wrap:anywhere}
/* Project overview (ADR 010): results first, the canvas only for exceptions. */
.overview-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.overview-table td { padding: 12px 8px 12px 0; border-bottom: 1px solid #dce1e8; }
.overview-table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.privacy li { margin-bottom: 8px; line-height: 1.5; }
/* First-run hub (ADR 013): one card that follows the project. */
.plan-mark { display: inline-block; width: 20px; }
.upload-entry { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; }
.upload-entry progress { flex: 1; max-width: 240px; }
#clarifications .project-card { font-size: 15px; line-height: 1.45; gap: 24px; }
#clarifications .project-card span:first-child { font-weight: 600; flex: 1; }
#clarifications .project-card span:last-child { flex: 1.4; color: #4b5a70; }
.setup-list { list-style: none; padding: 0; margin: 14px 0 0; }
.setup-list li { display: flex; gap: 10px; padding: 8px 0; font-size: 15px; }
.setup-list li small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.setup-list a { color: var(--leva-blue); font-weight: 600; }
.setup-list .setup-done { color: var(--teal); }
/* Operator console (/admin): navigation and the KPI dashboard (Joyne.Operator.Kpis). Numbers first. */
.admin-page { max-width: 1240px; font-size: 14px; color: var(--leva-text); }
.project-page .admin-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 28px; padding-bottom: 12px; border-bottom: 1px solid #dce1e8; }
.admin-nav-link { padding: 7px 12px; border-radius: 6px; color: #505c6c; font-weight: 550; font-size: 14px; }
.admin-nav-link:hover { background: #eef1f6; color: var(--leva-navy); }
.admin-nav-link.active { background: var(--leva-navy); color: #fff; }
.admin-nav-end { margin-left: auto; }
.kpi-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-page .kpi-header h1 { margin: 0 0 6px; }
.kpi-lede { margin: 0; color: #505c6c; font-size: 14px; line-height: 1.5; max-width: 620px; }
.kpi-refresh { padding: 8px 12px; border: 1px solid #cbd2de; border-radius: 6px; background: #fff; font-size: 13px; color: #505c6c; font-variant-numeric: tabular-nums; }
.kpi-refresh:hover { border-color: var(--leva-blue); color: var(--leva-navy); }
.kpi-section { margin-top: 32px; }
.kpi-section h2 { margin: 0 0 12px; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #505c6c; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.kpi-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 12px; background: #fff; border: 1px solid #dce1e8; border-radius: 8px; }
#kpis-north-star .kpi-grid { grid-template-columns: minmax(0, 1fr); }
#kpis-north-star .kpi-card { border-color: var(--leva-navy); border-width: 2px; }
.kpi-name { margin: 0; font-size: 14px; font-weight: 600; color: var(--leva-navy); line-height: 1.35; }
.kpi-value { display: flex; align-items: baseline; gap: 8px; }
.kpi-value strong { font-size: 30px; line-height: 1.1; font-weight: 650; color: var(--leva-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-period { font-size: 12px; color: #505c6c; }
.kpi-compare { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 0; font-size: 13px; color: #505c6c; font-variant-numeric: tabular-nums; }
.kpi-note { margin: 0; font-size: 12px; color: #9a5300; line-height: 1.4; }
.kpi-delta { font-weight: 600; white-space: nowrap; }
.kpi-good { color: #0b6b6a; }
.kpi-bad { color: #9b2c2c; }
.kpi-flat { color: #505c6c; }
.project-page svg.kpi-spark { display: block; width: 100%; height: auto; max-height: 64px; margin: 4px 0 2px; overflow: visible; stroke-width: 1; }
.kpi-spark-base { stroke: #dce1e8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.kpi-spark-line { fill: none; stroke: var(--leva-blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.kpi-spark-dot { fill: var(--leva-blue); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kpi-spark-now { fill: var(--leva-navy); }
.kpi-spark-hit { fill: transparent; stroke: none; cursor: default; }
.kpi-spark-empty { fill: #7b8797; font-size: 11px; text-anchor: middle; stroke: none; }
.kpi-definition { font-size: 13px; color: #505c6c; }
.kpi-definition summary { cursor: pointer; font-size: 12px; color: #b9471f; font-weight: 550; padding: 4px 0; }
.kpi-definition p { margin: 6px 0 8px; line-height: 1.5; }
.kpi-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.kpi-table th, .kpi-table td { padding: 3px 0; text-align: left; border-bottom: 1px solid #eef1f6; }
.kpi-table th:last-child, .kpi-table td:last-child { text-align: right; }
/* Business overview (ADR 016): numbers first. */
.overview-title { margin: 36px 0 0; font-size: 20px; font-weight: 650; color: var(--leva-navy); }
.overview + .overview-title { padding-top: 24px; border-top: 1px solid #dce1e8; }
.overview-panel { margin-top: 14px; padding: 14px 16px; background: #fff; border: 1px solid #dce1e8; border-radius: 8px; }
.overview-panel > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #b9471f; }
.overview-panel .kpi-lede { margin-top: 10px; font-size: 12px; max-width: none; }
.overview-toggle { display: inline-flex; border: 1px solid #cbd2de; border-radius: 6px; overflow: hidden; }
.overview-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.overview-table th { text-align: left; font-size: 11px; font-weight: 600; color: #505c6c; padding: 8px; border-bottom: 1px solid #dce1e8; white-space: nowrap; }
.overview-table td { padding: 8px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.overview-table .num { text-align: right; white-space: nowrap; }
.overview-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 12px; align-items: end; margin-top: 12px; }
.overview-form .fieldset { margin: 0; }
.overview-form .label { font-size: 12px; color: #505c6c; }
.overview-form input, .overview-form select { width: 100%; padding: 7px 9px; border: 1px solid #cbd2de; border-radius: 6px; background: #fff; font-size: 13px; }
.overview-form button { margin-bottom: 8px; }
.overview-link { border: 0; background: none; padding: 0; color: #9b2c2c; font-size: 12px; cursor: pointer; }
.kpi-unmeasured { background: #f7f8fb; border-style: dashed; }
.kpi-missing { margin: 2px 0 0; font-size: 16px; font-weight: 650; color: #505c6c; }
.kpi-reason { margin: 0; font-size: 13px; line-height: 1.5; color: #505c6c; }
@media (max-width: 600px) {
  .project-page.admin-page { margin: 16px auto; padding: 16px; }
  .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi-value strong { font-size: 26px; }
  .admin-nav-end { margin-left: 0; }
}
/* Signed-out pages (JoyneWeb.AuthComponents): the product at work beside the form. Unlike the canvas, these pages scroll. */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); background: #fff; color: var(--leva-text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
:where(.auth) p { margin: 0; }
.auth svg { width: 20px; height: 20px; stroke-width: 2; }
.auth a { color: #b9471f; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.auth a:hover { color: var(--leva-navy); }
.auth :focus-visible { outline: 3px solid var(--leva-blue); outline-offset: 3px; }
.auth-brand { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; gap: 44px; padding: 64px clamp(32px, 5vw, 88px); color: #fff; background: radial-gradient(90% 60% at 0% 0%, #2a4b78 0%, transparent 70%), radial-gradient(70% 60% at 100% 100%, rgba(255, 107, 53, .38) 0%, transparent 70%), var(--leva-navy); overflow: hidden; }
.auth-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 138, 95, .16) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 75%); mask-image: linear-gradient(160deg, #000 10%, transparent 75%); }
.auth-brand :focus-visible { outline-color: var(--leva-soft-blue); }
.auth-brand-copy { max-width: 640px; }
.auth-headline { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.auth-proof { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 18px; color: #ffd3c2; }
.auth-proof svg { color: var(--leva-soft-blue); }
.auth-loop { position: relative; margin: 0; max-width: 760px; }
.auth-loop video, .auth-loop img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: #eef1fa; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 138, 95, .28); }
.auth-loop figcaption { margin-top: 14px; font-size: 13px; color: #ffc4ad; }
.auth-loop-toggle { position: absolute; top: 12px; right: 12px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(21, 42, 69, .78); border-radius: 999px; }
.auth-loop-toggle:hover { background: var(--leva-navy); }
.auth-panel { display: flex; flex-direction: column; align-items: center; padding: 48px 32px 32px; background: #fff; }
.auth-card { width: 100%; max-width: 400px; margin: auto 0; }
.auth a.auth-logo { display: inline-block; margin-bottom: 44px; border-radius: 4px; }
.auth-logo img { display: block; width: 111px; height: 30px; }
.auth h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--leva-navy); }
.auth-eyebrow { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #b9471f; }
.auth-lede { margin-bottom: 28px; color: var(--leva-muted); }
.auth-lede strong { color: var(--leva-text); font-weight: 600; overflow-wrap: anywhere; }
.auth-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.auth-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--leva-text); }
.auth-input { position: relative; }
.auth-input input { display: block; width: 100%; height: 50px; padding: 0 14px; font-size: 16px; color: var(--leva-navy); background: #fff; border: 1px solid #7F89A6; border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.auth-input input:hover { border-color: #4A5577; }
.auth-input input:focus { outline: 2px solid transparent; border-color: #b9471f; box-shadow: 0 0 0 3px rgba(255, 107, 53, .35); }
.auth-input input[aria-invalid="true"] { border-color: #b42a2a; }
.auth-input input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(197, 48, 48, .22); }
.auth-input:has(.auth-reveal:not([hidden])) input { padding-right: 76px; }
.auth-reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); height: 38px; padding: 0 12px; font-size: 14px; font-weight: 600; color: #b9471f; border-radius: 6px; }
.auth-reveal:hover { background: #fff0eb; }
.auth-submit, .auth a.auth-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 6px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; background: #b9471f; border-radius: 8px; box-shadow: 0 10px 24px -10px rgba(185, 71, 31, .7); transition: background .15s, transform .1s; }
@media (hover: hover) { .auth-submit:hover, .auth a.auth-submit:hover { color: #fff; background: var(--leva-navy); } }
.auth-submit:active { transform: translateY(1px); }
.auth-secondary { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--leva-navy); background: #fff; border: 1px solid var(--leva-rule); border-radius: 8px; cursor: pointer; }
.auth-choice { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 16px; }
#oauth-supplier { margin: 8px 0 12px; padding: 0; border: 0; }
#oauth-supplier legend { margin-bottom: 6px; font-weight: 600; }
.assistant-url { display: flex; gap: 8px; align-items: center; margin: 8px 0 20px; }
.assistant-url code { padding: 10px 12px; font-size: 15px; background: #f4f6fa; border: 1px solid #dce1e8; border-radius: 6px; word-break: break-all; }
.auth-aside { margin-bottom: 10px; font-size: 15px; color: var(--leva-muted); }
.auth-aside:empty { display: none; }
.auth-notice { margin-bottom: 20px; padding: 12px 14px; font-size: 15px; color: var(--leva-navy); background: #fff0eb; border: 1px solid #ffd3c2; border-radius: 8px; }
.auth-notice p + p { margin-top: 4px; }
.auth-notice-title { font-weight: 600; }
/* Sign-up (ADR 022): the select, consent, field errors and next steps. */
.auth-input select { display: block; width: 100%; height: 50px; padding: 0 12px; font-size: 16px; color: var(--leva-navy); background: #fff; border: 1px solid #7F89A6; border-radius: 8px; }
.auth-input select:focus { outline: 2px solid transparent; border-color: #b9471f; box-shadow: 0 0 0 3px rgba(255, 107, 53, .35); }
.auth-input select[aria-invalid="true"] { border-color: #b42a2a; }
.auth-field-error { margin: -10px 0 0; font-size: 14px; color: #b42a2a; }
.auth-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.auth-notice-error { color: #8A0429; background: #FFF1F4; border-color: #F5B3C4; }
.auth-notice-error a { color: #8A0429; }
.auth-trust { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding-top: 20px; font-size: 14px; color: var(--leva-muted); border-top: 1px solid var(--leva-rule); }
.auth-trust svg { width: 18px; height: 18px; color: var(--leva-evidence); }
.auth-footer { margin-top: 32px; font-size: 15px; color: var(--leva-muted); text-align: center; }
/* Drawings-first sign-up (JoyneWeb.SignupLive): the drop zone comes first. */
.signup-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 168px; margin-bottom: 14px; padding: 24px 16px; text-align: center; color: var(--leva-navy); background: #fff7f3; border: 2px dashed #ffb89c; border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.signup-drop:hover, .signup-drop.over { background: #fff0eb; border-color: #b9471f; }
.signup-drop:focus-within { outline: 3px solid var(--leva-blue); outline-offset: 3px; }
.signup-drop.has-files { min-height: 96px; }
.signup-drop svg { width: 28px; height: 28px; fill: none; stroke: #b9471f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.signup-drop-title { font-size: 17px; font-weight: 650; }
.signup-drop-hint { font-size: 14px; color: var(--leva-muted); }
.signup-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.signup-file-error { margin: 0 0 12px; }
.signup-chips { display: flex; flex-direction: column; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.signup-chip { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px 8px 12px; font-size: 14px; background: #fff; border: 1px solid var(--leva-rule); border-radius: 8px; overflow: hidden; }
.signup-chip > svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #4A5577; stroke-width: 1.8; }
.signup-chip-name { flex: 1; min-width: 0; font-weight: 600; color: var(--leva-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signup-chip-size { color: var(--leva-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.signup-chip-state { font-weight: 600; color: #1d6b2e; }
.signup-chip-error { font-weight: 600; color: #b42a2a; white-space: nowrap; }
.signup-chip.failed { border-color: #F5B3C4; background: #FFF1F4; }
.signup-chip-remove { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: #4A5577; }
.signup-chip-remove:hover { background: #fff0eb; color: var(--leva-navy); }
.signup-chip-remove svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.signup-chip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #f3ebe7; }
.signup-chip-bar span { display: block; height: 100%; background: #b9471f; transition: width .2s; }
.signup-terms { margin: -6px 0 0; font-size: 13px; line-height: 1.45; color: var(--leva-muted); text-align: center; }
.auth .signup-terms a { font-weight: 500; }
.signup-hint { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--leva-muted); text-align: center; }
.signup-link { display: block; margin: 0 auto 8px; padding: 6px 8px; font-size: 15px; font-weight: 600; color: #b9471f; text-decoration: underline; text-underline-offset: 3px; border-radius: 6px; cursor: pointer; }
.signup-link:hover { color: var(--leva-navy); }
.auth-submit:disabled { background: #9AA6C8; box-shadow: none; cursor: not-allowed; }
.signup-address { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 20px; }
.signup-pill { max-width: 100%; padding: 6px 12px; font-size: 15px; font-weight: 600; color: var(--leva-navy); background: #fff0eb; border-radius: 999px; overflow-wrap: anywhere; }
.auth a.signup-open-mail { padding: 6px 12px; font-size: 14px; text-decoration: none; border: 1px solid #ffd3c2; border-radius: 999px; }
.auth a.signup-open-mail:hover { background: #fff0eb; }
.signup-banner { margin: 0 0 14px; padding: 8px 12px; font-size: 14px; color: #6B4A00; background: #FFF6E0; border: 1px solid #F2D58F; border-radius: 8px; }
.signup-upload-input { display: none; }
.signup-code { margin: 8px 0 14px; }
.signup-code-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.signup-code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.signup-code-boxes input { width: 100%; height: 56px; padding: 0; font-size: 24px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; color: var(--leva-navy); background: #fff; border: 1px solid #7F89A6; border-radius: 8px; }
.signup-code-boxes input:focus { outline: 2px solid transparent; border-color: #b9471f; box-shadow: 0 0 0 3px rgba(255, 107, 53, .35); }
.signup-code-boxes input[aria-invalid="true"] { border-color: #b42a2a; }
.signup-code .auth-field-error { margin: 0 0 8px; }
.signup-sent-again { margin: 0; font-size: 14px; color: #1d6b2e; }
.signup-actions { display: flex; justify-content: center; gap: 12px; }
.signup-actions .signup-link { margin: 0; }
#sign-in-page { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }
#sign-in-page .auth-headline { font-size: clamp(26px, 2.4vw, 34px); }
#sign-in-page h1 { margin-bottom: 28px; }
#sign-in-page :focus-visible { outline-color: var(--leva-navy); }
#sign-in-page .auth-input input:focus { outline: 2px solid var(--leva-navy); outline-offset: 2px; box-shadow: none; }
#sign-in-page .auth-input input:not([aria-invalid="true"]):focus { border-color: var(--leva-navy); }
@media (max-width: 899px) {
  #sign-in-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
  #sign-in-page .auth-brand { display: none; }
  .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .auth-brand { gap: 0; padding: 22px 20px 24px; }
  .auth-headline { font-size: 23px; line-height: 1.15; }
  .auth-proof { margin-top: 8px; font-size: 15px; }
  .auth-proof svg { width: 18px; height: 18px; }
  .auth-loop { display: none; }
  .auth-panel { padding: 28px 20px 24px; }
  .auth-card { margin: 0; }
  .auth a.auth-logo { margin-bottom: 28px; }
  .auth h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth *, .auth *::before { transition: none !important; }
}

/* Operator reports (/admin/runs): numbers first, calm, read-only. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.report-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.admin-page .report-header h1 { margin: 0 0 6px; }
.period-tabs { display: inline-flex; gap: 2px; padding: 3px; background: #e7ebf3; border-radius: 8px; }
.project-page .period-tab { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 550; color: #505c6c; white-space: nowrap; transition: background .15s, color .15s; }
.project-page .period-tab:hover { color: var(--leva-navy); background: #fff; }
.project-page .period-tab.active { color: #fff; background: var(--leva-navy); }
.stat-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; background: #fff; border: 1px solid #dce1e8; border-radius: 8px; }
.stat-name { margin: 0; font-size: 12px; font-weight: 600; color: #505c6c; }
.stat-value { font-size: 26px; line-height: 1.15; font-weight: 650; color: var(--leva-navy); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.stat-compare { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; font-size: 12px; color: #505c6c; font-variant-numeric: tabular-nums; }
.report-section { margin-top: 32px; }
.report-section > h2, .report-section > header > h2 { margin: 0 0 10px; font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #505c6c; }
.report-section > .kpi-lede { margin: -4px 0 10px; font-size: 13px; max-width: none; }
.report-empty { margin-top: 16px; padding: 18px 20px; background: #fff; border: 1px dashed #cbd2de; border-radius: 8px; color: #505c6c; font-size: 14px; line-height: 1.5; }
.report-empty code, .report-page code { font-family: var(--leva-font-data); font-size: 12px; color: var(--leva-navy); }
@media (max-width: 600px) {
  .report-header { align-items: flex-start; }
  .stat-tile { padding: 12px; }
  .stat-value { font-size: 21px; }
}
/* Pages scroll; only the canvas workspace locks the page (its panels scroll inside).
   :has() follows live navigation between the results page and the canvas. */
body:has(.workspace) { overflow: hidden; }

.review-count { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 10px; background: #fff1e0; color: #9a5300; font-weight: 650; text-align: center; }

/* App shell (ADR 024 slice 1): one left sidebar on every supplier page. A rail
   when collapsed ([) and always on the canvas; a drawer on phones. */
.shell { --side-w: 248px; --side-rail: 60px; display: flex; min-height: 100dvh; background: #edf0f5; }
.shell-menu-toggle { position: absolute; opacity: 0; pointer-events: none; }
.sidebar { position: sticky; top: 0; flex: 0 0 var(--side-w); width: var(--side-w); height: 100dvh; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; background: #fff; border-right: 1px solid #e3e7ef; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; font-size: 14px; color: var(--leva-text); z-index: 30; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.7; }
.side-org { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 6px; border-radius: 8px; color: var(--leva-navy); text-decoration: none; font-weight: 650; }
.side-org:hover { background: #f3f5fa; }
.side-mark { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: var(--leva-navy); color: #fff; font-size: 13px; font-weight: 700; }
.side-org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-chev { color: #8a94a4; }
.side-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.sidebar .side-new { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--leva-blue); color: #fff; font-weight: 600; text-decoration: none; }
.sidebar .side-new:hover { background: #963d1b; }
.side-new kbd, .side-search kbd, .side-collapse kbd { margin-left: auto; font: 11px var(--leva-font-data); padding: 1px 6px; border-radius: 4px; background: #ffffff26; color: inherit; opacity: .8; }
.side-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #dce1e8; border-radius: 8px; color: #6b7686; }
.side-search:focus-within { border-color: var(--leva-blue); box-shadow: 0 0 0 3px #ff6b351f; }
.side-search label { display: flex; cursor: text; }
.side-search input { flex: 1; width: 100%; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: none; font-size: 14px; color: var(--leva-text); }
.side-search kbd, .side-collapse kbd { background: #eef1f6; color: #6b7686; }
.side-nav { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.side-item, .side-collapse button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 7px; color: #3a4660; text-decoration: none; font-size: 14px; text-align: left; }
.side-item:hover, .side-collapse button:hover { background: #f3f5fa; color: var(--leva-navy); }
.side-item.active { background: #fff0eb; color: var(--leva-navy); font-weight: 600; }
.side-count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: #8a94a4; }
.side-count.hot { padding: 0 7px; border-radius: 9px; background: color-mix(in srgb, var(--leva-attention) 18%, #fff); color: var(--leva-navy); font-weight: 650; }
.side-dot { flex: 0 0 18px; display: grid; place-items: center; }
.side-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #aab2c0; }
.dot-to-check::before { background: var(--leva-attention); }
.dot-measuring::before { background: var(--leva-blue); }
.dot-done::before { background: var(--leva-evidence); }
.dot-stopped::before { background: var(--leva-danger); }
.side-foot { margin-top: auto; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #eef1f6; }
.side-allowance { margin: 0 10px; padding: 6px 8px; border-radius: 7px; background: #f7fafc; font-size: 12px; color: #505c6c; }
.side-me { display: flex; align-items: center; gap: 10px; padding: 6px 4px 2px 8px; }
.side-avatar { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #e9edf4; color: #505c6c; font-size: 12px; font-weight: 650; }
.side-person { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--leva-muted); text-decoration: none; }
a.side-person:hover { text-decoration: underline; }
.side-signout { display: flex; padding: 6px; border-radius: 7px; color: #6b7686; }
.side-signout:hover { background: #f3f5fa; color: var(--leva-navy); }
.shell-topbar, .shell-scrim { display: none; }

/* Rail: collapsed by the person, or always around the canvas. */
html.side-collapsed .shell .sidebar, .shell-rail .sidebar { flex-basis: var(--side-rail); width: var(--side-rail); padding: 12px 8px; }
html.side-collapsed .shell .side-label, .shell-rail .side-label { display: none; }
html.side-collapsed .shell :is(.side-item, .side-org, .sidebar .side-new, .side-collapse button, .side-me), .shell-rail :is(.side-item, .side-org, .sidebar .side-new, .side-collapse button, .side-me) { justify-content: center; padding-left: 0; padding-right: 0; }
html.side-collapsed .shell .side-search, .shell-rail .side-search { justify-content: center; padding: 8px 0; border-color: transparent; }
html.side-collapsed .shell .side-me, .shell-rail .side-me { flex-direction: column; gap: 6px; }
.shell-rail .side-collapse { display: none; }
.dot-queued::before { background: var(--leva-soft-blue); }
/* The canvas rail opened over the drawing ([ or /): it keeps its 60 px slot,
   so the drawing doesn't move. */
@media (min-width: 901px) {
  .shell-rail.rail-open .sidebar { flex-basis: var(--side-w); width: var(--side-w); margin-right: calc(var(--side-rail) - var(--side-w)); padding: 12px 10px; box-shadow: 8px 0 30px color-mix(in srgb, var(--leva-navy) 14%, transparent); }
  html .shell.shell-rail.rail-open .side-label { display: revert; }
  html .shell.shell-rail.rail-open :is(.side-item, .side-org, .sidebar .side-new, .side-me) { justify-content: flex-start; padding-left: 10px; padding-right: 10px; flex-direction: row; }
  html .shell.shell-rail.rail-open .side-search { justify-content: flex-start; padding: 0 10px; border-color: #dce1e8; }
}

/* Phones: the sidebar is a drawer behind a top bar. */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar, html.side-collapsed .shell .sidebar, .shell-rail .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); padding: 12px 10px; transform: translateX(-102%); transition: transform .18s ease; }
  html.side-collapsed .shell .side-label, .shell-rail .side-label { display: revert; }
  html.side-collapsed .shell :is(.side-item, .side-org, .sidebar .side-new, .side-me), .shell-rail :is(.side-item, .side-org, .sidebar .side-new, .side-me) { justify-content: flex-start; padding-left: 10px; padding-right: 10px; flex-direction: row; }
  html.side-collapsed .shell .side-search, .shell-rail .side-search { justify-content: flex-start; padding: 0 10px; border-color: #dce1e8; }
  .side-collapse, .side-search kbd, .side-new kbd { display: none !important; }
  .shell-menu-toggle:checked ~ .sidebar { transform: none; box-shadow: 8px 0 30px color-mix(in srgb, var(--leva-navy) 14%, transparent); }
  .shell-menu-toggle:checked ~ .shell-scrim { display: block; position: fixed; inset: 0; z-index: 29; background: #152a4540; }
  .shell-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e3e7ef; }
  .shell-menu-button { display: flex; padding: 6px; border-radius: 7px; cursor: pointer; color: var(--leva-navy); }
  .shell-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--leva-navy); font-size: 15px; }
  .shell-topbar .side-new { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 7px; background: var(--leva-blue); color: #fff; font-weight: 600; font-size: 13px; text-decoration: none; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* The job on its canvas (26 Sep 2026): the first drop zone and Joyne's questions. */
.empty-canvas.drop-first { top: 50%; left: 50%; width: min(460px, calc(100% - 48px)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 24px; border: 2px dashed #b9c4dc; border-radius: 14px; background: #f8faffcc; color: #505c6c; font-size: 13px; cursor: pointer; z-index: 4; }
.empty-canvas.drop-first strong { font-size: 18px; color: var(--leva-navy); }
.empty-canvas.drop-first u { color: var(--leva-blue); }
.empty-canvas.drop-first .drop-note { font-size: 12px; color: #7b8797; }
.empty-canvas.drop-first:hover, .empty-canvas.drop-first.phx-drop-target-active { border-color: var(--leva-blue); background: #fff0eb; }

/* A job's canvas (26 Sep 2026): navigation in the sidebar, no header.
   The shell is exactly the window's height and the canvas takes whatever the
   support banner, phone top bar and job bar leave. A fixed calc() height let
   the job bar (5 Oct) and a long sheet rail push the page taller than the
   window, so the plan sat low and the page scrolled (6 Oct 2026). */
.shell:has(> .shell-main > .workspace.job-canvas) { height: 100dvh; }
.shell-main:has(> .workspace.job-canvas) { min-height: 0; }
.shell-main > .workspace.job-canvas { flex: 1 1 0; min-height: 0; height: auto; }
.workspace.empty { grid-template-columns: minmax(0, 1fr); }
.workspace.empty :is(.measurements, .toolbar, .canvas-top, .leva-strip, .panel-open) { display: none; }
.panel-open { display: none; position: absolute; top: 14px; right: 14px; z-index: 9; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid #dce2eb; border-radius: 8px; background: #fff; color: #6b7686; }
.panel-open svg { width: 18px; height: 18px; }
.workspace.panel-closed .panel-open { display: flex; }

/* Talking to Joyne about one item: a comment button on hover, then a one-line pop-up. */
.boq-item, .measure-item { position: relative; }
.row-comment { position: absolute; top: 8px; right: 8px; z-index: 2; display: none; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid #d6dfea; border-radius: 6px; background: #fff; color: #6b7686; }
.row-comment svg { width: 14px; height: 14px; }
.boq-item:hover .row-comment, .measure-item:hover .row-comment, .boq-item:focus-within .row-comment, .measure-item:focus-within .row-comment { display: flex; }
@media (hover: none) { .row-comment { display: flex; } }
.row-comment:hover { color: var(--leva-blue); border-color: var(--leva-blue); }

/* The jobs page, live (26 Sep 2026): what Joyne is doing, and what needs a person. */

/* Workspace layout (26 Sep 2026): a calm sidebar with jobs listed like
   conversations (Needs you / Running / Recent), in the style of Cursor,
   Claude and Codex. */
.sidebar { background: #f7f7f5; border-right-color: #e7e9ee; gap: 1px; padding: 10px 8px; font-size: 13.5px; }
.side-org { padding: 6px 8px; margin-bottom: 4px; }
.side-org:hover, .side-item:hover, .side-job:hover, .side-collapse button:hover { background: #eeefeb; }
.side-mark { flex-basis: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.side-actions { gap: 1px; margin-bottom: 2px; }
.sidebar .side-new { background: none; color: #2b3550; font-weight: 500; padding: 6px 10px; }
.sidebar .side-new:hover { background: #eeefeb; }
.side-new kbd, .side-search kbd, .side-collapse kbd { background: none; color: #9aa2b3; padding: 0; opacity: 1; }
.side-search { border: 0; padding: 0 10px; }
.side-search:focus-within { box-shadow: none; background: #fff; outline: 1px solid #d9dde6; }
.side-search input { padding: 6px 0; font-size: 13.5px; }
.side-item { padding: 6px 10px; font-size: 13.5px; }
.side-item.active { background: #e8e9e4; color: #0f1a33; }
.side-jobs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.side-job { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 10px; border-radius: 8px; text-decoration: none; }
.side-job.on { background: #e8e9e4; }
.side-job-name { flex: 1; min-width: 0; font-weight: 550; color: #0f1a33; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* One mark at the right edge says what state the job is in; the words are in the hover text. */
.side-foot { border-top-color: #e7e9ee; }
@media (min-width: 901px) {
  html.side-collapsed .shell .side-job, .shell-rail .side-job { justify-content: center; padding: 9px 0; }
  html.side-collapsed .shell .side-job:not([data-mark])::before, .shell-rail .side-job:not([data-mark])::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c3c7cf; }
}

/* The job's drawings in the sheet rail; its report under the takeoff. */
.rail-docs { display: grid; gap: 2px; padding: 10px 8px 0; }
.rail-doc { padding: 5px 7px; border-radius: 6px; text-align: left; font-size: 10px; color: #5b6780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-doc.active { background: #eaf0fb; color: var(--leva-blue); font-weight: 600; }
.rail-held { display: block; color: var(--leva-muted); font-weight: 400; }
.page-rail #drawing-upload { display: grid; gap: 4px; margin: 6px 8px 14px; }
.page-rail #drawing-upload input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.page-rail .upload-label { display: block; padding: 7px 4px; border: 1px dashed #c5cfdf; border-radius: 7px; text-align: center; font-size: 10px; font-weight: 600; color: #3a4660; cursor: pointer; }
.page-rail .upload-label:hover { border-color: var(--leva-blue); color: var(--leva-blue); }
.page-rail .upload-limit { display: none; }
.page-rail .upload-entry { display: grid; gap: 2px; font-size: 9px; color: #5b6780; }
.page-rail .upload-entry progress { width: 100%; height: 4px; }
.job-title { font-size: 13px !important; font-weight: 650 !important; color: #0f1a33; max-width: 420px !important; }

/* An empty job hides the sheet rail, but its upload's progress, errors and
   Cancel show under the drop zone. */
.workspace.empty { position: relative; }
.workspace.empty .page-rail { display: contents; }
.workspace.empty .page-rail > :not(#drawing-upload) { display: none; }
.workspace.empty #drawing-upload { position: absolute; left: 50%; top: calc(50% + 100px); transform: translateX(-50%); z-index: 5; width: min(460px, calc(100% - 48px)); margin: 0; }
.workspace.empty #drawing-upload .upload-label { display: none; }
.workspace.empty #drawing-upload .upload-entry, .workspace.empty #drawing-upload [role=alert] { font-size: 12px; }

/* Right panel on a job: Joyne (conversation and composer) and Quantities tabs. */
.job-canvas { --panel: 360px; }
@media (max-width: 1100px) { .job-canvas { --panel: 300px; } }
@media (max-width: 820px) { .job-canvas .measurements { width: min(340px, 88vw); } }
.measurements .panel-header { height: 56px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--border); }
.panel-switch { display: flex; gap: 4px; }
.panel-switch button { padding: 6px 11px; border-radius: 7px; font-size: 12px; font-weight: 560; color: #7b8797; display: inline-flex; align-items: center; gap: 6px; }
.panel-switch button:hover { color: var(--navy); }
.panel-switch button.active { background: #eef1f6; color: var(--navy); }
.tab-count { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: #fdf1dc; color: #9a5b00; font-size: 10px; font-weight: 650; text-align: center; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-body > .panel-tabs { padding-top: 12px; }
.confirm-all { padding: 10px 14px; border-top: 1px solid var(--border); }
.confirm-all button { width: 100%; padding: 9px 12px; border: 1px solid #bfe3db; border-radius: 8px; background: #f1faf8; color: var(--leva-evidence, var(--teal)); font-size: 12px; font-weight: 650; }
.confirm-all button:hover { border-color: var(--teal); }
/* Ask Joyne beside the selected mark on the drawing; placed by the Canvas hook. */
.ask-leva { position: absolute; left: 0; top: 0; z-index: 6; visibility: hidden; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 1px solid #ffd3c2; border-radius: 8px; background: #fff; color: #963d1b; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 14px #152a451f; }
.ask-leva svg { width: 14px; height: 14px; }
.ask-leva:hover { border-color: var(--leva-blue); color: var(--leva-blue); }
/* Phones: the drawing first; the panel button opens Joyne and Quantities over it. */
@media (max-width: 820px) {
  .job-canvas:not(.panel-shown) .measurements { display: none; }
  .job-canvas:not(.panel-shown):not(.empty) .panel-open { display: flex; }
}
/* A2UI question cards (ADR 025, JoyneWeb.A2UIComponents) */
.a2ui-card { background: #fff; border: 1px solid var(--leva-rule); border-radius: var(--leva-radius-panel); padding: 14px 16px; color: var(--leva-text); font-size: 13px; }
.a2ui-card.a2ui-open { border-left: 3px solid var(--leva-attention); }
.a2ui-card.a2ui-updating { border-left: 3px solid var(--leva-blue); }
.a2ui-column { display: flex; flex-direction: column; gap: 10px; }
.a2ui-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.a2ui-row[data-justify=end] { justify-content: flex-end; }
.a2ui-row[data-justify=spaceBetween] { justify-content: space-between; }
.a2ui-box { border: 1px solid #eef1f6; border-radius: 6px; padding: 10px; }
.a2ui-divider { border: 0; border-top: 1px solid #eef1f6; margin: 2px 0; width: 100%; }
.a2ui-text { margin: 0; line-height: 1.45; }
.a2ui-h1, .a2ui-h2, .a2ui-h3, .a2ui-h4 { font-weight: 600; color: var(--leva-navy); font-size: 14px; }
.a2ui-h1, .a2ui-h2 { font-size: 16px; }
.a2ui-caption { color: var(--leva-muted); font-size: 12px; }
.a2ui-crop { margin: 0; }
.a2ui-crop-frame { position: relative; background: #f5f7fb; }
.a2ui-crop-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.a2ui-crop-frame > svg { position: relative; }
.a2ui-crop svg { width: 100%; height: auto; max-height: 260px; display: block; background: transparent; border: 1px solid #eef1f6; border-radius: 6px; fill: initial; stroke: none; }
.a2ui-crop figcaption { font-size: 11px; color: var(--leva-muted); margin-top: 5px; }
/* The crop runs the card's full width (to its edges), whatever the panel. */
.a2ui-card .a2ui-crop { margin: 0 -16px; }
.a2ui-card .a2ui-crop svg { max-height: none; border-radius: 0; border-left: 0; border-right: 0; }
.a2ui-card .a2ui-crop figcaption { padding: 0 16px; }
.a2ui-more { white-space: nowrap; }
.a2ui-pin-dot { fill: var(--leva-navy); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.a2ui-pin-text { fill: #fff; font-weight: 700; pointer-events: none; }
.a2ui-hit { fill: #ff6b3522; stroke: var(--leva-blue); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: pointer; }
.a2ui-hit:hover { fill: #ff6b3544; }
.a2ui-field { display: flex; flex-direction: column; gap: 5px; }
.a2ui-label { font-size: 12px; font-weight: 550; color: var(--leva-navy); }
.a2ui-number { display: inline-flex; align-items: center; gap: 6px; }
.a2ui-number input { width: 130px; }
.a2ui-field input, .a2ui-field textarea { border: 1px solid #dce3ee; border-radius: var(--leva-radius-control); padding: 8px 10px; color: var(--leva-navy); font-size: 13px; background: #fff; }
.a2ui-unit { color: var(--leva-muted); }
.a2ui-range { color: var(--leva-muted); font-size: 11px; }
.a2ui-choices { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.a2ui-choices legend { margin-bottom: 6px; }
.a2ui-choice { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce3ee; border-radius: 16px; padding: 5px 11px; cursor: pointer; }
.a2ui-choice:has(input:checked) { border-color: var(--leva-blue); background: #fff0eb; }
.a2ui-pin { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: var(--leva-navy); color: #fff; font-size: 10px; align-items: center; justify-content: center; }
.a2ui-button { border: 1px solid #dce3ee; border-radius: var(--leva-radius-control); padding: 7px 12px; font-size: 12px; background: #fff; }
.a2ui-button.a2ui-primary { background: var(--leva-navy); border-color: var(--leva-navy); color: #fff; }
.a2ui-button.a2ui-keep { color: var(--leva-evidence); border-color: #bfe3db; background: #f1faf8; }
.a2ui-error { color: #a04148; font-size: 12px; margin: 8px 0 0; }
.a2ui-status { margin-top: 10px; font-size: 12px; }
.a2ui-status p { margin: 4px 0; }
.a2ui-resolved { color: var(--leva-evidence); }
.a2ui-updating-note { color: var(--leva-blue); font-weight: 600; }
.a2ui-changes { list-style: none; padding: 0; margin: 6px 0; }
.a2ui-changes li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid #eef1f6; }
.a2ui-change { font-family: var(--leva-font-data); white-space: nowrap; }
.a2ui-change s { color: var(--leva-muted); }
.a2ui-log summary, .a2ui-change-answer summary { cursor: pointer; color: var(--leva-muted); font-size: 11px; margin-top: 6px; }
.a2ui-log ol { margin: 6px 0 0; padding-left: 18px; color: var(--leva-muted); font-size: 11px; }
.a2ui-change-answer form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; align-items: flex-start; }
/* Joyne's question cards on the Quantities tab, and the pins that find them. */
.q-slot { padding: 10px 14px 12px; border-top: 1px solid #eef1f6; display: flex; flex-direction: column; gap: 6px; }
.boq-item .q-slot { padding-left: 22px; background: #fffdf8; }
.q-slot.q-focus { box-shadow: inset 3px 0 0 #e39b27; background: #fff8ec; }
.q-change { align-self: flex-start; padding: 5px 11px; border: 1px solid #d6dfea; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; color: var(--leva-navy); }
.q-change:hover { border-color: var(--leva-blue); color: var(--leva-blue); }
.question-pin { cursor: pointer; }
/* Price file (F12 slice 1). */
.price-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; border: 1.5px dashed #e8c9bb; border-radius: 12px; background: #fff7f3; cursor: pointer; text-align: center; }
.price-drop:hover { border-color: var(--leva-action); }
.price-drop strong { font-size: 15px; color: var(--leva-navy); }
.price-drop span { font-size: 12px; color: #6b7686; }
.price-upload { margin: 18px 0; }
.price-error { color: #a04148; font-size: 13px; margin: 8px 0; }
.price-draft h2 { font-size: 15px; margin: 18px 0 10px; }
.price-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.price-columns label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6b7686; }
.price-columns select { padding: 7px 8px; border: 1px solid #cbd2de; border-radius: 6px; background: #fff; color: var(--leva-navy); font-size: 13px; }
.price-counts { font-size: 13px; margin: 6px 0 10px; }
.price-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.price-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.price-table th { text-align: left; font-weight: 600; font-size: 11px; color: #6b7686; padding: 9px 12px; border-bottom: 1px solid var(--border); background: #fafbfd; }
.price-table td { padding: 8px 12px; border-bottom: 1px solid #eef1f6; color: #26344d; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-table .sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; white-space: nowrap; }
.price-held { margin: 14px 0; font-size: 13px; }
.price-held summary { cursor: pointer; font-weight: 600; color: #8a5300; }
.held-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.held-list li { display: grid; grid-template-columns: 70px 190px 1fr; gap: 10px; padding: 6px 10px; border-radius: 6px; background: #fff8ec; }
.held-row { color: #6b7686; font-variant-numeric: tabular-nums; }
.held-problem { color: #8a5300; font-weight: 600; }
.held-what { color: #6b7686; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-list form { margin: 18px 0 10px; }
.price-list input[type=search] { width: min(420px, 100%); padding: 9px 12px; border: 1px solid #cbd2de; border-radius: 8px; font-size: 13px; }
@media (max-width: 640px) { .held-list li { grid-template-columns: 1fr; gap: 2px; } }
.price-drop { position: relative; } .price-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
/* Quote tab (F15 slice 1): each line priced from the price file, totals, download. */
.quote-tab { overflow: auto; }
.quote-empty { padding: 18px 24px; color: var(--leva-muted); font-size: 13px; display: flex; flex-direction: column; gap: 12px; }
.quote-empty p { margin: 0; }
.quote-empty .quote-builder { display: flex; justify-content: space-between; }
@media (max-width: 640px) { .quote-empty { padding: 18px 16px; } }
.quote-lines { display: flex; flex-direction: column; }
.quote-line { padding: 12px 14px; border-bottom: 1px solid #eef1f6; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.quote-line.ql-suggested { background: #fffdf8; box-shadow: inset 3px 0 0 #e39b27; }
.quote-line.ql-unmatched { box-shadow: inset 3px 0 0 #c9d2e3; }
.quote-line.ql-excluded { opacity: .7; }
.ql-head { display: flex; justify-content: space-between; gap: 8px; }
.ql-label { font-weight: 600; color: var(--leva-navy); }
.ql-qty { color: #6b7686; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ql-product { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #26344d; }
.ql-product small { display: block; color: #6b7686; margin-top: 2px; }
.ql-muted { color: #7b8797; }
.ql-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ql-actions button, .ql-product button { padding: 4px 9px; border: 1px solid #d6dfea; border-radius: 6px; background: #fff; font-size: 11px; font-weight: 600; color: var(--leva-navy); }
.ql-actions .ql-right { color: var(--leva-evidence, var(--teal)); border-color: #bfe3db; background: #f1faf8; }
.ql-numbers { display: flex; gap: 8px; }
.ql-numbers label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: #7b8797; flex: 1; }
.ql-numbers input { width: 100%; padding: 5px 7px; border: 1px solid #d6dfea; border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ql-order { margin: 0; display: flex; justify-content: space-between; color: #6b7686; font-variant-numeric: tabular-nums; }
.ql-order b { color: var(--leva-navy); }
.ql-note { margin: 0; font-size: 11px; line-height: 1.4; color: #5a6678; }
.ql-error { margin: 0; color: #a04148; }
.ql-find { display: flex; flex-direction: column; gap: 4px; }
.ql-find input { width: 100%; padding: 6px 8px; border: 1px solid #ffd3c2; border-radius: 6px; font-size: 12px; }
.ql-result { text-align: left; padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.ql-result:hover { background: #f1f4ff; }
.ql-result small { display: block; color: #6b7686; }
.quote-totals { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.quote-totals p { margin: 0; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.quote-totals .quote-total { font-size: 15px; font-weight: 700; padding-top: 6px; border-top: 1px solid var(--border); }
.quote-confirm-all { padding: 9px 12px; border: 1px solid #bfe3db; border-radius: 8px; background: #f1faf8; color: var(--leva-evidence, var(--teal)); font-weight: 650; }
.quote-blockers { margin: 4px 0 0; padding-left: 18px; color: #8a5300; font-size: 12px; }
.quote-download { display: block; text-align: center; padding: 10px 12px; border-radius: 8px; background: var(--leva-navy); color: #fff; font-weight: 650; text-decoration: none; }
.quote-totals { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 14px #1320330a; }
.quote-send-open { padding: 9px 12px; border: 1px solid #d6dfea; border-radius: 8px; background: #fff; color: var(--leva-navy); font-weight: 650; }
.quote-send { display: flex; gap: 6px; }
.quote-send input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #ffd3c2; border-radius: 8px; font-size: 13px; }
.quote-send button { padding: 8px 14px; border-radius: 8px; background: var(--leva-navy); color: #fff; font-weight: 650; }
.quote-builder a, .quote-empty a { color: var(--leva-action); font-weight: 650; }
.builder-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.builder-pick label { color: var(--leva-muted); }
.builder-pick input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--leva-rule); border-radius: 8px; font-size: 13px; }
.builder-pick .ql-error { flex-basis: 100%; }
.quote-totals .builder-pick button, .quote-empty .builder-pick button { padding: 8px 14px; border-radius: 8px; background: var(--leva-navy); color: #fff; font-weight: 650; }
.stage-menu-body .builder-pick label, .stage-menu-body .builder-pick input { flex-basis: 100%; }
.stage-menu-body .builder-pick input { padding: 5px 6px; font-size: 12px; color: var(--leva-navy); }
.quote-versions { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.quote-versions li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; color: #6b7686; }
.quote-versions a { font-weight: 650; color: var(--leva-blue); }
.quote-versions b { color: var(--leva-navy); font-variant-numeric: tabular-nums; }
.quote-versions .qv-accepted { grid-column: 2 / -1; color: var(--leva-evidence); font-weight: 600; }
.quote-accept { display: flex; align-items: flex-end; gap: 6px; margin-top: 6px; }
.quote-accept .fieldset { flex: 1; min-width: 0; margin: 0; }
.quote-accept label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--leva-muted); }
.quote-accept input { width: 100%; padding: 8px 10px; border: 1px solid var(--leva-rule); border-radius: 8px; font-size: 13px; }
.quote-accept button, #quote-accept-yes { padding: 8px 14px; border: 1px solid var(--leva-rule); border-radius: 8px; background: #fff; color: var(--leva-navy); font-weight: 650; white-space: nowrap; }
.quote-accept-confirm { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--leva-rule); border-radius: 8px; }
.quote-accept-confirm p { display: block; margin: 0; line-height: 1.4; color: var(--leva-text); }
.quote-accept-confirm div { display: flex; gap: 6px; }
#quote-accept-back { padding: 8px 10px; color: var(--leva-navy); font-weight: 500; }
/* An accepted job's quote: the version the builder accepted, as sent (plan 8a). */
.quote-tab .quote-accepted { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; font-size: 13px; }
.accepted-quote { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.accepted-quote table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.accepted-quote th, .accepted-quote td { padding: 9px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--leva-rule); }
.accepted-quote thead th { font-size: 11px; font-weight: 600; color: var(--leva-muted); }
.accepted-quote td small { display: block; margin-top: 2px; font-size: 11px; color: var(--leva-muted); }
.accepted-quote .n { text-align: right; white-space: nowrap; }
.accepted-quote tfoot th { font-weight: 500; color: var(--leva-text); }
.accepted-quote .accepted-total th, .accepted-quote .accepted-total td { border-bottom: 0; font-size: 15px; font-weight: 700; color: var(--leva-navy); }
.accepted-changed { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--leva-navy); font-weight: 600; }
.accepted-changed::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--leva-attention); }
/* Job stages (ADR 024): the pill, and its menu on the job page. */
.stage-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; background: #eef1f6; color: #4b5870; }
.stage-new { background: #eef1f6; color: #4b5870; }
.stage-measuring { background: #e8efff; color: #963d1b; }
.stage-to_check { background: #fff4e0; color: #8a5300; }
.stage-ready_to_quote { background: #e6f4f1; color: #006b5e; }
.stage-quoted { background: #efe9ff; color: #5a3aa8; }
.stage-accepted { background: color-mix(in srgb, var(--leva-evidence) 14%, #fff); color: var(--leva-navy); }
.stage-lost { background: #fbe9ea; color: #9b3940; }
.job-title { display: inline-flex; align-items: center; gap: 8px; }
/* The job's name, edited in place: text until hovered or focused. */
.job-title-input { field-sizing: content; min-width: 4ch; max-width: 360px; margin: -3px -6px; padding: 2px 6px; font: inherit; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 6px; text-overflow: ellipsis; pointer-events: auto; }
.job-title-input:hover { border-color: #d6dfea; }
.job-title-input:focus { outline: none; background: #fff; border-color: var(--leva-blue); box-shadow: 0 0 0 3px rgba(255, 107, 53, .18); }
.stage-menu { position: relative; pointer-events: auto; }
.stage-menu > summary { cursor: pointer; list-style: none; }
.stage-menu > summary::-webkit-details-marker { display: none; }
.stage-menu-body { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 210px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px #1320331f; display: flex; flex-direction: column; gap: 1px; font-size: 12px; font-weight: 500; }
.stage-menu-body button { text-align: left; padding: 6px 8px; border-radius: 6px; color: var(--leva-navy); }
.stage-menu-body button:hover { background: #f1f4f9; }
.stage-menu-body button.current { font-weight: 700; background: #fff0eb; }
.stage-menu-label { margin: 6px 8px 2px; font-size: 11px; color: var(--leva-muted); }
.stage-menu-body form { border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 8px 4px; }
.stage-menu-body label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #7b8797; }
.stage-menu-body select { padding: 5px 6px; border: 1px solid #d6dfea; border-radius: 6px; font-size: 12px; color: var(--leva-navy); }
.sheet-title > span.job-title:first-child { overflow: visible; max-width: none; }
.stage-new { background: #fff; border: 1px solid #d6dfea; }
.canvas-top:has(.stage-menu[open]) { z-index: 40; }

/* Takeoff viewer (/view/:token): the canvas alone, framed by an assistant's card. */
html:has(>body.viewer){height:100%;overflow:clip;-webkit-text-size-adjust:100%}
body.viewer{margin:0;height:100vh;height:100dvh;overflow:clip;position:relative;background:#f5f5f5;font-family:var(--viewer-font,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif);color:#171717}
html[data-theme="dark"] body.viewer{background:#292929;color:#f3f3f3}
.viewer{line-height:1.5;color-scheme:light}
html[data-theme="dark"] .viewer{color-scheme:dark}
.viewer svg{display:block}
.viewer button{padding:0}
html[data-theme="dark"] .viewer-bar select,html[data-theme="dark"] .viewer-bar button{background:#212121;color:#f3f3f3;border-color:#4a4a4a}
html[data-mode="inline"][data-compact="true"] .viewer-bar{display:none}
.viewer #shapes>[data-shape]:focus-visible{outline:2px solid #e56b37;outline-offset:4px}
.viewer #stage[data-tool="pan"] #shapes *{pointer-events:visiblePainted}
.viewer-bar button:focus-visible,.viewer-bar select:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.viewer-stage{position:absolute;inset:0}
.viewer-bar{position:absolute;top:12px;left:12px;right:12px;z-index:6;display:flex;gap:8px;align-items:center;flex-wrap:wrap;pointer-events:none}
.viewer-bar>*{pointer-events:auto}
.viewer-sheets,.viewer-fit{display:flex;align-items:center;background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:2px;min-width:0;box-shadow:0 2px 8px #00000006}
.viewer-sheets{flex:1;max-width:100%}
.viewer-bar select,.viewer-bar button{font:inherit;font-size:13px;height:32px;border:0;border-radius:7px;background:transparent;color:#171717;padding:0 10px;min-width:0}
#viewer-current-sheet{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;padding:0 6px}
#viewer-browse{width:auto;font-weight:600}
.viewer-sheets button{width:32px;padding:6px;flex:none}
.viewer-sheets svg{width:18px;height:18px}
#viewer-sheet-count{font-size:12px;white-space:nowrap;color:#626262;font-variant-numeric:tabular-nums;padding:0 3px}
.viewer-bar button{cursor:pointer;font-weight:500;white-space:nowrap}
.viewer-bar button:hover{background:#f5f5f5}
html[data-theme="dark"] .viewer-sheets,html[data-theme="dark"] .viewer-fit{background:#212121;border-color:#4a4a4a}
html[data-theme="dark"] .viewer-bar button:hover{background:#333}
html[data-theme="dark"] #viewer-sheet-count{color:#b4b4b4}
@media(max-width:520px){.viewer-sheets{flex-basis:100%}.viewer-bar{gap:6px}}
.viewer-expired{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px;text-align:center;background:#edf0f5;color:#505c6c;font:14px var(--leva-font);z-index:10}
.viewer-expired[hidden]{display:none}

/* Consistent review controls within the existing supplier canvas. */
.workspace { --control-size: 36px; --control-radius: 10px; }
.workspace .panel-open { width: var(--control-size); height: var(--control-size); border-radius: var(--control-radius); }
.workspace.panel-closed .canvas-top { right: 64px; }
.workspace :is(.tool, .icon-button) { min-width: var(--control-size); min-height: var(--control-size); border-radius: 8px; }
.workspace .panel-switch button { min-height: 36px; border-radius: 10px; font-size: 13px; }
.workspace :is(.measure-label, .measure-value, .boq-label) { font-size: 13px; }
.workspace .boq-label { max-width: none; flex: 1; }
.workspace .measure-meta { font-size: 11px; color: #657184; }
@media (max-width: 820px) {
  .job-canvas:not(.panel-shown) .measurements { display: none; }
  .job-canvas:not(.panel-shown):not(.empty) .panel-open { display: flex; }
  .workspace .measurements { width: min(360px, 92vw); }
  .workspace .canvas-top { right: 64px; }
  .workspace { --control-size: 40px; }
  .page-rail #drawing-upload .upload-label { white-space: normal; overflow-wrap: normal; line-height: 1.4; padding: 8px 2px; }
  .page-rail #drawing-upload { min-width: 0; }
}

/* All drawing previews share display-space geometry with the main canvas. */
.page-thumb > div { position: relative; }
.page-thumb .sheet-markup { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.drawing-status { position: absolute; inset: 45% 12px auto; z-index: 4; text-align: center; color: #52647a; font-size: 13px; }
.drawing-status button { margin-left: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: white; }

.page-meta { display: flex; align-items: center; gap: 4px; justify-content: space-between; margin-top: 6px; }
.page-thumb .page-meta .page-label { margin: 0; min-width: 0; }
.sheet-status { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; color: #778398; }
.sheet-status svg { width: 14px; height: 14px; stroke-width: 1.7; }
.sheet-status[data-status=validated], .sheet-status[data-status=accepted] { color: #008577; }
.sheet-status[data-status=edited], .sheet-status[data-status=marked] { color: #8a5300; }
.sheet-status.is-live { color: #b9471f; border-radius: 50%; background: #fff0e9; animation: sheet-activity 1.8s ease-in-out infinite; }
@keyframes sheet-activity { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sheet-status.is-live { animation: none; } }
/* Review keeps the drawing fixed while revealing its supporting evidence. */
.evidence-highlight{mix-blend-mode:multiply;cursor:pointer;pointer-events:all}
.evidence-highlight:focus-visible{outline:none;stroke:#854d0e;stroke-opacity:1}
#shapes>g,.sheet-markup>g,.inset-region>g,.evidence-highlight,[data-review-shapes],[data-review-note]{transition:opacity 120ms ease,filter 120ms ease,background-color 120ms ease}
#shapes>.review-muted,.sheet-markup>.review-muted,.inset-region>.review-muted{opacity:.24}
[data-review-shapes].review-muted,[data-review-note].review-muted{opacity:.5}
#shapes>.review-linked{filter:drop-shadow(0 1px 1px #152a4566)}
#shapes>.review-linked .shape{stroke-opacity:1}
[data-review-shapes].review-linked,[data-review-note].review-linked{background:#eef3f9;box-shadow:inset 3px 0 #b9471f}
.evidence-highlight.review-linked{fill-opacity:.52;stroke-opacity:1}
.quantity-search{padding:0 14px 10px}.quantity-search input{width:100%;min-height:36px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:white}
.quantity-group{border-bottom:1px solid var(--border)}.quantity-group>summary{display:flex;align-items:center;gap:8px;padding:13px 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:600}.quantity-group>summary::before{content:"›";font-size:18px;line-height:1}.quantity-group[open]>summary::before{transform:rotate(90deg)}.quantity-group>summary>span{flex:1}.quantity-group>summary b{display:block;font-family:var(--leva-font-data);font-size:16px;font-weight:550;margin-top:5px}.quantity-group>summary small{font-size:10px;font-weight:450;color:#69788a;text-align:right;max-width:75px}
.quantity-workings{padding:0 16px 12px;color:#52647a;font-size:11px}.quantity-workings>summary{min-height:26px;cursor:pointer;padding:4px 0}.quantity-workings p,.bill-basis p{line-height:1.55;overflow-wrap:anywhere}.source-measure{display:flex;gap:10px;justify-content:space-between;width:100%;text-align:left;padding:9px 0;border-bottom:1px solid var(--border)}.source-measure small{display:block;color:#69788a;margin-top:3px}.source-measure b{font-family:var(--leva-font-data);white-space:nowrap;font-weight:500}.note-row mark{display:block;background:#fef08a;color:#422006;padding:2px 3px;margin-bottom:5px}.note-detail{padding:12px 16px;border-top:1px solid var(--border);max-height:220px;overflow:auto;flex-shrink:0}.note-detail blockquote{margin:10px 0;line-height:1.6}.note-detail mark{background:#fef08a;color:#422006}.note-detail p{line-height:1.5;color:#52647a}
.bill-mode{padding:0 14px 8px}.bill-mode button{color:var(--blue);min-height:32px;padding:0;font-weight:550}.bill-expanded{--panel:min(680px,55vw)}.bill-table{width:100%;border-collapse:collapse;font-size:12px}.bill-table caption{text-align:left;padding:10px 16px;font-weight:650;font-size:14px}.bill-table th{text-align:left;font-weight:550}.bill-table thead th{position:sticky;top:0;background:#f8f9fc;z-index:1;padding:10px 12px;color:#69788a}.bill-table td{padding:12px;vertical-align:top;border-bottom:1px solid var(--border)}.bill-table td>button{padding:0;text-align:left;min-height:28px;font-weight:550}.bill-table .bill-number{font-family:var(--leva-font-data);text-align:right;white-space:nowrap}.bill-group th{padding:10px 12px;background:#f3f5f8}.bill-basis{font-size:11px;color:#69788a}.bill-basis summary{cursor:pointer;padding:5px 0}.bill-basis button{display:block;text-align:left;padding:7px 0}.bill-table .review-status{font-size:10px}.bill-table tbody tr.review-linked{box-shadow:inset 3px 0 #b9471f}
@media(max-width:820px){.bill-expanded .measurements{width:min(680px,calc(100vw - var(--rail)))}.bill-table{font-size:11px}.bill-table td,.bill-table thead th{padding:9px 7px}.bill-expanded .bill-table{min-width:420px}.bill-expanded .takeoff-sections{overflow:auto}}
@media(prefers-reduced-motion:reduce){#shapes>g,.sheet-markup>g,.inset-region>g,.evidence-highlight,[data-review-shapes],[data-review-note]{transition:none}}
.quantity-filter-note{padding:0 14px 8px;margin:0;color:#69788a;font-size:11px}.bill-table td{padding-top:9px;padding-bottom:9px}.bill-table td>button{min-height:0;line-height:1.5}.bill-table .bill-number{line-height:1.5}

/* A complete, non-interactive sheet stays visible during raster decoding. */
.raster-frame { position: absolute; transform-origin: 0 0; pointer-events: none; }
.raster-frame img { width: 100%; height: 100%; display: block; }
.raster-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.assumption-value { border-left: 3px solid #d8ad47; padding: 8px 12px; background: #fffae9; border-radius: 0 6px 6px 0; }
.assumption-label { display: block; font-size: 11px; font-weight: 600; color: #73591f; margin-bottom: 4px; }
.assumption-value p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--leva-text); overflow-wrap: anywhere; }
.assumption-evidence summary { font-size: 12px; color: var(--leva-muted); cursor: pointer; padding: 5px 0; }
.assumption-evidence[open] summary { margin-bottom: 8px; }
.assumption-evidence .a2ui-crop { margin: 0; }
.assumption-evidence .a2ui-crop svg { max-height: 240px; border: 1px solid var(--leva-rule); border-radius: 6px; }

.new-job { min-height: 100%; display: grid; place-items: center; padding: 32px; background: var(--leva-canvas, #f7f8fa); }
#new-job-upload { width: min(640px, 100%); position: relative; }
.new-job-drop { min-height: 360px; border: 1px dashed #ccd2da; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; background: #fff; }
.new-job-drop svg { width: 36px; height: 36px; color: var(--leva-muted); margin-bottom: 8px; }
.new-job-title { font-size: 24px; font-weight: 550; letter-spacing: -.5px; }
.new-job-browse { font-size: 14px; color: var(--leva-blue); }
.new-job-limit { color: var(--leva-muted); font-size: 12px; margin-top: 12px; }
#new-job-upload > input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
#new-job-upload:focus-within .new-job-drop, .new-job.phx-drop-target-active .new-job-drop { border-color: var(--leva-blue); outline: 2px solid var(--leva-blue); outline-offset: 4px; }
.new-job-file { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0; }
.new-job-file > span { flex: 1; overflow-wrap: anywhere; min-width: 120px; }
.new-job-file progress { width: 100px; }
.new-job [role=alert] { color: #a04148; font-size: 13px; }
@media (max-width: 600px) { .new-job { padding: 20px; } .new-job-drop { min-height: 300px; } .new-job-title { font-size: 22px; } }

.side-job-row { min-width: 0; }
/* The open job's links, under its name: the canvas has no header bar
   (26 Sep), so the builder and product review live here (6 Oct 2026). */
.side-job-links { display: grid; gap: 1px; margin: 2px 0 6px 18px; }
.side-job-links a { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px; font-size: 13px; color: #4b5870; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-job-links a:hover { background: #f3f5fa; color: var(--leva-navy); }
.side-job-links .side-icon { width: 16px; height: 16px; flex-basis: 16px; color: #7b8797; }
/* On the canvas rail the links are icons; opening the rail ([) shows their names. */
/* Only a rail above 900 px; on phones the sidebar is a full drawer. */
@media (min-width: 901px) {
  html.side-collapsed .shell:not(.rail-open) .side-job-links,
  .shell-rail:not(.rail-open) .side-job-links { margin: 2px 0 6px; justify-items: center; }
  html.side-collapsed .shell:not(.rail-open) .side-job-links a,
  .shell-rail:not(.rail-open) .side-job-links a { padding: 8px; justify-content: center; }
}
.side-job .job-title-input { width: 100%; min-width: 0; margin: 0; padding: 2px 0; font-size: 13px; font-weight: 500; text-overflow: ellipsis; }
.side-job:has(.job-title-input:focus) { outline: 1px solid var(--leva-blue); }

.assumption-review > summary { margin-top: 10px; cursor: pointer; font-size: 12px; color: var(--leva-muted); }
.assumption-review[open] > summary { margin-bottom: 12px; }

/* Question review stays beside the work, with native focus containment. */
.question-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 20px; border: 1px solid #e0e4eb; border-radius: 16px; color: #152a45; background: #fff; box-shadow: 0 16px 64px #060f3b30; }
.question-dialog::backdrop { background: #060f3b24; }
.question-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.question-dialog h2 { margin: 0; font-size: 15px; font-weight: 600; }
.question-dialog > header button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f5f8; color: inherit; font-size: 22px; cursor: pointer; }
.question-dialog .a2ui-card { border: 0; padding: 0; margin: 0; }
.question-pin:focus-visible circle { stroke: #060f3b; stroke-width: 3; }
.page-rail #drawing-upload .upload-label { display: flex; flex-direction: column; gap: 3px; padding: 12px 4px; white-space: normal; border-style: dashed; background: #fafbfc; }
.page-rail #drawing-upload .upload-icon { font-size: 20px; line-height: 1; font-weight: 400; }
.page-rail #drawing-upload .upload-choose { font-size: 9px; font-weight: 400; }
#drawing-upload:focus-within .upload-label, #drawing-upload .upload-label.phx-drop-target-active { outline: 2px solid var(--leva-blue); outline-offset: 2px; background: #edf3ff; }
.workspace.empty .page-rail #drawing-upload .upload-label { display: none; }
#cursors .question-pin, #cursors .question-pin circle { pointer-events: all; }

/* The drawing carries the colour; workspace controls stay quiet. */
.shell, .workspace {
  --leva-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --leva-font-data: var(--leva-font);
  --leva-blue: #16756f;
  --leva-accent: #16756f;
  --blue: #16756f;
  font-family: var(--leva-font);
  font-variant-numeric: tabular-nums;
}
.workspace .canvas-top { align-items: center; gap: 16px; top: 20px; }
.workspace .sheet-title { display: flex; flex-direction: row; align-items: baseline; gap: 5px; }
.workspace #sheet-name { font: 500 13px var(--leva-font); max-width: min(360px, 45vw); color: #253243; }
.workspace #sheet-size { font: 400 13px var(--leva-font); letter-spacing: 0; color: #5f6c7d; white-space: nowrap; }
.workspace .auto-follow { color: #52647a; background: #fff; border-color: #dce2e8; margin: 0; }
.workspace .auto-follow[aria-pressed=true] { color: #16756f; background: #e8f2f1; border-color: #bfd8d4; }
.support-banner { min-height: 40px; flex: none; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #e8f2f1; color: #165e59; font-size: 12px; }
.support-banner span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.support-banner a { color: inherit; white-space: nowrap; }
.workspace .stage-menu-body button.current { background: #e8f2f1; }
.workspace .page-thumb.active { background: #e8f2f1; }
.workspace .rail-doc.active { color: #16756f; background: #e8f2f1; }
.workspace .page-thumb .sheet-status.is-live { color: #16756f; background: #e8f2f1; }
.workspace [data-review-shapes].review-linked, .workspace [data-review-note].review-linked,
.workspace .bill-table tbody tr.review-linked { box-shadow: inset 3px 0 #16756f; background: #eff6f5; }
.workspace .measurements { color: #253243; font-size: 13px; }
.workspace .quantity-group > summary { font-size: 13px; font-weight: 500; line-height: 1.5; padding: 13px 16px; }
.workspace .quantity-group > summary b { font-size: 18px; line-height: 1.35; font-weight: 500; letter-spacing: -.2px; margin-top: 3px; }
.workspace .quantity-group > summary small { font-size: 11px; color: #5f6c7d; }
.workspace .panel-switch button { font-size: 13px; font-weight: 500; }
.workspace .quantity-workings, .workspace .bill-basis { font-size: 12px; }
.workspace .bill-table { font-size: 13px; }
.workspace .scale-status, .workspace .zoom { font-family: var(--leva-font); }
.workspace .zoom #zoom-label, .workspace .measure-value { font-family: var(--leva-font); }
.shell .side-search:focus-within { box-shadow: 0 0 0 3px #16756f1f; }
@media (max-width: 550px) {
  .workspace #sheet-name, .workspace #sheet-size { font-size: 12px; }
  .workspace .canvas-top { left: 12px; gap: 8px; }
}

@media (max-height: 600px) {
  .job-canvas .measurements { overflow-y: auto; }
  .job-canvas .measurements > * { flex-shrink: 0; }
  .job-canvas .panel-body { flex: none; min-height: auto; }
  .job-canvas .takeoff-sections { flex: none; overflow: visible; }
  .job-canvas .panel-body > * { flex-shrink: 0; }
}

@media (max-width: 820px) { .job-canvas { position: relative; } .job-canvas .measurements { top: 0; } }

/* Sheet thumbnails share the viewer across conversation panels and expanded views. */
.viewer-gallery{position:absolute;inset:64px 12px 12px;z-index:7;background:#fff;border:1px solid #e5e5e5;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 16px #00000008}
.viewer-gallery[hidden]{display:none}
.viewer-gallery header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;font-size:13px;font-weight:600;border-bottom:1px solid #e5e5e5}
.viewer-gallery header>span{padding-right:76px}
.viewer-gallery header button{border:0;background:transparent;color:inherit;font:inherit;font-size:20px;cursor:pointer;width:28px;height:28px;border-radius:6px}
.viewer-thumbnails{position:relative;flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:14px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#999 transparent;padding:14px;align-content:start}
.viewer-thumbnails:focus-visible{outline:2px solid #0e7c7b;outline-offset:-2px}
.viewer-scroll{position:absolute;z-index:1;top:10px;width:28px;height:28px;display:grid;place-items:center;border:1px solid #e5e5e5;border-radius:6px;background:#fff}
.viewer-scroll:hover:not(:disabled){background:#f5f5f5}
.viewer-scroll.back{right:86px}
.viewer-scroll.forward{right:50px}
.viewer-gallery[data-layout="grid"] .viewer-scroll svg{transform:rotate(90deg)}
.viewer-thumbnails button{font:inherit;color:inherit;min-width:0;text-align:left;border:1px solid #e5e5e5;background:#fafafa;padding:8px;border-radius:9px;cursor:pointer}
.viewer-thumbnails button:hover{border-color:#888}
.viewer-thumbnails button[aria-pressed="true"]{border-color:#0e7c7b;box-shadow:0 0 0 1px #0e7c7b}
.viewer-thumbnails button:focus-visible,.viewer-gallery button:focus-visible{outline:2px solid #0e7c7b;outline-offset:2px}
.viewer-thumbnails img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:white;border-radius:4px;margin-bottom:8px}
.viewer-thumbnails strong,.viewer-thumbnails span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-thumbnails strong{font-size:12px;font-weight:600}
.viewer-thumbnails span{font-size:11px;color:#626262;margin-top:3px}
html[data-theme="dark"] .viewer-gallery,html[data-theme="dark"] .viewer-thumbnails button,html[data-theme="dark"] .viewer-scroll{background:#252525;color:#f3f3f3;border-color:#4a4a4a}
html[data-theme="dark"] .viewer-thumbnails span{color:#b4b4b4}
html[data-theme="dark"] .viewer-gallery header{border-color:#4a4a4a}
@media(max-width:520px){.viewer-gallery[data-layout="grid"]{top:104px}.viewer-thumbnails{grid-template-columns:repeat(auto-fill,minmax(min(128px,100%),1fr));gap:10px}}

.viewer-thumbnails .viewer-sheet-status{font-size:11px;margin-top:6px}
.viewer-thumbnails .viewer-sheet-status[data-review="true"]{color:#9a5b00}
html[data-theme="dark"] .viewer-thumbnails .viewer-sheet-status[data-review="true"]{color:#f0b252}
.viewer-bar button:disabled{opacity:.45;cursor:default}

/* Analytics: one audience boundary, separate operational coverage, quieter cards. */
.analytics-page { max-width: 1440px; }
.analytics-context { border: 1px solid var(--border, #d8dce3); border-radius: 12px; background: #fff; padding: 20px; margin: 24px 0; }
.analytics-context .overview-toggle { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
.analytics-context .overview-toggle a { padding: 10px 14px; border-radius: 7px; color: #344054; text-decoration: none; font-weight: 600; }
.analytics-context .overview-toggle a.active { background: #1c2941; color: #fff; }
.analytics-context p { margin: 12px 0 0; }
.analytics-operations { padding: 22px; background: #1c2941; color: #fff; border-radius: 12px; margin-bottom: 32px; }
.analytics-operations h2 { font-size: 18px; margin: 0 0 6px; }
.analytics-operations p { font-size: 13px; color: #d5dce8; margin: 6px 0; }
.analytics-operations dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 20px 0; }
.analytics-operations dt { font-size: 13px; color: #d5dce8; }
.analytics-operations dd { font-size: 26px; font-weight: 650; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.analytics-page .kpi-grid { align-items: start; }
.analytics-page .kpi-card { min-width: 0; }
.analytics-page .kpi-unmeasured { background: transparent; border-style: dashed; }
.analytics-page .kpi-unmeasured summary { cursor: pointer; }
.analytics-page .kpi-unmeasured .kpi-missing { display: block; font-size: 12px; font-weight: 400; margin-top: 8px; }
.analytics-page :is(a, button, summary):focus-visible { outline: 3px solid #3976c5; outline-offset: 3px; }
@media (max-width: 700px) {
  .analytics-operations dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .analytics-context { padding: 14px; }
  .analytics-context .overview-toggle a { flex: 1 1 auto; text-align: center; }
  .analytics-page .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .analytics-page .kpi-header { align-items: flex-start; }
}
.analytics-scope-details { margin-top: 12px; font-size: 13px; }
.analytics-scope-details summary { cursor: pointer; color: #344054; font-weight: 600; }
.analytics-scope-details .kpi-lede { max-width: 95ch; }

/* Supplier matching review: deliberately separate proposed options from chosen products. */
.ql-alternatives { margin: 10px 0; padding: 10px; border: 1px solid var(--border, #dce2e9); border-radius: 8px; }
.ql-alternatives summary { cursor: pointer; font-weight: 600; }
.ql-alternatives > p { color: #64748b; font-size: 12px; line-height: 1.5; }
.ql-alternative { display: block; width: 100%; text-align: left; padding: 10px; margin: 6px 0; border: 1px solid #dce2e9; border-radius: 6px; background: #fff; color: #172b43; }
.ql-alternative:hover { background: #f2f6fa; }
.ql-alternative small { display: block; margin-top: 4px; color: #64748b; overflow-wrap: anywhere; }
#price-history { margin-top: 32px; border-top: 1px solid #dce2e9; padding-top: 20px; }
#price-history p, #price-changes { font-size: 13px; color: #52647b; line-height: 1.6; }
/* Supplier review prioritises impact and decisions over setup fields. */
.price-draft{background:#fff;border:1px solid #e0e5ea;border-radius:16px;padding:26px;margin-top:26px}.price-columns{display:block}.mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding:8px 0 22px}.price-columns input:not([type=checkbox]),.price-columns select{width:100%;height:40px;border:1px solid #dce2e8;border-radius:7px;background:#fafbfc;padding:8px 10px;color:#22344a;font-size:12px}.price-columns label{color:#536176;font-size:11px;gap:7px}.price-columns label:has(input[type=checkbox]){grid-column:1/-1;display:block;background:#fff4e9;padding:12px;color:#805117}.price-draft>p{font-size:12px;color:#667486;line-height:1.5}.price-table th{font-size:11px}.price-table td{padding:14px 10px}.price-drop{border:1px dashed #b9c6d5;border-radius:14px;background:#fff;padding:34px}.price-drop:focus-within{outline:2px solid var(--leva-action);outline-offset:3px}#price-validity{color:#687587;font-size:11px;line-height:1.6;padding:18px 0}#price-history{border-top:1px solid #dce3ea;padding-top:20px;margin-top:24px;color:#627084;font-size:12px}#price-history summary{cursor:pointer;font-weight:600;color:#30445b}.price-list{background:#fff;padding:20px;border:1px solid #e1e6ec;border-radius:12px}
.match-workspace-head{padding:24px 24px 18px;flex-shrink:0}.match-progress{display:flex;gap:6px;align-items:center;font-size:11px;color:#627084;margin-top:18px}.match-progress b{color:#19354d;font-size:13px}.match-filters{display:flex;gap:4px;padding:0 24px 14px;flex-shrink:0;border-bottom:1px solid #e5e9ef}.match-filters button{padding:8px 10px;border-radius:6px;color:#627084;font-size:11px;white-space:nowrap}.match-filters button[aria-pressed=true]{background:#182d47;color:#fff}.match-filters span{opacity:.7;margin-left:6px}.quote-tab .bill-mode{padding:7px 24px 0;flex-shrink:0}.quote-tab .bill-mode button{font-size:10px;color:#6a7787}.quote-tab .quote-lines{flex:1 0 auto;background:#f6f8fa;gap:14px;padding:16px 20px}.quote-tab .quote-line{flex-shrink:0;padding:20px;background:#fff;border:1px solid #dee5ec;border-radius:10px;gap:12px;box-shadow:none}.ql-state{display:flex;flex-direction:column;gap:16px}.ql-state>span{color:#9d5915;font-size:10px;font-weight:600}.ql-confirmed .ql-state>span{color:#137263}.quote-tab .ql-head{align-items:baseline}.quote-tab .ql-label{font-size:15px;letter-spacing:-.25px}.quote-tab .ql-qty{font-size:13px;font-weight:600;color:#31465d}.ql-alternatives{border:0!important;padding:0!important}.ql-alternatives>summary{padding:12px 0;cursor:pointer;font-weight:600;font-size:12px;border-top:1px solid #e6ebf0}.candidate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quote-tab .ql-alternative{display:flex;flex-direction:column;align-items:flex-start;gap:7px;border:1px solid #dce4eb;background:#fff;border-radius:8px;padding:14px;margin:0;text-align:left;min-width:0}.quote-tab .ql-alternative:hover{border-color:var(--leva-action);background:color-mix(in srgb,var(--leva-action) 6%,#fff)}.candidate-description{font-size:11px;color:#415267}.ql-alternative b{font-size:15px}.quote-tab .ql-alternative small{font-size:10px;line-height:1.5;overflow-wrap:anywhere}.candidate-choose{font-size:11px;font-weight:600;color:var(--leva-action);border-top:1px solid #e8edf1;padding-top:10px;margin-top:auto;width:100%}.ql-source{font-size:10px;color:#718094;margin:0;overflow-wrap:anywhere}.ql-source summary{cursor:pointer}.quote-tab .ql-order{background:#f1f6f5;padding:12px;border-radius:6px;font-size:13px}.quote-tab .ql-actions button{min-height:34px;padding:7px 12px}.quote-tab .ql-actions .ql-right{background:#183b35;color:#fff;border-color:#183b35}.quote-tab .ql-numbers{padding:8px 0}.quote-tab .quote-totals{position:static;flex-shrink:0;padding:20px 24px;box-shadow:none}.quote-tab .ql-product{font-size:12px;line-height:1.5}.bill-expanded{--panel:min(800px,68vw)}
@media(max-width:1000px){.bill-expanded{--panel:min(760px,74vw)}}
@media(max-width:640px){.price-draft{padding:18px 14px}.mapping-grid{grid-template-columns:1fr}.match-workspace-head{padding:20px 16px 16px}.match-filters{padding:0 12px 12px;overflow:auto}.match-filters button{font-size:10px;padding:8px}.match-progress{flex-wrap:wrap}.quote-tab .quote-lines{padding:12px;gap:12px}.quote-tab .quote-line{padding:15px}.candidate-grid{grid-template-columns:1fr}.quote-tab .ql-head{flex-wrap:wrap}.quote-tab .quote-totals{padding:18px 16px}.bill-expanded .measurements{width:100%}}
.price-draft #price-changes{font-size:11px;color:#667486}
/* Expanded quote review uses the workspace rather than squeezing beside an empty drawing. */
.workspace.bill-expanded:has(#panel-quote:not([hidden])){grid-template-columns:minmax(0,1fr)}
.workspace.bill-expanded:has(#panel-quote:not([hidden]))>.page-rail,.workspace.bill-expanded:has(#panel-quote:not([hidden]))>.canvas-area{display:none}
.workspace.bill-expanded:has(#panel-quote:not([hidden])) .measurements{position:relative;width:100%;top:auto;bottom:auto;border-left:0}
.match-filters button[aria-pressed="true"]{background:#182d47;color:#fff}.quote-tab .ql-alternative{min-height:190px}
.candidate-order{display:flex;justify-content:space-between;width:100%;gap:8px;border-top:1px solid #e6ebef;padding-top:10px;margin-top:4px}.candidate-order b{font-size:13px!important}.quote-tab .ql-alternative{gap:6px}
@media(max-width:820px){.job-canvas.bill-expanded:has(#panel-quote:not([hidden])) .measurements{display:flex;min-height:calc(100dvh - 52px)}.job-canvas.bill-expanded:has(#panel-quote:not([hidden])){overflow:auto;height:calc(100dvh - 52px)}}
/* The price list's own shell (JoyneWeb.SupplyComponents.shell) and its onboarding. */
.supply-main{padding:36px 32px;min-width:0}.supply-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:25px;margin-bottom:36px}.supply-page-head h1{font-size:36px;letter-spacing:-1.3px;line-height:1.15;margin:0 0 10px;font-weight:650}.supply-page-head p{font-size:17px;color:#6a7890;margin:0}.supply-primary{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:44px;padding:11px 19px;text-decoration:none;border-radius:5px;font-size:13px;font-weight:600;white-space:nowrap}.supply-primary{background:var(--leva-action);color:white;border:1px solid var(--leva-action)}.supply-primary:hover{background:color-mix(in srgb,var(--leva-action) 85%,#000)}.supply-primary:disabled{opacity:.4}.supply-text-button{color:#526b8b;text-decoration:none;font-size:12px;padding:8px 0}.supply-muted{color:#6b7b94;font-size:13px}.supply-badge{display:inline-block;color:var(--leva-muted);font-size:11px;white-space:nowrap}.supply-warning{font-size:12px;color:#8e5715;background:#fff8e9;border:1px solid #f1dfbb;padding:13px;border-radius:5px;line-height:1.6}.price-intro h1{font-size:34px}.price-steps{display:flex;list-style:none;gap:25px;margin:10px 0 38px;padding:0}.price-steps li{display:flex;align-items:center;gap:12px;flex:1;border-top:2px solid #e1e6ee;padding-top:14px;font-size:13px;font-weight:600}.price-steps li.current,.price-steps li.complete{border-color:var(--leva-action)}.price-steps b{width:29px;height:29px;display:grid;place-items:center;border:1px solid #cad3e1;border-radius:50%;color:#687b97}.price-steps .current b{background:var(--leva-action);color:#fff;border-color:var(--leva-action)}.price-steps small{display:block;font-size:11px;color:#8390a5;font-weight:400;margin-top:3px}.price-onboarding{display:grid;grid-template-columns:minmax(0,3fr) minmax(210px,1fr);gap:30px}.price-onboarding h2{font-size:25px;line-height:1.2;letter-spacing:-.7px;margin:23px 0 12px}.price-next{border-left:1px solid #e2e7ee;padding-left:28px;color:#7485a0;margin-top:20px}.price-next h2{font-size:27px;color:#142741;margin-top:7px}.price-next p{font-size:14px;line-height:1.65}.price-next ol{list-style:none;padding:0;counter-reset:steps;font-size:12px}.price-next li{padding:12px 0;display:flex;gap:10px}.price-next li:before{counter-increment:steps;content:counter(steps);border:1px solid #d0d8e5;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;flex:none}.plan-illustration{height:140px;display:flex;align-items:center;justify-content:center;background:#faf7f3;margin:25px 0;border-radius:50%}.price-file-chip{display:flex;align-items:center;gap:12px;max-width:470px;padding:16px;border:1px solid #e0e6ee;background:#f8fafc;border-radius:6px}.price-file-chip>div{flex:1;min-width:0}.price-file-chip b{overflow-wrap:anywhere}.price-file-chip small{display:block;font-size:11px;color:#7c8ba1;margin-top:4px}.price-file-chip button{font-size:22px}.supply-main #price-draft{border:0;padding:0;background:transparent;margin:0}.supply-main .price-table{font-size:13px}.supply-main .price-table th{text-transform:none;font-size:12px;letter-spacing:0;padding:15px 12px;color:#6b7b94;background:#f8f9fc}.supply-main .price-table td{padding:19px 12px}.supply-main .price-table-wrap{border:1px solid #e0e6ee;border-radius:6px}.price-tax-note{margin:18px 0;background:#f4f6f9;padding:16px;border-radius:6px;font-size:12px}.price-tax-note b{display:block;margin-bottom:5px}.price-tax-note span{color:#72819a;font-size:11px}.supply-price-settings details{padding:11px 0;border-bottom:1px solid #e8edf2;color:#627a9b;font-size:12px}.supply-price-settings summary{cursor:pointer}.supply-price-settings .mapping-grid{padding-top:18px}.supply-price-settings label{display:flex;flex-direction:column;gap:7px;color:#667891;font-size:11px}.supply-price-settings input,.supply-price-settings select{width:100%;height:38px;border:1px solid #dbe2ed;border-radius:4px;padding:7px;background:white;color:#213853}.supply-price-settings input[type=checkbox]{width:16px;height:16px}.price-use{margin-top:22px;min-width:230px}.supply-main #price-list{border:0;padding:0}.supply-main .price-drop{padding:36px;display:flex;flex-direction:column;align-items:center;gap:12px}.supply-main #price-history{margin-top:28px;font-size:12px}.supply-main #price-search input{width:100%;padding:12px;border:1px solid #dce4ed;border-radius:5px;margin:15px 0}.supply-main button:focus-visible,.supply-main a:focus-visible,.supply-main summary:focus-visible{outline:2px solid var(--leva-action);outline-offset:3px}.shell-main > .supply-main { flex: 1; background: var(--leva-surface); color: var(--leva-text); font: 14px/1.5 var(--leva-font); }
@media(min-width:1500px){.supply-main{padding:45px}.supply-page-head h1{font-size:42px}}
@media(max-width:1100px){.supply-main{padding:28px 22px}.supply-page-head h1{font-size:30px}.price-onboarding{grid-template-columns:minmax(0,1fr)}.price-next{border-left:0;border-top:1px solid #e2e7ee;padding:20px 0;display:none}}
@media(max-width:720px){.supply-main{padding:24px 16px}.supply-page-head{flex-direction:column;gap:18px;margin-bottom:24px}.supply-page-head h1{font-size:30px}.supply-page-head p{font-size:14px}.price-steps{gap:10px;margin-bottom:24px}.price-steps li{align-items:flex-start;gap:6px;font-size:10px}.price-steps b{width:22px;height:22px;flex:none}.price-steps small{font-size:9px}.price-intro h1{font-size:30px}.supply-main .price-table{font-size:11px}.supply-main .price-table td,.supply-main .price-table th{padding:12px 7px}.supply-price-settings .mapping-grid{grid-template-columns:1fr}.price-file-chip{font-size:12px}.supply-main #price-draft h2{font-size:24px}}
.plan-illustration svg{width:65px;height:85px;stroke-width:.7;color:#9caec0;transform:rotate(-10deg)}.plan-illustration svg+svg{transform:rotate(10deg);margin-left:-18px}

/* Review evidence, complete import paging, and mobile workflow continuity. */
.price-basis p{margin:9px 0;line-height:1.6}.price-basis{font-size:11px;color:#62758f;overflow-wrap:anywhere}.price-review-search{display:flex;gap:10px;margin:16px 0}.price-review-search input,.price-review-search select{min-width:0;min-height:42px;border:1px solid #cdd7e3;border-radius:5px;background:#fff;padding:10px;color:#203953}.price-review-search input{flex:1}.price-pager{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;font-size:12px;color:#657991}.price-pager span{margin-right:auto}.price-pager button{padding:8px 12px;border:1px solid #d5deea;border-radius:4px}.price-version{display:block;text-align:left;width:100%;padding:12px 0;border-bottom:1px solid #e4e9ef;line-height:1.7}.price-version span{display:block;color:var(--leva-action)}.price-version[aria-pressed=true]{font-weight:650}.price-change-fields{margin:0;font-size:11px;min-width:170px}.price-change-fields>div{display:grid;grid-template-columns:minmax(100px,1fr) minmax(70px,1fr);gap:10px;margin:3px 0}.price-change-fields dt{color:#718097}.price-change-fields dd{margin:0;overflow-wrap:anywhere}.price-change-table small{display:block;white-space:normal;min-width:100px;font-weight:400}.price-next{display:block}
@media(max-width:1100px){.price-next{display:block}}
@media(max-width:720px){.price-review-search{flex-direction:column}.price-change-fields>div{display:block;margin:6px 0}.price-next .plan-illustration{display:none}}

.price-basis>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:8px;margin:7px 0}.price-basis dt{font-weight:600}.price-basis dd{margin:0}

/* The panel's top row holds the tabs, the job's stage and close; one bill
   toggle and one Outputs menu replace five overlapping links (6 Oct 2026). */
.measurements .panel-header .stage-menu { margin-left: auto; }
.measurements .panel-header .stage-menu-body { left: auto; right: 0; }
.measurements .panel-header .stage-menu + #close-panel { margin-left: 4px; }
.measurements > .panel-body > .bill-mode,
.measurements .panel-body .bill-mode:has(#toggle-bill) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.outputs-menu { position: relative; }
.outputs-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 600; color: #33435a; background: #fff; }
.outputs-menu > summary::-webkit-details-marker { display: none; }
.outputs-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; }
.outputs-menu[open] > summary { border-color: #c8d1de; background: #f6f8fb; }
.outputs-menu-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 230px; padding: 6px; display: grid; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px #13203318; }
.outputs-menu-body a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; color: var(--leva-navy); text-decoration: none; font-size: 13px; font-weight: 500; }
.outputs-menu-body a:hover { background: #f3f5fa; }
.outputs-menu-body a svg { width: 16px; height: 16px; color: #7b8797; flex: none; }
/* Team & setup (6 Oct 2026): what Leva measures first, then the people, as
   two cards in the app's type and colours instead of an unstyled form. */
.team-page { width: 100%; max-width: 820px; margin: 0 auto; padding: 44px 28px 64px; overflow: auto; color: var(--leva-navy); font-family: var(--leva-font); }
.team-head { margin-bottom: 22px; }
.team-head h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.team-head p { margin: 0; color: var(--leva-muted); font-size: 14px; }
.team-card { background: #fff; border: 1px solid #e1e6ee; border-radius: 14px; padding: 22px 24px; margin-top: 18px; box-shadow: 0 1px 2px #1320330a; }
.team-card-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
.team-card-head p { margin: 6px 0 0; color: var(--leva-muted); font-size: 13px; line-height: 1.55; max-width: 62ch; }
.team-scope { margin-top: 14px; }
.team-scope textarea { display: block; width: 100%; min-height: 116px; resize: vertical; padding: 12px 14px; border: 1px solid #d3dae5; border-radius: 10px; font: inherit; font-size: 14px; line-height: 1.55; color: var(--leva-navy); background: #fbfcfe; }
.team-scope textarea:focus, .team-invite :is(input, select):focus, .team-role select:focus { outline: none; border-color: #8aa0bd; box-shadow: 0 0 0 3px #1e3a5f14; background: #fff; }
.team-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.team-button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 9px; background: var(--leva-navy); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.team-button:hover { background: #1e3a5f; }
.team-scope-text { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #f6f8fb; font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.team-scope-text.empty { color: var(--leva-muted); }
.team-invite { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; margin: 16px 0 6px; }
.team-invite input, .team-invite select, .team-role select { min-height: 40px; padding: 0 12px; border: 1px solid #d3dae5; border-radius: 9px; font: inherit; font-size: 14px; color: var(--leva-navy); background: #fbfcfe; }
.team-list { list-style: none; margin: 8px 0 0; padding: 0; }
.team-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1f6; font-size: 14px; }
.team-row:first-child { border-top: 0; }
.team-empty + .team-row { border-top: 0; }
.team-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e9eef6; color: #1e3a5f; font-weight: 650; font-size: 13px; }
.team-avatar.pending { background: #fff; border: 1px dashed #c3ccd9; color: #7b8797; }
.team-who { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.team-meta.team-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-you { padding: 1px 8px; border-radius: 999px; background: #eef1f6; color: #4b5870; font-size: 11px; font-weight: 650; }
.team-meta { flex-basis: 100%; color: var(--leva-muted); font-size: 12px; }
.shell .team-rep-for a { color: var(--leva-blue); text-decoration: none; }
.team-rep-for a:hover { text-decoration: underline; }
.team-role-label { color: #4b5870; font-size: 13px; }
.team-role select { min-height: 34px; font-size: 13px; }
.team-remove { padding: 6px 10px; border-radius: 8px; color: #8a4b4b; font-size: 13px; font-weight: 550; }
.team-remove:hover { background: #fbf1f1; color: var(--leva-danger); }
.team-sub { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #eef1f6; font-size: 13px; font-weight: 650; color: #4b5870; }
.team-empty { display: none; padding: 12px 0; color: var(--leva-muted); font-size: 13px; }
.team-empty:only-child { display: block; }
/* A constraint people would otherwise get wrong: amber, because they must
   send each link themselves. */
.team-note { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--leva-attention) 35%, #fff); border-radius: 9px; background: color-mix(in srgb, var(--leva-attention) 8%, #fff); color: var(--leva-text); font-size: 13px; }
.team-note::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--leva-attention); }
/* A pending invitation: who, role, what happened to its email, actions. */
.invite-row { grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr) auto; }
.invite-status { display: flex; align-items: baseline; gap: 7px; min-width: 0; color: var(--leva-text); font-size: 13px; overflow-wrap: anywhere; }
.invite-status:is(.done, .failed, .to-check, .quiet)::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--leva-muted); }
.invite-status.done::before { background: var(--leva-evidence); }
.invite-status.failed::before { background: var(--leva-danger); }
.invite-status.to-check::before { background: var(--leva-attention); }
.invite-actions { display: flex; gap: 2px; justify-content: flex-end; }
.invite-action { padding: 6px 8px; border-radius: 8px; color: var(--leva-action); font-size: 13px; font-weight: 550; white-space: nowrap; }
.invite-action:hover { background: color-mix(in srgb, var(--leva-action) 8%, #fff); }
.invite-action.danger { color: var(--leva-danger); }
.invite-action.danger:hover { background: color-mix(in srgb, var(--leva-danger) 8%, #fff); }
.invite-action:focus-visible { outline: 2px solid var(--leva-action); outline-offset: 1px; }
.invite-confirm { display: none; grid-column: 2 / -1; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--leva-text); font-size: 13px; }
.invite-link { grid-column: 2 / -1; width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid var(--leva-rule); border-radius: 8px; background: #fff; color: var(--leva-text); font: inherit; font-size: 13px; }
@media (max-width: 640px) {
  .team-page { padding: 24px 14px 48px; }
  .team-card { padding: 18px 16px; }
  .team-invite { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .team-row .team-remove { grid-column: 2 / -1; justify-self: start; padding-left: 0; }
  .invite-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .invite-row :is(.invite-status, .invite-actions) { grid-column: 2 / -1; justify-content: flex-start; }
  .invite-row .invite-action:first-child { padding-left: 0; }
}

/* A builder's page (BuilderLive) is laid out as the team page's cards. */
.builder-rep { margin: 14px 0 0; font-size: 14px; }
.shell .builder-rep a { color: var(--leva-blue); }
.builder-contact { grid-template-columns: minmax(0, 1fr) auto auto; }
.builder-contact.read-only { grid-template-columns: minmax(0, 1fr); }
.builder-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; overflow-wrap: anywhere; }
.shell .builder-meta a { color: var(--leva-blue); text-decoration: none; }
.builder-meta a:hover { text-decoration: underline; }
.shell .builder-edit { padding: 6px 10px; border-radius: 8px; color: var(--leva-blue); font-size: 13px; font-weight: 550; }
.shell .builder-edit:hover { background: color-mix(in srgb, var(--leva-blue) 8%, #fff); }
.builder-contact-form .team-sub { margin-bottom: 12px; }
.builder-notice { margin: 0 0 12px; color: var(--leva-danger); font-size: 13px; font-weight: 500; }
.builder-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.builder-field { display: grid; align-content: start; gap: 6px; font-size: 12px; font-weight: 600; color: var(--leva-muted); }
.builder-field input, .builder-rep select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--leva-rule); border-radius: 9px; font: inherit; font-size: 14px; font-weight: 400; color: var(--leva-navy); background: #fff; }
.builder-rep select { max-width: 320px; }
.shell :is(.builder-field input, .builder-rep select):focus { outline: none; border-color: var(--leva-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--leva-blue) 15%, transparent); }
.builder-error { color: var(--leva-danger); font-size: 12px; font-weight: 500; }
.builder-rep-error { margin: 6px 0 0; }
.builder-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; color: var(--leva-text); cursor: pointer; }
.shell .builder-check input { width: 16px; height: 16px; accent-color: var(--leva-blue); }
.builder-job { grid-template-columns: minmax(0, 1fr) auto; }
.builder-job-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--leva-navy); font-weight: 550; text-decoration: none; }
.builder-job-name:hover { text-decoration: underline; }
.builder-stage { color: var(--leva-muted); font-size: 13px; }
@media (max-width: 640px) {
  .builder-fields { grid-template-columns: 1fr; }
  .builder-contact .team-remove { grid-column: auto; padding-left: 10px; }
}

/* Jobs that share a customer sit under that customer's name. */

/* All jobs (31 Oct 2026, direction A): rows after Linear in a white panel
   inset from the window, with the sidebar full height on the app background.
   Every colour is a Leva token or a mix of one with white. */
.shell:has(.jobs-page) { --jobs-frame: color-mix(in srgb, var(--leva-navy) 3%, #fff); height: 100dvh; background: var(--jobs-frame); }
.shell:has(.jobs-page) .sidebar { background: var(--jobs-frame); border-right-color: transparent; }
.shell-main:has(> .jobs-page) { min-height: 0; padding: 8px 8px 8px 0; }
.jobs-page {
  --jobs-line: color-mix(in srgb, var(--leva-rule) 40%, #fff);
  --jobs-border: color-mix(in srgb, var(--leva-rule) 65%, #fff);
  --jobs-hover: color-mix(in srgb, var(--leva-navy) 4%, #fff);
  --jobs-band: color-mix(in srgb, var(--leva-navy) 4.5%, #fff);
  --jobs-select: color-mix(in srgb, var(--leva-action) 8%, #fff);
  --jobs-faint: color-mix(in srgb, var(--leva-muted) 72%, #fff);
  --jobs-skel: color-mix(in srgb, var(--leva-navy) 6%, #fff);
  --jobs-shadow: 0 1px 2px color-mix(in srgb, var(--leva-navy) 10%, transparent);
  --cols: 28px minmax(220px, 1.35fr) minmax(200px, 1fr) 168px 112px 32px;
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--jobs-border); border-radius: 10px; box-shadow: var(--jobs-shadow); overflow: hidden; font-size: 13px; line-height: 20px; color: var(--leva-text);
}
.jobs-page.no-values { --cols: 28px minmax(220px, 1.35fr) minmax(200px, 1fr) 168px 32px; }
.jobs-page kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 1px solid var(--jobs-border); border-bottom-width: 1.5px; border-radius: 4px; background: #fff; font: 500 11px/1 var(--leva-font); color: var(--leva-muted); }

.jobs-head { position: relative; display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 10px 0 16px; border-bottom: 1px solid var(--jobs-line); flex-shrink: 0; }
.jobs-head h1 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--leva-navy); white-space: nowrap; }
.jobs-head .jobs-search { margin-left: auto; }
.jobs-tabs { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.jobs-tabs::-webkit-scrollbar { display: none; }
.jobs-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 7px; color: var(--leva-muted); font-weight: 500; text-decoration: none; white-space: nowrap; }
.jobs-tab-n { color: var(--leva-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.jobs-tab:hover { background: var(--jobs-hover); color: var(--leva-text); }
.jobs-tab[aria-current=page] { background: color-mix(in srgb, var(--leva-navy) 6%, #fff); color: var(--leva-navy); font-weight: 600; }
.jobs-tab:focus-visible, .jobs-keys summary:focus-visible, .job-group-toggle:focus-visible, .job-more:focus-visible, .job-menu summary:focus-visible, .job-menu button:focus-visible, .jobs-primary:focus-visible { outline: 2px solid var(--leva-action); outline-offset: 1px; }
.jobs-search { display: flex; align-items: center; gap: 7px; width: 220px; height: 30px; margin: 0; padding: 0 6px 0 9px; border: 1px solid var(--jobs-border); border-radius: 7px; background: #fff; color: var(--leva-muted); flex-shrink: 0; }
.jobs-search:focus-within { border-color: var(--leva-action); box-shadow: 0 0 0 1px var(--leva-action); }
.jobs-search-icon { display: grid; place-items: center; cursor: text; }
.jobs-search-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jobs-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--leva-text); }
.jobs-search input::placeholder { color: var(--leva-muted); }
.jobs-search input::-webkit-search-cancel-button { display: none; }
.jobs-search:focus-within kbd { visibility: hidden; }
.jobs-keys { position: relative; flex-shrink: 0; }
.jobs-keys summary { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; list-style: none; cursor: pointer; }
.jobs-keys summary::-webkit-details-marker { display: none; }
.jobs-keys summary:hover { background: var(--jobs-hover); }
.jobs-pop { position: absolute; top: 34px; right: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; width: 250px; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--jobs-border); border-radius: 10px; box-shadow: var(--jobs-shadow); }
.jobs-pop dt { color: var(--leva-text); }
.jobs-pop dd { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; color: var(--leva-muted); }

.jobs-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 32px; scroll-padding-top: 76px; }
.jobs-cols, .job-row { display: grid; grid-template-columns: var(--cols); align-items: center; column-gap: 12px; padding: 0 6px 0 8px; }
.jobs-cols { position: sticky; top: 0; z-index: 3; height: 32px; margin: 0 -8px; padding: 0 14px 0 16px; background: #fff; border-bottom: 1px solid var(--jobs-line); color: var(--leva-muted); font-size: 12px; font-weight: 500; }
.jobs-cols .job-rep { color: var(--leva-muted); }
.job-value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--leva-text); }
.jobs-list[hidden] { display: none; }
.job-group { margin-top: 8px; }
.job-group[hidden] { display: none; }
.job-group-head { position: sticky; top: 32px; z-index: 2; margin: 0 0 2px; font: inherit; background: #fff; }
.job-group-toggle { display: grid; grid-template-columns: 28px minmax(0, 1fr) 112px 32px; column-gap: 12px; align-items: center; width: 100%; height: 34px; padding: 0 6px 0 8px; border: 0; border-radius: 7px; background: var(--jobs-band); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.job-group-toggle:hover { background: color-mix(in srgb, var(--leva-navy) 7%, #fff); }
.job-group-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--leva-navy); white-space: nowrap; }
.job-group-n { color: var(--leva-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.job-group-total { grid-column: 3; text-align: right; color: var(--leva-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.job-group-chev { grid-column: 4; justify-self: center; width: 12px; height: 12px; fill: none; stroke: var(--leva-muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .16s ease; }
.job-group[data-closed] .job-group-chev { transform: rotate(-90deg); }
.job-group[data-closed] :is(.job-rows, .job-more) { display: none; }
.job-rows { margin: 0; padding: 0; list-style: none; }
.job-row { position: relative; height: 40px; border-radius: 7px; scroll-margin-top: 76px; }
.job-row:hover { background: var(--jobs-hover); }
.job-row[data-focus] { background: var(--jobs-select); }
.job-row[data-focus]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--leva-action); }
.job-mark { display: grid; place-items: center; width: 28px; height: 28px; }
.job-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.job-name { flex-shrink: 0; max-width: 62%; overflow: hidden; text-overflow: ellipsis; color: var(--leva-navy); font-weight: 500; text-decoration: none; }
.job-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.job-name:focus-visible { outline: none; }
.job-name:focus-visible::after { outline: 2px solid var(--leva-action); outline-offset: -2px; }
.job-builder { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--leva-muted); }
.job-next { min-width: 0; }
.next { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; }
.next-text { overflow: hidden; text-overflow: ellipsis; }
.next-sub { flex-shrink: 1000; overflow: hidden; text-overflow: ellipsis; color: var(--leva-muted); }
.next-sub::before { content: "· "; }
.who-you .next-text { color: var(--leva-navy); font-weight: 500; }
.who-team .next-text { color: var(--leva-text); }
.who-leva .next-text, .who-builder .next-text, .who-none .next-text { color: var(--leva-muted); }
.needs { display: block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--leva-attention); }
.leva-mark { flex-shrink: 0; width: 16px; height: 16px; }
.leva-mark-tile { fill: var(--leva-logo-ink); }
.leva-mark-glyph { fill: var(--leva-logo-blue); }
.job-rep { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--leva-text); }
.job-acts { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.job-menu summary { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; list-style: none; color: var(--leva-muted); cursor: pointer; opacity: 0; }
.job-menu summary::-webkit-details-marker { display: none; }
.job-menu summary svg { width: 16px; height: 16px; fill: currentColor; }
.job-row:hover .job-menu summary, .job-row[data-focus] .job-menu summary, .job-menu[open] summary, .job-menu summary:focus-visible { opacity: 1; }
.job-menu summary:hover { background: color-mix(in srgb, var(--leva-navy) 7%, #fff); color: var(--leva-navy); }
.job-menu button { display: none; }
.job-menu[open] button { position: absolute; top: 32px; right: 0; z-index: 5; display: block; padding: 6px 12px; border: 1px solid var(--jobs-border); border-radius: 7px; background: #fff; box-shadow: var(--jobs-shadow); font: inherit; color: var(--leva-navy); white-space: nowrap; cursor: pointer; }
.job-menu[open] button:hover { background: var(--jobs-hover); }
.job-more { display: block; height: 30px; margin: 2px 0 0 42px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-weight: 500; color: var(--leva-action); cursor: pointer; }
.job-more:hover { background: var(--jobs-select); }

.stage-mark { display: block; width: 14px; height: 14px; overflow: visible; }
.stage-mark .mark-ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.stage-mark .mark-fill { fill: currentColor; }
.stage-mark .mark-glyph { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.m-new { color: var(--jobs-faint); }
.m-leva { color: var(--leva-logo-blue); }
.m-check { color: var(--leva-attention); }
.m-ready { color: var(--leva-navy); }
.m-quoted { color: var(--leva-muted); }
.m-done { color: var(--leva-evidence); }
.m-lost { color: var(--leva-rule); }
.m-failed { color: var(--leva-danger); }

.jobs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52vh; text-align: center; }
.jobs-empty .stage-mark { width: 22px; height: 22px; }
.jobs-empty h2 { margin: 10px 0 12px; font-size: 14px; font-weight: 600; color: var(--leva-navy); }
.jobs-primary { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 12px; border-radius: 7px; background: var(--leva-action); color: #fff; font-weight: 600; text-decoration: none; }
.jobs-primary:hover { background: color-mix(in srgb, var(--leva-action) 86%, #000); }
.jobs-page .jobs-primary kbd { background: color-mix(in srgb, #fff 18%, var(--leva-action)); border-color: color-mix(in srgb, #fff 35%, var(--leva-action)); color: #fff; }
.jobs-none { margin: 0; padding: 40px 16px; color: var(--leva-muted); }
.jobs-none strong { margin-right: 6px; font-weight: 600; color: var(--leva-navy); }
.jobs-none a, .jobs-archived { color: var(--leva-action); font-weight: 600; text-decoration: none; }
.jobs-none a:hover, .jobs-archived:hover { text-decoration: underline; }
.jobs-archived { display: inline-block; margin: 20px 0 0 16px; font-weight: 500; }
.jobs-setup { margin: 10px 0 2px; padding: 8px 12px; border: 1px solid var(--jobs-border); border-radius: 8px; }
.jobs-setup .setup-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 20px; margin: 0; }
.jobs-setup .setup-list li { gap: 6px; padding: 2px 0; font-size: 13px; line-height: 18px; }
.jobs-setup .setup-list small { font-size: 12px; }
.jobs-setup .plan-mark { width: 14px; flex-shrink: 0; }

.job-group-head.skeleton { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; height: 34px; padding: 0 6px 0 8px; border-radius: 7px; background: var(--jobs-band); }
.job-row.skeleton:hover { background: none; }
.skel { display: block; height: 10px; border-radius: 5px; background: var(--jobs-skel); }
.job-group-head .skel { background: color-mix(in srgb, var(--leva-rule) 55%, #fff); }
.skel.job-value { justify-self: end; }
.skel-ring { justify-self: center; width: 14px; height: 14px; border: 1.5px solid var(--jobs-skel); border-radius: 50%; }

@media (max-width: 900px) {
  .shell:has(.jobs-page) { height: 100dvh; }
  .jobs-page { --cols: 28px minmax(200px, 1.4fr) minmax(180px, 1fr) 112px 32px; }
  .jobs-page.no-values { --cols: 28px minmax(200px, 1.4fr) minmax(180px, 1fr) 32px; }
  .jobs-page .job-rep { display: none; }
}
@media (max-width: 640px) {
  .shell-main:has(> .jobs-page) { padding: 0; }
  .jobs-page { border: 0; border-radius: 0; box-shadow: none; }
  .jobs-head { gap: 4px; height: 48px; padding: 0 6px 0 8px; }
  .jobs-head h1, .jobs-keys, .jobs-cols { display: none; }
  .jobs-search:not(:focus-within):not(.has-q) { width: 36px; padding: 0; justify-content: center; border-color: transparent; }
  .jobs-search:not(:focus-within):not(.has-q) :is(input, kbd) { width: 0; flex: 0 0 0; padding: 0; border: 0; overflow: hidden; }
  .jobs-search:is(:focus-within, .has-q) { position: absolute; inset: 9px 8px; z-index: 4; width: auto; height: 30px; }
  .jobs-search kbd { display: none; }
  .jobs-tabs { gap: 0; }
  .jobs-tab { gap: 4px; padding: 0 8px; }
  .jobs-scroll { padding: 0 6px 24px; scroll-padding-top: 44px; }
  .job-group-head { top: 0; }
  .job-group-toggle { grid-template-columns: 24px minmax(0, 1fr) auto 20px; height: 36px; }
  /* Two lines, as on the desktop's columns: the job and its value, then its
     builder and next step. The row menu stays shown: a phone has no hover. */
  .job-row { grid-template-columns: 24px minmax(0, max-content) minmax(0, 1fr) auto 28px; grid-template-areas: "mark name name value acts" "mark builder next next acts"; row-gap: 2px; column-gap: 8px; align-items: center; height: auto; min-height: 58px; padding: 9px 4px 9px 8px; scroll-margin-top: 44px; }
  .job-row .job-mark { grid-area: mark; align-self: start; width: 24px; height: 20px; }
  .job-main { display: contents; }
  .job-name { grid-area: name; max-width: none; min-width: 0; }
  .job-builder { grid-area: builder; max-width: 40vw; font-size: 12.5px; }
  .job-rep, .next-sub { display: none; }
  .job-next { grid-area: next; display: flex; align-items: center; font-size: 12.5px; }
  .job-main:has(.job-builder) + .job-next::before { content: "·"; margin-right: 6px; color: var(--leva-muted); }
  .job-value { grid-area: value; }
  .job-acts { grid-area: acts; }
  .job-menu summary { opacity: 1; }
  .job-more { margin-left: 32px; }
}
/* Needs you, above All jobs (JoyneWeb.QueueComponents), and Leva's column. */
.jobs-scroll { container-type: inline-size; }
.jobs-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 16px 6px 10px; }
.jobs-top.with-leva { grid-template-columns: minmax(0, 1fr) 300px; }
.queue-h { display: flex; align-items: center; gap: 8px; height: 28px; margin: 0 0 4px 8px; }
.queue-h h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--leva-navy); }
.queue-n { color: var(--leva-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.queue-items { margin: 0; padding: 0; list-style: none; }
.queue-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 10px 8px; border-radius: 8px; }
.queue-row:hover, .queue-row.asking { background: var(--jobs-hover); }
.queue-mark { display: grid; place-items: center; height: 20px; }
.queue-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.queue-title b { font-weight: 600; color: var(--leva-navy); }
.queue-job { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--leva-text); font-weight: 500; text-decoration: none; }
.queue-job:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--leva-rule); }
.queue-meta { margin-top: 2px; color: var(--leva-muted); }
.queue-said { display: flex; gap: 7px; align-items: flex-start; margin: 5px 0 0; color: var(--leva-text); }
.queue-said .leva-mark { margin-top: 2px; }
.queue-assumed { display: block; color: var(--leva-muted); }
.queue-acts { display: flex; align-items: center; gap: 6px; }
.queue-act { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--jobs-border); border-radius: 7px; background: #fff; box-shadow: var(--jobs-shadow); font: inherit; font-weight: 500; color: var(--leva-navy); text-decoration: none; white-space: nowrap; cursor: pointer; }
.queue-act:hover { background: var(--jobs-hover); }
.queue-link { display: inline-flex; align-items: center; height: 30px; padding: 0 6px; border: 0; border-radius: 7px; background: none; font: inherit; font-weight: 500; color: var(--leva-action); text-decoration: none; white-space: nowrap; cursor: pointer; }
.queue-link:hover { background: var(--jobs-select); }
.queue-act:focus-visible, .queue-link:focus-visible, .queue-undo:focus-visible, .queue-go:focus-visible, .queue-job:focus-visible, .lv a:focus-visible { outline: 2px solid var(--leva-action); outline-offset: 1px; }
.queue-receipt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 15px; color: var(--leva-muted); }
.queue-receipt .stage-mark { margin-right: 9px; }
.queue-receipt b { color: var(--leva-text); font-weight: 500; }
.queue-undo { padding: 4px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-weight: 600; color: var(--leva-action); cursor: pointer; }
.queue-undo:hover { background: var(--jobs-select); }
.queue-empty { margin: 0; padding: 4px 8px; color: var(--leva-muted); }
.queue-ask { display: grid; gap: 8px; max-width: 520px; margin-top: 10px; padding: 12px; border: 1px solid var(--jobs-border); border-radius: 8px; background: #fff; }
.queue-ask-q { margin: 0; color: var(--leva-navy); }
.queue-ask label { font-weight: 500; color: var(--leva-text); }
.queue-ask input { height: 32px; padding: 0 10px; border: 1px solid var(--jobs-border); border-radius: 7px; font: inherit; color: var(--leva-text); }
.queue-ask input:focus { outline: none; border-color: var(--leva-action); box-shadow: 0 0 0 1px var(--leva-action); }
.queue-ask-acts { display: flex; align-items: center; gap: 8px; }
.queue-go { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: var(--leva-action); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.queue-go:hover { background: color-mix(in srgb, var(--leva-action) 86%, #000); }
.queue-error { margin: 0; color: var(--leva-danger); }
.queue-changed { margin-top: 5px; }
.queue-skel { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; height: 56px; padding: 0 8px; }
.queue-skel > span:last-child { display: grid; gap: 8px; }
.queue-more { margin-left: 38px; }
.levacol { min-width: 0; padding-left: 24px; border-left: 1px solid var(--jobs-line); }
.levacol .queue-h { margin-left: 0; }
.lv-list { margin: 0; padding: 0; list-style: none; }
.lv { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 6px 0; }
.lv-t { min-width: 0; }
.lv-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv a { color: var(--leva-text); font-weight: 500; text-decoration: none; }
.lv a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--leva-rule); }
.lv-s { color: var(--leva-muted); }
.lv-live { display: flex; align-items: center; gap: 7px; color: var(--leva-muted); }
.lv-live::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--leva-logo-blue); }
.lv-bars { display: flex; gap: 3px; margin-top: 6px; }
.lv-bars i { width: 22px; height: 4px; border-radius: 2px; background: var(--jobs-line); }
.lv-bars i.on { background: var(--leva-logo-blue); }
.lv-when { color: var(--leva-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv-sub { margin: 14px 0 4px; font-size: 12px; font-weight: 500; color: var(--leva-muted); }
.jobs-listhead { display: flex; align-items: center; margin: 6px 0 0; padding: 12px 6px 6px; border-top: 1px solid var(--jobs-line); }
.jobs-top + .jobs-listhead { margin-top: 0; }
@container (max-width: 960px) {
  .jobs-top.with-leva { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .levacol { padding: 12px 0 0 8px; border-left: 0; border-top: 1px solid var(--jobs-line); }
}
@media (max-width: 640px) {
  .jobs-top { padding: 12px 0 6px; }
  .queue-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 8px; padding: 12px 6px; }
  .queue-acts { grid-column: 2; flex-wrap: wrap; }
  .queue-act, .queue-go, .queue-link { height: 36px; }
  .queue-title { flex-wrap: wrap; row-gap: 0; white-space: normal; }
  .lv-later { display: none; }
  .jobs-listhead { padding: 10px 0 4px; }
  /* The views sit with the list, so search joins the top bar, as the prototype draws it. */
  .shell-main:has(> .jobs-page) { position: relative; }
  .jobs-head { position: absolute; top: 0; right: 52px; z-index: 21; height: 52px; padding: 0; border: 0; background: none; }
  .jobs-head:has(.jobs-search:is(:focus-within, .has-q)) { left: 0; right: 0; background: #fff; }
}
/* The top bar's New stays quiet over the list, which has no primary action. */
@media (max-width: 900px) {
  .shell:has(.jobs-page) .shell-topbar .side-new { padding: 6px; background: none; color: var(--leva-navy); }
  .shell:has(.jobs-page) .shell-topbar .side-new:hover { background: color-mix(in srgb, var(--leva-navy) 6%, #fff); }
  .shell:has(.jobs-page) .shell-topbar .side-new span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .job-group-chev { transition: none; } }

/* The Leva bar has its own strip under the drawing, so it covers none of it,
   and the strip stays while the Leva tab is open, so the drawing doesn't move
   (decision 1, 31 Oct 2026). The scale note sits beside the zoom above.
   Each part is placed by name, so a page without the bar (Leva support's)
   keeps the drawing and the panel in their own columns. */
.leva-strip { min-height: 84px; min-width: 0; padding: 0 16px 10px; display: flex; align-items: flex-end; justify-content: center; }
.job-canvas:not(.empty) { grid-template-rows: minmax(0, 1fr) auto; }
.job-canvas:not(.empty) > .page-rail { grid-area: rail; }
.job-canvas:not(.empty) > .canvas-area { grid-area: drawing; }
.job-canvas:not(.empty) > .leva-strip { grid-area: strip; }
@media (min-width: 821px) {
  .job-canvas:not(.empty) { grid-template-areas: "rail drawing panel" "rail strip panel"; }
  .job-canvas:not(.empty) > .measurements { grid-area: panel; }
  .job-canvas.bill-expanded:has(#panel-quote:not([hidden])) { grid-template-areas: "panel" "strip"; }
}
.canvas-top-fill { flex: 1; }
.canvas-top > :is(.auto-follow, .scale-status, .zoom) { flex-shrink: 0; pointer-events: auto; }
.workspace .canvas-top .scale-status { padding: 0; background: none; font-size: 11.5px; color: var(--leva-muted); white-space: nowrap; }
/* On a phone, Follow activity (shown only during a run) wraps the scale note
   and zoom onto a second row, so the tool bar starts below it. */
@media (max-width: 550px) {
  .workspace .canvas-top { flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; }
  .workspace .canvas-area:has(#auto-follow:not([hidden])) .toolbar { top: 100px; }
}

.leva-bar { width: min(720px, 100%); display: flex; flex-direction: column; overflow: hidden; background: var(--leva-surface); border: 1px solid var(--leva-rule); border-radius: 12px; box-shadow: 0 1px 2px color-mix(in srgb, var(--leva-navy) 14%, transparent); }
.leva-bar:focus-within { border-color: var(--leva-action); box-shadow: 0 0 0 1px var(--leva-action); }
/* A refusal or the scope note is a sentence, so its link flows in the text;
   only the status line lays its facts out in a row. */
.leva-line { display: block; width: 100%; min-height: 26px; margin: 0; padding: 3px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--leva-rule) 50%, #fff); background: var(--leva-paper); color: var(--leva-text); font-size: 12px; line-height: 19px; text-align: left; }
.leva-line a { color: var(--leva-action); white-space: nowrap; }
.leva-line-error { color: var(--leva-danger); }
.leva-status { display: flex; align-items: center; gap: 14px; padding-block: 0; white-space: nowrap; overflow: hidden; }
button.leva-status { cursor: pointer; }
.leva-status:hover .leva-st:first-child { text-decoration: underline; }
.leva-open .leva-status { display: none; }
.leva-row { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 10px; color: var(--leva-text); font-size: 13px; }
.leva-row .leva-mark { width: 18px; height: 18px; }
.leva-row input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; font: 13px var(--leva-font); color: var(--leva-text); }
.leva-row input::placeholder { color: var(--leva-muted); }
.leva-row-text { flex: 1; min-width: 0; }
.leva-book { padding: 4px 10px; border-radius: var(--leva-radius-control); background: var(--leva-action); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; }
.leva-key { flex-shrink: 0; padding: 1px 5px; border: 1px solid var(--leva-rule); border-radius: 4px; font: 11px var(--leva-font); color: var(--leva-muted); }
.leva-send { display: none; flex-shrink: 0; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 7px; background: var(--leva-action); color: #fff; }
.leva-send svg { width: 16px; height: 16px; stroke-width: 2; }
.leva-row input:not(:placeholder-shown) ~ .leva-send { display: inline-flex; }
.leva-row input:not(:placeholder-shown) ~ .leva-key { display: none; }
.composer-about { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 1; min-width: 0; max-width: 45%; height: 24px; padding: 0 2px 0 9px; border: 1px solid var(--leva-rule); border-radius: 12px; background: var(--leva-paper); color: var(--leva-text); font-size: 12px; }
.composer-about > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-about button { display: inline-grid; flex-shrink: 0; place-items: center; width: 20px; height: 20px; border-radius: 10px; color: var(--leva-muted); }
.composer-about button:hover { background: color-mix(in srgb, var(--leva-navy) 6%, #fff); color: var(--leva-navy); }
.composer-about svg { width: 12px; height: 12px; }
@media (hover: none) { .leva-key { display: none; } }

.leva-st { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--leva-text); }
.leva-st::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--leva-rule); }
.leva-st-run::before { background: var(--leva-action); }
.leva-st-check::before { background: var(--leva-attention); }
.leva-st-done::before { background: var(--leva-evidence); }
.leva-st-fail::before { background: var(--leva-danger); }
.leva-st-fail { color: var(--leva-danger); }

/* The Leva tab: the latest takeoff and its steps, then the job's thread. */
.panel-switch .leva-mark { width: 16px; height: 16px; }
/* Three tabs, the job's stage and Close share the panel's header. Below
   1100 px the panel is 300 px, so the Leva tab shows its mark, with "Leva"
   kept for screen readers. */
.job-canvas .panel-switch button { padding: 6px 8px; }
@media (max-width: 1100px) {
  .job-canvas .measurements .panel-header { gap: 4px; padding: 0 8px 0 10px; }
  .job-canvas .panel-switch { gap: 2px; }
  .job-canvas .panel-switch button { padding: 6px; }
  .job-canvas .leva-tab-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .job-canvas #close-panel { width: 28px; }
}
.leva-run { display: flex; flex-shrink: 0; align-items: center; gap: 8px; min-height: 40px; padding: 6px 16px; border-bottom: 1px solid color-mix(in srgb, var(--leva-rule) 50%, #fff); background: var(--leva-paper); font-size: 12.5px; }
.leva-stop { margin-left: auto; padding: 4px 0; color: var(--leva-danger); font-size: 12.5px; font-weight: 600; }
.leva-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; }
.leva-steps { list-style: none; margin: 0; padding: 6px 16px 8px; border-bottom: 1px solid color-mix(in srgb, var(--leva-rule) 50%, #fff); background: var(--leva-paper); font-size: 12.5px; }
.leva-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.leva-step-word { color: var(--leva-muted); }
.leva-tab .agents { margin: 0; padding: 10px 16px 0; max-width: none; justify-content: flex-start; }
.leva-questions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 0; color: var(--leva-muted); font-size: 12.5px; }
.leva-questions button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1px solid var(--leva-rule); border-radius: var(--leva-radius-control); background: var(--leva-surface); color: var(--leva-navy); font-size: 12px; font-weight: 600; }
.leva-questions button:hover { border-color: var(--leva-action); }
.leva-questions kbd { padding: 0 4px; border: 1px solid var(--leva-rule); border-radius: 3px; font: 11px var(--leva-font); color: var(--leva-muted); }
.leva-thread { list-style: none; margin: 0; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.leva-who { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; color: var(--leva-muted); font-size: 11.5px; }
.leva-who b { color: var(--leva-text); font-weight: 600; }
.leva-who time::before { content: "· "; }
.leva-about { margin: 0 0 4px; color: var(--leva-muted); font-size: 12px; }
.leva-said { margin: 0; color: var(--leva-text); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.leva-said-you { display: inline-block; max-width: 100%; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--leva-rule) 60%, #fff); border-radius: 8px; background: var(--leva-paper); }
.leva-note { margin: 4px 0 0; color: var(--leva-muted); font-size: 12px; }
.leva-event { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--leva-muted); font-size: 12px; }
.leva-event .leva-st { color: var(--leva-muted); }
.leva-event-detail { margin: 4px 0 0 15px; color: var(--leva-text); font-size: 12.5px; }
.leva-entry-question .q-slot { padding: 0; border-top: 0; }
.leva-empty { margin: 0; padding: 24px 16px; color: var(--leva-muted); font-size: 12.5px; }

/* Phones: the bar runs the full width under the drawing, and the Leva tab
   opens as a sheet above it, so the bar stays the one place to type. The
   sheet takes the drawing's row, so it ends where the strip starts when a
   wrapped note makes the bar taller. */
@media (max-width: 820px) {
  .job-canvas:not(.empty) { grid-template-areas: "rail drawing" "strip strip"; }
  .job-canvas > .leva-strip { min-height: 82px; padding: 0 8px 8px; }
  .leva-row { height: 44px; }
  .job-canvas.leva-open .measurements { display: flex; grid-area: rail-start / rail-start / drawing-end / drawing-end; position: relative; inset: auto; margin-top: 28px; width: auto; border-left: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px color-mix(in srgb, var(--leva-navy) 16%, transparent); z-index: 30; }
}