/* Static /about/ /learn/ /faq/ /contact/ pages (tools/build-learn.mjs). Tokens, the
   type scale, the reset, the starfield and the taskbar come from the SPA's own main
   stylesheet, the layout from shell.css (legal-pages.css + legal-table-footer.css);
   this sheet is only the bits the word lists add. */
.crumbs { font-size: .85rem; color: var(--legal-muted-3); margin-bottom: 14px; }
.crumbs a { color: var(--legal-muted); text-decoration: none; }
.crumbs a:hover { color: var(--legal-accent-light); }

.legal-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 8px;
  background: rgba(var(--legal-primary-rgb), .06);
  border: 1px solid rgba(var(--legal-border-rgb), .12); border-radius: 12px; overflow: hidden;
}
.legal-body th, .legal-body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid rgba(var(--legal-border-rgb), .08); }
.legal-body th { background: rgba(var(--legal-primary-rgb), .1); color: var(--legal-accent-lighter); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.legal-body td { color: var(--legal-text); }
.legal-body tr:last-child td { border-bottom: 0; }

.legal-body .cats, .legal-body .langs { margin-left: 20px; }
.cats small { color: var(--legal-muted-3); }
.legal-body .langs li { font-size: 1.15rem; }
.cta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 32px 0; color: var(--legal-muted); font-size: .9rem; }
.legal-body .cta a.btn { background: var(--legal-primary); color: var(--legal-on-primary); padding: 10px 20px; border-radius: 999px; text-decoration: none; font-weight: 600; }
.legal-body .cta a.btn:hover { background: var(--legal-primary-2); color: var(--legal-on-primary); }
.pager { display: flex; justify-content: space-between; gap: 16px; font-size: .9rem; }

/* /faq/ "is this email really from us?" checker (src/content/faq.html) */
.mail-check { margin: 16px 0 8px; }
.mail-check label { display: block; color: var(--legal-muted); font-size: .9rem; margin-bottom: 8px; }
.mail-check__row { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-check input { flex: 1 1 240px; min-width: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(var(--legal-border-rgb), .25); background: rgba(var(--legal-primary-rgb), .08); color: var(--legal-text); font: inherit; }
.mail-check input:focus { outline: 2px solid var(--legal-primary); outline-offset: 2px; }
.mail-check button { background: var(--legal-primary); color: var(--legal-on-primary); border: 0; padding: 10px 22px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.mail-check button:hover { background: var(--legal-primary-2); }
.mail-check__result { min-height: 1.5em; margin-top: 10px; }
.mail-check__result[data-ok="yes"] { color: #3FB37F; }
.mail-check__result[data-ok="no"] { color: #E5646B; }