/* ══════════════════════════════════════════════════════════════════════════
   APPLE — a trial theme, scoped entirely under body.apple-mode, so this file
   is inert until that class is on <body>. Offered on the dashboard only
   (2026-09-14); a device that saved it opens every other page in Neumorphic
   — see current() in theme-switch.js.

   The look of apple.com, as catalogued in VoltAgent's DESIGN.md for Apple:
   a parchment canvas (#f5f5f7), white cards with a 1px hairline and an 18px
   radius, one action blue (#0066cc) for everything interactive, near-black
   ink (#1d1d1f) with a muted grey beside it, system type at weight 600 with
   negative tracking for headlines and 400 for body, a true-black global
   nav, and dark near-black tiles for contrast. No gradients, no shadows on
   chrome, press = scale(0.95). Nothing is moved: every panel stays where it
   is, only its dress changes.

   Same constraint as auroraui.css: dark.css is linked from topbar.php INSIDE
   <body>, after this sheet, so surface rules carry !important or lose on
   source order.
   ══════════════════════════════════════════════════════════════════════════ */

html[data-boot-theme="apple"] { background: #f5f5f7; }

body.apple-mode {
  --ap-blue:    #0066cc;
  --ap-blue-hi: #0071e3;
  --ap-ink:     #1d1d1f;
  --ap-mid:     #424245;
  --ap-soft:    #86868b;
  --ap-canvas:  #f5f5f7;
  --ap-ground:  #f5f5f7;
  --ap-white:   #fafafc;   /* Apple's pearl, one step off white: less glare across a dozen cards (Luis, 2026-09-14) */
  --ap-line:    rgba(0, 0, 0, 0.08);
  --ap-line-soft: rgba(0, 0, 0, 0.05);
  --ap-tile:    #272729;
  /* The house accent ramp — deep, mid, light — used by the hero's Cash arc,
     the top bar and quick-button icons, the profit rings and tiles, the
     table's money and the cart total. Trial (Luis, 2026-09-14): the plum of
     the new iPhone. The in-house green it replaced is kept here to swap back:
       --ap-acc-deep: var(--ap-acc-deep);  --ap-acc: var(--ap-acc);  --ap-acc-light: var(--ap-acc-light);
       --ap-acc-rgb: var(--ap-acc-rgb); */
  --ap-acc-deep:  #4a2531;
  --ap-acc:       #6b3744;
  --ap-acc-light: #b07a89;
  --ap-acc-rgb:   107, 55, 68;
  --ap-font:    'SF Mono', ui-monospace, Menlo, Consolas, 'Courier New', monospace; /* the house font, self-hosted in fonts/ (Luis, 2026-09-14) */
  --glass-bg:     var(--ap-white);
  --glass-border: var(--ap-line);
  --glass-shadow: transparent;
  --text-primary:   var(--ap-ink);
  --text-secondary: var(--ap-soft);
  --brand-blue:     var(--ap-blue);
  background: var(--ap-ground) !important;
  color: var(--ap-ink);
  font-family: var(--ap-font);
  -webkit-font-smoothing: antialiased;
}

/* ── The ground: a plain split (Luis, 2026-09-14) — parchment #f5f5f7
   meeting Apple's chip grey #e8e8ed (their rgba(210,210,215,.64) over
   white) on a 112° diagonal at half the width, a pool of the grey
   spilling in from the top-left, and a seam a shade deeper, faded out
   under the top bar. No pattern. ──────────────────────────────────────── */
body.apple-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* Top-left: the plum, at the same faintness as the sage opposite (Luis, 2026-09-14). */
    radial-gradient(75% 65% at 0% 0%, #e5d8dc 0%, rgba(229, 216, 220, 0.85) 25%, rgba(229, 216, 220, 0) 62%),
    /* The meeting line blurred (Luis, 2026-09-14): the two greys cross over a
       band about a tenth of the width wide instead of a hard edge. */
    /* The right-hand grey blended with the deep green of the box Luis showed
       (#2f6b5f at about an eighth): a sage grey against the parchment. */
    /* The diagonal went (Luis): the sage is two pools now, the same size,
       one from the top-left corner and one from the bottom-right, on parchment. */
    radial-gradient(75% 65% at 100% 100%, #d2ddd7 0%, rgba(210, 221, 215, 0.85) 25%, rgba(210, 221, 215, 0) 62%),
    #f5f5f7;
}
body.apple-mode::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(210, 210, 215, 0) 0, rgba(210, 210, 215, 0) 64px,
    rgba(210, 210, 215, 0.8) 160px, rgba(210, 210, 215, 0.8) 100%);
  transform: skewX(-22deg);
  transform-origin: top;
}

/* ── Surfaces: white cards, one hairline, 18px, no shadow ─────────────────── */
body.apple-mode .card,
body.apple-mode .card-compact,
body.apple-mode .card-wide,
body.apple-mode .table-wrap {
  /* This ground is overpainted by the card-fill rule further down (the three
     white pools over the warm grey, which lists .table-wrap); a colour set
     here never shows. Change the card fill there, not here. */
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  color: var(--ap-ink);
}
body.apple-mode .card:hover,
body.apple-mode .card-compact:hover,
body.apple-mode .card-wide:hover { transform: none; box-shadow: none !important; }
body.apple-mode .card-divider,
body.apple-mode hr { border: none !important; height: 1px; background: var(--ap-line-soft) !important; opacity: 1; }
body.apple-mode .totals-merged .tm-col + .tm-col { border-left-color: var(--ap-line-soft) !important; }

/* ── The hero panel: the same white card as the rest (Luis, 2026-09-14).
   The page's JS draws its charts in the dark design's cream, white and
   amber, so the series are relit here: amber → the action blue, cream →
   ink, white hairlines → black at 8%. Same attribute selectors liquid.css
   and neumorphic.css use. ─────────────────────────────────────────────── */
body.apple-mode .hero-card {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  animation: none !important;
}
body.apple-mode .hero-card::before { display: none; }
body.apple-mode .hero-card :is(.hero-h, .hero-spark-val, .hero-vs-k, .hero-top-name, .hero-top-amt, .hero-gcons .hero-gval) { color: var(--ap-ink) !important; font-family: var(--ap-font) !important; }
body.apple-mode .hero-card :is(.hero-sub, .hero-dots, .hero-kpi-unit, .hero-spark-axis, .hero-spark-name, .hero-spark-val small, .hero-glab, .hero-cur, .hero-gflab, .hero-vs-lab, .hero-vs-sub, .hero-vs-row, .hero-vs-v, .hero-vs-delta, .hero-top-lab) { color: var(--ap-soft) !important; font-family: var(--ap-font) !important; }
body.apple-mode .hero-card :is(.hero-kpi-val, .hero-gprod .hero-gval) { color: var(--ap-lift) !important;   /* the top bar icons' green (Luis, 2026-09-14) */ }
body.apple-mode .hero-card .hero-kpi-ico { background: rgba(var(--ap-acc-rgb), 0.12) !important; color: var(--ap-lift) !important; }
body.apple-mode .hero-card :is(.hero-up, .hero-vs-delta.is-up)     { color: #1d9a4b !important; }
body.apple-mode .hero-card :is(.hero-down, .hero-vs-delta.is-down) { color: #d70015 !important; }
body.apple-mode .hero-card :is(.hero-gfoot, .hero-vs-rows, .hero-top-rows) { border-top-color: var(--ap-line) !important; }
body.apple-mode .hero-card .hero-vs-row { border-bottom-color: var(--ap-line-soft) !important; }
body.apple-mode .hero-card .hero-gdiv   { background: var(--ap-line) !important; }
body.apple-mode .hero-card .hero-dots   { border-color: var(--ap-line) !important; }
body.apple-mode [stop-color="#C2611F"] { stop-color: var(--ap-acc-deep) !important; }
body.apple-mode [stop-color="#F5B45C"] { stop-color: var(--ap-acc-light) !important; }
body.apple-mode [stroke="#E8873A"]     { stroke: var(--ap-acc) !important; }
body.apple-mode [fill="#E8873A"]       { fill: var(--ap-acc) !important; filter: none !important; }
body.apple-mode [stop-color="#E8873A"] { stop-color: var(--ap-acc) !important; }
body.apple-mode .hero-card [stroke="#F4EFE9"]     { stroke: #3f7a68 !important;   /* the Card series in the in-house green (Luis, 2026-09-14) */ }
body.apple-mode .hero-card [fill="#F4EFE9"]       { fill: #3f7a68 !important; }
body.apple-mode .hero-card [stop-color="#F4EFE9"] { stop-color: #8cc0aa !important; }
body.apple-mode .hero-card [stop-color="#6E6862"] { stop-color: #2f6152 !important; }
body.apple-mode .hero-card [stroke^="rgba(255,255,255"] { stroke: rgba(0, 0, 0, 0.08) !important; }
body.apple-mode .hero-card .hero-gauge-track  { stroke: rgba(0, 0, 0, 0.06) !important; }
body.apple-mode .hero-card .hero-gauge-needle { fill: #1d1d1f !important; }
body.apple-mode .hero-card .hero-gauge-cur    { fill: var(--ap-soft) !important; }

/* ── Type: the ladder is 400 / 600, tracking tightens as size grows ──────── */
/* The Active Repairs ticket cards are left exactly as they are (Luis,
   2026-09-14): every rule below that could reach inside one is guarded with
   :not(.repair-card *, .ar-hcard *, .ar-row *). */
body.apple-mode :is(.card-title, .table-title, h1, h2, h3, .hero-h):not(.repair-card *, .ar-hcard *, .ar-row *) {
  font-family: var(--ap-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ap-ink);
  text-shadow: none !important;
}
/* The headline figures keep the house "popup" (Luis, 2026-09-14): the same
   raised recipe liquid.css and neumorphic.css use — a ramp of the ink,
   deep at the top and lighter at the foot, clipped to the glyphs, lifted
   by a white edge above and a soft shadow below. In Apple's greys. */
body.apple-mode {
  --ap-figure-grad: linear-gradient(175deg, #1d1d1f 0%, #2c2c2e 42%, #6e6e73 100%);
  --ap-raise-filter: drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95)) drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.28));
  /* The same lift with the dark half pulled back: a shorter throw, less blur
     and roughly half the black. For figures sitting on a pale strip, where the
     full raise reads as heavy rather than as relief (Luis, 2026-09-15). */
  --ap-raise-soft:   drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95)) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15));
}
body.apple-mode :is(.card-value, .ws-value, .dc-ring-fig, .summary-value, .hero-gfval, .hero-gauge-nums,
                    #bankBalance, #paymentsTotal, #expGrandTotal, #othersBalance) {
  font-family: var(--ap-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  color: var(--ap-ink) !important;
  text-shadow: none !important;
  filter: var(--ap-raise-filter) !important;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.apple-mode :is(.card-value, .ws-value, .dc-ring-fig, .summary-value, .hero-gfval, .hero-gauge-nums,
                      #bankBalance, #paymentsTotal, #expGrandTotal, #othersBalance) {
    background-image: var(--ap-figure-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }
  /* The arrows inside the hero totals and the gauge's Cash figure inherit
     the transparent fill; give them their colours back. */
  body.apple-mode .hero-gfval .hero-up   { -webkit-text-fill-color: #1d9a4b !important; }
  body.apple-mode .hero-gfval .hero-down { -webkit-text-fill-color: #d70015 !important; }
  body.apple-mode .hero-gprod .hero-gval { -webkit-text-fill-color: var(--ap-lift) !important; }
}
body.apple-mode :is(.card-label, .card-desc, .table-subtitle, .ws-label, .cal-dow, .cal-title, .seller-name, .vbar-label, th, small, label):not(.repair-card *, .ar-hcard *, .ar-row *) {
  font-family: var(--ap-font) !important;
  font-weight: 600 !important;
  font-size: 12px;
  letter-spacing: 0 !important;
  text-transform: none;
  color: var(--ap-soft) !important;
  text-shadow: none !important;
}
body.apple-mode :is(td, .cal-day, .cal-month-year, .cal-selected-label, .pag-info, .cal-nav, .hero-vs-delta, .rep-name, .val-amount, .val-cost-on, .val-profit, .seller-amount, .vbar-amount, .ded-name):not(.repair-card *, .ar-hcard *, .ar-row *) {
  font-family: var(--ap-font) !important;
  color: var(--ap-ink) !important;
  text-shadow: none !important;
}
body.apple-mode .rep-region { color: var(--ap-soft) !important; }
body.apple-mode .cal-day.other-month { color: #c7c7cc !important; }

/* ── The sales table: flat rows, hairlines, the row is the button ─────────── */
body.apple-mode .table-wrap table th:last-child,
body.apple-mode .table-wrap table td:last-child:not([colspan]) { display: none; }
body.apple-mode .table-wrap table { border-collapse: collapse !important; border-spacing: 0 !important; }
body.apple-mode .table-wrap th { padding-bottom: 10px; border-bottom: 1px solid var(--ap-line) !important; background: transparent !important; }
body.apple-mode .table-wrap th .th-sub { font-weight: 400; opacity: 1; color: #aeaeb2; }
body.apple-mode .table-wrap tbody td {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--ap-line-soft) !important;
  padding-top: 14px !important; padding-bottom: 14px !important;
}
body.apple-mode .table-wrap tbody tr:last-child td { border-bottom: none !important; }
body.apple-mode #salesTableBody tr:has(.row-receipt-btn) { cursor: pointer; }
body.apple-mode #salesTableBody tr:has(.row-receipt-btn):hover td { background: var(--ap-canvas) !important; }
/* The sales table's lead figures and words: the Liquid theme's colours
   (Luis, 2026-09-14) — names and products in the ink ramp, money in the
   green ramp, a cost that is not zero in the logo's red ramp, a loss in
   rose; all at 0.875rem bold, raised. Second lines stay small and grey. */
body.apple-mode .table-wrap :is(.rep-name, .val-amount, .val-cost-on, .val-cost-off, .val-profit, .val-profit-neg) {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15;
  color: #3f7a68 !important;   /* the table keeps the in-house green whatever the accent (Luis, 2026-09-14) */
  text-shadow: none !important;
  /* A softer lift than the headline figures: at 14px the full shadow read as a grey smear (Luis, 2026-09-14). */
  filter: drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.95)) drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.16));
}
body.apple-mode .table-wrap .rep-name { color: var(--ap-ink) !important; }   /* words in the ink; colour is for figures (Luis, 2026-09-14) */
body.apple-mode .table-wrap .val-cost-on { color: #c9262e !important; }
body.apple-mode .table-wrap .val-profit-neg { color: #c9436e !important; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.apple-mode .table-wrap :is(.val-amount, .val-cost-off, .val-profit) {
    background-image: linear-gradient(175deg, #2f6152 0%, #3f7a68 42%, #6f9f8d 100%) !important;
  }
  body.apple-mode .table-wrap .rep-name    { background-image: var(--ap-figure-grad) !important; }
  body.apple-mode .table-wrap .val-cost-on { background-image: linear-gradient(175deg, #a5101a 0%, #d4262e 45%, #f05a5a 100%) !important; }
  body.apple-mode .table-wrap :is(.rep-name, .val-amount, .val-cost-on, .val-cost-off, .val-profit) {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
  }
  body.apple-mode .table-wrap .val-profit-neg { -webkit-text-fill-color: #c9436e !important; }
  body.apple-mode .table-wrap .rep-name .order-count-chip { font-size: 12px; font-weight: 600; letter-spacing: 0; -webkit-text-fill-color: initial; filter: none; background-image: none !important; }
}
body.apple-mode .table-wrap .rep-region { color: var(--ap-soft) !important; }
body.apple-mode .table-badge { background: var(--ap-canvas) !important; color: var(--ap-mid) !important; border: 1px solid var(--ap-line) !important; border-radius: 999px; font-weight: 400; }
body.apple-mode .order-count-chip { background: var(--ap-canvas) !important; color: var(--ap-mid) !important; border-radius: 999px; }

/* ── Controls: one blue, pill or 8px rect, press = scale(0.95) ────────────── */
body.apple-mode :is(.pag-btn, .pmt-pager-btn, .icon-btn, .sync-dash-btn, .bank-seg-btn):not(.repair-card *, .ar-hcard *, .ar-row *) {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  color: var(--ap-blue) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  text-shadow: none !important;
}
body.apple-mode :is(.pag-btn.active, .pag-btn.on, .bank-seg-btn.on, .bank-seg-btn.active):not(.repair-card *, .ar-hcard *, .ar-row *) { background: var(--ap-blue) !important; color: #fff !important; border-color: var(--ap-blue) !important; }
body.apple-mode a:not(.repair-card *, .ar-hcard *, .ar-row *) { color: var(--ap-blue); }
body.apple-mode :is(button, .pag-btn, .cal-day, .topbar-action, .topbar-icon-btn, .topbar-search-btn, .nav-item):not(.repair-card *, .ar-hcard *, .ar-row *):active { transform: scale(0.95) !important; transition: transform 100ms ease-out; }
body.apple-mode :is(input, select, textarea):not(.repair-card *, .ar-hcard *, .ar-row *) {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 999px !important;
  color: var(--ap-ink) !important;
  box-shadow: none !important;
  font-family: var(--ap-font) !important;
}
body.apple-mode :is(input, select, textarea):not(.repair-card *, .ar-hcard *, .ar-row *):focus { outline: 2px solid var(--ap-blue-hi) !important; outline-offset: 1px; border-color: transparent !important; }

/* ── The calendar: the chosen day is a blue pill ──────────────────────────── */
body.apple-mode .cal-day { border-radius: 999px !important; box-shadow: none !important; background: transparent !important; border: none !important; }
body.apple-mode .cal-day:hover { background: var(--ap-canvas) !important; }
body.apple-mode .cal-day.today { color: var(--ap-blue) !important; font-weight: 600; }
body.apple-mode .cal-day.selected {
  background: var(--ap-blue) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  font-weight: 600;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── The frame: the bar drops to the canvas (Luis, 2026-09-21) ─────────────
   It was --ap-white, the same pearl as every card. Now it is --ap-canvas, the
   same tone as the rail and as the page under it, with the hairline doing the
   separating.

   That inverts what stands out. While the bar was a card it competed with the
   dozen real cards below it for the same "this is a surface" reading; dropped
   to the ground it stops being an object at all and becomes the frame the
   cards sit in — which is what a top bar is.

   A day of trying grounds (Luis, 2026-09-23) — brushed silver, flat silver,
   solid ink, a light grey — ended here: THE APPLE BAR. Near-black and
   translucent, the page showing faintly through a blur, white text, a
   hairline underneath. apple.com's own navigation, and the Store app's.
   The translucency is not decoration: it is most of what makes the bar
   read as expensive rather than as a black strip, and it is the reason the
   backdrop blur is back after being taken off the solid bar — now there is
   something to see through it.

   Everything on the bar goes light: the brand name's ramp, the subtitle,
   the user's name and role, the separators. And the pills and icon buttons
   go QUIET — translucent white at a tenth, white text — so the bar reads as
   one surface rather than a dark band with white buttons stuck on it. Those
   rules sit with the buttons further down.

   Spelled out here as well because this theme sets the ground with
   !important, and the canvas would otherwise win. Still not a card: no drop
   shadow. */
body.apple-mode .topbar {
  /* 2026-09-24: the Light chrome's ground, kept the same as the rail's —
     #e6e5e1 first, then #cadcea off a palette Luis sent (see the rail rule
     for the sampling). The dark-text set for it is the block at the end of
     this file. */
  background: #fbfbfb !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  color: #f5f5f7;
}
/* The default theme flanks the bar with two white diagonal panels; one
   plain band here. */
body.apple-mode .topbar::before, body.apple-mode .topbar::after { display: none !important; }
body.apple-mode .topbar-notch, body.apple-mode .topbar-center { background: transparent !important; box-shadow: none !important; }
/* The brand name as in the Liquid theme (Luis, 2026-09-14): "Cell Phone"
   in a black ramp, "Planet" in the logo's red one — one span, so the split
   is a hard stop at 64.7% of the width, the space before "Planet" in a
   monospace face. Lifted like the headline figures. */
/* On the ink bar the black ramp would vanish into its own ground, so
   "Cell Phone" runs white to pale silver, and the red is lifted a step —
   the logo's deepest red goes muddy on black. Same hard split at 64.7%. */
body.apple-mode .topbar-brand-name {
  background: linear-gradient(90deg, #ffffff 0%, #e8e8ec 40%, #c9cbd0 64.7%, #c4141c 64.7%, #e3333b 84%, #ff6464 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--ap-ink) !important;
  text-shadow: none !important;
  /* Not the theme's raise filter (2026-09-23): that is a white-plus-dark
     shadow pair drawn for the pale canvas, and on the ink bar only its white
     half shows — a halo around every letter. A dark shadow alone, cast down
     and to the right, gives the light letters their lift on a dark ground. */
  filter: drop-shadow(1px 1.5px 1.5px rgba(0, 0, 0, 0.65));
  font-family: var(--ap-font) !important;
}
/* Light on the ink bar; the engrave shadow is a white highlight and would
   read as a smear on black. */
body.apple-mode .topbar-brand-sub { color: rgba(255, 255, 255, 0.62) !important; text-shadow: none !important; }
body.apple-mode .topbar-diag { display: none !important; }
/* The quick links and the bells: the Liquid theme's treatment (Luis,
   2026-09-14) — 42px pills in a ramp of the two ground colours, the
   in-house single-colour icons greyed and cut in at rest, green and lifted
   on hover and on the page you are on, the label following. The Repair
   Sale gear turns once every fourteen seconds. */
body.apple-mode {
  --ap-engrave: 1px 1px 1px rgba(255, 255, 255, 0.9), -1px -1px 1px rgba(0, 0, 0, 0.18);
  --ap-engrave-filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.26)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.95));
  --ap-lift: var(--ap-acc);
}
body.apple-mode .topbar-center { gap: 10px !important; }
body.apple-mode .topbar-action {
  height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(118deg, #f5f5f7 0%, #e3e3e8 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ap-ink) !important;
  transition: transform .18s ease;
}
body.apple-mode .topbar-action::before, body.apple-mode .topbar-action::after { display: none !important; }
body.apple-mode .topbar-action:hover { transform: translateY(-1px); }
body.apple-mode .topbar-action-label { color: var(--ap-ink) !important; text-shadow: var(--ap-engrave); font-family: var(--ap-font) !important; transition: color .18s; }
body.apple-mode .topbar-action img { display: none !important; }
body.apple-mode .topbar-action .lq-ico {
  display: inline-block !important;
  width: 24px; height: 24px;
  color: rgba(29, 29, 31, 0.36);
  filter: var(--ap-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.apple-mode .topbar-action:hover .lq-ico,
body.apple-mode .topbar-action.is-current .lq-ico {
  color: var(--ap-lift);
  filter: var(--ap-raise-filter);
  transform: translateY(-1px) scale(1.08);
}
body.apple-mode .topbar-action:hover .topbar-action-label,
body.apple-mode .topbar-action.is-current .topbar-action-label { color: var(--ap-lift) !important; }
body.apple-mode .lq-gear { transform-origin: 11px 12px; transform-box: view-box; }
/* The gear turns only on the page it stands for (Luis, 2026-09-14); the same
   gear on the notifications button stays still. */
body.apple-mode .topbar-action.is-current .lq-gear { animation: lq-gear-turn 14s linear infinite; }
@keyframes lq-gear-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .lq-gear { animation: none; } }
body.apple-mode .topbar-icon-btn {
  background: linear-gradient(118deg, #f5f5f7 0%, #e3e3e8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
  transition: background .18s ease, transform .18s ease;
}
body.apple-mode .topbar-icon-btn:hover { background: #ffffff !important; }
body.apple-mode .topbar-icon-btn img { display: none !important; }
body.apple-mode .topbar-icon-btn .lq-ico {
  display: block !important;
  width: 22px; height: 22px;
  color: rgba(29, 29, 31, 0.36);
  filter: var(--ap-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.apple-mode .topbar-icon-btn:hover .lq-ico,
body.apple-mode .topbar-notif-wrap:has(.notif-dropdown.open) .topbar-icon-btn .lq-ico {
  color: var(--ap-lift);
  filter: var(--ap-raise-filter);
  transform: translateY(-1px) scale(1.08);
}
body.apple-mode .topbar-icon-btn.shaking .lq-ico { animation: bell-shake 0.6s ease-in-out 3; transform-origin: top center; }
/* The search button in the in-house green, lit from its top-left like the calendar tile (Luis, 2026-09-15). */
/* The search button in glass (Luis, 2026-09-25): a clear, lightly tinted
   pane over a blur, a bright rim, a lit top edge and a soft drop — the green
   moves into the icon, since white strokes on a clear button would vanish.
   The same in both chromes: the button sits inside the search field, which
   is white on Ink too, so a white Ink icon disappeared (2026-09-25). */
body.apple-mode .topbar-search-btn {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(63, 122, 104, 0.10) 100%) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 12px rgba(31, 45, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 2px rgba(63, 122, 104, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}
body.apple-mode .topbar-search-btn svg { stroke: #3f7a68; }
body.apple-mode .topbar-search-btn .vspark { fill: #3f7a68; }
body.apple-mode .topbar-search-wrap.is-open { background: var(--ap-white) !important; border-color: var(--ap-line) !important; box-shadow: none !important; }

/* ── Quiet on the ink bar (Luis, 2026-09-23) ──────────────────────────────
   The pills and icon buttons above were drawn for the canvas: pale slabs,
   engraved grey glyphs, a white inner edge. On the ink bar they shout — a
   dark band with white buttons stuck on it. Here they become what Apple's
   own dark bar uses: a tenth of white for a body, white text, a plain white
   glyph, and a step brighter on hover or when current. The engrave and raise
   filters go too; both are a dark-plus-white shadow pair, and on ink the
   dark half is invisible and the white half is a smear. Placed after those
   rules so that, at equal weight, order decides. The search button keeps its
   green — it is the one deliberate colour on the bar. */
body.apple-mode .topbar-action {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}
body.apple-mode .topbar-action:hover,
body.apple-mode .topbar-action.is-current { background: rgba(255, 255, 255, 0.18) !important; }
body.apple-mode .topbar-action-label { color: rgba(255, 255, 255, 0.86) !important; text-shadow: none !important; }
body.apple-mode .topbar-action:hover .topbar-action-label,
body.apple-mode .topbar-action.is-current .topbar-action-label { color: #ffffff !important; }
body.apple-mode .topbar-action .lq-ico { color: rgba(255, 255, 255, 0.70); filter: none; }
body.apple-mode .topbar-action:hover .lq-ico,
body.apple-mode .topbar-action.is-current .lq-ico { color: #ffffff; filter: none; }

body.apple-mode .topbar-icon-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
body.apple-mode .topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.18) !important; }
body.apple-mode .topbar-icon-btn .lq-ico { color: rgba(255, 255, 255, 0.72); filter: none; }
body.apple-mode .topbar-icon-btn:hover .lq-ico,
body.apple-mode .topbar-notif-wrap:has(.notif-dropdown.open) .topbar-icon-btn .lq-ico { color: #ffffff; filter: none; }
/* The two drawer icons (.tb-ico) are lit further down, beside the rule that
   dresses them — it comes later in this file and wins on order, so a value
   set here would be overridden. */
/* The avatar chip was a pale blue disc with blue initials, drawn for the
   canvas; on ink it went to a dark ring with nothing readable in it. A tenth
   of white with white initials, the same body as the buttons beside it. */
body.apple-mode .topbar-avatar {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
body.apple-mode .topbar-user-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }
body.apple-mode #searchWrap #topbarSearch { color: var(--ap-ink) !important; }
/* Light on the ink bar (2026-09-23). */
body.apple-mode .topbar-user-name { color: #f5f5f7 !important; text-shadow: none !important; }
body.apple-mode .topbar-user-role { color: rgba(255, 255, 255, 0.60) !important; }
/* The separators between the icon groups: index.css draws them dark for its
   own light bar; here they are a faint white line. */
body.apple-mode .topbar-sep { background: rgba(255, 255, 255, 0.14) !important; }
/* ── The rail (Luis, 2026-09-21) ─────────────────────────────────────────────
   index.css now builds the rail the way the reference does — #f5f5f7 ground,
   rounded tiles, the active one a white card standing on it. These rules were
   written when the active item was a flat tint, and they carried !important, so
   left alone they would have quietly undone the whole thing: a blue wash back
   over the white tile and `box-shadow: none` erasing the lift.

   So the theme agrees with the base sheet rather than overriding it. The ground
   is the Apple canvas, which is the same #f5f5f7 index.css asks for — named
   here so a change to the palette carries. */
body.apple-mode .sidenav {
  /* Sampled off a swatch each time. #e6e5e1 (2026-09-23), a warm light grey
     a step darker than the canvas; then #cadcea (2026-09-24), the pale blue
     at the foot of a palette Luis sent — its label read "44EA4CC", which as
     a hex is a mid cyan and not the colour of the pill, so the pill itself
     was measured; then #cccccc, a flat neutral grey, then one step lighter,
     #d6d6d6 (2026-09-24). Only the ground changes; every item on it is as it
     was. */
  /* Frosted (Luis, 2026-09-24): the same #d6d6d6, but at 74% over a blur,
     so when the rail opens across the page the content shows through it
     faintly — the rail is a pane over the page, not a wall. Closed, it sits
     over the page's empty margin and reads as the flat grey it was. */
  background: #fbfbfb !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* No edge line at all (Luis, 2026-09-24). An engraved groove was tried
     here — dark line a pixel in, light line at the edge — and taken off
     the same day: this theme is flat, and the grey against the #f5f5f7 page
     is already a clear edge, so a line was drawing a second edge on top of
     the one that was there. Material meets material. */
  border-right: 0 !important;
  box-shadow: none !important;
}
body.apple-mode .nav-item { color: var(--ap-soft) !important; }
body.apple-mode .nav-item:hover { color: var(--ap-ink) !important; background: rgba(0, 0, 0, 0.04) !important; }
body.apple-mode .nav-item.active {
  color: var(--ap-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(31, 45, 61, .10),
              0 6px 14px rgba(31, 45, 61, .10) !important;
}
/* The label inherits the row's colour now — forcing every one to full ink
   left the active row indistinguishable from the twenty around it. Only the
   section headings keep a colour of their own. */
body.apple-mode .nav-label { color: inherit !important; text-shadow: none !important; font-family: var(--ap-font) !important; }
body.apple-mode .nav-section-label { color: var(--ap-soft) !important; text-shadow: none !important; font-family: var(--ap-font) !important; }
/* The rail's icons, engraved when not selected (Luis, 2026-09-24): the
   theme's engrave filter — a dark shadow up-left, a light one down-right —
   pressed into the grey, with the glyph a shade deeper than the soft grey so
   the pressing has something to press. Hover lifts them (the raise filter,
   full ink), and the selected item is untouched: its white card and ink
   glyph are what "selected" looks like. The trial buttons at the foot of the
   rail carry their own drawn shadows and are left out. */
body.apple-mode .nav-item:not(.active):not(.pos-unthemed) .nav-icon {
  color: rgba(29, 29, 31, 0.44);
  filter: var(--ap-engrave-filter);
  transition: color .18s ease, filter .18s ease;
}
body.apple-mode .nav-item:not(.active):not(.pos-unthemed):hover .nav-icon {
  color: var(--ap-ink);
  filter: var(--ap-raise-filter);
}
body.apple-mode #navApple { background: rgba(0, 102, 204, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.35) !important; }

/* ── The receipt: a white sheet on a dimmed page ──────────────────────────── */
body.apple-mode .rcpt-backdrop { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(6px) !important; }
body.apple-mode .rcpt-sheet { background: var(--ap-white) !important; border-radius: 18px !important; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important; }
body.apple-mode .rcpt-topbar { background: var(--ap-white) !important; border-bottom: 1px solid var(--ap-line) !important; }
body.apple-mode .rcpt-card { background: var(--ap-canvas) !important; box-shadow: none !important; border: 1px solid var(--ap-line-soft); }
body.apple-mode .rcpt-print { background: var(--ap-blue) !important; color: #fff !important; }
body.apple-mode .rcpt-x { background: var(--ap-canvas) !important; color: var(--ap-ink) !important; }
body.apple-mode .rcpt-overlay .rcpt-backdrop { opacity: 0; transition: opacity .2s ease; }
/* In and out from the click, as in the Liquid theme (Luis, 2026-09-14): at
   rest the sheet is shrunk to 30% over the row that was clicked (index.php
   measures the offset into --rcpt-dx/--rcpt-dy); with .is-in it springs to
   its place on the comments panel's curve, overshooting a touch, and folds
   back into the click on the way out. */
body.apple-mode .rcpt-overlay .rcpt-sheet {
  opacity: 0;
  transform: translate(var(--rcpt-dx, 0px), var(--rcpt-dy, 0px)) scale(0.30);
  transition: transform .30s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity .18s ease;
}
body.apple-mode .rcpt-overlay.is-in .rcpt-backdrop { opacity: 1; }
body.apple-mode .rcpt-overlay.is-in .rcpt-sheet {
  opacity: 1;
  transform: none;
  transition: transform .30s cubic-bezier(0.2, 0.9, 0.3, 1.12), opacity .16s ease;
}

/* ── Motion & preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.apple-mode .rcpt-overlay .rcpt-sheet { transition: opacity .2s ease; transform: none !important; }
}
@media (prefers-contrast: more) {
  body.apple-mode .card, body.apple-mode .table-wrap { border-color: rgba(0, 0, 0, 0.3) !important; }
}

/* ── Hero footer totals as headline figures (Luis, 2026-09-14): Total
   Collected and Average Ticket take the totals cards' big-number style —
   2.8rem, tight, the dollar a small raised sign. The arrows sit mid-line. */
body.apple-mode .hero-card .hero-gfval {
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.022em !important;
  white-space: nowrap;
}
body.apple-mode .hero-card .hero-gfval .hero-cur { font-size: 0.45em !important; position: relative; top: -0.55em; margin-right: 2px; font-weight: 600 !important; }
body.apple-mode .hero-card .hero-gfval :is(.hero-up, .hero-down) { font-size: 14px !important; vertical-align: middle; }
body.apple-mode .hero-card .hero-gflab { margin-top: 8px !important; }

/* The Transactions sparkline was the dark design's blue; green here, so it
   reads apart from the blue Cash series. Line, area fill and pulse dot. */
body.apple-mode .hero-card [stroke="#5B8DEF"]     { stroke: #7e97b8 !important; }   /* the sky blue, with the rest of the set (Luis, 2026-09-14) */
body.apple-mode .hero-card [stop-color="#5B8DEF"] { stop-color: #7e97b8 !important; }
body.apple-mode .hero-card [fill="#5B8DEF"]       { fill: #7e97b8 !important; }

/* ── Card fill: white pooling over pearl (Luis, 2026-09-14) ─────────────────
   Flat pearl read a touch quiet, so a soft radial of pure white rises from
   each card's top-left corner and fades into the pearl by its middle — the
   same corner the Neumorphic cards catch their light from, without the
   shadow. Bars and rail stay flat pearl. */
body.apple-mode :is(.card, .card-compact, .card-wide, .table-wrap, .hero-card) {
  /* Stronger (Luis): the pool runs wider, and it sits on a base a shade
     below pearl so the white actually reads against it.

     Then three pools on a warm grey (Luis, 2026-09-24), tried first on the
     Daily Sales card alone and liked: the pool from the top-left, its mirror
     from the bottom-right, and a smaller one sitting in the top-right corner
     itself — the same white, the same fade — over #e6e5e1, a swatch of his,
     in place of the pearl. The grey holds the middle and the bottom-left, so
     each card is lit from three corners and reads as one material with the
     chrome around it. */
  background:
    /* One pool from the centre (Luis, 2026-09-25), in place of the three
       corner pools: white at the heart of the card fading to the warm grey
       at its edges. */
    radial-gradient(ellipse 90% 100% at 50% 50%, #ffffff 0%, #ffffff 25%, rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0) 88%),
    #f0f0f2 !important;
}

/* ── The totals card's small type, cut in (Luis, 2026-09-14) ─────────────────
   Bar amounts and labels, the Cash/Card rows of the Payments column, and the
   column captions take the engrave: a white edge below, a dark one above. */
body.apple-mode :is(.vbar-amount, .vbar-label, .hbar-k, .hbar-v, .tc-label, .totals-card .card-desc) {
  text-shadow: var(--ap-engrave) !important;
}

/* ── The calendar (Luis, 2026-09-14) ─────────────────────────────────────────
   Day numbers cut in; the chosen day a radial blue tile — lit from its
   top-left, deepening to the far edge — with the number big, heavy and
   lifted off it in the page's lightest tone, the way the headline figures
   are raised. The number and the tile share one element, so the lift is the
   filter form rather than a clipped ramp. */
body.apple-mode .cal-day { text-shadow: var(--ap-engrave) !important; }
body.apple-mode .cal-day.other-month { text-shadow: none !important; }
body.apple-mode .cal-day.selected {
  /* The chosen day in the accent ramp (plum on trial), lit from its top-left. */
  background: radial-gradient(120% 110% at 28% 12%, var(--ap-acc-light) 0%, var(--ap-acc) 42%, var(--ap-acc-deep) 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 1.35em !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: none !important;
  box-shadow: 0 6px 16px rgba(var(--ap-acc-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  filter: var(--ap-raise-filter);
}


/* ══════════════════════════════════════════════════════════════════════════
   THE REPAIRS CHECKOUT (wired 2026-09-14). Same dress as the dashboard: the
   toolbar and the cart panel are cards, the shelf is opened so the part
   cards sit straight on the ground, the quick buttons and the search take
   the top bar's treatment, the accent buttons the calendar tile's blue.
   ══════════════════════════════════════════════════════════════════════════ */

/* The toolbar and the cart panel: cards. */
body.apple-mode .pos-toolbar,
body.apple-mode .glass-card-cus {
  background: radial-gradient(135% 100% at 16% 0%, #ffffff 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0) 78%), #f3f3f6 !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
body.apple-mode .pos-toolbar { position: relative; z-index: 40; margin-bottom: 18px; }

/* The shelf opened: no frame around the part cards, no "pick a model" note. */
body.apple-mode .products-glass-container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.apple-mode #selectModelMessage { display: none !important; }

/* The part cards: white with a hairline, the stock colour kept as a faint
   wash at the foot — the signal stays, the paper is Apple's. */
body.apple-mode .products-glass-container .product-card:not(.wh-card):not(.ar-hcard) {
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
body.apple-mode .products-glass-container .product-card:not(.ar-hcard):is(.card-instock, .card-restock, .card-paid, .card-deposit, .card-pop) {
  /* Stronger (Luis): the wash starts a third of the way down and lands at a
     third of the tint, so the stock colour reads rather than hints. */
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 30%, color-mix(in srgb, var(--card-tint) 14%, #ffffff) 62%, color-mix(in srgb, var(--card-tint) 36%, #ffffff) 100%) !important;
}
body.apple-mode .products-glass-container .product-card:not(.wh-card):not(.ar-hcard):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important; }

/* The quick-access buttons: the top bar's discs — grey engraved drawings
   that lift and turn green under the pointer, the name beneath following.
   Their one-shot motions are the keyframes liquid.css declares. */
body.apple-mode .quick-btn {
  /* White at the top-left running into the disc's grey (Luis, 2026-09-14). */
  background: radial-gradient(120% 110% at 28% 18%, #ffffff 0%, #f1f1f4 45%, #dedee3 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* A hairline ring standing 3px outside the disc (Luis, 2026-09-14). */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 3px transparent, 0 0 0 4.5px #ffffff !important;   /* the ring in white (Luis) */
}
body.apple-mode .quick-btn:hover { background: #ffffff !important; }
body.apple-mode .quick-btn img { display: none !important; }
body.apple-mode .quick-btn .lq-ico {
  display: block !important;
  width: 24px; height: 24px;
  color: rgba(29, 29, 31, 0.36);
  filter: var(--ap-engrave-filter);
  transition: color .18s ease, filter .18s ease, transform .18s ease;
}
body.apple-mode .quick-btn:hover .lq-ico { color: var(--ap-lift); filter: var(--ap-raise-filter); transform: scale(1.08); }
body.apple-mode .quick-btn .quick-name-label { color: var(--ap-soft) !important; text-shadow: var(--ap-engrave); }
body.apple-mode .quick-btn:hover .quick-name-label { color: var(--ap-lift) !important; }
body.apple-mode .quick-btn:hover .lq-ico-port   { animation: lq-plug .5s ease; }
body.apple-mode .quick-btn:hover .lq-ico-reset  { animation: lq-spin .6s ease; }
body.apple-mode .quick-btn:hover .lq-ico-soft   { animation: lq-brackets .5s ease; }
body.apple-mode .quick-btn:hover .lq-ico-virus  { animation: lq-wiggle .5s ease; }
body.apple-mode .quick-btn:hover .lq-ico-wrench { animation: lq-wrench .5s ease; }
@media (prefers-reduced-motion: reduce) { body.apple-mode .quick-btn:hover .lq-ico { animation: none; } }

/* The parts search: the top bar's capsule, the blue button at its end. */
body.apple-mode .search-wrapper {
  background: #ffffff;
  border: 1px solid var(--ap-line);
  border-radius: 50px;
  padding: 2px 2px 2px 14px;
  gap: 8px;
  box-shadow: none;
}
body.apple-mode .product-search {
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 10px 8px 10px 0 !important;
  font-size: 12.5px !important;
}
body.apple-mode .product-search:focus { outline: none !important; }
body.apple-mode .search-circle-btn {
  position: static !important;
  width: 42px; height: 42px;
  /* House silver, lit the way the blue was: a highlight up at 28%/12%, the
     palette colour itself as the body, and a deeper edge underneath. The
     glow goes neutral with it — a grey button over a blue shadow reads as
     a button that has not finished loading. */
  background: radial-gradient(120% 110% at 28% 12%, #c6cad0 0%, #8e9095 45%, #63666c 100%) !important;
  box-shadow: 0 6px 16px rgba(76, 80, 88, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
body.apple-mode .search-circle-btn svg { stroke: #ffffff; }

/* The accent buttons — Continue, Complete Sale, the chosen status and deposit
   pills, save — take the calendar tile's radial blue. Cancel keeps its own. */
body.apple-mode .co-next:not(:disabled),
body.apple-mode .submit-sale-btn,
body.apple-mode .dep-method-btn.active,
body.apple-mode .csc-radio.on,
body.apple-mode .print-btn.complete-order-btn,
body.apple-mode .trk-save,
body.apple-mode .rp-source-btn {
  background: radial-gradient(130% 120% at 22% 10%, #6db6ff 0%, #1a84f2 45%, #0a5fcf 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 40, 90, 0.3);
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
body.apple-mode .co-next:hover:not(:disabled),
body.apple-mode .submit-sale-btn:hover,
body.apple-mode .print-btn.complete-order-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(0, 102, 204, 0.38) !important; }

/* The cart total: the headline treatment, its label cut in beside it. */
body.apple-mode .summary-total > span:first-child { text-shadow: var(--ap-engrave); color: var(--ap-soft) !important; font-weight: 600; }
body.apple-mode .summary-total > span:last-child {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--ap-ink) !important;
  text-shadow: none !important;
  filter: var(--ap-raise-filter);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.apple-mode .summary-total > span:last-child {
    background-image: var(--ap-figure-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}
body.apple-mode #balanceDue { background: none !important; -webkit-text-fill-color: #d70015 !important; color: #d70015 !important; }

/* With the edge blurred the one-pixel seam had nothing to sit on. */
body.apple-mode::after { display: none; }

/* ── The profit greens (Luis, 2026-09-14) ────────────────────────────────────
   The teal the base sheet gives the Profit column — its ring, headline,
   icon and the profit tiles' bars — becomes the in-house green the hero's
   Cash arc runs: deep at the base, lighter as it goes. The ring's own
   gradient is built from currentColor fading out, so the deep green as its
   colour gives the same ramp. */
body.apple-mode .weekly-stats > :nth-child(5) .ws-ring { color: #2f6152 !important;   /* the profit rings stay in-house green, pinned (Luis, 2026-09-14) */ }
body.apple-mode .weekly-stats > :nth-child(5) .ws-icon-svg { color: #3f7a68 !important; }
body.apple-mode .weekly-stats > :nth-child(5) .ws-value { color: #3f7a68 !important; }
body.apple-mode .ws-icon-teal { background: rgba(63, 122, 104, 0.10) !important; color: #3f7a68 !important; border-color: rgba(63, 122, 104, 0.18) !important; }
body.apple-mode .vbar-fill-teal { background: linear-gradient(180deg, #3f7a68 0%, rgba(63, 122, 104, 0.72) 45%, rgba(140, 192, 170, 0.55) 100%) !important; }   /* profit: the in-house green, pinned */
/* The Total Sales bars take the accent ramp (plum while it is on trial);
   the Card half of the hero gauge and its figure take the in-house green. */
body.apple-mode .vbar-fill-blue { background: linear-gradient(180deg, var(--ap-acc) 0%, rgba(var(--ap-acc-rgb), 0.72) 45%, color-mix(in srgb, var(--ap-acc-light) 55%, transparent) 100%) !important; }
body.apple-mode .hero-card .hero-gcons .hero-gval { color: #3f7a68 !important; -webkit-text-fill-color: #3f7a68 !important; }

/* ── The drawer card's balance (Luis, 2026-09-14) ────────────────────────────
   The brand blue becomes the in-house green, as a raised ramp like the
   table's money, so the drawer figure reads with the rest of the cash. */
body.apple-mode .dc-balance {
  color: #3f7a68 !important;
  text-shadow: none !important;
  filter: var(--ap-raise-filter);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.apple-mode .dc-balance {
    background-image: linear-gradient(175deg, #2f6152 0%, #3f7a68 42%, #6f9f8d 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* The Sales column of the weekly card — its rings, figure and icon — takes
   the accent ramp (plum), as the Total Sales bars do (Luis, 2026-09-14). */
body.apple-mode .weekly-stats > :nth-child(1) .ws-ring { color: var(--ap-acc-deep) !important; }
body.apple-mode .weekly-stats > :nth-child(1) .ws-icon-svg { color: var(--ap-acc) !important; }
body.apple-mode .weekly-stats > :nth-child(1) .ws-value { color: var(--ap-acc) !important; }
body.apple-mode .ws-icon-blue { background: rgba(var(--ap-acc-rgb), 0.10) !important; color: var(--ap-acc) !important; border-color: rgba(var(--ap-acc-rgb), 0.18) !important; }

/* ── The chosen day, lighter (Luis, 2026-09-14) ──────────────────────────────
   The solid plum disc was the one dark hole on a light page. Now a soft plum
   tint pill, and the big number is the plum ramp itself, raised — the same
   language as the rings and the bars, and still the one thing on the grid. */
body.apple-mode .cal-day.selected {
  /* In the in-house green now (Luis, 2026-09-15). */
  background: radial-gradient(120% 110% at 28% 12%, #ffffff 0%, color-mix(in srgb, #8cc0aa 42%, #ffffff) 55%, color-mix(in srgb, #8cc0aa 62%, #ffffff) 100%) !important;
  color: #3f7a68 !important;
  -webkit-text-fill-color: #3f7a68 !important;
  box-shadow: 0 4px 12px rgba(63, 122, 104, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(63, 122, 104, 0.18) !important;
}
/* The number keeps a solid mid plum with the lift: a clipped ramp would take
   the pill's own fill, since the two share one element. */

/* ── The Deductibles card's greens (Luis, 2026-09-14) ────────────────────────
   The card paints its funded green (#008a5a) inline — on the amounts, the
   status dots, the arrows and today's in-figure — so the swap to the
   in-house green matches on the inline value. The week strip, today's
   underline and the + button follow. The red stays. */
body.apple-mode .card:has(#dedAddBtn) [style*="#008a5a"] { color: #3f7a68 !important; }
body.apple-mode .card:has(#dedAddBtn) [style*="background:#008a5a"] { background: #3f7a68 !important; }
body.apple-mode .card:has(#dedAddBtn) [style*="rgba(0,138,90"] { background-color: rgba(63, 122, 104, 0.10) !important; }
body.apple-mode .ded-day.on b, body.apple-mode .ded-day.on em { color: #3f7a68 !important; }
body.apple-mode .ded-day.today b { border-bottom-color: rgba(63, 122, 104, 0.6) !important; }
body.apple-mode #dedTodayIn { color: #3f7a68 !important; }
body.apple-mode #dedAddBtn { color: #3f7a68 !important; }
body.apple-mode #dedAddBtn:hover { background: rgba(63, 122, 104, 0.12) !important; }

/* ── The Cost column's orange (Luis, 2026-09-14) ─────────────────────────────
   Trial of the two new iPhone finishes in place of the orange: first the sky
   blue. Its bars, the weekly Cost rings, headline and icon. The silver is
   here to swap in next:
     bars  #9a9ca1 → rgba(154,156,161,.72) → rgba(200,202,206,.55)
     rings #8b8d92, figure/icon #9a9ca1 */
/* Now the silver (Luis). The sky blue it replaced, to swap back:
     bars  #8fa6c4 → rgba(143,166,196,.72) → rgba(201,214,230,.55)
     rings #7e97b8, figure/icon #8fa6c4, chip rgba(143,166,196,.12/.22) */
body.apple-mode .vbar-fill-orange { background: linear-gradient(180deg, #8e9095 0%, rgba(142, 144, 149, 0.72) 45%, rgba(196, 198, 202, 0.55) 100%) !important; }
body.apple-mode .weekly-stats > :nth-child(3) .ws-ring { color: #7d7f84 !important; }
body.apple-mode .weekly-stats > :nth-child(3) .ws-icon-svg { color: #8e9095 !important; }
body.apple-mode .weekly-stats > :nth-child(3) .ws-value { color: #8e9095 !important; }
body.apple-mode .ws-icon-orange { background: rgba(142, 144, 149, 0.12) !important; color: #8e9095 !important; border-color: rgba(142, 144, 149, 0.22) !important; }

/* ── Taxes in the sky blue (Luis, 2026-09-14) ────────────────────────────────
   The neutral grey the Taxes bar and the weekly Taxes rings wore becomes the
   iPhone sky blue, the silver having gone to Cost. */
body.apple-mode .vbar-fill-gray { background: linear-gradient(180deg, #8fa6c4 0%, rgba(143, 166, 196, 0.72) 45%, rgba(201, 214, 230, 0.55) 100%) !important; }
body.apple-mode .weekly-stats > :nth-child(7) .ws-ring { color: #7e97b8 !important; }
body.apple-mode .weekly-stats > :nth-child(7) .ws-icon-svg { color: #8fa6c4 !important; }
body.apple-mode .weekly-stats > :nth-child(7) .ws-value { color: #8fa6c4 !important; }

/* ── The last strays brought into the set (Luis, 2026-09-14) ─────────────────
   The Square card's trend line, the drawer's Open link, the calendar's
   "Showing sales for" date and the pager wore the base sheet's blue; the
   drawer's openings donut wore its own orange, blue and purple. Trend and
   links take the sky blue, the pager's chosen page goes ink, and the donut
   takes plum, sky blue, silver and green. The Vida Pay marks in the table
   are eased back so the money leads the row. */
body.apple-mode #squareTrendSvg [stroke="#1a5fa8"]     { stroke: #7e97b8 !important; }
body.apple-mode #squareTrendSvg [fill="#1a5fa8"]       { fill: #7e97b8 !important; }
body.apple-mode #squareTrendSvg [stop-color="#1a5fa8"] { stop-color: #7e97b8 !important; }
body.apple-mode .dc-open { color: #6f8bb0 !important; }
body.apple-mode .cal-selected-label span { color: #6f8bb0 !important; }
body.apple-mode :is(.pag-btn.active, .pag-btn.on):not(.repair-card *, .ar-hcard *, .ar-row *) { background: var(--ap-ink) !important; border-color: var(--ap-ink) !important; color: #ffffff !important; }
body.apple-mode .dc-ring-seg[data-r="purchase"], body.apple-mode .dc-ring-dot[data-r="purchase"] { color: var(--ap-acc-light) !important; }
body.apple-mode .dc-ring-seg[data-r="change"],   body.apple-mode .dc-ring-dot[data-r="change"]   { color: #8fa6c4 !important; }
body.apple-mode .dc-ring-seg[data-r="loan"],     body.apple-mode .dc-ring-dot[data-r="loan"]     { color: #9a9ca1 !important; }
body.apple-mode .dc-ring-seg[data-r="add"],      body.apple-mode .dc-ring-dot[data-r="add"]      { color: #8cc0aa !important; }
body.apple-mode .dc-ring-seg[data-r="refund"],   body.apple-mode .dc-ring-dot[data-r="refund"]   { color: var(--ap-acc) !important; }
body.apple-mode #salesTableBody img.product-img[src*="vidapay"] { opacity: 0.72; filter: saturate(0.7); }

/* The drawer card's In / Out / On loan figures match the donut beside them
   (Luis, 2026-09-14): cash in wears the green of the "add" segment, money out
   the plum of the buying and refund segments, the loan the silver of its own. */
body.apple-mode .dc-in   { color: #3f7a68 !important; }
body.apple-mode .dc-out  { color: var(--ap-acc) !important; }
body.apple-mode .dc-loan { color: #7d7f84 !important; }

/* The hero gauge, cut in (Luis, 2026-09-14): the track and both arcs take
   the engrave — a dark edge above, a light edge below — so the ring reads as
   a groove in the card rather than a band laid on it. */
body.apple-mode #heroGauge path { filter: var(--ap-engrave-filter); }
body.apple-mode #heroGauge .hero-gauge-track { stroke: rgba(0, 0, 0, 0.09) !important; }
/* The groove's outer lip: a hairline just outside the channel (drawn by
   gauge() in index.php), dark enough to read on the pearl. */
body.apple-mode #heroGauge .hero-gauge-rim { stroke: rgba(0, 0, 0, 0.16) !important; filter: none; }

/* The part cards' stock colours (Luis, 2026-09-14): the red of a card that
   needs restocking becomes the plum, the blue of one in stock the sky blue.
   The tint drives the card's foot wash and its marks together. */
body.apple-mode .products-glass-container .product-card.card-instock:not(.ar-hcard) { --card-tint: #7e97b8; }
body.apple-mode .products-glass-container .product-card.card-restock:not(.ar-hcard),
body.apple-mode .products-glass-container .product-card.card-pop:not(.ar-hcard) { --card-tint: #6b3744; }

/* The toolbar's panel comes off (Luis, 2026-09-14): the search capsule, the
   quick-button discs and the brand pill are shapes of their own, and a card
   behind them was a band under the top bar framing empty space. They float on
   the ground; the part cards below are the column's only cards. */
body.apple-mode .pos-toolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The toolbar's controls line up with the top of the checkout card (Luis,
   2026-09-14): the shelf's top padding and the toolbar's own go, so the
   search, discs and brand pill start where the card beside them starts. */
body.apple-mode .products-glass-container { padding-top: 0 !important; }
body.apple-mode .pos-toolbar { padding-top: 0 !important; }

/* ── The Dashboard tile when it is the current page (Luis, 2026-09-14) ───────
   Its four tiles breathe in turn — each eases down to four-fifths and back,
   a quarter-beat apart — slow enough to be a pulse rather than a blink. Only
   on the current page; at rest and on hover the icon holds still. Still for
   anyone who asked their system for less motion. */
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico rect { transform-box: fill-box; transform-origin: center; animation: ap-tile 3.2s ease-in-out infinite; }
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico rect:nth-child(2) { animation-delay: .4s; }
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico rect:nth-child(3) { animation-delay: .8s; }
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico rect:nth-child(4) { animation-delay: 1.2s; }
@keyframes ap-tile { 0%, 100% { transform: scale(1); opacity: 1; } 18% { transform: scale(0.8); opacity: .72; } 36% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action.is-current .lq-ico :is(rect, circle) { animation: none; } }

/* ── The Quick Sale register when it is the current page (Luis, 2026-09-14):
   its nine keys are pressed in turn, left to right and row by row — each dips
   and comes back — and the display above them glows on each pass. Only on the
   current page; still at rest and under reduced motion. The Dashboard tile
   rule above is scoped by label so the register's own rects stay put. */
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle { transform-box: fill-box; transform-origin: center; animation: ap-key 2.7s ease-in-out infinite; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(2) { animation-delay: .15s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(3) { animation-delay: .30s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(4) { animation-delay: .45s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(5) { animation-delay: .60s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(6) { animation-delay: .75s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(7) { animation-delay: .90s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(8) { animation-delay: 1.05s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico g circle:nth-child(9) { animation-delay: 1.20s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .lq-ico > rect[rx="1"] { animation: ap-display 2.7s ease-in-out infinite; }
@keyframes ap-key { 0%, 100% { transform: scale(1); opacity: 1; } 8% { transform: scale(0.6); opacity: .6; } 16% { transform: scale(1); opacity: 1; } }
@keyframes ap-display { 0%, 55%, 100% { opacity: 1; } 62% { opacity: .35; } 70% { opacity: 1; } }
/* More air between the quick buttons (Luis, 2026-09-14). */
body.apple-mode .tb-center .quick-access-grid { gap: 26px !important; }

/* ── Complete Ticket (Luis, 2026-09-15): the plum running into the in-house
   green, in place of the action blue. Disabled keeps the base sheet's grey. */
body.apple-mode .print-btn.complete-order-btn:not(:disabled) {
  background: linear-gradient(135deg, #4a2531 0%, #6b3744 42%, #3f7a68 100%) !important;
  box-shadow: 0 6px 18px rgba(63, 122, 104, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
body.apple-mode .print-btn.complete-order-btn:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(107, 55, 68, 0.36) !important; }
body.apple-mode .print-btn.complete-order-btn:disabled {
  background: #f1f1f4 !important;
  color: #a1a1a6 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE MAIN CHECKOUT (wired 2026-09-15). The same dress as the repairs
   checkout: the shelf opens so its cards sit straight on the ground, the
   toolbar row above them floats, and the cart panel is the one card in that
   column. The product cards themselves are deliberately untouched — Luis
   wants the phone cards as every other theme draws them, which is why the
   part-card rules above are scoped to the repairs shelf.

   The quick keys, the search capsule, the accent buttons and the cart total
   need nothing here: both pages share those class names, so the repairs
   block already covers them.
   ══════════════════════════════════════════════════════════════════════════ */

/* The shelf: no frame, no frost. */
body.apple-mode .products-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Its toolbar floats too, and keeps its stacking so the category lists still
   drop over the cards below. */
body.apple-mode .category-search-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  position: relative;
  z-index: 40;
}
/* The cart panel is the card. */
body.apple-mode .checkout-panel {
  background: radial-gradient(135% 100% at 16% 0%, #ffffff 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0) 78%), #f3f3f6 !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  opacity: 1 !important;
}
/* The method chosen for the sale takes the accent, as the deposit pills do on
   the repairs side. */
body.apple-mode .payment-icon-btn.active {
  background: radial-gradient(130% 120% at 22% 10%, #6db6ff 0%, #1a84f2 45%, #0a5fcf 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CASH DRAWER (wired 2026-09-15). Checkout, Log and Close out share one
   chrome (drawer/_chrome.php), so dressing it dresses all three tabs and all
   four registers at once.

   Most of the work is done by redefining the drawer's own variables rather
   than chasing its rules: app.css paints every card, strip and calendar day
   from --surface, --radius, --hairline and --accent, declared on .drawer-wrap
   so they reach the drawer content and leave the POS chrome alone. Changing
   them there is the whole theme; what follows is only what a variable cannot
   say — a hairline the base sheet never drew, and the handful of controls
   that carry their own colour.
   ══════════════════════════════════════════════════════════════════════════ */
body.apple-mode .drawer-wrap {
  /* A card's fill, as everywhere else: white pooling from the top-left corner
     over pearl. It is a gradient, which `background: var(--surface)` takes. */
  --surface:        radial-gradient(135% 100% at 16% 0%, #ffffff 0%, rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0) 78%), #f3f3f6;
  --ground:         transparent;
  --text-primary:   var(--ap-ink);
  --text-secondary: var(--ap-mid);
  --text-soft:      var(--ap-soft);
  --hairline:       var(--ap-line);
  --accent:         var(--ap-acc);
  --good:           #3f7a68;
  --bad:            #c9262e;
  --warn:           #8fa6c4;
  --radius:         18px;
  --font-ui:        var(--ap-font);
  font-family: var(--ap-font);
}

/* The hairline the base sheet never needed: its cards sat on a tinted ground
   and read as raised. Here they are paper on paper. */
body.apple-mode .drawer-wrap :is(.card, .strip, .cal-day:not(.empty)) {
  border: 1px solid var(--ap-line) !important;
  box-shadow: none !important;
}
body.apple-mode .drawer-wrap .cal-day.empty { border: 0 !important; }

/* The three tabs: a quiet trough, and the one you are on is white paper. */
body.apple-mode .drawer-wrap .drawer-head .nav {
  background: rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
}
body.apple-mode .drawer-wrap .drawer-head .nav-item { color: var(--ap-mid) !important; }
body.apple-mode .drawer-wrap .drawer-head .nav-item:hover { color: var(--ap-ink) !important; }
body.apple-mode .drawer-wrap .drawer-head .nav-item.active {
  color: var(--ap-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 0 0 1px var(--ap-line) !important;
}
body.apple-mode .drawer-wrap .drawer-head .nav-item.active .nav-ico { color: var(--ap-acc) !important; }

/* The four registers: the one in view takes the accent, the rest are paper. */
body.apple-mode .drawer-wrap .reg-chip {
  background: #ffffff !important;
  border: 1px solid var(--ap-line) !important;
  color: var(--ap-mid) !important;
  box-shadow: none !important;
}
body.apple-mode .drawer-wrap .reg-chip:hover { background: #f3f3f6 !important; }
body.apple-mode .drawer-wrap .reg-chip.on {
  background: radial-gradient(130% 120% at 22% 10%, var(--ap-acc-light) 0%, var(--ap-acc) 45%, var(--ap-acc-deep) 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--ap-acc-rgb), 0.28) !important;
}

/* The ledger: hairline rows, a quiet hover, captions in the soft grey. */
body.apple-mode .drawer-wrap .ledger-tbl thead th { color: var(--ap-soft) !important; text-shadow: none !important; }
body.apple-mode .drawer-wrap .ledger-tbl tbody tr:hover td { background: #f3f3f6 !important; }
body.apple-mode .drawer-wrap .ledger-tbl tbody td { border-bottom-color: var(--ap-line-soft) !important; }
/* The balance column carries the direction of the day: house green where the
   drawer gained, plum where it lost, quiet grey where the row left it alone.
   The colours and the size step are declared once in drawer/app.css; what has
   to be repeated here is only the weight needed to get past the blanket
   "body.apple-mode td { color: var(--ap-ink) !important }" near the top of
   this sheet, which is also what leaves the Out and In figures ink rather than
   red and green in this theme. */
body.apple-mode .drawer-wrap .ledger-tbl .c-bal.up   { color: var(--bal-up) !important; }
body.apple-mode .drawer-wrap .ledger-tbl .c-bal.down { color: var(--bal-down) !important; }
body.apple-mode .drawer-wrap .ord { color: var(--ap-acc) !important; }

/* The day in view wears the house green, as the dashboard's calendar does. */
body.apple-mode .drawer-wrap .cal-day.selected {
  box-shadow: inset 0 0 0 1.5px rgba(63, 122, 104, 0.45) !important;
}
body.apple-mode .drawer-wrap :is(.cal-day.selected, .cal-day.today) .n { color: #3f7a68 !important; }
body.apple-mode .drawer-wrap .cal-day:hover { background: #ffffff !important; }

/* Buttons: paper with a hairline, the primary one in the accent. */
body.apple-mode .drawer-wrap .btn {
  background: #ffffff !important;
  border: 1px solid var(--ap-line) !important;
  color: var(--ap-ink) !important;
  box-shadow: none !important;
}
body.apple-mode .drawer-wrap .btn:hover { background: #f3f3f6 !important; }
body.apple-mode .drawer-wrap .btn-primary {
  background: radial-gradient(130% 120% at 22% 10%, var(--ap-acc-light) 0%, var(--ap-acc) 45%, var(--ap-acc-deep) 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(var(--ap-acc-rgb), 0.28) !important;
}
body.apple-mode .drawer-wrap :is(input[type=text], input[type=number], input[type=password], select, textarea) {
  background: #ffffff !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 10px !important;
  color: var(--ap-ink) !important;
  box-shadow: none !important;
  font-family: var(--ap-font) !important;
}
body.apple-mode .drawer-wrap :is(input, select, textarea):focus {
  outline: 2px solid var(--ap-blue-hi) !important;
  outline-offset: 1px;
  border-color: transparent !important;
}

/* The figures on the day strip take the house raise, as they do on the
   dashboard; the captions above them are cut in. */
body.apple-mode .drawer-wrap :is(.strip strong, .card-value) {
  color: var(--ap-ink) !important;
  text-shadow: none !important;
  filter: var(--ap-raise-soft);
}
body.apple-mode .drawer-wrap :is(.strip > div, .card-label, .dow, .legend, .muted, .muted-note) {
  text-shadow: var(--ap-engrave);
}

/* ── The drawer's calendar (Luis, 2026-09-15) ────────────────────────────────
   The dashboard's `.cal-day` rules further up are not scoped to that page, so
   they were reaching in here and making these cells round and empty — the
   dashboard's calendar is a row of pills, this one is a grid of tiles. Put
   back: a rounded square with its own surface, and the day in view as a
   filled green tile, the number on it in white rather than cut in. */
body.apple-mode .drawer-wrap .cal-day:not(.empty) {
  border-radius: 18px !important;
  background: var(--surface) !important;
}
body.apple-mode .drawer-wrap .cal-day.selected {
  background: linear-gradient(145deg, #8cc0aa 0%, #5f9d85 52%, #3f7a68 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px rgba(63, 122, 104, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
/* Every descendant, and the FILL as well as the colour: the dashboard's
   `.cal-day.selected` rule sets -webkit-text-fill-color, which inherits down
   and beats a plain `color` on the children — which is why the number came
   out dark green on the green tile (Luis, 2026-09-15). */
body.apple-mode .drawer-wrap .cal-day.selected,
body.apple-mode .drawer-wrap .cal-day.selected * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(20, 50, 40, 0.35) !important;
  filter: none !important;
  opacity: 1 !important;
}
/* Only the children: a linear-gradient IS a background-image, so clearing it
   on the tile as well wiped the green fill (caught in the render). */
body.apple-mode .drawer-wrap .cal-day.selected * { background-image: none !important; }
body.apple-mode .drawer-wrap .cal-day.selected .n { font-weight: 700 !important; }

/* ── The ledger's Who column (Luis, 2026-09-15) ──────────────────────────────
   The face alone: the name beside it was saying the same thing twice, and the
   column can be narrow without it. Larger, since it now carries the column on
   its own — the avatar's size is inline on the element (avatar_html), so this
   has to outrank it. The name is not deleted, only taken off the screen, so a
   reader still announces whose row it is. */
body.apple-mode .drawer-wrap .ledger-tbl .c-who { width: 62px !important; text-align: center; }
body.apple-mode .drawer-wrap .ledger-tbl .c-who .drawer-avatar {
  width: 30px !important;
  height: 30px !important;
  font-size: 11px !important;
  margin: 0 auto !important;
}
body.apple-mode .drawer-wrap .ledger-tbl .c-who > span:not(.drawer-avatar) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The favourites drawn as tabs in the repairs brand bar carry the same icons as
   the round quick buttons, so they get the same flick on hover (Luis,
   2026-09-16). Named here beside the button rules rather than copied into
   repairs.css: these keyframes live in this sheet, and a second set defined
   elsewhere would drift the first time one was tuned. */
body.apple-mode .mp-svc:hover .lq-ico-port   { animation: lq-plug .5s ease; }
body.apple-mode .mp-svc:hover .lq-ico-reset  { animation: lq-spin .6s ease; }
body.apple-mode .mp-svc:hover .lq-ico-soft   { animation: lq-brackets .5s ease; }
body.apple-mode .mp-svc:hover .lq-ico-virus  { animation: lq-wiggle .5s ease; }
body.apple-mode .mp-svc:hover .lq-ico-wrench { animation: lq-wrench .5s ease; }
body.apple-mode .mp-svc:hover .lq-ico { color: var(--ap-lift); }
@media (prefers-reduced-motion: reduce) { body.apple-mode .mp-svc:hover .lq-ico { animation: none; } }

/* ── The two cart buttons take house colours (Luis, 2026-09-16) ───────────────
   Cancel is plum. Complete is the in-house green when it can be pressed and
   the in-house dark when it cannot.

   Both states are spelled out — :not(:disabled) and :disabled — rather than a
   base rule with an override, because two rules already claim this button at
   (0,2,0) WITH !important: the blue ramp at line 637 above, and repairs.css's
   grey `.submit-sale-btn:disabled`. Equal specificity means load order decides,
   and apple.css loads last, so the grey was losing and an empty cart still
   showed a bright, pressable-looking button. Naming the state takes each rule
   to (0,3,0) and settles it on specificity instead of on which file happens to
   come last — which is the kind of thing that quietly breaks when someone
   reorders a <link>.

   The lighting geometry is the blue's, unchanged: highlight at 22%/10%, the
   house colour as the body, a deeper edge beneath. Only the hue moved. */
body.apple-mode .submit-sale-btn:not(:disabled) {
  background: radial-gradient(132% 122% at 22% 8%, #7dbca6 0%, #3f7a68 42%, #234a3c 100%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(10, 45, 35, 0.35);
  box-shadow: 0 6px 18px rgba(63, 122, 104, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}
body.apple-mode .submit-sale-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 8px 22px rgba(63, 122, 104, 0.40) !important;
}

/* Disabled, for BOTH buttons: house silver.

   The text sits at 75% white, not the 45% a dark fill could carry — silver is
   a mid tone and 45% white on it is close to invisible. Muted is the signal;
   unreadable is a different message. */
body.apple-mode .submit-sale-btn:disabled,
body.apple-mode .cancel-sale-btn:disabled {
  /* A ramp, but a shallow one, and lit from the same corner as the other two
     so all three are the same object in different moods. What makes this one
     read as OFF is not flatness — it is that nothing lifts it: no drop shadow
     underneath and no white seam along the top edge. Those two are what say
     "raised"; the gradient on its own only says "made of something". */
  background: radial-gradient(132% 122% at 22% 8%, #a8aaae 0%, #8e9095 45%, #74767c 100%) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed;
}
/* Neither disabled button may answer the pointer. repairs.css lifts both on
   hover at (0,2,0) and would still do it through the disabled state. */
body.apple-mode .submit-sale-btn:disabled:hover,
body.apple-mode .cancel-sale-btn:disabled:hover {
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Plum, and the 2px orange border goes with it — the border was doing the
   work of an edge on a translucent fill, and a solid ramp does not need one. */
body.apple-mode .cancel-sale-btn {
  background: radial-gradient(132% 122% at 22% 8%, #b2717d 0%, #6b3744 42%, #3e1d28 100%) !important;
  border: 0 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(45, 15, 25, 0.35);
  box-shadow: 0 6px 18px rgba(107, 55, 68, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body.apple-mode .cancel-sale-btn:hover:not(:disabled) {
  background: radial-gradient(132% 122% at 22% 8%, #bd7d8a 0%, #78404e 42%, #4a2532 100%) !important;
  box-shadow: 0 8px 22px rgba(107, 55, 68, 0.38) !important;
}

/* ── The sourcing radios take house colours (Luis, 2026-09-16) ────────────────
   Silver when not picked, in-house green when picked.

   Scoped through .csc-radios so each rule lands at (0,4,1) and outranks the
   blue ramp up at line 639 on specificity. That rule names the very same
   selector, so matching it would leave the winner decided by which block sits
   lower in the file — fine today, silently wrong the first time someone moves
   one of them. */

/* Not picked: silver on the ring, the label and the dot, but kept as an
   OUTLINE rather than a silver fill. These are three things you can still
   choose; three solid silver pills would read as three disabled buttons
   instead of as a choice not yet made. */
body.apple-mode .csc-radios .csc-radio {
  border-color: rgba(142, 144, 149, 0.45) !important;
  color: #8e9095 !important;
  background: transparent !important;
}
body.apple-mode .csc-radios .csc-radio:hover:not(.on) {
  border-color: rgba(142, 144, 149, 0.8) !important;
  background: rgba(142, 144, 149, 0.08) !important;
}
body.apple-mode .csc-radios .csc-radio:not(.on) .csc-dot {
  border-color: #b4b6ba !important;
}

/* Picked: the house green, on the same lighting as the cart buttons so the
   whole screen agrees about where its light comes from. */
body.apple-mode .csc-radios .csc-radio.on {
  background: radial-gradient(132% 122% at 22% 8%, #7dbca6 0%, #3f7a68 42%, #234a3c 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 2px 6px rgba(63, 122, 104, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* The halo, brought right down. The pill was casting 0 6px 18px of blue while
   the 16px dot threw THREE white glows on top of it — 9px/2px, 18px/5px, and
   another 6px off the core. That is more light than the dot is wide, and the
   haze where the two met is what read as over-shadowed. One short glow still
   says the lamp is lit. */
body.apple-mode .csc-radios .csc-radio.on .csc-dot {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.5) !important;
}
body.apple-mode .csc-radios .csc-radio.on .csc-dot::after {
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHONE INVENTORY (wired 2026-09-17).

   This page dresses itself. It is the one screen that never adopted the
   shared .card / .table-wrap, so almost nothing above reaches it — it draws
   its own liquid-glass panels instead.

   What DOES reach it is the token block at the top of this file. The three
   main panels are painted from --glass-bg / --glass-border / --glass-shadow,
   which body.apple-mode already redefines as pearl, hairline and transparent,
   so they arrive most of the way there. This section takes off the frost they
   keep, opens the two glass columns, and dresses the parts that answer to
   nobody: the header, the brand tabs, the table, the pager and the add sheet.

   ── Why the tokens are scoped to .phoneinv-main and the modals ────────────
   Not to <body>. The page reads --accent for everything from the Add button
   to a price, and --accent lives on :root — so redefining it on <body> would
   reach the rail and the top bar, which are dressed in --ap-* above and have
   to look the same on every Apple page. The modals are listed separately
   because they sit OUTSIDE <main>, which is also why index.php now carries a
   .phoneinv-page class on <body>: it is the only handle that reaches them.

   ── What is deliberately NOT touched ──────────────────────────────────────
   The entrance animations. .page-loading sets opacity 0 on <body> and the
   fade back in is an ANIMATION on .page-ready — so the blanket
   "animation: none" this file uses on .card elsewhere would leave this page
   blank. The weekly bars keep their blue/orange/green too: that colouring is
   what says sales from cost from profit, and it is already flat.
   ══════════════════════════════════════════════════════════════════════════ */

body.apple-mode .phoneinv-main,
body.apple-mode.phoneinv-page .modal-overlay {
  --accent:  var(--ap-blue);
  --accent2: var(--ap-blue-hi);
  /* No --font-ui here. It would be a no-op: index.css already resolves it to
     SF Mono for the whole app, --ap-font is the same stack, and nothing this
     page loads redefines it. The house face was already on this screen. */
  /* Money, wherever it appears on this page. The in-house green, the same
     figure colour the dashboard table uses, so a price reads the same in
     both places (Luis, 2026-09-14). */
  --inv-money: #3f7a68;
}

/* ── The page header ──────────────────────────────────────────────────────── */
body.apple-mode .phoneinv-title    { color: var(--ap-ink) !important; font-weight: 600; letter-spacing: -0.022em; }
body.apple-mode .phoneinv-subtitle { color: var(--ap-soft) !important; }

/* Manage / Count: the quiet control — white, one hairline, blue label. */
body.apple-mode .phoneinv-manage-btn {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 999px !important;
  color: var(--ap-blue) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-weight: 400;
}
body.apple-mode .phoneinv-manage-btn:hover {
  background: var(--ap-canvas) !important;
  border-color: var(--ap-line) !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Add New Item: the one filled blue on the page. */
body.apple-mode .phoneinv-add-btn {
  background: var(--ap-blue) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 400;
}
body.apple-mode .phoneinv-add-btn:hover { background: var(--ap-blue-hi) !important; transform: none !important; box-shadow: none !important; }
body.apple-mode .phoneinv-add-btn span  { font-weight: 400; }

/* ── The panels: pearl, one hairline, 18px, no frost ──────────────────────── */
body.apple-mode :is(.glass-stats-card, .inv-toolbar-card, .inv-table-card, .inv-combined, .mini-table-panel, .brand-detail-block) {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* .inv-combined draws its lit rim and its two glows as pseudo-elements, which
   no amount of overriding on the element itself would put out. */
body.apple-mode .inv-combined::before,
body.apple-mode .inv-combined::after { display: none !important; }

body.apple-mode .stats-card-title   { color: var(--ap-ink) !important; font-weight: 600; letter-spacing: -0.01em; }
body.apple-mode .si-section-label,
body.apple-mode .mini-table-th      { color: var(--ap-soft) !important; font-weight: 400; }
body.apple-mode .stats-card-icon    { mix-blend-mode: normal; }

/* ── The stat rows ────────────────────────────────────────────────────────── */
body.apple-mode .si-label,
body.apple-mode .si-muted,
body.apple-mode .si-sub      { color: var(--ap-soft) !important; font-weight: 400; }
body.apple-mode .si-value    { color: var(--ap-ink) !important; font-weight: 600; }
body.apple-mode .si-green    { color: var(--inv-money) !important; }
body.apple-mode .si-blue     { color: var(--ap-blue) !important; }
body.apple-mode :is(.si-red, .si-warn) { color: #c9262e !important; }
body.apple-mode :is(.si-accent, .si-accent-text) { color: var(--ap-blue) !important; }
/* The picked-out row: parchment, not a blue wash. */
body.apple-mode .si-highlight { background: var(--ap-canvas) !important; border-radius: 12px; }
body.apple-mode .si-bar-track { background: var(--ap-canvas) !important; }

/* ── The weekly columns ───────────────────────────────────────────────────── */
body.apple-mode .ws-label   { color: var(--ap-soft) !important; font-weight: 400; }
body.apple-mode .ws-value   { color: var(--ap-ink) !important; font-weight: 600; letter-spacing: -0.02em; }
body.apple-mode .ws-week    { color: var(--ap-soft) !important; }
body.apple-mode .ws-pct-up   { color: var(--inv-money) !important; }
body.apple-mode .ws-pct-down { color: #c9262e !important; }
body.apple-mode .ws-divider { background: var(--ap-line) !important; }

/* ── Brand tabs: the segmented control ────────────────────────────────────── */
body.apple-mode :is(.brand-tab, .mini-tab) {
  background: var(--ap-canvas) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 999px !important;
  color: var(--ap-mid) !important;
  box-shadow: none !important;
  font-weight: 400;
}
body.apple-mode :is(.brand-tab:hover, .mini-tab:hover) { background: var(--ap-white) !important; color: var(--ap-ink) !important; }
body.apple-mode :is(.brand-tab.active, .mini-tab.active) {
  background: var(--ap-blue) !important;
  border-color: var(--ap-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
body.apple-mode .tab-count { background: rgba(0, 0, 0, 0.06) !important; color: inherit; font-weight: 400; }
body.apple-mode .brand-tab.active .tab-count { background: rgba(255, 255, 255, 0.24) !important; }
body.apple-mode .tab-divider { background: var(--ap-line) !important; }

/* ── Search and the filter selects ────────────────────────────────────────── */
/* The capsule and the blue focus ring come from the shared input rule above;
   only the frost and the inset lighting are left to take off. */
body.apple-mode :is(.inv-search-input, .inv-filter-select) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
body.apple-mode .inv-search-input:focus { box-shadow: none !important; }
body.apple-mode .inv-search-icon { opacity: 0.55; }

/* ── The inventory table: flat rows on hairlines ──────────────────────────── */
body.apple-mode .inv-table thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--ap-line) !important;
  color: var(--ap-soft) !important;
  font-weight: 400;
}
body.apple-mode .inv-table tbody tr    { border-bottom: 1px solid var(--ap-line-soft) !important; }
body.apple-mode .inv-table tbody tr:last-child { border-bottom: none !important; }
body.apple-mode .inv-table tbody tr:hover { background: var(--ap-canvas) !important; }
body.apple-mode .inv-table td          { color: var(--ap-ink) !important; }
body.apple-mode .inv-table-toolbar     { border-bottom: 1px solid var(--ap-line) !important; }
body.apple-mode .inv-item-name         { color: var(--ap-ink) !important; font-weight: 600; letter-spacing: -0.01em; }
body.apple-mode :is(.inv-imei, .inv-location, .inv-date, .inv-page-info) { color: var(--ap-soft) !important; font-weight: 400; }
body.apple-mode :is(.inv-price, .mini-table-price) { color: var(--inv-money) !important; font-weight: 600; }
body.apple-mode .mini-table-price.blue   { color: var(--ap-blue) !important; }
body.apple-mode .mini-table-price.profit { color: var(--inv-money) !important; }
body.apple-mode .mini-table-price.sold   { color: #c9262e !important; }
body.apple-mode :is(.mini-table-price.tax, .mini-table-price.storage, .mini-table-price.bat-col) { color: var(--ap-mid) !important; }
body.apple-mode .mini-table-name   { color: var(--ap-ink) !important; }
body.apple-mode .mini-table-row    { border-bottom: 1px solid var(--ap-line-soft) !important; }
body.apple-mode .mini-table-header { border-bottom: 1px solid var(--ap-line) !important; }
body.apple-mode :is(.inv-thumb-wrap, .mini-table-img) {
  background: var(--ap-canvas) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* The chips in a row — SIM, storage, grade — read as the table's badges do. */
body.apple-mode :is(.inv-sim-badge, .inv-storage, .inv-grade-badge) {
  background: var(--ap-canvas) !important;
  color: var(--ap-mid) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-weight: 400;
}

/* Row actions and the pager: the quiet control again. Press is the shared
   scale(0.95), so the lift on hover comes off. */
body.apple-mode .inv-action-btn:hover  { transform: none !important; }
body.apple-mode .inv-action-btn:active { transform: none !important; }
body.apple-mode .inv-page-btn {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 8px !important;
  color: var(--ap-blue) !important;
  box-shadow: none !important;
}
body.apple-mode .inv-page-btn:hover    { background: var(--ap-canvas) !important; transform: none !important; }
body.apple-mode .inv-page-btn.active   { background: var(--ap-blue) !important; border-color: var(--ap-blue) !important; color: #ffffff !important; }
body.apple-mode .inv-page-btn:disabled { color: var(--ap-soft) !important; background: var(--ap-canvas) !important; }

/* ── The add / edit sheet ─────────────────────────────────────────────────── */
body.apple-mode.phoneinv-page .modal-overlay { background: rgba(0, 0, 0, 0.32) !important; backdrop-filter: blur(3px); }
body.apple-mode.phoneinv-page .modal-card {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16) !important;   /* a sheet lifted off the page is the one shadow Apple keeps */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.apple-mode.phoneinv-page .modal-header  { border-bottom: 1px solid var(--ap-line) !important; }
body.apple-mode.phoneinv-page .modal-eyebrow { color: var(--ap-soft) !important; font-weight: 400; }
body.apple-mode.phoneinv-page .modal-title   { color: var(--ap-ink) !important; font-weight: 600; letter-spacing: -0.02em; }
body.apple-mode.phoneinv-page .modal-label   { color: var(--ap-soft) !important; font-weight: 400; }
/* A form of eighteen fields is the one place the capsule is wrong — a column
   of pills reads as a column of buttons. Back to Apple's 10px field. */
body.apple-mode.phoneinv-page :is(.modal-input, .modal-field select, .modal-field textarea) {
  border-radius: 10px !important;
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
}
body.apple-mode.phoneinv-page .modal-close { background: transparent !important; border: none !important; color: var(--ap-soft) !important; box-shadow: none !important; }
body.apple-mode.phoneinv-page .phone-save-btn {
  background: var(--ap-blue) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 400;
}
body.apple-mode.phoneinv-page .phone-save-btn:hover { background: var(--ap-blue-hi) !important; transform: none !important; box-shadow: none !important; }
body.apple-mode.phoneinv-page :is(.phone-cancel-btn, .phone-add-loc-btn) {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 999px !important;
  color: var(--ap-blue) !important;
  box-shadow: none !important;
  font-weight: 400;
}
body.apple-mode.phoneinv-page :is(.phone-cancel-btn, .phone-add-loc-btn):hover { background: var(--ap-canvas) !important; }

/* The weekly block behind the three columns. Its two variants are a blue wash
   on the Decibel panel and a red one on Cell Phone Planet — decoration, not
   meaning: each panel already says which shop it is, in its own logo and
   title, directly above. Two tinted slabs inside white cards were the one
   thing left on the page still arguing with the parchment, so both take the
   same parchment and hairline the picked-out stat rows do. */
body.apple-mode :is(.ws-section, .ws-section-blue, .ws-section-red) {
  background: var(--ap-canvas) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* The bars' baseline, in the sheet's own hairline. */
body.apple-mode .ws-bars::before { border-top: 1px dashed var(--ap-line) !important; }

/* ══ Repair History and Sold Devices (Luis, 2026-09-18) ══════════════════════
 *
 * Both pages build their table with their own classes rather than the shared
 * .card / .table-wrap this sheet already dresses, so the theme reached their
 * text and their chrome but left the table itself on its old palette.
 *
 * They are also, happily, twins: completed_repairs.css and sold_devices.css are
 * the same sheet with cr- and sd- prefixes, and BOTH declare their whole palette
 * as custom properties on .cr-page / .sd-page — --panel, --line, --ink,
 * --ink-soft, --accent, --accent-soft, --shadow.
 *
 * So this re-tints the variables instead of restating the rules. Nothing about
 * either table's layout, padding or structure is touched; the same rules simply
 * resolve to Apple's values. That is a dozen lines instead of a hundred, it
 * cannot drift out of step with a layout change in either sheet, and if the
 * theme is switched off both pages fall straight back to their own colours with
 * nothing left behind.
 *
 * The wrappers were already border-radius:18px with a 1px --line border and a
 * --panel background, which IS this theme's card once those three resolve to
 * Apple values — hence no new surface rules, only a shadow turned off, because
 * the flat surfaces here carry a hairline rather than a lift.
 *
 * (0,2,1) against the pages' own (0,1,0), so these win without !important. */
body.apple-mode .cr-page,
body.apple-mode .sd-page {
  --ink:         var(--ap-ink);
  --ink-mid:     var(--ap-mid);
  --ink-soft:    var(--ap-soft);
  --line:        var(--ap-line);
  --accent:      var(--ap-blue);
  /* The row hover. Apple's canvas grey rather than a blue wash — the same tint
     the dashboard's own table rows use on hover. */
  --accent-soft: rgba(0, 0, 0, 0.035);
  --panel:       var(--ap-white);
  --shadow:      none;
  font-family:   var(--ap-font);
}

/* The header row reads as a label strip, not as data: one step quieter than the
   body text and separated by the softer of the two hairlines. */
body.apple-mode .cr-table thead th,
body.apple-mode .sd-table thead th {
  color: var(--ap-soft);
  border-bottom-color: var(--ap-line);
  font-family: var(--ap-font);
}
/* The last row's rule would otherwise draw a line directly on top of the
   wrapper's own bottom border — two hairlines, 1px apart. */
body.apple-mode .cr-table tbody tr:last-child td,
body.apple-mode .sd-table tbody tr:last-child td { border-bottom: 0; }

/* The search field is the same shape as the wrapper and takes the same
   treatment, so the two do not sit next to each other wearing different ideas
   of what a surface is. */
body.apple-mode .cr-search,
body.apple-mode .sd-search {
  background: var(--ap-white);
  border-color: var(--ap-line);
  box-shadow: none;
}


/* ── The ground, washed (Luis, 2026-09-21) ──────────────────────────────────
   After imagecolorpicker.com: a white page with four soft colour fields
   bleeding in from the edges — warm at the top-left, a large pink down the
   left, mint down the right, cyan at the far edge — and clear white through
   the middle where the content sits. The same composition here in the house
   palette: sky blue top-left, the light plum as the big left field, the
   in-house green as the right one, sky blue again at the far right.

   THE MECHANISM IS A FIXED PSEUDO-ELEMENT, NOT body { background }.
   The four fields are radial gradients sized in viewport units and pinned to
   the viewport's edges, and they have to stay put while the page scrolls —
   the reference's colour does not travel with the content. background-
   attachment: fixed would do that on body, but it is unreliable on Safari and
   interacts badly with the dark-theme stacking elsewhere in this file. A
   position:fixed ::before with z-index:-1 sits above the canvas (the #f5f5f7
   body ground, painted first) and below every in-flow element, which is
   exactly the layer the wash belongs on. pointer-events:none so it can never
   catch a click meant for something under it.

   Each field fades to transparent by 70% of its own radius, so there is no
   hard edge anywhere and the four overlap into each other without banding.
   Alphas are set for the *light* accents — the base plum and green are dark
   colours, and at any alpha that reads as colour they turn the ground muddy;
   the light plum (--ap-acc-light) tints to a rose the way the reference's
   pink does.

   The rail and the top bar are opaque #f5f5f7 and cover the extreme corners,
   so the wash shows in the content area and the chrome stays a flat frame
   around it. If the colour should show through the chrome as it does in the
   reference, that is a separate change to those two elements.

   To go back: delete this block. Copies of this file as it stood before are
   at ~/site_backups/bg_2026-09-21/ on the server. */
body.apple-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* top-left: the rail's own grey, not a colour (Luis, 2026-09-21). Listed
       first so it paints on top: where the rose field reaches up into this
       corner it is pulled back to the sidebar's #f5f5f7, so the corner reads
       as the rail continuing rather than as a tint of its own. */
    radial-gradient(38vw 46vh at 0% 0%,      rgba(245, 245, 247, .90) 0%, transparent 70%),
    /* top-right: the same, mirrored (Luis, 2026-09-21). It was the sky-blue
       field and it was listed LAST, i.e. underneath the green - a grey put
       there would have been painted over. Moved up here, above the colour
       fields, so the corner is held at the top bar's #f5f5f7 like the left. */
    radial-gradient(38vw 46vh at 100% 0%,    rgba(245, 245, 247, .90) 0%, transparent 70%),
    /* softer, at Luis's call (2026-09-21), twice over: .62/.44 -> .42/.30 -> .30/.21,
       and the fade pushed from 70% to 80% of the radius so the colour thins
       out over a longer run instead of arriving and then stopping. */
    /* The plum field became the rail's warm grey, #e6e5e1 (Luis, 2026-09-24),
       same pool, same fade. Far stronger alpha than the plum's .30, on
       purpose: the plum is a colour and reads at a third, but this grey is a
       near neighbour of the #f5f5f7 canvas and at .30 would be invisible —
       it needs most of its strength to show as the rail's tone spilling in
       from the left. To go back: rgba(176, 122, 137, .30). */
    radial-gradient(44vw 82vh at 0% 58%,     rgba(230, 229, 225, .85) 0%, transparent 80%),
    radial-gradient(44vw 86vh at 100% 52%,   rgba(63, 122, 104, .21) 0%, transparent 80%);
}

/* ── The Repair Sale menu rows (Luis, 2026-09-22) ────────────────────────────
   The rows are links, and this theme's blanket anchor colour outranks the
   ink set on them in index.css — they came up in the theme's blue, which on
   a menu reads as "unvisited link", not "row". Scoped three deep so it wins
   on specificity as well as on !important; the hover takes the plum the
   dashboard's filter rows take. */
body.apple-mode .tm-panel .tm-opt { color: var(--ap-ink) !important; font-family: var(--ap-font) !important; }
body.apple-mode .tm-panel .tm-opt:hover { color: var(--ap-acc) !important; }
body.apple-mode .tm-panel .tm-opt:hover .tm-ico { color: var(--ap-acc); }


/* ══════════════════════════════════════════════════════════════════════════════
   CUSTOMERS — the list (customers/index.php) and the profile (customers/view.php)
   (Luis, 2026-09-22)

   Two pages, one vocabulary: both are built from the old blue glass — translucent
   white panels over a backdrop blur, blue-tinted hairlines, blue gradient
   buttons, navy ink. The list sheet declares no custom properties at all, so
   unlike Completed Repairs there is nothing to re-tint; these are targeted
   overrides on the page's own classes, one per surface family.

   The profile sheet also carries an UNSCOPED neumorphic pilot at its foot:
   `:root` variables, `.main-content { background }`, and every panel and
   button slabbed with !important. Those rules fire on every theme, so the Apple
   rules below are written to outrank them — same !important, higher
   specificity, (0,2,1) against the pilot's (0,1,0). Nothing in that pilot is
   edited; it is simply beaten, and switching the theme off gives the page
   straight back to it.

   The purchase-history table (.cvh-tablewrap) is the one piece that declares
   the same token set the Completed Repairs table does — --ink, --line, --panel
   and so on — so that part re-tints its variables exactly as .cr-page does.

   Palette: plum for what was blue (accents, badges, the active page), the
   in-house green for money, the theme's flat pearl surfaces with a hairline
   in place of glass and shadow. Primary buttons are ink pills, as on the
   theme's other pages. */

/* ── Both pages: the ground and the type ─────────────────────────────────── */
body.apple-mode .cust-container,
body.apple-mode .cv-container { font-family: var(--ap-font); color: var(--ap-ink); }
/* The profile's pilot paints .main-content solid grey, which would sit on top of
   the washed ground every other Apple page shows through. Transparent here. */
body.apple-mode .main-content { background: transparent !important; }

/* ── Glass → pearl: every translucent panel becomes a flat card with a hairline */
body.apple-mode .cust-search-form,
body.apple-mode .cust-stat-card,
body.apple-mode .cust-table-wrap,
body.apple-mode .cust-modal,
body.apple-mode .cv-profile-header,
body.apple-mode .cv-tile,
body.apple-mode .cv-history-card,
body.apple-mode .cv-tier-chip,
body.apple-mode .cvh-tablewrap,
body.apple-mode .cv-modal {
  background: var(--ap-white) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ap-line) !important;
  box-shadow: none !important;
}
/* The modal sheet floats over a dimmed page; it keeps a lift, the rest do not. */
body.apple-mode .cust-modal,
body.apple-mode .cv-modal { box-shadow: 0 24px 60px rgba(31, 45, 61, .18) !important; }
body.apple-mode .cust-modal-overlay,
body.apple-mode .cv-modal-overlay { background: rgba(29, 29, 31, .32); }

/* ── Headings and captions ───────────────────────────────────────────────── */
body.apple-mode .cust-header h1,
body.apple-mode .cust-modal-header h2,
body.apple-mode .cv-profile-info h1,
body.apple-mode .cv-history-card h3,
body.apple-mode .cv-modal-header h2 { color: var(--ap-ink); }
body.apple-mode .cv-history-card h3 { border-left-color: var(--ap-acc); }
body.apple-mode .cust-header p,
body.apple-mode .cust-stat-label,
body.apple-mode .cust-id,
body.apple-mode .cust-phone,
body.apple-mode .cust-page-info,
body.apple-mode .cust-no-data,
body.apple-mode .cv-profile-id,
body.apple-mode .cv-tier-chip-label,
body.apple-mode .cv-tier-chip-note,
body.apple-mode .cv-tile-lbl,
body.apple-mode .cv-tile-foot,
body.apple-mode .cv-contact-label,
body.apple-mode .cv-hist-page-info,
body.apple-mode .cv-no-data { color: var(--ap-soft); }
body.apple-mode .cust-contact,
body.apple-mode .cust-table tbody td,
body.apple-mode .cv-tile-val,
body.apple-mode .cv-contact-value,
body.apple-mode .cv-tier-chip-note b { color: var(--ap-ink); }
body.apple-mode .cust-stat-value { color: var(--ap-acc); }
body.apple-mode .cust-spent { color: #3f7a68; }

/* ── The list's table ────────────────────────────────────────────────────── */
body.apple-mode .cust-table thead th { color: var(--ap-soft); border-bottom-color: var(--ap-line); }
body.apple-mode .cust-table tbody td { border-bottom-color: var(--ap-line); }
body.apple-mode .cust-table tbody tr:last-child td { border-bottom: 0; }
body.apple-mode .cust-table tbody tr:hover { background: rgba(0, 0, 0, .035); }

/* ── Avatars, badges, chips: plum where they were blue ───────────────────── */
body.apple-mode .cust-avatar {
  background: rgba(var(--ap-acc-rgb), .10);
  color: var(--ap-acc);
  border-color: rgba(var(--ap-acc-rgb), .18);
}
body.apple-mode .cv-avatar {
  background: var(--ap-acc);
  box-shadow: none;
}
body.apple-mode .cust-points-badge,
body.apple-mode .cv-status-pending {
  background: rgba(var(--ap-acc-rgb), .09);
  color: var(--ap-acc);
  border-color: rgba(var(--ap-acc-rgb), .22);
}
body.apple-mode .cv-status-paid { background: rgba(63, 122, 104, .10); color: #3f7a68; border-color: rgba(63, 122, 104, .28); }
body.apple-mode .cv-contact-icon { background: rgba(var(--ap-acc-rgb), .09); color: var(--ap-acc); }
body.apple-mode .cv-chip-blue   { background: rgba(var(--ap-acc-rgb), .10); color: var(--ap-acc); }
body.apple-mode .cv-chip-green  { background: rgba(63, 122, 104, .12); color: #3f7a68; }
body.apple-mode .cv-chip-violet { background: rgba(142, 144, 149, .14); color: #6e7075; }
body.apple-mode .cv-trend-up { color: #3f7a68; }
body.apple-mode .cv-back { color: var(--ap-acc) !important; }

/* The two coloured cards on the profile: flat house colours, no gradient, no
   coloured glow. Points is plum (it is a loyalty figure, the accent's job);
   spend is money, so the in-house green. The pilot's coloured shadows go. */
body.apple-mode .cv-points-card { background: var(--ap-acc) !important; box-shadow: none !important; }
body.apple-mode .cv-spend-card  { background: #3f7a68 !important; box-shadow: none !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Primary: the ink pill the theme uses elsewhere. */
body.apple-mode .cust-btn-add,
body.apple-mode .cust-search-btn,
body.apple-mode .cust-btn-save,
body.apple-mode .cv-btn-save {
  background: var(--ap-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  box-shadow: none !important;
  transition: transform .18s var(--ease-liquid), background .18s ease;
}
body.apple-mode .cust-search-btn { border-radius: 999px; }
body.apple-mode .cust-btn-add:hover,
body.apple-mode .cust-btn-save:hover,
body.apple-mode .cv-btn-save:hover { background: #000 !important; transform: translateY(-1px); box-shadow: none !important; }
/* Secondary and row buttons: pearl with a hairline; the label carries the ink. */
body.apple-mode .cust-btn-edit,
body.apple-mode .cust-btn-view,
body.apple-mode .cust-btn-cancel,
body.apple-mode .cust-page-btn,
body.apple-mode .cv-action-btn,
body.apple-mode .cv-hist-page-btn,
body.apple-mode .cv-btn-cancel {
  background: var(--ap-white) !important;
  color: var(--ap-ink) !important;
  border: 1px solid var(--ap-line) !important;
  border-radius: 999px;
  box-shadow: none !important;
  transform: none;
}
body.apple-mode .cust-btn-edit:hover,
body.apple-mode .cust-btn-view:hover,
body.apple-mode .cust-btn-cancel:hover,
body.apple-mode .cust-page-btn:hover,
body.apple-mode .cv-action-btn:hover,
body.apple-mode .cv-hist-page-btn:hover,
body.apple-mode .cv-btn-cancel:hover { background: #fff !important; border-color: rgba(0, 0, 0, .16) !important; box-shadow: none !important; }
body.apple-mode .cv-action-btn:active,
body.apple-mode .cv-hist-page-btn:active,
body.apple-mode .cv-btn-cancel:active,
body.apple-mode .cv-btn-save:active { box-shadow: none !important; transform: scale(.97); }
/* The action buttons keep their meaning in the label colour: call is money-
   green, text is the accent, edit stays its amber. */
body.apple-mode .cv-btn-call { color: #3f7a68 !important; }
body.apple-mode .cv-btn-text { color: var(--ap-acc) !important; }
body.apple-mode .cv-btn-edit { color: #b45309 !important; }
body.apple-mode .cust-page-btn.active { background: var(--ap-ink) !important; color: #fff !important; border-color: var(--ap-ink) !important; }
body.apple-mode .cust-modal-close,
body.apple-mode .cv-modal-close { color: var(--ap-soft); box-shadow: none; }
body.apple-mode .cust-modal-close:hover,
body.apple-mode .cv-modal-close:hover { background: rgba(0, 0, 0, .05); color: var(--ap-ink); }

/* ── Inputs: the theme's own field rule dresses these; only the blue tint,
      the blue ring and the pilot's carved well have to be taken off. ───── */
body.apple-mode .cust-search-input { color: var(--ap-ink); }
body.apple-mode .cust-search-input::placeholder,
body.apple-mode .cust-form-input::placeholder,
body.apple-mode .cv-form-input::placeholder { color: var(--ap-soft); }
body.apple-mode .cust-form-group label,
body.apple-mode .cv-form-group label { color: var(--ap-soft); }
body.apple-mode .cust-modal .cust-form-input,
body.apple-mode .cv-modal .cv-form-input {
  background: var(--ap-white) !important;
  border: 1px solid var(--ap-line) !important;
  box-shadow: none !important;
  color: var(--ap-ink) !important;
}
body.apple-mode .cust-modal .cust-form-input:focus,
body.apple-mode .cv-modal .cv-form-input:focus {
  border-color: rgba(var(--ap-acc-rgb), .45) !important;
  box-shadow: 0 0 0 3px rgba(var(--ap-acc-rgb), .12) !important;
}

/* ── Modal header rule, tier bar ─────────────────────────────────────────── */
body.apple-mode .cust-modal-header,
body.apple-mode .cv-modal-header { border-bottom-color: var(--ap-line); }
body.apple-mode .cv-tier-chip-bar { background: rgba(0, 0, 0, .07); }
body.apple-mode .cv-contact-row { border-bottom-color: var(--ap-line); }
body.apple-mode .cv-hist-pagination { border-top-color: var(--ap-line); }

/* ── The purchase-history table: re-tinted through its own tokens ────────── */
body.apple-mode .cvh-tablewrap {
  --ink:      var(--ap-ink);
  --ink-mid:  var(--ap-mid);
  --ink-soft: var(--ap-soft);
  --line:     var(--ap-line);
  --accent:   var(--ap-acc);
  --green:    #3f7a68;
  --panel:    var(--ap-white);
  font-family: var(--ap-font);
}
body.apple-mode .cvh-table thead th { border-bottom-color: var(--ap-line) !important; }
body.apple-mode .cvh-row > td { border-bottom-color: var(--ap-line) !important; }
body.apple-mode .cvh-row:hover { background: rgba(0, 0, 0, .035); }
/* The opened row and its drawer: the pilot carves them in; here they are the
   canvas tone, flat, with the hairline back under the drawer. */
body.apple-mode .cvh-row.open { background: var(--ap-canvas) !important; box-shadow: none; }
body.apple-mode .cvh-detail.open .cvh-drawer-in { background: var(--ap-canvas); box-shadow: none; border-bottom: 1px solid var(--ap-line); }
body.apple-mode .cvh-grid { background: none; }
body.apple-mode .cvh-idetail,
body.apple-mode .cvh-notes,
body.apple-mode .cvh-sum { background: var(--ap-white); border: 1px solid var(--ap-line); box-shadow: none; }
body.apple-mode .cvh-sum { border: 0; }
body.apple-mode .cvh-t-sale { color: var(--ap-acc); background: rgba(var(--ap-acc-rgb), .10); }
body.apple-mode .cvh-pill { color: #3f7a68; background: rgba(63, 122, 104, .12); }

/* ── The two tills' icons, dressed like the bells (Luis, 2026-09-22) ───────
   And like them, light on the ink bar (2026-09-23). This rule sits far below
   the bar's other rules and wins on order, which is how a first attempt to
   light these glyphs up near line 480 changed nothing: the value has to be
   set HERE. No engrave filter — its dark half is invisible on ink and its
   white half is a smear. The sprite draws these at stroke 1.9 against the
   bells' 2.5 and that cannot be changed from CSS (the <g> carrying the
   attribute lives inside a <use>), so they sit at 86% rather than 72% to
   hold their own. */
body.apple-mode .topbar-icon-btn .tb-ico {
  opacity: .86;
  color: #ffffff;
  filter: none;
  transition: opacity .18s ease, transform .18s ease;
}
body.apple-mode .topbar-icon-btn:hover .tb-ico { opacity: 1; color: #ffffff; filter: none; transform: translateY(-1px) scale(1.08); }

/* ══════════════════════════════════════════════════════════════════════════
   THE TOP BAR'S DARK-TEXT SET, for the #e6e5e1 ground (Luis, 2026-09-24)
   ──────────────────────────────────────────────────────────────────────────
   Everything above still describes the ink bar: white ramp, white labels,
   translucent-white pills and glyphs. This block, last in the file so it
   wins on order, turns all of it dark for a light ground — the same values
   the bar wore on the canvas, with the pill and button bodies lifted to
   white so they still stand off a ground that is itself light grey.

   Kept as ONE block on purpose: delete it and the ink bar is back exactly,
   restore the ground in .topbar above, and nothing else needs touching.
   ══════════════════════════════════════════════════════════════════════════ */
body.apple-mode .topbar {
  /* No edge lines (Luis, 2026-09-24) — see the rail's rule for why the
     engraved groove went. The lit line inside the top edge went with it:
     with nothing else drawn on the bar's edges it read as a stray. */
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: var(--ap-ink);
}
/* The joint (Luis, 2026-09-24): where the bar and the rail meet, the content
   area's top-left corner is rounded like the cards instead of a hard 90°.
   A 16px square hung off the bar at that corner, filled with the chrome
   colour, with a quarter-circle cut out of it — and the groove carried
   round the curve as two rings, light nearest the content, then dark, the
   same order as along the straight edges. The base sheet drew a diagonal
   wedge in this pseudo-element and this theme hid it; it is brought back
   and redrawn from scratch here. */
body.apple-mode .topbar::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 64px; top: 100%;
  width: 16px; height: 16px;
  transform: none !important; clip-path: none !important; border: 0 !important;
  pointer-events: none;
  /* A plain quarter-circle of chrome, no rings — the groove they carried
     round the curve went with the groove itself (2026-09-24). */
  background: radial-gradient(circle at 100% 100%, transparent 16px, #fbfbfb 16px) !important;
  /* Follows the rail (Luis, 2026-09-24). The rail opens to 220px on hover
     and stays there when pinned; the piece cannot live on the rail itself
     — the rail clips its overflow, which is how the labels stay hidden — so
     it stays on the bar and slides to the rail's open edge on the same
     curve and clock the rail uses (index.css). :has() is what lets the bar
     know the rail is being hovered. */
  transition: left 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
body.apple-mode:has(.sidenav:hover) .topbar::after,
html.nav-pinned body.apple-mode .topbar::after { left: 220px; }
body.apple-mode .topbar-brand-name {
  /* background-IMAGE, not the shorthand: `background:` resets background-clip
     to border-box on its way through, and the ramp stops being clipped to
     the letters — the name rendered as a solid black-and-red block the
     first time this was written. The clip is restated here as well, so
     this block stands on its own. */
  background-image: linear-gradient(90deg, #141414 0%, #2e2e2e 40%, #4a4a4a 64.7%, #a5101a 64.7%, #d4262e 84%, #f05a5a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: var(--ap-raise-filter);
}
body.apple-mode .topbar-brand-sub { color: rgba(0, 0, 0, 0.55) !important; text-shadow: var(--ap-engrave) !important; }
body.apple-mode .topbar-user-name { color: var(--ap-ink) !important; }
body.apple-mode .topbar-user-role { color: rgba(0, 0, 0, 0.55) !important; }
body.apple-mode .topbar-sep { background: rgba(0, 0, 0, 0.18) !important; }

/* Pills: white bodies, since the canvas-coloured slab they had before would
   sit flush with a light-grey bar. */
body.apple-mode .topbar-action {
  background: #f5f5f7 !important;   /* a faint grey face on the white frosted bar (2026-09-24) */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
  color: var(--ap-ink) !important;
}
body.apple-mode .topbar-action:hover,
body.apple-mode .topbar-action.is-current { background: #ebebf0 !important; }
body.apple-mode .topbar-action-label { color: var(--ap-ink) !important; text-shadow: var(--ap-engrave) !important; }
body.apple-mode .topbar-action:hover .topbar-action-label,
body.apple-mode .topbar-action.is-current .topbar-action-label { color: var(--ap-lift) !important; }
body.apple-mode .topbar-action .lq-ico { color: rgba(29, 29, 31, 0.36); filter: var(--ap-engrave-filter); }
body.apple-mode .topbar-action:hover .lq-ico,
body.apple-mode .topbar-action.is-current .lq-ico { color: var(--ap-lift); filter: var(--ap-raise-filter); }

/* Icon buttons, the same way. */
body.apple-mode .topbar-icon-btn {
  background: #f5f5f7 !important;   /* a faint grey face on the white frosted bar (2026-09-24) */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
body.apple-mode .topbar-icon-btn:hover { background: #ebebf0 !important; }
body.apple-mode .topbar-icon-btn .lq-ico { color: rgba(29, 29, 31, 0.36); filter: var(--ap-engrave-filter); }
body.apple-mode .topbar-icon-btn:hover .lq-ico,
body.apple-mode .topbar-notif-wrap:has(.notif-dropdown.open) .topbar-icon-btn .lq-ico { color: var(--ap-lift); filter: var(--ap-raise-filter); }
body.apple-mode .topbar-icon-btn .tb-ico { color: rgba(29, 29, 31, 0.36); opacity: 1; filter: var(--ap-engrave-filter); }
body.apple-mode .topbar-icon-btn:hover .tb-ico { color: var(--ap-lift); filter: var(--ap-raise-filter); }

/* The avatar chip, back to its pale blue disc. */
body.apple-mode .topbar-avatar {
  background: rgba(26, 95, 168, 0.10) !important;
  border-color: rgba(26, 95, 168, 0.18) !important;
  color: var(--accent) !important;
}
body.apple-mode .topbar-user-btn:hover { background: rgba(26, 95, 168, 0.06) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   INK CHROME — the top bar and the rail as one dark frame (Luis, 2026-09-24)
   ──────────────────────────────────────────────────────────────────────────
   Switched by the "Ink chrome" button on the rail, which puts .chrome-ink on
   <body> (theme-switch.js, key dash_chrome). Without the class the frame is
   the Light chrome above: warm grey #e6e5e1, dark text. With it, bar and
   rail become one dark, translucent frame — the page showing faintly
   through a blur, white text, quiet translucent-white pills and glyphs. The
   ground was apple.com's near-black #1d1d1f, then a slate navy #293543,
   and was a deep wine #42252b, now a solid deep midnight blue #090d16, no blur (2026-09-24) (2026-09-24) —    or two under the house plum — at the same .85. Two looks kept side by side so they can be compared in use,
   not chosen blind.

   Two classes on <body> outrank every single-class rule above, including
   the light-text set at the end of the bar section, so nothing there needs
   to be touched and this block stands on its own. Delete it and the button
   to be rid of Ink; Light is unaffected either way.
   ══════════════════════════════════════════════════════════════════════════ */

/* The switch itself: only while Apple is the theme, since this block is
   written against apple-mode. Lit when Ink is on. */
#navChrome { display: none; }
body.apple-mode #navChrome { display: flex; }
body.apple-mode #navChrome[aria-pressed="true"] { background: rgba(0, 102, 204, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.35) !important; }
body.apple-mode.chrome-ink #navChrome[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; }

/* ── The bar ─────────────────────────────────────────────────────────────── */
body.apple-mode.chrome-ink .topbar {
  background: #090d16 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #f5f5f7 !important;
}
/* The joint, in Ink: the same rounded corner piece, filled with the wine at
   the bar's own translucency, and a single white hairline round the curve
   to match Ink's edges. */
body.apple-mode.chrome-ink .topbar::after {
  background: radial-gradient(circle at 100% 100%,
    transparent 15px, rgba(255, 255, 255, 0.10) 15px, rgba(255, 255, 255, 0.10) 16px,
    #090d16 16px) !important;
}
body.apple-mode.chrome-ink .topbar-brand-name {
  /* background-IMAGE, never the shorthand — the shorthand resets the clip
     and the name renders as a solid block. "Cell Phone" white to pale
     silver, the red lifted a step for a dark ground, one hard split. */
  background-image: linear-gradient(90deg, #ffffff 0%, #e8e8ec 40%, #c9cbd0 64.7%, #c4141c 64.7%, #e3333b 84%, #ff6464 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  /* A dark shadow alone: the theme's raise filter has a white half that
     reads as a halo around every letter on ink. */
  filter: drop-shadow(1px 1.5px 1.5px rgba(0, 0, 0, 0.65)) !important;
}
body.apple-mode.chrome-ink .topbar-brand-sub { color: rgba(255, 255, 255, 0.62) !important; text-shadow: none !important; }
body.apple-mode.chrome-ink .topbar-user-name { color: #f5f5f7 !important; }
body.apple-mode.chrome-ink .topbar-user-role { color: rgba(255, 255, 255, 0.60) !important; }
body.apple-mode.chrome-ink .topbar-sep { background: rgba(255, 255, 255, 0.14) !important; }

body.apple-mode.chrome-ink .topbar-action {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}
body.apple-mode.chrome-ink .topbar-action:hover,
body.apple-mode.chrome-ink .topbar-action.is-current { background: rgba(255, 255, 255, 0.18) !important; }
body.apple-mode.chrome-ink .topbar-action-label { color: rgba(255, 255, 255, 0.86) !important; text-shadow: none !important; }
body.apple-mode.chrome-ink .topbar-action:hover .topbar-action-label,
body.apple-mode.chrome-ink .topbar-action.is-current .topbar-action-label { color: #ffffff !important; }
body.apple-mode.chrome-ink .topbar-action .lq-ico { color: rgba(255, 255, 255, 0.70) !important; filter: none !important; }
body.apple-mode.chrome-ink .topbar-action:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-action.is-current .lq-ico { color: #ffffff !important; filter: none !important; }

body.apple-mode.chrome-ink .topbar-icon-btn {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
body.apple-mode.chrome-ink .topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.18) !important; }
body.apple-mode.chrome-ink .topbar-icon-btn .lq-ico { color: rgba(255, 255, 255, 0.72) !important; filter: none !important; }
body.apple-mode.chrome-ink .topbar-icon-btn:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-notif-wrap:has(.notif-dropdown.open) .topbar-icon-btn .lq-ico { color: #ffffff !important; filter: none !important; }
/* The two drawer icons come from the sprite at a lighter stroke than the
   bells, and that cannot be changed from here (the <g> lives inside a <use>),
   so they sit at 86% rather than 72% to hold their own. */
body.apple-mode.chrome-ink .topbar-icon-btn .tb-ico { color: #ffffff !important; opacity: .86 !important; filter: none !important; }
body.apple-mode.chrome-ink .topbar-icon-btn:hover .tb-ico { opacity: 1 !important; }

body.apple-mode.chrome-ink .topbar-avatar {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
body.apple-mode.chrome-ink .topbar-user-btn:hover { background: rgba(255, 255, 255, 0.08) !important; }

/* ── The rail ────────────────────────────────────────────────────────────── */
body.apple-mode.chrome-ink .sidenav {
  background: #090d16 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.apple-mode.chrome-ink .nav-item { color: rgba(255, 255, 255, 0.62) !important; }
body.apple-mode.chrome-ink .nav-item:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.08) !important; }
/* The current page: a translucent-white pill with a white label — the same
   language as the bar's pills — in place of the white card it is on Light.
   Plum steps back to being the accent it is on the cards, not on the
   chrome; plum on near-black is mud. */
body.apple-mode.chrome-ink .nav-item.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* The labels are gradient text in the base sheet (plum to ink, clipped to
   the letters). On ink they take the row's own colour, plain. */
body.apple-mode.chrome-ink .nav-label {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: inherit !important;
}
body.apple-mode.chrome-ink .nav-section-label { color: rgba(255, 255, 255, 0.42) !important; }
body.apple-mode.chrome-ink .nav-divider { background: rgba(255, 255, 255, 0.10) !important; }
/* No engraving on the dark ground: the filter's dark half is invisible on
   it and its light half smears. The icons take the row's own colour. */
body.apple-mode.chrome-ink .nav-item .nav-icon { filter: none !important; color: inherit !important; }
body.apple-mode.chrome-ink #navApple { background: rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; }

/* ── The repairs checkout's cart panel, on the dashboard's card fill (Luis,
   2026-09-24) ──────────────────────────────────────────────────────────────
   .glass-card-cus is painted higher up by a rule it shares with the product
   toolbar — the single white pool over pearl. This gives the panel the three
   pools over the warm grey the dashboard cards took today, and leaves the
   toolbar as it was, since the same toolbar also stands on the main checkout
   whose own panel is still on the pearl. Last in the file so it wins on
   order at equal weight. */
body.apple-mode .glass-card-cus {
  background:
    /* One pool from the centre (Luis, 2026-09-25), in place of the three
       corner pools: white at the heart of the card fading to the warm grey
       at its edges. */
    radial-gradient(ellipse 90% 100% at 50% 50%, #ffffff 0%, #ffffff 25%, rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0) 88%),
    #f0f0f2 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   WHITE CARDS — apple.com's arrangement, to compare in use (Luis, 2026-09-24)
   ──────────────────────────────────────────────────────────────────────────
   Switched by "White cards" on the rail (body.cards-white, key dash_cards),
   independent of the Light / Ink chrome. A flat #f5f5f7 page with no colour
   pools, and every card plain white with a hairline and a very soft shadow to
   hold its edge — white on #f5f5f7 is a small step, and without the edge a
   card washes into the page on a bright screen. Two classes on <body>
   outrank the pooled card fill above, so nothing there is touched; delete
   this block and the button to be rid of it.
   ══════════════════════════════════════════════════════════════════════════ */
#navCards { display: none; }
body.apple-mode #navCards { display: flex; }
body.apple-mode #navCards[aria-pressed="true"] { background: rgba(0, 102, 204, 0.12) !important; box-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.35) !important; }
body.apple-mode.chrome-ink #navCards[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; }

/* The page: flat, no pools. */
body.apple-mode.cards-white { background: #f5f5f7 !important; }
body.apple-mode.cards-white::before { background: none !important; }

/* Every card, both checkouts' panels included. */
body.apple-mode.cards-white :is(.card, .card-compact, .card-wide, .table-wrap, .hero-card, .glass-card-cus, .checkout-panel) {
  /* A hint of #fbfbfb round the edge (Luis, 2026-09-25): white through the
     middle 65%, fading to #f7f7f8 only at the border. */
  background: radial-gradient(ellipse 95% 100% at 50% 50%, #ffffff 0%, #ffffff 65%, #f7f7f8 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* White-on-white: controls that were drawn white to stand off a grey card
   get a faint grey face instead, so they still read as controls. */
body.apple-mode.cards-white .csc-radio:not(.on) { background: #f5f5f7; border-color: rgba(0, 0, 0, 0.14); }
body.apple-mode.cards-white .cart-source-chip { background: #fafafc !important; }
body.apple-mode.cards-white .tk-summary,
body.apple-mode.cards-white .co-step { background: #fafafc !important; }

/* The search button on Ink (Luis, 2026-09-25): outside the field it sits on
   the dark bar itself, so the pane is a tenth of white and the icon white —
   green strokes through clear glass over midnight blue were barely there. */
body.apple-mode.chrome-ink .topbar-search-btn {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
body.apple-mode.chrome-ink .topbar-search-btn svg { stroke: #ffffff; }
body.apple-mode.chrome-ink .topbar-search-btn .vspark { fill: #ffffff; }

/* The search field on Ink, in the button's glass (Luis, 2026-09-25): a tenth
   of white over a blur, a light rim and lit top edge, white type. The field
   rules in index.css are anchored to two ids, so this carries both plus the
   body classes to outrank them. */
body.apple-mode.chrome-ink #searchWrap #topbarSearch {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.07) 100%) !important;
  backdrop-filter: blur(10px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  color: #f5f5f7 !important;
}
body.apple-mode.chrome-ink #searchWrap #topbarSearch::placeholder { color: rgba(255, 255, 255, 0.60); }
body.apple-mode.chrome-ink #searchWrap #topbarSearch:focus {
  border-color: rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
/* The label clears on focus on Ink too: the Ink placeholder colour above is
   more specific than index.css's focus rule, so it kept SEARCH showing while
   the cursor sat in the field (2026-09-25). */
body.apple-mode.chrome-ink #searchWrap #topbarSearch:focus::placeholder { color: transparent; }

/* ── The trade-in dialog, Apple flat (Luis, 2026-09-25) ─────────────────────
   The checkout's small dialogs are frosted glass; this one is the Apple
   sheet instead: a solid white card on a dimmed ground, hairlines, grey
   field faces, one blue accent for the chosen option and Continue. Scoped
   to the trade-in dialog only, so Cash received and Vida Pay keep their
   glass until they are asked for. */
body.apple-mode .tradein-modal { background: rgba(0, 0, 0, 0.30) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }
body.apple-mode .tradein-modal .misc-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 22px !important;
  padding: 20px 24px 22px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
body.apple-mode .tradein-modal .misc-title { color: #1d1d1f !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; text-transform: none !important; }
body.apple-mode .tradein-modal .misc-head .split-total { color: #1d1d1f !important; font-weight: 800 !important; }
body.apple-mode .tradein-modal .misc-sub { color: #6e6e73 !important; font-size: 12.5px !important; line-height: 1.45 !important; margin: 0 0 8px !important; }
body.apple-mode .tradein-modal .ti-field > span { color: #86868b !important; font-size: 10.5px !important; letter-spacing: .06em !important; }
body.apple-mode .tradein-modal .ti-field .form-input,
body.apple-mode .tradein-modal .split-input-wrap input {
  background: #f5f5f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #1d1d1f !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
body.apple-mode .tradein-modal .ti-field .form-input:focus,
body.apple-mode .tradein-modal .split-input-wrap input:focus {
  background: #ffffff !important;
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.18) !important;
  outline: none !important;
}
body.apple-mode .tradein-modal .split-input-wrap span { color: #86868b !important; }
body.apple-mode .tradein-modal .ti-field select.form-input {
  -webkit-appearance: none; appearance: none;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 12px !important;
}
body.apple-mode .tradein-modal .ti-mode-lbl { color: #86868b !important; font-size: 10.5px !important; letter-spacing: .06em !important; }
body.apple-mode .tradein-modal .ti-mode-opt {
  background: #f5f5f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.apple-mode .tradein-modal .ti-mode-opt input { accent-color: #0a84ff !important; }
body.apple-mode .tradein-modal .ti-mode-opt b { color: #1d1d1f !important; }
body.apple-mode .tradein-modal .ti-mode-opt small { color: #6e6e73 !important; }
body.apple-mode .tradein-modal .ti-mode-opt:has(input:checked) {
  background: #ffffff !important;
  border-color: #0a84ff !important;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.16) !important;
}
body.apple-mode .tradein-modal .ti-live { font-size: 12.5px !important; }
body.apple-mode .tradein-modal .ti-live.is-balanced, body.apple-mode .tradein-modal .ti-live.is-over { color: #248a3d !important; }
body.apple-mode .tradein-modal .misc-foot { margin-top: 16px !important; gap: 10px !important; }
body.apple-mode .tradein-modal .misc-btn {
  border-radius: 999px !important;
  padding: 11px 22px !important;
  font-weight: 700 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
body.apple-mode .tradein-modal .misc-btn-plain {
  background: #f5f5f7 !important; color: #1d1d1f !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: none !important;
}
body.apple-mode .tradein-modal .misc-btn-plain:hover { background: #ebebf0 !important; }
body.apple-mode .tradein-modal .misc-btn-go {
  background: radial-gradient(130% 120% at 22% 10%, #6db6ff 0%, #1a84f2 45%, #0a5fcf 100%) !important;
  color: #ffffff !important; border: 0 !important;
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
body.apple-mode .tradein-modal .misc-btn-go:hover { filter: brightness(1.05); }
body.apple-mode .tradein-modal .misc-btn-go:disabled { opacity: .4 !important; filter: none !important; }

/* ── Repair Sale + Quick Sale as the black "Get in Touch" pill (Luis, 2026-09-28)
   A near-black pill with a hairline ring, a white glow rising from its bottom
   edge, silver-gradient words and the icon moved to the RIGHT of the label
   (order: 2) the way the reference put its sparkles. Sits after both chrome
   blocks so it wins on the Light and the Ink bar alike; the Dashboard pill is
   left as it was. */
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) {
  gap: 10px !important;
  padding: 0 18px 0 20px !important;
  /* The bloom (Luis, 2026-09-28, second pass): a wide, soft white light
     centred just under the bottom edge that climbs about two-thirds of the
     way up the face, brightest at the middle and dark again at the corners. */
  background:
    radial-gradient(90% 88% at 50% 120%, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.38) 22%, rgba(255, 255, 255, 0.09) 42%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, #131316 0%, #050506 100%) !important;
  /* One even light ring, nothing else on the edge. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.30),
    0 6px 14px -6px rgba(255, 255, 255, 0.28),
    0 8px 18px -8px rgba(0, 0, 0, 0.55) !important;
  color: #f5f5f7 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
body.apple-mode .topbar-action[aria-label="Repair Sale"] .tm-caret { display: none !important; }
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]):hover,
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current {
  background:
    radial-gradient(90% 88% at 50% 120%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.48) 22%, rgba(255, 255, 255, 0.13) 42%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, #19191d 0%, #050506 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 6px 16px -6px rgba(255, 255, 255, 0.5),
    0 10px 20px -8px rgba(0, 0, 0, 0.6) !important;
}
/* The words: silver, lit from the top, as on the reference. */
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .topbar-action-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #e4e4e9 50%, #a6a6ae 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]):hover .topbar-action-label,
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label {
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f5 55%, #c4c4cc 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}
/* The icon goes after the words; the Repair Sale caret stays last. */
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .lq-ico {
  order: 2;
  color: #f2f2f5 !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) !important;
}
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]):hover .lq-ico,
body.apple-mode .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .lq-ico {
  color: #ffffff !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55)) !important;
}

/* ── The Dashboard link as a bare glyph (Luis, 2026-09-28) ─────────────────
   No pill and no words next to the two black sale pills: a larger tile icon
   that is the home mark. Its current-page cue stays — the plum tint and the
   breathing tiles above — and the hidden name shows as the house bubble. */
body.apple-mode .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"].is-current {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 8px !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"] .topbar-action-label { display: none !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"] .lq-ico {
  width: 34px !important; height: 34px !important;
  color: rgba(29, 29, 31, 0.58) !important;
  filter: none !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico {
  color: var(--ap-lift) !important;
  filter: none !important;
  transform: translateY(-1px) scale(1.06);
}
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"] .lq-ico { color: rgba(255, 255, 255, 0.78) !important; }
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"].is-current .lq-ico { color: #ffffff !important; }
/* The bubble is only needed where the words are hidden. */
body:not(.apple-mode) .topbar-action[aria-label="Dashboard"] .pos-pop { display: none; }
/* The hairline after the Dashboard glyph (Luis, 2026-09-28): the quick-link
   row's own separator, with room on both sides; hidden outside this theme
   because the diagonal divider stands there. */
body.apple-mode .topbar-sep-home { display: block; height: 24px; margin: 0 6px 0 4px !important; }
body:not(.apple-mode) .topbar-sep-home { display: none; }
/* The till pills' words on the Apple bar (Luis, 2026-09-28): ink on Light,
   white on Ink; the state keeps the badge colours from index.css. */
body.apple-mode .topbar-drawer-label b { color: var(--ap-ink); }
body.apple-mode .topbar-drawer-label i { color: rgba(29, 29, 31, 0.50); }
body.apple-mode.chrome-ink .topbar-drawer-label b { color: rgba(255, 255, 255, 0.92); }
body.apple-mode.chrome-ink .topbar-drawer-label i { color: rgba(255, 255, 255, 0.55); }

/* ── Graphite chrome for the light theme (Luis, 2026-09-29) ────────────────
   The space-grey MacBook: a gunmetal body with near-black keys. The bar and
   rail take the body — a cool graphite, lit a touch from the top — and the
   two black sale pills, the AI pill and the search read as the keys on it.
   Light theme only; the dark theme keeps its own near-black frame. */
body.apple-mode.chrome-ink:not(.apple-dark) .topbar {
  background: linear-gradient(180deg, #3a3d42 0%, #303338 55%, #2b2e33 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}
body.apple-mode.chrome-ink:not(.apple-dark) .sidenav {
  background: linear-gradient(90deg, #34373c 0%, #2e3136 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}
/* Keys on the body: the icon buttons and drawer pills sit a shade darker than the bar. */
body.apple-mode.chrome-ink:not(.apple-dark) :is(.topbar-icon-btn, .topbar-drawer, .topbar-search-wrap #topbarSearch) {
  background: rgba(20, 21, 24, 0.55) !important; border-color: rgba(255, 255, 255, 0.10) !important;
}
body.apple-mode.chrome-ink:not(.apple-dark) .topbar-icon-btn:hover { background: rgba(20, 21, 24, 0.85) !important; }
body.apple-mode.chrome-ink:not(.apple-dark) .topbar-sep { background: rgba(255, 255, 255, 0.16) !important; }
body.apple-mode.chrome-ink:not(.apple-dark) .nav-item.active { background: rgba(20, 21, 24, 0.7) !important; }

/* ── Every page's cards and table frames take the white card (Luis, 2026-09-29)
   The rule above only knew the dashboard's classes; each page has its own.
   Same face: white through the middle, #f7f7f8 at the edge, hairline, soft
   drop. Dialogs are left to their own sheets. */
body.apple-mode.cards-white :is(.po-card, .cr-tablewrap, .dr-card, .sr-card, .sr-stat-card, .nrg-card, .cust-stat-card, .cust-table-wrap,
  .cv-history-card, .cv-points-card, .cv-spend-card, .cvh-tablewrap, .glass-stats-card, .inv-table-card, .parts-table-card, .summary-card,
  .fits-card, .apm-box, .qt-card, .wl-card, .wl-table-wrap, .nt-card, .imei-card, .imei-balance-card, .ret-card, .sd-tablewrap, .order-card,
  .po-panel, .mini-table-panel, .parts-side-panel, .cl-panel, .ulk-panel, .amt-card, .totals-merged, .lay-card, .layaway-card) {
  background: radial-gradient(ellipse 95% 100% at 50% 50%, #ffffff 0%, #ffffff 65%, #f7f7f8 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* ── White light on the canvas (Luis, 2026-09-29) ───────────────────────────
   The #f5f5f7 ground gets three soft pools of white — a broad one from the
   top-left where the light comes from, a smaller one on the right, a low one
   across the bottom — so the page reads as lit paper rather than flat grey.
   No colour: white on the grey only. Light theme; the dark one has none. */
body.apple-mode.cards-white:not(.apple-dark)::before {
  content: '' !important;
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 12% 8%,   rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(48vw 55vh at 92% 40%,  rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(90vw 40vh at 50% 105%, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0) 70%) !important;
}

/* ── Chrome trial (Luis, 2026-09-29): first a deep green (#0f3d33, then #0b2f27), now #100E09, a warm near-black ───────────────────────────────
   The deep green Luis sent (#0f3d33) for the bar and rail, on body.chrome-green
   over the graphite. theme-switch.js adds the class while CHROME_GREEN_TRIAL is
   true there; set it false and the graphite chrome above is back exactly. */
body.apple-mode.chrome-ink.chrome-green:not(.apple-dark) .topbar {
  background: linear-gradient(180deg, #17150f 0%, #100e09 55%, #0c0a06 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.apple-mode.chrome-ink.chrome-green:not(.apple-dark) .sidenav {
  background: linear-gradient(90deg, #14120c 0%, #100e09 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.10) !important;
}
body.apple-mode.chrome-ink.chrome-green:not(.apple-dark) :is(.topbar-icon-btn, .topbar-drawer, .topbar-search-wrap #topbarSearch) {
  background: rgba(0, 0, 0, 0.45) !important; border-color: rgba(255, 255, 255, 0.10) !important;
}
body.apple-mode.chrome-ink.chrome-green:not(.apple-dark) .topbar-icon-btn:hover { background: rgba(0, 0, 0, 0.7) !important; }
body.apple-mode.chrome-ink.chrome-green:not(.apple-dark) .nav-item.active { background: rgba(0, 0, 0, 0.6) !important; }

/* ── Canvas trial: Business White #FDFFFF (Luis, 2026-09-29) ────────────────
   The light ground moves from Apple's #f5f5f7 to #fdffff. Cards keep their
   hairline and soft drop so they still sit on it. Delete this block to go
   back to #f5f5f7 (index.css's body rule too). */
body.apple-mode.cards-white:not(.apple-dark) { --ap-canvas: #fdffff; --ap-ground: #fdffff; background: #fdffff !important; }
html[data-boot-theme="apple"]:not([data-boot-dark]) { background: #fdffff; }
body.apple-mode.cards-white:not(.apple-dark) :is(.card, .card-compact, .card-wide, .table-wrap, .hero-card, .glass-card-cus, .checkout-panel,
  .po-card, .cr-tablewrap, .dr-card, .sr-card, .sr-stat-card, .nrg-card, .cust-stat-card, .cust-table-wrap, .cv-history-card, .cv-points-card,
  .cv-spend-card, .cvh-tablewrap, .glass-stats-card, .inv-table-card, .parts-table-card, .summary-card, .fits-card, .apm-box, .qt-card, .wl-card,
  .wl-table-wrap, .nt-card, .imei-card, .imei-balance-card, .ret-card, .sd-tablewrap, .order-card, .po-panel, .mini-table-panel, .parts-side-panel,
  .cl-panel, .ulk-panel, .amt-card, .totals-merged) {
  /* On a near-white ground the cards need a firmer edge and shadow to read as cards. */
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 20px rgba(0, 0, 0, 0.07) !important;
}
/* The totals card's inner columns are columns, not cards: no edge of their own
   (Luis, 2026-09-29 — the #FDFFFF pass had given them one). */
body.apple-mode .totals-merged .tm-col { border: 0 !important; box-shadow: none !important; background: transparent !important; }
/* A table frame inside a card is part of the card, not a card of its own
   (Sales History, 2026-09-29): no edge, no shadow, no face. */
body.apple-mode.cards-white:not(.apple-dark) .card .table-wrap,
body.apple-mode.cards-white:not(.apple-dark) .sh-card .table-wrap { border: 0 !important; box-shadow: none !important; background: none !important; }

/* ── The Dashboard button as a white key (Luis, 2026-09-29) ─────────────────
   From the reference: a raised white rounded square, soft shadow under it, a
   hairline of light along its top edge, and a glossy black glyph sitting on
   it with its own small shadow. Only this button; the sale pills beside it
   are untouched. The bubble below still names it. */
body.apple-mode .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"].is-current {
  width: 42px !important; height: 42px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 13px !important;
  background: linear-gradient(165deg, #ffffff 0%, #f4f4f6 55%, #ececef 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 1px 1.5px rgba(0, 0, 0, 0.20),
    0 6px 14px rgba(0, 0, 0, 0.26) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05),
    0 2px 2px rgba(0, 0, 0, 0.18),
    0 9px 18px rgba(0, 0, 0, 0.30) !important;
}
/* Pressed: the key goes down, and its shadow shortens with it. */
body.apple-mode .topbar-action[aria-label="Dashboard"]:active,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:active {
  transform: translateY(1px) scale(0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 1px 3px rgba(0, 0, 0, 0.06),
    0 1px 1px rgba(0, 0, 0, 0.16),
    0 3px 7px rgba(0, 0, 0, 0.22) !important;
}
/* The glyph: black gloss (the gradient in its own <defs>), a soft shadow
   under it as if it stood on the key. No hover recolour — the key itself is
   the response; the current-page cue is the breathing tiles above. */
body.apple-mode .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"].is-current .lq-ico {
  width: 24px !important; height: 24px !important;
  color: #16161a !important;
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.38)) !important;
  transform: none;
  overflow: visible;
}
body.apple-mode .topbar-action[aria-label="Dashboard"] .lq-ico rect { fill: url(#dashKeyGloss); }
/* Off the dashboard the key rests grey (Luis, 2026-09-29): a graphite-grey
   gradient, still raised; hovering warms it toward white, and on the dashboard
   itself (is-current) it is the white key above. */
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:not(.is-current) {
  background: linear-gradient(165deg, #d4d4d9 0%, #bfbfc6 55%, #adadb5 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 1.5px rgba(0, 0, 0, 0.22),
    0 6px 14px rgba(0, 0, 0, 0.26) !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current):hover,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:not(.is-current):hover {
  background: linear-gradient(165deg, #ececef 0%, #dcdce1 55%, #cdcdd3 100%) !important;
}
/* Round, and graphite when resting (Luis, 2026-09-29): the key is a full
   circle; off the dashboard it wears the #4c4e51 → #1e1f22 gradient from his
   swatch, so the glyph turns light there to stay readable. On the dashboard
   it is still the white key with the black glossy glyph. */
body.apple-mode .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"].is-current { border-radius: 50% !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:not(.is-current) {
  background: linear-gradient(180deg, #4c4e51 0%, #1e1f22 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 1px 1.5px rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.32) !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current):hover,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:not(.is-current):hover {
  background: linear-gradient(180deg, #5c5e62 0%, #2a2b2f 100%) !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico {
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.55)) !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico rect { fill: #ececf0; }
/* The glyph cut into the key instead of standing on it (Luis, 2026-09-29):
   the house engrave — a shade of the surface itself, a dark edge top-left and
   a light edge bottom-right. On the white key that is the rail's own recipe;
   on the graphite key the fill is darker than the metal and the lit edge is a
   faint white. The gloss gradient goes; an engraving has no shine. */
body.apple-mode .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"].is-current .lq-ico {
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.30)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.95)) !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"] .lq-ico rect { fill: rgba(29, 29, 31, 0.46); }
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode.chrome-ink .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico {
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.70)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.22)) !important;
}
body.apple-mode .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico rect { fill: #17181b; }

/* ── The three quick links as one tray (Luis, 2026-09-29) ────────────────────
   From the reference: a dark capsule holding the segments; the leftmost — the
   Dashboard, icon only — is the lit rounded pill inside it. The two sale
   links ride in the tray as plain segments, their silver words as before, no
   ring of their own; hover and the current page lift a segment a little. The
   hairline and diagonals between them go, the tray does the separating. */
body.apple-mode .topbar-center {
  display: inline-flex !important; align-items: center !important;
  gap: 2px !important; padding: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2c2c30 0%, #17171a 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px -8px rgba(0, 0, 0, 0.7) !important;
}
body.apple-mode .topbar-center > .topbar-diag,
body.apple-mode .topbar-center .topbar-sep-home { display: none !important; }

/* The lit segment: the Dashboard, a rounded pill on the graphite swatch. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current {
  width: 60px !important; height: 42px !important; padding: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #4c4e51 0%, #2a2b2e 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.35) !important;
  transform: none;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current {
  background: linear-gradient(180deg, #5a5c60 0%, #34353a 100%) !important;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:active,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:active { transform: translateY(1px) scale(0.97) !important; }
/* Its glyph: light, like the reference's icons, engraved into the pill. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico {
  width: 22px !important; height: 22px !important;
  filter: drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.55)) drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.16)) !important;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico rect,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico rect { fill: #d9d9de; }

/* The two sale links as segments of the tray: no pill of their own. */
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) {
  height: 42px !important; padding: 0 18px !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]):hover {
  background: rgba(255, 255, 255, 0.07) !important;
  transform: none;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .lq-ico {
  color: #d9d9de !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) !important;
}
/* Room between the segments, and a thin lit hairline after the Dashboard
   pill (Luis, 2026-09-29) — the tray's own divider, glowing faintly. */
body.apple-mode .topbar-center { gap: 8px !important; }
body.apple-mode .topbar-center .topbar-sep-home {
  display: block !important;
  width: 1px !important; height: 22px !important;
  margin: 0 2px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 1px rgba(255, 255, 255, 0.9) !important;
  border: 0 !important;
  opacity: 1 !important;
}
/* The tray cut out of the bar (Luis, 2026-09-30): a thin arch at each end,
   in the page's own ground colour, hugging the capsule's rounded ends — as if
   the tray were punched through the bar and the page showed in the gap. Two
   rings, each clipped to its outer half so nothing crosses the tray. */
body.apple-mode .topbar-center { position: relative; }
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after {
  content: "" !important; display: block !important;
  position: absolute; top: -3px; bottom: -3px;
  width: 56px;                       /* tray height 50 + 3px each side */
  border-radius: 50%;
  border: 3px solid var(--ap-canvas, #fdffff);
  box-sizing: border-box;
  background: transparent !important;
  pointer-events: none;
  z-index: 1;
}
body.apple-mode .topbar-center::before { left: -3px; clip-path: inset(0 50% 0 0); }
body.apple-mode .topbar-center::after  { right: -3px; clip-path: inset(0 0 0 50%); }
body.apple-mode.apple-dark .topbar-center::before,
body.apple-mode.apple-dark .topbar-center::after { border-color: #080808; }
/* Softer, and fading out toward its two tips (Luis, 2026-09-30): the arch is
   a translucent white now, fullest at the tray's outermost point and gone by
   the top and bottom of the curve. */
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after {
  border-color: rgba(253, 255, 255, 0.62);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 38%, #000 62%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 38%, #000 62%, rgba(0, 0, 0, 0) 100%);
}
body.apple-mode.apple-dark .topbar-center::before,
body.apple-mode.apple-dark .topbar-center::after { border-color: rgba(8, 8, 8, 0.85); }
/* Wider arches (Luis, 2026-09-30): 5px instead of 3, the ring grown to match. */
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after { top: -5px; bottom: -5px; width: 60px; border-width: 5px; }
body.apple-mode .topbar-center::before { left: -5px; }
body.apple-mode .topbar-center::after  { right: -5px; }
/* More room at the tray's ends (Luis, 2026-09-30): the capsule grows 8px
   each side so the Dashboard pill and Quick Sale sit clear of its edge. */
body.apple-mode .topbar-center { padding: 4px 12px !important; }
/* A touch more (Luis, 2026-09-30): 16px at each end. */
body.apple-mode .topbar-center { padding: 4px 16px !important; }
/* Wider still (Luis, 2026-09-30): 8px arches. */
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after { top: -8px; bottom: -8px; width: 66px; border-width: 8px; }
body.apple-mode .topbar-center::before { left: -8px; }
body.apple-mode .topbar-center::after  { right: -8px; }
/* The lit pill follows the current page (Luis, 2026-09-30): only the segment
   for the page in view wears it. Off the dashboard, the Dashboard glyph rides
   plain in the tray like the other two; on a checkout, that segment gets the
   same graphite pill the Dashboard had. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) {
  background: transparent !important;
  box-shadow: none !important;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current):hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current):hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current,
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current:hover {
  background: linear-gradient(180deg, #5a5c60 0%, #34353a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 3px 8px rgba(0, 0, 0, 0.35) !important;
}
/* The current page as a light over its segment (Luis, 2026-09-30), from his
   reference: no pill any more — a short white bar sits on the tray's top edge
   above the segment and a soft cone of light falls from it over the button.
   The bar is ::before, the cone ::after; the theme's blanket rule that hides
   the link's pseudo-elements is lifted for the current one only. */
body.apple-mode .topbar-center .topbar-action.is-current,
body.apple-mode .topbar-center .topbar-action.is-current:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action.is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action.is-current:hover {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.apple-mode .topbar-center .topbar-action.is-current::before,
body.apple-mode .topbar-center .topbar-action.is-current::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  pointer-events: none;
}
/* The bar: on the tray's top edge (the tray pads 4px above the button). */
body.apple-mode .topbar-center .topbar-action.is-current::before {
  top: -5px; left: 22%; right: 22%; height: 3px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.55), 0 0 26px rgba(255, 255, 255, 0.25);
  z-index: 2;
}
/* The cone: a trapezoid of light, bright under the bar, gone by the bottom. */
body.apple-mode .topbar-center .topbar-action.is-current::after {
  top: -4px; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.10) 45%, rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%);
  border-radius: 999px;
  z-index: 1;
}
/* Fixes on the light (2026-09-30): the Dashboard's own current-page rules
   outrank the tray ones, so its pill is put out by name here; and the cone
   loses its hard trapezoid for a soft pool of light spreading from the bar. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover {
  background: transparent !important;
  box-shadow: none !important;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover { background: rgba(255, 255, 255, 0.05) !important; }
body.apple-mode .topbar-center .topbar-action.is-current::after {
  top: -4px; left: -6px; right: -6px; bottom: -2px;
  background: radial-gradient(ellipse 58% 115% at 50% 0%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.13) 40%, rgba(255, 255, 255, 0.04) 68%, rgba(255, 255, 255, 0) 100%);
  clip-path: none;
  border-radius: 0;
}
/* A thinner bar (Luis, 2026-09-30): 2px, sitting on the same edge. */
body.apple-mode .topbar-center .topbar-action.is-current::before { height: 2px; top: -4.5px; }
/* Larger icons in the tray (Luis, 2026-09-30): all three at 30px, the most
   the 42px buttons take without the glyphs touching their edges. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .lq-ico {
  width: 30px !important; height: 30px !important;
}
/* Two meshing gears on Repair Sale (Luis, 2026-09-30): the big one top-left
   turns clockwise, the small one bottom-right the other way, 8 teeth against
   6 so they keep pace. They run while the pointer is on the link and on the
   repair pages themselves; still otherwise. */
body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-gear   { transform-origin: 9px 9px; transform-box: view-box; }
body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-gear-2 { transform-origin: 17.6px 17.6px; transform-box: view-box; }
body.apple-mode .topbar-action[aria-label="Repair Sale"]:hover .lq-gear,
body.apple-mode .topbar-action[aria-label="Repair Sale"].is-current .lq-gear   { animation: lq-gear-turn 6s linear infinite; }
body.apple-mode .topbar-action[aria-label="Repair Sale"]:hover .lq-gear-2,
body.apple-mode .topbar-action[aria-label="Repair Sale"].is-current .lq-gear-2 { animation: lq-gear-back 4.5s linear infinite; }
@keyframes lq-gear-back { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Repair Sale"] :is(.lq-gear, .lq-gear-2) { animation: none !important; } }
/* Gear and wrench (Luis, 2026-09-30): the gear turns around the wrench's
   head; the wrench holds still. Same triggers as before. */
body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-gear { transform-origin: 12px 9.5px; transform-box: view-box; }
/* Phone with a life line (Luis, 2026-09-30): the red trace draws itself
   across the phone over and over, a heartbeat that never stops. */
body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-ecg {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 200;
  animation: lq-ecg-run 2.4s linear infinite;
  filter: drop-shadow(0 0 2px rgba(229, 72, 77, 0.55));
}
@keyframes lq-ecg-run { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-ecg { animation: none; stroke-dasharray: none; } }
/* ── Diagonal dividers in the tray (Luis, 2026-09-30) ────────────────────────
   From his second reference: slanted hairlines between the three buttons,
   and at each end of the tray a set of three parallel slanted lines in place
   of the arches — a cut-metal edge. All soft white, glowing faintly. */
/* Between the buttons: the Dashboard's hairline, and the third diagonal span
   (the one between the two sale menus), both slanted the same way. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3) {
  display: block !important;
  width: 1px !important; height: 26px !important;
  margin: 0 4px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 1px rgba(255, 255, 255, 0.9) !important;
  border: 0 !important; opacity: 1 !important;
  transform: skewX(-22deg) !important;
  position: static !important;
}
/* The tray's ends: three slanted lines inside each rounded end, fading in
   toward the buttons. The pseudo keeps the capsule's own corner radius, so
   the lines end where the tray does. */
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after {
  top: 0 !important; bottom: 0 !important;
  width: 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: repeating-linear-gradient(112deg,
    rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 6px,
    rgba(255, 255, 255, 0.55) 6px, rgba(255, 255, 255, 0.55) 7.5px,
    rgba(255, 255, 255, 0) 7.5px, rgba(255, 255, 255, 0) 13px) !important;
  z-index: 1;
}
body.apple-mode .topbar-center::before {
  left: 0 !important;
  border-radius: 25px 0 0 25px !important;
  -webkit-mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, #000 45%, rgba(0, 0, 0, 0) 100%);
}
body.apple-mode .topbar-center::after {
  right: 0 !important;
  border-radius: 0 25px 25px 0 !important;
  -webkit-mask-image: linear-gradient(270deg, #000 45%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(270deg, #000 45%, rgba(0, 0, 0, 0) 100%);
}
body.apple-mode.apple-dark .topbar-center::before,
body.apple-mode.apple-dark .topbar-center::after { border-color: transparent; }
/* Fit to the tray's real height (63px, so a 31.5px corner) and drop the old
   built-in slant on the middle divider, which doubled the line. */
body.apple-mode .topbar-center::before { border-radius: 32px 0 0 32px !important; width: 36px !important; }
body.apple-mode .topbar-center::after  { border-radius: 0 32px 32px 0 !important; width: 36px !important; }
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3)::after,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3)::before { display: none !important; }
/* No tray behind them (Luis, 2026-09-30): the capsule goes — no fill, no
   ring, no shadow, no rounding — leaving the three buttons, the slanted
   hairlines between them, the three stripes at each end and the light bar
   straight on the bar. */
body.apple-mode .topbar-center {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.apple-mode .topbar-center::before { border-radius: 0 !important; }
body.apple-mode .topbar-center::after  { border-radius: 0 !important; }
/* Four lines only (Luis, 2026-09-30): one before the Dashboard, one after
   it, one after Repair Sale, one after Quick Sale — all the same slanted
   glowing hairline. The end stripes become single lines standing in the row
   as the first and last items. */
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after {
  position: static !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  width: 1px !important; height: 26px !important;
  margin: 0 4px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 1px rgba(255, 255, 255, 0.9) !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  transform: skewX(-22deg) !important;
  flex: 0 0 auto;
}
body.apple-mode .topbar-center { padding: 4px 8px !important; }
/* Three lines (Luis, 2026-09-30): none before the Dashboard; the one after
   it, the one after Repair Sale and the one after Quick Sale drawn by one
   rule so they are the same line. */
body.apple-mode .topbar-center::before { display: none !important; content: none !important; }
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode .topbar-center::after {
  display: block !important; position: static !important;
  width: 1px !important; height: 24px !important;
  margin: 0 4px !important; padding: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55), 0 0 1px rgba(255, 255, 255, 0.9) !important;
  border: 0 !important; opacity: 1 !important;
  transform: skewX(-22deg) !important;
  flex: 0 0 auto !important;
}
/* The light pool stays inside its own segment, so it no longer brightens
   the divider beside it (Luis, 2026-09-30). */
body.apple-mode .topbar-center .topbar-action.is-current::after { left: 4px; right: 4px; }
/* All three as the first one reads (Luis, 2026-09-30): a faint solid line
   with the glow doing the work — no bright gradient. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode .topbar-center::after {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
}
/* Dividers the full height of the bar (Luis, 2026-09-30). Slanted, the
   line's ends swing 13px either way, so it gets that much room on each side. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode .topbar-center::after {
  height: 64px !important;
  align-self: stretch !important;
  margin: 0 12px !important;
}
/* Cuts, not lines (Luis, 2026-09-30): each divider is a 6px slanted gap in
   the page's own ground colour, top to bottom, as if the bar were sliced
   through and the page showed in the slot. No glow — a cut has none. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode .topbar-center::after {
  width: 6px !important;
  background-color: var(--ap-canvas, #fdffff) !important;
  box-shadow: none !important;
}
body.apple-mode.apple-dark .topbar-center .topbar-sep-home,
body.apple-mode.apple-dark .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode.apple-dark .topbar-center::after { background-color: #080808 !important; }
/* The chrome-ink separator rule outranked the cut on the first divider
   (2026-09-30): same colour by a heavier selector. */
body.apple-mode.chrome-ink .topbar-center .topbar-sep-home,
body.apple-mode.chrome-ink:not(.apple-dark) .topbar-center .topbar-sep-home { background: var(--ap-canvas, #fdffff) !important; }
body.apple-mode.chrome-ink.apple-dark .topbar-center .topbar-sep-home { background: #080808 !important; }
/* Faded ends on the cuts (Luis, 2026-09-30): each slot is fullest across
   the middle of the bar and thins away toward the top and bottom edges. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode.chrome-ink .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode .topbar-center::after {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%) !important;
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%) !important;
}

/* ── Chevron treads at both ends of the quick-link rail (Luis, 2026-09-30) ──
   From his reference: a tyre-tread of chevrons pointing inward, bright at
   the bar's flanks and fading out as it reaches the buttons. Two panels on
   the wrapper around the rail, one each side, drawn behind the buttons. The
   chevron is two stripe sets — the top half slanted one way, the bottom half
   the other — so each pair of stripes meets in a point. */
body.apple-mode .topbar-notch { position: relative; }
body.apple-mode .topbar-notch::before,
body.apple-mode .topbar-notch::after {
  content: ""; display: block;
  position: absolute; top: 0; bottom: 0;
  width: 190px;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 50%, 100% 50%;
  background-position: top left, bottom left;
  opacity: .9;
}
/* Pointing right (toward the buttons) on the left flank… */
body.apple-mode .topbar-notch::before {
  right: 100%;
  background-image:
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0 8px, rgba(255, 255, 255, .55) 8px 13px, rgba(255, 255, 255, 0) 13px 22px),
    repeating-linear-gradient(60deg,  rgba(255, 255, 255, 0) 0 8px, rgba(255, 255, 255, .55) 8px 13px, rgba(255, 255, 255, 0) 13px 22px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
}
/* …and pointing left on the right flank. */
body.apple-mode .topbar-notch::after {
  left: 100%;
  background-image:
    repeating-linear-gradient(60deg,  rgba(255, 255, 255, 0) 0 8px, rgba(255, 255, 255, .55) 8px 13px, rgba(255, 255, 255, 0) 13px 22px),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0) 0 8px, rgba(255, 255, 255, .55) 8px 13px, rgba(255, 255, 255, 0) 13px 22px);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
}
/* The rail itself stays above the treads. */
body.apple-mode .topbar-notch .topbar-center { z-index: 1; }
/* (2026-09-30: a safety rule hiding the treads stood here for a few minutes;
   the crash it guarded against turned out to be a flaky headless run — four
   clean renders at 2x since.) */
/* No dividers (Luis, 2026-09-30): the three cuts go; the treads and the
   light bar carry the rail on their own. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode.chrome-ink .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3),
body.apple-mode .topbar-center::after { display: none !important; }
/* The treads' outer ends blend in instead of stopping mid-chevron: the mask
   now fades in from the outer edge as well as out toward the buttons. */
body.apple-mode .topbar-notch::before {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 22%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 22%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
}
body.apple-mode .topbar-notch::after {
  -webkit-mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 22%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #000 22%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
}
/* The life line holds still until the link is hovered or is the current
   page (Luis, 2026-09-30); at rest it is the full trace, drawn once. */
body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-ecg { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
body.apple-mode .topbar-action[aria-label="Repair Sale"]:hover .lq-ecg,
body.apple-mode .topbar-action[aria-label="Repair Sale"].is-current .lq-ecg {
  stroke-dasharray: 100 100;
  stroke-dashoffset: 200;
  animation: lq-ecg-run 2.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Repair Sale"] .lq-ecg { animation: none !important; stroke-dasharray: none !important; } }
/* Slanted bars instead of chevrons (Luis, 2026-09-30): thick parallel
   stripes leaning right on both flanks, the same fades as before. */
body.apple-mode .topbar-notch::before,
body.apple-mode .topbar-notch::after {
  background-image: repeating-linear-gradient(112deg,
    rgba(255, 255, 255, 0) 0 9px,
    rgba(255, 255, 255, .55) 9px 20px,
    rgba(255, 255, 255, 0) 20px 29px);
  background-size: auto;
  background-position: 0 0;
  background-repeat: repeat;
}
/* The right flank leans the other way (Luis, 2026-09-30), mirroring the left. */
body.apple-mode .topbar-notch::after {
  background-image: repeating-linear-gradient(68deg,
    rgba(255, 255, 255, 0) 0 9px,
    rgba(255, 255, 255, .55) 9px 20px,
    rgba(255, 255, 255, 0) 20px 29px);
}
/* Honeycomb instead of bars (Luis, 2026-09-30): a tile of flat-top hexagon
   outlines (r=16, two staggered rows), the same fades at both ends. */
body.apple-mode .topbar-notch::before,
body.apple-mode .topbar-notch::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='27.7128' viewBox='0 0 48 27.7128'%3E%3Cg fill='none' stroke='white' stroke-width='1.6'%3E%3Cpolygon points='0,13.8564 8,-6.46055e-06 24,-6.46055e-06 32,13.8564 24,27.7128 8,27.7128'/%3E%3Cpolygon points='24,0 32,-13.8564 48,-13.8564 56,0 48,13.8564 32,13.8564'/%3E%3Cpolygon points='24,27.7128 32,13.8564 48,13.8564 56,27.7128 48,41.5692 32,41.5692'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 27.7128px;
  background-position: 0 4px;
  background-repeat: repeat;
  opacity: .6;
}
/* Back to the two arches (Luis, 2026-09-30): the flank pattern goes, and
   the faded translucent arches return at both ends of the rail, sized to
   the rail's real 63px height. The rail itself stays open (no capsule). */
body.apple-mode .topbar-notch::before, body.apple-mode .topbar-notch::after { display: none !important; }
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after {
  content: "" !important; display: block !important;
  position: absolute !important; top: -8px !important; bottom: -8px !important;
  width: 79px !important; height: auto !important; margin: 0 !important;
  border: 8px solid rgba(253, 255, 255, 0.62) !important;
  border-radius: 50% !important;
  box-sizing: border-box; background: transparent !important; box-shadow: none !important;
  transform: none !important; pointer-events: none; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 38%, #000 62%, rgba(0, 0, 0, 0) 100%) !important;
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 38%, #000 62%, rgba(0, 0, 0, 0) 100%) !important;
}
body.apple-mode .topbar-center::before { left: -8px !important; right: auto !important; clip-path: inset(0 50% 0 0) !important; }
body.apple-mode .topbar-center::after  { right: -8px !important; left: auto !important; clip-path: inset(0 0 0 50%) !important; }
body.apple-mode.apple-dark .topbar-center::before,
body.apple-mode.apple-dark .topbar-center::after { border-color: rgba(8, 8, 8, 0.85) !important; }
/* Engraved arches (Luis, 2026-09-30): the band is a groove now — dark in
   its channel, a thin lit rim on its outer edge where the light catches —
   drawn as a radial ring instead of a border. */
body.apple-mode .topbar-center::before,
body.apple-mode .topbar-center::after,
body.apple-mode.apple-dark .topbar-center::before,
body.apple-mode.apple-dark .topbar-center::after {
  border: 0 !important;
  background: radial-gradient(circle 39.5px at 50% 50%,
    rgba(0, 0, 0, 0) 0 31px,
    rgba(0, 0, 0, 0.85) 31.5px,
    rgba(0, 0, 0, 0.55) 34.5px,
    rgba(0, 0, 0, 0.25) 37px,
    rgba(255, 255, 255, 0.42) 38px,
    rgba(255, 255, 255, 0.42) 39px,
    rgba(0, 0, 0, 0) 39.5px) !important;
}
/* Thin light-grey dividers between the three buttons (Luis, 2026-09-30):
   the hairline after the Dashboard and the one between the two sale links,
   upright, 1px, quiet grey, no glow. */
body.apple-mode .topbar-center .topbar-sep-home,
body.apple-mode.chrome-ink .topbar-center .topbar-sep-home,
body.apple-mode.chrome-ink:not(.apple-dark) .topbar-center .topbar-sep-home,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3) {
  display: block !important; position: static !important;
  width: 1px !important; height: 24px !important;
  margin: 0 6px !important; padding: 0 !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important; border: 0 !important; opacity: 1 !important;
  transform: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  flex: 0 0 auto !important; align-self: center !important;
}
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3)::before,
body.apple-mode .topbar-center > span.topbar-diag:nth-of-type(3)::after { display: none !important; }
/* The light comes from below now (Luis, 2026-09-30): the bar sits at the
   bottom edge under the current segment and the pool rises from it. */
body.apple-mode .topbar-center .topbar-action.is-current::before { top: auto; bottom: -4.5px; }
body.apple-mode .topbar-center .topbar-action.is-current::after {
  top: -2px; bottom: -4px;
  background: radial-gradient(ellipse 58% 115% at 50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.13) 40%, rgba(255, 255, 255, 0.04) 68%, rgba(255, 255, 255, 0) 100%);
}
/* A little less glow off the bar (Luis, 2026-09-30). */
body.apple-mode .topbar-center .topbar-action.is-current::after {
  background: radial-gradient(ellipse 52% 95% at 50% 100%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0.02) 68%, rgba(255, 255, 255, 0) 100%);
}
/* Quick Sale as a receipt (Luis, 2026-09-30): a slip with a torn edge, a
   dollar sign and the printed lines. On hover and on the checkout page it
   prints: the lines run out one after another and the box stamps on, while
   the dollar gives a small pulse; still otherwise. */
body.apple-mode .topbar-action[aria-label="Quick Sale"] .rc-line { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
body.apple-mode .topbar-action[aria-label="Quick Sale"] .rc-dollar { transform-box: fill-box; transform-origin: center; }
body.apple-mode .topbar-action[aria-label="Quick Sale"]:hover .rc-line,
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .rc-line { animation: rc-print 2.6s ease-out infinite; }
body.apple-mode .topbar-action[aria-label="Quick Sale"]:hover .rc-line:nth-of-type(2),
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .rc-line:nth-of-type(2) { animation-delay: .25s; }
body.apple-mode .topbar-action[aria-label="Quick Sale"]:hover .rc-box,
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .rc-box { animation: rc-stamp 2.6s ease-out infinite; animation-delay: .5s; transform-box: fill-box; transform-origin: center; }
body.apple-mode .topbar-action[aria-label="Quick Sale"]:hover .rc-dollar,
body.apple-mode .topbar-action[aria-label="Quick Sale"].is-current .rc-dollar { animation: rc-pulse 2.6s ease-in-out infinite; }
@keyframes rc-print { 0% { stroke-dashoffset: 1; } 28% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes rc-stamp { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.12); } 26% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rc-pulse { 0%, 100% { transform: scale(1); } 10% { transform: scale(1.18); } 20% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Quick Sale"] :is(.rc-line, .rc-box, .rc-dollar) { animation: none !important; } }
/* The light in the logo's red (Luis, 2026-09-30): the bar runs the same
   ramp as "Planet" — #c4141c → #e3333b → #ff6464 — and its glow and the
   pool rising from it go red with it. */
body.apple-mode .topbar-center .topbar-action.is-current::before {
  background: linear-gradient(90deg, #c4141c 0%, #e3333b 55%, #ff6464 100%);
  box-shadow: 0 0 6px rgba(227, 51, 59, 0.95), 0 0 14px rgba(227, 51, 59, 0.55), 0 0 26px rgba(255, 100, 100, 0.28);
}
body.apple-mode .topbar-center .topbar-action.is-current::after {
  background: radial-gradient(ellipse 52% 95% at 50% 100%, rgba(227, 51, 59, 0.26) 0%, rgba(227, 51, 59, 0.10) 40%, rgba(255, 100, 100, 0.03) 68%, rgba(255, 100, 100, 0) 100%);
}
/* The receipt's dollar in the life line's red (Luis, 2026-09-30). */
body.apple-mode .topbar-action[aria-label="Quick Sale"] .rc-dollar { stroke: #e5484d; filter: drop-shadow(0 0 2px rgba(229, 72, 77, 0.55)); }
/* Quick Quote as a price tag (Luis, 2026-10-09), its dollar in the same red.
   On hover and while quoting the tag swings from its hole and the dollar
   pulses with the receipt's beat; still otherwise. */
body.apple-mode .topbar-action[aria-label="Quick Quote"] .qq-dollar { stroke: #e5484d; filter: drop-shadow(0 0 2px rgba(229, 72, 77, 0.55)); }
body.apple-mode .topbar-action[aria-label="Quick Quote"] .qq-tag { transform-origin: 16.3px 7.7px; transform-box: view-box; }
body.apple-mode .topbar-action[aria-label="Quick Quote"]:hover .qq-tag,
body.apple-mode .topbar-action[aria-label="Quick Quote"].is-current .qq-tag { animation: qq-swing 2.6s ease-in-out infinite; }
@keyframes qq-swing { 0%, 60%, 100% { transform: rotate(0); } 12% { transform: rotate(-12deg); } 26% { transform: rotate(7deg); } 40% { transform: rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Quick Quote"] .qq-tag { animation: none !important; } }
/* Dashboard as a rising chart (Luis, 2026-09-30): four silver bars, a red
   trend line with its points, a baseline. On hover and on the dashboard
   itself the bars grow up from the base one after another, the line draws
   across and the points pop on; still otherwise. The old tile rules keyed
   on rects are put out here. */
body.apple-mode .topbar-action[aria-label="Dashboard"] .lq-ico rect { fill: currentColor !important; animation: none !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"] .db-bars rect { transform-box: fill-box; transform-origin: 50% 100%; }
body.apple-mode .topbar-action[aria-label="Dashboard"] .db-line { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
body.apple-mode .topbar-action[aria-label="Dashboard"] .db-dots circle { transform-box: fill-box; transform-origin: center; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-bars rect,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-bars rect { animation: db-grow 3s ease-out infinite !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-bars rect:nth-child(2),
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-bars rect:nth-child(2) { animation-delay: .12s !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-bars rect:nth-child(3),
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-bars rect:nth-child(3) { animation-delay: .24s !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-bars rect:nth-child(4),
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-bars rect:nth-child(4) { animation-delay: .36s !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-line,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-line { animation: db-draw 3s ease-out infinite; animation-delay: .3s; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-dots circle,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-dots circle { animation: db-pop 3s ease-out infinite; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-dots circle:nth-child(2),
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-dots circle:nth-child(2) { animation-delay: .18s; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-dots circle:nth-child(3),
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-dots circle:nth-child(3) { animation-delay: .36s; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-dots circle:nth-child(4),
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-dots circle:nth-child(4) { animation-delay: .54s; }
@keyframes db-grow { 0% { transform: scaleY(.15); } 22% { transform: scaleY(1.06); } 30% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
@keyframes db-draw { 0% { stroke-dashoffset: 1; } 30% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes db-pop { 0% { transform: scale(0); } 12% { transform: scale(0); } 22% { transform: scale(1.4); } 30% { transform: scale(1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Dashboard"] :is(.db-bars rect, .db-line, .db-dots circle) { animation: none !important; } }
/* The chart in the same silver as its neighbours (2026-09-30): the white-key
   era had left this icon's colour near-black, which turned the bars dark. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current .lq-ico,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico {
  color: #d9d9de !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)) !important;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico rect,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico rect { fill: #d9d9de !important; }
/* The pool off the bar back to the icons' silver (Luis, 2026-09-30); the
   bar itself keeps the logo red. */
body.apple-mode .topbar-center .topbar-action.is-current::after {
  background: radial-gradient(ellipse 52% 95% at 50% 100%, rgba(217, 217, 222, 0.20) 0%, rgba(217, 217, 222, 0.08) 40%, rgba(217, 217, 222, 0.02) 68%, rgba(217, 217, 222, 0) 100%);
}
/* The bar in a soft grey (Luis, 2026-09-30): a quiet silver, with a faint
   pale glow instead of the red one. */
body.apple-mode .topbar-center .topbar-action.is-current::before {
  background: linear-gradient(90deg, #9a9aa0 0%, #c9c9cf 50%, #9a9aa0 100%);
  box-shadow: 0 0 5px rgba(217, 217, 222, 0.55), 0 0 12px rgba(217, 217, 222, 0.25);
}
/* Faded ends on the bar (Luis, 2026-09-30): brightest in the middle, gone
   at both tips, and its glow fades with it. */
body.apple-mode .topbar-center .topbar-action.is-current::before {
  left: 14%; right: 14%;
  background: linear-gradient(90deg, rgba(201, 201, 207, 0) 0%, #c9c9cf 50%, rgba(201, 201, 207, 0) 100%);
  box-shadow: none;
  -webkit-mask-image: none; mask-image: none;
}
/* The glow, as a soft copy of the bar underneath it. */
body.apple-mode .topbar-center .topbar-action.is-current::after {
  background:
    radial-gradient(ellipse 34% 4px at 50% 100%, rgba(217, 217, 222, 0.55) 0%, rgba(217, 217, 222, 0) 100%),
    radial-gradient(ellipse 52% 95% at 50% 100%, rgba(217, 217, 222, 0.20) 0%, rgba(217, 217, 222, 0.08) 40%, rgba(217, 217, 222, 0.02) 68%, rgba(217, 217, 222, 0) 100%);
}
/* The two labels with the house popup (Luis, 2026-09-30): the headline
   figures' lift, tuned for the ink bar the way the brand name is — the
   silver ramp clipped to the letters, a faint light edge above-left and a
   dark shadow cast down and right. Bolder, a half-step larger. */
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .topbar-action-label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  background-image: linear-gradient(175deg, #ffffff 0%, #ececf0 45%, #b9b9c1 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(1.5px 2px 2px rgba(0, 0, 0, 0.7)) !important;
}
/* Arches off, to see it bare (Luis, 2026-09-30). */
body.apple-mode .topbar-center::before, body.apple-mode .topbar-center::after { display: none !important; }
/* A pill on the current button (Luis, 2026-09-30) — behind the WORDS only:
   the label gets the graphite pill, the icon stays free beside it. The
   Dashboard has no words, so its pill wraps the icon. The light bar stays.
   The label paints its own background as the text (clip: text), so the
   pill is a pseudo behind it; the label's filter makes it a stacking
   context, which keeps the pseudo under the letters. */
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label {
  position: relative; z-index: 0;
  padding: 7px 13px !important;
  margin: 0 -2px 0 -4px;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, #4c4e51 0%, #2a2b2e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35);
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover {
  background: linear-gradient(180deg, #4c4e51 0%, #2a2b2e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35) !important;
  border-radius: 999px !important;
}
/* The lettering moves to an inner span (2026-09-30): the outer label is a
   plain box that can carry the pill as its own background; the inner span
   carries the silver ramp, the clip and the lift. */
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .topbar-action-label {
  background: none !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: inherit !important; -webkit-text-fill-color: initial !important;
  filter: none !important;
  display: inline-flex; align-items: center;
  border-radius: 999px;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]) .topbar-action-label .tal-text {
  font: inherit;
  background-image: linear-gradient(175deg, #ffffff 0%, #ececf0 45%, #b9b9c1 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.22)) drop-shadow(1.5px 2px 2px rgba(0, 0, 0, 0.7));
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label::before { display: none; }
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label {
  background: linear-gradient(180deg, #4c4e51 0%, #2a2b2e 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.35);
}
/* The light follows the pill (Luis, 2026-09-30): on the two sale buttons
   the bar and its pool hang off the label — the pill's own box — so they
   stop where the words stop and leave the icon alone. The Dashboard keeps
   them on the button, which is its pill. The label sits 5.5px above the
   button's foot, so the offsets grow by that much. */
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current::before,
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current::after { display: none !important; }
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label::after {
  content: ""; display: block; position: absolute; pointer-events: none;
  left: 14%; right: 14%; bottom: -10px; height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(201, 201, 207, 0) 0%, #c9c9cf 50%, rgba(201, 201, 207, 0) 100%);
  z-index: 2;
}
body.apple-mode .topbar-center .topbar-action:is([aria-label="Repair Sale"], [aria-label="Quick Sale"], [aria-label="Quick Quote"]).is-current .topbar-action-label::before {
  content: ""; display: block !important; position: absolute; pointer-events: none;
  left: -4px; right: -4px; top: -3px; bottom: -10px; z-index: -1;
  border-radius: 0;
  background:
    radial-gradient(ellipse 34% 4px at 50% 100%, rgba(217, 217, 222, 0.55) 0%, rgba(217, 217, 222, 0) 100%),
    radial-gradient(ellipse 52% 95% at 50% 100%, rgba(217, 217, 222, 0.20) 0%, rgba(217, 217, 222, 0.08) 40%, rgba(217, 217, 222, 0.02) 68%, rgba(217, 217, 222, 0) 100%);
  box-shadow: none;
}
/* Dashboard as a live trend (Luis, 2026-09-30), from his reference: a grey
   line behind and a front line running silver → white → copper-red. At rest
   both sit drawn; on hover and on the dashboard they redraw from the left,
   the grey one a beat behind, over and over, with a soft glow on the front. */
body.apple-mode .topbar-action[aria-label="Dashboard"] :is(.db-back, .db-front) { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
body.apple-mode .topbar-action[aria-label="Dashboard"] .db-front { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.35)); }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-front,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-front { animation: db-trace 3.2s ease-in-out infinite; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-back,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-back { animation: db-trace 3.2s ease-in-out infinite; animation-delay: .35s; }
@keyframes db-trace { 0% { stroke-dashoffset: 1; } 45% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: .25; } }
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Dashboard"] :is(.db-back, .db-front) { animation: none !important; } }
/* The Dashboard button as a tiny screen (Luis, 2026-09-30), from the same
   reference as its trend icon: a near-black panel with rounded corners, a
   light rim bright along the bottom and fading up the sides, faint chart
   gridlines, and a glow rising from the foot. Always on, a touch brighter on
   hover and on the dashboard itself. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover {
  width: 58px !important; height: 42px !important; padding: 0 !important;
  border-radius: 11px !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 108%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.045) 9px 10px),
    linear-gradient(180deg, #08080a 0%, #111114 60%, #1a1a1e 100%) !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.62),
    inset 1px -6px 6px -6px rgba(255, 255, 255, 0.35),
    inset -1px -6px 6px -6px rgba(255, 255, 255, 0.35),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.10),
    0 4px 10px rgba(0, 0, 0, 0.5) !important;
  transform: none;
}
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current {
  background:
    radial-gradient(ellipse 75% 60% at 50% 108%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 9px, rgba(255, 255, 255, 0.06) 9px 10px),
    linear-gradient(180deg, #08080a 0%, #121215 60%, #1e1e22 100%) !important;
}
/* The screen carries its own foot glow, so the light bar and pool under the
   Dashboard are dropped. */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current::before,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current::after { display: none !important; }
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico { width: 34px !important; height: 30px !important; }
/* Diagnostic quick button (Luis, 2026-09-30): the pulse in the lens redraws on hover. */
body.apple-mode :is(.quick-btn, .mp-svc) .lq-ico-diag .lq-diag-pulse { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
body.apple-mode :is(.quick-btn, .mp-svc):hover .lq-ico-diag .lq-diag-pulse { animation: lq-diag-trace .7s ease-out; }
body.apple-mode :is(.quick-btn, .mp-svc):hover .lq-ico-diag { animation: lq-diag-look .7s ease; }
@keyframes lq-diag-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lq-diag-look { 0%, 100% { transform: none; } 40% { transform: translate(-1px, -1px) scale(1.08); } }
/* A wider Dashboard screen (Luis, 2026-10-01): the panel runs 92px and the
   trend lines stretch across it (the SVG drops its aspect ratio; the strokes
   keep their weight via vector-effect). */
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current),
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current { width: 92px !important; }
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico { width: 70px !important; height: 28px !important; }
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current) .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode.chrome-ink .topbar-center .topbar-action[aria-label="Dashboard"].is-current .lq-ico { width: 70px !important; height: 28px !important; }
/* The stretched lines keep an even stroke (vector-effect), and with it Chrome
   measures dashes in screen pixels, so the dash-based draw cut the lines short.
   At rest they are whole; the draw is now a left-to-right reveal (clip-path),
   same timing, grey line a beat behind (2026-10-01). */
body.apple-mode .topbar-action[aria-label="Dashboard"] :is(.db-back, .db-front) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-front,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-front { animation: db-reveal 3.2s ease-in-out infinite; }
body.apple-mode .topbar-action[aria-label="Dashboard"]:hover .db-back,
body.apple-mode .topbar-action[aria-label="Dashboard"].is-current .db-back { animation: db-reveal 3.2s ease-in-out infinite; animation-delay: .35s; }
@keyframes db-reveal {
  0%   { clip-path: inset(-20% 100% -20% 0); opacity: 1; }
  45%  { clip-path: inset(-20% 0 -20% 0); }
  85%  { clip-path: inset(-20% 0 -20% 0); opacity: 1; }
  100% { clip-path: inset(-20% 0 -20% 0); opacity: .25; }
}
@media (prefers-reduced-motion: reduce) { body.apple-mode .topbar-action[aria-label="Dashboard"] :is(.db-back, .db-front) { animation: none !important; } }
/* Static on hover (Luis, 2026-10-01): the Dashboard screen keeps its 92px in
   every state — some older :hover / .is-current:hover rules still carried the
   58px width and won on hover — and nothing moves or scales. Hover only adds a
   faint soft glow around the panel. */
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:active,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:focus,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current):hover,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:active,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:not(.is-current):hover {
  width: 92px !important; min-width: 92px !important; max-width: 92px !important; height: 42px !important;
  transform: none !important;
  transition: box-shadow .2s ease !important;
}
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.62),
    inset 1px -6px 6px -6px rgba(255, 255, 255, 0.35),
    inset -1px -6px 6px -6px rgba(255, 255, 255, 0.35),
    inset 1px 0 0 rgba(255, 255, 255, 0.10),
    inset -1px 0 0 rgba(255, 255, 255, 0.10),
    0 4px 10px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 255, 255, 0.16) !important;
}
/* The icon keeps its size on hover too. */
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover .lq-ico,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"] .lq-ico,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover .lq-ico { width: 70px !important; height: 28px !important; transform: none !important; }
/* A solid light-grey rim all the way round (Luis, 2026-10-01), replacing the
   rim that was bright at the foot and faded up the sides. Hover keeps its
   faint glow outside the rim. */
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:active,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:focus,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"],
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:active,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current {
  box-shadow: inset 0 0 0 1px #c9c9cf, 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"]:hover,
body.apple-mode.chrome-ink .topbar .topbar-center .topbar-action[aria-label="Dashboard"].is-current:hover {
  box-shadow: inset 0 0 0 1px #c9c9cf, 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.16) !important;
}

/* ── Icons in the SF Symbols manner (Luis, 2026-10-14) ──────────────────────
   SF Symbols themselves are licensed for apps on Apple's platforms only, so
   this web POS cannot use them. Phosphor, where the content icons already come
   from, draws the same way: this theme takes its LIGHT weight — thin, open,
   outline only — instead of duotone, and thins the stroked icons to match.

   The sprite (icons.php, pos_icon_light()) carries every weight and these
   custom properties pick one; they cross into <use> clones where page CSS
   cannot. html[data-icons] is a per-laptop switch for comparing, set by
   theme-switch.js from ?icons=light|regular|duotone on any page. */
body.apple-mode { --pi-duo: none; --pi-thin: inline; --pi-sw-ui: 1.9; --pi-sw-nav: 1.5; }
html[data-icons="regular"] body.apple-mode { --pi-duo: inline; --pi-back: none; --pi-thin: none; --pi-sw-ui: 2.1; --pi-sw-nav: 1.7; }
html[data-icons="duotone"] body.apple-mode { --pi-duo: inline; --pi-back: inline; --pi-thin: none; --pi-sw-ui: 2.5; --pi-sw-nav: 1.9; }

/* The icons drawn inline rather than from the sprite, thinned by the same
   proportion in the light weight — only inside controls, the bars and the
   picker, so charts and drawings elsewhere keep their lines. */
html:not([data-icons]) body.apple-mode :is(button, a, [role="button"], .topbar, .sidenav, .mp-bar) :is(svg, svg *)[stroke-width="2.5"] { stroke-width: 1.9; }
html:not([data-icons]) body.apple-mode :is(button, a, [role="button"], .topbar, .sidenav, .mp-bar) :is(svg, svg *)[stroke-width="2.4"] { stroke-width: 1.85; }
html:not([data-icons]) body.apple-mode :is(button, a, [role="button"], .topbar, .sidenav, .mp-bar) :is(svg, svg *)[stroke-width="2.2"] { stroke-width: 1.7; }
html:not([data-icons]) body.apple-mode :is(button, a, [role="button"], .topbar, .sidenav, .mp-bar) :is(svg, svg *)[stroke-width="2"]   { stroke-width: 1.6; }
html:not([data-icons]) body.apple-mode :is(button, a, [role="button"], .topbar, .sidenav, .mp-bar) :is(svg, svg *)[stroke-width="1.9"] { stroke-width: 1.5; }
html:not([data-icons]) body.apple-mode :is(button, a, [role="button"], .topbar, .sidenav, .mp-bar) :is(svg, svg *)[stroke-width="1.8"] { stroke-width: 1.45; }