/* Theme case studies: the industry interaction "Day by day" (signature type "bloom"). Markup: src/_includes/e2/theme/sig-bloom.njk; behaviour: e2-theme-bloom.js.
   Nothing here is brand-specific: the wrapper's inline style carries the theme (--th-from / --th-to / --th-ink / --th-accent from stage, --th-f-head / ui from tokens.fonts,
   --th-f-hand / --th-f-handar from signature.card, --bl-r from tokens.button.radius).
   The look: one sheet of ivory paper on the dark page. The drawing of the bouquet beside a console and a vase sits in a paper well at true proportion, the frames of the
   time-lapse in a square with a seven-day scale under it, and the card on its own cut-out. Hairlines, square controls, the UI face for every number (tabular figures:
   the heading face is only ever used for words), the ONE filled button in the date brown, deepened until its ivory type reads (5:1). Every control is at least 44 x 44px.
   Without the script the section shows the finished default (M, day 1, an empty card, today's line). */

.th-bloomwrap {
  --bl-out: cubic-bezier(.2, .8, .2, 1);
  --bl-ink: var(--th-ink);
  --bl-mut: color-mix(in srgb, var(--th-ink) 74%, var(--th-to));      /* secondary text on the sheet (5.6:1) */
  --bl-line: color-mix(in srgb, var(--th-ink) 18%, transparent);
  --bl-line2: color-mix(in srgb, var(--th-ink) 42%, transparent);
  --bl-date: color-mix(in srgb, var(--th-accent) 84%, var(--th-ink)); /* the accent as small text on the sheet (5.1:1) */
  --bl-cta: color-mix(in srgb, var(--th-accent) 86%, var(--th-ink));  /* the filled button: ivory type on it reads at 5:1 */
  --bl-cta-hi: color-mix(in srgb, var(--bl-cta) 84%, var(--th-ink));
  --bl-done: #46593f;
  --bl-rose: #D9B8AE; --bl-sage: #9AA38F;
  --bl-well: color-mix(in srgb, var(--th-ink) 4%, var(--th-to));
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-bloomwrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.th-bloom :is(button, textarea) { font: inherit; color: inherit; }
/* the two buttons keep their own colour above the reset (0,2,0 against its 0,1,1): ivory on the date brown, ink on the paper; .is-done keeps the ivory */
.th-bloom .th-bloom__cta { color: var(--th-from); }
.th-bloom .th-bloom__alt { color: var(--bl-ink); }
.th-bloom__stage :focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 3px; }

/* ---------- the sheet ---------- */
.th-bloom__stage {
  position: relative; isolation: isolate; border-radius: 28px; padding: clamp(18px, 3.4vw, 48px); color: var(--bl-ink);
  background: linear-gradient(135deg, var(--th-from), var(--th-to));
  box-shadow: inset 0 0 0 1px var(--bl-line), 0 40px 70px -48px rgba(0, 0, 0, .9);
  font-family: var(--th-f-ui); font-size: 15px; line-height: 1.45;
}
.th-bloom__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.04fr); gap: 28px clamp(24px, 2.8vw, 44px); align-items: start; }
.th-bloom__col3 { display: flex; flex-direction: column; min-width: 0; gap: 14px; }
.th-bloom__step { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-bloom__h {
  display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--bl-line2);
  font: 400 clamp(26px, 2.2vw, 32px)/1.1 var(--th-f-head); letter-spacing: .005em; color: var(--bl-ink);
}
.th-bloom__n {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bl-date); color: var(--bl-date);
  font: 600 12px/1 var(--th-f-ui); font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* ---------- 1 Size: three buttons, then the drawing ---------- */
.th-bloom__sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.th-bloom__size {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 72px; margin: 0; padding: 8px 4px; border: 0; border-radius: var(--bl-r); cursor: pointer;
  background: transparent; box-shadow: inset 0 0 0 1px var(--bl-line2); text-align: center; font-variant-numeric: tabular-nums;
  transition: box-shadow .18s ease, background-color .18s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-bloom__size:hover { box-shadow: inset 0 0 0 1px var(--bl-ink); } }
.th-bloom__size[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--bl-ink); background: color-mix(in srgb, var(--th-to) 70%, #fff); }
.th-bloom__sn { font: 600 19px/1.1 var(--th-f-ui); }
.th-bloom__ss { font: 400 12.5px/1.25 var(--th-f-ui); color: var(--bl-mut); }
.th-bloom__sp { font: 600 13px/1.25 var(--th-f-ui); color: var(--bl-date); }
.th-bloom__fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.th-bloom__scale { display: block; width: 100%; height: auto; background: var(--bl-well); box-shadow: inset 0 0 0 1px var(--bl-line); }
.th-bloom__floor { stroke: var(--bl-ink); stroke-width: 1.4; opacity: .7; }
.th-bloom__console { fill: color-mix(in srgb, var(--th-to) 60%, #fff); stroke: var(--bl-ink); stroke-width: .28; opacity: .92; }
.th-bloom__vase { fill: var(--bl-rose); stroke: var(--bl-ink); stroke-width: .28; }
.th-bloom__level { stroke: var(--bl-date); stroke-width: 1.2; stroke-dasharray: 4 7; opacity: .6; }
.th-bloom__dim line, .th-bloom__dl line { stroke: var(--bl-date); stroke-width: 1.4; fill: none; stroke-linecap: butt; }
.th-bloom__dt { fill: var(--bl-date); font: 600 24px/1 var(--th-f-ui); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.th-bloom__bq { transform-origin: 0 0; }
.th-bloom__dl { transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .th-bloom__bq, .th-bloom__dl { transition: transform .36s var(--bl-out); }
}
.th-bloom__note { font-size: 12.5px; color: var(--bl-mut); }
.th-bloom__sizeline { margin: 0; font: 500 16px/1.35 var(--th-f-ui); font-variant-numeric: tabular-nums; text-wrap: balance; }
.th-bloom__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.th-bloom__price b { font: 600 26px/1.1 var(--th-f-ui); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.th-bloom__price span { font-size: 13px; color: var(--bl-mut); }

/* ---------- 2 Day by day: the frame, its scale, the care line ---------- */
.th-bloom__day {
  --pos: 0; position: relative; display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.th-bloom__day.is-drag { cursor: grabbing; }
.th-bloom__day:focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 5px; }
.th-bloom__frame { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--bl-well); box-shadow: 0 0 0 1px var(--bl-line2), 0 26px 40px -28px rgba(35, 28, 23, .55); }
.th-bloom__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
.th-bloom__vig { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 40px rgba(35, 28, 23, .12); }
.th-bloom__track { position: relative; height: 66px; margin: 0 14px; }
.th-bloom__rail { position: absolute; left: 0; right: 0; top: 18px; height: 2px; background: var(--bl-line2); }
.th-bloom__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pos) * 100%); background: var(--bl-date); }
.th-bloom__tick { position: absolute; top: 18px; left: var(--at); width: 0; font-variant-numeric: tabular-nums; }
.th-bloom__tick i { position: absolute; left: -.5px; top: -6px; width: 1px; height: 14px; background: var(--bl-line2); }
.th-bloom__tick b { position: absolute; left: 0; top: 19px; translate: -50% 0; font: 500 12.5px/1 var(--th-f-ui); color: var(--bl-mut); }
.th-bloom__tick.is-on i { background: var(--bl-date); }
.th-bloom__tick.is-on b { color: var(--bl-ink); }
.th-bloom__tick--full i { top: -10px; height: 18px; width: 2px; left: -1px; background: var(--bl-date); }
.th-bloom__tick--full b { color: var(--bl-date); font-weight: 700; }
.th-bloom__tick em { position: absolute; left: 0; top: 36px; translate: -50% 0; font: 600 11.5px/1 var(--th-f-ui); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-date); }
.th-bloom__knob {
  position: absolute; top: 19px; left: calc(var(--pos) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--th-to); box-shadow: 0 0 0 2px var(--bl-date), 0 4px 10px -2px rgba(35, 28, 23, .5);
}
.th-bloom__day:focus-visible .th-bloom__knob { box-shadow: 0 0 0 3px var(--bl-ink), 0 4px 10px -2px rgba(35, 28, 23, .5); }
.th-bloom__hint { margin: 0; font-size: 13px; color: var(--bl-mut); }
.th-bloom__care { margin: 0; min-height: 4.4em; padding-left: 14px; border-left: 2px solid var(--bl-date); font: 400 15.5px/1.5 var(--th-f-ui); text-wrap: pretty; }

/* ---------- 3 The card ---------- */
.th-bloom__field { display: flex; flex-direction: column; gap: 6px; }
.th-bloom__flabel { font: 600 12px/1.3 var(--th-f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--bl-date); }
.th-bloom__ta {
  display: block; width: 100%; min-height: 116px; margin: 0; padding: 14px 16px; resize: vertical; border: 0; border-radius: var(--bl-r); background: color-mix(in srgb, var(--th-to) 72%, #fff);
  box-shadow: inset 0 0 0 1px var(--bl-line2); font: 400 16px/1.5 var(--th-f-ui); color: var(--bl-ink); caret-color: var(--bl-date);
}
.th-bloom__ta::placeholder { color: var(--bl-mut); opacity: 1; }
.th-bloom__ta:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bl-ink); }
.th-bloom__ta:focus-visible { outline: none; }
.th-bloom__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: 13px; color: var(--bl-mut); }
.th-bloom__count { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bl-ink); }
.th-bloom__count.is-over { color: var(--bl-date); text-decoration: underline; text-underline-offset: 3px; }
/* the over line is always in the DOM (a polite live region); its height is reserved by the hidden copy of its longest wording, so the 221st character moves nothing below it */
.th-bloom__overbox { display: grid; margin: 2px 0 0; }
.th-bloom__overbox > * { grid-area: 1 / 1; }
.th-bloom__over, .th-bloom__oversz { margin: 0; padding: 7px 12px; border-left: 3px solid transparent; font-size: 14px; line-height: 1.4; }
.th-bloom__oversz { visibility: hidden; pointer-events: none; }
.th-bloom__over.is-on { border-left-color: var(--bl-date); background: color-mix(in srgb, var(--bl-rose) 34%, transparent); }
.th-bloom:not(.is-js) .th-bloom__overbox { display: none; }   /* without the script there is no card to warn about */

.th-bloom__preview { --fx: 32px; --fy: 24px; position: relative; width: min(100%, 380px); margin: 0 auto; padding: var(--fy) var(--fx) 4px 0; }
/* the card: one size however many there are. The first sits in front at the full width left for it; each of the next two peeks from behind, a little higher and to the right and turned */
.th-bloom__sheet {
  position: relative; z-index: 3; width: 100%; aspect-ratio: 473 / 374; background: url("/assets/img/case/mashmoom/xp/card-tight.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 14px 14px rgba(35, 28, 23, .22));
}
.th-bloom__sheet ~ .th-bloom__sheet { position: absolute; left: 0; top: var(--fy); width: calc(100% - var(--fx)); filter: drop-shadow(0 6px 8px rgba(35, 28, 23, .16)); }
.th-bloom__sheet:nth-child(2) { z-index: 2; translate: calc(var(--fx) * .4) calc(var(--fy) * -.3); rotate: 1.8deg; }
.th-bloom__sheet:nth-child(3) { z-index: 1; translate: calc(var(--fx) * .8) calc(var(--fy) * -.55); rotate: 3.6deg; }
.th-bloom__more { position: absolute; z-index: 4; right: 0; bottom: 14px; margin: 0; padding: 5px 10px; background: var(--bl-ink); color: var(--th-from); font: 600 12px/1.2 var(--th-f-ui); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.th-bloom__ink {
  position: absolute; inset: 17% 12% 16% 12%; display: block; overflow: auto; rotate: -6.6deg; color: #3b2b1e; text-align: start; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.6; scrollbar-width: thin;
}
.th-bloom__ink span { unicode-bidi: isolate; }
.th-bloom__ink .is-hand { font-family: var(--th-f-hand); }
.th-bloom__ink .is-ar { font-family: var(--th-f-handar); font-size: 1.22em; line-height: 1.5; }
.th-bloom__sheet.is-empty .th-bloom__ink { color: #8a7a6a; }
.th-bloom__when { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 0; border-top: 1px solid var(--bl-line2); }
.th-bloom__when1 { position: relative; margin: 0; padding-left: 20px; font: 600 16px/1.35 var(--th-f-ui); font-variant-numeric: tabular-nums; text-wrap: balance; }
.th-bloom__when1::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--bl-sage); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-sage) 28%, transparent); }
.th-bloom__when[data-when="tomorrow"] .th-bloom__when1::before { background: var(--bl-date); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl-date) 24%, transparent); }
.th-bloom__when2 { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--bl-mut); }

/* ---------- The foot: the one filled button, then the outline ---------- */
.th-bloom__foot { position: relative; }
.th-bloom__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 0 20px; border: 0; border-radius: var(--bl-r); cursor: pointer;
  background: var(--bl-cta); color: var(--th-from); font: 600 16px/1.25 var(--th-f-ui); letter-spacing: .02em;
  transition: background-color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-bloom__ctal { text-align: center; font-variant-numeric: tabular-nums; text-wrap: balance; }
@media (hover: hover) { .th-bloom__cta:hover { background: var(--bl-cta-hi); } }
.th-bloom__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-bloom__check { display: none; margin-right: 10px; }
.th-bloom__cta.is-done, .th-bloom__cta.is-done:hover { background: var(--bl-done); }
.th-bloom__cta.is-done .th-bloom__check { display: block; animation: th-bl-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-bl-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.th-bloom__rules { display: flex; }
.th-bloom__alt {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--bl-r); cursor: pointer;
  background: transparent; color: var(--bl-ink); box-shadow: inset 0 0 0 1px var(--bl-ink); font: 600 15px/1.25 var(--th-f-ui); letter-spacing: .02em; text-align: center;
  transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .th-bloom__alt:hover { background: color-mix(in srgb, var(--bl-ink) 7%, transparent); } }
.th-bloom__alt.is-done { box-shadow: inset 0 0 0 2px var(--bl-ink); background: color-mix(in srgb, var(--bl-ink) 7%, transparent); }

/* ---------- Narrower ---------- */
@media (max-width: 1099px) {
  .th-bloom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .th-bloom__col3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; align-items: start; }
  .th-bloom__step--card { display: contents; }
  .th-bloom__step--card > .th-bloom__h { grid-column: 1 / -1; }
  .th-bloom__col3 > .th-bloom__foot, .th-bloom__col3 > .th-bloom__rules { grid-column: 2; }
  .th-bloom__field { grid-column: 1; grid-row: 2; }
  .th-bloom__preview { grid-column: 2; grid-row: 2; }
  .th-bloom__when { grid-column: 1; grid-row: 3; }
  .th-bloom__col3 > .th-bloom__foot { grid-row: 3; }
  .th-bloom__col3 > .th-bloom__rules { grid-row: 4; }
}
@media (max-width: 699px) {
  .th-bloom__stage { padding: 16px 14px 12px; border-radius: 24px; }
  .th-bloom__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .th-bloom__col3 { display: flex; grid-column: auto; align-items: stretch; }
  .th-bloom__step--card { display: flex; }
  .th-bloom__h { font-size: 26px; }
  /* the foot, the button and the outline are the column's full width, so nothing moves when the label changes; both labels (today, for tomorrow) share one height */
  .th-bloom__cta { min-height: 56px; padding: 6px 14px; font-size: 15px; line-height: 1.3; }
}
/* the bar sticks to the bottom of the screen only on a phone with room for it (520px tall or more); on a landscape phone it sits in the flow, under the card */
@media (max-width: 699px) and (min-height: 520px) {
  .th-bloom__foot {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; padding: 8px; border-radius: var(--bl-r);
    background: var(--th-to); box-shadow: 0 0 0 1px var(--bl-line2), 0 18px 30px -18px rgba(35, 28, 23, .7);
    transition: opacity .2s ease, visibility 0s;
  }
  /* the bar appears when the card step comes into view (the script sets data-show); before that it keeps its place in the layout and shows nothing */
  .th-bloom.is-gated .th-bloom__foot:not([data-show="1"]) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s .2s; }
  body:has(.vsw) .th-bloom__foot { bottom: 88px; }
  /* Focus Not Obscured (WCAG 2.4.11): whatever takes focus stops above the sticky row (its bottom offset + 72px + 16px) */
  .th-bloom__stage { --bl-clear: calc(max(12px, env(safe-area-inset-bottom)) + 72px + 16px); }
  body:has(.vsw) .th-bloom__stage { --bl-clear: calc(88px + 72px + 16px); }
  .th-bloom__size, .th-bloom__day, .th-bloom__alt, .th-bloom__ta { scroll-margin-bottom: var(--bl-clear); }
  .th-bloom__field { scroll-margin-bottom: calc(var(--bl-clear) + 24px); }
}
@media (max-width: 359px) {
  .th-bloom__stage { padding-inline: 10px; }
  .th-bloom__preview { --fx: 20px; --fy: 18px; }
  .th-bloom__sn { font-size: 17px; }
  .th-bloom__ss { font-size: 12px; }
}

/* ---------- Reduced motion: nothing eases; every state shows at once ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-bloom *, .th-bloom *::before, .th-bloom *::after { animation: none !important; transition: none !important; }
}