/* Journey pages (/ai-skills-for-business/paid, pending, refund, feedback) and the two server
   shells in the same flow (mock checkout, recovery landing): calm post-purchase admin in the
   website sub-style. Composes components.css; this file only sets the page rhythm and a few
   small details. */

@layer sm.page {
  /* One left edge: every journey page reads in the 42rem column, so the masthead and footer line up with it. */
  .sm-root > .sm-masthead { padding-inline: max(var(--rs-gutter), (100% - var(--rs-width-reading)) / 2); }

  /* Rhythm: admin pages are short, so bands sit closer than on the marketing pages. */
  .journey > .sm-band { padding-block: var(--rs-space-7); }
  .journey > .journey-joined { padding-block-start: 0; }   /* continues the band above it (only ever shown with it) */
  .journey-hero { padding-block: var(--rs-space-8) var(--rs-space-7); }
  .journey-hero :is(h1, .sm-hero__title) { font-size: var(--rs-step-4); max-inline-size: 18ch; }

  /* The last word on every journey page: a quiet support line before the footer. It takes a
     hairline only when it follows the cream hero (paid, while access is checked); after a tint
     band the colour change is the edge, and a rule on top of it would frame one line twice. */
  .journey-help { border-block-start: var(--rs-border) solid var(--rs-rule); }
  .journey:has(> .sm-band--tint:not([hidden])) > .journey-help { border-block-start: 0; }

  /* When access is denied on /paid the recovery form appears, and the message above it is a
     warning, not reassurance. (Refund and feedback have no markup-level signal for "denied";
     offer-journey.js would need to set a tone there.) */
  .journey:has(> [data-recovery-when-denied]:not([hidden])) [data-journey-message] {
    --rs-notice-color: var(--rs-warn-text);
    --rs-notice-tint: var(--rs-warn-tint);
  }

  /* Purchase reference: a reference number, easy to read out to support. */
  .journey-ref:not(:empty) {
    padding: 0.1em 0.45em;
    border: var(--rs-border) solid var(--rs-rule-strong);
    border-radius: var(--rs-radius-s);
    background: var(--rs-card);
    color: var(--rs-ink);
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  /* ── Paid page: where things are (offer-journey.js sets data-state from the journey stage) ── */
  .journey-progress li:not([data-state="done"]) .sm-icon { display: none; }   /* a tick only on finished steps */
  .journey-progress .sm-progress__label { align-items: start; }
  .journey-progress .sm-progress__label > .sm-icon { margin-block-start: 0.2em; }   /* the tick stays on the first line when "Time confirmed" wraps */
  /* Phones: five columns are too narrow for "Time confirmed" and a tick, so the same bars stack
     into a short list, one step per row, each bar in front of its label. */
  @media (max-width: 39.99rem) {
    .journey-progress { flex-direction: column; gap: var(--rs-space-2); }
    .journey-progress li { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; column-gap: var(--rs-space-3); font-size: var(--rs-step-0); }
  }
  .journey-stage__block { display: grid; gap: var(--rs-space-3); }
  .journey-stage__block > p { max-inline-size: var(--rs-measure); }
  .journey-stage__block time { white-space: normal; }
  :is(.journey-stage__block, .journey-help, .journey-shortcut, .journey-after) a:not(.sm-btn, .sm-link-action) { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); overflow-wrap: anywhere; }
  /* Inline links a thumb must hit (the email line, "Ask for a refund"): a 44px hit area that
     doesn't move the line, as on the offer pages. */
  :is(.journey-stage__block, .journey-help, .journey-shortcut) a:not(.sm-btn, .sm-link-action) { position: relative; padding-block: calc((var(--rs-target) - 1.2em) / 2); }
  .journey-tasks { padding-block-start: 0; }
  @media (max-width: 24rem) { .journey-tasks .sm-tasks > li { padding-inline: var(--rs-space-3); column-gap: var(--rs-space-3); } }   /* smallest phones and large text: the words get the width */
  /* Moving or cancelling is over once we've met (offer-journey.js sets the stage on body), and so
     are the tasks: answers and times are read-only then, so the whole band goes. */
  body:is([data-journey-stage="session_held"], [data-journey-stage="done"]) :is([data-before-session], .journey-tasks) { display: none; }
  /* Paid: "Find a time" sits with the stage's heading, so the task list doesn't repeat it. Time
     confirmed: the scheduler gives way to one line (a new time goes by reply to our email). */
  body[data-journey-stage="paid"] [data-capability-step="schedule"] { display: none; }
  body:not([data-journey-stage="time_confirmed"]) [data-capability-step] > [data-task-line="confirmed"],
  body[data-journey-stage="time_confirmed"] [data-capability-step="schedule"] > :is([data-task-line="pending"], [data-task-line="submitted"], .sm-btn) { display: none; }

  /* Each task holds both of its lines; the script's data-capability-state picks one. */
  [data-capability-step]:not([data-capability-state="submitted"]) > [data-task-line="submitted"],
  [data-capability-step][data-capability-state="submitted"] > [data-task-line="pending"] { display: none; }
  /* The stage's one thing to do (the script marks its task) is the page's filled button; the other stays quiet. */
  .sm-tasks > li[data-stage-action] > .sm-btn { --rs-btn-bg: var(--rs-cta-bg); --rs-btn-fg: var(--rs-cta-fg); --rs-btn-hover: var(--rs-cta-hover); --rs-btn-border: var(--rs-cta-border); }

  /* A saved form says so under its fields, until Edit is tapped. */
  form:not([data-capability-submitted="true"]) > [data-saved-note], form[data-capability-editing="true"] > [data-saved-note] { display: none; }
  .journey-saved-note { color: var(--rs-fg-2); max-inline-size: var(--rs-measure); }
  /* A saved answer is the buyer's record of what they sent: Chrome fades a disabled select to 70%,
     which drops it to about 3:1, so it keeps the field's own read-only colours. */
  :is(.journey, .sm-dialog) select.sm-input:disabled { opacity: 1; }

  /* The paid dialogs open on their title (autofocus), so Safari starts at the top, not at the
     first box with the keyboard up. The title isn't a control, so it shows no ring. */
  .sm-dialog h2[tabindex="-1"]:focus { outline: none; }
  /* Large text on a small phone: "America/Edmonton" and long labels wrap instead of pushing the dialog wide. */
  :is(#dialog-paid-schedule, #dialog-paid-preparation) :is(.sm-field__help, label) { overflow-wrap: anywhere; }

  /* Mock checkout: the "alternative options" form is a second group, set apart from the main
     test path so its label reads with the buttons below it, not the ones above. */
  .journey .sm-card > .sm-form + .sm-form { margin-block-start: var(--rs-space-3); }
}