/* ===== HUMANTERMS COMPLIANCE PAGE =====
   Loaded after main.css and legal.css on /humanterms only.

   The page is a legal-page body (one narrow measure, generous leading, no
   reveal animation) with a handful of components legal.css has no reason to
   carry: the signatory badge, the meta bar, the at-a-glance grid, the
   per-commitment article, and the two-column disclosure rows.

   Everything is expressed in tokens.css variables, so light/dark parity is
   automatic — there is not a single literal colour in this file. The one
   exception to "reuse legal.css" is `.ht-wrap`, which is wider than
   `.legal-wrap`: the glance grid and the disclosure columns need more than a
   46rem measure to sit two-up, while the body copy inside each article is
   constrained back to a reading measure by `.ht-body`. */

.ht-wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

/* Reading measure for prose inside the wider shell. */
.ht-wrap p,
.ht-wrap li {
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-16);
}

.ht-wrap li { margin-bottom: var(--space-8); }
.ht-wrap li::marker { color: var(--color-text-tertiary); }
.ht-wrap ul,
.ht-wrap ol { margin: 0 0 var(--space-16) 1.35rem; }

.ht-wrap strong { font-weight: 600; color: var(--color-text); }

.ht-wrap a {
  color: var(--color-accent-adaptive);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.ht-wrap code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ===== MASTHEAD ===== */

.ht-breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-24);
}

.ht-breadcrumb a { color: inherit; text-decoration: none; }
.ht-breadcrumb a:hover { color: var(--color-text); }
.ht-breadcrumb span[aria-hidden] { padding: 0 var(--space-8); }

.ht-wrap h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-24);
  max-width: 20ch;
}

.ht-wrap h1 em {
  font-style: italic;
  color: var(--color-accent-adaptive);
}

.ht-lead {
  font-size: var(--text-lede);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 46rem;
  margin-bottom: var(--space-32);
}

/* Founding-signatory badge. A link when the Pledge site is reachable; the
   surrounding note carries the corporate-signature status either way. */
.ht-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-accent-border);
  background: var(--color-accent-surface);
  border-radius: var(--radius-btn);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-small);
}

.ht-wrap a.ht-badge { text-decoration: none; }
.ht-badge:hover { border-color: var(--color-accent); }

.ht-badge .seal {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-small);
}

.ht-badge strong { color: var(--color-text); }

.ht-signature-note {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  margin: var(--space-12) 0 var(--space-32);
  max-width: 46rem;
}

/* Meta bar — last updated / status / report channel. */
.ht-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-16);
  padding: var(--space-24);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  margin-bottom: var(--space-64);
}

.ht-meta .label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-4);
}

.ht-meta .value {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
}

.ht-meta .value.ok { color: var(--color-success); }

/* ===== SECTION HEADS ===== */

.ht-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent-adaptive);
  margin-bottom: var(--space-8);
}

.ht-wrap h2 {
  font-size: 1.625rem;
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0 0 var(--space-24);
  scroll-margin-top: 6rem;
}

.ht-section { margin-bottom: var(--space-64); }

/* ===== AT A GLANCE ===== */

.ht-glance {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ht-glance li { margin: 0; }

.ht-glance a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  height: 100%;
  padding: var(--space-16);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.ht-glance a:hover { border-color: var(--color-hairline-strong); }

.ht-glance .num {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  display: block;
  margin-bottom: var(--space-4);
}

.ht-glance .title {
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
}

/* The status glyph. Colour alone never carries the meaning — the glyph differs
   too, and every card's status is spelled out in the article it links to. */
.ht-status {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success);
}

/* ===== COMMITMENT ARTICLES ===== */

.ht-commitment {
  padding-top: var(--space-32);
  margin-bottom: var(--space-40);
  border-top: 1px solid var(--color-hairline);
  scroll-margin-top: 6rem;
}

.ht-commitment-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.ht-num {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

.ht-commitment h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  margin: 0;
  flex: 1 1 16rem;
}

.ht-pill {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-success) 14%, transparent);
  color: var(--color-success);
  white-space: nowrap;
}

.ht-quote {
  margin: 0 0 var(--space-24);
  padding-left: var(--space-16);
  border-left: 3px solid var(--color-accent-border);
  font-size: 1.0625rem;
  color: var(--color-text);
  max-width: 46rem;
}

.ht-block { margin-bottom: var(--space-24); max-width: 52rem; }

.ht-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-8);
}

/* The verify block is the load-bearing half of the page: it is what turns a
   claim into something a reader can check. Tinted so it reads as an
   instruction, not as more prose. */
.ht-verify {
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--color-accent-border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--color-accent-surface);
  max-width: 52rem;
}

.ht-verify p:last-child,
.ht-block p:last-child,
.ht-block ul:last-child,
.ht-block li:last-child { margin-bottom: 0; }

/* ===== DISCLOSURES ===== */

.ht-disclosure {
  padding: var(--space-24);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  background: var(--color-surface-2);
  margin-bottom: var(--space-24);
}

.ht-disclosure-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.ht-disclosure h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  flex: 1 1 16rem;
}

.ht-stage {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-hairline-strong);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}

.ht-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-16);
}

.ht-cols h4 {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-8);
}

.ht-cols .deny li::marker { color: var(--color-error); }
.ht-cols .allow li::marker { color: var(--color-success); }

/* ===== STANDING COMMITMENTS + CHANGELOG ===== */

.ht-standing { counter-reset: standing; list-style: none; margin-left: 0; }

.ht-standing li {
  counter-increment: standing;
  padding-left: 2.25rem;
  position: relative;
  margin-bottom: var(--space-16);
}

.ht-standing li::before {
  content: counter(standing, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
}

.ht-log { display: grid; gap: var(--space-16); }

.ht-log-entry {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-hairline);
}

.ht-log-date {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  padding-top: 0.2rem;
}

.ht-log-entry p { margin-bottom: 0; }

@media (max-width: 560px) {
  .ht-log-entry { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ===== PAGE FOOTER (the disclaimer, not the site footer) ===== */

.ht-disclaimer {
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}