/* eyespecialist.sg — /glaucoma/
 * ---------------------------------------------------------------------------
 * Loaded after site.css, which owns everything shared: .sec .band .copy .head
 * .faq .toc .index .marks .crumb .byline .sheet .clinic .picker .assure, and
 * .svc--fees — the paper panel this table sits in. Only .cmp is new.
 */

/* ---- .cmp — the glaucoma/cataract comparison -----------------------------
 * A REAL TABLE, so each row label is written once. It shipped 6 Sep 2026 as
 * two subgrid-aligned panels and the owner rejected that the same day: read
 * linearly, every label appeared twice. Do not go back to panels.
 *
 * IT WEARS THE FEE TABLE'S COLOURS, AND THAT IS NOW THE HOUSE TABLE LOOK
 * (owner, 6 Sep 2026, "for all future tables"). The surface comes from
 * .svc--fees in site.css — reused, not restated — so the panel, its hairline
 * and its accent left edge are single-sourced. What is restated below is only
 * what .fees does to its own cells, because .fees is a TWO-column money table
 * (.fees__price is width:1%, right-aligned, nowrap) and none of that survives
 * a three-column comparison.
 *
 * .svc--fees ONLY READS AS A PANEL ON A TINTED BAND — its fill is
 * --color-paper, the page's own colour. #compare is a .band, which is why this
 * works here; on a plain .sec only the accent edge would show.
 *
 * THE ONE DELIBERATE DEPARTURE IS SIZE, NOT COLOUR. .fees sets --text-md; this
 * keeps --text-sm, because three columns of sentences at 20px would push the
 * scroll floor from 24rem to about 34rem and put the third column off-screen
 * on every phone. Colour, weight and rule treatment all match. */
.cmp__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* tabindex and role are on the markup, not decoration: a scroll container
 * that cannot be focused cannot be scrolled from the keyboard. */
.cmp__scroll:focus-visible {
  outline: var(--rule-thick) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}

.cmp {
  width: 100%;
  /* 24rem = a 6rem row head plus two 9rem condition columns. It only binds in
   * a narrow window — the panel is wider than this from about 34rem up, and
   * below 30rem the query at the foot of this file takes over. Both floors are
   * set by what is VISIBLE, not by the table alone: a sliver of the Cataract
   * column has to show inside the panel or nothing tells the reader there is
   * more to scroll to. At 27.5rem that column fell entirely off-screen at 320
   * and the comparison read as a list. */
  min-width: 24rem;
  border-collapse: collapse;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.cmp th,
.cmp td {
  padding-block: var(--space-sm);
  padding-inline: var(--space-xs);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: left;
  vertical-align: baseline;
}

/* BOTH CONDITION HEADS TAKE INK, and the asymmetry in .fees is not copied. It
 * heads "Service" muted and "Price" ink, because the price is that table's
 * subject; here the two conditions are peers and one of them dimmer would read
 * as the lesser column. The mono caps register is kept — that is the shared
 * part. The row-head cell stays empty, so its colour never shows. */
.cmp thead th {
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
}

.cmp tbody th,
.cmp tbody td {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0;
}

/* The row head is the muted one and the data cells are the subject — the same
 * direction .fees runs, where .fees__service is muted against its price. */
.cmp__rowhead {
  width: 1%;
  min-width: 6rem;
  padding-left: 0;
  font-weight: var(--weight-body);
  color: var(--color-ink-2);
}

.cmp__col {
  width: auto;
  color: var(--color-ink);
}

/* The reversible/not-reversible row, the one the section exists for, takes
 * --color-accent — the value .fees gives the figure that is its subject. Not a
 * tint box and not red: a filled or warning-coloured row here would be the
 * fear-appeal register CLAUDE.md bars. */
.cmp__row--key .cmp__col {
  font-weight: 600;
  color: var(--color-accent);
}

/* BASE RULES FIRST, MEDIA QUERY LAST — a @media placed earlier loses on source
 * order while still matching, the .person__portrait bug this project has paid
 * for once.
 *
 * The panel's own padding eats 35px of box at 320, which took the visible
 * sliver of the Cataract column from 32.5px down to 1.8 — invisible, so the
 * table read as two columns with nothing to scroll to. Narrowing the floor and
 * the row head only where the panel is tightest puts the signal back. */
@media (max-width: 30rem) {
  .cmp {
    min-width: 21rem;
  }

  .cmp__rowhead {
    min-width: 5rem;
  }
}