/* ============================================================================
   Tray & nozzle selector (id_cms = 6) — layout for the `.tns` body
   ----------------------------------------------------------------------------
   Loaded from templates/cms/page.tpl, gated on BOTH $cms.id == 6 and
   link_rewrite, on the same terms as about-premium.css and service-premium.css:
   if that page is ever deleted and recreated the layout simply stops applying
   and the page degrades to the generic `.page-cms.rich-text` treatment.

   Every selector below is scoped to `.tns` (or to an ancestor that contains
   one), so nothing here can reach Delivery, Legal Notice, Terms, Secure
   payment, About, the guides or the glossary.

   THE PROBLEM THIS FILE EXISTS TO FIX
   -----------------------------------
   The pairing chart is six columns wide. `cms-premium.css` gives CMS tables
   `width: 100%` and no overflow container, so on a phone the last two columns
   ("Wide-format tray" and what it holds) were clipped off the right edge of the
   viewport with no scrollbar and no way to reach them — the page's whole reason
   for existing was unreadable on the device most of its readers hold. Below
   768px each row is now its own card, with the column headings regenerated as
   labels from `nth-child` (the body cannot carry `data-*`; HTMLPurifier strips
   it — see the note at the top of the page body). Between 768px and 992px the
   table stays a table inside a scroll container.

   `selector-premium.js` restores the ARIA table roles while the card layout is
   active, because every engine drops table semantics when the display type
   changes. With JS off the cards still show every value with its label.
   ========================================================================== */

.tns {
  --tns-pink: var(--skt-pink, #d50075);
  --tns-pink-dark: var(--skt-pink-dark, #9e0056);
  --tns-pink-tint: var(--skt-pink-tint, #fef0f7);
  --tns-pink-border: var(--skt-pink-border, #f0dce8);
  --tns-ink: var(--skt-ink, #1a0010);
  --tns-body: #3a3a40;
  --tns-muted: #55555f;
  --tns-line: #e9e9ee;
  --tns-radius: 14px;
}

/* ---------- page shell ----------
   `.page-cms.rich-text` caps every CMS page at 52rem and leaves it flush left,
   which is right for a column of prose and wrong for a six-column chart: the
   table was squeezed into two thirds of a 1280px viewport with a wide empty
   gutter beside it. `:has()` is already the mechanism about-premium.css uses
   for exactly this, so this page widens and centres the column the same way. */
.page-cms.rich-text:has(.tns) {
  max-width: 64rem;
  margin-inline: auto;
}

/* The <h1> lives in `.page-header`, a sibling of `#content` — reach it from the
   wrapper that contains both. `.h4` makes the heading of a long guide smaller
   than its own section headings; this restores the hierarchy. */
#content-wrapper:has(.tns) .page-header {
  max-width: 64rem;
  margin-inline: auto;
}

#content-wrapper:has(.tns) .page-header h1 {
  font-family: 'Playfair Display', serif;
  font-variant-numeric: lining-nums;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.2;
  color: var(--tns-ink);
  margin-bottom: 0.35rem;
}

/* ---------- headings ----------
   cms-premium.css draws a full-width hairline under every CMS <h2>. On this
   page the headings are short, so the rule ran on far past the words; the same
   thing was fixed on the service page (CHANGELOG 2026-09-09) by replacing it
   with a short rule tied to the text. */
.page-cms.rich-text .tns h2,
.tns h2 {
  font-family: 'Playfair Display', serif;
  font-variant-numeric: lining-nums;
  font-size: clamp(1.3rem, 2.6vw, 1.65rem);
  line-height: 1.25;
  color: var(--tns-ink);
  border-bottom: 0;
  padding-bottom: 0;
  margin: 2.75rem 0 1rem;
}

.tns h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.7rem;
  background: var(--tns-pink);
}

.tns h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--tns-ink);
  margin: 0 0 0.5rem;
}

.tns p {
  color: var(--tns-body);
}

.tns__lede {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--tns-muted);
  margin-bottom: 1.75rem;
}

/* The CMS prose styles colour `li::marker` for real bullet lists. Every list in
   this page is a card grid or a row of chips, so the marker is removed on the
   items themselves — setting `list-style` on the <ul> alone did not survive the
   theme's more specific rules. */
.page-cms.rich-text .tns__pairs li,
.page-cms.rich-text .tns__steps li,
.page-cms.rich-text .tns__compare li,
.page-cms.rich-text .tns__chips li {
  list-style: none;
}

.page-cms.rich-text .tns__pairs li::marker,
.page-cms.rich-text .tns__steps li::marker,
.page-cms.rich-text .tns__compare li::marker,
.page-cms.rich-text .tns__chips li::marker {
  content: none;
}

/* ---------- the short answer ----------
   The page's answer, given before anything has to be scrolled or scanned. It is
   also the block an answer engine quotes, which is why it repeats the five
   pairings as text rather than pointing at the chart. */
.tns__answer {
  border: 1px solid var(--tns-pink-border);
  border-left: 4px solid var(--tns-pink);
  border-radius: 0 var(--tns-radius) var(--tns-radius) 0;
  background: var(--tns-pink-tint);
  padding: 1.4rem 1.5rem 1.5rem;
  margin: 0 0 1.75rem;
}

.tns__answer-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tns-pink-dark);
}

.tns__answer-lead {
  margin: 0 0 1rem;
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--tns-ink);
}

.tns__answer-lead strong {
  color: var(--tns-pink-dark);
}

.tns__pairs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
}

.tns__pairs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: #fff;
  border: 1px solid var(--tns-pink-border);
  border-radius: 9px;
}

.tns__pair-size {
  font-weight: 600;
  color: var(--tns-ink);
  font-variant-numeric: tabular-nums;
}

.tns__pair-part {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tns-pink-dark);
  white-space: nowrap;
}

.tns__answer-note {
  margin: 0;
  font-size: 0.925rem;
  line-height: 1.6;
  color: var(--tns-muted);
}

/* ---------- three steps ---------- */
.tns__steps {
  list-style: none;
  counter-reset: tns-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
  margin: 0 0 0.5rem;
  padding: 0;
}

.tns__steps li {
  counter-increment: tns-step;
  position: relative;
  padding: 1.1rem 1.15rem 1.15rem 1.15rem;
  border: 1px solid var(--tns-line);
  border-radius: var(--tns-radius);
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tns-body);
}

.tns__steps li::before {
  content: counter(tns-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 0.65rem;
  border-radius: 50%;
  background: var(--tns-pink);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: lining-nums;
}

.tns__steps li strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--tns-ink);
}

/* ---------- stone-size picker (built by selector-premium.js) ----------
   Absent entirely when JavaScript does not run — the chart below it is the
   fallback, and it is complete on its own. */
.tns__picker {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--tns-line);
  border-radius: var(--tns-radius);
  background: #fcfcfd;
}

.tns__picker-label {
  display: block;
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tns-ink);
}

.tns__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 44px minimum touch target, both axes. */
.tns__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--tns-pink-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tns-ink);
  font: inherit;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tns__chip:hover {
  border-color: var(--tns-pink);
  background: var(--tns-pink-tint);
}

.tns__chip[aria-pressed="true"] {
  background: var(--tns-pink);
  border-color: var(--tns-pink);
  color: #fff;
  font-weight: 600;
}

.tns__picker-status {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--tns-muted);
}

.tns__picker-status:empty {
  display: none;
}

/* ---------- the pairing chart ---------- */
.tns__chart-wrap {
  margin: 0 0 1.25rem;
}

.tns__chart {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.tns__chart-caption {
  caption-side: bottom;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tns-muted);
  text-align: left;
}

.tns__chart thead th {
  background: var(--tns-pink-tint);
  border: 1px solid var(--tns-pink-border);
  padding: 0.7rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tns-ink);
  text-align: left;
  vertical-align: bottom;
}

.tns__chart tbody th,
.tns__chart tbody td {
  border: 1px solid var(--tns-line);
  padding: 0.7rem 0.8rem;
  vertical-align: top;
  text-align: left;
}

.tns__chart tbody th {
  font-weight: 700;
  color: var(--tns-ink);
  white-space: nowrap;
  background: #fcfcfd;
}

.tns__chart tbody tr:hover th,
.tns__chart tbody tr:hover td {
  background: #fffafc;
}

.page-cms.rich-text .tns__chart a {
  font-weight: 600;
  color: var(--tns-pink);
  text-decoration: none;
  border-bottom: 1px solid var(--tns-pink-border);
}

.page-cms.rich-text .tns__chart a:hover,
.page-cms.rich-text .tns__chart a:focus-visible {
  color: var(--tns-pink-dark);
  border-bottom-color: var(--tns-pink);
}

/* Rows the picker has filtered out. */
.tns__chart tbody tr.is-filtered-out {
  display: none;
}

/* ---------- standard / wide comparison ---------- */
.tns__compare {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}

.tns__compare li {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--tns-line);
  border-top: 3px solid var(--tns-pink);
  border-radius: var(--tns-radius);
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tns-body);
}

.tns__compare li strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--tns-ink);
}

/* ---------- closing call to action ---------- */
.tns__cta {
  margin: 2.25rem 0 0;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--tns-pink-border);
  border-radius: 16px;
  background: var(--tns-pink-tint);
}

.tns__cta-title {
  margin: 0 0 0.35rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--tns-ink);
}

.tns__cta-text {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tns-muted);
  max-width: 40rem;
}

.tns__cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.page-cms.rich-text .tns__cta-btn,
.page-cms.rich-text .tns__cta-tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.35rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.page-cms.rich-text .tns__cta-btn {
  background: var(--tns-pink);
  border: 1px solid var(--tns-pink);
  color: #fff;
}

.page-cms.rich-text .tns__cta-btn:hover,
.page-cms.rich-text .tns__cta-btn:focus-visible {
  background: var(--tns-pink-dark);
  border-color: var(--tns-pink-dark);
  color: #fff;
}

.page-cms.rich-text .tns__cta-tel {
  background: #fff;
  border: 1px solid var(--tns-pink-border);
  color: var(--tns-pink-dark);
}

.page-cms.rich-text .tns__cta-tel:hover,
.page-cms.rich-text .tns__cta-tel:focus-visible {
  border-color: var(--tns-pink);
  color: var(--tns-pink-dark);
}

/* ---------- FAQ ----------
   Left as headings and paragraphs, not an accordion: the answers are short, all
   five are worth reading, and a collapsed answer is content a visitor has to
   work to see. The cards give the scannability an accordion would, with nothing
   hidden — which is also what keeps the FAQPage markup honest. */
.tns__faq h3,
.tns__faq p {
  padding-inline: 1.2rem;
}

.tns__faq h3 {
  padding-top: 1.15rem;
}

.tns__faq h3 {
  margin: 0;
}

/* The gap between cards belongs on the paragraph (the card's bottom half), not
   between the heading and its own answer — the two are siblings, so any gap
   applied between them would split each card down the middle. */
.tns__faq p {
  padding-bottom: 1.2rem;
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Each h3 + p pair is one card. They are siblings, not wrapped together (the
   body must stay simple enough to survive a back-office edit), so the card is
   drawn by giving the heading the top half of the border and the paragraph the
   bottom half. */
.tns__faq h3 {
  border: 1px solid var(--tns-line);
  border-bottom: 0;
  border-radius: var(--tns-radius) var(--tns-radius) 0 0;
  background: #fff;
}

.tns__faq p {
  border: 1px solid var(--tns-line);
  border-top: 0;
  border-radius: 0 0 var(--tns-radius) var(--tns-radius);
  background: #fff;
  color: var(--tns-body);
}

/* ---------- focus ---------- */
.tns a:focus-visible,
.tns__chip:focus-visible {
  outline: 2px solid var(--tns-pink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================================
   MEDIUM SCREENS — the table stays a table, inside a scroll container.
   The container is focusable so it can be scrolled from the keyboard, which is
   the WAI requirement for any region that scrolls; the accessible name and
   tabindex are added by selector-premium.js, since the page body cannot carry
   attributes that HTMLPurifier strips.
   ========================================================================== */
@media (max-width: 991.98px) {
  .tns__chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tns__chart-wrap:focus-visible {
    outline: 2px solid var(--tns-pink);
    outline-offset: 2px;
  }

  .tns__chart {
    min-width: 44rem;
  }
}

/* ============================================================================
   SMALL SCREENS — one card per stone size.

   Six columns cannot be read on a 390px screen in any arrangement that keeps
   them side by side, so each row becomes a card: the stone size is the card's
   heading and the other five values are label/value rows. The labels repeat the
   column headings and are generated here by column position, because the page
   body is not allowed to carry `data-label` (HTMLPurifier). Column order is
   therefore load-bearing — if a column is ever added, moved or removed in the
   body, fix the `nth-child` labels below in the same edit.

     1 Stone size  (the row's <th>, becomes the card heading)
     2 Nozzle
     3 Standard tray
     4 Standard tray holds
     5 Wide-format tray
     6 Wide-format tray holds
   ========================================================================== */
@media (max-width: 767.98px) {
  .tns__chart-wrap {
    overflow-x: visible;
  }

  /* A table-caption inside a `display: block` table shrink-wraps to the
     narrowest column it can find — one word per line. */
  .tns__chart-caption {
    display: block;
  }

  .tns__chart,
  .tns__chart thead,
  .tns__chart tbody,
  .tns__chart tr,
  .tns__chart th,
  .tns__chart td {
    display: block;
    min-width: 0;
  }

  /* The column headings are re-used as per-cell labels below, so the header row
     itself is redundant. Kept in the DOM (and in the accessibility tree, via
     the roles the JS restores) rather than removed. */
  .tns__chart thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tns__chart tbody tr {
    margin-bottom: 0.85rem;
    border: 1px solid var(--tns-line);
    border-radius: var(--tns-radius);
    background: #fff;
    overflow: hidden;
  }

  .tns__chart tbody th {
    border: 0;
    padding: 0.75rem 1rem;
    background: var(--tns-pink-tint);
    border-bottom: 1px solid var(--tns-pink-border);
    font-size: 1rem;
    color: var(--tns-ink);
  }

  .tns__chart tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border: 0;
    border-top: 1px solid #f4f4f7;
    padding: 0.6rem 1rem;
  }

  .tns__chart tbody td:first-of-type {
    border-top: 0;
  }

  .tns__chart tbody td::before {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tns-muted);
  }

  /* The labels themselves, by column position. */
  .tns__chart tbody td:nth-child(2)::before { content: "Nozzle"; }
  .tns__chart tbody td:nth-child(3)::before { content: "Standard tray"; }
  .tns__chart tbody td:nth-child(4)::before { content: "Standard tray holds"; }
  .tns__chart tbody td:nth-child(5)::before { content: "Wide-format tray"; }
  .tns__chart tbody td:nth-child(6)::before { content: "Wide-format tray holds"; }

  /* Part-code links get the full width of the right-hand column and a real
     touch target rather than a 12px-tall line of text. */
  .tns__chart tbody td a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    text-align: right;
  }

  .tns__answer,
  .tns__cta {
    padding: 1.15rem 1.2rem;
  }

  .tns__cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tns__cta-btn,
  .tns__cta-tel {
    width: 100%;
  }
}

/* ---------- motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  .tns__chip,
  .tns__cta-btn,
  .tns__cta-tel,
  .tns__chart a {
    transition: none;
  }
}

@media print {
  .tns__picker,
  .tns__cta {
    display: none;
  }

  .tns__chart-wrap {
    overflow: visible;
  }

  .tns__chart tbody tr {
    break-inside: avoid;
  }

  .tns__answer,
  .tns__steps li,
  .tns__compare li,
  .tns__faq h3,
  .tns__faq p {
    break-inside: avoid;
  }
}