/* ==========================================================
   CCI Technology docs: shell + article reading view
   Loaded after bootstrap + bootstrap_theme_overrides.css.
   Everything is namespaced td- so other templates are untouched.
   ========================================================== */

:root {
  --td-ink: #1f2328;
  --td-ink-soft: #3d444d;
  --td-ink-muted: #59636e;
  --td-bg: #ffffff;
  --td-surface: #f6f8fa;
  --td-surface-strong: #eaeef2;
  --td-border: #d1d9e0;
  --td-border-soft: #e4e9ee;

  --td-navy: #213c5f;
  --td-navy-deep: #162941;
  --td-navy-tint: #edf1f6;
  --td-navy-tint-strong: #dde5ef;


  /* Glass finish: a light sheen, a lit top edge, and a soft offset drop. */
  --td-glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0) 100%);
  --td-glass-sheen-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.25) 100%);
  --td-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --td-glass-drop: 0 1px 2px rgba(22, 41, 65, 0.10), 0 6px 14px -6px rgba(22, 41, 65, 0.22);
  --td-glass-drop-hover: 0 2px 4px rgba(22, 41, 65, 0.12), 0 10px 22px -8px rgba(22, 41, 65, 0.28);

  --td-note-bg: #e6f1fb;      /* Drexel sky, washed */
  --td-note-border: #9fc8ec;
  --td-note-icon: #1d5e9e;
  --td-warn-bg: #fff4d1;      /* amber, washed */
  --td-warn-border: #f0c43f;
  --td-warn-icon: #8a5a00;

  --td-code-bg: #eff2f5;
  --td-focus: #2b6cb0;

  --td-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --td-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --td-header-h: 3.5rem;
  --td-sidebar-w: 17rem;
  --td-measure: 46rem;
  --td-radius: 6px;
  --td-radius-lg: 8px;
  --td-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */

.td-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--td-bg);
  color: var(--td-ink);
  font-family: var(--td-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.td-body ::selection { background: rgba(33, 60, 95, 0.18); }
.td-body :focus-visible {
  outline: 2px solid var(--td-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

html { scroll-padding-top: calc(var(--td-header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.td-skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 1100;
  padding: 0.5rem 0.875rem;
  background: var(--td-bg);
  color: var(--td-navy);
  font-weight: 600;
  border-radius: var(--td-radius);
  box-shadow: 0 2px 8px rgba(22, 41, 65, 0.25);
  text-decoration: none;
}
.td-skip-link:focus { top: 0.5rem; }

.td-main:focus { outline: none; }

/* ---------- Header ---------- */

.td-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--td-navy);
  color: #fff;
  border-bottom: 1px solid var(--td-navy-deep);
}

.td-header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-height: var(--td-header-h);
  /* Left edge matches the page content on phones and the sidebar text (22px)
     on desktop; right edge matches the main column's padding. */
  padding: 0.5rem 1.25rem;
}
@media (min-width: 48em) { .td-header__inner { padding-right: 2.5rem; } }
/* Below lg the 44px icon buttons set the height; trim padding so the bar stays 56px. */
@media (max-width: 991.98px) { .td-header__inner { padding-top: 0.375rem; padding-bottom: 0.375rem; } }
@media (min-width: 992px) { .td-header__inner { padding-left: 1.375rem; } }
@media (min-width: 87.5em) { .td-header__inner { padding-right: 3.5rem; } }

.td-header :focus-visible { outline-color: #fff; }

.td-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.td-brand img { display: block; height: 32px; width: auto; }
.td-brand__divider { width: 1px; align-self: stretch; margin: 0.25rem 0; background: rgba(255, 255, 255, 0.35); }
.td-brand__name { font-size: 1rem; font-weight: 600; letter-spacing: 0.005em; }
.td-brand:hover, .td-brand:focus { color: #fff; }

.td-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -0.625rem;
  border: 0;
  border-radius: var(--td-radius);
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
}
.td-icon-button:hover { background: rgba(255, 255, 255, 0.12); }

.td-search {
  position: relative;
  flex: 1 1 18rem;
  max-width: 26rem;
  margin-left: auto;
}
.td-search__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  transition: color 0.15s;
}
.td-search__input {
  width: 100%;
  height: 2.375rem;
  padding: 0 0.875rem 0 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--td-radius);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  transition: background-color 0.15s, border-color 0.15s;
}
.td-search__input::placeholder { color: rgba(255, 255, 255, 0.8); }
.td-search__input:hover { border-color: rgba(255, 255, 255, 0.5); }
.td-search__input:focus {
  outline: 2px solid #fff;
  outline-offset: 1px;
  background: #fff;
  border-color: #fff;
  color: var(--td-ink);
}
.td-search__input:focus::placeholder { color: var(--td-ink-muted); }
.td-search:focus-within .td-search__icon { color: var(--td-ink-muted); }
.td-search__key {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 0.375rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--td-mono);
  font-size: 0.75rem;
  line-height: 1.25rem;
  pointer-events: none;
}
.td-search:focus-within .td-search__key { display: none; }
@media (hover: none) { .td-search__key { display: none; } }
.td-search__submit:focus {
  position: absolute !important;
  right: 0.25rem;
  top: 0.25rem;
  bottom: 0.25rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 4px;
  background: var(--td-navy);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.td-header__link {
  align-items: center;
  height: 2.375rem;
  padding: 0 0.75rem;
  border-radius: var(--td-radius);
  color: #fff;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.td-header__link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* The site name needs the full desktop width; below it the bar is logo + search. */
@media (max-width: 991.98px) {
  .td-brand__divider, .td-brand__name { display: none; }
}
.td-search-toggle { display: none; margin-left: auto; margin-right: -0.625rem; font-size: 1.25rem; }
/* Phones: search lives behind an icon so the sticky bar stays one 56px row. */
@media (max-width: 47.9988em) {
  .td-search-toggle { display: inline-grid; }
  .td-search { display: none; flex-basis: 100%; max-width: none; order: 3; margin: 0 0 0.25rem; }
  .td-header.is-search-open .td-search { display: block; }
  .td-header.is-search-open .td-search-toggle { background: rgba(255, 255, 255, 0.12); }
}

/* ---------- Layout ---------- */

.td-layout {
  flex: 1 0 auto;
  display: flex;
  align-items: flex-start;
}

.td-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2rem 1.25rem 4rem;
}
@media (min-width: 48em) { .td-main { padding: 2.5rem 2.5rem 5rem; } }
@media (min-width: 87.5em) { .td-main { padding-left: 3.5rem; padding-right: 3.5rem; } }

/* ---------- Sidebar ---------- */

.td-sidebar { --bs-offcanvas-width: 19rem; background: var(--td-bg); }
.td-sidebar .offcanvas-header { border-bottom: 1px solid var(--td-border-soft); }
.td-sidebar__title { margin: 0; font-size: 1rem; font-weight: 600; }

@media (min-width: 992px) {
  .td-sidebar {
    position: sticky;
    top: var(--td-header-h);
    flex: 0 0 var(--td-sidebar-w);
    width: var(--td-sidebar-w);
    height: calc(100vh - var(--td-header-h));
    overflow-y: auto;
    border-right: 1px solid var(--td-border-soft);
    background: var(--td-surface) !important; /* beats Bootstrap's transparent !important on .offcanvas-lg */
    scrollbar-width: thin;
    scrollbar-color: var(--td-border) transparent;
  }
  .td-sidebar .offcanvas-header { display: none; }
  /* Top padding matches .td-main so the first item sits level with the breadcrumb. */
  .td-sidebar .offcanvas-body { display: block; padding: 2.5rem 0.75rem 2.5rem; overflow: visible; }
}
@media (max-width: 991.98px) {
  .td-sidebar .offcanvas-body { padding: 0.75rem; }
  .td-sidebar .td-nav__row { align-items: center; }
  .td-sidebar .td-nav__link { display: flex; align-items: center; min-height: 2.75rem; }
  .td-sidebar .td-nav .td-nav__toggle { width: 2.75rem; height: 2.75rem; margin-top: 0; }
}

.td-nav { list-style: none; margin: 0; padding: 0; }
.td-nav--l2, .td-nav--l3 {
  /* The guide line sits under the parent's first letter; each level steps in 15px. */
  margin: 0.125rem 0 0.375rem 0.625rem;
  padding-left: 0.25rem;
  border-left: 1px solid var(--td-border);
}
/* Sections read as blocks: space between top-level items, children stay tight. */
.td-nav--l1 > .td-nav__item + .td-nav__item { margin-top: 0.375rem; }
.td-nav__row { display: flex; align-items: flex-start; gap: 0.125rem; }
.td-nav__link {
  flex: 1 1 auto;
  display: block;
  padding: 0.375rem 0.625rem;
  border-radius: var(--td-radius);
  color: var(--td-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.35;
  text-decoration: none;
}
.td-nav--l1 > .td-nav__item > .td-nav__row > .td-nav__link { font-weight: 600; color: var(--td-ink); }
.td-nav--l2 .td-nav__link, .td-nav--l3 .td-nav__link { padding-top: 0.3125rem; padding-bottom: 0.3125rem; font-size: 0.875rem; }
.td-nav--l2 .td-nav__toggle, .td-nav--l3 .td-nav__toggle { width: 1.75rem; height: 1.75rem; margin-top: 0; }
.td-nav__link:hover { background: var(--td-surface-strong); color: var(--td-ink); }
.td-nav__link.is-ancestor { color: var(--td-ink); }
.td-nav__link.is-current,
.td-nav__link.is-current:hover {
  background: var(--td-navy-tint-strong);
  color: var(--td-navy);
  font-weight: 600;
}
.td-nav__toggle {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: -0.0625rem;
  border: 0;
  border-radius: var(--td-radius);
  background: transparent;
  color: var(--td-ink-muted);
}
.td-nav__toggle:hover { background: var(--td-surface-strong); color: var(--td-ink); }
.td-nav__toggle .bi { transition: transform 0.2s var(--td-ease); font-size: 0.8125rem; }
.td-nav__toggle.collapsed .bi { transform: rotate(-90deg); }

/* ---------- Article layout ---------- */

.td-article-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--td-measure));
  gap: 3rem;
}
/* The rail appears when <main> itself has room, so it responds to text scaling
   as well as viewport width (container units follow the root font size). */
.td-main { container: td-main / inline-size; }
@container td-main (min-width: 56rem) {
  .td-article-layout { grid-template-columns: minmax(0, var(--td-measure)) 14rem; }
}
.td-rail { display: none; }
@container td-main (min-width: 56rem) {
  .td-rail { display: block; align-self: stretch; }
  .td-rail__sticky {
    position: sticky;
    top: calc(var(--td-header-h) + 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-height: calc(100vh - var(--td-header-h) - 4rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.td-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--td-ink-muted);
}
.td-breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  padding: 0 0.5rem;
  color: var(--td-border);
}
.td-breadcrumb a { color: var(--td-ink-muted); text-decoration: none; }
.td-breadcrumb a:hover { color: var(--td-navy); text-decoration: underline; text-underline-offset: 0.2em; }

.td-article__title {
  margin: 0 0 0.75rem;
  color: var(--td-ink);
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.375rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.td-article__summary {
  margin: 0 0 1.25rem;
  max-width: 40rem;
  color: var(--td-ink-soft);
  font-size: 1.1875rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.td-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--td-border-soft);
  color: var(--td-ink-muted);
  font-size: 0.875rem;
}
.td-meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }

.td-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.td-tag {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border: 1px solid var(--td-border);
  border-radius: 999px;
  background: var(--td-bg);
  color: var(--td-ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}
.td-tag:hover { border-color: var(--td-navy); color: var(--td-navy); background: var(--td-navy-tint); }

.td-article__banner { margin: 1.75rem 0 0; }
.td-article__banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-radius: var(--td-radius-lg);
  background: var(--td-surface);
}

.td-article > .td-callout { margin-top: 1.75rem; }

.td-article__footer { margin-top: 3.5rem; }

/* ---------- Prose ---------- */

.td-prose {
  margin-top: 1.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--td-ink);
  overflow-wrap: break-word;
  min-width: 0;
}
.td-prose > * + * { margin-top: 1.25rem; }
.td-prose :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6),
.td-article__summary { max-width: 36rem; }
.td-richtext > :first-child { margin-top: 0; }
.td-richtext > :last-child { margin-bottom: 0; }

.td-prose p:empty { display: none; }
.td-prose p, .td-prose ul, .td-prose ol, .td-prose table, .td-prose blockquote { margin: 0 0 1rem; }

.td-prose h2, .td-prose h3, .td-prose h4, .td-prose h5, .td-prose h6 {
  position: relative;
  color: var(--td-ink);
  font-weight: 650;
  line-height: 1.3;
  text-wrap: balance;
  scroll-margin-top: calc(var(--td-header-h) + 1rem);
}
.td-prose h2 { margin: 2.75rem 0 0.875rem; font-size: 1.5rem; letter-spacing: -0.008em; }
.td-prose h3 { margin: 2.25rem 0 0.75rem; font-size: 1.25rem; }
.td-prose h4 { margin: 1.75rem 0 0.5rem; font-size: 1.0625rem; }
.td-prose h5, .td-prose h6 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.td-prose > :first-child h2:first-child,
.td-prose > :first-child h3:first-child { margin-top: 0; }

.td-anchor {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  min-height: 1.5rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  color: var(--td-ink-muted);
  font-size: 0.875em;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.td-prose :is(h2, h3, h4):hover .td-anchor,
.td-anchor:focus-visible { opacity: 1; }
.td-anchor:hover { color: var(--td-navy); }
@media (hover: none) { .td-anchor { opacity: 0.6; } }

.td-prose a { overflow-wrap: anywhere; color: var(--td-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.td-prose a:hover { color: var(--td-navy-deep); text-decoration-thickness: 2px; }
/* Buttons placed in prose (CTA block) keep button styling, not link styling */
.td-prose a.td-button, .td-prose a.td-button:hover { color: #fff; text-decoration: none; }

.td-prose ul, .td-prose ol { padding-left: 1.5rem; }
.td-prose li + li { margin-top: 0.375rem; }
.td-prose li > ul, .td-prose li > ol { margin: 0.375rem 0 0; }

/* Top-level numbered lists read as procedures */
.td-richtext > ol {
  counter-reset: td-step;
  list-style: none;
  padding-left: 0;
}
.td-richtext > ol > li {
  counter-increment: td-step;
  position: relative;
  padding-left: 2.75rem;
  min-height: 1.75rem;
}
.td-richtext > ol > li + li { margin-top: 1rem; }
.td-richtext > ol > :is(ul, ol) { margin: 0.375rem 0 0 2.75rem; padding-left: 1.25rem; }
.td-richtext > ol > ul { list-style: disc; }
.td-richtext > ol > ol { list-style: decimal; }
.td-richtext > ol > li::before {
  content: counter(td-step) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  color: var(--td-navy);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.td-prose strong, .td-prose b { font-weight: 650; }

.td-prose code {
  padding: 0.125em 0.375em;
  border-radius: 4px;
  background: var(--td-code-bg);
  color: var(--td-ink);
  font-family: var(--td-mono);
  font-size: 0.875em;
  overflow-wrap: anywhere;
}

.td-prose kbd {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--td-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--td-bg);
  color: var(--td-ink);
  font-family: var(--td-mono);
  font-size: 0.8125em;
  line-height: 1.4;
  box-shadow: none;
}

.td-prose blockquote {
  padding: 0.75rem 1rem;
  border: 1px solid var(--td-border-soft);
  border-radius: var(--td-radius);
  background: var(--td-surface);
  color: var(--td-ink-soft);
}

.td-prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--td-border-soft); opacity: 1; }

.td-prose img { max-width: 100%; height: auto; border-radius: var(--td-radius); }
.td-prose .richtext-image.full-width { display: block; width: 100%; margin: 1.5rem 0; border: 1px solid var(--td-border-soft); }
.td-prose .richtext-image.left { float: left; margin: 0.25rem 1.25rem 1rem 0; max-width: 50%; }
.td-prose .richtext-image.right { float: right; margin: 0.25rem 0 1rem 1.25rem; max-width: 50%; }
.td-richtext::after { content: ""; display: table; clear: both; }
@media (max-width: 35.9988em) {
  .td-prose .richtext-image.left, .td-prose .richtext-image.right { float: none; max-width: 100%; margin: 1rem 0; }
}

.td-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.td-prose th, .td-prose td { padding: 0.5rem 0.75rem; border: 1px solid var(--td-border); text-align: left; vertical-align: top; }
.td-prose th { background: var(--td-surface); font-weight: 600; }

/* ---------- Code blocks (wagtailcodeblock / prism) ----------
   Retheme okaidia to the page palette: light field, ink tokens, navy accents. */

.td-codebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.25rem 0.375rem 0.25rem 1rem;
  border: 1px solid var(--td-border);
  border-bottom: 0;
  border-radius: var(--td-radius-lg) var(--td-radius-lg) 0 0;
  background: var(--td-navy-tint-strong);
  color: var(--td-navy);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.td-codebar + .code-toolbar { margin-top: 0 !important; }
.td-codebar + pre,
.td-codebar + .code-toolbar > pre,
.td-prose .td-codebar + pre[class*="language-"] {
  margin-top: 0 !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.td-prose pre,
.td-prose pre[class*="language-"] {
  position: relative;
  margin: 1.25rem 0;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-lg);
  background: var(--td-surface);
  color: var(--td-ink);
  font-family: var(--td-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  tab-size: 4;
  text-shadow: none;
}
.td-prose pre code,
.td-prose code[class*="language-"] {
  padding: 0;
  background: none;
  color: var(--td-ink);
  font-family: var(--td-mono);
  font-size: inherit;
  text-shadow: none;
  overflow-wrap: normal;
  white-space: pre;
}
.td-prose pre.line-numbers:not(:has(.line-numbers-rows)) { padding-left: 1rem; }
.td-prose .line-numbers .line-numbers-rows { border-right-color: var(--td-border); }
.td-prose .line-numbers-rows > span::before { color: var(--td-ink-muted); }

.td-prose .token.comment, .td-prose .token.prolog, .td-prose .token.doctype, .td-prose .token.cdata { color: #59636e; font-style: italic; }
.td-prose .token.punctuation, .td-prose .token.operator { color: #3d444d; background: none; }
.td-prose .token.keyword, .td-prose .token.important, .td-prose .token.atrule { color: #a3113e; }
.td-prose .token.string, .td-prose .token.char, .td-prose .token.attr-value, .td-prose .token.url { color: #0a3069; }
.td-prose .token.function, .td-prose .token.class-name { color: #213c5f; font-weight: 600; }
.td-prose .token.number, .td-prose .token.boolean, .td-prose .token.constant, .td-prose .token.property, .td-prose .token.variable, .td-prose .token.tag, .td-prose .token.selector, .td-prose .token.attr-name, .td-prose .token.builtin { color: #0550ae; }

.td-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.875rem;
  padding: 0 0.625rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--td-ink-soft);
  font-family: var(--td-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.td-copy:hover { background: var(--td-bg); border-color: var(--td-border); color: var(--td-ink); }
.td-copy.is-copied { color: #1a7f37; }
/* The plugin toolbar duplicates our copy button */
.td-prose div.code-toolbar > .toolbar { display: none; }

/* ---------- Callouts ---------- */

.td-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--td-note-border);
  border-radius: var(--td-radius-lg);
  background: var(--td-note-bg);
  color: var(--td-ink);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.td-callout__icon { color: var(--td-note-icon); font-size: 1.1875rem; line-height: 1.35; }
.td-callout__title { margin: 0 0 0.25rem; font-size: 0.9375rem; font-weight: 650; line-height: 1.5; color: var(--td-ink); }
.td-callout__body > :last-child { margin-bottom: 0; }
.td-callout__body p { margin: 0 0 0.5rem; }
.td-callout--warning { border-color: var(--td-warn-border); background: var(--td-warn-bg); }
.td-callout--warning .td-callout__icon { color: var(--td-warn-icon); }
.td-callout a { color: var(--td-navy); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------- Accordion (details/summary) ---------- */

.td-accordion__heading { margin-bottom: 0.75rem; }
.td-accordion { border: 1px solid var(--td-border); border-radius: var(--td-radius-lg); overflow: hidden; }
.td-accordion__item + .td-accordion__item { border-top: 1px solid var(--td-border); }
.td-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.125rem;
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  transition: background-color 0.15s;
}
.td-accordion__summary::-webkit-details-marker { display: none; }
.td-accordion__summary:hover { background: var(--td-surface); }
.td-accordion__summary:focus-visible { outline-offset: -2px; border-radius: 0; }
.td-accordion__chevron { flex: 0 0 auto; color: var(--td-ink-muted); transition: transform 0.2s var(--td-ease); }
.td-accordion__item[open] > .td-accordion__summary { background: var(--td-surface); }
.td-accordion__item[open] .td-accordion__chevron { transform: rotate(180deg); }
.td-accordion__panel { padding: 0.25rem 1.125rem 1rem; background: var(--td-surface); }
.td-accordion__panel > :last-child { margin-bottom: 0; }

/* ---------- Cards (link list) ---------- */

.td-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.td-prose .td-cards > li + li { margin-top: 0; }
.td-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-lg);
  background: var(--td-bg);
  transition: border-color 0.15s;
}
.td-card:hover { border-color: var(--td-navy); }
.td-card__image { order: -1; display: block; width: calc(100% + 2.25rem); max-width: none; height: auto; margin: -1rem -1.125rem 1rem; border-radius: var(--td-radius-lg) var(--td-radius-lg) 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
.td-prose .td-card__title { margin: 0 0 0.375rem; font-size: 1rem; line-height: 1.4; }
.td-card__link { color: var(--td-navy) !important; text-decoration: none !important; }
.td-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.td-card__link:focus-visible { outline: none; }
.td-card:has(.td-card__link:focus-visible) { outline: 2px solid var(--td-focus); outline-offset: 2px; }
.td-card__text { margin: 0; color: var(--td-ink-soft); font-size: 0.9375rem; line-height: 1.55; }

.td-cta { padding: 1.5rem; border: 1px solid var(--td-border); border-radius: var(--td-radius-lg); background: var(--td-surface); }
.td-cta__title { margin-top: 0 !important; }

/* ---------- On this page ---------- */

.td-toc__title { margin: 0 0 0.625rem; font-size: 0.8125rem; font-weight: 650; color: var(--td-ink); }
.td-toc__list { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.4; }
.td-toc__list li + li { margin-top: 0.125rem; }
.td-toc__list a {
  display: block;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--td-radius);
  color: var(--td-ink-muted);
  text-decoration: none;
  transition: color 0.15s, background-color 0.2s var(--td-ease);
}
.td-toc__list .is-sub a { padding-left: 1.375rem; font-size: 0.8125rem; }
.td-toc__list a:hover { color: var(--td-ink); background: var(--td-surface); }
.td-toc__list a[aria-current="true"] { color: var(--td-navy); background: var(--td-navy-tint); font-weight: 600; }

/* ---------- Help box ---------- */

.td-help {
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-lg);
  background: var(--td-surface);
  font-size: 0.9375rem;
}
.td-help__title { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 650; }
.td-help__lede { margin: 0 0 1rem; color: var(--td-ink-soft); }
.td-help__contact { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.td-help__contact li { display: inline-flex; align-items: center; gap: 0.5rem; }
.td-help__contact .bi { color: var(--td-navy); }
.td-help__contact a { color: var(--td-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.td-help__hours { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding-top: 0.875rem; border-top: 1px solid var(--td-border-soft); color: var(--td-ink-soft); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.td-help__hours div { display: flex; gap: 0.375rem; }
.td-help__hours dt { font-weight: 600; color: var(--td-ink); }
.td-help__hours dd { margin: 0; }

.td-help--compact { padding: 1rem 1.125rem; font-size: 0.875rem; }
.td-help--compact .td-help__title { font-size: 0.9375rem; }
.td-help--compact .td-help__lede { margin-bottom: 0.75rem; }
.td-help--compact .td-help__contact { flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; }
.td-help--compact .td-help__hours { flex-direction: column; gap: 0.125rem; font-size: 0.8125rem; }
.td-help--compact .td-help__hours div { justify-content: space-between; }

/* ---------- Footer ---------- */

.td-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--td-border-soft);
  background: var(--td-surface);
  color: var(--td-ink-soft);
  font-size: 0.875rem;
}
.td-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.25rem 1.25rem;
}
@media (min-width: 48em) { .td-footer__inner { padding: 1.25rem 2.5rem; } }
.td-footer__org { margin: 0; }
.td-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.td-footer a { color: var(--td-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- Single-column pages (search, tags, 404, flex) ---------- */

.td-page { max-width: var(--td-measure); }
.td-page > .td-help, .td-page > .td-pagination + .td-help, .td-page .td-results + .td-help { margin-top: 2.5rem; }
.td-page__back { margin-top: 1.5rem; }
.td-page__topics { margin-top: 3rem; }
.td-page__back a, .td-empty a { color: var(--td-navy); text-decoration: underline; text-underline-offset: 0.2em; }
.td-page .td-article__header { border-bottom: 0; }
.td-page .td-article__header .td-article__summary { margin-bottom: 0; }

.td-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--td-ink);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
}
.td-count {
  padding: 0 0.4375rem;
  border-radius: 4px;
  background: var(--td-surface-strong);
  color: var(--td-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
}

/* Buttons */
.td-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--td-navy);
  border-radius: var(--td-radius);
  background: var(--td-navy);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.td-button:hover { background: var(--td-navy-deep); border-color: var(--td-navy-deep); color: #fff; }
.td-button--quiet { height: 2.25rem; padding: 0 0.875rem; background: var(--td-bg); border-color: var(--td-border); color: var(--td-ink); font-weight: 500; }
.td-button--quiet:hover { background: var(--td-surface); border-color: var(--td-ink-muted); color: var(--td-ink); }

/* Large search field (home, search, 404) */
.td-bigsearch {
  position: relative;
  display: flex;
  gap: 0.5rem;
  max-width: 40rem;
  margin: 1.5rem 0 0;
}
.td-bigsearch__icon {
  position: absolute;
  left: 1rem;
  top: 1.375rem;
  transform: translateY(-50%);
  color: var(--td-ink-muted);
  font-size: 1.0625rem;
  pointer-events: none;
}
.td-bigsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.75rem;
  padding: 0 1rem 0 2.75rem;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  background: var(--td-bg);
  color: var(--td-ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s;
}
.td-bigsearch__input::placeholder { color: var(--td-ink-muted); }
.td-bigsearch__input:hover { border-color: var(--td-ink-muted); }
.td-bigsearch__input:focus { outline: 2px solid var(--td-focus); outline-offset: 1px; border-color: var(--td-focus); }
@media (max-width: 29.9988em) {
  .td-bigsearch { flex-direction: column; }
  .td-bigsearch .td-button { width: 100%; }
}

/* Results */
.td-results { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--td-border-soft); }
.td-result { padding: 1.125rem 0; border-bottom: 1px solid var(--td-border-soft); }
.td-result__title { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.td-result__title a { color: var(--td-navy); text-decoration: none; }
.td-result__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.td-result__summary { margin: 0; max-width: 36rem; color: var(--td-ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.td-result__path { display: flex; align-items: center; gap: 0.375rem; margin: 0.375rem 0 0; color: var(--td-ink-muted); font-size: 0.8125rem; }

.td-empty { margin-top: 2rem; padding: 1.5rem; border: 1px dashed var(--td-border); border-radius: var(--td-radius-lg); color: var(--td-ink-soft); }
.td-empty p { margin: 0; max-width: 36rem; }
.td-empty__title { margin: 0 0 0.375rem; color: var(--td-ink); font-size: 1.0625rem; font-weight: 600; }
.td-empty--inline { padding: 1rem 1.25rem; font-size: 0.9375rem; }

.td-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.5rem; }
.td-pagination__status { color: var(--td-ink-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.td-tagcloud { margin-top: 1.5rem; }
.td-tagcloud__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  margin-left: -0.625rem;
  border-radius: var(--td-radius);
  color: var(--td-ink);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.td-tagcloud__summary::-webkit-details-marker { display: none; }
.td-tagcloud__summary:hover { background: var(--td-surface); }
.td-tagcloud__summary .bi { color: var(--td-ink-muted); font-size: 0.8125rem; transition: transform 0.2s var(--td-ease); }
.td-tagcloud[open] .td-tagcloud__summary .bi { transform: rotate(180deg); }
.td-tagcloud .td-tags { margin-top: 0.75rem; }
.td-tag[aria-current="page"] { border-color: var(--td-navy); background: var(--td-navy); color: #fff; }

/* ---------- Section index (listing pages) ---------- */

.td-index { margin-top: 2.5rem; }
.td-index__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.td-index__head .td-section-title { margin: 0; }
.td-filter { position: relative; flex: 0 1 17rem; }
.td-filter__icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--td-ink-muted); font-size: 0.875rem; pointer-events: none; }
.td-filter__input {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.75rem 0 2.125rem;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  background: var(--td-bg);
  color: var(--td-ink);
  font: inherit;
  font-size: 0.875rem;
}
.td-filter__input:focus { outline: 2px solid var(--td-focus); outline-offset: 1px; border-color: var(--td-focus); }
@media (max-width: 35.9988em) { .td-filter { flex-basis: 100%; } }

/* ---------- Section cards (listing pages, no imagery needed) ---------- */

@container td-main (min-width: 56rem) {
  .td-article-layout--wide { grid-template-columns: minmax(0, 58rem) 14rem; }
}

.td-sections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.td-sections[hidden] { display: none; }
.td-sec {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem 1rem;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius-lg);
  background: var(--td-bg);
  transition: border-color 0.15s;
}
.td-sec[hidden] { display: none; }
.td-sec:hover, .td-sec:focus-within { border-color: var(--td-ink-muted); }
.td-sec__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.td-sec__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--td-radius);
  background: var(--td-navy-tint);
  color: var(--td-navy);
  font-size: 1rem;
}
.td-sec__title { margin: 0.25rem 0 0; font-size: 1rem; font-weight: 650; line-height: 1.4; text-wrap: balance; }
.td-sec__title a { color: var(--td-ink); text-decoration: none; }
.td-sec__title a:hover { color: var(--td-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.td-sec__summary {
  margin: 0;
  color: var(--td-ink-soft);
  font-size: 0.875rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.td-sec__links { margin: 0; padding: 0.625rem 0 0; list-style: none; border-top: 1px solid var(--td-border-soft); font-size: 0.875rem; line-height: 1.4; }
.td-sec__links li + li { margin-top: 0.375rem; }
.td-sec__links a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--td-navy); text-decoration: none; }
.td-sec__links a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.td-sec__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: auto 0 0;
  padding-top: 0.25rem;
  color: var(--td-ink-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.td-sec__all { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--td-navy); font-weight: 600; text-decoration: none; }
.td-sec__all .bi { transition: transform 0.2s var(--td-ease); }
.td-sec__all:hover .bi { transform: translateX(2px); }
.td-sec__dot { color: var(--td-border); }

/* Single articles in a section: a compact list after the section cards */
.td-leaves__title { margin: 2rem 0 0.75rem; color: var(--td-ink-soft); font-size: 0.875rem; font-weight: 650; }
.td-leaves { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--td-border-soft); }
.td-sections + .td-leaves { margin-top: 1.5rem; }
.td-leaf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--td-border-soft);
}
.td-leaf[hidden] { display: none; }
.td-leaf__icon { color: var(--td-ink-muted); font-size: 0.9375rem; transform: translateY(1px); }
.td-leaf { position: relative; }
.td-leaf__title { color: var(--td-navy); font-weight: 600; line-height: 1.4; text-decoration: none; }
.td-leaf__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.td-leaf:has(.td-leaf__title:focus-visible) { outline: 2px solid var(--td-focus); outline-offset: 2px; }
.td-leaf__title:focus-visible { outline: none; }
.td-leaf__title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.td-leaf__summary { margin: 0.125rem 0 0; color: var(--td-ink-soft); font-size: 0.875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-leaf__date { color: var(--td-ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 35.99em) {
  .td-leaf { grid-template-columns: auto minmax(0, 1fr); }
  .td-leaf__date { grid-column: 2; }
}

/* ---------- Home ---------- */

.td-home > :not(.td-home__header) { max-width: 72rem; }

/* The front door opens on a navy band that bleeds to the edges of <main>. */
.td-home__header {
  margin: -2rem -1.25rem 0;
  padding: 2.25rem 1.25rem 2.5rem;
  background: var(--td-navy);
  color: #fff;
}
@media (min-width: 48em) { .td-home__header { margin: -2.5rem -2.5rem 0; padding: 3rem 2.5rem 3.25rem; } }
@media (min-width: 87.5em) { .td-home__header { margin-left: -3.5rem; margin-right: -3.5rem; padding-left: 3.5rem; padding-right: 3.5rem; } }
.td-home__header > * { max-width: 72rem; }
.td-home__header .td-article__title { color: #fff; }
.td-home__header .td-article__summary { color: rgba(255, 255, 255, 0.86); }
.td-home__header .td-article__summary p { margin: 0; }
.td-home__header :focus-visible { outline-color: #fff; }
.td-home__header .td-bigsearch__input { border-color: transparent; }
.td-home__header .td-bigsearch__input:hover { border-color: rgba(255, 255, 255, 0.6); }
.td-home__header .td-bigsearch__input:focus { outline-color: #fff; border-color: #fff; }
.td-home__header .td-button { background: #fff; border-color: #fff; color: var(--td-navy); }
.td-home__header .td-button:hover { background: var(--td-navy-tint); border-color: var(--td-navy-tint); color: var(--td-navy-deep); }
.td-home__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
@container td-main (min-width: 52rem) { .td-home__body { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; } }
.td-home__aside { display: flex; flex-direction: column; gap: 1rem; }
@container td-main (min-width: 36rem) and (max-width: 51.99rem) {
  .td-home__aside { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}

.td-doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2rem 2.5rem;
  align-items: start;
}
.td-door__title { margin: 0 0 0.5rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--td-border); font-size: 1.125rem; font-weight: 650; }
.td-door__list { margin: 0; padding: 0; list-style: none; }
.td-door__link {
  display: block;
  padding: 0.625rem 0.75rem;
  margin: 0 -0.75rem;
  border-radius: var(--td-radius);
  text-decoration: none;
  transition: background-color 0.15s;
}
a.td-door__link:hover { background: var(--td-surface); }
.td-door__name { display: block; color: var(--td-navy); font-weight: 600; line-height: 1.4; }
a.td-door__link:hover .td-door__name { text-decoration: underline; text-underline-offset: 0.2em; }
.td-door__link--static .td-door__name { color: var(--td-ink-soft); font-weight: 500; }
.td-door__text { display: block; margin-top: 0.125rem; color: var(--td-ink-soft); font-size: 0.875rem; line-height: 1.5; }

.td-home__content { max-width: var(--td-measure); margin-top: 3rem; }

.td-home__lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--td-border-soft);
}
@media (min-width: 992px) { .td-home__lower { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; } }

.td-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.td-topic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--td-border);
  border-radius: var(--td-radius);
  color: var(--td-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.td-topic .bi { color: var(--td-ink-muted); transition: transform 0.2s var(--td-ease), color 0.15s; }
.td-topic:hover { border-color: var(--td-navy); background: var(--td-navy-tint); color: var(--td-navy); }
.td-topic:hover .bi { color: var(--td-navy); transform: translateX(2px); }

@media (min-width: 992px) {
  .td-home__topics { display: none; }
  .td-home__lower { grid-template-columns: minmax(0, 1fr); }
  .td-home__lower .td-recent { max-width: 40rem; }
}
.td-recent { margin: 0; padding: 0; list-style: none; }
.td-recent li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--td-border-soft); font-size: 0.9375rem; }
.td-recent a { color: var(--td-navy); text-decoration: none; }
.td-recent a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.td-recent time { flex: 0 0 auto; color: var(--td-ink-muted); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

/* ---------- Glass finish (buttons, interactive list rows) ----------
   Translucent fills over the page, a sheen on the upper half, a lit top edge,
   and a soft offset drop. Solid fallbacks when transparency is reduced. */

/* Buttons */
.td-button {
  background: var(--td-glass-sheen), var(--td-navy);
  border-color: rgba(22, 41, 65, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--td-glass-drop);
  transition: background-color 0.15s, box-shadow 0.2s var(--td-ease), transform 0.2s var(--td-ease);
}
.td-button:hover {
  background: var(--td-glass-sheen), var(--td-navy-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--td-glass-drop-hover);
  transform: translateY(-1px);
}
.td-button:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--td-glass-drop); }
.td-button--quiet {
  background: var(--td-glass-sheen-soft), rgba(255, 255, 255, 0.6);
  border-color: var(--td-border);
  box-shadow: var(--td-glass-edge), 0 1px 2px rgba(22, 41, 65, 0.08);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
}
.td-button--quiet:hover { background: var(--td-glass-sheen-soft), rgba(246, 248, 250, 0.8); box-shadow: var(--td-glass-edge), var(--td-glass-drop); }
.td-home__header .td-button {
  background: var(--td-glass-sheen), #fff;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--td-glass-edge), 0 2px 6px rgba(22, 41, 65, 0.3), 0 10px 24px -10px rgba(22, 41, 65, 0.6);
}
.td-home__header .td-button:hover { background: var(--td-glass-sheen), var(--td-navy-tint); }
.td-copy { box-shadow: none; }
.td-copy:hover {
  background: var(--td-glass-sheen-soft), rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: var(--td-glass-edge), 0 1px 3px rgba(22, 41, 65, 0.14);
}

/* Header search: frosted field on navy */
.td-search__input {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
}
.td-search__input:focus { background: #fff; box-shadow: 0 2px 8px rgba(22, 41, 65, 0.35); }
/* backdrop-filter gives the field its own layer; keep the icon and key hint above it */
.td-search__icon, .td-search__key { z-index: 1; }

/* Interactive list rows: glass on hover, navy-tinted glass for "you are here" */
.td-nav__link:hover,
.td-toc__list a:hover,
a.td-door__link:hover {
  background: var(--td-glass-sheen-soft), rgba(234, 238, 242, 0.7);
  box-shadow: var(--td-glass-edge), 0 1px 2px rgba(22, 41, 65, 0.08);
}
.td-nav__link.is-current,
.td-nav__link.is-current:hover,
.td-toc__list a[aria-current="true"] {
  background: var(--td-glass-sheen-soft), rgba(221, 229, 239, 0.9);
  box-shadow: var(--td-glass-edge), inset 0 0 0 1px rgba(33, 60, 95, 0.12), 0 1px 2px rgba(22, 41, 65, 0.08), 0 4px 10px -6px rgba(22, 41, 65, 0.22);
}
.td-leaf { border-radius: var(--td-radius); transition: background-color 0.15s, box-shadow 0.2s var(--td-ease); }
.td-leaf:hover { background: var(--td-glass-sheen-soft), rgba(246, 248, 250, 0.85); box-shadow: var(--td-glass-edge), 0 1px 2px rgba(22, 41, 65, 0.08); }
.td-nav__link, .td-toc__list a, a.td-door__link { transition: background-color 0.15s, box-shadow 0.2s var(--td-ease), color 0.15s; }

@media (prefers-reduced-transparency: reduce) {
  .td-button { background: var(--td-navy); box-shadow: none; }
  .td-button:hover { background: var(--td-navy-deep); }
  .td-button--quiet, .td-button--quiet:hover { background: var(--td-bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .td-home__header .td-button { background: #fff; box-shadow: none; }
  .td-search__input { background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .td-nav__link:hover, .td-toc__list a:hover, a.td-door__link:hover, .td-leaf:hover { background: var(--td-surface-strong); box-shadow: none; }
  .td-nav__link.is-current, .td-nav__link.is-current:hover, .td-toc__list a[aria-current="true"] { background: var(--td-navy-tint-strong); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .td-button:hover { transform: none; }
}

/* ---------- Print ---------- */

@media print {
  .td-header, .td-sidebar, .td-rail, .td-footer, .td-copy, .td-anchor, .td-skip-link { display: none !important; }
  .td-codebar { display: none; }
  .td-codebar + pre { border-radius: var(--td-radius-lg) !important; }
  .td-main { padding: 0; }
  .td-article-layout { display: block; }
  .td-accordion__panel { display: block; }
}

/* Callout and accordion text fills its own field; the prose measure applies to the main column only. */
.td-prose :is(.td-callout, .td-accordion, .td-cta, .td-cards) :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) { max-width: none; }
/* Keep the step rhythm after a stray list saved directly inside a procedure <ol>. */
.td-richtext > ol > :is(ul, ol) + li { margin-top: 1rem; }