/* ==========================================================================
   NZOTO — components
   Purpose : every reusable UI component. BEM naming: .block__element--modifier,
             state classes .is-* / [aria-*]. JS hooks are data-* attributes only.
   Depends : tokens.css, base.css
   Index   : 1 buttons · 2 forms · 3 cards · 4 badges · 5 avatar · 6 table
             7 pagination · 8 tabs · 9 toolbar & chips · 10 modal · 11 toast
             12 menu · 13 skeleton · 14 empty/error · 15 alert · 16 stat
             17 stepper & event log · 18 wizard · 19 stars · 20 thread
             21 cards: provider/job/list · 22 dl & meta · 23 misc
             24 uploader · 25 tagselect · 26 datepicker · 27 chart
             28 command palette · 29 dev toolbar · 30 rich text · 31 sortable
   ========================================================================== */

/* ---- 1. BUTTONS ---- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 var(--space-4);
  border: var(--border-width) solid transparent; border-radius: var(--radius-md);
  font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(var(--lift-sm)); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
.btn--primary:active { background: var(--color-primary-active); }
.btn--accent { background: var(--color-accent-strong); color: var(--color-on-accent); box-shadow: var(--shadow-xs); }
.btn--accent:hover { background: var(--color-accent-strong-hover); box-shadow: var(--shadow-md); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border-strong); color: var(--color-text); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--color-bg-muted); border-color: var(--color-text-muted); }
.btn--ghost { color: var(--color-text-secondary); }
.btn--ghost:hover { background: var(--color-bg-muted); color: var(--color-text); transform: none; }
.btn--danger { background: var(--color-danger); color: var(--neutral-0); }
:root[data-theme="dark"] .btn--danger { color: var(--neutral-950); }
.btn--danger:hover { background: var(--color-danger-hover); }
.btn--danger-ghost { color: var(--color-danger); }
.btn--danger-ghost:hover { background: var(--color-danger-soft); transform: none; }
.btn--on-dark { background: var(--neutral-0); color: var(--brand-primary); }
.btn--on-dark:hover { background: var(--neutral-100); }
.btn--outline-on-dark { border-color: var(--chrome-border); color: var(--chrome-text-strong); }
.btn--outline-on-dark:hover { background: var(--chrome-bg-hover); }
.btn--sm { min-height: var(--control-height-sm); padding-inline: var(--space-3); font-size: var(--font-size-sm); border-radius: var(--radius-sm); }
.btn--lg { min-height: var(--control-height-lg); padding-inline: var(--space-6); font-size: var(--font-size-md); border-radius: var(--radius-lg); }
.btn--xl { min-height: var(--touch-target-lg); padding-inline: var(--space-8); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); border-radius: var(--radius-lg); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--control-height); padding: 0; flex: none; }
.btn--icon.btn--sm { width: var(--control-height-sm); }
.btn--icon .icon { width: var(--icon-md); height: var(--icon-md); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: var(--icon-sm); height: var(--icon-sm); border-radius: var(--radius-full); border: var(--border-width-thick) solid var(--color-on-primary); border-right-color: transparent; animation: spin var(--duration-counter) linear infinite; }
.btn--secondary.is-loading::after, .btn--ghost.is-loading::after { border-color: var(--color-text); border-right-color: transparent; }
.btn__badge { min-width: var(--space-5); padding-inline: var(--space-1); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-2xs); line-height: var(--space-5); }
.icon-btn-dot { position: absolute; top: var(--space-2); right: var(--space-2); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-accent); box-shadow: 0 0 0 var(--border-width-thick) var(--color-bg); }
.link-btn { color: var(--color-link); font-weight: var(--font-weight-medium); }
.link-btn:hover { text-decoration: underline; }

/* ---- 2. FORMS ---- */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 30em) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }
.field__optional { font-weight: var(--font-weight-regular); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.field__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.field__error { display: none; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-danger); }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid .input { border-color: var(--color-danger); }
.field.is-invalid .input:focus { box-shadow: 0 0 0 var(--ring-width) color-mix(in srgb, var(--color-danger) 30%, transparent); }
.input {
  width: 100%; min-height: var(--control-height); padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input:hover { border-color: var(--color-text-muted); }
.input:focus { border-color: var(--color-accent); box-shadow: var(--shadow-focus); outline: none; }
.input:disabled, .input[readonly] { background: var(--color-bg-muted); color: var(--color-text-secondary); }
.input--lg { min-height: var(--control-height-lg); font-size: var(--font-size-md); }
textarea.input { min-height: calc(var(--control-height) * 3); line-height: var(--line-height-normal); }
.select { position: relative; display: block; }
.select select.input { appearance: none; padding-right: var(--space-10); cursor: pointer; }
.select__chevron { position: absolute; right: var(--space-3); top: 50%; width: var(--icon-sm); height: var(--icon-sm); transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
.input-group { position: relative; display: flex; align-items: center; }
.input-group__prefix, .input-group__suffix { position: absolute; display: grid; place-items: center; height: 100%; min-width: var(--control-height); color: var(--color-text-muted); pointer-events: none; }
.input-group__prefix { left: 0; }
.input-group__suffix { right: 0; pointer-events: auto; }
.input-group--prefix .input { padding-left: var(--space-10); }
.input-group--suffix .input { padding-right: var(--space-10); }
.char-count { font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.char-count.is-over { color: var(--color-danger); }

.check { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.check input { appearance: none; flex: none; width: var(--icon-md); height: var(--icon-md); margin-top: var(--space-0-5); border: var(--border-width-thick) solid var(--color-border-strong); border-radius: var(--radius-xs); background: var(--color-surface); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.check input[type="radio"] { border-radius: var(--radius-full); }
.check input:checked { border-color: var(--color-primary); background: var(--color-primary) center / 70% no-repeat; }
.check input[type="checkbox"]:checked { background-image: linear-gradient(var(--color-on-primary), var(--color-on-primary)); background-size: 50% var(--border-width-thick); box-shadow: inset 0 0 0 var(--border-width-heavy) var(--color-primary); }
.check input[type="radio"]:checked { box-shadow: inset 0 0 0 var(--border-width-heavy) var(--color-surface); }
.check input:indeterminate { border-color: var(--color-primary); background: linear-gradient(var(--color-primary), var(--color-primary)) center / 55% var(--border-width-thick) no-repeat; }
.check__label { font-size: var(--font-size-base); color: var(--color-text); }
.check__hint { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }

.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { appearance: none; position: relative; flex: none; width: var(--switch-width); height: var(--switch-height); border-radius: var(--radius-full); background: var(--color-border-strong); cursor: pointer; transition: background var(--duration) var(--ease-out); }
.switch input::after { content: ""; position: absolute; top: 50%; left: var(--space-0-5); width: var(--switch-knob); height: var(--switch-knob); margin-top: calc(var(--switch-knob) / -2); border-radius: var(--radius-full); background: var(--neutral-0); box-shadow: var(--shadow-sm); transition: transform var(--duration) var(--ease-out); }
.switch input:checked { background: var(--color-success); }
.switch input:checked::after { transform: translateX(calc(var(--switch-width) - var(--switch-knob) - var(--space-1))); }
.switch--lg input { transform: scale(1.25); transform-origin: left center; margin-right: var(--space-3); }
.switch__label { font-weight: var(--font-weight-medium); }

/* Choice cards — large radio/checkbox tiles (wizards, role chooser, slots) */
.choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min-sm)), 1fr)); }
.choice-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min-md)), 1fr)); }
.choice-grid--list { grid-template-columns: minmax(0, 1fr); }
.choice { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--touch-target-lg); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.choice:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); transform: translateY(var(--lift-sm)); }
.choice:active { transform: scale(var(--press-scale)); }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 var(--border-width) var(--color-accent); }
.choice:has(input:focus-visible) { outline: var(--border-width-thick) solid var(--color-accent); outline-offset: var(--ring-offset); }
.choice:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.choice__icon { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); flex: none; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-heading); }
.choice:has(input:checked) .choice__icon { background: var(--color-accent-strong); color: var(--color-on-accent); }
.choice__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; flex: 1; }
.choice__title { font-weight: var(--font-weight-medium); color: var(--color-heading); }
.choice__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.choice__check { flex: none; color: var(--color-accent-strong); opacity: 0; transform: scale(0.6); transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.choice:has(input:checked) .choice__check { opacity: 1; transform: none; }
.choice--center { flex-direction: column; align-items: center; text-align: center; padding: var(--space-6) var(--space-4); }
.choice--center .choice__body { align-items: center; }

/* ---- 3. CARDS ---- */
.card { display: flex; flex-direction: column; min-width: 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-xs); }
.card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.card__subtitle { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.card__body--flush { padding: 0; }
.card__body--row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }      /* text on the left, control on the right */
.card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.card--muted { background: var(--color-bg-muted); box-shadow: none; }
.card--accent { border-color: var(--color-accent-soft-border); background: var(--color-accent-soft); box-shadow: none; }
.card--interactive { color: inherit; transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); }
.card--interactive:hover { transform: translateY(var(--lift-md)); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); text-decoration: none; }
.card--interactive:active { transform: scale(var(--press-scale)); }

/* Catalog tile (service categories / subcategories) */
.tile { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.tile__icon { display: grid; place-items: center; width: var(--control-height-lg); height: var(--control-height-lg); border-radius: var(--radius-lg); background: var(--color-primary-soft); color: var(--color-heading); transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }
.card--interactive:hover .tile__icon { background: var(--color-accent-strong); color: var(--color-on-accent); }
.tile__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.tile__text { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.tile__meta { margin-top: auto; font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* ---- 4. BADGES ---- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-6); padding: 0 var(--space-2); border: var(--border-width) solid transparent; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap; }
.badge .icon { width: var(--icon-xs); height: var(--icon-xs); }
.badge--neutral { background: var(--color-bg-muted); border-color: var(--color-border); color: var(--color-text-secondary); }
.badge--primary { background: var(--color-primary-soft); color: var(--color-heading); }
.badge--accent { background: var(--color-accent-soft); border-color: var(--color-accent-soft-border); color: var(--color-accent-strong); }
:root[data-theme="dark"] .badge--accent { color: var(--color-link); }
.badge--success { background: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning); }
.badge--danger { background: var(--color-danger-soft); border-color: var(--color-danger-border); color: var(--color-danger); }
.badge--info { background: var(--color-info-soft); border-color: var(--color-info-border); color: var(--color-info); }
.badge--dot::before { content: ""; width: var(--space-1-5); height: var(--space-1-5); border-radius: var(--radius-full); background: currentColor; }
.badge--lg { min-height: var(--space-8); padding-inline: var(--space-3); font-size: var(--font-size-sm); }
.assumption-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2); border: var(--border-width) dashed var(--color-warning-border); border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }

/* ---- 5. AVATAR ---- */
.avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-heading); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); overflow: hidden; user-select: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: var(--avatar-xs); height: var(--avatar-xs); font-size: var(--font-size-2xs); }
.avatar--sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--font-size-xs); }
.avatar--lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--font-size-lg); }
.avatar--xl { width: var(--avatar-xl); height: var(--avatar-xl); font-size: var(--font-size-2xl); }
.avatar--tone-1 { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.avatar--tone-2 { background: var(--color-info-soft); color: var(--color-info); }
.avatar--tone-3 { background: var(--color-success-soft); color: var(--color-success); }
.avatar--tone-4 { background: var(--color-warning-soft); color: var(--color-warning); }
.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.avatar-wrap__status { position: absolute; right: 0; bottom: 0; width: var(--space-3); height: var(--space-3); border-radius: var(--radius-full); border: var(--border-width-thick) solid var(--color-surface); background: var(--color-text-disabled); }
.avatar-wrap__status.is-online { background: var(--color-success); animation: pulse-ring var(--duration-pulse) var(--ease-out) infinite; }

/* ---- 6. TABLE ---- */
.table-card { overflow: hidden; }
.table-wrap { position: relative; overflow: auto; max-height: 70vh; }
.table { min-width: var(--table-min); font-size: var(--font-size-sm); }
.table thead th { position: sticky; top: 0; z-index: var(--z-base); padding: var(--space-3) var(--space-4); background: var(--color-bg-muted); border-bottom: var(--border-width) solid var(--color-border); color: var(--color-text-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.table tbody td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--duration-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--color-bg-subtle); }
.table tbody tr.is-selected { background: var(--color-accent-soft); }
.table tbody tr[data-href] { cursor: pointer; }
.table__sort { display: inline-flex; align-items: center; gap: var(--space-1); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.table__sort .icon { width: var(--icon-xs); height: var(--icon-xs); opacity: 0.45; }
.table__sort:hover .icon, .table__sort[aria-sort] .icon { opacity: 1; }
.table__sort[data-dir] { color: var(--color-text); }
.table__sort-index { font-size: var(--font-size-2xs); color: var(--color-accent-strong); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table thead th.table__num { text-align: right; }
.table__check { width: var(--space-10); }
.table__actions { text-align: right; white-space: nowrap; }
.table__primary { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.table__primary-text { display: flex; flex-direction: column; min-width: 0; }
.table__primary-title { font-weight: var(--font-weight-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table__primary-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pinned first data column when the table scrolls sideways */
.table--pin tbody td:first-child, .table--pin thead th:first-child { position: sticky; left: 0; z-index: var(--z-base); background: var(--color-surface); box-shadow: var(--border-width) 0 0 var(--color-border); }
.table--pin thead th:first-child { z-index: calc(var(--z-base) + 1); background: var(--color-bg-muted); }
.table--pin tbody tr:hover td:first-child { background: var(--color-bg-subtle); }
/* reflow to cards on phones */
@media (max-width: 47.99em) {
  .table--cards { min-width: 0; }
  .table--cards thead { position: absolute; width: var(--space-px); height: var(--space-px); overflow: hidden; clip-path: inset(50%); }
  .table--cards tbody { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
  .table--cards tbody tr { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .table--cards tbody td { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 0; border: 0; text-align: right; }
  .table--cards tbody td::before { content: attr(data-label); flex: none; color: var(--color-text-muted); font-size: var(--font-size-xs); text-align: left; }
  .table--cards tbody td[data-primary] { text-align: left; }
  .table--cards tbody td[data-primary]::before, .table--cards tbody td.table__check::before { content: none; }
  .table--cards .table__actions { justify-content: flex-end; }
  .table-wrap:has(.table--cards) { max-height: none; }
}
.table-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.bulk-bar { position: sticky; bottom: var(--space-4); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) auto 0; padding: var(--space-3) var(--space-4); width: fit-content; max-width: 100%; border-radius: var(--radius-lg); background: var(--chrome-bg); color: var(--chrome-text-strong); box-shadow: var(--shadow-xl); animation: pop-in var(--duration) var(--ease-out) both; }
.bulk-bar__count { font-weight: var(--font-weight-medium); margin-right: var(--space-2); }

/* ---- 7. PAGINATION ---- */
.pagination { display: flex; align-items: center; gap: var(--space-1); }
.pagination__btn { display: grid; place-items: center; min-width: var(--control-height-sm); height: var(--control-height-sm); padding-inline: var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-secondary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.pagination__btn:hover:not(:disabled) { background: var(--color-bg-muted); color: var(--color-text); }
.pagination__btn[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--font-weight-medium); }
.pagination__btn:disabled { opacity: 0.4; }
.pagination__gap { color: var(--color-text-muted); padding-inline: var(--space-1); }

/* ---- 8. TABS ---- */
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: var(--border-width) solid var(--color-border); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-3); color: var(--color-text-secondary); font-weight: var(--font-weight-medium); white-space: nowrap; transition: color var(--duration-fast) var(--ease-out); }
.tabs__tab:hover { color: var(--color-text); text-decoration: none; }
.tabs__tab::after { content: ""; position: absolute; inset: auto var(--space-3) calc(var(--border-width) * -1); height: var(--border-width-thick); border-radius: var(--radius-full); background: var(--color-accent); transform: scaleX(0); transition: transform var(--duration) var(--ease-out); }
.tabs__tab[aria-selected="true"] { color: var(--color-heading); }
.tabs__tab[aria-selected="true"]::after { transform: none; }
.tabs__count { padding: 0 var(--space-1-5); border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text-secondary); font-size: var(--font-size-2xs); line-height: var(--space-5); }
.tab-panel { padding-top: var(--space-6); animation: fade-in var(--duration) var(--ease-out); }
.tabs--pills { border: 0; gap: var(--space-2); padding: var(--space-1); background: var(--color-bg-muted); border-radius: var(--radius-lg); width: fit-content; max-width: 100%; }
.tabs--pills .tabs__tab { min-height: var(--control-height); border-radius: var(--radius-md); padding-inline: var(--space-4); }
.tabs--pills .tabs__tab::after { content: none; }
.tabs--pills .tabs__tab[aria-selected="true"] { background: var(--color-surface); box-shadow: var(--shadow-sm); }

/* ---- 9. TOOLBAR, SEARCH, CHIPS ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.toolbar--bare { padding: 0; border: 0; margin-bottom: var(--space-4); }
.toolbar__grow { flex: 1 1 var(--grid-min-sm); min-width: 0; }
.toolbar .select { min-width: var(--grid-min-xs); }
.search-input { position: relative; display: flex; align-items: center; }
.search-input .icon { position: absolute; left: var(--space-3); width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); pointer-events: none; }
.search-input .input { padding-left: var(--space-10); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--space-8); padding: 0 var(--space-1) 0 var(--space-3); border-radius: var(--radius-full); background: var(--color-primary-soft); color: var(--color-heading); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); animation: pop-in var(--duration-fast) var(--ease-out) both; }
.chip__remove { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); color: var(--color-text-secondary); transition: background var(--duration-fast) var(--ease-out); }
.chip__remove:hover { background: var(--color-border); color: var(--color-text); }
.chip__remove .icon { width: var(--icon-xs); height: var(--icon-xs); }
.chip--toggle { padding-inline: var(--space-3); border: var(--border-width) solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-secondary); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); }
.chip--toggle:hover { border-color: var(--color-text-muted); color: var(--color-text); }
.chip--toggle[aria-pressed="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }

/* ---- 10. MODAL / SHEET ---- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: end center; background: var(--color-overlay); animation: fade-in var(--duration) var(--ease-out); }
.modal__dialog { display: flex; flex-direction: column; width: 100%; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-surface-raised); box-shadow: var(--shadow-xl); animation: slide-up var(--duration-slow) var(--ease-out); }
.modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); }
.modal__title { font-size: var(--font-size-lg); }
.modal__subtitle { margin-top: var(--space-1); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.modal__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-3) var(--space-5) var(--space-5); overflow-y: auto; }
.modal__footer { display: flex; flex-wrap: wrap-reverse; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.modal__footer .btn { flex: 1 1 auto; }
.modal.is-closing { animation: fade-in var(--duration-fast) var(--ease-out) reverse both; }
@media (min-width: 48em) {
  .modal { place-items: center; padding: var(--space-6); }
  .modal__dialog { max-width: var(--modal-md); border-radius: var(--radius-xl); animation-name: pop-in; }
  .modal__dialog--sm { max-width: var(--modal-sm); }
  .modal__dialog--lg { max-width: var(--modal-lg); }
  .modal__footer .btn { flex: 0 0 auto; }
}
.lightbox__img { max-height: 70dvh; margin-inline: auto; border-radius: var(--radius-md); object-fit: contain; }

/* ---- 11. TOAST ---- */
.toast-region { position: fixed; z-index: var(--z-toast); inset: auto var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; }
body[data-bottom-nav="true"] .toast-region { bottom: calc(var(--bottomnav-height) + var(--space-4)); }
.toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; max-width: var(--modal-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--neutral-900); color: var(--neutral-0); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in var(--duration-slow) var(--ease-out) both; }
:root[data-theme="dark"] .toast { background: var(--neutral-100); color: var(--neutral-900); }
.toast.is-leaving { animation: toast-out var(--duration) var(--ease-out) both; }
.toast__icon { margin-top: var(--space-0-5); }
.toast--success .toast__icon { color: var(--color-on-dark-success); }
.toast--error .toast__icon { color: var(--color-on-dark-danger); }
.toast--warning .toast__icon { color: var(--color-on-dark-warning); }
.toast--info .toast__icon { color: var(--color-on-dark-info); }
:root[data-theme="dark"] .toast--success .toast__icon { color: var(--neutral-900); }
:root[data-theme="dark"] .toast--error .toast__icon, :root[data-theme="dark"] .toast--warning .toast__icon, :root[data-theme="dark"] .toast--info .toast__icon { color: var(--neutral-900); }
.toast__body { flex: 1; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.toast__close { opacity: 0.7; }
.toast__close:hover { opacity: 1; }
@media (min-width: 48em) { .toast-region { align-items: flex-end; inset: auto var(--space-6) var(--space-6) auto; } body[data-bottom-nav="true"] .toast-region { bottom: var(--space-6); } }

/* ---- 12. MENU (dropdown) ---- */
.menu-anchor { position: relative; display: inline-flex; }
.menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-2)); right: 0; min-width: var(--menu-min); padding: var(--space-1-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); animation: pop-in var(--duration-fast) var(--ease-out) both; transform-origin: top right; }
.menu--up { top: auto; bottom: calc(100% + var(--space-2)); left: 0; right: auto; }
.menu__header { padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--color-border); margin-bottom: var(--space-1-5); }
.menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: var(--font-size-sm); text-align: left; transition: background var(--duration-instant) var(--ease-out); }
.menu__item:hover, .menu__item:focus-visible { background: var(--color-bg-muted); text-decoration: none; outline: none; }
.menu__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.menu__item--danger, .menu__item--danger .icon { color: var(--color-danger); }
.menu__separator { height: var(--border-width); margin: var(--space-1-5) 0; background: var(--color-border); }

/* ---- 13. SKELETON ---- */
.skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-bg-muted) 25%, var(--color-border) 37%, var(--color-bg-muted) 63%); background-size: 400% 100%; animation: shimmer var(--duration-shimmer) ease infinite; color: transparent; user-select: none; }
.skeleton--text { height: var(--space-3); margin-block: var(--space-1); }
.skeleton--title { height: var(--space-6); width: 45%; }
.skeleton--avatar { width: var(--avatar-md); height: var(--avatar-md); border-radius: var(--radius-full); flex: none; }
.skeleton--btn { width: var(--grid-min-xs); height: var(--control-height); border-radius: var(--radius-md); }
.skeleton--card { height: calc(var(--control-height) * 3.5); border-radius: var(--radius-lg); }
.skeleton--row { height: var(--control-height-lg); border-radius: var(--radius-md); }
.skeleton--chart { height: var(--chart-height); border-radius: var(--radius-lg); }
.skeleton--w-24 { width: 24%; } .skeleton--w-40 { width: 40%; } .skeleton--w-60 { width: 60%; } .skeleton--w-72 { width: 72%; } .skeleton--w-82 { width: 82%; } .skeleton--w-90 { width: 90%; }
.skeleton-stack { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---- 14. EMPTY & ERROR STATES ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; }
.empty-state__icon { display: grid; place-items: center; width: var(--avatar-lg); height: var(--avatar-lg); border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text-muted); }
.empty-state--error .empty-state__icon { background: var(--color-danger-soft); color: var(--color-danger); }
.empty-state__title { font-size: var(--font-size-md); }
.empty-state__text { max-width: 44ch; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.empty-state--compact { padding-block: var(--space-8); }

/* ---- 15. ALERT ---- */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-muted); color: var(--color-text); font-size: var(--font-size-sm); }
.alert .icon { margin-top: var(--space-0-5); flex: none; }
.alert__title { font-weight: var(--font-weight-semibold); }
.alert__body { flex: 1; min-width: 0; }
.alert__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.alert--info { background: var(--color-info-soft); border-color: var(--color-info-border); }
.alert--info .icon { color: var(--color-info); }
.alert--success { background: var(--color-success-soft); border-color: var(--color-success-border); }
.alert--success .icon { color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); border-color: var(--color-warning-border); }
.alert--warning .icon { color: var(--color-warning); }
.alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger-border); }
.alert--danger .icon { color: var(--color-danger); }

/* ---- 16. STAT (KPI) ---- */
.stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stat__label { color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.stat__icon { display: grid; place-items: center; width: var(--control-height-sm); height: var(--control-height-sm); border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-heading); }
.stat__icon .icon { width: var(--icon-sm); height: var(--icon-sm); }
.stat__icon--accent { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.stat__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-heading); line-height: var(--line-height-tight); font-variant-numeric: tabular-nums; letter-spacing: var(--letter-spacing-tight); }
.stat__hint { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.stat--link { color: inherit; }

/* ---- 17. JOB STEPPER & EVENT LOG (status timeline, shared by all roles) ---- */
.stepper { position: relative; display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding-block: var(--space-2); scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper__step { position: relative; flex: 1 0 auto; min-width: calc(var(--stepper-dot) * 3); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.stepper__step::before { content: ""; position: absolute; top: calc(var(--stepper-dot) / 2 - var(--border-width)); right: 50%; width: 100%; height: var(--border-width-thick); background: var(--color-border); }
.stepper__step:first-child::before { content: none; }
.stepper__dot { position: relative; z-index: var(--z-base); display: grid; place-items: center; width: var(--stepper-dot); height: var(--stepper-dot); border-radius: var(--radius-full); border: var(--border-width-thick) solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); transition: all var(--duration-slow) var(--ease-out); }
.stepper__dot .icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 3; }
.stepper__label { padding-inline: var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.stepper__time { font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.stepper__step.is-done::before, .stepper__step.is-current::before { background: var(--color-success); }
.stepper__step.is-done .stepper__dot { border-color: var(--color-success); background: var(--color-success); color: var(--color-surface); }
.stepper__step.is-done .stepper__label { color: var(--color-text-secondary); }
.stepper__step.is-current .stepper__dot { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent-strong); box-shadow: 0 0 0 var(--space-1) var(--color-accent-soft); }
.stepper__step.is-current .stepper__label { color: var(--color-heading); font-weight: var(--font-weight-semibold); }
.stepper--stopped .stepper__step.is-current .stepper__dot { border-color: var(--color-danger); background: var(--color-danger-soft); color: var(--color-danger); box-shadow: 0 0 0 var(--space-1) var(--color-danger-soft); }
.stepper--stopped .stepper__step.is-current::before { background: var(--color-border); }

.event-log { position: relative; display: flex; flex-direction: column; }
.event-log__item { position: relative; display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); gap: var(--space-3); padding-bottom: var(--space-5); }
.event-log__item::before { content: ""; position: absolute; left: calc(var(--space-3) - var(--border-width) / 2); top: var(--space-5); bottom: 0; width: var(--border-width); background: var(--color-border); }
.event-log__item:last-child { padding-bottom: 0; }
.event-log__item:last-child::before { content: none; }
.event-log__dot { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text-secondary); }
.event-log__dot .icon { width: var(--icon-xs); height: var(--icon-xs); }
.event-log__item--success .event-log__dot { background: var(--color-success-soft); color: var(--color-success); }
.event-log__item--danger .event-log__dot { background: var(--color-danger-soft); color: var(--color-danger); }
.event-log__item--accent .event-log__dot { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.event-log__item--warning .event-log__dot { background: var(--color-warning-soft); color: var(--color-warning); }
.event-log__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }
.event-log__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.event-log__note { margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-muted); color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* ---- 18. WIZARD PROGRESS ---- */
.wizard { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-8); }
.wizard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.wizard__step-name { font-weight: var(--font-weight-medium); color: var(--color-heading); }
.progress { height: var(--progress-height); border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.progress__bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-alt)); transform-origin: left; transition: width var(--duration-slow) var(--ease-out); }
.wizard__dots { display: none; gap: var(--space-1); }
.wizard__dot { flex: 1; display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.wizard__dot::before { content: ""; height: var(--progress-height); border-radius: var(--radius-full); background: var(--color-border); transition: background var(--duration-slow) var(--ease-out); }
.wizard__dot.is-done::before { background: var(--color-accent); }
.wizard__dot.is-current::before { background: linear-gradient(90deg, var(--color-accent), var(--color-accent-alt)); }
.wizard__dot.is-current { color: var(--color-heading); font-weight: var(--font-weight-medium); }
.wizard__dot a { color: inherit; }
@media (min-width: 48em) { .wizard__dots { display: flex; } .wizard .progress { display: none; } }
.wizard-title { margin-bottom: var(--space-2); font-size: var(--font-size-2xl); }
.wizard-lead { margin-bottom: var(--space-8); color: var(--color-text-secondary); font-size: var(--font-size-md); }

/* ---- 19. STARS ---- */
.stars { display: inline-flex; align-items: center; gap: var(--space-0-5); color: var(--color-star); vertical-align: middle; }
.stars .icon { width: var(--icon-sm); height: var(--icon-sm); fill: currentColor; stroke-width: 0; }
.stars .icon.is-empty { fill: var(--color-border-strong); color: var(--color-border-strong); }
.stars--lg .icon { width: var(--icon-lg); height: var(--icon-lg); }
.rating { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rating .icon { width: var(--icon-sm); height: var(--icon-sm); fill: var(--color-star); color: var(--color-star); stroke-width: 0; }
.rating__count { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.star-input { display: inline-flex; gap: var(--space-1); }
.star-input__btn { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-md); color: var(--color-border-strong); transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.star-input__btn .icon { width: var(--icon-xl); height: var(--icon-xl); fill: currentColor; stroke-width: 0; }
.star-input__btn:hover { transform: scale(1.12); }
.star-input__btn.is-on { color: var(--color-star); }
.rating-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.rating-bars__row { display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr) var(--space-8); align-items: center; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.rating-bars__track { height: var(--space-2); border-radius: var(--radius-full); background: var(--color-bg-muted); overflow: hidden; }
.rating-bars__fill { width: 0; height: 100%; border-radius: inherit; background: var(--color-star); transition: width var(--duration-counter) var(--ease-out); }

/* ---- 20. MESSAGE THREAD ---- */
.thread { display: flex; flex-direction: column; min-height: 0; }
.thread__list { display: flex; flex-direction: column; gap: var(--space-3); min-height: calc(var(--thread-height) / 2); max-height: var(--thread-height); padding: var(--space-4); overflow-y: auto; }
.thread--page .thread__list { max-height: none; height: calc(100dvh - var(--topbar-height) - var(--bottomnav-height) - var(--space-24) * 2); min-height: var(--thread-height); }
.thread__day { align-self: center; padding: var(--space-0-5) var(--space-3); border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text-muted); font-size: var(--font-size-2xs); }
.bubble { display: flex; flex-direction: column; gap: var(--space-1); max-width: min(86%, var(--bubble-max)); animation: pop-in var(--duration) var(--ease-out) both; }
.bubble__body { padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-muted); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble__meta { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-2xs); color: var(--color-text-muted); }
.bubble--mine { align-self: flex-end; align-items: flex-end; }
.bubble--mine .bubble__body { background: var(--color-primary); color: var(--color-on-primary); border-bottom-right-radius: var(--radius-xs); }
.bubble--theirs { align-self: flex-start; }
.bubble--theirs .bubble__body { border-bottom-left-radius: var(--radius-xs); }
.bubble--system { align-self: center; max-width: 100%; }
.bubble--system .bubble__body { background: transparent; border: var(--border-width) dashed var(--color-border-strong); color: var(--color-text-secondary); font-size: var(--font-size-xs); text-align: center; }
.bubble--flagged .bubble__body { box-shadow: 0 0 0 var(--border-width-thick) var(--color-warning); }
.bubble__flag { display: flex; align-items: flex-start; gap: var(--space-2); max-width: var(--bubble-max); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warning-soft); border: var(--border-width) solid var(--color-warning-border); color: var(--color-text); font-size: var(--font-size-xs); text-align: left; }
.bubble__flag .icon { color: var(--color-warning); width: var(--icon-sm); height: var(--icon-sm); }
.bubble mark { padding: 0 var(--space-0-5); border-radius: var(--radius-xs); background: var(--color-warning-soft); color: var(--color-warning); font-weight: var(--font-weight-semibold); }
.bubble--mine mark { background: color-mix(in srgb, var(--color-warning) 35%, transparent); color: inherit; }
.thread__composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.thread__composer textarea.input { min-height: var(--control-height-lg); max-height: calc(var(--control-height) * 4); resize: none; }
.thread__notice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-info-soft); color: var(--color-text-secondary); font-size: var(--font-size-xs); }
.thread__notice .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-info); }

/* ---- 21. PROVIDER CARD · JOB CARD · LIST ---- */
.provider-card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.provider-card__top { display: flex; gap: var(--space-4); align-items: flex-start; }
.provider-card__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.provider-card__bio { color: var(--color-text-secondary); font-size: var(--font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.provider-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; }
.verified { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-info); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.verified .icon { width: var(--icon-sm); height: var(--icon-sm); }

.job-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.job-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.job-card__title { font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.job-card__ref { font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.job-card__desc { color: var(--color-text-secondary); font-size: var(--font-size-sm); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.list { display: flex; flex-direction: column; }
.list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); color: inherit; transition: background var(--duration-fast) var(--ease-out); }
.list__item:last-child { border-bottom: 0; }
a.list__item:hover, button.list__item:hover { background: var(--color-bg-subtle); text-decoration: none; }
button.list__item { width: 100%; text-align: left; }
.list__item.is-unread { background: var(--color-accent-soft); }
.list__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-0-5); }
.list__title { font-weight: var(--font-weight-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list__text { color: var(--color-text-secondary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list__text--wrap { white-space: normal; }
.list__meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.list__icon { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); flex: none; border-radius: var(--radius-full); background: var(--color-bg-muted); color: var(--color-text-secondary); }
.list__item.is-unread .list__icon { background: var(--color-accent-strong); color: var(--color-on-accent); }
.unread-dot { width: var(--space-2); height: var(--space-2); flex: none; border-radius: var(--radius-full); background: var(--color-accent); }

/* ---- 22. DESCRIPTION LIST & META ---- */
.dl { display: grid; gap: var(--space-3); }
.dl__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); align-items: baseline; }
.dl__row dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dl__row dd { color: var(--color-text); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.dl--stacked .dl__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-0-5); }
.dl__total { padding-top: var(--space-3); border-top: var(--border-width) solid var(--color-border); }
.dl__total dd { font-size: var(--font-size-lg); color: var(--color-heading); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.meta__item { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.meta__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }

/* ---- 23. MISC ---- */
.kbd { display: inline-grid; place-items: center; min-width: var(--space-5); height: var(--space-5); padding-inline: var(--space-1); border: var(--border-width) solid var(--color-border-strong); border-bottom-width: var(--border-width-thick); border-radius: var(--radius-xs); background: var(--color-surface); color: var(--color-text-secondary); font-family: var(--font-sans); font-size: var(--font-size-2xs); line-height: 1; }
.divider-text { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: var(--border-width); background: var(--color-border); }
.countdown { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-warning-soft); color: var(--color-warning); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.countdown.is-urgent { background: var(--color-danger-soft); color: var(--color-danger); }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.money--lg { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.money--negative { color: var(--color-danger); }
.photo-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(var(--thumb-size), 1fr)); }
.photo-grid__item { aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; border: var(--border-width) solid var(--color-border); background: var(--color-bg-muted); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.photo-grid__item:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-md); }
.photo-grid__item img { width: 100%; height: 100%; object-fit: cover; }
.quote-box { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-accent-soft); border: var(--border-width) solid var(--color-accent-soft-border); }
.next-action { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: var(--border-width) solid var(--chrome-border); border-radius: var(--radius-lg); background: var(--chrome-bg); color: var(--chrome-text); box-shadow: var(--shadow-md); }
.next-action .alert__actions .btn { flex: 1 1 auto; }
.next-action .btn--primary { background: var(--color-accent-strong); color: var(--color-on-accent); }      /* navy on the navy card would vanish */
.next-action .btn--primary:hover { background: var(--color-accent-strong-hover); }
.next-action__title { color: var(--chrome-text-strong); font-size: var(--font-size-lg); }
.color-field { display: flex; align-items: center; gap: var(--space-3); }
.color-field input[type="color"] { width: var(--control-height); height: var(--control-height); padding: var(--space-0-5); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; }
.icon-picker { display: grid; gap: var(--space-1); grid-template-columns: repeat(auto-fill, minmax(var(--control-height), 1fr)); max-height: calc(var(--control-height) * 4.4); overflow-y: auto; padding: var(--space-2); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
.icon-picker__btn { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: background var(--duration-fast) var(--ease-out); }
.icon-picker__btn:hover { background: var(--color-bg-muted); color: var(--color-text); }
.icon-picker__btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.inline-edit { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-0-5) var(--space-1); margin: calc(var(--space-0-5) * -1) calc(var(--space-1) * -1); border-radius: var(--radius-sm); cursor: text; transition: background var(--duration-fast) var(--ease-out); }
.inline-edit:hover { background: var(--color-bg-muted); }
.inline-edit .icon { width: var(--icon-xs); height: var(--icon-xs); opacity: 0; color: var(--color-text-muted); }
.inline-edit:hover .icon { opacity: 1; }
.inline-edit__input { min-height: var(--control-height-sm); padding-block: 0; }

/* ---- 24. UPLOADER ---- */
.uploader { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); border: var(--border-width-thick) dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-bg-subtle); color: var(--color-text-secondary); text-align: center; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.uploader:hover, .uploader.is-dragover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.uploader:focus-within { outline: var(--border-width-thick) solid var(--color-accent); outline-offset: var(--ring-offset); }
.uploader input[type="file"] { position: absolute; width: var(--space-px); height: var(--space-px); opacity: 0; }
.uploader__icon { color: var(--color-accent-strong); }
.uploader__title { font-weight: var(--font-weight-medium); color: var(--color-text); }
.uploader__hint { font-size: var(--font-size-xs); }
.thumbs { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(var(--thumb-size), 1fr)); }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; border: var(--border-width) solid var(--color-border); background: var(--color-bg-muted); animation: pop-in var(--duration) var(--ease-out) both; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__remove { position: absolute; top: var(--space-1); right: var(--space-1); display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-full); background: var(--color-overlay); color: var(--neutral-0); }
.thumb__remove .icon { width: var(--icon-xs); height: var(--icon-xs); }
.doc-tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.doc-tile__icon { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); flex: none; border-radius: var(--radius-md); background: var(--color-info-soft); color: var(--color-info); }
.doc-tile__body { flex: 1; min-width: 0; }
.doc-tile__name { font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-tile__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.doc-tile.is-missing { border-style: dashed; background: var(--color-bg-subtle); }
.doc-tile.is-missing .doc-tile__icon { background: var(--color-bg-muted); color: var(--color-text-muted); }

/* ---- 25. TAG SELECT (services offered) ---- */
.tagselect { position: relative; }
.tagselect__control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1-5); min-height: var(--control-height); padding: var(--space-1-5) var(--space-2); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); cursor: text; }
.tagselect__control:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.tagselect__input { flex: 1 1 var(--grid-min-xs); min-width: 0; min-height: var(--space-8); border: 0; background: none; outline: none; }
.tagselect__list { position: absolute; z-index: var(--z-dropdown); inset: calc(100% + var(--space-1)) 0 auto 0; max-height: calc(var(--control-height) * 6.5); overflow-y: auto; padding: var(--space-1-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); }
.tagselect__group { padding: var(--space-2) var(--space-3) var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.tagselect__option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-sm); text-align: left; font-size: var(--font-size-sm); }
.tagselect__option:hover, .tagselect__option.is-active { background: var(--color-bg-muted); }
.tagselect__option[aria-selected="true"] { color: var(--color-accent-strong); font-weight: var(--font-weight-medium); }
.tagselect__empty { padding: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---- 26. DATE PICKER ---- */
.datepicker { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); max-width: var(--modal-sm); }
.datepicker__header { display: flex; align-items: center; justify-content: space-between; }
.datepicker__month { font-weight: var(--font-weight-semibold); color: var(--color-heading); }
.datepicker__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.datepicker__dow { display: grid; place-items: center; height: var(--space-8); color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; }
.datepicker__day { display: grid; place-items: center; aspect-ratio: 1; min-height: var(--control-height-sm); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; transition: background var(--duration-instant) var(--ease-out); }
.datepicker__day:hover:not(:disabled) { background: var(--color-bg-muted); }
.datepicker__day.is-today { box-shadow: inset 0 0 0 var(--border-width) var(--color-border-strong); font-weight: var(--font-weight-semibold); }
.datepicker__day[aria-pressed="true"] { background: var(--color-accent-strong); color: var(--color-on-accent); font-weight: var(--font-weight-semibold); }
.datepicker__day:disabled { color: var(--color-text-disabled); }
.datepicker__day.is-outside { visibility: hidden; }
.schedule-grid { display: grid; gap: var(--space-3); }
.schedule-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); }
@media (min-width: 48em) { .schedule-row { grid-template-columns: var(--grid-min-xs) minmax(0, 1fr); } }
.schedule-row__times { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.schedule-row__times .select { width: var(--grid-min-xs); }

/* ---- 27. CHART (hand-rolled SVG) ---- */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: var(--chart-height); overflow: visible; }
.chart__grid line { stroke: var(--chart-grid); stroke-width: var(--border-width); stroke-dasharray: 3 4; }
.chart__axis text { fill: var(--color-text-muted); font-size: var(--font-size-2xs); font-family: var(--font-sans); }
.chart__line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart__line--1 { stroke: var(--chart-1); }
.chart__line--2 { stroke: var(--chart-2); }
.chart__area--1 { fill: var(--chart-1); opacity: 0.07; }
.chart__area--2 { fill: var(--chart-2); opacity: 0.1; }
.chart__bar { fill: var(--chart-1); transition: opacity var(--duration-fast) var(--ease-out); }
.chart__bar--2 { fill: var(--chart-2); }
.chart__bar:hover { opacity: 0.8; }
.chart__dot { fill: var(--color-surface); stroke-width: 2; }
.chart__dot--1 { stroke: var(--chart-1); }
.chart__dot--2 { stroke: var(--chart-2); }
.chart__cursor { stroke: var(--color-border-strong); stroke-width: var(--border-width); }
.chart__hit { fill: transparent; }
.chart__tooltip { position: absolute; z-index: var(--z-base); display: none; min-width: var(--grid-min-xs); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--neutral-900); color: var(--neutral-0); font-size: var(--font-size-xs); box-shadow: var(--shadow-lg); pointer-events: none; transform: translate(-50%, calc(-100% - var(--space-3))); white-space: nowrap; }
.chart__tooltip.is-visible { display: block; }
.chart__tooltip-title { margin-bottom: var(--space-1); font-weight: var(--font-weight-semibold); }
.chart__tooltip-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.chart__swatch { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-xs); }
.chart__swatch--1 { background: var(--chart-1); }
.chart__swatch--2 { background: var(--chart-2); }

/* ---- 28. COMMAND PALETTE & SHORTCUT HELP ---- */
.palette { position: fixed; inset: 0; z-index: var(--z-palette); display: grid; place-items: start center; padding: 12vh var(--space-4) var(--space-4); background: var(--color-overlay); animation: fade-in var(--duration-fast) var(--ease-out); }
.palette__dialog { display: flex; flex-direction: column; width: 100%; max-width: var(--palette-width); max-height: 70dvh; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-xl); overflow: hidden; animation: pop-in var(--duration) var(--ease-out); }
.palette__search { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.palette__search .icon { color: var(--color-text-muted); }
.palette__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--font-size-md); }
.palette__results { overflow-y: auto; padding: var(--space-2); }
.palette__group { padding: var(--space-3) var(--space-3) var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.palette__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--touch-target); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text); text-align: left; }
.palette__item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-text-muted); }
.palette__item.is-active { background: var(--color-primary-soft); }
.palette__item:hover { text-decoration: none; }
.palette__item-sub { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-xs); white-space: nowrap; }
.palette__footer { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.palette__empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); }
.shortcut-list { display: grid; gap: var(--space-2); }
.shortcut-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-1); font-size: var(--font-size-sm); }
.shortcut-list__keys { display: inline-flex; gap: var(--space-1); align-items: center; color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ---- 29. DEV TOOLBAR ---- */
.devbar { position: fixed; z-index: var(--z-devbar); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); font-size: var(--font-size-sm); }
body[data-bottom-nav="true"] .devbar { bottom: calc(var(--bottomnav-height) + var(--space-4)); }
.devbar__toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--space-3); border-radius: var(--radius-full); background: var(--neutral-900); color: var(--neutral-0); box-shadow: var(--shadow-lg); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; transition: transform var(--duration-fast) var(--ease-out); }
:root[data-theme="dark"] .devbar__toggle { background: var(--neutral-100); color: var(--neutral-900); }
.devbar__toggle:hover { transform: translateY(var(--lift-md)); }
@media (max-width: 47.99em) { .devbar { right: var(--space-2); opacity: 0.85; } .devbar__toggle { min-height: var(--control-height-sm); padding-inline: var(--space-2); } .devbar__toggle-label, .devbar__toggle .btn__badge { display: none; } }
.devbar__toggle .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--color-accent-alt); }
.devbar__panel { position: absolute; right: 0; bottom: calc(100% + var(--space-2)); display: flex; flex-direction: column; width: min(var(--devbar-width), calc(100vw - var(--space-8))); max-height: 72dvh; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-raised); box-shadow: var(--shadow-xl); overflow: hidden; animation: pop-in var(--duration) var(--ease-out) both; transform-origin: bottom right; }
.devbar__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.devbar__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.devbar__body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-4); overflow-y: auto; }
.devbar__section { display: flex; flex-direction: column; gap: var(--space-2); }
.devbar__label { color: var(--color-text-muted); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }
.devbar__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.devbar__assumptions { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-secondary); }
.devbar__assumptions li { display: flex; gap: var(--space-2); align-items: flex-start; }
@media print { .devbar { display: none; } }

/* ---- 30. RICH TEXT EDITOR ---- */
.rte { border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.rte:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
.rte__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-bg-muted); }
.rte__btn { display: grid; place-items: center; width: var(--control-height-sm); height: var(--control-height-sm); border-radius: var(--radius-sm); color: var(--color-text-secondary); transition: background var(--duration-fast) var(--ease-out); }
.rte__btn:hover { background: var(--color-border); color: var(--color-text); }
.rte__btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }
.rte__btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rte__sep { width: var(--border-width); margin: var(--space-1) var(--space-1); background: var(--color-border-strong); }
.rte__content { min-height: calc(var(--control-height) * 8); max-height: 60dvh; overflow-y: auto; padding: var(--space-5); outline: none; max-width: none; }

/* ---- 31. SORTABLE (drag-and-drop ordering) ---- */
.sortable { display: flex; flex-direction: column; gap: var(--space-2); }
.sortable__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
.sortable__item.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); }
.sortable__item.is-dragging { opacity: 0.4; }
.sortable__item.is-drop-before { box-shadow: 0 calc(var(--border-width-heavy) * -1) 0 var(--color-accent); }
.sortable__item.is-drop-after { box-shadow: 0 var(--border-width-heavy) 0 var(--color-accent); }
.sortable__item.is-inactive .sortable__label { color: var(--color-text-muted); text-decoration: line-through; }
.sortable__handle { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); flex: none; border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: grab; touch-action: none; }
.sortable__handle:hover { background: var(--color-bg-muted); color: var(--color-text); }
.sortable__handle:active { cursor: grabbing; }
.sortable__label { flex: 1; min-width: 0; font-weight: var(--font-weight-medium); text-align: start; }     /* it is a <button> when rows are selectable */
.sortable__sub { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); }
.sortable__actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }