/* Additions for the legal pages. Loaded after user-guide.css. */

.legal-shell { counter-reset: clause; }

.legal-shell section.doc h2::before{
  counter-increment: clause;
  content: counter(clause);
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.legal-shell section.doc.unnumbered h2::before{ content: none; }

.meta{
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.meta b{ color: var(--text-muted); font-weight: 400; }

.plain{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 0 0 8px;
}
.plain h3{ margin: 0 0 10px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); }
.plain p{ margin-bottom: 10px; font-size: 15px; }
.plain p:last-child{ margin-bottom: 0; }
.plain ul{ margin-bottom: 0; font-size: 15px; }

.kv.wide td:first-child{ white-space: normal; }
.kv td strong{ color: var(--text); }

/* Base .kv is a 2-column table, so it only pads the first cell. These wider
   tables have 3-4 columns, where neighbouring cells otherwise touch. */
.kv.wide th,
.kv.wide td{ padding-right: 32px; }
.kv.wide th:last-child,
.kv.wide td:last-child{ padding-right: 0; }

/* The 4-column "what the app sends" table: let the description column take the
   slack so the three short columns stop wrapping every other word. */
.kv.cols4 th:nth-child(1){ width: 17%; }
.kv.cols4 th:nth-child(2){ width: 17%; }
.kv.cols4 th:nth-child(4){ width: 18%; }

.legalnav a{ display: block; }