/* ===========================================================================
   Dark theme + the shared UX primitives' styling.

   The dark palette is a separate set of token values, not a filter: inverting
   a warm rose page produces a sickly green, and `filter: invert` breaks every
   photograph and gradient on the way past.
   ========================================================================= */

/* The dark values, applied either by explicit choice or by system preference
   when the user has not chosen. Both selectors carry the same block so there
   is one definition of what dark means. */
:root[data-theme="dark"],
:root:not([data-theme="light"]):not([data-theme="dark"]) {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --brand-50:  #2b1027;
    --brand-100: #3a1634;
    --brand-200: #4d2045;
    --brand-300: #7d3572;
    --brand-400: #b355a6;
    --brand-500: #e067d0;
    --brand-600: #cc42bd;
    --brand-700: #ab2f9f;
    --brand-900: #f0b6e6;

    --bg:        #150911;
    --surface:   #1e1019;
    --surface-2: #261520;
    --chat-bg:   #22101d;
    --line:      #37202f;
    --line-soft: #2b1825;

    --ink:   #f7eef4;
    --ink-2: #cbb2c3;
    --ink-3: #9a8291;
    --ink-4: #6d5766;

    --offline: #5e4d59;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, .6);

    /* Panel treatment — see the depth pass below. Declared with the rest of the
       dark palette so there is one place where "dark" is defined. */
    --panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 46%);
    --panel-line: rgba(255, 255, 255, .09);
    --panel-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .07) inset;
    --ground: radial-gradient(120% 80% at 50% -20%, rgba(204, 66, 189, .2), transparent 60%),
              radial-gradient(80% 60% at 110% 6%, rgba(150, 32, 143, .18), transparent 56%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --brand-50:  #2b1027;
  --brand-100: #3a1634;
  --brand-200: #4d2045;
  --brand-300: #7d3572;
  --brand-400: #b355a6;
  --brand-500: #e067d0;
  --brand-600: #cc42bd;
  --brand-700: #ab2f9f;
  --brand-900: #f0b6e6;

  --bg:        #150911;
  --surface:   #1e1019;
  --surface-2: #261520;
  --chat-bg:   #22101d;
  --line:      #37202f;
  --line-soft: #2b1825;

  --ink:   #f7eef4;
  --ink-2: #cbb2c3;
  --ink-3: #9a8291;
  --ink-4: #6d5766;

  --offline: #5e4d59;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, .6);

    /* Panel treatment — see the depth pass below. Declared with the rest of the
       dark palette so there is one place where "dark" is defined. */
    --panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 46%);
    --panel-line: rgba(255, 255, 255, .09);
    --panel-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .07) inset;
    --ground: radial-gradient(120% 80% at 50% -20%, rgba(204, 66, 189, .2), transparent 60%),
              radial-gradient(80% 60% at 110% 6%, rgba(150, 32, 143, .18), transparent 56%);
}

/* Dark surfaces that are painted, not tokenised. */
:root[data-theme="dark"] .lp-card,
:root[data-theme="dark"] .lp-steps li,
:root[data-theme="dark"] .lp-price__card,
:root[data-theme="dark"] .auth__card,
:root[data-theme="dark"] .ad-tablewrap { background: var(--surface); }
:root[data-theme="dark"] .badge--regular { background: #3a2333; color: var(--ink-2); }
:root[data-theme="dark"] .ad-pill--ok { background: #143d2a; color: #7fdcae; }
:root[data-theme="dark"] .ad-pill--warn { background: #45330c; color: #f2ce78; }
:root[data-theme="dark"] .ad-pill--off { background: #33232f; color: var(--ink-3); }
:root[data-theme="dark"] .ad-alert { background: #3d1220; border-color: #6d2136; color: #ffb3c2; }
:root[data-theme="dark"] .ad-alert--warn { background: #3b2c08; border-color: #6a5313; color: #f0d18a; }

/* Density: one lever, applied where it actually helps scanning. */
:root[data-density="compact"] .ad-table td { padding: 7px 11px; }
:root[data-density="compact"] .ad-table th { padding: 8px 11px; }
:root[data-density="compact"] .conv { padding-block: 8px; }
:root[data-density="compact"] .c-req { padding: 11px; margin-bottom: 9px; }
:root[data-density="compact"] .ad-stat { padding: 11px 13px; }

/* The in-app motion override sits on top of the OS setting. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------ toast */
.ux-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200;
  transform: translateX(-50%) translateY(16px);
  display: flex; align-items: center; gap: 14px;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 16px; border-radius: 13px;
  background: #241021; color: #fff; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
  opacity: 0; transition: opacity .18s, transform .18s; overflow: hidden;
}
.ux-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.ux-toast--err { background: #8c1c33; }
.ux-toast__text { flex: 1; line-height: 1.6; }
.ux-toast__undo {
  flex: none; border: 0; background: rgba(255, 255, 255, .16); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 800; padding: 6px 12px;
  border-radius: 999px; cursor: pointer;
}
.ux-toast__undo:hover { background: rgba(255, 255, 255, .28); }
.ux-toast__bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--brand-400); transform-origin: left; transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) { .ux-toast { transition: none; } }

/* -------------------------------------------------------------- skeletons */
.ux-sk {
  display: block; border-radius: 6px; margin-bottom: 7px;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
  background-size: 400% 100%; animation: ux-shimmer 1.3s ease-in-out infinite;
}
@keyframes ux-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (prefers-reduced-motion: reduce) { .ux-sk { animation: none; } }
.ux-sk--block { border-radius: var(--radius); }
.ux-sk--media { aspect-ratio: 3 / 4; width: 100%; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 10px; }
.ux-sk--avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; margin: 0; }
.ux-sk-card { background: var(--surface); border-radius: var(--radius); padding: 0 0 12px; overflow: hidden; box-shadow: var(--shadow-1); }
.ux-sk-card .ux-sk:not(.ux-sk--media) { margin-left: 12px; margin-right: 12px; }
.ux-sk-rows { padding: 4px 12px; }
.ux-sk-row { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.ux-sk-row__body { flex: 1; }
.ux-sk-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px 12px; }

/* -------------------------------------------------------- pull to refresh */
.ux-ptr {
  position: absolute; top: -46px; left: 50%; margin-left: -18px; z-index: 30;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-2);
  display: grid; place-items: center; transition: transform .2s;
}
.ux-ptr__spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--brand-500);
}
.ux-ptr.is-armed .ux-ptr__spin { border-top-color: var(--brand-700); transform: rotate(180deg); }
.ux-ptr.is-loading .ux-ptr__spin { animation: ux-spin .7s linear infinite; }
@keyframes ux-spin { to { transform: rotate(360deg) } }

/* ---------------------------------------------------------------- offline */
.ux-offline {
  position: fixed; left: 50%; top: 0; z-index: 210; transform: translate(-50%, -100%);
  padding: 9px 18px; border-radius: 0 0 12px 12px;
  background: #4a3340; color: #ffe9c2; font-size: 12.5px; font-weight: 700;
  transition: transform .22s; box-shadow: var(--shadow-2);
}
.ux-offline.is-on { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- install */
.ux-install {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 190;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-3); border: 1px solid var(--line);
  transform: translateY(140%); transition: transform .28s;
}
.ux-install.is-on { transform: translateY(0); }
.ux-install__body { flex: 1; display: grid; gap: 2px; }
.ux-install__body b { font-size: 14px; }
.ux-install__body span { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.ux-install__go {
  flex: none; border: 0; cursor: pointer; border-radius: 999px; padding: 9px 16px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; font: inherit; font-size: 13px; font-weight: 800;
}
.ux-install__x { flex: none; border: 0; background: none; color: var(--ink-4); font-size: 15px; cursor: pointer; padding: 4px; }

/* ------------------------------------------------------------- shortcuts */
.ux-help {
  position: fixed; inset: 0; z-index: 220; display: grid; place-items: center;
  background: rgba(20, 8, 18, .5); backdrop-filter: blur(3px); padding: 20px;
}
.ux-help__panel {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  width: min(460px, 100%); max-height: 80vh; overflow-y: auto; padding: 20px 22px;
}
.ux-help__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ux-help__x { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ink-3); }
.ux-help dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 13.5px; }
.ux-help dt { margin: 0; }
.ux-help dd { margin: 0; color: var(--ink-2); }
.ux-help kbd {
  display: inline-block; min-width: 22px; text-align: center;
  padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface-2); font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
}

/* ----------------------------------------------------------- countdown */
.ux-countdown.is-urgent { color: var(--danger); font-weight: 800; }
.ux-countdown.is-expired { color: var(--ink-4); }

/* ------------------------------------------------------- reveal on scroll */
/* Scoped to .js: without it, a failed script or a crawler with JS disabled
   would leave every revealed section permanently invisible. */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease-out, transform .6s ease-out; }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------- preference UI */
.ux-prefs { display: grid; gap: 4px; }
.ux-prefrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px; background: var(--surface); border-bottom: 1px solid var(--line-soft);
}
.ux-prefrow:last-child { border-bottom: 0; }
.ux-prefrow__label { font-size: 14px; font-weight: 600; }
.ux-prefrow__help { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.6; }
.ux-seg { display: flex; gap: 3px; padding: 3px; background: var(--line-soft); border-radius: 10px; flex: none; }
.ux-seg button {
  border: 0; cursor: pointer; border-radius: 8px; padding: 6px 11px;
  background: transparent; color: var(--ink-3); font: inherit; font-size: 12px; font-weight: 700;
}
.ux-seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }

/* ===========================================================================
   Depth pass — bringing the app surfaces up to the sign-up screen's richness.

   The recipe from that screen: a lit ground instead of a flat fill, panels with
   a top sheen and a hairline that catches light, and a glow under anything that
   is the primary action.

   Light is the default; dark overrides the four tokens in its own palette block
   above. Writing the light values inline here and only overriding them for
   [data-theme="dark"] would miss the system-preference case, which is how the
   grey sheen ended up on dark cards the first time.
   ========================================================================= */

:root {
  --panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 42%);
  --panel-line: var(--line-soft);
  --panel-shadow: var(--shadow-1), 0 1px 0 rgba(255, 255, 255, .6) inset;
  --ground: radial-gradient(120% 80% at 50% -20%, var(--brand-50), transparent 62%),
            radial-gradient(80% 60% at 110% 8%, var(--brand-50), transparent 58%);
}

/* `background-attachment: fixed` anchors the glow while content scrolls, which
   is what stops it reading as a coloured rectangle. */
body:has(.app), body:has(.ad-shell) {
  background-image: var(--ground);
  background-attachment: fixed;
}

.app .card,
.app .listgroup,
.app .ordercard,
.app .receipt,
.ad-tablewrap,
.ad-stat,
.ad-settings,
.c-idcard, .c-req, .c-sched, .c-txs, .c-earncard {
  background-image: var(--panel-sheen);
  border: 1px solid var(--panel-line);
  box-shadow: var(--panel-shadow);
}

/* Primary actions get a glow in their own colour — the single strongest cue
   the sign-up screen uses. */
.app .btn--primary,
.ad-btn--primary,
.auth__submit,
.c-standby.is-on {
  box-shadow: 0 10px 26px rgba(204, 66, 189, .34);
}
.app .btn--primary:active { box-shadow: 0 4px 14px rgba(204, 66, 189, .4); }
.app .btn--gold { box-shadow: 0 10px 26px rgba(201, 162, 39, .3); }

/* Chrome floats over content instead of sitting beside it. */
.app .topbar, .app .tabbar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(18px) saturate(170%);
}
.app .tabbar { border-top: 1px solid var(--line-soft); }
.app .tab.is-active .tab__icon { filter: drop-shadow(0 3px 10px rgba(204, 66, 189, .45)); }

/* Section headings read as structure when they carry a mark. */
.app .section__title { position: relative; padding-left: 12px; }
.app .section__title::before {
  content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
  width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-400), var(--brand-700));
}

/* The install card sat on top of the tab bar, covering navigation. */
body:has(.app) .ux-install {
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
}