/* The ONE plant companion (js/companion.js). A single element that sits in the active tab's mascot
   slot and scrolls with the page; between tabs it hops through a fixed overlay (transform only).
   It never takes taps and never covers content: each slot reserves its room.

   The drawing (js/mascot.js, 120 × 120 units) is shown through a tight window around the character
   (js/companion.js sets viewBox "22 2 76 114": leaves, arms, pot and its shadow — nothing is cut or
   redrawn), so a slot of that 2 : 3 shape is filled by the plant, and a square slot shows it centred.

   Slot sizes (the layout of each area places its slot; this file only sizes it):
   - Today (inside the garden card): the big plant, 2 : 3 — 100 × 150 px on phones, 92 × 138 on
     narrow phones (360 px), 132 × 198 on tablets / desktop. The character itself (leaf tips to the
     pot) is then about 137 / 126 / 181 px tall. css/garden.css gives its column the same width.
   - Diary panel headings, the Insights hero, the Profile identity row: 52 × 52 px. */
:root { --dc-today-w: 100px; --dc-today-h: 150px; }
@media (max-width: 380px) { :root { --dc-today-w: 92px; --dc-today-h: 138px; } }
@media (max-width: 340px) { :root { --dc-today-w: 84px; --dc-today-h: 126px; } }
@media (min-width: 700px) { :root { --dc-today-w: 132px; --dc-today-h: 198px; } }

.mascot-slot { position: relative; display: inline-block; flex: none; width: 52px; height: 52px; vertical-align: middle; pointer-events: none; }
.mascot-slot[data-mascot-anchor="today"] { display: block; width: var(--dc-today-w); height: var(--dc-today-h); }

.dhut-companion { position: absolute; inset: 0; pointer-events: none; }
.dhut-companion[hidden] { display: none; }
/* The body moves for the small reactions (hop, sway, nod); it pivots on the pot. */
.dhut-companion .dc-body { position: absolute; inset: 0; transform-origin: 50% 94%; }
.dhut-companion svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The flight: a fixed layer over the page (under the navigation and every sheet / dialog), so a
   card's rounded corners or overflow never clip the plant mid-air. */
.dhut-companion-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; contain: strict; }
.dhut-companion.dc-flying { inset: auto; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; }

/* Reduced / no motion: nothing moves (js/companion.js doesn't start a flight or a hop either). */
@media (prefers-reduced-motion: reduce) { .dhut-companion * { animation: none !important; } }
html[data-motion="reduced"] .dhut-companion *, html[data-motion="off"] .dhut-companion * { animation: none !important; }

/* ---- Round 5: the voice diary on the top leaf ----
   Only the painted leaf shapes (and the growth at the stem tip) take taps, and only while the plant
   stands in the Today garden: the rest of the plant and its box still let every tap through, and in
   flight or in the 52 px slots nothing is clickable. .m-leaf-hit is a transparent 7-unit outline of
   each leaf, so the smaller left leaf is still ≥ 24 px to tap on a phone. */
.dhut-companion .dc-art { position: absolute; inset: 0; }
.dhut-companion[data-slot="today"]:not(.dc-flying):not([hidden]) :is(.m-leaf, .m-leaf-hit, .m-growth) { pointer-events: visiblePainted; cursor: pointer; }
.dhut-companion[data-slot="today"]:not(.dc-flying):not([hidden]) .m-growth * { pointer-events: visiblePainted; }
/* The keyboard / screen-reader way in: one real button over the leaves. It never takes pointer taps
   (the rectangle would cover sky beside the leaves); it only shows a ring when focused by keyboard. */
.dhut-companion .dc-sprout-btn {
  position: absolute; left: 12%; top: 0; width: 78%; height: max(29%, 44px); min-height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 45% 45% 40% 40%; background: transparent; box-shadow: none; color: transparent; font-size: 0;
  pointer-events: none; cursor: pointer;
}
.dhut-companion .dc-sprout-btn:hover { background: transparent; }
.dhut-companion .dc-sprout-btn:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85); }