/* Compare family: /compare and /compare/ships/<a>-vs-<b>.
   Two sides, two signal colours: ship A is cyan, ship B is amber, everywhere on the page. */

.page-compare {
  --side-a: var(--cyan);
  --side-a-ink: var(--cyan-ink);
  --side-a-tint: rgba(32, 168, 236, 0.1);
  --side-b: var(--amber);
  --side-b-ink: var(--amber-ink);
  --side-b-tint: rgba(249, 129, 47, 0.11);
}

/* ------------------------------------------------------------------ hero: the duel */

.cmp-hero {
  position: relative; overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(70% 90% at 0% 100%, rgba(32, 168, 236, 0.3) 0%, transparent 62%),
    radial-gradient(70% 90% at 100% 100%, rgba(249, 129, 47, 0.26) 0%, transparent 62%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
  padding-block: var(--s-6) var(--s-7);
}
/* a faint bearing line down the middle: the two ships face each other across it */
.cmp-hero::before {
  content: ""; position: absolute; inset: 0 auto 0 50%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.14) 70%, transparent);
}
.cmp-hero__inner { position: relative; display: grid; gap: var(--s-4); }
.cmp-hero h1 { color: #fff; font-size: var(--step-4); max-width: 26ch; }
.cmp-hero__title span:not(.cmp-hero__vs) { white-space: normal; }
.cmp-hero__vs {
  display: inline-block; margin-inline: 0.1em;
  font-style: italic; font-weight: 500; font-size: 0.62em; vertical-align: 0.12em;
  color: var(--amber-soft);
}
.cmp-hero .lede { color: var(--on-dark-muted); }

.cmp-duel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--s-3); align-items: start; margin-top: var(--s-3);
}
.cmp-duel__ship { display: grid; gap: var(--s-1); min-width: 0; }
.cmp-duel__media {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-m); background: var(--navy-700);
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  margin-bottom: var(--s-2);
}
.cmp-duel__media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 4px;
}
.cmp-duel__ship--a .cmp-duel__media::after { background: var(--side-a); }
.cmp-duel__ship--b .cmp-duel__media::after { background: var(--side-b); }
.cmp-duel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.cmp-duel__media:hover img { transform: scale(1.04); }
.cmp-duel__noimg {
  display: grid; place-items: center; height: 100%;
  font: 700 var(--step-5)/1 var(--font-display); color: rgba(255, 255, 255, 0.18);
}
.cmp-duel__line {
  font-size: var(--step--2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.cmp-hero .cmp-duel__ship--a .cmp-duel__line { color: var(--cyan-soft); }
.cmp-hero .cmp-duel__ship--b .cmp-duel__line { color: var(--amber-soft); }
.cmp-duel__name { font-size: var(--step-1); line-height: 1.15; }
.cmp-duel__name a { color: #fff; text-decoration: none; }
.cmp-duel__name a:hover { text-decoration: underline; }
.cmp-duel__facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); }
.cmp-duel__facts dt { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-muted); }
.cmp-duel__facts dd { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); color: #fff; }
.cmp-duel__vs {
  align-self: center; margin-top: -3rem;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  font: italic 700 1rem/1 var(--font-display); color: var(--navy-950);
  background: conic-gradient(from 180deg, var(--side-a) 0 50%, var(--side-b) 50% 100%);
  box-shadow: 0 0 0 4px var(--navy-800), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}
@media (min-width: 60rem) {
  .cmp-hero { padding-block: var(--s-7) var(--s-8); }
  .cmp-duel { gap: var(--s-6); }
  .cmp-duel__vs { width: 3.6rem; height: 3.6rem; font-size: 1.35rem; margin-top: -5rem; }
  .cmp-duel__name { font-size: var(--step-3); }
  .cmp-duel__facts dd { font-size: var(--step-2); }
}

/* ------------------------------------------------------------------ verdict */

.cmp-verdict { display: grid; gap: var(--s-3); max-width: 50rem; }
.cmp-verdict .lede { max-width: none; font-size: var(--step-0); }
.cmp-verdict__choice {
  position: relative; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: var(--radius-m); background: var(--paper-alt); border: 1px solid var(--line);
}
.cmp-verdict__choice::before {
  content: ""; position: absolute; left: 0; top: var(--s-3); bottom: var(--s-3); width: 4px; border-radius: 0 4px 4px 0;
}
.cmp-verdict__choice--a::before { background: var(--side-a); }
.cmp-verdict__choice--b::before { background: var(--side-b); }
.cmp-verdict__choice--note::before { background: var(--line-strong); }

/* ------------------------------------------------------------------ spec table */

.cmp-key {
  display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%;
  vertical-align: -0.2em; background: var(--ink); color: #fff; font-size: 0.85em;
}
.cmp-key::before { content: "✓"; }

.cmp-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.cmp-table :is(th, td) { padding: var(--s-3) var(--s-3); text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.cmp-table thead th {
  font: 700 var(--step-0)/1.2 var(--font-display); color: var(--ink);
  border-bottom: 3px solid; background: var(--paper);
}
.cmp-table thead .cmp-col--a { border-bottom-color: var(--side-a); }
.cmp-table thead .cmp-col--b { border-bottom-color: var(--side-b); }
.cmp-table tbody th { font-weight: 600; color: var(--ink-2); }
.cmp-table tbody th small { display: block; font-weight: 400; font-size: var(--step--2); color: var(--muted); }
.cmp-table td { font-size: var(--step-0); font-weight: 500; color: var(--ink); }
.cmp-table tbody tr:hover :is(th, td) { background: var(--paper-alt); }
.cmp-win { font-weight: 750 !important; }
.cmp-win::after {
  content: "✓"; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: 0.45em;
  border-radius: 50%; font-size: 0.72em; font-weight: 700; color: #fff; vertical-align: 0.12em;
}
.cmp-win.cmp-col--a { color: var(--side-a-ink); background: var(--side-a-tint); }
.cmp-win.cmp-col--b { color: var(--side-b-ink); background: var(--side-b-tint); }
.cmp-win.cmp-col--a::after { background: var(--side-a-ink); }
.cmp-win.cmp-col--b::after { background: var(--side-b-ink); }

/* Phones: each spec becomes a two-cell row under its own label, and the ship names stick. */
@media (max-width: 39.99rem) {
  .cmp-table, .cmp-table thead, .cmp-table tbody { display: block; }
  .cmp-table tr { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp-table thead { position: sticky; top: 0; z-index: 2; }
  .cmp-table thead td { display: none; }
  .cmp-table thead th { padding: var(--s-2) var(--s-3); font-size: var(--step--1); line-height: 1.25; }
  .cmp-table tbody th { grid-column: 1 / -1; padding: var(--s-3) var(--s-3) 0; border-bottom: 0; font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; }
  .cmp-table tbody th small { display: inline; text-transform: none; letter-spacing: 0; margin-left: 0.4em; }
  .cmp-table tbody th small::before { content: "· "; }
  .cmp-table td { padding: var(--s-1) var(--s-3) var(--s-3); }
  .cmp-table td.cmp-col--b { border-left: 1px dashed var(--line); }
  .cmp-table tbody tr:hover :is(th, td) { background: none; }
  .cmp-table .cmp-win.cmp-col--a { background: var(--side-a-tint); }
  .cmp-table .cmp-win.cmp-col--b { background: var(--side-b-tint); }
}
@media (min-width: 40rem) {
  .cmp-table thead th { position: sticky; top: 0; z-index: 2; }
  .cmp-table tbody th { width: 34%; }
  .cmp-table :is(td, thead th) { width: 33%; }
}

/* ------------------------------------------------------------------ bliss bars */

.cmp-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-4); font-size: var(--step--1); font-weight: 600; }
.cmp-legend__item { display: inline-flex; align-items: center; gap: 0.5em; }
.cmp-legend__item::before { content: ""; width: 1.6em; height: 0.6em; border-radius: var(--radius-pill); }
.cmp-legend__item--a::before { background: var(--side-a); }
.cmp-legend__item--b::before { background: var(--side-b); }
.cmp-unscored { margin-bottom: var(--s-3); font-size: var(--step--1); color: var(--muted); }

.cmp-bliss { display: grid; gap: var(--s-3); }
.cmp-bliss__row {
  display: grid; gap: 5px; padding: var(--s-3) var(--s-4);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-m);
}
.cmp-bliss__label { font-weight: 650; font-size: var(--step--1); color: var(--ink-2); }
.cmp-bar {
  position: relative; display: block; height: 1.35rem; border-radius: var(--radius-pill);
  /* the track carries tick marks at every point of the ten */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(46, 97, 115, 0.12) calc(10% - 1px) 10%),
    var(--paper-alt);
}
.cmp-bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%);
  border-radius: inherit; transform-origin: left;
  animation: cmp-grow 0.9s var(--ease) both 0.25s;
}
.cmp-bar--a::before { background: linear-gradient(90deg, rgba(32, 168, 236, 0.55), var(--side-a)); }
.cmp-bar--b::before { background: linear-gradient(90deg, rgba(249, 129, 47, 0.5), var(--side-b)); }
.cmp-bar__val {
  position: absolute; top: 50%; left: calc(var(--v) * 1%); transform: translate(0.45rem, -50%);
  font-size: var(--step--2); font-weight: 650; color: var(--ink-2);
}
/* high scores put the number inside the bar */
.cmp-bar--high .cmp-bar__val { transform: translate(calc(-100% - 0.5rem), -50%); color: var(--navy-950); }
.cmp-bar--win .cmp-bar__val { font-weight: 800; color: var(--ink); }
@keyframes cmp-grow { from { transform: scaleX(0); } }
@media (min-width: 40rem) {
  .cmp-bliss { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
}

/* ------------------------------------------------------------------ profiles */

.cmp-profiles { display: grid; gap: var(--s-7); }
@media (min-width: 60rem) { .cmp-profiles { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-8); } }
.cmp-profile { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 4px solid; }
.cmp-profile--a { border-top-color: var(--side-a); }
.cmp-profile--b { border-top-color: var(--side-b); }
.cmp-profile__name { font-size: var(--step-3); }
.cmp-profile__snap { color: var(--ink-2); }
.cmp-profile__sub { margin-top: var(--s-3); font-size: var(--step-0); }
.cmp-profile__highlights { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.cmp-profile__highlights li { position: relative; padding-left: 1.5em; }
.cmp-profile__highlights li::before {
  content: ""; position: absolute; left: 0.1em; top: 0.55em; width: 0.6em; height: 0.6em; border-radius: 2px; transform: rotate(45deg);
}
.cmp-profile--a .cmp-profile__highlights li::before { background: var(--side-a); }
.cmp-profile--b .cmp-profile__highlights li::before { background: var(--side-b); }
.cmp-cruises { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.cmp-cruise { flex-direction: row; min-height: 6.5rem; }
.cmp-cruise__img { width: 34%; max-width: 10rem; aspect-ratio: auto; object-fit: cover; flex: none; background: var(--paper-alt); }
.cmp-cruise__body { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); align-content: center; min-width: 0; }
.cmp-cruise .card__title { font-size: var(--step-0); }
.cmp-profile__links { margin-top: var(--s-3); }
.cmp-profile__links .btn { font-size: var(--step--1); }

/* ------------------------------------------------------------------ FAQ */

.cmp-faq { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.cmp-faq details { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--paper); }
.cmp-faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); font-weight: 650;
}
.cmp-faq summary::-webkit-details-marker { display: none; }
.cmp-faq summary::after { content: "+"; font: 700 1.3rem/1 var(--font-display); color: var(--amber-ink); transition: transform 0.2s var(--ease); }
.cmp-faq details[open] summary::after { transform: rotate(45deg); }
.cmp-faq details p { padding: 0 var(--s-4) var(--s-4); color: var(--ink-2); }

/* ------------------------------------------------------------------ CTA, related, pairs */

.cmp-cta__inner { display: grid; gap: var(--s-5); align-items: center; }
.cmp-cta__copy { display: grid; gap: var(--s-3); max-width: 42rem; }
@media (min-width: 60rem) { .cmp-cta__inner { grid-template-columns: 1fr auto; } }

.cmp-related { display: grid; gap: var(--s-6); }
@media (min-width: 50rem) { .cmp-related { grid-template-columns: 1fr 1fr; } }
.cmp-related h3 { margin-bottom: var(--s-3); }
.cmp-related__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.cmp-related__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-1); border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 600;
  transition: padding 0.2s var(--ease), color 0.2s var(--ease);
}
.cmp-related__list small { font-weight: 400; color: var(--muted); text-align: right; }
.cmp-related__list a:hover { color: var(--cyan-ink); padding-left: var(--s-3); }

.cmp-pairs { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.cmp-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s-3);
  height: 100%; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--paper); color: var(--ink); text-decoration: none;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.cmp-pair:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); border-color: var(--line-strong); }
.cmp-pair__ship { display: grid; gap: 2px; min-width: 0; }
.cmp-pair__ship:last-child { text-align: right; }
.cmp-pair__ship strong { font: 700 var(--step-0)/1.2 var(--font-display); }
.cmp-pair__ship small { font-size: var(--step--2); color: var(--muted); }
.cmp-pair__vs {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font: italic 700 0.8rem/1 var(--font-display); color: var(--navy-950);
  background: conic-gradient(from 180deg, var(--side-a) 0 50%, var(--side-b) 50% 100%);
}

.cmp-hero--index { padding-block: var(--s-7) var(--s-8); }
.cmp-hero--index::before { display: none; }
.cmp-hero--index h1 { font-size: var(--step-5); }
.cmp-hero__picker { margin-top: var(--s-3); }
.cmp-notice {
  justify-self: start; padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill);
  background: rgba(249, 129, 47, 0.16); color: var(--amber-soft); font-weight: 600; font-size: var(--step--1);
}