/* VitroVault Trust Centre — trust-page chrome (buyer-facing, supplier-branded).
   The third chrome (alongside marketing base.html and app base_app.html): minimal,
   self-contained, no site nav, no marketing. Requires tokens.css + body.surface-trust.
   Structural shell only (S0); the coverage/document/access COMPONENTS are S1.
   Matches the delivered W1 mock (Design brief and plan review.zip / draw-*.png). */

/* ---- Layout container ---- */
.tc-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.tc-page { min-height: 100vh; display: flex; flex-direction: column; }
.tc-main { flex: 1 0 auto; }

/* ---- Header: [logo] Name / TRUST CENTRE ............ [Request access] ---- */
.tc-header { border-bottom: 1px solid var(--line); background: var(--card); }
.tc-header .tc-wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 72px;
}
.tc-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tc-logo {                       /* supplier logo tile; supplier accent ground */
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--sa); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  flex: none; overflow: hidden;
}
.tc-logo img { width: 100%; height: 100%; object-fit: contain; }
.tc-brand-name { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.15;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-brand-sub { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); }
.tc-header-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---- Buttons ---- */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: .92rem;
  padding: 10px 18px; border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  text-decoration: none;
}
.btn-accent { background: var(--sa); color: #fff; }         /* supplier CTA */
.btn-accent:hover { filter: brightness(.94); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--wash); text-decoration: none; }

/* ---- Currency strip: [mark] Kept current by VITROVAULT · Last updated <date> ----
   Three states via a modifier on .tc-currency:
     (default / .is-current) Managed current  — mark shown
     .is-plain               Free/Plus, or Managed overdue = MARK WITHDRAWN — date only
     .is-overdue             date only + older date (public shows NO "in progress" copy) */
.tc-currency { background: var(--wash); border-bottom: 1px solid var(--line); }
.tc-currency .tc-wrap { display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: .84rem; color: var(--ink-2); flex-wrap: wrap; }
.tc-mark {                        /* C2 Kept-current mark: quiet, dark, NEVER seal-like */
  width: 22px; height: 22px; border-radius: 7px; background: var(--ink);
  display: grid; place-items: center; flex: none;
}
.tc-mark svg { width: 12px; height: 12px; display: block; }
.tc-currency b { color: var(--ink); font-weight: 600; }
.tc-currency .kc-brand { font-family: var(--mono); letter-spacing: .04em; }
.tc-currency time { color: var(--ink); }
.tc-currency .sep { color: var(--ink-3); }
.tc-currency.is-plain .tc-mark, .tc-currency.is-overdue .tc-mark,
.tc-currency.is-plain .kc-label, .tc-currency.is-overdue .kc-label,
.tc-currency.is-plain .sep, .tc-currency.is-overdue .sep { display: none; }

/* ---- Section rhythm ---- */
.tc-section { padding-block: 44px; border-bottom: 1px solid var(--line); }
.tc-section:last-of-type { border-bottom: 0; }
.tc-section > .tc-wrap > .eyebrow { display: block; margin-bottom: 14px; }
.tc-display { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.01em; max-width: 18ch; }
.tc-lede { font-size: 1.06rem; color: var(--ink-2); max-width: 62ch; margin-top: 18px; }
.tc-lede p { margin: 0 0 14px; }

/* Section header with a right-aligned count ("9 of 14 areas covered" — TEXT, never a bar) */
.tc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tc-count { font-family: var(--mono); font-size: .82rem; color: var(--ink-2); white-space: nowrap; }

/* ---- Footer: Powered by VitroVault ............ Report a concern ---- */
.tc-footer { background: var(--card); border-top: 1px solid var(--line); padding-block: 22px; }
.tc-footer .tc-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; font-size: .82rem; color: var(--ink-3); }
.tc-footer a { color: var(--ink-2); }

/* ---- Security overview: prose + Contact & residency panel (W1, DEV-HANDOVER §4) ---- */
.tc-overview { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.tc-side { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card);
  padding: 20px; font-size: .88rem; }
.tc-side h3 { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; }
.tc-side dl { display: grid; grid-template-columns: auto; gap: 12px; margin: 0; }
.tc-side dt { color: var(--ink-3); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .06em; font-family: var(--mono); }
.tc-side dd { margin: 2px 0 0; color: var(--ink); }
.tc-side a { color: var(--sa-ink); }

/* ---- Certifications (full-width grid) ---- */
.tc-certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tc-cert { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card); padding: 16px 18px; }
.tc-cert-badge { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--wash);
  border: 1px solid var(--line); display: grid; place-items: center; flex: none;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--ink-2); }
/* Certification LOGO (official provider mark, or a placeholder emblem in /static/certs). */
.tc-cert-logo { width: 46px; height: 46px; border-radius: var(--r-sm); flex: none; object-fit: contain; display: block; }
.tc-cert-name { font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.tc-cert-valid { font-family: var(--mono); font-size: .78rem; color: var(--ink-2); margin-top: 2px; }
.tc-marks-note { font-size: .78rem; color: var(--ink-2); margin: 16px 0 0; max-width: 62ch; line-height: 1.5; }

/* ---- Trusted-by wordmark strip (optional showcase block) ---- */
.tc-logos { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.tc-wordmark { display: inline-flex; align-items: center; padding: 10px 16px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card); color: var(--ink-2);
  font-family: var(--display); font-weight: 600; font-size: .95rem; letter-spacing: .01em; }

/* ---- Documents (grouped C4 rows in a card) ---- */
.tc-docs { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }

/* ---- Subprocessors (plain table + Get notified) ---- */
.tc-subs { width: 100%; border-collapse: collapse; font-size: .9rem;
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.tc-subs th { text-align: left; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 12px 16px;
  background: var(--wash); border-bottom: 1px solid var(--line); }
.tc-subs td { padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.tc-subs tr:last-child td { border-bottom: 0; }
.tc-subs td a { color: var(--sa-ink); }
.tc-subs-scroll { overflow-x: auto; }

/* ---- Coverage block visibility: present only when the supplier published it ----
   The block is a published, versioned Resource; absent by default (fails closed). */
.tc-coverage { display: none; }
body.coverage-published .tc-coverage { display: block; }

/* ---- NDA lock state: default locked; .nda-unlocked flips the action label ---- */
body.nda-unlocked .doc-row.is-nda .doc-action[data-locked] { display: none; }
body:not(.nda-unlocked) .doc-row.is-nda .doc-action[data-unlocked] { display: none; }

/* ---- Responsive: single column on mobile ---- */
@media (max-width: 760px) {
  .tc-overview { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .tc-header .tc-wrap { min-height: 64px; }
  .tc-header-actions .btn { padding: 9px 14px; font-size: .86rem; }
  .tc-section { padding-block: 32px; }
}