/* Share the homepage's restrained selection treatment across navigation and controls.
   Primary actions, checked inputs, status colours and keyboard focus stay distinct. */
:is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .kp-console {
  --kp-selection-surface: var(--kp-accent-surface);
  --kp-selection-border: var(--kp-accent-ring);
}
:is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) :is(.kp-console__nav-item--active, .models__chip--active,
  .models__view-btn--active, .compare__pick--active,
  .kp-select__option.is-selected, .model-picker__option.is-selected,
  .finance-date-field__days button.is-selected) {
  background: var(--kp-accent-surface);
  color: var(--kp-accent);
}
/* Information rows must not turn into a heavy selected surface under a pointer. */
:is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .kp-table tbody tr:hover td {
  background: var(--kp-table-row-bg);
}
:is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .models__card:hover {
  background: var(--kp-surface-card);
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  :is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .kp-table tbody tr:hover td {
    background: color-mix(in srgb, var(--kp-status-ok) 3%, var(--kp-table-row-bg));
  }
  :is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .models__card:hover {
    background: color-mix(in srgb, var(--kp-status-ok) 3%, var(--kp-surface-card));
  }
}
/* Responsive table cards keep one continuous surface after a touch. */
@media (max-width: 760px) {
  :is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .kp-table:has(.pricing__model) tbody tr:hover td,
  :is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .tasks .kp-table tbody tr:hover td {
    background: transparent;
  }
}
/* Keep calendar selection light and its narrow-screen panel inside the viewport. */
:is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .finance-date-field__trigger:focus-visible,
:is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .finance-date-field__trigger[aria-expanded='true'] {
  box-shadow: 0 0 0 1px var(--kp-accent-ring);
}
@media (max-width: 600px) {
  :is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .finance-date-field__popover,
  :is(#app, .workspace-dialog, .kp-modal-overlay, .kp-select__panel) .finance-date-field--right .finance-date-field__popover {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(286px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    z-index: 1000;
  }
}

:is(.workspace-dialog, .kp-modal-overlay, .kp-select__panel) {
  --kp-selection-surface: var(--kp-accent-surface);
  --kp-selection-border: var(--kp-accent-ring);
}
/* A calendar inside a scrollable modal body must escape that body's clipping. */
:is(#app .workspace-dialog, .workspace-dialog, .kp-modal-overlay) .finance-date-field__popover,
:is(#app .workspace-dialog, .workspace-dialog, .kp-modal-overlay) .finance-date-field--right .finance-date-field__popover {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(286px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  z-index: 1000;
}