/* ============================================================================
   kd-forms.css · Forms + tables
   ----------------------------------------------------------------------------
   Form controls (input / select / textarea / checkbox) and the table
   primitive. Extracted from kd-components.css so each base file stays under
   the 300-line ceiling.
   ============================================================================ */

/* ============================== FORMS ==================================== */
.kd-field { display: flex; flex-direction: column; gap: 6px; }
.kd-label {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    font-weight: var(--kd-w-semi);
    text-transform: uppercase;
    letter-spacing: var(--kd-track-mono);
    color: var(--kd-fg-soft);
}
.kd-input, .kd-select, .kd-textarea {
    width: 100%;
    font: inherit;
    font-size: var(--kd-text-3);
    color: var(--kd-fg);
    background: var(--kd-bg);
    border: var(--kd-border-w) solid var(--kd-border-strong);
    border-radius: var(--kd-radius);
    padding: 10px 12px;
    transition: border-color var(--kd-dur) var(--kd-ease), box-shadow var(--kd-dur) var(--kd-ease);
}
.kd-input:hover, .kd-select:hover, .kd-textarea:hover { border-color: var(--kd-fg-muted); }
.kd-input:focus, .kd-select:focus, .kd-textarea:focus {
    outline: none;
    border-color: var(--kd-accent);
    box-shadow: 0 0 0 3px var(--kd-accent-ring);
}
.kd-textarea { min-height: 140px; resize: vertical; }

.kd-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.kd-check { display: inline-flex; align-items: center; gap: var(--kd-s-2); cursor: pointer; }
/* Keep the native checkbox/radio rendering — just tint it with the theme
   foreground so the tick colour matches the design without overriding the
   familiar OS shape. */
.kd-check input,
.kd-pn-facet__list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--kd-fg);
}

/* ============================== TABLES =================================== */
.kd-table-wrap {
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    overflow: hidden;
    background: var(--kd-bg);
}
.kd-table { width: 100%; border-collapse: collapse; font-size: var(--kd-text-2); }
.kd-table thead th {
    text-align: left;
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    font-weight: var(--kd-w-semi);
    text-transform: uppercase;
    letter-spacing: var(--kd-track-mono);
    color: var(--kd-fg-muted);
    background: var(--kd-bg-alt);
    padding: 12px 16px;
    border-bottom: var(--kd-border-w) solid var(--kd-border);
}
.kd-table tbody td {
    padding: 14px 16px;
    border-bottom: var(--kd-border-w) solid var(--kd-border);
    color: var(--kd-fg);
    vertical-align: top;
}
.kd-table tbody tr:last-child td { border-bottom: 0; }
.kd-table tbody tr:hover td { background: var(--kd-bg-alt); }
.kd-table td.kd-td--mono { font-family: var(--kd-font-mono); color: var(--kd-fg-muted); letter-spacing: var(--kd-track-loose); }
.kd-table td.kd-td--num  { font-variant-numeric: tabular-nums; text-align: right; }