/* Patternbook custom styles */

/* Improve readability for non-technical audience */
/* Override mdbook's :root { font-size: 62.5% } which sets 1rem = 10px.
   We set the content area directly in px to avoid the rem trap.
   Width comes from --content-max-width (theme-template/css/variables.css)
   so a single token controls the measure across all books. */

.content main {
  max-width: var(--content-max-width);
  font-size: 18px;
  line-height: 1.6;
}

/* Override mdbook's .content p { line-height: 1.45em } which is more specific
   than our .content main rule and wins the cascade. */
.content main p {
  line-height: 1.6;
}

/* Softer code block styling */
pre > code {
  font-size: 0.9em;
}

/* Admonition tweaks */
.admonition {
  border-radius: 6px;
}

/* Reader mode needs an admonition's title and opening text in one paragraph.
   mdbook-admonish gives .admonition-title display:flex and bolds the whole
   element, which would turn every link and emphasis run in that combined
   paragraph into a separate column. Restore normal prose flow while retaining
   the colored title band and icon supplied by the admonition type. */
.content blockquote.admonition > p.reader-admonition-lead {
  display: block;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.content .reader-admonition-lead > .admonition-label {
  display: block;
  margin-block-end: 0.35em;
  font-weight: 700;
}

/* The heading owns its visible text; the permalink is a secondary control.
   Reader products discard author CSS and may show the marker, while the normal
   page reveals it with its heading on pointer devices. Keep it discoverable on
   touch devices and for keyboard focus. */
.content article.bartley-article
  :is(h1, h2, h3, h4, h5, h6)
  > a.heading-permalink {
  display: inline-block;
  margin-inline-start: 0.2em;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .content article.bartley-article
    :is(h1, h2, h3, h4, h5, h6)
    > a.heading-permalink {
    opacity: 0;
    transition: opacity 120ms ease-out;
  }

  .content article.bartley-article
    :is(h1, h2, h3, h4, h5, h6):hover
    > a.heading-permalink,
  .content article.bartley-article
    :is(h1, h2, h3, h4, h5, h6)
    > a.heading-permalink:focus,
  .content article.bartley-article
    :is(h1, h2, h3, h4, h5, h6)
    > a.heading-permalink:focus-visible {
    opacity: 0.65;
  }

  .content article.bartley-article
    :is(h1, h2, h3, h4, h5, h6)
    > a.heading-permalink:hover {
    opacity: 1;
  }
}

@media (hover: none), (pointer: coarse) {
  .content article.bartley-article
    :is(h1, h2, h3, h4, h5, h6)
    > a.heading-permalink {
    opacity: 0.65;
  }
}

/* Reader-safe lists. The response uses paragraph-first ARIA list/listitem
   containers because Safari and Chrome Reader may discard native ul/ol
   subtrees. Literal markers survive extraction; these rules recreate the
   familiar list rhythm on the normal page without JavaScript. */
.content .reader-list {
  margin: 1em 0;
  padding-inline-start: 2em;
}

.content .reader-list .reader-list {
  margin: 0.4em 0;
}

.content .reader-list-item {
  margin: 0.35em 0;
}

.content .reader-list-line {
  margin: 0.35em 0;
  padding-inline-start: 1.5em;
}

.content .reader-list-marker {
  display: inline-block;
  /* min-width, not width: a two-digit marker plus its non-breaking space needs
     27.31px where 1.5em allows 27, so a fixed width wrapped the following pill
     onto its own line from item 10 onward. Single-digit markers are unaffected
     — they measure exactly 1.5em either way — so the hanging indent still
     aligns. */
  min-width: 1.5em;
  margin-inline-start: -1.5em;
  font-variant-numeric: tabular-nums;
}

/* Highlight table rows that use bold (e.g., "this is us" in comparison tables) */
.content table tbody tr:has(strong) {
  background: rgba(50, 150, 220, 0.25);
}

/* Ad placement — single, tasteful, non-intrusive */
.patternbook-ad {
  margin: 1.5em 0;
  padding: 0.75em 1em;
  border: 1px solid var(--surface);
  border-radius: 6px;
  background: var(--surface);
  font-size: 0.85rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.patternbook-ad.loaded {
  opacity: 1;
}

/* EthicalAds overrides — keep their styling minimal */
.patternbook-ad [data-ea-publisher] {
  margin: 0 auto;
}

/* Carbon Ads overrides */
.patternbook-ad #carbonads {
  max-width: 330px;
  margin: 0 auto;
  font-family: inherit;
}

.patternbook-ad #carbonads a {
  color: var(--links);
  text-decoration: none;
}

.patternbook-ad #carbonads .carbon-poweredby {
  font-size: 0.75rem;
  opacity: 0.6;
}

/* Hide ad container entirely when empty (no ad served) */
.patternbook-ad:empty {
  display: none;
}

/* Mobile: ad takes full width */
@media (max-width: 768px) {
  .patternbook-ad {
    margin: 1em -0.5em;
    border-radius: 0;
  }
}

/* House promo — first-party curator units (policies/house-promo.md).
   Injected before first paint by theme/promo.js from the generated
   theme/promo-config.js; a disabled book ships zero promo bytes in the DOM.
   Styled as book chrome via the theme variable system, so contrast holds in
   Bartley Light/Dark and degrades gracefully in the five stock themes.
   Sizing in px (the 62.5% root font-size trap — never rem here). */

.bartley-promo-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 44px 8px 16px;
  background: var(--surface);
  color: var(--fg);
  border-bottom: 1px solid var(--table-border-color);
  font-size: 14px;
  line-height: 1.4;
}

.bartley-promo-bar-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bartley-promo-bar-cta {
  flex: none;
  color: var(--links);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 2px 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.bartley-promo-bar-cta:hover {
  opacity: 0.75;
}

.bartley-promo-bar-dismiss {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.bartley-promo-bar-dismiss:hover,
.bartley-promo-bar-dismiss:focus {
  opacity: 1;
}

/* Mobile: the bar may never take more than 15% of the viewport. */
@media (max-width: 768px) {
  .bartley-promo-bar {
    max-height: 15vh;
    overflow: hidden;
    font-size: 13px;
    padding: 6px 40px 6px 10px;
  }
}

/* In-content + end-of-article units — bordered/tinted, clearly distinct from
   body text yet crafted as part of the book. */
.bartley-promo {
  margin: 28px 0;
  padding: 16px 20px;
  border: 1px solid var(--table-border-color);
  border-left: 3px solid var(--links);
  border-radius: 6px;
  background: var(--surface);
}

.bartley-promo-kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 6px;
}

.bartley-promo-headline {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.bartley-promo .bartley-promo-body {
  margin: 4px 0 10px;
  font-size: 15px;
  line-height: 1.5;
}

.bartley-promo-actions {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}

.bartley-promo-cta {
  color: var(--links);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 4px 14px;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.15s ease;
}

.bartley-promo-cta:hover {
  opacity: 0.75;
}

.bartley-promo-secondary {
  font-size: 13px;
  opacity: 0.7;
}

/* The CTA is a bordered pill, not body prose — it must not pick up the
   Bartley content-link underline (chrome.css styles
   `.bartley-* .content a:link` at higher specificity than a bare class). */
.bartley-light .content a.bartley-promo-cta,
.bartley-dark .content a.bartley-promo-cta,
.content a.bartley-promo-cta,
.bartley-light .content a.bartley-promo-cta:hover,
.bartley-dark .content a.bartley-promo-cta:hover {
  text-decoration: none;
  color: var(--links);
}

@media (prefers-reduced-motion: reduce) {
  .bartley-promo-bar-cta,
  .bartley-promo-cta {
    transition: none;
  }
}

/* Promos are site chrome, never print content. */
@media print {
  .bartley-promo,
  .bartley-promo-bar {
    display: none !important;
  }
}

/* Cover page wrapper — design tokens for the in-book cover image embed.
   Used by every book's src/cover.md via `<div class="bartley-cover">`. */
:root {
  --bartley-cover-top-padding: 10px;
}
.bartley-cover {
  text-align: center;
  padding-top: var(--bartley-cover-top-padding);
}
.bartley-cover img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

/* Cover page brag cards — deploy-refreshed article counts.
   Row 1: total Articles card (wide). Row 2: one card per article type. Most
   books use the default three-type schema (and the four-type variants), whose
   cards grow to fill the single breakdown row. Books that declare enough types
   to wrap the row (spirit carries seven) get the `--many` modifier from
   bin/sync-cover-counts: the cards become a fixed width and wrap onto centered
   rows, so a partial last row sits centered under the row above instead of
   left-aligned, and the labels never compress mid-word. */
.brag-cards {
  margin: 1.5em 0 2em;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brag-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.brag-row-breakdown {
  flex-wrap: wrap;
}

/* Many-type books: equal fixed-width cards that wrap onto centered rows.
   148px keeps spirit's longest label ("Experiences") on one line while still
   fitting four cards across the reading column, so seven types lay out 4 + 3
   with the short row centered. */
.brag-row-breakdown--many .brag-card {
  flex: 0 1 148px;
  box-sizing: border-box;
}

.brag-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 16px 12px;
  border: 1px solid var(--table-border-color);
  border-radius: 8px;
  background: var(--quote-bg);
  text-align: center;
  color: var(--fg);
}

.brag-card-total {
  flex: 0 1 100%;
  max-width: 560px;
  padding: 20px 16px;
}

.brag-number {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fg);
}

.brag-card-total .brag-number {
  font-size: 52px;
}

.brag-label {
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.85;
}

/* Narrow viewports: shrink padding/typography. Default (≤4-type) breakdowns
   stay on one line; many-type breakdowns keep wrapping at a smaller fixed
   card width so they pack a few cards per centered row at the 10px label. */
@media (max-width: 560px) {
  .brag-row {
    gap: 8px;
  }
  .brag-row-breakdown {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .brag-row-breakdown .brag-card {
    padding: 10px 6px;
  }
  .brag-row-breakdown--many {
    flex-wrap: wrap;
  }
  .brag-row-breakdown--many .brag-card {
    flex: 0 1 96px;
  }
  .brag-card-total {
    padding: 14px 12px;
  }
  .brag-number {
    font-size: 24px;
  }
  .brag-card-total .brag-number {
    font-size: 36px;
  }
  .brag-label {
    font-size: 10px;
    letter-spacing: 0.03em;
  }
}

/* Article Map type legend — the three-column key (symbol, type, definition)
   injected into src/introduction/article_map.md by bin/sync-type-legend. The
   symbol column carries the same monochrome SVG glyph the graph paints on its
   nodes (theme-template/graph.js createLegendIcon), filled with the type color,
   so the table reads as a faithful key to the interactive graph it sits above.
   Built from book.config.yaml: type_declarations, so it can never drift from
   the taxonomy. */
.content .type-legend {
  margin: 1.5em 0 1.75em;
  overflow-x: auto;
}

.content .type-legend table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.content .type-legend th,
.content .type-legend td {
  padding: 8px 12px;
  border: 1px solid var(--table-border-color);
  vertical-align: middle;
  text-align: left;
}

.content .type-legend thead th {
  background: var(--table-header-bg);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content .type-legend th.type-legend-symbol-col,
.content .type-legend td.type-legend-symbol {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}

.content .type-legend td.type-legend-name {
  font-weight: 600;
  white-space: nowrap;
}

.content .type-legend-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
}

/* Article Map subject outline — the per-section, per-subsection outline injected
   into src/introduction/article_map.md by bin/sync-subject-outline. It sits
   above the type legend and makes the declared subsection ontology — including
   its deliberately-empty cells — visible reader-facing content. A populated
   subsection shows a count; a declared-but-empty subsection shows an italic,
   muted "forthcoming" label (subject-outline-forthcoming), so the empty cell
   reads as an intentional plan, not a gap. Token-driven, like the type legend. */
.content .subject-outline {
  margin: 1.5em 0 1.75em;
  overflow-x: auto;
}

.content .subject-outline table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.content .subject-outline th,
.content .subject-outline td {
  padding: 8px 12px;
  border: 1px solid var(--table-border-color);
  vertical-align: middle;
  text-align: left;
}

.content .subject-outline thead th {
  background: var(--table-header-bg);
  font-size: 0.82em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content .subject-outline tr.subject-outline-section th {
  background: var(--table-header-bg);
  font-weight: 600;
}

.content .subject-outline td.subject-outline-subsection {
  padding-left: 1.75em;
}

.content .subject-outline td.subject-outline-count {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.content .subject-outline-forthcoming {
  font-style: italic;
  color: var(--icons);
  opacity: 0.6;
}

/* Related Articles: linked paragraph list items are the semantic source.
   CSS presents them as rows; JavaScript progressively adds sorting controls. */
.content .article-connections {
  width: 100%;
  margin: 0 0 1.5em;
}

.content .article-connections-header {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-top: 0.5em;
  padding: 6px 10px;
  border: 1px solid var(--table-border-color);
  background: var(--table-header-bg);
  font-size: 0.82em;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content .article-connections-list {
  border-inline-start: 1px solid var(--table-border-color);
  border-inline-end: 1px solid var(--table-border-color);
}

.content .article-connection {
  border-bottom: 1px solid var(--table-border-color);
}

.content p.article-connection-line {
  display: block;
  margin: 0;
  padding: 8px 12px;
  overflow-wrap: anywhere;
}

.content .article-connection:nth-child(even) {
  background: var(--table-alternate-bg);
}

.content button.article-connection-sort {
  background: none;
  border: 0;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 0 0 0 0.25em;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.content button.article-connection-sort:hover {
  background: var(--table-alternate-bg);
}

.content button.article-connection-sort:focus-visible {
  outline: 2px solid var(--links);
  outline-offset: 1px;
}

/* Decorative article-type glyph injected before a connection link,
   matching the sidebar (.chapter-type-mark) and graph/legend glyphs. */
.content .article-connection-mark {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-inline-end: 0.4em;
  vertical-align: -0.08em;
}

@media (max-width: 560px) {
  .content .article-connections {
    font-size: 0.9em;
  }

  .content p.article-connection-line {
    padding: 6px 8px;
  }
}

/* ===========================================================================
 * Article-image figures (bin/mdbook-image preprocessor output)
 *
 * The preprocessor stamps the natural width/height of the shipping derivative
 * onto the <img> element so the browser can reserve layout space and avoid
 * cumulative layout shift (CLS). Without `height: auto` the HTML height
 * attribute is treated as a fixed pixel size, and `max-width: 100%` then
 * compresses the width below the natural ratio when the column is narrow —
 * producing a horizontally squished image. Setting `height: auto` lets the
 * browser scale the height proportionally and keep the aspect ratio.
 *
 * `display: block` removes the inline-baseline gap under the <img>; centering
 * via auto margins keeps the figure on the article column.
 * ========================================================================= */

figure.bartley-figure {
  margin: 1.6em auto;
  max-width: 100%;
  text-align: center;
}

figure.bartley-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

figure.bartley-figure figcaption {
  margin-top: 0.6em;
  font-size: 0.92em;
  font-style: italic;
  color: var(--fg, inherit);
  opacity: 0.78;
  line-height: 1.45;
}

/* The hero placement gets a touch more breathing room above and below; no
 * sizing change yet — readers still see the image at the column's full
 * width. Future CSS may bleed it slightly past the column edge. */
figure.bartley-figure[data-placement="hero"] {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* ===========================================================================
 * First-visit TOC hint (theme-template/toc-hint.js)
 *
 * A one-time callout under the hamburger toggle on narrow viewports, styled
 * as a publisher's marginal note: paper-deep card, hairline rule border, a
 * Cinzel small-caps eyebrow in the editorial accent, and a stitched caret
 * pointing up at the toggle. Everything derives from theme popup tokens so
 * the card follows Bartley Light/Dark and the stock themes without special
 * cases. Font sizes are px, never rem (mdbook's 62.5% root trap).
 * ========================================================================= */

.bartley-toc-hint {
  position: fixed;
  z-index: 300;
  box-sizing: border-box;
  max-width: min(288px, calc(100vw - 20px));
  padding: 13px 16px 12px;
  background: var(--theme-popup-bg);
  color: var(--fg);
  border: 1px solid var(--theme-popup-border);
  border-radius: 2px;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.bartley-toc-hint--visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bartley-toc-hint {
    transition: none;
    transform: none;
  }
}

.bartley-toc-hint-caret {
  position: absolute;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--theme-popup-bg);
  border-top: 1px solid var(--theme-popup-border);
  border-left: 1px solid var(--theme-popup-border);
  transform: rotate(45deg);
}

.bartley-toc-hint-eyebrow {
  font-family: Cinzel, serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--links);
  margin-bottom: 5px;
}

.bartley-toc-hint-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

.bartley-toc-hint-text .fa {
  font-size: 13px;
  opacity: 0.85;
}

.bartley-toc-hint-actions {
  margin-top: 10px;
  text-align: right;
}

.bartley-toc-hint-dismiss {
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  color: var(--links);
  background: transparent;
  border: 1px solid var(--theme-popup-border);
  border-radius: 2px;
  cursor: pointer;
}

.bartley-toc-hint-dismiss:hover,
.bartley-toc-hint-dismiss:focus-visible {
  border-color: var(--links);
}

.bartley-toc-hint-dismiss:focus-visible {
  outline: 2px solid var(--links);
  outline-offset: 1px;
}

/* ---- Mobile page-turn buttons: top mirror ---------------------------------
   The bottom .nav-wrapper reads [50px gap][hairline divider][buttons]; the top
   mirror added in index.hbs reads [buttons][hairline divider][gap] — the same
   0.5px hairline, flipped to a bottom border, so the page-turn affordance is
   discoverable at the top of a mobile page without scrolling. Visibility is
   inherited from .nav-wrapper (shown only ≤1080px), so no extra media query. */
.nav-wrapper-top {
  margin-block-start: 0;
  margin-block-end: 34px;
  padding-block-end: 0;
}
.bartley-light .nav-wrapper-top,
.bartley-dark .nav-wrapper-top {
  border-top: none;
  border-bottom: 0.5px solid var(--table-border-color);
}

/* Both mobile nav bands run edge-to-edge: the hairline spans the full page
   width so it reads as navigation set off from the content, not as an inset
   rule under the text column. Break out of .content's 5px padding and the
   .page --page-padding, then pad the buttons back to the text column. The
   .nav-wrapper only renders ≤1080px, so no media guard is needed. */
.nav-wrapper {
  margin-inline: calc(-1 * (var(--page-padding) + 5px));
  padding-inline: calc(var(--page-padding) + 5px);
}

/* ---- Sidebar resize handle: hidden on mobile ------------------------------
   The resize handle is a pointer-drag (col-resize) affordance with no touch
   behavior. On narrow viewports the sidebar is an overlay that cannot be
   resized, so the widget is inert — hide it. 1080px is the theme's mobile
   threshold (index.hbs sidebar default; toc-hint.js). */
@media only screen and (max-width: 1080px) {
  .sidebar .sidebar-resize-handle,
  .js .sidebar .sidebar-resize-handle {
    display: none;
  }
}

/* Document previews shared by Library and graph source navigation. */
.document-card { min-width: 0; overflow-wrap: anywhere; }
.document-card-title { margin: 0 0 10px; font-size: 1.15em; line-height: 1.3; }
.document-card-link { color: var(--links); }
/* Keep native date pickers while honoring control heights on iOS. */
.bartley-date-input { -webkit-appearance: none; appearance: none; }

/* Descriptive chips shared by document cards, the catalog, and reader headers.
   Check the chip against its enclosing card, not only text against chip fill:
   --surface can match that card and erase the chip's silhouette. Use a separate
   tint and outline; compact pills distinguish metadata from rectangular controls. */
.document-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.document-tag,
.document-tag-state,
.document-type,
.reading-room-applied-filter {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--fg) 35%, var(--bg));
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 12%, var(--bg));
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.document-tag-state { font-style: italic; }
.document-type {
  /* Optical centering for the bold label and file icon; preserve pill height. */
  padding-block: 3px 1px;
  border-color: color-mix(in srgb, var(--links) 65%, var(--bg));
  background: color-mix(in srgb, var(--links) 18%, var(--bg));
  color: var(--fg);
  font-weight: 600;
}
.document-tag[data-scope], .document-tag-category { cursor: help; }
.document-tag-category { width: fit-content; }
.document-tag:focus-visible, .document-tag-category:focus-visible { outline: 2px solid var(--links); outline-offset: 2px; }
.document-tag-tooltip {
  position: fixed;
  z-index: 10000;
  width: 300px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 3px 12px #0003;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  overflow-wrap: anywhere;
}
.document-tag-tooltip > strong { display: block; margin-bottom: 5px; }
@media print { .document-tag-tooltip { display: none !important; } }
/* One FontAwesome category mapping for filters and all document tag renderers. */
.document-tag-icon { width: 1.2em; margin-inline-end: .35em; text-align: center; }
.document-tag-icon[data-group="form"]::before { content: "\f0f6"; } /* file-text-o */
.document-tag-icon[data-group="role"]::before { content: "\f0b1"; } /* briefcase */
.document-tag-icon[data-group="status"]::before { content: "\f05d"; } /* check-circle-o */
.document-tag-icon[data-group="subject"]::before { content: "\f02c"; } /* tags */