/* MakeMe website, flow and prose pages (Atelier, October 2026).
   Loaded after style.css on sign-in, plan, done, account, 404, support,
   privacy and terms. Only what style.css does not already cover.

   1. The flow sheet: .panel.sheet
   2. Plan page extras
   3. Done and account inside the sheet
   4. 404
   5. Prose pages under the shared header and footer */

/* ===========================================================================
   1. The flow sheet
   ===========================================================================
   main.band.flow > .inner > ol.rail + div.panel.sheet

   On a wide screen the panel sits on a cream sheet at radius 24, like a
   sheet in the app. Everything that was cream inside it (fields, code boxes,
   the Google door, the unchosen plan card, the address box) turns canvas so
   nothing sits cream on cream. On a phone the sheet is the screen: no fill,
   no padding, and the controls keep their cream. */

@media (min-width: 641px) {
  .flow { padding-top: clamp(40px, 6vw, 80px); padding-bottom: 120px; }

  .panel.sheet {
    max-width: 32rem;
    padding: 40px 44px 36px;
    border-radius: var(--r-card);
    background: var(--surface);
  }
  .panel.sheet.guide { max-width: 38rem; }
  .rail:has(+ .panel.sheet) { max-width: 32rem; }
  .rail:has(+ .panel.sheet.guide) { max-width: 38rem; }

  .sheet .field input,
  .sheet .code input,
  .sheet .btn-door,
  .sheet .btn-secondary,
  .sheet .guide-url {
    background: var(--canvas);
  }
  .sheet .btn-door:hover,
  .sheet .btn-secondary:hover { background: var(--paper); }
  .sheet .code input:focus { background: var(--paper); }

  .sheet .choice { background: var(--canvas); }
  .sheet .choice.on,
  .sheet .choice:has(input:checked) { background: var(--paper); }

  /* The iPhone notice reads as a quiet line inside the sheet, not a card. */
  .sheet .notice {
    padding: 0 0 18px;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid var(--hairline);
  }
}

/* The page title in a sheet: New York, the app's title size. */
.sheet h1 { margin-bottom: 8px; }

/* The Google door: Google's "G" and words, centered. */
.btn-door .g-mark { margin-right: 2px; }

/* "Not you? Log out" and the switch line sit together under the form. */
.sheet .panel-foot { margin-top: 20px; }

/* ===========================================================================
   2. Plan page extras
   =========================================================================== */

/* The fine print on /plan sits between the total and the button. */
.summary .fine a { color: var(--ink-2); }

/* ===========================================================================
   3. Done and account inside the sheet
   =========================================================================== */

.guide .sub { margin-bottom: 16px; }
.guide .step .done-badge { margin-top: 14px; }
.guide .step .how strong { color: var(--ink); font-weight: 600; }

/* The words she taps in the app, set in ink so they stand out from the
   instructions around them. */
.ui { font-weight: 600; color: var(--ink); }

.acct-rows:first-of-type { margin-top: 4px; }

/* ===========================================================================
   4. 404
   =========================================================================== */

.lost { text-align: center; }
.lost h1 { font-size: clamp(32px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.lost .sub { margin-left: auto; margin-right: auto; max-width: 24rem; }
.lost .lost-actions { display: grid; gap: 10px; margin-top: 8px; }

/* ===========================================================================
   5. Prose pages under the shared header and footer
   =========================================================================== */

.prose { padding-top: clamp(40px, 7vw, 88px); }
.prose > header { padding-bottom: 28px; border-bottom: 1px solid var(--hairline); }
.prose > header h1 { margin-bottom: 14px; }
.prose a { color: var(--rose); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose .toc a { color: var(--ink-2); }
.prose .toc a:hover { color: var(--ink); }
.prose h2 { letter-spacing: -0.01em; }
.prose strong { font-weight: 600; color: var(--ink); }


/* ===========================================================================
   Phones: the plan's button stays in reach
   ===========================================================================
   The renewal terms and the iPhone notice stay before it in the page; on a
   short screen the button rides at the foot of the window until the page
   reaches its own place, over a canvas halo so the words behind it fade. */
@media (max-width: 767px) {
  #plan-form #checkout {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2;
    box-shadow: 0 -16px 24px 8px var(--canvas);
  }
}
@media (min-width: 641px) and (max-width: 767px) {
  #plan-form #checkout { box-shadow: 0 -16px 24px 8px var(--surface); }
}