/* ==========================================================================
   § 030 · Identify plants, diseases, and insects (+ 030.21 treatment plans)
   Figma gjYZkxeha34OwmNUr91aQn · ITER 5 (329:3650) › Frame 39 ›
   "Section/02 How it works" 874:12608 + "treatment_plans" 1116:5387.
   Markup: index.html @@SECTION identify · Logic: scripts/sec-identify.js

   This file also carries the small `.hp-*` kit that § 030 (#identify),
   § 040 (#idflow) and § 050 (#features) share: the 1440 content column, the H2 section head,
   and the separate tabbed step cards (3 × 464 columns, 24 gaps). The other two
   section files only add what is specific to them.
   ========================================================================== */

.hp {
  --hp-muted: #6d5441;      /* text/secondary */
  --hp-col-gap: 24px;       /* spacing/5, the grid gap in Figma and draft 1064:3053 */
  --hp-card-shadow: 8px -3px 13px rgba(41, 18, 8, 0.14);  /* Shadow/Card */
  --hp-field-border: #aa947e;   /* colors/brown-3, the input border */
  --hp-field-ph: #8f755e;       /* colors/brown-4, the placeholder */
}

/* The site's content column is 1440 wide on these sections (Frame 39 children
   run edge to edge), wider than the shared .wrap's 1280. */
.hp-wrap {
  width: 100%; max-width: calc(1440px + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}

/* ── Section head: local text style H2 (Source Serif 4 SemiBold 60 / 1.2),
      12px eyebrow gap, Cabinet Light 22 subtitle in text/secondary. ───────── */
.hp .hp-head { max-width: 1280px; margin-bottom: var(--s8); }
.hp .hp-head .eyebrow { color: var(--hp-muted); opacity: 1; margin-bottom: var(--s3); }
.hp .hp-head .sec-title {
  font-weight: 600; font-size: clamp(2.5rem, 3vw + 1.25rem, 3.75rem);
  line-height: 1.2; letter-spacing: 0; text-wrap: balance;
}
.hp .hp-head .lede { color: var(--hp-muted); opacity: 1; max-width: 720px; margin-top: var(--s3); }

/* ── Card row: three separate cards, each with its own tab ──────────────── */
.hp-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hp-col-gap); isolation: isolate;
}

/* Tab: Figma Tab/* is 32 tall, 16/20 side padding, 8 gap. */
.hp-card > .tab {
  height: 32px; padding: 0 20px 0 16px; gap: var(--s2);
  align-items: center; line-height: 1; white-space: nowrap;
}

/* Folder shadow rides on a box UNDER the tab (the Figma "folder-shadow"
   rectangle) so the folder, which paints over the tab, never casts its
   shadow onto it. The wrap sets no z-index, so its ::before (z0), the tab
   (z1) and the folder (z2) all stack in the card's context. */
.hp-folder-wrap { position: relative; flex: 1; display: flex; width: 100%; }
.hp-folder-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  box-shadow: var(--hp-card-shadow);
}
.hp-card .folder {
  position: relative; z-index: 2; flex: 1; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  padding: var(--s6);
}
/* Tab, folder and the shadow box under them all take surface/card-light
   (#f1e9d8) - what Figma 874:12608 binds every card surface to. */
.hp-card > .tab,
.hp-card .folder,
.hp-folder-wrap::before { background: var(--card-light); }
/* Card titles = local H3, Cabinet Grotesk Extrabold 28. */
.hp-card .card__title { font-weight: 800; line-height: 1.1; }
.hp-card .card__body { margin: 0; color: var(--hp-muted); opacity: 1; }

/* Phone peeking above a card. The exports are 851 × 1078 (2x), shadow stripped
   (see below); at a 464 column the device sits 26px in and the card's tab
   starts 435px down it, so the image is 91.7% wide, 5.15% in, and tucks
   104/464 = 22.4% of the column width behind the card (margin % = width). */
.hp-phone {
  display: block; width: 91.7%;
  margin: 0 0 -22.4% 5.15%; position: relative; z-index: 0;
  pointer-events: none; user-select: none;
}
/* The Figma export clipped its baked shadow at the image edge (a hard line), so the
   shadow was stripped from the PNGs and is drawn here, following the phone outline. */
.hp-phone__img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(10px 12px 18px rgba(41, 18, 8, 0.22)); }

/* Text link: only the words are underlined, never the arrow. The arrow is an
   inline-block so the anchor's own hover underline can't reach it. */
.hp-link {
  display: inline-flex; align-items: baseline; gap: var(--s1);
  font-family: var(--f-sans); font-weight: 700; font-size: 16px; letter-spacing: 0.01em; color: var(--ink);
}
.hp-link:hover { text-decoration: none; }
.hp-link__words { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hp-link:hover .hp-link__words { text-decoration-thickness: 2px; }
.hp-link__arrow { display: inline-block; }

/* ── § 030 specifics ─────────────────────────────────────────────────────── */
#identify .hp-head { margin-bottom: 68px; }   /* 8 spacer + 60 top pad in 874:12608 */

/* Vertical rhythm from Frame 39 (874:12606) after Corbin's spacing pass. The
   frames stack with 60px gaps and the pinned § 020 stage above has no bottom
   padding, so on desktop the sections carry the gaps themselves:
     § 020 stage bottom → § 030 eyebrow   60 gap + 60 top pad = 120
     step cards → 030.21 tab               48 bottom pad + 60 gap = 108
     030.21 bottom → § 040 eyebrow         60 gap + § 040's own 96 top pad
   (§ 040 and § 050 carry the rest; see sec-idflow.css / sec-features.css.) */
@media (min-width: 981px) {
  #identify { padding-top: var(--chapter-gap); padding-bottom: calc(var(--chapter-gap) - 96px); }   /* 96 = #idflow's own lead-in (its section padding-top; the sticky wrap adds none above) */
}

/* The credit sits inside the 108px cards → 030.21 gap: 12 (margin) + 52
   (three 17.4px lines at its 880px measure, held by min-height so a shorter
   credit keeps the rhythm) + 44 (.hp-plans margin-top) = 108. */
.hp-credit {
  font-family: var(--f-serif); font-style: italic; font-size: 12px; line-height: 1.45;
  color: var(--hp-muted); text-align: center; max-width: 880px; margin: var(--s6) auto 0;
  min-height: 52px;
}
.hp-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ── § 030 step hover (ported from the live #how, origin/main main.css
      `.cards-row--phones`) ──────────────────────────────────────────────────
   The hovered step grows 3.3% and its siblings shrink 3.3% (the "20% both
   ways" note on the live comment, cut by a third then halved), and the
   siblings take a 30% brown-6 veil over phone, tab and folder. Same easing
   and timing as live: transform .4s cubic-bezier(.22,.61,.36,1), veil .4s
   ease. Row layout + real fine-pointer hover + motion OK only; the live CSS
   has no :focus-within variant (the cards hold nothing focusable), so none
   is added here. The veils are inset fills that honour each part's radius
   and never tint the transparent margin around the phone export. */
.hp-row--steps .hp-phone::after,
.hp-row--steps .tab::after,
.hp-row--steps .folder::after {
  content: ""; position: absolute; z-index: 3; opacity: 0; pointer-events: none;
  background: var(--brown-band);
}
.hp-row--steps .tab::after, .hp-row--steps .folder::after { inset: 0; border-radius: inherit; }
/* The phone veil is masked by the export's own alpha, so it tints exactly the
   device (and, faintly, its baked shadow) and never the empty corners. */
.hp-row--steps .hp-phone::after {
  inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
#identify-name .hp-phone::after { -webkit-mask-image: url('/assets/Images/home-identify-camera.webp?v=iter5-8'); mask-image: url('/assets/Images/home-identify-camera.webp?v=iter5-8'); }
#identify-treat .hp-phone::after { -webkit-mask-image: url('/assets/Images/home-identify-treat.webp?v=iter5-9'); mask-image: url('/assets/Images/home-identify-treat.webp?v=iter5-9'); }
#identify-schedule .hp-phone::after { -webkit-mask-image: url('/assets/Images/home-identify-schedule.webp?v=iter5-9'); mask-image: url('/assets/Images/home-identify-schedule.webp?v=iter5-9'); }
.hp-row--steps .tab { position: relative; }

@media (min-width: 981px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hp-row--steps > .hp-card {
    transform-origin: center center;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
  }
  .hp-row--steps .hp-phone::after,
  .hp-row--steps .tab::after,
  .hp-row--steps .folder::after { transition: opacity .4s ease; }
  .hp-row--steps:hover > .hp-card { transform: scale(0.967); }
  .hp-row--steps > .hp-card:hover { transform: scale(1.033); z-index: 6; }
  .hp-row--steps:hover > .hp-card:not(:hover) .hp-phone::after,
  .hp-row--steps:hover > .hp-card:not(:hover) .tab::after,
  .hp-row--steps:hover > .hp-card:not(:hover) .folder::after { opacity: 0.30; }
}

/* 030.21 · Treatment plans: count column (one grid column wide) + scroll row */
.hp-plans { margin-top: 44px; }
.hp-plans .folder.hp-plans__folder {
  display: grid; grid-template-columns: calc((100% - var(--hp-col-gap) * 2) / 3) minmax(0, 1fr);
  gap: 0; padding: 0; align-items: stretch;
}
.hp-plans__count { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6); min-width: 0; }
.hp-plans__scrollrow {
  display: flex; align-items: flex-start; gap: var(--s5); min-width: 0;
  padding: var(--s6); border-left: 1px solid var(--hairline);
}
.hp-plans__box {
  flex: 1; min-width: 0; height: 200px; overflow-y: auto; position: relative;
  overscroll-behavior: contain; scrollbar-width: none; border-radius: 2px;
}
.hp-plans__box::-webkit-scrollbar { display: none; }
.hp-plans__box:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.hp-plans__list { font-family: var(--f-serif); font-size: 15px; line-height: 1.55; color: var(--hp-muted); }
.hp-plans__list li { display: inline; }
/* "Name  ·  Name": the separator sticks to the name before it; the HTML
   whitespace between items is the line-break opportunity. */
.hp-plans__list li:not(:last-child)::after { content: "\00a0\00a0·\00a0"; }

/* ── 030.21 search (input:q 1285:16685, result chip 1286:3165) ──────────
   The field and its matches sit under the body copy, on the count column's
   own 8px rhythm. A matched name is marked in the list beside it with a chip
   drawn in box-shadow rather than padding, so marking never reflows the line
   boxes sec-identify.js has measured for the indicator. */
.hp-plans__search { display: flex; flex-direction: column; gap: var(--s2); }
.hp-plans__q {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--manila); border: 1px solid var(--hp-field-border);
  font-family: var(--f-serif); font-size: 17px; line-height: normal;
  color: var(--ink); -webkit-appearance: none; appearance: none;
}
.hp-plans__q::placeholder { color: var(--hp-field-ph); opacity: 1; }
.hp-plans__q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hp-plans__q:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.hp-plans__hits { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.hp-plans__hits:empty { display: none; }
.hp-plans__hit {
  display: block; padding: 4px 6px; border: 0; border-radius: var(--radius-sm);
  background: var(--mustard); color: #000; cursor: pointer; text-align: left;
  font-family: var(--f-serif); font-size: 15px; line-height: 1.55;
}
.hp-plans__hit:hover { background: color-mix(in srgb, var(--mustard) 84%, var(--ink)); }
.hp-plans__hit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* "N more" opens the rest in place. Heavier than the body around it so it
   reads as the control it is. */
.hp-plans__more {
  align-self: flex-start; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--f-serif); font-weight: 600; font-size: 13px; color: var(--hp-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.hp-plans__more:hover { color: var(--ink); }
.hp-plans__more:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Expanded, the chips can outgrow the column, so cap and scroll them. */
.hp-plans__hits.is-expanded { max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }

/* The marked name in the list beside the field. */
.hp-plans__list li.is-hit {
  background: var(--mustard); color: #000; border-radius: 2px;
  box-shadow: 0 0 0 3px var(--mustard);
}

/* Mustard scroll indicator (1116:5399): 2px track, 10 ticks, 14 × 30 thumb,
   letter range under the track. sec-identify.js positions the thumb. */
.hp-plans__ind { position: relative; flex: 0 0 20px; height: 200px; touch-action: none; }
.hp-plans__ind::before {
  content: ""; position: absolute; left: 6px; top: 0; width: 8px; height: 201px; opacity: 0.4;
  background: repeating-linear-gradient(to bottom, var(--hairline) 0 1px, transparent 1px 22.222px);
}
.hp-plans__track {
  position: absolute; left: 9px; top: 0; width: 2px; height: 200px;
  background: var(--hairline); opacity: 0.6; cursor: pointer;
}
.hp-plans__ind::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: pointer; }
.hp-plans__thumb {
  position: absolute; left: 3px; top: 0; z-index: 1; width: 14px; height: 30px;
  background: var(--mustard); border: 1px solid var(--ink); border-radius: 2px;
  cursor: grab; will-change: transform;
}
.hp-plans__thumb::before {
  content: ""; position: absolute; left: 3px; top: 11px; width: 6px; height: 5px; opacity: 0.6;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px);
}
.hp-plans__ind.is-dragging .hp-plans__thumb { cursor: grabbing; }
.hp-plans__range {
  position: absolute; top: 203px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-serif); font-weight: 500; font-size: 9px; letter-spacing: 0.12em;
  color: var(--ink); opacity: 0.55; white-space: nowrap; pointer-events: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hp-row { grid-template-columns: minmax(0, 1fr); gap: var(--s7); max-width: 520px; margin-inline: auto; }
  .hp-plans .folder.hp-plans__folder { grid-template-columns: minmax(0, 1fr); }
  .hp-plans__count { padding-bottom: var(--s5); }
  .hp-plans__scrollrow { border-left: none; border-top: 1px solid var(--hairline); padding-top: var(--s5); }
  .hp-plans__box, .hp-plans__ind { height: 260px; }
  .hp-plans__track { height: 260px; }
  .hp-plans__ind::before { height: 261px; background: repeating-linear-gradient(to bottom, var(--hairline) 0 1px, transparent 1px 28.889px); }
  .hp-plans__range { top: 263px; }
}
@media (max-width: 720px) {
  .hp .hp-head, #identify .hp-head { margin-bottom: 28px; }
  .hp .hp-head .sec-title { font-size: 36px; font-weight: 600; line-height: 1.15; }
  .hp-card .folder { padding: var(--s5); }
  .hp-plans__count { padding: var(--s5) var(--s5) var(--s4); }
  .hp-plans__scrollrow { padding: var(--s4) var(--s4) var(--s6) var(--s5); gap: var(--s4); }
}