/* THE DRAWING TOOL (Chase's A2 dock, 13 Oct: "I think I really love A"; "A · One-screen yard", 3 Nov).

   The page is one screen tall: one slim card (the steps, the title, the fence
   style, Marks & notes, the yard menu, the price and the one line) and the plan
   filling all the height under it. Over the yard float only the dock at the
   bottom (Move, Fence, Gate, Mark, House, Undo, Redo), the little view pill (zoom,
   Fit, Snap 45°, Satellite), a chip bar over the dock for the tool in hand and a
   little bar beside whatever is picked. The marks, the crew's notes and the yard
   photos are a sheet BESIDE the yard. Markup: app/views/site_plans/show.html.erb and
   _marks_sheet.html.erb; the scripts that drive it: site_plan_controller.js and
   plan_sheet_controller.js (app/javascript/controllers).

   Plain CSS, no Tailwind utilities, and nothing inline: the page's policy
   refuses style="" in markup (the script sets a few values through the CSSOM,
   which it allows). Unlayered on purpose, so it wins over the kit's layers on
   the elements it styles. Prefix: sp-. */

.sp-editor {
  --sp-ink: #1f1a14;
  --sp-ink2: #5a5148;
  --sp-muted: #6b6259;
  --sp-line: #e6e1d8;
  --sp-line-strong: #d3ccc0;
  --sp-accent: #b45309;
  --sp-accent-strong: #92400e;
  --sp-accent-soft: #fdf1e1;
  --sp-bad: #b91c1c;
  --sp-glass: rgba(255, 253, 249, 0.94);
  --sp-shadow: 0 10px 30px rgba(40, 28, 16, 0.14), 0 2px 6px rgba(40, 28, 16, 0.1);
  --sp-dock-h: 68px;
  --sp-vvh: 100dvh;
  --sp-vvb: 0px;
}
.sp-editor [hidden] { display: none !important; }
:where(.sp-editor) button { font: inherit; }
.sp-editor button:focus-visible, .sp-editor a:focus-visible, .sp-editor select:focus-visible, .sp-editor input:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

/* ---------- the one card (Chase, 3 Nov, "A · One-screen yard") ----------
   Everything about the plan that is not the plan: the step bars (in the quote), the
   title and how it is saving, the fence style, Marks & notes, the yard menu, the
   price with Price ›, and under them the one line and what the price is made of.
   One grid, three layouts: a laptop's two rows (as drawn), an iPad's three, and a
   phone's, where the title row and the line stand on the page and only the price is
   a card. The yard under it takes the rest of the screen. */
.sp-editor { display: flex; flex-direction: column; gap: 8px; }
.sp-card {
  position: relative; z-index: 30; display: grid; align-items: center; gap: 4px 14px; padding: 10px 14px;
  border: 1px solid var(--sp-line); border-radius: 0.75rem; background: #fff; box-shadow: 0 1px 2px rgba(31, 26, 20, 0.06);
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "lead ident ident amount go"
    "lead tools hint hint hint"
    "lead parts parts parts parts";
}
@media (min-width: 1300px) {
  .sp-card {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "lead ident tools amount go"
      "lead hint parts parts parts";
  }
}
.sp-lead { grid-area: lead; display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-eyebrow { margin: 0; font-size: 10.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sp-muted); white-space: nowrap; }
.sp-stepbars { display: flex; gap: 5px; margin: 5px 0 0; padding: 0; list-style: none; }
.sp-stepbar { display: block; width: 24px; height: 4px; border-radius: 999px; background: var(--sp-line-strong); }
.sp-stepbar-on { background: var(--sp-accent); }
/* The way back to the paper (a desk login), and Home below a landscape iPad, where the desk bar is only its Menu. */
.sp-iconlink {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--sp-line-strong);
  border-radius: 12px; background: #fff; color: var(--sp-ink2); touch-action: manipulation;
}
.sp-iconlink svg { width: 20px; height: 20px; }
.sp-iconlink:hover { border-color: var(--sp-accent); color: var(--sp-ink); }
@media (min-width: 1024px) {
  .sp-home { display: none; }
}

/* One row at every width, so how it is saving ("Saved 3:04 PM") coming and going
   never makes the row wrap and the plan under it jump (sweep 2, T10). */
.sp-ident { grid-area: ident; display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-width: 0; min-height: 2.25rem; }
.sp-titlerow { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.sp-titlerow .sp-title { flex: none; margin: 0; font-size: 1.125rem; line-height: 1.5rem; white-space: nowrap; }
.sp-titlerow .ui-badge { flex: none; }
.sp-save { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 0.5rem; min-width: 0; }
.sp-save > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The fence style, Marks & notes and the yard menu: off the plan, so a tap near a corner is never a tap on one of them (T10). */
.sp-tools { grid-area: tools; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sp-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--sp-line-strong); border-radius: 12px;
  background: #fff; color: var(--sp-ink); font-size: 14px; font-weight: 650; text-align: left; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sp-pill:hover { border-color: var(--sp-accent); }
.sp-pill:active { transform: scale(0.98); }
.sp-pill .sp-ic { width: 20px; height: 20px; color: var(--sp-ink2); }
.sp-marksbtn[aria-expanded="true"] { border-color: var(--sp-accent); background: var(--sp-accent-soft); color: var(--sp-accent-strong); }
.sp-marksbtn[aria-expanded="true"] .sp-ic { color: var(--sp-accent-strong); }
.sp-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--sp-accent-soft);
  color: var(--sp-accent-strong); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.sp-marksbtn[aria-expanded="true"] .sp-count { background: #fff; }
.sp-more { justify-content: center; min-width: 44px; padding: 0; }
.sp-more .sp-ic { color: var(--sp-ink2); }
.sp-stylewrap { position: relative; display: flex; min-width: 0; }
.sp-style { position: relative; min-width: 0; max-width: 260px; padding: 0 12px 0 8px; }
/* The whole name, never cut off: it wraps (a two-line clamp once cut "4' Black Aluminum Residential Fence" at an iPad's width). */
.sp-style .sp-name { flex: 1; min-width: 0; line-height: 1.15; font-size: 14px; overflow-wrap: anywhere; }
.sp-style .sp-chev { width: 16px; height: 16px; color: var(--sp-muted); }
/* NEVER SQUEEZED TO A COLUMN OF LETTERS (stress walk, 6 Nov): "anywhere" makes the name's
   least width one letter, so on an iPad, with the price's words beside it, the grid shrank
   the pill to one letter across and "6' Dog Ear Privacy - Treated Pine" stood 40 lines
   tall, pushing the plan off the bottom of the screen. The pill takes its own width (up
   to 260 px, two lines of name), and the hint beside it gives the room instead. */
@media (min-width: 641px) {
  .sp-stylewrap { flex: none; }
  .sp-style { width: max-content; }
  /* Nor is Marks & notes or "…" squeezed under the line beside them: the tools keep their
     room, and the price's words ("Pick a fence to see the price") wrap instead. */
  .sp-tools { min-width: max-content; }
}
/* AN UPRIGHT IPAD (641 to 1023 px, repair, 6 Nov): the tools in their own row under the
   title and price, with the line under them. Beside the price and Price › the tools' own
   width ran the card past the screen's edge (834 px on a 768 px iPad), Price › off it and
   the whole page sliding sideways. */
@media (min-width: 641px) and (max-width: 1023.98px) {
  .sp-card {
    grid-template-areas:
      "lead ident ident amount go"
      "lead tools tools tools tools"
      "lead hint hint hint hint"
      "lead parts parts parts parts";
  }
}
.sp-badge {
  width: 24px; height: 24px; border-radius: 7px; background: var(--sp-ink); color: #fff; flex: none;
  display: inline-grid; place-items: center; font-weight: 750; font-size: 12px;
}
.sp-swatch { display: inline-block; width: 22px; height: 8px; border-radius: 4px; flex: none; background: var(--sp-accent); }
.sp-dot { position: absolute; right: 4px; top: 4px; }

/* The price, in three boxes of the card's grid (the amount and Price › beside the title row, the parts under them). */
.sp-money { display: contents; }
.sp-amount { grid-area: amount; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.1; text-align: right; }
/* Words ("Pick a fence to see the price") wrap rather than run off a phone or squeeze the tools beside them (stress walk, 6 Nov). */
.sp-amount b { font-size: 1.375rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: break-word; color: var(--sp-ink); }
.sp-amount b.sp-words { font-size: 0.9375rem; line-height: 1.2; }
.sp-opt { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-muted); }
.sp-parts { grid-area: parts; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0 6px; min-width: 0; text-align: right; }
.sp-price-sub { display: flex; flex-wrap: wrap; justify-content: flex-end; min-height: 14px; font-size: 12px; color: var(--sp-ink2); font-variant-numeric: tabular-nums; }
.sp-price-sub .kf-part { min-width: 0; max-width: 100%; white-space: nowrap; }
.sp-price-sub .kf-part:not([hidden]) ~ .kf-part:not([hidden]):not(:empty)::before { content: " · "; }
.sp-price-note { font-size: 12px; color: var(--sp-muted); }
.sp-price-note:not(:empty)::before { content: "· "; }
/* What has no price, said in red and wrapped whole, on a phone too. */
.sp-price-alert { flex-basis: 100%; font-size: 12px; font-weight: 700; line-height: 1.2; color: #b91c1c; text-align: right; }
.sp-price-alert[hidden] { display: none; }
.sp-go {
  grid-area: go; align-items: center; justify-content: center; height: 44px; padding: 0 18px; border-radius: 12px;
  background: var(--sp-accent); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.3);
}
.sp-go:hover { background: var(--sp-accent-strong); color: #fff; }

/* ---------- the stage ---------- */
.sp-work { position: relative; z-index: 0; }
.sp-stage {
  position: relative; width: 100%; height: 60vh; min-height: 360px; overflow: hidden;
  border: 1px solid var(--sp-line); border-radius: 0.625rem; background: #f0ede8;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.sp-work[data-tool="fence"] .sp-stage, .sp-work[data-tool="gate"] .sp-stage, .sp-work[data-tool="feature"] .sp-stage,
.sp-work[data-tool="house"] .sp-stage, .sp-work[data-tool="note"] .sp-stage, .sp-work[data-tool="scale"] .sp-stage { cursor: crosshair; }
.sp-stage.sp-space { cursor: grab; }
.sp-stage.sp-panning { cursor: grabbing; }
.sp-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sp-surface .kf-gate-label { display: none; }
/* A mark's words keep their size on the screen when the yard is pinched in
   (the controller's renderScale sets these; 12 and 3.5 are the paper's own). */
.sp-surface .kf-feature-label, .sp-surface .kf-feature-note { font-size: var(--sp-mark-text, 12px); stroke-width: var(--sp-mark-halo, 3.5px); }

/* ---------- glass ---------- */
.sp-glass {
  background: var(--sp-glass);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(60, 40, 20, 0.1); box-shadow: var(--sp-shadow);
}
.sp-ic { display: inline-flex; width: 24px; height: 24px; flex: none; }
.sp-ic svg { width: 100%; height: 100%; display: block; }

/* ---------- the style list (a card under the style pill) ---------- */
.sp-pop {
  position: absolute; z-index: 26; top: calc(100% + 8px); left: 0; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 560px);
  overflow-y: auto; overscroll-behavior: contain; padding: 10px; border-radius: 18px;
}
.sp-pop-head { display: flex; align-items: center; justify-content: space-between; }

/* ---------- the fence's picture: a photo or a drawing (27 Oct, Chase: more explicit) ----------
   The style pill, the sheet's "Now drawing" row and every row of the list show
   the fence itself. One choice, Drawing | Photo (picture_mode.js), flips them
   all; a drawing is shown whole, a photo fills its frame. */
.sp-pic-pill {
  display: block; flex: none; width: 40px; height: 30px; border: 1px solid var(--sp-line); border-radius: 7px;
  background: #f5f4f1; object-fit: cover;
}
.sp-pic-pill[hidden] { display: none; }
.sp-pic-pill[data-ie-drawing] { object-fit: contain; }
.sp-pic-frame {
  position: relative; display: block; flex: none; overflow: hidden; border: 1px solid var(--sp-line); border-radius: 7px;
  background: #f5f4f1;
}
.sp-pic-row { width: 56px; height: 42px; }
.sp-pic-big { width: 120px; height: 90px; border-radius: 10px; }
.sp-pic-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-pic-img[data-ie-drawing] { object-fit: contain; }
.sp-pic-example {
  position: absolute; left: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 0 5px; border-radius: 4px;
  background: rgba(31, 26, 20, 0.78); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 16px; pointer-events: none;
}
.sp-pic-example[hidden] { display: none; }
.sp-now { margin-top: 6px; }
.sp-now[hidden] { display: none; }
.sp-now-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.sp-now-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 650; line-height: 1.25; color: var(--sp-ink); overflow-wrap: anywhere; }
/* The switch in the style list's head: two halves of one pill, the one in use filled, each half a full 44. */
.sp-pics {
  display: inline-flex; flex: none; margin: 0 6px 0 auto; overflow: hidden; border-radius: 999px; background: #fff;
  outline: 1px solid var(--sp-accent); outline-offset: -1px;
}
.sp-pics-half {
  min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; background: #fff; color: var(--sp-ink);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.sp-pics-half[aria-pressed="true"] { background: var(--sp-accent); color: #fff; }
.sp-pics-half:focus-visible { outline: 3px solid rgba(180, 83, 9, 0.45); outline-offset: -3px; }
.sp-pics-half[aria-pressed="true"]:focus-visible { outline-color: #fff; }

/* ---------- the one line, in the card (sweep 2, T10) ----------
   What to do next, or what just happened, or (once) how to pinch: one at a time,
   ABOVE the plan and never over it, so it cannot cover a side's feet or a gate's
   tag. It keeps its room whatever it says, so the plan never jumps. */
.sp-rail { grid-area: hint; display: flex; align-items: center; min-width: 0; min-height: 1.25rem; margin: 0; padding: 0; }
.sp-hint, .sp-gesture {
  margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; color: var(--sp-ink, #1f1a14);
  /* Two lines at most, so a long sentence in a wide font never grows the line and moves the plan. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.sp-gesture { color: var(--sp-ink2, #5a5148); }
.sp-gesture .sp-ic { display: inline-flex; vertical-align: -5px; margin-right: 6px; width: 20px; height: 20px; color: var(--sp-accent, #b45309); }

/* ---------- an empty plan ---------- */
/* A small card over the middle of the yard: Start from the satellite (bold, the fastest start) over Start a backyard. */
.sp-empty {
  position: absolute; z-index: 14; left: 50%; top: 50%; transform: translate(-50%, -54%); width: min(360px, calc(100% - 48px)); padding: 20px 22px 18px;
  border: 1px solid rgba(60, 40, 20, 0.1); border-radius: 20px; background: var(--sp-glass); box-shadow: var(--sp-shadow);
  text-align: center; pointer-events: none;
}
.sp-empty svg { display: block; width: 132px; height: 92px; margin: 0 auto; }
.sp-empty-house { fill: #ede5d6; stroke: #3a322b; stroke-width: 2; }
.sp-empty-edge { stroke: #55606b; }
.sp-empty-post { fill: #ffffff; stroke: #55606b; stroke-width: 1.5; }
.sp-empty h2 { margin: 10px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--sp-ink); }
.sp-empty p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; color: var(--sp-ink2); }
.sp-empty .sp-empty-note { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--sp-ink2); }
.sp-ghost, .sp-empty .sp-map-btn {
  pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 13px;
  background: #fff; border: 1px solid rgba(60, 40, 20, 0.16); font-weight: 650; font-size: 15px; color: var(--sp-ink);
  box-shadow: 0 2px 8px rgba(40, 28, 16, 0.08); cursor: pointer; touch-action: manipulation;
}
.sp-ghost:hover { border-color: var(--sp-accent); }
.sp-ghost .sp-ic, .sp-empty .sp-map-btn .sp-ic { width: 20px; height: 20px; }
.sp-empty .sp-ghost, .sp-empty .sp-map-btn { display: flex; width: 100%; }
.sp-empty .sp-map-btn { margin-bottom: 10px; border-color: var(--sp-accent); background: var(--sp-accent); color: #fff; font-weight: 700; box-shadow: 0 3px 10px rgba(180, 83, 9, 0.3); }
.sp-empty .sp-map-btn:hover { background: var(--sp-accent-strong); }
.sp-empty .sp-map-btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- the dock ---------- */
.sp-dock {
  position: absolute; z-index: 22; left: 50%; transform: translateX(-50%); bottom: 12px;
  display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 22px;
}
.sp-tool {
  width: 64px; height: 56px; border: 0; border-radius: 16px; background: none; color: var(--sp-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.01em; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, transform 0.08s;
}
.sp-tool:active { transform: scale(0.94); }
.sp-tool[aria-pressed="true"] { background: var(--sp-accent); color: #fff; box-shadow: 0 4px 14px rgba(180, 83, 9, 0.38); }
.sp-tool:disabled { opacity: 0.3; cursor: default; }
.sp-tool.sp-small { width: 56px; color: var(--sp-ink2); }
.sp-dock .sp-div { height: 34px; }
@media (hover: hover) {
  .sp-tool:not([aria-pressed="true"]):not(:disabled):hover { background: rgba(60, 40, 20, 0.06); }
  .sp-chip:not([aria-pressed="true"]):hover { background: rgba(60, 40, 20, 0.06); }
  .sp-vbtn:hover { background: rgba(60, 40, 20, 0.05); }
}

/* ---------- the chip bars over the dock ---------- */
.sp-bar {
  position: absolute; z-index: 21; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--sp-dock-h) + 8px);
  display: flex; align-items: center; gap: 2px; max-width: calc(100% - 20px); padding: 5px; border-radius: 18px;
  overflow-x: auto; scrollbar-width: none; touch-action: pan-x; white-space: nowrap;
}
.sp-bar::-webkit-scrollbar { display: none; }
.sp-chips { display: flex; gap: 2px; flex: none; }
.sp-chip {
  min-width: 44px; height: 42px; padding: 0 10px; border: 0; border-radius: 13px; background: none; color: var(--sp-ink); cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.12s, color 0.12s;
}
.sp-chip .sp-ic { width: 20px; height: 20px; }
.sp-chip[aria-pressed="true"] { background: var(--sp-ink); color: #fff; }
.sp-chip.sp-txt { font-size: 13.5px; font-weight: 650; }
.sp-lbl { flex: none; padding: 0 6px 0 9px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--sp-muted); }
.sp-div { flex: none; width: 1px; height: 26px; margin: 0 4px; background: rgba(60, 40, 20, 0.14); }
.sp-tip { flex: none; padding: 0 10px; font-size: 13.5px; font-weight: 500; color: var(--sp-ink2); }
.sp-tip b { font-weight: 650; color: var(--sp-ink); }
.sp-sm { display: none; }
/* ---------- Done / Close while a run is drawn ---------- */
/* Only the buttons take a tap: the room beside the side's label and between
   the buttons is still the yard, so the next corner can go there. */
.sp-draw { position: absolute; z-index: 23; left: 12px; bottom: calc(12px + var(--sp-dock-h) + 70px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.sp-run-label {
  padding: 2px 12px; border-radius: 999px; background: rgba(30, 26, 22, 0.88); color: #f6eee2; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sp-draw-row { display: flex; gap: 10px; pointer-events: none; }
.sp-draw-row > button { pointer-events: auto; }
.sp-big {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; min-width: 112px; padding: 0 20px; border: 0; border-radius: 18px;
  background: var(--sp-accent); color: #fff; font-size: 17px; font-weight: 750; letter-spacing: 0.01em; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 8px 22px rgba(180, 83, 9, 0.38), 0 2px 6px rgba(40, 28, 16, 0.18); transition: background 0.15s, transform 0.08s;
}
.sp-big .sp-ic { width: 22px; height: 22px; }
.sp-big:active { transform: scale(0.96); }
.sp-big.sp-sec { background: #fffdf9; color: var(--sp-ink); border: 1px solid rgba(60, 40, 20, 0.12); box-shadow: var(--sp-shadow); }
.sp-big.sp-sec[aria-pressed="true"] { border-color: var(--sp-accent); background: var(--sp-accent-soft); color: var(--sp-accent-strong); }

/* ---------- the view pill, the scale and the credit ----------
   Zoom, Fit, Snap 45° and Satellite are ONE small pill at the yard's top left (A, 3 Nov);
   below 761px it stands over the dock instead, at the left (a corner tapped near the right
   edge once hit "+" and was lost: sweep 2, T10, so never the right). .sp-top is the room it
   takes along the top, for Fit to frame the drawing below it (none on a phone). */
.sp-top { position: absolute; z-index: -1; left: 0; top: 0; width: 1px; height: 66px; visibility: hidden; pointer-events: none; }
.sp-view {
  position: absolute; z-index: 18; top: 10px; left: 12px; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 16px;
  max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none;
}
.sp-view::-webkit-scrollbar { display: none; }
.sp-view-zoom, .sp-view-modes, .sp-view-pencil { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.sp-view-sep { flex: none; width: 1px; height: 26px; margin: 0 4px; background: rgba(60, 40, 20, 0.14); }
.sp-vbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 12px;
  background: none; color: var(--sp-ink); font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.sp-vbtn .sp-ic { width: 20px; height: 20px; }
.sp-snap[aria-pressed="true"], .sp-vtext[aria-pressed="true"] { background: var(--sp-ink); color: #fff; }
/* A PINCH ON THE PILL NEVER ZOOMS THE PAGE (repair, 6 Nov): with both fingers on it the
   page itself grew four times and the plan was squeezed to a sliver. The pill only slides
   sideways; the Picture slider takes every finger. */
.sp-view, .sp-view * { touch-action: pan-x; }
.sp-view input[type="range"] { touch-action: none; }
/* One square on the screen at its true size, and what it is: "1 square = 5 ft" (F5). */
.sp-scale {
  position: absolute; z-index: 17; right: 16px; bottom: 20px; display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px;
  border-radius: 10px; background: rgba(255, 252, 246, 0.88); font-size: 11.5px; font-weight: 700; color: var(--sp-ink2);
  font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap;
}
.sp-scale i { display: block; flex: none; width: 22px; height: 22px; border: 1.5px solid var(--sp-ink2); background: rgba(255, 255, 255, 0.5); }
/* The squares on the stage: the small ones light, every few a darker line; over the satellite, white. */
.sp-g { stroke: #ebe6dc; }
.sp-gM { stroke: #d8ccb6; }
.sp-grid-sat .sp-g { stroke: rgba(255, 255, 255, 0.35); }
.sp-grid-sat .sp-gM { stroke: rgba(255, 255, 255, 0.6); }
/* The map's credit and the photo read's source: small text on the yard's bottom edge. */
.sp-credit { position: absolute; z-index: 16; left: 12px; bottom: 3px; max-width: 45%; display: flex; flex-direction: column; pointer-events: none; }
.sp-credit p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; line-height: 1.25; color: var(--sp-muted); }

/* ---------- the selection bar ---------- */
.sp-ctx {
  position: absolute; z-index: 25; left: 0; top: 0; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 15px;
  background: #1e1a16; color: #f6eee2; white-space: nowrap; will-change: transform; transition: opacity 0.14s;
  box-shadow: 0 14px 34px rgba(20, 12, 4, 0.32), 0 2px 6px rgba(20, 12, 4, 0.2);
}
.sp-ctx::after {
  content: ""; position: absolute; left: var(--cx, 50%); bottom: -5px; width: 12px; height: 12px; background: #1e1a16; border-radius: 2px; z-index: -1;
  transform: translateX(-50%) rotate(45deg);
}
.sp-ctx.sp-below::after { bottom: auto; top: -5px; }
.sp-ctx.sp-quiet { opacity: 0; pointer-events: none; }
.sp-ctx.sp-away { display: none; }
.sp-cb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 11px; border: 0; border-radius: 11px;
  background: none; color: #f6eee2; font-size: 14px; font-weight: 650; cursor: pointer; touch-action: manipulation; transition: background 0.12s;
}
.sp-cb .sp-ic { width: 18px; height: 18px; }
.sp-cb .sp-chev { width: 14px; height: 14px; }
/* Swings in / Swings out on a new gate's bar (sweep 2, T11): two big words, kept on a phone. */
.sp-cb.big { height: 48px; min-width: 88px; padding: 0 14px; background: #f6eee2; color: #1e1a16; font-size: 15px; font-weight: 700; }
.sp-cb.big:hover { background: #fff; }
.sp-cb b { font-size: 16px; font-variant-numeric: tabular-nums; }
.sp-cb .sp-u { font-size: 12px; font-weight: 600; color: #bcae9a; }
.sp-cb:hover { background: rgba(255, 255, 255, 0.09); }
.sp-cb.on { background: #f6eee2; color: #1e1a16; }
.sp-cb.red .sp-ic { color: #ff8f78; }
.sp-cb.red.on .sp-ic { color: #c2412d; }
.sp-cb.del { color: #ff9b85; }
.sp-cb:disabled { cursor: default; }
.sp-cb:disabled:not(.on) { opacity: 0.45; }
.sp-sw { display: inline-block; width: 14px; height: 6px; border-radius: 3px; background: #b45309; flex: none; }
.sp-cl { padding: 0 8px 0 10px; font-size: 13px; font-weight: 600; color: #d9ccb8; }
.sp-cl b { font-size: 15px; color: #fff; }
.sp-sep { flex: none; width: 1px; height: 24px; margin: 0 3px; background: rgba(255, 255, 255, 0.14); }
.sp-seg { display: flex; gap: 1px; padding: 2px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
/* 44 px tall like every other button on the bar (fixer, 26 Oct: the deck's height chips were 40). */
.sp-seg .sp-cb { height: 44px; min-width: 46px; padding: 0 9px; gap: 7px; }

/* ---------- the yard menu ---------- */
.sp-menu { position: absolute; z-index: 30; left: 0; top: 0; width: 262px; padding: 6px; border-radius: 18px; }
.sp-mi {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 7px 12px; border: 0; border-radius: 12px; background: none;
  font-size: 15px; font-weight: 650; line-height: 1.25; text-align: left; color: var(--sp-ink); cursor: pointer;
}
.sp-mi .sp-ic { width: 22px; height: 22px; color: var(--sp-accent); }
.sp-mi small { display: block; font-size: 12px; font-weight: 500; color: var(--sp-ink2); }
.sp-mi:hover { background: rgba(60, 40, 20, 0.06); }
.sp-mi.sp-danger .sp-ic { color: var(--sp-bad); }

/* ---------- the sheet: the pad, a gate's kind, a note ---------- */
/* The price is in the card above the yard now (A, 3 Nov), so nothing at the plan's top right stands in the pad's way. */
.sp-side { position: absolute; z-index: 26; top: 12px; right: 12px; width: min(21rem, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sp-handle { display: none; }
.sp-sheet-card {
  padding: 12px; border: 1px solid var(--sp-line); border-radius: 0.625rem; background: #fff; color: var(--sp-ink);
  box-shadow: 0 2px 4px rgba(31, 26, 20, 0.08), 0 16px 32px -12px rgba(31, 26, 20, 0.28); -webkit-user-select: none; user-select: none;
}
.sp-x {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 12px;
  background: none; color: var(--sp-ink2); cursor: pointer;
}
.sp-x .sp-ic { width: 20px; height: 20px; }
.sp-x:hover { background: #f5f4f1; }
.sp-boxes { display: flex; gap: 8px; margin-top: 6px; }
.sp-box {
  flex: 1; height: 56px; padding: 0 12px; border: 2px solid var(--sp-line-strong); border-radius: 0.625rem; background: #fff; text-align: left; cursor: pointer; touch-action: manipulation;
}
.sp-box[aria-pressed="true"] { border-color: var(--sp-accent); background: var(--sp-accent-soft); }
.sp-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.sp-key {
  height: 44px; min-height: 44px; border: 1px solid var(--sp-line-strong); border-radius: 0.625rem; background: #fff; color: var(--sp-ink);
  font-size: 18px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.sp-key:active { background: #f5f4f1; }
.sp-key-word { font-size: 15px; }
.sp-set { grid-row: span 2; height: auto; min-height: 48px; border: 2px solid var(--sp-accent); color: var(--sp-accent-strong); padding: 0 4px; font-size: 16px; }
.sp-set:active { background: var(--sp-accent-soft); }

/* ---------- Start a backyard ---------- */
.sp-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(25, 18, 10, 0.34); }
.sp-modal {
  position: fixed; z-index: 51; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px));
  max-height: calc(var(--sp-vvh) - 40px); overflow: auto; padding: 18px; border-radius: 24px; background: #fffcf6; color: var(--sp-ink);
  box-shadow: 0 30px 80px rgba(20, 12, 4, 0.35); touch-action: pan-y; overscroll-behavior: contain;
}
.sp-sh-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-sh-h b { display: block; font-size: 18px; font-weight: 750; }
.sp-sh-sub { margin-top: 3px; font-size: 13px; color: var(--sp-ink2); }
.sp-segs { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: #f1eadd; }
.sp-segs.sp-mode { margin-top: 14px; }
.sp-segs button {
  display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 44px; border: 0; border-radius: 11px; background: none;
  font-size: 14.5px; font-weight: 650; color: var(--sp-ink2); cursor: pointer; white-space: nowrap;
}
.sp-segs button.on { background: #fff; color: var(--sp-ink); box-shadow: 0 1px 4px rgba(40, 28, 16, 0.16); }
.sp-segs .sp-ic { width: 18px; height: 18px; }
.sp-byprev { display: block; width: 100%; height: 112px; margin-top: 12px; border: 1px solid rgba(60, 40, 20, 0.08); border-radius: 14px; background: #f6f1e7; }
.sp-fg { margin-top: 14px; }
.sp-fl { margin: 0 0 6px 2px; font-size: 11.5px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sp-muted); }
.sp-fr { display: flex; gap: 8px; }
.sp-fld { display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0; height: 58px; padding: 5px 12px; border-radius: 14px; background: #f1eadd; cursor: text; }
.sp-fld > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 650; color: var(--sp-ink2); }
.sp-iv { display: flex; align-items: baseline; gap: 4px; }
.sp-fld input {
  flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; background: none; outline: none; font: inherit; font-size: 19px; font-weight: 750; color: var(--sp-ink);
  font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text; touch-action: manipulation;
}
.sp-fld em { font-style: normal; font-size: 14px; font-weight: 650; color: var(--sp-muted); }
.sp-fld:focus-within { box-shadow: inset 0 0 0 2px var(--sp-accent); }
/* The field's own ring says where the typing goes; no second ring inside it. */
.sp-editor .sp-fld input:focus-visible { outline: none; }
.sp-byhint { margin: 6px 0 0 2px; font-size: 12px; color: var(--sp-muted); }
/* A problem with a number, said under the box it is about (the height). */
.sp-byhint.sp-bad { font-weight: 700; color: var(--sp-bad); }
.sp-byhint.sp-bad:empty { display: none; }
.sp-bynote { margin-top: 10px; font-size: 12.5px; color: var(--sp-ink2); }
.sp-tog {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; margin-top: 4px; padding: 0 12px; border: 0; border-radius: 14px; background: #f1eadd;
  font-size: 14.5px; font-weight: 600; color: var(--sp-ink); text-align: left; cursor: pointer;
}
.sp-tog i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: #cfc4b2; transition: background 0.15s; }
.sp-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.sp-tog.on i { background: var(--sp-accent); }
.sp-tog.on i::after { transform: translateX(16px); }
.sp-sel {
  width: 100%; height: 48px; padding: 0 12px; border: 0; border-radius: 14px; background: #f1eadd; font-size: 14.5px; font-weight: 600; color: var(--sp-ink);
}
/* Cancel and Draw it stay at the bottom of the sheet while it scrolls, so the
   way on is in reach on a laptop's height and a phone's. */
.sp-sh-f {
  position: sticky; z-index: 2; bottom: -18px; display: flex; gap: 10px; margin: 14px -18px -18px; padding: 12px 18px 18px;
  background: #fffcf6; border-top: 1px solid rgba(60, 40, 20, 0.08);
}
.sp-btn1, .sp-btn2 { flex: 1; height: 52px; border: 0; border-radius: 15px; font-size: 16px; font-weight: 700; cursor: pointer; }
.sp-btn1 { background: var(--sp-accent); color: #fff; }
.sp-btn1:active { background: var(--sp-accent-strong); }
.sp-btn2 { background: #efe7d8; color: var(--sp-ink); }

/* ---------- laptop and tablet widths ---------- */
@media (max-width: 760px) {
  .sp-view { top: auto; bottom: calc(12px + var(--sp-dock-h) + 8px + 52px + 12px); }
  .sp-top { height: 0; }
  /* Over the view pill, never under it (repair, 6 Nov: the pill covered "1 square = 10 ft",
     all of it with Satellite on). */
  .sp-scale { bottom: calc(12px + var(--sp-dock-h) + 8px + 52px + 12px + 58px); }
  .sp-credit { bottom: calc(12px + var(--sp-dock-h) + 4px); }
  /* THE START CARD IS NEVER UNDER THE VIEW PILL (F3, 6 Nov): here the pill stands over the
     dock, in the middle of a phone's short yard, and it sat on Start from the satellite.
     The card goes to the yard's top as one row of its two starts; the picture, the title
     (still read aloud) and the note give the room back. */
  .sp-empty { top: 8px; transform: translateX(-50%); display: flex; gap: 8px; width: calc(100% - 16px); padding: 8px; }
  .sp-empty svg, .sp-empty .sp-empty-note { display: none; }
  .sp-empty h2 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sp-empty .sp-ghost, .sp-empty .sp-map-btn {
    flex: 1 1 0; min-width: 0; height: auto; min-height: 52px; margin: 0; padding: 6px 10px; gap: 6px; font-size: 14px; line-height: 1.2; white-space: normal;
  }
}

/* ---------- phones ---------- */
@media (max-width: 640px) {
  /* While a run is drawn the run's one line of buttons has the bottom of the plan
     to itself: the zoom buttons and the scale bar go until Done (T10); Snap and Satellite stay. */
  .sp-work.sp-drawing .sp-view-zoom, .sp-work.sp-drawing .sp-view-sep, .sp-work.sp-drawing .sp-scale { display: none; }
  /* And Snap and Satellite go up to the plan's top while it is drawn: over the dock they took the
     only room the run's buttons had, and the buttons stood on Satellite (stress walk, 6 Nov). */
  .sp-work.sp-drawing .sp-view { top: 8px; bottom: auto; }
  .sp-side {
    position: fixed; z-index: 45; left: 8px; right: 8px; bottom: 0; top: auto; width: auto; max-height: 45vh;
    border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -8px 30px rgba(31, 26, 20, 0.18); padding-bottom: env(safe-area-inset-bottom);
  }
  .sp-handle { display: flex; align-items: center; justify-content: center; width: 100%; height: 24px; border: 0; background: none; touch-action: manipulation; }
  .sp-handle span { display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--sp-line-strong); }
  .sp-side .sp-sheet-card { border-radius: 0; border: 0; box-shadow: none; }
  .sp-modal {
    top: auto; bottom: var(--sp-vvb); left: 0; transform: none; width: 100%; max-height: calc(var(--sp-vvh) * 0.92);
    border-radius: 24px 24px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .sp-sh-f {
    bottom: calc(-18px - env(safe-area-inset-bottom)); margin-bottom: calc(-18px - env(safe-area-inset-bottom));
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }
  .sp-segs button { font-size: 13.5px; }
}
@media (max-width: 520px) {
  .sp-editor { --sp-dock-h: 60px; }
  /* A picked thing's bar fits the phone: icons and figures, the words in
     their titles, and it wraps rather than run off the screen. */
  .sp-ctx { max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center; gap: 0; }
  /* 44 px across as well as tall: every tap on the bar is a full 44 (fixer, 26 Oct). */
  .sp-cb { min-width: 44px; padding: 0 8px; }
  .sp-cb.big { min-width: 0; padding: 0 10px; font-size: 14px; }
  /* A word beside its icon goes (Old fence, Swing, Details, Note); a figure
     stays (a side's feet, a gate's width, a style's letter, a corner's degrees). */
  .sp-cb .sp-ic + .sp-t, .sp-cb .sp-u { display: none; }
  .sp-seg .sp-cb { min-width: 38px; padding: 0 6px; gap: 5px; }
  .sp-sep { margin: 0 1px; }
  /* Swing is on the picked gate's own bar on a phone, so the widths are one row. */
  .sp-bar[data-bar="gate"] .sp-swing { display: none; }
  .sp-tool { width: 46px; height: 52px; border-radius: 14px; font-size: 10px; gap: 2px; }
  .sp-tool.sp-small { width: 46px; }
  .sp-tool .sp-ic { width: 22px; height: 22px; }
  .sp-dock { padding: 4px; gap: 0; border-radius: 20px; }
  .sp-dock .sp-div { margin: 0 2px; height: 30px; }
  .sp-chip { min-width: 38px; padding: 0 8px; }
  .sp-lg { display: none; }
  .sp-sm { display: inline; }
  .sp-long { display: none; }
  /* gate sizes fit a 390 px phone with no sideways scroll */
  .sp-bar[data-bar="gate"] { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 20px); transform: none; flex-wrap: wrap; justify-content: center; overflow: visible; white-space: normal; padding: 4px; }
  .sp-bar[data-bar="gate"] .sp-chips { flex-wrap: wrap; justify-content: center; flex: 0 1 auto; }
  .sp-bar[data-bar="gate"] .sp-chip { min-width: 34px; height: 40px; padding: 0 6px; font-size: 14.5px; border-radius: 12px; }
  .sp-bar[data-bar="gate"] .sp-lbl { padding: 0 4px 0 6px; }
  .sp-bar[data-bar="gate"] .sp-div { display: none; }
  /* Type feet, Close and Done are ONE line inside the card at 375 wide (T10). */
  .sp-draw { max-width: calc(100% - 16px); }
  .sp-draw-row { gap: 8px; flex-wrap: nowrap; }
  .sp-big { height: 50px; min-width: 0; padding: 0 12px; gap: 6px; font-size: 15px; white-space: nowrap; border-radius: 16px; }
  .sp-big .sp-ic { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
  .sp-big { padding: 0 9px; gap: 4px; font-size: 14px; }
  .sp-tool { width: 42px; }
  .sp-tool.sp-small { width: 42px; }
  .sp-chip { min-width: 32px; padding: 0 5px; }
  .sp-bar[data-bar="gate"] .sp-chip { min-width: 30px; padding: 0 4px; font-size: 13.5px; }
}

/* THE LIVE BADGE (A3): "46 ft · 90°" while a side is drawn or a corner slid,
   "4 ft gate · 12 ft from the corner" while a gate is placed, drawn on the live
   layer only (never saved). The side just put down wears it in its feet pill's
   place: the pill stays, unseen, as the same tap target. */
.sp-editor .kf-pill-parked { opacity: 0; }
.sp-editor .kf-live-feet text { font-variant-numeric: tabular-nums; }
.sp-editor .kf-live-feet rect { filter: drop-shadow(0 2px 6px rgba(30, 20, 10, 0.28)); }

/* ---------- decks (A4) ---------- */
/* Deck stands on the dock beside House from 640px up; a phone's row has no
   room, so a phone has Deck and Start a deck under More (isPhone: under 640). */
@media (max-width: 639.98px) {
  .sp-dock .sp-tool-deck { display: none; }
}
/* The deck's style and railing lists ride in the menu card: the one in use is lit. */
.sp-mi.on { background: var(--sp-accent-soft, rgba(180, 83, 9, 0.1)); }
/* Start a deck: each wall of the house in the picture is a tap target. */
.sp-byprev .sp-wall { cursor: pointer; pointer-events: stroke; }

/* ---------- Start a deck v2 (26 Oct) ---------- */
/* Each group's heading: its number, its words, and on the right what the
   group comes to ("192 sq ft", "about 24 in"). */
.sp-fl { display: flex; align-items: center; gap: 8px; }
.sp-fn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sp-ink); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0;
}
.sp-fa { margin-left: auto; font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sp-ink2); text-align: right; }
.sp-mt { margin-top: 8px; }
/* Chips that wrap: the height's three (with a second line), the boards, the
   rails, the Trex colors. Every one a 44 px tap. */
.sp-dchips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-dchip {
  display: inline-flex; flex: 1 1 auto; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 44px;
  padding: 6px 10px; border: 0; border-radius: 13px; background: #f1eadd; color: var(--sp-ink); cursor: pointer; touch-action: manipulation; text-align: center;
}
.sp-dchip b { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.sp-dchip small { margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--sp-ink2); }
.sp-dchip.on { background: var(--sp-ink); color: #fff; }
.sp-dchip.on small { color: #e8dccb; }
.sp-dchips3 .sp-dchip { flex: 1 1 0; }
.sp-dchips-sm .sp-dchip b { font-size: 13.5px; font-weight: 650; }
/* What the stairs come to: "6 steps", how, and the stairs to price. */
.sp-steps { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding: 10px 12px; border-radius: 13px; background: #f6e6d2; }
.sp-steps:empty { display: none; }
.sp-steps b { font-size: 17px; font-weight: 800; }
.sp-steps span { font-size: 12.5px; font-weight: 600; color: var(--sp-ink2); }
.sp-steps em { flex-basis: 100%; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--sp-bad); }
/* A note for staff, never the customer: the code's guard. Warns, never blocks. */
.sp-staff { margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: #fdf0d5; color: #7a4a06; font-size: 13px; line-height: 1.35; }
.sp-staff b { font-weight: 800; }
.sp-staff[hidden] { display: none; }
/* The extras: closed folds, each opened only when wanted. */
.sp-xfs { display: flex; flex-direction: column; gap: 6px; }
.sp-xf { border-radius: 13px; background: #f1eadd; }
.sp-xf > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 14px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 650; color: var(--sp-ink); touch-action: manipulation;
}
.sp-xf > summary::-webkit-details-marker { display: none; }
.sp-xf > summary::before { content: "›"; flex: none; width: 10px; font-size: 18px; color: var(--sp-muted); transition: transform 0.15s; }
.sp-xf[open] > summary::before { transform: rotate(90deg); }
.sp-xf > summary > span:first-of-type { flex: 1; }
.sp-xs { flex: none; padding: 3px 9px; border-radius: 999px; background: #e4d9c6; font-size: 12.5px; font-weight: 700; color: var(--sp-ink2); }
.sp-xs.on { background: var(--sp-accent); color: #fff; }
.sp-xb { padding: 0 10px 10px; }
.sp-xb .sp-fld { background: #fffcf6; }
.sp-xbtn { flex: 0 0 auto; width: auto; min-width: 112px; height: 58px; padding: 0 14px; }
/* The deck bar's height: "about 120 in", and "~120 in" on a phone. */
.sp-cb .sp-short { display: none; }
@media (max-width: 520px) {
  .sp-cb .sp-long { display: none; }
  .sp-cb .sp-short { display: inline; }
}
/* The deck bar's inches box, in the yard menu's card. */
.sp-mi-form { display: flex; flex-direction: column; gap: 8px; padding: 6px; }
.sp-mi-form .sp-btn1 { flex: none; height: 48px; }

/* ---------- The deck by its size, the house not a square (27 Oct) ---------- */
/* Width and depth each in feet and inches: two pairs side by side, one under
   the other on a phone. The inches box is narrow; both are 44 px and more. */
.sp-fr-ftin { flex-wrap: wrap; }
.sp-fpair { display: flex; flex: 1 1 210px; gap: 6px; min-width: 0; }
.sp-fpair > .sp-fld:first-child { flex: 1.6 1 0; }
.sp-fpair > .sp-fld-in { flex: 0 0 78px; }
/* The house's preview is framed to what is drawn: a box, an L or a U. */
.sp-byprev { height: 132px; }
/* A house wall's feet on the stage, a slate pill. */
.kf-house-pill { cursor: pointer; }
/* The satellite under the plan: a framed map page, never touched (the plan
   takes every finger), dimmed so the drawing reads over it. */
/* F4: the frame covers the stage, centred; the editor sizes it and moves the map's camera. */
.sp-sat { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border: 0; transform: translate(-50%, -50%); transform-origin: 50% 50%; pointer-events: none; opacity: 0.85; background: transparent; }
.sp-stage.sp-stage-sat { background: #1f2937; }
.sp-sat-strength { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; min-height: 44px; }
.sp-sat-strength[hidden] { display: none; }
.sp-sat-strength input { width: 96px; accent-color: var(--sp-accent); }
.sp-sat.sp-sat-off { visibility: hidden; }
.sp-satwrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sp-sat-btn.sp-sat-on, .sp-sat-btn[aria-pressed="true"] { border-color: var(--sp-accent); background: var(--sp-accent-soft, rgba(180, 83, 9, 0.12)); color: var(--sp-ink); }
/* A picked deck's bar (its area, the three heights, the inches, Change the
   deck, Add stairs, turn, delete) ran past the right edge of a 1024 iPad
   beside the sidebar: from any width it wraps inside the plan instead. */
.sp-ctx { max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center; }
/* Start from the satellite (27 Oct): bold on a blank plan, a plain tool link
   once something is drawn ("Start again from the satellite"). */
.sp-map-btn.sp-map-blank { border-color: var(--sp-accent); background: var(--sp-accent); color: #fff; }
.sp-map-btn.sp-map-blank .sp-ic { color: #fff; }
.sp-map-btn[disabled] { opacity: 0.6; cursor: progress; }
/* "From the map. Check the walls": the one orange hint after Start from the
   satellite, until the rep's next touch. */
.sp-hint.sp-hint-check { color: var(--sp-accent, #b45309); font-weight: 800; }

/* ---------- THE STREET SIDE (29 Oct) ----------
   "Make it explicit which side faces the street on the builder tool." A road-
   coloured bar along the edge of the plan that faces the street, OUTSIDE the
   stage (it takes its own room: the controller gives the stage that height when
   the bar is at the bottom, streetReserve), so it never covers the drawing or
   the dock. data-street on .sp-yard says which edge; the bar is first or last
   in the row or column. Until somebody says (data-said="no") it is orange and
   reads "Street (tap to change)"; after a tap it is road-grey and reads "Street".
   The paper's own band is drawn into the saved picture (streetMarkup). */
.sp-yard { display: flex; flex-direction: column; }
.sp-yard > .sp-work { flex: 1 1 auto; min-width: 0; min-height: 0; }
/* The plan and all it opens (the number pad, sheets and menus, fixed to a phone's foot) stand
   over the street bar: the bar comes after the plan, so at the same level it was drawn over the
   pad's bottom row on an iPhone and took its taps (stress walk, 6 Nov). The bar is a stacking
   context of its own (z-index 0), so its word (z-index 1) stays inside it. */
.sp-yard > .sp-work { z-index: 1; }
.sp-yard > .sp-street { z-index: 0; }
.sp-yard[data-street="left"], .sp-yard[data-street="right"] { flex-direction: row; }
.sp-yard[data-street="left"] > .sp-work, .sp-yard[data-street="right"] > .sp-work { flex: 1 1 0; }
.sp-yard > .sp-street { order: 1; }
.sp-yard[data-street="top"] > .sp-street, .sp-yard[data-street="left"] > .sp-street { order: -1; }
.sp-yard[data-street="top"] > .sp-street { margin-bottom: 6px; }
.sp-yard[data-street="bottom"] > .sp-street { margin-top: 6px; }
.sp-yard[data-street="left"] > .sp-street { margin-right: 6px; }
.sp-yard[data-street="right"] > .sp-street { margin-left: 6px; }
/* A thumb's size across (44 px, the phone rule): the one-screen yard (3 Nov) had slimmed it to
   26 px, too thin to tap with a thumb. */
.sp-street {
  position: relative; flex: none; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: #475569; color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 750; letter-spacing: 0.02em; line-height: 1.1; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sp-street[data-said="no"] { background: var(--sp-accent); }
.sp-street:active { filter: brightness(0.92); }
/* The road's centre line, dashed, behind the word. */
.sp-street::before {
  content: ""; position: absolute; pointer-events: none; opacity: 0.8;
  left: 10px; right: 10px; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #fde68a 0 14px, transparent 14px 26px);
}
.sp-street-word { position: relative; z-index: 1; max-width: 100%; padding: 2px 12px; border-radius: 999px; background: #475569; text-align: center; }
.sp-street[data-said="no"] .sp-street-word { background: var(--sp-accent); }
/* Along the left or right edge the bar stands up and the word reads along it. */
.sp-yard[data-street="left"] > .sp-street, .sp-yard[data-street="right"] > .sp-street { align-self: stretch; padding: 12px 0; }
.sp-yard[data-street="left"] > .sp-street::before, .sp-yard[data-street="right"] > .sp-street::before {
  left: 50%; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, #fde68a 0 14px, transparent 14px 26px);
}
.sp-yard[data-street="left"] .sp-street-word, .sp-yard[data-street="right"] .sp-street-word { padding: 12px 2px; writing-mode: vertical-rl; }
.sp-yard[data-street="left"] .sp-street-word { transform: rotate(180deg); }
/* Which edge: the plan as a small square, one button on each edge. */
.sp-street-pop {
  position: absolute; z-index: 31; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(280px, calc(100% - 24px)); padding: 12px; border-radius: 18px;
}
.sp-street-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-street-head .ui-card-title { margin: 0; font-size: 15px; }
.sp-street-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 46px 70px 46px; gap: 6px; margin-top: 10px; }
.sp-street-pick {
  min-height: 44px; padding: 0 6px; border: 1px solid var(--sp-line-strong); border-radius: 12px; background: #fff; color: var(--sp-ink);
  font-size: 14px; font-weight: 700; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sp-street-pick[aria-pressed="true"] { background: #475569; border-color: #475569; color: #fff; }
.sp-street-top { grid-column: 2; grid-row: 1; }
.sp-street-left { grid-column: 1; grid-row: 2; }
.sp-street-right { grid-column: 3; grid-row: 2; }
.sp-street-bottom { grid-column: 2; grid-row: 3; }
.sp-street-yard { grid-column: 2; grid-row: 2; border: 2px dashed var(--sp-line-strong); border-radius: 10px; background: #f0ede8; }
/* On a phone the bar beside the plan takes 50 px of its width (44 px to tap, 6 px apart), so the
   dock's tools are a little narrower there, and the dock still sits inside the plan. */
@media (max-width: 520px) {
  .sp-yard[data-street="left"] > .sp-street, .sp-yard[data-street="right"] > .sp-street { width: 44px; min-width: 44px; }
  .sp-yard[data-street="left"] .sp-tool, .sp-yard[data-street="right"] .sp-tool,
  .sp-yard[data-street="left"] .sp-tool.sp-small, .sp-yard[data-street="right"] .sp-tool.sp-small { width: 38px; }
}

/* ---------- the sheet beside the yard (Chase, 3 Nov, "A · One-screen yard") ----------
   Marks, Notes and Photos (and under Marks, the chips and the list of what is marked) in
   one sheet BESIDE the drawing, never on it: a column on a laptop or a landscape iPad (the
   yard narrows to make room, and the editor lays itself out again), a bottom sheet from a
   portrait iPad down, where the little view pill steps aside while it is open.
   Markup: app/views/site_plans/_marks_sheet.html.erb; what opens it: plan_sheet_controller.js. */
.sp-body { position: relative; min-width: 0; --sp-panel-w: clamp(320px, 30vw, 420px); }
.sp-body > .sp-yard { min-width: 0; }
.sp-body[data-sheet="open"] > .sp-yard { margin-right: calc(var(--sp-panel-w) + 12px); }
.sp-panel {
  position: absolute; z-index: 24; top: 0; right: 0; bottom: 0; width: var(--sp-panel-w); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--sp-line); border-radius: 0.75rem; background: #fff; color: var(--sp-ink); box-shadow: var(--sp-shadow);
}
.sp-panel-grab { display: none; align-items: center; justify-content: center; height: 18px; flex: none; }
.sp-panel-grab span { display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--sp-line-strong); }
.sp-panel-head { display: flex; align-items: center; gap: 8px; flex: none; padding: 12px 12px 10px 14px; }
.sp-panel-x { margin: 0; }
.sp-tabs { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; padding: 3px; border-radius: 14px; background: #ece7df; }
.sp-tabs > button {
  display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 10px; border: 0; border-radius: 11px;
  background: none; color: var(--sp-ink2); font-size: 14.5px; font-weight: 650; white-space: nowrap; cursor: pointer; touch-action: manipulation;
}
.sp-tabs > button[aria-selected="true"] { background: #fff; color: var(--sp-ink); box-shadow: 0 1px 4px rgba(40, 28, 16, 0.16); }
.sp-tabs-sub { margin: 2px 0 12px; background: #f1eadd; }
.sp-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 14px 16px; }
.sp-pane[hidden] { display: none; }
.sp-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-mchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--sp-line-strong); border-radius: 12px;
  background: #fff; color: var(--sp-ink); font-size: 14.5px; font-weight: 650; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sp-mchip .sp-ic { width: 20px; height: 20px; }
.sp-mchip[aria-pressed="true"] { border-color: var(--sp-ink); background: var(--sp-ink); color: #fff; }
@media (hover: hover) {
  .sp-mchip:not([aria-pressed="true"]):hover { border-color: var(--sp-accent); }
}
/* What is marked, each with its line for the crew. */
.sp-marked { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sp-line); }
.sp-marked-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 12px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-ink2); }
.sp-marked-count { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--sp-ink2); font-variant-numeric: tabular-nums; }
.sp-marked-empty { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--sp-muted); }
.sp-marked-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--sp-muted); }
.sp-mlist { margin: 0; padding: 0; list-style: none; }
.sp-mrow { padding: 10px 0; border-top: 1px solid var(--sp-line); }
.sp-mrow:first-child { border-top: 0; }
.sp-mrow-top { display: flex; align-items: center; gap: 12px; }
.sp-mrow-key { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; }
.sp-mrow-key svg { max-width: 100%; height: auto; }
.sp-mrow-name { flex: 1 1 auto; min-width: 0; }
.sp-mrow-name b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--sp-ink); overflow-wrap: anywhere; }
.sp-mrow-name small { display: block; font-size: 13.5px; line-height: 1.3; color: var(--sp-ink2); }
.sp-mrow-act {
  flex: none; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--sp-accent-strong); font-size: 14.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.sp-mrow-act:hover { background: var(--sp-accent-soft); }
.sp-mrow-note { display: block; width: 100%; margin-top: 8px; }
.sp-crewnotes .ui-input { min-height: 8rem; }
/* "Other ways to add a plan" is folded away in the Photos tab until the yard menu, a link or a form asks for it. */
.sp-panel [data-other-ways]:not([open]) { display: none; }
.sp-panel .ui-card { box-shadow: none; }

/* The sheet is a bottom sheet from a portrait iPad down, and the view pill steps aside while it is open. */
@media (max-width: 899.98px) {
  .sp-body[data-sheet="open"] > .sp-yard { margin-right: 0; }
  .sp-body[data-sheet="open"] .sp-view { display: none; }
  .sp-panel {
    position: fixed; z-index: 44; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: min(48vh, 460px);
    border-width: 1px 0 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(31, 26, 20, 0.18); padding-bottom: env(safe-area-inset-bottom);
  }
  .sp-panel-grab { display: flex; }
  .sp-panel-head { padding-top: 0; }
}


/* ---------- the card on a phone ----------
   The step bars, title row and the one line stand on the page (no card around them) and
   only the price is a card, with Price › on its right, as drawn. The style pill gives up
   its words and Marks & notes is its list icon and count. */
@media (max-width: 640px) {
  .sp-card {
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; gap: 6px 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "lead save"
      "name tools"
      "hint hint"
      "money money";
  }
  .sp-lead { align-self: center; }
  .sp-steps { display: flex; align-items: center; gap: 10px; }
  .sp-stepbars { margin: 0; }
  .sp-stepbar { width: 26px; }
  .sp-ident { display: contents; }
  .sp-titlerow { grid-area: name; }
  .sp-save { grid-area: save; justify-self: end; font-size: 13px; }
  .sp-tools { gap: 6px; }
  .sp-pill { min-height: 40px; padding: 0 10px; }
  .sp-more { min-width: 40px; padding: 0; }
  .sp-pill-word { display: none; }
  .sp-style .sp-name { display: none; }
  .sp-rail { align-items: flex-start; min-height: 2.15rem; }
  .sp-hint, .sp-gesture { font-size: 15px; }
  .sp-money {
    grid-area: money; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "amount go" "parts go"; align-items: center; gap: 2px 12px;
    padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(31, 26, 20, 0.06);
  }
  .sp-amount { align-items: flex-start; text-align: left; }
  .sp-parts { justify-content: flex-start; text-align: left; }
  .sp-price-sub { justify-content: flex-start; }
  .sp-price-alert { text-align: left; }
  .sp-go { height: 48px; padding: 0 20px; font-size: 16px; }
  .sp-vword { display: none; }
  /* The Picture slider fits the pill beside Snap and Satellite (it was cut off by 7 px). */
  .sp-sat-strength input { width: 68px; }
  .sp-pop { position: absolute; left: 8px; right: 8px; width: auto; top: calc(100% + 6px); }
  .sp-stylewrap { position: static; }
  /* A phone's yard is short: under or over it the bar is 36 px, still a thumb's press, so the
     start card's two starts stay clear of the view pill over the dock. */
  .sp-yard[data-street="top"] > .sp-street, .sp-yard[data-street="bottom"] > .sp-street { min-height: 36px; }
}
@media (max-width: 520px) {
  .sp-style { flex: none; padding: 0 10px 0 6px; gap: 6px; max-width: none; }
  /* With the fence's picture on the pill (40 px) the picture takes the swatch's place and the
     letter takes the style's colour, with a little less padding. */
  .sp-style[data-has-pic] { padding: 0 8px 0 4px; gap: 5px; }
  .sp-style[data-has-pic] .sp-swatch { display: none; }
  .sp-style[data-has-pic] .sp-badge { background: var(--sp-style-colour, var(--sp-ink)); }
}