/* DashSystem · dashsystem.co
   Document pages: /mentions-legales, /en/legal and the 404 page. Loaded after site.css by these
   pages only; it reuses the tokens of site.css and never overrides a shared block.
   The legal page is set like the small print of a label's catalogue: a credits block, the text in
   two sides (A: legal notice, B: privacy) whose clause numbers hang in the margin and serve the
   table of contents, one ink on the grey board, a reading measure of about 70 characters. */

:root {
  --hang: 4.5rem;        /* margin column for the clause numbers */
  --measure: 36rem;      /* 65 to 75 characters of body text */
}

/* ---------- page head ---------- */

.doc-head { padding-block: var(--s8) var(--s8); }
.doc-head-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s6) var(--s7);
  align-items: end;
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
}
.doc-head h1 {
  font-size: clamp(2.5rem, 1rem + 4.6vw, 5.5rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .92;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.doc-lede {
  margin-top: var(--s5);
  max-width: 36rem;
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}
.doc-date {
  margin-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.doc-date time { color: var(--ink); font-weight: 650; }

/* the credits block: who publishes, hosts and delivers the site, at a glance */
.colophon { border-top: 1px solid var(--ink); }
.colophon > div {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule);
}
.colophon dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}
.colophon dt::after {
  content: "";
  flex: 1;
  min-width: var(--s4);
  border-bottom: 2px dotted rgba(18, 19, 20, .42);
  transform: translateY(-.3em);
}
.colophon dd {
  font-size: var(--t-sm);
  font-weight: 650;
  text-align: right;
}

/* ---------- body: table of contents + the two sides ---------- */

.doc-body { padding-bottom: var(--s10); }
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s7);
  align-items: start;
}

.toc {
  position: sticky;
  top: calc(var(--mh) + var(--s5));
  max-height: calc(100vh - var(--mh) - var(--s7));
  max-height: calc(100svh - var(--mh) - var(--s7));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* room for the focus outlines inside the scroller */
  margin: calc(-1 * var(--s2));
  padding: var(--s2);
}
.toc-title {
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.toc-side { margin-top: var(--s5); }
.toc-side-title {
  display: grid;
  grid-template-columns: calc(2.25rem + var(--s2)) minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: baseline;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--ink);
  font-size: var(--t-md);
  font-weight: 750;
  font-stretch: 85%;
  line-height: 1.3;
}
.toc-side-title .ref {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.toc a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s2) var(--s2);
  border-bottom: 1px dotted var(--rule);
  font-size: var(--t-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.toc a .ref {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
}
.toc a:hover { background-color: #121314; color: #c3c7cb; }
.toc a:focus-visible { outline-offset: 1px; }

.doc { min-width: 0; }
.side { scroll-margin-top: calc(var(--mh) + var(--s4)); }
.side + .side { margin-top: var(--s9); }
.side-head {
  display: grid;
  grid-template-columns: var(--hang) minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .95;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.side-head .ref {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  line-height: 1.2;
  text-transform: uppercase;
}
.side-intro {
  margin-top: var(--s5);
  padding-left: calc(var(--hang) + var(--s4));
}
.side-intro p {
  max-width: var(--measure);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

.clause { margin-top: var(--s8); }
.side-head + .clause { margin-top: var(--s7); }
.clause h3 {
  display: grid;
  grid-template-columns: var(--hang) minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  font-size: 1.625rem;
  font-weight: 800;
  font-stretch: 78%;
  line-height: 1.12;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.clause h3 .ref {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  line-height: 1.2;
}
.clause-body {
  margin-top: var(--s4);
  padding-left: calc(var(--hang) + var(--s4));
}
.clause-body > * + * { margin-top: var(--s4); }
.clause-body p,
.clause-body li {
  max-width: var(--measure);
  line-height: 1.6;
  text-wrap: pretty;
}
.clause-body a,
.doc-end a { overflow-wrap: anywhere; }
.clause-body strong { font-weight: 700; }

/* facts: label / value rows, like the liner notes of a sleeve */
.facts { max-width: var(--measure); border-top: 1px solid var(--ink); }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  padding-top: .1em;
  font-size: var(--t-sm);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.45;
  color: var(--ink);
}
.facts dd {
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* plain lists, with a drawn rule as the marker */
.doc-list li {
  position: relative;
  padding-left: var(--s5);
}
.doc-list li + li { margin-top: var(--s3); }
.doc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: 10px;
  height: 2px;
  background-color: var(--ink);
}

/* the apps' own policies, listed by catalogue number */
.policies { max-width: 44rem; border-top: 1px solid var(--ink); }
.policies li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.policies .ref {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
}
.policies .p-name { font-weight: 700; }
.policies a {
  justify-self: start;
  padding-block: var(--s1);
  font-weight: 600;
  overflow-wrap: normal;
}
.policies a .i,
.lost-en a .i { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; }
/* the underline stops at the words, not under the space before the icon */
.policies a:has(> span),
.lost-en a:has(> span) { text-decoration: none; }
.policies a > span,
.lost-en a > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.policies a:hover > span,
.lost-en a:hover > span { text-decoration-thickness: 2px; }
.policies .p-note { color: var(--ink-2); }

.doc-end {
  margin-top: var(--s9);
  padding-top: var(--s4);
  padding-left: calc(var(--hang) + var(--s4));
  border-top: 2px solid var(--ink);
  font-size: var(--t-lg);
  line-height: 1.42;
}
.doc-end a { font-weight: 650; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .doc-head { padding-block: var(--s7) var(--s7); }
  .doc-head-grid { grid-template-columns: 1fr; align-items: start; }
  .doc-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .toc {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s6);
  }
  .toc-title { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  :root { --hang: 2.5rem; }
  .doc-head { padding-block: var(--s6) var(--s7); }
  .doc-lede { margin-top: var(--s4); font-size: 1.0625rem; line-height: 1.45; }
  .colophon > div { flex-wrap: wrap; row-gap: 0; }
  .colophon dd { margin-left: auto; }
  .toc { grid-template-columns: 1fr; }
  .side-head { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
  .side-intro,
  .clause-body,
  .doc-end { padding-left: 0; }
  .side-intro p { font-size: 1.0625rem; }
  .clause { margin-top: var(--s7); }
  .clause h3 { display: flex; gap: var(--s3); font-size: 1.4375rem; }
  .clause h3 .ref { flex: none; }
  .facts > div { grid-template-columns: 1fr; gap: var(--s1); }
  .policies li { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .policies li > :nth-child(n+3) { grid-column: 2; }
  .doc-end { font-size: 1.0625rem; }
}

/* ---------- page: 404 ---------- */

.lost { padding-block: var(--s8) var(--s10); }
.lost-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s7) var(--s8);
  align-items: center;
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
}
.lost h1 {
  font-size: clamp(2.5rem, 1rem + 4.6vw, 5.5rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .92;
  letter-spacing: -.01em;
  text-wrap: balance;
  max-width: 12ch;
}
.lost-lede {
  margin-top: var(--s5);
  max-width: 34rem;
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lost-path {
  margin-top: var(--s4);
  max-width: 34rem;
  font-size: var(--t-sm);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.lost-path span { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.lost .actions { margin-top: var(--s6); }
.lost-en {
  margin-top: var(--s7);
  padding-top: var(--s4);
  max-width: 34rem;
  border-top: 1px solid var(--ink);
  line-height: 1.5;
}
.lost-en strong { font-weight: 750; }
.lost-en a {
  padding-block: var(--s2);
  font-weight: 650;
  white-space: nowrap;
}
.lost-en a .i { transition: transform .35s var(--ease-out); }
.lost-en a:hover .i { transform: translateX(3px); }

/* the empty sleeve: its record is missing from the crate */
.lost-art svg { width: 100%; max-width: 600px; height: auto; margin-inline: auto; overflow: visible; }
.nf-ghost { fill: rgba(18, 19, 20, .05); stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 7; }
.nf-ghost-label { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 5; }
.nf-ref { font: 800 26px var(--label); font-stretch: 76%; letter-spacing: .01em; fill: var(--ink); }
.nf-t { font: 650 12.5px var(--label); font-stretch: 88%; letter-spacing: .04em; text-transform: uppercase; fill: var(--ink-2); }
.nf-sleeve { fill: #cdd0d3; stroke: var(--ink); stroke-width: 2.5; }
.nf-seam { fill: none; stroke: rgba(18, 19, 20, .28); stroke-width: 1; stroke-dasharray: 3 3; }
.nf-thumb { fill: var(--board); stroke: var(--ink); stroke-width: 2.5; }
.nf-hole { fill: var(--board-3); stroke: var(--ink); stroke-width: 2.5; }
.nf-print { font: 650 12px var(--label); font-stretch: 85%; letter-spacing: .045em; text-transform: uppercase; fill: var(--ink); }
/* the sleeve's label band (.bs-band*) comes from site.css, like on the commissioned sleeve */

@media (max-width: 960px) {
  .lost { padding-block: var(--s7) var(--s9); }
  .lost-grid { grid-template-columns: 1fr; }
  .lost-art svg { max-width: 520px; margin-inline: 0; }
}
@media (max-width: 640px) {
  .lost { padding-block: var(--s6) var(--s8); }
  .lost-lede { margin-top: var(--s4); font-size: 1.0625rem; line-height: 1.45; }
  .lost .actions .btn { flex: 1 1 auto; }
}

/* ---------- system surfaces ---------- */

@media (forced-colors: active) {
  .toc a:hover { forced-color-adjust: none; background-color: CanvasText; color: Canvas; }
  .nf-ghost, .nf-ghost-label { stroke: CanvasText; }
}

@media print {
  .toc { display: none; }
  .doc-grid, .doc-head-grid { grid-template-columns: 1fr; }
  .clause, .facts > div, .policies li { break-inside: avoid; }
}