/* Shared native controls, used by posts and the component cheatsheet. */
/* data-ui is an explicit source migration contract, not a runtime selector sweep.
   The scoped aliases share the exact existing foundation with .button/.input.
   Their specificity retires legacy class skins while layout, widths, event
   handlers and specialized controls stay owned by the application. */
.button,
.tool-page button.button[data-ui="button"] {
  appearance: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: 500 14px var(--font);
  cursor: pointer;
}
.button:hover:not(:disabled), .button[aria-expanded="true"],
.tool-page button.button[data-ui="button"]:hover:not(:disabled),
.tool-page button.button[data-ui="button"][aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--sunken);
}
.button:disabled,
.tool-page button.button[data-ui="button"]:disabled { opacity: .45; cursor: not-allowed; }

.input,
.tool-page :is(input, select, textarea).input[data-ui="input"] {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--field-border);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font);
}
.input:hover,
.tool-page :is(input, select, textarea).input[data-ui="input"]:hover { border-color: #9b9580; }
.input:focus,
.tool-page :is(input, select, textarea).input[data-ui="input"]:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(28, 93, 77, 0.22); }
.input.is-error,
.tool-page :is(input, select, textarea).input[data-ui="input"].is-error { border-color: var(--down); box-shadow: 0 0 0 3px rgba(190, 70, 59, 0.18); }
.input:disabled,
.tool-page :is(input, select, textarea).input[data-ui="input"]:disabled { background: var(--sunken); color: #B4B0A6; border-color: var(--hairline); }
.tool-page :is(input, select, textarea).input[data-ui="input"] { min-width: 0; max-width: 100%; }

/* Native form controls inherit the site's accent; post-specific sizes stay intact. */
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--accent); }

/* Shared vector icons stay inside their parent control's touch target. */
.action-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
[data-icon-action] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* Proposed opt-in variants. Existing posts keep their current button variants. */
:root {
  --on-accent: #fff;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --control-height: 44px;
}
html[data-theme="dark"] { --on-accent: #0d1117; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { --on-accent: #0d1117; } }
.button--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.button--primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }
.button--danger { color: var(--down); border-color: var(--down); }
.button[aria-pressed="true"],
.tool-page button.button[data-ui="button"][aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.button:active:not(:disabled),
.tool-page button.button[data-ui="button"]:active:not(:disabled) { transform: translateY(1px); }
.button[aria-busy="true"],
.tool-page button.button[data-ui="button"][aria-busy="true"] { cursor: progress; }
.input[aria-invalid="true"],
.tool-page :is(input, select, textarea).input[data-ui="input"][aria-invalid="true"] { border-color: var(--down); }
.ui-field { display: grid; gap: var(--space-2); min-width: 0; }
.ui-field .input { width: 100%; min-width: 0; min-height: var(--control-height); }
.ui-field label, .ui-field legend { font-size: 14px; font-weight: 600; color: var(--ink); }
.ui-field small { font-size: 13px; color: var(--muted); }
.ui-field [data-error] { color: var(--down); }
.ui-notice { border-inline-start: 3px solid var(--link); background: var(--sunken); padding: var(--space-3) var(--space-4); font-size: 14px; }
.ui-notice[data-tone="success"] { border-color: var(--up); }
.ui-notice[data-tone="error"] { border-color: var(--down); }
.ui-notice[data-tone="warning"] { border-color: var(--gold); }
.ui-segments { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* An actual outline survives forced colors; the old pine shadow did not. */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible,
.tool-page :where(button, input, select, textarea):focus-visible,
.input:focus-visible,
.tool-page button.button[data-ui="button"]:focus-visible,
.tool-page :is(input, select, textarea).input[data-ui="input"]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .tool-page :where(button), .button,
  .tool-page button.button[data-ui="button"] { transition: none; }
  .tool-page :where(button):active, .button:active:not(:disabled),
  .tool-page button.button[data-ui="button"]:active:not(:disabled) { transform: none; }
}
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, [tabindex], summary):focus-visible,
  .tool-page :where(button, input, select, textarea):focus-visible,
  .tool-page button.button[data-ui="button"]:focus-visible,
  .tool-page :is(input, select, textarea).input[data-ui="input"]:focus-visible { outline-color: Highlight; }
  .button[aria-pressed="true"], [role="tab"][aria-selected="true"],
  .tool-page button.button[data-ui="button"][aria-pressed="true"] { border: 3px solid Highlight; }
}