/* 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;
  --color-admin-sidebar-bg: #242628;
  --color-admin-sidebar-surface: #2d3032;
  --color-admin-sidebar-hover: #35383b;
  --color-admin-sidebar-active: #414549;
  --color-admin-sidebar-border: #45494d;
  --color-admin-sidebar-fg: #f7f8f8;
  --color-admin-sidebar-muted: #bcc0c3;
  /* Optional content column cap — opt in via .lui-content-width (My Account first; shell rollout later). */
  --lui-content-max-width: 1200px;
  --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%;
  --color-admin-sidebar-bg: #fcfcfc;
  --color-admin-sidebar-surface: #fcfcfc;
  --color-admin-sidebar-hover: #f6f6f6;
  --color-admin-sidebar-active: #e7e7e7;
  --color-admin-sidebar-border: #e7e7e7;
  --color-admin-sidebar-fg: #181818;
  --color-admin-sidebar-muted: #6d6d6d;
}

/* 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);
}

/* Nested Validation frame (gallery pattern) — brand-forward primary on descendants. */
[data-app="validation"] {
  --color-app: #009e8c;
  --color-app-fg: #ffffff;
  --color-app-gradient-light: #00d8b6;
  --color-app-gradient-dark: #059898;
}

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

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;
}

body.shell-body {
  height: 100vh;
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
}
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;
  color: transparent; /* ligature text never visible; slot size preserved via 1em box */
}

html.material-symbols-ready .material-symbols-rounded {
  color: unset;
}

.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).
     Do not reveal via html.material-symbols-ready — that flag only means Rounded is ready. */
  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;
}

/* 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; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
.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; }
.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); }

.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 */
.lui-toast-region {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
}

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

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

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

.lui-toast-region--bottom-center {
  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 {
  bottom: 0;
  left: 16px;
  margin-bottom: 16px;
  width: min(24rem, calc(100% - 32px));
}

.lui-toast-region--bottom-right {
  bottom: 0;
  right: 16px;
  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); }

/* Beat material-symbols-ready color:unset — toast icons keep semantic variant color */
html.material-symbols-ready .lui-toast--default .lui-toast__icon.material-symbols-rounded { color: var(--color-foreground); }
html.material-symbols-ready .lui-toast--success .lui-toast__icon.material-symbols-rounded { color: var(--color-success); }
html.material-symbols-ready .lui-toast--error .lui-toast__icon.material-symbols-rounded,
html.material-symbols-ready .lui-toast--danger .lui-toast__icon.material-symbols-rounded { color: var(--color-danger); }
html.material-symbols-ready .lui-toast--info .lui-toast__icon.material-symbols-rounded { color: var(--color-informative); }
html.material-symbols-ready .lui-toast--warning .lui-toast__icon.material-symbols-rounded { color: var(--color-warning); }
html.material-symbols-ready .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;
}

/* 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 {
  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--neutral--tertiary {
  background: transparent;
  color: var(--color-content);
  border-color: transparent;
}

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

/* 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%;
}

.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); }

.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,
button.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,
button.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,
button.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);
}

/* 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;
}

/* 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;
}

.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.
 *
 * ⚠️ Não vale para a superfície do consumidor Darty: essa não carrega esta
 * folha (ADR-026) e passa `css[:form]`/`css[:bool]` próprios (`dmi-*`), com o
 * seu próprio tratamento de cartão em vermelho Darty no CSS do pack. */
.protocol-answer-form .lui-radio-group,
.protocol-answer-form .protocol-answer-bool {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.protocol-answer-form .lui-radio-group .lui-radio,
.protocol-answer-form .protocol-answer-bool > label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
}

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

.protocol-answer-form .lui-radio-group .lui-radio:has(input:checked),
.protocol-answer-form .protocol-answer-bool > label:has(input:checked) {
  border-color: var(--color-content);
  box-shadow: inset 0 0 0 1px var(--color-content);
}

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

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

/* O multi-select do kit não usa `lui-checkbox`: são `label > input` directos
   dentro do contentor `css[:bool]`, logo o input aqui é o nativo. */
.protocol-answer-form .protocol-answer-bool > label > input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-content);
  cursor: pointer;
}

.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;
  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);
  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 no intake do Darty (superfície do consumidor, mesmo markup) — UAT de
   2026-08-18. */
.protocol-answer-form .lui-radio-group .lui-radio__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ó — os protocolos de diagnóstico da Darty 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%; }

.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;
}

.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; }

/* Beat material-symbols-ready color:unset — mark must stay on brand foreground */
html.material-symbols-ready .lui-checkbox__box .lui-checkbox__mark,
html.material-symbols-ready .lui-checkbox__input:checked ~ .lui-checkbox__box .material-symbols-rounded,
html.material-symbols-ready .lui-checkbox > input[type="checkbox"]:checked:not(.lui-checkbox__input) + .lui-checkbox__box .material-symbols-rounded {
  color: var(--color-app-fg);
}

/* 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;
}

.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:not(:disabled):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 ~ .lui-radio__circle {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.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--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);
}

.lui-inline-edit__field textarea.lui-inline-edit__input--edit {
  width: 100%;
  min-height: 6rem;
}

.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 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[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;
}

.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--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 + .lui-setup-hub__group {
  border-top: 1px solid var(--color-tertiary);
}

.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 — Ace 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%;
}

.dmt-queue-kpis {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.dmt-queue-kpis .lui-kpi {
  gap: 4px;
  padding: 8px 12px;
}

.dmt-queue-age {
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}

.dmt-queue-age .lui-date-show,
.dmt-queue-age .lui-badge {
  flex-shrink: 0;
}

.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));
  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;
}

/* 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;
}

.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;
}

.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__spinner {
  display: none;
}

/* 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;
  max-width: none;
  padding: 8px 16px;
  background: var(--color-primary);
  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;
}

.lui-table__cell--actions {
  width: 0;
  max-width: 0;
  padding: 0;
  border: none;
  overflow: visible;
  position: sticky;
  right: 0;
  z-index: 6;
  vertical-align: middle;
  /* Opaque so horizontally scrolled cells do not show through the actions gutter. */
  background: var(--color-background);
}

.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: var(--color-secondary);
}

.lui-table__cell--actions .lui-table__actions {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding-left: 24px;
  /* Match row/table surface — was always --color-secondary (hover tint) + transparent fade. */
  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). */
.lui-table--hoverable .lui-table__body tr:hover .lui-table__actions:not(:empty),
.lui-table--hoverable .lui-table__body tr:focus-within .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:focus-within .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:focus-within .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:focus-within .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:focus-within .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:focus-within .lui-table__actions:not(:empty) {
  opacity: 1;
}

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

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

/* 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%;
}

.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 .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;
}

.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__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;
}

.lui-app-layout__content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.lui-app-layout__main {
  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%;
}

.lui-sidebar__admin-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

/* 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;
}

.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 {
  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;
}

.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;
}

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

.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__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;
}

/* Spinner while the nested photo is in flight (Active Storage redirect). */
span.lui-avatar.lui-avatar--loading {
  background: var(--color-secondary);
}

span.lui-avatar.lui-avatar--loading > img {
  opacity: 0;
}

.lui-avatar__spinner {
  display: none;
}

.lui-avatar__spinner,
.lui-thumbnail__spinner {
  position: absolute;
  inset: 0;
  width: 62%;
  height: 62%;
  max-width: 22px;
  max-height: 22px;
  margin: auto;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 2px solid color-mix(in srgb, var(--color-content) 25%, transparent);
  border-top-color: var(--color-content);
  pointer-events: none;
}

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

span.lui-avatar.lui-avatar--loading > .lui-avatar__spinner,
.lui-thumbnail--loading > .lui-thumbnail__spinner {
  display: block;
  animation: lui-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  span.lui-avatar.lui-avatar--loading > .lui-avatar__spinner,
  .lui-thumbnail--loading > .lui-thumbnail__spinner {
    animation: none;
    border-color: var(--color-content-secondary);
  }
}

/* @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;
  z-index: 50;
}

.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);
}

/* Platform Admin Graphite sidebar — scoped modifier keeps tenant chrome unchanged. */
.lui-sidebar--platform-admin :is(.lui-sidebar__rail, .lui-sidebar__panel) {
  border-color: var(--color-admin-sidebar-border);
  background: var(--color-admin-sidebar-bg);
  color: var(--color-admin-sidebar-fg);
}

.lui-sidebar--platform-admin :is(
  .lui-sidebar__summary,
  .lui-sidebar__panel-header,
  .lui-sidebar__chrome-bar,
  .lui-sidebar__footer
) {
  border-color: var(--color-admin-sidebar-border);
}

.lui-sidebar--platform-admin :is(.lui-sidebar__summary, .lui-sidebar__panel-header) {
  background: var(--color-admin-sidebar-surface);
}

.lui-sidebar--platform-admin :is(
  .copy-13,
  .copy-13-medium,
  .copy-12,
  .copy-12-medium,
  .copy-11,
  .button-13,
  .button-12,
  .lui-sidebar__row,
  .lui-sidebar__item,
  .lui-sidebar__collapse-btn,
  .lui-sidebar__close,
  .lui-sidebar__chev,
  .lui-sidebar__icon
) {
  color: var(--color-admin-sidebar-fg);
}

.lui-sidebar--platform-admin :is(
  .lui-sidebar__admin-identity,
  .lui-sidebar__section-toggle,
  .lui-sidebar__collapse-icon
) {
  color: var(--color-admin-sidebar-muted);
}

html:not([data-theme="dark"]) .lui-sidebar--platform-admin .lui-sidebar__brand-mark .lui-wordmark__img--light,
html[data-theme="dark"] .lui-sidebar--platform-admin .lui-sidebar__brand-mark .lui-wordmark__img--dark {
  display: none;
}

html:not([data-theme="dark"]) .lui-sidebar--platform-admin .lui-sidebar__brand-mark .lui-wordmark__img--dark,
html[data-theme="dark"] .lui-sidebar--platform-admin .lui-sidebar__brand-mark .lui-wordmark__img--light {
  display: block;
}

.lui-sidebar--platform-admin :is(
  .lui-sidebar__row--trigger,
  .lui-sidebar__item,
  .lui-sidebar__section-toggle,
  .lui-sidebar__collapse-btn,
  .lui-sidebar__close
):hover {
  background: var(--color-admin-sidebar-hover);
  color: var(--color-admin-sidebar-fg);
}

.lui-sidebar--platform-admin :is(
  .lui-sidebar__item--active,
  .lui-sidebar__row--trigger:active,
  .lui-sidebar__row--trigger[data-state="open"],
  .lui-sidebar__row--trigger.lui-sidebar__row--active
) {
  background: var(--color-admin-sidebar-active);
  color: var(--color-admin-sidebar-fg);
}

/* Open tenant/account triggers otherwise tint glyphs with the Flux chrome
   accent (gray-950), which vanishes on Graphite. Keep admin foreground. */
.lui-sidebar--platform-admin :is(
  .lui-sidebar__row--trigger:active,
  .lui-sidebar__row--trigger[data-state="open"],
  .lui-sidebar__row--trigger.lui-sidebar__row--active
) :is(.lui-sidebar__icon:not(.lui-avatar), .lui-sidebar__chev) {
  color: var(--color-admin-sidebar-fg);
}

.lui-sidebar--platform-admin :is(
  .lui-sidebar__item,
  .lui-sidebar__section-toggle,
  .lui-sidebar__row--trigger,
  .lui-sidebar__collapse-btn,
  .lui-sidebar__close,
  .lui-sidebar__account-link
):focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-admin-sidebar-bg),
    0 0 0 4px var(--color-admin-sidebar-fg);
}

.lui-sidebar--platform-admin :is(.lui-avatar, .lui-sidebar__account-badge) {
  background: var(--color-admin-sidebar-active);
  color: var(--color-admin-sidebar-fg);
}

.lui-sidebar--platform-admin .lui-scroll-edge {
  --lui-scroll-edge-surface: var(--color-admin-sidebar-bg);
}

.lui-sidebar--platform-admin.lui-floating-scroll-host:hover .lui-floating-scroll,
.lui-sidebar--platform-admin.lui-floating-scroll-host:focus-within .lui-floating-scroll {
  scrollbar-color: color-mix(in srgb, var(--color-admin-sidebar-fg) 48%, transparent) transparent;
}

.lui-sidebar--platform-admin.lui-floating-scroll-host:hover .lui-floating-scroll::-webkit-scrollbar-thumb,
.lui-sidebar--platform-admin.lui-floating-scroll-host:focus-within .lui-floating-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-admin-sidebar-fg) 48%, transparent);
}

.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;
}

.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;
}

.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);
}

.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;
}

.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;
}

.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 {
  display: block;
  width: 100%;
  min-height: var(--lui-autogrow-min, 2.5rem);
  max-height: var(--lui-autogrow-max, 13rem);
  resize: none;
  overflow-y: hidden;
}

.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: var(--lui-float-bar-inset-bottom, 24px);
  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;
  align-items: center;
  gap: 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;
}

/* 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 - 2rem). */
.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 - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

.lui-modal__dialog:modal {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: fit-content;
  max-height: calc(100dvh - 2rem);
}

.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 - 2rem);
  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 - 2rem);
  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;
}

.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;
}

.lui-confirm-dialog:modal {
  position: fixed;
  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 {
  border: 1px solid var(--color-tertiary);
  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);
}

.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-composer {
  border: 1px dashed var(--color-tertiary);
  background: var(--color-secondary);
}

.lui-metadata-field {
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
}

.lui-metadata-json {
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
}

.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-log-dot--active {
  background: var(--color-informative);
}

.lui-log-dot--inactive {
  background: var(--color-tertiary);
}

.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-icon-field {
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
}

.lui-section-divider {
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-dashboard-activity-row__dot {
  background: var(--color-chrome-accent);
}

.lui-logs__dot {
  background: var(--color-informative);
}

.lui-logs__line {
  background: var(--color-tertiary);
}

.lui-metadata-chip {
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
}

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

.lui-metadata-action--danger {
  border: 1px solid var(--color-danger-fg);
  color: var(--color-danger-fg);
}

.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.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--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__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-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;
}

/* Agents show — context checkgrid and tools list */
.lui-agent-show-checkgrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-agent-show-checkitem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-agent-show-checkitem--active {
  background: color-mix(in srgb, var(--color-chrome-accent) 6%, var(--color-background));
  border-color: color-mix(in srgb, var(--color-chrome-accent) 20%, var(--color-tertiary));
}

.lui-agent-show-checkitem__indicator {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-content-secondary);
}

.lui-agent-show-checkitem--active .lui-agent-show-checkitem__indicator {
  color: var(--color-chrome-accent);
}

.lui-agent-show-checkitem--interactive {
  cursor: pointer;
}

.lui-agent-show-checkitem--interactive:hover {
  background: var(--color-secondary);
}

.lui-agent-show-tools-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-agent-show-tools-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-agent-show-tools-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.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;
}

.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-show-header, .lui-show-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-show-header, .lui-show-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-show-header, .lui-show-header-hero) + .lui-show-layout__ai-summary {
  margin-top: 8px;
}

/* Darty MAX technical case — page-local workbench (candidate: technical-workbench). */
.lui-main-layout__content:has(.dmt-case-page) {
  background: var(--color-secondary);
}

.dmt-case-page {
  --dmt-sidebar-width: 33.3333%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dmt-case-page .lui-show-header__meta {
  margin-top: 0;
}

.dmt-case-page .lui-show-header .flex.flex-wrap.items-center.gap-2 {
  min-width: 0;
  max-width: 100%;
}

.dmt-case-page .lui-show-header h1 {
  min-width: 0;
  max-width: 100%;
}

.dmt-case-page .lui-show-header__meta-item,
.dmt-case-page .lui-show-header__meta-value,
.dmt-case-page .lui-show-header__meta a.lui-link {
  min-width: 0;
  max-width: 100%;
}

.dmt-overflow-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.dmt-case-page .lui-show-layout > .lui-show-header + .lui-page-tabs {
  margin-top: 0;
}

.dmt-case-page .lui-show-header__meta a.lui-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 2px 4px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.dmt-case-page .lui-show-header__meta a.lui-link:hover,
.dmt-case-page .lui-show-header__meta a.lui-link:focus-visible {
  text-decoration: none;
  color: var(--color-content-secondary);
  background: var(--color-secondary);
}

.dmt-case-page__resize-handle {
  display: none;
}

.dmt-session-badge {
  display: inline-flex;
  flex-shrink: 0;
}

.dmt-case-page__main {
  min-width: 0;
}

.dmt-case-page__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 0 16px 16px;
  box-sizing: border-box;
}

.dmt-case-page__sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.dmt-sidebar-host {
  min-width: 0;
}

.dmt-sidebar-stepper {
  --dmt-step-size: 24px;
  --dmt-step-inset: 12px;
  --dmt-step-gap: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--dmt-step-gap);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dmt-sidebar-step {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dmt-sidebar-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--dmt-step-inset) + (var(--dmt-step-size) / 2));
  top: 100%;
  width: 1px;
  height: var(--dmt-step-gap);
  transform: translateX(-50%);
  background: var(--color-tertiary);
  border-radius: 0;
  pointer-events: none;
}

.dmt-sidebar-step__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.dmt-sidebar-step__number {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--dmt-step-size);
  height: var(--dmt-step-size);
  border-radius: 9999px;
  border: 1px solid var(--color-tertiary);
  background: transparent;
  color: var(--color-content-secondary);
  box-sizing: border-box;
}

.dmt-sidebar-stepper .dmt-sidebar-host {
  flex: 1 1 auto;
}

.dmt-workbench {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 16px;
  min-width: 0;
  padding: 0;
  box-sizing: border-box;
  align-content: start;
  align-items: start;
}

.lui-show-layout--dmt-workbench {
  flex: 0 1 auto;
  height: auto;
  overflow: visible;
  background: var(--color-secondary);
}

.dmt-workbench__column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dmt-workbench__card {
  flex: 0 0 auto;
  min-width: 0;
  height: auto;
  overflow: visible;
  gap: 0;
  background: var(--color-background);
}

.dmt-entity-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  color: var(--color-content);
  background: var(--color-background);
}

.dmt-entity-row:hover,
.dmt-entity-row:focus-visible {
  z-index: 1;
}

.dmt-entity-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.dmt-entity-row__icon {
  flex-shrink: 0;
  color: var(--color-content-secondary);
}

.dmt-workbench__card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.dmt-workbench__card-header > h2 {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
}

.dmt-process-card .dmt-workbench__card-header {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}

.dmt-process-card .dmt-workbench__card-header > h2 {
  flex: 0 0 auto;
}

.dmt-process-card .dmt-workbench__card-header .lui-tooltip__trigger.dmt-workbench__card-title-tooltip {
  flex: 0 0 auto;
  width: auto;
}

.dmt-process-card .dmt-workbench__card-title-link {
  width: auto;
}

.dmt-process-card .dmt-workbench__card-title-link-label {
  flex: 0 0 auto;
}

.dmt-process-card .dmt-workbench__card-header .dmt-process-card__header-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 1 0 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.dmt-process-card .dmt-workbench__card-header .lui-identifier,
.dmt-process-card .dmt-workbench__card-header .lui-badge {
  flex: 0 0 auto;
  max-width: 100%;
}

.dmt-process-card .dmt-workbench__card-header .lui-identifier:has(.lui-identifier__icon) {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.dmt-process-card .dmt-workbench__card-header .lui-identifier:has(.lui-identifier__icon) .lui-identifier__content,
.dmt-process-card .dmt-workbench__card-header .lui-identifier:has(.lui-identifier__icon) .lui-identifier__value {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmt-workbench__card-header .lui-tooltip__trigger.dmt-workbench__card-title-tooltip {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.dmt-workbench__card-title-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.dmt-workbench__card-title-link:hover,
.dmt-workbench__card-title-link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.dmt-workbench__card-title-link-label {
  min-width: 0;
  flex: 1 1 auto;
}

.dmt-workbench__card-title-link-icon {
  flex-shrink: 0;
  color: var(--color-content-secondary);
}

.dmt-workbench__card-title-link:hover .dmt-workbench__card-title-link-icon,
.dmt-workbench__card-title-link:focus-visible .dmt-workbench__card-title-link-icon {
  color: var(--color-chrome-accent);
}

.dmt-workbench__card > .lui-card__header {
  border-bottom: none;
}

.dmt-workbench__card.lui-card--flush .lui-accordion__body {
  color: var(--color-content);
}

.dmt-diagnosis-card .lui-accordion__title,
.dmt-quote-panel .lui-accordion__title,
.dmt-schedule-card .lui-accordion__title {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.dmt-sidebar-status,
.dmt-quote-header-total {
  flex-shrink: 0;
}

.dmt-schedule-header-slot,
.dmt-diagnosis-header-progress {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dmt-diagnosis-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dmt-diagnosis-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-pre-diagnosis-card > .lui-card__footer {
  padding-top: 0;
  border-top: none;
}

.dmt-notes-card.dmt-workbench__card > .lui-card__body {
  padding-top: 0;
}

.dmt-process-card.dmt-workbench__card > .lui-card__body {
  padding-top: 0;
}

.dmt-equipment-card.dmt-workbench__card > .lui-card__body {
  padding-top: 0;
}

.dmt-process-card .lui-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dmt-process-card .lui-detail-list__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.dmt-process-card .lui-detail-list__row dt {
  flex: 0 1 auto;
}

.dmt-process-card .lui-detail-list__row dd {
  margin: 0;
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
}

.dmt-equipment-card .lui-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dmt-equipment-card .lui-detail-list__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.dmt-equipment-card .lui-detail-list__row dt {
  flex: 0 1 auto;
}

.dmt-equipment-card .lui-detail-list__row dd {
  margin: 0;
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
}

.dmt-workbench__ai-summary {
  padding: 0;
  min-width: 0;
}

.dmt-workbench__ai-summary .lui-ai-summary-card__header:not(:has(.lui-ai-summary-card__brand)) {
  margin: 0;
  min-height: 0;
  height: 0;
  overflow: visible;
}

.dmt-workbench__ai-summary .lui-ai-summary-card__regenerate {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  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);
}

.dmt-workbench__ai-summary .lui-ai-summary-card__regenerate:disabled {
  opacity: 0;
}

.dmt-workbench__ai-summary .lui-ai-summary-card:hover .lui-ai-summary-card__regenerate,
.dmt-workbench__ai-summary .lui-ai-summary-card:focus-within .lui-ai-summary-card__regenerate {
  opacity: 1;
  pointer-events: auto;
}

.dmt-workbench__ai-summary .lui-ai-summary-card:hover .lui-ai-summary-card__regenerate:disabled,
.dmt-workbench__ai-summary .lui-ai-summary-card:focus-within .lui-ai-summary-card__regenerate:disabled {
  opacity: 0.5;
}

@media (hover: none) {
  .dmt-workbench__ai-summary .lui-ai-summary-card__regenerate {
    opacity: 1;
    pointer-events: auto;
  }

  .dmt-workbench__ai-summary .lui-ai-summary-card__regenerate:disabled {
    opacity: 0.5;
  }
}

.dmt-workbench__card:has(> .lui-card__body > .dmt-workbench__ai-summary:first-child) > .lui-card__body {
  padding-top: 0;
}

.dmt-equipment-card__identity {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.dmt-equipment-card__image {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: 160px;
}

.dmt-equipment-card__image img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  object-position: center;
}

.dmt-equipment-card__image .lui-thumbnail__placeholder:not([hidden]) {
  min-height: 80px;
  width: 100%;
}

.dmt-equipment-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dmt-equipment-card__identity .heading-16 {
  min-width: 0;
}

.dmt-equipment-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.dmt-equipment-card__badge-tip {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  vertical-align: middle;
}

.dmt-equipment-card__badge-tip .lui-badge {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  flex-wrap: nowrap;
}

.dmt-equipment-card__badge-tip .lui-badge__icon {
  flex-shrink: 0;
}

.dmt-equipment-card__badge-tip .lui-badge .truncate,
.dmt-equipment-card__badge-tip .lui-badge .lui-table__link {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmt-equipment-card__file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
  color: inherit;
  box-sizing: border-box;
  transition:
    padding var(--default-transition-duration) var(--default-transition-timing-function),
    background-color var(--default-transition-duration) var(--default-transition-timing-function);
}

.dmt-equipment-card__file-row:hover,
.dmt-equipment-card__file-row:focus-within {
  padding: 8px;
  background: var(--color-secondary);
}

.dmt-equipment-card__file-row .lui-list__item-actions {
  align-self: center;
  margin-left: auto;
}

.dmt-equipment-card__file-row .lui-list__item-actions--reveal {
  opacity: 0;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  .dmt-equipment-card__file-row,
  .dmt-equipment-card__file-row .lui-list__item-actions--reveal {
    transition: none;
  }
}

.dmt-equipment-card__file-icon.lui-thumbnail {
  border: 0;
}

.dmt-equipment-card__preview-frame,
.dmt-equipment-card__preview-image {
  display: block;
  width: 100%;
  height: min(70dvh, 40rem);
  border: 0;
  background: var(--color-secondary);
  border-radius: 6px;
}

.dmt-equipment-card__preview-image {
  object-fit: contain;
}

.dmt-equipment-card__preview-frame[hidden],
.dmt-equipment-card__preview-image[hidden] {
  display: none;
}

.dmt-workbench__stack,
.dmt-call-panel__body,
.dmt-quote-actions,
.dmt-visit-form,
.dmt-call-station {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-schedule-card .lui-accordion--inset-body .lui-accordion__body {
  margin-top: 0;
  padding-top: 0;
}

.dmt-diagnosis-card.dmt-sidebar-card--attention,
.dmt-quote-panel.dmt-sidebar-card--attention,
.dmt-schedule-card.dmt-sidebar-card--attention,
.dmt-schedule-card.dmt-schedule-card--needs-slot {
  position: relative;
  outline: none;
}

.dmt-diagnosis-card.dmt-sidebar-card--attention::after,
.dmt-quote-panel.dmt-sidebar-card--attention::after,
.dmt-schedule-card.dmt-sidebar-card--attention::after,
.dmt-schedule-card.dmt-schedule-card--needs-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-chrome-accent);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.dmt-diagnosis-card.dmt-sidebar-card--attention .lui-accordion__trigger:focus-visible,
.dmt-quote-panel.dmt-sidebar-card--attention .lui-accordion__trigger:focus-visible,
.dmt-schedule-card.dmt-sidebar-card--attention .lui-accordion__trigger:focus-visible,
.dmt-schedule-card.dmt-schedule-card--needs-slot .lui-accordion__trigger:focus-visible {
  box-shadow: none;
}

.dmt-visit-form > [data-darty-max-technical-schedule-target="fields"]:empty {
  display: none;
}

.dmt-quote-actions {
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.dmt-quote-actions {
  container-type: inline-size;
  container-name: dmt-quote;
}

.dmt-quote-aux-links,
.dmt-quote-decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dmt-quote-decision-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-quote-decision-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-quote-decision-panel[hidden] {
  display: none;
}

.dmt-quote-decision .dmt-quote-decision__choice--accept:hover,
.dmt-quote-decision .dmt-quote-decision__choice--accept:focus-visible,
.dmt-quote-decision .dmt-quote-decision__choice--accept[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength-strong), 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);
}

.dmt-quote-decision .dmt-quote-decision__choice--reject:hover,
.dmt-quote-decision .dmt-quote-decision__choice--reject:focus-visible,
.dmt-quote-decision .dmt-quote-decision__choice--reject[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength-strong), 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);
}

.dmt-sidebar-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 70%;
}

.dmt-quote-header-total {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dmt-quote-lines {
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
  container-name: dmt-quote-lines;
}

.dmt-quote-lines .lui-table-host,
.dmt-quote-lines .lui-table,
.dmt-quote-lines .lui-scroll-edge {
  min-width: 0;
  max-width: 100%;
}

/* Nested table is X-only. A Y scrollport here eats the wheel and the quote accordion never moves.
   Do not inherit lui-table's always-visible 12px native bar — that gutter stays on in this card. */
.dmt-quote-lines .lui-scroll-edge {
  display: block;
  min-height: auto;
}

.dmt-quote-lines .lui-table__scroll,
.dmt-quote-lines .lui-table__scroll.lui-scroll-edge__viewport {
  flex: none;
  min-height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.dmt-quote-lines .lui-table__scroll::-webkit-scrollbar,
.dmt-quote-lines .lui-table__scroll.lui-scroll-edge__viewport::-webkit-scrollbar {
  width: 0;
  height: 6px;
  background: transparent;
}

.dmt-quote-lines .lui-table__scroll::-webkit-scrollbar-track,
.dmt-quote-lines .lui-table__scroll.lui-scroll-edge__viewport::-webkit-scrollbar-track {
  background: transparent;
}

.dmt-quote-lines .lui-table__scroll::-webkit-scrollbar-thumb,
.dmt-quote-lines .lui-table__scroll.lui-scroll-edge__viewport::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 36%, transparent);
  border: 1px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

.dmt-quote-lines .lui-table__table {
  min-width: 0;
}

.dmt-quote-line__cell {
  vertical-align: middle;
  padding-block: 4px;
}

.dmt-quote-line__cell .lui-forms__control {
  width: 100%;
  min-width: 5.5rem;
}

.dmt-quote-line__cell--search .lui-forms__control {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dmt-quote-line__cell--search {
  position: relative;
  min-width: 0;
}

.dmt-quote-line__suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: auto;
  top: calc(100% - 2px);
  min-width: 16rem;
  max-width: 22rem;
}

.dmt-quote-line__cell .lui-forms__composite {
  width: 100%;
  min-width: 0;
}

.dmt-quote-lines .lui-table__head .dmt-quote-th--row-actions,
.dmt-quote-lines .dmt-quote-line__cell--row-actions {
  --dmt-quote-actions-surface: var(--color-background);
  position: sticky;
  right: 0;
  z-index: 6;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  padding-block: 4px;
  padding-inline: 4px;
  overflow: visible;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: none;
}

.dmt-quote-lines .lui-table__head .dmt-quote-th--row-actions {
  --dmt-quote-actions-surface: var(--color-primary);
  background: var(--dmt-quote-actions-surface);
}

.dmt-quote-lines .dmt-quote-line__cell--row-actions {
  background: var(--dmt-quote-actions-surface);
}

.dmt-quote-line--added:not(.dmt-quote-line--editing) .dmt-quote-line__cell--row-actions {
  --dmt-quote-actions-surface: color-mix(in srgb, var(--color-secondary) 55%, var(--color-background));
}

.dmt-quote-line--blank .dmt-quote-line__cell--row-actions,
.dmt-quote-line--draft .dmt-quote-line__cell--row-actions,
.dmt-quote-line--editing .dmt-quote-line__cell--row-actions {
  --dmt-quote-actions-surface: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
}

.dmt-quote-lines .lui-table__head .dmt-quote-th--row-actions::before,
.dmt-quote-lines .dmt-quote-line__cell--row-actions::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 24px;
  pointer-events: none;
  z-index: 1;
  background: var(--dmt-quote-actions-surface);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%);
  mask-image: linear-gradient(to right, transparent, #000 70%);
}

.dmt-quote-line__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  position: static;
  transform: none;
  background: none;
  padding-left: 0;
  min-width: 0;
}

.dmt-quote-line__action-btns {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
  max-width: 56px;
}

.dmt-quote-line__status {
  width: 100%;
  color: var(--color-danger);
  text-align: right;
}

.dmt-quote-add-row {
  align-self: flex-start;
}

.dmt-quote-add-row:disabled,
.dmt-quote-add-row[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.dmt-quote-line__save--inactive {
  opacity: 0.5;
}

.dmt-quote-line__actions .lui-button[hidden],
.dmt-quote-line__actions .lui-button.hidden {
  display: none !important;
}

.dmt-quote-line--added {
  background: color-mix(in srgb, var(--color-secondary) 55%, var(--color-background));
}

.dmt-quote-line--added:not(.dmt-quote-line--editing) .lui-forms__control:not([type="hidden"]) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.dmt-quote-line--added:not(.dmt-quote-line--editing) .lui-forms__composite {
  background: transparent;
}

.dmt-quote-line--added:not(.dmt-quote-line--editing) .lui-number-input {
  pointer-events: none;
}

.dmt-quote-line--added:not(.dmt-quote-line--editing) .lui-number-input__btn {
  display: none;
}

.dmt-quote-line--editing {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.dmt-quote-line--blank,
.dmt-quote-line--draft {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-background));
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.dmt-quote-line--blank .dmt-quote-line__remove,
.dmt-quote-line--draft .dmt-quote-line__remove,
.dmt-quote-line--blank .dmt-quote-line__edit,
.dmt-quote-line--draft .dmt-quote-line__edit {
  visibility: hidden;
}

.dmt-quote-line--saving .dmt-quote-line__cell .lui-forms__control,
.dmt-quote-line--saving .lui-number-input {
  pointer-events: none;
}

.dmt-quote-th--sku,
.dmt-quote-line__cell--sku {
  min-width: 5.5rem;
}

.dmt-quote-parts {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--color-tertiary);
}

.dmt-quote-parts__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.dmt-quote-parts__figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  min-width: 0;
  text-align: right;
}

.dmt-quote-parts__amount {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@container dmt-quote-lines (max-width: 28rem) {
  .dmt-quote-th--lead,
  .dmt-quote-line__cell--lead {
    display: none;
  }
}

.dmt-quote-customer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
}

.dmt-quote-customer__copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.dmt-quote-customer__heading {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.dmt-quote-customer__heading > p {
  flex-shrink: 0;
  white-space: nowrap;
}

.dmt-quote-customer__hint {
  max-width: 100%;
}

.dmt-quote-customer__manual {
  flex: 0 0 auto;
  width: 10rem;
}

.dmt-quote-customer__manual .lui-forms__group,
.dmt-quote-customer__manual .lui-forms__composite {
  width: 100%;
  max-width: none;
}

.dmt-quote-customer__manual .lui-forms__composite {
  height: auto;
  min-height: var(--lui-control-height-lg);
}

.dmt-quote-customer__manual .lui-forms__control {
  width: 100%;
  min-width: 0;
  max-width: none;
  font-family: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  padding-block: 0;
}

.dmt-quote-customer__price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  margin-inline-start: auto;
}

.dmt-quote-customer__price:not(:has(> :not([hidden]))) {
  display: none;
}

.dmt-quote-customer__amount {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dmt-quote-customer__override {
  flex: 0 0 auto;
}

.dmt-call-panel__header-extra,
.dmt-call-panel__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.dmt-call-panel__meta {
  justify-content: space-between;
  min-width: 0;
}

.dmt-call-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.dmt-call-status__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.dmt-call-status [data-dmt-call-status-label] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmt-call-panel__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dmt-call-panel__phone > .lui-forms__group {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 260px;
}

.dmt-call-panel__details {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    grid-template-rows var(--default-transition-duration) var(--default-transition-timing-function),
    margin-top var(--default-transition-duration) var(--default-transition-timing-function),
    opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.dmt-call-panel__details-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.dmt-call-panel--expanded .dmt-call-panel__details {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  pointer-events: auto;
}

.dmt-call-panel--expanded .dmt-call-panel__details-inner {
  overflow: visible;
}

.dmt-call-panel__tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-call-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.dmt-call-panel__status-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.dmt-call-panel__status [data-darty-max-technical-voice-target="statusLabel"] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dmt-call-controls,
.dmt-call-consent {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.dmt-call-consent[hidden] {
  display: none !important;
}

.dmt-call-panel.dmt-workbench__card > .lui-card__header {
  padding-bottom: 8px;
}

.dmt-call-panel.dmt-workbench__card {
  container-type: inline-size;
  container-name: dmt-call;
  border: none;
  background: transparent;
  box-shadow: 0 0 0 0 transparent;
  interpolate-size: allow-keywords;
  transition:
    box-shadow var(--default-transition-duration) var(--default-transition-timing-function),
    background-color var(--default-transition-duration) var(--default-transition-timing-function);
}

.dmt-call-panel.dmt-workbench__card > .lui-card__body {
  padding: 0;
  transition: padding var(--default-transition-duration) var(--default-transition-timing-function);
}

.dmt-call-panel.dmt-call-panel--expanded.dmt-workbench__card {
  box-shadow: 0 0 0 1px var(--color-tertiary);
  background: var(--color-background);
}

.dmt-call-panel.dmt-call-panel--expanded.dmt-workbench__card > .lui-card__body,
.dmt-call-panel.dmt-call-panel--live.dmt-workbench__card > .lui-card__body {
  padding: 12px;
}

.dmt-call-panel .dmt-workbench__stack {
  gap: 12px;
}

.dmt-call-panel .dmt-call-station {
  gap: 12px;
}

.dmt-call-panel__timer {
  flex-shrink: 0;
  min-width: 3.5rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.dmt-call-consent {
  justify-content: center;
  flex-wrap: nowrap;
}

.dmt-call-panel .dmt-call-controls {
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
}

.dmt-call-controls__connect {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Mute / expand are icon-only lg (40px); 14px glyph reads small. 18px is the lg icon pair. */
.dmt-call-panel__mute.lui-button .material-symbols-rounded,
.dmt-call-panel__expand.lui-button .material-symbols-rounded {
  font-size: 18px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}
.dmt-call-panel__mute.lui-button .material-symbols-rounded--filled,
.dmt-call-panel__expand.lui-button .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}

/*
 * Live call — red edge glow (danger family) on the full card, pulse only.
 * Reach is 20px. Pulse only — no traveling comet.
 * Bloom mask keeps the 3-layer AI-summary recipe (solid ∩ top/bottom ∪ left/right)
 * so the wash is a full edge frame, not four corners.
 * Class is toggled by darty-max-technical-voice.
 * Overflow stays visible (phone country dropdown); bloom clips via clip-path.
 */
.dmt-call-panel.dmt-call-panel--live.dmt-workbench__card {
  --beam-strength: 1;
  --lui-ai-summary-border-size: 1px;
  --lui-ai-beam-radius: 6px;
  --beam-reach: 20px;
  --dmt-call-pulse-duration: 2.2s;
  --dmt-call-beam-hot: var(--color-danger);
  --dmt-call-beam-ember: var(--color-orange);
  --dmt-call-beam-deep: var(--color-danger-fg);
  --dmt-call-beam-rose: color-mix(in srgb, var(--color-danger) 65%, var(--color-orange));
  --dmt-call-beam-wine: color-mix(in srgb, var(--color-danger-fg) 80%, var(--color-danger));

  position: relative;
  isolation: isolate;
  overflow: visible;
  border: none;
  box-shadow: none;
  padding: var(--lui-ai-summary-border-size);
  background: var(--color-background);
  animation: beam-fade-in var(--default-transition-duration) var(--default-transition-timing-function) forwards;
}

.dmt-call-panel.dmt-call-panel--live::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 245px 140px at 33% -7.4%, color-mix(in srgb, var(--dmt-call-beam-ember) 50%, transparent), transparent),
    radial-gradient(ellipse 210px 123px at 12% -5%, color-mix(in srgb, var(--dmt-call-beam-hot) 50%, transparent), transparent),
    radial-gradient(ellipse 140px 245px at 2.1% 68.3%, color-mix(in srgb, var(--dmt-call-beam-deep) 50%, transparent), transparent),
    radial-gradient(ellipse 630px 113px at 74.4% 100%, color-mix(in srgb, var(--dmt-call-beam-rose) 50%, transparent), transparent),
    radial-gradient(ellipse 260px 113px at 93.9% 0%, color-mix(in srgb, var(--dmt-call-beam-hot) 50%, transparent), transparent),
    radial-gradient(ellipse 183px 168px at 100% 27.1%, color-mix(in srgb, var(--dmt-call-beam-wine) 50%, transparent), transparent),
    radial-gradient(ellipse 298px 90px at 55% 100%, color-mix(in srgb, var(--dmt-call-beam-ember) 50%, transparent), transparent);
  -webkit-mask-image:
    linear-gradient(#fff, #fff),
    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:
    linear-gradient(#fff, #fff),
    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;
  --dmt-call-pulse-min: 0.4;
  --dmt-call-pulse-max: 0.85;
  animation: dmt-call-beam-pulse var(--dmt-call-pulse-duration) ease-in-out infinite;
}

.dmt-call-panel.dmt-call-panel--live::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:
    radial-gradient(ellipse 175px 100px at 33% -7.4%, var(--dmt-call-beam-ember), transparent),
    radial-gradient(ellipse 150px 88px at 12% -5%, var(--dmt-call-beam-hot), transparent),
    radial-gradient(ellipse 100px 175px at 2.1% 68.3%, var(--dmt-call-beam-deep), transparent),
    radial-gradient(ellipse 450px 80px at 74.4% 100%, var(--dmt-call-beam-rose), transparent),
    radial-gradient(ellipse 185px 80px at 93.9% 0%, var(--dmt-call-beam-hot), transparent),
    radial-gradient(ellipse 130px 120px at 100% 27.1%, var(--dmt-call-beam-wine), transparent),
    radial-gradient(ellipse 213px 65px at 55% 100%, var(--dmt-call-beam-ember), transparent);
  -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;
  --dmt-call-pulse-min: 0.18;
  --dmt-call-pulse-max: 0.45;
  animation: dmt-call-beam-pulse var(--dmt-call-pulse-duration) ease-in-out infinite;
}

:root[data-theme="dark"] .dmt-call-panel.dmt-call-panel--live::before {
  --dmt-call-pulse-min: 0.55;
  --dmt-call-pulse-max: 1;
}

:root[data-theme="dark"] .dmt-call-panel.dmt-call-panel--live::after {
  --dmt-call-pulse-min: 0.28;
  --dmt-call-pulse-max: 0.55;
}

@keyframes dmt-call-beam-pulse {
  0%, 100% { opacity: calc(var(--beam-opacity) * var(--dmt-call-pulse-min) * var(--beam-strength, 1)); }
  50% { opacity: calc(var(--beam-opacity) * var(--dmt-call-pulse-max) * var(--beam-strength, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .dmt-sidebar-host,
  .dmt-sidebar-step {
    transition: none;
  }

  .dmt-call-panel.dmt-workbench__card,
  .dmt-call-panel.dmt-workbench__card > .lui-card__body,
  .dmt-call-panel__details {
    transition: none;
  }

  .dmt-call-panel.dmt-call-panel--live {
    animation: none;
    --beam-opacity: 1;
  }

  .dmt-call-panel.dmt-call-panel--live::before,
  .dmt-call-panel.dmt-call-panel--live::after {
    animation: none;
  }

  .dmt-call-panel.dmt-call-panel--live::before {
    opacity: 0;
  }

  .dmt-call-panel.dmt-call-panel--live::after {
    opacity: calc(var(--beam-opacity) * 0.35 * var(--beam-strength, 1));
  }
}

.dmt-slot-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.dmt-slot-chips > :only-child {
  grid-column: 1 / -1;
}

.dmt-calendar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-calendar--locked {
  opacity: 0.45;
}

.dmt-calendar--locked .dmt-calendar__day {
  cursor: not-allowed;
}

.dmt-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.dmt-calendar__nav-label {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.dmt-calendar__nav-buttons {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

.dmt-calendar__weekdays,
.dmt-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.dmt-calendar__day {
  display: flex;
  min-width: 0;
  min-height: 28px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  background-color: transparent;
  color: var(--color-content);
  -webkit-text-fill-color: currentColor;
  cursor: pointer;
  font: inherit;
}

.dmt-calendar__month {
  min-width: 0;
}

[data-darty-max-technical-schedule-target="month"][hidden] {
  content-visibility: hidden;
}

.dmt-calendar__day:not(.dmt-calendar__day--muted):not(.dmt-calendar__day--selected):not([aria-pressed="true"]):not(:disabled):hover {
  background: var(--color-secondary);
  background-color: var(--color-secondary);
}

.dmt-calendar__day:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 2px;
}

.dmt-calendar__day--selected,
.dmt-calendar__day[aria-pressed="true"] {
  border-color: var(--color-content);
  background: var(--color-content);
  background-color: var(--color-content);
  color: var(--color-background);
  -webkit-text-fill-color: var(--color-background);
  fill: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dmt-calendar__day .dmt-calendar__day-number {
  color: inherit;
  -webkit-text-fill-color: inherit;
}

.dmt-calendar__day--selected .dmt-calendar__day-number,
.dmt-calendar__day[aria-pressed="true"] .dmt-calendar__day-number {
  color: var(--color-background);
  -webkit-text-fill-color: var(--color-background);
  fill: var(--color-background);
  font-weight: 600;
}

.dmt-calendar__day--empty:not(.dmt-calendar__day--selected):not([aria-pressed="true"]),
.dmt-calendar__day:disabled:not(.dmt-calendar__day--selected):not([aria-pressed="true"]) {
  color: var(--color-content-secondary);
  -webkit-text-fill-color: currentColor;
  cursor: not-allowed;
  opacity: 0.4;
}

.dmt-calendar__day--empty:hover,
.dmt-calendar__day:disabled:hover {
  background: transparent;
}

.dmt-calendar__day--selected:hover,
.dmt-calendar__day[aria-pressed="true"]:hover {
  background: var(--color-content);
  background-color: var(--color-content);
  border-color: var(--color-content);
}

.dmt-calendar__day--muted {
  color: var(--color-content-secondary);
  cursor: default;
  opacity: 0.4;
}

.dmt-calendar__day-dot {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-content);
}

.dmt-calendar__day--selected .dmt-calendar__day-dot,
.dmt-calendar__day[aria-pressed="true"] .dmt-calendar__day-dot {
  background: var(--color-background);
}

.dmt-calendar__day--muted .dmt-calendar__day-dot {
  background: var(--color-content-secondary);
}

.dmt-calendar__day-number {
  line-height: 1.2;
}

.dmt-calendar__periods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dmt-calendar__periods[hidden] {
  display: none;
}

.dmt-slot-chip {
  height: auto;
  min-height: 0;
  padding: 8px 12px;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  white-space: normal;
}

.dmt-slot-chip__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.dmt-slot-chip__time {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.dmt-slot-chip__free {
  color: var(--color-content-secondary);
  font-variant-numeric: tabular-nums;
}

.dmt-slot-chip.lui-button--primary .dmt-slot-chip__time,
.dmt-slot-chip.lui-button--primary .dmt-slot-chip__free {
  color: inherit;
}

.dmt-slot-chip.lui-button--primary .dmt-slot-chip__free {
  opacity: 0.82;
}

.dmt-slot-chip.lui-button--outline:hover .dmt-slot-chip__free {
  color: var(--color-content);
}

.dmt-schedule-panel__submit {
  margin-top: 4px;
}

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

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

.dmt-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 transparent;
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

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

.dmt-card-select__option:hover {
  background: var(--color-secondary);
}

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

.dmt-card-select__option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dmt-card-select__option--selected,
.dmt-card-select__option[aria-selected="true"] {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  box-shadow: none;
}

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

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

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

.dmt-call-history {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dmt-call-history__row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: start;
  min-width: 0;
  padding-bottom: 12px;
}

.dmt-call-history__row:last-child {
  padding-bottom: 0;
}

.dmt-call-history__marker {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.dmt-call-history__row:not(:last-child) .dmt-call-history__marker::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: -12px;
  left: 50%;
  width: 1px;
  background: var(--color-tertiary);
  transform: translateX(-50%);
}

.dmt-call-history__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-foreground);
}

.dmt-call-history__glyph {
  color: inherit;
}

.dmt-call-history__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.dmt-call-history__title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dmt-call-history__stamp {
  min-width: 0;
}

.dmt-call-history__row .lui-badge {
  flex-shrink: 0;
}

.dmt-call-history__aside {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
}

.dmt-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.dmt-consent--overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 8px;
  background: color-mix(in srgb, var(--color-secondary) 92%, var(--color-background));
}

.dmt-consent--overlay[hidden] {
  display: none !important;
}

.dmt-consent--overlay.dmt-consent--refused {
  z-index: 3;
  background: color-mix(in srgb, var(--color-background) 55%, transparent);
}

.dmt-consent__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}

.dmt-consent__intro[hidden],
.dmt-consent__status[hidden] {
  display: none !important;
}

.dmt-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.dmt-panel-actions--call {
  container-type: inline-size;
  container-name: dmt-actions;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  border-top: none;
  background: transparent;
}

.dmt-panel-actions__stack {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.dmt-panel-actions__item {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

@container dmt-actions (min-width: 34rem) {
  .dmt-panel-actions__stack {
    flex-direction: row;
  }

  .dmt-panel-actions__item {
    width: auto;
    flex: 1 1 0;
  }
}

.dmt-panel-actions__more {
  flex: 0 0 auto;
}

.dmt-panel-actions__stack > .lui-button,
.dmt-panel-actions__item .lui-button {
  width: 100%;
  min-width: 0;
}

.dmt-panel-actions__item .lui-button__label {
  min-width: 0;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
}

.dmt-panel-actions--call .lui-button .material-symbols-rounded {
  font-size: 18px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}
.dmt-panel-actions--call .lui-button .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}

.dmt-call-panel__transcript {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.dmt-call-panel__transcript > .lui-card {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 82px;
  min-height: 82px;
  max-height: 82px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--color-secondary);
}

@container dmt-call (min-width: 42rem) {
  .dmt-call-panel__details-inner {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .dmt-call-panel__tools {
    grid-column: 1;
    grid-row: 1;
  }

  .dmt-call-panel__transcript {
    width: 100%;
    min-width: 0;
    align-self: stretch;
    grid-column: 2;
    grid-row: 1;
  }

  .dmt-call-panel__details-inner > :not(.dmt-call-panel__tools):not(.dmt-call-panel__transcript) {
    grid-column: 1 / -1;
  }

  .dmt-call-panel__transcript > .lui-card {
    width: 100%;
    height: var(--lui-control-height-md);
    min-height: var(--lui-control-height-md);
    max-height: var(--lui-control-height-md);
  }

  .dmt-call-panel__transcript:has(.dmt-consent--overlay:not([hidden])) > .lui-card {
    height: auto;
    min-height: var(--lui-control-height-md);
    max-height: none;
  }

  .dmt-call-consent {
    flex-wrap: wrap;
  }
}

.dmt-call-panel__transcript--refused > .lui-card {
  background: color-mix(in srgb, var(--color-secondary) 30%, var(--color-background));
}

.dmt-call-panel__transcript > .lui-card > .lui-card__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
  padding: 8px;
}

.dmt-call-panel__transcript-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  z-index: 2;
  isolation: isolate;
  min-width: 0;
  pointer-events: none;
}

@container dmt-call (min-width: 42rem) {
  .dmt-call-panel__transcript > .lui-card > .lui-card__body {
    padding: 2px;
  }

  .dmt-call-panel__transcript-toolbar {
    top: 2px;
    right: 2px;
  }
}

.dmt-call-panel__transcript-toolbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4px;
  right: -4px;
  left: -4px;
  height: 24px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--color-secondary) 0%,
    color-mix(in srgb, var(--color-secondary) 70%, transparent) 40%,
    color-mix(in srgb, var(--color-secondary) 28%, transparent) 72%,
    transparent 100%
  );
}

.dmt-call-panel__transcript-toolbar .lui-button,
.dmt-call-panel__transcript-toolbar .lui-tooltip__trigger {
  pointer-events: auto;
}

.dmt-call-panel__transcript-expand {
  flex: 0 0 auto;
}

.dmt-call-panel__transcript-expand.lui-button--ghost {
  background: var(--color-background);
}

.dmt-call-panel__transcript-expand.lui-button--ghost:hover,
.dmt-call-panel__transcript-expand.lui-button--ghost:focus-visible {
  background: var(--color-primary);
}

.dmt-call-panel__transcript--refused .dmt-call-panel__transcript-toolbar,
.dmt-call-panel__transcript--refused .dmt-call-panel__transcript-body {
  opacity: 0.4;
}

.dmt-call-panel__transcript-body {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
}

.dmt-call-panel__transcript-lock {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dmt-call-panel__transcript-lock--dimmed {
  opacity: 1;
}

.dmt-call-panel__transcript .lui-transcript:not(:has(.lui-transcript__turn)) {
  display: none;
}

.dmt-call-panel__transcript-waiting {
  display: none;
  margin: 0;
  padding-top: 0;
}

.dmt-call-panel__transcript--granted:not(:has(.lui-transcript__turn)) .dmt-call-panel__transcript-waiting {
  display: block;
}

.dmt-call-panel__transcript--refused .dmt-consent--overlay {
  opacity: 1;
}

.dmt-call-panel__transcript .lui-transcript,
.dmt-call-panel__transcript .lui-scroll-edge {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 0;
}

.dmt-call-panel__transcript .lui-scroll-edge {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgb(0 0 0 / 0.18) 3px,
    rgb(0 0 0 / 0.48) 6px,
    rgb(0 0 0 / 0.82) 9px,
    #000 12px,
    #000 calc(100% - 12px),
    rgb(0 0 0 / 0.82) calc(100% - 9px),
    rgb(0 0 0 / 0.48) calc(100% - 6px),
    rgb(0 0 0 / 0.18) calc(100% - 3px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgb(0 0 0 / 0.18) 3px,
    rgb(0 0 0 / 0.48) 6px,
    rgb(0 0 0 / 0.82) 9px,
    #000 12px,
    #000 calc(100% - 12px),
    rgb(0 0 0 / 0.82) calc(100% - 9px),
    rgb(0 0 0 / 0.48) calc(100% - 6px),
    rgb(0 0 0 / 0.18) calc(100% - 3px),
    transparent 100%
  );
}

.dmt-call-panel__transcript .lui-transcript--live .lui-transcript__log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  gap: 2px;
  overflow: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
  pointer-events: none;
}

.dmt-call-panel__transcript .lui-transcript__turn .lui-transcript__speaker {
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-foreground);
}

.dmt-call-panel__transcript .lui-transcript__text {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--color-foreground);
}

.dmt-call-panel__transcript .lui-transcript__time {
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
}

.dmt-call-panel__transcript .lui-transcript__turn {
  gap: 8px;
}

.dmt-call-panel__transcript .lui-transcript__body {
  gap: 4px;
}

.dmt-call-panel__transcript .lui-transcript--live .lui-transcript__log::-webkit-scrollbar {
  display: none;
  width: 0;
}

.dmt-call-panel__transcript .lui-scroll-edge__fade {
  display: none;
}

.dmt-live-transcript-modal .lui-transcript:not(:has(.lui-transcript__turn)) {
  display: none;
}

.dmt-live-transcript-modal:has(.lui-transcript__turn) .dmt-live-transcript-modal__empty {
  display: none;
}

@media (min-width: 768px) {
  .lui-main-layout__content:has(.dmt-case-page) {
    overflow: hidden;
  }

  .dmt-case-page {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--dmt-sidebar-width);
    align-items: stretch;
    height: 100%;
  }

  .dmt-case-page.is-resizing,
  .dmt-case-page.is-resizing * {
    cursor: col-resize !important;
    user-select: none;
  }

  .dmt-case-page__main {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .dmt-case-page__main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .dmt-case-page__main::-webkit-scrollbar-track {
    background: transparent;
  }

  .dmt-case-page__main::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-clip: content-box;
  }

  .dmt-case-page__main:hover,
  .dmt-case-page__main:focus-within {
    scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
  }

  .dmt-case-page__main:hover::-webkit-scrollbar-thumb,
  .dmt-case-page__main:focus-within::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--color-content) 36%, transparent);
  }

  .dmt-case-page__sidebar {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 16px;
  }

  .dmt-case-page__resize-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    grid-row: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--dmt-sidebar-width));
    z-index: 3;
    width: 12px;
    margin: 0 0 0 4px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateX(-50%);
    cursor: col-resize;
    touch-action: none;
  }

  .dmt-case-page__resize-handle-bar {
    width: 4px;
    height: 32px;
    border-radius: 999px;
    background: var(--color-content-secondary);
    pointer-events: none;
  }

  .dmt-case-page__resize-handle:hover .dmt-case-page__resize-handle-bar,
  .dmt-case-page__resize-handle:focus-visible .dmt-case-page__resize-handle-bar,
  .dmt-case-page.is-resizing .dmt-case-page__resize-handle-bar {
    background: var(--color-chrome-accent);
  }

  .dmt-case-page__resize-handle:focus-visible {
    outline: 2px solid var(--color-chrome-accent);
    outline-offset: 2px;
  }

  .dmt-case-page__sidebar-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .dmt-sidebar-stepper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .dmt-sidebar-step {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 0%;
    min-height: 3rem;
    overflow: visible;
    transition: flex-grow 240ms ease;
  }

  .dmt-sidebar-step:has([data-lui--accordion-target="content"][data-state="open"]) {
    flex-grow: 1;
  }

  .dmt-sidebar-step:only-child {
    flex-grow: 1;
  }

  .dmt-sidebar-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  /* Host > card. A wrapper here breaks the height chain and the accordion body
     never becomes a scroller (content is clipped). */
  .dmt-sidebar-host > .dmt-workbench__card,
  .dmt-quote-host > *,
  .dmt-quote-host .dmt-workbench__card,
  .dmt-sidebar-host .lui-accordion,
  .dmt-sidebar-host .lui-accordion__item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .dmt-sidebar-host .lui-accordion__heading {
    flex: 0 0 auto;
  }

  .dmt-sidebar-host .lui-accordion__content[data-state="open"] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .dmt-sidebar-host .lui-accordion__content[data-state="open"] .lui-accordion__content-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }

  /* Direct accordion scroller only — nested lui-table scroll-edge must not contain
     overscroll, or wheel over the spare-parts table never reaches the card body. */
  .dmt-sidebar-host .lui-accordion__content-inner > .lui-scroll-edge {
    flex: 1 1 auto;
    min-height: 0;
  }

  .dmt-quote-host .lui-accordion__content-inner > .dmt-quote-actions {
    flex: 0 0 auto;
  }

  .dmt-sidebar-host .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .dmt-sidebar-host .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }

  .dmt-sidebar-host .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar-track {
    background: transparent;
  }

  .dmt-sidebar-host .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-clip: content-box;
  }

  .dmt-sidebar-host:hover .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport,
  .dmt-sidebar-host:focus-within .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport {
    scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
  }

  .dmt-sidebar-host:hover .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar-thumb,
  .dmt-sidebar-host:focus-within .lui-accordion__content-inner > .lui-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--color-content) 36%, transparent);
  }

  .dmt-call-panel-host {
    flex: 0 0 auto;
    z-index: 2;
    background: var(--color-secondary);
  }

  .dmt-case-page__sidebar .dmt-call-panel {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .dmt-case-page__sidebar .dmt-panel-actions--call {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0;
    background: transparent;
  }
}

@media (min-width: 1024px) {
  .dmt-workbench__column:not(.dmt-case-page__sidebar) {
    overflow: visible;
    padding: 0;
    background: transparent;
  }

  .dmt-workbench__column--context,
  .dmt-workbench__column--quote {
    grid-column: auto;
    grid-row: auto;
    position: static;
    max-height: none;
  }

  .dmt-workbench__card > .lui-card__body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  .dmt-call-panel,
  .dmt-call-panel__body {
    min-height: auto;
    height: auto;
    overflow: visible;
  }

  .dmt-case-page__sidebar .dmt-call-panel,
  .dmt-case-page__sidebar .dmt-call-panel__body {
    min-height: auto;
    overflow: visible;
  }
}

/* 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 — height-fill workspace; form/editor always visible (page-local).
   Attachments open as lui-drawer-bar floating over this layout (not a rail / modal). */
.lui-show-layout--protocol {
  position: relative;
  overflow: hidden;
}

/* Attachments / Applies-to drawer: flush to content edges (no inset, no radius).
   Instant open/close (no slide transition). */
#protocol-attachments-drawer.lui-drawer-bar {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: auto;
  max-height: none;
  width: 380px;
  max-width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: none;
  visibility: visible;
}

#protocol-attachments-drawer.lui-drawer-bar.translate-x-full {
  transform: translateX(100%);
  visibility: hidden;
}

#protocol-attachments-drawer .lui-drawer-bar__drawer {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 1px solid var(--color-tertiary);
}

/* Title-only drawer chrome (close via action-bar toggle / ESC). */
#protocol-attachments-drawer .lui-drawer-bar__top {
  justify-content: flex-start;
}

/* Attachments list — bordered stack that survives turbo append/remove of rows. */
#protocol-attachments-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-drawer .protocol-attachments-list__item + .protocol-attachments-list__item {
  border-top: 1px solid var(--color-tertiary);
}

#protocol-attachments-drawer .protocol-attachments-list__item:focus-within {
  background: var(--color-secondary);
}

#protocol-attachments-drawer .protocol-attachments-list__priority {
  width: 3.5rem;
}

#protocol-attachments-drawer .protocol-attachments-list__priority .lui-forms__control {
  width: 100%;
  max-width: 100%;
}

/* Compact drawer body — full-bleed form column inside 380px panel. */
#protocol-attachments-drawer .lui-drawer-bar__body {
  padding: 12px;
  gap: 12px;
}

#protocol-attachments-drawer .lui-forms__group,
#protocol-attachments-drawer .protocol-attach-priority,
#protocol-attachments-drawer .lui-button--block {
  width: 100%;
  max-width: 100%;
}

#protocol-attachments-drawer .protocol-attach-form__label-row {
  margin-bottom: 8px;
}

#protocol-attachments-drawer .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-attachments-drawer .protocol-attach-form__hint: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;
}

/* 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%;
}

@media (min-width: 769px) {
  .lui-main-layout__content:has(.lui-show-layout--protocol) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .lui-show-layout--protocol {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .lui-show-layout--protocol > :is(.lui-show-header, .lui-page-header, header),
  .lui-show-layout--protocol > .lui-inline-edit__field.lui-inline-edit__subtitle,
  .lui-show-layout--protocol > .lui-float-bar--inline-edit {
    flex: 0 0 auto;
  }

  .lui-show-layout--protocol > .protocol-show-workspace {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
  }
}

@media (max-width: 768px) {
  .protocol-show-workspace {
    min-height: 22rem;
  }
}

.lui-page-header { display: flex; flex-direction: column; gap: 4px; }

.lui-show-header__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.lui-show-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-show-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  margin: 8px 0 0;
  padding: 0;
}

.lui-show-header__meta a.lui-link > * {
  color: inherit;
}

.lui-show-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-show-header__meta--end {
  margin-top: 0;
  margin-left: auto;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.lui-show-header__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.lui-show-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;
}

/* Connections knowledge graph */
.lui-connections-graph__mobile-fallback {
  display: none;
}

.lui-connections-graph__canvas-wrap {
  position: relative;
  isolation: isolate;
  min-height: 28rem;
  height: clamp(28rem, calc(100vh - 22rem), 44rem);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-background));
}

.lui-connections-graph__overlay {
  z-index: 2;
  background-color: color-mix(in srgb, var(--color-secondary) 50%, var(--color-background));
}

/* 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__legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-connections-graph__canvas .vis-network:focus {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 2px;
}

/* ── 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; }

.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) */
.lui-tab-panel-card.lui-card {
  overflow: hidden;
  gap: 0;
  padding: 0;
}

/* 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);
}

.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__body {
  padding: 12px;
}

.lui-tab-panel-card__body.p-0 {
  padding: 0;
}

/* List under section header — no nested shell / row chrome; 4px header↔rows, 2px row↔row */
.lui-tab-panel-card__body:has(> .lui-list) {
  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-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;
  }
}

/* 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__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-visible {
  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;
}

.lui-file-upload-card__check {
  font-size: 20px;
  color: var(--color-success);
}

@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;
}

.lui-detail-tab-stack__primary > .lui-card {
  width: 100%;
  min-width: 0;
}

.lui-detail-tab-stack__resources {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.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;
}

.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__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;
  }
}

@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;
  }
}

.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;
}

/* 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-beefree-editor {
  height: 100%;
  width: 100%;
  min-height: calc(100vh - 12rem);
}

.lui-beefree-editor__container {
  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; }

/* 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__leading {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Breadcrumb — lui-breadcrumb */
.lui-breadcrumb {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
}

.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-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
}

/* Beat material-symbols-ready color:unset — separators inherit copy-13 content otherwise */
html.material-symbols-ready .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;
}

.lui-breadcrumb__switcher-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
}

.lui-breadcrumb__switcher-body .lui-scroll-edge {
  flex: 1 1 auto;
  min-height: 0;
}

.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__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-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 {
  font-size: 16px;
  line-height: 1;
}

.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: 1;
}

.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); }

.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: lowercase;
}

.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__section-group + .lui-checkbox-select-all__section-group {
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__section-trigger {
  width: 100%;
}

.lui-checkbox-select-all__section-group .lui-accordion__content-inner {
  padding: 0;
}

.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 {
  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);
}

.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;
}

.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box::after {
  content: "";
  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--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; }
  .login__container { padding: 24px 16px; }
  .login__nav { top: 24px; left: 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; }
}

@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 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 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;
}

.page-er-entities {
  width: 100%;
  border-collapse: collapse;
}

.page-er-entities th,
.page-er-entities td {
  border: 1px solid var(--color-tertiary);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--color-content);
}

.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 {
  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;
}

.lui-datatable--hoverable .lui-datatable__body .lui-catalog-overview-table__product-row--navigable:hover,
.lui-datatable--hoverable .lui-datatable__body .lui-catalog-overview-table__product-row--navigable:hover > td {
  background: var(--color-tertiary);
}

.lui-datatable--hoverable .lui-datatable__body .lui-catalog-overview-table__product-row--navigable:hover .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 — Ace (parity with LoopOS Core LooposUi::ScriptEditor) */
.lui-script-editor__surface .ace_editor {
  font: 12px / normal var(--font-mono) !important;
  min-height: 190px !important;
  width: 100% !important;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.lui-script-editor__surface .ace_gutter {
  background: var(--color-secondary) !important;
}

.lui-script-editor__surface .ace_gutter-cell {
  color: var(--color-content-secondary) !important;
}

.lui-script-editor__surface .ace_fold-widget,
.lui-script-editor__surface .ace_bracket {
  display: none;
}

.lui-script-editor__surface.ruby-editor,
.lui-script-editor__surface.json-editor {
  min-height: 190px;
}

/* Record Metadata tab */
.lui-tab-metadata .lui-metadata-add[hidden],
.lui-tab-metadata [data-metadata-entries-target="addTrigger"][hidden],
.lui-tab-metadata [data-metadata-entries-target="emptyState"][hidden] {
  display: none !important;
}

.metadata-kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.metadata-kind-badge--custom {
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  border: 1px solid var(--color-tertiary);
}

.metadata-kind-badge--domain {
  background: var(--color-info-secondary);
  color: var(--color-info-primary);
}

.metadata-kind-badge--integration {
  background: var(--color-warning-secondary, color-mix(in srgb, var(--color-warning) 18%, var(--color-background)));
  color: var(--color-warning-primary, var(--color-warning));
}

.metadata-kind-badge--system {
  background: var(--color-danger-secondary);
  color: var(--color-danger-primary);
}

.lui-tab-metadata code {
  font-family: var(--font-mono);
}

/*
 * 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 {
  /* Beam controls — tune the effect here */
  --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);

  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:
    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%
    ),
    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:
    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%
    ),
    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:
    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%
    ),
    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:
    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%
    ),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-in, xor;
  mask:
    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%
    ),
    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 {
  --beam-saturate: 1.4;
}

: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:
    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%
    ),
    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 ul,
.lui-ai-summary-card__text ol {
  margin: 0;
  padding-left: 1.25em;
  list-style: disc;
}

.lui-ai-summary-card__text ol {
  list-style: decimal;
}

.lui-ai-summary-card__text li + li {
  margin-top: 4px;
}

.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;
}

.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);
}

@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-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__beefree,
.email-template-editor-page__beefree #bee-plugin-container {
  flex: 1;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.email-template-editor-page__html-form,
.email-template-editor-page__ckeditor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.email-template-editor-page__actions {
  margin-top: 16px;
  flex-shrink: 0;
}

.email-template-preview-frame {
  height: 100vh;
  width: 100%;
}

.email-template-preview-frame iframe {
  width: 100%;
  height: 100%;
  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) ──────────────────────── */
.pe-card {
  background: white;
  border-radius: 12px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
}
.pe-card--input {
  border: 1px solid #e9c5b3;
  box-shadow: 0px 2px 2.5px 0px rgba(181, 60, 0, 0.25);
}
.pe-card--info {
  border: 1px solid #cce1ff;
  box-shadow: 0px 2px 2.5px 0px rgba(11, 110, 249, 0.25);
}
.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  { background: #fbf5f2; color: #B53C00; }
.pe-card--info  .pe-card__icon  { background: #f2f7ff; color: #0B6EF9; }
.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 { background: #fbf5f2; }
.pe-card--info  .pe-card__preview { background: #f2f7ff; }

.pe-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 16px;
  background: white;
  user-select: none;
  pointer-events: none;
  opacity: 0.75;
}
.pe-pill--input  { border: 1px solid #e9c5b3; color: #B53C00; }
.pe-pill--check  { border: 1px solid #cce1ff; color: var(--color-content-secondary); gap: 6px; }
.pe-pill--neutral { border: 1px solid var(--color-tertiary); color: var(--color-content-secondary); }

.pe-preview-upload {
  border: 2px dashed #e9c5b3;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0.6;
  color: #B53C00;
}
.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;
}
/* ── 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 ──────────────────────────────────────── */

/* Dropkiq Liquid autocomplete (activation settings) */
#dropkiq-autosuggest-menu {
  z-index: 2000;
}


/* Miniaturas dos anexos de um pedido Darty MAX intake — usadas no detalhe do
   pedido e no separador injectado na página de processos, pelo mesmo partial.

   ⚠️ Classe própria e não utilitários de tamanho: esta folha **não é Tailwind**,
   é um conjunto escrito à mão, e `w-24`/`h-24` não existem. Escritas assim, as
   fotografias saíam no tamanho natural do telemóvel — vários MB desenhados a
   toda a largura, que foi exactamente o que aconteceu.

   ⚠️ A imagem é o **original** encolhido aqui. As variantes do ActiveStorage não
   funcionam nesta aplicação: `active_storage_attachments.record_id` é uuid e o
   `ActiveStorage::VariantRecord` usa ids bigint. O `object-fit` evita a
   distorção, mas o download continua a ser da fotografia inteira — razão para
   não levar isto para uma listagem. */
.dmi-attachment-thumb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 88px;
  text-decoration: none;
}

.dmi-attachment-thumb__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  object-fit: cover;
  overflow: hidden;
}
/* 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__capacity,
.bookings-process-add,
.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;
}

.bookings-process-add {
  align-items: flex-end;
}

/* 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;
}

.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;
  }
}

/* Darty MAX Technical — operator customer photos on the workbench.
   Public call-tracking styles live in darty_max_technical_public.css. */
.dmt-customer-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 8px;
}

.dmt-customer-portal-actions {
  flex: 0 0 auto;
  min-width: 0;
}

.dmt-customer-photos-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dmt-customer-photos:has(> .lui-empty-state) {
  display: block;
}

.dmt-customer-photos > .lui-empty-state--text {
  padding: 0;
}

.dmt-customer-photos__thumb {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.dmt-customer-photos__full {
  display: block;
  width: 100%;
  max-height: min(70dvh, 40rem);
  object-fit: contain;
  background: var(--color-secondary);
  border-radius: 6px;
}

/* ── 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) */
.seedsx-matrix {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
}

.seedsx-matrix th,
.seedsx-matrix td {
  padding: 0;
  text-align: left;
  vertical-align: top;
}

.seedsx-matrix__corner {
  width: 210px;
}

.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;
}

/* 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;
  }
}