/* The legal pages and the changelog (templates/{terms,eula,privacy,refunds,changelog}.html, partials/legal.html), in
   the help's shell as the owner chose it in round 20 of the mockups (2026-10-27). Everything else is help.css's, so
   this holds only what the documents add: the date under the title, the numbers of a numbered
   document's sections, and the changelog's releases down a rule. Sizes in --u, as the help's. */

/* The sidebar always fits the window under the bar, so the five documents are always in sight: when it is taller, only
   the open document's sections scroll, inside it, with the section being read kept in view and a fade at an edge
   that has more (legal.js; the owner, 2026-10-27). On a phone it is the help's drawer. */
@media (min-width: 900px) {
  .lg .side { display: flex; flex-direction: column; overflow: visible; }
  .lg .side > * { flex: none; }
  .lg .side .side__group.is-open { display: flex; flex-direction: column; flex: 0 1 auto; min-height: calc(140 * var(--u)); }
  .lg .side__group.is-open > .side__head { flex: none; }
  /* Room for the mark on the grid line, inside the list's own edge. */
  .lg .side__group.is-open ul { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin-left: -6px; padding-left: 6px;
    -webkit-mask-image: linear-gradient(transparent, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent);
    mask-image: linear-gradient(transparent, #000 var(--fade-top, 0px), #000 calc(100% - var(--fade-bottom, 0px)), transparent); }
  .lg .side__group.is-open ul::-webkit-scrollbar { display: none; }
  /* The section being read is marked on the grid's first line, which is the sidebar's left edge: help.css puts the
     mark a column further out, where the help's own sidebar clips it. */
  .lg .side__group li a.is-on::before { left: -1px; }
  /* The page's foot inside the sidebar's row, so at the end of a document there is room for the sidebar above the
     footer. */
  .lg .docs { padding-bottom: 0; }
  .lg .art { padding-bottom: calc(120 * var(--u)); }
}

/* help.js wants a search field and these pages have none to offer. */
.lg .side__search { display: none; }
/* Legal, over the documents, is a title and not a link. */
.lg .side .side__home { cursor: default; color: #fff; }
/* The changelog is not a legal document: set apart below the four. */
.lg .side__group.lg-apart { margin-top: calc(26 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.07); }

/* The date the document last changed, in the help's mono under the title. */
.lg-date { margin: calc(14 * var(--u)) 0 0; font: 400 calc(12 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* A numbered section: its number in the tally's mono, as the help numbers its chapters. */
.lg .art h2 b, .lg .side__group li a b { margin-right: calc(4 * var(--u)); font: 400 0.62em/1 var(--mono); letter-spacing: 0.06em; color: var(--tally-hi); vertical-align: 0.18em; }
.lg .side__group li a b { margin-right: calc(2 * var(--u)); font-size: calc(11 * var(--u)); vertical-align: 0.1em; }

/* The documents' lists keep their bullets, which home.css takes off every list. */
.lg .art ul { list-style: disc; }

/* The changelog: each release down a rule, as the help's steps, its version the heading in the tally. The rule is the
   grid's line on the article's left edge, drawn brighter, with each release's mark centred on it. */
.art .rels { list-style: none; margin: calc(44 * var(--u)) 0 0; padding: 0; }
.art .rel { position: relative; margin: 0; padding: 0 0 calc(48 * var(--u)) calc(44 * var(--u)); }
.rel::before { content: ""; position: absolute; left: calc(-5.5 * var(--u) - 0.5px); top: calc(10 * var(--u)); width: calc(11 * var(--u)); height: calc(11 * var(--u)); border: 1px solid var(--tally); background: rgba(10, 10, 12, 0.7);
  box-shadow: 0 0 10px rgba(250, 76, 51, 0.45); }
.rel::after { content: ""; position: absolute; left: 0; top: calc(30 * var(--u)); bottom: calc(2 * var(--u)); width: 1px; background: rgba(255, 255, 255, 0.16); }
.rel:last-child { padding-bottom: 0; }
.rel:last-child::after { display: none; }
.art .rel h2 { margin: 0; padding: 0; border: 0; font: 600 calc(28 * var(--u))/1.1 var(--sans); letter-spacing: -0.02em; color: var(--tally-hi); }
.art .rel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.rel__meta time { margin-right: calc(6 * var(--u)); font: 400 calc(12 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; }
.rel__meta span { padding: calc(5 * var(--u)) calc(8 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.12); font: 400 calc(10.5 * var(--u))/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #B9BCC2; }
.art .rel__meta + p, .art .rel__meta + .rel__notes { margin-top: calc(14 * var(--u)); }
.art .rel__notes { margin-bottom: 0; padding-left: calc(18 * var(--u)); }
.art .rel__notes li { margin: 0 0 calc(6 * var(--u)); }
.art .rel__fixhead { margin: calc(16 * var(--u)) 0 0; font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #B9BCC2; }
.art .rel__fixhead + .rel__notes { margin-top: calc(10 * var(--u)); }

@media (max-width: 899px) {
  .lg-date { font-size: 11px; }
  .lg .art h2 b, .lg .side__group li a b { font-size: 12px; }
  .lg .side__group.lg-apart { margin-top: 22px; }
  .art .rel { padding-left: 28px; padding-bottom: 40px; }
  .rel::before { left: -6px; top: 8px; width: 11px; height: 11px; }
  .rel::after { top: 28px; }
  .art .rel h2 { font-size: 24px; scroll-margin-top: 140px; }
  .rel__meta time { font-size: 11px; }
  .rel__meta span { font-size: 10px; }
}