/* ──────────────────────────────────────────────────────────────────────
   The notebook itself: the sheet it is written on, the hero, the three
   numbered steps, and the action bar pinned to the foot of the page.
   ────────────────────────────────────────────────────────────────────── */

.sheet {
  position: relative;
  max-width: var(--sheet-max);
  margin: clamp(var(--space-4), 3vw, var(--space-6)) auto var(--space-7);
  padding: clamp(var(--space-5), 4vw, var(--space-7)) clamp(var(--space-4), 4vw, var(--space-6))
           var(--space-6) clamp(var(--space-5), 7vw, 5.5rem);
  /* The action bar floats over the page rather than after it, so the sheet
     buys back the height it covers; without this the colophon hides under
     the Generate button at the end of the scroll. */
  padding-bottom: calc(var(--space-7) + var(--space-6) + env(safe-area-inset-bottom, 0px));
  background-color: var(--paper);
  /* Ruled paper. The lines sit behind the steps and show through the gaps. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule-height) - 1px),
    var(--rule) calc(var(--rule-height) - 1px),
    var(--rule) var(--rule-height)
  );
  background-position: 0 2px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
}

/* Spiral binding holes down the left edge. */
.sheet__binding {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: clamp(16px, 3vw, 30px);
  background:
    linear-gradient(to right, var(--paper-sunk) 0%, transparent 100%),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 20px,
      var(--binding) 20px,
      var(--binding) 21px,
      transparent 21px,
      transparent 52px
    );
  opacity: 0.55;
}

.sheet__binding::after {
  content: '';
  position: absolute;
  inset-block: 14px;
  left: 50%;
  width: 9px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0, var(--desk-3) 0 45%, transparent 46%) repeat-y;
  background-size: 9px 52px;
  opacity: 0.7;
}

/* The classic red margin rule. */
.sheet__margin {
  position: absolute;
  inset-block: 0;
  left: clamp(34px, 5.4vw, 4rem);
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, var(--margin-line) 6%, var(--margin-line) 94%, transparent);
  opacity: 0.45;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hero {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule-strong);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero__lead {
  max-width: 56ch;
  margin-top: var(--space-2);
  font-size: var(--text-md);
  color: var(--ink-2);
}

/* ── Steps ────────────────────────────────────────────────────────── */

/* Three numbered sections read top to bottom. The number is the whole
   navigation model, so every other measurement is derived from it. */
.step {
  --step-num: 34px;
  --step-gap: var(--space-3);

  margin-block: var(--space-7);
  scroll-margin-top: 90px;
}

.step__head {
  display: flex;
  align-items: center;
  gap: var(--step-gap);
  margin-bottom: var(--space-4);
}

/* The one thing that says there is an order to follow. */
.step__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--step-num);
  height: var(--step-num);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1;
  color: var(--paper);
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent-ink) 100%);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}

.step__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
}

.step__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Hung off the number rather than the margin, so a step reads as one
     block instead of a heading with loose content beneath it. */
  padding-left: calc(var(--step-num) + var(--step-gap));
}

/* A hairline carrying on down from the number and fading as the step ends:
   the thread the eye follows from 1 to 2 to 3. */
.step__body::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: calc(var(--step-num) / 2 - 0.5px);
  width: 1px;
  background: linear-gradient(to bottom, var(--rule-strong), transparent 88%);
}

/* ── Sticky action bar ────────────────────────────────────────────── */

/* A sibling of <main>, so `bottom: 0` pins it to the viewport for the whole
   scroll and it settles into the flow at the end of the document. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--border);
  /* The desk is the one surface darker than the paper in both themes, so it
     stands in for cast shadow without reaching for a literal colour. */
  box-shadow: 0 -10px 30px -18px color-mix(in srgb, var(--desk-2) 90%, transparent);
}

.actionbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-6));
  /* Keep the bar clear of an iPhone home indicator. */
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
}

.actionbar__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* ── Colophon ─────────────────────────────────────────────────────── */

.colophon {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-style: italic;
}

/* ── Narrow screens ───────────────────────────────────────────────── */

@media (max-width: 760px) {
  .sheet { padding-left: clamp(var(--space-4), 9vw, 3.5rem); border-radius: var(--radius-md); }
  .sheet__margin { left: clamp(26px, 7vw, 2.4rem); }

  .step { margin-block: var(--space-6); }
  /* The hanging indent costs more than it buys once the column is this
     narrow, and the thread has nothing left to run through. */
  .step__body { padding-left: 0; }
  .step__body::before { display: none; }
}

@media (max-width: 640px) {
  /* Stacked, the bar is about twice as tall, so the sheet owes it more. */
  .sheet { padding-bottom: calc(var(--space-7) * 2 + var(--space-6) + env(safe-area-inset-bottom, 0px)); }

  .actionbar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .actionbar__meta { justify-content: space-between; }
  .actionbar .btn--xl { width: 100%; }
}