/* § 020 · We help plan your garden (Ezina Dig scroll story)
 * Figma: intro 1116:3633, sequence "A v2" 1039:774 → 1042:778 (claude scratch).
 * Ported from docs/dig-scroll-story-prototype. Everything is namespaced `digstory`.
 *
 * Base rules = the stacked "stills" layout (narrow screens, reduced motion, no JS).
 * .digstory--pinned lays the section out on Figma's 1440 x 900 frame and scales it
 * to fit the viewport (never above 1, so it stays inside the 1440 content column).
 */

.digstory {
  /* Figma tokens used by the frames that main.css has no name for */
  --ds-text-secondary: #6d5441;   /* text/secondary = Brown/5 */
  --ds-card-light: #f1e9d8;       /* surface/card-light */
  --ds-brown-1: #f5ebde;          /* Colors/Brown/1 */
  --ds-inverse: #fff5dc;          /* text/inverse = Yellow/1 */
  --ds-row-divider: #e3dac8;      /* border/row-divider */
  --ds-canvas-bg: #f7f7f5;        /* garden/canvas-bg */
  --ds-bed-fill: #f0faf0;         /* garden/bed-fill */
  --ds-bed-border: #246e24;       /* garden/bed-border */
  --ds-water: #2563eb;            /* unbound in Figma on purpose: the app hardcodes it */
  --ds-red-4: #e4623e;            /* Colors/Red/4 */
  position: relative;
  isolation: isolate;
  color: var(--ink);
}

/* ── Shared pieces ─────────────────────────────────────────────────────── */

/* Figma "Tabs" text style: Cabinet Grotesk Extrabold 11, 18% tracking, caps */
.digstory-eyebrow {
  margin: 0; font-family: var(--f-sans); font-weight: 800; font-size: 11px; line-height: normal;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ds-text-secondary);
}

/* Photo + intro card (0%) */
.digstory__photo { margin: 0; position: relative; overflow: hidden; background: var(--manila-tab); }
.digstory__photo img { width: 100%; height: 100%; object-fit: cover; }
.digstory__credit {
  position: absolute; right: 12px; bottom: 10px; margin: 0;
  font-family: var(--f-serif); font-style: italic; font-weight: 500; font-size: 11px; line-height: 1.2;
  color: var(--paper); text-shadow: 0 1px 2px rgba(40, 18, 7, 0.6);
}
.digstory__intro {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px;
  background: var(--manila); border: 1px solid var(--hairline); border-radius: var(--radius);
}
/* Card title = local H3 (Cabinet Grotesk Extrabold 28) */
.digstory__intro-title { margin: 0; font-family: var(--f-sans); font-weight: 800; font-size: 28px; line-height: normal; color: var(--ink); }
.digstory__intro-body { margin: 0; font-family: var(--f-serif); font-size: 20px; line-height: normal; }

/* Layer chips (app DigShell): 42 px pills; the active one is green, icon only */
.digstory-chips { display: flex; gap: 8px; }
.digstory-chip {
  position: relative; width: 42px; height: 42px; padding: 0; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--ds-card-light); cursor: pointer;
  display: grid; place-items: center; transition: background-color .2s ease, border-color .2s ease;
}
.digstory-chip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 999px; }
.digstory-chip__icon { position: relative; width: 16px; height: 16px; }
.digstory-chip__icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.digstory-chip__icon img.is-on { opacity: 0; }
.digstory-chip[aria-current="step"] { background: var(--green); border-color: var(--green); }
.digstory-chip[aria-current="step"] .digstory-chip__icon img { opacity: 0; }
.digstory-chip[aria-current="step"] .digstory-chip__icon img.is-on { opacity: 1; }

/* Map box */
.digstory-map {
  position: relative; overflow: hidden; width: 100%; aspect-ratio: 808 / 640;
  background: var(--ds-canvas-bg); border: 1px solid var(--hairline); border-radius: 20px;
}
.digstory-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.digstory-map__labels { position: absolute; inset: 0; pointer-events: none; }
/* Bed labels sit inside their bed, on garden/bed-fill #f0faf0. text/secondary #6d5441 on it
   is 6.6:1. Name Cabinet Grotesk Bold 12, size Medium 12 (a step up from the app's 10 px
   Label so it stays readable when the frame scales down). */
.digstory-bed-label {
  position: absolute; left: 0; top: 0; margin: 0; display: flex; flex-direction: column; gap: 2px;
  font-family: var(--f-sans); font-weight: 500; font-size: 12px; line-height: 14px; white-space: nowrap;
  color: var(--ds-text-secondary); transform-origin: 0 0;
}
.digstory-bed-label span:first-child { font-weight: 700; }

/* toggle_map (app library component) */
.digstory-toggle {
  position: absolute; left: 15px; top: 15px; z-index: 2; display: flex; gap: 3px; padding: 3px;
  background: var(--ds-brown-1); border: 1px solid var(--hairline); border-radius: 10.5px;
}
/* The thumb sits on the simplified side (--pos 1, set once by sec-plan.js): the site shows no
   aerial imagery, so the toggle is a picture of the app's control. --on crossfades each icon. */
.digstory-toggle__thumb {
  position: absolute; left: 3px; top: 3px; width: 36px; height: 36px; border-radius: 8.25px;
  background: var(--green); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: translateX(calc(var(--pos, 0) * 39px)); pointer-events: none;
}
.digstory-toggle.is-snapping .digstory-toggle__thumb { transition: transform .22s ease; }
.digstory-toggle.is-snapping .digstory-toggle__icon { transition: opacity .22s ease; }
.digstory-toggle__btn {
  position: relative; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8.25px;
  background: transparent; cursor: default; display: grid; place-items: center;
}
.digstory-toggle__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.digstory-toggle__icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: calc(1 - var(--on, 0)); max-width: none; }
.digstory-toggle__icon--sat { width: 20px; height: 19.72px; }
.digstory-toggle__icon--simple { width: 22.15px; height: 22.14px; }
.digstory-toggle__icon.is-on { opacity: var(--on, 0); }

/* Garden canvas Off | Sun | Temp */
.digstory-overlay {
  position: absolute; right: 15px; top: 15px; z-index: 2; display: flex; gap: 2px; padding: 3px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 14px;
}
.digstory-overlay__seg {
  padding: 5px 10px; border: 0; border-radius: 11px; background: transparent; cursor: pointer;
  font-family: var(--f-sans); font-weight: 500; font-size: 10px; line-height: 12px; color: var(--ds-text-secondary);
}
.digstory-overlay__seg[aria-pressed="true"] { background: var(--green); color: var(--ds-inverse); }
.digstory-overlay__seg:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Hint for Sun | Temp (Figma 1330:10420). Yellow note in Source Serif SemiBold
   with the hand-drawn arrow reaching back up to the control. It hangs just
   under the control rather than over it: the map clips (overflow: hidden), so
   anything placed above the control's row is cut off, and anchoring to the
   stage instead would need pixel offsets that drift as the story scales to
   fit. Opacity is driven by sec-plan.js, so it arrives with the control on the
   plan frame and goes once the visitor switches overlay. The bob is 4px and
   stops under reduced motion. */
.digstory-hint {
  position: absolute; right: 15px; top: 51px; z-index: 3;
  display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.digstory-hint__note {
  background: #f6bc02; color: #000; border-radius: 6px; padding: 5px 9px;
  font-family: var(--f-serif); font-weight: 600; font-size: 13px; line-height: 1.2;
  white-space: nowrap;
}
/* Flipped so the drawn head points up at the control above it. */
.digstory-hint__arrow { display: block; width: 26px; height: auto; margin-right: 14px; transform: scaleY(-1); }
.digstory-hint.is-on { opacity: 1; animation: digstory-hint-bob 1.9s ease-in-out infinite; }
@keyframes digstory-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .digstory-hint.is-on { animation: none; }
}

/* Scale bar */
.digstory-scale { position: absolute; left: 15px; top: 69px; z-index: 1; height: 22px; pointer-events: none; }
.digstory-scale__label { display: block; font-family: var(--f-serif); font-weight: 500; font-size: 12px; line-height: 1; color: var(--ds-text-secondary); white-space: nowrap; }
.digstory-scale__rule { position: absolute; left: 0; top: 18px; width: 74px; height: 2px; background: var(--ds-text-secondary); }
.digstory-scale__rule::before, .digstory-scale__rule::after { content: ''; position: absolute; top: -5px; width: 2px; height: 8px; background: var(--ds-text-secondary); }
.digstory-scale__rule::before { left: 0; }
.digstory-scale__rule::after { right: 0; }

/* Step text */
.digstory-step__title { margin: 0; font-family: var(--f-serif); font-weight: 600; font-size: 40px; line-height: 1.2; color: var(--ink); }
.digstory-step__body { margin: 4px 0 0; font-family: var(--f-serif); font-size: 20px; line-height: normal; }
.digstory-step__chips-slot { height: 42px; margin: 16px 0 12px; }
.digstory-step__figs { margin-top: 40px; }
.digstory-step--tight .digstory-step__figs { margin-top: 20px; }

/* Figure rows: Cabinet Bold 13 caps label + "lists/Line item - Detail" value */
.digstory-figs { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.digstory-fig { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.digstory-fig dt {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 700; font-size: 13px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase;
}
.digstory-fig dd { margin: 0; font-family: var(--f-serif); font-size: 16px; line-height: normal; white-space: nowrap; }

.digstory-swatch { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.digstory-swatch--lot { height: 6px; border-radius: 3px; background: var(--ds-inverse); border: 1.5px solid var(--ink); }
.digstory-swatch--house { background: #bfbfe0; border: 2px solid #3e4253; }
.digstory-swatch--channel { height: 4px; border-radius: 2px; background: var(--ds-water); }
.digstory-swatch--cell { width: 12px; height: 12px; border-radius: 2px; background: var(--ds-water); }
.digstory-swatch--hotspot { border-radius: 8px; background: var(--ds-red-4); }
.digstory-swatch--bed { background: var(--ds-bed-fill); border: 2px solid var(--ds-bed-border); }
/* Tree crowns as the app draws them (treeMarkerStyle): on the lot a Brown/3 fill at 45% with a
   Brown/5 ring; next door or along the street a dashed Brown/3 ring and no fill. */
.digstory-swatch--tree { border-radius: 8px; background: rgba(170, 148, 126, 0.45); border: 2px solid #6d5441; }
.digstory-swatch--tree-near { border-radius: 8px; border: 2px dashed #aa947e; }

/* Class cards (app SunClassCards / MicroclimateClassCards) */
.digstory-classes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.digstory-classes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.digstory-classes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.digstory-class { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.digstory-class__card { margin: 0; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 12px; }
.digstory-class__name { display: flex; align-items: center; gap: 6px; font-family: var(--f-serif); font-size: 16px; line-height: normal; }
.digstory-class__pct { font-family: var(--f-sans); font-weight: 700; font-size: 16px; line-height: 20px; }
.digstory-class__def { margin: 0; font-family: var(--f-sans); font-size: 12px; line-height: 15px; color: var(--ds-text-secondary); }
.digstory-class__dot { flex: none; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.12); }
.digstory-class--full .digstory-class__card { background: #f0faf0; color: #2c5f39; }
.digstory-class--part .digstory-class__card { background: #fff5dc; color: #9a710a; }
.digstory-class--shade .digstory-class__card { background: #ddddf2; color: #3e4253; }
.digstory-class--shade .digstory-class__name { color: #262933; }
.digstory-class--pocket .digstory-class__card { background: #e6ecf8; color: #2f4e8f; }
.digstory-class--pocket .digstory-class__dot { background: #466ec8; }
.digstory-class--neutral .digstory-class__card { background: #ededf2; color: #3e4253; }
.digstory-class--neutral .digstory-class__dot { background: #96969e; }
.digstory-class--rise .digstory-class__card { background: #fbf1e0; color: #8a5f17; }
.digstory-class--rise .digstory-class__dot { background: #d29646; }
.digstory-class--warm .digstory-class__card { background: #fbe7e1; color: #a33a1c; }
.digstory-class--warm .digstory-class__dot { background: var(--ds-red-4); }

/* DataRows (app) */
.digstory-rows { margin: 12px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.digstory-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ds-row-divider); }
.digstory-row dt {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--f-sans); font-weight: 700; font-size: 13px; line-height: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-secondary);
}
.digstory-row dd { flex: 1 1 0; min-width: 0; margin: 0; text-align: right; font-family: var(--f-serif); font-size: 16px; line-height: normal; }
.digstory-explain { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -5px; padding: 0; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.digstory-explain img { width: 14px; height: 14px; }
.digstory-explain[aria-expanded="true"] { background: var(--ds-card-light); }
.digstory-note { margin: 8px 0 0; font-family: var(--f-serif); font-size: 14px; line-height: 1.45; color: var(--ds-text-secondary); }

.digstory-cta {
  display: inline-block; margin-top: 40px; padding: 12px 24px; border-radius: 999px;
  background: var(--green); color: var(--ds-inverse);
  font-family: var(--f-sans); font-weight: 800; font-size: 16px; line-height: 21px; text-decoration: none;
}
.digstory-cta:hover { background: var(--ink); color: var(--ds-inverse); text-decoration: none; }
.digstory-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }

/* citation italic */
.digstory-source { margin: 16px 0 0; font-family: var(--f-serif); font-weight: 500; font-style: italic; font-size: 12px; line-height: normal; color: var(--ds-text-secondary); }

/* ══════════════════════════════════════════════════════════════════════
   Stills (base): narrow screens, reduced motion, no JS
   ══════════════════════════════════════════════════════════════════════ */
/* Spacing (Figma Frame 39, 874:12606): this frame sits 60 px below the beds frame, and
   the § 030 eyebrow sits 120 px below it (60 gap + 60 top pad). Desktop: #beds' 59 px
   bottom padding plus 1 px here gives the first gap and #identify's 120 px top padding owns the second
   (sec-identify.css), so this section adds none. Below 981 px the neighbours fall back to
   main.css .section padding, so this section carries the same rhythm (59 / 40 px). */
.digstory { padding-block: 59px; }
@media (max-width: 720px) { .digstory { padding-block: 40px; } }
@media (min-width: 981px) { .digstory { padding-block: 1px 0; } }   /* 59 + 1 = Figma's 60 */
.digstory__stage { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; }
.digstory__photo { aspect-ratio: 3 / 2; border-radius: 20px; }
/* the intro card overlaps the photo's foot, so the credit moves to the top corner */
.digstory__credit { top: 10px; bottom: auto; }
.digstory__intro { margin: -56px 12px 8px; padding: 24px; }
.digstory-br { display: none; }
/* The shared map, the chips and the view toggle only exist in the pinned story */
.digstory__stage > .digstory-map, .digstory-chips { display: none; }
.digstory-step { padding-block: 40px; border-bottom: 1px solid var(--ds-row-divider); }
.digstory-step:last-child { border-bottom: 0; }
.digstory-step__chips-slot { display: none; }
.digstory-step__head .digstory-eyebrow { margin-bottom: 12px; }
.digstory-step__title { font-size: clamp(28px, 7vw, 40px); }
.digstory-step__body { margin-top: 8px; font-size: 18px; }
.digstory-step__figs, .digstory-step--tight .digstory-step__figs { margin-top: 24px; }
.digstory-fig dd { white-space: normal; text-align: right; }
.digstory-stills-map { margin-top: 24px; }
.digstory-stills-map .digstory-toggle { display: none; }
.digstory-step .digstory-cta { margin-top: 32px; }

@media (max-width: 480px) {
  .digstory__intro { margin: -40px 8px 0; padding: 20px; }
  .digstory__intro-title { font-size: 24px; }
  .digstory__intro-body { font-size: 18px; }
  .digstory__photo { aspect-ratio: 4 / 3; }
  .digstory-classes--3 { gap: 6px; }
  .digstory-classes--3 .digstory-class__card { padding: 8px; }
  .digstory-classes--3 .digstory-class__name { font-size: 14px; }
  .digstory-fig dt, .digstory-row dt { font-size: 12px; letter-spacing: 0.06em; }
  .digstory-row dt { white-space: normal; }
  .digstory-overlay { right: 8px; top: 8px; }
  /* Plan map on a phone: the bed cluster fills the top of the box, so the overlay toggle and
     the scale bar move to the empty bottom-left corner instead of covering the bed tops */
  [data-step="6"] .digstory-stills-map .digstory-overlay { top: auto; right: auto; left: 8px; bottom: 8px; }
  [data-step="6"] .digstory-stills-map .digstory-scale { top: auto; left: 10px; bottom: 44px; }
}

/* Wide stills (reduced motion on desktop): text left, map right, like the frames */
@media (min-width: 1024px) {
  .digstory--stills .digstory__stage { max-width: calc(1312px + var(--gutter) * 2); }
  .digstory--stills .digstory__photo { aspect-ratio: 1440 / 700; }
  .digstory--stills .digstory__intro { position: absolute; left: calc(var(--gutter) + 64px); top: 130px; width: 440px; margin: 0; padding: 32px; }
  .digstory--stills .digstory__stage { position: relative; }
  .digstory--stills .digstory-step {
    display: grid; grid-template-columns: 440px minmax(0, 808px); grid-template-rows: auto 1fr auto;
    grid-template-areas: "head map" "figs map" ". src"; column-gap: 64px; justify-content: center; padding-block: 64px;
  }
  .digstory--stills .digstory-step__head { grid-area: head; }
  .digstory--stills .digstory-step__figs { grid-area: figs; align-self: start; }
  .digstory--stills .digstory-stills-map { grid-area: map; margin: 0; align-self: start; }
  .digstory--stills .digstory-source { grid-area: src; }
  .digstory--stills .digstory-step__title { font-size: 40px; }
  .digstory--stills .digstory-step__body { font-size: 20px; margin-top: 4px; }
  .digstory--stills .digstory-br { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════
   Pinned: Figma's 1440 x 900 frame, scaled to the viewport
   ══════════════════════════════════════════════════════════════════════ */
.digstory--pinned { padding-block: 0; }
.digstory--pinned .digstory__track { position: relative; height: 800vh; }
.digstory--pinned .digstory__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.digstory--pinned .digstory__stage {
  position: absolute; left: 50%; top: 50%; width: 1440px; height: 900px; max-width: none; margin: 0; padding: 0; display: block;
  transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: 50% 50%; z-index: 1;
}
/* The photo is moved into the pin so it covers the whole viewport, not just the scaled stage.
   It sits under the stage (the stage's transform makes it one stacking context), so the
   intro card can sit on it; the map box stays transparent until the photo has closed onto it. */
.digstory--pinned .digstory__photo { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; will-change: clip-path, opacity; }
.digstory--pinned .digstory__credit { top: auto; right: 20px; bottom: 16px; }
.digstory--pinned .digstory__intro { position: absolute; left: 64px; top: 130px; width: 440px; margin: 0; padding: 32px; z-index: 5; }
.digstory--pinned .digstory__stage > .digstory-map { display: block; position: absolute; left: 568px; top: 130px; width: 808px; height: 640px; aspect-ratio: auto; }
.digstory--pinned .digstory-chips { display: flex; position: absolute; left: 64px; top: 160px; z-index: 3; }
.digstory--pinned .digstory__steps { position: absolute; inset: 0; pointer-events: none; }
/* Steps that aren't on screen are transparent, never visibility:hidden or inert,
   so a screen reader can still read every step in order. Focus scrolls to its step. */
.digstory--pinned .digstory-step { position: absolute; left: 64px; top: 130px; width: 440px; padding: 0; border: 0; opacity: 0; will-change: opacity, transform; }
.digstory--pinned .digstory-step.is-live { pointer-events: auto; }
.digstory--pinned .digstory-step__head .digstory-eyebrow { margin: 0; }
.digstory--pinned .digstory-step__chips-slot { display: block; }
.digstory--pinned .digstory-step__title { font-size: 40px; }
.digstory--pinned .digstory-step__body { font-size: 20px; margin-top: 4px; }
.digstory--pinned .digstory-step__figs { margin-top: 40px; }
.digstory--pinned .digstory-step--tight .digstory-step__figs { margin-top: 20px; }
.digstory--pinned .digstory-fig dd { white-space: nowrap; text-align: left; }
.digstory--pinned .digstory-br { display: inline; }
.digstory--pinned .digstory-source { position: absolute; left: 504px; top: 656px; margin: 0; white-space: nowrap; }
.digstory--pinned .digstory-stills-map { display: none; }