/*
 * CarAI / Lobbi Motors -- customer-facing component styles.
 *
 * Every color/type/spacing/radius value here comes from a custom
 * property defined in tokens.css. No hardcoded hex/px color belongs in
 * this file -- if a component needs a new value, add a token instead.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-tight);
  text-wrap: balance;
  margin: 0;
  letter-spacing: 0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.eyebrow::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  background: var(--color-amber);
  border-radius: var(--radius-sm);
  flex: none;
}

/* ==================================================== Site header == */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-4);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  white-space: nowrap;
}

.wordmark span {
  color: var(--color-amber);
}

.site-nav {
  display: flex;
  gap: var(--space-5);
  margin-inline-start: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}

.site-nav a {
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
  padding-block: var(--space-1);
  border-bottom: var(--border-width-thick) solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-amber);
}

/* Language toggle -- deliberately small/quiet (far right of the header
   bar, mono type, muted color) since it's a utility control, not a
   primary nav item; the active language is the only one that reads
   at full ink color. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-wider);
}

.lang-switch__link {
  text-decoration: none;
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}

.lang-switch__link:hover,
.lang-switch__link.is-active {
  color: var(--color-ink);
}

.lang-switch__sep {
  color: var(--color-border);
}

/* Account nav (accounts phase 1) -- Log in/Register when logged out,
   Account/Log out when logged in. Sits next to the language toggle;
   styled as small quiet links matching .site-nav's weight rather than
   .lang-switch's mono/muted treatment, since these ARE primary
   actions (not a utility control). */
.account-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.account-nav a,
.account-nav__link-button {
  text-decoration: none;
  color: var(--color-ink-muted);
  transition: color var(--transition-fast);
}

.account-nav a:hover,
.account-nav a[aria-current="page"],
.account-nav__link-button:hover {
  color: var(--color-ink);
}

.account-nav__logout {
  margin: 0;
  padding: 0;
  display: inline;
}

.account-nav__link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ==================================================================== Buttons == */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
  background: var(--color-amber);
  color: var(--color-ink-on-accent);
}

.btn-primary:hover {
  background: var(--color-amber-strong);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-teal);
  color: var(--color-teal);
}

.btn-secondary:hover {
  background: var(--color-teal-bg);
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink-muted);
}

.btn-ghost:hover {
  color: var(--color-ink);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}

/* ==================================================================== Chips == */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  white-space: nowrap;
}

.chip--amber {
  border-color: var(--color-amber);
  color: var(--color-amber-strong);
  background: var(--color-amber-bg);
}

.chip--teal {
  border-color: var(--color-teal);
  color: var(--color-teal-strong);
  background: var(--color-teal-bg);
}

.chip--good {
  border-color: var(--color-good);
  color: var(--color-good);
  background: var(--color-good-bg);
}

.chip--warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
  background: var(--color-warning-bg);
}

.chip--critical {
  border-color: var(--color-critical);
  color: var(--color-critical);
  background: var(--color-critical-bg);
}

/* Solid-fill auction-house provenance badge -- deliberately bolder
   than the tinted chip--amber used for size tier, so it reads as an
   identity badge rather than another attribute chip. */
.chip--source {
  border-color: var(--color-amber);
  background: var(--color-amber);
  color: var(--color-ink-on-accent);
  font-weight: 600;
}

.car-card__photo .chip--source {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
}

/* Urgent countdown badge (Lot.listing_valid_until). Solid fill on the
   existing --color-critical semantic token, so it doesn't get lost
   next to (or confused with) the tinted chip--critical used for
   flood/total-loss condition badges. */
.chip--countdown {
  border-color: var(--color-critical);
  background: var(--color-critical);
  color: var(--color-surface);
  font-weight: 700;
}

/* Clickable header chips (detail page "show me the category" links --
   see app/templates/customer/_macros.html's `_chip_tag`). Only an
   anchor-rendered chip matches `a.chip`, so this never touches the
   plain, non-clickable `<span class="chip">` chips (e.g. the "Condition
   pending"/countdown badges) elsewhere on the site. */
a.chip {
  cursor: pointer;
  text-decoration: none;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

a.chip:hover,
a.chip:focus-visible {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

.chip-toggle {
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  background: var(--color-surface);
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.chip-toggle[aria-pressed="true"] {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-surface);
}

/* ==================================================================== Listing intro band == */

.listing-intro {
  padding-block: var(--space-7) var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.listing-intro h1 {
  font-size: var(--font-size-2xl);
  margin-block: var(--space-3) var(--space-2);
  max-width: 22ch;
}

.listing-intro p {
  max-width: 58ch;
  color: var(--color-ink-muted);
  margin: 0;
}

.listing-stats {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.listing-stat {
  font-family: var(--font-mono);
}

.listing-stat dt {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
}

.listing-stat dd {
  margin: 0;
  font-size: var(--font-size-lg);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

/* ============================================================ Status tabs == */

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-5);
}

.status-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
}

.status-tab:hover {
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.status-tab--active {
  border-color: var(--color-amber);
  background: var(--color-amber-bg);
  color: var(--color-amber-strong);
  font-weight: 600;
}

.status-tab__count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-xs);
  color: inherit;
  opacity: 0.75;
}

/* ==================================================================== Filters == */

.filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border);
}

.filters__primary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.filter-group__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
}

.filter-group__buttons {
  display: flex;
  gap: var(--space-2);
}

.filters select,
.filters input[type="number"],
.filters input[type="text"] {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink);
}

.filter-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-range input {
  width: 6.5rem;
}

.filter-group--actions {
  margin-inline-start: auto;
}

.filters__more {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-4);
}

.filters__more summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  user-select: none;
}

.filters__more summary:hover {
  color: var(--color-ink);
}

.filters__more-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

/* ==================================================================== Car grid & cards == */

.results-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.results-meta strong {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-2) var(--space-8);
}

/* ==================================================================== Pagination == */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding-block: 0 var(--space-8);
}

.pagination__status {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.car-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.car-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.car-card__photo {
  aspect-ratio: 4 / 3;
  background: linear-gradient(155deg, var(--color-surface-sunken), var(--color-surface-raised));
  display: flex;
  align-items: flex-end;
  padding: var(--space-3);
  position: relative;
  overflow: hidden;
}

.car-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.car-card__photo:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 55%);
  pointer-events: none;
}

.car-card__photo:has(img) .car-card__photo-caption {
  color: #f4f2ee;
}

.car-card__lot-tag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border-strong);
}

.car-card__photo-caption {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  position: relative;
  z-index: 1;
}

.car-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.car-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: var(--line-snug);
}

.car-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

.car-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.car-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.car-card__footer {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.car-card__price-label {
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.car-card__price {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.car-card__price--muted {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  font-style: italic;
  color: var(--color-ink-faint);
}

/* Approximate EUR conversion subline -- shown under the native-currency
   price for a non-EUR lot (CAD/KRW/etc.). Deliberately small and faint:
   the native amount is the source of truth; this is a "≈" convenience
   for the Bulgarian buyer, never presented as an exact figure. */
.car-card__price-eur,
.detail-header__price-eur {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-faint);
}

/* "(est.)" marker -- an estimated_price_usd figure is an admin
   planning number, not a real bid, so it must never look identical
   to one. Reuses --color-warning (already this system's "heads up,
   not confirmed" semantic), no new token needed. */
.tag-estimate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: var(--border-width) solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  vertical-align: middle;
}

/* ==================================================================== Car detail page == */

.detail-header {
  padding-block: var(--space-6) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
}

.detail-header__id .eyebrow {
  margin-bottom: var(--space-2);
}

.detail-header h1 {
  font-size: var(--font-size-3xl);
}

.detail-header__location {
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

.detail-header__price {
  text-align: right;
  font-family: var(--font-mono);
}

.detail-header__price-label {
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.detail-header__price-value {
  font-size: var(--font-size-2xl);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
}

.detail-header__price-value--muted {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-style: italic;
  color: var(--color-ink-faint);
}

.detail-header__chips {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

/* ---- Stacked single-column flow: full-width photo gallery first,
   capped to a sensible max width (--detail-gallery-max) so it stays
   prominent -- the founder's ask -- without going absurdly wide on
   huge monitors, then the specs/actions/categorization content
   (.detail-body) full-width BELOW it. Replaces the old side-by-side
   `.detail-hero` grid. AI report + damage map live further below
   still, each their own full-width section (see .report-panel). ---- */

.detail-gallery {
  --detail-gallery-max: 960px;
  max-width: var(--detail-gallery-max);
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-6);
}

.detail-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: 0 var(--space-7);
}

/* ---- Gallery (full-width hero presentation -- main image on top,
   thumbnail strip below) ---- */

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gallery__thumbs {
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  overflow-x: auto;
}

.gallery__thumb {
  flex: none;
  width: 72px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  border: var(--border-width-thick) solid transparent;
  background: linear-gradient(155deg, var(--color-surface-sunken), var(--color-surface-raised));
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-ink-faint);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.gallery__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.gallery__thumb[aria-current="true"] {
  border-color: var(--color-amber);
}

.gallery__main {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--color-surface-sunken), var(--color-surface-raised));
  border: var(--border-width) solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
}

.gallery__main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.gallery__main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
  pointer-events: none;
}

.gallery__main:has(.gallery__main-img) .gallery__main-caption,
.gallery__main:has(.gallery__main-img) .gallery__main-code {
  color: #f4f2ee;
}

.gallery__main-caption {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
  position: relative;
  z-index: 1;
}

.gallery__main-code {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-ink-muted);
  z-index: 1;
}

/* ---- Spec ledger ---- */

/* Four columns at rest -- .detail-body is now full page width (see
   above), wide enough to lay all four groups (Identity / Powertrain /
   Dimensions / Odometer & listing) out side by side as one tidy band
   instead of the old narrow-aside two-column stack; the responsive
   block below steps this down to 2 then 1 column as the viewport
   narrows. Gap+background is a deliberate trick: a 1px gap painted
   with --color-border reads as dividers between cells on every side
   (row AND column) without hand-maintaining per-side border rules as
   the grid reflows. */
.spec-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: clip;
}

.spec-ledger__group {
  background: var(--color-surface);
}

.spec-ledger__group-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-faint);
  background: var(--color-surface-raised);
  padding: var(--space-2) var(--space-4);
}

/* Each group's <dl> is the real two-column grid: a single shared label
   column (as wide as the widest label in that group) and one value column.
   The .spec-row wrappers use display:contents so their dt/dd drop straight
   into the dl grid — that shared column is what lines every value up on a
   common left edge, instead of each row splitting itself with flex
   space-between (which can never align row-to-row, no matter the values). */
.spec-ledger dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: baseline;
}

.spec-row {
  display: contents;
}

.spec-row dt,
.spec-row dd {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.spec-row:last-child dt,
.spec-row:last-child dd {
  border-bottom: 0;
}

.spec-row dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  padding-right: var(--space-2);
}

.spec-row dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--color-ink);
  padding-left: var(--space-2);
}

.spec-row__note {
  font-family: var(--font-body);
  color: var(--color-ink-muted);
}

/* ---- Field report (AI-generated) ---- */

.report-panel {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
}

.report-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.report-panel__title {
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: 700;
}

.report-panel__meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
}

.report-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.report-tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: none;
  border: none;
  border-bottom: var(--border-width-thick) solid transparent;
  padding: var(--space-2) var(--space-1);
  color: var(--color-ink-faint);
  cursor: pointer;
}

.report-tab[aria-selected="true"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-teal);
}

/* Persona sub-tabs -- one level down from the language tabs above, so
   styled as small pill toggles (not underline tabs) to make the
   hierarchy legible at a glance. Amber accent (vs. the language tabs'
   teal) since these are content/voice variants, not a
   sourcing/logistics distinction. */
.report-persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.report-persona-tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.report-persona-tab[aria-selected="true"] {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-ink-on-accent);
}

.report-lang-panel[hidden] {
  display: none;
}

.report-body-wrap[hidden] {
  display: none;
}

.report-body-meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-2);
}

.report-body {
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
  color: var(--color-ink);
  white-space: pre-wrap;
}

.report-panel__disclaimer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
}

.claim-check__claim {
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-3);
}

.claim-check__verdict {
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
  color: var(--color-ink);
  margin: 0;
}

/* Row of buttons -- .action-panel used to be stacked full-width
   buttons in the old narrow hero aside; now that .detail-body is full
   page width, a horizontal row reads better (wraps on narrow
   viewports, same as before, via flex-wrap). */
.action-panel {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  padding: var(--space-5);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.action-panel .btn {
  flex: 1 1 220px;
}

/* Transport-category line inside the cost calculator's Lobbi section --
   replaces the removed standalone "Transport categorization" card. */
.cc-cat .cc-row__amt {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================ Auth forms == */
/* Accounts phase 1: register/login/forgot-password/reset-password/account.
   Shares the site's card/button/space tokens rather than introducing a
   parallel design system -- deliberately plain, this is a funding-demo
   account flow, not a marketing surface. */

.auth-shell {
  display: flex;
  justify-content: center;
  padding-block: var(--space-8);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.auth-card__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-2);
}

.auth-card__lead {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.auth-field {
  display: block;
  margin-bottom: var(--space-4);
}

.auth-field__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"] {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
}

.auth-field input:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}

.auth-card .btn {
  width: 100%;
  justify-content: center;
}

.auth-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.auth-status--error {
  background: color-mix(in srgb, var(--color-sev-4) 12%, var(--color-surface));
  color: var(--color-sev-4);
  border: var(--border-width) solid color-mix(in srgb, var(--color-sev-4) 35%, var(--color-border));
}

.auth-status--success {
  background: color-mix(in srgb, var(--color-sev-1) 12%, var(--color-surface));
  color: var(--color-sev-1);
  border: var(--border-width) solid color-mix(in srgb, var(--color-sev-1) 35%, var(--color-border));
}

.auth-card__note {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-ink-faint);
}

.auth-card__note a {
  color: var(--color-teal);
}

.auth-profile__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
}

.auth-profile__row:last-of-type {
  border-bottom: none;
}

.auth-profile__label {
  color: var(--color-ink-faint);
  font-size: var(--font-size-sm);
}

/* Textarea variant of .auth-field's input styling (buyer features
   phase 2's lead form -- see .lead-form below) -- same look, just
   resizable vertically instead of a single line. */
.auth-field textarea {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  resize: vertical;
}

.auth-field textarea:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
}

/* ============================================================ Buyer features == */
/* Phase 2: watchlist heart (car_card / car_detail action panel) + the
   offer/inquiry lead form on car_detail.html. Reuses the site's
   existing card/chip/auth-field/btn tokens rather than a parallel
   design system -- same discipline as the Auth forms section above. */

/* The card's "stretched link" cover -- see customer/_macros.html's
   car_card macro docstring for why the card root is now a <div>
   wrapping this instead of being its own <a>. Sits UNDER .car-card__save
   in z-index so the heart button is always independently clickable. */
.car-card__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.car-card__save {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-ink-faint);
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.car-card__save:hover {
  color: var(--color-critical);
  border-color: var(--color-critical);
  transform: scale(1.06);
}

.car-card__save.is-saved {
  color: var(--color-critical);
  border-color: var(--color-critical);
}

.car-card__save:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

/* The labeled (icon + text) watchlist toggle used in car_detail.html's
   action panel -- a plain .btn.btn-ghost that flips to a filled look
   once saved, same red accent as the card heart above. */
.btn.js-watchlist-toggle.is-saved {
  border-color: var(--color-critical);
  color: var(--color-critical);
}

/* Empty state for a buyer with nothing saved yet (customer/watchlist.html). */
.watchlist-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-ink-muted);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}

/* Offer/inquiry lead form (car_detail.html, below the hero). */
.lead-form__kind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.lead-form__kind-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  cursor: pointer;
}

/* ==================================================================== Footer == */

.site-footer {
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-7);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.site-footer__grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.site-footer__disclaimer {
  max-width: 60ch;
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-5);
}

/* ==================================================================== Responsive == */

@media (max-width: 860px) {
  .spec-ledger {
    grid-template-columns: 1fr;
  }

  .action-panel .btn {
    flex: 1 1 100%;
  }

  .filters__primary {
    align-items: stretch;
  }

  .filter-group--actions {
    margin-inline-start: 0;
  }
}

/* Between full-width desktop and the single-column mobile breakpoint
   above, step the spec-ledger down to 2 columns rather than jumping
   straight from 4 to 1 -- keeps rows legible on tablet-width viewports
   instead of forcing every group to full page width. */
@media (max-width: 1080px) and (min-width: 861px) {
  .spec-ledger {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================================================================== Damage zone map == */
/* See app/templates/customer/damage_map.html + app/static/customer/damage-map.js.
   `.zone`/`.zcode`/`.decor`/`.decor-fill`/`.silhouette` are consumed
   directly by damage-map.js (it sets these as SVG element classes when
   building the map), not by any template markup here. */

.dmap-hero {
  padding-block: var(--space-7) var(--space-5);
}

.dmap-hero h1 {
  font-size: var(--font-size-2xl);
  margin-block: var(--space-3) var(--space-2);
}

.dmap-hero__sub {
  max-width: 62ch;
  color: var(--color-ink-muted);
  margin: 0;
}

/* Map (.dmap__stage) LEFT, calculation column (.dmap__aside -- repair-
   estimate table, then zone detail, then severity legend) RIGHT, via
   a 2-column CSS grid -- source order in _damage_map.html already
   puts .dmap__stage before .dmap__aside, so no `order` override is
   needed. The stage column gets slightly more width than the
   calculation column (1.35fr vs 1fr) since the 4-view SVG row is the
   widest thing on the page. Stacks to a single column below 960px --
   same layout on both the standalone /customer/damage-map page and
   the car_detail.html embed, no modifier class needed. */
.dmap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-2) var(--space-8);
}

@media (max-width: 960px) {
  .dmap {
    grid-template-columns: 1fr;
  }
}

/* Embedded on car_detail.html, `.dmap` sits inside a `.report-panel`
   card that already supplies its own bottom padding -- without this,
   the two paddings stack into an oversized gap under the map that the
   standalone page (where `.dmap` is a direct child of `.container`,
   no enclosing card) never has. */
.report-panel .dmap {
  padding-block: 0;
}

.dmap__stage,
.dmap__legend-card,
.dmap__detail,
.dmap__est {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

.dmap__stage {
  padding: var(--space-5);
}

.dmap__stage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.dmap__stage-head h2 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}

/* Sedan/SUV toggle -- same pill-group shape as .lang-switch's sibling
   controls elsewhere on the site, reusing --color-ink as the active
   fill (a body-style choice isn't a sourcing/logistics/status signal,
   so neither brand accent nor a semantic color fits it). */
.body-toggle {
  display: inline-flex;
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px;
}

.body-toggle button {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-ink-muted);
  background: none;
  border: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.body-toggle button[aria-pressed="true"] {
  background: var(--color-ink);
  color: var(--color-surface);
}

.dmap__hint {
  font-size: var(--font-size-xs);
  color: var(--color-ink-faint);
  margin: 0 0 var(--space-3);
}

.dmap__blueprint {
  background:
    linear-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px) 0 0 / 22px 100%,
    var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* One horizontal row -- top / front / rear / underbody side by side
   at a SHARED HEIGHT (set on the svg itself below), not shared width:
   the nose-up top view's viewBox (260x600, portrait) is much narrower
   per unit height than the front/rear/underbody views' (190x150,
   landscape), so equal-width columns would force the top view's
   height to balloon far past the others -- exactly the old problem.
   Fixing the height and letting each view's width follow its own
   viewBox aspect ratio (`width: auto` below) keeps every view reading
   at the same visual scale and the whole row compact. Wraps on narrow
   viewports via flex-wrap -- see the responsive rules further down. */
.dmap__views {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-4);
}

.dmap__view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dmap__view-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-bottom: var(--space-1);
  align-self: center;
}

.dmap__stage svg {
  height: 230px;
  width: auto;
  max-width: 100%;
  display: block;
}

@media (max-width: 780px) {
  .dmap__stage svg {
    height: 170px;
  }
}

@media (max-width: 480px) {
  .dmap__stage svg {
    height: 130px;
  }
}

/* Zones: colorless at rest -- SEVERITY paints them (see damage-map.js's
   paint(), which sets inline `fill` from --color-sev-N), never a
   hardcoded fill here. */
.zone {
  fill: var(--color-surface-sunken);
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
  cursor: pointer;
  transition: fill var(--transition-fast);
}

.zone:hover {
  stroke: var(--color-teal);
  stroke-width: 2;
}

.zone:focus-visible {
  outline: none;
  stroke: var(--color-teal);
  stroke-width: 2.4;
}

.zone.selected {
  stroke: var(--color-teal);
  stroke-width: 2.6;
}

.zcode {
  font-family: var(--font-mono);
  font-size: 8.4px;
  font-weight: 600;
  fill: var(--color-ink-muted);
  pointer-events: none;
}

.decor,
.decor-fill,
.silhouette {
  pointer-events: none;
}

.decor {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
  opacity: 0.8;
}

.decor-fill {
  fill: var(--color-border-strong);
  opacity: 0.5;
}

.silhouette {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.7;
}

/* ---- Exploded-view decor: wheels/axles, hinge dots, gloss, glass,
   door handles, ground shadow, and the underbody driveline. All
   non-interactive (pointer-events:none) and drawn ON TOP of the
   clickable .zone panels. Every color is a token -- same
   no-hardcoded-hex rule as the zones/severity fills above. ---- */

.ground-shadow {
  fill: var(--color-ink);
  opacity: 0.07;
  pointer-events: none;
}

.axle {
  stroke: var(--color-border-strong);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.5;
  pointer-events: none;
}

.tire {
  fill: var(--color-surface-sunken);
  pointer-events: none;
}

.rim {
  fill: var(--color-border-strong);
  opacity: 0.5;
  pointer-events: none;
}

.handle {
  stroke: var(--color-border-strong);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.4;
  pointer-events: none;
}

.hinge {
  fill: var(--color-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
  pointer-events: none;
}

.glass {
  fill: var(--color-teal-bg);
  stroke: var(--color-border-strong);
  stroke-width: 1.2;
  pointer-events: none;
}

.gloss {
  fill: var(--color-surface);
  opacity: 0.5;
  pointer-events: none;
}

.gloss-g {
  fill: var(--color-surface-raised);
  opacity: 0.6;
  pointer-events: none;
}

.under-decor {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.4;
  opacity: 0.5;
  pointer-events: none;
}

/* The roof is a clickable zone (roof_upper) but sits slightly distinct
   from the side panels at rest; a severity fill still wins via the
   inline `fill` paint() sets (see .zone above). */
.zone.roof0 {
  fill: var(--color-surface-raised);
}

/* ---- Calculation column: estimate table, then zone detail, then
   severity legend, stacked vertically -- this IS the "calc-right" side
   of .dmap's 2-column layout above, so it's always a single column
   (never the old 3-across grid, which only made sense when this sat
   below a full-width stage rather than beside a narrower one). ---- */

.dmap__aside {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

.dmap__legend-card,
.dmap__detail,
.dmap__est {
  padding: var(--space-4);
}

.dmap__legend-card h2 {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.dmap__legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1) var(--space-4);
}

.dmap__legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

.dmap__sw {
  width: 13px;
  height: 13px;
  border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--color-border-strong);
  flex: none;
}

.dmap__detail {
  min-height: 190px;
}

.dmap__muted {
  color: var(--color-ink-faint);
  font-size: var(--font-size-sm);
  margin: 0;
}

.dmap__detail-code {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-teal);
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
}

.dmap__detail-title {
  margin: var(--space-1) 0 var(--space-1);
  font-size: var(--font-size-md);
}

.dmap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}

.dmap__chip {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface);
}

.dmap__parts-label {
  color: var(--color-ink-faint);
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
}

.dmap__parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.dmap__parts li {
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dmap__parts li:not(.dmap__muted)::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-ink-faint);
  flex: none;
}

.dmap__est-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-3);
}

.dmap__est-top strong {
  font-size: var(--font-size-sm);
}

.dmap__verdict {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
}

.dmap__verdict--ok {
  background: var(--color-good-bg);
  color: var(--color-good);
}

.dmap__verdict--tl {
  background: var(--color-critical-bg);
  color: var(--color-critical);
}

.dmap__est-rows {
  display: grid;
  gap: var(--space-2);
}

.dmap__est-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-sm);
}

.dmap__est-k {
  color: var(--color-ink-muted);
}

.dmap__est-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.dmap__est-row--total .dmap__est-v {
  font-size: var(--font-size-md);
}

.dmap__disc {
  font-size: 0.6875rem;
  color: var(--color-ink-faint);
  line-height: var(--line-normal);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.dmap__controls {
  display: flex;
  gap: var(--space-2);
}

/* ---- CHANGE 2: AI-assessment-driven map -- empty state, dimmed
   zones, and the AI-detected-damage summary list. See
   app/static/customer/damage-map.js and app.api.damage_map's module
   docstring for the "mode"/"aiZones" data these key off. ---- */

/* A real lot with zero DamageAssessment rows -- the view row is
   dimmed and non-interactive (see damage-map.js's MODE === "empty"
   guard) rather than pre-marking anything fabricated. */
.dmap__blueprint--empty {
  opacity: 0.4;
  pointer-events: none;
}

.dmap__hint--empty {
  color: var(--color-ink-muted);
  font-weight: 600;
}

/* A zone the AI did NOT flag, while in "assessment" mode -- visually
   secondary (dim) so the AI-detected zones read as the primary,
   emphasized set, but still clickable (not aria-disabled in the
   inert/unreachable sense) -- the human can still flag something the
   AI missed rather than the tool hard-locking to only what the AI saw. */
.zone--dim {
  opacity: 0.32;
}

/* Every zone, in "empty" mode -- genuinely non-interactive (see
   damage-map.js, which also skips click/keydown handling entirely). */
.zone--disabled {
  cursor: default;
}

.dmap__ai-summary {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.dmap__ai-summary-head {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}

.dmap__ai-summary-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dmap__ai-chip {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  cursor: pointer;
}

.dmap__ai-chip:hover,
.dmap__ai-chip:focus-visible {
  border-color: var(--color-teal);
  color: var(--color-teal);
}

/* ==== Detail hero: gallery (left) + landed-cost calculator (right) ==== */
.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-6);
}
/* Inside the hero grid the gallery is bounded by its column, so it drops
   its own standalone max-width/centering/padding. */
.detail-hero .detail-gallery {
  max-width: none;
  margin-inline: 0;
  padding-block: 0;
}
/* Left hero column = gallery + action buttons stacked directly under it
   (natural flow, not pinned to the bottom -- pinning left the buttons
   floating on the bottom edge with a void above them). Any residual
   height difference vs the taller cost-calc column falls below as plain
   page background, not a bordered hole. */
.detail-hero__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.cost-calc {
  position: sticky;
  top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  padding: var(--space-3);
}
.cost-calc__head { display: flex; flex-direction: column; gap: 2px; }
.cost-calc__title {
  font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--line-tight);
}
.cost-calc__sub { font-size: var(--font-size-xs); color: var(--color-ink-muted); }
.cost-calc__bid { display: flex; flex-direction: column; gap: var(--space-1); }
.cost-calc__bid-label {
  font-size: var(--font-size-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-ink-faint);
}
.cost-calc__bid-field {
  display: flex; align-items: center; gap: var(--space-2);
  border: var(--border-width-thick) solid var(--color-amber); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3); background: var(--color-surface);
}
.cost-calc__bid-ccy { font-family: var(--font-mono); font-weight: 600; color: var(--color-amber-strong); }
.cost-calc__bid-field input {
  flex: 1; width: 100%; border: 0; outline: 0; background: transparent;
  font-family: var(--font-mono); font-size: var(--font-size-md); font-weight: 600;
  color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.cost-calc__hint { font-size: var(--font-size-sm); color: var(--color-ink-faint); text-align: center; padding: var(--space-3) 0; }
.cost-calc__foot {
  font-size: var(--font-size-xs); color: var(--color-ink-muted); line-height: var(--line-tight);
  border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-1); margin: 0;
}

/* Honest estimate disclaimer -- fainter than the foot: it must be legible
   (product-grade honesty about the heuristics behind the number) without
   competing with the total above it. */
.cost-calc__disclaimer {
  font-size: var(--font-size-xs); color: var(--color-ink-faint);
  line-height: var(--line-tight); margin: var(--space-1) 0 0;
}

/* Collapsed-by-default line-item breakdown. `<summary>` is the tap target;
   the ~20-row stack lives inside and only paints when the buyer expands it,
   so the sticky panel stays gallery-height at rest. */
.cc-breakdown { border-bottom: var(--border-width) solid var(--color-border); }
.cc-breakdown__toggle {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--font-size-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted);
}
.cc-breakdown__toggle::-webkit-details-marker { display: none; }
.cc-breakdown__toggle::before {
  content: "▸"; font-size: 0.85em; color: var(--color-ink-faint);
  transition: transform var(--transition-fast, 120ms) ease;
}
.cc-breakdown[open] > .cc-breakdown__toggle::before { transform: rotate(90deg); }
.cc-breakdown__toggle:hover { color: var(--color-ink); }
.cc-breakdown__body { padding-bottom: var(--space-2); }

.cc-sec { margin-top: var(--space-1); }
.cc-sec__title {
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-weight: 700; color: var(--color-teal); padding-bottom: var(--space-1);
  border-bottom: var(--border-width) solid var(--color-border);
}
.cc-sec--post .cc-sec__title { color: var(--color-amber-strong); }
.cc-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 1px 0; font-size: var(--font-size-xs); line-height: var(--line-snug); }
.cc-row__label { color: var(--color-ink-muted); flex: 1 1 auto; min-width: 0; }
.cc-row__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); flex: 0 0 auto; text-align: right; }
.cc-row--sub { border-top: var(--border-width) dashed var(--color-border-strong); margin-top: var(--space-1); font-weight: 600; }
.cc-row--sub .cc-row__label { color: var(--color-ink); }
.cc-unset { color: var(--color-ink-faint); font-style: italic; font-family: var(--font-body); font-size: var(--font-size-xs); white-space: normal; display: inline-block; max-width: 140px; text-align: right; line-height: var(--line-snug); }

.cc-total { margin-top: var(--space-2); border-top: var(--border-width-thick) solid var(--color-ink); padding-top: var(--space-2); }
.cc-total__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.cc-total__row > span:first-child {
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted);
}
.cc-total__eur {
  font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: 700;
  color: var(--color-amber-strong); font-variant-numeric: tabular-nums;
}
.cc-total__bgn { text-align: right; font-family: var(--font-mono); color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.cc-partial {
  margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-warning);
  background: var(--color-warning-bg); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
}

@media (max-width: 880px) {
  .detail-hero { grid-template-columns: 1fr; }
  .cost-calc { position: static; }
}