/* Demo-specific styles. Bespoke design-system components live in vendor/css/.
   Anything here is either layout glue or atoms the design-system did not ship
   (modal, toast, form fields, breadcrumb, banner, detail dl).
*/

:root {
  --c-white: #ffffff;
  --c-dim-06: rgba(0,0,0,.06);
  --c-dim-12: rgba(0,0,0,.12);
  --c-dim-40: rgba(0,0,0,.40);
  --c-neutral-25: #fafafa;
  --c-neutral-50: #f0f0f0;
  --c-neutral-100: #e6e6e6;
  --c-neutral-200: #d4d4d4;   /* DS primitive */
  --c-neutral-300: #bbbbbb;
  --c-neutral-600: #8b8b8b;
  --c-neutral-700: #6e6e6e;
  --c-neutral-800: #545454;
  --c-neutral-900: #404040;
  --c-neutral-950: #333333;

  /* Brand scale — exact DS primitives (tokens/primitives.blue.json). */
  --c-brand-25:  #f0fcff;
  --c-brand-50:  #e6f8fd;
  --c-brand-100: #cdf4ff;
  --c-brand-200: #8adef6;
  --c-brand-500: #00b8ec;
  --c-brand-600: #00a1d7;
  --c-brand-700: #0076a8;
  --c-brand-800: #005b82;
  --c-brand-900: #004563;
  --c-brand-950: #003951;

  /* Semantic brand roles (semantics.web.json). Brand TEXT, ICONS, ACTIVE states
     and strong strokes are all brand-800 — brand-500 is only the logo mark and
     the focus ring. Use these, not raw scale steps. */
  --c-content-brand:          var(--c-brand-500);
  --c-content-brand-strong:   var(--c-brand-800);
  /* DS stroke/neutral-secondary — the soft neutral stroke the panels, rule cards
     and dividers already use. Chips + neutral outline buttons take it too (the
     vendor DS defaults them to the darker neutral-300). */
  --c-stroke-neutral-secondary: var(--c-neutral-100);
  --c-stroke-brand:           var(--c-brand-500);   /* focus ring only */
  --c-stroke-brand-strong:    var(--c-brand-800);
  --c-stroke-brand-soft:      var(--c-brand-100);
  --c-surface-brand-soft:     var(--c-brand-50);
  --c-surface-brand-strong:   var(--c-brand-800);
  --c-surface-brand-strong-hover:   var(--c-brand-900);
  --c-surface-brand-strong-pressed: var(--c-brand-950);

  --c-success-50: #e7f7ed;
  --c-success-500: #18b04a;
  --c-success-800: #096129;
  --c-success-900: #074a20;

  --c-error-50: #fdecee;
  --c-error-100: #fac4cb;
  --c-error-500: #d21e30;
  --c-error-700: #a01323;   /* DS content/stroke error-strong */
  --c-error-800: #83232f;   /* DS surface error-strong */

  --c-warning-50: #fef2e9;
  --c-warning-500: #ee8133;
  --c-warning-800: #864711;

  /* DS accent scales — used by the Add Item panel's per-group icon tiles. */
  --c-avocado-50: #e7f7ed;   --c-avocado-800: #096129;
  --c-pear-50: #f6faeb;      --c-pear-800: #5b711f;
  --c-strawberry-50: #fdecee; --c-strawberry-800: #83232f;
  --c-papaya-50: #fef2e9;    --c-papaya-800: #864711;
  --c-mango-50: #fffae6;     --c-mango-800: #8c7003;
  --c-prune-50: #f3ecfe;     --c-prune-800: #482184;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px;
  color: var(--c-neutral-950);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Hard reset chip */
#hard-reset {
  position: fixed; bottom: 12px; left: 12px; z-index: 200;
  padding: 6px 12px; border-radius: 999px;
  background: var(--c-neutral-900); color: var(--c-white);
  border: 0; font-size: 14px; cursor: pointer; opacity: .55;
  font-weight: 600;
}
#hard-reset:hover { opacity: 1; }

/* PageShell footer logo (the design system ships a placeholder text). */
.ll-sidemenu__powered { color: var(--c-content-brand-strong); }

/* Demo: locale, role pill and avatar render as static labels (no
   role-switching, no locale picker, no user menu in demo). Bell stays
   interactive — clicking it routes to Action Centre. */
.ll-top-bar__locale,
.ll-top-bar__role,
.ll-top-bar__avatar {
  pointer-events: none;
  cursor: default;
}

/* Tabs spacing — vendored LLTab paints the visuals (tier-1 underline +
   indicator, tier-2 background). Per design system: 12px between
   tier-1 and tier-2; 24px between tab strip and content. */
.demo-tabrow--tier-1 + .demo-tabrow--tier-2 { margin-top: 12px; }
/* Sub-tabs are mounted inside the tab body, not as a sibling of the tier-1 row,
   so cancel 12 of the body's 24px top gap to land on the same 12px rhythm. */
.demo-tabbody > .demo-tabrow--tier-2:first-child { margin-top: -12px; }
.demo-tabrow ~ *:not(.demo-tabrow) { margin-top: 24px; }
/* Page Header V2 puts 24px between the header block and the tab strip. The
   shell contributes 16px (8 title-row + 8 content), so top the rest up here. */
.ll-page-shell__content > .demo-tabrow:first-child { margin-top: 8px; }
/* Figma tab metrics: tier-1 = 48px, 16/700 labels; tier-2 = 40px, pad 10/20. */
.ll-tabs[data-tier="tier-1"]:not([data-size="36"]) .ll-tab { font-weight: 700; }
.ll-tabs[data-tier="tier-2"] .ll-tab { padding: 8px 20px; }

/* Page title supporting field (Figma 17086:2829) — bold 14px label + value,
   8px under the title, 24px above the tab strip. */
.demo-support {
  display: flex; align-items: center; gap: 8px;
  margin: -8px 0 24px;
}
.demo-support__label {
  font-size: 14px; font-weight: 700; line-height: 21px; color: var(--c-neutral-800);
}

/* Breadcrumb above title — Figma "Header content" (V, gap 12): 12px between the
   breadcrumb row and the title row. Labels are 14/600. */
.demo-breadcrumb {
  font-size: 14px; font-weight: 600; color: var(--c-neutral-800);
  margin-bottom: 12px; padding-top: 8px;
}
.demo-breadcrumb a { color: var(--c-brand-800); cursor: pointer; }
.demo-breadcrumb a:hover { text-decoration: underline; }
.demo-breadcrumb .sep { margin: 0 8px; color: var(--c-neutral-600); }

/* Banner (rejection reason) */
.banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 8px;
  background: var(--c-error-50);
  border: 1px solid var(--c-error-100);
  color: var(--c-error-800); margin-bottom: 24px;
}
.banner svg { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.banner__title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.banner__body { font-size: 14px; color: var(--c-neutral-950); }
.banner--warning {
  background: var(--c-warning-50, #FFF7E6);
  border-color: var(--c-warning-100, #FFE4B0);
  color: var(--c-warning-800, #8A5A00);
}
.banner__dismiss {
  margin-left: auto; background: none; border: 0; padding: 4px;
  cursor: pointer; color: inherit; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 4px;
}
.banner__dismiss:hover { background: rgba(0,0,0,0.06); }
.banner__dismiss svg { width: 20px; height: 20px; margin-top: 0; }

/* Form atoms */
.field { display: flex; flex-direction: column; gap: 6px; }
/* Field labels are the 14 semibold exception to the 16px standard. */
.field__label {
  font-size: 14px; font-weight: 600; color: var(--c-neutral-800);
  display: inline-flex; gap: 4px; align-items: baseline;
}
.field__label .req { color: var(--c-error-700); font-weight: 400; }
.field__optional { font-size: 14px; font-weight: 400; color: var(--c-neutral-800); }
.field__hint { font-size: 14px; color: var(--c-neutral-800); font-weight: 400; }
/* Matches the DS Input Field box (vendor/css/input-field.css `.ll-field__box`):
   48px min-height, 12px padding, 1.5px neutral-200 stroke on white, hover =
   1px brand-800, focus = 1.5px brand-800 + 3px brand-500 ring. */
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px;
  border-radius: 8px; border: 1.5px solid var(--c-neutral-200);
  background: var(--c-white); font: inherit; font-size: 16px; font-weight: 400; color: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) {
  border-color: var(--c-stroke-brand-strong);
}
.input::placeholder, .textarea::placeholder { color: var(--c-neutral-600); }
/* Native date/time inputs paint their format mask (mm/dd/yyyy, --:--) in the
   input's own colour, not ::placeholder. Until a value is entered it is
   placeholder text and gets DS content/neutral-tertiary like everything else;
   renderer.js drops `.is-empty` as soon as the field has a value. */
.input.is-empty::-webkit-datetime-edit { color: var(--c-neutral-600); }
.input.is-empty::-webkit-datetime-edit-text,
.input.is-empty::-webkit-datetime-edit-month-field,
.input.is-empty::-webkit-datetime-edit-day-field,
.input.is-empty::-webkit-datetime-edit-year-field,
.input.is-empty::-webkit-datetime-edit-hour-field,
.input.is-empty::-webkit-datetime-edit-minute-field,
.input.is-empty::-webkit-datetime-edit-ampm-field { color: var(--c-neutral-600); }
/* NB: these states set background-COLOR only — the shorthand would wipe
   `.select`'s caret background-image and leave the box arrow-less. */
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-stroke-brand-strong);
  box-shadow: 0 0 0 3px var(--c-stroke-brand);
  background-color: var(--c-white);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  /* DS CaretDown (filled), 16px — the dropdown arrow is the one 16px exception. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%23545454' d='M13.354 6.354 8.354 11.354a.5.5 0 0 1-.708 0L2.646 6.354A.5.5 0 0 1 3 5.5h10a.5.5 0 0 1 .354.854Z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
  padding-right: 38px;
}
.input:disabled, .select:disabled, .textarea:disabled {
  background-color: var(--c-neutral-50); border-color: transparent; color: var(--c-neutral-800);
  cursor: default;
}
/* Builder canvas WYSIWYG renders every field disabled — keep the default
   (white, stroked) look there, per the Figma Field Block. */
.bcard__body .input:disabled, .bcard__body .select:disabled, .bcard__body .textarea:disabled {
  background-color: var(--c-white); border-color: var(--c-neutral-200); color: var(--c-neutral-950);
}
/* View-mode (read-only) disabled fields keep neutral-primary text per spec —
   the field is non-editable but its content must stay readable. */
.form--readonly .input:disabled,
.form--readonly .select:disabled,
.form--readonly .textarea:disabled,
.form--readonly .chip-input--ro,
.form--readonly .editor__content {
  color: var(--c-neutral-950);
  -webkit-text-fill-color: var(--c-neutral-950);
}
/* ---- Icon scale ----
   40px buttons + freestanding icons = 24px · 32px buttons = 20px.
   16px is reserved for carets (dropdown arrow) and a few special cases. */
/* DS default is 8px (vendor/css/button.css `--gap`); we sit tighter at 6. */
.ll-button { --icon-size: 24px; --gap: 6px; }
.ll-button[data-size="sm"] { --icon-size: 20px; }
.ll-icon-button[data-size="sm"] { --icon-size: 20px; }
.ll-icon-button[data-size="md"] { --icon-size: 24px; }

/* ---- Neutral stroke = stroke/neutral-secondary ----
   Buttons and chips ship with the darker neutral-300 outline in the vendor DS;
   everything drawn in this app (panels, rule cards, dividers, table rules) uses
   the softer stroke/neutral-secondary, so the outline buttons and the neutral
   chips follow it. Coloured chips keep their own semantic strokes. */
.ll-button, .ll-icon-button { --stroke-neutral-soft-primary: var(--c-stroke-neutral-secondary); }
/* icon-button.css hardcodes the neutral outline, so it needs the direct token. */
.ll-icon-button[data-intent="neutral"] { --border-strong: var(--c-stroke-neutral-secondary); }
.ll-chip[data-color="white"], .ll-chip[data-color="grey"] {
  --border: var(--c-stroke-neutral-secondary);
  --border-active: var(--c-stroke-neutral-secondary);
}

.input--error, .select--error, .textarea--error {
  border-color: var(--c-error-700);
}
.form-row { display: flex; gap: 16px; }
.form-row > * { flex: 1; min-width: 0; }
.form-section { display: flex; flex-direction: column; gap: 16px; }
.form-section:empty { display: none; }
.form-section + .form-section {
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--c-neutral-100);
}
.form-section__title {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 18px; font-weight: 700; margin: 0;
}

/* Account Receivable Log Sheet — wide aging report. Each header / cell
   has min-width so columns don't squash; horizontal scroll engages and
   the Document No column stays visible via frozen-left. */
.ar-sheet th, .ar-sheet td { white-space: nowrap; min-width: 140px; }
.ar-sheet th.ll-table__cell--frozen-left,
.ar-sheet td.ll-table__cell--frozen-left { min-width: 160px; }
/* Pin hugged columns (checkbox + row-action) at 48px in ar-sheet — the
   140/160 floors above otherwise expand them. */
.ar-sheet th.ll-table__th--checkbox,
.ar-sheet td[data-cell-type="icon-checkbox"],
.ar-sheet th.ll-table__cell--frozen-right,
.ar-sheet td[data-cell-type="icon-action"] {
  width: 48px; min-width: 48px; max-width: 48px;
}
.ar-sheet th[data-align='right'], .ar-sheet td[data-align='right'] { text-align: right; }

/* Custom time picker — trigger styled to match .input, popover with three
   scrollable columns (hour, minute, AM/PM). Stores HH:MM 24h. */
.time-input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border-radius: 8px; border: 1.5px solid var(--c-neutral-100);
  background: var(--c-neutral-25); font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.time-input:focus, .time-input:focus-within {
  outline: none; border-color: var(--c-brand-800);
  box-shadow: 0 0 0 3px rgba(0,184,236,.18);
  background: var(--c-white);
}
.time-input--disabled,
.time-input:disabled {
  background: var(--c-neutral-50); color: var(--c-neutral-300);
  cursor: not-allowed;
}
.time-input__display { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.time-input__placeholder { color: var(--c-neutral-600); }
.time-input__period { text-transform: lowercase; }
.time-input__icon {
  width: 20px; height: 20px; color: var(--c-neutral-800);
  display: inline-flex; flex-shrink: 0;
}
.time-input__icon svg { width: 100%; height: 100%; }
.form--readonly .time-input { color: var(--c-neutral-950); cursor: default; }

/* Hidden native date input — only used to surface browser's date picker via
   showPicker(); the visible .time-input wrapper paints the dd/mm/yyyy text. */
.date-input__native {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  border: 0; padding: 0; margin: 0; background: transparent;
}
button.time-input,
.date-input { position: relative; }
.date-input:focus-visible {
  outline: none; border-color: var(--c-brand-800);
  box-shadow: 0 0 0 3px rgba(0,184,236,.18);
  background: var(--c-white);
}

.time-pop {
  position: fixed; z-index: 260;
  background: var(--c-white);
  border: 1.5px solid var(--c-neutral-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(64,64,64,.18);
  padding: 8px;
  display: flex; gap: 4px;
}
.time-pop__col {
  display: flex; flex-direction: column; min-width: 64px;
}
.time-pop__hd {
  font-size: 14px; font-weight: 700; color: var(--c-neutral-700);
  text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 8px 6px; text-align: center;
}
.time-pop__list {
  height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;
}
.time-pop__opt {
  border: 0; background: transparent;
  padding: 6px 12px; border-radius: 6px;
  font: inherit; font-variant-numeric: tabular-nums;
  cursor: pointer; color: var(--c-neutral-950);
  text-align: center;
}
.time-pop__opt:hover { background: var(--c-dim-06); }
.time-pop__opt.is-selected {
  background: var(--c-brand-50); color: var(--c-brand-800);
  font-weight: 700;
}
.ll-field__value.is-placeholder { color: var(--c-neutral-600); }
.ll-field--time .ll-field__value {
  flex: 1 1 auto; padding: 12px 0; font-size: 16px;
  color: var(--content-neutral-primary);
}

/* Read-only chip input — no caret, default cursor */
.chip-input--ro { cursor: default; }
.chip-input--ro::after { display: none; }
.chip-input--ro:focus-within { box-shadow: none; border-color: var(--c-neutral-100); background: var(--c-neutral-25); }

/* Multi-select chip-input (Contact field) — uses LLChip inside */
.chip-input {
  min-height: 44px;
  border: 1.5px solid var(--c-neutral-100);
  border-radius: 8px;
  padding: 6px 38px 6px 8px;
  background: var(--c-neutral-25);
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; cursor: pointer;
  position: relative;
}
.chip-input:focus-within {
  border-color: var(--c-brand-800); background: var(--c-white);
  box-shadow: 0 0 0 3px rgba(0,184,236,.18);
}
.chip-input::after {
  content: ''; position: absolute; right: 14px; top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%23545454' d='M13.354 6.354 8.354 11.354a.5.5 0 0 1-.708 0L2.646 6.354A.5.5 0 0 1 3 5.5h10a.5.5 0 0 1 .354.854Z'/></svg>") center/contain no-repeat;
  pointer-events: none;
}

/* Collapsible block (per-student arrear group) */
.collapse {
  border: 1px solid var(--c-neutral-100);
  border-radius: 8px; overflow: hidden;
  background: var(--c-white);
}
.collapse + .collapse { margin-top: 8px; }
.collapse__head {
  height: 56px; padding: 0 16px;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--c-neutral-25);
}
.collapse__head .caret { transition: transform .15s; display: inline-flex; width: 24px; height: 24px; }
.collapse--open .collapse__head .caret { transform: rotate(180deg); }
.collapse__title { flex: 1; font-weight: 700; font-size: 16px; }
.collapse__meta { color: var(--c-brand-800); font-weight: 600; font-size: 14px; }
.collapse__body { padding: 16px; display: none; }
.collapse--open .collapse__body { display: flex; flex-direction: column; gap: 12px; }

/* Rich text editor — toolbar on top, contentEditable body below. */
.editor {
  border: 1.5px solid var(--c-neutral-100);
  border-radius: 8px; overflow: visible;
  background: var(--c-neutral-25);
}
.editor__toolbar {
  display: flex; align-items: center; gap: 2px;
  padding: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-neutral-100);
  border-radius: 7px 7px 0 0;
  background: var(--c-neutral-25);
}
/* Groups are hairline-separated: colour | B I U S | align | lists | clear. */
.editor__group { display: flex; align-items: center; gap: 2px; position: relative; }
.editor__group + .editor__group { margin-left: 5px; padding-left: 6px; box-shadow: inset 1px 0 0 var(--c-neutral-100); }
.editor__btn {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 4px;
  background: none; cursor: pointer; color: var(--c-neutral-800);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
}
.editor__btn:hover { background: var(--c-dim-06); color: var(--c-neutral-950); }
.editor__btn.is-active { background: var(--c-brand-50); color: var(--c-brand-800); }
.editor__btn-ico { width: 18px; height: 18px; display: inline-flex; }
.editor__btn-ico svg { width: 100%; height: 100%; display: block; }
/* Colour button: glyph over a swatch bar showing the last-picked colour. */
.editor__btn--color { flex-direction: column; gap: 2px; height: 28px; }
.editor__btn--color .editor__btn-ico { width: 16px; height: 16px; }
.editor__swatch {
  width: 16px; height: 3px; border-radius: 2px; flex-shrink: 0;
  background: var(--c-neutral-950);
}
.editor__colorpop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(4, 24px); gap: 6px;
  padding: 8px; border-radius: 8px; background: var(--c-white);
  border: 1px solid var(--c-neutral-100); box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.editor__colorchip {
  width: 24px; height: 24px; border-radius: 4px; cursor: pointer; padding: 0;
  border: 1px solid var(--c-dim-12);
}
.editor__colorchip:hover { outline: 2px solid var(--c-brand-500); outline-offset: 1px; }
.editor__content {
  min-height: 160px; padding: 12px 14px;
  font: inherit; outline: none;
  background: var(--c-white);
  border-radius: 0 0 7px 7px;
}
/* Authored content: lists need their markers back (the reset strips them). */
.editor__content p, .fr-richtext p { margin: 0 0 8px; }
.editor__content ul, .editor__content ol,
.fr-richtext ul, .fr-richtext ol { margin: 0 0 8px; padding-left: 24px; }
.editor__content ul, .fr-richtext ul { list-style: disc; }
.editor__content ol, .fr-richtext ol { list-style: decimal; }
.editor__content li, .fr-richtext li { list-style: inherit; margin: 2px 0; }
.editor__actions {
  display: flex; gap: 8px; padding: 8px;
  border-top: 1px solid var(--c-neutral-100);
  background: var(--c-white);
}

/* Mini invoice table inside form / detail */
.inv-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  margin-top: 12px;
}
.inv-table th, .inv-table td {
  height: 36px; padding: 0 12px;
  border-bottom: 1px solid var(--c-neutral-100);
  text-align: left;
}
.inv-table th {
  font-weight: 600; color: var(--c-neutral-800);
  font-size: 14px; background: var(--c-neutral-25);
}
.inv-table td.r, .inv-table th.r { text-align: right; }
.inv-table tr:last-child td { border-bottom: 0; }
.inv-table a { color: var(--c-brand-800); }
.inv-table a:hover { text-decoration: underline; }

/* Detail key/value list */
.detail-grid {
  display: grid; grid-template-columns: 200px 1fr;
  gap: 12px 24px; max-width: 720px;
}
.detail-grid dt { color: var(--c-neutral-800); font-weight: 600; }
.detail-grid dd { margin: 0; }

/* Modal (centered, dim overlay) */
.modal-overlay {
  position: fixed; inset: 0; background: var(--c-dim-40);
  z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal {
  background: var(--c-white); border-radius: 12px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  overflow: hidden;
}
.modal--sm { width: 480px; }
.modal--600 { width: 600px; }
.modal--md { width: 720px; }
.modal--lg { width: 1080px; }
.modal--xl { width: 1200px; }
.modal--xxl { width: min(1440px, calc(100vw - 48px)); }
/* Fullscreen modal — fills viewport with the overlay's 24px padding acting
   as the margin from each edge. */
.modal--fs {
  width: 100%; max-width: none;
  height: 100%; max-height: 100%;
  flex: 1 1 auto;
}
.modal__header {
  display: flex; align-items: center; padding: 0 24px;
  min-height: 48px; height: 48px;
  background: var(--c-neutral-25);
  border-bottom: 1px solid var(--c-neutral-100);
  flex-shrink: 0;
}
.modal__header h2 {
  margin: 0; font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; flex: 1;
}
.modal__close {
  width: 32px; height: 32px; border: 0; background: transparent;
  cursor: pointer; border-radius: 50%;
  color: var(--c-neutral-800);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__close:hover { background: var(--c-dim-06); }
.modal__body { padding: 24px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal__body--center { text-align: center; padding: 32px 32px 16px; }
.modal__footer {
  padding: 16px 24px; border-top: 1px solid var(--c-neutral-100);
  display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
  background: var(--c-neutral-25);
}
.modal__footer--center { justify-content: center; padding: 16px 20px 24px; }
.modal--confirm { border-radius: 20px; }
.modal--confirm .modal__body--center { padding: 40px 32px 24px; }
.modal--confirm .modal__icon-warn { margin-bottom: 24px; }
.modal--confirm h3.confirm-title { font-size: 24px; margin: 0 0 12px; }
.modal--confirm p.confirm-text { color: var(--c-neutral-800); margin: 0; }
.modal__footer--confirm {
  border-top: 0;
  background: transparent;
  padding: 8px 32px 32px;
  gap: 12px;
  justify-content: stretch;
}
.modal__footer--confirm > .ll-button { flex: 1 1 0; }
.modal__footer--split { justify-content: space-between; }
.modal__footer--steps {
  justify-content: space-between;
  align-items: center;
}
.modal__footer-side {
  display: flex; gap: 8px; align-items: center; flex: 1 1 0;
}
.modal__footer-side--right { justify-content: flex-end; }

.step-indicator {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--c-neutral-800);
  flex-shrink: 0;
}
.step-indicator__step {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600;
}
.step-indicator__step--active { color: var(--c-brand-800); }
.step-indicator__step--inactive { color: var(--c-neutral-600); }
.step-indicator__bullet {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  border: 1.5px solid var(--c-neutral-300); background: var(--c-white);
  color: var(--c-neutral-700);
}
.step-indicator__bullet--active {
  border-color: var(--c-surface-brand-strong); background: var(--c-surface-brand-strong);
  color: var(--c-white);
}
.step-indicator__bullet--done {
  border-color: var(--c-success-500); background: var(--c-success-500);
  color: var(--c-white);
}
.step-indicator__bullet--done svg { width: 12px; height: 12px; }
.step-indicator__line {
  width: 32px; height: 1.5px; background: var(--c-neutral-200);
}
.modal__icon-warn {
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--c-warning-500);
}
.modal__icon-warn svg { width: 56px; height: 56px; }
.modal h3.confirm-title {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 22px; font-weight: 700;
  margin: 0 0 8px;
}
.modal p.confirm-text {
  font-size: 16px; line-height: 1.5;
  color: var(--c-neutral-800);
  margin: 0 0 8px;
}

/* Toast */
#toast-root {
  position: fixed; top: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  width: 448px;
  background: #333333;
  color: var(--c-white);
  border-radius: 4px;
  padding: 16px;
  display: flex; align-items: flex-start; gap: 12px;
  box-shadow: 0 4px 8px rgba(64,64,64,.25);
  animation: toast-in .25s ease-out;
  font-family: 'Nunito Sans', system-ui, sans-serif;
}
.toast__icon {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #8adef6;
}
.toast__icon svg { width: 24px; height: 24px; }
.toast--success .toast__icon { color: #92dbac; }
.toast--error .toast__icon { color: #f7a7b1; }
.toast--warning .toast__icon { color: #fac598; }
.toast--info .toast__icon { color: #8adef6; }
.toast__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.toast__body { display: flex; flex-direction: column; gap: 4px; }
.toast__label {
  font-weight: 700; font-size: 16px; line-height: 1.5;
  color: var(--c-white); word-break: break-word;
}
.toast__content {
  font-weight: 400; font-size: 16px; line-height: 1.5;
  color: var(--c-white); word-break: break-word;
}
.toast__actions { display: flex; gap: 12px; align-items: center; }
.toast__link {
  border: 0; background: transparent; cursor: pointer;
  padding: 4px 0; border-radius: 8px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.5;
}
.toast__link--main { color: #8adef6; }
.toast__link--undo { color: var(--c-white); }
.toast__link:hover { opacity: .85; }
.toast__close {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--c-white); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toast__close svg { width: 20px; height: 20px; }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Demo dropdown popover (used for row actions, contact picker) */
.demo-dd {
  position: fixed; min-width: 240px; max-width: 320px;
  background: var(--c-white);
  border: 1.5px solid var(--c-neutral-200);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(64,64,64,.18);
  z-index: 250; padding: 8px 0;
}
.demo-dd__item {
  min-height: 40px; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; color: var(--c-neutral-950);
  cursor: pointer; user-select: none;
}
.demo-dd__item:hover { background: var(--c-dim-06); }
.demo-dd__item--danger { color: var(--c-error-800); }
.demo-dd__item--disabled { color: var(--c-neutral-300); cursor: not-allowed; }
.demo-dd__divider {
  height: 1px; background: var(--c-neutral-100);
  margin: 4px 0;
}
.demo-dd__item .ico { width: 16px; height: 16px; display: inline-flex; }
.demo-dd__item .ico svg { width: 100%; height: 100%; }

/* Approval split panel */
.approve-split {
  display: grid; grid-template-columns: 320px 1fr;
  gap: 0;
  height: 100%; min-height: 560px;
  margin: -24px;
}
.approve-split__sidebar {
  background: var(--c-neutral-25);
  padding: 24px; border-right: 1px solid var(--c-neutral-100);
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
}
.approve-split__sidebar h4 {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; margin: 0;
}
.approve-split__main { padding: 24px; overflow-y: auto; min-width: 0; }
.approve-split__main h2 {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 24px; font-weight: 700;
  margin: 0 0 16px;
}
.approve-split .meta-row { font-size: 14px; }
.approve-split .meta-row b { display: block; color: var(--c-neutral-800); font-weight: 600; margin-bottom: 2px; }

/* Review-request side panel — chip hug + meta + per-approver rows. */
.approve-split__sidebar .ll-chip { align-self: flex-start; }
.approve-split__title {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 22px; font-weight: 700;
  margin: 8px 0 0; color: var(--c-neutral-950);
}
.approve-split__meta {
  display: flex; flex-direction: column; gap: 8px; font-size: 14px;
  color: var(--c-neutral-950);
}
.approve-split__meta b { color: var(--c-neutral-950); font-weight: 700; }
.approve-split__divider {
  border: 0; border-top: 1px solid var(--c-neutral-100); margin: 8px 0;
}
.approve-split__section-head {
  display: flex; align-items: center; justify-content: space-between;
}
.approve-split__section-head h4 { margin: 0; }
.approve-split__caret {
  width: 16px; height: 16px; color: var(--c-neutral-800);
  display: inline-flex; transform: rotate(180deg);
}
.approve-split__caret svg { width: 100%; height: 100%; }
.approve-split__field {
  display: flex; flex-direction: column; gap: 4px;
}
.approve-split__label {
  font-size: 14px; color: var(--c-neutral-800); font-weight: 600;
  display: inline-flex; gap: 4px; align-items: center;
}

.approver-row { display: flex; align-items: center; gap: 8px; }
.approver-row__status {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.approver-row__status svg { width: 100%; height: 100%; }
.approver-row__status--approved { color: var(--c-success-800); }
.approver-row__status--rejected { color: var(--c-error-800); }
.approver-row__status--pending  { color: var(--c-brand-800); }
.approver-row__status--inactive { color: var(--c-neutral-800); }
.approver-row__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #d6c2f5; color: var(--c-neutral-950);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.approver-row__name {
  color: var(--c-brand-800); font-weight: 700; font-size: 14px;
}

.approve-split__remark-card {
  padding: 12px 14px; border: 1px solid var(--c-neutral-100);
  border-radius: 8px; font-size: 16px; line-height: 1.5;
  background: var(--c-white); color: var(--c-neutral-950);
}
.approve-split__remark-card .muted { color: var(--c-neutral-700); font-style: italic; }
.approve-split__see-more {
  display: inline-block; margin-top: 8px;
  color: var(--c-brand-800); font-weight: 700; cursor: pointer;
  text-decoration: underline;
}

/* Avatar */
.avatar-circle {
  width: 64px; height: 64px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 22px;
  color: var(--c-brand-800);
  background: var(--c-brand-200);
}

/* Generic empty row in custom tables */
.empty-row td {
  text-align: center; color: var(--c-neutral-600);
  padding: 36px 14px;
}

/* Misc helpers */
.muted { color: var(--c-neutral-600); }
.chip-overflow { color: var(--color-neutral-950); font-size: 14px; line-height: 1; }
/* Custom tooltip — replaces native title on chip-overflow data cells.
   Renders immediately, follows mouse, clamps to viewport, max 440 wide,
   16px text, one entry per line. */
.demo-tooltip {
  position: fixed;
  display: none;
  z-index: 9999;
  max-width: 440px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-neutral-950, #0d0d0d);
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
}
/* LLInputField placeholder text (used for empty single/multi-select values). */
.ll-field__placeholder { color: var(--color-neutral-500); font-size: 16px; padding: 4px 0; }
.ll-field--single-select .ll-field__value.is-placeholder { color: var(--color-neutral-500); }
/* Inline editable input replacing the static .ll-field__value span on
   selection-combo fields. Trigger typing filters the dropdown options
   in-place (no inline search row inside the popover). */
.ll-field__select-input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 0;
  border: 0; outline: none; background: transparent;
  font: inherit; font-size: 16px;
  color: var(--content-neutral-primary);
}
.ll-field__select-input::placeholder { color: var(--color-neutral-500); }
.ll-field--multi-select .ll-field__select-input--multi {
  padding: 4px 4px; min-width: 80px; flex: 1 1 80px;
}
/* Tier-2 tabs use 16px text per Image #79 (DS default is 14px). */
.ll-tabs[data-tier="tier-2"] .ll-tab { font-size: 16px; }

/* Button icon scale (Figma "Text Button", verified 2026-07-30): descriptive
   icons are 24px in the 40px button and 20px in the 32px one; the menu caret
   (`dropdown: true`) stays 16px at every size. Vendor ships 20/16. */
.ll-button { --icon-size: 24px; }
.ll-button[data-size="sm"] { --icon-size: 20px; }
.ll-button__icon--caret { width: 16px; height: 16px; }

/* Tighten page header → tabs spacing per Image #80 reference. Vendor
   page-shell ships 16px title margin-bottom + 24px content margin-top =
   40px gap. Compress both to 8 so the total drops to ~16px. */
.ll-page-shell__title-row { margin-bottom: 8px; }
/* Figma "Buttons" frame in Page Header V2 spaces title actions 12px apart. */
.ll-page-shell__title-actions { gap: 12px; }
.ll-page-shell__content { margin-top: 8px; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.text-14 { font-size: 14px; }
.text-16 { font-size: 16px; }
.font-700 { font-weight: 700; }
.text-r { text-align: right; }
.flex-1 { flex: 1; }
.no-shrink { flex-shrink: 0; }
.w-full { width: 100%; }
.hide { display: none !important; }

/* Tweaks for custom-rendered tables (we hand-roll body rows because LLTable's
   thin renderer only handles text/linked/status cells). Re-uses table-level
   tokens for visual parity. */
.ll-table--custom { border: 1px solid var(--c-neutral-100); border-radius: 12px; overflow: hidden; background: var(--c-white); }
.ll-table--custom .ll-table__scroll { padding: 0; }
.ll-table__rowcheck {
  display: inline-flex; align-items: center;
}
.ll-table__rowaction {
  width: 32px; height: 32px; border: 0; background: transparent;
  cursor: pointer; border-radius: 50%; color: var(--c-neutral-800);
  display: inline-flex; align-items: center; justify-content: center;
}
.ll-table__rowaction:hover { background: var(--c-dim-06); }
.ll-table__rowaction svg { width: 20px; height: 20px; }

/* Pin the checkbox column to the left edge so it sticks during horizontal
   scroll. Vendor's width:1% already hugs the column to 48px — only add
   sticky positioning here, no redundant border-right (that divider lives
   on the last frozen-left cell via the vendor `:has` rule). */
.ll-table__th--checkbox,
.ll-table__td[data-cell-type="icon-checkbox"] {
  position: sticky; left: 0; z-index: 2;
  background: var(--surface-default-white, var(--c-white));
}
.ll-table__th.ll-table__th--checkbox { z-index: 3; }
.ll-table__table tbody tr:hover .ll-table__td[data-cell-type="icon-checkbox"] {
  background: var(--surface-default-neutral-soft-secondary);
}
/* Frozen checkbox sits at left:0 — shift the next frozen-left cell by 48. */
.ll-table__td[data-cell-type="icon-checkbox"] + .ll-table__cell--frozen-left,
.ll-table__th--checkbox + .ll-table__cell--frozen-left { left: 48px; }

/* Row-action column hugs to 48 — match the checkbox column. */
.ll-table__th.ll-table__cell--frozen-right,
.ll-table__td[data-cell-type="icon-action"] {
  width: 48px; min-width: 48px; max-width: 48px;
  padding: 0; text-align: center;
}

/* Arrear batch detail status row — Status label + chip on one line below
   title. PageShell title-row already carries a 16px bottom margin, so we
   pull the status row up so total gap to title is ~8px. */
.detail-status-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; color: var(--c-neutral-950);
  /* PageShell title margin-bottom + content margin-top = 16px after the
     header-compression override above; pull up 8px to leave ~8px gap to
     title, and add 24px below before the tab row. */
  margin-top: -8px; margin-bottom: 24px;
}
.detail-status-row b { font-weight: 700; }
.detail-status-row__sep {
  width: 1px; height: 16px; background: var(--c-neutral-300);
}

/* Composite detail header (student billing account):
   [avatar] [title + sub-info]                              [actions]
   One row, full width. Replaces PageShell's title row on this page. */
.detail-header {
  display: flex; align-items: center; gap: 20px;
  /* Breadcrumb sits inside .ll-page-shell__inner above the (hidden) title
     row; content slot adds 8px top after the override. Pull up 0 to leave
     ~8px gap from breadcrumb. */
  margin-top: 0; margin-bottom: 16px;
}
.detail-header__title-block { flex: 1 1 auto; min-width: 0; }
.detail-header__name {
  margin: 0 0 6px;
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 28px; font-weight: 700;
  color: var(--c-neutral-950);
}
.detail-header__sub {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--c-neutral-800);
  flex-wrap: wrap;
}
.detail-header__sub b {
  color: var(--c-neutral-950); font-weight: 700; margin-right: 6px;
}
.detail-header__sep { color: var(--c-neutral-300); }
.detail-header__status { display: inline-flex; align-items: center; gap: 6px; }
.detail-header__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Right-side drawer modal (filter panel). Reuses .modal-overlay dim-40
   backdrop; flushes the panel to the right edge full height. */
.modal-overlay--right {
  padding: 0;
  justify-content: flex-end;
  align-items: stretch;
}
.modal--right {
  width: 400px;
  max-width: 100vw;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  flex: 0 0 auto;
}
.modal--right .modal__body { padding: 20px 24px; }

/* Filter modal: stacked field rows. */
.filter-stack { display: flex; flex-direction: column; gap: 12px; }
.filter-stack__field { display: flex; flex-direction: column; gap: 6px; }
.filter-stack__label {
  font-size: 14px; font-weight: 600;
  color: var(--c-neutral-950);
}
.filter-stack__sub { margin-top: 8px; }
.filter-stack__hint {
  font-size: 14px; color: var(--c-neutral-700);
}

/* Filter chips bar — rendered between toolbar/pagination and tbody. */
.filter-chips-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px;
  border-top: 1px solid var(--c-neutral-100);
  background: var(--c-white);
  font-size: 14px;
}
.filter-chips-bar__count {
  color: var(--c-neutral-900); font-weight: 600;
}
.filter-chips-bar__clear {
  color: var(--c-brand-800); font-weight: 600;
  background: transparent; border: 0; cursor: pointer;
  padding: 4px 6px; text-decoration: underline;
  font-size: 14px; margin-left: 4px;
}
.filter-chips-bar__clear:hover { color: var(--c-brand-900); }

/* Multi-select popover — outer positioning wrapper. The inner card is a
   DS LLDropdownMenu (.ll-dropdown) whose rows are LLSelectionListItem
   (search / divider / multi-select). We override the dropdown's 240px
   default width from JS to match the trigger. */
.filter-multi-pop {
  position: fixed; z-index: 200;
}
.filter-multi-pop__empty {
  padding: 12px 16px; font-size: 14px; color: var(--c-neutral-700);
  text-align: center;
}
.filter-multi-pop .ll-sli[data-type='multi-select'],
.filter-multi-pop .ll-sli[data-type='standard'] {
  width: 100%;
}
.filter-multi-pop .ll-field__placeholder {
  color: var(--c-neutral-600); font-size: 16px;
}

/* =====================================================================
   Invoice / Credit Note detail modal (Image #3 / #5).
   Header chip + title → 5-cell info grid → fee item table → remarks +
   totals row → tier-2 tabs (Activity Log / Arrear Log / Payment).
   ===================================================================== */
.doc-detail { display: flex; flex-direction: column; gap: 24px; }
.doc-detail .ll-chip { align-self: flex-start; }
.doc-detail__title {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 24px; font-weight: 700; margin: 0;
  color: var(--c-neutral-950);
}

/* 3-column key-value grid; pairs render as label : value, label spans
   self-fit, value flexes to fill. */
.doc-info-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 24px;
}
.doc-info-cell {
  display: grid; grid-template-columns: 140px 8px 1fr;
  align-items: baseline; gap: 4px;
  font-size: 14px;
}
.doc-info-label { font-weight: 700; color: var(--c-neutral-950); }
.doc-info-sep   { color: var(--c-neutral-700); }
.doc-info-value { color: var(--c-neutral-950); }

/* Credit Note Reason — filled neutral-50 box. */
.doc-reason { display: flex; flex-direction: column; gap: 6px; }
.doc-reason__label {
  font-size: 14px; font-weight: 700; color: var(--c-neutral-950);
}
.doc-reason__box {
  min-height: 48px; padding: 14px 16px;
  border-radius: 8px; background: var(--c-neutral-50);
  color: var(--c-neutral-950); font-size: 14px;
}

/* Line item / payment table — DS chrome, no toolbar, no header tint. */
.doc-line-table .ll-table__table { width: 100%; }
.doc-line-table .ll-table__th {
  background: var(--c-neutral-25);
  color: var(--c-neutral-800);
  font-size: 14px; font-weight: 600;
}
.doc-line-table .ll-table__td { font-size: 14px; }

/* Remarks (left, flex) + totals box (right, fixed ~380px). */
.doc-totals-row {
  display: flex; gap: 24px; align-items: flex-start;
}
.doc-remarks { flex: 1 1 auto; min-width: 0; }
.doc-remarks__label {
  font-size: 14px; font-weight: 700; color: var(--c-neutral-950);
  margin-bottom: 4px;
}
.doc-remarks__text {
  font-size: 14px; color: var(--c-neutral-800);
  white-space: pre-wrap;
}
.doc-totals { flex: 0 0 380px; }
.doc-totals__table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--c-neutral-100); border-radius: 8px;
  overflow: hidden;
}
.doc-totals__cell {
  padding: 12px 16px; font-size: 14px;
  border-bottom: 1px solid var(--c-neutral-100);
  background: var(--c-white);
}
.doc-totals__table tr:last-child .doc-totals__cell { border-bottom: 0; }
.doc-totals__label {
  text-align: right; color: var(--c-neutral-950);
  width: 65%;
}
.doc-totals__value {
  text-align: right; color: var(--c-neutral-950);
  font-variant-numeric: tabular-nums; width: 35%;
}
.doc-totals__cell--bold { font-weight: 700; }

/* Tier-2 tabs inside detail modals — DS tab strip + content area. */
.doc-tabs { display: flex; flex-direction: column; gap: 16px; }
.doc-tabs__content { display: flex; flex-direction: column; gap: 8px; }

/* Money input — short-text box with $ lead and SGD trail text affixes. */
.ll-field--money .ll-field__affix {
  flex: 0 0 auto;
  font: inherit; font-size: 16px;
  color: var(--content-neutral-secondary);
  user-select: none;
}
.ll-field--money .ll-field__affix--lead { margin-right: 4px; }
.ll-field--money .ll-field__affix--trail { margin-left: 4px; }
.ll-field--money .ll-field__input { text-align: left; }

/* ============================================================
   Parent Forms demo atoms (scaffold)
   ============================================================ */
.demo-tabbody { margin-top: 8px; }
.demo-namecell { display: flex; flex-direction: column; gap: 2px; }
.demo-subid { font-size: 14px; color: var(--c-neutral-500, #8a8a8a); }
.demo-muted { color: var(--c-neutral-400, #b0b0b0); }
.demo-plusn { font-size: 14px; color: var(--c-neutral-500, #8a8a8a); }
.demo-toolbar__right { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.demo-empty { text-align: center; color: var(--c-neutral-500, #8a8a8a); padding: 32px 0; }
.demo-statusline { display: flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--c-neutral-600, #666); margin: 4px 0 12px; }
.demo-placeholder { padding: 40px; text-align: center; color: var(--c-neutral-500, #8a8a8a);
  border: 1px dashed var(--c-neutral-300, #d5d5d5); border-radius: 12px; margin-top: 16px;
  font-size: 14px; background: var(--c-neutral-50, #fafafa); }

/* ---- Create Form launcher (Figma 4056-37593) ---- */
.modal--launcher { width: 744px; max-width: calc(100vw - 48px); }
.launch-scratch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 128px; padding: 0 0 0 24px; overflow: hidden; cursor: pointer;
  background: var(--c-brand-50); border: 1px solid var(--c-brand-100); border-radius: 8px;
}
.launch-scratch:hover { border-color: var(--c-brand-200); }
.launch-scratch:focus-visible, .launch-card:focus-visible { outline: 2px solid var(--c-stroke-brand); outline-offset: 2px; }
.launch-scratch__title {
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 20px; line-height: 26px; font-weight: 700; color: var(--c-brand-800);
}
.launch-scratch__desc { font-size: 16px; line-height: 24px; color: var(--c-neutral-950); margin-top: 4px; }
.launch-scratch__illus { align-self: stretch; flex: 0 0 156px; }
.launch-scratch__illus svg { width: 100%; height: 100%; display: block; }
.launch-sect { font-size: 18px; line-height: 27px; font-weight: 700; color: var(--c-neutral-950); margin: 24px 0 12px; }
.launch-search {
  display: flex; align-items: center; gap: 8px; width: 340px; height: 40px;
  padding: 0 16px; margin-bottom: 16px;
  border: 1px solid var(--c-neutral-200); border-radius: 999px; background: var(--c-white);
}
.launch-search:focus-within { border-color: var(--c-stroke-brand); }
.launch-search__icon { width: 20px; height: 20px; color: var(--c-neutral-600); flex: 0 0 auto; }
.launch-search__icon svg { width: 100%; height: 100%; }
.launch-search__input { border: 0; outline: 0; flex: 1; font: inherit; font-size: 15px; background: transparent; }
.launch-search__input::placeholder { color: var(--c-neutral-600); }
.launch-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-height: 344px; overflow-y: auto; padding: 2px;
}
.launch-card {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; cursor: pointer;
  background: var(--c-neutral-25); border: 1px solid var(--c-neutral-100); border-radius: 8px;
}
.launch-card:hover { border-color: var(--c-brand-200); background: var(--c-white); }
.launch-card__title { font-size: 18px; line-height: 27px; font-weight: 700; color: var(--c-brand-800); }
.launch-card__desc { font-size: 16px; line-height: 24px; color: var(--c-neutral-800); }
.launch-empty { grid-column: 1 / -1; text-align: center; color: var(--c-neutral-600); padding: 32px 0; }

/* ---- DS table extras (sort carets, empty state) ---- */
.demo-sortcaret { flex-direction: column; justify-content: center; gap: 0; }
.demo-sortcaret svg { width: 14px; height: 8px; display: block; }
.ll-table__sort:hover .demo-sortcaret { color: var(--c-neutral-950); }
.demo-table-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 56px 16px 72px; background: var(--c-white); text-align: center;
}
.demo-table-empty img { width: 240px; margin-bottom: 20px; }
.demo-table-empty__title {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 20px; font-weight: 700; color: var(--c-neutral-950);
}
.demo-table-empty__caption { font-size: 15px; color: var(--c-neutral-800); margin-top: 6px; }

/* ============================================================
   Form renderer (preview + parent fill) — fr-*
   ============================================================ */
/* Figma 4023:51249 — the filled form is a two-column shell: a 288px step rail
   on the left (neutral-25, 24px inset, hairline on its right edge) and a column
   holding the scrolling content pane + a 72px footer nav bar. */
.fr { display: flex; align-items: stretch; width: 100%; min-height: 0; }
.fr-rail {
  width: 288px; flex-shrink: 0; padding: 24px; background: var(--c-neutral-25);
  border-right: 1px solid var(--c-neutral-100); overflow-y: auto;
}
.fr-steps { display: flex; flex-direction: column; gap: 4px; }
/* 24px number marker pinned left, label indented 32px from the item edge. */
.fr-steps__item { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 12px; }
.fr-steps__marker { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.fr-steps__num {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box;
  font-size: 14px; font-weight: 700; color: var(--c-neutral-800);
  border: 2px solid var(--c-neutral-800);
}
/* 8px connector under the circle, centred (Figma Frame 427320745). */
.fr-steps__line { width: 1px; height: 8px; background: var(--c-neutral-300); }
.fr-steps__label { font-size: 16px; font-weight: 700; line-height: 24px; color: var(--c-neutral-950); }
.fr-steps__item.is-active .fr-steps__num {
  background: var(--c-surface-brand-strong); border-color: var(--c-surface-brand-strong); color: #fff;
}
.fr-steps__item.is-active .fr-steps__label { color: var(--c-brand-800); }
.fr-steps__item.is-done .fr-steps__num {
  background: var(--c-success-50); border-color: var(--c-success-800); color: var(--c-success-800);
}
/* Free navigation (schema.navigation.allowFreeNavigation): steps are clickable. */
.fr-rail--nav .fr-steps__item[role="button"] { cursor: pointer; }
.fr-rail--nav .fr-steps__item[role="button"]:hover .fr-steps__label { color: var(--c-brand-800); }

.fr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Content pane: 24px top, 64px sides and bottom, form column centred. */
.fr-content {
  flex: 1; min-height: 0; overflow-y: auto; background: #fff;
  padding: 24px 64px 64px; display: flex; flex-direction: column; gap: 24px;
}
/* WYSIWYG: the form column is capped at the builder page width (.bldr-page,
   620px) and centred, so preview and canvas lay fields out identically. */
.fr-content > * { width: 100%; max-width: 620px; margin-inline: auto; }
.fr--mobile .fr-content { padding: 16px; }
/* ---- Phone layout (Parents App 2500:141442 / 2500:141467) ----------------
   One column: the form scrolls, and the stepper strip + nav bar are pinned to
   the bottom. The rail turns into a horizontally scrolling row of numbered
   chips; its own thin scrollbar is the little progress bar under the strip. */
.fr--mobile { flex-direction: column; }
.fr--mobile .fr-main { min-height: 0; }
.fr--mobile .fr-rail {
  width: auto; padding: 10px 16px 0; overflow-x: auto; overflow-y: hidden;
  flex-shrink: 0; border-right: 0; border-top: 1px solid var(--c-neutral-100);
  scrollbar-width: thin;
}
.fr--mobile .fr-rail::-webkit-scrollbar { height: 3px; }
.fr--mobile .fr-rail::-webkit-scrollbar-thumb { background: var(--c-neutral-800); border-radius: 2px; }
.fr--mobile .fr-rail::-webkit-scrollbar-track { background: transparent; }
.fr--mobile .fr-steps { flex-direction: row; gap: 24px; }
.fr--mobile .fr-steps__item { align-items: center; gap: 8px; padding-bottom: 10px; white-space: nowrap; }
.fr--mobile .fr-steps__marker { flex-direction: row; }
.fr--mobile .fr-steps__line { display: none; }
.fr--mobile .fr-steps__num { width: 20px; height: 20px; font-size: 12px; border-width: 1px; }
.fr--mobile .fr-steps__label { font-size: 14px; line-height: 20px; }
/* Pages already answered read as plain grey labels — no circle. */
.fr--mobile .fr-steps__item.is-done .fr-steps__marker { display: none; }
.fr--mobile .fr-steps__item.is-done .fr-steps__label { color: var(--c-neutral-600); font-weight: 600; }
/* Nav row: circular Previous, then the CTA across the rest of the width. */
.fr--mobile .fr-nav { gap: 8px; background: #fff; border-top: 0; min-height: 0; }
.fr--mobile .fr-nav__cta { flex: 1; }
/* Standard canvas rhythm: 12px between stacked items, 16px column gutter. */
.fr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 16px; }
.fr-cell { min-width: 0; }
.fr--mobile .fr-grid > .fr-cell { grid-column: span 6 !important; }

.fr-field { display: flex; flex-direction: column; gap: 6px; }
/* Label row mirrors the DS (`vendor/css/input-field.css .ll-field__label`):
   bold 14 label + EITHER a red `*` OR a regular-weight "(optional)". */
.fr-field__label, .fr-field__sublabel {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-weight: 600; font-size: 14px; color: var(--c-neutral-800);
}
.fr-field__label .req, .fr-field__sublabel .req,
.fr-terms__label .req { color: var(--c-error-700); font-weight: 400; }
.fr-field__label .opt, .fr-field__sublabel .opt { color: var(--c-neutral-800); font-weight: 400; }
.fr-field__sublabel { margin-bottom: 4px; }
.fr-field__help { font-size: 14px; color: var(--c-neutral-800); }
.fr-options { display: flex; flex-direction: column; gap: 8px; }
/* Phone = ONE box (DS): country code + caret, hairline divider, number input
   flush inside. The wrapper owns the border and the hover/focus states; the
   inner .input is stripped back to bare text. */
.fr-phone {
  display: flex; align-items: stretch; min-height: 48px;
  border: 1.5px solid var(--c-neutral-200); border-radius: 8px; background: var(--c-white);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.fr-phone:hover:not(.is-disabled) { border-color: var(--c-stroke-brand-strong); }
.fr-phone:focus-within {
  border-color: var(--c-stroke-brand-strong); box-shadow: 0 0 0 3px var(--c-stroke-brand);
}
.fr-phone__cc {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  padding: 12px; font-size: 16px; color: var(--c-neutral-950); white-space: nowrap;
  border-right: 1px solid var(--c-neutral-100);
}
.fr-phone__caret { width: 16px; height: 16px; display: inline-flex; color: var(--c-neutral-800); }
.fr-phone__caret svg { width: 100%; height: 100%; display: block; }
.fr-phone .input {
  border: 0; border-radius: 0; min-height: 0; background: transparent; flex: 1; min-width: 0;
}
.fr-phone .input:hover:not(:disabled), .fr-phone .input:focus {
  border: 0; box-shadow: none; background: transparent;
}
.fr-phone.is-disabled { background: var(--c-neutral-50); border-color: transparent; }
.bcard__body .fr-phone.is-disabled { background: var(--c-white); border-color: var(--c-neutral-200); }
.fr-id { display: flex; gap: 12px; flex-wrap: wrap; }
.fr-id__part { flex: 1 1 160px; min-width: 0; }
.fr-range, .fr-duration { display: flex; gap: 8px; align-items: center; }
/* Address = street box + zip box on one row (Figma 4400:389849 — 440 / 16 / 140
   inside a 596 column). Zip keeps its 140px until the row is too narrow to hold
   both, then the pair stacks. */
.fr-address { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.fr-address__street { flex: 1 1 240px; min-width: 0; }
.fr-address__zip { flex: 0 1 140px; min-width: 0; }
.fr-upload {
  display: flex; align-items: center; gap: 10px; padding: 16px;
  border: 1.5px dashed var(--c-neutral-200); border-radius: 10px; cursor: pointer;
  color: var(--c-neutral-700); background: var(--c-neutral-25);
}
.fr-upload:hover { border-color: var(--c-stroke-brand-strong); color: var(--c-content-brand-strong); }
.fr-upload--disabled { cursor: default; pointer-events: none; }
.fr-upload__icon { width: 20px; height: 20px; display: inline-flex; }
.fr-upload__icon svg { width: 100%; height: 100%; }
.fr-terms { display: flex; align-items: flex-start; gap: 10px; }
.fr-terms__label a { color: var(--c-brand-800); text-decoration: underline; }
.fr-signature {
  height: 88px; border: 1.5px dashed var(--c-neutral-200); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--c-neutral-25);
}
.fr-signature__ink { font-family: 'Nunito', cursive; font-style: italic; font-size: 22px; color: var(--c-brand-800); }
.fr-payment {
  border: 1px solid var(--c-neutral-100); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; background: var(--c-neutral-25);
}
.fr-payment__row { display: flex; justify-content: space-between; font-size: 16px; }
.fr-payment__row span { color: var(--c-neutral-700); }
.fr-payment__note { font-size: 14px; color: var(--c-brand-800); }
.fr-embed {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px dashed var(--c-neutral-200); border-radius: 8px; color: var(--c-neutral-700);
  font-size: 14px; overflow: hidden;
}
.fr-embed__badge { width: 20px; height: 20px; display: inline-flex; flex-shrink: 0; }
.fr-embed__badge svg { width: 100%; height: 100%; }
/* Section header — Figma 4340-382037 type styles.
   1 = Heading/LL H4 24 Extra (Nunito 800) · 2 = Sub Heading 20 Bold
   3 = Body 18 Bold · 4 = Body 16 Bold. */
.fr-heading { color: var(--c-neutral-950); margin: 0; word-break: break-word; }
.fr-heading--1 { font-family: 'Nunito', 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 24px; line-height: 1.3; }
.fr-heading--2 { font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 20px; line-height: 1.3; }
.fr-heading--3 { font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.5; }
.fr-heading--4 { font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.5; }
/* Block rules (p / ul / ol / li) are shared with .editor__content — see the
   rich text editor block above. */
.fr-richtext { font-size: 14px; line-height: 1.55; }
.fr-columns { display: grid; column-gap: 16px; row-gap: 12px; }
.fr-columns__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fr-repeat { display: flex; flex-direction: column; gap: 12px; }
/* One card per repeat (Figma 4342:382702): neutral-25 fill, 1px neutral-100,
   8px radius, 16px padding, 12px between fields. */
.fr-repeat__row {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--c-neutral-25);
  border: 1px solid var(--c-neutral-100); border-radius: 8px; padding: 16px;
}
.fr-repeat__fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Sits on the first field's input line (label 21 + gap 6 + half of the 48 box). */
.fr-repeat__remove {
  flex-shrink: 0; margin-top: 39px; width: 24px; height: 24px; border: 0; background: none;
  cursor: pointer; color: var(--c-neutral-800); border-radius: 50%; padding: 0;
}
.fr-repeat__remove:hover { background: var(--c-dim-06); color: var(--c-error-800); }
.fr-repeat__remove svg { width: 100%; height: 100%; }
/* "+ Add …" DS ghost buttons sit flush with the content column: strip the 16px
   ghost padding on the left, keep the pill hover box. */
.bp-addbtn { align-self: flex-start; margin-left: -16px; }
/* Same button in respondent-facing / workflow cards — inline, no negative pull. */
.fr-addbtn { align-self: flex-start; }
/* Text button — no box, aligned on the label (DS ghost with padding stripped). */
.fr-addlink {
  border: 0; background: none; color: var(--c-brand-800); font-weight: 600; font-size: 14px;
  cursor: pointer; padding: 4px 0; text-align: left; font-family: inherit;
}
.fr-addlink:hover { text-decoration: underline; }
.fr-media {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px;
  background: var(--c-neutral-50); border-radius: 10px; overflow: hidden; color: var(--c-neutral-600);
}
.fr-media__ph { width: 24px; height: 24px; display: inline-flex; }
.fr-media__ph svg { width: 100%; height: 100%; }
.fr-singpass {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  background: #f4333d; color: #fff; border: 0; border-radius: 8px; font-weight: 700;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.fr-singpass__logo { font-style: italic; font-weight: 700; }
.fr-singpass__logo2 { font-style: italic; font-weight: 700; margin-left: -8px; color: #ffd0d2; }
/* Footer nav bar — Figma 4023:51261: 72px tall, 16px inset, neutral-25 with a
   hairline on top, Previous and Next/Submit pushed to the outer edges. */
.fr-nav {
  display: flex; gap: 16px; align-items: center; flex-shrink: 0;
  min-height: 72px; padding: 16px; box-sizing: border-box;
  background: var(--c-neutral-25); border-top: 1px solid var(--c-neutral-100);
}
.fr-done { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fr-done__icon { width: 48px; height: 48px; color: var(--c-success-500); }
.fr-done__icon svg { width: 100%; height: 100%; }
.fr-done__title { font-size: 22px; font-weight: 700; font-family: 'Nunito Sans', system-ui, sans-serif; }
.fr-done__msg { color: var(--c-neutral-700); }
.fr-empty { color: var(--c-neutral-600); text-align: center; padding: 24px; }

/* ============================================================
   Builder — bldr-* / bcard / bp-* (full-screen own chrome)
   ============================================================ */
.bldr { display: flex; flex-direction: column; height: 100vh; background: var(--c-neutral-25); }
/* Form Editor Header (Figma 4325:382836): 72px bar, 16/12 padding, gap 16;
   bare 24px back arrow; entity info column; right cluster gap 12. */
.bldr-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--c-neutral-100);
  flex-shrink: 0;
}
.bldr-top__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bldr-top__right { display: flex; align-items: center; gap: 12px; }
/* Figma: secondary min-width 104, main CTA min-width 144, both h40 pills. */
.bldr-top__right .ll-button[data-variant="outline"] { min-width: 104px; }
.bldr-top__right .ll-button[data-variant="filled-strong"] { min-width: 144px; }
/* Header strokes are the softer neutral-100, not the DS default neutral-300. */
.bldr-top__right .ll-icon-button[data-variant="outline"],
.bldr-top__right .ll-button[data-variant="outline"] { --border-strong: var(--c-neutral-100); }
.bldr-back {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-neutral-950); flex-shrink: 0;
}
.bldr-back svg { width: 100%; height: 100%; }
.bldr-titleblock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bldr-titlerow {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: inherit;
}
.bldr-titlerow:hover .bldr-title { text-decoration: underline; }
/* Static title — renaming opens the Rename modal (Figma 4056-40041). */
.bldr-title {
  font-family: 'Nunito Sans', system-ui, sans-serif; line-height: 1.5;
  font-size: 18px; font-weight: 700; color: var(--c-neutral-950);
  max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bldr-title__pen {
  width: 20px; height: 20px; color: var(--c-neutral-950); display: inline-flex;
  border: 0; background: none; padding: 0; cursor: pointer; flex-shrink: 0;
}
.bldr-title__pen svg { width: 100%; height: 100%; }
.bldr-saveline { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.bldr-saveline__icon { width: 16px; height: 16px; display: inline-flex; color: var(--c-neutral-950); }
.bldr-saveline__icon svg { width: 100%; height: 100%; }
.bldr-saved { color: var(--c-neutral-950); font-weight: 600; white-space: nowrap; }
.bldr-savedat { color: var(--c-neutral-600); }
.bldr-unpub {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-style: italic;
  color: var(--c-content-brand-strong); text-decoration: none;
}
.bldr-unpub:hover { text-decoration: underline; }

.bldr-main { display: flex; flex: 1; min-height: 0; }
.bldr-left {
  width: 264px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--c-neutral-100);
  display: flex; flex-direction: column; overflow-y: auto;
}
.bldr-left__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 14px 10px; position: sticky; top: 0; background: #fff; z-index: 1;
}
.bldr-left__title { font-weight: 700; font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 18px; }
/* Ghost buttons align on their label — the 12px sm padding hangs outside the
   panel's text column. */
/* Outlined pill (Figma 4023:21656) — box-aligned, no ghost-padding pull. */
.bldr-additem { margin-right: 0; }
/* Rows share the header's 14px text column; the highlight is a shape that
   bleeds 6px past the text on each side (Figma 246×40 pill). */
.bldr-outline { display: flex; flex-direction: column; padding: 0 14px 16px; }
.bldr-outline__empty { color: var(--c-neutral-600); font-size: 14px; padding: 12px 0; }
/* Figma outline rows: text only — no icon, no grip. */
.bldr-outline__item {
  position: relative; display: flex; align-items: center; min-height: 40px;
  margin: 0 -6px; padding: 0 6px; border-radius: 8px; cursor: pointer;
  font-size: 16px; min-width: 0; color: var(--c-neutral-950);
}
.bldr-outline__item:hover { background: var(--c-neutral-25); }
.bldr-outline__item.is-selected { background: var(--c-surface-brand-soft); }
.bldr-outline__item.is-dragover { box-shadow: inset 0 2px 0 0 var(--c-stroke-brand-strong); }
.bldr-outline__item--child > .bldr-outline__label { padding-left: 16px; }
.bldr-outline__grip { width: 14px; height: 14px; color: var(--c-neutral-300); cursor: grab; display: inline-flex; flex-shrink: 0; }
.bldr-outline__grip svg { width: 100%; height: 100%; }
.bldr-outline__icon { width: 20px; height: 20px; color: var(--c-content-brand-strong); display: inline-flex; flex-shrink: 0; }
.bldr-outline__icon svg { width: 100%; height: 100%; }
.bldr-outline__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bldr-outline__tail { height: 24px; }

.bldr-center { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* Step tab bar — Figma: reorder grip · tabs (active = tinted + underline) · + Add Step */
/* Step Tab Bar (Figma 4050:37210) — 36px strip: hamburger │ divider │ scrolling
   tab slot │ ‹ › paddles (overflow variant only) │ + Add Step. */
.bldr-steps {
  display: flex; align-items: center; gap: 0; height: 36px; flex-shrink: 0;
  background: #fff; border-bottom: 1px solid var(--c-neutral-100); padding: 0;
  position: sticky; top: 0; z-index: 2;
}
.bldr-steps__reorder {
  width: 36px; height: 36px; padding: 8px; display: inline-flex; flex-shrink: 0;
  color: var(--c-neutral-950); cursor: pointer; border: 0; background: none; border-radius: 6px;
}
.bldr-steps__reorder:hover { background: var(--c-neutral-25); }
.bldr-steps__reorder svg { width: 100%; height: 100%; }
.bldr-steps__div { width: 1px; height: 16px; background: var(--c-neutral-100); flex-shrink: 0; }
.bldr-steps__div--tall { height: 24px; }
/* Slot hugs its tabs so "+ Add Step" sits right after the last one (Figma
   default variant). It only takes the leftover width once the tabs actually
   overflow — that is the state that grows the paddles. */
.bldr-steps__slot {
  display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.bldr-steps.is-overflow .bldr-steps__slot { flex: 1 1 auto; }
.bldr-steps__slot::-webkit-scrollbar { display: none; }
.bldr-steps__tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 12px; cursor: pointer; flex-shrink: 0;
  font-size: 14px; font-weight: 700; color: var(--c-neutral-950);
  border-bottom: 1px solid var(--c-neutral-100); border-radius: 8px 8px 0 0; max-width: 240px;
}
.bldr-steps__tab:hover { background: var(--c-neutral-25); }
.bldr-steps__tab.is-active {
  background: var(--c-surface-brand-soft); color: var(--c-content-brand-strong);
  border-bottom: 2px solid var(--c-stroke-brand-strong); border-radius: 0;
}
.bldr-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 32px hit area / hover circle, 24px glyph. */
.bldr-steps__more {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: inherit; border-radius: 50%; flex-shrink: 0; cursor: pointer;
}
.bldr-steps__more:hover { background: var(--c-dim-06); }
.bldr-steps__more svg { width: 20px; height: 20px; }
/* Paddles exist only in the width-overflow variant. */
.bldr-steps__nav { display: none; align-items: center; gap: 12px; padding-right: 8px; flex-shrink: 0; }
.bldr-steps.is-overflow .bldr-steps__nav { display: flex; }
.bldr-steps__paddle {
  width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--c-neutral-950); display: inline-flex; align-items: center; justify-content: center;
}
.bldr-steps__paddle svg { width: 20px; height: 20px; }
.bldr-steps__paddle:hover { color: var(--c-brand-800); }
/* DS ghost button inside the tab strip. */
.bldr-steps__add { flex-shrink: 0; margin: 0 8px 0 4px; }

/* Canvas = grey stage holding one white "page" card */
.bldr-canvas { flex: 1; padding: 28px 24px 0; display: flex; flex-direction: column; }
.bldr-page {
  width: 100%; max-width: 620px; margin: 0 auto; background: #fff;
  border: 1px solid var(--c-neutral-100); border-radius: 10px; padding: 24px;
}
/* Drop-anywhere state: the page itself accepts a palette/card drag and appends
   at the end of the step, so the drag never has to hit a card or the tail strip. */
.bldr-page.is-droptarget { border-color: var(--c-brand-800); box-shadow: inset 0 0 0 1px var(--c-brand-800); }
/* Empty-state stroke = 8 on / 8 off dash. CSS `border: dashed` can't set a dash
   pattern, so the outline is an inline-SVG rect with stroke-dasharray='8 8'. */
.bldr-dropzone {
  border: 0; border-radius: 8px; background-color: transparent; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%23e6e6e6' stroke-width='4' stroke-dasharray='8 8'/></svg>");
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: pointer;
}
.bldr-dropzone.is-over {
  background-color: var(--c-brand-50);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%23005b82' stroke-width='4' stroke-dasharray='8 8'/></svg>");
}
.bldr-dropzone__hint { color: var(--c-neutral-600); font-size: 14px; font-style: italic; text-align: center; }
.bldr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 16px; align-items: start; }
/* Overlays the page's bottom padding (row gap 12 + padding 24 cancelled out) so
   the drop target adds no visible space under the last item. */
.bldr-grid__tail { height: 32px; margin: -12px 0 -24px; border-radius: 8px; }
.bldr-grid__tail.is-over { background: var(--c-brand-50); box-shadow: inset 0 2px 0 0 var(--c-brand-800); }
.bldr-cell { min-width: 0; }

/* Field block — Figma states: default (bare) · hover · selected · dragging */
.bcard {
  --bcard-bw: 2px;   /* live outline width — the action tabs and grip hang off it */
  /* Outline (not border) + a -4px margin, so the highlight and its 4px breathing
     room hang OUTSIDE the item: page padding stays 24px to the item itself and
     nothing shifts between default / hover / selected. */
  position: relative; background: transparent;
  outline: var(--bcard-bw) solid transparent;
  border-radius: 4px 0 4px 4px;   /* top-right square: the action tabs sit there */
  margin: -4px;
  cursor: grab; transition: outline-color .1s, background .1s;
}
.bcard:active { cursor: grabbing; }
/* Figma: 1px outline on hover, 2px on select — both hug the item at 4px.
   `:not(:has(.bcard:hover))`: a container is a sub-canvas, so hovering an item
   INSIDE it is not hovering the container — its outline, action tabs and resize
   bar all stay off while the pointer is over a child. */
.bcard:hover:not(:has(.bcard:hover)) { --bcard-bw: 1px; outline-color: var(--c-stroke-brand-strong); }
.bcard.is-selected, .bcard.is-selected:hover {
  --bcard-bw: 2px; outline-color: var(--c-stroke-brand-strong);
  background: var(--c-surface-brand-soft);
}
/* Hidden-by-setting items dim; no chip. */
.bcard.is-hidden > .bcard__body { opacity: .5; }
/* While dragging, the block leaves an empty slot of the same size behind. */
/* Dragged variant 4204:58708 — 2px dashed neutral-100 on neutral-25, content gone. */
.bcard.is-dragging, .bcard.is-dragging:hover {
  --bcard-bw: 2px; outline: 2px dashed var(--c-neutral-100);
  background: var(--c-neutral-25);
}
.bcard.is-dragging > .bcard__body { visibility: hidden; }
.bcard.is-dragging > .bcard__actions { display: none; }
/* "Insert here" drop indicator (Figma Insert component) */
.bcard.drop-before::before, .bcard.drop-after::before {
  content: ''; position: absolute; left: 0; right: 0; border-top: 2px solid var(--c-brand-800);
}
.bcard.drop-before::before { top: -6px; }
.bcard.drop-after::before { bottom: -6px; }
.bcard.drop-before::after, .bcard.drop-after::after {
  content: 'Insert here'; position: absolute; left: 50%; transform: translateX(-50%);
  background: var(--c-brand-800); color: #fff; font-size: 14px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap; z-index: 2;
}
.bcard.drop-before::after { top: -16px; }
.bcard.drop-after::after { bottom: -16px; }
/* Action tabs sit flush on top of the outline, right edges aligned — 32px,
   top corners rounded, 6px apart: move · duplicate · delete. */
.bcard__actions {
  position: absolute; right: calc(-1 * var(--bcard-bw)); top: calc(-32px - var(--bcard-bw));
  display: none; align-items: center; gap: 6px; z-index: 3;
}
.bcard:hover:not(:has(.bcard:hover)) > .bcard__actions,
.bcard.is-selected > .bcard__actions { display: flex; }
.bcard__act {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: #fff; padding: 6px;
  border-radius: 4px 4px 0 0;
}
.bcard__act svg { width: 20px; height: 20px; }
.bcard__act--move { background: var(--c-surface-brand-strong); cursor: grab; }
.bcard__act--move:active { cursor: grabbing; }
.bcard__act--dup { background: var(--c-surface-brand-strong); }
.bcard__act--dup:hover { background: var(--c-surface-brand-strong-hover, var(--c-brand-900)); }
.bcard__act--del { background: var(--c-error-800); }
.bcard__act--del:hover { background: #6b1c26; }
/* 4px only — the hover/selected outline hugs the item. */
.bcard__body { padding: 4px; pointer-events: none; }
/* The body is inert so canvas fields can't be typed into — but a container's
   sub-canvas (its own cards + Add Item) stays live. */
.bcard__body .bcard, .bcard__body .bcontainer, .bcard__body .bcontainer__col,
.bcard__body .bcontainer__add,
.bcard__body .bp-addbtn, .bcard__body .fr-addlink { pointer-events: auto; }

/* Width handle = Figma 4340:382157 — 4×52 brand-strong pill on the RIGHT edge,
   vertically centred, sitting on the outline (right:-5px off the content box). */
.bcard__resize {
  /* Centred ON the outline stroke: bar centre = card edge + bw/2. */
  position: absolute; right: calc(-2px - var(--bcard-bw) / 2); top: 50%; transform: translateY(-50%);
  width: 4px; height: 52px; max-height: calc(100% - 8px);
  border-radius: 9999px; background: var(--c-stroke-brand-strong); cursor: col-resize;
  display: none; z-index: 3;
}
.bcard:hover:not(:has(.bcard:hover)) > .bcard__resize,
.bcard.is-selected > .bcard__resize { display: block; }
/* 4px is too thin to grab — widen the hit area without changing the visual. */
.bcard__resize::before { content: ''; position: absolute; inset: -6px -8px; }
/* No hover darkening — the bar always matches the selection outline colour. */
.bcard.is-dragging > .bcard__resize { display: none; }
/* Drag ghost pill that follows the cursor */
.bldr-dragghost {
  position: fixed; top: -1000px; left: -1000px; display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--c-brand-800); color: var(--c-brand-800);
  border-radius: 6px; padding: 6px 10px; font-size: 14px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
.bldr-dragghost svg { width: 14px; height: 14px; }

/* Container = sub-canvas; its frames sit on the real 16px column gutter. */
.bcontainer { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* Empty Frame (Figma 4342:382485 / 4342:382628) — white, 2px `8 8` dashed
   neutral-100 stroke, 8px radius, 16/40 padding, Add Item centred. */
.bcontainer__col {
  border: 0; border-radius: 8px; padding: 8px; background-repeat: no-repeat;
  background-color: var(--c-white);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%23e6e6e6' stroke-width='4' stroke-dasharray='8 8'/></svg>");
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
/* Once it holds items the frame gets out of the way: no dashed outline, no
   padding — children align flush with the container's edges. */
.bcontainer__col:not(.is-empty) {
  padding: 0; background-image: none; background-color: transparent;
}
/* …except a repeatable group, which renders as the real repeat card
   (Figma 4342:382702): solid 1px neutral-100, 8px radius, 16px padding. */
.bcontainer--repeat .bcontainer__col:not(.is-empty) {
  padding: 16px; background-color: var(--c-neutral-25);
  border: 1px solid var(--c-neutral-100); border-radius: 8px;
}
.bcontainer__col.is-empty { padding: 40px 16px; align-items: center; justify-content: center; }
.bcontainer__col.is-over {
  background-color: var(--c-brand-50);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect width='100%25' height='100%25' rx='8' ry='8' fill='none' stroke='%23005b82' stroke-width='4' stroke-dasharray='8 8'/></svg>");
}
/* Text button: no box, brand label, 6px icon gap (gap comes from --gap). */
/* Figma Text Button (4342:382503): bare brand label, 20px plus, 6px gap — no
   pill, no fill, no underline. `.ll-button` prefix beats the DS ghost hover rule. */
.ll-button.bcontainer__add {
  padding: 4px 10px; height: auto; min-height: 32px; align-self: center;
  border-radius: 20px; --icon-size: 20px; color: var(--c-brand-800);
}
/* Flush with the sub-canvas grid — cancel the hover pill's own padding. */
.bcontainer__col:not(.is-empty) .ll-button.bcontainer__add { align-self: flex-start; margin-left: -10px; }
/* Hover = soft brand pill (DS ghost), never an underline. */
.ll-button.bcontainer__add:hover { background: var(--c-surface-brand-soft); text-decoration: none; }
.ll-button.bcontainer__add:active { background: var(--c-surface-brand-soft-hover, var(--c-brand-100)); }
/* Add Item ("Insert") panel — Figma: search + 3 columns of tinted items + hint */
.additem-pop {
  position: fixed; z-index: 300; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-neutral-100); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16); overflow: hidden;
}
.additem-pop__head {
  position: relative; padding: 12px 16px; border-bottom: 1px solid var(--c-neutral-100); flex-shrink: 0;
}
.additem-pop__searchicon {
  position: absolute; left: 30px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--c-neutral-700); display: inline-flex;
}
.additem-pop__searchicon svg { width: 100%; height: 100%; }
.additem-pop__search {
  width: 100%; border: 1px solid var(--c-neutral-200); border-radius: 999px;
  padding: 10px 14px 10px 40px; font: inherit; font-size: 14px; background: #fff;
}
.additem-pop__search:focus { outline: none; border-color: var(--c-stroke-brand); }
.additem-pop__body {
  flex: 1; overflow-y: auto; padding: 18px 16px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; align-content: start;
}
.additem-pop__group { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Enrolment straddles two of the three columns and flows its items row-major in
   a 2-col sub-grid — single-selects land on the left, multi-selects on the
   right (Figma 4050:39087). */
.additem-pop__group--wide {
  grid-column: span 2; display: grid; align-content: start;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 2px;
}
.additem-pop__group--wide .additem-pop__grouptitle { grid-column: 1 / -1; }
.additem-pop__grouptitle {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700;
  color: var(--c-neutral-950); margin-bottom: 6px;
}
.additem-pop__item {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px;
  cursor: pointer; font-size: 14px; min-width: 0;
}
.additem-pop__item:hover { background: var(--c-brand-50); }
/* Disabled entry — Figma 4397:67782: the group's colour tint drops back to
   neutral-50 and both icon and label go content/neutral-tertiary. Used for
   singleton kinds (enrolment prefs) that are already on the form. */
.additem-pop__item.is-disabled { cursor: not-allowed; }
.additem-pop__item.is-disabled:hover { background: transparent; }
.additem-pop__item.is-disabled .additem-pop__icon {
  background: var(--c-neutral-50); color: var(--c-neutral-600);
}
.additem-pop__item.is-disabled .additem-pop__label { color: var(--c-neutral-600); }
.additem-pop__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.additem-pop__icon {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-brand-soft); color: var(--c-content-brand-strong);
}
.additem-pop__icon svg { width: 16px; height: 16px; }
.additem-pop__icon[data-group="selection"]     { background: var(--c-prune-50);      color: var(--c-prune-800); }
.additem-pop__icon[data-group="personal"]      { background: var(--c-strawberry-50); color: var(--c-strawberry-800); }
.additem-pop__icon[data-group="dateTime"]      { background: var(--c-papaya-50);     color: var(--c-papaya-800); }
.additem-pop__icon[data-group="enrolment"]     { background: var(--c-avocado-50);    color: var(--c-avocado-800); }
.additem-pop__icon[data-group="uploads"]       { background: var(--c-mango-50);      color: var(--c-mango-800); }
.additem-pop__icon[data-group="payment"]       { background: var(--c-pear-50);       color: var(--c-pear-800); }
.additem-pop__icon[data-group="integrations"]  { background: var(--c-error-50);      color: var(--c-error-800); }
.additem-pop__icon[data-group="others"]        { background: var(--c-neutral-50); color: var(--c-neutral-800); }
.additem-pop__empty { grid-column: 1 / -1; color: var(--c-neutral-600); font-size: 14px; padding: 12px 4px; }
.additem-pop__foot {
  border-top: 1px solid var(--c-neutral-100); padding: 12px 16px; flex-shrink: 0;
  font-size: 14px; font-style: italic; color: var(--c-neutral-700);
}

/* Diagnostics tray */
.bldr-diag { position: sticky; bottom: 0; padding: 8px 24px 12px; margin-top: auto; }
.bldr-diag__badge {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: #fff; border: 1px solid var(--c-warning-500); color: var(--c-warning-800);
  font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
.bldr-diag__badge.has-errors { border-color: var(--c-error-500); color: var(--c-error-800); }
.bldr-diag__badge > span { width: 20px; height: 20px; display: inline-flex; }
.bldr-diag__badge > span svg { width: 100%; height: 100%; }
.bldr-diag__list {
  background: #fff; border: 1px solid var(--c-neutral-100); border-radius: 12px; margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10); max-height: 200px; overflow-y: auto; padding: 6px;
}
.bldr-diag__item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 16px; cursor: pointer;
}
.bldr-diag__item:hover { background: var(--c-neutral-25); }
.bldr-diag__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bldr-diag__item--error .bldr-diag__dot { background: var(--c-error-500); }
.bldr-diag__item--warning .bldr-diag__dot { background: var(--c-warning-500); }

/* Preview mode — toolbar matches Figma 4023:51236 (60px grey bar, "Viewing as"
   text + role chip on the left, white pill device toggle on the right). */
.bldr-prevbar { display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #f0f0f0; border-bottom: 1px solid var(--c-neutral-100); }
.bldr-center > .bldr-prevbar { padding: 16px 24px 0; margin-bottom: 8px;
  background: none; border-bottom: 0; }
.bldr-prevbar__viewing { font: 400 16px/1.5 'Nunito Sans', sans-serif; color: var(--c-neutral-800); }
/* Device toggle — Figma 4391:386800: 100×36 white pill, 2px inset, fully
   rounded, holding three flush 32×32 slots with 20px icons. The active/hover
   state is a CIRCULAR dim-06 fill (not a rounded square) plus a brand icon. */
.bldr-prevbar__devices { display: flex; align-items: center; gap: 0; margin-left: auto;
  padding: 2px; background: #fff; border-radius: 9999px; }
.bldr-prevbar__devices .ll-icon-button { --size: 32px; --icon-size: 20px;
  background: transparent; color: var(--c-neutral-800); border-radius: 50%; }
.bldr-prevbar__devices .ll-icon-button:hover { background: var(--c-dim-06); }
.bldr-prevbar__devices .ll-icon-button.is-active {
  background: var(--c-dim-06); color: var(--c-content-brand-strong);
}
/* The stage owns the viewport height so the rendered form scrolls inside the
   frame — that is what lets the phone layout pin its stepper + nav to the
   bottom instead of trailing off the end of the content. */
.bldr-prevstage { flex: 1; min-height: 0; padding: 0 24px 24px; display: flex; justify-content: center; }
.bldr-prevframe { margin: 0 auto; }
/* Builder preview stage keeps the device widths on the frame itself. */
.bldr-prevstage .bldr-prevframe {
  border: 1px solid var(--c-neutral-100); border-radius: 8px; overflow: hidden;
  flex: 1; min-height: 0; display: flex; margin: 0;
}
.bldr-prevstage .bldr-prevframe > .fr { flex: 1; min-height: 0; }
.bldr-prevframe--desktop { max-width: 860px; }
.bldr-prevframe--tablet { max-width: 720px; }
.bldr-prevframe--mobile { max-width: 390px; }

/* Detail-page Preview tab — Figma 4023:51235: the toolbar and the rendered form
   share ONE r8 bordered card, 704px tall, and the form scrolls inside it. */
.prevcard {
  display: flex; flex-direction: column; height: 704px; overflow: hidden;
  background: #fff; border: 1px solid var(--c-neutral-100); border-radius: 8px;
}
.prevcard > .bldr-prevframe { flex: 1; min-height: 0; margin: 0; display: flex; }
.prevcard > .bldr-prevframe > .fr { min-height: 0; }
/* Device toggles narrow the viewport the form is rendered into; the phone
   viewport swaps the side rail for the bottom-pinned stepper strip (.fr--mobile),
   matching the Parents App. */
.prevcard--tablet > .bldr-prevframe > .fr,
.prevcard--mobile > .bldr-prevframe > .fr { margin: 0 auto; border-inline: 1px solid var(--c-neutral-100); }
.prevcard--tablet > .bldr-prevframe > .fr { max-width: 720px; }
.prevcard--mobile > .bldr-prevframe > .fr { max-width: 390px; }

/* Right context panel — Figma 4204:66657: 354px wide, a flat 16px inset on
   every side. Accordion rules and content share the same 322px column, so
   nothing (dividers included) runs to the panel edge. */
.bldr-right {
  width: 354px; flex-shrink: 0; background: #fff; border-left: 1px solid var(--c-neutral-100);
  overflow-y: auto; display: flex; flex-direction: column;
}
.bp-head {
  display: flex; align-items: center; gap: 8px; padding: 16px;
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 18px;
}
/* Scrolling body that owns the 16px gutter. Accordions inside are edge-to-edge
   of the 322px column, never of the panel. */
.bp-body { display: flex; flex-direction: column; padding: 0 16px; }
.bp-head__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ✕ returns the panel to step details */
.bp-head__close {
  width: 32px; height: 32px; padding: 6px; flex-shrink: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; color: var(--c-neutral-950); display: inline-flex;
}
.bp-head__close:hover { background: var(--c-dim-06); }
.bp-head__close svg { width: 100%; height: 100%; }
/* Figma accordion: 1px rule top and bottom, title wrapper py-16, body pb-16
   with a 12px gap under the title. Adjacent accordions share one rule. */
.bp-acc { border-top: 1px solid var(--c-neutral-50); }
.bp-acc:last-child { border-bottom: 1px solid var(--c-neutral-50); }
/* Head row + collapsed summary are one hit target. */
.bp-acc__toggle { cursor: pointer; user-select: none; }
.bp-acc__head {
  display: flex; align-items: center; justify-content: space-between; padding: 16px 0;
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 16px;
}
.bp-acc.is-open .bp-acc__head { padding-bottom: 12px; }
.bp-acc__toggle:hover .bp-acc__caret { color: var(--c-brand-800); }
/* Accordion caret — 24px line glyph (not the 16px filled dropdown caret). */
.bp-acc__caret { width: 24px; height: 24px; display: inline-flex; color: var(--c-neutral-950); transition: transform .15s; }
.bp-acc__caret svg { width: 100%; height: 100%; }
.bp-acc.is-open .bp-acc__caret { transform: rotate(180deg); }
.bp-acc__body { display: none; padding: 0 0 16px; flex-direction: column; gap: 12px; }
.bp-acc.is-open .bp-acc__body { display: flex; }
/* Collapsed-state readout under the head (e.g. Visibility → "Always show").
   Brand-coloured once a condition rule is actually set. */
.bp-acc.has-summary .bp-acc__head { padding-bottom: 4px; }
.bp-acc__summary {
  padding: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--c-neutral-800);
  overflow-wrap: anywhere;
}
/* Colour alone carries the "rule is set" signal, weight stays regular. */
.bp-acc__summary.is-brand { color: var(--c-content-brand-strong); }
.bp-note { font-size: 14px; color: var(--c-neutral-600); line-height: 1.4; }

/* Toggle row: regular 16 label + regular 14 sub, both neutral-secondary until on. */
/* Whole row toggles — label, sub text and switch are one hit target. */
.bp-switchrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0; color: var(--c-neutral-700);
  cursor: pointer; user-select: none;
}
.bp-switchrow.is-on { color: var(--c-neutral-950); }
.bp-switchrow__label { font-weight: 400; font-size: 16px; color: inherit; }
.bp-switchrow__sub { font-size: 14px; color: inherit; margin-top: 2px; }
/* DS Switch, size 24 (Figma 4023:10941): 48×24 track, 18px knob inset 3px. */
.bswitch {
  width: 48px; height: 24px; border-radius: 999px; background: var(--c-neutral-200); border: 0;
  position: relative; cursor: pointer; flex-shrink: 0; padding: 0;
  transition: background 160ms cubic-bezier(.4, 0, .2, 1);
}
.bswitch.is-on { background: var(--c-surface-brand-strong); }
/* Knob slides on transform (not `left`) so it stays on the compositor. */
.bswitch__knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform 160ms cubic-bezier(.4, 0, .2, 1);
}
.bswitch.is-on .bswitch__knob { transform: translateX(24px); }
@media (prefers-reduced-motion: reduce) {
  .bswitch, .bswitch__knob { transition: none; }
}

.bseg { display: inline-flex; border: 1px solid var(--c-neutral-100); border-radius: 8px; overflow: hidden; }
.bseg__opt {
  padding: 7px 14px; border: 0; background: #fff; cursor: pointer; font-size: 14px; font-weight: 600;
  font-family: inherit; color: var(--c-neutral-800);
}
.bseg__opt + .bseg__opt { border-left: 1px solid var(--c-neutral-100); }
.bseg__opt.is-active { background: var(--c-brand-50); color: var(--c-brand-800); font-weight: 700; }

.bp-options { display: flex; flex-direction: column; gap: 8px; }
.bp-options__row { display: flex; align-items: center; gap: 6px; }
.bp-options__x {
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--c-neutral-600);
  border-radius: 50%; padding: 6px; flex-shrink: 0; display: inline-flex;
}
.bp-options__x:hover { background: var(--c-dim-06); color: var(--c-error-800); }
.bp-options__x svg { width: 100%; height: 100%; }

.bp-subcard {
  border: 1px solid var(--c-neutral-100); border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.bp-subcard__head { display: flex; align-items: center; gap: 8px; }
.bp-subcard__title { font-weight: 700; font-size: 16px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bp-chips > .ll-field { width: auto; min-width: 150px; }
.bp-durrow { display: flex; gap: 8px; }
.bp-durrow > .ll-field:last-child { width: 120px; flex-shrink: 0; }
.bp-durrow > .ll-field:first-child { flex: 1; min-width: 0; }

/* Condition-row atoms — the builder panel's inline DNF editor moved into the
   Conditions modal, but the Automated Workflows editor still uses these. */
.bp-cond__title { font-weight: 700; font-size: 14px; color: var(--c-neutral-800); text-transform: uppercase; letter-spacing: .03em; }
.bp-cond__row { display: flex; flex-direction: column; gap: 6px; position: relative; padding-right: 26px; }
.bp-cond__row .bp-options__x { position: absolute; top: 0; right: -4px; }
.bp-cond__row + .bp-cond__row { border-top: 1px dashed var(--c-neutral-100); padding-top: 10px; }
.bp-cond__row + .bp-cond__row::before { content: 'and'; font-size: 14px; font-weight: 700; color: var(--c-neutral-600); }

/* "Set Condition" pill — white/neutral outline, 24px NetworkX leading icon
   (comes from the global 40px-button icon scale). */
.bp-setcond { margin-top: 4px; }
/* Figma Divider, 12px in-section spacing either side. */
.bp-divider { border-top: 1px solid var(--c-neutral-100); margin: 12px 0; }

/* ---- Conditions modal — drag-and-drop rule canvas (Figma 4373:68379) ----
   1128x762 shell · canvas LEFT, 360px field rail RIGHT. Storage is still the
   DNF on visibility.any: one card = one OR group, one sub-card = one AND. */
/* Two classes on purpose: this must beat the .modal--xl width regardless of
   where either rule lands in the file. */
.modal.modal--cond {
  width: 1128px; max-width: calc(100vw - 48px);
  height: 762px; max-height: calc(100vh - 48px);
}
/* Rail + canvas own their scrolling, so the body goes flush and fixed. */
.modal__body--flush { padding: 0; overflow: hidden; display: flex; }
.cb { display: flex; flex: 1; min-width: 0; align-items: stretch; }

/* ---- canvas (left) ---- */
.cb-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cb-canvas {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 24px; display: flex; flex-direction: column; gap: 24px;
}
/* One OR group — grey surface holding white condition cards. */
.cb-card {
  border: 1px solid var(--c-neutral-100); border-radius: 8px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; background: var(--c-neutral-25);
}
.cb-card.is-over { border-color: var(--c-stroke-brand-strong); background: var(--c-brand-50); }
.cb-card__title {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700; font-size: 16px;
  line-height: 1.5; color: var(--c-neutral-950);
}
/* One AND'd condition — white, sitting on the grey rule card. */
.cb-cond {
  background: var(--c-white); border: 1px solid var(--c-neutral-100);
  border-radius: 8px; padding: 16px;
}
.cb-cond__row { display: flex; gap: 12px; align-items: center; }
/* 24px DotsSixVertical grip (Figma 4373:68380) — the row's only drag handle, so
   pointer drags that start inside a value control still select text. */
.cb-cond__grip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 64px;
  background: none; color: var(--c-neutral-600); cursor: grab;   /* content/neutral-tertiary */
}
.cb-cond__grip svg { width: 100%; height: 100%; display: block; }
.cb-cond__grip:hover { color: var(--c-content-brand-strong); }
.cb-cond__grip:focus-visible { outline: 2px solid var(--c-stroke-brand-strong); outline-offset: 2px; }
.cb-cond__grip:active { cursor: grabbing; }
.cb-cond.is-dragging { opacity: .4; }
/* Insertion point while a row is dragged over another row. */
.cb-cond.is-over-before { box-shadow: inset 0 3px 0 0 var(--c-stroke-brand-strong); }
.cb-cond.is-over-after  { box-shadow: inset 0 -3px 0 0 var(--c-stroke-brand-strong); }
/* Two lines (Figma 4373:68387): label + operator chip, then the value control on
   its own full-width line. */
.cb-cond__wrap {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  align-items: stretch; justify-content: center;
}
/* Line 1 — the label and the chip stay inline; a long label wraps the chip down. */
.cb-cond__head {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0;
}
.cb-cond__field {
  font-size: 16px; line-height: 1.5; color: var(--c-neutral-950);
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.cb-cond__field.is-long { flex: 1 0 100%; }
/* Row kept from an older rule that points at a later step (or a deleted field):
   it reads empty at runtime, so say so rather than rendering it as normal. */
.cb-cond__field.is-stale {
  color: var(--c-papaya-800); text-decoration: underline dotted; text-underline-offset: 3px;
}
/* Operator = DS brand Chip (Tags): 32px, brand-soft fill, brand-200 stroke,
   brand-800 label, 16px caret. Opens the same DS menu popover as a DS select. */
.cb-op {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 32px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid var(--c-brand-200); background: var(--c-brand-50);
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--c-content-brand-strong);
  cursor: pointer; transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.cb-op__label { padding: 0 4px; }
.cb-op:hover { background: var(--c-brand-100); border-color: var(--c-brand-500); }
.cb-op.is-focus, .cb-op:focus-visible {
  outline: none; border-color: var(--c-stroke-brand-strong);
  box-shadow: 0 0 0 3px var(--c-stroke-brand);
}
.cb-op__caret { width: 16px; height: 16px; display: inline-flex; flex-shrink: 0; color: var(--c-content-brand-strong); }
.cb-op__caret svg { width: 100%; height: 100%; display: block; }
/* The value control owns the second line outright, whatever its shape. */
.cb-cond__value { width: 100%; }
.cb-cond__remove { display: flex; align-items: center; height: 48px; flex-shrink: 0; }
/* Dashed AND / OR targets — just the italic operator word, centred. Transparent
   so each reads against whatever it sits on (grey card for AND, canvas for OR). */
.cb-drop {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 16px; text-align: center;
  border: 2px dashed var(--c-neutral-100); border-radius: 8px; background: transparent;
  font-size: 16px; line-height: 1.5; font-style: italic; color: var(--c-neutral-800);
  transition: border-color 120ms, background 120ms, color 120ms;
}
/* The AND frame lives inside a rule card and reads as the next condition row
   waiting to be filled, so it takes the white sub-card fill. The tail OR frame
   and the empty-canvas frame stay transparent on the canvas. */
.cb-card > .cb-drop { background: var(--c-white); }
.cb-drop.is-over {
  border-color: var(--c-stroke-brand-strong); background: var(--c-brand-50);
  color: var(--c-content-brand-strong);
}
/* Empty canvas — one frame filling the whole canvas instead of a 48px strip. */
.cb-drop--empty { flex: 1; min-height: 240px; font-style: normal; }

/* ---- field rail (right) ---- */
.cb-rail {
  width: 360px; flex-shrink: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--c-white); border-left: 1px solid var(--c-neutral-100);
}
.cb-rail__inner {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.cb-rail__hint { margin: 0; font-size: 16px; line-height: 1.5; color: var(--c-neutral-800); }
.cb-rail__empty { font-size: 16px; line-height: 1.5; color: var(--c-neutral-800); }
/* DS Search Bar: 40px pill, neutral-300 stroke, 24px magnifier. */
.cb-search {
  display: flex; align-items: center; gap: 8px; height: 40px; flex-shrink: 0;
  padding: 8px 8px 8px 16px; border-radius: 20px;
  border: 1px solid var(--c-neutral-300); background: var(--c-white);
}
.cb-search__icon { width: 24px; height: 24px; display: inline-flex; flex-shrink: 0; color: var(--c-neutral-800); }
.cb-search__icon svg { width: 100%; height: 100%; display: block; }
.cb-search__input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--c-neutral-950);
}
.cb-search__input::placeholder { color: var(--c-neutral-800); }
/* One step's chips, wrapping inline under a full-width heading. */
.cb-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-content: center; }
.cb-group__title {
  flex: 1 0 100%;
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px;
  line-height: 1.5; color: var(--c-neutral-950);
}
/* DS Chips (Tags), draggable. Also click/Enter-activated so the builder works
   without a pointer drag. */
.cb-tag {
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  height: 40px; padding: 4px 12px; border-radius: 8px;
  border: 1px solid var(--c-stroke-neutral-secondary); background: var(--c-white);
  font-size: 16px; line-height: 1.5; color: var(--c-neutral-800);
  cursor: grab; min-width: 0;
}
.cb-tag:hover { border-color: var(--c-stroke-brand-strong); color: var(--c-content-brand-strong); }
.cb-tag:focus-visible { outline: 2px solid var(--c-stroke-brand-strong); outline-offset: 1px; }
.cb-tag:active { cursor: grabbing; }
.cb-tag.is-dragging { opacity: .4; }
.cb-tag__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Footer per the frame: 16px gap, Secondary Option + Main CTA min widths. */
.modal--cond .modal__footer { gap: 16px; }
.cb-btn-reset { min-width: 104px; }
.cb-btn-save { min-width: 144px; }

/* ---- DS Input Field (vendor .ll-field) inside the 354px details panel ----
   Panel controls are the real DS component, so only layout is patched here:
   labels wrap (DS default is nowrap), and rows share width. */
.bldr-right .ll-field { min-width: 0; }
.bldr-right .ll-field__label-text { white-space: normal; }
.bp-options__row > .ll-field { flex: 1; min-width: 0; }
/* Panel textareas are compact — DS default box is 144px tall. */
.bldr-right .ll-field--long-text .ll-field__box { min-height: 88px; }
.bp-cond__row > .ll-field { width: 100%; }
.fr-options > .ll-field { width: 100%; }
/* Empty single-select shows the placeholder in neutral-tertiary. */
.ll-field.is-placeholder .ll-field__value { color: var(--c-neutral-600); }

/* ---- multi-value tag box (LLUI.multiSelectIn) ----
   Builder/admin chrome only, so it keeps its prompt (see the no-placeholder
   rule: respondent-facing inputs render empty, builder pickers do not). */
.ll-multi .ll-field__chips { min-height: 32px; }
/* DS Chips (Tags) at 28px; a long value ellipsises instead of widening the box. */
.ll-multi .ll-chip { max-width: 100%; min-width: 0; }
.ll-multi .ll-chip__label { min-width: 0; }
.ll-multi__placeholder {
  font-size: 16px; line-height: 1.5; color: var(--c-neutral-600); padding: 4px 0;
}
/* Typed entry shares the box with the chips and grows to fill the last row. */
.ll-multi__input {
  flex: 1 1 96px; min-width: 96px; align-self: stretch;
  border: 0; background: none; outline: none; padding: 4px 0;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--c-neutral-950);
}
.ll-multi__input::placeholder { color: var(--c-neutral-600); }
/* The box, not the input, owns the focus ring — same as every DS field. */
.ll-multi.is-freetext:focus-within .ll-field__box {
  border-color: var(--c-stroke-brand-strong); box-shadow: 0 0 0 3px var(--c-stroke-brand);
}
.ll-multi.is-freetext .ll-field__box { cursor: text; }
.ll-multi.is-freetext .ll-field__caret { display: none; }
/* DS dropdown menu popover — LLDropdownMenu is mounted into <body>. */
.ds-menu-pop { position: fixed; z-index: 320; }
/* Figma 4389:386421 — the slot breathes 8px top and bottom around the rows. */
.ds-menu-pop .ll-dropdown__list { padding: 8px 0; }
/* Type-to-search: a DS Search Bar pill inside a Selection List Item row (16/8),
   pinned above the scrolling list so it never scrolls away. */
.ds-menu-search {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 8px 16px; background: var(--c-white);
}
.ds-menu-search__bar {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  height: 40px; padding: 8px 8px 8px 16px; border-radius: 20px;
  border: 1px solid var(--c-neutral-300); background: var(--c-white);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
/* Autofocused on open, so the focused state is what is normally seen. */
.ds-menu-search__bar:focus-within {
  border-color: var(--c-stroke-brand); box-shadow: 0 0 0 1px var(--c-stroke-brand);
}
.ds-menu-search__icon { width: 24px; height: 24px; display: inline-flex; flex-shrink: 0; color: var(--c-neutral-950); }
.ds-menu-search__icon svg { width: 100%; height: 100%; display: block; }
.ds-menu-search__input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--c-neutral-950);
}
/* Group divider between operator families: a 8px row holding a 1px rule. */
.ds-menu-div {
  display: flex; align-items: center; justify-content: center;
  height: 8px; padding: 6px 16px; box-sizing: content-box; flex-shrink: 0;
}
.ds-menu-div__line { display: block; width: 100%; height: 1px; background: var(--c-neutral-100); }

/* ============================================================
   Detail tabs: submissions, assignments, settings, share, print
   ============================================================ */
.detail-settings { max-width: 620px; }
.detail-settings__foot { display: flex; gap: 12px; margin-top: 8px; }

/* Assign-to-centre modal */
.assign-list { display: flex; flex-direction: column; }
.assign-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid var(--c-neutral-100);
}
.assign-row:last-child { border-bottom: 0; }
.assign-row .demo-muted { margin-left: auto; font-size: 14px; }

/* Share — public link + internal recipient picker */
.share-link { display: flex; gap: 8px; align-items: center; }
.share-link .input { flex: 1; }
.share-filters { display: flex; gap: 16px; align-items: flex-end; }
.share-filters .select { max-width: 280px; }
.share-filters .field { margin: 0; }
.share-listhead {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; padding-top: 4px; border-bottom: 1px solid var(--c-neutral-100);
  padding-bottom: 8px;
}
.recip-list { max-height: 340px; overflow-y: auto; }
.recip-row {
  display: grid; grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr auto;
  align-items: center; gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--c-neutral-50);
}
.recip-row.is-sent { opacity: .6; }
.recip-row__child { font-size: 16px; color: var(--c-neutral-900); }
.recip-row__centre { font-size: 14px; }

/* Submission viewer */
.sub-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px; padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--c-neutral-100);
}
.sub-meta__label { font-size: 14px; font-weight: 700; color: var(--c-neutral-600); text-transform: uppercase; }
.sub-meta__value { font-size: 14px; color: var(--c-neutral-950); margin-top: 2px; }
.sub-answers { display: flex; flex-direction: column; }
.sub-answers__step {
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  margin: 16px 0 4px;
}
.sub-answers__step:first-child { margin-top: 0; }
.sub-answers__row {
  display: grid; grid-template-columns: minmax(180px, 1fr) 1.4fr; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--c-neutral-50);
}
.sub-answers__label { font-size: 14px; color: var(--c-neutral-700); }
.sub-answers__value { font-size: 14px; color: var(--c-neutral-950); }

/* ============================================================
   Automated Workflows editor
   ============================================================ */
.wf { display: flex; flex-direction: column; gap: 16px; max-width: 900px; padding-bottom: 72px; }
.wf-intro__title { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; }
.wf-intro__text { font-size: 14px; color: var(--c-neutral-700); margin-top: 4px; max-width: 640px; }
.wf-diag { display: flex; flex-direction: column; gap: 6px; }
.wf-diag__item {
  display: flex; align-items: center; gap: 8px; font-size: 16px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--c-error-50); color: var(--c-error-800);
}
.wf-diag__item--warning { background: var(--c-warning-50, #FFF7E6); color: var(--c-warning-800, #8A5A00); }
.wf-diag__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.wf-card { border: 1px solid var(--c-neutral-100); border-radius: 12px; background: var(--c-white); }
.wf-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-neutral-100);
}
.wf-card--last .wf-card__head { border-bottom: 0; }
.wf-card--last { background: var(--c-neutral-25); }
.wf-card__num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--c-brand-50); color: var(--c-brand-800);
  font-size: 14px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.wf-card__title { font-weight: 700; font-size: 15px; }
.wf-card__note { padding: 0 16px 12px 48px; font-size: 14px; }
.wf-card__body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; }

.wf-rule {
  border: 1px solid var(--c-neutral-100); border-radius: 10px;
  background: var(--c-neutral-25); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.wf-rule__head { display: flex; align-items: center; gap: 8px; }
.wf-rule__badge { font-size: 14px; font-weight: 700; color: var(--c-neutral-700); text-transform: uppercase; }
.wf-rule__cond { display: flex; flex-direction: column; gap: 8px; }
.wf-rule__cond .bp-cond__row {
  flex-direction: row; align-items: center; padding-right: 30px; gap: 8px;
}
.wf-rule__cond .bp-cond__row .select,
.wf-rule__cond .bp-cond__row .input { flex: 1; min-width: 0; }
/* Tag box sits in the same row as the field + operator selects. */
.wf-rule__cond .bp-cond__row .wf-cond__multi { flex: 1 1 200px; min-width: 0; width: auto; }
.wf-rule__cond .bp-cond__row + .bp-cond__row { padding-top: 8px; }
.wf-rule__cond .bp-cond__row + .bp-cond__row::before { align-self: center; }
.wf-rule__goto { display: flex; align-items: center; gap: 8px; }
.wf-rule__gotolabel, .wf-fallback__label {
  font-size: 14px; font-weight: 700; color: var(--c-neutral-800); flex: none;
}
.wf-rule__goto .select { max-width: 320px; }
.wf-fallback {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px dashed var(--c-neutral-100);
}
.wf-fallback .select { max-width: 360px; }

.wf-savebar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--c-white); border: 1px solid var(--c-neutral-100);
  box-shadow: 0 -2px 10px var(--c-dim-06);
}
.wf-savebar.is-dirty { border-color: var(--c-brand-200); }
.wf-savebar .demo-muted { flex: 1; font-size: 14px; }

/* ============================================================
   Print a blank form (Form Actions → Print)
   ============================================================ */
#print-root { display: none; }
.print-title { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 22px; margin: 0 0 4px; }
.print-desc { font-size: 14px; color: #444; margin: 0 0 16px; }
.print-step { font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 16px; margin: 20px 0 8px; }
.print-empty { font-size: 14px; color: #777; }
.print-field { margin-bottom: 14px; }
.print-field__label { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.print-field__box { height: 30px; border-bottom: 1px solid #999; }

@media print {
  body.is-printing > *:not(#print-root) { display: none !important; }
  body.is-printing #print-root { display: block; padding: 24px; }
  .print-step { break-after: avoid; }
  .print-field { break-inside: avoid; }
}

/* Step panel (flat, per Figma: toggles + navigation-rules pill) */
.bp-stepbody { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
/* Same toggle rows inside the Step Navigation Rules modal — modal body already pads. */
.bp-stepbody--modal { padding: 0; gap: 12px; }
/* DS outline button, stretched across the panel. */
/* Panel pills (Set Condition 4332:380305 · Step Navigation Rules 4204:65282):
   both are the same secondary CTA — 40px, full width, white on a 1px
   neutral-100 stroke, neutral-primary label. Neither is brand-weighted. */
.bp-pillbtn { width: 100%; margin-top: 8px; }
.ll-button.bp-pillbtn { --border-strong: var(--c-neutral-100); color: var(--c-neutral-950); }
.ll-button.bp-pillbtn:hover { --border-strong: var(--c-neutral-200); background: var(--c-neutral-25); }
/* Dragging an item hides the panel outright — it stays in the DOM (removing the
   drag source mid-drag cancels the drag) and is destroyed on dragend. */
.additem-pop.is-dragging { opacity: 0; pointer-events: none; }