/* ─────────────────────────────────────────────────────────────────────────────
   PVS Support Portal — the ONE stylesheet every page on support.pvsautomotive.com.au
   shares. Extracted 2026-09-03, when six pages had each grown their own copy of it.

   🔴 THE RULE: a rule that belongs to the SITE lives here. A rule that belongs to ONE
   page stays in that page's <style>. ⛔ Never paste chrome or footer CSS back into a
   page — that is exactly how these drifted: identical footer markup on all six pages,
   five different footer stylesheets, and a .note that was a grey box on /tickets and
   plain text on /orders.

   THREE SECTIONS, and how far each one reaches:

     1. CHROME    every page. Top bar, brand, nav, page background, link colour.
     2. FOOTER    every page. The store footer. Markup is byte-identical on all six.
     3. TEMPLATE  only pages that declare <body class="p-util">, today /orders and
                  /tickets. Those two ARE one template: hero band, wrap, card, form
                  controls, note, and the result head.

   ⚠️ Section 3 is scoped ON PURPOSE. It styles bare `input`, `button` and `label`,
   and /index (a search box and ten buttons) and /downloads (a filter input) have
   their own. Unscope these and you restyle those controls.

   ⚠️ The scope is written `:where(.p-util)`, which adds NO specificity. A page can
   still override any of it with a plain `.card { }` in its own <style>, exactly as
   it could when these rules were local. ⛔ Never change it to a bare `.p-util `
   prefix: that outranks the pages' own rules and silently breaks their overrides.

   Palette is DJI-measured and literal, light-only: page #fff · cards #f5f5f5 flat
   radius 0 · ink rgba(0,0,0,.85) · secondary rgba(0,0,0,.45) · blue #0070D5 ·
   black pill buttons. ws-system.css still loads alongside, for text-wrap:pretty.

   🔴 Cloudflare caches this for 4 HOURS by extension. tools/build_hub.py stamps the
   ?v= content hash into every page, so after editing this file, RUN THAT BUILD.
   ───────────────────────────────────────────────────────────────────────────── */

/* ═══ 1. CHROME — every page ═══════════════════════════════════════════════════ */

body {
  background: #fff; color: rgba(0,0,0,.85); margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
a { color: #0070D5; }
.bar {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 3vw, 40px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { height: 22px; display: block; }
.brand-sub {
  font-size: 15px; font-weight: 600; letter-spacing: -.02em; text-decoration: none;
  color: rgba(0,0,0,.85); margin-right: auto;
}
/* ⚠️ The nav SCROLLS rather than pushing the page (21 Sep 2026). Its .anchor-link items only
   hide below 760px, so between 761 and 768 every link showed and the row measured 827px inside
   a 768px tablet: the whole page scrolled sideways. Adding "Warranty Registration" is what
   tipped it over. Scrolling the nav fixes every width at once, including the next link someone
   adds. ⛔ Do not solve this by deleting a link. */
.bar-nav {
  display: flex; align-items: center; gap: 22px;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bar-nav::-webkit-scrollbar { display: none; }
.bar-nav a {
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: rgba(0,0,0,.65);
}
.bar-nav a.act { color: #0070D5; }
.bar-nav a:hover { color: rgba(0,0,0,.85); }
@media (max-width: 760px) {
  .bar-nav .anchor-link { display: none; }
}
@media (max-width: 560px) {
  .brand-sub { display: none; }
  .bar-in { gap: 10px; }
  .bar-nav { gap: 13px; margin-left: auto; }
  .bar-nav a { font-size: 13px; }
}
/* ⚠️ 320px, the iPhone SE. Shop + Track order + Check a ticket at 13px with 13px gaps, next
   to the mark, came to 325px: 5px wider than the screen, so EVERY portal page scrolled
   sideways there. Found 21 Sep 2026 while checking the new /warranty page, and it was never
   that page's bug. Two gaps and half a point of type buy back more than the 5px.
   ⛔ The links do not wrap instead: a header that becomes two rows on the narrowest phone
   pushes the hero off the first screen, which costs more than it saves. */
@media (max-width: 380px) {
  .bar-nav { gap: 9px; }
  .bar-nav a { font-size: 12.5px; }
}

/* 🔴 THE PORTAL IS LIGHT-ONLY (see the palette note at the top): every surface on this
   site is a literal light value in BOTH themes. ws-system.css loads in front of this file
   and it does have a real dark theme, so this block cancels the three things it changes
   that this site never asked for. ⛔ Cancel them HERE, never in ws-system.css: every other
   app genuinely goes dark and needs them.
     1. color-scheme:dark on :root hands the BROWSER's own widgets to dark. Chrome then
        paints an autofilled email or order number as a dark box on our white form, and
        the scrollbar track and arrows follow it. Nothing in CSS can repaint those.
     2. the black wordmark gets inverted, on the assumption the chrome went dark with it.
        Here the top bar stays white, so the logo vanished into it.
     3. the scrollbar thumb goes #48484E, a dark bar down a white page, and the search
        dropdown on / scrolls, so it shows up mid-page and not just at the window edge.
   The two thumb values below are ws-system's OWN light ones, so dark now matches light
   exactly. The footer wordmark is the white asset on a black footer: untouched by any of
   this, and it must stay that way. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
  .brand img[src*="pvs-logo-black"] { filter: none !important; }
  *::-webkit-scrollbar-thumb { background: #c7c7cc; }
  *::-webkit-scrollbar-thumb:hover { background: #a8a8ae; }
}

/* ═══ 2. FOOTER — every page ══════════════════════════════════════════════════ */
/* Measured off pvsautomotive.com.au (footer.pvs-apple-footer, 2026-09-02). Literal
   black in both themes, exactly like the store. ⛔ NO SUBURB beyond "Sydney, NSW,
   Australia" and ⛔ NO PHONE NUMBER, comments included.
   ⛔ Not to be confused with .foot in section 3, which is the "Still not right?"
   ticket route inside /orders' result view. */

.pvs-apple-footer {
  background: #000000; color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 110px; padding: 56px 0 32px;
}
.pvs-apple-footer a { text-decoration: none; }
.pvs-footer-inner { max-width: 1600px; margin: 0 auto; padding: 0 40px; }
.pvs-footer-mark {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: end;
  margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.pvs-footer-mark-logo { height: 80px; width: auto; display: block; max-width: none; }
.pvs-footer-mark-text { text-align: right; display: flex; flex-direction: column; gap: 8px; }
.pvs-footer-mark-jp { font-size: 14px; letter-spacing: .28em; color: rgba(255,255,255,0.6); margin: 0; }
.pvs-footer-mark-en { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: 0; }
.pvs-footer-grid {
  display: grid; grid-template-columns: minmax(440px, 2.6fr) repeat(5, 1fr); gap: 40px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
.pvs-footer-brand { padding-right: 24px; }
.pvs-footer-brand-logo { height: 10px; width: auto; display: block; margin: 0 0 22px; opacity: .4; }
.pvs-footer-brand p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.85); margin: 0; max-width: none; }
.pvs-footer-brand .biz {
  margin-top: 24px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); line-height: 1.9;
}
.pvs-footer-acc { margin: 0; }
.pvs-footer-acc + .pvs-footer-acc { margin-top: 24px; }
.pvs-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pvs-footer-heading {
  font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin: 0 0 20px; line-height: 1.4; list-style: none;
}
.pvs-footer-heading::-webkit-details-marker { display: none; }
.pvs-footer-col ul li a { color: #ffffff; font-size: 14px; line-height: 1.2; transition: opacity .2s, color .2s; }
.pvs-footer-col ul li a:hover { color: rgba(255,255,255,0.55); }
.pvs-footer-bottom {
  padding-top: 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.pvs-footer-bottom p { margin: 0; font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,0.4); }
.pvs-footer-bottom-links { display: flex; flex-wrap: wrap; gap: 24px; }
.pvs-footer-bottom-links a { font-size: 11px; letter-spacing: .18em; color: rgba(255,255,255,0.55); transition: color .2s; }
.pvs-footer-bottom-links a:hover { color: #fff; }
@media (min-width: 769px) {
  .pvs-footer-heading { cursor: default; }
}
@media (max-width: 1100px) {
  .pvs-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .pvs-footer-brand { grid-column: 1 / -1; max-width: none; }
  .pvs-footer-brand p { max-width: 640px; }
}
@media (max-width: 768px) {
  .pvs-apple-footer { margin-top: 80px; padding: 36px 0 32px; }
  .pvs-footer-inner { padding: 0 20px; }
  .pvs-footer-grid { display: block; padding-bottom: 8px; }
  .pvs-footer-col { display: block; }
  .pvs-footer-brand { grid-column: auto; padding-bottom: 8px; padding-right: 0; }
  .pvs-footer-acc { border-bottom: 1px solid rgba(255,255,255,0.1); margin: 0; }
  .pvs-footer-heading {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; padding: 17px 2px; margin: 0;
}
  .pvs-footer-heading::after { content: '+'; font-size: 20px; font-weight: 300; line-height: 1; color: rgba(255,255,255,0.55); }
  .pvs-footer-acc[open] .pvs-footer-heading::after { content: '\2212'; }
  .pvs-footer-acc > ul { padding: 2px 2px 16px; }
  .pvs-footer-mark { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; padding-bottom: 28px; }
  .pvs-footer-mark-logo { height: 48px; }
  .pvs-footer-mark-text { text-align: left; }
  .pvs-footer-mark-jp { font-size: 12px; letter-spacing: .18em; }
  .pvs-footer-mark-en { font-size: 10px; }
  .pvs-footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pvs-footer-bottom-links { gap: 10px 18px; }
}

/* ═══ 3. TEMPLATE — <body class="p-util"> only: /orders and /tickets ═════════ */
/* Estate hero band, no-image version: the same gradient as service.html's fallback.
   🔴 The <h1> lives in the hero, never inside the JS view, so it survives a state
   swap and never renders twice. ⛔ Never put an <h1> back inside the view. */

:where(.p-util) .hero { background: linear-gradient(180deg, #f7fbfe 0%, #f2f6f9 100%); }
:where(.p-util) .hero-in { max-width: 1200px; margin: 0 auto; padding: 64px clamp(16px, 3vw, 40px); }
:where(.p-util) .hero-in h1 {
  font-size: 48px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  color: rgba(0,0,0,.85); margin: 0 0 12px; text-align: left;
}
:where(.p-util) .hero-in p { font-size: 16px; color: rgba(0,0,0,.45); line-height: 1.5; margin: 0; }
:where(.p-util) .wrap { max-width: 720px; margin: 0 auto; padding: 48px clamp(16px, 3vw, 40px) 0; }
:where(.p-util) .back { color: #0070D5; text-decoration: none; font-size: 15px; }
:where(.p-util) .card { background: #f5f5f5; border-radius: 0; box-shadow: none; padding: 48px; }
:where(.p-util) label { display: block; font-size: 13px; font-weight: 600; color: rgba(0,0,0,.55); margin-bottom: 8px; }
:where(.p-util) input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 13px 15px;
  border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
  background: #fff; color: rgba(0,0,0,.85);
}
:where(.p-util) input:focus { outline: none; border-color: #0070D5; box-shadow: 0 0 0 3px rgba(0,112,213,.15); }
:where(.p-util) .field + .field { margin-top: 20px; }
:where(.p-util) button {
  font: inherit; font-weight: 500; font-size: 16px; padding: 13px 24px; border: 0;
  border-radius: 999px; background: #111; color: #fff;
  cursor: pointer; margin-top: 24px;
}
:where(.p-util) button:hover { opacity: .88; }
:where(.p-util) button[disabled] { opacity: .4; cursor: default; }
:where(.p-util) .err { color: #C62828; font-size: 14px; margin-top: 12px; }
:where(.p-util) .ordhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 24px; }
:where(.p-util) .ordno { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
:where(.p-util) .ordwhen { color: rgba(0,0,0,.4); font-size: 14px; }
:where(.p-util) .note { color: rgba(0,0,0,.4); font-size: 13.5px; line-height: 1.6; margin-top: 24px; }
:where(.p-util) .note a { color: #0070D5; font-weight: 500; }
:where(.p-util) .foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(0,0,0,.1); }
:where(.p-util) .foot h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
:where(.p-util) .foot p { color: rgba(0,0,0,.45); font-size: 15px; margin: 0 0 16px; }
:where(.p-util) .foot a.btn {
  display: inline-block; background: #111; color: #fff;
  text-decoration: none; padding: 12px 22px; border-radius: 999px; font-size: 15px;
}
:where(.p-util) [hidden] { display: none !important; }
@media (max-width: 760px) {
  :where(.p-util) .hero-in { text-align: center; padding: 48px clamp(16px, 3vw, 40px); }
  :where(.p-util) .hero-in h1 { font-size: 32px; text-align: center; }
  :where(.p-util) .card { padding: 24px; }
}
