/* ============================================================================
   UNIÓN , the CHECKOUT page's own layout. LAYOUT ONLY, IN TOKENS ONLY.

   The flow is four steps on one page, one showing at a time, held in the URL
   hash by js/checkout.js. Each step is a .s fold with its own ground, so
   walking the flow is also walking a change of ground, which is what makes a
   step feel like a step rather than a tab.

   Nothing here changes how a component looks. The queue, the basket, the form,
   the modal and the confirmation ticket arrive with their appearance fixed.
   ============================================================================ */

/* ---------------------------------------------------------- THE PRE STATE ---
   The closed checkout. One headline, one reason, one action, and the facts
   beside it so the page still tells you what the day IS while it tells you
   there is nothing to buy.
   ---------------------------------------------------------------------------- */
.ck-shut{display:grid;gap:var(--s7) var(--s8);
  grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);align-items:start}
.ck-shut .s__lead{max-width:44ch}
.ck-shut__acts{display:flex;flex-wrap:wrap;gap:var(--s4)}
.ck-shut__side{min-width:0;padding-top:var(--s8)}
.ck-shut__facts{margin:0;border-top:var(--rule-heavy) solid currentColor}
.ck-shut__facts > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:var(--s4);padding:var(--s4) 0;
  border-bottom:var(--rule) solid currentColor}
.ck-shut__facts dt{margin:0;font:700 var(--size-micro)/1.35 var(--font);
  text-transform:uppercase;letter-spacing:.14em}
.ck-shut__facts dd{margin:0;font:900 var(--size-small)/1.3 var(--font);
  font-stretch:var(--wdth-condensed);text-transform:uppercase}

/* ------------------------------------------------------------- THE RAIL -----
   Where you are. Present above every step, and it is chrome rather than a fold
   of its own: a short band, the named steps on the left, the fill on the right.
   ---------------------------------------------------------------------------- */
.ck-h{margin-bottom:var(--s6)}
.ck-rail{display:grid;gap:var(--s5) var(--s8);
  grid-template-columns:minmax(0,1.6fr) minmax(240px,.6fr);align-items:end}
.ck-rail__steps{min-width:0}
.ck-rail__prog{min-width:0;justify-self:end;width:100%;max-width:420px}

/* -------------------------------------------------------------- THE STEPS ---
   A step's heading takes focus when the step opens, so it carries tabindex="-1"
   and must show a ring when it is focused that way. The ring is the system's
   own focus token; nothing new is drawn.
   ---------------------------------------------------------------------------- */
.ck-step[hidden]{display:none}
.ck-step__h:focus-visible{outline:var(--focus-width) solid var(--focus-colour);
  outline-offset:var(--focus-offset)}

.ck-note{margin:0;max-width:44ch;font-size:var(--size-small);line-height:1.5}
.ck-acts{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5)}
.ck-go{justify-self:start}

/* ---- step one, the queue. The waiting room is the wide element and the note
   beside it is narrow: the queue is what you are looking at. */
/* MEASURED, this pass. At 1440 the side column ran 191px against a 434px queue
   and was pinned to the top of it, so the fold carried a dead half-column of
   black down its right side under the note. Centring the side against the
   queue block puts the note and the one action level with the count they are
   about, and the padding-top that was offsetting it goes with it. */
.ck-queue{display:grid;gap:var(--s6) var(--s8);
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.65fr);align-items:center}
.ck-queue__main{min-width:0}
.ck-queue__side{min-width:0;display:grid;gap:var(--s5);
  align-content:center;justify-items:start}

/* ---- step two, the basket. The receipt leads, the actions follow it down the
   narrow column, offset so the two are not a matched pair. */
.ck-basket{display:grid;gap:var(--s6) var(--s8);
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);align-items:start}
.ck-basket > *{min-width:0}
.ck-basket__side{padding-top:var(--s6)}

/* ---- step three, the details. The form is the wide one; the terms sit beside
   it because agreeing is part of filling it in, not a separate errand. */
.ck-details{display:grid;gap:var(--s6) var(--s8);
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);align-items:start}
.ck-details > *{min-width:0}
.ck-details__terms{display:grid;gap:var(--s5);align-content:start}

/* ---- step four, the confirmation. The ticket is the whole point of the page,
   so it takes the width and the note sits under the fold's quiet side. */
/* MEASURED, second pass. At 1.4fr the ticket column ran to about 800px while
   .t-conf's own content (a barcode zone capped at 420px and two wallet buttons)
   filled roughly 340px of it, leaving a wide dead band between the ticket and
   the note beside it. Bringing the columns closer to level puts the note beside
   the ticket rather than across a gap. */
.ck-confirm{display:grid;gap:var(--s6) var(--s8);
  grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);align-items:start}
.ck-confirm > *{min-width:0}
.ck-confirm__side{padding-top:var(--s7)}

/* ================================================================== 1024 ==== */
@media (max-width:1024px){
  .ck-shut,.ck-rail,.ck-queue,.ck-basket,.ck-details,.ck-confirm{
    grid-template-columns:minmax(0,1fr)}
  .ck-shut__side,.ck-queue__side,.ck-basket__side,.ck-confirm__side{padding-top:0}
  .ck-rail__prog{justify-self:start}
}

/* ================================================================== 640 =====
   THE PHONE IS ITS OWN LAYOUT. A step is one column with one action at the
   bottom of it, full width and a thumb pad tall, because on a phone a checkout
   is a stack of single decisions. The rail becomes the named step and the fill,
   stacked, so the person always knows which of four they are on without
   scrolling back up.
   ============================================================================ */
@media (max-width:640px){
  .ck-shut,.ck-queue,.ck-basket,.ck-details,.ck-confirm{gap:var(--s6)}
  .ck-rail{gap:var(--s4)}
  .ck-note{max-width:none}
  .ck-acts{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .ck-acts > *{width:100%;justify-content:space-between}
  .ck-go{justify-self:stretch;width:100%;justify-content:space-between}
  .ck-queue__side{justify-items:stretch}
  .ck-shut__acts{flex-direction:column;align-items:stretch}
  .ck-shut__acts > *{width:100%;justify-content:space-between}
  .ck-shut__facts > div{grid-template-columns:minmax(0,1fr)}
}