/*
 * THE CHECKOUT'S TERMS POP-UP — W80 (Ryan, 2026-09-03).
 *
 * Served as a static asset and pulled in by `<CheckoutTermsStyles>` rather than
 * `import`ed, for the reason given at the top of chrome.css: a bundled import
 * attaches the chunk to the shared `[brand]` layout segment and Next then emits
 * a <link> to it on every brand's every page.
 *
 * Class prefix `sf-ckterms-`.
 *
 * ═══ THE FRAME IS NOT HERE, AND THAT IS THE STANDING RULE ═══
 *
 * The `<dialog>` reset, the scrim's wash and its 15px phone inset, the panel's
 * ground / radius / shadow / column, the 8px rise, the close cross, the header
 * row, the scrolling content row and its two scroll cues, and the footer band
 * are ALL `public/storefront/modal.css`'s (Ryan, 2026-09-02: "when I say modal
 * or popup, let's reuse this shared component"). Every element wears two
 * classes — `sf-modal__panel` AND `sf-ckterms__panel` — so the shell's rules
 * cannot lose a cascade race to a second declaration here; there is no second
 * declaration here.
 *
 * WHAT IS THIS POP-UP'S OWN: its width, and the typography of a legal document.
 *
 * ═══ THE WIDTH: 720 ═══
 *
 * Between the delivery timeline's 780 and the ball modal's 520, and it is a
 * MEASURE decision rather than a size one. This panel is the only pop-up on the
 * storefront that holds thousands of words of continuous prose, so what sets
 * the number is line length: at 720 with the 36px inset either side and the
 * ordered list's own indent, a point runs at roughly 85 characters, which is
 * the top of the range typography holds readable and is what the legal pages'
 * own `.legal` measure lands at. 780 would push it past 90; 520 would make a
 * fourteen-point contract four screens longer than it needs to be.
 */

/* ------------------------------------------------------------- the frame -- */

/* The one number that is this pop-up's — see the header. */
.sf-ckterms__panel {
  width: 720px;
}

/* ------------------------------------------------------------- the body -- */

/*
 * The inset is the shell's own 36 (the delivery timeline's, which is the
 * reference), with the bottom left to the footer band so the two do not add up
 * to double air above the accept button.
 */
.sf-ckterms__body {
  padding: 26px 36px 0;
}

/*
 * globals.css styles every h1-h3 with the heading face at weight 500, a -0.015em
 * track, 1.12 leading and `text-wrap: balance`. All five are restated, which is
 * what every heading on this storefront does — `wrap` is the initial value and
 * is what turns the balancing off, spelled `wrap` rather than `normal` because
 * `normal` is `white-space`'s keyword and is dropped at parse time (the
 * site-wide defect found 2026-08-26).
 *
 * IT IS DRAWN, NOT CLIPPED, even though the header row above already carries
 * the same words: the header is `aria-hidden` chrome that stays put while the
 * document scrolls, and this is the document's own title at the top of the
 * document. It is what `labelledBy` points at.
 */
.sf-ckterms__title {
  color: var(--brand-color-ink, #17181a);
  font-family: var(--brand-font-heading, system-ui, sans-serif);
  font-size: var(--text-product);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 0 0 14px;
  text-wrap: wrap;
}

/*
 * LEGAL PROSE IS SET SMALLER AND LOOSER THAN BODY COPY, deliberately: the
 * platform's `--text-small` with 1.65 leading is the same treatment
 * `globals.css` gives the policy pages, and it is what keeps a fourteen-point
 * contract from reading as a wall. The colour is `ink-soft` rather than `ink`
 * for the same reason — this is reference material, not the page's argument.
 */
.sf-ckterms__para {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-small);
  line-height: 1.65;
  margin: 0;
}

.sf-ckterms__para + .sf-ckterms__para {
  margin-top: 12px;
}

/*
 * THE NUMBERED POINTS. The source document numbers them and people cite them by
 * number, so the numbers are the browser's rather than typed into the strings —
 * an `<ol>` renumbers itself when a point is added and a typed "7." does not.
 */
.sf-ckterms__points {
  margin: 18px 0 0;
  padding-left: 22px;
}

.sf-ckterms__point {
  color: var(--brand-color-ink-soft, #44464a);
  font-size: var(--text-small);
  line-height: 1.65;
}

.sf-ckterms__point + .sf-ckterms__point {
  margin-top: 12px;
}

/* The quiet line under the document, naming the page it is also published on. */
.sf-ckterms__more {
  color: var(--brand-color-muted, #6c6a62);
  font-size: var(--text-small);
  line-height: 1.65;
  margin: 20px 0 0;
}

.sf-ckterms__more-link {
  color: inherit;
  text-decoration: underline;
}

.sf-ckterms__more-link:hover {
  color: var(--brand-color-accent, #c4530a);
}

/* -------------------------------------------------------- the accept band -- */

/*
 * THE BAND IS THE SHELL'S (`.sf-modal__footer`); what is set here is the two
 * edges it exposes as CUSTOM PROPERTIES. They are properties rather than
 * longhand overrides because the shell writes `padding` as a SHORTHAND, and a
 * longhand of the same specificity on a second <link> is resolved by whichever
 * sheet React hoisted last — the load-order hazard `modal.css`'s footer block
 * documents. A custom property cascades on its own name and cannot be clobbered
 * by the shorthand that reads it.
 *
 * 26px of lead rather than the shell's 30: the band follows a `.sf-ckterms__
 * more` line that already carries 20px of its own top margin, and the two
 * stacking to 50 read as a gap rather than as a foot.
 */
.sf-ckterms__foot {
  --sf-modal-foot-lead: 26px;
}

/*
 * FULL WIDTH AT EVERY RUNG (Ryan's W80: "a full-width 'I Accept' button at the
 * bottom"), which is one rung further than the shell's own W25 rule — that one
 * goes full width on a phone only. This button is the end of a document rather
 * than a way out of a panel, and a document's assent is not a small target.
 *
 * ON THE PRIMARY RUNG, in the accent treatment — 48 tall, 16/700, radius 6 —
 * because BTN-UNIFY (Ryan, 2026-09-01, W13) says a button is a button and this
 * is the same control `.sf-dlv__done` is. `tools/btngate.mjs` carries it in the
 * family.
 */
.sf-ckterms__accept {
  align-items: center;
  background: var(--brand-color-accent, #c4530a);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--brand-color-surface, #ffffff);
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: var(--button-text, 16px);
  font-weight: var(--button-weight, 700);
  justify-content: center;
  line-height: normal;
  min-height: var(--control-height, 48px);
  padding: 0 var(--button-pad-x, 28px);
  text-align: center;
  width: 100%;
}

.sf-ckterms__accept:hover {
  background: var(--brand-color-accent-strong, #9c420a);
}

/*
 * THE ONE RING THIS SHEET OWNS. The close cross and the scrim are the shell's
 * and are ringed once in `modal.css`; the accept button is this pop-up's own
 * control, so its ring is here — the same accent ring at the same offset every
 * other focusable control on the storefront wears.
 */
.sf-ckterms__accept:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

.sf-ckterms__more-link:focus-visible {
  outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a));
  outline-offset: var(--sf-focus-ring-offset, 2px);
}

/* -------------------------------------------------------------- a phone -- */

/*
 * The scrim's 15px inset is the shell's, at the shell's own 767.98 cut. What is
 * this pop-up's is its content rhythm, which comes in with the measure — 36px
 * either side of a ~360px panel leaves 288 for an 85-character line that is now
 * a 40-character one.
 */
@media (max-width: 767.98px) {
  .sf-ckterms__body {
    padding: 20px 22px 0;
  }

  .sf-ckterms__foot {
    --sf-modal-foot-inline: 22px;
  }

  .sf-ckterms__points {
    padding-left: 18px;
  }
}