/* =========================================================================
   ORBEVA · COMPONENTS — the canonical, token-built component library.
   Link AFTER tokens.css + base.css:
     <link rel="stylesheet" href="/styles/tokens.css">
     <link rel="stylesheet" href="/styles/base.css">
     <link rel="stylesheet" href="/styles/components.css">

   Naming: .block  .block__part  .block--variant ; state via data-/aria-.
   Every value references a token — zero magic numbers, one meaning per colour
   (--pos = gain only, --neg = loss/risk only, --warn = caution, --info/--accent
   = neutral data / action). This file is the single source these patterns
   collapse into; see /components.html for the living reference. Migration is
   additive — pages adopt these class names one component at a time.
   ========================================================================= */

/* ---- Buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);
  min-height:var(--tap);padding:0 var(--sp-4);border-radius:var(--r-sm);
  font-size:var(--text-sm);font-weight:700;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  /* --line-strong: an interactive control's edge conveys "this is a button" → AA non-text 3:1 */
  border:1px solid var(--line-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .12s ease,filter .15s ease}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn:disabled{opacity:.5;pointer-events:none}
.btn--primary{color:var(--accent-ink);border-color:transparent;
  background:linear-gradient(180deg,var(--violet),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px -10px var(--accent)}
.btn--ghost{background:var(--surface-2);box-shadow:none}
.btn--block{display:flex;width:100%}

/* ---- Card -------------------------------------------------------------- */
.card{padding:var(--sp-5);border-radius:var(--r-xl);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 80%,#fff 4%),var(--surface));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 16px 32px -22px rgba(0,0,0,.9)}
.card--inset{background:var(--surface-2);box-shadow:none}
/* The two commonest chrome overrides widgets were hand-rolling inline (the inline-style drift
   widget-style-golden ratchets). Self-sufficient — they re-declare the border so the variant is
   correct regardless of which page-level `.card` base applies (some pages still ship a legacy
   `.card` with a fainter border; these variants pin the canonical --line border). */
.card--outlined{border:1px solid var(--line)}
.card--toned{border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.card--accent{border-left:3px solid var(--accent);background:linear-gradient(180deg,var(--accent-tint),transparent 62%)}
.card--pos{border-left:3px solid var(--pos);background:linear-gradient(180deg,var(--pos-tint),transparent 62%)}
.card--warn{border-left:3px solid var(--warn);background:linear-gradient(180deg,var(--warn-tint),transparent 62%)}
.card--info{border-left:3px solid var(--info);background:linear-gradient(180deg,var(--info-tint),transparent 62%)}
.card--locked{filter:saturate(.6);position:relative;overflow:hidden}

/* ---- Eyebrow / section label ------------------------------------------ */
.eyebrow{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--text-2xs);font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-faint);margin:var(--sp-5) 0 var(--sp-3)}
.eyebrow__action{font-weight:700;color:var(--accent);text-transform:none;letter-spacing:0}

/* ---- Metric (the money number) ---------------------------------------- */
.metric{font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.metric--hero{font-size:var(--text-3xl)}
.metric--lg{font-size:var(--text-2xl)}
.metric--md{font-size:var(--text-xl)}
.metric--pos{color:var(--pos)} .metric--neg{color:var(--neg)}
.metric--warn{color:var(--warn)} .metric--info{color:var(--info)} .metric--accent{color:var(--accent)}
.metric__unit{font-size:var(--text-sm);font-weight:600;color:var(--ink-dim);margin-left:2px}

/* ---- Pills / badges / chips ------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:var(--sp-1);padding:3px var(--sp-2);
  border-radius:var(--r-pill);font-size:var(--text-2xs);font-weight:800;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-dim)}
.pill--pos{color:var(--pos);background:var(--pos-tint);border-color:transparent}
.pill--warn{color:var(--warn);background:var(--warn-tint);border-color:transparent}
.pill--neg{color:var(--neg);background:var(--neg-tint);border-color:transparent}
.pill--accent{color:var(--accent);background:var(--accent-tint);border-color:transparent}
.chip{position:relative;display:inline-flex;align-items:center;gap:var(--sp-1);min-height:34px;padding:0 var(--sp-3);
  border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:700;color:var(--ink-dim);
  background:var(--surface-2);border:1px solid var(--line);cursor:pointer}
/* >=44px hit target without growing the 34px visual (out of flow, no overflow). */
.chip::before{content:"";position:absolute;inset:-5px}
.chip[aria-pressed=true]{color:var(--accent-ink);background:var(--accent);border-color:transparent}

/* ---- Bar / meter (the one progress bar to rule the six) --------------- */
/* The unfilled track is --surface-2 (barely distinct from the card it sits in). A 1px --line-strong
   edge gives the EMPTY track an AA non-text 3:1 boundary so the "remaining" portion stays visible to
   low-vision users even at 0% fill — without recolouring the fill semantics. */
.bar{position:relative;height:8px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line-strong);overflow:hidden}
.bar--lg{height:12px} .bar--sm{height:6px}
.bar__fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--accent)}
.bar--pos .bar__fill{background:var(--pos)} .bar--warn .bar__fill{background:var(--warn)}
.bar--neg .bar__fill{background:var(--neg)} .bar--info .bar__fill{background:var(--info)}
/* over-budget honesty: a fill > 100% shows the overflow segment in --neg */
.bar__over{position:absolute;top:0;bottom:0;right:0;background:var(--neg);border-radius:inherit}

/* ---- Row (label left, value right, hairline) -------------------------- */
.row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row__body{flex:1;min-width:0}
.row__title{font-size:var(--text-md);font-weight:600;color:var(--ink)}
.row__sub{font-size:var(--text-xs);color:var(--ink-dim)}
.row__icon{flex:none;display:inline-flex;align-items:center}
.row__value{font-weight:800;font-variant-numeric:tabular-nums;flex:none}

/* ---- Note / callout (one component, four meanings) -------------------- */
.note{display:flex;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r-md);
  font-size:var(--text-sm);line-height:1.5;color:var(--ink-dim);
  background:var(--surface-2);border:1px solid var(--line)}
.note--info{background:var(--info-tint);border-color:transparent}
.note--warn{background:var(--warn-tint);border-color:transparent;color:var(--ink)}
.note--pos{background:var(--pos-tint);border-color:transparent}
.note--accent{background:var(--accent-tint);border-color:transparent}

/* ---- Segmented control ------------------------------------------------ */
/* --line-strong on form-like control edges (segmented control, stepper, switch): the boundary
   communicates "this is an interactive control / its on-off state" → AA non-text 3:1. */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-strong)}
.seg button{position:relative;min-height:32px;padding:0 var(--sp-4);border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--ink-dim);font-size:var(--text-xs);font-weight:700}
/* >=44px hit target (visual stays 32px; the 3px .seg padding means -6px reaches ~44px). */
.seg button::before{content:"";position:absolute;inset:-6px}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}

/* ---- Stepper (± value) ------------------------------------------------ */
.stepper{display:inline-flex;align-items:center;gap:var(--sp-2)}
.stepper button{width:var(--tap);height:var(--tap);border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink);font-size:18px;font-weight:700}
.stepper__value{min-width:48px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}

/* ---- Switch ----------------------------------------------------------- */
.switch{width:46px;height:28px;border-radius:var(--r-pill);background:var(--surface-2);
  border:1px solid var(--line-strong);position:relative;flex:none;transition:background .15s ease}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--ink);transition:transform .18s ease}
.switch[aria-checked=true]{background:var(--accent);border-color:transparent}
.switch[aria-checked=true]::after{transform:translateX(18px);background:var(--accent-ink)}

/* Scroll-Driven Animations: Parallax & Fade for horizontal scrollers */
@supports (animation-timeline: view()) {
  .carousel-item {
    animation: fade-shrink linear both;
    animation-timeline: view(inline);
  }
  @keyframes fade-shrink {
    0% {
      opacity: 0.3;
      transform: scale(0.85);
    }
    15% {
      opacity: 1;
      transform: scale(1);
    }
    85% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0.3;
      transform: scale(0.85);
    }
  }
}