/* Parcel — the Setup Assistant (#/setup, #/setup/:chapter, #/setup/:chapter/:step; SPEC-M2 §2). Everything is scoped under
   .view-setup .su-… (the routes' scope; their tab is today). Model: iOS Setup Assistant for a step (a centred glyph and title,
   one thing to do, one primary button resting on the bottom edge) and iOS Settings for the hub and chapters (inset grouped
   lists). Tokens only, so light and dark both work. Layout follows the column's width (container "su"). */

.view-setup .su { container: su / inline-size; width: 100%; margin: 0 auto; }
.view-setup .su-hub { max-width: 720px; }
.view-setup .su-chapter { max-width: 640px; }

/* ---------------------------------------------------------------- shared type */
.view-setup .su-large {
  margin: 4px 0 18px;
  font-size: var(--fs-large); line-height: var(--lh-large); letter-spacing: var(--ls-large); font-weight: var(--w-bold);
  text-wrap: balance;
}
.view-setup .su-card { background: var(--bg-2); border-radius: var(--r-card); padding: 16px; }
.view-setup .su-eyebrow {
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); color: var(--label-2);
}

/* ---------------------------------------------------------------- thin progress bar (chapters and steps) */
.view-setup .su-progress { width: 100%; max-width: 420px; margin: 6px auto 0; }
.view-setup .su-progress .meter-head { justify-content: center; margin-bottom: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); }
.view-setup .su-progress .meter-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.view-setup .su-progress .meter-value { font-weight: var(--w-medium); color: var(--label-2); }
.view-setup .su-progress .meter.is-complete .meter-value { color: var(--green-text); }
.view-setup .su-progress .meter-check svg { width: 14px; height: 14px; }
.view-setup .su-progress .meter-track { height: 4px; border-radius: 2px; }

/* ---------------------------------------------------------------- hub */
.view-setup .su-hub-head { padding: 0 4px; }
.view-setup .su-sample {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin-bottom: 16px; padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: inset 3px 0 0 var(--orange);
}
.view-setup .su-sample-text { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-setup .su-sample-text strong { color: var(--orange-text); font-weight: var(--w-semibold); }
.view-setup .su-sample .btn { margin-left: -2px; }

.view-setup .su-hero-top { display: flex; align-items: center; gap: 16px; }
.view-setup .su-hero-ring { flex: none; display: grid; }
.view-setup .su-hero-text { min-width: 0; }
.view-setup .su-hero-count {
  font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-title3); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.view-setup .su-hero-left { margin-top: 2px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
.view-setup .su-next {
  margin-top: 16px; padding-top: 16px;
  box-shadow: inset 0 var(--hairline) 0 var(--sep);
}
.view-setup .su-next-title {
  margin-top: 2px;
  font-size: var(--fs-title3); line-height: var(--lh-title3); letter-spacing: var(--ls-title3); font-weight: var(--w-semibold);
  text-wrap: balance;
}
.view-setup .su-next-meta {
  margin-top: 4px; display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty;
}
.view-setup .su-next-meta.is-error { color: var(--red-text); }
.view-setup .su-next-meta svg { flex: none; margin-top: 2px; }
.view-setup .su-waiting-text { margin-top: 2px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-setup .su-next .su-continue { margin-top: 16px; }
@container su (min-width: 560px) {
  .view-setup .su-hero { padding: 20px; }
  .view-setup .su-next .su-continue { display: inline-flex; width: auto; min-width: 240px; }
}

.view-setup .su-hub .su-chapters { margin-top: var(--sp-7); }
.view-setup .su-chapters .list-row-subtitle,
.view-setup .su-steps .list-row-subtitle { white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; }
.view-setup .su-chapter-done { display: inline-grid; color: var(--green); }
.view-setup .su-chapter-row.is-done .list-row-subtitle { color: var(--green-text); }

/* "Parcel's ready" */
.view-setup .su-ready { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 20px 20px; }
.view-setup .su-ready-mark { display: grid; color: var(--green); }
.view-setup .su-ready-title {
  margin-top: 12px;
  font-size: var(--fs-title2); line-height: var(--lh-title2); letter-spacing: var(--ls-title2); font-weight: var(--w-bold);
}
.view-setup .su-ready-text { margin-top: 6px; max-width: 480px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-setup .su-ready .su-continue { margin-top: 18px; max-width: 360px; }
.view-setup .su-later-list { margin-top: var(--sp-7); }
.view-setup .su-later-list .list-row-value { font-size: var(--fs-subhead); }

/* ---------------------------------------------------------------- chapter + step heads */
.view-setup .su-head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 600px; margin: 24px auto 0;
}
.view-setup .su-step-chapter { margin-bottom: 2px; }
.view-setup .su-glyph {
  --g: var(--blue);
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 60px; height: 60px; margin-bottom: 14px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(155deg, color-mix(in oklab, var(--g) 62%, #fff), var(--g) 58%, color-mix(in oklab, var(--g) 82%, #000));
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--g) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.view-setup .su-glyph.is-indigo { --g: var(--indigo); }
.view-setup .su-glyph.is-orange { --g: var(--orange); }
.view-setup .su-glyph.is-gray { --g: var(--gray); }
.view-setup .su-glyph.is-green { --g: var(--green); }
.view-setup .su-glyph.is-teal { --g: var(--teal); }
.view-setup .su-glyph.is-purple { --g: var(--purple); }
.view-setup .su-glyph.is-pink { --g: var(--pink); }
.view-setup .su-title {
  font-size: var(--fs-title1); line-height: var(--lh-title1); letter-spacing: var(--ls-title1); font-weight: var(--w-bold);
  text-wrap: balance;
  border-radius: 8px;
}
/* The step title takes focus on arrival (screen readers read it); a heading isn't a control, so no ring. */
.view-setup .su-title:focus { outline: none; }
.view-setup .su-why {
  margin-top: 8px; max-width: 520px;
  font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); color: var(--label-2);
  text-wrap: pretty;
}
.view-setup .su-meta {
  margin-top: 10px; max-width: 520px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-medium); color: var(--label-2);
  text-wrap: balance;
}
.view-setup .su-meta svg { display: inline-block; vertical-align: -2.5px; margin-right: 5px; }
.view-setup .su-meta .su-meta-done { color: var(--green); }
@container su (min-width: 560px) {
  .view-setup .su-head { margin-top: 32px; }
  .view-setup .su-title { font-size: var(--fs-large); line-height: var(--lh-large); letter-spacing: var(--ls-large); }
  .view-setup .su-why { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
}

/* ---------------------------------------------------------------- chapter */
.view-setup .su-chapter .su-note { margin-top: 20px; }
.view-setup .su-chapter .su-steps { margin-top: var(--sp-6); }
.view-setup .su-chapter .su-steps .list-footer { padding-top: 10px; }
.view-setup .su-chapter-go { max-width: 400px; margin: var(--sp-6) auto 0; }
.view-setup .su-mark { display: grid; place-items: center; width: 28px; height: 28px; }
.view-setup .su-mark.is-done { color: var(--green); }
.view-setup .su-mark.is-error { color: var(--red); }
.view-setup .su-mark.is-later { color: var(--label-3); }
.view-setup .su-mark-n {
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--label-3);
  font-size: var(--fs-footnote); line-height: 1; font-weight: var(--w-semibold); color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.view-setup .su-mark.is-next .su-mark-n { background: var(--accent-fill); box-shadow: none; color: #fff; }
.view-setup .su-step-row.is-done .list-row-subtitle { color: var(--green-text); }
.view-setup .su-step-row.is-error .list-row-subtitle { color: var(--red-text); }

/* ---------------------------------------------------------------- step */
.view-setup .su-step {
  display: flex; flex-direction: column;
  /* Fill the screen so the footer rests on the bottom edge even when a step is short (as the launch flow does). */
  min-height: calc(100dvh - var(--navbar-h) - var(--safe-top) - var(--sp-2));
}
.view-setup .su-step-main { flex: 1 0 auto; width: 100%; max-width: 600px; margin: 0 auto; }

.view-setup .su-notes { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.view-setup .su-notes[hidden] { display: none; }
.view-setup .su-note {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-2);
  text-align: left;
}
.view-setup .su-note-icon { flex: none; display: grid; margin-top: 1px; color: var(--indigo); }
.view-setup .su-note.is-waiting .su-note-icon { color: var(--orange); }
.view-setup .su-note.is-early .su-note-icon { color: var(--orange); }
.view-setup .su-note.is-later .su-note-icon { color: var(--gray); }
.view-setup .su-note-body { flex: 1 1 auto; min-width: 0; }
.view-setup .su-note-title { font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); text-wrap: pretty; }
.view-setup .su-note-text { margin-top: 2px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); text-wrap: pretty; }
.view-setup .su-note.is-early .su-note-text { margin-top: 0; color: var(--label); }
.view-setup .su-note-link {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 6px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); font-weight: var(--w-semibold); color: var(--accent-text);
}

.view-setup .su-body { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
@container su (min-width: 560px) { .view-setup .su-body { margin-top: 28px; } }
.view-setup .su-open { width: 100%; }

/* What to do: numbered, at most 4 short lines (an inset group). */
.view-setup .su-howto { list-style: none; margin: 0; padding: 0 16px; border-radius: 14px; background: var(--bg-2); }
.view-setup .su-howto-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.view-setup .su-howto-item + .su-howto-item { box-shadow: inset 0 var(--hairline) 0 var(--sep); }
.view-setup .su-howto-n {
  flex: none; display: grid; place-items: center;
  width: 24px; height: 24px; margin-top: -1px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-text);
  font-size: var(--fs-footnote); line-height: 1; font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
}
.view-setup .su-howto-text { min-width: 0; font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); overflow-wrap: anywhere; text-wrap: pretty; }

/* A field: label, the box (input + Paste, or what's saved), one status line. */
.view-setup .su-field { display: flex; flex-direction: column; min-width: 0; }
.view-setup .su-label { padding: 0 16px 7px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); text-transform: uppercase; }
.view-setup .su-box {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 4px 8px 4px 16px;
  border-radius: 12px;
  background: var(--bg-2);
  transition: box-shadow 150ms linear;
}
.view-setup .su-box[hidden] { display: none; }
.view-setup .su-box:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.view-setup .su-input {
  flex: 1 1 auto; min-width: 0; height: 44px;
  font: inherit; font-size: var(--fs-body); letter-spacing: var(--ls-body); color: var(--label);
  background: none; border: 0; padding: 0;
}
.view-setup .su-input:focus-visible { outline: none; }
.view-setup .su-input::placeholder { color: var(--label-3); }
.view-setup .su-input[aria-invalid="true"] { color: var(--red-text); }
.view-setup .su-abn-input { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.view-setup .su-paste { flex: none; }
.view-setup .su-saved { padding-right: 16px; }
.view-setup .su-saved-icon { flex: none; display: grid; color: var(--green); }
.view-setup .su-saved-text { min-width: 0; font-size: var(--fs-callout); line-height: var(--lh-callout); overflow-wrap: anywhere; }

/* The status line keeps room for three lines, so a check starting, working or failing never moves what's below it. */
.view-setup .su-status {
  display: flex; align-items: flex-start; gap: 6px;
  min-height: calc(3 * var(--lh-footnote)); margin-top: 8px; padding: 0 4px 0 16px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2);
  text-wrap: pretty;
}
.view-setup .su-status-mark { flex: none; display: grid; place-items: center; width: 17px; height: var(--lh-footnote); }
.view-setup .su-status-text { min-width: 0; overflow-wrap: anywhere; }
.view-setup .su-status[data-state="ok"] { color: var(--green-text); font-weight: var(--w-medium); }
.view-setup .su-status[data-state="ok"] .su-status-mark { color: var(--green); }
.view-setup .su-status[data-state="error"] { color: var(--red-text); }
.view-setup .su-status[data-state="error"] .su-status-mark { color: var(--red); }
.view-setup .su-status[data-state="hint"] { color: var(--label); }
.view-setup .su-status[data-state="hint"] .su-status-mark { color: var(--accent); }
.view-setup .su-field-actions { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 4px; }
.view-setup .su-field-actions .btn[hidden] { display: none; }
.view-setup .su-field-actions:not(:has(.btn:not([hidden]))) { display: none; }

/* "I've done this" / Done · Mark as not done */
.view-setup .su-tickbox { display: flex; flex-direction: column; }
.view-setup .su-tick[hidden], .view-setup .su-done[hidden] { display: none; }
.view-setup .su-done {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 3px 6px 3px 14px;
  border-radius: 12px;
  background: var(--bg-2);
}
.view-setup .su-done-mark { flex: none; display: grid; color: var(--green); }
.view-setup .su-done-text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-headline); line-height: var(--lh-headline); font-weight: var(--w-semibold); color: var(--green-text); }
.view-setup .su-untick { flex: none; }

/* Send to my computer: phones and tablets only (on a computer it would send the step to itself). */
.view-setup .su-computer .su-send { margin-top: 10px; margin-left: -2px; }
.view-setup .su-sent { margin-top: 6px; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-2); overflow-wrap: anywhere; text-wrap: pretty; }
.view-setup .su-sent:empty { display: none; }
.view-setup .su-sent[data-state="error"] { color: var(--red-text); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .view-setup .su-computer { display: none; }
}

.view-setup .su-guide { text-align: center; }
.view-setup .su-why-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--accent-text);
}
@media (hover: hover) and (pointer: fine) {
  .view-setup :is(.su-why-link, .su-note-link):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.view-setup .su-why-link:active, .view-setup .su-note-link:active { opacity: .45; }

/* The footer: Next (the one primary button) and "Do it later", resting on the bottom edge (the tab bar steps aside here). */
.view-setup .su-footer {
  position: sticky; bottom: 0; z-index: 5;
  margin: var(--sp-7) calc(-1 * var(--gutter)) calc(-1 * (var(--tabbar-space) + var(--sp-8)));
  padding: 22px var(--gutter) calc(12px + var(--tabbar-space));
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 22px);
}
@media (min-width: 1024px) {
  .view-setup .su-footer {
    margin-bottom: calc(-1 * (var(--tabbar-space) + var(--sp-10)));
    padding-bottom: calc(24px + var(--tabbar-space));
  }
}
.view-setup .su-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 400px; margin: 0 auto; }
.view-setup .su-next-btn { width: 100%; }
.view-setup .su-later[hidden] { display: none; }
.view-setup .su-later { margin-top: 2px; }

@media (forced-colors: active) {
  .view-setup .su-card, .view-setup .su-note, .view-setup .su-howto, .view-setup .su-box, .view-setup .su-done, .view-setup .su-sample { border: 1px solid CanvasText; }
  .view-setup .su-mark-n { border: 1px solid CanvasText; }
}