/* Orli v3 site · Try a Bite (try-a-bite.html)
   ---------------------------------------------------------------------------
   One real Orli Bite, "Breathe with Orla", the way it runs in class: the
   class board (the one focal point) and, beside it, the teacher's laptop with
   the facilitator console, its transport under it. Then "What is an Orli
   Bite?" as four illustrated cards, and the trial card. The whole script is
   for print (and for no JavaScript) only.

   The page uses the v2 system (tokens, layout, the approved buttons, the
   card). The board (board.css) and the console inside the laptop are ports
   of Orli Schools screens, so they keep the product's own values, scoped to
   them. Device frames follow the product showcase (../../product/lib/
   showcase.css): an ink bezel and a warm base with the button family's lip.
   ------------------------------------------------------------------------- */

/* ================================================================== hero
   The system's hero: world label, the display title, one lead, all in the
   1200px container. The board below is the one picture; its controls sit
   in one toolbar under it. */
.tb-hero { padding-block: var(--o-space-7) var(--o-space-8); }
@media (min-width: 900px) { .tb-hero { padding-block: var(--o-space-7) var(--o-space-9); } }
.tb-head .o-world-label .hand { --hand-size: 1.15em; }
/* The label's box is already the outlined lettering's height, so nothing moves when it arrives. */
.tb-head .o-world-label { min-block-size: 1.45em; }
.tb-print-head { display: none; }

/* Without JavaScript the Bite can't run: the board stays on its first
   screen and the whole script shows below the cards. */
html:not(.js) :is(.tb-toolbar, .tb-captions, .tb-laptop, .tb-dock, .tb-note) { display: none; }
.tb-nojs { font-size: var(--o-text-small); color: var(--o-ink-2); }

/* The doodle icons (SchoolsDoodle), drawn in currentColor through a mask */
.tb-ico { display: inline-block; flex: none; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.o-btn__icon .tb-ico { width: 100%; height: 100%; }
.tb-ico--play { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--play.svg"); }
.o-btn__icon .tb-ico--play { width: 82%; height: 82%; }
.tb-ico--pause { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--pause.svg"); }
.tb-ico--restart { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--restart.svg"); }
.tb-ico--arrow { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-arrow-right.svg"); }
.tb-ico--back { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-arrow-left.svg"); }
.tb-ico--tick { --m: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg"); }
.tb-ico--heart { --m: url("../../../../design-kit/icons/schools-doodles/resources--doodle-heart.svg"); }
.tb-ico--clock { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--clock.svg"); }
.tb-ico--guide { --m: url("../../../../design-kit/icons/schools-doodles/resources--doodle-guides.svg"); }
.tb-ico--close { --m: url("../../../../design-kit/icons/schools-doodles/session--doodles--close.svg"); }
.tb-ico--lock { --m: url("../../../../design-kit/icons/schools-doodles/nav--lock-doodle.svg"); }
.tb-ico--down { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ================================================================= stage
   Phone and tablet, in reading order: the board, its toolbar and captions,
   then the laptop, its transport and the note. From 1280px the board and
   the laptop stand side by side on one baseline, each named under its
   frame, each with its own controls under it: the toolbar under the board,
   Back and Next under the laptop. */
.tb-stage {
  container: tb-stage / inline-size;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
  grid-template-areas: "board" "tools" "caps" "laptop" "transport" "note";
  /* One column stays a little narrower than the text, so the board's own
     title never grows past the page title. */
  max-inline-size: 720px;
}
.tb-board { grid-area: board; }
.tb-toolbar { grid-area: tools; }
.tb-captions { grid-area: caps; }
.tb-laptop { grid-area: laptop; margin-block-start: var(--o-space-7); }
.tb-dock { grid-area: transport; min-width: 0; }
.tb-note { grid-area: note; }
/* One column (under 1280px): the laptop at a laptop's size, centred under
   the board, and its transport floats at the foot of the window while the
   Bite is on screen, so Next is always in reach (Ryan, 3 Nov); it settles
   under the laptop when you get there. */
@media (max-width: 1279.98px) {
  .tb-stage { grid-template-rows: auto auto auto auto calc(var(--o-target) + 14px + var(--o-space-4)) auto; }
  .tb-laptop { justify-self: center; inline-size: min(100%, 560px); }
  /* The dock spans the laptop (from the gap above it) and the row under it,
     so the floating bar rises no higher than the foot of the captions: it
     never covers the board's words or its toolbar. */
  .tb-dock {
    grid-row: 4 / 6; grid-column: 1; align-self: stretch; z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  }
  .tb-dock > .tb-transport {
    pointer-events: auto; inline-size: min(100%, 516px);
    position: sticky; inset-block-end: calc(var(--o-space-3) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 2px 6px rgb(60 57 50 / .08), 0 14px 32px -10px rgb(60 57 50 / .28);
  }
  .tb-note { justify-self: center; inline-size: min(100%, 516px); }
  /* A control reached with the keyboard is never left under the floating bar. */
  .tb-stage :is(button, a, [tabindex]) { scroll-margin-block-end: calc(var(--o-target) + 48px); }
}
/* iPad landscape and small laptops (900–1279px): the stage is one column
   (the laptop is too narrow beside the board here), so the hero becomes one
   centred column of the stage's width, the title and lead on its left edge,
   rather than a left column with a blank band beside it. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .tb-hero > .o-container { width: min(100% - 2 * var(--o-gutter), 720px); }
}
@media (min-width: 1280px) {
  .tb-stage {
    grid-template-columns: minmax(0, 13fr) minmax(0, 12fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "board laptop" "tools transport" "caps note";
    column-gap: var(--o-space-7); max-inline-size: none;
  }
  .tb-board, .tb-laptop { align-self: end; }
  .tb-laptop { margin-block-start: 0; }
  .tb-note { margin-inline: 4%; }
}

/* Each device is named under its frame, quietly: a caption, not a control. */
.tb-device {
  display: flex; align-items: center; justify-content: center; gap: var(--o-space-2);
  margin-block-start: var(--o-space-3);
  font: var(--o-weight-ui) var(--o-text-small) / 1.2 var(--o-font-ui); color: var(--o-ink-2); letter-spacing: .01em;
}

/* One toolbar under the board: Play and Restart, then the board's options. */
.tb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--o-space-3) var(--o-space-4);
  margin-block-start: var(--o-space-5);
}
.tb-toolbar__play { display: flex; flex-wrap: wrap; gap: var(--o-space-3); }
.tb-toolbar__opts { display: flex; flex-wrap: wrap; gap: var(--o-space-2); margin-inline-end: calc(-1 * var(--o-space-2)); }
.tb-toolbar__opts .o-btn { --px: 12px; }
.tb-toolbar [hidden] { display: none; }

/* ----------------------------------------------------------- the board */
.tb-board { margin: 0; container: tb-board / inline-size; position: relative; }
.tb-board__frame {
  position: relative; padding: 1.4cqi 1.4cqi 2.4cqi; border-radius: 1.6cqi;
  background: var(--o-ink); box-shadow: var(--o-shadow-raised);
}
.tb-board__frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset .25cqi .25cqi 0 color-mix(in srgb, var(--o-ink) 82%, #fff); }
.tb-board .tb-screen { border-radius: .3cqi; }
.tb-board__tray { height: 1.3cqi; margin: -.3cqi 7cqi 0; border-radius: 0 0 1cqi 1cqi; background: var(--o-warm-high); box-shadow: 0 .5cqi 0 var(--o-n3), var(--o-shadow); }
.tb-exit { display: none; }

/* Full screen: the board fills the screen, the way it would on a projector. */
.tb-board:fullscreen { display: grid; place-items: center; width: 100vw; height: 100vh; background: #111; }
.tb-board:fullscreen .tb-board__frame { width: min(100vw, 177.78vh); padding: 0; border-radius: 0; background: none; box-shadow: none; }
.tb-board:fullscreen .tb-board__frame::before, .tb-board:fullscreen :is(.tb-board__tray, .tb-device) { display: none; }
.tb-board:fullscreen .tb-screen { border-radius: 0; }
.tb-board:fullscreen .tb-exit:not([hidden]) {
  display: inline-flex; align-items: center; position: fixed; z-index: 30; top: 16px; right: 16px;
  min-height: var(--o-target); padding: 0 var(--o-space-4); border: 0; border-radius: var(--o-r-pill);
  background: rgb(255 253 248 / .94); color: var(--o-ink); font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); cursor: pointer;
}
.tb-board:fullscreen .tb-exit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* -------------------------------------------------------------- captions */
.tb-captions { position: relative; margin-block-start: var(--o-space-4); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
/* As tall as the longest caption at this width (player.js), so nothing under it moves.
   Until the script has measured, a close guess by width (the measured lines: 5 at
   320, 4 at 360–430, 3 at 500–600 and in the 1280 column, 2 elsewhere), so the
   laptop under it doesn't jump when the measure lands. */
.tb-captions { --cap-guess: calc(2 * 1.5em); }
@container tb-stage (max-width: 589.98px) { .tb-captions { --cap-guess: calc(3 * 1.5em); } }
@container tb-stage (max-width: 439.98px) { .tb-captions { --cap-guess: calc(4 * 1.5em); } }
@container tb-stage (max-width: 299.98px) { .tb-captions { --cap-guess: calc(5 * 1.5em); } }
@media (min-width: 1280px) and (max-width: 1399.98px) { .tb-captions { --cap-guess: calc(3 * 1.5em); } }
.tb-captions__line:not(.tb-captions__probe) { min-height: var(--cap-fit, var(--cap-guess)); }
.tb-captions__probe { position: absolute; inset-inline: 0; inset-block-start: 0; visibility: hidden; pointer-events: none; }
.tb-captions[hidden] { display: none; }
.tb-captions__line { font-size: var(--o-text-body); line-height: 1.5; color: var(--o-ink); max-inline-size: 64ch; text-wrap: pretty; }
.tb-captions__line b {
  font: var(--o-weight-ui) var(--o-text-body) / 1.5 var(--o-font-ui); color: var(--world-deep); margin-inline-end: .35em;
}

/* --------------------------------------------------------------- laptop
   A narrow window (the laptop under 420px wide: phones) shows the console
   as a plain card; anything wider draws the laptop round it. */
.tb-laptop { container: tb-laptop / inline-size; margin-inline: 0; }
.tb-laptop__frame { position: relative; }
.tb-laptop__base { display: none; }
@container tb-laptop (min-width: 420px) {
  .tb-laptop__frame {
    margin-inline: 4cqi; padding: 2.3cqi 2cqi 2.2cqi; border-radius: 2.4cqi 2.4cqi .9cqi .9cqi;
    background: var(--o-ink); box-shadow: var(--o-shadow-raised);
  }
  .tb-laptop__frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset .25cqi .25cqi 0 color-mix(in srgb, var(--o-ink) 82%, #fff); }
  .tb-laptop__base {
    display: block; position: relative; height: 2.4cqi; margin-block-start: -.1cqi;
    background: var(--o-warm-high); border-radius: .3cqi .3cqi 2.4cqi 2.4cqi / .3cqi .3cqi 1.6cqi 1.6cqi;
    box-shadow: 0 .5cqi 0 var(--o-n3), var(--o-shadow);
  }
  .tb-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 15cqi; height: .9cqi; background: var(--o-n2); border-radius: 0 0 1cqi 1cqi; }
}

.tb-note {
  margin-block-start: var(--o-space-5); max-inline-size: 52ch;
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty;
}

/* ============================================================ the console
   The facilitator console in Orli Schools (ComposedAdventureRuntime +
   FacilitatorConsoleShared + FacilitatorGuidance): the session bar with the
   timer and pause, the steps, and the guide for this moment. Its own
   values, kept to the laptop; type at a size a teacher can read across a
   desk (15–16px). The guide area is as tall as the tallest moment needs
   (--tc-fit, measured by player.js), so nothing on it scrolls and stepping
   never moves the page. */
.tc {
  --c-canvas: #f3f0ea; --c-surface: #fff; --c-line: #e6e1d8; --c-ink: #2b2c29; --c-ink-2: #55534e;
  --c-deep: #195440; --c-wash: #e8f3ec; --c-wash-edge: #cfe5d8; --c-next: #262420;
  --c-hit: 36px;
  container: tc / inline-size;
  position: relative;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
  overflow: hidden; border-radius: var(--o-r-card);
  background: var(--c-canvas); color: var(--c-ink);
  border: 1px solid var(--o-line); box-shadow: var(--o-shadow);
  font: 500 .9375rem / 1.45 var(--o-font-ui);
}
/* Phones and touch: every console control is a full 44px target. On a
   phone the card keeps its tallest moment's height too (nothing below it
   moves while the Bite plays); a short moment sits under the steps, and
   the pupil screen preview fills the rest. */
@container tb-laptop (max-width: 419.98px) {
  .tc { --c-hit: 44px; }
}
@container tc (max-width: 420px) {
  .tc .tc-chip span { display: grid; justify-items: start; row-gap: 3px; }
  /* the three ways in one row, so the guide stays short */
  .tc .tc-ways:not(.tc-ways--prompts) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tc .tc-ways:not(.tc-ways--prompts) button { padding: 4px 8px; border-radius: 16px; font-size: .875rem; }
  .tc .tc-lines li { font-size: .875rem; }
}
@media (pointer: coarse) { .tc { --c-hit: 44px; } }
@container tb-laptop (min-width: 420px) {
  /* The laptop's screen is at least 16:11 (its width is 88cqi of the
     laptop), taller only if a moment's guide needs it. */
  .tc { min-height: max(60.5cqi, 16rem); border: 0; border-radius: .4cqi; box-shadow: none; }
}
.tc :where(button) { font: inherit; color: inherit; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tc :where(button:disabled) { cursor: default; }
.tc :focus-visible { outline: 3px solid var(--o-focus); outline-offset: 2px; }

.tc-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  padding: 6px 10px; background: var(--c-surface); border-block-end: 1px solid var(--c-line);
}
.tc-chip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--c-wash); border: 1px solid var(--c-wash-edge); }
.tc-chip img { width: 28px; height: 28px; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; }
.tc-chip span { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-width: 0; line-height: 1.15; }
.tc-chip b { font-weight: 700; font-size: .875rem; color: var(--c-deep); overflow-wrap: anywhere; }
.tc-chip small { padding: 1px 7px; border-radius: 999px; background: var(--c-deep); color: #fff; font: 700 .6875rem / 1.4 var(--o-font-ui); }
.tc-clock { display: flex; align-items: center; gap: 2px; padding: 2px 2px 2px 14px; border-radius: 999px; border: 1px solid var(--c-line); background: #fff; }
.tc-clock__time { font: 700 1rem / 1 var(--o-font-ui); font-variant-numeric: tabular-nums; letter-spacing: .01em; min-width: 3.1em; }
/* Pause: a full target; the negative margin keeps the timer pill its size. */
.tc-icon { display: grid; place-items: center; width: var(--c-hit); height: var(--c-hit); margin-block: -3px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-ink); }
.tc-icon .tb-ico { width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .tc-icon:hover { background: var(--c-canvas); } }
.tc-icon[aria-pressed="true"] { background: var(--c-deep); color: #fff; }

/* Steps: the rail across the top (the product's journey rail, turned) */
.tc-rail { padding: 6px 10px 0; }
.tc-rail ol { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tc-rail li { flex: 1 1 0; min-width: var(--c-hit); }
.tc-rail li:has([aria-current]) { flex: 3.4 1 0; }
.tc-rail button {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: var(--c-hit); padding: 3px 8px 3px 4px;
  border: 1px solid transparent; border-radius: 999px; background: none; color: var(--c-ink-2); text-align: left;
}
.tc-rail li:has([aria-current]) button { justify-content: flex-start; }
.tc-rail__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px dashed #bfb8aa; background: #fff; font: 700 .75rem / 1 var(--o-font-ui); color: var(--c-ink-2); }
.tc-rail__t { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; font-size: .84375rem; font-weight: 650; }
.tc-rail li:not(:has([aria-current])) .tc-rail__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tc-rail [data-done] .tc-rail__n { border: 1.5px solid var(--c-ink); color: var(--c-ink); }
.tc-rail [data-done] .tc-rail__n::before { content: ""; width: 12px; height: 9px; background: currentColor;
  -webkit-mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat; mask: url("../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg") center / contain no-repeat; }
.tc-rail [data-done] .tc-rail__n { font-size: 0; }
.tc-rail [aria-current] { background: #e1ece5; border-color: #b6d0c0; color: var(--c-ink); }
.tc-rail [aria-current] .tc-rail__n { border: 0; background: var(--c-deep); color: #fff; font-size: .75rem; }
.tc-rail [aria-current] .tc-rail__n::before { content: none; }
@media (hover: hover) and (pointer: fine) { .tc-rail button:hover { background: rgb(255 255 255 / .7); } }
@container tc (min-width: 560px) {
  .tc-rail li, .tc-rail li:has([aria-current]) { flex: 0 1 auto; }
  .tc-rail ol { justify-content: space-between; }
  .tc-rail li:not(:has([aria-current])) .tc-rail__t { position: static; width: auto; height: auto; clip-path: none; }
}

/* The guide for this moment: never scrolls (its height is measured). Until
   the script has measured, a close guess by the console's width (measured at
   the default text size), so the laptop doesn't grow, and the board beside
   it doesn't move, when the measure lands. */
.tc-panel {
  --tc-guess: 244px;
  position: relative; min-height: var(--tc-fit, var(--tc-guess));
  display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 14px;
}
.tc-panel:focus-visible { outline-offset: -3px; }
@container tc (max-width: 485.98px) { .tc-panel { --tc-guess: 260px; } }
@container tc (max-width: 439.98px) { .tc-panel { --tc-guess: 302px; } }
@container tc (max-width: 399.98px) { .tc-panel { --tc-guess: 310px; } }
@container tc (max-width: 378.98px) { .tc-panel { --tc-guess: 322px; } }
@container tc (max-width: 359.98px) { .tc-panel { --tc-guess: 352px; } }
@container tc (max-width: 329.98px) { .tc-panel { --tc-guess: 374px; } }
.tc-panel :is(p, h3, ol, ul) { margin: 0; }
.tc-panel.tc-probe { position: absolute; inset: 0 0 auto; min-height: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.tc-guide { display: grid; gap: 10px; justify-items: start; }
.tc-cue {
  justify-self: stretch;
  padding: 8px 14px; border: 1px solid var(--c-wash-edge); border-radius: 14px; background: var(--c-wash);
  color: #1d2a22; font-size: .96875rem; font-weight: 600; line-height: 1.45; text-wrap: pretty;
}
.tc-copy { color: var(--c-ink-2); text-wrap: pretty; }
.tc-copy--count { font-size: .875rem; }
.tc-copy b { color: var(--c-ink); font-weight: 700; }
.tc-steps { display: grid; gap: 8px; padding: 0; list-style: none; counter-reset: s; }
.tc-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; counter-increment: s; }
.tc-steps li::before { content: counter(s); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: #e2ede6; color: var(--c-deep); font: 700 .75rem / 1 var(--o-font-ui); }
.tc-safety { display: grid; gap: 6px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line); justify-self: stretch; }
.tc-safety h3 { display: flex; align-items: center; gap: 7px; font: 700 .875rem / 1.2 var(--o-font-ui); color: var(--c-deep); }
.tc-safety h3 .tb-ico { width: 15px; height: 15px; }
.tc-safety ul { display: grid; gap: 4px; padding-inline-start: 1.1em; }
.tc-keep { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line); font-size: .875rem; line-height: 1.4; color: var(--c-ink-2); justify-self: stretch; }
.tc-keep .tb-ico { width: 15px; height: 15px; margin-top: 2px; color: var(--c-deep); }
.tc-keep b { color: var(--c-deep); font-weight: 700; }
.tc-details { display: grid; gap: 8px; padding-inline-start: 1.1em; color: var(--c-ink-2); }
.tc-more {
  /* inline, after the cue's words: a full-height target that doesn't open up the line */
  display: inline-flex; align-items: center; gap: 6px; vertical-align: baseline;
  min-height: var(--c-hit); margin-block: calc((1.45em - var(--c-hit)) / 2); margin-inline: 2px -6px; padding: 0 6px;
  border: 0; border-radius: 8px; background: none; font-size: .9375rem; font-weight: 700; color: var(--c-deep); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.tc-more .tb-ico { width: 12px; height: 8px; }
@media (hover: hover) and (pointer: fine) { .tc-more:hover { text-decoration-color: currentColor; } }

/* More guidance: a sheet over the guide, with its own Close (Esc too).
   In the laptop it lies over the guide area; in the phone card it opens
   in place. Long guidance reads inside it; the controls never do. */
.tc-sheet { display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--c-surface); border-radius: 14px; border: 1px solid var(--c-line); }
.tc-sheet[hidden] { display: none; }
.tc-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 14px; border-block-end: 1px solid var(--c-line); }
.tc-sheet__head h3 { font: 700 1rem / 1.25 var(--o-font-ui); color: var(--c-deep); }
.tc-sheet__head h3:focus { outline: none; }
.tc-sheet__head h3:focus-visible { outline: 3px solid var(--o-focus); outline-offset: 2px; border-radius: 4px; }
.tc-sheet__body { display: grid; align-content: start; gap: 12px; padding: 12px 14px 14px; }
@container tb-laptop (min-width: 420px) {
  .tc-panel { position: static; }
  .tc-sheet { position: absolute; inset: 6px; z-index: 3; box-shadow: 0 8px 24px -10px rgb(40 36 30 / .3); }
  .tc-sheet__body { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cfc8bb transparent; padding-block-end: 28px;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
}

/* Orla's lines (DialogueControls) */
.tc-dialogue { display: grid; gap: 10px; }
.tc-lines { display: grid; gap: 6px; padding: 0; list-style: none; }
.tc-lines li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: .90625rem; line-height: 1.4; color: var(--c-ink-2); text-wrap: pretty; }
.tc-lines li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px dashed #bfb8aa; font: 700 .75rem / 1 var(--o-font-ui); }
.tc-lines li[data-state="shown"] { color: var(--c-ink); }
.tc-lines li[data-state="shown"] > span { border: 1.5px solid var(--c-ink); }
.tc-lines li[data-state="shown"] > span .tb-ico { width: 11px; height: 8px; }
.tc-lines li[data-state="next"] { color: var(--c-ink); }
.tc-lines li[data-state="next"] > span { border: 0; background: var(--c-deep); color: #fff; }
.tc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-row__end { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.tc-done { display: flex; align-items: center; gap: 7px; color: var(--c-deep); font-weight: 650; text-wrap: pretty; }
.tc-done .tb-ico { width: 13px; height: 9px; }

/* Console buttons (the product's pills) */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--c-hit); padding: 0 16px; border-radius: 999px; border: 1px solid #d3ccbf; background: #fff; color: var(--c-ink);
  font-weight: 700; white-space: nowrap;
}
.tc-btn .tb-ico { width: 14px; height: 14px; }
.tc-btn--primary { background: var(--c-next); border-color: var(--c-next); color: #fff; }
.tc-btn--quiet { padding-inline: 12px; background: transparent; border-color: transparent; color: var(--c-ink-2); }
.tc-btn--round { width: var(--c-hit); padding: 0; }
.tc-btn--round .tb-ico { width: 16px; height: 16px; }
.tc-btn--wide { width: 100%; }
.tc-btn:disabled, .tc-btn[aria-disabled="true"] { opacity: .42; }
@media (hover: hover) and (pointer: fine) {
  .tc-btn:hover:not(:disabled) { border-color: var(--c-ink); }
  .tc-btn--quiet:hover:not(:disabled) { background: rgb(255 255 255 / .8); border-color: #d3ccbf; }
  .tc-btn--primary:hover:not(:disabled) { background: #000; }
}

/* The activity: ways to join in (one Start), its status, the question */
.tc-act { display: grid; gap: 10px; }
.tc-act--end { gap: 8px; margin-block-start: auto; }
.tc-ways { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.tc-ways li { flex: 1 1 auto; display: flex; }
.tc-ways button {
  flex: 1; display: grid; place-items: center; min-height: var(--c-hit); padding: 4px 14px; border-radius: 999px;
  border: 1px solid #d3ccbf; background: #fff; font-weight: 650; text-align: center; line-height: 1.2;
}
.tc-ways [aria-pressed="true"] { border-color: var(--c-deep); background: var(--c-deep); color: #fff; }
@media (hover: hover) and (pointer: fine) { .tc-ways button:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--c-ink); } }
.tc-ways--prompts li { flex-basis: 100%; }
.tc-ways--prompts button { display: grid; place-items: start; gap: 3px; padding: 10px 16px; border-radius: 14px; text-align: start; }
.tc-ways--prompts strong { font-weight: 700; }
.tc-ways--prompts span { font-size: .875rem; font-weight: 500; color: var(--c-ink-2); }
.tc-ways--prompts [aria-pressed="true"] { background: #e1ece5; color: var(--c-ink); }
.tc-ways--prompts [aria-pressed="true"] span { color: var(--c-deep); }
.tc-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--c-line); font-weight: 650; }
.tc-status small { font: inherit; font-weight: 500; color: var(--c-ink-2); }
.tc-meter { height: 6px; border-radius: 9px; background: #dbe7e0; overflow: hidden; }
.tc-meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--c-deep); border-radius: inherit; }

/* The pupil screen preview (the console's own: what the class board shows,
   then its label and status). It only takes the room the tallest moment
   leaves (flex: 1 from nothing, and the fit probe never counts it), so it
   fills the short moments and never makes the laptop taller; the picture
   keeps 16:9 inside that room. Too little room: it isn't shown. */
.tc-preview { flex: 1 1 0; min-height: 0; position: relative; container: tc-prev-room / size; }
.tc-probe .tc-preview { display: none; }
.tc-preview__in {
  container: tc-prev / inline-size;
  position: absolute; inset-block-start: 0; inset-inline: 0; margin-inline: auto;
  inline-size: min(100cqw, (100cqh - 34px) * 16 / 9);
  display: grid; gap: 8px;
}
/* Short room (Complete, with its two buttons): the picture alone, its
   status on its corner. Almost no room: not shown. */
@container tc-prev-room (max-height: 129.98px) {
  .tc-preview .tc-preview__in { inline-size: min(100cqw, 100cqh * 16 / 9); }
  .tc-preview .tc-preview__screen { block-size: min(100cqh, 100cqw * 9 / 16); }
  .tc-preview .tc-preview__bar { display: none; }
}
@container tc-prev-room (max-height: 63.98px) { .tc-preview .tc-preview__in { display: none; } }
@container tc-prev (max-width: 229.98px) { .tc-preview .tc-preview__pill { display: none; } }
/* 16:9 when the room is short; a little taller (up to 4:3, the picture
   cropped at its sides) when the room is tall, so a phone's card is full. */
.tc-preview__screen {
  container-type: inline-size; position: relative; overflow: hidden;
  block-size: clamp(100cqw * 9 / 16, 100cqh - 34px, 100cqw * 3 / 4);
  border-radius: 12px; background: #6d8a5b;
  box-shadow: 0 0 0 1px rgb(40 36 30 / .1), 0 8px 18px -10px rgb(40 36 30 / .45);
}
.tc-preview__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-preview__screen::after { content: ""; position: absolute; inset: 0; background: rgb(28 52 34 / .14); }
.tc-preview__words {
  position: absolute; z-index: 1; inset-inline: 6%; inset-block-start: 40%; translate: 0 -50%;
  text-align: center; color: #fffdf6; font: 800 7.6cqi / 1.06 var(--o-font-ui); letter-spacing: -.025em; text-wrap: balance;
  text-shadow: 0 .3cqi 1.8cqi rgb(18 40 24 / .5);
}
.tc-preview__orla { position: absolute; z-index: 2; inset-inline-start: 78%; inset-block-start: 100%; width: 40%; height: auto; translate: -50% -64%; rotate: -5deg;
  filter: drop-shadow(0 1.4cqi 0 rgb(24 52 32 / .28)); }
/* The Bite's card: the world softened, the title pill, the card, Orla at its corner */
[data-pose="open"] .tc-preview__art, [data-pose="about"] .tc-preview__art { filter: blur(1.2px) saturate(.85); scale: 1.06; }
:is([data-pose="open"], [data-pose="about"])::after { background: linear-gradient(180deg, rgb(255 253 247 / .46), rgb(221 239 223 / .38) 60%, rgb(25 84 64 / .18)); }
.tc-preview__pill-title { position: absolute; z-index: 1; inset-block-start: 5%; inset-inline: 0; margin-inline: auto; inline-size: fit-content;
  padding: 1.2cqi 3cqi; border-radius: 999px; background: #fffdf8; color: #195440; font: 750 3.4cqi / 1.1 var(--o-font-ui); white-space: nowrap; }
.tc-preview__card { position: absolute; z-index: 1; inset-block-start: 21%; inset-inline-start: 50%; translate: -50% 0; rotate: -2deg; inline-size: 30%;
  display: grid; overflow: hidden; border-radius: 2.4cqi; background: #fffdf7; box-shadow: 0 2cqi 4cqi rgb(25 84 64 / .26); }
.tc-preview__cover { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 70%; }
.tc-preview__card b { padding: 1.6cqi 2cqi 2cqi; color: #195440; font: 800 3.2cqi / 1.05 var(--o-font-ui); }
[data-pose="open"] .tc-preview__orla { inset-inline-start: 66%; inset-block-start: 93%; width: 17%; translate: -50% -100%; rotate: 0deg; }
/* What is an Orli Bite? one paper card in the middle */
.tc-preview__note { position: absolute; z-index: 1; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; inline-size: 70%;
  display: grid; justify-items: center; gap: 2cqi; padding: 5cqi 4cqi; border-radius: 2.4cqi; background: #fffdf7; text-align: center;
  box-shadow: 0 1.4cqi 3.6cqi rgb(0 0 0 / .16); }
.tc-preview__note b { color: #195440; font: 800 5.6cqi / 1.05 var(--o-font-ui); letter-spacing: -.02em; }
.tc-preview__note span { color: #243d30; font: 650 3.4cqi / 1.25 var(--o-font-ui); text-wrap: balance; }
/* The ending: the warm tint, well done, Orla */
[data-pose="done"]::after { background: rgb(18 58 42 / .48); }
[data-pose="done"] .tc-preview__words { inset-block-start: 26%; font-size: 7cqi; inset-inline: 10%; }
[data-pose="done"] .tc-preview__orla { inset-inline-start: 50%; inset-block-start: 98%; width: 30%; translate: -50% -100%; rotate: 0deg; }
.tc-preview__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin: 0; }
.tc-preview__label { display: inline-flex; align-items: center; gap: 8px; font: 700 .8125rem / 1.2 var(--o-font-ui); color: var(--c-ink); }
.tc-preview__label svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: #e6e1d6;
  fill: none; stroke: var(--c-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
/* its status, on the picture's lower left corner (Orla is never there) */
.tc-preview__pill { position: absolute; z-index: 3; inset-block-end: 7px; inset-inline-start: 7px;
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 9px 2px 7px; border-radius: 999px;
  background: rgb(255 253 248 / .95); color: var(--c-deep); font: 700 .6875rem / 1.4 var(--o-font-ui); white-space: nowrap;
  box-shadow: 0 1px 3px rgb(30 40 30 / .22); }
.tc-preview__pill::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2f8a5e; box-shadow: 0 0 0 2.5px rgb(47 138 94 / .2); }

/* ============================================================ transport
   Back and Next: the console's dock, under the laptop, at full size (Ryan,
   3 Nov). The product's pills: an outline Back (the product's "Previous"),
   the dark Next; a Bite has no Skip in Orli Schools either. A locked Next
   says what unlocks it, here and to screen readers. */
.tb-transport {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  margin-block-start: var(--o-space-4); padding: 6px;
  border-radius: 999px; background: var(--o-surface); border: 1px solid var(--o-line); box-shadow: var(--o-shadow);
}
@media (min-width: 1280px) { .tb-transport { margin-inline: 4%; } }
@media (min-width: 1280px) { .tb-transport { margin-block-start: var(--o-space-5); } }
.tb-transport__hint {
  flex: 1 1 8rem; margin: 0; min-width: 0; text-align: center;
  font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--o-ink-2); text-wrap: balance;
  opacity: 0; transition: opacity var(--o-t-enter) var(--o-ease);
}
.tb-transport__hint[data-on] { opacity: 1; }
.tb-step {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--o-target); padding: 0 20px; border-radius: 999px;
  border: 1px solid #d3ccbf; background: #fff; color: var(--o-ink);
  font: 700 .9375rem / 1 var(--o-font-ui); white-space: nowrap; cursor: pointer;
  transition: background-color var(--o-t-interact) var(--o-ease), border-color var(--o-t-interact) var(--o-ease), opacity var(--o-t-interact) var(--o-ease);
}
.tb-step .tb-ico { width: 16px; height: 16px; }
.tb-step--next { margin-inline-start: auto; background: #262420; border-color: #262420; color: #fff; padding-inline: 22px; }
.tb-step:disabled { opacity: .42; cursor: default; }
/* Locked Next: still reads clearly (an outline pill, ink-2 words), with a
   small lock where the arrow goes. Pressing it says what unlocks it. */
.tb-step--next[aria-disabled="true"] { background: #fff; border-color: #cfc8bb; color: var(--o-ink-2); cursor: default; }
.tb-step--next .tb-ico--lock { width: 16px; height: 16px; }   /* the arrow's box: Next never changes width */
.tb-step[hidden] { display: none; }
.tb-step:focus-visible { outline: var(--o-focus-ring); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tb-step:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--o-ink); }
  .tb-step--next:hover:not([aria-disabled="true"]) { background: #000; }
}
.tb-step:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--o-press-scale); }
/* Narrow: the hint goes under the buttons, so they keep their size. */
@container tb-stage (max-width: 459.98px) {
  .tb-transport { border-radius: 30px; }
  /* the hint rises above the bar as a small ink pill */
  .tb-transport__hint {
    position: absolute; inset-block-end: calc(100% + 8px); inset-inline: 8px; margin-inline: auto; inline-size: fit-content; max-inline-size: calc(100% - 16px);
    padding: 7px 14px; border-radius: 18px; background: var(--o-ink); color: #fff; pointer-events: none;
  }
  .tb-step { padding-inline: 16px; }
  /* phones: the laptop a little closer to the captions above it */
  .tb-laptop { margin-block-start: var(--o-space-5); }
}

/* ============================================ what is an Orli Bite?
   Four cards in the home page's card (white, 24px corners, the resting
   shadow), each with a picture on top: Orla's garden breathing with the
   Bite, felt Orlis on felt cushions, three little Orlis for the ways to
   join in, and the safety note on a felt patch (website review, 3 Nov:
   renamed from "What's in this Bite", fewer words). Seven and five columns
   from 900px; pictures on a row share one height (subgrid). */
.tb-about__head { margin-block-end: var(--o-head-gap); }
.tb-facts { display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.tb-fact { margin: 0; }
.tb-fact .o-card__body { gap: var(--o-space-2); padding: var(--o-space-5); }
.tb-fact .o-card__text { max-inline-size: 46ch; }
.tb-fact__art { position: relative; --ratio: 16 / 10; isolation: isolate; width: 100%; }
.tb-fact__art > img { display: block; }
@media (min-width: 600px) {
  .tb-facts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tb-fact { grid-column: span 6; grid-row: span 2; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tb-fact__art { --ratio: 4 / 3; }
  .tb-fact--ways .tb-fact__art { --ratio: 16 / 10; }
  .tb-fact--need .tb-fact__art, .tb-fact--keep .tb-fact__art { aspect-ratio: auto; height: 100%; }
}
@media (min-width: 900px) {
  .tb-fact--time, .tb-fact--ways { grid-column: span 7; }
  .tb-fact--need, .tb-fact--keep { grid-column: span 5; }
  .tb-fact--time .tb-fact__art { --ratio: 16 / 9; }
  .tb-fact--ways .tb-fact__art { --ratio: 16 / 7.4; }
  .tb-fact .o-card__body { padding: var(--o-space-5) var(--o-space-6) var(--o-space-6); }
}

/* --- About five minutes: Orla's garden (the Higgsfield closer moment),
   a ring of light on the path round her, and six felt dots, one for each
   slow breath. In Full motion the ring spreads for four seconds and
   settles for four, the garden leans in and out with it, and a dot fills
   after each breath; the six take 48 s, then begin again. */
.tb-fact__art.tb-garden { background: #d9e5c8; container-type: size; }
.tb-garden > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 50% 62%; }
/* Sized by the picture's height (the picture covers the box by its height
   at every card shape), so the ring stays round Orla's feet; its far side
   passes behind her (the mask is her silhouette). */
.tb-garden__ring {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(10.9cqh 10.2cqh at 50% 55cqh, transparent 97%, #000 100%);
          mask-image: radial-gradient(10.9cqh 10.2cqh at 50% 55cqh, transparent 97%, #000 100%);
}
.tb-garden__ring i {
  position: absolute; left: 50%; top: 64.5%; width: 53cqh; aspect-ratio: 3.3 / 1; translate: -50% -50%;
  border-radius: 50%; border: 2px solid rgb(255 251 236 / .9);
  box-shadow: 0 0 14px rgb(255 244 210 / .55), inset 0 0 12px rgb(255 244 210 / .35);
  opacity: .72; scale: .8;
}
.tb-garden__ring i:nth-child(2) { width: 78cqh; opacity: .38; scale: .92; }
.tb-garden__ring i:nth-child(3) { width: 32cqh; opacity: 0; }
.tb-garden__count {
  position: absolute; z-index: 2; inset-block-end: var(--o-space-3); inset-inline-start: var(--o-space-3);
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 12px 0 10px;
  border-radius: var(--o-r-pill); background: var(--o-paper); color: var(--world-deep);
  box-shadow: 0 1px 2px rgb(47 46 43 / .12), 0 6px 14px -6px rgb(47 46 43 / .25);
}
.tb-garden__count > .tb-ico { width: 17px; height: 17px; }
.tb-garden__dots { display: flex; gap: 6px; }
.tb-garden__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--world-accent); box-shadow: inset 0 0 0 1.5px var(--world-deep); }

/* --- What you need: felt Orlis on felt cushions (crop of How it works' reading corner) */
.tb-fact__art.tb-need { background: #e8d3b4; }
.tb-need > img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; }

/* --- Ways to join in: Orla on a felt cushion, three ways (rendered with the
   official Orli rig: tools/render_ways.py), a doodle each: held close (a
   heart), following the screen (the board and its ring; she looks up at
   it), watching (an open eye; she turns to it; it was a thought cloud for
   "Imagine or watch" until the website review of 3 Nov). Doodles in the
   Schools doodle line. Each way is two layers in one frame: the cushion
   with its shadows, then Orla, so she can breathe on her seat. */
.tb-fact__art.tb-ways {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; align-content: center; column-gap: 1%;
  padding: 3% 3% 1.5%;
  background:
    radial-gradient(120% 90% at 18% 0%, rgb(255 248 230 / .95) 0%, transparent 62%),
    linear-gradient(#f4ecdd, #e9dcc6);
}
.tb-ways::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/felt-grain-256.webp") 0 0 / 160px; mix-blend-mode: soft-light; opacity: .7;
}
.tb-ways::before {
  content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: -1;
  background: linear-gradient(rgb(214 191 154 / 0), rgb(214 191 154 / .3));
}
/* one frame per way (520 x 550): the cushion's centre at 50%, Orla's base at 75% */
.tb-way { position: relative; display: block; min-inline-size: 0; aspect-ratio: 520 / 550; max-block-size: 100%; }
.tb-way > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-way__orli { transform-origin: 50% 75%; }
.tb-way__doodle {
  position: absolute; z-index: 2; inset-block-start: -2%; inset-inline-end: 4%; width: 30%; height: auto; overflow: visible;
  fill: var(--o-paper); stroke: var(--world-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgb(47 46 43 / .14));
}
.tb-way__doodle .tb-way__beat { fill: none; opacity: .9; }
.tb-way__doodle .tb-way__ring { fill: none; stroke: var(--world-accent); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }
.tb-way__doodle .tb-way__iris { fill: var(--world-accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.tb-way__doodle .tb-way__pupil { fill: var(--world-deep); stroke: none; transform-box: fill-box; transform-origin: center; }
.tb-way--screen .tb-way__doodle { inset-inline-end: auto; inset-inline-start: 50%; translate: -50% 0; width: 34%; inset-block-start: -6%; }
.tb-way--screen .tb-way__doodle path:first-child { fill: #d5ece6; }
.tb-way--watch .tb-way__doodle { width: 36%; inset-block-start: -5%; inset-inline-end: -1%; }

/* --- Keep in mind: a felt heart sewn on a mint felt patch (tools/build_art.py
   keep()), still and calm: the safety note never moves. */
.tb-fact__art.tb-keep { background: #ece0cb; }
.tb-keep > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }

/* Full motion only (player.js sets data-moving; data-away pauses it off
   screen). One 8 s breath for everything: 4 s in, 4 s out. */
.tb-about[data-moving] .tb-garden > img { animation: tb-lean 8s ease-in-out infinite; }
.tb-about[data-moving] .tb-garden__ring i { animation: tb-ring 8s ease-in-out infinite; }
.tb-about[data-moving] .tb-garden__ring i:nth-child(2) { animation-name: tb-ring-wide; }
.tb-about[data-moving] .tb-garden__ring i:nth-child(3) { animation-name: tb-ring-small; }
.tb-about[data-moving] .tb-garden__dots i { animation: 48s linear infinite; }
.tb-about[data-moving] .tb-garden__dots i:nth-child(1) { animation-name: tb-dot-1; }
.tb-about[data-moving] .tb-garden__dots i:nth-child(2) { animation-name: tb-dot-2; }
.tb-about[data-moving] .tb-garden__dots i:nth-child(3) { animation-name: tb-dot-3; }
.tb-about[data-moving] .tb-garden__dots i:nth-child(4) { animation-name: tb-dot-4; }
.tb-about[data-moving] .tb-garden__dots i:nth-child(5) { animation-name: tb-dot-5; }
.tb-about[data-moving] .tb-garden__dots i:nth-child(6) { animation-name: tb-dot-6; }
.tb-about[data-moving] .tb-way__orli { animation: tb-rise 8s ease-in-out infinite; }
.tb-about[data-moving] .tb-way--hold .tb-way__beat { animation: tb-beat 8s ease-in-out infinite; }
.tb-about[data-moving] .tb-way--screen .tb-way__ring { animation: tb-follow 8s ease-in-out infinite; }
.tb-about[data-moving] .tb-way--watch .tb-way__doodle { animation: tb-drift 8s ease-in-out infinite; }
.tb-about[data-moving] .tb-way--watch :is(.tb-way__iris, .tb-way__pupil) { animation: tb-look 8s ease-in-out infinite; }
.tb-about[data-away] :is(.tb-garden, .tb-ways) * { animation-play-state: paused !important; }

@keyframes tb-lean { 0%, 100% { scale: 1; } 50% { scale: 1.022; } }
/* The ring breathes as the Bite asks: it spreads for 4 s (in) and draws
   back for 4 s (out), never a held breath at either end. */
@keyframes tb-ring { 0%, 100% { scale: .62; opacity: .5; } 50% { scale: 1.1; opacity: .95; } }
@keyframes tb-ring-wide { 0%, 100% { scale: .74; opacity: .14; } 50% { scale: 1.06; opacity: .46; } }
@keyframes tb-ring-small { 0%, 100% { scale: .9; opacity: .3; } 50% { scale: 1.5; opacity: 0; } }
/* dot n fills after breath n (8n s) and stays until the six are done */
@keyframes tb-dot-1 { 0%, 16.6% { background: transparent; } 16.7%, 99.9% { background: var(--world-accent); } }
@keyframes tb-dot-2 { 0%, 33.2% { background: transparent; } 33.3%, 99.9% { background: var(--world-accent); } }
@keyframes tb-dot-3 { 0%, 49.9% { background: transparent; } 50%, 99.9% { background: var(--world-accent); } }
@keyframes tb-dot-4 { 0%, 66.6% { background: transparent; } 66.7%, 99.9% { background: var(--world-accent); } }
@keyframes tb-dot-5 { 0%, 83.2% { background: transparent; } 83.3%, 99.9% { background: var(--world-accent); } }
@keyframes tb-dot-6 { 0%, 97.9% { background: transparent; } 98%, 100% { background: var(--world-accent); } }
/* Orla breathes on her cushion: a gentle swell from her seat (the cushion's
   rim stays in front of her), 4 s in, 4 s out. */
@keyframes tb-rise { 0%, 100% { scale: 1; } 50% { scale: 1.035 1.05; } }
@keyframes tb-beat { 0%, 100% { opacity: 0; } 30%, 60% { opacity: .9; } }
@keyframes tb-follow { 0%, 100% { scale: .55; opacity: .6; } 50% { scale: 1.25; opacity: 1; } }
@keyframes tb-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5%; } }
@keyframes tb-look { 0%, 100% { translate: 0 0; } 50% { translate: 0 6%; } }

/* --------------------------------------------------------- the whole Bite
   Printed (the A4 handout) and shown without JavaScript only: on screen the
   Bite itself and its captions say it all (website review, 3 Nov: less copy
   under the Bite). */
.tb-script { display: none; }
html:not(.js) .tb-script { display: block; margin-block-start: var(--o-space-7); max-inline-size: 72ch; }
.tb-script__title { margin: 0 0 var(--o-space-4); font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); }
.tb-script__steps { display: grid; gap: var(--o-space-5); margin: 0; padding: 0 0 0 1.4em; }
.tb-script__steps > li { display: grid; gap: var(--o-space-2); }
.tb-script__steps h4 { margin: 0; font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); }
.tb-script__steps p, .tb-script__steps ul { margin: 0; }
.tb-script__board, .tb-script__lines { padding-inline-start: var(--o-space-3); border-inline-start: 3px solid var(--world-accent); font-weight: 600; color: var(--world-deep); }
.tb-script__lines { display: grid; gap: var(--o-space-1); list-style: none; }
.tb-script__guide { color: var(--o-ink-2); }
.tb-script__guide b { color: var(--o-ink); }

/* ================================================================ trial
   The one deep band, with the home page's white offer card on it: the
   words, then the creator kit illustration on the canvas. */
.tb-trial { --o-section-bg: var(--o-action-press); }
.tb-offer { display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; }
.tb-offer__words { margin: 0; padding: var(--o-space-6) var(--o-space-5); align-self: center; }
.tb-offer__words .o-title { max-inline-size: 16ch; }
.tb-offer__words .o-cluster { margin-block-start: var(--o-space-2); }
.tb-offer__words .o-small { max-inline-size: 44ch; margin-block-start: var(--o-space-2); }
.tb-offer__art {
  position: relative; margin: 0; display: grid; place-items: center;
  padding: var(--o-space-4) var(--o-space-4) var(--o-space-5);
  background: var(--o-canvas); border-block-start: 1px solid var(--o-line);
}
.tb-offer__art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--o-r-card); }
.tb-offer__art figcaption { margin-block-start: var(--o-space-2); }
.tb-offer__tag { position: absolute; z-index: 1; inset-block-start: calc(var(--o-space-4) + var(--o-space-3)); inset-inline-start: calc(var(--o-space-4) + var(--o-space-3)); --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }
@media (min-width: 900px) {
  .tb-offer { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .tb-offer__words { padding: var(--o-space-7) var(--o-space-6) var(--o-space-7) var(--o-space-7); }
  .tb-offer__art { padding: var(--o-space-6); border-block-start: 0; border-inline-start: 1px solid var(--o-line); }
  .tb-offer__tag { inset-block-start: calc(var(--o-space-6) + var(--o-space-3)); inset-inline-start: calc(var(--o-space-6) + var(--o-space-3)); }
}

/* ============================================================== motion */
html[data-motion="still"] :is(.tc-more .tb-ico, .tb-step, .tb-transport__hint) { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion]) :is(.tb-step, .tb-transport__hint) { transition: none; } }
html:is([data-motion="reduced"], [data-motion="still"]) .tb-step:active { scale: none; }

/* ======================================================= forced colours */
@media (forced-colors: active) {
  .tb-board__frame, .tb-laptop__frame, .tc, .tc-cue, .tc-safety, .tc-btn, .tc-ways button, .tc-status, .tc-sheet, .tb-transport, .tb-step { border: 1px solid CanvasText; }
  .tb-ico { background: CanvasText; }
  .tc-rail [aria-current] .tc-rail__n, .tc-icon[aria-pressed="true"], .tc-ways [aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .tb-step--next { forced-color-adjust: none; background: ButtonText; color: ButtonFace; }
  .tb-step--next .tb-ico { background: ButtonFace; }
  .tb-step--next[aria-disabled="true"] { background: ButtonFace; color: GrayText; border-color: GrayText; }
  .tb-step--next[aria-disabled="true"] .tb-ico { background: GrayText; }
  .tb-way__doodle { stroke: CanvasText; fill: Canvas; }
  .tb-way__iris, .tb-way__pupil { fill: CanvasText; }
  .tb-garden__dots i, .tc-rail [data-done] .tc-rail__n::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; animation: none !important; }
  .tc-preview__label svg { stroke: CanvasText; }
  .tc-preview__pill::before { forced-color-adjust: none; background: CanvasText; }
}

/* ================================================================ print
   A teacher printing this page gets the Bite as a clean A4 handout: what
   an Orli Bite is, the four cards' words and the whole script. No site header or
   footer, no devices, no controls, no pictures and no trial card (as
   schools.css and safety/pages.css). */
@media print {
  @page { size: A4; margin: 15mm 15mm 17mm; }
  :root {
    --o-text-display: 24pt; --o-text-title: 16pt; --o-text-heading: 12pt;
    --o-text-lead: 11pt; --o-text-body: 10pt; --o-text-small: 8.5pt;
    --o-section: 0px; --o-head-gap: 5mm; --o-gutter: 0px;
  }
  html, body { background: #fff !important; color: #000; }
  body { font-size: var(--o-text-body); }
  orli-header, orli-footer, .o-skip, .s-toast, .s-loader,
  .tb-hero, .tb-trial, .tb-fact__art { display: none !important; }
  main { display: block; }
  .o-container { width: 100%; }
  a { color: #000 !important; }

  /* The sheet's head: the logo, where it's from, and the Bite's name. */
  .tb-print-head { display: block; margin-block-end: 7mm; }
  .tb-print-head__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8mm;
    margin: 0 0 7mm; padding-block-end: 3mm; border-block-end: .75pt solid #000;
    font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui);
  }
  .tb-print-head__bar img { width: 56px; height: auto; }
  .tb-print-head__title {
    margin: 0; font: var(--o-weight-title) var(--o-text-display) / 1.05 var(--o-font-ui); letter-spacing: var(--o-track-display);
  }

  .tb-about { padding: 0 !important; background: none !important; color: #000 !important; }
  .tb-about .o-section-head { margin-block-end: 5mm; gap: 2mm; }
  .tb-about .o-title, .tb-about .o-lead { max-inline-size: none; }

  .tb-facts { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4mm 8mm; }
  .tb-fact { display: block !important; grid-column: auto !important; grid-row: auto !important; padding-block-start: 2.5mm; border: 0 !important; border-block-start: .75pt solid #999 !important; border-radius: 0 !important; box-shadow: none !important; break-inside: avoid; }
  .tb-fact .o-card__body { padding: 0 !important; }
  .tb-fact .o-card__title { font-size: var(--o-text-heading); }
  .tb-fact .o-card__text { color: #222; max-inline-size: none; }

  /* The whole script, in order */
  .tb-script { display: block !important; margin-block-start: 7mm; }
  .tb-script__title { font-size: var(--o-text-heading); margin-block-end: 3mm; break-after: avoid; }
  /* Block flow, so a long step can carry on over the page between its
     paragraphs; a heading never sits alone at the foot of a page. */
  .tb-script__steps { display: block; padding-inline-start: 5mm; }
  .tb-script__steps > li { display: block; }
  .tb-script__steps > li + li { margin-block-start: 4mm; }
  .tb-script__steps > li > * + * { margin-block-start: 1.5mm; }
  .tb-script__steps h4 { break-after: avoid; }
  .tb-script__steps p, .tb-script__lines > li { orphans: 2; widows: 2; }
  .tb-script__board, .tb-script__lines { break-inside: avoid; border-inline-start-color: #999; color: #000; }
  .tb-script__guide { color: #222; }
}

/* Very large text on a narrow screen: the world label (outlined Figma Hand,
   which can't wrap) shrinks to fit rather than run past the edge. */
.tb-hero .o-world-label { font-size: min(var(--o-text-heading), calc((100vw - 2 * var(--o-gutter) - 24px) / 9)); max-inline-size: 100%; }