/* OMNI components 1.8.0 — the OMNI Deck component set (ABI/DESIGN-SYSTEM.md).
 *
 * Load after omni-tokens.css. Uses only --omni-* tokens, so every theme and
 * the dark/contrast modes follow automatically.
 *
 *   Page shell (standalone pages): .omni-surface on <body>, .omni-appbar,
 *     .omni-brand, .omni-segmented, .omni-container, .omni-skip-link
 *   Components (Deck and every page): .ui-page-header, .ui-eyebrow, .ui-card,
 *     .ui-button, .ui-badge, .ui-field, .ui-choice, .ui-switch, .ui-alert,
 *     .ui-progress-row, .ui-meter, .ui-hbar, .ui-tabs, .ui-breadcrumbs,
 *     .ui-table, .ui-sticky-actions
 * Served as /public/omni-components.css (Deck) and /assets/omni-components.css
 * (Connector). */

/* Page shell ---------------------------------------------------------------- */
.omni-surface {
  min-height:100vh; margin:0; color:var(--omni-ink); font-family:var(--omni-font-body); line-height:1.5;
  background:var(--omni-body-art); background-attachment:fixed; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
.omni-surface *, .omni-surface *::before, .omni-surface *::after { box-sizing:border-box; }
.omni-surface :is(h1,h2,h3,h4) { font-family:var(--omni-font-display); }
.omni-surface :focus-visible { outline:3px solid var(--omni-focus); outline-offset:3px; }
.omni-surface [hidden] { display:none!important; }
/* Tailwind interop: a page that also loads Tailwind keeps its `hidden` toggle. */
.omni-surface .hidden { display:none!important; }
.omni-container { width:100%; max-width:56rem; margin-inline:auto; padding-inline:var(--omni-space-4); }
.omni-skip-link { position:absolute; z-index:60; top:.75rem; left:.75rem; transform:translateY(-200%); border-radius:var(--omni-radius-sm); padding:.6rem .9rem; color:var(--omni-ink-strong); font-weight:700; background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-lg); }
.omni-skip-link:focus { transform:none; }

/* The Deck's cockpit as a top bar: the sidebar art, the OMNI mark on brand
   navy, the mono eyebrow. A standalone page reads as the same product. */
.omni-appbar { position:relative; z-index:20; color:var(--omni-sidebar-ink); background:var(--omni-sidebar-art); border-bottom:var(--omni-border-width) solid color-mix(in srgb,var(--omni-sidebar-ink) 10%,transparent); }
.omni-appbar__row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--omni-space-3); min-height:4rem; padding-block:var(--omni-space-2); }
.omni-appbar__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--omni-space-2); }
.omni-appbar a { color:inherit; }
.omni-brand { display:inline-flex; min-height:var(--omni-touch-target); align-items:center; gap:.7rem; color:var(--omni-sidebar-ink); text-decoration:none; }
.omni-brand__mark { display:grid; width:2.5rem; height:2.5rem; flex:0 0 2.5rem; place-items:center; padding:.25rem; border:1px solid rgba(255,255,255,.18); border-radius:var(--omni-radius-sm); background:var(--omni-brand-navy); box-shadow:0 12px 28px -12px rgba(37,39,103,.95),inset 0 1px rgba(255,255,255,.28); }
.omni-brand__mark img { width:100%; height:100%; object-fit:contain; }
.omni-brand__text { display:flex; min-width:0; flex-direction:column; }
.omni-brand__eyebrow { color:var(--omni-sidebar-muted); font-family:var(--omni-font-mono); font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.omni-brand__name { overflow:hidden; color:var(--omni-sidebar-ink); font-family:var(--omni-font-display); font-size:1.1rem; font-weight:700; letter-spacing:-.02em; white-space:nowrap; text-overflow:ellipsis; }
.omni-segmented { display:inline-flex; flex-wrap:wrap; gap:.2rem; border:1px solid color-mix(in srgb,var(--omni-sidebar-ink) 14%,transparent); border-radius:999px; padding:.2rem; background:var(--omni-sidebar-surface); }
.omni-segmented button { display:inline-flex; min-height:40px; align-items:center; gap:.35rem; border:0; border-radius:999px; padding:.4rem .85rem; color:var(--omni-sidebar-muted); font:inherit; font-size:.8rem; font-weight:700; background:transparent; cursor:pointer; transition:color var(--omni-duration) var(--omni-ease),background-color var(--omni-duration) var(--omni-ease); }
.omni-segmented button:hover { color:var(--omni-sidebar-ink); }
.omni-segmented button[aria-pressed="true"] { color:var(--omni-ink-strong); background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-sm); }
.omni-appbar :focus-visible { outline-color:color-mix(in oklab,var(--omni-primary) 55%,white); }

/* Components (moved unchanged from the Deck in 1.2.0) ------------------------ */
.ui-page-header {
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--omni-space-6);
  margin-bottom:var(--omni-space-5);
}
.ui-page-header h1 { margin:.35rem 0 .55rem; color:var(--omni-ink-strong); font-size:clamp(2.15rem,5vw,4.6rem); line-height:.94; letter-spacing:-.055em; font-weight:780; }
.ui-page-header p:not(.ui-eyebrow) { max-width:58rem; color:var(--omni-muted); font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.65; }
.ui-page-header--hero { position:relative; min-height:19rem; overflow:hidden; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-lg); padding:clamp(1.5rem,4vw,3.5rem); background:linear-gradient(135deg,var(--omni-surface-raised),var(--omni-primary-soft)); box-shadow:var(--omni-shadow-lg); }
.ui-page-header--hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--omni-grid-color) 1px,transparent 1px),linear-gradient(var(--omni-grid-color) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(90deg,transparent,black 70%); }
.ui-page-header--hero > * { position:relative; z-index:1; }
/* One full-width column: the base .ui-page-header justify-content:space-between
   would otherwise shrink the grid track to its content and park the header
   actions right next to the title (Deck visual pass 2026-09-25). */
.ui-page-header--workspace { display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; align-items:stretch; gap:var(--omni-space-3); margin-bottom:var(--omni-space-6); }
.ui-page-header__main { display:flex; min-width:0; align-items:flex-end; justify-content:space-between; gap:var(--omni-space-5); }
.ui-page-header__copy { min-width:0; }
.ui-page-header--workspace :is(h1,h2,h3) { margin:.2rem 0 .45rem; color:var(--omni-ink-strong); font-size:clamp(1.9rem,4vw,3rem); line-height:1.04; letter-spacing:-.04em; font-weight:770; }
.ui-page-header--workspace p:not(.ui-eyebrow) { max-width:52rem; color:var(--omni-muted); font-size:.9rem; line-height:1.6; }
.ui-page-subheader { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:var(--omni-space-3); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); padding:.35rem; background:var(--omni-surface); box-shadow:var(--omni-shadow-sm); }
.ui-page-tabs { display:flex; min-width:0; flex-wrap:wrap; align-items:center; gap:.25rem; }
.ui-page-tabs a { position:relative; display:inline-flex; min-height:44px; align-items:center; justify-content:center; border-radius:var(--omni-radius-sm); padding:.6rem .85rem; color:var(--omni-muted); font-size:.75rem; font-weight:700; white-space:nowrap; transition:color var(--omni-motion-fast) var(--omni-ease-out),background-color var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out); }
.ui-page-tabs a:hover { color:var(--omni-primary); background:var(--omni-surface-soft); }
.ui-page-tabs a[aria-current="page"] { color:var(--omni-primary); background:var(--omni-primary-soft); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--omni-primary) 24%,transparent); }
/* The current page tab's bar grows from the left once on load (server-rendered state). */
.ui-page-tabs a[aria-current="page"]::after { content:""; position:absolute; right:.6rem; bottom:.3rem; left:.6rem; height:2px; background:currentColor; opacity:var(--omni-underline-sweep); animation:ui-grow-x var(--omni-motion-slow) var(--omni-ease-out) both; }
.ui-page-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--omni-space-2); }
.ui-eyebrow,.ui-kicker { color:var(--omni-primary); font-family:var(--omni-font-mono); font-size:.68rem!important; font-weight:800; letter-spacing:.14em; line-height:1.4!important; text-transform:uppercase; }
.ui-eyebrow { display:flex; align-items:center; gap:.55rem; }
.ui-eyebrow > span { width:1.5rem; height:2px; border-radius:999px; background:currentColor; }
.ui-kicker { margin:0 0 .4rem; }
.ui-inline-list,.ui-demo-row,.ui-meta-pills { display:flex; flex-wrap:wrap; align-items:center; gap:var(--omni-space-2); }
.ui-inline-list { margin-top:var(--omni-space-4); }
.ui-section-heading { display:flex; align-items:end; justify-content:space-between; gap:var(--omni-space-4); margin-bottom:var(--omni-space-4); }
.ui-section-heading h2 { margin:.2rem 0 0; color:var(--omni-ink-strong); font-size:clamp(1.55rem,3vw,2.45rem); line-height:1.08; letter-spacing:-.035em; font-weight:750; }
.ui-section-heading > code { max-width:44%; overflow-wrap:anywhere; color:var(--omni-muted); font-size:.72rem; text-align:right; }
.ui-section-subheading { display:flex; align-items:end; justify-content:space-between; gap:var(--omni-space-4); margin:var(--omni-space-6) 0 var(--omni-space-3); }
.ui-section-subheading h3 { color:var(--omni-ink-strong); font-size:1.05rem; font-weight:760; }
.ui-section-subheading p { max-width:48rem; color:var(--omni-muted); font-size:.8rem; text-align:right; }

.ui-card {
  min-width:0; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius);
  padding:var(--omni-space-5); color:var(--omni-ink); background:var(--omni-surface); box-shadow:var(--omni-shadow); backdrop-filter:blur(var(--omni-blur));
}
.ui-card--raised { background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-lg); }
.ui-card--accent { border-color:color-mix(in oklab,var(--omni-primary) 30%,var(--omni-line)); background:linear-gradient(135deg,var(--omni-surface-raised),var(--omni-primary-soft)); }
.ui-card--danger { border-color:color-mix(in oklab,var(--omni-danger) 28%,var(--omni-line)); background:linear-gradient(135deg,var(--omni-surface-raised),var(--omni-danger-soft)); }
.ui-card-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--omni-space-3); margin-bottom:var(--omni-space-4); }
body[data-section="settings-deck"] .ui-card-heading { flex-wrap:wrap; }
.ui-card-heading h3 { color:var(--omni-ink-strong); font-size:1rem; font-weight:750; }
.ui-card-heading code { color:var(--omni-faint); font-size:.68rem; }

.ui-button {
  display:inline-flex; min-height:var(--omni-button-height); align-items:center; justify-content:center; gap:var(--omni-space-2);
  border:var(--omni-border-width) solid transparent; border-radius:var(--omni-radius-sm); padding:calc(.64rem * var(--omni-density)) calc(1rem * var(--omni-density));
  color:var(--omni-ink); font-size:.82rem; font-weight:720; line-height:1.2; text-decoration:none; cursor:pointer;
  position:relative; isolation:isolate; overflow:hidden;
  transition:transform var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out),background-color var(--omni-motion-fast) var(--omni-ease-out),border-color var(--omni-motion-fast) var(--omni-ease-out),color var(--omni-motion-fast) var(--omni-ease-out),outline-offset var(--omni-motion-fast) var(--omni-ease-out);
}
.ui-button svg,.ui-icon-button svg { width:var(--omni-icon-sm); height:var(--omni-icon-sm); flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Primary: an ink fill sweeps in from the left under the label (transform only; the
   solid background stays, so level 0 is simply the darker hover colour). */
.ui-button--primary { color:var(--omni-on-primary); background:var(--omni-primary); box-shadow:0 10px 24px -14px color-mix(in srgb,var(--omni-primary) 75%,transparent); }
.ui-button--primary::before { content:""; position:absolute; z-index:-1; inset:0; background:color-mix(in oklab,var(--omni-primary) 83%,black); transform:scaleX(0); transform-origin:left center; transition:transform var(--omni-motion-base) var(--omni-ease-out); }
.ui-button--primary:hover:not(:disabled)::before,.ui-button--primary:focus-visible::before { transform:scaleX(1); }
.ui-button--primary:hover:not(:disabled) { transform:translateY(var(--omni-hover-lift)) scale(var(--omni-hover-scale)); box-shadow:0 15px 30px -16px color-mix(in srgb,var(--omni-primary) 84%,transparent),var(--omni-glow); }
.ui-button--secondary { border-color:color-mix(in oklab,var(--omni-primary) 35%,var(--omni-line)); color:var(--omni-primary); background:var(--omni-primary-soft); }
.ui-button--secondary:hover:not(:disabled) { border-color:var(--omni-primary); background:color-mix(in oklab,var(--omni-primary) 16%,var(--omni-surface-raised)); transform:translateY(var(--omni-hover-lift)); }
/* Ghost: a hairline underline sweeps in from the left; at levels 0–1 the sweep is
   off and the border/colour change is the whole hover. */
.ui-button--ghost { border-color:var(--omni-line); color:var(--omni-muted); background:var(--omni-surface-raised); }
.ui-button--ghost::after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:currentColor; opacity:var(--omni-underline-sweep); transform:scaleX(0); transform-origin:left center; transition:transform var(--omni-motion-base) var(--omni-ease-out); }
.ui-button--ghost:hover:not(:disabled)::after { transform:scaleX(1); }
.ui-button--ghost:hover:not(:disabled) { border-color:var(--omni-line-strong); color:var(--omni-ink-strong); background:var(--omni-surface-soft); }
.ui-button--danger { border-color:color-mix(in oklab,var(--omni-danger) 28%,var(--omni-line)); color:var(--omni-danger); background:var(--omni-danger-soft); }
.ui-button--danger:hover:not(:disabled) { border-color:var(--omni-danger); background:color-mix(in oklab,var(--omni-danger) 17%,var(--omni-surface-raised)); }
.ui-button--small { min-height:32px; padding:.3rem .7rem; font-size:.72rem; }
.ui-button--large { min-height:52px; padding:.8rem 1.3rem; font-size:.92rem; }
.ui-button:disabled { opacity:.48; cursor:not-allowed; box-shadow:none; }
.ui-button:active:not(:disabled) { transform:translateY(1px) scale(var(--omni-press-scale)); transition-duration:calc(var(--omni-motion-fast) / 2); }
.ui-icon-button { display:grid; width:44px; height:44px; place-items:center; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); color:var(--omni-muted); background:var(--omni-surface-soft); }
.ui-text-link { color:var(--omni-primary); font-size:.82rem; font-weight:720; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--omni-primary) 35%,transparent); text-underline-offset:4px; }
.ui-text-link:hover { text-decoration-color:currentColor; }

.ui-badge { display:inline-flex; box-sizing:border-box; height:var(--omni-pill-height); max-width:100%; align-items:center; gap:var(--omni-pill-gap); border:1px solid var(--omni-line); border-radius:999px; padding:var(--omni-pill-pad); color:var(--omni-muted); font-size:var(--omni-pill-font); font-weight:700; line-height:1; text-decoration:none; white-space:nowrap; vertical-align:middle; background:var(--omni-surface-soft); }
.ui-badge--info { border-color:color-mix(in oklab,var(--omni-info) 28%,var(--omni-line)); color:var(--omni-info); background:var(--omni-info-soft); }
.ui-badge--success { border-color:color-mix(in oklab,var(--omni-success) 28%,var(--omni-line)); color:var(--omni-success); background:var(--omni-success-soft); }
.ui-badge--warning { border-color:color-mix(in oklab,var(--omni-warning) 28%,var(--omni-line)); color:var(--omni-warning); background:var(--omni-warning-soft); }
.ui-badge--danger { border-color:color-mix(in oklab,var(--omni-danger) 28%,var(--omni-line)); color:var(--omni-danger); background:var(--omni-danger-soft); }
.ui-badge--violet { border-color:color-mix(in oklab,var(--omni-violet) 28%,var(--omni-line)); color:var(--omni-violet); background:var(--omni-violet-soft); }

.ui-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--omni-space-4); }
.ui-field { display:grid; align-content:start; gap:.42rem; min-width:0; color:var(--omni-ink); font-size:.75rem; font-weight:680; }
.ui-field--wide { grid-column:1/-1; }
.ui-field > span { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.ui-field small { color:var(--omni-muted); font-size:.66rem; font-weight:450; line-height:1.45; }
.ui-field input:not([type="color"]):not([type="range"]),.ui-field select,.ui-field textarea {
  width:100%; min-height:var(--omni-control-height); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.7rem .8rem; color:var(--omni-ink); font-size:.82rem; font-weight:500; background:var(--omni-surface-raised); box-shadow:inset 0 1px 2px color-mix(in srgb,var(--omni-ink-strong) 5%,transparent);
}
.ui-field textarea { min-height:7rem; resize:vertical; }
/* A standalone field outside .ui-field (same look). */
.ui-input { width:100%; min-height:var(--omni-control-height); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.7rem .8rem; color:var(--omni-ink); font:inherit; font-size:.95rem; background:var(--omni-surface-raised); box-shadow:inset 0 1px 2px color-mix(in srgb,var(--omni-ink-strong) 5%,transparent); }
.ui-input::placeholder { color:var(--omni-faint); }
.ui-input:hover { border-color:var(--omni-line-strong); }
textarea.ui-input { min-height:6rem; resize:vertical; }
.ui-field input[type="color"] { width:100%; min-height:var(--omni-control-height); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.25rem; background:var(--omni-surface-raised); }
.ui-field input[type="range"] { width:100%; accent-color:var(--omni-primary); }
.ui-field output { color:var(--omni-primary); font-family:var(--omni-font-mono); font-size:.68rem; }
.ui-field--error input { border-color:var(--omni-danger)!important; }
.ui-field--error small { color:var(--omni-danger); }
.ui-field--success input { border-color:var(--omni-success)!important; }
.ui-field--success small { color:var(--omni-success); }
.ui-choice-group { display:grid; gap:.5rem; margin:0 0 var(--omni-space-4); border:0; padding:0; }
.ui-choice-group legend { margin-bottom:.55rem; color:var(--omni-ink-strong); font-size:.78rem; font-weight:740; }
.ui-choice { display:flex; min-height:44px; align-items:flex-start; gap:.65rem; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.7rem; color:var(--omni-ink); background:var(--omni-surface-soft); cursor:pointer; }
.ui-choice:has(input:checked) { border-color:color-mix(in oklab,var(--omni-primary) 40%,var(--omni-line)); background:var(--omni-primary-soft); }
.ui-choice input { width:1.05rem; height:1.05rem; margin-top:.08rem; accent-color:var(--omni-primary); }
.ui-choice span,.ui-choice small { display:block; }
.ui-choice span { font-size:.76rem; font-weight:680; }
.ui-choice small { margin-top:.18rem; color:var(--omni-muted); font-size:.65rem; font-weight:450; }
.ui-switch { display:flex; min-height:44px; align-items:center; gap:.65rem; margin:var(--omni-space-3) 0; cursor:pointer; }
.ui-switch input { position:absolute; opacity:0; pointer-events:none; }
.ui-switch > span { position:relative; width:2.65rem; height:1.5rem; border:1px solid var(--omni-line); border-radius:999px; background:var(--omni-surface-sunken); transition:background-color var(--omni-duration) var(--omni-ease); }
.ui-switch > span::after { content:""; position:absolute; top:2px; left:2px; width:1.12rem; height:1.12rem; border-radius:50%; background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-sm); transition:transform var(--omni-duration) var(--omni-ease); }
.ui-switch input:checked + span { border-color:var(--omni-primary); background:var(--omni-primary); }
.ui-switch input:checked + span::after { transform:translateX(1.12rem); }
.ui-switch input:focus-visible + span { outline:3px solid var(--omni-focus); outline-offset:3px; }
.ui-switch b { color:var(--omni-ink); font-size:.76rem; }
.ui-live-status { margin-top:var(--omni-space-4); color:var(--omni-muted); font-size:.7rem; }

.ui-alert { display:flex; align-items:flex-start; gap:.72rem; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.82rem .9rem; color:var(--omni-ink); background:var(--omni-surface-soft); }
.ui-alert > span { display:grid; width:1.7rem; height:1.7rem; flex:0 0 1.7rem; place-items:center; border-radius:50%; font-family:var(--omni-font-mono); font-size:.72rem; font-weight:850; }
.ui-alert > svg { width:1.7rem; height:1.7rem; flex:0 0 1.7rem; border-radius:50%; padding:.3rem; }
.ui-alert strong,.ui-alert p { display:block; }
.ui-alert strong { color:currentColor; font-size:.76rem; }
.ui-alert p { margin:.16rem 0 0; color:var(--omni-muted); font-size:.68rem; line-height:1.45; }
.ui-alert--info { border-color:color-mix(in oklab,var(--omni-info) 28%,var(--omni-line)); color:var(--omni-info); background:var(--omni-info-soft); }
.ui-alert--info > span,.ui-alert--info > svg { background:color-mix(in oklab,var(--omni-info) 15%,var(--omni-surface-raised)); }
.ui-alert--success { border-color:color-mix(in oklab,var(--omni-success) 28%,var(--omni-line)); color:var(--omni-success); background:var(--omni-success-soft); }
.ui-alert--success > span,.ui-alert--success > svg { background:color-mix(in oklab,var(--omni-success) 15%,var(--omni-surface-raised)); }
.ui-alert--warning { border-color:color-mix(in oklab,var(--omni-warning) 28%,var(--omni-line)); color:var(--omni-warning); background:var(--omni-warning-soft); }
.ui-alert--warning > span,.ui-alert--warning > svg { background:color-mix(in oklab,var(--omni-warning) 15%,var(--omni-surface-raised)); }
.ui-alert--danger { border-color:color-mix(in oklab,var(--omni-danger) 28%,var(--omni-line)); color:var(--omni-danger); background:var(--omni-danger-soft); }
.ui-alert--danger > span,.ui-alert--danger > svg { background:color-mix(in oklab,var(--omni-danger) 15%,var(--omni-surface-raised)); }
.ui-progress-row { display:grid; gap:.45rem; }
.ui-progress-row > span { display:flex; align-items:center; justify-content:space-between; gap:.5rem; color:var(--omni-ink); font-size:.72rem; }
.ui-progress-row small { color:var(--omni-muted); }
.ui-progress-row progress { width:100%; height:.62rem; overflow:hidden; border:0; border-radius:999px; background:var(--omni-surface-sunken); }
.ui-progress-row progress::-webkit-progress-bar { border-radius:999px; background:var(--omni-surface-sunken); }
.ui-progress-row progress::-webkit-progress-value { border-radius:999px; background:linear-gradient(90deg,var(--omni-primary),var(--omni-secondary)); }
.ui-progress-row progress::-moz-progress-bar { border-radius:999px; background:linear-gradient(90deg,var(--omni-primary),var(--omni-secondary)); }
.ui-progress-row.is-success progress::-webkit-progress-value { background:var(--omni-success); }
.ui-progress-row.is-success progress::-moz-progress-bar { background:var(--omni-success); }
.ui-progress-row.is-warning progress::-webkit-progress-value { background:var(--omni-warning); }
.ui-progress-row.is-warning progress::-moz-progress-bar { background:var(--omni-warning); }
.ui-spinner { width:1.25rem; height:1.25rem; border:2px solid var(--omni-line); border-top-color:var(--omni-primary); border-radius:50%; animation:ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform:rotate(360deg); } }
.ui-status { display:inline-flex; align-items:center; gap:.4rem; color:var(--omni-success); font-size:.68rem; font-weight:720; }
.ui-status i { width:.48rem; height:.48rem; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 12%,transparent); }
.ui-status.is-idle { color:var(--omni-warning); }.ui-status.is-error { color:var(--omni-danger); }

.ui-tabs > [role="tablist"] { display:flex; gap:.25rem; overflow-x:auto; border-bottom:1px solid var(--omni-line); }
/* The underline is a pseudo-element scaled from the left: the newly selected tab's
   bar grows in while the previous one shrinks away — a slide without JS. */
.ui-tabs [role="tab"] { position:relative; min-height:44px; border:0; padding:.65rem .8rem; color:var(--omni-muted); font-size:.75rem; font-weight:720; background:transparent; white-space:nowrap; cursor:pointer; transition:color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-tabs [role="tab"]::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:var(--omni-primary); transform:scaleX(0); transform-origin:left center; transition:transform var(--omni-motion-base) var(--omni-ease-out); }
.ui-tabs [role="tab"]:hover { color:var(--omni-ink-strong); }
.ui-tabs [role="tab"][aria-selected="true"] { color:var(--omni-primary); }
.ui-tabs [role="tab"][aria-selected="true"]::after { transform:scaleX(1); }
.ui-tabs [role="tabpanel"] { min-height:5rem; padding:var(--omni-space-4) 0; color:var(--omni-muted); font-size:.78rem; line-height:1.6; }
.ui-breadcrumbs { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; color:var(--omni-faint); font-size:.68rem; font-weight:680; }
.ui-breadcrumbs a { color:var(--omni-muted); text-decoration:underline; text-underline-offset:3px; }
.ui-breadcrumbs :is(b,[aria-current="page"]) { color:var(--omni-ink); font-weight:760; }
.ui-breadcrumbs [aria-hidden="true"] { color:var(--omni-faint); font-weight:500; }
.ui-pagination { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:var(--omni-space-4); }
.ui-pagination a { display:grid; min-width:40px; min-height:40px; place-items:center; border:1px solid var(--omni-line); border-radius:var(--omni-radius-sm); color:var(--omni-muted); font-size:.72rem; font-weight:720; background:var(--omni-surface-raised); }
.ui-pagination a.is-active { border-color:var(--omni-primary); color:var(--omni-on-primary); background:var(--omni-primary); }

.ui-table-wrap { overflow-x:auto; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); background:var(--omni-surface); box-shadow:var(--omni-shadow); }
.ui-table { width:100%; min-width:34rem; border-collapse:separate; border-spacing:0; color:var(--omni-ink); }
.ui-table th { border-bottom:1px solid var(--omni-line); padding:.75rem 1rem; color:var(--omni-muted); font-size:.63rem; font-weight:780; letter-spacing:.08em; text-align:left; text-transform:uppercase; background:var(--omni-surface-soft); }
.ui-table td { border-bottom:1px solid var(--omni-line); padding:.8rem 1rem; font-size:.72rem; vertical-align:middle; transition:background-color var(--omni-motion-fast) var(--omni-ease-out),border-color var(--omni-motion-fast) var(--omni-ease-out); }.ui-table tbody tr:last-child td { border-bottom:0; }.ui-table tbody tr:hover td { background:var(--omni-surface-soft); border-bottom-color:var(--omni-ink); }.ui-table td b,.ui-table td small { display:block; }.ui-table td small { margin-top:.12rem; color:var(--omni-muted); font-size:.61rem; }

@media (max-width:860px) {
  .ui-page-header--hero { min-height:0; align-items:flex-start; }
}
@media (max-width:620px) {
  .ui-page-header,.ui-section-heading,.ui-section-subheading { align-items:flex-start; flex-direction:column; }.ui-page-header h1 { font-size:2.5rem; }
  .ui-page-header__main,.ui-page-subheader { width:100%; align-items:flex-start; flex-direction:column; }
  .ui-page-tabs { width:100%; flex-wrap:nowrap; overflow-x:auto; }
  .ui-page-actions { width:100%; justify-content:flex-start; }
  .ui-section-heading > code,.ui-section-subheading p { max-width:none; text-align:left; }
  .ui-form-grid { grid-template-columns:1fr; }.ui-field--wide { grid-column:auto; }
}

/* Components added in 1.2.0 ---------------------------------------------------- */
/* Meter: a labelled value on a track (confidence, quota). Wrap a <meter> or
   <progress>; low/high bands colour it warning/success like the Deck. */
.ui-meter { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem; color:var(--omni-muted); font-size:.82rem; font-weight:650; }
.ui-meter meter { width:min(12rem,100%); height:.62rem; border:0; border-radius:999px; background:var(--omni-surface-sunken); -webkit-appearance:none; appearance:none; }
.ui-meter meter::-webkit-meter-bar { height:.62rem; border:0; border-radius:999px; background:var(--omni-surface-sunken); }
.ui-meter meter::-webkit-meter-optimum-value { border-radius:999px; background:linear-gradient(90deg,var(--omni-primary),var(--omni-secondary)); }
.ui-meter meter::-webkit-meter-suboptimum-value { border-radius:999px; background:var(--omni-warning); }
.ui-meter meter::-webkit-meter-even-less-good-value { border-radius:999px; background:var(--omni-danger); }
.ui-meter meter::-moz-meter-bar { border-radius:999px; background:linear-gradient(90deg,var(--omni-primary),var(--omni-secondary)); }
.ui-meter meter:-moz-meter-sub-optimum::-moz-meter-bar { background:var(--omni-warning); }
.ui-meter meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background:var(--omni-danger); }

/* Horizontal bar chart: label · track · value per row. */
.ui-hbar { display:grid; gap:.45rem; margin:0; }
.ui-hbar figcaption { margin-bottom:.2rem; color:var(--omni-ink-strong); font-size:.85rem; font-weight:750; }
.ui-hbar__row { display:grid; grid-template-columns:minmax(5rem,30%) 1fr auto; align-items:center; gap:.65rem; color:var(--omni-ink); font-size:.82rem; }
.ui-hbar__label { overflow-wrap:anywhere; }
.ui-hbar__track { height:.75rem; overflow:hidden; border-radius:999px; background:var(--omni-surface-sunken); }
.ui-hbar__bar { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--omni-primary),var(--omni-secondary)); }
.ui-hbar__bar.is-negative { background:var(--omni-danger-stop); }
.ui-hbar__value { color:var(--omni-ink-strong); font-family:var(--omni-font-mono); font-size:.78rem; font-variant-numeric:tabular-nums; font-weight:700; }

/* Sticky action bar: the page's one main action stays reachable. */
.ui-sticky-actions { position:fixed; z-index:30; right:0; bottom:0; left:0; border-top:var(--omni-border-width) solid var(--omni-line); padding-bottom:env(safe-area-inset-bottom); background:color-mix(in srgb,var(--omni-surface-raised) 92%,transparent); box-shadow:0 -18px 40px -28px rgba(15,23,42,.45); backdrop-filter:blur(var(--omni-blur)); }
.ui-sticky-actions__row { display:flex; align-items:center; gap:var(--omni-space-3); padding-block:var(--omni-space-3); }
html[data-theme="omni-contrast"] .ui-sticky-actions { background:var(--omni-canvas); box-shadow:none; }

@media (max-width:620px) {
  .omni-appbar__row { min-height:3.5rem; }
  .ui-hbar__row { grid-template-columns:1fr auto; }
  .ui-hbar__track { grid-row:2; grid-column:1/-1; }
  .ui-sticky-actions__row { flex-direction:column; align-items:stretch; gap:var(--omni-space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .omni-segmented button { transition:none; }
}

/* Workspace UI kit (1.3.0, 2026-10-21; ABI/MODULE-WORKSPACE-VIEWS.md "UI kit") ---
   Tooltips, hover cards, status lights, icons, legend, empty state, step
   strip, sparkline, dialog forms. Server-rendered markup; behaviour in the
   Deck's public/deck-ui.js. Only --omni-* tokens. */
.ui-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* A table ignores width / overflow, so a visually hidden one becomes a block box (a 672 px sr-only chart table used to scroll a phone sideways). */
table.ui-sr-only { display:block; clip-path:inset(50%); }

/* Tooltip: `[data-tip-id]` + sibling `.ui-tip[role=tooltip]`; deck-ui.js moves it into `.ui-tip-layer` while shown. */
.ui-tip-layer { position:fixed; z-index:80; top:0; left:0; width:0; height:0; overflow:visible; pointer-events:none; }
.ui-tip { position:fixed; z-index:80; max-width:min(20rem,calc(100vw - 1rem)); border:1px solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.5rem .7rem; color:var(--omni-ink); font-size:.72rem; font-weight:500; line-height:1.45; text-align:left; white-space:normal; overflow-wrap:anywhere; background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-lg); pointer-events:none; opacity:0; transform:translateY(calc(var(--omni-reveal-distance) / 2)) scale(.98); transition:opacity var(--omni-motion-fast) var(--omni-ease-out),transform var(--omni-motion-fast) var(--omni-ease-spring); }
.ui-tip[hidden] { display:none; }
/* A shown tip is hoverable (WCAG 1.4.13): deck-ui.js keeps it open while the pointer is inside. */
.ui-tip.is-visible { opacity:1; transform:none; pointer-events:auto; }
.ui-tip[data-motion="off"] { transition:none; }
.ui-tip::after { content:""; position:absolute; width:.55rem; height:.55rem; border:1px solid var(--omni-line); border-width:0 1px 1px 0; background:var(--omni-surface-raised); transform:rotate(45deg); }
.ui-tip[data-placement="top"]::after { bottom:-.3rem; left:calc(50% - .3rem); }
.ui-tip[data-placement="bottom"]::after { top:-.3rem; left:calc(50% - .3rem); transform:rotate(225deg); }
.ui-tip[data-placement="left"]::after { top:calc(50% - .3rem); right:-.3rem; transform:rotate(-45deg); }
.ui-tip[data-placement="right"]::after { top:calc(50% - .3rem); left:-.3rem; transform:rotate(135deg); }
span[data-tip-id]:not(.ui-badge):not(.ui-status-light),small[data-tip-id],strong[data-tip-id],h2[data-tip-id],h3[data-tip-id],p[data-tip-id] { cursor:help; text-decoration:none; }
[data-tip-id]:focus-visible { outline:3px solid var(--omni-focus); outline-offset:2px; border-radius:var(--omni-radius-sm); }
.ui-badge[data-tip-open] { border-color:var(--omni-line-strong); }

/* Hover card: `[data-hovercard-id]` on a row title + sibling `.ui-hovercard`. */
.ui-hovercard { position:fixed; z-index:79; width:min(22rem,calc(100vw - 1rem)); border:1px solid var(--omni-line); border-radius:var(--omni-radius); padding:.8rem .95rem; color:var(--omni-ink); font-size:.76rem; line-height:1.5; background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-lg); pointer-events:auto; opacity:0; transform:translateY(calc(var(--omni-reveal-distance) / 2)) scale(.98); transition:opacity var(--omni-motion-base) var(--omni-ease-out),transform var(--omni-motion-base) var(--omni-ease-spring); }
.ui-hovercard[hidden] { display:none; }
.ui-hovercard.is-visible { opacity:1; transform:none; }
.ui-hovercard[data-motion="off"] { transition:none; }
.ui-hovercard__title { margin:0 0 .4rem; padding-right:2.2rem; color:var(--omni-ink-strong); font-size:.84rem; font-weight:750; }
.ui-hovercard__lines { display:grid; gap:.25rem; margin:0; padding:0; list-style:none; }
.ui-hovercard__lines li { overflow-wrap:anywhere; }
.ui-hovercard__close { position:absolute; top:.35rem; right:.35rem; display:grid; width:var(--omni-touch-target); height:var(--omni-touch-target); place-items:center; border:0; border-radius:var(--omni-radius-sm); color:var(--omni-muted); font-size:1.2rem; line-height:1; background:transparent; cursor:pointer; }
.ui-hovercard__close:hover { color:var(--omni-ink-strong); background:var(--omni-surface-soft); }
[data-hovercard-id] { cursor:pointer; }

/* Status light: good | watch | bad | unknown | idle | running. The dot and its halo
   are painted in the signal *stops* (`--omni-*-stop`); the label beside it stays
   on the text-grade token. */
.ui-status-dot { position:relative; display:inline-block; width:.62rem; height:.62rem; flex:0 0 .62rem; border:2px solid transparent; border-radius:50%; vertical-align:-.05em; background:var(--omni-muted); box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-muted) 16%,transparent); }
.ui-status-dot[data-status="good"] { background:var(--omni-success-stop); box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-success-stop) 22%,transparent); }
.ui-status-dot[data-status="watch"] { background:var(--omni-warning-stop); box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-warning-stop) 24%,transparent); }
.ui-status-dot[data-status="bad"] { background:var(--omni-danger-stop); box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-danger-stop) 24%,transparent); }
.ui-status-dot[data-status="unknown"] { border-color:var(--omni-muted); background:var(--omni-surface-sunken); box-shadow:none; }
.ui-status-dot[data-status="idle"] { background:var(--omni-muted); box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-muted) 16%,transparent); }
/* Running: a ring (::after) grows and fades — transform and opacity only, so the
   loop never repaints the page. It reads the loop token: 0s at levels 0–1
   (still), 2.4 s balanced, 1.8 s rich. The halo itself stays static. */
.ui-status-dot[data-status="running"] { background:var(--omni-running-stop); box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-running-stop) 24%,transparent); }
.ui-status-dot[data-status="running"]::after { content:""; position:absolute; inset:-5px; border:2px solid color-mix(in srgb,var(--omni-running-stop) 55%,transparent); border-radius:50%; opacity:0; pointer-events:none; animation:ui-status-pulse var(--omni-loop-duration) var(--omni-ease-out) infinite; }
@keyframes ui-status-pulse { 0% { transform:scale(.7); opacity:.75; } 100% { transform:scale(1.6); opacity:0; } }
html[data-motion="reduced"] .ui-status-dot::after,html[data-motion="off"] .ui-status-dot::after,html[data-motion="calm"] .ui-status-dot::after { animation:none; }
html[data-theme="omni-contrast"] .ui-status-dot { border-color:var(--omni-ink-strong); box-shadow:none; }
.ui-status-light { display:inline-flex; align-items:center; gap:.42rem; min-height:1.5rem; color:var(--omni-ink); font-size:inherit; font-weight:650; }
.ui-status-light__label { overflow-wrap:anywhere; }
.ui-status-light[data-status="good"] { color:var(--omni-success); }.ui-status-light[data-status="watch"] { color:var(--omni-warning); }
.ui-status-light[data-status="bad"] { color:var(--omni-danger); }.ui-status-light[data-status="running"] { color:var(--omni-running); }
.ui-status-light[data-status="unknown"],.ui-status-light[data-status="idle"] { color:var(--omni-muted); }
.mw-value-status { display:inline-flex; align-items:center; }
.mw-row__light { float:left; margin:.3rem .5rem 0 0; line-height:1; }
.mw-row.has-status[data-status="bad"] .mw-row__title strong,.mw-row.has-status[data-status="bad"] strong.mw-row__title { color:var(--omni-danger); }

/* Icons (server/workspace-icons.js): decorative, currentColor. */
.mw-icon { display:inline-block; width:var(--omni-icon-sm); height:var(--omni-icon-sm); flex:0 0 auto; margin-right:var(--omni-pill-gap); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; }
.ui-button .mw-icon { margin-right:0; }
.ui-button--icon { width:var(--omni-touch-target); min-width:var(--omni-touch-target); padding-inline:0; }
.ui-page-tabs a .mw-icon,.mw-tabs a .mw-icon { width:var(--omni-icon-sm); height:var(--omni-icon-sm); }
/* Tab counts ("All · 43"): flex tabs collapse the whitespace before the count, so the gap is explicit. */
.ui-page-tabs a .mw-muted,.mw-tabs a .mw-muted { margin-left:.35em; font-variant-numeric:tabular-nums; }
/* Stat tile icon (kit v4): a 32 px square top right with a 20 px icon; the label column never runs under it (deck.css .mw-stat__head grid). */
.mw-stat__icon { display:grid; width:var(--omni-icon-box); height:var(--omni-icon-box); flex:none; place-items:center; border:1px solid var(--omni-line); border-radius:var(--omni-radius-sm); color:var(--omni-ink-strong); background:var(--omni-surface-raised); }
.mw-stat__icon .mw-icon { width:var(--omni-icon-md); height:var(--omni-icon-md); margin:0; }

/* Legend of the status lights. */
.mw-legend { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1.1rem; margin:0 0 var(--omni-space-4); padding:.5rem .9rem; list-style:none; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); color:var(--omni-muted); font-size:.74rem; background:var(--omni-surface-soft); }
.mw-legend__title { color:var(--omni-ink-strong); font-weight:750; }
.mw-legend__item { display:inline-flex; align-items:center; }
.mw-legend .ui-status-light { min-height:2rem; color:var(--omni-ink); font-weight:600; }

/* Empty state with one next step. */
.mw-empty-state { display:grid; justify-items:center; gap:.45rem; margin:0 0 var(--omni-space-4); border:1px dashed var(--omni-line-strong); border-radius:var(--omni-radius); padding:var(--omni-space-5) var(--omni-space-4); color:var(--omni-muted); font-size:.82rem; text-align:center; background:var(--omni-surface-soft); }
.mw-empty-state > .mw-icon { width:calc(var(--omni-icon-lg) * 2); height:calc(var(--omni-icon-lg) * 2); margin:0 0 .2rem; color:var(--omni-faint); stroke-width:1.6; }
.mw-empty-state strong { color:var(--omni-ink-strong); font-size:.98rem; font-weight:750; }
.mw-empty-state p { max-width:36rem; margin:0; line-height:1.55; }
.mw-empty-state .ui-button { margin-top:.4rem; }

/* Step strip: wrapping pills joined by connectors. */
.mw-flow { margin:0 0 var(--omni-space-4); }
.mw-flow__title { margin:0 0 .5rem; color:var(--omni-ink-strong); font-size:.85rem; font-weight:750; }
.mw-flow__list { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 0; margin:0; padding:0; list-style:none; }
.mw-flow__step { display:flex; align-items:center; }
.mw-flow__step:not(:last-child)::after { content:""; display:block; width:1.1rem; height:2px; flex:0 0 1.1rem; background:var(--omni-line-strong); }
.mw-flow__pill { display:inline-flex; min-height:var(--omni-touch-target); align-items:center; gap:.4rem; border:var(--omni-border-width) solid var(--omni-line); border-radius:999px; padding:.35rem .85rem; color:var(--omni-ink); font-size:.78rem; font-weight:650; background:var(--omni-surface); box-shadow:var(--omni-shadow-sm); }
.mw-flow__pill .mw-icon { margin:0; color:var(--omni-muted); }
.mw-flow__pill small { color:var(--omni-muted); font-size:.68rem; font-weight:500; }
.mw-flow__step[data-status="good"] .mw-flow__pill { border-color:color-mix(in oklab,var(--omni-success-stop) 45%,var(--omni-line)); }
.mw-flow__step[data-status="watch"] .mw-flow__pill { border-color:color-mix(in oklab,var(--omni-warning-stop) 55%,var(--omni-line)); background:var(--omni-warning-soft); }
.mw-flow__step[data-status="bad"] .mw-flow__pill { border-color:var(--omni-danger-stop); background:var(--omni-danger-soft); }
.mw-flow__step[data-status="running"] .mw-flow__pill { border-color:color-mix(in oklab,var(--omni-running-stop) 50%,var(--omni-line)); background:color-mix(in oklab,var(--omni-running-stop) 10%,var(--omni-surface-raised)); }
.mw-flow__step[data-status="idle"] .mw-flow__pill,.mw-flow__step[data-status="unknown"] .mw-flow__pill { color:var(--omni-muted); background:var(--omni-surface-soft); }

/* Sparkline (server-rendered SVG, no script). */
.mw-chart { position:relative; margin:0 0 var(--omni-space-4); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); padding:.75rem 1rem .6rem; color:var(--omni-ink); background:var(--omni-surface); box-shadow:var(--omni-shadow-sm); }
.mw-chart__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem .75rem; margin-bottom:.4rem; }
.mw-chart__head strong { color:var(--omni-ink-strong); font-size:.92rem; font-weight:750; }
.mw-chart__plot { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:stretch; gap:.6rem; }
.mw-chart__axis { display:flex; flex-direction:column; justify-content:space-between; padding:.1rem 0; color:var(--omni-muted); font-size:.68rem; line-height:1; text-align:right; }
.mw-chart__axis b { font-weight:650; font-variant-numeric:tabular-nums; }
.mw-chart__canvas { position:relative; min-width:0; border-bottom:var(--omni-border-width) solid var(--omni-line); border-left:var(--omni-border-width) solid var(--omni-line); cursor:crosshair; touch-action:pan-y; }
.mw-chart__canvas:focus-visible { outline:3px solid var(--omni-focus); outline-offset:2px; }
.mw-chart__svg { display:block; width:100%; height:7rem; overflow:visible; }
.mw-chart__cursor { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--omni-ink); pointer-events:none; }
.mw-chart__cursor[hidden] { display:none; }
/* The hover bubble of a kit sparkline: the Deck chart tooltip (ink, white text, the colour line on top, a hard indigo shadow). */
.mw-chart-tip { position:fixed; z-index:60; max-width:300px; padding:11px 10px 8px; color:var(--omni-on-primary,#fff); background:var(--omni-signal-line,linear-gradient(var(--omni-primary),var(--omni-primary))) top / 100% 3px no-repeat,var(--omni-ink-strong,#000); box-shadow:4px 4px 0 0 var(--omni-deco-indigo,#360cfe); pointer-events:none; }
.mw-chart-tip[hidden] { display:none; }
.mw-chart__series { color:var(--omni-primary); }
.mw-chart__series[data-series="1"] { color:var(--omni-secondary); }
.mw-chart__series[data-series="2"] { color:var(--omni-muted); }
.mw-chart__series[data-tone="success"] { color:var(--omni-success); }.mw-chart__series[data-tone="warning"] { color:var(--omni-warning); }
.mw-chart__series[data-tone="danger"] { color:var(--omni-danger); }.mw-chart__series[data-tone="info"] { color:var(--omni-info); }.mw-chart__series[data-tone="neutral"] { color:var(--omni-muted); }
/* Draw-in at level rich: a dash as long as any sparkline slides off (dasharray 0 =
   solid line at the other levels, so nothing is ever gapped). */
.mw-chart__line { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:calc(4000px * var(--omni-draw-in)); animation:ui-draw-in var(--omni-motion-slow) var(--omni-ease-out) both; }
.mw-chart__area { fill:currentColor; fill-opacity:.1; stroke:none; }
.mw-chart__marker { fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:square; vector-effect:non-scaling-stroke; }
.mw-chart__marker--last { stroke-width:7; }
.mw-chart__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.3rem .75rem; margin-top:.35rem; color:var(--omni-muted); font-size:.68rem; }
.mw-chart__labels { display:flex; flex:1 1 auto; justify-content:space-between; gap:.5rem; }
.mw-chart__legend { display:flex; flex-wrap:wrap; gap:.75rem; }
.mw-chart__key { display:inline-flex; align-items:center; gap:.35rem; color:var(--omni-primary); }
.mw-chart__key[data-series="1"] { color:var(--omni-secondary); }
.mw-chart__key[data-series="2"] { color:var(--omni-muted); }
.mw-chart__key[data-tone="success"] { color:var(--omni-success); }.mw-chart__key[data-tone="warning"] { color:var(--omni-warning); }
.mw-chart__key[data-tone="danger"] { color:var(--omni-danger); }.mw-chart__key[data-tone="info"] { color:var(--omni-info); }.mw-chart__key[data-tone="neutral"] { color:var(--omni-muted); }
.mw-chart__key i { width:.75rem; height:2px; border-radius:999px; background:currentColor; }
.mw-chart__key b { color:var(--omni-ink-strong); font-variant-numeric:tabular-nums; }

/* Dialogs: a row's detail or a dialog action form (native <dialog class="ui-dialog mw-dialog">). */
.ui-dialog:not([open]) { display:none; }
html.ui-dialog-open,html.ui-dialog-open body { overflow:hidden; }
/* Detail dialogs (Owner 2026-10-22: "wider, readable, laid out"): desktop min(1100px, 92vw) x 88vh with the
   body scrolling between a fixed head (icon + title + status chip, subtitle under) and a footer action bar;
   full screen on a phone. Rendered beside their list / table, and reset here, so no row or cell style leaks in. */
.ui-dialog.mw-dialog { width:min(1100px,92vw); max-width:none; max-height:88vh; overflow:hidden; padding:0; text-align:start; white-space:normal; font-variant-numeric:normal; }
.ui-dialog.mw-dialog--form { width:min(40rem,92vw); }
.ui-dialog.mw-dialog[open] { display:flex; flex-direction:column; }
/* The heading only receives the programmatic focus on open (so no tip pops up); it is not a control. */
html .ui-dialog.mw-dialog .mw-dialog__head h2[tabindex]:is(:focus,:focus-visible) { outline:none !important; box-shadow:none !important; }
.mw-dialog__head { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:var(--omni-space-4); margin:0; border-bottom:var(--omni-border-width) solid var(--omni-line); padding:1.5rem 1.75rem 1.15rem; }
.mw-dialog__heading { display:grid; min-width:0; gap:.4rem; }
.mw-dialog__titleline { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; min-width:0; }
.mw-dialog__icon { display:inline-grid; width:2.25rem; height:2.25rem; flex:none; place-items:center; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); color:var(--omni-ink-strong); background:var(--omni-surface-soft); }
.mw-dialog__icon .mw-icon { width:1.15rem; height:1.15rem; margin:0; }
.mw-dialog__head h2 { min-width:0; margin:0; color:var(--omni-ink-strong); font-size:1.35rem; font-weight:760; line-height:1.25; overflow-wrap:anywhere; }
.mw-dialog__status { flex:none; font-size:.8rem; }
.mw-dialog__subtitle { max-width:72ch; margin:0; color:var(--omni-muted); font-size:.85rem; line-height:1.5; }
.mw-dialog__close { flex:0 0 auto; cursor:pointer; }
.mw-dialog__close .mw-icon { margin:0; }
.mw-dialog__close:hover { color:var(--omni-ink-strong); background:var(--omni-surface-raised); }
.mw-dialog__body { display:block; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:1.5rem 1.75rem 1.75rem; }
.mw-dialog__body > * { min-width:0; margin-top:0; margin-bottom:0; }
.mw-dialog.mw-dialog .mw-dialog__body > * + * { margin-top:1.75rem; }
.mw-dialog.mw-dialog .mw-dialog__body > .mw-text + .mw-text:not(:has(> .mw-text__title)) { margin-top:.75rem; }
.mw-dialog__form { display:flex; flex:1 1 auto; min-height:0; flex-direction:column; }
.mw-dialog__fields { display:grid; min-height:0; gap:.75rem; overflow:auto; padding:1.25rem 1.75rem; }
.mw-dialog__actions { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; margin:0; border-top:var(--omni-border-width) solid var(--omni-line); padding:.85rem 1.75rem; background:var(--omni-surface-soft); }
/* Inside: section headings, a 72ch text measure, facts as a labelled grid, full-width tables. */
.mw-dialog .mw-text { max-width:72ch; margin:0; font-size:.9rem; line-height:1.65; }
.mw-dialog :is(.mw-text__title,.mw-flow__title,.mw-list__head h3,.mw-kv h3) { display:flex; align-items:center; gap:.5rem; margin:0 0 .6rem; color:var(--omni-ink-strong); font-size:.8rem; font-weight:760; letter-spacing:.06em; line-height:1.3; text-transform:uppercase; }
.mw-dialog :is(.mw-text__title,.mw-flow__title,.mw-list__head h3,.mw-kv h3) .mw-icon { width:1rem; height:1rem; margin:0; color:var(--omni-muted); }
.mw-dialog .mw-kv { margin:0; border:0; padding:0; background:none; box-shadow:none; }
.mw-dialog .mw-kv .ui-status-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:0 2rem; }
.mw-dialog .mw-kv .ui-status-list > div { display:flex; min-height:0; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.3rem; border-bottom:var(--omni-border-width) solid var(--omni-line); padding:.75rem 0; }
.mw-dialog .mw-kv .ui-status-list dt { color:var(--omni-muted); font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.mw-dialog .mw-kv .ui-status-list dd { max-width:72ch; color:var(--omni-ink-strong); font-size:.88rem; font-weight:600; line-height:1.55; text-align:start; overflow-wrap:anywhere; }
.mw-dialog .mw-kv .ui-status-list dd > .mw-value:has(> .mw-icon) { display:grid; grid-template-columns:1.1rem minmax(0,1fr); align-items:start; gap:.5rem; }
.mw-dialog .mw-kv .ui-status-list dd .mw-icon { width:1.1rem; height:1.1rem; margin:.2em 0 0; }
.mw-dialog .mw-text:has(> .ui-badge) { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .5rem; max-width:none; white-space:normal; }
.mw-dialog .mw-text:has(> .ui-badge) > .ui-badge { margin:0; }
.mw-dialog .mw-text:has(> .ui-badge) > .mw-text__title { flex:0 0 100%; margin-bottom:.15rem; }
.mw-dialog .mw-stats { grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); margin:0; }
.mw-dialog :is(.mw-list,.mw-block-table,.ui-table-wrap,.mw-table) { width:100%; margin-top:0; margin-bottom:0; }
/* Icons stand in a fixed column beside their text, never stacked in front of a wrapped title. */
.mw-dialog :is(strong.mw-row__title,a.mw-row__title > strong) { display:grid; grid-template-columns:1.1rem minmax(0,1fr); align-items:start; gap:.55rem; text-align:start; }
.mw-dialog :is(strong.mw-row__title,a.mw-row__title > strong):not(:has(> .mw-icon)) { grid-template-columns:minmax(0,1fr); }
.mw-dialog .mw-row__title .mw-icon { width:1.1rem; height:1.1rem; margin:.15em 0 0; }
.mw-dialog .mw-row__main > :is(small,.mw-sections) { max-width:72ch; }
.mw-dialog .mw-row__main:has(> .mw-row__title .mw-icon) > :is(small,.mw-sections,.mw-meta-lines) { padding-left:1.65rem; }
/* Steps read as a numbered vertical list, not a staggered strip. */
.mw-dialog .mw-flow { margin:0; }
.mw-dialog .mw-flow__list { flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:.5rem; counter-reset:mw-step; }
.mw-dialog .mw-flow__step { counter-increment:mw-step; }
.mw-dialog .mw-flow__step::before { content:counter(mw-step); display:inline-grid; width:1.75rem; height:1.75rem; flex:none; place-items:center; margin-right:.75rem; border:var(--omni-border-width) solid var(--omni-line-strong); color:var(--omni-ink-strong); font-size:.75rem; font-weight:760; font-variant-numeric:tabular-nums; }
.mw-dialog .mw-flow__step:not(:last-child)::after { content:none; }
.mw-dialog .mw-flow__pill { display:flex; width:100%; flex:1 1 auto; align-items:flex-start; justify-content:flex-start; gap:.6rem; border-radius:var(--omni-radius); padding:.6rem .85rem; text-align:start; white-space:normal; }
.mw-dialog .mw-flow__pill .mw-icon { width:1.1rem; height:1.1rem; margin:.1em 0 0; }
.mw-dialog .mw-flow__pill .ui-status-dot { margin-top:.35em; }
.mw-dialog .mw-flow__label { flex:1 1 auto; min-width:0; overflow:visible; line-height:1.45; -webkit-line-clamp:unset; line-clamp:none; }
.mw-dialog .mw-flow__pill { flex-wrap:wrap; }
.mw-dialog .mw-flow__label { flex-basis:0; }
.mw-dialog .mw-flow__pill small { flex:1 0 100%; padding-left:1.7rem; font-size:.75rem; line-height:1.45; white-space:normal; }
/* Nothing moves on hover or focus inside a dialog: colour and outline only. */
html .mw-dialog.mw-dialog :is(.mw-stat,.mw-row,.ui-card,.ui-stat,.mw-add,.ui-button,.mw-flow__pill,.mw-list--entity > .mw-items > .mw-row):is(:hover,:focus-within,:focus-visible,:active) { transform:none; }
html .mw-dialog.mw-dialog :is(.mw-stat,.mw-row,.ui-card,.ui-stat,.mw-list--entity > .mw-items > .mw-row):is(:hover,:focus-within) { z-index:auto; box-shadow:none; }
.mw-field { display:grid; gap:.3rem; min-width:0; margin:0; padding:0; border:0; color:var(--omni-ink); font-size:.75rem; font-weight:680; }
.mw-field > span,.mw-field > legend { display:block; padding:0; color:var(--omni-ink-strong); }
.mw-field .ui-input { font-size:.82rem; }
.mw-field select.ui-input { appearance:auto; }
.mw-choice-group { gap:.15rem; }
.mw-choice { display:flex; min-height:var(--omni-touch-target); align-items:center; gap:.55rem; border-radius:var(--omni-radius-sm); padding:.2rem .35rem; font-weight:560; cursor:pointer; }
.mw-choice:hover { background:var(--omni-surface-soft); }
.mw-choice input { width:1.05rem; height:1.05rem; flex:0 0 auto; margin:0; accent-color:var(--omni-primary); }
.mw-detail { gap:.35rem; }
@media (max-width:620px) {
  .ui-dialog.mw-dialog,.ui-dialog.mw-dialog--form { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; border:0; inset:0; }
  .mw-dialog__head { padding:1rem 1rem .85rem; }
  .mw-dialog__head h2 { font-size:1.12rem; }
  .mw-dialog__body { padding:1rem 1rem 1.5rem; }
  .mw-dialog.mw-dialog .mw-dialog__body > * + * { margin-top:1.35rem; }
  .mw-dialog__fields { padding:1rem; }
  .mw-dialog__actions { padding:.75rem 1rem; }
  .mw-dialog .mw-kv .ui-status-list { grid-template-columns:minmax(0,1fr); }
  .mw-dialog .mw-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mw-dialog__actions .ui-button { flex:1 1 auto; }
  .mw-flow__step:not(:last-child)::after { width:.6rem; flex-basis:.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-tip,.ui-hovercard { transition:none; }
  .ui-status-dot[data-status="running"]::after { animation:none; }
}

/* Motion & effects (1.3.0, Owner 2026-10-21; ABI/DESIGN-SYSTEM.md "Motion") ----
   Every rule below reads the effects-level tokens from omni-tokens.css
   (html[data-effects="0-3"], capped by html[data-motion] and
   prefers-reduced-motion). Transform and opacity only, nothing longer than
   --omni-motion-slow, every transition interruptible. Live catalog: /styles
   "Motion & effects". */
@keyframes ui-reveal { from { opacity:0; transform:translateY(var(--omni-reveal-distance)); } }
@keyframes ui-fade-in { from { opacity:0; } }
@keyframes ui-grow-x { from { transform:scaleX(0); } }
@keyframes ui-grow-y { from { transform:scaleY(0); } }
@keyframes ui-draw-in { from { stroke-dashoffset:4000px; } to { stroke-dashoffset:0px; } }
@keyframes ui-slide-in-right { from { opacity:0; transform:translateX(calc(var(--omni-reveal-distance) * 2)) scale(.98); } }

/* Page / view reveal: the direct children of a `.ui-reveal` container fade and
   rise once per load, staggered up to the twelfth block (transform only: no
   layout shift). `.ui-reveal-skip` opts a child out (fixed overlays);
   `[data-revealed]` is set by deck-theme.js after the first run so live
   refresh never replays it. */
.ui-reveal > :not(.ui-reveal-skip) { animation:ui-reveal var(--omni-motion-slow) var(--omni-ease-out) both; }
.ui-reveal > :nth-child(2) { animation-delay:calc(var(--omni-reveal-stagger) * 1); }
.ui-reveal > :nth-child(3) { animation-delay:calc(var(--omni-reveal-stagger) * 2); }
.ui-reveal > :nth-child(4) { animation-delay:calc(var(--omni-reveal-stagger) * 3); }
.ui-reveal > :nth-child(5) { animation-delay:calc(var(--omni-reveal-stagger) * 4); }
.ui-reveal > :nth-child(6) { animation-delay:calc(var(--omni-reveal-stagger) * 5); }
.ui-reveal > :nth-child(7) { animation-delay:calc(var(--omni-reveal-stagger) * 6); }
.ui-reveal > :nth-child(8) { animation-delay:calc(var(--omni-reveal-stagger) * 7); }
.ui-reveal > :nth-child(9) { animation-delay:calc(var(--omni-reveal-stagger) * 8); }
.ui-reveal > :nth-child(10) { animation-delay:calc(var(--omni-reveal-stagger) * 9); }
.ui-reveal > :nth-child(11) { animation-delay:calc(var(--omni-reveal-stagger) * 10); }
.ui-reveal > :nth-child(n+12) { animation-delay:calc(var(--omni-reveal-stagger) * 11); }
.ui-reveal[data-revealed] > * { animation:none; }

/* Interactive cards, tiles and stats: lift, hairline shadow, border ink. Static
   cards do not move; opt in with .ui-card--interactive (or make it a link). */
.ui-card--interactive,a.ui-card,button.ui-card,.ui-stat { transition:transform var(--omni-motion-base) var(--omni-ease-spring),box-shadow var(--omni-motion-base) var(--omni-ease-out),border-color var(--omni-motion-fast) var(--omni-ease-out),outline-offset var(--omni-motion-fast) var(--omni-ease-out); }
.ui-card--interactive:hover,a.ui-card:hover,button.ui-card:hover,.ui-stat:hover { border-color:var(--omni-line-strong); transform:translateY(var(--omni-hover-lift)) scale(var(--omni-hover-scale)); box-shadow:var(--omni-shadow-lg),var(--omni-glow); }
.ui-card--interactive:active,a.ui-card:active,button.ui-card:active { transform:scale(var(--omni-press-scale)); transition-duration:calc(var(--omni-motion-fast) / 2); }
.ui-icon-button { transition:color var(--omni-motion-fast) var(--omni-ease-out),background-color var(--omni-motion-fast) var(--omni-ease-out),border-color var(--omni-motion-fast) var(--omni-ease-out),transform var(--omni-motion-fast) var(--omni-ease-out),outline-offset var(--omni-motion-fast) var(--omni-ease-out); }
.ui-icon-button:hover { border-color:var(--omni-line-strong); color:var(--omni-ink-strong); }
.ui-icon-button:active { transform:scale(var(--omni-press-scale)); }
.ui-text-link { transition:color var(--omni-motion-fast) var(--omni-ease-out),text-decoration-color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-choice,.ui-pagination a,.ui-badge { transition:border-color var(--omni-motion-fast) var(--omni-ease-out),background-color var(--omni-motion-fast) var(--omni-ease-out),color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-choice:hover { border-color:var(--omni-line-strong); }
.ui-pagination a:hover:not(.is-active) { border-color:var(--omni-line-strong); color:var(--omni-ink-strong); }

/* Focus ring grows out of the control (outline-offset is animatable; the ring
   itself stays 3 px --omni-focus). */
:is(.ui-input,.ui-text-link,.ui-choice,.ui-range),.ui-field :is(input,select,textarea),.ui-tabs [role="tab"],.ui-page-tabs a { transition-property:outline-offset,transform,box-shadow,background-color,border-color,color,text-decoration-color; transition-duration:var(--omni-motion-fast); transition-timing-function:var(--omni-ease-out); }
:is(.ui-button,.ui-icon-button,.ui-input,.ui-text-link,.ui-theme-card,.ui-choice,.ui-card--interactive,.ui-range),.ui-field :is(input,select,textarea),.ui-tabs [role="tab"],.ui-page-tabs a { outline-offset:0; }
:is(.ui-button,.ui-icon-button,.ui-input,.ui-text-link,.ui-theme-card,.ui-choice,.ui-card--interactive,.ui-range):focus-visible,.ui-field :is(input,select,textarea):focus-visible,.ui-tabs [role="tab"]:focus-visible,.ui-page-tabs a:focus-visible { outline-offset:3px; }

/* Range slider: hairline track, square thumb that grows under the pointer; the
   input is 44 px tall so the whole strip is the touch target. */
.ui-range { width:100%; height:var(--omni-touch-target); margin:0; background:transparent; cursor:pointer; -webkit-appearance:none; appearance:none; accent-color:var(--omni-primary); }
.ui-range::-webkit-slider-runnable-track { height:2px; border-radius:999px; background:var(--omni-line-strong); }
.ui-range::-moz-range-track { height:2px; border-radius:999px; background:var(--omni-line-strong); }
.ui-range::-webkit-slider-thumb { width:1.25rem; height:1.25rem; margin-top:calc(-.625rem + 1px); border:var(--omni-border-width) solid var(--omni-primary); border-radius:var(--omni-radius-sm); background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-sm); -webkit-appearance:none; appearance:none; transition:transform var(--omni-motion-fast) var(--omni-ease-spring),background-color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-range::-moz-range-thumb { width:1.25rem; height:1.25rem; border:var(--omni-border-width) solid var(--omni-primary); border-radius:var(--omni-radius-sm); background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-sm); transition:transform var(--omni-motion-fast) var(--omni-ease-spring),background-color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-range:hover::-webkit-slider-thumb,.ui-range:focus-visible::-webkit-slider-thumb,.ui-range:active::-webkit-slider-thumb { transform:scale(max(1,calc(1 + (var(--omni-effects-level) - 1) * .15))); background:var(--omni-primary); }
.ui-range:hover::-moz-range-thumb,.ui-range:focus-visible::-moz-range-thumb,.ui-range:active::-moz-range-thumb { transform:scale(max(1,calc(1 + (var(--omni-effects-level) - 1) * .15))); background:var(--omni-primary); }
.ui-range:focus-visible { outline:3px solid var(--omni-focus); outline-offset:3px; }
.ui-range-ticks { display:flex; justify-content:space-between; margin:-.35rem 0 0; padding:0 .3rem; list-style:none; color:var(--omni-muted); font-family:var(--omni-font-mono); font-size:.62rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.ui-range-ticks li { position:relative; flex:0 0 auto; padding-top:.55rem; }
.ui-range-ticks li::before { content:""; position:absolute; top:0; left:50%; width:1px; height:.35rem; background:var(--omni-line-strong); }
.ui-range-ticks li:first-child { text-align:left; }.ui-range-ticks li:last-child { text-align:right; }
.ui-range-ticks li[aria-current="true"] { color:var(--omni-ink-strong); }

/* Dialog: backdrop fades, the panel rises; the exit plays in reverse where the
   browser knows `transition-behavior: allow-discrete` (otherwise it closes at
   once — the fallback). Base state = closed. */
dialog.ui-dialog { opacity:0; transform:translateY(var(--omni-reveal-distance)) scale(.98); transition:opacity var(--omni-motion-base) var(--omni-ease-out),transform var(--omni-motion-base) var(--omni-ease-spring); transition-property:opacity,transform,overlay,display; transition-behavior:allow-discrete; }
dialog.ui-dialog[open] { opacity:1; transform:none; }
dialog.ui-dialog::backdrop { opacity:0; transition:opacity var(--omni-motion-base) var(--omni-ease-out); transition-property:opacity,overlay,display; transition-behavior:allow-discrete; }
dialog.ui-dialog[open]::backdrop { opacity:1; }
@starting-style {
  dialog.ui-dialog[open] { opacity:0; transform:translateY(var(--omni-reveal-distance)) scale(.98); }
  dialog.ui-dialog[open]::backdrop { opacity:0; }
}

/* Skeleton shimmer and other loops read --omni-loop-duration (0 s = still). */
.ui-shimmer { background:linear-gradient(90deg,var(--omni-surface-sunken),var(--omni-surface-raised),var(--omni-surface-sunken)); background-size:220% 100%; animation:ui-shimmer-x var(--omni-loop-duration) linear infinite; }
@keyframes ui-shimmer-x { to { background-position:-220% 0; } }

/* Catalog samples (/styles "Motion & effects"). */
.ui-motion-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--omni-space-4); }
.ui-motion-sample { display:grid; align-content:start; gap:var(--omni-space-3); }
.ui-motion-sample > header { display:grid; gap:.15rem; }
.ui-motion-sample > header h3 { margin:0; color:var(--omni-ink-strong); font-size:.92rem; font-weight:750; }
.ui-motion-sample > header p { margin:0; color:var(--omni-muted); font-size:.7rem; line-height:1.5; }
.ui-motion-sample > header code { color:var(--omni-faint); font-size:.62rem; }
.ui-motion-sample .ui-demo-row { margin-top:auto; }
.ui-motion-sample .ui-table { min-width:0; }
.ui-motion-sample .mw-chart { margin:0; }
.ui-motion-sample .ui-skeleton-row { display:grid; gap:.5rem; }
.ui-motion-sample .ui-skeleton-row i { display:block; height:.68rem; border-radius:var(--omni-radius-sm); }
.ui-motion-sample .ui-skeleton-row i:nth-child(2) { width:82%; }.ui-motion-sample .ui-skeleton-row i:nth-child(3) { width:58%; }
.ui-motion-level { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--omni-space-3); }
.ui-motion-level p { margin:0; color:var(--omni-muted); font-size:.78rem; }
.ui-motion-level b { color:var(--omni-ink-strong); }
/* The "forced off" note is a .ui-alert; `hidden` must still win over its display:flex. */
[data-effects-note][hidden] { display:none; }
.ui-motion-level [data-effects-note]:not([hidden]) { margin-top:.5rem; }
@media (max-width:1180px) { .ui-motion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .ui-motion-grid { grid-template-columns:1fr; } }

/* Charts (ABI/DESIGN-SYSTEM.md "Charts") ----------------------------------- */
/* One figure per chart: head (title, unit, KPI headline), the engine's canvas
   (public/deck-charts.js draws into .ui-chart__canvas when it scrolls into
   view), the five signal stops as a static cube strip at the side (Owner
   2026-10-21: "minimálne kocky niekde na strane"; at colour level 0 they are
   the only colour on the card) and an sr-only table as the text alternative.
   Colour use is html[data-chart-colour="0-3"]; the engines read the tokens. */
.ui-chart { display:grid; min-width:0; grid-template-columns:minmax(0,1fr); gap:var(--omni-space-3); margin:0; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); padding:var(--omni-space-4); color:var(--omni-ink); background:var(--omni-surface); box-shadow:var(--omni-shadow-sm); }
.ui-chart__head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:.3rem .75rem; }
.ui-chart__head strong { display:block; color:var(--omni-ink-strong); font-family:var(--omni-font-display); font-size:.92rem; font-weight:750; }
.ui-chart__head small { display:block; color:var(--omni-muted); font-size:.68rem; }
.ui-chart__headline { display:flex; min-width:0; flex-wrap:wrap; align-items:baseline; gap:var(--omni-gap-line) var(--omni-gap-inline); margin:0; }
.ui-chart__headline b { color:var(--omni-ink-strong); font-size:1.35rem; font-weight:800; font-variant-numeric:tabular-nums; }
.ui-chart__body { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; gap:var(--omni-space-3); }
.ui-chart__canvas { position:relative; min-width:0; height:15rem; opacity:0; transition:opacity var(--omni-motion-base) var(--omni-ease-out); }
.ui-chart.is-ready .ui-chart__canvas { opacity:1; }
.ui-chart__canvas canvas { display:block; }
.ui-chart[data-chart-kind="heatmap"] .ui-chart__canvas { height:13rem; }
.ui-chart--tile { gap:var(--omni-space-2); }
.ui-chart--tile .ui-chart__canvas { height:3.25rem; }
.ui-chart__cubes { display:grid; align-content:start; gap:.25rem; margin:0; padding:0; list-style:none; }
.ui-chart__cubes li { width:.55rem; height:.55rem; background:var(--omni-line-strong); }
.ui-chart__cubes li[data-stop="magenta"] { background:var(--omni-deco-magenta); }
.ui-chart__cubes li[data-stop="indigo"] { background:var(--omni-deco-indigo); }
.ui-chart__cubes li[data-stop="aqua"] { background:var(--omni-deco-aqua); }
.ui-chart__cubes li[data-stop="sky"] { background:var(--omni-deco-sky); }
.ui-chart__cubes li[data-stop="yellow"] { background:var(--omni-deco-yellow); }
.ui-chart__cubes--inline { grid-auto-flow:column; justify-content:start; margin-top:.35rem; }
.ui-chart__table { border-collapse:collapse; }

/* Goossens signals & colour lines (1.4.0, Owner 2026-10-21; Goossens stops for
   every state since 1.7.0) --
   1.7.0 (Owner 2026-10-22: "naše farby všade rovnomerne; zelená a červená len
   pri zmenách typu +2 %"): a state is a flat fill in its Goossens STOP — good
   aqua, watch yellow, bad magenta, info indigo, running sky; idle / unknown
   grey — with bold text in --omni-on-<state> (ink on aqua / yellow, white on
   magenta / indigo / sky), no glow (only a warning / bad "!" marker glows
   and pulses). Green / red are the delta pair only (deck.css .mw-trend).
   Round 5 (1.6.0) briefly used green / orange / red / blue. History below:
   "Používajme viac tie farby — sýtejšie, akože svietia, a na nich biely text.
   My sme čierno-bieli so svietivými výraznými prvkami." On goossens a state is
   a FILL in its stop with white bold text and a glow in the same colour; the
   selected element carries the five-block colour line (--omni-signal-line,
   hard-edged, never a blend). Lives here, not in deck.css, so the Connector
   and the Feedback Hub render the same. Tokens only: --omni-success & co. ARE
   the stops on goossens, ink/grey on data-status="mono", the AA stops on the
   contrast variant. Each tone sets --signal / --signal-soft once; the paint
   rules read them. No gradient fades to ink anywhere (ABI/DESIGN-SYSTEM.md
   "no ink gradients; sharp signal blocks"). */
html[data-theme="goossens"] :is(.ui-badge--info,.ui-alert--info) { --signal:var(--omni-info-stop); --signal-ink:var(--omni-on-info); --signal-soft:var(--omni-info-soft); }
html[data-theme="goossens"] :is(.ui-status-light[data-status="running"],.mw-flow__step[data-status="running"]) { --signal:var(--omni-running-stop); --signal-ink:var(--omni-on-running); --signal-soft:color-mix(in oklab,var(--omni-running-stop) 10%,var(--omni-surface-raised)); }
html[data-theme="goossens"] :is(.ui-badge--success,.ui-alert--success,.ui-status-light[data-status="good"],.mw-flow__step[data-status="good"],.ui-status) { --signal:var(--omni-success-stop); --signal-ink:var(--omni-on-success); --signal-soft:var(--omni-success-soft); }
html[data-theme="goossens"] :is(.ui-badge--warning,.ui-alert--warning,.ui-status-light[data-status="watch"],.mw-flow__step[data-status="watch"],.ui-status.is-idle) { --signal:var(--omni-warning-stop); --signal-ink:var(--omni-on-warning); --signal-soft:var(--omni-warning-soft); }
html[data-theme="goossens"] :is(.ui-badge--danger,.ui-alert--danger,.ui-status-light[data-status="bad"],.mw-flow__step[data-status="bad"],.ui-status.is-error) { --signal:var(--omni-danger-stop); --signal-ink:var(--omni-on-danger); --signal-soft:var(--omni-danger-soft); }
html[data-theme="goossens"] .ui-badge--violet { --signal:var(--omni-violet); --signal-ink:var(--omni-on-info); --signal-soft:var(--omni-violet-soft); }
/* Fills: the Goossens stop, bold text in its on-colour (ink on aqua / yellow, white on magenta / indigo / sky), no glow. */
html[data-theme="goossens"] :is(.ui-badge--info,.ui-badge--success,.ui-badge--warning,.ui-badge--danger,.ui-badge--violet,.ui-status) { border-color:var(--signal); border-radius:0; color:var(--signal-ink); font-weight:700; letter-spacing:.01em; background:var(--signal); box-shadow:none; }
html[data-theme="goossens"] .ui-status { padding:.18rem .55rem; }
html[data-theme="goossens"] .ui-status i { border-radius:0; background:var(--signal-ink); box-shadow:none; }
html[data-theme="goossens"] .ui-status-light[data-status]:not([data-status="unknown"]):not([data-status="idle"]) .ui-status-light__label { padding:.06em .45em; color:var(--signal-ink); font-weight:700; letter-spacing:.01em; background:var(--signal); box-shadow:none; }
html[data-theme="goossens"] .mw-flow__step[data-status]:not([data-status="idle"]):not([data-status="unknown"]) .mw-flow__pill { border-color:var(--signal); color:var(--signal-ink); font-weight:700; background:var(--signal); box-shadow:none; }
html[data-theme="goossens"] .mw-flow__step[data-status]:not([data-status="idle"]):not([data-status="unknown"]) .mw-flow__pill :is(small,.mw-icon) { color:var(--signal-ink); }
/* Alerts: a flat 14 % tint body with ink text; the icon disc and the title
   strip keep the fill; a 4 px stop edge on the left. */
html[data-theme="goossens"] :is(.ui-alert--info,.ui-alert--success,.ui-alert--warning,.ui-alert--danger) { border-color:var(--signal); border-left-width:4px; border-radius:0; color:var(--omni-ink); background:var(--signal-soft); }
html[data-theme="goossens"] :is(.ui-alert--info,.ui-alert--success,.ui-alert--warning,.ui-alert--danger) > :is(span,svg) { border-radius:0; color:var(--signal-ink); background:var(--signal); }
html[data-theme="goossens"] :is(.ui-alert--info,.ui-alert--success,.ui-alert--warning,.ui-alert--danger) strong { display:inline-block; margin-bottom:.22em; padding:.1em .5em; color:var(--signal-ink); font-weight:700; letter-spacing:.01em; background:var(--signal); box-shadow:none; }
html[data-theme="goossens"] :is(.ui-alert--info,.ui-alert--success,.ui-alert--warning,.ui-alert--danger) p { color:var(--omni-ink); }
/* The old brand exception (white text on aqua / yellow with an ink
   text-shadow) stays retired: since 1.7.0 the light stops carry ink text
   (13:1) through --omni-on-success / --omni-on-warning. */
/* Status words that are not pills (a row title in trouble, a field error):
   ink text over a thick underline block in the stop — never pale text. */
html[data-theme="goossens"] .mw-row.has-status[data-status="bad"] .mw-row__title strong,html[data-theme="goossens"] .mw-row.has-status[data-status="bad"] strong.mw-row__title { color:var(--omni-ink-strong); text-decoration:underline; text-decoration-color:var(--omni-danger-stop); text-decoration-thickness:.2em; text-underline-offset:.12em; }
html[data-theme="goossens"] :is(.ui-field--error,.ui-field--success) small { color:var(--omni-ink); }
html[data-theme="goossens"] .ui-field--error small::before,html[data-theme="goossens"] .ui-field--success small::before { content:""; display:inline-block; width:.55em; height:.55em; margin-right:.4em; background:var(--omni-danger-stop); }
html[data-theme="goossens"] .ui-field--success small::before { background:var(--omni-success-stop); }
/* Colour lines: the selected element carries the five blocks. */
html[data-theme="goossens"] .ui-page-tabs a[aria-current="page"] { color:var(--omni-ink-strong); background:var(--omni-surface-raised); box-shadow:inset 0 0 0 1px var(--omni-ink); }
html[data-theme="goossens"] .ui-page-tabs a[aria-current="page"]::after { right:0; bottom:0; left:0; height:3px; background:var(--omni-signal-line); opacity:1; }
html[data-theme="goossens"] .ui-tabs [role="tab"][aria-selected="true"] { color:var(--omni-ink-strong); }
html[data-theme="goossens"] .ui-tabs [role="tab"]::after { height:3px; background:var(--omni-signal-line); }
/* The kicker's colour-line span gives way to the cubes on goossens (both sides, below). */
html[data-theme="goossens"] .ui-eyebrow > span { display:none; }
html[data-theme="goossens"] .ui-choice:has(input:checked) { border-color:var(--omni-ink); background:var(--omni-signal-line-v) left/3px 100% no-repeat,var(--omni-surface-raised); }
html[data-theme="goossens"] .ui-pagination a.is-active { border-color:var(--omni-ink); background:var(--omni-signal-line) left bottom/100% 3px no-repeat,var(--omni-ink); }
html[data-theme="goossens"] .omni-segmented button[aria-pressed="true"] { color:#fff; background:var(--omni-signal-line) left bottom/100% 3px no-repeat,var(--omni-ink); box-shadow:none; }
html[data-theme="goossens"] dialog.ui-dialog::before { content:""; position:absolute; top:0; right:0; left:0; height:3px; background:var(--omni-signal-line); pointer-events:none; }
html[data-theme="goossens"] hr { height:3px; margin:var(--omni-space-5) 0; border:0; background:var(--omni-signal-line); }
/* Primary buttons stay ink; the colour line appears under the label on hover / focus / press (2 px). */
html[data-theme="goossens"] .ui-button--primary::after { content:""; position:absolute; z-index:1; right:0; bottom:0; left:0; height:2px; background:var(--omni-signal-line); transform:scaleX(0); transform-origin:left center; transition:transform var(--omni-motion-base) var(--omni-ease-out); }
html[data-theme="goossens"] .ui-button--primary:hover:not(:disabled)::after,html[data-theme="goossens"] .ui-button--primary:focus-visible::after,html[data-theme="goossens"] .ui-button--primary:active:not(:disabled)::after { transform:scaleX(1); }
/* Links underline in the accent. */
html[data-theme="goossens"] .ui-text-link { text-decoration-color:var(--omni-secondary); }
html[data-theme="goossens"] .ui-text-link:hover { color:var(--omni-secondary); text-decoration-color:var(--omni-secondary); }
html[data-theme="goossens"] .ui-breadcrumbs a { text-decoration-color:var(--omni-secondary); }
/* The five cubes as a motif (page header kicker, settings): five separate
   squares with 2 px gaps — the goossens.ai corner. Hidden on other themes. */
/* Page kicker cubes (round 5, Owner 2026-10-22): the five squares only at
   the END of the eyebrow text — no leading cubes or line. Drawn in CSS (no
   gradient), so the eyebrow markup stays `<span></span>Text`. */
html[data-theme="goossens"] .ui-eyebrow::before { content:none; }
html[data-theme="goossens"] .ui-eyebrow::after { content:""; flex:none; width:.38rem; height:.38rem; margin-left:0; margin-right:calc(4 * (.38rem + 2px)); background:var(--omni-deco-magenta); box-shadow:calc(.38rem + 2px) 0 0 var(--omni-deco-indigo),calc(2 * (.38rem + 2px)) 0 0 var(--omni-deco-aqua),calc(3 * (.38rem + 2px)) 0 0 var(--omni-deco-sky),calc(4 * (.38rem + 2px)) 0 0 var(--omni-deco-yellow); }
.ui-signal-cubes { display:none; }
html[data-theme="goossens"] .ui-signal-cubes { display:inline-flex; gap:2px; margin-left:.55rem; vertical-align:middle; }
.ui-signal-cubes i { width:.38rem; height:.38rem; background:var(--omni-line-strong); }
.ui-signal-cubes i:nth-child(1) { background:var(--omni-deco-magenta); }.ui-signal-cubes i:nth-child(2) { background:var(--omni-deco-indigo); }.ui-signal-cubes i:nth-child(3) { background:var(--omni-deco-aqua); }.ui-signal-cubes i:nth-child(4) { background:var(--omni-deco-sky); }.ui-signal-cubes i:nth-child(5) { background:var(--omni-deco-yellow); }
html[data-theme="goossens"] .ui-chart__cubes { gap:2px; }
/* No ink gradients: the baseline's soft ramps become flat blocks on goossens. */
html[data-theme="goossens"] .ui-card--accent { border-color:var(--omni-ink); background:var(--omni-signal-line) top/100% 3px no-repeat,var(--omni-surface-raised); }
html[data-theme="goossens"] .ui-card--danger { border-color:var(--omni-danger); border-left-width:4px; background:var(--omni-danger-soft); }
html[data-theme="goossens"] .ui-page-header--hero { background:var(--omni-signal-line) top/100% 4px no-repeat,var(--omni-surface-raised); }
html[data-theme="goossens"] .ui-progress-row progress::-webkit-progress-value,html[data-theme="goossens"] .ui-meter meter::-webkit-meter-optimum-value,html[data-theme="goossens"] .ui-hbar__bar { border-radius:0; background:var(--omni-secondary); }
html[data-theme="goossens"] .ui-progress-row progress::-moz-progress-bar,html[data-theme="goossens"] .ui-meter meter::-moz-meter-bar { border-radius:0; background:var(--omni-secondary); }
html[data-theme="goossens"] .ui-progress-row progress,html[data-theme="goossens"] .ui-progress-row progress::-webkit-progress-bar,html[data-theme="goossens"] .ui-meter meter,html[data-theme="goossens"] .ui-meter meter::-webkit-meter-bar,html[data-theme="goossens"] .ui-hbar__track { border-radius:0; }
html[data-theme="goossens"] .ui-button--primary { box-shadow:none; }
html[data-theme="goossens"] .ui-sticky-actions { box-shadow:none; }
/* No corner radius anywhere (Owner 2026-10-22) — every goossens variant,
   every element: the radius tokens are 0 (omni-tokens.css) and this rule
   catches the literal radii (legacy Deck rules, Tailwind rounded-*, pills,
   badges, menus, dialogs, inputs, toasts, avatars, status dots — dots and
   avatars are squares too). The CSS donut sample keeps its ring: a pie, not
   a corner. */
html[data-theme="goossens"] *,html[data-theme="goossens"] *::before,html[data-theme="goossens"] *::after { border-radius:0 !important; }
html[data-theme="goossens"] ::-webkit-scrollbar-thumb,html[data-theme="goossens"] ::-webkit-slider-thumb,html[data-theme="goossens"] ::-webkit-slider-runnable-track { border-radius:0 !important; }
html[data-theme="goossens"] ::-moz-range-thumb,html[data-theme="goossens"] ::-moz-range-track { border-radius:0 !important; }
html[data-theme="goossens"] .ui-donut { border-radius:50% !important; }

/* Date range picker v3 — `ui-daterange` (the dátumovník, Owner 2026-10-21; v3 2026-10-22)
   The only period selector of the Deck and every module workspace
   (ABI/DESIGN-SYSTEM.md "Date range", ABI/MODULE-WORKSPACE-VIEWS.md "range
   v2"). One row: FIRST the date box (.ui-daterange__date: the resolved day
   centred, or from – to; the day count small and muted under it; a fixed
   width class --w14…--w36 = the longest range text of the locale, so it
   never jumps), then the presets Today · Yesterday · This week · This month ·
   Custom as plain links, the active one LIT (primary fill, light dot on). The
   date box and Custom open the dropdown: the calendar (.ui-calendar__*, drawn
   by public/deck-ui.js) and the GET form (the no-JS fallback). A workspace
   pins the picker under its page header (.mw-pinned-range, deck.css). On a
   phone the row wraps into smaller rows. Markup: partials/mw-daterange.hbs.
   Tokens only. */
.ui-daterange { position:relative; display:block; margin-bottom:var(--omni-space-4); font-family:var(--omni-font-body); }
/* v4 (Owner 2026-10-22): date box + presets are ONE control — one border, hairline separators, one height (48 px). */
.ui-daterange__row { display:inline-flex; max-width:100%; flex-wrap:wrap; align-items:stretch; gap:0; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-sm); }
.ui-daterange__date { display:inline-flex; min-height:var(--omni-row-height); align-items:center; gap:.6rem; border:0; border-right:var(--omni-border-width) solid var(--omni-line); border-radius:0; padding:.35rem 1rem; color:var(--omni-ink-strong); font-size:.88rem; text-decoration:none; background:transparent; box-shadow:none; transition:border-color var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out); }
a.ui-daterange__date { cursor:pointer; }
a.ui-daterange__date:hover,.ui-daterange.is-open .ui-daterange__date { background:var(--omni-surface-soft); }
.ui-daterange__icon,.ui-daterange__chevron { width:1rem; height:1rem; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:var(--omni-muted); }
.ui-daterange__chevron { transition:transform var(--omni-motion-fast) var(--omni-ease-out); }
.ui-daterange.is-open .ui-daterange__chevron { transform:rotate(180deg); }
/* The date AND the day count are always centred in the box (one day or a range). */
.ui-daterange__dates { display:grid; flex:1 1 auto; justify-items:center; gap:.08rem; line-height:1.15; text-align:center; }
.ui-daterange__date.is-single .ui-daterange__dates { justify-items:center; text-align:center; }
.ui-daterange__dates b { font-weight:760; letter-spacing:-.005em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-daterange__dates small { color:var(--omni-muted); font-size:.78em; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-daterange__date--w14 .ui-daterange__dates { min-width:11.2ch; }
.ui-daterange__date--w16 .ui-daterange__dates { min-width:12.8ch; }
.ui-daterange__date--w18 .ui-daterange__dates { min-width:14.4ch; }
.ui-daterange__date--w20 .ui-daterange__dates { min-width:16ch; }
.ui-daterange__date--w22 .ui-daterange__dates { min-width:17.6ch; }
.ui-daterange__date--w24 .ui-daterange__dates { min-width:19.2ch; }
.ui-daterange__date--w26 .ui-daterange__dates { min-width:20.8ch; }
.ui-daterange__date--w28 .ui-daterange__dates { min-width:22.4ch; }
.ui-daterange__date--w30 .ui-daterange__dates { min-width:24ch; }
.ui-daterange__date--w32 .ui-daterange__dates { min-width:25.6ch; }
.ui-daterange__date--w34 .ui-daterange__dates { min-width:27.2ch; }
.ui-daterange__date--w36 .ui-daterange__dates { min-width:28.8ch; }
.ui-daterange__presets { display:inline-flex; flex-wrap:wrap; align-items:stretch; gap:0; border:0; border-radius:0; padding:0; background:transparent; }
.ui-daterange__preset { position:relative; display:inline-flex; min-height:var(--omni-touch-target); align-items:center; justify-content:center; gap:.5rem; border-radius:0; padding:.55rem 1rem; color:var(--omni-muted); font-size:.82rem; font-weight:700; line-height:1.2; letter-spacing:.01em; text-decoration:none; white-space:nowrap; cursor:pointer; background:transparent; transition:color var(--omni-motion-fast) var(--omni-ease-out),background-color var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out); }
.ui-daterange__preset + .ui-daterange__preset { border-left:var(--omni-border-width) solid var(--omni-line); }
.ui-daterange__preset:hover { color:var(--omni-ink-strong); background:var(--omni-surface-soft); }
.ui-daterange__light { width:.5rem; height:.5rem; flex:0 0 .5rem; border-radius:999px; background:var(--omni-line-strong); transition:background-color var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out); }
.ui-daterange__preset.is-lit { color:var(--omni-on-primary); background:var(--omni-primary); box-shadow:none; }
.ui-daterange__preset.is-lit .ui-daterange__light { background:var(--omni-success); box-shadow:0 0 0 2px color-mix(in oklab,var(--omni-on-primary) 55%,transparent),0 0 10px 1px var(--omni-success); }
.ui-daterange__preset[aria-expanded="true"]:not(.is-lit) { color:var(--omni-ink-strong); background:var(--omni-surface-soft); }
.ui-daterange.is-loading { cursor:progress; }
/* The dropdown: calendar left (with its hint), the typed from–to form right. */
.ui-daterange__dropdown { position:absolute; z-index:45; top:calc(100% + .4rem); left:0; display:grid; grid-template-columns:auto minmax(13rem,1fr); align-items:start; gap:var(--omni-space-2) var(--omni-space-4); width:max-content; max-width:calc(100vw - 2rem); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); padding:var(--omni-space-4); background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-lg); }
.ui-daterange__dropdown[hidden] { display:none; }
.ui-daterange__calendar[hidden],.ui-daterange__hint[hidden] { display:none; }
.ui-daterange__calendar { grid-column:1; grid-row:1; }
.ui-daterange__dropdown > .ui-daterange__hint { grid-column:1; grid-row:2; max-width:19rem; }
.ui-daterange__panel { display:flex; flex-wrap:wrap; align-items:end; gap:var(--omni-space-3); }
.ui-daterange__calendar:not([hidden]) ~ .ui-daterange__panel { grid-column:2; grid-row:1 / span 2; flex-direction:column; align-items:stretch; border-left:var(--omni-border-width) solid var(--omni-line); padding-left:var(--omni-space-4); }
.ui-daterange__panel .ui-field { flex:1 1 10rem; max-width:14rem; }
.ui-daterange__calendar:not([hidden]) ~ .ui-daterange__panel .ui-field { flex:none; max-width:none; }
.ui-daterange__panel .ui-button { min-height:var(--omni-touch-target); }
.ui-daterange__hint { flex-basis:100%; margin:0; color:var(--omni-muted); font-size:.72rem; line-height:1.45; }
/* The calendar (deck-ui.js): Monday first, the range filled, its ends lit, today underlined, future and out-of-span days disabled. */
.ui-calendar__head { display:flex; align-items:center; justify-content:space-between; gap:var(--omni-space-2); margin-bottom:.35rem; }
.ui-calendar__title { color:var(--omni-ink-strong); font-size:.88rem; font-weight:760; }
.ui-calendar__nav { display:inline-grid; width:var(--omni-touch-target); height:2.4rem; place-items:center; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:0; color:var(--omni-ink); font:inherit; font-size:1.15rem; line-height:1; background:var(--omni-surface); cursor:pointer; transition:border-color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-calendar__nav:hover:not(:disabled) { border-color:var(--omni-primary); }
.ui-calendar__nav:disabled { opacity:.35; cursor:default; }
.ui-calendar__grid { border-collapse:separate; border-spacing:0 2px; }
.ui-calendar__grid th { border:0; padding:0 0 .3rem; background:transparent; color:var(--omni-muted); font-size:.64rem; font-weight:800; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
.ui-calendar__grid td { border:0; padding:0; background:transparent; }
.ui-calendar__grid :is(thead,tbody,tr) { border:0; background:transparent; }
.ui-calendar__day { display:grid; width:2.5rem; height:2.4rem; place-items:center; border:0; border-radius:var(--omni-radius-sm); padding:0; color:var(--omni-ink); font:inherit; font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums; background:transparent; cursor:pointer; transition:background-color var(--omni-motion-fast) var(--omni-ease-out),color var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out); }
.ui-calendar__day:hover:not(:disabled) { box-shadow:inset 0 0 0 1px var(--omni-ink); }
.ui-calendar__day.is-outside { color:var(--omni-faint); }
.ui-calendar__day[aria-current="date"] { box-shadow:inset 0 -3px 0 var(--omni-secondary); }
.ui-calendar__day.is-in-range { background:var(--omni-primary-soft); }
.ui-calendar__day.is-preview { background:var(--omni-secondary-soft); }
.ui-calendar__day:is(.is-start,.is-end) { color:var(--omni-on-primary); font-weight:800; background:var(--omni-primary); }
.ui-calendar__day:disabled { color:var(--omni-faint); opacity:.4; cursor:not-allowed; }
.ui-calendar__day:focus-visible { outline:3px solid var(--omni-focus); outline-offset:-1px; }
/* Goossens: ink fill, white text, the aqua light with its glow, square corners, the colour line on the dropdown. */
html[data-theme="goossens"] .ui-daterange__row { border-color:var(--omni-ink); box-shadow:none; }
html[data-theme="goossens"] .ui-daterange__preset.is-lit { color:var(--omni-surface); background:var(--omni-ink); box-shadow:none; }
html[data-theme="goossens"] .ui-daterange__preset.is-lit .ui-daterange__light { background:var(--omni-success-stop); box-shadow:0 0 0 var(--omni-signal-glow-ring) var(--omni-success-stop),0 0 var(--omni-signal-glow-bloom) -2px var(--omni-success-stop); }
html[data-theme="goossens"] .ui-daterange__date .ui-daterange__icon { color:var(--omni-ink); }
html[data-theme="goossens"] .ui-daterange.is-open .ui-daterange__date { background:var(--omni-signal-line) left bottom/100% 3px no-repeat,var(--omni-surface-raised); }
html[data-theme="goossens"] .ui-daterange__dropdown { border-color:var(--omni-ink); background:var(--omni-signal-line) top/100% 3px no-repeat,var(--omni-surface-raised); box-shadow:none; }
html[data-theme="goossens"] .ui-calendar__nav { border-color:var(--omni-ink); }
html[data-theme="goossens"] .ui-calendar__day[aria-current="date"] { box-shadow:inset 0 -3px 0 var(--omni-success-stop); }
html[data-theme="goossens"] .ui-calendar__day.is-in-range { background:var(--omni-surface-sunken); }
html[data-theme="goossens"] .ui-calendar__day.is-preview { background:var(--omni-secondary-soft); }
html[data-theme="goossens"] .ui-calendar__day:is(.is-start,.is-end) { color:var(--omni-surface); background:var(--omni-ink); }
@media (max-width: 640px) {
  .ui-daterange__row { display:flex; gap:0; overflow:hidden; }
  .ui-daterange__date { flex:1 1 100%; border-right:0; border-bottom:var(--omni-border-width) solid var(--omni-line); padding:.3rem .65rem; font-size:.8rem; }
  .ui-daterange__dates { min-width:0; }
  .ui-daterange__presets { display:grid; width:calc(100% + 1px); grid-template-columns:repeat(3,minmax(0,1fr)); margin:-1px 0 0 -1px; }
  .ui-daterange__preset { flex:1 1 auto; justify-content:center; gap:.35rem; border-top:var(--omni-border-width) solid var(--omni-line); border-left:var(--omni-border-width) solid var(--omni-line); padding:.4rem .5rem; font-size:.72rem; }
  .ui-daterange__dropdown { right:0; width:auto; grid-template-columns:minmax(0,1fr); padding:var(--omni-space-3); }
  .ui-daterange__calendar:not([hidden]) ~ .ui-daterange__panel { grid-column:1; grid-row:auto; border-top:var(--omni-border-width) solid var(--omni-line); border-left:0; padding:var(--omni-space-3) 0 0; }
  .ui-calendar__grid { width:100%; table-layout:fixed; }
  .ui-calendar__day { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-daterange__preset,.ui-daterange__light,.ui-daterange__date,.ui-daterange__chevron,.ui-calendar__day,.ui-calendar__nav { transition:none; }
}
html[data-motion="reduced"] :is(.ui-daterange__preset,.ui-daterange__light,.ui-daterange__date,.ui-daterange__chevron,.ui-calendar__day,.ui-calendar__nav),html[data-motion="off"] :is(.ui-daterange__preset,.ui-daterange__light,.ui-daterange__date,.ui-daterange__chevron,.ui-calendar__day,.ui-calendar__nav) { transition:none; }

/* Client switcher — `ui-switcher` (kit v3, Owner 2026-10-22) ---------------
   The `switcher` block of a module workspace, lifted into the page header
   (partials/mw-switcher.hbs): a native <details> whose button shows the
   current client, a menu of GET links with each client's status light, and
   "+ Add client" last; with no clients the button is that link.
   public/deck-ui.js closes it on Escape / outside click and walks the items
   with the arrow keys. Tokens only. */
.ui-switcher { position:relative; display:inline-block; }
.ui-switcher > summary { list-style:none; }
.ui-switcher > summary::-webkit-details-marker { display:none; }
.ui-switcher__button { display:inline-flex; min-height:var(--omni-touch-target); align-items:center; gap:.6rem; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius-sm); padding:.3rem .75rem .45rem; color:var(--omni-ink-strong); text-decoration:none; background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-sm); cursor:pointer; transition:border-color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-switcher__button:hover,.ui-switcher[open] > .ui-switcher__button { border-color:var(--omni-primary); }
.ui-switcher__text { display:grid; min-width:0; text-align:left; line-height:1.15; }
.ui-switcher__text small { color:var(--omni-muted); font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ui-switcher__text strong,.ui-switcher__meta { max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-switcher__text strong { font-size:.88rem; font-weight:760; }
.ui-switcher__meta { color:var(--omni-muted); font-size:.68rem; }
.ui-switcher__plus { font-size:1rem; font-weight:800; line-height:1; }
.ui-switcher__button--add strong { font-size:.84rem; font-weight:760; }
.ui-switcher__chevron { width:1rem; height:1rem; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; color:var(--omni-muted); transition:transform var(--omni-motion-fast) var(--omni-ease-out); }
.ui-switcher[open] .ui-switcher__chevron { transform:rotate(180deg); }
.ui-switcher__menu { position:absolute; z-index:45; top:calc(100% + .35rem); right:0; display:grid; width:min(22rem,calc(100vw - 2rem)); max-height:min(26rem,70vh); overflow:auto; border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); padding:.35rem; background:var(--omni-surface-raised); box-shadow:var(--omni-shadow-lg); }
.ui-switcher__list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.ui-switcher__item,.ui-switcher__add { display:flex; min-height:var(--omni-touch-target); align-items:center; gap:.6rem; border-radius:var(--omni-radius-sm); padding:.35rem .6rem; color:var(--omni-ink); text-decoration:none; transition:background-color var(--omni-motion-fast) var(--omni-ease-out); }
.ui-switcher__item:hover,.ui-switcher__item:focus-visible,.ui-switcher__add:hover,.ui-switcher__add:focus-visible { background:var(--omni-surface-soft); }
.ui-switcher__item.is-current { background:var(--omni-surface-soft); box-shadow:inset 3px 0 0 var(--omni-primary); }
.ui-switcher__item-text { display:grid; min-width:0; line-height:1.2; }
.ui-switcher__item-text strong,.ui-switcher__item-text small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-switcher__item-text strong { font-size:.84rem; font-weight:700; }
.ui-switcher__item-text small { color:var(--omni-muted); font-size:.7rem; }
.ui-switcher__item .ui-status-dot { flex:none; }
.ui-switcher__dot { width:.62rem; height:.62rem; flex:none; border:2px solid var(--omni-line-strong); border-radius:50%; }
.ui-switcher__add { margin-top:.35rem; border-top:var(--omni-border-width) solid var(--omni-line); color:var(--omni-primary); font-size:.84rem; font-weight:760; }
.ui-switcher__empty { padding:.5rem .6rem; }
.ui-switcher__empty strong { display:block; color:var(--omni-ink-strong); font-size:.84rem; }
.ui-switcher__empty p { margin:.2rem 0 0; color:var(--omni-muted); font-size:.76rem; line-height:1.45; }
html[data-theme="goossens"] .ui-switcher__button { border-color:var(--omni-ink); box-shadow:none; }
html[data-theme="goossens"] .ui-switcher[open] > .ui-switcher__button { background:var(--omni-signal-line) left bottom/100% 3px no-repeat,var(--omni-surface-raised); }
html[data-theme="goossens"] .ui-switcher__menu { border-color:var(--omni-ink); background:var(--omni-signal-line) top/100% 3px no-repeat,var(--omni-surface-raised); box-shadow:none; padding-top:calc(.35rem + 3px); }
html[data-theme="goossens"] .ui-switcher__item.is-current { color:var(--omni-surface); background:var(--omni-signal-line-v) right/3px 100% no-repeat,var(--omni-ink); box-shadow:none; }
html[data-theme="goossens"] .ui-switcher__item.is-current small { color:var(--omni-surface); opacity:.75; }
html[data-theme="goossens"] .ui-switcher__add { color:var(--omni-ink-strong); }
@media (prefers-reduced-motion: reduce) {
  .ui-switcher__button,.ui-switcher__chevron,.ui-switcher__item,.ui-switcher__add { transition:none; }
}

/* Workspace charts on an engine (kit v3): three heights. */
.mw-echart { margin:0 0 var(--omni-space-4); }
.ui-chart--s .ui-chart__canvas { height:10rem; }
.ui-chart--l .ui-chart__canvas { height:22rem; }

/* Kit v4 — the UI/UX cleanup that starts in the design system (1.5.0, Owner
   2026-10-22; ABI/DESIGN-SYSTEM.md "Kit v4 rules", ABI/MODULE-WORKSPACE-VIEWS.md
   §2d). One rhythm (--omni-gap-* / --omni-pad-*), one icon scale (16 · 20 ·
   24), one pill (24 px), one button height (40 px; 44 px on touch), lights
   that always show their colour, the "!" info marker instead of underlined
   tooltip text, sortable tables, collapsible sections, the grid block, entity
   facts and the "+ add" card. Live samples: /styles "15 · Workspace kit v4".
   Tokens only. */

/* Buttons: touch keeps 44 px; under goossens the quiet (ghost) button is still visible. */
@media (pointer: coarse) {
  .ui-button,.ui-button--small { min-height:var(--omni-touch-target); }
}
.ui-button .mw-icon { width:var(--omni-icon-sm); height:var(--omni-icon-sm); margin:0; }
html[data-theme="goossens"] .ui-button--ghost { border-color:var(--omni-line-strong); color:var(--omni-ink-strong); }
html[data-theme="goossens"] .ui-button--ghost:hover:not(:disabled) { border-color:var(--omni-ink); }

/* Pills: the icon is 14 px, a light inside a pill 8 px; on goossens the fill IS the light, so no dot is drawn on it. */
.ui-badge .mw-icon,.ui-badge > svg { width:var(--omni-pill-icon); height:var(--omni-pill-icon); flex:none; margin:0; }
.ui-badge .ui-status-dot { width:8px; height:8px; flex:0 0 8px; border-width:0; box-shadow:none; }
html[data-theme="goossens"] :is(.ui-badge--info,.ui-badge--success,.ui-badge--warning,.ui-badge--danger,.ui-badge--violet) .ui-status-dot { display:none; }
.ui-status-light { gap:var(--omni-pill-gap); min-height:var(--omni-pill-height); vertical-align:middle; }
html[data-theme="goossens"] .ui-status-light[data-status]:not([data-status="unknown"]):not([data-status="idle"]) .ui-status-light__label { display:inline-flex; box-sizing:border-box; height:var(--omni-pill-height); align-items:center; padding:var(--omni-pill-pad); font-size:var(--omni-pill-font); line-height:1; white-space:nowrap; }
html[data-theme="goossens"] .ui-status { box-sizing:border-box; height:var(--omni-pill-height); gap:var(--omni-pill-gap); padding:var(--omni-pill-pad); font-size:var(--omni-pill-font); line-height:1; }

/* Status lights always show their colour. On goossens aqua (1.48:1), yellow
   (1.52:1) and sky (2.35:1) are too light to hold an edge on paper, so every
   light gets a 1 px edge mixed from its stop and ink (WCAG 1.4.11); unknown is
   a hollow grey square (muted edge, sunken fill), never white on white. */
html[data-theme="goossens"] .ui-status-dot[data-status="good"] { box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--omni-success-stop) 55%,var(--omni-ink)); }
html[data-theme="goossens"] .ui-status-dot[data-status="watch"] { box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--omni-warning-stop) 55%,var(--omni-ink)); }
html[data-theme="goossens"] .ui-status-dot[data-status="bad"] { box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--omni-danger-stop) 70%,var(--omni-ink)); }
html[data-theme="goossens"] .ui-status-dot[data-status="running"] { box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--omni-running-stop) 55%,var(--omni-ink)); }
html[data-theme="goossens"] .ui-status-dot[data-status="unknown"] { border-color:var(--omni-muted); background:var(--omni-surface-sunken); box-shadow:none; }

/* Info marker (round 5, Owner 2026-10-22: "ička modrou"): a 16 px square
   after the text — tone info = blue square with a white "i" (default),
   warning = orange with "!", bad = red with "!". A warning / bad marker
   glows softly and pulses slowly (2.4 s, opacity + transform of ::before
   only); nothing glows or moves at effects 0, calm, off or reduced motion.
   Hover, focus or tap shows the tip. */
.ui-info { --info-fill:var(--omni-info-stop); --info-glow:var(--omni-info-stop); --info-ink:var(--omni-on-info); position:relative; z-index:1; display:inline-grid; width:var(--omni-icon-sm); height:var(--omni-icon-sm); flex:none; place-items:center; margin:0 0 0 var(--omni-gap-inline); border:1px solid var(--info-fill); border-radius:var(--omni-radius-sm); padding:0; color:var(--info-ink); font-family:var(--omni-font-body); font-size:.66rem; font-weight:800; line-height:1; vertical-align:middle; background:var(--info-fill); cursor:help; transition:transform var(--omni-motion-fast) var(--omni-ease-out),box-shadow var(--omni-motion-fast) var(--omni-ease-out); }
.ui-info[data-tone="warning"] { --info-fill:var(--omni-warning-stop); --info-glow:var(--omni-warning-stop); --info-ink:var(--omni-on-warning); }
.ui-info[data-tone="bad"] { --info-fill:var(--omni-danger-stop); --info-glow:var(--omni-danger-stop); --info-ink:var(--omni-on-danger); }
.ui-info::after { content:""; position:absolute; inset:-14px; }
.ui-info > span { position:relative; z-index:1; }
.ui-info__glyph::before { content:"i"; font-family:Georgia,"Times New Roman",serif; font-size:.74rem; font-style:italic; font-weight:700; }
.ui-info:is([data-tone="warning"],[data-tone="bad"]) .ui-info__glyph::before { content:"!"; font-family:var(--omni-font-body); font-size:.66rem; font-style:normal; font-weight:800; }
.ui-info:is([data-tone="warning"],[data-tone="bad"])::before { content:""; position:absolute; inset:-1px; pointer-events:none; box-shadow:0 0 0 var(--omni-signal-glow-ring) var(--info-glow),0 0 var(--omni-signal-glow-bloom) 0 var(--info-glow); opacity:.55; animation:ui-info-pulse 2.4s ease-in-out infinite; }
@keyframes ui-info-pulse { 0%,100% { opacity:.3; transform:scale(1); } 50% { opacity:.8; transform:scale(1.18); } }
html[data-effects="0"] .ui-info::before,html[data-effects="1"] .ui-info::before,html[data-motion="calm"] .ui-info::before,html[data-motion="off"] .ui-info::before,html[data-motion="reduced"] .ui-info::before { animation:none; }
html[data-effects="0"] .ui-info::before,html[data-motion="off"] .ui-info::before,html[data-motion="reduced"] .ui-info::before { content:none; }
.ui-info:hover,.ui-info[data-tip-open] { color:var(--info-ink); background:var(--info-fill); box-shadow:0 0 0 2px var(--omni-surface-raised),0 0 0 3px var(--info-fill); }
html[data-theme="goossens"][data-status="mono"] .ui-info { --info-fill:var(--omni-ink); --info-glow:var(--omni-ink); --info-ink:var(--omni-surface-raised); }
.ui-info:focus-visible { outline:3px solid var(--omni-focus); outline-offset:2px; }
:is(h2,h3) > .ui-info { vertical-align:.12em; }

/* Links: only real links are underlined — on goossens only on hover / focus, in the accent. */
html[data-theme="goossens"] :is(.ui-text-link,.ui-breadcrumbs a) { text-decoration-line:none; }
html[data-theme="goossens"] :is(.ui-text-link,.ui-breadcrumbs a):is(:hover,:focus-visible) { text-decoration-line:underline; text-decoration-color:var(--omni-secondary); text-underline-offset:3px; }
/* A row title in trouble is no underline any more: the magenta light and the attention bar carry it. */
html[data-theme="goossens"] .mw-row.has-status[data-status="bad"] .mw-row__title strong,html[data-theme="goossens"] .mw-row.has-status[data-status="bad"] strong.mw-row__title { text-decoration:none; }

/* Tables: 48 px rows, zebra hairlines, numbers right with tabular figures. The wrap is the containing block, so an sr-only label in a wide table never widens the page. */
.ui-table-wrap,.ui-chart { position:relative; }
/* An sr-only data table of a chart is a table (it ignores its own 1 px box): pinned to the figure's right edge, a wide one can only reach left, so it never widens the page. */
.ui-chart__table.ui-sr-only { top:0; right:0; }
.ui-table th,.ui-table td { height:var(--omni-row-height); padding:.45rem var(--omni-pad-row); }
.ui-table td { font-size:.875rem; line-height:1.45; }
.ui-table tbody tr:nth-child(even) td { background:var(--omni-surface-soft); }
.ui-table :is(th,td).mw-cell--end { text-align:right; font-variant-numeric:tabular-nums; }
.mw-table :is(td,th).mw-cell--end,.mw-table td:is(.mw-format--date,.mw-format--dateTime,.mw-format--percent,.mw-format--count,.mw-format--number,.mw-format--currency,.mw-format--signedPercent,.mw-format--status,.mw-format--mono) { white-space:nowrap; }
/* Round 5 tables (Owner 2026-10-22: "žiadne škaredé zalomenia"): column
   headers wrap to at most two lines ("Miera / otvorenia"); a long name keeps
   two lines and an ellipsis (its full text in the title); pills inside a
   table are compact; a status cell is a dot + word, never a coloured fill. */
.mw-table th { font-size:.72rem; line-height:1.3; vertical-align:bottom; }
.mw-table th > :is(span,.mw-sort) { display:-webkit-inline-box; max-width:14ch; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; white-space:normal; }
.mw-table th > .mw-sort { display:inline-flex; max-width:16ch; }
.mw-table th > .mw-sort > span { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; }
.mw-table td.mw-cell--clamp > :is(.mw-value,.mw-link) { display:-webkit-box; max-width:28rem; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow-wrap:anywhere; }
.mw-table td :is(.ui-badge,.mw-tone--success,.mw-tone--warning,.mw-tone--danger,.mw-tone--info) { height:20px; padding:0 6px; font-size:.66rem; white-space:nowrap; }
.mw-table .ui-status-light { gap:var(--omni-pill-gap); white-space:nowrap; }
.mw-table .ui-status-light .ui-status-light__label,html[data-theme="goossens"] .mw-table .ui-status-light[data-status]:not([data-status="unknown"]):not([data-status="idle"]) .ui-status-light__label { height:auto; padding:0; color:var(--omni-ink); font-size:inherit; font-weight:650; letter-spacing:0; background:none; box-shadow:none; text-shadow:none; }
.ui-table :is(th,td).mw-cell--center { text-align:center; }
.mw-sort { display:inline-flex; min-height:32px; align-items:center; gap:var(--omni-pill-gap); margin:0; border:0; padding:0; color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit; text-transform:inherit; background:transparent; cursor:pointer; }
.mw-sort:hover { color:var(--omni-ink-strong); }
.mw-sort:focus-visible { outline:3px solid var(--omni-focus); outline-offset:2px; }
th.mw-cell--end .mw-sort { flex-direction:row-reverse; }
.mw-sort__icon { width:var(--omni-pill-icon); height:var(--omni-pill-icon); flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mw-sort__up,.mw-sort__down { opacity:.35; transition:opacity var(--omni-motion-fast) var(--omni-ease-out); }
th[aria-sort="ascending"] .mw-sort__up,th[aria-sort="descending"] .mw-sort__down { opacity:1; }
th[aria-sort="ascending"],th[aria-sort="descending"] { color:var(--omni-ink-strong); }
html[data-theme="goossens"] th[aria-sort="ascending"],html[data-theme="goossens"] th[aria-sort="descending"] { box-shadow:inset 0 -3px 0 var(--omni-secondary); }

/* Collapsible section: a <details> with a chevron, the title and an optional count. */
.mw-collapse { margin:0 0 var(--omni-gap-block); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); background:var(--omni-surface); }
.mw-collapse__summary { display:flex; min-height:var(--omni-row-height); align-items:center; gap:var(--omni-space-3); padding:0 var(--omni-pad-card); color:var(--omni-ink-strong); font-size:.92rem; font-weight:750; list-style:none; cursor:pointer; }
.mw-collapse__summary::-webkit-details-marker { display:none; }
.mw-collapse__summary:focus-visible { outline:3px solid var(--omni-focus); outline-offset:-3px; }
.mw-collapse__chevron { width:var(--omni-icon-md); height:var(--omni-icon-md); flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-90deg); transition:transform var(--omni-motion-fast) var(--omni-ease-out); }
.mw-collapse[open] > .mw-collapse__summary .mw-collapse__chevron { transform:none; }
.mw-collapse__title { display:inline-flex; align-items:center; min-width:0; }
.mw-collapse__count { display:inline-flex; box-sizing:border-box; height:var(--omni-pill-height); align-items:center; border:1px solid var(--omni-line); padding:var(--omni-pill-pad); color:var(--omni-muted); font-size:var(--omni-pill-font); font-weight:700; font-variant-numeric:tabular-nums; }
.mw-collapse__subtitle { margin-left:auto; color:var(--omni-muted); font-size:.75rem; font-weight:500; }
.mw-collapse__body { padding:0 var(--omni-pad-card) var(--omni-pad-card); }
.mw-collapse__body > :last-child { margin-bottom:0; }
html[data-theme="goossens"] .mw-collapse[open] { background:var(--omni-signal-line) top/100% 3px no-repeat,var(--omni-surface); }

/* Nesting cascade (Owner 2026-10-22 "kaskáda", ABI/DESIGN-SYSTEM.md
   "Nesting"): every level sits one --omni-indent-step in from its parent —
   a section in a section, the body of a collapsible under its title (it
   starts where the title text does, past the chevron), a row's labelled
   texts under the row title. Exactly one step per level (a section in a
   collapsible body takes the body's step, never a second one); sibling
   sections are separated by a top margin; 12 px steps on a phone. */
section.mw-section > .mw-section { margin-left:var(--omni-indent-step); }
.mw-collapse__body { padding-left:calc(var(--omni-pad-card) + var(--omni-indent-step)); }
.mw-section + .mw-section { margin-top:var(--omni-gap-block); }
.mw-collapse__body > .mw-section:first-child { margin-top:var(--omni-space-2); }
.mw-row .mw-sections { margin-left:var(--omni-indent-step); }
/* Level 1: a collapsible on the page itself (not inside a section) carries a section-size title. */
.mw-collapse:not(.mw-section .mw-collapse) > .mw-collapse__summary { font-size:1.05rem; }
/* A phone: the summary wraps — its subtitle (period, dates) on its own line under the title. */
@media (max-width: 640px) {
  .mw-collapse__summary { flex-wrap:wrap; row-gap:var(--omni-space-1); padding-block:var(--omni-space-3); }
  .mw-collapse__subtitle { flex-basis:100%; margin-left:calc(var(--omni-icon-md) + var(--omni-space-3)); }
}

/* Spacing rhythm (tokens 1.8.0, ABI/DESIGN-SYSTEM.md "Nesting & rhythm"):
   item 12 · group 24 · section 48 px (8 · 16 · 32 on a phone). A row's
   description sits one item gap under its title; the rows of a list one
   group apart; a run of collapsible categories is set off from the blocks
   around it by a section gap, the categories a group apart. */
:root .mw-row__main > :is(small,.mw-meta-lines,p) { margin-top:var(--omni-gap-item); }
:root .mw-row .mw-sections { gap:var(--omni-gap-item); margin-top:var(--omni-gap-item); }
:root .mw-list:not(.mw-list--entity,.mw-list--tiles) > .mw-items > .mw-row { padding-block:var(--omni-gap-group); }
:not(.mw-collapse) + .mw-collapse,.mw-collapse + :not(.mw-collapse) { margin-top:var(--omni-gap-section); }

/* Grid block: 2-3 blocks side by side from 1024 px, stacked below, equal heights. */
.mw-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--omni-gap-block); margin:0 0 var(--omni-gap-block); }
.mw-grid > .mw-grid__cell { display:flex; min-width:0; flex-direction:column; }
.mw-grid > .mw-grid__cell > * { flex:1 1 auto; margin-bottom:0; }
@media (min-width: 1024px) {
  .mw-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mw-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Entity facts: label left (muted), value right (strong), one row each. */
.mw-facts { display:grid; flex:1 1 18rem; max-width:30rem; align-content:start; margin:0; }
.mw-fact { display:flex; min-height:36px; align-items:center; justify-content:space-between; gap:var(--omni-space-4); border-bottom:1px solid var(--omni-line); padding:.35rem 0; }
.mw-fact:last-child { border-bottom:0; }
.mw-fact dt { display:inline-flex; min-width:0; align-items:center; color:var(--omni-muted); font-size:.78rem; font-weight:600; }
.mw-fact dd { display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--omni-pill-gap); margin:0; color:var(--omni-ink-strong); font-size:.88rem; font-weight:750; text-align:right; font-variant-numeric:tabular-nums; }
.mw-fact dd .mw-note { margin:0; }

/* The "+ add" card: the whole card is the link; a 48 px plus, the label under it, the accent edge. */
.mw-add { display:grid; min-height:10rem; justify-items:center; align-content:center; gap:var(--omni-space-2); border:var(--omni-border-width) solid var(--omni-secondary); border-radius:var(--omni-radius); padding:var(--omni-pad-card); color:var(--omni-ink-strong); text-align:center; text-decoration:none; background:var(--omni-surface); transition:border-color var(--omni-motion-fast) var(--omni-ease-out),transform var(--omni-motion-base) var(--omni-ease-spring); }
.mw-add__plus { width:48px; height:48px; fill:none; stroke:var(--omni-secondary); stroke-width:1.75; stroke-linecap:square; }
.mw-add strong { font-size:1rem; font-weight:760; }
.mw-add small,.mw-add__title { color:var(--omni-muted); font-size:.78rem; font-weight:500; }
.mw-add:hover { border-color:var(--omni-ink); transform:translateY(var(--omni-hover-lift)); }
.mw-add:focus-visible { outline:3px solid var(--omni-focus); outline-offset:3px; }
.mw-add--card { margin:0 0 var(--omni-gap-block); }
html[data-theme="goossens"] .mw-add { border-color:var(--omni-ink); background:var(--omni-signal-line) top/100% 3px no-repeat,var(--omni-surface-raised); }
html[data-theme="goossens"] .mw-add__plus { stroke:var(--omni-ink); }

/* Tiles (Owner 2026-10-22, "the squares" of the Consent Popup clients page): a list with
   layout 'tiles' is a grid of square cards — initials square + title on top, the cells as a
   two-column label/value grid, actions under them; the "+ add" card is one more tile. */
.mw-list.mw-list--tiles { overflow:visible; border:0; border-radius:0; background:none; box-shadow:none; }
.mw-list.mw-list--tiles > .mw-list__head { padding-inline:0; }
.mw-list.mw-list--tiles > .mw-row--header { display:none; }
.mw-list.mw-list--tiles > .mw-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:var(--omni-space-4); }
:root .mw-list.mw-list--tiles > .mw-items > .mw-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; align-items:start; gap:var(--omni-space-3) var(--omni-space-4); min-height:12rem; min-width:0; padding:var(--omni-space-4); border:var(--omni-border-width) solid var(--omni-line); border-radius:var(--omni-radius); color:var(--omni-ink); background:var(--omni-surface); box-shadow:var(--omni-shadow); }
.mw-list--tiles > .mw-items > .mw-row > :is(.mw-row__main,.mw-aside,.mw-badges,.mw-side,.mw-facts,.mw-metrics,.mw-actions) { grid-column:1 / -1; }
.mw-list--tiles .mw-row__main { display:flex; flex-wrap:wrap; align-items:center; gap:var(--omni-gap-line) var(--omni-gap-inline); min-width:0; padding-right:var(--omni-space-4); }
.mw-list--tiles .mw-row__main > * { flex:1 1 100%; min-width:0; }
.mw-list--tiles .mw-row__main > .mw-row__title { flex:1 1 0; }
.mw-list--tiles .mw-row__main > .mw-thumb { float:none; flex:none; width:var(--omni-icon-box,48px); height:var(--omni-icon-box,48px); margin:0; border-radius:var(--omni-radius-sm); }
.mw-list--tiles .mw-row__main > .mw-row__light { flex:none; }
.mw-list--tiles .mw-row__main:has(> .mw-thumb) > :is(.mw-row__lead,small) { padding-left:calc(var(--omni-icon-box,48px) + var(--omni-gap-inline)); }
.mw-list--tiles .mw-row__light { position:absolute; top:var(--omni-space-4); right:var(--omni-space-4); margin:0; }
.mw-list--tiles .mw-row__title strong,.mw-list--tiles strong.mw-row__title { overflow:hidden; color:var(--omni-ink-strong); font-size:.95rem; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }
.mw-list--tiles .mw-row__main > small { overflow:hidden; color:var(--omni-muted); font-size:.78rem; text-overflow:ellipsis; }
.mw-list--tiles .mw-cell { display:grid; align-content:start; gap:var(--omni-gap-line); min-width:0; font-size:.78rem; text-align:left; }
.mw-list--tiles .mw-cell[data-label]::before { content:attr(data-label); color:var(--omni-muted); font-size:.7rem; font-weight:700; }
.mw-list--tiles .mw-badges { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:var(--omni-space-2); }
.mw-list--tiles .mw-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:var(--omni-gap-inline); }
:root .mw-list.mw-list--tiles > .mw-items > .mw-row--add { display:grid; grid-template-columns:minmax(0,1fr); min-height:12rem; padding:0; border:0; background:none; box-shadow:none; }
.mw-list--tiles .mw-row--add > .mw-add { height:100%; min-height:12rem; }
/* The Dashboard's "+ add" card under entity cards is one tile of the same grid, not a full-width bar. */
.mw-list.mw-list--entity > .mw-items > .mw-row--add { display:grid; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); gap:var(--omni-space-4); }
.mw-list--entity .mw-row--add > .mw-add { min-height:12rem; }
@media (prefers-reduced-motion: reduce) {
  .mw-collapse__chevron,.mw-add,.ui-info,.mw-sort__up,.mw-sort__down { transition:none; }
  .ui-info::before { content:none !important; animation:none !important; }
}
/* Table rows with a detail dialog (kit v4): the row is clickable, the trailing black "Detail" button is the keyboard way. */
.mw-table tr.has-detail { cursor:pointer; }
.mw-table tr.has-detail:hover td { background:var(--omni-surface-sunken); }
.mw-table__detail { width:1%; white-space:nowrap; }
.mw-table__detail .ui-button { min-height:32px; }

/* Round 5 (1.6.0, Owner 2026-10-22; ABI/DESIGN-SYSTEM.md "Round 5 rules") --
   Semantic status colours, the toned "!" marker (above), decorative accents,
   the page header's logo and client line, and air between inline elements.
   Live samples: /styles "16 · Round 5". Tokens only. */
/* Accent pill: one of the five decorative stops (a provider, a channel) —
   never a state. Ink text on the light stops (aqua, sky, yellow), white on
   magenta / indigo. */
.ui-badge--accent { --accent:var(--omni-deco-indigo); --accent-ink:var(--omni-on-signal); border-color:var(--accent); color:var(--accent-ink); font-weight:700; background:var(--accent); box-shadow:none; }
.ui-badge--accent[data-accent="magenta"] { --accent:var(--omni-deco-magenta); }
.ui-badge--accent[data-accent="aqua"] { --accent:var(--omni-deco-aqua); --accent-ink:var(--omni-ink-strong); }
.ui-badge--accent[data-accent="sky"] { --accent:var(--omni-deco-sky); --accent-ink:var(--omni-ink-strong); }
.ui-badge--accent[data-accent="yellow"] { --accent:var(--omni-deco-yellow); --accent-ink:var(--omni-ink-strong); }
html[data-theme="goossens"][data-status="mono"] .ui-badge--accent { --accent-ink:var(--omni-surface-raised); }
/* Page header: the title, then the logo after it (~28 px, subtle), then the
   client / provider line as pills with air between them. */
.ui-page-header__title { display:flex; min-width:0; flex-wrap:wrap; align-items:center; gap:var(--omni-space-2) var(--omni-space-4); }
.ui-page-header__title > h1 { margin-right:0; }
.ui-page-header__logo { display:block; width:auto; max-width:9rem; height:28px; flex:none; object-fit:contain; opacity:.92; }
.ui-page-header__badges { display:flex; flex-wrap:wrap; align-items:center; gap:var(--omni-gap-inline); margin:var(--omni-space-1) 0 var(--omni-space-2); }
.ui-page-header__copy > p:not(.ui-eyebrow) { margin-top:var(--omni-gap-line); }
.ui-page-actions { gap:var(--omni-gap-inline); }
/* Air between inline elements: a pill, a light or a marker never touches its neighbour. */
:is(.mw-row__main,.mw-text,.mw-list__foot,.mw-collapse__body > p) :is(.ui-badge,.ui-status-light,.mw-value-status) + :is(.ui-badge,.ui-status-light,.mw-value-status) { margin-left:var(--omni-gap-inline); }
.mw-actions,.mw-alert__actions,.mw-dialog__actions { gap:var(--omni-gap-inline); }
.mw-date time { font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Approved round (1.8.0, Owner 2026-10-22, Feedback Hub fh-1149b5be069abdbd) --
   The approved design proposals are standard on goossens (ABI/DESIGN-SYSTEM.md
   "Approved round 2026-10-22"). Tokens only, zero radius. Every loop reads
   --omni-loop-duration (0 s at effects 0-1, calm, off and reduced) and every
   lift or hop is cancelled under reduced motion. The Deck shell parts (tiles,
   sidebar, toasts, chart cubes) live in the Deck's deck.css. */
/* The stop of a data-status, inherited by the tile icon, the hover shadow and the sparkline. */
html[data-theme="goossens"] { --ui-stop:var(--omni-line-strong); }
html[data-theme="goossens"] [data-status="good"] { --ui-stop:var(--omni-success-stop); }
html[data-theme="goossens"] [data-status="watch"] { --ui-stop:var(--omni-warning-stop); }
html[data-theme="goossens"] [data-status="bad"] { --ui-stop:var(--omni-danger-stop); }
html[data-theme="goossens"] [data-status="running"] { --ui-stop:var(--omni-running-stop); }
html[data-theme="goossens"] :is([data-status="idle"],[data-status="unknown"]) { --ui-stop:var(--omni-line-strong); }

/* Sharp icons (p01): the paths are drawn sharp (workspace-icons.js); square caps, mitred joins. */
html[data-theme="goossens"] .mw-icon { stroke-linecap:square; stroke-linejoin:miter; stroke-miterlimit:8; }

/* Duotone tile icons (p02): a flat block in the tile's stop behind the ink glyph. */
html[data-theme="goossens"] .mw-stat__icon { position:relative; isolation:isolate; overflow:hidden; }
html[data-theme="goossens"] .mw-stat__icon::before { content:""; position:absolute; right:5px; bottom:5px; z-index:-1; width:12px; height:12px; background:var(--ui-stop); }
html[data-theme="goossens"] .mw-stat:not([data-status]) .mw-stat__icon::before { background:var(--omni-deco-indigo); opacity:.9; }
html[data-theme="goossens"] .mw-stat__icon .mw-icon { position:relative; }

/* Lit status lights (p05): bad breathes, watch glows, running sends a ring; good stays calm. */
html[data-theme="goossens"] .ui-status-dot:is([data-status="bad"],[data-status="watch"],[data-status="running"]) { box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ui-stop) 60%,var(--omni-ink)),0 0 0 var(--omni-signal-glow-ring) color-mix(in srgb,var(--ui-stop) 45%,transparent),0 0 var(--omni-signal-glow-bloom) 1px var(--ui-stop); }
html[data-theme="goossens"] .ui-status-dot[data-status="bad"]::before { content:""; position:absolute; inset:-4px; pointer-events:none; background:color-mix(in srgb,var(--omni-danger-stop) 35%,transparent); opacity:0; animation:ui-status-breathe var(--omni-loop-duration) var(--omni-ease-in-out) infinite; }
html[data-theme="goossens"] .ui-status-dot[data-status="running"]::after { inset:-6px; border-color:var(--omni-running-stop); }
html[data-theme="goossens"] .mw-row__light .ui-status-dot { width:.8rem; height:.8rem; flex-basis:.8rem; }
@keyframes ui-status-breathe { 0%,100% { opacity:0; transform:scale(.7); } 50% { opacity:1; transform:scale(1); } }
html:is([data-effects="0"],[data-effects="1"],[data-motion="calm"],[data-motion="off"],[data-motion="reduced"]) .ui-status-dot::before { content:none; animation:none; }

/* Hover (p06, Owner 2026-10-22): the card stays put; its hard shadow in its stop slides out from under it
   (from 0, one smooth curve; the card never moves); the ink outline only appears by opacity, never animated. */
html[data-theme="goossens"] :is(.mw-stat,.mw-list--entity > .mw-items > .mw-row,a.ui-card,.ui-card--interactive,.mw-list--tiles > .mw-items > .mw-row:not(.mw-row--add)) { position:relative; box-shadow:0 0 0 0 var(--ui-stop); transition:box-shadow calc(var(--omni-motion-base) * 1.5) cubic-bezier(.22,1,.36,1); }
html[data-theme="goossens"] :is(.mw-stat,.mw-list--entity > .mw-items > .mw-row,a.ui-card,.ui-card--interactive,.mw-list--tiles > .mw-items > .mw-row:not(.mw-row--add))::after { content:""; position:absolute; inset:0; border:2px solid var(--omni-ink); pointer-events:none; opacity:0; transition:none; }
html[data-theme="goossens"] :is(.mw-stat,.mw-list--entity > .mw-items > .mw-row,a.ui-card,.ui-card--interactive,.mw-list--tiles > .mw-items > .mw-row:not(.mw-row--add)):is(:hover,:focus-within) { z-index:1; transform:none; box-shadow:6px 6px 0 0 var(--ui-stop); }
html[data-theme="goossens"] :is(.mw-stat,.mw-list--entity > .mw-items > .mw-row,a.ui-card,.ui-card--interactive,.mw-list--tiles > .mw-items > .mw-row:not(.mw-row--add)):is(:hover,:focus-within)::after { opacity:1; }
html[data-theme="goossens"] .mw-stat:not([data-status]) { --ui-stop:var(--omni-deco-indigo); }
html[data-theme="goossens"] :is(a.ui-card,.ui-card--interactive):not([data-status]) { --ui-stop:var(--omni-deco-indigo); }
html:is([data-effects="0"],[data-motion="off"],[data-motion="reduced"]) :is(.mw-stat,.mw-row,.ui-card):hover { transform:none; }

/* Numbered section headings (p07): 01, 02, … in rotating stops (numbers set by deck-ui.js; the heading icon gives way). */
html[data-theme="goossens"] [data-section-no] { display:inline-flex; align-items:center; gap:10px; }
html[data-theme="goossens"] [data-section-no]::before { content:attr(data-section-no); display:inline-grid; width:28px; height:28px; flex:none; place-items:center; color:var(--ui-section-on,var(--omni-on-danger)); font-family:var(--omni-font-display); font-size:.78rem; font-weight:800; letter-spacing:.02em; background:var(--ui-section-stop,var(--omni-deco-magenta)); }
html[data-theme="goossens"] [data-section-no] > .mw-icon:first-child { display:none; }
html[data-theme="goossens"] [data-section-stop="0"] { --ui-section-stop:var(--omni-deco-magenta); --ui-section-on:var(--omni-on-danger); }
html[data-theme="goossens"] [data-section-stop="1"] { --ui-section-stop:var(--omni-deco-indigo); --ui-section-on:var(--omni-on-info); }
html[data-theme="goossens"] [data-section-stop="2"] { --ui-section-stop:var(--omni-deco-aqua); --ui-section-on:var(--omni-on-success); }
html[data-theme="goossens"] [data-section-stop="3"] { --ui-section-stop:var(--omni-deco-sky); --ui-section-on:var(--omni-on-running); }
html[data-theme="goossens"] [data-section-stop="4"] { --ui-section-stop:var(--omni-deco-yellow); --ui-section-on:var(--omni-on-warning); }
html[data-theme="goossens"] :is(.mw-list__head h3,.ui-chart__head strong)[data-section-no] { font-size:1.05rem; font-weight:800; letter-spacing:-.01em; }

/* Table rows (p09): a 4 px edge in the row's worst light, a tint of it on hover. */
html[data-theme="goossens"] .mw-table tbody tr { --ui-row-edge:transparent; }
html[data-theme="goossens"] .mw-table tbody tr:has(> td:not(.mw-table__detail) [data-status="good"]) { --ui-row-edge:var(--omni-success-stop); }
html[data-theme="goossens"] .mw-table tbody tr:has(> td:not(.mw-table__detail) [data-status="running"]) { --ui-row-edge:var(--omni-running-stop); }
html[data-theme="goossens"] .mw-table tbody tr:has(> td:not(.mw-table__detail) [data-status="watch"]) { --ui-row-edge:var(--omni-warning-stop); }
html[data-theme="goossens"] .mw-table tbody tr:has(> td:not(.mw-table__detail) [data-status="bad"]) { --ui-row-edge:var(--omni-danger-stop); }
html[data-theme="goossens"] .mw-table tbody tr > :first-child { background-image:linear-gradient(var(--ui-row-edge),var(--ui-row-edge)); background-size:4px 100%; background-repeat:no-repeat; }
html[data-theme="goossens"] .mw-table tbody tr > * { transition:background-color var(--omni-motion-fast) var(--omni-ease-out),background-size var(--omni-motion-fast) var(--omni-ease-out); }
html[data-theme="goossens"] .mw-table tbody tr:hover > * { background-color:color-mix(in srgb,var(--ui-row-edge) 10%,var(--omni-surface)); }
html[data-theme="goossens"] .mw-table tbody tr:hover > :first-child { background-size:6px 100%; }

/* Table cells (p09 / p10; design v9, Owner 2026-10-22 "delta pod hodnotou", every
   theme and every workspace table or list-row cell): the delta is its OWN second
   line under the value — 11 px, compact, aligned with the cell (right, centre or
   left); a light and its word stay on one line, side by side, never the dot alone. */
:root :is(.mw-table td,.mw-cell):has(> .mw-trend) { white-space:nowrap; }
:root :is(.mw-table td,.mw-cell) > .mw-trend { display:flex; box-sizing:border-box; width:max-content; height:auto; min-height:0; align-items:center; margin:2px 0 0; padding:0 4px; font-size:11px; font-weight:700; letter-spacing:0; line-height:16px; box-shadow:none; }
:root :is(.mw-table td.mw-cell--end,.mw-cell.mw-cell--end) > .mw-trend { margin-left:auto; }
:root :is(.mw-table td.mw-cell--center,.mw-cell.mw-cell--center) > .mw-trend { margin-right:auto; margin-left:auto; }
:root .mw-table td .mw-value:has(> .ui-status-dot) { display:inline-flex; max-width:100%; align-items:flex-start; gap:6px; white-space:normal; text-align:start; word-break:normal; overflow-wrap:normal; hyphens:none; }
:root .mw-table td .mw-value > .ui-status-dot { flex:none; margin:.38em 0 0; }
:root .mw-table td :is(.mw-value-status,.ui-status-light) { flex-wrap:nowrap; }
:root .mw-table td:has(.ui-status-dot) { white-space:normal; }

/* Quiet Detail buttons in tables (p11): an outline, filled in ink on the row under the pointer or on focus. */
html[data-theme="goossens"] .mw-table .mw-detail { color:var(--omni-ink); background:var(--omni-surface); border:1px solid var(--omni-line-strong); box-shadow:none; }
html[data-theme="goossens"] .mw-table .mw-detail::before { opacity:0; }
html[data-theme="goossens"] .mw-table .mw-detail .mw-icon { color:currentColor; stroke:currentColor; }
html[data-theme="goossens"] :is(.mw-table tr:hover .mw-detail,.mw-table .mw-detail:hover,.mw-table .mw-detail:focus-visible) { color:var(--omni-on-primary); background:var(--omni-ink); border-color:var(--omni-ink); }

/* Pills (p12): a state is a filled pill in its stop, metadata an outline pill; the accent pill has its stop block on the left. */
html[data-theme="goossens"] .ui-badge--neutral:not(:has(> .ui-status-dot)) { color:var(--omni-ink); background:transparent; border:1px solid var(--omni-line-strong); }
html[data-theme="goossens"] .ui-badge--neutral:not(:has(> .ui-status-dot)) .mw-icon { color:var(--omni-muted); }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status]) { color:var(--omni-ink); border:1px solid transparent; background:var(--omni-surface-sunken); }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status="good"]) { color:var(--omni-on-success); background:var(--omni-success-stop); }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status="watch"]) { color:var(--omni-on-warning); background:var(--omni-warning-stop); }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status="bad"]) { color:var(--omni-on-danger); background:var(--omni-danger-stop); }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status="running"]) { color:var(--omni-ink); background:var(--omni-running-stop); }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status]) > .ui-status-dot { display:none; }
html[data-theme="goossens"] .ui-badge--neutral:has(> .ui-status-dot[data-status]) .mw-icon { color:currentColor; }
html[data-theme="goossens"] .ui-badge--accent[data-accent] { position:relative; padding-left:14px; color:var(--omni-ink); background:var(--omni-surface); border:1px solid var(--omni-ink); }
html[data-theme="goossens"] .ui-badge--accent[data-accent]::before { content:""; position:absolute; top:-1px; bottom:-1px; left:-1px; width:6px; background:var(--ui-accent-stop,var(--omni-deco-indigo)); }
html[data-theme="goossens"] .ui-badge--accent[data-accent="magenta"] { --ui-accent-stop:var(--omni-deco-magenta); }
html[data-theme="goossens"] .ui-badge--accent[data-accent="aqua"] { --ui-accent-stop:var(--omni-deco-aqua); }
html[data-theme="goossens"] .ui-badge--accent[data-accent="sky"] { --ui-accent-stop:var(--omni-deco-sky); }
html[data-theme="goossens"] .ui-badge--accent[data-accent="yellow"] { --ui-accent-stop:var(--omni-deco-yellow); }
html[data-theme="goossens"] .ui-badge--accent[data-accent] .mw-icon { color:var(--omni-ink); }

/* Page header with a logo (p15): the logo after an ink rule, one fact line. */
html[data-theme="goossens"] .ui-page-header__title { gap:var(--omni-space-2) var(--omni-space-4); }
html[data-theme="goossens"] .ui-page-header__logo { box-sizing:content-box; height:36px; max-width:10rem; padding:6px 12px 6px 16px; border-left:2px solid var(--omni-ink); opacity:1; }
html[data-theme="goossens"] .ui-page-header__copy:has(> .ui-page-header__badges) { display:grid; grid-template-columns:auto 1fr; column-gap:var(--omni-gap-inline); align-items:center; }
html[data-theme="goossens"] .ui-page-header__copy > :not(.ui-page-header__badges):not(.ui-page-header__badges + p) { grid-column:1 / -1; }
html[data-theme="goossens"] .ui-page-header__badges { margin:var(--omni-space-2) 0; }
html[data-theme="goossens"] .ui-page-header__badges + p { margin:0; padding-left:var(--omni-gap-inline); border-left:1px solid var(--omni-line-strong); color:var(--omni-ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* Tooltips and hover cards (p16): an ink bubble, white text, the colour line on top, a hard indigo shadow. */
html[data-theme="goossens"] :is(.ui-tip,.ui-hovercard) { color:var(--omni-on-primary); background:var(--omni-ink); border-color:var(--omni-ink); font-size:.76rem; font-weight:600; line-height:1.5; padding:.65rem .8rem .6rem; box-shadow:4px 4px 0 0 var(--omni-deco-indigo); }
html[data-theme="goossens"] :is(.ui-tip,.ui-hovercard)::before { content:""; position:absolute; top:0; right:0; left:0; height:3px; background:var(--omni-signal-line); }
html[data-theme="goossens"] .ui-tip::after { border-color:var(--omni-ink); background:var(--omni-ink); }
html[data-theme="goossens"] :is(.ui-tip,.ui-hovercard) :is(a,strong,b) { color:var(--omni-on-primary); }
html[data-theme="goossens"] .ui-hovercard__title { color:var(--omni-on-primary); }
html[data-theme="goossens"] .ui-hovercard__close { color:var(--omni-on-primary); }

/* Cube loader (p17): five cubes in the stops hop in a wave with squash and stretch and a soft motion trail
   (deck-ui.js puts the five <i> into an empty .ui-spinner); the skeleton has sharp bars with a sweep and a cube avatar. */
html[data-theme="goossens"] .ui-spinner { display:inline-flex; width:auto; height:22px; align-items:flex-end; gap:4px; padding-top:10px; border:0; border-radius:0; background:none; animation:none; }
html[data-theme="goossens"] .ui-spinner > i { position:relative; display:block; width:9px; height:9px; transform-origin:50% 60%; background:var(--omni-deco-magenta); animation:ui-cube-hop calc(var(--omni-loop-duration) * .5) var(--omni-ease-in-out) infinite; }
html[data-theme="goossens"] .ui-spinner > i::after { content:""; position:absolute; inset:0; background:inherit; opacity:.35; filter:blur(2px); animation:ui-cube-trail calc(var(--omni-loop-duration) * .5) var(--omni-ease-in-out) infinite; animation-delay:inherit; }
html[data-theme="goossens"] .ui-spinner > i:nth-child(2) { background:var(--omni-deco-indigo); animation-delay:.08s; }
html[data-theme="goossens"] .ui-spinner > i:nth-child(3) { background:var(--omni-deco-aqua); animation-delay:.16s; }
html[data-theme="goossens"] .ui-spinner > i:nth-child(4) { background:var(--omni-deco-sky); animation-delay:.24s; }
html[data-theme="goossens"] .ui-spinner > i:nth-child(5) { background:var(--omni-deco-yellow); animation-delay:.32s; }
@keyframes ui-cube-hop {
  0% { transform:translateY(0) rotate(0deg) scale(1,1); filter:blur(0); }
  12% { transform:translateY(0) rotate(0deg) scale(1.25,.7); filter:blur(0); }
  38% { transform:translateY(-12px) rotate(45deg) scale(.85,1.2); filter:blur(.7px); }
  52% { transform:translateY(-14px) rotate(90deg) scale(1,1); filter:blur(0); }
  72% { transform:translateY(0) rotate(90deg) scale(1.2,.78); filter:blur(0); }
  84% { transform:translateY(0) rotate(90deg) scale(.95,1.05); filter:blur(0); }
  100% { transform:translateY(0) rotate(90deg) scale(1,1); filter:blur(0); }
}
@keyframes ui-cube-trail { 0%,30%,60%,100% { transform:translateY(0); opacity:0; } 40% { transform:translateY(5px); opacity:.45; } 52% { transform:translateY(6px); opacity:.25; } }
html[data-theme="goossens"] .ui-skeleton > span { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:10px; border-radius:0; background:var(--omni-surface-sunken); }
html[data-theme="goossens"] .ui-skeleton > span > i { width:auto; height:auto; background:var(--omni-line-strong); animation:ui-cube-blink calc(var(--omni-loop-duration) * .75) steps(1) infinite; }
html[data-theme="goossens"] .ui-skeleton > span > i:nth-child(1) { background:var(--omni-deco-magenta); }
html[data-theme="goossens"] .ui-skeleton > span > i:nth-child(2) { animation-delay:.3s; }
html[data-theme="goossens"] .ui-skeleton > span > i:nth-child(3) { animation-delay:.9s; }
html[data-theme="goossens"] .ui-skeleton > span > i:nth-child(4) { background:var(--omni-deco-aqua); animation-delay:.6s; }
html[data-theme="goossens"] .ui-skeleton > div > i { position:relative; overflow:hidden; height:10px; border-radius:0; background:var(--omni-surface-sunken); animation:none; }
html[data-theme="goossens"] .ui-skeleton > div > i::after { content:""; position:absolute; inset:0 auto 0 0; width:30%; background:var(--omni-line); animation:ui-skeleton-sweep var(--omni-loop-duration) var(--omni-ease-in-out) infinite; }
html[data-theme="goossens"] .ui-skeleton > div > i:first-child { width:64%; height:14px; background:var(--omni-line); }
@keyframes ui-cube-blink { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes ui-skeleton-sweep { 0% { transform:translateX(-100%); } 100% { transform:translateX(340%); } }
html:is([data-effects="0"],[data-motion="off"],[data-motion="reduced"]) :is(.ui-spinner > i,.ui-skeleton i),html:is([data-effects="0"],[data-motion="off"],[data-motion="reduced"]) .ui-spinner > i::after,html:is([data-effects="0"],[data-motion="off"],[data-motion="reduced"]) .ui-skeleton i::after { animation:none; filter:none; }

/* Date range (p19): bigger dates; the date box on the left AND the lit preset are ink blocks with the colour line at the bottom;
   the range in the calendar a soft indigo, its ends ink. */
html[data-theme="goossens"] .ui-daterange__dates b { font-size:1.05rem; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
html[data-theme="goossens"] .ui-daterange__date,html[data-theme="goossens"] a.ui-daterange__date:hover,html[data-theme="goossens"] .ui-daterange.is-open .ui-daterange__date { color:var(--omni-on-primary); border-color:var(--omni-ink); background:var(--omni-signal-line) left bottom/100% 4px no-repeat,var(--omni-ink); }
html[data-theme="goossens"] .ui-daterange__date :is(.ui-daterange__icon,.ui-daterange__chevron) { color:var(--omni-on-primary); }
html[data-theme="goossens"] .ui-daterange__date .ui-daterange__dates small { color:color-mix(in srgb,var(--omni-on-primary) 72%,var(--omni-ink)); }
html[data-theme="goossens"] .ui-daterange__preset:not(.is-lit) .ui-daterange__light { display:none; }
html[data-theme="goossens"] .ui-daterange__preset:not(.is-lit)::after { content:""; position:absolute; right:12px; bottom:8px; left:12px; height:2px; background:var(--omni-ink); transform:scaleX(0); transform-origin:left center; transition:transform var(--omni-motion-base) var(--omni-ease-out); }
html[data-theme="goossens"] .ui-daterange__preset:not(.is-lit):hover::after { transform:scaleX(var(--omni-underline-sweep,1)); }
html[data-theme="goossens"] .ui-daterange__preset.is-lit::after { content:""; position:absolute; right:0; bottom:0; left:0; height:4px; background:var(--omni-signal-line); }
html[data-theme="goossens"] .ui-daterange__preset.is-lit .ui-daterange__light { box-shadow:0 0 8px 1px var(--omni-success-stop); }
html[data-theme="goossens"] .ui-calendar__day.is-in-range:not(.is-start):not(.is-end) { color:var(--omni-ink); background:color-mix(in srgb,var(--omni-info-stop) 12%,var(--omni-surface)); }
html[data-theme="goossens"] .ui-calendar__day:is(.is-start,.is-end) { color:var(--omni-on-primary); background:var(--omni-ink); box-shadow:inset 0 -4px 0 0 var(--omni-info-stop); font-weight:800; }
html[data-theme="goossens"] .ui-calendar__day:not(.is-outside):not(:disabled):hover { outline:2px solid var(--omni-ink); outline-offset:-2px; }

/* Empty states (p21): a sharp block illustration, the icon on a white plate with a hard shadow, a bigger title, a solid frame. */
html[data-theme="goossens"] .mw-empty-state { position:relative; gap:var(--omni-space-2); padding:var(--omni-space-6) var(--omni-space-5); border:1px solid var(--omni-line); border-radius:0; color:var(--omni-muted); background:var(--omni-surface); }
html[data-theme="goossens"] .mw-empty-state::before { content:""; display:block; width:112px; height:72px; margin-bottom:var(--omni-space-4); background:linear-gradient(var(--omni-ink),var(--omni-ink)) 0 52px/112px 2px no-repeat,linear-gradient(var(--omni-deco-magenta),var(--omni-deco-magenta)) 8px 20px/28px 32px no-repeat,linear-gradient(var(--omni-deco-indigo),var(--omni-deco-indigo)) 40px 8px/20px 44px no-repeat,linear-gradient(var(--omni-deco-aqua),var(--omni-deco-aqua)) 64px 32px/18px 20px no-repeat,linear-gradient(var(--omni-deco-sky),var(--omni-deco-sky)) 86px 40px/12px 12px no-repeat,linear-gradient(var(--omni-deco-yellow),var(--omni-deco-yellow)) 100px 0/12px 12px no-repeat; }
html[data-theme="goossens"] .mw-empty-state > .mw-icon { box-sizing:border-box; position:absolute; top:calc(var(--omni-space-6) + 30px); left:calc(50% - 24px); width:48px; height:48px; margin:0; padding:10px; color:var(--omni-ink); background:var(--omni-surface); border:2px solid var(--omni-ink); box-shadow:4px 4px 0 0 var(--omni-deco-yellow); stroke-width:2; overflow:visible; }
html[data-theme="goossens"] .mw-empty-state > strong { color:var(--omni-ink); font-size:1.1rem; font-weight:800; letter-spacing:-.01em; }
html[data-theme="goossens"] .mw-empty-state > p { max-width:52ch; margin:0; color:var(--omni-muted); font-size:.88rem; line-height:var(--omni-leading); }
html[data-theme="goossens"] .mw-empty-state > .ui-button { margin-top:var(--omni-space-3); }

/* Step facts (p22): the label (Kedy / Ako / Prečo) in its own column, no grey boxes, no " · ", a hairline between rows. */
html[data-theme="goossens"] .mw-row__main > small:has(> .ui-badge--neutral:first-child) { display:flex; align-items:baseline; padding:6px 0; border-top:1px solid var(--omni-line); font-size:0; text-align:left; }
html[data-theme="goossens"] .mw-row__main > small:has(> .ui-badge--neutral:first-child) > * { font-size:.84rem; }
html[data-theme="goossens"] .mw-row__main > small:has(> .ui-badge--neutral:first-child) > .ui-badge--neutral:first-child { flex:0 0 8.25rem; justify-content:flex-start; height:auto; margin-right:var(--omni-space-2); padding:0; border:0; color:var(--omni-muted); font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:none; }
html[data-theme="goossens"] .mw-row__main > small:has(> .ui-badge--neutral:first-child) > span:not(.ui-badge):not(.ui-tip) { flex:1 1 auto; min-width:0; color:var(--omni-ink); line-height:1.5; }
html[data-theme="goossens"] .mw-row__main > small:has(> .ui-badge--neutral:first-child) + small:has(> .ui-badge--neutral:first-child) { margin-top:0; }
html[data-theme="goossens"] .mw-row__main > small:has(> .ui-badge--neutral:first-child) > .ui-info { flex:none; align-self:center; margin-left:var(--omni-gap-inline); }

/* Timeline (p23): phases on an ink rail; the current phase has a lit sky node and a coloured stretch, later phases are empty squares. */
html[data-theme="goossens"] [data-mw-id="timeline"] > .mw-items > .mw-row { position:relative; padding-left:64px; }
html[data-theme="goossens"] [data-mw-id="timeline"] > .mw-items > .mw-row::before { content:""; position:absolute; top:0; bottom:0; left:31px; width:2px; background:var(--omni-line-strong); }
html[data-theme="goossens"] [data-mw-id="timeline"] > .mw-items > .mw-row:first-child::before { top:30px; }
html[data-theme="goossens"] [data-mw-id="timeline"] > .mw-items > .mw-row:last-child::before { bottom:auto; height:30px; }
html[data-theme="goossens"] [data-mw-id="timeline"] > .mw-items > .mw-row[data-status="running"]::before { background:linear-gradient(var(--omni-line-strong) 0 0) top/2px 30px no-repeat,linear-gradient(var(--omni-running-stop),var(--omni-running-stop)); }
html[data-theme="goossens"] [data-mw-id="timeline"] .mw-row__light { position:absolute; top:22px; left:24px; z-index:1; display:grid; width:16px; height:16px; place-items:center; margin:0; }
html[data-theme="goossens"] [data-mw-id="timeline"] .mw-row__light .ui-status-dot { width:16px; height:16px; flex-basis:16px; border:2px solid var(--omni-ink); background:var(--omni-surface); box-shadow:none; }
html[data-theme="goossens"] [data-mw-id="timeline"] .mw-row__light .ui-status-dot[data-status="running"] { border-color:var(--omni-ink); background:var(--omni-running-stop); box-shadow:0 0 0 3px var(--omni-surface),0 0 14px 2px var(--omni-running-stop); }
html[data-theme="goossens"] [data-mw-id="timeline"] .mw-row__light .ui-status-dot[data-status="good"] { background:var(--omni-ink); }
html[data-theme="goossens"] [data-mw-id="timeline"] > .mw-items > .mw-row[data-status="running"] .mw-row__title { font-size:1.08rem; }

/* Filter chips (p24): the count in its own block; the current chip is ink with an aqua count; a filter with 0 is dashed and muted (marked by deck-ui.js). */
html[data-theme="goossens"] .mw-tabs { gap:var(--omni-gap-inline); }
html[data-theme="goossens"] .mw-tabs a { display:inline-flex; min-height:38px; align-items:center; gap:8px; padding:0 0 0 10px; border:1px solid var(--omni-line-strong); line-height:1; }
html[data-theme="goossens"] .mw-tabs a > .mw-icon { margin:0; }
html[data-theme="goossens"] .mw-tabs a > .mw-muted { display:inline-grid; align-self:stretch; min-width:34px; place-items:center; margin-left:4px; padding:0 8px; color:var(--omni-ink); font-weight:800; font-variant-numeric:tabular-nums; background:var(--omni-surface-sunken); border-left:1px solid var(--omni-line-strong); }
html[data-theme="goossens"] .mw-tabs a[aria-current] { color:var(--omni-on-primary); background:var(--omni-ink); border-color:var(--omni-ink); }
html[data-theme="goossens"] .mw-tabs a[aria-current] > .mw-muted { color:var(--omni-ink); background:var(--omni-deco-aqua); border-left-color:var(--omni-ink); }
html[data-theme="goossens"] .mw-tabs a[data-chip-zero] { color:var(--omni-muted); border-style:dashed; }
html[data-theme="goossens"] .mw-tabs a[data-chip-zero] > .mw-muted { color:var(--omni-muted); background:transparent; }

@media (prefers-reduced-motion: reduce) {
  .ui-status-dot::before { content:none; animation:none; }
  :is(.mw-stat,.mw-row,.ui-card):hover { transform:none; }
  .ui-spinner > i,.ui-spinner > i::after,.ui-skeleton i,.ui-skeleton i::after { animation:none; filter:none; }
}

/* Design v9 (Owner 2026-10-22; ABI/DESIGN-SYSTEM.md "Typography scale" and
   ABI/MODULE-WORKSPACE-VIEWS.md §2f) -- tables on a fixed layout, labelled
   sections, the chart tooltip and one calm type scale. Tokens only. */
/* Tables: a fixed layout with column widths from the presenter (the name
   column takes the rest, numbers compact); cells and the Detail button sit on
   the row's middle; a row name is ink like the state word (its icon stays in
   the accent); an "i" marker is centred on the text it explains. */
.mw-table.mw-table--fixed { table-layout:fixed; width:100%; min-width:44rem; }
.mw-table col.mw-col--xs { width:4rem; }
.mw-table col.mw-col--s { width:5.5rem; }
.mw-table col.mw-col--m { width:8.75rem; }
.mw-table col.mw-col--l { width:12rem; }
.mw-table col.mw-col--detail { width:6.5rem; }
.mw-table--fixed :is(td,th) { padding-right:.5rem; padding-left:.5rem; }
.mw-table--fixed :is(td,th):first-child { padding-left:var(--omni-pad-row); }
.mw-table--fixed td { overflow-wrap:anywhere; }
.mw-table--fixed td.mw-format--mono { overflow:hidden; text-overflow:ellipsis; }
.mw-table--fixed th > :is(span,.mw-sort) { max-width:100%; }
.mw-table--fixed td.mw-cell--clamp > :is(.mw-value,.mw-link) { max-width:100%; }
/* Table widths v10 (Owner 2026-10-22; ABI/MODULE-WORKSPACE-VIEWS.md §2g): the
   default table lays out automatically on the presenter's column kinds --
   numbers, dates, states and codes shrink to their content and never wrap,
   the name keeps 16-36ch on at most two lines (the full text in its title),
   other text 12-44ch shares the rest; a narrow screen scrolls inside the
   table wrapper only. */
.mw-table:not(.mw-table--fixed) { table-layout:auto; width:100%; }
.mw-table:not(.mw-table--fixed) :is(th,td):is(.mw-kind--number,.mw-kind--date,.mw-kind--status,.mw-kind--mono) { width:1%; white-space:nowrap; }
:root .mw-table:not(.mw-table--fixed) td.mw-kind--status,:root .mw-table:not(.mw-table--fixed) td.mw-kind--status .mw-value:has(> .ui-status-dot) { white-space:nowrap; }
.mw-table:not(.mw-table--fixed) th:is(.mw-kind--number,.mw-kind--date,.mw-kind--status,.mw-kind--mono) > :is(span,.mw-sort) { max-width:none; }
.mw-table:not(.mw-table--fixed) :is(th,td).mw-kind--name { min-width:16ch; }
.mw-table:not(.mw-table--fixed) :is(th,td).mw-kind--text { min-width:12ch; }
.mw-table:not(.mw-table--fixed) td.mw-kind--name.mw-cell--clamp > :is(.mw-value,.mw-link) { max-width:36ch; }
.mw-table:not(.mw-table--fixed) td.mw-kind--text.mw-cell--clamp > :is(.mw-value,.mw-link) { max-width:44ch; }
:root .mw-table td,:root .mw-table th { vertical-align:middle; }
.mw-table td.mw-table__detail .ui-button { display:inline-flex; align-items:center; vertical-align:middle; white-space:nowrap; }
:root .mw-table td .mw-link,:root .mw-table td .mw-link:visited { color:var(--omni-ink); }
:root .mw-table td .mw-link .mw-icon { color:var(--omni-secondary); }
:root .mw-table td .mw-link:is(:hover,:focus-visible) { color:var(--omni-ink-strong); text-decoration:underline; text-decoration-color:var(--omni-secondary); text-underline-offset:3px; }
:root .mw-row__title,:root a.mw-row__title:hover strong { color:var(--omni-ink-strong); }
:root .mw-row__title .mw-icon { color:var(--omni-secondary); }
:root :is(.mw-table td,.mw-cell,.mw-row__main,.mw-text,.mw-fact dd,.mw-metrics dd) > .ui-info { vertical-align:text-bottom; }
:root :is(.mw-table td,.mw-cell) > .ui-info { margin-left:6px; }
:root :is(h2,h3,h4,.ui-chart__head strong,.mw-alert > strong,.mw-text > strong):has(> .ui-info) { display:inline-flex; flex-wrap:wrap; align-items:center; }
:root :is(h2,h3,h4) > .ui-info { vertical-align:middle; }

/* Text block alignment and size (design v9): a right-aligned or centred line; `size: 's'` is a small muted footnote. */
.mw-text.mw-text--end { text-align:right; }
.mw-text.mw-text--center { text-align:center; }
:root .mw-text.mw-text--s { color:var(--omni-muted); font-size:12px; font-weight:400; line-height:1.45; }

/* Labelled sections (row `sections`): a coloured label heading with a small
   cube in its tone above its text, indented 16 px; 12 px between sections.
   The `aside` is a small note on the right ("What we expect"). */
.mw-sections { display:grid; gap:12px; margin:12px 0 0; }
.mw-labelled { --ui-labelled:var(--omni-deco-indigo); min-width:0; margin:0; }
.mw-labelled[data-tone="magenta"] { --ui-labelled:var(--omni-deco-magenta); }
.mw-labelled[data-tone="aqua"] { --ui-labelled:var(--omni-deco-aqua); }
.mw-labelled[data-tone="sky"] { --ui-labelled:var(--omni-deco-sky); }
.mw-labelled[data-tone="yellow"] { --ui-labelled:var(--omni-deco-yellow); }
.mw-labelled__label { display:flex; align-items:center; gap:8px; margin:0 0 4px; color:color-mix(in oklab,var(--ui-labelled) 62%,var(--omni-ink)); font-size:14px; font-weight:700; letter-spacing:0; line-height:1.35; text-transform:none; }
.mw-labelled:is([data-tone="indigo"],[data-tone="magenta"]) .mw-labelled__label { color:var(--ui-labelled); }
.mw-labelled__label .mw-icon { margin:0; color:currentColor; }
.mw-labelled__cube { display:inline-block; width:8px; height:8px; flex:none; background:var(--ui-labelled); }
.mw-labelled__text { margin:0; padding-left:16px; color:var(--omni-ink); font-size:14px; font-weight:400; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere; }
.mw-aside { flex:0 1 15rem; min-width:0; max-width:18rem; margin:0; padding:0 0 0 var(--omni-space-4); border-left:1px solid var(--omni-line); }
.mw-aside__label { display:block; margin:0 0 4px; color:var(--omni-muted); font-size:11px; font-weight:600; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; }
.mw-aside__text { margin:0; color:var(--omni-ink); font-size:13px; font-weight:400; line-height:1.5; }
@media (max-width: 767px) { .mw-aside { flex-basis:100%; max-width:none; padding:var(--omni-space-3) 0 0; border-top:1px solid var(--omni-line); border-left:0; } }
html[data-theme="goossens"][data-status="mono"] .mw-labelled { --ui-labelled:var(--omni-ink); }

/* Chart hover tooltip (deck-charts.js, both engines): the ink bubble — the
   date / label, one row per series (its colour, name, value), the series'
   explanation under it and the chart's sentence at the bottom. */
.deck-chart-tooltip { color:var(--omni-on-primary); font-family:var(--omni-font-body); }
.deck-chart-tooltip__title { margin:2px 0 6px; font-size:12px; font-weight:700; letter-spacing:.01em; }
.deck-chart-tooltip__row { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:400; line-height:1.5; }
.deck-chart-tooltip__swatch { display:inline-block; width:9px; height:9px; flex:none; background:var(--omni-on-primary); }
.deck-chart-tooltip__name { flex:1 1 auto; min-width:0; }
.deck-chart-tooltip__value { margin-left:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.deck-chart-tooltip__note { margin:0 0 4px 17px; font-size:11px; font-weight:300; line-height:1.4; opacity:.86; }
.deck-chart-tooltip__explain { max-width:280px; margin:6px 0 0; padding-top:6px; border-top:1px solid color-mix(in srgb,var(--omni-on-primary) 25%,transparent); font-size:11px; font-weight:300; line-height:1.45; white-space:normal; opacity:.92; }

/* ===== Round 2 (Owner 2026-10-22, Feedback Hub fh-4b3010cb34c4dfa3): mini charts + readability
   rules for data-dense pages; Deck-wide under goossens. Behaviour for q01 / q06 / q10 in deck-ui.js. ===== */

/* round-2 q01: tile sparkline — a thin 1.5 px line in the tile's stop across the full tile width,
   a soft fading tint of the stop below it, the last point a small stop square with an ink edge. */
html[data-theme="goossens"] .mw-stats .mw-stat.has-spark { position:relative; padding-bottom:calc(var(--omni-pad-card) + 40px); }
html[data-theme="goossens"] .mw-stat__spark { position:absolute; right:0; bottom:0; left:0; display:block; width:100%; height:40px; overflow:visible; pointer-events:none; }
html[data-theme="goossens"] .mw-stat__spark-line { fill:none; stroke:color-mix(in srgb,var(--ui-stop) 82%,var(--omni-ink)); stroke-width:1.5; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }
html[data-theme="goossens"] .mw-stat__spark-fade-top { stop-color:var(--ui-stop); stop-opacity:.28; }
html[data-theme="goossens"] .mw-stat__spark-fade-bottom { stop-color:var(--ui-stop); stop-opacity:0; }
html[data-theme="goossens"] .mw-stat__spark-end { position:absolute; right:1px; width:7px; height:7px; margin-bottom:-3px; background:var(--ui-stop); outline:1px solid var(--omni-ink); pointer-events:none; }

/* round-2 q05: tile labels break between words only (never "AUTOMATIO NS"); the head row shares one
   height across a row of tiles (subgrid), so every value starts on the same line. */
html[data-theme="goossens"] .mw-stats .mw-stat { display:grid; grid-template-columns:minmax(0,1fr); grid-row:span 3; grid-template-rows:subgrid; align-content:start; row-gap:8px; }
html[data-theme="goossens"] .mw-stats .mw-stat__head { min-height:0; align-items:start; }
html[data-theme="goossens"] .mw-stats .mw-stat__label { padding-top:1px; font-size:11px; letter-spacing:.03em; line-height:1.5; }
html[data-theme="goossens"] .mw-stats .mw-stat__label > span:not(.ui-status-dot):not(.ui-sr-only) { overflow-wrap:normal; word-break:normal; hyphens:none; }
html[data-theme="goossens"] .mw-stats .mw-stat__icon { width:28px; height:28px; }
html[data-theme="goossens"] .mw-stats .mw-stat__value { margin-top:4px; align-self:start; }

/* round-2 q06: quiet units — a trailing %, pts or currency after a number is smaller and muted
   (deck-ui.js wraps it as .ui-num > .ui-unit); in tables and facts only a touch smaller. */
html[data-theme="goossens"] .ui-num { white-space:nowrap; }
html[data-theme="goossens"] .ui-unit { margin-left:.08em; color:var(--omni-muted); font-size:.62em; font-weight:600; letter-spacing:0; }
html[data-theme="goossens"] :is(.mw-table,.mw-fact dd,.mw-metrics dd) .ui-unit { font-size:.82em; font-weight:var(--ui-weight-body); }
html[data-theme="goossens"] .mw-trend .ui-unit { margin:0; color:inherit; font-size:inherit; font-weight:var(--ui-weight-body); }

/* round-2 q07: a long table (12+ rows) keeps its header row in view while scrolling (from 1024 px;
   below that the table scrolls sideways inside its wrap as before). */
@media (min-width: 1024px) {
  html[data-theme="goossens"] .ui-table-wrap:has(> .mw-table tbody tr:nth-child(12)) { overflow:clip; overflow-clip-margin:0; }
  html[data-theme="goossens"] .mw-table:has(tbody tr:nth-child(12)) thead th { position:sticky; z-index:3; top:0; background:var(--omni-surface); box-shadow:inset 0 -2px 0 var(--omni-ink); }
}

/* round-2 q10: a number cell that is 0, 0 %, 0.0 % or "—" recedes (deck-ui.js marks .is-zero). */
html[data-theme="goossens"] .mw-table td.is-zero > .mw-value,html[data-theme="goossens"] .mw-table .mw-note.is-zero { color:color-mix(in srgb,var(--omni-muted) 70%,var(--omni-surface)); font-weight:var(--ui-weight-thin); }

/* round-2 q12: a section / table / chart subtitle sits under its title, left, aligned with the title
   text, a shade darker, at most 72 characters a line. */
html[data-theme="goossens"] .mw-list__head { display:block; }
html[data-theme="goossens"] .mw-list__head > p { max-width:72ch; margin:6px 0 0; color:color-mix(in srgb,var(--omni-muted) 60%,var(--omni-ink)); font-size:13px; line-height:1.5; text-align:start; }
html[data-theme="goossens"] .mw-list__head:has(h3[data-section-no]) > p { padding-left:calc(28px + 10px); }
html[data-theme="goossens"] .ui-chart__head { flex-direction:column; align-items:flex-start; gap:6px; }
html[data-theme="goossens"] .ui-chart__head > .mw-muted { max-width:72ch; color:color-mix(in srgb,var(--omni-muted) 60%,var(--omni-ink)); font-size:13px; line-height:1.5; text-align:start; }
html[data-theme="goossens"] .ui-chart__head:has(strong[data-section-no]) > .mw-muted { padding-left:calc(28px + 10px); }

/* round-2 q14: a long technical ID (mono cell) shows a muted 10-character stub; the full value stays
   in the cell for copy and sort. */
html[data-theme="goossens"] .mw-table td.mw-format--mono .mw-value { display:block; max-width:10ch; overflow:hidden; color:var(--omni-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }

/* round-2 q15: on entity / proposal cards the pills (priority, effort) and a plain fact ("Steps: 4")
   run on one line, the fact as an outline pill. */
html[data-theme="goossens"] .mw-list--entity .mw-row__main > .mw-meta-lines:has(.ui-badge) { display:flex; flex-flow:row wrap; align-items:center; gap:8px; margin-top:10px; }
html[data-theme="goossens"] .mw-list--entity .mw-meta-lines:has(.ui-badge) > li { margin:0; }
html[data-theme="goossens"] .mw-list--entity .mw-meta-lines:has(.ui-badge) > li > span:only-child:not(.ui-badge) { display:inline-flex; height:var(--omni-pill-height,24px); align-items:center; padding:0 8px; color:var(--omni-ink); font-size:.7rem; font-weight:700; border:1px solid var(--omni-line-strong); }

/* round-2 q17: the period footnote ("* Changes against …") sits right under its tiles, left. */
html[data-theme="goossens"] .mw-stats + .mw-text--end.mw-text--s { margin-top:calc(-1 * var(--omni-gap-block) + 10px); color:color-mix(in srgb,var(--omni-muted) 60%,var(--omni-ink)); font-size:12px; text-align:start; }

/* html-preview block (MODULE-WORKSPACE-VIEWS §2g): a sandboxed iframe; a detail dialog holding one is wide (≥ 900 px on desktop). */
.mw-html-preview { margin:0 0 var(--omni-space-4); display:grid; gap:var(--omni-space-2); }
.mw-html-preview__title { display:flex; align-items:center; gap:.4rem; color:var(--omni-ink-strong); font-weight:var(--ui-weight-section); }
.mw-html-preview__frame { display:block; width:100%; border:1px solid var(--omni-line); border-radius:0; background:white; }
.mw-html-preview--s .mw-html-preview__frame { height:22rem; }
.mw-html-preview--m .mw-html-preview__frame { height:40rem; }
.mw-html-preview--l .mw-html-preview__frame { height:min(56rem, calc(100vh - 10rem)); }
.mw-html-preview__caption { margin:0; }
@media (min-width: 960px) { .mw-dialog:has(.mw-html-preview) { width:min(60rem, calc(100vw - 2rem)); } }

/* Row lead (Owner 2026-10-22): one plain sentence right under a row title — what it is and what it is for. */
.mw-row__lead { margin: 6px 0 var(--omni-gap-item, 12px); font-size: 0.95rem; line-height: 1.5; color: var(--omni-ink); max-width: 72ch; }

/* Typography scale (goossens): page title 800 · section titles 700 · labels
   600 (11 px uppercase, .08em, muted) · values 700 · body 400 · meta 300/400
   muted. A status line is regular; only its status word is semibold. Bold is
   for titles and values, never for running text. */
:root[data-theme="goossens"] { --ui-weight-title:800; --ui-weight-section:700; --ui-weight-label:600; --ui-weight-value:700; --ui-weight-body:400; --ui-weight-meta:400; --ui-weight-thin:300; --ui-weight-status:600; }
:root[data-theme="goossens"] .ui-page-header h1 { font-weight:var(--ui-weight-title); }
:root[data-theme="goossens"] :is(.mw-section__head h2,.mw-source__head h2,.mw-list__head h3,.mw-kv h3,.ui-chart__head strong,.mw-collapse__summary,.ui-card-heading h2,.mw-alert > strong) { font-weight:var(--ui-weight-section); }
:root[data-theme="goossens"] :is(.mw-list__head h3,.ui-chart__head strong)[data-section-no] { font-weight:var(--ui-weight-section); }
:root[data-theme="goossens"] :is(.mw-stat__label,.mw-metrics dt,.mw-fact dt,.mw-row--header,.ui-table th) { color:var(--omni-muted); font-size:11px; font-weight:var(--ui-weight-label); letter-spacing:.08em; text-transform:uppercase; }
:root[data-theme="goossens"] :is(.mw-stat__value,.mw-fact dd,.mw-metrics dd,.mw-strong,.mw-side strong) { font-weight:var(--ui-weight-value); }
:root[data-theme="goossens"] :is(.mw-table td,.mw-text,.mw-alert p,.mw-row__main > small,.mw-cell) { font-weight:var(--ui-weight-body); }
:root[data-theme="goossens"] .mw-cell :is(.mw-strong,strong) { font-weight:var(--ui-weight-value); }
:root[data-theme="goossens"] :is(.mw-row__title strong,strong.mw-row__title) { font-weight:600; }
:root[data-theme="goossens"] .mw-list--entity :is(.mw-row__title strong,strong.mw-row__title) { font-weight:var(--ui-weight-section); }
:root[data-theme="goossens"] .mw-table td .mw-link { font-weight:500; }
:root[data-theme="goossens"] :is(.mw-muted,.mw-note,.mw-list__head p,.mw-section__head p,.mw-collapse__subtitle) { font-weight:var(--ui-weight-meta); }
:root[data-theme="goossens"] :is(.mw-list__foot,.mw-alert__hint,.ui-chart__head small) { font-weight:var(--ui-weight-thin); }
:root[data-theme="goossens"] .mw-meta-lines > li { color:var(--omni-ink); font-weight:var(--ui-weight-body); }
:root[data-theme="goossens"] :is(.mw-meta-lines,.mw-row__main > small) .ui-status-light__label { font-weight:var(--ui-weight-status); }
:root[data-theme="goossens"] .mw-table :is(.ui-status-light .ui-status-light__label,td .mw-value:has(> .ui-status-dot)) { color:var(--omni-ink); font-weight:500; }