/* Sign-in and first run (round 9, ~/fluentish-r9/reports/design-signin.md): the signed-out landing (#/signin), the email
   step, the back-from-Google states, the first run (#/setup, #/setup/start) and Profile's Account rows and Advanced.
   Tokens only, no new colours except Google's own button colours, which Google's branding rules fix, and Roboto
   Medium on that one button (loaded by features/signin only). Prefix au-. Phone first (390), 720 type step, 960
   desktop. Motion from motion.css tokens; reduced motion handled through --move and the rules at the end. */

/* ---------- page frame: a column, the brand row at the top, the action at the bottom ---------- */
.au { min-height: 100dvh; display: flex; flex-direction: column; }
.au-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: var(--page-max); width: 100%; margin: 0 auto;
  height: 60px; padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); }
.au-main { flex: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: var(--s-4) max(var(--gutter), env(safe-area-inset-left)) var(--s-8); display: flex; flex-direction: column; }
.au-main.is-wide { max-width: 560px; }
.au-main > h1 { margin-top: var(--s-4); }
.au-main > .back-link + h1 { margin-top: var(--s-2); }
.au-lead { margin-top: var(--s-3); font: 400 19px/1.45 var(--font-display); color: var(--ink-2); text-wrap: pretty; }
.au-body { margin-top: var(--s-3); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.au-body strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.au-actions { display: grid; gap: var(--s-3); margin-top: var(--s-8); }
.au-actions.is-tight { margin-top: var(--s-5); }
.au-foot { margin-top: auto; padding-top: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); align-items: center; }
.au-foot a, .au-link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); font-size: 14px; }
.au-foot .caption { flex-basis: 100%; }
.au-note { margin-top: var(--s-3); color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.au-note a { color: var(--ink-2); }

/* ---------- Google button (Google Identity branding: standard light / dark theme colours, the 4-colour G,
   "Continue with Google"). Size follows our 44 px controls; logo 20 px, 12 px before it, 10 px after. ---------- */
.au-google { --g-fill: #ffffff; --g-stroke: #747775; --g-text: #1f1f1f;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 12px;
  border-radius: var(--r-ctl); border: 1px solid var(--g-stroke); background: var(--g-fill); color: var(--g-text);
  font: 500 16px/1 'Roboto', var(--font-ui); letter-spacing: 0.01em; cursor: pointer; text-decoration: none; }
.au-google svg { width: 20px; height: 20px; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .au-google { --g-fill: #131314; --g-stroke: #8e918f; --g-text: #e3e3e3; } }
:root[data-theme="dark"] .au-google { --g-fill: #131314; --g-stroke: #8e918f; --g-text: #e3e3e3; }
.au-google:hover { background: color-mix(in srgb, var(--g-fill) 92%, var(--g-text)); }
.btn.au-email { min-height: 52px; font-size: 16px; width: 100%; }
.au .btn .icon { width: 20px; height: 20px; }
.au-google[disabled] { opacity: 0.45; cursor: not-allowed; }

/* busy: the label says what is happening; no spinner, nothing loops */
.is-busy { cursor: progress; }
.btn.is-busy, .au-google.is-busy { opacity: 0.72; }

/* ---------- landing: the example card (a real study card, static, aria-hidden; the caption carries it) ---------- */
.au-landing { display: grid; gap: var(--s-10); }
.au-example { margin: 0; }
.au-example .card { pointer-events: none; }
.au-example figcaption { margin-top: var(--s-3); }
.au-example .prompt { font-size: 26px; }
.au-example .answer { margin-top: var(--s-6); }
.au-example .answer .check { opacity: 1; transform: none; }
.au-example .answer .check path { stroke-dashoffset: 0; }
.au-example .answer::after { clip-path: inset(0 0 0 0); background: var(--ok); }
.au-example .answer-input { font: 400 var(--fs-input)/1.3 var(--font-ui); padding: 14px 0; }

/* ---------- form fields ---------- */
.au-field { margin-top: var(--s-6); }
.au-field .input { min-height: 52px; font-size: 17px; }
.au-err { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; color: var(--bad); font-size: 14px; line-height: 1.4; }
.au-err .icon { width: 16px; height: 16px; margin-top: 2px; }
.au-err:empty { display: none; }

/* ---------- six-box code field: one real input over six drawn cells ---------- */
.au-code { position: relative; margin-top: var(--s-2); }
.au-code-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; pointer-events: none; }
.au-code-cells > span:nth-child(3) { margin-inline-end: 6px; }
.au-code-cells > span:nth-child(4) { margin-inline-start: 6px; }
.au-cell { position: relative; display: grid; place-items: center; height: 60px; border-radius: var(--r-ctl); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--field-border); font: 400 28px/1 var(--font-display); font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
  transition: box-shadow var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); }
.au-cell.is-filled { box-shadow: inset 0 0 0 1px var(--ink-3); }
.au-cell.is-filled > b { font-weight: 400; animation: au-digit var(--dur-base) var(--spring-snappy) both; }
@keyframes au-digit { from { opacity: 0; transform: translateY(calc(6px * var(--move))); } }
.au-code:focus-within .au-cell.is-now { box-shadow: inset 0 0 0 2px var(--accent); }
.au-code:focus-within .au-cell.is-now::after { content: ""; width: 2px; height: 26px; border-radius: 1px; background: var(--accent); animation: au-caret 1s steps(1) infinite; }
.au-code:focus-within .au-cell.is-now.is-filled::after { display: none; }
@keyframes au-caret { 50% { opacity: 0; } }
.au-code-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 12px; border: 0; background: transparent;
  color: transparent; caret-color: transparent; font: 400 16px/1 var(--font-ui); letter-spacing: 1em; outline: none; -webkit-text-fill-color: transparent; }
.au-code-input::selection { background: transparent; }
.au-code:focus-within { outline: none; }
.au-code.is-error .au-cell { box-shadow: inset 0 0 0 1.5px var(--bad); background: var(--bad-soft); }
.au-code.is-error .au-code-cells { animation: nudge 300ms var(--ease-out); }
.au-code.is-ok .au-cell { box-shadow: inset 0 0 0 1.5px var(--ok); }
.au-code.is-busy .au-cell { color: var(--ink-3); }
.au-code-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); }
.au-resend[disabled] { color: var(--ink-3); opacity: 1; }
.au-resend .tnum { font-variant-numeric: tabular-nums; }
.au-ok { display: flex; align-items: center; gap: 8px; margin-top: var(--s-3); color: var(--ok); font-weight: 500; }
.au-ok svg { width: 22px; height: 22px; }
.au-ok svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: au-draw var(--dur-base) var(--ease-out) 60ms forwards; }
.au-ok svg { animation: au-pop 420ms var(--spring-pop) both; }
@keyframes au-draw { to { stroke-dashoffset: 0; } }
@keyframes au-pop { from { opacity: 0; transform: scale(calc(1 - 0.4 * var(--move))); } }

/* ---------- Turnstile slot: invisible by default; when Cloudflare needs a click the widget (their design, 300 x 65)
   appears here with one line of ours above it ---------- */
.au-check { margin-top: var(--s-5); display: grid; gap: var(--s-2); }
.au-ts { display: grid; place-items: center; width: 300px; max-width: 100%; height: 65px; border-radius: 4px; border: 1px dashed var(--field-border);
  background: var(--surface); color: var(--ink-3); font: 400 12px/1.35 var(--font-mono); text-align: center; padding: 0 12px; }

/* ---------- first run ---------- */
.au-steps { display: grid; gap: 6px; margin-top: var(--s-2); }
.au-steps .segments { --n: 3; }
.au-fs { border: 0; margin: var(--s-8) 0 0; padding: 0; min-width: 0; }
.au-fs legend { padding: 0; font: 600 var(--fs-title)/1.3 var(--font-ui); letter-spacing: -0.01em; }
.au-fs legend + * { margin-top: var(--s-3); }
.au-fs .choices { margin-top: var(--s-3); }
.au-fs .choice { min-height: 60px; }
.au-fs .choice-detail { font-variant-numeric: tabular-nums; }
.au-fs.is-error .choice { box-shadow: inset 0 0 0 1.5px var(--bad); }
.au-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.au-two .choice { flex-direction: column; align-items: flex-start; justify-content: center; position: relative; padding-inline-end: 40px; }
.au-two .choice input { position: absolute; inset-inline-end: 14px; top: 50%; translate: 0 -50%; }
.au-later { margin-top: var(--s-3); color: var(--ink-3); font-size: 13px; }
.seg.au-seg { display: grid; width: 100%; max-width: 360px; }
.seg.au-seg button { min-height: var(--tap); font-size: 15px; }
.seg.au-seg button[aria-pressed="true"] { background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 0 0 1px var(--hairline); }
.au-next { position: sticky; bottom: 0; z-index: 2; margin-top: var(--s-8); padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--canvas) 30%); display: grid; gap: var(--s-2); }
@media (prefers-reduced-transparency: reduce) { .au-next { background: var(--canvas); } }
.au-who { color: var(--ink-3); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); }
.au-who button { min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }

.au-summary { margin-top: var(--s-6); }
.au-summary .segments { --n: 5; margin-top: var(--s-4); }
.au-summary .segments i { height: 6px; }
.au-summary .segments i.is-now::after { transform: scaleX(0.18); }
.au-facts { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 0; }
.au-facts li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-top: 1px solid var(--hairline); color: var(--ink-2); }
.au-facts li b { min-width: 96px; color: var(--ink); font-weight: 500; }
.au-how { margin-top: var(--s-6); display: grid; gap: var(--s-2); color: var(--ink-2); max-width: var(--measure); }

/* ---------- profile ---------- */
.au-sync { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin-top: 2px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.au-sync .icon { width: 14px; height: 14px; }
.au-sync.is-paused { color: var(--ink-2); }
.au-sync button, .au-sync a { min-height: var(--tap); margin-block: -10px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-rows { list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.au-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: var(--s-2) 0; border: 0; border-bottom: 1px solid var(--hairline);
  background: none; color: var(--ink); text-align: start; text-decoration: none; font: inherit; cursor: pointer; }
.au-row .row-main { flex: 1; }
.au-row .row-title { font-weight: 500; }
.au-row > .icon { color: var(--ink-3); width: 18px; height: 18px; }
.au-row:hover .row-title { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.au-row.is-static { cursor: default; }
.au-row.is-static:hover .row-title { text-decoration: none; }
.au-row.is-danger .row-title { color: var(--bad); }
.au-row:focus-visible { outline-offset: -2px; border-radius: var(--r-tile); }
.au-row-detail { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }

/* Advanced: the Practice group's heading button (h2 type, 44 px, a chevron that turns); disclose() opens it */
.au-adv { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--hairline); }
.au-adv h2 { margin: 0; }
.au-adv-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--ink);
  font: 400 var(--fs-h2)/1.15 var(--font-display); letter-spacing: -0.01em; cursor: pointer; text-align: start; }
.au-adv-btn .icon { width: 20px; height: 20px; color: var(--ink-3); transition: transform var(--dur-base) var(--spring-snappy); transform: rotate(90deg); }
.au-adv-btn[aria-expanded="true"] .icon { transform: rotate(-90deg); }
.au-adv-sub { margin-top: 2px; color: var(--ink-3); font-size: 14px; }
.au-adv-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.au-adv-panel > div { overflow: hidden; min-height: 0; }
.au-adv-panel.is-open { grid-template-rows: 1fr; opacity: 1; }

/* the delete sheet: a typed confirmation */
.au-danger-list { margin: 0; padding-inline-start: 1.1em; color: var(--ink-2); display: grid; gap: 4px; }
.ui-sheet-body .au-field { margin-top: var(--s-2); }
.ui-sheet-actions .btn { min-height: 52px; font-size: 16px; }
.ui-sheet-done { display: grid; gap: var(--s-3); }

/* ---------- old address: moving ---------- */
.au-move-bar { margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.au-move-bar .ui-bar { --h: 4px; }
.au-steplist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 0; }
.au-steplist li { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; border-top: 1px solid var(--hairline); color: var(--ink-3); }
.au-steplist li .dot { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--field-border); display: grid; place-items: center; }
.au-steplist li.is-done { color: var(--ink-2); }
.au-steplist li.is-done .dot { background: var(--ink); box-shadow: none; color: var(--on-ink); }
.au-steplist li.is-done .dot svg { width: 12px; height: 12px; }
.au-steplist li.is-now { color: var(--ink); font-weight: 500; }
.au-steplist li.is-now .dot { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- step change inside one page (enter email -> code): the view's own motion (fx-view rule 9) ---------- */
.au-step { animation: vt-rise var(--dur-card) var(--ease-out) 30ms both; }

/* ---------- callback / loading ---------- */
.au-wait { flex: 1; display: grid; place-content: center; justify-items: center; gap: var(--s-3); text-align: center; color: var(--ink-2); }
.au-wait p { animation: boot-in var(--dur-base) var(--ease-out) 300ms both; }

/* ---------- desktop ---------- */
@media (min-width: 720px) {
  .au-top { height: 72px; }
  .au-main { padding-top: var(--s-10); }
  .au-lead { font-size: 21px; }
}
@media (min-width: 960px) {
  .au-landing-wrap { max-width: 1040px; }
  .au-landing { grid-template-columns: minmax(0, 440px) minmax(0, 420px); justify-content: space-between; align-items: center; gap: var(--s-16); padding-top: var(--s-12); }
  .au-landing > .au-col { display: flex; flex-direction: column; }
}

/* ---------- reduced motion: every state still changes, at once ---------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.au-step, .au-cell.is-filled > b, .au-ok svg, .au-ok svg path) { animation: none; stroke-dashoffset: 0; }
  :root:not([data-motion="full"]) .au-code.is-error .au-code-cells { animation: none; }
  :root:not([data-motion="full"]) :is(.au-adv-panel, .au-adv-btn .icon) { transition: none; }
  :root:not([data-motion="full"]) .au-code:focus-within .au-cell.is-now::after { animation: none; }
}
:root[data-motion="reduce"] :is(.au-step, .au-cell.is-filled > b, .au-ok svg, .au-ok svg path) { animation: none; stroke-dashoffset: 0; }
:root[data-motion="reduce"] .au-code.is-error .au-code-cells { animation: none; }
:root[data-motion="reduce"] :is(.au-adv-panel, .au-adv-btn .icon) { transition: none; }
:root[data-motion="reduce"] .au-code:focus-within .au-cell.is-now::after { animation: none; }
@media (forced-colors: active) {
  .au-cell { border: 1px solid CanvasText; }
  .au-code:focus-within .au-cell.is-now { outline: 2px solid Highlight; }
  .au-code.is-error .au-cell { border-color: Mark; }
}

/* review fixes (design pass) */
.au-ok .check { opacity: 1; transform: none; color: var(--ok); }
.au-code.is-error:focus-within .au-cell.is-now { box-shadow: inset 0 0 0 2px var(--bad); }
.au-resend { font-variant-numeric: tabular-nums; }
.au-sync a, .au-sync button { position: relative; min-height: 0; margin: 0; }
.au-sync a::before, .au-sync button::before { content: ""; position: absolute; inset: -12px -6px; }
.au-inline { position: relative; display: inline; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.au-inline::before { content: ""; position: absolute; inset: -12px -4px; }
.au-main > .notice:first-child, .au-col > .notice:first-child { margin: 0 0 var(--s-5); }

/* ---------- in the app (round 9 build) ---------- */
/* the full-screen pages sit in #view without the bars: .au fills it */
#view:has(> .view-host > .au) { padding: 0; max-width: none; }
.au-main > .au-err { margin-top: var(--s-3); }
.au-fs > .au-later { margin-top: var(--s-3); }
.au-fs legend .caption { font-size: 13px; font-weight: 400; margin-inline-start: 6px; }
.au-steps .caption { font-size: 13px; }
.au-who .au-who-email { overflow-wrap: anywhere; }
.au-summary .summary-goal { overflow-wrap: anywhere; }
.au-adv .au-adv-panel > div > .stack { padding-top: var(--s-4); }
.au-adv-section + .au-adv-section { margin-top: var(--s-8); }
.au-adv-section > h3 { margin: 0 0 var(--s-2); }
.profile-head .au-sync { margin-top: 2px; }
.au-adv-panel { max-width: 560px; }   /* review N4: the width of the other Profile sections at 1280 */
form > .au-who { margin-top: var(--s-2); }
.profile-head .au-who-line { margin-top: 4px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
/* review N8: on the signed-out and first-run pages there is no tab bar, so a toast sits on the safe-area bottom */
:root:has(.view-host > .au) .toast { bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }

/* ---------- the move (round 9 H2, features/move, src/moved.js) ---------- */
.mv .au-facts { margin-top: var(--s-6); }
.mv-options { margin-top: var(--s-4); }
.mv-options .switch-row:first-child { border-top: 1px solid var(--hairline); }
.mv .au-ok { align-items: flex-start; }
.mv .au-ok .check { flex: none; margin-top: 1px; }
.mv .au-ok span { color: var(--ink); }
.mv > .au-err, .au-main.mv > .au-err { margin-top: var(--s-4); }
.mv .notice { margin-top: var(--s-6); }
.mv .notice .row-actions { margin-top: var(--s-3); }
.mv-from { color: var(--ink-3); font-size: 13px; }
body[data-chrome="off"] .banner-moved { display: none; }
.banner-moved a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; margin: -6px 0; }
/* lane A4: the delete sheet: the switch, its hint under it, the unsent warning and the safety copy */
.au-delete-choice .switch-row { margin-top: 0; }
.au-delete-choice .field-hint { margin-top: var(--s-2); }
.au-delete #delete-copy, .au-delete #delete-unsent { margin-top: var(--s-3); }