/* ═══════════════════════════════════════════════════════════════════
   shared/form-kit.css — Stream page-neutral form-component kit
   ───────────────────────────────────────────────────────────────────
   Hermetic copy of the proven onboarding "Setup Company" controls.
   Renders correctly on ANY page with ZERO other CSS loaded — every
   value resolves through a --fk-* token that falls back to a literal,
   so pm/* (--pm-*) and reports/* (--rp-*) pages get the gold-standard
   look without linking base.css / buttons.css / dropdowns.css.

   Scope: wrap markup in a single <div class="fk">. Base input/select/
   textarea + button rules are scoped under .fk so they never leak onto
   a host page. The dropdown/combobox/custom-select widget classes keep
   their EXACT onboarding names (.ob-multiselect*, .ob-ms-*, .ob-cs-*,
   .ob-combobox-*, .ob-dropdown-*) because shared/combobox.js and
   shared/form-kit.js emit those classes verbatim.

   NOTE: the onboarding field-STATE layer (imported/required/verified
   badges + green/orange/amber coloring) is deliberately NOT copied —
   kit fields stay neutral.
═══════════════════════════════════════════════════════════════════ */

/* ── Kit tokens — reference base tokens, fall back to onboarding's literal values ── */
:root {
  --fk-text: var(--text, #111827);
  --fk-muted: var(--muted, #667085);
  --fk-panel: var(--panel, #ffffff);
  --fk-border: var(--border, #E0E4ED);
  --fk-hover: var(--hover, #EEF2FF);
  --fk-chip: var(--chip, #EEF2FF);
  --fk-focus-border: var(--focus-border, #2F5BFF);
  --fk-focus-ring: var(--focus-ring, rgba(47,91,255,0.18));
  --fk-accent-border: var(--accent-border, #C0C7D6);
  --fk-button-bg: var(--button-bg, #ffffff);
  --fk-button-hover: var(--button-hover, #f5f7fb);
  --fk-shadow-md: var(--shadow-md, 0 4px 20px rgba(16,24,40,0.08), 0 1px 4px rgba(16,24,40,0.04));
  --fk-ctrl-h: 42px;
  --fk-ctrl-radius: 9px;
  --fk-ctrl-border: 1.5px solid var(--fk-border);
  --fk-ctrl-font: 14px;
  --fk-ctrl-font-sm: 13px;
  --fk-dp-radius: 10px;
}

/* ── Kit container ─────────────────────────────────────────────────── */
.fk {
  color: var(--fk-text);
  font-family: inherit;
}

/* ═══ Base form controls (scoped to .fk) ═══════════════════════════════
   Copied from onboarding.css .ob-task-content rules, re-scoped to .fk. */
.fk input[type=text],
.fk input[type=email],
.fk input[type=tel],
.fk input[type=date],
.fk input[type=number],
.fk input[type=password],
.fk select,
.fk textarea {
  height: var(--fk-ctrl-h);
  border: var(--fk-ctrl-border);
  border-radius: var(--fk-ctrl-radius);
  padding: 0 14px;
  font-size: var(--fk-ctrl-font);
  color: var(--fk-text);
  background: var(--fk-panel);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.fk select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.fk textarea {
  height: auto;
  min-height: 80px;
  padding: 12px 14px;
  resize: vertical;
}

/* Custom-select triggers inside the kit match the standard 42px input height
   (dropdowns.css defaults .ob-cs-trigger to the compact 34px height). */
.fk .ob-cs-trigger {
  height: var(--fk-ctrl-h);
  padding: 0 14px;
  font-size: var(--fk-ctrl-font);
  border-radius: var(--fk-ctrl-radius);
}

.fk input:hover,
.fk select:hover,
.fk textarea:hover { border-color: var(--fk-accent-border); }

.fk input:focus,
.fk select:focus,
.fk textarea:focus {
  outline: none;
  border-color: var(--fk-focus-border);
  box-shadow: 0 0 0 3px var(--fk-focus-ring);
}

.fk input::placeholder,
.fk textarea::placeholder {
  color: rgba(102, 112, 133, 0.55);
}

/* ── Quiet / ghost controls (CC-TRACK Bramblewick) ────────────────────
   A LOW-WEIGHT "+ Add …" affordance — a text cue, not a boxed field/button —
   so a list/block never reads as a form. No border, no fill, no shadow; muted
   and smaller than body text. It STRENGTHENS to full contrast on hover/focus of
   the control itself, OR on hover of an opt-in `.fk-quiet-host` container (wrap
   a card/row group in `.fk-quiet-host` to get "near-invisible while reading,
   full contrast when reached for"). Still a real kit control inside `.fk`.
   Selectors carry the element/`.btn` so they win over the boxed base rules. */
.fk input.fk-input--quiet,
.fk .fk-btn--quiet,
.fk button.fk-btn--quiet {
  height: auto;
  min-height: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 3px 2px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fk-muted);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 120ms ease;
}
.fk input.fk-input--quiet { width: 100%; cursor: text; }
.fk .fk-btn--quiet { font-weight: 600; }
.fk input.fk-input--quiet::placeholder { color: var(--fk-muted); opacity: 1; }

/* Strengthen: control hover/focus, or a hovered `.fk-quiet-host` ancestor. The host-hover
   selectors do NOT require an intermediate `.fk` (the host may wrap the controls directly). */
.fk input.fk-input--quiet:hover,
.fk input.fk-input--quiet:focus,
.fk .fk-btn--quiet:hover,
.fk .fk-btn--quiet:focus,
.fk-quiet-host:hover input.fk-input--quiet,
.fk-quiet-host:hover .fk-btn--quiet {
  color: var(--fk-text);
  background: transparent;
  outline: none;
}
.fk input.fk-input--quiet:focus::placeholder,
.fk-quiet-host:hover input.fk-input--quiet::placeholder {
  color: var(--fk-text);
}

/* ── Disabled inputs — clearly greyed (kit-wide) ──────────────────────
   Placed AFTER :hover so the muted border wins even while hovered. */
.fk input[type=text]:disabled,
.fk input[type=email]:disabled,
.fk input[type=tel]:disabled,
.fk input[type=date]:disabled,
.fk input[type=number]:disabled,
.fk input[type=password]:disabled,
.fk select:disabled,
.fk textarea:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
}
.fk input:disabled::placeholder,
.fk textarea:disabled::placeholder {
  color: #9ca3af;
}

/* ── Field wrapper (LAYOUT only — no state coloring) ───────────────────
   Modeled on .ob-field layout; neutral. */
.fk-field {
  display: block;
  margin-bottom: 18px;
}
.fk-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #6B7280;
  margin-bottom: 6px;
}
.fk-field.span-2 { grid-column: 1 / -1; }
.fk-field-input-wrap { position: relative; width: 100%; }

/* ═══ Multiselect / combobox widget ════════════════════════════════════
   Class names kept EXACT (combobox.js + form-kit.js emit them); only the
   var references are mapped to --fk-* so the kit is hermetic. */
.ob-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--fk-ctrl-h);
  border: var(--fk-ctrl-border);
  border-radius: var(--fk-ctrl-radius);
  padding: 0 14px;
  font-size: var(--fk-ctrl-font);
  color: var(--fk-text);
  background: var(--fk-panel);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  gap: 8px;
}

.ob-multiselect-trigger:hover { border-color: var(--fk-accent-border); }

.ob-multiselect-trigger:focus,
.ob-multiselect-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--fk-focus-border);
  box-shadow: 0 0 0 3px var(--fk-focus-ring);
}

.ob-ms-display {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  color: var(--fk-text);
}

.ob-ms-caret {
  flex-shrink: 0;
  color: var(--muted, #667085);
}

.ob-multiselect-dropdown {
  position: fixed;
  /* top/left/width set by JS via getBoundingClientRect so the dropdown
     escapes any ancestor overflow:hidden or overflow:clip constraints */
  background: var(--fk-panel);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-dp-radius);
  box-shadow: var(--fk-shadow-md);
  z-index: 9999;
  overflow: hidden;
  max-height: 280px;
  display: flex;
  flex-direction: column;
}

/* display:flex above outranks UA [hidden]{display:none}, so honour it explicitly. */
.ob-multiselect-dropdown[hidden] { display: none; }

.ob-ms-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--fk-border);
  flex-shrink: 0;
}

.ob-ms-search {
  width: 100%;
  height: 36px;
  border: var(--fk-ctrl-border);
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
  background: var(--panel-2, #F7F8FA);
  font-family: inherit;
  color: var(--fk-text);
  box-sizing: border-box;
  -webkit-appearance: none;
}

.ob-ms-search:focus {
  outline: none;
  border-color: var(--fk-focus-border);
  background: var(--input-bg, #ffffff);
  box-shadow: 0 0 0 3px var(--fk-focus-ring);
}

.ob-ms-options {
  overflow-y: auto;
  flex: 1;
}

.ob-ms-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: var(--fk-ctrl-font-sm);
  color: var(--fk-text);
  user-select: none;
}

.ob-ms-option:hover { background: var(--fk-hover); }
.ob-ms-option--selected { background: var(--fk-chip); }
.ob-ms-option--selected:hover { background: var(--hover-strong, #E7EAF0); }
.ob-ms-option--focused  { background: var(--fk-hover); }
.ob-combobox-custom-opt { color: var(--muted, #667085); }

.ob-ms-option-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--fk-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
}

.ob-ms-option--selected .ob-ms-option-check {
  background: var(--fk-focus-border);
  border-color: var(--fk-focus-border);
  color: var(--fk-panel);
}

.ob-ms-option-label { flex: 1; }

.ob-ms-option-abbr {
  color: var(--muted, #667085);
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Combobox discoverability helpers (creatable only) ─────────────── */
.ob-combobox-helper {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted, #6B7280);
  line-height: 1.45;
}

.ob-combobox-footer-cue {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--fk-border);
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}
.ob-combobox-footer-cue[hidden] { display: none; }

.ob-cb-cue-icon,
.ob-cb-create-icon {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  flex-shrink: 0;
}

.ob-cb-cue-icon   { color: var(--muted, #9CA3AF); }
.ob-cb-create-icon { color: var(--accent, #2F5BFF); }

.ob-cb-cue-text,
.ob-cb-create-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ob-cb-cue-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #6B7280);
}

.ob-cb-cue-sub,
.ob-cb-create-sub {
  font-size: 11px;
  color: var(--muted, #9CA3AF);
  line-height: 1.45;
}

.ob-combobox-create-opt {
  background: var(--fk-chip);
  border-top: 1px solid var(--fk-border);
  align-items: flex-start;
  gap: 8px;
}

.ob-combobox-create-opt:hover,
.ob-combobox-create-opt.ob-ms-option--focused {
  background: var(--fk-hover);
}

.ob-cb-create-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #2F5BFF);
  word-break: break-word;
}

/* ═══ Custom-select (native <select> → .ob-custom-select) ═══════════════
   Copied from css/dropdowns.css (.ob-* variants only), vars mapped to --fk-*. */
.ob-dropdown-panel {
  background: var(--fk-panel);
  border: 1px solid var(--fk-border);
  border-radius: 10px;
  box-shadow: var(--fk-shadow-md);
  padding: 6px;
  z-index: 9999;
  overflow: hidden;
}

.ob-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fk-text);
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  transition: background 120ms ease;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
}

.ob-dropdown-item:hover,
.ob-dropdown-item:focus-visible { background: var(--fk-hover); outline: none; }

.ob-dropdown-item.is-active,
.ob-dropdown-item[aria-selected="true"] { background: #EFF3FF; }

.ob-dropdown-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted, #667085); }

.ob-dropdown-divider { height: 1px; background: var(--fk-border); margin: 4px 0; }

.ob-custom-select {
  position: relative;
  width: 100%;
}

.ob-cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--ds-trigger-h, 34px);
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fk-text);
  background: var(--fk-panel);
  border: 1.5px solid var(--fk-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  box-sizing: border-box;
  gap: 6px;
}

.ob-cs-trigger:hover:not(:disabled) { border-color: var(--fk-accent-border); }

.ob-cs-trigger:focus,
.ob-custom-select.ob-cs--open .ob-cs-trigger {
  outline: none;
  border-color: var(--fk-focus-border);
  box-shadow: 0 0 0 3px var(--fk-focus-ring);
}

.ob-cs-display {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ob-cs-placeholder { color: var(--muted, #667085); opacity: 0.7; }

.ob-cs-caret {
  flex-shrink: 0;
  color: var(--muted, #667085);
  display: flex;
  align-items: center;
  transition: transform 150ms ease;
}

.ob-custom-select.ob-cs--open .ob-cs-caret { transform: rotate(180deg); }

.ob-custom-select[data-disabled] .ob-cs-trigger {
  background: var(--panel-2, #F9FAFB);
  color: var(--muted, #667085);
  cursor: not-allowed;
  opacity: 0.6;
}

.ob-cs-panel.ob-dropdown-panel {
  position: fixed;
  overflow-y: auto;
  max-height: 260px;
  padding: 4px;
}

/* Options render on ONE line so the (content-sized) menu measures its true width
   instead of wrapping a long label like "Debora Griffin — (469) 365-0685". */
.ob-cs-option { white-space: nowrap; }
.ob-cs-option.ob-cs-option--focused { background: var(--fk-hover); }

/* ═══ Buttons (scoped to .fk so they don't leak onto host buttons) ═════ */
.fk .btn {
  appearance: none;
  border-radius: 9px;
  padding: 10px 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--fk-text);
  background: var(--fk-button-bg);
  border: 1px solid var(--fk-border);
  font-family: inherit;
  font-size: 14px;
}

.fk .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fk .btn:hover {
  background: var(--fk-button-hover);
}

.fk .btn.primary {
  background: linear-gradient(180deg, #2a69ff, #1d4ed8);
  border: 1px solid #315ef0;
  color: #ffffff;
}

.fk .btn.primary:hover {
  filter: brightness(1.05);
}

/* ═══ Radio cards (generic kit names; neutral selection) ═══════════════
   Copied from onboarding's payroll radio card (its rule lives in
   onboarding.css) and renamed to .fk-radio-card; green selection swapped
   for the neutral accent token. Selection driven CSS-only via :has().
   Hermetic COPY — the internal kit carries NO onboarding (client-facing)
   selector; onboarding keeps its own. */
.fk-radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1.5px solid var(--fk-border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background: var(--fk-panel);
  transition: border-color 0.15s, background 0.15s;
}

.fk-radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fk-radio-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  background: var(--fk-panel);
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fk-radio-card:has(input[type="radio"]:checked) {
  border-color: var(--fk-focus-border);
  background: var(--fk-hover);
}

.fk-radio-card:has(input[type="radio"]:checked) .fk-radio-dot {
  border-color: var(--fk-focus-border);
  background: var(--fk-focus-border);
}

.fk-radio-card:has(input[type="radio"]:checked) .fk-radio-dot::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fk-panel);
}

/* ═══ Checkbox card (generic kit names; neutral) ═══════════════════════
   Copied from onboarding's payroll confirm card (its rule lives in
   onboarding.css) and renamed to .fk-check-card; neutral tint. Hermetic
   COPY — no client-facing selector lives in this internal kit. */
.fk-check-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--fk-panel);
  border: 1.5px solid var(--fk-border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}

.fk-check-card:has(input[type="checkbox"]:checked) {
  background: var(--fk-hover);
  border-color: var(--fk-focus-border);
}

.fk-check-card input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--fk-focus-border);
  cursor: pointer;
}

.fk-check-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fk-check-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fk-text);
}

.fk-check-desc {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.4;
}

/* ---- Plain checkbox & radio primitives ----
   Accessible custom-control pattern: the real <input> stays in the DOM
   (focusable + clickable) but is visually hidden; a styled box/dot renders
   the brand blue + 3px focus ring identically across browsers. All rules
   scoped under .fk so a host page's own checkboxes/radios are never touched.
   Markup contract:
     <label class="fk-checkbox"><input type="checkbox"><span class="fk-checkbox-box"></span><span class="fk-checkbox-label">…</span></label>
     <label class="fk-radio"><input type="radio" name="…"><span class="fk-radio-dot"></span><span class="fk-radio-label">…</span></label>
   (.fk-radio-dot is reused from the radio-card primitive but only restyled
    inside the .fk-radio scope, so .fk-radio-card stays untouched.) */
.fk .fk-checkbox,
.fk .fk-radio {
  position: relative;          /* contains the absolutely-positioned native input */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fk-ctrl-font);
  color: var(--fk-text);
  line-height: 1.3;
}

/* Visually hide the native control but keep it focusable/clickable
   (NOT display:none). Sized + pinned over the visual box. */
.fk .fk-checkbox input[type="checkbox"],
.fk .fk-radio input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

/* Shared visual control surface */
.fk .fk-checkbox-box,
.fk .fk-radio .fk-radio-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: var(--fk-ctrl-border);
  background: var(--fk-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.fk .fk-checkbox-box { border-radius: 5px; }
.fk .fk-radio .fk-radio-dot { border-radius: 50%; }

/* Hover (unchecked) */
.fk .fk-checkbox input[type="checkbox"]:not(:checked):hover + .fk-checkbox-box,
.fk .fk-radio input[type="radio"]:not(:checked):hover + .fk-radio-dot {
  border-color: var(--fk-accent-border);
}

/* Checked — brand-blue fill */
.fk .fk-checkbox input[type="checkbox"]:checked + .fk-checkbox-box,
.fk .fk-radio input[type="radio"]:checked + .fk-radio-dot {
  background: var(--fk-focus-border);
  border-color: var(--fk-focus-border);
}

/* Checkbox white checkmark (SVG on the blue fill) */
.fk .fk-checkbox input[type="checkbox"]:checked + .fk-checkbox-box {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Radio white center dot */
.fk .fk-radio input[type="radio"]:checked + .fk-radio-dot::after {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

/* Focus ring — same 3px ring as the text inputs */
.fk .fk-checkbox input[type="checkbox"]:focus-visible + .fk-checkbox-box,
.fk .fk-radio input[type="radio"]:focus-visible + .fk-radio-dot {
  box-shadow: 0 0 0 3px var(--fk-focus-ring);
}

/* Label text */
.fk .fk-checkbox-label,
.fk .fk-radio-label {
  font-size: var(--fk-ctrl-font);
  color: var(--fk-text);
}

/* Disabled */
.fk .fk-checkbox:has(input:disabled),
.fk .fk-radio:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}
.fk .fk-checkbox input:disabled,
.fk .fk-radio input:disabled { cursor: not-allowed; }

/* ── Month picker (CC-TRACK Barrowgate) — StreamFormKit.wireMonthPicker ─────────
   Value is the string 'YYYY-MM'. The popover portals to <body> (position:fixed)
   so it escapes any ancestor overflow/transform; JS sets top/left + auto-flips. */
.fk-monthpicker { position: relative; }
.fk-mp-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--fk-ctrl-h);
  border: var(--fk-ctrl-border);
  border-radius: var(--fk-ctrl-radius);
  padding: 0 14px;
  font-size: var(--fk-ctrl-font);
  color: var(--fk-text);
  background: var(--fk-panel);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  box-sizing: border-box;
  gap: 8px;
}
.fk-mp-trigger:hover { border-color: var(--fk-accent-border); }
.fk-mp-trigger:focus,
.fk-mp-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--fk-focus-border);
  box-shadow: 0 0 0 3px var(--fk-focus-ring);
}
.fk-mp-display { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fk-text); }
.fk-mp-caret { flex-shrink: 0; color: var(--muted, #667085); }

.fk-mp-pop {
  position: fixed;
  width: 260px;
  background: var(--fk-panel);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-dp-radius);
  box-shadow: var(--fk-shadow-md);
  z-index: 9999;
  padding: 10px;
  box-sizing: border-box;
}
.fk-mp-pop[hidden] { display: none; }
.fk-mp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.fk-mp-year { font-size: 14px; font-weight: 700; color: var(--fk-text); }
.fk-mp-nav {
  border: 1px solid var(--fk-border); background: var(--fk-panel);
  color: var(--fk-text); width: 30px; height: 30px; border-radius: 8px;
  cursor: pointer; font-size: 18px; line-height: 1; font-family: inherit;
}
.fk-mp-nav:hover { background: var(--fk-hover); border-color: var(--fk-accent-border); }
.fk-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fk-mp-month {
  height: 40px; border: 1px solid var(--fk-border); background: var(--fk-panel);
  color: var(--fk-text); border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
}
.fk-mp-month:hover { background: var(--fk-hover); border-color: var(--fk-accent-border); }
.fk-mp-month.is-selected {
  background: var(--fk-focus-border); border-color: var(--fk-focus-border); color: #fff;
}