/* =============================================================================
   LucidLoop - app.css  ::  the entire design system in one file.
   Order: reset -> tokens (:root) -> components -> app shell -> page styles
          -> reconciliation. Edit tokens in the :root block; everything else
          references them. HTML links only this file (plus the font + reset for
          legacy pages).
   ============================================================================= */

@import url("tokens.css");


/* ==================== normalize.css ==================== */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
 html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

/* ==================== tokens.css ==================== */
/* =============================================================================
   LucidLoop - Design Tokens (the single source of truth)
   =============================================================================
   Every color, size, radius, shadow, and motion value in the app is defined
   HERE, once, on :root. Components reference them by name (var(--primary)),
   never by re-typing the value. Change a value here and it changes everywhere.

   See DESIGN.md for the full rationale. Load this file FIRST, before any
   feature stylesheet. Feature files CONSUME these tokens; they must never
   redefine them.
   ============================================================================= */


/* ==================== components.css ==================== */
/* =============================================================================
   LucidLoop - Shared Component Primitives
   =============================================================================
   Reusable, token-driven components used across every page. Every value here is
   a var(--token) from tokens.css - change the token, and every button/badge/card
   on the site updates. These classes are UNSCOPED (single-class selectors) so any
   page can use them directly.

   Load order:  tokens.css -> normalize.css -> components.css -> app-shell.css
                -> <page>.css
   ============================================================================= */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* Consistent, visible keyboard focus everywhere. */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* Screen-reader-only helper. */
.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;
}

/* ---- Icons ------------------------------------------------------------ */
/* Inline SVGs drawn with the current text color; size via modifier. */
.icon {
  display: inline-flex;
  flex: none;
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--xs { width: 11px; height: 11px; }
.icon--sm { width: 13px; height: 13px; }
.icon--lg { width: 22px; height: 22px; }

/* ---- Eyebrow / section label ------------------------------------------ */
.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

/* ---- Buttons (the ONLY place buttons are defined) --------------------- */
/* Bare .btn is a primary action; BEM modifiers + legacy aliases refine it. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-9) var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: var(--primary);
  color: var(--fg-on-accent);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:hover:not(:disabled) { background: var(--primary-hover); }
.btn:active:not(:disabled) { background: var(--primary-active); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Variants */
.btn--primary { background: var(--primary); color: var(--fg-on-accent); border-color: transparent; }
.btn--primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn--secondary { background: var(--surface-0); color: var(--fg-2); border-color: var(--border); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-1); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--fg-2); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-1); }
.btn--danger { background: var(--danger); color: var(--fg-on-accent); border-color: transparent; }
.btn--danger:hover:not(:disabled) { filter: brightness(0.95); }

/* Sizes */
.btn--sm { padding: var(--space-6) var(--space-12); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-12) var(--space-20); font-size: var(--text-base); }
.btn--block { width: 100%; }
.btn--icon { padding: var(--space-8); width: 34px; height: 34px; background: transparent; color: var(--fg-3); border-color: transparent; }
.btn--icon:hover:not(:disabled) { background: var(--surface-1); color: var(--fg-1); }

/* Legacy aliases (JS-emitted names) - full buttons; work standalone or with .btn. */
.btn.primary { background: var(--primary); color: var(--fg-on-accent); border-color: transparent; }
.btn-primary, .btn-secondary, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-7);
  padding: var(--space-9) var(--space-16); border: 1px solid transparent; border-radius: var(--radius-md);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1; cursor: pointer;
}
.btn-primary { background: var(--primary); color: var(--fg-on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-0); color: var(--fg-2); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-1); border-color: var(--border-strong); }
.btn-danger { background: var(--danger); color: var(--fg-on-accent); }
.btn-danger:hover:not(:disabled) { filter: brightness(0.95); }
.btn-small { padding: var(--space-6) var(--space-12); font-size: var(--text-xs); }

/* ---- Badges / status pills -------------------------------------------- */
/* One pill primitive. .badge--sm is the denser 10px variant (was `.status`). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-9);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  white-space: nowrap;
}
.badge--sm {
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-micro);
  font-weight: var(--fw-semibold);
}

.badge--success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.badge--warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.badge--danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-border); }
.badge--review  { color: var(--review);  background: var(--review-bg);  border-color: var(--review-border); }
.badge--info    { color: var(--info);    background: var(--info-bg);    border-color: var(--info-border); }
.badge--neutral { color: var(--neutral); background: var(--neutral-bg); border-color: var(--neutral-border); }

/* Status dot (small filled circle, uses the -solid tokens). */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: var(--radius-full);
  background: var(--neutral);
  flex: none;
}
.dot--success { background: var(--success-solid); }
.dot--warning { background: var(--warning-solid); }
.dot--danger  { background: var(--danger-solid); }
.dot--info    { background: var(--info-solid); }
.dot--neutral { background: var(--neutral); }

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-bottom: 1px solid var(--border-faint);
}
.card__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.card__body { padding: var(--space-20); }

/* ---- Form fields ------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-6); }
.label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}
.input,
.select,
.textarea {
  width: 100%;
  padding: var(--space-9) var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.input::placeholder,
.textarea::placeholder { color: var(--fg-label); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-focus);
}
.textarea { min-height: 84px; resize: vertical; line-height: var(--lh-snug); }
.select {
  appearance: none;
  padding-right: var(--space-32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
}

/* ---- Toggle switch ---------------------------------------------------- */
.toggle {
  --toggle-w: 38px;
  --toggle-h: 22px;
  position: relative;
  display: inline-block;
  width: var(--toggle-w);
  height: var(--toggle-h);
  flex: none;
}
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle__track {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  transition: background var(--dur-base) var(--ease-standard);
  pointer-events: none;
}
.toggle__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: calc(var(--toggle-h) - 4px);
  height: calc(var(--toggle-h) - 4px);
  background: var(--surface-0);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-standard);
}
.toggle input:checked + .toggle__track { background: var(--primary); }
.toggle input:checked + .toggle__track::after {
  transform: translateX(calc(var(--toggle-w) - var(--toggle-h)));
}
.toggle input:focus-visible + .toggle__track { box-shadow: var(--shadow-focus); }

/* ---- Tabs ------------------------------------------------------------- */
.tabs {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  border-bottom: 1px solid var(--border);
}
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-14) 0;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.tabs__tab:hover { color: var(--fg-1); }
.tabs__tab--active { color: var(--fg-1); border-bottom-color: var(--primary); }
.tabs__count {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}

/* ---- Tables ----------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table thead th {
  text-align: left;
  padding: var(--space-10) var(--space-16);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--space-12) var(--space-16);
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-faint);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--surface-1); }
.table__mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); }

/* ---- Empty state ------------------------------------------------------ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-32);
  text-align: center;
  color: var(--fg-muted);
}
.empty__title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--fg-2); }
.empty__hint  { font-size: var(--text-sm); color: var(--fg-muted); }

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==================== compat.css ==================== */
/* =============================================================================
   LucidLoop - Compatibility layer for generic JS-emitted class names
   =============================================================================
   The widget/workflow pages render markup (from their JS and from legacy static
   HTML) using a handful of generic class names - .w-layout-*,
   .text._NN, .pill, .divider, .switch, .status-lamp, .button, .file-upload, the
   dropdown families. Rather than rename every class the JS emits, we define each
   ONCE here, token-driven, in the single stylesheet. These share the same token
   vocabulary as every other component - change a token and these update too.

   Where the DOM matches an existing primitive (modals, close buttons) we added
   the alias selector to that primitive instead of redefining it. This section
   only holds classes with no BEM equivalent in markup.
   ============================================================================= */

/* ---- Layout helpers --------------------------------------------------- */
.w-layout-hflex { display: flex; }
.w-layout-vflex { display: flex; flex-direction: column; }
.w-layout-grid  { display: grid; grid-auto-columns: 1fr; }
.w-inline-block { max-width: 100%; display: inline-block; }

/* ---- Text utilities (size/weight/tone helpers) ------------------------ */
.text { color: var(--fg-2); }
.text._12 { font-size: var(--text-xs); }
.text._14 { font-size: var(--text-sm); }
.text._16 { font-size: var(--text-base); }
.text._18 { font-size: var(--text-lg); }
.text._20 { font-size: var(--text-xl); }
.text._24 { font-size: var(--text-2xl); }
.text.bold, .bold { font-weight: var(--fw-bold); }
.text.secondary, .secondary { color: var(--fg-muted); }
.text.small, .small { font-size: var(--text-xs); }

/* ---- Dividers --------------------------------------------------------- */
.divider { background: var(--border); }
.divider.h { width: 100%; height: 1px; }
.divider.v { width: 1px; align-self: stretch; }

/* ---- Pills ("pill" chip-buttons: Add +, filters) --------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-14);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  background: var(--surface-1);
  color: var(--fg-2);
  transition: background var(--dur-fast) var(--ease-standard);
}
.pill:hover { background: var(--surface-2); }
.pill.primary { background: var(--primary); color: var(--fg-on-accent); }
.pill.primary:hover { background: var(--primary-hover); }
.pill.secondary { background: var(--primary-tint); color: var(--primary); }
.pill.secondary:hover { background: var(--primary-tint-2); }
.pill.tertiary { background: var(--surface-1); color: var(--fg-2); border-color: var(--border); }
.pill.tertiary:hover { background: var(--surface-2); }
.pill-text { line-height: 1; }
.pill-text.secondary { color: inherit; }
.pill-text.tertiary { color: inherit; }
.pill-image { width: 14px; height: 14px; display: block; flex: none; }

/* ---- Generic button (.button) ----------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: var(--space-9) var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
  background: var(--primary);
  color: var(--fg-on-accent);
  transition: background var(--dur-fast) var(--ease-standard);
}
.button:hover { background: var(--primary-hover); }
.button.tertiary { background: var(--surface-0); color: var(--fg-2); border-color: var(--border); }
.button.tertiary:hover { background: var(--surface-1); }
.button.disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Status lamp (small state dot; canonical - was also in services) -- */
.status-lamp {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--neutral);
  flex: none;
}
.status-lamp.green   { background: var(--success-solid); }
.status-lamp.orange  { background: var(--warning-solid); }
.status-lamp.red     { background: var(--danger-solid); }
.status-lamp.teal    { background: var(--info-solid); }
.status-lamp.blue    { background: var(--primary); }
.status-lamp.neutral { background: var(--neutral); }

/* ---- Toggle switch (.switch markup: a div + .switch-circle child) ------
   Distinct DOM from the BEM .toggle (input + track); the widget/manager JS
   emits this variant, so it gets its own token-driven rules. */
.switch {
  position: relative;
  width: 38px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  cursor: pointer;
  flex: none;
  transition: background var(--dur-base) var(--ease-standard);
}
.switch-circle {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--surface-0);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-standard);
}
.switch.on { background: var(--primary); }
.switch.on .switch-circle { transform: translateX(16px); }

/* ---- File upload dropzone --------------------------------------------- */
.file-upload {
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-24);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.file-upload:hover,
.file-upload.has-file { border-color: var(--primary); background: var(--surface-1); }
.file-upload input[type="file"] { display: none; }
.file-upload-text { color: var(--fg-3); font-size: var(--text-sm); }
.file-upload-text strong { color: var(--primary); }

/* ---- Inline error text ------------------------------------------------ */
.error-text { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-6); }

/* ---- Dropdown menus (.w-dropdown; hover-open, CSS-only) --------------- */
.w-dropdown, .dropdown { position: relative; display: inline-block; }
.w-dropdown-toggle, .header-dropdown-toggle, .header-dropdown-toggle-solo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--fg-2);
}
/* Invisible bridge so moving the pointer from toggle to list does not cross a dead zone. */
.w-dropdown-toggle::after,
.header-dropdown-toggle::after,
.header-dropdown-toggle-solo::after,
.stack-dropdown-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--space-4);
}
.w-dropdown-toggle:hover, .header-dropdown-toggle:hover { background: var(--surface-1); }
.header-dropdown-icon { width: 16px; height: 16px; }
.header-dropdown-list, .w-dropdown-list {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  min-width: 180px;
  padding: var(--space-6);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: var(--space-1);
}
.w-dropdown:hover .header-dropdown-list,
.w-dropdown:hover .w-dropdown-list,
.dropdown:hover .header-dropdown-list,
.header-dropdown-list.w--open,
.w-dropdown-list.w--open { display: flex; }
.header-dropdown-link, .w-dropdown-link {
  display: block;
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
}
.header-dropdown-link:hover, .w-dropdown-link:hover { background: var(--surface-1); color: var(--fg-1); }

/* ==================== app-shell.css ==================== */
/* =============================================================================
   LucidLoop - App Shell (sidebar + topbar + content)
   =============================================================================
   The reusable page frame: a fixed left sidebar and a scrollable main column
   with an optional 64px topbar. Every value is a token from tokens.css.

   The sidebar keeps the exact `.sidebar__*` class names the JS enhancers depend
   on (js/dashboard-sidebar.js writes brand/user + toggles .sidebar__item--active
   / --open; js/nav.js injects .sidebar__subitem into .sidebar__sublist), so those
   scripts work unchanged. Everything is scoped under `.app-shell`.

   Load after components.css. Mount:  <body class="app-shell"> ... </body>
   ============================================================================= */

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-canvas);
  color: var(--fg-2);
}

/* ---- Sidebar ---------------------------------------------------------- */
.app-shell .sidebar {
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  flex: none;
  height: 100vh;
  background: var(--surface-0);
  border-right: 1px solid var(--border);
  z-index: 10;
}

.app-shell .sidebar__brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--dashboard-topbar-height);
  padding: 0 var(--space-12);
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.app-shell .sidebar__org {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}
.app-shell .sidebar__sub {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.3;
}
.app-shell .sidebar__sub:empty { display: none; }

.app-shell .sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--space-8);
}

.app-shell .sidebar__group { margin-bottom: var(--space-12); }
.app-shell .sidebar__group[hidden] { display: none; }
.app-shell .sidebar__group-label {
  padding: var(--space-6) var(--space-8) var(--space-4);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

.app-shell .sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-8) var(--space-8);
  border: none;
  background: none;
  border-radius: var(--radius-md);
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.app-shell .sidebar__item:hover { background: var(--surface-1); }
.app-shell .sidebar__item--active,
.app-shell .sidebar__item.selected {
  background: var(--primary-tint);
  color: var(--primary);
  font-weight: var(--fw-semibold);
}

.app-shell .sidebar__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  color: var(--fg-muted);
}
.app-shell .sidebar__item--active .sidebar__icon,
.app-shell .sidebar__item.selected .sidebar__icon { color: var(--primary); }

.app-shell .sidebar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-shell .sidebar__spacer { flex: 1; }

.app-shell .sidebar__chevron {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px; height: 12px;
  color: var(--fg-muted);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.app-shell .sidebar__item--open .sidebar__chevron { transform: rotate(180deg); }

.app-shell .sidebar__sublist {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-2) calc(var(--space-16) + var(--space-10));
}
.app-shell .sidebar__sublist[aria-hidden="false"] { display: flex; }

.app-shell .sidebar__subitem {
  display: block;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.app-shell .sidebar__subitem:hover { background: var(--surface-1); color: var(--fg-1); }
.app-shell .sidebar__subitem--action { color: var(--primary); font-weight: var(--fw-semibold); }

.app-shell .sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
  padding: var(--space-10) var(--space-12);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}
.app-shell .sidebar__user-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar inline-SVG icons (so the shell renders without components.css). */
.app-shell .icon {
  display: inline-flex;
  flex: none;
  width: 16px; height: 16px;
  stroke: currentColor;
  stroke-width: 1.85;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app-shell .icon--xs { width: 12px; height: 12px; }
.app-shell .icon--sm { width: 13px; height: 13px; }
.app-shell .icon--lg { width: 22px; height: 22px; }

/* Avatar (sidebar user + anywhere an initials chip is needed). */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  flex: none;
  background: var(--neutral-bg);
  color: var(--neutral);
}
.avatar--slate { background: var(--neutral-bg); color: var(--neutral); }
.avatar--brand { background: var(--primary-tint); color: var(--primary); }

/* ---- Main column ------------------------------------------------------ */
.app-main {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Topbar: aligns to the 64px sidebar brand block. */
.app-topbar {
  flex: none;
  min-height: var(--dashboard-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 0 var(--space-24);
  background: var(--surface-0);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
.app-topbar__heading { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.app-topbar__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-topbar__subtitle { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.2; }
.app-topbar__actions { display: flex; align-items: center; gap: var(--space-8); flex: none; }

/* Scrollable content region. */
.app-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-24);
}
.app-content--flush { padding: 0; }

/* Node-editor pages: the edit panel (.item-edit) and the load overlay are
   position:absolute/fixed inset:0. Make the content region their containing
   block so they overlay the canvas, leaving the sidebar + topbar visible. */
.agent-editor .app-content { position: relative; }

/* Node editors: tighten the topbar switch <-> Menu spacing. */
.agent-editor .app-topbar__actions { gap: var(--space-4); }
.agent-editor .header-dropdown-toggle {
  justify-content: center;
  padding-inline: var(--space-10);
}

/* ---- Responsive: collapse the sidebar to a top strip on narrow screens. */
@media (max-width: 720px) {
  .app-shell { flex-direction: column; height: auto; overflow: visible; }
  .app-shell .sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .app-shell .sidebar__brand { min-height: 52px; border-bottom: none; flex: 1; }
  .app-shell .sidebar__nav { flex: 1 0 100%; padding: var(--space-6); }
  .app-shell .sidebar__user { width: auto; border-top: none; }
  .app-main { height: auto; overflow: visible; }
  .app-content { overflow: visible; }
}

/* ==================== services.css ==================== */
/* =============================================================================
   Services / connectors page. Consumes tokens.css + components.css + app-shell.
   Ports the former connectors.css styling, retokenized, so all JS-injected
   content (account rows, availability, events, badges) renders unchanged.
   ============================================================================= */

/* ---- Two-column layout inside the shell content ----------------------- */
.services-page.container,
.container {
  display: flex;
  align-items: flex-start;
  gap: var(--space-24);
  max-width: 1180px;
  margin: 0 auto;
}

.services-sidebar { width: 320px; flex: none; }
.services-detail {
  flex: 1;
  min-width: 0;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-32);
}

.service-section { margin-bottom: var(--space-24); }
.service-section h3 {
  margin: 0 0 var(--space-12);
  padding-left: var(--space-8);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
}

/* ---- Service tiles (left list) --------------------------------------- */
.service-item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
  margin-bottom: var(--space-8);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.service-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.service-item.active { border-color: var(--primary); background: var(--primary-tint); }

.service-item-icon {
  width: 40px; height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
.service-item-info h4 {
  margin: 0 0 2px;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.service-item-info p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--fg-muted);
}
.service-item-info p.connected { color: var(--success); }

/* Connection status lamp -> the canonical .status-lamp lives in the compat
   layer above (all color variants). Nothing to redefine here. */

/* ---- Detail panel ----------------------------------------------------- */
.service-detail-view { display: none; }
.service-detail-view.active { display: block; }

.detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
}
.detail-icon {
  width: 64px; height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
}
.detail-info h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.detail-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}
.detail-description {
  max-width: 620px;
  margin-bottom: var(--space-24);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.detail-actions { display: flex; align-items: center; gap: var(--space-12); }

.setup-notification-info {
  margin-top: var(--space-24);
  padding-top: var(--space-24);
  border-top: 1px solid var(--border-faint);
}
.setup-notification-info h4 {
  margin: 0 0 var(--space-12);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

/* ---- Disconnect button (services-specific ghost-danger) --------------- */
.btn-disconnect {
  background: transparent; border-color: transparent;
  color: var(--fg-muted); padding: var(--space-6) var(--space-8);
}
.btn-disconnect:hover:not(:disabled) { color: var(--danger); background: transparent; }

/* ---- Connected accounts (injected) ------------------------------------ */
.accounts-list { display: flex; flex-direction: column; gap: var(--space-10); }
.account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-20);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.account-item:hover { border-color: var(--border-strong); }
.account-info { display: flex; align-items: center; gap: var(--space-12); }
.account-avatar {
  width: 40px; height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
  background: var(--surface-1);
  border-radius: var(--radius-md);
}
.account-details h4 { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-1); }
.account-details p { margin: 0; font-size: var(--text-xs); color: var(--fg-muted); }
.account-actions { display: flex; align-items: center; gap: var(--space-8); }

/* ---- Badge color variants (space-separated, as emitted by JS) --------- */
.badge.success { color: var(--success); background: var(--success-bg); border-color: var(--success-border); }
.badge.warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); }
.badge.danger  { color: var(--danger);  background: var(--danger-bg);  border-color: var(--danger-border); }

/* ---- Modals ----------------------------------------------------------- */
.modal,
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(3px);
}
.modal.active,
.modal.show,
.modal-overlay.active { display: flex; }
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.18);
}
/* Simple modals (no .modal-header) pad the content directly. */
.modal-content:not(:has(.modal-header)) { padding: var(--space-24); overflow-y: auto; }
.modal-content > h3 { margin: 0 0 var(--space-16); font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--fg-1); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-20) var(--space-24);
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--fg-1); }
.modal-body { flex: 1; overflow-y: auto; padding: var(--space-24); }
.modal-content:has(.modal-footer) .modal-body { flex: 0 1 auto; }
.modal-footer {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-12);
  padding: var(--space-20) var(--space-24);
  border-top: 1px solid var(--border-faint);
}
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  margin: var(--space-12) 0 0;
}
.close-modal,
.modal-close {
  background: none;
  border: none;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.close-modal:hover,
.modal-close:hover { color: var(--fg-1); }

/* ---- Forms (the canonical field styles) ------------------------------- */
.form-group { margin-bottom: var(--space-16); }
.form-group label {
  display: block;
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}
.form-control,
.form-group input,
.form-group select {
  width: 100%;
  padding: var(--space-9) var(--space-12);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg-1);
  font-family: inherit;
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.form-control:focus,
.form-group input:focus,
.form-group select:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.form-row { display: flex; gap: var(--space-16); }
.form-group.half { flex: 1; }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-12); margin-top: var(--space-20); }

/* ---- Availability / events / slots (injected) ------------------------- */
.availability-results { margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--border-faint); }
.availability-status {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-16);
  border: 1px solid transparent;
}
.status-available { background: var(--success-bg); border-color: var(--success-border); }
.status-busy { background: var(--danger-bg); border-color: var(--danger-border); }
.status-icon {
  width: 32px; height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--fg-on-accent);
}
.status-available .status-icon { background: var(--success-solid); }
.status-busy .status-icon { background: var(--danger-solid); }
.status-text h4 { margin: 0 0 var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-1); }
.status-text p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }

.suggested-slots h5 { margin: 0 0 var(--space-12); font-size: var(--text-sm); color: var(--fg-1); }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-10); }
.time-slot {
  padding: var(--space-10);
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.time-slot:hover { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }

.events-table { width: 100%; margin-top: var(--space-16); border-collapse: collapse; }
.events-table th {
  text-align: left;
  padding: var(--space-10) var(--space-16);
  background: var(--surface-1);
  color: var(--fg-label);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.events-table td { padding: var(--space-14) var(--space-16); border-bottom: 1px solid var(--border-faint); color: var(--fg-2); font-size: var(--text-sm); }

/* ---- Spinner / empty / alert (injected) ------------------------------- */
.loading-spinner {
  width: 34px; height: 34px;
  margin: var(--space-24) auto;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center;
  padding: var(--space-32) var(--space-24);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.empty-state svg { width: 56px; height: 56px; margin: 0 auto var(--space-16); opacity: 0.5; }

.alert { padding: var(--space-12) var(--space-16); border-radius: var(--radius-md); font-size: var(--text-sm); }
.alert-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  .container { flex-direction: column; }
  .services-sidebar { width: 100%; }
  .services-detail { padding: var(--space-20); }
}

/* ==================== tables.css ==================== */
/* =============================================================================
   Tables page - single data grid (Finsweet table markup) + actions menu.
   Consumes tokens.css + components.css + app-shell.css. Ports the former
   custom table styling, retokenized, preserving all fs-table_* hooks.
   ============================================================================= */

/* ---- Table name in the topbar ----------------------------------------- */
.app-topbar__title.header-heading { cursor: text; }

/* ---- Actions menu (replaces the former dropdown) --------------------- */
.menu { position: relative; }
.menu__toggle,
.menu__toggle:hover:not(:disabled) { background: transparent; color: var(--fg-3); border-color: transparent; }
.menu__toggle:hover:not(:disabled) { background: var(--surface-1); color: var(--fg-1); }
.menu__list {
  position: absolute;
  top: calc(100% + var(--space-6));
  right: 0;
  min-width: 200px;
  padding: var(--space-6);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: var(--space-1);
}
.menu.menu--open .menu__list { display: flex; }
.menu__item {
  display: block;
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.menu__item:hover { background: var(--surface-1); color: var(--fg-1); }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---- Toolbar / quick search ------------------------------------------- */
.tables-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}
.table-quick-search-wrap { flex: 1; }
.table-quick-search-input {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: var(--space-9) var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
  background: var(--surface-0);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.table-quick-search-input::placeholder { color: var(--fg-label); }
.table-quick-search-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.table-quick-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Source badge injected next to the table name at runtime. */
#sourceBadge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  background: var(--neutral-bg);
  color: var(--neutral);
}

/* ---- The data grid (Finsweet table markup) ---------------------------- */
.fs-table_instance {
  display: block;
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
}
.fs-table_table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  text-align: left;
  font-size: var(--text-sm);
}
.fs-table_head { position: sticky; top: 0; z-index: 2; background: var(--surface-1); }
.fs-table_header {
  position: relative;
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border-faint);
  text-align: left;
  vertical-align: middle;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--fg-label);
  white-space: nowrap;
  background: var(--surface-1);
}
.fs-table_row { border: none; }
.fs-table_body .fs-table_row:hover { background: var(--surface-1); }
.fs-table_cell {
  padding: var(--space-10) var(--space-12);
  border-bottom: 1px solid var(--border-faint);
  border-right: 1px solid var(--border-faint);
  vertical-align: top;
  color: var(--fg-2);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 360px;
  cursor: text;
}
.fs-table_body { background: var(--surface-0); }

.table-header-field-name { display: inline-block; }

/* Inline cell / rename editor. */
.cell-edit-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  background: var(--surface-0);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  outline: none;
  padding: var(--space-4) var(--space-6);
  margin: 0;
  box-shadow: var(--shadow-focus);
}
.cell-edit-input--invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }

/* Column delete icon (overlay at right edge of header). */
.table-icon-delete-column {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  padding: var(--space-2);
  background: var(--surface-1);
  color: var(--fg-muted);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.fs-table_header:hover .table-icon-delete-column { opacity: 1; }

/* Row delete icon (sticky trailing cell). */
.fs-table_cell-delete,
.fs-table_header-delete {
  position: sticky;
  right: 0;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  text-align: center;
  z-index: 1;
}
.fs-table_header-delete { background: var(--surface-1); }
.fs-table_cell-delete {
  background: var(--surface-0);
  cursor: default;
  border-left: 1px solid var(--border);
}
.table-icon-delete-row {
  opacity: 0;
  pointer-events: none;
  color: var(--fg-muted);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.fs-table_row:hover .table-icon-delete-row,
.table-icon-delete-row:hover { opacity: 1; pointer-events: auto; }
.table-icon-delete-row:hover,
.table-icon-delete-column:hover { color: var(--danger); }

/* ---- Load more -------------------------------------------------------- */
#loadMoreBtn { margin-top: var(--space-16); }

/* ---- Airtable sync modal (buttons use the compat classes above) ------- */
#airtableSyncModal select {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
  .table-quick-search-input { max-width: none; }
}

/* ==================== documents.css ==================== */
/* =============================================================================
   Documents page - notes list + editor. Consumes tokens.css / components.css.
   ============================================================================= */

.docs {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* ---- Left: document list --------------------------------------------- */
.docs__list {
  width: 340px;
  flex: none;
  overflow-y: auto;
  background: var(--surface-0);
  border-right: 1px solid var(--border);
}

.document-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border-faint);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}
.document-preview:hover { background: var(--surface-1); }
.document-preview.active {
  background: var(--primary-tint);
  box-shadow: inset 3px 0 0 var(--primary);
}
.document-preview-title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.document-preview-body {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.document-preview .text._12 { font-size: var(--text-2xs); color: var(--fg-label); }
@keyframes docSavedFlash {
  0%   { background: var(--success-bg); }
  100% { background: transparent; }
}
.document-preview-just-saved { animation: docSavedFlash 2.5s var(--ease-standard); }

/* Loading / empty / error rows injected into the list. */
.docs__list .text {
  padding: var(--space-16);
  font-size: var(--text-sm);
}
.docs__list .text.secondary { color: var(--fg-muted); }
.docs__list .text._16 { font-size: var(--text-sm); }

/* ---- Right: editor pane ---------------------------------------------- */
.docs__editor {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  overflow: hidden;
  background: var(--surface-canvas);
}

.docs__pane {
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24) var(--space-32);
  overflow-y: auto;
}

.docs__title-input {
  border: none;
  background: none;
  padding: var(--space-4) 0;
  font-family: inherit;
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
}
.docs__title-input::placeholder { color: var(--fg-label); }
.docs__title-input:focus { outline: none; box-shadow: none; }

.docs__body-input {
  flex: 1;
  min-height: 200px;
  border: none;
  background: none;
  resize: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.docs__body-input::placeholder { color: var(--fg-label); }
.docs__body-input:focus { outline: none; box-shadow: none; }

.docs__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-faint);
}
.docs__date { font-size: var(--text-xs); color: var(--fg-muted); }
.docs__footer-actions { display: flex; align-items: center; gap: var(--space-8); }

/* Empty state fills the editor pane. */
.docs__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Save toast ------------------------------------------------------- */
.document-save-toast {
  position: absolute;
  left: 50%;
  bottom: var(--space-24);
  transform: translate(-50%, 12px);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-md);
  background: var(--success);
  color: var(--fg-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.document-save-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 720px) {
  .docs { flex-direction: column; height: auto; }
  .docs__list { width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--border); }
  .docs__pane { padding: var(--space-16); }
}

/* ==================== tables-list.css ==================== */
/* =============================================================================
   Tables list page. Consumes tokens.css + components.css + app-shell.css.
   ============================================================================= */

.tables-list-page { max-width: 680px; margin: 0 auto; }
.tables-list-sticky { margin-bottom: var(--space-8); }
.tables-list-page__intro {
  margin: 0 0 var(--space-16);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.tables-list-search {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--fg-1);
  background: var(--surface-0);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.tables-list-search::placeholder { color: var(--fg-label); }
.tables-list-search:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }

.tables-plain-list {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
  overflow: hidden;
}
.tables-plain-list__item a {
  display: block;
  padding: var(--space-14) var(--space-16);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border-faint);
  transition: background var(--dur-fast) var(--ease-standard);
}
.tables-plain-list__item:last-child a { border-bottom: none; }
.tables-plain-list__item a:hover { background: var(--surface-1); }
.tables-plain-list__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.tables-list-empty,
.tables-list-status {
  margin-top: var(--space-16);
  padding: var(--space-24) var(--space-16);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-0);
}
.tables-list-empty a { color: var(--primary); font-weight: var(--fw-semibold); text-decoration: none; }
.tables-list-empty a:hover { text-decoration: underline; }

/* ==================== roles-permissions.css ==================== */
/* =============================================================================
   Roles & Permissions page. Consumes tokens.css + components.css + app-shell.
   Retokenized from the former inline <style>; preserves all roles.js hooks.
   ============================================================================= */

.roles-container { padding: 0; }

.role-block {
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--border);
}
.role-block:last-child { border-bottom: none; }

.role-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-16);
}
.role-name-display {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

.roles-container .section-label {
  font-size: var(--text-lg);
  color: var(--fg-1);
  margin-bottom: var(--space-20);
  font-weight: var(--fw-regular);
}

.rules-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
  margin-bottom: var(--space-20);
}
.rule-item { display: flex; align-items: center; gap: var(--space-8); }
.rule-label { font-size: var(--text-base); color: var(--fg-2); }

.exceptions-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.roles-container .exceptions-header .section-label { margin-bottom: 0; }
.exceptions-list { display: flex; flex-wrap: wrap; gap: var(--space-16); }

/* Roles-page custom dropdown. Scoped to .app-shell so it never leaks onto the
   editor pages (body-workflow), which use their own `.selector` markup. */
.roles-container .selector {
  cursor: pointer;
  position: relative;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-sm);
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
  user-select: none;
}
.roles-container .selector:hover { border-color: var(--primary); background: var(--primary-tint); }
.roles-container .selector-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 140px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12);
  z-index: 100;
  margin-top: var(--space-4);
  padding: var(--space-4);
}
.roles-container .selector.active .selector-dropdown { display: block; }
.roles-container .selector-option {
  padding: var(--space-6) var(--space-10);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--fg-2);
  transition: background var(--dur-fast) var(--ease-standard);
}
.roles-container .selector-option:hover { background: var(--surface-1); color: var(--fg-1); }
.roles-container .selector-arrow { font-size: var(--text-2xs); color: var(--fg-label); }
.roles-container .selector.disabled { cursor: not-allowed; background: var(--surface-1); color: var(--fg-label); }

.pill-add {
  background: var(--primary-tint);
  color: var(--primary);
  border-radius: var(--radius-full);
  padding: var(--space-6) var(--space-14);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: none;
}
.pill-add img { display: block; width: 14px; height: 14px; flex-shrink: 0; }
.pill-add:not(.header-btn) img {
  filter: brightness(0) saturate(100%) invert(34%) sepia(18%) saturate(1400%) hue-rotate(176deg) brightness(92%) contrast(88%);
}
.pill-add:hover { background: var(--primary-tint-2); }
.pill-add.header-btn { background: var(--primary); color: var(--fg-on-accent); padding: var(--space-8) var(--space-14); font-size: var(--text-sm); }
.pill-add.header-btn img { filter: brightness(0) invert(1); }
.pill-add.header-btn:hover { background: var(--primary-hover); }

.btn-save {
  background: var(--primary);
  color: var(--fg-on-accent);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--space-8) var(--space-20);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  margin-top: var(--space-12);
}
.btn-save:hover { background: var(--primary-hover); }

.delete-exception-btn {
  margin-left: var(--space-8);
  cursor: pointer;
  color: var(--fg-label);
  font-size: var(--text-base);
  transition: color var(--dur-fast) var(--ease-standard);
  padding: var(--space-4);
}
.delete-exception-btn:hover { color: var(--danger); }

.roles-container .item-delete { cursor: pointer; opacity: 0.6; transition: opacity var(--dur-fast) var(--ease-standard); }
.roles-container .item-delete:hover { opacity: 1; }

.exception-inline { display: flex; align-items: center; gap: var(--space-6); }
.exception-remove {
  cursor: pointer;
  color: var(--danger);
  font-weight: var(--fw-bold);
  font-size: var(--text-lg);
  padding: 0 var(--space-6);
  opacity: 0.7;
}
.exception-remove:hover { opacity: 1; }

/* ==================== users.css ==================== */
/* =============================================================================
   Users (admin) page. Consumes tokens.css + components.css + app-shell.css.
   Retokenized from the former inline <style>; preserves all JS hooks + the
   fs-table_* markup + the .modal.show / role-inline-select behavior.
   ============================================================================= */

/* Superuser admin sub-nav (shown by JS for is_superuser). */
.admin-header {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-12) var(--space-24);
  margin: 0 0 var(--space-16);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.admin-header h1 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--fg-1); }
.admin-nav { display: flex; gap: var(--space-6); margin-top: var(--space-6); }
.admin-nav a {
  color: var(--fg-2);
  text-decoration: none;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.admin-nav a:hover,
.admin-nav a.active { background: var(--primary-tint); color: var(--primary); }

/* Users table. */
.fs-table_wrapper { padding: 0; }
.fs-table_container {
  margin-top: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  background: var(--surface-0);
}
/* Users-specific buttons. */
.btn-create {
  background: var(--primary);
  color: var(--fg-on-accent);
  padding: var(--space-9) var(--space-16);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}
.btn-create:hover { background: var(--primary-hover); }
.btn-action {
  padding: var(--space-4) var(--space-10);
  margin: 0 var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}
.btn-edit { background: var(--surface-0); color: var(--fg-2); border-color: var(--border); }
.btn-edit:hover { background: var(--surface-1); border-color: var(--border-strong); }
.btn-delete { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.btn-delete:hover { filter: brightness(0.98); }

/* (Modal, form fields, and .btn-primary/.btn-secondary come from the shared
   component layer above - the users page uses .modal.show and content-padded
   modals, both handled by the canonical modal rules.) */

/* Inline role select in the table. */
.role-select-container { display: inline-flex; align-items: center; cursor: pointer; position: relative; min-width: 120px; }
.role-inline-select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: var(--primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-12);
  outline: none;
  max-width: 150px;
  text-overflow: ellipsis;
}
.role-inline-select:hover { text-decoration: underline; }
.role-select-chevron { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 8px; color: var(--fg-label); }

/* ==================== workflows.css ==================== */
/* =============================================================================
   Workflows page - workflow stat cards. Styles the classes workflows-page.js
   emits (.workflow-*), retokenized. Consumes tokens + components + compat.
   ============================================================================= */

.dashboard-section { width: 100%; min-width: 0; box-sizing: border-box; }
.workflow-list { padding: 0; }

/* ---- Card ------------------------------------------------------------- */
.workflow-card {
  gap: var(--space-12);
  width: 340px;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--space-20);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.workflow-card .workflow-header {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}
.workflow-card a.workflow-header { text-decoration: none; color: inherit; }
.workflow-card .workflow-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--fg-1);
}

/* ---- Period tabs (All / 90 / 30 / 7 / Today) -------------------------- */
.workflow-period-tabs { gap: var(--space-16); align-items: center; flex-wrap: wrap; }
.period-tab, .text-link {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.period-tab:hover { color: var(--fg-1); }
.period-tab.active { color: var(--primary); font-weight: var(--fw-semibold); }

.workflow-card-period-rule { width: 100%; box-sizing: border-box; }
.workflow-card-busy-gif { margin: var(--space-16) 0; width: 100%; overflow: hidden; }
.workflow-card-busy-gif-img { display: block; width: 100%; height: auto; max-height: 40px; object-fit: contain; }

/* ---- Status counts table ---------------------------------------------- */
.workflow-status-table { width: 100%; }
.workflow-status-table_instance { width: 100%; overflow-x: auto; }
.workflow-status-table_table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.workflow-status-table_row { border-bottom: 1px solid var(--border-faint); }
.workflow-status-table_row:last-child { border-bottom: none; }
.workflow-status-table_cell-column {
  padding: var(--space-6) var(--space-8) var(--space-6) 0;
  text-align: left;
  color: var(--fg-3);
  white-space: nowrap;
}
.workflow-status-table_cell {
  padding: var(--space-6) var(--space-8);
  text-align: center;
  color: var(--fg-2);
  white-space: nowrap;
}
.workflow-status-table .status { align-items: center; gap: var(--space-6); justify-content: center; }

/* ---- Total ------------------------------------------------------------ */
.workflow-card-total { justify-content: space-between; align-items: center; width: 100%; }
.workflow-card-total .text._20 { color: var(--fg-2); font-weight: var(--fw-semibold); }
.workflow-card-total-text { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--fg-1); }

/* ==================== widgets.css ==================== */
/* =============================================================================
   Widget settings pages (Manager, Intake, Form, Tasks, HIL). Styles the
   .incoming-* / .tasks-* / .widget-* / .required-fields-* families these pages'
   settings JS emits. Consumes tokens + components + compat; retokenized from the
   former css/widget.css (font -> var(--font-body); brand tints -> var(--primary-tint*)).
   ============================================================================= */
.incoming-toolbar {
  justify-content: space-between;
  align-items: center;
  max-width: 1920px;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
  padding-top: 24px;
}

.incoming-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.incoming-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fg-1);
  margin: 24px 0 12px;
}

.incoming-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.incoming-select {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  min-width: 200px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-0);
  cursor: pointer;
}

.tasks-settings-grid .incoming-select {
  min-width: 0;
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  display: inline-block;
}

.incoming-select.is-compact {
  min-width: 0;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  display: inline-block;
}

.tasks-chip-trash {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  cursor: pointer;
}

.tasks-chip-trash:hover {
  opacity: 1;
}

.incoming-select:focus {
  outline: none;
  border-color: var(--primary);
}

.incoming-body {
  max-width: 720px;
}

.incoming-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  width: 100%;
  padding-right: 32px;
}

.incoming-col {
  min-width: 0;
}

.incoming-columns .incoming-body {
  max-width: none;
}

.incoming-section-divider {
  margin: 16px 0;
}

.incoming-section-header-row {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  gap: 12px;
  margin: 24px 0 12px;
}

.widget-section-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  padding: 25px 0;
  cursor: pointer;
  opacity: 0.55;
  flex: 0 0 auto;
}

.widget-section-edit-btn:hover {
  opacity: 1;
}

.widget-section-edit-btn img {
  display: block;
}

@media (max-width: 1100px) {
  .incoming-columns {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-right: 0;
  }
}

.incoming-add-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 12px;
  border: 1px solid var(--primary);
  border-radius: 20px;
  background: transparent;
  transition: background 0.15s;
}

.incoming-add-btn:hover {
  background: var(--primary-tint);
}

.incoming-remove-btn {
  width: 20px;
  height: 20px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.incoming-remove-btn:hover {
  opacity: 1;
}

.widget-incoming-page .incoming-remove-btn {
  opacity: 1;
}

.incoming-tag-input {
  padding: 10px 12px;
  font-size: 14px;
  min-height: 40px;
}

.incoming-tag-add {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: var(--surface-0);
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.incoming-tag-add:hover {
  opacity: 0.92;
}

.incoming-tag-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.incoming-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-0);
  font-size: 13px;
  color: var(--fg-1);
}

.incoming-tag-trash {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  cursor: pointer;
}

.incoming-tag-trash:hover {
  opacity: 1;
}

.widget-form-preview-label {
  margin: 16px 0 8px;
  color: var(--fg-1);
}

.widget-form-sorting-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.widget-form-sort-fields {
  gap: 8px;
}

.widget-form-sort-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.widget-form-sort-row .incoming-select {
  flex: 1;
}

.widget-form-sort-remove,
.automation-remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.4;
  flex-shrink: 0;
  padding: 0;
}

.widget-form-sort-remove:hover,
.automation-remove-btn:hover {
  opacity: 1;
}


.tasks-settings-grid {
  display: flex;
  gap: 48px;
  max-width: none;
  width: 100%;
  align-items: flex-start;
}

.tasks-settings-grid { padding-bottom: 48px; }

.widget-manager-page {
  max-width: 760px;
  padding-bottom: 48px;
}

.widget-manager-section {
  width: 100%;
}

.widget-manager-role-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 16px;
}

.widget-manager-group {
  margin: 18px 0 22px;
  cursor: default;
}

.widget-manager-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.widget-manager-group-title {
  font-weight: 600;
}

.widget-manager-create-row {
  gap: 10px;
  margin-top: 14px;
  margin-bottom: 18px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.widget-manager-add-btn {
  margin-left: 0;
}

.widget-manager-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.widget-manager-handle {
  width: 12px;
  height: 12px;
  position: relative;
  opacity: 0.45;
  flex: 0 0 auto;
  cursor: grab;
}

.widget-manager-handle::before,
.widget-manager-handle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 12px;
  height: 1.5px;
  background: var(--fg-muted);
  border-radius: 999px;
}

.widget-manager-handle::before {
  top: 4px;
}

.widget-manager-handle::after {
  top: 8px;
}

.widget-manager-item-link {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.widget-manager-item-link:hover {
  color: var(--fg-1);
}

.tasks-settings-left {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: 50%;
}

.tasks-settings-right {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  width: 50%;
}

@media (max-width: 800px) {
  .tasks-settings-grid {
    flex-direction: column;
  }
}

.tasks-field-label {
  min-width: 70px;
  color: var(--fg-1);
}

.tasks-card-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  align-items: start;
  width: 100%;
}

.tasks-card-fields-grid .tasks-card-field-cell {
  margin-bottom: 12px;
  min-width: 0;
}

.tasks-card-fields-grid .tasks-card-field-cell .incoming-select {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 700px) {
  .tasks-card-fields-grid {
    grid-template-columns: 1fr;
  }
}

.tasks-auto-label {
  margin: 16px 0 8px;
  font-weight: 500;
  color: var(--fg-1);
}

.tasks-auto-header-row {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 8px;
}

.tasks-auto-header-row .tasks-auto-label {
  margin: 0;
}

.tasks-columns-input-row {
  gap: 8px;
}

.tasks-column-input {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  min-width: 200px;
  max-width: 400px;
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-0);
}

.tasks-column-input:focus {
  outline: none;
  border-color: var(--primary);
}

.tasks-column-input::placeholder {
  color: var(--fg-label);
}

.tasks-add-column-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;
}

.tasks-add-column-btn:hover {
  background: var(--primary-tint);
}

.tasks-columns-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.tasks-column-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-0);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
}

.tasks-column-chip-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-column-chip-close {
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--fg-label);
  transition: color 0.15s;
}

.tasks-column-chip-close:hover {
  color: var(--fg-1);
}

/* Properties-to-display checklist (Billables / Payables Tables widgets) */
.tasks-props-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
  max-width: 480px;
}

.tasks-prop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
}

.tasks-prop-row[data-checked="false"] {
  opacity: 0.55;
}

.tasks-prop-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  cursor: pointer;
}

.tasks-prop-row .tasks-prop-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-prop-row .tasks-prop-moves {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}

.tasks-prop-move {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-0);
  width: 24px;
  height: 24px;
  line-height: 1;
  font-size: 13px;
  color: var(--fg-1);
  transition: background 0.15s, color 0.15s;
}

.tasks-prop-move:hover:not(:disabled) {
  background: var(--surface-0);
}

.tasks-prop-move:disabled {
  cursor: default;
  color: var(--border);
}

.required-fields-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.required-fields-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.required-fields-input-wrap {
  position: relative;
}

.required-fields-search {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-0);
  box-sizing: border-box;
}

.required-fields-search:focus {
  outline: none;
  border-color: var(--primary);
}

.required-fields-search::placeholder {
  color: var(--fg-label);
}

.required-fields-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
  padding: 4px 0;
}

.required-fields-dropdown[hidden] {
  display: none;
}

.required-fields-option {
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
  cursor: pointer;
}

.required-fields-option:hover,
.required-fields-option.is-active {
  background: var(--primary-tint);
  color: var(--primary);
}

.required-fields-option-empty {
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-label);
  font-style: italic;
}

.automation-row .incoming-select,
.tasks-automation-row .incoming-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
}

.automation-extra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.tasks-settings-right .automation-row,
.tasks-settings-right .tasks-automation-row {
  margin-top: 10px;
  margin-bottom: 10px;
}

.tasks-openview-sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.tasks-openview-section {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface-0);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasks-openview-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tasks-openview-section-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  padding: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
  user-select: none;
}

.tasks-openview-section-handle:hover {
  opacity: 1;
}

.tasks-openview-section.is-dragging {
  opacity: 0.5;
}

.tasks-openview-section.drop-before {
  box-shadow: 0 -2px 0 0 var(--primary);
}

.tasks-openview-section.drop-after {
  box-shadow: 0 2px 0 0 var(--primary);
}

.tasks-openview-field-chip[draggable="true"] {
  cursor: grab;
}

.tasks-openview-field-chip.is-dragging {
  opacity: 0.5;
}

.tasks-openview-field-chip.drop-before {
  box-shadow: -2px 0 0 0 var(--primary);
}

.tasks-openview-field-chip.drop-after {
  box-shadow: 2px 0 0 0 var(--primary);
}

.tasks-openview-show-other-row {
  justify-content: space-between;
}

.tasks-openview-section-name {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-1);
  padding: 4px 0;
  outline: none;
}

.tasks-openview-section-name:focus {
  border-bottom: 1px solid var(--primary);
}

.tasks-openview-section-delete {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.tasks-openview-section-delete:hover {
  opacity: 1;
}

.tasks-openview-section-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.tasks-openview-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.tasks-openview-field-row[draggable="true"] {
  cursor: grab;
}

.tasks-openview-field-row.is-dragging {
  opacity: 0.5;
}

.tasks-openview-field-row.drop-before {
  box-shadow: 0 -2px 0 0 var(--primary);
}

.tasks-openview-field-row.drop-after {
  box-shadow: 0 2px 0 0 var(--primary);
}

.tasks-openview-field-handle {
  cursor: grab;
  opacity: 0.5;
  display: inline-flex;
  align-items: center;
}

.tasks-openview-field-handle:hover {
  opacity: 1;
}

.tasks-openview-field-name {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks-openview-field-label-input {
  flex: 0 0 200px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
  background: var(--surface-1);
  outline: none;
}

.tasks-openview-field-label-input:focus {
  background: var(--surface-0);
  border-color: var(--primary);
}

.tasks-openview-field-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--fg-muted);
  padding: 4px 8px;
}

.tasks-openview-field-remove:hover {
  color: var(--fg-1);
}

.tasks-openview-add-field {
  align-self: flex-start;
  padding: 4px 12px;
  font-size: 13px;
}

.tasks-openview-field-picker {
  min-width: 180px;
}

.tasks-widgets-row {
  flex-wrap: wrap;
  gap: 16px !important;
}

.tasks-widgets-row .incoming-select.is-compact {
  min-width: 140px;
}

.hil-linked-record-badge {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-1);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  margin-left: 12px;
}

.widget-manager-handle:active {
  cursor: grabbing;
}

.widget-manager-item-row.is-dragging {
  opacity: 0.4;
}

.widget-manager-drop-indicator {
  height: 2px;
  background: var(--primary);
  margin: 4px 0;
  border-radius: 2px;
  /* Without this, the indicator absorbs pointermove events while a drag is in
     flight, the underlying row's `dragover` listener never fires, no listener
     calls preventDefault, and the browser snaps the row back to its original
     position on release. */
  pointer-events: none;
}

.widget-manager-group-title-input {
  height: 28px;
  padding: 2px 6px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-0);
}

.widget-manager-group-header img[role="button"] {
  cursor: pointer;
}

.widget-manager-add-page {
  margin-top: 8px;
}

.widget-manager-add-page-row {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.widget-manager-empty-note {
  color: var(--fg-2);
  font-style: italic;
  font-size: 13px;
  margin: 8px 0 0 22px;
}

.widget-manager-group-handle {
  width: 14px;
  height: 14px;
  position: relative;
  opacity: 0.45;
  cursor: grab;
  flex: 0 0 auto;
}

.widget-manager-group-handle::before,
.widget-manager-group-handle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: var(--fg-muted);
  border-radius: 999px;
}

.widget-manager-group-handle::before { top: 4px; }
.widget-manager-group-handle::after  { top: 9px; }

.widget-manager-group-handle:active {
  cursor: grabbing;
}

.widget-manager-group.is-dragging {
  opacity: 0.45;
}

.widget-manager-drop-indicator.is-page {
  height: 3px;
  margin: 8px 0;
}

.widget-manager-item-row.is-readonly {
  opacity: 0.65;
}

.widget-manager-item-row.is-readonly .switch,
.widget-manager-item-row.is-readonly .widget-manager-handle,
.widget-manager-group-header .is-disabled,
.widget-manager-add-btn.is-disabled,
.widget-manager-add-btn[disabled] {
  pointer-events: none;
  opacity: 0.45;
}

.widget-manager-item-link.is-missing {
  color: var(--danger-solid);
  text-decoration: line-through;
}

/* ==================== widget + variables extras ==================== */
/* =============================================================================
   Page extras ported from the former custom.css, retokenized:
   - .contact-clients-badge (widget-incoming), .tasks-childlink-* (widget-tasks)
   - .variables-* / .btn-delete-var (workflow-variables; base table + .btn-create
     come from the tables/users sections above)
   ============================================================================= */
/* ==========================================================================
   GROUP A — Widget-page extras
   Classes not carried in css/widget.css.
   - .contact-clients-badge        -> widget-incoming
   - .tasks-childlink-* family     -> widget-tasks (drag-reorder child links)
   Ported from css/custom.css, retokenized off legacy-bridge.css.
   ========================================================================== */

.contact-clients-badge {
  display: none;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  align-self: center;
}

.tasks-childlink-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--surface-canvas);
  border-radius: 8px;
}

.tasks-childlink-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--surface-canvas);
}

.tasks-childlink-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--surface-1);
}

.tasks-childlink-section[draggable="true"] {
  cursor: grab;
}

.tasks-childlink-section.is-dragging {
  opacity: 0.5;
}

.tasks-childlink-section.drop-before {
  box-shadow: 0 -2px 0 0 var(--primary);
}

.tasks-childlink-section.drop-after {
  box-shadow: 0 2px 0 0 var(--primary);
}

.tasks-childlink-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tasks-childlink-section-handle,
.tasks-childlink-field-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  padding: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
  user-select: none;
}

.tasks-childlink-section-handle:hover,
.tasks-childlink-field-handle:hover {
  opacity: 1;
}

.tasks-childlink-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tasks-childlink-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tasks-childlink-field-row[draggable="true"] {
  cursor: grab;
}

.tasks-childlink-field-row.is-dragging {
  opacity: 0.5;
}

.tasks-childlink-field-row.drop-before {
  box-shadow: 0 -2px 0 0 var(--primary);
}

.tasks-childlink-field-row.drop-after {
  box-shadow: 0 2px 0 0 var(--primary);
}

/* ==========================================================================
   GROUP B — Workflow-variables page
   Variables-specific additions only. Base table rules (.fs-table_*,
   .fs-table_wrapper, .fs-table_container) and .btn-create live in app.css;
   the legacy .header-workflow/.body-workflow shell is replaced by app-shell.
   Ported from css/custom.css, retokenized off legacy-bridge.css.
   ========================================================================== */

.variables-page .variables-heading {
  font-size: 32px;
  margin-top: 0;
  margin-bottom: 16px;
}

.variables-page .variables-create-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
}

.variables-page .variables-create-row input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  min-width: 200px;
}

.variables-page .btn-delete-var {
  background-color: transparent;
  color: var(--fg-2);
  border: none;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.variables-page .btn-delete-var:hover {
  color: var(--fg-1);
}

.variables-page .btn-delete-var img {
  width: 18px;
  height: 18px;
  display: block;
  filter: brightness(0) saturate(100%) invert(40%);
}

.variables-page .fs-table_body tr .btn-delete-var {
  opacity: 0;
}

.variables-page .fs-table_body tr:hover .btn-delete-var {
  opacity: 1;
}

.variables-page .variables-table .fs-table_cell--action {
  width: 48px;
  text-align: right;
}

.variables-page .variables-table .fs-table_header--action {
  width: 48px;
}

/* ==================== workflow-execution.css ==================== */
/* =============================================================================
   Workflow execution / run viewer. Ported from the former custom.css
   (.workflow-exec rules) + the page's inline <style>, retokenized. The legacy
   .body-home/.header-* shell is replaced by the app-shell; .workflow-name-badge
   moves into the topbar.
   ============================================================================= */
/* ---- Page shell -------------------------------------------------------- */
.main-layout {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  background: transparent !important;
}

.main-content {
  background: var(--surface-0) !important;
  border: 1px solid var(--border);
  border-radius: 24px;
  margin: 24px 32px;
  padding: 32px;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}

.section-title {
  font-size: 20px;
  color: var(--fg-1) !important;
  margin-bottom: 20px;
}

/* Moves into the app-shell topbar */
.workflow-name-badge {
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 6px 12px;
  border-radius: 8px;
}

/* ---- Execution info panel (#executionInfo, inline-styled children) ----- */
#executionInfo {
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}

#executionInfo div[style*="color: #94a3b8"] {
  color: var(--fg-muted) !important;
}

#executionInfo div[style*="color: #e2e8f0"] {
  color: var(--fg-1) !important;
}

#executionInfo span[style*="color: #60a5fa"] {
  color: var(--primary) !important;
}

/* ---- Execution controls ------------------------------------------------ */
.execution-controls {
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 20px;
  margin-bottom: 24px;
}

.execution-controls-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 768px) {
  .execution-controls-grid {
    grid-template-columns: 1fr;
  }
}

.execution-controls .btn {
  width: auto;
  min-width: 140px;
}

.execution-controls label {
  display: block;
  color: var(--fg-2) !important;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.execution-controls textarea {
  width: 100%;
  padding: 12px;
  background: var(--surface-0) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-1) !important;
  border-radius: 12px !important;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
}

.execution-controls textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
}

/* ---- Simple / Dev view toggle ----------------------------------------- */
.view-toggle {
  display: flex;
  gap: 8px;
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 4px;
  margin-bottom: 20px;
}

.view-toggle-btn {
  flex: 1;
  padding: 10px 20px;
  background: transparent;
  border: none;
  color: var(--fg-2) !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s;
}

.view-toggle-btn.active {
  background: var(--primary) !important;
  color: var(--fg-on-accent) !important;
}

.view-toggle-btn:hover:not(.active) {
  background: var(--border) !important;
  color: var(--fg-1) !important;
}

.simple-view {
  display: none;
}

.simple-view.active {
  display: block;
}

.dev-view {
  display: none;
}

.dev-view.active {
  display: block;
}

/* ---- Execution status bar --------------------------------------------- */
.execution-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  margin-bottom: 24px;
}

.execution-status div[style*="color: #e2e8f0"] {
  color: var(--fg-1) !important;
}

.execution-status div[style*="color: #94a3b8"] {
  color: var(--fg-muted) !important;
}

/* status icon (execution variant) + running/success/failed/waiting */
.run-viewer .status-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.run-viewer .status-icon.running {
  background: var(--primary);
  animation: node-pulse 1.5s ease-in-out infinite;
}

.run-viewer .status-icon.success {
  background: var(--success-solid);
}

.run-viewer .status-icon.failed {
  background: var(--danger-solid);
}

.run-viewer .status-icon.waiting {
  background: var(--primary);
}

/* ---- Simple view: step list ------------------------------------------- */
.simple-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  min-height: calc(100vh - 480px);
}

.simple-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface-0) !important;
  border: 2px solid var(--border) !important;
  border-radius: 14px !important;
  transition: all 0.3s;
}

.simple-list-item.pending {
  opacity: 0.6;
  border-color: var(--border-strong) !important;
}

.simple-list-item.active {
  border-color: var(--primary) !important;
  background: var(--primary-tint) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.simple-list-item.completed {
  border-color: var(--success-solid) !important;
  background: var(--success-bg) !important;
}

.simple-list-item.failed {
  border-color: var(--danger-solid) !important;
  background: var(--danger-bg) !important;
}

.simple-list-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--border) !important;
  flex-shrink: 0;
  transition: all 0.3s;
}

.simple-list-item.pending .simple-list-icon {
  background: var(--border-strong) !important;
}

.simple-list-item.active .simple-list-icon {
  background: var(--primary) !important;
  animation: node-pulse 2s ease-in-out infinite;
}

.simple-list-item.completed .simple-list-icon {
  background: var(--success-solid) !important;
}

.simple-list-item.failed .simple-list-icon {
  background: var(--danger-solid) !important;
}

.simple-list-content {
  flex: 1;
}

.simple-list-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-1) !important;
  margin-bottom: 6px;
}

.simple-list-status {
  font-size: 13px;
  color: var(--fg-muted) !important;
}

.simple-list-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-2) !important;
  background: var(--surface-canvas) !important;
  padding: 6px 12px;
  border-radius: 6px;
}

/* ---- Dev view: DAG node flow ------------------------------------------ */
.node-flow {
  position: relative;
  height: calc(100vh - 480px);
  min-height: 600px;
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: auto;
}

/* structural positioning container inside .node-flow (no legacy tokens) */
.dag-canvas {
  position: relative;
  min-height: 100%;
  width: fit-content;
  min-width: 100%;
}

.node-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-0) !important;
  border: 2px solid var(--border) !important;
  border-radius: 14px !important;
  transition: all 0.3s;
  cursor: pointer;
  z-index: 10;
  box-sizing: border-box;
}

.node-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
}

.node-item.pending {
  opacity: 0.5;
  border-color: var(--border-strong) !important;
}

.node-item.active {
  border-color: var(--primary) !important;
  background: var(--primary-tint) !important;
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  animation: node-pulse 2s ease-in-out infinite;
}

.node-item.completed {
  border-color: var(--success-solid) !important;
  background: var(--success-bg);
}

.node-item.failed {
  border-color: var(--danger-solid) !important;
  background: var(--danger-bg);
}

.node-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  background: var(--border) !important;
  transition: all 0.3s;
}

.node-item.active .node-icon {
  background: var(--primary) !important;
  animation: node-spin 2s linear infinite;
}

.node-item.completed .node-icon {
  background: var(--success-solid) !important;
}

.node-item.failed .node-icon {
  background: var(--danger-solid) !important;
}

.node-info {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.node-name {
  font-weight: 600;
  color: var(--fg-1) !important;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.node-status {
  font-size: 12px;
  color: var(--fg-muted) !important;
  white-space: nowrap;
}

/* ---- Node I/O boxes ---------------------------------------------------- */
.node-io-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .node-io-container {
    grid-template-columns: 1fr;
  }
}

.node-io-box {
  background: var(--surface-0) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px;
}

.node-io-box h5 {
  color: var(--fg-muted) !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.node-io-content {
  color: var(--fg-1) !important;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.node-io-empty {
  color: var(--fg-muted);
  font-style: italic;
  font-size: 12px;
}

/* ---- Status badges ----------------------------------------------------- */
.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.pending {
  background: var(--border-strong) !important;
  color: var(--fg-1) !important;
}

.status-badge.running {
  background: var(--primary) !important;
  color: var(--fg-on-accent) !important;
}

.status-badge.success {
  background: var(--success-solid) !important;
  color: var(--fg-on-accent) !important;
}

.status-badge.failed {
  background: var(--danger-solid) !important;
  color: var(--fg-on-accent) !important;
}

.status-badge.waiting {
  background: var(--primary) !important;
  color: var(--fg-on-accent) !important;
}

.status-badge.waiting_for_human {
  background: var(--warning-solid) !important;
  color: var(--fg-on-accent) !important;
}

/* ---- Result box (JSON output) ------------------------------------------ */
.result-box {
  background: var(--surface-canvas) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 16px;
  margin-top: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.result-box pre {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--fg-muted);
}

.result-box div[style*="background: #0f172a"] {
  background: var(--surface-0) !important;
  border: 1px solid var(--border) !important;
}

.result-box span[style*="color: #e2e8f0"] {
  color: var(--fg-1) !important;
}

.result-box span[style*="color: #60a5fa"] {
  color: var(--primary) !important;
}

.result-box span[style*="color: #94a3b8"] {
  color: var(--fg-muted) !important;
}

/* ---- Human-approval section -------------------------------------------- */
.approval-section {
  background: var(--primary-tint) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 20px !important;
  padding: 20px;
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
}

.approval-section h3 {
  color: var(--fg-1) !important;
  margin-bottom: 16px;
}

.approval-section p {
  color: var(--fg-muted) !important;
}

.approval-section input,
.approval-section textarea {
  box-sizing: border-box;
  max-width: 100%;
  background: var(--surface-0) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-1) !important;
  border-radius: 10px !important;
}

.approval-section input:focus,
.approval-section textarea:focus {
  border-color: var(--primary) !important;
}

.approval-section label {
  color: var(--fg-muted) !important;
}

.approval-section span[style*="color: #1e293b"] {
  color: var(--fg-1) !important;
}

.approval-section span[style*="color: #60a5fa"] {
  color: var(--primary) !important;
}

.approval-section span[style*="color: #94a3b8"],
.approval-section div[style*="color: #94a3b8"] {
  color: var(--fg-muted) !important;
}

.approval-section div[style*="background: rgba(59, 130, 246, 0.05)"] {
  background: var(--surface-0) !important;
  border-color: var(--primary) !important;
}

.approval-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.approval-actions .btn {
  flex: 1;
}

/* ---- Success button variant (app.css has no .btn-success) --------------- */
.btn-success {
  background: var(--success-solid) !important;
  color: var(--fg-on-accent);
}

/* ---- Keyframes (referenced by active/running states) ------------------- */
@keyframes node-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }

  50% {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
  }
}

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

/* ==================== workflow/agent editor.css ==================== */
/* =============================================================================
   Node editors (workflow-config, agent-config): stack/item canvas, add-node
   picker, item-edit property panel, node I/O panels, .ms-* multiselect, editor
   state classes. Ported from the former custom.css/eko, retokenized. Consumes
   tokens + components + compat; shared primitives (modals, forms, buttons,
   pills, switch) are NOT redefined here.
   ============================================================================= */

/* =============================================================================
   SHARED — Stacks (columns)
   ============================================================================= */

.stack-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  padding: 16px 32px;
  overflow: scroll;
}

.stack {
  border: 1px solid var(--border);
  background-color: var(--surface-0);
  border-radius: 24px;
  justify-content: flex-start;
  align-items: center;
  min-width: 320px;
  max-width: 320px;
  overflow: visible;
}

.stack.drag-over {
  border-color: var(--primary);
  background: var(--primary-tint);
}

.stack-header {
  z-index: 2;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  justify-content: space-between;
  align-items: center;
  width: 318px;
  min-width: 318px;
  max-width: 318px;
  padding: 16px 38px 8px 16px;
  display: flex;
}

.stack-header-r-group {
  min-width: 24px;
  max-width: 48px;
}

.stack-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
  width: 100%;
  overflow: hidden;
}

.stack-name.editable {
  cursor: text;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 6px;
}

.stack-name.editable:hover {
  background: var(--surface-canvas);
}

.stack-footer {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 8px;
  padding-left: 32px;
  padding-right: 32px;
}


/* =============================================================================
   SHARED — Stack dropdown (the per-column ⋮ menu)
   NOTE: merged the eko 32px-box sizing with custom.css's position:relative,
   since both applied in the legacy cascade.
   ============================================================================= */

.stack-dropdown {
  position: relative;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
}

.stack-dropdown .dropdown-list,
.stack-dropdown .header-dropdown-list,
.stack-dropdown .w-dropdown-list {
  display: none;
  z-index: 25;
  left: 0;
  right: auto;
}

.stack-dropdown:hover .dropdown-list,
.stack-dropdown:hover .header-dropdown-list,
.stack-dropdown:hover .w-dropdown-list,
.stack-dropdown .dropdown-list.w--open,
.stack-dropdown .header-dropdown-list.w--open,
.stack-dropdown .w-dropdown-list.w--open {
  display: block;
}

.stack-dropdown-toggle {
  position: relative;
  cursor: pointer;
  background-image: url('../images/dots-vertical.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border-radius: 12px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
}

.stack-dropdown-toggle:hover {
  background-color: var(--surface-canvas);
  border-radius: 12px;
}

.stack-dropdown-toggle:active {
  background-color: var(--surface-0);
}

.stack-dropdown-toggle:focus {
  background-color: var(--surface-canvas);
}

/* Dropdown menu items (icons + hover); scoped to this menu, not in app.css. */
.stack-dropdown-item {
  cursor: pointer;
  background-image: url('../images/plus.svg');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 8px 32px 8px 12px;
}

.stack-dropdown-item:hover {
  color: var(--fg-label);
}

.stack-dropdown-item:active {
  color: var(--fg-1);
}

.stack-dropdown-item:focus {
  color: var(--fg-label);
}

.stack-dropdown-item.add-action,
.stack-dropdown-item.add-stack {
  background-image: url('../images/plus.svg');
}

.stack-dropdown-item.delete-column {
  background-image: url('../images/trash_1.svg');
}

.stack-dropdown-item.rename-stack {
  background-image: url('../images/pencil.svg');
}


/* =============================================================================
   SHARED — Items list & item cards (nodes)
   ============================================================================= */

.items-list {
  max-height: 80svh;
  padding-left: 10px;
  padding-right: 10px;
  overflow: scroll;
}

.items-list a.item {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.item {
  border: 1px solid var(--border);
  background-color: var(--surface-0);
  cursor: pointer;
  border-radius: 24px;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  height: 78px;
  min-height: 78px;
  margin-top: 4px;
  margin-bottom: 8px;
  padding: 16px;
}

.item:hover {
  border-color: var(--surface-0);
  box-shadow: 0 0 5px #0000001a;
}

.item:active {
  box-shadow: none;
}

.item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.item.drag-placeholder {
  background: var(--primary-tint);
  border: 2px dashed var(--primary);
  height: 60px;
  margin-bottom: 8px;
}

.item-image {
  border-radius: 10px;
  width: 44px;
  max-width: 44px;
  height: 44px;
  max-height: 44px;
}

/* Right-side group holding the delete icon inside an item. */
.item-r-group {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  min-width: 24px;
  max-width: 48px;
}

.item-text-status {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-left: 12px;
  display: flex;
  overflow: hidden;
}

.item-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--fg-1);
}

.item-type {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

.item-status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
  gap: 6px;
}

.item-status-row .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.item-status-row .text._14 {
  font-size: 12px;
  color: var(--fg-muted);
}

.item .item-delete {
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}

.item:hover .item-delete {
  opacity: 1;
}

.item .item-delete:hover {
  opacity: 0.7;
}


/* =============================================================================
   SHARED — Inline editable, empty state, icons, generic buttons
   ============================================================================= */

.inline-editable {
  cursor: text;
  border-radius: 8px;
}

.inline-editable:hover {
  background: rgba(0, 0, 0, 0.04);
}

.empty-items {
  text-align: center;
  padding: 24px;
  color: var(--fg-label);
  font-size: 13px;
}

.svg-icon {
  color: var(--border-strong);
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  display: block;
}

.svg-icon:hover {
  cursor: pointer;
}

.svg-icon._24 {
  padding: 4px;
}

.header-workflow-left-group .svg-icon {
  cursor: pointer;
}

.header-workflow-left-group .svg-icon:hover {
  color: var(--primary);
}

.button-icon {
  background-color: transparent;
  cursor: pointer;
  border-radius: 10px;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  padding: 4px;
}

.button-icon:hover {
  background-color: var(--surface-0);
  opacity: .8;
}

.header-workflow-left {
  cursor: pointer;
}

.header-workflow-left:hover .button-icon {
  opacity: 0.7;
}


/* =============================================================================
   WORKFLOW-CONFIG ONLY — Add-node type picker + workflow badge
   NOTE: the per-node-type icon tint (.agent-type-icon-lg.agent / .input-io /
   .human / …) has no CSS rule anywhere in the legacy stack — those node icons
   are colored by the SVG assets themselves, so there is nothing to port.
   ============================================================================= */

.agent-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.agent-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  background: var(--surface-canvas);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.agent-type-option:hover {
  border-color: var(--primary);
  background: var(--surface-1);
}

.agent-type-option.selected {
  border-color: var(--primary);
  background: var(--primary-tint);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.agent-type-icon-lg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 6px;
}

.agent-type-icon-lg img {
  border-radius: 10px;
}

.agent-type-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-1);
  margin-bottom: 2px;
}

.agent-type-desc {
  font-size: 10px;
  color: var(--fg-muted);
  line-height: 1.2;
}

.workflow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--primary-tint);
  border-radius: 20px;
  font-size: 12px;
  color: var(--primary);
  margin-left: 12px;
}


/* =============================================================================
   AGENT-CONFIG — Node editor overlay & card
   ============================================================================= */

.item-edit {
  z-index: 3;
  background-color: var(--surface-0);
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1920px;
  display: flex;
  position: absolute;
  inset: 0%;
}

.item-edit.active {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 16px;
  overflow-y: auto;
  box-sizing: border-box;
}

.item-edit.active.io-visible {
  flex-wrap: nowrap;
  justify-content: center;
}

.item-edit.active.io-visible #inputDataPanel { order: 1; }
.item-edit.active.io-visible .item-edit-card { order: 2; }
.item-edit.active.io-visible #outputDataPanel { order: 3; }

.item-edit .close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 101;
}

.item-edit-card {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--border);
  background-color: var(--surface-0);
  border-radius: 40px;
  justify-content: flex-start;
  align-items: flex-start;
  min-width: 420px;
  max-width: 40%;
  min-height: 20svh;
  max-height: 90svh;
  margin: 10px;
  padding: 32px;
  overflow: scroll;
  box-shadow: 0 0 10px #0000001a;
}

.item-edit .item-edit-card {
  flex: 0 1 auto;
  width: auto;
  min-width: min(420px, 100%);
  max-width: 40%;
  min-height: 20svh;
  max-height: 90svh;
  margin: 10px;
  overflow: auto;
  box-sizing: border-box;
}

.item-edit .item-edit-card textarea {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--fg-1);
  line-height: 1.5;
  font-family: var(--font-body);
  font-size: 14px;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  resize: vertical;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.item-edit .item-edit-card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-tint);
  background: transparent;
}

.item-edit .item-edit-card .item-edit-class textarea {
  min-height: 50px;
}

/* Header row: name (left) + status (right) */
.item-edit-header {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.item-edit-header-name-v {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  width: 100%;
  max-width: 65%;
}

.item-edit-header-status-v {
  min-width: 24px;
  max-width: 24px;
  min-height: 24px;
}

.item-edit-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  font-size: 16px;
  overflow: hidden;
}

.item-edit-avatar-image {
  border-radius: 10px;
  width: 44px;
  height: 44px;
}

.item-edit-card .item-edit-header .status {
  opacity: 0.3;
  transition: opacity 0.2s;
}

.item-edit-card .item-edit-header .status.active-status {
  opacity: 1;
}

.item-edit-card .item-edit-header .item-edit-status-row .status {
  opacity: 1;
}

.item-edit-status-row {
  margin-top: 4px;
}

.item-edit-card .workflow-status-alert,
.item-edit-card .workflow-status-error {
  display: none;
}

.item-edit-card .workflow-status-alert.visible,
.item-edit-card .workflow-status-error.visible {
  display: block;
}

/* Prompt text (editable heading + body) */
.item-edit-prompt-text {
  cursor: pointer;
  height: 100%;
  min-height: 24px;
  font-size: 14px;
  overflow: scroll;
}

.item-edit-prompt-text.editable {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-1);
}

.item-edit-prompt-text.editable:focus {
  outline: none;
}

input.item-edit-prompt-text.editable {
  padding: 4px 0;
  font-weight: 500;
  flex: 1;
}

textarea.item-edit-prompt-text.editable {
  cursor: text;
}

.item-edit-footer {
  justify-content: space-between;
  width: 100%;
}


/* =============================================================================
   AGENT-CONFIG — Source/target references & I/O connection lists
   ============================================================================= */

.item-edit-reference {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 44px;
  max-height: 160px;
  overflow: scroll;
}

.item-edit-source-block {
  width: 100%;
}

.item-edit-i-o {
  justify-content: space-between;
  width: 100%;
}

.item-edit-i-o-group {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: wrap;
  width: 100%;
}

.item-edit-i-o-row {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.item-edit-i-o-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: stretch;
  width: 100%;
  min-height: 32px;
  max-height: 100px;
  overflow: scroll;
}

.item-edit-i-o-list-item {
  max-width: 100%;
}

.item-edit-i-o-remove {
  cursor: pointer;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
}

.item-edit-from-to-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 3px;
  padding-top: 2px;
  font-size: 14px;
  line-height: 16px;
  overflow: hidden;
}

.item-edit-description-v {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  width: 100%;
}

/* Reference "pill" wrapping overrides, scoped to the editor card. */
.item-edit .pill.tertiary {
  max-width: 100%;
  box-sizing: border-box;
  max-height: none;
  min-height: 32px;
  height: auto;
  align-items: center;
  white-space: normal;
  overflow: visible;
}

.item-edit .pill-text.tertiary {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-height: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

.item-edit .pill.tertiary .pill-image {
  flex-shrink: 0;
  align-self: center;
}


/* =============================================================================
   AGENT-CONFIG — Classifier classes & router sub-classes
   ============================================================================= */

.item-edit-class {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-style: none none none solid;
  border-width: 1px;
  border-color: var(--border-strong);
  width: 100%;
  max-height: 360px;
  margin-bottom: 16px;
  padding-left: 16px;
}

.item-edit-class:last-child {
  margin-bottom: 0;
}

.item-edit-class-list {
  width: 100%;
  max-height: 80svh;
  padding-left: 16px;
  overflow: scroll;
}

.item-edit-flex-h-lc {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
}

.item-edit-subclass {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  width: 100%;
  max-height: 360px;
  margin-top: 8px;
  margin-bottom: 16px;
}

.item-edit-subclass-header {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.item-edit-subclass-list {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-style: none none none solid;
  border-width: 1px;
  border-color: var(--border-strong);
  width: 100%;
  margin-bottom: 16px;
  padding-left: 16px;
}

.item-edit-router-list {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 350px;
  max-height: 80svh;
  padding-left: 16px;
  display: flex;
  overflow: scroll;
}

.item-edit-router-class {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-style: none none none solid;
  border-width: 1px;
  border-color: var(--border-strong);
  width: 100%;
  max-height: 360px;
  margin-bottom: 16px;
  padding-left: 16px;
}


/* =============================================================================
   AGENT-CONFIG — Type-content section (per-node form area)
   ============================================================================= */

.type-content-section {
  width: 100%;
  padding: 0;
}

.type-content-section .form-group {
  margin-bottom: 16px;
}

.type-content-section .form-field {
  background: var(--surface-canvas);
  border: 1px solid var(--border);
}

.type-content-section .form-field:focus {
  border-color: var(--primary);
  outline: none;
}

.type-content-section .form-field-label {
  font-size: 12px;
  color: var(--fg-label);
  margin-bottom: 6px;
  display: block;
  font-weight: 500;
}

.type-content-section .tools-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.type-content-section.classifier-description {
  padding: 12px 0;
}


/* =============================================================================
   AGENT-CONFIG — Form fields, selectors, generic editor buttons
   ============================================================================= */

.form-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-canvas);
  color: var(--fg-1);
  font-size: 14px;
  font-family: var(--font-body);
}

.form-field:focus {
  outline: none;
  border-color: var(--primary);
}

.form-field-label {
  font-size: 12px;
  color: var(--fg-label);
  margin-bottom: 6px;
  display: block;
}

textarea.form-field {
  min-height: 120px;
  resize: vertical;
  font-family: 'Courier New', monospace;
}

.agent-editor .selector {
  display: flex;
  align-items: center;
  position: relative;
  width: fit-content;
}

.selector-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 8px 32px 8px 16px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--fg-1);
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  min-width: 180px;
}

.selector-select:hover {
  border-color: var(--fg-muted);
}

.selector-select:focus {
  border-color: var(--primary);
}

.agent-editor .button-m-primary {
  background-color: var(--primary);
  box-shadow: 0 1px 2px 0 var(--fg-label);
  color: var(--surface-0);
  text-align: center;
  cursor: pointer;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  height: 40px;
  max-height: 40px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.agent-editor .button-m-primary:hover {
  box-shadow: 0 1px 4px 0 var(--primary);
  opacity: .9;
}

.agent-editor .button-m-primary:active {
  opacity: 1;
  box-shadow: inset 0 0 4px #0003;
}

.agent-editor .button-m-primary.icon-l {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  padding-left: 8px;
  padding-right: 12px;
}

.agent-editor .button-m-primary.icon-r {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  padding-left: 12px;
  padding-right: 8px;
}

.agent-editor .button-m-tertiary {
  background-color: transparent;
  color: var(--fg-label);
  text-align: center;
  cursor: pointer;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  height: 40px;
  max-height: 40px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

.agent-editor .button-m-tertiary:hover {
  opacity: .8;
}

.agent-editor .button-m-tertiary:active {
  opacity: 1;
}

.agent-editor .button-m-tertiary.icon-l {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  padding-left: 8px;
  padding-right: 12px;
}

.agent-editor .button-m-tertiary.icon-r {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  padding-left: 12px;
  padding-right: 8px;
}

.button-icon-old {
  background-color: var(--surface-0);
  color: var(--fg-1);
  cursor: pointer;
  background-image: url('../images/x.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border-radius: 12px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 4px;
}

.button-icon-old:hover {
  background-color: var(--surface-canvas);
}

.button-icon-old:active {
  background-color: var(--surface-0);
}

.button-icon-old:focus {
  background-color: var(--surface-canvas);
}


/* =============================================================================
   AGENT-CONFIG — I/O panels (input/output data + execution accordion)
   ============================================================================= */

.item-io {
  background-color: var(--surface-0);
  min-width: 30%;
  max-width: 30%;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.item-edit .item-io.visible,
.item-edit .item-io[style*="display: flex"] {
  display: flex;
}

.item-edit.active .item-io.visible,
.item-edit.active .item-io[style*="display: flex"] {
  flex: 0 0 30%;
  width: 30%;
  min-width: 280px;
  box-sizing: border-box;
}

#inputDataPanel,
#outputDataPanel {
  padding: 10px;
  padding-top: 50px;
  overflow: hidden;
  align-self: stretch;
}

.io-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.io-accordion {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  width: 100%;
}

.io-empty-msg {
  color: var(--fg-label);
  font-size: 13px;
  padding: 12px 0;
}

.io-exec-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-0);
  flex-shrink: 0;
  width: 100%;
}

.io-exec-row.expanded {
  flex-shrink: 1;
  overflow-y: auto;
}

.io-exec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  font-size: 13px;
  color: var(--fg-1);
}

.io-exec-header:hover {
  background: var(--surface-canvas);
}

.io-exec-chevron {
  font-size: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
  color: var(--fg-muted);
}

.io-exec-row.expanded .io-exec-chevron {
  transform: rotate(90deg);
}

.io-exec-label {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.io-exec-label .latest-tag {
  font-weight: 400;
  font-size: 11px;
  color: var(--fg-label);
  margin-left: 4px;
}

.io-exec-status {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: 10px;
  flex-shrink: 0;
  text-transform: capitalize;
}

.io-exec-status.success {
  background: var(--success-bg);
  color: var(--success);
}

.io-exec-status.failed {
  background: var(--danger-bg);
  color: var(--danger);
}

.io-exec-status.running {
  background: var(--info-bg);
  color: var(--info);
}

.io-exec-status.pending {
  background: var(--neutral-bg);
  color: var(--neutral);
}

.io-exec-status.waiting_for_human {
  background: var(--warning-bg);
  color: var(--warning);
}

.io-exec-status.cancelled {
  background: var(--neutral-bg);
  color: var(--neutral);
}

.io-exec-time {
  font-size: 11px;
  color: var(--fg-label);
  flex-shrink: 0;
  white-space: nowrap;
}

.io-exec-body {
  display: none;
  padding: 0 12px 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-2);
  border-top: 1px solid var(--border);
  overflow-x: hidden;
  word-break: break-word;
}

.io-exec-row.expanded .io-exec-body {
  display: block;
}

.io-kv-row {
  padding: 4px 0;
}

.io-kv-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.io-kv-value {
  font-size: 13px;
  color: var(--fg-1);
  word-break: break-word;
  white-space: pre-wrap;
}

.io-kv-value.long-text {
  background: var(--surface-canvas);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.io-kv-nested {
  padding-left: 12px;
  border-left: 2px solid var(--border);
  margin-top: 4px;
  margin-bottom: 4px;
}

.io-kv-section-label {
  font-weight: 600;
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 6px;
  margin-bottom: 2px;
}

.io-no-data {
  color: var(--fg-label);
  font-size: 13px;
  font-style: italic;
  padding: 8px 0;
}


/* =============================================================================
   AGENT-CONFIG — Editor section id-hooks (layout for the ported components)
   ============================================================================= */

#promptSection {
  gap: 6px;
}

#promptSection .item-edit-prompt-text:first-child {
  font-size: 12px;
  color: var(--fg-label);
  font-weight: 500;
  min-height: auto;
  height: auto;
}

#editPromptField {
  field-sizing: content;
  max-height: min(60vh, 90svh);
  overflow-y: auto;
}

#sourceTargetSection {
  gap: 16px;
}

#sourceTargetSection .item-edit-reference {
  flex: 1;
}

#sourceReferencesList,
#targetReferencesList,
#nodeInputConnectionsList,
#nodeOutputConnectionsList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

#classifierClassesSection {
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;
}

#addClassButton {
  margin-top: 8px;
}


/* =============================================================================
   AGENT-CONFIG — Loading / skeleton states (agent-config-* toggled by JS)
   ============================================================================= */

.item-edit-skeleton {
  background-color: var(--surface-canvas);
  border-radius: 40px;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  min-width: 420px;
  max-width: 40%;
  height: 460px;
  min-height: 20svh;
  max-height: 90svh;
  margin: 10px;
  padding: 32px;
  display: flex;
}

.workflow-edit-image-loader {
  opacity: 0.2;
}

.loading-overlay .item-edit-skeleton {
  min-width: min(420px, calc(100% - 24px));
  max-width: min(40%, calc(100% - 24px));
}

.loading-overlay .workflow-edit-image-loader {
  display: block;
  max-width: min(200px, 50vw);
  width: auto;
  height: auto;
}

.agent-config-page-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: transparent;
  pointer-events: none;
}

.agent-config-page-loading.hidden {
  display: none;
}

#agentEditPanel.agent-config-edit-pending {
  visibility: hidden !important;
  pointer-events: none;
}

.agent-config-page-loading .item-edit-skeleton {
  min-width: min(420px, calc(100% - 32px));
  max-width: min(40%, calc(100% - 32px));
  pointer-events: auto;
}

.agent-config-page-loading .agent-config-page-skeleton {
  background-color: var(--surface-canvas);
  border: 1px solid var(--border);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
}

.agent-config-page-loading .workflow-edit-image-loader {
  display: block;
  max-width: min(200px, 50vw);
  width: auto;
  height: auto;
  opacity: 0.2;
}


/* =============================================================================
   AGENT-CONFIG — Fallback-models multi-select (was an inline <style> block)
   ============================================================================= */

.ms-dropdown {
  position: relative;
  width: 100%;
}

.ms-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.ms-trigger[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.ms-trigger .ms-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.ms-trigger .ms-label.ms-placeholder {
  color: var(--fg-label);
}

.ms-trigger .ms-caret {
  flex: 0 0 auto;
  font-size: 10px;
  color: var(--fg-label);
  transition: transform 0.15s;
}

.ms-dropdown.ms-open .ms-caret {
  transform: rotate(180deg);
}

.ms-panel {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(17, 24, 39, 0.12);
  padding: 6px;
}

.ms-dropdown.ms-open .ms-panel {
  display: block;
}

.ms-search {
  width: 100%;
  margin-bottom: 6px;
}

.ms-options {
  max-height: 220px;
  overflow-y: auto;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.ms-option:hover {
  background: var(--surface-1);
}

.ms-check {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-0);
  font-size: 12px;
  line-height: 1;
}

.ms-option.ms-selected .ms-check {
  background: var(--primary);
  border-color: var(--primary);
}

.ms-option .ms-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-empty {
  padding: 10px 8px;
  color: var(--fg-label);
  font-size: 12px;
}

/* ==================== error pages (401 / 404) ==================== */
/* Centered error card. Shared by 401.html + 404.html (identical). */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: var(--surface-canvas);
}
.error-card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  text-align: center;
}
.error-code {
  font-size: 72px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--primary);
}
.error-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.error-message {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-base);
  color: var(--fg-3);
}
.error-card .btn { margin-top: var(--space-8); }

/* ==================== admin.css ==================== */
/* Admin hub landing: a centered, auth-gated card. */
/* Center the admin card within the scrollable content region. */
.admin-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The card itself. */
.admin-panel {
  width: 100%;
  max-width: 440px;
  padding: var(--space-32);
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* Auth-check loading state. */
.admin-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.admin-loading p { margin: 0; }
.admin-loading .loading-spinner { margin: 0 0 var(--space-4); }

/* Navigation destinations (revealed by JS once access is verified). */
.admin-nav-links {
  flex-direction: column;
  gap: var(--space-10);
}
/* Logout sits a touch apart from the destinations. */
.admin-nav-link--secondary { margin-top: var(--space-6); }

/* Error alert reads better left-aligned inside the centered card. */
#error-message { text-align: left; }

/* Redirect notice. */
.admin-redirect {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
}

/* ==================== login.css ==================== */
/* Pre-auth Login: full-viewport centered card, no app shell. */
/* Center the card in the viewport on the warm-paper canvas. */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  background: var(--surface-canvas);
}

.login-card {
  width: 100%;
  max-width: 400px;
}
.login-card__body { padding: var(--space-32); }

/* Brand + heading block. */
.login-brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}
.login-wordmark {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.login-heading {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.login-sub {
  margin: 0 0 var(--space-24);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

/* Stacked form fields. */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
/* Ensure the native submit input renders as our .btn (drop OS chrome). */
.login-form input[type="submit"].btn {
  -webkit-appearance: none;
  appearance: none;
  margin-top: var(--space-4);
}

/* ==================== table-create.css ==================== */
/* Table Create page. .pill.primary / .workflow-status-error are scoped under
   .tc-topbar so they don't override the brand pill / editor error elsewhere. */
/* ---- Topbar left group (back + title + CSV + status) ------------------ */
.tc-topbar .header-left-group {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.tc-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-md);
  color: var(--fg-3);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.tc-back:hover { background: var(--surface-1); color: var(--fg-1); }

/* CSV import control (must stay a <div> so the status nth-of-type hooks hold). */
.tc-topbar .pill.primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-12);
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface-0);
  color: var(--fg-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.tc-topbar .pill.primary:hover { background: var(--surface-1); border-color: var(--border-strong); color: var(--fg-1); }
.tc-topbar .pill.primary .pill-text { line-height: 1; }

/* Upload / error status (toggled via display by the page script). */
.tc-status {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-3);
}
.tc-status--err { color: var(--danger); }
.tc-topbar .workflow-status-error { color: var(--danger); flex: none; }

/* ---- Content layout ---------------------------------------------------- */
.tc-layout {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.tc-form { display: flex; flex-direction: column; gap: var(--space-16); }

/* Column name field + Add button on one aligned row. */
.tc-add-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-12);
}
.tc-add-row .field { flex: 1; min-width: 0; }
.tc-add-row .btn { flex: none; }

/* ---- Preview ----------------------------------------------------------- */
.tc-preview { display: flex; flex-direction: column; gap: var(--space-10); }
.tc-preview__head { display: flex; flex-direction: column; gap: var(--space-4); }
.tc-preview__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 720px) {
  .tc-add-row { flex-direction: column; align-items: stretch; }
  .tc-add-row .btn { width: 100%; }
}

/* ==================== table-record-create.css ==================== */
/* Table Record Create page frame; fields injected as .field/.label/.input. */
.trc-page { max-width: 640px; margin: 0 auto; }

/* Injected fields stack with consistent spacing. */
#record-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
#record-form:empty { display: none; }

.trc-error { margin-top: var(--space-16); }