/* ============================================
   DDD Shared Footer

   Colour comes from the layer 2 semantic roles in css/tokens.css (--theme-*), never from the
   legacy palette names or from literals. Two role choices worth knowing:

     --theme-ink-secondary   replaces both --text-secondary and --text-muted. --text-muted always
                             resolved to the SECONDARY ink despite its name, so mapping it to the
                             muted role would have darkened text on every page.
     --theme-ink-link        used for link hover/focus and for the signup kicker. It is the one
                             readable brand-toned ink each theme defines. --theme-accent is a fill:
                             on cream it is mint #53E7AC, which fails AA as text.

   The legacy .page-footer keeps its existing structure while resolving through the same roles.
   ============================================ */

footer {
  border-top: 1px solid var(--theme-rule-standard);
  padding: var(--rhythm-section) 0 var(--rhythm-section-compact);
}
footer .container { position: relative; z-index: 1; }

.footer-closing {
  text-align: center; font-size: 0.88rem; color: var(--theme-ink-secondary);
  margin-bottom: 1.5rem; line-height: 1.6;
  max-width: var(--layout-measure-compact); margin-left: auto; margin-right: auto;
}
.footer-inner {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem;
  color: var(--theme-ink-secondary); padding-top: 1.25rem;
  border-top: 1px solid var(--theme-rule-standard);
}
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--theme-ink-secondary); transition: color 0.2s; }
.footer-links a:hover { color: var(--theme-ink-link); }
.footer-divider {
  width: 1px; height: 14px; background: var(--theme-rule-standard);
  align-self: center; flex-shrink: 0;
}
.footer-attr { font-size: 0.88rem; color: var(--theme-ink-secondary); }
.footer-attr a { color: var(--theme-ink-secondary); font-weight: 500; }
.footer-attr a:hover { color: var(--theme-ink-link); }

/* ---- Structured public footer (core pages) ----
   Compact trust band, not a sitemap: one wrapped link row, one muted
   copyright line. No brand mark — keep this list at methodology/
   developers/partners/contact/X only — don't grow it into a sitemap.

   This footer is superseded by .site-footer below and now renders on only three pages:
   index.html, tape.html and in-practice.html, all deferred to Phases 2 and 3. The declarations
   remain unchanged; only their colour values now use semantic roles so tape.html is legible on
   cream while the intentionally dark pages retain their established contrast. */
footer.page-footer {
  display: block;
  width: 100%;
  margin: var(--rhythm-footer) auto 0;
  padding: 12px 0 calc(18px + env(safe-area-inset-bottom, 0px));
  font-family: var(--sans);
  color: var(--theme-ink-secondary);
  letter-spacing: 0;
  border-top: 1px solid var(--theme-rule-standard);
  background: none;
}
/* The inner box carries the primary page measure and the shared gutter (see the LAYOUT ROLE
   REGISTRY in css/tokens.css), so the footer rule above it starts and ends on the page spine
   rather than at a private 640px. The links themselves stay centred inside it. */
.page-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.page-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  font-family: var(--mono);
  font-size: var(--type-metadata-size);
  line-height: var(--type-metadata-lh);
  letter-spacing: var(--type-metadata-ls);
}
.page-footer__links a {
  color: var(--theme-ink-secondary);
  text-decoration: none;
  transition: color 0.18s ease;
}
.page-footer__links a:hover {
  color: var(--theme-ink-link);
}
.page-footer__links a.page-footer__x {
  display: inline-flex;
  align-items: center;
}
.page-footer__bottom {
  margin: 0;
  color: var(--theme-ink-muted);
  font-family: var(--mono);
  font-size: var(--type-provenance-size);
  line-height: var(--type-provenance-lh);
  letter-spacing: var(--type-provenance-ls);
}
.page-footer__sep {
  color: var(--theme-rule-standard);
}
.footer-compact-icon { display: inline-flex; align-items: center; }
.footer-compact-icon svg { opacity: 0.5; transition: opacity 0.2s; }
.footer-compact-icon:hover svg { opacity: 1; }
/* Legacy inline separator; the compatibility role preserves frozen dark pixels and repairs light. */
.footer-sep { color: var(--theme-legacy-footer-separator); margin: 0 0.05rem; }

/* ---- Signup block (subpages) ----
   Default width matches the narrative reading column. Wide-content
   pages (issuers, chains, history) override .signup-block max-width
   via their inline style so the top separator lines up with the data
   container edges. */
.signup-block {
  text-align: center;
  max-width: var(--layout-box-compact);
  margin: var(--rhythm-section) auto 0;
  padding: var(--rhythm-section-compact) var(--layout-gutter) 0;
  border-top: 1px solid var(--theme-rule-standard);
}
.signup-block .signup-kicker { font-family: var(--mono); font-size: var(--type-label-size); font-weight: var(--type-label-weight); line-height: var(--type-label-lh); color: var(--theme-ink-link); text-transform: uppercase; letter-spacing: var(--type-label-ls); margin: 0 0 0.75rem; }
.signup-block h3 { font-family: var(--serif-display); font-size: var(--type-subsection-title-size); font-weight: var(--type-subsection-title-weight); color: var(--theme-ink-primary); margin: 0 auto 0.65rem; letter-spacing: var(--type-subsection-title-ls); line-height: var(--type-subsection-title-lh); max-width: 560px; }
.signup-block .signup-description { font-family: var(--sans); font-size: var(--type-body-size); font-weight: var(--type-body-weight); color: var(--theme-ink-secondary); line-height: var(--type-body-lh); margin: 0 auto 26px; max-width: var(--layout-measure-compact); }
.signup-block .subscribe-form { display: flex; gap: 0; margin: 0 auto; max-width: 380px; border: 1px solid var(--theme-rule-standard); border-radius: 6px; overflow: hidden; transition: border-color 0.2s; }
.signup-block .subscribe-form:focus-within { border-color: var(--theme-rule-focus); }
.signup-block .subscribe-form input { flex: 1; background: none; border: none; color: var(--theme-ink-primary); font-family: var(--sans); font-size: 0.85rem; padding: 0.6rem 0.85rem; outline: none; min-width: 0; }
.signup-block .subscribe-form input::placeholder { color: var(--theme-ink-secondary); }
.signup-block .subscribe-form button { background: var(--theme-accent); color: var(--theme-accent-ink); border: none; font-family: var(--sans); font-size: 0.8rem; font-weight: 600; padding: 0.6rem 1rem; cursor: pointer; transition: opacity 0.2s; white-space: nowrap; }
.signup-block .subscribe-form button:hover { opacity: 0.85; }
.signup-block .subscribe-msg { font-size: 0.75rem; color: var(--theme-ink-secondary); margin-top: 0.5rem; min-height: 1.2em; }
.signup-block .signup-check { display: flex; align-items: flex-start; gap: 0.45rem; max-width: 380px; margin: 0.65rem auto 0; text-align: left; font-size: 0.78rem; color: var(--theme-ink-secondary); cursor: pointer; }
.signup-block .signup-check input { margin-top: 3px; flex-shrink: 0; }

@media (max-width: 600px) {
  .page-footer__links a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  .page-footer a,
  .footer-compact-icon {
    min-height: 44px;
  }
  .footer-inner { flex-direction: column; text-align: center; gap: 0.75rem; }
  .footer-links { justify-content: center; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
}

/* ---- Shared Stable Tape footer (.site-footer, from scripts/lib/site-chrome.mjs) ----
   Quiet, square, grouped (Stable Tape / Structure / Trust) + a small utility row
   (Contact, X). Group labels use the shared accessible --label-muted token. No pills,
   no gradients, no sitemap. Injected via markers in Phase 2.1+. Coexists with the legacy
   .page-footer styles above during migration. */
.site-footer {
  display: block;
  width: 100%;
  margin: var(--rhythm-footer) auto 0;
  padding: var(--rhythm-section-compact) 0 calc(var(--rhythm-section-compact) + env(safe-area-inset-bottom, 0px));
  font-family: var(--sans);
  border-top: 1px solid var(--theme-rule-standard);
  background: none;
}
/* Width and gutter come from the primary page measure in the LAYOUT ROLE REGISTRY, so the footer
   groups start on the same left edge as the navigation and the page content above them. */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  margin: 0 auto;
}
.site-footer__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 8rem;
}
.site-footer__heading {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  color: var(--theme-ink-muted);
}
.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.site-footer__list a {
  color: var(--theme-ink-secondary);
  text-decoration: none;
  font-size: var(--type-body-supporting-size);
  line-height: var(--type-body-supporting-lh);
  transition: color 0.18s ease;
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--theme-ink-link);
}
.site-footer__utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--type-provenance-size);
  line-height: var(--type-provenance-lh);
  letter-spacing: var(--type-provenance-ls);
}
.site-footer__utility-link {
  color: var(--theme-ink-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-footer__utility-link:hover,
.site-footer__utility-link:focus-visible {
  color: var(--theme-ink-link);
}
.site-footer__utility-sep {
  color: var(--theme-rule-standard);
}
.site-footer__x {
  display: inline-flex;
  align-items: center;
}
.site-footer__bottom {
  margin: 0;
  color: var(--theme-ink-muted);
  font-size: var(--type-provenance-size);
  line-height: var(--type-provenance-lh);
  font-family: var(--mono);
  letter-spacing: var(--type-provenance-ls);
}
.site-footer :focus-visible {
  outline: 2px solid var(--theme-focus-ring);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .site-footer__groups { flex-direction: column; gap: 1.5rem; }
  .site-footer__list a { min-height: 32px; display: inline-flex; align-items: center; }
  .site-footer__utility-link { min-height: 32px; display: inline-flex; align-items: center; }
}