uae[namespace="ua.text.block"],
uae[namespace="ua.rich.media"],
uae[namespace="ua.timeline"],
uae[namespace="ua.feature.grid"],
uae[namespace="ua.comparison.table"],
uae[namespace="ua.stats.bar"],
uae[namespace="ua.quote.callout"],
uae[namespace="ua.media.image"],
uae[namespace="ua.media.gallery"],
uae[namespace="ua.media.video"],
uae[namespace="ua.doc.basic"],
uae[namespace="ua.doc.simple"],
uae[namespace="ua.doc.markdown"],
uae[namespace="ua.code"] {
  display: block;
}

.ua-doc-basic-shell,
.ua-doc-simple-shell {
  max-width: 100%;
}

.ua-doc-control-frame {
  border: 1px solid color-mix(in srgb, var(--universe-color-primary) 28%, var(--universe-line, transparent));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--universe-color-background) 86%, var(--universe-color-text) 7%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--universe-color-primary) 7%, transparent), 0 0.55rem 1.4rem color-mix(in srgb, var(--universe-color-background) 22%, transparent);
  overflow: hidden;
}

.ua-doc-control-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.65rem;
  min-block-size: 2.9rem;
  border-block-end: 1px solid color-mix(in srgb, var(--universe-color-primary) 20%, transparent);
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--universe-color-background) 72%, var(--universe-color-primary) 10%);
  color: var(--universe-color-muted, var(--muted));
  font-size: 0.78rem;
  font-weight: var(--universe-font-weight-display-strong);
}

.ua-doc-toolbar-title,
.ua-doc-toolbar-note {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  min-width: 0;
}

.ua-doc-toolbar-title {
  color: var(--universe-color-text);
  font-weight: var(--universe-font-weight-display-strong);
}

.ua-doc-toolbar-note {
  color: var(--universe-color-muted, var(--muted));
  font-size: 0.74rem;
}

.ua-doc-command-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--universe-color-primary) 24%, transparent);
  border-radius: 0.58rem;
  padding: 0.2rem;
  background: color-mix(in srgb, var(--universe-color-background) 82%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--universe-color-text) 5%, transparent);
}

.ua-doc-tool {
  display: inline-grid;
  place-items: center;
  /* A minimum square so single-letter glyphs (B / I / U) stay a tidy square, but the button grows
     horizontally for a word-mark (List) with a little padding so it never wraps to two lines (CP2 v6 nit). */
  min-inline-size: 2.28rem;
  inline-size: auto;
  block-size: 2.28rem;
  padding-inline: 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.46rem;
  background: color-mix(in srgb, var(--universe-color-background) 68%, var(--universe-color-text) 7%);
  color: var(--universe-color-text);
  font: inherit;
  font-weight: var(--universe-font-weight-display-strong);
  cursor: pointer;
}

.ua-doc-tool-mark {
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

.ua-doc-tool-mark-italic {
  font-style: italic;
}

.ua-doc-basic-textarea,
.ua-doc-simple-editor {
  display: block;
  width: 100%;
  min-block-size: 10rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--universe-color-text);
  font: inherit;
  line-height: 1.55;
  padding: 1rem 1.05rem;
  resize: vertical;
}

.ua-doc-simple-editor {
  overflow: auto;
}

.ua-doc-simple-editor:empty::before {
  content: attr(data-placeholder);
  color: color-mix(in srgb, var(--universe-color-muted, currentColor) 82%, transparent);
}

.ua-text-block {
  color: var(--universe-color-text);
  max-width: var(--ua-text-max-width, 65ch);
  line-height: var(--universe-font-line-height-body, 1.5);
}

.ua-text-block[data-align="center"] {
  margin-inline: auto;
  text-align: center;
}

.ua-text-block[data-align="right"] {
  margin-left: auto;
  text-align: right;
}

.ua-text-block[data-drop-cap="true"] > p:first-of-type::first-letter {
  color: var(--universe-color-primary);
  float: left;
  font-family: var(--universe-font-heading);
  font-size: 3.5em;
  line-height: 0.9;
  margin-right: 0.1em;
}

.ua-rich-media {
  align-items: center;
  display: grid;
  gap: clamp(1rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
}

.ua-rich-media[data-layout="text-left"],
.ua-rich-media[data-layout="text-right"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ua-rich-media[data-layout="text-right"] .ua-rich-media-copy {
  order: 2;
}

.ua-rich-media-copy,
.ua-rich-media-visual,
.ua-card-simple,
.ua-feature-grid-card,
.ua-quote-callout,
.ua-stats-bar,
.ua-comparison-table-shell {
  background: color-mix(in srgb, var(--universe-color-background) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--universe-color-text) 14%, transparent);
  border-radius: 0.75rem;
  color: var(--universe-color-text);
}

.ua-rich-media-copy,
.ua-rich-media-visual,
.ua-card-simple,
.ua-feature-grid-card,
.ua-quote-callout,
.ua-comparison-table-shell {
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

/* ua.media.player carries its own radius and box; only the stills take these. */
/* The player is a block-level grid that already fills its column; it needs no width of its own here.
   An explicit `inline-size: 100%` on it was measured to collapse the stage's grid row from 782px to
   686px, so the control bar painted ON TOP of the picture. The consumers keep their class for scoping
   and give the player nothing it does not need. */

.ua-rich-media img,
.ua-media-image img,
.ua-media-gallery img,
.ua-card-simple-image {
  border-radius: var(--ua-media-radius, 0.75rem);
  display: block;
  height: auto;
  max-width: 100%;
}

.ua-card-simple {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--universe-color-primary) 22%, var(--universe-color-text) 12%);
  border-radius: 0.72rem;
  padding: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--universe-color-primary) 8%, transparent), transparent 52%), color-mix(in srgb, var(--universe-color-background) 88%, var(--universe-color-text) 10%);
  box-shadow: 0 0.9rem 2.6rem color-mix(in srgb, var(--universe-color-background) 34%, transparent);
}

.ua-card-simple-content {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.1rem, 4vw, 3rem);
}

.ua-card-simple-title,
.ua-hcard-simple-title {
  margin: 0;
  color: var(--universe-color-text);
  font-family: var(--universe-font-title, var(--universe-font-standard, inherit));
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: var(--universe-font-weight-display-strong);
  line-height: 1.12;
}

.ua-card-simple-body,
.ua-hcard-simple-body {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.ua-card-simple-content > :first-child {
  margin-block-start: 0;
}

.ua-card-simple-content > :last-child {
  margin-block-end: 0;
}

.ua-feature-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--ua-feature-columns, 3), minmax(0, 1fr));
}

.ua-feature-grid-card {
  min-height: 100%;
}

.ua-feature-grid-icon,
.ua-stats-bar-value,
.ua-quote-mark {
  color: var(--universe-color-primary);
}

/* ============================ ua.timeline — a REAL vertical/horizontal timeline ============================
   A continuous connector SPINE runs down (or across) the whole item column, and every event sits on a NODE
   DOT anchored to that spine — dated nodes on a connected thread, not a stack of detached left-bordered
   blocks. The spine honours data-connector-style (line / dotted / dashed) and data-direction (vertical /
   horizontal). The most-recent node (the first item) is a filled gold dot with a ring; the rest are quieter
   ringed dots — distinguished by fill AND size, never colour alone (House Rules), and always paired with the
   event title. This is a SHARED element fix: every timeline on the platform (release notes, process steps,
   the order receipt's refund/dispute/fulfillment history) gets the real spine. */
.ua-timeline {
  --ua-timeline-spine: 0.14rem;      /* thread thickness */
  --ua-timeline-node: 0.85rem;       /* node diameter */
  --ua-timeline-gutter: 1.7rem;      /* space reserved for the spine + node */
  --ua-timeline-color: color-mix(in srgb, var(--universe-color-primary) 60%, var(--universe-line, transparent));
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  position: relative;
}

/* Each event: indented past the spine gutter; the node dot is drawn on the spine to its left. */
.ua-timeline-item {
  position: relative;
  padding-inline-start: var(--ua-timeline-gutter);
  min-height: var(--ua-timeline-node);
  color: var(--universe-color-text);
}
/* The SPINE — one continuous thread down the item, joining node to node. Drawn as a bordered pseudo-element
   so data-connector-style can flip its border-style. It starts at the node centre and runs to the next node
   (past the item's bottom via the grid gap), and stops on the last item. */
.ua-timeline-item::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--ua-timeline-node) / 2);
  inset-block-end: calc(-1 * clamp(1.1rem, 2.4vw, 1.6rem) - var(--ua-timeline-node) / 2);
  inset-inline-start: calc(var(--ua-timeline-node) / 2);
  border-inline-start: var(--ua-timeline-spine) solid var(--ua-timeline-color);
  transform: translateX(-50%);
}
.ua-timeline-item:last-child::after { display: none; }
/* The NODE DOT — a ringed circle anchored on the spine, aligned to the top of the event. */
.ua-timeline-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--ua-timeline-node);
  block-size: var(--ua-timeline-node);
  border-radius: 999rem;
  background: var(--universe-color-background);
  border: var(--ua-timeline-spine) solid var(--ua-timeline-color);
  box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--universe-color-background) 82%, transparent);
  z-index: 1;
}
/* The most-recent event (first item) is the HERO node: a larger, gold-FILLED dot with a soft halo, so the
   latest state stands out by size + fill (not colour alone). */
.ua-timeline-item:first-child::before {
  inline-size: calc(var(--ua-timeline-node) + 0.28rem);
  block-size: calc(var(--ua-timeline-node) + 0.28rem);
  inset-inline-start: -0.14rem;
  background: var(--universe-color-primary-strong, var(--universe-color-primary));
  border-color: var(--universe-color-primary-strong, var(--universe-color-primary));
  box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--universe-color-primary) 20%, transparent);
}
.ua-timeline-item h3 {
  margin: 0;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  font-weight: var(--universe-font-weight-strong);
  line-height: 1.2;
  color: var(--universe-color-text);
}
.ua-timeline-item p {
  margin: 0.28rem 0 0;
  color: color-mix(in srgb, var(--universe-color-text) 74%, transparent);
  line-height: 1.5;
}
.ua-timeline-item a {
  display: inline-block;
  margin-top: 0.35rem;
  color: var(--universe-color-primary-strong, var(--universe-color-primary));
  font-weight: var(--universe-font-weight-title);
}

.ua-timeline-date {
  color: color-mix(in srgb, var(--universe-color-text) 60%, transparent);
  display: block;
  font-size: 0.82rem;
  font-weight: var(--universe-font-weight-title);
  letter-spacing: 0.01em;
  margin-bottom: 0.2rem;
}

/* data-connector-style — the thread's texture. line (default) is solid; dotted / dashed change the spine
   border-style so the thread reads as a dotted / dashed connector. */
.ua-timeline[data-connector-style="dotted"] .ua-timeline-item::after { border-inline-start-style: dotted; border-inline-start-width: 0.2rem; }
.ua-timeline[data-connector-style="dashed"] .ua-timeline-item::after { border-inline-start-style: dashed; border-inline-start-width: 0.18rem; }

/* data-direction="horizontal" — a row of events with the spine running ACROSS. Each item reserves top
   gutter for the node; the thread is the item's ::after rotated to the block-start edge. Vertical stays the
   default and the safe choice for mobile + long histories. */
.ua-timeline[data-direction="horizontal"] {
  grid-auto-flow: column;
  grid-auto-columns: minmax(9rem, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  overflow-x: auto;
}
.ua-timeline[data-direction="horizontal"] .ua-timeline-item {
  padding-inline-start: 0;
  padding-block-start: var(--ua-timeline-gutter);
}
.ua-timeline[data-direction="horizontal"] .ua-timeline-item::before {
  inset-block-start: 0;
  inset-inline-start: 0;
}
.ua-timeline[data-direction="horizontal"] .ua-timeline-item:first-child::before { inset-inline-start: -0.14rem; }
.ua-timeline[data-direction="horizontal"] .ua-timeline-item::after {
  inset-block-start: calc(var(--ua-timeline-node) / 2);
  inset-block-end: auto;
  inset-inline-start: calc(var(--ua-timeline-node) / 2);
  inline-size: calc(100% + clamp(1rem, 3vw, 2rem));
  block-size: 0;
  border-inline-start: 0;
  border-block-start: var(--ua-timeline-spine) solid var(--ua-timeline-color);
  transform: translateY(-50%);
}
.ua-timeline[data-direction="horizontal"][data-connector-style="dotted"] .ua-timeline-item::after { border-block-start-style: dotted; border-block-start-width: 0.2rem; }
.ua-timeline[data-direction="horizontal"][data-connector-style="dashed"] .ua-timeline-item::after { border-block-start-style: dashed; border-block-start-width: 0.18rem; }

.ua-stats-bar {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(var(--ua-stats-columns, 3), minmax(0, 1fr));
}

.ua-stats-bar-item {
  min-width: 0;
}

.ua-stats-bar-value {
  display: block;
  font-family: var(--universe-font-heading);
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  font-weight: var(--universe-font-weight-strong);
  line-height: 1;
}

.ua-quote-callout {
  font-family: var(--universe-font-heading);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 1.1;
}

.ua-quote-attribution {
  color: color-mix(in srgb, var(--universe-color-text) 72%, transparent);
  font-family: var(--universe-font-body);
  font-size: 1rem;
  margin-top: 1rem;
}

.ua-media-gallery {
  display: grid;
  gap: var(--ua-gallery-gap, 0.75rem);
  grid-template-columns: repeat(var(--ua-gallery-columns, 3), minmax(0, 1fr));
}

.ua-media-gallery figure {
  margin: 0;
}

.ua-comparison-table {
  border-collapse: collapse;
  width: 100%;
}

.ua-comparison-table th,
.ua-comparison-table td {
  border-bottom: 1px solid color-mix(in srgb, var(--universe-color-text) 12%, transparent);
  padding: 0.75rem;
  text-align: left;
}

.ua-comparison-table .is-highlighted {
  color: var(--universe-color-primary);
}

@media (max-width: 720px) {
  .ua-rich-media[data-layout="text-left"],
  .ua-rich-media[data-layout="text-right"],
  .ua-feature-grid,
  .ua-stats-bar,
  .ua-media-gallery {
    grid-template-columns: 1fr;
  }

  .ua-rich-media[data-layout="text-right"] .ua-rich-media-copy {
    order: initial;
  }
}

/* Shared text preview: the owning row is the keyboard/tap navigation target. */
.ua-doc-markdown-preview{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap;min-width:0;margin:0}