/* LoopOS Flux — LoopOS UI v2 tokens, components & layouts */

:root {
  --color-background: #ffffff;
  --color-primary: #fcfcfc;
  --color-secondary: #f6f6f6;
  --color-tertiary: #e7e7e7;
  --color-content: #181818;
  --color-content-secondary: #6d6d6d;
  --color-foreground: #454545;
  --color-shimmer-highlight: rgba(255, 255, 255, 0.75);
  --color-success: #0fd877;
  --color-success-fg: #0d6e41;
  --color-danger: #f83446;
  --color-danger-fg: #a01421;
  --color-warning: #ef9a11;
  --color-warning-fg: #8f3f11;
  --color-informative: #068bee;
  --color-informative-fg: #024a8a;
  /* Decorative badge hues (Rails Blocks orange/purple — not semantic status) */
  --color-orange: #e85d2a;
  --color-orange-fg: #9a3412;
  --color-purple: #6f4cff;
  --color-purple-fg: #443092;

  /* Tint strength — theme-aware color-mix intensity for tinted semantic surfaces.
     See tokens-and-theming.md §8.1. */
  --color-tint-bg-strength:            15%;
  --color-tint-bg-strength-subtle:     10%;
  --color-tint-bg-strength-strong:     22%;
  --color-tint-border-strength:        22%;
  --color-tint-border-strength-subtle: 18%;
  --color-tint-border-strength-strong: 28%;
  --color-tint-border-strength-loud:   30%;
  --sidebar-collapsed-width: 56px;
  --sidebar-expanded-width: 240px;
  /* Reading-column cap — opt in via .lui-content-width (content-width.md); fluid pages stay full-bleed. */
  --lui-content-max-width: 1680px;
  --lui-float-bar-inset-bottom: 24px;
  --lui-float-bar-z-index: 50;
  --lui-shadow-floating: 0 1px 4px rgba(33, 37, 41, 0.10);
  --lui-control-height-xs: 24px;
  --lui-control-height-sm: 28px;
  --lui-control-height-md: 32px;
  --lui-control-height-lg: 40px;
  --default-transition-duration: 220ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Flux: UI headings use IBM Plex Sans (skill default reserves Space Grotesk for display-only) */
  --font-heading: var(--font-sans);
}

:root,
:root[data-app="flux"] {
  --color-app: #181818;
  --color-app-fg: #ffffff;
  --color-app-gradient-light: #102026;
  --color-app-gradient-dark: #102026;
  --color-chrome-accent: var(--color-app);
  --color-chrome-accent-fg: var(--color-app-fg);
  --color-chrome-accent-muted: color-mix(in srgb, var(--color-app) 8%, transparent);
  --color-focus-ring: var(--color-app);
}

:root[data-theme="dark"] {
  --color-background: #181818;
  --color-primary: #202020;
  --color-secondary: #242424;
  --color-tertiary: #2e2e2e;
  --color-content: #fcfcfc;
  --color-content-secondary: #888888;
  --color-foreground: #b0b0b0;
  --color-shimmer-highlight: rgba(255, 255, 255, 0.08);
  --color-focus-ring: var(--color-informative);

  /* Semantic -fg rebind — fills stay the same hex; -fg mixes toward white for contrast. */
  --color-success-fg:     color-mix(in srgb, var(--color-success) 72%, white);
  --color-danger-fg:      color-mix(in srgb, var(--color-danger) 72%, white);
  --color-warning-fg:     color-mix(in srgb, var(--color-warning) 72%, white);
  --color-informative-fg: color-mix(in srgb, var(--color-informative) 72%, white);
  --color-orange-fg:      color-mix(in srgb, var(--color-orange) 72%, white);
  --color-purple-fg:      color-mix(in srgb, var(--color-purple) 72%, white);

  /* Tint strength — stronger chroma in dark (light values above). */
  --color-tint-bg-strength:            22%;
  --color-tint-bg-strength-subtle:     16%;
  --color-tint-bg-strength-strong:     30%;
  --color-tint-border-strength:        32%;
  --color-tint-border-strength-subtle: 26%;
  --color-tint-border-strength-strong: 38%;
  --color-tint-border-strength-loud:   42%;
}

/* Flux / loopos: --color-app stays gray-950 in both themes — rebind chrome accents in dark */
:root[data-theme="dark"][data-app="flux"],
:root[data-theme="dark"][data-app="loopos"] {
  --color-chrome-accent: var(--color-content);
  --color-chrome-accent-fg: var(--color-background);
  --color-chrome-accent-muted: var(--color-secondary);
}

:root[data-app="handling"],
[data-app="handling"] {
  --color-app: #6f4cff;
  --color-app-fg: #ffffff;
  --color-app-gradient-light: #8044ff;
  --color-app-gradient-dark: #443092;
  --color-chrome-accent: var(--color-app);
  --color-chrome-accent-fg: var(--color-app-fg);
  --color-chrome-accent-muted: color-mix(in srgb, var(--color-app) 8%, transparent);
  --color-focus-ring: var(--color-app);
}

/* Nested Validation / Hubs frames — brand-forward primary on descendants.
   Used on Flux Apps `lui-app-layout__main` so the action bar inherits too. */
[data-app="validation"] {
  --color-app: #009e8c;
  --color-app-fg: #ffffff;
  --color-app-gradient-light: #00d8b6;
  --color-app-gradient-dark: #059898;
}

[data-app="hubs"] {
  --color-app: #0b6bff;
  --color-app-fg: #ffffff;
  --color-app-gradient-light: #00c5ff;
  --color-app-gradient-dark: #0072ff;
  --color-chrome-accent: var(--color-app);
  --color-chrome-accent-fg: var(--color-app-fg);
  --color-chrome-accent-muted: color-mix(in srgb, var(--color-app) 8%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

/* Default scrollbar — the sidebar pill (transparent track, ~4px thumb).
   Components that hide the bar, reveal it on hover, or keep a draggable
   table bar override this with a more specific rule. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 24%, transparent);
  border: 1px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--color-content) 36%, transparent);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: var(--color-background);
  color: var(--color-content);
}

/* Form controls: UA + Font Awesome kit set Arial on bare button/input.
   Qualify under html body (specificity 0,0,3). Use --font-sans (not inherit).
   font-family only — not the font shorthand — so copy-* / button-* sizes stay (skill §3.3).
   IMPORTANT: never write star-slash inside this comment or the rule is dropped from the CSSOM. */
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--font-sans) !important;
}

/* 100dvh: on a phone 100vh counts the area under the browser toolbar, and with
   overflow hidden the bottom of the shell (wizard dock) can never be reached.
   min-height too: `html, body { min-height: 100vh }` would otherwise win over
   height and put the shell back under the toolbar. */
body.shell-body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
}
html:has(body.shell-body) {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
}
body.shell-body.sidebar-mobile-open { overflow: hidden; }
body.auth-body { min-height: 100vh; overflow-x: hidden; overflow-y: auto; }

.material-symbols-rounded {
  font-family: "Material Symbols Rounded", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px; /* default UI icon; paired with copy-13 — cancels Google stylesheet 24px */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
  /* No colour hiding: material_symbols.css uses font-display: block, so the
     ligature text is invisible until the glyphs arrive. */
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  /* Keep transparent: Outlined font is not loaded in head (only Rounded).
     Only Rounded is self-hosted (material_symbols.css). */
  color: transparent;
}

/* Interactive cursors — loopos-ui-v2 §4.8 */
button:not(:disabled):not([aria-disabled="true"]),
[type="button"]:not(:disabled):not([aria-disabled="true"]),
[type="submit"]:not(:disabled):not([aria-disabled="true"]),
[type="reset"]:not(:disabled):not([aria-disabled="true"]),
[role="button"]:not([aria-disabled="true"]),
[type="checkbox"]:not(:disabled),
[type="radio"]:not(:disabled),
select:not(:disabled),
summary:not([aria-disabled="true"]),
a[href],
label:has(> input[type="checkbox"]:not(:disabled)),
label:has(> input[type="radio"]:not(:disabled)) {
  cursor: pointer;
}

button:disabled,
button[aria-disabled="true"],
[role="button"][aria-disabled="true"],
[type="checkbox"]:disabled,
[type="radio"]:disabled,
select:disabled {
  cursor: not-allowed;
}

input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea {
  cursor: text;
}

/* Typography — every text class owns theme-aware color (do not rely on inheritance through dialog/top-layer) */
.heading-30 { font-family: var(--font-heading); font-size: 30px; font-weight: 500; line-height: 40px; color: var(--color-content); }
.heading-24 { font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 32px; margin: 0; color: var(--color-content); }
.heading-20 { font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 24px; margin: 0; color: var(--color-content); }
.heading-16,
.heading-16-medium { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 22px; margin: 0; color: var(--color-content); }
.copy-16, .copy-16-medium { font-size: 16px; line-height: 20px; color: var(--color-content); }
.copy-16 { font-weight: 400; }
.copy-16-medium { font-weight: 500; }
.copy-13, .copy-13-medium, .copy-13-regular { font-size: 13px; line-height: 18px; color: var(--color-content); }
.copy-13, .copy-13-regular { font-weight: 400; }
.copy-13-medium { font-weight: 500; }
.copy-12, .copy-12-medium, .copy-12-regular { font-size: 12px; line-height: 16px; color: var(--color-content); }
.copy-12, .copy-12-regular { font-weight: 400; }
.copy-12-medium { font-weight: 500; }
.copy-11, .copy-11-medium { font-size: 11px; line-height: 15px; color: var(--color-content); }
.copy-11 { font-weight: 400; }
.copy-11-medium { font-weight: 500; }
.copy-11-mono { font-size: 11px; font-weight: 500; line-height: 15px; font-family: var(--font-mono); color: var(--color-content); }
.copy-13-mono { font-size: 13px; font-weight: 500; line-height: 18px; font-family: var(--font-mono); color: var(--color-content); }
.copy-12-mono { font-size: 12px; font-weight: 500; line-height: 16px; font-family: var(--font-mono); color: var(--color-content); }
.copy-12-mono-semibold { font-size: 12px; font-weight: 600; line-height: 16px; font-family: var(--font-mono); color: var(--color-content); }
.copy-10-mono { font-size: 10px; font-weight: 500; line-height: 13px; font-family: var(--font-mono); text-transform: uppercase; color: var(--color-content); }

/* Index table timestamp cell — single line (catalog_table format) */
.lui-date-show {
  display: inline-block;
  white-space: nowrap;
}

/* Merged chronology: relative updated at rest; created absolute on hover/focus */
.lui-updated-show {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  outline: none;
  cursor: default;
}
.lui-updated-show__relative {
  white-space: nowrap;
}
.lui-updated-show__created {
  white-space: nowrap;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function),
    max-height var(--default-transition-duration) var(--default-transition-timing-function);
}
.lui-updated-show:hover .lui-updated-show__created,
.lui-updated-show:focus-visible .lui-updated-show__created,
.lui-table__row:hover .lui-updated-show__created {
  opacity: 1;
  max-height: 1.5em;
}
@media (prefers-reduced-motion: reduce) {
  .lui-updated-show__created {
    transition: none;
  }
}

/* Index table mono cell — slugs, tokens, ids (copy-12-mono, not 13) */
.lui-table-mono {
  display: inline-block;
  max-width: 100%;
}
.button-13 { font-size: 13px; font-weight: 500; line-height: 19px; color: var(--color-content); }
.button-12 { font-size: 12px; font-weight: 500; line-height: 16px; color: var(--color-content); }

/* Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-secondary { color: var(--color-content-secondary); }
.text-foreground { color: var(--color-foreground); }
.m-0 { margin: 0; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.px-6 { padding-left: 24px; padding-right: 24px; }

/* Layout & structural utilities (hand-rolled subset — no Tailwind in this build) */
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.flex-row { flex-direction: row; }
.flex-grow, .grow { flex-grow: 1; }
.shrink-0, .flex-shrink-0 { flex-shrink: 0; }
.items-stretch { align-items: stretch; }
.items-start { align-items: flex-start; }
.self-start { align-self: flex-start; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.ml-auto { margin-left: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.w-auto { width: auto; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }
.max-w-none { max-width: none; }
.min-h-0 { min-height: 0; }
.list-none { list-style: none; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.object-cover { object-fit: cover; }
.rounded-sm { border-radius: 4px; }
.rounded-md { border-radius: 6px; }
.rounded-lg { border-radius: 6px; }
.rounded-xl { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.rounded { border-radius: 6px; }
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-tertiary,
.border-default { border-color: var(--color-tertiary); }
.border-success { border-color: var(--color-success); }
.border-danger { border-color: var(--color-danger); }
.bg-surface { background: var(--color-background); }
.bg-surface-muted { background: var(--color-secondary); }
.text-semantic-error { color: var(--color-danger-fg); }
.gap-0 { gap: 0; }
.p-0 { padding: 0; }
.p-2 { padding: 8px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.pl-2 { padding-left: 8px; }
.pr-1 { padding-right: 4px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mt-1 { margin-top: 4px; }
.mt-1\.5 { margin-top: 6px; }
.mt-3 { margin-top: 12px; }
.pr-1\.5 { padding-right: 6px; }
.opacity-0 { opacity: 0; }
.h-0 { height: 0; }
.w-0 { width: 0; }
.h-12 { height: 48px; }
.h-13 { height: 52px; }
.size-2\.5 { width: 10px; height: 10px; }
.size-4 { width: 16px; height: 16px; }
.size-4\.5 { width: 18px; height: 18px; }
.border-0 { border: 0; }
.select-none { user-select: none; }
.whitespace-nowrap { white-space: nowrap; }
.overflow-x-clip { overflow-x: clip; }
.z-20 { z-index: 20; }
.transition-all { transition: all var(--default-transition-duration) var(--default-transition-timing-function); }
.duration-200 { transition-duration: 200ms; }
.cursor-e-resize { cursor: e-resize; }
.cursor-w-resize { cursor: w-resize; }
.empty\:hidden:empty { display: none; }

/* Alert — inline semantic banner */
.lui-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 12px;
  border-radius: 6px; /* rounded-lg */
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
}
.lui-alert--dismissible { grid-template-columns: auto 1fr auto; }

.lui-alert__icon { flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 1px; }
.lui-alert__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lui-alert__title { color: inherit; margin: 0; }
.lui-alert__description { color: var(--color-content-secondary); }

.lui-alert--success {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength-loud), var(--color-background));
  color: var(--color-success-fg);
}
.lui-alert--success .lui-alert__icon,
.lui-alert--success .lui-alert__description { color: var(--color-success-fg); }

.lui-alert--danger {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength-loud), var(--color-background));
  color: var(--color-danger-fg);
}
.lui-alert--danger .lui-alert__icon,
.lui-alert--danger .lui-alert__description { color: var(--color-danger-fg); }


/* Run failure — sentence is the title; source line stays secondary;
   the code and the recorded time sit on their own row. */
.lui-alert--danger.lui-alert--run-failure .lui-alert__description {
  color: var(--color-content-secondary);
}

.lui-alert--run-failure .lui-alert__title { overflow-wrap: anywhere; }

.lui-alert--run-failure .lui-alert__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength-loud), var(--color-background));
}

.lui-alert--run-failure .lui-alert__facts .copy-12 {
  color: var(--color-content-secondary);
}

.lui-alert--run-failure .lui-badge--red {
  background: var(--color-danger);
  color: var(--color-background);
  border-color: transparent;
}


.lui-alert--warning {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength-loud), var(--color-background));
  color: var(--color-warning-fg);
}
.lui-alert--warning .lui-alert__icon,
.lui-alert--warning .lui-alert__description { color: var(--color-warning-fg); }

.lui-alert--informative {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength-loud), var(--color-background));
  color: var(--color-informative-fg);
}
.lui-alert--informative .lui-alert__icon,
.lui-alert--informative .lui-alert__description { color: var(--color-informative-fg); }

.lui-alert--neutral {
  background: var(--color-primary);
  border-color: var(--color-tertiary);
  color: var(--color-content);
}
.lui-alert--neutral .lui-alert__icon { color: var(--color-foreground); }
.lui-alert--neutral .lui-alert__description { color: var(--color-content-secondary); }

.lui-alert__description a { color: inherit; text-decoration: underline; }
.lui-alert__description a:hover { text-decoration-thickness: 2px; }

.lui-alert__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  border: none;
  padding: 0;
}
.lui-alert__dismiss .material-symbols-rounded { font-size: 16px; }
.lui-alert__dismiss:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.lui-alert__dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-alert-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Message template picker (app settings — same modal chrome as flow editor).
   `display: flex` beats the UA `[hidden]` rule — keep closed unless `.is-open`. */
.lui-flow-settings__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--color-content) 40%, transparent);
}

.lui-flow-settings__modal-backdrop.is-open,
.lui-flow-settings__modal-backdrop:not([hidden]) {
  display: flex;
}

.lui-flow-settings__modal-backdrop[hidden] {
  display: none !important;
}

.lui-flow-settings__modal {
  width: min(100%, 28rem);
}

/* Toast — floating notifications.
   Native <dialog> (modal blur) lives in the top layer, above any z-index.
   The region is a manual popover so it can be promoted above that blur. */
.lui-toast-region {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
}

.lui-toast-region[popover] {
  border: none;
  padding: 0;
  background: transparent;
  overflow: visible;
  margin: 0;
  width: auto;
  height: auto;
  color: inherit;
}

.lui-toast-region--top-center,
.lui-toast-region[popover].lui-toast-region--top-center {
  top: 0;
  right: 0;
  bottom: auto;
  left: 0;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  box-sizing: border-box;
}

.lui-toast-region--top-left,
.lui-toast-region[popover].lui-toast-region--top-left {
  top: 0;
  right: auto;
  bottom: auto;
  left: 16px;
  margin-top: 16px;
  width: min(24rem, calc(100% - 32px));
}

.lui-toast-region--top-right,
.lui-toast-region[popover].lui-toast-region--top-right {
  top: 0;
  right: 16px;
  bottom: auto;
  left: auto;
  margin-top: 16px;
  width: min(24rem, calc(100% - 32px));
}

.lui-toast-region--bottom-center,
.lui-toast-region[popover].lui-toast-region--bottom-center {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  box-sizing: border-box;
}

.lui-toast-region--bottom-left,
.lui-toast-region[popover].lui-toast-region--bottom-left {
  top: auto;
  bottom: 0;
  right: auto;
  left: 16px;
  margin-bottom: 16px;
  width: min(24rem, calc(100% - 32px));
}

.lui-toast-region--bottom-right,
.lui-toast-region[popover].lui-toast-region--bottom-right {
  top: auto;
  bottom: 0;
  right: 16px;
  left: auto;
  margin-bottom: 16px;
  width: min(24rem, calc(100% - 32px));
}

.lui-toast-region--top-center .lui-toast-region__list,
.lui-toast-region--bottom-center .lui-toast-region__list {
  width: min(24rem, 100%);
}

.lui-toast-region__list {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  pointer-events: auto;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) { .lui-toast-region__list { flex-direction: column; } }
.lui-toast-region__list > li { pointer-events: auto; }

.lui-toast-item {
  position: absolute;
  left: 0;
  right: 0;
  z-index: var(--toast-z-index, 0);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lui-toast-item[data-mounted="false"] { opacity: 0; }
.lui-toast-item[data-mounted="false"][data-position^="top"]    { transform: translateY(-100%); }
.lui-toast-item[data-mounted="false"][data-position^="bottom"] { transform: translateY(100%); }
.lui-toast-item[data-mounted="true"] { opacity: 1; }
.lui-toast-item[data-removed="true"] { opacity: 0; pointer-events: none; }
.lui-toast-item[data-removed="true"][data-position^="top"]    { transform: translateY(-100%); }
.lui-toast-item[data-removed="true"][data-position^="bottom"] { transform: translateY(100%); }
.lui-toast-item[data-expanded="false"][data-visible="true"] {
  transform: translateY(calc(var(--toast-index, 0) * 8px)) scale(calc(1 - var(--toast-index, 0) * 0.05));
}
.lui-toast-item[data-expanded="false"][data-visible="false"] {
  opacity: 0;
  transform: translateY(calc(var(--toast-index, 0) * 8px)) scale(0.9);
}
.lui-toast-item[data-expanded="true"][data-position^="top"]    { transform: translateY(var(--toast-offset, 0)); }
.lui-toast-item[data-expanded="true"][data-position^="bottom"] { transform: translateY(calc(var(--toast-offset, 0) * -1)); }
.lui-toast-item[data-expanded="false"] > span { height: var(--front-toast-height, auto); overflow: hidden; }
.lui-toast-item[data-expanded="false"][data-front="true"] > span,
.lui-toast-item[data-expanded="true"] > span { height: auto; overflow: visible; }
.lui-toast-item[data-expanded="false"][data-front="false"] > span > div { opacity: 0; }
.lui-toast-item[data-expanded="false"][data-front="true"] > span > div,
.lui-toast-item[data-expanded="true"] > span > div { opacity: 1; }

.lui-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  width: 100%;
  min-width: 18rem;
  max-width: 24rem;
  padding: 12px 14px;
  border-radius: 6px; /* rounded-lg */
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  transition: opacity 0.3s ease;
}

/* Title-only row: vertically center icon, title, and dismiss */
.lui-toast:not(:has(.lui-toast__description)):not(:has(.lui-toast__actions)) {
  align-items: center;
}

.lui-toast:not(:has(.lui-toast__description)):not(:has(.lui-toast__actions)) .lui-toast__icon {
  margin-top: 0;
}

.lui-toast__icon { font-size: 18px; line-height: 1; margin-top: 1px; color: var(--color-foreground); }
.lui-toast__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lui-toast__title { color: var(--color-content); margin: 0; }
.lui-toast__description { color: var(--color-content-secondary); margin: 0; }

.lui-toast--default .lui-toast__icon { color: var(--color-foreground); }
.lui-toast--success .lui-toast__icon { color: var(--color-success); }
.lui-toast--error .lui-toast__icon,
.lui-toast--danger .lui-toast__icon { color: var(--color-danger); }
.lui-toast--info .lui-toast__icon { color: var(--color-informative); }
.lui-toast--warning .lui-toast__icon { color: var(--color-warning); }
.lui-toast--loading .lui-toast__icon { color: var(--color-content-secondary); }

/* Toast icons keep the semantic variant colour (:root keeps the old specificity) */
:root .lui-toast--default .lui-toast__icon.material-symbols-rounded { color: var(--color-foreground); }
:root .lui-toast--success .lui-toast__icon.material-symbols-rounded { color: var(--color-success); }
:root .lui-toast--error .lui-toast__icon.material-symbols-rounded,
:root .lui-toast--danger .lui-toast__icon.material-symbols-rounded { color: var(--color-danger); }
:root .lui-toast--info .lui-toast__icon.material-symbols-rounded { color: var(--color-informative); }
:root .lui-toast--warning .lui-toast__icon.material-symbols-rounded { color: var(--color-warning); }
:root .lui-toast--loading .lui-toast__icon.material-symbols-rounded { color: var(--color-content-secondary); }

.lui-toast__icon--spin { animation: lui-toast-spin 1s linear infinite; }
@keyframes lui-toast-spin { to { transform: rotate(360deg); } }

.lui-toast__actions { display: flex; gap: 8px; margin-top: 8px; }
.lui-toast__action {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
}
.lui-toast__action:hover { background: var(--color-secondary); }
.lui-toast__action--primary {
  background: var(--color-app);
  color: var(--color-app-fg);
  border-color: transparent;
}
.lui-toast__action--primary:hover { background: color-mix(in srgb, var(--color-app) 85%, black); }
.lui-toast__action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-toast__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  border-radius: 6px;
  background: transparent;
  color: var(--color-foreground);
  opacity: 0.7;
  cursor: pointer;
  border: none;
  padding: 0;
}
.lui-toast__dismiss .material-symbols-rounded { font-size: 16px; }
.lui-toast__dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.lui-toast__dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-form-errors__list {
  margin: 0;
  padding-left: 18px;
}

/* Address fields — City + Postal always one row; --full drops the 420px form cap (modals) */
.lui-address-fields__city-postal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  gap: 12px;
  width: 100%;
}

.lui-address-fields:not(.lui-address-fields--full) .lui-address-fields__city-postal {
  max-width: var(--lui-forms-control-max-width, 420px);
}

.lui-address-fields__city,
.lui-address-fields__postal {
  min-width: 0;
  width: 100%;
}

.lui-address-fields__city .lui-forms__group,
.lui-address-fields__postal .lui-forms__group,
.lui-address-fields__city .lui-forms__control,
.lui-address-fields__postal .lui-forms__control {
  max-width: none;
}

.lui-address-fields--full .lui-forms__group,
.lui-address-fields--full .lui-forms__control {
  max-width: none;
}

.lui-address-fields--full .lui-forms__group.entity-address-fields__country,
.lui-address-fields--full .lui-forms__group.entity-address-fields__country .lui-forms__control {
  max-width: 8rem;
}

/* Buttons — loopos-ui-v2 / Rails Blocks variants (buttons.md) */
.lui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  position: relative;
  transition: background-color var(--default-transition-duration) var(--default-transition-timing-function),
    color var(--default-transition-duration) var(--default-transition-timing-function),
    border-color var(--default-transition-duration) var(--default-transition-timing-function),
    filter var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-button:disabled,
.lui-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.lui-button[hidden] {
  display: none !important;
}

.lui-button--size-lg { height: 40px; padding: 0 16px; font-size: 13px; line-height: 19px; }
.lui-button--size-md { height: 32px; padding: 0 12px; font-size: 13px; line-height: 18px; }
.lui-button--size-sm { height: 28px; padding: 0 10px; font-size: 12px; line-height: 16px; gap: 6px; }
.lui-button--size-xs { height: 24px; padding: 0 8px; font-size: 12px; line-height: 16px; gap: 6px; }
/* One stroke for every button icon — beat call-site inline material_icon(size/weight). */
.lui-button .material-symbols-rounded {
  font-size: 14px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14 !important;
}
.lui-button .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 14 !important;
}

/* Neutral apps (Flux): primary = gray-950 fill (SKILL §3.4) */
.lui-button--primary,
.lui-button--secondary,
.lui-button--neutral--primary {
  background: var(--color-content);
  color: var(--color-background);
  border-color: color-mix(in srgb, var(--color-app-fg) 15%, transparent);
}

.lui-button--primary:hover,
.lui-button--secondary:hover,
.lui-button--neutral--primary:hover { filter: brightness(1.08); }

[data-app="validation"] .lui-button--primary,
[data-app="validation"] .lui-button--neutral--primary,
[data-app="hubs"] .lui-button--primary,
[data-app="hubs"] .lui-button--neutral--primary,
[data-app="handling"] .lui-button--primary,
[data-app="handling"] .lui-button--neutral--primary {
  background: var(--color-app);
  color: var(--color-app-fg);
}

.lui-button--outline,
.lui-button--neutral--secondary {
  background: transparent;
  color: var(--color-content);
  border-color: var(--color-tertiary);
}

.lui-button--outline:hover,
.lui-button--neutral--secondary:hover { background: var(--color-secondary); }

.lui-button--ghost,
.lui-button--ghost:link,
.lui-button--ghost:visited,
.lui-button--neutral--tertiary {
  background: transparent;
  color: var(--color-content);
  border-color: transparent;
}

.lui-button--ghost:hover,
.lui-button--neutral--tertiary:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

/* Pressed / toggle-open chrome (action-bar icon toggles, drawer-bar / Preview triggers). */
.lui-button--ghost[aria-pressed="true"],
.lui-button--ghost.is-active,
.lui-button--ghost.lui-button--pressed,
.lui-button--neutral--tertiary[aria-pressed="true"],
.lui-button--neutral--tertiary.is-active,
.lui-button--neutral--tertiary.lui-button--pressed,
.lui-button--outline[aria-pressed="true"],
.lui-button--outline.is-active,
.lui-button--outline.lui-button--pressed,
.lui-button--neutral--secondary[aria-pressed="true"],
.lui-button--neutral--secondary.is-active,
.lui-button--neutral--secondary.lui-button--pressed {
  background: color-mix(in srgb, var(--color-content) 10%, transparent);
  color: var(--color-content);
}

/* Tertiary/ghost at rest; solid destructive on hover/focus — discreet delete (icon-only, inline). */
.lui-button--tertiary-danger {
  background: transparent;
  color: var(--color-content);
  border-color: transparent;
}

.lui-button--tertiary-danger:hover,
.lui-button--tertiary-danger:focus-visible {
  background: var(--color-danger);
  color: var(--color-app-fg);
  border-color: color-mix(in srgb, var(--color-danger) 80%, black);
}

.lui-button--destructive {
  background: var(--color-danger);
  color: var(--color-app-fg);
  border-color: color-mix(in srgb, var(--color-danger) 80%, black);
}

.lui-button--destructive:hover { filter: brightness(1.08); }

.lui-button--block { width: 100%; }

.lui-button--icon-only {
  padding: 0;
  justify-content: center;
}

.lui-button--icon-only.lui-button--size-xs { width: 24px; min-width: 24px; height: 24px; }
.lui-button--icon-only.lui-button--size-sm { width: 28px; min-width: 28px; height: 28px; }
.lui-button--icon-only.lui-button--size-md { width: 32px; min-width: 32px; height: 32px; }
.lui-button--icon-only.lui-button--size-lg { width: 40px; min-width: 40px; height: 40px; }

.lui-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lui-button__label {
  white-space: nowrap;
}

/* Loading — loopos-ui-v2: hide content, centre CSS spinner (§4.2) */
.lui-button--loading {
  cursor: progress;
}

.lui-button--loading .lui-button__label,
.lui-button--loading .lui-button__icon,
.lui-button--loading .lui-button__status-dot,
.lui-button--loading .lui-button__counter,
.lui-button--loading .lui-button__badge,
.lui-button--loading .lui-button__dot {
  opacity: 0;
}

/* Notification button indicators — loopos-ui-v2 extensions/notification_button.md
   Default badge = app chrome accent (count). Unread alert = --unread (danger). */
.lui-button__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-chrome-accent);
  color: var(--color-chrome-accent-fg);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border: 2px solid var(--color-background);
}

.lui-button__badge--unread {
  background: var(--color-danger);
  color: var(--color-app-fg);
}

.lui-button__dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-danger);
  border: 2px solid var(--color-background);
}

.lui-button__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-tertiary);
  color: var(--color-content-secondary);
  font-size: 10px;
  font-weight: 600;
}

.lui-button__spinner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0;
  pointer-events: none;
  animation: lui-button-spin 0.6s linear infinite;
}

.lui-button--loading .lui-button__spinner {
  opacity: 1;
}

@keyframes lui-button-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lui-button__spinner { animation: none; }
}

.lui-theme-toggle .material-symbols-rounded { font-size: 16px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16; }

@keyframes lui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Forms (Rails Blocks — lui-forms__*)
   Inter-field spacing: parent .lui-forms__stack / gap-2 (8px) — not margin on groups. */
.lui-forms__group {
  display: flex;
  flex-direction: column;
  gap: 0; /* spacing via label / helper margins (4px) */
  width: 100%;
  max-width: var(--lui-forms-control-max-width, 420px);
  position: relative;
}

.lui-forms__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Protocol questions sit further apart than a generic form stack. The field
   service form is both classes; other stacks stay at 8px. */
.protocol-answer-form.lui-forms__stack {
  gap: 12px;
}

/* Invite-operator modal: the field stack here is 12px. Other forms stay at 8px. */
#partner-user-new-form.lui-forms__stack {
  gap: 12px;
}

.lui-forms__group--full {
  max-width: none;
}

.lui-forms__group--full .lui-forms__control {
  max-width: none;
}

.lui-forms__group--inline {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.lui-forms__group--inline .lui-forms__label {
  white-space: nowrap;
  margin-bottom: 0;
}

.lui-forms__label {
  color: var(--color-content);
  margin: 0 0 4px;
}

.lui-forms__required,
.lui-form-entry__required { color: var(--color-danger-fg); }

/* Protocol questions use the brighter danger asterisk (same as radios).
   Compound classes beat a label color set on `.lui-forms__label` /
   `.copy-13-medium`. An app that passes its own required-marker class to the
   protocol form pairs it with `.lui-forms__required` in its pack sheet. */
.protocol-answer-form .lui-forms__required,
.lui-forms__required.protocol-answer-required {
  color: var(--color-danger);
  margin-left: 2px;
}

.lui-forms__control {
  width: 100%;
  max-width: min(var(--lui-forms-control-max-width, 420px), 100%);
  box-sizing: border-box;
  height: var(--lui-control-height-md);
  padding: 0 12px;
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
  font-family: var(--font-sans);
  font-size: inherit;
  line-height: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lui-forms__control::placeholder { color: var(--color-content-secondary); }

/* Textarea — not a fixed control height; floor at 80px */
textarea.lui-forms__control {
  height: auto;
  min-height: 80px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
}

.lui-forms__control:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-forms__control:disabled {
  background: var(--color-primary);
  color: var(--color-content-secondary);
  cursor: not-allowed;
}

/* Browser autofill — override WebKit/Blink !important highlight to match form tokens */
@keyframes lui-forms-autofill {
  to {
    background-color: var(--color-background);
    color: var(--color-content);
  }
}

.lui-forms__control:-webkit-autofill,
.lui-forms__control:-webkit-autofill:hover,
.lui-forms__control:-webkit-autofill:focus,
.lui-forms__control:-webkit-autofill:active,
.lui-password__input:-webkit-autofill,
.lui-password__input:-webkit-autofill:hover,
.lui-password__input:-webkit-autofill:focus,
.lui-password__input:-webkit-autofill:active,
.lui-forms__composite .lui-forms__control:-webkit-autofill,
.lui-forms__composite .lui-forms__control:-webkit-autofill:hover,
.lui-forms__composite .lui-forms__control:-webkit-autofill:focus,
.lui-forms__composite .lui-forms__control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-content) !important;
  caret-color: var(--color-content);
  -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset !important;
  box-shadow: 0 0 0 1000px var(--color-background) inset !important;
  transition: background-color 99999s ease-out, color 99999s ease-out;
  animation: lui-forms-autofill 0.001s forwards;
}

.lui-forms__control:autofill,
.lui-password__input:autofill,
.lui-forms__composite .lui-forms__control:autofill {
  box-shadow: 0 0 0 1000px var(--color-background) inset !important;
  -webkit-text-fill-color: var(--color-content) !important;
  caret-color: var(--color-content);
}

.lui-table .lui-forms__control {
  max-width: none;
}

.lui-forms__control--xs { height: var(--lui-control-height-xs); padding: 0 8px; }
.lui-forms__control--sm { height: var(--lui-control-height-sm); padding: 0 10px; }
.lui-forms__control--lg { height: var(--lui-control-height-lg); padding: 0 14px; }
.lui-forms__control--heading {
  height: var(--lui-control-height-lg);
  padding: 8px 4px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

/*
 * Forms inline-edit — 3 states (display / hover / edit), padding always reserved.
 * Display: transparent border + bg. Hover: soft secondary fill. Edit: standard Forms chrome.
 */
.lui-forms__control.lui-inline-edit__input--display,
.lui-forms__control.lui-inline-edit__display--editable {
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.lui-forms__control.lui-inline-edit__input--display:hover,
.lui-forms__control.lui-inline-edit__display--editable:hover {
  background: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.lui-forms__control.lui-inline-edit__input--display:focus-visible,
.lui-forms__control.lui-inline-edit__display--editable:focus-visible {
  outline: none;
  box-shadow: none;
}

.lui-forms__control--heading.lui-inline-edit__input--display,
.lui-forms__control--heading.lui-inline-edit__input--edit {
  width: auto;
  max-width: 100%;
  field-sizing: content;
}

/* Inline edit show fields — tighter control padding (details + page header title) */
.lui-inline-edit__field .lui-forms__control {
  padding: 4px 6px;
  min-height: 0;
  max-width: none;
}

.lui-inline-edit__heading .lui-forms__control--heading {
  padding: 8px 4px;
  min-height: calc(32px + 8px); /* line-height + vertical padding */
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

/* Filter pill group — LoopOS native (native/filter-pill-group.md — keep in sync) */
.lui-filter-pill-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lui-filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 2px 2px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 9999px;
  background: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lui-filter-pill:hover {
  background: color-mix(in srgb, var(--color-tertiary) 35%, var(--color-primary));
}

.lui-filter-pill:hover .lui-filter-pill__label {
  color: var(--color-content);
}

.lui-filter-pill--selected {
  background: var(--color-chrome-accent-muted);
  border-color: var(--color-tertiary);
}

.lui-filter-pill--selected:hover {
  background: color-mix(in srgb, var(--color-chrome-accent) 14%, var(--color-background));
}

.lui-filter-pill__label {
  flex-shrink: 0;
  padding-right: 8px;
  color: var(--color-content-secondary);
}

.lui-filter-pill--selected .lui-filter-pill__label {
  color: var(--color-content);
}

.lui-filter-pill__count {
  flex-shrink: 0;
  pointer-events: none;
  min-width: 20px;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  color: var(--color-content-secondary);
}

.lui-filter-pill--selected .lui-filter-pill__count {
  background: var(--color-background);
  border-color: var(--color-tertiary);
  color: var(--color-content-secondary);
}

/* Segmented — pill track + rounded pills (theme-segment pattern) */
.lui-filter-pill-group--segmented {
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  gap: 2px;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: var(--color-secondary);
  box-sizing: border-box;
}

.lui-filter-pill-group--segmented .lui-filter-pill {
  height: 20px;
  min-height: 20px;
  padding: 0 2px 0 8px;
  border-radius: 4px;
  border-width: 0;
  border-color: transparent;
  background: transparent;
}

.lui-filter-pill-group--segmented .lui-filter-pill:hover {
  background: color-mix(in srgb, var(--color-content) 8%, transparent);
  border-color: transparent;
}

/* Segmented active — elevated: background chip + subtle shadow (theme-segment pattern) */
.lui-filter-pill-group--segmented .lui-filter-pill--selected {
  background: var(--color-background);
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-content) 12%, transparent);
}

.lui-filter-pill-group--segmented .lui-filter-pill--selected:hover {
  background: var(--color-background);
  border-color: transparent;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-content) 14%, transparent);
}

.lui-filter-pill-group--segmented .lui-filter-pill__label {
  padding-right: 7px;
}

.lui-filter-pill-group--segmented .lui-filter-pill__count {
  height: 16px;
  min-height: 16px;
  min-width: 16px;
  padding: 0 5px;
  line-height: 14px;
  border-radius: 4px;
  border-color: color-mix(in srgb, var(--color-tertiary) 40%, transparent);
  background: color-mix(in srgb, var(--color-secondary) 55%, var(--color-background));
}

.lui-filter-pill-group--segmented .lui-filter-pill--selected .lui-filter-pill__count {
  background: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-tertiary) 35%, transparent);
}

/* Disabled — unsupported origin / vault kind (not clickable) */
.lui-filter-pill--disabled {
  cursor: not-allowed;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-tertiary) 60%, transparent);
  background: color-mix(in srgb, var(--color-secondary) 45%, var(--color-primary));
}

.lui-filter-pill--disabled,
.lui-filter-pill--disabled:hover {
  background: color-mix(in srgb, var(--color-secondary) 45%, var(--color-primary));
}

.lui-filter-pill--disabled .lui-filter-pill__label,
.lui-filter-pill--disabled:hover .lui-filter-pill__label {
  color: var(--color-content-tertiary);
}

.lui-filter-pill--disabled .lui-filter-pill__count {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-tertiary) 50%, transparent);
  background: color-mix(in srgb, var(--color-secondary) 35%, var(--color-background));
  color: var(--color-content-tertiary);
}

.lui-filter-pill-group--segmented .lui-filter-pill--disabled {
  border-width: 1px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-tertiary) 55%, transparent);
  background: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  box-shadow: none;
}

.lui-filter-pill-group--segmented .lui-filter-pill--disabled,
.lui-filter-pill-group--segmented .lui-filter-pill--disabled:hover {
  background: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  border-color: color-mix(in srgb, var(--color-tertiary) 55%, transparent);
}

.lui-filter-pill-group--segmented .lui-filter-pill--disabled .lui-filter-pill__count {
  border-style: dashed;
  background: color-mix(in srgb, var(--color-secondary) 25%, var(--color-primary));
  color: var(--color-content-tertiary);
}

/* Card select — LoopOS native (native/card-select.md — keep in sync) */
.lui-card-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lui-card-select__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* The unselected option carries a real border. With `transparent` here the
   cards read as plain text on the page background — nothing says they can be
   clicked, and the only affordance was the cursor. Same three states as
   `.lui-radio`: resting border, a darker one on hover, the app accent when
   chosen. */
.lui-card-select__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.lui-card-select--split .lui-card-select__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lui-card-select__option-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
  cursor: not-allowed;
}

.lui-card-select__option-wrap.lui-tooltip__trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  cursor: not-allowed;
  white-space: normal;
}

.lui-card-select__option-wrap .lui-card-select__option {
  flex: 1 1 auto;
  width: 100%;
}

.lui-card-select__option-wrap .lui-card-select__option:disabled,
.lui-card-select__option-wrap .lui-card-select__option--disabled {
  pointer-events: none;
}

.lui-card-select__option:hover {
  background: var(--color-secondary);
  border-color: var(--color-content-secondary);
}

.lui-card-select__option:disabled,
.lui-card-select__option--disabled,
.lui-card-select__option:disabled:hover,
.lui-card-select__option--disabled:hover {
  cursor: not-allowed;
  opacity: 0.5;
  background: var(--color-background);
  border-color: var(--color-tertiary);
  box-shadow: none;
}

/* `--color-focus-ring`, not `--color-primary`: `--color-primary` is a *surface*
   token (near-white in light, near-black in dark), so this ring was drawn in near-white
   on a white page and in near-black on a black one — invisible in both themes,
   on a control whose options are each their own tab stop. The ring token is
   `--color-app` in light and `--color-informative` in dark, and it stays an
   `outline` (not the house `box-shadow` ring) because the chosen-card rule
   below sets `box-shadow: none` and would erase it. */
.lui-card-select__option:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* With a resting border on every other card, the old `--color-tertiary` here
   no longer told the two apart, so the chosen card takes one step past hover:
   resting `--color-tertiary` < hover `--color-content-secondary` < chosen
   `--color-content`.

   Not `--color-app`, which a checked `.lui-radio` does use: the radio also
   *fills* with it and prints a `--color-app-fg` dot, so the dot carries the
   signal when the accent has none. A bordered card has only the border, and
   `--color-app` falls back to gray-950 on a shell that declares no
   `data-app` — an app whose manifest icon matches no brand frame, so in dark
   its chosen card would be outlined in near-black, invisible against the page and
   *darker* than its own dark-gray fill while every unchosen sibling kept a
   lighter gray. The selected state would read as the unselected one. */
.lui-card-select__option--selected,
.lui-card-select__option[aria-selected="true"],
.lui-card-select__option--selected:hover,
.lui-card-select__option[aria-selected="true"]:hover {
  background: var(--color-secondary);
  border-color: var(--color-content);
  box-shadow: none;
}

.lui-card-select__label {
  min-width: 0;
}

.lui-card-select__description {
  color: var(--color-content-secondary);
  min-width: 0;
}

.lui-card-select__option--selected .lui-card-select__description,
.lui-card-select__option[aria-selected="true"] .lui-card-select__description {
  color: var(--color-content-secondary);
}

/* Form variant — toggle pills with hidden checkboxes (shared/filters/form_filter_pill_group) */
.lui-filter-pill--toggle {
  cursor: pointer;
}

.lui-filter-pill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lui-filter-pill--toggle:has(.lui-filter-pill__input:checked) {
  background: var(--color-chrome-accent-muted);
  border-color: var(--color-tertiary);
}

.lui-filter-pill--toggle:has(.lui-filter-pill__input:checked):hover {
  background: color-mix(in srgb, var(--color-chrome-accent) 14%, var(--color-background));
}

.lui-filter-pill--toggle:has(.lui-filter-pill__input:checked) .lui-filter-pill__label {
  color: var(--color-content);
}

.lui-filter-pill-group--segmented .lui-filter-pill--toggle:has(.lui-filter-pill__input:checked) {
  background: var(--color-background);
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-content) 12%, transparent);
}

.lui-filter-pill-group--segmented .lui-filter-pill--toggle:has(.lui-filter-pill__input:checked):hover {
  background: var(--color-background);
  border-color: transparent;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-content) 14%, transparent);
}

.lui-filter-pill--toggle:has(.lui-filter-pill__input:disabled) {
  cursor: not-allowed;
}

/* Index filter toolbar — 28px controls (size-sm), 8px horizontal gap (ADR-025 / datatable filters).
   Prefer one row by shrinking fields; wrap when min-widths no longer fit (tablet/mobile).
   Top-align with trailing Columns. */
.lui-index-toolbar {
  align-items: flex-start;
  gap: 8px;
}

.lui-index-filters {
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.lui-index-toolbar .lui-forms__control,
.lui-index-filters .lui-forms__control,
.lui-catalog-index-table__filters .lui-forms__control {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
  padding-block: 0;
  padding-inline: 10px;
}

/* Grow/shrink from a readable basis; wrap when mins (e.g. min-w-[140px]) exceed the row */
.lui-index-filters > div,
.lui-index-filters > .lui-search,
.lui-catalog-index-table__filters > div,
.lui-catalog-index-table__filters > .lui-search {
  flex: 1 1 10rem;
  max-width: var(--lui-forms-control-max-width, 420px);
}

.lui-index-filters > .lui-index-filters__actions,
.lui-catalog-index-table__filters > .lui-index-filters__actions {
  flex: 0 0 auto;
  max-width: none;
  align-self: flex-start;
}

.lui-index-filters__trailing {
  align-self: flex-start;
}

/* Index filters — Clear is secondary chrome (ghost), not primary content */
.lui-index-filters .lui-index-filters__actions .lui-button--ghost,
.lui-index-filters .lui-button--ghost.lui-button--size-sm:not(.lui-button--icon-only) {
  color: var(--color-content-secondary);
}

.lui-index-filters .lui-index-filters__actions .lui-button--ghost:hover,
.lui-index-filters .lui-button--ghost.lui-button--size-sm:not(.lui-button--icon-only):hover {
  color: var(--color-content);
}

.lui-index-filters > .lui-button,
.lui-catalog-index-table__filters > .lui-button {
  flex-shrink: 0;
  align-self: flex-start;
}

.lui-index-toolbar .lui-index-filters__field--compact,
.lui-index-filters > div.lui-index-filters__field--compact,
.lui-catalog-index-table__filters > div.lui-index-filters__field--compact {
  flex: 0 0 auto;
  width: max-content;
  max-width: min(100%, var(--lui-forms-control-max-width, 420px));
}

/* Size to the longest option (native select intrinsic width). Do not use
   field-sizing:content / calc(max-content + N) — the former clips under
   border-box chevron padding, the latter is invalid and dropped by the UA.
   Native <select> ignores text-overflow; overflow:hidden clips with no ellipsis.
   min-width 12rem covers i18n empty labels (Todas as situações / tentativas);
   max-content still grows for longer options. Prefer wrap (flex-shrink: 0)
   over shrinking when the toolbar is narrow. */
.lui-index-toolbar .lui-index-filters__field--compact select.lui-forms__control,
.lui-index-filters > div.lui-index-filters__field--compact select.lui-forms__control,
.lui-catalog-index-table__filters > div.lui-index-filters__field--compact select.lui-forms__control {
  width: max-content;
  min-width: 12rem;
  max-width: 100%;
}

.lui-index-toolbar select.lui-forms__control,
.lui-index-filters select.lui-forms__control,
.lui-catalog-index-table__filters select.lui-forms__control {
  padding-right: 32px;
}

.lui-index-filters .lui-select--sm .lui-forms__composite.lui-select__shell,
.lui-catalog-index-table__filters .lui-select--sm .lui-forms__composite.lui-select__shell {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
}

.lui-index-filters .lui-select--compact-filter .lui-forms__composite.lui-select__shell,
.lui-index-filters .lui-select--compact-filter .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi),
.lui-catalog-index-table__filters .lui-select--compact-filter .lui-forms__composite.lui-select__shell {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
}

.lui-index-filters .lui-select--compact-filter .lui-select__control,
.lui-catalog-index-table__filters .lui-select--compact-filter .lui-select__control {
  height: 100%;
  padding-block: 0;
  flex-wrap: nowrap;
}

.lui-index-toolbar .lui-index-filters__field--compact .lui-select,
.lui-index-filters > div.lui-index-filters__field--compact .lui-select,
.lui-catalog-index-table__filters > div.lui-index-filters__field--compact .lui-select {
  width: max-content;
  min-width: 12rem;
  max-width: 100%;
}

@media (hover: hover) {
  .lui-index-filters .lui-select__clear:not([hidden]),
  .lui-catalog-index-table__filters .lui-select__clear:not([hidden]),
  .lui-index-toolbar .lui-select__clear:not([hidden]) {
    opacity: 0;
    pointer-events: none;
  }

  .lui-index-filters .lui-select:hover .lui-select__clear:not([hidden]),
  .lui-index-filters .lui-select:focus-within .lui-select__clear:not([hidden]),
  .lui-catalog-index-table__filters .lui-select:hover .lui-select__clear:not([hidden]),
  .lui-catalog-index-table__filters .lui-select:focus-within .lui-select__clear:not([hidden]),
  .lui-index-toolbar .lui-select:hover .lui-select__clear:not([hidden]),
  .lui-index-toolbar .lui-select:focus-within .lui-select__clear:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Index layout — loading overlay while filter forms submit */
.lui-index-layout--filters-loading .lui-index-filters {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.lui-index-layout__content {
  position: relative;
}

.lui-index-layout__content--loading .lui-index-table {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.lui-index-layout__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lui-index-layout__loading[hidden] {
  display: none !important;
}

.lui-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* LooposUi::Spinner — Material `progress_activity`. `animate-spin` is a
   leftover Tailwind class still on the glyph; both must spin (keyframes
   `lui-spin` are defined with the button spinner). */
.lui-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: var(--color-content-secondary);
  animation: lui-spin 0.6s linear infinite;
}

.lui-spinner--default {
  width: 16px;
  height: 16px;
}

.lui-spinner--small {
  width: 14px;
  height: 14px;
}

.lui-spinner--tiny {
  width: 12px;
  height: 12px;
}

.lui-spinner--dark {
  color: var(--color-content);
}

.lui-spinner--light {
  color: var(--color-background);
}

.animate-spin {
  animation: lui-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lui-spinner,
  .animate-spin {
    animation: none;
  }
}

.lui-index-table [data-column-key].lui-table__col--hidden,
.lui-index-table [data-column-key][hidden] {
  display: none !important;
}

.lui-column-picker__menu .lui-checkbox {
  width: 100%;
}

/* Search inside index filters — 28px composite (size-sm, matches filter toolbar) */
.lui-index-filters .lui-search__field,
.lui-index-filters .lui-forms__composite.lui-search__field,
.lui-catalog-index-table__filters .lui-search__field,
.lui-catalog-index-table__filters .lui-forms__composite.lui-search__field {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
  padding: 0 4px 0 10px;
}

.lui-index-filters .lui-search__field .lui-forms__control,
.lui-index-filters .lui-forms__composite.lui-search__field .lui-forms__control,
.lui-catalog-index-table__filters .lui-search__field .lui-forms__control,
.lui-catalog-index-table__filters .lui-forms__composite.lui-search__field .lui-forms__control {
  height: 100%;
  min-height: 0;
  padding: 0;
}

.lui-datatable-host {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.lui-catalog-index-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Native select chevron — original expand_more SVG.
   Data-URL fill cannot use CSS variables (`currentColor` bakes to black).
   Fills match --color-content-secondary per theme (light #6d6d6d, dark #888888). */
.lui-forms__control--select,
select.lui-forms__control {
  appearance: none;
  color: var(--color-content);
  --lui-select-chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d6d6d'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10z'/%3E%3C/svg%3E");
  background-image: var(--lui-select-chevron-url);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 32px;
}

:root[data-theme="dark"] .lui-forms__control--select,
:root[data-theme="dark"] select.lui-forms__control {
  --lui-select-chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4L17.4 10z'/%3E%3C/svg%3E");
}

/* Protocol answer form — select/bool/multi as choice cards.
 *
 * Escrito sobre o markup do design system (`lui-radio`, `lui-checkbox`), não
 * sobre marcação própria: o que muda é a **caixa** à volta do controlo, e o
 * radio continua a ser o do kit. Trocar o partial por HTML cru para ganhar
 * isto era drift sem contrapartida.
 *
 * ⚠️ Scoped a `.protocol-answer-form`, nunca a `.lui-radio-group` solto. Essa
 * classe é usada por todo o lado na app e transformar todos os grupos de radio
 * em cartões não é uma decisão desta feature.
 *
 * Layout: uma opção por linha. O wrap horizontal partia o rótulo a meio no
 * telemóvel e na coluna estreita do wizard. A coluna do kit (`.lui-radio-group`)
 * é a que fica.
 *
 * ⚠️ Não vale para o portal de consumidor de uma app: esse não carrega esta
 * folha (ADR-026) e passa `css[:form]`/`css[:bool]` próprios, com o seu
 * próprio tratamento de cartão no CSS do pack. */
.protocol-answer-form .lui-radio-group,
.protocol-answer-form .protocol-answer-bool {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* «Outro» / «Other» names itself under the option, same as the intake fault step. */
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:has(+ .protocol-answer-other:not([hidden])) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.protocol-answer-form .protocol-answer-other {
  box-sizing: border-box;
  margin-top: -8px;
  padding: 0 14px 12px;
  border: 1px solid var(--color-tertiary);
  border-top: none;
  border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px);
  background: var(--color-secondary);
}

.protocol-answer-form .protocol-answer-other[hidden] { display: none; }

.protocol-answer-form .protocol-answer-other .lui-forms__control {
  width: 100%;
}

.protocol-answer-form .protocol-answer-other .lui-forms__label,
.protocol-answer-form .protocol-answer-other .protocol-answer-label {
  margin: 0 0 4px;
  font-size: 0;
  line-height: 0;
}

.protocol-answer-form .protocol-answer-other .lui-forms__required,
.protocol-answer-form .protocol-answer-other .protocol-answer-required {
  font-size: 13px;
  line-height: 18px;
}

.protocol-answer-row.protocol-answer-other-source {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.protocol-answer-form .lui-radio-group .lui-radio,
.protocol-answer-form .protocol-answer-bool > .lui-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

/* Choice cards: show the kit radio circle; card carries border/background chrome. */
.protocol-answer-form .lui-radio-group .lui-radio .lui-radio__control {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  position: relative;
}

.protocol-answer-form .lui-radio-group .lui-radio:hover,
.protocol-answer-form .lui-radio-group .lui-radio:has(.lui-radio__input:hover),
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:hover {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

.protocol-answer-form .lui-radio-group .lui-radio:has(input:checked),
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:has(input:checked) {
  border-color: var(--color-tertiary);
  background: var(--color-secondary);
}

.protocol-answer-form .lui-radio-group .lui-radio:has(input:checked):hover,
.protocol-answer-form .lui-radio-group .lui-radio:has(input:checked):has(.lui-radio__input:hover),
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:has(input:checked):hover {
  border-color: var(--color-tertiary);
  background: color-mix(in srgb, var(--color-content) 6%, var(--color-background));
}

.protocol-answer-form .lui-radio-group .lui-radio:has(input:focus-visible),
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:has(input:focus-visible) {
  outline: 2px solid var(--color-content);
  outline-offset: 2px;
}

.protocol-answer-form .lui-radio-group .lui-radio:has(input:disabled):not(:has(input:checked)),
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:has(input:disabled):not(:has(input:checked)) {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Locked record (after Agendar visita): the chosen card stays filled.
   Fading every disabled option the same way reads as an empty answer. */
.protocol-answer-form .lui-radio-group .lui-radio:has(input:checked:disabled),
.protocol-answer-form .protocol-answer-bool > .lui-checkbox:has(input:checked:disabled) {
  cursor: not-allowed;
}

/* O multi-select usa o mesmo `lui-checkbox` do kit. O cartão é a caixa; o
   quadrado continua a ser o do componente. */
.protocol-answer-form .protocol-answer-bool > .lui-checkbox .lui-checkbox__text {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
}

.protocol-answer-form .protocol-answer-bool > .lui-checkbox .lui-checkbox__label {
  flex: 1 1 auto;
}

.protocol-answer-form .protocol-answer-option-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.protocol-answer-form .protocol-answer-option-label {
  flex: 1 1 auto;
}

.protocol-answer-form .protocol-answer-option-info {
  position: relative;
  z-index: 1;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  border: 1px solid var(--color-content-secondary);
  border-radius: 50%;
  background: transparent;
  color: var(--color-content-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  cursor: help;
}

.protocol-answer-form .protocol-answer-option-info[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: calc(100% + 6px);
  width: max-content;
  max-width: min(280px, 70vw);
  padding: 8px 10px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-content);
  color: var(--color-background);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
}

.protocol-answer-form .protocol-answer-option-info:hover::after,
.protocol-answer-form .protocol-answer-option-info:focus-visible::after {
  opacity: 1;
  transform: none;
}

.protocol-answer-form .lui-radio-group .lui-radio__text {
  flex: 1 1 auto;
}

/* ⚠️ A caixa inteira tem de responder ao clique. `.lui-radio` é uma `div`: o que
   activa a opção é o radio nativo e o texto do `<label for>`, e o controller
   `lui--radio` só escuta `keydown` e `change`. Desenhada como cartão de 48px, o
   padding e o espaço à direita do texto ficam mortos — clica-se no cartão, não
   acontece nada, clica-se outra vez em cima da palavra e resulta. Lê-se como um
   formulário avariado. O `::after` do label cobre o cartão, por isso qualquer
   clique dentro dele é um clique no label. O `protocol-answer-bool > label` não
   precisa: aí o próprio label já é a caixa.

   Reportado na UAT de 2026-08-18, no portal de consumidor de uma app (mesmo
   markup). */
.protocol-answer-form .lui-radio-group .lui-radio__label::after,
.protocol-answer-form .protocol-answer-bool > .lui-checkbox .lui-checkbox__label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Corpo de um elemento Info. Vem por `simple_format`, logo são `<p>` e não uma
   linha só — há protocolos de diagnóstico que escrevem os conselhos como
   listas de bullets separadas por `\n`. */
.protocol-answer-info-body p {
  margin: 0 0 4px;
}

.protocol-answer-info-body p:last-child {
  margin-bottom: 0;
}

.lui-forms__helper {
  color: var(--color-content-secondary);
  padding: 0 4px;
  margin: 4px 0 0;
}

.lui-forms__error {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-danger-fg);
  padding: 0 4px;
  margin: 4px 0 0;
}

.lui-forms__group.is-error .lui-forms__label { color: var(--color-danger-fg); }

.lui-forms__group.is-error .lui-forms__control,
.lui-forms__control[aria-invalid="true"] {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
}

.lui-forms__group.is-error .lui-forms__control:focus-visible,
.lui-forms__control[aria-invalid="true"]:focus-visible {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px var(--color-danger);
}

/* Composite control — password toggle, Tom Select, addons */
.lui-forms__composite {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  height: var(--lui-control-height-md);
  padding: 0 8px;
  border-radius: 6px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.lui-forms__composite--xs { height: var(--lui-control-height-xs); padding: 0 6px; }
.lui-forms__composite--sm { height: var(--lui-control-height-sm); padding: 0 6px; }
.lui-forms__composite--lg { height: var(--lui-control-height-lg); padding: 0 12px; }

.lui-forms__composite:focus-within:has(:focus-visible) {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-forms__composite.is-error,
.lui-forms__composite--error { border-color: var(--color-danger); }

.lui-forms__composite.is-error:focus-within:has(:focus-visible),
.lui-forms__composite--error:focus-within:has(:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-danger);
}

.lui-forms__composite.is-disabled,
.lui-forms__composite--disabled { opacity: 0.5; }

.lui-forms__composite .lui-forms__control,
.lui-forms__composite .lui-password__input {
  flex: 1;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  border: none;
  padding: 6px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.lui-forms__composite .lui-forms__control:focus,
.lui-forms__composite .lui-forms__control:focus-visible,
.lui-forms__composite .lui-password__input:focus,
.lui-forms__composite .lui-password__input:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.lui-forms__composite .lui-forms__control:-webkit-autofill,
.lui-forms__composite .lui-forms__control:-webkit-autofill:hover,
.lui-forms__composite .lui-forms__control:-webkit-autofill:focus,
.lui-forms__composite .lui-password__input:-webkit-autofill,
.lui-forms__composite .lui-password__input:-webkit-autofill:hover,
.lui-forms__composite .lui-password__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset !important;
  box-shadow: 0 0 0 1000px var(--color-background) inset !important;
}

.lui-forms__addon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 8px;
  color: var(--color-content-secondary);
  background: transparent;
}

.lui-forms__addon--left { border-right: 1px solid var(--color-tertiary); margin-left: -8px; }
.lui-forms__addon--right { border-left: 1px solid var(--color-tertiary); margin-right: -8px; }

/* Search bar — lui-search (native) */
.lui-search { width: 100%; }

/* Partner Services search — placeholder and value ellipsize when the field is narrower than the copy. */
.lui-search--truncate {
  min-width: 0;
}

.lui-search--truncate .lui-search__field,
.lui-search--truncate .lui-forms__composite.lui-search__field {
  min-width: 0;
  overflow: hidden;
}

.lui-search--truncate .lui-forms__control {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lui-search--truncate .lui-forms__control::placeholder {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lui-search--truncate .lui-forms__control:focus {
  text-overflow: clip;
}

.lui-search__icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
  pointer-events: none;
}

.lui-search__field,
.lui-forms__composite.lui-search__field {
  gap: 4px;
  padding: 0 4px 0 10px;
  height: var(--lui-control-height-md);
}

.lui-search--xs .lui-forms__composite.lui-search__field,
.lui-forms__composite.lui-search__field.lui-forms__composite--xs {
  height: var(--lui-control-height-xs);
}

.lui-search--sm .lui-forms__composite.lui-search__field,
.lui-forms__composite.lui-search__field.lui-forms__composite--sm {
  height: var(--lui-control-height-sm);
}

.lui-search--lg .lui-forms__composite.lui-search__field,
.lui-forms__composite.lui-search__field.lui-forms__composite--lg {
  height: var(--lui-control-height-lg);
}

.lui-search__field .lui-forms__control,
.lui-forms__composite.lui-search__field .lui-forms__control {
  height: 100%;
  min-height: 0;
  padding: 0;
}

/* Hide native browser clear — lui-search__clear is the only control */
.lui-search__field .lui-forms__control[type="search"]::-webkit-search-cancel-button,
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.lui-search__field .lui-forms__control[type="search"]::-webkit-search-decoration,
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

.lui-search__field .lui-forms__control[type="search"]::-moz-search-clear-button,
.lui-forms__composite.lui-search__field .lui-forms__control[type="search"]::-moz-search-clear-button {
  display: none;
}

.lui-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.lui-search--lg .lui-search__clear,
.lui-forms__composite--lg .lui-search__clear {
  width: 24px;
  height: 24px;
}

.lui-search__clear .material-symbols-rounded {
  font-size: 14px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-search__clear:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-search__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-search__clear[hidden] { display: none; }

.lui-forms__group--floating .lui-forms__control {
  padding-top: 18px;
  padding-bottom: 6px;
}

.lui-forms__group--floating .lui-forms__label {
  position: absolute;
  top: 10px;
  left: 12px;
  margin: 0;
  color: var(--color-content-secondary);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 120ms ease, color 120ms ease;
}

.lui-forms__group--floating .lui-forms__control:focus + .lui-forms__label,
.lui-forms__group--floating .lui-forms__control:not(:placeholder-shown) + .lui-forms__label,
.lui-forms__group--floating.is-filled .lui-forms__label {
  transform: translateY(-8px) scale(0.8);
  color: var(--color-content);
}

.login__input { min-height: var(--lui-control-height-lg); }

/* Checkbox — loopos-ui-v2 (Rails Blocks checkbox) */
.lui-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  color: var(--color-content);
}

.lui-checkbox__input,
.lui-checkbox > input[type="checkbox"]:not(.lui-checkbox__input) {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.lui-checkbox__input:disabled,
.lui-checkbox > input[type="checkbox"]:disabled:not(.lui-checkbox__input) {
  cursor: not-allowed;
}

.lui-checkbox__control {
  position: relative;
  display: inline-flex;
  flex: none;
}

.lui-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  color: var(--color-app-fg);
  transition: background 120ms ease, border-color 120ms ease;
  pointer-events: none;
}

.lui-checkbox__mark,
.lui-checkbox__box .material-symbols-rounded {
  font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 20;
  line-height: 1;
  transform: scale(0.6);
  opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease;
}

.lui-checkbox__input:not(:disabled):hover ~ .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:not(:disabled):not(.lui-checkbox__input):hover + .lui-checkbox__box {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

.lui-checkbox__input:checked:not(:disabled):hover ~ .lui-checkbox__box,
.lui-checkbox__input:indeterminate:not(:disabled):hover ~ .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:checked:not(:disabled):not(.lui-checkbox__input):hover + .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:indeterminate:not(:disabled):not(.lui-checkbox__input):hover + .lui-checkbox__box {
  background: var(--color-app);
  border-color: var(--color-app);
  filter: brightness(1.08);
}

.lui-checkbox__input:checked ~ .lui-checkbox__box,
.lui-checkbox__input:indeterminate ~ .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:checked:not(.lui-checkbox__input) + .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:indeterminate:not(.lui-checkbox__input) + .lui-checkbox__box {
  background: var(--color-app);
  border-color: var(--color-app);
}

.lui-checkbox__input:checked ~ .lui-checkbox__box .lui-checkbox__mark,
.lui-checkbox__input:indeterminate ~ .lui-checkbox__box .lui-checkbox__mark,
.lui-checkbox > input[type="checkbox"]:checked:not(.lui-checkbox__input) + .lui-checkbox__box .material-symbols-rounded,
.lui-checkbox > input[type="checkbox"]:indeterminate:not(.lui-checkbox__input) + .lui-checkbox__box .material-symbols-rounded {
  opacity: 1;
  transform: scale(1);
}

.lui-checkbox__input:focus-visible ~ .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:focus-visible:not(.lui-checkbox__input) + .lui-checkbox__box {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-checkbox__input:disabled ~ .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:disabled:not(.lui-checkbox__input) + .lui-checkbox__box {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

/* FLUX-10 (G) — pre-existing loopos-ui-v2 gap surfaced by the equipment
   picker's "já associado" rows (checked + disabled together): `:checked`
   and `:disabled` alone have equal specificity, so `:disabled` (declared
   later) silently won the background and left a white checkmark on a
   near-white box — invisible in light theme. A `:checked:disabled` pair is
   more specific than either alone, so this wins regardless of source order
   and keeps the checked fill, just dimmed like every other disabled control. */
.lui-checkbox__input:checked:disabled ~ .lui-checkbox__box,
.lui-checkbox__input:indeterminate:disabled ~ .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:checked:disabled:not(.lui-checkbox__input) + .lui-checkbox__box,
.lui-checkbox > input[type="checkbox"]:indeterminate:disabled:not(.lui-checkbox__input) + .lui-checkbox__box {
  background: var(--color-app);
  border-color: var(--color-app);
  opacity: 0.6;
}

.lui-checkbox__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-checkbox__label-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
}

.lui-checkbox__label {
  color: var(--color-content);
  cursor: pointer;
}

.lui-checkbox__hint-icon {
  display: inline-flex;
  color: var(--color-content-secondary);
  cursor: help;
}

.lui-checkbox__hint-icon .material-symbols-rounded {
  font-size: 16px;
  line-height: 1;
}

.lui-checkbox__description {
  color: var(--color-content-secondary);
  margin-top: 2px;
}

.lui-checkbox__required,
.lui-form-entry__required {
  color: var(--color-danger);
}

.lui-checkbox__error {
  color: var(--color-danger-fg);
  margin-top: 2px;
}

.lui-checkbox--error .lui-checkbox__input:not(:checked) ~ .lui-checkbox__box {
  border-color: var(--color-danger);
}

.lui-checkbox--sm .lui-checkbox__box { width: 14px; height: 14px; }
.lui-checkbox--sm .lui-checkbox__mark,
.lui-checkbox--sm .lui-checkbox__box .material-symbols-rounded { font-size: 14px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 14; }

.lui-checkbox--md .lui-checkbox__box { width: 16px; height: 16px; }
.lui-checkbox--md .lui-checkbox__mark,
.lui-checkbox--md .lui-checkbox__box .material-symbols-rounded { font-size: 16px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 16; }

.lui-checkbox--lg .lui-checkbox__box { width: 20px; height: 20px; }
.lui-checkbox--lg .lui-checkbox__mark,
.lui-checkbox--lg .lui-checkbox__box .material-symbols-rounded { font-size: 18px; font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 18; }

/* :root keeps the weight these rules had over the old icon-reveal rule — mark must stay on brand foreground */
:root .lui-checkbox__box .lui-checkbox__mark,
:root .lui-checkbox__input:checked ~ .lui-checkbox__box .material-symbols-rounded,
:root .lui-checkbox > input[type="checkbox"]:checked:not(.lui-checkbox__input) + .lui-checkbox__box .material-symbols-rounded {
  color: var(--color-app-fg);
}

/* Flux/loopos dark: `--color-app` is the same gray-950 as the page background, so a
   checked box would melt into it. Keep the black fill (brand) and delimit it with a
   border — same trick the chrome accents use, without changing the fill colour. */
:root[data-theme="dark"][data-app="flux"] .lui-checkbox__input:checked ~ .lui-checkbox__box,
:root[data-theme="dark"][data-app="flux"] .lui-checkbox__input:indeterminate ~ .lui-checkbox__box,
:root[data-theme="dark"][data-app="flux"] .lui-checkbox > input[type="checkbox"]:checked:not(.lui-checkbox__input) + .lui-checkbox__box,
:root[data-theme="dark"][data-app="flux"] .lui-checkbox > input[type="checkbox"]:indeterminate:not(.lui-checkbox__input) + .lui-checkbox__box,
:root[data-theme="dark"][data-app="loopos"] .lui-checkbox__input:checked ~ .lui-checkbox__box,
:root[data-theme="dark"][data-app="loopos"] .lui-checkbox__input:indeterminate ~ .lui-checkbox__box,
:root[data-theme="dark"][data-app="loopos"] .lui-checkbox > input[type="checkbox"]:checked:not(.lui-checkbox__input) + .lui-checkbox__box,
:root[data-theme="dark"][data-app="loopos"] .lui-checkbox > input[type="checkbox"]:indeterminate:not(.lui-checkbox__input) + .lui-checkbox__box,
:root[data-theme="dark"][data-app="flux"] .lui-checkbox-select-all__input:checked ~ .lui-checkbox-select-all__box,
:root[data-theme="dark"][data-app="flux"] .lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box,
:root[data-theme="dark"][data-app="loopos"] .lui-checkbox-select-all__input:checked ~ .lui-checkbox-select-all__box,
:root[data-theme="dark"][data-app="loopos"] .lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box {
  border-color: var(--color-content-secondary);
}

/* Radio — loopos-ui-v2 (Rails Blocks radio; painted circle + inner dot, not a glyph) */
.lui-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.lui-radio-group__legend {
  color: var(--color-content);
  margin: 0 0 4px;
  padding: 0;
}

/* Choice cards — exclusive answers with a ≥44px target (visit part outcomes).
   The painted radio stays; the card is the hit area. Tones tint the selected card. */
.lui-radio-group--cards {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.lui-radio-group--cards > .lui-radio {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 calc(50% - 8px);
  align-items: center;
  min-width: 8.5rem;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-radio-group--cards > .lui-radio[data-selected="true"],
.lui-radio-group--cards > .lui-radio:has(.lui-radio__input:checked) {
  border-color: var(--color-content);
  background: var(--color-secondary);
}

.lui-radio-group--cards > .lui-radio.lui-choice-card--positive[data-selected="true"],
.lui-radio-group--cards > .lui-radio.lui-choice-card--positive:has(.lui-radio__input:checked) {
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), transparent);
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), transparent);
  color: var(--color-success-fg);
}

.lui-radio-group--cards > .lui-radio.lui-choice-card--negative[data-selected="true"],
.lui-radio-group--cards > .lui-radio.lui-choice-card--negative:has(.lui-radio__input:checked) {
  border-color: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), transparent);
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), transparent);
  color: var(--color-danger-fg);
}

.lui-radio-group--cards > .lui-radio:has(.lui-radio__input:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lui-radio-group--cards > .lui-radio[data-blocked="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.lui-radio-group--cards > .lui-radio[data-blocked="true"] .lui-radio__input {
  cursor: not-allowed;
}

.lui-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  color: var(--color-content);
}

.lui-radio__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.lui-radio__input:disabled {
  cursor: not-allowed;
}

.lui-radio__control {
  position: relative;
  display: inline-flex;
  flex: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.lui-radio__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  transition: background 120ms ease, border-color 120ms ease;
  pointer-events: none;
}

.lui-radio__dot {
  border-radius: 9999px;
  background: var(--color-app-fg);
  transform: scale(0);
  opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease;
}

.lui-radio__input:checked:hover ~ .lui-radio__circle {
  background: var(--color-app);
  border-color: var(--color-app);
}

.lui-radio__input:not(:disabled):not(:checked):hover ~ .lui-radio__circle {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

.lui-radio__input:checked ~ .lui-radio__circle {
  background: var(--color-app);
  border-color: var(--color-app);
}

.lui-radio__input:checked ~ .lui-radio__circle .lui-radio__dot {
  opacity: 1;
  transform: scale(1);
}

.lui-radio__input:focus-visible ~ .lui-radio__circle {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-radio__input:disabled:not(:checked) ~ .lui-radio__circle {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.lui-radio__input:checked:disabled ~ .lui-radio__circle {
  background: var(--color-app);
  border-color: var(--color-app);
}

.lui-radio__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-radio__label {
  color: var(--color-content);
  cursor: pointer;
  margin: 0;
}

.lui-radio__description {
  color: var(--color-content-secondary);
  margin: 2px 0 0;
}

.lui-radio__required {
  color: var(--color-danger);
}

.lui-radio__error {
  color: var(--color-danger-fg);
  margin: 2px 0 0;
}

.lui-radio--error .lui-radio__input:not(:checked) ~ .lui-radio__circle {
  border-color: var(--color-danger);
}

.lui-radio--sm .lui-radio__control { height: 16px; }
.lui-radio--sm .lui-radio__circle { width: 14px; height: 14px; }
.lui-radio--sm .lui-radio__dot { width: 6px; height: 6px; }

.lui-radio--md .lui-radio__control { height: 18px; }
.lui-radio--md .lui-radio__circle { width: 16px; height: 16px; }
.lui-radio--md .lui-radio__dot { width: 6px; height: 6px; }

.lui-radio--lg .lui-radio__control { height: 20px; }
.lui-radio--lg .lui-radio__circle { width: 20px; height: 20px; }
.lui-radio--lg .lui-radio__dot { width: 8px; height: 8px; }

/* Skeleton — lui-skeleton
   @flux-sync: gallery.html #view-skeleton inline <style> + rails-blocks/components/skeleton.md */
.lui-skeleton {
  display: block;
  background: color-mix(in srgb, var(--color-content) 12%, var(--color-background));
  width: 100%;
  height: 16px;
  border-radius: 6px;
}

.lui-skeleton--text      { width: 100%; height: 16px; border-radius: 6px; }
.lui-skeleton--circle    { width: 40px;  height: 40px; border-radius: 9999px; }
.lui-skeleton--rectangle { width: 100%; height: 80px; border-radius: 6px; }
.lui-skeleton--image     { width: 100%; height: 192px; border-radius: 6px; }
.lui-skeleton--button    { width: 96px; height: var(--lui-control-height-lg); border-radius: 6px; }
.lui-skeleton--input     { width: 100%; height: var(--lui-control-height-md); border-radius: 6px; }
.lui-skeleton--input--xs { height: var(--lui-control-height-xs); }
.lui-skeleton--input--sm { height: var(--lui-control-height-sm); }
.lui-skeleton--input--lg { height: var(--lui-control-height-lg); }

@keyframes lui-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.lui-skeleton--animated {
  animation: lui-skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lui-skeleton--animated { animation: none; }
}

/* Badge — lui-badge (Rails Blocks structure + LoopOS tokens) */
.lui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  box-sizing: border-box;
}

.lui-badge.w-full {
  width: 100%;
  justify-content: center;
}

.lui-badge--sm { gap: 2px; padding: 2px 6px; line-height: 14px; }
.lui-badge--icon-only { gap: 0; padding: 2px; }
.lui-badge--sm.lui-badge--icon-only { padding: 2px; }
.lui-badge--mono { font-family: var(--font-mono); }
.lui-badge--mono .copy-12-mono,
.lui-badge--mono.lui-table__link {
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Entity badge links — inherit variant fg; table__link alone forces --color-content */
.lui-badge .lui-table__link {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.lui-badge .lui-table__link:hover {
  color: var(--color-chrome-accent);
}
.lui-badge--pill { border-radius: 9999px; }
.lui-badge--has-addon { padding-left: 8px; padding-right: 6px; }
.lui-badge--sm.lui-badge--has-addon { padding-left: 6px; padding-right: 4px; }

.lui-badge--neutral {
  --lui-badge-bg: var(--color-secondary);
  --lui-badge-fg: var(--color-content-secondary);
  --lui-badge-outline: var(--color-tertiary);
  --lui-badge-dot: var(--color-content-secondary);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-content-secondary) 10%, var(--color-background));
  --lui-badge-remove-fg: var(--color-content-secondary);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-content-secondary) 18%, var(--color-tertiary));
}

.lui-badge--red, .lui-badge--danger {
  --lui-badge-bg: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  --lui-badge-fg: var(--color-danger-fg);
  --lui-badge-outline: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
  --lui-badge-dot: var(--color-danger);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength-strong), var(--color-background));
  --lui-badge-remove-fg: var(--color-danger-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-danger) 20%, var(--color-tertiary));
}

.lui-badge--orange {
  --lui-badge-bg: color-mix(in srgb, var(--color-orange) var(--color-tint-bg-strength-strong), var(--color-background));
  --lui-badge-fg: var(--color-orange-fg);
  --lui-badge-outline: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength-strong), var(--color-tertiary));
  --lui-badge-dot: var(--color-orange);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-orange) 26%, var(--color-background));
  --lui-badge-remove-fg: var(--color-orange-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-badge--yellow, .lui-badge--warning {
  --lui-badge-bg: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength-subtle), var(--color-background));
  --lui-badge-fg: var(--color-warning-fg);
  --lui-badge-outline: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength-subtle), var(--color-tertiary));
  --lui-badge-dot: var(--color-warning);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-warning) 16%, var(--color-background));
  --lui-badge-remove-fg: var(--color-warning-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength-subtle), var(--color-tertiary));
}

.lui-badge--green, .lui-badge--success {
  --lui-badge-bg: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  --lui-badge-fg: var(--color-success-fg);
  --lui-badge-outline: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
  --lui-badge-dot: var(--color-success);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength-strong), var(--color-background));
  --lui-badge-remove-fg: var(--color-success-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-success) 20%, var(--color-tertiary));
}

.lui-badge--blue, .lui-badge--informative {
  --lui-badge-bg: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
  --lui-badge-fg: var(--color-informative-fg);
  --lui-badge-outline: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
  --lui-badge-dot: var(--color-informative);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength-strong), var(--color-background));
  --lui-badge-remove-fg: var(--color-informative-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-informative) 20%, var(--color-tertiary));
}

.lui-badge--purple {
  --lui-badge-bg: color-mix(in srgb, var(--color-purple) var(--color-tint-bg-strength), var(--color-background));
  --lui-badge-fg: var(--color-purple-fg);
  --lui-badge-outline: color-mix(in srgb, var(--color-purple) var(--color-tint-border-strength), var(--color-tertiary));
  --lui-badge-dot: var(--color-purple);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-purple) var(--color-tint-bg-strength-strong), var(--color-background));
  --lui-badge-remove-fg: var(--color-purple-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-purple) 20%, var(--color-tertiary));
}

.lui-badge--pink {
  --lui-badge-bg: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength-subtle), var(--color-background));
  --lui-badge-fg: color-mix(in srgb, var(--color-danger-fg) 80%, var(--color-warning-fg) 20%);
  --lui-badge-outline: color-mix(in srgb, var(--color-danger) 16%, var(--color-tertiary));
  --lui-badge-dot: var(--color-danger);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-danger) 18%, var(--color-background));
  --lui-badge-remove-fg: var(--color-danger-fg);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-danger) 16%, var(--color-tertiary));
}

.lui-badge--brand {
  --lui-badge-bg: color-mix(in srgb, var(--color-app) var(--color-tint-bg-strength), var(--color-background));
  --lui-badge-fg: var(--color-app);
  --lui-badge-outline: color-mix(in srgb, var(--color-app) var(--color-tint-border-strength), var(--color-tertiary));
  --lui-badge-dot: var(--color-app);
  --lui-badge-remove-bg: color-mix(in srgb, var(--color-app) var(--color-tint-bg-strength-strong), var(--color-background));
  --lui-badge-remove-fg: var(--color-app);
  --lui-badge-remove-outline: color-mix(in srgb, var(--color-app) 20%, var(--color-tertiary));
}

.lui-badge--neutral, .lui-badge--red, .lui-badge--danger, .lui-badge--orange, .lui-badge--yellow, .lui-badge--warning,
.lui-badge--green, .lui-badge--success, .lui-badge--blue, .lui-badge--informative, .lui-badge--purple, .lui-badge--pink, .lui-badge--brand {
  background: var(--lui-badge-bg);
  color: var(--lui-badge-fg);
  border-color: var(--lui-badge-outline);
}

.lui-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--lui-badge-dot);
}

.lui-badge--sm .lui-badge__dot { width: 6px; height: 6px; }

.lui-badge__icon { font-size: 14px; }

.lui-badge__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid var(--lui-badge-remove-outline);
  border-radius: 4px;
  background: var(--lui-badge-remove-bg);
  color: var(--lui-badge-remove-fg);
  cursor: pointer;
  flex-shrink: 0;
}

.lui-badge--pill .lui-badge__remove { border-radius: 9999px; }

.lui-badge__remove:hover { filter: brightness(0.96); }

.lui-badge__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-badge__remove .material-symbols-rounded { font-size: 10px; width: 10px; height: 10px; }
.lui-badge--sm .lui-badge__remove .material-symbols-rounded { font-size: 8px; width: 8px; height: 8px; }

/* Inline edit session — click-to-edit fields + pending-changes float bar */
.lui-inline-edit__field {
  display: flex;
  flex-direction: column;
  gap: 2px; /* label ↔ control */
  scroll-margin-block: 80px;
  border-radius: 6px;
  padding: 2px;
  margin: -2px;
  transition: outline-color 0.15s ease;
}

/* Inline edit — legacy display targets (select display button uses Forms classes above) */
.lui-inline-edit__input--display:not(.lui-forms__control),
.lui-inline-edit__display--editable:not(.lui-forms__control) {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  width: auto;
  max-width: 100%;
  field-sizing: content;
}

.lui-inline-edit__input--display:not(.lui-forms__control):focus-visible,
.lui-inline-edit__display--editable:not(.lui-forms__control):focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.lui-inline-edit__input--display::placeholder {
  color: var(--color-content-secondary);
  font-weight: 400;
}

.lui-inline-edit__display--editable:not(.lui-forms__control):hover {
  color: var(--color-app);
}

.lui-inline-edit__heading.lui-inline-edit__field {
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  margin: -2px;
}

.lui-inline-edit__heading .lui-inline-edit__heading-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
}

/* Show-header subtitle — hug text width like heading; secondary copy weight */
.lui-inline-edit__subtitle.lui-inline-edit__field {
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  margin: -2px;
}

.lui-inline-edit__subtitle .lui-inline-edit__input--subtitle {
  width: auto;
  max-width: 100%;
  min-width: 12ch;
  field-sizing: content;
  color: var(--color-content-secondary);
  font-weight: 400;
}

.lui-inline-edit__field--dirty {
  outline: 1px solid var(--color-tertiary);
  background: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.lui-inline-edit__field--current {
  outline: 2px solid var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

/* Display and edit share the forms textarea floor (80px). A taller edit-only
 * minimum made the control jump the moment it became writable. */
.lui-inline-edit__field textarea.lui-inline-edit__input--edit:not(.lui-autogrow__field),
.lui-inline-edit__field textarea.lui-inline-edit__input--display:not(.lui-autogrow__field) {
  width: 100%;
  min-height: 80px;
}

.lui-inline-edit__field select.lui-inline-edit__input--edit,
.lui-inline-edit__field .lui-inline-edit__input--edit.lui-forms__control {
  width: 100%;
}

.lui-inline-edit__field--select .lui-inline-edit__display--editable {
  display: block;
  width: 100%;
  text-align: left;
}

.lui-inline-edit__field--markdown .lui-inline-edit__display--editable:not([hidden]) {
  display: block;
  width: 100%;
  height: auto;
  text-align: left;
  white-space: normal;
}

.lui-inline-edit__field--markdown [hidden] {
  display: none !important;
}

.lui-inline-edit__field--markdown .page-brief-panel__markdown > :first-child {
  margin-top: 0;
}

.lui-inline-edit__field textarea.lui-inline-edit__input--display {
  resize: none;
}

/* Entity reference inline edit — combobox shell is the control (no badge/combobox swap) */
.lui-inline-edit__field--entity-ref .lui-combobox {
  min-width: 12rem;
  max-width: 100%;
}

.lui-combobox--inline-edit .lui-combobox__shell {
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
}

.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--display,
.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--edit {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--display:hover {
  background: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--edit {
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  background: var(--color-background);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-combobox--inline-edit .lui-combobox__control {
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.lui-combobox--inline-edit .lui-combobox__control:focus-visible,
.lui-combobox--inline-edit .lui-combobox__control[aria-expanded="true"] {
  border: none;
  box-shadow: none;
}

.lui-combobox__entity-badge {
  max-width: 100%;
}

/* Combobox — lui-combobox */
.lui-combobox {
  position: relative;
  width: 100%;
}

.lui-combobox__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.lui-combobox__shell {
  gap: 4px;
  padding: 0 8px;
  width: 100%;
  cursor: pointer;
}

.lui-combobox--xs .lui-forms__composite.lui-combobox__shell {
  height: var(--lui-control-height-xs);
  min-height: var(--lui-control-height-xs);
  padding: 0 6px;
}

.lui-combobox--sm .lui-forms__composite.lui-combobox__shell {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
  padding: 0 6px;
}

.lui-combobox--lg .lui-forms__composite.lui-combobox__shell {
  height: var(--lui-control-height-lg);
  min-height: var(--lui-control-height-lg);
  padding: 0 12px;
}

/* Multi: grow with wrapped chips; keep size floor via min-height */
.lui-forms__composite.lui-combobox__shell:has(.lui-combobox__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-md);
}

.lui-combobox--xs .lui-forms__composite.lui-combobox__shell:has(.lui-combobox__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-xs);
}

.lui-combobox--sm .lui-forms__composite.lui-combobox__shell:has(.lui-combobox__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-sm);
}

.lui-combobox--lg .lui-forms__composite.lui-combobox__shell:has(.lui-combobox__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-lg);
}

.lui-combobox__control {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  color: var(--color-content);
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
}

.lui-combobox__control:has(.lui-combobox__value--multi) {
  height: auto;
  align-self: stretch;
  padding-block: 4px;
}

.lui-combobox__control:focus-visible {
  outline: none;
}

.lui-combobox:has(.lui-combobox__dropdown:not([hidden])) .lui-forms__composite.lui-combobox__shell:focus-within {
  border-color: var(--color-tertiary);
  box-shadow: none;
}

.lui-combobox__control[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--color-content-secondary);
  background: var(--color-primary);
}

.lui-combobox__value {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-combobox__value--multi {
  flex-wrap: wrap;
  row-gap: 4px;
  white-space: normal;
  overflow: hidden;
  max-width: 100%;
}

.lui-combobox__placeholder {
  color: var(--color-content-secondary);
}

.lui-combobox__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 4px 2px 8px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
}

.lui-combobox__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lui-combobox__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: var(--color-content-secondary);
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  padding: 0;
}

.lui-combobox__chip-remove .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-combobox__chip-remove:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 12%, transparent);
}

.lui-combobox__clear,
.lui-combobox__chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
}

.lui-combobox__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.lui-combobox__clear .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

/* Icon lives on an inner span — keep [hidden] reliable on the button (same as .lui-select__clear / search). */
.lui-combobox__clear[hidden] {
  display: none !important;
}

.lui-combobox__clear:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 12%, transparent);
}

.lui-combobox__chevron {
  transition: transform 200ms ease;
}

.lui-combobox__shell:has(.lui-combobox__control[aria-expanded="true"]) .lui-combobox__chevron {
  transform: rotate(180deg);
}

.lui-combobox__dropdown.lui-dropdown__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
}

.lui-combobox__dropdown.lui-dropdown__menu[data-floating="true"] {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
}

/* UA [popover] is inset:0 + margin:auto (viewport-centered). Pin below the trigger. */
.lui-combobox__dropdown.lui-dropdown__menu[popover] {
  inset: unset;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  color: inherit;
}

.lui-combobox__dropdown.lui-dropdown__menu[hidden] {
  display: none !important;
}

.lui-combobox__search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-combobox__search-icon {
  font-size: 14px;
  color: var(--color-content-secondary);
}

.lui-combobox__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  color: var(--color-content);
  border: none;
  font: inherit;
}

.lui-combobox__input::placeholder {
  color: var(--color-content-secondary);
}

.lui-combobox__input:focus-visible {
  outline: none;
}

.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--display .lui-combobox__clear {
  display: none !important;
}

.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--display .lui-combobox__chevron {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity 120ms ease, max-width 120ms ease;
}

.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--display:hover .lui-combobox__chevron,
.lui-combobox--inline-edit .lui-combobox__shell.lui-inline-edit__input--edit .lui-combobox__chevron,
.lui-combobox--inline-edit .lui-combobox__shell:has(.lui-combobox__control[aria-expanded="true"]) .lui-combobox__chevron {
  opacity: 1;
  max-width: 1.125rem;
}

.lui-combobox__list.lui-dropdown__list {
  flex: 1 1 auto;
  margin: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.lui-combobox__list.lui-dropdown__list::-webkit-scrollbar {
  width: 6px;
}

.lui-combobox__list.lui-dropdown__list::-webkit-scrollbar-track {
  background: transparent;
}

.lui-combobox__list.lui-dropdown__list::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 24%, transparent);
  background-clip: content-box;
  border: 1px solid transparent;
  border-radius: 9999px;
}

.lui-combobox__option.lui-dropdown__item {
  justify-content: space-between;
  cursor: pointer;
}

.lui-combobox__option.lui-dropdown__item[hidden] {
  display: none !important;
}

.lui-combobox__option.lui-dropdown__item[data-active="true"],
.lui-combobox__option.lui-dropdown__item:hover {
  background: var(--color-secondary);
}

.lui-combobox__option.lui-dropdown__item[aria-selected="true"] {
  color: var(--color-content);
}

.lui-combobox__option.lui-dropdown__item[aria-disabled="true"] {
  color: var(--color-content-secondary);
  cursor: not-allowed;
}

.lui-combobox__check {
  font-size: 18px;
  color: var(--color-app);
  visibility: hidden;
}

.lui-combobox__option[aria-selected="true"] .lui-combobox__check {
  visibility: visible;
}

.lui-combobox__create {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  margin-top: 4px;
  border-radius: 6px;
  background: transparent;
  color: var(--color-app);
  border: none;
  border-top: 1px solid var(--color-tertiary);
  cursor: pointer;
}

.lui-combobox__create:hover {
  background: color-mix(in srgb, var(--color-app) 8%, transparent);
}

.lui-combobox__create[hidden],
.lui-combobox__empty[hidden] {
  display: none !important;
}

.lui-combobox__empty {
  padding: 12px 10px;
  text-align: center;
  color: var(--color-content-secondary);
}

/* Card — lui-card */
.lui-card {
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  padding: 0;
  color: var(--color-content);
}

.lui-card--padded {
  padding: 12px;
}

.lui-card__header,
.lui-card__body,
.lui-card__footer {
  padding: 12px;
}

.lui-card--well {
  background: var(--color-primary);
  border: none;
}

.lui-card--elevated {
  border: none;
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.10);
}

.lui-card--hoverable {
  transition: box-shadow 120ms ease;
}

.lui-card--hoverable:hover {
  box-shadow: var(--lui-shadow-floating);
}

.lui-card--clickable {
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}

.lui-card--clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-card--divided .lui-card__header,
.lui-card--divided .lui-card__footer {
  background: var(--color-primary);
}

.lui-card__header { border-bottom: 1px solid var(--color-tertiary); }
.lui-card__footer { border-top: 1px solid var(--color-tertiary); }

.lui-card--flush > .lui-card__body {
  padding: 0;
}

.lui-catalog-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.lui-catalog-cards-grid > .lui-catalog-card {
  flex: 1 1 280px;
  max-width: 100%;
}

.lui-catalog-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.lui-catalog-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-catalog-card__stat dd {
  margin: 0;
}

/* Agents catalog — sections + partner-agent tile chrome */
.lui-agent-library-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lui-agent-library-section__title {
  margin: 0 0 12px;
}

.lui-library-tile__partner-prompt,
.lui-agent-library-card__partner-prompt {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-informative-fg);
}

.lui-library-tile__partners,
.lui-agent-library-card__partners {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-library-tile__partner-tags,
.lui-agent-library-card__partner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lui-library-tile__partner-tag,
.lui-agent-library-card__partner-tag {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
}

.lui-library-tile__actions,
.lui-agent-library-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ADR-100 — the two docs icon-links (requirements, architecture) a card shows
   when its app declares `docs` in the manifest. Quiet until hovered: they sit
   next to the tile's title, and a catalogue of forty apps should not read as
   eighty links. */
.lui-library-tile__docs {
  flex-shrink: 0;
}

.lui-library-tile__docs-link {
  padding: 2px;
  border-radius: 4px;
  color: var(--color-content-tertiary);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.lui-library-tile__docs-link:hover {
  color: var(--color-content);
  background: var(--color-secondary);
}

.lui-library-tile__docs-link:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 1px;
}

.lui-agent-library-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lui-agent-library-empty {
  padding: 16px 0;
}

.lui-agent-library-empty--large {
  padding: 48px 16px;
  text-align: center;
}

/* Library tile grid — unified catalog + activation + agent grids */
.lui-library-tile-grid,
.lui-activatable-library-grid,
.lui-agent-library-grid,
.lui-agent-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lui-library-tile-grid__item,
.lui-library-tile-grid > li,
.lui-activatable-library-grid__item,
.lui-activatable-library-grid > li,
.lui-agent-catalog-grid__item,
.lui-agent-catalog-grid > li,
.lui-agent-library-grid__item,
.lui-agent-library-grid > li {
  display: flex;
  min-width: 0;
}

/* Partner Setup hub — compact launcher cards (Partner / Library tabs).
   Fixed tracks so every section shares the same card width. `auto-fill` + `1fr`
   made a 4-card row stretch and a 5-card row shrink, so Catalog types never
   lined up with Automation. */
.lui-setup-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.lui-setup-nav-grid__item {
  display: flex;
  min-width: 0;
}

.lui-setup-nav-grid__item > .lui-card,
.lui-setup-nav-grid__item > a {
  flex: 1 1 auto;
  width: 100%;
}

@media (max-width: 899px) {
  .lui-setup-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .lui-setup-nav-grid {
    grid-template-columns: 1fr;
  }
}

.lui-setup-nav-card {
  position: relative;
}

.lui-setup-nav-card__library-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: auto;
  color: var(--color-content-tertiary);
  cursor: help;
}

.lui-setup-nav-card__library-mark:hover,
.lui-setup-nav-card__library-mark:focus-visible {
  color: var(--color-content-secondary);
}

.lui-setup-nav-card__library-icon.material-symbols-rounded {
  font-size: 16px;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}

.lui-setup-nav-card--disabled {
  opacity: 0.55;
  cursor: default;
}

.lui-setup-nav-card--current {
  border-color: var(--color-chrome-accent);
  background: var(--color-chrome-accent-muted);
}

.lui-setup-nav-card__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-setup-hub {
  display: flex;
  flex-direction: column;
}

.lui-setup-hub__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.lui-setup-hub__group:first-child {
  padding-top: 0;
}

.lui-setup-hub__group:last-child {
  padding-bottom: 0;
}

.lui-setup-hub__group-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-setup-hub__group-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Partner Setup hub — LoopOS Flux Apps workbench */
.lui-setup-apps-workbench {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* A rail split into kind sections needs room for its tiles to sit side by side;
   the narrow rail above is sized for a single flat list. */
.lui-setup-apps-workbench--wide-rail {
  grid-template-columns: minmax(24rem, 34rem) minmax(0, 1fr);
}

.lui-setup-apps-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-setup-apps-rail__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lui-setup-apps-rail__list-item {
  display: flex;
  min-width: 0;
}

.lui-setup-apps-rail__item.lui-library-tile.lui-card {
  height: auto;
  width: 100%;
}

.lui-setup-apps-rail__item .lui-library-tile__title {
  white-space: normal;
}

.lui-setup-apps-rail__description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-setup-apps-rail__item.lui-setup-apps-rail__item--current {
  border-color: var(--color-chrome-accent);
  background: var(--color-chrome-accent-muted);
}

.lui-setup-apps-rail__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-setup-apps-rail__section + .lui-setup-apps-rail__section {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border-tertiary);
}

.lui-setup-apps-rail__section-label {
  padding: 0 4px;
}

/* Grouped rails (integrations by kind) carry many short sections, so the tiles
   flow into as many columns as the rail is wide instead of one tall list. A
   flat rail has a single unlabelled section and stays one column per the
   min track being wider than the narrow rail. */
.lui-setup-apps-rail__section-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: start;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The add form is a section-level action, never one tile among the others. */
.lui-setup-apps-rail__section-list > .lui-setup-apps-rail__add {
  grid-column: 1 / -1;
}

.lui-setup-apps-rail__add {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border-tertiary);
  min-width: 0;
}

.lui-setup-apps-rail__add-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-setup-apps-rail__add-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px dashed var(--color-border-secondary);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lui-setup-apps-rail__add-summary::-webkit-details-marker {
  display: none;
}

.lui-setup-apps-rail__add-details[open] .lui-setup-apps-rail__add-summary {
  border-color: var(--color-chrome-accent);
  color: var(--color-text-primary);
  background: var(--color-chrome-accent-muted);
}

.lui-setup-apps-rail__add-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-md);
  background: var(--color-surface-primary);
}

.lui-setup-apps-pane__empty {
  border: 1px dashed var(--color-border-tertiary);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
}

.lui-setup-apps-pane {
  min-width: 0;
}

.lui-setup-apps-pane > .lui-card,
.lui-setup-apps-pane > .lui-card > .lui-card__body {
  overflow: visible;
  height: auto;
  flex: none;
}

.lui-setup-apps-pane__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lui-setup-apps-pane__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

@media (max-width: 767px) {
  .lui-setup-apps-workbench {
    grid-template-columns: 1fr;
  }

  /* The app title is long enough to squeeze the actions into a 2-line stack on
     a phone — give it the full row and drop the actions underneath. */
  .lui-setup-apps-pane__header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .lui-setup-apps-pane__actions {
    justify-content: flex-end;
  }
}

.lui-library-tile.lui-card,
.lui-activatable-library-card.lui-card,
.lui-flux-app-catalog-card.lui-card,
.lui-agent-library-card.lui-card,
.lui-agent-library-card--panel.lui-card {
  padding: 0;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  height: 100%;
  color: var(--color-content);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  text-decoration: none;
}

.lui-library-tile.lui-card > .lui-card__header,
.lui-activatable-library-card.lui-card > .lui-card__header,
.lui-flux-app-catalog-card.lui-card > .lui-card__header,
.lui-agent-library-card.lui-card > .lui-card__header,
.lui-agent-library-card--panel.lui-card > .lui-card__header {
  border-bottom: 1px solid var(--color-tertiary);
  background: transparent;
}

.lui-library-tile.lui-card > .lui-card__footer,
.lui-activatable-library-card.lui-card > .lui-card__footer,
.lui-flux-app-catalog-card.lui-card > .lui-card__footer,
.lui-agent-library-card.lui-card > .lui-card__footer,
.lui-agent-library-card--panel.lui-card > .lui-card__footer {
  border-top: 1px solid var(--color-tertiary);
  background: transparent;
}

.lui-library-tile__identity,
.lui-activatable-library-card__identity,
.lui-flux-app-catalog-card__identity,
.lui-agent-library-card__identity {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.lui-library-tile__icon,
.lui-activatable-library-card__icon,
.lui-flux-app-catalog-card__icon,
.lui-agent-library-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-foreground);
}

.lui-library-tile__title,
.lui-activatable-library-card__title,
.lui-flux-app-catalog-card__title,
.lui-agent-library-card__title {
  min-width: 0;
}

.lui-library-tile__section,
.lui-activatable-library-card__section,
.lui-flux-app-catalog-card__section {
  min-width: 0;
}

.lui-loopos-ai-symbol-animated {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lui-loopos-ai-symbol-animated {
    animation: none;
  }
}

.lui-agent-library-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  color: var(--color-content-secondary);
  text-decoration: none;
  transition: border-color 120ms ease, color 120ms ease;
}

.lui-agent-library-add-card:hover {
  border-color: var(--color-chrome-accent);
  color: var(--color-content);
}

.lui-agent-library-add-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-agent-library-add-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-foreground);
}

.lui-card__image {
  background: var(--color-secondary);
}
.lui-card__image--square { aspect-ratio: 1 / 1; }
.lui-card__image--video { aspect-ratio: 16 / 9; }
.lui-card__image--wide { aspect-ratio: 21 / 9; }
.lui-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (prefers-reduced-motion: reduce) {
  .lui-card--hoverable { transition: none; }
}

/* Script code editor — CodeMirror 6 surface (loopos-ui-v2 tokens) */
.lui-script-editor {
  width: 100%;
}

.lui-script-editor__surface {
  width: 100%;
  min-height: var(--lui-script-editor-min-height, 480px);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

/* Dashboard — KPI cards, activity, quick links (loopos-ui-v2 §9) */
.lui-kpi {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.lui-kpi--interactive {
  cursor: pointer;
  transition: background var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-kpi--interactive:hover {
  background: var(--color-secondary);
}

.lui-kpi--compact {
  gap: 8px;
  padding: 12px;
}

.lui-kpi--interactive[aria-current="true"] {
  background: var(--color-secondary);
  border-color: var(--color-primary);
}

.lui-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lui-kpi__delta .material-symbols-rounded {
  font-size: 14px;
}

.lui-dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  width: 100%;
}

.lui-dashboard-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px;
  width: 100%;
}

.lui-dashboard-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.lui-dashboard-breakdown-grid > .lui-kpi {
  min-width: 0;
}

.lui-wizard-funnel-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.lui-wizard-funnel-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.lui-wizard-funnel-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lui-wizard-funnel-chart__swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.lui-wizard-funnel-chart__swatch--completed {
  background: var(--color-informative);
}

.lui-wizard-funnel-chart__swatch--dropped {
  background: var(--color-danger);
}

.lui-wizard-funnel-chart__plot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  min-height: 120px;
}

.lui-wizard-funnel-chart__group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lui-wizard-funnel-chart__at-step {
  text-align: center;
  line-height: 1.2;
}

.lui-wizard-funnel-chart__bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.lui-wizard-funnel-chart__bar-slot {
  flex: 1;
  min-width: 0;
  max-width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.lui-wizard-funnel-chart__bar-value {
  line-height: 1;
}

.lui-wizard-funnel-chart__bar-value--completed {
  color: var(--color-informative-fg);
}

.lui-wizard-funnel-chart__bar-value--dropped {
  color: var(--color-danger-fg);
}

.lui-wizard-funnel-chart__bar-track {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 64px;
}

.lui-wizard-funnel-chart__bar {
  display: block;
  width: 100%;
  min-height: 0;
  border-radius: 4px 4px 2px 2px;
}

.lui-wizard-funnel-chart__bar--completed {
  background: var(--color-informative);
}

.lui-wizard-funnel-chart__bar--dropped {
  background: var(--color-danger);
}

.lui-wizard-funnel-chart__label {
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
}

.lui-quick-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-quick-link:hover {
  background: var(--color-secondary);
}

.lui-quick-link__icon.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  vertical-align: unset;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.lui-quick-link__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-quick-link__description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-quick-link .material-symbols-rounded:last-child {
  margin-left: auto;
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-dashboard-activity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  padding: 2px 0;
  transition: background var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-dashboard-activity-row:hover {
  background: var(--color-secondary);
}

.lui-dashboard-activity-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.lui-dashboard-activity-row__time {
  margin-left: auto;
  flex-shrink: 0;
}

/* Activation partner picker — title, search, list stack (no card shell) */
.lui-activation-partner-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-content);
}

.lui-activation-partner-picker .lui-search {
  width: 100%;
}

/* List — loopos-ui-v2 lui-list */
.lui-list {
  position: relative;
  color: var(--color-content);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-list__scroll {
  overflow: auto;
}

.lui-list__scroll--bounded {
  max-height: var(--lui-list-max-height);
  overflow-y: auto;
}

.lui-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lui-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-list__item:first-child {
  border-top: none;
}

.lui-list--hoverable .lui-list__item:hover,
.lui-list--hoverable .lui-list__item:focus-within {
  background: var(--color-secondary);
}

.lui-list__item:focus-within {
  outline: none;
}

.lui-list__item-main {
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.lui-list__item-meta {
  flex-shrink: 0;
}

.lui-list__item-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hover-reveal list actions — mirrors lui-table__actions (shared/list/row_actions) */
.lui-list__item-actions--reveal {
  opacity: 0;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-list__item:hover .lui-list__item-actions--reveal,
.lui-list__item:focus-within .lui-list__item-actions--reveal {
  opacity: 1;
}

@media (hover: none) {
  .lui-list__item-actions--reveal {
    opacity: 1;
  }
}

@media (max-width: 991px) {
  .lui-list__item-actions--reveal {
    opacity: 1;
  }
}

/* Table — Rails Blocks lui-table */
.lui-table {
  position: relative;
  color: var(--color-content);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  /* Clip scroll-edge fades to the rounded padding box so they cannot paint over the border. */
  overflow: hidden;
  /* 10ch of copy + 16px×2 cell padding (border-box). Prefer X-scroll over crushing columns. */
  --lui-table-text-col-floor: calc(10ch + 2rem);
}

.lui-table > .lui-scroll-edge {
  min-width: 0;
  width: 100%;
  border-radius: inherit;
}

.lui-table--plain {
  border: none !important;
  background: transparent !important;
}

.lui-table--no-sticky-head .lui-table__head {
  position: static;
}

/* The agent index — its «Partner agents» and «Library agents» tables share fixed column
   widths (a <colgroup>, percentages of the table) so name, kind, category, origin and
   state start at the same x in both, whatever each holds. Origin keeps room for the
   origin badge + «Shared» + «Configuration». The actions column is the overlay column
   above and takes no width. Below ~1000px the table scrolls sideways rather than
   crushing the columns. */
.lui-table--agents-index .lui-table__table {
  table-layout: fixed;
  min-width: 64rem;
}

.lui-agents-index-col--name { width: 26%; }
.lui-agents-index-col--kind { width: 10%; }
.lui-agents-index-col--category { width: 18%; }
.lui-agents-index-col--origin { width: 30%; }
.lui-agents-index-col--status { width: 16%; }
.lui-agents-index-col--actions { width: 0; }

/* Scroll viewport owns overflow + corner clip + always-visible native scrollbar when X overflows. */
.lui-table__scroll,
.lui-datatable__scroll {
  display: block;
  overflow: auto;
  border-radius: inherit;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--color-content) 45%, transparent)
    color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
}

.lui-table__scroll::-webkit-scrollbar,
.lui-datatable__scroll::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
}

.lui-table__scroll::-webkit-scrollbar-track,
.lui-datatable__scroll::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
}

.lui-table__scroll::-webkit-scrollbar-thumb,
.lui-datatable__scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 45%, transparent);
  border-radius: 9999px;
  border: 3px solid color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
  background-clip: padding-box;
}

.lui-table__scroll::-webkit-scrollbar-thumb:hover,
.lui-datatable__scroll::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--color-content) 60%, transparent);
}

/* Do not JS-toggle overflow-x between auto/scroll — that oscillates with
   scrollbar gutters and freezes the main thread (partner nav becomes unresponsive). */
.lui-table__scroll.lui-scroll-edge__viewport,
.lui-datatable__scroll.lui-scroll-edge__viewport {
  display: block;
  overflow-x: auto;
}

/* Drag-to-scroll (lui--drag-scroll): while the mouse pans a table, the whole
   page shows the grabbing hand and no text gets selected under the pointer. */
html.is-drag-scrolling,
html.is-drag-scrolling * {
  cursor: grabbing !important;
  user-select: none !important;
}

.lui-table__scroll--bounded {
  max-height: var(--lui-table-max-height);
  overflow-y: auto;
}

.lui-table__table {
  width: 100%;
  border-collapse: collapse;
}

.lui-table__caption {
  caption-side: top;
  color: var(--color-content-secondary);
}

.lui-table__head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-primary);
}

.lui-table__head th,
.lui-table__head .lui-table__th {
  padding: 8px 16px;
  text-align: left;
  font-weight: inherit;
  color: var(--color-content-secondary);
  border-bottom: 1px solid var(--color-tertiary);
  vertical-align: middle;
  /* Opaque per-cell fill — thead bg alone can fail under sticky + horizontal scroll. */
  background: var(--color-primary);
}

/* Header labels — single line with ellipsis when column is narrow.
   `max-width: 0` lets flexible columns absorb shrink; `--lui-table-text-col-floor`
   keeps ~10 characters of copy plus padding so ellipsis never leaves a single glyph.
   Lift further with `.lui-table-col-min` when a column needs a real floor
   (metric/short body + longer header). Do not use min-width: max(88px, min-content). */
.lui-table__head th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__th--actions):not(.lui-table__cell--actions):not(.lui-table-col-min),
.lui-table__head .lui-table__th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__th--actions):not(.lui-table__cell--actions):not(.lui-table-col-min),
.lui-datatable__head th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__th--actions):not(.lui-table__cell--actions):not(.lui-table-col-min),
.lui-datatable__head .lui-table__th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__th--actions):not(.lui-table__cell--actions):not(.lui-table-col-min),
.lui-datatable__head .lui-datatable__th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__th--actions):not(.lui-table__cell--actions):not(.lui-table-col-min) {
  max-width: 0;
  min-width: var(--lui-table-text-col-floor, calc(10ch + 2rem));
}

/* Body cells share the readable floor (checkbox / actions / AI summary / col-min excluded).
   Include `.lui-table__body-group` — activation/library catalogs emit one tbody per row. */
.lui-table__body td:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__cell--actions):not(.lui-table__th--actions):not(.lui-table-col-min),
.lui-table__body th[scope="row"]:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__cell--actions):not(.lui-table-col-min),
.lui-table__body-group td:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__cell--actions):not(.lui-table__th--actions):not(.lui-table-col-min),
.lui-table__body-group th[scope="row"]:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__cell--actions):not(.lui-table-col-min),
.lui-datatable__body td:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__cell--actions):not(.lui-table__th--actions):not(.lui-table-col-min),
.lui-datatable__body .lui-datatable__cell:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary):not(.lui-table__cell--actions):not(.lui-table-col-min) {
  min-width: var(--lui-table-text-col-floor, calc(10ch + 2rem));
}

.lui-table__th-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Identity links and truncated copy stay inside the cell (one line + ellipsis).
   Do not set overflow:hidden on every td — quote combobox dropdowns would clip.
   Stacked name+meta opt out with `.flex` on the link. */
.lui-table__cell > .lui-table__link:not(.flex),
.lui-table__cell--primary > .lui-table__link:not(.flex),
.lui-table__cell-media > .lui-table__link:not(.flex),
.lui-datatable__cell > .lui-table__link:not(.flex) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.lui-table__cell > .truncate:not(.flex),
.lui-datatable__cell > .truncate:not(.flex) {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.lui-table__head th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary) > a,
.lui-table__head .lui-table__th:not(.lui-table__cell--checkbox):not(.lui-table__cell--ai-summary) > a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.lui-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 100%;
}

.lui-table__sort > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lui-table__sort-indicator {
  flex-shrink: 0;
  color: var(--color-foreground);
}

.lui-table__th[aria-sort="ascending"] .lui-table__sort-indicator,
.lui-table__th[aria-sort="descending"] .lui-table__sort-indicator {
  color: var(--color-chrome-accent);
}

/* Row dividers + hover — cover both single `.lui-table__body` and per-row `.lui-table__body-group`. */
.lui-table__body tr,
.lui-table__body .lui-table__row,
.lui-table__body-group tr,
.lui-table__body-group .lui-table__row {
  border-top: 1px solid var(--color-tertiary);
}

.lui-table--hoverable .lui-table__body tr:hover,
.lui-table--hoverable .lui-table__body .lui-table__row:hover,
.lui-table--hoverable .lui-table__body-group tr:hover,
.lui-table--hoverable .lui-table__body-group .lui-table__row:hover {
  background: var(--color-secondary);
}

.lui-table__body tr:focus-visible,
.lui-table__body .lui-table__row:focus-visible,
.lui-table__body-group tr:focus-visible,
.lui-table__body-group .lui-table__row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-chrome-accent);
}

.lui-library-table__section-row {
  background: var(--color-secondary);
}

.lui-library-table__section-cell {
  padding-block: 0.625rem;
}

.lui-library-table__section-trigger {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.lui-library-table__section-trigger:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.lui-table--hoverable .lui-library-table__section-row:hover {
  background: var(--color-secondary);
}

.lui-table__body td,
.lui-table__body th[scope="row"],
.lui-table__body-group td,
.lui-table__body-group th[scope="row"],
.lui-table__cell {
  padding: 8px 16px;
  text-align: left;
  vertical-align: middle;
  color: var(--color-content-secondary);
}

.lui-table__cell--top {
  vertical-align: top;
}

.lui-table__cell--primary,
.lui-table__body td.copy-13-medium,
.lui-table__body th[scope="row"],
.lui-table__body-group td.copy-13-medium,
.lui-table__body-group th[scope="row"] {
  color: var(--color-content);
}

.lui-table__cell--right,
.lui-table__head .lui-table__cell--right,
.lui-table__body .lui-table__cell--right,
.lui-table__body-group .lui-table__cell--right {
  text-align: right;
}

.lui-table__cell--center,
.lui-table__head .lui-table__cell--center,
.lui-table__body .lui-table__cell--center,
.lui-table__body-group .lui-table__cell--center,
.lui-datatable__head .lui-table__cell--center,
.lui-datatable__body .lui-table__cell--center {
  text-align: center;
}

.lui-table__head .lui-table__th.lui-table__cell--center .lui-table__sort,
.lui-datatable__head .lui-table__th.lui-table__cell--center .lui-table__sort {
  justify-content: center;
}

.lui-table__body .lui-table__cell--center .lui-table__cell-content,
.lui-table__body-group .lui-table__cell--center .lui-table__cell-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lui-table__head th.lui-table-col-min,
.lui-table__head .lui-table__th.lui-table-col-min,
.lui-datatable__head .lui-table__th.lui-table-col-min {
  max-width: none;
}

/* Selection column — shrink-to-fit; asymmetric padding trims dead space after checkbox.
   Never display:flex on td/th — breaks row height + row dividers (ghost stroke).
   height:1px lets the row stretch the cell; inner wrapper fills height for flex centering. */
.lui-table__th.lui-table__cell--checkbox,
.lui-table__cell.lui-table__cell--checkbox {
  width: 1%;
  max-width: 40px;
  white-space: nowrap;
  padding: 8px 8px 8px 16px;
  vertical-align: middle;
  height: 1px;
}

.lui-table__cell--checkbox .lui-table__cell-checkbox {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 16px;
}

.lui-table__cell--checkbox .lui-checkbox {
  gap: 0;
  margin: 0;
}

.lui-table__cell--checkbox .lui-checkbox__control {
  width: 16px;
  height: 16px;
}

/* Table cell media — thumbnail/image or icon beside primary label */
.lui-table__cell-media {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.lui-table__cell-media--media {
  gap: 8px;
}

/* Table cell token lists — horizontal first, width-fit overflow + tag panel */
.lui-table__token-fit {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.lui-table__token-fit__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-table__token-fit__item {
  flex-shrink: 0;
}

.lui-table__token-fit__overflow {
  flex-shrink: 0;
  display: inline-flex;
}

.lui-table__token-fit__overflow[hidden] {
  display: none !important;
}

.lui-table__token-fit:not(.lui-table__token-fit--ready) .lui-table__token-fit__overflow:not([hidden]) {
  visibility: hidden;
  pointer-events: none;
}

.lui-table__token-fit--ready .lui-table__token-fit__overflow:not([hidden]) {
  cursor: pointer;
  user-select: none;
}

.lui-table__token-fit--ready .lui-table__token-fit__overflow:not([hidden]) .lui-badge,
.lui-table__token-fit--ready .lui-table__token-fit__overflow:not([hidden]) .truncate {
  cursor: pointer;
  user-select: none;
}

.lui-table__token-fit__panel {
  align-items: flex-start;
  padding: 8px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lui-table__token-fit__panel--portaled {
  pointer-events: none;
}

/* Tail of the hover panel when the server capped what it rendered
   (LooposUi::TableTokenList::PANEL_LIMIT, ADR-109): says how many tokens exist
   beyond the ones listed, so the panel and the +N badge cannot disagree. */
.lui-table__token-fit__panel-more {
  align-self: flex-start;
  padding: 2px 4px 0;
  color: var(--color-content-secondary);
}

.lui-table__cell-media--icon {
  gap: 4px;
}

.lui-table--compact .lui-table__head th,
.lui-table--compact .lui-table__body td,
.lui-table--compact .lui-table__body th[scope="row"],
.lui-table--compact .lui-table__body-group td,
.lui-table--compact .lui-table__body-group th[scope="row"] {
  padding-top: 4px;
  padding-bottom: 4px;
}

.lui-table--striped .lui-table__body tr:nth-child(even),
.lui-table--striped .lui-table__body .lui-table__row:nth-child(even),
.lui-table--striped .lui-table__body-group:nth-child(even) tr,
.lui-table--striped .lui-table__body-group:nth-child(even) .lui-table__row {
  background: var(--color-primary);
}

.lui-table__foot .lui-table__cell:not(.lui-datatable__pagination-cell),
.lui-table__foot td:not(.lui-datatable__pagination-cell) {
  border-top: 1px solid var(--color-tertiary);
  color: var(--color-content);
  padding: 8px 16px;
}

/* Thumbnail — contained square media (loopos-ui-v2 native; table cells §3.5) */
.lui-thumbnail {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
}

.lui-thumbnail--sm {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}

.lui-thumbnail--md {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.lui-thumbnail--lg {
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
}

.lui-thumbnail img {
  display: block;
  object-fit: contain;
}

.lui-thumbnail--sm img {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}

.lui-thumbnail--md img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.lui-thumbnail--lg img {
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
}

/* Empty slot — always the gray scale icon (match gallery / record-image-upload).
   Do not inherit button/trigger content color when the thumbnail sits in a <button>. */
.lui-thumbnail__placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-secondary);
}

/* Author `display` beats the UA [hidden] rule — keep hide/show working with img + placeholder siblings. */
.lui-thumbnail img[hidden],
.lui-thumbnail__placeholder[hidden] {
  display: none;
}

.lui-thumbnail__placeholder .material-symbols-rounded {
  color: inherit;
}

.lui-thumbnail--loading img {
  opacity: 0;
}

.lui-thumbnail > .lui-thumbnail__skeleton {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
}

.lui-thumbnail--loading > .lui-thumbnail__skeleton {
  display: block;
}

/* Table cells — fixed img dimensions beat table min-content sizing on large assets */
.lui-table__cell img.lui-table__media,
.lui-datatable__cell img.lui-table__media {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
}

/* AI summary — index tables (column header logo + plain-text cells).
   max-width alone does not clip nowrap inline text; overflow:hidden keeps
   the summary from painting over the next column. */
.lui-table__cell--ai-summary {
  max-width: 288px;
  min-width: 0;
  overflow: hidden;
  vertical-align: middle;
}

.ai-summary-column-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ai-summary-column-header__logo {
  display: block;
  flex-shrink: 0;
  height: 16px;
  width: 16px;
  max-height: 16px;
  max-width: 16px;
  object-fit: contain;
}

.lui-agent-ai-logo {
  display: block;
  flex-shrink: 0;
  height: 16px;
  width: auto;
  max-height: 16px;
  max-width: 120px;
}

html[data-theme="dark"] .lui-agent-ai-logo--light,
html:not([data-theme="dark"]) .lui-agent-ai-logo--dark {
  display: none;
}

/* AI summary tab (show pages) */
.lui-tab-ai-summary__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lui-tab-ai-summary__grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 768px) {
  .lui-tab-ai-summary__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

.lui-tab-ai-summary__section-header {
  margin-bottom: 8px;
}

.lui-tab-ai-summary__section-title {
  margin: 0 0 4px;
}

.lui-tab-ai-summary__section-hint {
  margin: 0;
}

.lui-tab-ai-summary__meta {
  margin: 0;
}

/* Link primitives — semantic blue + chrome (native/link.md) */
.lui-link,
.lui-prose-link {
  color: var(--color-informative);
  text-decoration: none;
  cursor: pointer;
}

.lui-link:hover,
.lui-prose-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lui-link--chrome,
.lui-table__link {
  color: var(--color-content);
  text-decoration: none;
  cursor: pointer;
}

.lui-link--chrome.copy-13,
.lui-table__link.copy-13 {
  color: var(--color-content-secondary);
}

.lui-table__th .lui-link--chrome,
.lui-table__th .lui-table__link {
  color: inherit;
}

.lui-link--chrome:hover,
.lui-table__link:hover {
  color: var(--color-chrome-accent);
}

/* Primary table cell — full-cell click target for library row name links.
   Cover both single tbody (.lui-table__body) and per-row groups (.lui-table__body-group)
   so stretch padding is not stacked on top of cell padding. */
.lui-table__body th.lui-table__cell--primary:has(> .lui-table__link--stretch),
.lui-table__body-group th.lui-table__cell--primary:has(> .lui-table__link--stretch) {
  padding: 0;
  height: 1px;
  vertical-align: middle;
}

.lui-table__link--stretch {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 8px 16px;
  box-sizing: border-box;
}

.lui-link:focus-visible,
.lui-prose-link:focus-visible,
.lui-link--chrome:focus-visible,
.lui-table__link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-chrome-accent) 40%, transparent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reset browser link defaults inside table chrome */
.lui-table__cell a:not([class*="lui-button"]):not(.lui-badge):not([class*="lui-table__link"]):not(.lui-link),
.lui-table__head a:not([class*="lui-button"]):not([class*="lui-table__link"]):not(.lui-link) {
  color: inherit;
  text-decoration: none;
}

.lui-table__cell a:not([class*="lui-button"]):not(.lui-badge):not([class*="lui-table__link"]):not(.lui-link):hover,
.lui-table__head a:not([class*="lui-button"]):not([class*="lui-table__link"]):not(.lui-link):hover {
  color: var(--color-chrome-accent);
}

.lui-entity-token a {
  color: inherit;
  text-decoration: none;
}

.lui-entity-token a:hover {
  color: var(--color-chrome-accent);
}

.lui-table__row--has-actions { position: relative; }

/* Command-row actions column — body overlay cell + matching header spacer so sticky
   header background/border fill the full table width (see loopos-ui-v2 table.md). */
.lui-table__head .lui-table__th--actions,
.lui-table__head .lui-table__cell--actions,
.lui-datatable__head .lui-table__th--actions,
.lui-datatable__head .lui-table__cell--actions {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid var(--color-tertiary);
  vertical-align: middle;
  position: sticky;
  right: 0;
  /* Above scroll-edge fades (z-index 5) so sticky actions stay visible/clickable. */
  z-index: 6;
}

/* Beat `.lui-table__body td` padding (8px 16px). A padded actions cell paints a
   solid strip on the right even when the buttons are hidden. */
.lui-table__body td.lui-table__cell--actions,
.lui-table__body-group td.lui-table__cell--actions,
.lui-datatable__body td.lui-table__cell--actions,
.lui-table__head th.lui-table__th--actions,
.lui-table__head th.lui-table__cell--actions,
.lui-datatable__head th.lui-table__th--actions,
.lui-datatable__head th.lui-table__cell--actions,
.lui-table__cell--actions {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  border: none;
  overflow: visible;
  position: sticky;
  right: 0;
  z-index: 6;
  vertical-align: middle;
  /* 1px + row stretch so abspos overlay height:100% / inset 0 resolves to the row. */
  height: 1px;
  background: transparent;
}

.lui-table--hoverable .lui-table__body tr:hover > .lui-table__cell--actions,
.lui-table--hoverable .lui-table__body .lui-table__row:hover > .lui-table__cell--actions,
.lui-table--hoverable .lui-table__body-group tr:hover > .lui-table__cell--actions,
.lui-table--hoverable .lui-table__body-group .lui-table__row:hover > .lui-table__cell--actions,
.lui-datatable--hoverable .lui-datatable__body tr:hover > .lui-table__cell--actions,
.lui-datatable--hoverable .lui-datatable__body .lui-table__row:hover > .lui-table__cell--actions,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row:hover > .lui-table__cell--actions {
  background: transparent;
}

.lui-table__cell--actions .lui-table__actions {
  position: absolute;
  inset: 0 0 0 auto;
  white-space: nowrap;
  padding: 0 8px 0 24px;
  /* Full row height so two-line cells (location + bin) cannot show through. */
  background: linear-gradient(to left, var(--color-background) 72%, transparent);
  z-index: 1;
}

.lui-table--hoverable .lui-table__body tr:hover .lui-table__actions,
.lui-table--hoverable .lui-table__body .lui-table__row:hover .lui-table__actions,
.lui-table--hoverable .lui-table__body-group tr:hover .lui-table__actions,
.lui-table--hoverable .lui-table__body-group .lui-table__row:hover .lui-table__actions,
.lui-datatable--hoverable .lui-datatable__body tr:hover .lui-table__actions,
.lui-datatable--hoverable .lui-datatable__body .lui-table__row:hover .lui-table__actions,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row:hover .lui-table__actions {
  background: linear-gradient(to left, var(--color-secondary) 72%, transparent);
}

.lui-table__actions {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  opacity: 0;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-table__actions:empty {
  display: none;
}

/* Hover-reveal — table AND datatable (datatable uses lui-datatable--hoverable, not lui-table--hoverable).
   `:has(:focus-visible)` and not `:focus-within`: a mouse click leaves the clicked button focused, so
   `:focus-within` kept the actions pinned after closing a row's configuration panel. */
.lui-table--hoverable .lui-table__body tr:hover .lui-table__actions:not(:empty),
.lui-table--hoverable .lui-table__body tr:has(:focus-visible) .lui-table__actions:not(:empty),
.lui-table--hoverable .lui-table__body .lui-table__row:hover .lui-table__actions:not(:empty),
.lui-table--hoverable .lui-table__body .lui-table__row:has(:focus-visible) .lui-table__actions:not(:empty),
.lui-table--hoverable .lui-table__body-group tr:hover .lui-table__actions:not(:empty),
.lui-table--hoverable .lui-table__body-group tr:has(:focus-visible) .lui-table__actions:not(:empty),
.lui-datatable--hoverable .lui-datatable__body tr:hover .lui-table__actions:not(:empty),
.lui-datatable--hoverable .lui-datatable__body tr:has(:focus-visible) .lui-table__actions:not(:empty),
.lui-datatable--hoverable .lui-datatable__body .lui-table__row:hover .lui-table__actions:not(:empty),
.lui-datatable--hoverable .lui-datatable__body .lui-table__row:has(:focus-visible) .lui-table__actions:not(:empty),
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row:hover .lui-table__actions:not(:empty),
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row:has(:focus-visible) .lui-table__actions:not(:empty) {
  opacity: 1;
}

@media (hover: none) {
  .lui-table__actions { opacity: 1; }
}

@media (max-width: 991px) {
  .lui-table__actions { opacity: 1; }
}

/* Opt-in: primary row actions (queues, pending work) stay visible on desktop. */
.lui-table__actions--always-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Opt-in: hover-reveal even on coarse pointers / <992px, and never on
   :focus-within (a checked checkbox must not pin Desalocar/Cancelar over
   Encomenda). Bulk actions live in the float bar. */
.lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row .lui-table__actions,
.lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row:focus-within .lui-table__actions:not(:empty) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row:hover .lui-table__actions:not(:empty) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Datatable — loopos-ui-v2 / Rails Blocks (see rails-blocks/components/datatable.md) */
.lui-datatable {
  color: var(--color-content);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  /* Same as .lui-table — clip fades inside the border/radius. */
  overflow: hidden;
  --lui-table-text-col-floor: calc(10ch + 2rem);
}

.lui-datatable > .lui-scroll-edge {
  min-width: 0;
  width: 100%;
  border-radius: inherit;
}

.lui-datatable__table {
  border-collapse: collapse;
}

.lui-datatable__head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-primary);
}

.lui-datatable__head .lui-datatable__th,
.lui-datatable__head .lui-table__th {
  padding: 8px 16px;
  vertical-align: middle;
  font-weight: 400;
  color: var(--color-content-secondary);
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-datatable__head .lui-datatable__th:not(.lui-table__cell--center):not(.lui-table__cell--right),
.lui-datatable__head .lui-table__th:not(.lui-table__cell--center):not(.lui-table__cell--right) {
  text-align: left;
}


.lui-datatable__cell {
  padding: 8px 16px;
  font-weight: 400;
  color: var(--color-content-secondary);
  vertical-align: middle;
}

.lui-datatable__body .lui-datatable__cell:not(.lui-table__cell--center):not(.lui-table__cell--right) {
  text-align: left;
}

.lui-datatable__body .lui-datatable__cell.copy-13,
.lui-datatable__body .lui-datatable__cell.copy-13-regular {
  font-weight: 400;
  color: var(--color-content-secondary);
}

.lui-datatable__body .lui-datatable__cell .lui-table__link.copy-13-medium {
  color: var(--color-content);
  font-weight: 500;
}

.lui-table__foot .lui-datatable__pagination-cell,
.lui-datatable__foot .lui-datatable__pagination-cell {
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
  padding: 8px 16px;
  vertical-align: middle;
}

.lui-datatable__pagination {
  width: 100%;
}

/* Pagy series_nav is a nested <nav class="pagy series-nav"> of adjacent <a>
   tags (prev, pages, next). Without a stylesheet they collapse into black
   "<12>". Match the footer range: copy-12, --color-content-secondary, 8px gap. */
.lui-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.lui-datatable__pagination .lui-pagination {
  gap: 8px;
}

.lui-pagination .pagy,
.lui-pagination .pagy.series-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.lui-pagination .pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  color: var(--color-content-secondary);
  text-decoration: none;
}

.lui-pagination .pagy a:visited {
  color: var(--color-content-secondary);
}

.lui-pagination .pagy a[href]:hover {
  color: var(--color-content);
  text-decoration: underline;
}

.lui-pagination .pagy a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-pagination .pagy a[aria-current="page"] {
  color: var(--color-content);
  font-weight: 500;
}

.lui-pagination .pagy a[aria-disabled="true"]:not([aria-current]) {
  opacity: 0.45;
  pointer-events: none;
}

.lui-pagination__list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lui-pagination__btn,
.lui-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
}

.lui-pagination__btn {
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.lui-pagination__btn:hover {
  background: var(--color-secondary);
}

.lui-pagination__btn:focus-visible,
.lui-pagination__current:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-pagination__btn--nav {
  padding-inline: 0;
}

.lui-pagination__btn[aria-disabled="true"] {
  color: var(--color-foreground);
  cursor: not-allowed;
  pointer-events: none;
}

.lui-pagination__current {
  background: var(--color-content);
  color: var(--color-background);
}

.lui-datatable__sort {
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.lui-datatable__sort:hover {
  background: var(--color-secondary);
}

.lui-datatable__sort:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-app);
}

.lui-datatable__indicator,
.lui-datatable__th .lui-table__sort-indicator {
  color: var(--color-foreground);
}

.lui-datatable__th[aria-sort="ascending"] .lui-datatable__indicator,
.lui-datatable__th[aria-sort="descending"] .lui-datatable__indicator,
.lui-datatable__th[aria-sort="ascending"] .lui-table__sort-indicator,
.lui-datatable__th[aria-sort="descending"] .lui-table__sort-indicator {
  color: var(--color-app);
}

.lui-datatable__row {
  border-top: 1px solid var(--color-tertiary);
}

.lui-datatable--hoverable .lui-datatable__row:hover {
  background: var(--color-secondary);
}

.lui-datatable--striped .lui-datatable__row:nth-child(even) {
  background: var(--color-primary);
}

/* Tabs — loopos-ui-v2 / Rails Blocks (see rails-blocks/components/tabs.md) */
.lui-tabs {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.lui-tabs__nav {
  min-width: 0;
  max-width: 100%;
}

.lui-tabs__list {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  opacity: 1;
}

[data-controller~="lui--tabs"] .lui-tabs__list {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lui-tabs__tab .lui-coming-soon {
  height: 16px;
  line-height: 16px;
  padding: 0 6px;
  align-self: center;
  flex-shrink: 0;
}

/* Tab count badges — fixed 16px chip; must not change tab row height (see coming-soon). */
.lui-tabs__tab .lui-tabs__count {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  flex-shrink: 0;
  pointer-events: none;
}

.lui-tabs__tab .lui-tabs__count:has([data-role-scope-count-target]) {
  pointer-events: auto;
}

.lui-tabs__tab .lui-tabs__count .lui-badge {
  box-sizing: border-box;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
  gap: 0;
  padding: 0 6px;
  line-height: 16px;
  font-size: 12px;
  border-radius: 9999px;
}

.lui-tabs__tab .lui-tabs__count .lui-badge > span {
  line-height: 16px;
}

.lui-tabs__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-content-secondary);
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.lui-tabs__tab:hover {
  color: var(--color-content);
  text-decoration: none;
}

.lui-tabs__tab[aria-selected="true"],
.lui-tabs__tab--active {
  color: var(--color-content);
}

.lui-tabs__tab[aria-disabled="true"],
.lui-tabs__tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lui-tabs__tab[aria-disabled="true"]:hover {
  color: var(--color-content-secondary);
}

/* Same dimmed treatment as .lui-sidebar__item--disabled, but the tab stays a real,
   clickable link/button ("coming soon" — not functionally blocked). */
.lui-tabs__tab--disabled {
  opacity: 0.45;
}

.lui-tabs__tab--disabled:hover {
  color: var(--color-content-secondary);
}

.lui-tabs__tab:focus-visible {
  outline: none;
  background: var(--color-secondary);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
}

.lui-tabs__icon {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  aspect-ratio: 1;
  font-size: 16px !important;
  line-height: 16px;
  overflow: hidden;
  object-fit: contain;
  display: block;
}

.lui-tabs__tab .material-symbols-rounded {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  aspect-ratio: 1;
  overflow: hidden;
}

.lui-tabs__meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-tabs__meta--unsaved {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-warning-fg);
  cursor: help;
}

.lui-role-scope-count__value.is-unsaved {
  color: var(--color-warning-fg);
}

.lui-tabs__panel {
  padding: 16px 0;
  color: var(--color-content);
}

/* Panels are focusable (tabindex=0) for a11y — suppress the large perimeter ring
   (especially noisy on Diagram / flow editor). Keyboard focus stays on the tab itself. */
.lui-tabs__panel:focus,
.lui-tabs__panel:focus-visible {
  outline: none;
}

.lui-tabs__panel[hidden] { display: none !important; }

/* Voice Test Lab transcript panels — `.flex` beats UA [hidden]. */
[data-integrations-voice-test-target="transcript"][hidden],
[data-integrations-voice-test-target="fullLogs"][hidden],
[data-integrations-voice-test-target="transcript"].hidden,
[data-integrations-voice-test-target="fullLogs"].hidden {
  display: none !important;
}

/* pills */
.lui-tabs--pills .lui-tabs__list {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
  overflow: visible;
}

.lui-tabs--pills .lui-tabs__tab { border-radius: 6px; }

.lui-tabs--pills .lui-tabs__tab[aria-selected="true"],
.lui-tabs--pills .lui-tabs__tab--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.10);
}

/* underline (route nav + Flux show/detail sections) */
.lui-tabs--underline .lui-tabs__nav {
  position: relative;
}

.lui-tabs--underline .lui-tabs__nav.lui-scroll-edge {
  flex: 0 0 auto;
}

.lui-tabs--underline .lui-tabs__nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-tertiary);
  pointer-events: none;
  z-index: 0;
}

.lui-tabs--underline .lui-tabs__list {
  position: relative;
  z-index: 1;
  gap: 0;
  align-items: flex-end;
  border-bottom: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.lui-tabs--underline .lui-tabs__list.lui-scroll-edge__viewport {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  width: 100%;
}

.lui-tabs--underline .lui-tabs__list::-webkit-scrollbar {
  display: none;
}

.lui-tabs--underline .lui-tabs__tab {
  position: relative;
  z-index: 1;
  border-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 8px;
}

.lui-tabs--underline .lui-tabs__tab[aria-selected="true"],
.lui-tabs--underline .lui-tabs__tab--active {
  color: var(--color-content);
}

/* 2px accent on the same bottom edge, painted above the list rule */
.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.lui-tabs--underline .lui-tabs__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-chrome-accent);
  pointer-events: none;
  z-index: 1;
}

/* low-contrast */
.lui-tabs--low-contrast .lui-tabs__list {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  overflow: visible;
}

.lui-tabs--low-contrast .lui-tabs__tab { border-radius: 6px; }

.lui-tabs--low-contrast .lui-tabs__tab[aria-selected="true"],
.lui-tabs--low-contrast .lui-tabs__tab--active {
  background: var(--color-background);
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
}

/* vertical */
.lui-tabs--vertical {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 16px;
}

.lui-tabs--vertical .lui-tabs__list {
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  overflow: visible;
}

.lui-tabs__progress {
  grid-column: 1 / -1;
  height: 2px;
  border-radius: 9999px;
  background: var(--color-chrome-accent);
  transform-origin: left;
  transform: scaleX(0);
}

.lui-profile-subnav .lui-tabs__list {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.lui-profile-subnav .lui-tabs__list::-webkit-scrollbar {
  display: none;
}

/* App shell */
.lui-app-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.lui-app-layout__content {
  position: relative;
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.lui-app-layout__main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.lui-app-layout__workspace {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lui-app-layout__main .lui-app-layout__workspace--catalog-explorer {
  flex: 1;
  min-height: 0;
}

/* Sidebar — Rails Blocks lui-sidebar rail (loopos-ui-v2 §2 + sidebar.md) */
.lui-sidebar {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 0;
}

.lui-sidebar__rail {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-expanded-width);
  height: 100%;
  min-height: 0;
  background: var(--color-primary);
  border-right: 1px solid var(--color-tertiary);
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lui-sidebar__rail--collapsed {
  width: var(--sidebar-collapsed-width);
}

.lui-sidebar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-sidebar__brand-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-sidebar__brand-label {
  color: var(--color-content-secondary);
  max-width: 100%;
}

/* Dev-only marker (WORKTREE_SLUG) — its own little section under the brand/logo row,
   set off by a divider (mirrors .lui-sidebar__summary's own border-bottom below it). */
.lui-sidebar__worktree-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-sidebar__worktree-tag-label {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.lui-sidebar__admin-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.lui-flux-app-mark-trigger {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* LoopOS Flux App identity marker — brand symbol only, name on hover (ADR-025/026). */
.lui-flux-app-mark {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
  vertical-align: middle;
}

html[data-theme="dark"] .lui-flux-app-mark--light,
html:not([data-theme="dark"]) .lui-flux-app-mark--dark {
  display: none;
}

.lui-sidebar__bottom {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  overflow: visible;
}

.lui-sidebar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.lui-sidebar__brand--static {
  pointer-events: none;
}

.lui-sidebar__brand--interactive {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  border-radius: 6px;
}

.lui-sidebar__brand--interactive:hover {
  background: var(--color-secondary);
}

.lui-sidebar__chrome-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-sidebar__chrome-bar--tenant,
.lui-sidebar__chrome-bar--admin-identity {
  min-width: 0;
}

.lui-sidebar__chrome-bar--admin-identity {
  height: 36px;
  padding: 4px 8px;
  border-bottom: 0;
}

/* Tenant / partner selector — denser leading inset (4px density step) for 32px avatar */
.lui-sidebar__chrome-bar--tenant .lui-sidebar__row {
  padding-left: 4px;
}

.lui-sidebar__wordmark,
.lui-wordmark__img {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}

html[data-theme="dark"] .lui-wordmark__img--light,
html:not([data-theme="dark"]) .lui-wordmark__img--dark {
  display: none;
}

/* Partner + admin sidebar header — never shrink the Flux wordmark to 0×0 inside
   the summary flex row (collapse control + flex-basis:0 brand slot). */
.lui-sidebar__brand-mark .lui-wordmark__img {
  flex-shrink: 0;
}

.login__logo.lui-wordmark__img {
  height: 32px;
}

.login__logo-section--flux .login__logo-mark {
  height: 56px;
  width: auto;
  object-fit: contain;
}

html[data-theme="dark"] .login__logo-mark--dark,
html:not([data-theme="dark"]) .login__logo-mark--light {
  display: none;
}

.lui-sidebar__collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
}

.lui-sidebar__collapse-btn:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-sidebar__collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__collapse-icon {
  color: var(--color-content-secondary);
}

.lui-sidebar__rail--collapsed .lui-sidebar__wordmark,
.lui-sidebar__rail--collapsed .lui-sidebar__brand-label,
.lui-sidebar__rail--collapsed .lui-sidebar__label,
.lui-sidebar__rail--collapsed .lui-sidebar__account-meta,
.lui-sidebar__rail--collapsed .lui-sidebar__account-badge,
.lui-sidebar__rail--collapsed .lui-sidebar__chev,
.lui-sidebar__rail--collapsed .lui-sidebar__worktree-tag {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__summary {
  justify-content: center;
  padding-inline: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__brand--static {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__collapse-btn {
  margin-left: 0;
}

.lui-sidebar__rail--collapsed :is(
  .lui-sidebar__chrome-bar--tenant,
  .lui-sidebar__chrome-bar--admin-identity
) {
  justify-content: center;
  padding-inline: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__chrome-bar--admin-identity {
  height: 44px;
  padding-block: 4px;
}

.lui-sidebar__rail--collapsed .lui-sidebar__chrome-bar--tenant .lui-sidebar__row {
  padding-left: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__item,
.lui-sidebar__rail--collapsed .lui-sidebar__row {
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  margin-inline: auto;
  gap: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__row--account {
  height: 36px;
  min-height: 36px;
}

.lui-sidebar__rail--collapsed .lui-sidebar__footer {
  padding-inline: 0;
  align-items: center;
}

.lui-sidebar__icon {
  color: currentColor;
  flex-shrink: 0;
}

.lui-sidebar__icon--logo {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  overflow: hidden;
}

/* MIcon custom SVGs (sidecar m_icon.css is not in the Flux bundle). */
.lui-m_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  line-height: 0;
  overflow: hidden;
  width: var(--lui-micon-size, 16px);
  height: var(--lui-micon-size, 16px);
}

.lui-m_icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Custom SVG nav marks (Validation, …) sit on a 20px squircle plate. */
.lui-nav-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  corner-shape: squircle;
  background: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
  flex-shrink: 0;
  overflow: hidden;
}

.lui-nav-icon-tile .lui-m_icon {
  width: 18px;
  height: 18px;
}

/* App logo on the 48px Core bar (process show opened from a Flux App). */
.lui-nav-icon-tile--md {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.lui-nav-icon-tile--md .lui-m_icon {
  width: 29px;
  height: 29px;
}

/* Flux Apps action-bar identity — 56px tile (bar is lui-action-bar--flux-app 96px). */
.lui-nav-icon-tile--lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.lui-nav-icon-tile--lg .lui-m_icon {
  width: 50px;
  height: 50px;
}

.lui-sidebar__item .copy-13,
.lui-sidebar__section-toggle .copy-13,
.lui-sidebar__row .copy-13 {
  color: inherit;
}

.lui-sidebar__item--active .lui-sidebar__label.copy-13 {
  color: inherit;
}

.lui-sidebar__app-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.lui-sidebar__nav-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Floating scrollbar — fixed gutter (no layout shift on hover); thumb visible on host hover only */
.lui-floating-scroll {
  overflow: auto;
  min-height: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.lui-floating-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.lui-floating-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.lui-floating-scroll::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

.lui-floating-scroll-host:hover .lui-floating-scroll,
.lui-floating-scroll-host:focus-within .lui-floating-scroll {
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.lui-floating-scroll-host:hover .lui-floating-scroll::-webkit-scrollbar-thumb,
.lui-floating-scroll-host:focus-within .lui-floating-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 36%, transparent);
}

/* ─── Scroll edge fades (sidebar nav, breadcrumb switcher, flow catalog, …) ─ */

.lui-scroll-edge {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  --lui-scroll-edge-surface: var(--color-primary);
}

.lui-scroll-edge--surface-primary {
  --lui-scroll-edge-surface: var(--color-primary);
}

.lui-scroll-edge--surface-background {
  --lui-scroll-edge-surface: var(--color-background);
}

.lui-scroll-edge--surface-secondary {
  --lui-scroll-edge-surface: var(--color-secondary);
}

.lui-scroll-edge__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.lui-scroll-edge__fade {
  position: absolute;
  pointer-events: none;
  /* Above sticky table cells (actions z-index 3) so horizontal hints stay visible. */
  z-index: 5;
  opacity: 0;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-scroll-edge__fade--top,
.lui-scroll-edge__fade--bottom {
  left: 0;
  right: 0;
  height: 20px;
}

.lui-scroll-edge__fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--left,
.lui-scroll-edge__fade--right {
  top: 0;
  bottom: 0;
  width: 20px;
}

.lui-scroll-edge__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

/* Table/datatable: match corner radius on horizontal fades (parent overflow:hidden clips to border). */
.lui-table > .lui-scroll-edge > .lui-scroll-edge__fade--left,
.lui-datatable > .lui-scroll-edge > .lui-scroll-edge__fade--left {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.lui-table > .lui-scroll-edge > .lui-scroll-edge__fade--right,
.lui-datatable > .lui-scroll-edge > .lui-scroll-edge__fade--right {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.lui-scroll-edge--fade-top .lui-scroll-edge__fade--top:not([hidden]),
.lui-scroll-edge--fade-bottom .lui-scroll-edge__fade--bottom:not([hidden]),
.lui-scroll-edge--fade-left .lui-scroll-edge__fade--left:not([hidden]),
.lui-scroll-edge--fade-right .lui-scroll-edge__fade--right:not([hidden]) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lui-scroll-edge__fade {
    transition: none;
  }
}

.lui-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  min-height: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__nav {
  padding-inline: 0;
  align-items: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Top-level page links are flex children of the scrollable nav — must not shrink (Dashboard squashes otherwise). */
.lui-sidebar__nav > .lui-sidebar__item {
  flex-shrink: 0;
}

.lui-sidebar__section {
  margin-top: 8px;
  flex-shrink: 0;
}

.lui-sidebar__section:first-child {
  margin-top: 0;
}

.lui-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid var(--color-tertiary);
  flex-shrink: 0;
  overflow: visible;
}

.lui-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  min-height: 28px;
  flex-shrink: 0;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--color-content);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

.lui-sidebar__item:hover { background: var(--color-secondary); }

/* ---- New-feature indicator (config/new_features.yml) -------------------- */

/* Static, never animated: this reads as "unread", not as an alert, so it needs
   no prefers-reduced-motion escape hatch. */
.lui-new-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-informative);
}

/* Collapsed rail hides labels, so pin the dot to the icon corner. Deliberately
   NOT `lui-sidebar__badge`: that class is display:none in the collapsed rail and
   the dot has to survive there. */
.lui-sidebar__rail--collapsed .lui-sidebar__new-dot {
  position: absolute;
  top: 4px;
  right: 4px;
}

.lui-sidebar__section-toggle { position: relative; }

.lui-sidebar__new-dot--section { margin-left: 4px; }

/* The section rollup is redundant once its items are visible. Done in CSS, not
   ERB, because sidebar_section_controller.js expands/collapses client-side with
   no reload — a server-side conditional would go stale on the first toggle. */
.lui-sidebar__section:not(.lui-sidebar__section--collapsed)
  .lui-sidebar__section-toggle .lui-new-dot {
  display: none;
}

.lui-tabs__tab .lui-new-dot { margin-left: 2px; }

.lui-sidebar__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__item--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}

.lui-sidebar__item--disabled {
  opacity: 0.45;
}

.lui-sidebar__item--disabled:hover {
  background: var(--color-secondary);
}

/* Collapsible nav section (Flux: button-toggle + Stimulus + server sync) */
.lui-sidebar__section-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  min-height: 28px;
  flex-shrink: 0;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

.lui-sidebar__section-toggle:hover {
  background: var(--color-secondary);
}

.lui-sidebar__section-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__section-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-sidebar__section-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
  transition:
    opacity var(--default-transition-duration) var(--default-transition-timing-function),
    transform var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-sidebar__section-toggle:hover .lui-sidebar__section-chevron,
.lui-sidebar__section-toggle:focus-visible .lui-sidebar__section-chevron {
  opacity: 1;
}

.lui-sidebar__section--collapsed .lui-sidebar__section-chevron {
  transform: translateY(-50%) rotate(-90deg);
}

.lui-sidebar__section-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.lui-sidebar__section-body[hidden] {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__section-toggle {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__section {
  margin-top: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__section-body {
  padding-top: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__badge {
  display: none;
}

.lui-sidebar__badge-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

.lui-sidebar__badge--count {
  margin-left: auto;
  min-width: 1.25rem;
  text-align: center;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-sidebar__badge-group .lui-sidebar__badge--count-slot {
  margin-left: 0;
  cursor: default;
}

.lui-sidebar__count-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.lui-sidebar__count-tooltip-mark {
  display: inline-flex;
  flex-shrink: 0;
}

.lui-sidebar__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-sidebar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--color-content);
  background: none;
  border: none;
  text-align: left;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.lui-sidebar__row--trigger {
  cursor: pointer;
}

.lui-sidebar__row--trigger:hover {
  background: var(--color-secondary);
}

.lui-sidebar__row--trigger:active,
.lui-sidebar__row--trigger[data-state="open"],
.lui-sidebar__row--trigger.lui-sidebar__row--active,
.lui-sidebar__row--trigger[data-state="open"]:hover {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}

.lui-sidebar__row--trigger:active .lui-sidebar__icon:not(.lui-avatar),
.lui-sidebar__row--trigger[data-state="open"] .lui-sidebar__icon:not(.lui-avatar),
.lui-sidebar__row--trigger.lui-sidebar__row--active .lui-sidebar__icon:not(.lui-avatar),
.lui-sidebar__row--trigger:active .lui-sidebar__chev,
.lui-sidebar__row--trigger[data-state="open"] .lui-sidebar__chev,
.lui-sidebar__row--trigger.lui-sidebar__row--active .lui-sidebar__chev {
  color: var(--color-chrome-accent);
}

.lui-sidebar__row--trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__row--trigger .lui-sidebar__label {
  user-select: none;
}

.lui-sidebar__row--static {
  cursor: default;
}

.lui-sidebar__admin-identity {
  height: 28px;
  min-height: 28px;
}

.lui-sidebar__row--account {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
}

.lui-sidebar__account-badge {
  flex-shrink: 0;
}

.lui-sidebar__chev {
  margin-left: auto;
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-sidebar__account-link {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 9999px; /* match circle user avatar focus ring */
}

.lui-sidebar__account-link:hover,
.lui-sidebar__account-link:focus-visible,
.lui-sidebar__account-link:active {
  background: transparent;
  color: inherit;
}

.lui-sidebar__account-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar__account-meta {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.lui-sidebar__account-meta > .copy-13-medium,
.lui-sidebar__account-meta > .lui-sidebar__label {
  line-height: 18px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-avatar {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Soft rim inside the slot — difference blend + mid-gray at ~50% opacity stays visible on any photo/fill */
.lui-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(69, 69, 69, 0.25);
  mix-blend-mode: difference;
  pointer-events: none;
}

/* Initials fallback — neutral gray (light fill, secondary label) */
span.lui-avatar:not(:has(> img)) {
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  font-weight: 400;
}

.lui-avatar--sm {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.lui-avatar--md {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}

.lui-avatar--circle { border-radius: 9999px; }
.lui-avatar--square { border-radius: 4px; }

/* Photo nested inside the slot (Flux default via avatar_tag) */
.lui-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Skeleton while the nested photo is in flight (Active Storage redirect). */
span.lui-avatar.lui-avatar--loading > img {
  opacity: 0;
}

span.lui-avatar > .lui-avatar__skeleton {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
}

span.lui-avatar.lui-avatar--loading > .lui-avatar__skeleton {
  display: block;
}

/* @deprecated — bare img.lui-avatar during migration; prefer span.lui-avatar > img
   (cannot host ::after blend rim — replaced element). Flat fallback only. */
img.lui-avatar {
  display: block;
  object-fit: cover;
  object-position: center;
  border: 1px solid color-mix(in srgb, var(--color-content) 65%, var(--color-background));
}

img.lui-avatar.lui-avatar--sm {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

img.lui-avatar.lui-avatar--md {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}

/* @deprecated — use .lui-avatar; kept for legacy markup during migration */
.lui-sidebar__avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  border: 1px solid var(--color-tertiary);
  font-weight: 400;
}

.lui-sidebar__avatar--circle { border-radius: 9999px; }

.lui-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lui-sidebar__mobile {
  position: fixed;
  inset: 0;
  /* Leaflet panes/controls sit at 400–1000; the drawer must cover them. */
  z-index: 1100;
}

.lui-sidebar__mobile[hidden] {
  display: none !important;
}

.lui-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.lui-sidebar__panel {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-expanded-width);
  max-width: 85vw;
  height: 100%;
  min-height: 0;
  background: var(--color-primary);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.1);
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

.lui-sidebar__mobile--open .lui-sidebar__panel {
  transform: translateX(0);
}

.lui-sidebar__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-sidebar__close:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-sidebar__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-focus-ring);
}

.lui-sidebar-trigger { display: none; }

/* Dropdown — Rails Blocks lui-dropdown */
.lui-dropdown {
  position: relative;
  width: fit-content;
}

.lui-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}

.lui-dropdown__trigger:hover,
.lui-dropdown__trigger[data-state="open"] {
  background: var(--color-secondary);
}

.lui-dropdown__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-dropdown__trigger:disabled {
  cursor: not-allowed;
  color: var(--color-foreground);
}

.lui-dropdown__trigger-icon {
  font-size: 16px;
  color: var(--color-content-secondary);
  transition: transform 120ms ease;
}

.lui-dropdown__trigger[data-state="open"] .lui-dropdown__trigger-icon {
  transform: rotate(180deg);
}

.lui-dropdown--icon .lui-dropdown__trigger {
  padding: 8px;
  gap: 0;
}

.lui-dropdown--text .lui-dropdown__trigger {
  border: none;
  background: transparent;
  padding: 6px 10px;
}

.lui-dropdown--text .lui-dropdown__trigger:hover {
  background: var(--color-secondary);
}

.lui-dropdown--sidebar-row {
  width: 100%;
}

.lui-dropdown--sidebar-row > .lui-sidebar__row {
  width: 100%;
}

.lui-dropdown--sidebar-row .lui-dropdown__menu {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 70;
}

.lui-dropdown__bridge {
  position: fixed;
  pointer-events: auto;
  background: transparent;
  z-index: 2147483645;
}

.lui-dropdown__menu {
  position: absolute;
  z-index: 60;
  margin: 0;
  padding: 0;
  min-width: 12rem;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  color-scheme: light dark;
  box-shadow: none;
}

.lui-dropdown__menu:not([open]):not(.lui-combobox__dropdown):not(.lui-select__dropdown):not(.lui-icon-picker__panel):not(.lui-color-picker__panel) {
  display: none;
}

.lui-dropdown__menu[open] {
  display: block;
}

.lui-dropdown__menu[data-floating="true"] {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
}

.lui-dropdown__menu::backdrop {
  background: transparent;
}

.lui-dropdown--bottom-start .lui-dropdown__menu {
  top: calc(100% + 4px);
  left: 0;
}

.lui-dropdown--top-start .lui-dropdown__menu {
  bottom: calc(100% + 4px);
  top: auto;
  left: 0;
}

.lui-dropdown--right-start .lui-dropdown__menu {
  left: calc(100% + 4px);
  right: auto;
  top: 0;
  bottom: auto;
}

.lui-dropdown--right-end .lui-dropdown__menu {
  left: calc(100% + 4px);
  right: auto;
  top: auto;
  bottom: 0;
}

.lui-dropdown__list {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.lui-dropdown__label {
  padding: 6px 8px 4px;
  color: var(--color-content-secondary);
}

.lui-dropdown__search {
  padding: 4px 4px 0;
}

.lui-dropdown__scroll {
  max-height: min(16rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lui-dropdown__scroll::-webkit-scrollbar {
  width: 6px;
}

.lui-dropdown__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-tertiary);
}

.lui-dropdown__empty {
  margin: 0;
  padding: 8px;
  text-align: center;
}

.lui-dropdown__empty.hidden {
  display: none;
}

.lui-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms ease;
}

/* Author `display: flex` beats the UA [hidden] rule — country/combobox filters set hidden. */
.lui-dropdown__item[hidden] {
  display: none !important;
}

.lui-dropdown__item:hover,
.lui-dropdown__item:focus-visible {
  outline: none;
  background: var(--color-secondary);
}

.lui-dropdown__item--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}

.lui-dropdown__item-icon:not(.lui-avatar) {
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-dropdown__item-text {
  flex: 1;
  min-width: 0;
}

.lui-dropdown__shortcut {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-content-secondary);
  font-variant-numeric: tabular-nums;
}

.lui-dropdown__badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-informative-fg);
}

.lui-dropdown__item .lui-badge {
  flex-shrink: 0;
}

.lui-catalog-selector .lui-dropdown__menu {
  min-width: 240px;
}

/* icon + label + caret — label absorbs width and ellipsizes; icons stay shrink-0 via .lui-button__icon */
.lui-catalog-selector__trigger {
  min-width: 0;
  max-width: 100%;
}

.lui-catalog-selector__trigger .lui-button__label,
.lui-catalog-selector__label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.lui-dropdown__item--destructive,
.lui-dropdown__item--destructive .lui-dropdown__item-icon {
  color: var(--color-danger);
}

.lui-dropdown__item--destructive:hover,
.lui-dropdown__item--destructive:focus-visible {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
}

.lui-dropdown__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--color-tertiary);
}

.lui-dropdown__form {
  margin: 0;
  width: 100%;
}

.lui-dropdown__form.hidden {
  display: none;
}

.lui-dropdown__form .lui-dropdown__item {
  width: 100%;
}

.lui-dropdown__switch-row {
  padding: 6px 8px;
}

.lui-dropdown__account-header {
  padding: 6px 8px;
}

/* Quiet deploy/version meta above account menu actions — not interactive. */
.lui-dropdown__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px 6px;
}

.lui-dropdown__meta-label {
  flex-shrink: 0;
}

.lui-dropdown__release {
  min-width: 0;
  max-width: 100%;
  color: var(--color-content-secondary);
  font-variant-numeric: tabular-nums;
  cursor: default;
  user-select: text;
}

.lui-dropdown__account-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lui-dropdown__account-identity > .copy-13-medium {
  line-height: 18px;
}

.lui-dropdown__account-identity > .copy-12 {
  line-height: 16px;
}

.lui-dropdown__menu--account .lui-dropdown__theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
}

.lui-dropdown__theme-label {
  color: var(--color-content);
  flex-shrink: 0;
}

.lui-theme-segment--compact {
  padding: 2px 1px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
}

.lui-theme-segment--compact .lui-theme-segment__option {
  width: 24px;
  height: 24px;
}

.lui-theme-segment--compact .lui-theme-segment__option .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

/* Tooltip wrappers around a segment option must not steal the pill metrics. */
.lui-theme-segment .lui-tooltip__trigger {
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
  width: auto;
  height: auto;
  min-height: 0;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
  line-height: 0;
}

.lui-theme-segment .lui-tooltip__trigger:hover,
.lui-theme-segment .lui-tooltip__trigger:focus-visible {
  background: transparent;
  box-shadow: none;
}

.lui-theme-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border-radius: 9999px;
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-theme-segment__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

a.lui-theme-segment__option {
  text-decoration: none;
}

.lui-theme-segment__option:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 8%, transparent);
}

.lui-theme-segment__option--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.lui-theme-segment__option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-theme-segment__option--active:focus-visible {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--color-focus-ring);
}

/* Account menu theme toggle — selection via --active only; no mouse-focus ring */
.lui-dropdown__menu--account .lui-theme-segment__option:focus {
  outline: none;
}

.lui-dropdown__menu--account .lui-theme-segment__option:focus:not(:focus-visible) {
  box-shadow: none;
}

.lui-icon-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border-radius: 9999px;
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-icon-segment--compact {
  padding: 2px 1px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
}

.lui-icon-segment--compact .lui-icon-segment__option {
  width: 24px;
  height: 24px;
}

.lui-icon-segment--compact .lui-icon-segment__option .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-icon-segment__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.lui-icon-segment__option:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 8%, transparent);
}

.lui-icon-segment__option--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.lui-icon-segment__option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-icon-segment__option--active:focus-visible {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--color-focus-ring);
}

.lui-dropdown__menu--account .lui-theme-segment__option--active:focus:not(:focus-visible) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.lui-dropdown__menu--account .lui-theme-segment__option:focus-visible {
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

.lui-dropdown__menu--account .lui-theme-segment__option--active:focus-visible {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--color-chrome-accent);
}

.lui-dropdown__item--trailing-icon {
  justify-content: space-between;
}

.lui-dropdown__item--trailing-icon .lui-dropdown__item-icon {
  margin-left: auto;
  color: var(--color-content-secondary);
}

.lui-dropdown__item--destructive.lui-dropdown__item--trailing-icon .lui-dropdown__item-icon {
  color: var(--color-danger);
}

.lui-dropdown__item--active.lui-dropdown__item--trailing-icon .lui-dropdown__item-icon {
  color: var(--color-chrome-accent);
}

/* Switch — compact toggle (loopos-ui-v2 switch.md; sm size for dropdown rows) */
.lui-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lui-switch--label-left {
  justify-content: space-between;
  width: 100%;
}

.lui-switch__control {
  position: relative;
  display: inline-flex;
  flex: none;
}

.lui-switch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.lui-switch__input:disabled {
  cursor: not-allowed;
}

.lui-switch__track {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 9999px;
  background: var(--color-tertiary);
  border: 1px solid var(--color-tertiary);
  transition: background 140ms ease, border-color 140ms ease;
  pointer-events: none;
}

.lui-switch__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.1);
  transition: transform 140ms ease;
  transform: translateX(0);
}

.lui-switch__input:not(:disabled):hover ~ .lui-switch__track {
  background: var(--color-content-secondary);
  border-color: var(--color-content-secondary);
}

.lui-switch__input:checked ~ .lui-switch__track {
  background: var(--color-chrome-accent);
  border-color: var(--color-chrome-accent);
}

.lui-switch__input:not(:disabled):checked:hover ~ .lui-switch__track {
  background: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
  border-color: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
}

.lui-switch__input:focus-visible ~ .lui-switch__track {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-switch__input:disabled ~ .lui-switch__track {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.lui-switch__label {
  color: var(--color-content);
  cursor: pointer;
}

/* Also missing outright (switch.md "Key CSS" / "Text block") — without
   these, the label stacked directly against the description with no gap
   and the description/required/error text used the primary text color
   instead of its own secondary/danger tokens. */
.lui-switch__text {
  display: flex;
  flex-direction: column;
}

.lui-switch__description {
  margin-top: 2px;
  color: var(--color-content-secondary);
}

.lui-switch__required {
  color: var(--color-danger);
}

.lui-switch__error {
  margin-top: 2px;
  color: var(--color-danger-fg);
}

.lui-switch--sm .lui-switch__track {
  width: 32px;
  height: 18px;
  padding: 2px;
}

.lui-switch--sm .lui-switch__thumb {
  width: 14px;
  height: 14px;
}

.lui-switch--sm .lui-switch__input:checked ~ .lui-switch__track .lui-switch__thumb {
  transform: translateX(14px);
}

/* --md and --lg were missing outright — every switch/partials/_switch.html.erb
   caller that leaves `size:` at its "md" default (checkbox.md §"Sizes —
   track / thumb dimensions") rendered a near-zero, unstyled track (only
   `.lui-switch__track`'s own rules applied, with no width/height). Values
   match the skill spec verbatim. */
.lui-switch--md .lui-switch__track {
  width: 40px;
  height: 24px;
  padding: 2px;
}

.lui-switch--md .lui-switch__thumb {
  width: 18px;
  height: 18px;
}

.lui-switch--md .lui-switch__input:checked ~ .lui-switch__track .lui-switch__thumb {
  transform: translateX(16px);
}

.lui-switch--lg .lui-switch__track {
  width: 56px;
  height: 32px;
  padding: 3px;
}

.lui-switch--lg .lui-switch__thumb {
  width: 24px;
  height: 24px;
}

.lui-switch--lg .lui-switch__input:checked ~ .lui-switch__track .lui-switch__thumb {
  transform: translateX(24px);
}

.lui-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
  gap: 12px;
}

/* Flux Apps: fixed 96px chrome — identity logo centered, not cropped. */
.lui-action-bar--flux-app {
  height: 96px;
  min-height: 96px;
  overflow: visible;
}

/* overflow-x:hidden on .lui-breadcrumb computes overflow-y away from visible
   (CSS overflow pairing) and flat-clips tall identity tiles. Flux Apps trails
   are short (no Dashboard) — keep overflow visible so the logo is not cut. */
.lui-action-bar--flux-app .lui-action-bar__start,
.lui-action-bar--flux-app .lui-action-bar__trail,
.lui-action-bar--flux-app .lui-breadcrumb,
.lui-action-bar--flux-app .lui-breadcrumb__list,
.lui-action-bar--flux-app .lui-breadcrumb__item,
.lui-action-bar--flux-app .lui-breadcrumb__current,
.lui-action-bar--flux-app .lui-breadcrumb__link,
.lui-action-bar--flux-app .lui-breadcrumb__label-group {
  overflow: visible;
}

/* Bigger identity tile (~64px) on the 96px bar; don't clip glyph/shadow. */
.lui-action-bar--flux-app .lui-nav-icon-tile--lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: visible;
}

.lui-action-bar--flux-app .lui-nav-icon-tile--lg .lui-m_icon,
.lui-action-bar--flux-app .lui-nav-icon-tile--lg .lui-breadcrumb__icon {
  --lui-micon-size: 56px;
  width: 56px;
  height: 56px;
  max-width: none;
  max-height: none;
  overflow: visible;
}

/* Large identity crumb: keep pad around the tile (do not zero vertical). */
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-nav-icon-tile--lg),
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-breadcrumb__icon--lg),
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-nav-icon-tile--lg),
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-breadcrumb__icon--lg) {
  padding: 8px 12px;
}

.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-nav-icon-tile--lg) .lui-breadcrumb__label-group,
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-breadcrumb__icon--lg) .lui-breadcrumb__label-group,
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-nav-icon-tile--lg) .lui-breadcrumb__label-group,
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-breadcrumb__icon--lg) .lui-breadcrumb__label-group {
  gap: 12px;
}

.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-nav-icon-tile--lg) .heading-16,
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-nav-icon-tile--lg) .heading-16 {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Flux Apps + leading (store switcher): below 767px — same collapse as the
   Hubs attendance split — stack the control full-width under the logo row
   instead of squeezing it into the 96px identity line. Desktop unchanged. */
@media (max-width: 767px) {
  .lui-action-bar--flux-app:has(.lui-action-bar__leading) {
    height: auto;
    min-height: 96px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .lui-action-bar--flux-app:has(.lui-action-bar__leading) .lui-action-bar__start {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }

  .lui-action-bar--flux-app:has(.lui-action-bar__leading) .lui-action-bar__trail {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lui-action-bar--flux-app:has(.lui-action-bar__leading) .lui-action-bar__leading {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

.lui-action-bar--bordered {
  border-bottom: 1px solid var(--color-tertiary);
}

/* Empty state — LoopOS native (v1: no icons, no border) */
.lui-empty-state {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.lui-empty-state--default,
.lui-empty-state--action,
.lui-empty-state--link,
.lui-empty-state--filtered {
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 16px;
}

.lui-empty-state--text {
  gap: 0;
  padding: 12px 0;
  text-align: left;
}

.lui-empty-state--text.lui-empty-state--center,
.lui-empty-state--table {
  text-align: center;
  padding: 48px 16px;
}

.lui-empty-state--inline {
  gap: 0;
  padding: 10px 14px;
  text-align: left;
}

/* Author `display: flex` on `.lui-empty-state` beats Tailwind `.hidden`. */
.lui-empty-state.hidden,
.lui-empty-state[hidden] {
  display: none;
}

.lui-empty-state__body {
  max-width: 28rem;
}

.lui-empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Icon slot — reserved for v2 follow-up (native/empty-state.md) */
.lui-empty-state__icon {
  flex-shrink: 0;
}

.lui-tab-panel-error {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-danger-fg);
}

.lui-tab-notes__footer,
.lui-tab-attachments__footer {
  border: 1px dashed var(--color-tertiary);
}

.lui-tab-panel-divider {
  background: var(--color-tertiary);
}

/*
 * Note card — library-tile footer geometry inverted.
 * The shell keeps the continuous outer border; the foreground body overlaps that
 * border by 1px on the inline and bottom edges, so there is never a doubled line.
 */
.lui-card.lui-note-card {
  padding: 0;
  overflow: hidden;
  background: var(--color-secondary);
}

.lui-note-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-secondary);
}

.lui-note-card__header-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-note-card__header .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-note-card__title {
  min-width: 0;
}

.lui-note-card__meta {
  flex-shrink: 0;
  white-space: nowrap;
}

.lui-note-card__content {
  position: relative;
  z-index: 1;
  width: calc(100% + 2px);
  margin-inline: -1px;
  margin-bottom: -1px;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.lui-note-card__body,
.lui-note-card__editor {
  background: var(--color-background);
}

/* Author `.flex { display: flex }` beats the UA [hidden] rule — exclusivity for display↔edit. */
.lui-note-card__body[hidden],
.lui-note-card__editor[hidden],
.lui-note-card--composer[hidden],
.lui-note-card-create-actions[hidden],
.lui-note-card [data-note-card-target="editButton"][hidden] {
  display: none !important;
}

/* Markdown block editor — native note/operator-notes authoring (serializes Markdown). */
.lui-markdown-blocks {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-markdown-blocks:focus-within {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-markdown-blocks__canvas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--lui-markdown-blocks-min, 8rem);
  max-height: var(--lui-markdown-blocks-max, 20rem);
  padding: 8px;
  overflow-y: auto;
}

.lui-markdown-blocks__row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-markdown-blocks__row:not([data-type="numbered"]) {
  counter-reset: lui-md-ol;
}

.lui-markdown-blocks__row[data-type="numbered"] {
  counter-increment: lui-md-ol;
}

.lui-markdown-blocks__row[data-type="bullet"],
.lui-markdown-blocks__row[data-type="numbered"] {
  align-items: flex-start;
}

.lui-markdown-blocks__gutter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: grab;
  touch-action: none;
  opacity: 0;
}

.lui-markdown-blocks__row:hover .lui-markdown-blocks__gutter,
.lui-markdown-blocks__row:focus-within .lui-markdown-blocks__gutter,
.lui-markdown-blocks__gutter:focus-visible,
.lui-markdown-blocks__row--dragging .lui-markdown-blocks__gutter {
  opacity: 1;
}

@media (hover: none) {
  .lui-markdown-blocks__gutter {
    opacity: 1;
  }
}

.lui-markdown-blocks--dragging,
.lui-markdown-blocks--dragging * {
  cursor: grabbing;
  user-select: none;
}

.lui-markdown-blocks__row--dragging {
  opacity: 0.6;
}

.lui-markdown-blocks__marker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 16px;
  height: 18px;
  color: var(--color-content-secondary);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

.lui-markdown-blocks__marker[hidden] {
  display: none !important;
}

.lui-markdown-blocks__row[data-type="bullet"] .lui-markdown-blocks__marker::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.lui-markdown-blocks__row[data-type="numbered"] .lui-markdown-blocks__marker {
  min-width: 1.25rem;
}

.lui-markdown-blocks__row[data-type="numbered"] .lui-markdown-blocks__marker::before {
  content: counter(lui-md-ol) ".";
}

.lui-markdown-blocks__body {
  flex: 1;
  min-width: 0;
  min-height: 18px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-content);
}

.lui-markdown-blocks__row:not([data-type="bullet"]):not([data-type="numbered"]) .lui-markdown-blocks__body:empty:is(:focus, .is-focused)::before,
.lui-markdown-blocks__row:not([data-type="bullet"]):not([data-type="numbered"]) .lui-markdown-blocks__body.is-empty:is(:focus, .is-focused)::before,
.lui-markdown-blocks__row:not([data-type="bullet"]):not([data-type="numbered"]) .lui-markdown-blocks__body:has(> br:only-child):is(:focus, .is-focused)::before {
  display: block;
  content: attr(data-placeholder);
  color: var(--color-content-secondary);
  line-height: 18px;
  pointer-events: none;
}

.lui-markdown-blocks__row[data-type="quote"] .lui-markdown-blocks__body {
  border-left: 2px solid var(--color-tertiary);
  padding-left: 8px;
  color: var(--color-content-secondary);
}

.lui-markdown-blocks__row[data-type="code"] .lui-markdown-blocks__body,
.lui-markdown-blocks__row[data-type="raw"] .lui-markdown-blocks__body {
  padding: 8px;
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-markdown-blocks__divider-hit {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: text;
}

.lui-markdown-blocks__divider {
  display: block;
  height: 1px;
  background: var(--color-tertiary);
}

.lui-markdown-blocks__menu {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-height: 16rem;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-markdown-blocks__menu[hidden] {
  display: none !important;
}

.lui-autogrow__field,
textarea.lui-autogrow__field {
  display: block;
  width: 100%;
  min-height: var(--lui-autogrow-min, 2.5rem);
  max-height: var(--lui-autogrow-max, 13rem);
  resize: none;
  overflow-y: hidden;
}

/* display:block above would otherwise un-hide [hidden] autogrow textareas */
.lui-autogrow__field[hidden],
textarea.lui-autogrow__field[hidden] {
  display: none !important;
}

.lui-autogrow__field:focus-visible {
  outline: none;
}

.lui-attachment-list__item {
  border: 1px solid var(--color-tertiary);
}

.lui-attachment-list__item--surface {
  background: var(--color-secondary);
}

.lui-attachment-list__item--inline {
  padding: 10px 12px;
  border-radius: 6px;
}

.lui-attachment-list__thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.lui-attachment-list__thumb img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.8;
}

.lui-attachment-list__thumb--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.lui-attachment-list__thumb--link {
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lui-attachment-list__thumb--link:hover {
  border-color: var(--color-content-secondary);
  box-shadow: 0 0 0 1px var(--color-tertiary);
}

.lui-attachment-list__thumb--link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lui-table-empty {
  border: 1px dashed var(--color-tertiary);
  background: var(--color-secondary);
}

.lui-table-popover {
  transform: translateX(-50%);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-float-bar {
  position: fixed;
  bottom: calc(var(--lui-float-bar-inset-bottom, 24px) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: var(--lui-float-bar-z-index, 50);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 32px);
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  box-sizing: border-box;
  padding: 8px;
}

.lui-float-bar:not([hidden]) {
  animation: lui-float-bar-enter var(--default-transition-duration) var(--default-transition-timing-function);
}

@keyframes lui-float-bar-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lui-float-bar:not([hidden]) {
    animation: none;
  }
}

.lui-float-bar[hidden] {
  display: none !important;
}

.lui-float-bar__content {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding-left: 8px;
  padding-right: 8px;
}

.lui-float-bar--inline-edit .lui-float-bar__content {
  padding-left: 0;
  padding-right: 0;
}

.lui-float-bar--inline-edit .lui-float-bar__meta {
  font-weight: 400;
}

.lui-float-bar__meta {
  flex: none;
  white-space: nowrap;
  color: inherit;
}

.lui-float-bar__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.lui-float-bar__divider {
  flex: none;
  align-self: stretch;
  width: 1px;
  margin-block: 4px;
  background: var(--color-tertiary);
}

.lui-float-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* Phone: the bar is capped at the viewport (max-width above), so its content
   wraps (meta over actions) instead of running past the edge. A divider only
   separates items that share a line. */
@media (max-width: 32rem) {
  .lui-float-bar__divider {
    display: none;
  }
}

/* Modal — Flux app shell (Ui::ModalComponent + lui--modal).
   Visuals: 8px panel, border + shadow on panel, no header/footer dividers, dark backdrop.
   Centered via `:modal { top:50%; left:50%; translate:-50% -50% }` on the transparent <dialog> shell.
   Viewport height (default, non-fullscreen): flex column on .lui-modal__panel only — never on <dialog>.
   Body scrolls when content exceeds max-height: calc(100dvh - 6rem). */
.lui-modal {
  display: contents;
}

/* Native dialog — transparent shell; viewport center via fixed + translate (inset:0 breaks in Chrome).
   Width fills up to the size token (max-width); height clamps to the visual viewport so body can scroll. */
.lui-modal__dialog {
  box-sizing: border-box;
  width: calc(100vw - 2rem);
  max-width: 28rem;          /* default (md); size modifiers override */
  max-height: calc(100dvh - 6rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

/* Portaled Floating UI surfaces (icon picker, locale, …) are appended
   as siblings of .lui-modal__panel. Keep the panel clipped for radius; let the
   dialog paint those menus over the footer. Combobox uses popover instead —
   do not unclip the card for [popover] panels still in the form tree. */
.lui-modal__dialog:has([data-floating="true"]:not([popover])) {
  overflow: visible;
}

.lui-modal__dialog:modal {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: fit-content;
  max-height: calc(100dvh - 6rem);
}

.lui-modal__dialog--fullscreen:modal {
  top: 0;
  left: 0;
  translate: none;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.lui-modal__dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Slideover — Flux twin of loopos-ui-v2 rails-blocks/components/slideover.md
   Floating panel (shadow, no border); sides via --right/--left/--top/--bottom;
   horizontal sizes via .lui-slideover__panel--sm|md|lg|xl|full. */
.lui-slideover { display: contents; }

.lui-slideover__dialog {
  position: fixed;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: var(--lui-shadow-floating, 0 1px 4px rgba(33, 37, 41, 0.10));
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.lui-slideover__dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lui-slideover__dialog--right {
  inset: 0 0 0 auto;
  height: 100dvh;
  transform: translateX(100%);
}
.lui-slideover__dialog--left {
  inset: 0 auto 0 0;
  height: 100dvh;
  transform: translateX(-100%);
}
.lui-slideover__dialog--top {
  inset: 0 0 auto 0;
  width: 100%;
  transform: translateY(-100%);
}
.lui-slideover__dialog--bottom {
  inset: auto 0 0 0;
  width: 100%;
  transform: translateY(100%);
}
.lui-slideover__dialog[open] { transform: translate(0, 0); }

/* Slide-out — driven by .is-closing while [open] stays on the element.
   Never animate the close by removing [open]: close() is specified as a no-op
   without it, so the dialog would stay in the top layer and keep the document
   inert. Selectors include [open] to outrank .lui-slideover__dialog[open]. */
.lui-slideover__dialog--right[open].is-closing  { transform: translateX(100%); }
.lui-slideover__dialog--left[open].is-closing   { transform: translateX(-100%); }
.lui-slideover__dialog--top[open].is-closing    { transform: translateY(-100%); }
.lui-slideover__dialog--bottom[open].is-closing { transform: translateY(100%); }

.lui-slideover__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--color-background);
  color: var(--color-content);
}
.lui-slideover__dialog--top .lui-slideover__panel,
.lui-slideover__dialog--bottom .lui-slideover__panel {
  height: auto;
  max-height: 80dvh;
  width: 100%;
}

.lui-slideover__panel--sm   { width: 20rem; }
.lui-slideover__panel--md   { width: 26rem; }
.lui-slideover__panel--lg   { width: 32rem; }
.lui-slideover__panel--xl   { width: 40rem; }
.lui-slideover__panel--full { width: 100vw; }
@media (max-width: 640px) {
  .lui-slideover__panel--sm,
  .lui-slideover__panel--md,
  .lui-slideover__panel--lg,
  .lui-slideover__panel--xl { width: 100vw; }
}

.lui-slideover__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}
.lui-slideover__close:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
.lui-slideover__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-slideover__header {
  flex: none;
  padding: 1.25rem 3rem 1rem 1.5rem;
  border-bottom: 1px solid var(--color-tertiary);
}
.lui-slideover__title { color: var(--color-content); }

.lui-slideover__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.lui-slideover__footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  .lui-slideover__dialog { transition: none; }
}

/* Sizes */
.lui-modal__dialog--sm         { max-width: 24rem; }
.lui-modal__dialog--md         { max-width: 28rem; }
.lui-modal__dialog--lg         { max-width: 32rem; }
.lui-modal__dialog--xl         { max-width: 36rem; }
.lui-modal__dialog--2xl        { max-width: 42rem; }
.lui-modal__dialog--3xl        { max-width: 48rem; }
.lui-modal__dialog--4xl        { max-width: 54rem; }
.lui-modal__dialog--5xl        { max-width: 60rem; }
.lui-modal__dialog--6xl        { max-width: 66rem; }
.lui-modal__dialog--7xl        { max-width: 72rem; }
.lui-modal__dialog--fullscreen { width: 100%; max-width: 100%; height: 100%; }

/* Panel — bordered card; viewport-aware column by default (body scrolls when tall).
   Flex lives on the panel only — never on <dialog> (breaks viewport centering).
   Use the same dvh clamp as the dialog (not max-height: 100% — % fails when dialog height is fit-content). */
.lui-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - 6rem);
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  overflow: hidden;
}
.lui-modal__dialog--fullscreen .lui-modal__panel {
  border-radius: 0;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
}

/* Legacy alias — scrollable: true still adds this class; behavior is now the default. */
.lui-modal__dialog--scrollable .lui-modal__panel {
  max-height: calc(100dvh - 6rem);
  display: flex;
  flex-direction: column;
}

/* Icon-only close — inline in header or absolute on panel (show_close_button) */
.lui-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}
.lui-modal__close:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
.lui-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

/* Absolute corner close when Ui::ModalComponent show_close_button: true */
.lui-modal__panel > .lui-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* Inline close in header row — icon only, not lui-button */
.lui-modal__header .lui-modal__close {
  position: static;
}
.lui-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 16px 16px 12px;
}
.lui-modal__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.lui-modal__title { color: var(--color-content); }
.lui-modal__subtitle { color: var(--color-content-secondary); }

/* Tab strip below header (add-agent and similar) */
.lui-modal__tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

/* When tabs are the first block inside the body, bleed horizontally to panel edges */
.lui-modal__body > .lui-modal__tabs:first-child {
  margin: 0 -16px;
}

.lui-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 16px 12px;
}
.lui-modal__dialog--fullscreen .lui-modal__body { flex: 1; overflow-y: auto; }

/* Footer — use shared/buttons in markup; actions share available width equally */
.lui-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  /* Opaque and above the body. A tall form scrolls inside `.lui-modal__body`;
     a transparent footer lets the last row paint through the actions. */
  position: relative;
  z-index: 1;
  background: var(--color-background);
}

.lui-modal__footer > * {
  flex: 1 1 0;
  min-width: 0;
}

.lui-modal__footer .lui-button,
.lui-modal__footer .lui-modal__btn {
  width: 100%;
}

/* Safety: omit empty header/footer regions (no divider/padding) */
.lui-modal__header:empty,
.lui-modal__footer:empty {
  display: none;
}

/* Bounce (non-dismissible feedback) */
@keyframes lui-modal-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); }
}
.lui-modal__dialog--bounce .lui-modal__panel { animation: lui-modal-bounce 0.18s ease; }

@media (prefers-reduced-motion: reduce) {
  .lui-modal__dialog--bounce .lui-modal__panel { animation: none; }
}

/* Confirm dialog — native <dialog> + danger confirmation panel (setup deletes) */
.lui-confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  max-width: 28rem;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  /* The trigger often lives in a row-actions cell, which is `nowrap`; the panel
     is in the top layer and must not inherit the cell's text layout. */
  white-space: normal;
}

.lui-confirm-dialog:modal {
  position: fixed;
  /* The UA sheet sets `inset: 0` on a modal dialog; with `height: auto` the
     box then stretches from 50% to the bottom edge and the panel sits above
     the viewport centre. Release the far edges so the box hugs the panel. */
  inset: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: auto;
}

.lui-confirm-dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lui-confirm-dialog__panel {
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  overflow: hidden;
}

.lui-confirm-dialog__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 16px 0;
}

/* Extra bottom padding when a body block sits between header and footer (no divider — matches lui-modal) */
.lui-confirm-dialog__header:has(+ .lui-confirm-dialog__body:not([hidden])) {
  padding-bottom: 12px;
}

.lui-confirm-dialog__header .lui-confirmation__icon {
  flex: none;
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
  color: var(--color-danger);
}

.lui-confirm-dialog__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-content);
}

.lui-confirm-dialog__body {
  padding: 12px 16px 16px;
}

.lui-confirm-dialog__body[hidden] {
  display: none;
}

/* Footer — same equal-width actions as lui-modal__footer */
.lui-confirm-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
}

.lui-confirm-dialog__footer > * {
  flex: 1 1 0;
  min-width: 0;
}

.lui-confirm-dialog__footer .lui-button {
  width: 100%;
}

/* Extra header padding when there is no body (spacing only — no header/footer dividers) */
.lui-confirm-dialog__header:not(:has(+ .lui-confirm-dialog__body:not([hidden]))) {
  padding-bottom: 16px;
}

/* Confirmation — type-to-confirm / acknowledgement panel (skill: confirmation.md) */
.lui-confirmation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 28rem;
  color: var(--color-content);
}
.lui-confirmation--carded {
  padding: 20px;
  border-radius: 12px; /* rounded-xl */
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-confirmation__header { display: flex; gap: 10px; align-items: flex-start; }
.lui-confirmation__icon { font-size: 20px; line-height: 1; margin-top: 2px; color: var(--color-foreground); }
.lui-confirmation__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lui-confirmation__title { color: var(--color-content); }
.lui-confirmation__message { color: var(--color-content-secondary); }

/* Variant accents the header icon only */
.lui-confirmation--danger  .lui-confirmation__icon { color: var(--color-danger); }
.lui-confirmation--warning .lui-confirmation__icon { color: var(--color-warning); }
.lui-confirmation--info    .lui-confirmation__icon { color: var(--color-informative); }
.lui-confirmation--neutral .lui-confirmation__icon { color: var(--color-foreground); }

.lui-confirmation__form  { display: flex; flex-direction: column; gap: 8px; }
.lui-confirmation__field { display: flex; flex-direction: column; gap: 6px; }
.lui-confirmation__label { color: var(--color-content); }
.lui-confirmation__help  { color: var(--color-content-secondary); }
.lui-confirmation__code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-primary);
  color: var(--color-content);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lui-confirmation__input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
}
.lui-confirmation__input::placeholder { color: var(--color-foreground); }
.lui-confirmation__input:focus-visible {
  outline: none;
  border-color: var(--color-app);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-app) 25%, transparent);
}

.lui-confirmation__checks { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.lui-confirmation__check { display: flex; align-items: center; gap: 8px; color: var(--color-content); cursor: pointer; }
.lui-confirmation__check input { accent-color: var(--color-app); }

.lui-confirmation__actions { display: flex; gap: 12px; justify-content: flex-end; }
.lui-confirmation__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 100ms ease, opacity 100ms ease;
}
.lui-confirmation__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

/* Cancel — neutral outlined */
.lui-confirmation__btn--cancel {
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
}
.lui-confirmation__btn--cancel:hover { background: var(--color-secondary); }

/* Confirm — variant-filled, dims when disabled */
.lui-confirmation__btn--confirm {
  border: 1px solid transparent;
  background: var(--color-content);
  color: var(--color-background);
}
.lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-content) 85%, black); }
.lui-confirmation--danger  .lui-confirmation__btn--confirm { background: var(--color-danger);      color: var(--color-danger-fg); }
.lui-confirmation--warning .lui-confirmation__btn--confirm { background: var(--color-warning);     color: var(--color-warning-fg); }
.lui-confirmation--info    .lui-confirmation__btn--confirm { background: var(--color-informative); color: var(--color-informative-fg); }
.lui-confirmation--danger  .lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); }
.lui-confirmation--warning .lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-warning) 85%, black); }
.lui-confirmation--info    .lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-informative) 85%, black); }
.lui-confirmation__btn--confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.lui-confirmation__btn--confirm:disabled:hover { background: var(--color-content); }
.lui-confirmation--danger  .lui-confirmation__btn--confirm:disabled:hover { background: var(--color-danger); }
.lui-confirmation--warning .lui-confirmation__btn--confirm:disabled:hover { background: var(--color-warning); }
.lui-confirmation--info    .lui-confirmation__btn--confirm:disabled:hover { background: var(--color-informative); }

.lui-icon-field__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-table-col-min {
  min-width: var(--lui-col-min-width);
  width: auto;
}

.lui-table-col-max {
  max-width: var(--lui-col-max-width);
}

/* A table column shown only from a real breakpoint up (this app has no
   Tailwind — `sm:table-cell` is not a thing here, and `.hidden` alone is an
   unconditional `display: none` that a non-existent responsive prefix never
   overrides back on). `<th>`/`<td>` both compute to `display: table-cell` by
   default, so one rule covers either. */
.lui-table-col--sm-up { display: none; }
@media (min-width: 640px) {
  .lui-table-col--sm-up { display: table-cell; }
}

.lui-table__head th.lui-table-col-max,
.lui-table__head .lui-table__th.lui-table-col-max,
.lui-datatable__head .lui-table__th.lui-table-col-max,
.lui-table__body td.lui-table-col-max,
.lui-datatable__body td.lui-table-col-max {
  overflow: hidden;
}

.lui-table__cell--token-list {
  overflow: hidden;
}

/* SSO providers index — fixed admin portal column; toggle at end without layout shift */
.sso-providers-table .lui-table__table {
  table-layout: fixed;
}

.sso-providers-table__admin-portal-col {
  width: 15rem;
  min-width: 15rem;
  max-width: 15rem;
}

.sso-admin-portal-cell__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.sso-admin-portal-cell__badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.sso-admin-portal-cell__secondary {
  display: inline-grid;
  flex-shrink: 0;
}

.sso-admin-portal-cell__secondary-slot {
  grid-area: 1 / 1;
  visibility: hidden;
}

.sso-admin-portal-cell__secondary-slot--visible {
  visibility: visible;
}

.sso-admin-portal-cell__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.lui-metadata-core-badge {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-informative-fg);
}

.lui-tab-identifiers {
  max-width: 400px;
}

.lui-overlay-scroll {
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.lui-section-divider {
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-dashboard-activity-row__dot {
  background: var(--color-chrome-accent);
}

.lui-logs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.lui-logs--stepper {
  gap: 0;
}

.lui-logs--dense {
  gap: 8px;
}

.lui-logs__day-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.lui-logs__day-header::before,
.lui-logs__day-header::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-tertiary);
}

.lui-logs__day-label {
  flex: 0 0 auto;
  color: var(--color-content-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lui-logs__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-logs__row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 12px 16px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-logs--dense .lui-logs__row {
  margin-bottom: 4px;
  padding: 6px 8px;
}

.lui-logs__row:hover {
  background: var(--color-secondary);
}

.lui-logs__row--last {
  margin-bottom: 0;
}

.lui-logs__row--no-time {
  grid-template-columns: minmax(0, 1fr);
}

.lui-logs__time {
  justify-self: start;
  padding-top: 2px;
  white-space: nowrap;
}

.lui-logs__main {
  min-width: 0;
  width: 100%;
}

.lui-logs__content {
  display: flex;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.lui-logs__body {
  flex: 1 1 auto;
  min-width: 0;
}

.lui-logs__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 20px;
}

.lui-logs__connector {
  position: absolute;
  top: 24px;
  bottom: -20px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--color-tertiary);
}

.lui-logs__row--last .lui-logs__connector {
  display: none;
}

.lui-logs--stepper .lui-logs__connector {
  top: 16px;
}

.lui-logs__dot {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 9999px;
  flex: 0 0 auto;
  background: var(--color-informative);
}

.lui-logs__dot--active {
  background: var(--color-informative);
}

.lui-logs__dot--inactive {
  background: var(--color-tertiary);
}

.lui-logs__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.lui-logs__lead {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-logs__summary {
  min-width: 0;
}

/* The entry is the open control. It must not restyle the summary as a link. */
.lui-logs__entry {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.lui-logs__entry:hover,
.lui-logs__entry:focus {
  color: inherit;
  text-decoration: none;
}

.lui-logs__entry:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.lui-logs__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lui-logs__meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  padding-left: 16px;
}

.lui-logs__transition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.lui-logs__note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-metadata-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-metadata-grid--fields {
  --lui-metadata-grid-columns: minmax(5.5rem, 0.72fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(6rem, 0.82fr) 2.75rem 2.25rem;
}

.lui-metadata-grid--attachments {
  --lui-metadata-grid-columns: 2.75rem minmax(5.5rem, 0.75fr) minmax(8rem, 1.2fr) minmax(10rem, 1.4fr) 4.5rem 2.25rem;
}

.lui-metadata-grid--sets {
  --lui-metadata-grid-columns: minmax(10rem, 1fr) minmax(11rem, 1.15fr) minmax(12rem, 1.2fr) 2.25rem;
}

.lui-metadata-grid--values {
  --lui-metadata-grid-columns: minmax(0, 1fr) 4.5rem;
}

.lui-metadata-grid--params {
  --lui-metadata-grid-columns: minmax(0, 1fr) 5.75rem;
}

/* An agent's custom parameters (`agents_portal/agents/_parameters_section`): name, description, token limit,
   cut side, used, remove. The card is often half the main column (beside «General context»), so the rows follow
   the card's width, not the viewport's: stacked by default (name + status, description, limit), one line each
   from a 52rem wide card. */
.lui-agent-params {
  display: flex;
  flex-direction: column;
  gap: 12px;
  container-type: inline-size;
  min-width: 0;
}

.lui-agent-params [hidden] {
  display: none !important;
}

.lui-metadata-grid--agent-params {
  --lui-metadata-grid-columns: minmax(0, 1fr);
}

.lui-metadata-grid--agent-params .lui-metadata-grid__head {
  display: none;
}

.lui-metadata-grid__row.lui-agent-param__row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "name status actions"
    "description description description"
    "limit limit limit";
  column-gap: 12px;
  row-gap: 8px;
}

.lui-agent-params--readonly .lui-metadata-grid__row.lui-agent-param__row {
  grid-template-areas:
    "name status status"
    "description description description"
    "limit limit limit";
}

/* «Max tokens» and «Keep the end» on one line of a stacked row. */
.lui-agent-param__limit {
  grid-area: limit;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}

/* A description is read whole: no resize handle, one line when it is short. */
.lui-agent-param__description {
  resize: none;
  line-height: 18px;
}

.lui-agent-param__cell--name { grid-area: name; }
.lui-agent-param__cell--description { grid-area: description; }
.lui-agent-param__cell--max { display: flex; align-items: center; gap: 8px; }
.lui-agent-param__cell--keep { display: flex; align-items: center; }
.lui-agent-param__cell--status { grid-area: status; }
.lui-agent-param__cell--actions { grid-area: actions; }

.lui-metadata-grid__cell.lui-agent-param__cell--max .lui-forms__control {
  width: 7rem;
  flex: 0 0 auto;
}

.lui-agent-param__label {
  white-space: nowrap;
}

.lui-agent-param__flags {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}

@container (min-width: 52rem) {
  .lui-metadata-grid--agent-params .lui-metadata-grid__head,
  .lui-metadata-grid__row.lui-agent-param__row {
    grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.6fr) 6rem 8.5rem 6.5rem 2.25rem;
  }

  .lui-metadata-grid--agent-params .lui-metadata-grid__head {
    display: grid;
  }

  .lui-metadata-grid__row.lui-agent-param__row {
    grid-template-areas: "name description max keep status actions";
    align-items: start;
  }

  .lui-agent-param__limit { display: contents; }
  .lui-agent-param__cell--max { grid-area: max; }
  .lui-agent-param__cell--keep { grid-area: keep; min-height: 32px; }
  .lui-agent-param__cell--status { min-height: 32px; display: flex; align-items: center; }

  .lui-agent-params--readonly .lui-metadata-grid__head,
  .lui-agent-params--readonly .lui-metadata-grid__row.lui-agent-param__row {
    grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.6fr) 6rem 8.5rem 6.5rem;
  }

  .lui-agent-params--readonly .lui-metadata-grid__row.lui-agent-param__row {
    grid-template-areas: "name description max keep status";
  }

  .lui-metadata-grid__cell.lui-agent-param__cell--max .lui-forms__control {
    width: 100%;
  }

  .lui-agent-param__flags {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  /* The header names the columns: the labels in the cells are for the stacked rows only. */
  .lui-agent-param__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.lui-agent-params__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The platform's sources: a long list, so the menu scrolls inside. */
.lui-agent-params__menu .lui-dropdown__list,
.lui-agent-instruction__menu .lui-dropdown__list {
  max-height: min(22rem, 60vh);
  overflow-y: auto;
}

.lui-agent-params__menu-title {
  padding: 6px 10px 4px;
}

.lui-metadata-grid--values-readonly {
  --lui-metadata-grid-columns: minmax(0, 1fr);
}

.lui-metadata-grid--entries {
  --lui-metadata-grid-columns: minmax(10rem, 0.9fr) minmax(0, 1.2fr) 2.75rem;
}

.lui-metadata-grid--entries-readonly {
  --lui-metadata-grid-columns: minmax(10rem, 0.9fr) minmax(0, 1.2fr);
}

.lui-metadata-grid--order-lines {
  --lui-metadata-grid-columns: minmax(8rem, 1.1fr) minmax(8rem, 1.3fr) 5.5rem 6.5rem 6.5rem 2.25rem;
}

.lui-metadata-grid--extra-parts {
  --lui-metadata-grid-columns: minmax(0, 1fr) 7rem 2.25rem;
}

.lui-metadata-grid--extra-parts .lui-metadata-grid__head,
.lui-metadata-grid--extra-parts .lui-metadata-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 2.25rem;
  column-gap: 8px;
  align-items: center;
}

.lui-metadata-grid--order-lines .lui-metadata-grid__row,
.lui-metadata-grid--extra-parts .lui-metadata-grid__row {
  align-items: center;
}

.lui-metadata-grid--order-lines .lui-forms__control,
.lui-metadata-grid--order-lines .spare-parts-order-line__sku,
.lui-metadata-grid--order-lines .spare-parts-order-line__lead,
.lui-metadata-grid--order-lines .lui-number-input,
.lui-metadata-grid--extra-parts .lui-forms__control,
.lui-metadata-grid--extra-parts .lui-select,
.lui-metadata-grid--extra-parts .lui-number-input {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.spare-parts-order-line__sku {
  position: relative;
}

.spare-parts-order-line__suggestions {
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 18rem;
  max-height: 240px;
  overflow: auto;
  overscroll-behavior: contain;
}

.spare-parts-order-line__suggestions[hidden] {
  display: none !important;
}

.spare-parts-order-line__suggestion {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--color-content);
  cursor: pointer;
}

.spare-parts-order-line__suggestion:hover {
  background: var(--color-secondary);
}

.spare-parts-order-line__suggestion--create {
  border-top: 1px solid var(--color-tertiary);
  border-radius: 0;
}

.spare-parts-order-line__suggestion--empty {
  cursor: default;
  color: var(--color-content-secondary);
}

.spare-parts-order-line__suggestion--empty:hover {
  background: transparent;
}

.spare-parts-order-line__lead {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spare-parts-order-line__lead .lui-number-input {
  flex: 1 1 auto;
  min-width: 0;
}

.lui-metadata-grid--order-lines .lui-number-input {
  width: 100%;
}

/* «Consult parts» / «Order parts» — disabled outline buttons, each wrapped in a
   tooltip trigger so the hover still reaches the «coming soon» tip. */
.spare-parts-new-order-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spare-parts-new-order-tools__item {
  display: inline-flex;
  min-width: 0;
}

.spare-parts-new-order-tools__item.lui-tooltip__trigger {
  display: inline-flex;
}

.spare-parts-new-order-tools__item .lui-button:disabled,
.spare-parts-new-order-tools__item .lui-button[aria-disabled="true"] {
  pointer-events: none;
}

.spare-parts-new-order-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px;
}

.spare-parts-new-order-fields__wide {
  flex: 2 1 10rem;
  min-width: 0;
}

.spare-parts-new-order-add {
  align-self: start;
  width: auto;
}

.lui-metadata-grid__head,
.lui-metadata-grid__row {
  display: grid;
  grid-template-columns: var(--lui-metadata-grid-columns);
  column-gap: 8px;
}

.lui-metadata-grid__head {
  align-items: end;
  padding-block: 0;
  padding-inline: 16px;
  font-weight: 400;
}

.lui-metadata-grid__head .lui-metadata-grid__cell {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-content-secondary);
}

.lui-metadata-grid__head .lui-metadata-grid__cell.copy-13-medium,
.lui-metadata-grid__head .lui-metadata-grid__cell.copy-12-medium,
.lui-metadata-grid__head .lui-metadata-grid__cell .lui-table__th-label {
  font-weight: 400;
}

.lui-metadata-grid__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-metadata-grid__card {
  border: none;
  border-radius: 6px;
  background: var(--color-secondary);
  overflow: visible;
}

.lui-metadata-grid__row {
  align-items: center;
  padding-block: 8px;
  padding-inline: 12px;
}

.lui-metadata-grid--entries .lui-metadata-grid__row,
.lui-metadata-grid--entries-readonly .lui-metadata-grid__row {
  align-items: start;
}

.lui-metadata-grid__cell {
  min-width: 0;
  overflow: visible;
}

.lui-metadata-grid__cell .lui-forms__control,
.lui-metadata-grid__cell .lui-combobox,
.lui-metadata-grid__cell .lui-select,
.lui-metadata-grid__cell .lui-filter-pill-group,
.lui-metadata-grid__cell .lui-checkbox-select-all {
  width: 100%;
}

.lui-metadata-grid__cell--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lui-metadata-grid__cell--actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.lui-metadata-dataset__json {
  --lui-script-editor-min-height: 12rem;
  margin-top: 0;
}

.lui-metadata-dataset__json .lui-script-editor__surface .cm-editor {
  min-height: 12rem;
}

.lui-metadata-tree {
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-background);
  container: metadata-tree / inline-size;
}

.lui-metadata-tree__head,
.lui-metadata-tree__row {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
}

.lui-metadata-tree__head-cell {
  padding: 8px 12px;
}

.lui-metadata-tree__body {
  display: flex;
  flex-direction: column;
}

.lui-metadata-tree__row {
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-metadata-tree__row[hidden] {
  display: none;
}

.lui-metadata-tree__key {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 7px 12px;
}

.lui-metadata-tree__key--depth-1 { padding-inline-start: 32px; }
.lui-metadata-tree__key--depth-2 { padding-inline-start: 52px; }
.lui-metadata-tree__key--depth-3 { padding-inline-start: 72px; }
.lui-metadata-tree__key--depth-4 { padding-inline-start: 92px; }

.lui-metadata-tree__label,
.lui-metadata-tree__value-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lui-metadata-tree__value-cell {
  padding: 7px 12px;
}

.lui-metadata-tree__row--group .lui-metadata-tree__value-cell {
  padding: 0;
}

.lui-metadata-tree__label {
  flex: 1;
  min-width: 0;
}

.lui-metadata-tree__leaf-key {
  color: var(--color-content-secondary);
  word-break: break-all;
}

.lui-metadata-tree__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  min-width: 0;
}

.lui-metadata-tree__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--color-content));
  outline-offset: 2px;
  border-radius: 4px;
}

.lui-metadata-tree__chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-content-secondary);
  transform: rotate(0deg);
}

.lui-metadata-tree__toggle[aria-expanded="false"] .lui-metadata-tree__chevron {
  transform: rotate(-90deg);
}

.lui-metadata-tree__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lui-metadata-tree__value--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-metadata-tree__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lui-metadata-tree__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  color: var(--color-content);
}

.lui-metadata-tree__row:hover {
  background: color-mix(in srgb, var(--color-content) 4%, var(--color-background));
}

/* Narrow tree (phone, side panel): key over value instead of two columns.
   The container is the tree itself, so every page that renders it gets this. */
@container metadata-tree (max-width: 28rem) {
  .lui-metadata-tree__head {
    display: none;
  }

  .lui-metadata-tree__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lui-metadata-tree__key {
    padding-bottom: 0;
  }

  .lui-metadata-tree__value-cell {
    padding-top: 2px;
  }

  .lui-metadata-tree__row--group .lui-metadata-tree__value-cell {
    padding: 0;
  }

  .lui-metadata-tree__key--depth-1 { padding-inline-start: 24px; }
  .lui-metadata-tree__key--depth-2 { padding-inline-start: 36px; }
  .lui-metadata-tree__key--depth-3 { padding-inline-start: 48px; }
  .lui-metadata-tree__key--depth-4 { padding-inline-start: 60px; }

  /* Stacked, the value sits under its key, so it carries the key's indent
     (in two columns the value column needs none). Group rows keep padding 0. */
  .lui-metadata-tree__value-cell--depth-1 { padding-inline-start: 24px; }
  .lui-metadata-tree__value-cell--depth-2 { padding-inline-start: 36px; }
  .lui-metadata-tree__value-cell--depth-3 { padding-inline-start: 48px; }
  .lui-metadata-tree__value-cell--depth-4 { padding-inline-start: 60px; }
}

.lui-code-block {
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

/* Soft-wrap pretty JSON — keep newlines/indent; break long tokens instead of h-scroll.
   Display-only: does not alter textContent / clipboard payload. */
.lui-code-block--wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  overflow-x: hidden;
}

.lui-clipboard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-content);
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.lui-clipboard:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lui-clipboard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-clipboard__content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lui-clipboard__content[hidden] {
  display: none;
}

.lui-clipboard__content--copied {
  color: var(--color-success-fg);
}

.lui-clipboard__icon {
  font-size: 16px;
  line-height: 1;
}

.lui-clipboard--sm {
  padding: 4px 10px;
  gap: 4px;
}

.lui-clipboard--sm .lui-clipboard__icon {
  font-size: 14px;
}

.lui-clipboard--md {
  padding: 6px 14px;
}

.lui-clipboard--lg {
  padding: 10px 18px;
  gap: 8px;
}

.lui-clipboard--lg .lui-clipboard__icon {
  font-size: 18px;
}

.lui-clipboard--icon-only.lui-clipboard--sm {
  padding: 4px;
}

.lui-clipboard--icon-only.lui-clipboard--md {
  padding: 6px;
}

.lui-clipboard--icon-only.lui-clipboard--lg {
  padding: 8px;
}

.lui-clipboard--primary {
  background: var(--color-content);
  color: var(--color-background);
}

.lui-clipboard--primary:hover {
  background: color-mix(in srgb, var(--color-content) 85%, var(--color-background));
}

.lui-clipboard--secondary {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-clipboard--secondary:hover {
  background: color-mix(in srgb, var(--color-content) 8%, var(--color-secondary));
}

.lui-clipboard--outline {
  background: transparent;
  border-color: var(--color-tertiary);
  color: var(--color-content);
}

.lui-clipboard--outline:hover {
  background: var(--color-secondary);
}

.lui-clipboard--ghost {
  background: transparent;
  color: var(--color-content);
}

.lui-clipboard--ghost:hover {
  background: var(--color-secondary);
}

.lui-clipboard__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--color-content);
  color: var(--color-background);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.10);
  pointer-events: none;
}

.lui-clipboard__tooltip[hidden] {
  display: none;
}

.lui-clipboard__tooltip--error {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-danger-fg);
}

.lui-code-block::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.lui-code-block::-webkit-scrollbar-track {
  background: transparent;
}

.lui-code-block::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 24%, transparent);
  background-clip: content-box;
  border: 1px solid transparent;
  border-radius: 9999px;
}

/* Auto-fit grid for fields and label/value cells: as many columns as fit, one on a
   phone. This app's CSS ships no `md:grid-cols-2` Tailwind variant, so use this. */
.lui-forms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 12px 16px;
  align-items: start;
}

.lui-forms__grid > .lui-forms__group {
  max-width: none;
}

.lui-forms__grid > .lui-forms__grid__span {
  grid-column: 1 / -1;
}

/* Agents show — context checkgrid and tools list: compact tiles in a grid
   (as many columns as fit), one column on a phone. */
.lui-agent-show-checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 8px;
}

.lui-agent-show-checkitem {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  min-width: 0;
}

.lui-agent-show-checkitem__indicator {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-content-secondary);
}

.lui-agent-show-checkitem--interactive {
  cursor: pointer;
}

.lui-agent-show-checkitem--interactive:hover {
  background: var(--color-secondary);
}

/* A tool's tile (the «Tools» card, `agents_portal/agents/_tools_card`): under the title, what it does (two
   lines at most), its key and, for a tool that writes, the «Writes» badge with the scope it needs. */
.lui-agent-show-tool__description {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-agent-show-tool__key {
  display: block;
  overflow-wrap: anywhere;
}

.lui-agent-show-tool__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
}

/* The parameters a tool takes, under its description: the names in one wrapping line, an optional
   one dimmed; type, default, ceiling and meaning in the tooltip of each. */
.lui-agent-show-tool__params {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin-top: 4px;
  min-width: 0;
}

.lui-agent-show-tool__param {
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.lui-agent-show-tool__param--optional {
  opacity: 0.7;
}

/* Agent context — the blocks of one model (a row per block: include + max tokens), inside the model's item of
   the «Context per model» card. Scrolls inside its own box when it does not fit; below 40rem it stacks its fields. */
.lui-context-matrix__scroll {
  overflow-x: auto;
}

.lui-context-matrix__table {
  width: 100%;
  border-collapse: collapse;
}

.lui-context-matrix__table th,
.lui-context-matrix__table td {
  padding: 4px 8px 4px 0;
  text-align: left;
  vertical-align: middle;
}

.lui-context-matrix__table thead th {
  font-weight: 500;
}

.lui-context-matrix__table tbody tr + tr > * {
  border-top: 1px solid var(--color-tertiary);
}

.lui-context-matrix__cell--name {
  min-width: 6.5rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* The notes block's «only these subkinds» field, under the block's name (FLUX-8 §7.7.1). */
.lui-context-matrix__subkinds-label {
  display: block;
  margin-top: 0.375rem;
  margin-bottom: 0.25rem;
}

.lui-context-matrix__cell--include {
  width: 8.5rem;
  min-width: 6rem;
}

.lui-context-matrix__cell--number {
  width: 6.5rem;
  min-width: 5.5rem;
  padding-right: 0;
}

/* Agent page — the «Agent» tab in two columns. The instruction is the main card; the
   identity, the model (with how it runs) and the output schema are a narrow column on the
   right from 1024px. The page scrolls once: no column has a height of its own or a scroll of its
   own — the side column is as tall as its cards and goes with the page, and the editors below grow
   with what is in them. Below, one column in the order Instruction, Identity + Model +
   Output schema, the rest: the grid areas reorder the three blocks, the markup is written once. */
.lui-agent-definition {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "instruction"
    "side"
    "rest";
  gap: 16px;
  align-items: start;
}

.lui-agent-definition__instruction { grid-area: instruction; min-width: 0; }
.lui-agent-definition__side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.lui-agent-definition__rest { grid-area: rest; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 1024px) {
  .lui-agent-definition {
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 26vw, 26rem);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "instruction side"
      "rest side";
  }

  .lui-agent-definition__side {
    align-self: start;
  }
}

/* One scroll, the page's: the instruction editor (CodeMirror, or the rendered markdown of a
   definition that is code) grows with its content instead of scrolling inside its card — `min-height`
   (`--lui-md-min`) is its floor, the `max_height` the view gives it does not apply here. A long code
   block still scrolls sideways on its own (`pre` below, and the editor wraps its lines). */
.lui-agent-definition .lui-md-editor .cm-editor,
.lui-agent-definition .lui-md-editor__rendered {
  max-height: none;
}

.lui-agent-definition__primary {
  border-color: color-mix(in srgb, var(--color-chrome-accent) 25%, var(--color-tertiary));
}

/* General context and Parameters side by side from 1280px (stacked below, General context first). */
.lui-agent-definition__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

@media (min-width: 1280px) {
  .lui-agent-definition__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lui-agent-params-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

/* Under the instruction's editor (`agents_portal/agents/_instruction_parameters`): «Insert parameter» and
   what is wrong with the instruction (a variable that is not declared, a Liquid error). */
.lui-agent-instruction {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.lui-tab-panel-card__body > .lui-list.lui-agent-context-list .lui-list__items {
  gap: 8px;
  padding: 0 12px 12px;
}

.lui-tab-panel-card__body > .lui-list.lui-agent-context-list .lui-list__item {
  background: var(--color-secondary);
  border-radius: 6px;
}

.lui-tab-panel-card__body > .lui-list.lui-agent-context-list.lui-list--hoverable .lui-list__item:hover,
.lui-tab-panel-card__body > .lui-list.lui-agent-context-list.lui-list--hoverable .lui-list__item:focus-within {
  background: color-mix(in srgb, var(--color-content) 6%, var(--color-secondary));
}

.lui-agent-show-tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.lui-agent-instruction [hidden] {
  display: none !important;
}

.lui-agent-instruction__menu .lui-dropdown__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: normal;
  max-width: 26rem;
}

.lui-agent-instruction__menu-help {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-agent-instruction__menu-empty {
  padding: 8px 10px;
  max-width: 22rem;
}

/* The JSON schema fills its card in the side column: monospace, no wrapping, as tall as its content
   (from 10rem) — no scroll of its own, the page scrolls; a long line scrolls sideways. */
textarea.lui-agent-schema-editor {
  min-height: 10rem;
  field-sizing: content;
  overflow-x: auto;
  overflow-y: hidden;
  resize: none;
  white-space: pre;
  tab-size: 2;
}

.lui-agent-schema-example summary {
  cursor: pointer;
  width: fit-content;
}

/* Agent page header — name, description and key are fields that read as text: no box until
   hover or focus, a pencil beside the name. */
.lui-agent-header-field {
  min-width: 0;
  max-width: 100%;
}

.lui-agent-header-field__row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-agent-header-field__pencil {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-content-secondary);
  opacity: 0;
  transition: opacity 120ms ease;
}

.lui-agent-header-field--title:hover .lui-agent-header-field__pencil,
.lui-agent-header-field--title:focus-within .lui-agent-header-field__pencil {
  opacity: 1;
}

.lui-agent-header-input.lui-forms__control {
  width: 100%;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-overflow: ellipsis;
}

.lui-agent-header-input.lui-forms__control:hover {
  background: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.lui-agent-header-input.lui-forms__control:focus,
.lui-agent-header-input.lui-forms__control:focus-visible {
  background: var(--color-background);
  border-color: var(--color-chrome-accent);
}

.lui-agent-header-input--description.lui-forms__control {
  resize: none;
  max-width: 48rem;
  min-height: 0;
  padding: 4px 6px;
}

.lui-agent-header-input--key.lui-forms__control {
  width: 18rem;
  max-width: 100%;
  padding: 2px 6px;
}

.lui-agent-header-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.lui-agent-header-key__notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  padding: 8px 10px;
  max-width: 48rem;
  border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-tertiary));
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-warning) 10%, var(--color-background));
  color: var(--color-warning-fg);
}

.lui-agent-header-key__notice[hidden] {
  display: none;
}

.lui-agent-header-key__notice .material-symbols-rounded {
  font-size: 18px;
  flex-shrink: 0;
}

/* Identity card — the translations, one accordion item per language. */
.lui-agent-translations {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-agent-translations__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lui-agent-translations__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.lui-agent-locale + .lui-agent-locale {
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-locale__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  background: var(--color-background);
}

.lui-agent-locale__summary:hover {
  background: var(--color-secondary);
}

.lui-agent-locale__status {
  margin-left: auto;
}

.lui-agent-locale__status[hidden] {
  display: none;
}

.lui-agent-locale__body {
  padding: 8px 10px 12px;
  background: var(--color-primary);
}

/* «Evals» tab — one row per suite: id and description (cut, «see more»), number of cases, action. */
.lui-agent-evals {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.lui-agent-eval {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 8px 16px;
  padding: 12px;
}

.lui-agent-eval + .lui-agent-eval {
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-eval__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.lui-agent-eval__id {
  overflow-wrap: anywhere;
}

.lui-agent-eval__cases {
  white-space: nowrap;
  padding-top: 4px;
}

.lui-agent-eval__actions:empty {
  display: none;
}

.lui-agent-eval__description summary {
  cursor: pointer;
  list-style: none;
}

.lui-agent-eval__description summary::-webkit-details-marker {
  display: none;
}

.lui-agent-eval__toggle {
  margin-left: 4px;
  color: var(--color-chrome-accent);
}

.lui-agent-eval__less,
.lui-agent-eval__description[open] .lui-agent-eval__more {
  display: none;
}

.lui-agent-eval__description[open] .lui-agent-eval__less {
  display: inline;
}

.lui-agent-eval__description[open] .lui-agent-eval__short {
  display: none;
}

@media (max-width: 639px) {
  .lui-agent-eval {
    grid-template-columns: minmax(0, 1fr);
  }

  .lui-agent-eval__cases {
    padding-top: 0;
  }
}

/* «Manual evals» (agents_portal/agents/_manual_evals) — read-only: the cases, the command that runs them, and the
   recorded runs (a model × case comparison, then each run opening on its case runs). `<details>`, no JavaScript. */
.lui-agent-manual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lui-agent-manual__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-agent-manual__commands {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-agent-manual__command {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lui-agent-manual__command-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-agent-manual__command-line code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
}

.lui-agent-manual__files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.lui-agent-manual__checks {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-agent-manual__notes summary,
.lui-agent-manual__run-summary,
.lui-agent-manual__case-summary {
  cursor: pointer;
  list-style: none;
}

.lui-agent-manual__notes summary::-webkit-details-marker,
.lui-agent-manual__run-summary::-webkit-details-marker,
.lui-agent-manual__case-summary::-webkit-details-marker {
  display: none;
}

.lui-agent-manual__summary-link {
  color: var(--color-chrome-accent);
}

.lui-agent-manual__cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.lui-agent-manual__cell--passed .material-symbols-rounded,
.lui-agent-manual__assertion--passed .material-symbols-rounded {
  color: var(--color-success-fg);
}

.lui-agent-manual__cell--failed .material-symbols-rounded,
.lui-agent-manual__cell--errored .material-symbols-rounded,
.lui-agent-manual__assertion--failed .material-symbols-rounded {
  color: var(--color-danger-fg);
}

.lui-agent-manual__runs {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.lui-agent-manual__run + .lui-agent-manual__run {
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-manual__run-summary,
.lui-agent-manual__case-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
}

.lui-agent-manual__run-summary:hover,
.lui-agent-manual__case-summary:hover {
  background: color-mix(in srgb, var(--color-content) 4%, transparent);
}

.lui-agent-manual__chevron {
  transition: transform 0.15s ease;
}

.lui-agent-manual__run[open] > .lui-agent-manual__run-summary .lui-agent-manual__chevron,
.lui-agent-manual__case[open] > .lui-agent-manual__case-summary .lui-agent-manual__chevron {
  transform: rotate(90deg);
}

.lui-agent-manual__run-models {
  overflow-wrap: anywhere;
}

.lui-agent-manual__run-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 12px;
}

.lui-agent-manual__model {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-agent-manual__case {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-agent-manual__case-id {
  overflow-wrap: anywhere;
}

.lui-agent-manual__case-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 12px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-manual__figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 8px 0 0;
}

.lui-agent-manual__figures dd {
  margin: 0;
}

.lui-agent-manual__assertions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-agent-manual__assertion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.lui-agent-manual__assertion-message {
  flex-basis: 100%;
  padding-left: 20px;
}

.lui-agent-manual__output {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--color-secondary);
  overflow-wrap: anywhere;
}

@media (max-width: 639px) {
  .lui-agent-manual__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A field that is not editable (a definition that is code, or no permission) keeps the shape of
   the form's field, locked: the DS disabled look on anything that is not an input. */
.lui-forms__control--static {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.lui-forms__control--readonly {
  background: var(--color-primary);
  color: var(--color-content-secondary);
  cursor: not-allowed;
}

/* Markdown editor (shared/input/_markdown_editor) — CodeMirror with the markdown grammar and a
   toolbar; the hidden textarea behind it is what the form posts. Read-only: the same editor,
   locked and greyed like a disabled field. */
.lui-md-editor {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  overflow: hidden;
}

.lui-md-editor:focus-within {
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-md-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
}

.lui-md-editor__group {
  display: flex;
  gap: 2px;
}

.lui-md-editor__group + .lui-md-editor__group {
  padding-left: 12px;
  border-left: 1px solid var(--color-tertiary);
}

.lui-md-editor__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-md-editor__tool:hover {
  background: var(--color-tertiary);
  color: var(--color-content);
}

.lui-md-editor__tool:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-chrome-accent) 50%, transparent);
  outline-offset: 1px;
}

.lui-md-editor__tool .material-symbols-rounded {
  font-size: 18px;
}

.lui-md-editor__surface {
  min-width: 0;
}

.lui-md-editor__fallback {
  min-height: var(--lui-md-min, 12rem);
  margin: 0;
  padding: 10px 12px;
  font-family: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* `{{ parameter }}` (Liquid) of an instruction: highlighted in the editor and where it is read. */
.lui-md-liquid {
  padding: 0 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
  color: var(--color-chrome-accent);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
}

/* A `{{ variable }}` that does not exist (the editor knows which do): underlined, not hidden. */
.lui-md-liquid.lui-md-liquid--unknown {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger);
  text-decoration: underline wavy var(--color-danger);
  text-underline-offset: 2px;
}

/* Read-only: the markdown as it reads, filling the card; soft line breaks reflow, a code block
   keeps its monospace and scrolls sideways on its own. */
.lui-md-editor__rendered {
  max-height: 60rem;
  padding: 10px 12px;
  overflow: auto;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.lui-md-editor__rendered > :first-child {
  margin-top: 0;
}

.lui-md-editor__rendered > :last-child {
  margin-bottom: 0;
}

.lui-md-editor__rendered h1,
.lui-md-editor__rendered h2,
.lui-md-editor__rendered h3,
.lui-md-editor__rendered h4,
.lui-md-editor__rendered h5,
.lui-md-editor__rendered h6 {
  margin: 16px 0 6px;
  font-weight: 600;
  line-height: 1.35;
}

.lui-md-editor__rendered h1 { font-size: 1.5em; }
.lui-md-editor__rendered h2 { font-size: 1.25em; }
.lui-md-editor__rendered h3 { font-size: 1.1em; }

.lui-md-editor__rendered p,
.lui-md-editor__rendered ul,
.lui-md-editor__rendered ol,
.lui-md-editor__rendered blockquote {
  margin: 0 0 8px;
}

.lui-md-editor__rendered ul,
.lui-md-editor__rendered ol {
  padding-left: 1.5em;
}

.lui-md-editor__rendered ul { list-style: disc; }
.lui-md-editor__rendered ol { list-style: decimal; }
.lui-md-editor__rendered li + li { margin-top: 2px; }

.lui-md-editor__rendered strong { font-weight: 700; }

.lui-md-editor__rendered blockquote {
  padding-left: 12px;
  border-left: 3px solid var(--color-tertiary);
  font-style: italic;
}

.lui-md-editor__rendered code {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--color-secondary);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.lui-md-editor__rendered pre {
  margin: 0 0 8px;
  padding: 8px 12px;
  overflow-x: auto;
  border-radius: 6px;
  background: var(--color-secondary);
  white-space: pre;
}

.lui-md-editor__rendered pre code {
  padding: 0;
  background: transparent;
  overflow-wrap: normal;
}

.lui-md-editor__rendered hr {
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--color-tertiary);
}

.lui-md-editor__rendered a {
  color: var(--color-chrome-accent);
  text-decoration: underline;
}

.lui-md-editor--readonly {
  background: var(--color-primary);
  color: var(--color-content-secondary);
  cursor: not-allowed;
}

.lui-md-editor--readonly:focus-within {
  border-color: var(--color-tertiary);
  box-shadow: none;
}

.lui-md-editor--readonly .cm-editor .cm-content,
.lui-md-editor--readonly .cm-editor .cm-line,
.lui-md-editor--readonly .lui-md-editor__fallback {
  color: var(--color-content-secondary);
  cursor: not-allowed;
}

/* «General context» card — a row per general source: switch (label + description), token limit; the
   catalogue also picks its degree of detail. A row that is on is tinted (ADR-161). */
.lui-context-sources {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  container-type: inline-size;
}

.lui-context-source + .lui-context-source {
  border-top: 1px solid var(--color-tertiary);
}

.lui-context-source__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
}

.lui-context-source {
  background: var(--color-background);
}

.lui-context-source--on {
  background: color-mix(in srgb, var(--color-chrome-accent) 5%, var(--color-background));
}

.lui-context-source__title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1 1 14rem;
  min-width: 0;
}

.lui-context-general__limit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.lui-forms__control.lui-context-general__tokens {
  width: 7rem;
}

.lui-context-general__detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 0 10px 10px 50px;
}

/* An anchor the base instruction and the standard parameters link to: clear of the sticky header. */
.lui-agent-context-anchor {
  scroll-margin-top: 80px;
  min-width: 0;
}

/* «Context per model» card — the total of `{{ target_context }}`, then one accordion item per model: its name, a
   summary and the «Generate context» switch in the header; its limit, what a list keeps and its blocks inside. */
.lui-agent-model-context {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  container-type: inline-size;
}

/* A narrow card (a phone): the «Generate context» switch keeps its label for assistive tech only, so the model's
   name and summary keep the row. */
@container (max-width: 32rem) {
  .lui-agent-model-context__item .lui-accordion__actions .lui-switch__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.lui-agent-model-context__total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.lui-agent-model-context__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lui-agent-model-context__list {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.lui-agent-model-context__item + .lui-agent-model-context__item {
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-model-context__item--on > .lui-accordion__heading {
  background: color-mix(in srgb, var(--color-chrome-accent) 5%, var(--color-background));
}

.lui-agent-model-context__item .lui-accordion__title {
  row-gap: 2px;
}

.lui-agent-model-context__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.lui-agent-model-context__summary {
  flex-basis: 100%;
  text-align: left;
}

.lui-agent-model-context__item .lui-accordion__actions {
  flex: 0 0 auto;
}

.lui-agent-model-context__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lui-agent-model-context__settings {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 24px;
}

/* Base instruction (`agents_portal/agents/_base_instruction`): collapsed above the custom instruction;
   its Liquid, read-only, one line per source the settings place. */
.lui-agent-base-instruction {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  overflow: hidden;
}

.lui-agent-base-instruction__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.lui-agent-base-instruction__summary::-webkit-details-marker {
  display: none;
}

.lui-agent-base-instruction__summary:hover {
  background: var(--color-secondary);
}

.lui-agent-base-instruction__chevron {
  font-size: 18px;
  color: var(--color-content-secondary);
  transition: transform 150ms ease;
}

.lui-agent-base-instruction[open] .lui-agent-base-instruction__chevron {
  transform: rotate(90deg);
}

.lui-agent-base-instruction__hint {
  flex: 1 1 12rem;
  min-width: 0;
}

.lui-agent-base-instruction__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.lui-agent-base-instruction__code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--color-content);
}

/* `{% if %}` / `{% endif %}`: the structure, dimmed so the text and the parameters read first. */
.lui-agent-base-instruction__tag {
  color: var(--color-content-secondary);
  opacity: 0.7;
}

/* A parameter whose source is off for this agent: its value is empty and its section is left out. */
.lui-md-liquid.lui-agent-base-instruction__var--off {
  background: transparent;
  color: var(--color-content-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--color-content-secondary);
}

/* «Parameters» card — the standard parameters (read-only table) above the custom ones. */
.lui-agent-params__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-agent-params__section-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-agent-std-params__scroll {
  overflow-x: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.lui-agent-std-params {
  width: 100%;
  border-collapse: collapse;
}

.lui-agent-std-params th,
.lui-agent-std-params td {
  padding: 6px 10px;
  text-align: left;
  vertical-align: middle;
}

.lui-agent-std-params thead th {
  font-weight: 500;
  background: var(--color-background);
}

.lui-agent-std-params tbody tr {
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-std-params tbody tr[data-standard-off] .lui-agent-std-params__cell--name,
.lui-agent-std-params tbody tr[data-standard-off] td:not(.lui-agent-std-params__cell--state) {
  opacity: 0.6;
}

.lui-agent-std-params__cell--name {
  font-weight: 400;
  white-space: nowrap;
}

.lui-agent-std-params__cell--number {
  width: 6.5rem;
  white-space: nowrap;
}

.lui-agent-std-params__cell--state {
  width: 7.5rem;
}

/* A narrow card (beside «General context», or a phone): the limit goes under the source's text. */
@container (max-width: 32rem) {
  .lui-context-general__limit {
    margin-left: 40px;
  }

  .lui-context-general__detail {
    padding-left: 50px;
  }
}

/* The standard parameters follow the card's width (`.lui-agent-params` is the container): one row per parameter in
   a wide card, stacked (name + state, then source · limit) in a narrow one. */
@container (max-width: 36rem) {
  .lui-agent-std-params thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .lui-agent-std-params,
  .lui-agent-std-params tbody {
    display: block;
  }

  .lui-agent-std-params tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 8px 10px;
  }

  .lui-agent-std-params tbody tr:first-child {
    border-top: none;
  }

  .lui-agent-std-params th,
  .lui-agent-std-params td {
    padding: 0;
    width: auto;
  }

  .lui-agent-std-params td[data-label]:not(.lui-agent-std-params__cell--state)::before {
    content: attr(data-label) " · ";
    font-size: 12px;
    color: var(--color-content-secondary);
  }

  .lui-agent-std-params__cell--state {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .lui-agent-std-params .lui-agent-std-params__cell--number {
    justify-self: end;
  }
}

/* The matrix stacks its fields on a phone instead of scrolling the page. */
@media (max-width: 40rem) {
  .lui-context-matrix__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .lui-context-matrix__table,
  .lui-context-matrix__table tbody {
    display: block;
  }

  .lui-context-matrix__table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 8px 0;
  }

  .lui-context-matrix__table tbody tr + tr {
    border-top: 1px solid var(--color-tertiary);
  }

  .lui-context-matrix__table tbody tr + tr > * {
    border-top: none;
  }

  .lui-context-matrix__table tbody th {
    grid-column: 1 / -1;
    padding: 0;
  }

  .lui-context-matrix__table tbody td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: auto;
    min-width: 0;
    padding: 0;
  }

  .lui-context-matrix__table tbody td::before {
    content: attr(data-label);
    font-size: 12px;
    color: var(--color-content-secondary);
  }

  .lui-context-matrix__table .lui-context-matrix__cell--include:empty {
    display: none;
  }
}

/* «Model» card — how the model runs, in compact sub-sections (Execution, Web search, Vision, Trace):
   a switch and, beneath it, the limits that only mean something with it on. */
.lui-agent-model-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-model-section__title {
  margin: 0;
  color: var(--color-content-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lui-agent-model-section__dependent[hidden] {
  display: none;
}

.lui-agent-show-tools-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-agent-show-tools-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  min-width: 0;
}

.lui-agent-show-tools-list__item--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.lui-agent-show-tools-list__key {
  overflow-wrap: anywhere;
}

/* System One agent — the «Decision» card: one row per question (what is asked, the options it
   allows and the confidence bar the partner sets, a percentage where blank is the definition's
   default), then what happens when the decision does not answer. */
.lui-agent-question-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-agent-question {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-agent-question__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lui-agent-question__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.lui-agent-question__options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lui-agent-threshold {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-agent-threshold__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lui-agent-threshold__control .lui-agent-threshold__input.lui-forms__control {
  width: 6.5rem;
  max-width: 100%;
  text-align: right;
}

.lui-agent-fallback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-tertiary);
}

/* Rendered markdown: a quote reads as a quote. */
.page-brief-panel__markdown blockquote {
  margin: 8px 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--color-tertiary);
  color: var(--color-content-secondary);
}

/* The instruction, rendered markdown: as tall as its text — the page scrolls, not the card. */
.lui-agent-show-instruction {
  overflow-x: auto;
}

.lui-agent-show-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-content-secondary);
}

.lui-main-layout__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Optional reading/content column — opt in per page (or later on the scroll parent).
   Default shell stays full-bleed; see layouts-and-pages.md §9 content width. */
.lui-content-width {
  width: 100%;
  max-width: var(--lui-content-max-width);
  margin-inline: auto;
  box-sizing: border-box;
  /* The page slot is a column flex container (`align-items: stretch`).
     Stretch wins over auto margins, so the cap sat flush left. */
  align-self: center;
}

.lui-index-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.lui-index-layout > * + * {
  margin-top: 16px;
}

/* Page header → tab zone (or non-tab main): 8px */
.lui-index-layout > :is(.lui-page-header, .lui-page-header-hero) + :is(.lui-page-tabs, .lui-show-layout__main) {
  margin-top: 8px;
}

/* Tab zone below page header — route tabs + optional filter row (library origin, etc.) */
.lui-page-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.lui-index-layout--embedded {
  padding: 0;
}

/* Tabs directly below action bar (no page/show header above).
   Container: .lui-page-tabs--below-action-bar (or .lui-page-tabs inside --tabs-first layouts).
   Tab rail underline stays full-bleed; labels + secondary rows keep a 16px horizontal inset. */
.lui-page-tabs--below-action-bar > .lui-tabs > .lui-tabs__nav,
.lui-index-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav,
.lui-show-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav,
.lui-show-layout--tabs-first > .lui-tabs > .lui-tabs__nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-background);
}

.lui-page-tabs--below-action-bar > .lui-tabs > .lui-tabs__nav > .lui-tabs__list,
.lui-index-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav > .lui-tabs__list,
.lui-show-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav > .lui-tabs__list,
.lui-show-layout--tabs-first > .lui-tabs > .lui-tabs__nav > .lui-tabs__list {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.lui-page-tabs--below-action-bar > :not(.lui-tabs),
.lui-index-layout--tabs-first > .lui-page-tabs > :not(.lui-tabs) {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Headerless index + tabs (breadcrumb/action bar chrome) — tab rail full-bleed; body keeps 16px inset */
.lui-index-layout--tabs-first {
  padding: 0;
}

.lui-index-layout--tabs-first > * + * {
  margin-top: 0;
}

.lui-index-layout--tabs-first > .lui-index-body {
  padding: 16px;
  box-sizing: border-box;
}

.lui-index-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__panel {
  padding: 16px;
  box-sizing: border-box;
}

/* Filter row + table stack — use inside tab panels or when index_content is a single layout child */
.lui-index-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.lui-show-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.lui-show-layout > * + * {
  margin-top: 16px;
}

/* Page header / AI summary → tab zone (or non-tab main): 8px — tab rail to panel body stays 16px via .lui-tabs__panel */
.lui-show-layout > :is(.lui-page-header, .lui-page-header-hero, .lui-show-layout__ai-summary) + :is(.lui-page-tabs, .lui-show-layout__main) {
  margin-top: 8px;
}

.lui-show-layout > :is(.lui-page-header, .lui-page-header-hero) + .lui-show-layout__ai-summary {
  margin-top: 8px;
}

.lui-show-layout > .lui-page-header + .process-progress-strip,
.lui-show-layout > .process-progress-strip + .lui-show-layout__ai-summary,
.lui-show-layout > .process-progress-strip + .lui-page-tabs {
  margin-top: 12px;
}

.process-progress-strip {
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: var(--radius-lg, 0.5rem);
  color: var(--color-tertiary);
}

.process-progress-strip__rail {
  position: relative;
  width: 100%;
  min-height: 48px;
}

.process-progress-strip__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.process-progress-strip__shape path,
.process-progress-strip__shape polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}

.process-progress-strip__shape path.is-current {
  fill: var(--color-secondary);
  stroke: none;
}

.process-progress-strip__labels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  align-items: center;
  min-height: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-progress-strip__labels li {
  min-width: 0;
  padding: 8px 18% 8px 8%;
  text-align: center;
  line-height: 16px;
  color: var(--color-content-secondary);
}

.process-progress-strip__labels li.is-start { padding-left: 12px; }
.process-progress-strip__labels li.is-end { padding-right: 12px; }
.process-progress-strip__labels li:first-child { padding-left: 12px; }
.process-progress-strip__labels li:last-child { padding-right: 12px; }

.process-progress-strip__labels li.is-gap {
  padding: 8px 0;
  color: var(--color-content-secondary);
}

.process-progress-strip__labels li.is-current {
  color: var(--color-content);
  font-weight: 500;
}

/* My Account cards. Without the packer, columns are the fallback. With it,
   each card drops into the shortest column so a short card does not leave a
   hole beside a taller one. Addresses stay full width below. */
.profile-account {
  container-type: inline-size;
  container-name: profile-account;
}

.profile-account__cards {
  column-count: 1;
  column-gap: 16px;
  min-width: 0;
}

.profile-account__cards > * {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  break-inside: avoid;
}

@container profile-account (min-width: 48rem) {
  .profile-account__cards {
    column-count: 2;
  }
}

@container profile-account (min-width: 72rem) {
  .profile-account__cards {
    column-count: 3;
  }
}

.profile-account__cards--packed {
  position: relative;
  column-count: 1;
}

/* Beat `.lui-tab-panel-card.lui-card` (position: relative), otherwise the
   packer's translate is added on top of the column static position. */
.profile-account__cards--packed > .lui-tab-panel-card.lui-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.profile-account__cards--packed > .lui-tab-panel-card.lui-card:focus-within {
  z-index: 2;
}


.protocol-answer-upload__thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--color-secondary);
}

.protocol-answer-upload__preview {
  margin-top: 8px;
}

/* Image answers: file picker on a fine pointer, camera on a phone. */
.protocol-answer-upload--images .protocol-answer-upload__camera {
  display: none;
}

.protocol-answer-upload__camera {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.protocol-answer-upload__camera-icon {
  color: var(--color-content-secondary);
}

.protocol-answer-upload__camera .lui-button {
  width: 100%;
  justify-content: center;
}

.protocol-answer-upload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.protocol-answer-upload--images .protocol-answer-upload__thumb {
  width: 96px;
  height: 96px;
}

@media (pointer: coarse), (max-width: 767px) {
  .protocol-answer-upload--images .protocol-answer-upload__desktop {
    display: none;
  }

  .protocol-answer-upload--images .protocol-answer-upload__camera {
    display: flex;
  }
}

.protocol-answer-upload__camera[hidden] {
  display: none !important;
}

/* The input sits outside the dropzone label in the camera kit, so
   `:focus-within` on the label no longer sees it (B9). */
.protocol-answer-upload:has(> input[type="file"]:focus-visible) .lui-file-upload-card__drop-zone {
  border-color: color-mix(in srgb, var(--color-chrome-accent) 50%, var(--color-tertiary));
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 2px;
}

.protocol-answer-upload__live-start {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.protocol-answer-upload__live-start[hidden] {
  display: none;
}

/* Camera as a base feature (ADR-187): `shared/camera_capture/_scan` and the
   protocol image and identifier fields (`camera-capture` controller). */
.camera-capture {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.camera-capture__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
}

.camera-capture__row > input,
.camera-capture__row > .lui-input,
.camera-capture__row > .lui-forms__control {
  flex: 1 1 12rem;
  min-width: 0;
}

.camera-capture__system {
  position: relative;
  cursor: pointer;
}

.camera-capture__system[hidden],
.camera-capture__start[hidden],
.camera-capture__status[hidden] {
  display: none;
}

.camera-capture__stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.camera-capture__stage[hidden] {
  display: none;
}

.camera-capture__video {
  display: block;
  width: 100%;
  max-height: 60vh;
  min-height: 12rem;
  object-fit: cover;
  background: var(--color-secondary);
  border-radius: 8px;
}

.camera-capture__close {
  align-self: flex-end;
}

.camera-capture__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.camera-capture__controls .lui-button {
  flex: 1 1 auto;
  justify-content: center;
}

.lui-show-layout__ai-summary .lui-ai-summary-card__regenerate {
  opacity: 0;
  pointer-events: none;
  transition:
    background var(--default-transition-duration) var(--default-transition-timing-function),
    opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-show-layout__ai-summary .lui-ai-summary-card__regenerate:disabled {
  opacity: 0;
}

.lui-show-layout__ai-summary .lui-ai-summary-card:hover .lui-ai-summary-card__regenerate,
.lui-show-layout__ai-summary .lui-ai-summary-card:focus-within .lui-ai-summary-card__regenerate {
  opacity: 1;
  pointer-events: auto;
}

.lui-show-layout__ai-summary .lui-ai-summary-card:hover .lui-ai-summary-card__regenerate:disabled,
.lui-show-layout__ai-summary .lui-ai-summary-card:focus-within .lui-ai-summary-card__regenerate:disabled {
  opacity: 0.5;
}

@media (hover: none) {
  .lui-show-layout__ai-summary .lui-ai-summary-card__regenerate {
    opacity: 1;
    pointer-events: auto;
  }

  .lui-show-layout__ai-summary .lui-ai-summary-card__regenerate:disabled {
    opacity: 0.5;
  }
}

/* Headerless show + tabs only (breadcrumb/action bar chrome) — tab rail full-bleed; panels keep 16px inset */
.lui-show-layout--tabs-first {
  padding: 0;
}

.lui-show-layout--tabs-first > * + * {
  margin-top: 0;
}

.lui-show-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__panel,
.lui-show-layout--tabs-first > .lui-tabs > .lui-tabs__panel {
  padding: 16px;
  box-sizing: border-box;
}

/* Drawer bar — Flux twin of loopos-ui-v2 index.html `.lui-drawer-bar`
   (layouts-and-pages.md §7). Floating right overlay over content; no modal backdrop.
   Demo twin uses 340px; product spec is 500px. */
.lui-drawer-bar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 500px;
  max-width: 100%;
  display: flex;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;
  z-index: 5;
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
}

/* Closed: slide fully off the right edge (utility class used by lui--drawer-bar). */
.lui-drawer-bar.translate-x-full {
  transform: translateX(100%);
  pointer-events: none;
}

.lui-drawer-bar.translate-x-0 {
  transform: translateX(0);
}

.lui-drawer-bar__drawer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}

.lui-drawer-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  flex: none;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-drawer-bar__body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lui-drawer-bar { transition: none; }
}

@media (max-width: 768px) {
  .lui-drawer-bar { width: 100%; }
}

/* Protocol show (FLUX-10, G) — height-fill workspace; form/editor always
   visible (page-local). No floating drawer any more: "Aplica-se a" is the
   Momentos e Associações tab (see .protocol-where-it-appears below).

   S1 — the show is a 3-area CSS grid (header / aside / main), not nested
   flex rows: at ≥1360px the aside (usage card + AI summary) sits beside the
   header+tabs as its own column; below that it drops back to a single
   column, reordered — DOM order is header → aside → main (S1: "card
   beside/under the header, AI summary under it") — ahead of the tabs, via
   `grid-template-areas` rather than duplicating the aside's markup per
   breakpoint (one usage card, one set of ids, one turbo_stream target
   regardless of viewport). `.lui-show-layout`'s own `> * + * { margin-top }`
   rule is reset here — grid `gap` does the spacing instead, so a grid item
   is never pushed 16px into its own cell relative to its row neighbour. */
.lui-show-layout--protocol {
  position: relative;
}

.protocol-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "aside" "main";
  row-gap: 20px;
}

.protocol-show-grid > * + * {
  margin-top: 0;
}

.protocol-show-grid__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.protocol-show-grid__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Fixed float bar escapes normal flow (position: fixed) — parked on the
   header cell purely so it never claims an implicit grid track of its own. */
.protocol-show-grid > .lui-float-bar--inline-edit {
  grid-area: header;
}

.protocol-show-locked-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md, 0.375rem);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-background));
}

/* 1360 — SPEC-G's right-bar breakpoint (S1). Below it there is no room for a
   320px aside beside a canvas-hosting main column without squeezing the
   editor, so the layout matches the narrow single-column template above. */
@media (min-width: 1360px) {
  /* `auto 1fr` rows on every tab, not only Detalhes: the aside spans both
     rows, and on a short tab (Logs) it is the tallest thing in the grid —
     with implicit `auto` rows its extra height was shared between them and
     opened a gap between the subtitle and the tabs. */
  .protocol-show-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header aside" "main aside";
    column-gap: 24px;
  }

  .protocol-show-aside {
    align-self: start;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Detalhes tab, a block's settings card open — the right bar (usage card +
     AI summary) used to hide here so the editor could claim the full width.
     The owner asked to keep it visible instead: the editor just gets less
     width, and its own `.pe-document` container query already handles "not
     enough room beside the document" — past an ~800px pane it overlays the
     settings card on the document with a shadow rather than squeezing
     either past readability (see `.pe-document__inspector` in
     protocol_editor.css). No page-level rule needed; `data-inspector-open`
     (`pe-shell`, R5) is unused here now but stays set — a future surface
     may still want to know. */
}

/* Owner's ultra-wide monitor (~2000px): a 320px aside leaves the editor's own
   centered ~680px canvas stranded in a much wider main column than it was
   ever going to fill. Widening the aside band (a card that reads fine wider
   — the associations list gets more room per row) claims more of that width
   instead of leaving it as dead space between the document and the settings
   column. A flat top-level block (not nested inside the 1360px one) so it
   does not depend on nested-@media support — any viewport matching 1800px
   already matches 1360px, so the cascade lands the same either way. */
@media (min-width: 1800px) {
  .protocol-show-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* Right bar (S1) — usage card + AI summary. Single column below 1360px (see
   media query above), its own scroll above it once taller than the viewport
   (sticky + max-height, not stretched to the row's full height — an aside
   shorter than the tabs column should not gain trailing blank space). */
.protocol-show-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* The usage card (SPEC-G "card de uso"). */
.protocol-usage-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-background);
  box-sizing: border-box;
}

.protocol-usage-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.protocol-usage-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.protocol-usage-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex: 0 0 auto;
  background: var(--color-content-secondary);
}

.protocol-usage-card__status--pending .protocol-usage-card__status-dot { background: var(--color-warning); }
.protocol-usage-card__status--pending .protocol-usage-card__status-text { color: var(--color-warning-fg, var(--color-warning)); }

.protocol-usage-card__status--published .protocol-usage-card__status-dot { background: var(--color-success); }
.protocol-usage-card__status--published .protocol-usage-card__status-text { color: var(--color-success-fg, var(--color-success)); }

.protocol-usage-card__status--archived .protocol-usage-card__status-dot,
.protocol-usage-card__status--unpublished .protocol-usage-card__status-dot {
  background: var(--color-content-secondary);
}

.protocol-usage-card__status-text {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content);
}

.protocol-usage-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.protocol-usage-card__metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}

.protocol-usage-card__metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.protocol-usage-card__metric + .protocol-usage-card__metric {
  border-left: 1px solid var(--color-tertiary);
  padding-left: 12px;
}

.protocol-usage-card__metric-value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-content);
}

a.protocol-usage-card__metric:hover .protocol-usage-card__metric-value {
  text-decoration: underline;
}

.protocol-usage-card__metric-value--warning {
  color: var(--color-warning-fg, var(--color-warning));
}

.protocol-usage-card__metric-label {
  font-size: 12px;
  color: var(--color-content-secondary);
}

/* S2 — the card's own associations list: up to 5 rows (moments first, then
   targets), each a compact single line so the card stays a glance, not a
   second copy of the tab. */
.protocol-usage-card__associations {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--color-tertiary);
}

.protocol-usage-card__association-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.protocol-usage-card__association-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

/* Name on the first line, type (and moment) under it — two short lines
   instead of one truncated "Máquina Lavar Loiça Categoria · Pré-…". */
.protocol-usage-card__association-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.protocol-usage-card__association-icon {
  color: var(--color-content-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}

.protocol-usage-card__association-label {
  min-width: 0;
  color: var(--color-content);
}

.protocol-usage-card__association-type {
  min-width: 0;
}

.protocol-usage-card__association-view-all {
  align-self: flex-start;
}

/* Version banner (Detalhes tab) — "A editar a vN. Os operadores continuam a
   ver a vM até publicar." */
.protocol-version-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

/* Momentos e Associações tab (FLUX-10 G redesign) — one card per moment
   (ADR-145 §3's two layers made visible: the default use-case row, and any
   equipment's own catalog/brand rows) instead of the old timeline + "Ordem
   neste momento" + generic form + flat list, which showed one association
   up to three times. Single column; the right bar that used to sit beside
   this tab is the show's own aside (`.protocol-show-aside`). */
.protocol-where-it-appears {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.protocol-where-it-appears__toolbar {
  display: flex;
  justify-content: flex-end;
}

/* "Sem momento" — the compact list (still `_attachment_row.html.erb`) and,
   collapsed behind a <details>, the generic Tipo → Associar a → Prioridade
   form: the one case left with no moment card to live in. */
.protocol-where-it-appears__no-moment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.protocol-where-it-appears__no-moment-disclosure > summary {
  cursor: pointer;
  color: var(--color-content-secondary);
}

.protocol-where-it-appears__no-moment-disclosure > summary:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

.protocol-where-it-appears__no-moment-disclosure[open] > summary {
  margin-bottom: 8px;
}

.protocol-where-it-appears__attach-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-secondary);
}

.protocol-where-it-appears__attach-form .lui-forms__group,
.protocol-where-it-appears__attach-form .protocol-attach-priority,
.protocol-where-it-appears__attach-form .lui-button--block {
  width: 100%;
  max-width: 100%;
}

/* One card per moment — replaces the read-only timeline + "Ordem neste
   momento" sections above. */
.protocol-moment-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.protocol-moment-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-tertiary);
  border-top: 2px solid var(--color-content);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-secondary);
}

.protocol-moment-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.protocol-moment-card__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.protocol-moment-card__title {
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.protocol-moment-card__lane {
  overflow-wrap: anywhere;
}

.protocol-moment-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Fixed-ish width so "Aparece" / the two switches line up between rows on
   wide viewports — wraps under the label on narrow ones instead of forcing
   a horizontal scroll (responsive floor: 1024px with the right bar open). */
.protocol-moment-card__row-label {
  flex: 0 0 auto;
  min-width: 9rem;
  color: var(--color-content-secondary);
}

/* More than one journey sharing a moment key (CC Técnico — Abertura's
   `technical.opening`, two use-case rows) stacks a named toggle per
   journey instead of the single plain one. */
.protocol-moment-card__default-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.protocol-moment-card__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.protocol-moment-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-tertiary);
  border-radius: 9999px;
  padding: 1px 2px 1px 8px;
  background: var(--color-background);
}

.protocol-moment-card__chip .lui-badge {
  border: 0;
  background: transparent;
  padding-left: 0;
}

.protocol-moment-card__priority-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.protocol-moment-card__position {
  white-space: nowrap;
}

/* "ver ordem" — the default-list order, same rows as the old "Ordem neste
   momento" section, now behind a disclosure next to the priority control. */
.protocol-moment-card__order {
  flex: 1 1 100%;
  /* Wraps under the priority controls, not under the «Prioridade» label:
     the label column's min-width + the row gap. */
  margin-inline-start: calc(9rem + 8px);
}

.protocol-moment-card__order > summary {
  cursor: pointer;
  color: var(--color-content-secondary);
}

.protocol-moment-card__order > summary:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

.protocol-moment-card__order[open] > summary {
  margin-bottom: 6px;
}

/* FLUX-10 (G) — "+ Equipamento" picker redesign: two lists (Tipo left,
   results right), multi-select. Stacks the panes under the modal's own
   narrow-width floor rather than forcing a horizontal scroll. */
.protocol-equipment-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.protocol-equipment-picker__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.protocol-equipment-picker__body {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.protocol-equipment-picker__types {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 180px;
  min-width: 0;
  border-right: 1px solid var(--color-tertiary);
  padding-right: 12px;
}

.protocol-equipment-picker__type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md, 0.375rem);
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  text-align: left;
}

.protocol-equipment-picker__type:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.protocol-equipment-picker__type--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-content);
}

.protocol-equipment-picker__type-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `.lui-badge` sets its own `display`, which otherwise wins over the
   `[hidden]` UA default at equal specificity (same trap as `.lui-search__clear`
   above) — the ticked-count badge must disappear at 0, not show "0". */
.protocol-equipment-picker__type-count[hidden] {
  display: none;
}

.protocol-equipment-picker__results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.protocol-equipment-picker__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  padding: 8px;
}

.protocol-equipment-picker__row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px;
  border-radius: var(--radius-md, 0.375rem);
}

.protocol-equipment-picker__row:hover {
  background: var(--color-secondary);
}

.protocol-equipment-picker__applied-note {
  white-space: nowrap;
  margin-inline-start: auto;
  padding-top: 2px;
}

.protocol-equipment-picker__empty {
  padding: 16px 8px;
  text-align: center;
}

.protocol-equipment-picker__sentinel {
  height: 1px;
}

.protocol-equipment-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.protocol-equipment-picker__footer-summary,
.protocol-equipment-picker__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Modal floor (loopos-ui-v2 responsive convention) — stack the panes rather
   than scroll horizontally. */
@media (max-width: 640px) {
  .protocol-equipment-picker__body {
    flex-direction: column;
  }

  .protocol-equipment-picker__types {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-tertiary);
    padding-right: 0;
    padding-bottom: 8px;
  }
}

/* Attachments list — bordered stack that survives turbo append/remove of
   rows. Page-local now (Onde aparece tab), not scoped to a drawer. */
.protocol-attachments-list:has(.protocol-attachments-list__item) {
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
  background: var(--color-background);
}

.protocol-attachments-list__item + .protocol-attachments-list__item {
  border-top: 1px solid var(--color-tertiary);
}

.protocol-attachments-list__item:focus-within {
  background: var(--color-secondary);
}

.protocol-attachment-priority-wrap {
  cursor: help;
}

.protocol-attachment-priority {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  flex-shrink: 0;
}

.protocol-attachment-priority__field {
  display: block;
  width: 3px;
  border-radius: 9999px;
  background: var(--color-tertiary);
}

.protocol-attachment-priority__field:nth-child(1) { height: 6px; }
.protocol-attachment-priority__field:nth-child(2) { height: 10px; }
.protocol-attachment-priority__field:nth-child(3) { height: 14px; }

.protocol-attachment-priority__field.is-filled {
  background: var(--color-content);
}

.protocol-attachment-moment .lui-identifier,
.protocol-attachment-moment .lui-identifier__content,
.protocol-attachment-moment .lui-identifier__value {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.protocol-attachment-moment .lui-identifier {
  align-items: flex-start;
  height: auto;
}

.protocol-attachment-moment .lui-identifier__content {
  flex-wrap: wrap;
}

/* FLUX-10 — the index's Momento column got a max-width cap so the row fits at
   1440 without a horizontal scroll (see _index_table.html.erb). Same
   technique as .protocol-attachment-moment above: the identifier token has no
   overflow handling of its own, so without this the chip's label just clips
   mid-word with no ellipsis. Wrapping to a second line (not truncating) keeps
   the full moment name readable — losing "Pré-diagnóstico" to "Pré-diagn…"
   is a worse trade than a slightly taller row. */
.protocol-moment-chips .lui-identifier,
.protocol-moment-chips .lui-identifier__content,
.protocol-moment-chips .lui-identifier__value,
.protocol-moment-chips .lui-identifier__label {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.protocol-moment-chips .lui-identifier {
  align-items: flex-start;
  height: auto;
}

/* FLUX-10 — Catálogo column: badges stack, each one gets the full column
   width and truncates inside it instead of two badges sharing 165px. */
.protocol-catalog-destinations {
  max-width: 180px;
}

.protocol-catalog-destinations > .lui-badge,
.protocol-catalog-destinations > a {
  max-width: 100%;
}

/* Column caps of the protocols index (`lui-table-col-max` reads the var). */
.protocols-index-col--name { --lui-col-max-width: 240px; }
.protocols-index-col--moment { --lui-col-max-width: 150px; }

.protocol-moment-chips .lui-identifier__content {
  flex-wrap: wrap;
}

/* "Adicionar associação" (S4 — moved into the main flow as a full-width
   card, see .protocol-where-it-appears__attach-form above). */
.protocol-where-it-appears__attach-form .protocol-attach-form__label-row {
  margin-bottom: 8px;
}

.protocol-where-it-appears__attach-form .protocol-attach-form__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: help;
  line-height: 1;
}

.protocol-where-it-appears__attach-form .protocol-attach-form__hint:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Moment picker (B5.4 / DEC-17 alternative 2) — page-local composition.

   The journey as lanes: one per app, grouped by the flow block that declares
   the moments. There is no `lui-*` stepper, and this is the first surface that
   needs one; it stays page-local until a second screen asks for the same shape
   (the flow editor widget is the candidate).

   Border-only elevation, role tokens throughout, so light and dark come free.
   The lanes are a responsive auto-fit grid: three columns on a category tab,
   one on a phone, without a breakpoint per surface.
   --------------------------------------------------------------------------- */
.protocol-moment-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.protocol-moment-picker__lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  min-width: 0;
}

.protocol-moment-picker__lane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-secondary);
}

.protocol-moment-picker__lane-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--color-content);
}

.protocol-moment-picker__group {
  margin-top: 6px;
  color: var(--color-content-secondary);
}

.protocol-moment-picker__step-wrap {
  display: block;
  min-width: 0;
}

.protocol-moment-picker__step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-background);
  cursor: pointer;
}

.protocol-moment-picker__step:hover {
  border-color: var(--color-tertiary);
}

.protocol-moment-picker__step:focus-within {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
}

.protocol-moment-picker__step.is-selected {
  border-color: var(--color-chrome-accent, var(--color-content));
  box-shadow: inset 0 0 0 1px var(--color-chrome-accent, var(--color-content));
}

.protocol-moment-picker__step.is-taken {
  cursor: not-allowed;
  opacity: 0.6;
}

.protocol-moment-picker__radio {
  flex-shrink: 0;
  margin: 0;
  cursor: inherit;
}

.protocol-moment-picker__step-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.protocol-moment-picker__count {
  flex-shrink: 0;
  cursor: help;
}

.protocol-moment-picker__error {
  color: var(--color-danger-fg);
}

/* Inherited protocols on a product / sub-category (B5.3) — read-only stack,
   visually quieter than the direct rows above it. Border, not shadow. */
.protocol-attachments-list--inherited {
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
  background: var(--color-secondary);
}

.protocol-attachments-list__item--inherited + .protocol-attachments-list__item--inherited {
  border-top: 1px solid var(--color-tertiary);
}

/* Advanced options in the "New protocol" modal — priority hides behind it. */
.protocol-create-advanced {
  border: 1px dashed var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  padding: 8px 12px;
}

.protocol-create-advanced > summary {
  cursor: pointer;
  color: var(--color-content-secondary);
}

.protocol-create-advanced > summary:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Priority segmented — equal-width Low / Medium / High (page-local on attach forms). */
.protocol-attach-priority {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.protocol-attach-priority .protocol-attach-priority__segmented {
  width: 100%;
}

.protocol-attach-priority .protocol-attach-priority__segmented .lui-filter-pill {
  flex: 1;
  justify-content: center;
  padding: 0 8px;
}

.protocol-attach-priority .protocol-attach-priority__segmented .lui-filter-pill__label {
  padding-right: 0;
}

/* S4 — the inline auto-submit priority editor (attachment rows, "Ordem
   neste momento"'s own-priority control): compact and row-fitting, not the
   full-width column the standalone attach form uses. */
.protocol-attach-priority--inline {
  flex-direction: row;
  width: auto;
  min-width: 0;
}

.protocol-attach-priority--inline .protocol-attach-priority__segmented {
  width: auto;
}

.protocol-attach-priority--inline .protocol-attach-priority__segmented .lui-filter-pill {
  flex: 0 0 auto;
  padding: 0 8px;
}

/* Highlight star — tertiary hover wash; yellow filled glyph when active.
   Exception: 18px icon (loopos-ui-v2 buttons use 14px; action-bar icon-only uses 16px) —
   see docs/loopos-ui-exceptions.md. ID + class beats #lui-action-bar icon-only 16px. */
#lui-action-bar .protocol-highlight-star.lui-button .material-symbols-rounded,
.protocol-highlight-star.lui-button .material-symbols-rounded {
  font-size: 18px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}
#lui-action-bar .protocol-highlight-star.lui-button .material-symbols-rounded--filled,
.protocol-highlight-star.lui-button .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}

.protocol-highlight-star.lui-button[aria-pressed="true"] {
  /* Avoid default pressed content wash (reads as black fill behind the star). */
  background: transparent;
  border-color: transparent;
  color: var(--color-warning);
}

.protocol-highlight-star.lui-button[aria-pressed="true"]:hover,
.protocol-highlight-star.lui-button[aria-pressed="true"]:focus-visible {
  background: var(--color-secondary);
  border-color: transparent;
  color: var(--color-warning);
}

.protocol-highlight-star.lui-button[aria-pressed="true"] .material-symbols-rounded {
  color: var(--color-warning);
}

.protocol-show-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 28rem;
}

.attachable-protocols-workspace--editor {
  min-height: 28rem;
}

.attachable-protocols-workspace__editor {
  min-height: 22rem;
}

.protocol-show-workspace > .protocol-editor-host {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* FLUX-10 (G) / S1 — the editor (.protocol-show-workspace) sits inside the
   Detalhes tab panel, itself inside `.protocol-show-grid__main` (the grid's
   "main" area — see .protocol-show-grid above), not as a direct child of
   `.lui-show-layout--protocol` any more. Height-fill (the editor manages its
   own internal scroll) only makes sense while that panel is the one actually
   showing — every panel is always in the DOM (hidden via the `hidden`
   attribute, never removed), so `:has()` keys off
   `.lui-tabs__panel:not([hidden])` specifically, not just "a workspace
   exists somewhere in this page". Momentos e Associações / Logs get ordinary
   document flow and the page's own scroll.

   The grid itself grows to fill the content area (`flex: 1 0 auto` — it is a
   flex item of `.lui-main-layout__content`), and `grid-template-rows: auto
   1fr` puts every bit of that height the header row does not need onto the
   second row (main + aside). Inside "main", the same flex-grow chain as
   before takes it the rest of the way down to the editor, with a 32rem
   floor. Below that (1440×900 with the AI summary open left ~400px,
   1024×800 left ~170px) the content area scrolls instead of squeezing the
   editor: the chain grows but never shrinks, and nothing in it is a scroll
   container (`overflow-x: clip`, not `hidden`) — a scroll container's
   automatic minimum height is 0, which is what let it collapse. The
   workspace's `flex-basis: 0` keeps the editor's own content (a long
   document) out of that minimum, so the page never grows to the document's
   height and the panes keep scrolling on their own. The aside, in the same
   grid row, stays its own natural height (`align-self: start` on
   `.protocol-show-aside`) rather than stretching to match. */
@media (min-width: 769px) and (max-width: 1359.98px) {
  /* Narrow area template (header / aside / main, one per row — see
     .protocol-show-grid above): 3 explicit rows, the last one flexible. */
  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) {
    flex: 1 0 auto;
    grid-template-rows: auto auto 1fr;
    overflow-x: clip;
  }
}

@media (min-width: 1360px) {
  /* Wide area template ("header aside" / "main aside" — aside spans both):
     2 explicit rows, the second one flexible. */
  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) {
    flex: 1 0 auto;
    grid-template-rows: auto 1fr;
    overflow-x: clip;
  }
}

@media (min-width: 769px) {
  .lui-main-layout__content:has(.lui-show-layout--protocol .lui-tabs__panel:not([hidden]) .protocol-show-workspace) {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .protocol-show-grid__main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .protocol-show-grid__main > .lui-page-tabs {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    overflow-x: clip;
    min-height: 0;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .lui-page-tabs > .lui-tabs {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    min-height: 0;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .lui-tabs__panel:not([hidden]) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lui-show-layout--protocol .protocol-show-workspace {
    flex: 1 0 0;
    min-height: 32rem;
  }
}

@media (max-width: 768px) {
  .protocol-show-workspace {
    min-height: 22rem;
  }
}

.lui-page-header { display: flex; flex-direction: column; gap: 4px; }

.lui-page-header__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.lui-page-header__row > .lui-show-layout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 0;
  margin-left: auto;
}

.lui-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  margin: 8px 0 0;
  padding: 0;
}

.lui-page-header__meta a.lui-link > * {
  color: inherit;
}

.lui-page-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-page-header__meta--end {
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.lui-page-header__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.lui-page-header__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Coming soon — inline pill and page block (native/coming-soon.md) */
.lui-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-coming-soon.copy-12-medium { color: var(--color-content-secondary); }

.lui-coming-soon__icon {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-coming-soon--page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 48px 24px;
  text-align: center;
  white-space: normal;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-sizing: border-box;
}

.lui-coming-soon--page .lui-coming-soon__logo-mark { margin-bottom: 24px; }

.lui-coming-soon--page .lui-coming-soon__body { margin-top: 8px; }

.lui-coming-soon__logo-mark {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

html[data-theme="dark"] .lui-coming-soon__logo-mark--dark,
html:not([data-theme="dark"]) .lui-coming-soon__logo-mark--light {
  display: none;
}

.lui-sidebar__item .lui-coming-soon { margin-left: auto; }

.lui-show-layout__actions { margin-top: -8px; }

/* Readable prose column for descriptions / lead copy on show pages */
.lui-prose { max-width: 72ch; }

/* Tooltip — loopos-ui-v2 / Rails Blocks (see rails-blocks/components/tooltip.md) */
.lui-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  white-space: nowrap;
}

.lui-tooltip__trigger:hover {
  background: var(--color-secondary);
}

.lui-tooltip__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-tooltip__trigger--icon {
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  padding: 4px;
  border-radius: 9999px;
  border-color: transparent;
  background: transparent;
}

.lui-tooltip__trigger--icon:hover {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
}

.lui-tooltip__trigger--icon .material-symbols-rounded {
  font-size: 16px;
  color: var(--color-content-secondary);
}

.lui-tooltip__trigger--icon:hover .material-symbols-rounded {
  color: var(--color-content);
}

.lui-tooltip__trigger--bare {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: normal;
}

.lui-tooltip__trigger--bare:hover {
  background: transparent;
}

.lui-tooltip-portal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  overflow: visible;
}

body > .lui-tooltip__bubble--portaled {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  overflow: visible;
}

.lui-tooltip__bubble {
  position: fixed;
  z-index: 2147483647;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: max-content;
  min-width: min-content;
  max-width: min(var(--lui-tooltip-max-width, 200px), calc(100vw - 16px));
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-content);
  color: var(--color-background);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.1);
  pointer-events: none;
  overflow: visible;
  white-space: normal;
}

.lui-tooltip__bubble--portaled {
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.lui-tooltip__bubble--portaled[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

.lui-tooltip__bubble--small {
  padding: 4px 6px;
}

.lui-tooltip__bubble--large {
  --lui-tooltip-max-width: 280px;
  padding: 8px 12px;
}

.lui-tooltip__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 16px;
  color: var(--color-background);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.lui-tooltip__title {
  display: block;
  color: var(--color-background);
  font-weight: 500;
}

.lui-tooltip__description {
  display: block;
  color: var(--color-background);
  font-weight: 400;
}

.lui-tooltip__link {
  color: var(--color-background);
  font-weight: 500;
  text-decoration: underline;
}

.lui-tooltip__kbd {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding-left: 2px;
  white-space: nowrap;
}

.lui-tooltip__kbd .lui-kbd__key {
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--color-background) 35%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-background) 12%, transparent);
  color: var(--color-background);
}

.lui-tooltip__kbd .lui-kbd__sep {
  color: color-mix(in srgb, var(--color-background) 60%, transparent);
}

.lui-tooltip__arrow {
  display: none;
  position: absolute;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--color-content);
  transform: rotate(45deg);
  pointer-events: none;
}

.lui-tooltip__arrow[data-side] {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .lui-tooltip__bubble--portaled {
    transition: opacity 80ms ease, visibility 80ms ease;
  }
}

/* Inline info hint (lfa_hint, etc.) — compact circular info control, no button chrome */
.lui-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  appearance: none;
  -webkit-appearance: none;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
}

.lui-hint:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-hint:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-hint__icon {
  color: currentColor;
  cursor: inherit;
}

/* Pill — compact status marker (e.g. active-on partner in app catalogue) */
.lui-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 20px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 16px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  border: 1px solid var(--color-tertiary);
}

.lui-pill--success {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-success-fg);
  border-color: transparent;
}

.lui-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

/* Spare-parts Needs: three featured KPI tiles + one 30-day card. Inner
   month stats are type only — no nested card chrome. */
.spp-needs-kpis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.spp-kpi-month__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}

.spp-kpi-month__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
}

.spp-kpi-month__stat:hover .heading-20 {
  color: var(--color-content);
}

@media (max-width: 639px) {
  .spp-kpi-month__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PO show: supplier → destination as one flow (circular arrow node). */
.spp-order-route {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.spp-order-route__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 4px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  color: var(--color-foreground);
}

/* Shipment show: the transport guide is the PDF (whole chip is the hit). */
.spp-guide-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--color-tertiary);
  border-radius: 999px;
  background: var(--color-background);
  color: inherit;
  text-decoration: none;
}

a.spp-guide-pill:hover {
  background: var(--color-secondary);
}

a.spp-guide-pill:focus-visible {
  outline: 2px solid var(--color-content);
  outline-offset: 2px;
}

.spp-guide-pill--missing {
  border-style: dashed;
}

.spp-guide-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-foreground);
}

.spp-guide-pill__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.spp-guide-pill__action {
  flex-shrink: 0;
  margin-right: 2px;
  color: var(--color-content-secondary);
}

/* Legacy dense floor kept for any remaining compact KPI rows. */
.lui-kpi-grid--dense {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* Connections knowledge graph */
.lui-connections-graph__chrome {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.lui-connections-graph__stats {
  white-space: nowrap;
}

.lui-connections-graph__hint {
  max-width: 36rem;
}

.lui-connections-graph__legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
  background: var(--color-content-secondary);
}

.lui-connections-graph__legend-swatch[data-color-key="process"] {
  background: var(--color-informative);
  border-color: color-mix(in srgb, var(--color-informative) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="item"] {
  background: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="end_user"] {
  background: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="partner_user"] {
  background: var(--color-orange);
  border-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="entity"] {
  background: var(--color-informative-fg);
  border-color: color-mix(in srgb, var(--color-informative-fg) 35%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="user"] {
  background: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-tertiary));
}

.lui-connections-graph__mobile-fallback {
  display: none;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background-color: var(--color-primary);
}

.lui-connections-graph__overlay-icon {
  font-size: 28px;
  line-height: 1;
}

.lui-connections-graph__detail {
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background-color: var(--color-background);
}

.lui-connections-graph__fit {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

.lui-connections-graph__fit:has([hidden]) {
  display: none;
}

.lui-connections-graph__fit .lui-button {
  pointer-events: auto;
  box-shadow: none;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-connections-graph__canvas-wrap {
  position: relative;
  isolation: isolate;
  min-height: 28rem;
  height: clamp(28rem, calc(100vh - 20rem), 42rem);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--color-background);
}

.lui-connections-graph__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-background) 88%, var(--color-secondary));
}

/* Author `.flex { display: flex }` beats the UA [hidden] rule — overlays must really hide. */
.lui-connections-graph__overlay[hidden] {
  display: none !important;
}

.lui-connections-graph__overlay:not([hidden]) {
  display: flex;
}

.lui-connections-graph__empty:not([hidden]),
.lui-connections-graph__error:not([hidden]) {
  flex-direction: column;
}

.lui-connections-graph__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}

.lui-connections-graph__canvas .vis-network {
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}

.lui-connections-graph__canvas--dragging .vis-network,
.lui-connections-graph__canvas--dragging .vis-network canvas {
  cursor: grabbing !important;
}

.lui-connections-graph__canvas .vis-network,
.lui-connections-graph__canvas canvas {
  background: transparent !important;
}

.lui-connections-graph__canvas--hidden {
  visibility: hidden;
  pointer-events: none;
}

.lui-connections-graph__detail--empty {
  display: none;
}

.lui-connections-graph--compact .lui-connections-graph__canvas-wrap {
  min-height: 18rem;
  height: 18rem;
}

.lui-connections-graph--compact .lui-connections-graph__layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .lui-connections-graph--compact .lui-connections-graph__layout {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
}

@media (max-width: 767px) {
  .lui-connections-graph__canvas-wrap,
  .lui-connections-graph__detail {
    display: none;
  }

  .lui-connections-graph__mobile-fallback {
    display: block;
  }
}

.lui-connections-graph__canvas .vis-network:focus {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 2px;
}

.lui-tab-connections .lui-filter-pill-tabs,
.lui-tab-connections [data-controller="filter-pill-tabs"] {
  gap: 12px;
}

/* ── LoopOS Flux App — Surface tab (per-tier accordion cards; stack via ERB gap-3) ── */
.lui-surface__tier-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lui-surface__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-surface__section-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-surface-api-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-api-list__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-surface__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Source-owned flow preview stacks — more air between cards so edges stay readable */
.lui-surface__rows--flows {
  gap: 14px;
}

/* Single artifact row — icon + label/path + trailing meta (scope/badge) */
.lui-surface-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.lui-surface-row__icon {
  flex-shrink: 0;
  color: var(--color-content-secondary);
}

.lui-surface-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-surface-row__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-surface-row__path {
  color: var(--color-content-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-surface-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lui-surface-tab-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.lui-surface-tab-title__model {
  flex-shrink: 0;
  text-transform: capitalize;
}

.lui-surface-tab-title__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-surface-tab-title__sep {
  flex-shrink: 0;
  user-select: none;
}

/* Sidebar-group cluster inside portal pages */
.lui-surface-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-group + .lui-surface-group {
  margin-top: 8px;
}

.lui-surface-group__label {
  padding-left: 2px;
}

/* Flow blocks — visual nodes */
.lui-surface-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.lui-surface-block-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.lui-surface-block-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--color-chrome-accent);
  background: color-mix(in srgb, var(--color-chrome-accent) 12%, transparent);
}

.lui-surface-block-node__slug {
  color: var(--color-content-secondary);
  word-break: break-all;
}

/* Source-owned flows */
.lui-surface-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.lui-surface-flow__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lui-surface-flow-preview {
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: var(--color-background);
}

.lui-surface-flow .flow-editor-surface-preview-host {
  border: 0;
  border-radius: 0;
}

.lui-surface-row--actionable {
  cursor: pointer;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  padding: 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lui-surface-row--actionable:hover {
  background: color-mix(in srgb, var(--color-chrome-accent) 6%, var(--color-background));
  border-color: color-mix(in srgb, var(--color-chrome-accent) 24%, var(--color-tertiary));
}

.lui-surface-row--actionable:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-surface-row__chevron {
  flex-shrink: 0;
}

.lui-surface-agent-dialog__body {
  overflow: auto;
  max-height: calc(100vh - 160px);
  padding: 0;
}

.lui-surface-agent-dialog__body .lui-page-split--contrib {
  padding: 16px 20px 20px;
}

/* Partner library — families of vault activatables */
.lui-surface-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.lui-surface-library__family {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-primary);
}

.lui-surface-library__entries {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-library__entry {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.lui-surface-library__entry .lui-tag,
.lui-surface-library__entry .lui-token,
.lui-surface-library__entry .lui-identifier {
  max-width: 100%;
}

/* Scopes — compact chips, scope shown once */
.lui-surface-scopes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-surface-scope__action {
  min-width: 4.5rem;
  text-transform: capitalize;
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .lui-surface-row {
    flex-wrap: wrap;
  }

  .lui-surface-row__meta {
    justify-content: flex-start;
  }
}

/* JSON Schema viewer — structured + raw toggle */
.lui-schema-viewer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-schema-viewer__toolbar {
  display: flex;
  justify-content: flex-end;
}

.lui-schema-viewer__mode {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.lui-schema-viewer__tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: calc(var(--radius-md, 6px) - 2px);
  cursor: pointer;
}

.lui-schema-viewer__tab--active {
  background: var(--color-background);
  color: var(--color-content);
}

.lui-schema-viewer__panel {
  min-width: 0;
}

.lui-schema-viewer__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lui-schema-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-schema-field--nested {
  margin-left: 12px;
  border-style: dashed;
}

.lui-schema-field__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lui-schema-field__name {
  font-weight: 600;
}

.lui-schema-field__default {
  margin-left: auto;
}

.lui-schema-field__constraints {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-schema-field__children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.lui-detail-section + .lui-detail-section { margin-top: 0; }

/* Partner organization settings — one column until the tab is wide enough
   for two cards. Container query, not the viewport: the sidebar already
   consumes width. Controls fill the card so a select is not stuck at 420px
   inside a half-width card. */
.lui-organization-settings {
  container-type: inline-size;
}

.lui-organization-settings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.lui-organization-settings__grid > .lui-card {
  height: 100%;
  min-width: 0;
}

@container (min-width: 880px) {
  .lui-organization-settings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lui-organization-settings__grid .lui-forms__group,
  .lui-organization-settings__grid .lui-forms__control,
  .lui-organization-settings__grid .lui-select,
  .lui-organization-settings__grid .lui-select__shell,
  .lui-organization-settings__grid .lui-locale-select,
  .lui-organization-settings__grid .lui-locale-select .lui-forms__composite {
    max-width: none;
    width: 100%;
  }
}

.lui-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.lui-detail-list__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-detail-section__logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}

.lui-detail-card.lui-card { padding: 0; }

/* Tab-panel cards — shared/card/tab_card (loopos-ui-v2 gallery rhythm).
   overflow:hidden clipped in-card pickers (locale listbox, LOOPOS-124).
   Header keeps the radius clip; an open control lifts the card over siblings.
   Explicit overflow-hidden on the same card still clips (Test Lab canvas). */
.lui-tab-panel-card.lui-card {
  overflow: visible;
  position: relative;
  z-index: 0;
  gap: 0;
  padding: 0;
}

.lui-tab-panel-card.lui-card.overflow-hidden {
  overflow: hidden;
}

.lui-tab-panel-card.lui-card:has([aria-expanded="true"]) {
  z-index: 4;
}

/* Direct children only — nested catalog/activation cards also use lui-card__* */
.lui-tab-panel-card.lui-card > .lui-card__header {
  padding: 12px;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-tertiary);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

.lui-tab-panel-card.lui-card > .lui-card__body {
  padding: 0;
}

.lui-tab-panel-card__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.lui-tab-panel-card__header--with-actions {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lui-tab-panel-card__header-text {
  min-width: 0;
  flex: 1 1 auto;
}

.lui-tab-panel-card__header-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lui-tab-panel-card__title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* heading-16 is 16/22 — sm icon-only is 28px and stretches the section header. */
.lui-tab-panel-card__title .lui-button--icon-only,
.lui-tab-panel-card__header-actions .lui-button--icon-only {
  width: 22px;
  min-width: 22px;
  height: 22px;
}

.lui-tab-panel-card__body {
  padding: 12px;
}

.lui-tab-panel-card__body.p-0 {
  padding: 0;
}

/* List-only body — no nested shell / row chrome; 4px header↔rows, 2px row↔row.
   :only-child so a footer form (or mixed body) keeps the 12px inset. */
.lui-tab-panel-card__body:has(> .lui-list:only-child) {
  padding: 4px 0 0;
}

.lui-tab-panel-card__body > .lui-list {
  border: none;
  border-radius: 0;
  background: transparent;
}

.lui-tab-panel-card__body > .lui-list .lui-list__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-tab-panel-card__body > .lui-list .lui-list__item {
  border-top: none;
}

.lui-tab-panel-card.lui-card > .lui-card__footer {
  padding: 12px;
  background: var(--color-background);
  border-top: 1px solid var(--color-tertiary);
}

.lui-role-assign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.lui-role-assign-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
}

.lui-role-assign-card:hover,
.lui-role-assign-card:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-border, var(--color-tertiary));
}

.lui-role-assign-card .lui-avatar {
  flex-shrink: 0;
  margin-top: 1px;
}

.lui-role-assign-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-role-assign-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Process show — LoopOS Flow tab: diagram + chronology log */
.lui-tab-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 992px) {
  .lui-tab-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: stretch;
    gap: 16px;
  }

  .lui-tab-flow__chronology .lui-tab-panel-card.lui-card {
    height: 100%;
    max-height: clamp(28rem, calc(100vh - 22rem), 44rem);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lui-tab-flow__chronology .lui-tab-panel-card.lui-card > .lui-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .lui-tab-flow__chronology .lui-scroll-edge {
    flex: 1 1 auto;
    min-height: 0;
  }
}

.lui-record-image-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lui-record-image-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-family: var(--font-sans);
}

.lui-record-image-upload__slot {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.lui-record-image-upload__trigger {
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
}

.lui-record-image-upload__preview {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.lui-record-image-upload__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-content) 52%, transparent);
  color: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-record-image-upload__icon {
  font-size: 24px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.lui-record-image-upload__trigger:hover .lui-record-image-upload__overlay,
.lui-record-image-upload__trigger:focus-visible .lui-record-image-upload__overlay {
  opacity: 1;
}

.lui-record-image-upload__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
  border-radius: 6px;
}

/* With image: reveal overlay + delete together on slot hover; upload icon stays centered */
.lui-record-image-upload--has-image .lui-record-image-upload__overlay {
  opacity: 0;
}

.lui-record-image-upload--has-image .lui-record-image-upload__trigger:hover .lui-record-image-upload__overlay,
.lui-record-image-upload--has-image .lui-record-image-upload__trigger:focus-visible .lui-record-image-upload__overlay {
  opacity: 0;
}

.lui-record-image-upload--has-image .lui-record-image-upload__slot:hover .lui-record-image-upload__overlay,
.lui-record-image-upload--has-image .lui-record-image-upload__slot:focus-within .lui-record-image-upload__overlay {
  opacity: 1;
}

.lui-record-image-upload__remove-form {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-record-image-upload__slot:hover .lui-record-image-upload__remove-form,
.lui-record-image-upload__slot:focus-within .lui-record-image-upload__remove-form,
.lui-record-image-upload__remove-form:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.lui-record-image-upload__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-content) 84%, transparent);
  color: var(--color-background);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-content) 24%, transparent);
}

.lui-record-image-upload__remove .material-symbols-rounded {
  font-size: 14px;
}

.lui-record-image-upload__remove:hover {
  background: var(--color-danger);
  color: var(--color-background);
}

.lui-record-image-upload__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

/* Circle — user avatars (matches lui-avatar--circle); whole control is round */
.lui-record-image-upload--circle .lui-record-image-upload__trigger,
.lui-record-image-upload--circle .lui-record-image-upload__trigger:focus-visible,
.lui-record-image-upload--circle .lui-record-image-upload__overlay,
.lui-record-image-upload--circle .lui-thumbnail {
  border-radius: 9999px;
}

.lui-record-image-upload--circle .lui-thumbnail img {
  object-fit: cover;
  object-position: center;
}

/* Delete chip on the rim — not clipped by the round mask */
.lui-record-image-upload--circle .lui-record-image-upload__remove-form {
  top: -2px;
  right: -2px;
}

@media (hover: none) {
  .lui-record-image-upload--has-image .lui-record-image-upload__remove-form {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lui-record-image-upload__overlay,
  .lui-record-image-upload__remove-form {
    transition: none;
  }
}

/* Record icon — native (loopos-ui-v2/native/record-icon.md). The icon of a record in the same 80×80
   tile as a record image (`lui-thumbnail--lg`): the icon picker's trigger, restyled, under the record
   image's content-colour mask. */
.lui-record-icon {
  display: inline-flex;
}

.lui-record-icon__slot {
  position: relative;
  display: inline-flex;
  width: 80px;
  height: 80px;
  line-height: 0;
}

.lui-record-icon__slot .lui-icon-picker {
  width: 80px;
  height: 80px;
}

.lui-record-icon__slot .lui-icon-picker__trigger {
  justify-content: center;
  width: 80px;
  height: 80px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-record-icon__slot .lui-icon-picker__leading {
  flex: 0 0 auto;
  justify-content: center;
}

.lui-record-icon__slot .lui-icon-picker__value {
  font-size: 32px;
}

.lui-record-icon__slot .lui-icon-picker__label,
.lui-record-icon__slot .lui-icon-picker__caret {
  display: none;
}

/* Empty: the picker's placeholder (the ligature `add_reaction`, passed by the partial) as a muted glyph. */
.lui-record-icon__slot .lui-icon-picker__placeholder {
  font-family: "Material Symbols Rounded", sans-serif;
  font-size: 32px;
  line-height: 1;
  opacity: 0.5;
}

.lui-record-icon__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-content) 52%, transparent);
  color: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-record-icon__edit {
  font-size: 24px;
}

.lui-record-icon__slot:hover .lui-record-icon__overlay,
.lui-record-icon__slot:focus-within .lui-record-icon__overlay {
  opacity: 1;
}

.lui-record-icon__slot .lui-icon-picker__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

.lui-record-icon--circle .lui-icon-picker__trigger,
.lui-record-icon--circle .lui-record-icon__overlay,
.lui-record-icon--circle .lui-thumbnail {
  border-radius: 9999px;
}

/* File upload card — native (loopos-ui-v2/native/file-upload-card.md) */
.lui-file-upload-card.lui-tab-panel-card .lui-tab-panel-card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-file-upload-card__body--readonly {
  padding-top: 16px;
}

.lui-file-upload-card__drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 16px;
  border: 2px dashed var(--color-tertiary);
  background: var(--color-background);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lui-file-upload-card__browse {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  cursor: pointer;
  outline: none;
}

.lui-file-upload-card__import-url {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-tertiary);
  text-align: left;
}

.lui-file-upload-card__import-url-field {
  flex: 1;
  min-width: 0;
}

.lui-file-upload-card__icon {
  display: block;
  font-size: 40px;
  width: 1em;
  height: 1em;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--color-content-secondary);
  overflow: visible;
}

.lui-file-upload-card__drop-zone:hover,
.lui-file-upload-card__drop-zone:focus-within {
  border-color: color-mix(in srgb, var(--color-chrome-accent) 50%, var(--color-tertiary));
  outline: none;
}

.lui-file-upload-card__drop-zone--active {
  border-color: var(--color-chrome-accent);
  background: color-mix(in srgb, var(--color-chrome-accent) 8%, var(--color-background));
}

.lui-file-upload-card__drop-zone[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}

.lui-file-upload-card__queue-section {
  border-color: var(--color-tertiary);
}

.lui-file-upload-card__files {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}

.lui-file-upload-card__linked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}

.lui-file-upload-card__divider {
  background: var(--color-tertiary);
}

.lui-file-upload-card__files-list {
  padding-bottom: 0;
}

.lui-file-upload-card__file-row,
.lui-file-upload-card__queue-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lui-file-upload-card__file-body {
  min-width: 0;
  flex: 1;
}

.lui-file-upload-card__file-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lui-attachments-section {
  width: 100%;
}


.lui-file-upload-card__type-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  font-weight: 600;
  flex-shrink: 0;
}

.lui-file-upload-card__queue-body {
  min-width: 0;
  flex: 1;
}

.lui-file-upload-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.lui-file-upload-card__status--uploading {
  color: var(--color-chrome-accent);
}

.lui-file-upload-card__status--completed {
  color: var(--color-success);
}

.lui-file-upload-card__status--error {
  color: var(--color-danger);
}

.lui-file-upload-card__progress {
  margin-top: 8px;
  height: 6px;
  width: 100%;
  border-radius: 9999px;
  background: var(--color-secondary);
  overflow: hidden;
}

.lui-file-upload-card__progress-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--color-chrome-accent);
  transition: width 0.15s ease;
}

.lui-file-upload-card__queue-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lui-file-upload-card__drop-zone,
  .lui-file-upload-card__progress-bar {
    transition: none;
  }
}

.lui-detail-tab-stack {
  min-width: 0;
  container-type: inline-size;
  container-name: detail-tab;
}

.lui-detail-tab-stack__layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.lui-detail-tab-stack__layout > .lui-detail-tab-stack__primary,
.lui-detail-tab-stack__resources {
  min-width: 0;
  width: 100%;
  justify-self: stretch;
}

.lui-detail-tab-stack__primary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* The use-case editor is one form around the same two shells as the read-only
   tab (description, then the attribute grid). The form must stack them with
   the column gap — a single flex child would glue the cards together.
   Labels match the grid (copy-12, secondary). .lui-forms__label sets content
   color after .text-secondary, so the color is restated here. */
.use-case-detail-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.use-case-detail-form .lui-forms__label {
  color: var(--color-content-secondary);
}

.lui-detail-tab-stack__primary > .lui-card,
.lui-detail-tab-stack__primary .lui-card,
.lui-detail-tab-stack__primary > .lui-detail-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.process-detail-primary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.process-detail-primary > .lui-card,
.process-detail-people > .lui-card {
  width: 100%;
  min-width: 0;
}

.process-detail-item__identity {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.process-detail-item__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

/* Process / Equipment / Client: label left, value right (page-brief exploration). */
.process-detail-process .lui-detail-list,
.process-detail-item .lui-detail-list,
.process-detail-client .lui-detail-list {
  gap: 0;
}

.process-detail-process .lui-detail-list__row,
.process-detail-item .lui-detail-list__row,
.process-detail-client .lui-detail-list__row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding: 8px 0;
  border-top: 1px solid var(--color-tertiary);
  min-width: 0;
}

.process-detail-process .lui-detail-list__row:first-child,
.process-detail-item .lui-detail-list__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.process-detail-process .lui-detail-list__row:last-child,
.process-detail-item .lui-detail-list__row:last-child,
.process-detail-client .lui-detail-list__row:last-child {
  padding-bottom: 0;
}

.process-detail-process .lui-detail-list__row dt,
.process-detail-item .lui-detail-list__row dt,
.process-detail-client .lui-detail-list__row dt {
  flex: 0 1 auto;
}

.process-detail-process .lui-detail-list__row dd,
.process-detail-item .lui-detail-list__row dd,
.process-detail-client .lui-detail-list__row dd {
  margin: 0 0 0 auto;
  text-align: right;
  min-width: 0;
  flex: 0 1 auto;
}

/* Process state: one split chip (block | token). Hue tokens match lui-badge. */
.lui-flow-position {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  vertical-align: middle;
}

.lui-flow-position__block,
.lui-flow-position__token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 8px;
  line-height: 16px;
}

.lui-flow-position__block {
  color: var(--color-content-secondary);
  background: var(--color-tertiary);
}

.lui-flow-position__token {
  color: var(--color-content-secondary);
}

.lui-flow-position__label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lui-flow-position__icon {
  flex-shrink: 0;
  font-size: 14px;
}

.lui-flow-position__rule {
  width: 1px;
  flex-shrink: 0;
  background: var(--color-tertiary);
}

.lui-flow-position--yellow {
  border-color: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--yellow .lui-flow-position__token {
  color: var(--color-warning-fg);
}
.lui-flow-position--yellow .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--blue {
  border-color: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--blue .lui-flow-position__token {
  color: var(--color-informative-fg);
}
.lui-flow-position--blue .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--green {
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--green .lui-flow-position__token {
  color: var(--color-success-fg);
}
.lui-flow-position--green .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--red {
  border-color: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--red .lui-flow-position__token {
  color: var(--color-danger-fg);
}
.lui-flow-position--red .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--orange {
  border-color: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-orange) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--orange .lui-flow-position__token {
  color: var(--color-orange-fg);
}
.lui-flow-position--orange .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--purple {
  border-color: color-mix(in srgb, var(--color-purple) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-purple) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--purple .lui-flow-position__token {
  color: var(--color-purple-fg);
}
.lui-flow-position--purple .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-purple) var(--color-tint-border-strength), var(--color-tertiary));
}

.process-detail-people {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.process-detail-involved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.process-detail-involved__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-detail-involved__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.process-detail-involved__row:has(> .process-detail-hit) {
  display: block;
}

.process-detail-involved__copy {
  flex: 1;
  min-width: 0;
}

.process-detail-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: transparent;
}

.process-detail-hit--row {
  padding: 8px 16px;
  border-radius: 0;
}

.process-detail-item__photo-hit {
  display: block;
  padding: 0;
  overflow: hidden;
}

.process-detail-hit:hover,
.process-detail-hit:focus-visible {
  background: var(--color-secondary);
}

.process-detail-hit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

@container detail-tab (min-width: 40rem) {
  .process-detail-people {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
    align-items: start;
  }
}

.lui-detail-tab-stack__resources {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.lui-detail-tab-stack__resources > *,
.lui-detail-tab-stack__resources-leading,
.lui-detail-tab-stack__resources-leading > .lui-detail-tab-section,
#bookings,
#bookings .lui-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
}

.lui-detail-tab-section turbo-frame.lui-is-loading,
.lui-detail-tab-section turbo-frame[busy],
.lui-detail-tab-section turbo-frame[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* Bookings card: Turbo sets [busy] on the frame during create. Do not disable
   the whole card — a pending row (`.lui-list__item--pending`) is the loader. */
#bookings turbo-frame.lui-is-loading,
#bookings turbo-frame[busy],
#bookings turbo-frame[aria-busy="true"] {
  opacity: 1;
  pointer-events: auto;
}

#bookings .lui-list__item--pending {
  pointer-events: none;
}

#bookings .lui-list--hoverable .lui-list__item--pending:hover,
#bookings .lui-list--hoverable .lui-list__item--pending:focus-within {
  background: transparent;
}

.lui-detail-tab-section {
  min-width: 0;
  width: 100%;
  scroll-margin-top: 72px;
}

.lui-detail-tab-section turbo-frame,
.lui-detail-tab-section .lui-card {
  display: block;
  width: 100%;
  min-width: 0;
}

.lui-tab-detail {
  align-items: start;
}

.lui-detail-tab-stack .lui-tab-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.lui-detail-tab-stack .lui-tab-detail__span {
  grid-column: 1 / -1;
}

/* Entity show, Detalhe: facts card, then the Moradas card, in the left column. */
.entity-detail-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.entity-address-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

.entity-address-row--framed {
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
}

.entity-address-list--plain [data-entity-addresses-row] + [data-entity-addresses-row] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-tertiary);
}

.entity-address-read__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--color-tertiary);
}

.entity-address-read__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.lui-detail-tab-stack .lui-inline-edit__field,
.lui-detail-tab-stack .lui-forms__group {
  max-width: none;
  width: 100%;
  min-width: 0;
}

.lui-detail-tab-stack .lui-forms__group.entity-address-fields__country {
  max-width: 8rem;
}

/* Tailwind `self-start` is not in this bundle. A secondary button in a column
   flex must stay the width of its label. */
.lui-button.self-start {
  align-self: flex-start;
  width: auto;
}

.lui-detail-tab-stack .lui-forms__control {
  max-width: none;
}

@container detail-tab (min-width: 28rem) {
  .lui-detail-tab-stack .lui-tab-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container detail-tab (min-width: 40rem) {
  .lui-detail-tab-stack__resources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .lui-detail-tab-stack__resources-leading {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

@container detail-tab (min-width: 56rem) {
  .lui-detail-tab-stack__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.85fr);
    align-items: start;
  }

  .lui-detail-tab-stack__resources {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}

/* Run show (Serviços): General and the type card sit side by side once the
   page is wide enough. Rows keep the process fact-list rhythm. */
.lui-run-show-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 900px) {
  .lui-run-show-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lui-run-show-cards .lui-tab-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.lui-run-show-cards .lui-tab-detail > div {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding: 8px 0;
  border-top: 1px solid var(--color-tertiary);
  min-width: 0;
}

.lui-run-show-cards .lui-tab-detail > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.lui-run-show-cards .lui-tab-detail > div:last-child {
  padding-bottom: 0;
}

/* Metadata is one card. The tree is the body, not a second bordered table,
   and long values wrap instead of clamping to three lines. */
.lui-run-metadata .lui-metadata-tree {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lui-run-metadata .lui-metadata-tree__value--clamp {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.lui-run-metadata .lui-metadata-dataset__json {
  padding: 12px;
}

.lui-tab-detail .lui-badge {
  width: fit-content;
  max-width: 100%;
}

.lui-detail-card__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.lui-detail-card__section + .lui-detail-card__section {
  border-top: 1px solid var(--color-tertiary);
}

/*
 * LoopOS Flux App settings renderer (read-only + edit) — shared by the partner
 * Setup hub pane, admin partner Apps tab and inline activation config.
 * Groups reuse the .lui-detail-card__section divider rhythm without its inset,
 * because every consumer already sits inside a padded card body.
 * The grid is auto-fit so it really collapses on a narrow pane — unlike the
 * `md:grid-cols-2` Tailwind variant, which this app's CSS does not ship.
 */
.lui-app-settings {
  display: flex;
  flex-direction: column;
}

.lui-app-settings__group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0;
}

.lui-app-settings__group:first-child {
  padding-top: 0;
}

.lui-app-settings__group:last-child {
  padding-bottom: 0;
}

.lui-app-settings__group + .lui-app-settings__group {
  border-top: 1px solid var(--color-tertiary);
}

.lui-app-settings__group-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-app-settings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 24px;
  align-items: start;
}

.lui-app-settings__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lui-app-settings__field--full {
  grid-column: 1 / -1;
}

.lui-app-settings__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-app-settings__string-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-app-settings__string-list-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-app-settings__string-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-app-settings__string-list-row .lui-forms__group {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.lui-app-settings__string-list-row .lui-forms__control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.lui-app-settings__string-list-row .lui-button {
  flex-shrink: 0;
}

.lui-app-settings__string-list-add {
  align-self: start;
}

.lui-app-settings__string-list:has(.lui-app-settings__string-list-rows [data-nested-form-target="item"]) .lui-app-settings__string-list-empty {
  display: none;
}

/* Value + unit suffix ("48 h") without pulling in a composite addon shell. */
.lui-app-settings__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-app-settings__control .lui-forms__control {
  flex: 1 1 auto;
}

.lui-app-settings__unit {
  flex-shrink: 0;
}

.lui-detail-card--two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}
.lui-detail-card--two-col .lui-detail-card__section + .lui-detail-card__section {
  border-top: 1px solid var(--color-tertiary);
  border-left: none;
}
@media (min-width: 900px) {
  .lui-detail-card--two-col .lui-detail-card__section + .lui-detail-card__section {
    border-top: none;
    border-left: 1px solid var(--color-tertiary);
  }
}

.lui-page-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.lui-page-split--contrib {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 899px) {
  .lui-page-split,
  .lui-page-split--contrib {
    grid-template-columns: 1fr;
  }
}

/* Email templates — integrations portal */
.lui-email-template-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  width: 100%;
}

.lui-email-template-locale {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-primary);
}

.lui-email-template-locale__summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  color: var(--color-content);
}

.lui-email-template-locale__summary::-webkit-details-marker { display: none; }

.lui-email-template-locale__chevron {
  color: var(--color-content-secondary);
  transition: transform 120ms ease;
}

.lui-email-template-locale[open] .lui-email-template-locale__chevron {
  transform: rotate(180deg);
}

.lui-email-template-locale__body {
  border-top: 1px solid var(--color-tertiary);
  padding: 16px;
}

.lui-email-template-preview {
  height: min(70vh, 640px);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-primary);
}

.lui-email-template-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lui-table__actions form { display: inline-flex; align-items: center; }

.lui-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.lui-topbar-actions form { display: inline-flex; align-items: center; }
/* Form switches are full-width with the label on the left. In the action bar
   the same variant must shrink to the control + label, first among the CTAs.
   Extra end margin sits on top of the 8px cluster gap so the toggle is not
   flush against the next button. */
.lui-topbar-actions .lui-switch--label-left {
  width: auto;
  justify-content: flex-start;
  margin-inline-end: 8px;
}

/* Action-bar icon-only buttons: 16px (exception to unified 14px button icon rule).
   See docs/loopos-ui-exceptions.md */
.lui-topbar-actions .lui-button--icon-only .material-symbols-rounded,
#lui-action-bar .lui-button--icon-only .material-symbols-rounded {
  font-size: 16px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16 !important;
}
.lui-topbar-actions .lui-button--icon-only .material-symbols-rounded--filled,
#lui-action-bar .lui-button--icon-only .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 16 !important;
}

.lui-topbar-sign-out {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--color-content);
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms ease;
}

.lui-topbar-sign-out:hover {
  background: var(--color-secondary);
}

.lui-sidebar__sign-out-form {
  width: 100%;
  margin: 0;
}

.lui-sidebar__bottom .lui-sidebar__sign-out-form .lui-dropdown__item {
  border-radius: 6px;
}

.lui-action-bar__start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* Breadcrumb + optional leading control (e.g. highlight) — tight 2px gap. */
.lui-action-bar__trail {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-action-bar__back {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 6px;
}

.lui-action-bar__leading {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Breadcrumb — lui-breadcrumb
   Do not set overflow-x:hidden alone: CSS pairs it with overflow-y and
   crops tall Flux Apps identity tiles. Horizontal collapse still works via
   Stimulus hiding middle crumbs; clip only when needed (non–flux-app). */
.lui-breadcrumb {
  display: flex;
  overflow: visible;
  white-space: nowrap;
  min-width: 0;
  align-items: center;
}

.lui-action-bar:not(.lui-action-bar--flux-app) .lui-breadcrumb {
  overflow: hidden;
}

.lui-action-bar__trail > .lui-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
}

.lui-breadcrumb__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-breadcrumb__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

/* `display: flex` above would otherwise beat the `hidden` attribute. */
.lui-breadcrumb__item[hidden],
.lui-breadcrumb__overflow-menu [hidden] {
  display: none !important;
}

.lui-breadcrumb__item:last-child {
  min-width: 0;
}

.lui-breadcrumb__separator,
.lui-breadcrumb__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.lui-breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

.lui-nav-icon-tile .lui-breadcrumb__icon {
  width: 18px;
  height: 18px;
}

.lui-nav-icon-tile--md .lui-breadcrumb__icon,
.lui-breadcrumb__icon--md {
  width: 29px;
  height: 29px;
}

.lui-nav-icon-tile--lg .lui-breadcrumb__icon,
.lui-breadcrumb__icon--lg {
  width: 50px;
  height: 50px;
}

.lui-breadcrumb__icon--lg:not(.lui-m_icon) {
  width: 56px;
  height: 56px;
  font-size: 56px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 56;
}

.lui-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
}

/* :root keeps the weight these rules had over the old icon-reveal rule — separators inherit copy-13 content otherwise */
:root .lui-breadcrumb__separator.material-symbols-rounded {
  color: var(--color-content-secondary);
}

.lui-breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--color-content-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.lui-breadcrumb__link:hover {
  color: var(--color-content);
  background: var(--color-secondary);
}

.lui-breadcrumb__link:focus-visible,
.lui-breadcrumb__ellipsis:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-breadcrumb__ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.lui-breadcrumb__ellipsis:hover {
  color: var(--color-content);
  background: var(--color-secondary);
}

.lui-breadcrumb__overflow {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lui-breadcrumb__overflow-menu {
  min-width: 12rem;
  max-width: min(360px, 90vw);
  padding: 0;
}

.lui-breadcrumb__overflow-menu .lui-dropdown__list {
  padding: 4px;
}

.lui-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--color-content);
}

.lui-breadcrumb__plain {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
}

.lui-breadcrumb__link--icon-only,
.lui-breadcrumb__current--icon-only {
  justify-content: center;
  padding: 4px 6px;
  line-height: 1;
  min-height: 26px;
  box-sizing: border-box;
}

.lui-breadcrumb__current--truncate {
  min-width: 0;
}

.lui-breadcrumb__label-group--truncate {
  min-width: 0;
}

.lui-breadcrumb__label-group--truncate > .truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-breadcrumb__label-group--truncate .lui-badge {
  flex-shrink: 0;
}

.lui-breadcrumb__switcher {
  min-width: 0;
}

.lui-breadcrumb__current-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.lui-breadcrumb__current-trigger:hover,
.lui-breadcrumb__current-trigger[aria-expanded="true"] {
  background: var(--color-secondary);
}

/* Popover triggers — no focus ring while menu is open */
.lui-dropdown[data-state="open"] > [data-dropdown-target="button"]:focus,
.lui-dropdown[data-state="open"] > [data-dropdown-target="button"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.lui-breadcrumb__current-trigger:focus-visible:not([aria-expanded="true"]) {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-breadcrumb__switcher-icon {
  font-size: 16px;
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-breadcrumb__switcher-menu {
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: min(360px, 90vw);
  max-height: min(320px, 50vh);
  padding: 0;
  overflow: hidden;
}

/* Beat `.lui-dropdown__menu[open] { display: block }` so the column flex chain
   (max-height → body → turbo-frame → scroll viewport) actually constrains height. */
.lui-breadcrumb__switcher-menu.lui-dropdown__menu[open],
.lui-breadcrumb__switcher-menu.lui-dropdown__menu[data-floating="true"] {
  display: flex;
  flex-direction: column;
}

.lui-breadcrumb__switcher-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Lazy list loads inside a turbo-frame — keep it in the flex height chain. */
.lui-breadcrumb__switcher-body > turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.lui-breadcrumb__switcher-body .lui-scroll-edge {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.lui-breadcrumb__switcher-list.lui-dropdown__list.lui-scroll-edge__viewport {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.lui-breadcrumb__switcher-list.lui-dropdown__list.lui-scroll-edge__viewport::-webkit-scrollbar {
  width: 6px;
}

.lui-breadcrumb__switcher-list.lui-dropdown__list.lui-scroll-edge__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.lui-breadcrumb__switcher-list.lui-dropdown__list.lui-scroll-edge__viewport::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 24%, transparent);
  background-clip: content-box;
  border: 1px solid transparent;
  border-radius: 9999px;
}

.lui-breadcrumb__switcher-check {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--color-content);
}

.lui-breadcrumb__switcher-footer {
  flex-shrink: 0;
  padding: 0 4px 4px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-breadcrumb__switcher-footer-action {
  margin-top: 4px;
}

/* Select — lui-select (+ Tom Select bridge) */
.lui-select { position: relative; width: 100%; }

.lui-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.lui-forms__composite.lui-select__shell {
  gap: 4px;
  padding: 0 8px;
  width: 100%;
  cursor: pointer;
}

.lui-select__control {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  color: var(--color-content);
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
  box-sizing: border-box;
}

.lui-select__control:focus-visible {
  outline: none;
}

.lui-select:has(.lui-select__dropdown:not([hidden])) .lui-forms__composite.lui-select__shell:focus-within {
  border-color: var(--color-tertiary);
  box-shadow: none;
}

.lui-select__control[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--color-foreground);
}

/* Tom Select moves the original <select> out of sight by adding this class and
   expects the stylesheet to do the hiding. The app styles .ts-wrapper and
   .ts-control but never declared this one, so the select stayed on screen beside
   the control Tom Select had just built — two boxes, the label truncated.

   `visibility: hidden` is not enough: the partial sets it inline to avoid a
   flash of unstyled control, and lui--select clears it once initialised. Clip it
   out of the layout instead, and keep it in the accessibility tree — the real
   <select> is still what a screen reader and the form submission use. */
.ts-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.lui-forms__composite .ts-wrapper.single .ts-control,
.lui-forms__composite .ts-wrapper.multi .ts-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  color: var(--color-content);
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
}

.lui-forms__composite .ts-wrapper.focus .ts-control,
.lui-forms__composite .ts-wrapper.dropdown-active .ts-control {
  border-color: transparent;
  box-shadow: none;
}

.lui-forms__composite .ts-wrapper.disabled .ts-control {
  cursor: not-allowed;
  color: var(--color-foreground);
  background: var(--color-primary);
}

/*
 * Select size variants — outer shell height (§3.5 control size scale).
 * xs → 24px · sm → 28px · md → 32px (default) · lg → 40px
 * Multi shells use min-height (not fixed height) so wrapped chips are not clipped.
 */
.lui-select--xs .lui-forms__composite.lui-select__shell {
  height: var(--lui-control-height-xs);
  min-height: var(--lui-control-height-xs);
  padding: 0 6px;
}

.lui-select--sm .lui-forms__composite.lui-select__shell {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
  padding: 0 6px;
}

.lui-select--lg .lui-forms__composite.lui-select__shell {
  height: var(--lui-control-height-lg);
  min-height: var(--lui-control-height-lg);
  padding: 0 12px;
}

.lui-forms__composite.lui-select__shell:has(.lui-select__value--multi),
.lui-forms__composite:has(.ts-wrapper.multi) {
  height: auto;
  min-height: var(--lui-control-height-md);
}

.lui-select--xs .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-xs);
}

.lui-select--sm .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-sm);
}

.lui-select--lg .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-lg);
}

.lui-select__control:has(.lui-select__value--multi),
.lui-forms__composite .ts-wrapper.multi .ts-control {
  height: auto;
  align-self: stretch;
  padding-block: 4px;
  flex-wrap: wrap;
}

.lui-select--sm .lui-select__chip {
  padding: 1px 4px 1px 6px;
}

.lui-select--lg .lui-select__control {
  gap: 8px;
}

.lui-select__value,
.lui-forms__composite .ts-control .item {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-select__value--multi {
  flex-wrap: wrap;
  row-gap: 4px;
  white-space: normal;
  overflow: hidden;
  max-width: 100%;
}

.lui-select__placeholder {
  color: var(--color-content-secondary);
}

.lui-select__chip,
.lui-forms__composite .ts-control .item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 4px 2px 8px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-select__chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.lui-forms__composite .ts-control .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-select__chip[data-flag="true"],
.lui-forms__composite .ts-control .item[data-flag="true"],
.lui-select__chip--flagged {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-danger-fg);
}

.lui-select__chip-remove,
.lui-forms__composite .ts-control .item .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  color: var(--color-content-secondary);
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
}

.lui-select__chip-remove .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-select__chip-remove:hover,
.lui-forms__composite .ts-control .item .remove:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 12%, transparent);
}

.lui-select__clear,
.lui-select__chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
}

.lui-select__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.lui-select__clear .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-select__clear[hidden] {
  display: none !important;
}

.lui-select__clear:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 12%, transparent);
}

.lui-select__shell:has(.lui-select__control[aria-expanded="true"]) .lui-select__chevron {
  transform: rotate(180deg);
}

.lui-select__chevron {
  transition: transform 200ms ease;
}

.lui-select__dropdown.lui-dropdown__menu,
.lui-forms__composite .ts-dropdown {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  padding: 0;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  box-shadow: none;
  box-sizing: border-box;
}

.lui-select__dropdown.lui-dropdown__menu[hidden],
.lui-select__dropdown[hidden] {
  display: none !important;
}

.lui-select .lui-select__dropdown.lui-dropdown__menu {
  top: calc(100% + 4px);
  left: 0;
  right: 0;
}

.lui-select__dropdown.lui-dropdown__menu[data-floating="true"] {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
}

/* Portaled onto <body> — never sit in document flow at the page bottom. */
body > .lui-select__dropdown.lui-dropdown__menu {
  position: fixed;
}

.lui-select__dropdown.lui-dropdown__menu[popover] {
  inset: unset;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  color: inherit;
}

.lui-select__list.lui-dropdown__list,
.lui-forms__composite .ts-dropdown-content {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
}

.lui-select__group {
  padding: 8px 10px 4px;
  color: var(--color-content-secondary);
}

.lui-select__option.lui-dropdown__item,
.lui-forms__composite .ts-dropdown .option {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  color: var(--color-content);
  cursor: pointer;
}

.lui-select__option.lui-dropdown__item[data-active="true"],
.lui-select__option.lui-dropdown__item:hover,
.lui-forms__composite .ts-dropdown .option.active,
.lui-forms__composite .ts-dropdown .option:hover {
  background: var(--color-secondary);
}

.lui-select__option[aria-disabled="true"],
.lui-forms__composite .ts-dropdown .option.disabled {
  color: var(--color-foreground);
  cursor: not-allowed;
  pointer-events: none;
}

.lui-select__check {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-app);
  visibility: hidden;
}

.lui-select__option[aria-selected="true"] .lui-select__check {
  visibility: visible;
}

.lui-select__option-label--flagged,
.lui-forms__composite .ts-dropdown .option .lui-select__option-label--flagged {
  color: var(--color-danger-fg);
}

.lui-select__option-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-content-secondary);
}

.lui-select__option-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-select__option.lui-dropdown__item:has(.lui-select__option-desc) {
  align-items: flex-start;
}

.lui-select__option-desc { color: var(--color-content-secondary); }

.lui-select__option-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-select__empty,
.lui-forms__composite .ts-dropdown .no-results,
.lui-forms__composite .ts-dropdown .no-more-results,
.lui-forms__composite .ts-dropdown .loading-more-results {
  padding: 12px 10px;
  text-align: center;
  color: var(--color-content-secondary);
}

.lui-select__filter {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-select__filter-input {
  width: 100%;
  height: var(--lui-control-height-sm);
  padding: 0 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--lui-radius-sm, 6px);
  background: var(--color-primary);
  color: var(--color-content);
  box-sizing: border-box;
}

.lui-select--compact-filter .lui-forms__composite.lui-select__shell,
.lui-select--compact-filter .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
}

.lui-select--compact-filter .lui-select__control,
.lui-select--compact-filter .lui-select__control:has(.lui-select__value--multi) {
  height: 100%;
  padding-block: 0;
  flex-wrap: nowrap;
}

.lui-forms__composite .ts-wrapper { position: relative; width: 100%; }
.lui-forms__composite .ts-wrapper .ts-control input { color: var(--color-content); }
/* Tom Select renders its search input with `size="1"` and leaves the growing to
   its own stylesheet, which this app does not load — it hand-rolls the .ts-*
   rules it wants instead. Without this the input stays ~28px and a placeholder
   longer than a couple of characters is clipped ("Aut" for "Automatic — …"). */
.lui-forms__composite .ts-wrapper .ts-control > input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.lui-forms__composite .dropdown-input-search-icon { color: var(--color-content-secondary); }
.lui-forms__composite .flag-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-forms__composite .flag-toggle:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-forms__composite .external-tags-container .lui-select__chip { margin: 0; }

.lui-select__scroll-btn {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: linear-gradient(to bottom, var(--color-background), transparent);
  color: var(--color-content-secondary);
  z-index: 10;
}

.lui-select__scroll-btn--down {
  bottom: 0;
  background: linear-gradient(to top, var(--color-background), transparent);
}

/* Password — lui-password */
/* Number / quantity input — native/number-input.md */
.lui-number-input {
  display: block;
  width: 100%;
}

.lui-number-input__field,
.lui-forms__composite.lui-number-input__field {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  width: 100%;
}

.lui-number-input--plain .lui-number-input__field,
.lui-number-input--plain .lui-forms__composite.lui-number-input__field {
  padding: 0 10px;
}

.lui-number-input__field .lui-forms__control {
  flex: 1;
  min-width: 0;
  max-width: none;
  text-align: center;
  height: auto;
  min-height: 0;
  border: none;
  padding: 6px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.lui-number-input--plain .lui-number-input__field .lui-forms__control {
  text-align: start;
}

.lui-number-input__field .lui-forms__control:focus,
.lui-number-input__field .lui-forms__control:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.lui-number-input__field .lui-forms__control::-webkit-outer-spin-button,
.lui-number-input__field .lui-forms__control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lui-number-input__field .lui-forms__control[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.lui-number-input__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.lui-forms__composite--lg .lui-number-input__btn {
  width: 24px;
  height: 24px;
}

.lui-number-input__btn .material-symbols-rounded {
  font-size: 14px;
  width: 14px;
  height: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-number-input__btn:hover:not(:disabled) {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-number-input__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-number-input__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Phone input — native/phone-input.md
   @flux-sync: .cursor/skills/🎨 frontend/loopos-ui-v2/rails-blocks/gallery.css (section 7) */
.lui-phone-input {
  position: relative;
  display: block;
  width: 100%;
}

.lui-phone-input__field,
.lui-forms__composite.lui-phone-input__field {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 10px 0 4px;
  width: 100%;
}

.lui-phone-input__dial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 100%;
  padding: 0 8px 0 6px;
  border: none;
  border-right: 1px solid var(--color-tertiary);
  border-radius: 0;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
}

.lui-phone-input__dial:hover:not(:disabled) {
  background: var(--color-secondary);
}

.lui-phone-input__dial:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-phone-input__dial:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lui-phone-input__flag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  line-height: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.lui-phone-input__flag img {
  display: block;
  width: 20px;
  height: 15px;
  object-fit: cover;
  image-rendering: auto;
}

.lui-locale-flag {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}

.lui-locale-flag svg {
  width: 1.125rem;
  height: auto;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.lui-locale-select-field {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.lui-locale-select__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lui-locale-select__shell {
  position: relative;
}

.lui-locale-select__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--color-content);
}

.lui-locale-select__trigger:not(.lui-button) {
  width: 100%;
  padding: 0;
  font: inherit;
}

.lui-locale-select__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-locale-select__chevron {
  flex-shrink: 0;
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

.lui-locale-select .lui-forms__composite {
  width: max-content;
  min-width: 12rem;
  max-width: 100%;
}

.lui-locale-select--compact .lui-locale-select__trigger.lui-button {
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  gap: 6px;
  color: var(--color-content-secondary);
}

.lui-locale-select--compact .lui-locale-select__trigger.lui-button:hover,
.lui-locale-select--compact .lui-locale-select__trigger.lui-button[aria-expanded="true"] {
  color: var(--color-content);
}

.lui-locale-select--compact .lui-locale-select__value {
  flex: 0 0 auto;
  color: inherit;
}

.lui-locale-select--compact .lui-locale-select__trigger.copy-13,
.lui-locale-select--compact .lui-locale-select__value.copy-13 {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.lui-locale-select--compact .lui-locale-select__menu,
.lui-locale-select__menu--compact {
  min-width: 12rem;
}

.lui-locale-select__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
}

.lui-locale-select__menu[hidden] {
  display: none !important;
}

.lui-locale-select__menu[data-floating="true"] {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  /* Do not inherit min-width: 100% — that is 100% of the viewport when portaled. */
  min-width: 0;
}

.lui-locale-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-content);
}

.lui-locale-select__option:hover,
.lui-locale-select__option.is-selected {
  background: var(--color-secondary);
}

.lui-phone-input__code {
  white-space: nowrap;
}

.lui-phone-input__chevron {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

.lui-phone-input__field .lui-forms__control {
  flex: 1;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  border: none;
  padding: 6px 0 6px 10px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.lui-phone-input__field .lui-forms__control:focus,
.lui-phone-input__field .lui-forms__control:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.lui-phone-input__trailing {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: 2px;
}

.lui-phone-input__field:has(.lui-phone-input__trailing) {
  padding-right: 4px;
}

.lui-phone-input__dropdown {
  min-width: 16rem;
  max-height: min(280px, calc(100dvh - 16px));
  overflow: hidden;
}

.lui-phone-input__dropdown[data-floating="true"] {
  overflow: hidden;
}

.lui-phone-input__dropdown .lui-dropdown__item[hidden] {
  display: none !important;
}

.lui-forms__composite.lui-phone-input__field.is-invalid {
  border-color: var(--color-negative);
}

/* Phone display — native/phone.md */
.lui-phone {
  display: inline;
}

a.lui-link .lui-phone {
  color: inherit;
}

/* Audio player — native/audio-player.md */
.lui-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}
.lui-audio-player.is-loading { opacity: 0.7; }
.lui-audio-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
}
.lui-audio-player__play:hover { background: var(--color-secondary); }
.lui-audio-player__play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}
.lui-audio-player__play .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 14;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
}
.lui-audio-player__seek {
  flex: 1;
  min-width: 0;
  height: 4px;
  accent-color: var(--color-chrome-accent);
  cursor: pointer;
}
.lui-audio-player__time {
  flex-shrink: 0;
  color: var(--color-content-secondary);
}

/* Transcript — native/transcript.md */
.lui-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-transcript__log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-height: min(60vh, 28rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lui-transcript--live .lui-transcript__log {
  min-height: 8rem;
  max-height: min(40dvh, 20rem);
}

.lui-transcript__log::-webkit-scrollbar {
  width: 6px;
}

.lui-transcript__log::-webkit-scrollbar-track {
  background: transparent;
}

.lui-transcript__log::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-content) 24%, transparent);
  background-clip: content-box;
}

.lui-transcript__turn {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
}

.lui-transcript__time {
  flex: 0 0 5ch;
  width: 5ch;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--color-content-secondary);
}

.lui-transcript__body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.lui-transcript__turn .lui-transcript__speaker {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-content);
}

.lui-transcript__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
  color: var(--color-content);
}

.lui-password { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.lui-password__label { color: var(--color-content); }

.lui-password__field,
.lui-forms__composite.lui-password__field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 10px;
  border-radius: 6px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}

.lui-password__field:focus-within:has(:focus-visible),
.lui-forms__composite.lui-password__field:focus-within:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--color-chrome-accent) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}

.lui-password__input {
  flex: 1;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--color-content);
}

.lui-password__input:focus,
.lui-password__input:focus-visible,
.lui-forms__composite .lui-password__input:focus,
.lui-forms__composite .lui-password__input:focus-visible {
  border: none;
  box-shadow: none;
}

.lui-password__input::placeholder { color: var(--color-content-secondary); }

.lui-password__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

.lui-password__toggle:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-password__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-chrome-accent);
}

.lui-password__toggle-icon { font-size: 20px; }

.lui-password__strength { display: flex; align-items: center; gap: 8px; }

.lui-password__strength-track {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-secondary);
  overflow: hidden;
}

.lui-password__strength-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--color-danger);
  transition: width 200ms ease, background 200ms ease;
}

.lui-password__strength-text {
  color: var(--color-content-secondary);
  min-width: 44px;
  text-align: right;
}

.lui-password--weak .lui-password__strength-bar { background: var(--color-danger); }
.lui-password--fair .lui-password__strength-bar { background: var(--color-warning); }
.lui-password--good .lui-password__strength-bar { background: var(--color-informative); }
.lui-password--strong .lui-password__strength-bar { background: var(--color-success); }
.lui-password--weak .lui-password__strength-text { color: var(--color-danger-fg); }
.lui-password--fair .lui-password__strength-text { color: var(--color-warning-fg); }
.lui-password--good .lui-password__strength-text { color: var(--color-informative-fg); }
.lui-password--strong .lui-password__strength-text { color: var(--color-success-fg); }

.lui-password__reqs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-password__req {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-content-secondary);
}

.lui-password__req-icon { font-size: 16px; color: var(--color-foreground); }
.lui-password__req--met { color: var(--color-content); }
.lui-password__req--met .lui-password__req-icon { color: var(--color-success); }

.lui-password__match { color: var(--color-content-secondary); }
.lui-password__match--success { color: var(--color-success-fg); }
.lui-password__match--error { color: var(--color-danger-fg); }

/* Login */
.login {
  display: flex;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-content);
}

.login__container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  position: relative;
}

.login__nav {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
}
.login__toolbar {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.login__locale-form {
  margin: 0;
}
.login__locale .lui-locale-select__menu {
  left: auto;
  right: 0;
}
.login__toolbar .lui-theme-toggle {
  color: var(--color-content-secondary);
}
.login__toolbar .lui-theme-toggle:hover {
  color: var(--color-content);
}

.login__main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login__top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login__form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login__form-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.login__form-block--registration {
  gap: 8px;
}

.login__form-block--registration .lui-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login__form-block .lui-forms__control,
.login__form-block select.lui-forms__control,
.login__form-block .lui-password__input,
.login__form-block .lui-forms__composite .lui-forms__control,
.login__form-block .lui-forms__composite--lg .lui-forms__control {
  min-height: var(--lui-control-height-lg);
  font-size: 13px;
  line-height: 18px;
}

.login__form-block .lui-forms__composite,
.login__form-block .lui-forms__composite--lg,
.login__form-block .lui-password__field,
.login__form-block .lui-password__field.lui-forms__composite--lg {
  height: var(--lui-control-height-lg);
  min-height: var(--lui-control-height-lg);
}

/* Composite inners fill the lg login shell — no nested bordered box. */
.login__form-block .lui-forms__composite .lui-forms__control,
.login__form-block .lui-forms__composite--lg .lui-forms__control,
.login__form-block .lui-forms__composite .lui-password__input {
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

.login__form-block > .login__links {
  margin-top: -4px;
  text-align: right;
}

.login__form > .login__links {
  text-align: center;
  margin-top: 0;
}

.login__logo-section { display: flex; justify-content: center; }
.login__logo-section--flux,
.login__logo-section--scope {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.login__logo-section--flux {
  width: 100%;
}
.login__logo-section--scope {
  align-items: stretch;
  width: 100%;
}
.login__scope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.login__logo-section--scope .login__scope-badge {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.login__scope-badge .material-symbols-rounded { font-size: 14px; }
.login__scope-icon { flex-shrink: 0; border-radius: 4px; }
.login__logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.login__title { display: flex; flex-direction: column; gap: 4px; text-align: center; width: 100%; }
.login__heading { margin: 0; }
.login__subtitle-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.login__subtitle-group .login__subtitle { margin: 0; }
.login__subtitle { color: var(--color-content-secondary); margin: 0; }
.login__links { text-align: center; color: var(--color-content-secondary); margin: 0; }
.login__links a { color: var(--color-content); font-weight: 500; text-decoration: none; }
.login__links a:hover { color: var(--color-content-secondary); }

.login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-content-secondary);
  font-size: 12px;
}

.login__divider::before,
.login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-tertiary);
}

.login__sso-list { display: flex; flex-direction: column; gap: 8px; }

.login__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 12px;
}

.login__footer a { color: var(--color-content-secondary); text-decoration: none; }
.login__footer a:hover { color: var(--color-content); }

.image-section {
  position: relative;
  flex: 1;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  margin: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #102026;
}

.image-section__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9;
}

:root[data-theme="dark"] .image-section__img { filter: brightness(0.72); }

.login--admin {
  position: relative;
  overflow: hidden;
}

.login--admin .login__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.login--admin .login__watermark-img {
  width: min(120vmin, 1100px);
  height: auto;
  /* Mark is full ink; login keeps the original ghost weight. */
  opacity: 0.03;
}

.lui-admin-watermark {
  position: absolute;
  top: 80%;
  left: 80%;
  right: auto;
  bottom: auto;
  z-index: 4;
  pointer-events: none;
  line-height: 0;
  transform: translate(-50%, -50%);
}

.lui-admin-watermark__img {
  width: 1260px;
  height: auto;
  opacity: 0.1;
  filter: blur(6px);
}

.login--admin .login__container {
  z-index: 1;
}

.lui-sidebar__footer--admin-context {
  padding-bottom: 0;
}

.lui-dropdown__menu--admin-context {
  min-width: 100%;
}

.lui-sidebar__bottom > .lui-sidebar__footer + .lui-sidebar__footer {
  padding-top: 0;
}

.lui-admin-portal-menu {
  width: 100%;
}

.lui-sidebar__chrome-bar.lui-admin-portal-menu {
  display: block;
  height: auto;
  min-height: 48px;
  padding: 4px 8px;
  box-sizing: border-box;
}

.lui-sidebar__chrome-bar.lui-admin-portal-menu[open] .lui-admin-portal-menu__panel {
  margin-top: 8px;
}

.lui-admin-portal-menu__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}

.lui-admin-portal-menu__toggle:hover {
  background: var(--color-secondary);
}

.lui-admin-portal-menu__toggle::-webkit-details-marker { display: none; }

.lui-admin-portal-menu[open] .lui-admin-portal-menu__toggle {
  border-color: color-mix(in srgb, var(--color-informative) 35%, var(--color-tertiary));
}

.lui-admin-portal-menu__panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-admin-portal-menu__form label {
  display: block;
  color: var(--color-content-secondary);
}

.lui-admin-portal-menu__link-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Checkbox Select All — loopos-ui-v2 (Rails Blocks checkbox_select_all) */
.lui-checkbox-select-all {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__search {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__search .lui-search__field,
.lui-checkbox-select-all__search .lui-forms__composite.lui-search__field {
  height: var(--lui-control-height-md);
  min-height: var(--lui-control-height-md);
}

.lui-checkbox-select-all__header {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__control,
.lui-checkbox-select-all__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}

/* Author `display: flex` beats Tailwind `.hidden` and the UA `[hidden]` rule. */
.lui-checkbox-select-all__row.hidden,
.lui-checkbox-select-all__row[hidden] {
  display: none;
}

.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__group-head) {
  align-items: flex-start;
}

.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__group-head) .lui-checkbox-select-all__check {
  margin-top: 0.125rem;
}

.lui-checkbox-select-all__list > .lui-checkbox-select-all__row,
.lui-checkbox-select-all__group > .lui-checkbox-select-all__row--parent,
.lui-checkbox-select-all__assignable-grid > .lui-checkbox-select-all__row {
  padding: 0.625rem 0.875rem;
}

.lui-checkbox-select-all__section {
  padding: 0.5rem 0.875rem 0.375rem;
  background: var(--color-secondary);
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__section-label {
  color: var(--color-content-secondary);
  text-transform: none;
}

.lui-checkbox-select-all__list > .lui-checkbox-select-all__section:first-child {
  border-top: none;
}

.lui-checkbox-select-all__list > .lui-checkbox-select-all__row + .lui-checkbox-select-all__row,
.lui-checkbox-select-all__list > .lui-checkbox-select-all__section + .lui-checkbox-select-all__row,
.lui-checkbox-select-all__list > .lui-checkbox-select-all__row + .lui-checkbox-select-all__section,
.lui-checkbox-select-all__group + .lui-checkbox-select-all__group,
.lui-checkbox-select-all__assignable-grid > .lui-checkbox-select-all__row + .lui-checkbox-select-all__row {
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__list--collapsible {
  padding: 0;
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

@media (min-width: 768px) {
  .lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lui-checkbox-select-all--single-column.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lui-checkbox-select-all__origin-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 12px 2px 0;
  color: var(--color-content);
}

.lui-checkbox-select-all__origin-heading:first-child {
  padding-top: 4px;
}

.lui-checkbox-select-all__origin-heading.hidden,
.lui-checkbox-select-all__origin-heading[hidden] {
  display: none;
}

.lui-checkbox-select-all__section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lui-checkbox-select-all__section-title .lui-flux-app-mark,
.lui-checkbox-select-all__section-title .lui-flux-app-mark-trigger {
  flex-shrink: 0;
}

.lui-checkbox-select-all__section-title-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.lui-checkbox-select-all__section-name {
  min-width: 0;
}

.lui-checkbox-select-all__section-key {
  flex-shrink: 0;
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__section-group {
  min-width: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  overflow: hidden;
}

.lui-checkbox-select-all--collapsible-sections .lui-accordion__item {
  border-bottom: none;
}

.lui-checkbox-select-all__section-group + .lui-checkbox-select-all__section-group {
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__section-group + .lui-checkbox-select-all__section-group {
  border-top-width: 1px;
}

.lui-checkbox-select-all__section-trigger {
  width: 100%;
}

.lui-checkbox-select-all__section-group .lui-accordion__content-inner {
  padding: 0;
}

.lui-checkbox-select-all__section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 10px;
}

.lui-accordion__item[data-state="open"] .lui-checkbox-select-all__section-pills {
  display: none;
}

.lui-checkbox-select-all__scope-pill {
  display: inline-flex;
  min-width: 0;
}

.lui-checkbox-select-all__scope-pill.hidden,
.lui-checkbox-select-all__scope-pill[hidden] {
  display: none;
}

.lui-checkbox-select-all__inherited {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__inherited-chips {
  margin-top: 0.375rem;
}

.lui-checkbox-select-all__label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.lui-checkbox-select-all__label {
  color: var(--color-content);
}

.lui-checkbox-select-all__desc {
  color: var(--color-content-secondary);
}

.lui-checkbox-select-all__group-head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.lui-checkbox-select-all__check {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.lui-checkbox-select-all__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.lui-checkbox-select-all__input:disabled {
  cursor: not-allowed;
}

.lui-checkbox-select-all__box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  color: var(--color-app-fg);
  pointer-events: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.lui-checkbox-select-all__mark {
  font-size: 16px;
  font-variation-settings: "wght" 600;
  color: var(--color-app-fg);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 100ms ease, transform 100ms ease;
}

.lui-checkbox-select-all__dash {
  display: none;
}

.lui-checkbox-select-all__input:not(:disabled):hover ~ .lui-checkbox-select-all__box {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

/* Hover on an already checked box must stay painted — the plain hover rule above
   outranks the checked rule below (one more pseudo-class), so without this the
   box turned near-white in light mode and the white check vanished. Mirrors
   `.lui-checkbox`. */
.lui-checkbox-select-all__input:checked:not(:disabled):hover ~ .lui-checkbox-select-all__box,
.lui-checkbox-select-all__input:indeterminate:not(:disabled):hover ~ .lui-checkbox-select-all__box {
  background: var(--color-app);
  border-color: var(--color-app);
  filter: brightness(1.08);
}

.lui-checkbox-select-all__input:checked ~ .lui-checkbox-select-all__box,
.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box {
  background: var(--color-app);
  border-color: var(--color-app);
}

.lui-checkbox-select-all__input:checked ~ .lui-checkbox-select-all__box .lui-checkbox-select-all__mark {
  opacity: 1;
  transform: scale(1);
}

.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box .lui-checkbox-select-all__mark {
  opacity: 0;
}

/* Absolute so the dash keeps its 9px — as a flex item next to the (invisible but
   still 16px wide) check glyph it would shrink to zero and the box read as a solid
   block, which is what light mode made obvious. */
.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-app-fg);
}

.lui-checkbox-select-all__input:focus-visible ~ .lui-checkbox-select-all__box {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-checkbox-select-all__input:disabled ~ .lui-checkbox-select-all__box {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.lui-checkbox-select-all__input[data-anchor="true"] ~ .lui-checkbox-select-all__box {
  outline: 2px dashed var(--color-app);
  outline-offset: 2px;
}

.lui-checkbox-select-all__row:hover {
  background: var(--color-secondary);
}

.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:checked),
.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:indeterminate) {
  background: color-mix(in srgb, var(--color-app) 8%, var(--color-background));
}

.lui-checkbox-select-all__row--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lui-checkbox-select-all__row--inherited {
  cursor: default;
}

.lui-checkbox-select-all__row--inherited .lui-checkbox-select-all__desc {
  color: var(--color-informative-fg);
}

.lui-checkbox-select-all__children {
  padding-left: 1.75rem;
}

.lui-checkbox-select-all__children > .lui-checkbox-select-all__row {
  padding: 0.5rem 0.875rem;
}

.lui-checkbox-select-all__action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-background);
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__action-bar[hidden] {
  display: none;
}

.lui-checkbox-select-all__count {
  color: var(--color-content);
}

.lui-checkbox-select-all__count-label,
.lui-checkbox-select-all__page-info {
  color: var(--color-content-secondary);
}

.lui-checkbox-select-all__total {
  margin-left: auto;
  color: var(--color-content);
}

.lui-checkbox-select-all__link,
.lui-checkbox-select-all__clear {
  background: transparent;
  border: none;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  cursor: pointer;
}

.lui-checkbox-select-all__link {
  color: var(--color-app);
}

.lui-checkbox-select-all__clear {
  color: var(--color-content-secondary);
}

.lui-checkbox-select-all__link:hover {
  color: color-mix(in srgb, var(--color-app) 85%, var(--color-content));
}

.lui-checkbox-select-all__clear:hover {
  color: var(--color-content);
}

.lui-checkbox-select-all__link[hidden],
.lui-checkbox-select-all__page-info[hidden] {
  display: none;
}

.lui-checkbox-select-all__link:focus-visible,
.lui-checkbox-select-all__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

/* Embedded — borderless checkbox list inside cards / grid cells */
.lui-checkbox-select-all--embedded {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__search {
  padding: 0 0 8px;
  border-bottom: none;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__search .lui-search__field,
.lui-checkbox-select-all--embedded .lui-checkbox-select-all__search .lui-forms__composite.lui-search__field {
  min-height: 32px;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__list {
  max-height: 168px;
  overflow-y: auto;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__list > .lui-checkbox-select-all__row {
  padding: 4px 0;
  border-top: none;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__list > .lui-checkbox-select-all__row + .lui-checkbox-select-all__row {
  border-top: none;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__row:hover {
  background: transparent;
}

.lui-checkbox-select-all--readonly {
  background: var(--color-secondary);
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-tertiary));
}

.lui-checkbox-select-all--readonly .lui-checkbox-select-all__row--inherited {
  box-shadow: inset 2px 0 0 var(--color-warning);
}

.lui-checkbox-select-all--readonly .lui-checkbox-select-all__row:hover {
  background: transparent;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:checked),
.lui-checkbox-select-all--embedded .lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:indeterminate) {
  background: transparent;
}

/* SSO provider cards */
.lui-sso-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-sso-card + .lui-sso-card { margin-top: 16px; }

/* Mailer */
.mailer-body {
  font-family: var(--font-sans);
  background: var(--color-secondary);
  padding: 24px;
}

.mailer-card {
  max-width: 560px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  padding: 24px;
}

/* Responsive */
@media (min-width: 992px) {
  .image-section { display: flex; }
}

@media (min-width: 1280px) {
  .lui-dashboard-cols {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 991px) {
  .lui-sidebar__rail--desktop { display: none; }
  .lui-sidebar-trigger { display: inline-flex; }
  .lui-dashboard-cols { grid-template-columns: 1fr; }
  .lui-dashboard-breakdown-grid { grid-template-columns: 1fr; }
  .lui-forms__group--inline .lui-forms__label { width: 100%; min-width: 0; }
  .lui-table__actions { opacity: 1; }
  .lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row .lui-table__actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row:hover .lui-table__actions:not(:empty) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .login__container { padding: 24px 16px; }
  .login__nav { top: 24px; left: 16px; }
  .login__toolbar { top: 24px; right: 16px; }
}

@media (max-width: 640px) {
  .lui-table__head th,
  .lui-table__body td,
  .lui-table__body th[scope="row"],
  .lui-table__body-group td,
  .lui-table__body-group th[scope="row"] {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 16px;
  }
  .lui-action-bar { flex-wrap: wrap; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
  .lui-action-bar--flux-app { height: auto; min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .lui-sidebar__rail,
  .lui-sidebar__panel,
  .lui-sidebar__collapse-icon,
  .lui-sidebar__section-chevron {
    transition: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dev notes (development only) */
.dev-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.dev-note__label {
  color: var(--color-content-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dev-note__body code {
  font-family: var(--font-mono);
}

/* Page briefs (development only) */
.dev-tools-launcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
}

.dev-tools-launcher__cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.dev-tools-launcher__toggle {
  flex-shrink: 0;
}

.dev-tools-launcher--collapsed .dev-tools-launcher__cluster .dev-tools-launcher__button,
.dev-tools-launcher--collapsed .dev-tools-launcher__role {
  display: none;
}

.dev-tools-launcher__button.lui-button--neutral--tertiary,
.dev-tools-launcher__button.lui-button--outline {
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.10);
}

.dev-tools-launcher__button.lui-button--neutral--tertiary:hover,
.dev-tools-launcher__button.lui-button--outline:hover {
  background: var(--color-secondary);
}

.dev-tools-launcher__button--active.lui-button--outline {
  border-color: var(--color-chrome-accent);
  color: var(--color-chrome-accent);
}

.dev-tools-launcher__role .lui-dropdown__menu {
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 2rem));
}

.page-brief-launcher {
  display: contents;
}

/* Transparent dialog shell — panel carries surface (matches lui-modal centering). */
.page-brief-dialog {
  box-sizing: border-box;
  width: calc(100vw - 2rem);
  max-width: 1120px;
  /* Stable height — do not grow/shrink with tab content. */
  height: min(720px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  color: var(--color-content);
}

.page-brief-dialog:modal {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: min(720px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
}

.page-brief-dialog::backdrop {
  background: color-mix(in srgb, var(--color-content) 40%, transparent);
}

.page-brief-dialog__panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
}

.page-brief-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 16px 12px;
}

.page-brief-dialog__header-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-brief-dialog__header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.page-brief-dialog__page-key {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-content);
  font-family: var(--font-mono, ui-monospace, monospace);
  word-break: break-all;
}

.page-brief-dialog__meta-separator {
  color: var(--color-content-secondary);
}

.page-brief-dialog__entities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-brief-dialog__entity {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-chrome-accent) 12%, var(--color-background));
  color: var(--color-content);
  white-space: nowrap;
}

.page-brief-dialog__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* No border-top — underline tabs already paint the single divider under the tab row. */
}

.page-brief-dialog__notes-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  min-width: 240px;
  max-width: 320px;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-left: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.page-brief-dialog__notes-body {
  flex: 1 1 auto;
  min-height: 0;
}

.page-brief-dialog__notes-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
}

.page-brief-dialog__notes-intro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.page-brief-dialog__notes-intro :is(h3, p) {
  margin: 0;
}

.page-brief-dialog__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* One active underline on the panels hairline — hide list ::after so it does not
   stack as a second parallel rule under the tab labels. */
.page-brief-dialog__tabs {
  flex-shrink: 0;
  padding: 0 16px;
  border-bottom: none;
}

.page-brief-dialog__tabs .lui-tabs__list {
  width: 100%;
}

.page-brief-dialog__tabs.lui-tabs--underline .lui-tabs__nav::after,
.page-brief-skills__subtabs.lui-tabs--underline .lui-tabs__nav::after {
  content: none;
  display: none;
}

.page-brief-dialog__tabs.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.page-brief-dialog__tabs.lui-tabs--underline .lui-tabs__tab--active::after,
.page-brief-skills__subtabs.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.page-brief-skills__subtabs.lui-tabs--underline .lui-tabs__tab--active::after {
  height: 2px;
  bottom: -1px;
}

.page-brief-dialog__panels {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--color-tertiary);
}

.page-brief-dialog__panels-scroll {
  padding: 16px;
  box-sizing: border-box;
}

/* Split ADR / Skills / API panes fill the panel viewport and scroll internally. */
.page-brief-dialog__panel-content:not([hidden]):has(> .page-brief-adrs),
.page-brief-dialog__panel-content:not([hidden]):has(> .page-brief-skills) {
  height: 100%;
  min-height: 0;
}

.page-brief-dialog__panel-content[hidden] {
  display: none !important;
}

.page-brief-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-content);
}

.page-brief-panel__header,
.page-brief-panel__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-brief-panel__meta {
  display: grid;
  gap: 12px;
}

.page-brief-panel__meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-panel__meta code,
.page-brief-panel code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-content);
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  border-radius: 4px;
  padding: 2px 6px;
}

.page-brief-panel__list,
.page-brief-panel__requirements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--color-content);
}

.page-brief-panel__code {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.page-brief-panel__code code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.page-brief-panel__markdown {
  color: var(--color-content);
}

.page-brief-panel__markdown h1,
.page-brief-panel__markdown h2,
.page-brief-panel__markdown h3,
.page-brief-panel__markdown h4 {
  color: var(--color-content);
  font-family: var(--font-heading);
  margin: 12px 0 8px;
}

.page-brief-panel__markdown h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}

.page-brief-panel__markdown h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.page-brief-panel__markdown h3 {
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
}

.page-brief-panel__markdown h4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-content-secondary);
}

.page-brief-panel__markdown p,
.page-brief-panel__markdown ul,
.page-brief-panel__markdown ol {
  margin: 0 0 8px;
  color: var(--color-content);
  font-size: 13px;
  line-height: 19px;
}

.page-brief-panel__markdown a,
.page-brief-panel__doc-link {
  color: var(--color-informative);
  text-decoration: none;
}

.page-brief-panel__doc-link:hover,
.page-brief-panel__markdown a:hover {
  text-decoration: underline;
}

.page-brief-requirement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  list-style: none;
  margin-left: -18px;
}

.page-brief-requirement__status {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-tertiary);
  flex-shrink: 0;
}

.page-brief-requirement--done .page-brief-requirement__status {
  background: var(--color-success);
}

.page-brief-requirement--partial .page-brief-requirement__status {
  background: var(--color-warning);
}

.page-brief-requirement--missing .page-brief-requirement__status {
  background: var(--color-danger);
}

.page-brief-requirement__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-brief-manuals {
  gap: 16px;
}

.page-brief-manual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

.page-brief-manual:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-brief-manual__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-manual__body img {
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.page-brief-adrs {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  height: 100%;
}

.page-brief-adrs__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--color-tertiary);
  padding-right: 12px;
}

.page-brief-adrs__list-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
}

.page-brief-adrs__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-adrs__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  text-align: left;
  cursor: pointer;
}

.page-brief-adrs__item:hover {
  background: var(--color-background);
  border-color: var(--color-tertiary);
}

.page-brief-adrs__item--active {
  background: var(--color-background);
  border-color: var(--color-chrome-accent);
}

.page-brief-adrs__item-number {
  font-variant-numeric: tabular-nums;
}

.page-brief-adrs__item-title {
  line-height: 1.35;
}

.page-brief-adrs__item-badge {
  color: var(--color-content-secondary);
  text-transform: capitalize;
}

.page-brief-adrs__viewer {
  min-height: 0;
  overflow: auto;
}

.page-brief-adrs__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-brief-adrs__panel[hidden] {
  display: none !important;
}

.page-brief-adrs__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-brief-adrs__body {
  padding-bottom: 8px;
}

.page-brief-skills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.page-brief-skills__subtabs {
  flex-shrink: 0;
  border-bottom: none;
}

.page-brief-skills__subtabs .lui-tabs__list {
  width: 100%;
}

.page-brief-skills__panel {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-top: 1px solid var(--color-tertiary);
}

.page-brief-skills__panel[hidden] {
  display: none !important;
}

.page-brief-skills__panel .page-brief-adrs {
  height: 100%;
}

.page-brief-api__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.page-brief-api__path {
  word-break: break-all;
}

.page-brief-api__method {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-brief-api__method--get {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success-fg);
}

.page-brief-api__method--post {
  background: color-mix(in srgb, var(--color-informative) 16%, transparent);
  color: var(--color-informative-fg);
}

.page-brief-api__method--put,
.page-brief-api__method--patch {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning-fg);
}

.page-brief-api__method--delete {
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
  color: var(--color-danger-fg);
}

.page-brief-api__method--other {
  background: var(--color-tertiary);
  color: var(--color-content-secondary);
}

.page-brief-api__description {
  margin: 0;
}

.page-brief-api__scalar-host {
  min-height: 280px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-background);
}

.page-brief-api__scalar-host--ready {
  min-height: 360px;
}

.page-brief-api__loading {
  margin: 16px;
}

.page-brief-api__scalar-host .scalar-app {
  max-height: min(70vh, 720px);
  overflow: auto;
}

@media (max-width: 768px) {
  .page-brief-dialog:modal {
    height: calc(100dvh - 2rem);
  }

  .page-brief-dialog__body {
    flex-direction: column;
  }

  .page-brief-dialog__notes-sidebar {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    max-height: 40vh;
    border-left: 0;
    border-top: 1px solid var(--color-tertiary);
  }

  .page-brief-adrs {
    grid-template-columns: 1fr;
  }

  .page-brief-adrs__list {
    border-right: 0;
    border-bottom: 1px solid var(--color-tertiary);
    padding-right: 0;
    padding-bottom: 12px;
    max-height: 180px;
  }
}

.page-brief-dialog__notes-sidebar .page-brief-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-brief-dialog__notes-sidebar .page-brief-notes :is(h3, p, label, form) {
  margin: 0;
}

.page-brief-dialog__notes-sidebar .page-brief-notes__textarea {
  min-height: 3.25rem;
}

.page-brief-notes__composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-brief-notes__history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-notes__textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  resize: vertical;
}

.page-brief-notes__textarea:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 1px;
}

.page-brief-notes__actions {
  display: flex;
  justify-content: flex-end;
}

.page-brief-notes__flash {
  margin: 0;
  color: var(--color-success-fg);
}

.page-brief-notes__error {
  margin: 0;
  color: var(--color-danger-fg);
}

.page-brief-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-brief-note {
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.page-brief-note__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.page-brief-note__text {
  margin: 0;
  white-space: pre-wrap;
}

.page-brief-panel__markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
}

.page-brief-panel__markdown th,
.page-brief-panel__markdown td {
  border: 1px solid var(--color-tertiary);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--color-content);
}

/* Page ER modal (development only) */
.page-er-launcher {
  display: contents;
}

.page-er-dialog {
  width: min(1040px, calc(100vw - 32px));
}

.page-er-dialog__panels {
  padding: 0;
}

.page-er-panel {
  gap: 24px;
}

.page-er-panel__diagram {
  gap: 0;
}

.page-er-diagram {
  width: 100%;
  overflow-x: auto;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  text-align: center;
}

.page-er-diagram pre.mermaid {
  margin: 0;
  background: transparent;
  border: 0;
  white-space: pre;
}

.page-er-diagram pre.mermaid:not([data-processed]) {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-secondary-content, var(--color-content));
  text-align: left;
  white-space: pre-wrap;
}

.page-er-diagram svg {
  max-width: 100%;
  height: auto;
}

.page-er-diagram--zoomable {
  cursor: zoom-in;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-er-diagram--zoomable:hover,
.page-er-diagram--zoomable:focus-visible {
  border-color: var(--color-chrome-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 25%, transparent);
  outline: none;
}

.page-er-diagram--zoomable::after {
  content: "Clique para ampliar · scroll para zoom";
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-secondary-content, var(--color-content));
}

.page-er-zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-content) 55%, transparent);
}

.page-er-zoom-overlay[hidden] {
  display: none !important;
}

.page-er-zoom-overlay__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-tertiary);
}

.page-er-zoom-overlay__hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-secondary-content, var(--color-content));
}

.page-er-zoom-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}

.page-er-zoom-overlay__close:hover {
  background: var(--color-secondary);
}

.page-er-zoom-overlay__viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}

.page-er-zoom-overlay__content {
  width: max-content;
  min-width: min(100%, 960px);
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--color-tertiary);
  border-radius: 12px;
  background: var(--color-background);
  transform-origin: center top;
}

.page-er-zoom-overlay__content svg {
  display: block;
  max-width: none;
  height: auto;
}

body.page-er-zoom-open,
.page-brief-dialog__panel.page-er-zoom-open {
  overflow: hidden;
}

.page-er-diagram--error::before {
  content: "Diagram failed to render — showing source.";
  display: block;
  margin-bottom: 8px;
  color: var(--color-danger);
  font-family: var(--font-sans);
  font-size: 12px;
}

/* Entity tables render on shared/table/table; only the inline code chip is local. */
.page-er-entities code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-content);
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Dev docs wiki (development only) */
.dev-docs-body {
  height: 100vh;
  overflow: hidden;
  background: var(--color-background);
  color: var(--color-content);
}

.dev-docs {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  height: 100vh;
  background: var(--color-background);
}

.dev-docs__sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.dev-docs__sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--color-tertiary);
}

.dev-docs__search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

.dev-docs__search-input {
  width: 100%;
}

.dev-docs__nav {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.dev-docs__tree {
  width: 100%;
}

.dev-docs__tree [data-dev-docs-target="navItem"][hidden] {
  display: none !important;
}

/* Rails Blocks tree_view — LoopOS UI v2 (lui--tree-view) */
.lui-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.lui-tree--nav {
  gap: 2px;
}

.lui-tree--bordered {
  padding: 16px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-tree__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--color-content);
  text-decoration: none;
  box-sizing: border-box;
  user-select: none;
}

.lui-tree__node {
  min-width: 0;
}

.lui-tree__row:hover {
  background: var(--color-secondary);
}

.lui-tree__row:focus,
.lui-tree__row--link:focus,
.lui-tree__nav-link:focus,
.lui-tree__toggle-btn:focus,
.lui-tree__row:focus-visible,
.lui-tree__row--link:focus-visible,
.lui-tree__nav-link:focus-visible,
.lui-tree__toggle-btn:focus-visible,
.lui-tree--nav .lui-tree__row--nav:focus-within {
  outline: none;
  box-shadow: none;
}

.lui-tree--nav .lui-tree__row--active:focus,
.lui-tree--nav .lui-tree__row--active:focus-visible,
.lui-tree--nav .lui-tree__row--nav:focus-within:has(.lui-tree__row--active) {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
}

/* File explorer — folders emphasized, files secondary */
.lui-tree:not(.lui-tree--nav) .lui-tree__row.copy-13 .lui-tree__label {
  color: var(--color-content-secondary);
}

.lui-tree:not(.lui-tree--nav) .lui-tree__row.copy-13-medium .lui-tree__label {
  color: var(--color-content);
}

/* Nav tree — catalog explorer rail rows */
.lui-tree--nav .lui-tree__row {
  border: 1px solid transparent;
  border-radius: 6px;
}

.lui-tree--nav .lui-tree__row .lui-tree__label {
  color: inherit;
}

.lui-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-breadcrumb__label-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* Active: bordered lighter card (shared by all rail sections — not Overview-only) */
.lui-tree--nav .lui-tree__row--active,
.lui-tree--nav .lui-tree__row--nav.lui-tree__row--active {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  color: var(--color-content);
}

.lui-tree--nav .lui-tree__row--nav.lui-tree__row--active .lui-tree__nav-link,
.lui-tree--nav .lui-tree__nav-link--active {
  color: inherit;
}

.lui-tree--nav .lui-tree__row--nav {
  gap: 0;
  padding: 0;
}

.lui-tree--nav .lui-tree__nav-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 0 8px 0 0;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.lui-tree--nav .lui-tree__nav-link:hover {
  background: transparent;
}

.lui-tree--nav .lui-tree__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.lui-tree--nav .lui-tree__toggle-btn:hover {
  background: transparent;
}

.lui-tree__toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-foreground);
  cursor: pointer;
}

.lui-tree__toggle-btn:hover {
  background: var(--color-secondary);
}

.lui-tree__icon,
.lui-tree__chevron {
  flex-shrink: 0;
  font-size: 14px;
  color: currentColor;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-tree__row[data-state="open"] .lui-tree__chevron,
.lui-tree__toggle-btn[data-state="open"] .lui-tree__chevron {
  transform: rotate(90deg);
}

.lui-tree__chevron {
  transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-tree__chevron--placeholder {
  width: 14px;
  flex: 0 0 14px;
}

.lui-tree__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-tree__content[data-state="open"] {
  grid-template-rows: 1fr;
}

.lui-tree__children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 12px;
  padding-left: 8px;
  border-left: 1px solid var(--color-tertiary);
  overflow: hidden;
  min-height: 0;
}

.lui-tree--nav .lui-tree__children {
  gap: 2px;
  margin-left: 10px;
}

.lui-tree__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-chrome-accent);
  cursor: pointer;
}

.lui-tree__select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
  padding: 0 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  color: var(--color-content);
}

.lui-tree__select-all > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-tree__select-all:hover {
  background: var(--color-secondary);
}

.lui-catalog-explorer-rail {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 220px;
  min-height: 0;
  align-self: stretch;
  border-right: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.lui-catalog-explorer-rail__catalog {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px 8px 0;
}

.lui-catalog-explorer-rail__selector {
  width: 100%;
}

.lui-catalog-explorer-rail__selector > .lui-button {
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
}

.lui-catalog-explorer-rail__selector .lui-catalog-selector__trigger .lui-button__label,
.lui-catalog-explorer-rail__selector .lui-catalog-selector__label {
  max-width: none;
}

.lui-catalog-explorer-rail__search {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 48px;
  padding: 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-catalog-explorer-rail__search .lui-search {
  width: 100%;
  min-width: 0;
}

.lui-catalog-explorer-rail__empty {
  margin: 0;
  padding: 8px 12px;
}

.lui-catalog-explorer-rail__tree {
  flex: 1;
  min-height: 0;
  padding: 4px 4px 8px 8px;
}

@media (max-width: 991px) {
  .lui-app-layout__workspace--catalog-explorer {
    flex-direction: column;
  }

  .lui-catalog-explorer-rail {
    width: 100%;
    max-height: 240px;
    border-right: none;
    border-bottom: 1px solid var(--color-tertiary);
  }
}

/* Catalog hub — overview tree table (rail selection: .lui-tree--nav bordered lighter active) */
.lui-catalog-overview-table__name {
  padding-left: calc(var(--overview-depth, 0) * 1.25rem);
}

.lui-catalog-overview-table__toggle,
.lui-catalog-overview-table__toggle-spacer,
.lui-catalog-overview-table__branch-spacer {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lui-catalog-overview-table__toggle-spacer,
.lui-catalog-overview-table__branch-spacer {
  pointer-events: none;
}

.lui-catalog-overview-table__toggle {
  border: none;
  background: transparent;
  color: var(--color-foreground);
  border-radius: 4px;
  cursor: pointer;
}

.lui-catalog-overview-table__toggle:hover {
  background: var(--color-tertiary);
}

.lui-catalog-overview-table__chevron {
  font-size: 18px;
  transition: transform 0.15s ease;
}

.lui-catalog-overview-table__name--product {
  padding-left: calc(0.75rem + (var(--overview-depth, 0) * 1.25rem));
}

.lui-catalog-overview-table__products-branch {
  cursor: pointer;
}

.lui-catalog-overview-table__products-branch--expanded,
.lui-datatable--hoverable .lui-catalog-overview-table__products-branch:hover {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__category-row[hidden],
.lui-catalog-overview-table__products-branch[hidden],
.lui-catalog-overview-table__product-row[hidden] {
  display: none !important;
}

.lui-catalog-overview-table__products-branch-cell {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.lui-catalog-overview-table__products-branch-label {
  color: inherit;
}

/* Nested product rows: paint every cell (including sticky actions). `tr` background
   stops at the opaque actions gutter, so the fill would not reach the row end. */
.lui-catalog-overview-table__product-row,
.lui-catalog-overview-table__product-row > td,
.lui-catalog-overview-table__product-row > .lui-table__cell--actions {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__product-row .lui-table__actions {
  background: linear-gradient(to left, var(--color-secondary) 72%, transparent);
}

.lui-catalog-overview-table__product-row--navigable {
  cursor: pointer;
}

/* Beat generic datatable hover on the sticky actions gutter
   (`.lui-datatable__row:hover > .lui-table__cell--actions` is 0,5,0). */
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover > td,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within > td,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover > .lui-table__cell--actions,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within > .lui-table__cell--actions {
  background: var(--color-tertiary);
}

.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover .lui-table__actions,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within .lui-table__actions {
  background: linear-gradient(to left, var(--color-tertiary) 72%, transparent);
}

.lui-catalog-overview-table__products-branch--expanded > td,
.lui-datatable--hoverable .lui-datatable__body .lui-catalog-overview-table__products-branch:hover > td {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__product-row--empty .lui-datatable__cell {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__product-row--skeleton {
  pointer-events: none;
}

.lui-catalog-overview-table__skeleton-label {
  width: 42%;
  height: 12px;
  flex: 0 1 42%;
}

.lui-catalog-overview-table__skeleton-meta {
  width: 48%;
  max-width: 8rem;
  height: 12px;
}

.lui-tree__node[hidden],
.lui-tree__row--link[hidden],
a.lui-tree__row[hidden] {
  display: none !important;
}

.dev-docs__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dev-docs__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  height: 48px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.dev-docs__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-docs__breadcrumb-link {
  color: var(--color-chrome-accent);
  text-decoration: none;
}

.dev-docs__article {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}

.dev-docs__article-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.dev-docs__content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
}

@media (max-width: 960px) {
  .dev-docs {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .dev-docs__sidebar {
    max-height: 40vh;
  }
}

/* Script editor — CodeMirror 6 */
.lui-script-editor__surface .cm-editor {
  width: 100%;
  min-height: var(--lui-script-editor-min-height, 190px);
  border: none;
  border-radius: 6px;
  outline: none;
}

.lui-script-editor__surface .cm-scroller {
  font: 12px / 1.5 var(--font-mono, ui-monospace, monospace);
}

.lui-script-editor__surface.ruby-editor,
.lui-script-editor__surface.json-editor {
  min-height: var(--lui-script-editor-min-height, 190px);
}

/* Record Metadata panel — one table «Key | Value | action» (proposal B,
   ADR-164). Lives flush in its tab card (body `p-0`); sections are row groups
   with a title and a count; objects and lists put their rows under the entry
   in the same columns. Values the person may edit are buttons that turn into a
   compact control; a changed row keeps an accent bar and «Before: …» until
   «Save» (float bar). Native — see loopos-ui-v2 `native/metadata-tree.md`. */
.lui-tab-metadata {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-tab-metadata code {
  font-family: var(--font-mono);
}

/* Rows, panels and status lines toggled with `hidden` also set their own display. */
.lui-tab-metadata [hidden] {
  display: none !important;
}

.lui-tab-metadata__error {
  margin: 12px 16px 0;
  padding: 8px 12px;
}

.lui-tab-metadata__hint {
  padding: 8px 16px 12px;
  border-top: 1px solid var(--color-tertiary);
}

/* In the Metadata modal the dialog's transform makes `position: fixed` relative
   to the dialog, so the bar would sit on the last rows. There it is sticky at
   the bottom of the modal's scroll, after the table, covering nothing. */
.lui-modal__dialog .lui-tab-metadata .lui-float-bar {
  position: sticky;
  bottom: 12px;
  left: auto;
  transform: none;
  max-width: calc(100% - 24px);
  margin: 12px auto;
  animation: none;
}

.lui-tab-metadata__hint kbd {
  padding: 0 4px;
  border: 1px solid var(--color-tertiary);
  border-radius: 4px;
  background: var(--color-background);
  font-family: var(--font-mono);
  font-size: inherit;
}

.lui-metadata-table {
  --lui-metadata-table-columns: minmax(0, 1fr) minmax(0, 1fr) var(--lui-control-height-xs);
  display: flex;
  flex-direction: column;
  min-width: 0;
  container: metadata-table / inline-size;
}

.lui-metadata-table__head-row,
.lui-metadata-table__row {
  display: grid;
  grid-template-columns: var(--lui-metadata-table-columns);
  column-gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 8px 8px 16px;
}

.lui-metadata-table__head-row {
  background: var(--color-secondary);
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-metadata-table__row {
  position: relative;
  border-top: 1px solid var(--color-tertiary);
}

.lui-metadata-table__section-head {
  padding: 12px 16px 8px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-metadata-table__head + .lui-metadata-table__section > .lui-metadata-table__section-head {
  border-top: 0;
}

/* A lone open list has no title row, so its first key must not draw a second line under the column header. */
.lui-metadata-table__section--bare > .lui-metadata-table__section-body > .lui-metadata-table__row:first-child {
  border-top: 0;
}

.lui-metadata-table__section-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.lui-metadata-table__section-title {
  color: var(--color-content);
}

.lui-metadata-table__section-toggle,
.lui-metadata-table__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lui-metadata-table__section-toggle:focus-visible,
.lui-metadata-table__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.lui-metadata-table__chevron {
  display: inline-flex;
  color: var(--color-content-secondary);
  transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
}

[aria-expanded="false"] > .lui-metadata-table__chevron {
  transform: rotate(-90deg);
}

.lui-metadata-table__readonly {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

.lui-metadata-table__cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-metadata-table__cell--depth-1 { padding-inline-start: 20px; }
.lui-metadata-table__cell--depth-2 { padding-inline-start: 40px; }
.lui-metadata-table__cell--depth-3 { padding-inline-start: 60px; }
.lui-metadata-table__cell--depth-4 { padding-inline-start: 80px; }
.lui-metadata-table__cell--depth-5 { padding-inline-start: 100px; }

.lui-metadata-table__cell--value {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.lui-metadata-table__cell--actions {
  justify-content: center;
}

/* Type badge in front of a key: `Aa`, `123`, `S/N`, `€`, `dt`, `[ ]`, `{ }`. */
.lui-metadata-type {
  flex: none;
  justify-content: center;
  min-width: var(--lui-control-height-xs);
}

/* Label over key; both wrap — the key identifies the entry. */
.lui-metadata-key {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-metadata-key__label,
.lui-metadata-key__key {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lui-metadata-key__key--alone {
  color: var(--color-content);
}

.lui-metadata-key__key--leaf {
  color: var(--color-content-secondary);
}

.lui-metadata-key--strong .lui-metadata-key__label,
.lui-metadata-key--strong.lui-metadata-key__key,
.lui-metadata-key--strong .lui-metadata-key__key--alone {
  font-weight: 500;
}

.lui-metadata-key .lui-metadata-core-badge {
  align-self: flex-start;
  margin-top: 2px;
}

.lui-metadata-table__value-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.lui-metadata-table__value {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.lui-metadata-table__text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* An editable value: a button with the padding reserved in every state, so
   hover, focus and the control that replaces it do not move the row. */
.lui-metadata-table__value--editable {
  margin: -2px -6px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: text;
}

.lui-metadata-table__row--editable:hover .lui-metadata-table__value--editable,
.lui-metadata-table__value--editable:focus-visible {
  border-color: var(--color-tertiary);
  background: var(--color-background);
}

.lui-metadata-table__value--editable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-metadata-table__row--editable:hover {
  background: color-mix(in srgb, var(--color-content) 2%, var(--color-background));
}

/* The control that replaces a value (24px, `lui-forms__control--xs`). */
.lui-metadata-table__editor {
  display: flex;
  gap: 4px;
  min-width: 0;
  margin: -3px -7px;
}

.lui-metadata-table__editor .lui-forms__control {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.lui-metadata-table__editor textarea.lui-forms__control {
  height: auto;
  padding-block: 4px;
}

.lui-metadata-table__editor .lui-metadata-table__currency {
  flex: 0 0 5.5rem;
}

/* «Add metadata» modal: 1 · key (existing list or new), 2 · type and value. */
.lui-metadata-add {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The flex rules below would otherwise win over the `hidden` attribute. */
.lui-metadata-add [hidden] {
  display: none;
}

.lui-metadata-add__modes {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--color-tertiary);
  border-radius: 10px;
}

.lui-metadata-add__mode {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-metadata-add__mode--active {
  background: var(--color-tertiary);
  color: var(--color-content);
}

.lui-metadata-add__pane,
.lui-metadata-add__value {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-metadata-add__search {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-content-secondary);
}

.lui-metadata-add__search .lui-forms__control {
  flex: 1;
}

.lui-metadata-add__list {
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--color-tertiary);
  border-radius: 10px;
}

.lui-metadata-add__list > li + li {
  border-top: 1px solid var(--color-tertiary);
}

.lui-metadata-add__choice {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--color-content);
  text-align: left;
  cursor: pointer;
}

.lui-metadata-add__choice:hover,
.lui-metadata-add__list > li[aria-selected="true"] .lui-metadata-add__choice {
  background: var(--color-tertiary);
}

.lui-metadata-add__choice-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.lui-metadata-add__choice-type {
  flex: none;
}

.lui-metadata-add__none {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 10px;
}

.lui-metadata-add__money {
  display: flex;
  gap: 8px;
}

.lui-metadata-add__money .lui-forms__control:first-child {
  flex: 1;
  min-width: 0;
}

.lui-metadata-add__error {
  margin: 0;
  color: var(--color-danger-fg);
}

.lui-metadata-table__before {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.lui-metadata-table__before-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: line-through;
  text-decoration-color: var(--color-tertiary);
}

.lui-metadata-table__revert {
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lui-metadata-table__error {
  padding: 0;
  margin: 0;
}

/* A changed row: accent bar and a faint tint until «Save». */
.lui-metadata-table__row--changed {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength-subtle), var(--color-background));
}

.lui-metadata-table__row--changed::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--color-informative);
}

.lui-metadata-table__row--changed.lui-metadata-table__row--editable:hover {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength-subtle), var(--color-background));
}

.lui-metadata-table__row--error::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--color-danger);
}

/* Delete shows on hover / keyboard focus of the row. Touch has no hover. */
.lui-metadata-table__remove {
  opacity: 0;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-metadata-table__row:hover .lui-metadata-table__remove,
.lui-metadata-table__row:focus-within .lui-metadata-table__remove {
  opacity: 1;
}

.lui-metadata-table__edit-hint {
  display: inline-flex;
  color: var(--color-content-secondary);
  opacity: 0;
}

.lui-metadata-table__row--editable:hover .lui-metadata-table__edit-hint {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .lui-metadata-table__remove {
    opacity: 1;
  }
}

/* «Formatted | JSON» of one entry: the segmented pills, one notch smaller so
   the row keeps the height of the others. */
.lui-metadata-table__mode.lui-filter-pill-group--segmented {
  flex: none;
  min-height: 0;
  padding: 2px;
}

.lui-metadata-table__mode.lui-filter-pill-group--segmented .lui-filter-pill {
  height: 18px;
  min-height: 18px;
  padding-inline-start: 6px;
}

.lui-metadata-table__mode .lui-filter-pill__label {
  padding-right: 5px;
}

.lui-metadata-table__mode .lui-filter-pill:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* The JSON of an entry spans the row, under the entry and its rows. */
.lui-metadata-table__row--json {
  padding-top: 0;
  padding-inline-start: 40px;
  border-top: 0;
}

.lui-metadata-table__cell--json {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.lui-metadata-table__json-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.lui-metadata-table__json-status [data-role="before"] {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.lui-metadata-table__json-valid {
  color: var(--color-success-fg);
}

.lui-metadata-table__json-status .lui-forms__error {
  padding: 0;
  margin: 0;
}

.lui-metadata-table__json-editor .lui-script-editor__surface .cm-editor {
  min-height: 8rem;
}

/* Narrow (phone, a side column): the two columns stay, as in the design at
   440 px; insets and depth steps tighten and an object's switch wraps under
   its count. */
@container metadata-table (max-width: 30rem) {
  .lui-metadata-table__head-row,
  .lui-metadata-table__row {
    padding-inline-start: 12px;
  }

  .lui-metadata-table__section-head {
    padding-inline: 12px;
  }

  .lui-metadata-table__value-line {
    flex-wrap: wrap;
  }

  .lui-metadata-table__cell--depth-1 { padding-inline-start: 12px; }
  .lui-metadata-table__cell--depth-2 { padding-inline-start: 24px; }
  .lui-metadata-table__cell--depth-3 { padding-inline-start: 36px; }
  .lui-metadata-table__cell--depth-4 { padding-inline-start: 48px; }
  .lui-metadata-table__cell--depth-5 { padding-inline-start: 60px; }

  .lui-metadata-table__row--json {
    padding-inline-start: 12px;
  }
}

/* Very narrow: the value goes under its key, the action stays on the key line. */
@container metadata-table (max-width: 20rem) {
  .lui-metadata-table__head-row {
    display: none;
  }

  .lui-metadata-table__row {
    grid-template-columns: minmax(0, 1fr) var(--lui-control-height-xs);
    row-gap: 4px;
  }

  .lui-metadata-table__cell--key {
    grid-column: 1;
    grid-row: 1;
  }

  .lui-metadata-table__cell--actions {
    grid-column: 2;
    grid-row: 1;
  }

  .lui-metadata-table__cell--value {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .lui-metadata-table__cell--depth-1 + .lui-metadata-table__cell--value { padding-inline-start: 12px; }
  .lui-metadata-table__cell--depth-2 + .lui-metadata-table__cell--value { padding-inline-start: 24px; }
  .lui-metadata-table__cell--depth-3 + .lui-metadata-table__cell--value { padding-inline-start: 36px; }
  .lui-metadata-table__cell--depth-4 + .lui-metadata-table__cell--value,
  .lui-metadata-table__cell--depth-5 + .lui-metadata-table__cell--value { padding-inline-start: 48px; }
}

/*
 * LoopOS AI summary card — border-beam effect (traveling LoopOS AI "comet"
 * + colored bloom that washes INTO the card body). Ported from the
 * border-beam `md` / colorful preset via its own CSS engine, then adapted
 * so the glow reads inside an opaque card. Light/dark via [data-theme].
 * Palette: `--lui-ai-beam-*` tokens from LoopOSAI_Symbol_animated.svg (7 blobs).
 *
 * Layer map (bottom → top):
 *   __inner  → opaque content surface                                    (z 2)
 *   ::before → colored bloom, sweeps INTO the body above the surface      (z 3)
 *   ::after  → traveling LoopOS AI stroke, masked to the 1px border ring  (z 4)
 *
 * NOTE: `.lui-badge--ai`, `.lui-button--ai`, and `.lui-flow-block--ai` share this
 * border-beam system (rounded frame + inner shell).
 */
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

@property --beam-opacity {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.lui-ai-summary-card,
.lui-badge--ai,
.lui-button--ai,
.lui-flow-block--ai,
.lui-ai-plasma {
  /* Beam controls — tune the effect here. Shared with the LoopOS AI plasma loader (`.lui-ai-plasma`, below): the
     same palette, lap and windows, so a loader and the card it sits in move as one. */
  --beam-strength: 1;     /* overall intensity, 0 (off) → 1+ (stronger) */
  --beam-duration: 6s;    /* time for one lap around the border */
  --beam-saturate: 1.7;   /* light default; dark overridden below */
  --lui-ai-beam-cyan:   rgb(0, 197, 255);
  --lui-ai-beam-teal:   rgb(0, 216, 181);
  --lui-ai-beam-yellow: rgb(255, 203, 51);
  --lui-ai-beam-orange: rgb(242, 115, 53);
  --lui-ai-beam-red:    rgb(228, 45, 39);
  --lui-ai-beam-purple: rgb(128, 68, 255);
  --lui-ai-beam-blue:   rgb(0, 114, 255);
  /* The window that travels the lap: it reveals the bloom (wide) and the 1px stroke (a little narrower). Declared
     here, not on :root, so `--beam-angle` resolves on the element that spins. */
  --lui-ai-beam-window-bloom:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 26%,
      rgba(255, 255, 255, 0.15) 34%, rgba(255, 255, 255, 0.45) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.45) 88%, rgba(255, 255, 255, 0.15) 94%,
      transparent 98%, transparent 100%
    );
  --lui-ai-beam-window-stroke:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 30%,
      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
      white 52%, white 80%,
      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
      transparent 95%, transparent 100%
    );
  /* The bright band riding the stroke: dark on light, white on dark (overridden below). */
  --lui-ai-beam-stroke-band:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 54%,
      rgba(0, 0, 0, 0.05) 57%,
      rgba(0, 0, 0, 0.13) 60%,
      rgba(0, 0, 0, 0.26) 63%,
      rgba(0, 0, 0, 0.35) 66%,
      rgba(0, 0, 0, 0.26) 69%,
      rgba(0, 0, 0, 0.13) 72%,
      rgba(0, 0, 0, 0.05) 75%,
      transparent 78%, transparent 100%
    );
}

.lui-ai-summary-card,
.lui-badge--ai,
.lui-button--ai,
.lui-flow-block--ai {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-tertiary);
  animation:
    beam-spin var(--beam-duration) linear infinite,
    beam-fade-in 0.6s ease forwards;
}

.lui-ai-summary-card {
  --lui-ai-summary-border-size: 1px;
  --lui-ai-summary-radius: 10px;
  --lui-ai-beam-radius: var(--lui-ai-summary-radius);
  --beam-reach: 8px;      /* how far the colored bloom bleeds in from each edge (lower = hugs the border) */

  min-width: 0;
  max-width: 100%;
  border-radius: var(--lui-ai-summary-radius);
  padding: var(--lui-ai-summary-border-size);
  /* Match __inner so the 1px padding is not a static tertiary ring; the beam still paints it. */
  background: var(--color-primary);
}

.lui-badge--ai {
  --lui-ai-summary-border-size: 1px;
  --lui-ai-beam-radius: 6px;
  --beam-reach: 3px;

  gap: 0;
  padding: var(--lui-ai-summary-border-size);
  border: none;
  border-radius: var(--lui-ai-beam-radius);
}

.lui-button--ai {
  --lui-ai-summary-border-size: 1px;
  --lui-ai-beam-radius: 6px;
  --beam-reach: 3px;

  gap: 0;
  padding: var(--lui-ai-summary-border-size);
  border: none;
  border-radius: var(--lui-ai-beam-radius);
  color: var(--color-content);
}

.lui-button--ai:hover {
  filter: none;
}

.lui-flow-block--ai {
  --lui-ai-summary-border-size: 1px;
  --lui-ai-beam-radius: 8px;
  --beam-reach: 5px;

  width: 14rem;
  padding: var(--lui-ai-summary-border-size);
  border: none;
  border-radius: var(--lui-ai-beam-radius);
  box-shadow: none;
}

/* Flow canvas: handles mount on the block edge and must not be clipped by the beam host.
   Bloom/comet stay clipped via ::before/::after clip-path. */
.flow-block-node.lui-flow-block--ai {
  overflow: visible;
}

/* Colored bloom — sits ABOVE the content so color washes INTO the card body */
.lui-ai-summary-card::before,
.lui-badge--ai::before,
.lui-button--ai::before,
.lui-flow-block--ai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: var(--lui-ai-beam-radius);
  clip-path: inset(0 round var(--lui-ai-beam-radius));
  pointer-events: none;
  background:
    radial-gradient(ellipse 98px 56px at 33% -7.4%, color-mix(in srgb, var(--lui-ai-beam-orange) 50%, transparent), transparent),
    radial-gradient(ellipse 84px 49px at 12% -5%, color-mix(in srgb, var(--lui-ai-beam-yellow) 50%, transparent), transparent),
    radial-gradient(ellipse 56px 98px at 2.1% 68.3%, color-mix(in srgb, var(--lui-ai-beam-teal) 50%, transparent), transparent),
    radial-gradient(ellipse 252px 45px at 74.4% 100%, color-mix(in srgb, var(--lui-ai-beam-blue) 50%, transparent), transparent),
    radial-gradient(ellipse 104px 45px at 93.9% 0%, color-mix(in srgb, var(--lui-ai-beam-red) 50%, transparent), transparent),
    radial-gradient(ellipse 73px 67px at 100% 27.1%, color-mix(in srgb, var(--lui-ai-beam-purple) 50%, transparent), transparent),
    radial-gradient(ellipse 119px 36px at 55% 100%, color-mix(in srgb, var(--lui-ai-beam-cyan) 50%, transparent), transparent);
  -webkit-mask-image:
    var(--lui-ai-beam-window-bloom),
    linear-gradient(white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white),
    linear-gradient(to right, white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white);
  -webkit-mask-composite: source-in, source-over;
  mask-image:
    var(--lui-ai-beam-window-bloom),
    linear-gradient(white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white),
    linear-gradient(to right, white, transparent var(--beam-reach), transparent calc(100% - var(--beam-reach)), white);
  mask-composite: intersect, add;
  opacity: calc(var(--beam-opacity) * 0.6 * var(--beam-strength, 1));
  animation: beam-hue-shift 12s ease-in-out infinite;
}

/* Traveling LoopOS AI stroke — masked to the 1px border ring */
.lui-ai-summary-card::after,
.lui-badge--ai::after,
.lui-button--ai::after,
.lui-flow-block--ai::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: calc(var(--lui-ai-beam-radius) - var(--lui-ai-summary-border-size));
  padding: var(--lui-ai-summary-border-size);
  clip-path: inset(0 round var(--lui-ai-beam-radius));
  pointer-events: none;
  background:
    var(--lui-ai-beam-stroke-band),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, var(--lui-ai-beam-orange), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, var(--lui-ai-beam-yellow), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, var(--lui-ai-beam-teal), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, var(--lui-ai-beam-blue), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, var(--lui-ai-beam-red), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, var(--lui-ai-beam-purple), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, var(--lui-ai-beam-cyan), transparent);
  -webkit-mask:
    var(--lui-ai-beam-window-stroke),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    var(--lui-ai-beam-window-stroke),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: intersect, exclude;
  opacity: calc(var(--beam-opacity) * 0.2 * var(--beam-strength, 1));
  animation: beam-hue-shift 12s ease-in-out infinite;
}

.lui-ai-summary-card__shimmer-line {
  display: none;
}

/* Dark theme — brighter core + bolder interior bloom, calmer saturation */
:root[data-theme="dark"] .lui-ai-summary-card,
:root[data-theme="dark"] .lui-badge--ai,
:root[data-theme="dark"] .lui-button--ai,
:root[data-theme="dark"] .lui-flow-block--ai,
:root[data-theme="dark"] .lui-ai-plasma {
  --beam-saturate: 1.4;
  --lui-ai-beam-stroke-band:
    conic-gradient(
      from var(--beam-angle),
      transparent 0%, transparent 54%,
      rgba(255, 255, 255, 0.07) 57%,
      rgba(255, 255, 255, 0.2) 60%,
      rgba(255, 255, 255, 0.4) 63%,
      rgba(255, 255, 255, 0.5) 66%,
      rgba(255, 255, 255, 0.4) 69%,
      rgba(255, 255, 255, 0.2) 72%,
      rgba(255, 255, 255, 0.07) 75%,
      transparent 78%, transparent 100%
    );
}

:root[data-theme="dark"] .lui-ai-summary-card::before,
:root[data-theme="dark"] .lui-badge--ai::before,
:root[data-theme="dark"] .lui-button--ai::before,
:root[data-theme="dark"] .lui-flow-block--ai::before {
  opacity: calc(var(--beam-opacity) * 0.95 * var(--beam-strength, 1));
}

:root[data-theme="dark"] .lui-ai-summary-card::after,
:root[data-theme="dark"] .lui-badge--ai::after,
:root[data-theme="dark"] .lui-button--ai::after,
:root[data-theme="dark"] .lui-flow-block--ai::after {
  background:
    var(--lui-ai-beam-stroke-band),
    radial-gradient(ellipse 70px 40px at 33% -7.4%, var(--lui-ai-beam-orange), transparent),
    radial-gradient(ellipse 60px 35px at 12% -5%, var(--lui-ai-beam-yellow), transparent),
    radial-gradient(ellipse 40px 70px at 2.1% 68.3%, var(--lui-ai-beam-teal), transparent),
    radial-gradient(ellipse 180px 32px at 74.4% 100%, var(--lui-ai-beam-blue), transparent),
    radial-gradient(ellipse 74px 32px at 93.9% 0%, var(--lui-ai-beam-red), transparent),
    radial-gradient(ellipse 52px 48px at 100% 27.1%, var(--lui-ai-beam-purple), transparent),
    radial-gradient(ellipse 85px 26px at 55% 100%, var(--lui-ai-beam-cyan), transparent);
  opacity: calc(var(--beam-opacity) * 0.4 * var(--beam-strength, 1));
}

@keyframes beam-spin {
  to { --beam-angle: 360deg; }
}

@keyframes beam-fade-in {
  to { --beam-opacity: 1; }
}

@keyframes beam-hue-shift {
  0%, 100% { filter: brightness(1.25) saturate(var(--beam-saturate, 1.5)); }
  50%      { filter: brightness(1.4) saturate(var(--beam-saturate, 1.5)); }
}

@media (prefers-reduced-motion: reduce) {
  .lui-ai-summary-card,
  .lui-badge--ai,
  .lui-button--ai,
  .lui-flow-block--ai {
    animation: none;
  }

  /* Degrade to a tasteful STATIC LoopOS AI border (never blank) */
  .lui-ai-summary-card,
  .lui-badge--ai,
  .lui-button--ai,
  .lui-flow-block--ai {
    --beam-opacity: 1;
  }

  .lui-ai-summary-card::before,
  .lui-ai-summary-card::after,
  .lui-badge--ai::before,
  .lui-badge--ai::after,
  .lui-button--ai::before,
  .lui-button--ai::after,
  .lui-flow-block--ai::before,
  .lui-flow-block--ai::after {
    animation: none;
  }

  /* Hide the traveling bloom and drop the traveling mask so the full ring shows */
  .lui-ai-summary-card::before,
  .lui-badge--ai::before,
  .lui-button--ai::before,
  .lui-flow-block--ai::before {
    opacity: 0;
  }

  .lui-ai-summary-card::after,
  .lui-badge--ai::after,
  .lui-button--ai::after,
  .lui-flow-block--ai::after {
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
}

.lui-badge--ai .lui-badge__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 8px 2px 6px;
  border-radius: calc(var(--lui-ai-beam-radius) - var(--lui-ai-summary-border-size));
  background: var(--color-primary);
  color: var(--color-content);
}

.lui-button--ai .lui-button__inner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 100%;
  width: 100%;
  padding: 0 9px;
  border-radius: calc(var(--lui-ai-beam-radius) - var(--lui-ai-summary-border-size));
  background: var(--color-primary);
  color: var(--color-content);
}

.lui-button--ai.lui-button--size-xs .lui-button__inner { padding: 0 7px; gap: 6px; }
.lui-button--ai.lui-button--size-sm .lui-button__inner { padding: 0 9px; gap: 6px; }
.lui-button--ai.lui-button--size-md .lui-button__inner { padding: 0 11px; gap: 8px; }
.lui-button--ai.lui-button--size-lg .lui-button__inner { padding: 0 15px; gap: 8px; }

.lui-button--loading .lui-button__inner {
  opacity: 0;
}

.lui-flow-block--ai .lui-flow-block__inner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: calc(var(--lui-ai-beam-radius) - var(--lui-ai-summary-border-size));
  background: var(--color-primary);
}

.lui-badge--ai .lui-badge__ai-symbol,
.lui-button--ai .lui-button__ai-symbol {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.lui-ai-summary-card__inner {
  position: relative;
  z-index: 2;
  border-radius: calc(var(--lui-ai-summary-radius) - var(--lui-ai-summary-border-size));
  background: var(--color-primary);
  padding: 16px;
}

.lui-ai-summary-card--compact .lui-ai-summary-card__inner,
.lui-ai-summary-card--short .lui-ai-summary-card__inner {
  padding: 10px 12px;
}

.lui-ai-summary-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.lui-ai-summary-card__header:not(:has(.lui-ai-summary-card__brand)) {
  justify-content: flex-end;
}

.lui-ai-summary-card__header--compact {
  margin-bottom: 6px;
}

.lui-ai-summary-card__brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lui-ai-summary-card__symbol {
  display: block;
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}

.lui-ai-summary-card__label {
  color: var(--color-content);
}

.lui-ai-summary-card__header--compact .lui-ai-summary-card__symbol {
  height: 14px;
  width: 14px;
}

.lui-ai-summary-card__regenerate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  transition: background var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-ai-summary-card__regenerate:hover:not(:disabled) {
  background: var(--color-secondary);
}

.lui-ai-summary-card__regenerate:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

.lui-ai-summary-card__regenerate:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lui-ai-summary-card__regenerate-icon {
  font-size: 14px;
  color: inherit;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 14;
}

.lui-ai-summary-card__regenerate-icon.lui-ai-summary-card__loading-icon {
  animation: ai-summary-spin 0.8s linear infinite;
}

.lui-ai-summary-card__text {
  margin: 0;
  line-height: 1.6;
  color: var(--color-content);
}

.lui-ai-summary-card__text > :first-child {
  margin-top: 0;
}

.lui-ai-summary-card__text > :last-child {
  margin-bottom: 0;
}

.lui-ai-summary-card__text p {
  margin: 0 0 8px;
}

.lui-ai-summary-card__text p:first-of-type {
  font-weight: 500;
}

/* A record's summary is one paragraph of prose: no bold lead, so the first paragraph is not weighted. */
.lui-ai-summary-card__text p.lui-ai-prose,
.lui-ai-summary-card__text p.lui-ai-prose:first-of-type {
  margin: 0;
  font-weight: 400;
}

.lui-ai-summary-card__text ul,
.lui-ai-summary-card__text ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}

.lui-ai-summary-card__text ol {
  list-style: decimal;
}

.lui-ai-summary-card__text li.lui-ai-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-ai-summary-card__text li.lui-ai-fact strong {
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-content-secondary);
}

.lui-ai-summary-card__text li + li {
  margin-top: 4px;
}

.lui-ai-summary-card__text li.lui-ai-fact + li.lui-ai-fact {
  margin-top: 0;
}

/* A paragraph after a list needs air above it. */
.lui-ai-summary-card__text ul + p,
.lui-ai-summary-card__text ol + p {
  margin-top: 16px;
}

/* Section headings of the markdown (`###`): small caps-style titles over their section, a soft rule above every one
   but the first. The same grammar in a summary and in a chat answer. */
.lui-ai-summary-card__text h4 {
  margin: 16px 0 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-tertiary);
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-content-secondary);
}

.lui-ai-summary-card__text > h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.lui-ai-summary-card__text h4 + p,
.lui-ai-summary-card__text h4 + ul,
.lui-ai-summary-card__text h4 + ol {
  margin-top: 0;
}

/* List markers: a small dot, so a list reads as a list (fact lines keep their stacked label/value instead). */
.lui-ai-summary-card__text ul > li:not(.lui-ai-fact) {
  position: relative;
  padding-left: 14px;
}

.lui-ai-summary-card__text ul > li:not(.lui-ai-fact)::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-content-secondary);
}

.lui-ai-summary-card__text em {
  font-style: italic;
  color: var(--color-content-secondary);
}

.lui-ai-summary-card__text strong {
  font-weight: 500;
}

.lui-ai-summary-card__meta {
  margin: 8px 0 0;
}

.lui-ai-summary-card__attribution {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  min-width: 0;
}

.lui-ai-summary-card__attribution-symbol {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  mix-blend-mode: luminosity;
}

.lui-ai-summary-card:hover .lui-ai-summary-card__attribution-symbol,
.lui-ai-summary-card:focus-within .lui-ai-summary-card__attribution-symbol {
  mix-blend-mode: normal;
}

.lui-ai-summary-card--compact .lui-ai-summary-card__text,
.lui-ai-summary-card--short .lui-ai-summary-card__text {
  line-height: 1.5;
}

.lui-ai-summary-card__text--empty {
  color: var(--color-content-secondary);
  font-style: italic;
}

.lui-ai-summary-card__text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-ai-summary-card__text--error {
  color: var(--color-danger-fg);
  font-style: italic;
}

.lui-ai-summary-card__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--color-content-secondary);
}

.lui-ai-summary-card__loading-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-chrome-accent);
  animation: ai-summary-spin 0.8s linear infinite;
}

.lui-ai-summary-card__loading-label {
  color: var(--color-content-secondary);
  font-style: italic;
}

/* The «AI summary» cell of an index row in real-time mode (`ai_summary_index_cell`): one line, whatever the
   regenerate stream writes into it — the loading line, then the short summary or the error. */
.lui-ai-summary-index-cell {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.lui-ai-summary-index-cell [data-regenerate-ai-summary-target="shortSummary"] {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-ai-summary-index-cell [data-regenerate-ai-summary-target="shortSummary"] > * {
  display: inline;
  margin: 0;
  padding: 0;
}

.lui-ai-summary-index-cell [data-regenerate-ai-summary-target="shortSummary"] > .lui-ai-summary-card__loading {
  display: inline-flex;
}

/* Drawn at once on a row that may need a summary (by its age alone), until the page's request answers. */
.lui-ai-summary-index-cell [data-regenerate-ai-summary-target="shortSummary"] > .lui-ai-summary-index-cell__pending {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--color-content-secondary);
}

.lui-ai-summary-index-cell__pending .copy-13 {
  font-style: italic;
}

/* The rules above set a display on every child, which beats the browser's own `[hidden]`: the stored text (or
   «Brevemente.») waiting behind «A preparar resumo…» showed glued to it, and so did the pending look once hidden. */
.lui-ai-summary-index-cell [data-regenerate-ai-summary-target="shortSummary"] > [hidden] {
  display: none;
}

.lui-ai-summary-card__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

/*
 * Live AI summary (Intelligence::AiSummaryStream, `regenerate-ai-summary`): while a job streams a summary, the
 * card's text target receives the loading line with the run's phase, then the text so far with a caret (and, when
 * the lead comes last, a bar in its place), then the result. The text is as tall as the loading line from its first
 * character, so the swap does not jump. The controller writes it out of the caret, word by word (`lib/ai_stream.js`,
 * `.lui-ai-stream-word` below), and the caret is the LoopOS AI plasma (`.lui-ai-plasma--caret`).
 */
.lui-ai-summary-card__text--streaming {
  min-height: 30px;
}

/* The bold lead line still to come (the model wrote the rest first): a quiet bar where it will be, one line tall,
   so the lead takes its place instead of pushing the text down. Static on purpose: each partial redraws it. */
.lui-ai-summary-card__text p.lui-ai-summary-card__lead-placeholder {
  width: min(60%, 320px);
  height: 1.6em;
  border-radius: 4px;
  background: var(--color-secondary);
}

/* The caret is the plasma loader at text size (`.lui-ai-plasma--caret`, below): the words come out of it. */
.lui-ai-stream-cursor {
  margin-left: 0.3em;
}

/* A fact line (label over value) is a flex column: the caret would drop to a row of its own. The line it is in
   flows as a block instead, with the label still on its own line, so it reads the same as the finished one. */
.lui-ai-summary-card__text--streaming li.lui-ai-fact:has(> .lui-ai-stream-cursor) {
  display: block;
}

.lui-ai-summary-card__text--streaming li.lui-ai-fact:has(> .lui-ai-stream-cursor) > strong {
  display: block;
  margin-bottom: 2px;
}


@media (prefers-reduced-motion: reduce) {
  .lui-ai-stream-cursor {
    animation: none;
  }
}

/*
 * LoopOS AI plasma — the loader of every AI summary (cards, the `lui-ai-card` «A gerar…» state, the index cells) and
 * the caret its text is written from. Markup: `AiSummaryHelper#ai_plasma_tag` (server) and `lib/ai_stream.js`
 * `plasmaHtml` (client), the same five spans.
 *
 * The beam of the card shrunk into a blob: the seven colour patches sit still, always faintly lit (`__base`); the
 * window of the beam's lap (`--lui-ai-beam-window-*`, 6 s) lights them as it passes (`__bloom`, `__glow`) and runs a
 * 1px stroke on the rim (`__stroke`); the shape breathes in 12 s, with the beam's brightness. Palette, lap, windows
 * and the hue breath are the beam's own (shared tokens above).
 *
 * As a caret it reacts to the writing: `--d` (0 still … 1 writing fast, set every frame from the caret's real speed by
 * `lib/ai_stream.js`) stretches the head forward and grows a tapered tail behind it — a drop running to the right.
 */
.lui-ai-plasma {
  --s: 16px;
  /* The patches in % of the box, fuller than the card's (a blob is round and needs colour all around its rim). */
  --lui-ai-plasma-bloom:
    radial-gradient(ellipse 70% 45% at 33% -7.4%, color-mix(in srgb, var(--lui-ai-beam-orange) 60%, transparent), transparent),
    radial-gradient(ellipse 55% 40% at 8% 8%, color-mix(in srgb, var(--lui-ai-beam-yellow) 60%, transparent), transparent),
    radial-gradient(ellipse 40% 70% at 2.1% 68.3%, color-mix(in srgb, var(--lui-ai-beam-teal) 60%, transparent), transparent),
    radial-gradient(ellipse 80% 40% at 74.4% 100%, color-mix(in srgb, var(--lui-ai-beam-blue) 60%, transparent), transparent),
    radial-gradient(ellipse 60% 40% at 93.9% 0%, color-mix(in srgb, var(--lui-ai-beam-red) 60%, transparent), transparent),
    radial-gradient(ellipse 45% 60% at 100% 40%, color-mix(in srgb, var(--lui-ai-beam-purple) 60%, transparent), transparent),
    radial-gradient(ellipse 65% 40% at 40% 100%, color-mix(in srgb, var(--lui-ai-beam-cyan) 60%, transparent), transparent);
  --lui-ai-plasma-stroke:
    radial-gradient(ellipse 60% 40% at 33% -7.4%, var(--lui-ai-beam-orange), transparent),
    radial-gradient(ellipse 45% 35% at 8% 8%, var(--lui-ai-beam-yellow), transparent),
    radial-gradient(ellipse 35% 60% at 2.1% 68.3%, var(--lui-ai-beam-teal), transparent),
    radial-gradient(ellipse 70% 35% at 74.4% 100%, var(--lui-ai-beam-blue), transparent),
    radial-gradient(ellipse 50% 35% at 93.9% 0%, var(--lui-ai-beam-red), transparent),
    radial-gradient(ellipse 40% 50% at 100% 40%, var(--lui-ai-beam-purple), transparent),
    radial-gradient(ellipse 55% 35% at 40% 100%, var(--lui-ai-beam-cyan), transparent);
  --lui-ai-plasma-stroke-opacity: 0.5;

  position: relative;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  vertical-align: middle;
  isolation: isolate;
  pointer-events: none;
  animation:
    beam-spin var(--beam-duration) linear infinite,
    beam-fade-in 0.6s ease forwards;
}

:root[data-theme="dark"] .lui-ai-plasma {
  --lui-ai-plasma-stroke-opacity: 1;
}

.lui-ai-plasma--md { --s: 24px; }

/* At text size, after the last word written. */
.lui-ai-plasma--caret {
  --s: 0.8em;
  vertical-align: -0.1em;
}

.lui-ai-plasma > *,
.lui-ai-plasma__shape > * {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lui-ai-plasma__shape {
  transform-origin: 72% 50%;
  transform: scale(calc(1 + var(--d, 0) * 0.5), calc(1 - var(--d, 0) * 0.22));
  filter: blur(calc(var(--d, 0) * 0.5px));
  animation: lui-ai-plasma-morph 12s ease-in-out infinite;
}

.lui-ai-plasma__glow {
  inset: -18%;
  background: var(--lui-ai-plasma-bloom);
  filter: blur(calc(var(--s) * 0.12));
  -webkit-mask: var(--lui-ai-beam-window-bloom);
  mask: var(--lui-ai-beam-window-bloom);
  opacity: calc(var(--beam-opacity) * 0.7);
}

.lui-ai-plasma__base {
  background: var(--lui-ai-plasma-bloom);
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 20%, #000 100%);
  mask: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 20%, #000 100%);
  opacity: calc(var(--beam-opacity) * 0.35);
  animation: beam-hue-shift 12s ease-in-out infinite;
}

.lui-ai-plasma__bloom {
  background: var(--lui-ai-plasma-bloom);
  -webkit-mask: var(--lui-ai-beam-window-bloom);
  mask: var(--lui-ai-beam-window-bloom);
  opacity: calc(var(--beam-opacity) * 0.95);
  animation: beam-hue-shift 12s ease-in-out infinite;
}

/* The beam's 1px stroke, on the blob's rim only. */
.lui-ai-plasma__stroke {
  background: var(--lui-ai-beam-stroke-band), var(--lui-ai-plasma-stroke);
  -webkit-mask-image: var(--lui-ai-beam-window-stroke), radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  -webkit-mask-composite: source-in;
  mask-image: var(--lui-ai-beam-window-stroke), radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  mask-composite: intersect;
  opacity: calc(var(--beam-opacity) * var(--lui-ai-plasma-stroke-opacity));
  animation: beam-hue-shift 12s ease-in-out infinite;
}

/* The drop's tail: a long ellipse anchored in the head, fading backwards; as long and as lit as the caret is fast. */
.lui-ai-plasma__tail {
  inset: auto;
  top: 50%;
  right: 22%;
  width: calc(var(--s) * 2.6);
  height: 92%;
  border-radius: 0;
  transform-origin: right center;
  transform: translateY(-50%) scaleX(var(--d, 0));
  opacity: calc(var(--d, 0) * 1.1);
  background: linear-gradient(to left, rgba(0, 197, 255, 0.95), rgba(0, 114, 255, 0.8) 25%, rgba(128, 68, 255, 0.55) 50%, rgba(228, 45, 39, 0.22) 78%, transparent);
  -webkit-mask: radial-gradient(ellipse 100% 50% at 100% 50%, #000 35%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  mask: radial-gradient(ellipse 100% 50% at 100% 50%, #000 35%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
  filter: blur(calc(var(--s) * 0.12)) saturate(1.4) brightness(1.2);
}

/* The text is written: the caret dissolves. */
.lui-ai-plasma--leaving {
  animation: lui-ai-plasma-leave 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes lui-ai-plasma-morph {
  0%, 100% { border-radius: 58% 42% 38% 62% / 42% 55% 45% 58%; }
  25%      { border-radius: 46% 54% 60% 40% / 56% 44% 56% 44%; }
  50%      { border-radius: 40% 60% 52% 48% / 60% 40% 58% 42%; }
  75%      { border-radius: 56% 44% 44% 56% / 44% 58% 42% 56%; }
}

@keyframes lui-ai-plasma-leave {
  to { opacity: 0; transform: scale(1.4, 0.5); filter: blur(5px); }
}

/*
 * The words of an AI text, written out of the caret (`lib/ai_stream.js`): one at a time at a steady pace, whatever the
 * bursts the stream arrives in. A word waits hidden (`--pending`, and so does a block with no word shown yet), then
 * comes in blurred, a little low, in the colour of one of the beam's patches (`--c`), and settles into the text
 * colour in about a second — the next words start before it ends, so the front is always soft. Nothing animated
 * touches the layout. `__host` is the summary box whose height follows the text as it grows.
 */
.lui-ai-stream-word {
  display: inline-block;
}

.lui-ai-stream-word--pending,
.lui-ai-stream-block--pending {
  display: none;
}

.lui-ai-stream-word--entering {
  --lui-ai-stream-tint: color-mix(in srgb, var(--c, var(--lui-ai-beam-cyan, rgb(0, 197, 255))) 70%, var(--color-content));
  animation: lui-ai-stream-word 1.15s cubic-bezier(0.25, 0.6, 0.3, 1) both;
}

.lui-ai-stream__host {
  overflow-y: clip;
}

@keyframes lui-ai-stream-word {
  0%   { opacity: 0; filter: blur(4px); transform: translateY(0.12em); color: var(--lui-ai-stream-tint); }
  35%  { opacity: 0.9; color: var(--lui-ai-stream-tint); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lui-ai-plasma,
  .lui-ai-plasma *,
  .lui-ai-stream-word--entering {
    animation: none;
  }
}

/*
 * lui-ai-card (ADR-141) — the run-aware AI output card: model · cost · when,
 * a state banner for the 7 non-ready states, citations, Aceitar/Editar/
 * Ignorar/Regenerar and 👍/👎. Sits on the same `.lui-ai-summary-card`
 * beam-frame chrome above — these rules only add the parts that chrome does
 * not already have.
 */
.lui-ai-card__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 8px;
}

.lui-ai-card__meta {
  margin: 0;
  min-width: 0;
}

.lui-ai-card__body {
  margin-bottom: 8px;
}

.lui-ai-card__state {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-ai-card__state-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.lui-ai-card__state--generating {
  background: transparent;
  padding-left: 0;
  padding-right: 0;
}


/* The AI card's spinners stand still, like `.lui-spinner` and `.animate-spin`: the label beside them says what is
   happening. After the rules they override (same specificity). */
@media (prefers-reduced-motion: reduce) {
  .lui-ai-summary-card__loading-icon,
  .lui-ai-summary-card__regenerate-icon.lui-ai-summary-card__loading-icon {
    animation: none;
  }
}

/* The slot a streaming job writes into while the card is `generating` (`stream_target:`): phases, then the text so
   far. Hidden while nothing has arrived, so the card is as before until the job speaks. */
.lui-ai-card__stream {
  margin-bottom: 8px;
}

.lui-ai-card__stream:empty {
  display: none;
}

/* Once the stream has said something (a phase, the first words), the «A gerar…» banner above it gives way: one
   spinner, one line saying what is happening. */
.lui-ai-card__state--generating:has(+ .lui-ai-card__stream:not(:empty)) {
  display: none;
}

.lui-ai-card__off {
  position: absolute;
  top: 14px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content-secondary);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

.lui-ai-card__off--budget_limited {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength-loud), var(--color-background));
  color: var(--color-warning-fg);
}

.lui-ai-card__off--unavailable {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength-loud), var(--color-background));
  color: var(--color-danger-fg);
}

.lui-ai-card--disabled .lui-ai-card__inner {
  filter: grayscale(1);
  opacity: 0.55;
}

.lui-ai-card--disabled::before,
.lui-ai-card--disabled::after {
  opacity: 0;
}

.lui-ai-card__state--unavailable {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength-subtle), var(--color-background));
  color: var(--color-danger-fg);
}

.lui-ai-card__state--budget_limited {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength-subtle), var(--color-background));
  color: var(--color-warning-fg);
}

/* `warning:` (PRD-7 DEC-3) — a secondary notice beside a `ready` body, not
   a state: the card answered from less than it wanted (no photos, vision
   unavailable) but still answered. Same warning tint as `budget_limited`,
   smaller and inline rather than a full state banner. */
.lui-ai-card__warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  margin: 0 0 8px;
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength-subtle), var(--color-background));
  color: var(--color-warning-fg);
}

.lui-ai-card__warning-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.lui-ai-card__citations {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.lui-ai-card__citation {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-ai-card__citation-icon {
  font-size: 14px;
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-ai-card__citation-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-ai-card__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

/* While a new summary is being written into the card (`regenerate-ai-summary` marks it busy), the footer belongs to
   the proposal being replaced: Aceitar, Editar, Ignorar, Regenerar and 👍/👎 would act on it. Back with the result. */
.lui-ai-card:has([data-regenerate-ai-summary-target="summary"][aria-busy="true"]) .lui-ai-card__footer-row {
  display: none;
}

.lui-ai-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* «Última geração» in the footer row: level with the 👍/👎 (the row centres its items), taking the free width so
   the buttons stay at the right edge. */
.lui-ai-card__footer-row .lui-ai-card__generated {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.lui-ai-card__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  font-size: 12px;
  cursor: pointer;
}

.lui-ai-card__action:hover {
  background: var(--color-secondary);
}

.lui-ai-card__action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

.lui-ai-card__action-icon {
  font-size: 14px;
}

.lui-ai-card__feedback {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.lui-ai-card__feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-ai-card__feedback-button span {
  font-size: 16px;
}

.lui-ai-card__feedback-button:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-ai-card__feedback-button--active {
  background: color-mix(in srgb, var(--color-chrome-accent) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-chrome-accent);
}

.lui-ai-card__feedback-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

@keyframes ai-summary-spin {
  to { transform: rotate(360deg); }
}

.lui-langfuse-test {
  padding: 12px 14px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-secondary);
}

.lui-langfuse-test--success {
  border-color: var(--color-status-success-border, var(--color-border-tertiary));
}

.lui-langfuse-test--error {
  border-color: var(--color-status-destructive-border, var(--color-border-tertiary));
}

.lui-langfuse-test__step-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.lui-langfuse-test__step--ok .lui-langfuse-test__step-icon {
  color: var(--color-status-success, var(--color-chrome-accent));
}

.lui-langfuse-test__step--error .lui-langfuse-test__step-icon {
  color: var(--color-status-destructive, var(--color-content-destructive));
}

.lui-langfuse-test__step--running .lui-langfuse-test__step-icon,
.lui-langfuse-test__spin {
  color: var(--color-chrome-accent);
  animation: ai-summary-spin 0.8s linear infinite;
}

.lui-langfuse-test__step--pending .lui-langfuse-test__step-icon {
  color: var(--color-content-tertiary);
}

.lui-langfuse-test__summary--success {
  color: var(--color-status-success, var(--color-content-primary));
}

.lui-langfuse-test__summary--destructive {
  color: var(--color-content-destructive);
}

.lui-tab-ai-summary {
  max-width: 56rem;
}

.lui-tab-ai-summary__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lui-tab-ai-summary__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 960px) {
  .lui-tab-ai-summary__grid {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
  }
}

.lui-tab-ai-summary__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lui-tab-ai-summary__section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-tab-ai-summary__section-title {
  margin: 0;
  color: var(--color-content);
}

.lui-tab-ai-summary__section-hint {
  margin: 0;
}

.lui-tab-ai-summary__meta {
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-tab-ai-summary__section--primary .lui-ai-summary-card__inner {
  padding: 16px 18px;
}

.lui-tab-ai-summary__section--primary .lui-ai-summary-card__text {
  line-height: 1.65;
}

/* Email template editor — Network Manager parity */
.lui-main-layout__content--editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.email-template-workspace,
.message-template-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}

/* The parameters card is a rail beside the document: inserting a key never
 * takes the operator away from the canvas. It folds under the document before
 * the document is allowed to shrink — an email canvas is a fixed 640px and
 * 1279px minus the app sidebar leaves it no room next to a rail. */
@media (min-width: 1280px) {
  .message-template-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }
}

.email-template-workspace__main,
.message-template-workspace .email-template-workspace__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.email-template-params {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.email-template-params__card {
  flex: 1 1 auto;
}

.email-template-params__card > .lui-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
}

.email-template-params__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.email-template-params__heading .lui-tooltip__trigger--icon {
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.email-template-params__header-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.email-template-params__count {
  flex-shrink: 0;
}

.email-template-params__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-tertiary);
}

.email-template-params__toolbar .lui-button {
  flex-shrink: 0;
}

.email-template-params__empty {
  padding: 12px 14px;
}

.email-template-params-editor-wrap {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

/* One row per parameter: read line and edit panel share the same <li>. */
.email-template-params-editor {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-template-params-editor__row {
  min-width: 0;
  border-bottom: 1px solid var(--color-tertiary);
}

.email-template-params-editor__row:last-child {
  border-bottom: 0;
}

.email-template-params-editor__row:not(.email-template-params-editor__row--editing):hover {
  background: var(--color-secondary);
}

.email-template-params-editor__read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
}

.email-template-params-editor__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.email-template-params-editor__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Name and key are wrapped in hover tooltips that say what each one is. The
   bare trigger is a span, so it must not behave like a button or block the
   truncation the row depends on. */
.email-template-params-editor__title > .lui-tooltip__trigger,
.email-template-params-editor__field-label > .lui-tooltip__trigger {
  min-width: 0;
  cursor: help;
  font: inherit;
}

.email-template-params-editor__name-group {
  display: inline-flex;
  min-width: 0;
}

.email-template-params-editor__name-group .lui-badge {
  max-width: 100%;
}

/* The pill is the name the operator recognises; the key stays quiet in a code chip
   behind it, one size down. */
.email-template-params-editor__key-code {
  min-width: 0;
  color: var(--color-content-secondary);
}

/* Aligned with the pill's text, not its border: 6px of badge padding plus 1px
   of border (.lui-badge--sm). */
.email-template-params-editor__description-display {
  min-width: 0;
  padding-inline-start: 7px;
}

.email-template-params-editor__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Insert is the one action that writes into the document — informative tint. */
.email-template-params-editor__insert.lui-button {
  color: var(--color-informative-fg);
  border-color: color-mix(in srgb, var(--color-informative) 35%, var(--color-tertiary));
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
}

.email-template-params-editor__insert.lui-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength-strong), var(--color-background));
}

.email-template-params-editor__edit {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
}

.email-template-params-editor__row--editing {
  background: var(--color-secondary);
}

.email-template-params-editor__row--editing > .email-template-params-editor__read {
  display: none;
}

.email-template-params-editor__row--editing > .email-template-params-editor__edit {
  display: flex;
}

.email-template-params-editor__edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-template-params-editor__edit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.email-template-params-editor__edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.email-template-params-editor__field {
  /* The field owns its column width — the 420px control cap would leave the
     grid column half empty. */
  --lui-forms-control-max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.email-template-params-editor__field--wide {
  grid-column: 1 / -1;
}

.email-template-params-editor__field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.email-template-params-editor__field-help {
  color: var(--color-content-secondary);
}

.email-template-params-editor__field .lui-forms__control {
  width: 100%;
  min-width: 0;
}

.email-template-params-editor__preview {
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--color-content-secondary);
  background: var(--color-background);
  overflow-wrap: anywhere;
}

.email-template-params-editor__error {
  margin: 0;
  color: var(--color-content-destructive);
}

.email-template-params-editor--readonly .email-template-params-editor__row:hover {
  background: var(--color-secondary);
}

/* In the rail the row has no room for identity and actions on one line: the
 * actions drop under the name, and the edit panel becomes one field per row. */
@container (max-width: 40rem) {
  .email-template-params__toolbar {
    flex-wrap: wrap;
  }

  .email-template-params-editor__read {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .email-template-params-editor__actions {
    flex-wrap: wrap;
  }

  .email-template-params-editor__edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.email-template-workspace .cke {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Message template editor (D11 / B4.2) --------------------------------
 *
 * One page shape for both channels: the email's MJML canvas and the SMS text
 * box sit in the same grid, beside the same rail. The modifiers differ only in
 * how much room the document needs — an email is a fixed 640px document with
 * GrapesJS's own panels inside its column, an SMS is a text box that is happy
 * at any width. */

.message-editor-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 16px 24px 24px;
  box-sizing: border-box;
}

.message-editor-page__workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.message-editor-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 480px;
  height: calc(100dvh - 16rem);
}

.message-editor-inline .message-editor-page__workspace,
.message-editor-inline .message-editor {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.message-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

.message-editor__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.message-editor__workspace:has(.message-editor__rail) {
  grid-template-columns: minmax(0, 1fr) 320px;
}

/* The rail folds under the document before the document is allowed to shrink.
 * B.3's editor was unusable at 1024 until its reviewers caught it: the rail is
 * 320px, and 1024 minus a 248px sidebar minus padding leaves the canvas less
 * than the 640px an email is. */
@media (max-width: 1279px) {
  .message-editor__workspace:has(.message-editor__rail) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.message-editor__document {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.message-editor__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.message-editor__rail-section {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  padding: 12px;
}

.message-editor__params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.message-editor__param {
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.message-editor__status {
  color: var(--color-content-secondary);
  min-height: 18px;
  margin: 0;
}

/* --- SMS editor ---------------------------------------------------------- */

.sms-editor .message-editor__document {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.sms-editor__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.sms-editor__block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  overflow: hidden;
}

.sms-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.sms-editor__format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
  box-sizing: border-box;
}

.sms-editor__format:hover {
  background: var(--color-secondary);
}

.sms-editor__format:focus-visible {
  outline: 2px solid var(--color-informative);
  outline-offset: 1px;
}

.sms-editor__canvas {
  flex: 1;
  min-height: 220px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  outline: none;
}

.sms-editor__canvas:focus {
  box-shadow: inset 0 0 0 1px var(--color-informative);
}

.sms-editor .liquid-token {
  background: color-mix(in srgb, var(--color-informative) 12%, var(--color-primary));
  border: 1px solid var(--color-informative);
  border-radius: 4px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.sms-editor__meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* A message bubble, because that is what the operator is deciding about: not
 * "is this string right" but "does this read well on a phone". */
.sms-editor__preview {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  padding: 10px;
}

.sms-editor__bubble {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 20px;
}

.sms-editor__counter {
  font-variant-numeric: tabular-nums;
}

.sms-editor__warning {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-warning-fg);
  margin: 4px 0 0;
}

/* --- Message template page (4b) ------------------------------------------
 *
 * The show page of an email or SMS template: the description under the page
 * header, then the document beside the parameters card. The document is not
 * a card.
 *
 * Page-local composition, not `lui-*` components (loopos-ui-v2 "open content
 * slot"): two screens use it, both of them this one page in two channels. Every
 * value is a token, so light and dark come for free and there is nothing to
 * promote until a third screen wants the same shape. */

.message-template-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Description under the page header — the field, not a card. */
.message-template-description {
  min-width: 0;
  margin: 12px 0 0;
}

/* The shared textarea floor is three rows. Here the description is one line
 * until the text needs more, so the 16px under it is the space before the tabs. */
.message-template-description .lui-inline-edit__field textarea.lui-inline-edit__input--display,
.message-template-description .lui-inline-edit__field textarea.lui-inline-edit__input--edit {
  min-height: 0;
  height: auto;
  field-sizing: content;
}

/* The Info card, dense. It held six fields one per line; what is left is the
 * type and — only for an external template — the provider references, so it is a
 * row that wraps rather than a column. */

.message-template-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: start;
  min-width: 0;
}

.message-template-info__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.message-template-info__field--wide {
  grid-column: 1 / -1;
}

.message-template-document {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.message-template-document__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Language badges for translations that exist. Add and delete sit on this row. */
.message-template-document__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
}

.message-template-document__locale-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.message-template-subject {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-template-subject .sms-editor__block,
.message-template-subject__block {
  flex: none;
}

.message-template-subject .sms-editor__canvas,
.message-template-subject__canvas {
  flex: none;
  min-height: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.message-template-subject__canvas:empty::before {
  content: attr(data-placeholder);
  color: var(--color-content-secondary);
}

.message-template-locales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.message-template-locale-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.message-template-locale-item:has(.message-template-locale__remove) .lui-filter-pill__label {
  padding-right: 18px;
}

.message-template-locale__remove {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 1;
  display: inline-flex;
  margin: 0;
  transform: translateY(-50%);
}

.message-template-locale__remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.message-template-locale__remove-button:hover,
.message-template-locale__remove-button:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger);
  outline: none;
}

.message-template-locale__remove-button .material-symbols-rounded {
  font-size: 12px;
  line-height: 1;
  width: 12px;
  height: 12px;
}

.message-template-locale-add {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.message-template-locale-add__trigger {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  justify-content: center;
  color: var(--color-content-secondary);
}

.message-template-locale-add__trigger .material-symbols-rounded {
  font-size: 16px;
  line-height: 1;
  width: 16px;
  height: 16px;
}

.message-template-locale-add .lui-dropdown__list form {
  display: block;
}

.message-template-locale-add .lui-dropdown__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* The two states of a language pill.
 *
 * Three cues, never colour alone (loopos-ui-v2 §2): the icon's shape (a tick vs
 * a plus), the border (solid vs dashed), and a word in the accessible name. The
 * colour is the fourth, and both tokens rebind in dark. */
.message-template-locale {
  gap: 4px;
  padding-left: 8px;
}

.message-template-locale__state {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* `material_icon` sets font-size inline (Propshaft has no say in the
 * variable-font axes), so only the line box is ours. */
.message-template-locale__state .material-symbols-rounded {
  line-height: 1;
}

.message-template-locale--written .message-template-locale__state {
  color: var(--color-success-fg);
}

.message-template-locale--empty {
  border-style: dashed;
}

.message-template-locale--empty .message-template-locale__state,
.message-template-locale--empty .lui-filter-pill__label {
  color: var(--color-content-secondary);
}

/* Preview of a compiled document (readers, or the editor rail) reuses the
 * editor's grid so the workspace does not jump. What it does not need is the
 * editor's resolved height: the iframe and the bubble size themselves. */
.message-editor--preview {
  flex: none;
}

.email-template-editor-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 16px 24px 24px;
  box-sizing: border-box;
}

.email-template-editor-page__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.email-template-editor-page__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-template-editor-page__workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.email-template-editor-page__html-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.email-template-editor-page__actions {
  margin-top: 16px;
  flex-shrink: 0;
}

.email-template-editor-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 560px;
  height: min(70vh, 800px);
}

.email-template-editor-inline .email-template-editor-page__workspace,
.email-template-editor-inline .email-template-editor-page__html-form,
.email-template-editor-inline .email-mjml-editor {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.email-template-preview-frame {
  height: min(70vh, 720px);
  min-height: 480px;
  width: 100%;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.email-template-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Sent email on a service run: the document grows and the page scrolls. */
.email-document {
  width: 100%;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.email-document iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  background: #fff;
}

/* Accordion — Rails Blocks lui-accordion (template tab locales) */
.lui-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lui-accordion__heading {
  margin: 0;
  width: 100%;
}

.lui-accordion__item {
  border-bottom: 1px solid var(--color-tertiary);
  width: 100%;
}

.lui-accordion__trigger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.lui-accordion__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}

.lui-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  text-align: left;
  color: var(--color-content);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
  font-family: inherit;
}

.lui-accordion__trigger:hover {
  background: var(--color-secondary);
}

.lui-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-accordion__trigger:disabled {
  cursor: not-allowed;
  color: var(--color-foreground);
}

.lui-accordion__title {
  flex: 1 1 auto;
}

.lui-accordion__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
  transition: transform 200ms ease;
}

.lui-accordion__trigger[data-state="open"] .lui-accordion__icon {
  transform: rotate(180deg);
}

.lui-accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.lui-accordion__content[data-state="open"] {
  grid-template-rows: 1fr;
}

.lui-accordion__content-inner {
  overflow: hidden;
  min-height: 0;
}

.lui-accordion__body {
  padding: 0 8px 12px;
  color: var(--color-content-secondary);
  opacity: 0;
  transition: opacity 240ms ease;
}

.lui-accordion__content[data-state="open"] .lui-accordion__body {
  opacity: 1;
}

/* Inset body — gap between trigger row and panel content (e.g. card-wrapped library accordions) */
.lui-accordion--inset-body .lui-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 0 12px 12px;
}

.lui-accordion--no-trigger-hover .lui-accordion__trigger:hover {
  background: transparent;
}

.lui-card--flush .lui-accordion__trigger-row {
  padding-left: 12px;
  padding-right: 12px;
}

.lui-card--flush .lui-accordion__trigger {
  padding-left: 0;
  padding-right: 0;
}

.lui-card--flush .lui-accordion__actions {
  padding-right: 0;
  flex-shrink: 0;
}

.lui-card--flush .lui-accordion__item:last-child {
  border-bottom: none;
}

.lui-accordion--bordered {
  gap: 8px;
}

.lui-accordion--bordered .lui-accordion__item {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  overflow: hidden;
}

/* ── Missing spacing / display utilities ──────────────────── */
.p-3   { padding: 12px; }
.p-4   { padding: 16px; }
.px-1  { padding-left: 4px; padding-right: 4px; }
.px-3  { padding-left: 12px; padding-right: 12px; }
.px-4  { padding-left: 16px; padding-right: 16px; }
.pl-3  { padding-left: 12px; }
.pl-8  { padding-left: 32px; }
.py-1  { padding-top: 4px; padding-bottom: 4px; }
.py-3  { padding-top: 12px; padding-bottom: 12px; }
.py-4  { padding-top: 16px; padding-bottom: 16px; }
.py-8  { padding-top: 32px; padding-bottom: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pt-2  { padding-top: 8px; }
.pt-3  { padding-top: 12px; }
.pt-4  { padding-top: 16px; }
.pb-3  { padding-bottom: 12px; }
.pb-4  { padding-bottom: 16px; }
.mt-6  { margin-top: 24px; }
.mb-0  { margin-bottom: 0; }
.gap-5 { gap: 20px; }
.text-primary        { color: var(--color-content); }
.uppercase           { text-transform: uppercase; }
.pointer-events-none { pointer-events: none; }
.bg-transparent      { background: transparent; }
.underline           { text-decoration: underline; }
.font-mono           { font-family: var(--font-mono); }
.w-1\/2 { width: 50%; }
/* SortableJS drag states */
.ghost  { opacity: 0.4; }
.chosen { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.drag   { opacity: 0.8; }
/* ── Protocol Element Cards (editor) ──────────────────────── */
/* Input keeps the old Core orange role → --color-orange. Info keeps the old
   Hubs blue role → --color-informative. Tints match lui-badge. */
.pe-card {
  background: var(--color-background);
  border-radius: 12px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
}
.pe-card--input {
  --pe-kind: var(--color-orange);
  --pe-kind-fg: var(--color-orange-fg);
  --pe-kind-border: color-mix(in srgb, var(--pe-kind) var(--color-tint-border-strength-strong), var(--color-tertiary));
  --pe-kind-bg: color-mix(in srgb, var(--pe-kind) var(--color-tint-bg-strength-strong), var(--color-background));
  border: 1px solid var(--pe-kind-border);
}
.pe-card--info {
  --pe-kind: var(--color-informative);
  --pe-kind-fg: var(--color-informative-fg);
  --pe-kind-border: color-mix(in srgb, var(--pe-kind) var(--color-tint-border-strength), var(--color-tertiary));
  --pe-kind-bg: color-mix(in srgb, var(--pe-kind) var(--color-tint-bg-strength), var(--color-background));
  border: 1px solid var(--pe-kind-border);
}
.pe-card--structure {
  border: 1px solid var(--color-tertiary);
}

.pe-card__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.pe-card--input .pe-card__icon,
.pe-card--info .pe-card__icon {
  background: var(--pe-kind-bg);
  color: var(--pe-kind-fg);
}
.pe-card--structure .pe-card__icon { background: var(--color-secondary); color: var(--color-content-secondary); }

.pe-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pe-card__drag {
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
  cursor: grab;
}
.pe-card:hover .pe-card__drag { opacity: 1; }

.pe-card__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 150ms ease;
}
.pe-card:hover .pe-card__controls { opacity: 1; }

.pe-card__btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--color-content-secondary);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms ease, color 100ms ease;
  line-height: 1;
}
.pe-card__btn:not(.lui-button--tertiary-danger):hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
/* Prefer .lui-button--tertiary-danger for icon-only deletes (legacy .pe-card__btn--danger / .btn-hover-danger). */
.btn-hover-danger:hover           { color: var(--color-danger-fg); }

.pe-card__preview {
  border-radius: 6px;
  padding: 10px 12px;
}
.pe-card--input .pe-card__preview,
.pe-card--info .pe-card__preview {
  background: var(--pe-kind-bg);
}

.pe-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  background: var(--color-background);
  user-select: none;
  pointer-events: none;
  opacity: 0.75;
}
.pe-pill--input {
  border: 1px solid color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength-strong), var(--color-tertiary));
  color: var(--color-orange-fg);
}
.pe-pill--check {
  border: 1px solid color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
  color: var(--color-content-secondary);
  gap: 6px;
}
.pe-pill--neutral { border: 1px solid var(--color-tertiary); color: var(--color-content-secondary); }
.pe-pill__box {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-informative);
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

.pe-preview-upload {
  border: 2px dashed color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength-strong), var(--color-tertiary));
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0.6;
  color: var(--color-orange-fg);
}
.pe-preview-link {
  color: var(--color-informative);
  text-decoration: underline;
  user-select: none;
  pointer-events: none;
}
.pe-preview-info {
  border: 1px solid color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0.6;
  color: var(--color-informative);
}
.pe-preview-field {
  pointer-events: none;
  opacity: 0.6;
}
/* Click area — the label portion of the card that opens the drawer */
.pe-card__link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}
/* Type picker buttons */
.pe-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  padding: 4px 8px;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
  transition: background 100ms ease;
  color: var(--color-content);
}
.pe-type-btn:hover { background: var(--color-secondary); }
/* ── End Protocol Element Cards ────────────────────────────── */

/* ── Activation components (ADR-034) — lui-activation-card / lui-activation-row ── */
.lui-activation-card__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.lui-activation-card__icon {
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-activation-card__title-group {
  flex: 1;
  min-width: 0;
}

.lui-activation-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

.lui-activation-card__meta dt,
.lui-activation-card__meta dd {
  margin: 0;
}

.lui-activation-row__identity {
  min-width: 0;
}

.lui-activation-row__detail[hidden] {
  display: none;
}

/* Activation configuration panel — shared/activations/configuration/{panel,section,field}.
   A title + one-line explainer over a 2-column grid of section cards (1 column
   below md); `--full` sections and `--span` fields take the whole row. Used by the
   expanded library row and by the show page's Activation tab. Tokens only. */
.lui-activation-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lui-activation-config__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-activation-config__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.lui-activation-config__section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-activation-config__section > .lui-card {
  flex: 1;
}

.lui-activation-config__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 16px;
  align-content: start;
}

.lui-activation-config__field {
  min-width: 0;
}

/* The fields fill their cell: the default 420px group cap would leave a half-empty card. */
.lui-activation-config .lui-forms__group,
.lui-activation-config .lui-forms__control {
  max-width: none;
}

.lui-activation-config__value {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-activation-config__value-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.lui-activation-config__value-text--empty {
  color: var(--color-content-secondary);
}

.lui-activation-config__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .lui-activation-config__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lui-activation-config__section--full {
    grid-column: 1 / -1;
  }

  .lui-activation-config__fields--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lui-activation-config__fields--2col > .lui-activation-config__field--span {
    grid-column: 1 / -1;
  }
}
/* ── End Activation components ─────────────────────────────── */

/* ── Icon picker (native) — Material Symbols curated + search ── */
.lui-icon-picker {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.lui-icon-picker--compact {
  width: 100%;
}

.lui-icon-picker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  min-width: 7rem;
  height: var(--lui-control-height-md);
  min-height: var(--lui-control-height-md);
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
  font: inherit;
}

.lui-icon-picker--xs .lui-icon-picker__trigger {
  height: var(--lui-control-height-xs);
  min-height: var(--lui-control-height-xs);
  padding: 0 8px;
}

.lui-icon-picker--lg .lui-icon-picker__trigger {
  height: var(--lui-control-height-lg);
  min-height: var(--lui-control-height-lg);
  padding: 0 12px;
}

.lui-index-filters .lui-icon-picker__trigger,
.lui-icon-picker--compact .lui-icon-picker__trigger,
.lui-icon-picker--sm .lui-icon-picker__trigger {
  height: var(--lui-control-height-sm);
  min-height: var(--lui-control-height-sm);
  padding: 0 8px;
  min-width: 0;
}

.lui-icon-picker__trigger--compact {
  min-width: 0;
}

.lui-icon-picker__trigger:not(:disabled):hover,
.lui-icon-picker__trigger[data-state="open"] {
  background: var(--color-secondary);
}

.lui-icon-picker__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-icon-picker__leading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.lui-icon-picker__value {
  flex-shrink: 0;
  font-size: 16px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

.lui-icon-picker__label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.lui-icon-picker__placeholder {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.lui-icon-picker__trigger--has-value .lui-icon-picker__placeholder {
  display: none;
}

.lui-icon-picker__caret,
.lui-icon-picker__trigger .lui-dropdown__trigger-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--color-content-secondary);
}

.lui-icon-picker__panel.lui-dropdown__menu {
  display: none;
  flex-direction: column;
  width: min(20rem, 92vw);
  min-width: 13rem;
  max-height: min(20rem, 72vh);
  padding: 0;
  overflow: hidden;
}

.lui-icon-picker__panel.lui-dropdown__menu:not([hidden]) {
  display: flex;
}

.lui-icon-picker__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  min-height: 0;
  box-sizing: border-box;
}

.lui-icon-picker__search {
  flex-shrink: 0;
}

.lui-icon-picker__search .lui-search__field,
.lui-icon-picker__search .lui-forms__composite.lui-search__field {
  width: 100%;
  min-height: 28px;
  box-sizing: border-box;
}

.lui-icon-picker__search .lui-forms__composite.lui-search__field .lui-forms__control {
  min-height: 28px;
  padding: 4px 0;
}

.lui-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

.lui-icon-picker__option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
  line-height: 1;
  font: inherit;
  appearance: none;
}

.lui-icon-picker__option[hidden] {
  display: none;
}

.lui-icon-picker__option:not(:disabled):hover {
  background: var(--color-secondary);
}

.lui-icon-picker__option--active {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
}

.lui-icon-picker__option:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring);
}

.lui-icon-picker__option-icon {
  flex: none;
  font-size: 14px;
  width: 14px;
  height: 14px;
  overflow: hidden;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-icon-picker__empty {
  margin: 0;
  padding: 8px 4px;
  text-align: center;
}
/* ── End Icon picker ───────────────────────────────────────── */

/* ── Color picker (native) — swatch trigger + sat/hue/hex/presets panel ── */
/* Spec: .cursor/skills/🎨 frontend/loopos-ui-v2/rails-blocks/components/color_picker.md */
.lui-color-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.lui-color-picker__label { color: var(--color-content); }
.lui-color-picker__required { color: var(--color-danger); }

.lui-color-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 15.5rem; /* match __panel */
  max-width: 100%;
  height: var(--lui-control-height-md);
  padding: 0 8px 0 6px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  font: inherit;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.lui-color-picker__trigger:not(:disabled):hover,
.lui-color-picker__trigger[data-state="open"] {
  background: var(--color-secondary);
}

.lui-color-picker__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-color-picker__trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lui-color-picker__swatch {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--color-tertiary);
  background: var(--lui-swatch-fill, var(--color-secondary));
}

.lui-color-picker__value {
  flex: 1;
  min-width: 5.5ch;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-content);
}

.lui-color-picker__trigger .lui-dropdown__trigger-icon {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-content-secondary);
}

.lui-color-picker__panel.lui-dropdown__menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 15.5rem;
  padding: 12px;
}

.lui-color-picker__panel.lui-dropdown__menu[hidden] {
  display: none;
}

.lui-color-picker__area {
  position: relative;
  width: 100%;
  height: 9.5rem;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    hsl(var(--lui-hue, 0) 100% 50%);
  cursor: crosshair;
  touch-action: none;
}

.lui-color-picker__area:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-color-picker__area-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: var(--lui-swatch-fill, transparent);
  pointer-events: none;
}

.lui-color-picker__hue {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  touch-action: none;
}

.lui-color-picker__hue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-color-picker__hue-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  background: hsl(var(--lui-hue, 0) 100% 50%);
  pointer-events: none;
}

.lui-color-picker__fields { display: flex; }

.lui-color-picker__hex {
  flex: 1;
  align-items: center;
  gap: 2px;
  padding-left: 8px;
}

.lui-color-picker__hex-prefix { flex-shrink: 0; }

.lui-color-picker__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lui-color-picker__preset {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid var(--color-tertiary);
  background: var(--lui-preset-fill, var(--color-secondary));
  cursor: pointer;
  transition: transform 100ms ease;
}

.lui-color-picker__preset:hover { transform: scale(1.08); }

.lui-color-picker__preset:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

.lui-color-picker__preset[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 3px var(--color-focus-ring);
}

.lui-color-picker--disabled .lui-color-picker__trigger {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ── End Color picker ──────────────────────────────────────── */

/* Liquid autocomplete (activation settings): CodeMirror line replacing the text input */
.liquid-autocomplete {
  display: block;
  cursor: text;
}
.liquid-autocomplete:focus-within {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 1px;
}
/* CodeMirror's own completion list is light-only (a fixed light grey) while the editor
   inherits the page's text colour: in dark mode the options were near-white on
   near-white. The list follows the theme tokens instead. */
.liquid-autocomplete .cm-editor .cm-tooltip.cm-tooltip-autocomplete {
  background: var(--color-background);
  color: var(--color-content);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.liquid-autocomplete .cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li {
  padding: 2px 8px;
}
.liquid-autocomplete .cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] {
  background: var(--color-chrome-accent);
  color: var(--color-chrome-accent-fg);
}
.liquid-autocomplete .cm-editor .cm-tooltip .cm-completionDetail {
  color: var(--color-content-secondary);
  margin-left: 0.75em;
}
.liquid-autocomplete .cm-editor .cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail {
  color: inherit;
}


/* Bookings calendar — open content slot (ADR-025), page-local chrome.
   The EventCalendar time grid itself is re-skinned in the bookings_calendar
   bundle (app/javascript/bookings_calendar/bookings_calendar.css). */

/* One toolbar row: week navigation and the capacity control share a centered
   baseline and wrap as whole groups (12px) below the page header. Vertical
   rhythm comes from .lui-index-layout, so no margin here. */
.bookings-week__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bookings-week__nav,
.bookings-week__filters,
.bookings-week__capacity,
.bookings-calendar__day-nav,
.bookings-slot-panel__header,
.bookings-slot-panel__title,
.bookings-slot-panel__actions,
.bookings-slot-panel__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Capacity is a one- or two-digit value: the inline group shrinks to its
   control instead of stretching to the 420px form default, and the field keeps
   the 4.5rem readable floor used elsewhere. Label, field and Save share the
   same 8px rhythm as the week navigation. */
.bookings-week__capacity .lui-forms__group {
  width: auto;
  gap: 8px;
}

.bookings-week__capacity .lui-forms__control {
  width: 4.5rem;
  max-width: 4.5rem;
}

/* With several agendas visible the capacity leaves the toolbar for a stacked
   block, one row per agenda, and there the label is the agenda name ("entity ·
   operator email") instead of the fixed "Parallel bookings per slot". Names have
   no length limit, so the row is built to keep one shape whatever it says: the
   name is the only flexible part, and field + Save never leave each other's side
   or the end of the row. A name too long for the width wraps inside its own
   label; it never pushes the pair onto another line. */
.bookings-week__capacities {
  container-type: inline-size;
  container-name: bookings-capacity;
}

.bookings-week__capacities .bookings-week__capacity {
  flex-wrap: nowrap;
}

.bookings-week__capacities .lui-forms__group--inline {
  flex: 0 1 auto;
  min-width: 0;
}

/* `min-width: 0` plus a break inside the word: an operator email is a single
   token, and without it the label's min-content would keep the row wider than
   the card on a phone. */
.bookings-week__capacities .lui-forms__label,
.bookings-week__capacities .bookings-week__capacity-name {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Only the name gives way. The field keeps its 4.5rem and the button its label,
   so they land on the same x in every row of the block. */
.bookings-week__capacities .lui-forms__control,
.bookings-week__capacities .lui-button,
.bookings-week__capacities .bookings-week__capacity-value {
  flex-shrink: 0;
}

/* Narrow block — a phone, or the same card squeezed by a wider sidebar. Side by
   side the pair ends up wherever the name leaves it: hard right in the rows with
   a long name, tight left in the rows with a short one, which reads as three
   different rows instead of a list. Dissolving the field group with
   `display: contents` makes label, field and Save siblings in the same flex row,
   so the name takes a line of its own and the pair always starts the next one at
   the same x — whatever the name says, and in the read-only rows too. */
@container bookings-capacity (max-width: 30rem) {
  .bookings-week__capacities .bookings-week__capacity {
    flex-wrap: wrap;
  }

  .bookings-week__capacities .lui-forms__group--inline {
    display: contents;
  }

  .bookings-week__capacities .lui-forms__label,
  .bookings-week__capacities .bookings-week__capacity-name {
    flex: 1 1 100%;
  }
}

.bookings-calendar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Day-by-day navigation only exists in the single-day (small viewport) view. */
.bookings-calendar__day-nav {
  display: none;
  justify-content: space-between;
}

/* Identification block (header, state, bookings) stays tight at 8px; the
   destructive action and the booking form read as separate groups at 16px
   (8px stack gap + 8px margin). */
.bookings-slot-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bookings-slot-panel__actions,
.bookings-slot-panel__book {
  margin-top: 8px;
}

.bookings-slot-panel__header {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.bookings-slot-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bookings-slot-panel__item {
  justify-content: space-between;
  min-width: 0;
}

.bookings-slot-panel__book {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bookings-slot-panel__search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* The field shares the row with Book instead of claiming 100% and pushing it
   to a second line; it still wraps when the panel is too narrow. */
.bookings-slot-panel__search .lui-forms__control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* Results frame is empty until a search runs — do not pay the stack gap for it. */
.bookings-slot-panel__book turbo-frame:empty {
  display: none;
}

@media (max-width: 767px) {
  .bookings-calendar__day-nav {
    display: flex;
  }
}

/* ── Seeds explorer · Arquitectura — page-local diagrams ─────────────────────
   HTML + tokens instead of SVG: the nodes reuse lui-badge / copy-* so the
   density matches the rest of the page, and both themes flip for free.
   Page-local on purpose — promote to lui-* only if a second screen needs it. */

.seedsx-scroll {
  overflow-x: auto;
  padding-bottom: 2px;
}

/* Diagram 1 — which trigger covers which phase (coverage matrix).
   Rendered on shared/table/table (class on the outer wrapper); the cells are
   boxes with a 6px gap, so the table drops its own borders and padding and
   keeps a fixed layout wide enough that the four phases never crush. */
.seedsx-matrix .lui-table__table {
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
}

.seedsx-matrix .lui-table__head th,
.seedsx-matrix .lui-table__body th,
.seedsx-matrix .lui-table__body td {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow: visible;
}

.seedsx-matrix__corner {
  width: 210px;
}

/* The caption names the table for screen readers; the card heading already says it. */
.seedsx-matrix .lui-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.seedsx-phase,
.seedsx-trigger {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.seedsx-phase {
  background: var(--color-background);
}

.seedsx-trigger {
  background: var(--color-primary);
}

.seedsx-phase__order {
  display: flex;
  align-items: center;
  gap: 4px;
}

.seedsx-span {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-chrome-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-chrome-accent) 22%, transparent);
}

.seedsx-span--none {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.seedsx-span--none::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--color-tertiary);
}

/* Diagram 2 — source → mechanism → what lands in the database */
.seedsx-lane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  min-width: 760px;
}

.seedsx-lane__head {
  padding: 0 2px 2px;
}

.seedsx-lane__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content-secondary);
}

.seedsx-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.seedsx-cell--mechanism {
  background: var(--color-primary);
}

/* Diagram 3 — anatomy of one run (vertical sequence with a failure branch) */
.seedsx-steps {
  display: flex;
  flex-direction: column;
}

.seedsx-step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
}

.seedsx-step__rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.seedsx-step__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-tertiary);
}

.seedsx-step:first-child .seedsx-step__rail::before {
  top: 9px;
}

.seedsx-step:last-child .seedsx-step__rail::before {
  bottom: auto;
  height: 9px;
}

.seedsx-step__dot {
  position: relative;
  flex-shrink: 0;
  margin-top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--color-content-secondary);
}

.seedsx-step__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 14px;
}

.seedsx-step:last-child .seedsx-step__body {
  padding-bottom: 0;
}

.seedsx-branch {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  border: 1px solid color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
}

.seedsx-branch--ok {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
}

.seedsx-branch .seedsx-branch__text,
.seedsx-branch .material-symbols-rounded {
  color: var(--color-danger-fg);
}

.seedsx-branch--ok .seedsx-branch__text,
.seedsx-branch--ok .material-symbols-rounded {
  color: var(--color-success-fg);
}

/* Diagram 4 — the two paths a run's status travels */
.seedsx-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.seedsx-chain__edge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  color: var(--color-content-secondary);
}

.seedsx-chain__edge .seedsx-chain__label {
  color: var(--color-content-secondary);
}

.seedsx-chain__node {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

/* Definition pairs under the diagrams — auto-fit because this app's CSS does
   not ship the `sm:grid-cols-2` Tailwind variant. */
.seedsx-defs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px 24px;
}

.seedsx-defs > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Seeds panel — one row per seed mode: Run button on the left, Automatic
   switch on the right. A two-column grid keeps the switches aligned although
   the Run buttons differ in width; this app's CSS ships neither `w-64` nor
   `grid-cols-*`. Stacks on narrow screens. */
.lfa-seed-modes {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  align-items: center;
  gap: 8px 24px;
}

.lfa-seed-modes__row {
  display: contents;
}

@media (max-width: 640px) {
  .lfa-seed-modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Live Run seeds badge — CSS ring (LoopOS loading indicator), not a Material ligature. */
.lfa-seed-run-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: lui-button-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lfa-seed-run-spinner {
    animation: none;
  }
}

/* ── Automated QA evidence — expandable Playwright steps (admin/qa/automated#show) ── */
.lui-qa-steps__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.lui-qa-steps__title {
  display: block;
  min-width: 0;
}

/* `font-family: inherit`, not the `font` shorthand — the label span owns size/weight via copy-12. */
.lui-qa-steps__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.lui-qa-steps__toggle-icon {
  color: var(--color-foreground);
}

.lui-qa-steps__toggle:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 2px;
}

.lui-qa-steps__count {
  color: var(--color-content-secondary);
}

.lui-qa-steps__count--failed {
  color: var(--color-danger-fg);
}

.lui-qa-steps__toggle:hover .lui-qa-steps__count,
.lui-qa-steps__toggle:hover .lui-qa-steps__toggle-icon {
  color: var(--color-content);
}

/* Nested step rows: paint every cell — the `tr` fill stops short of the sticky actions gutter. */
.lui-qa-step-row,
.lui-qa-step-row > td {
  background: var(--color-secondary);
}

.lui-table--hoverable .lui-table__body-group .lui-qa-step-row:hover,
.lui-table--hoverable .lui-table__body-group .lui-qa-step-row:hover > td {
  background: var(--color-tertiary);
}

.lui-qa-step-row__order {
  padding-left: 32px;
  color: var(--color-content-secondary);
}

/* Author background beats the UA `[hidden]` rule on table rows. */
.lui-qa-step-row[hidden] {
  display: none !important;
}

/* Issue copy is a full distilled sentence — grow the row with the text, never
   ellipsis-clamp. Locators and long paths wrap inside the cell. */
.lui-table__body-group td.lui-qa-issue-cell,
.lui-table__body td.lui-qa-issue-cell {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  vertical-align: top;
}

.lui-qa-issue {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

@media (max-width: 767px) {
  .lui-qa-step-row__order {
    padding-left: 24px;
  }
}

/* ---------------------------------------------------------------------------
   LoopOS Flux Apps — documentation pages (ADR-100)
   ---------------------------------------------------------------------------
   Page-local composition for the two generic documentation pages every Flux app
   may declare: a status summary rail, an index with progress per group, a
   screenshot grid with a native `<dialog>` lightbox, and the table/diagram
   vocabulary the apps' own architecture partials write against. Everything else
   on those pages is `lui-*`. Prefix `lfa-docs-`; role tokens only, no raw hex,
   no `dark:*`.

   Replaces an app-specific block whose two pages became this framework — same
   recipes, one prefix, every app.
   ------------------------------------------------------------------------- */

.lfa-docs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.lfa-docs-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.lfa-docs-stat:hover {
  background: color-mix(in srgb, var(--color-tertiary) 35%, var(--color-primary));
}

.lfa-docs-stat--selected {
  background: var(--color-chrome-accent-muted);
}

.lfa-docs-stat--selected:hover {
  background: color-mix(in srgb, var(--color-chrome-accent) 14%, var(--color-background));
}

.lfa-docs-stat--total {
  background: var(--color-secondary);
}

.lfa-docs-stat__count {
  color: var(--color-content);
  font-variant-numeric: tabular-nums;
}

/* Phase and group rails, and the sibling-page pill. */
.lfa-docs-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* The index beside the list — the reader's first question is "what is left in
   this group", and the answer should not require reading the list. */
.lfa-docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 1100px) {
  .lfa-docs-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .lfa-docs-index {
    position: sticky;
    top: 16px;
  }
}

.lfa-docs-index {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
}

.lfa-docs-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lfa-docs-index__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lfa-docs-index__link {
  color: var(--color-content);
  text-decoration: none;
}

.lfa-docs-index__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lfa-docs-index__progress {
  font-variant-numeric: tabular-nums;
}

/* One bar per group, one segment per status, widths proportional to counts.
   The colours are the badge hues the rest of the page already uses. */
.lfa-docs-index__bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-tertiary);
}

.lfa-docs-index__bar-seg { flex-basis: 0; }
.lfa-docs-index__bar-seg--done { background: var(--color-success); }
.lfa-docs-index__bar-seg--partial { background: var(--color-warning); }
.lfa-docs-index__bar-seg--missing { background: var(--color-danger); }
.lfa-docs-index__bar-seg--blocked { background: var(--color-orange); }
.lfa-docs-index__bar-seg--unverified { background: var(--color-content-tertiary); }

.lfa-docs-group {
  scroll-margin-top: 16px;
}

.lfa-docs-group-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lfa-docs-group-counts__link {
  text-decoration: none;
}

/* Requirement cards ------------------------------------------------------- */

.lfa-docs-req {
  scroll-margin-top: 16px;
}

.lfa-docs-req__anchor {
  text-decoration: none;
}

.lfa-docs-req__anchor:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lfa-docs-req__id {
  padding: 2px 6px;
  border: 1px solid var(--color-tertiary);
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lfa-docs-req__reason {
  padding: 8px 12px;
  border-left: 2px solid var(--color-tertiary);
  background: var(--color-secondary);
  border-radius: 0 4px 4px 0;
}

.lfa-docs-req__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .lfa-docs-req__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lfa-docs-req__evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.lfa-docs-req__steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Screenshots — a thumbnail grid; the full-size image lives in a `<dialog>`
   opened by `showModal()`. No controller, no library. */
.lfa-docs-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.lfa-docs-shot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.lfa-docs-shot__button {
  padding: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}

.lfa-docs-shot__button:hover {
  border-color: var(--color-chrome-accent);
}

.lfa-docs-shot__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

/* A screenshot the YAML names but the directory does not have yet. Propshaft
   raises on a logical path it cannot resolve, so the alternative to this box is
   a 500 on the whole page. */
.lfa-docs-shot__placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 12px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lfa-docs-dialog {
  width: min(1320px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-content);
  overflow: auto;
}

.lfa-docs-dialog::backdrop {
  background: color-mix(in srgb, var(--color-content) 55%, transparent);
}

.lfa-docs-dialog__bar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lfa-docs-dialog__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Architecture page ------------------------------------------------------- */

.lfa-docs-review-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lfa-docs-contents {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
}

.lfa-docs-contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.lfa-docs-section {
  padding-top: 8px;
}

.lfa-docs-section__heading {
  scroll-margin-top: 72px;
}

/* The vocabulary an app's own `docs/architecture/_<id>.html.erb` partials write
   against — tables, lists and lane diagrams are what an architecture note is
   made of, and each app re-inventing them is how prefixes multiply. */

/* Wide tables scroll inside their own container — the page body never scrolls
   horizontally (rule `ui-tables.mdc`). */
.lfa-docs-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.lfa-docs-table {
  min-width: 720px;
}

.lfa-docs-table th,
.lfa-docs-table td {
  vertical-align: top;
  padding: 8px 10px;
}

.lfa-docs-table__struck td {
  color: var(--color-content-tertiary);
}

.lfa-docs-table__highlight {
  background: var(--color-secondary);
}

.lfa-docs-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lfa-docs-new {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--color-chrome-accent-muted);
  color: var(--color-content);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lfa-docs-diagram {
  overflow-x: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  padding: 8px;
}

.lfa-docs-diagram svg {
  min-width: 900px;
  width: 100%;
  height: auto;
}

.lfa-docs-diagram__lane rect {
  fill: var(--color-secondary);
  stroke: var(--color-tertiary);
}

.lfa-docs-diagram__lane--app rect {
  fill: color-mix(in srgb, var(--color-chrome-accent) 8%, var(--color-secondary));
}

.lfa-docs-diagram__lane-label {
  fill: var(--color-content-secondary);
  font-size: 12px;
  font-weight: 500;
}

.lfa-docs-diagram__node rect {
  fill: var(--color-background);
  stroke: var(--color-tertiary);
}

.lfa-docs-diagram__node text {
  fill: var(--color-content);
  font-size: 12px;
  text-anchor: middle;
}

.lfa-docs-diagram__sub {
  fill: var(--color-content-secondary);
  font-size: 10px;
}

.lfa-docs-diagram__node--frontend rect {
  stroke: var(--color-chrome-accent);
}

.lfa-docs-diagram__node--mr rect {
  fill: color-mix(in srgb, var(--color-chrome-accent) 12%, var(--color-background));
  stroke: var(--color-chrome-accent);
}

.lfa-docs-diagram__node--hook rect {
  fill: var(--color-secondary);
  stroke-dasharray: 4 3;
}

.lfa-docs-diagram__node--blocked rect {
  fill: var(--color-secondary);
  stroke-dasharray: 4 3;
}

.lfa-docs-diagram__node--blocked text {
  fill: var(--color-content-tertiary);
}

/* Print — "save as PDF" is the export, so there is no second renderer.
   The requirements page prints as the list; the architecture page prints as
   every section stacked, which is why the two sheets are separate. */
@media print {
  /* Chrome, filters and controls go; every card stays whole on its page;
     thumbnails print at a readable size. */
  .lui-sidebar, .lui-topbar, .lui-page-header__actions, .lui-action-bar,
  [class*="dev-tools"], .lfa-docs-filters, .lfa-docs-index, .lfa-docs-print,
  .lfa-docs-dialog {
    display: none !important;
  }

  /* The shell scrolls an inner box inside a 100vh grid; on paper that is one
     page with the rest cut off. Every ancestor of the content gives up its
     fixed height and its scroll box so the document can paginate. */
  html, body.shell-body, .lui-app-layout, .lui-app-layout__content,
  .lui-app-layout__main, .lui-app-layout__workspace,
  .lui-main-layout__content, .lui-show-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .lfa-docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfa-docs-req, .lfa-docs-shot {
    break-inside: avoid;
  }

  .lfa-docs-group {
    break-before: page;
  }

  .lfa-docs-group:first-of-type {
    break-before: auto;
  }

  .lfa-docs-req__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .lfa-docs-shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lfa-docs-shot__img {
    max-height: none;
  }

  a[href^="#"] {
    color: inherit;
  }

  /* A printed copy of the architecture page is the whole document, not the open
     tab. The tab rail is navigation and goes; the panels the rail hides come
     back, in source order, which is the order of the note. */
  .lfa-docs-architecture .lui-tabs__nav,
  .lfa-docs-architecture .lui-tabs__list,
  .lfa-docs-architecture .lfa-docs-review-note {
    display: none !important;
  }

  /* `shared/tabs/tabs` hides an inactive panel with the `hidden` attribute.
     Overriding it here — and not by removing the attribute in JS — keeps the
     screen behaviour and the accessibility tree exactly as the design system
     ships them. */
  .lfa-docs-architecture .lui-tabs__panel,
  .lfa-docs-architecture .lui-tabs__panel[hidden] {
    display: block !important;
  }

  .lfa-docs-architecture .lui-tabs__panel + .lui-tabs__panel {
    break-before: page;
  }

  .lfa-docs-contents {
    break-after: page;
  }

  /* Wide tables scroll on screen; on paper they must not be clipped. */
  .lfa-docs-table-scroll,
  .lfa-docs-diagram {
    overflow: visible !important;
  }

  .lfa-docs-table {
    min-width: 0;
    font-size: 9px;
  }

  .lfa-docs-diagram svg {
    min-width: 0;
  }

  .lfa-docs-section__heading,
  .lfa-docs-architecture .lui-alert {
    break-inside: avoid;
  }
}

/* ─── Permissions in plain language (B6.8) ──────────────────────────────────
   A permission chip says the same thing twice: the sentence an operator reads
   and the technical name an engineer greps for. Written on the design-system
   type scale, no new tokens. */

.lui-scope-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}

.lui-scope-chip {
  min-width: 0;
}

.lui-scope-chip__label {
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.lui-scope-chip__code {
  overflow-wrap: anywhere;
  /* `copy-11-mono` paints content; a technical alias beside a label is meta. */
  color: var(--color-content-secondary);
}

/* The picker rows put the code after the label on the same line — it wraps
   under it on a phone rather than pushing the row wider than the card. */
.lui-checkbox-select-all .lui-scope-chip__code {
  margin-left: 6px;
}

@media (max-width: 640px) {
  .lui-scope-chip-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Role picker cards (B6.2 / B6.3) ───────────────────────────────────────
   Page-local composition around `lui-radio` / `lui-checkbox`, not a new
   control: the input, its circle/box and its label are the design system's,
   and what this adds is the card that holds them plus the three capability
   lines underneath. Border-only elevation, tokens throughout, and the whole
   card reacts to the pointer because the whole card is the target. */

.lui-role-picker {
  display: grid;
  /* 17.5rem keeps a card readable; auto-fill drops to one column before crushing.
     start — a short card must not stretch to its neighbour and grow an empty band. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  align-items: start;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

/* Invite modal: two equal columns. The modal is 2xl so each column stays
   above the 17.5rem floor. One column below 640px. */
.lui-role-picker--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lui-role-picker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  transition: border-color 120ms ease, background 120ms ease;
  min-width: 0;
}

/* `:has()` keeps the selected state on the real input rather than on a class
   the server guessed: the card follows the radio the moment it is clicked,
   with no Stimulus and no re-render. The server class is still emitted so the
   card that comes back from a 422 is already right. */
.lui-role-picker__card:hover,
.lui-role-picker__card:has(input:hover) {
  border-color: var(--color-content-secondary);
}

.lui-role-picker__card--selected,
.lui-role-picker__card:has(input:checked) {
  border-color: var(--color-chrome-accent);
  background: var(--color-chrome-accent-muted);
}

.lui-role-picker__card:has(input:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lui-role-picker__card .lui-radio,
.lui-role-picker__card .lui-checkbox {
  align-items: flex-start;
}

/* The kit description sits 2px under the label. Inside a card that is off the
   spacing scale (4px is the helper step). */
.lui-role-picker__card .lui-radio__description,
.lui-role-picker__card .lui-checkbox__description {
  margin-top: 4px;
}

/* Name and app mark share the label row. The technical key is its own line
   under the capabilities — not a sibling in this flex, which wrapped a long
   `<app>_admin` key mid-word. The label covers the card so the padding is a
   hit target, same as protocol choice cards. */
.lui-role-picker__card .lui-radio__label,
.lui-role-picker__card .lui-checkbox__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.lui-role-picker__card .lui-radio__label::after,
.lui-role-picker__card .lui-checkbox__label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lui-role-picker__name {
  min-width: 0;
}

.lui-role-picker__key {
  margin-inline-start: 24px;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

/* Capabilities and the technical key are one block, 4px apart. The card's 8px
   gap stays between that block and the radio. */
.lui-role-picker__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bullets sit under the label text: 16px control + 8px gap. */
.lui-role-picker__capabilities {
  list-style: none;
  padding-inline-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-role-picker__capabilities li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.lui-role-picker__tick {
  font-size: 14px;
  line-height: 14px;
  flex: none;
  color: var(--color-success-fg);
}

@media (max-width: 640px) {
  .lui-role-picker {
    grid-template-columns: 1fr;
  }

  .lui-role-picker--two-col {
    grid-template-columns: 1fr;
  }
}

/* Operator Authorization tab: roles on the left, Total (effect) on the right.
   Page-local composition around checkbox + scope chips. Tokens only. */
.lui-auth-split {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
  min-inline-size: 0;
}

.lui-auth-split__roles,
.lui-auth-split__detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lui-auth-split__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  overflow: hidden;
}

.lui-auth-split__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-tertiary);
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.lui-auth-split__item:last-child {
  border-bottom: 0;
}

.lui-auth-split__item--current {
  background: var(--color-chrome-accent-muted);
}

/* Permission cards on the right: the picker shell drops away so each pack
   reads as a tab card. The left rail stays on the list, not on these cards. */
.lui-auth-scopes.lui-checkbox-select-all,
.lui-auth-scopes.lui-checkbox-select-all--readonly {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.lui-auth-scopes .lui-checkbox-select-all__search {
  padding: 0 0 12px;
  border-bottom: 0;
}

.lui-auth-scopes.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
  padding: 0;
  gap: 12px;
}

.lui-auth-scopes .lui-checkbox-select-all__section-group {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  overflow: hidden;
}

.lui-auth-scopes .lui-checkbox-select-all__section-trigger {
  padding: 12px;
  border-radius: 0;
  background: var(--color-background);
}

.lui-auth-scopes .lui-accordion__item[data-state="open"] > .lui-accordion__heading .lui-checkbox-select-all__section-trigger {
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-auth-split__role-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-auth-split__item .lui-checkbox {
  flex: none;
}

.lui-auth-split__focus {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.lui-auth-split__focus-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.lui-auth-split__item--total {
  width: 100%;
}

.lui-auth-split__pane[hidden] {
  display: none;
}

.lui-auth-split__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
}

.lui-auth-split__summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@media (max-width: 640px) {
  .lui-auth-split {
    grid-template-columns: 1fr;
  }

  .lui-auth-split__summary {
    grid-template-columns: 1fr;
  }
}

/* ─── Roles × permissions matrix (B6.6) ─────────────────────────────────────
   A wide read-only grid on shared/table/table (class on the outer wrapper): the
   viewport scrolls sideways inside its own region (drag-to-scroll, edge fades
   and the persistent scrollbar come from the shared table), and the permission
   column stays put so a tick in the tenth role column still has a name attached
   to it. Bounded height keeps the role header sticky while the rows scroll. */

.lui-roles-matrix .lui-table__table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Separate borders: the row divider moves from the <tr> to its cells. */
.lui-roles-matrix .lui-table__body tr {
  border-top: 0;
}

.lui-roles-matrix .lui-table__body th,
.lui-roles-matrix .lui-table__body td {
  border-top: 1px solid var(--color-tertiary);
}

.lui-roles-matrix .lui-table__body tr:first-child th,
.lui-roles-matrix .lui-table__body tr:first-child td {
  border-top: 0;
}

.lui-roles-matrix .lui-table__head .lui-roles-matrix__corner,
.lui-roles-matrix .lui-table__body .lui-roles-matrix__permission {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-background);
  text-align: left;
  min-width: 240px;
  max-width: 280px;
  border-right: 1px solid var(--color-tertiary);
}

.lui-roles-matrix .lui-table__head .lui-roles-matrix__corner {
  z-index: 4;
  background: var(--color-primary);
}

.lui-roles-matrix .lui-table__head .lui-roles-matrix__role {
  z-index: 3;
  background: var(--color-primary);
  text-align: left;
  vertical-align: bottom;
  min-width: 8.5rem;
  max-width: 11rem;
  white-space: normal;
}

.lui-roles-matrix .lui-table__body .lui-roles-matrix__cell {
  text-align: center;
  min-width: 8.5rem;
  vertical-align: middle;
}

.lui-roles-matrix__role-trigger {
  display: block;
  min-width: 0;
  width: 100%;
}

.lui-roles-matrix__role-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.lui-roles-matrix__role-title {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.lui-roles-matrix__role-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-align: left;
  min-width: 0;
}

.lui-roles-matrix__role-key {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-roles-matrix .lui-roles-matrix__section th {
  background: var(--color-primary);
}

/* Never meaning in colour alone: the tick is an icon with an accessible name,
   and the absence is an em dash plus screen-reader text. */
.lui-roles-matrix__yes {
  font-size: 18px;
  line-height: 18px;
  color: var(--color-success-fg);
}

@media (prefers-reduced-motion: no-preference) {
  .lui-roles-matrix .lui-table__scroll {
    scroll-behavior: smooth;
  }
}

/* The caption names the grid for screen readers (it was sr-only before the
   shared table); the hint above already says it to sighted readers. */
.lui-roles-matrix .lui-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Say that it scrolls (B6.6, UX it1 #17): at 390px the grid is ~1015px wide
   inside a 356px box and a fade is an affordance only for someone already
   looking for one, so the hint is also spelled out in words. */
.lui-roles-matrix__hint {
  color: var(--color-content-secondary);
}

@media (min-width: 1024px) {
  /* Wide enough that the grid usually fits; the hint would be noise. */
  .lui-roles-matrix__hint {
    display: none;
  }
}

/* The cost of a fork reads as a caveat, not as one more reassurance in the
   same grey as the three above it (UX it1 #18). */
.lui-role-fork__cost {
  color: var(--color-warning-fg);
}

/* FluxNotes / FluxGraph tab label (FluxBrandHelper).
   The word itself is plain tab text — same font, weight and colour as every
   other tab, in every state. The only brand cue is one clipped copy of the
   word (data-text): a rainbow glint in the LoopOS AI palette
   (`--lui-ai-beam-*`) with a white core, sweeping once every 4.5s.
   background-size is 260%, and the band sits between 43% and 58% so it is
   fully off the word at both ends of the pass. A 0.6px white drop-shadow
   rides those pixels only — there is no second, blurred copy of the word. */
.flux-brand {
  --flux-brand-shimmer-duration: 4.5s;
  --lui-ai-beam-cyan:   rgb(0, 197, 255);
  --lui-ai-beam-teal:   rgb(0, 216, 181);
  --lui-ai-beam-yellow: rgb(255, 203, 51);
  --lui-ai-beam-orange: rgb(242, 115, 53);
  --lui-ai-beam-red:    rgb(228, 45, 39);
  --lui-ai-beam-purple: rgb(128, 68, 255);
  --lui-ai-beam-blue:   rgb(0, 114, 255);

  position: relative;
  z-index: 0;
  display: inline-block;
}

.flux-brand::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    108deg,
    transparent 0%,
    transparent 43%,
    color-mix(in srgb, var(--lui-ai-beam-cyan) 80%, white) 46.5%,
    color-mix(in srgb, var(--lui-ai-beam-teal) 80%, white) 47.8%,
    color-mix(in srgb, var(--lui-ai-beam-yellow) 90%, white) 49.2%,
    white 50%,
    color-mix(in srgb, var(--lui-ai-beam-orange) 80%, white) 50.8%,
    color-mix(in srgb, var(--lui-ai-beam-red) 80%, white) 52.2%,
    color-mix(in srgb, var(--lui-ai-beam-purple) 80%, white) 53.5%,
    color-mix(in srgb, var(--lui-ai-beam-blue) 80%, white) 54.8%,
    transparent 58%,
    transparent 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.95));
  animation: flux-brand-shimmer var(--flux-brand-shimmer-duration) ease-in-out infinite;
}

/* The band crosses the word in the first ~40% of the cycle and rests for the
   rest, so the shimmer reads as one pass every 4.5s rather than a constant glint. */
@keyframes flux-brand-shimmer {
  0%   { background-position: 100% 0; }
  40%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .flux-brand::after {
    display: none;
  }
}

/* Bar chart — daily series as inline SVG (no chart library): one <rect> per day, its
   height set by an SVG attribute, so no inline style. Used by the budget groups
   analysis. */
.lui-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-bar-chart__svg {
  display: block;
  width: 100%;
  height: 160px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-bar-chart__bar {
  fill: var(--color-informative);
  opacity: 0.8;
}

.lui-bar-chart__bar:hover {
  opacity: 1;
}

/* A bar that reached the limit, and the limit line (budget group analysis). */
.lui-bar-chart__bar--limit {
  fill: var(--color-danger);
}

.lui-bar-chart__limit {
  stroke: var(--color-danger);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

/* Stacked daily chart (budget groups dashboard): a group is one series colour, set as
   `--series-color` on the bar and on its legend swatch, so both always agree. */
.lui-bar-chart__bar--s1 { --series-color: var(--color-informative); }
.lui-bar-chart__bar--s2 { --series-color: var(--color-purple); }
.lui-bar-chart__bar--s3 { --series-color: var(--color-success); }
.lui-bar-chart__bar--s4 { --series-color: var(--color-warning); }
.lui-bar-chart__bar--s5 { --series-color: var(--color-orange); }
.lui-bar-chart__bar--s6 { --series-color: var(--color-informative-fg); }

.lui-bar-chart__bar--stacked {
  fill: var(--series-color);
  opacity: 0.9;
}

.lui-bar-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-bar-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lui-bar-chart__swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--series-color);
}

/* Page layout helpers of the admin batch-summaries pages (app-level, not `lui-*` components, so no loopos-ui-v2
   sync): two cards side by side where there is room, stacked where there is not — a pair of tables
   under a dashboard row. This app's CSS ships no `lg:grid-cols-2` Tailwind variant. */
.flux-card-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 16px;
  align-items: start;
}

.flux-card-pair > * {
  min-width: 0;
}

/* Label/value pairs of a record's metadata (`<dl>`): as many columns as fit, one on a phone;
   `flux-defs-grid__wide` spans the row (an id, a list of ids). */
.flux-defs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 12px 24px;
  margin: 0;
}

.flux-defs-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.flux-defs-grid > .flux-defs-grid__wide {
  grid-column: 1 / -1;
}

/* How full a budget limit is: a small native progress bar beside its number, toned by
   threshold (ok < 50, watch from 50, high from 80, limit at 100). */
.lui-budget-meter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lui-budget-meter__value {
  min-width: 3.5ch;
  text-align: right;
}

.lui-budget-meter__bar {
  --meter-fill: var(--color-success);
  appearance: none;
  -webkit-appearance: none;
  width: 64px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-tertiary);
  color: var(--meter-fill);
}

.lui-budget-meter__bar::-webkit-progress-bar {
  background: var(--color-tertiary);
  border-radius: 999px;
}

.lui-budget-meter__bar::-webkit-progress-value {
  background: var(--meter-fill);
  border-radius: 999px;
}

.lui-budget-meter__bar::-moz-progress-bar {
  background: var(--meter-fill);
  border-radius: 999px;
}

.lui-budget-meter__bar--watch { --meter-fill: var(--color-warning); }
.lui-budget-meter__bar--high { --meter-fill: var(--color-orange); }
.lui-budget-meter__bar--limit { --meter-fill: var(--color-danger); }

/* Agent Test Lab — the tab where an agent is run by hand (agents_portal/agents/_test_lab).
   Two columns from 1280 px: the test's configuration, then the result. The page scrolls once;
   the result card does not keep a scroll of its own. */
.lui-test-lab,
.lui-test-lab__form,
.lui-test-lab__config {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.lui-test-lab__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.lui-test-lab__result {
  min-width: 0;
}

@media (min-width: 1280px) {
  .lui-test-lab__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* A wrapper so a disabled button can still say why (its `title`). */
.lui-test-lab__gate {
  display: inline-flex;
}

/* «Prompt composition» (`integrations/shared/runs/_prompt_sections`): the blocks of context under the context
   parameter that carries them — indented, quieter, not counted in the total. */
.lui-prompt-section--nested .lui-table__cell:first-child {
  padding-left: 28px;
}

.lui-prompt-section__indent {
  margin-right: 6px;
  color: var(--color-content-secondary);
}

/* A parameter's field, then — for an inferred one — what the source gave (size, cut) and the ways back to
   it («Edit» a long one, «Reset to inferred»), and the web search guardrail's warning. */
.lui-test-lab-param {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lui-test-lab-param [hidden] {
  display: none !important;
}

.lui-test-lab-param__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  min-height: 24px;
}

.lui-test-lab-param__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* A long inferred value, read-only until «Edit»: it reads as a value, not as a field to type in. */
.lui-test-lab-param textarea[readonly] {
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

/* The object picker: one field that shows the choice on one line and is where one searches. */
.lui-test-lab-picker {
  position: relative;
  width: 100%;
}

.lui-test-lab-picker__shell {
  gap: 6px;
  padding: 0 8px;
  cursor: text;
}

.lui-test-lab-picker__shell:has(.lui-test-lab-picker__input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

.lui-test-lab-picker__icon,
.lui-test-lab-picker__chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-content-secondary);
}

.lui-test-lab-picker__chevron {
  transition: transform 200ms ease;
}

.lui-test-lab-picker__shell:has(.lui-test-lab-picker__input[aria-expanded="true"]) .lui-test-lab-picker__chevron {
  transform: rotate(180deg);
}

.lui-test-lab-picker__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  text-overflow: ellipsis;
}

.lui-test-lab-picker__input:disabled {
  cursor: not-allowed;
}

/* A popover of its own (top layer): placed and sized by the script, at most 320 px tall, the list scrolls inside. */
.lui-test-lab-picker__menu {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  color-scheme: light dark;
}

.lui-test-lab-picker__menu:popover-open {
  display: flex;
  flex-direction: column;
}

.lui-test-lab-picker__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.lui-test-lab-picker__option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.lui-test-lab-picker__option:hover,
.lui-test-lab-picker__option[data-active] {
  background: var(--color-secondary);
}

.lui-test-lab-picker__option[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--color-content);
}

.lui-test-lab-picker__option-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lui-test-lab-picker__option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-test-lab-picker__option .lui-test-lab-picker__option-code,
.lui-test-lab-picker__option .lui-test-lab-picker__option-meta {
  color: var(--color-content-secondary);
}

.lui-test-lab-picker__option-code {
  flex-shrink: 0;
}

.lui-test-lab-picker__option-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-test-lab-picker__empty {
  padding: 12px 8px;
  text-align: center;
}

.lui-test-lab-picker__status {
  flex: none;
  padding: 6px 12px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-test-lab-picker__status[hidden] {
  display: none;
}

/* What was chosen: kind, name, readable id and short uuid, with «Open» and «Clear». */
.lui-test-lab-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-test-lab-summary[hidden],
.lui-test-lab-summary [hidden] {
  display: none !important;
}

.lui-test-lab-summary__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lui-test-lab-summary__line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-test-lab-summary__line > .lui-badge {
  flex-shrink: 0;
}

.lui-test-lab-summary__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-test-lab-summary__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-content-secondary);
}

.lui-test-lab-summary__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}
/* Options table stays inside the card: the shared column floor plus a
   fixed value field were wider than the tab, so the scrollport grew. */
.catalog-options-table.lui-table .lui-table__table {
  table-layout: fixed;
  width: 100%;
}

.catalog-options-table.lui-table .lui-table__head th:not(.lui-table__th--actions),
.catalog-options-table.lui-table .lui-table__body td:not(.lui-table__cell--actions) {
  min-width: 0 !important;
}

.catalog-options-board .catalog-options-check {
  width: 2.75rem;
}

.catalog-options-table .catalog-options-name {
  width: 8.5rem;
}

.catalog-options-table .catalog-options-value-field {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 10rem;
}

.catalog-options-table .catalog-options-value-field .lui-forms__control {
  max-width: none;
}

/* Product options tab — value hover and unsaved combination rows. */
.catalog-options-board [data-catalog-options-token].is-hot .lui-badge {
  background: color-mix(in srgb, var(--color-content) 10%, var(--color-background));
  color: var(--color-content);
  border-color: var(--color-content);
}

.catalog-options-board tr.is-hot td {
  background: var(--color-secondary);
}

.catalog-options-board tr.catalog-options-preview td {
  background: color-mix(in srgb, var(--color-informative) 8%, var(--color-background));
}

.catalog-options-board tr.catalog-options-preview.is-hot td {
  background: var(--color-secondary);
}

/* lui-ai-card — what happened after a 👍/👎: a thumb in the vote's colour, who and when; on a 👎 one compact
   «what was wrong» field with a send button. */
.lui-ai-card__feedback-result {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.lui-ai-card__feedback-result-icon {
  font-size: 16px;
}

.lui-ai-card__feedback-result--up .lui-ai-card__feedback-result-icon,
.lui-ai-card__feedback-result--up .lui-ai-card__feedback-result-text {
  color: var(--color-success);
}

.lui-ai-card__feedback-result--down .lui-ai-card__feedback-result-icon,
.lui-ai-card__feedback-result--down .lui-ai-card__feedback-result-text {
  color: var(--color-warning);
}

.lui-ai-card__feedback-form {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.3));
  border-radius: 8px;
  background: var(--color-background);
}

.lui-ai-card__feedback-form:focus-within {
  border-color: var(--color-content);
}

.lui-ai-card__feedback-input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 120px;
  padding: 6px 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--color-content);
}

.lui-ai-card__feedback-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  color: var(--color-secondary-content, currentColor);
}

.lui-ai-card__feedback-send:hover {
  background: var(--color-secondary);
}

.lui-ai-card__feedback-send .material-symbols-rounded {
  font-size: 18px;
}

.lui-ai-card__feedback-comment {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-ai-card__feedback-comment .material-symbols-rounded {
  font-size: 16px;
  opacity: 0.6;
}

/* «Conversa» tab of an agent run's page (agents/runs/_chat_tab): the whole chat, oldest first. */
.agent-run-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.agent-run-chat__turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.agent-run-chat__turn--user {
  align-self: flex-end;
  align-items: flex-end;
  max-width: 88%;
}

.agent-run-chat__turn--assistant {
  align-self: stretch;
}

/* This run's answer (boxed) and the question before it (its bubble gets a border). */
.agent-run-chat__turn--assistant.agent-run-chat__turn--current {
  border-color: var(--color-border, rgba(127, 127, 127, 0.35));
  background: var(--color-secondary);
}

.agent-run-chat__turn--user.agent-run-chat__turn--current .agent-run-chat__bubble {
  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.5));
}

.agent-run-chat__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.agent-run-chat__bubble {
  padding: 6px 10px;
  border-radius: 10px 10px 2px 10px;
  background: var(--color-secondary);
  color: var(--color-content);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agent-run-chat__answer {
  overflow-wrap: anywhere;
}

/* --- References grid (Agents::ReferencesGridComponent, `lui-references`) -------------------------------------
   The pages, manuals, videos and images an agent cited, wherever a surface shows them: a `<details>` over a grid
   of cards, two per row, one under 480 px or in a container narrower than 420 px. One card: the thumbnail box on
   the left (an inline thumbnail, else the kind's icon), then the title (the link), the host and why it helps. */
.lui-references {
  /* Its own width decides the columns (the grid query below): a docked column on a wide screen is still narrow. */
  container: lui-references / inline-size;
  min-width: 0;
  padding-top: 4px;
  border-top: 1px solid var(--color-tertiary);
}

.lui-references[hidden] {
  display: none;
}

/* The header (`Agents::ReferencesHeaderComponent`): the LoopOS AI brand row, the title and the source line — the
   same on a card and in a modal's heading. On a card it closes with the hairline the modal's header has. */
.lui-references__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
}

/* Title left, LoopOS AI mark right — the same header line as the page's other cards. */
.lui-references__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lui-references__title-row > .lui-ai-summary-card__brand {
  flex-shrink: 0;
}

.lui-references__description {
  max-width: 60ch;
}

.lui-references--headed {
  padding-top: 0;
  border-top: 0;
}

.lui-references--headed > .lui-references__header {
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-references__summary {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  color: var(--color-content);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.lui-references__summary::-webkit-details-marker {
  display: none;
}

.lui-references__summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.lui-references__chevron {
  display: inline-flex;
  color: var(--color-content-secondary);
  transition: transform 0.15s ease;
}

.lui-references__details[open] .lui-references__chevron {
  transform: rotate(90deg);
}

.lui-references__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

/* One card: the thumbnail box on the left (an inline (data:) thumbnail, else the kind's icon — the box stands for
   the kind: a play glyph on a video's thumbnail, a file glyph on a manual's or a document's), then the text. */
.lui-references__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
}

/* The address answered 404/410: flagged, not hidden — a dashed amber card, the title muted, a warning says why. */
.lui-references__card--unreachable {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength-loud), var(--color-background));
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength-subtle), var(--color-background));
}

/* The card's mini header: the kind's glyph and name over a hairline, the full width of the card. */
.lui-references__kind {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-tertiary);
  color: var(--color-content-secondary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
}

.lui-references__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lui-references__thumb {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-references__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A real picture sits on white in both themes (a PDF page, a transparent PNG). */
.lui-references__thumb--image {
  background: #fff;
}

.lui-references__badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff; /* ui-lint: allow — glyph on a fixed dark overlay, the same in both themes */
  pointer-events: none;
}

.lui-references__link--unreachable {
  color: var(--color-content-secondary);
}

.lui-references__unreachable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-warning-fg);
}

/* Underlined at rest: the accent is the content colour on some themes, and the title must read as a link. */
.lui-references__link {
  display: block;
  color: var(--color-chrome-accent);
  text-decoration: underline;
  text-decoration-color: var(--color-tertiary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.lui-references__link:hover {
  text-decoration-color: currentColor;
}

.lui-references__link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.lui-references__host {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The card's second row: why it helps, over the full width, in full — the model is asked to keep it short. */
.lui-references__why {
  grid-column: 1 / -1;
  color: var(--color-content);
  overflow-wrap: anywhere;
  white-space: normal;
}

.lui-references__title {
  margin: 0;
  padding: 6px 0;
  color: var(--color-content);
}

@media (max-width: 480px) {
  .lui-references__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lui-references__thumb {
    width: 48px;
    height: 56px;
  }
}

/* A wide container (the references modal): three to a row. */
@container lui-references (min-width: 900px) {
  .lui-references__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Narrow containers that are not narrow screens (a docked column on a laptop). */
@container lui-references (max-width: 420px) {
  .lui-references__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lui-references__chevron {
    transition: none;
  }
}

/* Incidences (ADR-179) — shared by every app's process screen ------------- */
.incidence-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.incidence-card {
  border-color: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength-strong), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-orange) 6%, var(--color-background));
}

.incidence-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 0;
}

.incidence-card__icon {
  color: var(--color-orange-fg);
}

.incidence-card__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incidence-card__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.incidence-card__item + .incidence-card__item {
  border-top: 1px solid var(--color-tertiary);
}

.incidence-card__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.incidence-history__notes {
  --lui-table-text-col-floor: 14rem;
}

/* A tag after the brand of a lui-ai-card (`brand_suffix:`), on the brand's own row. */
.lui-ai-card__brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}