:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; --cre8-page-max-width: 1440px; --cre8-page-gutter-x: 24px; --cre8-page-gutter-y: 20px; --cre8-sidebar-width: 240px; --cre8-sidebar-collapsed-width: 52px; }
/* App-view palette tokens.
   Distinct from the `--cre8-*` set emitted by `style_tokens.rs`: those are the
   SITE-template system and carry flat single-hex values, because a site template
   picks one palette. App document views adapt to the viewer's light/dark mode,
   so these carry light-dark() pairs and must never be conflated with them —
   hence the `-view-` infix.
   Values are exactly the literals the app `*_PAGE_STYLE` blocks already used, so
   adopting a token is a no-op for rendering; it only removes a repeated literal.
   Safe to reference from any app view: PageShell emits this stylesheet by
   default (`base_theme: true`), and only `without_base_theme()` opts out. */
:root {
  --cre8-view-fg: light-dark(#16201c, #eef2f7);
  --cre8-view-fg-muted: light-dark(#6b7770, #94a0ae);
  --cre8-view-fg-faint: light-dark(#8a938e, #7c857f);
  --cre8-view-fg-soft: light-dark(#60706a, #9eb3aa);
  --cre8-view-border: light-dark(rgba(16,24,20,0.10), rgba(255,255,255,0.06));
  --cre8-view-border-subtle: light-dark(rgba(16,24,20,0.08), rgba(255,255,255,0.05));
  --cre8-view-border-strong: light-dark(rgba(16,24,20,0.16), rgba(255,255,255,0.12));
  --cre8-view-surface: light-dark(#f6faf8, rgba(255,255,255,0.03));
  --cre8-view-surface-alt: light-dark(#fafcfb, rgba(255,255,255,0.02));
  --cre8-view-chip-bg: light-dark(rgba(16,24,20,0.06), rgba(255,255,255,0.08));
  --cre8-view-accent: light-dark(#0f5c40, #51d88a);
  --cre8-view-on-accent: light-dark(#ffffff, #081b14);
  --cre8-view-danger: light-dark(#a32d2d, #f0a0a0);
  --cre8-error-fg: #ef4444;
}

/* ── Error hint (shared "Connection failed" / inline error text) ────────── */
/* Mirrors the rule in `render_html::section_styles::SECTION_BASE_CSS`. Both
   stylesheets must carry it: SECTION_BASE_CSS is only injected for authored
   site templates, while app *document* pages (breath, channel, claim, court,
   market, meditation, shop, item, site, conduit, onboard, capitalstrategy)
   load `base_theme.css` alone. Without this rule the class those apps emit —
   `class="hint cre8-error-hint"` — resolved to nothing and their "Connection
   failed:" text rendered in inherited body color instead of red. */
.cre8-error-hint {
  color: var(--cre8-error-fg);
  font-weight: 500;
}

body { margin: 0; min-height: 100vh; background: light-dark(#f6f8f4, #0b0c10); color: light-dark(#17201d, #e8e8ec); }
a { color: light-dark(#0f765d, #5fc1a8); font-weight: 760; }
code { font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 0.95em; }

/* ── scrollbars: themed thin scrollbars across every SSR scroll surface ─── */
* { scrollbar-width: thin; scrollbar-color: light-dark(#c4ccc2, #3a3f47) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: light-dark(#c4ccc2, #3a3f47); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: light-dark(#9fb3a9, #5b6870); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: light-dark(#0f765d, #5fc1a8); background-clip: padding-box; }

/* ── page layout: AppShell / Nav / Sidebar / Drawer / Footer ───────────── */
.primitive-app-shell { display: flex; flex-direction: column; height: 100vh; min-height: 100vh; overflow: hidden; }
.primitive-app-shell__body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.primitive-app-shell__content { flex: 1; min-width: 0; width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: var(--cre8-page-gutter-y) var(--cre8-page-gutter-x); overflow: auto; }
/* AppShell content owns the canonical outer padding. Direct child page
   containers share one width contract, while legacy <main> wrappers have
   their padding/margin/max-width neutralized so we don't double up. */
.primitive-app-shell__content > .primitive-page,
.primitive-app-shell__content > .primitive-attention-scope,
.primitive-app-shell__content > .primitive-room-scope,
.primitive-app-shell__content > main { width: min(var(--cre8-page-max-width), 100%); box-sizing: border-box; margin: 0 auto; max-width: none; padding: 0; }
/* A band (the app hero, the app's tab bar) spans the whole content region at
   any window width while the column under it stays capped: it bleeds by
   `--cre8-shell-half - 50%`, the distance from its centered column to the
   region's padding edge. The half width is taken once, as a length, by the
   region's own children, so a container an app declares further down cannot
   change it. The gutter is held stable because Chrome otherwise counts a
   classic scrollbar inside 100cqw and the band overruns into it.
   --cre8-shell-pad-x names the region's inline padding for a page that zeroes
   that padding without zeroing the gutter. */
@property --cre8-shell-half { syntax: "<length>"; inherits: true; initial-value: 0px; }
@supports (width: 1cqw) {
  .primitive-app-shell__content { container-type: inline-size; scrollbar-gutter: stable; }
  .primitive-app-shell__content > * { --cre8-shell-half: calc(50cqw + var(--cre8-shell-pad-x, var(--cre8-page-gutter-x, 24px))); }
}

.primitive-nav { position: sticky; top: 0; z-index: 39; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: light-dark(#ffffff, #16181d); border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); color: light-dark(#17201d, #e8e8ec); }
.primitive-nav__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.primitive-nav__menu { display: none; appearance: none; align-items: center; justify-content: center; flex: none; width: 36px; height: 32px; padding: 0; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #1a1d22); color: inherit; cursor: pointer; }
/* The hamburger belongs to the shell's own bar, and only when there is a
   sidebar for it to open: a nav nested in the page, or a shell with no sidebar
   (minimal-chrome commerce pages), would ship a dead or duplicate button. */
.primitive-app-shell:has(.primitive-sidebar) > .primitive-nav > .primitive-nav__menu { display: inline-flex; }
.primitive-nav__menu:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-nav__menu:focus-visible { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
.primitive-nav__menu-bars { display: inline-grid; gap: 3px; width: 16px; }
.primitive-nav__menu-bars span { display: block; height: 2px; border-radius: 999px; background: currentColor; }
.primitive-nav__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.primitive-nav__brand { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 14px; padding: 4px 8px; border-radius: 6px; text-decoration: none; color: inherit; }
.primitive-nav__brand:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-nav__items { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.primitive-nav__item { display: inline-flex; }
.primitive-nav__link { padding: 6px 10px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; color: inherit; }
.primitive-nav__link:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-nav__item--active .primitive-nav__link { background: light-dark(#0f765d, #2a3550); color: #ffffff; }

/* On narrow shells the same destinations remain in the navigation drawer. */
@media (max-width: 640px) {
  .primitive-app-shell:has(.primitive-sidebar) > .primitive-nav .primitive-nav__items { display: none; }
}

.primitive-sidebar { flex: 0 0 var(--cre8-sidebar-width); width: var(--cre8-sidebar-width); min-width: var(--cre8-sidebar-width); max-width: var(--cre8-sidebar-width); height: 100%; max-height: 100vh; box-sizing: border-box; padding: 16px 12px; background: light-dark(#fbfcfa, #14161a); border-right: 1px solid light-dark(#e3e7e0, #2a2c33); overflow: auto; color: light-dark(#17201d, #e8e8ec); }
.primitive-sidebar__header { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: light-dark(#6c7572, #8e9591); padding: 4px 8px 12px; }
.primitive-sidebar__group { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; }
.primitive-sidebar__group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: light-dark(#8e9591, #6c7572); padding: 6px 8px 4px; }
.primitive-sidebar__item { appearance: none; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; line-height: 1.25; text-decoration: none; color: inherit; background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%; }
.primitive-sidebar__item:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-sidebar__item--active { background: light-dark(#0f765d, #2a3550); color: #ffffff; }
.primitive-sidebar__item--active:hover { background: light-dark(#0f765d, #2a3550); }
.primitive-sidebar__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: light-dark(#0f765d, #2a3550); color: #ffffff; font-size: 10px; font-weight: 700; }
.primitive-sidebar__item--active .primitive-sidebar__badge { background: #ffffff; color: light-dark(#0f765d, #2a3550); }

/* Sidebar `collapsed` state (Sidebar ComponentSpec: states = active|collapsed,
   stateAttribute = data-collapsed). The rail is the SSR mirror of the React
   sidebar's collapsed rail: labels and group headings drop out, the per-item
   glyph (its initial) takes over, and the `title` attribute carries the full
   name. Only sidebars built with `.collapsible(true)` emit the attribute or
   the glyph/label spans, so every other sidebar is untouched by this block. */
.primitive-sidebar__collapse { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.primitive-sidebar__collapse:hover { background: light-dark(#eef2ec, #1f2126); }
.primitive-sidebar__collapse-glyph { display: inline-flex; font-size: 13px; line-height: 1; transition: transform 160ms ease; }
.primitive-sidebar__item-glyph { display: none; flex: 0 0 auto; align-items: center; justify-content: center; width: 20px; font-weight: 700; text-transform: uppercase; }
.primitive-sidebar__item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.primitive-sidebar[data-collapsed="true"] { flex-basis: var(--cre8-sidebar-collapsed-width); width: var(--cre8-sidebar-collapsed-width); min-width: var(--cre8-sidebar-collapsed-width); max-width: var(--cre8-sidebar-collapsed-width); padding-left: 6px; padding-right: 6px; overflow-x: hidden; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__header { justify-content: center; padding-left: 0; padding-right: 0; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__header-label,
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__group-label,
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item-label { display: none; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__collapse-glyph { transform: rotate(180deg); }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item { justify-content: center; padding-left: 6px; padding-right: 6px; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item-glyph { display: inline-flex; }
/* At rail width a badge would overflow the 40px item, so it rides the glyph's
   top-right corner instead of sitting in the flex row. */
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item { position: relative; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__badge { position: absolute; top: 2px; right: 2px; min-width: 14px; height: 14px; padding: 0 3px; font-size: 9px; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__group { padding: 4px 0; }
@media (prefers-reduced-motion: no-preference) {
  .primitive-sidebar { transition: flex-basis 160ms ease, width 160ms ease, min-width 160ms ease, max-width 160ms ease; }
}

.primitive-drawer-wrap { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.primitive-drawer-wrap[data-open="false"] { visibility: hidden; }
.primitive-drawer-wrap[data-open="true"] { visibility: visible; pointer-events: auto; }
.primitive-drawer__backdrop { position: absolute; inset: 0; background: rgba(15, 22, 19, 0.4); opacity: 0; transition: opacity 180ms ease; }
.primitive-drawer-wrap[data-open="true"] .primitive-drawer__backdrop { opacity: 1; }
.primitive-drawer { position: absolute; top: 0; bottom: 0; width: min(420px, 92vw); background: light-dark(#ffffff, #16181d); color: light-dark(#17201d, #e8e8ec); box-shadow: 0 12px 40px rgba(15, 22, 19, 0.18); display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.primitive-drawer-wrap--right .primitive-drawer { right: 0; transform: translateX(100%); }
.primitive-drawer-wrap--left .primitive-drawer { left: 0; transform: translateX(-100%); }
.primitive-drawer-wrap[data-open="true"] .primitive-drawer { transform: translateX(0); }
.primitive-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-drawer__title { margin: 0; font-size: 16px; font-weight: 700; }
.primitive-drawer__body { flex: 1; padding: 16px 18px; overflow: auto; }

.primitive-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 20px; background: light-dark(#fbfcfa, #14161a); border-top: 1px solid light-dark(#e3e7e0, #2a2c33); font-size: 12px; color: light-dark(#6c7572, #8e9591); }
.primitive-footer__item { display: inline-flex; align-items: center; gap: 4px; }
.primitive-footer__item-label { font-weight: 600; color: light-dark(#4f5854, #a8a8b0); }
.primitive-footer__item-label::after { content: ":"; }
.primitive-footer__item-value { font-variant-numeric: tabular-nums; }
.primitive-footer-attention { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; margin-left: auto; padding: 3px 8px; border: 1px solid light-dark(#d7ddd5, #30343a); border-radius: 999px; color: inherit; text-decoration: none; background: light-dark(#ffffff, #191c22); font-variant-numeric: tabular-nums; }
.primitive-footer-attention:hover { color: light-dark(#17201d, #f0f4ef); border-color: light-dark(#9fb3a9, #5b6870); }
.primitive-footer-attention__menu { display: inline-grid; gap: 2px; width: 12px; }
.primitive-footer-attention__menu span { display: block; height: 1px; border-radius: 999px; background: currentColor; opacity: .82; }
.primitive-footer-attention__label { font-weight: 650; color: light-dark(#4f5854, #a8a8b0); }
.primitive-footer-attention__value { font-weight: 760; color: light-dark(#17201d, #f0f4ef); }
.primitive-footer-attention__threads:not(:empty) { color: light-dark(#6c7572, #9ba4a0); }

/* Expanded footer: brand and link columns over the status row. It closes the
   page inside the scrolling content, bleeding through the content gutters;
   `top: 100%` rests it on the foot of the viewport when the page is short. */
.primitive-footer--expanded { display: block; position: sticky; top: 100%; padding: 0; font-size: 13px; }
.primitive-app-shell__content > .primitive-footer--expanded { margin: clamp(32px, 6vh, 72px) calc(-1 * var(--cre8-page-gutter-x)) calc(-1 * var(--cre8-page-gutter-y)); }
.primitive-footer__inner { width: min(var(--cre8-page-max-width), 100%); box-sizing: border-box; margin: 0 auto; padding: 32px var(--cre8-page-gutter-x) 14px; }
.primitive-footer__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 28px 24px; }
.primitive-footer__brand { grid-column: span 2; min-width: 0; }
.primitive-footer__brand-link { display: inline-flex; align-items: center; gap: 12px; color: light-dark(#17201d, #f0f4ef); text-decoration: none; }
/* The original CRE8 mark follows the text color in either viewer theme. */
.primitive-footer__mark { display: block; flex: none; width: 44px; height: 44px; background: currentColor; -webkit-mask: url("/view/local/assets/brand/cre8/logo.svg") center / contain no-repeat; mask: url("/view/local/assets/brand/cre8/logo.svg") center / contain no-repeat; }
.primitive-footer__brand-name { font-size: 20px; font-weight: 800; letter-spacing: 0.04em; }
.primitive-footer__tagline { margin: 10px 0 0; max-width: 34ch; line-height: 1.55; }
.primitive-footer__column { min-width: 0; }
.primitive-footer__heading { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; }
.primitive-footer__links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.primitive-footer__link { color: light-dark(#17201d, #e8e8ec); font-weight: 500; text-decoration: none; }
.primitive-footer__link:hover { color: light-dark(#0f765d, #5fc1a8); }
.primitive-footer__link:focus-visible, .primitive-footer__brand-link:focus-visible { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; border-radius: 4px; }
.primitive-footer__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 28px; padding-top: 14px; border-top: 1px solid light-dark(#e3e7e0, #2a2c33); font-size: 12px; }
.primitive-footer__status .primitive-footer__item { min-width: 0; }
.primitive-footer__status .primitive-footer__item-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(46ch, 60vw); }
@media (max-width: 760px) {
  .primitive-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primitive-footer__brand { grid-column: 1 / -1; }
}

/* canonical primitive defaults: intentionally low specificity for page overrides */
:where(button, input, select, textarea) { font: inherit; }
/* Page text is often a record's own text: an unbroken id or URL breaks inside
   its line rather than widening the column past a 390px viewport (PS-C-13). */
:where(.primitive-text, .primitive-page__title) { overflow-wrap: anywhere; }
:where(.primitive-page) { display: flex; flex-direction: column; gap: 18px; }
/* Row lays its children out inline, as the client Row does. SSR carries no
   per-node `gap` (page_shapes §6), so every Row takes this one base gap. */
:where(.primitive-row) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
:where(.primitive-page__header) { margin: 0 0 2px; }
:where(.primitive-page__title) { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2.1rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
:where(.primitive-container, .primitive-live-slot, .primitive-attention-scope, .primitive-room-scope) { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:where(.primitive-room-scope) { position: relative; }
:where(.primitive-room-scope__viewers) { position: absolute; top: 10px; right: 10px; z-index: 30; display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.82); color: #ffffff; font-size: 11px; font-weight: 760; line-height: 1.2; pointer-events: none; }
:where(.primitive-room-scope__cursor-layer) { position: absolute; inset: 0; z-index: 29; overflow: hidden; pointer-events: none; }
:where(.primitive-room-scope__cursor) { position: absolute; left: 0; top: 0; transform: translate(-2px, -2px); color: #38bdf8; font: 12px/1.2 system-ui, sans-serif; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
:where(.primitive-container__header) { margin-bottom: 2px; }
:where(.primitive-container__title) { margin: 0; font-size: 16px; line-height: 1.25; }
:where(.primitive-live-slot__status) { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 22px; color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; line-height: 1.2; }
:where(.primitive-live-slot__status-dot) { width: 6px; height: 6px; border-radius: 999px; background: light-dark(#a4aca8, #5f6662); }
:where(.primitive-live-slot__status[data-state="open"] .primitive-live-slot__status-dot, .primitive-live-slot__status[data-state="patch"] .primitive-live-slot__status-dot) { background: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-live-slot__status[data-state="connecting"] .primitive-live-slot__status-dot, .primitive-live-slot__status[data-state="polling"] .primitive-live-slot__status-dot) { background: light-dark(#a76500, #e8b75a); }
:where(.primitive-live-slot__status[data-state="error"] .primitive-live-slot__status-dot, .primitive-live-slot__status[data-state="unsupported"] .primitive-live-slot__status-dot) { background: light-dark(#b03030, #f08080); }
:where(.primitive-live-slot__noscript) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: light-dark(#6c7572, #8e9591); font-size: 12px; }
:where(.primitive-live-slot__refresh) { font-size: 12px; }
:where(.primitive-card, .primitive-banner, .primitive-stat, .primitive-keyvalue, .primitive-table, .primitive-list, .primitive-accordion) { box-sizing: border-box; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 10px; background: light-dark(#ffffff, #14161a); box-shadow: 0 1px 2px light-dark(rgba(16, 24, 20, 0.05), rgba(0, 0, 0, 0.22)); transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
:where(.primitive-card__header) { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); background: light-dark(#fbfcfa, #191b20); border-radius: 10px 10px 0 0; }
:where(.primitive-card__title) { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 740; line-height: 1.25; }
:where(.primitive-card__badge) { color: light-dark(#6c7572, #8e9591); font-size: 12px; font-weight: 650; }
:where(.primitive-card__body) { padding: 16px; min-width: 0; }
/* Navigable card tile (ItemCard with an href) — the whole card is a deep link. */
:where(.primitive-card__link) { display: block; text-decoration: none; color: inherit; }
:where(.primitive-card__link:hover .primitive-card) { border-color: light-dark(#0f765d, #5fc1a8); box-shadow: 0 10px 28px light-dark(rgba(15, 118, 93, 0.12), rgba(0, 0, 0, 0.36)); transform: translateY(-2px); }
:where(.primitive-card__link:focus-visible) { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; border-radius: 10px; }
/* Destructive zone (EditorPage danger actions) — separated from the main form
   by color and a heavier rule, with text beside it; color never carries the
   status alone (PS-C-15). */
:where(.primitive-card--danger) { border-color: light-dark(#e0b6b6, #6b3a3a); }
:where(.primitive-card--danger > .primitive-card__header) { border-bottom-color: light-dark(#e0b6b6, #6b3a3a); background: light-dark(#fdf4f4, #1e1414); }
:where(.primitive-card--danger > .primitive-card__header > .primitive-card__title) { color: var(--cre8-view-danger); }
/* Section: a titled group inside a page. The base keeps block flow (the
   client has no base rule either); only `min-width` stops a wide child from
   widening a grid or flex parent. `--card` gives it the Card surface. The
   variants below restate `display`, so this rule must stay above them. */
:where(.primitive-section) { min-width: 0; }
:where(.primitive-section--card) { box-sizing: border-box; padding: 14px 16px; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 10px; background: light-dark(#ffffff, #14161a); }
/* Grid section variant (ItemList) — responsive tile grid; the header spans full width. */
:where(.primitive-section--grid) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
:where(.primitive-section--grid > .primitive-section__header) { grid-column: 1 / -1; margin: 0; }
:where(.primitive-section--grid > .primitive-section__header > .primitive-section__title) { margin: 0; font-size: 13px; font-weight: 740; }
/* Workspace archetype (WorkspaceView) — toolbar / rail|main split / status. */
:where(.primitive-section--workspace) { display: grid; gap: 16px; }
:where(.primitive-row--workspace-body, .primitive-row--workspace-body-inspector, .primitive-row--workspace-body-triple) { display: grid; gap: 16px; align-items: start; }
:where(.primitive-row--workspace-body) { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
:where(.primitive-row--workspace-body-inspector) { grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); }
:where(.primitive-row--workspace-body-triple) { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr) minmax(220px, 320px); }
:where(.primitive-section--workspace-main) { min-width: 0; }
/* Compact workspace is opt-in; ordinary workspace pages retain their spacing. */
:where(.primitive-section--workspace-compact){display:grid;gap:0;min-width:0}
:where(.primitive-section--workspace-compact) > :where(.primitive-row--workspace-body,.primitive-row--workspace-body-inspector,.primitive-row--workspace-body-triple){gap:0;align-items:stretch}
:where(.primitive-section--workspace-compact) > :where(.primitive-section--workspace-toolbar,.primitive-section--workspace-status),
:where(.primitive-section--workspace-compact) > .primitive-row > :where(.primitive-section--workspace-rail,.primitive-section--workspace-main,.primitive-section--workspace-inspector){padding:0;min-width:0;border:0;border-radius:0}
@media (max-width: 880px) { :where(.primitive-row--workspace-body, .primitive-row--workspace-body-inspector, .primitive-row--workspace-body-triple) { grid-template-columns: 1fr; } }
:where(.primitive-banner) { padding: 15px 18px; border-left: 4px solid light-dark(#0f765d, #5fc1a8); background: light-dark(#f3f9f6, #111f1b); }
:where(.primitive-banner__title) { margin: 0 0 6px; font-size: 15px; font-weight: 760; line-height: 1.25; }
:where(.primitive-banner__body) { margin: 0; color: light-dark(#4f5854, #a8a8b0); line-height: 1.5; }
:where(.primitive-banner--warning) { border-left-color: light-dark(#a76500, #e8b75a); background: light-dark(#fdf6ea, #201a11); }
:where(.primitive-banner--info) { border-left-color: light-dark(#0f765d, #5fc1a8); background: light-dark(#f3f9f6, #111f1b); }
:where(.primitive-banner--error) { border-left-color: light-dark(#b03030, #f08080); background: light-dark(#fbf0f0, #201414); }
:where(.primitive-banner--success) { border-left-color: light-dark(#0f765d, #5fc1a8); background: light-dark(#eef7f3, #112019); }
:where(.primitive-stat) { margin: 0; padding: 12px 14px; }
/* The value and detail are <dd>s; without this they keep the browser's 40px indent. */
:where(.primitive-stat__value, .primitive-stat__detail) { margin-inline-start: 0; }
:where(.primitive-stat__label) { color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
:where(.primitive-stat__value) { margin-top: 4px; color: light-dark(#17201d, #f2f4f0); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 760; line-height: 1.1; overflow-wrap: anywhere; }
:where(.primitive-stat__detail) { margin-top: 4px; color: light-dark(#6c7572, #8e9591); font-size: 12px; line-height: 1.35; }
:where(.primitive-badge) { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 22px; padding: 2px 8px; border-radius: 999px; background: light-dark(#eef2ec, #1f2126); color: light-dark(#4f5854, #a8a8b0); font-size: 11px; font-weight: 700; line-height: 1.2; }
/* A Badge intent is a tone, and the label beside it says the same thing in
   words (PS-C-15). Mirrors the client Badge's `primitive-badge--{intent}`. */
:where(.primitive-badge--success, .primitive-badge--positive, .primitive-badge--good) { background: light-dark(#e3f3ec, #13261f); color: light-dark(#0f5c40, #7fd8b6); }
:where(.primitive-badge--info) { background: light-dark(#e6eff9, #16202e); color: light-dark(#1f5da8, #8db9ef); }
:where(.primitive-badge--warning) { background: light-dark(#fbf0db, #2a2112); color: light-dark(#8a5300, #eec27a); }
:where(.primitive-badge--error, .primitive-badge--danger, .primitive-badge--negative) { background: light-dark(#fbe8e8, #2b1718); color: light-dark(#a32d2d, #f4a3a3); }
/* Neutral is the base chip, named so an explicit `intent: neutral` is a
   declared tone rather than an unstyled class. */
:where(.primitive-badge--neutral) { background: light-dark(#eef2ec, #1f2126); color: light-dark(#4f5854, #a8a8b0); }
/* Stat intent tints the value and puts a tone rule on the leading edge. The
   label and detail stay neutral, so the number's meaning is still in words. */
:where(.primitive-stat--success, .primitive-stat--positive, .primitive-stat--good) { border-inline-start: 3px solid light-dark(#0f765d, #5fc1a8); }
:where(.primitive-stat--success, .primitive-stat--positive, .primitive-stat--good) :where(.primitive-stat__value) { color: light-dark(#0f5c40, #7fd8b6); }
:where(.primitive-stat--info) { border-inline-start: 3px solid light-dark(#1f5da8, #8db9ef); }
:where(.primitive-stat--warning) { border-inline-start: 3px solid light-dark(#a76500, #e8b75a); }
:where(.primitive-stat--warning) :where(.primitive-stat__value) { color: light-dark(#8a5300, #eec27a); }
:where(.primitive-stat--error, .primitive-stat--danger, .primitive-stat--negative) { border-inline-start: 3px solid light-dark(#b03030, #f08080); }
:where(.primitive-stat--error, .primitive-stat--danger, .primitive-stat--negative) :where(.primitive-stat__value) { color: light-dark(#a32d2d, #f4a3a3); }
:where(.primitive-stat--neutral) { border-inline-start: 3px solid var(--cre8-view-border-strong); }
/* StatGrid recipe (`StatGridBuilder` = Section{variant:"stat-grid"} + Stat) on
   app pages: the dashboard form of the stat-row grid. Site templates restyle
   the same variant as big centered counters in SECTION_BASE_CSS. The header
   spans the full row. `--cre8-stat-grid-min` sets the narrowest column. */
:where(.primitive-section--stat-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cre8-stat-grid-min, 130px), 1fr)); gap: 12px; align-items: stretch; }
:where(.primitive-section--stat-grid > .primitive-section__header) { grid-column: 1 / -1; margin: 0; }
/* Code: `code` is an inline token; `pre` is a block that scrolls inside its
   own box rather than widening the page (PS-C-13). */
:where(.primitive-text[data-variant="code"]) { padding: 1px 5px; border-radius: 4px; background: var(--cre8-view-chip-bg); font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 0.9em; }
:where(pre.primitive-text) { max-width: 100%; margin: 0; padding: 12px 14px; overflow: auto; box-sizing: border-box; border: 1px solid var(--cre8-view-border); border-radius: 8px; background: light-dark(#f4f6f2, #0e1013); font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 12px; line-height: 1.6; white-space: pre; overflow-wrap: normal; tab-size: 2; }
:where(.primitive-text[data-variant="caption"]) { display: block; color: var(--cre8-view-fg-muted); font-size: 12px; line-height: 1.45; }
:where(.primitive-list) { padding: 12px 14px; }
:where(.primitive-list__title, .primitive-keyvalue__title, .primitive-table__title) { margin-bottom: 10px; font-size: 13px; font-weight: 740; }
:where(.primitive-list__items) { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; }
:where(.primitive-list--ordered .primitive-list__items) { list-style-position: outside; }
:where(.primitive-listitem) { padding: 0; }
:where(.primitive-listitem__content) { display: inline-flex; flex-direction: column; gap: 2px; }
:where(.primitive-listitem__icon) { margin-inline-end: 6px; color: light-dark(#6c7572, #8e9591); }
:where(.primitive-listitem__title) { font-weight: 650; }
:where(.primitive-listitem__subtitle, .primitive-listitem__body, .primitive-list__empty) { color: light-dark(#6c7572, #8e9591); font-size: 12px; line-height: 1.4; }
/* Navigable list row (ListItem with a navigation action) — the anchor sits
   inside the <li>, since a list may only hold list items. */
:where(.primitive-listitem__link) { display: block; text-decoration: none; color: inherit; border-radius: 8px; }
:where(.primitive-listitem__link:hover .primitive-listitem__title) { text-decoration: underline; }
:where(.primitive-listitem__link:focus-visible) { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
.primitive-list--flush { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.primitive-list--flush > .primitive-list__items { gap: 0; padding: 0; list-style: none; }
.primitive-list--flush > .primitive-list__items > .primitive-listitem { border-bottom: 1px solid var(--cre8-view-border, light-dark(#e3e7e0, #2a2c33)); }
.primitive-list--flush .primitive-listitem__link { padding: 14px 0; border-radius: 0; overflow-wrap: anywhere; }
.primitive-list--flush .primitive-listitem__content { min-width: 0; }
.primitive-list--flush > .primitive-list__items > .primitive-listitem:not(:has(.primitive-listitem__link)) { padding: 14px 0; overflow-wrap: anywhere; }
.app-reference__disclosure { border-top: 1px solid var(--cre8-view-border, light-dark(#e3e7e0, #2a2c33)); padding: 16px 0; }
.app-reference__disclosure > summary { cursor: pointer; font-weight: 700; }
.app-reference__disclosure > summary:focus-visible { outline: 2px solid var(--cre8-view-accent); outline-offset: 4px; }
.app-reference__disclosure[open] > summary { margin-bottom: 16px; }
:where(.primitive-keyvalue) { padding: 12px 14px; }
:where(.primitive-keyvalue__list) { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 8px 14px; margin: 0; }
:where(.primitive-keyvalue__item) { display: contents; }
:where(.primitive-keyvalue__key) { color: light-dark(#6c7572, #8e9591); font-size: 12px; font-weight: 700; }
:where(.primitive-keyvalue__value) { min-width: 0; margin: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
:where(.primitive-keyvalue__hint) { display: block; margin-top: 2px; color: light-dark(#6c7572, #8e9591); font-size: 11px; line-height: 1.35; }
:where(.primitive-table) { overflow: hidden; }
:where(.primitive-table__title, .primitive-table__count, .primitive-table__empty) { padding: 10px 12px; }
:where(.primitive-table__count) { border-top: 1px solid light-dark(#e9ede7, #24272e); color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 650; }
:where(.primitive-table__scroll) { overflow: auto; }
:where(.primitive-table__grid) { width: 100%; border-collapse: collapse; font-size: 12px; }
:where(.primitive-table__head) { position: relative; z-index: 1; }
:where(.primitive-table__body) { background: transparent; }
:where(.primitive-table__heading, .primitive-table__cell) { padding: 8px 10px; border-top: 1px solid light-dark(#e9ede7, #24272e); text-align: left; vertical-align: top; }
:where(.primitive-table__heading) { color: light-dark(#4f5854, #a8a8b0); background: light-dark(#fbfcfa, #191b20); font-size: 11px; font-weight: 760; letter-spacing: 0.03em; text-transform: uppercase; }
:where(.primitive-table__heading--sortable) { cursor: pointer; }
:where(.primitive-table__row:hover) { background: light-dark(#f5f7f3, #171a1f); }
:where(.primitive-table__pagination) { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid light-dark(#e3e7e0, #2a2c33); }
:where(.primitive-table__cell[data-align="right"], .primitive-table__heading[data-align="right"]) { text-align: right; }
:where(.primitive-table__cell[data-align="center"], .primitive-table__heading[data-align="center"]) { text-align: center; }
:where(.primitive-form) { display: flex; flex-direction: column; gap: 12px; }
:where(.primitive-form__header) { margin-bottom: 2px; }
:where(.primitive-form__title) { margin: 0; font-size: 16px; line-height: 1.25; }
:where(.primitive-form__fields) { display: grid; gap: 10px; }
:where(.primitive-form__actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:where(.primitive-form__result) { max-height: 240px; overflow: auto; padding: 10px; border-radius: 6px; background: light-dark(#eef2ec, #111318); color: inherit; font-size: 12px; }
:where(.primitive-form-report) { min-width: 0; padding: 16px; border: 1px solid light-dark(#c8d2c7, #39413c); border-radius: 8px; }
:where(.primitive-form-report h3) { margin-top: 0; }
:where(.primitive-form-report details) { margin-top: 12px; }
:where(.primitive-form-report summary) { cursor: pointer; font-weight: 600; }
:where(.primitive-form-report dl) { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 3fr); gap: 10px 16px; }
:where(.primitive-form-report dt) { font-weight: 600; }
:where(.primitive-form-report dd) { margin: 0; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 540px) { :where(.primitive-form-report dl) { grid-template-columns: minmax(0, 1fr); gap: 5px; } :where(.primitive-form-report dd) { margin-bottom: 10px; } }
:where(.primitive-field) { display: flex; flex-direction: column; gap: 5px; }
.primitive-form .primitive-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.primitive-form .primitive-field > :is(input:not([type="checkbox"]):not([type="hidden"]),select,textarea) { box-sizing: border-box; width: 100%; font: inherit; }
.primitive-page > .primitive-form { padding: 20px; border: 1px solid var(--cre8-view-border); border-radius: 10px; background: var(--cre8-view-surface); }
.cre8-audio-capture-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cre8-audio-capture-controls label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--cre8-view-fg-muted); }
.cre8-audio-capture-controls :is(button,select) { min-height: 40px; padding: 8px 12px; border: 1px solid var(--cre8-view-border); border-radius: 6px; font: inherit; color: var(--cre8-view-fg); background: var(--cre8-view-surface); }
:where(.primitive-field--text, .primitive-field--email, .primitive-field--select) { min-width: 0; }
:where(.primitive-field__label) { color: light-dark(#4f5854, #a8a8b0); font-size: 12px; font-weight: 700; }
:where(.primitive-field__required) { color: light-dark(#b03030, #f08080); }
:where(.primitive-field__hint) { color: light-dark(#6c7572, #8e9591); font-size: 11px; line-height: 1.35; }
:where(.primitive-field > input:not([type="checkbox"]), .primitive-field > select, .primitive-field > textarea) { min-width: 0; padding: 8px 10px; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #16181d); color: inherit; }
:where(.primitive-field > textarea) { min-height: 88px; resize: vertical; }
:where(.primitive-field > input[type="checkbox"]) { width: 16px; height: 16px; accent-color: light-dark(#0f765d, #5fc1a8); }
/* Search and the first three facets stay visible. Only extra facets need the
   native disclosure; hidden owner scope never participates in the count. */
.primitive-form#collection-filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.primitive-form#collection-filters > .primitive-form__header { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.primitive-form#collection-filters > .primitive-form__fields { flex: 1 1 16rem; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.primitive-form#collection-filters:has(.collection-filters__toggle:not(:checked)) > .primitive-form__fields > .primitive-field:nth-child(n+5 of .primitive-field:not(:has([name="page_size"], [name="sort"]))) { display: none; }
.primitive-form#collection-filters > .primitive-form__actions { flex: 0 0 auto; }
.primitive-form#collection-filters > a.primitive-action { order: 2; }
.collection-filters__toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.collection-filters__toggle:focus-visible + .collection-filters__toggle-label { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
.collection-filters__toggle-label::after { content: "\25BE"; }
.collection-filters__toggle:checked + .collection-filters__toggle-label::after { content: "\25B4"; }
:where(button.primitive-action, a.primitive-action, .primitive-button, .primitive-tabs-button, .primitive-accordion__trigger, .primitive-modal__close, .primitive-toast__close) { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 12px; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #1a1d22); color: inherit; font: inherit; font-size: 13px; font-weight: 680; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
/* Primary is the accent filled with dark ink in dark mode, the same pairing
   as the stepper's current step and the landing CTA. */
.primitive-action-primary, .primitive-button-primary { border-color: light-dark(#0f765d, #5fc1a8); background: light-dark(#0f765d, #5fc1a8); color: light-dark(#ffffff, #0b1410); box-shadow: 0 1px 2px light-dark(rgba(15, 118, 93, 0.25), rgba(0, 0, 0, 0.25)); }
/* The page-wide `a` rule colors and weights every link. An Action anchor takes
   both from the button it looks like: (0,0,1) outranks `a`, and every intent
   class below (0,1,0) still outranks this. */
:where(.primitive-action):is(a) { color: inherit; font-weight: 680; }
.primitive-action-danger, .primitive-button-danger { border-color: light-dark(#b03030, #8d3c3c); color: light-dark(#b03030, #f08080); }
:where(.primitive-action-danger:hover:not(:disabled), .primitive-button-danger:hover:not(:disabled)) { background: light-dark(#fbeaea, #2a1a1c); }
.primitive-action-success { border-color: light-dark(#8cc7b3, #2f6b58); color: light-dark(#0f765d, #5fc1a8); }
.primitive-action-warning { border-color: light-dark(#e2c08a, #6b5325); color: light-dark(#8a5300, #e8b75a); }
.primitive-action-secondary, .primitive-button-secondary { color: light-dark(#4f5854, #a8a8b0); }
.primitive-action-ghost, .primitive-action-subtle, .primitive-button-ghost { border-color: transparent; background: transparent; color: light-dark(#4f5854, #a8a8b0); }
.primitive-action-ghost:hover:not(:disabled), .primitive-action-subtle:hover:not(:disabled), .primitive-button-ghost:hover:not(:disabled) { background: light-dark(#eef2ec, #1f2126); color: light-dark(#17201d, #e8e8ec); }
/* An anchor has no disabled state of its own; the writer mirrors it as aria-disabled. */
:where(a.primitive-action[aria-disabled="true"]) { opacity: 0.55; pointer-events: none; }
:where(button.primitive-action:hover:not(:disabled), a.primitive-action:hover, .primitive-button:hover:not(:disabled), .primitive-tabs-button:hover:not(:disabled), .primitive-accordion__trigger:hover:not(:disabled)) { background: light-dark(#eef2ec, #1f2126); }
:where(.primitive-action-primary:hover:not(:disabled), .primitive-button-primary:hover:not(:disabled)) { background: light-dark(#0c654f, #7fd0bb); }
:where(button.primitive-action:disabled, .primitive-button:disabled, .primitive-tabs-button:disabled, .primitive-accordion__trigger:disabled) { opacity: 0.55; cursor: not-allowed; }
:where(button.primitive-action:focus-visible, a.primitive-action:focus-visible, .primitive-button:focus-visible, .primitive-tabs-button:focus-visible, .primitive-accordion__trigger:focus-visible, .primitive-sidebar__item:focus-visible, .primitive-modal__close:focus-visible, .primitive-toast__close:focus-visible, .primitive-field > input:focus-visible, .primitive-field > select:focus-visible, .primitive-field > textarea:focus-visible) { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
:where(.primitive-tabs) { overflow: hidden; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; background: light-dark(#ffffff, #14161a); }
:where(.primitive-tabs-strip) { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); background: light-dark(#fbfcfa, #191b20); }
:where(.primitive-tabs-button) { min-height: 30px; border-color: transparent; background: transparent; color: light-dark(#4f5854, #a8a8b0); }
:where(.primitive-tabs-button--active, .primitive-tabs-button[aria-selected="true"]) { border-color: light-dark(#cdd3cb, #34403c); background: light-dark(#ffffff, #22272e); color: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-tabs-panels) { padding: 14px; }
:where(.primitive-tab[hidden]) { display: none; }
:where(.primitive-accordion) { overflow: hidden; }
:where(.primitive-accordion--multiple) { overflow: hidden; }
:where(.primitive-accordion__item + .primitive-accordion__item) { border-top: 1px solid light-dark(#e3e7e0, #2a2c33); }
:where(.primitive-accordion__trigger) { width: 100%; min-height: 40px; justify-content: flex-start; border: 0; border-radius: 0; background: transparent; text-align: left; }
:where(.primitive-accordion__chevron) { display: inline-flex; width: 1em; transition: transform 160ms ease; }
:where(.primitive-accordion__item[data-state="open"] .primitive-accordion__chevron) { transform: rotate(90deg); }
:where(.primitive-accordion__title) { font-weight: 700; }
:where(.primitive-accordion__panel) { padding: 12px 14px; border-top: 1px solid light-dark(#e9ede7, #24272e); }
:where(.primitive-switch) { display: flex; flex-direction: column; gap: 4px; }
:where(.primitive-switch__label) { display: inline-flex; align-items: center; gap: 8px; color: light-dark(#4f5854, #a8a8b0); font-size: 13px; font-weight: 700; }
:where(.primitive-switch__input) { width: 16px; height: 16px; accent-color: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-switch__text) { user-select: none; }
:where(.primitive-switch__help, .primitive-switch__error) { font-size: 11px; line-height: 1.35; }
:where(.primitive-switch__help) { color: light-dark(#6c7572, #8e9591); }
:where(.primitive-switch__error) { color: light-dark(#b03030, #f08080); }
:where(.primitive-switch--disabled) { opacity: 0.55; }
:where(.primitive-switch--invalid .primitive-switch__input) { outline: 2px solid light-dark(#b03030, #f08080); outline-offset: 1px; }
:where(.primitive-checkbox--invalid .primitive-checkbox__control) { outline: 2px solid light-dark(#b03030, #f08080); outline-offset: 1px; }
:where(.primitive-modal__backdrop) { position: fixed; inset: 0; z-index: 70; background: rgba(15, 22, 19, 0.46); }
:where(.primitive-modal) { position: fixed; z-index: 71; top: 50%; left: 50%; width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); transform: translate(-50%, -50%); overflow: hidden; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 10px; background: light-dark(#ffffff, #14161a); box-shadow: 0 24px 70px rgba(15, 22, 19, 0.28); }
:where(.primitive-modal__header) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
:where(.primitive-modal__title) { margin: 0; font-size: 16px; line-height: 1.25; }
:where(.primitive-modal__body) { max-height: calc(100vh - 140px); overflow: auto; padding: 14px; }
:where(.primitive-toast) { display: flex; align-items: flex-start; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; background: light-dark(#ffffff, #14161a); box-shadow: 0 12px 36px rgba(15, 22, 19, 0.18); }
:where(.primitive-toast__title) { font-weight: 750; }
:where(.primitive-toast__body) { color: light-dark(#4f5854, #a8a8b0); font-size: 13px; line-height: 1.4; }
:where(.primitive-toast__icon) { flex: none; }
/* Toast intent: a leading tone rule, as Banner does. `role`/`aria-live` carry
   the urgency to assistive tech; the color is for the eye only. */
:where(.primitive-toast--info) { border-inline-start: 4px solid light-dark(#1f5da8, #8db9ef); }
:where(.primitive-toast--success) { border-inline-start: 4px solid light-dark(#0f765d, #5fc1a8); }
:where(.primitive-toast--warning) { border-inline-start: 4px solid light-dark(#a76500, #e8b75a); }
:where(.primitive-toast--error) { border-inline-start: 4px solid light-dark(#b03030, #f08080); }
/* The writer emits only open modals (a closed one renders nothing), so `--open`
   is the whole look: header over a body that scrolls inside the max height. */
:where(.primitive-modal--open) { display: flex; flex-direction: column; }
:where(.primitive-page--workspace) { gap: 12px; }
/* Container placeholders for client-drawn surfaces (Canvas, VirtualWorldCanvas):
   what a reader sees before, or without, the renderer. */
:where(.primitive-container--canvas-placeholder, .primitive-container--virtual-canvas-preview) { align-items: center; justify-content: center; min-height: 160px; padding: 16px; border: 1px dashed light-dark(#cdd3cb, #2a2c33); border-radius: 8px; background: light-dark(#fbfcfa, #111318); color: var(--cre8-view-fg-muted); text-align: center; }
/* Icon: an inline glyph sized to the text around it (mirrors the client). */
:where(.primitive-icon) { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.125em; }
/* Stepper (mirrors the client's primitives/stepper.css). */
:where(.primitive-stepper) { min-width: 0; }
:where(.primitive-stepper-list) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; margin: 0; padding: 0; list-style: none; }
:where(.primitive-stepper-item) { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
:where(.primitive-stepper-item:not(:last-child))::after { content: ""; flex: none; width: 28px; height: 1px; background: var(--cre8-view-border-strong); }
:where(.primitive-stepper-circle) { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--cre8-view-border-strong); border-radius: 999px; color: var(--cre8-view-fg-muted); font-size: 12px; font-weight: 650; line-height: 1; }
:where(.primitive-stepper-label) { color: var(--cre8-view-fg-muted); font-size: 13px; white-space: nowrap; }
:where(.primitive-stepper-item--current) :where(.primitive-stepper-circle) { border-color: var(--cre8-view-accent); background: var(--cre8-view-accent); color: light-dark(#ffffff, #0b1410); }
:where(.primitive-stepper-item--current) :where(.primitive-stepper-label) { color: var(--cre8-view-fg); font-weight: 650; }
:where(.primitive-stepper-item--done) :where(.primitive-stepper-circle) { border-color: var(--cre8-view-accent); color: var(--cre8-view-accent); }
/* Router: a tab strip over panels; the page-shell router script shows one
   panel at a time (mirrors the client's Router rules). */
:where(.primitive-router) { display: flex; flex-direction: column; min-width: 0; }
:where(.primitive-router-nav) { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 12px; border-bottom: 1px solid var(--cre8-view-border); }
:where(.primitive-router-link) { padding: 8px 16px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--cre8-view-fg-muted); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
:where(.primitive-router-link:hover) { color: var(--cre8-view-fg); }
:where(.primitive-router-link.active, .primitive-router-link[aria-current="page"]) { border-bottom-color: var(--cre8-view-accent); color: var(--cre8-view-accent); }
:where(.primitive-router-link:focus-visible) { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
:where(.primitive-router-content, .primitive-router-panel) { min-width: 0; }
/* Scene and graph frames. The drawing inside carries its own presentation
   (SCENE_ISO_CSS, graph SVG attributes); these rules are the frame only. */
:where(.primitive-scene) { position: relative; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%; min-width: 0; padding: 14px; border: 1px solid var(--cre8-view-border); border-radius: 8px; background: var(--cre8-view-surface); }
:where(.primitive-scene--iso) { overflow-x: auto; }
:where(.primitive-node-graph, .primitive-node-hypergraph) { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; min-width: 0; max-width: 100%; overflow-x: auto; }
/* Visually hidden: removed from the visual layout, kept for assistive tech.
   `:focus-within` brings it back for a focusable child such as a skip link. */
.cre8-visually-hidden:not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* Skip link: first focusable element on every shell page, visible on focus. */
:where(.cre8-skip-link) { position: absolute; top: 8px; left: 8px; z-index: 100; padding: 8px 14px; border-radius: 6px; background: var(--cre8-view-accent); color: light-dark(#ffffff, #0b1410); font-weight: 700; text-decoration: none; transform: translateY(-200%); }
:where(.cre8-skip-link:focus, .cre8-skip-link:focus-visible) { transform: none; outline: 2px solid var(--cre8-view-fg); outline-offset: 2px; }
:where(.primitive-progress) { display: flex; flex-direction: column; gap: 6px; }
:where(.primitive-progress--complete .primitive-progress__fill) { background: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-progress--indeterminate .primitive-progress__fill) { width: 38%; min-width: 38%; }
:where(.primitive-progress__header) { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: light-dark(#6c7572, #8e9591); font-size: 12px; }
:where(.primitive-progress__label, .primitive-progress__percent) { font-weight: 700; }
:where(.primitive-progress__track) { overflow: hidden; height: 8px; border-radius: 999px; background: light-dark(#e3e7e0, #24272e); }
:where(.primitive-progress__fill) { height: 100%; border-radius: inherit; background: light-dark(#0f765d, #5fc1a8); }
:where(.primitive-skeleton) { display: flex; flex-direction: column; gap: 8px; }
:where(.primitive-skeleton__line) { min-height: 12px; border-radius: 999px; background: light-dark(#e3e7e0, #24272e); }
:where(.primitive-media-wrap) { display: grid; place-items: center; overflow: hidden; min-height: 160px; border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; background: light-dark(#eef2ec, #08090b); }
:where(.primitive-media-wrap--video, .primitive-media-wrap--audio) { width: 100%; }
:where(.primitive-media-wrap > video, .primitive-media-wrap > audio) { width: 100%; max-width: 100%; }
:where(.primitive-media-placeholder) { padding: 12px; color: light-dark(#6c7572, #8e9591); font-size: 12px; text-align: center; }
/* ImgSlot — the same block SECTION_BASE_CSS gives site templates, in view
   tokens, so an app page does not render it as bare text (PS-C-18). */
:where(.cre8-img-slot) { position: relative; width: 100%; overflow: hidden; min-height: 120px; border: 1px solid var(--cre8-view-border); border-radius: 10px; background: var(--cre8-view-surface); }
:where(.cre8-img-slot img) { display: block; width: 100%; height: 100%; object-fit: cover; }
:where(.cre8-img-slot__placeholder) { width: 100%; height: 100%; min-height: 120px; background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--cre8-view-border-strong) 8px 9px); }
:where(.cre8-img-slot__tag) { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 4px; background: light-dark(#0f765d, #2a3550); color: #ffffff; font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
:where(.cre8-img-slot__dims) { position: absolute; right: 10px; bottom: 8px; color: var(--cre8-view-fg-muted); font-family: "SFMono-Regular", Consolas, ui-monospace, monospace; font-size: 11px; }
/* SectionEyebrow and Divider — the SECTION_BASE_CSS blocks in view tokens, so
   an app page renders them as a site template does (PS-C-18). The app hero
   restyles its own eyebrow on top of this. */
:where(.primitive-section-eyebrow) { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--cre8-view-fg-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
:where(.primitive-section-eyebrow__sep) { color: light-dark(#0f765d, #5fc1a8); font-weight: 700; }
:where(.cre8-divider) { width: 100%; }
:where(.cre8-divider--line) { height: 1px; margin: 16px 0; background: var(--cre8-view-border-strong); }
:where(.cre8-divider--dots) { display: flex; justify-content: center; margin: 16px 0; color: var(--cre8-view-fg-faint); }
:where(.cre8-divider--dots)::before { content: "\00b7\00a0\00b7\00a0\00b7"; letter-spacing: 0.25em; }
:where(.cre8-divider--space) { height: 32px; }
:where(.primitive-client-island) { display: grid; place-items: center; min-width: 0; min-height: 120px; border: 1px dashed light-dark(#cdd3cb, #2a2c33); border-radius: 8px; background: light-dark(#fbfcfa, #111318); }
:where(.primitive-client-island__fallback) { color: light-dark(#6c7572, #8e9591); font-size: 12px; }
/* Sparkline and Chart (render_html write_sparkline / write_chart). The chart
   SVG carries its own presentation attributes; the sparkline line path and the
   legend swatches do not, so without these rules the line fills solid black
   and the swatches are empty zero-width spans. Mirrors the view-client's
   primitives/theming/chart.css. */
:where(.client-view-sparkline) { display: block; width: 100%; max-width: 132px; height: 36px; overflow: visible; }
:where(.client-view-sparkline--empty) { min-height: 36px; border-bottom: 1px dashed var(--cre8-view-border-strong); }
:where(.client-view-sparkline-line) { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:where(.client-view-chart-container) { min-width: 0; }
:where(.client-view-chart) { display: block; width: 100%; height: auto; min-height: 120px; }
:where(.client-view-chart-legend) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
:where(.client-view-chart-legend-item) { display: inline-flex; align-items: center; gap: 5px; color: var(--cre8-view-fg-muted); font-size: 11px; }
:where(.client-view-chart-swatch) { flex: none; width: 9px; height: 9px; border-radius: 999px; }

/* Wide viewports: the sidebar rail starts open, and the hamburger toggles it
   away (focus mode). `cre8-nav-open` = "the hamburger was pressed" at every
   width; each breakpoint applies it to its own default state. */
@media (min-width: 761px) {
  body.cre8-nav-open .primitive-sidebar { display: none; }
}

@media (max-width: 760px) {
  :root { --cre8-page-gutter-x: 16px; --cre8-page-gutter-y: 14px; }
  .primitive-nav { z-index: 60; }
  .primitive-sidebar { display: none; }
  /* The overlay opens from the edge its toggle sits on. */
  body.cre8-nav-open .primitive-sidebar { display: block; position: fixed; top: 52px; right: 0; bottom: 0; border-right: 0; border-left: 1px solid light-dark(#e3e7e0, #2a2c33); width: min(280px, 86vw); max-width: 86vw; z-index: 50; box-shadow: 0 18px 50px rgba(15, 22, 19, 0.32); }
  /* The narrow-viewport sidebar is already an overlay the nav toggle opens and
     closes, so a rail inside it would be a second, redundant collapse. Force
     the full-width form and hide the toggle regardless of the stored state. */
  body.cre8-nav-open .primitive-sidebar[data-collapsed="true"] { min-width: 0; padding-left: 12px; padding-right: 12px; }
  .primitive-sidebar[data-collapsed="true"] .primitive-sidebar__header-label,
  .primitive-sidebar[data-collapsed="true"] .primitive-sidebar__group-label,
  .primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item-label { display: revert; }
  .primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item-glyph { display: none; }
  .primitive-sidebar[data-collapsed="true"] .primitive-sidebar__item { position: static; justify-content: space-between; padding-left: 10px; padding-right: 10px; }
  .primitive-sidebar[data-collapsed="true"] .primitive-sidebar__badge { position: static; min-width: 18px; height: 18px; padding: 0 6px; font-size: 10px; }
  .primitive-sidebar__collapse { display: none; }
}

/* ── form primitives: Input / Checkbox / Select ────────────────────────── */
.primitive-input, .primitive-select { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.primitive-input__label, .primitive-select__label { font-size: 12px; font-weight: 600; color: light-dark(#4f5854, #a8a8b0); }
.primitive-input__required, .primitive-select__required, .primitive-checkbox__required { color: light-dark(#b03030, #f08080); margin-left: 2px; }
.primitive-input__control, .primitive-select__control { padding: 8px 10px; border: 1px solid light-dark(#cdd3cb, #2a2c33); border-radius: 6px; background: light-dark(#ffffff, #16181d); color: inherit; font: inherit; font-size: 14px; min-width: 0; }
.primitive-input__control:focus, .primitive-select__control:focus, .primitive-checkbox__control:focus { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 1px; }
.primitive-input--invalid .primitive-input__control, .primitive-select--invalid .primitive-select__control { border-color: light-dark(#b03030, #f08080); }
.primitive-input--disabled, .primitive-select--disabled, .primitive-checkbox--disabled { opacity: 0.55; }
.primitive-input__description, .primitive-select__description, .primitive-checkbox__description { font-size: 11px; color: light-dark(#6c7572, #8e9591); }
.primitive-input__error, .primitive-select__error, .primitive-checkbox__error { font-size: 11px; color: light-dark(#b03030, #f08080); }
textarea.primitive-input__control { min-height: 80px; resize: vertical; font-family: inherit; }
.primitive-checkbox { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.primitive-checkbox__label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.primitive-checkbox--disabled .primitive-checkbox__label { cursor: not-allowed; }
.primitive-checkbox__control { width: 16px; height: 16px; accent-color: light-dark(#0f765d, #5fc1a8); cursor: inherit; }
.primitive-checkbox__text { user-select: none; }

/* ── Calendar primitive (SSR calendar.rs + React Calendar.tsx) ──────────── */
.primitive-calendar { border: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 8px; overflow: hidden; background: light-dark(#ffffff, #16181d); }
.primitive-calendar__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-calendar__title { font-size: 14px; font-weight: 740; color: light-dark(#17201d, #e8e8ec); }
.primitive-calendar__nav { display: inline-flex; align-items: center; gap: 6px; }
.primitive-calendar__month { font-size: 12px; font-weight: 640; color: light-dark(#4f5854, #a8a8b0); }
.primitive-calendar__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: light-dark(#fbfcfa, #14161a); border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-calendar__weekday { padding: 6px 8px; font-size: 11px; font-weight: 640; text-align: right; color: light-dark(#6c7572, #8e9591); }
.primitive-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.primitive-calendar__cell { min-height: 78px; padding: 4px 6px; border-right: 1px solid light-dark(#eef1ec, #23252b); border-bottom: 1px solid light-dark(#eef1ec, #23252b); display: flex; flex-direction: column; gap: 3px; }
.primitive-calendar__cell:nth-child(7n) { border-right: none; }
.primitive-calendar__cell[data-in-month="false"] { background: light-dark(#fafbf9, #131519); }
.primitive-calendar__cell[data-in-month="false"] .primitive-calendar__daynum { color: light-dark(#b8c0bb, #565a61); }
.primitive-calendar__cell[data-today="true"] { background: light-dark(#eef7f3, #16241f); box-shadow: inset 0 0 0 2px light-dark(#0f765d, #5fc1a8); }
.primitive-calendar__daynum { font-size: 11px; font-weight: 600; text-align: right; color: light-dark(#4f5854, #a8a8b0); }
.primitive-calendar__cell[data-today="true"] .primitive-calendar__daynum { color: light-dark(#0f765d, #5fc1a8); font-weight: 760; }
.primitive-calendar__event { display: block; padding: 2px 6px; border-radius: 4px; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: light-dark(#e7f1ed, #1c2a25); color: light-dark(#0f765d, #8fd9c5); border: 1px solid light-dark(#cfe5dd, #244038); cursor: default; }
.primitive-calendar__event[data-kind="deadline"] { background: light-dark(#fdeede, #2e241a); color: light-dark(#9a5b16, #e8b577); border-color: light-dark(#f0d6b0, #43331f); }
.primitive-calendar__event[data-status="gen"] { background: light-dark(#efe7fb, #241c33); color: light-dark(#6b3fb0, #c2a8e8); border-color: light-dark(#dccdf0, #382a4d); }
.primitive-calendar__event[data-status="cancelled"] { opacity: 0.55; text-decoration: line-through; }
.primitive-calendar__empty, .primitive-calendar__count { margin: 0; padding: 8px 12px; font-size: 11px; color: light-dark(#6c7572, #8e9591); }
/* Linked entries, month paging and day states (booking calendars). */
a.primitive-calendar__event { cursor: pointer; text-decoration: none; }
a.primitive-calendar__event:hover { border-color: light-dark(#0f765d, #5fc1a8); }
.primitive-calendar__step { display: inline-grid; place-items: center; min-width: 28px; min-height: 28px; border-radius: 6px; color: light-dark(#0f765d, #5fc1a8); font-size: 18px; line-height: 1; text-decoration: none; }
.primitive-calendar__step:hover { background: light-dark(#eef7f3, #16241f); }
a.primitive-calendar__daynum { align-self: flex-end; min-width: 24px; padding: 2px 4px; border-radius: 4px; color: light-dark(#0f765d, #5fc1a8); font-weight: 720; text-decoration: none; }
a.primitive-calendar__daynum:hover { background: light-dark(#e7f1ed, #1c2a25); }
.primitive-calendar__cell[data-day-state="open"] { background: light-dark(#f6fbf8, #141d1a); }
.primitive-calendar__cell[data-day-state="full"] .primitive-calendar__daynum,
.primitive-calendar__cell[data-day-state="closed"] .primitive-calendar__daynum { color: light-dark(#a3aba7, #5d6268); }
.primitive-calendar__cell[data-day-state="closed"] { background: repeating-linear-gradient(135deg, transparent 0 6px, light-dark(#f1f3f0, #1a1c21) 6px 12px); }
.primitive-calendar__event[data-status="held"], .primitive-calendar__event[data-status="pending_payment"] { background: light-dark(#fdf6e3, #2b2616); color: light-dark(#8a6212, #e3c27a); border-color: light-dark(#efdfb3, #463b1f); }
.primitive-calendar__event[data-status="past"] { opacity: 0.7; }

/* ── shared-layer refinements: stat grids + empty states + focus rings ───── */
/* Stat groups: a responsive grid of metric cards instead of a stacked column.
   Scoped via :has() to rows that directly hold stats, so other rows are untouched. */
:where(.primitive-row:has(> .primitive-stat)) { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; align-items: stretch; }
/* Zero-data states read as intentional, not forgotten: centered, breathing room.
   `.cre8-empty` is the app-facing name: the SSR audit found 33 distinct bespoke
   classes (`.shop-grid-empty`, `.brain-empty`, `.ckt-empty`, `.traffic-empty`,
   `.org-empty`, …) across 81 sites in 25 crates, all expressing this one "nothing
   here yet" concept and each needing its own per-app rule. Apps should emit
   `class="cre8-empty"` (optionally alongside their existing class during
   migration) and drop the bespoke rule. Listed in the same `:where()` so the
   primitive and app-facing spellings stay pixel-identical by construction. */
:where(.primitive-list__empty, .primitive-table__empty, .primitive-empty-state, .cre8-empty, .client-view-empty) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 84px; padding: 24px 16px; text-align: center; color: light-dark(#8a938e, #7c857f); font-size: 13px; line-height: 1.45; }
/* A chart placeholder holds the height of the chart it stands in for. */
.client-view-empty { min-height: var(--cre8-view-chart-empty-height, 84px); }
/* EmptyState primitive: the same box (it also carries `cre8-empty`), with a
   title line, a body line and a row of next actions. */
:where(.primitive-empty-state--neutral) { gap: 6px; }
:where(.primitive-empty-state__title) { margin: 0; color: var(--cre8-view-fg); font-size: 14px; font-weight: 700; }
:where(.primitive-empty-state__body) { max-width: 52ch; margin: 0; }
:where(.primitive-empty-state__actions) { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
/* Refined focus: a soft accent halo accompanies the outline on interactive elements. */
:where(button.primitive-action, a.primitive-action, .primitive-button, .primitive-button-primary, .primitive-tabs-button, .primitive-accordion__trigger, .primitive-sidebar__item, .primitive-card__link, .primitive-nav__link, .primitive-nav__menu, .primitive-field > input, .primitive-field > select, .primitive-field > textarea, .primitive-input__control, .primitive-select__control, .primitive-checkbox__control):focus-visible { box-shadow: 0 0 0 4px light-dark(rgba(15, 118, 93, 0.18), rgba(95, 193, 168, 0.22)); }
/* Forced-colors modes (Windows High Contrast) remove box-shadows and flatten
   background colours to Canvas. The focus halo above is a box-shadow, a
   progress or meter fill is a background, a badge's tone is a background, and
   today's calendar cell is an inset shadow: each needs a system-colour
   outline, border or fill that survives the mode. */
@media (forced-colors: active) {
  :where(button.primitive-action, a.primitive-action, .primitive-button, .primitive-button-primary, .primitive-tabs-button, .primitive-accordion__trigger, .primitive-sidebar__item, .primitive-card__link, .primitive-nav__link, .primitive-nav__menu, .primitive-field > input, .primitive-field > select, .primitive-field > textarea, .primitive-input__control, .primitive-select__control, .primitive-checkbox__control):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  :where(.primitive-progress__track, .cre8-meter) { border: 1px solid CanvasText; }
  :where(.primitive-progress__fill, .cre8-meter__fill) { forced-color-adjust: none; background: Highlight; }
  :where(.primitive-badge) { border: 1px solid CanvasText; }
  .primitive-calendar__cell[data-today="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Legacy workbench-fragment utility. Live-snapshot pill rows across several
   apps (capitalstrategy .cs-*, breath, meditation, studio) mark up a
   horizontal wrapping row as `class="row"` and carry an inline gap, but no
   global `.row` rule ever existed — so `display:flex` (and the gap) never
   applied and the pills fell back to bare inline flow. Define it once here, in
   the sheet every SSR page loads. Scoped overrides (`.shop-live-snapshot .row`,
   `.market-live-snapshot .row`) still win on specificity; per-use inline gaps
   (breath 12px/8px, meditation 8px) still layer on top. */
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row--tight { gap: 8px; }
.row--baseline { align-items: baseline; gap: 12px; }

/* ── App hero (Section{variant:"app-hero"}) ──────────────────────────────
   The standard page-top for app SSR documents: WorkbenchPageBuilder (and so
   DetailPageBuilder / ListPageBuilder) emits it. Mirrors the client ViewHero
   (view-client/src/layout/route-kit/view-kit.css) — a flush card with a 135°
   accent wash over a vertical depth gradient, eyebrow/title/subtitle copy,
   and the stat row restyled as a translucent metric strip. */
@keyframes cre8AppHeroIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Flush / full-bleed: the hero reaches the sidebar (left), the top bar and the
   window's right edge at any width, by the band bleed the app shell measures
   (--cre8-shell-half above). Its inline padding gives the bleed back, so the
   hero text still lines up with the capped column below it. No side/top
   border or radius — a flush band, with only a bottom rule to separate it
   from the page body. */
.primitive-section--app-hero { --cre8-band-bleed-x: max(var(--cre8-shell-half) - 50%, 0px); display: grid; gap: 10px; align-content: center; box-sizing: border-box; margin: calc(-1 * var(--cre8-page-gutter-y, 20px)) calc(-1 * var(--cre8-band-bleed-x)) 4px; padding: 26px var(--cre8-band-bleed-x); overflow: hidden; border: 0; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); border-radius: 0; background: linear-gradient(135deg, color-mix(in srgb, light-dark(#eef2ef, #1a1d22) 88%, light-dark(#0f765d, #5fc1a8) 12%), transparent 58%), linear-gradient(180deg, light-dark(#f7f9f7, #14161a), light-dark(#ffffff, #0e1013)); animation: cre8AppHeroIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both; }
.primitive-section--app-hero > .primitive-section-eyebrow { display: flex; align-items: center; gap: 6px; margin: 0; color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.primitive-section--app-hero > .primitive-section-eyebrow .primitive-section-eyebrow__sep { color: light-dark(#0f765d, #5fc1a8); font-weight: 700; }
.primitive-section--app-hero > h1 { max-width: 900px; margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.12; }
/* The intro headline when the eyebrow slot is already the entity kind: a
   subhead under the h1, never larger than it. */
.primitive-section--app-hero > h2 { max-width: 760px; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.25; }
.primitive-section--app-hero > p { max-width: 760px; margin: 0; color: light-dark(#6c7572, #8e9591); font-size: 14px; line-height: 1.5; }
.primitive-section--app-hero > .primitive-row { margin-top: 6px; }
/* Hero stats read as one metric strip, not a wall of tiles: value over label,
   no box, a hairline between items. Stats in the page body keep their tiles. */
.primitive-section--app-hero > .primitive-row:has(> .primitive-stat) { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: 10px; }
.primitive-section--app-hero .primitive-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; padding: 2px 22px 2px 0; margin-inline-end: 22px; border: 0; border-inline-end: 1px solid light-dark(rgba(16, 24, 20, 0.12), rgba(255, 255, 255, 0.10)); border-radius: 0; background: none; box-shadow: none; }
.primitive-section--app-hero .primitive-stat:last-child { border-inline-end: 0; margin-inline-end: 0; padding-inline-end: 0; }
.primitive-section--app-hero .primitive-stat__value { margin-top: 0; font-size: clamp(1.2rem, 1.8vw, 1.55rem); font-variant-numeric: tabular-nums; }
.primitive-section--app-hero .primitive-stat__label { margin-top: 2px; max-width: 24ch; font-size: 11px; letter-spacing: 0.04em; }


/* ── Shared entity primitives: this sheet's alias bindings ───────────────
   The rules themselves live once, in `assets/shared_entities.css`, and are
   copied in below (this file is read as a plain file by `include_str!`, so it
   cannot reference the fragment — the byte-identity test in style_tokens.rs
   is what keeps the copy honest). The fragment names colors only through
   `--cre8-entity-*`; these bindings point them at the app-view palette, which
   is what the block resolved to when it was hand-mirrored. */
:root {
  --cre8-entity-rule: var(--cre8-view-border-subtle);
  --cre8-entity-border: var(--cre8-view-border);
  --cre8-entity-border-strong: var(--cre8-view-border-strong);
  --cre8-entity-fg: var(--cre8-view-fg);
  --cre8-entity-fg-muted: var(--cre8-view-fg-muted);
  --cre8-entity-surface: var(--cre8-view-surface);
  --cre8-entity-meter-track: var(--cre8-view-chip-bg);
  --cre8-entity-accent: var(--cre8-view-accent);
  --cre8-entity-danger: var(--cre8-error-fg);
  --cre8-entity-warning: light-dark(#8a5300, #eec27a);
  --cre8-entity-info: light-dark(#1f5da8, #8db9ef);
}

/* ── Shared entity primitives ─────────────────────────────────────────────
   THE definition of the canonical table / card / pill / empty-state / meter
   and the breadcrumb / pager / filter-chip navigation strips.
   Included verbatim by both SSR sheets — `base_theme.css` (loaded by app
   document routes) and `render_html::section_styles::SECTION_BASE_CSS`
   (injected for authored site templates) — so a class can never exist on one
   surface and not the other. App view_templates emit these classes instead of
   re-declaring the same rules per crate (measured at adoption: 29 files
   carried their own table reset, 31 their own pill radius, 5 the identical
   card).

   Colors resolve through the neutral `--cre8-entity-*` alias layer, which each
   sheet binds to its own palette: light-dark() `--cre8-view-*` tokens in
   base_theme.css, flat `--cre8-*` site-template tokens in SECTION_BASE_CSS.
   Rules here therefore reference no palette token directly. Two properties
   here are per-element, not aliases: `--tone` tints a pill or meter fill (apps
   set it inline from the accent token of whichever sheet they load) and
   `--cre8-meter-value` sets the meter fill width.

   `.cre8-empty--error` and `.cre8-empty` are both one class, so the modifier
   only wins while it stays after the base rule.

   `base_theme.css` is a plain file consumed by `include_str!`, so it carries a
   physical copy of this text rather than a reference to it; the byte-identity
   test in `style_tokens.rs` fails if the two ever differ. */
.cre8-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cre8-table th, .cre8-table td { padding: 6px 9px; border-bottom: 1px solid var(--cre8-entity-rule); text-align: left; vertical-align: top; }
.cre8-table thead th { color: var(--cre8-entity-fg-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.cre8-table .num, .cre8-table td.cre8-table__num, .cre8-table th.cre8-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.cre8-card { padding: 14px 16px; border: 1px solid var(--cre8-entity-border); border-radius: 16px; background: var(--cre8-entity-surface); }
.cre8-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--tone, var(--cre8-entity-fg-muted)) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tone, var(--cre8-entity-fg-muted)) 12%, transparent); color: var(--tone, var(--cre8-entity-fg-muted)); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cre8-pill--info { --tone: var(--cre8-entity-info); }
.cre8-pill--success { --tone: var(--cre8-entity-accent); }
.cre8-pill--warning { --tone: var(--cre8-entity-warning); }
.cre8-pill--error { --tone: var(--cre8-entity-danger); }
/* A label/value pill (`label <strong>value</strong>`, the live-status strip)
   keeps the value at full contrast. */
.cre8-pill strong { color: var(--cre8-entity-fg); }
.cre8-empty { padding: 18px; border: 1px dashed var(--cre8-entity-border-strong); border-radius: 12px; color: var(--cre8-entity-fg-muted); font-size: 13px; text-align: center; }
.cre8-empty--error { border-color: color-mix(in srgb, var(--cre8-entity-danger) 40%, transparent); color: var(--cre8-entity-danger); }
.cre8-meter { display: block; overflow: hidden; height: 8px; border-radius: 999px; background: var(--cre8-entity-meter-track); }
.cre8-meter__fill { display: block; height: 100%; border-radius: inherit; width: var(--cre8-meter-value, 0%); background: var(--tone, var(--cre8-entity-accent)); }
/* Navigation strips: `breadcrumb_html`, `pager_html` and `filter_chips_html`
   (cre8-util-view-html) and the Breadcrumb / Pager / FilterChips primitives
   emit these classes. The current item is marked with `aria-current`, so the
   selected state is announced and is never carried by color alone. */
.cre8-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 13px; color: var(--cre8-entity-fg-muted); }
.cre8-breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; opacity: 0.6; }
.cre8-breadcrumb a { color: inherit; }
.cre8-breadcrumb [aria-current="page"] { color: var(--cre8-entity-fg); }
.cre8-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-block: 16px; font-size: 13px; }
.cre8-pager__page { color: var(--cre8-entity-fg-muted); }
.cre8-pager a { padding: 4px 12px; border: 1px solid var(--cre8-entity-border); border-radius: 999px; text-decoration: none; color: var(--cre8-entity-accent); }
.cre8-pager a:hover { border-color: var(--cre8-entity-accent); }
.cre8-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 12px; }
.cre8-filter-chips__label { margin-inline-end: 4px; color: var(--cre8-entity-fg-muted); font-weight: 600; }
.cre8-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--cre8-entity-border); border-radius: 999px; color: var(--cre8-entity-fg-muted); text-decoration: none; white-space: nowrap; }
.cre8-filter-chip:hover { border-color: var(--cre8-entity-accent); color: var(--cre8-entity-fg); }
.cre8-filter-chip[aria-current] { border-color: var(--cre8-entity-accent); background: color-mix(in srgb, var(--cre8-entity-accent) 14%, transparent); color: var(--cre8-entity-fg); font-weight: 600; }
.cre8-filter-chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; }
/* Layout atoms for string-built pages. `kv_html`, `links_html` and
   `table_wrap_html` (cre8-util-view-html) emit `.cre8-kv`, `.cre8-links` and
   `.cre8-table-wrap` ahead of the app hook class; the rest are written on the
   element they lay out. `.cre8-card--link` is the whole-card link tile and
   sits beside `.cre8-card`, so it stays after that rule. */
.cre8-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.cre8-kv dt { color: var(--cre8-entity-fg-muted); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.cre8-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cre8-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cre8-links a { color: var(--cre8-entity-accent); text-decoration: none; border-bottom: 1px dotted var(--cre8-entity-border-strong); }
.cre8-table-wrap { overflow-x: auto; }
.cre8-list-plain { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cre8-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cre8-cluster--tight { gap: 6px; }
.cre8-cluster--loose { gap: 12px; }
.cre8-cluster--between { justify-content: space-between; }
.cre8-cluster--baseline { align-items: baseline; }
.cre8-card--link { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); text-decoration: none; transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease; }
.cre8-card--link:hover { border-color: color-mix(in srgb, var(--cre8-entity-accent) 45%, transparent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); transform: translateY(-2px); }
.cre8-card__title { color: var(--cre8-entity-fg); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.cre8-card__meta { color: var(--cre8-entity-fg-muted); font-size: 12px; line-height: 1.4; }
.cre8-doc-back { display: inline-block; margin-top: 4px; color: var(--cre8-entity-fg-muted); font-size: 13px; text-decoration: none; }
.cre8-doc-back:hover { color: var(--cre8-entity-fg); }
/* Reading atoms for string-built record pages. `.cre8-table--plain` is the
   record table: sentence-case column heads and quiet row heads, for tables
   read as a sheet of facts rather than scanned as a grid. `.cre8-sub` is the
   second line under a cell's value, `.cre8-note` a muted remark under a block,
   `.cre8-mono` an identifier that may wrap anywhere (a `code` in a table cell
   wraps the same way). `.cre8-lineage` is an
   ordered chain of steps (`__step`, its rank label in `em`, `__arrow` between
   steps, `__step--leaf` for the one the page is about); `.cre8-swatch` is a
   colour key. Both take their colour from `--tone`. */
.cre8-table code { overflow-wrap: anywhere; }
.cre8-table--plain th { color: var(--cre8-entity-fg-muted); font-weight: 500; white-space: nowrap; }
.cre8-table--plain thead th { font-size: 13px; font-weight: 500; letter-spacing: normal; text-transform: none; }
.cre8-sub { margin-top: 2px; color: var(--cre8-entity-fg-muted); font-size: 11px; }
.cre8-note { margin: 6px 0 0; color: var(--cre8-entity-fg-muted); font-size: 12px; }
.cre8-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; overflow-wrap: anywhere; }
.cre8-lineage { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.cre8-lineage__step { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--cre8-entity-fg-muted) 12%, transparent); }
.cre8-lineage__step--leaf { background: color-mix(in srgb, var(--tone, var(--cre8-entity-accent)) 22%, transparent); }
.cre8-lineage__step em { margin-right: 4px; color: var(--cre8-entity-fg-muted); font-size: 11px; font-style: normal; }
.cre8-lineage__arrow { color: var(--cre8-entity-fg-muted); opacity: 0.7; }
.cre8-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; background: var(--tone, var(--cre8-entity-fg-muted)); }
/* InfoCard / SummaryList / CatalogTile: SSR writers in render_html/info_cards.rs
   emit the same primitive-* DOM as the React primitives. */
.primitive-info-card { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--cre8-view-border); border-radius: 8px; background: var(--cre8-view-surface-alt); }
.primitive-info-card__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cre8-view-fg-muted); }
.primitive-info-card__title { font-size: 13px; color: var(--cre8-view-fg); }
.primitive-info-card__body { font-size: 12px; color: var(--cre8-view-fg-soft); }
.primitive-summary-list { display: grid; gap: 4px; margin: 0; }
.primitive-summary-list__row { display: grid; grid-template-columns: var(--summary-label-width, 120px) minmax(0, 1fr); gap: 8px; font-size: 12px; }
.primitive-summary-list__label { color: var(--cre8-view-fg-muted); }
.primitive-summary-list__value { margin: 0; color: var(--cre8-view-fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.primitive-catalog-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--cre8-view-border); border-radius: 10px; background: var(--cre8-view-surface); color: inherit; text-decoration: none; }
.primitive-catalog-tile--interactive:hover { border-color: var(--cre8-view-accent); }
.primitive-catalog-tile__badges, .primitive-catalog-tile__chips { display: flex; flex-wrap: wrap; gap: 4px; }
.primitive-catalog-tile__badge, .primitive-catalog-tile__chip { padding: 2px 6px; border-radius: 4px; background: var(--cre8-view-chip-bg); color: var(--cre8-view-fg-muted); font-size: 11px; }
.primitive-catalog-tile__title { font-weight: 600; color: var(--cre8-view-fg); }
.primitive-catalog-tile__subtitle { font-size: 12px; color: var(--cre8-view-fg-muted); }
.primitive-split-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 720px) { .primitive-split-preview { grid-template-columns: minmax(0, 1fr); } }
.primitive-tree-view__group { margin: 0; padding-inline-start: 16px; list-style: none; }
.primitive-tree-view > .primitive-tree-view__group { padding-inline-start: 0; }
.primitive-tree-view__item { margin-block: 2px; font-size: 13px; }
.primitive-tree-view__item summary { cursor: pointer; }
.primitive-tree-view__label { color: var(--cre8-view-fg); }
.primitive-tree-view__empty { color: var(--cre8-view-fg-muted); font-size: 13px; }

/* EmptyState error: the `.cre8-empty--error` look for the primitive's own
   modifier. Outside the shared-entities copy above, and after its `.cre8-empty`
   rule, which it must follow to win. */
.primitive-empty-state--error { border-color: color-mix(in srgb, var(--cre8-entity-danger) 40%, transparent); color: var(--cre8-entity-danger); }
.primitive-empty-state--error .primitive-empty-state__title { color: inherit; }

/* A detail page's hero is the same flush band as every app hero; the record
   identity rides under the title as a quiet monospace line, visible while
   related-data panels change. */
.detail-hero .primitive-text[data-variant="record-identity"] { display: block; color: light-dark(#6c7572, #8e9591); font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
/* The owner's access explanation: what the reader may not see, marked as a
   boundary rather than as a failure. */
.detail-access-notice { border-inline-start: 4px solid var(--cre8-view-danger); }
.detail-hero > .primitive-row:has(> .primitive-action) { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Help (src/help.rs): explanation behind a `?` or a dotted term, opened as a
   native popover. The panel is hidden until opened; without popover support
   the trigger's aria-label still names the topic. */
.cre8-help { display: inline-flex; align-items: center; position: relative; vertical-align: middle; margin-inline-start: 4px; text-transform: none; letter-spacing: normal; font-weight: 400; }
.cre8-help__trigger { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid light-dark(#c3cbc6, #3a3e46); border-radius: 50%; background: transparent; color: light-dark(#6c7572, #8e9591); font: 700 10px/1 system-ui, sans-serif; cursor: help; }
.cre8-help__trigger:hover { border-color: light-dark(#0f765d, #5fc1a8); color: light-dark(#0f765d, #5fc1a8); }
.cre8-help__trigger:focus-visible { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 2px; }
.cre8-help--term { margin-inline-start: 0; }
.cre8-help--term .cre8-help__trigger { width: auto; height: auto; min-height: 24px; padding: 3px 10px; border-radius: 999px; border-color: light-dark(#e2c08a, #6b5325); background: light-dark(#fdf6ea, rgba(232, 183, 90, 0.08)); color: light-dark(#8a5300, #e8b75a); font: 650 12px/1.2 system-ui, sans-serif; }
.cre8-help__panel { max-width: min(36ch, calc(100vw - 32px)); margin: 0; padding: 10px 12px; border: 1px solid light-dark(#d9dfda, #2f333b); border-radius: 8px; background: light-dark(#ffffff, #1a1d22); color: light-dark(#17201d, #e8e8ec); box-shadow: 0 8px 24px light-dark(rgba(16, 24, 20, 0.14), rgba(0, 0, 0, 0.45)); font: 400 13px/1.45 system-ui, sans-serif; text-align: start; text-transform: none; letter-spacing: normal; white-space: normal; }
.cre8-help__panel:not(:popover-open) { display: none; }
/* A popover opened by `popovertarget` anchors to its invoker implicitly, so
   no anchor-name is shared between triggers. */
@supports (position-area: block-end) { .cre8-help__panel { position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline; margin-top: 6px; } }
.cre8-help-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.primitive-section--association-group { min-width: 0; overflow-wrap: anywhere; padding-block: 12px; }
.primitive-tabs[data-tabs-progressive]:not([data-tabs-ready]) > .primitive-tabs-strip { display: none; }
.primitive-tabs[data-tabs-progressive]:not([data-tabs-ready]) > .primitive-tabs-panels > .primitive-tab + .primitive-tab { margin-block-start: 24px; }
.primitive-tabs[data-tabs-progressive] .primitive-tabs-strip { overflow-x: auto; }
/* Narrow: hero actions stack full-width; the stat strip keeps two across. */
@media (max-width: 600px) { .detail-hero > .primitive-row:not(:has(> .primitive-stat)) { grid-template-columns: minmax(0, 1fr); flex-direction: column; align-items: stretch; } }

/* Payload availability is a quiet status row, never an implementation log. */
.primitive-live-payload{padding:8px 12px;border-top:1px solid var(--cre8-view-border);color:var(--cre8-view-fg-muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.primitive-live-payload .primitive-text{font-size:inherit;color:inherit}


.primitive-explanation{margin:8px 0 16px;font-size:13px;line-height:1.6;color:var(--cre8-view-fg-muted)}
.primitive-explanation>summary{display:list-item;cursor:pointer;color:var(--cre8-view-fg);font-size:13px;font-weight:600;padding:6px 0}
.primitive-explanation[open]>summary{margin-bottom:8px}
.primitive-explanation>summary:focus-visible{outline:2px solid var(--cre8-view-accent);outline-offset:3px}
.primitive-section--workspace-rail>.primitive-section>.primitive-text{display:block;font-size:13px;line-height:1.5;color:var(--cre8-view-fg-muted);padding-block:8px}

/* App-local rhythm stays inside the runtime's chrome and shared token palette. */
.app-hero__identity { align-items: center; margin-bottom: 8px; }
.app-hero__identity .primitive-section-eyebrow { margin: 0; }
.app-hero__identity .app-hero__app-link { display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--cre8-view-fg-muted); font-size: 12px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.app-hero__identity .app-hero__app-link:hover { color: var(--cre8-view-accent); text-decoration: underline; background: transparent; }
/* The surface keeps its own padding in a variable so a band can bleed past it to the content area's edges. --cre8-app-bleed-x is the shell's band bleed (base_theme.css): it resolves against the column of the element that uses it, so it holds for any centered column, capped or not. */
.primitive-section--app-surface { --cre8-app-surface-pad: clamp(12px, 2vw, 28px); --cre8-app-bleed-x: max(var(--cre8-shell-half) - 50%, 0px); --cre8-app-bleed-y: calc(var(--cre8-page-gutter-y, 20px) + var(--cre8-app-surface-pad)); box-sizing: border-box; width: min(100%, 1440px); min-width: 0; margin-inline: auto; padding: var(--cre8-app-surface-pad); }
/* Masthead: the page's hero, then the app's own tabs, as one full-width block at the top of the page. The masthead stays in the column and its bands bleed, because the bleed is measured from the column the band sits in. */
.primitive-section--app-masthead { display: block; margin: 0; }
.primitive-page > .primitive-section--app-masthead:first-child { margin-top: calc(-1 * var(--cre8-app-bleed-y, 0px)); }
.primitive-section--app-surface > .primitive-page:has(> .primitive-section--app-masthead:first-child) { padding-top: 0; }
/* A hero or tab bar that is the page's own child reaches the surface's edges, as a masthead does: the surface pads by more than the page gutter those two bleed by on their own. */
.primitive-section--app-surface > .primitive-page > .primitive-section--app-hero { margin-inline: calc(-1 * var(--cre8-app-bleed-x, 24px)); padding-inline: var(--cre8-app-bleed-x, 24px); }
.primitive-section--app-surface > .primitive-page > .primitive-section--app-identity { margin-inline: calc(-1 * var(--cre8-app-bleed-x, 0px)); padding-inline: var(--cre8-app-bleed-x, 24px); }
.primitive-section--app-masthead > .primitive-section--app-hero { margin: 0 calc(-1 * var(--cre8-app-bleed-x, var(--cre8-band-bleed-x))); padding-inline: var(--cre8-app-bleed-x, var(--cre8-band-bleed-x)); }
.primitive-section--app-masthead > .primitive-section--app-identity { --cre8-band-bleed-x: max(var(--cre8-shell-half) - 50%, 0px); margin: 0 calc(-1 * var(--cre8-app-bleed-x, var(--cre8-band-bleed-x))); padding-inline: var(--cre8-app-bleed-x, var(--cre8-band-bleed-x)); background: light-dark(#fbfcfb, #101216); }
/* A page with no hero opens on its tab bar: it meets the top bar and spans the surface, as a masthead does, instead of floating as an inset strip. */
.primitive-section--app-surface > .primitive-section--app-identity:first-child { margin: calc(-1 * var(--cre8-app-bleed-y, 0px)) calc(-1 * var(--cre8-app-bleed-x, 0px)) 20px; padding-inline: var(--cre8-app-bleed-x, 24px); background: light-dark(#fbfcfb, #101216); }
/* The app's own wayfinding: a label, underline tabs that scroll sideways instead of wrapping, and at most one small action. */
.primitive-section--app-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 0 0 20px; padding: 0; border-bottom: 1px solid light-dark(#e3e7e0, #2a2c33); }
/* z-index is reset because a flex item honours it even when static, which would let this in-page bar out-paint the sticky header's search popover. */
.primitive-section--app-identity .primitive-nav { position: static; z-index: auto; flex: 1 1 0; min-width: 0; min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.primitive-section--app-identity .primitive-nav__left { flex-wrap: nowrap; gap: 14px; min-width: 0; width: 100%; }
.primitive-section--app-identity .primitive-nav__right:empty { display: none; }
.primitive-section--app-identity [data-cre8-nav-menu] { display: none; }
.primitive-section--app-identity a.primitive-nav__brand { flex: 0 0 auto; min-height: 0; padding: 0; border-radius: 0; color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.primitive-section--app-identity .primitive-nav__items { display: flex; flex: 1 1 0; flex-wrap: nowrap; gap: 2px; min-width: 0; margin: 0; padding: 0 0 3px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--cre8-view-accent) transparent; }
.primitive-section--app-identity .primitive-nav__items::-webkit-scrollbar { height: 3px; }
.primitive-section--app-identity .primitive-nav__items::-webkit-scrollbar-thumb { background: var(--cre8-view-accent); border-radius: 3px; }
.primitive-section--app-identity a.primitive-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 0; border-bottom: 2px solid transparent; background: none; color: light-dark(#4e5754, #a9b0ac); font-size: 14px; font-weight: 600; white-space: nowrap; }
.primitive-section--app-identity a.primitive-nav__link:hover { color: light-dark(#101916, #f2f4f3); }
.primitive-section--app-identity a.primitive-nav__link[aria-current=page] { border-bottom-color: var(--cre8-view-accent, #5fc1a8); background: none; color: light-dark(#101916, #f2f4f3); font-weight: 700; }
.primitive-section--app-identity > a.primitive-action { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; margin: 5px 0; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.primitive-section--app-surface a:focus-visible, .primitive-section--app-surface button:focus-visible { outline: 2px solid var(--cre8-view-accent, #5fc1a8); outline-offset: 3px; }
.primitive-section--app-surface .primitive-page { width: 100%; max-width: 100%; padding-inline: 0; }
.primitive-section--app-surface .primitive-section--grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.primitive-section--app-surface .primitive-section--workspace, .primitive-section--app-surface .primitive-section--workspace-main { min-width: 0; max-width: 100%; }
.primitive-section--app-surface .primitive-section--workspace-main { overflow: auto; }
@media (max-width: 960px) {
  .primitive-section--app-surface .primitive-row--workspace-body-triple { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .primitive-section--app-identity a.primitive-nav__brand { display: none; }
  .primitive-section--app-surface .primitive-row--workspace-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* The fade advertises the rest of a long tab row even on platforms that
     hide overlay scrollbars. Extra end space lets the active tab scroll clear. */
  .primitive-section--app-identity .primitive-nav__items,
  .primitive-section--app-surface nav[aria-label="Editor modes"] { padding-inline-end: 28px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
  .primitive-section--app-surface nav[aria-label="Editor modes"] { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--cre8-view-accent) transparent; }
}

.primitive-section--app-surface .page { width: 100%; min-width: 0; }
/* A workspace fills the runtime content area; only its panes own spacing. */
.primitive-app-shell__content:has([data-editor-chrome]) { --cre8-page-gutter-x: 0px; --cre8-page-gutter-y: 0px; padding: 0; scrollbar-gutter: auto; }
.primitive-section--app-surface:has([data-editor-chrome]) { --cre8-app-surface-pad: 0px; width: 100%; max-width: none; margin: 0; padding: 0; }
.primitive-section--app-surface:has([data-editor-chrome]) > .primitive-section--app-identity:first-child { margin: 0; padding-inline: 16px; }
.primitive-section--app-surface [data-editor-chrome] { margin: 0; max-width: none; border-radius: 0; }
/* Raw workspace controls use the same labelled, responsive form rhythm. */
#appWorkspaceControls { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,160px),1fr)); gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--cre8-view-border); border-radius: 10px; background: var(--cre8-view-surface); }
#appWorkspaceControls[hidden] { display: none; }
#appWorkspaceControls label { display: grid; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--cre8-view-fg-muted); }
#appWorkspaceControls :is(input,select,button) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid var(--cre8-view-border); border-radius: 6px; font: inherit; color: var(--cre8-view-fg); background: var(--cre8-view-surface-alt); }
#appWorkspaceControls button { font-size: 13px; font-weight: 600; cursor: pointer; }
#appWorkspaceStatus { color: var(--cre8-view-fg-muted); font-size: 13px; line-height: 1.5; }
.app-group-nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative}
.app-group-nav details{position:relative}.app-group-nav summary{cursor:pointer;padding:8px 12px;border:1px solid transparent;border-radius:8px;font-size:13px;list-style:none}
.app-group-nav .app-group-current>summary{border-color:var(--cre8-view-accent,#5fc1a8)}
.app-group-nav details>div{position:absolute;top:100%;left:0;z-index:30;min-width:190px;padding:8px;display:grid;gap:4px;border:1px solid light-dark(#d5ddd8,#354740);border-radius:8px;background:light-dark(#fff,#13201c);box-shadow:0 8px 24px #0003}
.app-group-nav a{display:block;padding:8px 10px;white-space:nowrap;text-decoration:none;color:inherit}.app-group-nav a[aria-current=page]{font-weight:750;background:light-dark(#e8f5ef,#234336)}
.app-group-nav :focus-visible{outline:2px solid var(--cre8-view-accent,#5fc1a8);outline-offset:2px}
@media(max-width:600px){.app-group-nav details>div{position:static;min-width:0}.app-group-nav{align-items:start}.app-group-nav summary{padding:8px}}

/* Runtime chrome: top bar and footer. */
/* Settings is a nav link like its neighbours, not an accent. Below 760px the phone dock carries Settings, and Time has no room. */
.primitive-nav .cre8-settings-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; color: light-dark(#17201d, #e8e8ec); font-size: 13px; font-weight: 600; text-decoration: none; }
.primitive-nav .cre8-settings-link:hover { background: light-dark(rgba(16, 24, 20, 0.06), rgba(255, 255, 255, 0.07)); }
.primitive-nav__right > [data-cre8-active-record-url] > a.primitive-action { min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
@media (max-width: 760px) {
  :root:not([data-cre8-dock="hide"]) .primitive-nav .cre8-settings-link,
  :root:not([data-cre8-dock="hide"]) .primitive-nav__right > [data-cre8-active-record-url] { display: none; }
}
.primitive-footer a.primitive-footer__item-value { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.primitive-footer a.primitive-footer__item-value:hover { color: light-dark(#0f765d, #5fc1a8); text-decoration-color: currentColor; }
.primitive-footer-attention__viewers::before { content: "\00B7"; margin: 0 6px; opacity: 0.6; }

/* Collections: the find row and pagination. */
/* One row: the search box, Search, then the quieter Filters and Clear, all one height. */
.primitive-form#collection-filters > .primitive-form__actions > .primitive-button,
.primitive-form#collection-filters > .collection-filters__toggle-label,
.primitive-form#collection-filters > a.primitive-action { display: inline-flex; align-items: center; box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.primitive-form#collection-filters > .primitive-form__fields input[type=text] { box-sizing: border-box; height: 40px; min-height: 40px; }
/* Collapsed, the row is one search box beside a button that says Search, so the box needs no visible label. */

.primitive-form#collection-filters > a.primitive-action { border-color: transparent; background: none; color: light-dark(#6c7572, #8e9591); }
.primitive-form#collection-filters > a.primitive-action:hover { color: light-dark(#101916, #f2f4f3); }
/* Pagination: the count on the left, the page links on the right, a rule above. */
.primitive-row--collection-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid light-dark(#e3e7e0, #2a2c33); }
.primitive-row--collection-pagination > .primitive-text { margin-inline-end: auto; color: light-dark(#6c7572, #8e9591); font-size: 13px; font-variant-numeric: tabular-nums; }
.primitive-row--collection-pagination > a.primitive-action { min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
/* A list's collection block (ListPageBuilder): its toolbar (the list's title beside the find controls) and its pagination span the content area as the hero does, while the items stay in the column. Each bleeds from the block, which sits in the column. */
.primitive-section--collection { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.primitive-row--collection-toolbar,
.primitive-section--collection > .primitive-row--collection-pagination { --cre8-band-bleed-x: max(var(--cre8-shell-half) - 50%, 0px); margin-inline: calc(-1 * var(--cre8-band-bleed-x)); padding-inline: var(--cre8-band-bleed-x); }
.primitive-row--collection-toolbar { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: start; gap: 12px 32px; padding-block: 14px 16px; border-block: 1px solid light-dark(#e3e7e0, #2a2c33); background: light-dark(#fbfcfb, #101216); }
/* Under the hero or the masthead the toolbar continues that header, with no gap and no second rule. */
:is(.primitive-section--app-hero, .primitive-section--app-masthead) + .primitive-section--collection { margin-top: -18px; }
:is(.primitive-section--app-hero, .primitive-section--app-masthead) + .primitive-section--collection > .primitive-row--collection-toolbar { border-top: 0; }
.primitive-section--app-hero + .primitive-section--collection { margin-top: -22px; }
/* The title sits level with the first row of inputs, below their labels. */
.primitive-row--collection-toolbar > .primitive-text[data-variant="h2"] { margin: 0; padding-top: 28px; font-size: 15px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.3; }
.primitive-row--collection-toolbar > .primitive-form#collection-filters { grid-column: -2; align-items: flex-end; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.primitive-row--collection-toolbar > .primitive-form#collection-filters:only-child { grid-column: 1 / -1; }
.primitive-row--collection-toolbar > .primitive-form#collection-filters > .primitive-form__fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.primitive-row--collection-toolbar > .primitive-form#collection-filters > .primitive-form__fields > .primitive-field { flex: 0 1 11rem; min-width: 8rem; gap: 4px; }
.primitive-row--collection-toolbar > .primitive-form#collection-filters > .primitive-form__fields > .primitive-field:has([name="q"]) { flex: 1 1 16rem; max-width: 26rem; }
.primitive-row--collection-toolbar .primitive-field__label { color: light-dark(#6c7572, #8e9591); font-size: 11px; font-weight: 650; letter-spacing: 0.02em; }
.primitive-row--collection-toolbar .primitive-form__result:empty { display: none; }
.primitive-section--collection > .primitive-row--collection-pagination { margin-top: 0; }
/* A page's own tabs (a Tabs widget the page holds directly) read like the app's tab bar: an underline strip across the content area under the hero, and panels with no frame around them. */
.primitive-page > .primitive-tabs { overflow: visible; border: 0; border-radius: 0; background: none; }
.primitive-page > .primitive-tabs > .primitive-tabs-strip { --cre8-band-bleed-x: max(var(--cre8-shell-half) - 50%, 0px); flex-wrap: nowrap; gap: 2px; margin-inline: calc(-1 * var(--cre8-band-bleed-x)); padding: 0 var(--cre8-band-bleed-x) 3px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--cre8-view-accent) transparent; background: light-dark(#fbfcfb, #101216); }
.primitive-page > .primitive-tabs > .primitive-tabs-strip::-webkit-scrollbar { height: 3px; }
.primitive-page > .primitive-tabs > .primitive-tabs-strip::-webkit-scrollbar-thumb { background: var(--cre8-view-accent); border-radius: 3px; }
.primitive-page > .primitive-tabs > .primitive-tabs-strip > .primitive-tabs-button { flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: light-dark(#4e5754, #a9b0ac); font-size: 14px; font-weight: 600; white-space: nowrap; }
.primitive-page > .primitive-tabs > .primitive-tabs-strip > .primitive-tabs-button:hover { background: none; color: light-dark(#101916, #f2f4f3); }
.primitive-page > .primitive-tabs > .primitive-tabs-strip > :is(.primitive-tabs-button--active, .primitive-tabs-button[aria-selected="true"]) { border-bottom-color: light-dark(#0f765d, #5fc1a8); background: none; color: light-dark(#101916, #f2f4f3); }
.primitive-page > .primitive-tabs > .primitive-tabs-panels { padding: 18px 0 0; }
.primitive-section--app-hero + .primitive-tabs { margin-top: -22px; }
/* A table alone in such a tab is that tab's content, not a card inside it: no frame, its rules running edge to edge, its cells in the column. */
.primitive-page > .primitive-tabs > .primitive-tabs-panels > .primitive-tab > .primitive-table:only-child { --cre8-band-bleed-x: max(var(--cre8-shell-half) - 50%, 0px); margin-inline: calc(-1 * var(--cre8-band-bleed-x)); padding-inline: var(--cre8-band-bleed-x); border-inline: 0; border-top: 0; border-radius: 0; background: none; box-shadow: none; }
.primitive-page > .primitive-tabs > .primitive-tabs-panels > .primitive-tab:has(> .primitive-table:only-child) { margin-top: -18px; }
@media (max-width: 720px) {
  .primitive-row--collection-toolbar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .primitive-row--collection-toolbar > .primitive-text[data-variant="h2"] { padding-top: 0; }
  .primitive-row--collection-toolbar > .primitive-form#collection-filters { grid-column: 1; }
}

/* Cards that are links. */
/* A card that is a link reads as a card, not as one long link: only its title takes the link colour. */
a.primitive-card__link { color: inherit; font-weight: inherit; }
a.primitive-card__link .primitive-card__title { color: light-dark(#0f765d, #5fc1a8); }
a.primitive-card__link .primitive-card__body .primitive-text { color: light-dark(#3c4542, #c3c9c6); font-weight: 400; font-size: 14px; line-height: 1.5; }

/* Records that own a page: a value naming one links to it. */
a.primitive-record-link { color: inherit; text-decoration: underline; text-decoration-color: light-dark(#0f765d, #5fc1a8); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a.primitive-record-link:hover, a.primitive-record-link:focus-visible { color: light-dark(#0f765d, #5fc1a8); }

/* "On this page": jump links to a long page's sections. One row that scrolls
   sideways; a jump scrolls smoothly unless the reader asked for less motion. */
html:has(.cre8-page-index) { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html:has(.cre8-page-index) { scroll-behavior: auto; } }
:root[data-cre8-motion="reduced"]:has(.cre8-page-index) { scroll-behavior: auto; }
.cre8-page-index { display: flex; flex-wrap: nowrap; gap: 2px; padding: 6px; overflow-x: auto; scrollbar-width: none; border: 1px solid light-dark(#d9dedb, #2c3331); border-radius: 10px; background: light-dark(#f6f8f7, #171b1a); }
.cre8-page-index::-webkit-scrollbar { display: none; }
.cre8-page-index > a.primitive-action { flex: none; min-height: 28px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cre8-page-index > a.primitive-action:is(:hover, :focus-visible) { color: light-dark(#0f765d, #5fc1a8); }
:is(.primitive-card, .primitive-section):target { outline: 2px solid light-dark(#0f765d, #5fc1a8); outline-offset: 4px; border-radius: 10px; }


.app-group-nav{gap:4px;align-items:stretch}
.app-group-nav summary{display:flex;align-items:center;gap:8px;min-height:40px;border-radius:5px;color:var(--cre8-view-fg-muted);font-weight:600}
.app-group-nav summary::-webkit-details-marker{display:none}
.app-group-nav summary::after{content:'';flex:none;width:5px;height:5px;border-right:1.5px solid var(--cre8-view-fg-muted);border-bottom:1.5px solid var(--cre8-view-fg-muted);transform:translateY(-2px) rotate(45deg)}
.app-group-nav details[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.app-group-nav .app-group-current>summary{border-color:transparent;border-bottom:2px solid var(--cre8-view-accent);border-radius:0;color:var(--cre8-view-fg)}
.app-group-nav details[open]>summary,.app-group-nav summary:hover{background:var(--cre8-view-surface)}
.app-group-nav details>div{min-width:190px;max-width:min(320px,calc(100vw - 32px));background:light-dark(#fff,#1a1f25);border-color:var(--cre8-view-border-strong);padding:4px}
.app-group-nav a{font-size:13px;font-weight:500;line-height:1.5;border-radius:4px;white-space:normal;overflow-wrap:anywhere}
.app-group-nav a:hover,.app-group-nav a[aria-current=page]{background:var(--cre8-view-chip-bg);color:var(--cre8-view-fg)}
.app-group-nav details:not(.app-group-current){order:0}
.app-group-nav .app-group-current{order:1;flex:1 1 100%;min-width:0}
.app-group-nav .app-group-current>div{position:static;display:flex;flex-wrap:wrap;gap:2px;min-width:0;max-width:none;padding:4px 0;border:0;border-radius:0;background:transparent;box-shadow:none}
.app-group-nav .app-group-current a{min-height:36px;display:inline-flex;align-items:center;padding:6px 10px}
.app-group-nav details:not([open])>div{display:none}


.primitive-section--app-surface>.primitive-page>.primitive-section--app-hero:first-child,
.primitive-section--app-surface>.primitive-section--farm-crop-list>.primitive-page>.primitive-section--app-hero:first-child{margin-inline:calc(-1 * var(--cre8-app-bleed-x));padding-inline:var(--cre8-app-bleed-x)}


/* Full app workspaces own their inner spacing. */
.primitive-section--app-surface:has(.location-workspace, .voetr, .sale-prospects, .drone-workspace) { padding:0; max-width:none; }
.primitive-app-shell__content:has(.location-workspace, .voetr, .sale-prospects, .drone-workspace) { --cre8-app-content-gutter:0px; --cre8-app-surface-gutter:0px; --cre8-shell-pad-x:0px; padding:0; }

:root[data-cre8-theme="light"] { color-scheme: light; }
:root[data-cre8-theme="dark"] { color-scheme: dark; }
:root[data-cre8-accent="blue"] { --cre8-view-accent: light-dark(#185ac4,#8ab4ff); }
:root[data-cre8-accent="violet"] { --cre8-view-accent: light-dark(#7141b9,#c1a0ff); }
:root[data-cre8-density="compact"] { --cre8-page-gutter-x: 16px; --cre8-page-gutter-y: 12px; }
:root[data-cre8-contrast="high"] { --cre8-view-fg-muted: light-dark(#344039,#d7e0eb); --cre8-view-border: light-dark(#68746c,#a4b0be); --cre8-view-border-strong: light-dark(#46534b,#ccd5df); }
:root[data-cre8-motion="reduced"] *, :root[data-cre8-motion="reduced"] *::before, :root[data-cre8-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* "system" is the default, so a page the preference script never touched (no
   attribute, JS off) follows the device setting too. */
@media (prefers-reduced-motion: reduce) { :root:is([data-cre8-motion="system"], :not([data-cre8-motion])) *, :root:is([data-cre8-motion="system"], :not([data-cre8-motion])) *::before, :root:is([data-cre8-motion="system"], :not([data-cre8-motion])) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.cre8-settings { max-width: 1040px; margin: auto; color: var(--cre8-view-fg); }
.cre8-settings h1 { font-size: clamp(2rem,5vw,3.4rem); letter-spacing: -.045em; margin: 12px 0; }
.cre8-settings p { line-height: 1.65; color: var(--cre8-view-fg-muted); }
.cre8-settings section, .cre8-settings details { border: 1px solid var(--cre8-view-border); border-radius: 18px; padding: 24px; margin: 24px 0; background: var(--cre8-view-surface); }
.cre8-settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 20px; }
.cre8-settings label { display: grid; gap: 9px; font-weight: 600; }
.cre8-settings select, .cre8-settings input, .cre8-settings button { font: inherit; min-height: 44px; padding: 10px 14px; border: 1px solid var(--cre8-view-border-strong); border-radius: 10px; background: var(--cre8-view-surface-alt); color: var(--cre8-view-fg); }
.cre8-settings button[type=submit] { background: var(--cre8-view-accent); color: light-dark(#fff,#101b16); }
.cre8-settings-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
/* Plain action buttons carry no primitive-* class, so dim them here: Save and Reset stay disabled until the owner authorizes the caller. */
.cre8-settings-actions button:disabled { opacity: 0.55; cursor: not-allowed; }
.cre8-settings a, .cre8-settings summary { color: var(--cre8-view-accent); }
.cre8-settings a { display: inline-block; padding: 10px 0; }
.cre8-settings-apps { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 4px 20px; max-height: min(540px,60vh); overflow: auto; padding-right: 8px; scrollbar-gutter: stable; }
.cre8-settings :focus-visible, .cre8-mobile-dock a:focus-visible { outline: 2px solid var(--cre8-view-accent); outline-offset: 4px; }
.cre8-mobile-dock { display: none; }
.primitive-section--runtime-footer { display: contents; }
.cre8-settings-link { color: var(--cre8-view-accent); padding: 10px; text-decoration: none; }
.primitive-sidebar__item--active, .primitive-nav__item--active .primitive-nav__link { background: var(--cre8-view-accent); color: light-dark(#fff,#101b16); }
@media (max-width: 760px) {
  :root:not([data-cre8-dock="hide"]) .cre8-mobile-dock { display: flex; justify-content: space-around; flex: none; gap: 4px; padding: 6px 8px max(6px,env(safe-area-inset-bottom)); border-top: 1px solid var(--cre8-view-border-strong); background: light-dark(#fff,#14161a); }
  .cre8-mobile-dock a { display: grid; place-items: center; gap: 2px; min-width: 44px; min-height: 48px; padding: 2px 6px; color: var(--cre8-view-fg-muted); text-decoration: none; font-size: 11px; }
  .cre8-mobile-dock a span { font-size: 20px; }
  .cre8-mobile-dock a[aria-current=page] { color: var(--cre8-view-accent); background: var(--cre8-view-chip-bg); border-radius: 10px; }
  .primitive-app-shell { height: 100dvh; min-height: 100dvh; }
  .cre8-settings section { padding: 18px; }
}

.cre8-settings input { width: 100%; min-width: 0; box-sizing: border-box; }
.cre8-settings-grid > label { min-width: 0; }
.cre8-settings label small { font-weight: 400; color: var(--cre8-view-fg-muted); line-height: 1.5; }

.cre8-settings [hidden] { display: none !important; }

/* Sidebar-apps fieldset: checkboxes, not the 44px selects the grid above styles. */
.cre8-settings fieldset { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; }
.cre8-settings legend { font-size: 1.15rem; font-weight: 700; padding: 0; margin-bottom: 4px; }
.cre8-settings-check-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 12px 0 16px; }
.cre8-settings-check-tools .cre8-settings-search { flex: 1 1 240px; }
.cre8-settings-checks { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 6px 20px; max-height: min(420px,50vh); overflow: auto; padding-right: 8px; scrollbar-gutter: stable; }
.cre8-settings-checks label { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 36px; cursor: pointer; }
.cre8-settings-checks input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--cre8-view-accent); }
/* Settings speaks the shared design language: sections are reached by chips,
   an app is a card, and a way to another page is an outlined action. No bare
   underlined links. */
.cre8-settings-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.cre8-settings-nav a, .cre8-settings a.cre8-settings-action, .cre8-settings a.cre8-settings-back {
  display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--cre8-view-border);
  border-radius: 999px; background: var(--cre8-view-surface); color: var(--cre8-view-fg-muted);
  font-size: 13px; font-weight: 650; text-decoration: none;
}
.cre8-settings-nav a:hover, .cre8-settings a.cre8-settings-action:hover, .cre8-settings a.cre8-settings-back:hover {
  border-color: var(--cre8-view-accent); color: var(--cre8-view-fg);
}
.cre8-settings a.cre8-settings-back { border-color: transparent; background: transparent; padding-left: 0; }
.cre8-settings-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cre8-settings-apps { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }
.cre8-settings a.cre8-settings-app {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--cre8-view-border);
  border-radius: 12px; background: var(--cre8-view-surface-alt); color: var(--cre8-view-fg);
  font-size: 14px; font-weight: 650; text-decoration: none; min-width: 0; overflow-wrap: anywhere;
}
.cre8-settings a.cre8-settings-app:hover { border-color: var(--cre8-view-accent); }
.cre8-settings a.cre8-settings-app > span {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
  background: color-mix(in srgb, var(--cre8-view-accent) 16%, transparent); color: var(--cre8-view-accent);
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em;
}

/* The runtime sidebar's first minute: a filter over the app list, the Pinned and
   Recent sections the preferences binder fills (served empty, so hidden until
   they hold something, and out of the way while filtering), letter headings,
   and a pin on each app group. The collapsed rail keeps none of the text. */
.primitive-sidebar__filter { display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 0 0 6px; padding: 6px 10px; font: inherit; font-size: 13px; border: 1px solid var(--cre8-view-border); border-radius: 8px; background: var(--cre8-view-surface-alt); color: var(--cre8-view-fg); }
.primitive-sidebar__filter:focus-visible { outline: 2px solid var(--cre8-view-accent); outline-offset: 1px; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__filter { display: none; }
.primitive-sidebar__group:is([data-cre8-sidebar-section="pinned"], [data-cre8-sidebar-section="recent"]):not([data-cre8-filled="true"]) { display: none; }
.primitive-sidebar[data-cre8-sidebar-filtering="true"] .primitive-sidebar__group:is([data-cre8-sidebar-section="pinned"], [data-cre8-sidebar-section="recent"]) { display: none; }
.primitive-sidebar__group[data-cre8-filtered="true"], .primitive-sidebar__item[hidden] { display: none; }
.primitive-sidebar__group[data-cre8-sidebar-section="band"] { padding: 10px 0 0; }
.primitive-sidebar__group[data-cre8-sidebar-section="band"] .primitive-sidebar__group-label { font-size: 11px; color: var(--cre8-view-fg); border-top: 1px solid var(--cre8-view-border); padding-top: 8px; }
.primitive-sidebar__group-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.primitive-sidebar__group[data-cre8-app] > .primitive-sidebar__group-label { justify-content: flex-start; }
.primitive-sidebar__expand { appearance: none; order: -1; flex: none; width: 18px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--cre8-view-fg-muted); cursor: pointer; }
.primitive-sidebar__expand::before { content: '›'; display: block; font-size: 18px; line-height: 1; transform: rotate(0deg); }
.primitive-sidebar__expand[aria-expanded="true"]::before { transform: rotate(90deg); }
.primitive-sidebar__expand:focus-visible { outline: 2px solid var(--cre8-view-accent); outline-offset: 1px; }
.primitive-sidebar[data-collapsed="false"]:not([data-cre8-sidebar-filtering="true"]) .primitive-sidebar__group[data-cre8-app][data-cre8-sidebar-open="false"] > .primitive-sidebar__item { display: none; }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__expand { display: none; }
.primitive-sidebar__pin { appearance: none; flex: none; font: inherit; font-size: 11px; line-height: 1; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--cre8-view-fg-muted); opacity: 0; cursor: pointer; }
.primitive-sidebar__group[data-cre8-app] > .primitive-sidebar__group-label .primitive-sidebar__pin { margin-left: auto; }
.primitive-sidebar__group:hover .primitive-sidebar__pin, .primitive-sidebar__pin:focus-visible, .primitive-sidebar__pin[aria-pressed="true"] { opacity: 1; }
.primitive-sidebar__pin[aria-pressed="true"] { color: var(--cre8-view-accent); }
.primitive-sidebar[data-collapsed="true"] .primitive-sidebar__pin { display: none; }

/* Home's first minute: the three starting actions in one row, and the recents
   row the binder fills from the sidebar (hidden until it holds a chip). */
.primitive-row--home-start { gap: 12px; margin: 4px 0 12px; }
.primitive-section--home-recents:not([data-cre8-filled="true"]) { display: none; }
.primitive-section--home-recents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.primitive-section--home-recents > .primitive-section__header { flex: 1 1 100%; margin: 0; }
.primitive-section--home-recents .primitive-section__title { font-size: 1rem; margin: 0; }
a.cre8-home-recent { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--cre8-view-border); border-radius: 999px; background: var(--cre8-view-surface); color: var(--cre8-view-fg); font-size: 13px; font-weight: 650; text-decoration: none; }
a.cre8-home-recent:hover { border-color: var(--cre8-view-accent); }

/* Chart colour tokens.
   Every SSR chart builder (live_chart.rs, price_chart.rs, the grammar
   Chart/Sparkline in render_html) and the chart scripts reference these names
   as `var(--cre8-chart-*, #fallback)` / `var(--cre8-ribbon-*, #fallback)`.
   They ride the base theme bundle (page_shell::DEFAULT_BASE_THEME_CSS), so a
   chart follows the reader's light/dark scheme the same way the
   `--cre8-view-*` palette does: each token is one light-dark() pair resolved by
   the `color-scheme` that base_theme.css / view_preferences.css set on :root.
   The fallbacks inside the builders only apply where this sheet is absent.

   Categorical sets (ribbon, overlay, up/down) were checked with the dataviz
   palette validator (OKLCH lightness band, chroma floor, CVD separation under
   Machado 2009 protan/deutan, normal-vision floor, contrast) on 2026-09-23:
     ribbon 0..7   adjacent pairs pass in both schemes: worst CVD dE 8.4,
                   worst normal-vision dE 18.3 light / 19.3 dark.
     overlay 1..5  ordered so neighbours stay apart: worst CVD dE 13.4 light /
                   15.9 dark, worst normal-vision dE 27.0 / 26.5.
     up / down     CVD dE 9.8 light / 10.2 dark, normal-vision dE 28.7 / 28.6.
   The regime ribbon picks its slot by hashing the regime id, so two hashed
   neighbours are not order-controlled; segments carry inline labels and
   <title>s, which is the secondary channel that covers that case.

   WCAG contrast of each mark against --cre8-chart-surface
   (light #f8faf7 | dark #121418), measured 2026-09-23:
     ribbon-0 4.21 | 5.07   ribbon-1 3.05 | 4.75   ribbon-2 3.24 | 5.41
     ribbon-3 3.31 | 6.00   ribbon-4 3.76 | 4.67   ribbon-5 4.71 | 3.73
     ribbon-6 8.15 | 5.90   ribbon-7 3.77 | 5.71
     overlay-1 3.31 | 6.00  overlay-2 8.15 | 5.90  overlay-3 3.05 | 4.75
     overlay-4 4.21 | 5.07  overlay-5 3.76 | 4.67
     up 4.15 | 4.91   down 4.22 | 4.79   neutral 3.68 | 5.99
     drawing 14.12 | 15.29   crosshair 6.21 | 8.68   axis-label 5.42 | 7.21
     tooltip fg on tooltip bg 16.70 | 14.55
   Every series colour clears 3:1 against the surface in both schemes; drawn
   straight on the light page body (#f6f8f4) the lowest is ribbon-1 at 2.99:1,
   and on #ffffff cards 3.20:1.
   Grid (1.19 | 1.26) and axis (1.61 | 1.79) are hairlines and deliberately
   recessive. On-series text (labels printed inside a filled segment) is white
   on the light-scheme fills (3.20..8.56:1 on solid fills) and near-black on
   the dark-scheme fills (3.95..6.37:1). */
:root {
  /* The plane charts are read against; text halos and knock-outs use it. */
  --cre8-chart-surface: light-dark(#f8faf7, #121418);

  /* Direction: rising / falling bars, positive / negative flows. */
  --cre8-chart-up: light-dark(#0f8a5f, #12966a);
  --cre8-chart-down: light-dark(#d9412b, #e3502f);
  /* Folded "other" series and marks that carry no identity. */
  --cre8-chart-neutral: light-dark(#7a847f, #8b949e);

  /* Categorical series slots, assigned in order. */
  --cre8-ribbon-0: light-dark(#2a78d6, #3987e5);
  --cre8-ribbon-1: light-dark(#eb6834, #d95926);
  --cre8-ribbon-2: light-dark(#199e70, #199e70);
  --cre8-ribbon-3: light-dark(#bd7c00, #c98500);
  --cre8-ribbon-4: light-dark(#d55181, #d55181);
  --cre8-ribbon-5: light-dark(#008300, #008300);
  --cre8-ribbon-6: light-dark(#4a3aa7, #9085e9);
  --cre8-ribbon-7: light-dark(#e34948, #e66767);

  /* A lone series: the site accent when a site template declares one,
     otherwise the first categorical slot. */
  --cre8-chart-series: var(--cre8-accent, var(--cre8-ribbon-0));

  /* Indicator overlays drawn over up/down candles: no green or red slot. */
  --cre8-chart-overlay-1: light-dark(#bd7c00, #c98500);
  --cre8-chart-overlay-2: light-dark(#4a3aa7, #9085e9);
  --cre8-chart-overlay-3: light-dark(#eb6834, #d95926);
  --cre8-chart-overlay-4: light-dark(#2a78d6, #3987e5);
  --cre8-chart-overlay-5: light-dark(#d55181, #d55181);

  /* Reader drawings (trend lines, levels, notes): ink, not a series hue. */
  --cre8-chart-drawing: light-dark(#1f2a26, #e6ebe8);

  /* Chrome. */
  --cre8-chart-grid: light-dark(#e3e7e2, #252930);
  --cre8-chart-axis: light-dark(#c2c9c1, #3b414a);
  --cre8-chart-axis-label: light-dark(#5f6964, #9aa3ad);
  --cre8-chart-crosshair: light-dark(#56605b, #aab3bc);
  --cre8-chart-tooltip-bg: light-dark(#ffffff, #1c2026);
  --cre8-chart-tooltip-fg: light-dark(#16201c, #eef2f7);
  --cre8-chart-on-series: light-dark(#ffffff, #0b0c10);
}

/* The one checkout: pay sheet (inside purchase forms) + receipt.
 * Colours come from the page: a site's --cre8-* tokens first, then the app
 * shell's --cre8-view-* tokens, then neutral fallbacks. */
.cre8-pay, .cre8-receipt, .cre8-lens, .cre8-lens__more, .cre8-lens-pair {
  --pay-fg: var(--cre8-fg, var(--cre8-view-fg, #16161a));
  --pay-muted: var(--cre8-fg-muted, var(--cre8-view-fg-muted, #6b6b76));
  --pay-border: var(--cre8-border, var(--cre8-view-border, rgba(127, 127, 127, 0.28)));
  --pay-accent: var(--cre8-accent, var(--cre8-view-accent, #5b4cf0));
  --pay-accent-fg: var(--cre8-accent-fg, #fff);
  --pay-surface: var(--cre8-card-bg, var(--cre8-view-surface, transparent));
  --pay-error: var(--cre8-error-fg, var(--cre8-view-danger, #c2362f));
  --pay-radius: var(--cre8-radius, 12px);
  color: var(--pay-fg);
}
.cre8-pay {
  display: grid;
  gap: 0.875rem;
  margin: 0.25rem 0 0.75rem;
  padding: 1rem;
  border: 1px solid var(--pay-border);
  border-radius: var(--pay-radius);
  background: var(--pay-surface);
  min-width: 0;
}
.cre8-pay__title { margin: 0; font-size: 1rem; font-weight: 600; }
.cre8-pay__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cre8-pay__lines:empty { display: none; }
.cre8-pay__line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9375rem; }
.cre8-pay__line-label { min-width: 0; overflow-wrap: anywhere; }
.cre8-pay__line-note { display: block; font-size: 0.8125rem; color: var(--pay-muted); }
.cre8-pay__line-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cre8-pay__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: 0.75rem; border-top: 1px solid var(--pay-border);
}
.cre8-pay__total strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
/* The value lens: one sentence under a figure the page already shows, read
 * from prices open on the exchange. `__more` is the "See how" disclosure
 * beside it; `-pair` stacks a give line, a get line and their verdict. */
.cre8-lens { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--pay-muted); overflow-wrap: anywhere; }
.cre8-lens[hidden] { display: none; }
.cre8-lens a { color: inherit; font-weight: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.cre8-lens a:hover, .cre8-lens a:focus-visible { color: var(--pay-accent); }
.cre8-lens__more { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--pay-muted); min-width: 0; }
.cre8-lens__more > summary { width: fit-content; cursor: pointer; color: var(--pay-accent); }
.cre8-lens__more > summary:focus-visible { outline: 2px solid var(--pay-accent); outline-offset: 2px; }
.cre8-lens__more[open] > summary { margin-bottom: 0.5rem; }
.cre8-lens-pair {
  display: grid; gap: 0.25rem; margin: 0 0 0.75rem; padding: 0.75rem 1rem; min-width: 0;
  border: 1px solid var(--pay-border); border-radius: var(--pay-radius); background: var(--pay-surface);
}
.cre8-lens-pair .cre8-lens { margin: 0; }
/* On the pay sheet the line sits under the total, on the amount's side. */
.cre8-pay__lens { margin: -0.35rem 0 0; text-align: right; }
.cre8-pay__rails { border: 0; margin: 0; padding: 0; min-width: 0; }
.cre8-pay__legend, .cre8-pay__label {
  padding: 0; margin-bottom: 0.5rem; font-size: 0.75rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pay-muted);
}
.cre8-pay__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.5rem; }
.cre8-pay__rail {
  position: relative; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--pay-border); border-radius: calc(var(--pay-radius) - 4px);
  cursor: pointer; min-width: 0; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cre8-pay__rail:hover { border-color: var(--pay-accent); }
.cre8-pay__rail:has(.cre8-pay__radio:checked), .cre8-pay__rail.is-selected {
  border-color: var(--pay-accent);
  box-shadow: 0 0 0 1px var(--pay-accent) inset;
  background: color-mix(in srgb, var(--pay-accent) 7%, transparent);
}
.cre8-pay__rail:has(.cre8-pay__radio:focus-visible) { outline: 2px solid var(--pay-accent); outline-offset: 2px; }
.cre8-pay__radio { position: absolute; opacity: 0; pointer-events: none; }
.cre8-pay__mark {
  flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 1.6rem;
  border: 1px solid var(--pay-border); border-radius: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
}
.cre8-pay__mark--wallet { background: var(--pay-accent); color: var(--pay-accent-fg); border-color: transparent; }
.cre8-pay__mark--apple { background: #000; color: #fff; border-color: #000; }
.cre8-pay__rail-text { display: grid; min-width: 0; }
.cre8-pay__rail-name { font-weight: 600; font-size: 0.9375rem; }
.cre8-pay__rail-detail { font-size: 0.8125rem; color: var(--pay-muted); overflow-wrap: anywhere; }
.cre8-pay__badge {
  margin-left: auto; flex: none; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--pay-border); color: var(--pay-muted);
}
.cre8-pay__rail[data-state="soon"] .cre8-pay__rail-name { color: var(--pay-muted); }
.cre8-pay__panel { display: grid; gap: 0.6rem; }
.cre8-pay__panel[hidden] { display: none; }
.cre8-pay__note { margin: 0; font-size: 0.875rem; color: var(--pay-muted); }
.cre8-pay__wallet { margin: 0; font-size: 0.875rem; }
.cre8-pay__card { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cre8-pay__ghost {
  padding: 0.65rem 0.75rem; border: 1px dashed var(--pay-border); border-radius: 8px;
  font-size: 0.875rem; color: var(--pay-muted); opacity: 0.8;
}
.cre8-pay__ghost--wide { grid-column: 1 / -1; }
.cre8-pay__apple-button {
  display: inline-grid; place-items: center; justify-self: start; min-width: 11rem; height: 2.75rem; padding: 0 1.25rem;
  border-radius: 8px; background: #000; color: #fff; font-weight: 600; font-size: 1.05rem; opacity: 0.55;
}
.cre8-pay__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cre8-pay__chips li {
  padding: 0.25rem 0.6rem; border: 1px solid var(--pay-border); border-radius: 999px;
  font-size: 0.8125rem; color: var(--pay-muted);
}
.cre8-pay__switch, .cre8-pay__action {
  justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem;
  color: var(--pay-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cre8-pay__email { display: grid; gap: 0.35rem; }
.cre8-pay__email .cre8-pay__label { margin: 0; }
.cre8-pay__input {
  width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--pay-border); border-radius: 8px;
  background: transparent; color: inherit; font: inherit; box-sizing: border-box;
}
.cre8-pay__input:focus-visible { outline: 2px solid var(--pay-accent); outline-offset: 1px; }
.cre8-pay__fine { margin: 0; font-size: 0.8125rem; color: var(--pay-muted); }
.cre8-pay__status { margin: 0; font-size: 0.875rem; min-height: 0; }
.cre8-pay__status:empty { display: none; }
.cre8-pay__status.is-error { color: var(--pay-error); }
.cre8-pay__status.is-ok { color: var(--pay-accent); }
.cre8-pay__submit { width: 100%; }
.cre8-pay__submit[disabled], [data-cre8-pay-submit][disabled] { opacity: 0.55; cursor: not-allowed; }

/* Receipt */
.cre8-receipt {
  display: grid; gap: 0.6rem; justify-items: start; max-width: 36rem;
  padding: 1.5rem; border: 1px solid var(--pay-border); border-radius: var(--pay-radius); background: var(--pay-surface);
}
.cre8-receipt__seal {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--pay-accent); color: var(--pay-accent-fg); font-size: 1.2rem; font-weight: 700;
}
.cre8-receipt[data-status="pending"] .cre8-receipt__seal,
.cre8-receipt[data-status="requested"] .cre8-receipt__seal { background: transparent; color: var(--pay-accent); border: 2px solid var(--pay-accent); }
.cre8-receipt[data-status="refunded"] .cre8-receipt__seal,
.cre8-receipt[data-status="cancelled"] .cre8-receipt__seal { background: var(--pay-muted); }
.cre8-receipt__eyebrow { margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pay-muted); }
.cre8-receipt__title { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.cre8-receipt__subtitle { margin: 0; color: var(--pay-muted); }
.cre8-receipt__lines { width: 100%; padding-top: 0.5rem; }
.cre8-receipt__total { padding-top: 0.5rem; border-top: 1px solid var(--pay-border); font-weight: 600; }
.cre8-receipt__meta { width: 100%; margin: 0.25rem 0 0; display: grid; gap: 0.35rem; }
.cre8-receipt__meta div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.cre8-receipt__meta dt { color: var(--pay-muted); }
.cre8-receipt__meta dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.cre8-receipt__next { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.cre8-receipt__action {
  display: inline-flex; align-items: center; padding: 0.55rem 1rem; border-radius: 999px;
  border: 1px solid var(--pay-border); color: inherit; text-decoration: none; font-size: 0.9375rem;
}
.cre8-receipt__action--primary { background: var(--pay-accent); color: var(--pay-accent-fg); border-color: transparent; }
@media (max-width: 480px) {
  .cre8-pay { padding: 0.85rem; }
  .cre8-pay__options { grid-template-columns: 1fr; }
  .cre8-receipt { padding: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .cre8-pay__rail { transition: none; } }