/* The garden page: plan pad and 3D walk. Tokens and rules: docs/DESIGN-DIRECTION.md */
@font-face { font-family: "Sorts Mill Goudy"; src: url("/app/fonts/sorts-mill-goudy-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/app/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/app/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --yew: #1d4a2c; --paper: #f1f3ee; --bronze: #957043; --box: #5d7e54; --lavender: #8c80b6; --slate: #5a625b; --rule: #d5dad1;   /* --yew: the site's Meadow green (owner 10-04) */
  --serif: "Sorts Mill Goudy", Georgia, serif; --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 16px/1.45 var(--sans); color: var(--yew); background: var(--paper); font-variant-numeric: lining-nums; }
#app { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; }
/* the home page's carousel frames an example's 3D (owner 10-04): the 3D alone, to turn; its bar and footer go */
#app[data-embed] { grid-template-rows: 1fr; }   /* the bar and footer hidden take no row: the stage is the only one */
#app[data-embed] :is(.bar, .foot, .walk-toggle) { display: none; }
/* a shared garden's read-only line (/s/<token>, review P2+P3 on #106): its own row above the bar's, no inline style (CSP) */
#app[data-shared] { grid-template-rows: auto auto 1fr auto; }
.shared-line { margin: 0; padding: 8px 16px; font: 13px/1.4 system-ui, sans-serif; }
:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
button { font: 700 15px/1 var(--sans); color: inherit; cursor: pointer; }
[hidden] { display: none !important; }   /* the example garden hides controls that have their own display */

/* top bar: back, title, the one switch that matters, more */
.bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; min-height: 56px; background: var(--yew); color: var(--paper); }
.bar .back { color: #cfd8cc; text-decoration: none; font-size: 15px; white-space: nowrap; }
.bar .back:hover { color: var(--paper); }
.bar .title { font: 21px/1.1 var(--serif); margin: 0 auto 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the title area is one link home (owner test 5) */
.bar .home { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; color: inherit; text-decoration: none; }
.bar .home .title { margin: 0 0 0 4px; }
.bar .home:hover .back { color: var(--paper); }
.bar .home:hover .title { text-decoration: underline; text-decoration-color: rgba(241, 243, 238, .5); text-underline-offset: 4px; }
.switch { display: inline-flex; border: 1px solid #5b7262; border-radius: 999px; padding: 3px; }
.switch button { background: none; border: 0; border-radius: 999px; padding: 9px 16px; min-height: 38px; color: #cfd8cc; }
.switch button.active { background: var(--paper); color: var(--yew); }
.more { position: relative; }
.bar .cta { padding: 10px 18px; min-height: 40px; border-radius: 999px; background: var(--paper); color: var(--yew); text-decoration: none;
  font-weight: 700; white-space: nowrap; }
.bar .cta:hover { background: #fff; }
.more > summary { list-style: none; cursor: pointer; padding: 8px 12px; min-height: 40px; border-radius: 8px; font-size: 20px; line-height: 1; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary, .more > summary:hover { background: #2f4a3a; }

/* menus (Add, more): a plain list that opens over the stage */
.menu-list { position: absolute; z-index: 5; min-width: 220px; max-height: 60vh; overflow: auto; padding: 6px; margin: 0;
  background: #fff; color: var(--yew); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 30px rgba(34, 55, 43, .18); }
.more .menu-list { right: 0; top: calc(100% + 6px); }
.menu-list h4 { margin: 10px 10px 4px; font: 400 15px var(--serif); color: var(--slate); }
.menu-list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 11px 10px; font-weight: 400; }
.menu-list button:hover, .menu-list button:focus-visible { background: var(--paper); }
.menu-list button.danger { color: #8a2b1a; }

.stage { position: relative; overflow: hidden; background: var(--paper); }
.pad-host, .view3d { position: absolute; inset: 0; width: 100%; height: 100%; }
#app[data-view="3d"] .pad-host { display: none; }
#app:not([data-view="3d"]):not([data-view="both"]) .view3d, #app:not([data-view="3d"]):not([data-view="both"]) .walk-toggle,
#app:not([data-view="3d"]):not([data-view="both"]) .picture-open, #app:not([data-view="3d"]):not([data-view="both"]) .shot-open { display: none; }
/* the plan and its 3D side by side (owner spec, PR C): the 3D follows each save */
/* the split is the person's: a divider to drag (owner test 2, B4), remembered in this browser (main.ts) */
#app { --split: 60%; }
#app[data-view="both"] .pad-host { right: calc(100% - var(--split)); width: auto; }
#app[data-view="both"] .view3d { left: var(--split); width: calc(100% - var(--split)); }
#app[data-view="both"] .walk-toggle { left: calc(var(--split) + (100% - var(--split)) / 2); }
.split-divider { display: none; }
#app[data-view="both"] .split-divider { display: block; position: absolute; top: 0; bottom: 0; left: var(--split); width: 14px;
  margin-left: -7px; cursor: col-resize; z-index: 5; touch-action: none; }
.split-divider::after { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.split-divider:hover::after, .split-divider:focus-visible::after, .split-divider.dragging::after { background: var(--bronze); }
.split-divider:focus-visible { outline: none; }
@media (max-width: 1099px) { .switch .both { display: none; } }
#app[data-noplot="true"] .walk-toggle, #app[data-noplot="true"] .picture-open, #app[data-noplot="true"] .shot-open { display: none; }   /* a blank sheet has no 3D to walk or picture yet */

/* the status line under the plan */
.foot { display: flex; align-items: center; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); min-height: 44px;
  background: #fff; border-top: 1px solid var(--rule); }
.status { flex: 1; min-width: 0; color: var(--slate); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status.error { color: #8a2b1a; white-space: normal; }

/* the plan pad: the WalkMyPlan sketch pad (sketch.css, appended to this file by build.mjs), filling the stage */
.pad-host .garden-sketch { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; font: 16px/1.35 var(--sans); }   /* WMP pad type size */
/* the garden inside WMP's shapes: an area is filled with its surface, a line drawn as what it is, an item as its symbol */
.sketch-pad .room { fill-opacity: .72; }
.sketch-pad .room.area-plot { fill-opacity: 1; stroke-width: calc(4px * var(--wk, 1)); }
.sketch-pad .run.selected { filter: drop-shadow(0 0 3px var(--bronze)); }   /* an area shows WMP's orange outline and dots; a shadow would tint its see-through fill */
/* the toolbar stays on one line (owner test 2): on a narrow pad the tools show their icons, their names as tooltips */
.garden-sketch { container-type: inline-size; }
@container (max-width: 760px) { .garden-sketch .sketch-tools .tool-label { display: none; } }
.sketch-pad .past-boundary { fill: none; stroke: #b4572e; stroke-width: 1.6; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; pointer-events: none; }   /* past the boundary: a soft mark, never a block (owner test 10-01) */
.sketch-pad .room.area-shape { stroke-dasharray: 6 4; }   /* a shape with no type yet (owner test 10-01): its type chooser waits */
.sketch-pad .run.line-path { stroke-opacity: .9; }
.sketch-pad .pool .item-body { stroke: rgba(34, 55, 43, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* overhead structures see-through (owner test 5): what is under a pergola or a parasol shows on the plan */
.sketch-pad .pool.overhead .item-body { fill-opacity: .35; }
.sketch-pad .pool.overhead .item-icon { opacity: .45; }
/* a name too big for its shape on screen waits for the pointer (coordinator after #58) */
.sketch-pad .hover-name { display: none; pointer-events: none; }
.sketch-pad .pool:hover .hover-name, .sketch-pad .room:hover + .hover-name, .sketch-pad .run:hover + .hover-name { display: inline; }
.sketch-pad .room-surface { fill: #4a524b; font-size: calc(11px * var(--fs, 1)); text-anchor: middle; user-select: none; pointer-events: none; }
.chip-rail .chip-hint { font-size: .78rem; color: #5a625b; }
.sketch-pad .crown { stroke: rgba(34, 55, 43, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; fill-opacity: .88; }
.sketch-pad .crown-shadow { fill: rgba(34, 55, 43, .16); stroke: none; }
.sketch-pad .trunk { fill: #5a4632; }
.sketch-pad .frond { fill: none; stroke-linecap: round; }
.sketch-pad .pool .dot, .sketch-pad .pool .trunk, .sketch-pad .pool .crown-shadow, .sketch-pad .room-name, .sketch-pad .room-area { pointer-events: none; }
.sketch-card .pad-notice { cursor: default; }
.grid-legend span + span { margin-inline-start: 10px; padding-inline-start: 10px; border-inline-start: 1px solid var(--rule); }   /* inline-start: in he/ar the divider sits between the two parts, not outside (#108 look) */
.chip-rail .chip svg.chip-icon { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: 6px; }
.sketch-pad .line-name { font-size: 12px; font-weight: 600; fill: var(--slate); }

/* 3D: no bottom bar; the status floats over the top of the view, only while it has something to say */
#app[data-view="3d"] .foot { position: absolute; left: 0; right: 0; top: 64px; z-index: 2; justify-content: center; min-height: 0; padding: 0 12px;
  background: none; border: 0; pointer-events: none; }
#app[data-view="3d"] .status { display: block; flex: 0 1 auto; padding: 7px 16px; border-radius: 999px; background: rgba(241, 243, 238, .9); color: var(--yew); }
#app[data-view="3d"] .status:empty { display: none; }
.walk-toggle { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); min-height: 52px; padding: 0 30px;
  border: 0; border-radius: 999px; background: var(--paper); color: var(--yew); font-size: 17px; box-shadow: 0 8px 26px rgba(20, 33, 25, .35); }

/* realistic pictures: a quiet second action at the top right of the 3D view, and a dialog with the pictures */
/* the 3D view's buttons (owner test 4, WalkMyPlan's panctl and zoomctl): bottom right of the 3D pane, above the walk
   button; Fit in the middle of the pad */
.view-pad, .view-zoom { position: absolute; right: 12px; z-index: 4; display: grid; background: rgba(241, 243, 238, .92);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(34, 55, 43, .10); }
.view-pad { bottom: 136px; grid-template-columns: repeat(3, 40px); grid-auto-rows: 38px; }
.view-zoom { bottom: 84px; grid-template-columns: repeat(2, 60px); grid-auto-rows: 40px; }
.view-pad button, .view-zoom button { min-height: 0; border: 0; padding: 0; background: none; color: var(--yew); font: inherit; font-size: 1.2rem;
  line-height: 1; cursor: pointer; }
.view-zoom button + button { border-left: 1px solid var(--rule); }
.view-pad button:hover, .view-zoom button:hover { background: rgba(34, 55, 43, .08); }
#app:not([data-view="3d"]):not([data-view="both"]) :is(.view-pad, .view-zoom, .view-updating),
#app[data-noplot="true"] :is(.view-pad, .view-zoom) { display: none; }   /* the chip shows from the first object (owner test 5) */
#app[data-walking="true"] :is(.view-pad, .view-zoom) { display: none; }   /* the walk has its own buttons, and Exit walk */
/* the walk's own buttons (owner 10-04, launch plan item 4): where the view's are, larger, while walking only */
.walk-pad { position: absolute; right: 12px; bottom: 84px; z-index: 4; display: none; grid-template-columns: repeat(3, 56px); grid-auto-rows: 50px;
  background: rgba(241, 243, 238, .94); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(34, 55, 43, .14); }
#app[data-walking="true"]:is([data-view="3d"], [data-view="both"]) .walk-pad { display: grid; }
.walk-pad button { min-height: 0; border: 0; padding: 0; background: none; color: var(--yew); font: inherit; font-size: 1.4rem; line-height: 1;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.walk-pad button:hover { background: rgba(34, 55, 43, .08); }
.walk-pad button:active { background: rgba(34, 55, 43, .18); }
.walk-pad .turn { font-size: 1.8rem; font-weight: 700; }
/* #137: why a step did not happen (a fence - use its gate - water, the garden's edge), for a moment, over the 3D */
.walk-blocked { position: absolute; left: 50%; bottom: 150px; z-index: 5; transform: translateX(-50%); margin: 0; padding: 10px 16px;
  max-width: min(420px, calc(100% - 24px)); border-radius: 999px; background: rgba(29, 74, 44, .92); color: var(--paper); text-align: center;
  box-shadow: 0 6px 18px rgba(20, 33, 25, .3); pointer-events: none; }   /* the turn arrows read as small as the triangles' corners otherwise */
.walk-pad .ahead { grid-column: 1 / -1; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 600; }
#app[data-walking="true"] .walk-toggle { background: var(--yew); color: var(--paper); }   /* Exit walk: plain to find */
/* the first walk explains itself: a card under the status line, gone at the first step */
.walk-hint { position: absolute; left: 50%; top: 112px; transform: translateX(-50%); z-index: 5; width: min(380px, calc(100% - 32px));
  padding: 14px 18px 12px; border-radius: 14px; background: var(--paper); color: var(--yew); box-shadow: 0 10px 30px rgba(20, 33, 25, .3); }
.walk-hint p { margin: 6px 0 0; }
.walk-hint button { margin-top: 10px; min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--yew); color: var(--paper); font: inherit; }
#app:not([data-view="3d"]):not([data-view="both"]) .walk-hint { display: none; }
/* Show 3D (owner: 3D on computers without a graphics card): on the plan alone, at the bottom, the walk button's look */
/* Updating 3D (owner test 4): a small chip while the 3D beside the plan catches up, not a blocking overlay */
.view-updating { position: absolute; left: 12px; bottom: 18px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border: 1px solid var(--rule); border-radius: 999px; background: rgba(241, 243, 238, .92); color: var(--yew); font-size: .9rem; }
.view-updating[hidden] { display: none; }
#app[data-view="both"] .view-updating { left: calc(var(--split) + 12px); }
.view-updating .spin { width: 14px; height: 14px; border: 2px solid rgba(34, 55, 43, .25); border-top-color: var(--yew); border-radius: 50%;
  animation: view-spin .8s linear infinite; }
@keyframes view-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .view-updating .spin { animation: none; } }
/* the 3D's look (owner test 2, C6): one small menu inside the 3D pane, top left beside Fit, the picture button's look */
.scene-look { position: absolute; top: 12px; left: 12px; z-index: 4; }
#app[data-view="both"] .scene-look { left: calc(var(--split) + 12px); }
#app:not([data-view="3d"]):not([data-view="both"]) .scene-look, #app[data-noplot="true"] .scene-look { display: none; }
.scene-look > button { min-height: 44px; min-width: 60px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(241, 243, 238, .92); color: var(--yew); font: inherit; font-size: 1.05rem; cursor: pointer; }
.scene-look .shape-menu { min-width: 160px; }
.scene-look .menu-head { padding: 8px 12px 2px; font-size: .75rem; color: var(--slate); }
.scene-look .shape-menu button.on { font-weight: 700; }
.scene-look .shape-menu button.on::after { content: ' ✓'; }
.picture-open { position: absolute; right: 12px; top: 12px; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(241, 243, 238, .92); color: var(--yew); }
/* Take a shot (owner test 6): under Realistic picture, the same look; its card's wish box */
.shot-open { position: absolute; right: 12px; top: 64px; min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 999px;
  background: rgba(241, 243, 238, .92); color: var(--yew); }
dialog.shot > img { display: block; width: 100%; height: auto; border-radius: 8px; margin: 4px 0 12px; }
dialog.shot .wish { display: grid; gap: 4px; margin: 0 0 10px; font-size: .9rem; color: var(--slate); }
dialog.shot .wish input { font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; color: var(--yew); }
dialog.pictures { width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 14px; padding: 20px 22px;
  color: var(--yew); background: #fff; box-shadow: 0 18px 50px rgba(20, 33, 25, .35); }
dialog.pictures::backdrop { background: rgba(20, 33, 25, .35); }
dialog.pictures h2 { margin: 0 0 6px; min-height: 32px; font: 400 24px/1.2 var(--serif); }   /* as tall as its X beside it */
dialog.pictures p { margin: 0 0 10px; }
dialog.pictures .left { color: var(--slate); }
dialog.pictures .make { min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--yew); }
dialog.pictures .make { background: var(--yew); color: var(--paper); margin-bottom: 10px; }
dialog.pictures .make:disabled { opacity: .6; cursor: progress; }
/* the close X (owner 10-04): the top corner at the end of the line (upper right; upper left in he/ar); it stays in view
   while a long dialog scrolls */
dialog .dlg-x { float: inline-end; position: sticky; top: 0; z-index: 1; width: 36px; height: 36px; margin: -6px 0 0;
  margin-inline: 8px -12px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--yew); font: 400 26px/1 var(--sans); }
dialog .dlg-x:hover { background: var(--paper); }
dialog.pictures .gallery { display: grid; gap: 14px; }
dialog.pictures figure { margin: 0; }
dialog.pictures img { display: block; width: 100%; height: auto; border-radius: 8px; }
dialog.pictures figure a { display: inline-block; margin-top: 6px; color: var(--yew); font-weight: 700; }
/* #137: the result leads - the newest picture, then a full Download button; making another is a quiet secondary
   button with one line saying what it does */
dialog.pictures .result figure { margin: 4px 0 14px; }
dialog.pictures figure a.download { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 22px;
  border-radius: 8px; background: var(--yew); color: var(--paper); text-decoration: none; }
dialog.pictures figure a.download:focus-visible, dialog.pictures .make:focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; }
dialog.pictures .make.secondary { background: #fff; color: var(--yew); margin-bottom: 4px; }
dialog.pictures .make.secondary:hover:not(:disabled) { background: var(--paper); }
dialog.pictures .again-hint { color: var(--slate); font-size: .92rem; max-width: 60ch; }
dialog.pictures .refresh { min-height: 40px; margin: 0 0 12px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--yew); background: #fff; color: var(--yew); }
dialog.pictures .gallery:not(:empty) { border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 6px; }
/* #137: the wait (about 30-40 seconds) - a calm frame with a slow light passing over it, the honest line and the time
   so far. No stages, no percentage. Reduced motion keeps the frame still. */
dialog.pictures .waiting { margin: 4px 0 12px; }
dialog.pictures .progress.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* announced, not shown twice */
dialog.pictures .waiting-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; max-height: 300px; border-radius: 8px;
  background: linear-gradient(160deg, #dfe8d6 0%, #c9d8bd 55%, #b9cca9 100%); }
dialog.pictures .waiting-frame::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-100%); animation: picture-wait 2.4s ease-in-out infinite; }
@keyframes picture-wait { to { transform: translateX(100%); } }
dialog.pictures .waiting-line { margin: 12px 0 2px; font-weight: 600; }
dialog.pictures .waiting-time { margin: 0; color: var(--slate); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  dialog.pictures .waiting-frame::after { animation: none; transform: none; opacity: .35; }
}

@media (max-width: 640px) {
  .bar .back span { display: none; }
  .bar .title { font-size: 19px; }
  .panel { left: 10px; right: 10px; top: auto; bottom: 10px; width: auto; }
  .status { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* the globe's languages (contract L1): a bar button like the page menu's, its list the 21 own-spelled names in two
   columns; inset-inline-end and text-align: start keep it on the reading side in Hebrew and Arabic too */
.globe { position: relative; }
.globe > summary { list-style: none; cursor: pointer; padding: 8px 12px; min-height: 40px; border-radius: 8px; font-size: 20px; line-height: 1; }
.globe > summary::-webkit-details-marker { display: none; }
.globe[open] > summary, .globe > summary:hover { background: #2f4a3a; }
.globe .menu-list { inset-inline-end: 0; top: calc(100% + 6px); display: grid; grid-template-columns: 1fr 1fr; min-width: 320px; }
.globe-menu button { text-align: start; }
.globe-menu button.on { font-weight: 700; }
.globe-menu button.on::after { content: ' ✓'; }

/* The garden plan pad: the WalkMyPlan sketch pad's CSS, copied VERBATIM from simulation web/src/app/sketch.css
 * @7295452f (owner 10-01: same look, same tools, same handles), rule by rule with its source line. The only change
 * is the colour, mapped once to the garden palette: #1d4ed8 -> #22372b, rgba(29, 78, 216, -> rgba(93, 126, 84,, #334155 -> #22372b, #0f172a -> #1a2a20, #64748b -> #5a625b, #475569 -> #4a524b, #94a3b8 -> #9aa397, #cbd5e1 -> #c9d0c4, #e2e8f0 -> #d5dad1, #f8fafc -> #f1f3ee, #fbfdff -> #f7f8f4, #e8eef7 -> #e4e8df, #86efac -> #b9d3ad, #dcfce7 -> #eef5e9, #14532d -> #22372b, #eff6ff -> #eef5e9, #dbeafe -> #e2eedb, #bfdbfe -> #c9dcbd, #2563eb -> #957043, #1e293b -> #1a2a20, #d9e2ec -> #dfe4da. */

/* sketch.css 20 @7295452f */
.sketch-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid #d5dad1;
}
/* sketch.css 24 @7295452f */
.sketch-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* sketch.css 25 @7295452f */
.sketch-tools button {
  border: 1px solid #c9d0c4; background: #fff; border-radius: 8px;
  padding: 6px 11px; font: inherit; cursor: pointer; color: #22372b;
}
/* sketch.css 29 @7295452f */
.sketch-tools button.active { background: #22372b; border-color: #22372b; color: #fff; }
/* sketch.css 30 @7295452f */
.tool-sep { width: 1px; height: 22px; background: #d5dad1; margin: 0 2px; }
/* sketch.css 32 @7295452f */
/* Destructive edit + recovery controls stay adjacent and move as one toolbar unit. */
.tool-edit-actions { display: inline-flex; align-items: center; gap: 6px; }
/* sketch.css 34 @7295452f */
/* m / ft and the two layer switches travel together when the toolbar wraps */
.tool-units { display: inline-flex; align-items: center; gap: 6px; }
/* sketch.css 63 @7295452f */
.sketch-body { display: flex; flex: 1; min-height: 0; overflow: hidden; border-radius: 0 0 12px 12px; }
/* sketch.css 64 @7295452f */
.sketch-pad-wrap { position: relative; flex: 1; min-width: 0; }
/* sketch.css 95 @7295452f */
.sketch-pad {
  width: 100%; height: 100%; display: block; touch-action: none; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.2-5L16 4.2l3.8 3.8L8 19.8z' fill='%23f2c94c' stroke='%2322372b' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M3 21l1.2-5 3.8 3.8z' fill='%2322372b'/%3E%3C/svg%3E") 3 21, crosshair;   /* the pencil (owner test 6, item 16) */
  background:
    linear-gradient(#e4e8df 1px, transparent 1px),
    linear-gradient(90deg, #e4e8df 1px, transparent 1px), #f7f8f4;
  background-size: 28px 28px;
}
/* sketch.css 107 @7295452f */
.sketch-pad.text-tool { cursor: text; }
/* sketch.css 109 @7295452f */
.sketch-pad.hand-tool { cursor: grab; }
/* B2 (#125): inside the SELECTED boundary, a Hand drag moves the boundary itself */
.sketch-pad.hand-tool.plot-hi { cursor: move; }

/* L6: a self-contained native modal; geometry stays physically left/right in every language. */
.first-use { box-sizing: border-box; width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 24px);
  margin: auto; padding: 24px; border: 1px solid #bbc7b7; border-radius: 18px; color: #22372b;
  background: #f8faf4; box-shadow: 0 18px 70px #102c2040; overflow: auto; }
.first-use::backdrop { background: #10261bcc; }
.first-use h2 { margin: 0 44px 18px; font-size: 1.5rem; text-align: center; line-height: 1.35; }
.tutorial-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: #e7eddf; color: #22372b; font-size: 28px; cursor: pointer; }
.tutorial-split { direction: ltr; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tutorial-split[hidden] { display: none; }
.tutorial-pane { position: relative; min-width: 0; aspect-ratio: 1.6; overflow: hidden; border: 1px solid #c8d2c1;
  border-radius: 10px; background: #f4f6f1; }
.tutorial-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.tutorial-pointer-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tutorial-cursor { fill: #17271c; stroke: white; stroke-width: .07; }
.tutorial-ghost rect { fill: #eff4e9; stroke: #709266; stroke-width: .05; }
.tutorial-ghost text { font: .55px system-ui; fill: #22372b; }
.tutorial-measure { font: .55px system-ui; fill: #6a482b; text-anchor: middle; paint-order: stroke; stroke: #f4f6f1; stroke-width: .1; }
.tutorial-source { fill: none; stroke: #bf790d; stroke-width: .12; stroke-dasharray: .25 .2; }
.tutorial-arrow { fill: none; stroke: #bf790d; stroke-width: .1; }
.tutorial-settings { position: absolute; top: 7%; left: 6%; width: min(270px, 80%); box-sizing: border-box;
  padding: 18px 14px; border: 1px solid #bec8b7; border-radius: 9px; background: #fff; box-shadow: 0 4px 16px #112e2033;
  color: #22372b; direction: ltr; text-align: left; }
.tutorial-settings .ctx-head { padding: 0 26px 8px 0; color: #53634c; }
.tutorial-settings .ctx-field .ctx-unit { color: #53634c; }
.tutorial-settings .ctx-field { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 14px; }
.tutorial-settings .ctx-field span:first-child { flex: 1; }
.tutorial-settings input { width: 64px; min-width: 0; padding: 5px; font: inherit; color: inherit; border: 1px solid #bdc9b5; border-radius: 4px; }
.tutorial-settings-x { position: absolute; top: 6px; right: 9px; font-size: 24px; }
.tutorial-updating { position: absolute; bottom: 10px; left: 10px; padding: 6px 12px; border-radius: 20px;
  background: #f8faf4; color: #22372b; font-size: 13px; box-shadow: 0 1px 7px #102d2040; }
.tutorial-captions { display: grid; grid-template-columns: 1fr; margin-top: 14px; min-height: 3.5em; align-items: center; }
.tutorial-captions p { grid-area: 1 / 1; margin: 0; font-size: 18px; line-height: 1.45; text-align: center; }
.tutorial-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tutorial-loading { margin: 4px 0; text-align: center; font-size: 13px; color: #53634c; }
.tutorial-safe { margin: 8px 0 16px; text-align: center; font-size: 13px; line-height: 1.45; color: #53634c; }
.tutorial-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.tutorial-controls button { min-height: 44px; padding: 10px 18px; font: inherit; border: 1px solid #9cae94;
  border-radius: 9px; background: #fff; color: #22372b; cursor: pointer; }
.tutorial-controls .primary { background: #223f2b; border-color: #223f2b; color: #fff; }
.tutorial-controls button:disabled { opacity: .5; cursor: default; }
.tutorial-card[hidden] { display: none; }
.tutorial-card-caption { margin: 16px 0; font-size: 18px; line-height: 1.45; text-align: center; }
.first-use button:focus-visible { outline: 3px solid #e7a62c; outline-offset: 3px; }
@media (max-width: 719px) {
  .first-use { width: calc(100vw - 16px); padding: 14px; border-radius: 12px; }
  .first-use h2 { font-size: 19px; margin: 4px 36px 12px; }
  .tutorial-split { grid-template-columns: 1fr; gap: 10px; }
  .tutorial-captions p, .tutorial-card-caption { font-size: 16px; }
  .tutorial-settings { padding: 11px; }
  .tutorial-settings .ctx-field { font-size: 12px; }
}
/* sketch.css 111 @7295452f */
/* --wk (refK): a wall line as heavy as on a 0.8 m-a-square plan at the same metres per screen pixel (owner 09-27) */
.sketch-pad .room { fill: rgba(93, 126, 84, .07); stroke: #22372b; stroke-width: calc(3px * var(--wk, 1)); stroke-linejoin: round; }
/* sketch.css 112 @7295452f */
.sketch-pad .run { fill: none; stroke: #22372b; stroke-width: calc(3px * var(--wk, 1)); stroke-linecap: round; }
/* sketch.css 144 @7295452f */
.sketch-pad .live { fill: none; stroke: #9aa397; stroke-width: 2; stroke-dasharray: 4 4; }
/* sketch.css 145 @7295452f */
.sketch-pad .room-name { fill: #1a2a20; font-size: calc(14px * var(--fs, 1)); font-weight: 700; text-anchor: middle; cursor: grab; user-select: none; }
/* sketch.css 147 @7295452f */
/* --lz = the label zoom cap (1 up to 4x, then 4/z): the white halos follow the capped text, not the drawing */
.sketch-pad .room-area { fill: #4a524b; font-size: calc(12px * var(--fs, 1)); text-anchor: middle; user-select: none; pointer-events: none;
  paint-order: stroke; stroke: #f7f8f4; stroke-width: calc(3px * var(--lz, 1)); }
/* sketch.css 149 @7295452f */
.sketch-pad .room-area--derived { fill: #9aa397; }
/* sketch.css 150 @7295452f */
.sketch-pad .mark { fill: #b45309; font-size: calc(14px * var(--fs, 1)); font-style: italic; text-anchor: middle; user-select: none;
  paint-order: stroke; stroke: #f7f8f4; stroke-width: calc(3px * var(--lz, 1)); }
/* sketch.css 152 @7295452f */
.sketch-pad .dim {
  fill: #957043; font-size: calc(11.5px * var(--fs, 1)); text-anchor: middle; user-select: none; pointer-events: none;
  paint-order: stroke; stroke: #f7f8f4; stroke-width: calc(3px * var(--lz, 1));
}
/* sketch.css 161 @7295452f */
/* the live attach point while dragging a door/window chip over the pad */
.snap-mark { pointer-events: none; }
/* sketch.css 162 @7295452f */
.snap-mark .snap-ring { fill: none; stroke: #16a34a; stroke-width: 2.5; animation: snap-pulse 1s ease-in-out infinite; }
/* sketch.css 163 @7295452f */
.snap-mark .snap-dot { fill: #16a34a; }
/* sketch.css 179 @7295452f */
.sketch-pad .mark.selected, .sketch-pad .room-name.selected { fill: #957043; }
/* owner test 7, item 2: whatever is selected looks selected, one or many alike: a thick amber outline and a soft glow,
   the 3D's amber; an area or a line gets an outline drawn round it (a glow on a see-through fill would tint it), an item
   or a note a glow round its own shape. Lengths x --lz keep their screen size at any zoom */
.sketch-pad .sel-halo { fill: none; stroke: #f59e0b; stroke-width: calc(4px * var(--lz, 1)); stroke-linejoin: round; stroke-linecap: round;
  stroke-opacity: .9; filter: drop-shadow(0 0 calc(4px * var(--lz, 1)) rgba(245, 158, 11, .75)); pointer-events: none; }
.sketch-pad .pool.selected, .sketch-pad .mark.selected { filter: drop-shadow(0 0 calc(1.2px * var(--lz, 1)) #f59e0b)
  drop-shadow(0 0 calc(1.2px * var(--lz, 1)) #f59e0b) drop-shadow(0 0 calc(5px * var(--lz, 1)) rgba(245, 158, 11, .7)); }
/* sketch.css 206 @7295452f */
.sketch-entry {
  position: absolute; transform: translate(-50%, -50%);
  border: 1px solid #22372b; border-radius: 6px; padding: 4px 8px;
  font: inherit; font-size: .85rem; width: 160px; background: #fff;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .18); z-index: 3;
}
/* sketch.css 212 @7295452f */
.chip-rail {
  width: 168px; border-inline-start: 1px solid #d5dad1; padding: 52px 10px 10px;   /* clears the pinned close X */
  overflow-y: auto; display: flex; flex-direction: column; gap: 6px; background: #f1f3ee;
}
/* the selection box (owner test 6, item 12) */
.sketch-pad .select-box { fill: rgba(196, 122, 22, .08); stroke: #c47a16; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
/* the item search (owner test 6) */
.chip-search { font: inherit; font-size: .86rem; padding: 6px 10px; border: 1px solid #b9c2b4; border-radius: 999px; background: #fff; color: #22372b; min-width: 0; }
.chip-none { font-size: .8rem; color: #5a625b; line-height: 1.35; }
/* sketch.css 216 @7295452f */
.chip-head { font-size: .72rem; color: #5a625b; text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
  display: flex; align-items: center; justify-content: space-between; }
/* owner test 7, item 9: a group folds with a minus and opens with a plus */
.chip-rail .chip-fold { border: 1px solid #c9d0c4; background: #fff; color: #22372b; border-radius: 6px; width: 22px; height: 20px;
  padding: 0; font-size: .85rem; line-height: 1; cursor: pointer; text-transform: none; }
.chip-rail .chip-fold:hover { background: #eef5e9; }
/* sketch.css 217 @7295452f */
.chip {
  border: 1px solid #b9d3ad; background: #eef5e9; color: #22372b; border-radius: 999px;
  padding: 7px 12px; font: inherit; font-size: .88rem; cursor: grab; text-align: start;
}
/* sketch.css 221 @7295452f */
.chip:active { cursor: grabbing; }
.chip.house-chip { background: #f4c75b; color: #263522; border: 1px solid #94721f; font-weight: 700; }
.chip.house-chip:hover { background: #ffda7b; }
.chip.house-chip:focus-visible { outline: 3px solid #22372b; outline-offset: 2px; }
.chip.house-chip.armed { background: #ffda7b; outline: 2px solid #22372b; outline-offset: 2px; }
.house-chip svg path { fill: currentColor; }
.house-chip svg rect { fill: none; stroke: currentColor; }
.house-chip svg rect:last-child { fill: currentColor; stroke: none; }
/* sketch.css 222 @7295452f */
.chip.small { padding: 5px 10px; font-size: .8rem; }
/* sketch.css 224 @7295452f */
.chip-toggle {
  border: 0; background: none; color: #22372b; font: inherit; font-size: .82rem;
  cursor: pointer; text-align: start; padding: 4px 2px; margin-top: 4px;
}
/* sketch.css 230 @7295452f */
/* Total only, beside the wheel that holds everything else */
.grid-legend {
  position: absolute; left: 62px; bottom: 12px; z-index: 2;
  background: #fff; border: 1px solid #c9d0c4; border-radius: 8px;
  padding: 6px 10px; font-size: .85rem; color: #22372b;
  box-shadow: 0 3px 10px rgba(2, 6, 23, .12);
}
/* sketch.css 268 @7295452f */
/* the settings wheel: bottom-left, diagonally opposite the eye, same show/hide idiom */
.settings-wheel {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  width: 2.4rem; height: 2.4rem; font-size: 1.15rem; line-height: 1;
  background: #fff; border: 1px solid #c9d0c4; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .14); cursor: pointer; color: #22372b;
}
/* sketch.css 274 @7295452f */
.settings-wheel.active { border-color: #22372b; box-shadow: inset 0 0 0 2px #22372b, 0 4px 14px rgba(2, 6, 23, .14); }
/* sketch.css 275 @7295452f */
.settings-menu {
  position: absolute; left: 12px; bottom: 60px; z-index: 9;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: #fff; border: 1px solid #c9d0c4; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .22); font-size: .85rem; color: #22372b;
}
/* sketch.css 281 @7295452f */
.settings-menu label, .settings-menu .set-row {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
/* sketch.css 284 @7295452f */
.settings-menu label > span:first-child, .settings-menu .set-row > span:first-child {
  flex: 1; color: #5a625b;
}
/* sketch.css 287 @7295452f */
.settings-menu input, .ctx-field input {
  width: 62px; border: 1px solid #c9d0c4; border-radius: 6px; padding: 2px 6px;
  font: inherit; text-align: center;
}
/* sketch.css 291 @7295452f */
.ctx-field input:not(:disabled) { background: #fff; border-color: #9aa397; color: #1a2a20; }
/* sketch.css 292 @7295452f */
.ctx-field input:not(:disabled):focus { border-color: #957043; outline: 1px solid #957043; }
/* sketch.css 293 @7295452f */
.set-hint { font-size: .75rem; color: #9aa397; max-width: 200px; white-space: normal; }
/* sketch.css 294 @7295452f */
.settings-wheel.raised, .settings-menu.raised { bottom: 5rem; }
/* sketch.css 295 @7295452f */
.settings-menu.raised { bottom: 8.4rem; }
/* sketch.css 298 @7295452f */
/* one wall's own thickness, in the right-click menu */
.ctx-field { display: flex; align-items: center; gap: 8px; padding: 4px 14px; font-size: .85rem; }
/* sketch.css 299 @7295452f */
.ctx-field > span { flex: 1; color: #5a625b; }
/* sketch.css 303 @7295452f */
/* the unit the number is IN. Without it "1.39" is a number with no world attached, and
   the field reads as disabled rather than editable (owner 07-30). Must not take the
   flex:1 above, or it pushes the input off the row. */
.ctx-field > span.ctx-unit { flex: 0 0 auto; width: 1.4em; color: #9aa397; text-align: start; }
/* sketch.css 304 @7295452f */
.ctx-menu .ctx-danger { color: #b91c1c; }
/* sketch.css 305 @7295452f */
.ctx-menu .ctx-danger:hover { background: #fee2e2; }
/* sketch.css 309 @7295452f */
/* the door's four styles - the same four words as the 3D viewer's picker. Written as
   .ctx-menu .ctx-styles button on purpose: `.ctx-menu button` below out-specifies a
   bare .ctx-styles button (same trap as .ctx-x). */
.ctx-styles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 14px 8px; }
/* sketch.css 310 @7295452f */
.ctx-styles.ctx-styles-2 { grid-template-columns: repeat(2, 1fr); }
/* sketch.css 311 @7295452f */
.ctx-styles.ctx-styles-3 { grid-template-columns: repeat(3, 1fr); }
/* sketch.css 312 @7295452f */
.ctx-menu .ctx-styles button {
  border: 1px solid #c9d0c4; border-radius: 6px; padding: 4px 2px;
  font-size: .78rem; text-align: center;
}
/* sketch.css 317 @7295452f */
.ctx-menu .ctx-styles button.active,
.ctx-menu .ctx-styles button.active:hover { border-color: #b3261e; background: #b3261e; color: #fff; font-weight: 700; }
/* sketch.css 320 @7295452f */
/* the panel's own way out: clicking the pad closes it too, but a wheel you have to find
   again is not a close button (owner 07-30) */
.settings-x {
  position: absolute; top: 4px; inset-inline-end: 6px; border: 0; background: none;
  font-size: 1.1rem; line-height: 1; color: #9aa397; cursor: pointer; padding: 2px 4px;
}
/* sketch.css 324 @7295452f */
.settings-x:hover { color: #b91c1c; }
/* sketch.css 326 @7295452f */
.ctx-menu {
  position: absolute; z-index: 4; background: #fff; border: 1px solid #c9d0c4;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(2, 6, 23, .22);
  display: flex; flex-direction: column; min-width: 120px;
  /* the inline max-height from openContext() is the real cap - it knows how much room
     there is BELOW the click. This stays as the floor for anything that sets none. */
  max-height: calc(100% - 16px); overflow-y: auto;
  overscroll-behavior: contain;      /* scrolling the menu must not pan the pad behind it */
}
/* owner test 7, item 5: the dialog moves by its title */
.ctx-menu .ctx-head.ctx-grip { cursor: move; touch-action: none; user-select: none; }
/* sketch.css 335 @7295452f */
.ctx-menu button {
  border: 0; background: #fff; font: inherit; font-size: .88rem; text-align: start;
  padding: 8px 14px; cursor: pointer;
}
/* sketch.css 339 @7295452f */
.ctx-menu button:hover { background: #eef5e9; }
/* sketch.css 342 @7295452f */
/* the selected choice SAYS so (owner 08-05: which material is on?) - material
   and the stair curve presets all mark themselves with [class.on] */
.ctx-menu button.on { font-weight: 700; color: #b3261e; }
/* sketch.css 343 @7295452f */
.ctx-menu button.on::after { content: ' \2713'; }
/* sketch.css 350 @7295452f */
/* Owner 08-01: it was a pale tick tucked inside the padding - the one control in the
   menu you cannot find. Up into the corner, big enough to aim at, and NOT one pixel
   wider than the menu already is.
   Written as .ctx-menu .ctx-x on purpose: `.ctx-menu button` above out-specifies a bare
   .ctx-x, so the first attempt at this changed nothing at all. */
.ctx-menu .ctx-x {
  position: absolute; top: 0; inset-inline-end: 0; z-index: 2; border: 0; background: none;
  font-size: 1.45rem; line-height: 1; color: #5a625b; cursor: pointer;
  padding: 2px 9px 5px; text-align: center; border-radius: 0;
  border-start-end-radius: 8px; border-end-start-radius: 8px;
}
/* sketch.css 356 @7295452f */
.ctx-menu .ctx-x:hover { color: #b91c1c; background: #fef2f2; }
/* sketch.css 360 @7295452f */
/* The X is itself the menu's first button, so :first-of-type hit IT and pushed its own
   glyph 40px off the right edge - into the middle, which is what the owner saw. It is
   the row AFTER the X that needs the clearance. */
.ctx-menu .ctx-x + button { padding-inline-end: 40px; }
/* sketch.css 361 @7295452f */
.ctx-menu button.danger { color: #b91c1c; }
.ctx-house .ctx-head { padding: 9px 14px; padding-inline-end: 44px; font-weight: 700; }
.ctx-house .ctx-hint { padding: 0 14px 6px; }
.ctx-house .ctx-field { display: grid; grid-template-columns: minmax(0, 1fr) 80px 1.4em; gap: 8px; padding: 3px 14px; }
.ctx-house .ctx-field input { width: 100%; box-sizing: border-box; min-height: 30px; }
.ctx-house .ctx-styles { padding: 5px 14px; }
.ctx-house .ctx-styles button { min-height: 32px; }
.ctx-house .ctx-advanced { margin: 8px 0 4px; border-top: 1px solid #d9dfd3; }
.ctx-house .ctx-advanced summary { cursor: pointer; padding: 10px 14px; font-size: .85rem; font-weight: 600; }
.ctx-house .ctx-advanced summary:focus-visible { outline: 2px solid #957043; outline-offset: -3px; }
.ctx-house > button:not(.ctx-x) { padding-block: 6px; }
.ctx-house .ctx-x { width: 36px; height: 36px; font-size: 22px; padding: 4px; }
/* Outside the phone's horizontal tools scroller: replay stays visible without a sideways swipe. */
.sketch-bar > .pad-replay-tutorial { border: 1px solid #9aa397; border-radius: 8px; background: #fff; color: #22372b;
  font: inherit; font-size: .82rem; padding: 7px 12px; white-space: nowrap; cursor: pointer; }
.pad-replay-tutorial:focus-visible { outline: 3px solid #957043; outline-offset: 2px; }
/* sketch.css 372 @7295452f */
/* BESIDE the point, never on it, and never in the way (owner 2026-09-24: "putting it on the
   element is just making me wait until it will be gone"): it sits to the side of the piece,
   and the hand goes straight through it - only its x takes a click */
.drop-bubble {
  position: absolute; transform: translate(28px, -50%); z-index: 4; pointer-events: none;
  background: #7f1d1d; color: #fff; border-radius: 8px; padding: 7px 12px;
  font-size: .82rem; box-shadow: 0 6px 18px rgba(2, 6, 23, .3); max-width: 260px; text-align: start;
}
/* sketch.css 377 @7295452f */
.drop-bubble.flip { transform: translate(calc(-100% - 28px), -50%); }
/* sketch.css 378 @7295452f */
.drop-bubble .hint-x {
  border: 0; background: none; color: #fecaca; font-size: 1rem; line-height: 1; pointer-events: auto;
  cursor: pointer; padding: 0 2px; margin-inline-start: 8px; vertical-align: middle;
}
/* sketch.css 398 @7295452f */
.ctx-head { font-size: .7rem; color: #9aa397; text-transform: uppercase; padding-block: 7px 2px; padding-inline: 14px 38px; }
/* sketch.css 399 @7295452f */
.ctx-hint { font-size: .72rem; line-height: 1.35; color: #5a625b; padding: 4px 14px 6px; max-width: 230px; }
/* sketch.css 402 @7295452f */
/* the running total sits with the square size, so changing one visibly moves the other */
.legend-total { font-variant-numeric: tabular-nums; font-weight: 600; color: #1f2933; white-space: nowrap; }
/* sketch.css 404 @7295452f */
.sketch-tools button.flash { background: #fde68a; border-color: #f59e0b; transition: background .1s; }
/* sketch.css 493 @7295452f */
.grid-legend.raised { bottom: 5rem; }
/* sketch.css 496 @7295452f */
/* clear of the bottom-center mode bar */
/* the same N/E/S/W the 2D plan shows - the sketch's top IS north when it builds */
.compass { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
/* sketch.css 497 @7295452f */
.compass span {
  position: absolute; font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700; font-size: 1.35rem; color: #8a2a22; opacity: .75;
}
/* sketch.css 501 @7295452f */
.compass .n { top: 8px; left: 50%; transform: translateX(-50%); }
/* sketch.css 502 @7295452f */
.compass .s { bottom: 8px; left: 50%; transform: translateX(-50%); }
/* sketch.css 503 @7295452f */
.compass .w { left: 12px; top: 50%; transform: translateY(-50%); }
/* sketch.css 504 @7295452f */
.compass .e { right: 12px; top: 50%; transform: translateY(-50%); }
/* sketch.css 506 @7295452f */
.focus-eye {
  position: absolute; right: 14px; top: 12px; z-index: 2;
  width: 2.4rem; height: 2.4rem; font-size: 1.15rem; line-height: 1;
  background: #fff; border: 1px solid #c9d0c4; border-radius: 10px;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .14); cursor: pointer;
}
/* sketch.css 514 @7295452f */
/* the eye glyph renders monochrome on Windows - a dark fill swallowed it
   (owner 07-24 "black square"); active = blue ring, glyph stays visible */
.focus-eye.active { border-color: #22372b; box-shadow: inset 0 0 0 2px #22372b, 0 4px 14px rgba(2, 6, 23, .14); }
/* sketch.css 516 @7295452f */
.zoom-ctl {
  position: absolute; right: 14px; bottom: 5rem; z-index: 2;
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid #c9d0c4; border-radius: 10px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .14);
}
/* sketch.css 522 @7295452f */
.zoom-ctl button {
  border: 0; background: #fff; font: inherit; font-size: 1.05rem; width: 38px; height: 34px;
  cursor: pointer; color: #22372b;
}
/* sketch.css 526 @7295452f */
.zoom-ctl button:hover { background: #eef5e9; }
/* sketch.css 527 @7295452f */
.zoom-ctl button + button { border-top: 1px solid #d5dad1; }
/* sketch.css 529 @7295452f */
/* undo + clear live with the zoom cluster on phones - the toolbar copies scroll offscreen */
.undo-mobile, .clear-mobile { display: none; }
/* sketch.css 532 @7295452f */
/* the eye's layer menu: what the sketch shows, remembered per device */
.eye-menu {
  position: absolute; top: 56px; right: 12px; z-index: 9;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; padding-inline-end: 26px;
  background: #fff; border: 1px solid #c9d0c4; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .22); font-size: .9rem; color: #22372b;
}
/* sketch.css 538 @7295452f */
.eye-menu .eye-menu-x {
  position: absolute; top: 4px; inset-inline-end: 6px; border: 0; background: none;
  color: #5a625b; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 1px 2px;
}
/* sketch.css 542 @7295452f */
.eye-menu .eye-menu-x:hover { color: #1a2a20; }
/* sketch.css 551 @7295452f */
.eye-menu label { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
/* sketch.css 623 @7295452f */
/* ---- mobile (owner 07-25): pinch zooms, chips tap-to-place, the rail folds away ---- */
.rail-toggle { display: none; }
/* sketch.css 624 @7295452f */
.chip.armed { outline: 2px solid #22372b; outline-offset: 1px; }
/* sketch.css 625 @7295452f */
@media (max-width: 760px) {
  .sketch-tools {
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .sketch-tools > button, .sketch-tools .shape-wrap, .sketch-tools .tool-edit-actions { flex: none; }
  .sketch-tools button { white-space: nowrap; }
  .chip { touch-action: pan-y; }
  .undo-mobile { display: block !important; }
  .rail-toggle {
    display: block; border: 1px solid #c9d0c4; background: #fff; border-radius: 8px;
    font: inherit; font-size: 1rem; line-height: 1; padding: 8px; cursor: pointer; color: #22372b;
  }
  .chip-rail { width: 148px; padding: 46px 8px 10px; }
  .chip-rail.collapsed { width: 46px; padding-left: 5px; padding-right: 5px; }
  .undo-mobile, .clear-mobile { display: block !important; }
  .zoom-ctl { bottom: 9rem; }
}
/* sketch.css 668 @7295452f */
/* the measure tool: a question about the drawing, so it reads as an instrument -
   dashed, in the dimension blue, never the black of ink (owner 07-27) */
.sketch-pad .measure-line { stroke: #957043; stroke-width: 1.6; stroke-dasharray: 6 4; pointer-events: none; }
/* sketch.css 669 @7295452f */
.sketch-pad .measure-end { fill: #957043; pointer-events: none; }
/* sketch.css 670 @7295452f */
.sketch-pad .measure-len { fill: #22372b; font-size: calc(13px * var(--fs, 1)); font-weight: 700; text-anchor: middle;
  paint-order: stroke; stroke: #f7f8f4; stroke-width: calc(4px * var(--lz, 1)); user-select: none; pointer-events: none; }
/* sketch.css 698 @7295452f */
/* the way out of a measurement: right-click the line. A fat invisible stroke makes the
   thin dashed line easy to hit without drawing anything extra on the paper. */
.sketch-pad .measure-hit { stroke: transparent; stroke-width: 14; cursor: context-menu }
/* sketch.css 720 @7295452f */
/* Room number: the same badge the 2D uses, so the two views can be compared by eye. */
.sketch-pad .room-num {
  fill: #22372b; font-weight: 800; font-size: calc(22px * var(--fs, 1)); text-anchor: middle;
  paint-order: stroke; stroke: #fff; stroke-width: calc(4px * var(--lz, 1)); pointer-events: none;
}
/* sketch.css 804 @7295452f */
/* The chips ask for themselves rather than a dialog asking for them: a slow breath on
   the Door and Window while the plan has walls and no openings, stopping the moment one
   lands. Motion is the whole message, so it defers to prefers-reduced-motion and leaves
   the border behind. */
.chip-hint { font-size: .72rem; color: #92400e; line-height: 1.35; margin: 2px 0 6px; }
/* sketch.css 893 @7295452f */
/* Above the instructions, not under them: this only ever appears in answer to something
   the person just did, and an answer nobody can see is not an answer. */
.sketch-card .pad-notice {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 12;
  max-width: 32rem; padding: 10px 14px; border-radius: 9px; cursor: pointer;
  background: #1a2a20; color: #f1f3ee; font-size: .85rem; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .3);
}
/* sketch.css 902 @7295452f */
/* The ends of a window are handles: faint until the pointer is near, solid on hover, so
   the window does not read as a row of dots at rest. */
.sketch-pad .window .win-end, .sketch-pad .pool .pool-end, .sketch-pad .fixture .pool-end { fill: #fff; stroke: #957043; stroke-width: 1.4; opacity: .45; cursor: ew-resize;
  vector-effect: non-scaling-stroke; pointer-events: none; }
/* sketch.css 904 @7295452f */
.sketch-pad .window:hover .win-end, .sketch-pad .pool:hover .pool-end, .sketch-pad .fixture:hover .pool-end { opacity: 1; }
/* sketch.css 907 @7295452f */
/* the part you have to hit is wider than the dot you see, for both the window ends and
   the wall ends - a handle you keep missing is a handle that moves the wrong thing */
.sketch-pad .win-grab, .sketch-pad .pool-grab { fill: transparent; cursor: ew-resize; }
/* sketch.css 908 @7295452f */
.sketch-pad .edge-grab { fill: transparent; cursor: move; }
/* sketch.css 911 @7295452f */
/* the wall the handles belong to, so there is no doubt which line the menu is asking
   about or which one a drag is about to stretch (owner 07-29) */
.sketch-pad .picked-edge { stroke: #f59e0b; stroke-width: 5; stroke-linecap: round; opacity: .55;
  pointer-events: none; vector-effect: non-scaling-stroke; }
/* sketch.css 916 @7295452f */
/* Sits under the toolbar, out of the drawing: it appears the moment a measurement is
   finished and disappears the moment the scale is set. */
.sketch-card .rescale {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 11;
  display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 9px;
  background: #fff; border: 1px solid #dfe4da; box-shadow: 0 8px 24px rgba(15, 23, 42, .16);
  font-size: .85rem; color: #22372b;
}
/* sketch.css 922 @7295452f */
.sketch-card .rescale input {
  width: 5.5rem; font: inherit; padding: 4px 8px; border: 1px solid #dfe4da; border-radius: 7px;
}
/* sketch.css 925 @7295452f */
.sketch-card .rescale .unit { color: #5a625b; }
/* sketch.css 926 @7295452f */
.sketch-card .rescale button {
  font: inherit; font-size: .82rem; padding: 5px 11px; border-radius: 7px; cursor: pointer;
  background: #957043; border: 1px solid #957043; color: #fff; font-weight: 600;
}
/* sketch.css 930 @7295452f */
.sketch-card .rescale .hint-x {
  border: 0; background: none; color: #5a625b; font-size: 1.15rem; line-height: 1;
  padding: 1px 2px; font-weight: 400;
}
/* sketch.css 934 @7295452f */
.sketch-card .rescale .hint-x:hover { color: #1a2a20; }
/* sketch.css 949 @7295452f */
/* The ends of the wall under the Hand. Visible only while that wall is held, so the pad
   is not a field of dots. */
.sketch-pad .edge-end { fill: #fff; stroke: #f59e0b; stroke-width: 1.8; cursor: grab; vector-effect: non-scaling-stroke; }
/* sketch.css 950 @7295452f */
.sketch-pad .edge-end:hover { fill: #fef3c7; }
/* sketch.css 955 @7295452f */
/* ---- pools: first-class water footprint, deliberately unlike rooms and fixtures ---- */
.sketch-pad .pool { cursor: grab; }
/* sketch.css 956 @7295452f */
.sketch-pad .pool .pool-water {
  fill: rgba(125, 211, 252, .72); stroke: #0284c7; stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
/* sketch.css 960 @7295452f */
.sketch-pad .pool .pool-ripple {
  fill: none; stroke: #e0f2fe; stroke-width: 2; stroke-linecap: round;
  opacity: .9; pointer-events: none; vector-effect: non-scaling-stroke;
}
/* sketch.css 964 @7295452f */
.sketch-pad .pool text {
  fill: #075985; font-size: calc(11px * var(--fs, 1)); font-weight: 700; text-anchor: middle;
  user-select: none; pointer-events: none;
}
/* sketch.css 968 @7295452f */
.sketch-pad .pool text.pool-dims {
  fill: #957043; font-size: calc(11.5px * var(--fs, 1));
  paint-order: stroke; stroke: #f7f8f4; stroke-width: calc(3px * var(--lz, 1));
}
/* sketch.css 972 @7295452f */
.sketch-pad .pool.selected .pool-water { stroke: #957043; stroke-width: 2.4; stroke-dasharray: 5 3; }
/* sketch.css 976 @7295452f */
/* a parking bay rides the pool machinery but reads as asphalt, not water */
.sketch-pad .pool.parking .pool-water {
  fill: rgba(148, 155, 165, .28); stroke: #5a625b; stroke-width: 1.6;
}
/* sketch.css 979 @7295452f */
.sketch-pad .pool.parking text { fill: #4a524b; }
/* sketch.css 980 @7295452f */
.sketch-pad .pool.parking text.pool-dims { fill: #4a524b; }
/* sketch.css 981 @7295452f */
.sketch-pad .pool.parking.selected .pool-water { stroke: #957043; }
/* sketch.css 983 @7295452f */
/* a pergola is open-air wood: tan footprint with visible short-axis slats */
.sketch-pad .pool.pergola .pool-water {
  fill: rgba(214, 170, 105, .24); stroke: #9a6a35; stroke-width: 1.6;
}
/* sketch.css 987 @7295452f */
.sketch-pad .pool.pergola text,
.sketch-pad .pool.pergola text.pool-dims { fill: #7c5229; }
/* sketch.css 988 @7295452f */
.sketch-pad .pool.pergola.selected .pool-water { stroke: #957043; }
/* sketch.css 990 @7295452f */
/* A lift shaft: a plain grey box with its diagonals, not water. */
.sketch-pad .pool.lift .pool-water { fill: #d5dad1; stroke: #5a625b; }
/* sketch.css 991 @7295452f */
.sketch-pad .pool.lift .lift-cross line { stroke: #5a625b; stroke-width: 1.1; opacity: .8; }
/* sketch.css 992 @7295452f */
.sketch-pad .pool.pergola .pergola-slats line {
  stroke: #9a6a35; stroke-width: 1.2; opacity: .8; pointer-events: none;
  vector-effect: non-scaling-stroke;
}
/* sketch.css 1002 @7295452f */
/* fixture color palette in the context menu (owner 08-18) - a compact swatch grid.
   Selectors deliberately out-specify `.ctx-menu button` (padding 8px 14px, white bg,
   the appended ::after check) - round 2: swatches touched and the mark sat off-center */
.ctx-menu .ctx-swatches { display: grid; grid-template-columns: repeat(6, 24px); gap: 7px; padding: 6px 14px 10px; }
/* sketch.css 1003 @7295452f */
.ctx-menu .ctx-swatches .ctx-swatch {
  width: 24px; height: 24px; padding: 0; border-radius: 6px;
  border: 1.5px solid rgba(0, 0, 0, .18); cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 13px;
}
/* sketch.css 1008 @7295452f */
.ctx-menu .ctx-swatches .ctx-swatch:hover { filter: brightness(1.1); }
/* sketch.css 1009 @7295452f */
.ctx-menu .ctx-swatches .ctx-swatch.on { outline: 2px solid #957043; outline-offset: 1px; }
/* sketch.css 1011 @7295452f */
/* the ONE centered mark, replacing the generic appended check */
.ctx-menu .ctx-swatches .ctx-swatch.on::after { content: '\2713'; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .8); }
/* sketch.css 1013 @7295452f */
/* "no color": white tile with a diagonal slash, the standard glyph for default */
.ctx-menu .ctx-swatches .ctx-swatch.swatch-default {
  background: #fff linear-gradient(135deg, transparent 44%, #d24 46%, #d24 54%, transparent 56%);
}
/* sketch.css 1016 @7295452f */
.ctx-menu .ctx-swatches .ctx-swatch.swatch-default:hover { background: #fff linear-gradient(135deg, transparent 44%, #d24 46%, #d24 54%, transparent 56%); }
/* sketch.css 1017 @7295452f */
.ctx-menu .ctx-swatches .ctx-swatch.swatch-default.on::after { color: #22372b; text-shadow: none; }
/* sketch.css 1019 @7295452f */
/* the native color-picker door: a dashed + tile; the input is the browser's own dialog */
.ctx-menu .ctx-swatches .ctx-swatch.swatch-custom {
  background: #fff; border-style: dashed; color: #5a625b; font-weight: 700; position: relative;
}
/* sketch.css 1022 @7295452f */
.ctx-menu .ctx-swatches .ctx-swatch.swatch-custom input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: 0;
}
/* sketch.css 1027 @7295452f */
/* aluminium pergola: same open-air footprint, cool metal gray instead of tan (owner 08-18) */
.sketch-pad .pool.pergola.alu .pool-water {
  fill: rgba(148, 156, 164, .22); stroke: #6b7480;
}
/* sketch.css 1031 @7295452f */
.sketch-pad .pool.pergola.alu text,
.sketch-pad .pool.pergola.alu text.pool-dims { fill: #4b545e; }
/* sketch.css 1032 @7295452f */
.sketch-pad .pool.pergola.alu .pergola-slats line { stroke: #6b7480; }
/* sketch.css 1309 @7295452f */
.ctx-menu button.ctx-advice { color: #0f766e; font-weight: 600; }
/* sketch.css 1337 @7295452f */
.settings-menu .settings-evidence { margin: -2px 0 6px; font-size: 12px; line-height: 1.35; color: #3d6b4f; max-width: 230px; }
/* sketch.css 1338 @7295452f */
.settings-menu .settings-evidence.low { color: #8a6d1f; }
/* sketch.css 1363 @7295452f */
/* #196: the wall's two length actions - one column; while the scale is unsettled the scale action leads */
.ctx-lengths { display: flex; flex-direction: column; }
/* sketch.css 1364 @7295452f */
.ctx-lengths.scale-first .ctx-scale { order: -2; }
/* sketch.css 1365 @7295452f */
.ctx-lengths.scale-first .ctx-scale-hint { order: -1; }
/* sketch.css 1366 @7295452f */
.ctx-hint { margin: -2px 14px 4px; font-size: .72rem; color: #9aa397; }
/* sketch.css 1368 @7295452f */
/* the scale line is quiet: at the bottom of the pad, never over an ordinary notice at the top */
.sketch-card .pad-notice.scale-hint { top: auto; bottom: 16px; background: #1a2a20; font-size: .8rem; }
/* sketch.css 1371 @7295452f */
/* owner 2026-09-27: a whole-floor sheet offers "Crop to one plan" (once per plan, dismissible) */
.sketch-card .pad-notice.whole-floor-hint { display: flex; align-items: center; gap: 10px; cursor: default; }

/* The help panel ("How it works", owner test 10-01): WMP's first-visit intro panel, sketch.css 1343-1357 @7295452f,
 * verbatim but for the colours (the table above, plus #f8fbff -> #f7f8f4, #c7d7f5 -> #c9dcbd, #bfd0f3 -> #c9dcbd,
 * #1f2933 -> #1a2a20, rgba(15,23,42, -> rgba(26,42,32,); the video and step-highlight rules are left out (unused). */
.pad-intro { position: absolute; left: 16px; top: 14px; z-index: 7; width: 300px; max-width: calc(100% - 32px);
  box-sizing: border-box; background: #f7f8f4; border: 1px solid #c9dcbd; border-inline-start: 4px solid #22372b;
  border-radius: 10px; padding-block: 12px; padding-inline: 14px 34px; box-shadow: 0 8px 24px rgba(26,42,32,.12);
  font-size: 12.5px; color: #1a2a20 }
.pad-intro h3 { margin: 0 0 8px; font-size: 13.5px }
.pad-intro-x { position: absolute; top: 6px; inset-inline-end: 8px; border: 0; background: none; font-size: 17px;
  line-height: 1; color: #9aa397; cursor: pointer }
.pad-intro-x:hover { color: #22372b }
.pad-intro-steps { margin: 0 0 10px; padding-inline-start: 20px; line-height: 1.5; color: #5a625b }
.pad-intro-next { display: block; margin-inline-start: auto; background: #22372b; color: #fff; border: 0; border-radius: 7px;
  padding: 7px 16px; font: inherit; font-weight: 600; cursor: pointer }
@media (max-width: 900px) { .pad-intro { max-height: 60%; overflow-y: auto } }

/* The Eraser dropdown (owner test 2, C5): WMP's shape menu and eraser cursors, sketch.css 406-415, 108, 446 @7295452f,
 * verbatim but for the colours (the table above, plus rgba(2, 6, 23, -> rgba(26, 42, 32,; #dc2626 -> #b4572e). */
.shape-wrap { position: relative; display: inline-block; }
.shape-menu {
  /* flush with the header button: a 10% hover gap made slow mouse travel close
     the menu before reaching the options (owner 07-23) */
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 20; background: #fff;   /* over the empty plan's notice (12): it covered Erase's menu on a narrow pad (owner test 7) */
  border: 1px solid #c9d0c4; border-radius: 8px; box-shadow: 0 8px 24px rgba(26, 42, 32, .22);
  display: flex; flex-direction: column; min-width: 130px; overflow: hidden;
}
.shape-menu[hidden] { display: none; }
.shape-menu button { border: 0; background: #fff; font: inherit; text-align: start; padding: 8px 12px; cursor: pointer; }
.shape-menu button:hover { background: #eef5e9; }
.sketch-pad.erase-tool { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 15.5l9-9 7 7-6 6H7.5z' fill='%23f3b6b0' stroke='%2322372b' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M8 15l4.5 4.5M7.5 19.5H21' stroke='%2322372b' stroke-width='1.5'/%3E%3C/svg%3E") 4 19, cell; }
.sketch-pad.measure-tool { cursor: crosshair; }
/* the active tool made obvious (owner test 6, item 16): a hint at the bottom while Erase is on; it flashes when pressed in vain */
.tool-hint { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 11; max-width: calc(100% - 24px);
  padding: 8px 14px; border-radius: 999px; background: #8a2b1a; color: #fff; font-size: .85rem; line-height: 1.3; pointer-events: none;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .22); }
.tool-hint.flash { animation: tool-hint-flash .45s ease 2; }
@keyframes tool-hint-flash { 50% { transform: translateX(-50%) scale(1.07); background: #b4572e; } }
@media (prefers-reduced-motion: reduce) { .tool-hint.flash { animation: none; outline: 3px solid #f2c94c; } }
/* a line's width handles (item 15) */
.sketch-pad .width-end { fill: #fff; stroke: #957043; stroke-width: 1.4; }
.sketch-pad .width-grab { fill: transparent; cursor: ew-resize; }
.sketch-pad.erase-lasso .live { stroke: #b4572e; stroke-dasharray: 6 4; }