/* ==========================================================================
   DataPoint inline input — lozenge primitive
   For [[ abbr.owner.new ]] / [[ … new.required ]] tokens rendered inside
   Content / ContentInput participation prose. Baseline-flush; preserves
   surrounding line-height. Underline + background only — no outer borders,
   no icons (except the native date/datetime picker glyph at 40% opacity).
   Save indication lives in the canonical .toast--save (toasts.css) via
   the editor:saved event — NOT on the input itself.
   ========================================================================== */

.dp-input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--text-primary);
  background-color: var(--surface-neutral);
  border: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  outline: none;
  padding: 0 var(--space-1);
  margin: 0;
  vertical-align: baseline;
  box-shadow: inset 0 -1.5px 0 var(--text-tertiary);
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);

  /* ── Width contract ──
     Auto-grow with content up to a consumer-grade max, capped against the
     viewport so the lozenge can never overflow on mobile. Modern Chromium /
     WebKit (Chrome 123+, Safari 17.4+) grow natively via `field-sizing:
     content`; Firefox + older Safari fall back to the dp-autosave
     controller's mirror-based width adjustment so no users are left
     behind. Past max-width the input scrolls horizontally inside its
     own box — but the scrollbar is suppressed in every UA. The
     `.dp-input--overflowing` modifier paints a right-edge gradient mask
     that signals there is more content out of view; the controller
     toggles the class on input whenever scrollWidth > clientWidth. */
  min-width: 5ch;
  max-width: min(36ch, calc(100vw - var(--space-8)));
  field-sizing: content;

  /* Suppress all horizontal scrollbars at the chrome layer. Native input
     scroll still moves content; we just never render a bar. */
  scrollbar-width: none;
}
.dp-input::-webkit-scrollbar { display: none; width: 0; height: 0; }
.dp-input::placeholder { color: var(--text-tertiary); font-style: italic; }
.dp-input:hover { background-color: var(--accent-subtle); }
.dp-input:focus {
  background-color: var(--accent-subtle);
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}

/* Right-edge fade affordance — toggled by dp-autosave when the input has
   hidden content past its visible right edge. Subtle on purpose; the
   underline + lozenge background still read as the primary chrome. */
.dp-input--overflowing {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0, 0, 0, 0.35) 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 14px), rgba(0, 0, 0, 0.35) 100%);
}

/* Required modifier — slightly darker underline. No glyph, no dot. */
.dp-input--required {
  box-shadow: inset 0 -1.5px 0 var(--text-secondary);
}
.dp-input--required:focus {
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}

/* Invalid modifier — error bg + error underline. No inline message
   (per VC 2026-05-18 lock: chrome-only signaling). */
.dp-input--invalid {
  background-color: var(--status-error-bg);
  box-shadow: inset 0 -1.5px 0 var(--status-error);
}

/* Number — suppress native spinner buttons (no icons mandate). */
.dp-input[type="number"]::-webkit-outer-spin-button,
.dp-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dp-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Date / datetime — native picker icon visible at 40% opacity. */
.dp-input[type="date"]::-webkit-calendar-picker-indicator,
.dp-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.4;
  cursor: pointer;
}

/* Boolean — checkbox lives inside a lozenge wrapper. */
.dp-input--boolean-wrap {
  display: inline-flex;
  align-items: center;
  background-color: var(--surface-neutral);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0 var(--space-1-5);
  vertical-align: baseline;
  box-shadow: inset 0 -1.5px 0 var(--text-tertiary);
  transition: background-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.dp-input--boolean-wrap:hover { background-color: var(--accent-subtle); }
.dp-input--boolean-wrap:focus-within {
  background-color: var(--accent-subtle);
  box-shadow: inset 0 -2px 0 var(--accent-primary);
}
.dp-input--boolean-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}
.dp-input--boolean-wrap.dp-input--required {
  box-shadow: inset 0 -1.5px 0 var(--text-secondary);
}
.dp-input--boolean-wrap.dp-input--invalid {
  background-color: var(--status-error-bg);
  box-shadow: inset 0 -1.5px 0 var(--status-error);
}