/* ============================================================
   /ibiza — the index of every list, as dense clickable tables.
   Rows collapse to stacked cards on a phone. Layered on the
   Night Garage theme; borrows fast.css for chips, traps and rulers.
   ============================================================ */
.ib-page { --ib-max: 1180px; }
.ib-page main { padding-bottom: var(--sp-8); }
.ib-shell { width: min(calc(100% - 2 * var(--gutter)), var(--ib-max)); margin-inline: auto; }

/* --- Hero --- */
.ib-hero { margin: clamp(2rem, 5vw, 4rem) auto clamp(1.25rem, 3vw, 2rem); }
.ib-hero .eyebrow { color: var(--vroom-accent); }
.ib-hero h1 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7.5vw, 6rem);
  font-weight: 500; letter-spacing: -0.05em; line-height: 0.86;
  color: var(--bone);
}
.ib-hero h1 em { color: var(--vroom-accent); font-style: normal; }
.ib-hero__deck { max-width: 46rem; margin: 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; }
.ib-hero__stats {
  display: grid; gap: var(--sp-3) var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--rule-soft); list-style: none;
}
.ib-hero__stats li { display: flex; flex-direction: column; gap: 4px; }
.ib-hero__stats strong { font-family: var(--font-mono); font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--vroom-accent); font-feature-settings: "tnum" 1; }
.ib-hero__stats span { font-family: var(--font-caps); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); }

/* --- Section furniture --- */
.ib-section { margin: clamp(2.5rem, 6vw, 4rem) auto 0; }
.ib-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ib-section__head h2 { margin: var(--sp-2) 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--bone); }
.ib-section__deck { margin: var(--sp-2) 0 0; max-width: 46rem; color: var(--ink-soft); line-height: 1.5; }
.ib-section__count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); font-feature-settings: "tnum" 1; }

/* --- Filter chips --- */
.ib-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ib-chip {
  padding: 7px 13px;
  font-family: var(--font-caps); font-size: 0.74rem; font-weight: 700;
  color: var(--ink-soft); background: var(--vroom-surface);
  border: 1px solid var(--rule); border-radius: 999px; cursor: pointer;
}
.ib-chip:hover { color: var(--ink); border-color: var(--clay-light); }
.ib-chip[aria-pressed="true"] { color: var(--on-accent); background: var(--vroom-accent); border-color: var(--vroom-accent); }

/* --- The table --- */
.ib-table { border: 1px solid var(--rule); border-radius: var(--vroom-radius-md); overflow: hidden; background: var(--vroom-surface); }
.ib-grid { --ib-cols: 2.2fr 1.6fr 0.6fr 0.7fr 0.9fr 1fr; }
.ib-head, .ib-row__head {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 26px var(--ib-cols);
  width: 100%; padding: var(--sp-3) var(--sp-4); text-align: left;
}
.ib-head { padding-block: var(--sp-2); background: var(--vroom-surface-muted); border-bottom: 1px solid var(--rule); }
.ib-head .ib-cell, .ib-sort {
  font-family: var(--font-caps); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.ib-sort { background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: inherit; }
.ib-sort:hover { color: var(--ink); }
.ib-sort[aria-pressed="true"] { color: var(--vroom-accent); }
.ib-sort span { opacity: 0.5; }
.ib-head__spacer { display: block; }

.ib-row { border-bottom: 1px solid var(--rule-soft); }
.ib-row:last-child { border-bottom: 0; }
.ib-row__head { background: none; border: 0; cursor: pointer; color: var(--ink); font: inherit; }
.ib-row__head:hover { background: var(--vroom-surface-muted); }
.ib-row.is-open { background: color-mix(in srgb, var(--vroom-accent) 5%, transparent); }
.ib-row.is-open .ib-row__head { background: color-mix(in srgb, var(--vroom-accent) 6%, transparent); }
.ib-row__open {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-faint);
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1;
}
.ib-row.is-open .ib-row__open { color: var(--on-accent); background: var(--vroom-accent); border-color: var(--vroom-accent); }
.ib-row.is-open .ib-row__open::after { content: ''; }

.ib-cell { min-width: 0; }
.ib-cell--car { display: flex; flex-direction: column; gap: 2px; }
.ib-cell--car b { font-size: 1rem; font-weight: 600; color: var(--bone); letter-spacing: -0.01em; }
.ib-cell--car small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }
.ib-num { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); font-feature-settings: "tnum" 1; }
.ib-cell--price b { display: block; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); font-feature-settings: "tnum" 1; }
.ib-cell--price b.is-over { color: var(--gauge-hot); }
.ib-cell--price b.is-crossing { color: var(--gauge-warm); }
.ib-ruler { margin-top: 6px; }
.ib-ruler .fast-ruler__track { height: 6px; }
.ib-tag {
  font-family: var(--font-caps); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 6px; border: 1px solid var(--rule); color: var(--ink-soft);
}
.ib-tag.is-ev { color: #7FD1A3; border-color: color-mix(in srgb, #7FD1A3 45%, var(--rule)); }
.ib-tag.is-phev, .ib-tag.is-hybrid { color: #B39CF5; border-color: color-mix(in srgb, #B39CF5 45%, var(--rule)); }

/* --- The expanded detail --- */
.ib-detail { padding: 0 var(--sp-4) var(--sp-4) calc(var(--sp-4) + 26px + var(--sp-3)); display: grid; gap: var(--sp-3); }
.ib-detail[hidden] { display: none; }
.ib-detail__lead { margin: 0; color: var(--ink); line-height: 1.55; max-width: 60rem; }
.ib-detail__bullets { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-soft); }
.ib-detail__meta { margin: 0; color: var(--ink-faint); font-size: 0.84rem; line-height: 1.5; max-width: 60rem; }
.ib-detail__meta--warn { color: var(--gauge-warm); }
.ib-detail__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* --- The other lists --- */
.ib-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ib-card {
  position: relative; display: block; padding: var(--sp-4);
  background: var(--vroom-surface); border: 1px solid var(--rule);
  border-radius: var(--vroom-radius-md); text-decoration: none; color: var(--ink);
}
.ib-card:hover { border-color: var(--vroom-accent); }
.ib-card .eyebrow { color: var(--vroom-accent); }
.ib-card h3 { margin: var(--sp-2) 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.ib-card p:last-of-type { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.5; }
.ib-card__go { position: absolute; top: var(--sp-4); right: var(--sp-4); color: var(--ink-faint); }
.ib-card:hover .ib-card__go { color: var(--vroom-accent); }

/* --- Notes --- */
.ib-notes { margin-top: clamp(2rem, 5vw, 3rem); padding-top: var(--sp-5); border-top: 1px solid var(--rule-soft); }
.ib-notes h2 { margin: 0 0 var(--sp-3); font-family: var(--font-caps); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.ib-notes p { margin: 0; max-width: 48rem; color: var(--ink-faint); font-size: 0.9rem; line-height: 1.6; }

/* --- Phone: the grid becomes stacked cards with labelled values --- */
@media (max-width: 860px) {
  /* The header row can't be a header any more, but it still holds the only sort controls —
     so it becomes a scrollable row of sort chips rather than disappearing. */
  .ib-head {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    padding: var(--sp-2) var(--sp-3);
  }
  .ib-head::-webkit-scrollbar { display: none; }
  .ib-head__spacer { display: none; }
  .ib-head::before {
    content: 'Sort'; flex: 0 0 auto; align-self: center; padding-right: 2px;
    font-family: var(--font-caps); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  }
  .ib-sort {
    flex: 0 0 auto; padding: 6px 11px; white-space: nowrap;
    background: var(--vroom-surface); border: 1px solid var(--rule); border-radius: 999px;
  }
  .ib-sort[aria-pressed="true"] { color: var(--on-accent); background: var(--vroom-accent); border-color: var(--vroom-accent); }
  .ib-row__head { grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); row-gap: var(--sp-2); }
  .ib-cell--car { grid-column: 2; }
  .ib-row__head .ib-cell:not(.ib-cell--car) {
    grid-column: 2; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
    padding-top: 6px; border-top: 1px dashed var(--rule-soft);
  }
  .ib-row__head .ib-cell:not(.ib-cell--car)::before {
    content: attr(data-label);
    font-family: var(--font-caps); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint);
  }
  .ib-cell--price { flex-wrap: wrap; }
  .ib-ruler { flex-basis: 100%; }
  .ib-detail { padding-left: var(--sp-4); }
}

/* --- Per-table column tracks (the header spacer + one track per column) --- */
.ib-grid--used { --ib-cols: 2fr 1.5fr 0.6fr 0.7fr 0.85fr 0.9fr 1fr; }
.ib-grid--new { --ib-cols: 2.1fr 0.8fr 0.5fr 0.7fr 0.9fr 1fr 0.9fr; }
.ib-grid--stretch { --ib-cols: 2.3fr 0.6fr 0.7fr 1.2fr 1fr; }
.ib-cell--monthly { color: var(--vroom-accent); font-weight: 700; }

/* --- The podium: the answer, before the evidence --- */
.ib-podium { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ib-podium__card {
  padding: var(--sp-4);
  background: var(--vroom-surface); border: 1px solid var(--rule);
  border-top: 3px solid var(--vroom-accent); border-radius: var(--vroom-radius-md);
}
.ib-podium__card .eyebrow { color: var(--vroom-accent); }
.ib-podium__card h3 { margin: var(--sp-2) 0 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.ib-podium__figures { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); }
.ib-podium__card p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }

/* --- Finance offers: advertised versus real --- */
.ib-offers { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ib-offer { padding: var(--sp-4); background: var(--vroom-surface); border: 1px solid var(--rule); border-radius: var(--vroom-radius-md); }
.ib-offer h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--bone); }
.ib-offer__ad { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.ib-offer__ad span { font-family: var(--font-caps); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.ib-offer__ad b { font-family: var(--font-mono); font-size: 1.1rem; color: var(--ink); }
.ib-offer__terms { display: grid; gap: 4px; margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.ib-offer__terms li { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: 0.8rem; color: var(--ink-soft); }
.ib-offer__terms b { font-family: var(--font-mono); color: var(--ink); }
.ib-offer__real {
  margin: 0 0 var(--sp-3); padding: var(--sp-3);
  background: color-mix(in srgb, var(--gauge-hot) 9%, var(--vroom-surface-muted));
  border: 1px solid color-mix(in srgb, var(--gauge-hot) 28%, var(--rule));
  border-radius: 10px; color: var(--ink); font-size: 0.86rem; line-height: 1.5;
}
.ib-finance { margin: var(--sp-4) 0 0; max-width: 52rem; color: var(--ink-faint); font-size: 0.86rem; line-height: 1.6; }

/* --- The three to drive --- */
.ib-drives { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ib-drive {
  position: relative; display: grid; gap: 4px; padding: var(--sp-4);
  background: var(--vroom-surface); border: 1px solid var(--rule);
  border-radius: var(--vroom-radius-md); text-decoration: none;
}
.ib-drive:hover { border-color: var(--vroom-accent); }
.ib-drive b { font-family: var(--font-display); font-size: 1.05rem; color: var(--bone); }
.ib-drive span { color: var(--ink-soft); font-size: 0.86rem; }

/* The terms that govern the monthly column, stated beside it. */
.ib-terms { margin: 0 0 var(--sp-3); color: var(--ink-faint); font-size: 0.82rem; line-height: 1.5; }

/* --- The island ownership notes --- */
.ib-notes-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ib-notes-list li {
  display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr); gap: var(--sp-3);
  padding: var(--sp-3); background: var(--vroom-surface);
  border: 1px solid var(--rule); border-radius: 10px;
}
.ib-notes-list b { font-family: var(--font-caps); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vroom-accent); }
.ib-notes-list span { color: var(--ink-soft); line-height: 1.5; }

/* --- Grant caveat + price conflicts --- */
.ib-incentive, .ib-conflicts {
  padding: var(--sp-4); background: var(--vroom-surface);
  border: 1px solid var(--rule); border-radius: var(--vroom-radius-md); margin-bottom: var(--sp-3);
}
.ib-incentive h3, .ib-conflicts h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--bone); }
.ib-incentive p { margin: 0 0 var(--sp-2); color: var(--ink-soft); line-height: 1.55; }
.ib-warn {
  padding: var(--sp-3); border-radius: 10px;
  background: color-mix(in srgb, var(--gauge-warm) 9%, var(--vroom-surface-muted));
  border: 1px solid color-mix(in srgb, var(--gauge-warm) 28%, var(--rule));
  color: var(--ink) !important;
}
.ib-conflicts ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-soft); line-height: 1.5; }
.ib-conflicts b { color: var(--ink); }

/* --- Market flags --- */
.ib-flags { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ib-flag { padding: var(--sp-4); background: var(--vroom-surface); border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: var(--vroom-radius-md); }
.ib-flag.is-thin { border-top-color: var(--gauge-warm); }
.ib-flag.is-dear { border-top-color: var(--gauge-hot); }
.ib-flag.is-cheap { border-top-color: #7FD1A3; }
.ib-flag h4 { margin: 0 0 var(--sp-2); font-family: var(--font-caps); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); }
.ib-flag ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.45; }

/* --- Brand spotlights + coming soon --- */
.ib-spots, .ib-coming { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ib-spot, .ib-coming__card { padding: var(--sp-4); background: var(--vroom-surface); border: 1px solid var(--rule); border-radius: var(--vroom-radius-md); }
.ib-spot h3, .ib-coming__card h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--bone); }
.ib-spot p, .ib-coming__card p { margin: 0 0 var(--sp-2); color: var(--ink-soft); line-height: 1.55; font-size: 0.92rem; }
.ib-spot__facts { margin: 0 0 var(--sp-3); padding-left: 1.1em; display: grid; gap: 4px; color: var(--ink-faint); font-size: 0.84rem; line-height: 1.45; }
.ib-cell--over { color: var(--gauge-hot); }

@media (max-width: 620px) {
  .ib-notes-list li { grid-template-columns: 1fr; gap: 4px; }
}