/* Tidbits (SITE-28): the small animated pieces of Outpaced (chips, cards, covers, lines of light) the product pages
   and the home product tour show, never app screens. Markup: src/v2/product/tidbits.mjs; motion: steps.js. */

/* ════════════════════════════════════════════════════════════════════════
   Tidbits: shared parts
   ════════════════════════════════════════════════════════════════════════ */
.tb { position: relative; width: 100%; height: 100%; min-width: 0; }
.tb-brand__card, .tb-pc, .tb-ev, .tb-batch__card, .tb-cal__detail, .tb-research__props, .tb-post { grid-template-columns: minmax(0, 1fr); }
/* Grid tidbits size their one column to the well, never to a nowrap row inside it. */
.tb-brand, .tb-evidence, .tb-persona-card, .tb-research, .tb-batch, .tb-formats, .tb-loop, .tb-week, .tb-runs, .tb-cal, .tb-slots, .tb-working { grid-template-columns: minmax(0, 1fr); }
.tb-label { font: 400 var(--t-pixel)/1.2 var(--font-pixel-ui); text-transform: uppercase; letter-spacing: 0; color: var(--ink-58); }
.tb-card { background: var(--canvas); border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-sm); padding: 16px; }
.tb-card__head { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.tb-card__head b { font-weight: 550; }
.tb-card__head .tb-label, .tb-card__head > .chip:last-child { margin-left: auto; }
.tb-row { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--ink-80); }
.tb-row + .tb-row { border-top: 1px solid var(--hairline); }
.tb-row__k { flex: none; width: 112px; font-weight: 500; color: var(--ink); }
.tb-row__v { flex: 1; min-width: 0; color: var(--ink-64); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-thumb { position: relative; display: block; flex: none; width: var(--w); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px rgb(21 19 15 / .06), var(--shadow-sm); background: var(--paper-2); }
.tb-thumb .ck-ph, .tb-thumb img { width: 100%; height: 100%; }
.tb-thumb img { object-fit: cover; }
.tb-cover { position: relative; display: block; flex: none; width: var(--w); aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-md); box-shadow: 0 0 0 1px rgb(21 19 15 / .06), var(--shadow-md); background: var(--paper-2); }
.tb-tick { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline-strong); color: transparent; transition: background-color 260ms var(--ease-out), color 260ms, box-shadow 260ms; }
.tb-tick svg { width: 11px; height: 11px; }
.tb-tick.is-on { background: var(--tone, var(--orange)); color: #fff; box-shadow: none; }
.tb-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-sm); font: 500 14px/1 var(--font-body); box-shadow: inset 0 0 0 1px var(--hairline-strong); background: var(--canvas); color: var(--ink-80); transition: transform 200ms var(--ease-out), box-shadow 200ms; }
.tb-pill--ink { background: var(--ink); color: #fff; box-shadow: var(--shadow-btn); }
.tb-pill.is-on { transform: scale(.96); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone, var(--orange)) 35%, transparent), var(--shadow-btn); }
.tb-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.tb-wires path { fill: none; stroke: rgb(120 100 80 / .3); stroke-width: 1.2; stroke-linecap: round; }
.tb-meter { position: relative; display: block; height: 8px; border-radius: 99px; background: rgb(21 19 15 / .06); overflow: hidden; }
.tb-meter i { position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); border-radius: inherit; background: var(--tone, var(--orange)); transform-origin: 0 50%; }
.tb-stage { box-shadow: none; transition: background-color 260ms, color 260ms, border-color 260ms; }
.tb-stage--get-found.is-on, .tb-c-mix .tb-stage--get-found { background: var(--orange-soft); color: var(--orange-ink); border-color: transparent; }
.tb-stage--build-trust.is-on, .tb-c-mix .tb-stage--build-trust { background: var(--lilac-soft); color: var(--lilac-ink); border-color: transparent; }
.tb-stage--make-the-sale.is-on, .tb-c-mix .tb-stage--make-the-sale { background: #E7EDDF; color: #3F4D33; border-color: transparent; }
.tb-mark { width: 28px; height: 24px; image-rendering: pixelated; }

/* ════════════════════════════════════════════════════════════════════════
   Hero tidbits
   ════════════════════════════════════════════════════════════════════════ */
/* Strategy: the research report (report.css draws it) */
.pp-board--strategy { height: auto; min-height: 540px; padding-block: 28px 32px; }
@media (max-width: 760px) { .pp-board--strategy { min-height: 0; padding-block: 24px 28px; } }
.tb-report { display: grid; place-items: center; height: auto; }
/* The report sits against the board's right edge; its prompt card has the clear space to its left, so every word
   reads. Below 1240 px there isn't room beside it, so the prompt stacks above the report, as on phones. */
.tb-report { padding-inline: 20px 0; }
.tb-report .rp-stage__set { max-width: none; }
.tb-report .rp-stage__v .rp { margin-right: 24px; }
.tb-report .rp-stage__v .rp-prompt { width: min(236px, calc(100% - 372px - 24px - 16px)); top: 72px; }
@media (max-width: 1240px) {
  .tb-report .rp-stage__v { justify-items: center; }
  .tb-report .rp-stage__v .rp { margin-right: 0; }
  .tb-report .rp-stage__v .rp-prompt { position: relative; left: auto; top: auto; rotate: none; width: min(100%, 372px); margin-bottom: -10px; padding: 12px 14px 22px; z-index: 0; }
  .tb-report .rp-stage__v .rp-prompt p { font-size: 16px; min-height: 2.6em; }
  .tb-report .rp-stage__v .rp-prompt__mark { display: none; }
}

/* Content: the phone and its notes */
.tb-phone { display: grid; place-items: center; }
.tb-phone .ck-phone { --ck-phone-w: 236px; }
.tb-note { position: absolute; z-index: 2; display: grid; gap: 4px; width: 188px; padding: 12px 14px; border-radius: var(--r-lg); background: rgb(255 255 255 / .94); box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-md); }
.tb-note b { font: 500 15px/1.25 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.tb-note__m { font-size: 13px; line-height: 1.35; color: var(--ink-64); }
.tb-note--tl { left: 5%; top: 13%; }
.tb-note--tr { right: 5%; top: 24%; }
.tb-note--bl { left: 6%; bottom: 20%; }
.tb-note--br { right: 6%; bottom: 10%; }
@media (max-width: 760px) {
  .tb-note { width: 150px; padding: 10px 12px; }
  .tb-note b { font-size: 14px; }
  .tb-note__m { display: none; }
  .tb-note--tl { left: 3%; top: 7%; } .tb-note--tr { right: 3%; top: 20%; } .tb-note--bl { left: 3%; bottom: 22%; } .tb-note--br { right: 3%; bottom: 8%; }
}
/* One phone per screen size (tidbits.mjs contentHero). */
.tb-phone--narrow { display: none; }
@media (max-width: 520px) { .tb-phone--wide { display: none; } .tb-phone--narrow { display: grid; } }
/* Phones: the kit's 232 px phone (its hooks stay ≥ 11 px, SITE-26 M5), with the notes, which show one at a time, in one
   spot above it rather than over it. */
@media (max-width: 520px) {
  .tb-phone { align-content: start; padding-top: 104px; }
  .tb-phone .ck-phone { --ck-phone-w: 232px; }
  .tb-note, .tb-note--tl, .tb-note--tr, .tb-note--bl, .tb-note--br { left: 50%; right: auto; top: 20px; bottom: auto; translate: -50% 0; width: min(300px, 86%); text-align: center; justify-items: center; }
  .tb-note__m { display: block; }
}

/* Distribution: the week, the results, the next week */
.tb-week { display: grid; align-content: center; gap: 20px; padding: 28px clamp(16px, 4%, 40px); }
.tb-week__grid { display: grid; grid-template-columns: 36px repeat(5, minmax(0, 1fr)); gap: 10px 10px; align-items: center; justify-items: center; }
.tb-week__day { justify-self: center; }
.tb-week__acct { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--canvas); box-shadow: 0 0 0 1px var(--hairline); }
.tb-slot { display: grid; justify-items: center; gap: 6px; width: 100%; padding: 6px 0 8px; border-radius: var(--r-md); background: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px var(--hairline); }
.tb-slot__ph { width: min(var(--w), 70%); }
.tb-slot__t { color: var(--ink-58); transition: color 300ms; }
.tb-slot__t.is-on { color: var(--sage-ink, #3F4D33); }
.tb-week__res { display: grid; grid-template-columns: 36px repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; height: 92px; padding-top: 8px; border-top: 1px dashed var(--hairline-strong); }
.tb-week__rl { align-self: start; writing-mode: vertical-rl; transform: rotate(180deg); justify-self: center; }
.tb-bar { justify-self: center; width: 46%; height: var(--h); border-radius: 4px 4px 1px 1px; background: color-mix(in oklab, #7E9270 45%, #fff); transform-origin: 50% 100%; }
.tb-bar--win { background: #7E9270; box-shadow: 0 0 0 3px rgb(212 242 90 / .55); }
.tb-week__next { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.tb-week__arrow { width: 40px; height: 1.5px; background: linear-gradient(90deg, rgb(120 100 80 / .3), #FF6600); transform-origin: 0 50%; }
.tb-week__plan .pix-avatar { width: 16px; height: 16px; }
.tb-week__plan .pix-avatar svg { width: 8px; height: 8px; }
@media (max-width: 520px) {
  .tb-week { padding: 20px 14px; gap: 16px; }
  .tb-week__grid, .tb-week__res { grid-template-columns: 28px repeat(5, minmax(0, 1fr)); gap: 8px 6px; }
  .tb-week__acct { width: 26px; height: 26px; }
  .tb-week__arrow { display: none; }
}

/* Routines: the run log */
.tb-runs { display: grid; align-content: center; padding: 28px clamp(16px, 5%, 44px); }
.tb-runs__list { position: relative; display: grid; gap: 6px; }
.tb-run { position: relative; display: grid; grid-template-columns: 64px 22px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; min-height: 76px; padding: 10px 14px 10px 10px; border-radius: var(--r-lg); transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out); }
.tb-run.is-on { background: var(--canvas); box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-sm); }
.tb-run__when { display: grid; gap: 5px; color: var(--ink-58); }
.tb-run__t { color: var(--ink); }
.tb-run__node { position: relative; z-index: 1; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink-32); transition: background-color 300ms, box-shadow 300ms; }
.tb-run.is-on .tb-run__node { background: #4C95D3; box-shadow: 0 0 0 4px rgb(76 149 211 / .2); }
.tb-run__body { display: grid; gap: 4px; min-width: 0; }
.tb-run__name { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.tb-run__name b { font-weight: 550; }
.tb-run__name .pix-avatar { width: 22px; height: 22px; }
.tb-run__name .pix-avatar svg { width: 12px; height: 12px; }
.tb-run__line { padding-left: 30px; font-size: 14px; color: var(--ink-64); }
.tb-run__made svg { width: 10px; height: 10px; }
.tb-runs__rail { position: absolute; left: calc(clamp(16px, 5%, 44px) + 10px + 64px + 12px + 10.5px); top: 66px; bottom: 66px; width: 1.2px; background: rgb(120 100 80 / .3); }
.tb-runs__light { position: absolute; left: -1px; top: 0; width: 3px; height: 56px; border-radius: 2px; background: linear-gradient(180deg, rgb(76 149 211 / 0), #4C95D3 80%, #fff); opacity: 0; }
@media (max-width: 520px) {
  .tb-runs { padding: 16px 10px; }
  .tb-run { grid-template-columns: 52px 16px minmax(0, 1fr); min-height: 0; padding: 8px 8px 8px 6px; gap: 0 8px; }
  .tb-run__made { grid-column: 3; justify-self: start; margin-top: 6px; }
  .tb-run__line { padding-left: 0; font-size: 14px; }
  .tb-run__name { font-size: 14px; }
  .tb-runs__rail { left: calc(10px + 6px + 52px + 8px + 7.5px); top: 50px; bottom: 50px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Tab tidbits
   ════════════════════════════════════════════════════════════════════════ */
/* Brand, drafted */
.tb-brand { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px; }
.tb-brand__url { display: flex; align-items: center; gap: 12px; }
.tb-brand__url .chip svg, .tb-src svg { width: 12px; height: 12px; }
.tb-brand__card { width: min(100%, 440px); display: grid; gap: 10px; }
.tb-rows { display: grid; }
.tb-src { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: var(--ink-32); transition: color 300ms, background-color 300ms; }
.tb-src.is-on { color: var(--orange-ink); background: var(--orange-soft); }
.tb-voices { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: 14px; }
.tb-voices .tb-row__k { width: auto; margin-right: 6px; }
.tb-voice { transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.tb-voice.is-on { background: var(--ink); color: #fff; border-color: transparent; }
@media (max-width: 520px) { .tb-row__k { width: 92px; } .tb-brand { padding: 16px 12px; } }

/* A persona */
.tb-persona-card { display: grid; place-items: center; padding: 24px; }
.tb-pc { width: min(100%, 420px); display: grid; gap: 10px; }
.tb-pc__top { display: flex; gap: 14px; align-items: center; }
.tb-pc__ph { width: 56px; aspect-ratio: 1; border-radius: 50%; }
.tb-pc__name { margin-top: 6px; font: 500 18px/1.2 var(--font-display); letter-spacing: -.02em; }
.tb-pc__id { font-size: 14px; color: var(--ink-64); }
.tb-pc__k { margin-top: 6px; }
.tb-pains { display: grid; gap: 6px; }
.tb-pains li { padding: 8px 12px; border-radius: 10px 10px 10px 3px; background: var(--paper); font: italic 400 18px/1.2 var(--font-serif); color: var(--ink-80); justify-self: start; }
.tb-aware { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.tb-aware li { display: grid; gap: 6px; font-size: 11px; line-height: 1.2; color: var(--ink-58); }
.tb-aware i { height: 6px; border-radius: 2px; background: rgb(21 19 15 / .07); transition: background-color 300ms; }
.tb-aware li.is-on { color: var(--orange-ink); font-weight: 600; }
.tb-aware li.is-on i { background: var(--orange); }
@media (max-width: 520px) { .tb-persona-card { padding: 14px 12px; } .tb-pains li { font-size: 16px; } .tb-aware li span { font-size: 11px; } }

/* Evidence */
.tb-evidence { display: grid; place-items: center; padding: 24px; }
.tb-ev { width: min(100%, 460px); display: grid; gap: 10px; }
.tb-ev__list .chip--tag { flex: none; width: 64px; justify-content: center; }
.tb-ev__quote { margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); display: grid; gap: 10px; justify-items: start; }
.tb-ev__quote p { font: italic 400 18px/1.25 var(--font-serif); color: var(--ink-80); }
.tb-ev__quote .chip { transition: background-color 300ms, color 300ms; }
.tb-ev__quote .chip svg { width: 11px; height: 11px; }
.tb-ev__quote .chip.is-on { background: var(--lime); color: var(--lime-ink); border-color: transparent; }
.tb-ev__acts { display: flex; gap: 8px; }
@media (max-width: 520px) { .tb-evidence { padding: 14px 12px; } .tb-ev__list .tb-row__v { font-size: 13px; } }

/* The four levels */
.tb-ladder { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 36px; padding: 24px 32px; }
.tb-ladder__rungs { display: grid; gap: 18px; position: relative; z-index: 1; }
.tb-rung { display: grid; gap: 5px; padding: 10px 14px; border-radius: var(--r-md); background: var(--canvas); box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-xs); transition: box-shadow 300ms; }
.tb-rung b { font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.tb-rung--0 { justify-self: start; } .tb-rung--1 { justify-self: start; margin-left: 4%; } .tb-rung--2 { margin-left: 8%; } .tb-rung--3 { margin-left: 12%; }
.tb-rung.is-on { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--orange) 60%, transparent), var(--shadow-sm); }
.tb-ladder__cover { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .tb-ladder { grid-template-columns: 1fr; padding: 16px 14px; gap: 14px; }
  .tb-ladder__rungs { gap: 8px; }
  .tb-rung { padding: 8px 12px; } .tb-rung--1, .tb-rung--2, .tb-rung--3 { margin-left: 0; }
  .tb-rung b { font-size: 14px; }
  .tb-ladder__cover { display: none; }
}

/* The loop */
.tb-loop { display: grid; align-content: center; justify-items: center; gap: 0; padding: 24px; }
.tb-loop__row { display: flex; gap: 12px; position: relative; z-index: 1; }
.tb-loop__cell { display: grid; gap: 8px; justify-items: center; }
.tb-loop__cell--0 .tb-thumb, .tb-loop__cell--3 .tb-thumb { box-shadow: 0 0 0 2px var(--orange), var(--shadow-md); }
.tb-loop__arc { width: calc(72px * 5 + 12px * 4); height: 56px; order: -1; overflow: visible; }
.tb-loop__arc path { fill: none; stroke: rgb(120 100 80 / .32); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 2 4; }
.tb-loop__calls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; width: min(100%, 460px); }
.tb-call { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-md); background: var(--canvas); box-shadow: 0 0 0 1px rgb(21 19 15 / .08); }
.tb-call b { font: 500 15px/1.3 "TikTok Sans", var(--font-body); color: var(--ink); }
.tb-call--pay { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--orange) 55%, transparent); }
@media (max-width: 520px) {
  .tb-loop { padding: 16px 12px; }
  .tb-loop__row { gap: 6px; }
  .tb-loop__row .tb-thumb { width: 56px; }
  .tb-loop__arc { width: calc(56px * 5 + 6px * 4); }
  .tb-loop__calls { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .tb-call b { font-size: 14px; }
}

/* Formats: the format names down the left, the slide (readable size, SITE-26 M5) on the right */
.tb-formats { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 28px; padding: 16px 24px; }
.tb-formats__chips { display: grid; gap: 8px; justify-items: start; }
.tb-fchip { transition: background-color 300ms, color 300ms; }
.tb-fchip.is-on { background: var(--lilac-soft); color: var(--lilac-ink); border-color: transparent; }
.tb-formats__stage { display: grid; }
.tb-formats__slide { grid-area: 1 / 1; --w: 216px !important; }
.tb-formats__foot { margin-bottom: 4px; }
@media (max-width: 520px) {
  .tb-formats { grid-template-columns: 1fr; justify-items: center; gap: 12px; padding: 14px 12px; }
  .tb-formats__chips { display: flex; flex-wrap: wrap; justify-content: center; }
  .tb-formats__foot { width: 100%; text-align: center; }
}

/* Photos */
.tb-photos { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 18px 28px; align-items: center; padding: 28px 32px; }
.tb-photos__ask { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-photos__ask .tb-label { width: 100%; margin-bottom: 4px; }
.tb-photos__cands { grid-column: 1; display: flex; gap: 12px; align-self: start; }
.tb-cand { position: relative; display: grid; gap: 8px; justify-items: center; transition: opacity 400ms; }
.tb-cand:not(.tb-cand--pick) .tb-thumb { filter: saturate(.7); }
.tb-cand--pick .tb-thumb { transition: box-shadow 300ms; }
.tb-cand--pick.is-on .tb-thumb { box-shadow: 0 0 0 2px #7F89EC, var(--shadow-md); }
.tb-cand__ok { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #7F89EC; color: #fff; opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 300ms var(--ease-out); }
.tb-cand__ok svg { width: 12px; height: 12px; }
.tb-cand.is-on .tb-cand__ok { opacity: 1; transform: none; }
.tb-photos__slide { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 760px) {
  .tb-photos { grid-template-columns: 1fr; padding: 16px 14px; gap: 14px; justify-items: center; }
  .tb-photos__ask { justify-content: center; }
  .tb-photos__ask .tb-label { text-align: center; }
  .tb-photos__slide { display: none; }
  .tb-photos__cands .tb-thumb { width: 92px; }
}

/* Review */
.tb-review { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 36px; padding: 24px 32px; }
.tb-review__stack { position: relative; width: 150px; aspect-ratio: 9 / 16; }
.tb-review__card { position: absolute; inset: 0; }
.tb-review__card .tb-thumb { width: 100%; border-radius: var(--r-md); }
.tb-review__card--0 { transform: rotate(-4deg) translate(-10px, 6px); }
.tb-review__card--1 { transform: rotate(3deg) translate(8px, 2px); }
.tb-stamp { position: absolute; top: 16px; padding: 6px 10px; border-radius: 6px; font: 600 14px/1 var(--font-body); letter-spacing: .02em; text-transform: uppercase; opacity: 0; transform: scale(1.2) rotate(-8deg); transition: opacity 260ms, transform 260ms var(--ease-out); }
.tb-stamp--keep { left: 12px; background: var(--lime); color: var(--lime-ink); }
.tb-stamp--no { right: 12px; background: #fff; color: var(--orange-ink); box-shadow: inset 0 0 0 1.5px var(--orange); transform: scale(1.2) rotate(8deg); }
.tb-stamp.is-on { opacity: 1; transform: scale(1) rotate(-8deg); }
.tb-stamp--no.is-on { transform: scale(1) rotate(8deg); }
.tb-review__side { display: grid; gap: 22px; }
.tb-reasons, .tb-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tb-reasons > .tb-label:first-child, .tb-where > .tb-label { width: 100%; margin-bottom: 4px; }
.tb-reason { transition: background-color 300ms, color 300ms; }
.tb-reason.is-on { background: var(--orange-soft); color: var(--orange-ink); border-color: transparent; }
.tb-reasons__m { width: 100%; margin-top: 6px; color: var(--ink-58); }
@media (max-width: 520px) {
  .tb-review { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; padding: 16px 14px; }
  .tb-review__stack { width: 112px; }
  .tb-stamp { font-size: 12px; top: 10px; }
}

/* Split to two platforms */
.tb-split { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 64px; padding: 24px 32px; }
.tb-split__src { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: center; }
.tb-split__src .chip svg, .tb-batch__ok svg { width: 11px; height: 11px; }
.tb-split__outs { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.tb-post { display: grid; gap: 10px; width: min(100%, 300px); }
.tb-post p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.tb-post p .tb-label { width: 100%; }
.tb-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-64); }
.tb-status i { width: 8px; height: 8px; border-radius: 2px; background: var(--ink-32); transition: background-color 300ms; }
.tb-status__b { display: none; }
.tb-status.is-on i { background: #7E9270; box-shadow: 0 0 0 3px rgb(126 146 112 / .2); }
.tb-status.is-on .tb-status__a { display: none; }
.tb-status.is-on .tb-status__b { display: inline; color: #3F4D33; font-weight: 550; }
@media (max-width: 520px) {
  .tb-split { gap: 28px; padding: 16px 14px; }
  .tb-split__ph { width: 76px !important; }
  .tb-post { padding: 12px; }
  .tb-split__inbox { font-size: 12px; }
}

/* Slots */
.tb-slots { display: grid; align-content: center; gap: 16px; padding: 24px 32px; }
.tb-slots__acct { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tb-slots__acct .tb-label { margin-left: auto; }
.tb-slots__grid { display: grid; grid-template-columns: 48px repeat(5, minmax(0, 1fr)) auto; gap: 6px; align-items: center; justify-items: center; }
/* Velo's column: his own cell after Friday, spanning the time rows, his feet on the grid's floor. */
.tb-slots__velo { grid-column: 7; grid-row: 2 / span 3; align-self: end; display: flex; align-items: flex-end; margin-left: 6px; line-height: 0; }
.tb-slots__note .tb-slots__velo { margin: 0 0 0 auto; align-self: flex-end; }
.tb-slots__t { justify-self: start; color: var(--ink-58); }
.tb-cell { width: 100%; height: 72px; display: grid; place-items: center; border-radius: var(--r-md); background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px var(--hairline); transition: box-shadow 300ms, background-color 300ms; }
.tb-cell .tb-thumb { width: 34px; }
.tb-cell--next.is-on { background: var(--canvas); box-shadow: inset 0 0 0 1.5px #7E9270, 0 0 0 4px rgb(126 146 112 / .14); }
.tb-slots__note { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tb-slots__note svg { width: 11px; height: 11px; }
.tb-slots__chip { background: #E7EDDF; color: #3F4D33; border-color: transparent; }
@media (max-width: 520px) {
  .tb-slots { padding: 16px 12px; gap: 12px; }
  .tb-slots__grid { grid-template-columns: 40px repeat(5, minmax(0, 1fr)); gap: 4px; }
  .tb-slots__vc { display: none; }
  .tb-slots__note { justify-content: flex-start; align-items: flex-end; }
  .tb-cell { height: 58px; }
  .tb-cell .tb-thumb { width: 28px; }
  .tb-slots__acct .tb-label { display: none; }
}

/* Metrics */
.tb-metrics { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 14px 32px; padding: 32px 40px; }
.tb-metrics__ph { grid-row: 1 / 3; }
.tb-metrics__list { display: grid; gap: 14px; }
.tb-metrics__list li { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 15px; color: var(--ink-80); }
.tb-metrics__list .tb-meter i { background: #7E9270; }
.tb-metrics__sync { display: flex; align-items: center; gap: 8px; }
@media (max-width: 520px) {
  .tb-metrics { padding: 18px 14px; gap: 12px 16px; }
  .tb-metrics__ph { width: 84px !important; }
  .tb-metrics__list li { grid-template-columns: 76px minmax(0, 1fr); font-size: 14px; }
}

/* What's working */
.tb-working { display: grid; align-content: center; gap: 18px; padding: 28px 40px; }
.tb-working__list { position: relative; display: grid; gap: 14px; }
.tb-working__list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 14px; font-size: 15px; color: var(--ink-80); }
.tb-working__list .tb-meter i { background: color-mix(in oklab, #7E9270 55%, #fff); transition: background-color 300ms; }
.tb-working__list li.is-on .tb-meter i { background: #7E9270; }
.tb-working__list li.is-on { color: var(--ink); font-weight: 550; }
.tb-working__median { position: absolute; top: -10px; bottom: -6px; left: calc(140px + 14px + (100% - 154px) * .5); border-left: 1px dashed var(--ink-32); }
.tb-working__median .tb-label { position: absolute; bottom: -22px; left: -40px; width: 80px; text-align: center; }
.tb-working__next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.tb-working__next svg { width: 11px; height: 11px; }
.tb-working__next .pix-avatar { width: 16px; height: 16px; }
.tb-working__next .pix-avatar svg { width: 8px; height: 8px; }
@media (max-width: 520px) {
  .tb-working { padding: 18px 14px; }
  .tb-working__list li { grid-template-columns: 112px minmax(0, 1fr); font-size: 14px; gap: 10px; }
  .tb-working__median { left: calc(112px + 10px + (100% - 122px) * .5); }
}

/* Routines: the week */
.tb-cal { display: grid; align-content: center; gap: 0; padding: 24px 28px; }
.tb-cal__days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: var(--r-lg); background: var(--canvas); box-shadow: 0 0 0 1px rgb(21 19 15 / .08); overflow: hidden; }
.tb-cal__day { display: grid; align-content: start; gap: 6px; min-height: 132px; padding: 10px 8px; font-size: 14px; }
.tb-cal__day + .tb-cal__day { border-left: 1px solid var(--hairline); }
.tb-cal__day > p { margin-bottom: 4px; color: var(--ink); }
.tb-cal__day > p .pixel-ui { color: var(--ink-58); }
.tb-cal__run { display: grid; gap: 6px; padding: 8px; border-radius: 6px; background: var(--paper); font-size: 13px; line-height: 1.25; color: var(--ink-80); transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.tb-cal__run small { color: var(--ink-58); }
.tb-cal__run.is-on { background: var(--sky-soft); color: var(--sky-ink); box-shadow: inset 0 0 0 1px rgb(76 149 211 / .35); }
.tb-cal__detail { position: relative; margin: 14px 0 0; display: grid; gap: 10px; }
.tb-cal__caret { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; background: var(--canvas); transform: rotate(45deg); box-shadow: -1px -1px 0 rgb(21 19 15 / .08); }
.tb-steps { display: grid; gap: 4px; }
.tb-steps li { display: flex; align-items: center; gap: 12px; min-height: 36px; font-size: 14px; color: var(--ink-80); }
.tb-steps li .pixel-ui { width: 12px; color: var(--ink-58); }
.tb-steps .tb-tick { margin-left: auto; }
.tb-cal .tb-tick.is-on, .tb-runs .tb-tick.is-on { background: #4C95D3; }
@media (max-width: 520px) {
  .tb-cal { padding: 14px 10px; }
  .tb-cal__day { padding: 8px 5px; min-height: 120px; font-size: 13px; }
  .tb-cal__run { padding: 6px 5px; font-size: 12px; }
  .tb-cal__day > p { font-size: 12px; }
  .tb-cal__detail .tb-card__head .tb-label { display: none; }
}

/* Research run */
.tb-research { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 24px; }
.tb-research__when { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tb-research__src { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tb-research__s { transition: background-color 300ms, box-shadow 300ms; }
.tb-research__s.is-on { background: var(--sky-soft); border-color: transparent; box-shadow: 0 0 0 3px rgb(76 149 211 / .15); }
.tb-research__s .pix-avatar { width: 16px; height: 16px; } .tb-research__s .pix-avatar svg { width: 8px; height: 8px; }
.tb-research__props { display: grid; gap: 8px; width: min(100%, 420px); }
.tb-prop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 12px 14px; font-size: 15px; }
.tb-prop .tb-label { grid-column: 1 / -1; }
@media (max-width: 520px) { .tb-research { padding: 16px 12px; } .tb-prop { font-size: 14px; } }

/* Remix run */
.tb-remixrun { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 56px; padding: 24px 32px; }
.tb-remixrun__src { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: start; }
.tb-remixrun__src figcaption { display: grid; gap: 4px; font-size: 14px; }
.tb-remixrun__out { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px; align-items: end; }
.tb-remixrun__c--1 { transform: translateY(-10px); }
.tb-remixrun__chip { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
@media (max-width: 520px) {
  .tb-remixrun { grid-template-columns: 1fr; gap: 18px; padding: 16px 14px; justify-items: center; }
  .tb-remixrun__src { grid-template-columns: auto 1fr; align-items: center; }
  .tb-remixrun__src .tb-thumb { width: 64px !important; }
  .tb-remixrun__out .tb-thumb { width: 76px !important; }
  .tb-remixrun .tb-wires { display: none; }
}

/* Batch */
.tb-batch { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 24px; }
.tb-batch__card { display: grid; gap: 14px; width: min(100%, 420px); }
.tb-batch__covers { display: flex; gap: 12px; justify-content: center; }
.tb-batch__c { position: relative; transition: transform 300ms var(--ease-out); }
.tb-batch__ok { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #4C95D3; color: #fff; opacity: 0; transform: scale(.5); transition: opacity 260ms, transform 260ms var(--ease-out); }
.tb-batch__c.is-on .tb-batch__ok { opacity: 1; transform: none; }
.tb-batch__next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tb-batch__next > svg { width: 11px; height: 11px; }
@media (max-width: 520px) { .tb-batch { padding: 16px 12px; } .tb-batch__covers .tb-thumb { width: 84px !important; } }

/* ════════════════════════════════════════════════════════════════════════
   Card tidbits
   ════════════════════════════════════════════════════════════════════════ */
.pp-card__viz .tb { display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px var(--inset); }
.tb-truth { display: grid; gap: 4px; width: min(100%, 280px); padding: 12px 14px; font-size: 14px; }
.tb-truth b { font-weight: 550; color: var(--ink); }
.tb-truth__src { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--orange-ink); }
.tb-truth__src svg { width: 11px; height: 11px; }
.tb-truth--empty b { color: var(--ink-58); font-weight: 400; font-style: italic; }
.tb-truth--empty .chip { justify-self: start; margin-top: 4px; transition: background-color 300ms, color 300ms; }
.tb-truth--empty .chip.is-on { background: var(--orange-soft); color: var(--orange-ink); border-color: transparent; }
.tb-never__line { max-width: 280px; text-align: center; font: 500 18px/1.4 "TikTok Sans", var(--font-body); color: var(--ink); }
.tb-never__x { position: relative; transition: color 300ms; }
.tb-never__x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 400ms var(--ease-out); }
.tb-never__x.is-on { color: var(--ink-32); }
.tb-never__x.is-on::after { transform: scaleX(1); }
.tb-never__ok { display: inline-block; color: var(--orange-ink); }
.tb-never__rule { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tb-mix { display: grid; gap: 10px; width: min(100%, 290px); }
.tb-mix li { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 10px; }
.tb-mix .tb-stage { justify-content: center; }
.tb-c-mix .tb-meter i { background: var(--orange); }
.tb-c-stage__chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tb-c-stage__covers { display: flex; gap: 10px; }
.tb-c-remix { grid-auto-flow: column; }
.tb-c-remix figure { display: grid; gap: 8px; justify-items: center; }
.tb-c-remix__arrow, .tb-c-learn__arrow { width: 48px; height: 1.5px; background: linear-gradient(90deg, rgb(120 100 80 / .3), #FF6600); transform-origin: 0 50%; }
.tb-caption { display: grid; gap: 8px; width: min(100%, 300px); padding: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-80); }
.tb-caption__tags { color: var(--lilac-ink); }
.tb-caption__why { display: flex; gap: 8px; align-items: baseline; width: min(100%, 300px); font-size: 14px; color: var(--ink-64); }
.tb-c-accounts ul { display: grid; width: min(100%, 300px); background: var(--canvas); border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgb(21 19 15 / .08); padding: 4px 14px; }
.tb-c-accounts .tb-row b { font-weight: 500; color: var(--ink); }
.tb-c-accounts .tb-row .chip { margin-left: auto; }
.tb-c-approved { grid-auto-flow: column; gap: 24px !important; }
.tb-chain { display: grid; gap: 10px; }
.tb-chain li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-64); }
.tb-chain i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline-strong); color: transparent; transition: background-color 300ms, color 300ms; }
.tb-chain i svg { width: 11px; height: 11px; }
.tb-chain li.is-on i { background: #7E9270; color: #fff; box-shadow: none; }
.tb-chain li.is-on b { color: var(--ink); }
.tb-chain b { font-weight: 500; min-width: 72px; }
.tb-c-history__chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.tb-c-history__chips .chip { transition: background-color 300ms, color 300ms; }
.tb-c-history__chips .chip.is-on { background: var(--ink); color: #fff; border-color: transparent; }
.tb-c-history__grid { display: flex; gap: 8px; }
.tb-hist { transition: opacity 400ms, transform 400ms var(--ease-out); }
.tb-c-history.is-filtered .tb-hist:not(.tb-hist--own) { opacity: .3; }
.tb-hist--own.is-on { transform: translateY(-4px); }
.tb-hist--own.is-on ~ .tb-hist:not(.tb-hist--own), .tb-c-history__grid:has(.tb-hist--own.is-on) .tb-hist:not(.tb-hist--own) { opacity: .3; }
.tb-days { display: flex; gap: 6px; }
.tb-day { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline-strong); font: 500 14px/1 var(--font-body); color: var(--ink-58); transition: background-color 260ms, color 260ms, box-shadow 260ms; }
.tb-day.is-on { background: #4C95D3; color: #fff; box-shadow: none; }
.tb-c-days__times { display: flex; align-items: center; gap: 6px; }
.tb-c-runnow { gap: 14px !important; }
.tb-progress { position: relative; width: min(220px, 80%); height: 4px; border-radius: 99px; background: rgb(21 19 15 / .07); overflow: hidden; }
.tb-progress i { position: absolute; inset: 0; background: #4C95D3; transform-origin: 0 50%; border-radius: inherit; }
.tb-c-runnow .chip svg { width: 11px; height: 11px; }
.tb-c-learn { grid-auto-flow: column; gap: 16px !important; }
.tb-c-learn figure { position: relative; }
.tb-c-learn__why { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; background: var(--orange-soft); color: var(--orange-ink); border-color: transparent; }
.tb-c-learn__next { display: grid; gap: 4px; width: 150px; padding: 12px; font-size: 14px; line-height: 1.35; }
@media (max-width: 400px) { .tb-day { width: 34px; height: 34px; } }

/* ── Motion states before the JS takes over (no flash), and reduced motion ── */
html.pp-js [data-tb] [data-in] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.pp-js [data-tb] [data-in] { opacity: 1; } }
html[data-motion="reduce"].pp-js [data-tb] [data-in] { opacity: 1; }