/* ============================================================
   TASKS — list + new-task modal
   ============================================================ */
/* "Completed" sits apart; its active state reads "done" green. */
.pill-filter .pill--completed { margin-left: var(--sp-4); }
.pill-filter .pill--completed svg { color: var(--green); }
.pill-filter .pill--completed.on { background: var(--green); color: var(--white); }
.pill-filter .pill--completed.on svg { color: var(--white); }

/* Divider between the label filter and the priority filter that sits inline
   right behind it on the same row. */
.pill-filter .pill-sep { width: 1px; height: 16px; background: var(--line-2); margin: 0 var(--sp-2); flex: none; }

/* Subnav split: the pill filters fill the row, the view-style toggle sits at the
   far right, lined up with the first row of pills. */
.cl-subnav--split { display: flex; align-items: flex-start; gap: var(--sp-4); }
.cl-subnav--split .pill-filter { flex: 1; min-width: 0; }

/* View-style toggle — one icon per style; task-view swaps the active one to
   match the row layout it has applied to the list. */
.view-toggle {
  flex: none; margin-top: -3px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel);
  color: var(--muted); cursor: pointer;
}
.view-toggle:hover { color: var(--ink); background: var(--rail); }
.view-toggle__ic { display: none; }
.view-default .view-toggle__ic--default,
.view-compact .view-toggle__ic--compact { display: flex; }

/* List + rows. */
.tasks-scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-8) 28px; position: relative; z-index: 1; }
.task-list { display: flex; flex-direction: column; }

/* Priority groups: a labelled divider + its rows. Every header stays visible
   even when its group is empty, and each list is a drop zone (task-sort) for
   dragging a task into that priority. */
.task-group .cl-divider { padding: var(--sp-5) 0 var(--sp-3); }
.task-group .cl-divider .lab { font-size: var(--fs-6); }
/* A filled priority flag leads the group header — centred against the label
   (the row is baseline-aligned, which would otherwise ride it high) and pulled
   in toward the label. */
.task-group__head .flag { fill: currentColor; align-self: center; margin-right: calc(var(--sp-3) * -1); }
/* Extra breathing room above the second and third headers (medium & low). */
.task-group + .task-group { margin-top: var(--sp-6); }
/* An empty group keeps a small drop zone with a faint hint that hides the moment
   a row lands in it. */
.task-group .task-list { min-height: 40px; }
.task-group__empty { padding: 10px var(--sp-4); color: var(--faint); font-size: var(--fs-3); pointer-events: none; }
.task-list:has(.task-row) .task-group__empty { display: none; }

/* Dragging a task between priority sections — the done checkbox is the handle. */
.task-row--sortable .box { cursor: grab; }
.task-row--sortable .box:active { cursor: grabbing; }
.task-row--dragging { opacity: 0.4; }
.task-drop-marker { height: 0; overflow: visible; pointer-events: none; position: relative; margin: 0; }
.task-drop-marker::before {
  content: ''; display: block; position: absolute; inset-inline: 0; top: -4px;
  height: 3px; background: var(--accent); border-radius: 2px;
}
.task-add { display: flex; align-items: flex-start; gap: var(--sp-5); padding: 11px var(--sp-4); border-bottom: 1px solid var(--line); }
.task-add .box { width: 18px; height: 18px; border-radius: 4px; border: 1.6px solid var(--line-2); flex: none; }
.task-add__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--fs-5); color: var(--ink); resize: none; overflow: hidden; line-height: 18px; padding: 0; }
.task-add__input::placeholder { color: var(--faint); }
.task-add .add { flex: none; width: 28px; height: 28px; border: 0; border-radius: 7px; background: var(--accent); color: var(--white); cursor: pointer; display: grid; place-items: center; }
.task-add .add:hover { background: var(--accent-2); }

.task-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start; column-gap: var(--sp-6); padding: var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line);
}
.dash-split__col .task-row {
  column-gap: 12px;
}

.task-row:hover { background: rgba(0, 0, 0, .025); }
/* Dashboard's stacked read-only card: just the done box + text. */
.task-row--static { grid-template-columns: 22px minmax(0, 1fr); }

/* Circular done checkbox — doubles as the drag handle on the tasks list. Nudged
   down a hair so it lines up with the title's first line, not the whole row. */
.task-row .box { width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; border: 1.6px solid var(--line-2); display: grid; place-items: center; flex: none; cursor: pointer; color: var(--white); background: none; }
/* The dashboard's static card has a shorter (18px) text line, so the 3px nudge
   tuned for the list title would drop the box too low — reset it there. */
.task-row--static .box { margin-top: 0; }
.task-row .box svg { opacity: 0; }
.task-row .box.on { background: var(--accent); border-color: var(--accent); }
.task-row .box.on svg { opacity: 1; }

/* Body column: title, the meta line, then the collapsible description. */
.task-row__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

/* Title line: the title is inline and grows with its content (field-sizing) so
   the expand chevron trails right behind the text — in both view-styles. */
.task-row__title-line { display: flex; align-items: flex-start; gap: var(--sp-1); min-width: 0; max-width: 100%; }

.task-row__title {
  width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; field-sizing: content;
  border: 1px solid transparent; border-radius: 6px; padding: 2px var(--sp-3); margin-left: calc(var(--sp-3) * -1);
  background: none; font-family: var(--read); font-size: var(--fs-5); font-weight: 400; line-height: 1.4; color: var(--ink);
  display: block; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word;
}
.task-row__title:hover { box-shadow: inset 0 0 0 1px var(--line); }
.task-row__title:focus { border-color: var(--accent); background: var(--panel); outline: none; box-shadow: none; }
.task-row__title--readonly { pointer-events: none; }
.task-row.done .task-row__title { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }

/* Meta line: customer (small avatar + name) · label chip · open-call link.
   In the default view this stacks below the title; the compact view breaks it
   out into its own aligned columns (see below). */
.task-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); min-width: 0; }

/* Compact view: every row carries ONE identical fixed column template, so
   open-call · customer · label line up in the same columns across every row AND
   every priority section — a table look, with each column's width reserved even
   where a section has none. Fixed widths (rather than a shared/subgrid) keep the
   grouped, draggable lists (task-group / task-list) untouched and stacking
   normally. The body + meta wrappers collapse (display: contents) so their
   children drop straight into the row's columns. */
.view-compact .task-row {
  --tcol-call: 96px; --tcol-customer: 176px; --tcol-label: 120px;
  grid-template-columns: 22px minmax(0, 1fr) var(--tcol-call) var(--tcol-customer) var(--tcol-label) auto;
  grid-template-rows: auto auto; align-items: center;
  padding-top: var(--sp-4); padding-bottom: var(--sp-4);
}
.view-compact .task-row__body,
.view-compact .task-row__meta { display: contents; }

/* One line: box · title(+chevron) · open-call · customer · label · avatar.
   Explicit columns so a row missing its open-call (or label) leaves that cell
   empty rather than shifting the other columns. */
.view-compact .task-row .box { grid-column: 1; grid-row: 1; margin-top: 0; }
.view-compact .task-row__title-line { grid-column: 2; grid-row: 1; }
.view-compact .task-row__call { grid-column: 3; grid-row: 1; margin-right: 0; }
.view-compact .task-row .tk-pick--customer { grid-column: 4; grid-row: 1; min-width: 0; }
.view-compact .task-row .tk-pick--label { grid-column: 5; grid-row: 1; }
.view-compact .task-row__aside { grid-column: 6; grid-row: 1; margin-top: 0; }
/* Long customer names ellipsis within their fixed column instead of widening it. */
.view-compact .tk-pick--customer .tk-pick__trigger,
.view-compact .tk-pick--customer .tk-pick__disp { min-width: 0; }
.view-compact .tk-pick--customer .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Expanded description drops to its own full-width line under the title. */
.view-compact .task-row__desc-wrap { grid-column: 2 / -1; grid-row: 2; }

/* Collapsible description. */
.task-row__desc-wrap { display: none; }
.task-row.is-expanded .task-row__desc-wrap { display: block; }
/* Rendered custom Markdown (same syntax + interactive checkboxes as a call
   comment). Click the text to edit its raw source. */
.task-row__desc {
  min-width: 0; border-radius: 6px; padding: var(--sp-2) var(--sp-3); margin-left: calc(var(--sp-3) * -1);
  font-family: var(--read); font-size: var(--fs-4); line-height: 1.5; color: var(--muted);
  cursor: text; word-break: break-word;
}
.task-row__desc:hover { box-shadow: inset 0 0 0 1px var(--line); }
.task-row__desc:empty::before { content: "Add a description…"; color: var(--faint); }
.task-row__desc > *:first-child { margin-top: 0; }
.task-row__desc > *:last-child { margin-bottom: 0; }
.task-row__desc p { margin: 0 0 var(--sp-3); }
.task-row__desc ul, .task-row__desc ol { margin: var(--sp-2) 0; padding-left: 20px; }
.task-row__desc a { text-decoration: underline; }
.task-row__desc code { font-family: ui-monospace, monospace; font-size: .92em; background: var(--rail); padding: 1px var(--sp-2); border-radius: 4px; }
.task-row.done .task-row__desc { cursor: default; pointer-events: none; }

/* The raw-source editor swapped in on click. */
.task-row__desc-input {
  width: 100%; min-width: 0; box-sizing: border-box; field-sizing: content;
  border: 1px solid var(--accent); border-radius: 6px; padding: var(--sp-2) var(--sp-3); margin-left: calc(var(--sp-3) * -1);
  background: var(--panel); font-family: var(--read); font-size: var(--fs-4); line-height: 1.5; color: var(--ink-2);
  display: block; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word;
}
.task-row__desc-input::placeholder { color: var(--faint); }

/* Aside column: the assignee avatar. */
.task-row__aside { display: flex; align-items: center; gap: var(--sp-2); margin-top: 1px; }

/* Expand chevron — trails the title on its line; nudged down a hair to sit on the
   title's first text row. */
.task-row__toggle {
  flex: none; width: 12px; height: 24px; margin-top: var(--sp-1); margin-right: var(--sp-5); display: grid; place-items: center;
  border: 0; background: none; color: var(--faint); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .12s, color .12s;
}
/* No button-style hover — the chevron just darkens while the row is hovered. */
.task-row:hover .task-row__toggle { color: var(--muted); }
.task-row__toggle svg { transition: transform .15s; }
.task-row.is-expanded .task-row__toggle svg { transform: rotate(180deg); }
.task-row.has-desc .task-row__toggle,
.task-row:not(.done):hover .task-row__toggle { opacity: 1; pointer-events: auto; }

/* Dashboard stacked read-only card. */
.task-row__static { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.task-row__static-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); min-width: 0; }
.task-row__static-line .task-row__text--static { width: auto; }
.task-row__text--static { display: block; cursor: default; white-space: normal; margin: 0; padding: 0; line-height: 18px; font-family: var(--read); font-size: var(--fs-5); color: var(--ink); }
.task-row.done .task-row__text--static { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--line-2); }
.task-row__customer {
  display: inline-flex; align-items: center; gap: var(--sp-3); width: fit-content; max-width: 100%;
  font-size: var(--fs-3); font-weight: 600; color: var(--muted);
  text-decoration: none;
}
.task-row__customer:hover { color: var(--ink); }
.task-row__customer .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 8px; }

/* "Open call" link — back to the call's comments/transcript the task came from. */
.task-row__call { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; margin-right: var(--sp-4); color: var(--muted); text-decoration: none; cursor: pointer; font-size: var(--fs-3); font-weight: 600; }
.task-row__call:hover { color: var(--accent); }
.task-row__call svg { flex: none; }

.tasks-empty { padding: 60px 0; text-align: center; color: var(--muted); font-size: var(--fs-5); }

/* Compact inline picker — the call bar's assignee dropdown (tasks/picker). */
.who-pick--compact .who {
  height: auto; border: 0; padding: var(--sp-1) var(--sp-3); margin: -2px 0; border-radius: 6px;
  background: none; font-size: var(--fs-3); font-weight: 300; color: var(--ink-2);
}
.who-pick--compact .who:hover { background: rgba(0, 0, 0, .05); }
.who-pick--compact .who > svg { opacity: .5; }
.who-pick--compact .dot { width: 20px; height: 20px; font-size: var(--fs-1); }
.who-pick--compact .who-menu { left: auto; right: 0; }

/* ── Task-row pickers (label / customer / assignee) ───────────────────────────
   A self-contained dropdown, deliberately NOT the global .who-pick component:
   ONE identical markup + CSS renders for both open and completed rows, so a row
   never shifts when it's checked off. Backed by the generic picker controller. */
.tk-pick { position: relative; display: flex; min-width: 0; }
.task-row.done .tk-pick { opacity: .5; pointer-events: none; }
.tk-pick__trigger {
  display: flex; align-items: center; gap: var(--sp-4); min-width: 0; max-width: 100%;
  padding: var(--sp-1) var(--sp-3); margin: -2px 0; border: 0; border-radius: 6px;
  background: none; cursor: pointer; text-align: left;
  font-size: var(--fs-3); font-weight: 300; color: var(--ink-2);
}
.tk-pick__trigger:hover { background: rgba(0, 0, 0, .05); }
/* Label + assignee triggers are just the chip / disc — flush, no name padding. */
.tk-pick--label .tk-pick__trigger, .tk-pick--assignee .tk-pick__trigger { gap: 0; padding: 0; margin: 0; }
.tk-pick--label .task-chip { cursor: pointer; }
.tk-pick__disp { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.tk-pick__disp .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-pick__disp .nm.ph { color: var(--faint); }
.tk-pick__disp .dot { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-1); }
.tk-pick .dot--empty { background: var(--line-2); }

/* In a task row's meta line the customer avatar shrinks to a solid colour dot
   (initials hidden) with its name in muted secondary text; the assignee avatar
   in the aside is a touch larger. */
.task-row__meta .tk-pick__trigger { font-size: var(--fs-4); }
.tk-pick--customer .tk-pick__disp .dot { width: 10px; height: 10px; font-size: 0; }
.tk-pick--customer .tk-pick__disp .nm { color: var(--muted); font-weight: 500; }
/* Open the customer menu to the right of the item — it sits near the left of the
   row, so hanging it leftward would run it under the sidebar (which outranks the
   scroll container's stacking context). */
.tk-pick--customer .tk-pick__menu { left: 0; right: auto; }
/* On a customer's own tasks tab the customer column is hidden, so the label sits
   at the left of the row; open its menu rightward too, else it runs under the
   sidebar. */
.task-row--no-customer .tk-pick--label .tk-pick__menu { left: 0; right: auto; }
.tk-pick--assignee .tk-pick__disp .dot { width: 26px; height: 26px; font-size: var(--fs-3); }
/* An unset label additionally stays hidden until the row is hovered (an
   add-a-label affordance). The hide is scoped to the trigger's display so the
   menu's own "No label" ghost chip doesn't count. */
.task-row:not(:hover) .tk-pick--label:has(.tk-pick__disp .task-chip--empty) { display: none; }
/* Reserve the label chip's line height on the interactive row's meta line so the
   hover-revealed "No label" chip (taller than a bare "Open call" link or an empty
   line) doesn't grow the row by ~1px on hover. Sits below the customer trigger's
   own height, so customer rows are unaffected. */
.task-row__body .task-row__meta { min-height: 21px; }

/* Dropdown menu — hangs to the right so it never clips the row's right edge. */
.tk-pick__menu {
  position: absolute; z-index: 5; top: calc(100% + 5px); right: 0; min-width: 180px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); padding: var(--sp-2);
}
.tk-pick__menu--search { min-width: 230px; }
.tk-pick__search {
  display: flex; align-items: center; gap: var(--sp-4); padding: 7px 9px; margin-bottom: var(--sp-2);
  border: 1px solid var(--line-2); border-radius: 8px;
}
.tk-pick__search svg { color: var(--muted); flex: none; }
.tk-pick__search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--fs-4); color: var(--ink); }
.tk-pick__opts { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); }
.tk-pick__opt {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: var(--sp-4) 9px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; text-align: left;
  font-size: var(--fs-4); font-weight: 400; color: var(--ink-2);
}
.tk-pick__opt:hover { background: var(--rail); }
.tk-pick__opt.on { color: var(--ink); }
.tk-pick__opt .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-1); }
.tk-pick__opt .nm { flex: 1; }
.tk-pick__check { margin-left: auto; flex: none; color: var(--accent); opacity: 0; }
.tk-pick__opt.on .tk-pick__check { opacity: 1; }
.tk-pick__empty { padding: 14px 9px; text-align: center; font-size: var(--fs-3); color: var(--faint); }

/* "No label" ghost chip — outlined, used in the trigger and menu. */
.task-chip--empty { background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); }

/* New-task modal — fixed overlay, light theme (rendered outside .cl-app). */
.ntm-scrim {
  position: fixed; inset: 0; z-index: 300; padding: var(--sp-7);
  background: rgba(20, 22, 28, .42); display: grid; place-items: center;
}
.ntm {
  width: 430px; max-width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .5);
}
.ntm-body { padding: 18px; display: flex; flex-direction: column; gap: var(--sp-4); }
.ntm-errors { color: var(--red); font-size: var(--fs-4); font-weight: 600; }
.ntm-l { font-size: var(--fs-2); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ntm-textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--panel); font-size: var(--fs-5); color: var(--ink);
  padding: 10px 13px; min-height: 64px; resize: vertical; line-height: 1.5;
}
.ntm-textarea:focus { border-color: var(--accent); outline: none; }
.ntm-textarea::placeholder { color: var(--faint); }
/* The task title is a single (auto-growing) line and reads a touch bolder than
   the description below it. */
.ntm-textarea--title { min-height: 0; resize: none; field-sizing: content; font-weight: 600; }

/* In the modal the customer / assignee pickers read as bordered fields,
   unlike the borderless compact pickers on the tasks list. */
.ntm .who-pick .who { border: 1px solid var(--line-2); }

/* Avatar pickers (customer / assignee) — custom dropdown, no library. */
.who-pick { position: relative; display: flex; min-width: 0; }
.who-pick .who {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; height: 40px;
  padding: 0 10px; border: 0; border-radius: 9px;
  background: var(--panel); cursor: pointer; text-align: left;
  font-size: var(--fs-5); color: var(--ink);
}
.who-pick .who:hover { background: var(--rail); }
.who-pick .who > svg { margin-left: auto; flex: none; color: var(--muted); }
.picker-disp { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.who-pick .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.who-pick .nm.ph { color: var(--faint); }
.who-pick .dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 10px;
}
.who-pick .dot--empty { background: var(--line-2); }

.who-menu {
  position: absolute; z-index: 5; top: calc(100% + 5px); left: 0; right: 0;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45); padding: 5px;
}
.who-menu.cust-menu { min-width: 230px; }
.who-search {
  display: flex; align-items: center; gap: var(--sp-4); padding: 7px 9px; margin-bottom: var(--sp-2);
  border: 1px solid var(--line-2); border-radius: 8px;
}
.who-search svg { color: var(--muted); flex: none; }
.who-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font-size: var(--fs-4); color: var(--ink);
}
.who-opts { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.who-opt {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: var(--sp-4) 9px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; text-align: left;
  font-size: var(--fs-4); font-weight: 600; color: var(--ink-2);
}
.who-opt:hover { background: var(--rail); }
.who-opt.on { color: var(--ink); }
.who-opt .dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 10px;
}
.who-opt .nm { flex: 1; }
.who-check { margin-left: auto; flex: none; color: var(--accent); opacity: 0; }
.who-opt.on .who-check { opacity: 1; }
.who-empty { padding: 14px 9px; text-align: center; font-size: var(--fs-3); color: var(--faint); }
.ntm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: var(--sp-3) 0 var(--sp-1); }
.ntm-row2 > div { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.ntm-labels { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--sp-1); }
.ntm-label-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ntm-label, .task-chip {
  display: inline-flex; align-items: center; padding: var(--sp-3) var(--sp-5); border-radius: 999px;
  font-size: var(--fs-3); font-weight: 700; cursor: pointer; opacity: .4; transition: opacity .12s;
  user-select: none;
}
.task-chip { opacity: 1 }
/* Compact chip for meta rows (dashboard task cards), sized to align with the
   customer / open-call links beside it. */
.task-chip--sm { padding: var(--sp-1) 9px; font-size: var(--fs-2); }
.ntm-label-input:checked + .ntm-label { opacity: 1; }
.ntm-label-input:focus-visible + .ntm-label { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Task-label colour picker (superadmin task-labels form) */
.tl-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-1); }
.tl-swatch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tl-swatch {
  display: inline-block; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-2) inset; transition: border-color .12s;
}
.tl-swatch-input:checked + .tl-swatch { border-color: var(--ink); }
.tl-swatch-input:focus-visible + .tl-swatch { outline: 2px solid var(--ink); outline-offset: 2px; }
.ntm-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px; border-top: 1px solid var(--line); background: var(--rail);
  border-radius: 0 0 16px 16px;
}