/* Ported from ~/Dev/whoever-motion-lab (lab section 02); plays window.HIRE_CALL (story-call.js) and stays hidden until the hire story has a call. */
.fw-sec { --paper: #FFFDF8; --tint: #fff3d6; }
/* 02 · You keep the final word: booking-flow-demo skinned as Whoever's owner view (paper card, ink rules, hard
   shadows, closed palette). Only colours, faces and the split/merge labels change; the part's timing vars stay. */
.fw-head { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); text-align: center; }
.fw-stage { max-width: 1180px; margin: 0 auto; padding: 72px var(--pad) 8px; }

.fw-flow {
  --bf-times-w: 19.5em;                       /* room for "2:00 p.m." + "Requested by Sam" side by side */
  --bf-bg: var(--paper); --bf-line: var(--ink); --bf-ink: var(--ink); --bf-muted: var(--ink-soft);
  --bf-day-ink: var(--ink); --bf-off: rgb(87 80 63 / .38); --bf-soft: transparent;
  --bf-hover: var(--tint); --bf-book: var(--marigold); --bf-press: var(--marigold);
  --bf-done: var(--kelly); --bf-done-ink: #fff;
  --bf-radius: 999px;
  --fw-slot-w: 15.5em;
}
.fw-flow .bf-card {
  font-size: clamp(10px, calc((100cqi - 14px) / 64.5), 16px);
  overflow: visible; border: 2px solid var(--ink); border-radius: 4px 18px 18px 18px; box-shadow: 8px 8px 0 var(--ink);
}
.fw-tab { position: absolute; left: -2px; bottom: 100%; padding: .62em 1.15em .5em; background: var(--marigold);
  border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0;
  font: 600 .7em/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.fw-flow .bf-reveal > .bf-col { box-shadow: inset 1.5px 0 var(--ink); }

/* host column: the request the front desk took */
.fw-flow .bf-brand { gap: .6em; }
.fw-flow .bf-brand__mark { display: grid; place-items: center; width: 1.8em; height: 1.8em; border: 1.5px solid var(--ink); border-radius: 50%;
  background: var(--marigold); font: 400 1.1em/1 var(--serif); }
.fw-flow .bf-brand__mark::after { display: none; }
.fw-flow .bf-brand__name { font-size: 1.05em; font-weight: 600; letter-spacing: 0; }
.fw-flow .bf-rule { height: 1.5px; margin-top: 3.1em; }
.fw-flow .bf-avatar { background: var(--pink); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 0 0 .22em var(--paper); }
.fw-flow .bf-avatar span { font: 400 1.6em/1 var(--serif); }
.fw-flow .bf-who { margin-top: 2.85em; font-weight: 500; }
.fw-flow .bf-title { margin-top: .12em; font: 400 2.05em/1 var(--serif); letter-spacing: 0; }
.fw-taken { margin-top: .55em !important; font-size: .82em; color: var(--ink-soft); }
.fw-rows { margin: 1.25em 0 0; display: grid; border-top: 1.5px solid var(--ink); }
.fw-rows div { padding: .45em 0 .42em; border-bottom: 1.5px solid var(--hair); clip-path: inset(0 100% 0 0);
  transition: clip-path calc(var(--bf-lines-dur) / var(--bf-speed)) var(--bf-lines-ease) calc(var(--i) * 70ms / var(--bf-speed)); }
.fw-flow.bf-on-lines .fw-rows div { clip-path: inset(0 -2px 0 0); }
.fw-rows dt { font: 600 .62em/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.fw-rows dd { margin: .2em 0 0; font-size: .9em; font-weight: 500; line-height: 1.3; }

/* calendar: no availability shown (the employee doesn't know it); the asked day goes marigold, green once Eric confirms */
.fw-flow .bf-head b { font: 400 1.85em/1 var(--serif); letter-spacing: 0; }
.fw-flow .bf-nav__btn { background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); }
.fw-flow .bf-nav__month { font-weight: 600; }
.fw-flow .bf-dow { color: var(--ink-soft); font-weight: 600; }
.fw-flow .bf-day { background: transparent; font-weight: 500; }
.fw-flow .bf-day.is-pick { box-shadow: inset 0 0 0 1.5px transparent; transition: background-color calc(var(--bf-hover-dur) / var(--bf-speed)) ease, color .4s ease, box-shadow calc(var(--bf-hover-dur) / var(--bf-speed)) ease; }
.fw-flow.bf-on-hover .bf-day.is-pick { box-shadow: inset 0 0 0 1.5px var(--ink); }
.fw-flow .bf-day::before { background: var(--marigold) radial-gradient(circle, var(--kelly) 0 70%, transparent 71%) center / 0 0 no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--ink); transition: opacity calc(var(--bf-select-dur) / var(--bf-speed)) ease, background-size .5s cubic-bezier(.45, .05, .3, 1); }
.fw-flow.bf-on-select .bf-day.is-pick { color: var(--ink); }
.fw-flow.fw-done .bf-day.is-pick { color: #fff; }
.fw-flow.fw-done .bf-day.is-pick::before { background-size: 150% 150%; }

/* times: neutral pills; the asked one splits into time + a pending marigold request, then merges green */
.fw-flow .bf-times__date { color: var(--ink-soft); font-weight: 500; }
.fw-flow .bf-slots { width: var(--fw-slot-w); }
.fw-flow .bf-slot__time { border: 1.5px solid var(--hair); color: var(--ink-soft); font-size: .94em; }
.fw-flow.bf-on-slotHover .bf-slot.is-pick .bf-slot__time { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.fw-flow .bf-slot__book { border: 1.5px dashed var(--ink); color: var(--ink); font-weight: 600;
  transition: left calc(var(--bf-split-dur) / var(--bf-speed)) var(--bf-ease),
              opacity calc(var(--bf-split-dur) * .5 / var(--bf-speed)) ease,
              background-color calc(var(--bf-split-dur) / var(--bf-speed)) ease,
              right calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease),
              top calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease),
              bottom calc(var(--bf-merge-dur) / var(--bf-speed)) var(--bf-ease),
              box-shadow .35s ease calc(var(--bf-merge-dur) * .5 / var(--bf-speed)); }
.fw-flow .bf-slot__label, .fw-flow .bf-slot__done { font-size: .86em; }
.fw-flow .bf-slot__label { color: var(--ink); }
.fw-flow .bf-slot__done { color: #fff; }
.fw-flow .bf-slot__done svg { width: 1.25em; height: 1.25em; }
.fw-flow.bf-on-split .bf-slot.is-pick .bf-slot__time { right: calc(60% + var(--bf-gap) / 2); }
.fw-flow.bf-on-split .bf-slot.is-pick .bf-slot__book { left: calc(40% + var(--bf-gap) / 2); }
.fw-flow.bf-on-merge .bf-slot.is-pick .bf-slot__time { right: calc(100% - .5em); }
.fw-flow.bf-on-merge .bf-slot.is-pick .bf-slot__book { left: calc(var(--bf-grow-x) * -1); border-style: solid; box-shadow: 3px 3px 0 var(--ink); }

/* the owner's row: waiting, then Eric's tap */
.fw-owner { width: var(--fw-slot-w); margin: 1.25em auto 0; display: flex; align-items: center; justify-content: space-between; gap: .6em;
  opacity: 0; transform: translateY(.6em); transition: opacity .4s ease, transform .5s var(--ease); }
.fw-flow.fw-wait-on .fw-owner { opacity: 1; transform: none; }
.fw-status { display: grid; font-size: .86em; font-weight: 600; }
.fw-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; transition: opacity .35s ease; }
.fw-status i { flex: none; }
.fw-wait i { width: .7em; height: .7em; border-radius: 50%; background: var(--marigold); border: 1.5px solid var(--ink); }
.fw-flow.fw-wait-on .fw-status i { flex: none; }
.fw-wait i { animation: fw-pulse 1.6s ease-in-out infinite; }
@keyframes fw-pulse { 50% { box-shadow: 0 0 0 .3em var(--tint); } }
.fw-only { opacity: 0; }
.fw-only i { width: .7em; height: .7em; border-radius: 50%; background: var(--kelly); border: 1.5px solid var(--ink); }
.fw-flow.fw-done .fw-wait { opacity: 0; }
.fw-flow.fw-done .fw-only { opacity: 1; transition-delay: .25s; }
.fw-confirm { position: relative; flex: none; padding: .62em 1.15em .66em; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--cream); font-size: .9em; font-weight: 600; line-height: 1; box-shadow: 0 3px 0 var(--cobalt);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, opacity .35s ease .15s; }
.fw-flow.fw-tap .fw-confirm { transform: translateY(2px); box-shadow: 0 1px 0 var(--cobalt); background-color: #000; }
.fw-flow.fw-done .fw-confirm { opacity: 0; }

/* Eric's cursor (the homepage's lra-cursor: ink arrow, a name tag) */
.fw-cursor { position: absolute; left: calc(56% - 4px); top: calc(80% - 3px); z-index: 3; width: 24px; height: 24px; opacity: 0; pointer-events: none; }
.fw-arrow { display: block; width: 24px; height: 24px; transform-origin: 4px 3px; }
.fw-tag { position: absolute; top: 17px; left: 16px; padding: 2px 9px; border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--pink); color: var(--ink); font: 600 12px/17px var(--sans); white-space: nowrap; opacity: 0; transform-origin: 10px 0; }
.fw-flow.fw-cursor-on .fw-cursor { animation: fw-cursor-in .85s cubic-bezier(.25, .7, .3, 1) both; }
.fw-flow.fw-cursor-on .fw-tag { animation: fw-tag-pop .35s cubic-bezier(.34, 1.36, .64, 1) .45s both; }
.fw-flow.fw-tap .fw-arrow { animation: fw-press .35s ease both; }
.fw-flow.fw-cursor-on.fw-done .fw-cursor { animation: fw-cursor-out .45s ease .7s both; }
.fw-flow.fw-cursor-on.fw-done .fw-tag { opacity: 1; animation: none; }
@keyframes fw-cursor-in { 0% { opacity: 0; transform: translate(110px, 64px); } 35% { opacity: 1; } 60% { transform: translate(30px, 11px); } 100% { opacity: 1; transform: none; } }
@keyframes fw-press { 0%, 100% { transform: none; } 40% { transform: translate(1px, 1px) scale(.92); } }
@keyframes fw-tag-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes fw-cursor-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(14px, 10px); } }

/* phones: the part stacks the columns; the asked slot takes a full row so the split has room */
@container (max-width: 639px) {
  .fw-flow .bf-card { font-size: clamp(12px, calc(100cqi / 25), 15px); max-width: 30em; }
  .fw-flow .bf-slots { width: 100%; }
  .fw-flow .bf-slot.is-pick { grid-column: 1 / -1; }
  .fw-flow .bf-reveal > .bf-col { box-shadow: inset 0 1.5px var(--ink); }
  .fw-owner { width: 100%; margin: 1em 0 1.2em; }        /* room under the row for Eric's tag */
  .fw-rows { grid-template-columns: 1fr 1fr; column-gap: 1em; margin-top: 1em; }
  .fw-flow .bf-title { font-size: 1.85em; }
  .fw-flow .bf-col { padding-top: 1em; padding-bottom: 1.1em; }
  .fw-flow .bf-rule { margin-top: 2.1em; }
  .fw-flow .bf-who { margin-top: 2em; }
  .fw-rows div:nth-child(2n) { display: none; }          /* phones: What + When only (Where, Callback on wide) */
  .fw-flow .bf-grid { --cell: 2.45em; --dot: 2.25em; }
  .fw-cursor { left: calc(30% - 4px); }
}
@media (max-width: 560px) { .fw-stage { padding-top: 56px; } .fw-flow .bf-card { box-shadow: 5px 5px 0 var(--ink); } }
@media (prefers-reduced-motion: reduce) { .fw-flow .fw-cursor { display: none; } .fw-status i { flex: none; }
.fw-wait i { animation: none !important; } }

/* homepage frame: its own band between the trust section and the FAQ */
.fw-sec { padding: 96px 0 104px; background: var(--cream); border-top: 1.5px solid var(--ink); }
.fw-sec[hidden], .ft[hidden] { display: none; }
@media (max-width: 640px) { .fw-sec { padding: 72px 0 80px; } }