/* The documentation-page component system — page-list sidebar, on-this-page
   rail, article typography, step lists, tables, notes, the pager, and the
   docs index cards. Originally written for /track/docs/ inside
   track/assets/css/site.css; extracted here on 18 August 2026 when
   /sketch/docs/ needed the same system and duplicating ~475 lines into a
   Sketch-only stylesheet made less sense than sharing a file that both
   /track/docs/** and /sketch/docs/** load. See site/README.md.

   Every selector here references the same var(--token) names calibro.css and
   track/assets/css/site.css both already define (the two are kept in step by
   hand — see calibro.css's own header comment) — nothing in this file
   defines a token of its own.

   What did NOT move: the `.ui*` app-mockup system Track's docs figures draw
   with (still in track/assets/css/site.css, under "docs figures (app
   mocks)"). Sketch's docs use real screenshots instead, so they never
   reference `.ui`, and `.doc__figure--inset > .ui` below simply matches
   nothing on a Sketch page. */

/* ---------------------------------------------------------------- docs page */

.docs {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 200px;
  max-width: var(--wrap);
  margin-inline: auto;
  min-height: 720px;
}

/* While the docs are unwritten there is nothing to put in the right-hand
   rail, so the placeholder page drops it. */
.docs--no-toc {
  grid-template-columns: 248px minmax(0, 1fr);
}

.docs__nav {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  background: #fcfcfd;
}

.docs__nav-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.docs__group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.docs__group h2 {
  padding: 0 8px 6px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.docs__group a {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}

.docs__group a:hover {
  background: var(--surface-3);
  color: var(--ink);
  text-decoration: none;
}

.docs__group a[aria-current="page"] {
  background: var(--teal-tint);
  color: var(--teal);
  font-weight: 600;
}

.docs__aside {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.docs__aside strong {
  color: var(--ink);
  font-size: 13px;
}

.docs__aside span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.docs__aside a {
  font-size: 13px;
  font-weight: 500;
}

.docs__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 720px;
  padding: 40px 48px;
}

.docs__toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 20px;
  border-left: 1px solid var(--line);
}

.docs__toc h2 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.docs__toc a {
  color: var(--muted);
  font-size: 13px;
}

.docs__toc a[aria-current="true"] {
  color: var(--teal);
  font-weight: 500;
}

/* The collapsed page picker shown on mobile only */
.docs__picker {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px var(--gutter);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* The rail follows you down the page. The left-hand page list deliberately
   does not: it is 400px of links that would compete with the reading column
   for attention on every scroll, and the pager at the foot of each page is
   what moves you to the next one. */
.docs__toc-inner {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ------------------------------------------------------------ docs article */

/* The nine pages. Copy and measurements come from
   `Calibro Docs v2.dc.html`; the shell around this column — page list,
   on-this-page rail, pager — is screen 1c of `Calibro Site.dc.html`. */

.doc {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.doc__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.doc__crumb > span:last-child {
  color: var(--text-soft);
}

.doc h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.doc h2 {
  margin-top: 8px;
  font-size: 21px;
  letter-spacing: -0.01em;
  /* The rail links to these. Without the margin they land flush against the
     top edge of the window and read as the top of the page rather than as a
     heading someone jumped to. */
  scroll-margin-top: 24px;
}

.doc p {
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

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

/* Durations and the things you type into the app. Flat, like the design — a
   tinted box around `2h30` in the middle of a sentence reads as a code sample
   rather than as something to type. */
.doc code {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.92em;
}

/* A real list, so it is announced as "3 items" rather than as three
   paragraphs that happen to start with a digit. The circles are decoration
   over the counter. */
.doc__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* The number is positioned rather than laid out beside the text: a flex row
   would make every inline child of the step — each link, each <strong>, each
   run of plain text — a flex item of its own and space them apart. */
.doc__steps li {
  position: relative;
  min-height: 24px;
  padding-left: 38px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: pretty;
  counter-increment: step;
}

.doc__steps li::before {
  content: counter(step);
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 600;
}

.doc__note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-left: 3px solid var(--teal);
  border-radius: 0 6px 6px 0;
  background: var(--teal-wash);
}

.doc__note strong {
  font-size: 14px;
}

.doc__note p {
  font-size: 15px;
  line-height: 1.65;
}

/* Something that isn't built yet */
.doc__note--soon {
  border-left-color: var(--amber);
  background: var(--amber-wash);
}

/* Something that costs you if you get it wrong */
.doc__note--warn {
  border-left-color: var(--red);
  background: var(--red-wash);
}

.doc__defs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/* --cols is set per instance in the markup, because the label column is only
   as wide as its longest label and that differs page to page. */
.doc__def {
  display: grid;
  grid-template-columns: var(--cols, 160px minmax(0, 1fr));
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.doc__def dt {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.doc__def dd {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.doc__table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.doc__table-head,
.doc__row {
  display: grid;
  grid-template-columns: var(--cols, 180px minmax(0, 1fr));
  gap: 16px;
}

.doc__table-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

.doc__row {
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--surface-3);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

.doc__row:last-child {
  border-bottom: 0;
}

.doc__row > :first-child {
  color: var(--ink);
}

.doc__figure {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
}

.doc__figure figcaption {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-wrap: pretty;
}

.doc__figure figcaption strong {
  color: var(--text-soft);
  font-weight: 600;
}

/* A dialog and a dropdown are narrower than the app behind them, and drawing
   them full width would say they are the whole screen. --fig per instance. */
.doc__figure--inset > .ui {
  width: 100%;
  max-width: var(--fig, 440px);
  align-self: center;
}

.doc__pager {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.doc__pager a {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.doc__pager a span:first-child {
  color: var(--muted);
  font-size: 12px;
}

.doc__pager a span:last-child {
  font-size: 15px;
  font-weight: 500;
}

/* The first page has no previous and the last has no next. Pushing "next" to
   the right rather than laying the pager out as two fixed halves keeps the
   remaining link on the side it belongs on. */
.doc__pager-next {
  margin-left: auto;
  text-align: right;
}

/* ---------------------------------------------------------- docs index page */

.docs__index {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.doc-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doc-group > h2 {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.doc-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
}

.doc-card:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  text-decoration: none;
}

.doc-card strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.doc-card:hover strong {
  color: var(--teal);
}

.doc-card span {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

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

/* The first extraction on 18 August 2026 moved the base rules above but
   missed this block entirely, which made every /sketch/docs/ page render as
   a fixed-width three-column layout with no mobile collapse — no page
   picker, no way to reach the sidebar below 900px. Ported from the matching
   @media block in track/assets/css/site.css, minus one rule:
   `.doc__figure--inset > .ui` stayed there, because it targets the `.ui`
   mockup system Sketch's docs never use. */
@media (max-width: 900px) {
  /* minmax(0, …), not 1fr. A grid item's automatic minimum size is its
     min-content width, so a plain `1fr` lets the widest figure in the column
     push the whole page wider than the phone. */
  .docs {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .docs__picker {
    display: flex;
  }

  .docs__nav {
    display: none;
    padding: 20px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .docs[data-nav-open="true"] .docs__nav {
    display: block;
  }

  .docs__body {
    max-width: none;
    padding: 24px var(--gutter) 28px;
  }

  .docs__toc {
    display: none;
  }

  .doc h1 {
    font-size: 26px;
  }

  .doc h2 {
    font-size: 19px;
  }

  .doc__def {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  /* Tables become stacked cards, never a horizontal scroll inside prose: the
     column heads move onto each cell as a label and the container's own border
     goes, so each row is the card. */
  .doc__table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .doc__table-head {
    display: none;
  }

  .doc__row,
  .doc__row:last-child {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
  }

  .doc__row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
  }

  .doc__pager {
    flex-direction: column;
    gap: 12px;
  }

  .doc__pager-next {
    margin-left: 0;
    text-align: left;
  }
}