/* SNAPSHOT-1 PORT: Attached annotations and a completed-Measure action; empty plans add no host or reserved space. */
.plan-dimension{color:var(--pd-ink,#000);pointer-events:none} /* SNAPSHOT-1 PORT: Lines and ticks share the value pill's black (light) or white (dark) ink. */
.pd-detached .plan-dimension,.pd-detached .pd-guides{color:#000} /* SNAPSHOT-1 PORT: Exported pictures with dimensions use the light look on paper. */
.plan-dimension text{font:12px var(--f-body,Inter,sans-serif);fill:currentColor}
/* SNAPSHOT-1 PORT: Theme contrast tokens also reach the final SVG use-shadow glyphs. */
.plan-dimensions{--pd-ink:#000;--pd-pill:#fff;--pd-point-bg:#e4f0ff;--pd-point-ink:#0756a5;--pd-warning:#8a5100;--pd-green:#167038;--pd-red:#b3261e;--pd-grey:#686868} /* SNAPSHOT-1 PORT: Light pills: black on white, black outline. */
:root[data-theme="dark"] .plan-dimensions:not(.pd-detached){--pd-ink:#fff;--pd-pill:#121417;--pd-point-bg:#173449;--pd-point-ink:#91caff;--pd-warning:#ffc56b;--pd-green:#72db9a;--pd-red:#ff9d98;--pd-grey:#b4b4bb} /* SNAPSHOT-1 PORT: Dark pills: white on near-black, white outline; pointed keeps dark blue tokens. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .plan-dimensions:not(.pd-detached){--pd-ink:#fff;--pd-pill:#121417;--pd-point-bg:#173449;--pd-point-ink:#91caff;--pd-warning:#ffc56b;--pd-green:#72db9a;--pd-red:#ff9d98;--pd-grey:#b4b4bb}}
.pd-glyphs text{font:12px var(--f-body,Inter,sans-serif);fill:var(--pd-ink,#000)}
/* SNAPSHOT-1 PORT: Measure-only temporary architectural ink is not plan/export data. */
.pd-temporary{color:var(--ink);pointer-events:none}.pd-temporary path{fill:none;stroke:currentColor;stroke-width:1.1}.pd-temporary text{font:12px var(--f-body);fill:currentColor;paint-order:stroke fill;stroke:var(--plan-bg);stroke-width:4}
.plan-dimension .pd-run,.plan-dimension .pd-tick{fill:none;stroke:currentColor;stroke-width:1.1}
/* SNAPSHOT-1 PORT: Opaque value pills and a final ink pass keep later guides off values. */
.pd-glyphs .pd-pill{fill:var(--pd-pill,#fff);stroke:var(--pd-ink,#000);stroke-width:1}
.plan-dimension .pd-leader{stroke-width:.6;opacity:.45}
.pd-ink-overlay{pointer-events:none}
.plan-dimensions .pd-extension{fill:none;stroke:currentColor;stroke-width:.6} /* SNAPSHOT-1 PORT: Extension lines use the same black or white ink. */
.plan-dimension [data-plan-dimension]{cursor:pointer;pointer-events:all;outline:none}
.plan-dimension .pd-target{fill:transparent;stroke:none}
.plan-dimension .pd-check-box{fill:white;stroke:#222;stroke-width:1}
.pd-guides{color:var(--pd-ink,#000);pointer-events:none} /* SNAPSHOT-1 PORT: Same line ink as the pills. */
.pd-guides .pd-highlight{fill:none;stroke:#0675d8;stroke-width:3;visibility:hidden;display:none}
.pd-guides .pd-full{display:none}
.plan-dimensions.pd-show-full .pd-full{display:initial}
.plan-dimensions.pd-show-full .pd-short{visibility:hidden}
/* SNAPSHOT-1 PORT: Hover/touch/focus changes guide ink, never annotation framing bounds. */
.plan-dimension:has([data-plan-dimension]:hover,.pd-hit:hover)+.pd-guides .pd-full,.plan-dimension:focus-within+.pd-guides .pd-full{display:initial;stroke:#0675d8;opacity:1}
.plan-dimension:has([data-plan-dimension]:hover,.pd-hit:hover) .pd-short,.plan-dimension:focus-within .pd-short{visibility:hidden}
.plan-dimension:has([data-plan-dimension]:hover,.pd-hit:hover)+.pd-guides .pd-highlight,.plan-dimension:focus-within+.pd-guides .pd-highlight{visibility:visible;display:initial}
.plan-dimension [data-plan-dimension]:focus-visible .pd-target{stroke:#0675d8;stroke-width:2}
.pd-glyphs .pd-original{fill:var(--pd-grey);text-decoration:none} /* SNAPSHOT-1 PORT: SVG text-decoration paints its halo over glyphs; strike is separate ink. */
.pd-glyphs .pd-strike{fill:none;stroke:var(--pd-grey);stroke-width:1;stroke-linecap:butt} /* SNAPSHOT-1 PORT: Paint the grey strike over the glyph fill, never as a background stroke. */
.pd-glyphs .pd-correction{fill:var(--pd-red)}
.plan-dimensions .pd-confirm{fill:none;stroke:var(--pd-green);stroke-width:2} /* SNAPSHOT-1 PORT: Marks paint last, clear of every value. */
.plan-dimensions .pd-stale{fill:var(--pd-warning);font:16px var(--f-body,Inter,sans-serif)}
.pd-glyphs.pd-stale-ink .pd-value{fill:var(--pd-warning)} /* SNAPSHOT-1 PORT: Stale state survives hover/focus tint. */
/* SNAPSHOT-1 PORT: Checking messages, strict entry sheet, progress and personal pictures; no legacy modal barrier. */
.pd-progress{position:fixed;left:340px;top:110px;z-index:8;background:var(--panel,#fff);border:1px solid var(--line,#bbb);border-radius:18px;padding:6px 12px;font-size:12px;pointer-events:none}
.pd-message{position:fixed;left:55%;top:110px;transform:translateX(-50%);z-index:65;max-width:480px;padding:12px;background:var(--panel,#fff);color:var(--ink);border:1px solid var(--line,#bbb);border-radius:8px;box-shadow:0 3px 15px #0002;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pd-message button{background:none;color:var(--accent,#0675d8);border:0;text-decoration:underline;cursor:pointer}
.pd-entry-host{position:fixed;inset:0;z-index:66;pointer-events:none;display:flex;justify-content:center;align-items:flex-start;padding-top:150px}
.pd-entry{pointer-events:auto;width:min(380px,calc(100vw - 24px));max-height:80dvh;overflow:auto;box-shadow:0 4px 28px #0004}
.pd-entry h2{font-size:18px}.pd-input-error,#pd-entry-error{color:var(--fail);flex-basis:100%} /* SNAPSHOT-1 PORT: Panels and dark mode — the theme's red. */
.pd-setting-opts{grid-template-columns:1fr 1fr}
@media(max-width:700px){.pd-progress{top:146px;left:12px;font-size:11px}.pd-message{left:12px;right:12px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));transform:none}.pd-entry-host{padding:0;align-items:flex-end;background:#0003;pointer-events:auto}.pd-entry{width:100%;max-height:85dvh;padding-bottom:calc(20px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}}
/* SNAPSHOT-1 PORT: Owner-approved value tip, progress and field controls. */
.pd-tooltip{position:fixed;z-index:67;pointer-events:none;border-radius:6px;padding:8px 12px;background:#17242e;color:white;font:12px var(--f-body);box-shadow:0 2px 8px #0003}
/* SNAPSHOT-1 PORT: Plan-only widgets never cover an existing native dialog. */
body:has(.scrim) :is(.pd-message,.pd-tooltip,.pd-progress,.pd-select-bar,.pd-select-widget){visibility:hidden}
/* SNAPSHOT-1 PORT: Pointed pills use the theme's blue tokens (dark blue fill in dark mode), never a pale patch on a dark page. */
.pd-glyphs.pd-pointed .pd-pill{fill:var(--pd-point-bg);stroke:var(--pd-point-ink)}
.pd-glyphs.pd-pointed .pd-value:not(.pd-original){fill:var(--pd-point-ink)}
.pd-glyphs.pd-stale-ink .pd-value,.pd-glyphs.pd-stale-ink.pd-pointed .pd-value{fill:var(--pd-warning)}
.plan-dimension.selected+.pd-guides .pd-highlight,.plan-dimension.selected+.pd-guides .pd-full{display:initial;visibility:visible;stroke:#0675d8;opacity:1}
.pd-progress{display:flex;align-items:center;gap:5px}.pd-progress-measured{color:var(--fail)} /* SNAPSHOT-1 PORT: Panels and dark mode — the theme's red. */
.pd-progress-ring{width:18px;height:18px;flex:none;transform:rotate(-90deg)}.pd-progress-ring circle{fill:none;stroke:var(--line);stroke-width:2}.pd-progress-ring circle+circle{stroke:var(--ok)} /* SNAPSHOT-1 PORT: Panels and dark mode — the ring's track and filled part from the theme. */
.pd-message-actions{display:flex;gap:8px}.pd-message button,.pd-select-bar button{min-height:44px;padding:8px 12px;border:1px solid #71848e;border-radius:6px;text-decoration:none;background:#ffffff12;color:inherit;cursor:pointer}
.pd-message-check{color:#5cdf90;font-size:22px}.pd-entry{position:relative}.pd-entry-close{position:absolute;right:10px;top:8px;min-width:44px;min-height:44px;font-size:24px;border:0;background:none;color:inherit;cursor:pointer}
.pd-entry h2{padding-right:40px}.pd-entry input{min-height:52px;font-size:22px}.pd-entry .acts{display:flex;gap:12px}.pd-entry .acts .btn{flex:1;min-height:44px}
#pd-entry-difference{color:var(--fail);min-height:20px}#pd-entry-difference:not(:empty)::before{content:"●";font-size:9px;margin-right:8px}#pd-entry-difference.pd-matches{color:var(--ok)} /* SNAPSHOT-1 PORT: Panels and dark mode — the theme's red and green. */
.pd-select-bar{position:fixed;bottom:calc(84px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:64;display:flex;gap:8px;padding:8px;border-radius:8px;background:#17242e;color:white}
@media(max-width:700px){.pd-message{background:#17242e;color:white;border-color:#34434d}.pd-message-actions{width:100%}.pd-message-actions button{flex:1}.pd-entry input{width:100%}}
/* SNAPSHOT-1 PORT: A click selects: the line also selects; the box and Measured differently? sit beside the selected value, or in a phone bar. */
.plan-dimension .pd-hit{fill:none;stroke:transparent;stroke-width:12;pointer-events:stroke;cursor:pointer}
.pd-select-widget{position:fixed;z-index:64;display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;background:var(--panel,#fff);color:var(--ink,#202124);border:1px solid var(--line,#bbb);box-shadow:0 2px 10px #0003;font-size:12px}
.pd-select-widget button{min-height:28px;padding:4px 8px;border:1px solid var(--line,#bbb);border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
.pd-select-box{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;cursor:pointer}.pd-select-box input{width:18px;height:18px;margin:0;accent-color:#16813b;cursor:pointer}
.pd-select-bar .pd-select-box{min-width:44px;min-height:44px;border:1px solid #71848e;border-radius:6px}.pd-select-bar .pd-select-box input{width:22px;height:22px}
/* SNAPSHOT-1 PORT: A selected dimension's hint runs on one line when it fits (at most two on phones); the phone bar starts with the name and value; entries preview how they will be written. */
.hint.pd-hint{width:max-content}
#styleSwitch.pd-site-hidden{display:none !important} /* SNAPSHOT-1 PORT: The Site Dimensions map always prints in Line. */
.pd-select-bar{left:12px;right:12px;transform:none;flex-direction:column;gap:6px;box-sizing:border-box}.pd-select-name{font-size:13px;font-weight:600;line-height:18px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-select-row{display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}.pd-select-row>*{flex:0 0 auto}.pd-select-row button{flex:1 1 auto;padding:5px 8px;font-size:14px;line-height:16px}
.pd-entry-preview{color:var(--ink-2);margin:0}.pd-entry-preview:empty{display:none}form[data-pd-planned] .pd-entry-preview{flex-basis:100%}
/* SNAPSHOT-1 PORT: Plain values (the default, every export and the site sheet): the outlined look from before pills, same contrast rule in both themes. */
html:root .plan-dimensions.pd-plain:not(.pd-detached){--pd-ink:var(--ink,#202124)}
.plan-dimensions.pd-plain.pd-detached{--pd-ink:#202124}
.pd-detached.pd-plain .plan-dimension,.pd-detached.pd-plain .pd-guides{color:#202124}
.plan-dimensions.pd-plain .pd-glyphs :is(.pd-value,.pd-correction){paint-order:stroke fill;stroke:var(--pd-halo,var(--plan-bg,#fff));stroke-width:4;stroke-linejoin:round}
.plan-dimensions.pd-plain .pd-extension{opacity:.55}
.plan-dimensions.pd-plain .pd-glyphs.pd-pointed{--pd-halo:var(--pd-point-bg)}
.plan-dimensions.pd-plain .plan-dimension:has([data-plan-dimension]:hover,.pd-hit:hover) .pd-target,.plan-dimensions.pd-plain .plan-dimension:focus-within .pd-target{fill:var(--pd-point-bg);fill-opacity:1}
.project-dimension-line form{display:flex;align-items:end;gap:8px;flex-wrap:wrap}
.project-dimension-line .field{flex:1;min-width:140px}
.project-dimension-line strong .btn{white-space:normal;text-align:left;overflow-wrap:anywhere;max-width:100%}
.project-dimension-line details{margin-top:10px}
/* SNAPSHOT-1 PORT: Tools retain the existing modal look without the classic drawing-edit barrier. */
.project-tools-scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);display:grid;place-items:center;z-index:50;padding:16px}
/* SNAPSHOT-1 PORT: Partners retains details behavior, matching the existing Site section's right chevron. */
[data-project-partners]>summary{list-style:none}
[data-project-partners]>summary::-webkit-details-marker{display:none}
[data-project-partners][open]>summary.sec-h::after{transform:rotate(45deg)}
[data-project-partners]>summary.sec-h{padding:10px 2px;font:600 13px/1.2 var(--f-body)}
/* SNAPSHOT-1 PORT: Dedicated wood-order controls/drawings; inherited plan-off sheets and editor symbols are untouched. */
.wood-notice{pointer-events:auto;max-height:45vh;overflow:auto}.wood-notice .link{color:inherit}
.wood-order{padding:0 16px 30px;max-width:1500px;margin:auto;line-height:1.5;container:woodsheet/inline-size}
.wood-order .field{max-width:360px}.wood-order select{max-width:100%}
.wood-defaults{padding:12px 0;border-bottom:1px solid var(--line,#aaa)}
.wood-columns{margin:16px 0;font-weight:600}
.wood-columns,.wood-group>summary{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(95px,1fr) minmax(180px,2fr) minmax(95px,1fr) 50px 50px minmax(90px,1fr);gap:12px;align-items:start}
.wood-cell-label{display:none}
.wood-group{border-bottom:1px solid var(--line,#aaa);padding:12px 0}
.wood-group>summary{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(95px,1fr) minmax(180px,2fr) minmax(95px,1fr) 50px 50px minmax(90px,1fr);gap:12px;align-items:start;cursor:pointer;list-style:disclosure-closed}
.wood-group>summary::before{content:"▸";position:absolute;margin-left:-12px}
.wood-group[open]>summary::before{content:"▾"}
.wood-group>summary span{min-width:0;white-space:normal;overflow-wrap:normal;word-break:normal}
.wood-group-body{padding:15px 0}.wood-group article{padding:12px 8px;border-top:1px solid var(--line,#aaa)}
.wood-group h4{margin:4px 0}.wood-note-text{white-space:pre-wrap;overflow-wrap:anywhere}
.wood-drawings{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--panel-2);color:var(--ink);--wood-face:#e8dcc9;padding:12px;margin:12px 0}
.wood-drawings figure{margin:0;min-width:0}.wood-drawings svg{display:block;width:100%;height:300px}
[data-theme=dark] .wood-drawings{--wood-face:#453e33}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .wood-drawings{--wood-face:#453e33}}
@container woodsheet (max-width:560px){.wood-drawings{grid-template-columns:1fr}}
.wood-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wood-fields input,.wood-fields select,.wood-fields textarea{width:100%;min-width:0}
.wood-fields .wood-note{grid-column:1/-1}.wood-fields [hidden]{display:none}
.wood-inspector{padding:12px 0;border-top:1px solid var(--line,#aaa)}.wood-inspector dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}.wood-inspector dd{margin:0}
.win-costs #winHead .seg2{flex-wrap:wrap}.win-costs #winHead .wh-acts{flex-wrap:wrap}
.linked-lists .wood-group>summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.linked-lists .wood-columns{display:none}.linked-lists .wood-cell-label{display:inline}
@media(max-width:1100px){.wood-group>summary{grid-template-columns:repeat(2,minmax(0,1fr))}.wood-columns{display:none}.wood-cell-label{display:inline}}
@media(max-width:900px){.wood-group>summary,.linked-lists .wood-group>summary{grid-template-columns:1fr}.wood-fields{grid-template-columns:1fr}.wood-drawings{grid-template-columns:1fr}.wood-order{padding:0 12px 24px}.wood-group>summary span{display:block}}
@media(prefers-reduced-motion:reduce){.wood-order *{scroll-behavior:auto;transition:none}}

:root{
  color-scheme:light;
  --paper:#EDEDEE; --panel:#FFFFFF; --panel-2:#F4F4F5; --sunk:#EFEFF1;
  --ink:#111112; --ink-2:#48484D; --ink-3:#67676C;
  --line:#E3E3E6; --line-2:#EDEDF0;
  --accent:#5BB631; --accent-2:#C4E8AE; --accent-ink:#FFFFFF;
  --primary:#111112; --primary-ink:#FFFFFF;
  --warn:#955800; --warn-tint:#FBF0DC; --fail:#BF3526; --fail-tint:#FBE4E1; --ok:#2E7D32; --ok-tint:#E6F4E1;
  --surface:var(--panel); --bg:var(--panel); --bg-1:var(--panel); --bg-2:var(--panel-2); --danger:#BF3526; --danger-hover:#A92E21; --danger-press:#93281C; /* SNAPSHOT-1 PORT: Panels and dark mode — the names some rules used but nothing defined, and the red of destructive buttons. */
  --plan-bg:#F7F6F4; --plan-grid:#CCCAC5; --plan-ink:#222223; --plan-sel:#46A322;
  --site-line:#1E1E1F; --site-fill:rgba(91,182,49,.10); --excl-line:#3F3F44; --excl-fill:rgba(255,255,255,.62);
  --ref:#0E7C75; --check:#B07A1E; --bad:#D04A38; --entry:#46A322; --measure:#2563C9;
  --halo:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06);
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0E0E10; --panel:#19191B; --panel-2:#222225; --sunk:#151517;
    --ink:#F2F2F3; --ink-2:#C4C4C9; --ink-3:#8E8E94;
    --line:#2D2D31; --line-2:#252529;
    --accent:#6CC63E; --accent-2:#35522A; --accent-ink:#111112;
    --primary:#F2F2F3; --primary-ink:#111112;
    --warn:#E5A640; --warn-tint:#33260F; --fail:#F27A67; --fail-tint:#3A1B17; --ok:#6CC66A; --ok-tint:#17291A;
    --surface:var(--panel); --bg:var(--panel); --bg-1:var(--panel); --bg-2:var(--panel-2); --danger:#D32F2F; --danger-hover:#B92828; --danger-press:#A12222; /* SNAPSHOT-1 PORT: Panels and dark mode — the same names in the dark theme. */
    --plan-bg:#161617; --plan-grid:#3A3A3C; --plan-ink:#E4E4E4; --plan-sel:#7BD04A;
    --site-line:#ECECEC; --site-fill:rgba(108,198,62,.12); --excl-line:#D0D0D4; --excl-fill:rgba(25,25,27,.62);
    --ref:#6ED5CC; --check:#E1AE5F; --bad:#EC8979; --entry:#7BD04A; --measure:#7FA8F5;
    --halo:#19191B;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E0E10; --panel:#19191B; --panel-2:#222225; --sunk:#151517;
  --ink:#F2F2F3; --ink-2:#C4C4C9; --ink-3:#8E8E94;
  --line:#2D2D31; --line-2:#252529;
  --accent:#6CC63E; --accent-2:#35522A; --accent-ink:#111112;
  --primary:#F2F2F3; --primary-ink:#111112;
  --warn:#E5A640; --warn-tint:#33260F; --fail:#F27A67; --fail-tint:#3A1B17; --ok:#6CC66A; --ok-tint:#17291A;
  --surface:var(--panel); --bg:var(--panel); --bg-1:var(--panel); --bg-2:var(--panel-2); --danger:#D32F2F; --danger-hover:#B92828; --danger-press:#A12222; /* SNAPSHOT-1 PORT: Panels and dark mode — the same names in the dark theme. */
  --plan-bg:#161617; --plan-grid:#3A3A3C; --plan-ink:#E4E4E4; --plan-sel:#7BD04A;
  --site-line:#ECECEC; --site-fill:rgba(108,198,62,.12); --excl-line:#D0D0D4; --excl-fill:rgba(25,25,27,.62);
  --ref:#6ED5CC; --check:#E1AE5F; --bad:#EC8979; --entry:#7BD04A; --measure:#7FA8F5;
  --halo:#19191B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
}
/* SNAPSHOT-1 PORT: Panels and dark mode — G's own rules (one block, directly after the dark variables). */
/* Red destructive buttons: white on --danger, darker hover and pressed, greyed when disabled (its reason is the button's title). */
.btn.danger:hover,.btn.primary.danger:hover{background:var(--danger-hover);border-color:var(--danger-hover);color:#fff;opacity:1}
.btn.danger:active,.btn.primary.danger:active{background:var(--danger-press);border-color:var(--danger-press);color:#fff}
.btn.primary.danger{color:#fff;background:var(--danger);border-color:var(--danger)}
.btn.danger:disabled,.btn.primary.danger:disabled{background:var(--panel-2);border-color:var(--line);color:var(--ink-3);opacity:1;cursor:not-allowed}
[data-tool="delete"],[data-tool^="delivery-delete:"],[data-tool^="dimension-remove:"],button[data-pd-delete]{color:#fff !important;background:var(--danger) !important;border-color:var(--danger) !important}
[data-tool="delete"]:hover,[data-tool^="delivery-delete:"]:hover,[data-tool^="dimension-remove:"]:hover,button[data-pd-delete]:hover{background:var(--danger-hover) !important;border-color:var(--danger-hover) !important}
[data-tool="delete"]:active,[data-tool^="delivery-delete:"]:active,[data-tool^="dimension-remove:"]:active,button[data-pd-delete]:active{background:var(--danger-press) !important;border-color:var(--danger-press) !important}
[data-tool="delete"]:disabled,[data-tool^="delivery-delete:"]:disabled,[data-tool^="dimension-remove:"]:disabled,button[data-pd-delete]:disabled{background:var(--panel-2) !important;border-color:var(--line) !important;color:var(--ink-3) !important;cursor:not-allowed}
/* The ? tooltips that hold the shortened wording. */
.q-tip{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:4px;border:1px solid var(--line);border-radius:50%;font:600 10px/1 var(--f-body);color:var(--ink-3);background:var(--panel);vertical-align:1px;cursor:help;flex:none;text-transform:none;letter-spacing:0}
.q-tip:hover{color:var(--ink);border-color:var(--ink-3)}
#hint:empty{display:none}
/* The Lock row, Stacked: "Lock" on the left, the three ticks stacked and lined up. */
.s3-locks.lock-row{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:0 14px;flex-wrap:nowrap}
.lock-row .lock-k{font-weight:600;color:var(--ink-2);padding-top:2px}
.lock-row .lock-ticks{display:grid;grid-template-columns:1fr;gap:4px;justify-items:start}
.lock-row .lock-ticks .tog{margin:0;white-space:nowrap}
.lock-row .lock-inc{color:var(--ink-3)}
.lock-row .lock-inc input{opacity:.55}
/* The line card and the tree row card: theme background, ticks in two columns, each label on one line. */
.row-card .wmix .tog{margin-left:0;white-space:nowrap;min-width:0}
.row-card .s3-row .field{align-self:end}
/* Two-column rows keep each field's own space and line up their inputs. */
.s3-grid,.fm-top,.s3-row,.ps-mix{align-items:end}
.s3-grid>*,.fm-top>*{min-width:0}
.field{min-width:0}
.field select{min-width:0;max-width:100%;text-overflow:ellipsis}
.field input{min-width:0}
.field input,.field select,.field textarea{box-sizing:border-box}
.ps-n select,.ps-c select{box-sizing:border-box;min-width:0}
.s3-grid>.field>select,.fm-top>.field>select,.s3-grid>.field>input,.fm-top>.field>input{max-width:100%}
.ps-n{min-width:0}
.ps-n>span{min-width:0;overflow-wrap:anywhere}
.mnd-hts .mnd-ptlist{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));align-items:end}
.mnd-hts .mnd-ptlist>*{min-width:0}
.mnd-hts>.s3-h{margin-top:10px}
/* The play area and surface panels' rows. */
.pa-shape-row,.pa-gen-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pip-border .pip-g{margin-top:4px}
.sf-more,.curb-more{margin-top:6px}
.curb-top{display:flex;align-items:center;gap:2px}
/* Quantities: one column template for every section's table, so numbers and units line up down a column; long names wrap, never cut. */
.q-blk .qt{table-layout:fixed}
.q-blk .qt td:first-child{width:auto;overflow-wrap:break-word}
.q-blk .qt td:nth-child(2){width:78px}
.q-blk .qt td:nth-child(3){width:56px}
.q-blk .qt td:nth-child(4){width:70px}
.q-blk .qt select.unit{max-width:100%;box-sizing:border-box}
.sec-h>.q-tip{margin-right:auto;margin-left:6px}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 var(--f-body);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}

#app{height:100%;display:flex;flex-direction:column}
.home,.editor{flex:1 1 auto;min-height:0}
.banner{flex:none}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px 8px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;font-weight:650;font-size:15px;letter-spacing:-.01em} /* SNAPSHOT-1 PORT: Feature E — the name beside the new icon: 15 px, weight 650, -0.01em. */
.brand-mark{width:30px;height:30px;margin:-2px 0;flex:none;display:block} /* SNAPSHOT-1 PORT: Feature E — the 30 px icon image (60 px file) replaces the drawn mark; -2px margins keep the old 26 px row height, so nothing below the bar moves (phone rows too). */
.status{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.status.err{color:var(--fail)}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;padding:7px 15px;font:500 13.5px/1.2 var(--f-body);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{background:var(--panel-2)}
.btn:disabled{opacity:.45;cursor:default}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.primary:hover{opacity:.9}
.btn.danger{color:var(--fail)}
.btn.small{padding:5px 11px;font-size:12.5px}
.btn svg{width:16px;height:16px}
.icon-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--panel-2);color:var(--ink)}
.icon-btn:disabled{opacity:.4;cursor:default}
.icon-btn svg{width:17px;height:17px}

/* ---------- home ---------- */
.home{overflow:auto;padding:8px 16px 32px}
.home-inner{max-width:1080px;margin:0 auto}
.home-head{display:flex;align-items:end;gap:12px;margin:18px 0 18px}
.home-head h1{font-size:28px;line-height:1.1;font-weight:650;letter-spacing:-.025em;margin:0;margin-right:auto}
.home-head p{margin:6px 0 0;color:var(--ink-2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;text-align:left;padding:0}
.card:hover{border-color:var(--ink-3)}
.thumb{aspect-ratio:4/3;background:var(--plan-bg) center/cover no-repeat;border-bottom:1px solid var(--line);position:relative}
.thumb.blank{background-image:linear-gradient(var(--plan-grid) 1px,transparent 1px),linear-gradient(90deg,var(--plan-grid) 1px,transparent 1px);background-size:18px 18px;opacity:.9}
.card-body{padding:12px 14px 14px;display:grid;gap:3px}
.card-title{font-weight:600;font-size:15px}
.card-sub{color:var(--ink-2);font-size:13px;min-height:1.45em}
.card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;align-items:center}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
/* SNAPSHOT-1 PORT: Live preview — the card title's reset as a class (was inline all:unset) with a visible focus ring; the
   plan-picture layer (it zooms with the still inside the thumb); the LIVE badge, the same in dark mode because it sits
   on a photo; and no picture menu or text selection on cards with a plan picture. The player sets the moving values. */
.card-title-btn{all:unset;font-weight:600;font-size:15px;cursor:pointer}
.card-title-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.card.lp-live{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.card.lp-live .thumb{overflow:hidden}
.lp-wake{position:absolute;inset:0;transform-origin:50% 50%;will-change:auto}
.card.lp-awake .lp-wake{background:inherit}
.lp-pic{position:absolute;inset:0;background:transparent center/cover no-repeat;opacity:0;pointer-events:none}
.lp-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:999px;background:rgba(17,17,18,.55);color:#fff;font:700 10.5px/1.2 var(--f-body);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.lp-badge svg{display:block;width:12px;height:12px;flex:none}
.card.lp-playing .lp-badge{color:#F3C969}
/* SNAPSHOT-1 PORT: Task 72 live cursors — teammates' pointers, name pills and selection outlines in their own layer in
   #stage (outside #cv, so no export includes them); the eight base colours with white pill text, the lighter shades for
   arrows and outlines on the dark plan; and the coloured who's-here pictures (a 2 px ring round a picture, or a filled
   circle with white 13 px semibold initials), overriding the grey presence rules further down. */
.lc-c0{--lc:#6D4AFF;--lc-dark:#9D8BFF}.lc-c1{--lc:#C2410C;--lc-dark:#FB923C}.lc-c2{--lc:#2563C9;--lc-dark:#60A5FA}.lc-c3{--lc:#0F766E;--lc-dark:#2DD4BF}
.lc-c4{--lc:#BE185D;--lc-dark:#F472B6}.lc-c5{--lc:#A16207;--lc-dark:#FACC15}.lc-c6{--lc:#4D7C0F;--lc-dark:#A3E635}.lc-c7{--lc:#7E22CE;--lc-dark:#C084FC}
.lc-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.lc-layer[hidden],.lc-layer [hidden]{display:none !important}
.stage.in3d .lc-layer,.stage.xp .lc-layer,.stage.capturing .lc-layer{display:none !important}
.lc-ink{color:var(--lc)}
:root[data-theme="dark"] .lc-ink{color:var(--lc-dark)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lc-ink{color:var(--lc-dark)}}
.lc-outlines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc-outline{fill:none;stroke:currentColor;stroke-width:3px;stroke-linejoin:round}
.lc-cursor{position:absolute;left:0;top:0;display:flex;align-items:flex-start;will-change:transform;transition:opacity .4s ease}
.lc-cursor.lc-still{opacity:0}
.lc-arrow{display:block;flex:none;margin:-1.5px 0 0 -1.5px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.lc-name,.lc-tip{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:999px;background:var(--lc);color:#fff;font:600 12px/1.25 var(--f-body);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.lc-name{margin:14px 0 0 -4px}
.lc-tip{position:absolute;left:0;top:0;max-width:280px}
.project-presence .project-avatar[class*="lc-c"]{background:var(--lc);border-color:var(--lc);color:#fff;font-size:13px;font-weight:600}
.project-presence .project-avatar[class*="lc-c"]:has(img){box-shadow:0 0 0 2px var(--lc)}
@media (prefers-reduced-motion:reduce){.lc-cursor{transition:none}}
/* SNAPSHOT-1 PORT: Task 73 live changes — a held item's outline is the holder's solid selection outline (above); where a
   moved piece started, a dashed outline in the mover's colour (1.5 px, dash 5 4, 70%); an outline being drawn, dashed in
   the drawer's colour; the read-only line on a held item's panel; and the small "Reconnecting…" note beside the
   who's-here pictures while the live connection is down. A selected item someone else holds shows no handles. */
.lc-start{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-dasharray:5 4;opacity:.7;stroke-linejoin:round}
.lc-draft{fill:none;stroke:currentColor;stroke-width:2px;stroke-dasharray:6 4;stroke-linejoin:round;stroke-linecap:round}
#stage.lc-sel-held #cv :is(.rot-l,.rot-h,.h-vert,.h-end,.logo-h,.logo-l,.pa-h,.row-h,.row-end,.br-h,.dr-h){display:none}
.lc-held-line{margin:0 0 10px;padding:7px 10px;border-radius:8px;background:var(--sunk);color:var(--ink-2);font-size:12.5px;line-height:1.35}
.lc-reconnecting{position:absolute;right:0;top:calc(100% - 1px);padding:1px 7px;border-radius:999px;background:var(--sunk);color:var(--ink-2);font:500 11px/1.35 var(--f-body);white-space:nowrap;pointer-events:none;z-index:3}
.tag{border-radius:999px;padding:2px 9px;font-size:12px;background:var(--sunk);color:var(--ink-2)}
.tag.ok{background:var(--ok-tint);color:var(--ok)}
.tag.warn{background:var(--warn-tint);color:var(--warn)}
.tag.err{background:var(--fail-tint);color:var(--fail)}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:12px;padding:36px;text-align:center;color:var(--ink-2)}
.empty h2{color:var(--ink);font-size:18px;margin:0 0 6px}

/* ---------- editor ---------- */
.editor{display:grid;grid-template-columns:52px minmax(0,1fr) 336px;grid-template-rows:auto minmax(0,1fr);gap:10px 12px;padding:0 16px 16px;min-height:0}
.rail{grid-column:1;grid-row:1/span 2;align-self:start;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.rail hr{border:0;border-top:1px solid var(--line);margin:4px 2px;width:auto}
.tool{width:38px;height:38px;border-radius:10px;border:0;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;position:relative}
.tool:hover{background:var(--panel-2);color:var(--ink)}
.tool[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.tool:disabled{opacity:.35;cursor:default}
.tool svg{width:20px;height:20px}
.head{grid-column:2;grid-row:1;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 16px 10px;display:grid;gap:2px}
.head input,.head textarea{border:1px solid transparent;background:transparent;border-radius:8px;padding:3px 6px;margin:0 -6px;width:calc(100% + 12px);resize:none;outline:none}
.head input:hover,.head textarea:hover{border-color:var(--line-2)}
.head input:focus,.head textarea:focus{border-color:var(--line);background:var(--panel-2)}
.head .h-title{font-size:21px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.head .h-addr{font-size:14px;color:var(--ink-2)}
.head .h-desc{font-size:13.5px;color:var(--ink-2);line-height:1.45;min-height:1.6em;max-height:7.5em;overflow:auto}
.head ::placeholder{color:var(--ink-3)}
.stage{grid-column:2;grid-row:2;position:relative;min-height:0;background:var(--plan-bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none;display:block}
#cv.pan{cursor:grab} #cv.panning{cursor:grabbing} #cv.draw{cursor:crosshair}
.side{grid-column:3;grid-row:1/span 2;display:flex;flex-direction:column;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.tabs{display:flex;gap:2px;margin:10px 10px 0;background:var(--sunk);border-radius:999px;padding:3px}
.tabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:6px 4px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.panel{overflow:auto;padding:12px 14px 18px;display:grid;gap:14px;align-content:start}
.sec{display:grid;gap:8px}
.sec h3{font-size:13px;font-weight:600;margin:0;color:var(--ink)}
.sec .note{font-size:12.5px;color:var(--ink-3);margin:0}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.metric{background:var(--panel-2);border-radius:10px;padding:9px 11px}
.metric.big{grid-column:1/-1}
.metric .k{font-size:12px;color:var(--ink-3)}
.metric .v{font-size:17px;font-weight:600;letter-spacing:-.01em}
.metric.big .v{font-size:24px}
.metric .s{font-size:12px;color:var(--ink-3)}
.callout{border-radius:10px;padding:10px 12px;background:var(--panel-2);font-size:13px;display:grid;gap:8px}
.callout.warn{background:var(--warn-tint);color:var(--warn)}
.issue{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:start;font-size:13px;padding:8px 10px;border-radius:10px;background:var(--panel-2)}
.issue .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--warn)}
.issue.error .dot{background:var(--fail)}
.issue .acts{grid-column:2;display:flex;gap:6px}
.row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.list{display:grid;gap:4px}
.item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;border:1px solid transparent;background:transparent;width:100%;text-align:left;cursor:pointer;font-size:13px}
.item:hover{background:var(--panel-2)}
.item.sel{border-color:var(--plan-sel);background:var(--panel-2)}
.item .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .aux{color:var(--ink-3);font-size:12px;white-space:nowrap}
.swatch{width:12px;height:12px;border-radius:3px;flex:none;border:1.5px solid var(--site-line)}
.swatch.ex{border-color:var(--excl-line);background:repeating-linear-gradient(45deg,var(--excl-line) 0 1px,transparent 1px 4px)}
.swatch.en{border:0;background:var(--entry);border-radius:2px;height:4px}
.swatch.ck{border:0;border-top:2px dashed var(--check);border-radius:0;height:0}
.field{display:grid;gap:4px;font-size:12.5px;color:var(--ink-2)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 9px;font-size:13.5px;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink-3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px}
.toggle input{width:34px;height:20px;appearance:none;-webkit-appearance:none;background:var(--line);border-radius:999px;position:relative;cursor:pointer;flex:none;transition:background .15s}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.toggle input:checked{background:var(--accent)}
.toggle input:checked::after{transform:translateX(14px)}
input[type=range]{width:100%;accent-color:var(--accent)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;text-align:right}
.diff-ok{color:var(--ok)} .diff-bad{color:var(--fail)}

/* canvas overlays */
.hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);max-width:calc(100% - 24px);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow);pointer-events:none;text-align:center}
.readout .sep{display:inline-block;width:1px;height:10px;background:var(--line);margin:0 8px;vertical-align:-1px}
.readout{position:absolute;right:10px;bottom:10px;font-size:11.5px;color:var(--ink-2);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:3px 8px;pointer-events:none;font-variant-numeric:tabular-nums}
.actionbar{position:absolute;left:50%;top:12px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 14px;box-shadow:var(--shadow);font-size:13px;max-width:calc(100% - 24px);flex-wrap:wrap}
.pop{position:absolute;z-index:5;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px}
.pop h4{margin:0;font-size:13.5px}
.pop .preview{font-size:12px;color:var(--ink-3);min-height:1.4em}
.pop .acts{display:flex;justify-content:flex-end;gap:6px}
.banner{margin:0 16px 8px;border-radius:10px;padding:8px 12px;font-size:13px;background:var(--warn-tint);color:var(--warn)}

/* svg plan styles */
.sheet{fill:var(--plan-bg);stroke:var(--line)}
.g-min{stroke:var(--plan-grid);stroke-width:1}
.g-maj{stroke:var(--plan-grid);stroke-width:1.6}
.b-fill{fill:var(--site-fill)}
.b-line{fill:none;stroke:var(--site-line);stroke-width:2.2;stroke-linejoin:round}
.b-line.sel{stroke:var(--plan-sel);stroke-width:2.8}
.b-line.bad{stroke:var(--bad)}
.x-fill{fill:url(#hatch)}
.hatch-l{stroke:var(--hatch,var(--excl-line));stroke-width:1.1;opacity:.75}
.x-line{fill:var(--excl-fill);stroke:var(--excl-line);stroke-width:1.8;stroke-dasharray:6 4}
.x-line.sel{stroke:var(--plan-sel);stroke-width:2.2}
.x-line.out{stroke:var(--bad)}
.en-line{stroke:var(--entry);stroke-width:7;stroke-linecap:round}
.en-line.sel{stroke:var(--plan-sel);stroke-width:9}
.en-arrow{fill:var(--entry)}
.ref-line{stroke:var(--ref);stroke-width:2.4}
.ref-line.sel{stroke-width:3.4}
.ck-line{stroke:var(--check);stroke-width:2;stroke-dasharray:7 5}
.ck-line.sel{stroke-width:3}
.ms-line{stroke:var(--measure);stroke-width:2}
.cap{stroke-width:2.4}
.draft{fill:none;stroke:var(--plan-sel);stroke-width:2;stroke-dasharray:5 4}
.draft-fill{fill:var(--site-fill)}
.lasso{fill:none;stroke:var(--plan-sel);stroke-width:2}
.preview-line{fill:var(--site-fill);stroke:var(--plan-sel);stroke-width:2.4}
.piece{fill:var(--site-fill);stroke:var(--plan-sel);stroke-width:2;stroke-dasharray:6 4}
.piece.best{stroke-dasharray:none;stroke-width:2.8}
.h-vert{fill:var(--panel);stroke:var(--plan-sel);stroke-width:2}
.h-vert.on{fill:var(--plan-sel)}
.h-mid{fill:var(--panel);stroke:var(--plan-sel);stroke-width:1.4;opacity:.85}
.h-end{fill:var(--panel);stroke-width:2}
.issue-ring{fill:none;stroke:var(--bad);stroke-width:2.4}
.lbl{font:600 12px/1 var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--halo);stroke-width:3.5px;stroke-linejoin:round}
.lbl.ref{fill:var(--ref)} .lbl.ck{fill:var(--check)} .lbl.ms{fill:var(--measure)} .lbl.dim{fill:var(--ink-2);font-weight:500}
/* SNAPSHOT-1 PORT: wave 3 J — Names on this plan (and markup text): each name's group carries its colour's shades
   (client/markup/names.ts); the light or dark one is picked here, so the theme, the Export preview and every picture for a
   file (the light sheet) take the right one. Boxes are solid tints, never see-through. Plans that never set it draw v84's label(). */
.lbl-nm.nm-halo{--nt:var(--hl)}
.lbl-nm.nm-boxed{--nt:var(--btl);--nb:var(--tl);--ne:var(--btl)}
.lbl-nm .nm-t{fill:var(--nt) !important}
.lbl-nm.nm-boxed .nm-t,.lbl-nm.nm-dark .nm-t{stroke:none !important}
.lbl-nm .nm-box{fill:var(--nb);stroke:var(--ne);stroke-width:1px;pointer-events:none}
.lbl-nm.nm-roundedbox .nm-box{stroke-opacity:.45}
.lbl-nm.nm-outlined .nm-t{fill:#FFFFFF !important;stroke:var(--hl) !important;stroke-width:var(--nsw,2.4px);paint-order:stroke} /* SNAPSHOT-1 PORT: task 122 — Outlined is white letters with the colour's edge in light and dark alike (the owner's V4; the edge is 0.15 of the letter size, set on the text, and the heavier top and right are its filter) */
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl-nm.nm-halo,:root[data-theme="dark"] .nm-preview .lbl-nm.nm-halo,:root[data-theme="dark"] .nm-tile-pic .lbl-nm.nm-halo{--nt:var(--hd)}
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl-nm.nm-boxed,:root[data-theme="dark"] .nm-preview .lbl-nm.nm-boxed,:root[data-theme="dark"] .nm-tile-pic .lbl-nm.nm-boxed{--nt:var(--btd);--nb:var(--td);--ne:var(--btd)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl-nm.nm-halo,:root:not([data-theme="light"]) .nm-preview .lbl-nm.nm-halo,:root:not([data-theme="light"]) .nm-tile-pic .lbl-nm.nm-halo{--nt:var(--hd)}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl-nm.nm-boxed,:root:not([data-theme="light"]) .nm-preview .lbl-nm.nm-boxed,:root:not([data-theme="light"]) .nm-tile-pic .lbl-nm.nm-boxed{--nt:var(--btd);--nb:var(--td);--ne:var(--btd)}
}
.sb-line{stroke:var(--ink);stroke-width:2}
.sb-bg{fill:var(--panel);stroke:var(--line);opacity:.92}

/* plan styles: Line and tone (a), Natural color (b), Clear diagram (c) */
.stage[data-style="a"]{--site-line:#111112;--site-fill:rgba(255,255,255,.22);--excl-line:#3F3F44;--excl-fill:rgba(255,255,255,.7);--hatch:#6E6E73;--entry:#111112;--plan-grid:#BDBBB6;--plan-bg:#F2F1EE}
.stage[data-style="b"]{--site-line:#2B3A2C;--site-fill:rgba(91,140,60,.12);--excl-line:#5E5A53;--excl-fill:rgba(230,227,221,.78);--hatch:#9C978F;--entry:#3A8420;--plan-grid:#CFC9BD;--plan-bg:#EEEBE4}
.stage[data-style="c"]{--site-line:#17181A;--site-fill:rgba(240,240,236,.82);--excl-line:#5F6066;--excl-fill:rgba(231,231,234,.92);--hatch:#9A9BA1;--entry:#17181A;--plan-grid:#D9D9DC;--plan-bg:#FAFAF7}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stage[data-style="a"]{--site-line:#ECECEC;--site-fill:rgba(25,25,27,.25);--excl-line:#C9C9CE;--excl-fill:rgba(25,25,27,.7);--hatch:#8E8E94;--entry:#ECECEC;--plan-grid:#3A3A3C;--plan-bg:#161617}
  :root:not([data-theme="light"]) .stage[data-style="b"]{--site-line:#C9D8C2;--site-fill:rgba(108,198,62,.12);--excl-line:#B8B2A8;--excl-fill:rgba(37,37,38,.7);--hatch:#8E887E;--entry:#7BD04A;--plan-grid:#3A3A3C;--plan-bg:#161617}
  :root:not([data-theme="light"]) .stage[data-style="c"]{--site-line:#F2F2F3;--site-fill:rgba(30,30,32,.82);--excl-line:#A9AAB0;--excl-fill:rgba(45,45,48,.92);--hatch:#77787E;--entry:#F2F2F3;--plan-grid:#2D2D31;--plan-bg:#121214}
}
:root[data-theme="dark"] .stage[data-style="a"]{--site-line:#ECECEC;--site-fill:rgba(25,25,27,.25);--excl-line:#C9C9CE;--excl-fill:rgba(25,25,27,.7);--hatch:#8E8E94;--entry:#ECECEC;--plan-grid:#3A3A3C;--plan-bg:#161617}
:root[data-theme="dark"] .stage[data-style="b"]{--site-line:#C9D8C2;--site-fill:rgba(108,198,62,.12);--excl-line:#B8B2A8;--excl-fill:rgba(37,37,38,.7);--hatch:#8E887E;--entry:#7BD04A;--plan-grid:#3A3A3C;--plan-bg:#161617}
:root[data-theme="dark"] .stage[data-style="c"]{--site-line:#F2F2F3;--site-fill:rgba(30,30,32,.82);--excl-line:#A9AAB0;--excl-fill:rgba(45,45,48,.92);--hatch:#77787E;--entry:#F2F2F3;--plan-grid:#2D2D31;--plan-bg:#121214}
.stage[data-style="a"] #bg{filter:grayscale(1) contrast(.9) brightness(1.08)}
.stage[data-style="b"] #bg{filter:saturate(.55) brightness(1.06)}
.stage[data-style="c"] #bg{filter:grayscale(1) brightness(1.1)}
.stage[data-style="a"] .b-line{stroke-width:2.6}
.stage[data-style="c"] .b-line{stroke-width:3}
.style-switch{position:absolute;left:10px;top:10px;display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow);z-index:2}
.style-switch button{border:0;background:transparent;border-radius:999px;padding:5px 11px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer;min-height:30px}
.style-switch button:hover{color:var(--ink)}
.style-switch button[aria-checked="true"]{background:var(--primary);color:var(--primary-ink)}

/* ---------- catalog and rules ---------- */
.studio{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 16px 16px;gap:10px}
.st-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.st-pre{display:flex;align-items:center;gap:8px;font:600 13px/1.2 var(--f-body);color:var(--ink)}
.st-pre select{min-height:32px;max-width:340px}
.st-status{font:500 12.5px/1.3 var(--f-body);color:var(--ink-2);margin-left:auto}
.st-note{flex-basis:100%;margin:0;font:400 12.5px/1.4 var(--f-body);color:var(--ink-2)}
.st-note:empty{display:none}
.st-body{display:grid;grid-template-columns:168px minmax(0,1fr) minmax(300px,420px);gap:10px;flex:1;min-height:0}
.st-nav{display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.st-nav button{border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:8px;font:500 13.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer;min-height:36px}
.st-nav button:hover{background:var(--sunk);color:var(--ink)}
.st-nav button[aria-current="page"]{background:var(--primary);color:var(--primary-ink)}
.st-main,.st-side{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;overflow:auto;min-height:0}
.st-main h3,.st-side h3{margin:0 0 6px;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.st-main h3.cat{margin:18px 0 8px}.st-main h3.cat:first-child{margin-top:0}
.st-side h4,.st-main h4{margin:14px 0 6px;font:600 12.5px/1.3 var(--f-body);color:var(--ink-2)}
.st-fixtures,.tpl-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer;min-height:32px}
.chip:hover{color:var(--ink)}
.chip[aria-selected="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.st-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.st-styles{display:flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px}
.st-styles button{border:0;background:transparent;border-radius:999px;padding:5px 11px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer;min-height:30px}
.st-styles button[aria-checked="true"]{background:var(--primary);color:var(--primary-ink)}
.btn.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.st-tools select{min-height:32px}
.st-canvas-wrap{background:var(--plan-bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.st-canvas{display:block;width:100%;height:auto;max-height:62vh;aspect-ratio:auto}
.st-side .st-canvas{max-height:300px}
.st-canvas .site{fill:var(--site-fill);stroke:var(--site-line);stroke-width:2;vector-effect:non-scaling-stroke}
.st-canvas .space{stroke-width:1.2;stroke-dasharray:6 3;vector-effect:non-scaling-stroke}
.st-canvas .space.nea{fill:rgba(91,140,60,.14);stroke:#4F7A2E}
.st-canvas .space.garden{fill:rgba(176,122,71,.12);stroke:#8A6239}
.st-canvas .excl{fill:var(--excl-fill);stroke:var(--excl-line);stroke-width:1.2;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.st-canvas .focus-ring{fill:none;stroke:#C2361F;stroke-width:2.2;vector-effect:non-scaling-stroke}
.st-canvas .pc.bad > :first-child{filter:drop-shadow(0 0 0.25px #C2361F)}
.st-canvas.tpl{touch-action:none}
.st-canvas.tpl .pc{cursor:grab}
.st-canvas.tpl .pc:active{cursor:grabbing}
.st-canvas.tpl .pc .hit{fill:transparent;stroke:none}
.st-canvas.tpl .pc.sel .hit{fill:rgba(42,95,166,.10);stroke:#2A5FA6;stroke-width:1.6;vector-effect:non-scaling-stroke}
.st-canvas.tpl .pc.bad .hit{stroke:#C2361F;stroke-width:1.8;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.st-canvas .tpl-env{fill:rgba(217,130,43,.06);stroke:#D9822B;stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.st-canvas .meet{fill:#2A6FD6;pointer-events:none}
.st-canvas .tpl-env{pointer-events:none}
.st-canvas .meet.gap{fill:#62479A}
.st-canvas .broken{stroke:#C2361F;stroke-width:1.6;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:none}
.tog.snap{margin-left:0}
.st-canvas .pid{font:600 0.7px var(--f-body);fill:var(--ink);text-anchor:middle;pointer-events:none}
.st-counts{margin:8px 2px 0;font:400 12.5px/1.4 var(--f-body);color:var(--ink-2)}
.st-counts b{color:var(--ink)}
.st-issues{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.st-issue{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 10px;cursor:pointer;font:400 12.5px/1.4 var(--f-body);color:var(--ink)}
.st-issue:hover{border-color:var(--line-2)}
.st-issue .sev{grid-row:span 2;align-self:start;font:600 11px/1 var(--f-body);padding:4px 6px;border-radius:6px;background:var(--warn-tint);color:var(--warn)}
.st-issue.integrity .sev,.st-issue.required .sev{background:var(--fail-tint);color:var(--fail)}
.st-issue .basis{color:var(--ink-3);font-size:11.5px}
.st-ok{margin:10px 0 0;font:500 13px/1.4 var(--f-body);color:var(--ok)}
.rule{border-bottom:1px solid var(--line);padding:12px 0}.rule:first-child{padding-top:0}
.rule .rh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rule .rh h3{margin:0}
.rule .basis{margin:2px 0 8px;font:400 12px/1.4 var(--f-body);color:var(--ink-2)}
.rule .tag.integrity{background:var(--sunk);color:var(--ink-2)}
.rule .tag.preference{background:var(--warn-tint);color:var(--warn)}
.tog{display:inline-flex;align-items:center;gap:6px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2);margin-left:auto}
.rr{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:4px 0}
.rr > span:first-child{min-width:150px;font:500 12.5px/1.3 var(--f-body);color:var(--ink)}
.rr.note > span{color:var(--ink-2);font-weight:400}
.sub{display:inline-flex;align-items:center;gap:6px;font:400 12px/1.2 var(--f-body);color:var(--ink-2)}
.num{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);overflow:hidden}
.num input{width:64px;border:0;background:transparent;padding:6px 6px;font:500 13px/1.2 var(--f-body);color:var(--ink);min-height:32px}
.num input:disabled{color:var(--ink-3)}
.num .unit{padding:0 8px 0 2px;font:400 12px/1 var(--f-body);color:var(--ink-3)}
.err{margin:6px 0 0;font:500 12.5px/1.4 var(--f-body);color:var(--fail)}
.err:empty{display:none}
.ptable{display:flex;flex-direction:column}
.prow{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr) auto;gap:6px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.pname{display:flex;flex-direction:column;gap:2px}.pname b{font:600 13px/1.3 var(--f-body);color:var(--ink)}
.roles{font:400 11.5px/1.3 var(--f-body);color:var(--ink-3)}
.pdims{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.src{display:flex;align-items:center;gap:6px;font:400 12px/1.2 var(--f-body);color:var(--ink-2)}
.src select{min-height:32px}
.prow .err{grid-column:1/-1}
.note{font:400 12.5px/1.4 var(--f-body);color:var(--ink-2)}
.insp .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.insp label{display:flex;flex-direction:column;gap:4px;font:500 12px/1.2 var(--f-body);color:var(--ink-2)}
.insp label.tog{flex-direction:row;margin:8px 0 0}
.insp .wide{margin-top:8px}.insp .wide select{min-height:32px}
.pair{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 0}
.pair span{font:600 12.5px/1.2 var(--f-body);color:var(--ink)}
.insp .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn.link,.link{border:0;background:none;padding:0;color:var(--primary);text-decoration:underline;cursor:pointer;font:inherit}
.iss-h{margin-top:14px !important}
.plist{display:flex;flex-direction:column;gap:10px}
.pcard{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.pcard.cur{border-color:var(--primary)}
.vers{display:flex;flex-wrap:wrap;gap:4px}.ver{font:500 11.5px/1 var(--f-body);background:var(--sunk);color:var(--ink-2);border-radius:6px;padding:4px 6px}
@media (max-width:1100px){.st-body{grid-template-columns:minmax(0,1fr);overflow:auto}.st-nav{flex-direction:row;flex-wrap:wrap}.st-main,.st-side{overflow:visible}}

/* dialogs & toasts */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);display:grid;place-items:center;z-index:50;padding:16px}
.dialog{width:min(520px,100%);max-height:calc(100% - 32px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:20px;display:grid;gap:14px}
.dialog h2{margin:0;font-size:19px;letter-spacing:-.015em}
.dialog p{margin:0;color:var(--ink-2)}
.dialog .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.drop{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;display:grid;gap:8px;justify-items:center;cursor:pointer;background:var(--panel-2)}
.drop.over{border-color:var(--accent);background:var(--ok-tint)}
.drop strong{font-size:14px}
.drop span{font-size:12.5px;color:var(--ink-3)}
.or{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}
.err-text{color:var(--fail);font-size:13px}
.toasts{position:fixed;left:50%;bottom:0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;gap:8px;z-index:60;pointer-events:none;width:min(560px,calc(100% - 32px))}
.toast{background:var(--primary);color:var(--primary-ink);border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow)}
.toast.err{background:var(--danger);color:#fff} /* SNAPSHOT-1 PORT: Panels and dark mode — white on the button red in both themes. */

@media (max-width:900px){
  body{overflow:auto}
  #app{height:auto;min-height:100%}
  .editor{flex:none}
  .editor{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 62vh auto;padding:0 10px 16px}
  .head{grid-column:1;grid-row:1}
  .rail{grid-column:1;grid-row:2;flex-direction:row;overflow-x:auto;align-self:stretch}
  .rail hr{border-top:0;border-left:1px solid var(--line);margin:2px 4px}
  .stage{grid-column:1;grid-row:3}
  .side{grid-column:1;grid-row:4;max-height:none}
  .topbar{padding:10px 10px 8px}
  .hint{top:56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* ---------- Stage 3: pieces, paths, surfaces and spaces on the plan ---------- */
#ov .sf{fill-opacity:.55;stroke:rgba(0,0,0,.28);stroke-width:1}
[data-style="a"] #ov .sf,#ov.style-a .sf{fill-opacity:.45}
#ov .sf.layer{fill-opacity:.38;stroke-dasharray:7 4;stroke-width:1.6;stroke:var(--ink-2)}
#ov .sf.over{stroke:#2F7D3C;stroke-width:2;stroke-dasharray:2 4 9 4}
#ov .sf.sel{stroke:var(--plan-sel);stroke-width:2.2;stroke-dasharray:none}
#ov .spc{fill:none;stroke:#6B5BA8;stroke-width:1.8;stroke-dasharray:9 5}
#ov .spc.garden{stroke:#3E8E4E} #ov .spc.hybrid{stroke:#2C7F84}
#ov .spc.sel{stroke:var(--plan-sel);stroke-width:2.6}
.lbl.space{fill:#5B4C96;font-size:11.5px} .lbl.tag{font-size:10.5px;fill:#7A4A12} .lbl.tag.over{fill:#2F7D3C}
#ov .pth{fill:#ECE6DA;fill-opacity:.9;stroke:#8A7F6C;stroke-width:1.2;vector-effect:non-scaling-stroke}
#ov .pth.functional{fill:#FFFFFF;fill-opacity:.5;stroke-dasharray:6 4}
#ov .pth.sel{stroke:var(--plan-sel);stroke-width:2.4}
#ov .pth.bad{stroke:var(--fail);stroke-width:2.2}
#ov .pth-c{fill:none;stroke:#8A7F6C;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;opacity:.7}
#ov .pad{fill:#ECE6DA;fill-opacity:.85;stroke:#8A7F6C;stroke-width:1.2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
#ov .pad.sel{stroke:var(--plan-sel);stroke-width:2.4}
#ov .pc.existing{opacity:.92} #ov .pc.removal{opacity:.45}
#ov .pc-sel{fill:none;stroke:var(--plan-sel);stroke-width:2;vector-effect:non-scaling-stroke}
#ov .pc-bad{fill:none;stroke:var(--fail);stroke-width:2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
#ov .ftg .clr{vector-effect:non-scaling-stroke}
.s3-h{margin:16px 0 6px;font:600 12px/1.2 var(--f-body);color:var(--ink-2);text-transform:none}
.s3-pal{display:flex;flex-wrap:wrap;gap:6px}
.s3-pal .chip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.s3-row{display:flex;align-items:flex-end;gap:8px;margin:8px 0;flex-wrap:wrap}
.s3-row .field{flex:1;min-width:150px}
.s3-preset{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 10px;font-size:13px;color:var(--ink-2)}
.s3-insp{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 12px;background:var(--panel-2)}
.s3-insp-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.s3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.s3-locks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:8px 0;font-size:12.5px;color:var(--ink-2)}
.s3-acts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 8px;margin-top:8px}
.s3-acts .btn{align-self:flex-end}
.s3-acts .muted{align-self:center}
.s3-iss{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.s3-iss li{border-left:3px solid var(--fail);background:var(--fail-tint);padding:6px 9px;border-radius:6px;font-size:12.5px}
.s3-iss li.preference{border-left-color:var(--warn);background:var(--warn-tint)}
.s3-iss li.existing{border-left-color:var(--ink-3);background:var(--sunk)}
.s3-sum{margin:6px 0 4px;font-size:13px}
.s3-sum .bad,.qt .bad{color:var(--fail)} .s3-sum .ok,.ok{color:var(--ok)}
.s3-list{list-style:none;padding:0;margin:0;display:grid;gap:2px;font-size:13px}
.s3-list li.on{font-weight:600}
.s3-chg{margin:6px 0 0 18px;font-size:12.5px}
.qt{width:100%;border-collapse:collapse;font-size:12.5px}
.qt td{padding:5px 4px;border-bottom:1px solid var(--line)}
.qt td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qt .unit{font:500 12px/1 var(--f-body);color:var(--ink-2)}
.qt select.unit{padding:2px 4px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.qt .src{color:var(--ink-3);font-size:11.5px;white-space:nowrap}
.muted.small,.small{font-size:12px}

#ov .pc-ring{fill:none;stroke:var(--plan-sel);stroke-width:2.2}
.lbl.surf{fill:var(--ink);font-weight:600;opacity:.75}
.stage[data-style="c"] #ov .sf{fill-opacity:.7}
#ov .prot{fill:rgba(46,125,50,.06);stroke:#2E7D32;stroke-width:1.6;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.s3-preset + .tog,.panel>.tog{display:block;margin:6px 0;font-size:12.5px}

/* Plan tab, rail group, rotate handle, connection dots */
.sec{border-top:1px solid var(--line)}
.sec-h{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 2px;font:600 13px/1.2 var(--f-body);color:var(--ink);cursor:pointer}
.sec-h::after{content:'';width:7px;height:7px;border-right:1.6px solid var(--ink-2);border-bottom:1.6px solid var(--ink-2);transform:rotate(-45deg);transition:transform .15s}
.sec-h.open::after{transform:rotate(45deg)}
.sec-h:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.sec-b{padding:0 0 12px}
.s3-insp .sec-h{border-top:1px solid var(--line);margin-top:6px}
.s3-insp .push,.push{margin-left:auto}
.s3-top{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
.s3-top .field{flex:1;min-width:150px}
.s3-foot{margin-top:14px}
.tpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.tpick{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;font:500 12px/1.2 var(--f-body);color:var(--ink-2)}
.tpick svg{width:100%;height:58px}
.tpick:hover{border-color:var(--ink-3);color:var(--ink)}
.tpick.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary) inset;color:var(--ink)}
.tpick:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.rail .tool.folded{display:none}
.rail .tool.grp{position:relative;flex-direction:column;gap:1px;height:auto;padding:6px 0}
.rail .tool.grp .grp-l{font:600 9.5px/1 var(--f-body);letter-spacing:.02em}
.rail .tool.grp.open{background:var(--sunk)}
#ov .meet{fill:#2A6FD6;stroke:#fff;stroke-width:1.5}
#ov .rot-l{stroke:var(--plan-sel);stroke-width:1.2;stroke-dasharray:3 3}
#ov .rot-h{color:#fff;cursor:grab}
#ov .rot-h circle{fill:var(--plan-sel);stroke:#fff;stroke-width:1.5}
#ov .pc-warn{fill:none;stroke:var(--warn);stroke-width:2;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
#ov .warn-ring{fill:none;stroke:var(--warn);stroke-width:2;stroke-dasharray:4 3}
.style-switch .ss-g{display:flex;gap:2px}
.style-switch .ss-sep{width:1px;background:var(--line);margin:4px 3px}
.style-switch .ss-dims[aria-pressed="true"]{background:var(--sunk);color:var(--ink)}
#ov .dim-l{stroke:#2D5BA8;stroke-width:1.2}
#ov .dim-bg{fill:var(--panel);stroke:#2D5BA8;stroke-width:1;cursor:text}
#ov .dimlbl{font:600 11.5px/1 var(--f-body);fill:#2D5BA8;cursor:text}
.lbl.fit{fill:#2F7D3C;font-size:12px} .lbl.fit.warn{fill:#A35A00}
.warn-t{color:var(--warn)} /* SNAPSHOT-1 PORT: Panels and dark mode — the theme's orange. */
#ov .marq{fill:rgba(45,91,168,.08);stroke:#2D5BA8;stroke-width:1.2;stroke-dasharray:5 3}
.dim-pop{position:absolute;z-index:6;display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid #2D5BA8;border-radius:10px;padding:4px 8px;box-shadow:var(--shadow);font:500 12.5px/1 var(--f-body);color:var(--ink-2)}
.dim-pop input{width:72px;border:0;background:transparent;font:600 13px/1.2 var(--f-body);color:var(--ink);outline:none}
.s3-pal.ico{gap:6px}
.chip.ico{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 5px}
.chip.ico svg.ico{width:26px;height:26px;flex:none;border-radius:6px;background:var(--plan-bg)}
.chip.ico .muted{font-weight:400}
#ov .bld{fill:#D8D3CB;fill-opacity:.95;stroke:#3A3A3C;stroke-width:1.6}
.stage[data-style="a"] #ov .bld{fill:#E6E6E6} .stage[data-style="c"] #ov .bld{fill:#E4E4E7;stroke:#17181A}
#ov .bld.sel,#ov .fence.sel,#ov .wall.sel{stroke:var(--plan-sel)}
#ov .fence{fill:none;stroke:#EBA2C6;stroke-width:2.6}
#ov .wall{fill:none;stroke:#4A4A4D;stroke-width:4;stroke-linecap:square}
.lbl.bldl{fill:#3A3A3C;font-weight:600}
#ov .ghost{opacity:.55;pointer-events:none}
.dnd-on,.dnd-on *{user-select:none;-webkit-user-select:none;cursor:grabbing!important}
#panel .chip.ico,#panel .tpick{cursor:grab}
#ov .fence.prop{stroke:#DB4F93;stroke-width:3.4}
#ov .fence.solid{stroke-width:4.2;stroke-linecap:square}
#ov .fence.solid.prop{stroke-width:4.6}
#ov .wall.prop{stroke:#6B4A2B}
#ov .fmarks .fpost{fill:#EBA2C6;stroke:#C7709C;stroke-width:1}
#ov .fmarks.prop .fpost{fill:#DB4F93;stroke:#A92F6C}
#ov .fmarks .fx{fill:none;stroke:#EBA2C6;stroke-width:1.8;stroke-linecap:round}
#ov .fmarks.prop .fx{stroke:#DB4F93}
#ov .fmarks.sel .fpost{stroke:var(--plan-sel)}
.tsub{margin:12px 0 6px;font:600 12px/1.2 var(--f-body);color:var(--ink-2)}

/* tree rows */
#ov .row-h{cursor:grab}
#ov .row-h circle{fill:#fff;stroke:var(--plan-sel);stroke-width:2}
#ov .row-h circle.dot{fill:var(--plan-sel);stroke:none}
#ov .row-end{fill:#fff;stroke:var(--plan-sel);stroke-width:2;cursor:move}
#ov .row-line{stroke:var(--plan-sel);stroke-width:1.5;stroke-dasharray:6 4;fill:none}
#ov .row-ghost{fill:rgba(70,115,78,.16);stroke:var(--plan-sel);stroke-width:1.2;stroke-dasharray:4 3}
#ov .row-trunk{fill:#5A4030;stroke:none}
.row-card{position:absolute;z-index:30;width:252px;background:var(--surface,#fff);color:var(--ink,#111);border:1px solid var(--line,#ddd);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:12px 12px 10px;font:13px/1.35 var(--f-body,system-ui)}
.row-card .row-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.row-card .x{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:var(--ink-2,#555);padding:2px 6px}
.row-card .field{margin-top:6px}
.row-card .s3-row{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px}
.row-card .s3-row .field{flex:1 1 0;min-width:0}
.row-card .s3-row .field input{width:100%}
.row-card .warn{color:var(--warn-ink,#8a5300);background:var(--warn-bg,#fff4e0);border-radius:8px;padding:6px 8px;margin:8px 0 0}
.row-card .row-card-f{display:flex;justify-content:space-between;gap:8px;margin-top:10px}

/* the Generate tab */
.tabs button{padding:6px 2px;font-size:12px}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:4px}
.seg3 button{display:flex;flex-direction:column;align-items:center;gap:1px;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 4px;cursor:pointer;font:500 12.5px/1.2 var(--f-body);color:var(--ink)}
.seg3 button span{font-size:11px;color:var(--ink-2);font-weight:400}
.seg3 button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.gen-more{margin:8px 0;border-top:1px solid var(--line);padding-top:6px}
.gen-more summary{cursor:pointer;font:600 12.5px/1.4 var(--f-body);color:var(--ink)}
.gen-mix{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;margin:4px 0}
.gen-mix input{width:62px}
.gen-x{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:4px 0;font-size:12.5px}
.gen-x.add select{flex:1;min-width:0}.gen-x.add input{width:56px}
.gen-go{display:flex;gap:8px;margin-top:10px}
.gen-status .gen-running{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.gen-status .gen-msg{background:var(--sunk);border-radius:8px;padding:6px 8px}
.spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

.card-acts{display:flex;gap:6px}

/* see-through trees: a canopy over other pieces fades so they show */
#cv g.pc.thru{opacity:.4;transition:opacity .12s}

/* log and stump lines */
.ftg .wline{fill:none;stroke:var(--plan-sel);stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.row-card .wmix{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;margin:6px 0}
.row-card .wmix .tog{font-size:12.5px}
.tpick .tthumb{width:60px;height:40px}

#ov .line-path{fill:none;stroke:var(--plan-sel);stroke-width:1.2;stroke-dasharray:5 4;opacity:.8;pointer-events:none}
#ov .line-pt{fill:#fff;stroke:var(--plan-sel);stroke-width:2;cursor:move}
#ov .line-pt.end{fill:var(--plan-sel);stroke:#fff;stroke-width:2}
#ov .line-add{cursor:copy}
#ov .line-add circle{fill:#fff;stroke:var(--plan-sel);stroke-width:1.5}
#ov .line-add path{fill:none;stroke:var(--plan-sel);stroke-width:1.6}

#ov .ctrl-poly{fill:none;stroke:var(--plan-sel);stroke-width:1;stroke-dasharray:3 4;opacity:.55;pointer-events:none}

/* the shape bar: Straight or Curved edges, right on the plan */
.shape-bar{position:absolute;z-index:31;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;padding:6px 10px;background:var(--surface,#fff);color:var(--ink,#111);border:1px solid var(--line,#ddd);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.14);font:12.5px/1.3 var(--f-body,system-ui)}
.shape-bar .sb-k{font-weight:600}
.shape-bar .sb-seg{display:inline-flex;border:1px solid var(--line,#ddd);border-radius:9px;overflow:hidden}
.shape-bar .sb-seg button{border:0;background:transparent;padding:5px 10px;font:500 12.5px/1 var(--f-body,system-ui);color:var(--ink,#111);cursor:pointer}
.shape-bar .sb-seg button+button{border-left:1px solid var(--line,#ddd)}
.shape-bar .sb-seg button.on{background:var(--ink,#111);color:var(--surface,#fff)}
.shape-bar .sb-tip{color:var(--ink-2,#666);font-size:12px;white-space:nowrap}
.shape-bar .sb-btn{border:1px solid var(--line,#ddd);border-radius:8px;background:transparent;color:var(--ink,#111);padding:4px 9px;font:500 12px/1 var(--f-body,system-ui);cursor:pointer}
.shape-bar .sb-btn:hover{background:var(--line,#eee)}

/* Stage 5: alternatives to compare */
.alt-cards{display:grid;gap:10px;margin-top:8px}
.alt-card{display:grid;grid-template-columns:112px 1fr;gap:10px;align-items:start;padding:8px;border:1px solid var(--line,#ddd);border-radius:10px;background:var(--surface,#fff)}
.alt-card.on{border-color:var(--accent,#3F7D3A);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent,#3F7D3A) 25%,transparent)}
.alt-thumb svg{width:112px;height:84px;display:block;border-radius:6px;background:var(--bg-2,#f4f1ea)}
.alt-body p{margin:3px 0}
.alt-body .row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.alt-cards.compact .alt-card{grid-template-columns:72px 1fr}
.alt-cards.compact .alt-thumb svg{width:72px;height:54px}

.brief-in{width:100%;box-sizing:border-box;font:13px/1.4 var(--f-body,system-ui);padding:6px 8px;border:1px solid var(--line,#ddd);border-radius:8px;resize:vertical}

/* labels you can move: hold Shift, Ctrl or Cmd and drag */
.lbl[data-lbl]{pointer-events:auto}
.mod-held .lbl[data-lbl]{cursor:move}
.shape-bar .sb-lock{padding:4px 7px;color:var(--ink-2,#666);display:inline-flex;align-items:center}
.shape-bar .sb-lock{gap:5px;padding:4px 9px 4px 7px;color:var(--ink,#111)} /* SNAPSHOT-1 PORT: task 120 — the word "Lock" beside the icon */
.lock-ic{vertical-align:-1px;opacity:.6}

/* ---------- Stage 5.5: steps, a labeled toolbar, the library drawer ---------- */
.editor{grid-template-columns:76px minmax(0,1fr) 336px;grid-template-rows:minmax(0,1fr)}
.rail{grid-row:1;padding:6px 5px;gap:2px}
.stage{grid-row:1}
.side{grid-row:1}
.tool{width:64px;height:auto;min-height:50px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.tool .tl{font-size:10.5px;font-weight:500;line-height:1.15;text-align:center;white-space:nowrap}
.tool[aria-disabled="true"]{opacity:.4}
.tool.add{background:var(--accent-2);color:#2F6A16}
.tool.add.on{background:var(--accent);color:var(--accent-ink)}
.tb-plan{display:flex;flex-direction:column;min-width:0;flex:0 1 360px;position:relative}
.tb-plan .h-title{font:600 15px/1.25 var(--f-body);color:var(--ink);border:0;background:transparent;padding:2px 6px;border-radius:6px;min-width:0;width:100%;box-sizing:border-box}
.tb-plan .h-title:hover,.tb-plan .h-title:focus{background:var(--panel-2);outline:none}
.tb-sub{display:flex;align-items:center;gap:6px;min-width:0}
.tb-plan .h-addr{font:400 12.5px/1.3 var(--f-body);color:var(--ink-2);border:0;background:transparent;padding:1px 6px;border-radius:6px;min-width:0;flex:1 1 auto}
.tb-plan .h-addr:hover,.tb-plan .h-addr:focus{background:var(--panel-2);outline:none}
.details-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:360px;max-width:calc(100vw - 32px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px}
.details-pop .h-desc{width:100%;box-sizing:border-box;font:15px/1.45 var(--f-body);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 10px;resize:vertical;min-height:84px;max-height:200px;overflow:auto}
.steps{margin:0 auto;display:flex;gap:3px;background:var(--panel-2);border-radius:999px;padding:4px;flex-wrap:wrap}
.steps button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:500 13px var(--f-body);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;gap:6px}
.steps button:hover{color:var(--ink)}
.steps button .n{font-size:11px;opacity:.75}
.steps button.on{background:var(--primary);color:var(--primary-ink);font-weight:600}
.tabs[hidden]{display:none}
.zoombar{position:absolute;right:10px;bottom:10px;z-index:6;display:flex;align-items:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow)}
.zoombar .zb{border:0;background:transparent;border-radius:999px;min-width:32px;height:30px;padding:0 8px;font:600 14px var(--f-body);color:var(--ink);cursor:pointer}
.zoombar .zb.fit{font-size:12.5px;font-weight:500}
.zoombar .zb:hover{background:var(--panel-2)}
.readout{right:150px}
.style-switch{left:auto !important;right:10px}
.drawer{position:absolute;left:0;top:0;bottom:0;width:332px;max-width:calc(100% - 40px);z-index:20;background:var(--panel);border-right:1px solid var(--line);box-shadow:8px 0 24px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:10px;padding:14px;overflow:auto;box-sizing:border-box}
.drawer .dr-h{display:flex;align-items:center;justify-content:space-between}
.drawer .dr-h strong{font-size:15px}
.drawer .dr-q{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:14px var(--f-body);background:var(--panel);color:var(--ink)}
.drawer .dr-cats{display:flex;flex-wrap:wrap;gap:6px}
.drawer .dr-cats .chip.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.drawer [hidden]{display:none !important}
.stage.drawer-open .style-switch{right:10px}
.lock-chip{position:absolute;left:10px;bottom:62px;z-index:6;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 12px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow)}
.stage.drawer-open .lock-chip{left:min(348px,calc(100% - 180px))}
.lock-chip .lc-btn{border:0;background:var(--panel-2);border-radius:999px;padding:6px 12px;font:600 12.5px var(--f-body);color:var(--ink);cursor:pointer}
.lock-chip .lc-btn:hover{background:var(--line)}
@media (max-width:900px){.editor{grid-template-columns:1fr}.steps{order:5;margin:6px 0 0;width:100%}}
/* while you drag a piece out of the library, the drawer steps aside so the whole plan is there to drop on */
.dnd-on .drawer{opacity:0;pointer-events:none;transition:opacity .12s}

/* panels never grow wider than themselves: lists and sections shrink to fit, and long names wrap */
.panel .sec,.panel .list{grid-template-columns:minmax(0,1fr)}
.panel .item{min-width:0}
.item.vrow{align-items:flex-start}
.item.vrow .grow{white-space:normal;overflow:visible;display:flex;flex-direction:column;gap:2px}
.item.vrow .vlabel{overflow-wrap:anywhere;line-height:1.35}
.item.vrow .btn{flex:none}

/* ---------- Stage 6: the plan as it will print ---------- */
.xp-noimage #bg{display:none}
.xp-nogrid #cv [class^="grid"]{display:none}
.xp-nolabels #cv text.lbl{display:none}
.xp-nodims #cv .dim-l,.xp-nodims #cv .dim-bg,.xp-nodims #cv .dimlbl{display:none}
.stage.xp #ov .h-vert,.stage.xp #ov .h-mid,.stage.xp #ov .row-end{display:none}
/* SNAPSHOT-1 PORT: Task 111 — the .xp-card rules are gone: no card over the preview (the approval line still prints on the sheet). */
.xp-togs{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:6px 0}
.xp-leg{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:13px}
.xp-leg li{display:flex;gap:8px;align-items:baseline}
.xp-leg b{width:18px}
.xp-btns{display:grid;gap:6px}
.xp-btns .btn{justify-content:center}

/* Catalog and rules: vendors and contractors, one card per company */
.vd-list{display:grid;gap:12px;margin:12px 0}
.vd-co{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2);display:grid;gap:8px}
.vd-r1{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:14px;align-items:center}
.vd-r1 input:first-child{font-weight:600}
.vd-r3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vd-co input:not([type=checkbox]){border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:13.5px var(--f-body);min-width:0;width:100%;box-sizing:border-box;background:var(--panel);color:var(--ink)}
.vd-co .tog{white-space:nowrap}
.vd-t{width:100%;border-collapse:collapse;font-size:13px}
.vd-t th,.vd-t td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line-2)}
.vd-t select{max-width:100%}
.vd-t tr.vd-g th{padding-top:14px;font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
@media (max-width:900px){.vd-r1{grid-template-columns:1fr auto auto}.vd-r1 .link{grid-column:1/-1;justify-self:start}.vd-r3{grid-template-columns:1fr}}
.st-body.no-side{grid-template-columns:168px minmax(0,1fr)}
.st-body.no-side .st-side{display:none}
/* every menu follows the app's theme, whatever the computer's own setting */
select{background-color:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 28px 5px 9px;min-height:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E8E93' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:10px 6px;cursor:pointer}
select:disabled{opacity:.55;cursor:default}
select option{background-color:var(--panel);color:var(--ink)}
input[type=text],input[type=search],input[type=email],input[type=tel],input[type=number],input:not([type]),textarea{background-color:var(--panel);color:var(--ink)}
/* the scale-setting marker is a working mark, not part of the plan you hand out */
.stage.xp #cv .ref-line,.stage.xp #cv text.ref{display:none}
.stage.capturing #cv .sb-bg,.stage.capturing #cv .sb-line,.stage.capturing #cv .sb-t{display:none}

/* Catalog and rules: prices */
.pr-t input{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:13px var(--f-body);background:var(--panel);color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.pr-t input.pr-n{max-width:96px;text-align:right}
.pr-t td{vertical-align:middle}
.pr-t tr.pr-add td{background:var(--panel-2);padding:8px 10px}
.pr-on{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;align-items:center;margin-bottom:6px;max-width:620px}
.pr-sample{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2);display:grid;gap:6px;margin:8px 0 14px}
.pr-sample .pr-s{display:flex;gap:8px;align-items:flex-start;font-size:13px}

/* ---------- Stage 7: estimates ---------- */
.est-sum{display:grid;gap:4px;margin:8px 0}
.est-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;font-size:13px}
.est-r .aux{grid-column:2;text-align:right;font-size:11.5px;color:var(--ink-3)}
.est-mk{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.est-sheet{position:absolute;inset:0;z-index:30;background:var(--panel);overflow:auto;padding:18px 22px 40px;box-sizing:border-box}
.est-top{display:flex;align-items:center;gap:12px}.est-top h2{margin:0}.est-top .btn{margin-left:auto}
.est-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin:12px 0 16px}
.est-t{width:100%;border-collapse:collapse;font-size:12.5px;margin-bottom:18px}
.est-t th,.est-t td{padding:4px 6px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle}
.est-t .n{text-align:right;white-space:nowrap}
.est-t tr.div td{font-weight:650;background:var(--panel-2)}
.est-t tr.grp td{font-size:11.5px;color:var(--ink-2);letter-spacing:.03em;padding-top:8px}
.est-t tr.tot td{font-weight:650}
.est-t tr.unp td{color:var(--ink-2)}
.est-t .on{padding-left:14px;color:var(--ink-2)}
.est-t input{width:96px;text-align:right;border:1px solid var(--line);border-radius:6px;padding:3px 6px;font:12.5px var(--f-body);background:var(--panel);color:var(--ink)}
.est-t input.ov{border-color:var(--accent);background:var(--accent-2)}
.est-add{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2)}
.est-addf{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(120px,1fr) minmax(160px,1.6fr) 80px 80px 100px auto;gap:6px;align-items:center}
.est-addf input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:13px var(--f-body);background:var(--panel);color:var(--ink);min-width:0}
@media (max-width:1100px){.est-addf{grid-template-columns:1fr 1fr}.est-head{grid-template-columns:1fr 1fr}}
.est-btns{display:flex;flex-wrap:wrap;gap:6px}
/* SNAPSHOT-1 PORT: Owner-approved v83 full estimate sheet, with current v84 typography, theme and controls. */
.est-account-sheet{position:static;inset:auto;z-index:auto;overflow:visible;contain:paint;padding:0;width:auto;min-width:0}
.est-account-sheet input,.est-account-sheet select{box-sizing:border-box;min-width:0;max-width:100%}
/* SNAPSHOT-1 PORT: Task 85 (estimate fixes) — with Show the plan on a laptop, the Estimate reads top to bottom: the header fields, the plan
   full width as a landscape picture, then the line items at the full width (src/ui.js linkedPlace moves the plan); phones keep today's strip.
   The confirmed chip sits in the window head's slot beside the actions; the team settings link sits under the team name. */
.linked-layout.est-plan-in{display:flex;flex-direction:column}
.linked-layout.est-plan-in>.linked-lists{flex:1 1 auto}
.editor.win-costs .linked-layout.est-plan-in .linked-plan{width:100%;height:auto;aspect-ratio:16/9;max-height:min(62vh,640px);margin:4px 0 20px;box-sizing:border-box}
#winHead [data-pd-slot]{display:inline-block;flex:none;align-self:stretch;min-height:1px}
body:not(:has(#pd-progress)) #winHead [data-pd-slot]{display:none}
.acct-pop .acct-team-settings{justify-self:start;margin-top:4px}
.est-account-sheet .est-head{grid-template-columns:repeat(3,minmax(0,1fr));margin:12px 0 20px}
.est-note{margin:0 0 12px}
.est-account-sheet .est-wrap{overflow-x:auto;margin-top:20px}
.est-account-sheet .est-t{width:100%;min-width:760px}
.est-account-sheet .est-summary th:first-child{width:70px}
.est-account-sheet .est-detail th:first-child{width:105px}
.est-account-sheet .est-t td.n{font-variant-numeric:tabular-nums}
.est-account-sheet .est-t .est-desc{width:100%;min-width:180px;text-align:left}
.est-account-sheet .est-t .est-unit{width:50px;text-align:left}
.est-summary-edit{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin-top:6px;font-size:11px;color:var(--ink-2)}
.est-summary-edit label{display:grid;gap:3px}
.est-summary-edit select{max-width:175px}
.est-account-sheet .est-t td .muted{color:var(--ink-2)}
@media(max-width:600px){.est-account-sheet .est-head{grid-template-columns:1fr 1fr}.est-account-sheet .est-t{font-size:12px}}
.pr-save{display:flex;align-items:center;gap:10px;margin:6px 0 2px}
.est-top .btn:first-of-type{margin-left:auto}
.est-top .btn + .btn{margin-left:0}
.btn.back-plan{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 10px}
.btn.back-plan svg{width:16px;height:16px}

/* ---------- Stage 7.5: as-builts and documents ---------- */
.stage.ab-mode #world{opacity:.5}
.stage.ab-mode #ovPre,.stage.ab-mode #ovPieces,.stage.ab-mode #ovPost > :not(.ab-layer){opacity:.45}
#cv .ab-lbl{font:600 10.5px var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--panel);stroke-width:3px}
#cv .ab-sym{font:700 7.5px var(--f-body)}
.ab-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:2px}
.ab-list li{display:flex;gap:8px;align-items:baseline;font-size:13px}
.ab-list .aux{color:var(--ink-3);font-size:11.5px}
.ab-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}
.btn.danger{color:#fff;background:var(--danger);border-color:var(--danger)} /* SNAPSHOT-1 PORT: Panels and dark mode — solid red with white text, both themes. */
.doc-add{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel-2);display:grid;gap:8px;margin:12px 0 16px}
.doc-link{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:6px}
.doc-link input,.doc-t input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:13px var(--f-body);background:var(--panel);color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.doc-t select{max-width:160px}
/* five steps on one line: the steps never wrap; the title and the save status give way first */
.steps{flex-wrap:nowrap;flex:0 0 auto}
.steps button{padding:7px 12px}
.tb-plan{flex:0 1 340px;min-width:140px}
.topbar .status{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){.steps{flex-wrap:wrap}}

.ab-dl{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.ab-dl li{display:flex;align-items:center;gap:8px;font-size:13px}
.ab-th{width:44px;height:34px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--panel-2)}
.ab-ic{font:600 10px var(--f-body);color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:3px 5px;min-width:30px;text-align:center}
.ab-da{display:grid;gap:6px}
.ab-q{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:13px var(--f-body);background:var(--panel);color:var(--ink);margin:4px 0 6px}
.ab-cats{display:flex;gap:6px;margin-bottom:6px}
.ab-cats .chip.on{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.ab-new{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin-bottom:6px}
.ab-new .btn{margin-bottom:2px}
.fm-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px}
.fm-sets{display:grid;gap:6px;margin:6px 0}
.fm-set{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;font-size:12.5px}
.fm-set select{min-height:28px;padding:3px 24px 3px 7px;font-size:12.5px}
.fm-tot{color:var(--ink-2)}

/* affirmations: a template of boxes, typed into directly */
.aff{display:grid;gap:5px;margin:6px 0}
.aff-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}
.aff-row.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.aff-row:not(.two) .aff-box{width:60%;justify-self:center}
.aff-box{border:0;border-radius:6px;padding:7px 8px;min-width:0;font:700 13px var(--f-body);color:#FFFFFF !important;text-align:center;box-sizing:border-box}
.aff-box::placeholder{color:rgba(255,255,255,.62);font-weight:500}
.aff-ctl{display:flex;gap:6px;white-space:nowrap}

/* game colors as swatches; None is a white square with a red line through it, Multi colors a three-color square */
.sw-list{display:grid;gap:8px;margin:6px 0 8px}
.sw-row{display:grid;gap:4px;font-size:12.5px}
/* SNAPSHOT-1 PORT: Game picker layout is scoped after the shared 14px default below. */
.sw-b{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.28);padding:0;cursor:pointer;flex:none}
.sw-b.on{outline:2px solid var(--ink);outline-offset:2px}
.sw-b:focus-visible{outline:2px solid var(--focus,#2A5FA6);outline-offset:2px}
.sw-none{background:linear-gradient(to top right,#fff calc(50% - 1.5px),#D93B3B calc(50% - 1px),#D93B3B calc(50% + 1px),#fff calc(50% + 1.5px))}
.sw-multi{background:linear-gradient(135deg,#D93B3B 0 33%,#F2C230 33% 66%,#2F6FDB 66%)}

/* the cross-section card: bottom-center over the plan while a measured line crosses a mound */
.sec-card{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);background:var(--bg-1,#fff);color:var(--ink); /* SNAPSHOT-1 PORT: Panels and dark mode — --bg-1 is the panel now, and the text follows it. */border:1px solid var(--line,#D8D8DC);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.12);padding:10px 12px;z-index:6;max-width:calc(100% - 24px)}
.sec-card-h{display:flex;gap:10px;align-items:baseline;margin-bottom:4px}
.sec-card svg{display:block;max-width:100%;height:auto}
.sec-card .sec-g{stroke:#8A8A8F;stroke-width:1}
.sec-card .sec-f{fill:#CDB48A;fill-opacity:.55}
.sec-card .sec-l{fill:none;stroke:#7A5C35;stroke-width:1.6;stroke-linejoin:round}
.sec-card .sec-t{font:600 11px var(--f-body,system-ui);fill:#7A5C35}

/* fire lanes: a red-edged band with its turnarounds, a dashed centerline, and FIRE LANE along it */
.fire-lane{fill:#D93B3B;fill-opacity:.10;stroke:#D93B3B;stroke-width:.45;stroke-dasharray:2.4 1.2}
.fire-lane.sel{fill-opacity:.18;stroke-width:.8}
.fire-lane.bad{stroke:#B3261E;stroke-width:.9}
.fire-cl{fill:none;stroke:#D93B3B;stroke-width:.25;stroke-dasharray:3 2;opacity:.8}
.fire-t{fill:#B3261E;font-weight:700;font-family:Arial,sans-serif;letter-spacing:.08em}

/* vehicle routes and sweeps */
.route-lane{fill:#5B6B7A;fill-opacity:.10;stroke:#5B6B7A;stroke-width:.45;stroke-dasharray:2.4 1.2}
.route-lane.sel{fill-opacity:.18;stroke-width:.8}
.sweep{fill:#F08A24;fill-opacity:.16;stroke:#C2410C;stroke-width:.3}
.sweep-v{fill:#F08A24;fill-opacity:.45;stroke:#9A3412;stroke-width:.3}

/* accessible routes: a blue-edged band with the access symbol */
.acc-route{fill:#2F6FDB;fill-opacity:.12;stroke:#2F6FDB;stroke-width:.35;stroke-dasharray:1.6 .8}
.acc-route.sel{stroke-width:.7}
.acc-route.bad{stroke:#B3261E;stroke-width:.7}
.acc-t{fill:#1E4FA8;font-weight:700}
.slope-row{grid-template-columns:minmax(0,1fr) 92px auto}


/* Prices: find and filter, money fields with a $ prefix, details tucked under More */
.pr-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pr-head h2{margin-right:auto}
.pr-status{font-size:12.5px;color:var(--ink-2)}
.pr-status.ok{color:var(--ok)}
.pr-status.ok::before{content:"✓ "}
.pr-status.busy{color:var(--ink-2)}
.pr-status.warn{color:var(--warn)}
.pr-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.pr-find{flex:1 1 220px;max-width:320px;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font:14px var(--f-body);background:var(--panel);color:var(--ink)}
.pr-filt{display:flex;gap:6px;flex-wrap:wrap}
.chip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.chip .aux{opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
.pr-t{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}
.pr-t th,.pr-t td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.pr-t thead th{font-size:12px;font-weight:600;color:var(--ink-2);position:sticky;top:0;background:var(--panel-1,var(--panel));z-index:1}
.pr-t th.n,.pr-t td.n{text-align:right;width:150px}
.pr-t tr.pr-g th{padding-top:16px;font-size:12px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.pr-t .pr-name{font-weight:500}
.pr-t tr.unpriced .pr-name{color:var(--ink-2)}
.pr-t select.pr-unit{min-height:30px;padding:3px 22px 3px 7px;font-size:12.5px}
.pr-m{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel);overflow:hidden;width:132px;max-width:100%}
.pr-m:focus-within{border-color:var(--focus,var(--measure));box-shadow:0 0 0 2px color-mix(in srgb,var(--measure) 25%,transparent)}
.pr-m span{padding:0 0 0 9px;color:var(--ink-2);font-size:13px}
.pr-m input{border:0 !important;background:transparent !important;padding:6px 9px 6px 4px !important;text-align:right;font:13.5px var(--f-body);font-variant-numeric:tabular-nums;width:100%;min-width:0;color:var(--ink);outline:none}
.pr-m input.bad{color:var(--fail)}
.pr-t td.pr-more{width:76px;text-align:right;white-space:nowrap}
.pr-t tr.pr-add td{background:var(--panel-2);padding:10px 12px}
.pr-det{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 14px;max-width:640px;margin-bottom:6px}
.pr-on{display:grid;grid-template-columns:minmax(0,1fr) 132px auto;gap:8px;align-items:center;margin-bottom:6px;max-width:620px}
.pr-on > input{border:1px solid var(--line);border-radius:8px;padding:6px 9px;font:13px var(--f-body);background:var(--panel);color:var(--ink)}
.pr-none{margin:16px 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.pr-t th.n,.pr-t td.n{width:auto}.pr-m{width:104px}.pr-t td.pr-more{width:auto}}

/* ---------- north: a leaf in the corner of the plan, its tip toward north ---------- */
:root{--north:#2F7A1C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--north:#8FD86A}}
:root[data-theme="dark"]{--north:#8FD86A}
/* SNAPSHOT-1 PORT: wave 3 Setup step — the corner control (#northBadge: ghost, drag, keys, value bubble, flash) is gone; its drawing
   is kept for the small display-only corner arrow (#northArrow) and the North step's compass. */
.nb svg{display:block;width:100%;height:100%;overflow:visible}
.nb-bg{fill:var(--panel);fill-opacity:.7;stroke:var(--line);stroke-width:2}
.nb-fill{fill:var(--ink-2)}
.nb-line{fill:none;stroke:var(--ink-2);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.nb .nb-n{font:700 22px var(--f-body);fill:var(--ink-2);text-anchor:middle;dominant-baseline:central}
.nb .ghost .nb-fill,.nr-mini .ghost .nb-fill{fill:none}
.nb .ghost path,.nr-mini .ghost path{stroke:var(--ink-3);stroke-width:3;stroke-dasharray:5 5;fill:none}
.stage.capturing #northArrow{display:none} /* SNAPSHOT-1 PORT: wave 3 Setup step — the corner arrow never prints */
/* SNAPSHOT-1 PORT: wave 3 Setup step — the Site setup bar (top left of the plan, Setup only, the white bar style), its North step,
   the corner north arrow (right-aligned with the view buttons, 8 px below them; F's Sun bar sets --north-top) and, on phones,
   the plan's top controls moved down a row while the bar shows, so the Plan dimensions chip (.pd-progress) lands below the bar. */
.site-bar{position:absolute;left:10px;top:10px;z-index:6;display:flex;align-items:center;gap:2px;box-sizing:border-box;height:38px;max-width:calc(100% - 20px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow)}
.site-bar::-webkit-scrollbar{display:none}
.site-bar .ssb-l{font:600 12.5px/1 var(--f-body);color:var(--ink);padding:0 8px 0 10px;flex:none}
.site-bar button{display:inline-flex;align-items:center;gap:5px;flex:none;border:0;background:transparent;border-radius:999px;padding:5px 10px;min-height:30px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer}
.site-bar button:hover{color:var(--ink);background:var(--panel-2)}
.site-bar button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.site-bar button[aria-pressed="true"],.site-bar button[aria-expanded="true"].ssb-step{background:var(--sunk);color:var(--ink)}
.site-bar .ssb-step[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--ink-2)}
.site-bar .ssb-ic{width:14px;height:14px;flex:none}
.site-bar .ssb-step .ssb-ic{color:var(--ink-3)}
.site-bar .ssb-step.done .ssb-ic,.site-bar .ssb-fold .ssb-ic{color:var(--north)}
.site-bar .ssb-step.done .ssb-n{color:var(--ink)}
.site-bar .ssb-v{color:var(--ink-2);font-weight:600}
.site-bar .ssb-fold{color:var(--ink);font-weight:600;padding:5px 12px}
.site-bar .ssb-close{padding:5px 9px}
.site-bar .ssb-close .ss-chev{transform:rotate(180deg)}
.ssb-pop{position:absolute;z-index:9;width:340px;max-width:calc(100% - 20px);box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px}
.ssb-pop h3{margin:0;font-size:14px}
.ssb-pop .nr-btns{flex-direction:column;margin:12px 0 10px}
.ssb-pop .nr-btns .btn{justify-content:center;width:100%}
.ssb-pop .nr-btns .btn.on{background:var(--sunk);border-color:var(--ink-3)}
.ssb-pop .nr-deg{margin:0}
.ssb-pop .nr-now{margin:8px 0 0;color:var(--ink-2)}
#northArrow{position:absolute;right:10px;top:var(--north-top,56px);z-index:2;width:28px;height:28px;border-radius:50%;pointer-events:auto;cursor:default;user-select:none;-webkit-user-select:none}
.stage.in3d .site-bar,.stage.capturing .site-bar,.stage.xp .site-bar,.stage.in3d .ssb-pop,.stage.capturing .ssb-pop,.stage.xp .ssb-pop{display:none}
.stage.cmp-on .site-bar{pointer-events:none} /* while comparing, presses on the bar go through to the compare line (the line can be grabbed anywhere on the picture) */
@media (max-width:700px){
  #stage.ssb-on .site-bar{right:10px;max-width:none}
  #stage.ssb-on .site-bar.folded{right:auto}
  #stage.ssb-on .style-switch{top:56px}
  #stage.ssb-on:not(:has(> .cmp-switch)) .hint{top:102px}
  #stage.ssb-on #northArrow{top:calc(var(--north-top,56px) + 46px)}
  .ssb-pop{left:10px !important;right:10px;width:auto}
}
/* SNAPSHOT-1 PORT: task 120 — when the Site setup bar has no room beside the view buttons it sits on its own row just under them (ui.js sets its top and --ssb-below); what sat under the view buttons moves below it */
#stage.ssb-on.ssb-row .hint{top:var(--ssb-below,102px)}
#stage.ssb-on.ssb-row .sun-bar{top:var(--ssb-below,102px)}
#stage.ssb-on.ssb-row.sunbar-on{--north-top:calc(var(--ssb-below,102px) + 46px)}
#stage.ssb-on.ssb-row .cmp-tag{top:calc(var(--ssb-below,102px) + 2px)}
.nr-line{stroke:var(--north);stroke-width:2.6}
.nr-tail{fill:var(--panel);stroke:var(--north);stroke-width:2}
.nr-head{fill:var(--north)}
.lbl.nr{fill:var(--north)}
.nr-sec .nr-row{display:flex;align-items:center;gap:10px}
.nr-sec .nr-row p{margin:0}
.nr-sec .nr-btns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.nr-sec .nr-in{display:flex;align-items:center;gap:4px}
.nr-sec .nr-in input{width:96px}
.nr-sec .nr-u{color:var(--ink-2)}
.nr-mini{flex:0 0 auto}

/* ---------- mounds, drawn by their crest ---------- */
#ov .mnd-band{fill-opacity:.85;stroke:none}
#ov .mnd-ct{stroke-width:.8;stroke-opacity:.9}
#ov .mnd-top{stroke-width:.8;stroke-dasharray:3 2}
#ov .mnd-edge{stroke-width:1.1}
#ov .mnd-crest{stroke-width:1.5;stroke-dasharray:6 3;stroke-linecap:round;stroke-linejoin:round}
#ov .mnd.sel .mnd-edge{stroke:var(--plan-sel);stroke-width:2.2}
#ov .mnd.bad .mnd-edge{stroke:var(--fail);stroke-width:2;stroke-dasharray:4 3}
#ov .mnd.warn .mnd-edge{stroke:var(--warn);stroke-width:2;stroke-dasharray:4 3}
#ov .mnd-draft{fill:rgba(195,162,102,.16);stroke:#8A6A3E;stroke-width:1.2;stroke-dasharray:4 3}
#ov .mnd-spot{fill:#4A3418;stroke:var(--halo);stroke-width:1}
.lbl.mnd{fill:#4A3418;font-weight:700}
.lbl.mnd-pt{fill:#4A3418;font-weight:600;font-size:11px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lbl.mnd,:root:not([data-theme="light"]) .lbl.mnd-pt{fill:#E9D3A8}:root:not([data-theme="light"]) #ov .mnd-spot{fill:#E9D3A8}}
:root[data-theme="dark"] .lbl.mnd,:root[data-theme="dark"] .lbl.mnd-pt{fill:#E9D3A8}
:root[data-theme="dark"] #ov .mnd-spot{fill:#E9D3A8}
.mnd-insp .s3-insp-h .muted{margin-left:6px}
.mnd-hts .mnd-ptlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0}
.mnd-hts .mnd-ptlist input{width:100%}

/* the written brief: a checklist you confirm, and the check on every result */
.br-card{margin:8px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.br-card.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}
.br-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.br-h .aux{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.spin.sm{width:11px;height:11px;border-width:2px}
.br-reqs{list-style:none;margin:6px 0;padding:0;display:grid;gap:6px}
.br-reqs li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;align-items:start;padding:6px 8px;border-radius:8px;background:var(--panel-2)}
.br-reqs li.off{opacity:.55}
.br-reqs li.off .br-say{text-decoration:line-through}
.br-reqs li.added{box-shadow:inset 3px 0 0 var(--accent)}
.br-reqs input[type=checkbox]{margin:3px 0 0;width:16px;height:16px}
.br-say{font-size:13px;font-weight:500;line-height:1.6}
.br-n{width:54px;padding:1px 4px;margin:0 2px;font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.br-q{font-size:12px;color:var(--ink-2);margin-top:1px;overflow-wrap:anywhere}
.br-q .tag{font-size:10.5px;padding:1px 7px;vertical-align:1px}
.br-fill{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:8px;cursor:pointer}
.br-fill input{width:16px;height:16px;margin:0}
.br-fill-note{margin:2px 0 0 24px}
.br-un{margin-top:8px;padding:6px 8px;border-radius:8px;background:var(--warn-tint);color:var(--warn)}
.br-un ul{margin:2px 0 0;padding-left:18px}
.br-un p{margin:0}
.br-go{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.br-text{color:var(--ink-2);margin:2px 0 4px;overflow-wrap:anywhere}
.br-list{margin:4px 0;padding-left:18px;font-size:13px}
.br-list li{margin:1px 0}
.br-set{margin:4px 0 0}
.br-check{margin:8px 0;padding:8px 10px;border-radius:8px;background:var(--ok-tint)}
.br-check.bad{background:var(--warn-tint)}
.br-check p{margin:0 0 4px}
.br-check ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:12.5px}
.br-mark{display:inline-block;width:16px;font-weight:700}
.br-check li.ok .br-mark,.br-v.ok .br-mark{color:var(--ok)}
.br-check li.bad,.br-check li.bad .br-mark,.br-v.bad .br-mark{color:var(--fail)}
.br-v{margin:3px 0}
#ov .br-zone{fill:color-mix(in srgb,var(--measure) 9%,transparent);stroke:var(--measure);stroke-width:1.5;stroke-dasharray:7 5;pointer-events:none}
.br-tt{width:100%;border-collapse:collapse;margin-top:8px;font-size:12.5px}
.br-tt th{text-align:left;font-weight:600;color:var(--ink-2);padding:4px 6px;border-bottom:1px solid var(--line)}
.br-tt td{padding:5px 6px;border-bottom:1px solid var(--line-2);vertical-align:top}
.br-tt td span{display:block;margin-top:1px}
.br-miss{margin-top:6px}
.br-miss ul{margin:4px 0 0;padding-left:16px;display:grid;gap:6px}

/* phones and narrow windows: the header wraps, then the tools, the plan and the panel stack in one column */
@media (max-width:900px){
  .topbar{flex-wrap:wrap}
  .editor{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 62vh auto}
  .rail{grid-row:1;grid-column:1}
  .stage{grid-row:2;grid-column:1}
  .side{grid-row:3;grid-column:1}
}
.br-reqs li.look{box-shadow:inset 3px 0 0 var(--warn)}
.br-alt{font-size:12px;color:var(--warn);margin-top:2px}
.br-reqs li.sug{background:transparent;box-shadow:none;border:1px dashed color-mix(in srgb,var(--warn) 55%,var(--line))}
.br-reqs li.sug.off{opacity:.85}
.br-reqs li.sug.off .br-say{text-decoration:none}

/* your own colors for buildings, fences and walls (they win over every plan style's defaults) */
.stage #ov path.bld.cc{fill:var(--c);stroke:var(--c2)}
.stage #ov path.fence.cc,.stage #ov path.wall.cc{stroke:var(--c)}
.stage #ov .fmarks.cc .fpost{fill:var(--c);stroke:var(--c2)}
.stage #ov .fmarks.cc .fx{stroke:var(--c)}
.stage #ov path.bld.cc.sel,.stage #ov path.fence.cc.sel,.stage #ov path.wall.cc.sel,.stage #ov .fmarks.cc.sel .fpost{stroke:var(--plan-sel)}
.ex-color .sws{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
/* SNAPSHOT-1 PORT: Circular existing-feature color buttons are scoped after the shared default. */
.ex-color .sw.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.ex-color .sw-own{background:var(--sw,conic-gradient(#e94b3c,#f2b134,#7cc35a,#3fa7d6,#8e6ad8,#e94b3c))}
.ex-color .sw-own span{color:#fff;font-size:14px;text-shadow:0 0 2px rgba(0,0,0,.6);pointer-events:none}
.ex-color .sw-own input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
/* a name on the plan you can double-click to rename */
#ov .lbl[data-name]{pointer-events:auto}
.name-edit{position:absolute;z-index:40;transform:translate(-50%,-50%);font:600 13px/1.2 var(--f-body);color:var(--ink);background:var(--panel);border:1.5px solid var(--plan-sel);border-radius:7px;padding:4px 8px;box-shadow:var(--shadow);outline:none;text-align:center}

/* ---------- Stage 11: the 3D view, shade and sightlines ---------- */
.v3-host{position:absolute;inset:0;z-index:3;background:#DFE8EF}
.v3-canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}
.v3-canvas:active{cursor:grabbing}
.v3-canvas.placing{cursor:crosshair}
.v3-bar{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:8;width:max-content;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;max-width:calc(100% - 24px);padding:6px 10px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 22px rgba(0,0,0,.14);font:12.5px/1.3 var(--f-body)}
.v3-bar .sb-seg{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.v3-bar .sb-seg button{border:0;background:transparent;padding:6px 11px;font:500 12.5px/1 var(--f-body);color:var(--ink);cursor:pointer;min-height:30px}
.v3-bar .sb-seg button+button{border-left:1px solid var(--line)}
.v3-bar .sb-seg button.on{background:var(--primary);color:var(--primary-ink)}
.v3-bar .sb-btn{border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);padding:6px 10px;font:500 12.5px/1 var(--f-body);cursor:pointer;min-height:30px}
.v3-bar .sb-btn:hover{background:var(--panel-2)}
.v3-bar .sb-tog{display:inline-flex;align-items:center;gap:6px}
.v3-bar .sb-tog::before{content:"";width:9px;height:9px;border-radius:3px;border:1.5px solid currentColor;box-sizing:border-box}
.v3-bar .sb-tog[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.v3-bar .sb-tog[aria-pressed="true"]::before{background:currentColor}
.v3-bar .sb-tip{color:var(--ink-2);font-size:12px;white-space:nowrap}
/* SNAPSHOT-1 PORT: Task 86 — the 3D panel's look switches (sky lighting, contact shadows): Inter and the colour variables. */
.s3-look{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-family:Inter,system-ui,sans-serif}
.s3-look-h{font-size:12px;font-weight:600;color:var(--ink-2);margin-right:2px}
.s3-look-tog{font:inherit;font-size:12px;line-height:1;padding:6px 10px;min-height:28px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.s3-look-tog[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.s3-look-tog:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* SNAPSHOT-1 PORT: Task 68 compare — the Plan / Original / Before/after switch and its layer (client/compare.ts), rebuilt from docs/batch-3/compare-reference.html.
   The layer sits above #cv and the plan's overlays; while comparing, the compass, readout, hint, zoom bar and view switcher are raised above it, the plan's own
   scale bar gives way to the layer's copy, and #cv drifts with the line (never while a picture for a file is taken). Phones: the switch sits under the view switcher. */
@property --cmp-x{syntax:'<length>';inherits:false;initial-value:0px}
.cmp-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.cmp-layer[hidden],.cmp-layer [hidden]{display:none !important}
.cmp-pics{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
.cmp-back{fill:var(--plan-bg)}
.cmp-line-shadow{fill:none;stroke:rgba(0,0,0,.32);stroke-width:5;stroke-linecap:round}
.cmp-line{fill:none;stroke:#FFFFFF;stroke-width:2.5;stroke-linecap:round}
.cmp-tag{position:absolute;top:58px;padding:5px 11px;border-radius:999px;background:rgba(17,17,18,.72);color:#FFFFFF;font:600 12.5px/1.2 var(--f-body);white-space:nowrap;pointer-events:none;transition:opacity .2s}
.cmp-tag-before,.cmp-tag-original{left:14px}
.cmp-tag-after{right:14px}
.cmp-knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:999px;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;pointer-events:none}
.cmp-knob path{fill:none;stroke:#111112;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cmp-area{position:absolute;inset:0;pointer-events:none;outline:none}
.cmp-area:focus-visible{outline:3px solid #2F7D4A;outline-offset:-3px}
.cmp-switch{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:7;width:max-content;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.cmp-switch.cmp-raised{bottom:58px}
.cmp-b{height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:600 13.5px/1 var(--f-body);white-space:nowrap;cursor:pointer}
.cmp-b[aria-pressed="true"]{background:#111112;color:#FFFFFF}
.cmp-b[aria-disabled="true"]{opacity:.45;cursor:default}
.cmp-b:focus-visible{outline:2px solid #2F7D4A;outline-offset:2px}
.stage.in3d .cmp-switch,.stage.xp .cmp-switch,.stage.in3d .cmp-layer,.stage.xp .cmp-layer{display:none !important}
.stage.cmp-on .hint,.stage.cmp-on .readout,.stage.cmp-on .nb,.stage.cmp-on .zoombar,.stage.cmp-on .style-switch{z-index:7}
.stage.cmp-on .lock-chip,.stage.cmp-on #secCard,.stage.cmp-on .dim-pop{z-index:5}
body:has(#stage.cmp-on) #pd-progress{visibility:hidden} /* SNAPSHOT-1 PORT: Small fixes 5 — while Original or Before/after shows, the Plan dimensions chip ("0 of 4 confirmed") is hidden so it never covers the Before or Original tag; back on Plan it shows again. */
.stage.cmp-on .lock-chip,.stage.cmp-on #secCard,.stage.cmp-on .dim-pop{visibility:hidden} /* SNAPSHOT-1 PORT: Phone fixes (b) — while Original or Before/after shows, the lock chip, the section card and the distance pop-up are hidden like the Plan dimensions chip (each starts an edit, which goes back to Plan anyway, and on phones the picture covered the lock chip); back on Plan they show again. */
.stage.cmp-on:not(.capturing) #cv .sb-bg,.stage.cmp-on:not(.capturing) #cv .sb-line,.stage.cmp-on:not(.capturing) #cv .sb-t{visibility:hidden}
.stage.cmp-ba:not(.capturing) #cv{transform:translateX(var(--cmp-x)) scale(1.01);will-change:transform}
.stage.cmp-ba #cv:not(.pan){cursor:ew-resize}
.stage.cmp-ba.cmp-drag #cv:not(.pan){cursor:grabbing}
.stage.cmp-orig #cv:not(.pan){cursor:default}
@media (prefers-reduced-motion:reduce){.stage.cmp-ba:not(.capturing) #cv{transform:none;will-change:auto}.cmp-tag{transition:none}}
@media (max-width:700px){.cmp-switch,.cmp-switch.cmp-raised{top:56px;bottom:auto;left:50% !important}.cmp-b{height:34px;padding:0 12px;font-size:12.5px}.stage.cmp-on .hint{top:106px}.cmp-tag{top:146px}}
@media (max-width:700px){.stage:has(> .cmp-switch):not(.in3d):not(.xp) .hint{top:calc(106px + var(--cmp-shift,0px))}.stage .cmp-switch,.stage .cmp-switch.cmp-raised{top:calc(56px + var(--cmp-shift,0px))}.stage .cmp-tag{top:calc(146px + var(--cmp-shift,0px))}} /* SNAPSHOT-1 PORT: Phone fixes (a) — on Plan too, the hint sits under the compare switch (both were at 56 px, the switch over the hint), as it already does while comparing; and the switch, hint and tags move down by --cmp-shift when the view switcher grows a row taller (its "Plan dimensions" button wraps), so the view switcher never overlaps the switch. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cmp-b[aria-pressed="true"]{background:#F2F2F3;color:#111112}}
:root[data-theme="dark"] .cmp-b[aria-pressed="true"]{background:#F2F2F3;color:#111112}
.v3-tip{position:absolute;left:12px;top:12px;z-index:8;max-width:calc(100% - 420px);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--ink-2);box-shadow:var(--shadow);pointer-events:none;text-align:center}
.stage.in3d .zoombar,.stage.in3d .readout,.stage.in3d .hint,.stage.in3d #shapebar,.stage.in3d .lock-chip,.stage.in3d #northArrow,.stage.in3d #secCard,.stage.in3d .actionbar,.stage.in3d #linecard{display:none !important} /* SNAPSHOT-1 PORT: wave 3 Setup step — the corner arrow is hidden in 3D, as the corner control was */
.stage.in3d .style-switch{z-index:9}
.style-switch .ss-3d{font-weight:600}
.style-switch .ss-3d[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
#ov .shade-ov{fill:#1F2A44;fill-opacity:.30;stroke:none;pointer-events:none}
#ov .shade-ov.night{fill-opacity:.42}
#ov .sight-ov{fill:#C23A2B;fill-opacity:.2;stroke:none;pointer-events:none}
#ov .eye-mk{cursor:move}
#ov .eye-mk .eye-halo{fill:rgba(45,108,223,.18);stroke:none}
#ov .eye-mk .eye-dot{fill:#2D6CDF;stroke:#fff;stroke-width:2}
#ov .eye-mk .eye-ic{fill:#fff}
#ov .eye-mk .eye-pupil{fill:#2D6CDF}
.lbl.eye-l{fill:#2D6CDF}
.seg3.two{grid-template-columns:repeat(2,1fr)}
.sun-days{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.sun-days .chip.on,.chip.on{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.study-t th{font:600 11.5px/1.2 var(--f-body);text-align:right;padding:4px;color:var(--ink-2)}
.study-t th:first-child{text-align:left}
.sun-t td:first-child{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sun-sec input[type=range]{margin-top:4px}
@media (max-width:900px){.v3-tip{max-width:calc(100% - 24px);top:56px}}
/* Stage 12: play structures and PIP surfacing */
.ps-box{margin-top:10px;border-top:1px solid var(--line);padding-top:4px}
.ps-box .ps-wide{grid-column:1/-1}
.ps-box .ps-pick{margin:6px 0}
.ps-start{align-items:center;gap:6px;margin:4px 0}
.ps-mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 12px;margin:8px 0}
.ps-n{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-2)}
.ps-n input{width:58px;text-align:right}
.ps-n select{max-width:112px}
.ps-built{margin:8px 0 2px}
.ps-colors{display:flex;flex-direction:column;gap:5px;margin:6px 0}
.ps-c{display:flex;align-items:center;gap:8px;font-size:12.5px}
.ps-c .grow{flex:1;min-width:0}
.ps-c select{max-width:118px}
.ps-c input[type=color]{width:30px;height:26px;padding:0 2px;border:1px solid var(--line);border-radius:6px;background:var(--panel);cursor:pointer}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.22);flex:none;vertical-align:-2px}
/* SNAPSHOT-1 PORT: Owner-approved collision fix; retain shared/play and export-legend square defaults. */
.sw-row > .sw{display:flex;flex-wrap:wrap;gap:5px;width:auto;height:auto;background:none;border:0;border-radius:0;position:static;vertical-align:baseline;padding:0;cursor:default}
.ex-color .sw{position:relative;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--sw,var(--panel-2));cursor:pointer;padding:0;display:inline-grid;place-items:center;font:600 9px/1 var(--f-body);color:var(--ink-2)}
.ex-color .sw-own{background:var(--sw,conic-gradient(#e94b3c,#f2b134,#7cc35a,#3fa7d6,#8e6ad8,#e94b3c))}
.ps-save{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ps-save input{flex:1;min-width:130px}
.ps-part-box{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:10px 0;background:var(--panel-2)}
.ps-part-box .s3-insp-h{margin-bottom:6px}
.pip-box{margin-top:10px;border-top:1px solid var(--line);padding-top:4px}
.pip-now{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.pip-g{margin:6px 0}
.pip-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.pip-sw{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.22);padding:0;cursor:pointer;display:inline-block;vertical-align:middle;flex:none}
.pip-sw.on{outline:2px solid var(--ink);outline-offset:2px}
.pip-sw.big{width:18px;height:18px;margin-right:6px;cursor:default}
td .pip-sw{width:12px;height:12px;margin-right:6px;cursor:default;vertical-align:-1px}
.tag.prem{background:var(--warn-tint);color:var(--warn);font-size:11px;padding:1px 7px}
.ps-leg li{display:flex;align-items:center;gap:6px}
/* SNAPSHOT-1 PORT: Task 111 — the Export window's play structure legend (.xp-lg.ps-lg) is gone: the PDF prints it under Play structure colors. */
#ov .pip-in{pointer-events:none}
#ov .ps-part,#ov .ps-zone,#ov .ps-exit,#ov .ps-area{pointer-events:none}
/* ---------- Stage 13: view only, and two people at once ---------- */
.ro-banner{background:var(--ok-tint);color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ro-banner strong{font-weight:650}
.ro .tool.add{opacity:.4}
.dialog .acts.acts-col{flex-direction:column;align-items:stretch}
.dialog .acts.acts-col .btn{justify-content:center;text-align:center;white-space:normal}
.merge-list{margin:6px 0 10px 18px;padding:0;font-size:13.5px;line-height:1.5}
.save-trouble{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;background:var(--fail-tint);color:var(--ink)}
.save-trouble .st-acts{display:flex;gap:6px;flex-wrap:wrap}
#saveStatus .link{font:inherit;font-weight:600;text-decoration:underline;background:none;border:0;padding:0;color:inherit;cursor:pointer}
/* the keyboard cursor, and focus on the plan */
#cv:focus{outline:none}
#cv:focus-visible{outline:2px solid var(--plan-sel);outline-offset:-3px}
#ov .kc circle{fill:none;stroke:var(--measure);stroke-width:2}
#ov .kc path{fill:none;stroke:var(--measure);stroke-width:2;stroke-linecap:round}
#ov .kc{pointer-events:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tool.add:not(.on){color:#D8F5C4}}
:root[data-theme="dark"] .tool.add:not(.on){color:#D8F5C4}
fieldset.ro-set{border:0;margin:0;padding:0;min-width:0}
fieldset.ro-set:disabled input,fieldset.ro-set:disabled select,fieldset.ro-set:disabled button{opacity:.75;cursor:default}
.ro-note{margin:8px 0 12px}

/* curbs: a band along the inside of a surface's outline */
#ov .curb{stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.curb-box{display:grid;gap:6px;margin:8px 0;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.curb-box .tog{display:flex;margin:0}

/* Download, in the top bar on every step: the plan as a PDF or a picture */

/* Add pieces: picture categories, laid out the way Settings says (A, the default: a grid; B: a strip; C: pictures first) */
.stage.drawer-away .drawer{display:none}
.drawer{gap:12px;padding:14px 14px 10px}
.drawer .dr-h{min-height:34px}
.drawer .dr-h strong{font-size:17px;font-weight:650;letter-spacing:-.01em}
.drawer .dr-h .x{width:34px;height:34px;border:0;border-radius:8px;background:var(--panel-2);color:var(--ink);font:500 18px/1 var(--f-body);cursor:pointer;flex:none}
.drawer .dr-h .x:hover{background:var(--line)}
.drawer .dr-q{width:100%;box-sizing:border-box}
.drawer .dr-pick{flex:none}
.drawer .dr-cats{display:grid;gap:10px 8px}
.drawer .dr-body{display:flex;flex-direction:column;gap:10px}
.drawer .dr-foot{margin:2px 0 0;flex:none}
.drawer button{-webkit-tap-highlight-color:transparent}
.lib-pic svg,.lib-hpic svg{display:block;width:100%;height:100%}
/* A: four picture tiles to a row */
.lib-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.lib-tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:6px;cursor:pointer;text-align:center;font:500 11.5px/1.25 var(--f-body);color:var(--ink-2);min-width:0}
.lib-tile .lib-pic{display:block;height:56px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);box-sizing:border-box;overflow:hidden}
.lib-tile:hover .lib-pic{border-color:var(--ink-3)}
.lib-tile.on{color:var(--ink);font-weight:600}
.lib-tile.on .lib-pic,.lib-round.on .lib-pic{border:2px solid var(--accent);background:var(--accent-2);background:color-mix(in srgb,var(--accent) 16%,var(--panel))}
.lib-tile .lib-l{overflow-wrap:anywhere}
/* B: a row of round pictures that scrolls sideways */
.lib-strip{display:flex !important;flex-wrap:nowrap !important;gap:4px !important;overflow-x:auto;margin:0 -14px;padding:2px 14px 4px;scroll-snap-type:x proximity;scrollbar-width:none}
.lib-strip::-webkit-scrollbar{display:none}
.lib-round{all:unset;box-sizing:border-box;width:72px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;font:500 11.5px/1.25 var(--f-body);color:var(--ink-2);scroll-snap-align:start}
.lib-round .lib-pic{display:block;width:60px;height:60px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);box-sizing:border-box;overflow:hidden}
.lib-round:hover .lib-pic{border-color:var(--ink-3)}
.lib-round.on{color:var(--ink);font-weight:600}
/* C: big pictures, two to a row; tap one for its pieces */
.lib-bigs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px 12px !important}
.lib-big{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:7px;cursor:pointer;min-width:0}
.lib-big .lib-pic{display:block;height:96px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);box-sizing:border-box;overflow:hidden}
.lib-big:hover .lib-pic{border-color:var(--ink-3)}
.lib-big .lib-l{font:600 14px/1.25 var(--f-body);color:var(--ink);padding:0 2px}
.lib-big .lib-d{font:400 12px/1.3 var(--f-body);color:var(--ink-3);padding:0 2px;margin-top:-4px}
.lib-back{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;cursor:pointer;font:500 14px/1 var(--f-body);color:var(--ink-2);padding:8px 8px 8px 2px;border-radius:8px}
.lib-back svg{width:16px;height:16px}
.lib-back:hover{color:var(--ink)}
.lib-tile:focus-visible,.lib-round:focus-visible,.lib-big:focus-visible,.lib-back:focus-visible,.lib-row:focus-visible,.lib-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
/* a category's heading, and its sub-headings */
.lib-head{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.lib-head h3{margin:0;font:600 14px/1.25 var(--f-body);color:var(--ink);flex:1;min-width:0}
.lib-count{font-size:12px;color:var(--ink-3);flex:none}
.lib-hpic{display:none;width:64px;height:48px;flex:none;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);box-sizing:border-box;overflow:hidden}
.drawer.lay-first .lib-head{border-top:0;padding-top:0}
.drawer.lay-first .lib-hpic{display:block}
.drawer.lay-first .lib-head h3{font-size:17px;font-weight:650}
.drawer.lay-strip .lib-head{display:none}
.drawer.searching .lib-head{display:flex}
.drawer.searching.lib-first .dr-pick{display:none}
.drawer.lay-first.searching .lib-hpic{display:none}
.drawer.lay-first.searching .lib-head{border-top:1px solid var(--line);padding-top:12px}
.drawer.lay-first.searching .lib-head h3{font-size:14px;font-weight:600}
.lib-sub{margin:4px 0 -4px;font:600 12.5px/1.25 var(--f-body);color:var(--ink-2)}
.dr-sec{display:flex;flex-direction:column;gap:10px}
/* A: pieces as rows, a picture, a name and a size, and a grip to drag by */
.lib-list{display:flex;flex-direction:column;gap:2px}
.lib-row{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:6px 8px;border-radius:10px;cursor:grab;color:var(--ink)}
.lib-row:hover{background:var(--panel-2)}
.lib-row.on,.lib-card.on .lib-th{box-shadow:inset 0 0 0 2px var(--accent)}
.lib-row.on{background:var(--panel-2)}
.lib-row .lib-th{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;border-radius:10px;background:var(--plan-bg);border:1px solid var(--line);box-sizing:border-box;overflow:hidden}
.lib-th svg{width:100%;height:100%;display:block}
.lib-row .lib-th svg{width:38px;height:38px}
.lib-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.lib-row .lib-n{font:500 13.5px/1.25 var(--f-body)}
.lib-m{font:400 12px/1.25 var(--f-body);color:var(--ink-3)}
.lib-grip{width:12px;height:18px;flex:none;fill:var(--ink-3);opacity:.6}
.lib-row:hover .lib-grip{opacity:1}
/* B and C: pieces as pictures, three to a row */
.lib-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.lib-card{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:5px;cursor:grab;text-align:center;min-width:0;color:var(--ink)}
.lib-card .lib-th{display:flex;align-items:center;justify-content:center;height:56px;border-radius:10px;background:var(--plan-bg);border:1px solid var(--line);box-sizing:border-box;overflow:hidden;padding:5px}
.drawer.lay-first .lib-card .lib-th{height:62px}
.lib-card:hover .lib-th{border-color:var(--ink-3)}
.lib-card .lib-n{font:500 11.5px/1.25 var(--f-body);overflow-wrap:anywhere}
.lib-card .lib-m{font-size:11px;margin-top:-3px}
.lib-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--panel-2);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.dnd-on .lib-row,.dnd-on .lib-card{cursor:grabbing}

/* Settings */
.set-sec{display:grid;gap:8px}
.set-sec h3{margin:0;font:600 14.5px/1.25 var(--f-body)}
.set-sec .muted{margin:0}
.set-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.set-opt{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--panel);min-width:0}
.set-opt:hover{border-color:var(--ink-3)}
.set-opt[aria-checked="true"]{border:2px solid var(--accent);padding:7px;background:var(--accent-2);background:color-mix(in srgb,var(--accent) 10%,var(--panel))}
.set-opt:focus-visible,.set-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.set-pic svg{display:block;width:100%;height:auto}
.set-pic .sp-bg{fill:var(--panel-2);stroke:var(--line)}
.set-pic .sp-a{fill:var(--accent)}
.set-pic .sp-p{fill:var(--ink-3);fill-opacity:.35}
.set-pic .sp-b{fill:var(--ink-3);fill-opacity:.55}
.set-pic .sp-c{fill:var(--ink-3);fill-opacity:.35}
.set-t{font:600 13px/1.25 var(--f-body);color:var(--ink)}
.set-d{font:400 11.5px/1.35 var(--f-body);color:var(--ink-3)}
.set-seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--panel-2);border-radius:999px;justify-self:start}
.set-seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:500 13px var(--f-body);color:var(--ink-2);cursor:pointer}
.set-seg button[aria-checked="true"]{background:var(--primary);color:var(--primary-ink);font-weight:600}
@media (max-width:520px){.set-opts{grid-template-columns:minmax(0,1fr)}.set-opt{flex-direction:row;align-items:center;gap:10px}.set-pic{width:72px;flex:none}.set-opt .set-t,.set-opt .set-d{display:block}}

/* gates in a fence's, wall's or the boundary's settings; turning pads in a path's */
.gate-box{display:grid;gap:8px;margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.gate-box .s3-h{margin:0}
.gate-box p{margin:0}
.gate-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.gate-list li{display:flex;align-items:center;gap:10px;min-width:0}
.gate-th{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:8px;background:var(--plan-bg);border:1px solid var(--line);box-sizing:border-box;overflow:hidden;padding:3px} /* SNAPSHOT-1 PORT: Panels and dark mode — the plan's own background, light or dark. */
.gate-th svg{width:100%;height:100%}
.gate-tx{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.gate-n{text-align:left;font-size:13px;text-decoration:none;color:var(--ink)}
.gate-n:hover{text-decoration:underline}
.gate-x{color:var(--fail);flex:none}
.gate-add-l{font-size:12px;color:var(--ink-2)}
.drawer>*{flex-shrink:0}
@media (pointer:coarse){.lib-grip{display:none}.lib-row,.lib-card{cursor:pointer}}

/* ---------- v84: Checks is step 4; Versions, Costs and Export in the top bar; the sun card on the plan ---------- */
.tb-win{display:inline-flex;align-items:center;gap:6px}
.tb-win svg{width:16px;height:16px;flex:none}
.tb-win[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.ver-wrap{position:relative;display:flex}
#bVersions svg{width:17px;height:17px}
#bVersions[aria-expanded="true"]{background:var(--panel-2);color:var(--ink);border-color:var(--ink-3)}
.ver-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:70;width:360px;max-width:calc(100vw - 16px);max-height:min(70vh,560px);overflow:auto;box-sizing:border-box;display:grid;gap:10px;padding:12px 14px 14px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.16)}
.ver-pop[hidden]{display:none}
.ver-pop p{margin:0}
.vp-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.vp-h strong{font-size:14px}
.vp-x,.sc-x,.win-x{flex:none;border:0;background:var(--panel-2);border-radius:9px;width:30px;height:30px;display:grid;place-items:center;font:500 17px/1 var(--f-body);color:var(--ink);cursor:pointer;padding:0}
.vp-x:hover,.sc-x:hover,.win-x:hover{background:var(--line)}
.vp-new{display:flex;align-items:flex-end;gap:8px}
.vp-new .field{flex:1 1 auto;min-width:0}
.vp-new .btn{flex:none}
.vp-list{list-style:none;margin:0;padding:0;display:grid}
.vp-list li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--line-2)}
.vp-list .grow{flex:1 1 auto;min-width:0}
.vp-list .vlabel{display:block;font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-list .aux{display:block;font-size:12px;color:var(--ink-3)}

/* the window over the plan: one heading row, with the panel (and for Export, the plan as it prints) under it */
.win-h{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:12px 14px 12px 18px;min-width:0;background:var(--panel);border:1px solid var(--line);border-bottom:1px solid var(--line-2);border-radius:14px 14px 0 0;box-shadow:var(--shadow);position:relative;z-index:1}
.win-h[hidden]{display:none}
.win-h .wh-t{margin:0;font:600 17px/1.2 var(--f-body)}
.win-h .wh-note{flex:1 1 240px;min-width:0;font-size:12.5px;color:var(--ink-3)}
.win-h .wh-acts{display:flex;align-items:center;gap:6px;margin-left:auto}
.win-x{width:34px;height:34px;border-radius:10px;font-size:19px}
.seg2{display:inline-flex;gap:2px;background:var(--panel-2);border-radius:999px;padding:3px}
.seg2 button,.seg2 label{position:relative;border:0;background:transparent;border-radius:999px;padding:6px 14px;font:500 13px/1.2 var(--f-body);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap}
.seg2 button:hover,.seg2 label:hover{color:var(--ink)}
.seg2 button[aria-selected="true"],.seg2 label.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.seg2 input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg2 label:focus-within{outline:2px solid var(--ink-3);outline-offset:1px}
.seg2.small label{padding:4px 11px;font-size:12.5px}
.editor.win-costs{grid-template-rows:auto minmax(0,1fr);row-gap:0}
.editor.win-costs .rail{grid-row:1/span 2}
.editor.win-costs .stage{display:none}
.editor.win-costs .win-h{grid-column:2/span 2;grid-row:1}
.editor.win-costs .side{grid-column:2/span 2;grid-row:2;border-top:0;border-radius:0 0 14px 14px}
.editor.win-costs .panel{padding:0;display:block}
.editor.win-export{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr);gap:0}
.editor.win-export .rail{display:none}
.editor.win-export .win-h{grid-column:1/span 2;grid-row:1}
.editor.win-export .stage{grid-column:1;grid-row:2;border-top:0;border-radius:0 0 0 14px}
.editor.win-export .side{grid-column:2;grid-row:2;border-top:0;border-left:0;border-radius:0 0 14px 0}
.editor.win-export .panel{padding-bottom:0}

/* Costs: the estimate, with how it adds up beside it */
.cost-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:100%}
.cost-main{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.cost-aside{border-left:1px solid var(--line);background:var(--panel-2);padding:16px 18px 20px;display:flex;flex-direction:column;gap:0;min-width:0}
.cost-aside h3{margin:0 0 6px;font:600 13.5px/1.3 var(--f-body)}
.cost-cards{display:flex;flex-wrap:wrap;gap:10px}
.cost-card{flex:1 1 170px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.cost-card span{font-size:12px;color:var(--ink-2)}
.cost-card strong{font:600 21px/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.cost-card .aux{color:var(--ink-3)}
.cost-card.hl{background:var(--panel-2);border-color:var(--panel-2)}
.cost-r{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--ink-2);padding:5px 0;font-variant-numeric:tabular-nums}
.cost-r strong{color:var(--ink);font-weight:600;white-space:nowrap}

/* SNAPSHOT-1 PORT: Part 2 account, sign-in and team screens; reuses v84 tokens and dialog/popover patterns. */
.acct-wrap{position:relative;display:flex;flex:none}
.acct-button{width:28px;height:28px;border:0;border-radius:50%;padding:0;background:var(--accent-2);color:var(--ink);font:600 12px/1 var(--f-body);display:grid;place-items:center;cursor:pointer;overflow:hidden}
.acct-button img{display:block;width:100%;height:100%;object-fit:cover}
.acct-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acct-pop{right:0;left:auto;width:300px;max-height:min(70vh,560px);z-index:75}
.acct-pop .acct-person{display:grid;gap:2px;padding:1px 2px 8px;border-bottom:1px solid var(--line-2)}
.acct-pop .acct-person strong{font-size:13.5px}
.acct-pop .acct-person span,.acct-pop .acct-team-meta{color:var(--ink-3);font-size:12px}
.acct-pop .acct-team{display:grid;gap:2px;padding:0 2px 8px;border-bottom:1px solid var(--line-2);font-size:13px}
.acct-pop .acct-actions{display:grid;gap:2px}
.acct-pop .acct-actions button{width:100%;border:0;background:transparent;color:var(--ink);font:500 13px/1.3 var(--f-body);text-align:left;border-radius:8px;padding:8px 9px;cursor:pointer}
.acct-pop .acct-actions button:hover{background:var(--panel-2)}
.acct-pop .acct-actions button:disabled{opacity:.5;cursor:default}
.acct-pop .acct-switch{display:grid;gap:2px;padding:5px 0;border-bottom:1px solid var(--line-2)}
.acct-pop .acct-switch button{width:100%;border:0;background:transparent;text-align:left;padding:7px 9px;border-radius:8px;cursor:pointer;color:var(--ink-2);font:400 12.5px/1.3 var(--f-body)}
.acct-pop .acct-switch button:hover{background:var(--panel-2);color:var(--ink)}
.acct-dialog{width:min(640px,100%)}
/* SNAPSHOT-1 PORT: Narrow account spacing/checkbox/legal/black-swatch contrast fixes only. */
.acct-pop nav.acct-person{display:block;line-height:1.6}
.acct-dialog form>.field+.field{margin-top:12px}
.invite-form [data-invite-costs] span{display:flex;align-items:center;gap:7px}
.invite-form [data-invite-costs] input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;margin:0}
[data-theme=dark] .sw-b[style*="#111"],[data-theme=dark] .sw-b[style*="#000"],[data-theme=dark] .sw-b[style*="#151"]{outline:1px solid #aaa;outline-offset:-1px}
[data-theme=dark] .sw-b[style*="#232325"],[data-theme=dark] .sw-b[style*="#222326"],[data-theme=dark] .sw-b[style*="#1C1C1C"]{outline:1px solid #aaa;outline-offset:-1px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .sw-b[style*="#111"],:root:not([data-theme=light]) .sw-b[style*="#000"]{outline:1px solid #aaa;outline-offset:-1px}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .sw-b[style*="#232325"],:root:not([data-theme=light]) .sw-b[style*="#222326"],:root:not([data-theme=light]) .sw-b[style*="#1C1C1C"]{outline:1px solid #aaa;outline-offset:-1px}}
/* SNAPSHOT-1 PORT: App-owned project tools; no drawing, Estimate or Catalog restyling. */
/* SNAPSHOT-1 PORT: Editor layout part 2 — removed: Project tools takes the bottom-left group's one button width */
/* SNAPSHOT-1 PORT: Compact spacing, not shortened/wrapped existing labels, at the owner's 1280px desktop boundary. */
/* SNAPSHOT-1 PORT: Editor layout part 2 — removed: Project tools left the top bar for the bottom-left group */
.project-tools-dialog{width:min(940px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box}
.project-tools-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.project-tools-dialog .acts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.project-tools-dialog .field{display:grid;gap:6px;margin:12px 0;min-width:0}
.project-tools-dialog input,.project-tools-dialog select,.project-tools-dialog textarea{min-width:0;max-width:100%;box-sizing:border-box}
.project-tools-dialog fieldset{border:1px solid var(--line);border-radius:8px;padding:12px;margin:12px 0;min-width:0}
.project-check{display:flex;align-items:center;gap:8px;margin:8px 0;overflow-wrap:anywhere}
.project-check input[type=checkbox]{width:16px;height:16px;flex:0 0 16px;margin:0}
.project-request,.project-checklist,.project-delivery{border-top:1px solid var(--line);padding:12px 0;overflow-wrap:anywhere}
.project-tools-dialog dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 12px}
.project-tools-dialog dd{margin:0;white-space:pre-wrap}
.project-tools-dialog dt{font-weight:600}
.project-dimension-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.project-dimension-line{border:1px solid var(--line);border-radius:8px;padding:12px;display:grid;align-content:start;gap:5px}
.project-dimension-line p{margin:4px 0}
.project-pair{width:180px;max-width:100%;height:48px}
.project-version-picture{display:block;max-width:100%;height:auto}
.project-notice{font:13px/1.5 var(--f-body);background:var(--panel-2);color:var(--ink);padding:8px 16px;display:flex;align-items:center;gap:12px;justify-content:space-between;overflow-wrap:anywhere}
.project-notice span{min-width:0}
/* SNAPSHOT-1 PORT: Keep the notice dismissal intact beside wrapped phone text. */
.project-notice button{flex-shrink:0;white-space:nowrap;overflow-wrap:normal}
.project-export-approval{white-space:normal;overflow-wrap:anywhere;display:block}
.project-version-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}
.vp-list li:has(.project-version-actions){flex-wrap:wrap}
.project-partners>summary{cursor:pointer;padding:10px 0;font-weight:600}
.project-partners section{padding:8px 0}.project-partners ul{padding-left:20px}
.project-presence{display:flex;gap:3px;flex:0 0 auto}
/* SNAPSHOT-1 PORT: Share the existing title/address rows without growing or wrapping the toolbar on joins. */
.tb-plan:has(> .project-presence){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px}
.tb-plan > .project-presence{grid-column:2;grid-row:1 / span 2;align-self:center}
.project-avatar{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:11px var(--f-body);cursor:pointer}
/* SNAPSHOT-1 PORT: Presence names are equally available on pointer hover and keyboard focus. */
.project-avatar{position:relative}
.project-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.project-presence-name{display:none;position:absolute;top:32px;right:0;z-index:90;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 8px;width:220px;max-width:calc(100vw - 40px);white-space:normal;overflow-wrap:anywhere;font:12px var(--f-body);box-shadow:0 3px 10px #0002}
.project-avatar:hover .project-presence-name,.project-avatar:focus .project-presence-name{display:block}
/* SNAPSHOT-1 PORT: Task 78 — the who's-here name box has its own readable text (a coloured picture's white text no longer carries into it), its own shadow per look, and a dot in the person's live colour (none without one). */
.project-presence-name{color:var(--ink);font:400 12px/1.45 var(--f-body);text-align:left;box-shadow:0 3px 10px rgba(0,0,0,.13)}
:root[data-theme="dark"] .project-presence-name{box-shadow:0 3px 10px rgba(0,0,0,.4)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .project-presence-name{box-shadow:0 3px 10px rgba(0,0,0,.4)}}
.project-avatar[class*="lc-c"] .project-presence-name::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lc);margin-right:6px;vertical-align:middle}
:root[data-theme="dark"] .project-avatar[class*="lc-c"] .project-presence-name::before{background:var(--lc-dark)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .project-avatar[class*="lc-c"] .project-presence-name::before{background:var(--lc-dark)}}
@media(max-width:700px){.project-tools-dialog{width:100%;max-height:100dvh;border-radius:0;margin:0}.project-tools-scrim{padding:0;align-items:stretch}.project-dimension-lines{grid-template-columns:1fr}.project-tools-dialog dl{grid-template-columns:1fr}.project-tools-dialog dd{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.project-tools-dialog,.project-notice{animation:none;transition:none}}
.acct-dialog .team-list,.acct-dialog .invite-list{display:grid;gap:0}
.acct-dialog .team-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.acct-dialog .team-person{display:grid;min-width:0;gap:2px}
.acct-dialog .team-person strong,.acct-dialog .team-person span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-dialog .team-person strong{font-size:13px}
.acct-dialog .team-person span{font-size:12px;color:var(--ink-3)}
.acct-dialog .team-role{max-width:138px;border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 9px;color:var(--ink);font:500 12.5px/1.2 var(--f-body);min-height:32px}
.acct-dialog .team-role-label{font-size:12.5px;color:var(--ink-2)}
.acct-dialog .invite-list{margin-top:8px}
.acct-dialog .team-error{color:var(--fail);font-size:13px;margin:0}
.acct-dialog .team-note{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.acct-dialog .invite-form{display:grid;grid-template-columns:minmax(0,1fr) 145px auto;align-items:end;gap:8px}
.acct-dialog .team-loading{color:var(--ink-2);padding:12px 0}
@media(max-width:540px){
  .acct-pop{position:fixed;top:56px;right:8px;max-width:calc(100vw - 16px)}
  .acct-dialog .team-row{grid-template-columns:minmax(0,1fr) auto}
  .acct-dialog .team-role{grid-column:2;grid-row:1}
  .acct-dialog .invite-form{grid-template-columns:1fr 1fr}
  .acct-dialog .invite-form .field:first-child{grid-column:1/-1}
  .acct-dialog .invite-form button{grid-column:1/-1}
}
.cost-r.sub{border-top:1px solid var(--line);margin-top:3px;padding-top:7px;color:var(--ink)}
.cost-r.tot{border-top:1.5px solid var(--ink);margin-top:5px;padding-top:8px;color:var(--ink);font-weight:600}
.est-det{border-top:1px solid var(--line-2)}
.est-det>summary{cursor:pointer;font:500 13px/1.3 var(--f-body);padding:9px 0;color:var(--ink)}
.cost-aside .est-det{margin-top:14px}
.cost-aside .est-mk{grid-template-columns:1fr}
.est-wrap{overflow-x:auto;min-width:0}
/* SNAPSHOT-1 PORT: Remove the v84 estimate heading override; scoped v83 heading/padding rules below. */
.est-t tr.div td{font-size:12.5px}
.est-t tr.on td:first-child{padding-left:22px;color:var(--ink-2)}
.est-t tr.unp td{color:var(--ink-2)}
.est-t td.n .muted{white-space:nowrap}
.cost-main .est-head{margin:4px 0 12px}
.q-cols{columns:3 300px;column-gap:28px;padding:16px 20px 20px}
.q-blk{break-inside:avoid;margin:0 0 18px}
.q-blk .s3-h{margin-top:0}
.q-foot{column-span:all}

/* Export: what to save, as cards you pick from */
.xp-kinds{display:grid;gap:8px}
.xp-kinds .s3-h{margin:0}
.xp-opt{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:8px}
.xp-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.xp-r{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px}
.xp-r input{margin:2px 0 0;flex:none}
.xp-r strong{display:block;font-weight:600}
.xp-r small{display:block;margin-top:2px;font-size:12px;color:var(--ink-3)}
.xp-sub{display:flex;flex-wrap:wrap;gap:6px 14px;padding-left:24px}
.xp-sub .tog{margin-left:0}
.xp-foot{position:sticky;bottom:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;margin:0 -14px;padding:12px 14px;background:var(--panel);border-top:1px solid var(--line)}
.xp-foot .btn{min-height:38px;padding:0 16px}
/* SNAPSHOT-1 PORT: Task 111 (calmer Export, layout A1) — three tiles (PDF, Image, Site Dimensions) and small buttons (Estimate, Lists, Plan file); their radios
   stay real inputs stretched over each tile, invisible but reached by a click. The chosen save's settings in plain groups, no box inside a box; the page list's rows
   are tighter; Title block and North arrow are one line each with Change; the ⓘ bubble on Scope and procurement; the shade study's chips. */
.xp-a1{gap:8px}
.xp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}
.xp-tile,.xp-small{position:relative;cursor:pointer;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink)}
.xp-tile{display:grid;align-content:start;gap:2px;padding:8px 10px}
.xp-tile strong{font:600 13px/1.2 var(--f-body)}
.xp-tile small{font:400 11.5px/1.3 var(--f-body);color:var(--ink-3)}
.xp-tile input,.xp-small input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.xp-tile:hover,.xp-small:hover{border-color:var(--ink-3)}
.xp-tile.on,.xp-small.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.xp-tile:focus-within,.xp-small:focus-within{outline:2px solid var(--primary);outline-offset:2px}
.xp-smalls{display:flex;flex-wrap:wrap;gap:6px}
.xp-small{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;font:500 12.5px/1.2 var(--f-body);color:var(--ink-2)}
.xp-small.on{color:var(--ink)}
@media(max-width:700px),(pointer:coarse){.xp-small{min-height:36px;padding:7px 14px}}
body.ma-guest .xp-small:has(input[value="json"]){display:none}
.xp-body.xp-opt,.xp-body.xp-opt.on{border:0;box-shadow:none;border-radius:0;padding:0;gap:0;display:block}
.xp-group{padding:12px 0;border-top:1px solid var(--line)}
.xp-group:first-child{border-top:0;padding-top:4px}
.xp-gh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.xp-gh .s3-h{margin:0}
.xp-hint{margin:0 0 4px}
.xp-body .xp-togs{gap:4px 12px;margin:4px 0 0}
.xp-body .xp-togs .tog{margin-left:0}
.xp-body .xp-sections{margin-top:2px}
.xp-body .xp-section{height:auto;min-height:32px;border-radius:6px;flex-wrap:wrap;column-gap:6px;row-gap:0}
.xp-body .xp-grip{width:22px;height:30px}
.xp-body .xp-order-note{margin-top:6px}
.xp-lines{display:grid;gap:2px}
.xp-line{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:8px;min-height:30px;font-size:12.5px}
.xp-line-h{font-weight:600;color:var(--ink)}
.xp-line-v{color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-more{padding:4px 0 8px}
.xp-more[hidden]{display:none}
.xp-iw{position:relative;display:inline-flex;align-items:center}
.xp-info{width:16px;height:16px;padding:0;border:1px solid var(--ink-3);border-radius:999px;background:transparent;color:var(--ink-2);font:italic 600 10px/1 Georgia,serif;display:grid;place-items:center;cursor:pointer}
.xp-info:hover,.xp-info[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.xp-info:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.xp-bubble{position:absolute;z-index:8;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:248px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow);font:400 12.5px/1.45 var(--f-body);display:none}
.xp-iw.open .xp-bubble{display:block}
.xp-bubble b{font-weight:600}
.xp-study{flex-basis:100%;padding:0 0 6px 58px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px;color:var(--ink-2)}
.xp-study-line{flex:1;min-width:0}
.xp-study-note{flex-basis:100%;margin:0;color:var(--bad,#B42318)}
.xp-chips{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px 0;background:var(--panel-2);margin:0 -2px}
.xp-chips:first-of-type{border-radius:10px 10px 0 0;padding-top:8px}
.xp-chips-h{width:44px;font-weight:600;color:var(--ink-2)}
.xp-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font:500 12px/1.2 var(--f-body);color:var(--ink)}
.xp-chip-x{width:18px;height:18px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink-3);cursor:pointer;font:400 13px/1 var(--f-body)}
.xp-chip-x:hover{background:var(--panel-2);color:var(--ink)}
.xp-chip-x:disabled{opacity:.35;cursor:default}
.xp-chip-add{padding:3px 10px;border:1px dashed var(--ink-3);border-radius:999px;background:transparent;color:var(--ink);font:500 12px/1.2 var(--f-body);cursor:pointer}
.xp-pick{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:8px;margin:0 -2px;background:var(--panel-2)}
.xp-pick .field{margin:0}
.xp-times{gap:4px;max-height:132px;overflow:auto}
.xp-time{padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:500 12px/1.2 var(--f-body);cursor:pointer}
.xp-time:disabled{opacity:.4;cursor:default}
.xp-chips-foot{flex-basis:100%;display:flex;justify-content:space-between;padding:8px;margin:0 -2px;background:var(--panel-2);border-radius:0 0 10px 10px}
@media print{.xp-info,.xp-bubble{display:none!important}}
@media(max-width:600px){.xp-tiles{grid-template-columns:1fr 1fr}.xp-line{grid-template-columns:84px 1fr auto}.xp-study{padding-left:30px}}

/* the sun card, on the plan above the scale bar */
.style-switch .ss-sun{display:inline-flex;align-items:center;gap:5px}
.style-switch .ss-sun svg{width:15px;height:15px}
.style-switch .ss-sun[aria-pressed="true"]{background:#FBF0DC;color:#7A4A00}
/* SNAPSHOT-1 PORT: wave 3 F — Sun shows in 3D too (the rule hiding it there is gone), and the Sun card's rules are gone with the card.
   The Sun and Sightlines bars (picture f1): white, under the view buttons and right-aligned with them, the same on the plan and in 3D;
   while one is open the corner north arrow (C's --north-top) sits 8 px below it. The Sightlines button sits after Sun. */
.style-switch .ss-sight{display:inline-flex;align-items:center;gap:5px}
.style-switch .ss-sight svg{width:15px;height:15px}
.style-switch .ss-sight[aria-pressed="true"]{background:#E3ECFB;color:#1F4E9C}
.sun-bar{position:absolute;right:10px;top:56px;z-index:6;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;box-sizing:border-box;min-height:38px;max-width:calc(100% - 20px);background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:3px 12px 3px 3px;box-shadow:var(--shadow);font:500 12.5px/1.2 var(--f-body);color:var(--ink)}
.sun-bar button{display:inline-flex;align-items:center;gap:5px;flex:none;border:0;background:transparent;border-radius:999px;padding:5px 10px;min-height:30px;font:inherit;color:var(--ink-2);cursor:pointer}
.sun-bar button:hover{color:var(--ink);background:var(--panel-2)}
.sun-bar button:focus-visible,.sun-bar .sb-clock:focus-visible,.sun-bar .sb-time:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.sun-bar button[aria-pressed="true"]{background:var(--sunk);color:var(--ink)}
.sun-bar .sb-day{color:var(--ink);font-weight:600}
.sun-bar .sb-day[aria-expanded="true"]{background:var(--sunk)}
.sun-bar .sb-chev{width:10px;height:10px}
.sun-bar .sb-time{width:180px;margin:0 2px;accent-color:#C77D0A;cursor:pointer}
.sun-bar .sb-clock{min-width:50px;font-variant-numeric:tabular-nums;font-weight:600;cursor:help;border-radius:6px;padding:2px 0}
.sun-bar .sb-north{display:inline-flex;align-items:center;gap:2px;margin-left:2px;padding-left:9px;border-left:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.sun-bar .sb-link{padding:4px 5px;min-height:0;color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.sun-bar .sb-note{padding:0 9px;color:var(--ink-2)}
.sun-bar .sb-seg{display:inline-flex;gap:2px;background:var(--panel-2);border-radius:999px;padding:2px}
.sun-bar .sb-seg button{padding:4px 11px;min-height:26px}
.sun-bar .sb-seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.sun-bar .sb-clear{color:var(--ink-3)}
.sun-bar .q-tip{margin-left:2px}
.sun-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:9;min-width:240px;box-sizing:border-box;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:5px}
.sun-menu button{width:100%;justify-content:flex-start;gap:8px;border-radius:8px;padding:7px 10px}
.sun-menu .sm-c{width:12px;color:var(--ink);font-weight:600}
.sun-menu .sm-l{min-width:52px;color:var(--ink);font-weight:600;text-align:left}
.sun-menu .sm-n{margin-left:auto;color:var(--ink-3)}
.sun-menu .sm-sep{height:1px;background:var(--line);margin:4px 6px}
.sun-menu .sm-pick{display:flex;gap:8px;padding:6px 10px 6px 30px}
.sun-menu .sm-pick label{display:grid;gap:3px;font-size:11.5px;color:var(--ink-2)}
.sun-menu .sm-pick select{font:500 12.5px/1.2 var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:5px 6px;min-height:30px}
#stage.sunbar-on{--north-top:102px}
.stage.capturing .sun-bar,.stage.xp .sun-bar{display:none}
/* the Place row in Details, first, above Description (a chosen latitude and longitude show their boxes below it) */
.details-pop .dp-place{display:grid;gap:8px;margin-bottom:10px}
.details-pop .dp-place:empty{display:none}
.details-pop .dp-place .s3-grid{grid-template-columns:1fr 1fr}
.details-pop .dp-place .s3-grid>.field:last-child{grid-column:1 / -1}
@media (max-width:700px){
  .sun-bar{left:10px;right:10px;top:auto;bottom:calc(104px + env(safe-area-inset-bottom));max-width:none;justify-content:center;border-radius:14px}
  .sun-bar .sb-time{flex:1 1 120px;width:auto}
  .sun-bar .sb-north.sb-wrapped{flex:1 0 100%;margin-left:0;padding-left:10px;border-left:0} /* phones: wrapped to its own row, no divider, starting in line with the day button */
  #stage.sunbar-on{--north-top:56px}
  .sun-menu{top:auto;bottom:calc(100% + 6px)}
  .style-switch .ss-sight span{display:none} /* phones: Sightlines is its eye (named by its aria-label and title), so 3D stays in view */
  .style-switch .ss-mk span{display:none} /* SNAPSHOT-1 PORT: wave 3 J — phones: Markup is its icon too (named by its aria-label and title) */
  .style-switch button{padding-left:8px;padding-right:8px} /* phones: every view button, 3D included, fits inside the row (no sideways scroll) */
}
@media (max-width:380px){.style-switch button{padding-left:6px;padding-right:6px}} /* small phones (360–375 px): the same, with less room */

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .style-switch .ss-sun[aria-pressed="true"]{background:#4A3510;color:#FBE2B4}}
:root[data-theme="dark"] .style-switch .ss-sun[aria-pressed="true"]{background:#4A3510;color:#FBE2B4}
/* SNAPSHOT-1 PORT: wave 3 F — the pressed Sightlines button in the dark look */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .style-switch .ss-sight[aria-pressed="true"]{background:#1D3557;color:#CFE0FF}}
:root[data-theme="dark"] .style-switch .ss-sight[aria-pressed="true"]{background:#1D3557;color:#CFE0FF}

@media (max-width:1100px){.cost-body{grid-template-columns:minmax(0,1fr)}.cost-aside{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:900px){
  .tb-win .tb-l{display:none}
  .editor.win-costs,.editor.win-export{grid-template-columns:minmax(0,1fr);gap:0}
  .editor.win-costs{grid-template-rows:auto auto}
  .editor.win-costs .rail,.editor.win-export .rail{display:none}
  .editor.win-costs .win-h,.editor.win-export .win-h{grid-column:1;grid-row:1}
  .editor.win-costs .side{grid-column:1;grid-row:2}
  .editor.win-export{grid-template-rows:auto 56vh auto}
  .editor.win-export .stage{grid-column:1;grid-row:2;border-radius:0}
  .editor.win-export .side{grid-column:1;grid-row:3;border-left:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px}
  .win-h .wh-note{order:3;flex-basis:100%}
  .cost-main{padding:14px 14px 18px}
  .cost-aside{padding:14px}
  .q-cols{padding:14px}
  .xp-foot{position:static}
  /* SNAPSHOT-1 PORT: wave 3 F — the Sun card's narrow-screen rules went with the card */
  .est-addf{grid-template-columns:minmax(0,1fr)}
  .est-t input{width:60px}
  .est-t th,.est-t td{padding:4px 3px}
  .est-t td.n .muted{white-space:normal}
  .cost-card{flex:1 1 96px;padding:10px 11px}
  .cost-card strong{font-size:17px}
}
.est-addf>*{min-width:0}
/* in Export, the plan's switch keeps only the plan styles: the rest don't change what prints */
.stage.xp .style-switch .ss-sep,.stage.xp .style-switch .ss-dims,.stage.xp .style-switch .ss-sun,.stage.xp .style-switch .ss-sight,.stage.xp .style-switch .ss-mk,.stage.xp .style-switch .ss-3d{display:none} /* SNAPSHOT-1 PORT: wave 3 F — Sightlines never prints; wave 3 J — nor the Markup view button (Markup's own tick prints it) */

/* ---------- v84: the play area ---------- */
#ov .pa-sel{fill:none;stroke:#2D6CDF;stroke-width:2;pointer-events:none}
#ov .pa-h{fill:#fff;stroke:#2D6CDF;stroke-width:2;cursor:nwse-resize}
#ov .pa-h.side{cursor:ew-resize}
#ov .pa-dim{cursor:text}
.hint{top:56px}
.pa-panel .pa-shape{margin:2px 0 4px}
.pa-panel .pa-stats{margin:2px 0 0}
.pa-panel .pa-det>summary{display:flex;align-items:center;gap:8px}
.pa-panel .pa-det>summary::before{content:'';width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;flex:none;transition:transform .15s}
.pa-panel .pa-det[open]>summary::before{transform:rotate(90deg)}
.pa-panel .pa-det>summary{list-style:none}
.pa-panel .pa-det>summary::-webkit-details-marker{display:none}
.pa-panel .pa-det>summary .pip-sw{width:16px;height:16px;border-radius:5px;flex:none;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.pa-panel .pa-in{display:grid;gap:10px;padding:2px 0 10px}
.pa-panel .pa-mix{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 2px}
.pa-panel .pa-gen{min-height:38px;padding:0 18px}
.pa-panel .pa-end{margin-top:6px}
.editor.win-costs .panel>:not(.cost-body):not(.q-cols){margin:16px 20px}
/* SNAPSHOT-1 PORT: Owner-approved body headings, pushing session panel and ordered PDF controls, screen only. */
.editor.win-costs #panel>.cost-heading{margin:0;padding:16px 20px 0;display:flex;align-items:baseline;gap:14px}
.cost-heading h2{margin:0;font:700 21px/1.2 var(--f-body);letter-spacing:-.015em}
.cost-heading span{flex:1;min-width:0;font:400 14px/1.4 var(--f-body);color:var(--ink-2)}
.cost-body{grid-template-columns:minmax(0,1fr) auto;min-height:0}
.cost-body .cost-aside{width:0;padding:0;overflow:hidden;border:0;display:block;transition:width 280ms cubic-bezier(.4,0,.2,1)}
.cost-body.panel-open .cost-aside{width:336px;transition:width 440ms cubic-bezier(.32,.72,0,1)}
.cost-aside-inner{box-sizing:border-box;width:336px;padding:16px 18px 20px;border-left:1px solid var(--line);opacity:0;transform:translateX(32px);transition:opacity 140ms ease,transform 280ms cubic-bezier(.4,0,.2,1)}
.panel-open .cost-aside-inner{opacity:1;transform:translateX(0);transition:opacity 240ms ease 60ms,transform 460ms cubic-bezier(.32,.72,0,1) 20ms}
.cost-aside-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cost-aside-head h3{margin:0}
.cost-panel-toggle{border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.cost-panel-toggle .panel-pane{fill:none}
.cost-panel-toggle[aria-expanded=true]{background:#111112;color:#fff;border-color:#111112}
.cost-panel-toggle[aria-expanded=true] .panel-pane{fill:currentColor}
.est-account-sheet .est-t th{font:700 12.5px/1.2 var(--f-body);color:var(--ink)}
.est-account-sheet .est-t th,.est-account-sheet .est-t td{padding:4px 6px}
.est-summary-name{display:flex;align-items:center;gap:6px}
.est-summary-name .est-desc{flex:1;min-width:100px}
.est-summary-name .link{flex:none;color:var(--ink-2)}
.est-summary-edit[hidden]{display:none}
/* SNAPSHOT-1 PORT: Owner-approved laptop-only row correspondence; no geometry/motion/export changes. */
@media(min-width:901px){
  .cost-body.panel-open .cost-r[data-cost-match]{cursor:pointer;transition:background-color 150ms ease}
  .cost-body.panel-open .cost-match-active{background:var(--panel)}
  .cost-r[data-cost-match]:focus-visible{outline-offset:-2px}
  .est-account-sheet [data-cost-rows]>td{position:relative;transition:background-color 150ms ease}
  .est-account-sheet [data-cost-rows]>td:first-child::after{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--accent);opacity:0;transition:opacity 150ms ease;pointer-events:none}
  .cost-body.panel-open .cost-highlight>td{background-color:rgba(91,182,49,.12);color:var(--ink)}
  .cost-body.panel-open .cost-highlight>td:first-child::after{opacity:1}
}
.panel-enter .cost-r{animation:cost-row-fade 280ms ease both,cost-row-rise 360ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(140ms + var(--cost-row,0)*24ms)}
.cost-aside .cost-r.sub,.cost-aside .cost-r.tot{position:relative;border-top-color:transparent}
.cost-aside .cost-r.sub::before,.cost-aside .cost-r.tot::before{content:"";position:absolute;top:-1px;left:0;right:0;border-top:1px solid var(--line);transform-origin:left}
.panel-enter .cost-r.sub::before,.panel-enter .cost-r.tot::before{animation:cost-rule 420ms cubic-bezier(.32,.72,0,1) both;animation-delay:calc(220ms + var(--cost-row,0)*24ms)}
.panel-enter .cost-r:last-of-type{animation:cost-row-fade 280ms ease both,cost-row-rise 360ms cubic-bezier(.2,.8,.2,1) both,cost-glow 1.2s ease-out 600ms;animation-delay:calc(140ms + var(--cost-row,0)*24ms),calc(140ms + var(--cost-row,0)*24ms),600ms}
.panel-enter .est-det{animation:cost-row-fade 300ms ease 520ms both}
@keyframes cost-row-fade{from{opacity:0}to{opacity:1}}
@keyframes cost-row-rise{from{transform:translateY(4px)}to{transform:translateY(0)}}
@keyframes cost-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cost-glow{0%,100%{background:transparent}30%{background:rgba(91,182,49,.18)}}
.xp-sections{margin-top:10px;position:relative}
.xp-section{position:relative;box-sizing:border-box;height:44px;border-radius:10px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:6px;padding-right:7px}
.xp-section:hover{background:var(--panel-2)}
.xp-grip{flex:none;width:28px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;display:grid;place-items:center;cursor:grab;touch-action:none;color:var(--ink-3)}
.xp-grip .lib-grip{position:static;width:12px;height:18px;opacity:.6;fill:currentColor}
.xp-grip:hover .lib-grip,.xp-grip:focus-visible .lib-grip{opacity:1}
.xp-grip:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.xp-section input{flex:none;margin:0}
.xp-number{font:400 12px var(--f-body);font-variant-numeric:tabular-nums;color:var(--ink-3);min-width:9px}
.xp-name{font:500 13px var(--f-body)}
.xp-section.excluded .xp-name{color:var(--ink-3)}
.xp-fixed{margin-left:auto;font:400 12px var(--f-body);color:var(--ink-3)}
.xp-order-note{display:flex;align-items:start;gap:8px;margin-top:8px;font:400 11px/1.4 var(--f-body);color:var(--ink-2)}
.xp-order-note span{flex:1}.xp-order-note .link{flex:none}.xp-order-note [hidden]{display:none}
.reordering .xp-section{transition:transform 170ms cubic-bezier(.2,.8,.2,1)}
.reordering .xp-section.dragging{z-index:3;width:calc(100% / 1.015);margin-inline:auto;background:var(--panel);color:var(--ink);box-shadow:var(--shadow-lg,0 12px 30px rgba(0,0,0,.18));transition:none} /* SNAPSHOT-1 PORT: Task 111 — the dragged row uses the theme variables, light and dark. */
.xp-section.dragging .xp-name{color:var(--ink)}.xp-section.dragging .xp-number,.xp-section.dragging .xp-fixed,.xp-section.dragging .xp-grip{color:var(--ink-3)}
.xp-section.order-flash{animation:order-flash 900ms ease-out}
@keyframes order-flash{from{background:rgba(91,182,49,.2)}to{background:transparent}}
@media(max-width:900px){.cost-body{display:block}.cost-body .cost-aside{width:100%;transition:none}.cost-body:not(.panel-open) .cost-aside{display:none}.cost-body.panel-open .cost-aside{width:100%;transition:none}.cost-aside-inner,.panel-open .cost-aside-inner{width:100%;border-left:0;border-top:1px solid var(--line);transition:none}.panel-enter .cost-r,.panel-enter .cost-r::before,.panel-enter .est-det{animation:none!important}.editor.win-costs #panel>.cost-heading{padding:14px 14px 0}.editor.win-costs .win-h{flex-wrap:wrap}.editor.win-costs .wh-acts{flex-wrap:wrap;justify-content:flex-end}}
@media(prefers-reduced-motion:reduce){.cost-body .cost-aside,.cost-body.panel-open .cost-aside,.cost-aside-inner,.panel-open .cost-aside-inner,.reordering .xp-section{transition:none}.reordering .xp-section.dragging{width:100%}.panel-enter .cost-r,.panel-enter .cost-r::before,.panel-enter .est-det,.xp-section.order-flash{animation:none!important}}
/* SNAPSHOT-1 PORT: Owner-approved session-only linked takeoff; off-state table and existing phone controls unchanged. */
.win-costs .win-h,.win-costs .wh-acts{flex-wrap:wrap}
body:has(#panel.linked-open) .topbar{flex-wrap:wrap;flex:none}
[data-act="linked-plan"][aria-pressed="true"]{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.editor.win-costs #panel.linked-open{display:flex;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.editor.win-costs #panel.linked-open>.cost-heading{flex:none;padding-bottom:12px}
.editor.win-costs #panel.linked-open>.linked-layout{margin:0}
.linked-layout{display:grid;grid-template-columns:clamp(260px,35%,480px) minmax(0,1fr);flex:1;min-height:0;min-width:0;gap:0}
.editor.win-costs .linked-plan{display:block;grid-column:auto;grid-row:auto;margin:0 0 16px 16px;box-shadow:none;touch-action:none;user-select:none;cursor:grab;min-width:0}
.linked-plan:active{cursor:grabbing}
#linkedDrawing,#linkedOutline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#linkedOutline{overflow:hidden}
#linkedOutline path{vector-effect:non-scaling-stroke}
#linkedOutline g{fill:none;stroke-linecap:round;stroke-linejoin:round}
.linked-contrast{stroke:#FFFFFF;stroke-width:6}
.linked-cyan{stroke:#00B8D9;stroke-width:3}
:root[data-theme="dark"] .linked-contrast{stroke:#111112}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .linked-contrast{stroke:#111112}}
#linkedOutside{position:absolute;left:8px;right:8px;top:8px;margin:0;padding:5px 8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;font-size:12px;pointer-events:none}
.linked-zoom{position:absolute;bottom:8px;right:8px;display:flex;gap:4px}
.linked-lists{overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain}
.linked-lists .q-cols{columns:2 260px;padding:0 16px 16px}
.linked-lists .q-blk{min-width:0}
.linked-lists .qt{table-layout:fixed;width:100%}
.linked-lists .qt td:first-child{width:auto;overflow-wrap:anywhere}
.linked-lists .qt td:nth-child(2){width:64px}
.linked-lists .qt td:nth-child(3){width:62px}
.linked-lists .qt td:nth-child(4){width:60px}
.linked-lists .src{white-space:normal}
.linked-lists .est-sheet{padding:0 14px 16px}
.linked-lists .est-head{grid-template-columns:repeat(2,minmax(0,1fr))}
.linked-lists .est-wrap{overflow:visible}
.linked-lists .est-t{table-layout:fixed;width:100%;min-width:0;font-size:12px}
.linked-lists .est-t td,.linked-lists .est-t th{overflow-wrap:anywhere;padding:7px 4px}
.linked-lists .est-detail th:first-child{width:65px}
.linked-lists .est-t th:nth-child(2){width:auto}
.linked-lists .est-t th:nth-child(3){width:65px}
.linked-lists .est-t th:nth-child(4){width:36px}
.linked-lists .est-t th:nth-child(5){width:74px}
.linked-lists .est-t th:nth-child(6){width:84px}
.linked-lists .est-t th:nth-child(7){width:36px}
.linked-lists .est-t input{max-width:100%;min-width:0}
.linked-lists .est-addf{display:flex;flex-wrap:wrap}
.linked-lists .est-addf>*{min-width:0;max-width:100%;flex:1 1 90px}
.linked-lists .cost-body{display:block}
.linked-lists .cost-body .cost-aside{width:100%;transition:none}
.linked-lists .cost-body:not(.panel-open) .cost-aside{display:none}
.linked-lists .cost-aside-inner{width:100%;border-left:0;border-top:1px solid var(--line)}
[data-plan-link]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(min-width:901px) and (max-width:1200px){.linked-layout{grid-template-columns:clamp(220px,30%,300px) minmax(0,1fr)}.linked-lists .est-t{font-size:11px}.linked-lists .est-detail th:first-child{width:52px}.linked-lists .est-t th:nth-child(3){width:54px}.linked-lists .est-t th:nth-child(5){width:62px}.linked-lists .est-t th:nth-child(6){width:70px}}
/* SNAPSHOT-1 PORT: Owner correction: desktop linked sheets reflow rather than squeeze, clip or shrink text. */
@media(min-width:901px){
  .linked-lists{container:linkedLists / inline-size}
  .linked-lists .cost-main{container:linkedSheet / inline-size}
  .linked-lists .q-cols{columns:1}
  .linked-lists .qt{table-layout:auto}
  .linked-lists .qt td:first-child{overflow-wrap:normal;word-break:normal}
  .linked-lists .qt .src{white-space:nowrap}
  .linked-lists .est-account-sheet .est-t{table-layout:auto;font-size:12.5px;min-width:0}
  .linked-lists .est-account-sheet .est-t th,.linked-lists .est-account-sheet .est-t td{overflow-wrap:normal;word-break:normal;hyphens:none;padding:4px 6px}
  .linked-lists .est-account-sheet .est-t th{width:auto}
  .linked-lists .est-account-sheet .est-detail th:first-child{width:105px}
  .linked-lists .est-account-sheet .est-t input{width:112px;max-width:100%;font-size:12.5px}
  .linked-lists .est-account-sheet .est-t .est-unit{width:60px}
  .linked-lists .est-account-sheet .est-t .est-desc{width:100%}
  .linked-lists .est-account-sheet .est-head{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
  .linked-lists .est-addf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
  .linked-lists .est-detail tr.div td:first-child,.linked-lists .est-t .n,.linked-lists .est-t button{white-space:nowrap}
  .linked-lists .cost-body{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .linked-lists .cost-body .cost-aside{width:0}
  .linked-lists .cost-body.panel-open .cost-aside{width:336px}
  .linked-lists .cost-aside-inner{width:100%;border-top:0;border-left:1px solid var(--line)}
  .linked-lists .cost-aside .cost-r{flex-wrap:wrap;gap:4px 10px}
  .linked-lists .cost-aside .cost-r>span{flex:1 1 160px;min-width:0}
  .linked-lists .cost-aside .cost-r>strong{margin-left:auto}
  @container linkedLists (max-width:840px){
    .linked-lists .cost-body.panel-open .cost-aside{width:clamp(180px,35cqw,300px)}
    .linked-lists .cost-body.panel-open .cost-main{padding-left:10px;padding-right:10px}
  }
  @container linkedSheet (max-width:1040px){
    .linked-lists .est-wrap{overflow:visible}
    .linked-lists .est-account-sheet .est-t,.linked-lists .est-t thead,.linked-lists .est-t tbody{display:block;width:100%}
    .linked-lists .est-t thead tr{display:flex;flex-wrap:wrap;gap:4px 12px;border-bottom:1px solid var(--line)}
    .linked-lists .est-account-sheet .est-t th{display:block;width:auto;white-space:nowrap;border:0}
    .linked-lists .est-t tbody tr{display:grid;position:relative;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:4px 12px;border-bottom:1px solid var(--line);padding:10px 0}
    .linked-lists .est-account-sheet .est-t td{display:block;min-width:0;width:auto;text-align:left;border:0}
    .linked-lists .est-t td::before{content:attr(data-linked-label);display:block;white-space:nowrap;font-weight:600;color:var(--ink-2);margin-bottom:4px}
    .linked-lists .est-t td:empty{display:none}
    .linked-lists .est-t td:nth-child(2),.linked-lists .est-t tr.grp td{grid-column:1/-1;white-space:normal}
    .linked-lists .est-detail tr.div{display:flex;flex-wrap:wrap;align-items:baseline}
    .linked-lists .est-detail tr.div td:first-child,.linked-lists .est-detail tr.div td.n{flex:0 0 auto}
    .linked-lists .est-detail tr.div td:nth-child(2){flex:1 1 180px}
    .linked-lists .est-summary-name{flex-wrap:wrap}
    .linked-lists .est-account-sheet .est-summary-name .est-desc{flex:1 1 220px}
    .linked-lists .est-summary-edit label{min-width:112px}
    .linked-lists .cost-body.panel-open .est-t tr.cost-highlight{background:rgba(91,182,49,.12)}
    .linked-lists .cost-body.panel-open .est-t tr.cost-highlight>td{background:transparent}
    .linked-lists .est-account-sheet [data-cost-rows]>td:first-child::after{display:none}
    .linked-lists .est-t tr.cost-highlight::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);pointer-events:none}
  }
}
@media(max-width:900px){
  #app:has(#panel.linked-open){height:100dvh;min-height:0;overflow:hidden}
  .editor.win-costs:has(.linked-open){flex:1 1 0;min-height:0;grid-template-rows:auto minmax(0,1fr)}
  .editor.win-costs:has(.linked-open) .side{min-height:0;overflow:hidden}
  .linked-layout{display:flex;flex-direction:column;min-height:0}
  .editor.win-costs .linked-plan{flex:0 0 clamp(160px,26vh,220px);height:clamp(160px,26vh,220px);margin:0 10px 10px}
  .linked-lists{flex:1}
  .linked-lists .q-cols{columns:1}
  .linked-lists .est-t{font-size:11px}
  .linked-lists .est-detail th:first-child{width:36px}
  .linked-lists .est-t th:nth-child(3){width:48px}
  .linked-lists .est-t th:nth-child(4){width:28px}
  .linked-lists .est-t th:nth-child(5){width:54px}
  .linked-lists .est-t th:nth-child(6){width:58px}
  .linked-lists .est-t th:nth-child(7){width:26px}
  [data-plan-name]{cursor:pointer}
}

/* SNAPSHOT-1 PORT: Launch polish item 1 — dark mode only: every plan name is light text on the near-black outline (#19191B), at least 4.5:1; colored names keep their hue, lightened. Light mode is unchanged. */
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl.bldl{fill:#F2F2F3}
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl.space{fill:#C9BCFF}
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl.tag{fill:#F2C48D}
:root[data-theme="dark"] .stage:not(.sheet-light) :is(.lbl.tag.over,.lbl.fit){fill:#72DB9A}
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl.fit.warn{fill:#FFC56B}
:root[data-theme="dark"] .stage:not(.sheet-light) .lbl.eye-l{fill:#91CAFF}
:root[data-theme="dark"] .stage:not(.sheet-light) #ov .dimlbl{fill:#91CAFF}
:root[data-theme="dark"] .stage:not(.sheet-light) #ov .dim-bg{stroke:#91CAFF}
:root[data-theme="dark"] .stage:not(.sheet-light) .fire-t{fill:#FF9D98;paint-order:stroke;stroke:#19191B;stroke-width:.25em;stroke-linejoin:round}
:root[data-theme="dark"] .stage:not(.sheet-light) .acc-t{fill:#91CAFF;paint-order:stroke;stroke:#19191B;stroke-width:.25em;stroke-linejoin:round}
@media (prefers-color-scheme:dark){ /* SNAPSHOT-1 PORT: Launch polish item 1, "Match my device" form of the rules above. */
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl.bldl{fill:#F2F2F3}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl.space{fill:#C9BCFF}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl.tag{fill:#F2C48D}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) :is(.lbl.tag.over,.lbl.fit){fill:#72DB9A}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl.fit.warn{fill:#FFC56B}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .lbl.eye-l{fill:#91CAFF}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) #ov .dimlbl{fill:#91CAFF}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) #ov .dim-bg{stroke:#91CAFF}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .fire-t{fill:#FF9D98;paint-order:stroke;stroke:#19191B;stroke-width:.25em;stroke-linejoin:round}
  :root:not([data-theme="light"]) .stage:not(.sheet-light) .acc-t{fill:#91CAFF;paint-order:stroke;stroke:#19191B;stroke-width:.25em;stroke-linejoin:round}
}
/* SNAPSHOT-1 PORT: Launch polish item 3 — while the page is dark, the Export preview and every picture taken for a file draw the light sheet (the light tokens below restate the light values exactly); the window frame, panels, buttons and plan controls stay dark. */
#stage.sheet-light[data-style="a"]{--site-line:#111112;--site-fill:rgba(255,255,255,.22);--excl-line:#3F3F44;--excl-fill:rgba(255,255,255,.7);--hatch:#6E6E73;--entry:#111112;--plan-grid:#BDBBB6;--plan-bg:#F2F1EE}
#stage.sheet-light[data-style="b"]{--site-line:#2B3A2C;--site-fill:rgba(91,140,60,.12);--excl-line:#5E5A53;--excl-fill:rgba(230,227,221,.78);--hatch:#9C978F;--entry:#3A8420;--plan-grid:#CFC9BD;--plan-bg:#EEEBE4}
#stage.sheet-light[data-style="c"]{--site-line:#17181A;--site-fill:rgba(240,240,236,.82);--excl-line:#5F6066;--excl-fill:rgba(231,231,234,.92);--hatch:#9A9BA1;--entry:#17181A;--plan-grid:#D9D9DC;--plan-bg:#FAFAF7}
#stage.sheet-light :is(#cv,#xpCard,#northArrow){color-scheme:light;
  --paper:#EDEDEE;--panel:#FFFFFF;--panel-2:#F4F4F5;--sunk:#EFEFF1;--ink:#111112;--ink-2:#48484D;--ink-3:#67676C;--line:#E3E3E6;--line-2:#EDEDF0;
  --accent:#5BB631;--accent-2:#C4E8AE;--accent-ink:#FFFFFF;--primary:#111112;--primary-ink:#FFFFFF;
  --warn:#955800;--warn-tint:#FBF0DC;--fail:#BF3526;--fail-tint:#FBE4E1;--ok:#2E7D32;--ok-tint:#E6F4E1;
  --plan-ink:#222223;--plan-sel:#46A322;--ref:#0E7C75;--check:#B07A1E;--bad:#D04A38;--measure:#2563C9;--halo:#FFFFFF;--north:#2F7A1C;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06)}
#stage.sheet-light #xpCard{color:var(--ink)} /* SNAPSHOT-1 PORT: Launch polish item 3, the title card's text takes the light ink (it inherits the page's otherwise). */
#stage.sheet-light .lbl.mnd,#stage.sheet-light .lbl.mnd-pt,#stage.sheet-light #ov .mnd-spot{fill:#4A3418} /* SNAPSHOT-1 PORT: Launch polish item 3, light mound ink. */
#stage.sheet-light .linked-contrast{stroke:#FFFFFF} /* SNAPSHOT-1 PORT: Launch polish item 3, light outline. */
#stage.sheet-light .plan-dimensions.pd-plain:not(.pd-detached){--pd-ink:var(--ink,#202124)} /* SNAPSHOT-1 PORT: Launch polish item 3, the light plain-value ink (restates line 76 over the rule below). */
#stage.sheet-light .plan-dimensions:not(.pd-detached){--pd-ink:#000;--pd-pill:#fff;--pd-point-bg:#e4f0ff;--pd-point-ink:#0756a5;--pd-warning:#8a5100;--pd-green:#167038;--pd-red:#b3261e;--pd-grey:#686868} /* SNAPSHOT-1 PORT: Launch polish item 3, light plan-dimension tokens. */
/* SNAPSHOT-1 PORT: Launch polish item 4 — "Loading the plan…" beside every Save that waits for the plan. */
.xp-loading{align-self:center;margin-right:auto;font-size:13px;color:var(--ink-2)}
.wh-acts .xp-loading,.xp-btns .xp-loading{margin-right:4px}
/* SNAPSHOT-1 PORT: Recently deleted (feature D) — entry point beside the plans header, list rows, the deleted-plan banner; light, dark and phone. */
.home-head .del-entry svg{width:15px;height:15px;color:var(--ink-2)}
.rd-dialog{width:min(600px,100%)}
.rd-note{font-size:13.5px}
.rd-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rd-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--panel)}
.rd-row+.rd-row{border-top:1px solid var(--line)}
.rd-main{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.rd-title{font-weight:600;font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-sub{font-size:12.5px;color:var(--ink-2)}
.rd-acts{display:flex;gap:6px;flex:none}
.del-banner{background:var(--fail-tint);color:var(--fail);font-weight:500}
:root[data-theme="dark"] .rd-row{background:var(--panel-2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rd-row{background:var(--panel-2)}}
@media (max-width:700px){
  /* SNAPSHOT-1 PORT: Task 71 item 9 — on phones the plans list header always wraps, and its buttons keep their size and their words on one line. */
  .home-head{flex-wrap:wrap}
  .home-head>div:first-child{flex:1 1 100%}
  .home-head .btn{flex-shrink:0;white-space:nowrap}
  .rd-row{flex-direction:column;align-items:stretch;gap:10px}
  .rd-title{white-space:normal}
  .rd-acts{justify-content:flex-start}
}
/* SNAPSHOT-1 PORT: Share a single plan — the top bar's Share button (Owners and Editors), Shared with you after the team's
   plans, and a shared plan's page (body.ma-guest): no team data, no plan file, no plans list behind the plan. */
.tb-share{display:inline-flex;align-items:center;gap:6px}
.tb-share svg{width:16px;height:16px;flex:none}
@media (max-width:900px){.tb-share .tb-l{display:none}}
.shared-with-you{margin-top:28px}
.shared-h{font-size:18px;line-height:1.2;font-weight:650;letter-spacing:-.015em;margin:0 0 12px}
.shared-card .shared-team{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-note{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}
body.ma-guest main.home{visibility:hidden}
body.ma-guest .xp-opt:has(input[value="json"]),body.ma-guest .acct-team,body.ma-guest .acct-switch,body.ma-guest [data-account-action="members"],body.ma-guest [data-account-action="new-team"],body.ma-guest [data-account-action="company"]{display:none}
/* SNAPSHOT-1 PORT: Task 71 item 11 — Play surfacing's compatible surfaces as tick boxes on the Rules page, light and dark. */
.rr-ticks{display:flex;flex-wrap:wrap;gap:6px 14px}
.rr-ticks .tick{display:inline-flex;align-items:center;gap:6px;font:400 12.5px/1.3 var(--f-body);color:var(--ink);cursor:pointer}
.rr-ticks .tick input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.rr-ticks .tick input:disabled{cursor:default}
.rr-ticks .tick:has(input:disabled){color:var(--ink-2);cursor:default}
:root[data-theme="dark"] .rr-ticks .tick input{color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rr-ticks .tick input{color-scheme:dark}}
/* SNAPSHOT-1 PORT: Feature A — the split north arrow, the logo turn handle and the Logo turn row. */
.nb .nb-al,.nr-mini .nb-al{fill:var(--north);stroke:var(--north);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.nb .nb-ar,.nr-mini .nb-ar{fill:var(--halo);stroke:var(--north);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.nb .nb-n{font-size:25.5px} /* about 9 px on the 44 px badge (owner ruling) */
#ov .logo-turn{cursor:grab}
#ov .logo-turn.on{cursor:grabbing}
#ov .logo-l{stroke:var(--plan-sel);stroke-width:1.5}
#ov .logo-hit{fill:transparent;stroke:none}
#ov .logo-h{fill:#fff;stroke:var(--plan-sel);stroke-width:2.5}
#ov .logo-turn.on .logo-h{fill:var(--plan-sel)}
.lt-row{display:grid;gap:4px;margin:2px 0 8px}
.lt-row .lt-h{font-size:12px;font-weight:400;color:var(--ink-2)} /* the same as the Funder logo and Logo size labels (owner ruling) */
.lt-row .lt-ctl{display:flex;align-items:flex-end;gap:6px}
.lt-row .lt-b{min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.lt-row .lt-b svg{width:18px;height:18px}
.lt-row .lt-l svg{transform:scaleX(-1)}
.lt-row .lt-deg{flex:1 1 auto;margin:0}
.lt-row .nr-in{display:flex;align-items:center;gap:4px}
.lt-row .nr-in input{width:96px}
.lt-row .nr-u{color:var(--ink-2)}
.lt-row .lt-words{margin:0}
.lt-row.off .lt-h{color:var(--ink-3)}
/* SNAPSHOT-1 PORT: Task 90 — drawing tools and courts: the "+" on a selected outline's side, a gate's Flip buttons, a building's cut while splitting, the gates section's Flip links, the Split panel and the 4 ft arm warning. */
#ov .c90-plus circle{fill:#fff;stroke:var(--plan-sel);stroke-width:1.5}
#ov .c90-plus path{fill:none;stroke:var(--plan-sel);stroke-width:1.75;stroke-linecap:round}
#ov .c90-flip circle{fill:var(--plan-sel);stroke:#fff;stroke-width:1.5}
#ov .c90-flip path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#ov .c90-cut{stroke:var(--plan-sel);stroke-opacity:.45;stroke-linecap:butt}
#ov .c90-cut-end{fill:var(--plan-sel)}
.c90-gflip{display:block;font-size:12px;color:var(--ink-2)}
.c90-split{margin:8px 0;padding:8px;border:1px solid var(--line, #ddd);border-radius:6px}
.c90-arm-warn,.c90-court-note{grid-column:1/-1;margin:0}
.c90-arm-warn{color:var(--warn)}
/* SNAPSHOT-1 PORT: Feature B — distances while moving: 1.5 px Measure-blue lines with 8 px end ticks, dashed corner lines, pills in the line's colour, conflict red when too close, the conflict outline for overlaps, and the 0.3 s fade (none with reduced motion). */
#ov .mvd{pointer-events:none}
#ov .mvd-l,#ov .mvd-t{fill:none;stroke:var(--measure);stroke-width:1.5px;stroke-linecap:butt}
#ov .mvd-l.corner{stroke-dasharray:4 3}
#ov .mvd-l.red,#ov .mvd-t.red{stroke:var(--fail)}
#ov .mvd-p rect{fill:var(--measure);stroke:none}
#ov .mvd-p.red rect{fill:var(--fail)}
#ov .mvd-p text{fill:#FFFFFF;font:600 12.5px var(--f-body,Inter,sans-serif);font-variant-numeric:tabular-nums;stroke:none}
#ov .mvd-bad{fill:none;stroke:var(--fail);stroke-width:2;stroke-dasharray:4 3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #stage:not(.sheet-light) #ov .mvd-p text{fill:#141416}}
:root[data-theme="dark"] #stage:not(.sheet-light) #ov .mvd-p text{fill:#141416}
#ov .mvd.mvd-fade{opacity:0;transition:opacity .3s linear}
@media (prefers-reduced-motion:reduce){#ov .mvd.mvd-fade{opacity:1;transition:none}}
/* SNAPSHOT-1 PORT: Wave 3 typed distances — while the pills hold still after a move, only the pills take clicks (their lines and the space around them stay pointer-events none); the box a pill opens sits over it in the pill's own colours, red when the value can't be used. Boulder tiles — Add's Shape and Stone sit on the Boulders heading's line. */
#ov .mvd.mvd-edit .mvd-p{pointer-events:auto;cursor:text}
#ov .mvd.mvd-edit .mvd-p:hover rect{filter:brightness(1.12)}
#stage .mvd-in{position:absolute;z-index:30;transform:translate(-50%,-50%);height:24px;box-sizing:border-box;padding:0 7px;border:2px solid #FFFFFF;border-radius:6px;background:var(--measure);color:#FFFFFF;font:600 12.5px var(--f-body,Inter,sans-serif);font-variant-numeric:tabular-nums;text-align:center;outline:none;box-shadow:0 0 0 2px var(--measure),0 2px 8px rgba(0,0,0,.25)}
#stage .mvd-in:focus-visible{box-shadow:0 0 0 2px var(--measure),0 0 0 4px var(--focus,#1A73E8)}
#stage .mvd-in.red{background:var(--fail);box-shadow:0 0 0 2px var(--fail),0 2px 8px rgba(0,0,0,.25)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #stage:not(.sheet-light) .mvd-in{color:#141416;border-color:#141416}}
:root[data-theme="dark"] #stage:not(.sheet-light) .mvd-in{color:#141416;border-color:#141416}
#drawer .lib-sub:has(+ .add-rock){display:inline-block;margin-right:8px}
#drawer .add-opts.add-rock{display:inline-flex;gap:6px;align-items:center;vertical-align:middle;margin:0 0 4px;float:right}
#drawer .add-rock .field.small{display:inline-flex;align-items:center;gap:4px;margin:0}
#drawer .add-rock .add-rl{font-size:11.5px;color:var(--muted)}
#drawer .add-rock select{font-size:12px;padding:2px 4px;min-width:0;max-width:96px}
#drawer .add-rock + .lib-cards,#drawer .add-rock + .lib-list{clear:both}
.set-sec .set-mvd{margin:10px 0 0;justify-self:start;font-size:13.5px;color:var(--ink)}
/* SNAPSHOT-1 PORT: Task 92 (exports) — Export's North section: a 3 x 3 grid of dots for where the arrow sits (its middle empty, each named on hover) and the arrow's size. */
.xp-north{display:flex;align-items:center;gap:18px;margin:8px 0 2px}
.xp-spots{display:grid;grid-template-columns:repeat(3,22px);grid-template-rows:repeat(3,22px);gap:4px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}
.xp-spot{position:relative;display:flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer}
.xp-spot input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.xp-spot span{width:8px;height:8px;border-radius:999px;background:var(--ink-3);transition:transform .12s}
.xp-spot:hover span{transform:scale(1.25);background:var(--ink-2)}
.xp-spot.on span{width:12px;height:12px;background:var(--ink)}
.xp-spot:focus-within{outline:2px solid var(--ink-3);outline-offset:1px}
.xp-north .field{display:flex;align-items:center;gap:8px;margin:0}
/* SNAPSHOT-1 PORT: Feature B — Settings keeps Done in view: the button row stays fixed under the scrolling settings. */
.dialog[aria-label="Settings"]{scroll-padding-bottom:72px}.dialog[aria-label="Settings"]>.acts{position:sticky;bottom:-20px;z-index:1;margin:4px -20px -20px;padding:12px 20px 20px;background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 15px 15px}

/* SNAPSHOT-1 PORT: Reliability pack (owner rulings after the checkpoint).
   At 1440 px and wider the editor's top bar stays on one line with every label readable: slightly tighter gaps and
   step padding, "Catalog and rules" on one line, and the save status shown in full. The bar keeps its 60 px height,
   so nothing below it moves. Narrower widths are unchanged. */
@media(min-width:1440px){.topbar:has(.steps){gap:6px;min-height:60px;box-sizing:border-box}.topbar .steps button{padding:7px 10px}.topbar [data-act="studio"]{white-space:nowrap}.topbar .status{flex:0 0 auto;max-width:200px}}
/* A view-only plan's North buttons and Degrees field are unavailable, greyed like the rail tools. */
.nr-sec input:disabled,.nr-sec .link:disabled{opacity:.45;cursor:default}
/* SNAPSHOT-1 PORT: Feature F — surfaces: the Add surfaces drawer's swatches, the surface panel (kind, title, grey group, Lock),
   the seal coat area on the plan (fill, edge, label, purple over sealed items, drag pill) and its panel (To seal box, rows); light and dark. */
:root{--seal-a:.22;--seal-on-a:.36;--seal-edge:#7A51D8;--seal-pill:#6442B1;--seal-sw:#C0AFE7;--seal-sw-edge:#7A51D8;--seal-box:rgba(139,92,246,.09);--seal-k:#5F3FA7}
:root[data-theme=dark]{--seal-a:.30;--seal-on-a:.49;--seal-edge:#A27DF8;--seal-pill:#7A51D8;--seal-sw:#3A2A66;--seal-sw-edge:#A27DF8;--seal-box:rgba(139,92,246,.12);--seal-k:#BFA5FA}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--seal-a:.30;--seal-on-a:.49;--seal-edge:#A27DF8;--seal-pill:#7A51D8;--seal-sw:#3A2A66;--seal-sw-edge:#A27DF8;--seal-box:rgba(139,92,246,.12);--seal-k:#BFA5FA}}
#ov .sf.seal{fill:#8B5CF6;fill-opacity:var(--seal-a);stroke:var(--seal-edge);stroke-width:2.2;stroke-dasharray:none;stroke-linejoin:round}
.stage[data-style="a"] #ov .sf.seal{stroke-width:2.6}
.stage[data-style="c"] #ov .sf.seal{stroke-width:3}
#ov .sf.seal.sel{stroke:var(--seal-edge)}
#ov .sf.locked{stroke:var(--plan-sel);stroke-width:2;stroke-dasharray:6 4}
#ov .seal-black{fill:#3B3B3D;stroke:none}
#ov .seal-on{fill:#8B5CF6;fill-opacity:var(--seal-on-a);stroke:none;pointer-events:none}
#ov .seal-lbl rect{fill:var(--seal-pill)}
#ov .seal-lbl text{fill:#fff;font:600 13px var(--f-body)}
#ov .seal-lbl .lk{fill:#fff;stroke:#fff}
#ov .lbl-lock{fill:var(--plan-ink);stroke:var(--plan-ink);pointer-events:none}
#ov .seal-pill{pointer-events:none}
#ov .seal-pill rect{fill:#fff;stroke:rgba(0,0,0,.18)}
#ov .seal-pill text{fill:#111;font:600 12px var(--f-body)}
#ov .seal-pill.dark rect{fill:#6442B1;stroke:none}
#ov .seal-pill.dark text{fill:#fff}
.hint.sf-red{color:#fff;background:#C8312B;border-color:#C8312B}
.drawer.sfd .sfd-row{cursor:pointer}
.drawer.sfd .sfd-row.on{background:var(--panel-2)}
.drawer.sfd .sfd-sw{display:inline-block;width:40px;height:40px;flex:none;border-radius:8px;overflow:hidden;box-sizing:border-box;border:1px solid var(--line)}
.drawer.sfd .sfd-sw svg{display:block;width:40px;height:40px}
.add-tile .sfd-sw.seal{background:var(--seal-sw);border:1.5px solid var(--seal-sw-edge)} /* SNAPSHOT-1 PORT: Editor layout part 2 — Seal coat keeps its lavender with the purple edge, on Add's surface tiles */
.drawer.sfd .sfd-n{font:600 14px/1.25 var(--f-body)}
.drawer.sfd .sfd-d{font-size:12px;color:var(--ink-2);line-height:1.3}
.drawer.sfd .dr-foot{margin:8px 14px 12px}
.sf-insp .sf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.sf-insp .sf-kind{flex:1 0 100%;order:-1;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sf-insp .sf-title{font-size:19px;font-weight:650;flex:1}
.sf-group{background:var(--panel-2);border-radius:12px;padding:14px;margin:10px 0;display:grid;gap:10px}
.sf-g-row{display:flex;align-items:center;gap:10px}
.sf-g-row .tog{flex:1}
.sf-g-v{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.sf-op input[type=range]{flex:1;min-width:0}
.sf-op .sf-g-v{min-width:3.2em;text-align:right}
.sf-lock-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:6px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink);font-size:13px}
.sf-lock-btn:hover{background:var(--panel)}
.sf-lock-btn[disabled]{opacity:.5;cursor:default}
.lk-i{width:14px;height:14px;flex:none;vertical-align:-2px}
.sf-locked{background:var(--panel);color:var(--ink);border-radius:10px;padding:10px 12px;border:1px solid var(--line)} /* SNAPSHOT-1 PORT: Panels and dark mode — the panel colours, so the box isn't white in the dark theme. */
.sf-locked .sf-lk-h{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.sf-locked p{margin:6px 0 8px;color:var(--ink-2)} /* SNAPSHOT-1 PORT: Panels and dark mode */
.s3-list .lk-i{margin-right:4px}
.s3-list .sf-unlock{margin-left:6px}
.seal-box{background:var(--seal-box);border-radius:12px;padding:12px 14px;margin:10px 0}
.seal-box .seal-k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--seal-k)}
.seal-box .seal-n{color:var(--ink)}
.seal-box .seal-n strong{font-size:26px;font-weight:700;margin-right:4px;font-variant-numeric:tabular-nums}
.seal-box p{margin:4px 0 0;font-size:12px;color:var(--ink-2)}
.seal-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin:14px 0 2px}
.seal-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.seal-row .seal-tk{width:20px;height:20px;flex:none;margin:0}
.seal-row .seal-sq{width:20px;height:20px;flex:none;border-radius:4px;background:var(--ink-3);opacity:.45}
.seal-row .seal-tx{display:flex;flex-direction:column;flex:1;min-width:0}
.seal-row .seal-v{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.seal-row.seal-drawn .seal-nm,.seal-row.seal-once .seal-nm{flex:1}
.seal-row.seal-total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:650}
.seal-row.seal-total .seal-nm{flex:1}
.sf-del-note{margin-top:12px}
#ov .h-vert.seal,#ov .h-mid.seal{stroke:var(--seal-edge)}
#ov .h-vert.seal.on{fill:var(--seal-edge)}
/* SNAPSHOT-1 PORT: wave 2 trees and surfacing — the tree choice (None, Cutouts, Tree well) and the well's width; Back to a rectangle with Keep curves; the radius note past 15 ft. */
.tree-choice select{width:100%}
.tree-choice-t{margin:4px 0 8px;line-height:1.35}
.row-card .tree-well-w input{width:100%}
.pa-panel .pa-keep{margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.pa-panel .pa-keep .pa-box-t{margin:0 0 8px}
.pa-panel .pa-keep-b{display:flex;flex-wrap:wrap;gap:8px}
.pa-panel .pa-round-note{margin:6px 0 0;font-size:12.5px;color:var(--warn)}
/* SNAPSHOT-1 PORT: Feature F item 6 — PIP rubber is drawn solid (its own Opacity still applies), so its black granules read as black, as in the photo. */
#ov .sf.pip,.stage[data-style="c"] #ov .sf.pip,[data-style="a"] #ov .sf.pip,#ov.style-a .sf.pip{fill-opacity:1}
/* SNAPSHOT-1 PORT: Feature F, owner addition — the "Boundary locked" chip sits above the compass's degrees bubble (badge 10 + 44, gap 6, bubble 23, gap 9),
   so it never covers the compass, its arrow at any angle, the bubble or the scale bar; drawer-open and Sun-open keep their own left/right. While the arrow is dragged, the badge and its bubble stay on top. */
.lock-chip{bottom:92px}
.nb.dragging{z-index:7}
/* SNAPSHOT-1 PORT: Fields, logos and labels — a field logo's X and Y fields, side by side next to Logo turn; on phones the
   Zoom readout sits just above the zoom bar, right-aligned with it, so it never covers the scale bar (its text is kept whole). */
.lxy-row{display:flex;gap:8px;margin:0 0 8px}
.lxy-row .lxy-f{flex:1 1 0;min-width:0;margin:0}
.lxy-row .nr-in{display:flex;align-items:center;gap:4px}
.lxy-row .nr-in input{width:100%;min-width:0}
.lxy-row .nr-u{color:var(--ink-2)}
@media (max-width:700px){.readout{right:10px;bottom:56px}}
/* SNAPSHOT-1 PORT: Feature G — curved surfacing: a play area's side dots, the dashed starting rectangle, the Shape section's
   grey boxes and pills, the green Fitted box, and the Check section; light and dark. */
:root{--pa-fit-ink:#1F5B23;--pa-start:#8A8A8E}
:root[data-theme=dark]{--pa-fit-ink:#8FD68C;--pa-start:#7C7C82}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--pa-fit-ink:#8FD68C;--pa-start:#7C7C82}}
#ov .pa-dot{fill:#fff;stroke:#2F7A1C;stroke-width:2.5;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25));cursor:grab;outline:none}
#ov .pa-dot.on{fill:#2F7A1C;cursor:grabbing}
#ov .pa-dot:focus-visible{stroke-width:3.5;stroke:#2D6CDF}
#ov .pa-start{fill:none;stroke:var(--pa-start);stroke-width:1.2;stroke-dasharray:6 4;pointer-events:none}
.pa-panel .pa-sec-h{margin:14px 0 8px;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.pa-panel .pa-box{background:var(--panel-2);border-radius:12px;padding:14px;margin:10px 0 0}
.pa-panel .pa-box-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:600 13.5px/1.3 var(--f-body);color:var(--ink)}
.pa-panel .pa-box-h label{font:inherit;color:inherit}
.pa-panel .pa-v{font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pa-panel .pa-box-t{margin:6px 0 10px;font-size:12.5px;color:var(--ink-2)}
.pa-panel .pa-round input[type=range]{width:100%;margin:10px 0 0;accent-color:var(--primary)}
.pa-panel .pa-pill{border:0;border-radius:999px;background:var(--primary);color:var(--primary-ink);font:600 14px/1 var(--f-body);padding:10px 16px;cursor:pointer}
.pa-panel .pa-pill-o{border:1.5px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font:600 13px/1 var(--f-body);padding:8px 14px;cursor:pointer}
.pa-panel .pa-pill:disabled,.pa-panel .pa-pill-o:disabled{opacity:.4;cursor:default}
.pa-panel .pa-fitted{margin:8px 0 0;background:var(--ok-tint);border-radius:10px;padding:12px;display:grid;gap:10px;justify-items:start}
.pa-panel .pa-fitted span{font:600 13.5px/1.35 var(--f-body);color:var(--pa-fit-ink)}
.pa-panel .pa-rule{border:0;border-top:1px solid var(--line);margin:16px 0 0}
.pa-panel .pa-check{display:grid;gap:6px}
.pa-panel .pa-ck-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-2)}
.pa-panel .pa-ck-row strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pa-panel .pa-cov{margin:4px 0 0;font-size:13px;font-weight:600}
.pa-panel .pa-cov.ok{color:var(--ok)}
.pa-panel .pa-cov.bad{color:var(--fail)}
/* SNAPSHOT-1 PORT: Editor layout part 1 (mockups a1–a6) — the short save status and Reconnecting… in its place, who's here beside it,
   the bottom-left group, the Review chip and list, the Documents side window, the Look button and Plan look, the Compare bar,
   and every bar around the plan white, 38 px high and fully rounded with the same border and shadow (dark mode: the panel colours). */
.tb-who{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.tb-who:empty{display:none}
.tb-who .project-presence{gap:0}
.tb-who .project-avatar{margin-left:-5px;border:2px solid var(--bg);box-sizing:border-box;width:30px;height:30px}
.tb-who .project-avatar:first-child{margin-left:0}
.tb-status{position:relative;display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;min-width:126px;max-width:260px} /* room for the usual words, so the steps don't shift as the status changes */
.topbar .tb-status .status{flex:0 1 auto;max-width:260px}
.status.st-short .st-v{display:inline-flex;align-items:center;gap:4px}
.status.st-short .st-tick{color:var(--ok);flex:none}
.tb-status .lc-reconnecting{position:static;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--warn-tint);color:var(--warn);border:1px solid var(--warn-tint);font:600 12px/1.25 var(--f-body);pointer-events:none}
.tb-status .lc-reconnecting::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.tb-status:has(.lc-reconnecting) #saveStatus:not(.err:not(.st-short)){display:none}
.tb-status:has(#saveStatus.err:not(.st-short)) .lc-reconnecting{display:none} /* a save that failed (with Try now) wins over Reconnecting… in the one spot */
.tb-status .lc-reconnecting ~ .lc-reconnecting{display:none}
.tb-bl-slot{display:none}
.bl-group{grid-column:1;grid-row:1;align-self:end;z-index:3;display:flex;flex-direction:column;gap:2px;padding:6px 5px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.bl-b{position:relative;width:64px;min-height:50px;padding:6px 2px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;font:500 10.5px/1.15 var(--f-body)}
.bl-b:hover{background:var(--panel-2);color:var(--ink)}
.bl-b[aria-pressed="true"]{background:var(--primary);color:var(--primary-ink)}
.bl-b:focus-visible{outline:2px solid #2F7D4A;outline-offset:1px}
.bl-b svg{width:20px;height:20px;flex:none}
.bl-l{white-space:nowrap}
.bl-n{position:absolute;top:3px;left:calc(50% + 4px);min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 10px/16px var(--f-body);text-align:center}
.bl-n[hidden]{display:none}
.bl-group.bl-compact .bl-b{min-height:36px}
.bl-group.bl-compact .bl-l{display:none}
.editor.win-costs .bl-group,.editor.win-export .bl-group,.editor.win-costs .pt-side,.editor.win-export .pt-side{display:none} /* SNAPSHOT-1 PORT: Sign-off steps (wave 3, task I) — the Project tools side window hides with the group */
/* The Review chip, 8 px left of the zoom bar (right set in ui.js), and its list just above it, right-aligned. */
.review-chip{position:absolute;bottom:10px;z-index:6;height:38px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);font:600 12.5px/1 var(--f-body);white-space:nowrap;cursor:pointer}
.review-chip svg{flex:none;color:var(--ok)}
.review-chip.bad svg{color:var(--fail)}
.review-chip:hover{background:var(--panel-2)}
.review-chip[aria-expanded="true"]{border-color:var(--ink-3)}
.review-chip:focus-visible{outline:2px solid #2F7D4A;outline-offset:2px}
.review-chip[hidden],.review-pop[hidden],.look-pop[hidden]{display:none}
.review-pop{position:absolute;bottom:56px;z-index:9;width:340px;max-width:calc(100% - 20px);max-height:min(420px,calc(100% - 76px));overflow:auto;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:10px}
.rv-h{display:flex;align-items:baseline;gap:8px;padding:2px 4px 8px;font-size:13px}
.rv-h span{color:var(--ink-3);font-size:12px}
.rv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.rv-item{display:flex;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;text-align:left;border:0;background:transparent;border-radius:9px;padding:7px 6px;color:var(--ink);font:13px/1.35 var(--f-body)}
button.rv-item{cursor:pointer}
button.rv-item:hover,button.rv-item:focus-visible{background:var(--panel-2);outline:none}
.rv-dot{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--fail);flex:none}
.pref .rv-dot{background:var(--warn)}
.rv-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-r{color:var(--ink-3);font-size:12px}
.rv-none{margin:0;padding:4px;color:var(--ink-3);font-size:13px}
.stage.in3d .review-chip,.stage.xp .review-chip,.stage.in3d .review-pop,.stage.xp .review-pop{display:none !important}
.stage.cmp-on .review-chip{z-index:7}
/* Documents as a side window beside the left toolbar: the plan stays visible and usable. */
.est-sheet.doc-side{inset:auto;left:10px;top:10px;bottom:10px;width:min(380px,calc(100% - 20px));right:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:auto;z-index:30}
body:has(#docSheet.doc-side) #pd-progress{visibility:hidden} /* the plan's confirmed chip gives way while Documents is open beside it */
.doc-side .est-top{position:sticky;top:0;background:var(--panel);z-index:1}
.doc-side .doc-x{margin-left:auto;width:30px;height:30px}
.doc-side .doc-x svg{width:18px;height:18px}
/* SNAPSHOT-1 PORT: Comments (wave 3, task H) — pins, the thread beside its pin, the Comments side window and the top bar's button. Never printed: hidden in pictures, 3D and exports. */
.cm-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;overflow:clip;--cm-blue:#2563C9}
:root[data-theme="dark"] .cm-layer,:root[data-theme="dark"] .cm-side,:root[data-theme="dark"] .tb-comments{--cm-blue:#7FA8F5}
.cm-layer[hidden],.cm-layer [hidden]{display:none !important}
.stage.in3d .cm-layer,.stage.xp .cm-layer,.stage.capturing .cm-layer,.stage.capturing .cm-side{display:none !important}
@media print{.cm-layer,.cm-side,.tb-comments{display:none !important}}
.cm-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cm-outline path{fill:none;stroke:var(--cm-blue);stroke-width:2;stroke-dasharray:5 4}
.cm-pins{position:absolute;inset:0}
.cm-pin{position:absolute;left:0;top:0;width:30px;height:30px;padding:0;border:2px solid var(--panel);border-radius:15px 15px 15px 3px;background:var(--panel);box-shadow:0 2px 8px rgba(0,0,0,.22);cursor:pointer;pointer-events:auto;display:grid;place-items:center}
.cm-pin.on{border-color:var(--cm-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--cm-blue) 30%,transparent),0 2px 8px rgba(0,0,0,.22)}
.cm-pin.cm-gone{opacity:.75;border-style:dashed}
.cm-pin-new{cursor:default}
.cm-pin .cm-av{width:24px;height:24px;font-size:10px;border-radius:12px 12px 12px 2px}
.cm-plus{background:var(--cm-blue) !important;color:#fff !important;font-size:15px !important}
.cm-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--cm-blue);border:2px solid var(--panel)}
.cm-av{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font:600 11px/1 var(--f-body);color:#fff;background:#6D4AFF}
.cm-av[class*="lc-c"]{background:var(--lc)} /* each person's live colour (their cursor and who's-here avatar), round 2 */
.cm-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--primary);color:var(--primary-ink);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:500;box-shadow:var(--shadow);white-space:nowrap}
.cm-pop{position:absolute;left:0;top:0;width:min(320px,calc(100% - 16px));max-height:calc(100% - 16px);display:flex;flex-direction:column;overflow:visible;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.18);pointer-events:auto;font-size:13px}
.cm-head{position:relative;display:flex;align-items:center;gap:6px;padding:8px 8px 6px 12px;border-bottom:1px solid var(--line-2)}
.cm-place{flex:1;min-width:0;color:var(--ink-3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-head-acts{display:flex;align-items:center;gap:2px}
.cm-head .icon-btn{width:28px;height:28px}
.cm-approve{display:inline-flex;align-items:center;gap:4px;height:28px;background:var(--ok-tint);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 28%,transparent);border-radius:999px;font-weight:600}
.cm-approve:hover{background:color-mix(in srgb,var(--ok) 22%,var(--panel));color:var(--ok)}
.cm-approve:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.cm-menu{position:absolute;right:8px;top:38px;z-index:2;min-width:220px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column}
.cm-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;border:0;background:none;color:var(--ink);font:inherit;padding:7px 10px;border-radius:7px;cursor:pointer}
.cm-menu button:hover,.cm-menu button:focus-visible{background:var(--panel-2)}
.cm-menu small{color:var(--ink-3);font-size:11.5px}
.cm-menu .danger{color:var(--fail)}
.cm-pop>*:not(.cm-msgs){flex:none}
.cm-msgs{padding:4px 0;flex:0 1 auto;min-height:0;overflow:auto}
.cm-msg{display:flex;gap:9px;padding:8px 12px}
.cm-msg-b{flex:1;min-width:0}
.cm-msg-h{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cm-msg-h strong{font-weight:600}
.cm-time{color:var(--ink-3);font-size:11.5px}
.cm-del{margin-left:auto;color:var(--ink-3)}
.cm-text{margin-top:2px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.cm-at{color:var(--cm-blue);font-weight:600}
.cm-tag{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;background:var(--panel-2);color:var(--ink-2)}
.cm-tag-new{background:var(--cm-blue);color:#fff}
.cm-resolved{display:flex;align-items:flex-start;gap:6px;padding:8px 12px;border-top:1px solid var(--line-2);color:var(--ok);font-size:12.5px}
.cm-resolved span{flex:1;min-width:0;color:var(--ink-2)}
.cm-resolved svg{flex:none;margin-top:2px}
.cm-resolved .cm-ok,.cm-item-r .cm-ok{color:var(--ok)}
.cm-note{margin:0;padding:8px 12px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:12px}
.cm-form{padding:8px 12px 10px;border-top:1px solid var(--line-2)}
.cm-pop-new .cm-form{border-top:0}
.cm-box{position:relative}
.cm-form textarea{width:100%;min-height:54px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;color:var(--ink);background:var(--panel)}
.cm-form textarea:focus{outline:2px solid var(--cm-blue);outline-offset:-1px}
.cm-err{margin:4px 0 0;color:var(--fail);font-size:12px}
.cm-err:empty{display:none}
.cm-form-acts{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.cm-pick{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:3;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px}
.cm-pick.cm-pick-up{top:auto;bottom:calc(100% + 4px)}
.cm-pick-row{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:var(--ink);font:inherit;padding:6px 8px;border-radius:7px;cursor:pointer;text-align:left}
.cm-pick-row .cm-av{width:22px;height:22px;font-size:9.5px}
.cm-pick-row.on,.cm-pick-row:hover{background:var(--panel-2)}
.cm-pick-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-pick-r{color:var(--ink-3);font-size:11.5px}
.cm-pick-none{margin:0;padding:6px 8px;color:var(--ink-3);font-size:12px}
.cm-pick-foot{margin:2px 0 0;padding:6px 8px 4px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:11.5px}
.cm-ctx{position:absolute;left:0;top:0;pointer-events:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px}
.cm-ctx button{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--ink);font:inherit;padding:7px 12px;border-radius:7px;cursor:pointer;min-width:130px}
.cm-ctx button:hover,.cm-ctx button:focus-visible{background:var(--panel-2)}
.cm-ctx svg{width:16px;height:16px}
.tb-comments{position:relative;display:inline-flex;align-items:center;gap:6px;--cm-blue:#2563C9}
.tb-comments svg{width:16px;height:16px;flex:none}
.cm-badge{min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:var(--cm-blue);color:#fff;font:600 10.5px/17px var(--f-body);text-align:center}
.cm-badge[hidden]{display:none}
/* SNAPSHOT-1 PORT: task 120 — the number is the plan's open threads (a quiet count); the blue dot at its top right shows when something is new for you. */
.tb-comments .cm-badge{background:var(--panel-2);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.tb-comments .cm-bnew{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--cm-blue);box-shadow:0 0 0 2px var(--panel);pointer-events:none}
.tb-comments .cm-bnew[hidden]{display:none}
.cm-side{display:flex;flex-direction:column;overflow:hidden;--cm-blue:#2563C9}
.cm-side .cm-top{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 16px}
.cm-side .cm-top h2{margin:0;font-size:16px;flex:1}
.cm-side .cm-top .doc-x{margin-left:0}
.cm-counts{padding:0 16px 8px;border-bottom:1px solid var(--line-2)}
.cm-tabs{display:flex;gap:16px}
.cm-tabs button{border:0;background:none;color:var(--ink-3);font:600 13px var(--f-body);padding:6px 0;border-bottom:2px solid transparent;cursor:pointer}
.cm-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.cm-n{color:var(--ink-3);font-weight:500;margin-left:2px}
.cm-filters{display:flex;gap:6px;margin-top:8px}
.cm-filters button{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);font:500 12px var(--f-body);padding:4px 10px;border-radius:999px;cursor:pointer}
.cm-filters button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.cm-filters button[aria-pressed="true"] .cm-n{color:inherit}
.cm-list{flex:1;overflow:auto;padding:4px 0}
.cm-item{position:relative;border-bottom:1px solid var(--line-2)}
.cm-item-go{display:flex;gap:10px;width:100%;border:0;background:none;color:var(--ink);font:inherit;text-align:left;padding:10px 16px;cursor:pointer}
.cm-item-go:hover,.cm-item-go:focus-visible{background:var(--panel-2)}
.cm-item-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.cm-item-h{display:flex;align-items:baseline;gap:6px}
.cm-item-h .cm-time{margin-left:auto}
.cm-item-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-item-m{color:var(--ink-3);font-size:12px}
.cm-item-r{display:flex;align-items:flex-start;gap:4px;color:var(--ok);font-size:12px}
.cm-item-r span{color:var(--ink-2);min-width:0}
.cm-item-r svg{flex:none;margin-top:1px}
.cm-has-reopen .cm-item-r{padding-right:58px} /* the line wraps before Reopen */
.cm-item-reopen{position:absolute;right:16px;bottom:10px}
.cm-empty{margin:0;padding:18px 16px;color:var(--ink-3);font-size:13px}
.cm-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;cursor:pointer}
.cm-switch input{position:absolute;opacity:0;width:1px;height:1px}
.cm-switch-l{flex:1;min-width:0}
.cm-track{position:relative;width:32px;height:18px;border-radius:9px;background:var(--line);flex:none;transition:background .15s}
.cm-track::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.cm-switch input:checked+.cm-track{background:var(--cm-blue)}
.cm-switch input:checked+.cm-track::after{transform:translateX(14px)}
.cm-switch input:focus-visible+.cm-track{outline:2px solid var(--cm-blue);outline-offset:2px}
@media (max-width:700px){.cm-pop{width:calc(100% - 16px)}.cm-side .cm-top{padding-top:10px}}
/* SNAPSHOT-1 PORT: Sign-off steps (wave 3, task I) — Project tools as a side window (H's rule: beside the toolbar, one at a time), its pop-ups beside their opener, Sign-off's three steps, the signer's banner, the Partners link and the dimension cards. */
.project-tools-dialog.pt-side{display:flex;flex-direction:column;overflow:hidden;padding:0;width:min(380px,calc(100% - 20px));max-height:none;margin:0;background:var(--panel);color:var(--ink);font:13px/1.45 var(--f-body)}
.stage.in3d .pt-side,.stage.capturing .pt-side{display:none !important}
@media print{.pt-side,.so-banner{display:none !important}}
body:has(.pt-side) #pd-progress{visibility:hidden} /* the plan's confirmed chip gives way, as for Documents */
.pt-side .pt-top{display:flex;align-items:center;gap:8px;padding:12px 12px 4px 16px}
.pt-side .pt-top h2{margin:0;font-size:16px;flex:1}
.pt-side .pt-top .doc-x{margin-left:0}
.pt-side .pt-body{flex:1;min-height:0;overflow:auto;padding:4px 16px 16px;display:flex;flex-direction:column}
.pt-side [data-tools-error]{margin:0;padding:0 16px}.pt-side [data-tools-error]:not(:empty){padding:8px 16px;color:var(--fail)}
.pt-tabs{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--panel-2);align-self:flex-start;margin:6px 0 2px}
.pt-tab{border:0;background:transparent;color:var(--ink-2);font:500 12.5px/1 var(--f-body);padding:8px 12px;border-radius:999px;cursor:pointer}
.pt-tab.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.pt-tab:focus-visible{outline:2px solid var(--ink-3);outline-offset:1px}
.pt-line{margin:10px 0 4px;color:var(--ink-2);font-size:12.5px}
.pt-side .project-dimension-lines{grid-template-columns:1fr;gap:10px}
.project-tools-dialog.pt-pop{width:min(340px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:14px 16px;border-radius:12px;box-shadow:var(--shadow)}
.project-tools-scrim.pt-pop-scrim{background:transparent;display:block;padding:0}
.pt-pop .project-tools-heading h2{font-size:14px;margin:0}
.pt-ask .project-tools-heading [data-close]{display:none}
.pt-ask p{margin:8px 0}.pt-ask .field{margin:8px 0}.pt-ask .note{color:var(--ink-3);font-size:12px}
.pt-ask .pt-ask-acts{justify-content:flex-end;margin:10px 0 0}
.so-approve{background:var(--ok) !important;border-color:var(--ok) !important;color:#fff !important}
:root[data-theme="dark"] .so-approve{color:#0E1A0F !important}
/* The step bar */
.so-steps{list-style:none;display:flex;align-items:center;gap:6px;margin:10px 0 12px;padding:0}
.so-step button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 0;color:var(--ink-3);font:500 12.5px/1 var(--f-body);cursor:pointer;white-space:nowrap}
.so-step button:disabled{cursor:default}
.so-step.on button{color:var(--ink);font-weight:600}
.so-step-n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:11px;color:var(--ink-3);flex:none}
.so-step.on .so-step-n{background:var(--ink);border-color:var(--ink);color:var(--panel)}
.so-step.done .so-step-n{background:var(--ok-tint);border-color:var(--ok-tint);color:var(--ok)}
.so-step.warn .so-step-n{background:var(--warn-tint);border-color:var(--warn);color:var(--warn)}
.so-step.warn button{color:var(--warn)}
.so-step-line{flex:1;height:1px;background:var(--line);min-width:8px}
.so-step-body{display:flex;flex-direction:column;flex:1}
.so-foot{margin-top:auto;padding-top:14px}
.so-foot .so-send,.so-foot .so-next{width:100%;min-height:40px;justify-content:center}
/* Who signs */
.so-h{margin:12px 0 6px;font:600 12.5px/1.2 var(--f-body)}
.so-party{display:flex;flex-direction:column;gap:6px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line-2,var(--line))}
.so-company-row{display:flex;gap:6px;align-items:center}
.so-company{flex:1;min-width:0;height:36px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--panel);color:var(--ink);font:13px var(--f-body)}
.so-trash,.so-x{width:30px;height:30px;flex:none}
.so-trash svg,.so-x svg{width:16px;height:16px}
.so-x{border:0;background:transparent}
.so-signers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.so-signer{display:flex;align-items:center;gap:8px}
.so-av{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;background:#2563C9;color:#fff;font:600 10.5px/1 var(--f-body)}
.so-signer:nth-child(3n+2) .so-av{background:#C2410C}.so-signer:nth-child(3n+3) .so-av{background:#0F766E}
.so-who{display:flex;flex-direction:column;min-width:0;flex:1}
.so-who strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so-who>span{color:var(--ink-3);font-size:12px;overflow-wrap:anywhere}
.so-gone{opacity:.8}.so-gone .so-av{background:var(--line);color:var(--ink-2)}
.so-link{border:0;background:none;padding:0;color:#2563C9;font:600 12.5px var(--f-body);cursor:pointer;text-align:left}
:root[data-theme="dark"] .so-link{color:#7FA8F5}
.so-link:hover{text-decoration:underline}
.so-add{align-self:flex-start;padding:4px 0}
.so-add-member{height:32px;border:1px dashed var(--line);border-radius:8px;background:transparent;color:var(--ink-2);font:12.5px var(--f-body);padding:0 8px;align-self:flex-start;max-width:100%}
.so-email-box{background:var(--panel-2);border-radius:10px;padding:10px}
.so-email-box label{font-weight:600;font-size:12.5px}
.so-email-row{display:flex;gap:6px;margin:6px 0}
.so-email-row input{flex:1;min-width:0;height:34px;box-sizing:border-box;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:var(--panel);color:var(--ink);font:13px var(--f-body)}
.so-email-box p{margin:0;color:var(--ink-3);font-size:12px}
.so-why{color:var(--ink-3);font-size:12px;margin:8px 0 0}
/* Send */
.so-title{margin:4px 0 10px;font-size:14px}
.so-people{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.so-people li{display:flex;align-items:center;gap:8px}
.so-people li span:last-child{margin-left:auto;color:var(--ink-3);font-size:12px;text-align:right}
.so-people li:nth-child(3n+2) .so-av{background:#C2410C}.so-people li:nth-child(3n+3) .so-av{background:#0F766E}
.so-version{background:var(--panel-2);border-radius:10px;padding:10px 12px;margin:0 0 10px;color:var(--ink-2)}
.so-message textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--panel);color:var(--ink);font:13px/1.4 var(--f-body)}
.so-missing{background:var(--warn-tint);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:10px;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.so-missing strong{color:var(--ink)}.so-missing p{margin:0 0 6px;color:var(--ink-2)}
/* Track */
.so-card{border:1px solid var(--line);border-radius:10px;padding:12px;margin:0 0 10px}
.so-card-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.so-sub{margin:2px 0 6px;color:var(--ink-3);font-size:12px}
.so-count{margin:4px 0 6px}
.so-bar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.so-bar span{display:block;height:100%;background:var(--ok);border-radius:3px}
.so-co{border-top:1px solid var(--line);padding:8px 0}
.so-co h4{margin:2px 0 6px;font-size:12.5px;color:var(--ink-2)}
.so-co ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.so-co li:nth-child(3n+2) .so-av{background:#C2410C}.so-co li:nth-child(3n+3) .so-av{background:#0F766E}
.so-row{display:flex;align-items:center;gap:8px}
.so-st{margin-left:auto;font-size:12px;white-space:nowrap}
.so-st.wait{color:var(--ink-3)}.so-st.ok{color:var(--ok);font-weight:600}.so-st.no{color:var(--fail);font-weight:600}
.so-reason{margin:6px 0 0 34px;background:var(--panel-2);border-radius:8px;padding:8px 10px;color:var(--ink-2);overflow-wrap:anywhere}
.so-yours{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:8px 0}.so-yours p{margin:0;font-weight:600}.so-yours .acts{margin:8px 0 0}
.so-track-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.so-track-acts .btn{justify-content:center}
.so-track-acts .btn:only-child{grid-column:1/-1}
.so-foot .note{margin:6px 0 0;color:var(--ink-3);font-size:12px}
.so-earlier{margin-top:8px}.so-earlier summary{cursor:pointer;color:#2563C9;font-weight:600;font-size:12.5px;text-decoration:underline}
:root[data-theme="dark"] .so-earlier summary{color:#7FA8F5}
.so-earlier-r{padding:8px 0}.so-earlier-r p{margin:2px 0}
.so-notice{border-radius:8px;margin:0 0 10px}
/* An email that didn't go out (after the owner's review of the completion review): plain words and Send again */
.so-st.unsent{color:var(--fail);font-weight:600;white-space:normal;text-align:right}.so-st.unsent .so-resend{font-size:12px;margin-left:2px}
.so-unsent-note{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--fail-tint);color:var(--fail);font-size:12.5px;line-height:1.4}
/* The signer's banner, under the top bar until they answer */
.so-banner{display:flex;align-items:center;gap:12px;margin:8px 10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);font:13px/1.35 var(--f-body);color:var(--ink)}
.so-banner-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--ok-tint);color:var(--ok);flex:none}
.so-banner-ic svg{width:18px;height:18px}
.so-banner-t{display:flex;flex-direction:column;min-width:0;flex:1}
.so-banner-t span{color:var(--ink-3);font-size:12px;overflow-wrap:anywhere}
.so-banner-acts{display:flex;gap:6px;flex:none}
@media(max-width:700px){.so-banner{flex-wrap:wrap}.so-banner-acts{width:100%}.so-banner-acts .btn{flex:1;justify-content:center}}
/* The Setup panel's Partners link */
.project-partners .so-partners-link{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:10px 2px;color:var(--ink);font:600 13px/1.2 var(--f-body);cursor:pointer;text-align:left}
.so-partners-link .so-pl-sub{margin-left:auto;color:var(--ink-3);font-weight:400;font-size:12px}
.so-partners-link svg{width:16px;height:16px;flex:none;color:var(--ink-3)}
.so-partners-link::after{content:none !important}
/* Dimension cards */
.pd-count{margin:4px 0 8px;font-size:12.5px}.pd-count span{color:var(--ink-3)}
.pd-card{border-radius:10px;gap:6px}
.pd-card-h{display:flex;align-items:center;gap:8px;min-width:0}
.pd-card-h strong{min-width:0}.pd-card-h .btn{border:0;background:none;padding:0;font-weight:600;text-align:left;white-space:normal;color:var(--ink)}
.pd-num-chip{flex:none;background:#2563C9;color:#fff;border-radius:4px;padding:2px 5px;font:600 10.5px/1.2 var(--f-body)}
.pd-card-v{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pd-card-len{font:600 17px/1.2 var(--f-body)}
.pd-card-state{color:var(--ink-3);font-size:12px;text-align:right}
.pd-card-state.pd-ok{color:var(--ok)}.pd-card-state.pd-diff{color:var(--warn);font-weight:600}.pd-card-state.pd-stale-state{color:var(--warn)}
.pd-card-acts{margin:4px 0 0 !important;align-items:center}
.pd-more-wrap{position:relative;margin-left:auto}
.pd-more-b{display:inline-flex;align-items:center;gap:4px}.pd-more-b svg{width:12px;height:12px}
.pd-more-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:5;display:flex;flex-direction:column;min-width:150px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.pd-more-menu[hidden]{display:none}
.pd-more-i{border:0;background:none;text-align:left;padding:8px 10px;border-radius:6px;color:var(--ink);font:13px var(--f-body);cursor:pointer}
.pd-more-i:hover,.pd-more-i:focus-visible{background:var(--panel-2);outline:none}
.pd-more-i:disabled{color:var(--ink-3);cursor:default}
.pd-card-who{color:var(--ink-3);font-size:12px}
.pd-card form[hidden]{display:none}
.plan-dimensions .pd-num rect{fill:#2563C9}.plan-dimensions .pd-num text{fill:#fff;font:600 9.5px var(--f-body);stroke:none}
:root[data-theme="dark"] .plan-dimensions .pd-num rect{fill:#3B6FD4}
@media(max-width:700px){.project-tools-dialog.pt-side{width:calc(100% - 20px);border-radius:14px}.project-tools-dialog.pt-pop{width:calc(100vw - 16px)}}
/* SNAPSHOT-1 PORT: wave 3 J — Markup (picture j1); task 121 (Markup round 2, the owner's mockup): on computers the capsule
   bar is always on the Design step at the top left of the plan, on the view buttons' row with their height (38 px) and style,
   or on its own row 10 px under them (client/markup sets its spot, .mk-row and --mk-below); its options sit 10 px under it.
   Phones keep the bar opened from the Markup button, as before. The lit tool is Add's pale green; the picked outline, the
   handles, the hover outline and the box you type in are the plan's selection green; no blue anywhere in markup.
   Markup's own layer is never pressed (picking is by shape), only a picked markup's handles. Never printed from the screen. */
.mk-ui{position:absolute;left:10px;top:10px;z-index:7;display:flex;align-items:flex-start;gap:8px;max-width:calc(100% - 20px);flex-wrap:nowrap}
.mk-ui[hidden]{display:none}
.mk-ui.mk-wrap{flex-wrap:wrap}
.mk-ui.mk-desk{flex-direction:column;gap:10px;max-width:none}
.mk-bar,.mk-opts{display:inline-flex;align-items:center;gap:2px;flex:none;box-sizing:border-box;height:38px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;box-shadow:var(--shadow);color:var(--ink-2)}
.mk-opts[hidden]{display:none}
.mk-tool{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;padding:0}
.mk-tool svg{width:18px;height:18px}
.mk-tool:hover{color:var(--ink);background:var(--panel-2)}
.mk-tool[aria-pressed="true"]{background:var(--accent-2);color:#2F6A16}
:root[data-theme="dark"] .mk-tool[aria-pressed="true"]{color:#D8F5C4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mk-tool[aria-pressed="true"]{color:#D8F5C4}}
.mk-ui button:focus-visible,.mk-ui label:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.mk-div{width:1px;height:20px;background:var(--line);margin:0 4px;flex:none}
.mk-opt{display:inline-flex;align-items:center;gap:6px;height:30px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:500 12.5px/1.2 var(--f-body);padding:0 9px;cursor:pointer;white-space:nowrap}
.mk-opt:hover,.mk-opt[aria-expanded="true"]{background:var(--panel-2)}
.mk-opt svg:not(.mk-chev){width:24px;height:12px}
.mk-opt .mk-aa{font-weight:600}
.mk-opt .mk-ol{color:var(--ink-2)}
.mk-chev{width:10px;height:10px;color:var(--ink-3)}
.mk-dot{display:inline-block;width:16px;height:16px;border-radius:50%;flex:none}
.mk-dot.mk-dot-w{box-shadow:inset 0 0 0 1px #B4B4BA}
.mk-sample{display:inline-block;line-height:1.25;white-space:nowrap}
.mk-del{display:inline-flex;align-items:center;gap:5px;height:30px;border:0;border-radius:999px;background:transparent;color:#C8312B;font:600 12.5px/1.2 var(--f-body);padding:0 10px 0 8px;cursor:pointer}
.mk-del svg{width:16px;height:16px}
.mk-del:hover{background:#FBE9E7}
:root[data-theme="dark"] .mk-del{color:#FF8A80}:root[data-theme="dark"] .mk-del:hover{background:#3A2220}
.mk-menu{position:absolute;z-index:9;min-width:180px;box-sizing:border-box;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:5px;font:500 12.5px/1.2 var(--f-body);color:var(--ink)}
.mk-menu[hidden]{display:none}
.mk-menu .mk-mi{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;border:0;background:none;border-radius:8px;padding:6px 10px;min-height:32px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mk-menu .mk-mi:hover{background:var(--panel-2)}
.mk-menu .mk-mi.on{background:#EAF6E4;font-weight:600}
:root[data-theme="dark"] .mk-menu .mk-mi.on{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mk-menu .mk-mi.on{background:color-mix(in srgb,var(--accent) 22%,var(--panel))}}
.mk-menu svg{width:30px;height:12px;flex:none}
.mk-menu .mk-aa-s{display:inline-block;min-width:30px;font-weight:600;line-height:1}
.mk-menu .mk-sample{min-width:44px}
.mk-sets{display:flex;gap:2px;background:var(--panel-2);border-radius:999px;padding:2px;margin:2px 2px 8px}
.mk-sets .mk-set{flex:1;border:0;background:none;border-radius:999px;padding:5px 10px;font:inherit;color:var(--ink-2);cursor:pointer}
.mk-sets .mk-set.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(17,17,18,.12)}
.mk-sws{display:grid;grid-template-columns:repeat(6,26px);gap:8px;padding:2px 4px 4px}
.mk-sw,.mk-wheel{position:relative;width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;box-sizing:border-box}
.mk-sw.mk-sw-w{box-shadow:inset 0 0 0 1px #B4B4BA}
.mk-sw.on,.mk-wheel.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px #111112}
.mk-sw.mk-sw-w.on{box-shadow:inset 0 0 0 1px #B4B4BA,0 0 0 2px var(--panel),0 0 0 4px #111112}
:root[data-theme="dark"] .mk-sw.on,:root[data-theme="dark"] .mk-wheel.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px #E4E4E4}
.mk-wheel{display:flex;align-items:center;justify-content:center;background:conic-gradient(#FF3B30,#FFCC00,#34C759,#00C7BE,#007AFF,#AF52DE,#FF2D55,#FF3B30)}
.mk-wheel input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.mk-wheel .mk-plus{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#FFFFFF;color:#111112;font:700 12px/1 var(--f-body);pointer-events:none}
.mk-yl{padding:6px 6px 2px;color:var(--ink-3);font-size:11.5px;font-weight:600}
.mk-next{display:flex;align-items:center;gap:6px;border-top:1px solid var(--line);margin-top:4px;padding:8px 6px 3px 10px}
.mk-next > span:first-child{color:var(--ink-2)}
.mk-next .mk-next-n{border:0;background:none;font:600 12.5px/1.2 var(--f-body);color:var(--ink);padding:3px 4px;border-radius:6px;cursor:text;min-width:28px;text-align:left}
.mk-next .mk-next-n:hover{background:var(--panel-2)}
.mk-next .mk-next-in{width:64px;font:600 12.5px/1.2 var(--f-body);color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:3px 5px}
.mk-next .mk-next-b{margin-left:auto;display:flex;gap:4px}
.mk-next .mk-next-b button{width:26px;height:26px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:600 14px/1 var(--f-body);cursor:pointer;padding:0}
.mk-next .mk-next-b button:disabled{opacity:.4;cursor:default}
.mk-tip{position:absolute;z-index:12;pointer-events:none;background:var(--ink);color:var(--panel);border-radius:6px;padding:4px 8px;font:500 12px/1.3 var(--f-body);white-space:nowrap;box-shadow:var(--shadow)}
.mk-tip[hidden],.mk-dtip[hidden]{display:none}
.mk-dtip{position:absolute;z-index:12;pointer-events:none;transform:translateX(-50%);background:rgba(17,17,18,.88);color:#FFFFFF;border-radius:6px;padding:5px 9px;font:500 12px/1.3 var(--f-body);white-space:nowrap}
.mk-edit{position:absolute;z-index:8;box-sizing:border-box;min-height:28px;resize:none;overflow:hidden;white-space:pre;font:600 16px/1.3 var(--f-body);background:#FFFFFF;border:1.5px dashed var(--plan-sel);border-radius:6px;padding:3px 8px;outline:none}
#ov .mk-layer,#ov .mk-layer *{pointer-events:none}
#ov .mk-layer .mk-h{pointer-events:auto;fill:#FFFFFF;stroke:var(--plan-sel);stroke-width:1.5}
#ov .mk-layer .mk-sel{fill:none;stroke:var(--plan-sel);stroke-width:1}
#ov .mk-layer .mk-hov{fill:none;stroke:var(--plan-sel);stroke-opacity:.8;stroke-width:1}
#ov .mk-layer .mk-n{font-family:var(--f-body);font-weight:700;stroke:none}
#stage.mk-tooled #cv,#stage.mk-cur-cross #cv{cursor:crosshair}
#stage.mk-cur-move #cv{cursor:move}
#stage.mk-open #hint{visibility:hidden} /* phones: the bar takes the hint's place while it's open */
#stage.mk-opts-on #hint{visibility:hidden} /* computers: the hint hides only while the options show */
/* the bar on its own row: what sat under the view buttons moves below it (as task 120's Site setup bar) */
#stage.mk-bar-on.mk-row .hint{top:var(--mk-below,106px)}
#stage.mk-bar-on.mk-row .sun-bar{top:var(--mk-below,106px)}
#stage.mk-bar-on.mk-row{--north-top:var(--mk-below,106px)}
#stage.mk-bar-on.mk-row.sunbar-on{--north-top:calc(var(--mk-below,106px) + 46px)}
#stage.mk-bar-on.mk-row .cmp-tag{top:calc(var(--mk-below,106px) + 2px)}
.stage.capturing .mk-ui,.stage.xp .mk-ui,.stage.in3d .mk-ui,.stage.capturing .mk-tip,.stage.xp .mk-tip,.stage.capturing .mk-dtip,.stage.in3d .mk-layer{display:none !important}
.style-switch .ss-mk{display:inline-flex;align-items:center;gap:5px}
.style-switch .ss-mk svg{width:15px;height:15px}
.style-switch .ss-mk[aria-pressed="true"]{background:var(--sunk);color:var(--ink)} /* pressed while markup shows, as Dimensions is */
.tool.mk-btn svg{width:20px;height:20px}
@media(max-width:700px){.mk-ui{flex-wrap:wrap}.mk-bar,.mk-opts{height:auto;min-height:38px}.mk-bar{flex-wrap:wrap;max-width:100%;row-gap:2px;border-radius:20px}.mk-div{margin:0 2px}}
/* phones: with Markup in the view row (its icon only), the row's dividers sit closer, and on small phones the buttons' sides
   are 1 px narrower, so every view button, 3D included, still fits the row at 360–402 px (browser_phone_view_buttons) */
@media(max-width:700px){.style-switch .ss-sep{margin:4px 1px}}
@media(max-width:380px){.style-switch button{padding-left:5px;padding-right:5px}}
/* Names on this plan in Settings (picture j2) */
.nm-sec .nm-h{margin:12px 0 6px;color:var(--ink-2);font-size:12px;font-weight:600}
.nm-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.nm-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px}
.nm-tile .nm-tile-pic{width:100%}
.nm-tile .nm-tile-pic svg{width:100%;height:34px;display:block;overflow:visible}
.nm-tile .nm-tile-pic .lbl{font-size:16px}
.nm-tile .set-t{font-size:11.5px;font-weight:500;color:var(--ink-2)}
.nm-tile[aria-checked="true"] .set-t{font-weight:600;color:var(--ink)} /* j2: the sample name is the large part, the style's name smaller under it */
.nm-sws{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nm-sw{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--sw);padding:0;cursor:pointer;position:relative;box-sizing:border-box}
.nm-sw[aria-checked="true"],.nm-sw.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.nm-sw:focus-visible{outline:2px solid #2C6DF9;outline-offset:3px}
.nm-other{display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(#E64C3D,#FADE34,#5DCA53,#54C2BA,#2C6DF9,#794FF8,#EC4B60,#E64C3D);overflow:hidden}
.nm-other span{width:14px;height:14px;border-radius:50%;background:var(--panel);color:var(--ink);font:700 12px/14px var(--f-body);text-align:center}
.nm-other input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.nm-preview svg{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line)}
.nm-preview .nmp-bg{fill:var(--panel-2)}
.nm-preview .nmp-nea{fill:#DDE8D3;stroke:#5E8A4E;stroke-dasharray:5 4}
.nm-preview .nmp-bld{fill:#D7D1C4;stroke:#7B7466}
.nm-preview .nmp-pa{fill:#1F4257}
/* SNAPSHOT-1 PORT: task 120 — with nothing set the preview draws today's names (v84's label classes), with their dark-mode shades as on the plan. */
:root[data-theme="dark"] .nm-today .lbl.bldl{fill:#F2F2F3}
:root[data-theme="dark"] .nm-today .lbl.space{fill:#C9BCFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nm-today .lbl.bldl{fill:#F2F2F3}:root:not([data-theme="light"]) .nm-today .lbl.space{fill:#C9BCFF}}
.nm-sec button:disabled,.nm-sec input:disabled{cursor:default;opacity:.55}
@media(max-width:700px){.nm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The view buttons: Look (palette and the style's name), Dimensions, Plan dimensions, Sun and 3D; Plan look below them. */
.style-switch .ss-look{display:inline-flex;align-items:center;gap:6px}
.style-switch .ss-look svg{width:16px;height:16px}
.style-switch .ss-look .ss-chev{width:10px;height:10px;transition:transform .15s}
.style-switch .ss-look[aria-expanded="true"]{background:var(--sunk);color:var(--ink)}
.style-switch .ss-look[aria-expanded="true"] .ss-chev{transform:rotate(180deg)}
.look-pop{position:absolute;right:10px;top:56px;z-index:9;width:300px;max-width:calc(100% - 20px);max-height:calc(100% - 76px);overflow:auto;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px 14px;color:var(--ink);font:13px/1.35 var(--f-body)}
.lp-h h3{margin:0;font:600 14px/1.3 var(--f-body)}
.lp-h p{margin:2px 0 0;color:var(--ink-3);font-size:12px}
.lp-l{margin:12px 0 6px;color:var(--ink-2);font-size:12px;font-weight:500}
.lp-styles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lp-style{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 5px 6px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink-2);font:500 12px/1.2 var(--f-body);cursor:pointer}
.lp-style svg{width:100%;height:auto;display:block;border-radius:6px}
.lp-style[aria-checked="true"]{border:2px solid var(--ink);padding:4px 4px 5px;color:var(--ink);font-weight:600}
.lp-row{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 2px;color:var(--ink-2);font-size:12px;font-weight:500}
.lp-row output{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.look-pop input[type=range]{width:100%;accent-color:#5B8C3C;margin:4px 0 0}
.lp-note{margin:4px 0 0;color:var(--ink-3);font-size:11.5px}
.lp-fills{display:flex;gap:8px}
.lp-fill{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--sw);cursor:pointer;padding:0}
.lp-fill[aria-checked="true"]{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--ink)}
.lp-style:focus-visible,.lp-fill:focus-visible{outline:2px solid #2F7D4A;outline-offset:2px}
.look-pop button:disabled,.look-pop input:disabled{cursor:default;opacity:.55}
.stage.cmp-on .look-pop{z-index:9}
.stage.capturing .look-pop{display:none}
/* SNAPSHOT-1 PORT: Task 117 — Plan look's Reset link, at the header's right; hidden for people who can't change the plan. */
.lp-h{position:relative}
.lp-reset{position:absolute;right:0;top:1px;padding:0;border:0;background:none;color:var(--ink-2);font:500 12px/1.3 var(--f-body);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lp-reset:hover{color:var(--ink)}
.lp-reset:focus-visible{outline:2px solid #2F7D4A;outline-offset:2px}
.lp-reset[hidden]{display:none}
/* Compare: one button at the bottom centre in the same white bar, dark while on (the bar keeps .cmp-switch). */
.cmp-switch{padding:0;gap:0}
.cmp-switch .cmp-b{height:36px;display:inline-flex;align-items:center;gap:7px;padding:0 15px}
.cmp-switch .cmp-b svg path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.cmp-switch .cmp-b[aria-pressed="true"]{background:#111112;color:#FFFFFF}
.cmp-switch[hidden]{display:none}
/* Every bar around the plan: 38 px, fully rounded, one border and shadow (the zoom bar's). The scale bar is drawn in #ov. */
:root{--bar-drop:drop-shadow(0 1px 2px rgba(0,0,0,.04)) drop-shadow(0 8px 28px rgba(0,0,0,.06))} /* --shadow as an SVG filter (same offsets and blurs) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bar-drop:drop-shadow(0 1px 2px rgba(0,0,0,.3)) drop-shadow(0 4px 16px rgba(0,0,0,.25))}}
:root[data-theme="dark"]{--bar-drop:drop-shadow(0 1px 2px rgba(0,0,0,.3)) drop-shadow(0 4px 16px rgba(0,0,0,.25))}
.sb-bg{fill:var(--panel);stroke:var(--line);opacity:1;filter:var(--bar-drop)}
#stage.sheet-light #cv{--bar-drop:drop-shadow(0 1px 2px rgba(0,0,0,.04)) drop-shadow(0 8px 28px rgba(0,0,0,.06))} /* the light sheet (export preview, capture) keeps the light shadow */
.sb-line{stroke-width:1.6;stroke-linecap:round}
.sb-t{font:600 12.5px var(--f-body);fill:var(--ink)}
@media (max-width:900px){
  .tb-bl-slot{display:flex;order:4;flex:0 0 auto}
  .tb-bl-slot .bl-group{flex-direction:row;padding:0;gap:2px;background:transparent;border:0;box-shadow:none}
  .tb-bl-slot .bl-b{width:38px;min-height:38px;padding:0}
  .tb-bl-slot .bl-l{display:none}
  .tb-bl-slot .bl-n{top:0;left:22px}
  .tb-status{max-width:180px;min-width:0}
  .look-pop{left:10px;right:10px;width:auto}
  .style-switch{max-width:calc(100% - 20px);overflow-x:auto;scrollbar-width:none} /* phones: Look stays whole (its icon); the rest scrolls */
  .style-switch .ss-look span{display:none}
}

/* SNAPSHOT-1 PORT: Editor layout part 2 — Add (one panel: title, Draw/Place marks, surface tiles, the choices asked before drawing), the Generate
   button and its panel beside the toolbar, and the bottom-left group's one button width and centre line. */
.drawer .add-tt{display:flex;flex-direction:column;gap:1px;min-width:0}
.drawer .add-tt .add-sub{font:400 12.5px/1.3 var(--f-body);color:var(--ink-3)}
.add-mk{flex:none;align-self:center;padding:2px 7px;border-radius:999px;font:600 10.5px/1.3 var(--f-body);letter-spacing:.01em;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
.add-mk[data-mk="draw"]{background:transparent;border-style:dashed}
.lib-card .add-mk{align-self:center;margin-top:2px}
.add-ic{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--ink-2)}
.add-ic svg{width:24px!important;height:24px!important}
.lib-card .add-ic svg{width:28px!important;height:28px!important}
.add-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px}
.add-tile{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px 7px;border-radius:12px;cursor:pointer;text-align:center;color:var(--ink);min-width:0}
.add-tile:hover{background:var(--panel-2)}
.add-tile.on{box-shadow:inset 0 0 0 2px var(--accent)}
.add-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.add-tile[hidden]{display:none}
.add-tile .sfd-sw{display:block;width:100%;height:46px;border-radius:9px;overflow:hidden;box-sizing:border-box;border:1px solid var(--line)}
.add-tile .sfd-sw svg{display:block;width:100%;height:100%}
.add-tile .sfd-n{font:500 12px/1.25 var(--f-body);overflow-wrap:anywhere}
.add-tile .add-mk{font-size:10px;padding:1px 6px}
.add-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin:2px 0 8px}
.add-opts[hidden]{display:none}
.add-opts .add-ol{font:600 12px/1.2 var(--f-body);color:var(--ink-2);align-self:center}
.add-opts .field{flex:1 1 150px;margin:0}
.add-opts .field.add-w{flex:0 0 92px}
.add-opts select,.add-opts input{width:100%;box-sizing:border-box}
.drawer .add-it[hidden],.drawer .lib-sub[hidden]{display:none}
.gen-drawer .gen-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;margin:0 -14px;padding:0 14px 12px}
.gen-drawer .gen-body .sec{margin:0}
.gen-for{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--panel-2)}
.gen-for strong{font-size:15px}
.gen-ak{font:600 11px/1.2 var(--f-body);color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.gen-pick h3{margin:0 0 8px}
.gen-areas{display:flex;flex-direction:column;gap:4px}
.gen-area{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ink)}
.gen-area:hover{background:var(--panel-2)}
.gen-area.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.gen-area:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gen-area .gen-an{font:500 13.5px/1.25 var(--f-body)}
.gen-pick .muted{margin:8px 0 0}
.bl-group{align-items:center}
.bl-group > .bl-b{width:64px;flex:none;margin:0;box-sizing:border-box}
.tb-bl-slot .bl-group > .bl-b{width:38px}

.dims-menu{position:absolute;z-index:9;min-width:220px;padding:5px;box-sizing:border-box;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px}
.dims-menu[hidden]{display:none}
.dims-menu .dm-i{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:8px 10px 8px 8px;border-radius:8px;font:500 13px/1.25 var(--f-body);color:var(--ink);cursor:pointer;white-space:nowrap}
.dims-menu .dm-i::before{content:"";flex:none;width:16px;height:16px;border-radius:4px;border:1.5px solid var(--ink-3);box-sizing:border-box}
.dims-menu .dm-i[aria-checked="true"]::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.dims-menu .dm-i:hover{background:var(--panel-2)}
.dims-menu .dm-i:focus-visible{outline:2px solid var(--ink-3);outline-offset:-2px}
.style-switch .ss-dims{display:inline-flex;align-items:center;gap:6px}
.stage.capturing .dims-menu,.stage.xp .dims-menu{display:none}
/* SNAPSHOT-1 PORT: Editor layout part 2 (owner review) — a chosen category has one outline: the green ring and pale fill on its picture, the name in bold. Keyboard focus rings the picture too, and a chosen picture already has its ring. */
.lib-tile:focus-visible,.lib-round:focus-visible{outline:none}
.lib-tile:focus-visible .lib-pic,.lib-round:focus-visible .lib-pic{outline:2px solid var(--accent);outline-offset:2px}
.lib-tile.on:focus-visible .lib-pic,.lib-round.on:focus-visible .lib-pic{outline:none}
/* SNAPSHOT-1 PORT: Editor layout part 2 (owner review) — with Add or Generate open, the plan's hints stay right of the panel and wrap to two lines when they're too long. */
@media (min-width:701px){.stage.drawer-open .hint{left:calc(332px + (100% - 332px) / 2);width:max-content;max-width:calc(100% - 332px - 24px);border-radius:16px}}
.shape-bar.sb-wrap{white-space:normal}
.shape-bar.sb-wrap .sb-tip{white-space:normal;min-width:0}
.shape-bar.sb-wrap .sb-k,.shape-bar.sb-wrap .sb-btn{white-space:nowrap;flex:none}
@media (max-width:700px){.shape-bar.sb-wrap{flex-wrap:wrap;row-gap:6px;column-gap:6px;padding:4px 8px;line-height:1.25}.shape-bar.sb-wrap .sb-tip{flex:1 1 180px}} /* SNAPSHOT-1 PORT: task 120 — phones: the bar's words wrap inside the plan; its buttons go to a row of their own when they don't fit */
/* SNAPSHOT-1 PORT: Editor layout part 2 (owner review) — only the tool in use is black: Generate's open panel shows the light pressed look of the view bar's Dimensions. */
.tool.gen[aria-pressed="true"]{background:var(--sunk);color:var(--ink)}
/* SNAPSHOT-1 PORT: Editor layout part 2 (owner review) — Generate's Mix: its name above, like Ages and Deck module, and the pill across the panel in three equal parts. */
.gen-drawer .pa-mix{display:grid;gap:4px;margin:6px 0 2px}
.gen-drawer .pa-mix > .muted{font-size:12.5px;color:var(--ink-2)}
.gen-drawer .pa-mix .seg2{display:flex;width:100%;box-sizing:border-box}
.gen-drawer .pa-mix .seg2 label{flex:1 1 0;min-width:0;justify-content:center}