/* Rosie page: the three-model parts. The reach lineup (see /assets/js/rosie-lineup.js), the comparison and
   axes tables and the per-model specification columns. */

/* reach lineup: one row, columns in proportion to each drawing's width (--w, viewBox units) so all three share
   one scale and the floor line; on narrow screens they stack, each as wide as its share of the widest */
.lineup-wrap { margin: 1rem 0 2.5rem; }
.lineup { display: grid; align-items: end; border-bottom: 2px solid var(--ink); }
.lineup figure { margin: 0; display: grid; gap: .6rem; }
.lu-stage { position: relative; }
.lu-stage > img { display: block; width: 100%; height: auto; mix-blend-mode: var(--draw-blend); filter: var(--draw-filter); transition: opacity .3s linear; }
.lu-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--ink); pointer-events: none; opacity: 0; transition: opacity .3s linear; }
.lineup.is-live .lu-canvas { opacity: 1; }
.lineup.is-live .lu-stage > img { opacity: 0; }
.lineup figcaption { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; padding: 0 0 .7rem 1.2rem; }
.lineup figcaption .lbl b { color: var(--ink); }
@media (max-width: 700px) {
  .lineup { grid-template-columns: minmax(0, 1fr) !important; border-bottom: 0; gap: 1.25rem; }
  .lineup figure { width: calc(var(--w) / 898.74 * 100%); border-bottom: 2px solid var(--ink); }
  .lineup figcaption { padding-left: .5rem; }
}

/* comparison table */
.compare, .axes { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.compare caption, .axes caption { caption-side: top; text-align: left; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); padding-bottom: .6rem; }
.compare thead th { text-align: left; font-weight: 700; border-bottom: 2px solid var(--ink); padding: .6rem 1rem .6rem 0; }
.compare tbody th { text-align: left; font-weight: 400; color: var(--ink-2); width: 9rem; }
.compare th, .compare td { padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.compare td { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 760px) {
  .compare { font-size: .85rem; }
  .compare tbody th { width: auto; }
  .compare th, .compare td { padding-right: .6rem; }
}

/* pre-order buttons, one per model: under the comparison table they sit in the table's model columns (fixed
   layout, 10rem label column), and at the foot of each specification column */
.buy-row { display: grid; grid-template-columns: 10rem repeat(3, minmax(0, 1fr)); margin: 1.5rem 0 1rem; }
.buy-row p:first-child { grid-column: 2; }
.buy-row p, #specs .spec-buy { display: grid; justify-items: start; align-content: start; gap: .45rem; padding-right: 1rem; }
.buy-row span, #specs .spec-buy span { font-size: .85rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 761px) {
  .compare { table-layout: fixed; }
  .compare .compare-lbl { width: 10rem; }
}
@media (max-width: 760px) {
  .buy-row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .buy-row p:first-child { grid-column: auto; }
}

/* specification: three model columns, then the shared cards and the axes table */
#specs .spec-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin: 2.5rem 0; align-items: start; }
#specs .spec-shared { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin: 0 0 2.5rem; align-items: start; }
#specs .spec dl div { gap: 1rem; }
#specs .spec-models .spec { scroll-margin-top: 5rem; }
#specs .spec-models dt { flex: none; }
#specs .spec-models { align-items: stretch; }
#specs .spec-models .spec { grid-template-rows: auto 1fr auto; }
#specs .spec-buy { margin-top: .75rem; padding-right: 0; }
#specs .spec-buy span { color: var(--block-sub, #c7d6ff); }
#specs .spec-buy .btn:focus-visible { outline-color: #fff; }
#specs .spec-origin { margin: -1rem 0 2.5rem; color: var(--block-sub, #c7d6ff); }
#specs .axes { color: inherit; margin-bottom: 2.5rem; }
#specs .axes caption { color: var(--block-sub, #c7d6ff); }
#specs .axes th, #specs .axes td { text-align: left; padding: .55rem 1rem .55rem 0; border-bottom: 1px solid rgba(255,255,255,.28); }
#specs .axes thead th { border-bottom: 1px solid rgba(255,255,255,.55); font-weight: 600; color: #fff; }
#specs .axes tbody th { font-weight: 400; color: var(--block-sub, #c7d6ff); }
#specs .axes td { font-weight: 600; }
@media (max-width: 1100px) { #specs .spec-models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #specs .spec-models, #specs .spec-shared { grid-template-columns: 1fr; }
  #specs .axes { font-size: .85rem; }
}
/* six columns (two ranges, three speeds): half the cell gap so the table fits a phone without scrolling */
@media (max-width: 560px) { #specs .axes th, #specs .axes td { padding-right: .5rem; } }