/* ==========================================================================
   mcprush — checkout.css

   The shape every shop uses, because it answers the two questions a buyer has
   in the order they have them: what am I getting (right, and it stays on
   screen while they work), and how do I pay for it (left, and it is the only
   thing that scrolls). Everything that used to be a numbered essay on this
   page is now a line in the order card or a sentence under a form heading.
   ========================================================================== */

.co-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 0 40px;
  align-items: start;
  padding-block: 8px 64px;
}
.co-page > * { min-width: 0; }

/* ---------- the form column -----------------------------------------------
   The masthead is a child of the page rather than of the form, so that one
   column can put the name of the thing being bought above the order card
   without moving the order card away from the top of the rail. */
.co-mast { grid-column: 1; padding-bottom: 24px; }
.co-form { grid-column: 1; }
.co-summary { grid-column: 2; grid-row: 1 / span 2; }
.co-mast h1 { margin-top: 12px; }
.co-mast .lead { margin-top: 10px; max-width: 62ch; }

.co-form { display: grid; gap: 16px; }
.co-step {
  border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface);
  padding: 22px 24px;
}
.co-step > .spec { display: block; }
.co-step h2 { margin-top: 10px; font-size: 16.5px; letter-spacing: -.018em; }
.co-step > p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 68ch; }
.co-step .db-el-band { margin-top: 16px; }
.co-step .db-el { border-top-left-radius: 0; border-top-right-radius: 0; }

/* the card already on the account is a row, not a form */
.co-card-on {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--surface-2);
}
.co-card-on b { font-size: 14px; }

.co-clients { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.co-client {
  display: inline-flex; align-items: center; gap: 6px;
  height: 29px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface-2); font-size: 12.5px; color: var(--ink-2);
}
.co-client svg { width: 13px; height: 13px; color: var(--accent); }

/* the one button on the page that charges anything */
.co-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.co-go .btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.co-go .small { max-width: 46ch; }
/* the terminal alternative is a button rather than a word inside a sentence:
   an inline link is 22px tall, which is a target a thumb misses */
.co-alt {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
}
.co-alt .small { flex: 1 1 260px; min-width: 0; }
.co-alt .btn { flex: none; }

/* ---------- the order card ------------------------------------------------
   Sticky: the reader is filling a form on the left, and the answer to "what am
   I paying for" must not leave the screen while they do it. */
.co-summary { position: sticky; top: calc(var(--nav-h) + 16px); }
.co-ordercard { overflow: hidden; }

.co-items { border-top: 1px solid var(--line); }
.co-item {
  display: flex; align-items: flex-start; gap: 11px;
  /* wrap, so a row that carries a trial switch can put it on its own line
     rather than squeezing the name and the price into two narrow columns */
  flex-wrap: wrap;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.co-item:last-child { border-bottom: 0; }
.co-item > .tile { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; flex: none; }
.co-item-main { flex: 1 1 auto; min-width: 0; }
.co-item-n { font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; }
.co-item-n:hover { color: var(--accent); }
.co-item-s { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.co-item-m { flex: none; text-align: right; }
.co-item-m .v { font: 500 13.5px/1.2 var(--mono); }
.co-item-m .v small { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.co-item-m .s { margin-top: 3px; font-size: 12px; color: var(--ink-3); }
/* the tick that takes a line out of the order is the only control in the card,
   and the box itself is 20px. The label carries the target: 38 square, which is
   what core.css gives every other .check on the phone, pulled back into the
   row's own padding so nothing moves to pay for it. */
.co-item-x {
  flex: none; align-self: center;
  width: 38px; min-height: 38px; padding: 0;
  justify-content: center;
  margin: -4px -10px -4px -8px;
}
/* an unticked line stays legible — it is still part of the decision, and
   hiding the price they are choosing not to pay would hide the choice */
.co-item.off { opacity: .5; }
.co-item.off .co-item-m .v { text-decoration: line-through; text-decoration-color: var(--line-2); }
.co-item.own { background: var(--surface-2); }

.co-state {
  display: inline-block;
  font: 500 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3);
}
.co-state[data-s="owned"]   { color: var(--accent); }
.co-state[data-s="sub"]     { color: var(--ink-2); }
.co-state[data-s="metered"] { color: var(--warn); }
.co-state[data-s="once"]    { color: var(--ink-2); }

.co-totals { padding: 14px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }
.co-t {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0; font-size: 13px; color: var(--ink-2);
}
.co-t i { display: block; font-style: normal; font-size: 12px; margin-top: 2px; }
.co-t .mono { font-size: 13px; color: var(--ink); flex: none; }
.co-t.tot {
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 14.5px; color: var(--ink);
}
.co-t.tot .mono { font-size: 17px; letter-spacing: -.02em; }

.co-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface-2); margin-bottom: 16px;
}
/* the heading of the picker screen, drawn as the bold line it replaces — see
   the note in checkout.js. Inline, so it sits in the alert exactly where a <b>
   did; `font: inherit` because a heading's own size has no business here. */
.co-alert-h { display: inline; font: inherit; font-weight: 600; margin: 0; letter-spacing: inherit; }
.co-alert .ic { flex: none; color: var(--ink-2); margin-top: 1px; }
.co-alert .ic svg { width: 17px; height: 17px; }
.co-alert > div { min-width: 0; }
.co-alert.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.co-alert.warn .ic { color: var(--warn); }
.co-alert.ok { border-color: var(--accent-line); background: var(--accent-soft); align-items: center; }
.co-alert.ok .ic { color: var(--accent); }
.co-alert.quiet { background: var(--surface); }
.co-alert .btn { flex: none; margin-left: auto; }

/* ---------- the unknown-stack picker ---------------------------------------
   Two columns is a 150px measure on a phone: the name ladders to four lines
   and the price lands on top of it. One column below 620. */
.co-pick { margin-bottom: 40px; }
.co-picklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 20px; }
.co-pickitem {
  display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
  border-top: 1px dashed var(--line);
}
.co-pickitem:hover b { color: var(--accent); }
.co-pickitem > .grow { min-width: 0; }
.co-pickitem > .mono { flex: none; white-space: nowrap; }
.co-pickitem b { font-size: 14px; font-weight: 600; display: block; }
.co-pickitem i { font-style: normal; font-size: 12.5px; color: var(--ink-3); display: block; margin-top: 3px; }

/* ---------- the figure rows the receipt reads back ------------------------- */
.co-figrows { display: grid; }
.co-figrow {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0; border-top: 1px dashed var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.co-figrow:first-child { border-top: 0; padding-top: 0; }
.co-figrow > .grow { min-width: 0; }
.co-figrow .mono { flex: none; font-size: 13px; color: var(--ink); }
.co-figrow i { font-style: normal; }

/* ---------- 05 the receipt -------------------------------------------------- */
.co-receipt { padding: 28px 0 64px; }
.co-rechead { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.co-rechead h1 { margin-top: 10px; }
.co-rechead .lead { margin-top: 10px; max-width: 76ch; }
.co-undo { display: grid; gap: 14px; }
.co-undo li { display: flex; gap: 14px; align-items: flex-start; }
.co-undo .n { font: 500 12px/1.5 var(--mono); color: var(--ink-3); flex: none; padding-top: 1px; }
.co-undo p { font-size: 13.5px; color: var(--ink-2); max-width: 92ch; }
.co-recfoot { gap: 10px; align-items: center; margin-top: 20px; }
.co-recfoot .small { margin-left: 4px; }

/* ==========================================================================
   Narrower. The money column is the last thing to move: a price that has
   left the row it belongs to is worse than a long page.
   ========================================================================== */

/* ---------- responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .co-page { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* One column, three blocks, in the order the questions are asked: what is
     this (the masthead), what is in it and what does it cost (the order), and
     only then how to pay for it. The order card ahead of the forms is the
     point — a reader who has scrolled to a payment form and cannot see what
     it is for has been asked to pay on trust — but ahead of the title it is
     a list of prices for something unnamed. */
  .co-mast, .co-form, .co-summary { grid-column: auto; grid-row: auto; }
  .co-mast { order: -2; padding-bottom: 0; }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 620px) {
  .co-step { padding: 17px 16px; }
  .co-go { gap: 10px; }
  /* The one control on this page that charges anything, and the only one that
     deviates from core.css's ladder: 46 is .btn-lg, and it is written .btn-lg
     precisely so it is the biggest thing on the screen. Everything under it —
     the terminal alternative, the card row, the alert's action — is a .btn-sm
     and stays at core's 34, so the step down from the confirm is visible
     rather than a two-pixel difference nobody can name. */
  .co-go .btn-lg { width: 100%; }
  .co-alt .btn { width: 100%; }
  .co-item { padding: 12px 14px; }
  .co-totals { padding: 13px 14px; }
  .co-card-on .btn { flex: 1 1 auto; }
  /* an alert with a button in it is two lines and a 100px button in a 288px
     row; the text ladders unless the button takes its own line */
  .co-alert { flex-wrap: wrap; }
  /* basis 0, or the sentence claims its max-content, does not fit beside the
     17px icon and pushes the icon onto a line of its own above the heading it
     marks. At 0 the two stay on one line and the button takes the second. */
  .co-alert > div { flex: 1 1 0; }
  .co-alert .btn { margin-left: 0; width: 100%; }
  /* Six client names on four rows at 320px is 137px spent naming the thing the
     sentence above them has already counted. Same treatment as the picker on
     the receipt: one line, scrolled sideways, and the name cut off at the right
     edge is what says the list carries on. */
  /* .co-step is a plain block inside a grid column, so it takes its width from
     its widest child rather than from the column — and the sideways scroller
     below is exactly the kind of child that has no natural width to give. It
     was making the whole page scroll horizontally on a phone. */
  .co-step, .co-form > *, .co-page > * { min-width: 0; }
  .co-clients {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 16px;
    /* a scroller cannot shrink below its content unless it is told it may */
    min-width: 0; max-width: 100%;
  }
  .co-clients::-webkit-scrollbar { display: none; }
  .co-client { flex: none; }
  .co-picklist { grid-template-columns: minmax(0, 1fr); }
  /* .card-head is a nowrap flex row, which at 320 leaves the mono label a 58px
     column: "START / USING / IT" over three lines beside a four-word measure.
     Wrapped, the label is one line and the sentence beside it is two. */
  .co-pick .card-head,
  .co-receipt .card-head,
  .co-ordercard .card-head { flex-wrap: wrap; row-gap: 6px; }
  .co-pick .card-head .btn { width: 100%; }
  /* the publisher block ends in two buttons that wrap into the bottom band the
     role switcher is fixed over; stacked, the primary one clears it */
  .co-acts .btn { width: 100%; }
}

/* ---------- after it is paid for ------------------------------------------
   The receipt's most-used block: one card a part, with the command that
   installs it and the two links a reader wants next. A buyer who has just
   paid is not looking for a summary of what they paid — they are looking for
   what to run. */
.co-use { display: grid; gap: 12px; }
/* min-width:0 on the grid child, or the longest command in the block sets the
   width of the whole page: a client entry is a 700px line of JSON, and a grid
   item defaults to the min-content of what is inside it. The command scrolls
   inside its own .code box instead, which is the right container for it —
   an install is read one at a time, not compared across rows. */
.co-use > *, .co-usei { min-width: 0; }
.co-usei {
  border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--surface-2); padding: 13px 14px;
}
.co-usei-h { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.co-usei-h .tile { width: 28px; height: 28px; font-size: 11px; border-radius: 7px; flex: none; }
.co-usei-h > .grow { min-width: 0; }
.co-usei-h b { font-size: 14px; }
.co-usei .code { margin: 0; }
.co-usei-acts { gap: 8px; margin-top: 11px; }
@media (max-width: 620px) {
  .co-usei-acts .btn { flex: 1 1 140px; }
}
/* the login block leads the list and is not one of the parts, so it is marked
   as the step before them rather than as another item */
.co-usei-first { background: var(--surface); border-color: var(--line-2); }
.co-usei-first .tile { background: var(--ink); color: var(--paper); }
.co-usei-first .tile svg { width: 14px; height: 14px; }

/* the client picker on the receipt: where is this going */
.co-clientbar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px 0;
}
.co-clbtn {
  height: 34px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); color: var(--ink-2);
  font: 500 12.5px/1 var(--sans); cursor: pointer; transition: .12s;
}
.co-clbtn:hover { border-color: var(--line-2); color: var(--ink); }
.co-clbtn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.co-usei-how { margin-bottom: 10px; max-width: 74ch; }
.co-usei-how code { font-size: 12px; }
.co-usei .code { white-space: pre; overflow-x: auto; }
@media (max-width: 620px) {
  /* the picker is the one decision left on a receipt, so it gets a thumb: 34,
     which is the size core.css gives .seg button and a.tag — the two other
     things on this site that are a strip of choices rather than a command */
  .co-clbtn { height: 34px; padding: 0 11px; }
  /* Six client names wrapped to three rows at 320px and two at 390 — 130px of
     buttons above the command they change. One line that scrolls sideways is
     the shape the rest of the site uses for a strip that does not fit, and the
     half-visible next name is what says there are more of them. */
  .co-clientbar {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-right: 16px;
  }
  .co-clientbar::-webkit-scrollbar { display: none; }
  .co-clbtn { flex: none; }
  /* a sideways scroller inside a 250px card hides the end of the command under
     the copy button that sits over its right edge. Nobody retypes a client
     entry from a phone — they press copy — so the command wraps here and is
     read whole instead. .code.soft in core.css is the same treatment. */
  .co-usei .code { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; padding-right: 54px; }
}

/* the one call to action on a receipt: the instructions are read here and run
   somewhere else often enough that it earns a band rather than a link */
.co-mailcta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 16px; padding: 16px 18px;
  border: 1px solid var(--accent-line); border-radius: var(--r2);
  background: var(--accent-soft);
}
.co-mailcta b { font-size: 14.5px; }
.co-mailcta p { max-width: 66ch; }
.co-mailcta .btn { flex: none; }
@media (max-width: 620px) {
  .co-mailcta { gap: 12px; padding: 14px; }
  .co-mailcta .btn { width: 100%; }
}

/* ---------- paying from the balance ---------------------------------------
   Two rows, one radio each, and the option only exists when the balance covers
   the whole charge — so this is a choice between two complete answers rather
   than a form that has to be reconciled. The selected one takes the accent
   border it would have taken as a card, because that is what the reader is
   choosing between: not a discount, a different source of the same money. */
.co-pay-pick { display: grid; gap: 8px; margin-top: 12px; }
.co-pay-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line-2); border-radius: var(--r2);
  background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s;
}
.co-pay-opt:hover { border-color: var(--ink-3); }
.co-pay-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.co-pay-opt input {
  appearance: none; width: 15px; height: 15px; flex: none; margin-top: 2px;
  border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface);
}
.co-pay-opt input:checked { border-color: var(--accent); box-shadow: inset 0 0 0 3.5px var(--accent); }
.co-pay-opt b { display: block; font-size: 13.5px; }
.co-pay-opt .small { display: block; margin-top: 3px; }


/* ---------- the trial switch on an order row --------------------------------
   Two buttons, the width of the row, under the price. Not a .seg: a seg is a
   filter and this is a choice that changes what the invoice says, so it reads
   as two options rather than as a toolbar. Full width on the row because at
   320px the two labels are the longest thing in the card. */
.co-trial {
  /* the row is flex, not grid: a full-width basis is what puts this under the
     price instead of beside it */
  flex: 1 1 100%; display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.co-trial button {
  flex: 1 1 auto; padding: 7px 11px; border-radius: var(--r1);
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.co-trial button:hover { border-color: var(--ink-3); color: var(--ink); }
.co-trial button.on {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink);
}
.co-item.off .co-trial { opacity: .5; pointer-events: none; }