/* Reading pages (2026-11 redesign): the user guide (/guide, /guide/<chapter>,
   /guide/manual), the learn articles (/learn, /learn/<article>), the changelog and
   the three legal pages.

   One reading layout for all of them: a short hero (breadcrumb, title, one line,
   facts), then the text at a comfortable measure with an "On this page" list that
   sits beside it on a wide screen and folds into a disclosure on a phone. The
   guide's own markup classes (.test, .path, .ref, .tag, .notice ...) come from
   docs/user-guide/user-guide.html, published untouched by guide-pages.js, so they
   are styled here in the site's terms; the manual's own <style> block is the PDF's.

   Tokens only (website/css/tg.css). Behaviour lives in js/tg-docs.js and degrades
   to plain, fully visible text without it. */

/* ===== Hero ============================================================ */

.tg-docs-hero {
    padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--tg-line);
    background: var(--tg-ink-2);
}

.tg-docs-hero .tg-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-4);
}

.tg-docs-hero .tg-lede {
    max-width: 62ch;
}

.tg-docs-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-size: var(--tg-size-small);
    font-weight: 500;
}

.tg-docs-crumbs li + li::before {
    content: '/';
    margin-right: var(--tg-space-2);
    color: var(--tg-text-faint);
}

.tg-docs-crumbs a {
    color: var(--tg-text-soft);
    text-decoration: none;
}

.tg-docs-crumbs a:hover {
    color: var(--tg-text);
    text-decoration: underline;
}

.tg-docs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-docs-hero .tg-actions {
    margin-top: var(--tg-space-2);
}

/* ===== Layout: text + "On this page" =================================== */

.tg-docs-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tg-space-5);
    padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px);
}

.tg-docs-aside {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-3);
    min-width: 0;
}

@media (min-width: 1024px) {
    .tg-docs-layout {
        grid-template-columns: minmax(0, 1fr) 272px;
        grid-template-areas: 'article aside';
        align-items: start;
        column-gap: clamp(40px, 5vw, 72px);
    }

    .tg-docs-layout > .tg-docs-article {
        grid-area: article;
    }

    .tg-docs-aside {
        grid-area: aside;
        position: sticky;
        top: 88px;
        max-height: calc(100vh - 104px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* A disclosure panel in the aside ("On this page", "All chapters"). */
.tg-docs-panel {
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
}

.tg-docs-panel > summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 48px 0 var(--tg-space-4);
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-size: 0.95rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.tg-docs-panel > summary::-webkit-details-marker {
    display: none;
}

.tg-docs-panel > summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    margin-top: -6px;
    border-right: 2px solid var(--tg-text-soft);
    border-bottom: 2px solid var(--tg-text-soft);
    transform: rotate(45deg);
    transition: transform var(--tg-dur) var(--tg-ease);
}

.tg-docs-panel[open] > summary::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.tg-docs-panel-body {
    padding: 0 var(--tg-space-3) var(--tg-space-3);
}

.tg-docs-toc ol,
.tg-docs-toc ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-docs-toc a {
    display: block;
    padding: 7px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
    line-height: 1.4;
    text-decoration: none;
    transition:
        color var(--tg-dur-fast) var(--tg-ease),
        background-color var(--tg-dur-fast) var(--tg-ease),
        border-color var(--tg-dur-fast) var(--tg-ease);
}

.tg-docs-toc a:hover {
    background: var(--tg-surface-2);
    color: var(--tg-text);
}

.tg-docs-toc a.is-active,
.tg-docs-toc a[aria-current] {
    border-left-color: var(--tg-blue);
    background: var(--tg-blue-soft);
    color: var(--tg-text);
}

.tg-docs-toc .is-sub a {
    padding-left: 22px;
}

.tg-docs-toc .is-section > a {
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-docs-toc-group + .tg-docs-toc-group {
    margin-top: var(--tg-space-3);
}

.tg-docs-toc-group > p {
    margin: 0 0 var(--tg-space-1);
    padding: 0 10px;
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tg-docs-aside-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-2) var(--tg-space-4);
    margin: 0;
    padding: 0 var(--tg-space-1);
    list-style: none;
    font-size: var(--tg-size-small);
}

.tg-docs-aside-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--tg-text-soft);
}

/* ===== Prose =========================================================== */

.tg-docs-article {
    min-width: 0;
    max-width: 70ch;
    color: var(--tg-text);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.tg-docs-article--wide {
    max-width: 92ch;
}

.tg-docs-article [id] {
    scroll-margin-top: 96px;
}

.tg-docs-article h2 {
    margin: clamp(44px, 5vw, 64px) 0 var(--tg-space-3);
    font-size: clamp(1.5rem, 1.2vw + 1.1rem, 1.9rem);
    font-weight: 700;
    line-height: 1.2;
}

.tg-docs-article > :first-child,
.tg-docs-article article > :first-child,
.tg-docs-article article > section:first-child > :first-child {
    margin-top: 0;
}

/* A continued section's own heading: the divider above already spaces it. */
.tg-docs-section > h2:first-child {
    margin-top: var(--tg-space-5);
}

.tg-docs-article h3 {
    margin: var(--tg-space-6) 0 var(--tg-space-2);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.35;
}

.tg-docs-article h4 {
    margin: var(--tg-space-5) 0 var(--tg-space-2);
    font-size: 1.05rem;
    font-weight: 600;
}

.tg-docs-article p {
    margin: 0 0 var(--tg-space-4);
}

.tg-docs-article :is(ul, ol) {
    margin: 0 0 var(--tg-space-4);
    padding-left: 1.3em;
}

.tg-docs-article li {
    margin-bottom: var(--tg-space-2);
}

.tg-docs-article li::marker {
    color: var(--tg-text-faint);
}

.tg-docs-article :is(b, strong) {
    color: var(--tg-text);
    font-weight: 600;
}

/* Prose links only: buttons, the pager and related cards carry their own look. */
:where(.tg-docs-article) a:not([class]) {
    color: var(--accent-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

:where(.tg-docs-article) a:not([class]):hover {
    color: var(--tg-text);
}

.tg-docs-article code {
    padding: 1px 6px;
    border: 1px solid var(--tg-line);
    border-radius: 6px;
    background: var(--tg-surface-2);
    font-family: var(--tg-font-mono);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}

.tg-docs-article .intro {
    color: var(--tg-text-soft);
    font-size: var(--tg-size-lede);
    line-height: 1.6;
}

.tg-docs-section + .tg-docs-section {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(8px, 1vw, 16px);
    border-top: 1px solid var(--tg-line);
}

/* ===== Guide how-to cards ============================================== */

.tg-docs-article .test {
    margin: var(--tg-space-5) 0;
    padding: clamp(18px, 2.2vw, 26px);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-lg);
    background: var(--tg-surface-1);
}

.tg-docs-article .test-head {
    display: flex;
    align-items: flex-start;
    gap: var(--tg-space-3);
    margin-bottom: var(--tg-space-3);
}

.tg-docs-article .test-no {
    flex: none;
    min-width: 34px;
    margin-top: 2px;
    padding: 3px 9px;
    border-radius: var(--tg-radius-pill);
    background: var(--tg-blue-soft);
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.tg-docs-article .test-title {
    flex: 1;
    min-width: 0;
}

.tg-docs-article .test-title h3 {
    margin: 0;
}

.tg-docs-article .path {
    margin: 0 0 var(--tg-space-4);
    padding: 9px 12px;
    border-left: 2px solid var(--tg-blue);
    border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
    background: var(--tg-surface-2);
    color: var(--tg-text-soft);
    font-size: var(--tg-size-small);
}

.tg-docs-article .path b {
    color: var(--tg-text);
    font-family: var(--tg-font-display);
}

.tg-docs-article .test-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tg-space-4);
    margin-top: var(--tg-space-4);
}

@media (min-width: 900px) {
    .tg-docs-article .test-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }
}

.tg-docs-article .test-grid > div {
    min-width: 0;
}

.tg-docs-article .label {
    display: block;
    margin-bottom: var(--tg-space-2);
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tg-docs-article .expected {
    color: var(--tg-text-soft);
    font-size: 0.97rem;
}

.tg-docs-article .test > :last-child,
.tg-docs-article .test-grid > div > :last-child {
    margin-bottom: 0;
}

/* Plan markers, matching the app and the pricing page: free for everyone,
   Essentials silver, Premium gold. */
.tg-docs-article .tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 9px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius-pill);
    color: var(--tg-text-soft);
    font-family: var(--tg-font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.6;
    vertical-align: 0.15em;
    white-space: nowrap;
}

.tg-docs-article .tag.free {
    border-color: color-mix(in srgb, var(--tg-success) 40%, transparent);
    background: var(--tg-success-soft);
    color: var(--tg-success);
}

.tg-docs-article .tag.paid {
    background: var(--tg-surface-3);
    color: var(--tg-text);
}

.tg-docs-article :is(.tag.premium, .tag.pro) {
    border-color: color-mix(in srgb, var(--tg-premium) 45%, transparent);
    background: var(--tg-premium-soft);
    color: var(--tg-premium);
}

.tg-docs-article .tag.optional {
    color: var(--tg-text-faint);
}

/* ===== Notices ========================================================= */

.tg-docs-article :is(.notice, .callout, .note, .notes-box) {
    margin: var(--tg-space-4) 0;
    padding: 14px 18px;
    border: 1px solid var(--tg-line);
    border-left: 3px solid var(--tg-blue);
    border-radius: 0 var(--tg-radius) var(--tg-radius) 0;
    background: var(--tg-surface-2);
    color: var(--tg-text-soft);
    font-size: 0.97rem;
}

.tg-docs-article .notice.warning {
    border-left-color: var(--tg-warning);
    background: color-mix(in srgb, var(--tg-warning) 8%, var(--tg-surface-1));
}

.tg-docs-article :is(.notice, .callout, .note, .notes-box) > :last-child {
    margin-bottom: 0;
}

.tg-docs-article .footer-note {
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

.tg-docs-article .notes-lines {
    min-height: 60px;
    border-top: 1px dashed var(--tg-line-strong);
}

/* Checklists (the hub's "first fifteen minutes"). */
.tg-docs-article :is(.check, .checkbox-list) {
    list-style: none;
}

.tg-docs-article .checkbox-list {
    padding-left: 0;
}

.tg-docs-article .check {
    position: relative;
    margin-bottom: var(--tg-space-3);
    padding-left: 30px;
}

.tg-docs-article .check::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: 3px;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--tg-success);
    border-bottom: 2px solid var(--tg-success);
    transform: rotate(-45deg);
}

/* ===== Tables ========================================================== */

/* The one thing that may be wider than the reading column: it scrolls inside its
   own focusable region instead of crushing the columns or the page. */
.tg-docs-table {
    margin: var(--tg-space-4) 0 var(--tg-space-5);
    overflow-x: auto;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
}

/* Anything holding a table must be allowed to be narrower than the table, or the
   scroll region grows to the table's width and the page scrolls sideways (seen at
   360px on learn articles, whose tables sit inside <article class="learn-article">). */
.tg-docs-article :is(article, section, div) {
    min-width: 0;
}

.tg-docs-table {
    max-width: 100%;
}

/* The one-page manual keeps the user guide's raw markup (the support assistant parses
   it), so its tables have no .tg-docs-table wrapper: they scroll on their own. */
.tg-docs-manual-chapter table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.tg-docs-article table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.55;
}

.tg-docs-article :is(th, td) {
    padding: 11px 14px;
    border-bottom: 1px solid var(--tg-line);
    text-align: left;
    vertical-align: top;
}

.tg-docs-article th {
    background: var(--tg-surface-2);
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-size: 0.85rem;
    font-weight: 600;
}

.tg-docs-article tbody tr:last-child td {
    border-bottom: 0;
}

.tg-docs-article td :last-child {
    margin-bottom: 0;
}

.tg-docs-article :is(.k, .key) {
    color: var(--tg-text);
    font-weight: 600;
}

@media (max-width: 640px) {
    .tg-docs-article table {
        min-width: 520px;
    }
}

/* The manual's own tables are their own scroll box (above), so on a phone they take the
   column's width and scroll; the 520px floor is for tables inside .tg-docs-table. */
.tg-docs-article .tg-docs-manual-chapter table {
    min-width: 0;
}

/* Code samples keep their line breaks and scroll sideways inside their block. */
.tg-docs-article pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ===== Progressive disclosure inside an article ======================== */

/* A long, advanced block (interface notes, a 250-row "what moved" table): the
   heading stays readable, the detail opens on request. Content and anchors are in
   the page either way; js/tg-docs.js opens it when a link lands inside. */
.tg-docs-more {
    margin: var(--tg-space-4) 0 var(--tg-space-5);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-lg);
    background: var(--tg-surface-1);
}

.tg-docs-more[open] {
    border-color: var(--tg-line-strong);
}

.tg-docs-more > summary {
    position: relative;
    display: block;
    padding: 16px 56px 16px 20px;
    list-style: none;
    cursor: pointer;
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-docs-more > summary::-webkit-details-marker {
    display: none;
}

.tg-docs-more > summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 22px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--tg-text-soft);
    border-bottom: 2px solid var(--tg-text-soft);
    transform: rotate(45deg);
    transition: transform var(--tg-dur) var(--tg-ease);
}

.tg-docs-more[open] > summary::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.tg-docs-more > summary :is(h2, h3) {
    display: inline;
    margin: 0;
    font-size: 1.1rem;
}

.tg-docs-more-hint {
    display: block;
    margin-top: 2px;
    color: var(--tg-text-faint);
    font-family: var(--tg-font-body);
    font-size: var(--tg-size-small);
    font-weight: 400;
}

.tg-docs-more-body {
    padding: 0 20px 20px;
}

.tg-docs-more-body > :last-child {
    margin-bottom: 0;
}

.tg-docs-more .tg-docs-table {
    margin: 0;
}

/* Troubleshooting: one problem per row, the fix opens beneath it. */
.tg-docs-fixes-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tg-space-3);
    margin: var(--tg-space-5) 0 var(--tg-space-3);
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

.tg-docs-fixes-bar p {
    margin: 0;
}

.tg-docs-article .tg-faq {
    margin: 0 0 var(--tg-space-5);
}

.tg-docs-article .tg-faq summary {
    font-size: 1rem;
    line-height: 1.45;
}

.tg-docs-article .tg-faq-body {
    font-size: 0.98rem;
}

/* ===== End of an article: pager, related reading, help ================= */

.tg-docs-end {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-6);
    max-width: 70ch;
    margin-top: clamp(40px, 5vw, 64px);
}

.tg-docs-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tg-space-3);
}

@media (min-width: 640px) {
    .tg-docs-pager {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.tg-docs-pager a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 48px;
    padding: 16px 20px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
    color: var(--tg-text);
    text-decoration: none;
    transition:
        border-color var(--tg-dur-fast) var(--tg-ease),
        background-color var(--tg-dur-fast) var(--tg-ease);
}

.tg-docs-pager a:hover {
    border-color: var(--tg-line-strong);
    background: var(--tg-surface-2);
}

@media (min-width: 640px) {
    .tg-docs-pager a.is-next {
        text-align: right;
    }

    .tg-docs-pager a.is-next:only-child {
        grid-column: 2;
    }
}

.tg-docs-pager span {
    color: var(--tg-text-faint);
    font-family: var(--tg-font-display);
    font-size: var(--tg-size-small);
    font-weight: 500;
}

.tg-docs-pager b {
    font-family: var(--tg-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}

.tg-docs-related h2,
.tg-docs-help h2 {
    margin: 0 0 var(--tg-space-3);
    font-size: 1.15rem;
}

.tg-docs-related li {
    margin: 0;
}

.tg-docs-related ul {
    display: grid;
    gap: var(--tg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-docs-related a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius);
    background: var(--tg-surface-1);
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-weight: 600;
    text-decoration: none;
}

.tg-docs-related a:hover {
    border-color: var(--tg-line-strong);
}

.tg-docs-related a span {
    color: var(--tg-text-faint);
    font-family: var(--tg-font-body);
    font-size: var(--tg-size-small);
    font-weight: 400;
}

.tg-docs-help {
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-lg);
    background: var(--tg-surface-2);
}

.tg-docs-help p {
    margin: 0 0 var(--tg-space-4);
    color: var(--tg-text-soft);
}

.tg-docs-corrections {
    margin: 0;
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

/* ===== Guide hub ====================================================== */

.tg-docs-search {
    max-width: 640px;
    margin-top: var(--tg-space-3);
}

.tg-docs-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-docs-topics a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--tg-line-strong);
    border-radius: var(--tg-radius-pill);
    background: var(--tg-surface-1);
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        border-color var(--tg-dur-fast) var(--tg-ease),
        background-color var(--tg-dur-fast) var(--tg-ease);
}

.tg-docs-topics a:hover {
    border-color: var(--tg-blue);
    background: var(--tg-blue-soft);
}

.tg-docs-cats {
    display: grid;
    gap: var(--tg-space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.tg-docs-cat {
    gap: var(--tg-space-4);
}

.tg-docs-cat-head {
    display: flex;
    align-items: center;
    gap: var(--tg-space-3);
}

.tg-docs-cat-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-docs-cat-list li + li {
    border-top: 1px solid var(--tg-line);
}

.tg-docs-cat-list a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    color: var(--tg-text);
    text-decoration: none;
}

.tg-docs-cat-list a b {
    font-family: var(--tg-font-display);
    font-weight: 600;
}

.tg-docs-cat-list a span {
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
    line-height: 1.5;
}

.tg-docs-cat-list a:hover b {
    color: var(--accent-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tg-docs-checklist {
    max-width: 78ch;
}

.tg-docs-checklist.tg-docs-article {
    max-width: none;
}

.tg-docs-formats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-3) var(--tg-space-5);
    margin-top: var(--tg-space-6);
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

/* ===== Learn index ==================================================== */

.tg-docs-cardgrid {
    display: grid;
    gap: var(--tg-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.tg-docs-cardgrid .tg-card h3 {
    font-size: 1.15rem;
    line-height: 1.35;
}

.tg-docs-cardgrid .tg-card p {
    font-size: 0.97rem;
}

.tg-docs-cardgrid .tg-card .tg-link {
    margin-top: auto;
}

.tg-docs-group + .tg-docs-group {
    margin-top: clamp(40px, 5vw, 64px);
}

.tg-docs-group > h2 {
    margin: 0 0 var(--tg-space-4);
}

/* ===== Changelog ====================================================== */

.tg-docs-changelog {
    max-width: 78ch;
}

.tg-docs-changelog .changelog-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-4);
    margin: 0;
    padding: 0 0 0 28px;
    list-style: none;
}

/* The timeline rail. */
.tg-docs-changelog .changelog-list::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 6px;
    width: 2px;
    border-radius: 2px;
    background: var(--tg-line-strong);
}

.tg-docs-changelog .changelog-entry {
    position: relative;
    padding: clamp(18px, 2.2vw, 26px);
    border: 1px solid var(--tg-line);
    border-radius: var(--tg-radius-lg);
    background: var(--tg-surface-1);
}

.tg-docs-changelog .changelog-entry::before {
    content: '';
    position: absolute;
    top: 28px;
    left: -28px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--tg-text-faint);
    border-radius: 50%;
    background: var(--tg-ink);
}

.tg-docs-changelog .changelog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tg-space-2) var(--tg-space-3);
}

.tg-docs-changelog .changelog-version {
    color: var(--tg-text);
    font-family: var(--tg-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tg-docs-changelog .changelog-date {
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

.tg-docs-changelog .changelog-title {
    margin: var(--tg-space-2) 0 0;
    font-size: 1.1rem;
}

.tg-docs-changelog .changelog-body {
    margin-top: var(--tg-space-3);
    color: var(--tg-text-soft);
}

.tg-docs-changelog .changelog-body[hidden] {
    display: none;
}

.tg-docs-changelog .changelog-body p {
    margin: 0 0 var(--tg-space-3);
}

.tg-docs-changelog .changelog-body > :last-child {
    margin-bottom: 0;
}

.tg-docs-changelog .changelog-bullets {
    display: flex;
    flex-direction: column;
    gap: var(--tg-space-2);
    margin: 0 0 var(--tg-space-3);
    padding: 0;
    list-style: none;
}

.tg-docs-changelog .changelog-bullets li {
    position: relative;
    padding-left: 20px;
}

.tg-docs-changelog .changelog-bullets li::before {
    content: '';
    position: absolute;
    top: 0.65em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tg-blue);
}

/* The newest real release (a row with a version number) leads the page. */
.tg-docs-changelog .changelog-entry:first-child:has(.changelog-version) {
    border-color: color-mix(in srgb, var(--tg-blue) 55%, transparent);
    background:
        linear-gradient(180deg, var(--tg-blue-soft), transparent 60%),
        var(--tg-surface-1);
}

.tg-docs-changelog .changelog-entry:first-child:has(.changelog-version)::before {
    border-color: var(--tg-blue);
    background: var(--tg-blue);
    box-shadow: 0 0 0 4px var(--tg-blue-soft);
}

.tg-docs-changelog .changelog-entry:first-child .changelog-version::after {
    content: 'Latest';
    display: inline-block;
    margin-left: var(--tg-space-3);
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, var(--tg-blue) 55%, transparent);
    border-radius: var(--tg-radius-pill);
    background: var(--tg-blue-soft);
    color: var(--tg-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: 0.2em;
}

.tg-docs-changelog .changelog-entry:first-child .changelog-body {
    color: var(--tg-text);
}

.tg-docs-changelog-toggle {
    margin-top: var(--tg-space-3);
}

.tg-docs-changelog-note {
    margin: 0 0 var(--tg-space-5);
    color: var(--tg-text-faint);
    font-size: var(--tg-size-small);
}

@media (max-width: 480px) {
    .tg-docs-changelog .changelog-list {
        padding-left: 20px;
    }

    .tg-docs-changelog .changelog-list::before {
        left: 3px;
    }

    .tg-docs-changelog .changelog-entry::before {
        left: -22px;
        width: 10px;
        height: 10px;
    }
}

/* ===== Legal ========================================================== */

.tg-docs-legal .policy-section + .policy-section {
    margin-top: clamp(32px, 4vw, 48px);
}

.tg-docs-legal .policy-section > h2:first-child {
    margin-top: 0;
}

.tg-docs-legal .legal-toc-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-docs-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tg-space-3);
}

/* Until components.js has filled it, the legal contents panel has nothing to open. */
.tg-docs-toc:has([data-legal-toc]:empty) {
    display: none;
}

/* ===== The single-page manual ========================================= */

/* Raw manual markup (no scroll regions, to keep the page small): its tables
   scroll themselves on a narrow screen. */
.tg-docs-manual .tg-docs-article table {
    display: block;
    overflow-x: auto;
}

.tg-docs-manual-chapter + .tg-docs-manual-chapter {
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid var(--tg-line-strong);
}

.tg-docs-manual-chapter > h2 {
    margin-top: var(--tg-space-2);
    font-size: var(--tg-size-h2);
}

.tg-docs-manual-chapter > h2 a {
    color: inherit;
    text-decoration: none;
}

.tg-docs-manual-chapter > h2 a:hover {
    color: var(--accent-link);
}

.tg-docs-manual .tg-docs-toc ol {
    font-size: var(--tg-size-small);
}

/* The hub's checklist: the print edition's notes box has no use on screen. */
.tg-docs-hub .notes-box {
    display: none;
}

.tg-docs-hub .tg-docs-checklist .checkbox-list {
    columns: 2 300px;
    column-gap: var(--tg-space-7);
    margin-bottom: var(--tg-space-5);
}

.tg-docs-hub .tg-docs-checklist .check {
    break-inside: avoid;
}

/* The newest release's long notes as a preview (js/changelog.js previewNewest). */
.changelog-body.is-preview {
    max-height: 13.5em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}

.tg-docs-changelog-more {
    margin-top: var(--tg-space-3);
}