/* ============================================================================
   Dealer Stock — The Paint Range
   ----------------------------------------------------------------------------
   Customers ask for a colour first, so colour is the finder. Ola's black-and-white
   chrome frames six flat paint fields; the paint is the only colour this app owns.
   Everything else is ink, paper and four state colours that each mean one thing:
     free     green    — nobody holds it
     held     indigo   — a hold is running
     soon     red      — under six hours left, or stock standing too long
     transit  amber    — invoiced by Ola, not yet on the floor
   Direction contract: .impeccable/surfaces/dealer-stock-public.md
   ========================================================================== */

:root {
  --ground: #ffffff;
  --card: #ffffff;
  --panel: #f4f4f2;          /* the second neutral layer: query row, table head */
  --sunk: #ebebe8;
  --line: #e6e5e0;
  --line-strong: #cfcec8;
  --ink: #0b0b0c;            /* 19.9:1 on ground */
  --ink-2: #4a4a52;          /*  8.8:1 */
  --ink-3: #555560;          /*  7.4:1 — the floor for 11px */

  --chrome: #0b0b0c;         /* the top bar and tab bar: Ola black */
  --chrome-ink: #ffffff;
  --chrome-dim: #b5b5bd;     /*  9.7:1 on chrome */
  --chrome-line: #2a2a2e;

  --act: #0b0b0c;            /* primary action: black, white label, 19.9:1 */
  --act-ink: #ffffff;

  --free: #0b7a3d;   --free-wash: #e6f5ec;
  --held: #4340ad;   --held-wash: #ecebfb;
  --soon: #c2231a;   --soon-wash: #fdeceb;
  --transit: #8a4b00; --transit-wash: #fff3e2;

  --scrim: rgba(0, 0, 0, .34);
  --shadow-sheet: 0 -1px 2px rgba(0,0,0,.05), 0 -20px 60px rgba(11,11,12,.22);

  --s-11: .6875rem; --s-12: .75rem; --s-13: .8125rem; --s-15: .9375rem;
  --s-17: 1.0625rem; --s-20: 1.25rem; --s-26: 1.625rem; --s-count: 3.5rem;

  --gutter: 2rem;
  --tap: 2.75rem;
  --bar-h: 3.75rem;
  --tab-h: 3.25rem;
  --band-h: 14.375rem;
  --radius: .875rem;
  --radius-sm: .625rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0b0c;
    --card: #1c1c1e;
    --panel: #161618;
    --sunk: #202023;
    --line: #2a2a2e;
    --line-strong: #3d3d42;
    --ink: #f5f5f3;
    --ink-2: #c3c3c9;
    --ink-3: #a3a3ac;
    --chrome: #000000;
    --chrome-line: #2a2a2e;
    --act: #f5f5f3;
    --act-ink: #0b0b0c;
    --free: #6fdc96;   --free-wash: #11331f;
    --held: #b0aeff;   --held-wash: #241f4d;
    --soon: #ff8f88;   --soon-wash: #3d1b18;
    --transit: #ffc06b; --transit-wash: #3a2a10;
    --scrim: rgba(0, 0, 0, .55);
    --shadow-sheet: 0 -1px 2px rgba(0,0,0,.4), 0 -20px 60px rgba(0,0,0,.6);
  }
}

@media (max-width: 47.99rem) { :root { --gutter: 1rem; --band-h: 12.5rem; --s-count: 2.75rem; } }

/* ============================================================================
   Base and the surfaces we did not draw
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--s-15)/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.icon { display: block; flex: none; }

::selection { background: color-mix(in srgb, var(--ink) 16%, transparent); }
:root { caret-color: var(--ink); accent-color: var(--ink); scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--ground); }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 2px; border-radius: var(--radius-sm); }
.tnum, td.num, .count, .countdown { font-variant-numeric: tabular-nums; }
.mono { font: 500 var(--s-11)/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; color: var(--ink-3); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================================
   Chrome — black, like the brand
   ========================================================================== */
.bar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: var(--chrome); color: var(--chrome-ink);
  display: flex; align-items: center; gap: 2.5rem;
  border-bottom: 1px solid var(--chrome-line);
}
.wordmark { font-size: var(--s-17); font-weight: 700; letter-spacing: -.012em; white-space: nowrap; }
.wordmark small { font-size: var(--s-13); font-weight: 500; color: var(--chrome-dim); margin-left: .5rem; letter-spacing: 0; }
.nav { display: flex; gap: .25rem; }
.nav button {
  border: 0; background: none; color: var(--chrome-dim);
  font-size: var(--s-15); font-weight: 600; padding: .5rem .875rem; border-radius: 99px; min-height: 2.25rem;
  transition: background-color 160ms linear, color 160ms linear;
}
.nav button:hover { color: var(--chrome-ink); }
.nav button[aria-current="page"] { background: var(--chrome-ink); color: var(--chrome); }
.me { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: var(--s-13); color: var(--chrome-dim); white-space: nowrap; }
.me b { color: var(--chrome-ink); font-weight: 600; }
.signout {
  border: 0; border-radius: 99px; min-height: 2.25rem; padding: .375rem .875rem;
  background: color-mix(in srgb, currentColor 14%, transparent); color: inherit;
  font-size: var(--s-13); font-weight: 650;
}
.me .signout { color: var(--chrome-ink); }
.icon-btn {
  border: 0; background: none; color: inherit; border-radius: 99px;
  min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
}

main { max-width: 90rem; margin: 0 auto; padding: 0 0 3rem; }
.view { display: none; }
.view.on { display: block; }

/* ============================================================================
   Find — the query row
   ========================================================================== */
.query {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.375rem var(--gutter) .875rem;
}
.query h1 { font-size: var(--s-26); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; margin-right: auto; text-wrap: balance; }
.query .sub { width: 100%; margin-top: -.375rem; color: var(--ink-2); font-size: var(--s-15); }
.picker {
  -webkit-appearance: none; appearance: none;
  min-height: 2.5rem; padding: .5rem 2.25rem .5rem .875rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ground);
  font-size: var(--s-15); font-weight: 600;
  width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
/* the chevron is drawn by the wrapper so it can take the picker's own colour */
.pick { position: relative; display: inline-flex; min-width: 0; }
.pick::after {
  content: ""; position: absolute; right: .8125rem; top: 50%; width: .875rem; height: .875rem; margin-top: -.4375rem;
  background: currentColor; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 12 15.5 18 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.picker:hover { border-color: var(--ink-3); }
@media (max-width: 47.99rem) {
  .query h1 { width: 100%; font-size: var(--s-20); }
  .query .pick { flex: 1; }
}

/* ============================================================================
   The band — six paints, availability poured into each
   ========================================================================== */
.band {
  display: flex; height: var(--band-h);
  margin: 0 var(--gutter); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.field {
  position: relative; flex: var(--grow, 1) 1 0; min-width: 0;
  border: 0; text-align: left; cursor: pointer;
  padding: 1.125rem 1.125rem 1rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--paint); color: var(--paint-ink);
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.field + .field { box-shadow: inset 1px 0 0 rgba(0,0,0,.06); }
.field .name { font-size: var(--s-15); font-weight: 700; letter-spacing: -.008em; white-space: nowrap; }
.field .count { font-size: var(--s-count); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.field .count small { font-size: var(--s-15); font-weight: 600; letter-spacing: 0; margin-left: .25rem; }
.field .held { font-size: var(--s-13); font-weight: 650; margin-top: .25rem; }
.field.empty .count { opacity: .5; }
/* The chosen ring takes the paint's own ink — a black ring vanishes on Jet Black,
   a white one on Porcelain White. The inner hairline keeps it crisp on mid tones. */
.field[aria-pressed="true"] { box-shadow: inset 0 0 0 4px var(--paint-ink), inset 0 0 0 5px color-mix(in srgb, var(--paint) 70%, transparent); }
.field.pressed { filter: brightness(.94); }




/* ============================================================================
   The units table
   ========================================================================== */
.results-head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: 1.5rem var(--gutter) .625rem;
}
.results-head h2 { font-size: var(--s-20); letter-spacing: -.015em; font-weight: 700; }
.results-head span { color: var(--ink-2); font-size: var(--s-15); }

.units { width: calc(100% - var(--gutter) * 2); margin: 0 var(--gutter); border-collapse: collapse; font-size: var(--s-15); }
.units th {
  text-align: left; font-size: var(--s-12); font-weight: 650; color: var(--ink-2); letter-spacing: .01em;
  padding: .625rem .75rem; border-bottom: 1px solid var(--line); background: var(--panel); white-space: nowrap;
}
.units th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.units th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.units td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.units td.num, .units th.num { text-align: right; }
.units td.act { text-align: right; width: 1%; white-space: nowrap; }
.units tbody tr { cursor: pointer; transition: background-color 120ms linear; }
.units tbody tr:hover, .units tbody tr.pressed { background: var(--panel); }
.units .showroom b { font-weight: 650; display: block; }
.units .mine { font-size: var(--s-12); color: var(--ink-3); font-weight: 600; }

.state {
  display: inline-flex; align-items: center; gap: .4375rem; white-space: nowrap;
  padding: .3125rem .6875rem .3125rem .5625rem; border-radius: 99px;
  font-size: var(--s-13); font-weight: 700; background: var(--sunk); color: var(--ink-2);
}
.state.free { background: var(--free-wash); color: var(--free); }
.state.held { background: var(--held-wash); color: var(--held); }
.state.soon { background: var(--soon-wash); color: var(--soon); }
.state .dot { width: .4375rem; height: .4375rem; border-radius: 50%; background: currentColor; }
.state .ring { flex: none; }
.state .ring .track { stroke: currentColor; opacity: .2; }
.state .ring .fill { stroke: currentColor; stroke-linecap: round; transition: stroke-dashoffset 900ms linear; }
.state small { font-weight: 600; opacity: .8; }
.transit { color: var(--transit); font-weight: 650; }
.aging { color: var(--soon); font-weight: 650; }



/* ============================================================================
   Controls
   ========================================================================== */
.btn {
  border: 0; border-radius: var(--radius-sm); min-height: var(--tap);
  padding: .5625rem 1.125rem; font-size: var(--s-15); font-weight: 650;
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
  background: var(--sunk); color: var(--ink);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform 110ms cubic-bezier(.2,.7,.3,1), background-color 140ms linear, opacity 140ms linear;
}
.btn.primary { background: var(--act); color: var(--act-ink); }
.btn.quiet   { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn.danger  { background: var(--soon-wash); color: var(--soon); }
.btn.small   { min-height: 2.25rem; padding: .375rem .875rem; font-size: var(--s-13); }
.btn.block   { width: 100%; }
.btn:hover:not([disabled]) { filter: brightness(1.08); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn.pressed { transform: scale(.965); }

.field-in { display: block; margin-bottom: .875rem; }
.field-in > .lbl { display: block; font-size: var(--s-13); font-weight: 650; color: var(--ink-2); margin-bottom: .3125rem; }
input:not([type=range]), textarea {
  width: 100%; min-height: var(--tap); padding: .625rem .75rem;
  background: var(--ground); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { min-height: 4.5rem; resize: vertical; }

/* the 1–7 day hold slider */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; background: none; min-height: var(--tap); margin: 0; }
input[type=range]::-webkit-slider-runnable-track {
  height: .3125rem; border-radius: 99px;
  background: linear-gradient(to right, var(--ink) var(--pct, 17%), var(--sunk) var(--pct, 17%));
}
input[type=range]::-moz-range-track { height: .3125rem; border-radius: 99px; background: var(--sunk); }
input[type=range]::-moz-range-progress { height: .3125rem; border-radius: 99px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: -.72rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 3px 10px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.06);
}
input[type=range]::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.2); }
.ticks { display: flex; justify-content: space-between; padding: 0 .25rem; margin-top: -.25rem; }
.ticks span { font-size: var(--s-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ticks span.on { color: var(--ink); font-weight: 700; }

/* ============================================================================
   Sheets
   ========================================================================== */
.scrim { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center; opacity: 0; }
.scrim[hidden] { display: none; }
.sheet {
  position: relative; width: 100%; max-width: 34rem; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--ground); border-radius: 1.25rem 1.25rem 0 0; box-shadow: var(--shadow-sheet);
  will-change: transform; touch-action: none;
}
@media (min-width: 48rem) { .scrim { align-items: center; padding: 1.5rem; } .sheet { border-radius: 1.25rem; max-height: 86vh; } }
.grabber { width: 2.25rem; height: .3125rem; border-radius: 99px; background: var(--line-strong); margin: .4375rem auto 0; flex: none; }
.sheet-hero {
  flex: none; margin: .75rem 1rem 0; border-radius: 1.125rem; background: var(--paint); color: var(--paint-ink);
  padding: 1rem 1.125rem; font-weight: 750; font-size: var(--s-20); letter-spacing: -.02em;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: end; column-gap: .75rem;
}
.sheet-hero span { grid-column: 1; grid-row: 2; font-weight: 600; font-size: var(--s-13); letter-spacing: 0; opacity: .85; }
.sheet-hero .vehicle { display: block; width: 8.5rem; height: auto; margin: -.75rem -.5rem -.875rem 0; }
.sheet-head { padding: .875rem 1rem .25rem; flex: none; }
.sheet-head h2 { font-size: var(--s-20); letter-spacing: -.015em; font-weight: 700; text-wrap: balance; }
.sheet-head p { color: var(--ink-2); margin: .125rem 0 0; font-size: var(--s-13); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: .5rem 1rem 0; }
.sheet-foot { flex: none; display: flex; gap: .5rem; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* ============================================================================
   Notices, facts, secondary views
   ========================================================================== */
.notice {
  display: flex; gap: .5rem; align-items: flex-start;
  border-radius: var(--radius-sm); padding: .625rem .75rem; margin-bottom: .625rem;
  font-size: var(--s-13); line-height: 1.4; background: var(--panel); color: var(--ink-2);
}
.notice .icon { margin-top: .0625rem; }
.notice b { font-weight: 700; color: inherit; }
.notice.held { background: var(--held-wash); color: var(--held); }
.notice.free { background: var(--free-wash); color: var(--free); }
.notice.soon { background: var(--soon-wash); color: var(--soon); }
.notice.transit { background: var(--transit-wash); color: var(--transit); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; font-size: var(--s-13); margin: .5rem 0 1rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 600; }

.section { padding: 0 var(--gutter); }
.page-head { padding: 1.375rem var(--gutter) 1rem; }
.page-head h1 { font-size: var(--s-26); letter-spacing: -.02em; font-weight: 700; }
.page-head p { color: var(--ink-2); margin: .25rem 0 0; max-width: 46rem; }
.group-h { font-size: var(--s-15); font-weight: 700; letter-spacing: -.008em; margin: 1.75rem 0 .5rem; }
.group-n { font-size: var(--s-13); color: var(--ink-2); margin: -.25rem 0 .625rem; max-width: 46rem; }
.grid-table { width: 100%; border-collapse: collapse; font-size: var(--s-13); }
.grid-table th { text-align: left; font-size: var(--s-12); color: var(--ink-2); font-weight: 650; padding: .5rem .625rem; background: var(--panel); border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid-table td { padding: .625rem; border-bottom: 1px solid var(--line); }
.grid-table td.num, .grid-table th.num { text-align: right; }
.scroll-x { overflow-x: auto; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.kpis > div { background: var(--ground); padding: 1rem 1.125rem; }
.kpis .n { font-size: var(--s-26); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpis .l { font-size: var(--s-13); color: var(--ink-2); }

.drop {
  display: block; border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 2rem 1rem; text-align: center; color: var(--ink-2); cursor: pointer;
}
.drop b { display: block; color: var(--ink); font-size: var(--s-17); }
.drop.over { border-color: var(--ink); background: var(--panel); }

.empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-2); }
.empty b { display: block; color: var(--ink); font-size: var(--s-17); margin-bottom: .25rem; }

.skeleton { background: linear-gradient(90deg, var(--panel), var(--sunk), var(--panel)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--radius-sm); height: 1rem; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* sky:begin — the sign-in kit OLA Billing copies (ola-billing-live/scripts/sync-sky.mjs). Keep both apps' sign-in identical. */
/* sign in: the paint stage, and the card that rises over it */
.signin { min-height: 100dvh; display: flex; flex-direction: column; background: var(--ground); }
.sg-stage {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--sg-paint, #E4826F); color: var(--sg-ink, #0b0b0c);
  padding: calc(env(safe-area-inset-top) + 1.5rem) 1.25rem 3.25rem; border-radius: 0 0 2rem 2rem;
  transition: color 240ms ease;
}
.sg-stage > :not(.pour) { position: relative; z-index: 1; }
.sg-stage .pour { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: clip-path; }
.sg-brand b { display: block; font-size: clamp(2.125rem, 9vw, 3rem); font-weight: 780; letter-spacing: -.04em; line-height: 1; }
.sg-brand span { display: block; margin-top: .375rem; font-size: var(--s-15); font-weight: 600; opacity: .82; letter-spacing: -.005em; }
.sg-art { width: min(80%, 22rem); margin: .5rem -.75rem 0 auto; overflow: visible; }
.sg-art .vehicle { display: block; width: 100%; height: auto; will-change: transform; }
.sg-paint { margin: -.25rem 0 0; font-size: var(--s-13); font-weight: 700; letter-spacing: .01em; }
.sg-dots { display: flex; gap: .5rem; margin-top: .625rem; }
.sg-dots button {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--d);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sg-ink) 22%, transparent), 0 1px 3px rgba(0, 0, 0, .18);
  animation: sg-dot .55s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(var(--i) * 45ms + 300ms);
}
.sg-dots button[aria-checked="true"] { box-shadow: 0 0 0 2.5px var(--sg-paint), 0 0 0 4.5px var(--sg-ink); }
@keyframes sg-dot { from { transform: scale(.3); opacity: 0; } }
.sg-card {
  position: relative; z-index: 2; width: min(100% - 2rem, 25rem); margin: -1.75rem auto 2rem;
  background: var(--card); border-radius: 1.5rem; padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .14), 0 0 0 1px var(--line);
  animation: sg-card .7s cubic-bezier(.2, .8, .2, 1) .12s both; will-change: transform;
}
@keyframes sg-card { from { transform: translateY(28px); opacity: 0; } }
.sg-card h1 { font-size: var(--s-26); letter-spacing: -.025em; font-weight: 750; margin: 0 0 1rem; }
.sg-card p { color: var(--ink-2); margin: -.5rem 0 1.25rem; }
@media (min-width: 48rem) {
  .signin { flex-direction: row; }
  .sg-stage { flex: 1.25; display: flex; flex-direction: column; padding: 3rem; border-radius: 0 2.5rem 2.5rem 0; }
  .sg-art { width: min(85%, 34rem); margin: auto; }
  .sg-card { flex: none; align-self: center; margin: 2rem 3rem; width: 24rem; }
}
/* the PIN: six dots over the real input */
.pin-box { position: relative; display: block; }
.pin-dots { display: flex; justify-content: space-between; padding: 1.0625rem 1.125rem; border-radius: var(--radius); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pin-box:focus-within .pin-dots { box-shadow: inset 0 0 0 2px var(--ink); }
.pin-dots i { width: .875rem; height: .875rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); will-change: transform; }
.pin-dots i.on { background: var(--ink); box-shadow: none; }
/* keep me signed in */
.keep { display: flex; gap: .75rem; align-items: flex-start; margin: .375rem 0 1rem; cursor: pointer; position: relative; }
.keep input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keep-switch { flex: none; position: relative; width: 2.875rem; height: 1.75rem; border-radius: 99px; background: var(--line-strong); transition: background 220ms ease; }
.keep-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform 300ms cubic-bezier(.3, 1.35, .5, 1); }
.keep input:checked + .keep-switch { background: var(--ink); }
.keep input:checked + .keep-switch::after { transform: translateX(1.125rem); }
.keep input:focus-visible + .keep-switch { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.keep b { display: block; font-size: var(--s-15); font-weight: 650; }
.keep small { display: block; font-size: var(--s-13); color: var(--ink-2); }
/* sky:end */

/* ============================================================================
   Accessibility overrides
   ========================================================================== */
@media (prefers-contrast: more) {
  :root { --ink-2: #2e2e34; --ink-3: #3f3f47; --line: #9a9aa0; --line-strong: #6b6b72; }
  @media (prefers-color-scheme: dark) {
    :root { --ink-2: #e9e9ef; --ink-3: #d2d2db; --line: #6b6b72; --line-strong: #9a9aa0; }
  }
  .field { outline: 1px solid var(--ink); outline-offset: -1px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .btn.pressed { transform: none; }
  .skeleton { animation: none; }
}

/* ---- the vehicle in the chosen paint: band field and sheet ---- */
.field .stage { position: absolute; right: .5rem; bottom: .125rem; width: min(58%, 21rem); pointer-events: none; }
.field .stage .vehicle { display: block; width: 100%; height: auto; will-change: transform; }
.sheet-hero .vehicle { display: block; width: 8.5rem; height: auto; margin: -.75rem -.5rem -.875rem 0; }



/* ============================================================================
   Phone — after Tandem
   ----------------------------------------------------------------------------
   Four things carried from the leave app, translated into Ola's world:
     a floating pill tab bar · a coloured stage at the top of every screen
     (on Find, the chosen paint itself) · white grouped cards on a tinted ground
     · surfaces that dip toward where the finger lands.
   Desktop keeps the band and the table exactly as approved.
   ========================================================================== */
.hero, .swatches, .tab-pill, .tabs, .units td.c-meta { display: none; }

@media (max-width: 47.99rem) {
  :root { --app-ground: #f2f2ef; --tab-h: 4.125rem; --stage-r: 1.75rem; }
  @media (prefers-color-scheme: dark) { :root { --app-ground: #000000; } }
  body { background: var(--app-ground); }

  .bar .nav, .me .who, .wordmark small { display: none; }
  .bar .me { color: inherit; }

  /* the bar and the stage beneath it are one field of colour */
  .bar {
    gap: 1rem;
    background: var(--stage-bg, var(--chrome)); color: var(--stage-ink, #fff);
    border-bottom: 0; transition: background-color 320ms ease, color 320ms ease;
  }
  .bar .wordmark { font-size: var(--s-20); letter-spacing: -.03em; }
  .bar .signout {
  border: 0; border-radius: 99px; min-height: 2.25rem; padding: .375rem .875rem;
  background: color-mix(in srgb, currentColor 14%, transparent); color: inherit;
  font-size: var(--s-13); font-weight: 650;
}
.me .signout { color: var(--chrome-ink); }
.icon-btn { color: inherit; }

  .stage, .stage-ink {
    background: var(--stage-bg, var(--chrome)); color: var(--stage-ink, #fff);
    border-radius: 0 0 var(--stage-r) var(--stage-r);
    transition: background-color 320ms ease, color 320ms ease;
  }
  .stage-ink { --stage-bg: var(--chrome); --stage-ink: #fff; padding: .25rem var(--gutter) 1.5rem; }
  .stage-ink h1 { font-size: clamp(1.75rem, 8vw, 2.125rem); letter-spacing: -.03em; font-weight: 750; }
  .stage-ink p { color: color-mix(in srgb, #fff 82%, transparent); }

  /* Find: the stage is the chosen paint */
  .stage { padding: 0 0 1.375rem; position: relative; isolation: isolate; }
  .stage > :not(.pour) { position: relative; z-index: 1; }
  .stage { overflow: hidden; contain: paint; }
  .pour { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; transform-origin: center; }
  .query .signout, .bar .signout { background: color-mix(in srgb, var(--stage-ink, #fff) 16%, transparent); color: var(--stage-ink, #fff); }
  .query { padding: .25rem var(--gutter) 0; gap: .5rem; }
  .query h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .query .pick-model { flex: 1.3 1 0; }
  .query .pick-room { flex: 1 1 0; }
  .query .pick { order: 2; color: var(--stage-ink); }
  .query .picker {
    order: 2; min-height: 2.5rem; border: 0; border-radius: 99px;
    background-color: color-mix(in srgb, var(--stage-ink) 14%, transparent); color: var(--stage-ink);
    font-size: var(--s-13); padding: .375rem 1.75rem .375rem .875rem;
  }
  .query .picker option, .query .picker optgroup { color: #0b0b0c; }
  .query .sub { display: none; }

  .hero { display: grid; grid-template-columns: 1fr 1.15fr; align-items: end; gap: .25rem; padding: .5rem var(--gutter) 0; min-height: 9.5rem; }
  .hero-copy { display: grid; gap: .125rem; align-self: end; }
  .hero-paint { font-size: clamp(1.75rem, 8vw, 2.125rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.05; margin: 0; }
  .hero-count { margin: .375rem 0 0; display: flex; align-items: baseline; gap: .375rem; }
  .hero-count .count { font-size: 3.25rem; font-weight: 750; letter-spacing: -.04em; line-height: .95; }
  .hero-count .unit { font-size: var(--s-17); font-weight: 650; }
  .hero-held { margin: .25rem 0 0; font-size: var(--s-13); font-weight: 650; }
  .hero-art { position: relative; isolation: isolate; align-self: end; margin-right: -.5rem; }
  .hero-art .vehicle { display: block; width: 100%; height: auto; will-change: transform; }

  /* all six paints at once: a disc and its free count, the chosen one ringed */
  .band { display: none; }
  .swatches {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem;
    margin: .875rem var(--gutter) 0; padding: .625rem .25rem .5rem;
    background: var(--card); border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(11,11,12,.05);
  }
  .swatch {
    display: grid; justify-items: center; gap: .3125rem; min-width: 0; min-height: 3.75rem;
    border: 0; background: none; color: var(--ink); padding: .25rem 0; border-radius: .875rem;
    font-size: var(--s-15); font-weight: 750; font-variant-numeric: tabular-nums;
    -webkit-tap-highlight-color: transparent;
  }
  .swatch i {
    width: 2.375rem; height: 2.375rem; border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
    transition: box-shadow 160ms linear, transform 220ms cubic-bezier(.2,.9,.25,1);
  }
  .swatch[aria-checked="true"] i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--ink); transform: scale(1.06); }
  .swatch b { font-weight: 750; }
  .swatch.empty { color: var(--ink-3); }
  .swatch.empty i { opacity: .45; }

  /* units: one white group, rows that read as records */
  .results-head { display: none; }
  .units { margin-top: .75rem !important; }
  .units, .units tbody, .units tr, .units td { display: block; }
  .units { width: auto; margin: 0 var(--gutter); background: var(--card); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 1px 2px rgba(11,11,12,.05); }
  .units thead { display: none; }
  .units tr {
    display: grid; grid-template-columns: 1fr auto; gap: .1875rem .75rem; align-items: center;
    padding: .75rem .875rem .75rem 1.125rem; min-height: 4.25rem;
  }
  .units tr + tr { border-top: 1px solid var(--line); }
  .units td { padding: 0; border: 0; }
  .units td.c-showroom { grid-column: 1; }
  .units td.c-showroom b { font-size: var(--s-17); font-weight: 650; }
  .units .c-showroom .mine { display: none; }
  .units td.act { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .units td.c-status, .units td.c-standing { display: none; }
  .units td.c-meta { display: block; grid-column: 1; font-size: var(--s-13); color: var(--ink-2); }
  .units .c-showroom .mono { display: none; }
  .units td.c-hold { grid-column: 1; margin-top: .25rem; }
  .units td.c-hold:empty, .units tr.is-free td.c-hold { display: none; }
  .units td.num { text-align: left; }
  .units tbody tr:hover { background: none; }
  .units .btn.small { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: var(--s-15); border-radius: 99px; }
  .units tr:has(td.c-status) { grid-template-areas: none; }

  /* every other screen: white records on the tinted ground */
  .section { padding-top: 1rem; }
  .kpis { border-radius: 1.25rem; }
  .grid-table { background: var(--card); border-radius: 1.25rem; overflow: hidden; }
  .drop { background: var(--card); border-radius: 1.25rem; }
  .kpis > div { background: var(--card); }

  /* controls sized for thumbs */
  .btn { min-height: 3.25rem; border-radius: .875rem; font-size: var(--s-17); }
  input:not([type=range]), textarea { min-height: 3.375rem; border-radius: .875rem; font-size: var(--s-17); }

  /* floating pill tab bar */
  .tabs {
    display: block; position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
    bottom: calc(.625rem + env(safe-area-inset-bottom));
    width: min(calc(100vw - 1.5rem), 27.5rem); height: var(--tab-h); padding: .375rem;
    border-radius: 1.5rem; background: color-mix(in srgb, #ffffff 94%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 10px 28px rgba(11,11,12,.16), inset 0 1px 0 rgba(255,255,255,.8);
  }
  .tab-items { position: relative; z-index: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 100%; gap: .125rem; }
  .tab-items button {
    border: 0; background: none; border-radius: 1.125rem; color: var(--ink-3);
    display: grid; justify-items: center; align-content: center; gap: .1875rem;
    font-size: var(--s-13); font-weight: 650; -webkit-tap-highlight-color: transparent;
    transition: color 180ms linear, transform 100ms cubic-bezier(.2,.9,.25,1);
  }
  .tab-items button[aria-current="page"] { color: #fff; }
  .tab-items button.pressed { transform: scale(.94); }
  .tab-pill {
    display: block; position: absolute; z-index: 0; top: .375rem; bottom: .375rem; left: 0;
    border-radius: 1.125rem; background: #0b0b0c; will-change: transform, width;
  }
  main { padding-bottom: calc(var(--tab-h) + 2.75rem + env(safe-area-inset-bottom)) !important; }

  /* surfaces dip toward the finger rather than shrinking flat */
  .units tbody tr.pressed {
    transform: perspective(37.5rem) rotateX(calc((var(--oy, .5) - .5) * -5deg)) rotateY(calc((var(--ox, .5) - .5) * 5deg)) scale(.985);
    background: var(--panel);
  }
  .swatch.pressed i { transform: scale(.9); }
}

@media (max-width: 47.99rem) and (prefers-color-scheme: dark) {
  .tabs { background: color-mix(in srgb, #1c1c1e 92%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
  .tab-pill { background: #f5f5f3; }
  .tab-items button[aria-current="page"] { color: #0b0b0c; }
}
@media (max-width: 47.99rem) and (prefers-reduced-transparency: reduce) {
  .tabs { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .units tbody tr.pressed, .swatch.pressed i { transform: none; }
  .bar, .stage, .stage-ink { transition: none; }
}

/* wide tables on a phone: the first column stays put while the rest swipes */
@media (max-width: 47.99rem) {
  .scroll-x { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); -webkit-overflow-scrolling: touch; }
  .grid-table th:first-child, .grid-table td:first-child {
    position: sticky; left: 0; z-index: 1; white-space: nowrap; background: var(--card);
    box-shadow: 1px 0 0 var(--line);
  }
  .grid-table th:first-child { background: var(--panel); }
}


/* ============================================================================
   Holds — ours, on our floor, tonight
   ========================================================================== */
.seg { display: inline-flex; gap: .25rem; padding: .25rem; border-radius: 99px; background: var(--panel); margin-top: .875rem; }
.seg button {
  border: 0; background: none; border-radius: 99px; min-height: 2.5rem; padding: 0 .9375rem;
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: var(--s-15); font-weight: 650; color: var(--ink-2); white-space: nowrap;
}
.seg button[hidden] { display: none !important; }
.seg button b { min-width: 1.375rem; padding: .0625rem .375rem; border-radius: var(--radius-sm); background: var(--card); font-size: var(--s-13); text-align: center; font-variant-numeric: tabular-nums; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.seg button[aria-selected="true"] b { background: color-mix(in srgb, var(--ground) 22%, transparent); color: inherit; }
#holdsBody { padding: 1rem 0 0; }
.pick-scope { margin: .875rem 0 0 .5rem; vertical-align: top; }
.pick-scope[hidden] { display: none !important; }
.notice[hidden] { display: none !important; }
/* A near-black paint on the dark ground: give the stage its edge back, and the drawing a
   faint rim, so Jet Black reads as a paint rather than as the page. */
@media (prefers-color-scheme: dark) {
  :root[data-dark-paint] .stage { box-shadow: inset 0 -1px 0 color-mix(in srgb, #fff 18%, transparent); }
  :root[data-dark-paint] .hero-art .vehicle { filter: drop-shadow(0 0 .75px color-mix(in srgb, #fff 60%, transparent)); }
}
@media (max-width: 47.99rem) {
  .stage-ink .pick-scope { display: flex; margin: .875rem 0 0; color: #fff; }
  .stage-ink .pick-scope .picker { border: 0; border-radius: 99px; background-color: color-mix(in srgb, #fff 14%, transparent); color: #fff; font-size: var(--s-15); }
  .stage-ink .pick-scope .picker option { color: #0b0b0c; }
}
.paint-count { display: inline-flex; align-items: center; justify-content: flex-end; font-weight: 650; }
.paint-count .paint-dot { width: .625rem; height: .625rem; margin-right: .375rem; vertical-align: 0; }
.paint-dot { display: inline-block; width: .875rem; height: .875rem; border-radius: 50%; vertical-align: -.125rem; margin-right: .375rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent); }
.holds .unit-name { display: block; font-weight: 650; }
.holds .who-line { font-size: var(--s-13); color: var(--ink-2); }
.holds .acts { display: inline-flex; gap: .375rem; justify-content: flex-end; }
@media (max-width: 47.99rem) {
  .stage-ink .seg { display: flex; background: color-mix(in srgb, #fff 12%, transparent); }
  .stage-ink .seg button { flex: 1; justify-content: center; padding: 0 .5rem; color: #fff; font-size: var(--s-13); }
  .stage-ink .seg button b { background: color-mix(in srgb, #fff 18%, transparent); color: #fff; }
  .stage-ink .seg button[aria-selected="true"] { background: #fff; color: #0b0b0c; }
  .stage-ink .seg button[aria-selected="true"] b { background: #0b0b0c; color: #fff; }
  .holds.units .c-showroom b { font-size: var(--s-17); }
  /* actions get their own line under the record, so the unit never wraps around them */
  .holds.units td.act { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; width: auto; text-align: left; margin-top: .5rem; }
  .holds .acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
  .holds .acts .btn.small { min-height: 2.75rem; font-size: var(--s-15); border-radius: .875rem; }
  .holds .acts .btn[data-hold-act="override"] { grid-column: 1 / -1; }
  /* no actions for this viewer: the record is the tap target, nothing below it */
  .holds.units td.act:has(.acts:empty), .holds.units td.c-meta:empty { display: none; }
  .holds.units tr { cursor: pointer; }
  /* a record with no buttons still says it can be opened — Tandem's trailing chevron */
  .holds.units tr:has(td.act .acts:empty)::after {
    content: ""; grid-column: 2; grid-row: 1 / span 3; align-self: center;
    width: .5625rem; height: .5625rem; margin-right: .25rem;
    border-right: 2px solid var(--line-strong); border-top: 2px solid var(--line-strong); transform: rotate(45deg);
  }
}

/* ============================================================================
   The gate, Account, and Team
   ========================================================================== */
.gate-note { font-size: var(--s-13); color: var(--ink-2); text-align: center; margin: 1rem 0 0; }

.group { background: var(--card); border-radius: 1.25rem; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.g-row {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.75rem;
  padding: .75rem 1rem .75rem 1.125rem; border: 0; background: none; text-align: left; color: inherit; text-decoration: none;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.g-row + .g-row { border-top: 1px solid var(--line); }
.g-row:hover { background: var(--panel); }
.g-row.g-static { cursor: default; }
.g-row.g-static:hover { background: none; }
.g-main { flex: 1; min-width: 0; display: grid; gap: .0625rem; }
.g-main b { font-size: var(--s-17); font-weight: 650; }
.g-main b small { font-weight: 500; color: var(--ink-3); font-size: var(--s-13); }
.g-main span { font-size: var(--s-13); color: var(--ink-2); }
.g-meta { font-size: var(--s-13); color: var(--ink-3); white-space: nowrap; }
.g-chev { flex: none; width: .5625rem; height: .5625rem; border-right: 2px solid var(--line-strong); border-top: 2px solid var(--line-strong); transform: rotate(45deg); margin-right: .25rem; }
.g-add { color: var(--ink); font-weight: 650; gap: .5rem; min-height: 3.25rem; }
.g-label { font-size: var(--s-13); font-weight: 650; color: var(--ink-2); margin: 1rem 0 .375rem .25rem; }
.state.wait { background: var(--transit-wash); color: var(--transit); }
.g-actions { display: grid; gap: .5rem; margin-top: .75rem; }
.pick-block { display: flex; }
.pick-block .picker { width: 100%; min-height: var(--tap); }
#v-team .section { max-width: 44rem; }

.pin-show { display: flex; justify-content: center; gap: .5rem; margin: .75rem 0 1.25rem; }
.pin-show span {
  width: 2.75rem; height: 3.5rem; display: grid; place-items: center; border-radius: .75rem;
  background: var(--panel); font: 700 1.75rem/1 ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums;
}

a.btn { text-decoration: none; text-align: center; }

/* Admin */
.swatch-dot { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-right: .75rem; box-shadow: inset 0 0 0 1px var(--line); }
.act-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 45%), 1fr)); gap: 0 .625rem; margin: 1rem 0 .5rem; }
.act-d { font-size: var(--s-13); color: var(--ink-2); margin-top: .125rem; }
.grid-table.act td { vertical-align: top; }
#adminSeg { max-width: 100%; }
@media (max-width: 47.99rem) {
  .stage-ink #adminSeg button { padding: 0 .25rem; font-size: var(--s-13); }
}

/* the real PIN input sits over its dots: it takes the keyboard, the dots show it */
.pin-box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; caret-color: transparent; font-size: 16px; padding: 0; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .sg-dots button, .sg-card, .rise { animation: none !important; }
  .keep-switch::after { transition: none; }
}
.sg-card .gate-note { margin: 1rem 0 0; }

/* travelling pill behind segmented pickers */
.seg { position: relative; isolation: isolate; }
.seg .seg-pill { position: absolute; left: 0; top: .25rem; bottom: .25rem; width: 0; border-radius: 99px; background: var(--ink); pointer-events: none; z-index: 0; will-change: transform, width; }
.seg button { position: relative; z-index: 1; }
.seg button[aria-selected="true"] { background: transparent; }
/* the white pill belongs to the phone's dark header only; wider screens keep the ink pill */
@media (max-width: 47.99rem) {
  .stage-ink .seg .seg-pill { background: #fff; }
  .stage-ink .seg button[aria-selected="true"] { background: transparent; }
}
/* rows rise into place, a beat apart; a hold you just placed lands with a pop */
.rise { animation: rise .46s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 26ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.just-held { animation: rise .46s cubic-bezier(.2, .8, .2, 1) both, held-glow 1.6s ease-out .2s both; }
.just-held .c-hold > * { animation: held-pop .62s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
@keyframes held-pop { from { transform: scale(.4); opacity: 0; } }
@keyframes held-glow { from { background: color-mix(in srgb, var(--held, #c58b00) 18%, transparent); } }
.g-row.pressed { background: var(--panel); }
.seg button.pressed { transform: scale(.96); }
.sg-dots button.pressed { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .just-held, .just-held .c-hold > * { animation: none !important; } }

/* ============================================================================
   Bijli — the guide, its tour, its toasts
   ========================================================================== */
/* Bijli is a yellow lightning bolt with two eyes. Yellow is Bijli's own colour and means only
   Bijli; the paints and the four states keep their meanings. Same drawing in OLA Billing. */
.bijli { display: block; overflow: visible; transform-origin: 50% 55%; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .22)); }
.bijli .bj-lid { transform-box: fill-box; transform-origin: center; transition: transform 70ms ease-in; }
.bijli.shut .bj-lid { transform: scaleY(.12); }

/* Bijli the companion (generated public/spark.js): never tappable, below sheets, the scrim and the tour */
.spark-pal { position: fixed; left: 0; top: 0; z-index: 45; width: 34px; height: 34px; pointer-events: none; will-change: transform; transition: opacity .25s ease; }
.spark-pal .sp-inner { width: 34px; height: 34px; }
.spark-pal.resting .sp-inner { animation: bj-idle 2.4s ease-in-out infinite; }
.spark-pal.flicker .sp-inner { animation: sp-flicker .5s steps(2, jump-none) 3; }
@keyframes sp-flicker { 0% { opacity: 1; } 30% { opacity: .25; } 55% { opacity: 1; } 75% { opacity: .4; } 100% { opacity: 1; } }
.spark-pal.offline .sp-inner { filter: grayscale(1) brightness(.85); opacity: .55; animation: none; }
.spark-pal.hidden, .spark-pal.away { opacity: 0; }
.sp-trail { position: fixed; inset: 0; z-index: 44; width: 100vw; height: 100vh; pointer-events: none; }
.sp-packet { position: fixed; left: 0; top: 0; z-index: 46; width: 44px; height: 32px; padding: 0 8px; border-radius: 7px; background: var(--card); box-shadow: 0 10px 28px rgba(11,11,12,.16), 0 0 0 1px var(--line); display: grid; gap: 4px; align-content: center; opacity: 0; pointer-events: none; }
.sp-packet.on { opacity: 1; }
.sp-packet i { display: block; height: 3px; border-radius: 2px; background: var(--line-strong); }
.sp-packet i:first-child { width: 70%; background: var(--ink-3); }
.sp-zap { position: absolute; inset: -10px; pointer-events: none; }
.sp-zap i { position: absolute; left: 50%; top: 50%; width: 2.5px; height: 8px; margin: -4px 0 0 -1.25px; border-radius: 2px; background: #FFC83D; box-shadow: 0 0 4px rgba(255,200,61,.8); opacity: 0; transform: rotate(var(--a)) translateY(-20px); }
.sp-zap i:nth-child(1) { --a: 0deg; } .sp-zap i:nth-child(2) { --a: 60deg; } .sp-zap i:nth-child(3) { --a: 120deg; }
.sp-zap i:nth-child(4) { --a: 180deg; } .sp-zap i:nth-child(5) { --a: 240deg; } .sp-zap i:nth-child(6) { --a: 300deg; }
.sp-zap.on i { animation: sp-ray .42s cubic-bezier(.2,.7,.3,1) both; }
.sp-zap.on i:nth-child(even) { animation-delay: 40ms; }
@keyframes sp-ray { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-12px) scaleY(.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-26px) scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .spark-pal .sp-inner, .sp-zap i { animation: none !important; } }

.gd-root { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.gd-block { position: fixed; inset: 0; pointer-events: auto; background: transparent; }
.gd-block.shade { background: rgba(8, 8, 10, .55); }
.gd-spot {
  position: fixed; left: 0; top: 0; border-radius: 18px; pointer-events: none;
  box-shadow: 0 0 0 200vmax rgba(8, 8, 10, .55), 0 0 0 3px rgba(255, 255, 255, .9), 0 0 24px 6px rgba(255, 255, 255, .35);
  will-change: transform, width, height;
}
.gd-bijli { position: fixed; left: 0; top: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
@keyframes bj-idle { 50% { transform: translateY(-2px); } }
.gd-bubble {
  position: fixed; left: 0; top: 0; pointer-events: auto; will-change: transform;
  background: var(--card); color: var(--ink); border-radius: 1.25rem; padding: .875rem 1rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28), 0 0 0 1px var(--line);
  transition: opacity 160ms ease;
}
.gd-bubble.swap { opacity: .25; }
.gd-bubble h2 { font-size: var(--s-20); font-weight: 760; letter-spacing: -.02em; margin: .125rem 0 .25rem; }
.gd-bubble p { margin: 0; color: var(--ink-2); font-size: var(--s-15); line-height: 1.45; }
.gd-meta { display: flex; justify-content: space-between; align-items: center; font-size: var(--s-12); font-weight: 650; color: var(--ink-3); }
.gd-skip { font: inherit; color: var(--ink-2); background: none; border: 0; padding: .25rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gd-foot { display: flex; align-items: center; gap: .5rem; margin-top: .875rem; }
.gd-hint { margin-right: auto; font-size: var(--s-13); font-weight: 700; color: var(--ink); animation: gd-nudge 1.4s ease-in-out infinite; }
.gd-hint:empty { animation: none; }
@keyframes gd-nudge { 50% { transform: translateY(-2px); opacity: .7; } }
.gd-next[hidden], .gd-back[hidden] { display: none !important; }
.gd-root.leaving .gd-bubble, .gd-root.leaving .gd-spot { opacity: 0; transition: opacity 240ms ease; }
.gd-root.leaving .gd-block { background: transparent; }

.gd-burst { position: fixed; z-index: 95; width: 0; height: 0; pointer-events: none; }
.gd-burst i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; animation: gd-fly .9s cubic-bezier(.15, .7, .3, 1) both; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
@keyframes gd-fly { 0% { transform: translate(0, 0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--tx), calc(var(--ty) + 40px)) scale(1); opacity: 0; } }

.gd-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 6.25rem); z-index: 80;
  display: flex; align-items: center; gap: .5rem; padding: .375rem 1rem .375rem .5rem; max-width: calc(100vw - 2rem);
  background: var(--ink); color: var(--ground); border-radius: 99px; font-size: var(--s-15); font-weight: 650;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transform: translate3d(-50%, 120px, 0); opacity: 0; pointer-events: none;
}
.gd-toast .bijli { flex: none; }
@media (min-width: 48rem) { .gd-toast { bottom: 2rem; } }

/* Bijli in empty places: something to look at besides "nothing here" */
.empty-bj { display: grid; justify-items: center; gap: .5rem; }
.empty-bj .bijli { animation: bj-idle 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .empty-bj .bijli, .gd-hint { animation: none !important; }
}
.gd-root.paused { visibility: hidden; }
.gd-root.paused * { pointer-events: none !important; }

.view.on { backface-visibility: hidden; }

/* the paint-chip deck on the sign-in stage */
.sg-deck { position: relative; height: clamp(12.5rem, 34vh, 17rem); margin: 1rem auto 1.25rem; width: 100%; max-width: 26rem; touch-action: manipulation; }
.chip {
  position: absolute; left: 50%; bottom: 0; width: clamp(6.75rem, 30vw, 8.5rem); aspect-ratio: 5 / 7.4; margin-left: calc(clamp(6.75rem, 30vw, 8.5rem) / -2);
  transform-origin: 50% 135%; will-change: transform; border: 0; padding: .625rem .625rem .75rem; cursor: pointer;
  border-radius: 1rem; background: var(--c); color: var(--ci); text-align: left;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .06);
  display: grid; grid-template-rows: auto 1fr auto; font: inherit;
}
.chip-top { font-size: var(--s-11); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.chip-no { font-size: var(--s-11); font-weight: 700; opacity: .6; position: absolute; right: .625rem; top: .625rem; font-variant-numeric: tabular-nums; }
.chip-name { font-size: var(--s-15); font-weight: 750; line-height: 1.1; letter-spacing: -.01em; }
.chip[aria-checked="true"] { box-shadow: 0 0 0 3px var(--sg-ink), 0 16px 34px rgba(0, 0, 0, .3); }
.chip:focus-visible { outline: 3px solid var(--sg-ink); outline-offset: 3px; }
.sg-paint { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: .75rem 0 0; font-size: var(--s-15); font-weight: 750; }
.sg-paint small { font-size: var(--s-12); font-weight: 600; opacity: .7; }
.sg-stage { contain: paint; }
.sg-stage .pour { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; will-change: transform; inset: auto; }
@media (min-width: 48rem) {
  .sg-deck { height: 22rem; max-width: 34rem; margin: auto; }
  .chip { width: 10rem; margin-left: -5rem; }
}

/* ============================================================================
   Sign-in: the live sky (content) under one glass sheet (functional layer)
   ========================================================================== */
/* sky:begin — the sign-in kit OLA Billing copies (ola-billing-live/scripts/sync-sky.mjs). Keep both apps' sign-in identical. */
.signin { position: fixed; inset: 0; min-height: 0; display: block; overflow: hidden; background: #05070f; }
.sky { position: absolute; inset: 0; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
.sky-fill { position: absolute; inset: 0; }
.sky-stars { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); transition: opacity .8s ease; will-change: transform; }
.sky-clouds { position: absolute; inset: 0; pointer-events: none; will-change: transform; transition: opacity .8s ease; }
.cloud { position: absolute; left: 0; width: min(46vw, 15rem); fill: rgba(255, 255, 255, .82); animation: sky-drift 150s linear infinite; will-change: transform; }
.cloud.c0 { top: 34%; }
.cloud.c1 { top: 46%; width: min(30vw, 10rem); fill: rgba(255, 255, 255, .62); animation-duration: 190s; animation-delay: -80s; }
.cloud.c2 { top: 25%; width: min(22vw, 7rem); fill: rgba(255, 255, 255, .5); animation-duration: 230s; animation-delay: -150s; }
@keyframes sky-drift { from { transform: translate3d(-40vw, 0, 0); } to { transform: translate3d(120vw, 0, 0); } }
.sky-brand { position: absolute; top: calc(env(safe-area-inset-top) + 1rem); left: 1.25rem; margin: 0; font-size: var(--s-17); font-weight: 700; letter-spacing: -.012em; }
.sky-head { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 3.5rem); text-align: center; }
.sky-date { margin: 0; font-size: var(--s-17); font-weight: 600; letter-spacing: -.01em; opacity: .92; }
.sky-time { margin: .125rem 0 0; font-size: clamp(4.75rem, 25vw, 8rem); font-weight: 650; letter-spacing: -.045em; line-height: .92; font-variant-numeric: tabular-nums; }
.sky-time .ap { font-size: .2em; font-weight: 600; letter-spacing: 0; margin-left: .3em; vertical-align: .9em; opacity: .85; }
.sky-note { margin: .375rem 0 0; font-size: var(--s-15); font-weight: 600; opacity: .92; transition: opacity .25s ease; }
.scrubbed .sky-note { opacity: 0; }
.sky-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc-path { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1.5; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.horizon { stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.body .disc { fill: #ffe7a8; }
.body .halo { fill: rgba(255, 231, 168, .2); transition: opacity .3s ease; }
.body .moon { fill: #f1efe8; display: none; }
.body[data-kind="moon"] .disc, .body[data-kind="moon"] .halo { display: none; }
.body[data-kind="moon"] .moon { display: block; }
.grab { cursor: grab; touch-action: none; outline: none; }
.scrubbing .grab { cursor: grabbing; }
.grab:focus-visible { stroke: #fff; stroke-width: 2; }
.scrubbing .body .halo { fill: rgba(255, 231, 168, .36); }
.sky-hint { position: absolute; left: 0; right: 0; top: calc(62% + .625rem); margin: 0; text-align: center; font-size: var(--s-13); font-weight: 600; opacity: .7; transition: opacity .4s ease; pointer-events: none; }
.sky-hint.gone { opacity: 0; }

.signin .sg-card {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + .75rem); z-index: 2;
  width: min(100% - 1.5rem, 26rem); margin: 0 auto; max-height: 72vh; overflow: auto; animation: none;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  border-radius: 2rem; padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 .5px rgba(255, 255, 255, .3);
  will-change: transform;
}
.signin .sg-card h1 { font-size: var(--s-26); font-weight: 750; letter-spacing: -.025em; margin: 0 0 1rem; }
.signin .pin-dots { background: color-mix(in srgb, var(--panel) 80%, transparent); }
@media (min-width: 48rem) {
  .signin .sg-card { left: auto; right: 3rem; bottom: 3rem; margin: 0; width: 24rem; }
  .sky-head { text-align: left; left: 3rem; top: 6rem; }
  .sky-hint { text-align: left; left: 3rem; }
}
@media (prefers-reduced-transparency: reduce) {
  .signin .sg-card { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .signin .sg-card { background: var(--card); box-shadow: 0 0 0 1.5px var(--line-strong); }
  .sky { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
}
@media (prefers-reduced-motion: reduce) { .cloud { animation: none; } }
/* signed in: the sheet goes back the way it came, the sky lifts away */
.signin.leaving .sg-card { transition: transform .38s cubic-bezier(.4, 0, .9, .3), opacity .38s; transform: translate3d(0, 115%, 0) !important; }
.signin.leaving .sky { transition: opacity .42s ease, transform .42s cubic-bezier(.2, .8, .2, 1); opacity: 0; transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .signin.leaving .sg-card, .signin.leaving .sky { transition: opacity .2s; transform: none !important; } }

/* dark glass over a night sky */
.signin.sky-dark .sg-card {
  --card: #1c1c1e; --ground: #0b0b0c; --ink: #f5f5f7; --ink-2: #aeaeb2; --ink-3: #8e8e93;
  --panel: rgba(255, 255, 255, .08); --sunk: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .32);
  background: rgba(28, 28, 30, .58); color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 .5px rgba(255, 255, 255, .12);
}
.signin.sky-dark .sg-card input { background: rgba(255, 255, 255, .08); color: var(--ink); }
.signin.sky-dark .sg-card .btn.primary { background: #f5f5f7; color: #0b0b0c; }
.signin.sky-dark .keep-switch::after { background: #f5f5f7; }
.signin.sky-dark .keep input:checked + .keep-switch { background: #34c759; }
@media (prefers-reduced-transparency: reduce) { .signin.sky-dark .sg-card { background: #1c1c1e; } }

/* the label colour follows the pill, rather than snapping ahead of it */
.seg button { transition: color .18s ease; }

/* live sky, revised: the clock steps aside, the town stands on the horizon */
.sky-head, .sky-note { display: none; }
.sky-top { position: absolute; z-index: 3; left: 1.25rem; right: 1.25rem; top: calc(env(safe-area-inset-top) + 1rem); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sky-top .sky-brand { position: static; margin: 0; font-size: var(--s-20); font-weight: 750; letter-spacing: -.02em; }
.sky-status { margin: .25rem 0 0; display: inline-flex; align-items: center; gap: .375rem; font-size: var(--s-13); font-weight: 600;
  padding: .25rem .625rem .25rem .5rem; border-radius: 99px; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-shadow: none; }
.sky-status .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #ff6b6b; }
.sky-status .dot.open { background: #34c759; }
.sky-clock { margin: 0; text-align: right; line-height: 1.15; }
.sky-clock .sky-time { display: block; font-size: var(--s-17); font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sky-clock .sky-time .ap { font-size: var(--s-12); font-weight: 600; margin-left: .125rem; vertical-align: 0; opacity: .85; }
.sky-clock .sky-date { display: block; font-size: var(--s-13); font-weight: 500; opacity: .85; }
.sun-glow { position: absolute; left: 0; top: 0; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; will-change: transform; transition: opacity .6s ease; }
.sky-arc .arc-path { stroke: rgba(255, 255, 255, .5); stroke-dasharray: 1.5 7; opacity: 0; transition: opacity .25s ease; }
.scrubbing .sky-arc .arc-path { opacity: 1; }
.body .disc { fill: #fff6dc; }
.body .halo { fill: rgba(255, 246, 220, .35); }
.town-far, .town-near, .ground { transition: none; }
.town-wires { fill: none; stroke-width: .8; opacity: .9; }
.town-lit { fill: #ffcf7a; transition: opacity 1.2s ease; }
.sky-haze { position: absolute; left: 0; right: 0; height: 90px; pointer-events: none; }
.cloud { fill: currentColor; filter: blur(.4px); }
.sky-clouds { color: #fff; }
.sky-hint { top: 0 !important; left: 0; right: auto; width: 120px; transform-origin: center; }
.sky-birds { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.sky-birds.on { opacity: 1; }
.bird { position: absolute; left: 0; width: 14px; fill: none; stroke: rgba(20, 20, 30, .7); stroke-width: 1.6; stroke-linecap: round;
  animation: bird-fly 26s linear infinite, bird-flap .5s ease-in-out infinite alternate; }
.bird.b0 { top: 24%; } .bird.b1 { top: 26%; animation-delay: -1.2s, -.2s; width: 11px; }
.bird.b2 { top: 22%; animation-delay: -2s, -.35s; width: 12px; } .bird.b3 { top: 30%; animation-delay: -13s, -.1s; width: 10px; }
@keyframes bird-fly { from { transform: translate3d(-10vw, 0, 0); } to { transform: translate3d(110vw, -4vh, 0); } }
@keyframes bird-flap { to { scale: 1 .45; } }
@media (min-width: 48rem) { .sky-top { left: 3rem; right: 3rem; top: 2rem; } }
@media (prefers-reduced-motion: reduce) { .bird { animation: none; display: none; } }

/* night on the sign-in: the moon blooms, stars come out, the town lights up */
.night-arrive .sky-arc .body { animation: moon-bloom 1.4s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; }
.night-arrive .sun-glow { animation: glow-in 2.2s ease both; }
@keyframes moon-bloom { from { opacity: 0; } }
@keyframes glow-in { from { opacity: 0; } }
.night-arrive .sky-stars { animation: stars-in 2.6s ease .2s both; }
@keyframes stars-in { from { opacity: 0; } }
.town-lit .w { fill: #ffcf7a; transition: opacity .9s ease; }
.night .town-lit .w { animation: window-on .6s ease backwards; animation-delay: calc(.6s + var(--i) * .32s); }
.town-lit .w.off { opacity: .08; }
@keyframes window-on { from { opacity: 0; } }
.sky-twinkles { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.night .sky-twinkles { opacity: 1; }
.sky-twinkles i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; scale: var(--s);
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, .55); animation: twinkle var(--d) ease-in-out var(--o) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.sky-meteor { position: absolute; width: 110px; height: 1.5px; border-radius: 2px; pointer-events: none; opacity: 0; rotate: 24deg;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95)); }
.sky-meteor.go { animation: meteor .95s cubic-bezier(.3, 0, .6, 1) both; }
@keyframes meteor { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 100% { opacity: 0; translate: 180px 80px; } }
@media (prefers-reduced-motion: reduce) {
  .sky-twinkles i, .night .town-lit .w, .night-arrive .sky-arc .body, .night-arrive .sun-glow, .night-arrive .sky-stars { animation: none; }
  .sky-meteor { display: none; }
}

/* quieter sun and moon: present, not the focus */
.sky-hint { display: none !important; }
.body .disc { fill: #fff3d6; opacity: .78; }
.body .halo { fill: rgba(255, 243, 214, .14); }
.body .moon { fill: #e6e4dc; opacity: .7; }
.sun-glow { width: 260px; height: 260px; }
/* sky:end */