/* ==========================================================================
   Tube dimensions page (tube-dimensions.html)

   Loads on top of css/pipe-dimensions-page.css, which carries the shared
   technical-reference shell (.pd-* hero, feature strip, section heads, table,
   FAQs, closing strip). Only the tube-specific pieces live here.
   ========================================================================== */

/* Sixteen data columns rather than twenty-four. */
.pd .tb-table {
  min-width: 1320px;
}

/* The shared sheet sets a wide min-width for the big reference chart; the
   small gauge table must opt out or it blows its container. */
.pd .tb-gauge {
  min-width: 0;
}

/* Alternate the gauge column pairs so SWG/BWG stay visually grouped.
   Body cells only: the header rows are white-on-navy and a light tint there
   would wash the text out. */
.pd .tb-table td.tb-alt {
  background: #f2f6fb;
}

.pd .tb-table tbody tr:nth-child(even) td.tb-alt {
  background: #eaf1f8;
}

.pd .tb-table tr.is-selected td.tb-alt {
  background: #fff2f4;
}

/* ==========================================================================
   Gauge reference table
   ========================================================================== */

.tb-gauge {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.tb-gauge th {
  padding: 9px 8px;
  background: #0a3a70;
  color: #fff;
  border: 1px solid #2c5c8e;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.tb-gauge th.tb-gauge__corner {
  background: #06274b;
}

.tb-gauge td {
  padding: 8px;
  border: 1px solid #e3e9f0;
  text-align: center;
}

.tb-gauge tbody th {
  background: #eef3f9;
  color: #173b62;
  border: 1px solid #dbe4ee;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}

.tb-gauge tbody th small {
  display: block;
  color: var(--pd-muted);
  font-size: 10px;
  font-weight: 400;
}

.tb-gauge tr.tb-gauge__mm td {
  background: #f8fafc;
  color: var(--pd-navy);
  font-weight: 700;
}

/* The gauge currently chosen in the finder. Carries .pd so it outranks the
   .tb-gauge__mm row rule above, which is otherwise more specific. */
.pd .tb-gauge td.is-lit,
.pd .tb-gauge th.is-lit {
  background: #ec2437;
  color: #fff;
  font-weight: 900;
}

.tb-gauge-scroll {
  overflow-x: auto;
}

/* ==========================================================================
   System toggle note
   ========================================================================== */

.tb-syskey {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 14px;
  color: var(--pd-muted);
  font-size: 12px;
}

.tb-syskey b {
  color: var(--pd-navy);
}

/* ==========================================================================
   Page text colours
   Body copy #3c3a3a, headings #0c549e. The selectors mirror the ones in the
   shared sheet so they win on source order; this file now loads after it.
   The hero sits outside .pd and keeps its light-on-navy treatment, and the
   enquiry card is restored below for the same reason.
   ========================================================================== */

.pd p,
.pd .pd-head p,
.pd .pd-bullet p,
.pd .pd-standard-card p,
.pd .pd-note,
.pd details p {
  color: #3c3a3a;
}

.pd h1,
.pd h2,
.pd h3,
.pd h4,
.pd h5,
.pd h6,
.pd h2.pd-head__title,
.pd .pd-result__title,
.pd .pd-explain h3,
.pd .pd-standards h3 {
  color: #0c549e;
}

/* The enquiry card is a navy gradient, so its text stays light. */
.pd .pd-cta h3 {
  color: #fff;
}

.pd .pd-cta p {
  color: #dbe9f8;
}

/* ==========================================================================
   Page typography
   The heading font (Caviar Dreams Bold, normal weight) now lives in the shared
   css/pipe-dimensions-page.css so all four technical pages match; only the
   body-copy size is page-specific here.
   ========================================================================== */

/* Body copy defaults to 13px, which is what most of the shared components
   already use. This pulls the section-head subtitles down from the 15px
   .pd base and lifts the 12px card text and table note up to match. */
.pd p {
  font-size: 13px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 650px) {
  .tb-gauge {
    min-width: 560px;
  }
}

@media print {
  .pd .tb-table {
    min-width: 0;
  }
}