/* ════════════════════════════════════════════════════════════════════════════
   KISE FORM SYSTEM
   One set of form tokens and component rules for every admin form and modal,
   and for the Specialist Hub page itself (.sp-wrap). Assessment forms
   (.kise-dynamic-form) additionally get the two-column section layout.

   Extends the KISE brand tokens in kise-theme.css (--kise-primary etc.) rather
   than introducing a second palette; the accent is KISE green and is the only
   thing to change to re-brand. Nothing outside these scopes is affected.

   Principles: a visible label on every field, one control height, one radius,
   one focus ring, errors that never rely on colour alone, WCAG 2.2 AA.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    --kf-accent: var(--kise-primary, #29972e);
    --kf-accent-strong: #237a28;
    --kf-accent-tint: rgba(41, 151, 46, 0.08);
    --kf-accent-ring: rgba(41, 151, 46, 0.35);

    --kf-surface: #ffffff;
    --kf-surface-sunken: #f9fafb;
    --kf-text: #111827;
    --kf-label: #374151;
    --kf-help: #6b7280;
    --kf-placeholder: #9ca3af;
    --kf-border: #d1d5db;
    --kf-border-hover: #9ca3af;
    --kf-divider: #e5e7eb;
    --kf-disabled-bg: #f9fafb;
    --kf-disabled-text: #9ca3af;

    --kf-error: #dc2626;
    --kf-error-ring: rgba(220, 38, 38, 0.3);
    --kf-success: #059669;
    --kf-success-ring: rgba(5, 150, 105, 0.3);

    --kf-radius: 0.5rem;       /* rounded-lg: controls  */
    --kf-radius-card: 0.75rem; /* rounded-xl: sections  */
    --kf-height: 2.5rem;       /* h-10 */
    --kf-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
    --kf-ease: 150ms ease-out;
}

html.dark,
html[data-kise-theme="dark-command"] {
    --kf-accent-tint: rgba(41, 151, 46, 0.16);
    --kf-accent-ring: rgba(74, 190, 80, 0.45);
    --kf-surface: #111827;
    --kf-surface-sunken: #0b1220;
    --kf-text: #f3f4f6;
    --kf-label: #d1d5db;
    --kf-help: #9ca3af;
    --kf-placeholder: #6b7280;
    --kf-border: #374151;
    --kf-border-hover: #4b5563;
    --kf-divider: #1f2937;
    --kf-disabled-bg: #0f172a;
    --kf-disabled-text: #6b7280;
    --kf-error: #f87171;
    --kf-error-ring: rgba(248, 113, 113, 0.35);
    --kf-success: #34d399;
}

/* The three places the system applies. */
/* ── Labels, helper text, errors ─────────────────────────────────────────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-label {
    margin-bottom: 0.375rem; /* mb-1.5 */
}

:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-label > span,
:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--kf-label);
}

/* Required: a quiet asterisk — and the word "required" for assistive tech, so
   it is not conveyed by the glyph or colour alone. */
:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-label sup {
    color: var(--kf-error);
    font-weight: 600;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-helper-text {
    margin-top: 0.375rem; /* mt-1.5 */
    font-size: 0.75rem;
    line-height: 1.1rem;
    color: var(--kf-help);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-error-message,
.kf-error {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    line-height: 1.1rem;
    font-weight: 500;
    color: var(--kf-error);
}

/* An icon so an error is never colour alone. */
:is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) .fi-fo-field-wrp-error-message::before,
.kf-error::before {
    content: "";
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.125rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z' clip-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Text input, select, textarea: one height, one radius, one ring ─────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp {
    min-height: var(--kf-height);
    border-radius: var(--kf-radius);
    background: var(--kf-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 0 0 1px var(--kf-border) !important;
    transition: box-shadow var(--kf-ease), background-color var(--kf-ease);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp:hover {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 0 0 1px var(--kf-border-hover) !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 1px var(--kf-accent), 0 0 0 4px var(--kf-accent-ring) !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input {
    min-height: calc(var(--kf-height) - 2px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--kf-text);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input::placeholder {
    color: var(--kf-placeholder);
}

/* Textarea: at least four rows, resize vertically only. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-textarea textarea,
:is(.fi-main, .fi-modal-window, .kise-hub-form) textarea.fi-input {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.5rem;
    padding: 0.625rem 0.75rem;
}

/* Disabled / read-only reads as inert, not as an empty field. Only a control that is itself disabled or read-only
   counts: `:read-only` also matches every button, hidden input, checkbox and the search box a searchable select
   draws, so a wrapper holding any of those (a select, a date picker, a password reveal) looked disabled although
   the field was fully editable. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp:has(
    input:is(:disabled, [readonly]):not([type="hidden"], [type="checkbox"], [type="radio"], [type="search"], .choices__input),
    textarea:is(:disabled, [readonly]),
    select:disabled,
    .choices.is-disabled
) {
    background: var(--kf-disabled-bg);
    cursor: not-allowed;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input:disabled {
    color: var(--kf-disabled-text);
    cursor: not-allowed;
}

/* Error: red ring *and* the message below carries an icon. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp[class*="ring-danger"],
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp:has([aria-invalid="true"]) {
    box-shadow: 0 0 0 1px var(--kf-error) !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp[class*="ring-danger"]:focus-within,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp:has([aria-invalid="true"]):focus-within {
    box-shadow: 0 0 0 1px var(--kf-error), 0 0 0 4px var(--kf-error-ring) !important;
}

/* Add-ons (prefix / suffix / icons) sit inside the same border. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp .fi-input-wrp-prefix,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-input-wrp .fi-input-wrp-suffix {
    background: var(--kf-surface-sunken);
    color: var(--kf-help);
    font-size: 0.875rem;
}

/* ── Checkbox and radio controls ─────────────────────────────────────────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-checkbox-input,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-radio-input {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: box-shadow var(--kf-ease), background-color var(--kf-ease);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-checkbox-input:focus-visible,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-radio-input:focus-visible {
    outline: 2px solid var(--kf-accent);
    outline-offset: 2px;
}

/* ── Option groups: card-style selectable radios and checkboxes ───────────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex),
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: 0.5rem;
    margin-top: 0 !important;
    columns: auto;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex) > div,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list > div > div {
    padding-top: 0 !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex) label,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list label {
    height: 100%;
    align-items: flex-start;
    padding: 0.625rem 0.75rem;
    border-radius: var(--kf-radius);
    background: var(--kf-surface);
    box-shadow: 0 0 0 1px var(--kf-border);
    cursor: pointer;
    transition: box-shadow var(--kf-ease), background-color var(--kf-ease);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex) label:hover,
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list label:hover {
    box-shadow: 0 0 0 1px var(--kf-border-hover);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex) label:has(input:checked),
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list label:has(input:checked) {
    background: var(--kf-accent-tint);
    box-shadow: 0 0 0 1px var(--kf-accent), 0 0 0 3px var(--kf-accent-ring);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex) label:has(input:focus-visible),
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list label:has(input:focus-visible) {
    outline: 2px solid var(--kf-accent);
    outline-offset: 2px;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex) label:has(input:disabled),
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-checkbox-list label:has(input:disabled) {
    background: var(--kf-disabled-bg);
    cursor: not-allowed;
    opacity: 0.7;
}

/* ── Segmented control: an inline radio group (a 0–10 scale, Yes/No) ─────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0 !important;
    margin-top: 0 !important;
    border-radius: var(--kf-radius);
    box-shadow: 0 0 0 1px var(--kf-border);
    background: var(--kf-surface);
    overflow: hidden;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex > div {
    padding-top: 0 !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex label {
    min-height: calc(var(--kf-height) - 2px);
    align-items: center;
    padding: 0 1rem;
    cursor: pointer;
    border-inline-start: 1px solid var(--kf-divider);
    transition: background-color var(--kf-ease), color var(--kf-ease);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex > div:first-child label {
    border-inline-start: 0;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex label:hover {
    background: var(--kf-surface-sunken);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex label:has(input:checked) {
    background: var(--kf-accent);
    color: #fff;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex label:has(input:checked) span {
    color: #fff;
}

/* The native dot is redundant when the whole segment shows the choice. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex .fi-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex label {
    position: relative;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio.flex label:has(input:focus-visible) {
    outline: 2px solid var(--kf-accent);
    outline-offset: -2px;
}

/* ── Toggle / switch ─────────────────────────────────────────────────────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-toggle {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    transition: background-color var(--kf-ease), box-shadow var(--kf-ease);
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-toggle[aria-checked="true"] {
    background-color: var(--kf-accent) !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-toggle[aria-checked="false"] {
    background-color: var(--kf-border) !important;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-toggle:focus-visible {
    outline: 2px solid var(--kf-accent);
    outline-offset: 2px;
}

/* ── Sections: title and description left, fields right ──────────────────── */
.kise-dynamic-form.fi-section {
    border-radius: var(--kf-radius-card);
    background: var(--kf-surface);
    box-shadow: var(--kf-shadow-card), 0 0 0 1px var(--kf-divider) !important;
    border: 0 !important;
}

.kise-dynamic-form.fi-section .fi-section-content {
    padding: 1.5rem;
}

.kise-dynamic-form.fi-section .fi-section-content > .grid,
.kise-dynamic-form.fi-section .fi-fo-component-ctn {
    column-gap: 1.5rem;
    row-gap: 1.25rem;
}

@media (min-width: 1024px) {
    .kise-dynamic-form.fi-section:not(.kise-client-info-section) {
        display: grid;
        grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr);
    }

    .kise-dynamic-form.fi-section:not(.kise-client-info-section) > .fi-section-header {
        align-items: flex-start;
        align-self: stretch;
        border-bottom: 0;
        border-right: 1px solid var(--kf-divider);
        padding: 1.5rem;
    }

    .kise-dynamic-form.fi-section:not(.kise-client-info-section) > .fi-section-header .fi-section-header-heading {
        font-size: 0.9375rem;
        line-height: 1.4rem;
    }
}

/* ── Action bar: Cancel, then the primary action, kept in view ───────────── */
.fi-resource-create-record-page .fi-form-actions,
.fi-resource-edit-record-page .fi-form-actions,
.fi-resource-dynamic-assessments .fi-form-actions {
    position: sticky;
    bottom: 0;
    /* Below the open dropdowns/pickers (see the rule after this block): at 20 the bar painted over the bottom of
       every select list and date picker that opened near it. */
    z-index: 1;
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--kf-divider);
    border-radius: var(--kf-radius-card) var(--kf-radius-card) 0 0;
    background: color-mix(in srgb, var(--kf-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* An opened select list, picker or tooltip belongs above the sticky action bar and the cards around it, never
   behind them — on every form, in a page or a pop-up. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) :is(.fi-dropdown-panel, .fi-fo-date-time-picker-panel, .choices__list--dropdown, .fi-fo-select-panel) {
    z-index: 40;
}

/* The field whose list is open sits above the fields and sections after it, so its list is not painted under them. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-field-wrp:has(.choices.is-open, .fi-dropdown-panel:not([style*="display: none"]), .fi-fo-date-time-picker-panel:not([style*="display: none"])) {
    position: relative;
    z-index: 30;
}

/* Cards that clip their content (overflow: hidden, to keep rounded corners clean) cut off any option list that
   opens past their bottom edge, so it looked hidden behind the next card. A card holding form fields does not clip;
   its first and last children take the rounded corners instead. */
:is(.kise-dynamic-form.fi-section, .sp-card, .sp-form-card, .sp-mdt-shell, .sp-ref-card, .sp-side):has(.fi-fo-field-wrp) {
    overflow: visible;
}

:is(.kise-dynamic-form.fi-section, .sp-card, .sp-form-card, .sp-mdt-shell, .sp-ref-card, .sp-side):has(.fi-fo-field-wrp) > :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

:is(.kise-dynamic-form.fi-section, .sp-card, .sp-form-card, .sp-mdt-shell, .sp-ref-card, .sp-side):has(.fi-fo-field-wrp) > :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Visual order only: Cancel, then the primary action on the right. */
.fi-resource-create-record-page .fi-form-actions .fi-ac,
.fi-resource-edit-record-page .fi-form-actions .fi-ac,
.fi-resource-dynamic-assessments .fi-form-actions .fi-ac {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.fi-form-actions .fi-btn,
:is(.fi-modal-window, .kise-hub-form, .sp-wrap) .fi-btn {
    min-height: var(--kf-height);
    border-radius: var(--kf-radius);
    font-weight: 500;
    transition: background-color var(--kf-ease), box-shadow var(--kf-ease);
}

.fi-form-actions .fi-btn:focus-visible,
:is(.fi-modal-window, .kise-hub-form, .sp-wrap) .fi-btn:focus-visible {
    outline: 2px solid var(--kf-accent);
    outline-offset: 2px;
}

/* ── Modals and slide-overs raised from the hub ──────────────────────────── */
.fi-modal-window {
    border-radius: var(--kf-radius-card);
}

.fi-modal-window .fi-modal-footer-actions,
.fi-modal-window .fi-modal-footer .fi-ac {
    justify-content: flex-end;
    gap: 0.75rem;
}

/* ── Utility: a section card for hand-built hub markup ───────────────────── */
.kf-card {
    background: var(--kf-surface);
    border-radius: var(--kf-radius-card);
    box-shadow: var(--kf-shadow-card), 0 0 0 1px var(--kf-divider);
    padding: 1.5rem;
}

@media (max-width: 640px) {
    .kise-dynamic-form.fi-section .fi-section-content {
        padding: 1rem;
    }

    .fi-resource-dynamic-assessments .fi-form-actions {
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.fi-main, .fi-modal-window, .kise-hub-form, .sp-wrap) * {
        transition: none !important;
    }
}

/* ── Long scales (0–10 and the like): one segmented strip ─────────────────── */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) {
    /* One strip: every option in a single row, wrapping only on a phone. */
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(3.25rem, 1fr);
    gap: 0;
    border-radius: var(--kf-radius);
    box-shadow: 0 0 0 1px var(--kf-border);
    background: var(--kf-surface);
    overflow: hidden;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) label {
    position: relative;
    justify-content: center;
    align-items: center;
    min-height: calc(var(--kf-height) + 0.25rem);
    padding: 0.375rem 0.5rem;
    border-radius: 0;
    box-shadow: inset 1px 0 0 var(--kf-divider), inset 0 1px 0 var(--kf-divider);
    text-align: center;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) label > div {
    justify-items: center;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) label:has(input:checked) {
    background: var(--kf-accent);
    box-shadow: inset 1px 0 0 var(--kf-divider), inset 0 1px 0 var(--kf-divider);
    color: #fff;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) label:has(input:checked) span {
    color: #fff;
}

@media (max-width: 640px) {
    :is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
        grid-auto-columns: auto;
    }
}

/* The native dot is redundant when the whole cell shows the choice. */
:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) .fi-radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

:is(.fi-main, .fi-modal-window, .kise-hub-form) .fi-fo-radio:not(.flex):has(> div:nth-child(8)) label:has(input:focus-visible) {
    outline: 2px solid var(--kf-accent);
    outline-offset: -2px;
}

/* ── Secondary (grey) buttons: legible in both themes ────────────────────── */
.fi-form-actions .fi-btn-color-gray,
:is(.fi-modal-window, .kise-hub-form, .sp-wrap) .fi-btn-color-gray {
    background: var(--kf-surface) !important;
    color: var(--kf-label) !important;
    box-shadow: 0 0 0 1px var(--kf-border) !important;
}

.fi-form-actions .fi-btn-color-gray:hover,
:is(.fi-modal-window, .kise-hub-form, .sp-wrap) .fi-btn-color-gray:hover {
    background: var(--kf-surface-sunken) !important;
    box-shadow: 0 0 0 1px var(--kf-border-hover) !important;
}

/* ── Vital-sign status dot (triage form): in range, outside it, critical (blinks) ─────────── */
.kise-vdot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.5rem;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}

.kise-vdot-normal { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18); }
.kise-vdot-warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22); }
.kise-vdot-critical {
    background: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
    animation: kise-vdot-blink 0.9s ease-in-out infinite;
}

@keyframes kise-vdot-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35), 0 0 10px rgba(220, 38, 38, 0.7); }
    50% { opacity: 0.25; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
    .kise-vdot-critical { animation: none; }
}