/* ==========================================================================
   verified-provider.css — page layer for the Verified Provider page.

   Extends tra-home.css; it does not redefine it. Every colour, radius, shadow
   and font here resolves to a token already declared there (--navy, --brass,
   --line, --serif, --gold-sheen, --lift), so the page and the homepage stay in
   step if those tokens ever move.

   Only classes the homepage does not already provide are declared:
   .jgrid .std-grid .guide-grid .acc-* .reg-* .faq-* .lnk .mono .btn.ghost
   ========================================================================== */

/* ---------- hero additions ------------------------------------------------ */
/* An oversized seal outline, sunk into the gradient. Architectural, not an
   illustration — it reads as a registry watermark behind the type. */
.trahome .hero .acc-seal {
  position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: min(560px, 52vw); aspect-ratio: 1; z-index: -1; pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(242, 226, 176, .16);
  box-shadow: inset 0 0 0 1px rgba(242, 226, 176, .07),
              inset 0 0 0 62px rgba(242, 226, 176, .028);
  opacity: .9;
}
.trahome .hero .acc-seal::after {
  content: ""; position: absolute; inset: 16%;
  border-radius: 50%; border: 1px dashed rgba(242, 226, 176, .13);
}
@media (max-width: 900px) { .trahome .hero .acc-seal { display: none; } }

.trahome .acc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.trahome .acc-reg {
  margin: 26px 0 0; max-width: 60ch;
  font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .58);
  border-left: 2px solid rgba(242, 226, 176, .3); padding-left: 14px;
}

/* Quieter secondary action beside the gold primary. */
.trahome .btn.ghost {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .34); box-shadow: none;
}
.trahome .btn.ghost::after { display: none; }
.trahome .btn.ghost:hover { border-color: var(--brass-lt); color: var(--brass-hi); }

/* ---------- card grids ---------------------------------------------------- */
.trahome .jgrid,
.trahome .guide-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.trahome .std-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.trahome .acc-standards { background: var(--paper); }

/* A published standard is a numbered clause, so the number is information. */
.trahome .jstep.std { padding: 22px 22px 24px; flex-direction: row; gap: 16px; align-items: flex-start; }
.trahome .jstep.std .std-no {
  flex: none; font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; color: var(--brass); padding-top: 2px;
}
.trahome .jstep.std p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.6; }

.trahome .lnk {
  display: inline-block; margin-top: 14px;
  font-weight: 700; font-size: .9rem; color: var(--steel); text-decoration: none;
  border-bottom: 1px solid rgba(30, 78, 121, .3); padding-bottom: 2px;
}
.trahome .lnk:hover { color: var(--navy); border-bottom-color: var(--brass); }

/* ---------- how verification works (dark band) ---------------------------- */
.trahome .acc-steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: step; }
.trahome .acc-steps li {
  counter-increment: step; position: relative;
  padding: 0 0 20px 46px; margin: 0;
}
.trahome .acc-steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--brass-lt); letter-spacing: .06em;
}
.trahome .acc-steps li::after {
  content: ""; position: absolute; left: 13px; top: 20px; bottom: 2px; width: 1px;
  background: linear-gradient(180deg, rgba(242, 226, 176, .3), transparent);
}
.trahome .acc-steps li:last-child::after { display: none; }
.trahome .acc-steps b { display: block; color: #fff; font-size: 1rem; margin-bottom: 3px; }
.trahome .acc-steps span { color: rgba(255, 255, 255, .68); font-size: .92rem; line-height: 1.55; }

/* Register preview — a credential list, not a marketing mock. */
.trahome .reg-card {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 3px;
  padding: 20px 22px; box-shadow: var(--lift);
}
.trahome .reg-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.trahome .reg-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.trahome .mono { font-family: var(--mono); font-size: .8rem; color: rgba(255, 255, 255, .86); }
.trahome .reg-foot {
  padding-top: 12px; font-size: .74rem; color: rgba(255, 255, 255, .5);
}
/* Status never relies on colour alone — each pill carries its word. */
.trahome .reg-row .pill.ok  { background: rgba(200, 162, 75, .18); color: var(--brass-hi); }
.trahome .reg-row .pill.due { background: rgba(255, 255, 255, .1);  color: rgba(255, 255, 255, .72); }

/* ---------- FAQ ----------------------------------------------------------- */
.trahome .acc-faq { background: var(--paper); }
.trahome .faq-list { display: grid; gap: 10px; max-width: 820px; }
.trahome .faq-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 3px;
  padding: 16px 20px;
}
.trahome .faq-item summary {
  cursor: pointer; font-weight: 700; color: var(--navy); font-size: .98rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.trahome .faq-item summary::-webkit-details-marker { display: none; }
.trahome .faq-item summary::after {
  content: "+"; color: var(--brass); font-weight: 700; flex: none;
}
.trahome .faq-item[open] summary::after { content: "\2212"; }
.trahome .faq-item p {
  margin: 12px 0 0; color: var(--muted); font-size: .93rem; line-height: 1.65;
}

/* ---------- closing CTA band --------------------------------------------- */
.trahome .acc-cta-band { text-align: center; padding: 88px 0; }
.trahome .acc-cta-band .eyebrow,
.trahome .acc-cta-band h2 { margin-inline: auto; }
.trahome .acc-cta-band h2 { max-width: 20ch; color: #fff; }
.trahome .acc-cta-band .sub {
  color: rgba(255, 255, 255, .72); max-width: 54ch; margin: 14px auto 26px;
}

/* The application form keeps its own markup; it only needs to sit on the
   page rhythm rather than fight it. */
.trahome #apply { background: var(--paper-2); }

@media (max-width: 860px) {
  .trahome .chq-grid { grid-template-columns: 1fr; gap: 34px; }
  .trahome .acc-cta-band { padding: 64px 0; }
}

/* ---------- section alternation ------------------------------------------
   The brief's rhythm alternates bright editorial bands with dark immersive
   ones. .sec carries no background of its own, so it would otherwise inherit
   the page grey and the alternation would disappear. */
.trahome .sec { background: var(--white); }
.trahome .sec.acc-standards,
.trahome .sec.acc-faq { background: var(--paper); }

/* .lead collides with an unrelated panel component in css/style.css, which was
   painting a gradient box behind this column. Page-scoped name instead. */
.trahome .chq .acc-lead { background: none; padding: 0; }

/* ==========================================================================
   VERIFY A PROVIDER — the public lookup endpoint, on the same system.
   Status is always a word plus a colour, never colour alone.
   ========================================================================== */
.trahome .vfy-hero { min-height: 0; padding: 46px 0 50px; }
.trahome .vfy-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; max-width: 560px; }
.trahome .vfy-form input {
  flex: 1 1 260px; padding: 14px 16px; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.07);
  color: #fff; font-family: var(--mono); font-size: .95rem; letter-spacing: .04em;
}
.trahome .vfy-form input::placeholder { color: rgba(255,255,255,.42); }
.trahome .vfy-form input:focus {
  outline: none; border-color: var(--brass-lt); background: rgba(255,255,255,.1);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.trahome .vfy-result { background: var(--paper); }
.trahome .vfy-card {
  background: var(--white); border: 1px solid var(--line); border-radius: 3px;
  padding: 34px 34px 30px; max-width: 720px;
  box-shadow: 0 1px 2px rgba(10,37,64,.04), 0 18px 44px -30px rgba(10,37,64,.35);
  border-top: 3px solid var(--line);
}
.trahome .vfy-card.is-active   { border-top-color: var(--brass); }
.trahome .vfy-card.is-expired  { border-top-color: #9aa7b4; }
.trahome .vfy-card.is-notfound { border-top-color: #64748b; }

.trahome .vfy-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 14px;
}
.trahome .is-active   .vfy-status { background: rgba(166,124,31,.12); color: var(--brass-dk); }
.trahome .is-expired  .vfy-status { background: #eef1f5; color: #5a6a7a; }
.trahome .is-notfound .vfy-status { background: #eef1f5; color: #64748b; }

.trahome .vfy-card h2 { font-size: 1.6rem; color: var(--navy); margin: 0 0 8px; }
.trahome .vfy-lede { color: var(--muted); margin: 0; font-size: .96rem; line-height: 1.6; }
.trahome .vfy-head { padding-bottom: 22px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; }

.trahome .vfy-dl { margin: 0; }
.trahome .vfy-dl > div {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
}
.trahome .vfy-dl > div:last-child { border-bottom: 0; }
.trahome .vfy-dl dt { color: var(--muted); font-size: .9rem; }
.trahome .vfy-dl dd { margin: 0; font-weight: 700; color: var(--navy); text-align: right; font-size: .93rem; }
.trahome .vfy-mono { font-family: var(--mono); letter-spacing: .03em; }
.trahome .vfy-note {
  max-width: 720px; margin: 22px 0 0; font-size: .84rem; line-height: 1.65; color: var(--muted);
}
.trahome .vfy-idle h2 { font-size: 1.35rem; }

/* ==========================================================================
   FEATURED LAB ACCOUNTS & MROs — a short directory page on the same system.
   ========================================================================== */
/* .hero is the homepage's full-screen treatment (min-height: calc(100vh - 70px)).
   On a directory page that spent a whole viewport on a badge and three lines and
   pushed the listing below the fold, so this hero sizes to its own content. */
.trahome .lab-hero { min-height: 0; padding: 36px 0 30px; }
/* .hero is display:flex; without this the wrap shrink-wraps to its text and the
   auto margins centre it, so the hero copy sat ~300px right of the listing. */
.trahome .lab-hero > .wrap,
.trahome .vfy-hero > .wrap { width: 100%; }
.trahome .lab-hero .h-badge { margin-bottom: 16px; }
.trahome .lab-hero h1 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 14px; }
.trahome .lab-hero .sub { margin-bottom: 0; }

/* The listing is what this page exists for, so the section above it keeps only
   the breathing room it needs rather than the homepage's full section rhythm. */
.trahome #featured-directory { padding-top: 36px; }
.trahome #featured-directory .sec-head { margin-bottom: 22px; }
/* the hero already names the page; this heading labels the list rather than
   restating it, so it sits a step down and holds one line */
.trahome #featured-directory .sec-head h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 0; }
.trahome .lab-card {
  flex-direction: row; gap: 22px; align-items: flex-start;
  max-width: 860px; padding: 30px 30px 32px;
}
.trahome .lab-mark {
  flex: none; width: 52px; height: 52px; border-radius: 3px;
  display: grid; place-items: center; font-size: 1.25rem;
  color: var(--brass-dk); background: rgba(166,124,31,.1);
  border: 1px solid rgba(166,124,31,.24);
}
.trahome .lab-body h3 { margin: 0 0 8px; }
.trahome .lab-body p { margin: 0; color: var(--muted); line-height: 1.65; }
.trahome .lab-note {
  max-width: 860px; margin: 20px 0 0;
  font-size: .84rem; line-height: 1.6; color: var(--muted-2, #7d8b9b);
}
@media (max-width: 620px) {
  .trahome .lab-card { flex-direction: column; }
}