/* Theme case studies: the industry interaction "your size, per last" (signature type "last"). Markup: src/_includes/e2/theme/sig-last.njk;
   behaviour: e2-theme-last.js. Nothing 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 / prod from tokens.fonts, --lt-r from tokens.button.radius) and every colour below derives from those.
   The look: a fitting sheet on the theme's own stage. Hairlines, the corner the theme's buttons have, the heading face for titles and sizes, tabular figures
   for sizes and money. The ink is the ONE filled button; everything else that can be pressed (the lasts, the hours, the other last) is outlined, and the
   pressed one is outlined in ink with a tick. The accent marks the foot's own numbers.
   Layout: three steps in a column, each under a hairline: the foot (fields, the answer, the sheet), the five lasts as a row of cards, the hours and the pair.
   Under them the button, the other last, the rule. Under 1000px the foot's two columns stack; the lasts go two across; on a phone the button row sticks to the
   bottom of the screen while the section is in view. Every control is at least 44 x 44px. Without the script all three steps are simply there. */

.th-lastwrap {
  --lt-out: cubic-bezier(.2, .8, .2, 1);
  --lt-muted: color-mix(in srgb, var(--th-ink) 72%, transparent);
  --lt-line: color-mix(in srgb, var(--th-ink) 14%, transparent);
  --lt-line-2: color-mix(in srgb, var(--th-ink) 26%, transparent);
  --lt-paper: color-mix(in srgb, #fff 70%, transparent);
  --lt-tile: color-mix(in srgb, var(--th-from) 85%, #fff);
  display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px);
}
.th-lastwrap .th-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(.th-last) :is(button, input) { font: inherit; color: inherit; }
.th-last__stage :focus-visible { outline: 2px solid var(--th-ink); outline-offset: 3px; }

/* ---------- The stage ---------- */
.th-last__stage {
  position: relative; isolation: isolate; border-radius: 32px; padding: clamp(18px, 2.6vw, 36px);
  background: linear-gradient(135deg, var(--th-from), var(--th-to)); color: var(--th-ink);
  font-family: var(--th-f-ui); font-size: 15px; line-height: 1.4;
  display: flex; flex-direction: column; gap: clamp(20px, 1.9vw, 26px);
}
.th-last__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 70% at 85% 0%, rgba(255, 255, 255, .5), transparent 65%); }
.th-last__step { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--th-ink); }
.th-last__h { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 clamp(22px, 2.1vw, 28px)/1.1 var(--th-f-head); letter-spacing: -.02em; }
.th-last__n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; font: 500 12px/1 var(--mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.th-last__flabel, .th-last__wk, .th-last__csk { font: 500 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lt-muted); }

/* ---------- 1 · Your foot ---------- */
.th-last__step--foot { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px clamp(28px, 4vw, 64px); align-items: start; }
.th-last__step--foot > .th-last__h { grid-column: 1 / -1; }
.th-last__foot { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.th-last__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.th-last__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.th-last__input {
  display: block; width: 100%; min-width: 0; height: 52px; padding: 0 14px; margin: 0; border: 0; border-radius: var(--lt-r); background: #fff;
  box-shadow: inset 0 0 0 1px var(--lt-line-2); font: 400 20px/1 var(--th-f-ui); color: var(--th-ink); font-variant-numeric: tabular-nums;
  transition: box-shadow .15s ease;
}
/* a placeholder is an example, not an entry: visibly lighter than what she types, so it is never read as filled */
.th-last__input::placeholder { color: color-mix(in srgb, var(--th-ink) 44%, transparent); font-style: italic; opacity: 1; }
@media (hover: hover) { .th-last__input:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-last__input:focus-visible { outline: 2px solid var(--th-ink); outline-offset: 2px; }
.th-last__norm { min-height: 2.7em; font-size: 12.5px; line-height: 1.35; color: var(--lt-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.th-last__norm[data-state="ok"] { color: var(--th-ink); font-weight: 500; }

/* the answer: the size in the heading face, the line under it. Its height holds still while she types. */
.th-last__result { position: relative; min-height: 132px; padding: 16px 24px; border-radius: var(--lt-r); background: #fff; box-shadow: inset 0 0 0 1px var(--lt-line); display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.th-last__result::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--th-accent); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .25s var(--lt-out); }
.th-last__result[data-state="ok"]::after { transform: scaleY(1); }
.th-last__big { display: flex; align-items: baseline; gap: 12px; margin: 0; line-height: 1; }
.th-last__big[hidden] { display: none; }
.th-last__bigk { font: 500 13px/1 var(--mono); letter-spacing: .1em; color: var(--lt-muted); }
.th-last__bign { font: 600 clamp(64px, 6.4vw, 92px)/.9 var(--th-f-head); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.th-last__line { margin: 0; font: 500 16px/1.4 var(--th-f-prod); font-variant-numeric: tabular-nums; }
.th-last__result[data-state="empty"] .th-last__line { font: 400 15px/1.45 var(--th-f-ui); color: var(--lt-muted); max-width: 34ch; }
.th-last__w { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.th-last__w[hidden], .th-last__wn[hidden] { display: none; }
.th-last__w strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.th-last__wn { color: var(--th-accent-ink); font-size: 13px; }

/* the sheet: the foot is drawn to her numbers; the needle on the ruler sits where the length falls */
.th-last__sheet { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.th-last__sheetsvg { display: block; width: 100%; height: auto; max-height: 205px; border-radius: var(--lt-r); background: #fff; box-shadow: inset 0 0 0 1px var(--lt-line); }
.th-last__grid path { fill: none; stroke: color-mix(in srgb, var(--th-ink) 7%, transparent); stroke-width: 1; }
.th-last__footscale { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--sx, 1), var(--sy, 1)); transition: transform .3s var(--lt-out); }
.th-last__fill { fill: color-mix(in srgb, var(--th-from) 70%, transparent); stroke: none; transition: fill .2s ease; }
.th-last__pencil { fill: none; stroke: var(--th-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.th-last__dim { fill: none; stroke: var(--th-accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .35; transition: opacity .2s ease; }
.th-last__sheet[data-state="ok"] .th-last__dim:not(.th-last__dim--w) { opacity: 1; }
.th-last__sheet[data-width="ok"] .th-last__dim--w { opacity: 1; }
.th-last__ruler { padding: 0 6px 22px; }
.th-last__rtrack { position: relative; display: block; height: 14px; border-bottom: 1px solid var(--th-ink); }
.th-last__tick { position: absolute; bottom: 0; width: 1px; height: 9px; background: var(--th-ink); }
.th-last__tick b { position: absolute; top: 14px; left: 50%; translate: -50% 0; font: 500 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--lt-muted); }
.th-last__mark { position: absolute; bottom: -4px; left: 0; width: 2px; height: 22px; margin-left: -1px; background: var(--th-accent); transition: left .3s var(--lt-out), opacity .2s ease; opacity: 0; }
.th-last__sheet[data-state="ok"] .th-last__mark { opacity: 1; }

/* ---------- 2 · Per last ---------- */
.th-last__chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.th-last__chip {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px 12px; border: 0; border-radius: var(--lt-r);
  cursor: pointer; text-align: left; background: var(--lt-paper); box-shadow: inset 0 0 0 1px var(--lt-line-2);
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-last__chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-last__chip:active { transform: scale(.985); transition-duration: .08s; }
.th-last__chip[aria-pressed="true"], .th-last__chip[aria-pressed="true"]:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--th-ink); }
.th-last__chip[aria-pressed="true"]::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--th-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.th-last__cimg { display: block; width: 100%; aspect-ratio: 640 / 300; border-radius: calc(var(--lt-r) / 2); background: var(--lt-tile); overflow: hidden; }
.th-last__cimg img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.th-last__cname { font: 600 17px/1.15 var(--th-f-head); letter-spacing: -.01em; }
.th-last__csize { display: flex; align-items: baseline; gap: 6px; }
.th-last__csize b { font: 600 clamp(28px, 2.6vw, 36px)/1 var(--th-f-head); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; }
.th-last__chip[data-empty="true"] .th-last__csize b { color: var(--lt-muted); font-weight: 400; }
.th-last__cnote { font-size: 13px; line-height: 1.35; color: var(--lt-muted); }
.th-last__cwide { font-size: 12px; line-height: 1.3; font-weight: 500; color: var(--th-accent-ink); }
.th-last__cprice { margin-top: auto; padding-top: 4px; font: 500 14px/1.2 var(--th-f-prod); font-variant-numeric: tabular-nums; }
/* a wide foot and a last that is not cut for it: the card steps back, the ones that are cut for it say so */
.th-last__chip[data-fit="no"]:not([aria-pressed="true"]) { background: transparent; box-shadow: inset 0 0 0 1px var(--lt-line); }
.th-last__chip[data-fit="no"]:not([aria-pressed="true"]) .th-last__cimg { opacity: .55; }
.th-last__perlast { min-height: 1.4em; margin: 0; font: 400 clamp(18px, 1.7vw, 22px)/1.3 var(--th-f-head); letter-spacing: -.01em; }
.th-lastwrap .th-last__flag { margin: -6px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.45; color: var(--th-accent-ink); }
.th-last__flag[hidden] { display: none; }

/* ---------- 3 · Hours on your feet ---------- */
.th-last__step--hours { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px clamp(28px, 4vw, 64px); align-items: start; }
.th-last__step--hours > .th-last__h { grid-column: 1 / -1; }
.th-last__hoursrow { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.th-last__hours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.th-last__hour {
  display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--lt-r); cursor: pointer;
  background: var(--lt-paper); box-shadow: inset 0 0 0 1px var(--lt-line-2); font: 600 18px/1.1 var(--th-f-head); letter-spacing: -.01em;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-last__hour:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-last__hour:active { transform: scale(.985); transition-duration: .08s; }
.th-last__hour[aria-pressed="true"], .th-last__hour[aria-pressed="true"]:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--th-ink); }
.th-last__hline { min-height: 1.45em; margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
/* the hours suggest a pair and never switch the last she chose: the suggestion is a chip she can take */
.th-last__sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -4px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.4; color: var(--lt-muted); }
.th-last__sugg[hidden] { display: none; }
.th-last__take {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--lt-r); cursor: pointer;
  background: var(--lt-paper); color: var(--th-ink); box-shadow: inset 0 0 0 1px var(--lt-line-2); font: 500 14px/1.2 var(--th-f-ui); letter-spacing: .02em;
  transition: box-shadow .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-last__take:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-last__take:active { transform: scale(.985); transition-duration: .08s; }
.th-last__pair { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; padding: 12px; border-radius: var(--lt-r); background: #fff; box-shadow: inset 0 0 0 1px var(--lt-line); }
.th-last__pimg { display: block; aspect-ratio: 640 / 385; border-radius: calc(var(--lt-r) / 2); background: var(--lt-tile); overflow: hidden; }
.th-last__pimg img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.th-last__pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.th-last__pn { font: 600 20px/1.15 var(--th-f-head); letter-spacing: -.015em; }
.th-last__ps { min-height: 1.3em; font: 500 15px/1.3 var(--th-f-prod); font-variant-numeric: tabular-nums; color: var(--th-accent-ink); }
.th-last__pp { font: 500 15px/1.3 var(--th-f-prod); font-variant-numeric: tabular-nums; }

/* ---------- The foot: the one filled button, the same size in another last, then the rule ---------- */
.th-last__foot2, .th-last__rules { width: min(100%, 540px); margin-inline: auto; }
.th-last__foot2 { display: flex; flex-direction: column; gap: 10px; }
.th-last__cta {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: var(--lt-r); cursor: pointer;
  background: var(--th-ink); color: #fff; font: 500 14px/1.25 var(--th-f-ui); letter-spacing: .06em; text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.th-last__ctat { text-align: center; }
.th-last__ctat [hidden] { display: none; }
.th-last__ctat span { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .th-last__cta:hover { background: color-mix(in srgb, var(--th-ink) 84%, var(--th-accent)); } }
.th-last__cta:active { transform: scale(.985); transition-duration: .08s; }
.th-last__check { display: none; margin-right: 10px; }
.th-last__cta.is-done, .th-last__cta.is-done:hover { background: var(--th-accent-ink); }
.th-last__cta.is-done .th-last__check { display: block; animation: th-last-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes th-last-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.th-last__alt {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 0 18px; border: 0; border-radius: var(--lt-r); cursor: pointer;
  background: var(--lt-paper); box-shadow: inset 0 0 0 1px var(--lt-line-2); font: 500 14px/1.25 var(--th-f-ui); letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums;
  transition: box-shadow .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
@media (hover: hover) { .th-last__alt:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--th-ink) 55%, transparent); } }
.th-last__alt:active { transform: scale(.985); transition-duration: .08s; }
.th-last__ask { margin: 0; text-align: center; font: 500 14px/1.35 var(--th-f-ui); color: var(--th-accent-ink); }
.th-last__ask[hidden] { display: none; }
.th-last__rules { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.th-last__promise { margin: 0; font-size: 15px; line-height: 1.45; color: var(--th-ink); text-wrap: balance; }
.th-last__small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lt-muted); }
.th-last__model { display: block; }

/* ---------- Narrower ---------- */
@media (max-width: 1099px) {
  .th-last__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .th-last__step--foot, .th-last__step--hours { grid-template-columns: minmax(0, 1fr); }
  .th-last__result { min-height: 0; }
  .th-last__sheet { max-width: 440px; }
}

/* ---------- Phones: the button row sticks to the bottom ---------- */
@media (max-width: 699px) {
  .th-last__stage { gap: 24px; padding: 14px 14px 12px; border-radius: 24px; }
  .th-last__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .th-last__chip { padding: 10px 10px 12px; }
  .th-last__chip:last-child { grid-column: 1 / -1; }
  .th-last__fields { gap: 10px; }
  .th-last__bign { font-size: 64px; }
  .th-last__pair { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .th-last__foot2 {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4; width: 100%; padding: 8px; border-radius: var(--lt-r);
    background: color-mix(in srgb, #fff 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px var(--lt-line), 0 18px 30px -18px color-mix(in srgb, var(--th-ink) 70%, transparent);
  }
  body:has(.vsw) .th-last__foot2 { bottom: 88px; }
  .th-last__cta { min-height: 52px; padding: 0 14px; font-size: 13px; letter-spacing: .04em; }
  .th-last__alt { min-height: 44px; font-size: 13px; }
  /* Focus Not Obscured (WCAG 2.4.11): whatever takes focus stops above the sticky row (the row's offset + its two buttons + padding + a 16px gap) */
  .th-last__stage { --lt-clear: calc(max(12px, env(safe-area-inset-bottom)) + 52px + 44px + 10px + 16px + 16px + 30px); }   /* the last 30px: the "still to choose" line when it is showing */
  body:has(.vsw) .th-last__stage { --lt-clear: calc(88px + 52px + 44px + 10px + 16px + 16px + 30px); }
  .th-last__chip, .th-last__hour, .th-last__alt, .th-last__take, .th-last__step, .th-last__h { scroll-margin-bottom: var(--lt-clear); }
  .th-last__step, .th-last__h { scroll-margin-top: calc(var(--header-h, 68px) + 12px); }
  .th-last__input { scroll-margin-bottom: calc(var(--lt-clear) + 56px); }
}
@media (max-width: 380px) {
  .th-last__hour { font-size: 16px; padding: 0 6px; }
  .th-last__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reduced motion: nothing eases or pops; everything shows its finished state ---------- */
@media (prefers-reduced-motion: reduce) {
  .th-last *, .th-last *::before, .th-last *::after { animation: none !important; transition: none !important; }
}