/* ==========================================================================
   Board design language
   --------------------------------------------------------------------------
   The shell is the quiet "reviewing stand": warm ink on paper, one indigo
   accent (the "route"). Per-board board colours carry the festivity, so the
   chrome stays neutral. Tokens are named for the product's world, never
   --gray-N. Bootstrap's --bs-* variables are mapped onto these tokens so
   stock components (.btn, .card, .modal, .dropdown, .form-control) speak the
   language without per-template rewrites.
   ========================================================================== */

/* ---- Inter (vendored variable woff2) ----------------------------------- */
@font-face {
   font-family: "InterVariable";
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
   src: url("vendor/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
   font-family: "InterVariable";
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
   src: url("vendor/fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ==========================================================================
   Primitives
   ========================================================================== */
:root {
   /* Surfaces — whisper-quiet lightness steps, warm bone → white → raised */
   --paper-0: #faf9f7;
   /* app canvas              */
   --paper-1: #ffffff;
   /* cards, panels           */
   --paper-2: #ffffff;
   /* dropdowns, modals (+ shadow lifts them) */
   --paper-sunk: #f4f2ee;
   /* inset wells, table heads */

   /* Ink — four real levels */
   --ink-1: #1c1b19;
   /* primary text            */
   --ink-2: #57534c;
   /* secondary / supporting  */
   --ink-3: #8a857b;
   /* tertiary / metadata     */
   --ink-4: #b6b0a4;
   /* muted / placeholder     */

   /* Lines — low-opacity, disappear until needed */
   --line-1: rgba(28, 27, 25, 0.12);
   /* standard separation */
   --line-2: rgba(28, 27, 25, 0.07);
   /* soft                */
   --line-3: rgba(28, 27, 25, 0.22);
   /* emphasis            */

   /* Route — the single accent */
   --route: #4338ca;
   --route-hover: #3730a3;
   --route-press: #312b8f;
   --route-soft: rgba(67, 56, 202, 0.10);
   --route-ring: rgba(67, 56, 202, 0.32);
   --route-on: #ffffff;
   /* text on a route-filled surface */

   /* Semantics — warm-tuned, each with a soft companion */
   --ok: #2f7d54;
   --ok-soft: rgba(47, 125, 84, 0.12);
   --warn: #b5790f;
   --warn-soft: rgba(181, 121, 15, 0.14);
   --danger: #c0392b;
   --danger-soft: rgba(192, 57, 43, 0.12);

   /* Controls — white fields with a hairline border (the header search opts
      into the muted well colour to recede). */
   --field-bg: #ffffff;
   --field-bg-focus: #ffffff;
   --field-border: rgba(28, 27, 25, 0.16);

   /* Depth — subtle shadows (light); borders take over in dark */
   --shadow-1: 0 1px 2px rgba(28, 27, 25, 0.06), 0 1px 1px rgba(28, 27, 25, 0.04);
   --shadow-2: 0 8px 28px rgba(28, 27, 25, 0.16), 0 2px 6px rgba(28, 27, 25, 0.08);

   /* Spacing — 4px base */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
   --space-7: 48px;

   /* Radius */
   --radius-sm: 6px;
   /* inputs, buttons   */
   --radius-md: 10px;
   /* cards             */
   --radius-lg: 16px;
   /* modals            */
   --radius-pill: 999px;
   /* chips, avatars    */

   /* Type scale */
   --text-xs: 0.75rem;
   /* 12 */
   --text-sm: 0.8125rem;
   /* 13 */
   --text-base: 0.875rem;
   /* 14 — body */
   --text-md: 1rem;
   /* 16 */
   --text-lg: 1.125rem;
   /* 18 */
   --text-xl: 1.25rem;
   /* 20 */
   --text-2xl: 1.5rem;
   /* 24 */
   --text-3xl: 1.875rem;
   /* 30 */

   /* Motion */
   --ease: cubic-bezier(0.2, 0, 0, 1);
   --dur-fast: 120ms;
   --dur-med: 200ms;

   /* Shell */
   --header-h: 52px;

   /* Width the card text slides right to reveal the completion checkbox. */
   --check-gutter: 28px;
}

/* ---- Dark: warm charcoal, borders carry definition --------------------- */
:root[data-bs-theme="dark"] {
   --paper-0: #16151a;
   --paper-1: #1d1c22;
   --paper-2: #25232b;
   --paper-sunk: #131217;

   --ink-1: #f1eee8;
   --ink-2: #b7b2a8;
   --ink-3: #87827a;
   --ink-4: #615d57;

   --line-1: rgba(255, 255, 255, 0.12);
   --line-2: rgba(255, 255, 255, 0.06);
   --line-3: rgba(255, 255, 255, 0.24);

   --route: #818cf8;
   --route-hover: #99a2fa;
   --route-press: #a9b1fb;
   --route-soft: rgba(129, 140, 248, 0.16);
   --route-ring: rgba(129, 140, 248, 0.40);
   --route-on: #16151a;

   --ok: #5ab483;
   --ok-soft: rgba(90, 180, 131, 0.16);
   --warn: #e0a23c;
   --warn-soft: rgba(224, 162, 60, 0.18);
   --danger: #e8675a;
   --danger-soft: rgba(232, 103, 90, 0.18);

   --field-bg: #131217;
   --field-bg-focus: #131217;
   --field-border: rgba(255, 255, 255, 0.16);

   --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
   --shadow-2: 0 10px 34px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Bootstrap variable mapping — make stock components speak the language
   ========================================================================== */
:root,
:root[data-bs-theme="dark"] {
   --bs-body-font-family: "InterVariable", "Inter", system-ui, -apple-system, sans-serif;
   --bs-body-font-size: var(--text-base);
   --bs-body-font-weight: 400;
   --bs-body-line-height: 1.55;

   --bs-body-bg: var(--paper-0);
   --bs-body-color: var(--ink-1);
   --bs-secondary-color: var(--ink-2);
   --bs-secondary-bg: var(--paper-sunk);
   --bs-tertiary-color: var(--ink-3);
   --bs-tertiary-bg: var(--paper-sunk);
   --bs-emphasis-color: var(--ink-1);

   --bs-border-color: var(--line-1);
   --bs-border-color-translucent: var(--line-1);
   --bs-border-radius: var(--radius-sm);
   --bs-border-radius-sm: var(--radius-sm);
   --bs-border-radius-lg: var(--radius-md);
   --bs-border-radius-xl: var(--radius-lg);

   --bs-primary: var(--route);
   --bs-primary-rgb: 67, 56, 202;
   --bs-link-color: var(--route);
   --bs-link-color-rgb: 67, 56, 202;
   --bs-link-hover-color: var(--route-hover);

   --bs-card-bg: var(--paper-1);
   --bs-card-border-color: var(--line-1);
   --bs-card-cap-bg: var(--paper-1);
   --bs-card-border-radius: var(--radius-md);
   --bs-card-inner-border-radius: calc(var(--radius-md) - 1px);

   --bs-modal-bg: var(--paper-2);
   --bs-modal-border-color: var(--line-1);
   --bs-modal-border-radius: var(--radius-lg);
   --bs-modal-box-shadow: var(--shadow-2);
}

/* Dropdowns: Bootstrap re-declares every --bs-dropdown-* variable *locally* on
   .dropdown-menu (e.g. --bs-dropdown-link-active-bg: #0d6efd), so the same
   variables set at :root never reach dropdown items — they'd inherit a hard
   bright-blue active state. Map them onto .dropdown-menu itself, the same scope
   Bootstrap uses, so the route accent (not raw blue) wins. */
.dropdown-menu {
   --bs-dropdown-bg: var(--paper-2);
   --bs-dropdown-border-color: var(--line-1);
   --bs-dropdown-border-radius: var(--radius-md);
   --bs-dropdown-box-shadow: var(--shadow-2);
   --bs-dropdown-link-hover-bg: var(--paper-sunk);
   --bs-dropdown-link-active-bg: var(--route-soft);
   --bs-dropdown-link-active-color: var(--ink-1);
}

:root[data-bs-theme="dark"] {
   --bs-primary-rgb: 129, 140, 248;
   --bs-link-color-rgb: 129, 140, 248;
}

/* ==========================================================================
   Base typography
   ========================================================================== */
body {
   font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss03";
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   letter-spacing: -0.006em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
   font-weight: 600;
   letter-spacing: -0.018em;
   color: var(--ink-1);
}

h1,
.h1 {
   font-size: var(--text-3xl);
   line-height: 1.15;
}

h2,
.h2 {
   font-size: var(--text-2xl);
   line-height: 1.2;
}

h3,
.h3 {
   font-size: var(--text-xl);
   line-height: 1.25;
}

.text-muted {
   color: var(--ink-3) !important;
}

.tnum {
   font-variant-numeric: tabular-nums;
}

/* Numbers that need alignment — counts, dates, tokens */
time,
.count,
.badge {
   font-variant-numeric: tabular-nums;
}

::selection {
   background: var(--route-soft);
}

:focus-visible {
   outline: 2px solid var(--route);
   outline-offset: 2px;
   border-radius: var(--radius-sm);
}

/* ==========================================================================
   Buttons — quiet by default, the route fills only primary actions
   ========================================================================== */
.btn {
   --bs-btn-font-weight: 500;
   --bs-btn-font-size: var(--text-base);
   --bs-btn-padding-y: 0.4rem;
   --bs-btn-padding-x: 0.85rem;
   --bs-btn-border-radius: var(--radius-sm);
   letter-spacing: -0.01em;
   transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
}

.btn-sm {
   --bs-btn-padding-y: 0.25rem;
   --bs-btn-padding-x: 0.6rem;
   --bs-btn-font-size: var(--text-sm);
}

.btn-primary {
   --bs-btn-bg: var(--route);
   --bs-btn-border-color: var(--route);
   --bs-btn-color: var(--route-on);
   --bs-btn-hover-bg: var(--route-hover);
   --bs-btn-hover-border-color: var(--route-hover);
   --bs-btn-hover-color: var(--route-on);
   --bs-btn-active-bg: var(--route-press);
   --bs-btn-active-border-color: var(--route-press);
   --bs-btn-disabled-bg: var(--route);
   --bs-btn-disabled-border-color: var(--route);
}

/* Secondary = quiet outline on a paper surface */
.btn-outline-secondary {
   --bs-btn-color: var(--ink-2);
   --bs-btn-border-color: var(--line-3);
   --bs-btn-bg: transparent;
   --bs-btn-hover-bg: var(--paper-sunk);
   --bs-btn-hover-border-color: var(--line-3);
   --bs-btn-hover-color: var(--ink-1);
   --bs-btn-active-bg: var(--paper-sunk);
   --bs-btn-active-color: var(--ink-1);
   --bs-btn-active-border-color: var(--line-3);
}

.btn-link {
   --bs-btn-color: var(--route);
   --bs-btn-hover-color: var(--route-hover);
   text-decoration: none;
   font-weight: 500;
}

/* A bare icon/ghost button for toolbars and menus */
.btn-ghost {
   --bs-btn-color: var(--ink-2);
   --bs-btn-bg: transparent;
   --bs-btn-border-color: transparent;
   --bs-btn-hover-bg: var(--paper-sunk);
   --bs-btn-hover-color: var(--ink-1);
   --bs-btn-hover-border-color: transparent;
   --bs-btn-active-bg: var(--paper-sunk);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
   box-shadow: var(--shadow-1);
   border-color: var(--line-1);
}

:root[data-bs-theme="dark"] .card {
   box-shadow: none;
}

/* ==========================================================================
   Form controls — inset fields, route focus ring
   ========================================================================== */
.form-control,
.form-select {
   background-color: var(--field-bg);
   border-color: var(--field-border);
   color: var(--ink-1);
   border-radius: var(--radius-sm);
   padding: 0.45rem 0.7rem;
   font-size: var(--text-base);
   transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease),
      box-shadow var(--dur-fast) var(--ease);
}

.form-control::placeholder {
   color: var(--ink-4);
}

.form-control:focus,
.form-select:focus {
   background-color: var(--field-bg-focus);
   border-color: var(--route);
   box-shadow: 0 0 0 3px var(--route-ring);
   color: var(--ink-1);
}

.form-control:disabled {
   background-color: var(--paper-sunk);
   color: var(--ink-3);
}

.form-label {
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--ink-2);
   margin-bottom: var(--space-1);
   letter-spacing: -0.01em;
}

/* Help text under a control */
.form-help {
   font-size: var(--text-xs);
   color: var(--ink-3);
   margin-top: var(--space-1);
}

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

.form-control.is-invalid,
.form-select.is-invalid {
   border-color: var(--danger);
}

.form-control.is-invalid:focus {
   box-shadow: 0 0 0 3px var(--danger-soft);
}

/* ==========================================================================
   Form layout — sectioned fieldsets
   ========================================================================== */
.form-section {
   border: 1px solid var(--line-1);
   border-radius: var(--radius-md);
   background: var(--paper-1);
   box-shadow: var(--shadow-1);
   padding: var(--space-5);
   margin-bottom: var(--space-4);
}

:root[data-bs-theme="dark"] .form-section {
   box-shadow: none;
}

.form-section+.form-section {
   margin-top: 0;
}

.form-section-head {
   margin-bottom: var(--space-4);
}

.form-section-title {
   font-size: var(--text-md);
   font-weight: 600;
   color: var(--ink-1);
   margin: 0;
}

.form-section-desc {
   font-size: var(--text-sm);
   color: var(--ink-3);
   margin: var(--space-1) 0 0;
}

/* Field stack — consistent vertical rhythm between fields */
.field-stack>*+* {
   margin-top: var(--space-4);
}

/* Action row — primary right, cancel/secondary left of it */
.form-actions {
   display: flex;
   gap: var(--space-2);
   justify-content: flex-end;
   align-items: center;
   margin-top: var(--space-5);
   padding-top: var(--space-4);
   border-top: 1px solid var(--line-2);
}

.form-actions .spacer {
   margin-right: auto;
}

/* A bordered page panel that isn't a fieldset (lists, tables) */
.panel {
   border: 1px solid var(--line-1);
   border-radius: var(--radius-md);
   background: var(--paper-1);
   box-shadow: var(--shadow-1);
}

:root[data-bs-theme="dark"] .panel {
   box-shadow: none;
}

.panel-head {
   padding: var(--space-4) var(--space-5);
   border-bottom: 1px solid var(--line-2);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
}

.panel-body {
   padding: var(--space-5);
}

/* Contact dashboard — stat tiles, charts grid, task status pill */
.stat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: var(--space-4);
   margin-bottom: var(--space-5);
}

.stat-tile {
   display: flex;
   flex-direction: column;
   gap: var(--space-1);
   padding: var(--space-5);
   border: 1px solid var(--line-1);
   border-left: 3px solid var(--line-2);
   border-radius: var(--radius-md);
   background: var(--paper-1);
   box-shadow: var(--shadow-1);
}

:root[data-bs-theme="dark"] .stat-tile {
   box-shadow: none;
}

.stat-tile--warn {
   border-left-color: var(--warn);
}

.stat-tile--danger {
   border-left-color: var(--danger);
}

.stat-value {
   font-size: 1.75rem;
   font-weight: 600;
   line-height: 1.1;
   color: var(--ink-1);
}

.stat-label {
   font-size: 0.85rem;
   color: var(--ink-3);
}

.stat-tile--warn .stat-value {
   color: var(--warn);
}

.stat-tile--danger .stat-value {
   color: var(--danger);
}

.dashboard-charts {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--space-4);
   margin-bottom: var(--space-5);
}

.contact-chart {
   width: 100%;
   max-height: 220px;
}

.task-status {
   font-size: 0.8rem;
   padding: 0 var(--space-2);
   border-radius: var(--radius-pill);
}

.task-status--done {
   color: var(--ok);
   background: var(--ok-soft);
}

/* Constrain form-first pages to a comfortable reading measure */
.form-page {
   max-width: 640px;
}

.content-page {
   max-width: 1040px;
}

/* ==========================================================================
   Chips & badges
   ========================================================================== */
.chip {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
   padding: 2px var(--space-2);
   font-size: var(--text-xs);
   font-weight: 500;
   color: var(--ink-2);
   background: var(--paper-sunk);
   border: 1px solid var(--line-2);
   border-radius: var(--radius-pill);
   line-height: 1.5;
   text-decoration: none;
}

a.chip:hover {
   color: var(--ink-1);
   border-color: var(--line-3);
}

.chip-route {
   color: var(--route);
   background: var(--route-soft);
   border-color: transparent;
}

/* ==========================================================================
   Page header — title row with a right-aligned action
   ========================================================================== */
.page-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: var(--space-4);
   margin-bottom: var(--space-4);
}

.back-link {
   display: inline-block;
   font-size: var(--text-sm);
   color: var(--ink-3);
   text-decoration: none;
   margin-bottom: var(--space-1);
}

.back-link:hover {
   color: var(--ink-1);
}

/* Vertical rhythm between stacked dashboard sections (latest tasks, latest time). */
.dashboard-block {
   margin-top: var(--space-5);
}

/* Borderless list living inside a .panel: rows divided by hairlines. */
.plain-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.plain-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-5);
   border-bottom: 1px solid var(--line-2);
}

.plain-row:last-child {
   border-bottom: 0;
}

.row-title {
   font-weight: 500;
   color: var(--ink-1);
   text-decoration: none;
}

.row-title:hover {
   color: var(--route);
}

/* A row title rendered as a <button> (opens a modal instead of navigating):
   combine with .row-title — this only resets the native button chrome. */
.row-title-btn {
   background: none;
   border: 0;
   padding: 0;
   font: inherit;
   cursor: pointer;
   text-align: left;
}

/* ==========================================================================
   Card grid (boards)
   ========================================================================== */
.card-grid {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: var(--space-4);
}

.board-card {
   position: relative;
   display: flex;
   flex-direction: column;
   background: var(--paper-1);
   border: 1px solid var(--line-1);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-1);
   overflow: hidden;
   transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

:root[data-bs-theme="dark"] .board-card {
   box-shadow: none;
}

.board-card:hover {
   box-shadow: var(--shadow-2);
   border-color: var(--line-3);
}

/* The colour cover IS the board's background colour. */
.board-card-link {
   display: block;
   text-decoration: none;
   color: inherit;
}

.board-card-cover {
   display: block;
   height: 88px;
   background-color: var(--paper-sunk);
}

.board-card-cover.is-default {
   background-image: linear-gradient(135deg, var(--route-soft), var(--paper-sunk));
}

.board-card-body {
   padding: var(--space-3) var(--space-4) var(--space-4);
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}

.board-card-name {
   font-weight: 600;
   font-size: var(--text-md);
   color: var(--ink-1);
   text-decoration: none;
   letter-spacing: -0.01em;
}

.board-card-link:hover .board-card-name {
   color: var(--route);
}

/* Overlapping avatar stack */
.avatar-stack {
   display: flex;
   min-height: 28px;
}

.avatar-stack .avatar,
.avatar-stack .avatar-initials {
   margin-right: -8px;
   border: 2px solid var(--paper-1);
   box-shadow: 0 0 0 1px var(--line-1);
}

.avatar-stack> :last-child {
   margin-right: 0;
}

/* ==========================================================================
   Modal subtitle (under the title) — names the selected item
   ========================================================================== */
.modal-header {
   align-items: flex-start;
}

.modal-subtitle {
   font-size: var(--text-sm);
   color: var(--ink-3);
   margin-top: 2px;
}

/* ==========================================================================
   Settings modal — tabs + sections
   ========================================================================== */
.settings-tabs {
   --bs-nav-tabs-border-color: var(--line-1);
   --bs-nav-tabs-link-active-bg: transparent;
   --bs-nav-tabs-link-active-color: var(--route);
   --bs-nav-tabs-link-active-border-color: transparent transparent var(--route);
   border-bottom: 1px solid var(--line-1);
   gap: var(--space-2);
}

.settings-tabs .nav-link {
   color: var(--ink-2);
   font-weight: 500;
   font-size: var(--text-base);
   padding: var(--space-2) var(--space-2);
   border: 0;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
}

.settings-tabs .nav-link:hover {
   color: var(--ink-1);
}

.settings-tabs .nav-link.active {
   color: var(--route);
   border-bottom-color: var(--route);
}

.settings-tab-content {
   padding-top: var(--space-4);
}

.settings-section {
   margin-bottom: var(--space-5);
}

.settings-section:last-child {
   margin-bottom: 0;
}

.settings-section .form-section-title {
   font-size: var(--text-md);
   font-weight: 600;
}

.settings-section .form-section-desc {
   margin-bottom: var(--space-3);
}

/* ==========================================================================
   Webhooks — event picker + rows
   ========================================================================== */
.webhook-form {
   margin-top: var(--space-3);
}

.event-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: var(--space-2);
   margin-top: var(--space-2);
}

.event-option {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--line-1);
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.event-option:hover {
   border-color: var(--line-3);
   background: var(--paper-sunk);
}

.event-option input {
   margin-top: 3px;
   accent-color: var(--route);
}

.event-text {
   display: flex;
   flex-direction: column;
}

.event-name {
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--ink-1);
}

.event-desc {
   font-size: var(--text-xs);
   color: var(--ink-3);
}

.webhook-row {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-3);
   padding: var(--space-3);
   border: 1px solid var(--line-1);
   border-radius: var(--radius-sm);
   margin-bottom: var(--space-2);
}

.webhook-row-main {
   min-width: 0;
}

.webhook-url {
   font-size: var(--text-sm);
   color: var(--ink-1);
   word-break: break-all;
}

.webhook-events {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-1);
   margin: var(--space-2) 0;
}

/* ==========================================================================
   Custom fields — list + add form
   ========================================================================== */
/* Project settings: inline field editor rows (mirrors .label-edit-row) */
.field-edit-row {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-2) 0;
}

.field-drag {
   cursor: grab;
   color: var(--ink-4);
   flex: none;
}

.field-row-arrows {
   display: flex;
   gap: 2px;
   flex: none;
}

.field-row-form {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   flex: 1 1 auto;
   min-width: 0;
}

.field-name-input {
   max-width: 220px;
}

.field-options-input {
   flex: 1 1 auto;
   min-width: 0;
}

.field-form {
   margin-top: var(--space-3);
   padding: var(--space-4);
   background: var(--paper-sunk);
   border: 1px solid var(--line-2);
   border-radius: var(--radius-md);
}

.field-form-row {
   display: grid;
   grid-template-columns: 1fr 160px;
   gap: var(--space-3);
}

.field-form-options {
   margin-top: var(--space-3);
   max-width: 360px;
}

.field-form-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
   margin-top: var(--space-4);
}

.check-inline {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--text-sm);
   color: var(--ink-2);
}

.check-inline input {
   accent-color: var(--route);
}

/* ==========================================================================
   Error page
   ========================================================================== */
.error-page {
   max-width: 460px;
   margin: var(--space-7) auto;
   text-align: center;
}

.error-code {
   font-size: 3rem;
   font-weight: 700;
   letter-spacing: -0.03em;
   color: var(--route);
   font-variant-numeric: tabular-nums;
   line-height: 1;
   margin-bottom: var(--space-3);
}

/* ==========================================================================
   App shell — header (brand · nav · global search · user menu)
   ========================================================================== */
.app-header {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   height: var(--header-h);
   /* Never let the flex column (board view) compress the fixed-height header —
      a tall board/table must scroll, not shrink the nav bar. */
   flex-shrink: 0;
   padding: 0 var(--space-4);
   background: var(--paper-1);
   border-bottom: 1px solid var(--line-1);
   /* Sit above page content (notably the board, whose themed header carries a
      backdrop-filter that traps its dropdowns) so header popups aren't hidden
      behind the columns. Below the task modal (Bootstrap modal z-index 1050+). */
   position: relative;
   z-index: 1030;
}

.app-brand {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   font-size: var(--text-md);
   font-weight: 600;
   letter-spacing: -0.02em;
   color: var(--ink-1);
   text-decoration: none;
   white-space: nowrap;
}

.app-nav {
   display: flex;
   gap: 2px;
}

/* The Projects entry is a dropdown trigger (a button) but must look exactly
   like its sibling links — strip the button chrome, then share the pill skin. */
.app-nav .nav-pill-btn {
   border: 0;
   background: none;
   font: inherit;
}

.app-nav a,
.app-nav .nav-pill-btn {
   padding: 0.3rem 0.6rem;
   border-radius: var(--radius-sm);
   color: var(--ink-2);
   font-size: var(--text-base);
   font-weight: 500;
   text-decoration: none;
   transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.app-nav a:hover,
.app-nav .nav-pill-btn:hover {
   background: var(--paper-sunk);
   color: var(--ink-1);
}

.app-nav a.is-active,
.app-nav .nav-pill-btn.is-active {
   color: var(--ink-1);
   background: var(--paper-sunk);
}

/* Global search — the header trigger that opens the command palette. The wrap is
   the centred flex item; .app-search-trigger (see the command-palette section)
   styles the button itself. */
.app-search-wrap {
   position: relative;
   flex: 1 1 auto;
   max-width: 460px;
   margin: 0 auto;
}

/* Always hugs the right edge: on desktop the flex-grow search fills the gap,
   but once that (and the nav) collapse away on mobile this margin is what keeps
   the cluster pinned right with a clear gap after the brand. */
.app-right {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   margin-left: auto;
}

/* Org chip in the header — quiet pointer into the org switcher */
.org-chip {
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* The org chip doubles as a dropdown toggle, so it can be a <button>. */
button.chip {
   font: inherit;
   cursor: pointer;
}

/* Avatar + user-menu trigger — a pill carrying the avatar circle + the user's
   name; the whole pill is the dropdown toggle. */
.avatar-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   padding: 3px var(--space-3) 3px 3px;
   border: 1px solid var(--line-1);
   border-radius: var(--radius-pill);
   background: transparent;
   color: var(--ink-1);
   font: inherit;
   cursor: pointer;
   max-width: 220px;
}

.avatar-btn:hover {
   border-color: var(--line-3);
}

/* Shrink the navbar avatar so the user pill matches the org chip's height.
   The avatar is what drives the pill's height (avatar + 6px padding + 2px
   border), so 20px lands the pill at 28px to sit level with the org chip.
   (The 28px default avatar made the pill 36px — too tall; 16px made it 24px —
   too short.) */
.avatar-btn .avatar,
.avatar-btn .avatar-initials {
   width: 20px;
   height: 20px;
   border-radius: var(--radius-pill);
   flex-shrink: 0;
}

.avatar-btn .avatar-initials {
   font-size: 0.7rem;
}

.avatar-name {
   font-size: var(--text-sm);
   font-weight: 500;
   line-height: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.avatar-initials {
   background: var(--route-soft);
   color: var(--route);
   font-weight: 600;
}

/* Hamburger — the collapsed home for the section links (and, on phones, the
   search box). Hidden on desktop where the inline nav carries the links. */
.nav-burger {
   display: none;
}

.nav-burger-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   padding: 0;
   border: 1px solid var(--line-1);
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--ink-1);
   cursor: pointer;
}

.nav-burger-btn:hover {
   background: var(--paper-sunk);
   border-color: var(--line-3);
}

.nav-burger-icon {
   width: 20px;
   height: 20px;
}

/* Collapsed menu items reuse the shared .dropdown-item.is-active marker
   (defined with the dropdown rules below). */
/* The search and org entries only earn their place in the menu once their
   inline counterparts (the search box, the org pill) have folded away. */
.nav-burger-search,
.nav-burger-search-sep,
.nav-burger-org,
.nav-burger-org-sep {
   display: none;
}

/* Responsive header collapse — instead of letting the bar scroll sideways, the
   pieces fold away in order of how often they're reached for. */

/* Tablets: section links fold into the hamburger; the inline nav steps aside. */
@media (max-width: 820px) {
   .app-nav {
      display: none;
   }

   .nav-burger {
      display: block;
   }

   .avatar-name {
      display: none;
   }

   /* With the name gone the pill is avatar-only — drop the right padding so it
      collapses to a tight circle instead of leaving dead space beside it. */
   .avatar-btn {
      padding: 3px;
   }
}

/* Phones: the search box and org switcher fold into the hamburger too, and
   spacing tightens so the brand + right cluster sit without overflow. */
@media (max-width: 560px) {
   .app-header {
      gap: var(--space-2);
      padding: 0 var(--space-3);
   }

   .app-search-wrap {
      display: none;
   }

   .org-dropdown {
      display: none;
   }

   .nav-burger-search,
   .nav-burger-search-sep,
   .nav-burger-org,
   .nav-burger-org-sep {
      display: block;
   }

   /* The notification/activity panels are wide and their toggles sit mid-bar,
      so a button-anchored menu would spill off the left edge. Pin them under
      the header against the right edge and cap the width to the viewport. */
   .app-header .notif-dropdown {
      position: fixed;
      top: var(--header-h);
      right: var(--space-3);
      left: auto;
      width: min(320px, calc(100vw - 2 * var(--space-3)));
   }
}

/* ==========================================================================
   Dropdown menus — ONE popover style for every dropdown (account menu, org
   switcher, column actions, …). The surface (bg/border/radius/shadow/hover
   fill) comes from the --bs-dropdown-* mappings above; these rules add the
   shared inner padding and the rounded, comfortable items. Anything using
   Bootstrap's .dropdown-menu + .dropdown-item gets this for free — do not
   restyle individual menus. See `.interface-design/system.md` → "Dropdown
   menus" for the usage guide.
   ========================================================================== */
.dropdown-menu {
   padding: var(--space-1);
   min-width: 200px;
}

.dropdown-menu .dropdown-item {
   border-radius: var(--radius-sm);
   font-size: var(--text-base);
   color: var(--ink-2);
   padding: 0.4rem var(--space-3);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
   color: var(--ink-1);
}

/* The "you are here" item (e.g. the open board in the boards menu): same
   quiet marker as the nav pills, not Bootstrap's primary-blue .active. */
.dropdown-menu .dropdown-item.is-active {
   color: var(--ink-1);
   font-weight: 600;
   background: var(--paper-sunk);
}

/* Destructive item (e.g. Delete, Sign out): .text-danger or .danger. */
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.danger {
   color: var(--danger);
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.danger:hover {
   color: var(--danger);
   background: var(--danger-soft);
}

.dropdown-divider {
   border-color: var(--line-2);
}

/* A non-clickable section label inside a menu (e.g. "Appearance"). */
.dropdown-menu .menu-label {
   font-size: var(--text-xs);
   color: var(--ink-3);
   padding: var(--space-2) var(--space-3) var(--space-1);
   letter-spacing: 0.02em;
}

/* Account menu — the dropdown that also carries an identity header + theme
   control. Inherits the shared menu style above; only adds those extras. */
.user-menu {
   min-width: 248px;
}

.user-menu .menu-head {
   padding: var(--space-2) var(--space-3) var(--space-3);
   border-bottom: 1px solid var(--line-2);
   margin-bottom: var(--space-1);
}

.user-menu .menu-head .name {
   font-weight: 600;
   color: var(--ink-1);
   font-size: var(--text-base);
}

.user-menu .menu-head .sub {
   font-size: var(--text-xs);
   color: var(--ink-3);
}

/* Theme segmented control */
.theme-seg {
   display: flex;
   gap: 2px;
   margin: var(--space-1) var(--space-3) var(--space-2);
   padding: 2px;
   background: var(--paper-sunk);
   border-radius: var(--radius-sm);
}

.theme-seg button {
   flex: 1;
   border: 0;
   background: transparent;
   color: var(--ink-2);
   font-size: var(--text-xs);
   font-weight: 500;
   padding: 0.3rem;
   border-radius: calc(var(--radius-sm) - 2px);
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.theme-seg button:hover {
   color: var(--ink-1);
}

.theme-seg button.is-active {
   background: var(--paper-1);
   color: var(--ink-1);
   box-shadow: var(--shadow-1);
}

/* ==========================================================================
   Search results
   ========================================================================== */
.search-group-title {
   font-size: var(--text-sm);
   font-weight: 600;
   color: var(--ink-2);
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: var(--space-2);
}

.search-group-title .count {
   font-weight: 500;
   margin-left: var(--space-1);
}

.result-row {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-3) var(--space-4);
   text-decoration: none;
   color: var(--ink-1);
   border-bottom: 1px solid var(--line-2);
   transition: background-color var(--dur-fast) var(--ease);
}

.result-row:last-child {
   border-bottom: 0;
}

.result-row:hover {
   background: var(--paper-sunk);
}

.result-kind {
   color: var(--route);
   font-size: var(--text-md);
   width: 1rem;
   text-align: center;
   flex: none;
}

.result-main {
   display: flex;
   flex-direction: column;
   min-width: 0;
   flex: 1 1 auto;
}

.result-name {
   font-weight: 500;
   color: var(--ink-1);
}

.result-sub {
   font-size: var(--text-sm);
   color: var(--ink-3);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.result-ctx {
   flex: none;
   font-size: var(--text-xs);
   color: var(--ink-3);
   background: var(--paper-sunk);
   border-radius: var(--radius-pill);
   padding: 2px var(--space-2);
   max-width: 180px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Monospace-ish reference chip pinning the left of a task result row. */
.result-ref {
   flex: none;
   width: 5rem;
   font-size: var(--text-xs);
   color: var(--ink-3);
   font-variant-numeric: tabular-nums;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

/* Assignee avatar pinned to the right of a task result row. */
.result-assignee {
   flex: none;
   display: inline-flex;
   align-items: center;
}

/* ==========================================================================
   Command palette (ISS-48)
   The header search box is a quiet trigger styled like the old input; the
   palette itself is a centred overlay that reuses the .result-row search rows.
   ========================================================================== */

/* Header trigger — looks like a search field but acts as a button. */
.app-search-trigger {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   width: 100%;
   height: 34px;
   padding: 0 var(--space-2) 0 0.65rem;
   background: var(--paper-sunk);
   border: 1px solid var(--line-2);
   border-radius: var(--radius-sm);
   color: var(--ink-4);
   font-size: var(--text-sm);
   cursor: pointer;
   text-align: left;
}

.app-search-trigger:hover {
   border-color: var(--route);
}

.app-search-trigger .search-icon {
   width: 1rem;
   height: 1rem;
   flex: none;
   color: var(--ink-3);
}

.app-search-trigger-text {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.app-search-kbd {
   flex: none;
   font-size: var(--text-xs);
   color: var(--ink-3);
   background: var(--paper-2);
   border: 1px solid var(--line-2);
   border-radius: var(--radius-sm);
   padding: 1px 6px;
}

/* Overlay: a dimmed full-screen layer with the dialog floated near the top.
   Sits above modals/menus but below toasts and the realtime banner. */
.cmd-palette {
   position: fixed;
   inset: 0;
   z-index: 1085;
   display: flex;
   justify-content: center;
   align-items: flex-start;
}

.cmd-palette[hidden] {
   display: none;
}

.cmd-palette-backdrop {
   position: absolute;
   inset: 0;
   background: rgba(28, 27, 25, 0.44);
}

.cmd-palette-dialog {
   position: relative;
   width: min(640px, calc(100% - 2 * var(--space-4)));
   margin-top: 12vh;
   max-height: 70vh;
   display: flex;
   flex-direction: column;
   background: var(--paper-2);
   border: 1px solid var(--line-1);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-2);
   overflow: hidden;
}

.cmd-palette-head {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--line-2);
}

.cmd-palette-icon {
   width: 1.1rem;
   height: 1.1rem;
   flex: none;
   color: var(--ink-3);
}

.cmd-palette-input {
   flex: 1 1 auto;
   border: 0;
   background: transparent;
   color: var(--ink-1);
   font-size: var(--text-md);
   outline: none;
}

.cmd-palette-input::placeholder {
   color: var(--ink-4);
}

.cmd-palette-esc {
   flex: none;
   font-size: var(--text-xs);
   color: var(--ink-3);
   background: var(--paper-sunk);
   border: 1px solid var(--line-2);
   border-radius: var(--radius-sm);
   padding: 1px 6px;
}

.cmd-palette-results {
   overflow-y: auto;
   padding: var(--space-2);
}

.cmd-group + .cmd-group {
   margin-top: var(--space-3);
}

.cmd-palette-results .search-group-title {
   padding: 0 var(--space-2);
}

/* Reuse the search .result-row look, but as compact rounded rows with no
   divider, and a clear keyboard-highlight state. */
.cmd-palette-results .result-row {
   border-bottom: 0;
   border-radius: var(--radius-sm);
   padding: var(--space-2) var(--space-2);
   width: 100%;
   border-width: 0;
   background: none;
   cursor: pointer;
}

.cmd-palette-results .result-row.is-active,
.cmd-palette-results .result-row:hover {
   background: var(--route-soft);
}

.cmd-palette-empty {
   padding: var(--space-4);
   text-align: center;
   font-size: var(--text-sm);
}

/* ==========================================================================
   Task completion checkbox + tick animation (board card & task modal)
   ========================================================================== */
.card-check {
   display: inline-flex;
   padding: 0;
   border: 0;
   background: transparent;
   cursor: pointer;
   line-height: 0;
   position: relative;
}

.card-check-box {
   position: relative;
   width: 18px;
   height: 18px;
   border: 1.5px solid var(--line-3);
   border-radius: 5px;
   background: var(--paper-1);
   display: grid;
   place-items: center;
   transition: background-color var(--dur-fast) var(--ease),
      border-color var(--dur-fast) var(--ease);
}

.card-check:hover .card-check-box {
   border-color: var(--ok);
}

.card-check-tick {
   width: 12px;
   height: 12px;
   color: #fff;
   /* The tick path is ~16 units long; hide it by offsetting the full dash. */
   stroke-dasharray: 17;
   stroke-dashoffset: 17;
   opacity: 0;
}

/* Checked: green fill + drawn tick. Persisted state shows it without animating. */
.card-check.is-checked .card-check-box {
   background: var(--ok);
   border-color: var(--ok);
}

.card-check.is-checked .card-check-tick {
   opacity: 1;
   stroke-dashoffset: 0;
}

/* Tick animation when freshly completed: pop + draw + sparkle burst. */
.card-check.just-completed .card-check-box {
   animation: check-pop 0.4s var(--ease);
}

.card-check.just-completed .card-check-tick {
   animation: tick-draw 0.35s ease 0.05s forwards;
}

@keyframes check-pop {
   0% {
      transform: scale(1);
   }

   45% {
      transform: scale(1.28);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes tick-draw {
   from {
      opacity: 1;
      stroke-dashoffset: 17;
   }

   to {
      opacity: 1;
      stroke-dashoffset: 0;
   }
}

/* Sparkles burst out from the checkbox centre. */
.card-sparkles {
   position: absolute;
   left: 9px;
   top: 9px;
   width: 0;
   height: 0;
   pointer-events: none;
}

.card-sparkles i {
   position: absolute;
   left: -2px;
   top: -2px;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background: var(--ok);
   opacity: 0;
}

.card-sparkles i:nth-child(1) {
   --sx: 13px;
   --sy: -10px;
}

.card-sparkles i:nth-child(2) {
   --sx: 15px;
   --sy: 4px;
}

.card-sparkles i:nth-child(3) {
   --sx: 4px;
   --sy: 14px;
}

.card-sparkles i:nth-child(4) {
   --sx: -11px;
   --sy: 11px;
}

.card-sparkles i:nth-child(5) {
   --sx: -14px;
   --sy: -5px;
}

.card-sparkles i:nth-child(6) {
   --sx: -3px;
   --sy: -14px;
}

.card-check.just-completed .card-sparkles i {
   animation: sparkle 0.55s ease-out forwards;
}

@keyframes sparkle {
   0% {
      opacity: 1;
      transform: translate(0, 0) scale(1);
   }

   100% {
      opacity: 0;
      transform: translate(var(--sx), var(--sy)) scale(0.2);
   }
}

@media (prefers-reduced-motion: reduce) {

   .card-check.just-completed .card-check-box,
   .card-check.just-completed .card-check-tick,
   .card-check.just-completed .card-sparkles i {
      animation: none;
   }
}

/* Static variant: always visible (table rows, sidebar). margin-top aligns the
   18px box within a 1.25rem/1.55 line-height row (table row use); the sidebar
   completion field overrides margin-top to 0 via .sidebar-complete-box. */
.card-check-static {
   margin-right: var(--space-3);
   margin-top: calc((1.25rem * 1.55 - 18px) / 2);
}

.task-modal-head {
   align-items: flex-start;
}

/* ==========================================================================
   Labels
   ========================================================================== */
.label-chip {
   display: inline-flex;
   align-items: center;
   padding: 2px 10px;
   border-radius: var(--radius-pill);
   font-size: var(--text-xs);
   font-weight: 600;
   line-height: 1.5;
   background: var(--fill);
   border: 1.5px solid var(--border);
   color: var(--text);
}

.label-chip:empty {
   padding: 0;
   width: 30px;
   height: 14px;
}

.label-bar {
   display: inline-block;
   width: 26px;
   height: 8px;
   border-radius: var(--radius-pill);
   background: var(--fill);
   border: 1px solid var(--border);
}

/* Settings page label editor */
.label-edit-row {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   padding: var(--space-2) 0;
}

.label-swatch-btn {
   width: 30px;
   height: 24px;
   border-radius: var(--radius-sm);
   border: 2px solid var(--border);
   background: var(--fill);
   cursor: pointer;
   flex: none;
}

/* 6x6 colour/shade picker, shown inside a Bootstrap dropdown menu */
.label-picker-menu {
   padding: var(--space-2);
   min-width: 0;
}

.label-picker {
   display: grid;
   grid-template-columns: repeat(6, 24px);
   gap: 6px;
}

.label-picker button {
   height: 22px;
   border-radius: 5px;
   border: 2px solid var(--border);
   background: var(--fill);
   cursor: pointer;
   padding: 0;
}

.label-picker button.is-selected {
   outline: 2px solid var(--route);
   outline-offset: 1px;
}

/* Compact label bars row on a board card */
.label-bar-row {
   display: flex;
   gap: 4px;
   flex-wrap: wrap;
   margin-bottom: 6px;
}

/* Danger zone panel */
.panel-danger {
   border-color: var(--danger);
}

.panel-danger .panel-head {
   color: var(--danger);
   border-bottom-color: var(--danger-soft);
}

/* Task lightbox label picker */
.task-labels {
   margin-bottom: var(--space-4);
}

.task-labels .label-add {
   height: 20px;
   padding: 0 var(--space-2);
   display: inline-flex;
   align-items: center;
   border: 1px dashed var(--line-3);
   border-radius: var(--radius-pill);
   color: var(--ink-3);
   line-height: 1;
   font-size: var(--text-xs);
   white-space: nowrap;
}

/* Task label toggle list, shown inside a Bootstrap dropdown menu */
.label-toggle-menu {
   padding: var(--space-1);
   min-width: 200px;
}

.label-toggle {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) var(--space-2);
   border-radius: var(--radius-sm);
   cursor: pointer;
}

.label-toggle:hover {
   background: var(--paper-sunk);
}

.label-toggle input {
   accent-color: var(--route);
}

.label-toggle-foot {
   border-top: 1px solid var(--line-2);
   margin-top: var(--space-1);
   padding: var(--space-2) var(--space-2) var(--space-1);
}

.label-toggle-foot a {
   font-size: var(--text-xs);
   color: var(--route);
   text-decoration: none;
}

/* ==========================================================================
   Checklists (task lightbox)
   ========================================================================== */
.task-checklists {
   margin: var(--space-4) 0;
}

.checklist {
   margin-bottom: var(--space-4);
}

.checklist-head {
   display: flex;
   align-items: center;
   gap: var(--space-2);
}

.checklist-name {
   font-weight: 600;
   color: var(--ink-1);
}

.checklist-count {
   margin-left: auto;
}

.checklist-progress {
   height: 4px;
   border-radius: var(--radius-pill);
   background: var(--paper-sunk);
   margin: var(--space-1) 0 var(--space-2);
   overflow: hidden;
}

.checklist-progress>span {
   display: block;
   height: 100%;
   background: var(--ok);
}

.checklist-items {
   list-style: none;
   margin: 0;
   padding: 0;
}

.checklist-item {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--space-1) 0;
}

.checklist-item .checklist-drag {
   cursor: grab;
   color: var(--ink-4);
}

.checklist-item .checklist-check {
   accent-color: var(--ok);
}

.checklist-text {
   flex: 1 1 auto;
   min-width: 0;
}

.checklist-item.is-done .checklist-text {
   color: var(--ink-3);
   text-decoration: line-through;
}

.checklist-due {
   white-space: nowrap;
}

.checklist-add-item,
.checklist-add {
   margin-top: var(--space-2);
}

/* Board-card checklist badge (used in the next task) */
.card-checklist-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   font-size: var(--text-xs);
   color: var(--ink-3);
}

/* CRM contact tooltip: lazy-loaded hover/focus card shown for any .contact-name.
   The host is a single fixed-position element positioned in JS near the trigger. */
.contact-tooltip-host {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 1080;
   max-width: 280px;
   pointer-events: auto;
}

.contact-tooltip-host[hidden] {
   display: none;
}

.contact-tooltip {
   background: var(--paper-2);
   border: 1px solid var(--line-1);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-2);
   padding: var(--space-3);
   max-width: 280px;
   font-size: var(--text-sm);
   color: var(--ink-1);
}

.contact-tooltip-head {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   margin-bottom: var(--space-2);
}

.contact-tooltip-avatar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   border-radius: var(--radius-pill);
   background: var(--ink-3);
   color: var(--paper-1);
   font-size: var(--text-xs);
   font-weight: 600;
   text-transform: uppercase;
}

.contact-tooltip-name {
   font-weight: 600;
   color: var(--ink-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.contact-tooltip-rows {
   margin: 0;
}

.contact-tooltip-row {
   margin-bottom: var(--space-2);
}

.contact-tooltip-row:last-child {
   margin-bottom: 0;
}

.contact-tooltip-label {
   font-size: var(--text-xs);
   color: var(--ink-3);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   margin: 0;
}

.contact-tooltip-value {
   margin: 0;
   color: var(--ink-1);
   word-break: break-word;
}

.contact-tooltip-meta {
   color: var(--ink-2);
   font-size: var(--text-xs);
   margin-left: var(--space-1);
}