@attrus-ds/core 0.1.0

package/dist/css/components/inputs.css

@@ -0,0 +1,1027 @@
+/* ============================================================
+   INPUTS & FORM CONTROLS — ATTRUS Design System
+   Component CSS — pure tokens, no hardcoded values.
+
+   Anatomy (vertical stack):
+     [label]                   .field > label
+     [field row]               .field > .input | .group | .affix
+     [helper / error]          .field > .help
+
+   Field variants:
+     .input                    base text input (size: md = 40px)
+     .input.is-error           danger border + danger focus ring
+     .input.is-success         success border + success focus ring
+     .input[disabled]          opacity .5 + bg-subtle
+     .input.is-readonly        no border, only value text
+
+   Sizes (apply to .input or wrapper):
+     .input-sm  (32h, fs-sm)
+     default    (40h, fs-md)
+     .input-lg  (48h, fs-lg)
+
+   Wrappers (compose with .input):
+     .affix .lead | .trail     leading / trailing icon
+     .group   .fix.l | .fix.r  prefix / suffix attached
+     .pill-search              ⌘K-style search bar
+     .underline                ghost / quiet input
+     .chips                    multi-select with embedded text input
+     .otp                      one-time-password digit cells
+
+   Other controls (siblings, not .input):
+     .select                   wrapper around <select>
+     .switch                   toggle
+     .check                    custom checkbox
+     .radio                    custom radio
+     .number-input                  number input with +/- buttons
+     .file-drop                dropzone
+     .slider                   range with track + thumb
+     .date-trigger             trigger button for date/time picker
+
+   Inverse:
+     .input.on-inverse         dark-aware text input
+     surfaces with .dark inherit white-on-dark text
+   ============================================================ */
+
+
+/* ----------------------------------------------------------------
+   1. FIELD WRAPPER
+   ---------------------------------------------------------------- */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-width: 0;
+}
+.field > label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-default);
+  letter-spacing: var(--ls-body);
+}
+.field > label .req {
+  color: var(--color-feedback-danger-foreground-muted);
+  margin-left: 2px;
+}
+.field > label .opt {
+  color: var(--color-foreground-muted);
+  font-weight: var(--w-regular);
+  margin-left: var(--space-2);
+  font-size: var(--fs-xs);
+}
+.field > .help {
+  font-size: var(--fs-xs);
+  color: var(--color-foreground-muted);
+  display: flex;
+  gap: var(--space-2);
+  align-items: flex-start;
+  line-height: var(--lh-snug, 1.4);
+}
+.field > .help i, .field > .help svg,
+.field > .help svg {
+  width: var(--icon-xs);
+  height: var(--icon-xs);
+  stroke-width: var(--icon-stroke);
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+.field > .help.is-error    { color: var(--color-feedback-danger-foreground); }
+.field > .help.is-error i, .field > .help.is-error svg  { color: var(--color-feedback-danger-foreground-muted); }
+.field > .help.is-success  { color: var(--color-feedback-success-foreground); }
+.field > .help.is-success i, .field > .help.is-success svg{ color: var(--color-feedback-success-foreground-muted); }
+.field > .help.is-warning  { color: var(--color-feedback-warning-foreground); }
+.field > .help.is-warning i, .field > .help.is-warning svg{ color: var(--color-feedback-warning-foreground-muted); }
+
+
+/* ----------------------------------------------------------------
+   2. BASE INPUT
+   ---------------------------------------------------------------- */
+.input {
+  /* Box — default size = md (40px tall) */
+  width: 100%;
+  box-sizing: border-box;
+  height: 40px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-background-surface);
+  color: var(--color-foreground-default);
+
+  /* Type */
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+  font-weight: var(--w-regular);
+  line-height: 1;
+  letter-spacing: var(--ls-body);
+
+  /* Behavior */
+  outline: none;
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+.input::placeholder { color: var(--color-foreground-placeholder); }
+
+.input:hover:not(:focus):not([disabled]):not(.is-error):not(.is-success) {
+  border-color: var(--color-border-strong);
+}
+.input:focus,
+.input:focus-visible {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+.input[disabled],
+.input.is-disabled {
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-placeholder);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.input[readonly],
+.input.is-readonly {
+  background: transparent;
+  border-color: transparent;
+  padding-left: 0;
+  padding-right: 0;
+  cursor: default;
+}
+
+/* Validation states */
+.input.is-error          { border-color: var(--color-border-danger); }
+.input.is-error:focus    { box-shadow: var(--shadow-focus-danger); }
+.input.is-success        { border-color: var(--color-border-success); }
+.input.is-success:focus  { box-shadow: var(--shadow-focus-success); }
+.input.is-warning        { border-color: var(--color-border-warning); }
+.input.is-warning:focus  { box-shadow: var(--shadow-focus-warning); }
+
+/* Textarea */
+textarea.input {
+  height: auto;
+  min-height: 88px;
+  padding: var(--space-3) var(--space-4);
+  resize: vertical;
+  line-height: var(--lh-normal, 1.5);
+}
+
+
+/* ----------------------------------------------------------------
+   3. SIZES
+   ---------------------------------------------------------------- */
+.input-sm {
+  height: 32px;
+  padding: 0 var(--space-3);
+  font-size: var(--fs-sm);
+  border-radius: var(--radius-xs);
+}
+.input-lg {
+  height: 48px;
+  padding: 0 var(--space-5);
+  font-size: var(--fs-lg);
+  border-radius: var(--radius-md);
+}
+textarea.input.input-sm { height: auto; min-height: 64px; padding: var(--space-2) var(--space-3); }
+textarea.input.input-lg { height: auto; min-height: 120px; padding: var(--space-4) var(--space-5); }
+
+
+/* ----------------------------------------------------------------
+   4. AFFIX — leading / trailing icon
+   ---------------------------------------------------------------- */
+.affix { position: relative; display: block; }
+.affix .lead,
+.affix .trail {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.affix .lead  { left:  var(--space-4); }
+.affix .trail { right: var(--space-4); }
+
+/* Pad the input to make room for the icon */
+.affix.lead-pad  > .input { padding-left:  calc(var(--space-4) + var(--icon-sm) + var(--space-3)); }
+.affix.trail-pad > .input { padding-right: calc(var(--space-4) + var(--icon-sm) + var(--space-3)); }
+
+/* Trailing button (e.g. password reveal, clear) — clickable */
+.affix .trail-btn {
+  position: absolute;
+  top: 50%;
+  right: var(--space-2);
+  transform: translateY(-50%);
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: transparent;
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.affix .trail-btn:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.affix .trail-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+.affix .trail-btn > i, .affix .trail-btn > svg,
+.affix .trail-btn > svg { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke); }
+
+
+/* ----------------------------------------------------------------
+   5. PREFIX / SUFFIX GROUP
+   ---------------------------------------------------------------- */
+.group {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-background-surface);
+  overflow: hidden;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+.group:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+.group .fix {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-4);
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-muted);
+  font-family: var(--font-mono);
+  font-size: var(--fs-sm);
+  flex-shrink: 0;
+}
+.group .fix.l { border-right: 1px solid var(--color-border-default); }
+.group .fix.r { border-left:  1px solid var(--color-border-default); }
+.group > input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  padding: 0 var(--space-4);
+  background: transparent;
+  color: var(--color-foreground-default);
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+}
+.group > input::placeholder { color: var(--color-foreground-placeholder); }
+.group.is-error          { border-color: var(--color-border-danger); }
+.group.is-error:focus-within { box-shadow: var(--shadow-focus-danger); }
+
+
+/* ----------------------------------------------------------------
+   6. PILL SEARCH (⌘K-style)
+   ---------------------------------------------------------------- */
+.pill-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  height: 40px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-pill);
+  background: var(--color-background-surface);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background var(--transition-fast);
+}
+.pill-search:hover { border-color: var(--color-border-strong); }
+.pill-search:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+.pill-search > i, .pill-search > svg,
+.pill-search > svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+  flex-shrink: 0;
+}
+.pill-search > input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+  color: var(--color-foreground-default);
+}
+.pill-search > input::placeholder { color: var(--color-foreground-placeholder); }
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-muted);
+  background: var(--color-background-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-2xs);
+  padding: 1px var(--space-2);
+  letter-spacing: var(--ls-caps);
+}
+
+
+/* ----------------------------------------------------------------
+   7. UNDERLINE — quiet / ghost input
+   ---------------------------------------------------------------- */
+.input.underline {
+  border: 0;
+  border-bottom: 1px solid var(--color-border-default);
+  border-radius: 0;
+  background: transparent;
+  padding: var(--space-2) 0;
+}
+.input.underline:focus,
+.input.underline:focus-visible {
+  border-bottom-color: var(--color-border-focus);
+  box-shadow: none;
+}
+.input.underline.is-error { border-bottom-color: var(--color-border-danger); }
+
+
+/* ----------------------------------------------------------------
+   8. CHIPS — multi-select / token input
+   ---------------------------------------------------------------- */
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+  min-height: 40px;
+  padding: 5px 8px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-background-surface);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+.chips:hover { border-color: var(--color-border-strong); }
+.chips:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 26px;
+  padding: 0 4px 0 10px;
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-xs);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xs);
+  font-weight: var(--w-medium);
+  line-height: 1;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+.chip:hover { background: var(--color-background-canvas); border-color: var(--color-border-strong); }
+.chip-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-left: 2px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--radius-xs);
+  color: var(--color-foreground-muted);
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.chip-x svg, .chip-x i { width: 11px; height: 11px; stroke-width: 2.25; }
+.chip-x:hover { background: var(--color-border-default); color: var(--color-foreground-default); }
+.chips > input {
+  flex: 1;
+  min-width: 80px;
+  height: 26px;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  padding: 0 6px;
+  color: var(--color-foreground-default);
+}
+.chips > input::placeholder { color: var(--color-foreground-placeholder); }
+
+
+/* ----------------------------------------------------------------
+   9. SELECT (native)
+   ---------------------------------------------------------------- */
+.select {
+  position: relative;
+  display: block;
+}
+.select > select.input {
+  appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  padding-right: calc(var(--space-4) + var(--icon-sm) + var(--space-3));
+  background-image: none;
+}
+.select > .chev {
+  position: absolute;
+  top: 50%;
+  right: var(--space-4);
+  transform: translateY(-50%);
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+  pointer-events: none;
+}
+
+
+/* ----------------------------------------------------------------
+   10. NUMBER INPUT (with +/- buttons)
+   ---------------------------------------------------------------- */
+.number-input {
+  display: inline-flex;
+  align-items: stretch;
+  height: 40px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-background-surface);
+  overflow: hidden;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+.number-input:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+.number-input button {
+  width: 36px;
+  border: 0;
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-default);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+  font-weight: var(--w-semibold);
+  transition: background var(--transition-fast);
+}
+.number-input button:hover { background: var(--color-background-hover); }
+.number-input button:active { background: var(--color-background-press); }
+.number-input button:disabled { opacity: 0.4; cursor: not-allowed; }
+.number-input button.minus { border-right: 1px solid var(--color-border-default); }
+.number-input button.plus  { border-left:  1px solid var(--color-border-default); }
+.number-input > input {
+  width: 64px;
+  border: 0;
+  outline: none;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: var(--fs-md);
+  font-weight: var(--w-semibold);
+  background: transparent;
+  color: var(--color-foreground-default);
+  -moz-appearance: textfield;
+}
+.number-input > input::-webkit-outer-spin-button,
+.number-input > input::-webkit-inner-spin-button { appearance: none; margin: 0; }
+
+
+/* ----------------------------------------------------------------
+   11. OTP — one-time password digit cells
+   ---------------------------------------------------------------- */
+.otp { display: inline-flex; gap: var(--space-2); }
+.otp > input {
+  width: 40px;
+  height: 48px;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xl);
+  font-weight: var(--w-semibold);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  outline: none;
+  background: var(--color-background-surface);
+  color: var(--color-foreground-default);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+.otp > input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
+.otp > input.is-error { border-color: var(--color-border-danger); }
+
+
+/* ----------------------------------------------------------------
+   12. SWITCH (toggle)
+   ---------------------------------------------------------------- */
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+  user-select: none;
+}
+.switch-track {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: var(--radius-pill);
+  background: var(--color-neutral-300);
+  transition: background var(--transition-base);
+  flex-shrink: 0;
+}
+.switch-thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--radius-pill);
+  background: var(--color-pure-white);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-pure-black) 18%, transparent);
+  transition: transform var(--transition-base);
+}
+.switch input { position: absolute; opacity: 0; pointer-events: none; }
+.switch input:checked ~ .switch-track { background: var(--color-brand-secondary-500); }
+.switch input:checked ~ .switch-track .switch-thumb { transform: translateX(16px); }
+.switch input:focus-visible ~ .switch-track { box-shadow: var(--shadow-focus); }
+.switch input:disabled ~ .switch-track { opacity: 0.5; cursor: not-allowed; }
+.switch-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+}
+
+
+/* ----------------------------------------------------------------
+   13. CHECKBOX
+   ---------------------------------------------------------------- */
+.check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+}
+.check input { position: absolute; opacity: 0; pointer-events: none; }
+.check-box {
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--color-background-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-pure-white);
+  transition:
+    background var(--transition-fast),
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+.check-box svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; transform: scale(0.8); transition: opacity var(--transition-fast), transform var(--transition-fast); }
+.check input:checked ~ .check-box {
+  background: var(--color-brand-secondary-500);
+  border-color: var(--color-brand-secondary-500);
+}
+.check input:checked ~ .check-box svg { opacity: 1; transform: scale(1); }
+.check input:indeterminate ~ .check-box {
+  background: var(--color-brand-secondary-500);
+  border-color: var(--color-brand-secondary-500);
+}
+.check input:indeterminate ~ .check-box::after {
+  content: '';
+  width: 10px;
+  height: 2px;
+  background: var(--color-pure-white);
+  border-radius: 1px;
+}
+.check input:indeterminate ~ .check-box svg { display: none; }
+.check input:focus-visible ~ .check-box { box-shadow: var(--shadow-focus); }
+.check input:disabled ~ .check-box { opacity: 0.5; cursor: not-allowed; }
+.check.is-error .check-box { border-color: var(--color-border-danger); }
+
+
+/* ----------------------------------------------------------------
+   14. RADIO
+   ---------------------------------------------------------------- */
+.radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  color: var(--color-foreground-default);
+}
+.radio input { position: absolute; opacity: 0; pointer-events: none; }
+.radio-dot {
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  background: var(--color-background-surface);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+.radio-dot::after {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500);
+  transform: scale(0);
+  transition: transform var(--transition-fast);
+}
+.radio input:checked ~ .radio-dot { border-color: var(--color-brand-secondary-500); }
+.radio input:checked ~ .radio-dot::after { transform: scale(1); }
+.radio input:focus-visible ~ .radio-dot { box-shadow: var(--shadow-focus); }
+.radio input:disabled ~ .radio-dot { opacity: 0.5; cursor: not-allowed; }
+
+
+/* ----------------------------------------------------------------
+   15. DATE / TIME TRIGGER
+   ---------------------------------------------------------------- */
+.date-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--space-4);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-background-surface);
+  color: var(--color-foreground-default);
+  font-family: var(--font-sans);
+  font-size: var(--fs-md);
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast),
+    background var(--transition-fast);
+}
+.date-trigger:hover { border-color: var(--color-border-strong); }
+.date-trigger:focus,
+.date-trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-focus);
+}
+.date-trigger.is-error          { border-color: var(--color-border-danger); }
+.date-trigger.is-error:focus,
+.date-trigger.is-error:focus-visible { box-shadow: var(--shadow-focus-danger); }
+.date-trigger .placeholder { color: var(--color-foreground-placeholder); }
+.date-trigger > i, .date-trigger > svg,
+.date-trigger > svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+  flex-shrink: 0;
+}
+
+
+/* ----------------------------------------------------------------
+   16. FILE DROPZONE
+   ---------------------------------------------------------------- */
+.file-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  padding: var(--space-7) var(--space-5);
+  border: 1.5px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-background-canvas);
+  color: var(--color-foreground-secondary);
+  text-align: center;
+  cursor: pointer;
+  transition:
+    border-color var(--transition-fast),
+    background var(--transition-fast);
+}
+.file-drop:hover {
+  border-color: var(--color-border-focus);
+  background: var(--color-background-selected);
+}
+.file-drop.is-dragging {
+  border-color: var(--color-border-focus);
+  background: var(--color-background-selected);
+  border-style: solid;
+}
+.file-drop > i, .file-drop > svg,
+.file-drop > svg {
+  width: 28px;
+  height: 28px;
+  stroke-width: var(--icon-stroke);
+  color: var(--color-foreground-muted);
+}
+.file-drop .ttl { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.file-drop .sub { font-size: var(--fs-xs); color: var(--color-foreground-muted); }
+.file-drop .anchor { color: var(--color-foreground-highlight); font-weight: var(--w-semibold); }
+
+/* ----------------------------------------------------------------
+   16b. FILE LIST (post-upload state)
+   ---------------------------------------------------------------- */
+.file-list {
+  width: 100%;
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.file-list-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-5);
+  background: var(--color-background-subtle);
+  border-bottom: 1px solid var(--color-border-subtle);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--ls-caps);
+}
+.file-list-action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  color: var(--color-foreground-highlight);
+  text-transform: uppercase;
+  letter-spacing: var(--ls-caps);
+  cursor: pointer;
+  transition: color var(--transition-fast);
+}
+.file-list-action:hover { color: var(--color-brand-secondary-700); }
+
+.file-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.file-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--color-border-subtle);
+  transition: background var(--transition-fast);
+}
+.file-row:last-child { border-bottom: 0; }
+.file-row:hover { background: var(--color-background-canvas); }
+
+.file-icon {
+  position: relative;
+  width: 40px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: var(--radius-xs);
+  background: var(--color-background-subtle);
+  color: var(--color-foreground-muted);
+}
+.file-icon[data-kind="pdf"]   { background: color-mix(in srgb, var(--color-danger-500) 8%, var(--color-background-surface)); color: var(--color-feedback-danger-foreground); }
+.file-icon[data-kind="img"]   { background: color-mix(in srgb, var(--color-brand-secondary-500) 8%, var(--color-background-surface));   color: var(--color-brand-secondary-700); }
+.file-icon[data-kind="csv"]   { background: color-mix(in srgb, var(--color-success-500) 8%, var(--color-background-surface)); color: var(--color-feedback-success-foreground); }
+.file-icon[data-kind="doc"]   { background: color-mix(in srgb, var(--color-brand-secondary-500) 10%, var(--color-background-surface));  color: var(--color-brand-secondary-700); }
+
+.file-icon-tag {
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: var(--w-bold);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  color: currentColor;
+  background: var(--color-background-surface);
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+
+.file-meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.file-name {
+  font-family: var(--font-sans);
+  font-size: var(--fs-sm);
+  font-weight: var(--w-semibold);
+  color: var(--color-foreground-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.file-sub {
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+}
+.file-sub.err { color: var(--color-feedback-danger-foreground); }
+
+.file-progress {
+  margin-top: 6px;
+  height: 3px;
+  background: var(--color-background-subtle);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+.file-progress > span {
+  display: block;
+  height: 100%;
+  background: var(--color-brand-secondary-500);
+  border-radius: inherit;
+  transition: width var(--transition-fast);
+}
+
+.file-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px var(--space-2);
+  border-radius: var(--radius-pill);
+  font-family: var(--font-mono);
+  font-size: var(--fs-xxs);
+  font-weight: var(--w-semibold);
+  text-transform: uppercase;
+  letter-spacing: var(--ls-caps);
+  white-space: nowrap;
+}
+.file-status.ok      { color: var(--color-feedback-success-foreground); background: var(--color-feedback-success-background); }
+.file-status.pending { color: var(--color-brand-secondary-700);   background: color-mix(in srgb, var(--color-brand-secondary-500) 10%, transparent); }
+.file-status.err     { color: var(--color-feedback-danger-foreground);  background: var(--color-feedback-danger-background); cursor: pointer; }
+
+.file-remove {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-xs);
+  color: var(--color-foreground-muted);
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+}
+.file-remove:hover { background: var(--color-background-subtle); color: var(--color-foreground-default); }
+.file-remove > svg, .file-remove > i { width: 14px; height: 14px; }
+
+
+/* ----------------------------------------------------------------
+   17. SLIDER (range)
+   ---------------------------------------------------------------- */
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 24px;
+  background: transparent;
+  cursor: pointer;
+}
+.slider::-webkit-slider-runnable-track {
+  height: 4px;
+  background: var(--color-neutral-150);
+  border-radius: var(--radius-pill);
+}
+.slider::-moz-range-track {
+  height: 4px;
+  background: var(--color-neutral-150);
+  border-radius: var(--radius-pill);
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500);
+  border: 2px solid var(--color-pure-white);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-shadow-tint) 22%, transparent);
+  margin-top: -7px;
+  transition: transform var(--transition-fast);
+}
+.slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500);
+  border: 2px solid var(--color-pure-white);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-shadow-tint) 22%, transparent);
+}
+.slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--shadow-focus);
+}
+.slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
+
+
+/* ----------------------------------------------------------------
+   18. ON INVERSE — dark surfaces
+   ---------------------------------------------------------------- */
+.input.on-inverse,
+.dark .input,
+.dark .group,
+.dark .pill-search,
+.dark .chips,
+.dark .number-input,
+.dark .date-trigger {
+  background: color-mix(in srgb, var(--color-pure-white) 6%, transparent);
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-default);
+}
+.input.on-inverse::placeholder,
+.dark .input::placeholder,
+.dark .group > input::placeholder,
+.dark .pill-search > input::placeholder,
+.dark .chips > input::placeholder {
+  color: var(--color-foreground-inverse-placeholder);
+}
+.dark .group > input,
+.dark .pill-search > input,
+.dark .chips > input,
+.dark .number-input > input,
+.dark .date-trigger { color: var(--color-foreground-inverse-default); }
+.dark .group .fix {
+  background: color-mix(in srgb, var(--color-pure-white) 4%, transparent);
+  color: var(--color-foreground-inverse-secondary);
+  border-color: var(--color-border-inverse);
+}
+.dark .number-input button {
+  background: color-mix(in srgb, var(--color-pure-white) 4%, transparent);
+  color: var(--color-foreground-inverse-default);
+  border-color: var(--color-border-inverse);
+}
+.dark .number-input button:hover { background: color-mix(in srgb, var(--color-pure-white) 10%, transparent); }
+.dark .input:focus,
+.dark .group:focus-within,
+.dark .pill-search:focus-within,
+.dark .chips:focus-within,
+.dark .number-input:focus-within,
+.dark .date-trigger:focus-visible {
+  border-color: var(--color-brand-secondary-300);
+  box-shadow: var(--shadow-focus-sky);
+}
+.dark .field > label  { color: var(--color-foreground-inverse-default); }
+.dark .field > .help  { color: var(--color-foreground-inverse-muted); }
+.dark .kbd {
+  background: color-mix(in srgb, var(--color-pure-white) 8%, transparent);
+  color: var(--color-foreground-inverse-secondary);
+  border-color: var(--color-border-inverse);
+}
+.dark .file-drop {
+  background: color-mix(in srgb, var(--color-pure-white) 4%, transparent);
+  border-color: var(--color-border-inverse);
+  color: var(--color-foreground-inverse-muted);
+}
+.dark .file-drop .ttl { color: var(--color-foreground-inverse-default); }
+.dark .check-box,
+.dark .radio-dot {
+  background: color-mix(in srgb, var(--color-pure-white) 6%, transparent);
+  border-color: var(--color-border-inverse);
+}