/* processing-times.css — editorial (C2 Broadsheet) reskin of the Processing
 * Times tool pages. Tokens only; loaded on the use_editorial stack alongside
 * design-system/{tokens,primitives,editorial,blocks}.css.
 *
 * TIMELINE-STATISTIC PALETTE (NOT a user verdict): the three colours below
 * encode community processing SPEED — fast=good-news, slow=caution — exactly as
 * the prior bg-success / text-warning / bg-danger did. They are muted to read as
 * editorial statistics, never as an eligibility pass/fail. Defined once here
 * because the base token set is deliberately verdict-neutral (ink + teal only).
 */
:root {
  --im-pt-fast: #3f7d5a;      /* faster processing — good news */
  --im-pt-slow: #a5711a;      /* slower processing — caution   */
  --im-pt-slowest: #a2402f;   /* slowest tail — most caution   */
}

/* ---- KPI stat row (list header) ---- */
.im-pt-stats { display: grid; grid-template-columns: 1fr; gap: var(--im-space-4); margin-top: var(--im-space-8); }
@media (min-width: 640px) { .im-pt-stats { grid-template-columns: repeat(3, 1fr); } }
.im-pt-stat { background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); padding: var(--im-space-6); text-align: center; }
.im-pt-stat__num { font-family: var(--im-font-display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1; color: var(--im-ink); }
.im-pt-stat__label { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--im-text-muted); margin-top: var(--im-space-3); }

/* ---- Hero community-meta line ---- */
.im-pt-community { display: flex; align-items: center; gap: var(--im-space-3);
  margin-top: var(--im-space-6); font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-muted); }
.im-pt-community i { color: var(--im-accent-200); font-size: 16px; }
.im-pt-community strong { color: var(--im-text-200); font-weight: 700; }

/* ---- Filter bar (framed group -> lives in a --band section) ---- */
.im-pt-filter { background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); padding: var(--im-space-6); }
.im-pt-filter__grid { display: grid; grid-template-columns: 1fr; gap: var(--im-space-5); align-items: end; }
@media (min-width: 900px) { .im-pt-filter__grid { grid-template-columns: repeat(3, 1fr) auto; } }
.im-pt-label { display: block; font-family: var(--im-font-display); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--im-text-muted); margin-bottom: var(--im-space-2); }
.im-pt-select-wrap { position: relative; }
.im-pt-select-wrap::after { content: ""; position: absolute; right: var(--im-space-4); top: 50%;
  width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--im-accent-200);
  border-bottom: 2px solid var(--im-accent-200); transform: rotate(45deg); pointer-events: none; }
.im-pt-select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 44px;
  padding: 10px var(--im-space-8) 10px var(--im-space-4); background: var(--im-paper);
  border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
  font-family: var(--im-font-body, "Inter", system-ui, sans-serif); font-size: 14px; color: var(--im-ink);
  cursor: pointer; transition: border-color var(--im-dur) var(--im-ease); }
.im-pt-select:hover { border-color: var(--im-text-muted); }
.im-pt-select:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; border-color: var(--im-accent-200); }

/* View button: base .im-btn always present in markup; JS toggles the ready/muted
 * state modifiers (see processing-times.js). Disabled look driven by both the
 * modifier and the native :disabled state for robustness. */
.im-btn--muted, .im-btn:disabled { background: var(--im-band); border-color: var(--im-hairline);
  color: var(--im-text-muted); cursor: not-allowed; }
.im-btn--muted:hover, .im-btn:disabled:hover { transform: none; box-shadow: none; color: var(--im-text-muted); }

/* ---- No-data notice (keeps #noDataMessage + #selectedCombination hooks) ---- */
.im-pt-notice { margin-top: var(--im-space-5); border-left: 3px solid var(--im-accent-200);
  background: var(--im-band); border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0;
  padding: var(--im-space-5) var(--im-space-6); }
.im-pt-notice__title { font-family: var(--im-font-display); font-weight: 600; font-size: 18px;
  color: var(--im-ink); margin: 0 0 var(--im-space-2); }
.im-pt-notice__body { font-size: 14px; line-height: 1.6; color: var(--im-text-200); margin: 0 0 var(--im-space-4); }
.im-pt-notice__actions { display: flex; flex-wrap: wrap; gap: var(--im-space-3); }

/* ---- Result group cards (list) ---- */
.im-pt-groups { display: grid; grid-template-columns: 1fr; gap: var(--im-space-6); margin-top: var(--im-space-8); }
@media (min-width: 992px) { .im-pt-groups { grid-template-columns: repeat(2, 1fr); } }
.im-pt-group { background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); padding: var(--im-space-6); display: flex; flex-direction: column;
  min-width: 0; }
.im-pt-group__head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--im-space-4); margin-bottom: var(--im-space-5); }
.im-pt-group__name { font-family: var(--im-font-display); font-weight: 600; font-size: 22px;
  line-height: 1.15; color: var(--im-ink); margin: 0 0 var(--im-space-2); }
.im-pt-group__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-3);
  font-size: 13px; color: var(--im-text-muted); }
.im-pt-group__avg { text-align: center; flex-shrink: 0; }
.im-pt-group__avg-num { font-family: var(--im-font-display); font-weight: 600; font-size: 30px;
  line-height: 1; color: var(--im-accent-200); }
.im-pt-group__avg-label { font-family: var(--im-font-display); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--im-text-muted); margin-top: 2px; }
.im-pt-group__note { font-family: var(--im-font-display); font-size: 11px; color: var(--im-text-muted);
  margin-top: var(--im-space-4); text-align: center; }

/* ---- Editorial data table (group variations + individual cases) ---- */
.im-pt-tablewrap { overflow-x: auto; margin-top: auto; min-width: 0; }
.im-pt-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.im-pt-table thead th { font-family: var(--im-font-display); font-size: 10.5px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-muted); text-align: left;
  padding: var(--im-space-2) var(--im-space-3); border-bottom: 1px solid var(--im-hairline); white-space: nowrap; }
.im-pt-table tbody td { padding: var(--im-space-3); border-bottom: 1px solid var(--im-hairline);
  color: var(--im-text-200); vertical-align: middle; }
.im-pt-table tbody tr:last-child td { border-bottom: 0; }
.im-pt-table tbody tr:hover td { background: color-mix(in srgb, var(--im-accent-200) 4%, transparent); }
.im-pt-table__num { text-align: center; }
.im-pt-table__num strong { font-family: var(--im-font-display); font-size: 15px; color: var(--im-ink); }
.im-pt-table__range { display: block; font-family: var(--im-font-display); font-size: 11px; color: var(--im-text-muted); margin-top: 2px; }
.im-pt-table__end { text-align: right; }

/* ---- Badges: service-level / route (neutral) + timeline (fast) + case status ---- */
.im-pt-badge { display: inline-flex; align-items: center; font-family: var(--im-font-display); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--im-radius-pill);
  background: var(--im-band); color: var(--im-text-200); white-space: nowrap; }
.im-pt-badge--accent { background: color-mix(in srgb, var(--im-accent-200) 12%, var(--im-paper)); color: var(--im-accent-200-dark); }
.im-pt-badge--fast { background: color-mix(in srgb, var(--im-pt-fast) 14%, var(--im-paper)); color: var(--im-pt-fast); }
.im-pt-badge--slow { background: color-mix(in srgb, var(--im-pt-slow) 16%, var(--im-paper)); color: var(--im-pt-slow); }
.im-pt-badge--danger { background: color-mix(in srgb, var(--im-pt-slowest) 12%, var(--im-paper)); color: var(--im-pt-slowest); }

/* ---- Detail: breadcrumb + header row ---- */
.im-pt-detailhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--im-space-6); margin-top: var(--im-space-6); }
.im-pt-detailhead__badges { display: flex; flex-wrap: wrap; gap: var(--im-space-2); margin: var(--im-space-4) 0 var(--im-space-3); }
.im-pt-detailhead__count { font-size: 14px; color: var(--im-text-muted); margin: 0; }
.im-pt-detailhead__actions { display: flex; flex-wrap: wrap; gap: var(--im-space-3); }

/* ---- Detail: two-column stats (percentiles + quick facts) ---- */
.im-pt-detailgrid { display: grid; grid-template-columns: 1fr; gap: var(--im-space-6); margin-top: var(--im-space-8); }
@media (min-width: 992px) { .im-pt-detailgrid { grid-template-columns: 2fr 1fr; } }
.im-pt-panel { background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); padding: var(--im-space-6); }
.im-pt-panel__label { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--im-text-muted); margin: 0 0 var(--im-space-5); }

/* Percentile cards — fast (p25) / median headline / slow (p75) */
.im-pt-percentiles { display: grid; grid-template-columns: 1fr; gap: var(--im-space-4); }
@media (min-width: 560px) { .im-pt-percentiles { grid-template-columns: repeat(3, 1fr); } }
.im-pt-perc { border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
  padding: var(--im-space-5) var(--im-space-4); text-align: center; }
.im-pt-perc__num { font-family: var(--im-font-display); font-weight: 600; font-size: 34px; line-height: 1; color: var(--im-ink); }
.im-pt-perc__title { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--im-text-200); margin-top: var(--im-space-3); }
.im-pt-perc__sub { font-size: 12px; color: var(--im-text-muted); margin-top: var(--im-space-1); }
.im-pt-perc--fast { border-color: color-mix(in srgb, var(--im-pt-fast) 45%, var(--im-hairline));
  background: color-mix(in srgb, var(--im-pt-fast) 6%, var(--im-paper)); }
.im-pt-perc--fast .im-pt-perc__num { color: var(--im-pt-fast); }
.im-pt-perc--mid { border-color: color-mix(in srgb, var(--im-accent-200) 40%, var(--im-hairline));
  background: color-mix(in srgb, var(--im-accent-200) 6%, var(--im-paper)); }
.im-pt-perc--mid .im-pt-perc__num { font-size: 40px; color: var(--im-accent-200); }
.im-pt-perc--slow { border-color: color-mix(in srgb, var(--im-pt-slow) 45%, var(--im-hairline));
  background: color-mix(in srgb, var(--im-pt-slow) 8%, var(--im-paper)); }
.im-pt-perc--slow .im-pt-perc__num { color: var(--im-pt-slow); }

/* Quick facts list */
.im-pt-facts { list-style: none; margin: 0; padding: 0; }
.im-pt-facts li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--im-space-4);
  padding: var(--im-space-3) 0; border-bottom: 1px solid var(--im-hairline); }
.im-pt-facts li:last-of-type { border-bottom: 0; }
.im-pt-facts__label { font-size: 13px; color: var(--im-text-muted); }
.im-pt-facts__val { font-family: var(--im-font-display); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--im-ink); text-align: right; }

/* Expected-range distribution bar (timeline speed bands: fast->slowest) */
.im-pt-dist-block { margin-top: var(--im-space-6); padding-top: var(--im-space-5); border-top: 1px solid var(--im-hairline); }
.im-pt-dist-block__label { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--im-text-muted); text-align: center; margin: 0 0 var(--im-space-3); }
.im-pt-dist { display: flex; height: 16px; border-radius: var(--im-radius-pill); overflow: hidden; }
.im-pt-dist__seg { flex: 1; }
.im-pt-dist__seg--fast { background: var(--im-pt-fast); }
.im-pt-dist__seg--mid { background: var(--im-accent-200); }
.im-pt-dist__seg--slow { background: var(--im-pt-slow); }
.im-pt-dist__seg--slowest { background: color-mix(in srgb, var(--im-pt-slowest) 82%, transparent); }
.im-pt-dist-scale { display: flex; justify-content: space-between; margin-top: var(--im-space-2);
  font-family: var(--im-font-display); font-size: 11px; color: var(--im-text-muted); }
.im-pt-dist-scale strong { color: var(--im-ink); }

/* ---- Detail: individual cases panel ---- */
.im-pt-cases { background: var(--im-card-bg); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); overflow: hidden; margin-top: var(--im-space-8); }
.im-pt-cases__head { display: flex; align-items: center; justify-content: space-between; gap: var(--im-space-4);
  padding: var(--im-space-5) var(--im-space-6); border-bottom: 1px solid var(--im-hairline); }
.im-pt-cases__title { font-family: var(--im-font-display); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--im-text-muted); margin: 0; }
.im-pt-cases__body { padding: 0 var(--im-space-6); }
.im-pt-cases .im-pt-table thead th { border-bottom: 1px solid var(--im-hairline); }
.im-pt-cases__foot { padding: var(--im-space-4) var(--im-space-6); border-top: 1px solid var(--im-hairline); }

/* Case status badges (community outcome data, not a user verdict) */
.im-pt-badge--approved { background: color-mix(in srgb, var(--im-pt-fast) 14%, var(--im-paper)); color: var(--im-pt-fast); }
.im-pt-badge--refused { background: color-mix(in srgb, var(--im-pt-slowest) 12%, var(--im-paper)); color: var(--im-pt-slowest); }
.im-pt-badge--pending { background: color-mix(in srgb, var(--im-pt-slow) 16%, var(--im-paper)); color: var(--im-pt-slow); }

/* ---- Editorial pagination ---- */
.im-pt-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--im-space-2); list-style: none; margin: 0; padding: 0; }
.im-pt-pagination a, .im-pt-pagination span { display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 var(--im-space-3); border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
  font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-200); text-decoration: none;
  transition: border-color var(--im-dur) var(--im-ease), color var(--im-dur) var(--im-ease); }
.im-pt-pagination a:hover { border-color: var(--im-accent-200); color: var(--im-accent-200); }
.im-pt-pagination .is-active span { background: var(--im-ink); border-color: var(--im-ink); color: var(--im-paper); }

/* ---- Subscribe / CTA band ---- */
.im-pt-subscribe { max-width: 460px; margin: var(--im-space-6) auto 0; }
.im-pt-subscribe__row { display: flex; flex-direction: column; gap: var(--im-space-3); }
@media (min-width: 480px) { .im-pt-subscribe__row { flex-direction: row; } }
.im-pt-input { flex: 1 1 auto; min-height: 44px; padding: 10px var(--im-space-4);
  background: var(--im-paper); border: 1px solid var(--im-hairline); border-radius: var(--im-radius-control);
  font-family: var(--im-font-body, "Inter", system-ui, sans-serif); font-size: 14px; color: var(--im-ink); }
.im-pt-input:focus-visible { outline: 2px solid var(--im-accent-200); outline-offset: 2px; border-color: var(--im-accent-200); }
.im-pt-subscribe__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--im-space-3) var(--im-space-5); margin-top: var(--im-space-5);
  font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-muted); }
.im-pt-subscribe__foot i { color: var(--im-accent-200); }

/* ---- Email modal (converts former inline styles to tokens) ---- */
.im-pt-modal .modal-content { border: 1px solid var(--im-hairline); border-radius: var(--im-radius-card);
  background: var(--im-card-bg); }
.im-pt-modal__close { position: absolute; top: var(--im-space-3); right: var(--im-space-3); z-index: 2; }
.im-pt-modal__icon { width: 64px; height: 64px; margin: 0 auto var(--im-space-4); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--im-accent-200) 12%, var(--im-paper)); }
.im-pt-modal__icon i { font-size: 1.75rem; color: var(--im-accent-200); }
.im-pt-modal__title { font-family: var(--im-font-display); font-weight: 600; font-size: 22px; color: var(--im-ink); margin: 0 0 var(--im-space-3); }
.im-pt-modal__text { font-size: 14px; line-height: 1.6; color: var(--im-text-muted); margin: 0 auto var(--im-space-4); max-width: 40ch; }
.im-pt-modal__form { max-width: 300px; margin: 0 auto; }
.im-pt-modal__meta { display: flex; align-items: center; justify-content: center; gap: var(--im-space-2);
  margin-top: var(--im-space-5); padding-top: var(--im-space-4); border-top: 1px solid var(--im-hairline);
  font-family: var(--im-font-display); font-size: 12px; color: var(--im-text-muted); }

/* ---- Share form layout (share_processing_time.html) ----
   The form leads and the rail supports it, so the split is deliberately uneven.
   .im-pt-stat is reused verbatim from the tracker above rather than restyled:
   this page and the page it links from should read as one tool, and a stat that
   is "nearly" the same reads as a different tool. */
/* The lede introduces the form directly, so it sits close to it. */
.im-pt-share__intro { margin-bottom: var(--im-space-12); }
.im-pt-share__intro .im-hero-block__lede { margin-bottom: 0; max-width: 58ch; }

.im-pt-share { display: grid; gap: var(--im-space-8); align-items: start; }
@media (min-width: 900px) {
  .im-pt-share { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--im-space-10); }
}
.im-pt-share__form { min-width: 0; }
.im-pt-share__rail { display: grid; gap: var(--im-space-5); min-width: 0; }

/* Ordinary band furniture, replacing the tinted blobs (blue privacy, mint
   community, grey tips) the V1 page carried. None of those tints were in the
   token set. */
.im-pt-note { background: var(--im-band); border: 1px solid var(--im-hairline);
  border-radius: var(--im-radius-card); padding: var(--im-space-6);
  display: grid; gap: var(--im-space-3); }
.im-pt-note__list { margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--im-space-3); font-family: var(--im-font-body);
  font-size: 13px; line-height: 1.5; color: var(--im-text-200); }

/* The reCAPTCHA widget is a fixed 304px iframe. Left alone it can push the
   card wider than the grid column on a narrow phone. */
.im-pt-share__form .g-recaptcha { max-width: 100%; overflow-x: auto; }

/* ---- Subscribe block on the confirmation page (thank_you.html) ----
   A flex item of .im-success, so it inherits the centring; it only needs its
   own measure and the rule that separates it from the actions above. */
.im-pt-thanks-sub { width: 100%; max-width: 460px; margin-top: var(--im-space-10);
  padding-top: var(--im-space-8); border-top: 1px solid var(--im-hairline); }
.im-pt-thanks-sub .im-pt-subscribe { margin-top: var(--im-space-4); }
.im-pt-thanks-sub .im-field__hint { margin-top: var(--im-space-3); }

@media (prefers-reduced-motion: reduce) {
  .im-pt-select, .im-pt-pagination a, .im-btn--muted { transition: none; }
}