/* ─────────────────────────────────────────────────────────────────────────────
   THE CLIENT PORTAL'S ONE STYLESHEET (rebuilt 2026-09-24 from the founder's Claude
   Design handoff, design-handoff/).

   The rules come from the Portal Design Compass in CLAUDE.md, the tokens from
   DESIGN.md with ONE exception (the accent is the logo blue, never Linear's
   lavender), and portal-spec.md sections 11 to 14. Where the handoff disagreed
   with them, they won — see STATUS.md for the list.

   Hand-written, NOT Tailwind: app.css is still loaded on portal pages because the
   shared lightbox and the pages not rebuilt yet are Tailwind, but nothing new
   depends on it. Every rule here is written with logical properties (start / end,
   inline / block) so an Arabic page can mirror itself: `left` and `right` never
   appear, and portal_design_tests.py fails the file if they do. So does any
   shadow, any gradient, any animation beyond a 150ms colour change, and any
   colour outside the allowed palette.
   ───────────────────────────────────────────────────────────────────────────── */

/* Inter, self-hosted (nobody in China can reach a font CDN). Variable, 400 to 700. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* ── TOKENS, LIGHT (the default) ───────────────────────────────────────────── */
:root {
  --page: #f3f5f8;
  --card: #ffffff;
  --card-2: #f3f5f8;
  --line: #e3e8ef;
  --line-strong: rgba(21, 38, 59, 0.24);
  --ink: #15263b;
  --ink-secondary: #5b6b80;
  --ink-disabled: rgba(21, 38, 59, 0.38);
  --accent: #155dfc;
  --accent-hover: #2463ff;
  --accent-tint: #eaf1ff;
  --on-accent: #ffffff;
  --focus-ring: rgba(21, 93, 252, 0.5);
  --success: #27a644;
  --success-tint: rgba(39, 166, 68, 0.12);
  /* Amber and red have no DESIGN.md token; portal-spec 14.2 leaves the hex to the
     build. Amber is ONLY "this needs you", red is ONLY an error sentence. */
  --warning: #9a6700;
  --warning-tint: rgba(154, 103, 0, 0.12);
  --danger: #cf2b2b;
  --scrim: rgba(21, 38, 59, 0.4);
  --glass: rgba(255, 255, 255, 0.7);
  --step-reached: #15263b;
  --step-current: #155dfc;
  --step-future: #e3e8ef;
  --step-received: #27a644;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
    "Noto Sans Arabic", "PingFang SC", "Microsoft YaHei", sans-serif;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-tag: 6px;
  --radius-pill: 9999px;
  --transition-color: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  --glass-blur: blur(22px) saturate(1.5);
  color-scheme: light;
}

/* ── TOKENS, DARK (DESIGN.md's near-black ladder; the accent stays the logo blue) ── */
[data-theme="dark"] {
  --page: #010102;
  --card: #0f1011;
  --card-2: #141516;
  --line: #23252a;
  --line-strong: #34343a;
  --ink: #f7f8f8;
  --ink-secondary: #8a8f98;
  --ink-disabled: #62666d;
  --accent: #3b82ff;
  --accent-hover: #2463ff;
  --accent-tint: rgba(59, 130, 255, 0.16);
  --focus-ring: rgba(59, 130, 255, 0.5);
  --warning: #e3b341;
  --warning-tint: rgba(227, 179, 65, 0.14);
  --danger: #ff6b6b;
  --scrim: rgba(0, 0, 0, 0.6);
  --glass: rgba(15, 16, 17, 0.72);
  --step-reached: #d0d6e0;
  --step-current: #3b82ff;
  --step-future: #34343a;
  color-scheme: dark;
}

/* ── BASE ──────────────────────────────────────────────────────────────────── */
html { background: var(--page); }
/* The sticky 56px header must not cover a card a link lands on (/portal#q123 after
   Publish, "view price" on a request): leave its height plus a gap above the target. */
html { scroll-padding-block-start: 72px; }
body.sl-body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.5 var(--font-sans);
  letter-spacing: -0.05px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sl-body :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Amounts, dates and order numbers keep their reading order inside a mirrored page. */
.sl-ltr { direction: ltr; unicode-bidi: isolate; }
.sl-link { color: var(--accent); text-decoration: none; transition: var(--transition-color); }
.sl-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.sl-icon { flex: none; display: inline-block; vertical-align: middle; }
.sl-visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* The wordmark is TEXT, never the 233px PNG (it blurs). Navy "Sourcing", blue "Launch". */
.sl-wordmark {
  display: inline-flex; align-items: center; gap: 0.28em;
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); white-space: nowrap; text-decoration: none;
  direction: ltr; unicode-bidi: isolate;
}
.sl-wordmark:hover { color: var(--ink); text-decoration: none; }
.sl-wordmark b { font-weight: 600; color: var(--accent); }

/* ── BUTTONS ── flat logo blue, one main button per card; a button is never a pill. */
.sl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 14px/1.2 var(--font-sans); letter-spacing: 0;
  padding: 8px 14px; min-block-size: 36px; box-sizing: border-box;
  border-radius: var(--radius-control); border: 1px solid transparent;
  background: transparent; color: var(--ink); cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: var(--transition-color);
}
.sl-btn:hover { text-decoration: none; }
.sl-btn-primary { background: var(--accent); color: var(--on-accent); }
.sl-btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.sl-btn-secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.sl-btn-secondary:hover { background: var(--card-2); color: var(--ink); }
.sl-btn-tertiary { color: var(--ink); }
.sl-btn-tertiary:hover { background: var(--card-2); color: var(--ink); }
.sl-btn-lg { min-block-size: 44px; }
.sl-btn-block { inline-size: 100%; }
.sl-btn:disabled { cursor: default; color: var(--ink-disabled); background: var(--card-2); border-color: transparent; }
.sl-iconbtn { padding: 0; inline-size: 36px; block-size: 36px; }

/* ── FORM FIELDS ───────────────────────────────────────────────────────────── */
.sl-field { display: grid; gap: 6px; inline-size: 100%; min-inline-size: 0; }
.sl-field-label { font: 500 14px/1.5 var(--font-sans); color: var(--ink); }
.sl-control { position: relative; display: flex; align-items: center; }
.sl-input {
  inline-size: 100%; box-sizing: border-box; min-block-size: 44px; margin: 0;
  font: 400 16px/1.5 var(--font-sans); letter-spacing: -0.05px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-control);
  padding: 8px 12px; appearance: none; -webkit-appearance: none; transition: var(--transition-color);
}
.sl-input::placeholder { color: var(--ink-disabled); }
.sl-input:hover { border-color: var(--line-strong); }
.sl-input:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: var(--accent); }
.sl-control-end .sl-input { padding-inline-end: 44px; }
.sl-input-end { position: absolute; inset-inline-end: 4px; display: flex; align-items: center; }
.sl-error { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--danger); }

/* ── THE SHELL: menu on the start side, glass header, content ───────────────── */
.sl-shell { display: flex; min-block-size: 100vh; }
.sl-side {
  position: sticky; inset-block-start: 0; block-size: 100vh; flex: none;
  inline-size: 240px; box-sizing: border-box; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--card); border-inline-end: 1px solid var(--line); padding: 12px;
}
.sl-side-brand { padding: 12px 12px 20px; font-size: 20px; }
.sl-nav { display: grid; gap: 2px; }
.sl-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-block-size: 40px; padding: 8px 12px; box-sizing: border-box;
  border-radius: var(--radius-control); color: var(--ink);
  font: 500 14px/1.5 var(--font-sans); text-decoration: none; transition: var(--transition-color);
}
.sl-nav-item:hover { background: var(--card-2); color: var(--ink); text-decoration: none; }
/* The selected item: a blue bar on the start edge, a light-blue fill and bold — strong on
   purpose, two of his references were about "showing what is selected". */
.sl-nav-item[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.sl-nav-item[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: -12px; inset-block: 10px;
  inline-size: 3px; background: var(--accent);
}
/* The foot of the menu (board 2a / 2j): Settings, then a line, then whose account this is.
   ONE language since 2026-09-24, so no switch here; Sign out lives on the Settings page. */
.sl-side-bottom { margin-block-start: auto; display: grid; gap: 8px; padding-block-start: 12px; }
.sl-side-foot {
  padding: 12px 12px 4px; display: grid; gap: 2px;
  border-block-start: 1px solid var(--line);
}
.sl-side-company { font: 500 14px/1.5 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-side-role { font: 400 12px/1.4 var(--font-sans); color: var(--ink-secondary); }

.sl-content { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
/* GLASS — the header strip is one of only three glass things (with floating menus and
   the China-time chip). Sticky, so rows scroll under it. */
.sl-header {
  position: sticky; inset-block-start: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-block-size: 56px; padding: 0 24px; box-sizing: border-box;
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-block-end: 1px solid var(--line);
}
.sl-header-start { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.sl-header-title {
  margin: 0; font: 600 28px/1.2 var(--font-sans); letter-spacing: -0.6px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-inline-size: 0;
}
.sl-header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.sl-menu-btn { display: none; }
/* The theme switch shows the moon in light mode and the sun in dark. */
.sl-theme-btn .sl-sun { display: none; }
[data-theme="dark"] .sl-theme-btn .sl-sun { display: inline-block; }
[data-theme="dark"] .sl-theme-btn .sl-moon { display: none; }

.sl-main {
  inline-size: 100%; max-inline-size: 1280px; box-sizing: border-box;
  padding: 24px 24px 192px; display: grid; gap: 16px; align-content: start;
}
/* A page not rebuilt yet keeps its own inside for now; it sits on one white card so it
   reads as part of the new frame rather than floating on the grey page. Such a page is
   LIGHT ONLY: its old colours were never drawn for a dark background. */
.sl-legacy {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px; min-inline-size: 0; overflow-wrap: anywhere;
}

/* === CHINA-TIME CHIP: THE ONE EXCEPTION — START ===
   Built to design-handoff/china-time-chip.md (the founder's agreed spec, 2026-09-24). This
   block, and ONLY this block, may use gradients, animation, an opacity transition, 34/28px
   corners and the two dot colours: portal_design_tests.py cuts it out before it applies the
   compass's rules to the rest of this file, and holds it to the spec instead. Still banned
   here: box-shadow, a solid border, a pulsing dot. */
.cn-chip {
  position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 30;
  width: 152px; height: 152px; box-sizing: border-box; padding: 16px 18px;
  border-radius: 34px; overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  color: var(--ink); font-variant-numeric: tabular-nums;
  transition: background 150ms ease;
}
.cn-chip:hover { background: rgba(21, 38, 59, 0.10); }
[data-theme="dark"] .cn-chip:hover { background: rgba(255, 255, 255, 0.28); }
.cn-chip__ring, .cn-chip__gloss, .cn-chip__drift { position: absolute; pointer-events: none; }
.cn-chip__ring {
  inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.55));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  opacity: 0.8; transition: opacity 150ms ease;
}
.cn-chip:hover .cn-chip__ring { opacity: 1; }
.cn-chip__gloss {
  inset: -60% -80%;
  /* At rest the band is OFF the tile: during the 1s delay (fill-mode none applies no
     keyframe) and under reduced motion (animation: none) the layer would otherwise sit
     centred, a white stripe across the time (found by review, 2026-09-24). */
  transform: translateX(-135%) rotate(9deg);
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0) 62%);
  animation: cn-gloss 9s ease-in-out 1s infinite; will-change: transform;
}
.cn-chip__drift {
  inset: -30%;
  background: radial-gradient(42% 34% at 28% 18%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%);
  animation: cn-drift 11s ease-in-out infinite; will-change: transform, opacity;
}
.cn-chip__body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.cn-chip__status { display: flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--font-sans); }
.cn-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #3ccf7a; }
.cn-chip.is-closed .cn-chip__dot { background: #9aa8bb; }
.cn-chip__time { font: 600 40px/1 var(--font-sans); letter-spacing: -1.4px; }
.cn-chip__digits { display: inline-flex; align-items: baseline; direction: ltr; }
.cn-d { display: inline-block; min-width: 0.62em; text-align: center; animation: cn-digit-in 0.6s cubic-bezier(0.22, 1.2, 0.36, 1) both; }
.cn-colon { opacity: 0.5; padding: 0 0.05em; }
.cn-chip__foot { display: grid; font: 400 12px/1.4 var(--font-sans); opacity: 0.72; }
.cn-chip__foot-a, .cn-chip__foot-b {
  grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity 150ms ease;
}
.cn-chip__foot-b { opacity: 0; }
.cn-chip:hover .cn-chip__foot-a { opacity: 0; }
.cn-chip:hover .cn-chip__foot-b { opacity: 1; }
@keyframes cn-gloss { 0% { transform: translateX(-135%) rotate(9deg); } 50%, 100% { transform: translateX(135%) rotate(9deg); } }
@keyframes cn-drift { 0%, 100% { transform: translate(0, 0); opacity: 0.75; } 50% { transform: translate(7%, 5%); opacity: 1; } }
@keyframes cn-digit-in {
  0% { opacity: 0; transform: translateY(0.42em) scale(0.94); filter: blur(6px); }
  55% { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
/* The phone size at the portal's OWN phone breakpoint (767px), as the spec's text says; its
   reference CSS used 480px, the prototype's. */
@media (max-width: 767px) {
  .cn-chip { width: 128px; height: 128px; border-radius: 28px; padding: 13px 15px; }
  .cn-chip__time { font-size: 32px; letter-spacing: -1.1px; }
  .cn-chip__foot { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-chip__gloss, .cn-chip__drift, .cn-d { animation: none; }
}
/* === CHINA-TIME CHIP: THE ONE EXCEPTION — END === */

/* ── PHONE: the menu folds behind a button and opens over the page ─────────── */
.sl-scrim { display: none; }
@media (max-width: 767px) {
  .sl-side {
    display: none; position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 70;
    block-size: 100%; max-inline-size: 85vw;
  }
  [data-drawer="open"] .sl-side { display: flex; }
  [data-drawer="open"] .sl-scrim { display: block; position: fixed; inset: 0; z-index: 60; background: var(--scrim); }
  .sl-menu-btn { display: inline-flex; }
  .sl-header { padding: 0 16px; }
  .sl-header-title { font-size: 22px; letter-spacing: -0.4px; }
  .sl-main { padding: 16px 16px 168px; gap: 12px; }
  .sl-legacy { padding: 16px; }
}

/* ── THE LOGIN PAGE ── one white box on the plain page. Nothing else. */
.sl-login {
  min-block-size: 100vh; box-sizing: border-box; display: grid; place-items: center;
  padding: 48px 24px 192px;
}
.sl-login-box {
  inline-size: 100%; max-inline-size: 380px; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 32px; display: grid; gap: 22px;
}
.sl-login-box .sl-wordmark { font-size: 24px; }
.sl-login-fields { display: grid; gap: 14px; }
.sl-login-help { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
/* The TEAM address's page only (2026-09-25): one small line under the wordmark says whose page it is. */
.sl-login-team { margin: -10px 0 0; font: 500 12px/1.4 var(--font-sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-secondary); }
/* The password's eye: the open eye while the password is hidden, the crossed one while shown. */
.sl-eye-btn .sl-eye-off { display: none; }
.sl-eye-btn[aria-pressed="true"] .sl-eye { display: none; }
.sl-eye-btn[aria-pressed="true"] .sl-eye-off { display: inline-block; }
@media (max-width: 767px) {
  .sl-login { padding: 24px 16px 168px; }
  .sl-login-box { padding: 24px; gap: 20px; }
}

/* ══ ORDER TRACKING (deploy 2, 2026-09-24): the list and one order ══════════════════ */

/* ── CARDS, CHIPS, TABS ─────────────────────────────────────────────────────── */
.sl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-sizing: border-box; min-inline-size: 0; }
.sl-card-pad { padding: 24px; }
.sl-card-title { margin: 0 0 16px; font: 500 22px/1.25 var(--font-sans); letter-spacing: -0.4px; color: var(--ink); }
.sl-card-desc { margin: -8px 0 8px; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
.sl-eyebrow { font: 500 13px/1.3 var(--font-sans); letter-spacing: 0.4px; color: var(--ink-secondary); }
.sl-muted { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
.sl-sep { color: var(--ink-secondary); }
.sl-empty { padding: 48px 24px; text-align: center; color: var(--ink-secondary); font: 400 16px/1.5 var(--font-sans); }

/* A status chip is a pill; a button never is. Amber = "this needs you", nothing else. */
.sl-badge {
  display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.4 var(--font-sans);
  padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.sl-badge-warning { background: var(--warning-tint); color: var(--warning); }
.sl-badge-accent { background: var(--accent-tint); color: var(--accent); }
.sl-badge-success { background: var(--success-tint); color: var(--success); }
.sl-badge-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* The filter tabs are links, and so they are buttons: 8px corners, never a pill. */
.sl-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.sl-tab {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; box-sizing: border-box;
  padding: 6px 12px; border-radius: var(--radius-control); font: 500 14px/1.2 var(--font-sans);
  color: var(--ink-secondary); text-decoration: none; transition: var(--transition-color);
}
.sl-tab:hover { color: var(--ink); background: var(--card-2); text-decoration: none; }
.sl-tab[aria-current="page"] { background: var(--accent-tint); color: var(--accent); }
.sl-tab-count { font: 400 12px/1.4 var(--font-sans); }

/* ── THE PHOTO AND THE FLAG ─────────────────────────────────────────────────── */
.sl-photo {
  display: block; flex: none; inline-size: 80px; block-size: 80px; box-sizing: border-box;
  border-radius: var(--radius-control); border: 1px solid var(--line); background: var(--card-2);
  object-fit: cover; cursor: zoom-in;
}
.sl-photo-empty { cursor: default; }
.sl-photo-lg { inline-size: 112px; block-size: 112px; }
.sl-flag { flex: none; inline-size: 40px; block-size: 28px; object-fit: cover; border: 1px solid var(--line); box-sizing: border-box; }
.sl-flag-sm { inline-size: 24px; block-size: 17px; }
.sl-flag-code {
  display: inline-grid; place-items: center; background: var(--card-2); color: var(--ink-secondary);
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.4px;
}

/* ── ONE ORDER ON THE LIST ──────────────────────────────────────────────────── */
.sl-order { display: grid; gap: 16px; padding: 24px; }
.sl-order-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.sl-order-main { display: flex; gap: 16px; min-inline-size: 0; flex: 1 1 320px; }
.sl-order-info { display: grid; gap: 4px; min-inline-size: 0; align-content: start; }
.sl-order-dest { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-inline-size: 0; }
.sl-order-country { margin: 0; font: 500 22px/1.25 var(--font-sans); letter-spacing: -0.4px; color: var(--ink); min-inline-size: 0; overflow-wrap: anywhere; }
.sl-order-recipient { font: 500 16px/1.5 var(--font-sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; }
.sl-order-qty { font: 400 16px/1.5 var(--font-sans); color: var(--ink); }
.sl-order-product { font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); overflow-wrap: anywhere; }
.sl-order-meta { font: 400 12px/1.4 var(--font-sans); color: var(--ink-secondary); }
.sl-order-side { display: grid; justify-items: end; gap: 12px; text-align: end; flex: 0 1 auto; min-inline-size: 0; }
.sl-order-elapsed { font: 400 14px/1.5 var(--font-sans); color: var(--ink); }
.sl-plain-state { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink); }
.sl-done { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--success); }
.sl-reminders { display: flex; gap: 8px; flex-wrap: wrap; }
.sl-phone-only { display: none; }

/* ── THE SIX STEPS, HORIZONTAL ──────────────────────────────────────────────── */
.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sl-step { display: grid; justify-items: center; align-content: start; text-align: center; gap: 6px; min-inline-size: 0; padding: 0 2px; }
.sl-step-track { position: relative; inline-size: 100%; block-size: 12px; display: grid; place-items: center; }
.sl-step-a, .sl-step-b { position: absolute; inset-block-start: 5px; block-size: 2px; inline-size: 50%; background: var(--step-future); }
.sl-step-a { inset-inline-start: 0; }
.sl-step-b { inset-inline-end: 0; }
.sl-step:first-child .sl-step-a, .sl-step:last-child .sl-step-b { display: none; }
.sl-step-dot { position: relative; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--step-future); }
.sl-step-reached .sl-step-a, .sl-step-reached .sl-step-b,
.sl-step-current .sl-step-a, .sl-step-received .sl-step-a { background: var(--step-reached); }
.sl-step-reached .sl-step-dot { background: var(--step-reached); }
.sl-step-current .sl-step-dot { background: var(--step-current); outline: 3px solid var(--accent-tint); }
.sl-step-received .sl-step-dot { background: var(--step-received); outline: 3px solid var(--success-tint); }
.sl-step-label { font: 500 12px/1.3 var(--font-sans); color: var(--ink-secondary); }
.sl-step-reached .sl-step-label { color: var(--ink); }
.sl-step-current .sl-step-label { color: var(--accent); font-weight: 600; }
.sl-step-received .sl-step-label { color: var(--success); font-weight: 600; }
.sl-step-date { font: 400 12px/1.4 var(--font-sans); color: var(--ink-secondary); min-block-size: 1.4em; }

/* ── ONE ORDER, THE PAGE ────────────────────────────────────────────────────── */
.sl-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
.sl-crumb-strong { color: var(--ink); font-weight: 500; }
.sl-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sl-col { display: grid; gap: 16px; min-inline-size: 0; }
.sl-product { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 20px; padding: 16px; }
.sl-product-body { min-inline-size: 0; }
.sl-product-name { margin: 0; font: 500 16px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.sl-product-sub { margin: 4px 0 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
.sl-lines { list-style: none; margin: 8px 0 0; padding: 0; }
.sl-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-block-start: 1px solid var(--line); font: 400 14px/1.5 var(--font-sans); color: var(--ink); }
.sl-table-wrap { overflow-x: auto; }
.sl-table { inline-size: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--font-sans); color: var(--ink); }
.sl-table th { font-weight: 500; color: var(--ink-secondary); text-align: start; padding-block: 0 10px; padding-inline: 0 12px; white-space: nowrap; }
.sl-table td { padding-block: 12px; padding-inline: 0 12px; border-block-start: 1px solid var(--line); white-space: nowrap; }
.sl-table tfoot td { font-weight: 500; }
.sl-table .sl-num { text-align: end; }
.sl-kv { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--line); font: 400 14px/1.5 var(--font-sans); }
.sl-stage { margin: 4px 0 8px; font: 500 22px/1.25 var(--font-sans); letter-spacing: -0.4px; color: var(--accent); }
.sl-stage-received { color: var(--success); }
.sl-divider { border-block-start: 1px solid var(--line); margin-block: 20px; }
.sl-track { display: grid; gap: 4px; }
.sl-track-no { font: 500 16px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }

/* The delivery rows. */
.sl-pile { margin: 16px 0 0; }
.sl-drow { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; padding-block: 14px; border-block-start: 1px solid var(--line); }
.sl-drow-main { min-inline-size: 0; flex: 1 1 200px; }
.sl-drow-label { font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
.sl-drow-value { font: 500 16px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.sl-drow-note { font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }

/* ── THE JOURNEY, VERTICAL, NEWEST FIRST ────────────────────────────────────── */
.sl-tl { list-style: none; margin: 0; padding: 0; }
.sl-tl-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding-block-end: 20px; }
.sl-tl-item:last-child { padding-block-end: 0; }
.sl-tl-item:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: 9px; inset-block-start: 22px; inset-block-end: 2px;
  inline-size: 2px; background: var(--line);
}
.sl-tl-rail { display: flex; justify-content: center; }
.sl-tl-dot { display: block; inline-size: 12px; block-size: 12px; margin-block-start: 6px; border-radius: 50%; background: var(--step-reached); }
.sl-tl-current .sl-tl-dot { background: var(--step-current); outline: 3px solid var(--accent-tint); }
.sl-tl-received .sl-tl-dot { background: var(--step-received); outline: 3px solid var(--success-tint); }
.sl-tl-future .sl-tl-dot { background: var(--step-future); }
.sl-tl-label { font: 400 16px/1.5 var(--font-sans); color: var(--ink); }
.sl-tl-current .sl-tl-label { color: var(--accent); font-weight: 500; }
.sl-tl-received .sl-tl-label { color: var(--success); font-weight: 500; }
.sl-tl-future .sl-tl-label { color: var(--ink-secondary); }
.sl-tl-when { margin-block-start: 2px; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
.sl-tl-note { margin-block-start: 4px; font: 400 14px/1.5 var(--font-sans); color: var(--ink); }

.sl-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }

@media (max-width: 1023px) {
  .sl-detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sl-order { padding: 16px; gap: 12px; }
  .sl-order-top { flex-direction: column; gap: 12px; }
  /* Stacked, the desktop's 320px flex-basis would become a 320px HEIGHT (seen on a phone). */
  .sl-order-main { flex: 0 0 auto; }
  .sl-order-side { justify-items: start; text-align: start; }
  .sl-photo { inline-size: 60px; block-size: 60px; }
  .sl-photo-lg { inline-size: 88px; block-size: 88px; }
  .sl-product { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .sl-order-country { font-size: 18px; }
  .sl-flag { inline-size: 36px; block-size: 24px; }
  .sl-card-pad { padding: 16px; }
  /* Six step words do not fit 390px: the line keeps its dots and says the step once below. */
  .sl-step-label, .sl-step-date { display: none; }
  .sl-phone-only { display: flex; align-items: center; gap: 8px; }
}

/* ── SETTINGS (2026-09-24) ── the reader's own look, and who is signed in. */
.sl-settings { display: grid; gap: 16px; max-inline-size: 740px; }
.sl-radios { display: grid; gap: 4px; }
.sl-radio {
  display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding: 0 4px;
  font: 400 16px/1.5 var(--font-sans); color: var(--ink); cursor: pointer;
}
.sl-radio input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sl-account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sl-account-row .sl-muted { overflow-wrap: anywhere; }
/* The forms on it: three fields a row on a computer, one on a phone; the main button at the
   end; a read-only field (the sign-in email) reads as text, not as a box to type in. */
.sl-form { display: grid; gap: 16px; }
.sl-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sl-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.sl-field-note { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--ink-secondary); }
.sl-input[readonly] { background: var(--card-2); color: var(--ink-secondary); cursor: default; }
.sl-saved { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-secondary); }
/* A row that opens a form under it (Password). The summary is the whole row; its "button"
   is a look, the row is the control. */
.sl-reveal > summary { list-style: none; cursor: pointer; }
.sl-reveal > summary::-webkit-details-marker { display: none; }
.sl-reveal-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Open, the row's own button is hidden: the form's buttons are the ones to press (two
   "Change password" controls, one of which closed the form, confused the review). */
.sl-reveal[open] > .sl-reveal-row > .sl-btn { visibility: hidden; }
.sl-reveal-label { display: block; font: 400 16px/1.5 var(--font-sans); color: var(--ink); }
.sl-reveal-sub { display: block; font-size: 12px; }
.sl-reveal-body { margin-block-start: 20px; padding-block-start: 20px; border-block-start: 1px solid var(--line); }
.sl-textarea { min-block-size: 76px; resize: vertical; font: inherit; line-height: 1.5; }
.sl-warn-line { margin: 0 0 16px; }
.sl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); }
.sl-list-row { padding: 12px 16px; }
.sl-list-row + .sl-list-row { border-block-start: 1px solid var(--line); }
.sl-list-main { display: flex; align-items: flex-start; gap: 12px; min-inline-size: 0; flex: 1 1 260px; }
.sl-list-icon { flex: none; margin-block-start: 3px; color: var(--ink-secondary); }
.sl-list-title { display: block; font: 400 16px/1.5 var(--font-sans); color: var(--ink); overflow-wrap: anywhere; }
.sl-list-sub { display: block; font-size: 12px; }
.sl-pre { white-space: pre-line; }
.sl-remove-form { display: flex; justify-content: flex-end; margin-block-start: 8px; }
.sl-add > summary { list-style: none; }
.sl-add > summary::-webkit-details-marker { display: none; }
.sl-add-row { display: flex; justify-content: flex-end; margin-block-start: 16px; cursor: pointer; }
.sl-add[open] > .sl-add-row { display: none; }
.sl-team-empty { margin: 12px 0 0; }
.sl-check { display: flex; align-items: center; gap: 8px; font: 400 14px/1.5 var(--font-sans); color: var(--ink); }
.sl-check input { inline-size: 16px; block-size: 16px; margin: 0; accent-color: var(--accent); }
@media (max-width: 767px) {
  .sl-form-grid { grid-template-columns: minmax(0, 1fr); }
}