/* /pipeline — Pipeline Leak Scorecard.
   Page-unique only. Chassis, masthead, footer, act mechanics and buttons all
   come from site.css; nothing here re-declares them. Every colour is a token
   from tokens.css — no literals. */

/* ---------- hero ---------- */
.pl-hero { padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(2rem, 5vw, 3.5rem); }
.pl-hero__inner { max-width: 46rem; }
.pl-hero h1 {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-4);
}
.pl-hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.55;
  color: var(--body-ink);
  max-width: 34rem;
  margin: 0 0 var(--space-6);
}
.pl-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.pl-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-6);
  font-size: 0.85rem; color: var(--label-ink);
}
.pl-hero__meta span { display: flex; align-items: center; gap: 0.4rem; }
.pl-hero__meta b { color: var(--ink); font-weight: 700; }

/* ---------- the tool ---------- */
.pl-tool { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.pl-card {
  max-width: 40rem;
  background: var(--card);
  border: 1px solid var(--mist);
  border-radius: 14px;
  overflow: hidden;
}

.pl-progress { padding: var(--space-4) var(--space-5) 0; }
.pl-progress__track { height: 3px; background: var(--mist); border-radius: 2px; overflow: hidden; }
.pl-progress__bar { height: 100%; width: 0; background: var(--logo); transition: width 0.35s ease; }
.pl-progress__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--space-3);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.pl-progress__cat { color: var(--logo); }
.pl-progress__count { color: var(--label-ink); font-variant-numeric: tabular-nums; }

.pl-body { padding: var(--space-5) var(--space-5) var(--space-6); }
.pl-qnum {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--label-ink);
  margin: 0 0 var(--space-3);
}
.pl-q {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.35; letter-spacing: -0.015em;
  margin: 0 0 var(--space-5);
}

/* Real buttons, generous targets. The recorded session proved these register
   first-tap at this size; the minimum here is deliberate, not incidental. */
.pl-opts { display: grid; gap: var(--space-3); }
.pl-opt {
  display: block; width: 100%; text-align: left;
  min-height: 56px;
  padding: 1rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 10px;
  font: inherit; font-size: 0.98rem; line-height: 1.4;
  color: var(--body-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}
.pl-opt:hover { border-color: var(--logo); background: var(--card); }
.pl-opt:active { transform: translateY(1px); }
.pl-opt:focus-visible { outline: 2px solid var(--logo); outline-offset: 2px; }

.pl-back {
  margin-top: var(--space-5);
  background: none; border: none; padding: 0;
  font: inherit; font-size: 0.85rem; color: var(--label-ink);
  cursor: pointer;
}
.pl-back:hover { color: var(--ink); }

/* ---------- the gate ----------
   GATE FIX 3.2, from the July 6 brief. The input's own padding is what carries
   the tap target past the 48px minimum; the old build shipped 8px and measured
   39px total, below the threshold, and a real lead was lost to it. The label
   sits inside the same clickable block (3.3, in pipeline.js) so the whole
   thing is live. Do not shrink this padding to tighten the visual rhythm. */
.pl-gate .pl-field { display: block; margin-bottom: var(--space-4); cursor: text; }
.pl-gate label {
  display: block;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--label-ink);
  margin-bottom: 0.15rem;
  cursor: text;
}
.pl-gate input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--slope);
  background: transparent;
  padding: 14px 0;
  font: inherit; font-size: 16px;   /* 16px prevents iOS zoom-on-focus */
  color: var(--ink);
  border-radius: 0;
}
.pl-gate input:focus { outline: none; border-bottom-color: var(--logo); }
.pl-gate__note { font-size: 0.8rem; line-height: 1.55; color: var(--label-ink); margin: var(--space-4) 0 0; }
.pl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- the leak map ---------- */
.pl-map { display: grid; gap: var(--space-4); margin: 0 0 var(--space-6); }
.pl-row { padding: 0; }
.pl-row__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: 0.45rem; }
.pl-row__name { font-size: 0.95rem; font-weight: 700; color: var(--ink); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pl-row__flag {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--card); background: var(--bad);
  padding: 0.2rem 0.45rem; border-radius: 3px;
}
.pl-row__tier { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.pl-tier--wide  { color: var(--bad); }
.pl-tier--leak  { color: var(--mid); }
.pl-tier--tight { color: var(--good); }

.pl-track { height: 8px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.pl-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.pl-fill--wide  { background: var(--bad); }
.pl-fill--leak  { background: var(--mid); }
.pl-fill--tight { background: var(--slope); }

.pl-read { font-size: 1.02rem; line-height: 1.6; color: var(--body-ink); margin: 0 0 var(--space-6); }
.pl-fix {
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--mist);
  border-radius: 10px;
  margin-bottom: var(--space-6);
}
.pl-fix__kicker {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--label-ink); margin: 0 0 var(--space-3);
}
.pl-fix__head { font-size: 1.08rem; line-height: 1.35; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-3); }
.pl-fix__body { font-size: 0.95rem; line-height: 1.6; color: var(--body-ink); margin: 0; }

/* ---------- what the map cannot see ---------- */
.pl-limit { padding: clamp(3rem, 7vw, 5rem) 0; }
.pl-limit__inner { max-width: 42rem; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .pl-card { border-radius: 12px; }
  .pl-body { padding: var(--space-4) var(--space-4) var(--space-5); }
  .pl-progress { padding: var(--space-4) var(--space-4) 0; }
  .pl-opt { min-height: 60px; padding: 1rem; }
  .pl-hero__cta { flex-direction: column; align-items: stretch; }
  .pl-hero__cta .tm-cta { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-progress__bar, .pl-fill, .pl-opt { transition: none; }
}