/* ============================================================================
   OFFTO · Travel Experts panel — the VO layer
   ----------------------------------------------------------------------------
   Loaded AFTER assets/css/offto.css. It adds nothing that offto.css already
   has: only the expert-panel identity (one extra accent, the hero band, the
   balance card, the donut/legend pair and the publish rail) plus the handful
   of small pieces the expert screens need.

   Same rules as the design system: @layer, oklch(), color-mix(), logical
   properties only — so `dir="rtl"` keeps being the whole RTL story.
   ========================================================================= */

@layer tokens {
  :root {
    /* The one colour that says "this is the experts' panel, not the admin".
       Same ink hue family as the logo wordmark (272) pushed to violet, so it
       sits beside the logo teal instead of fighting it. */
    --vo:            oklch(50% 0.105 240); /* OFFTO brand blue #006DA2 */
    --vo-strong:     oklch(44% 0.105 240);
    --vo-soft:       oklch(95.5% 0.022 240);
    --vo-contrast:   oklch(99% 0 0);

    /* money — earnings, payouts, "starting from" */
    --gold:          oklch(66% 0.130 78);
    --gold-soft:     oklch(96% 0.045 82);

    --vo-hero-1:     color-mix(in oklab, var(--vo) 92%, black 8%);
    --vo-hero-2:     color-mix(in oklab, var(--brand) 88%, black 6%);
  }

  :root[data-theme="dark"] {
    --vo:            oklch(72% 0.105 240);
    --vo-strong:     oklch(78% 0.100 240);
    --vo-soft:       color-mix(in oklab, oklch(60% 0.110 240) 20%, transparent);
    --vo-contrast:   oklch(20% 0.03 240);

    --gold:          oklch(78% 0.125 82);
    --gold-soft:     color-mix(in oklab, oklch(70% 0.130 82) 18%, transparent);

    --vo-hero-1:     color-mix(in oklab, oklch(42% 0.100 240) 88%, black 12%);
    --vo-hero-2:     color-mix(in oklab, oklch(46% 0.095 199) 88%, black 12%);
  }
}

@layer components {

  /* ------------------------------------------------------------------ ACCENT
     .stat already reads --stat-accent, so a variant is one line. */
  .stat--vo   { --stat-accent: var(--vo); }
  .stat--gold { --stat-accent: var(--gold); }

  .badge.is-vo {
    background: var(--vo-soft);
    color: color-mix(in oklab, var(--vo) 78%, var(--text));
    border-color: color-mix(in oklab, var(--vo) 26%, transparent);
  }
  .badge.is-gold {
    background: var(--gold-soft);
    color: color-mix(in oklab, var(--gold) 72%, var(--text));
    border-color: color-mix(in oklab, var(--gold) 28%, transparent);
  }
  .c-vo   { color: var(--vo); }
  .c-gold { color: color-mix(in oklab, var(--gold) 80%, var(--text)); }

  .btn-vo {
    background: var(--vo);
    color: var(--vo-contrast);
    border-color: transparent;
    box-shadow: var(--shadow-xs);
  }
  .btn-vo:hover { background: var(--vo-strong); }

  /* --------------------------------------------------------------- BRAND TAG
     The chip under the logo in the sidebar: this is the experts' build. */
  .vo-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .45rem;
    border-radius: var(--r-pill);
    background: var(--vo-soft);
    color: color-mix(in oklab, var(--vo) 80%, var(--text));
    border: 1px solid color-mix(in oklab, var(--vo) 24%, transparent);
    font-size: var(--fs-2xs);
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  .sidebar__brand .brand-lockup { min-inline-size: 0; }
  .vo-brand { display: grid; gap: .3rem; min-inline-size: 0; }

  /* the active page in the sidebar wears the expert accent, not the brand teal —
     the one place the difference between the two panels is unmissable */
  .sidebar .nav-link[aria-current="page"],
  .sidebar .nav-link.is-active {
    background: color-mix(in oklab, var(--vo) 12%, transparent);
    color: var(--vo-strong);
  }
  .sidebar .nav-link[aria-current="page"] > :is(.icon, [data-icon]),
  .sidebar .nav-link.is-active     > :is(.icon, [data-icon]) { color: var(--vo); }
  .sidebar .nav-link[aria-current="page"]::before,
  .sidebar .nav-link.is-active::before { background: var(--vo); }
  .sidebar .nav-link:hover > :is(.icon, [data-icon]) { color: var(--vo); }
  /* the rail hides text, so hide the chip with it */
  .app[data-rail="true"] .sidebar:not(:hover) .vo-tag { display: none; }

  /* -------------------------------------------------------------- HERO BAND
     The dashboard opener: who you are, what you earned, what to do next. */
  .vo-hero {
    position: relative;
    overflow: clip;
    border-radius: var(--r-xl);
    padding: clamp(1.1rem, .8rem + 1vw, 1.7rem);
    color: oklch(99% 0 0);
    background: var(--vo-hero-1);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .vo-hero::before {
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -8%;
    inline-size: 22rem; block-size: 22rem;
    border-radius: 50%;
    background: oklch(100% 0 0 / .07);
    pointer-events: none;
  }
  .vo-hero__who { display: flex; align-items: center; gap: .8rem; min-inline-size: 0; }
  .vo-hero__av {
    inline-size: 3.1rem; block-size: 3.1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: oklch(100% 0 0 / .16);
    border: 1px solid oklch(100% 0 0 / .28);
    font-weight: 800;
    font-size: var(--fs-md);
    flex-shrink: 0;
    overflow: clip;
  }
  .vo-hero__av img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .vo-hero h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; color: inherit; }
  .vo-hero p { color: oklch(100% 0 0 / .78); font-size: var(--fs-sm); margin-block-start: .15rem; }
  .vo-hero__facts {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-block-start: .9rem;
  }
  .vo-hero__pill {
    display: inline-flex; align-items: center; gap: .38rem;
    padding: .3rem .6rem;
    border-radius: var(--r-pill);
    background: oklch(100% 0 0 / .14);
    border: 1px solid oklch(100% 0 0 / .2);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .vo-hero__pill .icon { inline-size: .85rem; block-size: .85rem; }
  .vo-hero__side { display: grid; gap: .55rem; justify-items: stretch; min-inline-size: 13.5rem; }
  .vo-hero__bal {
    padding: .7rem .85rem;
    border-radius: var(--r-md);
    background: oklch(100% 0 0 / .13);
    border: 1px solid oklch(100% 0 0 / .22);
  }
  .vo-hero__bal small { display: block; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: oklch(100% 0 0 / .72); }
  .vo-hero__bal b { display: block; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
  .vo-hero .btn-light {
    background: oklch(100% 0 0 / .95);
    color: color-mix(in oklab, var(--vo) 72%, oklch(25% .03 240));
    border-color: transparent;
    font-weight: 800;
  }
  .vo-hero .btn-light:hover { background: oklch(100% 0 0); }
  .vo-hero .btn-wire {
    background: oklch(100% 0 0 / .1);
    color: oklch(99% 0 0);
    border: 1px solid oklch(100% 0 0 / .34);
  }
  .vo-hero .btn-wire:hover { background: oklch(100% 0 0 / .2); }

  @container page (max-width: 46rem) {
    .vo-hero { grid-template-columns: 1fr; }
    .vo-hero__side { min-inline-size: 0; }
  }

  /* ------------------------------------------------------- SIDEBAR BALANCE */
  .vo-bal {
    padding: .7rem .75rem;
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--vo) 13%, var(--surface));
    border: 1px solid var(--border-soft);
    margin-block-end: .55rem;
    display: grid; gap: .1rem;
  }
  .vo-bal small { font-size: var(--fs-2xs); color: var(--text-3); font-weight: 700; }
  .vo-bal b { font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums; }
  .vo-bal .row { justify-content: space-between; align-items: center; }
  .app[data-rail="true"] .sidebar:not(:hover) .vo-bal { display: none; }

  /* ---------------------------------------------------------------- DONUTS */
  .vo-ring { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
  .vo-ring svg { inline-size: 8.6rem; block-size: 8.6rem; flex-shrink: 0; }
  .vo-ring__mid { font-variant-numeric: tabular-nums; }
  .vo-legend { display: grid; gap: .45rem; min-inline-size: 0; }
  .vo-legend__row {
    display: grid;
    grid-template-columns: .6rem minmax(0, 1fr) auto;
    gap: .5rem; align-items: center;
    font-size: var(--fs-sm);
  }
  .vo-legend__sw { inline-size: .6rem; block-size: .6rem; border-radius: 3px; }
  .vo-legend__n { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-2); }
  @container page (max-width: 30rem) {
    .vo-ring { grid-template-columns: 1fr; justify-items: center; }
  }

  /* --------------------------------------------------------- PUBLISH / LINK */
  .vo-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem;
    align-items: center;
  }
  .vo-link input {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  /* ------------------------------------------------------------ MINI TABLE
     Dense two/three column readouts inside a card (latest packages, payouts). */
  .vo-mini { display: grid; gap: .1rem; }
  .vo-mini__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
    padding: .55rem .15rem;
    border-block-end: 1px dashed var(--border-soft);
  }
  .vo-mini__row:last-child { border-block-end: 0; }
  .vo-mini__ttl { font-weight: 700; font-size: var(--fs-sm); }
  .vo-mini__sub { font-size: var(--fs-xs); color: var(--text-3); }
  .vo-mini__v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* -------------------------------------------------------- SELECT ON FOCUS
     Upstream bug, fixed here rather than in offto.css so the design system
     stays untouched (it is worth pushing back into it).

     offto.css draws the select's caret with two 5px gradients, then

         .input:focus, .select:focus, .textarea:focus { background: var(--surface); }

     uses the `background` SHORTHAND — which resets background-size to `auto`
     and background-repeat to `repeat`. In LTR that drops the caret; in RTL the
     direction-specific rule puts the gradients back but at auto size, so they
     repeat across the whole control and paint it in `currentColor`: a black box
     on a light page and a white one on a dark page. Exactly inverted, and only
     while the field has focus — i.e. while its list is open.

     Re-pin all four background longhands for a focused select, per direction. */
  html .select:focus,
  html .select:focus-visible {
    background-color: var(--surface);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 1.15rem, calc(100% - .72rem) 1.15rem;
  }
  html[dir="rtl"] .select:focus,
  html[dir="rtl"] .select:focus-visible {
    background-position: 1.05rem 1.15rem, .72rem 1.15rem;
    background-image: linear-gradient(135deg, currentColor 50%, transparent 50%),
                      linear-gradient(45deg, transparent 50%, currentColor 50%);
  }
  /* the popup itself: paint the rows from the theme, and let the browser draw
     the list chrome in the page's scheme rather than the OS's */
  select.select, select { color-scheme: inherit; }
  .select option, .select optgroup {
    background-color: var(--surface);
    color: var(--text);
  }

  /* --------------------------------------------------------------- HELPERS
     Only what offto.css does not already ship. Everything else — .row/.col
     and their --g gaps, .fs-*, .fw-*, .c-muted, .sep, .t-center/.t-end — is
     the design system's and is deliberately not redefined here. */
  .ltr { direction: ltr; }
  .fs-2xs { font-size: var(--fs-2xs); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

  /* ================================================================
     AIRY WHITE — graduated design
     Flat white hero, large typographic name + balance, clean borders.
     All overrides scoped here so they're easy to locate and revert.
     ================================================================ */

  /* --- Hero band: remove color, go flat white --------------------- */
  .vo-hero {
    background: transparent;
    color: var(--text);
    box-shadow: none;
    border-radius: 0;
    border-block-end: 1px solid var(--border-soft);
    padding-block: clamp(2rem, 1rem + 3vw, 3.25rem);
    padding-inline: 0;
    margin-block-end: 0;
  }
  .vo-hero::before { display: none; }

  /* Avatar hidden in hero — identity lives in the sidebar */
  .vo-hero__av { display: none; }
  .vo-hero__who { gap: 0; flex-direction: column; align-items: flex-start; }

  /* Greeting line above the name */
  .vo-hero__greeting {
    font-size: var(--fs-xs);
    font-weight: 300;
    color: var(--text-3);
    margin-block-end: .4rem;
    display: block;
  }

  /* Name: large, tight tracking */
  .vo-hero h1 {
    font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: var(--text);
    margin-block: 0;
  }

  /* Sub-heading paragraph */
  .vo-hero p {
    color: var(--text-3);
    font-weight: 300;
    font-size: var(--fs-sm);
    margin-block-start: .55rem;
  }

  /* Fact pills: adapt to light background */
  .vo-hero__pill {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text-2);
    font-weight: 500;
  }

  /* Balance: large number, right-aligned text block */
  .vo-hero__bal {
    background: transparent;
    border: none;
    padding: 0;
    text-align: end;
    display: grid;
    gap: .25rem;
  }
  .vo-hero__bal small {
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
  }
  .vo-hero__bal b {
    font-size: clamp(2rem, 1.2rem + 3vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
  }

  /* Wallet link below balance */
  .vo-hero__bal-link {
    font-size: var(--fs-xs);
    color: var(--text-3);
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
    margin-block-start: .5rem;
    display: inline-block;
  }
  .vo-hero__bal-link:hover { color: var(--text-2); }

  /* Action buttons: adapt to light background */
  .vo-hero .btn-light {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    font-weight: 600;
  }
  .vo-hero .btn-light:hover { background: var(--surface-3); }
  .vo-hero .btn-wire {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
  }
  .vo-hero .btn-wire:hover { background: var(--surface-2); color: var(--text); }

  /* Stat cards: neutral accent (no gold/teal/green/blue tinting) */
  .stat--gold,
  .stat--vo,
  .stat--success,
  .stat--info,
  .stat--warning,
  .stat--danger,
  .stat--brand,
  .stat--accent { --stat-accent: var(--text-3); }

  /* --- Auth pages (login / password reset): flat white brand side --- */
  .auth__aside {
    background: var(--surface);
    color: var(--text);
    border-inline-end: 1px solid var(--border-soft);
  }
  .auth__aside::before {
    opacity: 1;
    background-image:
      linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
      linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  }
  .auth__aside h1 {
    font-weight: 600;
    letter-spacing: -.04em;
    color: var(--text);
  }
  .auth__aside p { color: var(--text-3); font-weight: 300; }
  .auth__point { color: var(--text-2); font-weight: 500; }
  .auth__point .icon-wrap {
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    color: var(--text-2);
    backdrop-filter: none;
  }
  .auth__foot { color: var(--text-3); }
}