/* Shared product controls. Load after brand.css, before feature layout styles. */
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
button, .button-link {
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--paper);
  color: var(--ink);
  padding: var(--control-padding-block) var(--control-padding-inline);
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);
  line-height: 1.4;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
button:hover:not(:disabled):not(:where([aria-disabled=true])), .button-link:hover:not(:where([aria-disabled=true])) { background: var(--blue); }
button.primary { background: var(--surface-dark); border-color: var(--surface-dark); color: var(--on-dark); }
button.primary:hover:not(:disabled):not(:where([aria-disabled=true])) { background: var(--deep); }
button.primary[aria-busy=true]:disabled { opacity: 1; cursor: wait; }
button.quiet, .button-link.quiet {
  border-color: transparent;
  background: transparent;
  color: var(--deep);
  padding: 9px 6px;
}
button.quiet:hover:not(:disabled):not(:where([aria-disabled=true])), .button-link.quiet:hover:not(:where([aria-disabled=true])) { background: var(--soft); }
button.danger { color: var(--error); }
/* Use .control-menu for new action lists; existing menus share the same states. */
:is(.control-menu, [role=menu], .sidebar-row-menu, .node-more-menu, .mm-menu) {
  --control-radius: var(--menu-radius);
  border: 1px solid var(--line);
  border-radius: var(--menu-radius);
  background: var(--paper);
  padding: 5px;
  box-shadow: var(--shadow-card);
}
:is(.control-menu, [role=menu], .sidebar-row-menu, .node-more-menu, .mm-menu) :is(button, a):is(:hover, :focus-visible):not(:disabled):not([aria-disabled=true]) {
  background: var(--blue);
}
a { color: var(--deep); }
label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--control-border);
  font-size: var(--field-font-size);
  font-weight: 400;
  line-height: 1.4;
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
/* Native selection/keyboard behavior, with one product chevron on every dropdown.
   Feature hover rules change background-color, never reset this background image. */
select:not([multiple]):not([size]), select[size="1"]:not([multiple]) {
  appearance: none;
  padding-right: 30px;
  background-image: var(--dropdown-chevron);
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 14px 14px;
}
.control-chevron { display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; background: var(--dropdown-chevron) center / 14px 14px no-repeat; pointer-events: none; }
@media (forced-colors: active) {
  select:not([multiple]):not([size]), select[size="1"]:not([multiple]) { appearance: auto; background-image: none; }
  .control-chevron { background: none; width: 8px; height: 8px; flex-basis: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
}
input[type=checkbox] { width: auto; min-height: 20px; }
select.control-compact {
  min-height: 38px;
  padding: 7px 26px 7px 10px;
  font-size: 13px;
  font-weight: 600;
  border-color: var(--line);
  text-overflow: ellipsis;
}
button.control-tab {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 13px;
  font-weight: 500;
  border-color: transparent;
  background: transparent;
}
button.control-tab:hover:not(:disabled):not(:where([aria-disabled=true])), button.control-tab[aria-pressed=true] {
  background: var(--blue);
  color: var(--ink);
}
@media (max-width:760px) {
  select.control-compact { min-height: 40px; font-size: 14px; }
}