/* Shared controls. Keep module CSS for layout, not for control appearance. */
:root {
  --control-height: 44px;
  --control-radius: 10px;
  --control-border: #d5dce5;
  --control-hover: #aebbc9;
  --control-text: #303b4b;
  --control-placeholder: #788594;
  --control-surface: #fff;
  --control-focus: #b7374b;
  --control-ring: #b7374b1c;
  --control-disabled: #f0f2f5;
  --control-font-size: 14px;
}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]):not([type=color]):not([type=button]):not([type=submit]):not([type=reset]), textarea, select) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  box-sizing: border-box;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  padding: 11px 14px;
  background-color: var(--control-surface);
  color: var(--control-text);
  font: inherit;
  font-size: var(--control-font-size);
  font-weight: 400;
  line-height: 20px;
  box-shadow: 0 1px 2px #20304a04;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
:where(input,textarea)::placeholder {color:var(--control-placeholder);opacity:1;font-weight:400;}
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):hover:not(:disabled):not([readonly]) {border-color:var(--control-hover);}
:where(input,textarea,select):focus-visible {
  border-color: var(--control-focus);
  outline: 2px solid var(--control-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--control-ring);
}
:where(input,textarea,select)[aria-invalid=true],:where(input,textarea,select):user-invalid {border-color:#b7374b;background-color:#fff8f9;}
:where(input,textarea,select):disabled,:where(input,textarea)[readonly] {
  background-color: var(--control-disabled);
  color: #687584;
  border-color: #e0e5eb;
  box-shadow: none;
  opacity: 1;
}
:where(input,textarea,select):disabled {cursor:not-allowed;}
:where(textarea) {min-height:120px;resize:vertical;line-height:1.65;}
:where(select):not([multiple]):not([size]) {
  appearance:none;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%2367778a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:20px;
  cursor:pointer;
}
:where(select[multiple],select[size]) {min-height:144px;padding:8px;}
:where(select) option {background:#fff;color:var(--control-text);padding:8px;}
:where(input[type=checkbox],input[type=radio]) {
  appearance:auto;
  display:inline-block;
  width:18px;
  height:18px;
  min-width:18px;
  min-height:18px;
  margin:0;
  padding:0;
  flex:none;
  vertical-align:middle;
  accent-color:var(--accent);
  cursor:pointer;
}
:where(input[type=file]) {display:block;max-width:100%;font-size:13px;color:#687584;}
:where(input[type=file])::file-selector-button {
  font:inherit;
  font-weight:600;
  padding:10px 14px;
  border:1px solid var(--control-border);
  border-radius:var(--control-radius);
  background:#f6f7fa;
  color:var(--control-text);
  margin-right:12px;
  cursor:pointer;
}
:where(input[type=file]):hover::file-selector-button {background:#edf0f5;border-color:var(--control-hover);}
:where(.login-box,.page-form) label {font-size:13px;font-weight:600;color:#495568;}
:where(.login-box,.page-form) label :where(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select) {margin-top:8px;}
.search input {padding-left:42px;}
.search svg {top:50%;transform:translateY(-50%);}
.chat-compose textarea {min-height:64px;}
.comment-form textarea {min-height:80px;}
.request-form .request-field {display:grid;gap:8px;margin:0;font-weight:600;color:#495568;}
.request-field :where(input,textarea,select) {margin-top:0;}
.request-person :where(input,select),.event-person input,.chat-member-choice input,.meal-choice input {margin-top:0;}
.request-person select {width:180px;max-width:100%;}
.request-tools :where(input,select) {margin:0;}
.request-tools select {min-width:160px;}
.request-person label {font-weight:500;}
@media(max-width:650px) {
  :root {--control-font-size:16px;}
  .request-person select {width:100%;}
  .request-tools select {min-width:0;}
}
@media(prefers-reduced-motion:reduce) { :where(input,textarea,select) {transition:none;} }