/* ============================================================================
   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 (New) (Pages/GroupsNew/, 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-btn          buttons: --primary --secondary --outline --outline-green --danger
                      --danger-solid; sizes --md (36) --sm (30); --sq square
     .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
     .ks-empty        J1 empty state
   ============================================================================ */

/* --- 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); }

/* --- 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--danger-solid { background: var(--ks-danger); border-color: var(--ks-danger); color: #FFFFFF; }
.ks-btn--danger-solid:hover:not(:disabled) { filter: brightness(0.92); }
.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; }

/* --- 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); }
.ks-ctrl:disabled { background: 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. */
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='%237A8590' stroke-width='1.5' 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); }

/* 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; }
.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;
}

.ks-tbl__scroll { overflow-y: auto; scrollbar-gutter: stable; }

.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; }

/* 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; }
.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). */

.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; }
.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); }