/* Agro Automotive component styles. Every value comes from tokens.css. */
[class^="ag-"], [class*=" ag-"] { box-sizing: border-box; }

/* Text helpers that tokens.css type classes cannot express */
.label { text-transform: uppercase; }
.data-xl, .data-lg, .data-md { font-variant-numeric: tabular-nums; }

/* Button */
.ag-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: none; color: var(--ink); cursor: pointer;
  font: 700 17px/22px var(--font-sans); -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(.2, .8, .2, 1), background-color 140ms ease, opacity 140ms ease;
}
.ag-btn:active { transform: scale(.97); }
.ag-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ag-btn--primary { background: var(--ember); color: var(--on-ember); }
.ag-btn--primary:active { background: var(--ember-pressed); }
.ag-btn--secondary { background: var(--surface-raised); border-color: var(--line-strong); }
.ag-btn--secondary:active { background: var(--surface-overlay); }
.ag-btn--plain { color: var(--ember); padding: 0 var(--space-3); }
.ag-btn--plain:active { opacity: var(--opacity-pressed); transform: none; }
.ag-btn--danger { background: var(--danger-subtle); border-color: var(--danger); color: var(--danger); }
.ag-btn--block { display: flex; width: 100%; }
.ag-btn[disabled] { opacity: var(--opacity-disabled); pointer-events: none; }

/* Card and stat */
.ag-card {
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4); box-shadow: var(--shadow-card);
}
.ag-stat__label { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ag-stat__value { margin-top: var(--space-1); font: 700 44px/48px var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ag-stat__value--md { font-size: 28px; line-height: 32px; letter-spacing: -.01em; }
.ag-stat__unit { margin-left: var(--space-1); font: 600 17px/22px var(--font-mono); color: var(--ink-muted); letter-spacing: 0; }
.ag-stat__meta { margin-top: var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* Inset grouped list and row */
.ag-list { margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ag-row { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: var(--space-3) var(--space-4); color: var(--ink); font: 400 17px/22px var(--font-sans); cursor: pointer; }
.ag-row + .ag-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--space-4); border-top: 1px solid var(--line); }
.ag-row:active { background: var(--surface-overlay); }
.ag-row__icon { flex: none; display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-sm); background: var(--ember-subtle); color: var(--ember); }
.ag-row__body { flex: 1; min-width: 0; }
.ag-row__title { font-weight: 600; }
.ag-row__sub { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ag-row__value { font: 600 17px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.ag-row__chev { flex: none; color: var(--ink-faint); }

/* Badge */
.ag-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); font: 700 12px/16px var(--font-sans); letter-spacing: .04em; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink-muted); }
.ag-badge--ember { background: var(--ember-subtle); border-color: transparent; color: var(--ember); }
.ag-badge--success { background: var(--success-subtle); border-color: transparent; color: var(--success); }
.ag-badge--warning { background: var(--warning-subtle); border-color: transparent; color: var(--warning); }
.ag-badge--danger { background: var(--danger-subtle); border-color: transparent; color: var(--danger); }
.ag-badge--info { background: var(--info-subtle); border-color: transparent; color: var(--info); }

/* Field */
.ag-field { display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.ag-field__label { font: 600 15px/20px var(--font-sans); }
.ag-field__control { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); padding: 0 var(--space-4); background: var(--surface-sunken); border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.ag-field__control:focus-within { border-color: var(--ember); outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.ag-field__input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 600 17px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.ag-field__input::placeholder { color: var(--ink-faint); }
.ag-field__suffix { font: 400 15px/20px var(--font-sans); color: var(--ink-muted); }
.ag-field__hint { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.ag-field__error { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--danger); }
.ag-field--error .ag-field__control { border-color: var(--danger); }

/* Tab bar */
.ag-tabbar {
  display: flex; justify-content: space-around; align-items: flex-start;
  min-height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
  padding: var(--space-1) var(--space-2) env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--surface-overlay) 82%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-thick)); backdrop-filter: blur(var(--blur-thick));
  border-top: 1px solid var(--line);
}
.ag-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: var(--tap-min); min-height: var(--tap-min); padding: 2px 0; border: 0; background: none; color: var(--ink-muted); font: 600 11px/13px var(--font-sans); cursor: pointer; }
.ag-tab[aria-current="page"] { color: var(--ember); }
.ag-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; border-radius: var(--radius-sm); }

/* Segmented control */
.ag-seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ag-seg__item { min-width: var(--tap-min); min-height: 36px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); font: 600 15px/20px var(--font-sans); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.ag-seg__item[aria-pressed="true"] { background: var(--surface-overlay); color: var(--ink); font-weight: 700; box-shadow: var(--shadow-card); }
.ag-seg__item:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .ag-btn, .ag-seg__item { transition: none; }
  .ag-btn:active { transform: none; }
}

/* Vehicle hero */
.ag-hero { display: block; }
.ag-hero__eyebrow { font: 700 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.ag-hero__title { margin: var(--space-1) 0 0; font: 800 22px/28px var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.ag-hero__stage { margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-4) var(--space-6); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--radius-md); }
.ag-hero__figure { position: relative; margin: 0; }
.ag-hero__shadow { position: absolute; left: 8%; right: 6%; top: 88%; height: 9%; border-radius: 50%; background: var(--scrim); filter: blur(var(--blur-thin)); }
.ag-hero__car { position: relative; display: block; width: 100%; height: auto; }
.ag-hero__list { margin-top: var(--space-4); }
.ag-hotspot { position: absolute; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); margin: calc(var(--tap-min) / -2) 0 0 calc(var(--tap-min) / -2); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ag-hotspot__dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-overlay); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--surface-sunken); font: 700 13px/1 var(--font-mono); transition: transform 140ms cubic-bezier(.2, .8, .2, 1); }
.ag-hotspot--due .ag-hotspot__dot { background: var(--ember); color: var(--on-ember); border-color: var(--ember); }
.ag-hotspot:active .ag-hotspot__dot { transform: scale(.92); }
.ag-hotspot:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; }
@media (prefers-reduced-motion: reduce) { .ag-hotspot__dot { transition: none; } }