/* Public legal documents - rendered by web/js/legal.js into #view-legal.

   These pages are read, not operated, so the whole file is in service of one
   thing: a comfortable reading measure. Body text is capped near 68 characters
   and the type is a little larger than the application's, because somebody is
   working through a contract rather than scanning a dashboard.

   Every colour is a custom property defined on :root in app.css, so light and
   dark both work with one palette. There is no hex value anywhere in this
   file, and there must never be one. The mount carries class="landing", so the
   shared rules in landing.css - block display, heading weight, link colour,
   focus rings, scroll-margin under the sticky header - already apply here and
   are not repeated. */

.lg-wrap {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */

.lg-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.lg-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 56px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.lg-back { flex: none; }

.lg-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: auto;
}

.lg-tab {
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 11px;
  background: transparent;
  color: var(--ink-2);
}

.lg-tab:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}

.lg-tab-on,
.lg-tab-on:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ---------- document ---------- */

.lg-main {
  padding: 40px 24px 56px;
}

/* The measure. 68ch on the article keeps prose in the 65-75 character band
   that a long document needs; the few blocks that want more room widen
   themselves rather than the article widening for them. */
.lg-doc {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.65;
}

/* The eyebrow is a span, so it needs to be told it is a line of its own. */
.lg-doc > .eyebrow {
  display: block;
  margin-bottom: 2px;
}

.lg-doc h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 8px 0 10px;
}

.lg-doc h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 12px;
}

.lg-doc h3 {
  font-size: 15px;
  line-height: 1.4;
  margin: 22px 0 8px;
  color: var(--ink);
}

.lg-doc p { margin: 0 0 14px; }
.lg-doc p:last-child { margin-bottom: 0; }

.lg-doc .lg-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 20px;
}

.lg-doc .lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
}

.lg-meta-sep { color: var(--line-strong); }

/* ---------- sections ---------- */

.lg-section {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  margin-top: 30px;
}

.lg-list {
  margin: 0 0 14px;
  padding-left: 22px;
}

.lg-list li { margin-bottom: 8px; }
.lg-list li:last-child { margin-bottom: 0; }

.lg-defs { margin: 0 0 14px; }

.lg-defs dt {
  font-weight: 620;
  color: var(--ink);
  margin-top: 16px;
}

.lg-defs dt:first-child { margin-top: 0; }

.lg-defs dd {
  margin: 4px 0 0;
  color: var(--ink-2);
}

/* ---------- callouts ---------- */

.lg-callout {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px 16px;
  margin: 0 0 18px;
}

.lg-callout-tag {
  display: block;
  margin-bottom: 6px;
}

.lg-callout p { margin: 0; }

.lg-callout-note {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.lg-callout-note .lg-callout-tag { color: var(--accent-ink); }

.lg-callout-todo {
  background: var(--warn-soft);
  border-color: var(--warn);
}

.lg-callout-todo .lg-callout-tag { color: var(--warn); }

/* The standing "a lawyer has not seen this" banner. Loud on purpose: the
   person who most needs to notice it is the owner reading their own site. */
.lg-callout-draft {
  background: var(--danger-soft);
  border-color: var(--danger);
  border-left-width: 4px;
}

.lg-callout-draft .lg-callout-tag { color: var(--danger); }

/* ---------- table of contents ---------- */

.lg-toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 16px 18px;
  margin: 24px 0 4px;
}

.lg-doc .lg-toc-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.lg-toc-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
}

.lg-toc-list li { margin-bottom: 5px; }
.lg-toc-list li:last-child { margin-bottom: 0; }

.lg-toc-link { text-decoration: none; }
.lg-toc-link:hover { text-decoration: underline; }

/* ---------- contact and related ---------- */

.lg-mail { font-weight: 550; }

.lg-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- index ---------- */

.lg-cards {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
}

.lg-card {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: start;
}

.lg-card h2 { margin: 0; }
.lg-card p { margin: 0; color: var(--ink-2); }

/* ---------- footer ---------- */

.lg-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 0 30px;
}

.lg-footer-inner {
  display: grid;
  gap: 10px;
}

.lg-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lg-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--accent);
  font-weight: 550;
}

.lg-linkbtn:hover { text-decoration: underline; }

.lg-footer-note { margin: 0; }

/* ---------- narrow screens ---------- */

@media (max-width: 700px) {
  .lg-header-inner { gap: 10px; }
  .lg-tabs { margin-left: 0; width: 100%; }
  .lg-main { padding: 28px 18px 44px; }
  .lg-doc { font-size: 15px; }
  .lg-doc h1 { font-size: 25px; }
  .lg-doc h2 { font-size: 17px; }
  .lg-wrap { padding: 0 18px; }
}

@media print {
  .lg-header,
  .lg-footer,
  .lg-toc,
  .lg-related { display: none; }
  .lg-doc { max-width: none; }
  .lg-section { break-inside: auto; }
  .lg-section h2 { break-after: avoid; }
}