/* ==========================================================================
   Launch guide (/docs)
   One contained card: a full-height step rail on the left, one step at a time
   on the right. The card carries a minimum height and pins its controls to the
   bottom, so Next stays put instead of chasing the length of each step.
   Without JavaScript every step is visible as one short document, which is
   also what crawlers and printers get.
   ========================================================================== */

html,body{min-height:100%;background:var(--paper);color:var(--ink)}
/* The design system sets `overflow-x:clip` on body, which computes overflow-y
   to a scroll container. Body is content-sized, so that container never
   scrolls, and every `position:sticky` inside it silently stops working: the
   mobile step controls and the desktop rail both did. `html` already clips the
   horizontal axis, so the viewport keeps doing the scrolling. */
body{overflow:visible}

.launch-guide{width:min(940px,100%);margin-inline:auto;padding-inline:var(--gutter)}

/* --- Page head ---------------------------------------------------------- */

.launch-guide-head{padding:clamp(24px,4vh,40px) 0 0}
.launch-guide-head .wordmark{color:var(--ink)}
.launch-guide-head h1{
  margin:clamp(22px,3.4vh,32px) 0 0;
  font-size:clamp(28px,4.2vw,34px);line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;
}
.launch-guide-lede{margin:11px 0 0;max-width:48ch;color:var(--ink-soft);font-size:15px;line-height:1.6}

/* --- The card ----------------------------------------------------------- */

.launch-guide-card{
  margin-top:clamp(20px,3vh,30px);
  display:grid;grid-template-columns:1fr;overflow:clip;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--paper-lift);box-shadow:var(--shadow-sm);
}

/* --- Step rail ---------------------------------------------------------- */
/* Tinted against the white card so the rail reads as one full-height surface
   rather than a list that stops short. */

.launch-guide-nav{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.launch-guide-nav-inner{padding:16px var(--gutter)}
.launch-guide-nav-list{list-style:none;display:none}
.launch-guide-nav-link{
  position:relative;padding:6px 0;display:grid;grid-template-columns:21px 1fr;align-items:center;gap:11px;
  color:var(--ink-soft);font-size:13.5px;line-height:1.35;text-decoration:none;
  transition:color var(--dur) ease;
}
.launch-guide-nav-link:hover{color:var(--ink)}
.launch-guide-nav-mark{
  position:relative;width:21px;height:21px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:var(--paper-lift);
  color:var(--ink-faint);font-size:10.5px;font-weight:650;font-variant-numeric:tabular-nums;
  /* Border only: interpolating ink to mint passes through a grey that reads
     as disabled for the length of the transition. State snaps. */
  transition:border-color var(--dur) ease;
}
.launch-guide-nav-link:hover .launch-guide-nav-mark{border-color:var(--line-strong)}
.launch-guide-nav-link.is-current{color:var(--ink);font-weight:650}
.launch-guide-nav-link.is-current .launch-guide-nav-mark{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.launch-guide-nav-link.is-done .launch-guide-nav-mark{border-color:transparent;background:var(--mint);color:transparent}
.launch-guide-nav-link.is-done .launch-guide-nav-mark::after{
  content:"";position:absolute;width:3.5px;height:7px;
  border:1.6px solid var(--mint-ink);border-top:0;border-left:0;
  transform:translateY(-1px) rotate(42deg);
}

/* The small-screen stand-in for the rail: the step eyebrow already names the
   position, so this is only the bar. */
.launch-guide-track{height:3px;display:block;overflow:hidden;border-radius:3px;background:var(--paper-sunken)}
.launch-guide-track-fill{
  width:100%;height:100%;display:block;background:var(--mint-deep);
  transform:scaleX(.1667);transform-origin:left;transition:transform .3s var(--ease-out);
}

/* --- Step body ---------------------------------------------------------- */

.launch-guide-body{padding:clamp(22px,3.2vw,32px) var(--gutter) 22px;display:flex;flex-direction:column}
.launch-guide-steps{flex:1}
.launch-guide-step[hidden],.launch-guide-route[hidden]{display:none}
/* Without JavaScript every step is visible, so they need a divider. The
   `:not([hidden])` pair never matches once the script shows one step. */
.launch-guide-step:not([hidden]) + .launch-guide-step:not([hidden]){
  margin-top:34px;padding-top:30px;border-top:1px solid var(--line-soft);
}

.launch-guide-step-eyebrow{
  margin:0 0 9px;color:var(--ink-faint);
  font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;
}
.launch-guide-step h2{
  max-width:24ch;margin:0;
  font-family:var(--serif);font-size:clamp(25px,3vw,30px);font-weight:400;
  line-height:1.15;letter-spacing:-.016em;text-wrap:balance;
}
.launch-guide-step h2:focus{outline:0}
.launch-guide-step h3{margin:22px 0 0;font-size:15px;font-weight:650;letter-spacing:-.005em}
.launch-guide-step :is(p,ol,ul){max-width:62ch;color:var(--ink-soft);font-size:15.5px;line-height:1.65}
.launch-guide-step p{margin:15px 0 0}
.launch-guide-step strong{color:var(--ink);font-weight:650}
.launch-guide-step code{
  padding:1px 5px;border:1px solid var(--line);border-radius:var(--radius-xs);
  background:var(--paper-sunken);color:var(--ink);
  font:600 12.5px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.launch-guide-step a{color:var(--ink);font-weight:650;text-underline-offset:3px}

.launch-guide-list{margin:14px 0 0;padding-left:21px;display:grid;gap:9px}
.launch-guide-list::marker{color:var(--ink-faint)}

/* Fine print, source links, and calm side notes. */
.launch-guide-aside{color:var(--ink-faint)!important;font-size:13.5px!important;line-height:1.6!important}
.launch-guide-aside a{color:var(--ink-soft)!important;font-weight:500}
.launch-guide-aside code{font-size:11.5px!important}

/* The one instruction that protects existing work. */
.launch-guide-warning{margin-top:18px!important;padding-left:14px;border-left:2px solid var(--ink)}

/* --- Route chooser ------------------------------------------------------ */

.launch-guide-choices{margin:20px 0 0;padding:0;border:0}
.launch-guide-choices legend{margin-bottom:9px;padding:0;color:var(--ink);font-size:12.5px;font-weight:650}
.launch-guide-choice{
  padding:10px 12px;display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;
  border-top:1px solid var(--line-soft);cursor:pointer;
  transition:background-color var(--dur) ease;
}
.launch-guide-choice:last-of-type{border-bottom:1px solid var(--line-soft)}
.launch-guide-choice:hover{background:var(--paper)}
.launch-guide-choice:has(input:checked){background:var(--mint-surface-soft)}
.launch-guide-choice input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--mint-deep)}
.launch-guide-choice-text{display:grid;gap:2px}
.launch-guide-choice-title{color:var(--ink);font-size:14.5px;font-weight:650;line-height:1.35}
.launch-guide-choice-note{color:var(--ink-faint);font-size:13px;line-height:1.45}
.launch-guide-choices-hint{min-height:19px;margin-top:13px!important;color:var(--ink-faint)!important;font-size:13px!important}
.launch-guide-choices-hint.is-required{color:var(--ink)!important}
.launch-guide-route-empty{margin-top:20px!important;color:var(--ink-faint)!important}

/* --- Live-site checklist ------------------------------------------------ */

.launch-guide-checklist{margin:18px 0 0;padding:0;list-style:none;display:grid}
.launch-guide-checklist li{border-top:1px solid var(--line-soft)}
.launch-guide-checklist li:last-child{border-bottom:1px solid var(--line-soft)}
.launch-guide-checklist label{
  min-height:40px;padding:9px 2px;display:grid;grid-template-columns:17px 1fr;gap:12px;align-items:center;
  color:var(--ink-soft);font-size:15px;line-height:1.5;cursor:pointer;
}
.launch-guide-checklist input{width:17px;height:17px;accent-color:var(--mint-deep)}
.launch-guide-checklist label:has(input:checked){color:var(--ink-faint)}
.launch-guide-check-count{
  min-height:18px;margin-top:11px!important;color:var(--mint-ink)!important;
  font-size:12.5px!important;font-weight:650!important;font-variant-numeric:tabular-nums;
}

/* --- Troubleshooting ---------------------------------------------------- */
/* Collapsed to a single row, so it costs one line when the checks all pass. */

.launch-guide-fix{margin-top:16px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.launch-guide-fix summary{
  padding:12px 26px 12px 0;position:relative;list-style:none;
  color:var(--ink-soft);font-size:14.5px;font-weight:650;cursor:pointer;
  transition:color var(--dur) ease;
}
.launch-guide-fix summary:hover,.launch-guide-fix[open] summary{color:var(--ink)}
.launch-guide-fix summary::-webkit-details-marker{display:none}
.launch-guide-fix summary::after{
  content:"";position:absolute;right:6px;top:18px;
  width:6px;height:6px;border:1.5px solid var(--ink-faint);border-top:0;border-left:0;
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out);
}
.launch-guide-fix[open] summary::after{transform:rotate(-135deg)}
.launch-guide-fix dl{display:grid;gap:14px;padding-bottom:18px}
.launch-guide-fix dt{color:var(--ink);font-size:14px;font-weight:650;line-height:1.4}
.launch-guide-fix dd{margin:2px 0 0;max-width:62ch;color:var(--ink-faint);font-size:14px;line-height:1.55}
.launch-guide-fix code{font-size:11.5px}

/* --- Closing confirmation ----------------------------------------------- */

.launch-guide-done{
  display:flex;align-items:flex-start;gap:9px;
  color:var(--ink)!important;font-size:16px!important;font-weight:650;
}
.launch-guide-done .tick{margin-top:5px}

/* --- Handoff email ------------------------------------------------------ */

.launch-guide-copy{margin-top:14px}
.launch-guide-template{
  width:100%;margin-top:14px;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--radius-field);
  background:var(--paper);color:var(--ink-soft);
  font:14px/1.6 var(--sans);resize:vertical;overflow:auto;
  /* Three lines, so the box reads as the real email without the step growing
     past the card's floor. `box-sizing` is border-box, and a scroll container
     paints its bottom padding only at the end of the scroll, so the height
     counts the top padding and the borders and nothing else. That puts the cut
     exactly on a line boundary instead of through a row of text. The sentence
     above says what the note asks for, so nothing important hides below. */
  height:calc(3lh + 15px);
}
.launch-guide-template:focus-visible{border-color:var(--line-focus)}
.launch-guide-copy-status{min-height:18px;margin-top:9px!important;color:var(--mint-ink)!important;font-size:12.5px!important;font-weight:650}

/* --- Step controls ------------------------------------------------------ */
/* `margin-top:auto` against the card's minimum height is what keeps Next in
   one place from step to step. */

.launch-guide-controls{
  margin-top:auto;padding-top:20px;
  display:flex;justify-content:space-between;gap:12px;
}
.launch-guide-controls .btn{min-width:104px}
.launch-guide-controls .btn[aria-disabled="true"]{opacity:.45}
.launch-guide-next::after{content:"→";font-size:15px}
.launch-guide-back::before{content:"←";font-size:15px}

/* --- Foot --------------------------------------------------------------- */

.launch-guide-foot{
  margin-top:22px;padding-bottom:40px;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--ink-faint);font-size:13px;line-height:1.6;
}
.launch-guide-foot a{color:var(--ink-soft);text-underline-offset:3px}
.launch-guide-legal{display:flex;gap:18px;flex-wrap:wrap}
.launch-guide-legal a{text-decoration:none}
.launch-guide-legal a:hover{color:var(--ink)}

/* --- Two-column card ---------------------------------------------------- */

@media (min-width:860px){
  .launch-guide-card{
    grid-template-columns:216px minmax(0,1fr);
    /* Every step but the handoff email fits this, so Next stays where it was
       from step to step. A viewport-relative height would undo that on short
       windows, which is worth more than never scrolling the page. */
    min-height:560px;
  }
  .launch-guide-nav{border-bottom:0;border-right:1px solid var(--line-soft)}
  .launch-guide-nav-inner{position:sticky;top:20px;padding:26px 18px}
  .launch-guide-nav-list{display:grid}
  .launch-guide-track{display:none}
  .launch-guide-step-eyebrow{display:none}
  .launch-guide-body{padding:32px 34px 26px}
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width:859px){
  .launch-guide-lede{display:none}
  .launch-guide-template{font-size:16px}
  .launch-guide-controls{
    position:sticky;bottom:0;z-index:2;
    margin-top:26px;padding:14px 0 8px;
    background:linear-gradient(to top,var(--paper-lift) 76%,rgba(255,255,255,0));
  }
  .launch-guide-controls .btn{flex:1;min-width:0}
}

/* --- Print: one continuous document ------------------------------------- */

@media print{
  html,body{background:#fff}
  .launch-guide{width:auto;padding:0}
  .launch-guide-card{display:block;min-height:0;border:0;border-radius:0;box-shadow:none}
  /* Anything that only works by being clicked is noise on paper. */
  .launch-guide-nav,.launch-guide-controls,.skip,
  .launch-guide-copy,.launch-guide-copy-status,.launch-guide-choices-hint,
  .launch-guide-route-empty,.launch-guide-onscreen{display:none}
  /* On paper the box has to hold the whole note, since there is nothing to
     scroll; `field-sizing` fits it exactly and `rows` is the fallback. */
  .launch-guide-template{height:auto;overflow:visible;resize:none;field-sizing:content}
  .launch-guide-body{padding:0}
  .launch-guide-step[hidden],.launch-guide-route[hidden]{display:block!important}
  .launch-guide-step{margin-top:26px}
  .launch-guide-step-eyebrow,.launch-guide-step h2,.launch-guide-step h3{break-after:avoid}
  .launch-guide-list>li,.launch-guide-checklist li,.launch-guide-fix dl>div,
  .launch-guide-choice,.launch-guide-warning{break-inside:avoid}
  .launch-guide-step-eyebrow{display:block}
  /* The script opens the disclosure before printing; these strip the parts
     that only make sense as a control. */
  .launch-guide-fix{border:0;break-inside:auto}
  .launch-guide-fix summary{padding:0;font-size:15px}
  .launch-guide-fix summary::after{display:none}
  .launch-guide-fix dl{margin-top:10px}
}

@media (prefers-reduced-motion:reduce){
  .launch-guide-track-fill,.launch-guide-fix summary::after{transition:none}
}

@media (prefers-contrast:more){
  .launch-guide-nav,.launch-guide-choice,.launch-guide-checklist li,
  .launch-guide-fix{border-color:var(--line)}
}