/* Shared by the application bundle and public site/demo. Keep behavior and
   semantic colors in their components; ordinary control geometry lives here. */
:root {
  --control-radius: 8px;
  --control-text-size: .875rem;
  --control-weight: 650;
  --control-spacing: 8px;
  --control-default-padding: 10px 14px;
  --control-field-padding: 10px 12px;
  --control-disabled-opacity: .55;
}

body[data-thesisnav-controls] :is(button, .button, [data-control="button"]):where(:not([data-control="backdrop"])) {
  box-sizing: border-box;
  min-height: var(--control-min-height, var(--form-control-height, 44px));
  max-width: 100%;
  border-radius: var(--control-radius);
  padding: var(--control-padding, var(--control-default-padding));
  font-family: inherit;
  font-size: var(--control-font-size, var(--control-text-size));
  font-weight: var(--control-weight);
  line-height: 1.4;
  gap: var(--control-spacing);
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

/* Text inputs with an omitted type must receive the same treatment. Exclude
   native switches, sliders, upload controls and hidden fields explicitly. */
body[data-thesisnav-controls][data-thesisnav-controls] :is(select, textarea,
  input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]))) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line, #d9e2ed);
  border-radius: var(--control-radius);
  padding: var(--control-field-padding);
  background: var(--panel, #fff);
  color: var(--foreground, var(--ink, #172033));
  font-family: inherit;
  font-size: var(--control-text-size);
  font-weight: 400;
  line-height: 1.5;
}

body[data-thesisnav-controls][data-thesisnav-controls] :is(select,
  input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]))) {
  height: var(--form-control-height, 44px);
  min-height: var(--form-control-height, 44px);
}
body[data-thesisnav-controls][data-thesisnav-controls] select { padding-right: 32px; }
body[data-thesisnav-controls] select[multiple] { height: auto; min-height: 7rem; }
body[data-thesisnav-controls] textarea { min-height: 104px; resize: vertical; }
body[data-thesisnav-controls] :is(input, textarea)::placeholder { color: var(--muted, #5f6f82); opacity: 1; }
body[data-thesisnav-controls] :is(input, textarea)[readonly] { background: var(--panel-soft, #f2f6fb); }
body[data-thesisnav-controls] :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--red, #a24337); }

body[data-thesisnav-controls] input:is([type="checkbox"], [type="radio"]) {
  width: 20px; height: 20px; min-height: 20px;
  flex: 0 0 20px; padding: 0;
  accent-color: var(--green, var(--blue, #2563eb));
}
body[data-thesisnav-controls] label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }
body[data-thesisnav-controls] input[type="range"] {
  min-height: 44px; max-width: 100%; padding: 0;
  accent-color: var(--green, var(--blue, #2563eb));
}
body[data-thesisnav-controls] input[type="file"] {
  max-width: 100%; min-height: 44px; padding: 6px;
  border: 1px solid var(--line, #d9e2ed); border-radius: var(--control-radius);
  background: var(--panel, #fff); color: var(--foreground, var(--ink, #172033));
  font: inherit; font-size: var(--control-text-size);
}
body[data-thesisnav-controls] input[type="file"]::file-selector-button {
  min-height: 44px; margin-right: 10px; padding: var(--control-default-padding);
  border: 1px solid var(--line, #d9e2ed); border-radius: var(--control-radius);
  background: var(--panel, #fff); color: inherit; font: inherit;
  font-weight: var(--control-weight); cursor: pointer;
}
body[data-thesisnav-controls] input[type="file"]:disabled::file-selector-button { cursor: not-allowed; }

body[data-thesisnav-controls] summary {
  min-height: 44px; align-content: center;
  cursor: pointer; overflow-wrap: anywhere;
}
body[data-thesisnav-controls] :is(button, input, select, textarea):disabled,
body[data-thesisnav-controls] [aria-disabled="true"] {
  opacity: var(--control-disabled-opacity); cursor: not-allowed;
}
body[data-thesisnav-controls] :is(button, input, select, textarea, summary, a, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring, var(--blue, #2563eb));
  outline-offset: var(--control-focus-offset, 3px);
}
body[data-thesisnav-controls][data-thesisnav-controls] :is(.icon-button, .sidebar-icon-button, .mobile-navigation-button) {
  --control-padding: 0;
  width: var(--form-control-height, 44px);
  min-width: var(--form-control-height, 44px);
  min-height: var(--form-control-height, 44px);
}

/* Keep mobile form text at 16px to avoid input-focus zoom on iOS. */
@media (max-width: 600px) {
  body[data-thesisnav-controls] { --control-text-size: max(1rem, 16px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-thesisnav-controls] :is(button, input, select, textarea, summary, .button, [data-control="button"]) { transition: none; }
}
@media (forced-colors: active) {
  body[data-thesisnav-controls] :is(button, input, select, textarea, .button, [data-control="button"]) { border-color: ButtonText; }
  body[data-thesisnav-controls] :is(button, input, select, textarea, summary, a):focus-visible { outline-color: Highlight; }
}