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

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

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

/* --- Rich-text editor host (the Groups (New) 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; }