/* forms.css: kit lane K1. Colours come from tokens only (light and dark). */
.field.fw-sm { max-width: 8rem; } .field.fw-md { max-width: 16rem; } .field.fw-lg { max-width: 28rem; }
.field input[readonly] { background: var(--surface-2); }
.input-wrap { display: flex; align-items: stretch; gap: 0; }
.input-wrap > input { flex: 1 1 auto; min-width: 0; }
.input-affix { display: inline-flex; align-items: center; padding: 0 0.7rem; background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--border-control); }
.input-wrap > .input-affix:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-wrap > input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-wrap > .input-affix:last-of-type:not(:first-child) { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-wrap > .icon-btn { margin-left: var(--space-2); }

/* Picker */
.picker-box { position: relative; }
.picker-box > input[type="text"] { width: 100%; min-height: 2.5rem; padding: 0.45rem 0.7rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); }
.picker.has-error .picker-box > input[type="text"] { border-color: var(--danger); }
.picker-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: var(--space-1); list-style: none; max-height: 16rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.picker-list:empty, .picker-box > input[aria-expanded="false"] ~ .picker-list { display: none; }
.picker-opt, .picker-empty { display: flex; justify-content: space-between; gap: var(--space-3); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); }
.picker-empty { cursor: default; }
.picker-opt:hover, .picker-opt[aria-selected="true"] { background: var(--accent-wash); }
.picker-opt[aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Check group */
.checkgroup, .daterange, .repeater, .form-section { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
.checkgroup > legend, .daterange > legend, .repeater > legend, .form-section > legend { font-weight: 600; color: var(--ink); padding: 0; margin-bottom: var(--space-2); }
.check-cols { display: grid; gap: var(--space-2) var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .check-cols.cols-2, .check-cols.cols-3, .check-cols.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .check-cols.cols-3 { grid-template-columns: repeat(3, 1fr); } .check-cols.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.check-item { display: grid; gap: var(--space-1); align-content: start; }
.check-extra .field { margin-bottom: 0; }
.check-pair { display: inline-flex; gap: var(--space-4); }
.check-pair-label { color: var(--ink); font-weight: 500; }

.daterange { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.daterange > legend { flex: 0 0 100%; }
.daterange .field { margin-bottom: 0; }

/* Upload */
.upload input[type="file"] { padding: 0.4rem; min-height: 2.5rem; width: 100%; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }
.upload-preview { max-width: 12rem; max-height: 12rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
dproph-camera { display: block; }

/* Repeater and grid */
.repeater-item { display: grid; gap: var(--space-2); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.repeater-item .field { margin-bottom: 0; }
.repeater-item > .btn { justify-self: start; }
.repeater-add { margin-top: var(--space-2); }
.grid-table input { width: 100%; min-width: 6rem; min-height: 2.25rem; padding: 0.3rem 0.5rem; background: var(--surface); color: var(--ink); border: 1px solid var(--border-control); border-radius: var(--radius-sm); }
.grid-table input[readonly] { background: var(--surface-2); }
.grid-table input[inputmode="decimal"], .grid-table input[inputmode="numeric"] { text-align: right; font-variant-numeric: tabular-nums; }
.grid-table tfoot td { font-weight: 600; color: var(--ink); border-top: 2px solid var(--border-strong); }

/* Steps */
.steps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.step a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-weight: 600; }
.step-dot { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); }
.step-dot .icon { width: 0.875rem; height: 0.875rem; }
.step-done a { color: var(--ok-ink); } .step-done .step-dot { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-ink); }
.step-current a { color: var(--accent); } .step-current .step-dot { border-color: var(--accent); background: var(--accent-wash); }

/* Form page */
.form-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .form-layout:has(.form-aside:not(:empty)) { grid-template-columns: minmax(0, 1fr) 18rem; } }
.form-aside:empty { display: none; }
.form-main { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); }
.form-section { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.form-note { margin-bottom: var(--space-4); }
.form-errors { margin-bottom: var(--space-4); }
.form-errors ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; }
.form-errors a { color: inherit; text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
@media (max-width: 479px) { .form-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* R6 (SRR-05): wrappers the kit templates emit. */
.grid-edit { min-width: 0; }
.steps-nav { overflow-x: auto; }
.step-todo a { color: var(--ink-muted); }
.check-cols.cols-1 { grid-template-columns: 1fr; }