/* ── Barmio legal documents ───────────────────────────────────────────────────
   Rides on landing.css (same palette, same nav and buttons) and adds only what
   long-form prose needs. Loaded by templates/legal/_base.html.

   Two things it does deliberately differently from the landing page:

   * **A measure, not a full-width column.** Legal text is read, not scanned;
     70ch is where a line stops needing a finger to find its way back.
   * **A print stylesheet.** These documents get printed and attached to a
     contract — an accountant asks for the DPA on paper. Print gets black on
     white, the nav and the switcher go away, and links print their URL after
     the text so a paper copy is still followable. */

.lg-body { background: var(--paper); }

.lg-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

/* Loud on purpose: it means a contract is on the public web with a hole in it.
   Only ever visible while the supplier record is incomplete. */
.lg-todo {
  border: 1px solid #d99b12;
  background: rgba(245, 165, 36, .14);
  color: #6f4a00;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: .95rem;
}
.lg-todo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: rgba(19, 26, 49, .08);
  padding: 1px 6px;
  border-radius: 5px;
}

.lg-head { margin-bottom: 26px; }
.lg-eyebrow {
  color: var(--green);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.lg-head h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}
.lg-meta { color: var(--muted); font-size: .9rem; margin-top: 8px; }
.lg-lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 3px solid var(--line);
}

/* ── Document switcher ──────────────────────────────────────────────────── */
.lg-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.lg-switch-item {
  /* 8px rectangles, not pills — the app's rule, and these are tabs. */
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .9rem;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--muted);
  background: #fff;
}
a.lg-switch-item:hover { color: var(--ink); border-color: var(--green); }
.lg-switch-item.is-current {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
}

/* ── The prose itself ───────────────────────────────────────────────────── */
.lg-doc { max-width: 70ch; }
.lg-doc h2 {
  font-size: 1.25rem;
  margin: 40px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  letter-spacing: -.01em;
}
.lg-doc h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lg-doc h3 {
  font-size: 1.02rem;
  margin: 26px 0 10px;
  color: var(--green);
}
.lg-doc p  { margin: 0 0 14px; color: var(--body); }
.lg-doc ul, .lg-doc ol { margin: 0 0 16px 22px; color: var(--body); }
.lg-doc li { margin-bottom: 8px; }
.lg-doc a  { color: var(--green); text-decoration: underline; }
.lg-doc strong { color: var(--ink); }

.lg-doc dl { margin: 0 0 18px; }
.lg-doc dt { font-weight: 700; margin-top: 12px; }
.lg-doc dd { margin: 4px 0 0 0; color: var(--muted); }

/* Identification block at the top of the contracts. */
.lg-party {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 0 0 18px;
}
.lg-party p { margin: 0 0 4px; }
.lg-party p:last-child { margin-bottom: 0; }

/* A point the reader must not skim past. */
.lg-note {
  border-left: 3px solid var(--green);
  background: var(--mint);
  border-radius: 0 10px 10px 0;
  padding: 12px 16px;
  margin: 0 0 18px;
}
.lg-note p:last-child { margin-bottom: 0; }

/* ── Tables (sub-processors, data categories, retention) ────────────────── */
.lg-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.lg-doc table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .92rem;
}
.lg-doc th, .lg-doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.lg-doc th {
  color: var(--ink);
  font-weight: 700;
  background: var(--paper-2);
  white-space: nowrap;
}
.lg-doc td { color: var(--body); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.lg-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
}
.lg-foot a { color: var(--muted); text-decoration: underline; }
.lg-foot-nav { margin-top: 8px; }
.lg-copy { margin-top: 14px; color: var(--muted); }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .ld-nav, .lg-switch, .lg-todo, .lg-foot-nav { display: none !important; }
  .lg-body, .lg-main { background: #fff; }
  .lg-main { max-width: none; padding: 0; }
  .lg-doc, .lg-doc p, .lg-doc li, .lg-doc td, .lg-head h1,
  .lg-doc strong, .lg-doc h2, .lg-doc h3 { color: #000; }
  .lg-eyebrow, .lg-meta, .lg-lede, .lg-foot { color: #444; }
  .lg-doc h3 { color: #000; }
  .lg-party, .lg-note, .lg-doc th { background: #f4f4f4; border-color: #bbb; }
  .lg-doc a { color: #000; }
  /* A printed copy has to be followable without the screen behind it. */
  .lg-doc a[href^="http"]::after,
  .lg-doc a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .lg-doc a[href^="mailto:"]::after { content: ""; }
  .lg-doc h2, .lg-doc h3 { break-after: avoid; }
  .lg-doc table { break-inside: avoid; min-width: 0; }
}