/* THEME feature-runtime content styles. * * Styling for the CONTENT vocabulary the body-only fragments carry * (admonitions, accordions, tables, code blocks + copy button, glossary * popovers, figures, video embeds), with no site chrome (header, sidebar, * portal, search, pager). A theme brings * its own page styling and may override any of this; everything themeable * rides on the --paligo-* custom properties. * * The class vocabulary below is part of the coarse fragment-markup contract * (design doc 4): section boundaries, admonition/figure/table classes, * .code-block/.code-copy, .glossary-popover, .video-container. */ /* * Fallback design tokens for platform content styling. These sit in a cascade * LAYER so a theme's own tokens — declared unlayered in its main.css — always * win, whatever the source order (this stylesheet is injected via paligo.head, * AFTER the theme's stylesheets). Without the layer these equal-specificity * :root rules would out-cascade the theme by source order: the theme's dark-mode * @media(prefers-color-scheme:dark) tokens lost to these light-only values, * leaving pages half-light/half-dark (light --paligo-bg/-text over the theme's * dark --paligo-surface-2). Layered = pure fallback for a theme that defines * nothing, never an override of one that does. */ @layer paligo-fallback { :root { /* Neutrals */ --paligo-bg: #ffffff; --paligo-surface: #f4f5fb; /* code / admonition ground */ --paligo-border: #e4e5f0; --paligo-border-strong: #d3d5e4; --paligo-text: #161617; --paligo-muted: #5c5c6a; --paligo-primary: #3a46e8; /* Semantic (admonitions) */ --paligo-note: #3a46e8; --paligo-tip: #1f9d6b; --paligo-important: #7c3aed; --paligo-caution: #b26a00; --paligo-warning: #c10f0f; --paligo-danger: #c10f0f; /* Typography / geometry */ --paligo-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --paligo-radius: 10px; --paligo-space: 1rem; --paligo-caption-align: left; } } /* end @layer paligo-fallback */ /* ===== Figures ============================================================ */ /* xslTNG emits div.figure.formalobject (not the HTML5
). */ .figure { margin: 0 0 1.5rem; } .figure img { border: 1px solid var(--paligo-border); border-radius: var(--paligo-radius); display: block; } .figure .caption, .informalfigure .caption { color: var(--paligo-muted); font-size: 13px; margin-top: .5rem; text-align: var(--paligo-caption-align, left); } .figure .caption > :last-child, .informalfigure .caption > :last-child { margin-bottom: 0; } /* Formal-object headings: "Figure 2.", "Table 1.", procedure/example titles. */ .formalobject > header > .title, .orderedlist > header > .title, .itemizedlist > header > .title, .variablelist > header > .title { font-weight: 650; color: var(--paligo-text); margin: 0 0 .4rem; } /* ===== Code =============================================================== */ code, kbd, samp { font-family: var(--paligo-mono); font-size: .9em; } :not(pre) > code { background: var(--paligo-surface); border: 1px solid var(--paligo-border); padding: .1em .4em; border-radius: 5px; } pre { background: var(--paligo-surface); border: 1px solid var(--paligo-border); border-radius: var(--paligo-radius); padding: var(--paligo-space); overflow-x: auto; font-family: var(--paligo-mono); font-size: 13.5px; line-height: 1.6; } pre code { background: none; padding: 0; border: 0; font-size: inherit; } /* Code-copy button (code-copy.js wraps each 
 in a .code-block and injects
   the button). Shown on hover / keyboard focus; always visible on touch. */
.code-block { position: relative; }
.code-block .code-copy {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  width: 2rem; height: 2rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paligo-muted); background: var(--paligo-bg);
  border: 1px solid var(--paligo-border); border-radius: 7px;
  cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.code-block .code-copy svg { width: 1rem; height: 1rem; }
.code-block:hover .code-copy,
.code-block:focus-within .code-copy { opacity: 1; }
.code-block .code-copy:hover { color: var(--paligo-text); border-color: var(--paligo-border-strong); }
.code-block .code-copy.copied { color: var(--paligo-primary); border-color: var(--paligo-primary); opacity: 1; }
@media (hover: none) { .code-block .code-copy { opacity: 1; } }

/* ===== Video embed (paligo-video.xsl) ==================================== */
.video-container { margin: 0 0 var(--paligo-space); max-width: 100%; }
.video-container .videoobject {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--paligo-radius); overflow: hidden; background: #000;
}
@supports not (aspect-ratio: 16 / 9) {
  .video-container .videoobject { height: 0; padding-top: 56.25%; }
}
.video-container .videoobject > iframe,
.video-container .videoobject > video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ===== Glossary =========================================================== */
/* Popover (glossary-popover.js): the glossterm link keeps its normal look;
   the popover is an absolutely-positioned card carrying the definition. */
a[data-glossary-def] { text-decoration-style: dotted; cursor: help; }
.glossary-popover {
  position: absolute; z-index: 60; max-width: min(28rem, 90vw);
  background: var(--paligo-bg); color: var(--paligo-text);
  border: 1px solid var(--paligo-border-strong); border-radius: var(--paligo-radius);
  box-shadow: 0 6px 24px rgba(0,0,0,.16); padding: .6rem .8rem;
  font-size: 14px; line-height: 1.5;
}
.glossary-popover[hidden] { display: none; }
dl.glossary { margin: 0 0 var(--paligo-space); }
.glossentry { margin: 0 0 .75rem; }
.glossterm { font-weight: 650; color: var(--paligo-text); }

/* ===== Tables (CALS via xslTNG) =========================================== */
.informaltable, .table { overflow-x: auto; margin: 0 0 var(--paligo-space); }
.informaltable > table, .table > table {
  margin: 0; border: 1px solid var(--paligo-border); border-radius: var(--paligo-radius);
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
main table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
main th, main td { text-align: left; padding: .55em .85em; vertical-align: top; border: 0; border-bottom: 1px solid var(--paligo-border); }
main th > p, main td > p { margin: 0; }
main th > p + p, main td > p + p { margin-top: .5em; }
main thead th { background: var(--paligo-surface); font-weight: 650; color: var(--paligo-text); border-bottom: 1px solid var(--paligo-border-strong); }
main tbody tr:last-child td { border-bottom: 0; }
main > table { display: block; overflow-x: auto; }
caption { caption-side: top; text-align: left; font-weight: 650; color: var(--paligo-text); margin: 0 0 .4rem; }

/* ===== Blockquote & admonitions ========================================== */
blockquote { margin-inline: 0; padding: .5em var(--paligo-space); border-left: 3px solid var(--paligo-border-strong); color: var(--paligo-muted); }
.admonition {
  margin: 0 0 var(--paligo-space); background: var(--paligo-surface);
  border: 1px solid var(--paligo-border); border-left: 3px solid var(--adm, var(--paligo-note)); border-radius: var(--paligo-radius);
}
.admonition > div { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .75rem 1rem; }
.admonition .icon { width: 20px; margin-top: 2px; }
.admonition .icon-container {
  width: 20px; height: 20px; background: var(--adm, var(--paligo-note));
  -webkit-mask: var(--adm-icon) center / contain no-repeat; mask: var(--adm-icon) center / contain no-repeat;
}
.admonition .body { min-width: 0; }
.admonition .title { font-weight: 680; color: var(--paligo-text); margin: 0 0 2px; font-size: 14px; }
.admonition .body > div > :last-child { margin-bottom: 0; }
.admonition { --adm-icon: url('data:image/svg+xml;utf8,'); }
.note      { --adm: var(--paligo-note); }
.tip       { --adm: var(--paligo-tip); --adm-icon: url('data:image/svg+xml;utf8,'); }
.important { --adm: var(--paligo-important); }
.caution, .warning, .danger { --adm-icon: url('data:image/svg+xml;utf8,'); }
.caution { --adm: var(--paligo-caution); }
.warning, .danger { --adm: var(--paligo-warning); }

/* ===== Accordion (role=accordion -> 
) =========================== */
details.accordion, .accordion {
  margin: 0 0 .75rem; border: 1px solid var(--paligo-border);
  border-radius: var(--paligo-radius); background: var(--paligo-surface); overflow: hidden;
}
details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-weight: 600; }
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { color: var(--paligo-primary); }
details[open] > summary { border-bottom: 1px solid var(--paligo-border); }
details > .accordion-body { padding: 1rem; background: var(--paligo-bg); }
details > .accordion-body > :last-child { margin-bottom: 0; }

/* ===== Draft translation markers ========================================
 * Two roles source assembly (IO/IO.apply-transfile.xsl) puts on text when the
 * translation file could not fully answer for it. Both are draft-review aids,
 * off unless the layout's Language options ask for them, so neither is styled
 * for a reader who did not opt in.
 *
 * They live HERE, in the platform-managed content stylesheet, rather than in a
 * theme's own CSS: a customer swapping themes must not silently lose the
 * marking that tells them which of their content is not translated yet.
 *
 * .translation-changed  "Color mark unapproved translations" — a translation
 *                       exists but no translator has marked it complete.
 * .translation-missing  "Highlight non-translated content" — no translation at
 *                       all, so the source text stands in. The class is only
 *                       emitted when that option is on (paligo-translation.xsl
 *                       strips the role otherwise), which is why styling it
 *                       here is safe.
 *
 * Underlined as well as coloured: colour alone is not a marker for a reader who
 * cannot distinguish these hues, and a draft is exactly where the distinction
 * has to survive a print-out or a screenshot in a review comment. */
.translation-changed {
  color: var(--paligo-primary);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}
.translation-missing {
  color: var(--paligo-caution, #b45309);
  text-decoration: underline dotted currentColor;
  text-underline-offset: 2px;
}