/* ==========================================================================
   orders.css — the Lydd & Yaffa order tracker (/orders). Loaded by that page only.
   Extends site.css; defines no color of its own. Every value below resolves to one
   of the Aurora Midnight tokens already declared in site.css :root, so this page
   follows the light/dark switch without a second palette. site.css is not edited.

   Ported 2026-09-06 from the personal site's orders.css, re-pointed at this tree's
   own vocabulary: the form controls (.ly-form, .ly-field, .ly-hint, .ly-error) and
   the seller card (.ly-idcard) come from site.css and are not restated here; the
   button is site.css's .btn (there is no .btn-gold on this site — every button is
   already the gold hairline); and the page's one coral element is site.css's own
   .ly-rule, so this file names no accent token at all. grep proves it.

   Two rules from Brand Guide v2 are enforced here structurally rather than by hand:

   1. ONE coral element per view (§1, the single-accent rule). On this page it is
      .ly-rule under the h1 — and nothing else, in any state. The lookup button,
      the tracking link and every focus ring are gold or cyan, because the number
      of coral candidates on this page changes with what comes back from the API
      (a result adds a status, a stage marker and possibly a tracking button) and
      a per-element coral would become four. The error state puts two more marks
      on screen (the error box and the field that caused it); both use the gold
      keyline from site.css, which reads as attention without being a second accent.
   2. Gold is a line and a figure, never a field (§1, §9). It appears here as
      hairlines, labels, the order number and the stage marker of the current step.

   No green anywhere: green belongs to Alliance Realty & Financial, and the Zaytoun
   tie's green lives inside an image, never in this page's furniture.
   ========================================================================== */

/* ---------- Page frame ---------- */
/* js/orders.js toggles the error box, the result box and the button labels with the
   `hidden` attribute rather than a class, so hiding must survive any display value
   this file or site.css sets on those elements. */
.ly-orders [hidden]{display:none!important}
.ly-orders{--section:clamp(3.25rem,7vw,5.5rem)}
.ly-orders .section-head{margin-block-end:1.75rem}

/* ---------- Masthead ---------- */
.ly-ord-masthead h1{font-size:clamp(2.3rem,1.8rem + 3.6vw,4.4rem);letter-spacing:-.02em}
.ly-ord-masthead .ly-lede{max-inline-size:30ch}

/* ---------- Result ---------- */
.ly-result{
  max-inline-size:44rem;margin-block-start:1.75rem;
  padding:clamp(1.1rem,2.4vw,1.85rem);
  background:var(--glass);border:1px solid var(--line-gold);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.ly-result:focus{outline:2px solid var(--focus);outline-offset:4px}
.ly-result:focus:not(:focus-visible){outline:none}

.ly-result-head{margin-block-end:1.4rem}
.ly-result-eyebrow{
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-2);margin:0 0 .3rem;
}
.ly-result-number{
  font-size:clamp(1.4rem,1.2rem + .8vw,2rem);letter-spacing:.06em;
  color:var(--gold-text);margin:0;
}
.ly-result-date{font-family:var(--font-prose);color:var(--fg-2);margin:.4rem 0 0}

.ly-result-status{
  padding-block:1rem;margin-block-end:.4rem;
  border-block-start:1px solid var(--line-gold);
}
.ly-status-label{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.35rem,1.15rem + .9vw,1.9rem);line-height:1.15;margin:0;color:var(--fg);
}
.ly-status-detail{
  font-family:var(--font-prose);font-size:1.06rem;line-height:1.62;
  color:var(--fg-2);max-inline-size:60ch;margin-block:1rem 0;
}

/* ---------- The four stages ---------- */
/* A list, not a graphic: it reads in order with no styles at all, and the state of
   each step is in the DOM as words for a screen reader (js/orders.js appends a
   visually-hidden note) as well as in the marker. */
.ly-stages{
  list-style:none;margin:1.25rem 0 0;padding:0;
  display:grid;gap:0;
}
.ly-stage{
  display:grid;grid-template-columns:1.5rem 1fr;align-items:center;gap:.75rem;
  padding-block:.6rem;position:relative;
}
/* The connecting rail. Drawn from the dot down to the next row, so the last step
   has no dangling tail. */
.ly-stage:not(:last-child)::before{
  content:"";position:absolute;inset-block-start:1.55rem;inset-block-end:-.35rem;
  inset-inline-start:calc(.75rem - 1px);inline-size:2px;background:var(--line);
}
.ly-stage[data-state="done"]:not(:last-child)::before{background:var(--line-gold)}

.ly-stage-dot{
  inline-size:1.5rem;block-size:1.5rem;border-radius:50%;
  border:2px solid var(--line);background:transparent;
  display:grid;place-items:center;position:relative;z-index:1;
}
.ly-stage-dot::after{content:"";inline-size:.5rem;block-size:.5rem;border-radius:50%;background:transparent}

.ly-stage[data-state="done"] .ly-stage-dot{border-color:var(--gold)}
.ly-stage[data-state="done"] .ly-stage-dot::after{background:var(--gold)}
.ly-stage[data-state="current"] .ly-stage-dot{border-color:var(--gold);box-shadow:0 0 0 4px rgba(227,173,75,.18)}
.ly-stage[data-state="current"] .ly-stage-dot::after{background:var(--gold);inline-size:.7rem;block-size:.7rem}
.ly-stage[data-state="upcoming"] .ly-stage-dot{border-color:var(--line)}
/* Unknown is drawn as unknown — a dashed ring, not an empty one. An empty ring
   would read as "not delivered", which is a claim this page cannot make. */
.ly-stage[data-state="unknown"] .ly-stage-dot{border-style:dashed;border-color:var(--line-gold)}

.ly-stage-label{
  font-family:var(--font-label);font-size:.94rem;letter-spacing:.02em;color:var(--fg-2);
}
.ly-stage[data-state="done"] .ly-stage-label{color:var(--fg)}
.ly-stage[data-state="current"] .ly-stage-label{color:var(--fg);font-weight:600}

/* ---------- Result blocks ---------- */
.ly-result-block{
  margin-block-start:1.5rem;padding-block-start:1.25rem;
  border-block-start:1px solid var(--line);
}
.ly-result-label{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 .7rem;
}
.ly-result-note{
  font-family:var(--font-prose);font-size:1.02rem;line-height:1.55;
  color:var(--fg-2);margin:.75rem 0 0;max-inline-size:58ch;
}
.ly-result-foot{
  margin-block-start:1.5rem;padding-block-start:1.1rem;
  border-block-start:1px solid var(--line);
  font-family:var(--font-prose);font-size:1rem;line-height:1.55;color:var(--fg-2);
}
.ly-result-foot a,.ly-result-note a{color:var(--gold-text);text-decoration-color:var(--line-gold)}
.ly-result-foot a:hover,.ly-result-note a:hover{color:var(--fg)}

.ly-items{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ly-items li{display:flex;gap:.6rem;align-items:baseline}
.ly-item-qty{font-family:var(--font-mono);font-size:.9rem;color:var(--gold-text);flex:0 0 auto}
.ly-item-name{font-family:var(--font-prose);font-size:1.06rem;color:var(--fg)}

.ly-track{
  display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.1rem;
  margin:0;align-items:baseline;
}
.ly-track dt{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-2);
}
.ly-track dd{margin:0;font-family:var(--font-prose);font-size:1.06rem;color:var(--fg)}
.ly-track dd.mono{font-family:var(--font-mono);font-size:.95rem;letter-spacing:.04em;word-break:break-all}
.ly-track-link{margin-block-start:1rem}

/* ---------- What the stages mean ---------- */
.ly-ord-terms{
  display:grid;gap:1px;margin:0;padding:0;background:var(--line);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);overflow:hidden;
}
@media (min-width:720px){.ly-ord-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ly-ord-term{background:var(--glass);padding:clamp(1rem,2.2vw,1.5rem);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ly-ord-term dt{
  font-family:var(--font-label);font-weight:600;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);
  margin-block-end:.5rem;
}
.ly-ord-term dd{margin:0;font-family:var(--font-prose);font-size:1.04rem;line-height:1.55;color:var(--fg)}

.ly-ord-nodate{
  margin-block-start:2rem;padding:clamp(1.1rem,2.4vw,1.75rem);
  border:1px solid var(--line-gold);border-radius:var(--radius);background:var(--card);
  max-inline-size:70ch;
}
.ly-ord-nodate h3{
  font-family:var(--font-label);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 .9rem;
}
.ly-ord-nodate p{font-family:var(--font-prose);font-size:1.04rem;line-height:1.62;color:var(--fg-2);max-inline-size:none}
.ly-ord-nodate p:last-child{margin-block-end:0}

.ly-orders .ly-policies{margin-block-start:2rem}

/* ---------- Help ---------- */
.ly-ord-help-list{
  margin:0;padding-inline-start:1.2rem;display:grid;gap:.7rem;max-inline-size:66ch;
  font-family:var(--font-prose);font-size:1.06rem;line-height:1.58;color:var(--fg-2);
}
.ly-ord-help-list a{color:var(--gold-text);text-decoration-color:var(--line-gold)}
.ly-ord-help-list a:hover{color:var(--fg)}
.ly-ord-help-list li::marker{color:var(--gold)}

/* ---------- Focus, everywhere ---------- */
/* site.css already sets a 2px cyan :focus-visible ring globally. These only widen
   the offset where an element sits tight against a border or a rail. */
.ly-result-foot a:focus-visible,
.ly-track-link:focus-visible{outline-offset:4px}

/* ---------- Narrow screens ---------- */
@media (max-width:520px){
  .ly-track{grid-template-columns:1fr;gap:.15rem}
  .ly-track dt{margin-block-start:.6rem}
}