/* ============================================================================
   Kickstand CRM — Design-system component classes
   ----------------------------------------------------------------------------
   The settled components from the Kickstand Design System canvas
   (Markdowns/design-system/README.md §Settled), written once here so every page
   built on the system shares one definition. Values come from kickstand-tokens.css;
   nothing in this file is a literal that has a token.

   First consumer: Groups (Pages/Groups/, 2026-09-12). Tax Analysis and the
   Financials tables adopt these classes when they are rebuilt on the system.

   Vocabulary (BEM, block prefix ks-):
     .ks-label        the label token (Inter Tight 14/600, 0.06em caps, label navy)
     .ks-eyebrow      the page eyebrow (label face in ink-light, with a 16px glyph)
     .ks-page-title   A3 page title (Inter 40/700 navy)
     .ks-instruction  description / instruction text (14px ink-light)
     .ks-page-head    the block that holds eyebrow + title + description (spacing, wrap width)
     .ks-btn          buttons: --primary --secondary --outline --outline-green --danger
                      --ghost --filter; sizes --md (36) --sm (30); --sq square.
                      The menu is Markdowns/DESIGN.md §4; DesignSystemGuardTests enforces it.
     .ks-chip         the code chip (11.5/700 navy-mid on sky); --green on an active tab
     .ks-tabs/.ks-tab E3 tabs (14/600, 26px apart, 2px green underline)
     .ks-field/.ks-ctrl  label over a 44px control on the control border
     .ks-seg          H3 outlined segmented group (36px; --lg 44px)
     .ks-check        I1 checkbox (18px, 5px radius; --on --some --band)
     .ks-step-num     F1 stepper numeral (30px navy circle; --done green)
     .ks-tbl          the Standard table (16 in 40px rows, navy band, #ccc rules);
                      --dense = 13 in 30px rows, --medium = 14 in 34px rows (Email's middle
                      text size); __sort (click-a-heading sort), __rz (drag a heading edge),
                      __row--unread + __dot (unread mail)
     .ks-detail       the detail panel beside a table (white card, the selected row's navy edge)
     .ks-splitter     the drag-to-resize gutter between two panes
     .ks-attach       an attachment tile (--blocked for a file that is never opened)
     .ks-switch       the on/off toggle (green when on)
     .ks-order        a list reordered by dragging its rows' grips (Settings - Background loading)
     .ks-tokens       an address field holding .ks-token pills (--team green) and a typing input
     .ks-snippet      a snippet card in the compose window's side panel
     .ks-file         a file about to be sent: 36px, name, size, remove
     .ks-addmark      the add mark (B) as a button, with or without its word
     .ks-empty        J1 empty state
     .ks-loading-state  centred "Loading…" while a list fills
   ============================================================================ */

/* --- Type roles ---------------------------------------------------------- */

.ks-label {
  font-family: var(--ks-font-label);
  font-size: var(--ks-label-size);
  font-weight: var(--ks-label-weight);
  letter-spacing: var(--ks-label-tracking);
  line-height: var(--ks-label-lh);
  text-transform: uppercase;
  color: var(--ks-label-color);
}

.ks-eyebrow {
  font-family: var(--ks-font-label);
  font-size: var(--ks-label-size);
  font-weight: var(--ks-label-weight);
  letter-spacing: var(--ks-label-tracking);
  text-transform: uppercase;
  color: var(--ks-ink-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ks-eyebrow svg { width: 16px; height: 16px; flex-shrink: 0; }

.ks-page-title {
  font-family: var(--ks-font-body);
  font-size: var(--ks-d3-size);
  line-height: var(--ks-d3-lh);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ks-blue);
  margin: 6px 0 0;
}

.ks-instruction {
  font-size: var(--ks-body-s-size);
  line-height: var(--ks-body-s-lh);
  color: var(--ks-ink-light);
}

.ks-help { font-size: var(--ks-body-s-size); color: var(--ks-mute); }

/* The page-header block (eyebrow, title, description) - one definition so no page drifts from the
   others: the description sits 8px under the title and wraps at 620px (promoted from Groups'
   .gn-head on its second use, Tax Analysis, 2026-09-21). */
.ks-page-head { display: flex; flex-direction: column; min-width: 0; }
.ks-page-head .ks-instruction { margin-top: 8px; max-width: 620px; }

/* Loading state: centred grey text in the space a list will fill, so an empty box never reads as broken.
   Same look as the Overview FYI / Goals / Groups lists' `.loading-state` (FYIList.razor). */
.ks-loading-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ks-ink-light);
  font-size: 16px;
}

/* --- Buttons --------------------------------------------------------------
   44 / 36 / 30 heights, 6px radius, Inter 600 (16 lg, 14 md/sm), one leading icon max.
   Outlined buttons hover by thickening the line in their own text colour, never a fill
   tint. Green is the single confirming action on a surface; navy carries neutral primary
   actions; outline-green is the confirming action wherever the one primary is spent (D46). */

.ks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: var(--ks-radius-sm);
  border: 1px solid transparent;
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-size);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ks-ink);
  background: var(--ks-canvas);
  text-decoration: none;
}

.ks-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ks-btn--md { height: 36px; padding: 0 14px; font-size: var(--ks-body-s-size); gap: 6px; }
.ks-btn--md svg { width: 16px; height: 16px; }
.ks-btn--sm { height: 30px; padding: 0 10px; font-size: var(--ks-body-s-size); gap: 6px; }
.ks-btn--sm svg { width: 14px; height: 14px; }
.ks-btn--sq { padding: 0; width: 44px; }
.ks-btn--sq.ks-btn--md { width: 36px; }
.ks-btn--sq.ks-btn--sm { width: 30px; }

.ks-btn--primary { background: var(--ks-green); border-color: var(--ks-green); color: #FFFFFF; }
.ks-btn--primary:hover:not(:disabled) { background: var(--ks-green-deep); border-color: var(--ks-green-deep); }
.ks-btn--secondary { background: var(--ks-blue); border-color: var(--ks-blue); color: #FFFFFF; }
.ks-btn--secondary:hover:not(:disabled) { background: var(--ks-blue-mid); border-color: var(--ks-blue-mid); }
.ks-btn--outline { background: var(--ks-canvas); border-color: var(--ks-line-strong); color: var(--ks-ink); }
.ks-btn--outline:hover:not(:disabled) { border-color: var(--ks-ink); outline: 1px solid var(--ks-ink); outline-offset: -2px; }
.ks-btn--outline-green { background: var(--ks-canvas); border-color: var(--ks-green); color: var(--ks-green-deep); }
.ks-btn--outline-green:hover:not(:disabled) { outline: 1px solid var(--ks-green); outline-offset: -2px; }
.ks-btn--danger { background: var(--ks-canvas); border-color: var(--ks-danger); color: var(--ks-danger); }
.ks-btn--danger:hover:not(:disabled) { outline: 1px solid var(--ks-danger); outline-offset: -2px; }
.ks-btn--ghost { background: transparent; border-color: transparent; color: var(--ks-ink-light); }
.ks-btn--ghost:hover:not(:disabled) { background: var(--ks-sky-50); color: var(--ks-blue); }

.ks-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }
.ks-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Filter button (D2): field name 600 + value 400, funnel glyph, chevron. */
.ks-btn--filter { font-weight: 400; padding: 0 12px; }
.ks-btn--filter b { font-weight: 600; }
.ks-btn--filter svg { color: var(--ks-mute); }
.ks-btn--filter .ks-chev { width: 10px; height: 10px; margin-left: 2px; }
.ks-btn--filter.ks-btn--on { border-color: var(--ks-green); color: var(--ks-green-deep); }
.ks-btn--filter.ks-btn--on svg { color: var(--ks-green-deep); }

/* --- Chip ---------------------------------------------------------------- */

.ks-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ks-blue-mid);
  background: var(--ks-sky-100);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.ks-chip--green { color: var(--ks-green-deep); background: #EBF4E0; }
/* A neutral tag: the Email list's "CRM only" copy, the reading pane's mailbox (D66, Chad 2026-09-22) */
.ks-chip--grey { color: var(--ks-ink-light); background: var(--ks-line-soft); }
/* Former email address, and every action that changes Outlook (D66): the burnt-orange Jewel pair */
.ks-chip--former { color: var(--ks-jewel-3-text); background: #FEECE2; text-transform: uppercase; letter-spacing: 0.04em; }

/* --- Tabs (E3) ----------------------------------------------------------- */

.ks-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--ks-line); }

.ks-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 2px 10px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-s-size);
  font-weight: 600;
  color: var(--ks-ink-light);
  cursor: pointer;
}

.ks-tab:hover { color: var(--ks-blue); }
.ks-tab--active { color: var(--ks-blue); border-bottom-color: var(--ks-green); }
.ks-tab--active .ks-chip { color: var(--ks-green-deep); background: #EBF4E0; }
.ks-tab:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Fields and controls -------------------------------------------------- */

.ks-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ks-ctrl {
  height: 44px;
  box-sizing: border-box;
  width: 100%;
  padding: 0 14px;
  border-radius: var(--ks-radius-sm);
  border: 1px solid var(--ks-line-strong);
  background: var(--ks-canvas);
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-size);
  color: var(--ks-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ks-ctrl::placeholder { color: var(--ks-mute); }
.ks-ctrl:focus { outline: none; border-color: var(--ks-blue); box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }
/* background-color, not the shorthand: the shorthand also wiped a disabled select's chevron. */
.ks-ctrl:disabled { background-color: var(--ks-sky-50); color: var(--ks-mute); cursor: not-allowed; }

/* A native select on the same geometry: the chevron is drawn, the UA arrow hidden. It shrinks with the control
   (Chad 2026-09-30, the Drop-down arrow board): 44 = 12px, 14px from the right; 36 = 10px / 12px; 30 = 10px / 10px;
   the text stops 12px short of the chevron. Ink-light at 1.75 so it still reads at 10px. */
select.ks-ctrl {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235A6671' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5L6 8l3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 12px;
  cursor: pointer;
}

select.ks-ctrl.ks-ctrl--placeholder { color: var(--ks-mute); }

.ks-ctrl--md { height: 36px; font-size: var(--ks-body-s-size); }
.ks-ctrl--sm { height: 30px; padding: 0 10px; font-size: var(--ks-body-s-size); }
select.ks-ctrl.ks-ctrl--md { padding: 0 34px 0 12px; background-position: right 12px center; background-size: 10px 10px; }
select.ks-ctrl.ks-ctrl--sm { padding-right: 32px; background-position: right 10px center; background-size: 10px 10px; }
/* A multi-line box: the same control, grown to its rows (the notification message, 2026-09-23). */
textarea.ks-ctrl { height: auto; min-height: 84px; padding-top: 10px; padding-bottom: 10px; line-height: 1.45; resize: vertical; }

/* Search: the magnifier sits in the field. */
.ks-search { position: relative; min-width: 0; }
.ks-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ks-mute); pointer-events: none; }
.ks-search .ks-ctrl { padding-left: 38px; }
.ks-search .ks-ctrl--md { padding-left: 34px; }
.ks-search--md svg { width: 15px; height: 15px; left: 12px; }

/* --- Segmented group (H3) ------------------------------------------------- */

.ks-seg {
  display: inline-flex;
  align-self: flex-start;
  height: 36px;
  border: 1px solid var(--ks-line-strong);
  border-radius: var(--ks-radius-sm);
  overflow: hidden;
  background: var(--ks-canvas);
}

.ks-seg > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-s-size);
  font-weight: 500;
  color: var(--ks-ink-light);
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
}

.ks-seg > button + button { border-left: 1px solid var(--ks-line-strong); }
.ks-seg > button:hover:not(:disabled) { color: var(--ks-blue); }
.ks-seg > button.ks-seg--on { background: var(--ks-sky-100); color: var(--ks-blue); font-weight: 600; }
.ks-seg > button:disabled { opacity: 0.45; cursor: not-allowed; }
.ks-seg--lg { height: 44px; }
/* A chosen segment that means "urgent" takes the danger wash - Importance: High (Chad 2026-09-23). */
.ks-seg > button.ks-seg--high { background: var(--ks-danger-bg); color: var(--ks-danger); }
.ks-seg--lg > button { font-size: var(--ks-body-size); }
.ks-seg--lg svg { width: 18px; height: 18px; flex-shrink: 0; }

/* --- Checkbox (I1) -------------------------------------------------------- */

.ks-check {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 5px;
  border: 1.5px solid var(--ks-line-strong);
  background: var(--ks-canvas);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ks-check svg { width: 12px; height: 12px; }
.ks-check--on { background: var(--ks-green); border-color: var(--ks-green); }
.ks-check--some { background: var(--ks-canvas); border-color: var(--ks-green); color: var(--ks-green); }
/* On the navy band: white outline, white fill with a green check when on. */
.ks-check--band { border-color: rgba(255, 255, 255, 0.7); background: transparent; }
.ks-check--band.ks-check--on, .ks-check--band.ks-check--some { background: #FFFFFF; border-color: #FFFFFF; color: var(--ks-green); }
.ks-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }

/* --- Stepper (F1) --------------------------------------------------------- */

.ks-step-num {
  width: 30px;
  height: 30px;
  border-radius: var(--ks-radius-pill);
  background: var(--ks-blue);
  color: #FFFFFF;
  font-size: var(--ks-body-s-size);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ks-step-num--done { background: var(--ks-green); }

/* --- Tables ----------------------------------------------------------------
   Standard: Inter 16 in 40px rows. Dense: 13 in 30px rows. Both: navy band with 13/700
   0.14em caps, 1px #CCCCCC rules right and bottom of every cell, 10px frame.
   The header lives INSIDE the scroller (position: sticky) — module-ui-conventions.md
   §A Scrolling Table's Header. Column widths are the page's: set grid-template-columns
   on .ks-tbl__head and .ks-tbl__row from the page's own class. */

.ks-tbl {
  display: flex;
  flex-direction: column;
  background: var(--ks-canvas);
  border: 1px solid #CCCCCC;
  border-radius: var(--ks-radius-md);
  overflow: hidden;
}

/* scrollbar-gutter reserves its strip in the PADDING box, but the sticky header is a grid
   child and so only spans the CONTENT box — leaving ~10px of bare canvas at the header's
   right end, visible as an unshaded notch in the top-right corner (Chad, 2026-09-14). It
   shows even with no scrollbar, because the gutter is reserved either way.
   The header itself cannot reach into the gutter, so the band is painted on the scroller
   instead, which does own that space. A background with the default `scroll` attachment is
   positioned against the padding box and does NOT move with the overflowing content — the
   same behaviour as the sticky header sitting on top of it, so the two stay aligned as the
   rows scroll under them. Keep the stop matched to .ks-tbl__head's height. */
.ks-tbl__scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
  background: linear-gradient(var(--ks-blue) 0 40px, transparent 40px) no-repeat;
}

.ks-tbl--dense .ks-tbl__scroll { background: linear-gradient(var(--ks-blue) 0 32px, transparent 32px) no-repeat; }

.ks-tbl__head {
  display: grid;
  align-items: center;
  height: 40px;
  background: var(--ks-blue);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
}

.ks-tbl__head > div { padding: 0 10px; white-space: nowrap; display: flex; align-items: center; overflow: hidden; }
.ks-tbl__row { display: grid; }
.ks-tbl__row:hover .ks-tbl__cell { background: var(--ks-sky-50); }

.ks-tbl__cell {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  font-size: var(--ks-body-size);
  color: var(--ks-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-tbl__row .ks-tbl__cell:last-child { border-right: none; }
.ks-tbl__row:last-child .ks-tbl__cell { border-bottom: none; }
.ks-tbl__cell--center, .ks-tbl__head > .ks-tbl__cell--center { justify-content: center; }
.ks-tbl__cell--muted { color: var(--ks-ink-light); }
.ks-tbl__row--selected .ks-tbl__cell { background: var(--ks-sky-100); color: var(--ks-blue); }
.ks-tbl__row--selected .ks-tbl__cell:first-child { box-shadow: inset 3px 0 0 var(--ks-blue); }
.ks-tbl__row--selected .ks-tbl__name { font-weight: 600; }
.ks-tbl__name { font-weight: 600; color: var(--ks-blue); }

.ks-tbl--dense .ks-tbl__head { height: 32px; }
.ks-tbl--dense .ks-tbl__head > div { padding: 0 12px; }
.ks-tbl--dense .ks-tbl__cell { height: 30px; padding: 0 12px; font-size: 13px; }

/* Medium: the Email list's middle text size - 14 in 34px rows, a 36px band (Chad 2026-09-22: 13 / 14 / 16). */
.ks-tbl--medium .ks-tbl__scroll { background: linear-gradient(var(--ks-blue) 0 36px, transparent 36px) no-repeat; }
.ks-tbl--medium .ks-tbl__head { height: 36px; }
.ks-tbl--medium .ks-tbl__cell { height: 34px; font-size: var(--ks-body-s-size); }

/* Unread (mail): the row's name and subject go navy 700, and a 7px navy dot sits in its narrow first column. */
/* Unread = bold navy alone; the dot column was dropped to save room (Chad 2026-09-23). */
.ks-tbl__row--unread .ks-tbl__strong { font-weight: 700; color: var(--ks-blue); }

/* Click a heading to sort, click again to reverse. The heading text is a button that fills its cell;
   the arrow shows only on the column in use. */
.ks-tbl__head > div { position: relative; align-self: stretch; }   /* full band height, so the resize handle is too */
.ks-tbl__sort { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%; padding: 0; border: none; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; justify-content: inherit; }
.ks-tbl__sort svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0; }
.ks-tbl__sort:hover svg { opacity: 0.5; }
.ks-tbl__sort--on svg, .ks-tbl__sort--on:hover svg { opacity: 1; }
.ks-tbl__sort--desc svg { transform: rotate(180deg); }
.ks-tbl__sort:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); }

/* Drag a heading's right edge to resize the column (widths are saved per user). The hairline is the handle;
   it turns green while dragging. */
.ks-tbl__rz { position: absolute; right: -3px; top: 7px; bottom: 7px; width: 6px; cursor: col-resize; display: flex; justify-content: center; z-index: 2; touch-action: none; }
.ks-tbl__rz::after { content: ""; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.32); }
.ks-tbl__rz:hover::after, .ks-tbl__rz--drag::after { width: 2px; background: var(--ks-green); }

/* Row action icon: the Icons-board trash at 20px in mute, danger on hover. */
.ks-rowact {
  color: var(--ks-mute);
  display: inline-flex;
  padding: 4px;
  border: none;
  background: transparent;
  border-radius: var(--ks-radius-sm);
  cursor: pointer;
}

.ks-rowact:hover { color: var(--ks-danger); background: var(--ks-danger-bg); }
.ks-rowact svg { width: 20px; height: 20px; }

/* --- Empty state (J1) ----------------------------------------------------- */

.ks-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--ks-mute);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ks-empty__mark {
  width: 48px;
  height: 48px;
  border-radius: var(--ks-radius-md);
  background: var(--ks-sky-100);
  color: var(--ks-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.ks-empty__mark svg { width: 24px; height: 24px; }
.ks-empty h3 { font-size: 20px; font-weight: 600; color: var(--ks-blue); margin: 0; }
.ks-empty p { font-size: var(--ks-body-size); max-width: 420px; margin: 0; line-height: 1.5; }

/* --- Avatar (Jewel category colour, two letters) -------------------------- */

.ks-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--ks-radius-pill);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--ks-blue-mid);
}

.ks-avatar--sm { width: 28px; height: 28px; }

/* --- Contact result list (G1) --------------------------------------------- */

.ks-clist { border: 1px solid #CCCCCC; border-radius: var(--ks-radius-md); overflow: hidden; background: var(--ks-canvas); }
.ks-clist__row { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-top: 1px solid #CCCCCC; cursor: pointer; }
.ks-clist__row:first-child { border-top: none; }
.ks-clist__row:hover { background: var(--ks-sky-50); }
.ks-clist__row--selected { background: var(--ks-sky-100); box-shadow: inset 3px 0 0 var(--ks-blue); }
.ks-clist__name { font-size: var(--ks-body-size); font-weight: 500; color: var(--ks-ink); }
.ks-clist__row--selected .ks-clist__name { color: var(--ks-blue); font-weight: 600; }
.ks-clist__meta { font-size: var(--ks-body-s-size); color: var(--ks-mute); }
.ks-clist__check { margin-left: auto; color: var(--ks-green-deep); opacity: 0; display: flex; }
.ks-clist__row--selected .ks-clist__check { opacity: 1; }

/* --- Menu (240–260 wide, radius 10, 40px rows, one separator before the destructive item) */

.ks-menu {
  position: absolute;
  z-index: 30;
  min-width: 240px;
  max-width: 260px;
  padding: 6px;
  box-sizing: border-box;
  background: var(--ks-canvas);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-md);
  box-shadow: var(--ks-shadow-lg);
  display: flex;
  flex-direction: column;
}

.ks-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: var(--ks-radius-sm);
  background: transparent;
  font-family: var(--ks-font-body);
  font-size: var(--ks-body-size);
  color: var(--ks-ink);
  text-align: left;
  justify-content: flex-start;
  cursor: pointer;
  white-space: nowrap;
}

.ks-menu__item:hover:not(:disabled) { background: var(--ks-sky-50); color: var(--ks-blue); }
.ks-menu__item:disabled { opacity: 0.45; cursor: not-allowed; }
.ks-menu__item--danger { color: var(--ks-danger); }
.ks-menu__item--danger:hover:not(:disabled) { background: var(--ks-danger-bg); color: var(--ks-danger); }
.ks-menu__sep { height: 1px; background: var(--ks-line); margin: 6px 4px; }
/* A checkbox row in a filter menu (several may be ticked; the menu stays open). Promoted from Groups'
   .gn-filter__row on its second use, the Email Mailbox filter (2026-09-22). */
.ks-menu__check { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--ks-radius-sm); cursor: pointer; font-size: var(--ks-body-size); color: var(--ks-ink); }
.ks-menu__check:hover { background: var(--ks-sky-50); }
/* justify-content: MainForm's global button reset centres a button's content (DESIGN.md §15). */
button.ks-menu__check { width: 100%; border: none; background: transparent; font-family: var(--ks-font-body); text-align: left; justify-content: flex-start; }
.ks-menu__check:disabled { opacity: 0.45; cursor: not-allowed; }
.ks-menu__check:disabled:hover { background: transparent; }
/* A field that picks several people from tick rows (Create a Notification's Send to, 2026-09-23): a 44px control
   naming the choice, over a .ks-menu of .ks-menu__check rows that stays open while ticking. */
.ks-pick { position: relative; }
.ks-pick__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; cursor: pointer; }
.ks-pick__btn svg { width: 16px; height: 16px; color: var(--ks-mute); flex-shrink: 0; }
.ks-pick__ph { color: var(--ks-mute); }
.ks-pick .ks-menu { left: 0; right: 0; top: calc(100% + 4px); max-width: none; max-height: 320px; overflow-y: auto; }
/* A wide menu for rows that carry an address beside the name (the compose window's pickers). */
.ks-menu--wide { max-width: 520px; min-width: 420px; }
.ks-menu__meta { margin-left: auto; font-size: var(--ks-body-s-size); color: var(--ks-ink-light); }
.ks-menu__label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ks-mute); padding: 8px 12px 4px; }

/* --- Dialog (640 wide, radius 16, shadow xl, navy-tinted scrim + blur) -----
   Sized against --ks-scale, never inset: 0 (module-ui-conventions.md
   §Full-Screen Overlay Positioning). */

/* A dialog opened inside a layered container (Client Info's two person columns sit at z-index 1, the later
   one painting over the earlier) must lift that container above its neighbours while it is open (2026-09-22). */
.client-info-master:has(.ks-scrim),
.client-info-master *:has(.ks-scrim) { z-index: 1300 !important; }  /* the columns set z-index inline */

.ks-scrim {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(100vw / var(--ks-scale, 1));
  height: calc(100vh / var(--ks-scale, 1));
  z-index: 1200;
  background: rgba(6, 40, 64, 0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ks-dialog {
  width: 640px;
  max-width: calc(100vw / var(--ks-scale, 1) - 40px);
  max-height: calc(100vh / var(--ks-scale, 1) - 40px);
  background: var(--ks-canvas);
  border-radius: var(--ks-radius-lg);
  box-shadow: var(--ks-shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ks-dialog--wide { width: 1180px; }
/* 700: a confirm whose one-line title or list needs the room - sized so "Delete 999 emails from the CRM and Outlook?"
   fits with no gap to spare (Email's several-ticked and Clean Up confirms, Chad 2026-09-23). */
.ks-dialog--md { width: 700px; }
.ks-dialog__head { display: flex; align-items: flex-start; gap: 16px; padding: 26px 30px 18px; }
.ks-dialog__mark { width: 48px; height: 48px; border-radius: var(--ks-radius-md); background: var(--ks-sky-100); color: var(--ks-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ks-dialog__mark svg { width: 24px; height: 24px; }
.ks-dialog__title { font-size: var(--ks-h2-size); font-weight: var(--ks-h2-weight); line-height: var(--ks-h2-lh); letter-spacing: var(--ks-h2-tracking); color: var(--ks-ink); }
.ks-dialog__sub { font-size: var(--ks-body-s-size); color: var(--ks-ink-light); margin-top: 2px; }
.ks-dialog__close { margin-left: auto; }
.ks-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 30px 26px; font-size: var(--ks-body-size); color: var(--ks-ink); display: flex; flex-direction: column; gap: 16px; }
.ks-dialog__foot { display: flex; align-items: center; gap: 12px; padding: 16px 30px 22px; border-top: 1px solid var(--ks-line); }
.ks-dialog__foot .ks-dialog__right { margin-left: auto; display: flex; gap: 12px; }

/* --- Review strip (the stale-list warning, D44) ------------------------------ */

.ks-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 16px;
  border-radius: var(--ks-radius-md);
  background: #FDF7F0;
  border: 1px solid #F5D7B5;
  border-left: 3px solid var(--ks-warning);
  font-size: var(--ks-body-s-size);
  line-height: 1.5;
  color: var(--ks-ink-soft);
}

.ks-strip b { color: var(--ks-ink); font-weight: 600; }
.ks-strip > svg { width: 18px; height: 18px; color: var(--ks-sun-deep); flex-shrink: 0; }
.ks-strip__text { flex: 1 1 auto; }
.ks-strip__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ks-strip--danger { background: var(--ks-danger-bg); border-color: #EFC2B6; border-left-color: var(--ks-danger); }
.ks-strip--danger > svg { color: var(--ks-danger); }

/* --- Rich-text editor host (the Groups merge tab's trimmed bar, promoted on its second use:
       the email signature and compose dialogs, 2026-09-13) --------------------------------------
   Wrap a TinyMceEditor in .ks-editor: sky toolbar bar, 36px buttons, 14px select labels, no
   outer border of its own. The host sets its own min-height. */
.ks-editor { background: var(--ks-canvas); border: 1px solid var(--ks-line-strong); border-radius: var(--ks-radius-md); overflow: hidden; display: flex; }
.ks-editor .TinyMceEditor .tox .tox-editor-header { display: flex; }
.ks-editor .TinyMceEditor .tox:not(.tox-tinymce-inline) .tox-editor-header { background: var(--ks-sky-50); height: 52px; padding: 0 8px; border-bottom: 1px solid var(--ks-line); box-shadow: none; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-toolbar__primary { background: transparent; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-tbtn { width: 36px; height: 36px; border-radius: var(--ks-radius-sm); color: var(--ks-ink-light); background: transparent; margin: 0 2px; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-tbtn--select { width: auto; padding: 0 10px; color: var(--ks-ink); font-family: var(--ks-font-body); font-size: 14px; font-weight: 500; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-tbtn:hover { background: var(--ks-canvas); box-shadow: inset 0 0 0 1px var(--ks-line-strong); color: var(--ks-blue); }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-tbtn svg { fill: currentColor; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-tbtn__select-label { color: inherit; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-toolbar__group { padding: 0 4px; }
.ks-editor .TinyMceEditor .tox .tox-editor-header .tox-toolbar__group:not(:last-of-type) { border-right: 1px solid var(--ks-line-strong); }
.ks-editor .TinyMceEditor .tox-toolbar .tox-toolbar__group:last-child button span { font-size: 14px; position: static; right: auto; }
.ks-editor .TinyMceEditor .tox .tox-tbtn__select-label { font-size: 14px; font-weight: 500; }
.ks-editor .TinyMceEditor .tox .tox-tbtn__select-chevron svg { width: 10px; height: 10px; }
.ks-editor .TinyMceEditor .tox.tox-tinymce { border: none; }

/* --- Detail panel (D66, the Email reading pane; the shape the Financials detail panel starts from) -----------
   A white card beside a table carrying the selected row's 3px navy left edge (DESIGN.md §6). Head, then a body
   that scrolls on its own. */
.ks-detail { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--ks-canvas); border: 1px solid var(--ks-line); border-radius: var(--ks-radius-md); box-shadow: inset 3px 0 0 var(--ks-blue), var(--ks-shadow-md); overflow: hidden; }
.ks-detail__head { display: flex; flex-direction: column; gap: 12px; padding: 20px 26px 16px 29px; border-bottom: 1px solid var(--ks-line); }
.ks-detail__title { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ks-blue); overflow-wrap: anywhere; }
.ks-detail__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 29px 26px; }

/* --- Splitter (Chad 2026-09-22: "drag them left or right") ----------------------------------------------------
   The gutter between two side-by-side panes, as its own 20px grid column. On hover a hairline shows in its middle;
   while dragging it turns green (the column resize handle's look). ks-table-resize.js → ksSplitter does the drag. */
.ks-splitter { position: relative; cursor: col-resize; touch-action: none; display: flex; justify-content: center; }
.ks-splitter::after { content: ""; width: 2px; height: 48px; margin-top: 24px; border-radius: var(--ks-radius-pill); background: var(--ks-line-strong); opacity: 0; transition: opacity 0.12s; }
.ks-splitter:hover::after { opacity: 1; }
.ks-splitter--drag::after { opacity: 1; height: 100%; margin-top: 0; background: var(--ks-green); }

/* --- Attachment tile (D66) ---------------------------------------------------------------------------------
   48px tile: a sky file mark, the name 14/600, a 12.5 meta line. --blocked = a file that is never opened. */
.ks-attach { display: inline-flex; align-items: center; gap: 10px; height: 48px; max-width: 320px; padding: 0 14px 0 10px; box-sizing: border-box; border: 1px solid var(--ks-line-strong); border-radius: var(--ks-radius-sm); background: var(--ks-canvas); font-family: var(--ks-font-body); text-align: left; cursor: pointer; }
.ks-attach:hover:not(:disabled) { border-color: var(--ks-blue); }
.ks-attach:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }
.ks-attach:disabled { cursor: not-allowed; }
.ks-attach__mark { width: 30px; height: 30px; border-radius: var(--ks-radius-sm); background: var(--ks-sky-100); color: var(--ks-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ks-attach__mark svg { width: 18px; height: 18px; }
.ks-attach__text { display: flex; flex-direction: column; min-width: 0; }
.ks-attach__name { font-size: var(--ks-body-s-size); font-weight: 600; color: var(--ks-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-attach__meta { font-size: 12.5px; color: var(--ks-mute); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ks-attach__meta svg { width: 13px; height: 13px; }
.ks-attach--blocked { border-color: #F2C4B8; background: #FDF5F2; }
.ks-attach--blocked .ks-attach__mark { background: var(--ks-danger-bg); color: var(--ks-danger); }
.ks-attach--blocked .ks-attach__meta { color: var(--ks-danger); }

/* --- Switch (the on/off toggle, D66 list settings; Chad 2026-09-22: "we'll be using it in a few other
       locations") -----------------------------------------------------------------------------------------
   A button role="switch" aria-checked: 40 x 24, grey track off, green track on, white knob. */
.ks-switch { position: relative; width: 40px; height: 24px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--ks-radius-pill); background: var(--ks-line-strong); cursor: pointer; transition: background 0.15s; }
.ks-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: var(--ks-radius-pill); background: #FFFFFF; box-shadow: var(--ks-shadow-sm); transition: left 0.15s; }
.ks-switch--on { background: var(--ks-green); }
.ks-switch--on::after { left: 19px; }
.ks-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }
.ks-switch:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Reorderable list (the Settings page, Chad 2026-09-30) ------------------------------------------------
   Rows dragged by their grip (KSIconGrip) to reorder; a row may carry its position number and a .ks-switch.
   Promoted from Email's list-settings order (em-set__orow) on its second use; Email moves over when next touched. */
.ks-order { border: 1px solid #CCCCCC; border-radius: var(--ks-radius-md); overflow: hidden; }
.ks-order__row { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-top: 1px solid #CCCCCC; font-size: var(--ks-body-size); cursor: grab; background: var(--ks-canvas); user-select: none; }
.ks-order__row:first-child { border-top: none; }
.ks-order__row:hover { background: var(--ks-sky-50); }
.ks-order__row--over { box-shadow: inset 0 2px 0 var(--ks-green); }
.ks-order__row > svg { width: 16px; height: 16px; color: var(--ks-mute); flex-shrink: 0; }
.ks-order__num { width: 22px; font-variant-numeric: tabular-nums; color: var(--ks-ink-light); font-weight: 600; }
.ks-order__name { flex: 1; }
.ks-order__row--off .ks-order__name { color: var(--ks-mute); }

/* --- Address tokens (D66 phase 3, the Compose board) ------------------------------------------------------
   A 44px field on the control border holding pills and a borderless input; focus rings the whole field.
   .ks-token = a household (or other) address: sky pill, name then address; --team = a colleague, green. */
.ks-tokens { position: relative; min-height: 44px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--ks-line-strong); border-radius: var(--ks-radius-sm); background: var(--ks-canvas); cursor: text; }
.ks-tokens:focus-within { border-color: var(--ks-blue); box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }
.ks-tokens__input { flex: 1 1 160px; min-width: 120px; height: 30px; border: none; outline: none; background: transparent; font-family: var(--ks-font-body); font-size: var(--ks-body-size); color: var(--ks-ink); padding: 0 4px; }
.ks-tokens__input::placeholder { color: var(--ks-mute); }
.ks-token { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: var(--ks-radius-sm); background: var(--ks-sky-100); color: var(--ks-blue); font-size: var(--ks-body-s-size); white-space: nowrap; max-width: 100%; }
.ks-token__addr { color: var(--ks-ink-light); overflow: hidden; text-overflow: ellipsis; }
.ks-token--team { background: #EBF4E0; color: var(--ks-green-deep); }
.ks-token button { width: 22px; height: 22px; padding: 0; border: none; border-radius: var(--ks-radius-xs); background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ks-token button:hover { background: rgba(12, 59, 93, 0.08); }
.ks-token button svg { width: 14px; height: 14px; }

/* --- Snippet card (D66 phase 3) ----------------------------------------------------------------------------
   A button card in the compose window's side panel: title 14/600 navy, a two-line 13px preview; hover = green line.
   One click inserts it at the cursor; its ⋮ menu edits or deletes. */
.ks-snippet { position: relative; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 34px 10px 12px; box-sizing: border-box; border: 1px solid var(--ks-line); border-radius: 8px; background: var(--ks-canvas); text-align: left; font-family: var(--ks-font-body); cursor: pointer; }
.ks-snippet:hover { border-color: var(--ks-green); }
.ks-snippet:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); }
.ks-snippet__title { font-size: var(--ks-body-s-size); font-weight: 600; color: var(--ks-blue); }
.ks-snippet__preview { font-size: 13px; line-height: 1.4; color: var(--ks-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ks-snippet__menu { position: absolute; right: 6px; top: 6px; }

/* --- File about to be sent (D66 phase 3) -------------------------------------------------------------------
   36px: a file glyph, the name, its size in mute, a remove ×. The received-mail tile is .ks-attach. */
.ks-file { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 4px 0 10px; box-sizing: border-box; border: 1px solid var(--ks-line-strong); border-radius: var(--ks-radius-sm); background: var(--ks-canvas); font-size: var(--ks-body-s-size); color: var(--ks-ink); max-width: 320px; }
.ks-file > svg { width: 16px; height: 16px; color: var(--ks-blue); flex-shrink: 0; }
.ks-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-file__size { color: var(--ks-mute); white-space: nowrap; }
.ks-file button { width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--ks-radius-xs); background: transparent; color: var(--ks-ink-light); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ks-file button:hover { background: var(--ks-sky-50); color: var(--ks-ink); }
.ks-file button svg { width: 14px; height: 14px; }

/* --- The add mark (B) as a button (DESIGN.md §10) ----------------------------------------------------------
   Green-deep outline rounded square with a plus; fills green-deep on hover. With its word ("Add Snippet") it is a
   quiet 14/600 green-deep text button; alone it carries an aria-label. */
.ks-addmark { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: none; background: transparent; font-family: var(--ks-font-body); font-size: var(--ks-body-s-size); font-weight: 600; color: var(--ks-green-deep); cursor: pointer; }
.ks-addmark svg { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.ks-addmark:hover svg { background: var(--ks-green-deep); color: #FFFFFF; }
.ks-addmark:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12, 59, 93, 0.22); border-radius: var(--ks-radius-sm); }