/* ============================================================================
   ORDER TRACKING AND SIGN-IN  (/track/ and /account/ only)
   Batch 2026-10-09, tracking lane. Loaded after style.css and editorial.css
   on those two pages and nowhere else, so every value here is one of their
   tokens: the warm editorial paper, ink, rules and muted ink, the 1px rules,
   square corners and the ink-plate button. No colour is typed in this file.

   The order card (.ocard) is one component on both pages: /track/ draws one
   open card, /account/ draws one per order inside a native <details>, the
   newest open.

   Degraded rendering: with this sheet blocked the markup reads top to
   bottom as label, field, label, field, button, message, and the card as
   heading, status, steps as a numbered list, shipment, items.
   ========================================================================= */

/* the column is editorial.css's reference-page measure (.pagebody .wrap) */
.acct-body { padding-block: clamp(2rem, 4vw, 3.5rem) var(--ed-space); }

/* a form that cannot work without script renders no control (3.1) */
html:not(.js) .acct-needs-js { display: none; }
.acct-noscript { margin: 0 0 1.5rem; max-width: 52ch; line-height: 1.6; }

/* punctuation the layout replaces: read aloud, drawn only without this sheet */
.acct-sep {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- form ------------------------------------------------------------- */
.acct-form { display: grid; gap: 1.25rem; max-width: 34rem; }
.acct-field { display: grid; gap: .5rem; }
.acct-field label { font-size: .9375rem; font-weight: 600; color: var(--ed-ink); }
.acct-input {
  width: 100%; min-width: 0; min-height: 54px;
  padding: .75rem 1rem;
  background: var(--ed-white); color: var(--ed-ink);
  border: 1px solid var(--c-border-str); border-radius: 0;
  font: 400 1rem/1.5 var(--ff-body);
  box-shadow: none;
}
.acct-input:hover { border-color: var(--ed-ink); }
.acct-input:focus-visible { outline: 3px solid var(--c-focus-ink); outline-offset: 2px; border-color: var(--ed-ink); }
.acct-input[aria-invalid="true"] { border-color: var(--c-error); border-width: 2px; padding-inline: calc(1rem - 1px); }
.acct-err { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--c-error); }
.acct-err:empty { display: none; }
.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
/* "Checking" swaps in at the same width, so nothing reflows mid-request */
.acct-submit { min-width: min(13rem, 100%); }
.acct-submit[aria-busy="true"] { background: var(--c-action-lit); border-color: var(--c-action-lit); color: var(--ed-white); }

/* one line per outcome; [data-bad] is the site's one error hook */
.acct-msg { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: var(--ed-ink); }
.acct-msg:empty { display: none; }
.acct-msg[data-bad="1"] { padding-left: 1rem; border-left: 3px solid var(--c-error); }
.acct-msg a, .acct-notice a, .acct-noscript a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* a standing note above the form: expired link, signed out */
.acct-notice {
  margin: 0 0 1.75rem; max-width: 52ch; padding: 1rem 1.25rem;
  border: 1px solid var(--c-border-str); background: var(--ed-gray);
  font-size: 1rem; line-height: 1.55; color: var(--ed-ink);
}
.acct-notice:empty { display: none; }

/* the quiet way across to the other page */
.acct-aside {
  margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--ed-rule);
  font-size: .9375rem; line-height: 1.6; color: var(--ed-muted);
}

/* "Check your email": the confirmation replaces the form, it is not a toast */
.acct-sent {
  max-width: 34rem; padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ed-ink); background: var(--ed-white);
}
.acct-sent:focus { outline: none; }
.acct-sent:focus-visible { outline: 3px solid var(--c-focus-ink); outline-offset: 3px; }
.acct-sent h2 { margin: 0; font: 700 clamp(1.375rem, 2.2vw, 1.75rem)/1.15 var(--ff-body); letter-spacing: -.025em; color: var(--ed-ink); }
.acct-sent p { margin: .875rem 0 0; max-width: 46ch; line-height: 1.6; color: var(--c-text-soft); }
.acct-sent p strong { color: var(--ed-ink); font-weight: 600; overflow-wrap: anywhere; }
.acct-sent .acct-actions { margin-top: 1.25rem; }

/* busy line while a link or a session is checked: words, no spinner (2.7.11) */
.acct-wait { margin: 0; font-size: 1.0625rem; color: var(--c-text-soft); }

/* a text-only control that reads like the site's .text-link */
.acct-textbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 600 .9375rem/1.2 var(--ff-body); color: var(--ed-ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.acct-textbtn:hover { color: var(--c-water-deep); }

/* signed-in bar */
.acct-who {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .25rem 1.5rem; margin-bottom: 1.5rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--ed-rule);
}
.acct-who p { margin: 0; font-size: .9375rem; color: var(--ed-muted); }
.acct-who strong { color: var(--ed-ink); font-weight: 600; overflow-wrap: anywhere; }
/* minmax(0, 1fr): an auto track grows to its widest card's min-content and
   put 28px of sideways scroll on a phone at a 150% text size */
.acct-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.acct-empty { margin: 0; line-height: 1.6; }

/* ---- the order card ----------------------------------------------------- */
.ocard { border: 1px solid var(--c-border-str); background: var(--ed-white); }
.ocard:focus { outline: none; }
.ocard__head, .ocard__sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.25rem; padding: clamp(1.125rem, 2.6vw, 1.75rem) clamp(1rem, 2.6vw, 1.75rem) 0; }
.ocard__title { margin: 0; font: 700 clamp(1.25rem, 1.9vw, 1.5rem)/1.2 var(--ff-body); letter-spacing: -.02em; color: var(--ed-ink); overflow-wrap: anywhere; }
.ocard__title:focus { outline: none; }
.ocard__total { margin: 0; align-self: baseline; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ed-ink); }
.ocard__placed { margin: 0; grid-column: 1 / -1; font-size: .875rem; color: var(--ed-muted); }
.ocard__status { margin: .875rem 0 0; grid-column: 1 / -1; font-size: 1.125rem; font-weight: 700; color: var(--ed-ink); }
.ocard__body { padding: 0 clamp(1rem, 2.6vw, 1.75rem) clamp(1.125rem, 2.6vw, 1.75rem); }

/* The account list: the same card folded into a native disclosure, so
   keyboard, Enter and Space and the open state cost nothing. */
.ocard--fold > summary { list-style: none; cursor: pointer; padding-bottom: clamp(1rem, 2.4vw, 1.5rem); }
.ocard--fold > summary::-webkit-details-marker { display: none; }
.ocard--fold > summary:focus-visible { outline: 3px solid var(--c-focus-ink); outline-offset: -3px; }
.ocard--fold > summary:hover .ocard__title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ocard--fold .ocard__status { margin-top: .5rem; font-size: 1rem; }
.ocard--fold .ocard__sum { grid-template-columns: minmax(0, 1fr) auto 20px; }
.ocard__chev { grid-column: 3; grid-row: 1; align-self: center; width: 20px; height: 20px; color: var(--ed-ink); }
.ocard--fold[open] .ocard__chev { transform: rotate(180deg); }
.ocard--fold[open] > summary { padding-bottom: 0; }

/* ---- the four steps ------------------------------------------------------
   Reads at a glance at 390: four dots on one rail, a word under each.
   The state is never the colour alone: done dots carry a tick, the current
   one a ring and a bold word, and each step says its state to a screen
   reader in words. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.steps__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 0; padding: 0 .25rem; text-align: center; }
/* the rail: each step draws the half before and after its own dot */
.steps__step::before, .steps__step::after {
  content: ""; position: absolute; top: 10px; height: 2px; background: var(--ed-rule);
}
.steps__step::before { left: 0; right: calc(50% + 14px); }
.steps__step::after { left: calc(50% + 14px); right: 0; }
.steps__step:first-child::before, .steps__step:last-child::after { display: none; }
.steps__step.is-done::after, .steps__step.is-done + .steps__step::before { background: var(--ed-ink); }
.steps__dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--ed-muted); background: var(--ed-white); color: var(--ed-white);
}
.steps__dot svg { width: 12px; height: 12px; }
.steps__step.is-done .steps__dot, .steps__step.is-current .steps__dot { border-color: var(--ed-ink); background: var(--ed-ink); }
.steps__step.is-current .steps__dot { box-shadow: 0 0 0 4px var(--ed-white), 0 0 0 5px var(--ed-ink); }
.steps__label { font-size: .875rem; line-height: 1.25; color: var(--ed-muted); overflow-wrap: anywhere; }
.steps__step.is-done .steps__label { color: var(--ed-ink); }
.steps__step.is-current .steps__label { color: var(--ed-ink); font-weight: 700; }
.steps__date { margin-top: -.25rem; font-size: .8125rem; color: var(--ed-muted); font-variant-numeric: tabular-nums; }

/* cancelled and refunded leave the rail: a plain block says so */
.ocard__stop { margin: 1.25rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--c-border-str); background: var(--ed-gray); line-height: 1.55; }
.ocard__stop a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- shipment: the loudest thing on the card once anything has shipped -- */
.ocard__ships { display: grid; gap: 1rem; margin-top: 1.75rem; }
.ship { padding: clamp(1rem, 2.4vw, 1.5rem); background: var(--ed-gray); border: 1px solid var(--ed-rule); }
.ship__head { margin: 0 0 .25rem; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ed-muted); }
.ship__line { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ed-ink); }
.ship__label { display: block; margin-top: 1rem; font-size: .8125rem; font-weight: 600; color: var(--ed-muted); }
.ship__row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .25rem; }
.ship__no {
  font: 700 clamp(1.25rem, 2.3vw, 1.625rem)/1.25 var(--ff-body);
  letter-spacing: .01em; font-variant-numeric: tabular-nums; color: var(--ed-ink);
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; min-width: 0;
}
.ship__copy {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; min-width: 5.5rem; padding: .5rem .875rem;
  background: var(--ed-white); color: var(--ed-ink);
  border: 1px solid var(--c-border-str); border-radius: 0; cursor: pointer;
  font: 600 .875rem/1 var(--ff-body);
}
.ship__copy:hover { border-color: var(--ed-ink); }
.ship__copy svg { width: 16px; height: 16px; flex: none; }
.ship__go { margin-top: 1.25rem; }
.ship__go .ed-arrow { width: 20px; height: 20px; }
.ship__done { margin: 1rem 0 0; font-weight: 600; }
.ship__wait { margin: 1.75rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ed-rule); color: var(--c-text-soft); line-height: 1.55; }

/* ---- line items: the bag's row, without the controls --------------------- */
.ocard__items { margin: 1.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ed-rule); }
.oitem { display: flex; align-items: center; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--ed-rule); }
.oitem__img {
  flex: none; display: block; width: 64px; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--c-surface-0); border: 1px solid var(--ed-rule);
}
.oitem__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oitem__img img.is-missing { opacity: 0; }
.oitem__img:has(img.is-missing), .oitem__img--none { background: var(--ed-gray); }
.oitem__what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.oitem__name { font-weight: 600; color: var(--ed-ink); text-decoration: none; overflow-wrap: anywhere; }
a.oitem__name:hover { text-decoration: underline; text-underline-offset: 4px; }
.oitem__meta { font-size: .875rem; color: var(--ed-muted); overflow-wrap: anywhere; }
.oitem__qty { flex: none; font-size: .9375rem; color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.ocard__updated { margin: 1rem 0 0; font-size: .8125rem; color: var(--ed-muted); }

.acct-again { margin-top: 1.25rem; }

@media (max-width: 559px) {
  .ship__go { display: flex; width: 100%; }
  .acct-submit { width: 100%; }
  .acct-actions { gap: .5rem 1.25rem; }
  .steps__label { font-size: .8125rem; }
  .steps__date { font-size: .75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ocard__chev { transition: transform 220ms ease; }
  .ship__copy, .acct-input { transition: border-color 220ms ease; }
}
@media (forced-colors: active) {
  .steps__dot { border-color: CanvasText; }
  .steps__step.is-done .steps__dot, .steps__step.is-current .steps__dot { background: CanvasText; }
  .steps__step::before, .steps__step::after { background: CanvasText; }
  .ship, .ocard, .acct-notice, .acct-sent { border-color: CanvasText; }
}