/* Daily Life Doc, revision 3: onboarding (js/onboard/*; SPEC-R3 rule 26). The frame (Back, step dots, the main button
   at the foot), then the two steps (round 6): the story (.os-*) and About you (.oa-*: the Atlas page itself with examples in its
   empty lists; .oe-*: the page "Example"). Tokens, the type scale, durations and curves are LOOK.md's; each step
   borrows a place's colour through --pc-* (data-place on .ob). The pictures move by CSS transitions between states
   the JS sets (data-ph on the story's scene), transform and opacity only, so with
   reduced motion (css/base.css) every picture simply stands in its end state. Nothing here changes on hover. */

/* ---------- The frame ---------- */
.full.bare:has(> .ob) { padding-bottom: 0; }
.ob { position: relative; min-height: 100%; display: flex; flex-direction: column; }
/* The wash at the top of the screen, in the step's colour. */
.ob::before { content: ''; position: absolute; z-index: -1; left: -18px; right: -18px; top: calc(-1 * (var(--top) + 10px)); height: 260px;
  background: linear-gradient(var(--pc-bg), transparent); opacity: .75; pointer-events: none; }
/* Back and the dots stay at the top while a long step scrolls under them (the bar also covers the status bar's room). */
.ob-top { position: sticky; top: calc(-1 * (var(--top) + 10px)); z-index: 3; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: calc(var(--top) + 60px);
  margin: calc(-1 * (var(--top) + 10px)) -18px 8px; padding: calc(var(--top) + 10px) 18px 6px;
  background: linear-gradient(color-mix(in srgb, var(--pc-bg) 75%, var(--bg)), color-mix(in srgb, var(--pc-bg) 50%, var(--bg)) 72%, transparent); }
.ob-sp0 { width: 36px; display: flex; justify-content: flex-end; }
/* Sign out on the first step: a quiet link at the right end of the top row (wider than the spacer, so it hangs to the left). */
.ob-out { flex: none; white-space: nowrap; min-height: 44px; padding: 0 2px; color: var(--ink2); }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: width 280ms var(--ease-out), background-color 280ms ease; }
.ob-dots i.past { background: var(--ink3); }
.ob-dots i.on { width: 20px; background: var(--ink); }
.ob-view { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; }
.ob-body { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 18px; }
.ob-foot { position: sticky; bottom: 0; z-index: 2; flex: none; margin-top: auto; padding: 26px 0 22px; background: linear-gradient(to bottom, transparent, var(--bg) 42%); }
.ob-foot:empty { display: none; }
.ob-q { font-size: var(--t-xxl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 18px; }
.ob-q:empty { min-height: 35px; }
/* The story fills the phone exactly and never scrolls: the picture takes the room the words and the button leave. */
.ob[data-step="0"] { height: 100%; }
.ob[data-step="0"] .ob-view, .ob[data-step="0"] .ob-body { flex: 1 1 0; min-height: 0; padding-bottom: 0; }
.ob[data-step="0"] .ob-foot { padding-top: 14px; background: none; }

/* ---------- Pieces two steps share: a row of days, a tiny chart, the sample answer "Yes" (words on the underline, as a value in a line) ---------- */
.ob-days { display: flex; justify-content: space-between; }
.ob-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ob-day i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--experiments-d); transition: background-color 260ms ease; }
.ob-day i svg { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: opacity 200ms ease, transform 320ms var(--ease-spring); }
.ob-day small { font-size: var(--t-2xs); font-weight: 500; color: var(--ink3); }
.ob-sp { flex: none; width: 136px; height: 39px; overflow: visible; }
.ob-sp path { fill: none; stroke: var(--ink3); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 120ms linear; }
.ob-sp circle { fill: var(--good); opacity: 0; transition: opacity 160ms ease; }
/* Round 5: a value in the pictures is ink, semibold, with no underline, as an answered value on Today. */
.os-yes { flex: none; margin-left: 4px; color: var(--ink); font-style: normal; font-weight: 600; opacity: 0; transition: opacity 260ms ease; }
.ob-v { font-weight: 600; color: var(--ink); }
/* What starts them: the story's second headline, or the last step's picture once it plays. --d0, --s0, --y0 = when. */
.os[data-ph="1"] { --d0: 1500ms; --y0: 1250ms; } .os[data-ph="2"] { --s0: 900ms; } .oh.go { --d0: 2700ms; --y0: 950ms; }
.os[data-ph="1"] .ob-day i, .oh.go .ob-day i { background: var(--experiments-bg); transition-delay: calc(var(--d0) + var(--k) * 230ms); }
.os[data-ph="1"] .ob-day i svg, .oh.go .ob-day i svg { opacity: 1; transform: none; transition-delay: calc(var(--d0) + var(--k) * 230ms); }
.os[data-ph="2"] .ob-sp path, .oh.go .ob-sp path { stroke-dashoffset: 0; transition-duration: 1000ms; transition-delay: var(--s0); }
.os[data-ph="2"] .ob-sp circle, .oh.go .ob-sp circle { opacity: 1; transition-delay: calc(var(--s0) + var(--k) * 85ms); }
.os[data-ph="1"] .os-yes, .oh.go .os-yes { opacity: 1; transition-delay: var(--y0); }

/* ---------- Step 0, the story: the stage, the words, the small bars ---------- */
.os-stage { position: relative; flex: 1 1 0; min-height: 160px; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 22px; }
.os { position: absolute; left: 50%; top: 50%; width: 354px; height: 420px; margin: -210px 0 0 -177px; transform: scale(var(--fit, 1)); pointer-events: none; }
.os-play { position: absolute; right: 0; top: -4px; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: var(--ink3); transition: color 200ms ease, background-color 200ms ease; }
.os-play svg { grid-area: 1 / 1; width: 18px; height: 18px; transition: opacity 180ms ease, transform 240ms var(--ease-out); }
[data-play="playing"] .os-play svg:last-child, [data-play="paused"] .os-play svg:first-child { opacity: 0; transform: scale(.6); }
[data-play="paused"] .os-play { color: var(--ink); background: var(--surface); }
.os-words { flex: none; padding-top: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.os-segs { display: flex; gap: 5px; margin-bottom: 16px; }
.os-segs i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.os-segs b { display: block; height: 100%; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.os-segs i.past b { transform: none; }
.os-segs i.on b { animation: os-fill var(--dur, 4s) linear both; }
.held .os-segs i.on b, .held .os-adv { animation-play-state: paused; }
@keyframes os-fill { to { transform: none; } }
.os-q { min-height: 70px; margin-bottom: 0; }

/* The advice chips: placed once (--x, --y, --r); each drifts in from its own side (--fx, --fy), then bobs gently. */
.os-chip { position: absolute; left: 0; top: 0; z-index: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 680ms var(--ease-drawer), opacity 380ms ease; }
.os-adv { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 6px; border-radius: 15px; background: var(--surface); box-shadow: 0 10px 20px -14px var(--shadow);
  transition: background-color 320ms ease, box-shadow 320ms ease;
  animation: os-in 620ms var(--ease-drawer) calc(140ms + var(--k) * 150ms) both, os-bob 5.2s ease-in-out calc(var(--k) * -0.9s) infinite; }
.os-adv .tile { width: 32px; height: 32px; border-radius: 11px; } .os-adv .tile svg { width: 18px; height: 18px; }
.os-adv b { font-size: var(--t-s); font-weight: 600; white-space: nowrap; }
@keyframes os-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.84); } }
@keyframes os-bob { 50% { translate: 0 -5px; } }
.os-from { position: absolute; right: 6px; top: -12px; height: 21px; padding: 0 8px; border-radius: 7px; background: var(--ink); color: var(--on-ink); font-style: normal; font-size: var(--t-2xs);
  font-weight: 600; line-height: 21px; white-space: nowrap; animation: dd-fade 300ms ease calc(520ms + var(--k) * 150ms) both; transition: transform 460ms var(--ease-drawer); }
/* Headline 1 and on: the other chips step back, dimmed; the picked chip stands as the name of the document. */
.os:not([data-ph="0"]) .os-chip:not(.pick) { opacity: .26; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.9); transition-delay: calc(var(--k) * 30ms); }
.os:not([data-ph="0"]) .os-chip.pick { z-index: 3; transform: translate(43px, 82px); }
.os:not([data-ph="0"]) .os-chip.pick .os-adv { background: var(--bg); box-shadow: none; animation-play-state: paused; }
.os:not([data-ph="0"]) .os-chip.pick .os-from { transform: translate(calc(100% + 12px), 24px); }
.os:is([data-ph="2"], [data-ph="3"]) .os-chip { opacity: 0 !important; transition-delay: 0ms; }

/* The small experiment document: a measure, an action, the days. */
.os-doc, .os-you, .os-res { position: absolute; z-index: 2; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 30px 50px -34px var(--shadow); opacity: 0; }
.os-doc { left: 27px; top: 66px; width: 300px; padding: 16px 16px 16px; border-radius: 24px; transform: translateY(14px) scale(.94); transition: opacity 300ms ease, transform 640ms var(--ease-drawer); }
.os-slot { display: block; height: 44px; margin-bottom: 10px; }
.os-h, .os-l, .oh-l { display: flex; align-items: center; gap: 8px; height: 30px; font-size: var(--t-s); white-space: nowrap; }
.os-h { font-weight: 600; } .os-h .tile { width: 24px; height: 24px; border-radius: 8px; } .os-h .tile svg { width: 14px; height: 14px; }
.os-l, .oh-l { position: relative; padding-left: 15px; gap: 5px; }
.os-l::before, .oh-l::before { content: ''; position: absolute; left: 2px; top: 12.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); }
.os-l + .os-h { margin-top: 6px; }
.os-doc .ob-days { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.os-h, .os-l, .os-doc .ob-days { opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 380ms var(--ease-out); }
.os[data-ph="1"] .os-doc { opacity: 1; transform: none; transition-delay: 120ms; }
.os[data-ph="1"] :is(.os-h, .os-l) { opacity: 1; transform: none; transition-delay: calc(560ms + var(--k) * 150ms); }
.os[data-ph="1"] .os-doc .ob-days { opacity: 1; transform: none; transition-delay: 1250ms; }
.os:is([data-ph="2"], [data-ph="3"]) .os-doc { transform: translateY(-18px) scale(.9); }

/* Headline 2: two results start as one and part ways; then one name is underlined green and one red. */
.os-res { left: 0; top: 0; width: 166px; padding: 14px 14px 16px; border-radius: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transform: translate(94px, 110px) scale(.86); transition: opacity 320ms ease, transform 820ms var(--ease-drawer); }
.os-res .tile { width: 36px; height: 36px; border-radius: 12px; } .os-res .tile svg { width: 20px; height: 20px; }
.os-res b { min-height: 48px; font-size: var(--t-m); font-weight: 600; line-height: 1.5; }
.os-res u { text-decoration: underline 2.5px transparent; text-underline-offset: 5px; text-decoration-skip-ink: none; transition: text-decoration-color 420ms ease; }
.os-res .chip { opacity: 0; transform: scale(.6); transition: opacity 200ms ease, transform 340ms var(--ease-spring); }
.os-res.bad .ob-sp circle { fill: var(--bad); }
.os[data-ph="2"] .os-res { opacity: 1; transition-delay: 160ms; }
.os[data-ph="2"] .os-res.good { transform: translate(2px, 62px) rotate(-3deg); }
.os[data-ph="2"] .os-res.bad { transform: translate(186px, 132px) rotate(3deg); }
.os[data-ph="2"] .os-res.good u { text-decoration-color: var(--good); transition-delay: 1900ms; }
.os[data-ph="2"] .os-res.bad u { text-decoration-color: var(--bad); transition-delay: 2200ms; }
.os[data-ph="2"] .os-res .chip { opacity: 1; transform: none; transition-delay: 2000ms; }
.os[data-ph="2"] .os-res.bad .chip { transition-delay: 2300ms; }
.os[data-ph="3"] .os-res.good { transform: translate(-50px, 30px) rotate(-9deg) scale(.9); }
.os[data-ph="3"] .os-res.bad { transform: translate(240px, 170px) rotate(9deg) scale(.9); }

/* Headline 3: the sections the next step asks about, as a document about to be written. */
.os-you { left: 27px; top: 56px; width: 300px; padding: 14px 16px; border-radius: 24px; transform: translateY(18px) scale(.95); transition: opacity 320ms ease, transform 640ms var(--ease-drawer); }
.os-you p { display: flex; align-items: center; gap: 10px; height: 56px; opacity: 0; transform: translateY(8px); transition: opacity 260ms ease, transform 400ms var(--ease-out); }
.os-you p + p { box-shadow: 0 -1px 0 var(--line); }
.os-you .tile { width: 32px; height: 32px; border-radius: 11px; } .os-you .tile svg { width: 18px; height: 18px; }
.os-you b { font-size: var(--t-m); font-weight: 600; white-space: nowrap; }
.os-you span { flex: 1; min-width: 20px; height: 8px; margin-left: 6px; border-radius: 4px; background: var(--soft); transform: scaleX(0); transform-origin: 0 50%; transition: transform 520ms var(--ease-out); }
.os[data-ph="3"] .os-you { opacity: 1; transform: none; transition-delay: 200ms; }
.os[data-ph="3"] .os-you p { opacity: 1; transform: none; transition-delay: calc(420ms + var(--k) * 120ms); }
.os[data-ph="3"] .os-you span { transform: none; transition-delay: calc(700ms + var(--k) * 120ms); }

/* ---------- Step 1, About you ---------- */
.oa { display: flex; flex-direction: column; align-items: stretch; }
/* The quiet line of a profile filled in from the patient's records, the quiet link to the sample profile, then the
   Atlas page itself (css/atlas.css). */
.ob-q:has(+ .oa > .oa-see) { margin-bottom: 4px; }
.ob-q:has(+ .oa > .oa-from) { margin-bottom: 8px; }
.oa-from { margin: 0 0 2px; font-size: var(--t-m); line-height: 1.5; color: var(--ink2); }
.oa-see { align-self: flex-start; margin-bottom: 10px; }
.oa-atlas .at-doc { padding-bottom: 30px; }
/* Round 3, change 22: no "By care team" mark on any line of onboarding. Atlas draws the mark (js/ui/lines-row.js,
   the row .ln-meta holds only that mark); the one quiet line .oa-from says where the lines come from. */
.oa-atlas .ln-meta, .oa-atlas .src.care { display: none; }
/* Thirteen sections, most of them empty at first: a little more air between them than on the Atlas page. */
.oa-atlas .at-doc .at-sec + .at-sec { margin-top: 18px; padding-top: 18px; }
/* An empty list: the section's examples, faint, where "Type here" stands (onboard-about.js sets --ex1 and --ex2
   and data-ex on the list). The first is the words of the empty line itself; the second is one more faint line
   under it. On a narrow phone a long example wraps onto a second row; no word is cut (round 8). The empty line
   then grows with its example (`flow-root` holds the floated words), and the caret stays at the start of the first
   row. Gone as soon as the list holds a line: the typed line then takes the first one's place and the ordinary
   "Type here" line the second's. */
.oa-atlas .at-lines[data-ex]:not(:has(.ln-t:not(.is-empty))) > .ln:last-child .ln-t.is-empty { display: flow-root; }
.oa-atlas .at-lines[data-ex]:not(:has(.ln-t:not(.is-empty))) > .ln:last-child .ln-t.is-empty::before { content: var(--ex1); width: 100%; height: auto; opacity: .55; }
.oa-atlas .at-lines[data-ex="2"]:not(:has(.ln-t:not(.is-empty)))::after { content: var(--ex2); display: block; min-height: 34px; padding: 3px 0 3px 15px; line-height: 28px; font-size: var(--t-m); color: var(--ink3); opacity: .55;
  overflow-wrap: anywhere; pointer-events: none;
  background: radial-gradient(circle at 2.5px 17px, color-mix(in srgb, var(--ink3) 55%, transparent) 2.4px, transparent 2.9px) no-repeat; }
/* The round plus button to speak, paste or add a photo (the bar's plus button, css/shell.css), above Continue at the right. */
.ob-foot .oa-fab { position: absolute; right: 0; bottom: calc(100% - 14px); z-index: 2; }
.oa-fab .plus { margin-top: 0; width: 60px; height: 60px; }
/* The round button stands 46 px above the foot: the step keeps that room (and 14 px of air) under its last
   entry, so at the end of the page nothing lies under the button. While the bar Photo · File · Note · Remove
   shows above the round button, the step keeps the bar's room too. */
.ob-view:has(.oa-fab) .ob-body { padding-bottom: 60px; }
.phone:has(.lbar.on) .ob-view:has(.oa-fab) .ob-body { padding-bottom: 124px; }
/* While the words are sorted (js/onboard/onboard-import.js): the quiet word "Sorting…" beside the round plus button,
   where the patient's eyes are; it fades in and out (round 9, fault 18). */
.oa-sort { position: absolute; right: 74px; top: 50%; translate: 6px -50%; opacity: 0; pointer-events: none; transition: opacity var(--m-step) ease, translate var(--m-step) var(--ease-out); }
.oa-fab.is-sorting .oa-sort { opacity: 1; translate: 0 -50%; }
/* Words handed to the sheet and not sorted yet: one small dot on the button. */
.oa-fab.has::after { content: ''; position: absolute; right: 2px; top: 2px; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2.5px var(--bg); }

/* ---------- The page "Example": a filled sample profile, read only (onboard-example.js) ---------- */
.oe-how { margin: 2px 2px 14px; font-size: var(--t-m); line-height: 1.5; color: var(--ink2); }
.oe-doc .at-doc { padding-top: 18px; }
/* A read-only document has no empty line to type in. */
.oe-doc .lns > .ln:last-child:has(> .ln-main > .ln-t.is-empty) { display: none; }
.oe-doc .lns { min-height: 0; }

/* A short phone: smaller headline, so the pictures keep their room. */
@media (max-height: 700px) { .ob-q { font-size: var(--t-xl); margin-bottom: 14px; } .os-q { min-height: 56px; } }