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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html {
  color-scheme: light;
}

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

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

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

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

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

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

/* Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 4px; }
.gap-1\.5 { gap: 6px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.gap-8 { gap: 32px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }
.w-full { width: 100%; }
.min-w-0 { min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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); }


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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

/* Toast — floating notifications */
.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,
[data-app="hubs"] .lui-button--primary,
[data-app="hubs"] .lui-button--neutral--primary,
[data-app="handling"] .lui-button--primary,
[data-app="handling"] .lui-button--neutral--primary {
  background: var(--color-app);
  color: var(--color-app-fg);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   Reportado 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,
.protocol-answer-form .protocol-answer-bool > .lui-checkbox .lui-checkbox__label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Corpo de um elemento Info. Vem por `simple_format`, logo são `<p>` e não uma
   linha só — 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%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Hover-reveal — table AND datatable (datatable uses lui-datatable--hoverable, not lui-table--hoverable). */
.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; }
}

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

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

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

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

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

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

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


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

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

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

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

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

.lui-datatable__pagination {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Voice Test Lab transcript panels — `.flex` beats UA [hidden]. */
[data-integrations-voice-test-target="transcript"][hidden],
[data-integrations-voice-test-target="fullLogs"][hidden],
[data-integrations-voice-test-target="transcript"].hidden,
[data-integrations-voice-test-target="fullLogs"].hidden {
  display: none !important;
}

/* pills */
.lui-tabs--pills .lui-tabs__list {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
  overflow: visible;
}

.lui-tabs--pills .lui-tabs__tab { border-radius: 6px; }

.lui-tabs--pills .lui-tabs__tab[aria-selected="true"],
.lui-tabs--pills .lui-tabs__tab--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.10);
}

/* underline (route nav + Flux show/detail sections) */
.lui-tabs--underline .lui-tabs__nav {
  position: relative;
}

.lui-tabs--underline .lui-tabs__nav.lui-scroll-edge {
  flex: 0 0 auto;
}

.lui-tabs--underline .lui-tabs__nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-tertiary);
  pointer-events: none;
  z-index: 0;
}

.lui-tabs--underline .lui-tabs__list {
  position: relative;
  z-index: 1;
  gap: 0;
  align-items: flex-end;
  border-bottom: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.lui-tabs--underline .lui-tabs__list.lui-scroll-edge__viewport {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  width: 100%;
}

.lui-tabs--underline .lui-tabs__list::-webkit-scrollbar {
  display: none;
}

.lui-tabs--underline .lui-tabs__tab {
  position: relative;
  z-index: 1;
  border-radius: 0;
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 8px;
}

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

/* 2px accent on the same bottom edge, painted above the list rule */
.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.lui-tabs--underline .lui-tabs__tab--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-chrome-accent);
  pointer-events: none;
  z-index: 1;
}

/* low-contrast */
.lui-tabs--low-contrast .lui-tabs__list {
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  overflow: visible;
}

.lui-tabs--low-contrast .lui-tabs__tab { border-radius: 6px; }

.lui-tabs--low-contrast .lui-tabs__tab[aria-selected="true"],
.lui-tabs--low-contrast .lui-tabs__tab--active {
  background: var(--color-background);
  color: var(--color-content);
  border: 1px solid var(--color-tertiary);
}

/* vertical */
.lui-tabs--vertical {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 16px;
}

.lui-tabs--vertical .lui-tabs__list {
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  overflow: visible;
}

.lui-tabs__progress {
  grid-column: 1 / -1;
  height: 2px;
  border-radius: 9999px;
  background: var(--color-chrome-accent);
  transform-origin: left;
  transform: scaleX(0);
}

.lui-profile-subnav .lui-tabs__list {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.lui-profile-subnav .lui-tabs__list::-webkit-scrollbar {
  display: none;
}

/* App shell */
.lui-app-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

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

.lui-app-layout__main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

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

.lui-app-layout__main .lui-app-layout__workspace--catalog-explorer {
  flex: 1;
  min-height: 0;
}

/* Sidebar — Rails Blocks lui-sidebar rail (loopos-ui-v2 §2 + sidebar.md) */
.lui-sidebar {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 0;
}

.lui-sidebar__rail {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-expanded-width);
  height: 100%;
  min-height: 0;
  background: var(--color-primary);
  border-right: 1px solid var(--color-tertiary);
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lui-sidebar__rail--collapsed {
  width: var(--sidebar-collapsed-width);
}

.lui-sidebar__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-sidebar__brand-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-sidebar__brand-label {
  color: var(--color-content-secondary);
  max-width: 100%;
}

/* Dev-only marker (WORKTREE_SLUG) — its own little section under the brand/logo row,
   set off by a divider (mirrors .lui-sidebar__summary's own border-bottom below it). */
.lui-sidebar__worktree-tag {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-sidebar__worktree-tag-label {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  color: var(--color-content-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

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

.lui-flux-app-mark-trigger {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* LoopOS Flux App identity marker — brand symbol only, name on hover (ADR-025/026). */
.lui-flux-app-mark {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 4px;
  object-fit: contain;
  vertical-align: middle;
}

html[data-theme="dark"] .lui-flux-app-mark--light,
html:not([data-theme="dark"]) .lui-flux-app-mark--dark {
  display: none;
}

.lui-sidebar__bottom {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: auto;
  overflow: visible;
}

.lui-sidebar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.lui-sidebar__brand--static {
  pointer-events: none;
}

.lui-sidebar__brand--interactive {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  border-radius: 6px;
}

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

.lui-sidebar__chrome-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-sidebar__chrome-bar--tenant,
.lui-sidebar__chrome-bar--admin-identity {
  min-width: 0;
}

.lui-sidebar__chrome-bar--admin-identity {
  height: 36px;
  padding: 4px 8px;
  border-bottom: 0;
}

/* Tenant / partner selector — denser leading inset (4px density step) for 32px avatar */
.lui-sidebar__chrome-bar--tenant .lui-sidebar__row {
  padding-left: 4px;
}

.lui-sidebar__wordmark,
.lui-wordmark__img {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}

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

.login__logo.lui-wordmark__img {
  height: 32px;
}

.login__logo-section--flux .login__logo-mark {
  height: 56px;
  width: auto;
  object-fit: contain;
}

html[data-theme="dark"] .login__logo-mark--dark,
html:not([data-theme="dark"]) .login__logo-mark--light {
  display: none;
}

.lui-sidebar__collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
}

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

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

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

.lui-sidebar__rail--collapsed .lui-sidebar__wordmark,
.lui-sidebar__rail--collapsed .lui-sidebar__brand-label,
.lui-sidebar__rail--collapsed .lui-sidebar__label,
.lui-sidebar__rail--collapsed .lui-sidebar__account-meta,
.lui-sidebar__rail--collapsed .lui-sidebar__account-badge,
.lui-sidebar__rail--collapsed .lui-sidebar__chev,
.lui-sidebar__rail--collapsed .lui-sidebar__worktree-tag {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__summary {
  justify-content: center;
  padding-inline: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__brand--static {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__collapse-btn {
  margin-left: 0;
}

.lui-sidebar__rail--collapsed :is(
  .lui-sidebar__chrome-bar--tenant,
  .lui-sidebar__chrome-bar--admin-identity
) {
  justify-content: center;
  padding-inline: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__chrome-bar--admin-identity {
  height: 44px;
  padding-block: 4px;
}

.lui-sidebar__rail--collapsed .lui-sidebar__chrome-bar--tenant .lui-sidebar__row {
  padding-left: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__item,
.lui-sidebar__rail--collapsed .lui-sidebar__row {
  justify-content: center;
  align-items: center;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  margin-inline: auto;
  gap: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__row--account {
  height: 36px;
  min-height: 36px;
}

.lui-sidebar__rail--collapsed .lui-sidebar__footer {
  padding-inline: 0;
  align-items: center;
}

.lui-sidebar__icon {
  color: currentColor;
  flex-shrink: 0;
}

.lui-sidebar__icon--logo {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
  object-fit: contain;
  overflow: hidden;
}

/* MIcon custom SVGs (sidecar m_icon.css is not in the Flux bundle). */
.lui-m_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-style: normal;
  line-height: 0;
  overflow: hidden;
  width: var(--lui-micon-size, 16px);
  height: var(--lui-micon-size, 16px);
}

.lui-m_icon > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Custom SVG nav marks (Validation, …) sit on a 20px squircle plate. */
.lui-nav-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  corner-shape: squircle;
  background: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
  flex-shrink: 0;
  overflow: hidden;
}

.lui-nav-icon-tile .lui-m_icon {
  width: 18px;
  height: 18px;
}

/* App logo on the 48px Core bar (process show opened from a Flux App). */
.lui-nav-icon-tile--md {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.lui-nav-icon-tile--md .lui-m_icon {
  width: 29px;
  height: 29px;
}

/* Flux Apps action-bar identity — 56px tile (bar is lui-action-bar--flux-app 96px). */
.lui-nav-icon-tile--lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
}

.lui-nav-icon-tile--lg .lui-m_icon {
  width: 50px;
  height: 50px;
}

.lui-sidebar__item .copy-13,
.lui-sidebar__section-toggle .copy-13,
.lui-sidebar__row .copy-13 {
  color: inherit;
}

.lui-sidebar__item--active .lui-sidebar__label.copy-13 {
  color: inherit;
}

.lui-sidebar__app-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.lui-sidebar__nav-shell {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Floating scrollbar — fixed gutter (no layout shift on hover); thumb visible on host hover only */
.lui-floating-scroll {
  overflow: auto;
  min-height: 0;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.lui-floating-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.lui-floating-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.lui-floating-scroll::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}

.lui-floating-scroll-host:hover .lui-floating-scroll,
.lui-floating-scroll-host:focus-within .lui-floating-scroll {
  scrollbar-color: color-mix(in srgb, var(--color-content) 24%, transparent) transparent;
}

.lui-floating-scroll-host:hover .lui-floating-scroll::-webkit-scrollbar-thumb,
.lui-floating-scroll-host:focus-within .lui-floating-scroll::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--color-content) 36%, transparent);
}

/* ─── Scroll edge fades (sidebar nav, breadcrumb switcher, flow catalog, …) ─ */

.lui-scroll-edge {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  --lui-scroll-edge-surface: var(--color-primary);
}

.lui-scroll-edge--surface-primary {
  --lui-scroll-edge-surface: var(--color-primary);
}

.lui-scroll-edge--surface-background {
  --lui-scroll-edge-surface: var(--color-background);
}

.lui-scroll-edge--surface-secondary {
  --lui-scroll-edge-surface: var(--color-secondary);
}

.lui-scroll-edge__viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.lui-scroll-edge__fade {
  position: absolute;
  pointer-events: none;
  /* Above sticky table cells (actions z-index 3) so horizontal hints stay visible. */
  z-index: 5;
  opacity: 0;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-scroll-edge__fade--top,
.lui-scroll-edge__fade--bottom {
  left: 0;
  right: 0;
  height: 20px;
}

.lui-scroll-edge__fade--top {
  top: 0;
  background: linear-gradient(
    to bottom,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--left,
.lui-scroll-edge__fade--right {
  top: 0;
  bottom: 0;
  width: 20px;
}

.lui-scroll-edge__fade--left {
  left: 0;
  background: linear-gradient(
    to right,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

.lui-scroll-edge__fade--right {
  right: 0;
  background: linear-gradient(
    to left,
    var(--lui-scroll-edge-surface) 0%,
    color-mix(in srgb, var(--lui-scroll-edge-surface) 55%, transparent) 45%,
    transparent 100%
  );
}

/* Table/datatable: match corner radius on horizontal fades (parent overflow:hidden clips to border). */
.lui-table > .lui-scroll-edge > .lui-scroll-edge__fade--left,
.lui-datatable > .lui-scroll-edge > .lui-scroll-edge__fade--left {
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.lui-table > .lui-scroll-edge > .lui-scroll-edge__fade--right,
.lui-datatable > .lui-scroll-edge > .lui-scroll-edge__fade--right {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.lui-scroll-edge--fade-top .lui-scroll-edge__fade--top:not([hidden]),
.lui-scroll-edge--fade-bottom .lui-scroll-edge__fade--bottom:not([hidden]),
.lui-scroll-edge--fade-left .lui-scroll-edge__fade--left:not([hidden]),
.lui-scroll-edge--fade-right .lui-scroll-edge__fade--right:not([hidden]) {
  opacity: 1;
}

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

.lui-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  min-height: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__nav {
  padding-inline: 0;
  align-items: center;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Top-level page links are flex children of the scrollable nav — must not shrink (Dashboard squashes otherwise). */
.lui-sidebar__nav > .lui-sidebar__item {
  flex-shrink: 0;
}

.lui-sidebar__section {
  margin-top: 8px;
  flex-shrink: 0;
}

.lui-sidebar__section:first-child {
  margin-top: 0;
}

.lui-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-top: 1px solid var(--color-tertiary);
  flex-shrink: 0;
  overflow: visible;
}

.lui-sidebar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  min-height: 28px;
  flex-shrink: 0;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--color-content);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  position: relative;
}

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

/* ---- New-feature indicator (config/new_features.yml) -------------------- */

/* Static, never animated: this reads as "unread", not as an alert, so it needs
   no prefers-reduced-motion escape hatch. */
.lui-new-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-informative);
}

/* Collapsed rail hides labels, so pin the dot to the icon corner. Deliberately
   NOT `lui-sidebar__badge`: that class is display:none in the collapsed rail and
   the dot has to survive there. */
.lui-sidebar__rail--collapsed .lui-sidebar__new-dot {
  position: absolute;
  top: 4px;
  right: 4px;
}

.lui-sidebar__section-toggle { position: relative; }

.lui-sidebar__new-dot--section { margin-left: 4px; }

/* The section rollup is redundant once its items are visible. Done in CSS, not
   ERB, because sidebar_section_controller.js expands/collapses client-side with
   no reload — a server-side conditional would go stale on the first toggle. */
.lui-sidebar__section:not(.lui-sidebar__section--collapsed)
  .lui-sidebar__section-toggle .lui-new-dot {
  display: none;
}

.lui-tabs__tab .lui-new-dot { margin-left: 2px; }

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

.lui-sidebar__item--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}

.lui-sidebar__item--disabled {
  opacity: 0.45;
}

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

/* Collapsible nav section (Flux: button-toggle + Stimulus + server sync) */
.lui-sidebar__section-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  min-height: 28px;
  flex-shrink: 0;
  padding: 0 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  font-family: var(--font-sans);
}

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

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

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

.lui-sidebar__section-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
  transition:
    opacity var(--default-transition-duration) var(--default-transition-timing-function),
    transform var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-sidebar__section-toggle:hover .lui-sidebar__section-chevron,
.lui-sidebar__section-toggle:focus-visible .lui-sidebar__section-chevron {
  opacity: 1;
}

.lui-sidebar__section--collapsed .lui-sidebar__section-chevron {
  transform: translateY(-50%) rotate(-90deg);
}

.lui-sidebar__section-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

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

.lui-sidebar__rail--collapsed .lui-sidebar__section-toggle {
  display: none;
}

.lui-sidebar__rail--collapsed .lui-sidebar__section {
  margin-top: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__section-body {
  padding-top: 0;
}

.lui-sidebar__rail--collapsed .lui-sidebar__badge {
  display: none;
}

.lui-sidebar__badge-group {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

.lui-sidebar__badge--count {
  margin-left: auto;
  min-width: 1.25rem;
  text-align: center;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-sidebar__badge-group .lui-sidebar__badge--count-slot {
  margin-left: 0;
  cursor: default;
}

.lui-sidebar__count-tooltip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.lui-sidebar__count-tooltip-mark {
  display: inline-flex;
  flex-shrink: 0;
}

.lui-sidebar__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-sidebar__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--color-content);
  background: none;
  border: none;
  text-align: left;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.lui-sidebar__row--trigger {
  cursor: pointer;
}

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

.lui-sidebar__row--trigger:active,
.lui-sidebar__row--trigger[data-state="open"],
.lui-sidebar__row--trigger.lui-sidebar__row--active,
.lui-sidebar__row--trigger[data-state="open"]:hover {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}

.lui-sidebar__row--trigger:active .lui-sidebar__icon:not(.lui-avatar),
.lui-sidebar__row--trigger[data-state="open"] .lui-sidebar__icon:not(.lui-avatar),
.lui-sidebar__row--trigger.lui-sidebar__row--active .lui-sidebar__icon:not(.lui-avatar),
.lui-sidebar__row--trigger:active .lui-sidebar__chev,
.lui-sidebar__row--trigger[data-state="open"] .lui-sidebar__chev,
.lui-sidebar__row--trigger.lui-sidebar__row--active .lui-sidebar__chev {
  color: var(--color-chrome-accent);
}

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

.lui-sidebar__row--trigger .lui-sidebar__label {
  user-select: none;
}

.lui-sidebar__row--static {
  cursor: default;
}

.lui-sidebar__admin-identity {
  height: 28px;
  min-height: 28px;
}

.lui-sidebar__row--account {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
}

.lui-sidebar__account-badge {
  flex-shrink: 0;
}

.lui-sidebar__chev {
  margin-left: auto;
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-sidebar__account-link {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 9999px; /* match circle user avatar focus ring */
}

.lui-sidebar__account-link:hover,
.lui-sidebar__account-link:focus-visible,
.lui-sidebar__account-link:active {
  background: transparent;
  color: inherit;
}

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

.lui-sidebar__account-meta {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.lui-sidebar__account-meta > .copy-13-medium,
.lui-sidebar__account-meta > .lui-sidebar__label {
  line-height: 18px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-avatar {
  position: relative;
  isolation: isolate;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

/* Soft rim inside the slot — difference blend + mid-gray at ~50% opacity stays visible on any photo/fill */
.lui-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(69, 69, 69, 0.25);
  mix-blend-mode: difference;
  pointer-events: none;
}

/* Initials fallback — neutral gray (light fill, secondary label) */
span.lui-avatar:not(:has(> img)) {
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  font-weight: 400;
}

.lui-avatar--sm {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

.lui-avatar--md {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}

.lui-avatar--circle { border-radius: 9999px; }
.lui-avatar--square { border-radius: 4px; }

/* Photo nested inside the slot (Flux default via avatar_tag) */
.lui-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

/* Skeleton while the nested photo is in flight (Active Storage redirect). */
span.lui-avatar.lui-avatar--loading > img {
  opacity: 0;
}

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

span.lui-avatar.lui-avatar--loading > .lui-avatar__skeleton {
  display: block;
}

/* @deprecated — bare img.lui-avatar during migration; prefer span.lui-avatar > img
   (cannot host ::after blend rim — replaced element). Flat fallback only. */
img.lui-avatar {
  display: block;
  object-fit: cover;
  object-position: center;
  border: 1px solid color-mix(in srgb, var(--color-content) 65%, var(--color-background));
}

img.lui-avatar.lui-avatar--sm {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
}

img.lui-avatar.lui-avatar--md {
  width: 32px;
  height: 32px;
  max-width: 32px;
  max-height: 32px;
}

/* @deprecated — use .lui-avatar; kept for legacy markup during migration */
.lui-sidebar__avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  border: 1px solid var(--color-tertiary);
  font-weight: 400;
}

.lui-sidebar__avatar--circle { border-radius: 9999px; }

.lui-sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lui-sidebar__mobile {
  position: fixed;
  inset: 0;
  /* Leaflet panes/controls sit at 400–1000; the drawer must cover them. */
  z-index: 1100;
}

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

.lui-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-foreground) 40%, transparent);
}

.lui-sidebar__panel {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-expanded-width);
  max-width: 85vw;
  height: 100%;
  min-height: 0;
  background: var(--color-primary);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.1);
  transform: translateX(-100%);
  transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
}

.lui-sidebar__mobile--open .lui-sidebar__panel {
  transform: translateX(0);
}

.lui-sidebar__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  box-sizing: border-box;
  padding: 4px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

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

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

.lui-sidebar-trigger { display: none; }

/* Dropdown — Rails Blocks lui-dropdown */
.lui-dropdown {
  position: relative;
  width: fit-content;
}

.lui-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease;
}

.lui-dropdown__trigger:hover,
.lui-dropdown__trigger[data-state="open"] {
  background: var(--color-secondary);
}

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

.lui-dropdown__trigger:disabled {
  cursor: not-allowed;
  color: var(--color-foreground);
}

.lui-dropdown__trigger-icon {
  font-size: 16px;
  color: var(--color-content-secondary);
  transition: transform 120ms ease;
}

.lui-dropdown__trigger[data-state="open"] .lui-dropdown__trigger-icon {
  transform: rotate(180deg);
}

.lui-dropdown--icon .lui-dropdown__trigger {
  padding: 8px;
  gap: 0;
}

.lui-dropdown--text .lui-dropdown__trigger {
  border: none;
  background: transparent;
  padding: 6px 10px;
}

.lui-dropdown--text .lui-dropdown__trigger:hover {
  background: var(--color-secondary);
}

.lui-dropdown--sidebar-row {
  width: 100%;
}

.lui-dropdown--sidebar-row > .lui-sidebar__row {
  width: 100%;
}

.lui-dropdown--sidebar-row .lui-dropdown__menu {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 70;
}

.lui-dropdown__bridge {
  position: fixed;
  pointer-events: auto;
  background: transparent;
  z-index: 2147483645;
}

.lui-dropdown__menu {
  position: absolute;
  z-index: 60;
  margin: 0;
  padding: 0;
  min-width: 12rem;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  color-scheme: light dark;
  box-shadow: none;
}

.lui-dropdown__menu:not([open]):not(.lui-combobox__dropdown):not(.lui-select__dropdown):not(.lui-icon-picker__panel):not(.lui-color-picker__panel) {
  display: none;
}

.lui-dropdown__menu[open] {
  display: block;
}

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

.lui-dropdown__menu::backdrop {
  background: transparent;
}

.lui-dropdown--bottom-start .lui-dropdown__menu {
  top: calc(100% + 4px);
  left: 0;
}

.lui-dropdown--top-start .lui-dropdown__menu {
  bottom: calc(100% + 4px);
  top: auto;
  left: 0;
}

.lui-dropdown--right-start .lui-dropdown__menu {
  left: calc(100% + 4px);
  right: auto;
  top: 0;
  bottom: auto;
}

.lui-dropdown--right-end .lui-dropdown__menu {
  left: calc(100% + 4px);
  right: auto;
  top: auto;
  bottom: 0;
}

.lui-dropdown__list {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.lui-dropdown__label {
  padding: 6px 8px 4px;
  color: var(--color-content-secondary);
}

.lui-dropdown__search {
  padding: 4px 4px 0;
}

.lui-dropdown__scroll {
  max-height: min(16rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

.lui-dropdown__scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--color-tertiary);
}

.lui-dropdown__empty {
  margin: 0;
  padding: 8px;
  text-align: center;
}

.lui-dropdown__empty.hidden {
  display: none;
}

.lui-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 100ms ease;
}

/* Author `display: flex` beats the UA [hidden] rule — country/combobox filters set hidden. */
.lui-dropdown__item[hidden] {
  display: none !important;
}

.lui-dropdown__item:hover,
.lui-dropdown__item:focus-visible {
  outline: none;
  background: var(--color-secondary);
}

.lui-dropdown__item--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-chrome-accent);
}

.lui-dropdown__item-icon:not(.lui-avatar) {
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.lui-dropdown__item-text {
  flex: 1;
  min-width: 0;
}

.lui-dropdown__shortcut {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-content-secondary);
  font-variant-numeric: tabular-nums;
}

.lui-dropdown__badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-informative-fg);
}

.lui-dropdown__item .lui-badge {
  flex-shrink: 0;
}

.lui-catalog-selector .lui-dropdown__menu {
  min-width: 240px;
}

/* icon + label + caret — label absorbs width and ellipsizes; icons stay shrink-0 via .lui-button__icon */
.lui-catalog-selector__trigger {
  min-width: 0;
  max-width: 100%;
}

.lui-catalog-selector__trigger .lui-button__label,
.lui-catalog-selector__label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: start;
}

.lui-dropdown__item--destructive,
.lui-dropdown__item--destructive .lui-dropdown__item-icon {
  color: var(--color-danger);
}

.lui-dropdown__item--destructive:hover,
.lui-dropdown__item--destructive:focus-visible {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
}

.lui-dropdown__divider {
  height: 1px;
  margin: 4px 0;
  background: var(--color-tertiary);
}

.lui-dropdown__form {
  margin: 0;
  width: 100%;
}

.lui-dropdown__form.hidden {
  display: none;
}

.lui-dropdown__form .lui-dropdown__item {
  width: 100%;
}

.lui-dropdown__switch-row {
  padding: 6px 8px;
}

.lui-dropdown__account-header {
  padding: 6px 8px;
}

/* Quiet deploy/version meta above account menu actions — not interactive. */
.lui-dropdown__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px 6px;
}

.lui-dropdown__meta-label {
  flex-shrink: 0;
}

.lui-dropdown__release {
  min-width: 0;
  max-width: 100%;
  color: var(--color-content-secondary);
  font-variant-numeric: tabular-nums;
  cursor: default;
  user-select: text;
}

.lui-dropdown__account-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lui-dropdown__account-identity > .copy-13-medium {
  line-height: 18px;
}

.lui-dropdown__account-identity > .copy-12 {
  line-height: 16px;
}

.lui-dropdown__menu--account .lui-dropdown__theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
}

.lui-dropdown__theme-label {
  color: var(--color-content);
  flex-shrink: 0;
}

.lui-theme-segment--compact {
  padding: 2px 1px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
}

.lui-theme-segment--compact .lui-theme-segment__option {
  width: 24px;
  height: 24px;
}

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

/* Tooltip wrappers around a segment option must not steal the pill metrics. */
.lui-theme-segment .lui-tooltip__trigger {
  padding: 0;
  border: none;
  background: transparent;
  gap: 0;
  width: auto;
  height: auto;
  min-height: 0;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
  line-height: 0;
}

.lui-theme-segment .lui-tooltip__trigger:hover,
.lui-theme-segment .lui-tooltip__trigger:focus-visible {
  background: transparent;
  box-shadow: none;
}

.lui-theme-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border-radius: 9999px;
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-theme-segment__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

a.lui-theme-segment__option {
  text-decoration: none;
}

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

.lui-theme-segment__option--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

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

.lui-theme-segment__option--active:focus-visible {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--color-focus-ring);
}

/* Account menu theme toggle — selection via --active only; no mouse-focus ring */
.lui-dropdown__menu--account .lui-theme-segment__option:focus {
  outline: none;
}

.lui-dropdown__menu--account .lui-theme-segment__option:focus:not(:focus-visible) {
  box-shadow: none;
}

.lui-icon-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border-radius: 9999px;
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
}

.lui-icon-segment--compact {
  padding: 2px 1px;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
}

.lui-icon-segment--compact .lui-icon-segment__option {
  width: 24px;
  height: 24px;
}

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

.lui-icon-segment__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

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

.lui-icon-segment__option--active {
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

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

.lui-icon-segment__option--active:focus-visible {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--color-focus-ring);
}

.lui-dropdown__menu--account .lui-theme-segment__option--active:focus:not(:focus-visible) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.lui-dropdown__menu--account .lui-theme-segment__option:focus-visible {
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

.lui-dropdown__menu--account .lui-theme-segment__option--active:focus-visible {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 0 0 2px var(--color-chrome-accent);
}

.lui-dropdown__item--trailing-icon {
  justify-content: space-between;
}

.lui-dropdown__item--trailing-icon .lui-dropdown__item-icon {
  margin-left: auto;
  color: var(--color-content-secondary);
}

.lui-dropdown__item--destructive.lui-dropdown__item--trailing-icon .lui-dropdown__item-icon {
  color: var(--color-danger);
}

.lui-dropdown__item--active.lui-dropdown__item--trailing-icon .lui-dropdown__item-icon {
  color: var(--color-chrome-accent);
}

/* Switch — compact toggle (loopos-ui-v2 switch.md; sm size for dropdown rows) */
.lui-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lui-switch--label-left {
  justify-content: space-between;
  width: 100%;
}

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

.lui-switch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

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

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

.lui-switch__thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.1);
  transition: transform 140ms ease;
  transform: translateX(0);
}

.lui-switch__input:not(:disabled):hover ~ .lui-switch__track {
  background: var(--color-content-secondary);
  border-color: var(--color-content-secondary);
}

.lui-switch__input:checked ~ .lui-switch__track {
  background: var(--color-chrome-accent);
  border-color: var(--color-chrome-accent);
}

.lui-switch__input:not(:disabled):checked:hover ~ .lui-switch__track {
  background: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
  border-color: color-mix(in srgb, var(--color-chrome-accent) 85%, black);
}

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

.lui-switch__input:disabled ~ .lui-switch__track {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

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

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

/* Flux Apps: fixed 96px chrome — identity logo centered, not cropped. */
.lui-action-bar--flux-app {
  height: 96px;
  min-height: 96px;
  overflow: visible;
}

/* overflow-x:hidden on .lui-breadcrumb computes overflow-y away from visible
   (CSS overflow pairing) and flat-clips tall identity tiles. Flux Apps trails
   are short (no Dashboard) — keep overflow visible so the logo is not cut. */
.lui-action-bar--flux-app .lui-action-bar__start,
.lui-action-bar--flux-app .lui-action-bar__trail,
.lui-action-bar--flux-app .lui-breadcrumb,
.lui-action-bar--flux-app .lui-breadcrumb__list,
.lui-action-bar--flux-app .lui-breadcrumb__item,
.lui-action-bar--flux-app .lui-breadcrumb__current,
.lui-action-bar--flux-app .lui-breadcrumb__link,
.lui-action-bar--flux-app .lui-breadcrumb__label-group {
  overflow: visible;
}

/* Bigger identity tile (~64px) on the 96px bar; don't clip glyph/shadow. */
.lui-action-bar--flux-app .lui-nav-icon-tile--lg {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: visible;
}

.lui-action-bar--flux-app .lui-nav-icon-tile--lg .lui-m_icon,
.lui-action-bar--flux-app .lui-nav-icon-tile--lg .lui-breadcrumb__icon {
  --lui-micon-size: 56px;
  width: 56px;
  height: 56px;
  max-width: none;
  max-height: none;
  overflow: visible;
}

/* Large identity crumb: keep pad around the tile (do not zero vertical). */
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-nav-icon-tile--lg),
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-breadcrumb__icon--lg),
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-nav-icon-tile--lg),
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-breadcrumb__icon--lg) {
  padding: 8px 12px;
}

.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-nav-icon-tile--lg) .lui-breadcrumb__label-group,
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-breadcrumb__icon--lg) .lui-breadcrumb__label-group,
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-nav-icon-tile--lg) .lui-breadcrumb__label-group,
.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-breadcrumb__icon--lg) .lui-breadcrumb__label-group {
  gap: 12px;
}

.lui-action-bar--flux-app .lui-breadcrumb__current:has(.lui-nav-icon-tile--lg) .heading-16,
.lui-action-bar--flux-app .lui-breadcrumb__link:has(.lui-nav-icon-tile--lg) .heading-16 {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Flux Apps + leading (store switcher): below 767px — same collapse as the
   Hubs attendance split — stack the control full-width under the logo row
   instead of squeezing it into the 96px identity line. Desktop unchanged. */
@media (max-width: 767px) {
  .lui-action-bar--flux-app:has(.lui-action-bar__leading) {
    height: auto;
    min-height: 96px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .lui-action-bar--flux-app:has(.lui-action-bar__leading) .lui-action-bar__start {
    flex: 1 1 100%;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }

  .lui-action-bar--flux-app:has(.lui-action-bar__leading) .lui-action-bar__trail {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lui-action-bar--flux-app:has(.lui-action-bar__leading) .lui-action-bar__leading {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

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

/* Empty state — LoopOS native (v1: no icons, no border) */
.lui-empty-state {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.lui-empty-state--default,
.lui-empty-state--action,
.lui-empty-state--link,
.lui-empty-state--filtered {
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 16px;
}

.lui-empty-state--text {
  gap: 0;
  padding: 12px 0;
  text-align: left;
}

.lui-empty-state--text.lui-empty-state--center,
.lui-empty-state--table {
  text-align: center;
  padding: 48px 16px;
}

.lui-empty-state--inline {
  gap: 0;
  padding: 10px 14px;
  text-align: left;
}

/* Author `display: flex` on `.lui-empty-state` beats Tailwind `.hidden`. */
.lui-empty-state.hidden,
.lui-empty-state[hidden] {
  display: none;
}

.lui-empty-state__body {
  max-width: 28rem;
}

.lui-empty-state__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Icon slot — reserved for v2 follow-up (native/empty-state.md) */
.lui-empty-state__icon {
  flex-shrink: 0;
}

.lui-tab-panel-error {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-danger-fg);
}

.lui-tab-notes__footer,
.lui-tab-attachments__footer {
  border: 1px dashed var(--color-tertiary);
}

.lui-tab-panel-divider {
  background: var(--color-tertiary);
}

/*
 * Note card — library-tile footer geometry inverted.
 * The shell keeps the continuous outer border; the foreground body overlaps that
 * border by 1px on the inline and bottom edges, so there is never a doubled line.
 */
.lui-card.lui-note-card {
  padding: 0;
  overflow: hidden;
  background: var(--color-secondary);
}

.lui-note-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--color-secondary);
}

.lui-note-card__header-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

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

.lui-note-card__title {
  min-width: 0;
}

.lui-note-card__meta {
  flex-shrink: 0;
  white-space: nowrap;
}

.lui-note-card__content {
  position: relative;
  z-index: 1;
  width: calc(100% + 2px);
  margin-inline: -1px;
  margin-bottom: -1px;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.lui-note-card__body,
.lui-note-card__editor {
  background: var(--color-background);
}

/* Author `.flex { display: flex }` beats the UA [hidden] rule — exclusivity for display↔edit. */
.lui-note-card__body[hidden],
.lui-note-card__editor[hidden],
.lui-note-card--composer[hidden],
.lui-note-card-create-actions[hidden],
.lui-note-card [data-note-card-target="editButton"][hidden] {
  display: none !important;
}

/* Markdown block editor — native note/operator-notes authoring (serializes Markdown). */
.lui-markdown-blocks {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

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

.lui-markdown-blocks__canvas {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: var(--lui-markdown-blocks-min, 8rem);
  max-height: var(--lui-markdown-blocks-max, 20rem);
  padding: 8px;
  overflow-y: auto;
}

.lui-markdown-blocks__row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.lui-markdown-blocks__row:not([data-type="numbered"]) {
  counter-reset: lui-md-ol;
}

.lui-markdown-blocks__row[data-type="numbered"] {
  counter-increment: lui-md-ol;
}

.lui-markdown-blocks__row[data-type="bullet"],
.lui-markdown-blocks__row[data-type="numbered"] {
  align-items: flex-start;
}

.lui-markdown-blocks__gutter {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: grab;
  touch-action: none;
  opacity: 0;
}

.lui-markdown-blocks__row:hover .lui-markdown-blocks__gutter,
.lui-markdown-blocks__row:focus-within .lui-markdown-blocks__gutter,
.lui-markdown-blocks__gutter:focus-visible,
.lui-markdown-blocks__row--dragging .lui-markdown-blocks__gutter {
  opacity: 1;
}

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

.lui-markdown-blocks--dragging,
.lui-markdown-blocks--dragging * {
  cursor: grabbing;
  user-select: none;
}

.lui-markdown-blocks__row--dragging {
  opacity: 0.6;
}

.lui-markdown-blocks__marker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 16px;
  height: 18px;
  color: var(--color-content-secondary);
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
}

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

.lui-markdown-blocks__row[data-type="bullet"] .lui-markdown-blocks__marker::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.lui-markdown-blocks__row[data-type="numbered"] .lui-markdown-blocks__marker {
  min-width: 1.25rem;
}

.lui-markdown-blocks__row[data-type="numbered"] .lui-markdown-blocks__marker::before {
  content: counter(lui-md-ol) ".";
}

.lui-markdown-blocks__body {
  flex: 1;
  min-width: 0;
  min-height: 18px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-content);
}

.lui-markdown-blocks__row:not([data-type="bullet"]):not([data-type="numbered"]) .lui-markdown-blocks__body:empty:is(:focus, .is-focused)::before,
.lui-markdown-blocks__row:not([data-type="bullet"]):not([data-type="numbered"]) .lui-markdown-blocks__body.is-empty:is(:focus, .is-focused)::before,
.lui-markdown-blocks__row:not([data-type="bullet"]):not([data-type="numbered"]) .lui-markdown-blocks__body:has(> br:only-child):is(:focus, .is-focused)::before {
  display: block;
  content: attr(data-placeholder);
  color: var(--color-content-secondary);
  line-height: 18px;
  pointer-events: none;
}

.lui-markdown-blocks__row[data-type="quote"] .lui-markdown-blocks__body {
  border-left: 2px solid var(--color-tertiary);
  padding-left: 8px;
  color: var(--color-content-secondary);
}

.lui-markdown-blocks__row[data-type="code"] .lui-markdown-blocks__body,
.lui-markdown-blocks__row[data-type="raw"] .lui-markdown-blocks__body {
  padding: 8px;
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-markdown-blocks__divider-hit {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: text;
}

.lui-markdown-blocks__divider {
  display: block;
  height: 1px;
  background: var(--color-tertiary);
}

.lui-markdown-blocks__menu {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-height: 16rem;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

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

.lui-autogrow__field,
textarea.lui-autogrow__field {
  display: block;
  width: 100%;
  min-height: var(--lui-autogrow-min, 2.5rem);
  max-height: var(--lui-autogrow-max, 13rem);
  resize: none;
  overflow-y: hidden;
}

/* display:block above would otherwise un-hide [hidden] autogrow textareas */
.lui-autogrow__field[hidden],
textarea.lui-autogrow__field[hidden] {
  display: none !important;
}

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

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

.lui-attachment-list__item--surface {
  background: var(--color-secondary);
}

.lui-attachment-list__item--inline {
  padding: 10px 12px;
  border-radius: 6px;
}

.lui-attachment-list__thumb {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.lui-attachment-list__thumb img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.8;
}

.lui-attachment-list__thumb--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.lui-attachment-list__thumb--link {
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lui-attachment-list__thumb--link:hover {
  border-color: var(--color-content-secondary);
  box-shadow: 0 0 0 1px var(--color-tertiary);
}

.lui-attachment-list__thumb--link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lui-table-empty {
  border: 1px dashed var(--color-tertiary);
  background: var(--color-secondary);
}

.lui-table-popover {
  transform: translateX(-50%);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-float-bar {
  position: fixed;
  bottom: 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 - 6rem). */
.lui-modal {
  display: contents;
}

/* Native dialog — transparent shell; viewport center via fixed + translate (inset:0 breaks in Chrome).
   Width fills up to the size token (max-width); height clamps to the visual viewport so body can scroll. */
.lui-modal__dialog {
  box-sizing: border-box;
  width: calc(100vw - 2rem);
  max-width: 28rem;          /* default (md); size modifiers override */
  max-height: calc(100dvh - 6rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

/* Portaled Floating UI surfaces (icon picker, locale, …) are appended
   as siblings of .lui-modal__panel. Keep the panel clipped for radius; let the
   dialog paint those menus over the footer. Combobox uses popover instead —
   do not unclip the card for [popover] panels still in the form tree. */
.lui-modal__dialog:has([data-floating="true"]:not([popover])) {
  overflow: visible;
}

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

.lui-modal__dialog--fullscreen:modal {
  top: 0;
  left: 0;
  translate: none;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}

.lui-modal__dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Slideover — Flux twin of loopos-ui-v2 rails-blocks/components/slideover.md
   Floating panel (shadow, no border); sides via --right/--left/--top/--bottom;
   horizontal sizes via .lui-slideover__panel--sm|md|lg|xl|full. */
.lui-slideover { display: contents; }

.lui-slideover__dialog {
  position: fixed;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: var(--lui-shadow-floating, 0 1px 4px rgba(33, 37, 41, 0.10));
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.lui-slideover__dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lui-slideover__dialog--right {
  inset: 0 0 0 auto;
  height: 100dvh;
  transform: translateX(100%);
}
.lui-slideover__dialog--left {
  inset: 0 auto 0 0;
  height: 100dvh;
  transform: translateX(-100%);
}
.lui-slideover__dialog--top {
  inset: 0 0 auto 0;
  width: 100%;
  transform: translateY(-100%);
}
.lui-slideover__dialog--bottom {
  inset: auto 0 0 0;
  width: 100%;
  transform: translateY(100%);
}
.lui-slideover__dialog[open] { transform: translate(0, 0); }

/* Slide-out — driven by .is-closing while [open] stays on the element.
   Never animate the close by removing [open]: close() is specified as a no-op
   without it, so the dialog would stay in the top layer and keep the document
   inert. Selectors include [open] to outrank .lui-slideover__dialog[open]. */
.lui-slideover__dialog--right[open].is-closing  { transform: translateX(100%); }
.lui-slideover__dialog--left[open].is-closing   { transform: translateX(-100%); }
.lui-slideover__dialog--top[open].is-closing    { transform: translateY(-100%); }
.lui-slideover__dialog--bottom[open].is-closing { transform: translateY(100%); }

.lui-slideover__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: var(--color-background);
  color: var(--color-content);
}
.lui-slideover__dialog--top .lui-slideover__panel,
.lui-slideover__dialog--bottom .lui-slideover__panel {
  height: auto;
  max-height: 80dvh;
  width: 100%;
}

.lui-slideover__panel--sm   { width: 20rem; }
.lui-slideover__panel--md   { width: 26rem; }
.lui-slideover__panel--lg   { width: 32rem; }
.lui-slideover__panel--xl   { width: 40rem; }
.lui-slideover__panel--full { width: 100vw; }
@media (max-width: 640px) {
  .lui-slideover__panel--sm,
  .lui-slideover__panel--md,
  .lui-slideover__panel--lg,
  .lui-slideover__panel--xl { width: 100vw; }
}

.lui-slideover__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}
.lui-slideover__close:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
.lui-slideover__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

.lui-slideover__header {
  flex: none;
  padding: 1.25rem 3rem 1rem 1.5rem;
  border-bottom: 1px solid var(--color-tertiary);
}
.lui-slideover__title { color: var(--color-content); }

.lui-slideover__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
}

.lui-slideover__footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-tertiary);
}

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

/* Sizes */
.lui-modal__dialog--sm         { max-width: 24rem; }
.lui-modal__dialog--md         { max-width: 28rem; }
.lui-modal__dialog--lg         { max-width: 32rem; }
.lui-modal__dialog--xl         { max-width: 36rem; }
.lui-modal__dialog--2xl        { max-width: 42rem; }
.lui-modal__dialog--3xl        { max-width: 48rem; }
.lui-modal__dialog--4xl        { max-width: 54rem; }
.lui-modal__dialog--5xl        { max-width: 60rem; }
.lui-modal__dialog--6xl        { max-width: 66rem; }
.lui-modal__dialog--7xl        { max-width: 72rem; }
.lui-modal__dialog--fullscreen { width: 100%; max-width: 100%; height: 100%; }

/* Panel — bordered card; viewport-aware column by default (body scrolls when tall).
   Flex lives on the panel only — never on <dialog> (breaks viewport centering).
   Use the same dvh clamp as the dialog (not max-height: 100% — % fails when dialog height is fit-content). */
.lui-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100dvh - 6rem);
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  overflow: hidden;
}
.lui-modal__dialog--fullscreen .lui-modal__panel {
  border-radius: 0;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
}

/* Legacy alias — scrollable: true still adds this class; behavior is now the default. */
.lui-modal__dialog--scrollable .lui-modal__panel {
  max-height: calc(100dvh - 6rem);
  display: flex;
  flex-direction: column;
}

/* Icon-only close — inline in header or absolute on panel (show_close_button) */
.lui-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}
.lui-modal__close:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}
.lui-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus-ring);
}

/* Absolute corner close when Ui::ModalComponent show_close_button: true */
.lui-modal__panel > .lui-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

/* Inline close in header row — icon only, not lui-button */
.lui-modal__header .lui-modal__close {
  position: static;
}
.lui-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: 16px 16px 12px;
}
.lui-modal__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.lui-modal__title { color: var(--color-content); }
.lui-modal__subtitle { color: var(--color-content-secondary); }

/* Tab strip below header (add-agent and similar) */
.lui-modal__tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

/* When tabs are the first block inside the body, bleed horizontally to panel edges */
.lui-modal__body > .lui-modal__tabs:first-child {
  margin: 0 -16px;
}

.lui-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 16px 12px;
}
.lui-modal__dialog--fullscreen .lui-modal__body { flex: 1; overflow-y: auto; }

/* Footer — use shared/buttons in markup; actions share available width equally */
.lui-modal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 12px 16px 16px;
  /* Opaque and above the body. A tall form scrolls inside `.lui-modal__body`;
     a transparent footer lets the last row paint through the actions. */
  position: relative;
  z-index: 1;
  background: var(--color-background);
}

.lui-modal__footer > * {
  flex: 1 1 0;
  min-width: 0;
}

.lui-modal__footer .lui-button,
.lui-modal__footer .lui-modal__btn {
  width: 100%;
}

/* Safety: omit empty header/footer regions (no divider/padding) */
.lui-modal__header:empty,
.lui-modal__footer:empty {
  display: none;
}

/* Bounce (non-dismissible feedback) */
@keyframes lui-modal-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.01); }
}
.lui-modal__dialog--bounce .lui-modal__panel { animation: lui-modal-bounce 0.18s ease; }

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

/* Confirm dialog — native <dialog> + danger confirmation panel (setup deletes) */
.lui-confirm-dialog {
  width: min(28rem, calc(100vw - 2rem));
  max-width: 28rem;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.lui-confirm-dialog:modal {
  position: fixed;
  /* The UA sheet sets `inset: 0` on a modal dialog; with `height: auto` the
     box then stretches from 50% to the bottom edge and the panel sits above
     the viewport centre. Release the far edges so the box hugs the panel. */
  inset: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: auto;
}

.lui-confirm-dialog::backdrop {
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lui-confirm-dialog__panel {
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-shadow: var(--lui-shadow-floating);
  overflow: hidden;
}

.lui-confirm-dialog__header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 16px 0;
}

/* Extra bottom padding when a body block sits between header and footer (no divider — matches lui-modal) */
.lui-confirm-dialog__header:has(+ .lui-confirm-dialog__body:not([hidden])) {
  padding-bottom: 12px;
}

.lui-confirm-dialog__header .lui-confirmation__icon {
  flex: none;
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
  color: var(--color-danger);
}

.lui-confirm-dialog__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-content);
}

.lui-confirm-dialog__body {
  padding: 12px 16px 16px;
}

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

/* Footer — same equal-width actions as lui-modal__footer */
.lui-confirm-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
}

.lui-confirm-dialog__footer > * {
  flex: 1 1 0;
  min-width: 0;
}

.lui-confirm-dialog__footer .lui-button {
  width: 100%;
}

/* Extra header padding when there is no body (spacing only — no header/footer dividers) */
.lui-confirm-dialog__header:not(:has(+ .lui-confirm-dialog__body:not([hidden]))) {
  padding-bottom: 16px;
}

/* Confirmation — type-to-confirm / acknowledgement panel (skill: confirmation.md) */
.lui-confirmation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 28rem;
  color: var(--color-content);
}
.lui-confirmation--carded {
  padding: 20px;
  border-radius: 12px; /* rounded-xl */
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-confirmation__header { display: flex; gap: 10px; align-items: flex-start; }
.lui-confirmation__icon { font-size: 20px; line-height: 1; margin-top: 2px; color: var(--color-foreground); }
.lui-confirmation__heading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lui-confirmation__title { color: var(--color-content); }
.lui-confirmation__message { color: var(--color-content-secondary); }

/* Variant accents the header icon only */
.lui-confirmation--danger  .lui-confirmation__icon { color: var(--color-danger); }
.lui-confirmation--warning .lui-confirmation__icon { color: var(--color-warning); }
.lui-confirmation--info    .lui-confirmation__icon { color: var(--color-informative); }
.lui-confirmation--neutral .lui-confirmation__icon { color: var(--color-foreground); }

.lui-confirmation__form  { display: flex; flex-direction: column; gap: 8px; }
.lui-confirmation__field { display: flex; flex-direction: column; gap: 6px; }
.lui-confirmation__label { color: var(--color-content); }
.lui-confirmation__help  { color: var(--color-content-secondary); }
.lui-confirmation__code {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-primary);
  color: var(--color-content);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.lui-confirmation__input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
}
.lui-confirmation__input::placeholder { color: var(--color-foreground); }
.lui-confirmation__input:focus-visible {
  outline: none;
  border-color: var(--color-app);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-app) 25%, transparent);
}

.lui-confirmation__checks { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.lui-confirmation__check { display: flex; align-items: center; gap: 8px; color: var(--color-content); cursor: pointer; }
.lui-confirmation__check input { accent-color: var(--color-app); }

.lui-confirmation__actions { display: flex; gap: 12px; justify-content: flex-end; }
.lui-confirmation__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 100ms ease, opacity 100ms ease;
}
.lui-confirmation__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-app);
}

/* Cancel — neutral outlined */
.lui-confirmation__btn--cancel {
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
}
.lui-confirmation__btn--cancel:hover { background: var(--color-secondary); }

/* Confirm — variant-filled, dims when disabled */
.lui-confirmation__btn--confirm {
  border: 1px solid transparent;
  background: var(--color-content);
  color: var(--color-background);
}
.lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-content) 85%, black); }
.lui-confirmation--danger  .lui-confirmation__btn--confirm { background: var(--color-danger);      color: var(--color-danger-fg); }
.lui-confirmation--warning .lui-confirmation__btn--confirm { background: var(--color-warning);     color: var(--color-warning-fg); }
.lui-confirmation--info    .lui-confirmation__btn--confirm { background: var(--color-informative); color: var(--color-informative-fg); }
.lui-confirmation--danger  .lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); }
.lui-confirmation--warning .lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-warning) 85%, black); }
.lui-confirmation--info    .lui-confirmation__btn--confirm:hover { background: color-mix(in srgb, var(--color-informative) 85%, black); }
.lui-confirmation__btn--confirm:disabled { opacity: 0.5; cursor: not-allowed; }
.lui-confirmation__btn--confirm:disabled:hover { background: var(--color-content); }
.lui-confirmation--danger  .lui-confirmation__btn--confirm:disabled:hover { background: var(--color-danger); }
.lui-confirmation--warning .lui-confirmation__btn--confirm:disabled:hover { background: var(--color-warning); }
.lui-confirmation--info    .lui-confirmation__btn--confirm:disabled:hover { background: var(--color-informative); }

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

/* A table column shown only from a real breakpoint up (this app has no
   Tailwind — `sm:table-cell` is not a thing here, and `.hidden` alone is an
   unconditional `display: none` that a non-existent responsive prefix never
   overrides back on). `<th>`/`<td>` both compute to `display: table-cell` by
   default, so one rule covers either. */
.lui-table-col--sm-up { display: none; }
@media (min-width: 640px) {
  .lui-table-col--sm-up { display: table-cell; }
}

.lui-table__head th.lui-table-col-max,
.lui-table__head .lui-table__th.lui-table-col-max,
.lui-datatable__head .lui-table__th.lui-table-col-max,
.lui-table__body td.lui-table-col-max,
.lui-datatable__body td.lui-table-col-max {
  overflow: hidden;
}

.lui-table__cell--token-list {
  overflow: hidden;
}

/* SSO providers index — fixed admin portal column; toggle at end without layout shift */
.sso-providers-table .lui-table__table {
  table-layout: fixed;
}

.sso-providers-table__admin-portal-col {
  width: 15rem;
  min-width: 15rem;
  max-width: 15rem;
}

.sso-admin-portal-cell__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.sso-admin-portal-cell__badges {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.sso-admin-portal-cell__secondary {
  display: inline-grid;
  flex-shrink: 0;
}

.sso-admin-portal-cell__secondary-slot {
  grid-area: 1 / 1;
  visibility: hidden;
}

.sso-admin-portal-cell__secondary-slot--visible {
  visibility: visible;
}

.sso-admin-portal-cell__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.lui-metadata-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-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 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.lui-logs--stepper {
  gap: 0;
}

.lui-logs--dense {
  gap: 8px;
}

.lui-logs__day-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.lui-logs__day-header::before,
.lui-logs__day-header::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-tertiary);
}

.lui-logs__day-label {
  flex: 0 0 auto;
  color: var(--color-content-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.lui-logs__row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 12px 16px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-logs--dense .lui-logs__row {
  margin-bottom: 4px;
  padding: 6px 8px;
}

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

.lui-logs__row--last {
  margin-bottom: 0;
}

.lui-logs__row--no-time {
  grid-template-columns: minmax(0, 1fr);
}

.lui-logs__time {
  justify-self: start;
  padding-top: 2px;
  white-space: nowrap;
}

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

.lui-logs__content {
  display: flex;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.lui-logs__body {
  flex: 1 1 auto;
  min-width: 0;
}

.lui-logs__rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 20px;
}

.lui-logs__connector {
  position: absolute;
  top: 24px;
  bottom: -20px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--color-tertiary);
}

.lui-logs__row--last .lui-logs__connector {
  display: none;
}

.lui-logs--stepper .lui-logs__connector {
  top: 16px;
}

.lui-logs__dot {
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 9999px;
  flex: 0 0 auto;
  background: var(--color-informative);
}

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

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

.lui-logs__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.lui-logs__lead {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-logs__summary {
  min-width: 0;
}

/* The entry is the open control. It must not restyle the summary as a link. */
.lui-logs__entry {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.lui-logs__entry:hover,
.lui-logs__entry:focus {
  color: inherit;
  text-decoration: none;
}

.lui-logs__entry:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.lui-logs__meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  padding-left: 16px;
}

.lui-logs__transition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.lui-logs__note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lui-metadata-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--params {
  --lui-metadata-grid-columns: minmax(0, 1fr) 5.75rem;
}

.lui-metadata-grid--values-readonly {
  --lui-metadata-grid-columns: minmax(0, 1fr);
}

.lui-metadata-grid--entries {
  --lui-metadata-grid-columns: minmax(10rem, 0.9fr) minmax(0, 1.2fr) 2.75rem;
}

.lui-metadata-grid--entries-readonly {
  --lui-metadata-grid-columns: minmax(10rem, 0.9fr) minmax(0, 1.2fr);
}

.lui-metadata-grid--order-lines {
  --lui-metadata-grid-columns: minmax(8rem, 1.1fr) minmax(8rem, 1.3fr) 5.5rem 6.5rem 6.5rem 2.25rem;
}

.lui-metadata-grid--extra-parts {
  --lui-metadata-grid-columns: minmax(0, 1fr) 7rem 2.25rem;
}

.lui-metadata-grid--extra-parts .lui-metadata-grid__head,
.lui-metadata-grid--extra-parts .lui-metadata-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem 2.25rem;
  column-gap: 8px;
  align-items: center;
}

.lui-metadata-grid--order-lines .lui-metadata-grid__row,
.lui-metadata-grid--extra-parts .lui-metadata-grid__row {
  align-items: center;
}

.lui-metadata-grid--order-lines .lui-forms__control,
.lui-metadata-grid--order-lines .spare-parts-order-line__sku,
.lui-metadata-grid--order-lines .spare-parts-order-line__lead,
.lui-metadata-grid--order-lines .lui-number-input,
.lui-metadata-grid--extra-parts .lui-forms__control,
.lui-metadata-grid--extra-parts .lui-select,
.lui-metadata-grid--extra-parts .lui-number-input {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.spare-parts-order-line__sku {
  position: relative;
}

.spare-parts-order-line__suggestions {
  list-style: none;
  margin: 0;
  padding: 4px;
  min-width: 18rem;
  max-height: 240px;
  overflow: auto;
  overscroll-behavior: contain;
}

.spare-parts-order-line__suggestions[hidden] {
  display: none !important;
}

.spare-parts-order-line__suggestion {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 0;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--color-content);
  cursor: pointer;
}

.spare-parts-order-line__suggestion:hover {
  background: var(--color-secondary);
}

.spare-parts-order-line__suggestion--create {
  border-top: 1px solid var(--color-tertiary);
  border-radius: 0;
}

.spare-parts-order-line__suggestion--empty {
  cursor: default;
  color: var(--color-content-secondary);
}

.spare-parts-order-line__suggestion--empty:hover {
  background: transparent;
}

.spare-parts-order-line__lead {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spare-parts-order-line__lead .lui-number-input {
  flex: 1 1 auto;
  min-width: 0;
}

.lui-metadata-grid--order-lines .lui-number-input {
  width: 100%;
}

.spare-parts-new-order-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px;
}

.spare-parts-new-order-fields__wide {
  flex: 2 1 10rem;
  min-width: 0;
}

.spare-parts-new-order-add {
  align-self: start;
  width: auto;
}

.lui-metadata-grid__head,
.lui-metadata-grid__row {
  display: grid;
  grid-template-columns: var(--lui-metadata-grid-columns);
  column-gap: 8px;
}

.lui-metadata-grid__head {
  align-items: end;
  padding-block: 0;
  padding-inline: 16px;
  font-weight: 400;
}

.lui-metadata-grid__head .lui-metadata-grid__cell {
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-content-secondary);
}

.lui-metadata-grid__head .lui-metadata-grid__cell.copy-13-medium,
.lui-metadata-grid__head .lui-metadata-grid__cell.copy-12-medium,
.lui-metadata-grid__head .lui-metadata-grid__cell .lui-table__th-label {
  font-weight: 400;
}

.lui-metadata-grid__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-metadata-grid__card {
  border: none;
  border-radius: 6px;
  background: var(--color-secondary);
  overflow: visible;
}

.lui-metadata-grid__row {
  align-items: center;
  padding-block: 8px;
  padding-inline: 12px;
}

.lui-metadata-grid--entries .lui-metadata-grid__row,
.lui-metadata-grid--entries-readonly .lui-metadata-grid__row {
  align-items: start;
}

.lui-metadata-grid__cell {
  min-width: 0;
  overflow: visible;
}

.lui-metadata-grid__cell .lui-forms__control,
.lui-metadata-grid__cell .lui-combobox,
.lui-metadata-grid__cell .lui-select,
.lui-metadata-grid__cell .lui-filter-pill-group,
.lui-metadata-grid__cell .lui-checkbox-select-all {
  width: 100%;
}

.lui-metadata-grid__cell--center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lui-metadata-grid__cell--actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.lui-metadata-dataset__json {
  --lui-script-editor-min-height: 12rem;
  margin-top: 0;
}

.lui-metadata-dataset__json .lui-script-editor__surface .cm-editor {
  min-height: 12rem;
}

.lui-metadata-tree {
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
}

.lui-metadata-tree__head,
.lui-metadata-tree__row {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
}

.lui-metadata-tree__head-cell {
  padding: 8px 12px;
}

.lui-metadata-tree__body {
  display: flex;
  flex-direction: column;
}

.lui-metadata-tree__row {
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-surface);
}

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

.lui-metadata-tree__key {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 7px 12px;
}

.lui-metadata-tree__key--depth-1 { padding-inline-start: 32px; }
.lui-metadata-tree__key--depth-2 { padding-inline-start: 52px; }
.lui-metadata-tree__key--depth-3 { padding-inline-start: 72px; }
.lui-metadata-tree__key--depth-4 { padding-inline-start: 92px; }

.lui-metadata-tree__label,
.lui-metadata-tree__value-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lui-metadata-tree__value-cell {
  padding: 7px 12px;
}

.lui-metadata-tree__row--group .lui-metadata-tree__value-cell {
  padding: 0;
}

.lui-metadata-tree__label {
  flex: 1;
  min-width: 0;
}

.lui-metadata-tree__leaf-key {
  color: var(--color-content-secondary);
  word-break: break-all;
}

.lui-metadata-tree__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  min-width: 0;
}

.lui-metadata-tree__toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--color-content));
  outline-offset: 2px;
  border-radius: 4px;
}

.lui-metadata-tree__chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-content-secondary);
  transform: rotate(0deg);
}

.lui-metadata-tree__toggle[aria-expanded="false"] .lui-metadata-tree__chevron {
  transform: rotate(-90deg);
}

.lui-metadata-tree__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lui-metadata-tree__value--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lui-metadata-tree__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lui-metadata-tree__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-tertiary);
  color: var(--color-content);
}

.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;
  /* The page slot is a column flex container (`align-items: stretch`).
     Stretch wins over auto margins, so the cap sat flush left. */
  align-self: center;
}

.lui-index-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.lui-index-layout > * + * {
  margin-top: 16px;
}

/* Page header → tab zone (or non-tab main): 8px */
.lui-index-layout > :is(.lui-page-header, .lui-page-header-hero) + :is(.lui-page-tabs, .lui-show-layout__main) {
  margin-top: 8px;
}

/* Tab zone below page header — route tabs + optional filter row (library origin, etc.) */
.lui-page-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.lui-index-layout--embedded {
  padding: 0;
}

/* Tabs directly below action bar (no page/show header above).
   Container: .lui-page-tabs--below-action-bar (or .lui-page-tabs inside --tabs-first layouts).
   Tab rail underline stays full-bleed; labels + secondary rows keep a 16px horizontal inset. */
.lui-page-tabs--below-action-bar > .lui-tabs > .lui-tabs__nav,
.lui-index-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav,
.lui-show-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav,
.lui-show-layout--tabs-first > .lui-tabs > .lui-tabs__nav {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-background);
}

.lui-page-tabs--below-action-bar > .lui-tabs > .lui-tabs__nav > .lui-tabs__list,
.lui-index-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav > .lui-tabs__list,
.lui-show-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__nav > .lui-tabs__list,
.lui-show-layout--tabs-first > .lui-tabs > .lui-tabs__nav > .lui-tabs__list {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

.lui-page-tabs--below-action-bar > :not(.lui-tabs),
.lui-index-layout--tabs-first > .lui-page-tabs > :not(.lui-tabs) {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* Headerless index + tabs (breadcrumb/action bar chrome) — tab rail full-bleed; body keeps 16px inset */
.lui-index-layout--tabs-first {
  padding: 0;
}

.lui-index-layout--tabs-first > * + * {
  margin-top: 0;
}

.lui-index-layout--tabs-first > .lui-index-body {
  padding: 16px;
  box-sizing: border-box;
}

.lui-index-layout--tabs-first > .lui-page-tabs > .lui-tabs > .lui-tabs__panel {
  padding: 16px;
  box-sizing: border-box;
}

/* Filter row + table stack — use inside tab panels or when index_content is a single layout child */
.lui-index-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.lui-show-layout {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.lui-show-layout > * + * {
  margin-top: 16px;
}

/* Page header / AI summary → tab zone (or non-tab main): 8px — tab rail to panel body stays 16px via .lui-tabs__panel */
.lui-show-layout > :is(.lui-page-header, .lui-page-header-hero, .lui-show-layout__ai-summary) + :is(.lui-page-tabs, .lui-show-layout__main) {
  margin-top: 8px;
}

.lui-show-layout > :is(.lui-page-header, .lui-page-header-hero) + .lui-show-layout__ai-summary {
  margin-top: 8px;
}

/* My Account cards. Without the packer, columns are the fallback. With it,
   each card drops into the shortest column so a short card does not leave a
   hole beside a taller one. Addresses stay full width below. */
.profile-account {
  container-type: inline-size;
  container-name: profile-account;
}

.profile-account__cards {
  column-count: 1;
  column-gap: 16px;
  min-width: 0;
}

.profile-account__cards > * {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  break-inside: avoid;
}

@container profile-account (min-width: 48rem) {
  .profile-account__cards {
    column-count: 2;
  }
}

@container profile-account (min-width: 72rem) {
  .profile-account__cards {
    column-count: 3;
  }
}

.profile-account__cards--packed {
  position: relative;
  column-count: 1;
}

/* Beat `.lui-tab-panel-card.lui-card` (position: relative), otherwise the
   packer's translate is added on top of the column static position. */
.profile-account__cards--packed > .lui-tab-panel-card.lui-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.profile-account__cards--packed > .lui-tab-panel-card.lui-card:focus-within {
  z-index: 2;
}

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

/* Tab rail scroll fades sit on the case canvas (secondary), not card white.
   Ops tabs sit on the white ops card — keep their fade on background. */
.dmt-case-page .lui-tabs__nav.lui-scroll-edge {
  --lui-scroll-edge-surface: var(--color-secondary);
}

.dmt-ops-tabs .lui-tabs__nav.lui-scroll-edge {
  --lui-scroll-edge-surface: var(--color-background);
}

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

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

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

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

.dmt-case-page .lui-page-header__meta-item,
.dmt-case-page .lui-page-header__meta-value,
.dmt-case-page .lui-page-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-page-header + .lui-page-tabs {
  margin-top: 0;
}

.dmt-case-page .lui-page-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-page-header__meta a.lui-link:hover,
.dmt-case-page .lui-page-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 > .dmt-panel-actions--call {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
}

.dmt-case-sidebar-status {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 12px;
}

.dmt-case-sidebar-status__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.dmt-case-sidebar-status__header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.dmt-case-sidebar-status__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-chrome-accent);
}

.dmt-case-sidebar-status__quote {
  margin-top: 2px;
}

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

.dmt-ops-tabs {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}

.dmt-ops-tabs > .lui-tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.dmt-ops-tabs__step-nav {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.dmt-ops-tabs__step-nav > .lui-button {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* Flex buttons ignore the UA [hidden] rule without this. */
.dmt-ops-tabs__step-nav > .lui-button[hidden] {
  display: none !important;
}

/* One step control left — take the full footer row. */
.dmt-ops-tabs__step-nav.is-single > .lui-button:not([hidden]) {
  flex: 1 1 100%;
  width: 100%;
}

.dmt-ops-tabs .lui-tabs__nav {
  flex: 0 0 auto;
}

/* Status chips on ops tabs — allow sm badge (not the 16px count clamp). */
.dmt-ops-tabs .lui-tabs__tab .lui-tabs__count .lui-badge,
.dmt-ops-tabs .lui-tabs__tab .lui-tabs__count .dmt-ops-tab-badge {
  height: auto;
  min-height: 20px;
  max-height: none;
  gap: 4px;
  padding: 2px 8px;
  line-height: 1.2;
  font-size: 11px;
  border-radius: 9999px;
}

.dmt-ops-tabs .lui-tabs__tab .lui-tabs__count .lui-badge > span {
  line-height: 1.2;
}

/* G1 — thin 3-segment flow bar above ops tabs (matches dmt-ops-flow-progress.html). */
.dmt-ops-flow-bar {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 10px 12px 8px;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-tertiary);
}

.dmt-ops-flow-bar__seg {
  flex: 1 1 0;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-tertiary);
  transition: background 150ms ease;
}

.dmt-ops-flow-bar__seg--half {
  background: linear-gradient(90deg, var(--color-app) 50%, var(--color-tertiary) 50%);
}

.dmt-ops-flow-bar__seg--done {
  background: var(--color-app);
}

.dmt-ops-flow-bar__seg--active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-app) 40%, transparent);
}

/* Equal-width ops tabs so each segment lines up with its column. */
.dmt-ops-tabs .lui-tabs--underline .lui-tabs__list.lui-scroll-edge__viewport {
  width: 100%;
}

.dmt-ops-tabs .lui-tabs--underline .lui-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
  padding: 10px 6px;
}

.dmt-ops-tabs .lui-tabs__panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  overflow-anchor: none;
}

.dmt-ops-tabs .lui-tabs__panel[hidden] {
  display: none;
}

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

.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: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 1px solid var(--color-tertiary);
  background: transparent;
  color: var(--color-content-secondary);
  box-sizing: border-box;
}

.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: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.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 .dmt-process-card__header-meta > .inline-flex {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

.dmt-process-card .dmt-workbench__card-header .lui-identifier:has(.lui-identifier__icon) {
  max-width: 100%;
}

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

/* Protocol answer kit on the diagnosis card — stack gap only; choice cards
   inherit horizontal wrap from `.protocol-answer-form .lui-radio-group`. */
.dmt-diagnosis-card .lui-forms__stack {
  gap: 16px;
}

.dmt-diagnosis-card .lui-file-upload-card__drop-zone {
  margin: 0;
}

/* CC Técnico call-guide + diagnosis — three content roles:
   1) Titles = structure (heading-16)
   2) Script (--script) = say aloud (surface + left accent + content color)
   3) Cue (--cue) = operator-only note (secondary, no speech chrome)
   Questions stay 16 / medium as the decision affordance. */
.dmt-guide-card .dmt-diagnosis-body,
.dmt-diagnosis-card .dmt-diagnosis-body {
  gap: 20px;
}

.dmt-guide-card .dmt-diagnosis-section,
.dmt-diagnosis-card .dmt-diagnosis-section {
  gap: 16px;
}

.dmt-guide-card .dmt-workbench__stack > .flex.flex-col,
.dmt-guide-card .protocol-answer-form,
.dmt-guide-card .lui-forms__stack,
.dmt-diagnosis-card .dmt-workbench__stack > .flex.flex-col,
.dmt-diagnosis-card .protocol-answer-form,
.dmt-diagnosis-card .lui-forms__stack {
  gap: 20px;
}

.dmt-guide-card .protocol-answer-info-title,
.dmt-diagnosis-card .protocol-answer-info-title,
.dmt-guide-card .protocol-answer-info .heading-16,
.dmt-diagnosis-card .protocol-answer-info .heading-16 {
  margin: 0;
  color: var(--color-content);
}

.dmt-guide-card .protocol-answer-info-body,
.dmt-guide-card .protocol-answer-info-body.lui-forms__helper,
.dmt-diagnosis-card .protocol-answer-info-body,
.dmt-diagnosis-card .protocol-answer-info-body.lui-forms__helper {
  margin: 0;
}

.dmt-guide-card .protocol-answer-info-body:not(.protocol-answer-info-body--script):not(.protocol-answer-info-body--cue),
.dmt-guide-card .protocol-answer-info-body.lui-forms__helper:not(.protocol-answer-info-body--script):not(.protocol-answer-info-body--cue),
.dmt-diagnosis-card .protocol-answer-info-body:not(.protocol-answer-info-body--script):not(.protocol-answer-info-body--cue),
.dmt-diagnosis-card .protocol-answer-info-body.lui-forms__helper:not(.protocol-answer-info-body--script):not(.protocol-answer-info-body--cue) {
  padding: 0;
}

.dmt-guide-card .protocol-answer-info-body p,
.dmt-diagnosis-card .protocol-answer-info-body p {
  margin: 0 0 8px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.dmt-guide-card .protocol-answer-info-body p:last-child,
.dmt-diagnosis-card .protocol-answer-info-body p:last-child {
  margin-bottom: 0;
}

.dmt-guide-card .protocol-answer-info-body ul,
.dmt-diagnosis-card .protocol-answer-info-body ul {
  margin: 0 0 8px;
  padding-left: 1.25rem;
}

.dmt-guide-card .protocol-answer-info-body li,
.dmt-diagnosis-card .protocol-answer-info-body li {
  margin: 0 0 4px;
}

.dmt-guide-card .protocol-answer-info-body li:last-child,
.dmt-diagnosis-card .protocol-answer-info-body li:last-child {
  margin-bottom: 0;
}

.dmt-guide-card .protocol-answer-info-body.protocol-answer-info-body--script,
.dmt-guide-card .protocol-answer-info-body--script.lui-forms__helper,
.dmt-diagnosis-card .protocol-answer-info-body.protocol-answer-info-body--script,
.dmt-diagnosis-card .protocol-answer-info-body--script.lui-forms__helper {
  box-sizing: border-box;
  padding: 16px 18px;
  border-radius: 8px;
  background: var(--color-secondary);
  border-left: 3px solid var(--color-primary);
  color: var(--color-content);
  margin: 0;
}

.dmt-guide-card .protocol-answer-info-body--script p,
.dmt-diagnosis-card .protocol-answer-info-body--script p {
  margin: 0 0 10px;
  line-height: inherit;
}

.dmt-guide-card .protocol-answer-info-body--script p:last-child,
.dmt-diagnosis-card .protocol-answer-info-body--script p:last-child {
  margin-bottom: 0;
}

.dmt-guide-card .protocol-answer-info-body--script strong,
.dmt-guide-card .protocol-answer-info-body--script b,
.dmt-diagnosis-card .protocol-answer-info-body--script strong,
.dmt-diagnosis-card .protocol-answer-info-body--script b {
  font-weight: 600;
  color: var(--color-content);
}

.dmt-guide-card .protocol-answer-info-body.protocol-answer-info-body--cue,
.dmt-guide-card .protocol-answer-info-body--cue.lui-forms__helper,
.dmt-diagnosis-card .protocol-answer-info-body.protocol-answer-info-body--cue,
.dmt-diagnosis-card .protocol-answer-info-body--cue.lui-forms__helper {
  padding: 4px 0 4px 12px;
  border-left: 2px dashed var(--color-border-secondary);
  color: var(--color-content-secondary);
  background: transparent;
  border-radius: 0;
}

/* Question labels — same optical size as section titles, medium weight. */
.dmt-guide-card .lui-forms__label,
.dmt-diagnosis-card .lui-forms__label {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--color-content);
  margin-bottom: 8px;
}

/* Script → question: one beat. */
.dmt-guide-card .protocol-answer-row:has(.protocol-answer-info-body--script) + .protocol-answer-row,
.dmt-diagnosis-card .protocol-answer-row:has(.protocol-answer-info-body--script) + .protocol-answer-row {
  margin-top: -4px;
}


.protocol-answer-upload__thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--color-secondary);
}

.protocol-answer-upload__preview {
  margin-top: 8px;
}

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

.lui-show-layout__ai-summary .lui-ai-summary-card__regenerate {
  opacity: 0;
  pointer-events: none;
  transition:
    background var(--default-transition-duration) var(--default-transition-timing-function),
    opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-show-layout__ai-summary .lui-ai-summary-card__regenerate:disabled {
  opacity: 0;
}

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

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

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

  .lui-show-layout__ai-summary .lui-ai-summary-card__regenerate:disabled {
    opacity: 0.5;
  }
}

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

/* `:has(:focus-visible)` and not `:focus-within`: closing the preview modal
   restores focus to the Open button, and `:focus-within` then kept the row
   revealed with the pointer nowhere near it. Keyboard focus still reveals. */
.dmt-equipment-card__file-row:hover .lui-list__item-actions--reveal,
.dmt-equipment-card__file-row:has(:focus-visible) .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-attachment-covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 16rem));
  gap: 8px;
}

.dmt-attachment-covers > li {
  position: relative;
  min-width: 0;
  border-radius: 6px;
  transition: box-shadow 120ms ease;
}

.dmt-attachment-covers > li:has(.dmt-attachment-cover__hit:hover),
.dmt-attachment-covers > li:has(.dmt-attachment-cover__hit:focus-visible) {
  z-index: 1;
  box-shadow: var(--lui-shadow-floating);
}

@media (prefers-reduced-motion: reduce) {
  .dmt-attachment-covers > li {
    transition: none;
  }
}

.dmt-attachment-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-background);
  text-align: left;
  color: inherit;
  cursor: zoom-in;
}

.dmt-attachment-cover__hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.dmt-attachment-cover__hit:focus-visible {
  outline: 2px solid var(--color-content);
  outline-offset: 2px;
}

.dmt-attachment-cover__page {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-secondary);
}

.dmt-attachment-cover__page .lui-thumbnail {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.dmt-attachment-cover__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--color-content-secondary);
}

.dmt-attachment-cover__page:has(.dmt-attachment-cover__canvas.is-painted) .dmt-attachment-cover__fallback {
  display: none;
}

.dmt-attachment-cover__canvas {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: block;
  max-width: 100%;
  max-height: 100%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  background: #fff;
}

.dmt-attachment-cover__canvas.is-painted {
  opacity: 1;
}

.dmt-attachment-cover__kind {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgb(24 24 24 / 0.72);
  color: #fff;
  font-variant: tabular-nums;
}

.dmt-attachment-cover__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.dmt-attachment-cover__meta .truncate {
  flex: 1 1 auto;
  min-width: 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-frame {
  background: #fff;
  color-scheme: light;
}

.dmt-pdf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
  background: rgb(24 24 24 / 0.56);
}

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

.dmt-pdf-lightbox__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 64rem);
  max-height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-background);
}

.dmt-pdf-lightbox__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

.dmt-pdf-lightbox__chrome .heading-16 {
  flex: 1 1 auto;
  min-width: 0;
}

.dmt-pdf-lightbox__stage {
  display: block;
  flex: 1 1 auto;
  min-height: min(70dvh, 40rem);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--color-secondary);
  color-scheme: light;
}

.dmt-pdf-lightbox__pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.dmt-pdf-lightbox__page {
  display: block;
  max-width: 100%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(24 24 24 / 0.08);
}

.dmt-pdf-lightbox .dmt-equipment-card__preview-frame {
  flex: 1 1 auto;
  width: 100%;
  height: min(70dvh, 40rem);
  border-radius: 0;
}

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

/* Marcação: same field rhythm as protocol / customer inputs (label → control → next field). */
.dmt-visit-form {
  gap: 20px;
}

.dmt-visit-form .lui-forms__group {
  gap: 0;
}

.dmt-visit-form .lui-forms__label {
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-content);
}

.dmt-visit-form .dmt-card-select {
  gap: 8px;
}

.dmt-visit-form .dmt-card-select--split .dmt-card-select__list {
  gap: 8px;
}

.dmt-visit-form .dmt-card-select--split .dmt-card-select__option {
  min-height: var(--lui-control-height-md);
  justify-content: center;
  padding: 8px 12px;
}

.dmt-visit-form .dmt-card-select__label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--color-content-secondary);
}

.dmt-visit-form .dmt-card-select__option--selected .dmt-card-select__label,
.dmt-visit-form .dmt-card-select__option[aria-selected="true"] .dmt-card-select__label {
  font-weight: 500;
  color: var(--color-content);
}

.dmt-visit-form .lui-select__control,
.dmt-visit-form .lui-select__value,
.dmt-visit-form .lui-select__placeholder {
  font-size: 13px;
  line-height: 18px;
}

.dmt-visit-form #dmt-visit-calendar {
  margin-top: 8px;
  padding-top: 4px;
}

/* The hidden slot inputs sit in the flex column and each one adds the 20px
   gap, which opened a hole under the technician field. contents drops that
   wrapper out of the layout. */
.dmt-visit-form > [data-darty-max-technical-schedule-target="fields"] {
  display: contents;
}

.lui-modal__dialog .dmt-visit-form {
  gap: 12px;
}

.lui-modal__dialog .dmt-visit-form #dmt-visit-calendar {
  margin-top: 0;
  padding-top: 0;
}

.dmt-visit-form .dmt-calendar {
  gap: 8px;
}

.dmt-visit-form .dmt-calendar__nav-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--color-content-secondary);
}

.dmt-schedule-card .lui-card__body {
  margin-top: 0;
  padding-top: 0;
}

@keyframes dmt-sidebar-attn-lift {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
  }
  40% {
    transform: scale(1.03);
    box-shadow:
      0 10px 28px color-mix(in srgb, var(--color-content) 12%, transparent),
      0 0 0 3px color-mix(in srgb, var(--color-chrome-accent) 16%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Room for the scale pop inside the clipped ops shell. */
.dmt-ops-tabs:has(.dmt-sidebar-card--attention),
.dmt-ops-tabs .lui-tabs__panel:has(.dmt-sidebar-card--attention),
.dmt-ops-tabs .dmt-sidebar-host:has(.dmt-sidebar-card--attention) {
  overflow: visible;
}

.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;
  z-index: 2;
  outline: none;
  transform-origin: center center;
  will-change: transform, box-shadow;
  animation: dmt-sidebar-attn-lift 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  .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 {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-chrome-accent) 16%, transparent);
  }
}

.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 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dmt-quote-aux-link-wrap {
  display: inline-flex;
  min-width: 0;
}

.dmt-quote-aux-link-wrap.lui-tooltip__trigger {
  display: inline-flex;
}

.dmt-quote-aux-link-wrap .lui-button:disabled,
.dmt-quote-aux-link-wrap .lui-button[aria-disabled="true"] {
  pointer-events: none;
}

.dmt-quote-panel__body {
  gap: 8px;
}

.dmt-quote-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dmt-quote-orphans {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dmt-case-parts__orders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.dmt-case-parts__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin: 0;
  width: 100%;
}

.dmt-case-parts__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 8rem;
  max-width: 12rem;
}

.dmt-case-parts__lines {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dmt-case-parts__line {
  display: flex;
  align-items: center;
  gap: 8px;
}


.dmt-case-parts__wait {
  margin: 0;
}

.dmt-quote-jit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.dmt-quote-jit__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 10rem;
  flex: 1 1 10rem;
}

.dmt-quote-jit__create {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex: 1 0 100%;
}

.dmt-quote-jit__create .dmt-quote-jit__field {
  flex: none;
  width: 100%;
  min-width: 0;
}

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

.dmt-quote-jit__legend {
  flex: 1 0 100%;
  margin: 0;
  color: var(--color-text-secondary, inherit);
}

.dmt-quote-jit__status {
  flex: 1 0 100%;
  margin: 0;
  color: var(--color-danger);
}

.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;
  position: relative;
  z-index: 1;
}

.dmt-quote-lines.is-suggesting {
  z-index: 5;
}

.dmt-quote-lines.is-suggesting .lui-table,
.dmt-quote-lines.is-suggesting .lui-table__scroll,
.dmt-quote-lines.is-suggesting .lui-table__scroll.lui-scroll-edge__viewport {
  overflow: visible;
}

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

/* Clip edge fades to the radius without becoming an X-scrollport — `hidden` steals pan. */
.dmt-quote-lines .lui-table {
  overflow: clip;
}

/* Nested table is X-only. A Y scrollport here eats the wheel and the quote card never moves.
   Native 12px X bar stays visible when columns overflow (ui-tables: mouse-draggable). */
.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: auto;
  scrollbar-color: color-mix(in srgb, var(--color-content) 45%, transparent)
    color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
}

.dmt-quote-lines .lui-table__scroll::-webkit-scrollbar,
.dmt-quote-lines .lui-table__scroll.lui-scroll-edge__viewport::-webkit-scrollbar {
  width: 0;
  height: 12px;
  background: color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
}

.dmt-quote-lines .lui-table__scroll::-webkit-scrollbar-track,
.dmt-quote-lines .lui-table__scroll.lui-scroll-edge__viewport::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
}

.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) 45%, transparent);
  border-radius: 9999px;
  border: 3px solid color-mix(in srgb, var(--color-tertiary) 90%, var(--color-background));
  background-clip: padding-box;
}

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

.dmt-quote-lines .lui-table__body td.dmt-quote-line__cell {
  padding-block: 10px;
}

.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__sku,
.dmt-quote-line__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* SKU, fornecedor, stock e estado empilhados: a soma horizontal empurrava
   nome, quantidade e preço para fora do cartão do orçamento. */
.dmt-quote-line__sku {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.dmt-quote-line__sku > .lui-forms__control,
.dmt-quote-line__name > .lui-forms__control {
  flex: 1 1 6rem;
  width: auto;
  min-width: 4.5rem;
}

.dmt-quote-line__sku > .lui-forms__control {
  flex: 0 1 auto;
  width: auto;
  min-width: 5.5rem;
  max-width: none;
  field-sizing: content;
  overflow: visible;
  text-overflow: clip;
}

.dmt-quote-line__aside {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  white-space: nowrap;
}

.dmt-quote-line__sku > .dmt-quote-line__aside {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-inline-start: 11px;
  white-space: normal;
}

/* Linha gravada: o input fica sem moldura, por isso o padding fazia o SKU
   começar à direita do fornecedor, do stock e do estado. */
.dmt-quote-line--added:not(.dmt-quote-line--editing) .dmt-quote-line__sku > .lui-forms__control {
  height: auto;
  min-height: 0;
  padding: 0;
  border-width: 0;
}

.dmt-quote-line--added:not(.dmt-quote-line--editing) .dmt-quote-line__sku > .dmt-quote-line__aside {
  padding-inline-start: 0;
}

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

.dmt-quote-line__suggestions {
  position: absolute;
  z-index: 20;
  left: 0;
  right: auto;
  top: calc(100% - 2px);
  display: flex;
  flex-direction: column;
  min-width: 16rem;
  max-width: 22rem;
  max-height: min(280px, 50vh);
  overflow: hidden;
  overscroll-behavior: contain;
}

.dmt-quote-line__suggestions .lui-combobox__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The menu radius clips this edge. A border on the rounded item stops short of the sides. */
.dmt-quote-line__suggestions-foot {
  flex: none;
  border-top: 1px solid var(--color-tertiary);
  padding: 4px;
}

.dmt-quote-line__suggestions-foot[hidden] {
  display: none;
}

.dmt-quote-line__create {
  font-weight: inherit;
}

.dmt-quote-line__create .material-symbols-rounded {
  font-size: 16px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

/* Combobox popover sets overflow:visible; keep the radius clip and scroll the list. */
.dmt-quote-line__suggestions.lui-combobox__dropdown.lui-dropdown__menu[popover] {
  overflow: hidden;
  overscroll-behavior: contain;
}

.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: 88px;
  min-width: 88px;
  max-width: 88px;
  padding-block: 4px;
  padding-inline: 4px;
  overflow: visible;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: none;
}

/* Shared `.lui-table__cell--actions` is transparent and 0px wide. This column
   needs an opaque plate so the scrolled cells do not show through the buttons. */
.dmt-quote-lines .lui-table__body td.dmt-quote-line__cell--row-actions,
.dmt-quote-lines .lui-table__head th.dmt-quote-th--row-actions {
  width: 88px;
  min-width: 88px;
  max-width: 88px;
  height: auto;
  padding-block: 4px;
  padding-inline: 4px;
  background: var(--dmt-quote-actions-surface);
}

.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-lines .lui-table--hoverable .lui-table__body tr:hover > td.dmt-quote-line__cell--row-actions,
.dmt-quote-lines .lui-table--hoverable .lui-table__body .lui-table__row:hover > td.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: relative;
  z-index: 1;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  transform: none;
  background: var(--dmt-quote-actions-surface);
  padding-inline: 4px;
  min-width: 0;
}

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

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

/* --- Badge de peças curto na fila do CC (D-11 · UX-L) -----------------------

   A fila tem oito colunas antes desta e a frase inteira («a aguardar
   encomenda») empurrava «tentativas» para fora do ecrã. A primeira resposta foi
   esconder o texto e deixar só o ícone — e um ícone mudo não se lê: não aparece
   num vídeo, não se anuncia sem passar o rato e obriga a decorar seis símbolos.

   O badge leva agora ícone + **uma palavra** (`parts_badges_short`), e a frase
   inteira continua no `title` e no `aria-label`. A largura veio da coluna do
   resumo IA, que só aparece quando há resumos (N-1). */

.dmt-parts-cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.dmt-parts-badge--compact {
  max-width: 100%;
}

.dmt-parts-badge--compact > span:not(.lui-badge__icon):not(.lui-badge__dot) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Fornecedor e stock sob o SKU (PRD-5 §5b · D-12) ------------------------

   A linha existia no ERB e não tinha regra nenhuma: os dois spans caíam um por
   cima do outro sem espaço nem cor, e «há 4 em Azambuja» lia-se igual a «não
   há». O verde e o âmbar são a diferença entre encomendar e não encomendar. */

.dmt-quote-line__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
  min-width: 0;
  color: var(--color-content-secondary);
}

/* `display: flex` / `inline-flex` beat the UA `[hidden]` rule, so an empty
   stock line kept a lone icon under the SKU and pushed the other inputs. */
.dmt-quote-line__meta[hidden],
.dmt-quote-line__stock[hidden] {
  display: none;
}

.dmt-quote-line__stock {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-success-fg);
}

.dmt-quote-line__stock--none {
  color: var(--color-warning-fg);
}

.dmt-quote-line__stock .material-symbols-rounded {
  font-size: 14px;
  line-height: 1;
}

.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,
.dmt-quote-line--blank .dmt-quote-line__cancel {
  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;
}

/* A long SKU keeps the column; the quote table scrolls instead of ellipsizing it.
   The shared header rule sets max-width: 0 so flexible columns can shrink. */
.dmt-quote-lines .dmt-quote-lines__table .lui-table__head th.dmt-quote-th--sku:not(.lui-table__cell--checkbox):not(.lui-table__th--actions),
.dmt-quote-lines .dmt-quote-lines__table td.dmt-quote-line__cell--sku {
  max-width: none;
  width: auto;
  min-width: max-content;
}

.dmt-quote-line__cell--sku .dmt-quote-line__sku {
  min-width: max-content;
}

.dmt-quote-parts {
  position: relative;
  z-index: 0;
  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;
}

/* Money fields: plain text/currency entry — never show number spinners */
.dmt-money-input::-webkit-outer-spin-button,
.dmt-money-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dmt-money-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.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 {
  --dmt-transcript-well-height: 98px;
  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-panel--live .dmt-consent__grant.lui-button--primary {
  animation: dmt-consent-grant-pulse 1.6s ease-in-out infinite;
}

@keyframes dmt-consent-grant-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-content) 40%, transparent);
  }
  70% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-content) 0%, transparent);
  }
}

.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 {
    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 .dmt-consent__grant.lui-button--primary {
    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: 4px;
  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: 4px;
  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: 2px;
}

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

.dmt-calendar__day {
  display: flex;
  min-width: 0;
  min-height: 28px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  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__day--past {
  visibility: hidden;
  pointer-events: none;
  cursor: default;
}

.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-tertiary);
  background: var(--color-secondary);
  background-color: var(--color-secondary);
  color: var(--color-content);
  -webkit-text-fill-color: var(--color-content);
  fill: var(--color-content);
  -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-content);
  -webkit-text-fill-color: var(--color-content);
  fill: var(--color-content);
  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-secondary);
  background-color: var(--color-secondary);
  border-color: var(--color-tertiary);
  filter: none;
}

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

.dmt-calendar__day-dot {
  width: 3px;
  height: 3px;
  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-content);
}

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

/* Selected slot: quiet secondary fill + tertiary border (not app primary). */
.dmt-slot-chip.lui-button--primary {
  background: var(--color-secondary);
  background-color: var(--color-secondary);
  border-color: var(--color-tertiary);
  color: var(--color-content);
}

.dmt-slot-chip.lui-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-secondary);
  background-color: var(--color-secondary);
  border-color: var(--color-tertiary);
  color: var(--color-content);
  filter: none;
}

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

.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-wrap {
  display: flex;
  width: 100%;
  min-width: 0;
  cursor: not-allowed;
}

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

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

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

.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-meter__track {
  display: flex;
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--color-secondary);
}

.dmt-call-meter__seg {
  display: block;
  height: 100%;
  min-width: 0;
}

.dmt-call-meter__seg--voice { background: var(--color-content); }
.dmt-call-meter__seg--transcription { background: var(--color-content-secondary); }
.dmt-call-meter__seg--other { background: var(--color-tertiary); }

.dmt-call-meter__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dmt-call-meter__swatch-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.dmt-call-meter__receipt {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.dmt-call-meter__receipt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 12px;
}

.dmt-call-meter__receipt-row + .dmt-call-meter__receipt-row {
  border-top: 1px solid var(--color-tertiary);
}

.dmt-call-meter__receipt-row--bar {
  display: block;
  padding: 10px 12px;
}

.dmt-call-meter__receipt-row--total {
  background: var(--color-primary);
}

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

/* Column below 34rem. From 34rem: single horizontal row — primary and
   Resolvido grow; Outras opções hugs content. */
@container dmt-actions (min-width: 34rem) {
  .dmt-panel-actions__stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .dmt-panel-actions__item:not(.dmt-panel-actions__more) {
    width: auto;
    flex: 1 1 0;
    min-width: min-content;
    max-width: 100%;
  }

  .dmt-panel-actions__more {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    align-self: stretch;
  }
}

.dmt-panel-actions__more-menu {
  width: 100%;
  max-width: 100%;
}

.dmt-panel-actions__more-menu .lui-dropdown__menu {
  width: max-content;
  min-width: 12rem;
  max-width: min(20rem, 100vw);
}

.dmt-panel-actions__stack > .lui-button,
.dmt-panel-actions__item:not(.dmt-panel-actions__more) .lui-button,
.dmt-panel-actions__more .lui-button {
  width: 100%;
  min-width: min-content;
}

@container dmt-actions (min-width: 34rem) {
  .dmt-panel-actions__more-menu {
    width: auto;
    max-width: 100%;
  }

  .dmt-panel-actions__more .lui-button {
    width: auto;
  }
}

.dmt-panel-actions__item .lui-button__label {
  flex: 0 1 auto;
  min-width: min-content;
  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-propose-summary-quote__table {
  width: 100%;
  margin-top: 4px;
  border-collapse: collapse;
  table-layout: fixed;
}

.dmt-propose-summary-quote__table th,
.dmt-propose-summary-quote__table td {
  padding: 0;
  text-align: left;
  vertical-align: top;
}

.dmt-propose-summary-quote__table th:not(:last-child),
.dmt-propose-summary-quote__table td:not(:last-child) {
  padding-right: 12px;
}

.dmt-propose-summary-quote__table tbody td {
  padding-top: 4px;
}

.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: var(--dmt-transcript-well-height);
  min-height: var(--dmt-transcript-well-height);
  max-height: var(--dmt-transcript-well-height);
  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-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%);
    touch-action: none;
  }

  /* Beat global `button { cursor: pointer }` (higher specificity). */
  button.dmt-case-page__resize-handle:not(:disabled):not([aria-disabled="true"]) {
    cursor: col-resize;
  }

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

  .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 {
    width: 3px;
    height: 100%;
    border-radius: 0;
  }

  .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-ops-tabs {
    flex: 1 1 auto;
    min-height: 0;
  }

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

  /* Host > card fills the active ops tab; body scrolls, footer stays put.
     Multi-card hosts (Diagnóstico = questionnaire + quote; Marcação = calendar + guide)
     stack naturally and scroll on the host — each card must not claim height: 100%. */
  .dmt-ops-tabs .dmt-sidebar-host > .dmt-workbench__card,
  .dmt-ops-tabs .dmt-quote-host > *,
  .dmt-ops-tabs .dmt-quote-host .dmt-workbench__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .dmt-ops-tabs .dmt-opening-host,
  .dmt-ops-tabs .dmt-diagnosis-host,
  .dmt-ops-tabs .dmt-schedule-host {
    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    gap: 12px;
  }

  .dmt-ops-tabs .dmt-opening-host > .dmt-workbench__card,
  .dmt-ops-tabs .dmt-diagnosis-host > .dmt-workbench__card,
  .dmt-ops-tabs .dmt-schedule-host > .dmt-workbench__card {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .dmt-ops-tabs .dmt-opening-host .dmt-ops-scroll-edge,
  .dmt-ops-tabs .dmt-diagnosis-host .dmt-ops-scroll-edge,
  .dmt-ops-tabs .dmt-schedule-host .dmt-ops-scroll-edge {
    flex: 0 0 auto;
  }

  .dmt-ops-tabs .dmt-opening-host .dmt-ops-scroll-edge > .lui-scroll-edge__viewport,
  .dmt-ops-tabs .dmt-diagnosis-host .dmt-ops-scroll-edge > .lui-scroll-edge__viewport,
  .dmt-ops-tabs .dmt-schedule-host .dmt-ops-scroll-edge > .lui-scroll-edge__viewport {
    flex: 0 0 auto;
    overflow: visible;
  }

  .dmt-ops-tabs .dmt-ops-scroll-edge {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    --lui-scroll-edge-surface: var(--color-background);
  }

  .dmt-ops-tabs .dmt-ops-scroll-edge > .lui-scroll-edge__viewport {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  .dmt-ops-tabs .dmt-ops-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar {
    width: 6px;
    background: transparent;
  }

  .dmt-ops-tabs .dmt-ops-scroll-edge > .lui-scroll-edge__viewport::-webkit-scrollbar-track {
    background: transparent;
  }

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

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

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

  .dmt-ops-tabs .dmt-sidebar-host .lui-card__footer {
    flex: 0 0 auto;
    padding: 0;
    border-top: 0;
  }

  /* Quote tab: table owns X-scroll (sticky actions sit inside that scroller).
     Panel viewport stays Y-only so the budget table keeps a horizontal bar. */
  .dmt-ops-tabs .dmt-quote-host .dmt-quote-actions {
    flex: 0 0 auto;
  }

  .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;
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 0 0;
    border-top: none;
    background: transparent;
  }

  .dmt-case-page__sidebar .dmt-case-sidebar-status {
    padding-top: 12px;
    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 (FLUX-10, G) — height-fill workspace; form/editor always
   visible (page-local). No floating drawer any more: "Aplica-se a" is the
   Momentos e Associações tab (see .protocol-where-it-appears below).

   S1 — the show is a 3-area CSS grid (header / aside / main), not nested
   flex rows: at ≥1360px the aside (usage card + AI summary) sits beside the
   header+tabs as its own column; below that it drops back to a single
   column, reordered — DOM order is header → aside → main (S1: "card
   beside/under the header, AI summary under it") — ahead of the tabs, via
   `grid-template-areas` rather than duplicating the aside's markup per
   breakpoint (one usage card, one set of ids, one turbo_stream target
   regardless of viewport). `.lui-show-layout`'s own `> * + * { margin-top }`
   rule is reset here — grid `gap` does the spacing instead, so a grid item
   is never pushed 16px into its own cell relative to its row neighbour. */
.lui-show-layout--protocol {
  position: relative;
}

.protocol-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "aside" "main";
  row-gap: 20px;
}

.protocol-show-grid > * + * {
  margin-top: 0;
}

.protocol-show-grid__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.protocol-show-grid__main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Fixed float bar escapes normal flow (position: fixed) — parked on the
   header cell purely so it never claims an implicit grid track of its own. */
.protocol-show-grid > .lui-float-bar--inline-edit {
  grid-area: header;
}

.protocol-show-locked-notice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-md, 0.375rem);
  background: color-mix(in srgb, var(--color-warning) 12%, var(--color-background));
}

/* 1360 — SPEC-G's right-bar breakpoint (S1). Below it there is no room for a
   320px aside beside a canvas-hosting main column without squeezing the
   editor, so the layout matches the narrow single-column template above. */
@media (min-width: 1360px) {
  /* `auto 1fr` rows on every tab, not only Detalhes: the aside spans both
     rows, and on a short tab (Logs) it is the tallest thing in the grid —
     with implicit `auto` rows its extra height was shared between them and
     opened a gap between the subtitle and the tabs. */
  .protocol-show-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header aside" "main aside";
    column-gap: 24px;
  }

  .protocol-show-aside {
    align-self: start;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Detalhes tab, a block's settings card open — the right bar (usage card +
     AI summary) used to hide here so the editor could claim the full width.
     The owner asked to keep it visible instead: the editor just gets less
     width, and its own `.pe-document` container query already handles "not
     enough room beside the document" — past an ~800px pane it overlays the
     settings card on the document with a shadow rather than squeezing
     either past readability (see `.pe-document__inspector` in
     protocol_editor.css). No page-level rule needed; `data-inspector-open`
     (`pe-shell`, R5) is unused here now but stays set — a future surface
     may still want to know. */
}

/* Owner's ultra-wide monitor (~2000px): a 320px aside leaves the editor's own
   centered ~680px canvas stranded in a much wider main column than it was
   ever going to fill. Widening the aside band (a card that reads fine wider
   — the associations list gets more room per row) claims more of that width
   instead of leaving it as dead space between the document and the settings
   column. A flat top-level block (not nested inside the 1360px one) so it
   does not depend on nested-@media support — any viewport matching 1800px
   already matches 1360px, so the cascade lands the same either way. */
@media (min-width: 1800px) {
  .protocol-show-grid {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* Right bar (S1) — usage card + AI summary. Single column below 1360px (see
   media query above), its own scroll above it once taller than the viewport
   (sticky + max-height, not stretched to the row's full height — an aside
   shorter than the tabs column should not gain trailing blank space). */
.protocol-show-aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* The usage card (SPEC-G "card de uso"). */
.protocol-usage-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-background);
  box-sizing: border-box;
}

.protocol-usage-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.protocol-usage-card__status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.protocol-usage-card__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex: 0 0 auto;
  background: var(--color-content-secondary);
}

.protocol-usage-card__status--pending .protocol-usage-card__status-dot { background: var(--color-warning); }
.protocol-usage-card__status--pending .protocol-usage-card__status-text { color: var(--color-warning-fg, var(--color-warning)); }

.protocol-usage-card__status--published .protocol-usage-card__status-dot { background: var(--color-success); }
.protocol-usage-card__status--published .protocol-usage-card__status-text { color: var(--color-success-fg, var(--color-success)); }

.protocol-usage-card__status--archived .protocol-usage-card__status-dot,
.protocol-usage-card__status--unpublished .protocol-usage-card__status-dot {
  background: var(--color-content-secondary);
}

.protocol-usage-card__status-text {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-content);
}

.protocol-usage-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.protocol-usage-card__metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}

.protocol-usage-card__metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.protocol-usage-card__metric + .protocol-usage-card__metric {
  border-left: 1px solid var(--color-tertiary);
  padding-left: 12px;
}

.protocol-usage-card__metric-value {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-content);
}

a.protocol-usage-card__metric:hover .protocol-usage-card__metric-value {
  text-decoration: underline;
}

.protocol-usage-card__metric-value--warning {
  color: var(--color-warning-fg, var(--color-warning));
}

.protocol-usage-card__metric-label {
  font-size: 12px;
  color: var(--color-content-secondary);
}

/* S2 — the card's own associations list: up to 5 rows (moments first, then
   targets), each a compact single line so the card stays a glance, not a
   second copy of the tab. */
.protocol-usage-card__associations {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--color-tertiary);
}

.protocol-usage-card__association-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}

.protocol-usage-card__association-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

/* Name on the first line, type (and moment) under it — two short lines
   instead of one truncated "Máquina Lavar Loiça Categoria · Pré-…". */
.protocol-usage-card__association-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.protocol-usage-card__association-icon {
  color: var(--color-content-secondary);
  flex-shrink: 0;
  margin-top: 1px;
}

.protocol-usage-card__association-label {
  min-width: 0;
  color: var(--color-content);
}

.protocol-usage-card__association-type {
  min-width: 0;
}

.protocol-usage-card__association-view-all {
  align-self: flex-start;
}

/* Version banner (Detalhes tab) — "A editar a vN. Os operadores continuam a
   ver a vM até publicar." */
.protocol-version-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

/* Momentos e Associações tab (FLUX-10 G redesign) — one card per moment
   (ADR-145 §3's two layers made visible: the default use-case row, and any
   equipment's own catalog/brand rows) instead of the old timeline + "Ordem
   neste momento" + generic form + flat list, which showed one association
   up to three times. Single column; the right bar that used to sit beside
   this tab is the show's own aside (`.protocol-show-aside`). */
.protocol-where-it-appears {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.protocol-where-it-appears__toolbar {
  display: flex;
  justify-content: flex-end;
}

/* "Sem momento" — the compact list (still `_attachment_row.html.erb`) and,
   collapsed behind a <details>, the generic Tipo → Associar a → Prioridade
   form: the one case left with no moment card to live in. */
.protocol-where-it-appears__no-moment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.protocol-where-it-appears__no-moment-disclosure > summary {
  cursor: pointer;
  color: var(--color-content-secondary);
}

.protocol-where-it-appears__no-moment-disclosure > summary:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

.protocol-where-it-appears__no-moment-disclosure[open] > summary {
  margin-bottom: 8px;
}

.protocol-where-it-appears__attach-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-secondary);
}

.protocol-where-it-appears__attach-form .lui-forms__group,
.protocol-where-it-appears__attach-form .protocol-attach-priority,
.protocol-where-it-appears__attach-form .lui-button--block {
  width: 100%;
  max-width: 100%;
}

/* One card per moment — replaces the read-only timeline + "Ordem neste
   momento" sections above. */
.protocol-moment-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.protocol-moment-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-tertiary);
  border-top: 2px solid var(--color-content);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-secondary);
}

.protocol-moment-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.protocol-moment-card__title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.protocol-moment-card__title {
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.protocol-moment-card__lane {
  overflow-wrap: anywhere;
}

.protocol-moment-card__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Fixed-ish width so "Aparece" / the two switches line up between rows on
   wide viewports — wraps under the label on narrow ones instead of forcing
   a horizontal scroll (responsive floor: 1024px with the right bar open). */
.protocol-moment-card__row-label {
  flex: 0 0 auto;
  min-width: 9rem;
  color: var(--color-content-secondary);
}

/* More than one journey sharing a moment key (CC Técnico — Abertura's
   `technical.opening`, two use-case rows) stacks a named toggle per
   journey instead of the single plain one. */
.protocol-moment-card__default-toggles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.protocol-moment-card__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.protocol-moment-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-tertiary);
  border-radius: 9999px;
  padding: 1px 2px 1px 8px;
  background: var(--color-background);
}

.protocol-moment-card__chip .lui-badge {
  border: 0;
  background: transparent;
  padding-left: 0;
}

.protocol-moment-card__priority-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.protocol-moment-card__position {
  white-space: nowrap;
}

/* "ver ordem" — the default-list order, same rows as the old "Ordem neste
   momento" section, now behind a disclosure next to the priority control. */
.protocol-moment-card__order {
  flex: 1 1 100%;
  /* Wraps under the priority controls, not under the «Prioridade» label:
     the label column's min-width + the row gap. */
  margin-inline-start: calc(9rem + 8px);
}

.protocol-moment-card__order > summary {
  cursor: pointer;
  color: var(--color-content-secondary);
}

.protocol-moment-card__order > summary:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

.protocol-moment-card__order[open] > summary {
  margin-bottom: 6px;
}

/* FLUX-10 (G) — "+ Equipamento" picker redesign: two lists (Tipo left,
   results right), multi-select. Stacks the panes under the modal's own
   narrow-width floor rather than forcing a horizontal scroll. */
.protocol-equipment-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.protocol-equipment-picker__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.protocol-equipment-picker__body {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.protocol-equipment-picker__types {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 180px;
  min-width: 0;
  border-right: 1px solid var(--color-tertiary);
  padding-right: 12px;
}

.protocol-equipment-picker__type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md, 0.375rem);
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  text-align: left;
}

.protocol-equipment-picker__type:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.protocol-equipment-picker__type--active {
  background: var(--color-chrome-accent-muted);
  color: var(--color-content);
}

.protocol-equipment-picker__type-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `.lui-badge` sets its own `display`, which otherwise wins over the
   `[hidden]` UA default at equal specificity (same trap as `.lui-search__clear`
   above) — the ticked-count badge must disappear at 0, not show "0". */
.protocol-equipment-picker__type-count[hidden] {
  display: none;
}

.protocol-equipment-picker__results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.protocol-equipment-picker__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  padding: 8px;
}

.protocol-equipment-picker__row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 6px 4px;
  border-radius: var(--radius-md, 0.375rem);
}

.protocol-equipment-picker__row:hover {
  background: var(--color-secondary);
}

.protocol-equipment-picker__applied-note {
  white-space: nowrap;
  margin-inline-start: auto;
  padding-top: 2px;
}

.protocol-equipment-picker__empty {
  padding: 16px 8px;
  text-align: center;
}

.protocol-equipment-picker__sentinel {
  height: 1px;
}

.protocol-equipment-picker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-wrap: wrap;
}

.protocol-equipment-picker__footer-summary,
.protocol-equipment-picker__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Modal floor (loopos-ui-v2 responsive convention) — stack the panes rather
   than scroll horizontally. */
@media (max-width: 640px) {
  .protocol-equipment-picker__body {
    flex-direction: column;
  }

  .protocol-equipment-picker__types {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--color-tertiary);
    padding-right: 0;
    padding-bottom: 8px;
  }
}

/* Attachments list — bordered stack that survives turbo append/remove of
   rows. Page-local now (Onde aparece tab), not scoped to a drawer. */
.protocol-attachments-list:has(.protocol-attachments-list__item) {
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
  background: var(--color-background);
}

.protocol-attachments-list__item + .protocol-attachments-list__item {
  border-top: 1px solid var(--color-tertiary);
}

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

.protocol-attachment-priority-wrap {
  cursor: help;
}

.protocol-attachment-priority {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  flex-shrink: 0;
}

.protocol-attachment-priority__field {
  display: block;
  width: 3px;
  border-radius: 9999px;
  background: var(--color-tertiary);
}

.protocol-attachment-priority__field:nth-child(1) { height: 6px; }
.protocol-attachment-priority__field:nth-child(2) { height: 10px; }
.protocol-attachment-priority__field:nth-child(3) { height: 14px; }

.protocol-attachment-priority__field.is-filled {
  background: var(--color-content);
}

.protocol-attachment-moment .lui-identifier,
.protocol-attachment-moment .lui-identifier__content,
.protocol-attachment-moment .lui-identifier__value {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.protocol-attachment-moment .lui-identifier {
  align-items: flex-start;
  height: auto;
}

.protocol-attachment-moment .lui-identifier__content {
  flex-wrap: wrap;
}

/* FLUX-10 — the index's Momento column got a max-width cap so the row fits at
   1440 without a horizontal scroll (see _index_table.html.erb). Same
   technique as .protocol-attachment-moment above: the identifier token has no
   overflow handling of its own, so without this the chip's label just clips
   mid-word with no ellipsis. Wrapping to a second line (not truncating) keeps
   the full moment name readable — losing "Pré-diagnóstico" to "Pré-diagn…"
   is a worse trade than a slightly taller row. */
.protocol-moment-chips .lui-identifier,
.protocol-moment-chips .lui-identifier__content,
.protocol-moment-chips .lui-identifier__value,
.protocol-moment-chips .lui-identifier__label {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.protocol-moment-chips .lui-identifier {
  align-items: flex-start;
  height: auto;
}

/* FLUX-10 — Catálogo column: badges stack, each one gets the full column
   width and truncates inside it instead of two badges sharing 165px. */
.protocol-catalog-destinations {
  max-width: 180px;
}

.protocol-catalog-destinations > .lui-badge,
.protocol-catalog-destinations > a {
  max-width: 100%;
}

/* Column caps of the protocols index (`lui-table-col-max` reads the var). */
.protocols-index-col--name { --lui-col-max-width: 240px; }
.protocols-index-col--moment { --lui-col-max-width: 150px; }

.protocol-moment-chips .lui-identifier__content {
  flex-wrap: wrap;
}

/* "Adicionar associação" (S4 — moved into the main flow as a full-width
   card, see .protocol-where-it-appears__attach-form above). */
.protocol-where-it-appears__attach-form .protocol-attach-form__label-row {
  margin-bottom: 8px;
}

.protocol-where-it-appears__attach-form .protocol-attach-form__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: help;
  line-height: 1;
}

.protocol-where-it-appears__attach-form .protocol-attach-form__hint:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Moment picker (B5.4 / DEC-17 alternative 2) — page-local composition.

   The journey as lanes: one per app, grouped by the flow block that declares
   the moments. There is no `lui-*` stepper, and this is the first surface that
   needs one; it stays page-local until a second screen asks for the same shape
   (the flow editor widget is the candidate).

   Border-only elevation, role tokens throughout, so light and dark come free.
   The lanes are a responsive auto-fit grid: three columns on a category tab,
   one on a phone, without a breakpoint per surface.
   --------------------------------------------------------------------------- */
.protocol-moment-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.protocol-moment-picker__lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  min-width: 0;
}

.protocol-moment-picker__lane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-secondary);
}

.protocol-moment-picker__lane-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--color-content);
}

.protocol-moment-picker__group {
  margin-top: 6px;
  color: var(--color-content-secondary);
}

.protocol-moment-picker__step-wrap {
  display: block;
  min-width: 0;
}

.protocol-moment-picker__step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.375rem);
  background: var(--color-background);
  cursor: pointer;
}

.protocol-moment-picker__step:hover {
  border-color: var(--color-tertiary);
}

.protocol-moment-picker__step:focus-within {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
}

.protocol-moment-picker__step.is-selected {
  border-color: var(--color-chrome-accent, var(--color-content));
  box-shadow: inset 0 0 0 1px var(--color-chrome-accent, var(--color-content));
}

.protocol-moment-picker__step.is-taken {
  cursor: not-allowed;
  opacity: 0.6;
}

.protocol-moment-picker__radio {
  flex-shrink: 0;
  margin: 0;
  cursor: inherit;
}

.protocol-moment-picker__step-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.protocol-moment-picker__count {
  flex-shrink: 0;
  cursor: help;
}

.protocol-moment-picker__error {
  color: var(--color-danger-fg);
}

/* Inherited protocols on a product / sub-category (B5.3) — read-only stack,
   visually quieter than the direct rows above it. Border, not shadow. */
.protocol-attachments-list--inherited {
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
  background: var(--color-secondary);
}

.protocol-attachments-list__item--inherited + .protocol-attachments-list__item--inherited {
  border-top: 1px solid var(--color-tertiary);
}

/* Advanced options in the "New protocol" modal — priority hides behind it. */
.protocol-create-advanced {
  border: 1px dashed var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  padding: 8px 12px;
}

.protocol-create-advanced > summary {
  cursor: pointer;
  color: var(--color-content-secondary);
}

.protocol-create-advanced > summary:focus-visible {
  outline: 2px solid var(--color-chrome-accent, var(--color-app));
  outline-offset: 2px;
  border-radius: 4px;
}

/* Priority segmented — equal-width Low / Medium / High (page-local on attach forms). */
.protocol-attach-priority {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.protocol-attach-priority .protocol-attach-priority__segmented {
  width: 100%;
}

.protocol-attach-priority .protocol-attach-priority__segmented .lui-filter-pill {
  flex: 1;
  justify-content: center;
  padding: 0 8px;
}

.protocol-attach-priority .protocol-attach-priority__segmented .lui-filter-pill__label {
  padding-right: 0;
}

/* S4 — the inline auto-submit priority editor (attachment rows, "Ordem
   neste momento"'s own-priority control): compact and row-fitting, not the
   full-width column the standalone attach form uses. */
.protocol-attach-priority--inline {
  flex-direction: row;
  width: auto;
  min-width: 0;
}

.protocol-attach-priority--inline .protocol-attach-priority__segmented {
  width: auto;
}

.protocol-attach-priority--inline .protocol-attach-priority__segmented .lui-filter-pill {
  flex: 0 0 auto;
  padding: 0 8px;
}

/* Highlight star — tertiary hover wash; yellow filled glyph when active.
   Exception: 18px icon (loopos-ui-v2 buttons use 14px; action-bar icon-only uses 16px) —
   see docs/loopos-ui-exceptions.md. ID + class beats #lui-action-bar icon-only 16px. */
#lui-action-bar .protocol-highlight-star.lui-button .material-symbols-rounded,
.protocol-highlight-star.lui-button .material-symbols-rounded {
  font-size: 18px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}
#lui-action-bar .protocol-highlight-star.lui-button .material-symbols-rounded--filled,
.protocol-highlight-star.lui-button .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 18 !important;
}

.protocol-highlight-star.lui-button[aria-pressed="true"] {
  /* Avoid default pressed content wash (reads as black fill behind the star). */
  background: transparent;
  border-color: transparent;
  color: var(--color-warning);
}

.protocol-highlight-star.lui-button[aria-pressed="true"]:hover,
.protocol-highlight-star.lui-button[aria-pressed="true"]:focus-visible {
  background: var(--color-secondary);
  border-color: transparent;
  color: var(--color-warning);
}

.protocol-highlight-star.lui-button[aria-pressed="true"] .material-symbols-rounded {
  color: var(--color-warning);
}

.protocol-show-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: 28rem;
}

.attachable-protocols-workspace--editor {
  min-height: 28rem;
}

.attachable-protocols-workspace__editor {
  min-height: 22rem;
}

.protocol-show-workspace > .protocol-editor-host {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* FLUX-10 (G) / S1 — the editor (.protocol-show-workspace) sits inside the
   Detalhes tab panel, itself inside `.protocol-show-grid__main` (the grid's
   "main" area — see .protocol-show-grid above), not as a direct child of
   `.lui-show-layout--protocol` any more. Height-fill (the editor manages its
   own internal scroll) only makes sense while that panel is the one actually
   showing — every panel is always in the DOM (hidden via the `hidden`
   attribute, never removed), so `:has()` keys off
   `.lui-tabs__panel:not([hidden])` specifically, not just "a workspace
   exists somewhere in this page". Momentos e Associações / Logs get ordinary
   document flow and the page's own scroll.

   The grid itself grows to fill the content area (`flex: 1 0 auto` — it is a
   flex item of `.lui-main-layout__content`), and `grid-template-rows: auto
   1fr` puts every bit of that height the header row does not need onto the
   second row (main + aside). Inside "main", the same flex-grow chain as
   before takes it the rest of the way down to the editor, with a 32rem
   floor. Below that (1440×900 with the AI summary open left ~400px,
   1024×800 left ~170px) the content area scrolls instead of squeezing the
   editor: the chain grows but never shrinks, and nothing in it is a scroll
   container (`overflow-x: clip`, not `hidden`) — a scroll container's
   automatic minimum height is 0, which is what let it collapse. The
   workspace's `flex-basis: 0` keeps the editor's own content (a long
   document) out of that minimum, so the page never grows to the document's
   height and the panes keep scrolling on their own. The aside, in the same
   grid row, stays its own natural height (`align-self: start` on
   `.protocol-show-aside`) rather than stretching to match. */
@media (min-width: 769px) and (max-width: 1359.98px) {
  /* Narrow area template (header / aside / main, one per row — see
     .protocol-show-grid above): 3 explicit rows, the last one flexible. */
  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) {
    flex: 1 0 auto;
    grid-template-rows: auto auto 1fr;
    overflow-x: clip;
  }
}

@media (min-width: 1360px) {
  /* Wide area template ("header aside" / "main aside" — aside spans both):
     2 explicit rows, the second one flexible. */
  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) {
    flex: 1 0 auto;
    grid-template-rows: auto 1fr;
    overflow-x: clip;
  }
}

@media (min-width: 769px) {
  .lui-main-layout__content:has(.lui-show-layout--protocol .lui-tabs__panel:not([hidden]) .protocol-show-workspace) {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .protocol-show-grid__main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .protocol-show-grid__main > .lui-page-tabs {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    overflow-x: clip;
    min-height: 0;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .lui-page-tabs > .lui-tabs {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    min-height: 0;
  }

  .lui-show-layout--protocol:has(.lui-tabs__panel:not([hidden]) .protocol-show-workspace) .lui-tabs__panel:not([hidden]) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lui-show-layout--protocol .protocol-show-workspace {
    flex: 1 0 0;
    min-height: 32rem;
  }
}

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

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

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

.lui-page-header__row > .lui-show-layout__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 0;
  margin-left: auto;
}

.lui-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 6px;
  margin: 8px 0 0;
  padding: 0;
}

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

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

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

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

.lui-page-header__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* Coming soon — inline pill and page block (native/coming-soon.md) */
.lui-coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-coming-soon.copy-12-medium { color: var(--color-content-secondary); }

.lui-coming-soon__icon {
  font-size: 14px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 14;
}

.lui-coming-soon--page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 48px 24px;
  text-align: center;
  white-space: normal;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  color: var(--color-content);
  box-sizing: border-box;
}

.lui-coming-soon--page .lui-coming-soon__logo-mark { margin-bottom: 24px; }

.lui-coming-soon--page .lui-coming-soon__body { margin-top: 8px; }

.lui-coming-soon__logo-mark {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

html[data-theme="dark"] .lui-coming-soon__logo-mark--dark,
html:not([data-theme="dark"]) .lui-coming-soon__logo-mark--light {
  display: none;
}

.lui-sidebar__item .lui-coming-soon { margin-left: auto; }

.lui-show-layout__actions { margin-top: -8px; }

/* Readable prose column for descriptions / lead copy on show pages */
.lui-prose { max-width: 72ch; }

/* Tooltip — loopos-ui-v2 / Rails Blocks (see rails-blocks/components/tooltip.md) */
.lui-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  white-space: nowrap;
}

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

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

.lui-tooltip__trigger--icon {
  justify-content: center;
  min-width: 20px;
  min-height: 20px;
  padding: 4px;
  border-radius: 9999px;
  border-color: transparent;
  background: transparent;
}

.lui-tooltip__trigger--icon:hover {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
}

.lui-tooltip__trigger--icon .material-symbols-rounded {
  font-size: 16px;
  color: var(--color-content-secondary);
}

.lui-tooltip__trigger--icon:hover .material-symbols-rounded {
  color: var(--color-content);
}

.lui-tooltip__trigger--bare {
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: normal;
}

.lui-tooltip__trigger--bare:hover {
  background: transparent;
}

.lui-tooltip-portal {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  overflow: visible;
}

body > .lui-tooltip__bubble--portaled {
  position: fixed;
  z-index: 2147483647;
  pointer-events: none;
  overflow: visible;
}

.lui-tooltip__bubble {
  position: fixed;
  z-index: 2147483647;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: max-content;
  min-width: min-content;
  max-width: min(var(--lui-tooltip-max-width, 200px), calc(100vw - 16px));
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-content);
  color: var(--color-background);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.1);
  pointer-events: none;
  overflow: visible;
  white-space: normal;
}

.lui-tooltip__bubble--portaled {
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.lui-tooltip__bubble--portaled[data-state="open"] {
  opacity: 1;
  visibility: visible;
}

.lui-tooltip__bubble--small {
  padding: 4px 6px;
}

.lui-tooltip__bubble--large {
  --lui-tooltip-max-width: 280px;
  padding: 8px 12px;
}

.lui-tooltip__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  line-height: 16px;
  color: var(--color-background);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.lui-tooltip__title {
  display: block;
  color: var(--color-background);
  font-weight: 500;
}

.lui-tooltip__description {
  display: block;
  color: var(--color-background);
  font-weight: 400;
}

.lui-tooltip__link {
  color: var(--color-background);
  font-weight: 500;
  text-decoration: underline;
}

.lui-tooltip__kbd {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  padding-left: 2px;
  white-space: nowrap;
}

.lui-tooltip__kbd .lui-kbd__key {
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--color-background) 35%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-background) 12%, transparent);
  color: var(--color-background);
}

.lui-tooltip__kbd .lui-kbd__sep {
  color: color-mix(in srgb, var(--color-background) 60%, transparent);
}

.lui-tooltip__arrow {
  display: none;
  position: absolute;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--color-content);
  transform: rotate(45deg);
  pointer-events: none;
}

.lui-tooltip__arrow[data-side] {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .lui-tooltip__bubble--portaled {
    transition: opacity 80ms ease, visibility 80ms ease;
  }
}

/* Inline info hint (lfa_hint, etc.) — compact circular info control, no button chrome */
.lui-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  appearance: none;
  -webkit-appearance: none;
  cursor: help;
  vertical-align: middle;
  flex-shrink: 0;
}

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

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

.lui-hint__icon {
  color: currentColor;
  cursor: inherit;
}

/* Pill — compact status marker (e.g. active-on partner in app catalogue) */
.lui-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  height: 20px;
  border-radius: 9999px;
  font-size: 12px;
  line-height: 16px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
  border: 1px solid var(--color-tertiary);
}

.lui-pill--success {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-success-fg);
  border-color: transparent;
}

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

/* Spare-parts Needs: three featured Itados tiles + one 30-day card. Inner
   month stats are type only — no nested card chrome. */
.spp-needs-kpis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.spp-kpi-month__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}

.spp-kpi-month__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
}

.spp-kpi-month__stat:hover .heading-20 {
  color: var(--color-content);
}

@media (max-width: 639px) {
  .spp-kpi-month__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* PO show: supplier → destination as one flow (circular arrow node). */
.spp-order-route {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.spp-order-route__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0 4px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  color: var(--color-foreground);
}

/* Shipment show: the transport guide is the PDF (whole chip is the hit). */
.spp-guide-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--color-tertiary);
  border-radius: 999px;
  background: var(--color-background);
  color: inherit;
  text-decoration: none;
}

a.spp-guide-pill:hover {
  background: var(--color-secondary);
}

a.spp-guide-pill:focus-visible {
  outline: 2px solid var(--color-content);
  outline-offset: 2px;
}

.spp-guide-pill--missing {
  border-style: dashed;
}

.spp-guide-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-foreground);
}

.spp-guide-pill__copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.spp-guide-pill__action {
  flex-shrink: 0;
  margin-right: 2px;
  color: var(--color-content-secondary);
}

/* Legacy dense floor kept for any remaining compact KPI rows. */
.lui-kpi-grid--dense {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

/* Connections knowledge graph */
.lui-connections-graph__chrome {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.lui-connections-graph__stats {
  white-space: nowrap;
}

.lui-connections-graph__hint {
  max-width: 36rem;
}

.lui-connections-graph__legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--color-tertiary);
  flex-shrink: 0;
  background: var(--color-content-secondary);
}

.lui-connections-graph__legend-swatch[data-color-key="process"] {
  background: var(--color-informative);
  border-color: color-mix(in srgb, var(--color-informative) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="item"] {
  background: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="end_user"] {
  background: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="partner_user"] {
  background: var(--color-orange);
  border-color: color-mix(in srgb, var(--color-orange) 40%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="entity"] {
  background: var(--color-informative-fg);
  border-color: color-mix(in srgb, var(--color-informative-fg) 35%, var(--color-tertiary));
}

.lui-connections-graph__legend-swatch[data-color-key="user"] {
  background: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-tertiary));
}

.lui-connections-graph__mobile-fallback {
  display: none;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background-color: var(--color-primary);
}

.lui-connections-graph__overlay-icon {
  font-size: 28px;
  line-height: 1;
}

.lui-connections-graph__detail {
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background-color: var(--color-background);
}

.lui-connections-graph__fit {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

.lui-connections-graph__fit:has([hidden]) {
  display: none;
}

.lui-connections-graph__fit .lui-button {
  pointer-events: auto;
  box-shadow: none;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-connections-graph__canvas-wrap {
  position: relative;
  isolation: isolate;
  min-height: 28rem;
  height: clamp(28rem, calc(100vh - 20rem), 42rem);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background-color: var(--color-background);
}

.lui-connections-graph__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--color-background) 88%, var(--color-secondary));
}

/* Author `.flex { display: flex }` beats the UA [hidden] rule — overlays must really hide. */
.lui-connections-graph__overlay[hidden] {
  display: none !important;
}

.lui-connections-graph__overlay:not([hidden]) {
  display: flex;
}

.lui-connections-graph__empty:not([hidden]),
.lui-connections-graph__error:not([hidden]) {
  flex-direction: column;
}

.lui-connections-graph__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}

.lui-connections-graph__canvas .vis-network {
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}

.lui-connections-graph__canvas--dragging .vis-network,
.lui-connections-graph__canvas--dragging .vis-network canvas {
  cursor: grabbing !important;
}

.lui-connections-graph__canvas .vis-network,
.lui-connections-graph__canvas canvas {
  background: transparent !important;
}

.lui-connections-graph__canvas--hidden {
  visibility: hidden;
  pointer-events: none;
}

.lui-connections-graph__detail--empty {
  display: none;
}

.lui-connections-graph--compact .lui-connections-graph__canvas-wrap {
  min-height: 18rem;
  height: 18rem;
}

.lui-connections-graph--compact .lui-connections-graph__layout {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .lui-connections-graph--compact .lui-connections-graph__layout {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }
}

@media (max-width: 767px) {
  .lui-connections-graph__canvas-wrap,
  .lui-connections-graph__detail {
    display: none;
  }

  .lui-connections-graph__mobile-fallback {
    display: block;
  }
}

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

.lui-tab-connections .lui-filter-pill-tabs,
.lui-tab-connections [data-controller="filter-pill-tabs"] {
  gap: 12px;
}

/* ── LoopOS Flux App — Surface tab (per-tier accordion cards; stack via ERB gap-3) ── */
.lui-surface__tier-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lui-surface__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.lui-surface-api-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-api-list__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-surface__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Source-owned flow preview stacks — more air between cards so edges stay readable */
.lui-surface__rows--flows {
  gap: 14px;
}

/* Single artifact row — icon + label/path + trailing meta (scope/badge) */
.lui-surface-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

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

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

.lui-surface-row__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-surface-row__path {
  color: var(--color-content-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-surface-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.lui-surface-tab-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.lui-surface-tab-title__model {
  flex-shrink: 0;
  text-transform: capitalize;
}

.lui-surface-tab-title__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-surface-tab-title__sep {
  flex-shrink: 0;
  user-select: none;
}

/* Sidebar-group cluster inside portal pages */
.lui-surface-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-group + .lui-surface-group {
  margin-top: 8px;
}

.lui-surface-group__label {
  padding-left: 2px;
}

/* Flow blocks — visual nodes */
.lui-surface-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.lui-surface-block-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.lui-surface-block-node__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--color-chrome-accent);
  background: color-mix(in srgb, var(--color-chrome-accent) 12%, transparent);
}

.lui-surface-block-node__slug {
  color: var(--color-content-secondary);
  word-break: break-all;
}

/* Source-owned flows */
.lui-surface-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
}

.lui-surface-flow__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lui-surface-flow-preview {
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  background: var(--color-background);
}

.lui-surface-flow .flow-editor-surface-preview-host {
  border: 0;
  border-radius: 0;
}

.lui-surface-row--actionable {
  cursor: pointer;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  padding: 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lui-surface-row--actionable:hover {
  background: color-mix(in srgb, var(--color-chrome-accent) 6%, var(--color-background));
  border-color: color-mix(in srgb, var(--color-chrome-accent) 24%, var(--color-tertiary));
}

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

.lui-surface-row__chevron {
  flex-shrink: 0;
}

.lui-surface-agent-dialog__body {
  overflow: auto;
  max-height: calc(100vh - 160px);
  padding: 0;
}

.lui-surface-agent-dialog__body .lui-page-split--contrib {
  padding: 16px 20px 20px;
}

/* Partner library — families of vault activatables */
.lui-surface-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

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

.lui-surface-library__entries {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-library__entry {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.lui-surface-library__entry .lui-tag,
.lui-surface-library__entry .lui-token,
.lui-surface-library__entry .lui-identifier {
  max-width: 100%;
}

/* Scopes — compact chips, scope shown once */
.lui-surface-scopes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lui-surface-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-surface-scope__action {
  min-width: 4.5rem;
  text-transform: capitalize;
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .lui-surface-row {
    flex-wrap: wrap;
  }

  .lui-surface-row__meta {
    justify-content: flex-start;
  }
}

/* JSON Schema viewer — structured + raw toggle */
.lui-schema-viewer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-schema-viewer__toolbar {
  display: flex;
  justify-content: flex-end;
}

.lui-schema-viewer__mode {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.lui-schema-viewer__tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-content-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: calc(var(--radius-md, 6px) - 2px);
  cursor: pointer;
}

.lui-schema-viewer__tab--active {
  background: var(--color-background);
  color: var(--color-content);
}

.lui-schema-viewer__panel {
  min-width: 0;
}

.lui-schema-viewer__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lui-schema-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-schema-field--nested {
  margin-left: 12px;
  border-style: dashed;
}

.lui-schema-field__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lui-schema-field__name {
  font-weight: 600;
}

.lui-schema-field__default {
  margin-left: auto;
}

.lui-schema-field__constraints {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-schema-field__children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.lui-detail-section + .lui-detail-section { margin-top: 0; }

/* Partner organization settings — one column until the tab is wide enough
   for two cards. Container query, not the viewport: the sidebar already
   consumes width. Controls fill the card so a select is not stuck at 420px
   inside a half-width card. */
.lui-organization-settings {
  container-type: inline-size;
}

.lui-organization-settings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.lui-organization-settings__grid > .lui-card {
  height: 100%;
  min-width: 0;
}

@container (min-width: 880px) {
  .lui-organization-settings__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lui-organization-settings__grid .lui-forms__group,
  .lui-organization-settings__grid .lui-forms__control,
  .lui-organization-settings__grid .lui-select,
  .lui-organization-settings__grid .lui-select__shell,
  .lui-organization-settings__grid .lui-locale-select,
  .lui-organization-settings__grid .lui-locale-select .lui-forms__composite {
    max-width: none;
    width: 100%;
  }
}

.lui-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.lui-detail-list__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-detail-section__logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  margin-bottom: 4px;
}

.lui-detail-card.lui-card { padding: 0; }

/* Tab-panel cards — shared/card/tab_card (loopos-ui-v2 gallery rhythm).
   overflow:hidden clipped in-card pickers (locale listbox, LOOPOS-124).
   Header keeps the radius clip; an open control lifts the card over siblings.
   Explicit overflow-hidden on the same card still clips (Test Lab canvas). */
.lui-tab-panel-card.lui-card {
  overflow: visible;
  position: relative;
  z-index: 0;
  gap: 0;
  padding: 0;
}

.lui-tab-panel-card.lui-card.overflow-hidden {
  overflow: hidden;
}

.lui-tab-panel-card.lui-card:has([aria-expanded="true"]) {
  z-index: 4;
}

/* Direct children only — nested catalog/activation cards also use lui-card__* */
.lui-tab-panel-card.lui-card > .lui-card__header {
  padding: 12px;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-tertiary);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}

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

.lui-tab-panel-card__header {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.lui-tab-panel-card__header--with-actions {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lui-tab-panel-card__header-text {
  min-width: 0;
  flex: 1 1 auto;
}

.lui-tab-panel-card__header-actions {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lui-tab-panel-card__title {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* heading-16 is 16/22 — sm icon-only is 28px and stretches the section header. */
.lui-tab-panel-card__title .lui-button--icon-only,
.lui-tab-panel-card__header-actions .lui-button--icon-only {
  width: 22px;
  min-width: 22px;
  height: 22px;
}

.lui-tab-panel-card__body {
  padding: 12px;
}

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

/* List-only body — no nested shell / row chrome; 4px header↔rows, 2px row↔row.
   :only-child so a footer form (or mixed body) keeps the 12px inset. */
.lui-tab-panel-card__body:has(> .lui-list:only-child) {
  padding: 4px 0 0;
}

.lui-tab-panel-card__body > .lui-list {
  border: none;
  border-radius: 0;
  background: transparent;
}

.lui-tab-panel-card__body > .lui-list .lui-list__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-tab-panel-card__body > .lui-list .lui-list__item {
  border-top: none;
}

.lui-tab-panel-card.lui-card > .lui-card__footer {
  padding: 12px;
  background: var(--color-background);
  border-top: 1px solid var(--color-tertiary);
}

.lui-role-assign-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.lui-role-assign-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
}

.lui-role-assign-card:hover,
.lui-role-assign-card:focus-visible {
  background: var(--color-primary);
  border-color: var(--color-border, var(--color-tertiary));
}

.lui-role-assign-card .lui-avatar {
  flex-shrink: 0;
  margin-top: 1px;
}

.lui-role-assign-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-role-assign-card__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

/* Process show — LoopOS Flow tab: diagram + chronology log */
.lui-tab-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 992px) {
  .lui-tab-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: stretch;
    gap: 16px;
  }

  .lui-tab-flow__chronology .lui-tab-panel-card.lui-card {
    height: 100%;
    max-height: clamp(28rem, calc(100vh - 22rem), 44rem);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .lui-tab-flow__chronology .lui-tab-panel-card.lui-card > .lui-card__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .lui-tab-flow__chronology .lui-scroll-edge {
    flex: 1 1 auto;
    min-height: 0;
  }
}

.lui-record-image-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lui-record-image-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-family: var(--font-sans);
}

.lui-record-image-upload__slot {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.lui-record-image-upload__trigger {
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 6px;
  line-height: 0;
}

.lui-record-image-upload__preview {
  position: relative;
  display: inline-flex;
  line-height: 0;
}

.lui-record-image-upload__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-content) 52%, transparent);
  color: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-record-image-upload__icon {
  font-size: 24px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.lui-record-image-upload__trigger:hover .lui-record-image-upload__overlay,
.lui-record-image-upload__trigger:focus-visible .lui-record-image-upload__overlay {
  opacity: 1;
}

.lui-record-image-upload__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
  border-radius: 6px;
}

/* With image: reveal overlay + delete together on slot hover; upload icon stays centered */
.lui-record-image-upload--has-image .lui-record-image-upload__overlay {
  opacity: 0;
}

.lui-record-image-upload--has-image .lui-record-image-upload__trigger:hover .lui-record-image-upload__overlay,
.lui-record-image-upload--has-image .lui-record-image-upload__trigger:focus-visible .lui-record-image-upload__overlay {
  opacity: 0;
}

.lui-record-image-upload--has-image .lui-record-image-upload__slot:hover .lui-record-image-upload__overlay,
.lui-record-image-upload--has-image .lui-record-image-upload__slot:focus-within .lui-record-image-upload__overlay {
  opacity: 1;
}

.lui-record-image-upload__remove-form {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
}

.lui-record-image-upload__slot:hover .lui-record-image-upload__remove-form,
.lui-record-image-upload__slot:focus-within .lui-record-image-upload__remove-form,
.lui-record-image-upload__remove-form:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.lui-record-image-upload__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-content) 84%, transparent);
  color: var(--color-background);
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-content) 24%, transparent);
}

.lui-record-image-upload__remove .material-symbols-rounded {
  font-size: 14px;
}

.lui-record-image-upload__remove:hover {
  background: var(--color-danger);
  color: var(--color-background);
}

.lui-record-image-upload__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-chrome-accent);
}

/* Circle — user avatars (matches lui-avatar--circle); whole control is round */
.lui-record-image-upload--circle .lui-record-image-upload__trigger,
.lui-record-image-upload--circle .lui-record-image-upload__trigger:focus-visible,
.lui-record-image-upload--circle .lui-record-image-upload__overlay,
.lui-record-image-upload--circle .lui-thumbnail {
  border-radius: 9999px;
}

.lui-record-image-upload--circle .lui-thumbnail img {
  object-fit: cover;
  object-position: center;
}

/* Delete chip on the rim — not clipped by the round mask */
.lui-record-image-upload--circle .lui-record-image-upload__remove-form {
  top: -2px;
  right: -2px;
}

@media (hover: none) {
  .lui-record-image-upload--has-image .lui-record-image-upload__remove-form {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lui-record-image-upload__overlay,
  .lui-record-image-upload__remove-form {
    transition: none;
  }
}

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

@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,
.lui-detail-tab-stack__primary .lui-card,
.lui-detail-tab-stack__primary > .lui-detail-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.process-detail-primary {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.process-detail-primary > .lui-card,
.process-detail-people > .lui-card {
  width: 100%;
  min-width: 0;
}

.process-detail-item__identity {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.process-detail-item__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

/* Process / Equipment / Client: label left, value right (page-brief exploration). */
.process-detail-process .lui-detail-list,
.process-detail-item .lui-detail-list,
.process-detail-client .lui-detail-list {
  gap: 0;
}

.process-detail-process .lui-detail-list__row,
.process-detail-item .lui-detail-list__row,
.process-detail-client .lui-detail-list__row {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding: 8px 0;
  border-top: 1px solid var(--color-tertiary);
  min-width: 0;
}

.process-detail-process .lui-detail-list__row:first-child,
.process-detail-item .lui-detail-list__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.process-detail-process .lui-detail-list__row:last-child,
.process-detail-item .lui-detail-list__row:last-child,
.process-detail-client .lui-detail-list__row:last-child {
  padding-bottom: 0;
}

.process-detail-process .lui-detail-list__row dt,
.process-detail-item .lui-detail-list__row dt,
.process-detail-client .lui-detail-list__row dt {
  flex: 0 1 auto;
}

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

/* Darty MAX process tab — same label-left / value-right rhythm as the Core
   process Detail cards, without the page-brief bordered rows. */
.lfa-darty-max-process .lui-detail-list {
  gap: 0;
}

.lfa-darty-max-process .lui-detail-list__row {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  padding: 6px 0;
  min-width: 0;
}

.lfa-darty-max-process .lui-detail-list__row:first-child {
  padding-top: 0;
}

.lfa-darty-max-process .lui-detail-list__row:last-child {
  padding-bottom: 0;
}

.lfa-darty-max-process .lui-detail-list__row dt {
  flex: 0 1 auto;
  max-width: 42%;
}

.lfa-darty-max-process .lui-detail-list__row dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin: 0;
  text-align: right;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--color-content);
  font-weight: 400;
}

.lfa-darty-max-process .dmi-protocol-answers .lui-table__body th[scope="row"] {
  color: var(--color-content-secondary);
  font-weight: 400;
}

.lfa-darty-max-process .dmi-protocol-answers .lui-table__body td {
  color: var(--color-content);
  font-weight: 400;
}

.lfa-darty-max-process .lui-detail-list__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

/* Visit card — option C. Pack CSS does not load on the Core process show.
   Sheet is two columns of label | value. The footer is one row: secondary
   actions on the left, the decision (receive parts) on the right. Buttons
   stay their own width — a column with the default stretch made "Edit
   schedule" a full-width bar and left Cancel as a chip. */
.lfa-visit-layout {
  container-type: inline-size;
}

.lfa-darty-max-process .lfa-visit-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 28px;
}

@container (min-width: 40rem) {
  .lfa-darty-max-process .lfa-visit-sheet {
    grid-template-columns: 1fr 1fr;
  }
}

.lfa-visit-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-tertiary);
}

.lfa-visit-foot__secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lfa-visit-foot__primary {
  margin-left: auto;
  flex: 0 0 auto;
}

.lfa-visit-foot__forms {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: auto;
  max-width: 100%;
}

.lfa-visit-foot__forms > form,
.lfa-visit-foot__forms > .lui-button,
.lfa-visit-foot__forms > a {
  width: auto;
  flex: 0 0 auto;
}

.lfa-visit-foot .lui-button {
  width: auto;
}

.lfa-visit-foot__forms > form:has(select, textarea, .lui-forms__group) {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.lfa-darty-max-process .dmfs-case-parts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lfa-darty-max-process .dmfs-case-parts__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lfa-darty-max-process .dmfs-case-parts__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.lfa-darty-max-process .dmfs-case-parts__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lfa-darty-max-process .dmfs-case-parts__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
}

.lfa-darty-max-process .dmfs-case-parts__missing {
  color: var(--color-danger-fg);
}

/* Process state: one split chip (block | token). Hue tokens match lui-badge. */
.lui-flow-position {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-tertiary);
  background: var(--color-secondary);
  vertical-align: middle;
}

.lui-flow-position__block,
.lui-flow-position__token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 8px;
  line-height: 16px;
}

.lui-flow-position__block {
  color: var(--color-content-secondary);
  background: var(--color-tertiary);
}

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

.lui-flow-position__label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lui-flow-position__icon {
  flex-shrink: 0;
  font-size: 14px;
}

.lui-flow-position__rule {
  width: 1px;
  flex-shrink: 0;
  background: var(--color-tertiary);
}

.lui-flow-position--yellow {
  border-color: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--yellow .lui-flow-position__token {
  color: var(--color-warning-fg);
}
.lui-flow-position--yellow .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-warning) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--blue {
  border-color: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--blue .lui-flow-position__token {
  color: var(--color-informative-fg);
}
.lui-flow-position--blue .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--green {
  border-color: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-success) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--green .lui-flow-position__token {
  color: var(--color-success-fg);
}
.lui-flow-position--green .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-success) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--red {
  border-color: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--red .lui-flow-position__token {
  color: var(--color-danger-fg);
}
.lui-flow-position--red .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--orange {
  border-color: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-orange) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--orange .lui-flow-position__token {
  color: var(--color-orange-fg);
}
.lui-flow-position--orange .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-orange) var(--color-tint-border-strength), var(--color-tertiary));
}

.lui-flow-position--purple {
  border-color: color-mix(in srgb, var(--color-purple) var(--color-tint-border-strength), var(--color-tertiary));
  background: color-mix(in srgb, var(--color-purple) var(--color-tint-bg-strength), var(--color-background));
}
.lui-flow-position--purple .lui-flow-position__token {
  color: var(--color-purple-fg);
}
.lui-flow-position--purple .lui-flow-position__rule {
  background: color-mix(in srgb, var(--color-purple) var(--color-tint-border-strength), var(--color-tertiary));
}

.process-detail-people {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.process-detail-involved {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.process-detail-involved__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.process-detail-involved__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.process-detail-involved__row:has(> .process-detail-hit) {
  display: block;
}

.process-detail-involved__copy {
  flex: 1;
  min-width: 0;
}

.process-detail-hit {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-md, 6px);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: transparent;
}

.process-detail-hit--row {
  padding: 8px 16px;
  border-radius: 0;
}

.process-detail-item__photo-hit {
  display: block;
  padding: 0;
  overflow: hidden;
}

.process-detail-hit:hover,
.process-detail-hit:focus-visible {
  background: var(--color-secondary);
}

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

@container detail-tab (min-width: 40rem) {
  .process-detail-people {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(12rem, 0.8fr);
    align-items: start;
  }
}

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

.lui-detail-tab-stack__resources > *,
.lui-detail-tab-stack__resources-leading,
.lui-detail-tab-stack__resources-leading > .lui-detail-tab-section,
#bookings,
#bookings .lui-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  align-self: stretch;
}

.lui-detail-tab-section turbo-frame.lui-is-loading,
.lui-detail-tab-section turbo-frame[busy],
.lui-detail-tab-section turbo-frame[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* Bookings card: Turbo sets [busy] on the frame during create. Do not disable
   the whole card — a pending row (`.lui-list__item--pending`) is the loader. */
#bookings turbo-frame.lui-is-loading,
#bookings turbo-frame[busy],
#bookings turbo-frame[aria-busy="true"] {
  opacity: 1;
  pointer-events: auto;
}

#bookings .lui-list__item--pending {
  pointer-events: none;
}

#bookings .lui-list--hoverable .lui-list__item--pending:hover,
#bookings .lui-list--hoverable .lui-list__item--pending:focus-within {
  background: transparent;
}

.lui-detail-tab-section {
  min-width: 0;
  width: 100%;
  scroll-margin-top: 72px;
}

.lui-detail-tab-section turbo-frame,
.lui-detail-tab-section .lui-card {
  display: block;
  width: 100%;
  min-width: 0;
}

.lui-tab-detail {
  align-items: start;
}

.lui-detail-tab-stack .lui-tab-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.lui-detail-tab-stack .lui-tab-detail__span {
  grid-column: 1 / -1;
}

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

  .lui-detail-tab-stack__resources-leading {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
}

@container detail-tab (min-width: 56rem) {
  .lui-detail-tab-stack__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.85fr);
    align-items: start;
  }

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

/* Run show (Serviços): General and the type card sit side by side once the
   page is wide enough. Rows keep the process fact-list rhythm. */
.lui-run-show-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 900px) {
  .lui-run-show-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lui-run-show-cards .lui-tab-detail {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.lui-run-show-cards .lui-tab-detail > div {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  padding: 8px 0;
  border-top: 1px solid var(--color-tertiary);
  min-width: 0;
}

.lui-run-show-cards .lui-tab-detail > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.lui-run-show-cards .lui-tab-detail > div:last-child {
  padding-bottom: 0;
}

/* Metadata is one card. The tree is the body, not a second bordered table,
   and long values wrap instead of clamping to three lines. */
.lui-run-metadata .lui-metadata-tree {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.lui-run-metadata .lui-metadata-tree__value--clamp {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.lui-run-metadata .lui-metadata-dataset__json {
  padding: 12px;
}

.lui-tab-detail .lui-badge {
  width: fit-content;
  max-width: 100%;
}

.lui-detail-card__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

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

/*
 * LoopOS Flux App settings renderer (read-only + edit) — shared by the partner
 * Setup hub pane, admin partner Apps tab and inline activation config.
 * Groups reuse the .lui-detail-card__section divider rhythm without its inset,
 * because every consumer already sits inside a padded card body.
 * The grid is auto-fit so it really collapses on a narrow pane — unlike the
 * `md:grid-cols-2` Tailwind variant, which this app's CSS does not ship.
 */
.lui-app-settings {
  display: flex;
  flex-direction: column;
}

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

.lui-app-settings__group:first-child {
  padding-top: 0;
}

.lui-app-settings__group:last-child {
  padding-bottom: 0;
}

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

.lui-app-settings__group-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lui-app-settings__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 24px;
  align-items: start;
}

.lui-app-settings__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.lui-app-settings__field--full {
  grid-column: 1 / -1;
}

.lui-app-settings__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-app-settings__string-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-app-settings__string-list-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lui-app-settings__string-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-app-settings__string-list-row .lui-forms__group {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.lui-app-settings__string-list-row .lui-forms__control {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.lui-app-settings__string-list-row .lui-button {
  flex-shrink: 0;
}

.lui-app-settings__string-list-add {
  align-self: start;
}

.lui-app-settings__string-list:has(.lui-app-settings__string-list-rows [data-nested-form-target="item"]) .lui-app-settings__string-list-empty {
  display: none;
}

/* Value + unit suffix ("48 h") without pulling in a composite addon shell. */
.lui-app-settings__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lui-app-settings__control .lui-forms__control {
  flex: 1 1 auto;
}

.lui-app-settings__unit {
  flex-shrink: 0;
}

.lui-detail-card--two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
}
.lui-detail-card--two-col .lui-detail-card__section + .lui-detail-card__section {
  border-top: 1px solid var(--color-tertiary);
  border-left: none;
}
@media (min-width: 900px) {
  .lui-detail-card--two-col .lui-detail-card__section + .lui-detail-card__section {
    border-top: none;
    border-left: 1px solid var(--color-tertiary);
  }
}

.lui-page-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.lui-page-split--contrib {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 899px) {
  .lui-page-split,
  .lui-page-split--contrib {
    grid-template-columns: 1fr;
  }
}

/* Email templates — integrations portal */
.lui-email-template-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  width: 100%;
}

.lui-email-template-locale {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-primary);
}

.lui-email-template-locale__summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  color: var(--color-content);
}

.lui-email-template-locale__summary::-webkit-details-marker { display: none; }

.lui-email-template-locale__chevron {
  color: var(--color-content-secondary);
  transition: transform 120ms ease;
}

.lui-email-template-locale[open] .lui-email-template-locale__chevron {
  transform: rotate(180deg);
}

.lui-email-template-locale__body {
  border-top: 1px solid var(--color-tertiary);
  padding: 16px;
}

.lui-email-template-preview {
  height: min(70vh, 640px);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-primary);
}

.lui-email-template-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.lui-table__actions form { display: inline-flex; align-items: center; }

.lui-topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.lui-topbar-actions form { display: inline-flex; align-items: center; }
/* Form switches are full-width with the label on the left. In the action bar
   the same variant must shrink to the control + label, first among the CTAs. */
.lui-topbar-actions .lui-switch--label-left {
  width: auto;
  justify-content: flex-start;
}

/* Action-bar icon-only buttons: 16px (exception to unified 14px button icon rule).
   See docs/loopos-ui-exceptions.md */
.lui-topbar-actions .lui-button--icon-only .material-symbols-rounded,
#lui-action-bar .lui-button--icon-only .material-symbols-rounded {
  font-size: 16px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16 !important;
}
.lui-topbar-actions .lui-button--icon-only .material-symbols-rounded--filled,
#lui-action-bar .lui-button--icon-only .material-symbols-rounded--filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 16 !important;
}

.lui-topbar-sign-out {
  appearance: none;
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  color: var(--color-content);
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms ease;
}

.lui-topbar-sign-out:hover {
  background: var(--color-secondary);
}

.lui-sidebar__sign-out-form {
  width: 100%;
  margin: 0;
}

.lui-sidebar__bottom .lui-sidebar__sign-out-form .lui-dropdown__item {
  border-radius: 6px;
}

.lui-action-bar__start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* Breadcrumb + optional leading control (e.g. highlight) — tight 2px gap. */
.lui-action-bar__trail {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.lui-action-bar__back {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 6px;
}

.lui-action-bar__leading {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Breadcrumb — lui-breadcrumb
   Do not set overflow-x:hidden alone: CSS pairs it with overflow-y and
   crops tall Flux Apps identity tiles. Horizontal collapse still works via
   Stimulus hiding middle crumbs; clip only when needed (non–flux-app). */
.lui-breadcrumb {
  display: flex;
  overflow: visible;
  white-space: nowrap;
  min-width: 0;
  align-items: center;
}

.lui-action-bar:not(.lui-action-bar--flux-app) .lui-breadcrumb {
  overflow: hidden;
}

.lui-action-bar__trail > .lui-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
}

.lui-breadcrumb__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-breadcrumb__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

/* `display: flex` above would otherwise beat the `hidden` attribute. */
.lui-breadcrumb__item[hidden],
.lui-breadcrumb__overflow-menu [hidden] {
  display: none !important;
}

.lui-breadcrumb__item:last-child {
  min-width: 0;
}

.lui-breadcrumb__separator,
.lui-breadcrumb__icon {
  font-size: 16px;
  flex-shrink: 0;
}

.lui-breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

.lui-nav-icon-tile .lui-breadcrumb__icon {
  width: 18px;
  height: 18px;
}

.lui-nav-icon-tile--md .lui-breadcrumb__icon,
.lui-breadcrumb__icon--md {
  width: 29px;
  height: 29px;
}

.lui-nav-icon-tile--lg .lui-breadcrumb__icon,
.lui-breadcrumb__icon--lg {
  width: 50px;
  height: 50px;
}

.lui-breadcrumb__icon--lg:not(.lui-m_icon) {
  width: 56px;
  height: 56px;
  font-size: 56px;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 56;
}

.lui-breadcrumb__separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
}

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

/* Beat `.lui-dropdown__menu[open] { display: block }` so the column flex chain
   (max-height → body → turbo-frame → scroll viewport) actually constrains height. */
.lui-breadcrumb__switcher-menu.lui-dropdown__menu[open],
.lui-breadcrumb__switcher-menu.lui-dropdown__menu[data-floating="true"] {
  display: flex;
  flex-direction: column;
}

.lui-breadcrumb__switcher-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

/* Lazy list loads inside a turbo-frame — keep it in the flex height chain. */
.lui-breadcrumb__switcher-body > turbo-frame {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

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

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

.lui-breadcrumb__switcher-list.lui-dropdown__list.lui-scroll-edge__viewport::-webkit-scrollbar {
  width: 6px;
}

.lui-breadcrumb__switcher-list.lui-dropdown__list.lui-scroll-edge__viewport::-webkit-scrollbar-track {
  background: transparent;
}

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

.lui-breadcrumb__switcher-check {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--color-content);
}

.lui-breadcrumb__switcher-footer {
  flex-shrink: 0;
  padding: 0 4px 4px;
  border-top: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lui-breadcrumb__switcher-footer-action {
  margin-top: 4px;
}

/* Select — lui-select (+ Tom Select bridge) */
.lui-select { position: relative; width: 100%; }

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

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

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

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

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

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

/* Tom Select moves the original <select> out of sight by adding this class and
   expects the stylesheet to do the hiding. The app styles .ts-wrapper and
   .ts-control but never declared this one, so the select stayed on screen beside
   the control Tom Select had just built — two boxes, the label truncated.

   `visibility: hidden` is not enough: the partial sets it inline to avoid a
   flash of unstyled control, and lui--select clears it once initialised. Clip it
   out of the layout instead, and keep it in the accessibility tree — the real
   <select> is still what a screen reader and the form submission use. */
.ts-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.lui-forms__composite .ts-wrapper.single .ts-control,
.lui-forms__composite .ts-wrapper.multi .ts-control {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  color: var(--color-content);
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-shadow: none;
}

.lui-forms__composite .ts-wrapper.focus .ts-control,
.lui-forms__composite .ts-wrapper.dropdown-active .ts-control {
  border-color: transparent;
  box-shadow: none;
}

.lui-forms__composite .ts-wrapper.disabled .ts-control {
  cursor: not-allowed;
  color: var(--color-foreground);
  background: var(--color-primary);
}

/*
 * Select size variants — outer shell height (§3.5 control size scale).
 * xs → 24px · sm → 28px · md → 32px (default) · lg → 40px
 * Multi shells use min-height (not fixed height) so wrapped chips are not clipped.
 */
.lui-select--xs .lui-forms__composite.lui-select__shell {
  height: var(--lui-control-height-xs);
  min-height: var(--lui-control-height-xs);
  padding: 0 6px;
}

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

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

.lui-forms__composite.lui-select__shell:has(.lui-select__value--multi),
.lui-forms__composite:has(.ts-wrapper.multi) {
  height: auto;
  min-height: var(--lui-control-height-md);
}

.lui-select--xs .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-xs);
}

.lui-select--sm .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-sm);
}

.lui-select--lg .lui-forms__composite.lui-select__shell:has(.lui-select__value--multi) {
  height: auto;
  min-height: var(--lui-control-height-lg);
}

.lui-select__control:has(.lui-select__value--multi),
.lui-forms__composite .ts-wrapper.multi .ts-control {
  height: auto;
  align-self: stretch;
  padding-block: 4px;
  flex-wrap: wrap;
}

.lui-select--sm .lui-select__chip {
  padding: 1px 4px 1px 6px;
}

.lui-select--lg .lui-select__control {
  gap: 8px;
}

.lui-select__value,
.lui-forms__composite .ts-control .item {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

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

.lui-select__chip,
.lui-forms__composite .ts-control .item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 2px 4px 2px 8px;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-content);
}

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

.lui-forms__composite .ts-control .item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lui-select__chip[data-flag="true"],
.lui-forms__composite .ts-control .item[data-flag="true"],
.lui-select__chip--flagged {
  background: color-mix(in srgb, var(--color-danger) var(--color-tint-bg-strength), var(--color-background));
  color: var(--color-danger-fg);
}

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

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

.lui-select__chip-remove:hover,
.lui-forms__composite .ts-control .item .remove:hover {
  color: var(--color-content);
  background: color-mix(in srgb, var(--color-content) 12%, transparent);
}

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

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

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

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

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

.lui-select__shell:has(.lui-select__control[aria-expanded="true"]) .lui-select__chevron {
  transform: rotate(180deg);
}

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

.lui-select__dropdown.lui-dropdown__menu,
.lui-forms__composite .ts-dropdown {
  position: absolute;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  padding: 0;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  box-shadow: none;
  box-sizing: border-box;
}

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

.lui-select .lui-select__dropdown.lui-dropdown__menu {
  top: calc(100% + 4px);
  left: 0;
  right: 0;
}

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

/* Portaled onto <body> — never sit in document flow at the page bottom. */
body > .lui-select__dropdown.lui-dropdown__menu {
  position: fixed;
}

.lui-select__dropdown.lui-dropdown__menu[popover] {
  inset: unset;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  color: inherit;
}

.lui-select__list.lui-dropdown__list,
.lui-forms__composite .ts-dropdown-content {
  flex: 1 1 auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  overflow-y: auto;
}

.lui-select__group {
  padding: 8px 10px 4px;
  color: var(--color-content-secondary);
}

.lui-select__option.lui-dropdown__item,
.lui-forms__composite .ts-dropdown .option {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  color: var(--color-content);
  cursor: pointer;
}

.lui-select__option.lui-dropdown__item[data-active="true"],
.lui-select__option.lui-dropdown__item:hover,
.lui-forms__composite .ts-dropdown .option.active,
.lui-forms__composite .ts-dropdown .option:hover {
  background: var(--color-secondary);
}

.lui-select__option[aria-disabled="true"],
.lui-forms__composite .ts-dropdown .option.disabled {
  color: var(--color-foreground);
  cursor: not-allowed;
  pointer-events: none;
}

.lui-select__check {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-app);
  visibility: hidden;
}

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

.lui-select__option-label--flagged,
.lui-forms__composite .ts-dropdown .option .lui-select__option-label--flagged {
  color: var(--color-danger-fg);
}

.lui-select__option-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-content-secondary);
}

.lui-select__option-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lui-select__option.lui-dropdown__item:has(.lui-select__option-desc) {
  align-items: flex-start;
}

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

.lui-select__option-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lui-select__empty,
.lui-forms__composite .ts-dropdown .no-results,
.lui-forms__composite .ts-dropdown .no-more-results,
.lui-forms__composite .ts-dropdown .loading-more-results {
  padding: 12px 10px;
  text-align: center;
  color: var(--color-content-secondary);
}

.lui-select__filter {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-select__filter-input {
  width: 100%;
  height: var(--lui-control-height-sm);
  padding: 0 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--lui-radius-sm, 6px);
  background: var(--color-primary);
  color: var(--color-content);
  box-sizing: border-box;
}

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

.lui-select--compact-filter .lui-select__control,
.lui-select--compact-filter .lui-select__control:has(.lui-select__value--multi) {
  height: 100%;
  padding-block: 0;
  flex-wrap: nowrap;
}

.lui-forms__composite .ts-wrapper { position: relative; width: 100%; }
.lui-forms__composite .ts-wrapper .ts-control input { color: var(--color-content); }
/* Tom Select renders its search input with `size="1"` and leaves the growing to
   its own stylesheet, which this app does not load — it hand-rolls the .ts-*
   rules it wants instead. Without this the input stays ~28px and a placeholder
   longer than a couple of characters is clipped ("Aut" for "Automatic — …"). */
.lui-forms__composite .ts-wrapper .ts-control > input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.lui-forms__composite .dropdown-input-search-icon { color: var(--color-content-secondary); }
.lui-forms__composite .flag-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.lui-forms__composite .flag-toggle:hover {
  background: var(--color-secondary);
  color: var(--color-content);
}

.lui-forms__composite .external-tags-container .lui-select__chip { margin: 0; }

.lui-select__scroll-btn {
  position: absolute;
  left: 0;
  right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  background: linear-gradient(to bottom, var(--color-background), transparent);
  color: var(--color-content-secondary);
  z-index: 10;
}

.lui-select__scroll-btn--down {
  bottom: 0;
  background: linear-gradient(to top, var(--color-background), transparent);
}

/* Password — lui-password */
/* Number / quantity input — native/number-input.md */
.lui-number-input {
  display: block;
  width: 100%;
}

.lui-number-input__field,
.lui-forms__composite.lui-number-input__field {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  width: 100%;
}

.lui-number-input--plain .lui-number-input__field,
.lui-number-input--plain .lui-forms__composite.lui-number-input__field {
  padding: 0 10px;
}

.lui-number-input__field .lui-forms__control {
  flex: 1;
  min-width: 0;
  max-width: none;
  text-align: center;
  height: auto;
  min-height: 0;
  border: none;
  padding: 6px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.lui-number-input--plain .lui-number-input__field .lui-forms__control {
  text-align: start;
}

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

.lui-number-input__field .lui-forms__control::-webkit-outer-spin-button,
.lui-number-input__field .lui-forms__control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lui-number-input__field .lui-forms__control[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

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

.lui-forms__composite--lg .lui-number-input__btn {
  width: 24px;
  height: 24px;
}

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

.lui-number-input__btn:hover:not(:disabled) {
  background: var(--color-secondary);
  color: var(--color-content);
}

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

.lui-number-input__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Phone input — native/phone-input.md
   @flux-sync: .cursor/skills/🎨 frontend/loopos-ui-v2/rails-blocks/gallery.css (section 7) */
.lui-phone-input {
  position: relative;
  display: block;
  width: 100%;
}

.lui-phone-input__field,
.lui-forms__composite.lui-phone-input__field {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 10px 0 4px;
  width: 100%;
}

.lui-phone-input__dial {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 100%;
  padding: 0 8px 0 6px;
  border: none;
  border-right: 1px solid var(--color-tertiary);
  border-radius: 0;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
}

.lui-phone-input__dial:hover:not(:disabled) {
  background: var(--color-secondary);
}

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

.lui-phone-input__dial:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lui-phone-input__flag {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  line-height: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.lui-phone-input__flag img {
  display: block;
  width: 20px;
  height: 15px;
  object-fit: cover;
  image-rendering: auto;
}

.lui-locale-flag {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;
}

.lui-locale-flag svg {
  width: 1.125rem;
  height: auto;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-foreground) 12%, transparent);
}

.lui-locale-select-field {
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}

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

.lui-locale-select__shell {
  position: relative;
}

.lui-locale-select__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--color-content);
}

.lui-locale-select__trigger:not(.lui-button) {
  width: 100%;
  padding: 0;
  font: inherit;
}

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

.lui-locale-select__chevron {
  flex-shrink: 0;
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

.lui-locale-select .lui-forms__composite {
  width: max-content;
  min-width: 12rem;
  max-width: 100%;
}

.lui-locale-select--compact .lui-locale-select__trigger.lui-button {
  width: auto;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  gap: 6px;
  color: var(--color-content-secondary);
}

.lui-locale-select--compact .lui-locale-select__trigger.lui-button:hover,
.lui-locale-select--compact .lui-locale-select__trigger.lui-button[aria-expanded="true"] {
  color: var(--color-content);
}

.lui-locale-select--compact .lui-locale-select__value {
  flex: 0 0 auto;
  color: inherit;
}

.lui-locale-select--compact .lui-locale-select__trigger.copy-13,
.lui-locale-select--compact .lui-locale-select__value.copy-13 {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

.lui-locale-select--compact .lui-locale-select__menu,
.lui-locale-select__menu--compact {
  min-width: 12rem;
}

.lui-locale-select__menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
}

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

.lui-locale-select__menu[data-floating="true"] {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  margin: 0;
  /* Do not inherit min-width: 100% — that is 100% of the viewport when portaled. */
  min-width: 0;
}

.lui-locale-select__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-content);
}

.lui-locale-select__option:hover,
.lui-locale-select__option.is-selected {
  background: var(--color-secondary);
}

.lui-phone-input__code {
  white-space: nowrap;
}

.lui-phone-input__chevron {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--color-content-secondary);
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 16;
}

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

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

.lui-phone-input__trailing {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: 2px;
}

.lui-phone-input__field:has(.lui-phone-input__trailing) {
  padding-right: 4px;
}

.lui-phone-input__dropdown {
  min-width: 16rem;
  max-height: min(280px, calc(100dvh - 16px));
  overflow: hidden;
}

.lui-phone-input__dropdown[data-floating="true"] {
  overflow: hidden;
}

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

.lui-forms__composite.lui-phone-input__field.is-invalid {
  border-color: var(--color-negative);
}

/* Phone display — native/phone.md */
.lui-phone {
  display: inline;
}

a.lui-link .lui-phone {
  color: inherit;
}

/* Audio player — native/audio-player.md */
.lui-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}
.lui-audio-player.is-loading { opacity: 0.7; }
.lui-audio-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
}
.lui-audio-player__play:hover { background: var(--color-secondary); }
.lui-audio-player__play:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 10%, transparent);
}
.lui-audio-player__play .material-symbols-rounded {
  font-size: 14px;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 14;
  width: 1em;
  height: 1em;
  overflow: hidden;
  flex-shrink: 0;
}
.lui-audio-player__seek {
  flex: 1;
  min-width: 0;
  height: 4px;
  accent-color: var(--color-chrome-accent);
  cursor: pointer;
}
.lui-audio-player__time {
  flex-shrink: 0;
  color: var(--color-content-secondary);
}

/* Transcript — native/transcript.md */
.lui-transcript {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-transcript__log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  max-height: min(60vh, 28rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lui-transcript--live .lui-transcript__log {
  min-height: 8rem;
  max-height: min(40dvh, 20rem);
}

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

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

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

.lui-transcript__turn {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  max-width: none;
  min-width: 0;
  align-self: stretch;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
}

.lui-transcript__time {
  flex: 0 0 5ch;
  width: 5ch;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--color-content-secondary);
}

.lui-transcript__body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.lui-transcript__turn .lui-transcript__speaker {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-content);
}

.lui-transcript__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
  color: var(--color-content);
}

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

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

.lui-password__field,
.lui-forms__composite.lui-password__field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 10px;
  border-radius: 6px;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
}

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

.lui-password__input {
  flex: 1;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--color-content);
}

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

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

.lui-password__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}

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

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

.lui-password__toggle-icon { font-size: 20px; }

.lui-password__strength { display: flex; align-items: center; gap: 8px; }

.lui-password__strength-track {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-secondary);
  overflow: hidden;
}

.lui-password__strength-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--color-danger);
  transition: width 200ms ease, background 200ms ease;
}

.lui-password__strength-text {
  color: var(--color-content-secondary);
  min-width: 44px;
  text-align: right;
}

.lui-password--weak .lui-password__strength-bar { background: var(--color-danger); }
.lui-password--fair .lui-password__strength-bar { background: var(--color-warning); }
.lui-password--good .lui-password__strength-bar { background: var(--color-informative); }
.lui-password--strong .lui-password__strength-bar { background: var(--color-success); }
.lui-password--weak .lui-password__strength-text { color: var(--color-danger-fg); }
.lui-password--fair .lui-password__strength-text { color: var(--color-warning-fg); }
.lui-password--good .lui-password__strength-text { color: var(--color-informative-fg); }
.lui-password--strong .lui-password__strength-text { color: var(--color-success-fg); }

.lui-password__reqs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lui-password__req {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-content-secondary);
}

.lui-password__req-icon { font-size: 16px; color: var(--color-foreground); }
.lui-password__req--met { color: var(--color-content); }
.lui-password__req--met .lui-password__req-icon { color: var(--color-success); }

.lui-password__match { color: var(--color-content-secondary); }
.lui-password__match--success { color: var(--color-success-fg); }
.lui-password__match--error { color: var(--color-danger-fg); }

/* Login */
.login {
  display: flex;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-content);
}

.login__container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  position: relative;
}

.login__nav {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 2;
}
.login__toolbar {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}
.login__locale-form {
  margin: 0;
}
.login__locale .lui-locale-select__menu {
  left: auto;
  right: 0;
}
.login__toolbar .lui-theme-toggle {
  color: var(--color-content-secondary);
}
.login__toolbar .lui-theme-toggle:hover {
  color: var(--color-content);
}

.login__main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login__top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login__form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login__form-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.login__form-block--registration {
  gap: 8px;
}

.login__form-block--registration .lui-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login__form-block .lui-forms__control,
.login__form-block select.lui-forms__control,
.login__form-block .lui-password__input,
.login__form-block .lui-forms__composite .lui-forms__control,
.login__form-block .lui-forms__composite--lg .lui-forms__control {
  min-height: var(--lui-control-height-lg);
  font-size: 13px;
  line-height: 18px;
}

.login__form-block .lui-forms__composite,
.login__form-block .lui-forms__composite--lg,
.login__form-block .lui-password__field,
.login__form-block .lui-password__field.lui-forms__composite--lg {
  height: var(--lui-control-height-lg);
  min-height: var(--lui-control-height-lg);
}

/* Composite inners fill the lg login shell — no nested bordered box. */
.login__form-block .lui-forms__composite .lui-forms__control,
.login__form-block .lui-forms__composite--lg .lui-forms__control,
.login__form-block .lui-forms__composite .lui-password__input {
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

.login__form-block > .login__links {
  margin-top: -4px;
  text-align: right;
}

.login__form > .login__links {
  text-align: center;
  margin-top: 0;
}

.login__logo-section { display: flex; justify-content: center; }
.login__logo-section--flux,
.login__logo-section--scope {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.login__logo-section--flux {
  width: 100%;
}
.login__logo-section--scope {
  align-items: stretch;
  width: 100%;
}
.login__scope-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.login__logo-section--scope .login__scope-badge {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.login__scope-badge .material-symbols-rounded { font-size: 14px; }
.login__scope-icon { flex-shrink: 0; border-radius: 4px; }
.login__logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.login__title { display: flex; flex-direction: column; gap: 4px; text-align: center; width: 100%; }
.login__heading { margin: 0; }
.login__subtitle-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.login__subtitle-group .login__subtitle { margin: 0; }
.login__subtitle { color: var(--color-content-secondary); margin: 0; }
.login__links { text-align: center; color: var(--color-content-secondary); margin: 0; }
.login__links a { color: var(--color-content); font-weight: 500; text-decoration: none; }
.login__links a:hover { color: var(--color-content-secondary); }

.login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-content-secondary);
  font-size: 12px;
}

.login__divider::before,
.login__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-tertiary);
}

.login__sso-list { display: flex; flex-direction: column; gap: 8px; }

.login__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 12px;
}

.login__footer a { color: var(--color-content-secondary); text-decoration: none; }
.login__footer a:hover { color: var(--color-content); }

.image-section {
  position: relative;
  flex: 1;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
  margin: 8px;
  border-radius: 12px;
  overflow: hidden;
  background: #102026;
}

.image-section__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.9;
}

:root[data-theme="dark"] .image-section__img { filter: brightness(0.72); }

.login--admin {
  position: relative;
  overflow: hidden;
}

.login--admin .login__watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.login--admin .login__watermark-img {
  width: min(120vmin, 1100px);
  height: auto;
  /* Mark is full ink; login keeps the original ghost weight. */
  opacity: 0.03;
}

.lui-admin-watermark {
  position: absolute;
  top: 80%;
  left: 80%;
  right: auto;
  bottom: auto;
  z-index: 4;
  pointer-events: none;
  line-height: 0;
  transform: translate(-50%, -50%);
}

.lui-admin-watermark__img {
  width: 1260px;
  height: auto;
  opacity: 0.1;
  filter: blur(6px);
}

.login--admin .login__container {
  z-index: 1;
}

.lui-sidebar__footer--admin-context {
  padding-bottom: 0;
}

.lui-dropdown__menu--admin-context {
  min-width: 100%;
}

.lui-sidebar__bottom > .lui-sidebar__footer + .lui-sidebar__footer {
  padding-top: 0;
}

.lui-admin-portal-menu {
  width: 100%;
}

.lui-sidebar__chrome-bar.lui-admin-portal-menu {
  display: block;
  height: auto;
  min-height: 48px;
  padding: 4px 8px;
  box-sizing: border-box;
}

.lui-sidebar__chrome-bar.lui-admin-portal-menu[open] .lui-admin-portal-menu__panel {
  margin-top: 8px;
}

.lui-admin-portal-menu__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
}

.lui-admin-portal-menu__toggle:hover {
  background: var(--color-secondary);
}

.lui-admin-portal-menu__toggle::-webkit-details-marker { display: none; }

.lui-admin-portal-menu[open] .lui-admin-portal-menu__toggle {
  border-color: color-mix(in srgb, var(--color-informative) 35%, var(--color-tertiary));
}

.lui-admin-portal-menu__panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.lui-admin-portal-menu__form label {
  display: block;
  color: var(--color-content-secondary);
}

.lui-admin-portal-menu__link-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Checkbox Select All — loopos-ui-v2 (Rails Blocks checkbox_select_all) */
.lui-checkbox-select-all {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__search {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__search .lui-search__field,
.lui-checkbox-select-all__search .lui-forms__composite.lui-search__field {
  height: var(--lui-control-height-md);
  min-height: var(--lui-control-height-md);
}

.lui-checkbox-select-all__header {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__control,
.lui-checkbox-select-all__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  user-select: none;
}

/* Author `display: flex` beats Tailwind `.hidden` and the UA `[hidden]` rule. */
.lui-checkbox-select-all__row.hidden,
.lui-checkbox-select-all__row[hidden] {
  display: none;
}

.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__group-head) {
  align-items: flex-start;
}

.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__group-head) .lui-checkbox-select-all__check {
  margin-top: 0.125rem;
}

.lui-checkbox-select-all__list > .lui-checkbox-select-all__row,
.lui-checkbox-select-all__group > .lui-checkbox-select-all__row--parent,
.lui-checkbox-select-all__assignable-grid > .lui-checkbox-select-all__row {
  padding: 0.625rem 0.875rem;
}

.lui-checkbox-select-all__section {
  padding: 0.5rem 0.875rem 0.375rem;
  background: var(--color-secondary);
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__section-label {
  color: var(--color-content-secondary);
  text-transform: none;
}

.lui-checkbox-select-all__list > .lui-checkbox-select-all__section:first-child {
  border-top: none;
}

.lui-checkbox-select-all__list > .lui-checkbox-select-all__row + .lui-checkbox-select-all__row,
.lui-checkbox-select-all__list > .lui-checkbox-select-all__section + .lui-checkbox-select-all__row,
.lui-checkbox-select-all__list > .lui-checkbox-select-all__row + .lui-checkbox-select-all__section,
.lui-checkbox-select-all__group + .lui-checkbox-select-all__group,
.lui-checkbox-select-all__assignable-grid > .lui-checkbox-select-all__row + .lui-checkbox-select-all__row {
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__list--collapsible {
  padding: 0;
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}

@media (min-width: 768px) {
  .lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lui-checkbox-select-all--single-column.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lui-checkbox-select-all__origin-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 12px 2px 0;
  color: var(--color-content);
}

.lui-checkbox-select-all__origin-heading:first-child {
  padding-top: 4px;
}

.lui-checkbox-select-all__origin-heading.hidden,
.lui-checkbox-select-all__origin-heading[hidden] {
  display: none;
}

.lui-checkbox-select-all__section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lui-checkbox-select-all__section-title .lui-flux-app-mark,
.lui-checkbox-select-all__section-title .lui-flux-app-mark-trigger {
  flex-shrink: 0;
}

.lui-checkbox-select-all__section-title-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.lui-checkbox-select-all__section-name {
  min-width: 0;
}

.lui-checkbox-select-all__section-key {
  flex-shrink: 0;
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__section-group {
  min-width: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md, 6px);
  background: var(--color-background);
  overflow: hidden;
}

.lui-checkbox-select-all--collapsible-sections .lui-accordion__item {
  border-bottom: none;
}

.lui-checkbox-select-all__section-group + .lui-checkbox-select-all__section-group {
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__section-group + .lui-checkbox-select-all__section-group {
  border-top-width: 1px;
}

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

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

.lui-checkbox-select-all__section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 10px;
}

.lui-accordion__item[data-state="open"] .lui-checkbox-select-all__section-pills {
  display: none;
}

.lui-checkbox-select-all__scope-pill {
  display: inline-flex;
  min-width: 0;
}

.lui-checkbox-select-all__scope-pill.hidden,
.lui-checkbox-select-all__scope-pill[hidden] {
  display: none;
}

.lui-checkbox-select-all__inherited {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__inherited-chips {
  margin-top: 0.375rem;
}

.lui-checkbox-select-all__label-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.lui-checkbox-select-all__label {
  color: var(--color-content);
}

.lui-checkbox-select-all__desc {
  color: var(--color-content-secondary);
}

.lui-checkbox-select-all__group-head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.lui-checkbox-select-all__check {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

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

.lui-checkbox-select-all__input:disabled {
  cursor: not-allowed;
}

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

.lui-checkbox-select-all__mark {
  font-size: 16px;
  font-variation-settings: "wght" 600;
  color: var(--color-app-fg);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 100ms ease, transform 100ms ease;
}

.lui-checkbox-select-all__dash {
  display: none;
}

.lui-checkbox-select-all__input:not(:disabled):hover ~ .lui-checkbox-select-all__box {
  border-color: var(--color-content-secondary);
  background: var(--color-secondary);
}

/* Hover on an already checked box must stay painted — the plain hover rule above
   outranks the checked rule below (one more pseudo-class), so without this the
   box turned near-white in light mode and the white check vanished. Mirrors
   `.lui-checkbox`. */
.lui-checkbox-select-all__input:checked:not(:disabled):hover ~ .lui-checkbox-select-all__box,
.lui-checkbox-select-all__input:indeterminate:not(:disabled):hover ~ .lui-checkbox-select-all__box {
  background: var(--color-app);
  border-color: var(--color-app);
  filter: brightness(1.08);
}

.lui-checkbox-select-all__input:checked ~ .lui-checkbox-select-all__box,
.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box {
  background: var(--color-app);
  border-color: var(--color-app);
}

.lui-checkbox-select-all__input:checked ~ .lui-checkbox-select-all__box .lui-checkbox-select-all__mark {
  opacity: 1;
  transform: scale(1);
}

.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box .lui-checkbox-select-all__mark {
  opacity: 0;
}

/* Absolute so the dash keeps its 9px — as a flex item next to the (invisible but
   still 16px wide) check glyph it would shrink to zero and the box read as a solid
   block, which is what light mode made obvious. */
.lui-checkbox-select-all__input:indeterminate ~ .lui-checkbox-select-all__box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-app-fg);
}

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

.lui-checkbox-select-all__input:disabled ~ .lui-checkbox-select-all__box {
  background: var(--color-secondary);
  border-color: var(--color-tertiary);
  opacity: 0.6;
}

.lui-checkbox-select-all__input[data-anchor="true"] ~ .lui-checkbox-select-all__box {
  outline: 2px dashed var(--color-app);
  outline-offset: 2px;
}

.lui-checkbox-select-all__row:hover {
  background: var(--color-secondary);
}

.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:checked),
.lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:indeterminate) {
  background: color-mix(in srgb, var(--color-app) 8%, var(--color-background));
}

.lui-checkbox-select-all__row--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lui-checkbox-select-all__row--inherited {
  cursor: default;
}

.lui-checkbox-select-all__row--inherited .lui-checkbox-select-all__desc {
  color: var(--color-informative-fg);
}

.lui-checkbox-select-all__children {
  padding-left: 1.75rem;
}

.lui-checkbox-select-all__children > .lui-checkbox-select-all__row {
  padding: 0.5rem 0.875rem;
}

.lui-checkbox-select-all__action-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-background);
  border-top: 1px solid var(--color-tertiary);
}

.lui-checkbox-select-all__action-bar[hidden] {
  display: none;
}

.lui-checkbox-select-all__count {
  color: var(--color-content);
}

.lui-checkbox-select-all__count-label,
.lui-checkbox-select-all__page-info {
  color: var(--color-content-secondary);
}

.lui-checkbox-select-all__total {
  margin-left: auto;
  color: var(--color-content);
}

.lui-checkbox-select-all__link,
.lui-checkbox-select-all__clear {
  background: transparent;
  border: none;
  padding: 0.125rem 0.25rem;
  border-radius: 4px;
  cursor: pointer;
}

.lui-checkbox-select-all__link {
  color: var(--color-app);
}

.lui-checkbox-select-all__clear {
  color: var(--color-content-secondary);
}

.lui-checkbox-select-all__link:hover {
  color: color-mix(in srgb, var(--color-app) 85%, var(--color-content));
}

.lui-checkbox-select-all__clear:hover {
  color: var(--color-content);
}

.lui-checkbox-select-all__link[hidden],
.lui-checkbox-select-all__page-info[hidden] {
  display: none;
}

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

/* Embedded — borderless checkbox list inside cards / grid cells */
.lui-checkbox-select-all--embedded {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__search {
  padding: 0 0 8px;
  border-bottom: none;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__search .lui-search__field,
.lui-checkbox-select-all--embedded .lui-checkbox-select-all__search .lui-forms__composite.lui-search__field {
  min-height: 32px;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__list {
  max-height: 168px;
  overflow-y: auto;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__list > .lui-checkbox-select-all__row {
  padding: 4px 0;
  border-top: none;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__list > .lui-checkbox-select-all__row + .lui-checkbox-select-all__row {
  border-top: none;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__row:hover {
  background: transparent;
}

.lui-checkbox-select-all--readonly {
  background: var(--color-secondary);
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-tertiary));
}

.lui-checkbox-select-all--readonly .lui-checkbox-select-all__row--inherited {
  box-shadow: inset 2px 0 0 var(--color-warning);
}

.lui-checkbox-select-all--readonly .lui-checkbox-select-all__row:hover {
  background: transparent;
}

.lui-checkbox-select-all--embedded .lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:checked),
.lui-checkbox-select-all--embedded .lui-checkbox-select-all__row:has(.lui-checkbox-select-all__input:indeterminate) {
  background: transparent;
}

/* SSO provider cards */
.lui-sso-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lui-sso-card + .lui-sso-card { margin-top: 16px; }

/* Mailer */
.mailer-body {
  font-family: var(--font-sans);
  background: var(--color-secondary);
  padding: 24px;
}

.mailer-card {
  max-width: 560px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 6px;
  padding: 24px;
}

/* Responsive */
@media (min-width: 992px) {
  .image-section { display: flex; }
}

@media (min-width: 1280px) {
  .lui-dashboard-cols {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
  }
}

@media (max-width: 991px) {
  .lui-sidebar__rail--desktop { display: none; }
  .lui-sidebar-trigger { display: inline-flex; }
  .lui-dashboard-cols { grid-template-columns: 1fr; }
  .lui-dashboard-breakdown-grid { grid-template-columns: 1fr; }
  .lui-forms__group--inline .lui-forms__label { width: 100%; min-width: 0; }
  .lui-table__actions { opacity: 1; }
  .lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row .lui-table__actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .lui-table--row-actions-hover.lui-table--hoverable .lui-table__body .lui-table__row:hover .lui-table__actions:not(:empty) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .login__container { padding: 24px 16px; }
  .login__nav { top: 24px; left: 16px; }
  .login__toolbar { top: 24px; right: 16px; }
}

@media (max-width: 640px) {
  .lui-table__head th,
  .lui-table__body td,
  .lui-table__body th[scope="row"],
  .lui-table__body-group td,
  .lui-table__body-group th[scope="row"] {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 16px;
  }
  .lui-action-bar { flex-wrap: wrap; height: auto; min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
  .lui-action-bar--flux-app { height: auto; min-height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .lui-sidebar__rail,
  .lui-sidebar__panel,
  .lui-sidebar__collapse-icon,
  .lui-sidebar__section-chevron {
    transition: none;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dev notes (development only) */
.dev-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.dev-note__label {
  color: var(--color-content-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dev-note__body code {
  font-family: var(--font-mono);
}

/* Page briefs (development only) */
.dev-tools-launcher {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 32px);
}

.dev-tools-launcher__cluster {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.dev-tools-launcher__toggle {
  flex-shrink: 0;
}

.dev-tools-launcher--collapsed .dev-tools-launcher__cluster .dev-tools-launcher__button,
.dev-tools-launcher--collapsed .dev-tools-launcher__role {
  display: none;
}

.dev-tools-launcher__button.lui-button--neutral--tertiary,
.dev-tools-launcher__button.lui-button--outline {
  background: var(--color-background);
  box-shadow: 0 1px 4px rgba(33, 37, 41, 0.10);
}

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

.dev-tools-launcher__button--active.lui-button--outline {
  border-color: var(--color-chrome-accent);
  color: var(--color-chrome-accent);
}

.dev-tools-launcher__role .lui-dropdown__menu {
  min-width: 12rem;
  max-width: min(20rem, calc(100vw - 2rem));
}

.page-brief-launcher {
  display: contents;
}

/* Transparent dialog shell — panel carries surface (matches lui-modal centering). */
.page-brief-dialog {
  box-sizing: border-box;
  width: calc(100vw - 2rem);
  max-width: 1120px;
  /* Stable height — do not grow/shrink with tab content. */
  height: min(720px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  color: var(--color-content);
}

.page-brief-dialog:modal {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  height: min(720px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
}

.page-brief-dialog::backdrop {
  background: color-mix(in srgb, var(--color-content) 40%, transparent);
}

.page-brief-dialog__panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
  background: var(--color-background);
  box-shadow: var(--lui-shadow-floating);
}

.page-brief-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  padding: 16px 16px 12px;
}

.page-brief-dialog__header-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.page-brief-dialog__header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.page-brief-dialog__page-key {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-content);
  font-family: var(--font-mono, ui-monospace, monospace);
  word-break: break-all;
}

.page-brief-dialog__meta-separator {
  color: var(--color-content-secondary);
}

.page-brief-dialog__entities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-brief-dialog__entity {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-chrome-accent) 12%, var(--color-background));
  color: var(--color-content);
  white-space: nowrap;
}

.page-brief-dialog__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* No border-top — underline tabs already paint the single divider under the tab row. */
}

.page-brief-dialog__notes-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  min-width: 240px;
  max-width: 320px;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-left: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.page-brief-dialog__notes-body {
  flex: 1 1 auto;
  min-height: 0;
}

.page-brief-dialog__notes-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  box-sizing: border-box;
}

.page-brief-dialog__notes-intro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.page-brief-dialog__notes-intro :is(h3, p) {
  margin: 0;
}

.page-brief-dialog__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* One active underline on the panels hairline — hide list ::after so it does not
   stack as a second parallel rule under the tab labels. */
.page-brief-dialog__tabs {
  flex-shrink: 0;
  padding: 0 16px;
  border-bottom: none;
}

.page-brief-dialog__tabs .lui-tabs__list {
  width: 100%;
}

.page-brief-dialog__tabs.lui-tabs--underline .lui-tabs__nav::after,
.page-brief-skills__subtabs.lui-tabs--underline .lui-tabs__nav::after {
  content: none;
  display: none;
}

.page-brief-dialog__tabs.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.page-brief-dialog__tabs.lui-tabs--underline .lui-tabs__tab--active::after,
.page-brief-skills__subtabs.lui-tabs--underline .lui-tabs__tab[aria-selected="true"]::after,
.page-brief-skills__subtabs.lui-tabs--underline .lui-tabs__tab--active::after {
  height: 2px;
  bottom: -1px;
}

.page-brief-dialog__panels {
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--color-tertiary);
}

.page-brief-dialog__panels-scroll {
  padding: 16px;
  box-sizing: border-box;
}

/* Split ADR / Skills / API panes fill the panel viewport and scroll internally. */
.page-brief-dialog__panel-content:not([hidden]):has(> .page-brief-adrs),
.page-brief-dialog__panel-content:not([hidden]):has(> .page-brief-skills) {
  height: 100%;
  min-height: 0;
}

.page-brief-dialog__panel-content[hidden] {
  display: none !important;
}

.page-brief-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-content);
}

.page-brief-panel__header,
.page-brief-panel__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-brief-panel__meta {
  display: grid;
  gap: 12px;
}

.page-brief-panel__meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-panel__meta code,
.page-brief-panel code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-content);
  background: var(--color-secondary);
  border: 1px solid var(--color-tertiary);
  border-radius: 4px;
  padding: 2px 6px;
}

.page-brief-panel__list,
.page-brief-panel__requirements {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--color-content);
}

.page-brief-panel__code {
  overflow-x: auto;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.page-brief-panel__code code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-content);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.page-brief-panel__markdown {
  color: var(--color-content);
}

.page-brief-panel__markdown h1,
.page-brief-panel__markdown h2,
.page-brief-panel__markdown h3,
.page-brief-panel__markdown h4 {
  color: var(--color-content);
  font-family: var(--font-heading);
  margin: 12px 0 8px;
}

.page-brief-panel__markdown h1 {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}

.page-brief-panel__markdown h2 {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.page-brief-panel__markdown h3 {
  font-size: 13px;
  font-weight: 500;
  line-height: 19px;
}

.page-brief-panel__markdown h4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-content-secondary);
}

.page-brief-panel__markdown p,
.page-brief-panel__markdown ul,
.page-brief-panel__markdown ol {
  margin: 0 0 8px;
  color: var(--color-content);
  font-size: 13px;
  line-height: 19px;
}

.page-brief-panel__markdown a,
.page-brief-panel__doc-link {
  color: var(--color-informative);
  text-decoration: none;
}

.page-brief-panel__doc-link:hover,
.page-brief-panel__markdown a:hover {
  text-decoration: underline;
}

.page-brief-requirement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  list-style: none;
  margin-left: -18px;
}

.page-brief-requirement__status {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-tertiary);
  flex-shrink: 0;
}

.page-brief-requirement--done .page-brief-requirement__status {
  background: var(--color-success);
}

.page-brief-requirement--partial .page-brief-requirement__status {
  background: var(--color-warning);
}

.page-brief-requirement--missing .page-brief-requirement__status {
  background: var(--color-danger);
}

.page-brief-requirement__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-brief-manuals {
  gap: 16px;
}

.page-brief-manual {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-tertiary);
}

.page-brief-manual:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-brief-manual__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-manual__body img {
  max-width: 100%;
  height: auto;
  margin: 12px 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.page-brief-adrs {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  height: 100%;
}

.page-brief-adrs__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--color-tertiary);
  padding-right: 12px;
}

.page-brief-adrs__list-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
}

.page-brief-adrs__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-adrs__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  text-align: left;
  cursor: pointer;
}

.page-brief-adrs__item:hover {
  background: var(--color-background);
  border-color: var(--color-tertiary);
}

.page-brief-adrs__item--active {
  background: var(--color-background);
  border-color: var(--color-chrome-accent);
}

.page-brief-adrs__item-number {
  font-variant-numeric: tabular-nums;
}

.page-brief-adrs__item-title {
  line-height: 1.35;
}

.page-brief-adrs__item-badge {
  color: var(--color-content-secondary);
  text-transform: capitalize;
}

.page-brief-adrs__viewer {
  min-height: 0;
  overflow: auto;
}

.page-brief-adrs__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-brief-adrs__panel[hidden] {
  display: none !important;
}

.page-brief-adrs__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-brief-adrs__body {
  padding-bottom: 8px;
}

.page-brief-skills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  height: 100%;
}

.page-brief-skills__subtabs {
  flex-shrink: 0;
  border-bottom: none;
}

.page-brief-skills__subtabs .lui-tabs__list {
  width: 100%;
}

.page-brief-skills__panel {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-top: 1px solid var(--color-tertiary);
}

.page-brief-skills__panel[hidden] {
  display: none !important;
}

.page-brief-skills__panel .page-brief-adrs {
  height: 100%;
}

.page-brief-api__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.page-brief-api__path {
  word-break: break-all;
}

.page-brief-api__method {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.page-brief-api__method--get {
  background: color-mix(in srgb, var(--color-success) 16%, transparent);
  color: var(--color-success-fg);
}

.page-brief-api__method--post {
  background: color-mix(in srgb, var(--color-informative) 16%, transparent);
  color: var(--color-informative-fg);
}

.page-brief-api__method--put,
.page-brief-api__method--patch {
  background: color-mix(in srgb, var(--color-warning) 16%, transparent);
  color: var(--color-warning-fg);
}

.page-brief-api__method--delete {
  background: color-mix(in srgb, var(--color-danger) 16%, transparent);
  color: var(--color-danger-fg);
}

.page-brief-api__method--other {
  background: var(--color-tertiary);
  color: var(--color-content-secondary);
}

.page-brief-api__description {
  margin: 0;
}

.page-brief-api__scalar-host {
  min-height: 280px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-background);
}

.page-brief-api__scalar-host--ready {
  min-height: 360px;
}

.page-brief-api__loading {
  margin: 16px;
}

.page-brief-api__scalar-host .scalar-app {
  max-height: min(70vh, 720px);
  overflow: auto;
}

@media (max-width: 768px) {
  .page-brief-dialog:modal {
    height: calc(100dvh - 2rem);
  }

  .page-brief-dialog__body {
    flex-direction: column;
  }

  .page-brief-dialog__notes-sidebar {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    max-height: 40vh;
    border-left: 0;
    border-top: 1px solid var(--color-tertiary);
  }

  .page-brief-adrs {
    grid-template-columns: 1fr;
  }

  .page-brief-adrs__list {
    border-right: 0;
    border-bottom: 1px solid var(--color-tertiary);
    padding-right: 0;
    padding-bottom: 12px;
    max-height: 180px;
  }
}

.page-brief-dialog__notes-sidebar .page-brief-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-brief-dialog__notes-sidebar .page-brief-notes :is(h3, p, label, form) {
  margin: 0;
}

.page-brief-dialog__notes-sidebar .page-brief-notes__textarea {
  min-height: 3.25rem;
}

.page-brief-notes__composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-brief-notes__history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-brief-notes__textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: 8px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  resize: vertical;
}

.page-brief-notes__textarea:focus-visible {
  outline: 2px solid var(--color-chrome-accent);
  outline-offset: 1px;
}

.page-brief-notes__actions {
  display: flex;
  justify-content: flex-end;
}

.page-brief-notes__flash {
  margin: 0;
  color: var(--color-success-fg);
}

.page-brief-notes__error {
  margin: 0;
  color: var(--color-danger-fg);
}

.page-brief-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-brief-note {
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
}

.page-brief-note__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.page-brief-note__text {
  margin: 0;
  white-space: pre-wrap;
}

.page-brief-panel__markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 12px;
}

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

/* Page ER modal (development only) */
.page-er-launcher {
  display: contents;
}

.page-er-dialog {
  width: min(1040px, calc(100vw - 32px));
}

.page-er-dialog__panels {
  padding: 0;
}

.page-er-panel {
  gap: 24px;
}

.page-er-panel__diagram {
  gap: 0;
}

.page-er-diagram {
  width: 100%;
  overflow-x: auto;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  text-align: center;
}

.page-er-diagram pre.mermaid {
  margin: 0;
  background: transparent;
  border: 0;
  white-space: pre;
}

.page-er-diagram pre.mermaid:not([data-processed]) {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-secondary-content, var(--color-content));
  text-align: left;
  white-space: pre-wrap;
}

.page-er-diagram svg {
  max-width: 100%;
  height: auto;
}

.page-er-diagram--zoomable {
  cursor: zoom-in;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-er-diagram--zoomable:hover,
.page-er-diagram--zoomable:focus-visible {
  border-color: var(--color-chrome-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-chrome-accent) 25%, transparent);
  outline: none;
}

.page-er-diagram--zoomable::after {
  content: "Clique para ampliar · scroll para zoom";
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-secondary-content, var(--color-content));
}

.page-er-zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--color-content) 55%, transparent);
}

.page-er-zoom-overlay[hidden] {
  display: none !important;
}

.page-er-zoom-overlay__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 16px;
  background: var(--color-primary);
  border-bottom: 1px solid var(--color-tertiary);
}

.page-er-zoom-overlay__hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-secondary-content, var(--color-content));
}

.page-er-zoom-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-content);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
}

.page-er-zoom-overlay__close:hover {
  background: var(--color-secondary);
}

.page-er-zoom-overlay__viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}

.page-er-zoom-overlay__content {
  width: max-content;
  min-width: min(100%, 960px);
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--color-tertiary);
  border-radius: 12px;
  background: var(--color-background);
  transform-origin: center top;
}

.page-er-zoom-overlay__content svg {
  display: block;
  max-width: none;
  height: auto;
}

body.page-er-zoom-open,
.page-brief-dialog__panel.page-er-zoom-open {
  overflow: hidden;
}

.page-er-diagram--error::before {
  content: "Diagram failed to render — showing source.";
  display: block;
  margin-bottom: 8px;
  color: var(--color-danger);
  font-family: var(--font-sans);
  font-size: 12px;
}

.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,
.lui-catalog-overview-table__product-row > .lui-table__cell--actions {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__product-row .lui-table__actions {
  background: linear-gradient(to left, var(--color-secondary) 72%, transparent);
}

.lui-catalog-overview-table__product-row--navigable {
  cursor: pointer;
}

/* Beat generic datatable hover on the sticky actions gutter
   (`.lui-datatable__row:hover > .lui-table__cell--actions` is 0,5,0). */
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover > td,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within > td,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover > .lui-table__cell--actions,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within > .lui-table__cell--actions {
  background: var(--color-tertiary);
}

.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:hover .lui-table__actions,
.lui-datatable--hoverable .lui-datatable__body .lui-datatable__row.lui-catalog-overview-table__product-row--navigable:focus-within .lui-table__actions {
  background: linear-gradient(to left, var(--color-tertiary) 72%, transparent);
}

.lui-catalog-overview-table__products-branch--expanded > td,
.lui-datatable--hoverable .lui-datatable__body .lui-catalog-overview-table__products-branch:hover > td {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__product-row--empty .lui-datatable__cell {
  background: var(--color-secondary);
}

.lui-catalog-overview-table__product-row--skeleton {
  pointer-events: none;
}

.lui-catalog-overview-table__skeleton-label {
  width: 42%;
  height: 12px;
  flex: 0 1 42%;
}

.lui-catalog-overview-table__skeleton-meta {
  width: 48%;
  max-width: 8rem;
  height: 12px;
}

.lui-tree__node[hidden],
.lui-tree__row--link[hidden],
a.lui-tree__row[hidden] {
  display: none !important;
}

.dev-docs__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.dev-docs__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
  height: 48px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-primary);
}

.dev-docs__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dev-docs__breadcrumb-link {
  color: var(--color-chrome-accent);
  text-decoration: none;
}

.dev-docs__article {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 24px;
}

.dev-docs__article-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.dev-docs__content img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--color-tertiary);
}

@media (max-width: 960px) {
  .dev-docs {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .dev-docs__sidebar {
    max-height: 40vh;
  }
}

/* Script editor — CodeMirror 6 */
.lui-script-editor__surface .cm-editor {
  width: 100%;
  min-height: var(--lui-script-editor-min-height, 190px);
  border: none;
  border-radius: 6px;
  outline: none;
}

.lui-script-editor__surface .cm-scroller {
  font: 12px / 1.5 var(--font-mono, ui-monospace, monospace);
}

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

/* Record Metadata tab */
.lui-tab-metadata .lui-metadata-add[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);
}

.lui-tab-metadata .lui-metadata-facts + .lui-metadata-facts {
  margin-top: 16px;
}

.lui-tab-metadata .lui-metadata-facts__label {
  margin-bottom: 8px;
}

.lui-tab-metadata .lui-metadata-facts__list {
  gap: 0;
}

.lui-tab-metadata .lui-metadata-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem) 28px;
  column-gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--color-tertiary);
  min-width: 0;
}

.lui-tab-metadata .lui-metadata-facts__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.lui-tab-metadata .lui-metadata-facts__row:last-child {
  padding-bottom: 0;
}

.lui-tab-metadata .lui-metadata-facts__row dt {
  color: var(--color-content-secondary);
  min-width: 0;
}

.lui-tab-metadata .lui-metadata-facts__value {
  margin: 0;
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.lui-tab-metadata .lui-metadata-facts__value .lui-forms__control {
  width: 100%;
  max-width: none;
}

.lui-tab-metadata .lui-metadata-facts__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 28px;
  height: 28px;
  opacity: 0;
  transition: opacity var(--default-transition-duration, 120ms) var(--default-transition-timing-function, ease);
}

.lui-tab-metadata .lui-metadata-facts__row:hover .lui-metadata-facts__actions,
.lui-tab-metadata .lui-metadata-facts__row:focus-within .lui-metadata-facts__actions {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .lui-tab-metadata .lui-metadata-facts__actions {
    opacity: 1;
  }
}

/*
 * 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-workspace,
.message-template-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}

/* The parameters card is a rail beside the document: inserting a key never
 * takes the operator away from the canvas. It folds under the document before
 * the document is allowed to shrink — an email canvas is a fixed 640px and
 * 1279px minus the app sidebar leaves it no room next to a rail. */
@media (min-width: 1280px) {
  .message-template-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }
}

.email-template-workspace__main,
.message-template-workspace .email-template-workspace__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.email-template-params {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.email-template-params__card {
  flex: 1 1 auto;
}

.email-template-params__card > .lui-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
}

.email-template-params__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.email-template-params__heading .lui-tooltip__trigger--icon {
  color: var(--color-content-secondary);
  flex-shrink: 0;
}

.email-template-params__header-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.email-template-params__count {
  flex-shrink: 0;
}

.email-template-params__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-tertiary);
}

.email-template-params__toolbar .lui-button {
  flex-shrink: 0;
}

.email-template-params__empty {
  padding: 12px 14px;
}

.email-template-params-editor-wrap {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

/* One row per parameter: read line and edit panel share the same <li>. */
.email-template-params-editor {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-template-params-editor__row {
  min-width: 0;
  border-bottom: 1px solid var(--color-tertiary);
}

.email-template-params-editor__row:last-child {
  border-bottom: 0;
}

.email-template-params-editor__row:not(.email-template-params-editor__row--editing):hover {
  background: var(--color-secondary);
}

.email-template-params-editor__read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
}

.email-template-params-editor__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.email-template-params-editor__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* Name and key are wrapped in hover tooltips that say what each one is. The
   bare trigger is a span, so it must not behave like a button or block the
   truncation the row depends on. */
.email-template-params-editor__title > .lui-tooltip__trigger,
.email-template-params-editor__field-label > .lui-tooltip__trigger {
  min-width: 0;
  cursor: help;
  font: inherit;
}

.email-template-params-editor__name-group {
  display: inline-flex;
  min-width: 0;
}

.email-template-params-editor__name-group .lui-badge {
  max-width: 100%;
}

/* The pill is the name the operator recognises; the key stays quiet in a code chip
   behind it, one size down. */
.email-template-params-editor__key-code {
  min-width: 0;
  color: var(--color-content-secondary);
}

/* Aligned with the pill's text, not its border: 6px of badge padding plus 1px
   of border (.lui-badge--sm). */
.email-template-params-editor__description-display {
  min-width: 0;
  padding-inline-start: 7px;
}

.email-template-params-editor__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Insert is the one action that writes into the document — informative tint. */
.email-template-params-editor__insert.lui-button {
  color: var(--color-informative-fg);
  border-color: color-mix(in srgb, var(--color-informative) 35%, var(--color-tertiary));
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength), var(--color-background));
}

.email-template-params-editor__insert.lui-button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-informative) var(--color-tint-bg-strength-strong), var(--color-background));
}

.email-template-params-editor__edit {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px 14px;
}

.email-template-params-editor__row--editing {
  background: var(--color-secondary);
}

.email-template-params-editor__row--editing > .email-template-params-editor__read {
  display: none;
}

.email-template-params-editor__row--editing > .email-template-params-editor__edit {
  display: flex;
}

.email-template-params-editor__edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.email-template-params-editor__edit-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.email-template-params-editor__edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.email-template-params-editor__field {
  /* The field owns its column width — the 420px control cap would leave the
     grid column half empty. */
  --lui-forms-control-max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.email-template-params-editor__field--wide {
  grid-column: 1 / -1;
}

.email-template-params-editor__field-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.email-template-params-editor__field-help {
  color: var(--color-content-secondary);
}

.email-template-params-editor__field .lui-forms__control {
  width: 100%;
  min-width: 0;
}

.email-template-params-editor__preview {
  align-self: flex-start;
  max-width: 100%;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--color-content-secondary);
  background: var(--color-background);
  overflow-wrap: anywhere;
}

.email-template-params-editor__error {
  margin: 0;
  color: var(--color-content-destructive);
}

.email-template-params-editor--readonly .email-template-params-editor__row:hover {
  background: var(--color-secondary);
}

/* In the rail the row has no room for identity and actions on one line: the
 * actions drop under the name, and the edit panel becomes one field per row. */
@container (max-width: 40rem) {
  .email-template-params__toolbar {
    flex-wrap: wrap;
  }

  .email-template-params-editor__read {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .email-template-params-editor__actions {
    flex-wrap: wrap;
  }

  .email-template-params-editor__edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.email-template-workspace .cke {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* --- Message template editor (D11 / B4.2) --------------------------------
 *
 * One page shape for both channels: the email's MJML canvas and the SMS text
 * box sit in the same grid, beside the same rail. The modifiers differ only in
 * how much room the document needs — an email is a fixed 640px document with
 * GrapesJS's own panels inside its column, an SMS is a text box that is happy
 * at any width. */

.message-editor-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 16px 24px 24px;
  box-sizing: border-box;
}

.message-editor-page__workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.message-editor-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 480px;
  height: calc(100dvh - 16rem);
}

.message-editor-inline .message-editor-page__workspace,
.message-editor-inline .message-editor {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.message-editor {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}

.message-editor__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.message-editor__workspace:has(.message-editor__rail) {
  grid-template-columns: minmax(0, 1fr) 320px;
}

/* The rail folds under the document before the document is allowed to shrink.
 * B.3's editor was unusable at 1024 until its reviewers caught it: the rail is
 * 320px, and 1024 minus a 248px sidebar minus padding leaves the canvas less
 * than the 640px an email is. */
@media (max-width: 1279px) {
  .message-editor__workspace:has(.message-editor__rail) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.message-editor__document {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.message-editor__rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
}

.message-editor__rail-section {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  padding: 12px;
}

.message-editor__params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.message-editor__param {
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
}

.message-editor__status {
  color: var(--color-content-secondary);
  min-height: 18px;
  margin: 0;
}

/* --- SMS editor ---------------------------------------------------------- */

.sms-editor .message-editor__document {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.sms-editor__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.sms-editor__block {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  overflow: hidden;
}

.sms-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.sms-editor__format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--color-content);
  cursor: pointer;
  box-sizing: border-box;
}

.sms-editor__format:hover {
  background: var(--color-secondary);
}

.sms-editor__format:focus-visible {
  outline: 2px solid var(--color-informative);
  outline-offset: 1px;
}

.sms-editor__canvas {
  flex: 1;
  min-height: 220px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  outline: none;
}

.sms-editor__canvas:focus {
  box-shadow: inset 0 0 0 1px var(--color-informative);
}

.sms-editor .liquid-token {
  background: color-mix(in srgb, var(--color-informative) 12%, var(--color-primary));
  border: 1px solid var(--color-informative);
  border-radius: 4px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.sms-editor__meter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* A message bubble, because that is what the operator is deciding about: not
 * "is this string right" but "does this read well on a phone". */
.sms-editor__preview {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  padding: 10px;
}

.sms-editor__bubble {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--color-primary);
  border: 1px solid var(--color-tertiary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 20px;
}

.sms-editor__counter {
  font-variant-numeric: tabular-nums;
}

.sms-editor__warning {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-warning-fg);
  margin: 4px 0 0;
}

/* --- Message template page (4b) ------------------------------------------
 *
 * The show page of an email or SMS template: the description under the page
 * header, then the document beside the parameters card. The document is not
 * a card.
 *
 * Page-local composition, not `lui-*` components (loopos-ui-v2 "open content
 * slot"): two screens use it, both of them this one page in two channels. Every
 * value is a token, so light and dark come for free and there is nothing to
 * promote until a third screen wants the same shape. */

.message-template-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Description under the page header — the field, not a card. */
.message-template-description {
  min-width: 0;
  margin: 12px 0 0;
}

/* The shared textarea floor is three rows. Here the description is one line
 * until the text needs more, so the 16px under it is the space before the tabs. */
.message-template-description .lui-inline-edit__field textarea.lui-inline-edit__input--display,
.message-template-description .lui-inline-edit__field textarea.lui-inline-edit__input--edit {
  min-height: 0;
  height: auto;
  field-sizing: content;
}

/* The Info card, dense. It held six fields one per line; what is left is the
 * type and — only for an external template — the provider references, so it is a
 * row that wraps rather than a column. */

.message-template-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 16px;
  align-items: start;
  min-width: 0;
}

.message-template-info__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.message-template-info__field--wide {
  grid-column: 1 / -1;
}

.message-template-document {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.message-template-document__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Language badges for translations that exist. Add and delete sit on this row. */
.message-template-document__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
}

.message-template-document__locale-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.message-template-subject {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-template-subject .sms-editor__block,
.message-template-subject__block {
  flex: none;
}

.message-template-subject .sms-editor__canvas,
.message-template-subject__canvas {
  flex: none;
  min-height: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.message-template-subject__canvas:empty::before {
  content: attr(data-placeholder);
  color: var(--color-content-secondary);
}

.message-template-locales {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.message-template-locale-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.message-template-locale-item:has(.message-template-locale__remove) .lui-filter-pill__label {
  padding-right: 18px;
}

.message-template-locale__remove {
  position: absolute;
  top: 50%;
  right: 4px;
  z-index: 1;
  display: inline-flex;
  margin: 0;
  transform: translateY(-50%);
}

.message-template-locale__remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-content-secondary);
  cursor: pointer;
}

.message-template-locale__remove-button:hover,
.message-template-locale__remove-button:focus-visible {
  background: color-mix(in srgb, var(--color-danger) 14%, transparent);
  color: var(--color-danger);
  outline: none;
}

.message-template-locale__remove-button .material-symbols-rounded {
  font-size: 12px;
  line-height: 1;
  width: 12px;
  height: 12px;
}

.message-template-locale-add {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

.message-template-locale-add__trigger {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  justify-content: center;
  color: var(--color-content-secondary);
}

.message-template-locale-add__trigger .material-symbols-rounded {
  font-size: 16px;
  line-height: 1;
  width: 16px;
  height: 16px;
}

.message-template-locale-add .lui-dropdown__list form {
  display: block;
}

.message-template-locale-add .lui-dropdown__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* The two states of a language pill.
 *
 * Three cues, never colour alone (loopos-ui-v2 §2): the icon's shape (a tick vs
 * a plus), the border (solid vs dashed), and a word in the accessible name. The
 * colour is the fourth, and both tokens rebind in dark. */
.message-template-locale {
  gap: 4px;
  padding-left: 8px;
}

.message-template-locale__state {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* `material_icon` sets font-size inline (Propshaft has no say in the
 * variable-font axes), so only the line box is ours. */
.message-template-locale__state .material-symbols-rounded {
  line-height: 1;
}

.message-template-locale--written .message-template-locale__state {
  color: var(--color-success-fg);
}

.message-template-locale--empty {
  border-style: dashed;
}

.message-template-locale--empty .message-template-locale__state,
.message-template-locale--empty .lui-filter-pill__label {
  color: var(--color-content-secondary);
}

/* Preview of a compiled document (readers, or the editor rail) reuses the
 * editor's grid so the workspace does not jump. What it does not need is the
 * editor's resolved height: the iframe and the bubble size themselves. */
.message-editor--preview {
  flex: none;
}

.email-template-editor-page {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  padding: 16px 24px 24px;
  box-sizing: border-box;
}

.email-template-editor-page__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.email-template-editor-page__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.email-template-editor-page__workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

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

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

.email-template-editor-inline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 560px;
  height: min(70vh, 800px);
}

.email-template-editor-inline .email-template-editor-page__workspace,
.email-template-editor-inline .email-template-editor-page__html-form,
.email-template-editor-inline .email-mjml-editor {
  flex: 1;
  min-height: 0;
  height: 100%;
}

.email-template-preview-frame {
  height: min(70vh, 720px);
  min-height: 480px;
  width: 100%;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
}

.email-template-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

/* Sent email on a service run: the document grows and the page scrolls. */
.email-document {
  width: 100%;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.email-document iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  background: #fff;
}

/* Accordion — Rails Blocks lui-accordion (template tab locales) */
.lui-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.lui-accordion__heading {
  margin: 0;
  width: 100%;
}

.lui-accordion__item {
  border-bottom: 1px solid var(--color-tertiary);
  width: 100%;
}

.lui-accordion__trigger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.lui-accordion__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
}

.lui-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  text-align: left;
  color: var(--color-content);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
  font-family: inherit;
}

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

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

.lui-accordion__trigger:disabled {
  cursor: not-allowed;
  color: var(--color-foreground);
}

.lui-accordion__title {
  flex: 1 1 auto;
}

.lui-accordion__icon {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-content-secondary);
  transition: transform 200ms ease;
}

.lui-accordion__trigger[data-state="open"] .lui-accordion__icon {
  transform: rotate(180deg);
}

.lui-accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.lui-accordion__content[data-state="open"] {
  grid-template-rows: 1fr;
}

.lui-accordion__content-inner {
  overflow: hidden;
  min-height: 0;
}

.lui-accordion__body {
  padding: 0 8px 12px;
  color: var(--color-content-secondary);
  opacity: 0;
  transition: opacity 240ms ease;
}

.lui-accordion__content[data-state="open"] .lui-accordion__body {
  opacity: 1;
}

/* Inset body — gap between trigger row and panel content (e.g. card-wrapped library accordions) */
.lui-accordion--inset-body .lui-accordion__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 0 12px 12px;
}

.lui-accordion--no-trigger-hover .lui-accordion__trigger:hover {
  background: transparent;
}

.lui-card--flush .lui-accordion__trigger-row {
  padding-left: 12px;
  padding-right: 12px;
}

.lui-card--flush .lui-accordion__trigger {
  padding-left: 0;
  padding-right: 0;
}

.lui-card--flush .lui-accordion__actions {
  padding-right: 0;
  flex-shrink: 0;
}

.lui-card--flush .lui-accordion__item:last-child {
  border-bottom: none;
}

.lui-accordion--bordered {
  gap: 8px;
}

.lui-accordion--bordered .lui-accordion__item {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  overflow: hidden;
}

/* ── Missing spacing / display utilities ──────────────────── */
.p-3   { padding: 12px; }
.p-4   { padding: 16px; }
.px-1  { padding-left: 4px; padding-right: 4px; }
.px-3  { padding-left: 12px; padding-right: 12px; }
.px-4  { padding-left: 16px; padding-right: 16px; }
.pl-3  { padding-left: 12px; }
.pl-8  { padding-left: 32px; }
.py-1  { padding-top: 4px; padding-bottom: 4px; }
.py-3  { padding-top: 12px; padding-bottom: 12px; }
.py-4  { padding-top: 16px; padding-bottom: 16px; }
.py-8  { padding-top: 32px; padding-bottom: 32px; }
.py-12 { padding-top: 48px; padding-bottom: 48px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pt-2  { padding-top: 8px; }
.pt-3  { padding-top: 12px; }
.pt-4  { padding-top: 16px; }
.pb-3  { padding-bottom: 12px; }
.pb-4  { padding-bottom: 16px; }
.mt-6  { margin-top: 24px; }
.mb-0  { margin-bottom: 0; }
.gap-5 { gap: 20px; }
.text-primary        { color: var(--color-content); }
.uppercase           { text-transform: uppercase; }
.pointer-events-none { pointer-events: none; }
.bg-transparent      { background: transparent; }
.underline           { text-decoration: underline; }
.font-mono           { font-family: var(--font-mono); }
.w-1\/2 { width: 50%; }
/* SortableJS drag states */
.ghost  { opacity: 0.4; }
.chosen { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.drag   { opacity: 0.8; }
/* ── Protocol Element Cards (editor) ──────────────────────── */
.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__filters,
.bookings-week__capacity,
.bookings-calendar__day-nav,
.bookings-slot-panel__header,
.bookings-slot-panel__title,
.bookings-slot-panel__actions,
.bookings-slot-panel__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Capacity is a one- or two-digit value: the inline group shrinks to its
   control instead of stretching to the 420px form default, and the field keeps
   the 4.5rem readable floor used elsewhere. Label, field and Save share the
   same 8px rhythm as the week navigation. */
.bookings-week__capacity .lui-forms__group {
  width: auto;
  gap: 8px;
}

.bookings-week__capacity .lui-forms__control {
  width: 4.5rem;
  max-width: 4.5rem;
}

/* With several agendas visible the capacity leaves the toolbar for a stacked
   block, one row per agenda, and there the label is the agenda name ("entity ·
   operator email") instead of the fixed "Parallel bookings per slot". Names have
   no length limit, so the row is built to keep one shape whatever it says: the
   name is the only flexible part, and field + Save never leave each other's side
   or the end of the row. A name too long for the width wraps inside its own
   label; it never pushes the pair onto another line. */
.bookings-week__capacities {
  container-type: inline-size;
  container-name: bookings-capacity;
}

.bookings-week__capacities .bookings-week__capacity {
  flex-wrap: nowrap;
}

.bookings-week__capacities .lui-forms__group--inline {
  flex: 0 1 auto;
  min-width: 0;
}

/* `min-width: 0` plus a break inside the word: an operator email is a single
   token, and without it the label's min-content would keep the row wider than
   the card on a phone. */
.bookings-week__capacities .lui-forms__label,
.bookings-week__capacities .bookings-week__capacity-name {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Only the name gives way. The field keeps its 4.5rem and the button its label,
   so they land on the same x in every row of the block. */
.bookings-week__capacities .lui-forms__control,
.bookings-week__capacities .lui-button,
.bookings-week__capacities .bookings-week__capacity-value {
  flex-shrink: 0;
}

/* Narrow block — a phone, or the same card squeezed by a wider sidebar. Side by
   side the pair ends up wherever the name leaves it: hard right in the rows with
   a long name, tight left in the rows with a short one, which reads as three
   different rows instead of a list. Dissolving the field group with
   `display: contents` makes label, field and Save siblings in the same flex row,
   so the name takes a line of its own and the pair always starts the next one at
   the same x — whatever the name says, and in the read-only rows too. */
@container bookings-capacity (max-width: 30rem) {
  .bookings-week__capacities .bookings-week__capacity {
    flex-wrap: wrap;
  }

  .bookings-week__capacities .lui-forms__group--inline {
    display: contents;
  }

  .bookings-week__capacities .lui-forms__label,
  .bookings-week__capacities .bookings-week__capacity-name {
    flex: 1 1 100%;
  }
}

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

/* Day-by-day navigation only exists in the single-day (small viewport) view. */
.bookings-calendar__day-nav {
  display: none;
  justify-content: space-between;
}

/* Identification block (header, state, bookings) stays tight at 8px; the
   destructive action and the booking form read as separate groups at 16px
   (8px stack gap + 8px margin). */
.bookings-slot-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bookings-slot-panel__actions,
.bookings-slot-panel__book {
  margin-top: 8px;
}

.bookings-slot-panel__header {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.bookings-slot-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bookings-slot-panel__item {
  justify-content: space-between;
  min-width: 0;
}

.bookings-slot-panel__book {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bookings-slot-panel__search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* The field shares the row with Book instead of claiming 100% and pushing it
   to a second line; it still wraps when the panel is too narrow. */
.bookings-slot-panel__search .lui-forms__control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* Results frame is empty until a search runs — do not pay the stack gap for it. */
.bookings-slot-panel__book turbo-frame:empty {
  display: none;
}

@media (max-width: 767px) {
  .bookings-calendar__day-nav {
    display: flex;
  }
}

/* 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-fit, minmax(min(100%, 14rem), 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,
.dmt-request-attachments > .lui-empty-state--text {
  padding: 0;
}

.dmt-customer-photos__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.dmt-customer-photos__thumb .lui-thumbnail {
  display: flex;
  width: 100%;
  height: 100%;
}

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

.dmt-image-zoom {
  min-width: 0;
}

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

.dmt-image-zoom__stage {
  position: relative;
  overflow: hidden;
  height: min(70dvh, 40rem);
  background: var(--color-secondary);
  border-radius: 6px;
  overscroll-behavior: contain;
  touch-action: none;
}

.dmt-image-zoom__stage.is-zoomed {
  cursor: grab;
}

.dmt-image-zoom__stage.is-panning {
  cursor: grabbing;
}

.dmt-image-zoom__toolbar {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--color-tertiary);
  border-radius: 999px;
  background: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 120ms ease;
}

.dmt-image-zoom__stage:hover .dmt-image-zoom__toolbar,
.dmt-image-zoom__stage:focus-within .dmt-image-zoom__toolbar,
.dmt-image-zoom__stage.is-zoomed .dmt-image-zoom__toolbar {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) {
  .dmt-image-zoom__toolbar {
    opacity: 1;
    pointer-events: auto;
  }
}

.dmt-image-zoom__scale {
  min-width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dmt-image-zoom__image,
.dmt-image-zoom__stage .dmt-customer-photos__full,
.dmt-image-zoom__stage .dmt-equipment-card__preview-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

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

/* ---------------------------------------------------------------------------
   LoopOS Flux Apps — documentation pages (ADR-100)
   ---------------------------------------------------------------------------
   Page-local composition for the two generic documentation pages every Flux app
   may declare: a status summary rail, an index with progress per group, a
   screenshot grid with a native `<dialog>` lightbox, and the table/diagram
   vocabulary the apps' own architecture partials write against. Everything else
   on those pages is `lui-*`. Prefix `lfa-docs-`; role tokens only, no raw hex,
   no `dark:*`.

   Replaces the `.ito-fase1-*` block (itadOS MR-P6), whose two pages became this
   framework — same recipes, one prefix, every app.
   ------------------------------------------------------------------------- */

.lfa-docs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.lfa-docs-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 96px;
  padding: 8px 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

a.lfa-docs-stat:hover {
  background: color-mix(in srgb, var(--color-tertiary) 35%, var(--color-primary));
}

.lfa-docs-stat--selected {
  background: var(--color-chrome-accent-muted);
}

.lfa-docs-stat--selected:hover {
  background: color-mix(in srgb, var(--color-chrome-accent) 14%, var(--color-background));
}

.lfa-docs-stat--total {
  background: var(--color-secondary);
}

.lfa-docs-stat__count {
  color: var(--color-content);
  font-variant-numeric: tabular-nums;
}

/* Phase and group rails, and the sibling-page pill. */
.lfa-docs-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/* The index beside the list — the reader's first question is "what is left in
   this group", and the answer should not require reading the list. */
.lfa-docs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 1100px) {
  .lfa-docs-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .lfa-docs-index {
    position: sticky;
    top: 16px;
  }
}

.lfa-docs-index {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
}

.lfa-docs-index__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lfa-docs-index__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lfa-docs-index__link {
  color: var(--color-content);
  text-decoration: none;
}

.lfa-docs-index__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lfa-docs-index__progress {
  font-variant-numeric: tabular-nums;
}

/* One bar per group, one segment per status, widths proportional to counts.
   The colours are the badge hues the rest of the page already uses. */
.lfa-docs-index__bar {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--color-tertiary);
}

.lfa-docs-index__bar-seg { flex-basis: 0; }
.lfa-docs-index__bar-seg--done { background: var(--color-success); }
.lfa-docs-index__bar-seg--partial { background: var(--color-warning); }
.lfa-docs-index__bar-seg--missing { background: var(--color-danger); }
.lfa-docs-index__bar-seg--blocked { background: var(--color-orange); }
.lfa-docs-index__bar-seg--unverified { background: var(--color-content-tertiary); }

.lfa-docs-group {
  scroll-margin-top: 16px;
}

.lfa-docs-group-counts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lfa-docs-group-counts__link {
  text-decoration: none;
}

/* Requirement cards ------------------------------------------------------- */

.lfa-docs-req {
  scroll-margin-top: 16px;
}

.lfa-docs-req__anchor {
  text-decoration: none;
}

.lfa-docs-req__anchor:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lfa-docs-req__id {
  padding: 2px 6px;
  border: 1px solid var(--color-tertiary);
  border-radius: 4px;
  background: var(--color-secondary);
  color: var(--color-content-secondary);
}

.lfa-docs-req__reason {
  padding: 8px 12px;
  border-left: 2px solid var(--color-tertiary);
  background: var(--color-secondary);
  border-radius: 0 4px 4px 0;
}

.lfa-docs-req__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .lfa-docs-req__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lfa-docs-req__evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.lfa-docs-req__steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Screenshots — a thumbnail grid; the full-size image lives in a `<dialog>`
   opened by `showModal()`. No controller, no library. */
.lfa-docs-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.lfa-docs-shot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.lfa-docs-shot__button {
  padding: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}

.lfa-docs-shot__button:hover {
  border-color: var(--color-chrome-accent);
}

.lfa-docs-shot__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}

/* A screenshot the YAML names but the directory does not have yet. Propshaft
   raises on a logical path it cannot resolve, so the alternative to this box is
   a 500 on the whole page. */
.lfa-docs-shot__placeholder {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 12px;
  border: 1px dashed var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-secondary);
}

.lfa-docs-dialog {
  width: min(1320px, 94vw);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-content);
  overflow: auto;
}

.lfa-docs-dialog::backdrop {
  background: color-mix(in srgb, var(--color-content) 55%, transparent);
}

.lfa-docs-dialog__bar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-tertiary);
  background: var(--color-background);
}

.lfa-docs-dialog__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Architecture page ------------------------------------------------------- */

.lfa-docs-review-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lfa-docs-contents {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
}

.lfa-docs-contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.lfa-docs-section {
  padding-top: 8px;
}

.lfa-docs-section__heading {
  scroll-margin-top: 72px;
}

/* The vocabulary an app's own `docs/architecture/_<id>.html.erb` partials write
   against — tables, lists and lane diagrams are what an architecture note is
   made of, and each app re-inventing them is how prefixes multiply. */

/* Wide tables scroll inside their own container — the page body never scrolls
   horizontally (rule `ui-tables.mdc`). */
.lfa-docs-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
}

.lfa-docs-table {
  min-width: 720px;
}

.lfa-docs-table th,
.lfa-docs-table td {
  vertical-align: top;
  padding: 8px 10px;
}

.lfa-docs-table__struck td {
  color: var(--color-content-tertiary);
}

.lfa-docs-table__highlight {
  background: var(--color-secondary);
}

.lfa-docs-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lfa-docs-new {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--color-chrome-accent-muted);
  color: var(--color-content);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lfa-docs-diagram {
  overflow-x: auto;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-primary);
  padding: 8px;
}

.lfa-docs-diagram svg {
  min-width: 900px;
  width: 100%;
  height: auto;
}

.lfa-docs-diagram__lane rect {
  fill: var(--color-secondary);
  stroke: var(--color-tertiary);
}

.lfa-docs-diagram__lane--app rect {
  fill: color-mix(in srgb, var(--color-chrome-accent) 8%, var(--color-secondary));
}

.lfa-docs-diagram__lane-label {
  fill: var(--color-content-secondary);
  font-size: 12px;
  font-weight: 500;
}

.lfa-docs-diagram__node rect {
  fill: var(--color-background);
  stroke: var(--color-tertiary);
}

.lfa-docs-diagram__node text {
  fill: var(--color-content);
  font-size: 12px;
  text-anchor: middle;
}

.lfa-docs-diagram__sub {
  fill: var(--color-content-secondary);
  font-size: 10px;
}

.lfa-docs-diagram__node--frontend rect {
  stroke: var(--color-chrome-accent);
}

.lfa-docs-diagram__node--mr rect {
  fill: color-mix(in srgb, var(--color-chrome-accent) 12%, var(--color-background));
  stroke: var(--color-chrome-accent);
}

.lfa-docs-diagram__node--hook rect {
  fill: var(--color-secondary);
  stroke-dasharray: 4 3;
}

.lfa-docs-diagram__node--blocked rect {
  fill: var(--color-secondary);
  stroke-dasharray: 4 3;
}

.lfa-docs-diagram__node--blocked text {
  fill: var(--color-content-tertiary);
}

/* Print — "save as PDF" is the export, so there is no second renderer.
   The requirements page prints as the list; the architecture page prints as
   every section stacked, which is why the two sheets are separate. */
@media print {
  /* Chrome, filters and controls go; every card stays whole on its page;
     thumbnails print at a readable size. */
  .lui-sidebar, .lui-topbar, .lui-page-header__actions, .lui-action-bar,
  [class*="dev-tools"], .lfa-docs-filters, .lfa-docs-index, .lfa-docs-print,
  .lfa-docs-dialog {
    display: none !important;
  }

  /* The shell scrolls an inner box inside a 100vh grid; on paper that is one
     page with the rest cut off. Every ancestor of the content gives up its
     fixed height and its scroll box so the document can paginate. */
  html, body.shell-body, .lui-app-layout, .lui-app-layout__content,
  .lui-app-layout__main, .lui-app-layout__workspace,
  .lui-main-layout__content, .lui-show-layout {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }

  .lfa-docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .lfa-docs-req, .lfa-docs-shot {
    break-inside: avoid;
  }

  .lfa-docs-group {
    break-before: page;
  }

  .lfa-docs-group:first-of-type {
    break-before: auto;
  }

  .lfa-docs-req__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .lfa-docs-shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lfa-docs-shot__img {
    max-height: none;
  }

  a[href^="#"] {
    color: inherit;
  }

  /* A printed copy of the architecture page is the whole document, not the open
     tab. The tab rail is navigation and goes; the panels the rail hides come
     back, in source order, which is the order of the note. */
  .lfa-docs-architecture .lui-tabs__nav,
  .lfa-docs-architecture .lui-tabs__list,
  .lfa-docs-architecture .lfa-docs-review-note {
    display: none !important;
  }

  /* `shared/tabs/tabs` hides an inactive panel with the `hidden` attribute.
     Overriding it here — and not by removing the attribute in JS — keeps the
     screen behaviour and the accessibility tree exactly as the design system
     ships them. */
  .lfa-docs-architecture .lui-tabs__panel,
  .lfa-docs-architecture .lui-tabs__panel[hidden] {
    display: block !important;
  }

  .lfa-docs-architecture .lui-tabs__panel + .lui-tabs__panel {
    break-before: page;
  }

  .lfa-docs-contents {
    break-after: page;
  }

  /* Wide tables scroll on screen; on paper they must not be clipped. */
  .lfa-docs-table-scroll,
  .lfa-docs-diagram {
    overflow: visible !important;
  }

  .lfa-docs-table {
    min-width: 0;
    font-size: 9px;
  }

  .lfa-docs-diagram svg {
    min-width: 0;
  }

  .lfa-docs-section__heading,
  .lfa-docs-architecture .lui-alert {
    break-inside: avoid;
  }
}

/* ─── Permissions in plain language (B6.8) ──────────────────────────────────
   A permission chip says the same thing twice: the sentence an operator reads
   and the technical name an engineer greps for. Written on the design-system
   type scale, no new tokens. */

.lui-scope-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 16px;
}

.lui-scope-chip {
  min-width: 0;
}

.lui-scope-chip__label {
  color: var(--color-content);
  overflow-wrap: anywhere;
}

.lui-scope-chip__code {
  overflow-wrap: anywhere;
  /* `copy-11-mono` paints content; a technical alias beside a label is meta. */
  color: var(--color-content-secondary);
}

/* The picker rows put the code after the label on the same line — it wraps
   under it on a phone rather than pushing the row wider than the card. */
.lui-checkbox-select-all .lui-scope-chip__code {
  margin-left: 6px;
}

@media (max-width: 640px) {
  .lui-scope-chip-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Role picker cards (B6.2 / B6.3) ───────────────────────────────────────
   Page-local composition around `lui-radio` / `lui-checkbox`, not a new
   control: the input, its circle/box and its label are the design system's,
   and what this adds is the card that holds them plus the three capability
   lines underneath. Border-only elevation, tokens throughout, and the whole
   card reacts to the pointer because the whole card is the target. */

.lui-role-picker {
  display: grid;
  /* 17.5rem keeps a card readable; auto-fill drops to one column before crushing.
     start — a short card must not stretch to its neighbour and grow an empty band. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  align-items: start;
  gap: 12px;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

/* Invite modal: two equal columns. The modal is 2xl so each column stays
   above the 17.5rem floor. One column below 640px. */
.lui-role-picker--two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lui-role-picker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  transition: border-color 120ms ease, background 120ms ease;
  min-width: 0;
}

/* `:has()` keeps the selected state on the real input rather than on a class
   the server guessed: the card follows the radio the moment it is clicked,
   with no Stimulus and no re-render. The server class is still emitted so the
   card that comes back from a 422 is already right. */
.lui-role-picker__card:hover,
.lui-role-picker__card:has(input:hover) {
  border-color: var(--color-content-secondary);
}

.lui-role-picker__card--selected,
.lui-role-picker__card:has(input:checked) {
  border-color: var(--color-chrome-accent);
  background: var(--color-chrome-accent-muted);
}

.lui-role-picker__card:has(input:focus-visible) {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lui-role-picker__card .lui-radio,
.lui-role-picker__card .lui-checkbox {
  align-items: flex-start;
}

/* The kit description sits 2px under the label. Inside a card that is off the
   spacing scale (4px is the helper step). */
.lui-role-picker__card .lui-radio__description,
.lui-role-picker__card .lui-checkbox__description {
  margin-top: 4px;
}

/* Name and app mark share the label row. The technical key is its own line
   under the capabilities — not a sibling in this flex, which wrapped
   `darty_max_admin` mid-word. The label covers the card so the padding is a
   hit target, same as protocol choice cards. */
.lui-role-picker__card .lui-radio__label,
.lui-role-picker__card .lui-checkbox__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.lui-role-picker__card .lui-radio__label::after,
.lui-role-picker__card .lui-checkbox__label::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lui-role-picker__name {
  min-width: 0;
}

.lui-role-picker__key {
  margin-inline-start: 24px;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

/* Capabilities and the technical key are one block, 4px apart. The card's 8px
   gap stays between that block and the radio. */
.lui-role-picker__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Bullets sit under the label text: 16px control + 8px gap. */
.lui-role-picker__capabilities {
  list-style: none;
  padding-inline-start: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lui-role-picker__capabilities li {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.lui-role-picker__tick {
  font-size: 14px;
  line-height: 14px;
  flex: none;
  color: var(--color-success-fg);
}

@media (max-width: 640px) {
  .lui-role-picker {
    grid-template-columns: 1fr;
  }

  .lui-role-picker--two-col {
    grid-template-columns: 1fr;
  }
}

/* Operator Authorization tab: roles on the left, Total (effect) on the right.
   Page-local composition around checkbox + scope chips. Tokens only. */
.lui-auth-split {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
  min-inline-size: 0;
}

.lui-auth-split__roles,
.lui-auth-split__detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.lui-auth-split__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
  overflow: hidden;
}

.lui-auth-split__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--color-tertiary);
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.lui-auth-split__item:last-child {
  border-bottom: 0;
}

.lui-auth-split__item--current {
  background: var(--color-chrome-accent-muted);
}

/* Permission cards on the right: the picker shell drops away so each pack
   reads as a tab card. The left rail stays on the list, not on these cards. */
.lui-auth-scopes.lui-checkbox-select-all,
.lui-auth-scopes.lui-checkbox-select-all--readonly {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.lui-auth-scopes .lui-checkbox-select-all__search {
  padding: 0 0 12px;
  border-bottom: 0;
}

.lui-auth-scopes.lui-checkbox-select-all--collapsible-sections .lui-checkbox-select-all__areas {
  padding: 0;
  gap: 12px;
}

.lui-auth-scopes .lui-checkbox-select-all__section-group {
  border: 1px solid var(--color-tertiary);
  border-radius: 6px;
  background: var(--color-background);
  overflow: hidden;
}

.lui-auth-scopes .lui-checkbox-select-all__section-trigger {
  padding: 12px;
  border-radius: 0;
  background: var(--color-background);
}

.lui-auth-scopes .lui-accordion__item[data-state="open"] > .lui-accordion__heading .lui-checkbox-select-all__section-trigger {
  border-bottom: 1px solid var(--color-tertiary);
}

.lui-auth-split__role-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.lui-auth-split__item .lui-checkbox {
  flex: none;
}

.lui-auth-split__focus {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.lui-auth-split__focus-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.lui-auth-split__item--total {
  width: 100%;
}

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

.lui-auth-split__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
}

.lui-auth-split__summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@media (max-width: 640px) {
  .lui-auth-split {
    grid-template-columns: 1fr;
  }

  .lui-auth-split__summary {
    grid-template-columns: 1fr;
  }
}

/* ─── Roles × permissions matrix (B6.6) ─────────────────────────────────────
   A wide read-only grid: it scrolls sideways inside its own region rather than
   pushing the page, and the permission column stays put so a tick in the tenth
   role column still has a name attached to it. */

.lui-roles-matrix {
  overflow: auto;
  max-height: min(70vh, 42rem);
  border: 1px solid var(--color-tertiary);
  border-radius: 8px;
  background: var(--color-background);
}

/* The region is focusable so it can be scrolled from the keyboard; the ring is
   the one every other focusable surface uses. */
.lui-roles-matrix:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}

.lui-roles-matrix__table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.lui-roles-matrix__corner,
.lui-roles-matrix__permission {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-background);
  text-align: left;
  min-width: 240px;
  max-width: 280px;
  border-right: 1px solid var(--color-tertiary);
}

.lui-roles-matrix__corner {
  top: 0;
  z-index: 4;
  background: var(--color-primary);
}

.lui-roles-matrix__role {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--color-primary);
  text-align: left;
  vertical-align: bottom;
  min-width: 8.5rem;
  max-width: 11rem;
  white-space: normal;
}

.lui-roles-matrix__cell {
  text-align: center;
  min-width: 8.5rem;
  vertical-align: middle;
}

.lui-roles-matrix__role-trigger {
  display: block;
  min-width: 0;
  width: 100%;
}

.lui-roles-matrix__role-identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.lui-roles-matrix__role-title {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.lui-roles-matrix__role-name {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-align: left;
  min-width: 0;
}

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

.lui-roles-matrix__section th {
  background: var(--color-primary);
}

/* Never meaning in colour alone: the tick is an icon with an accessible name,
   and the absence is an em dash plus screen-reader text. */
.lui-roles-matrix__yes {
  font-size: 18px;
  line-height: 18px;
  color: var(--color-success-fg);
}

@media (prefers-reduced-motion: no-preference) {
  .lui-roles-matrix {
    scroll-behavior: smooth;
  }
}

/* ─── Roles matrix: say that it scrolls (B6.6, UX it1 #17) ──────────────────
   `overflow-x: auto` on its own is an affordance only for whoever already
   knows it is there. At 390px the grid is 1015px wide inside a 356px box, so a
   team leader saw one full-width column and had no reason to swipe; at 1280 the
   last column was already clipped at the edge. Two cues, both cheap:

   a persistent scrollbar, so the track is visible before anyone touches it —
   `overlay` scrollbars on macOS and iOS hide until scrolled, which is exactly
   the case that breaks — and a fade on the right edge that disappears once
   there is nothing left to scroll to. */

.lui-roles-matrix {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  /* `scroll-timeline` is not available everywhere yet, so the fade is painted
     unconditionally on the container and masked out at the end of the scroll by
     `background-attachment: local` on the second layer — the classic
     shadow-scroll, which needs no JavaScript and degrades to nothing. */
  background:
    linear-gradient(to right, var(--color-background) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--color-background) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(24, 24, 24, 0.12), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(24, 24, 24, 0.12), transparent) right center / 12px 100% no-repeat scroll;
}

.lui-roles-matrix::-webkit-scrollbar {
  height: 10px;
}

.lui-roles-matrix::-webkit-scrollbar-thumb {
  background: var(--color-tertiary);
  border-radius: 9999px;
}

.lui-roles-matrix::-webkit-scrollbar-track {
  background: var(--color-primary);
}

/* The sticky permission column paints over the left edge of the container, so
   the left-hand cue has to sit on the column itself to be seen at all. */
.lui-roles-matrix__permission {
  background: var(--color-background);
}

.lui-roles-matrix__corner {
  background: var(--color-primary);
}

/* Spelled out for a screen reader and for anyone who does not read a gradient:
   the region already has a role and an accessible name, this adds the hint. */
.lui-roles-matrix__hint {
  color: var(--color-content-secondary);
}

@media (min-width: 1024px) {
  /* Wide enough that the grid usually fits; the hint would be noise. */
  .lui-roles-matrix__hint {
    display: none;
  }
}

/* The cost of a fork reads as a caveat, not as one more reassurance in the
   same grey as the three above it (UX it1 #18). */
.lui-role-fork__cost {
  color: var(--color-warning-fg);
}

/* FluxNotes / FluxGraph tab label (FluxBrandHelper).
   The word itself is plain tab text — same font, weight and colour as every
   other tab, in every state. The only brand cue is one clipped copy of the
   word (data-text): a rainbow glint in the LoopOS AI palette
   (`--lui-ai-beam-*`) with a white core, sweeping once every 4.5s.
   background-size is 260%, and the band sits between 43% and 58% so it is
   fully off the word at both ends of the pass. A 0.6px white drop-shadow
   rides those pixels only — there is no second, blurred copy of the word. */
.flux-brand {
  --flux-brand-shimmer-duration: 4.5s;
  --lui-ai-beam-cyan:   rgb(0, 197, 255);
  --lui-ai-beam-teal:   rgb(0, 216, 181);
  --lui-ai-beam-yellow: rgb(255, 203, 51);
  --lui-ai-beam-orange: rgb(242, 115, 53);
  --lui-ai-beam-red:    rgb(228, 45, 39);
  --lui-ai-beam-purple: rgb(128, 68, 255);
  --lui-ai-beam-blue:   rgb(0, 114, 255);

  position: relative;
  z-index: 0;
  display: inline-block;
}

.flux-brand::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    108deg,
    transparent 0%,
    transparent 43%,
    color-mix(in srgb, var(--lui-ai-beam-cyan) 80%, white) 46.5%,
    color-mix(in srgb, var(--lui-ai-beam-teal) 80%, white) 47.8%,
    color-mix(in srgb, var(--lui-ai-beam-yellow) 90%, white) 49.2%,
    white 50%,
    color-mix(in srgb, var(--lui-ai-beam-orange) 80%, white) 50.8%,
    color-mix(in srgb, var(--lui-ai-beam-red) 80%, white) 52.2%,
    color-mix(in srgb, var(--lui-ai-beam-purple) 80%, white) 53.5%,
    color-mix(in srgb, var(--lui-ai-beam-blue) 80%, white) 54.8%,
    transparent 58%,
    transparent 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 0.6px rgb(255 255 255 / 0.95));
  animation: flux-brand-shimmer var(--flux-brand-shimmer-duration) ease-in-out infinite;
}

/* The band crosses the word in the first ~40% of the cycle and rests for the
   rest, so the shimmer reads as one pass every 4.5s rather than a constant glint. */
@keyframes flux-brand-shimmer {
  0%   { background-position: 100% 0; }
  40%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .flux-brand::after {
    display: none;
  }
}