/* ============================================================================
 * sidq-legal.css — styling for the dynamic legal variables and the draft banner.
 * Loaded by privacy.html and terms.html alongside sidq-legal.js.
 * ========================================================================== */

/* Unfilled variables must LOOK unfilled — a reader should never mistake an
   undecided entity name for a real one. */
.legal-tbc {
  font-family: var(--f-label, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: .88em;
  letter-spacing: .02em;
  color: var(--t-accent, #F4C9A0);
  background: color-mix(in srgb, var(--t-accent, #F4C9A0) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--t-accent, #F4C9A0) 45%, transparent);
  border-radius: 3px;
  padding: 0 5px;
  white-space: nowrap;
}

.legal-draft-banner {
  margin: 0 0 30px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--t-text, #F6EFE6);
  background: color-mix(in srgb, var(--t-accent2, #E59A8A) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t-accent2, #E59A8A) 45%, transparent);
  border-left: 3px solid var(--t-accent2, #E59A8A);
  border-radius: 6px;
}
.legal-draft-banner b { color: var(--t-accent2, #E59A8A); }
.legal-draft-banner .legal-tbc { white-space: normal; }

/* ---- body copy elements introduced by the privacy/terms drop ---------------
   Loaded on both legal pages, so the two documents stay visually identical
   without duplicating rules in each page's <style>. ------------------------ */
.legal .legal-updated {
  font-family: var(--f-label, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-textdim, #8E7CA8);
  margin: 0 0 30px;
}
.legal .legal-list { margin: 0 0 18px; padding-left: 20px; }
.legal .legal-list li {
  font-size: clamp(15.5px, 1.8vw, 17.5px);
  line-height: 1.7;
  color: var(--t-text2, #C9B3E8);
  margin-bottom: 12px;
}
/* Tables scroll inside their own box so the page body never scrolls sideways. */
.legal .legaltable {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 18px 0 26px;
  font-size: 14.5px;
}
.legal .legaltable th {
  text-align: left;
  font-family: var(--f-label, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--t-textdim, #8E7CA8);
  padding: 10px 14px;
  border-bottom: 1px solid var(--t-line, rgba(201,179,232,.16));
  white-space: nowrap;
}
.legal .legaltable td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(201,179,232,.09);
  color: var(--t-text2, #C9B3E8);
  line-height: 1.6;
  vertical-align: top;
  min-width: 140px;
}
.legal .legaltable tbody tr:last-child td { border-bottom: 0; }
/* the eyebrow is uppercased; the placeholder chip shouldn't be shouted too */
.legal .legal-updated .legal-tbc { text-transform: none; }