/* =========================================================================
   Informational pages: about, contact, FAQ, the legal template, 404.
   Every value here is declared in DESIGN.md. Nothing is invented at use site.
   ========================================================================= */

@layer components {

/* =========================================================================
   ABOUT
   Five layout families, none shared with home.php:
   1 measure stack, 2 connected step track, 3 dense index columns,
   4 two-column ledger, 5 bordered closing panel.
   ========================================================================= */

/* ------------------------------------------------- 1. opener, measure stack */

.ab-open { padding-block: var(--s-8) var(--s-7); }
@media (min-width: 1024px) { .ab-open { padding-block: var(--s-9) var(--s-8); } }

.ab-open-inner { display: flex; flex-direction: column; }

.ab-open-title {
  font-size: var(--fs-display-l);
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 17ch;
}

.ab-open-rule { margin-block: var(--s-6); }
@media (min-width: 1024px) { .ab-open-rule { margin-block: var(--s-7); } }

/* Long-form measure. Two paragraphs, offset from the headline on desktop so the
   page does not read as one left-aligned column all the way down. */
.ab-open-body { display: flex; flex-direction: column; gap: var(--s-4); max-width: 65ch; }
@media (min-width: 1024px) { .ab-open-body { margin-inline-start: 22%; } }
.ab-open-body p { color: var(--text-dim); }
.ab-open-body .lead { color: var(--text); max-width: none; }

/* -------------------------------------------- 2. connected step track */

.ab-steps { padding-block: var(--s-8); }
@media (min-width: 1024px) { .ab-steps { padding-block: var(--s-9); } }

.ab-track {
  display: grid;
  gap: 0;
  margin-top: var(--s-7);
  list-style: none;
  padding: 0;
  counter-reset: none;
}
@media (min-width: 768px) {
  /* Four steps side by side, tied together by one continuous hairline that the
     ordinals sit on. */
  .ab-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
}

.ab-step {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);   /* one hairline per step, never two */
}
.ab-step:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
  .ab-step { padding-block: var(--s-5) 0; border-top: 1px solid var(--line-strong); }
  .ab-step:last-child { border-bottom: 0; }
}

.ab-step-n {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--accent-text);
  line-height: 1;
}

.ab-step-title { font-size: var(--fs-h3); }
.ab-step-body { color: var(--text-dim); font-size: var(--fs-sm); max-width: 42ch; }

/* --------------------------------------------- 3. dense index columns */

.ab-cover { padding-block: var(--s-8); }
@media (min-width: 1024px) { .ab-cover { padding-block: var(--s-9); } }

.ab-cover-note { margin-top: var(--s-3); max-width: 58ch; }

.ab-index {
  margin-top: var(--s-6);
  columns: 1;
  column-gap: var(--s-8);
}
@media (min-width: 640px) { .ab-index { columns: 2; } }
@media (min-width: 1024px) { .ab-index { columns: 3; } }

.ab-index-row { break-inside: avoid; }

.ab-index-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: color var(--d-micro) var(--ease), border-color var(--d-micro) var(--ease);
}
.ab-index-link:hover { color: var(--accent-text); border-bottom-color: var(--accent); }

.ab-index-name { font-weight: 500; font-size: var(--fs-sm); }
.ab-index-count { font-size: var(--fs-micro); color: var(--text-faint); }

.ab-cover-foot { margin-top: var(--s-5); font-size: var(--fs-micro); letter-spacing: 0.05em; }

/* Inline error line, shared shape with the 404 alert. */
.ab-alert,
.nf-alert {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--warn);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: var(--fs-sm);
}
.ab-alert-icon { color: var(--warn); flex: none; }
.nf-alert svg { color: var(--warn); flex: none; }

/* ----------------------------------------------- 4. two-column ledger */

.ab-ledger-wrap {
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
@media (min-width: 1024px) { .ab-ledger-wrap { padding-block: var(--s-9); } }

.ab-ledger { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 768px) {
  .ab-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
}

.ab-col-head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-strong);
}

.ab-col-list { display: flex; flex-direction: column; }
.ab-col-list li {
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-sm);
  max-width: 48ch;
  position: relative;
  padding-inline-start: var(--s-5);
}
/* A short leading rule marks the side, since the two columns read as a pair. */
.ab-col-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(var(--s-4) + 10px);
  width: var(--s-3);
  height: 1px;
  background: var(--accent);
}
.ab-col-neg .ab-col-list li::before { background: var(--line-strong); }

/* --------------------------------------------- 5. bordered closing panel */

.ab-close { padding-block: var(--s-8); }
@media (min-width: 1024px) { .ab-close { padding-block: var(--s-9); } }

.ab-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: var(--inset-hi);
}
@media (min-width: 768px) { .ab-panel { padding: var(--s-8); } }

.ab-panel-title { font-size: var(--fs-h2); }
.ab-panel-body { color: var(--text-dim); max-width: 58ch; }
.ab-panel-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.ab-panel-note {
  font-size: var(--fs-micro);
  max-width: 62ch;
  padding-top: var(--s-4);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
  width: 100%;
}

/* =========================================================================
   CONTACT
   ========================================================================= */

.ct-head { padding-block: var(--s-8) var(--s-6); }
@media (min-width: 1024px) { .ct-head { padding-block: var(--s-9) var(--s-7); } }

.ct-title { font-size: var(--fs-h1); letter-spacing: -0.025em; }
.ct-lead { margin-top: var(--s-4); }

.ct-body { padding-bottom: var(--s-9); }

/* Single column below 768px, two columns above, declared together. */
.ct-grid { display: grid; gap: var(--s-8); align-items: start; }
@media (min-width: 768px) {
  .ct-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
}
@media (min-width: 1280px) { .ct-grid { gap: var(--s-10); } }

/* ---------------------------------------------------------------- states */

.ct-sent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--success);
  border-radius: var(--r);
  background: var(--bg-elev);
}
.ct-sent-icon { color: var(--success); flex: none; margin-top: 2px; }
.ct-sent-title { font-size: var(--fs-h3); margin-bottom: var(--s-1); }
.ct-sent p { color: var(--text-dim); font-size: var(--fs-sm); }

.ct-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--danger);
  border-radius: var(--r);
  background: var(--bg-elev);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.ct-alert-icon { color: var(--danger); flex: none; margin-top: 2px; }

/* Sending state. The markup hook is on the form so the shared script can set
   it; without JavaScript the form simply posts and the page reloads. */
.ct-form[data-state="sending"] { opacity: 0.6; pointer-events: none; }

/* ------------------------------------------------------------------ form */

.ct-form-title { font-size: var(--fs-h3); margin-bottom: var(--s-5); }

.ct-form { display: flex; flex-direction: column; gap: var(--s-5); }

.ct-row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .ct-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ct-opt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
  margin-inline-start: var(--s-2);
}

/* Honeypot. Moved off-screen rather than display:none, because some bots skip
   hidden inputs but fill positioned ones. */
.ct-pot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ct-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.ct-foot-note { font-size: var(--fs-micro); max-width: 52ch; }

/* --------------------------------------------------------------- sidebar */

.ct-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .ct-side {
    padding-top: 0;
    border-top: 0;
    padding-inline-start: var(--s-7);
    border-inline-start: 1px solid var(--line);
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
}

.ct-side-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ct-methods { display: flex; flex-direction: column; margin-top: calc(var(--s-5) * -1); }

.ct-method { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.ct-method dt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
}
.ct-method dt svg { color: var(--accent-text); flex: none; }
.ct-method dd { font-size: var(--fs-sm); }
.ct-method-note { color: var(--text-faint); font-size: var(--fs-micro); margin-top: var(--s-2); max-width: 40ch; }

.ct-quick-head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}
.ct-quick-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  transition: color var(--d-micro) var(--ease);
}
.ct-quick-link svg { flex: none; transition: transform var(--d-micro) var(--ease); }
.ct-quick-link:hover { color: var(--text); }
.ct-quick-link:hover svg { transform: translateX(3px); }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq-head { padding-block: var(--s-8) var(--s-6); }
@media (min-width: 1024px) { .faq-head { padding-block: var(--s-9) var(--s-7); } }

.faq-head-inner { max-width: 65ch; }
.faq-title { font-size: var(--fs-h1); letter-spacing: -0.025em; }
.faq-head .lead { margin-top: var(--s-4); }

.faq-body { padding-bottom: var(--s-8); }
.faq-wrap { max-width: 900px; margin-inline: auto; }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  font-weight: 500;
  line-height: 1.4;
  transition: color var(--d-micro) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent-text); }
.faq-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.faq-q-text { max-width: 56ch; }

.faq-q-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-dim);
  transition: transform var(--d-ui) var(--ease),
              border-color var(--d-ui) var(--ease),
              color var(--d-ui) var(--ease);
}
.faq-details[open] .faq-q-mark {
  transform: rotate(45deg);      /* the plus becomes a close mark */
  border-color: var(--accent);
  color: var(--accent-text);
}

.faq-a {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-bottom: var(--s-6);
  padding-inline-end: var(--s-8);
  max-width: 65ch;
}
.faq-a p { color: var(--text-dim); }

.faq-after {
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.faq-after-inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .faq-after-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); }
}
.faq-after-title { font-size: var(--fs-h2); margin-bottom: var(--s-3); }
.faq-after-inner p { max-width: 54ch; }
.faq-after-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* =========================================================================
   LEGAL TEMPLATE
   ========================================================================= */

.lg-head {
  padding-block: var(--s-8) var(--s-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .lg-head { padding-block: var(--s-9) var(--s-7); } }

.lg-title { font-size: var(--fs-h1); letter-spacing: -0.025em; }
.lg-lead { color: var(--text-dim); font-size: var(--fs-body-l); max-width: 65ch; margin-top: var(--s-4); }
.lg-stamp {
  margin-top: var(--s-5);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.lg-body { padding-block: var(--s-7) var(--s-9); }

.lg-grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .lg-grid { grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-9); }
}

/* Table of contents: a plain list on mobile, sticky beside the document above
   1024px so a long policy stays navigable. */
.lg-toc { padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .lg-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100dvh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.lg-toc-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-3);
}
.lg-toc-list { list-style: none; padding: 0; counter-reset: toc; }
.lg-toc-list li { counter-increment: toc; }
.lg-toc-list a {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-1);
  font-size: var(--fs-sm);
  color: var(--text-dim);
  transition: color var(--d-micro) var(--ease);
}
.lg-toc-list a::before {
  content: counter(toc);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  min-width: 16px;
}
.lg-toc-list a:hover { color: var(--text); }

/* Readable long-form measure, capped at 65ch. */
.lg-doc { max-width: 65ch; }

.lg-section { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.lg-section:first-of-type { border-top: 0; padding-top: 0; }
.lg-section-title { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.lg-section:target .lg-section-title { color: var(--accent-text); }

.lg-p { color: var(--text-dim); margin-bottom: var(--s-4); }
.lg-p:last-child { margin-bottom: 0; }

.lg-list { display: flex; flex-direction: column; gap: var(--s-3); padding-inline-start: var(--s-5); }
.lg-list li { color: var(--text-dim); }
.lg-list li::marker { color: var(--accent); }

.lg-dl { display: flex; flex-direction: column; }
.lg-dl-row {
  display: grid;
  gap: var(--s-1);
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);   /* one hairline per row, never two */
}
.lg-dl-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .lg-dl-row { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-5); }
}
.lg-dl-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: 4px;
}
.lg-dl-row dd { color: var(--text-dim); }

.lg-foot {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--text-dim);
}

/* =========================================================================
   404
   ========================================================================= */

.nf { padding-block: var(--s-8) var(--s-9); }
@media (min-width: 1024px) { .nf { padding-block: var(--s-9) var(--s-10); } }

.nf-inner { max-width: 760px; }

.nf-code {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  color: var(--accent-text);
  margin-bottom: var(--s-4);
}

.nf-title { font-size: var(--fs-h1); letter-spacing: -0.025em; }
.nf-lead { margin-top: var(--s-4); }

.nf-path {
  margin-top: var(--s-4);
  font-size: var(--fs-micro);
  word-break: break-all;
}

.nf-search {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.nf-search-row { display: flex; gap: var(--s-3); }
.nf-search-row .input { min-height: 54px; font-size: var(--fs-body-l); }

.nf-cats { margin-top: var(--s-7); }
.nf-cats-head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--s-4);
}

.nf-cat-list { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .nf-cat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.nf-cat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  transition: border-color var(--d-micro) var(--ease), transform var(--d-micro) var(--ease);
}
.nf-cat:hover { border-color: var(--accent); transform: translateY(-2px); }
.nf-cat:active { transform: translateY(1px); }
.nf-cat-name { font-size: var(--fs-sm); font-weight: 500; }
.nf-cat-count { font-size: var(--fs-micro); color: var(--text-faint); }

.nf-out {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.nf-help { margin-top: var(--s-5); font-size: var(--fs-sm); }

}