/* ============================================================================
   devices/ring/compare-materials · page sheet, scoped to `.cmp` on <body>

   A discipline rather than a look: on this page there is no card, no tint, no
   rule around anything, and no second colour. Three products stand on the white
   of the page, their photographs cut out, and every fact underneath is set in
   one of two inks at one of two sizes, separated by hairlines that run the full
   width rather than boxing each cell.

   THREE COLUMNS, NOT FOUR. The first pass of this page put the whole catalogue
   on screen at once. Three, chosen through three dropdowns, is the number a
   row of specifications can actually be read across. The catalogue is five
   and the page shows three of them.

   THE COLUMN HEAD ORDER, and the reason the head exists at
   all: picker, photograph, finishes, finish name, product name, price, Buy.
   Buy used to be the last row of the table, which is the one place on a
   comparison page nobody arrives at having decided anything.

   FOUR GRIDS, ONE COLUMN TEMPLATE. The heads, the sticky name bar and the rows
   share `--cmp-cols` and `--cmp-gap`, which is what lets the bar stick on its
   own while staying in step with the columns above and below it. One number
   changes all of them. Inside the heads a second grid runs the other way: the
   seven parts of a head are seven shared rows, so the three Buy buttons sit on
   one line however differently the names and the discs above them wrapped.

   NO TINTS AND NO BORDERS AROUND ANYTHING. The only rules on this page are the
   full width hairlines between rows and the hairline around the three pickers,
   and the only ground is the page's own.
   ========================================================================= */

.cmp {
  --cmp-cols: repeat(3, minmax(0, 1fr));
  --cmp-gap: clamp(16px, 2.6vw, 48px);
  --cmp-rule: var(--divider, #10214b1f);
  --cmp-ink: var(--ink-900);
  --cmp-body: var(--ink-600);
  --cmp-quiet: var(--ink-400);
  --cmp-accent: var(--phenome-blue-500, #203a85);
  --cmp-tint: var(--gl-tint-sunk, #f4f6fb);
  --cmp-ease: cubic-bezier(.4, 0, .2, 1);
}

/* The label on each picker names the column for a screen reader and is the one
   thing on the page that is not meant to be seen: three visible words reading
   "First column" over three dropdowns whose own text already says what they
   hold would be noise. */
.cmp-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   1 · THE OPENING

   A title and one line. The title takes the kit's two tone pair, which every
   page in this round takes: the held back line in blue 200, the statement it
   arrives at in the heading ink. Nothing else is on this screen, because the
   three pickers directly under it are the page's actual opening.
   ------------------------------------------------------------------------ */
.cmp-top { padding: clamp(34px, 5vw, 76px) 0 clamp(26px, 3.4vw, 44px); }
.cmp-lede {
  margin: 20px 0 0;
  max-width: 54ch;
  font-size: 19px; line-height: 1.55;
  color: var(--cmp-body);
}

/* ---------------------------------------------------------------------------
   2 · THE COLUMN HEADS

   Seven parts in one order, three times. The outer grid holds the three
   columns; the inner one holds the seven rows and is a SUBGRID, so the seven
   parts line up across the three columns rather than each column stacking to
   its own rhythm. Without it a four disc column pushes its name, its price and
   its Buy button a line below the two disc column beside it, and the reader has
   to work out which price belongs to which photograph.

   Where subgrid is missing the head is a plain column: everything is in the
   same order and nothing is lost but the shared baselines.
   ------------------------------------------------------------------------ */
/* The sticky bar's containing block, and the only reason this element exists:
   a sticky item travels to the bottom of its own parent, so the parent has to
   END where the rows end rather than where the section does. */
.cmp-table { position: relative; }

.cmp-heads {
  display: grid;
  grid-template-columns: var(--cmp-cols);
  column-gap: var(--cmp-gap);
  align-items: start;
}
.cmp-head { display: flex; flex-direction: column; min-width: 0; }

@supports (grid-template-rows: subgrid) {
  /* picker, photograph, discs, finish name, name, price, buy */
  .cmp-heads { grid-template-rows: repeat(7, auto); }
  .cmp-head {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

/* ---- the picker --------------------------------------------------------
   A native select, because it is the one control that already knows how to be
   a long list on a phone, how to be typed at on a desktop and how to say
   "disabled" to a screen reader without being told. Everything here is the
   chrome coming off: the platform's own arrow, ground and radius replaced by
   the site's hairline and its chevron, drawn as a background rather than an
   element so the control stays one tag.
   ---------------------------------------------------------------------- */
.cmp-pick { display: block; margin-bottom: clamp(18px, 2vw, 28px); }
.cmp-pick select {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%;
  height: 46px;
  padding: 0 40px 0 16px;
  border: 1px solid var(--cmp-rule);
  border-radius: 12px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2310214b' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  font-size: 17px; line-height: 44px;
  color: var(--cmp-ink);
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color 200ms var(--cmp-ease);
}
.cmp-pick select:hover { border-color: rgba(16, 33, 75, .32); }
.cmp-pick select:focus-visible {
  outline: 2px solid var(--phenome-blue-400, #4664b0);
  outline-offset: 2px;
}
/* The two products already on screen in the other columns. Greyed rather than
   dropped, so the list is the same five every time it opens and the one a
   reader is looking for is where they last saw it. */
.cmp-pick select option:disabled { color: var(--cmp-quiet); }

/* ---- the photograph ----------------------------------------------------
   Cut out renders on the page's own white, contained rather than covered, so a
   ring and a band sit at their own proportions inside one frame instead of
   being cropped to a common one. `aspect-ratio` holds the row level before the
   images decode, which is what keeps everything under it from jumping on load.
   ---------------------------------------------------------------------- */
.cmp-fig { position: relative; margin: 0 0 clamp(16px, 1.8vw, 24px); aspect-ratio: 4 / 3; }
.cmp-fig img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  transition: opacity 260ms var(--cmp-ease);
}
/* A band plate is portrait where a ring plate is landscape, so contained in a
   shared frame the band reaches the full height and the ring does not. That is
   true to the objects — a band IS the larger thing — but the full difference
   reads as two pictures at two scales rather than one row, so the band is held
   back to a little under the frame. */
.cmp-fig.is-band img { padding: 2% 0 4%; box-sizing: border-box; }
/* Faded while the next plate decodes, so a column never shows the finish it
   just left stretched into the new plate's box. */
.cmp-fig.is-swapping img { opacity: 0; }

/* ---- the finishes ------------------------------------------------------
   The lit material discs from devices/ring/finish.css, the same nine the ring
   page draws, so a brushed silver reads as brushed and a matte as matte rather
   than as three flat greys. The Band's straps have no entry there and are lit
   as a matte in their own colour. Clicking one changes the photograph above.
   ---------------------------------------------------------------------- */
.cmp-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px -5px; min-height: 40px; }
/* The name of the chosen finish, under its discs. */
.cmp-dotname {
  margin: 0 0 14px;
  font-size: 16px; line-height: 22px;
  color: var(--cmp-body);
}

/* ---- the name, the price, and Buy --------------------------------------
   The whole point of moving them here: the
   thing, what it costs, and the button, directly under its photograph rather
   than forty rows below it.
   ---------------------------------------------------------------------- */
.cmp-name {
  margin: 0;
  font-size: clamp(21px, 1.9vw, 26px); line-height: 1.2;
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--cmp-ink);
  text-wrap: balance;
}
.cmp-price {
  margin: 6px 0 16px;
  font-size: 17px; line-height: 24px;
  color: var(--cmp-body);
  font-variant-numeric: tabular-nums;
}
.cmp-buy { align-self: start; justify-self: start; width: 100%; justify-content: center; }
@supports (grid-template-rows: subgrid) {
  .cmp-buy { align-self: start; }
}

/* ---------------------------------------------------------------------------
   3 · THE NAME BAR

   Three names and three prices, stuck under the site's own navigation for the
   whole length of the comparison. It is the one thing on the page with a
   ground, and the ground is white, which is the page's: without it the rows
   would scroll through the type. The hairline under it is the same hairline the
   rows use, so the bar reads as the first of them rather than as a header
   bolted on top.

   It carries the photograph at thumbnail size because forty rows below the
   heads a name alone stops being enough to tell a white ceramic ring from a
   brushed metal one, and telling them apart is the entire exercise.
   ------------------------------------------------------------------------ */
.cmp-bar {
  position: sticky; top: var(--ph-nav-h, 44px); z-index: 5;
  display: grid;
  grid-template-columns: var(--cmp-cols);
  column-gap: var(--cmp-gap);
  /* The margin is the air between the head's last link and the bar; the
     padding is the air the bar keeps once it is stuck under the navigation,
     where there is no link above it any more. */
  margin-top: clamp(12px, 1.6vw, 24px);
  padding: clamp(12px, 1.4vw, 18px) 0 12px;
  background: #fff;
  border-bottom: 1px solid var(--cmp-rule);
}
.cmp-barc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmp-barc img {
  flex: 0 0 auto;
  width: 46px; height: 36px;
  object-fit: contain; object-position: center;
}
.cmp-barn {
  margin: 0;
  font-size: 17px; line-height: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cmp-ink);
}
.cmp-barp {
  margin: 1px 0 0;
  font-size: 15px; line-height: 20px;
  color: var(--cmp-body);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   4 · THE ROWS

   2026-09-22, at 1440: each group
   is a pill (icon and name) sitting on a full width hairline, then one fact per
   line, centred in its column, the columns answering on the SAME line so a
   reader's eye runs straight across. No row labels anywhere: every line says
   what it is ("Very high scratch resistance", not "Very high" under a label).
   A product with nothing on a line gets a short drawn dash.

   The lines are one grid per group, written row major (line 0 of all three
   columns, then line 1), so a line that wraps in one column pushes the whole
   line down in all three and nothing drifts out of step.
   ------------------------------------------------------------------------ */
.cmp-rows { display: block; }
.cmp-grp { padding: clamp(36px, 3.6vw, 56px) 0 clamp(8px, 1vw, 16px); }
.cmp-grp:first-child { padding-top: clamp(28px, 3vw, 44px); }

.cmp-grp-h {
  position: relative;
  display: flex; justify-content: center;
  margin: 0 0 clamp(26px, 2.6vw, 36px);
  font: inherit;
}
.cmp-grp-h::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--cmp-rule);
}
.cmp-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 18px 7px 15px;
  border-radius: 99px;
  background: var(--cmp-tint);
  font-size: 17px; line-height: 22px; font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cmp-accent);
}
.cmp-pill svg { width: 20px; height: 20px; flex: none; color: #000; }

.cmp-lines {
  display: grid;
  grid-template-columns: var(--cmp-cols);
  column-gap: var(--cmp-gap);
  row-gap: 20px;
}
.cmp-ln {
  margin: 0; min-width: 0;
  padding-inline: clamp(0px, 1.6vw, 24px);
  font-size: 17px; line-height: 24px;
  color: var(--cmp-ink);
  text-align: center;
  text-wrap: balance;
}
/* THE VALUE ICONS, 2026-09-23 by request: a small drawing over an answer so
   the eye finds the difference before it reads it. One 40px drawing per LINE, chosen by the answer, not by
   the row: IP67 is a drop, 5 ATM a swimmer, a shower a shower head, so three
   different pictures on one line say "these differ" at a glance. The symbols
   live in assets/icons/compare.svg, shared with testing/compare; stroke and
   the two inks are set here and inherited into the <use> clone. */
.cmp-ln.has-ic { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cmp-ic {
  display: block; flex: none;
  width: 40px; height: 40px;
  /* Black (user ruling, 2026-09-23, after a dark grey round): every line of
     the drawing is black; only the soft fill behind it stays a pale grey so
     the shapes keep their body. The group pill glyphs and the "same in all"
     glyphs are black too (see .cmp-pill svg and .cmp-spec-k svg). */
  color: #000;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  --ic-a: #ececee;
  --ic-b: #000;
  overflow: visible;
}
.cmp-lines { row-gap: 28px; }
/* A dash beside two drawn answers sits on their text line, not beside their
   icons: the cells of one line share a row, so ending it lines them up. */
.cmp-ln.is-none { align-self: end; }

/* The dash is drawn, not typed: a 16 by 2 bar in the quiet ink, centred on
   the line's own x height, so it reads as an absence and never as copy. */
.cmp-none {
  display: inline-block; vertical-align: middle;
  width: 16px; height: 2px; border-radius: 2px;
  background: var(--cmp-ink);
}

/* Only what differs is shown (compare.js prune()): a line the three columns
   agree on, and a group left with no line, carry `hidden`. Nothing folds. */
.cmp-ln[hidden], .cmp-grp[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   5 · WHAT IS THE SAME

   The whole argument of the page. Repeating every specification in every
   column only makes sense when products genuinely differ down the list; three
   finishes of one ring do not. Everything
   identical is stated once, full width, in a run of short lines, and the rows
   above carry only what actually changes between the five.
   ------------------------------------------------------------------------ */
.cmp-same { padding: clamp(40px, 5vw, 76px) 0 0;
            border-top: 1px solid var(--cmp-rule); margin-top: clamp(30px, 3.4vw, 50px); }
/* The kit's two tone pair, stepped down the way the close is: this heading
   sits over a grid of blocks, not a screen of its own. Centred, because the
   Band's Specifications heading that this grid is copied from is centred. */
.cmp-same-h { margin: 0 auto clamp(30px, 3.4vw, 50px); }
.cmp-same .ph-display { font-size: clamp(36px, 4.8vw, 72px); }

/* devices/band's Specifications grid (band.css § 5), 2026-09-21 by request, at
   that page's own numbers: four to a row, 12 apart, a tinted block at radius
   21, the name at 19 to 23 in the heading ink with a 26px blue glyph beside it,
   and each fact at 17 in the body ink behind a 6px blue dot. The tint is the
   one ground on this page: a block is separated from the white it sits on by
   one step of the ramp, never by a border. */
.cmp-same-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.cmp-spec {
  margin: 0;
  padding: clamp(22px, 2vw, 30px);
  border-radius: var(--ph-r21, 21px);
  background: var(--cmp-tint);
}
/* The glyph sits ABOVE the name, not beside it (2026-09-23): at four to a row
   a block is about 300px wide, and a 26px glyph plus its gap beside the name
   folded six of the eight names onto two lines. Stacked, the name has the
   full width of the block and the glyphs line up down the row. */
.cmp-spec-k {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  margin: 0;
  font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cmp-ink);
  text-wrap: balance;
}
.cmp-spec-k svg { flex: none; width: 28px; height: 28px; color: #000; }
.cmp-spec-l { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.cmp-spec-l li {
  position: relative;
  padding-left: 18px;
  font-size: 17px; line-height: 1.45;
  color: var(--cmp-body);
}
.cmp-spec-l li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--phenome-blue-300, #7185bd);
}

/* ---------------------------------------------------------------------------
   6 · THE CLOSE

   devices/ring's closing frame (ring.css § 9e/9f, `.ph-flat .closer`),
   2026-09-22 by request, at that page's own numbers: the forest photograph
   full bleed, a navy ramp from the left where the copy sits, the kit's two tone
   pair in white, one line, and the filled button inverted to white because the
   accent on this navy has no findable edge. The picture drifts against the
   scroll (compare.js, `[data-par]`), same arithmetic as the ring page: 126%
   tall on a 13% overhang, travelling +-8.5%.
   ------------------------------------------------------------------------ */
.cmp-closer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(40px, 5vw, 80px);
}
.cmp-closer-win { position: absolute; inset: 0; overflow: hidden; }
.cmp-closer-win img {
  position: absolute;
  inset: -13% 0 auto 0;
  width: 100%; height: 126%;
  object-fit: cover;
  display: block;
}
.cmp-closer.is-lively .cmp-closer-win img {
  transform: translate3d(0, calc((.5 - var(--pr-p, .5)) * 17%), 0);
}
.cmp-closer-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 30, 87, .84) 0%,
    rgba(10, 30, 87, .66) 36%,
    rgba(10, 30, 87, .28) 74%,
    rgba(10, 30, 87, .12) 100%
  );
}
.cmp-closer-copy {
  position: relative;
  padding-block: clamp(112px, 13vw, 188px);
}
.cmp-closer-copy .ph-display { margin: 0; font-size: clamp(44px, 6vw, 92px); }
.cmp-closer-copy p {
  margin: 16px 0 0;
  max-width: 42ch;
  font-size: var(--ph-lead-size);
  line-height: var(--ph-lead-lh);
  letter-spacing: var(--ph-tr-21-400);
  color: rgba(255, 255, 255, .82);
}
.cmp-closer-copy .cta-actions { justify-content: flex-start; }
.cmp-closer-copy .btn {
  background: var(--ph-white, #fff);
  color: var(--ph-text-1) !important;
}
.cmp-closer-copy .btn:hover { background: #f2f4f9; }
.cmp-closer-copy .btn:active { background: var(--cmp-tint); }

/* ---------------------------------------------------------------------------
   7 · NARROWER SCREENS

   THE COLUMNS DO NOT FOLD, and that decision is the whole section. Three
   columns folding into one puts the second product's photograph below the
   first product's last specification, and a comparison read one column at a
   time is a specification list, which this page already links to two of.

   So the three stay three and the whole table scrolls sideways instead, as a
   single scroller wrapping the heads, the bar and the rows, which is what keeps
   the pictures, the names and the answers travelling together. 640px is the
   floor: three columns at about 200 each, wide enough for "Grade 5 aerospace
   titanium" to set on three lines, for the finish discs to stay on one, and for
   a picker to hold "Band, Sport silicone" without clipping it.

   The row labels stay readable through that scroll because the text inside each
   one is stuck to the left edge of the scroller on the page's own white, so the
   row a reader is on is named however far right they have swiped.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .cmp { --cmp-gap: 16px; }
  .cmp-table {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* The section's own side margin, given back to the scroller so a column can
       run to the edge of the screen rather than stopping short of it. */
    margin-inline: calc(var(--ph-margin, 22px) * -1);
    padding-inline: var(--ph-margin, 22px);
  }
  .cmp-heads, .cmp-bar, .cmp-rows { min-width: 640px; }
  /* Sticky belongs to the scrollport, and the scrollport is now this container
     rather than the page, so the bar would stick to nothing. */
  .cmp-bar { position: static; }
  .cmp-barc img { display: none; }
  .cmp-grp-h { justify-content: flex-start; }
  .cmp-pill { position: sticky; left: 0; }
  .cmp-pick select { font-size: 16px; padding-inline: 12px 32px; background-position: right 11px center; }
}
@media (max-width: 1180px) {
  .cmp-same-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The ramp turns vertical with the composition: at one column the copy sits
   over the middle of the frame rather than its left third. */
@media (max-width: 900px) {
  .cmp-closer-scrim {
    background: linear-gradient(
      180deg,
      rgba(10, 30, 87, .58) 0%,
      rgba(10, 30, 87, .82) 58%,
      rgba(10, 30, 87, .9) 100%
    );
  }
}
@media (max-width: 620px) {
  .cmp-same-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-fig img, .cmp-pick select { transition: none; }
  .cmp-closer.is-lively .cmp-closer-win img { transform: none; }
}