/* PVS SUPPORT SITE: tokens, page frame, components. ONE vocabulary for every customer page (30 Oct 2026, owner: "consistent styling").
   Loaded on every page BEFORE the page's own CSS; chrome.css (announcement, header, footer) loads after it.

   🔴 THE RULE: a colour, a size, a radius or a layout that belongs to the SITE lives here. A page keeps only what is that page's alone
   (its map, its gallery). ⛔ No page-local copy of a button, a card, a field or a container width.

   TOKENS   --sp-*  light and dark from the device. A page that is not dark-ready says so with <body class="sp-light"> and stays light in
            both (header and footer follow it). The account pages' --a-* names are aliases of these (account.css).
   FRAME    .sp-wrap (the container) and .sp-cols (main + side column).
            desktop  >= 1100  container 1180, main + 340px side column, side sticky
            iPad     700-1099 container 760 (portrait: side cards drop under the main in two columns; landscape 1024+ keeps the side column)
            iPhone   < 700    full width, 16px gutters, side cards stacked, big touch targets
   COMPONENTS  .sp-hero .sp-card .sp-btn .sp-field .sp-pill .sp-note .sp-list .sp-side */

:root {
  --sp-bg: #f5f5f7; --sp-card: #fff; --sp-ink: #1d1d1f; --sp-ink2: #6e6e73; --sp-ink3: #8e8e93;
  --sp-line: rgba(60,60,67,.16); --sp-blue: #0070d5; --sp-btn: #111; --sp-btn-ink: #fff;
  --sp-danger: #c4001a; --sp-ok: #1b8a3f; --sp-warn: #8a5300; --sp-chip: rgba(118,118,128,.12);
  --sp-field: #fff; --sp-field-line: rgba(60,60,67,.3); --sp-hd-bg: rgba(255,255,255,.94);
  --sp-radius: 18px; --sp-radius-sm: 12px; --sp-gutter: clamp(16px, 3vw, 40px);
  --sp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sp-bg: #000; --sp-card: #1c1c1e; --sp-ink: #f5f5f7; --sp-ink2: #a1a1a6; --sp-ink3: #8e8e93;
    --sp-line: rgba(235,235,245,.16); --sp-blue: #4da3ff; --sp-btn: #f5f5f7; --sp-btn-ink: #111;
    --sp-danger: #ff6b6b; --sp-ok: #4cd27a; --sp-warn: #ffc24d; --sp-chip: rgba(235,235,245,.14);
    --sp-field: #2c2c2e; --sp-field-line: rgba(235,235,245,.3); --sp-hd-bg: rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
/* A page that has not been made dark-ready: the light values, in both themes. */
body.sp-light {
  --sp-bg: #fff; --sp-card: #fff; --sp-ink: #1d1d1f; --sp-ink2: #6e6e73; --sp-ink3: #8e8e93;
  --sp-line: rgba(60,60,67,.16); --sp-blue: #0070d5; --sp-btn: #111; --sp-btn-ink: #fff;
  --sp-danger: #c4001a; --sp-ok: #1b8a3f; --sp-warn: #8a5300; --sp-chip: rgba(118,118,128,.12);
  --sp-field: #fff; --sp-field-line: rgba(60,60,67,.3); --sp-hd-bg: rgba(255,255,255,.94);
  color-scheme: light;
}

/* ── page frame ── */
body.sp, body.p-util { background: var(--sp-bg); color: var(--sp-ink); font-family: var(--sp-font); -webkit-font-smoothing: antialiased; margin: 0; }
body.sp a, body.p-util a { color: var(--sp-blue); }
.sp-main { display: block; }
.sp-wrap { max-width: calc(1180px + 2 * var(--sp-gutter)); margin: 0 auto; padding: 0 var(--sp-gutter); box-sizing: border-box; }
.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.sp-cols > .sp-side { position: sticky; top: 84px; display: grid; gap: 16px; }
.sp-cols.is-single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1099px) {
  .sp-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sp-cols > .sp-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-wrap { max-width: calc(760px + 2 * var(--sp-gutter)); }
}
/* iPad landscape keeps the side column: it is wide enough */
@media (min-width: 1000px) and (max-width: 1099px) and (orientation: landscape) {
  .sp-cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .sp-cols > .sp-side { grid-template-columns: minmax(0, 1fr); position: sticky; top: 84px; }
  .sp-wrap { max-width: calc(1000px + 2 * var(--sp-gutter)); }
}
@media (max-width: 699px) { .sp-cols > .sp-side { grid-template-columns: minmax(0, 1fr); } }

/* ── hero: the page's title band (no image) ── */
.sp-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); }
.sp-hero h1 { margin: 0 0 10px; font-size: clamp(32px, 4.2vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.025em; color: var(--sp-ink); text-wrap: balance; }
.sp-hero p { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.45; color: var(--sp-ink2); text-wrap: pretty; }
@media (max-width: 699px) { .sp-hero { padding: 28px 0 16px; } .sp-hero h1 { font-size: 32px; } .sp-hero p { font-size: 16px; } }

/* ── card / side card ── */
.sp-card { background: var(--sp-card); border-radius: var(--sp-radius); padding: 28px; margin: 0 0 16px; box-sizing: border-box; }
.sp-cols > .sp-side .sp-card { margin: 0; padding: 22px 24px; }
.sp-card h2, .sp-card .sp-h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--sp-ink); }
.sp-side .sp-card h2 { font-size: 16px; }
.sp-card p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--sp-ink2); text-wrap: pretty; }
.sp-card p:last-child { margin-bottom: 0; }
@media (max-width: 699px) { .sp-card { padding: 20px; border-radius: 16px; } }

/* ── buttons: the black pill. ONE definition. ── */
.sp-btn, body.sp a.sp-btn, body.sp button.sp-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 48px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--sp-btn); color: var(--sp-btn-ink) !important; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; margin: 0; }
.sp-btn:hover { opacity: .88; }
.sp-btn[disabled] { opacity: .4; cursor: default; }
.sp-btn.is-ghost, body.sp a.sp-btn.is-ghost { background: var(--sp-chip); color: var(--sp-ink) !important; }
.sp-btn.is-block { display: flex; width: 100%; }
.sp-link { color: var(--sp-blue); text-decoration: none; font-weight: 500; }
.sp-link:hover { text-decoration: underline; }

/* ── form fields ── */
.sp-field { margin: 0 0 18px; min-width: 0; }
.sp-field label, .sp-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--sp-ink2); }
.sp-field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .sp-field select, .sp-field textarea, input.sp-input, select.sp-input, textarea.sp-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 14px; border: 1px solid var(--sp-field-line); border-radius: var(--sp-radius-sm);
  background: var(--sp-field); color: var(--sp-ink); font: inherit; font-size: 17px; appearance: none; -webkit-appearance: none; }
.sp-field textarea, textarea.sp-input { padding: 12px 14px; min-height: 120px; line-height: 1.45; resize: vertical; }
.sp-field select, select.sp-input { background-image: linear-gradient(45deg, transparent 50%, var(--sp-ink3) 50%), linear-gradient(135deg, var(--sp-ink3) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.sp-field input::placeholder, .sp-field textarea::placeholder { color: var(--sp-ink3); }
.sp-field input:focus-visible, .sp-field select:focus-visible, .sp-field textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--sp-blue) 45%, transparent); outline-offset: 1px; border-color: var(--sp-blue); }
.sp-field [aria-invalid="true"] { border-color: var(--sp-danger); }
.sp-fe, .sp-err { margin: 6px 0 0; font-size: 14px; color: var(--sp-danger); }
.sp-hint { margin: 6px 0 0; font-size: 13.5px; color: var(--sp-ink3); }
.sp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 699px) { .sp-row2 { grid-template-columns: 1fr; } }

/* ── status pill, note, list ── */
.sp-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--sp-chip); color: var(--sp-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sp-pill.is-ok { background: rgba(27,138,63,.14); color: var(--sp-ok); }
.sp-pill.is-info { background: rgba(0,112,213,.14); color: var(--sp-blue); }
.sp-pill.is-warn { background: rgba(255,178,36,.2); color: var(--sp-warn); }
.sp-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--sp-ink2); text-wrap: pretty; }
.sp-note a { font-weight: 500; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-list li { border-top: 1px solid var(--sp-line); }
.sp-list li:first-child { border-top: 0; }
.sp-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 0; color: var(--sp-ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.sp-list a::after { content: ""; width: 7px; height: 7px; border: solid var(--sp-ink3); border-width: 2px 2px 0 0; transform: rotate(45deg); flex: none; }
.sp-list a:hover { color: var(--sp-blue); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ── shared pieces the pages use ── */
.sp-hero { background: none; }
.sp-card-note { margin: 0; padding: 22px 24px; border-radius: var(--sp-radius); background: var(--sp-card); font-size: 15px; line-height: 1.5; color: var(--sp-ink2); box-sizing: border-box; }
.sp-card-note a { font-weight: 500; }
/* A lookup page keeps the plain .wrap for its RESULT view (the tracking layout owns that); the form state is a .sp-wrap frame. */
body.p-util:not(.is-result) .wrap:not(.sp-wrap) { max-width: none; padding: 0; }
body.p-util:not(.is-result) .wrap > .sp-wrap { padding-top: 0; }

/* ── the p-util template (the /orders form state, /tickets): its legacy classes drawn in the site tokens, so the JS-built states
   (code entry, ticket list, thread, reply box) follow the device's light/dark with no change to the scripts ── */
body.p-util .card { background: var(--sp-card); border-radius: var(--sp-radius); padding: 28px; box-shadow: none; }
body.p-util .card.alerts { border: 1px solid var(--sp-line); }
body.p-util label { color: var(--sp-ink2); font-size: 14px; font-weight: 500; }
body.p-util input, body.p-util textarea { background: var(--sp-field); color: var(--sp-ink); border: 1px solid var(--sp-field-line); border-radius: var(--sp-radius-sm); min-height: 48px; }
body.p-util textarea { border-radius: var(--sp-radius-sm); }
body.p-util input:focus, body.p-util textarea:focus { border-color: var(--sp-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-blue) 30%, transparent); }
body.p-util button:not(.link) { background: var(--sp-btn); color: var(--sp-btn-ink); }
body.p-util .thumb button { background: rgba(0,0,0,.65); color: #fff; }
body.p-util .err { color: var(--sp-danger); }
body.p-util .note, body.p-util .sub, body.p-util .ok, body.p-util .empty { color: var(--sp-ink2); }
body.p-util .foot { border-top-color: var(--sp-line); }
body.p-util .foot a.btn { background: var(--sp-btn); color: var(--sp-btn-ink); }
body.p-util .thumb { background: var(--sp-chip); }
@media (max-width: 699px) { body.p-util .card { padding: 20px; border-radius: 16px; } }
.sp-backrow, .oh-backrow { margin: 0; padding: 8px 0 0; }