/*
 * Setup (/setup, lib/web/setup.ts + public/js/setup.js): one question per slide, choices in stationery style
 * (public/style.css), large drawn devices, and at the end a list that ticks itself off.
 */

.page-setup main {
  max-width: calc(46rem + 2 * var(--gutter)); padding-top: clamp(1rem, 4vw, 2.5rem); padding-bottom: 0;
  display: flex; flex-direction: column;
}

/* --- Header: back, wordmark, chapters, close ------------------------------------------------- */

.wizard-bar {
  display: grid; grid-template-columns: 2.75rem auto minmax(0, 1fr) auto 2.75rem; align-items: center; gap: 0.5rem 1rem;
  width: 100%; max-width: calc(46rem + 2 * var(--gutter)); margin: 0 auto; padding: 1rem var(--gutter) 0.5rem;
}
.wizard-bar .icon-button { width: 2.75rem; height: 2.75rem; }
.wizard-bar .wordmark { font-size: 1.8rem; }
.wizard-bar [data-back][hidden] { display: inline-grid !important; visibility: hidden; }
/* Four chapters; the current one fills up slide by slide (setup.js sets --fill) */
.chapters { display: flex; gap: 6px; }
.chapters span { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--rule-strong); }
.chapters span::after {
  content: ''; position: absolute; inset: 0; background: var(--ink);
  transform-origin: left center; transform: scaleX(var(--fill, 0)); transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.chapter-label { font-size: 0.875rem; font-weight: 600; color: var(--pencil); white-space: nowrap; }

/* --- Slides ---------------------------------------------------------------------------------------- */

.wizard { position: relative; flex: 1; display: flex; flex-direction: column; }
.slide { display: grid; gap: 1.5rem; align-content: start; padding: 0.5rem 0 2rem; }
.slide-title { font-size: clamp(1.9rem, 1.25rem + 2.5vw, 2.8rem); font-weight: 720; line-height: 1.06; letter-spacing: -0.03em; max-width: 20ch; outline: none; }
.slide .lede { margin-top: -0.75rem; }
.slide-note { max-width: 36rem; color: var(--graphite); }
.slide-note a { white-space: nowrap; }
/* Moving on answers the tap: the new slide comes in from one side, the previous one glides out the other.
   Meanwhile the previous one lies over the new one without taking up space (setup.js removes it after LEAVE_MS). */
.slide.is-entering { animation: slide-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1); }
.slide.is-entering.from-left { animation-name: slide-in-left; }
.slide.is-leaving { position: absolute; inset: 0 0 auto; pointer-events: none; animation: slide-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards; }
.slide.is-leaving.to-right { animation-name: slide-out-right; }
@keyframes slide-in { from { opacity: 0; transform: translateX(1.25rem); } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-1.25rem); } }
@keyframes slide-out { to { opacity: 0; transform: translateX(-1.25rem); } }
@keyframes slide-out-right { to { opacity: 0; transform: translateX(1.25rem); } }

.wizard-foot {
  position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: flex-end;
  margin-top: auto; padding: 1rem 0 max(1rem, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--paper) 35%);
}
.wizard-foot[hidden] { display: none; }
.slide-form { max-width: 26rem; }
.slide-form .auth-form { margin-top: 0; }

/* --- Devices, apps, outputs, start methods ----------------------------------------------------------------- */

.picks-devices { gap: 1.25rem 2.75rem; }
.picks-devices .pick { min-width: 8.5rem; }
.device-art { display: block; width: 6.75rem; height: 6.75rem; color: var(--graphite); }
.device-art .fill-surface { fill: var(--surface); }
.device-art .fill-paper, .output-art .fill-paper { fill: var(--sheet); }
.device-art .rule, .output-art .rule { stroke: var(--sheet-rule); stroke-width: 1.3; }
.device-art .ink, .output-art .ink { stroke: var(--ink-blue); stroke-width: 1.8; }
.device-art .ink-dot { fill: currentColor; stroke: none; }
.picks-devices .pick-label { font-size: 1.05rem; }

.picks-apps { gap: 1rem 1.6rem; }
.picks-apps .pick { width: 7.75rem; }
.picks-apps .app-mark { width: 3.4rem; height: 3.4rem; }
.picks-apps .pick-hint { max-width: 7rem; }

/* Rows as wide as their content, so the circle encloses them instead of running across the page */
.picks-rows { display: grid; justify-items: start; gap: 1.1rem; max-width: 38rem; }
.picks-rows .pick { padding: 0.75rem 1.25rem 0.75rem 0.75rem; }
.picks-rows .pick-label { font-size: 1.05rem; }
.picks-rows .pick-hint { max-width: 26rem; font-size: 0.9rem; }
.output-art { display: block; width: 4.75rem; height: auto; color: var(--graphite); }
.start-icon { display: grid; place-items: center; width: 3rem; height: 3rem; }
.start-icon .icon { width: 2.1rem; height: 2.1rem; color: var(--ink-text); stroke-width: 1.5; }

/* --- Paper --------------------------------------------------------------------------------------- */

.paper-group { display: grid; gap: 0.25rem; }
.paper-group legend { margin-bottom: 0.5rem; }
.picks-paper { gap: 0.6rem 1.25rem; }
.picks-paper .paper-thumb { width: 3.5rem; }

/* --- Handwriting questions ----------------------------------------------------------------------------- */

.quiz-so-far { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; color: var(--pencil); font-size: 0.95rem; }
.so-far-sample { font-size: calc(2rem * var(--hand-scale)); line-height: 1.1; color: var(--ink-blue); }

/* The matching handwriting as a sample on a sheet (the sample is a PNG with a transparent background) */
.match-sheet, .ink-sample { margin: 0; display: grid; gap: 0.9rem; }
.sample-paper {
  display: block; padding: clamp(1rem, 4vw, 1.75rem) clamp(1rem, 4vw, 2.25rem);
  background: var(--sheet); border-radius: 4px; box-shadow: var(--shadow-sheet);
}
.sample-paper img { display: block; width: 100%; height: auto; }
.match-sheet figcaption strong { font-size: 1.3rem; margin-right: 0.35rem; }
.alternatives { display: grid; gap: 0.25rem; }
.alternatives legend { font-weight: 500; color: var(--pencil); }
.font-word { display: block; font-size: calc(2.2rem * var(--hand-scale)); line-height: 1.15; color: var(--ink-blue); }
@media (prefers-color-scheme: dark) {
  .font-word, .so-far-sample { color: var(--ink-text); }
}
.picks-ink { gap: 0.75rem 1.5rem; }

/* --- Your own handwriting: the offer with its slider, the fourth style card, your strokes on the sample sheet ---------- */

.own-choice { display: grid; gap: 1.75rem; }
.own-quality { display: grid; gap: 0.5rem; max-width: 26rem; }
.own-quality label { font-weight: 600; }
.own-quality .quality-range { width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.own-quality .quality-scale { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--pencil); font-variant-numeric: tabular-nums; }
.own-quality .quality-value { display: grid; gap: 0.25rem; }
.own-quality .quality-value strong { font-size: 1.35rem; font-weight: 680; color: var(--ink-text); }
.own-quality .quality-value span { color: var(--pencil); }

.pick-own-invite { color: inherit; text-decoration: none; }
.pick-own-invite .font-card.is-invite {
  display: grid; place-items: center; width: 4.5rem; height: 2.6rem; border: 1.5px dashed var(--rule-strong); border-radius: 8px;
}
.pick-own-invite .font-card.is-invite svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--ink-text); stroke-width: 2.6; stroke-linecap: round; }
.pick-own-invite:hover .font-card.is-invite { border-color: var(--ink); }
.mine-word .mine-sample { display: block; width: auto; height: 2.6rem; overflow: visible; }
.mine-sample path { fill: none; stroke: var(--ink-blue); stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) {
  .mine-word .mine-sample path { stroke: var(--ink-text); }
}
/* on the sample sheet (which stays light) in the ink picked */
.mine-face { display: block; }
.mine-face .mine-sample { display: block; width: min(100%, 26rem); height: auto; margin: 0.75rem auto; overflow: visible; }
.mine-face[data-ink='black'] path { stroke: var(--ink-black); }
.mine-face[data-ink='royal'] path { stroke: var(--ink-royal); }

/* --- Overview ("Check your answers") ------------------------------------------------------------------- */

.summary-sentence { max-width: 38rem; font-size: 1.2rem; line-height: 1.5; text-wrap: pretty; }
.summary-list { margin: 0; max-width: 38rem; border-top: 1px solid var(--rule); }
.summary-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.25rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.summary-row dt { color: var(--pencil); font-size: 0.95rem; }
.summary-row dd { margin: 0; font-weight: 600; }
.summary-row .summary-change { font-weight: 400; }
.link-button {
  min-height: 2.75rem; padding: 0 0.25rem; font: inherit; color: var(--ink-text); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}
.link-button:hover { text-decoration-thickness: 2px; }

/* --- Install -------------------------------------------------------------------------------------- */

[data-install] { display: grid; gap: 1.25rem; align-content: start; }
/* Already done: two ticks up front */
.head-start { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; color: var(--pencil); }
.head-start li { display: flex; align-items: center; gap: 0.4rem; }
.step-tick { display: inline-grid; place-items: center; color: var(--ink-text); }
.step-tick .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.2; }

.install-steps { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; }
.install-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.install-body { display: grid; gap: 0.7rem; justify-items: start; min-width: 0; }
.install-body h2 { font-size: 1.3rem; }
.install-body p { color: var(--pencil); max-width: 34rem; }
.install-body p strong { color: var(--graphite); }
.install-num { font-family: 'Caveat', cursive; font-weight: 700; font-size: 3rem; line-height: 0.9; color: var(--ink-text); text-align: center; }
/* Done: the number is crossed out like on a list */
.install-step.is-done .install-num { color: var(--pencil); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--ink); }
.mini-steps { margin: 0; padding-left: 1.2rem; color: var(--pencil); display: grid; gap: 0.35rem; max-width: 34rem; }
.mini-steps strong { color: var(--graphite); }
.live-status { font-size: 0.95rem; }
.install-step.is-done .live-status { color: var(--graphite); font-weight: 600; }
.example {
  margin: 0; padding: 0.9rem 1.1rem; max-width: 34rem; border-radius: 4px;
  background: var(--sheet); color: #2a3142; box-shadow: var(--shadow-sheet);
  -webkit-user-select: text; user-select: text;
}
.install-done { padding: 1.5rem 0 2rem; border-top: 1px solid var(--rule); }

/* The Shortcuts prompt, redrawn in simplified form: "Always Allow" is circled */
.prompt-sketch {
  margin: 0.2rem 0; width: min(100%, 17rem); display: grid; gap: 0.6rem; padding: 0.9rem 1rem 0.8rem;
  border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--rule-strong);
  font-size: 0.85rem; text-align: center; color: var(--graphite);
}
.prompt-text { color: var(--pencil); }
.prompt-buttons { display: grid; gap: 0.45rem; }
.prompt-buttons > span { position: relative; padding: 0.35rem; color: var(--ink-text); font-weight: 600; }
.prompt-buttons > span + span { border-top: 1px solid var(--rule); }
.prompt-pick .pen-ring { left: 8%; width: 84%; }
.prompt-pick .pen-ring path { opacity: 1; stroke-dashoffset: 0; }

/* On a computer: QR code to continue on the device */
.handoff { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
.handoff-text { display: grid; gap: 0.75rem; justify-items: start; }
.handoff-text p { color: var(--pencil); }
.handoff-text .live-status { color: var(--graphite); }
.handoff .button.ghost { margin-left: -1.15rem; }
.qr { width: 13.5rem; height: 13.5rem; padding: 0.9rem; border-radius: 6px; background: #ffffff; box-shadow: var(--shadow-sheet); }
.qr svg { display: block; width: 100%; height: 100%; }
@media (min-width: 40rem) {
  .handoff { grid-template-columns: auto minmax(0, 1fr); }
}

/* --- Narrow screens ----------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .wizard-bar { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
  .wizard-bar .wordmark { display: none; }
  .wizard-bar .chapters { grid-column: 2; }
  .wizard-bar .chapter-label { grid-column: 2; grid-row: 2; justify-self: center; margin-top: -0.15rem; font-size: 0.8rem; }
  .wizard-foot .button { width: 100%; }
  .picks-devices { gap: 1rem; }
  .picks-devices .pick { min-width: 0; flex: 1 1 6rem; }
  .device-art { width: 5.25rem; height: 5.25rem; }
  .picks-apps { gap: 0.5rem 0.75rem; }
  .picks-apps .pick { width: calc(50% - 0.5rem); }
  .install-step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; }
  .install-num { font-size: 2.4rem; }
  .summary-row { grid-template-columns: minmax(0, 1fr) auto; }
  .summary-row dt { grid-column: 1 / -1; }
}