/* ==========================================================================
   § 010 · Build your garden beds with confidence — interactive bed builder
   Figma gjYZkxeha34OwmNUr91aQn · Frame 495 (874:13365) + Try-it sticker (871:10194)
   Markup: index.html @@SECTION beds · Logic: scripts/sec-beds.js -> sec-beds-app.js
   ========================================================================== */

/* The site's mustard scroll indicator (shared with § 030's treatment-plans card). */
@import url('/styles/scroll-indicator.css?v=20260915-1');

#beds {
  /* Figma tokens this section uses that main.css does not carry. */
  --beds-muted: #6d5441;        /* text/secondary · colors/brown/5 */
  --beds-brown-6: #4a3324;      /* colors/brown/6 (tab labels) */
  --beds-card: #f1e9d8;         /* surface/card-light */
  --beds-tab-off: #e2dbcc;      /* colors/eggshell/4 */
  --beds-bed: #c5b49f;          /* colors/brown/2 (bed fill) */
  --beds-envelope: #f5ebde;     /* colors/brown/1 (dashed spacing envelope) */
  --beds-sticker: #f6bc02;      /* colors/yellow/4 */
  --beds-red: #c8402f;          /* delete "x" */
  --beds-warn: #9a710a;         /* status/warning */
  --beds-good: #2c5f39;         /* green/6 */
}

/* Frame 128 (874:13366): ornament 28, gap 20, then SectionHeader 195 =
   eyebrow 16 flush on the H2 title (144), lede 4 below it; gap 40 to the builder. */
@media (min-width: 981px) {
  #beds { padding-top: 16px; }
  #beds .ornament--solo { margin-top: 0; margin-bottom: 20px; }
  #beds .beds__head .eyebrow { line-height: 16px; margin-bottom: 0; }
  #beds .beds__head .lede { margin-top: 4px; }
}

.beds__head { margin-bottom: 40px; max-width: 1280px; }

/* ── Two-column builder ─────────────────────────────────────────────────── */
.beds__app {
  display: grid;
  grid-template-columns: minmax(0, 631px) minmax(0, 598px);
  justify-content: center;
  gap: 44px;
  align-items: start;
  padding-block: 8px;
  position: relative;
}
.beds__left { position: relative; min-width: 0; }
.beds__right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ── "Try it!" sticker (871:10194) ──────────────────────────────────────── */
/* Positions from Frame 486 / Group 129 bounding boxes, relative to the left column. */
.beds__sticker {
  position: absolute; left: 166px; top: -102px; width: 150px; height: 150px;
  pointer-events: none; z-index: 3;
}
.beds__sticker-label {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center;
  width: 142px; height: 44px; border-radius: 4px;
  background: var(--beds-sticker); color: #000;
  font-family: var(--f-serif); font-weight: 600; font-size: 28px; line-height: 1.1;
  transform: rotate(-10.87deg);
  box-shadow: 0 2px 0 rgba(40, 18, 7, 0.08);
}
.beds__sticker-arrow {
  position: absolute; left: 90px; top: 34px; width: 31px; height: 92px;
  transform: rotate(156.55deg) scaleY(-1); transform-origin: 50% 50%;
}

/* ── Controls row: Dimensions + Sunrise→Sunset slider ───────────────────── */
.beds__controls { display: flex; align-items: center; gap: 20px; margin-bottom: 8px; }
.beds__dims { border: 0; margin: 0; padding: 0; width: 164px; flex: none; min-width: 0; }
.beds__label {
  padding: 0; margin-bottom: 8px; height: 18px;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 18px;
  color: var(--ink); opacity: 0.65;
}
.beds__dims-row { display: flex; gap: 20px; }
.beds__select {
  position: relative; display: flex; align-items: center;
  width: 72px; height: 38px;
  background: var(--beds-card); border: 1px solid var(--hairline); border-radius: 8px;
}
.beds__select select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 100%; padding: 0 30px 0 12px; margin: 0;
  background: transparent;
  border: 0; border-radius: 8px;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--ink);
  cursor: pointer;
  transform: none;
}
.beds__select select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.beds__unit {
  position: absolute; right: 21px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-sans); font-size: 12px; line-height: 15px; color: var(--beds-muted);
  pointer-events: none;
}
/* Figma caret (Polygon 1) rotated 180°, as the design places it. */
.beds__select::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 5px; margin-top: -2px;
  background: url('/assets/beds/caret.svg') center / 6px 5px no-repeat;
  transform: rotate(180deg); pointer-events: none;
}

.beds__time { flex: 1 1 auto; min-width: 0; }
.beds__time-ends {
  display: flex; justify-content: space-between; margin-bottom: 4px;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--beds-muted);
}
.beds__time-times {
  display: flex; justify-content: space-between;
  font-family: var(--f-serif); font-size: 13px; line-height: 18px; color: var(--beds-muted);
}

/* Range: 4px rail (brown/2), green fill up to the knob, Figma knob asset. */
.beds__range {
  --fill: 50%;
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer;
}
.beds__range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--green) 0 var(--fill), var(--hairline) var(--fill) 100%);
}
.beds__range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hairline); }
.beds__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--green); }
.beds__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 30px; margin-top: -12px; border: 0; background: url('/assets/beds/knob.svg') center / 30px 30px no-repeat;
}
.beds__range::-moz-range-thumb {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: url('/assets/beds/knob.svg') center / 30px 30px no-repeat;
}
.beds__range:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

/* ── Canvas ─────────────────────────────────────────────────────────────── */
.beds__stage { position: relative; }
.beds__canvas {
  display: block; max-width: none;
  background: var(--beds-bed); border: 1px solid var(--ink); border-radius: 4px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.beds__canvas.is-dragging { cursor: grabbing; touch-action: none; }
/* A block crop is picked: the bed takes the gesture so a box can be drawn. */
.beds__canvas.is-armed { cursor: crosshair; touch-action: none; }
.beds__canvas.is-resizing { touch-action: none; }
.beds__handle { touch-action: none; }
.beds__handle--nw, .beds__handle--se { cursor: nwse-resize; }
.beds__handle--ne, .beds__handle--sw { cursor: nesw-resize; }
.beds__handle--n, .beds__handle--s { cursor: ns-resize; }
.beds__handle--e, .beds__handle--w { cursor: ew-resize; }

/* Before the builder mounts, hold the 8 × 8 bed's square so nothing jumps. */
.beds__stage:not(.is-ready) { aspect-ratio: 1 / 1; background: var(--beds-bed); border: 1px solid var(--ink); border-radius: 4px; }
.beds__count.is-hint { font-family: var(--f-sans); font-weight: 700; color: var(--ink); }
.beds__crop-btn[aria-pressed="true"] { background: rgba(71, 124, 81, 0.12); border-radius: 8px; box-shadow: inset 3px 0 0 var(--green); }
.beds__failed {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-serif); font-size: 16px; color: var(--ink); text-align: center; padding: 16px;
}
.beds__canvas.is-drop { outline: 3px dashed var(--green); outline-offset: 3px; }
.beds__canvas:focus { outline: none; }
.beds__canvas text { font-family: var(--f-sans); pointer-events: none; }
/* A plant keeps the touch gesture (so it can be dragged); open bed still scrolls the page. */
.beds__plant { cursor: grab; outline: none; touch-action: none; }
.beds__plant:focus-visible .beds__focus { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; }
.beds__remove { cursor: pointer; }
.beds__remove:focus-visible circle { stroke: var(--ink); stroke-width: 2; }

.beds__bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 8px; }
.beds__count { font-family: var(--f-serif); font-size: 13px; line-height: 18px; color: var(--beds-muted); }
.beds__actions { display: flex; gap: 16px; }
.beds__textbtn {
  padding: 0; background: none; border: 0; line-height: 18px;
  font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.beds__textbtn:disabled { opacity: 0.35; cursor: default; text-decoration: none; }

/* ── LAYOUT: square foot gardening switch (app Figma Layout 2339:16093) ──── */
.beds__layout { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.beds__layout-title {
  padding-bottom: 12px; border-bottom: 1px solid rgba(197, 180, 159, 0.7);
  font-family: var(--f-sans); font-weight: 700; font-size: 13px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--beds-muted);
}
.beds__layout-row { display: flex; align-items: center; gap: 12px; }
.beds__layout-row[hidden] { display: none; }
.beds__layout-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.beds__layout-label { font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--ink); }
.beds__layout-caption { flex: 1; min-width: 0; font-family: var(--f-serif); font-size: 13px; line-height: 1.35; color: var(--beds-muted); }
/* toggle 499:1971: 68 × 28 on eggshell/2, slate/4 knob left with "No", green/4 knob right with "Yes" */
.beds__switch {
  position: relative; flex: none; width: 68px; height: 28px; padding: 0; margin: 2px;
  background: var(--manila); border: 0.5px solid #565b73; border-radius: 4px;
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: #565b73;
}
.beds__switch-knob { position: absolute; top: -0.5px; left: -0.5px; width: 28px; height: 28px; border-radius: 4px; background: #565b73; }
.beds__switch-text { position: absolute; top: 3.5px; left: 36px; }
.beds__switch[aria-checked="true"] { border-color: #62996a; color: #62996a; }
.beds__switch[aria-checked="true"] .beds__switch-knob { left: auto; right: -0.5px; background: #62996a; }
.beds__switch[aria-checked="true"] .beds__switch-text { left: 7px; }
.beds__switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* action_undo 548:2159: 56 × 28, yellow/3 */
.beds__undo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 28px; padding: 4px 16px;
  background: #f9cf4b; border: 0; border-radius: 4px;
}
.beds__undo img { width: 16px; height: 13px; }
.beds__undo:hover { background: #f6bc02; }
.beds__undo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.beds__undo[hidden] { display: none; }
.beds__crop-btn.is-off-grid .beds__crop-meta { font-style: italic; }
.beds__crop-btn.is-off-grid .beds__swatch { opacity: 0.45; }

/* ── Right column: instructions, search, crop rows ──────────────────────── */
.beds__how { font-family: var(--f-serif); font-size: 15px; line-height: 1.4; color: var(--beds-muted); }
.beds__search input {
  display: block; width: 100%; height: 46px; padding: 12px 14px; margin: 0;
  background: var(--beds-card); border: 0; border-radius: 12px;
  font-family: var(--f-sans); font-size: 16px; color: var(--ink);
}
.beds__search input::placeholder { color: var(--beds-muted); opacity: 1; }
.beds__search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.beds__crops {
  max-height: 281px; /* CropRows 874:13455: four 69px rows + 1px rules. Scrolls via .scroll-ind-box */
}
/* search_field sits 20 below the card (column gap 12 + 8), CropRows 4 under it (12 - 8). */
.beds__search { margin-top: 8px; }
.beds__crops-row { margin-top: -8px; }
.beds__crop { border-bottom: 1px solid rgba(197, 180, 159, 0.4); }
.beds__crop-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 4px 12px 0; background: none; border: 0; text-align: left;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.beds__crop-btn:hover .beds__crop-name { text-decoration: underline; text-underline-offset: 2px; }
.beds__crop-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px; }
.beds__crop-btn.is-dragging { opacity: 0.5; }
.beds__swatch { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.beds__crop-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.beds__crop-name { font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--ink); }
.beds__crop-meta { font-family: var(--f-serif); font-size: 16px; line-height: 1.3; color: var(--beds-muted); }
.beds__crop-add {
  flex: none; font-family: var(--f-sans); font-weight: 700; font-size: 22px; line-height: 1; color: var(--beds-muted);
  width: 28px; text-align: center;
}
.beds__empty { padding: 16px 0; font-family: var(--f-serif); font-size: 15px; color: var(--beds-muted); }

/* Floating ghost while a crop row is dragged toward the bed. */
.beds__ghost {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  font-family: var(--f-sans); font-weight: 700; font-size: 13px; color: var(--ink); text-align: center;
  box-shadow: 0 6px 16px rgba(41, 18, 8, 0.28);
}
.beds__ghost--block { border-radius: 8px; opacity: 0.85; }

/* ── Warnings / Ecosystem Impact tabbed card (main.css .tabbed idiom) ──── */
/* Fills, hairlines and --tab-shadow come from main.css's .tabbed__* rules; only
   Figma's type, padding and 8px radius are set here. The card sits directly under
   the instructions (Frame 491, 2026-09-15 layout), so it takes the column's own gap. */
#beds .tabbed__tab {
  padding: 7px 12px; gap: 6px; align-items: center; /* group_settings_tab: 39px tall */
  border-radius: 8px 8px 0 0;
  font-family: var(--f-sans); font-weight: 700; font-size: 20px; line-height: 24px; color: var(--beds-brown-6);
}
/* The active tab joins the body. main.css paints the body OVER every tab (so no
   tab shadow lands on it), which also draws the body's top hairline straight
   under the active tab. So the active tab alone sits one layer higher, dropped
   1px (main.css's margin-bottom: -1px) to cover that hairline with its own fill,
   and its shadow is clipped at its bottom edge so it still never falls on the body:
   the CSS form of the Figma tab-seam. */
#beds .tabbed__tab[aria-selected="true"] {
  padding-bottom: 8px; z-index: 40 !important;
  clip-path: inset(-32px -32px 0 -32px);
}
#beds .tabbed__body { border-radius: 0 8px 8px 8px; }
/* Focus ring for keyboard focus only, in the site's style; drawn inside the tab so
   the clip above cannot cut it. */
#beds .tabbed__tab:focus { outline: none; }
#beds .tabbed__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 8px 8px 0 0; }
.beds__tab-count {
  font-family: var(--f-serif); font-weight: 500; font-size: 12px; line-height: 1;
  min-width: 20px; padding: 3px 6px; border-radius: 999px; text-align: center;
  background: rgba(40, 18, 7, 0.08); color: var(--beds-brown-6);
}
.beds__tab-count:empty { display: none; }
.beds__tab-count[data-tone="warning"] { background: var(--beds-warn); color: var(--paper); }

.beds__panel { padding: 8px 14px 10px; }
.beds__scroller { max-height: 402px; }
/* Side by side, the card keeps Figma's 214px (874:13496) so the right column ends
   at 748 like the frame; longer feedback scrolls inside it. 194 + 18 padding + 2 border = 214. */
@media (min-width: 981px) { .beds__scroller { max-height: 194px; } }
.beds__scroller:focus-visible { outline-offset: 2px; }
.beds__panel[hidden] { display: none; }

.beds__row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; }
.beds__row + .beds__row { border-top: 1px solid rgba(197, 180, 159, 0.4); }
.beds__dot { width: 10px; height: 22px; flex: none; position: relative; }
.beds__dot::before {
  content: ''; position: absolute; left: 1px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--beds-muted);
}
.beds__row[data-tone="warning"] .beds__dot::before { background: var(--beds-warn); }
.beds__row[data-tone="good"] .beds__dot::before { background: var(--beds-good); }
.beds__row-col { flex: 1; min-width: 0; }
.beds__row-head { display: block; font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--beds-muted); margin-bottom: 4px; }
.beds__row[data-tone="warning"] .beds__row-head { color: var(--beds-warn); }
.beds__row-body { display: block; font-family: var(--f-serif); font-size: 16px; line-height: 1.35; color: var(--beds-muted); }

.beds__stats { margin: 4px 0 4px 20px; max-width: 310px; }
.beds__stat {
  display: flex; justify-content: space-between; align-items: center; padding: 12px 0;
  border-top: 1px solid rgba(197, 180, 159, 0.4);
}
.beds__stat:last-child { border-bottom: 1px solid rgba(197, 180, 159, 0.4); }
.beds__stat-k { font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--beds-muted); text-transform: uppercase; }
.beds__stat-v { font-family: var(--f-serif); font-size: 16px; color: var(--ink); }

/* Ecosystem Impact: the bed's Life list, as a compact grid of tiles, filtered to one state */
.beds__eco-loc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0 2px;
  font-family: var(--f-sans); font-size: 14px; line-height: 18px; color: var(--beds-muted);
}
.beds__eco-loc-label { font-weight: 700; }
.beds__eco-state {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 2px 22px 2px 8px; height: 26px;
  background: var(--paper) url('/assets/beds/caret-down.svg') no-repeat right 8px center / 6px 5px;
  border: 1px solid var(--hairline); border-radius: 6px;
  font-family: var(--f-sans); font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer;
}
.beds__eco-state:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.beds__eco-geo { font-size: 14px; }
.beds__eco-geo-status { flex-basis: 100%; font-family: var(--f-serif); font-size: 13px; }
.beds__eco-geo-status:empty { display: none; }
.beds__eco-intro { padding: 6px 0 2px; font-family: var(--f-serif); font-size: 14px; line-height: 1.35; color: var(--beds-muted); }
.beds__eco-group {
  padding: 10px 0 4px; font-family: var(--f-sans); font-weight: 700; font-size: 12px; line-height: 16px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--beds-muted);
  display: flex; justify-content: space-between; border-bottom: 1px solid rgba(197, 180, 159, 0.4);
}
/* No rules between entries (Corbin, 2026-09-17): the row gap does the
   separating, and the photo carries the row at 72 rather than 36. */
.beds__life-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
.beds__tile {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 0;
}
.beds__tile-photo { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--beds-tab-off); }
.beds__tile-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.beds__tile-name, .beds__tile-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.beds__tile-name { font-family: var(--f-sans); font-weight: 700; font-size: 13px; line-height: 16px; color: var(--ink); }
.beds__tile-meta { font-family: var(--f-serif); font-size: 12px; line-height: 15px; color: var(--beds-muted); }
.beds__source { padding: 10px 0 2px; font-family: var(--f-serif); font-size: 12px; line-height: 1.4; color: var(--beds-muted); }

/* ── Footer line + CTA ──────────────────────────────────────────────────── */
.beds__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; margin-top: 20px; text-align: center; } /* Frame 47, 20 under Frame 128 */
.beds__cover { font-family: var(--f-sans); font-weight: 700; font-size: 20px; line-height: 25px; color: #000; max-width: 560px; }
.beds__cta { padding: 10px 24px; font-weight: 700; line-height: 20px; letter-spacing: 0.01em; min-width: 222px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Below the 1440 column the centred lede reaches further left, so the sticker
   moves to the column edge where it cannot sit on the copy. */
@media (max-width: 1399px) {
  .beds__sticker { left: 0; top: -84px; }
}
@media (max-width: 1280px) {
  .beds__app { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 980px) {
  .beds__app { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 640px; margin-inline: auto; }
  .beds__sticker { left: auto; top: -64px; right: 8px; transform: scale(0.8); transform-origin: 100% 0; }
  .beds__crops { max-height: 280px; }
}
@media (max-width: 720px) {
  .beds__head { margin-bottom: 44px; }
  .beds__controls { flex-wrap: wrap; gap: 12px 20px; }
  .beds__dims { width: 100%; }
  .beds__time { flex-basis: 100%; }
  .beds__sticker { top: -58px; right: -6px; transform: scale(0.62); }
  /* The asset's own orientation points down-left, toward the slider under it. */
  .beds__sticker-arrow { left: 8px; top: 46px; transform: rotate(8deg); }
  .beds__cover { font-size: 18px; }
  #beds .tabbed__tab { font-size: 17px; padding: 10px; }
  .beds__crop-meta { font-size: 15px; }
  .beds__life-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .beds__ghost { box-shadow: none; }
}