/* ============================================================================
 * The form layer for the signed-in app (workbench 12/20; founder rulings
 * 2026-10-25). Labels, fields and buttons, on design-system tokens only — the
 * look (Kuickr, Nodepad) decides colours and corners, nothing else does.
 *
 *  - Buttons: one .kk-btn, 12px text (--kk-fs-meta), small corners (--kk-r-sm),
 *    --kk-s-6 tall; -sm is the dense variant one --kk-s-1 shorter.
 *  - Fields: a low-specificity default (:where) so a field that is meant to be
 *    big (the compose title, a board editor) keeps its own size.
 *  - No 44px inflation (2026-10-24). The 16px field floor for touch devices is
 *    design_systems/input_floor.css, the only place a field size is raised.
 * Loaded after kk-shell.css; form_controls_contract_test keeps it token-only.
 * ========================================================================== */

/* ── labels ──────────────────────────────────────────────────────────────── */
.kk-label,
.kkapp :where(label:has(> select, > textarea, > input:not([type="checkbox"], [type="radio"]))) {
  display: grid; gap: var(--kk-s-1); min-width: 0;
  color: var(--kk-text-soft); font: 600 var(--kk-fs-meta) / var(--kk-lh-meta) var(--kk-font-ui);
}

/* ── fields: the default every signed-in input, select and textarea starts from ── */
.kkapp :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"],
  [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select, textarea, .kk-input) {
  box-sizing: border-box; min-width: 0; min-height: var(--kk-s-6); padding: 0 var(--kk-s-3);
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-sm); background: var(--kk-card); color: var(--kk-ink);
  font: 400 var(--kk-fs-body) / var(--kk-lh-body) var(--kk-font-ui);
}
.kkapp :where(textarea) { padding: var(--kk-s-2) var(--kk-s-3); }
.kkapp :where(select) { padding-right: var(--kk-s-6); }
.kkapp :where(input, select, textarea)::placeholder { color: var(--kk-text-soft); }
.kkapp :where(input, select, textarea):focus-visible { outline: 2px solid var(--kk-ink); outline-offset: 1px; }
.kkapp :where(input, select, textarea):disabled { background: var(--kk-fill-soft); color: var(--kk-text-soft); cursor: not-allowed; }
.kkapp :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--kk-danger); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.kk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--kk-s-2); flex-shrink: 0;
  min-height: var(--kk-s-6); padding: 0 var(--kk-s-3);
  border: 1px solid transparent; border-radius: var(--kk-r-sm);
  background: var(--kk-fill); color: var(--kk-ink); cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 600 var(--kk-fs-meta) / 1 var(--kk-font-ui);
}
.kk-btn .ic, .kk-btn svg { width: var(--kk-s-4); height: var(--kk-s-4); }
.kk-btn:hover { background: var(--kk-fill-soft); }
.kk-btn:focus-visible { outline: 2px solid var(--kk-ink); outline-offset: 2px; }
.kk-btn:disabled, .kk-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kk-btn-primary, .kkapp .kk-btn-primary { background: var(--kk-primary); color: var(--kk-on-primary); }
.kk-btn-primary:hover, .kkapp .kk-btn-primary:hover { background: var(--kk-primary); filter: brightness(1.12); }
.kk-btn-ghost { background: var(--kk-card); border-color: var(--kk-border); color: var(--kk-ink); }
.kk-btn-ghost:hover { background: var(--kk-card); border-color: var(--kk-secondary); }
.kk-btn-outline { background: transparent; border-color: var(--kk-border); color: var(--kk-ink); }
.kk-btn-outline:hover { background: var(--kk-fill-soft); }
.kk-btn-danger { background: var(--kk-danger); color: var(--kk-on-primary); }
.kk-btn-sm { min-height: calc(var(--kk-s-6) - var(--kk-s-1)); padding: 0 var(--kk-s-2); gap: var(--kk-s-1); }