/* Quiet Stanza — sheets, and the writing setup ("Let's get set up").
   The modal sheet, the sample on notebook paper, the hand, the checks and the tabs. */

/* the feedback sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(43, 42, 36, .35);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sheet {
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-sheet);
  box-shadow: 0 18px 48px rgba(43, 42, 36, .25);
  padding: 26px 28px;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
}

/* ═══ writing setup (Let's get setup) ═══ */
.setup-sheet { width: min(480px, 100%); }
.setup-sample {
  --setup-sz: 24.9px;
  --setup-pitch: 42.9px;
  position: relative;
  margin: 16px 0 4px;
  padding: calc(14px + var(--ink-bleed)) calc(16px + var(--ink-bleed)) calc(26px + var(--ink-bleed));
  background: var(--sheet);
  border: 1px solid var(--sheet-edge);
  border-radius: var(--radius-card);
  color: var(--setup-ink, var(--ink));
  min-height: 7.5rem;
  overflow: visible;
}
/* Notebook paper under the sample (same ruling as the journal). Guides hide the grid. */
.setup-sample.sheet-ruled {
  /* Align a rule/dot row under the first baseline, like the A5 content inset. */
  background-position:
    0 0,
    0 calc((var(--setup-pitch) - var(--setup-sz)) / 2 + var(--setup-sz) * 0.8);
}
.setup-sample.sheet-ruled.paper-grid {
  background-position:
    0 0,
    0 calc((var(--setup-pitch) - var(--setup-sz)) / 2 + var(--setup-sz) * 0.8),
    0 calc((var(--setup-pitch) - var(--setup-sz)) / 2 + var(--setup-sz) * 0.8);
}
.setup-sample.cue-guides {
  background-image: none;
  background-color: var(--sheet);
}
.setup-sample-text {
  margin: 0;
  font-size: var(--setup-sz);
  line-height: var(--setup-pitch);
  font-weight: var(--ink-weight, 400);   /* the weight the page's ink is drawn in */
  white-space: pre-wrap;
}
/* The guides are the sample: tracing shapes in dark grey, with no ink drawn over them. */
.setup-sample.cue-guides .setup-sample-text { font-family: var(--hand-guides); color: #4A463C; }
.setup-sample:not(.cue-guides) .setup-sample-text { font-family: var(--hand); }
.setup-sample-note {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-family: var(--ui);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  pointer-events: none;
  user-select: none;
}
.setup-hand { width: 100%; max-width: none; margin-bottom: 4px; }
.setup-hand-desc {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.45;
}
.setup-status { margin: 4px 0 0; }
.setup-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 12px 0 4px;
}
.setup-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.setup-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--wax);
  cursor: pointer;
}
.setup-actions { margin-top: 16px; }
/* the sample first, then what it is, then the way into the settings */
.setup-sheet .setup-sample { margin-top: 10px; }
/* each line is one inked row: it never wraps, and qsInkHost.fit shrinks the lot to fit */
.setup-sheet .setup-sample-text {
  font-weight: var(--ink-weight, 400);
  white-space: nowrap;
  font-size: calc(var(--setup-sz) * var(--setup-fit, 1));
}
.setup-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; margin: 8px 0 0;
}
.setup-summary-line { margin: 0; color: var(--text-secondary); }
.setup-tabs {
  display: flex; gap: 2px; margin: 14px 0 0;
  border-bottom: 1px solid var(--sheet-edge);
}
.setup-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 7px 14px 6px;
  font-family: var(--ui); font-size: 13px; color: var(--text-secondary); cursor: pointer;
}
.setup-tab:hover { color: var(--text-primary); }
.setup-tab-on { color: var(--text-primary); border-bottom-color: var(--wax); font-weight: 600; }
.setup-tab:focus-visible { outline: 2px solid var(--laurel); outline-offset: -2px; }
/* one height for every tab, so the sheet doesn't jump as you move between them */
.setup-panel { min-height: 7.5rem; padding: 12px 0 0; }
.setup-panel .setup-checks { margin-top: 2px; }
.setup-panel .setting-label { margin-top: 0; }

/* ═══ onboarding: about you, and the handwriting style ═══ */
.onboarding-about-names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .onboarding-about-names { grid-template-columns: 1fr; } }
.onboarding-field { display: grid; gap: 4px; margin-bottom: 12px; }
.onboarding-field > span {
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary);
}
.onboarding-style-sample {
  margin: 4px 0 2px; padding: 10px 14px;
  font-size: 30px; line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--sheet-edge); border-radius: var(--radius-card);
  overflow-wrap: anywhere;
}
.onboarding-style-group { margin-top: 14px; }
.onboarding-style-label {
  display: block; margin-bottom: 6px;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary);
}
.onboarding-style .option { font-size: 13px; padding: 6px 12px; }
/* The country list reads down a left edge, flags first; the tour's inputs centre their text. */
.onboarding-field select.onboarding-input { text-align: left; text-align-last: left; }

/* ═══ the setup builders' shared parts ═══
   NotebookSetup and GiftPadSetup (the journal and the pad builders) lay out their lead, hints,
   title field, cover swatches, paper options and spacing slider alike. Under both roots, so
   each rule keeps the weight it had as either component's scoped CSS (two classes). */
:is(.notebook-setup, .gift-pad-setup) .notebook-setup-lead {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.8vw, 1.55rem);
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-soft);
}
:is(.notebook-setup, .gift-pad-setup) .notebook-setup-support {
  margin: 0.55rem 0 1.1rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
:is(.notebook-setup, .gift-pad-setup) .notebook-setup-hint {
  margin: 0.2rem 0 0.65rem;
}
:is(.notebook-setup, .gift-pad-setup) .notebook-title {
  width: 100%;
  margin-bottom: 1rem;
  font-family: var(--serif);
}
:is(.notebook-setup, .gift-pad-setup) .notebook-cover-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1rem;
}
:is(.notebook-setup, .gift-pad-setup) .notebook-cover-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.68rem;
}
:is(.notebook-setup, .gift-pad-setup) .notebook-paper-opt {
  min-width: 5.5rem;
}
:is(.notebook-setup, .gift-pad-setup) .notebook-spacing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0.25rem;
}
:is(.notebook-setup, .gift-pad-setup) .notebook-spacing {
  flex: 1;
  min-width: 0;
}
:is(.notebook-setup, .gift-pad-setup) .notebook-spacing-unit {
  font-size: 0.85rem;
  color: var(--text-secondary);
}