/* =========================================================================
   apply.css — TabiTots school apply flow (Batch 17 Part A).
   Apply-specific components only. Tokens + type tiers come from
   tokens.css / tokens-website.css; shared site chrome (.container,
   .site-header, .wordmark, .lang-pill, .cta-ochre, .cta-indigo-outline,
   .site-footer, .footer-line) comes from site.css — NOT redefined here.
   Built from design/source/locked/17/ (Passes 1–3), review harness removed.
   ========================================================================= */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* the apply chrome runs full-height so the footer sits at the bottom */
.site { background: var(--tt-page); color: var(--tt-ink); min-height: 100vh; display: flex; flex-direction: column; }
.apply-header-right { display: flex; align-items: center; gap: 10px; }
.header-link { font-size: 13.5px; font-weight: 600; color: var(--tt-ink-strong); text-decoration: none; padding: 0 4px; }
.header-link:hover { color: var(--tt-indigo); }

/* save & continue pill */
.save-link {
  height: 40px; padding: 0 15px; border-radius: 20px;
  background: transparent; border: 1px solid var(--tt-hairline);
  color: var(--tt-ink-strong);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.save-link:hover { background: var(--tt-sunken); border-color: rgba(31,42,58,.16); }
.save-link svg { display: block; }
.save-link.is-saved { color: var(--tt-success); border-color: var(--tt-success-100); background: var(--tt-success-100); }

/* ---------- stepper band ---------- */
.stepper-band { background: var(--tt-surface); border-bottom: 1px solid var(--tt-hairline); }
.stepper { display: flex; align-items: center; gap: 0; padding: 20px 0; }
.step { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--tt-surface); border: 1.5px solid var(--tt-hairline); color: var(--tt-ink-meta);
  transition: all .2s ease;
}
.step-label {
  font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 600; color: var(--tt-ink-meta); letter-spacing: -0.004em; white-space: nowrap;
}
.step-sub { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-ink-meta); font-weight: 500; margin-bottom: 2px; white-space: nowrap; }
.step-conn { flex: 1 1 auto; height: 1.5px; background: var(--tt-hairline); margin: 0 16px; min-width: 18px; border-radius: 2px; }
.step-conn.is-done { background: var(--tt-indigo); }
.step.is-active .step-dot { background: var(--tt-indigo); border-color: var(--tt-indigo); color: #fff; box-shadow: 0 0 0 4px var(--tt-indigo-vlight); }
.step.is-active .step-label { color: var(--tt-ink); }
.step.is-done .step-dot { background: var(--tt-indigo); border-color: var(--tt-indigo); color: #fff; }
.step.is-done .step-label { color: var(--tt-ink-strong); }
@media (max-width: 760px) {
  .stepper { padding: 14px 0; }
  .step-label, .step-sub { display: none; }
  .step.is-active .step-label, .step.is-active .step-sub { display: block; }
  .step-conn { margin: 0 8px; }
}

/* ---------- apply body ---------- */
.apply-main { flex: 1 1 auto; padding: 44px 0 80px; }
@media (max-width: 720px) { .apply-main { padding: 28px 0 56px; } }
.apply-grid { display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: 52px; align-items: start; }
@media (max-width: 940px) { .apply-grid { grid-template-columns: 1fr; gap: 32px; } }
.form-col { min-width: 0; max-width: 680px; }

.step-head { margin: 0 0 8px; }
.step-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tt-ochre-press); font-weight: 500; margin: 0 0 12px; }
.step-title { margin: 0 0 12px; color: var(--tt-ink); text-wrap: balance; }
.step-intro { margin: 0 0 6px; color: var(--tt-ink-secondary); font-size: 16px; line-height: 25px; max-width: 56ch; text-wrap: pretty; }
.autosave-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; color: var(--tt-ink-meta); }
.autosave-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tt-success); box-shadow: 0 0 0 3px var(--tt-success-100); }

.form-section { margin-top: 36px; }
.form-section + .form-section { margin-top: 40px; }
.section-kicker { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.006em; color: var(--tt-ink); margin: 0 0 4px; }
.section-kicker-help { font-size: 13.5px; color: var(--tt-ink-secondary); margin: 0 0 18px; line-height: 20px; }

/* ---------- fields ---------- */
.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--tt-ink-strong); margin: 0 0 7px; }
.field-help { font-size: 13px; color: var(--tt-ink-secondary); margin: 7px 0 0; line-height: 18px; }
.field input, .field textarea {
  width: 100%; height: 52px; border-radius: var(--tt-r-input);
  border: 1px solid var(--tt-hairline); background: var(--tt-surface);
  padding: 0 16px; font-size: 15.5px; font-family: inherit; color: var(--tt-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { height: auto; min-height: 84px; padding: 14px 16px; line-height: 22px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--tt-ink-meta); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--tt-indigo); box-shadow: 0 0 0 3px var(--tt-indigo-tint); }
.field-error { display: none; align-items: flex-start; gap: 6px; margin-top: 8px; color: var(--tt-danger); font-size: 13px; line-height: 18px; }
.field-error svg { flex: 0 0 auto; margin-top: 1px; }
.field.has-error input, .field.has-error textarea { border-color: var(--tt-danger); background: #FFFCFB; }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px var(--tt-danger-100); }
.field.has-error .field-error { display: flex; }
.field.has-error .weekday-row { outline: 1px solid var(--tt-danger-100); outline-offset: 6px; border-radius: 12px; }

/* resume-link expired notice — a calm info banner, not a danger state */
.resume-notice { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 26px; padding: 14px 16px; border-radius: 12px; background: var(--tt-indigo-tint); border: 1px solid var(--tt-hairline); }
.resume-notice[hidden] { display: none; }
.resume-notice svg { flex: 0 0 auto; margin-top: 1px; color: var(--tt-indigo); }
.resume-notice p { margin: 0; flex: 1; font-size: 13.5px; line-height: 20px; color: var(--tt-ink-strong); }
.resume-notice-x { flex: 0 0 auto; background: none; border: 0; font-size: 20px; line-height: .8; color: var(--tt-ink-meta); cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.resume-notice-x:hover { color: var(--tt-ink-strong); }

/* ---------- provider picker ---------- */
.provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .provider-grid { grid-template-columns: 1fr; } }
.provider-card {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px 14px 46px; border-radius: 12px;
  border: 1.5px solid var(--tt-hairline); background: var(--tt-surface);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.provider-card:hover { border-color: rgba(61,90,128,.4); background: var(--tt-indigo-vlight); }
.provider-card input { position: absolute; opacity: 0; pointer-events: none; }
.provider-radio { position: absolute; left: 16px; top: 15px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tt-ink-meta); background: var(--tt-surface); transition: all .15s ease; }
.provider-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s ease; }
.provider-jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; font-size: 14.5px; font-weight: 600; color: var(--tt-ink); line-height: 1.35; }
.provider-en { font-size: 12px; color: var(--tt-ink-secondary); line-height: 1.3; }
.provider-card.is-selected { border-color: var(--tt-indigo); background: var(--tt-indigo-vlight); }
.provider-card.is-selected .provider-radio { border-color: var(--tt-indigo); background: var(--tt-indigo); }
.provider-card.is-selected .provider-radio::after { transform: scale(1); }
.provider-card input:focus-visible + .provider-radio { box-shadow: 0 0 0 3px var(--tt-indigo-tint); }
.provider-error { display: none; align-items: flex-start; gap: 6px; margin-top: 10px; color: var(--tt-danger); font-size: 13px; }
.picker-block.has-error .provider-error { display: flex; }
.picker-block.has-error .provider-grid { outline: 1px solid var(--tt-danger-100); outline-offset: 6px; border-radius: 14px; }

/* ---------- APPI card ---------- */
.appi-card { background: var(--tt-surface); border: 1px solid var(--tt-hairline); border-radius: var(--tt-r-card); padding: 24px 26px; box-shadow: var(--tt-shadow-card); }
.appi-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.appi-shield { width: 36px; height: 36px; border-radius: 10px; background: var(--tt-indigo-tint); color: var(--tt-indigo); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.appi-title { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 17px; font-weight: 700; color: var(--tt-ink); margin: 0; letter-spacing: -0.006em; }
.appi-lead { font-size: 14px; color: var(--tt-ink-strong); margin: 0 0 14px; line-height: 21px; }
.appi-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.appi-list li { display: flex; gap: 10px; font-size: 13.5px; line-height: 20px; color: var(--tt-ink-secondary); }
.appi-list li svg { flex: 0 0 auto; margin-top: 3px; color: var(--tt-indigo); }
.appi-list li strong { color: var(--tt-ink-strong); font-weight: 600; }
.appi-drawer-toggle { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--tt-indigo); display: inline-flex; align-items: center; gap: 5px; }
.appi-drawer-toggle:hover { color: var(--tt-indigo-press); }
.appi-drawer-toggle svg { transition: transform .2s ease; }
.appi-drawer-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.appi-drawer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.appi-drawer.is-open { max-height: 640px; }
.appi-drawer-inner { padding: 16px 0 4px; border-top: 1px solid var(--tt-hairline); margin-top: 16px; }
.appi-drawer-inner h4 { font-size: 13px; font-weight: 700; color: var(--tt-ink-strong); margin: 14px 0 5px; }
.appi-drawer-inner h4:first-child { margin-top: 0; }
.appi-drawer-inner p { font-size: 13px; line-height: 20px; color: var(--tt-ink-secondary); margin: 0 0 8px; }
.appi-full-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--tt-indigo); text-decoration: none; }
.appi-full-link:hover { color: var(--tt-indigo-press); text-decoration: underline; }

/* ---------- consent + attestation rows ---------- */
.consent-row { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: var(--tt-indigo-vlight); border: 1px solid var(--tt-hairline); cursor: pointer; transition: border-color .15s ease; }
.attest-row { display: flex; gap: 13px; align-items: flex-start; margin-top: 18px; padding: 18px; border-radius: 12px; background: var(--tt-surface); border: 1.5px solid var(--tt-hairline); cursor: pointer; transition: border-color .15s ease; }
.consent-row:hover, .attest-row:hover { border-color: rgba(61,90,128,.4); }
.consent-row.is-checked, .attest-row.is-checked { border-color: var(--tt-indigo); }
.attest-row.is-checked { background: var(--tt-indigo-vlight); }
.consent-row.has-error, .attest-row.has-error { border-color: var(--tt-danger); background: #FFFCFB; }
.tt-check {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--tt-ink-meta);
  background: var(--tt-surface); cursor: pointer; margin: 0; position: relative; transition: all .15s ease;
}
.tt-check:checked { background: var(--tt-indigo); border-color: var(--tt-indigo); }
.tt-check:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tt-check:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tt-indigo-tint); }
.consent-text { font-size: 14px; line-height: 21px; color: var(--tt-ink-strong); }
.attest-text { font-size: 14.5px; line-height: 22px; color: var(--tt-ink); font-weight: 500; }
.row-error { display: none; align-items: center; gap: 6px; margin-top: 8px; color: var(--tt-danger); font-size: 13px; }
.has-error .row-error { display: flex; }

/* ---------- form nav ---------- */
.form-nav { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--tt-hairline); flex-wrap: wrap; }
.nav-ghost { margin-left: auto; font-size: 13.5px; color: var(--tt-ink-secondary); background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.nav-ghost:hover { color: var(--tt-ink); }
@media (max-width: 560px) { .nav-ghost { margin-left: 0; } .form-nav .cta-ochre { width: 100%; } }

/* loading + disabled states layered on the shared .cta-ochre from site.css */
.cta-ochre.is-loading { color: transparent; position: relative; pointer-events: none; }
.cta-ochre.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: tt-spin .7s linear infinite; }
.cta-ochre.is-disabled { background: var(--tt-sunken); color: var(--tt-ink-meta); box-shadow: none; cursor: not-allowed; pointer-events: none; }
@keyframes tt-spin { to { transform: rotate(360deg); } }

/* form-level error banner */
.form-alert { display: none; align-items: flex-start; gap: 11px; margin-top: 24px; padding: 14px 16px; border-radius: 12px; background: var(--tt-danger-100); border: 1px solid rgba(181,72,61,.22); }
.form-alert.is-shown { display: flex; }
.form-alert svg { flex: 0 0 auto; margin-top: 1px; color: var(--tt-danger); }
.form-alert p { margin: 0; font-size: 13.5px; line-height: 20px; color: #7d2f27; }

/* ---------- aside ---------- */
.aside { position: sticky; top: 26px; }
@media (max-width: 940px) { .aside { position: static; } }
.aside-card { background: var(--tt-surface); border: 1px solid var(--tt-hairline); border-radius: var(--tt-r-card); padding: 22px; box-shadow: var(--tt-shadow-card); }
.aside-title { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--tt-ink); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.aside-title svg { color: var(--tt-indigo); }
.aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.aside-list li { display: flex; gap: 11px; }
.aside-ic { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-ochre-vlight); color: var(--tt-ochre-press); }
.aside-ic.indigo { background: var(--tt-indigo-tint); color: var(--tt-indigo); }
.aside-lt { font-size: 13.5px; font-weight: 600; color: var(--tt-ink); margin: 0 0 2px; line-height: 18px; }
.aside-lb { font-size: 12.5px; color: var(--tt-ink-secondary); margin: 0; line-height: 17px; }
.aside-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--tt-hairline); font-size: 12.5px; color: var(--tt-ink-secondary); line-height: 18px; }
.aside-foot a { color: var(--tt-indigo); font-weight: 600; text-decoration: none; }
.aside-foot a:hover { text-decoration: underline; }

/* ---------- Step 2 specifics ---------- */
.weekday-row { display: flex; gap: 8px; flex-wrap: wrap; }
.weekday { min-width: 54px; height: 44px; padding: 0 6px; border-radius: 11px; flex: 1 1 0; border: 1.5px solid var(--tt-hairline); background: var(--tt-surface); font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--tt-ink-secondary); cursor: pointer; transition: all .15s ease; }
.weekday:hover { border-color: rgba(61,90,128,.4); }
.weekday.is-on { background: var(--tt-indigo); border-color: var(--tt-indigo); color: #fff; }
.weekday:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--tt-indigo-tint); }
.inline-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .inline-3 { grid-template-columns: 1fr; } }
.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .inline-2 { grid-template-columns: 1fr; } }
.input-affix { position: relative; }
.input-affix .affix { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--tt-ink-secondary); pointer-events: none; }
.input-affix.yen input { padding-left: 30px; }
.input-affix .suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--tt-ink-meta); pointer-events: none; }
.age-to { display: flex; align-items: center; gap: 10px; }
.age-to span { font-size: 14px; color: var(--tt-ink-secondary); }

/* ---------- Step 3 documents ---------- */
.safe-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--tt-indigo-vlight); border: 1px solid var(--tt-hairline); margin: 22px 0 30px; }
.safe-banner svg { flex: 0 0 auto; margin-top: 1px; color: var(--tt-indigo); }
.safe-banner p { margin: 0; font-size: 13px; line-height: 19px; color: var(--tt-ink-secondary); }
.safe-banner strong { color: var(--tt-ink-strong); font-weight: 600; }

.ctx-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--tt-sunken); border: 1px solid var(--tt-hairline); margin-bottom: 8px; font-size: 13px; color: var(--tt-ink-secondary); }
.ctx-bar .ctx-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--tt-indigo-tint); color: var(--tt-indigo); font-weight: 600; font-size: 12.5px; }
.ctx-bar .ctx-chip .jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; }
.ctx-bar a { color: var(--tt-indigo); font-weight: 600; text-decoration: none; margin-left: auto; }
.ctx-bar a:hover { text-decoration: underline; }

.doc { margin-bottom: 18px; }
.doc-head { margin-bottom: 10px; }
.doc-kicker { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-ink-meta); font-weight: 500; margin: 0 0 6px; }
.doc-kicker .req { color: var(--tt-ochre-press); }
.doc-kicker .done-tick { display: none; align-items: center; gap: 4px; color: var(--tt-success); }
.doc.is-done .doc-kicker .done-tick { display: inline-flex; }
.doc.is-done .doc-kicker .req { display: none; }
.doc-name { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.006em; color: var(--tt-ink); margin: 0 0 5px; }
.doc-help { font-size: 13.5px; color: var(--tt-ink-secondary); margin: 0 0 10px; line-height: 19px; }
.doc-help strong { color: var(--tt-ink-strong); font-weight: 600; }
.accept-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.accept-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; background: var(--tt-surface); border: 1px solid var(--tt-hairline); font-size: 12.5px; color: var(--tt-ink-strong); }
.accept-chip .jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; font-weight: 600; }
.accept-chip .en { color: var(--tt-ink-meta); }

.anchor-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.anchor-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 11px; background: var(--tt-surface); border: 1px solid var(--tt-hairline); }
.anchor-row svg { flex: 0 0 auto; margin-top: 2px; color: var(--tt-indigo); }
.anchor-jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--tt-ink); line-height: 1.35; }
.anchor-en { font-size: 12.5px; color: var(--tt-ink-secondary); }
.anchor-note { font-size: 12px; color: var(--tt-ink-meta); margin-top: 2px; }
.anchor-or { text-align: center; font-size: 11.5px; color: var(--tt-ink-meta); font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; margin: 2px 0; }
.fallback-note { display: flex; gap: 9px; align-items: flex-start; padding: 12px 14px; border-radius: 11px; background: var(--tt-ochre-vlight); border: 1px solid rgba(212,165,116,.35); margin: 0 0 14px; }
.fallback-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--tt-ochre-press); }
.fallback-note p { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--tt-ink-secondary); }
.fallback-note strong { color: var(--tt-ink-strong); font-weight: 600; }
.fallback-note .jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; }

.gb-row { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; }
.gb { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tt-ink-secondary); }
.gb svg { flex: 0 0 auto; }
.gb.good svg { color: var(--tt-success); }
.gb.bad svg { color: var(--tt-ink-meta); }

.mynum { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; background: var(--tt-indigo-vlight); border: 1px solid var(--tt-hairline); margin: 0 0 10px; }
.mynum svg { flex: 0 0 auto; margin-top: 1px; color: var(--tt-indigo); }
.mynum p { margin: 0; font-size: 13px; line-height: 19px; color: var(--tt-ink-strong); }
.mynum .jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; }

/* ---------- drop-zone ---------- */
.dropzone { border: 1.5px dashed rgba(31,42,58,.22); border-radius: 14px; background: var(--tt-surface); transition: border-color .15s ease, background .15s ease; }
.dropzone.is-drag { border-color: var(--tt-indigo); background: var(--tt-indigo-vlight); }
.dz-empty, .dz-uploading, .dz-uploaded, .dz-error, .dz-waiting { display: none; }
.dropzone[data-state="empty"] .dz-empty { display: flex; }
.dropzone[data-state="uploading"] { border-style: solid; border-color: var(--tt-indigo-tint); }
.dropzone[data-state="uploading"] .dz-uploading { display: block; }
.dropzone[data-state="uploaded"] { border-style: solid; border-color: var(--tt-success-100); background: #F5FAF6; }
.dropzone[data-state="uploaded"] .dz-uploaded { display: flex; }
.dropzone[data-state="error"] { border-style: solid; border-color: var(--tt-danger); background: #FFFCFB; }
.dropzone[data-state="error"] .dz-error { display: block; }
.dropzone[data-state="waiting"] { border-style: dashed; border-color: rgba(31,42,58,.16); background: var(--tt-sunken); }
.dropzone[data-state="waiting"] .dz-waiting { display: flex; }

.dz-empty { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 22px; cursor: pointer; }
.dz-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--tt-indigo-tint); color: var(--tt-indigo); display: flex; align-items: center; justify-content: center; margin-bottom: 2px; }
.dz-prompt { font-size: 14.5px; color: var(--tt-ink); font-weight: 600; }
.dz-prompt .browse { color: var(--tt-indigo); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dz-meta { font-size: 12px; color: var(--tt-ink-meta); }

.dz-uploading { padding: 18px; }
.dz-file-top { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.dz-fileic { width: 34px; height: 40px; border-radius: 7px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-indigo-tint); color: var(--tt-indigo); }
.dz-fname { font-size: 13.5px; font-weight: 600; color: var(--tt-ink); word-break: break-all; }
.dz-fsize { font-size: 12px; color: var(--tt-ink-meta); }
.dz-cancel { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--tt-ink-meta); padding: 4px; border-radius: 6px; }
.dz-cancel:hover { background: var(--tt-sunken); color: var(--tt-ink); }
.dz-prog { height: 7px; border-radius: 99px; background: var(--tt-indigo-tint); overflow: hidden; }
.dz-prog-bar { height: 100%; width: 0%; background: var(--tt-indigo); border-radius: 99px; transition: width .3s ease; }
.dz-prog-txt { font-size: 11.5px; color: var(--tt-ink-secondary); margin-top: 7px; display: flex; justify-content: space-between; }

.dz-uploaded { align-items: center; gap: 12px; padding: 16px 18px; }
.dz-ok-ic { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-success-100); color: var(--tt-success); }
.dz-up-meta { min-width: 0; }
.dz-up-actions { margin-left: auto; display: flex; gap: 6px; flex: 0 0 auto; }
.dz-act { background: none; border: 1px solid var(--tt-hairline); border-radius: 8px; padding: 6px 11px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--tt-ink-strong); cursor: pointer; }
.dz-act:hover { background: var(--tt-sunken); }
.dz-act.danger { color: var(--tt-danger); border-color: var(--tt-danger-100); }
.dz-act.danger:hover { background: var(--tt-danger-100); }

.dz-error { padding: 16px 18px; }
.dz-err-top { display: flex; align-items: flex-start; gap: 11px; }
.dz-err-ic { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-danger-100); color: var(--tt-danger); }
.dz-err-msg { font-size: 13.5px; color: #7d2f27; line-height: 19px; font-weight: 500; }
.dz-err-sub { font-size: 12.5px; color: var(--tt-ink-secondary); margin-top: 2px; }
.dz-retry { margin-top: 12px; }
.dz-retry .browse { color: var(--tt-indigo); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-weight: 600; font-size: 13px; }

.dz-waiting { align-items: center; gap: 12px; padding: 16px 18px; }
.dz-wait-ic { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-sunken); color: var(--tt-ink-meta); border: 1px solid var(--tt-hairline); }
.dz-wait-t { font-size: 13.5px; font-weight: 600; color: var(--tt-ink-strong); }
.dz-wait-b { font-size: 12.5px; color: var(--tt-ink-secondary); margin-top: 1px; }
.dz-wait-link { margin-left: auto; color: var(--tt-indigo); font-weight: 600; font-size: 12.5px; text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
.dz-wait-link:hover { text-decoration: underline; }

.all-done { display: none; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--tt-success-100); border: 1px solid rgba(63,125,88,.22); margin-top: 6px; }
.all-done.is-shown { display: flex; }
.all-done svg { flex: 0 0 auto; color: var(--tt-success); }
.all-done p { margin: 0; font-size: 14px; color: #2c5a3f; line-height: 20px; }
.all-done strong { font-weight: 700; }

/* ---------- Step 4 specifics ---------- */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 26px; }
@media (max-width: 560px) { .dl-grid { grid-template-columns: 1fr; } }
.dl-card { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border-radius: 14px; background: var(--tt-surface); border: 1px solid var(--tt-hairline); box-shadow: var(--tt-shadow-card); text-decoration: none; transition: border-color .15s ease, transform .12s ease; cursor: pointer; }
.dl-card:hover { border-color: rgba(61,90,128,.4); transform: translateY(-1px); }
.dl-ic { width: 40px; height: 48px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-danger-100); color: var(--tt-danger); position: relative; }
.dl-ic .pdf { font-family: 'JetBrains Mono', monospace; font-size: 8px; font-weight: 700; position: absolute; bottom: 6px; letter-spacing: .04em; }
.dl-name { font-size: 14.5px; font-weight: 700; color: var(--tt-ink); margin: 0 0 3px; line-height: 1.3; }
.dl-meta { font-size: 12px; color: var(--tt-ink-meta); display: flex; align-items: center; gap: 6px; }
.dl-dlrow { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--tt-indigo); font-weight: 600; font-size: 13px; }

.howto { display: flex; gap: 0; margin: 0 0 28px; padding: 18px 20px; border-radius: 14px; background: var(--tt-sunken); border: 1px solid var(--tt-hairline); flex-wrap: wrap; }
.howto-step { display: flex; align-items: flex-start; gap: 11px; flex: 1 1 150px; padding: 4px 8px; }
.howto-n { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; background: var(--tt-indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.howto-t { font-size: 13.5px; font-weight: 700; color: var(--tt-ink); margin: 0 0 2px; }
.howto-b { font-size: 12.5px; color: var(--tt-ink-secondary); margin: 0; line-height: 17px; }

.sec-label { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--tt-ink); margin: 0 0 4px; letter-spacing: -0.006em; }
.sec-help { font-size: 13.5px; color: var(--tt-ink-secondary); margin: 0 0 14px; line-height: 19px; }
.block { margin-top: 30px; }

.needed { margin: 24px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--tt-surface); border: 1px solid var(--tt-hairline); }
.needed-h { font-size: 13px; font-weight: 700; color: var(--tt-ink-strong); margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.needed-h .count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--tt-ink-meta); font-weight: 500; }
.needed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.needed-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--tt-ink-secondary); }
.needed-list li .nbox { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; border: 1.5px solid var(--tt-hairline); display: flex; align-items: center; justify-content: center; color: transparent; transition: all .2s ease; }
.needed-list li.is-done { color: var(--tt-ink-strong); }
.needed-list li.is-done .nbox { background: var(--tt-success); border-color: var(--tt-success); color: #fff; }

.submit-row { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.submit-hint { font-size: 13px; color: var(--tt-ink-secondary); display: flex; align-items: center; gap: 7px; }
.submit-hint svg { color: var(--tt-ink-meta); flex: 0 0 auto; }
.submit-hint.ready { color: var(--tt-success); }
.submit-hint.ready svg { color: var(--tt-success); }

/* ---------- saved modal ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(31,42,58,.42); z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-scrim.is-open { display: flex; }
.modal { background: var(--tt-surface); border-radius: 20px; max-width: 440px; width: 100%; padding: 32px 32px 28px; box-shadow: 0 24px 64px -16px rgba(31,42,58,.4); text-align: left; animation: modal-in .22s cubic-bezier(.2,.7,.3,1); }
@keyframes modal-in { from { transform: translateY(12px) scale(.985); } to { transform: none; } }
.modal-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--tt-success-100); color: var(--tt-success); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.modal h3 { font-family: 'Plus Jakarta Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 22px; font-weight: 700; color: var(--tt-ink); margin: 0 0 10px; letter-spacing: -0.01em; }
.modal p { font-size: 14.5px; line-height: 22px; color: var(--tt-ink-secondary); margin: 0 0 8px; }
.modal p strong { color: var(--tt-ink-strong); font-weight: 600; }
.modal-actions { display: flex; gap: 12px; margin-top: 22px; }
.modal .cta-indigo-outline { height: 48px; }

/* ---------- outcome / status screens (Pass 3) ---------- */
.outcome-main { flex: 1 1 auto; padding: 60px 0 80px; }
@media (max-width: 720px) { .outcome-main { padding: 36px 0 56px; } }
.outcome { max-width: 600px; margin: 0 auto; }
.outcome.wide { max-width: 660px; }

.o-ic { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 26px; }
.o-ic.green { background: var(--tt-success-100); color: var(--tt-success); }
.o-ic.indigo { background: var(--tt-indigo-tint); color: var(--tt-indigo); }
.o-ic.ochre { background: var(--tt-ochre-tint); color: var(--tt-ochre-press); }
.o-ic.danger { background: var(--tt-danger-100); color: var(--tt-danger); }
.o-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; text-align: center; margin: 0 0 12px; }
.o-eyebrow.green { color: var(--tt-success); }
.o-eyebrow.ochre { color: var(--tt-ochre-press); }
.o-eyebrow.indigo { color: var(--tt-indigo); }
.o-title { text-align: center; margin: 0 0 16px; color: var(--tt-ink); text-wrap: balance; }
.o-body { text-align: center; font-size: 16px; line-height: 25px; color: var(--tt-ink-secondary); margin: 0 auto 14px; max-width: 48ch; text-wrap: pretty; }
.o-body strong { color: var(--tt-ink-strong); font-weight: 600; }
.o-body .echo-email { color: var(--tt-indigo); font-weight: 600; word-break: break-all; }
.o-school { display: block; text-align: center; font-size: 14px; color: var(--tt-ink-meta); margin: 0 auto 30px; max-width: 44ch; }
.o-school b { color: var(--tt-ink-strong); font-weight: 600; }
.o-note { text-align: center; font-size: 13.5px; color: var(--tt-ink-meta); margin: 22px auto 0; max-width: 44ch; line-height: 20px; }
.o-note a { color: var(--tt-indigo); font-weight: 600; text-decoration: none; }

.timeline { display: flex; align-items: flex-start; justify-content: center; max-width: 420px; margin: 6px auto 30px; }
.tl-step { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; width: 104px; }
.tl-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--tt-surface); border: 1.5px solid var(--tt-hairline); color: var(--tt-ink-meta); }
.tl-cap { font-size: 12px; font-weight: 600; color: var(--tt-ink-meta); text-align: center; line-height: 1.3; }
.tl-bar { flex: 1 1 auto; height: 2px; background: var(--tt-hairline); margin: 14px 2px 0; border-radius: 2px; }
.tl-step.is-done .tl-dot { background: var(--tt-indigo); border-color: var(--tt-indigo); color: #fff; }
.tl-step.is-done .tl-cap { color: var(--tt-ink-strong); }
.tl-bar.is-done { background: var(--tt-indigo); }
.tl-step.is-active .tl-dot { background: var(--tt-indigo); border-color: var(--tt-indigo); color: #fff; box-shadow: 0 0 0 4px var(--tt-indigo-vlight); }
.tl-step.is-active .tl-cap { color: var(--tt-ink); }
.tl-step.is-green .tl-dot { background: var(--tt-success); border-color: var(--tt-success); color: #fff; box-shadow: 0 0 0 4px var(--tt-success-100); }
.tl-step.is-green .tl-cap { color: var(--tt-success); }
.tl-step.is-ochre .tl-dot { background: var(--tt-ochre); border-color: var(--tt-ochre); color: #fff; box-shadow: 0 0 0 4px var(--tt-ochre-tint); }
.tl-step.is-ochre .tl-cap { color: var(--tt-ochre-press); }

.ref-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 26px; }
.ref-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--tt-surface); border: 1px solid var(--tt-hairline); font-size: 13px; color: var(--tt-ink-secondary); }
.ref-pill .r-val { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--tt-ink); }
.stat-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.stat-chip.review { background: var(--tt-warning-100); color: var(--tt-warning); }
.stat-chip.approved { background: var(--tt-success-100); color: var(--tt-success); }
.stat-chip.change { background: var(--tt-ochre-tint); color: var(--tt-ochre-press); }

.o-card { background: var(--tt-surface); border: 1px solid var(--tt-hairline); border-radius: 16px; padding: 22px 24px; box-shadow: var(--tt-shadow-card); }
.o-card + .o-card { margin-top: 14px; }
.docs-h { font-size: 13px; font-weight: 700; color: var(--tt-ink-strong); margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.docs-sub { font-size: 12.5px; color: var(--tt-ink-meta); margin: 0 0 14px; }
.doc-line { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--tt-hairline); }
.doc-line:first-of-type { border-top: none; }
.doc-fic { width: 30px; height: 36px; border-radius: 6px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--tt-danger-100); color: var(--tt-danger); position: relative; }
.doc-fic .pdf { font-family: 'JetBrains Mono', monospace; font-size: 7px; font-weight: 700; position: absolute; bottom: 5px; }
.doc-meta { min-width: 0; flex: 1 1 auto; }
.doc-lab { font-size: 13.5px; font-weight: 600; color: var(--tt-ink); }
.doc-fn { font-size: 12px; color: var(--tt-ink-meta); word-break: break-all; }
.doc-dl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--tt-hairline); background: var(--tt-surface); color: var(--tt-ink-strong); font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.doc-dl:hover { background: var(--tt-sunken); }

.next-card { background: var(--tt-surface); border: 1px solid var(--tt-hairline); border-radius: 16px; padding: 8px 24px; box-shadow: var(--tt-shadow-card); margin-bottom: 24px; }
.next-item { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--tt-hairline); }
.next-item:first-child { border-top: none; }
.next-n { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--tt-indigo-tint); color: var(--tt-indigo); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.next-t { font-size: 15px; font-weight: 700; color: var(--tt-ink); margin: 0 0 4px; }
.next-b { font-size: 13.5px; color: var(--tt-ink-secondary); margin: 0; line-height: 20px; }
.next-b .lock { display: inline-flex; align-items: center; gap: 5px; color: var(--tt-ink-meta); font-size: 12.5px; margin-top: 7px; }

.change-card { background: var(--tt-ochre-vlight); border: 1px solid rgba(212,165,116,.4); border-radius: 16px; padding: 22px 24px; margin-bottom: 22px; }
.change-h { display: flex; align-items: center; gap: 9px; font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--tt-ochre-press); font-weight: 500; margin: 0 0 12px; }
.change-doc { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(212,165,116,.35); }
.change-doc .doc-fic { background: var(--tt-surface); color: var(--tt-ochre-press); border: 1px solid rgba(212,165,116,.4); }
.change-doc-lab { font-size: 14.5px; font-weight: 700; color: var(--tt-ink); }
.change-doc-jp { font-family: 'Noto Sans JP', 'Inter', system-ui, sans-serif; font-size: 12.5px; color: var(--tt-ink-secondary); }
.reviewer-note { display: flex; gap: 11px; align-items: flex-start; }
.reviewer-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; background: var(--tt-indigo-tint); color: var(--tt-indigo); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.reviewer-who { font-size: 12px; color: var(--tt-ink-meta); margin: 0 0 4px; }
.reviewer-who b { color: var(--tt-ink-strong); font-weight: 600; }
.reviewer-msg { font-size: 14px; line-height: 21px; color: var(--tt-ink-strong); margin: 0; white-space: pre-wrap; }

.fail-fallback { display: none; gap: 10px; align-items: flex-start; padding: 13px 15px; border-radius: 12px; background: var(--tt-sunken); border: 1px solid var(--tt-hairline); margin-bottom: 16px; }
.fail-fallback.is-shown { display: flex; }
.fail-fallback svg { flex: 0 0 auto; margin-top: 1px; color: var(--tt-ink-secondary); }
.fail-fallback p { margin: 0; font-size: 13px; line-height: 19px; color: var(--tt-ink-secondary); }
.fail-fallback a { color: var(--tt-indigo); font-weight: 600; text-decoration: none; }

.actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px; }
.actions.row { flex-direction: row; justify-content: center; flex-wrap: wrap; }
.link-ghost { font-size: 13.5px; color: var(--tt-ink-secondary); background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.link-ghost:hover { color: var(--tt-ink); }

/* status lookup */
.lookup-card { background: var(--tt-surface); border: 1px solid var(--tt-hairline); border-radius: 18px; padding: 30px 30px 28px; box-shadow: var(--tt-shadow-card); }
@media (max-width: 560px) { .lookup-card { padding: 24px 20px; } }
.lk-input { width: 100%; height: 52px; border-radius: var(--tt-r-input); border: 1px solid var(--tt-hairline); background: var(--tt-surface); padding: 0 16px; font-size: 15.5px; font-family: inherit; color: var(--tt-ink); transition: border-color .15s ease, box-shadow .15s ease; }
.lk-input::placeholder { color: var(--tt-ink-meta); }
.lk-input:focus { outline: none; border-color: var(--tt-indigo); box-shadow: 0 0 0 3px var(--tt-indigo-tint); }
.lk-help { font-size: 13px; color: var(--tt-ink-secondary); margin: 8px 0 0; line-height: 18px; }
.lk-error { display: none; align-items: flex-start; gap: 6px; margin-top: 10px; color: var(--tt-danger); font-size: 13px; line-height: 18px; }
.lk-error.is-shown { display: flex; }
.lk-error svg { flex: 0 0 auto; margin-top: 1px; }
.lookup-card.has-error .lk-input { border-color: var(--tt-danger); background: #FFFCFB; }
.lk-foot { text-align: center; font-size: 13.5px; color: var(--tt-ink-secondary); margin: 20px 0 0; }
.lk-foot a { color: var(--tt-indigo); font-weight: 600; text-decoration: none; }
.result-bar { display: none; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; font-size: 13px; color: var(--tt-ink-secondary); }
.result-bar.is-shown { display: flex; }
.result-bar b { color: var(--tt-ink-strong); }
.result-bar button { color: var(--tt-indigo); font-weight: 600; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; text-decoration: underline; }

.center-state { text-align: center; padding: 40px 0; }
.spinner { width: 44px; height: 44px; border: 3px solid var(--tt-indigo-tint); border-top-color: var(--tt-indigo); border-radius: 50%; animation: tt-spin .8s linear infinite; margin: 0 auto 22px; }
.center-state .o-title { margin-bottom: 8px; }

/* ---------- panes ---------- */
.step-pane, .pane { display: none; }
.step-pane.is-active, .pane.is-active { display: block; }

/* no-JS guard: the flow needs JS; reveal the first step so it isn't blank */
.no-js .step-pane#pane1 { display: block; }