/* sit.css — Path of Breathing. Styles for sit.html: the stage (the
   count and the one breath, over the timer) and sit mode
   (js/sit-field.js). Requires shared.css, module.css, timer.css and
   reminder.css first. */

html, body { overflow-x: hidden; }

/* ── The head — short, so a phone sees the stage below it ───────── */
.sit-head {
  text-align: center;
  padding-top: 40px;
}
.sit-head .book-title {
  font-size: clamp(48px, 7vw, 84px);
  margin-bottom: 18px;
}

/* ── The stage — the count, then the timer, one centred column ──── */
.sit-live {
  max-width: 760px;
  margin: 0 auto;
}
.sit-stage {
  margin-top: 36px;
  text-align: center;
}
/* Taps on the stage are single taps: no double-tap zoom when − or +
   is pressed quickly. */
.sit-live button {
  touch-action: manipulation;
}

.sit-count {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: 400;
  color: var(--text);
  margin: 0;
}
/* "sitting" trails the count in Spectral italic — a quiet gloss. */
.sit-count-label {
  font-family: var(--read);
  font-style: italic;
  font-size: 0.7em;
  color: var(--muted);
}

/* ── The one breath — the entrance overlay's ring (breath-ring.svg,
   breath-cycle in shared.css). sit-field.js sets
   --breath-at from the wall clock, so every device on the page
   breathes it in the same moment. ─────────────────────────────── */
.sit-field {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(220px, 30vh, 340px);
  /* Only to look at: its haze reaches past the field as it spreads,
     over − and +, and would take their taps. */
  pointer-events: none;
}
/* Light: gold only darkens the paper, which reads tan, not light. On
   the dark ground the gold brightens, which reads as yellow light; a
   clear, brighter yellow tints the paper without shading it, so it
   reads the same. Mixed stronger, since the paper shows a tint far
   less than the dark ground. The ring stays --accent. */
:root {
  --sit-glow: var(--accent);
  --sit-haze: 17%;
}
[data-theme="light"] {
  --sit-glow: #f2cf5b;
  --sit-haze: 50%;
}
.sit-breath {
  position: relative;
  width: 72px;
  height: 72px;
}
.sit-breath span {
  position: absolute;
  border-radius: 50%;
}
/* breath-cycle, split in two: the scale moves the whole group, so a
   joining ring meets the ring at exactly its size; the fade is the
   ring's own. Same keyframes, same timing. */
.sit-breath-scale {
  inset: 0;
  animation: sit-breath-scale 9s ease-in-out infinite;
  animation-delay: var(--breath-at, 0s);
}
@keyframes sit-breath-scale {
  0%        { transform: scale(0.85); }
  42%, 52%  { transform: scale(2.4); }
  92%, 100% { transform: scale(0.85); }
}
.sit-breath-ring {
  inset: 0;
  background-color: var(--accent);
  -webkit-mask: url('/img/breath-ring.svg') no-repeat center / contain;
  mask: url('/img/breath-ring.svg') no-repeat center / contain;
  opacity: 0.5;
  animation: sit-breath-fade 9s ease-in-out infinite;
  animation-delay: var(--breath-at, 0s);
}
@keyframes sit-breath-fade {
  0%   { opacity: 0.25; }
  8%   { opacity: 0.6; }
  42%  { opacity: 0.75; }
  52%  { opacity: 0.70; }
  92%  { opacity: 0.30; }
  100% { opacity: 0.25; }
}
/* Joining (sit-field.js adds .is-joined on Begin): one unbroken
   motion. A small ring rises from the middle and meets the breath,
   touching it as the start bell sounds. There both lines give way to
   light: no ring joining a ring, one glow (the ripple, below) that
   grows out of the line, radiates, and comes back to it — one ring
   again. */
.sit-breath-join {
  inset: 0;
  background-color: var(--accent);
  -webkit-mask: url('/img/breath-ring.svg') no-repeat center / contain;
  mask: url('/img/breath-ring.svg') no-repeat center / contain;
  opacity: 0;
}
/* The light off the ring: a ripple, not a second ring. It is a band
   of light centred on the breath's line (--sit-haze-at: 35% of this
   box's radius) that widens inward and outward at once, the same
   speed both ways: through the middle, and out nearly to the box's
   edge. Its falloff is stepped like a bell curve with a long tail, so
   no edge or crease shows; the page's grain (shared.css) gives it its
   texture. Both are registered so the gradient can animate. */
@property --sit-haze-spread {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 3%;
}
@property --sit-haze-at {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 35%;
}
.sit-breath-radiate {
  --h1: color-mix(in srgb, var(--sit-glow) var(--sit-haze), transparent);
  --h2: color-mix(in srgb, var(--sit-glow) calc(var(--sit-haze) * 0.8), transparent);
  --h3: color-mix(in srgb, var(--sit-glow) calc(var(--sit-haze) * 0.45), transparent);
  --h4: color-mix(in srgb, var(--sit-glow) calc(var(--sit-haze) * 0.15), transparent);
  --s: var(--sit-haze-spread);
  --at: var(--sit-haze-at);
  inset: -90%;
  background: radial-gradient(closest-side,
    transparent calc(var(--at) - var(--s)),
    var(--h4)   calc(var(--at) - var(--s) * 0.85),
    var(--h3)   calc(var(--at) - var(--s) * 0.6),
    var(--h2)   calc(var(--at) - var(--s) * 0.3),
    var(--h1)   var(--at),
    var(--h2)   calc(var(--at) + var(--s) * 0.3),
    var(--h3)   calc(var(--at) + var(--s) * 0.6),
    var(--h4)   calc(var(--at) + var(--s) * 0.85),
    transparent calc(var(--at) + var(--s)));
  opacity: 0;
}
.sit-breath.is-joined .sit-breath-join { animation: sit-join 3.8s linear var(--join-at, 0ms); }
/* After the bell, on its own clock: 53% of sit-join. The ring keeps
   its breath-fade (same name, so it runs on unbroken) and dissolves
   through filter: opacity(), which multiplies with it. */
.sit-breath.is-joined {
  --at-bell: calc(var(--join-at, 0ms) + 2014ms);
}
.sit-breath.is-joined .sit-breath-ring {
  animation: sit-breath-fade 9s ease-in-out infinite var(--breath-at, 0s),
             sit-dissolve 5s linear var(--at-bell);
}
.sit-breath.is-joined .sit-breath-radiate { animation: sit-ripple 5s linear var(--at-bell); }
/* 53% of 3.8s is the start bell: 2s into Begin's track (timer.js
   PRE_ROLL), and the ring starts when the track does (sit-field.js).
   The ring starts slow and arrives still moving: a curve that eases
   out creeps its last half second within a few pixels, so it looks
   joined well before the bell. It lies exactly on the breath at full
   strength when the bell sounds, and carries on at the speed it
   arrived, the breath's line with it (sit-dissolve), slowing as the
   two fade as one into the ripple: all of it starts on the touch
   itself, fastest there, so nothing waits. The 1.09 is what that
   speed carries it. */
@keyframes sit-join {
  0%   { transform: scale(0.05); opacity: 0;
         animation-timing-function: cubic-bezier(0.4, 0, 0.75, 0.75); }
  12%  { opacity: 0.85; }
  53%  { transform: scale(1);    opacity: 0.85;
         animation-timing-function: cubic-bezier(0.2, 0.5, 0.4, 1); }
  66%  { transform: scale(1.09); opacity: 0; }
  100% { transform: scale(1.09); opacity: 0; }
}
/* On the bell's clock, one motion out and back. The ripple starts as
   a band with no width on the line and grows a hair at a time, the
   line fading into it; it radiates out, dimming as it spreads, turns
   at its widest like a swing — slowing into the turn, easing back,
   never stopping — then radiates back in, brightening as it narrows,
   until it settles as a hairline on the circle and the line fades
   back in where it closes. The spread never reaches 0: coincident
   stops can draw a hairline of their own. Its centre travels out with
   the two lines (38% is their 1.09) and settles back with the ring,
   and it fades in under the lines and out under the returning one,
   so at neither end is it a thin ring of its own. */
@keyframes sit-ripple {
  0%   { --sit-haze-spread: 0.4%; --sit-haze-at: 35%; opacity: 0;
         animation-timing-function: cubic-bezier(0.2, 0.5, 0.4, 1); }
  10%  { --sit-haze-at: 38%;
         animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  12%  { opacity: 1;
         animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
  46%  { --sit-haze-spread: 62%;  opacity: 0.12;
         animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  84%  { opacity: 0.8;
         animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { --sit-haze-spread: 0.4%; --sit-haze-at: 35%; opacity: 0; }
}
/* The breath's line moves with the joining one — the same 1.09, the
   same curve, the same half second — so from the touch there is one
   line, not two; unseen, it settles back to its own size. */
@keyframes sit-dissolve {
  0%   { filter: opacity(1); scale: 1;
         animation-timing-function: cubic-bezier(0.2, 0.5, 0.4, 1); }
  10%  { filter: opacity(0); scale: 1.09; }
  50%  { scale: 1.09; }
  51%  { scale: 1; }
  84%  { filter: opacity(0);
         animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { filter: opacity(1); scale: 1; }
}

/* "Come sit." (no one sitting), or the count being unreachable —
   written by sit.js in the count's place, at the count's height, so
   the field doesn't shift as the count fills and empties. A line that
   wraps on a phone grows upward, into the space the head leaves in
   sit mode, never down onto the breath. */
.sit-status {
  --status-h: clamp(40px, 4.4vw, 48px);
  box-sizing: border-box;
  height: var(--status-h);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc((var(--status-h) - 1.4em) / 2);
  font-family: var(--read);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}
.sit-status:empty { display: none; }

/* ── The timer, centred under the count ─────────────────────────── */
.sit-timer .timer-wrap {
  align-items: center;
  text-align: center;
}
/* − and + hold fixed places either side of the time, whatever its
   width (4:00 to 180:00), and each is a full thumb's width to hit.
   If the time outgrows the middle column, the column stretches and
   shoves + outward, so the digits are sized to the row: 180:00 is
   3.125em wide, and 108px is the two button columns and gaps. */
.sit-timer .timer-set {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 6px;
  align-items: center;
  width: 100%;
  max-width: 440px;
  /* Less than it looks: the time's line box already runs ~28px below
     the digits. */
  margin: 0 0 26px;
  container-type: inline-size;
}
.sit-timer .timer-set .timer-display {
  margin: 0;
  font-size: min(6.5rem, (100cqi - 108px) / 3.2);
}
.sit-timer .timer-step {
  width: 48px;
  height: 48px;
  font-size: 19px;
  justify-self: center;
}
.sit-timer .timer-controls { justify-content: center; }
/* As tall as the rounds, and Begin wider when alone: it's the one tap
   most visits make, since the timer remembers the last length. Beside
   Reset it narrows, so the pair fits a 320px phone. */
.sit-timer .timer-btn {
  height: 48px;
  padding: 0 36px;
}
.sit-timer .timer-controls:has(#timer-reset[hidden]) #timer-btn {
  padding: 0 56px;
}
.sit-timer .timer-note { margin-top: 12px; }
.sit-timer .timer-note:empty { display: none; }
/* The lengths: bare minutes, above the time — the rough choice, then
   − and + to fine-tune, then Begin. No rings: the timer remembers the
   last length, so most visits never touch them. Each keeps a 48px
   target. One row at every width, not timer.css's phone grid: on the
   narrowest screens (320px) the targets shrink to fit rather than run
   off the edges. Emptied in a sit, the row holds its space above the
   time, so Pause stays with the clock. */
.sit-timer .dur-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;
  gap: 10px;
  margin: 0 0 28px;
}
/* The row's height and margin: how far the time rises in a sit. */
.sit-timer { --lengths-rise: 76px; }
.sit-timer .dur-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 48px;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border-color: transparent;
  font-size: 15px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.sit-timer .dur-pill.active { border-color: transparent; }
@media (hover: hover) {
  .sit-timer .dur-pill:hover { border-color: transparent; }
}

/* ── One screen on a phone — the count, the breath, the interval bell,
   the lengths, the time and Begin all in view on opening, as a timer
   app would be.
   The field takes what height is left (svh: with Safari's bars
   showing). ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sit-head { padding-top: 12px; }
  .sit-head .book-title {
    font-size: 40px;
    margin-bottom: 6px;
  }
  .sit-stage { margin-top: 10px; }
  .sit-field { height: clamp(160px, 100svh - 462px, 340px); }
  .sit-timer .timer-set { margin-bottom: 14px; }
  /* The row reaches into the page's margin, to a 16px edge, so the
     rounds keep their full size down to 360px. */
  .sit-timer .dur-row {
    gap: 8px;
    width: calc(100% + 16px);
    margin: 0 -8px 18px;
  }
  .sit-timer { --lengths-rise: 66px; }
  .sit-page { padding-bottom: 64px; }
}
/* The shortest phones: the breath comes down a size, so its fullest
   ring clears the time below with air to spare. */
@media (max-width: 600px) and (max-height: 620px) {
  .sit-breath { scale: 0.8; }
}

/* ── Under Begin — the rounds (js/sit-sheets.js) ──────────────────
   The − and + rounds' outline, a size smaller, a word under each:
   plainly the timer's family, plainly less than it. */
/* A short hairline between Begin and the rounds: the timer ends here.
   Short, so it reads as a pause, not the footer's rule. */
.sit-actions::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 auto 48px;
  background: var(--outline);
}
/* Equal columns, so the rounds keep one rhythm whatever their words;
   three, or four where the Home Screen round shows. */
.sit-quick {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  column-gap: 12px;
  max-width: 400px;
  margin: 0 auto;
}
.sit-quick-btn[hidden] { display: none; }
.sit-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 64px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  /* Tighter than the labels' usual 0.14em: four words share a phone's
     width, and FIRST TIME and REMINDER otherwise all but touch. */
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--ease);
}
.sit-quick-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--outline);
  border-radius: 50%;
  /* The ? drawn to the icons' weight, not the text's. */
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color var(--ease);
}
.sit-quick-ring svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .sit-quick-btn:hover { color: var(--text); }
  .sit-quick-btn:hover .sit-quick-ring { border-color: var(--accent-tint-strong); }
}

/* ── The sheets — up from the bottom on a phone, a card mid-screen
   wider. Native <dialog> in the top layer, so sit mode's fades and
   the page's scroll never reach inside. ───────────────────────── */
.sit-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  max-height: 88svh;
  margin: auto auto 0;
  padding: 20px 24px calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  animation: sheet-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sit-sheet.closing { animation: sheet-out 0.24s ease-in forwards; }
.sit-sheet::backdrop {
  background: rgba(0, 0, 0, 0.5);
  animation: sheet-fade 0.32s ease;
}
.sit-sheet.closing::backdrop { animation: sheet-fade 0.24s ease reverse forwards; }
@keyframes sheet-in { from { translate: 0 100%; } }
@keyframes sheet-out { to { translate: 0 100%; } }
@keyframes sheet-fade { from { opacity: 0; } }
/* Wider, the card floats on the page: its own paper, lifted by
   a shadow, over the page veiled in its own colour, not a black wash
   that turns the cream page grey. The veil's colours are --bg's, typed
   out: older browsers give ::backdrop no custom properties. */
@media (min-width: 601px) {
  .sit-sheet {
    margin: auto;
    padding: 28px 36px 40px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6);
  }
  .sit-sheet::backdrop {
    background: rgba(14, 13, 12, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  [data-theme="light"] .sit-sheet { box-shadow: 0 24px 64px -16px rgba(43, 40, 35, 0.22); }
  [data-theme="light"] .sit-sheet::backdrop { background: rgba(245, 242, 236, 0.72); }
  @keyframes sheet-in { from { opacity: 0; translate: 0 16px; } }
  @keyframes sheet-out { to { opacity: 0; translate: 0 16px; } }
}
@media (prefers-reduced-motion: reduce) {
  .sit-sheet,
  .sit-sheet::backdrop { animation: none; }
}
/* No scrolling the page behind an open sheet. */
html:has(.sit-sheet[open]) { overflow: hidden; }
.sit-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 20px;
}
/* The site's title voice (.book-title), at sheet size: light, tight. */
.sit-sheet-title {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
/* A − / + round, smaller: close is always there, never the point. */
.sit-sheet-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 1px solid var(--outline);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
}
@media (hover: hover) {
  .sit-sheet-close:hover { color: var(--text); border-color: var(--accent-tint-strong); }
}
/* What the sheet will do, before its controls: the First time list's
   voice. */
.sit-sheet-intro {
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
  margin: -8px 0 24px;
}
.sit-sheet .reminder-body { justify-content: center; }
/* Flush under the title, numbers and all. */
.sit-sheet .sit-first-list { max-width: none; margin: 0; }
/* A group's name, like the other sheets' field labels. */
.sit-sheet-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.sit-first-list + .sit-sheet-label { margin-top: 28px; }
/* Facts, not steps: a small dot where the numbers stand. Doubled
   class: the numbered rule below would otherwise win. */
.sit-first-list.sit-first-notes > li::before {
  content: '';
  top: 11px;
  left: calc(1em - 4px);
  width: 4px;
  height: 4px;
  line-height: 0;
  border-radius: 50%;
  background: currentColor;
}
/* The iPhone steps, in the list's voice and size. */
.sit-sheet .home-screen-how {
  font-family: var(--read);
  font-size: 16px;
  line-height: 2.2;
  color: var(--muted);
  margin: 0;
}
/* The sheet takes focus on opening, so the first control doesn't
   wear a focus ring no one asked for. */
.sit-sheet:focus { outline: none; }
/* The grabber: pull down to close (js/sit-sheets.js). */
@media (max-width: 600px) {
  .sit-sheet { padding-top: 28px; }
  .sit-sheet::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--outline);
  }
}

/* ── The interval bell (js/timer.js) ───────────────────────────────
   Over the lengths, heading the timer. Bare like them, not a pill —
   outlined, it read as a second Begin. The choices take the line's
   place at its height, so opening moves nothing. */
.sit-interval-slot {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  /* Apart from the lengths, so it reads as its own line, not their
     heading. */
  margin: 0 0 16px;
}
/* The slot's height and margin: how much further the time rises in a
   sit, over the lengths' rise. */
.sit-timer { --interval-rise: 56px; }
.interval-toggle {
  height: 100%;
  padding: 0 12px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--ease);
}
.interval-toggle[hidden] { display: none; }
.interval-toggle.active .interval-value { color: var(--accent); }
/* Disabled controls are exempt from contrast minimums. */
.interval-toggle:disabled { opacity: 0.35; cursor: default; }
/* Up to seven choices at 60 minutes: like the lengths, they shrink to
   fit the narrowest phones rather than run off the edges. */
.interval-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.interval-row[hidden] { display: none; }
/* In the line's small capitals, not the lengths' numerals: open, the
   choices are plainly the line's, a row apart from the lengths. */
.interval-pick {
  flex: 0 1 48px;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: color var(--ease);
}
.interval-pick.active { color: var(--accent); }
.interval-pick[hidden] { display: none; }
@media (hover: hover) {
  .interval-pick:not(.active):hover,
  .interval-toggle:not(:disabled):hover { color: var(--text); }
}
.sit-actions {
  max-width: 760px;
  margin: 48px auto 0;
  text-align: center;
}
@media (max-width: 600px) {
  .sit-actions { margin-top: 40px; }
  .sit-actions::before { margin-bottom: 40px; }
}
.invite-send { grid-column: 1 / -1; }
/* The invitation's sheet, centred like a card: the when largest, then
   what to do, then the way in for a newcomer, then the calendars. */
.invited { text-align: center; }
/* The title centred on the sheet, not on what the × leaves: an empty
   first column as wide as the × balances it. */
.invited-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin-bottom: 28px;
}
.invited-head .sit-sheet-title {
  grid-column: 2;
  text-align: center;
  text-wrap: balance;
}
.invited-head .sit-sheet-close { grid-column: 3; justify-self: end; }
/* The time set as the timer is (timer.css), so the one they come back
   to looks like the one they were given; the day and the length
   frame it in the labels' small capitals. */
.invited-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}
.invited-when .sit-sheet-label { margin: 0; }
.invited-time {
  font-family: var(--display);
  font-size: 60px;
  font-weight: 300;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--text);
}
.invited-colon {
  position: relative;
  bottom: 0.08em;
}
.invited-how {
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: balance;
  max-width: 300px;
  margin: 0 auto;
}
/* The page's own pause (.sit-actions::before) before the extras. */
.invited-new::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 32px auto;
  background: var(--outline);
}
.invited-new {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 32px;
}
.invited-new a {
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.invited-new a span {
  display: inline-block;
  transition: transform var(--ease);
}
@media (hover: hover) {
  .invited-new a:hover span { transform: translateX(3px); }
}
.invited-add[hidden] { display: none; }
.invited-add .sit-sheet-label { display: block; }
.invited-add .reminder-row { max-width: 340px; margin: 0 auto; }
.invited-add .reminder-go,
.invited-add .reminder-go:visited { color: var(--accent); }
@media (hover: hover) {
  .invited-add .reminder-go:hover { color: var(--text); border-color: var(--accent); }
}
.sit-first-list {
  font-family: var(--read);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 22em;
  text-align: left;
  text-wrap: pretty;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: first;
}
/* Child combinators: the home-screen steps nest a list of their own.
   The number hangs in the margin, so an item's words and links flow
   as one run of text. */
.sit-first-list > li {
  position: relative;
  padding-left: calc(1em + 14px);
  counter-increment: first;
}
/* Gold at full strength: --accent text can carry no dim (CLAUDE.md). */
.sit-first-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sit-first-list > li + li { margin-top: 8px; }
.sit-first-list > li::before {
  content: counter(first) ".";
  position: absolute;
  left: 0;
  width: 1em;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 25px;
  opacity: var(--dim-text);
  text-align: right;
}

/* ── Keeping the Sit page on a phone — the iPhone steps' sheet
   (js/home-screen.js). ────────────────────────────────────────── */
/* Each step is a row of number, icon and words, so all three line up
   in columns. */
.home-screen-how {
  font-size: 14px;
  line-height: 1.9;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.home-screen-how li {
  display: grid;
  grid-template-columns: 1em 28px auto;
  column-gap: 14px;
  align-items: center;
  counter-increment: step;
}
.home-screen-how li::before {
  content: counter(step) ".";
  font-family: var(--sans);
  font-size: 12px;
  opacity: var(--dim-text);
  text-align: right;
}
.home-screen-mark {
  display: flex;
  justify-content: center;
}
/* iOS's Add is a button with no icon, so the step draws the button,
   at the icons' height. */
.home-screen-pill {
  display: inline-block;
  box-sizing: border-box;
  width: 28px;
  font-family: var(--sans);
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  border: 1.2px solid currentColor;
  border-radius: 999px;
}

/* ── Sit mode — from Begin, everything around the stage fades ────
   Nothing new opens: the count, the breath, the time and the buttons
   keep their places, and the rest of the page dims away around them,
   then back when the sit is over. Hidden once faded, so none of it
   takes a tap. */
nav,
footer,
.sit-head,
.dur-row,
.timer-step,
.sit-interval-slot,
.sit-actions {
  transition: opacity 1.2s ease, visibility 0s;
}
.sit-mode nav,
.sit-mode footer,
.sit-mode .sit-head,
.sit-mode .sit-interval-slot,
.sit-mode .sit-actions,
.sit-mode .dur-row,
.sit-mode .timer-step {
  opacity: 0;
  /* !important: timer.js hides the lengths and − / + inline the instant
     a sit begins; this lets them fade instead, holding their space. */
  visibility: hidden !important;
  transition: opacity 1.2s ease, visibility 0s 1.2s;
}
/* As the interval line and the lengths fade, the time and its buttons
   rise into their place, so Pause and the clock stay close under the
   breath. */
.sit-timer .timer-set,
.sit-timer .timer-controls,
.sit-timer .timer-note {
  transition: translate 1.2s ease;
}
.sit-mode .sit-timer .timer-set,
.sit-mode .sit-timer .timer-controls,
.sit-mode .sit-timer .timer-note {
  translate: 0 calc(-1 * (var(--interval-rise) + var(--lengths-rise)));
}
@media (prefers-reduced-motion: reduce) {
  .sit-timer .timer-set,
  .sit-timer .timer-controls,
  .sit-timer .timer-note { transition: none; }
}

/* The page holds still through the sit, the breath glided to the
   middle of the screen (sit-field.js). scroll-behavior: auto, or the
   root's smooth scrolling (shared.css) would ease each frame of the
   glide on its own. */
html.sit-mode,
.sit-mode body {
  overflow: hidden;
  overscroll-behavior: none;
  scroll-behavior: auto;
}

/* After a few quiet seconds all but the breath goes — the count or the
   its status line, the clock, the buttons — until a touch brings them
   back. sit-field.js fades them frame by frame, not with a CSS
   transition: Safari fades a snapshot of the ticking clock and paints
   the next second over it (breath.js hit the same). Once faded,
   .sit-quiet hides them outright, so the first touch can't land on
   Pause. */
.sit-quiet .sit-count,
.sit-quiet .sit-status,
.sit-quiet .timer-set,
.sit-quiet .timer-controls {
  visibility: hidden;
}
/* A status that wraps grows up into the head's place, so at Begin it
   waits out the head's 1.2s fade. backwards, not both: a fill left on
   would override sit-field.js's inline fade. The text never ticks,
   so Safari's snapshot trap doesn't apply. */
.sit-mode .sit-status {
  animation: sit-status-arrive 2s ease backwards;
}
@keyframes sit-status-arrive {
  0%, 60% { opacity: 0; }
  100%    { opacity: 1; }
}
/* From the end bell until Sit again and Reset return (sit-field.js),
   the count and its status line wait, so they arrive with them. */
.sit-closing .sit-count,
.sit-closing .sit-status {
  visibility: hidden;
}
/* timer.js sets Pause visible inline, which would show it through its
   hidden row. */
.sit-quiet .timer-controls button {
  visibility: hidden !important;
}