/* =========================================================================
   ADDED TIME — the focus timer, the match clock (focus-timer.html)
   Builds on styles.css (tokens, header, footer, buttons, .steps, .faq).
   Mirrors the app's Match screen: a dark split-flap plate counting play up,
   an orange whistle disc (tan when held), ADDED TIME flaps in orange when
   held, and marks in ink. Orange belongs to the match layer only: the disc,
   added time and the match chips. Breaks are ink.
   ========================================================================= */

.ft-page {
  /* The plate is dark in both schemes, as the app's Match screen is. */
  --flap-top:    #29282E;
  --flap-bottom: #1F1E24;
  --flap-ink:    #EDEAE1;
  --flap-held:   rgba(237,234,225,.42);
  --flap-seam:   rgba(0,0,0,.62);
  --plate-edge:  transparent;
  --held-disc:   #A9784E;   /* the app's whistle, held */
  --ghost:       color-mix(in srgb, var(--ink) 14%, transparent);
  --emboss:      rgba(255,255,255,.7);
  --ease-out:    cubic-bezier(.2,.8,.25,1);
  --mono-fig:    ui-monospace, "SF Mono", "SFMono-Regular", "DM Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  .ft-page {
    --flap-top:    #25242A;
    --flap-bottom: #1B1A20;
    --plate-edge:  #2E2D33;   /* near-black ground: delineate the plate */
    --ghost:       color-mix(in srgb, var(--ink) 15%, transparent);
    --emboss:      rgba(0,0,0,.65);
  }
}

/* Anything the script hides stays hidden, whatever display it was given. */
.ft-page [hidden] { display: none !important; }

/* ---- The clock section --------------------------------------------------- */
/* The whole tool, from the title to "Sound & settings", should fit a laptop
   window without scrolling, so its spacing and the clock scale with the
   window's height as well as its width. */
.ft { padding-top: clamp(.9rem, min(3.5vw, 3vh), 2.4rem); padding-bottom: clamp(1.4rem, 4vw, 2.4rem); }
.ft__wrap { --wrap: 720px; text-align: center; }

.ft__intro .overline { margin-bottom: clamp(.25rem, 1vh, .55rem); }
.ft__title {
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.05rem);
  letter-spacing: .1em;
  line-height: 1.1;
}
.ft__sub {
  margin: clamp(.3rem, 1vh, .6rem) auto 0; max-width: 58ch;
  color: var(--ink-muted); font-size: .98rem; line-height: 1.5;
}
/* Three plain steps: what to actually do. */
.ft-howto {
  list-style: none; margin: clamp(.45rem, 1.4vh, .9rem) auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem 1.5rem;
  font-size: .95rem; color: var(--ink);
}
.ft-howto li { display: inline-flex; align-items: center; gap: .5em; }
.ft-howto b {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; flex: none;
  border-radius: 50%; border: 1px solid var(--ink-muted);
  font: 500 .72rem var(--font-mono); color: var(--ink-muted);
}


/* ---- Lengths: a segmented control ---------------------------------------- */
.ft-plan {
  display: inline-flex; gap: 3px; margin: clamp(.6rem, min(3vw, 2.2vh), 1.5rem) auto 0; padding: 3px;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--surface-sink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
}
.ft-plan__opt { position: relative; display: inline-flex; }
.ft-plan__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ft-plan__opt > span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 clamp(.8rem, 2.6vw, 1.15rem); border-radius: 999px;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.ft-plan__opt:hover > span { color: var(--ink); }
.ft-plan__opt input:checked + span {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink-muted), 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 10px -6px rgba(26,23,18,.45);
}
.ft-plan__opt input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .ft-plan__opt input:checked + span { box-shadow: 0 0 0 1px var(--ink-muted), 0 1px 0 rgba(255,255,255,.06) inset, 0 4px 10px -6px #000; }
}

.ft-plan__note {
  margin: clamp(.3rem, .9vh, .55rem) auto 0; max-width: none;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-muted);
}
.ft-custom {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem;
  margin: .9rem auto 0; max-width: 580px;
}
.ft-field {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ft-field input {
  width: 3.8em; min-height: 36px; padding: .2rem .4rem; text-align: center;
  font: 500 .95rem var(--font-mono); color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm);
}
.ft-field input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.ft-field em { font-style: normal; text-transform: none; letter-spacing: .02em; }
.ft-custom__note { flex-basis: 100%; max-width: none; font-size: .8rem; color: var(--ink-muted); }

/* ---- The stage: a fixed-size box, so nothing below it ever moves ---------- */
.ft-clock {
  --th:   clamp(4.2rem, min(19vw, 12.5vh), 9.2rem);  /* tile height drives everything */
  --pad:  clamp(.6rem, min(2.4vw, 2.2vh), 1.2rem);
  --head: 1.9rem;
  --plate-h: calc(var(--th) + var(--head) + 2 * var(--pad));
  position: relative;
  height: calc(var(--plate-h) + 4.4rem);
  margin-top: clamp(.6rem, min(3vw, 2vh), 1.5rem);
}
.ft-plate {
  position: absolute; left: 50%; top: 0;
  height: var(--plate-h); max-width: 100%; white-space: nowrap;
  padding: var(--pad) clamp(.7rem, 2.6vw, 1.5rem);
  background: var(--plate); color: var(--plate-ink);
  border: 1px solid var(--plate-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-plate);
  transform: translateX(-50%);
  transform-origin: 50% 0;
  transition: transform .45s var(--ease-out);
}
/* Held: the clock shrinks and greys, and added time becomes the hero (as in the app). */
[data-phase="focus"][data-status="held"] .ft-plate { transform: translateX(-50%) scale(.6); }

.ft-plate__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--head); padding: 0 clamp(.2rem, 1.4vw, .5rem) .5rem;
}
.ft-plate__phase {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; font-size: clamp(.72rem, .66rem + .3vw, .9rem);
  color: var(--plate-ink);
}
.ft-plate__dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(232,97,26,.16);
}
[data-phase="short"] .ft-plate__dot,
[data-phase="long"]  .ft-plate__dot { background: var(--flap-ink); box-shadow: 0 0 0 3px rgba(237,234,225,.12); }
[data-status="held"] .ft-plate__dot,
[data-status="ready"] .ft-plate__dot { background: var(--flap-held); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-phase="focus"][data-status="running"] .ft-plate__dot { animation: ft-breathe 4s ease-in-out infinite; }
}
@keyframes ft-breathe { 50% { box-shadow: 0 0 0 6px rgba(232,97,26,0); } }

.ft-plate__set { display: inline-flex; gap: 5px; align-items: center; }
.ft-plate__set i { width: 9px; height: 9px; border-radius: 2px; border: 1.5px solid rgba(237,234,225,.5); }
.ft-plate__set i.is-done { background: var(--flap-ink); border-color: var(--flap-ink); }
.ft-plate__set i.is-now  { border-color: var(--accent); }
.ft-plate__set b {
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .1em;
  color: rgba(237,234,225,.62);
}

.ft-digits { display: flex; align-items: center; justify-content: center; gap: calc(var(--th) * .045); height: var(--th); }
.ft-sep {
  display: inline-block; width: calc(var(--th) * .3); text-align: center;
  font-family: var(--mono-fig); font-weight: 700; font-size: calc(var(--th) * .5); line-height: var(--th);
  color: var(--flap-ink); opacity: .7;
}
[data-status="held"] .ft-digits .flip,
[data-status="held"] .ft-digits .ft-sep { color: var(--flap-held); }

/* ---- The split-flap tile ------------------------------------------------- */
/* The app's proportions: width .72 of height, glyph .62 of height, a seam.
   Four layers: the static top half shows the NEW value, the static bottom half
   the OLD one; the top leaf (old) falls to the seam, then the bottom leaf
   (new) falls from it. A flip, not a slide. */
.flip {
  --w: calc(var(--th) * .72);
  --r: calc(var(--th) * .075);
  position: relative; display: inline-block; flex: none;
  width: var(--w); height: var(--th);
  font-family: var(--mono-fig); font-weight: 600;
  font-size: calc(var(--th) * .62); line-height: var(--th);
  font-variant-numeric: tabular-nums;
  color: var(--flap-ink);
  perspective: calc(var(--th) * 4);
  border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 20px -14px #000;
}
/* A three-digit minute (125:00 in extra time): narrower tiles, same height. */
.is-long .flip { --w: calc(var(--th) * .6); }
.flip__half, .flip__leaf {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip__half span, .flip__leaf span { position: absolute; left: 0; right: 0; height: var(--th); text-align: center; }
.flip__top, .flip__leaf--top { top: 0; background: var(--flap-top); border-radius: var(--r) var(--r) 0 0; }
.flip__bottom, .flip__leaf--bottom { bottom: 0; background: var(--flap-bottom); border-radius: 0 0 var(--r) var(--r); }
.flip__top span, .flip__leaf--top span { top: 0; }
.flip__bottom span, .flip__leaf--bottom span { bottom: 0; }
.flip::after { /* the split-flap seam */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 3;
  height: max(1.5px, calc(var(--th) * .016)); transform: translateY(-50%);
  background: var(--flap-seam);
}
.flip__leaf { z-index: 2; visibility: hidden; }
.flip__leaf--top    { transform-origin: 50% 100%; }
.flip__leaf--bottom { transform-origin: 50% 0; transform: rotateX(90deg); }
.flip.is-flipping .flip__leaf { visibility: visible; }
.flip.is-flipping .flip__leaf--top    { animation: flip-top .16s ease-in both; background: linear-gradient(var(--flap-top), #34333a); }
.flip.is-flipping .flip__leaf--bottom { animation: flip-bottom .18s var(--ease-out) .16s both; }
@keyframes flip-top    { from { transform: rotateX(0); }     to { transform: rotateX(-90deg); } }
@keyframes flip-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ---- Under the plate ------------------------------------------------------ */
.ft-caption {
  position: absolute; left: 0; right: 0; top: calc(var(--plate-h) + .65rem);
  max-width: none; margin: 0;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
  transition: opacity .25s ease;
}
[data-phase="focus"][data-status="held"] .ft-caption { opacity: 0; }

.ft-added {
  position: absolute; left: 0; right: 0; top: calc(var(--plate-h) * .6 + .55rem);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  transform-origin: 50% 0;
  transform: rotateX(-80deg) translateY(-.4rem); opacity: 0; visibility: hidden;
  transition: transform .4s var(--ease-out), opacity .25s ease, visibility 0s linear .4s;
}
[data-phase="focus"][data-status="held"] .ft-added {
  transform: none; opacity: 1; visibility: visible;
  transition: transform .5s var(--ease-out) .08s, opacity .25s ease .08s, visibility 0s;
}
.ft-added__label, .ft-added__note {
  max-width: none; margin: 0;
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem;
  letter-spacing: .2em; text-transform: uppercase;
}
.ft-added__label { display: flex; gap: .9em; }
.ft-added__held { color: var(--ink-muted); }
.ft-added__name { color: var(--accent-text); }
.ft-added__note { font-weight: 400; letter-spacing: .12em; color: var(--ink-muted); }
.ft-added__flaps {
  --th: calc(var(--plate-h) * .27);
  display: flex; align-items: center; gap: 3px; height: var(--th);
}
.ft-added__flaps .flip { color: var(--accent); }
.ft-added__flaps .flip__top, .ft-added__flaps .flip__leaf--top { background: #232227; }
.ft-added__flaps .flip__bottom, .ft-added__flaps .flip__leaf--bottom { background: #1A191E; }
.ft-added__flaps .ft-sep { color: var(--accent-text); opacity: 1; width: calc(var(--th) * .34); }

/* The chip row: half clicked over · extra time · the last block's report. */
.ft-chip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1.95rem;
  display: flex; align-items: center; justify-content: center; gap: .5em;
  max-width: none; margin: 0;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ft-chip:empty { visibility: hidden; }
.ft-chip span {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .32em .85em; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--hairline); background: var(--surface);
}
.ft-chip .is-match {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.ft-chip .is-report { text-transform: none; letter-spacing: .04em; }
.ft-chip .is-report b { font-weight: 500; color: var(--ink); text-transform: uppercase; letter-spacing: .12em; }
.ft-chip small { font-size: 1em; color: var(--ink-muted); }
/* Narrow screens: the chip wraps and grows upward into a taller stage. */
@media (max-width: 420px) {
  .ft-chip { height: auto; min-height: 1.95rem; align-items: flex-end; }
  .ft-chip span { white-space: normal; max-width: 100%; text-wrap: balance; line-height: 1.35; }
  .ft-chip small { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .ft-chip span.is-new { animation: ft-chip-in .45s var(--ease-out) both; }
}
@keyframes ft-chip-in { from { opacity: 0; transform: translateY(4px); } }

/* ---- Controls: reset · the whistle · end ------------------------------------ */
.ft-controls {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.9rem, 4vw, 1.8rem); margin-top: .4rem;
}
.ft-disc {
  position: relative; flex: none;
  width: clamp(76px, min(22vw, 11vh), 104px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: var(--accent); color: #F5F2EA;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 -2px 0 rgba(0,0,0,.12) inset,
              0 16px 30px -16px color-mix(in srgb, var(--accent) 85%, transparent);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .25s ease, transform .12s ease, box-shadow .25s ease;
}
.ft-disc:hover { filter: brightness(1.05); }
.ft-disc:active { transform: scale(.975); }
.ft-disc:focus-visible { outline: 2px solid var(--teal); outline-offset: 11px; }
[data-phase="focus"][data-status="held"] .ft-disc {
  background: var(--held-disc);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 26px -16px rgba(0,0,0,.6);
}
[data-phase="short"] .ft-disc, [data-phase="long"] .ft-disc {
  background: var(--ink); color: var(--ground);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 16px 30px -18px rgba(26,23,18,.9);
}
[data-phase="short"][data-status="held"] .ft-disc,
[data-phase="long"][data-status="held"] .ft-disc { background: var(--ink-muted); }
.ft-disc__glyph { grid-area: 1 / 1; width: 38%; height: 38%; fill: currentColor; }
.ft-disc .g-pause { display: none; }
[data-status="running"] .ft-disc .g-pause { display: block; }
[data-status="running"] .ft-disc .g-play { display: none; }
.ft-disc__ring {
  position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px);
  transform: rotate(-90deg); pointer-events: none; overflow: visible;
}
.ft-disc__ring circle {
  fill: none; stroke: var(--ink); stroke-opacity: .85; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .25s ease-out;
}
/* The ring waits a beat, so a plain press never flashes it; it fills by 1.2 s. */
.ft-disc.is-holding .ft-disc__ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.02s linear .18s; }

.ft-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 46px; min-width: 46px; padding: 0 1rem; border-radius: 999px; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
  color: var(--teal-ink); background: transparent;
  border: 1px solid color-mix(in srgb, var(--teal) 70%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, transform .12s ease;
}
.ft-btn:hover, .ft-btn.is-pressed { background: var(--teal-soft); }
.ft-btn:active { transform: translateY(1px); }
.ft-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.ft-btn svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 460px) {
  .ft-btn { padding: 0; width: 46px; }
  .ft-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The hint and the keyboard legend share a line where there's room. */
.ft-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .35rem 1.6rem; margin-top: clamp(.6rem, 1.6vh, 1.05rem);
}
.ft-hint {
  margin: 0; max-width: none; min-height: 1.3em;
  font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted);
}
.ft-keys {
  margin: 0; max-width: none;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--ink-muted);
}
.ft-keys span { margin-inline: .35em; }
kbd {
  display: inline-block; min-width: 1.9em; padding: .12em .45em; margin-right: .3em;
  font: 500 .66rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: 5px;
}
@media (hover: none) and (pointer: coarse) { .ft-keys { display: none; } }

/* The break hand-off: during a break after a block of 3′ or more, one plain link
   takes the keys line's place (focus-timer.js hides the keys meanwhile). At
   .7rem with a 1.75 line-height, one line of it is as tall as the keys line with
   its keycaps, and at 720px it fits on one line, so the row keeps its height.
   Teal, like every link here: orange belongs to the match. */
.ft-handoff {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em; line-height: 1.75;
  color: var(--teal-ink); text-wrap: balance;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--teal) 50%, transparent);
}
.ft-handoff:hover { text-decoration-color: currentColor; }
.ft-handoff:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
.ft-handoff__n { font-weight: 500; font-variant-numeric: tabular-nums; }

/* The break door (#ft-door): the first time a block of 3′ or more ends while the
   page is open, a small card in the bottom corner, never modal. A phone gets the
   App Store button; a computer that can hover gets the QR code (styles.css .qr
   decides which) and the scan line. It moves nothing on the page, so the tool
   still fits a laptop window. Ink and teal: orange belongs to the match. */
.ft-door {
  position: fixed; z-index: 30;
  left: max(.75rem, env(safe-area-inset-left)); right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 3rem .9rem 1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
}
.ft-door__body { min-width: 0; }
.ft-door__n {
  margin: 0; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.ft-door__line { margin: .2rem 0 0; font-size: .92rem; line-height: 1.4; text-wrap: balance; }
.ft-door__scan { display: none; }
.ft-door__btn { margin-top: .65rem; min-height: 44px; background: var(--ink); color: var(--ground); }
.ft-door__btn:hover { filter: brightness(1.15); }
.ft-door .qr img { box-shadow: none; border: 1px solid var(--hairline); }
.ft-door__qr:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r-sm); }
.ft-door__close {
  position: absolute; top: .3rem; right: .3rem;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-muted); cursor: pointer;
}
.ft-door__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ft-door__close:hover { color: var(--ink); background: var(--surface-sink); }
.ft-door__close:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .ft-door { left: auto; max-width: 22rem; padding: .9rem 2.9rem .9rem .9rem; }
  .ft-door__scan { display: inline; }
  .ft-door__btn { display: none; }
  .ft-door__close { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ft-door.is-opening { animation: ft-door-in .4s ease-out both; }
  @keyframes ft-door-in { from { opacity: 0; transform: translateY(10px); } }
}
@media print { .ft-door { display: none !important; } }

.ft-status { margin: .9rem auto 0; max-width: 48ch; font-size: .88rem; color: var(--ink-muted); line-height: 1.5; }

/* ---- Short windows (small laptops): tighter still, same design ----------- */
@media (min-width: 621px) and (max-height: 740px) {
  .ft { padding-top: .6rem; }
  .ft__intro .overline { display: none; }
  .ft-added { gap: .25rem; }
  .ft__title { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); }
  .ft__sub { font-size: .92rem; line-height: 1.4; }
  .ft-howto { font-size: .9rem; }
  .ft-clock { height: calc(var(--plate-h) + 4rem); }
  .ft-settings summary { min-height: 34px; }
}
/* Wide but short: the length note sits beside the picker instead of under it. */
@media (min-width: 900px) and (max-height: 740px) {
  .ft__wrap { --wrap: 980px; }
  .ft__sub { max-width: 64ch; }
  .ft-plan { vertical-align: middle; }
  .ft-plan__note { display: inline-block; vertical-align: middle; margin: 0 0 0 1.1rem; }
}
/* ---- Phones: the steps go on one line, the kicker steps aside ------------- */
@media (max-width: 620px) {
  .ft { padding-top: .6rem; }
  .ft__intro .overline { display: none; }
  .ft__sub { font-size: .9rem; line-height: 1.45; }
  .ft-howto { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; gap: .3rem .9rem; font-size: .84rem; }
  .ft-howto .h-long { display: none; }
  .ft-clock { --head: 1.6rem; }
  .ft-disc { width: clamp(68px, min(22vw, 10vh), 104px); }
  .ft-plan__note { font-size: .68rem; letter-spacing: .02em; }
}

/* ---- Settings ------------------------------------------------------------ */
.ft-settings { margin: clamp(.2rem, 1vh, 1.1rem) auto 0; max-width: 470px; text-align: left; }
.ft-settings summary {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-ink);
}
.ft-settings summary::-webkit-details-marker { display: none; }
.ft-settings summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.ft-settings[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.ft-settings summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.ft-settings__body {
  margin-top: .4rem; padding: .5rem 1.1rem;
  background: var(--surface); border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  box-shadow: var(--shadow-card);
}
.ft-switch { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; font-size: .93rem; }
.ft-switch + .ft-switch { border-top: 1px solid var(--hairline); }
.ft-switch label { flex: 1; cursor: pointer; line-height: 1.4; }
.ft-switch label strong { font-weight: 600; }
.ft-switch input {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  position: relative; width: 44px; height: 26px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 16%, var(--surface));
  border: 1px solid var(--ink-muted);
  transition: background-color .2s ease, border-color .2s ease;
}
.ft-switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s var(--ease-out);
}
.ft-switch input:checked { background: var(--teal); border-color: var(--teal); }
.ft-switch input:checked::after { transform: translateX(18px); background: #F5F2EA; }
.ft-switch input:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.ft-settings__note { font-size: .84rem; color: var(--ink-muted); padding: 0 0 .6rem; max-width: none; }

.ft-link {
  appearance: none; background: none; border: 0; padding: .35rem .1rem; cursor: pointer;
  font: inherit; font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em;
  color: var(--teal-ink); text-decoration: underline; text-underline-offset: .2em;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--teal) 50%, transparent);
  min-height: 32px;
}
.ft-link:hover { text-decoration-color: currentColor; }
.ft-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; }
.ft-link--strong { font-weight: 500; color: var(--ink); text-decoration-color: var(--ink); }

/* ---- Today's page: the marks ------------------------------------------- */
.ft-ledger-sec { padding-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.ft-ledger {
  text-align: left;
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(1.1rem, 3.4vw, 1.7rem) clamp(1.1rem, 3.6vw, 1.9rem);
  border: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
  box-shadow: var(--shadow-card);
}
.ft-ledger__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ft-ledger__title {
  font-family: var(--font-mono); font-weight: 500; font-size: .74rem;
  letter-spacing: .2em; color: var(--ink-muted);
}
.ft-ledger__title:focus { outline: none; }
.ft-ledger__date { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; color: var(--ink-muted); text-transform: uppercase; }

.ft-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 48px; margin-top: .9rem; }
.ft-tally:empty { display: none; }
.mark { width: 40px; height: 40px; flex: none; overflow: visible; color: var(--ink); filter: drop-shadow(.5px .9px 0 var(--emboss)); }
.mark path { fill: none; stroke-width: 4.4; stroke-linecap: round; }
.mark .ghost { stroke: var(--ghost); filter: none; }
.mark .ink { stroke: currentColor; stroke-dasharray: 1 1; }
.ft-tally__empty { margin-top: .8rem; font-size: .92rem; color: var(--ink-muted); }
.ft-legend {
  margin-top: .7rem; max-width: none;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}

.ft-stats {
  display: flex; flex-wrap: wrap; gap: .5rem 1.8rem;
  margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em;
}
.ft-stats div { display: flex; flex-direction: column; gap: .1rem; }
.ft-stats dt { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.ft-stats dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }

.ft-keep { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; }
.ft-keep__line { font-size: .88rem; color: var(--ink-muted); max-width: 46ch; }
.ft-keep__erase, .ft-keep__confirm { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .8rem; }
.ft-keep__confirm { font-size: .86rem; }

.ft-funnel {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--hairline);
  font-size: .95rem; color: var(--ink-muted); max-width: none; line-height: 1.55;
  transition: opacity .6s ease;
}
.ft-funnel a { font-weight: 500; }
/* Focus is the product: while a block is in play, the pitch steps aside.
   It sits below the clock and the controls, so nothing that matters moves. */
.is-in-play .ft-funnel { display: none; }
.ft-funnel.is-new { animation: ft-fade .8s ease both; }
@keyframes ft-fade { from { opacity: 0; } }

/* ---- The ad slot (AD-SLOT) ----------------------------------------------- */
/* Fixed sizes, reserved even while hidden, so an ad can never shift layout:
   320x50 below 768px wide, 728x90 from 768px up. */
.ft-slot { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 0 var(--gap) clamp(2rem, 5vw, 3rem); }
.ft-slot__label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); max-width: none;
}
.ft-slot__frame {   /* the hairline is inset, so the inside is exactly 320x50 / 728x90 */
  width: 320px; height: 50px; flex: none; overflow: hidden;
  border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
}
@media (min-width: 768px) { .ft-slot__frame { width: 728px; height: 90px; border-radius: 14px; } }
.is-in-play .ft-slot { visibility: hidden; }

.house {
  display: flex; align-items: center; gap: .7rem; height: 100%;
  padding: 0 .65rem 0 .45rem; color: var(--ink); text-decoration: none;
}
.house:hover { background: color-mix(in srgb, var(--surface-sink) 70%, var(--surface)); }
.house:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; border-radius: 10px; }
.house__icon { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.house__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.house__title {
  font-family: var(--font-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.house__sub { display: none; }
.house__cta { flex: none; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-ink); }
/* Two titles, one shown: at 320x50 the ad says what it is ("Added Time for
   iPhone"), and from 768px up, where the subtitle says it, the line stays. */
@media (max-width: 767px) {
  .house__title--wide { display: none; }
  .house__cta { font-size: 0; }
  .house__cta::before { content: "Free ›"; font-size: .7rem; letter-spacing: .08em; }
}
@media (min-width: 768px) {
  .house__title--narrow { display: none; }
  .house { gap: 1.1rem; padding: 0 1.4rem 0 1rem; }
  .house__icon { width: 58px; height: 58px; border-radius: 14px; }
  .house__title { font-size: 1.12rem; }
  .house__sub { display: block; margin-top: .3rem; font-size: .86rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .house__cta { font-size: .74rem; padding: .6em 1em; border-radius: 999px; border: 1px solid var(--teal); }
}

/* ---- Landing copy -------------------------------------------------------- */
.ft-about .steps { max-width: 900px; margin-inline: auto; }
.ft-flow {
  margin-inline: auto; max-width: none;
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text);
}
.ft-key {
  list-style: none; padding: 0; margin: 1.6rem auto 0; max-width: 560px;
  display: grid; gap: .9rem; text-align: left;
}
.ft-key li { display: flex; align-items: center; gap: 1rem; color: var(--ink); }
.ft-key .mark { width: 36px; height: 36px; }
/* Reading the scoreboard: a small key under the steps. */
.ft-scorekey { margin-top: clamp(2rem, 5vw, 3rem); padding: 0; }
.ft-scorekey h3 { font-size: 1.05rem; letter-spacing: .04em; margin-bottom: .9rem; }
.ft-scorekey dl { margin: 0; display: grid; gap: .7rem; }
.ft-scorekey dl div { display: grid; grid-template-columns: minmax(9.5rem, auto) 1fr; gap: 1rem; align-items: baseline;
  padding-top: .7rem; border-top: 1px solid var(--hairline); }
.ft-scorekey dt { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.ft-scorekey dd { margin: 0; color: var(--ink-muted); font-size: .95rem; }
@media (max-width: 520px) { .ft-scorekey dl div { grid-template-columns: 1fr; gap: .2rem; } }

/* The three rhythms. */
.ft-rhythms { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ft-rhythms li { color: var(--ink-muted); padding-left: 6.2rem; position: relative; }
.ft-rhythms b {
  position: absolute; left: 0; top: .1em; font-family: var(--font-mono); font-weight: 500; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
}
@media (max-width: 460px) { .ft-rhythms li { padding-left: 0; } .ft-rhythms b { position: static; display: block; } }

.ft-page .compare--narrow { min-width: 0; }
.ft-page .compare kbd { margin-right: 0; }
.ft-page .compare caption { caption-side: top; }
.ft-page #count-up h2, .ft-page #breaks h2, .ft-page #second-screen h2 { margin-bottom: .2rem; }
.ft-page #breaks h3, .ft-page #second-screen h3, .ft-origin h3 { font-size: 1.05rem; letter-spacing: .04em; margin-top: 1.6rem; }
#marks h3 { font-size: 1.05rem; letter-spacing: .04em; margin-top: 1.4rem; }
.ft-origin { margin-top: clamp(1.8rem, 5vw, 2.6rem); }
.ft-origin .quote > p { font-size: 1.02rem; }

.ft-maker { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 4vw, 1.8rem); align-items: start; }
.ft-maker__icon { width: clamp(64px, 14vw, 88px); height: auto; border-radius: 22%; box-shadow: var(--shadow-card); }
.ft-maker__title { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.ft-maker__actions { display: flex; flex-wrap: wrap; gap: .8rem; padding-top: .4rem; }
@media (max-width: 520px) { .ft-maker { grid-template-columns: 1fr; } }
.ft-maker > * { min-width: 0; }
.ft-maker__actions .btn { white-space: normal; text-align: center; }

/* ---- Reduced motion: every flip, fold and hold is instant; the ink fades -- */
@media (prefers-reduced-motion: reduce) {
  .flip.is-flipping .flip__leaf { visibility: hidden; animation: none !important; }
  .ft-plate, .ft-added, [data-phase="focus"][data-status="held"] .ft-added, .ft-caption { transition: none; }
  .ft-disc, .ft-btn, .ft-switch input, .ft-switch input::after, .ft-plan__opt > span { transition: none; }
  .ft-disc:active, .ft-btn:active { transform: none; }
  /* The hold ring keeps its fill: it is the only way to see how long to hold. */
  .ft-funnel.is-new { animation: none; }
}

@media print {
  .ft-controls, .ft-hint, .ft-keys, .ft-handoff, .ft-settings, .ft-slot, .ft-plan, .ft-custom { display: none; }
  .ft-plate, .flip__half { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}