/* Docs pages (/docs and everything under it). Loaded after style.css, so it
   reuses the site tokens (--bg, --heading, --text, --muted, --border,
   --accent, --accent-orange, --accent-coral, --ease) and only adds the
   three-column docs layout, long-form prose, and the payload diff.

   Colour carries meaning on these pages, not decoration:
     green  (--accent)        kept / uploaded / links
     blue   (--docs-blue)     ledger: removed, reduced, or not sent
     coral  (--accent-coral)  diff: removed before upload
     orange (--accent-orange) redacted in place                         */

:root {
  --docs-panel:      #111A2B;   /* code blocks, diff, active nav - one step up from --bg */
  --docs-prose:      #CBD5E1;   /* body copy: between --muted and --text for long reads */
  --docs-blue:       #60A5FA;   /* ledger marks for data that doesn't leave as-is */
  --docs-sidebar-w:  220px;
  --docs-toc-w:      200px;
  --docs-gap:        56px;
  --docs-pad:        40px;
}


/* ─── Frame ──────────────────────────────────────────────────────────────── */
/* docs run wider than the marketing column (which pads ~10% each side) so
   the article keeps a full reading measure next to both side rails. Used on
   the header's .container too, so the logo lines up with the sidebar. */
.container--docs {
  padding-inline: var(--docs-pad);
}


/* ─── Header additions ───────────────────────────────────────────────────── */
.docs-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.docs-brand__tag {
  padding-left: 14px;
  border-left: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  color: var(--accent);
}

.docs-brand__tag:hover { color: var(--heading); }


/* ─── Shell: sidebar | article | on-this-page ───────────────────────────── */
.docs-shell {
  display: grid;
  grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w);
  gap: var(--docs-gap);
  align-items: start;
  padding-top: 48px;
  padding-bottom: 120px;
}


/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.docs-sidebar {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding-right: 8px;
}

.docs-menu-toggle { display: none; }

.docs-nav__group + .docs-nav__group { margin-top: 28px; }

.docs-nav__label {
  margin-bottom: 8px;
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.docs-nav__link {
  display: block;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.docs-nav__link:hover { color: var(--heading); }

.docs-nav__link[aria-current="page"] {
  border-left-color: var(--accent);
  background: var(--docs-panel);
  color: var(--heading);
  font-weight: 600;
}



/* ─── Article ────────────────────────────────────────────────────────────── */
.docs-article {
  min-width: 0;
  max-width: 740px;
}

.docs-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.docs-crumbs a:hover { color: var(--accent); }

.docs-crumbs span[aria-hidden] { color: var(--border); }

.docs-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  color: var(--heading);
  margin-bottom: 16px;
}

.docs-lede {
  font-size: 19px;
  line-height: 31px;
  color: var(--docs-prose);
  margin-bottom: 20px;
}

/* the lede is plain text by default (reset.css strips link styling), so a
   link in it needs the same treatment as one in .prose */
.docs-lede a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.docs-lede code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--heading);
}

.docs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-bottom: 32px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}


/* ─── Prose ──────────────────────────────────────────────────────────────── */
.prose { color: var(--docs-prose); }

.prose h2 {
  position: relative;
  font-size: 26px;
  font-weight: 700;
  line-height: 34px;
  color: var(--heading);
  margin-top: 72px;
  margin-bottom: 16px;
  scroll-margin-top: 24px;
}

.prose h3 {
  position: relative;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: var(--heading);
  margin-top: 40px;
  margin-bottom: 10px;
  scroll-margin-top: 24px;
}

/* first heading sits right under .docs-meta's rule - no double gap */
.prose > h2:first-child,
.prose > section:first-child > h2:first-child { margin-top: 0; }

/* grouped pages (Security): each <section> is a group h2, an optional intro,
   then h3 sections that hold tables and code. Those h3s head real sections,
   so they step up from 18px; the FAQ's question h3s sit directly in .prose
   and keep the base size. */
.prose > section > h3 {
  font-size: 21px;
  line-height: 30px;
  margin-top: 48px;
  margin-bottom: 12px;
}

/* the first section sits closer to its group heading (or intro) */
.prose > section > h3:first-of-type { margin-top: 28px; }

/* anchor targets that aren't headings (stub paragraphs, list items) */
.prose p[id],
.prose li[id] { scroll-margin-top: 24px; }

/* heading self-links: "#" sits in the left gutter, shown on hover/focus */
.anchor {
  position: absolute;
  left: -26px;
  top: 0;
  width: 22px;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--accent);
  opacity: 0;
  transition: opacity 150ms var(--ease);
}

.prose h2:hover .anchor,
.prose h3:hover .anchor,
.anchor:focus-visible { opacity: 1; }

.prose p,
.prose li {
  font-size: 16px;
  line-height: 28px;
}

.prose p { margin-bottom: 16px; }

.prose ul,
.prose ol {
  padding-left: 22px;
  margin-bottom: 16px;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--muted); }

.prose strong {
  color: var(--heading);
  font-weight: 700;
}

.prose a:not(.anchor):not(.docs-card) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(44, 161, 112, 0.45);
  text-underline-offset: 3px;
  transition: text-decoration-color 150ms var(--ease);
}

.prose a:not(.anchor):not(.docs-card):hover { text-decoration-color: currentColor; }

.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--heading);
  background: var(--card-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* long paths may wrap in running text, but never mid-token inside a table */
.prose p code,
.prose li code { overflow-wrap: anywhere; }
.prose td code { white-space: nowrap; }

/* short commands with flags: keep "--check" from splitting at its dashes */
.prose code.nowrap { white-space: nowrap; }


/* ─── Code block ─────────────────────────────────────────────────────────── */
.code-block {
  margin: 20px 0 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--docs-panel);
  overflow: hidden;
}

.code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.copy-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}

.copy-btn:hover { color: var(--heading); border-color: var(--muted); }
.copy-btn[data-copied] { color: var(--accent); border-color: var(--accent); }

.code-block pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 22px;
  color: var(--text);
}

.code-block .c-prompt { color: var(--muted); user-select: none; }
.code-block .c-comment { color: #6B7A90; }


/* ─── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap {
  margin: 20px 0 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 23px;
}

.prose th {
  padding: 10px 16px;
  background: var(--docs-panel);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
}

.prose td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.prose tr:last-child td { border-bottom: 0; }

.prose td:first-child { color: var(--heading); }


/* ─── Ledger marks (what ships in each mode) ─────────────────────────────── */
/* retention: equal plan columns, so a short header ("Plus") doesn't squeeze
   its values onto extra lines */
.prose table.retention th { white-space: normal; }
.prose table.retention th + th { width: 19%; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
}

.mark::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mark--sent::before     { background: var(--accent); }
.mark--redacted::before { background: var(--accent-orange); }
.mark--never::before    { background: var(--docs-blue); }

.mark--sent     { color: var(--accent); }
.mark--redacted { color: var(--accent-orange); }
.mark--never    { color: var(--docs-blue); }

/* the ledger shows one mode's column at a time; its view tabs pick which.
   Fix the data column's width so the table doesn't reflow on each switch. */
.ledger-view { margin: 20px 0 28px; }
.ledger-view .table-wrap { margin: 12px 0 0; }

.prose table.ledger th:first-child { width: 50%; }

.ledger-view[data-view="full"]  .ledger :is(th, td):nth-child(3),
.ledger-view[data-view="stats"] .ledger :is(th, td):nth-child(2) { display: none; }

/* agent tags: name the agents a ledger row or line applies to, on their
   own line above it. Untagged rows and cells apply to every agent. */
.prose .agents {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}

.agent {
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--docs-panel);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  color: var(--muted);
  white-space: nowrap;
}

/* a ledger cell where the agents differ: one entry per group of agents */
.prose .by-agent {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prose .by-agent li {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.prose .by-agent li + li { margin-top: 10px; }


/* ─── View tabs (payload diff, ledger) ───────────────────────────────────── */
/* a segmented control; docs.js sets the container's data-view */
.view-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}

.view-tab {
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}

.view-tab:hover { color: var(--heading); }

.view-tab[aria-selected="true"] {
  background: var(--card-bg);
  color: var(--heading);
}


/* ─── Payload diff (signature) ───────────────────────────────────────────── */
.payload {
  margin: 24px 0 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--docs-panel);
  overflow: hidden;
}

.payload__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--border);
}

.payload__file {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.payload__body {
  overflow-x: auto;
  padding: 12px 0;
}

.payload__lines {
  min-width: max-content;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 22px;
  color: var(--text);
}

.pl {
  display: grid;
  grid-template-columns: 32px auto;
  padding-right: 20px;
  white-space: pre;
}

/* the gutter, like a unified diff: "-" removed, "~" redacted, "+" added */
.pl::before {
  content: ' ';
  text-align: center;
  user-select: none;
}

/* each line carries its state for every view (data-disk/full/stats);
   docs.js copies the current view's state into data-state */
.pl[data-state="hide"] { display: none; }

.pl .r { display: none; }
.payload[data-view="full"]  .pl .r[data-for="full"],
.payload[data-view="stats"] .pl .r[data-for="stats"] { display: inline; }

.pl[data-state="swap"] .o,
.pl[data-state="redact"] .o { display: none; }

.pl[data-state="drop"],
.pl[data-state="swap"]   { background: rgba(255, 107, 87, 0.08); }
.pl[data-state="redact"] { background: rgba(255, 159, 67, 0.08); }
.pl[data-state="add"]    { background: rgba(44, 161, 112, 0.10); }

.pl[data-state="drop"]::before,
.pl[data-state="swap"]::before   { content: '-'; color: var(--accent-coral); }
.pl[data-state="redact"]::before { content: '~'; color: var(--accent-orange); }
.pl[data-state="add"]::before    { content: '+'; color: var(--accent); }

.pl[data-state="drop"] .o {
  color: #8A7F86;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 107, 87, 0.7);
}

.pl[data-state="drop"] .o .k,
.pl[data-state="drop"] .o .p { color: inherit; }

.pl .k { color: #8FB3D9; }              /* JSON keys */
.pl .n { color: var(--accent-cyan); }   /* numbers */
.pl .p { color: var(--muted); }         /* braces */

.pl mark {
  background: none;
  color: var(--accent-orange);
}

.payload__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.payload__foot b { font-weight: 400; }
.payload__foot .lg-strip  b { color: var(--accent-coral); }
.payload__foot .lg-redact b { color: var(--accent-orange); }
.payload__foot .lg-add    b { color: var(--accent); }

/* nothing is removed or added on disk, so the legend only applies to uploads */
.payload[data-view="disk"] .payload__foot span[class^="lg-"] { visibility: hidden; }

.payload__caption {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
}

.payload__caption [data-only] { display: none; }
.payload[data-view="disk"]  .payload__caption [data-only="disk"],
.payload[data-view="full"]  .payload__caption [data-only="full"],
.payload[data-view="stats"] .payload__caption [data-only="stats"] { display: inline; }


/* ─── Fact strip (at-a-glance summary under the title) ──────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.facts__item {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.facts__item:nth-child(odd) { border-right: 1px solid var(--border); }
.facts__item:nth-last-child(-n + 2) { border-bottom: 0; }

.facts dt {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.facts dd {
  font-size: 15px;
  line-height: 23px;
  color: var(--heading);
}


/* ─── Callout ────────────────────────────────────────────────────────────── */
.callout {
  margin: 20px 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-orange);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--docs-panel);
}

.callout p:last-child { margin-bottom: 0; }

.callout__label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-orange);
}


/* ─── Docs home cards ───────────────────────────────────────────────────── */
.docs-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 8px 0 24px;
}

.docs-card {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--docs-panel);
  transition: border-color 150ms var(--ease);
}

.docs-card:hover { border-color: var(--accent); }

/* an odd card out spans the row instead of leaving a hole beside it */
.docs-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.docs-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 25px;
  color: var(--heading);
}

.docs-card__title::after {
  content: '→';
  color: var(--muted);
  transition: transform 150ms var(--ease), color 150ms var(--ease);
}

.docs-card:hover .docs-card__title::after {
  color: var(--accent);
  transform: translateX(3px);
}

.docs-card__body {
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}


/* ─── Pager + article footer ────────────────────────────────────────────── */
.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 80px;
}

.docs-pager__link {
  display: block;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color 150ms var(--ease);
}

.docs-pager__link:hover { border-color: var(--accent); }

.docs-pager__link--next {
  grid-column: 2;
  text-align: right;
}

.docs-pager__dir {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.docs-pager__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--heading);
}

.docs-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

.docs-foot a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ─── On this page ──────────────────────────────────────────────────────── */
.docs-toc {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.docs-toc__label {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.docs-toc__list {
  border-left: 1px solid var(--border);
}

.docs-toc__link {
  display: block;
  margin-left: -1px;
  padding: 4px 0 4px 14px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--muted);
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}

.docs-toc__link:hover { color: var(--heading); }

.docs-toc__link.is-active {
  border-left-color: var(--accent);
  color: var(--heading);
}

/* nested h3 links: indented with padding, not margin, so the active rail
   still sits on the list's border */
.docs-toc__link--sub {
  padding: 3px 0 3px 26px;
  font-size: 12.5px;
  line-height: 18px;
}

/* a little air before each section link that follows a nested group */
.docs-toc__link--sub + .docs-toc__link:not(.docs-toc__link--sub) { margin-top: 6px; }

/* the section whose question is active: lit text, no rail (docs.js) */
.docs-toc__link.is-active-parent { color: var(--heading); }


/* ─── Focus (reset.css removes outlines on buttons) ─────────────────────── */
.docs-shell a:focus-visible,
.docs-shell button:focus-visible,
.docs-brand a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1279px) {
  .docs-shell { grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr); gap: 48px; }
  .docs-toc { display: none; }
}

@media (max-width: 899px) {
  .docs-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 0;
  }

  /* sidebar becomes a disclosure row pinned under the header */
  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    margin-inline: calc(-1 * var(--docs-pad));
    padding: 0;
    border-bottom: 1px solid var(--border);
  }

  .docs-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px var(--docs-pad);
    font-size: 15px;
    line-height: 22px;
    color: var(--heading);
  }

  .docs-menu-toggle__where {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--muted);
  }

  .docs-menu-toggle svg { transition: transform 200ms var(--ease); }
  .docs-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .docs-nav {
    padding: 4px var(--docs-pad) 24px;
  }

  .docs-article { padding-top: 32px; }
}

@media (max-width: 767px) {
  :root { --docs-pad: 24px; }

  .docs-shell { padding-bottom: 80px; }

  .docs-brand { gap: 10px; }
  .docs-brand__tag { padding-left: 10px; }

  .docs-title { font-size: 32px; line-height: 40px; }
  .docs-lede  { font-size: 17px; line-height: 28px; }

  .prose h2 { font-size: 22px; line-height: 30px; margin-top: 56px; }
  .prose > section > h3 { font-size: 19px; line-height: 27px; margin-top: 40px; }
  .prose > section > h3:first-of-type { margin-top: 24px; }

  .anchor { display: none; }

  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts__item:nth-child(odd) { border-right: 0; }
  .facts__item:nth-last-child(2) { border-bottom: 1px solid var(--border); }

  .docs-cards { grid-template-columns: minmax(0, 1fr); }

  /* tables become stacked rows: the first cell is the row's heading, the
     rest are labelled from their column header (data-label) */
  .prose table,
  .prose tbody,
  .prose td { display: block; }

  .prose thead { display: none; }

  .prose tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }

  .prose tr:last-child { border-bottom: 0; }

  .prose td {
    padding: 0;
    border-bottom: 0;
  }

  .prose td:first-child {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    font-weight: 700;
  }

  .prose td + td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
  }

  /* retention: the three plan values share one row under the data cell */
  .prose table.retention tr {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 12px;
  }

  /* its data cells hold a bold lead plus a definition; keep the definition
     regular so the lead still stands out */
  .prose table.retention td:first-child { font-weight: 400; }

  /* ledger: only one mode column shows, so give it the full row */
  .prose table.ledger td + td { grid-column: 1 / -1; }

  /* stacked columns are narrow: let long labels ("Type and size only") wrap,
     with the dot pinned to the first line */
  .prose td .mark { white-space: normal; align-items: baseline; }

  .prose td code { white-space: normal; overflow-wrap: anywhere; }

  .payload__lines { font-size: 12px; line-height: 20px; }
  .pl { grid-template-columns: 24px auto; }

  .payload__head { padding: 10px 12px; }
  .view-tabs { width: 100%; }
  .view-tab  { flex: 1; padding-inline: 6px; }

  .docs-pager { grid-template-columns: minmax(0, 1fr); }
  .docs-pager__link--next { grid-column: 1; }
}

@media (max-width: 479px) {
  /* "Basics (free)" wraps in these narrow columns. Give every retention
     label two lines with the text at the bottom so the values line up. */
  .prose table.retention td + td::before {
    display: flex;
    align-items: flex-end;
    min-height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docs-shell *,
  .docs-shell *::before,
  .docs-shell *::after { transition: none !important; }
}