/* ═══════════════════════════════════════════════════════════════════════
   HOME · the tile that became a section   (b224)
   Loaded last, after shop-c.css.

   Gated on `body.hm-on`, set by show() for the Home view only. Every rule
   below is either prefixed with that class or confined to the `.hm-`
   namespace, so nothing here can reach another screen.

   NOTHING HERE IS NEW CHROME. The hero, the fold, the Expand/Collapse pair
   and the topbar inset are SECTION_CHROME R1-R5 and are copied from
   pets-c.css by value, not by import — canon is Pets and this file must be
   able to fail the benchmark on its own if it drifts.

   THE ONE NEW COMPONENT is the emergency rail: two call buttons that are not
   behind a chevron, because Home's urgent case is a burst pipe.
   ═══════════════════════════════════════════════════════════════════════ */

body.hm-on {
  /* The tile tokens the other four sections already agree on. A fifth set is
     how they drift apart. */
  --hm-tile-bg: rgba(255, 255, 255, 0.72);
  --hm-tile-bd: rgba(20, 16, 38, 0.07);
  --hm-shadow: 0 1px 3px rgba(20, 20, 40, 0.05);
  --hm-rad: 16px;
  --hm-field-bd: rgba(20, 16, 38, 0.10);
  --hm-chip-bd: rgba(20, 16, 38, 0.22);
  --hm-quiet-bg: rgba(120, 120, 128, 0.09);
  /* The call button. Garage uses this green at the roadside, School for the
     office, Pets for the vet. Home's is the claims line. Same green. */
  --hm-call-bg: #16704A;
  --hm-call-tx: #ffffff;
  --hm-ok-ink: #1F7A52;   --hm-ok-bg: rgba(31, 122, 82, 0.10);
  --hm-warn-ink: #A0620C; --hm-warn-bg: rgba(232, 147, 12, 0.14);
  --hm-bad-ink: #B3312A;  --hm-bad-bg: rgba(179, 49, 42, 0.12);
  /* THE SEVEN FOLD TINTS, defined here and passed to the renderer by name.
     b205's lesson in School: six tint names handed in from JavaScript and
     defined nowhere lost their icon colour and nothing said so. Each of these
     is defined in all three theme blocks. */
  --hm-t-ins: rgba(232, 147, 12, 0.18);   --hm-i-ins: #A0620C;
  --hm-t-mort: rgba(110, 86, 207, 0.16);  --hm-i-mort: #5B4FE0;
  --hm-t-warr: rgba(0, 138, 132, 0.16);   --hm-i-warr: #0A6F6A;
  --hm-t-task: rgba(10, 108, 255, 0.14);  --hm-i-task: #0A5BD3;
  --hm-t-prop: rgba(96, 150, 60, 0.20);   --hm-i-prop: hsl(100 48% 30%);
  --hm-t-note: rgba(120, 120, 128, 0.14); --hm-i-note: #5C6068;
  --hm-t-doc: rgba(120, 120, 128, 0.14);  --hm-i-doc: #5C6068;
  /* Home's identity, hue 100. The Diary recipe — three values from one number.
     DIARY_COLOUR_PLAN.md. */
  --hm-fill: hsl(100 70% 93%);
  --hm-edge: hsl(100 58% 78%);
  --hm-ink: hsl(100 48% 34%);
  /* The scrim under the address on the photograph. Fixed, not themed: it sits
     on a photograph, not on the app's ground. */
  --hm-veil: linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.20) 48%, transparent 74%);
}
html[data-theme="dark"] body.hm-on {
  --hm-tile-bg: rgba(255, 255, 255, 0.07);
  --hm-tile-bd: rgba(255, 255, 255, 0.12);
  --hm-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --hm-field-bd: rgba(255, 255, 255, 0.14);
  --hm-chip-bd: rgba(255, 255, 255, 0.30);
  --hm-quiet-bg: rgba(255, 255, 255, 0.08);
  --hm-call-bg: #2F8F5F;
  --hm-ok-ink: #7BE0AE;   --hm-ok-bg: rgba(123, 224, 174, 0.14);
  --hm-warn-ink: #F0B45C; --hm-warn-bg: rgba(240, 180, 92, 0.16);
  --hm-bad-ink: #FF8A80;  --hm-bad-bg: rgba(255, 138, 128, 0.14);
  --hm-t-ins: rgba(255, 180, 80, 0.22);   --hm-i-ins: #F0B45C;
  --hm-t-mort: rgba(168, 150, 240, 0.22); --hm-i-mort: #B9A9FF;
  --hm-t-warr: rgba(90, 220, 214, 0.20);  --hm-i-warr: #6FE0DA;
  --hm-t-task: rgba(90, 166, 255, 0.20);  --hm-i-task: #7FB4FF;
  --hm-t-prop: rgba(150, 220, 110, 0.20); --hm-i-prop: hsl(100 72% 76%);
  --hm-t-note: rgba(255, 255, 255, 0.10); --hm-i-note: rgba(255, 255, 255, .62);
  --hm-t-doc: rgba(255, 255, 255, 0.10);  --hm-i-doc: rgba(255, 255, 255, .62);
  /* NOT the light swatch dimmed or made translucent — that was the b212
     night-mode bug. Its own three values. */
  --hm-fill: hsl(100 38% 19%);
  --hm-edge: hsl(100 45% 40%);
  --hm-ink: hsl(100 72% 80%);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.hm-on {
    --hm-tile-bg: rgba(255, 255, 255, 0.07);
    --hm-tile-bd: rgba(255, 255, 255, 0.12);
    --hm-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --hm-field-bd: rgba(255, 255, 255, 0.14);
    --hm-chip-bd: rgba(255, 255, 255, 0.30);
    --hm-quiet-bg: rgba(255, 255, 255, 0.08);
    --hm-call-bg: #2F8F5F;
    --hm-ok-ink: #7BE0AE;   --hm-ok-bg: rgba(123, 224, 174, 0.14);
    --hm-warn-ink: #F0B45C; --hm-warn-bg: rgba(240, 180, 92, 0.16);
    --hm-bad-ink: #FF8A80;  --hm-bad-bg: rgba(255, 138, 128, 0.14);
    --hm-t-ins: rgba(255, 180, 80, 0.22);   --hm-i-ins: #F0B45C;
    --hm-t-mort: rgba(168, 150, 240, 0.22); --hm-i-mort: #B9A9FF;
    --hm-t-warr: rgba(90, 220, 214, 0.20);  --hm-i-warr: #6FE0DA;
    --hm-t-task: rgba(90, 166, 255, 0.20);  --hm-i-task: #7FB4FF;
    --hm-t-prop: rgba(150, 220, 110, 0.20); --hm-i-prop: hsl(100 72% 76%);
    --hm-t-note: rgba(255, 255, 255, 0.10); --hm-i-note: rgba(255, 255, 255, .62);
    --hm-t-doc: rgba(255, 255, 255, 0.10);  --hm-i-doc: rgba(255, 255, 255, .62);
    --hm-fill: hsl(100 38% 19%);
    --hm-edge: hsl(100 45% 40%);
    --hm-ink: hsl(100 72% 80%);
  }
}

/* THE GROUND. style.css paints these on the old flat surface; the aurora comes
   from the dv2 tokens now, so those fills have to stand down or they sit on top
   of it as an opaque slab. This is the SIXTH time — #shops-box in Profile,
   #trip-list in Travel, #car-hub in Garage, #school-hub in School, #pets-hub in
   Pets, and now here. */
body.hm-on #view-property,
body.hm-on .pets-body,
body.hm-on #property-hub {
  background: transparent;
}

body.hm-on #property-hub { padding: 0 16px 28px; }

/* ── R1 · the topbar inset ──────────────────────────────────────────────
   Home was built from #view-car's markup and inherited its fault: bare
   .back-btn children in a space-between row go all the way to the edge.
   Garage fixes it the same way (garage-c.css) and Shop had to as well.
   Fourth section, same one-line fix — the benchmark is what caught it. */
body.hm-on #view-property .topbar-row {
  padding-left: 16px;
  padding-right: 16px;
  gap: 8px;
}

/* ── THE PHOTOCARD · R2 ─────────────────────────────────────────────────*/
body.hm-on .hm-wrap { padding-top: 14px; }
body.hm-on .hm-card {
  position: relative; border-radius: 20px; overflow: hidden; height: 192px;
  box-shadow: var(--hm-shadow); background: #2b3550;
}
body.hm-on .hm-hero {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0;
  background-size: cover; background-position: center; cursor: pointer;
}
/* A household with no photograph still gets a PICTURE, not a grey box: the card
   is a photograph by design, so the placeholder has to hold that shape. Same
   rule pets-c.css:211 sets for a pet. Ritesh approved the drawn dusk house as
   the default, 31 Aug 2026. */
body.hm-on .hm-hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.hm-on .hm-veil { position: absolute; inset: 0; pointer-events: none; background: var(--hm-veil); }
/* On the photograph, white is correct in BOTH themes: the ground is the picture
   and the veil, not the page. Defect 1 — "Tap to set where this is" is now a
   real button (data-home-edit), not a caption pointer-events left to pass
   through to the photo beneath it. */
body.hm-on .hm-who {
  position: absolute; left: 16px; bottom: 14px; right: 16px; color: #fff;
  border: 0; background: none; padding: 0; margin: 0; text-align: left;
  font-family: inherit; cursor: pointer;
}
body.hm-on .hm-who b {
  display: block; font-size: 22px; font-weight: 700; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.hm-on .hm-who span {
  display: block; font-size: 13.5px; font-weight: 500; opacity: .92; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* R2 — 34x34, round, top-left, ON the photograph, 44px of clear corner. The
   clear-space rule is the one that matters: b221 passed a burger floating in
   white space ABOVE the picture because the rule asserted side, size and
   roundness but not containment. */
body.hm-on .hm-menu {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .45); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* Where Pets puts the health fact, Home puts the next thing due. It is a
   BUTTON, because what you want when you read "renews in 24 days" is the record
   it came from. max-width so a long line cannot reach the menu on the other
   corner. */
body.hm-on .hm-pill {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; gap: 6px; max-width: calc(100% - 68px);
  border: 0; cursor: pointer; font-family: inherit;
  background: rgba(0, 0, 0, .55); color: #fff;
  padding: 6px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 640;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.hm-on .hm-pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: hsl(38 82% 55%); }
body.hm-on .hm-pill.good i { background: hsl(152 52% 50%); }
body.hm-on .hm-pill.bad i { background: hsl(355 72% 60%); }
body.hm-on .hm-pill span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── THE EMERGENCY RAIL · the one new component ─────────────────────────
   Two numbers that are never behind a chevron. Pets promotes the vet button
   for the same reason; Home's urgent case is a burst pipe at 2am. */
body.hm-on .hm-rail { display: flex; gap: 8px; margin-top: 10px; }
body.hm-on .hm-rb {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 12px; border-radius: 14px; border: 0; font-family: inherit;
  background: var(--hm-call-bg); color: var(--hm-call-tx); text-align: left;
}
body.hm-on .hm-rb.alt {
  background: var(--hm-tile-bg); border: 1px solid var(--hm-tile-bd);
  color: var(--dv2-text-primary);
}
body.hm-on .hm-rb-ic { flex: none; display: grid; place-items: center; opacity: .95; }
body.hm-on .hm-rb-t { min-width: 0; }
body.hm-on .hm-rb-k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .72;
}
body.hm-on .hm-rb-v {
  display: block; font-size: 13.5px; font-weight: 680; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Before any policy is scanned there are no numbers, so the rail is ONE
   invitation that opens the scan flow. Two dead buttons would be worse than
   none. */
body.hm-on .hm-rb.hm-invite { flex: 1; }
body.hm-on .hm-rb.hm-invite .hm-rb-v {
  white-space: normal; font-size: 12.5px; font-weight: 600; line-height: 1.3;
}

/* ── R3 · Expand all / Collapse all, above the folds it governs ─────────
   Text buttons. No fill, no border, no radius — two filled boxes directly
   under the hero compete with it, which is what Health and Garage once did. */
body.hm-on .hm-allfold { display: flex; justify-content: flex-end; padding: 8px 2px 2px; }
body.hm-on .hm-allfold button {
  border: 0; background: none; cursor: pointer; padding: 6px 4px; font-family: inherit;
  color: var(--dv2-link, #5b4fe0); font-size: 13.5px; font-weight: 600;
}

/* ── R4 · the fold. Drawn by prvFold(); these are only its clothes. ─────*/
body.hm-on .hm-folds { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }
body.hm-on .hm-fold {
  border-radius: var(--hm-rad); background: var(--hm-tile-bg);
  border: 1px solid var(--hm-tile-bd); box-shadow: var(--hm-shadow); overflow: hidden;
}
body.hm-on .hm-fold-head { display: flex; align-items: center; padding-right: 12px; }
body.hm-on .hm-fold-head .hm-fold-h { flex: 1; min-width: 0; }
body.hm-on .hm-fold-h {
  display: flex; align-items: center; gap: 11px; padding: 15px; border: 0;
  background: none; text-align: left; cursor: pointer;
  color: var(--dv2-text-primary); font-family: inherit;
}
body.hm-on .hm-fold-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
}
body.hm-on .hm-grow { flex: 1; min-width: 0; }
body.hm-on .hm-fold-n {
  display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--dv2-text-primary);
}
/* THE SUBTITLE IS THE WHOLE POINT OF A CLOSED FOLD, so it may not be cut off
   mid-word. Two lines, clamped — nowrap turned Pets' "Vaccination due in 14
   days · 3 records" into "…· 3 re…". */
body.hm-on .hm-fold-s {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: 13px; line-height: 1.35; color: var(--dv2-text-sub);
  margin-top: 2px; overflow: hidden;
}
body.hm-on .hm-fold-s .warn { color: var(--hm-warn-ink); font-weight: 600; }
body.hm-on .hm-fold-s .bad { color: var(--hm-bad-ink); font-weight: 600; }
body.hm-on .hm-fold-s .ok { color: var(--hm-ok-ink); font-weight: 600; }
/* CLOSED POINTS RIGHT, OPEN POINTS DOWN — the list is below, so the arrow turns
   toward it. */
body.hm-on .hm-fold-chev {
  flex: none; color: var(--dv2-text-sub); transition: transform .22s ease;
  transform: rotate(-90deg);
}
body.hm-on .hm-fold.open .hm-fold-chev { transform: rotate(0deg); }
body.hm-on .hm-fold-tools { display: flex; gap: 4px; flex: none; }
body.hm-on .hm-tool {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hm-tile-bd); color: var(--dv2-link, #5b4fe0);
  cursor: pointer; border: 0; padding: 0;
}
body.hm-on .hm-fold-b { display: none; padding: 0 14px 14px; }
body.hm-on .hm-fold.open .hm-fold-b { display: block; }
/* The card already pads 14px at the bottom, so a trailing margin on the last
   child is a hole, not spacing. */
body.hm-on .hm-fold-b > :last-child { margin-bottom: 0; }

/* ── the detail card inside an open fold ────────────────────────────────*/
body.hm-on .hm-dt {
  border-radius: 12px; background: var(--hm-quiet-bg);
  border: 1px solid var(--hm-field-bd); overflow: hidden; margin-bottom: 10px;
}
body.hm-on .hm-dt-r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-top: 1px solid var(--hm-field-bd);
}
body.hm-on .hm-dt-r:first-child { border-top: 0; }
body.hm-on .hm-dt-k { font-size: 12.5px; color: var(--dv2-text-sub); flex: none; }
body.hm-on .hm-dt-v {
  font-size: 13.5px; font-weight: 620; color: var(--dv2-text-primary);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 0;
}
/* Review finding 7 — an expired warranty date carries `.warn` (hmFoldsHTML),
   the same class the fold subtitle already colours; the detail row never got
   its own rule, so the date sat in ordinary ink. */
body.hm-on .hm-dt-v .warn { color: var(--hm-warn-ink); font-weight: 600; }
body.hm-on .hm-yes {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  background: var(--hm-ok-bg); color: var(--hm-ok-ink);
  padding: 2px 7px; border-radius: 999px; margin-right: 6px;
}
/* Defect 4 — home_emergency cover, inside the insurance fold but NEVER inside
   the buildings policy's own `.hm-dt`: a caption of its own is the whole fix,
   so the two can never read as one policy. */
body.hm-on .hm-ins-sep {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dv2-text-sub); margin: 2px 0 6px;
}
body.hm-on .hm-calls { display: flex; gap: 8px; margin-bottom: 10px; }
body.hm-on .hm-call {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 11px; border-radius: 12px; border: 0; font-family: inherit;
  background: var(--hm-call-bg); color: var(--hm-call-tx); text-align: left;
}
body.hm-on .hm-call.q { background: var(--hm-tile-bd); color: var(--dv2-text-primary); }
body.hm-on .hm-src {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
  font-family: inherit; padding: 9px 11px; border-radius: 12px;
  border: 1px dashed var(--hm-field-bd); background: none;
  color: var(--dv2-text-sub); font-size: 12.5px; text-align: left;
}
body.hm-on .hm-src b { color: var(--dv2-link, #5b4fe0); font-weight: 600; }
body.hm-on .hm-src .hm-sp { flex: 1; }

/* ── Defect 2 · Receipts & warranty rows ─────────────────────────────────
   `.hm-dt-r` is one line, key : value — fine for "Insurer: Halifax" but not
   for a store, an item, a date AND an amount, and the user's own complaint
   was that the item ("DeWalt DWE5615-GB Corded Circular Saw") got clipped
   sharing a line with anything else. The item gets its own unclipped line;
   store · date and the amount share the line below it; the row itself opens
   the document it came from — a fact you cannot act on is the bug. */
body.hm-on .hm-rcpts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
body.hm-on .hm-rcpt {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  border: 1px solid var(--hm-field-bd); border-radius: 12px;
  background: var(--hm-quiet-bg); padding: 10px 12px;
}
body.hm-on .hm-rcpt.hm-rcpt-static { cursor: default; }
body.hm-on .hm-rcpt-item {
  display: block; font-size: 13.5px; font-weight: 640; color: var(--dv2-text-primary);
  line-height: 1.35;
}
body.hm-on .hm-rcpt-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 3px;
}
body.hm-on .hm-rcpt-meta { font-size: 12px; color: var(--dv2-text-sub); min-width: 0; }
body.hm-on .hm-rcpt-amt {
  font-size: 13px; font-weight: 620; color: var(--dv2-text-primary); flex: none;
  font-variant-numeric: tabular-nums;
}
body.hm-on .hm-rcpt-warr { font-size: 11.5px; color: var(--dv2-text-sub); margin-top: 3px; }
body.hm-on .hm-rcpt-warr.warn { color: var(--hm-warn-ink); font-weight: 600; }
body.hm-on .hm-empty {
  margin: 4px 0 0; color: var(--dv2-text-sub); font-size: 13.5px; line-height: 1.45;
}
/* A document read must SAY it is reading. Asked for twice, missed twice. */
body.hm-on .hm-loading {
  display: flex; align-items: center; gap: 9px;
  color: var(--dv2-text-sub); font-size: 13.5px; padding: 12px 2px;
}
body.hm-on .hm-spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--hm-chip-bd); border-top-color: var(--dv2-link, #5b4fe0);
  animation: hmspin .7s linear infinite;
}
@keyframes hmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.hm-on .hm-spin { animation: none; }
  body.hm-on .hm-fold-chev { transition: none; }
}

/* ── THE SCAN CARD · Design 1 (Option B), the beam over the document ─────
   Replaces prvUploadShow's page-blocking scrim for Home's own scan flow.
   Rendered by hmScanShow() as the FIRST child of the fold hmPickDocument
   opened and scrolled — the originating fold, never the viewport, never a
   fold the user was not looking at (SECTION_CHROME.md R8). A rounded card
   stands in for the page; four faint lines suggest text; the beam sweeps
   down it on a loop while state is "reading" and stops the moment it isn't. */
body.hm-on .hm-scan {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 12px; margin-bottom: 10px;
  border-radius: 12px; background: var(--hm-quiet-bg); border: 1px solid var(--hm-field-bd);
}
body.hm-on .hm-scan-doc {
  position: relative; width: 84px; height: 100px; border-radius: 8px; overflow: hidden;
  background: var(--hm-tile-bg); border: 1px solid var(--hm-field-bd);
}
body.hm-on .hm-scan-l {
  position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 1px;
  background: var(--hm-field-bd);
}
body.hm-on .hm-scan-l:nth-child(1) { top: 16px; }
body.hm-on .hm-scan-l:nth-child(2) { top: 34px; right: 26px; }
body.hm-on .hm-scan-l:nth-child(3) { top: 52px; }
body.hm-on .hm-scan-l:nth-child(4) { top: 70px; right: 40px; }
/* The beam: a 34px vertical gradient with a bright line near its lower edge
   and a glow, looping top to bottom. translateY covers the card's full
   100px height plus the beam's own 34px so it clears both edges. */
body.hm-on .hm-scan-beam {
  position: absolute; left: 0; right: 0; top: -34px; height: 34px;
  background: linear-gradient(to bottom, transparent, rgba(91, 79, 224, .30) 72%, transparent);
  animation: hmscanbeam 1.6s linear infinite;
}
body.hm-on .hm-scan-beam::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 1.5px;
  background: var(--dv2-link, #5b4fe0);
  box-shadow: 0 0 8px 1px var(--dv2-link, #5b4fe0);
}
@keyframes hmscanbeam { from { transform: translateY(0); } to { transform: translateY(134px); } }
/* Done or failed: the beam stops dead, not fades — a beam that keeps
   sweeping after the state has moved on is the same dead-button bug in a new
   costume. */
body.hm-on .hm-scan.done .hm-scan-beam,
body.hm-on .hm-scan.bad .hm-scan-beam { display: none; }
body.hm-on .hm-scan-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 240px; }
body.hm-on .hm-scan-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--dv2-link, #5b4fe0);
  animation: hmscandot 1.1s ease-in-out infinite;
}
body.hm-on .hm-scan.done .hm-scan-dot { background: var(--hm-ok-ink); animation: none; }
body.hm-on .hm-scan.bad .hm-scan-dot { background: var(--hm-bad-ink); animation: none; }
@keyframes hmscandot { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
body.hm-on .hm-scan-cap { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--dv2-text-primary); }
body.hm-on .hm-scan.bad .hm-scan-cap { color: var(--hm-bad-ink); }
body.hm-on .hm-scan-ai {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dv2-text-sub); opacity: .7;
}
/* No sweeping, no pulsing — a static "Reading your document" state instead. */
@media (prefers-reduced-motion: reduce) {
  body.hm-on .hm-scan-beam { animation: none; opacity: 0; }
  body.hm-on .hm-scan-dot { animation: none; }
}

/* ── Fold 4 · Tasks: the shared `.row.tc-row`, tinted to Home ────────────
   Review finding 4 — `.hm-task` is a MODIFIER on the shared row (like
   `.sh-task`/`.gv-task`), not the row itself: bell, purple drawn tick, label,
   assignee are untouched. Without a card ground the rows fell through to the
   bare `.row` hairline and the fold read as a flush stack of rules instead of
   the section's cards. `.hm-task-rows` gives the stack the same gap Shop's
   `.sh-rows` gives its own list — wireItemReorder targets it by that class. */
body.hm-on .hm-task-rows { display: flex; flex-direction: column; }
/* The drag lift is scoped to `.row-swipe`/`.sh-task`/`.gv-task` elsewhere —
   nothing lifts a `.hm-task` row without its own rule. One line. */