/* Documentation — the rules /docs, /docs/<category> and /docs/<category>/<article>
   need on top of the two captures they borrow. Hand-maintained, not emitted by
   the port pipeline. Imported by the docs pages alone through astroPage's
   extraCss slot (tools/04-generate.mjs); pairs with
   tools/fragments/docs-pages.mjs, whose header carries the layout reasoning.

   Two frozen sheets sit under this one. /docs renders under `support` and
   uses only classes support.css emits, so the home page needs three rules
   here (the whole-card link's hover and the card grid heading gap). Hubs and
   articles render under `terms-of-service`, cursor.com's captured legal shell,
   whose sheet carries `.prose>p`, `.prose ul`, `.prose strong`, the underlined
   link treatment, the `:after` hairline of `.media-border-container` and the
   `:before` hairline of `.prose pre` — and NO base rule for headings, `ol`,
   `hr`, `blockquote`, `pre`, inline `code`, `figure`, the media frame or
   `table`, cursor.com's legal document having none of them. Every rule below
   is one of those, or one of this layout's own parts (rail, crumb, callout,
   pager, section foot, on-this-page, hub list).

   Tokens only. Every token read here is declared in terms-of-service.css and
   in support.css (the test checks both), and dark follows theme-dark.css.
   Every selector is scoped under a `dc-` class, so nothing here can reach the
   legal pages that share the terms-of-service key.

   Values come from three places, named at each rule: `src/styles/legal.css`
   (the ol/li/hr/blockquote set, which that sheet wrote for the same capture),
   `src/styles/blog-post.css` (the h2/h3 ladder, the figure spacing and the
   media frame, lifted as tokens from the article capture), and
   `src/styles/blog-post-extras.css` (the `.prose-table` rules, restated — the
   fragment header says why that sheet is not imported whole). */

/* ---- Rail -----------------------------------------------------------------
   The capture's sticky rail, capped to the viewport. A sticky box taller than
   the viewport can never be scrolled to its end; eleven headings plus one
   open category's articles can be taller than a laptop. */
.dc-rail {
  max-height: calc(100vh - var(--site-sticky-top) - var(--spacing-v1));
  overflow-y: auto;
}

/* The open category's articles, one step in and one step down in size. */
.dc-rail__articles {
  margin-top: var(--spacing-v1\/12);
  margin-bottom: var(--spacing-v6\/12);
  padding-left: var(--spacing-g1);
  border-left: 1px solid var(--color-theme-border-02);
}

/* ---- Crumb ----------------------------------------------------------------
   "Documentation › Category" over the title. The separator is a glyph in a
   span rather than a margin on the links, so a wrapped crumb keeps its air. */
.dc-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.dc-crumb__sep {
  margin-inline: var(--spacing-g0\.5);
}

/* ---- Prose: headings ------------------------------------------------------
   blog-post.css's own ladder for the article capture: h2 at --text-md, h3 one
   step down at --text-md-sm. legal.css sets its h2 at --text-md-sm because a
   legal document has one level; a guide has two. */
.dc-prose > h2 {
  color: var(--color-theme-text);
  margin-top: var(--spacing-v2);
  margin-bottom: var(--spacing-v6\/12);
  font-size: var(--text-md);
  line-height: var(--leading-snug-plus);
  letter-spacing: var(--tracking-md);
  font-weight: var(--font-weight-bold);
  /* The header pins itself once scrolled (src/styles/header-pinned.css), so a
     jump from the on-this-page list would otherwise land under it. */
  scroll-margin-top: var(--spacing-v2);
}

.dc-prose > h3 {
  color: var(--color-theme-text);
  margin-top: var(--spacing-v1\.5);
  margin-bottom: var(--spacing-v6\/12);
  font-size: var(--text-md-sm);
  line-height: var(--leading-cozy);
  font-weight: var(--font-weight-bold);
  scroll-margin-top: var(--spacing-v2);
}

/* The body opens on its first block; the header above already spaced it. */
.dc-prose > :first-child {
  margin-top: 0;
}

/* renderDoc's hover anchor. terms-of-service.css has the :hover half and
   blog-post.css the base; the base is restated so the `#` rests hidden. It
   hangs 1.25em into the gutter, which only exists beside the rail. */
.dc-prose .anchor-heading {
  position: relative;
}

.dc-prose .anchor-heading .anchor-link {
  display: none;
  opacity: 0;
  color: var(--color-theme-text-mid);
  text-decoration: none;
  transition: opacity 0.15s;
  position: absolute;
  top: 0;
  left: -1.25em;
}

@media (min-width: 1140px) {
  .dc-prose .anchor-heading .anchor-link {
    display: inline;
  }
}

/* The `#` itself, at body weight against a bold heading — blog-post.css's own. */
.dc-prose .anchor-icon {
  font-weight: var(--font-weight-normal);
}

/* ---- Prose: lists, rules, quotes -----------------------------------------
   legal.css's set for this same capture, which styles `ul` and only `ol`'s
   marker. */
.dc-prose ol {
  margin-bottom: var(--spacing-v1);
  padding-left: var(--spacing-g2);
  list-style-type: decimal;
}

.dc-prose li {
  margin-bottom: var(--spacing-v6\/12);
  text-wrap: pretty;
}

.dc-prose li::marker {
  color: var(--prose-bullets);
}

/* A nested list sits inside its item's own margin; the outer list's bottom
   margin is the block's. */
.dc-prose li > ul,
.dc-prose li > ol {
  margin-top: var(--spacing-v6\/12);
  margin-bottom: 0;
}

.dc-prose hr {
  border-color: var(--prose-hr);
  border-top-width: 1px;
  margin-block: var(--spacing-v2);
}

.dc-prose blockquote {
  border-left: 1px solid var(--color-theme-border-01);
  padding-left: var(--spacing-g1);
  margin-bottom: var(--spacing-v1);
  color: var(--color-theme-text-sec);
}

/* `.prose>p` is a child selector; a quoted paragraph needs its type restated. */
.dc-prose blockquote > p {
  margin-bottom: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.dc-prose details {
  margin-bottom: var(--spacing-v1);
}

.dc-prose summary {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-v6\/12);
}

/* ---- Prose: code ----------------------------------------------------------
   terms-of-service.css draws `pre`'s hairline as an absolutely positioned
   `:before`, which needs a positioned, padded box under it; the capture's
   `--prose-pre-bg` / `--prose-code-*` tokens are what it declared for exactly
   this. Inline code is the capture's `--prose-code-bg` on a `--prose-code-
   border` hairline at `--prose-code-border-radius`. */
.dc-prose pre {
  position: relative;
  margin-bottom: var(--spacing-v1);
  padding: var(--spacing-g1) var(--spacing-g1\.25);
  border-radius: var(--radius-xs);
  background-color: var(--prose-pre-bg);
  color: var(--prose-pre-code);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-x: auto;
  white-space: pre;
}

.dc-prose pre code {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
}

.dc-prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--prose-code);
  background-color: var(--prose-code-bg);
  border: 1px solid var(--prose-code-border);
  border-radius: var(--prose-code-border-radius);
  /* 0.25em, not the 0.375em a code chip usually takes: at this size a wider
     chip pushes the full stop after `Layout` a visible gap away from it. */
  padding: 0.0625em 0.25em;
  white-space: nowrap;
}

/* ---- Prose: figures -------------------------------------------------------
   blog-post.css's spacing and media frame, as tokens. The `:after` hairline is
   the capture's own; this supplies the box it draws on. Media is hotlinked
   from media.bidlo.ai with its measured width/height, so the column reserves
   the box before the file lands. */
.dc-prose figure {
  margin-block: var(--spacing-v2);
}

.dc-prose figure + p {
  margin-top: var(--spacing-v2);
}

.dc-prose .media-border-container {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background-color: var(--color-theme-card-hex);
}

/* figure() also puts the `overflow-hidden` utility on that frame; the legal
   capture never emitted it, so it is restated here as the class check asks. */
.dc-prose .overflow-hidden {
  overflow: hidden;
}

.dc-prose figure img,
.dc-prose figure video {
  display: block;
  width: 100%;
  height: auto;
}

.dc-prose figcaption {
  margin-top: var(--spacing-g0\.75);
  text-wrap: pretty;
}

/* ---- Prose: tables --------------------------------------------------------
   blog-post-extras.css's `.prose-table` rules for a table nobody clips —
   restated rather than imported, since that sheet's other half is the
   "Show N more" machinery only src/lib/blog-table.js arms and a rule that
   widens figures into the rail this page keeps its on-this-page list in.
   Values are that sheet's, to the letter. */
.dc-prose .prose-table__frame {
  position: relative;
}

.dc-prose .prose-table__scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.dc-prose .prose-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.dc-prose .prose-table th,
.dc-prose .prose-table td {
  padding: 0.6875rem 0.875rem;
  text-align: left;
  vertical-align: middle;
}

.dc-prose .prose-table th:first-child,
.dc-prose .prose-table td:first-child {
  padding-left: 0;
}

.dc-prose .prose-table th:last-child,
.dc-prose .prose-table td:last-child {
  padding-right: 0;
}

.dc-prose .prose-table thead th {
  padding-block: 0.375rem;
  vertical-align: bottom;
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-theme-text-tertiary);
}

.dc-prose .prose-table tbody tr {
  border-top: 1px solid var(--color-theme-border-02);
}

.dc-prose .prose-table [data-num] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dc-prose .prose-table figcaption {
  margin-top: var(--spacing-g1);
}

/* ---- Callouts -------------------------------------------------------------
   Note / Tip / Warning / Important, rendered by the fragment as an aside
   between prose runs. One shape: the card fill, a rule down the left, a bold
   lead. The kind moves the rule and the lead's ink and nothing else — the
   site's colour is thin and stays thin. Note is the foreground at 20% (the
   hairline a current nav entry takes); the other three are the capture's own
   green, accent and red, which it declares for both themes. */
.dc-callout {
  --dc-callout-ink: var(--color-theme-text);
  --dc-callout-rule: var(--color-theme-border-02-5);
  position: relative;
  margin-bottom: var(--spacing-v1);
  padding: var(--spacing-g1) var(--spacing-g1\.25);
  border-left: 2px solid var(--dc-callout-rule);
  border-radius: var(--radius-xs);
  background-color: var(--color-theme-card-hex);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-theme-text);
}

/* The defaults, restated so the four kinds are four rules. */
.dc-callout--note {
  --dc-callout-ink: var(--color-theme-text);
  --dc-callout-rule: var(--color-theme-border-02-5);
}

.dc-callout--tip {
  --dc-callout-ink: var(--color-theme-product-ansi-green);
  --dc-callout-rule: var(--color-theme-product-ansi-green);
}

.dc-callout--warning {
  --dc-callout-ink: var(--color-theme-accent);
  --dc-callout-rule: var(--color-theme-accent);
}

.dc-callout--important {
  --dc-callout-ink: var(--color-theme-product-ansi-red);
  --dc-callout-rule: var(--color-theme-product-ansi-red);
}

.dc-callout__label {
  color: var(--dc-callout-ink);
  font-weight: var(--font-weight-bold);
}

/* `.prose>p` does not reach a paragraph inside the aside; this is its type. */
.dc-callout p {
  margin: 0;
}

.dc-callout > * + * {
  margin-top: var(--spacing-v6\/12);
}

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

/* ---- Previous / next ------------------------------------------------------
   Two cards on one row under the prose, the next one on the right even when
   there is no previous. Card fill and radius are `.card`'s own tokens. */
.dc-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-g1);
  margin-top: var(--spacing-v2);
  padding-top: var(--spacing-v1);
  border-top: 1px solid var(--color-theme-border-02);
}

.dc-pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-g0\.25);
  padding: var(--spacing-g1) var(--spacing-g1\.25);
  border-radius: var(--radius-xs);
  background-color: var(--color-theme-card-hex);
  color: var(--color-theme-text);
}

.dc-pager__link:hover {
  background-color: var(--color-theme-card-hover-hex);
}

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

/* ---- In this section (below xl) ------------------------------------------
   The rail's open category, at the foot, for the widths that have no rail.
   The `xl:hidden` is the capture's; this is the box. */
.dc-section {
  margin-top: var(--spacing-v2);
  padding-top: var(--spacing-v1);
  border-top: 1px solid var(--color-theme-border-02);
}

.dc-section__title {
  margin-bottom: var(--spacing-v6\/12);
  font-weight: var(--font-weight-medium);
}

/* ---- On this page (xl) ----------------------------------------------------
   The third grid item, in the columns the legal shell leaves empty to the
   right of its content. terms-of-service.css emits no `xl:col-start-19`, so
   the placement is here, under the same 1140px the capture's `max-xl:hidden`
   uses; below it the aside is not drawn at all. Column 19 is left as a gutter
   so the list does not touch the prose's right edge. */
.dc-toc {
  display: none;
}

@media (min-width: 1140px) {
  .dc-toc {
    display: block;
    grid-column: 20 / 25;
  }
}

.dc-toc__inner {
  position: sticky;
  top: var(--site-sticky-top);
}

.dc-toc li {
  margin-bottom: var(--spacing-v1\/12);
}

/* ---- Hub list -------------------------------------------------------------
   One card per article: title and read time on the first row, summary under
   them. `.card`'s own fill, radius and hover, one step less padding — a row
   in a list is not a card in a grid. */
/* An `<ol>` because a hub's guides have a reading order, drawn with NO
   markers as of 2026-09-03, at the owner's direction. They used to hang in
   the gutter left of the rows at xl (and were dropped below it, the gutter
   there being the page margin, where the search popover opens) — but every
   row is a filled card, and a decimal outside a card reads as a numbered
   list of things rather than as a menu of destinations. The order is still
   in the markup for anything that reads structure. */
.dc-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-g1);
  list-style: none;
  padding-left: 0;
}

.dc-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--spacing-g0\.25) var(--spacing-g1);
  padding: var(--spacing-g1) var(--spacing-g1\.25);
  border-radius: var(--radius-xs);
  background-color: var(--color-theme-card-hex);
  color: var(--color-theme-text);
}

.dc-list__link:hover {
  background-color: var(--color-theme-card-hover-hex);
}

.dc-list__summary {
  grid-column: 1 / -1;
}

/* ---- Home -----------------------------------------------------------------
   The category and start-here cards are `.card` from support.css, drawn as
   whole-card links. `.card` carries no hover of its own on that page. */
.dc-card {
  color: var(--color-theme-text);
}

.dc-card:hover {
  background-color: var(--color-theme-card-hover-hex);
}

/* ---- Search ---------------------------------------------------------------
   The field on /docs (under the intro), in the rail on hubs and articles, and
   at the top of a hub's column below xl. Values are the blog's captured
   search box, lifted as tokens: `border-theme-border-02 bg-theme-card-hex
   rounded-full! type-base pt-[0.45em] pb-[0.46em] pl-[2rem] pr-[2rem]`, its
   `focus:[border-color:var(--color-theme-fg)]`, its hover/focus fill of
   `card-hover-hex`, its placeholder in `--color-theme-text-mid`, and its
   0.875rem magnifier 0.75rem in. Neither borrowed sheet emits `border`,
   `appearance-none` or `rounded-full!`, which is why the class names are not
   reused. The results list is a popover in `.card`'s fill on the site's own
   flyout shadow, over whatever is under it; the rail's field sits OUTSIDE the
   `.dc-rail` scroll box for exactly that reason. src/lib/docs-search.js
   fills the listbox and toggles `hidden`; with JS off the field is inert. */
.dc-search {
  position: relative;
  /* Over the cards under it: .card's hairline is a ::before at z-index 30
     in both borrowed sheets, and a popover the card ring cuts through reads
     as glass. 31 is one over that and well under the header's own layer. */
  z-index: 31;
  margin: 0;
  /* The em every length below is solved in: the field is type-base. */
  font-size: var(--text-base);
  /* The blog box's own vertical pad. A variable because the icon's centring
     and the rail stack's height both have to follow it, and because the home
     page's field overrides it below. */
  --dc-search-pad-y: var(--spacing-v2\/12);
}

.dc-search__icon {
  position: absolute;
  left: 0.75rem;
  width: 0.875rem;
  height: 0.875rem;
  /* Centred on the field's text line, not the form: the results list grows
     the form and the glyph must not follow it. Border, then the top pad,
     then half the line box. */
  top: calc(1px + var(--dc-search-pad-y) + 0.5em * var(--leading-normal));
  transform: translateY(-50%);
  color: var(--color-theme-text-mid);
  pointer-events: none;
}

.dc-search__field {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  /* The blog box's md-and-up values (its phone values are the em pair in the
     header comment); the site never shows this field below md at a size
     where the difference reads. */
  padding: var(--dc-search-pad-y) 2rem;
  line-height: var(--leading-normal);
  border: 1px solid var(--color-theme-border-02);
  border-radius: 9999px;
  background-color: var(--color-theme-card-hex);
  color: var(--color-theme-text);
  outline: none;
}

.dc-search__field::placeholder {
  color: var(--color-theme-text-mid);
  opacity: 1;
}

.dc-search__field::-webkit-search-cancel-button,
.dc-search__field::-webkit-search-decoration,
.dc-search__field::-webkit-search-results-button,
.dc-search__field::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.dc-search__field:hover,
.dc-search__field:focus {
  background-color: var(--color-theme-card-hover-hex);
}

.dc-search__field:focus {
  border-color: var(--color-theme-fg);
}

/* The listbox: a popover under the field, `.card`'s fill on the flyout
   shadow the nav uses, one hairline. `hidden` is the attribute the script
   toggles; the rule is restated because the sheet's own reset may not reach
   an element inside a form it never had. */
.dc-search__results {
  position: absolute;
  top: calc(100% + var(--spacing-g0\.5));
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--spacing-g0\.5);
  list-style: none;
  border: 1px solid var(--color-theme-border-02);
  border-radius: var(--radius-xs);
  background-color: var(--color-theme-card-hex);
  box-shadow: var(--shadow-flyout);
  /* Eight two-line rows fit inside 32rem; the viewport term is for a short
     window, and the list scrolls inside it rather than running off screen. */
  max-height: min(32rem, calc(100vh - var(--site-sticky-top) - var(--spacing-v2)));
  overflow-y: auto;
}

.dc-search__results[hidden] {
  display: none;
}

.dc-search__link {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-g0\.25);
  padding: var(--spacing-g0\.75) var(--spacing-g1);
  border-radius: var(--radius-xs);
  color: var(--color-theme-text);
  text-decoration: none;
}

.dc-search__link:hover,
.dc-search__option[aria-selected='true'] > .dc-search__link {
  background-color: var(--color-theme-card-hover-hex);
}

.dc-search__meta {
  color: var(--color-theme-text-sec);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.dc-search__empty {
  padding: var(--spacing-g0\.75) var(--spacing-g1);
  color: var(--color-theme-text-sec);
}

/* In the rail: the field takes the rail's own bottom rhythm and the scroll
   box under it gives up that height, so the pair still fits the viewport. */
.dc-search--rail {
  margin-bottom: var(--spacing-v1);
}

.dc-rail-stack .dc-rail {
  max-height: calc(100vh - var(--site-sticky-top) - var(--spacing-v1) - var(--dc-search-h));
}

.dc-rail-stack {
  /* The field's box — one line box, two pads, two hairlines — plus the
     margin under it. Solved off the same tokens the field reads rather than
     measured, so the scroll box's cap follows the field. */
  --dc-search-h: calc(1em * var(--leading-normal) + 2 * var(--spacing-v2\/12) + 2px + var(--spacing-v1));
  font-size: var(--text-base);
}

/* At the top of a hub's column (below xl only): a step of air before the
   list, the same step the header above takes. */
.dc-search--column {
  margin-bottom: var(--spacing-v1);
}

/* On /docs: the wrapper carries the spacing; the field itself takes none.
   And the box, the glyph and the two insets are MEASURED off the reference
   help-center front the owner supplied (2026-09-03), rather than scaled off
   the blog capture — the blog's box is a 15rem-ish filter beside a tab row
   and this is the one control the page is built around. The reference, in
   its own pixels: an 800 x 56 pill, a 22px magnifier whose ink starts 25px
   inside the left edge, the placeholder starting at 66px, and the glyph and
   the type both centred on the box.

   Height: the line box is 24 (`--text-base` at `--leading-normal`) and the
   hairlines are 2, so `v8/12` (14.93 at 1440) a side gives 55.87 — the
   reference's 56. Glyph: our magnifier's ink is 88% of its viewBox (the path
   runs 0.483..11.038 of 12), so a 1.5rem box renders 21.2px of ink against
   the reference's 22, with the ink landing 25.7px in from a 1.5rem inset.
   The pads are 4.125rem (66px) and symmetric, as the blog box's are. Width
   stays 52rem on the wrapper, i.e. 832 against the reference's 800.

   None of it reaches the rail: the compact field states its own padding and
   its own icon box, and a 15rem field in a column of one-line links is not
   this control. */
.dc-search--home {
  margin-bottom: 0;
  --dc-search-pad-y: var(--spacing-v8\/12);
}

.dc-search--home .dc-search__field {
  padding-left: 4.125rem;
  padding-right: 4.125rem;
}

.dc-search--home .dc-search__icon {
  left: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- Help center: the home page ------------------------------------------
   As of 2026-09-03 the home page renders in the legal shell too, so the rail
   is on every docs page; its own column, hero, chips, grid, card type and
   the support trio are these rules, terms-of-service.css emitting no
   `type-md-lg`, `md:grid-cols-2`, `mt-auto` or `text-pretty`. The card shell
   itself is that sheet's `.card` (fill, hairline, padding, hover on an
   anchor). Breakpoints are the container's own: 660 (two columns), 900
   (three, and the larger title), 1140 (the rail appears and the column
   moves beside it). */

/* The column beside the rail. The hubs' content column is 12 of 24; a
   three-up card grid wants the other 18. Full width below xl, where the
   rail is hidden. */
.dc-home {
  grid-column: 1 / -1;
}

@media (min-width: 1140px) {
  .dc-home {
    grid-column: 7 / -1;
  }
}

.dc-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* The HERO's step is its own and is deliberately smaller than the three
     below it: the chips are the tail of the hero rather than a section of
     their own, and the search box they hang under is the one control the
     page is built around. v2.5 until 2026-09-03, v4 since. */
  margin-bottom: var(--spacing-v4);
}

/* The capture's `.type-lg` from 900 down, `.type-xl` above — restated as
   tokens because the h1 has to change size where the column does, and
   neither utility is responsive. */
.dc-hero__title {
  font-size: var(--text-lg);
  line-height: var(--leading-xsnug);
  letter-spacing: var(--tracking-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-theme-text);
  margin-bottom: var(--spacing-v6\/12);
}

@media (min-width: 900px) {
  .dc-hero__title {
    font-size: var(--text-xl);
    line-height: var(--leading-2xsnug);
    letter-spacing: var(--tracking-xl);
  }
}

/* `.type-md-lg`'s values, in the secondary ink, capped to the search's width. */
.dc-hero__intro {
  font-size: var(--text-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-md-lg);
  color: var(--color-theme-text-sec);
  max-width: 52rem;
  margin: 0 0 var(--spacing-v1\.25);
}

/* The empty state's one line, under the intro. */
.dc-hero__line {
  max-width: 40rem;
  margin: 0;
}

/* The wide pill field: the full column on a phone, 52rem at most. */
.dc-hero__search {
  width: 100%;
  max-width: 52rem;
  margin-bottom: var(--spacing-v1);
}

/* On the full home page the field follows the h1 directly — the subhead came
   out on 2026-09-03 — and the title's own `v6/12` is the step it took to a
   sentence, not to a control. One more `v1` puts the pair at the rhythm the
   intro used to set (11 + 22 = 34px at 1440, measured), so the box reads as
   the next thing in the hero rather than as part of the title block. The
   selector is adjacent-sibling, so it cannot fire on the empty state, whose
   hero has no field at all. */
.dc-hero__title + .dc-hero__search {
  margin-top: var(--spacing-v1);
}

.dc-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-g0\.5);
}

/* A chip is a small card: the card fill, the card radius, no hairline. */
.dc-chip {
  display: inline-block;
  padding: var(--spacing-v1\/12) var(--spacing-g1);
  border-radius: var(--radius-xs);
  background-color: var(--color-theme-card-hex);
  color: var(--color-theme-text);
}

.dc-chip:hover {
  background-color: var(--color-theme-card-hover-hex);
}

/* "Browse by topic" — `.type-md-lg` as tokens, the step the hubs' h2 takes. */
.dc-home__heading {
  font-size: var(--text-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-md-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-theme-text);
  margin-bottom: var(--spacing-v1);
}

/* SECTION-TO-SECTION IS `v6`, WHICH IS THE SITE'S OWN, NOT A NUMBER PICKED
   HERE. `.section` in every captured sheet is `padding: var(--spacing-v3)
   var(--spacing-g2)`, so two stacked sections put v3 of their own padding
   either side of the seam and the gap a reader sees between them is v6 —
   134.4px at 1440, 126 below 768, where the root steps 16 -> 15. Measured on
   the built home page rather than read off the rule, `.section`'s own
   `padding-block-end: var(--spacing-v6)` being overridden there.
   These blocks cannot BE `.section`s — they are grid items inside the legal
   shell's one section, and wrapping them would take them out of the column —
   so what is reused is the value. Do not tune it; it is the same step the
   whole site is on, and it follows the root on its own. */
.dc-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-g1);
  margin-bottom: var(--spacing-v6);
}

@media (min-width: 660px) {
  .dc-home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .dc-home__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* A topic card's three lines: `.type-md-lg` title, pretty body, the guide
   count pinned to the foot so a short description does not lift it. */
.dc-card__title {
  font-size: var(--text-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-md-lg);
  font-weight: var(--font-weight-normal);
  margin-bottom: var(--spacing-v1);
}

.dc-card__body {
  text-wrap: pretty;
  margin-bottom: var(--spacing-v2);
}

.dc-card__foot {
  margin-top: auto;
}

/* ---- What's new? -----------------------------------------------------------
   The two newest weekly updates. Two cards on the SAME three-column track as
   the topic grid above, so they sit in the first two columns rather than
   stretching to half the row each.

   The CARD is deliberately not the topic card: one title, on the bottom edge.
   That needs a height, since "bottom" of a card sized by one line of text is
   the same place as the top of it — 9rem is a little over half a topic card
   (measured at 1440, where a topic card is ~200px), enough that the empty
   space above the title reads as deliberate rather than as a card that failed
   to load. `margin-top: auto` in the flex column does the pinning, which is
   the same mechanic `.dc-card__foot` uses one grid up. */
.dc-new__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-g1);
  margin-bottom: var(--spacing-v6);
}

@media (min-width: 660px) {
  .dc-new__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .dc-new__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The card carries the article's own thumbnail (the blog card's 40:21 band,
   `bg-theme-card-03-hex` under it when there is none) over the title, so the
   `.card` padding moves off the shell and onto the title; the shell clips the
   band to its own corner. The band is what gives the card its height now, so
   the old 9rem floor is gone with it. */
.dc-new__card {
  padding: 0;
  overflow: hidden;
}

.dc-new__thumb {
  display: block;
  aspect-ratio: 40 / 21;
  width: 100%;
  background-color: var(--color-theme-card-03-hex);
}

.dc-new__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* `.type-md-lg`'s values — the topic card's title size, so the two grids
   agree on type where they disagree on shape. */
.dc-new__title {
  margin-top: auto;
  padding: calc(var(--spacing-g1\.75) - 0.1rem) var(--spacing-g1\.75) var(--spacing-g1\.75);
  font-size: var(--text-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-md-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-theme-text);
}

/* ---- The support trio ------------------------------------------------------
   Under the topic grid (and alone under the hero in the empty state): a
   closer heading, then three whole-item links in a row — a 24px lucide
   glyph, a bold title, one muted line. Nothing boxed; the items sit on the
   page, the glyph doing the separating. */
.dc-help {
  /* No rule above it as of 2026-09-03, at the owner's direction — with the
     "What's new?" section between the topic grid and this one, a hairline
     here separated the last of three headed sections from the last but one
     and said nothing the heading did not. The step up is the spacing alone,
     one notch larger than the gap between the grids. */
  margin-top: var(--spacing-v6);
}

.dc-help__heading {
  font-size: var(--text-md-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-md-lg);
  font-weight: var(--font-weight-normal);
  color: var(--color-theme-text);
  margin-bottom: var(--spacing-v1\.25);
}

.dc-help__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-v1) var(--spacing-g2);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 660px) {
  .dc-help__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dc-help__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-g0\.25);
  color: var(--color-theme-text);
}

.dc-help__glyph {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: var(--spacing-g0\.5);
}

.dc-help__title {
  font-weight: var(--font-weight-medium);
}

.dc-help__line {
  text-wrap: pretty;
}

.dc-help__item:hover .dc-help__title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---- The rail's head and Support group -------------------------------------
   The tree opens on a "Help center" link and closes on a muted label over
   the trio's three rows, the same step the category map's own rows take. */
.dc-rail__head {
  margin-bottom: var(--spacing-v6\/12);
}

/* A LABEL, not a link: the rows under it are `text-theme-text-sec` (RAIL_OFF)
   and at that same value this read as a fourth destination that happened not
   to be clickable. `--color-theme-text-tertiary` is the foreground at 40%
   against their 60%. Painted here rather than with `text-theme-text-ter`,
   which terms-of-service.css does not emit. */
.dc-rail__group {
  margin-top: var(--spacing-v1);
  margin-bottom: var(--spacing-v1\/12);
  color: var(--color-theme-text-tertiary);
}

/* The three rows, in the map's own rhythm and nothing more. */
.dc-rail__support {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- The compact field ----------------------------------------------------
   The rail's field and the hub's below-xl copy: a 15rem box with the card
   radius rather than a six-column pill — a rail of one-line links wants a
   field their size, not the hero's. Type is the sheet's `type-sm`, so the
   pads are solved in that em; the magnifier centres on the box (the results
   list is absolutely positioned, so the form is exactly the field). The
   popover keeps a readable width: 20rem at least, hanging off the field's
   left edge. */
.dc-search--compact {
  max-width: 15rem;
  font-size: var(--text-sm);
}

.dc-search--compact .dc-search__field {
  padding: 0.4375rem 0.75rem 0.4375rem 1.875rem;
  border-radius: var(--radius-xs);
}

.dc-search--compact .dc-search__icon {
  top: 50%;
  left: 0.625rem;
  width: 0.75rem;
  height: 0.75rem;
}

.dc-search--compact .dc-search__results {
  right: auto;
  min-width: 20rem;
  width: max-content;
  max-width: min(28rem, calc(100vw - 2 * var(--spacing-g1)));
}

/* The rail's scroll-box cap re-solved for the compact field: one small line
   box, two 0.4375rem pads, two hairlines, the margin under it. */
.dc-rail-stack {
  --dc-search-h: calc(var(--text-sm) * var(--leading-normal) + 0.875rem + 2px + var(--spacing-v1));
}