/* ==========================================================================
   § 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). */
/* scroll-indicator.css is linked from index.html, not imported here: an
   @import carries whatever version is written into it, and /styles is cached
   immutable, so a pinned one never reached anybody holding the old file. */

#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: #ae472c;         /* Colors/Red/5 */
  --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: calc(var(--chapter-gap) - 93px); padding-bottom: var(--chapter-gap); }   /* 93 = what the hero's reserved bottom padding already contributes; § 020 is a pinned track with no top padding of its own */
  #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; }
/* Quarter-turn control, beside the remove button on a selected block. */
.beds__rotate { cursor: pointer; }
.beds__rotate:focus-visible circle { stroke: var(--ink); stroke-width: 2; }
.beds__rotate:hover circle { opacity: 0.86; }

.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: flex-start; gap: 10px;
}
/* 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; }
}
/* ── Crop picker ───────────────────────────────────────────
   Desktop keeps the plain search + list in the right column, so the sheet
   chrome and its trigger are hidden here and only switched on at phone width. */
.beds__edit-fab, .beds__sheet-head, .beds__scrim { display: none; }

@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; }

  /* Stacked, the column follows the app's bed builder (Ezina-app-0.40
     1888:8528): the sun slider sits above the bed and the dimensions below it,
     rather than both controls riding above. `display: contents` on the control
     row is what lets its two children be ordered independently here; the row's
     own gap moves onto the column. */
  /* One column for the whole app, so blocks from both halves can be ordered
     together: the square foot section has to land under the Warnings /
     Ecosystem Impact tabs, and those live in the right half.
     .beds__app keeps `position: relative` so the "Try it!" sticker, which is
     absolute, still has a containing block once the halves go to `contents`. */
  .beds__app {
    display: flex; flex-direction: column; position: relative;
    /* The grid rule above sets align-items: start, which in a column flex
       container sizes every child to its content instead of the column width -
       that squashed the slider to 129px and the bed to 300px. */
    align-items: stretch;
  }
  .beds__left, .beds__right, .beds__controls { display: contents; }

  /* These flex values were written for the old horizontal control row. In a
     column the shorthand applies to height instead, so neutralise them. */
  .beds__time, .beds__dims { flex: 0 0 auto; }

  .beds__sticker { order: 0; }
  .beds__time    { order: 1; }
  .beds__stage   { order: 2; }
  .beds__dims    { order: 3; width: 100%; }
  .beds__bar     { order: 4; }
  .beds__how     { order: 5; }
  .beds__tabs    { order: 6; }
  .beds__layout  { order: 7; }
  .beds__picker  { order: 8; }

  /* Edit button: 52px, inset 8 from the bed's bottom-right (app 1804:17061). */
  .beds__edit-fab {
    display: block; position: absolute; right: 8px; bottom: 8px; z-index: 4;
    width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer;
    line-height: 0;
  }
  .beds__edit-fab img { display: block; width: 52px; height: 52px; }
  .beds__edit-fab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }

  /* ── "Add a crop" bottom sheet (app 2349:6020) ───────────────────
     The trigger sits under the bed; the picker leaves the flow and becomes a
     sheet over a scrim. Transform, not `display`, so it can slide and so the
     search field keeps focus while it opens. */
  /* `display: block` here outranks the UA's [hidden] rule, so the hidden
     attribute must be honoured explicitly - otherwise the scrim renders at
     opacity 0 across the whole viewport and silently eats every tap. */
  .beds__scrim {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(41, 18, 8, 0.45); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .beds__scrim[hidden] { display: none; }
  .beds__scrim.is-open { opacity: 1; pointer-events: auto; }

  /* --beds-kb is how much of the viewport the on-screen keyboard covers;
     sec-beds-app.js measures it from visualViewport while the sheet is open.
     The sheet sits on top of the keyboard and shrinks to the space left, so
     the search field and the list it filters stay visible while typing. */
  .beds__picker {
    position: fixed; left: 0; right: 0; bottom: var(--beds-kb, 0px); z-index: 61;
    display: flex; flex-direction: column; gap: var(--s1);
    max-height: min(80dvh, calc(100dvh - var(--beds-kb, 0px) - 24px));
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--paper); border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -12px 32px rgba(41, 18, 8, 0.22);
    transform: translateY(101%);
    transition: transform .26s ease, bottom .18s ease, max-height .18s ease;
    pointer-events: none;
  }
  .beds__picker:focus-visible { outline: none; }
  /* With the keyboard up the home indicator is behind it, so the safe-area
     padding is dead space that costs a row of the list. */
  .beds__picker.has-kb { padding-bottom: 16px; }
  .beds__picker.is-open { transform: translateY(0); pointer-events: auto; }
  .beds__picker[hidden] { display: none; }

  .beds__sheet-head { display: block; }
  .beds__sheet-titles { display: flex; align-items: center; gap: var(--s3); padding-block: 12px; }
  .beds__sheet-title {
    flex: 1 0 0; margin: 0;
    font-family: var(--f-sans); font-weight: 500; font-size: 20px; line-height: 24px; color: var(--ink);
  }
  .beds__sheet-count { margin: 0; font-family: var(--f-serif); font-size: 13px; color: var(--beds-muted); white-space: nowrap; }
  /* 44px of touch target, pulled back in by negative margin so the close sits
     on the title's line rather than setting the row's height. */
  .beds__sheet-close {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 44px; height: 44px; margin: -10px -12px -10px 0;
    padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  }
  .beds__sheet-close:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; border-radius: 4px; }
  /* Drawn, not typed: no font has to carry a multiplication sign. */
  .beds__sheet-x { position: relative; display: block; width: 18px; height: 18px; }
  .beds__sheet-x::before, .beds__sheet-x::after {
    content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px;
    border-radius: 1px; background: currentColor;
  }
  .beds__sheet-x::before { transform: rotate(45deg); }
  .beds__sheet-x::after { transform: rotate(-45deg); }

  /* search_field: 44 tall, 4 radius, card-light on a subtle border. */
  .beds__picker .beds__search { margin-top: 0; }
  .beds__picker .beds__search input {
    height: 44px; padding: 12px; border-radius: var(--radius-sm);
    background: var(--card-light); border: 1px solid var(--hairline);
    font-family: var(--f-serif); font-size: 16px;
  }
  .beds__picker .beds__crops-row { margin-top: 12px; min-height: 0; }
  .beds__picker .beds__crops { max-height: none; }

  /* The list is what scrolls inside the sheet. */
  .beds__picker .scroll-ind-box { overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .beds__picker, .beds__scrim { transition: none; }
}
@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; }
}