/* /coffee: the guide page.
   Phone first: you read this standing at the machine. The drawing is pinned
   in the top two thirds of the screen; the steps scroll through the third
   below it, tucking a little way under its edge. The wave menu runs along
   the bottom. Wide screens put the drawing beside the text.

   Layout only. Colours, type scale and spacing tokens come from /style.css;
   nothing here sets a font-size outside that scale. The one colour this page
   adds is the marker white, for pointing at parts of the drawing.

   --stage-anchor is read by main.js: where, as a share of the stage height
   from the top, the scene's centre should sit. */

:root {
  --mark: #FFFFFF;
  --stage-anchor: 0.5;
  --stage-h: 64vh;
  --tuck: 2.5rem; /* how far the text slides under the drawing's edge */
}

@supports (height: 1dvh) {
  :root { --stage-h: 64dvh; }
}

html {
  scroll-behavior: smooth;
  /* no scrollbar here: the guide loops, so its thumb would only jump back
     each round, and the wave menu already shows where you are. It also lets
     the tally's tab meet the screen's edge on a computer. */
  scrollbar-width: none;
  /* a scroll that ends near a step settles on it */
  scroll-snap-type: y proximity;
}

/* The end of a step's text (main.js): a second place to settle, at the
   screen's usable bottom above the wave menu, for a step too tall to show
   whole. Otherwise snapping would keep its end out of reach. */
.step__end { display: block; height: 0; }

.step--long .step__end {
  scroll-snap-align: end;
  scroll-margin-bottom: 4rem;
}

/* On a phone a quick swipe goes far: here it stops at the next step instead
   of flying past (and, on a long step, first at its end). */
@media (max-width: 720px) {
  html { scroll-snap-type: y mandatory; }
  .step,
  .step--long .step__end { scroll-snap-stop: always; }
}

html::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* a way back, top left: the wordmark, small, over the drawing's corner */
.home {
  position: fixed;
  top: clamp(1rem, 2.5vw, 2rem);
  left: max(var(--edge), calc((100% - var(--measure)) / 2 + var(--edge)));
  z-index: 6;
  display: block;
  line-height: 0;
}

.home svg {
  display: block;
  width: clamp(4.5rem, 8vw, 6rem);
  height: auto;
  fill: var(--ink);
}

.home:hover svg { fill: var(--ink-muted); }

/* the language, top right: pinned here as well as in /style.css, level with the wordmark */
.langtoggle {
  position: fixed;
  top: max(clamp(1rem, 2.5vw, 2rem), env(safe-area-inset-top));
  right: max(var(--edge), calc((100% - var(--measure)) / 2 + var(--edge)));
  z-index: 6;
}

.guide {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* the drawing: pinned at the top, opaque, the text passes beneath its edge */
.stage {
  position: sticky;
  top: 0;
  z-index: 1;
  height: var(--stage-h);
  margin: 0;
  background: var(--paper);
}

/* the text runs out into opacity as it slides under the drawing's edge */
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--tuck);
  background: linear-gradient(to bottom, var(--paper), transparent);
  pointer-events: none;
}

.stage > canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y; /* the page still scrolls over the canvas on touch */
}

/* ---------- pointers: markers the steps place on the drawing ---------- */

.stage .pointers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pointer .dot { fill: var(--mark); }

.pointer .ring {
  fill: none;
  stroke: var(--mark);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 1.8s ease-out infinite;
}

.pointer .arrow {
  fill: none;
  stroke: var(--mark);
  stroke-width: 4;
  stroke-linecap: round;
}

.pointer .head { fill: var(--mark); }

/* ---------- where the machine is: a pin in the drawing's corner ---------- */
/* Fixed to the stage, not to the model, so it holds still while the drawing
   turns. It arrives a moment after the view has settled, dropping in once. */

.where {
  /* the fourth corner: wordmark top left, language top right, menu bottom
     left, and this bottom right of the drawing, text hugging the pin */
  position: absolute;
  right: 0;
  bottom: clamp(1rem, 4vh, 2.5rem);
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.6em;
  text-align: right;
  font-size: var(--t-meta);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 400ms ease-out, transform 500ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: none;
}

.where.is-on {
  opacity: 1;
  transform: none;
  transition-delay: 1400ms; /* let the view land first */
  pointer-events: auto;
}

.where:not([href]) { cursor: default; }
.where[href]:hover .where__place { text-decoration: underline; }

.where svg {
  width: 2.1em;
  height: auto;
  flex: none;
  fill: var(--mark);
}

.where .where__hole { fill: var(--paper); }

.where__text { display: grid; }


@media (prefers-reduced-motion: reduce) {
  .where { transform: none; transition: opacity 300ms; }
}

@keyframes pulse {
  from { transform: scale(0.6); opacity: 0.9; }
  to   { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pointer .ring { animation: none; opacity: 0.6; }
}

/* ---------- the steps: through the third below the drawing ---------- */

.steps {
  position: relative;
  margin: 0;
  padding: 0 0 30vh; /* an <ol>: no indent, so the text lines up with the wordmark and the dots */
  list-style: none;
}

.step {
  min-height: calc(100vh - var(--stage-h));
  min-height: calc(100dvh - var(--stage-h));
  display: grid;
  align-content: start;
  scroll-margin-top: var(--stage-h); /* an anchor jump, or a snap, lands the step right under the drawing */
  scroll-snap-align: start;
}

.step__text {
  display: grid;
  gap: 0.6em;
  max-width: 40ch;
  padding: 1.25rem 0 4.5rem; /* the menu needs the bottom */
}

.step h1,
.step h2 {
  margin: 0;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.step h1 { font-size: var(--t-action); }
.step h2 { font-size: var(--t-intro); }
.step p { font-size: var(--t-base); }

.step .hint,
.step .back { color: var(--ink-muted); font-size: var(--t-meta); }

/* the scroll cue, on the first and last step: an arrow that nods downward */
.step .cue {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.3em;
  font-size: var(--t-base);
  color: var(--ink);
}

.cue svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: nod 1.8s ease-in-out infinite;
}

@keyframes nod {
  0%, 100% { translate: 0 -2px; }
  50% { translate: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .cue svg { animation: none; }
}

/* the name never breaks across lines */
.nowrap { white-space: nowrap; }

/* ---------- panels: things that take the drawing's place ---------- */
/* The tally, the passport and the invite stand in the stage
   instead of the machine, so each fits on one screen. main.js names the one
   showing in data-panel; the drawing fades out under it. */

.stage > canvas,
.stage .pointers { transition: opacity 300ms; }

.stage[data-panel] > canvas,
.stage[data-panel] .pointers,
.stage[data-panel] .where {
  opacity: 0;
  pointer-events: none; /* no turning a machine nobody sees */
  transition-delay: 0s; /* the pin waits for the view to land, but leaves at once */
}

.panel {
  position: absolute;
  inset: 4.5rem 0 1rem; /* under the wordmark, inside the drawing's box */
  z-index: 3;
  max-width: 26rem;
  margin-inline: auto;
  display: grid;
  align-content: center;
  gap: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms, visibility 0s 250ms;
}

.stage[data-panel="passport"] .passport,
.stage[data-panel="invite"] .invite {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms 150ms;
}

.panel p { margin: 0; }

.panel .panel__title {
  font-size: var(--t-intro);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.panel .panel__note { color: var(--ink-muted); font-size: var(--t-meta); }

/* what to do here: plain words, underlined, in ink */
.panel .panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

/* the way on or back: the same, quieter */
.panel .panel__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.panel .panel__actions button,
.panel .panel__links button {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.panel .panel__links button {
  font-size: var(--t-meta);
  color: var(--ink-muted);
}

.panel .panel__actions button[hidden],
.panel .panel__links button[hidden] { display: none; }

/* ---------- the tally: how's it pouring? (tally.js) ---------- */
/* Four answers as a manual's detail callouts, the chosen one white, the
   colour that points at things. The answer: the tip, today's cups as pen
   strokes in bundles of five, one fact about them all. */

.tally__q,
.tally__a { display: grid; gap: 1rem; }

.tally:is([data-state="done"], [data-state="failed"]) .tally__q,
.tally:is([data-state="ask"], [data-state="sending"]) .tally__a { display: none; }

/* .tally before each: the step's own `.step p` would win otherwise */
.tally p { margin: 0; }

.tally .tally__ask {
  font-size: var(--t-intro);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.tally__pours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 1rem;
}

.tally button {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-meta);
  line-height: 1.2;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: opacity 200ms;
}

.tally button svg {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  overflow: visible;
}

.c-frame {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: fill 160ms;
}

.c-basket,
.s {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.s { fill: none; stroke-width: 2; stroke-linecap: round; }
.s--band { fill: var(--paper); stroke-width: 1.5; }
.s--drop { fill: var(--ink); stroke: none; }

.tally button:hover .c-frame,
.tally button:focus-visible .c-frame,
.tally button[aria-pressed="true"] .c-frame,
.tally .tally__chosen .c-frame { fill: var(--mark); }

.tally button:focus-visible { outline: none; }
.tally button:focus-visible span { text-decoration: underline; }
.tally button:disabled { cursor: default; }

/* sending: the other three step back */
.tally[data-state="sending"] .tally__pours button[aria-pressed="false"] { opacity: 0.35; }

.tally .tally__note,
.tally .tally__count { color: var(--ink-muted); font-size: var(--t-meta); }

/* the answer: your callout beside its tip */
.tally__mine {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
}

.tally .tally__chosen svg { width: 4.5rem; height: 4.5rem; }

.tally .tally__tip { font-size: var(--t-base); }

.invite__note:empty,
.tally__a p:empty,
.tally__sheet:empty { display: none; }

.tally__sheet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.tally__sheet svg {
  height: 3.2rem;
  width: auto;
  overflow: visible;
}

.tally__more { color: var(--ink-muted); font-size: var(--t-meta); }

/* the strokes: one pen */
.t {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}

/* yours, the last one, written in as you watch */
.t--new {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 450ms 400ms ease-in forwards;
}

.tally .tally__fact { font-size: var(--t-meta); }

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t--new { animation: none; stroke-dashoffset: 0; }
}

/* ---------- the passport: the machine's own (passport.js) ---------- */
/* An open booklet turned on its side so it fits a phone: two white pages
   with the e-r wave as guilloche, stitched along the spine. The data page
   holds the photo, who it is and the machine-readable lines; the visa page a
   rubber stamp per stop, worn through an SVG filter, the one for where it is
   now inked yellow. */

.passport { justify-items: center; }

.passport__ink { position: absolute; }

.book {
  position: relative;
  /* as tall as the stage allows, two pages of about 1.45 : 1 */
  width: min(100%, 26rem, calc((var(--stage-h) - 6.5rem) * 0.72));
  aspect-ratio: 0.72;
  display: grid;
  grid-template-rows: 1fr 1fr;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--mark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12'%3E%3Cpath d='M0 6Q12 0 24 6T48 6' fill='none' stroke='%23F5F24E' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 48px 12px;
}

.book__page {
  position: relative;
  min-height: 0;
  padding: 0.8rem 0.9rem;
}

.book__page + .book__page { border-top: 1.5px dashed var(--ink); } /* the stitching */

.panel .book__head {
  font-size: var(--t-meta);
  color: var(--ink-muted);
}

.book__data {
  display: grid;
  grid-template-columns: 28% 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem 0.9rem;
}

.book__data .book__head,
.book__mrz { grid-column: 1 / -1; }

.book__photo {
  align-self: start;
  aspect-ratio: 3 / 4;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}

.book__photo {
  position: relative;
  cursor: pointer;
}

.book__photo canvas { display: block; width: 100%; height: 100%; }

/* googly eyes: a white disc, and a pupil that hangs from a swinging middle */
.googly {
  position: absolute;
  width: 24%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--mark);
}

.googly__swing {
  position: absolute;
  inset: 0;
  rotate: 8deg; /* resting a little off plumb, as they do */
}

.googly--1 .googly__swing { rotate: -6deg; }

.googly__pupil {
  position: absolute;
  left: 22%;
  top: 40%;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
}

.googly__swing.is-wobbling { animation: googly 1.6s cubic-bezier(0.3, 0.6, 0.4, 1) both; }
.googly--1 .googly__swing.is-wobbling { animation-duration: 1.9s; animation-delay: 60ms; }

@keyframes googly {
  0%   { rotate: 0deg; }
  14%  { rotate: 170deg; }
  30%  { rotate: -120deg; }
  46%  { rotate: 80deg; }
  62%  { rotate: -40deg; }
  78%  { rotate: 20deg; }
  100% { rotate: 8deg; }
}

@media (prefers-reduced-motion: reduce) {
  .googly__swing.is-wobbling { animation: none; }
}

.book__fields {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  gap: 0.15rem 0.6rem;
  margin: 0;
  font-size: var(--t-meta);
  line-height: 1.2;
}

.book__fields div { display: contents; }
.book__fields dt { color: var(--ink-muted); }
.book__fields dd { margin: 0; }

.book__mrz {
  width: 100%;
  height: auto;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 13px;
  fill: var(--ink);
}

.book__visas {
  display: grid;
  grid-template-rows: auto 1fr;
}

.book__stamps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel .book__no {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  font-size: var(--t-meta);
  color: var(--ink-muted);
}

/* the passport's close, and the tally folder's: a yellow dot stuck on the corner */
.book__close,
.folder__close {
  position: absolute;
  z-index: 3;
  top: -0.9rem;
  right: -0.7rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font: inherit;
  font-size: var(--t-item);
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.book__close:hover,
.book__close:focus-visible,
.folder__close:hover,
.folder__close:focus-visible { background: var(--mark); outline: none; }

.stamp {
  display: grid;
  justify-items: center;
  gap: 0.15em;
  max-width: 100%;
  padding: 0.7rem 0.8rem;
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  outline: 1.5px solid var(--ink);
  outline-offset: -7px;
  color: var(--ink);
  font-size: var(--t-meta);
  text-align: center;
  line-height: 1.15;
  text-decoration: none;
  filter: url(#stamp-ink);
}

.stamp--oval { border-radius: 50%; padding: 1.1rem 1.2rem; }
.stamp--dash { border-radius: 2px; outline-style: dashed; }
.stamp--now { background: var(--paper); }

.stamp__now,
.stamp__detail,
.stamp__when { color: var(--ink-muted); }

a.stamp:hover .stamp__place { text-decoration: underline; }

/* ---------- the coffee break invite: the last spread (invite.js) ---------- */

/* a white polaroid on the yellow page, a little askew */
.invite__card {
  height: 36vh;
  height: min(36dvh, 26rem);
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  justify-self: start;
  transform: rotate(-1.5deg);
}

/* the camera, on a computer: a polaroid that pops up with the live picture
   in its window, a shutter under it */
.camera[open] {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: min(90vw, 26rem);
  padding: 1.1rem 1.1rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--mark);
  rotate: -1.5deg;
}

.camera::backdrop { background: rgba(26, 26, 26, 0.55); }

.camera__window {
  position: relative;
  width: 100%;
  aspect-ratio: 1; /* the card's window is square */
  overflow: hidden;
  background: var(--paper);
}

.camera__window video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera__window video.is-mirrored { scale: -1 1; }

.camera__flash {
  position: absolute;
  inset: 0;
  background: var(--mark);
  opacity: 0;
  pointer-events: none;
}

.camera__flash.is-firing { animation: flash 350ms ease-out; }

@keyframes flash {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* a shutter: a yellow button ringed in white and ink */
.camera__shutter {
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 0.35rem var(--mark), inset 0 0 0 calc(0.35rem + 1.5px) var(--ink);
  cursor: pointer;
}

.camera__shutter:hover,
.camera__shutter:focus-visible { background: var(--mark); outline: none; }

.camera__cancel {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-meta);
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .camera__flash.is-firing { animation: none; }
}

/* what sends it: the one round button on the page */
.invite-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.35em 1.1em 0.35em 0.7em;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  cursor: pointer;
  transition: background 160ms;
}

.invite-button:hover,
.invite-button:focus-visible { background: var(--mark); outline: none; }

.invite-button svg {
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 721px) {
  .invite__card {
    height: 55vh;
    height: min(55dvh, 34rem);
  }
}

/* ---------- the tally's folder, at the screen's right edge (tally.js) ---------- */
/* A white folder with a tally sheet inside it, a little askew, its margin
   punched. The folder's tab (a shot
   pouring into a cup: help with the stream is the reason to pull it) always
   sticks out of the screen's edge. It comes out on the stream step by
   itself, or whenever someone pulls the tab: on a phone as a drawer pulled
   out over the upper part of the drawing; on a wide screen it flies out
   into the text column and floats there, tilted, like a card. */

.folder__holder {
  position: fixed;
  top: 5.25rem; /* its close clear of the language toggle */
  right: 0;
  z-index: 7;
  width: calc(100% - 3.6rem); /* room for the tab to stick out on the left when it's open */
  translate: 100% 0;
  transition: translate 380ms cubic-bezier(0.2, 0.8, 0.2, 1), rotate 380ms ease;
}

html.folder-open .folder__holder { translate: none; }

.folder__tab {
  position: absolute;
  top: 1.2rem;
  right: calc(100% - 1.5px); /* over the folder's edge: tab and folder one outline */
  z-index: 1;
  padding: 0.5rem 0.45rem 0.5rem 0.55rem;
  border: 1.5px solid var(--ink);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: var(--mark);
  line-height: 0;
  cursor: pointer;
  transition: padding 160ms ease;
}

.folder__tab svg,
.tally__tab-icon svg {
  width: 2.2rem;
  height: 2.2rem;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.folder__tab, .tally__tab-icon) .p-part { fill: var(--paper); stroke-width: 1.8; }
:is(.folder__tab, .tally__tab-icon) .p-line { stroke-width: 1.8; }
:is(.folder__tab, .tally__tab-icon) .p-grip { stroke-width: 3.4; }

/* the tab's picture inside the sentence that points to it */
.tally .tally__tab-icon svg {
  width: 1.5em;
  height: 1.5em;
  margin: -0.3em 0.1em;
  vertical-align: middle;
}

.folder__tab:hover,
.folder__tab:focus-visible {
  padding-left: 0.8rem;
  outline: none;
}

/* the folder: its edge showing round the sheet */
.folder {
  position: relative;
  padding: 0.7rem 0.6rem 0.8rem 0.7rem;
  border: 1.5px solid var(--ink);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: var(--mark);
}

/* the sheet: white, a little askew, two holes punched in its margin */
.folder__sheet {
  position: relative;
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem 1.1rem 2rem;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--mark);
  rotate: -0.8deg;
}

.folder__sheet::before,
.folder__sheet::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 32%;
  width: 0.65rem;
  height: 0.65rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--mark); /* the folder showing through */
}

.folder__sheet::after { top: 68%; }

/* the form's printed name, as a sheet off a pad would have it */
.tally .folder__form {
  font-size: var(--t-meta);
  color: var(--ink-muted);
}

/* on a phone the folder meets the screen's edge: its close sits on the top edge, in from the corner */
.folder__close { right: 0.8rem; }

/* compact: on a phone the folder keeps to the upper part of the screen */
.folder .tally__pours { gap: 0.5rem 0.8rem; }
.folder .tally button svg { width: 2.9rem; height: 2.9rem; }

/* on the white sheet the callouts' circles are white, and yellow once chosen */
.folder .c-frame { fill: var(--mark); }
.folder .tally button:hover .c-frame,
.folder .tally button:focus-visible .c-frame,
.folder .tally button[aria-pressed="true"] .c-frame,
.folder .tally .tally__chosen .c-frame { fill: var(--paper); }

.tally .tally__nudge { color: var(--ink-muted); font-size: var(--t-meta); }

/* the next cup, from the answer: a plain link */
.tally .tally__again {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-meta);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* pointing out the tab is only for those who didn't come in by it, and
   only with the question: the answer has enough on it */
.folder.knows-tab .tally__nudge,
.folder .tally:is([data-state="done"], [data-state="failed"]) .tally__nudge { display: none; }

/* shut on the stream step, the tab beckons like the drawing's pointers */
html[data-step="stream"]:not(.folder-open) .folder__tab {
  padding-left: 0.9rem;
  animation: beckon 1.8s ease-out infinite;
}

@keyframes beckon {
  from { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.95); }
  to   { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

/* out of the way of the passport, tab and all */
html[data-panel="passport"] .folder__holder {
  translate: calc(100% + 4rem) 0;
  visibility: hidden;
  transition: translate 300ms ease, visibility 0s 300ms;
}

html.debug .folder__holder { display: none; }

/* a wide screen: the folder flies out into the text column, tilted, and
   lands with a little overshoot; the four answers sit in a row */
@media (min-width: 721px) {
  /* it lands in the text column: the same measure, edge and gap as .guide's grid (1.7fr : 1fr) */
  .folder__holder {
    top: 6.5rem;
    right: calc((100% - min(100%, var(--measure))) / 2 + var(--edge));
    width: calc((min(100%, var(--measure)) - 2 * var(--edge) - var(--gap)) / 2.7);
    /* shut: just past the screen's edge, the tab still showing */
    translate: calc(100% + (100vw - min(100vw, var(--measure))) / 2 + var(--edge)) 0;
    transition: translate 520ms cubic-bezier(0.3, 1.3, 0.4, 1), rotate 520ms cubic-bezier(0.3, 1.3, 0.4, 1);
  }

  html.folder-open .folder__holder { rotate: -2.5deg; }

  .folder {
    border-right: 1.5px solid var(--ink);
    border-radius: 12px;
  }

  .folder__close { right: -0.7rem; } /* a card all round: on its corner, like the passport's */

  .folder__sheet { gap: 0.7rem; }

  .folder .tally__pours { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .folder .tally__pours button {
    flex-direction: column;
    gap: 0.35em;
    text-align: center;
  }

  /* while the card floats over the text column, the current step's text
     moves down out from under it (only drawn lower: no step changes its height) */
  .step__text { transition: translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  html.folder-open .step.is-current .step__text { translate: 0 var(--clear, 10rem); } /* --clear: tally.js */
}

@media (prefers-reduced-motion: reduce) {
  .folder__holder,
  .step__text { transition: none; }
  html[data-step="stream"] .folder__tab { animation: none; }
}

/* ---------- the step menu: dots in the shape of the wave ---------- */
/* The front page's wave, as one ink dot per step along its centre line. The
   current one is bigger, its name beside it. The path itself is invisible;
   main.js lays the dots along it. */

.stepnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.7rem var(--edge) max(0.7rem, env(safe-area-inset-bottom));
  font-size: var(--t-meta);
  color: var(--ink-muted);
  background: linear-gradient(to top, var(--paper) 70%, transparent);
}

.stepnav svg {
  display: block;
  width: clamp(6rem, 26vw, 8rem);
  height: auto;
  overflow: visible;
  flex: none;
  touch-action: none; /* a drag along the dots scrubs steps, it doesn't scroll the page */
}

.stepnav .ribbon { fill: none; stroke: none; }

.stepnav a { cursor: pointer; }

.stepnav a circle {
  fill: var(--ink);
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  transition: transform 160ms;
}

.stepnav a:hover circle { transform: scale(0.73); }

.stepnav a[aria-current] circle { transform: scale(1); }

.stepnav__label { white-space: nowrap; }

/* screenshot mode: the canvas is the page */
html.debug .stage { height: 100vh; }
html.debug .steps,
html.debug .stepnav,
html.debug .home,
html.debug .pointers { display: none; }
html.debug .guide { padding: 0; max-width: none; }

/* ---------- wide: drawing beside the text ---------- */
@media (min-width: 721px) {
  :root { --stage-h: 100vh; }

  @supports (height: 1dvh) {
    :root { --stage-h: 100dvh; }
  }

  .guide {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: var(--gap);
  }

  .stage {
    align-self: start;
    background: none; /* nothing passes behind it here */
  }

  .stage::after { display: none; }

  .steps {
    padding-block: 20vh 30vh;
  }

  .step {
    min-height: 70vh;
    align-content: center;
    padding-block: 10vh;
    scroll-margin-top: 15vh;
  }

  .step__text { padding: 0; }

  /* the menu tucks under the drawing, left */
  .stepnav {
    right: auto;
    left: max(var(--edge), calc((100% - var(--measure)) / 2 + var(--edge)));
    bottom: clamp(1rem, 3vh, 2rem);
    padding: 0;
    background: none;
  }

  .stepnav svg { width: clamp(9rem, 16vw, 14rem); }
}