/* The legal pages (crates/tally-web/src/legal): the privacy notice, the terms of use and
   the DPA. They sit over tokens.css and app.css (the brand, the skip link, the theme
   menu's colours) and take the landing's manual look: a sticky, numbered contents column
   beside numbered sections, mono labels, hairlines and quiet space. Every class here is
   legal-…, so neither app.css nor landing.css reaches into these pages (tally-web's
   stylesheets test checks). No motion beyond the theme menu's; no inline style. */

:root {
  --legal-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --legal-masthead: 60px;
}

html {
  scroll-padding-top: calc(var(--legal-masthead) + 20px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[data-page="legal"] ::selection {
  background: var(--brand-tint);
  color: var(--ink);
}

.legal-masthead-inner,
.legal-manual,
.legal-colophon-inner {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ------------------------------------------------------------------ Masthead */

.legal-masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background-color: color-mix(in srgb, var(--paper) 86%, transparent);
  background-image: var(--chrome);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}

.legal-masthead-inner {
  height: var(--legal-masthead);
  display: flex;
  align-items: center;
  gap: 24px;
}

.legal-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
}

.legal-nav a {
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}

.legal-nav a:hover {
  color: var(--ink);
}

.legal-nav a[aria-current="page"] {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

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

.legal-main {
  flex: 1;
}

.legal-manual {
  margin-top: 76px;
}

/* Two columns: the contents (sticky, through the whole document) and the text. */
.legal-doc {
  display: grid;
  grid-template-columns: 210px minmax(0, 760px);
  column-gap: 72px;
  align-items: start;
}

.legal-head,
.legal-section {
  grid-column: 2;
}

.legal-contents {
  grid-column: 1;
  grid-row: 1 / span 40;
  align-self: start;
  position: sticky;
  top: calc(var(--legal-masthead) + 28px);
  max-height: calc(100vh - var(--legal-masthead) - 56px);
  overflow-y: auto;
}

.legal-contents-title {
  margin-bottom: 12px;
  color: var(--faint);
  font-family: var(--legal-mono);
  font-size: 12.5px;
}

.legal-contents-list {
  display: grid;
  gap: 2px;
  list-style: none;
  padding: 0;
}

.legal-contents-link {
  display: flex;
  gap: 12px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.legal-contents-link:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.legal-contents-n {
  flex: none;
  width: 1.6em;
  padding-top: 1px;
  color: var(--faint);
  font-family: var(--legal-mono);
  font-size: 12px;
}

.legal-kicker {
  color: var(--faint);
  font-family: var(--legal-mono);
  font-size: 12.5px;
}

.legal-title {
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
}

.legal-dates {
  margin-top: 16px;
  color: var(--muted);
  font-family: var(--legal-mono);
  font-size: 13px;
}

.legal-lede {
  max-width: 62ch;
  margin-top: 22px;
  color: var(--muted);
  font-size: 18.5px;
  line-height: 1.58;
}

.legal-section {
  scroll-margin-top: calc(var(--legal-masthead) + 24px);
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.legal-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.5vw, 31px);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.legal-number {
  flex: none;
  color: var(--faint);
  font-family: var(--legal-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.legal-sub {
  margin-top: 30px;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.3;
}

.legal-p,
.legal-list li {
  max-width: 68ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.66;
}

.legal-p {
  margin-top: 16px;
}

.legal-sub + .legal-p,
.legal-sub + .legal-list {
  margin-top: 8px;
}

.legal-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.legal-list li {
  position: relative;
  padding-left: 22px;
}

.legal-list li::before {
  content: "";
  position: absolute;
  top: .86em;
  left: 2px;
  width: 10px;
  border-top: 1.5px dashed var(--faint);
}

.legal-doc strong {
  color: var(--ink);
  font-weight: 650;
}

.legal-doc a {
  color: var(--ink);
  text-decoration-color: var(--faint);
}

.legal-doc a:hover {
  text-decoration-color: var(--ink);
}

.legal-doc .legal-contents-link {
  color: var(--muted);
}

.legal-doc .legal-contents-link:hover {
  color: var(--ink);
}

.legal-doc code {
  color: var(--ink);
  font-size: .86em;
}

/* Tables: ruled, on a card. On narrow screens each row becomes a short block. */
.legal-table-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--line-2);
  text-align: left;
  vertical-align: top;
}

.legal-table thead th {
  border-top: 0;
  background: var(--surface-2);
  color: var(--faint);
  font-family: var(--legal-mono);
  font-size: 12px;
  font-weight: 500;
}

.legal-table tbody th {
  min-width: 9em;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: break-word;
}

.legal-table td {
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ Colophon */

.legal-colophon {
  margin-top: 96px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}

.legal-colophon-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: 22px;
  padding-bottom: 32px;
}

.legal-colophon-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.legal-colophon-mark svg {
  width: 22px;
  height: 19px;
}

.legal-colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  padding: 0;
}

.legal-colophon-links a {
  color: var(--muted);
  text-decoration: none;
}

.legal-colophon-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ------------------------------------------------------------ Narrower screens */

@media (max-width: 1100px) {
  .legal-doc {
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 44px;
  }
}

/* One column: the title, then the contents as a list in a card, then the text. */
@media (max-width: 960px) {
  .legal-manual {
    margin-top: 44px;
  }

  .legal-doc {
    display: block;
  }

  .legal-contents {
    position: static;
    max-height: none;
    margin-top: 32px;
    padding: 16px 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--surface);
  }

  .legal-contents-title {
    padding: 0 10px;
  }

  .legal-section {
    margin-top: 48px;
    padding-top: 40px;
  }
}

@media (max-width: 640px) {
  .legal-masthead-inner,
  .legal-manual,
  .legal-colophon-inner {
    padding: 0 16px;
  }

  .legal-masthead-inner {
    gap: 14px;
  }

  .legal-nav {
    gap: 14px;
  }

  .legal-lede {
    font-size: 17px;
  }

  .legal-p,
  .legal-list li {
    font-size: 15.5px;
  }

  .legal-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }

  .legal-table tr {
    padding: 12px 0;
    border-top: 1px solid var(--line-2);
  }

  .legal-table tbody tr:first-child {
    border-top: 0;
  }

  .legal-table th,
  .legal-table td {
    padding: 2px 16px;
    border-top: 0;
  }

  .legal-table tbody th {
    min-width: 0;
    padding-bottom: 4px;
  }

  .legal-table td + td {
    color: var(--muted);
  }
}

@media (max-width: 460px) {
  .legal-brand-by {
    display: none;
  }
}