/* =========================================================
   Moving parts, the inner pages: the library, pricing,
   questions, the changelog.
   ========================================================= */

/* ---------- library: the grid of the library, in the landing's shell ----------
   The search field, the category row, the grid and its cards are the site's
   own, from site/cards.css, loaded before this sheet. What follows sets them
   in the page: the head, the gutters, and the few tokens cards.css names
   that the landing calls otherwise. */
.lib-head, .lib {
  --gutter: var(--gut);
  --preview-ground: var(--preview);
  /* the site's panel, one step lighter than the landing's: the label of the veil and the sheets behind the set */
  --panel: var(--box, #1d1d1e);
}
/* the two sentences of the heading break between them, never inside the second */
.lib-head h1 .m { white-space: nowrap; }
/* the search sits on the hairline that closes the head, as on the site */
.lib-head { padding-bottom: clamp(16px, 2.4vh, 26px); }
.lib-foot { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 22px clamp(24px, 4vw, 72px); margin-top: 26px; }
.lib-foot .sub { margin-top: 0; flex: 1 1 32ch; }
.lib-search { flex: 0 1 clamp(300px, 32vw, 480px); min-width: 0; }
/* a pill, like every control of the landing */
/* the field keeps the corners the site gives it, 12px, and its line of facts starts flush with it */
.lib-search .info-line { margin-top: 12px; }
.lib { padding: 0 var(--gut) clamp(56px, 9vh, 110px); }
/* New, in the landing's accent, as on the cards of the home page */
.lib .badge { color: color-mix(in srgb, var(--accent) 22%, var(--text)); background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
/* a category gives under the finger like every other pill */
.lib .cat { transition: color .2s ease, background-color .2s ease, transform var(--mi-fast) var(--mi-ease); }
.lib .cat:active { transform: scale(var(--mi-press)); }
@media (hover: none) { .lib-search .shortcut { display: none; } }
/* the way to a collection, at the end of the row of families */
.lib .coll { margin-left: auto; flex: none; display: inline-flex; align-items: baseline; gap: 10px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.lib .coll .mono { color: var(--label); }
.lib .coll:hover, .lib .coll:focus-visible { color: var(--text); }
@media (max-width: 700px) { .lib .filterbar-row { flex-wrap: wrap; } .lib .coll { margin-left: 0; } }

/* ---------- a collection: a few cards, which one to pick, its questions ---------- */
.lib-head .more { margin-top: 0; }
.coll-lib { padding-top: clamp(20px, 3vh, 36px); }
.pick { border-top: 1px solid var(--line); }
.pick-rows { margin-top: clamp(32px, 5vh, 64px); border-top: 1px solid var(--line-strong); }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 12px clamp(20px, 4vw, 72px); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.pick-name { font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -.03em; }
.pick-when { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 62ch; }
.pick-go { color: var(--label); transition: color .2s ease; }
.pick-row:hover .pick-go, .pick-row:focus-visible .pick-go { color: var(--text); }
.pick + .faq { border-top: 1px solid var(--line); }
.qa .ans code { white-space: nowrap; font-family: "Geist Mono", ui-monospace, monospace; font-size: .92em; color: var(--text); }
@media (max-width: 700px) { .pick-row { grid-template-columns: 1fr; } .pick-go { display: none; } }

/* ---------- pricing ---------- */
.table { margin-top: clamp(40px, 6vh, 72px); border-top: 1px solid var(--line-strong); }
.table .tr { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 16px; align-items: baseline; padding: 15px 0 14px; border-bottom: 1px solid var(--line); }
.table .tr.th { color: var(--label); }
.table .tr > span:first-child { font-size: 16px; letter-spacing: -.015em; }
.table .tr > span:not(:first-child) { color: var(--muted); font-size: 15px; }
.table .yes::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--text); }
.table .no { color: var(--label) !important; }
.table .all { color: var(--text) !important; }

/* ---------- changelog ---------- */
.days { margin-top: 0; }
.day { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 16px clamp(24px, 4vw, 72px); padding: clamp(28px, 4vh, 44px) 0; border-bottom: 1px solid var(--line); }
.day-h { position: sticky; top: 90px; align-self: start; }
.day-h b { display: block; font-weight: 430; font-size: clamp(30px, 3.2vw, 52px); letter-spacing: -.05em; line-height: .95; }
.day-h .mono { color: var(--label); display: block; margin-top: 8px; }
.day-list a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0 13px; border-top: 1px solid var(--line); }
.day-list a:first-child { border-top: 0; padding-top: 4px; }
.day-list b { font-weight: 440; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: -.03em; line-height: 1.1; transition: transform .45s var(--ease-out); }
.day-list .mono { color: var(--label); align-self: center; }
.day-list p { grid-column: 1 / -1; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 62ch; }
/* the source picture of a row, read by the hover list and never shown */
.day-list [data-hover-list-image] { display: none; }

@media (max-width: 820px) {
  .lib-search { flex: 1 1 100%; }
  .table .tr { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .8fr)); gap: 8px; font-size: 13px; }
  .table .tr > span:first-child { font-size: 14px; }
  .table .tr > span:not(:first-child) { font-size: 12.5px; }
  .table .yes::before { margin-right: 0; }
  .table .yes { font-size: 0 !important; }
  .day { grid-template-columns: 1fr; }
  .day-h { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .day-list b { transition: none !important; }
  /* the grid answers at once, as on the site, whose stylesheet says the same for the whole page */
  .lib *, .lib-search * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .lib .cat:active { transform: none; }
}

/* who gets what: a clear yes, a dim no, a half for the part, the member column lit */
.table .yes { color: var(--text) !important; }
.table .yes::before { width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c0c0d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.table .no::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; border: 1px solid #3a3a40; box-sizing: border-box; background: linear-gradient(45deg, transparent 46%, #3a3a40 46% 54%, transparent 54%); }
.table .part { color: var(--muted) !important; }
.table .part::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -3px; border-radius: 50%; border: 1.5px solid var(--muted); box-sizing: border-box; background: linear-gradient(90deg, var(--muted) 50%, transparent 50%); }
.table .tr > span:last-child { margin: -15px 0 -14px; padding: 15px 16px 14px; background: color-mix(in srgb, var(--text) 4.5%, transparent); }
.table .tr.th > span:last-child { color: var(--text); border-radius: 12px 12px 0 0; }
.table .tr:last-child > span:last-child { border-radius: 0 0 12px 12px; }
@media (max-width: 820px) {
  .table .no, .table .part { font-size: 0 !important; }
  .table .no::before, .table .part::before, .table .yes::before { margin-right: 0; }
  .table .tr > span:last-child { padding: 15px 8px 14px; }
}

/* the notice French law sets word for word, framed as the decree asks */
.legal-box { margin-top: 16px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); display: grid; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }