/* Shared palette and states for interactive controls. Keep borders 1px in every state. */
:root {
  --control-radius: 10px;
  --control-border: #4b3e26;
  --control-surface: #17140e;
  --control-text: #a7997b;
  --neutral-border: #384230;
  --neutral-surface: #202620;
  --neutral-text: #a5afa7;
  --accent-border: #ffbd1660;
  --accent-surface: #ffbd1615;
}

.search-wrap,
.sort-tools select,
.profile-dialog input {
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  background-color: var(--control-surface);
}
.search-wrap {height:44px;padding:0 13px}
.search-wrap input {height:42px}
.search-wrap input,.search-wrap input::placeholder,.search-icon,
.sort-tools select,.sort-tools label {color:var(--control-text)}
.sort-tools select {height:44px}
.sort-tools select {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23a7997b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.search-wrap:hover,.search-wrap:focus-within,
.sort-tools select:hover,.sort-tools select:focus,.sort-tools select:focus-visible,
.profile-dialog input:hover,.profile-dialog input:focus {
  border-color:var(--accent);
  outline:none;
  box-shadow:none;
}

.tools button,.history-button,.history-close,
.sort-tools button,.language,.profile-close {
  border:1px solid var(--neutral-border);
  border-radius:var(--control-radius);
  background-color:var(--neutral-surface);
  color:var(--neutral-text);
}
.tools button,.history-button,.history-close,.profile-button,
.sort-tools button,.profile-secondary,.profile-close,.language button {
  transition:background-color .15s,border-color .15s,color .15s;
}
.tools button,.sort-tools button,.history-button,.profile-button {font-size:13px;font-weight:700}
.profile-button,.profile-secondary,
.sort-tools button[aria-pressed=true],.selected-count,
.profile-dialog .profile-status {
  border:1px solid var(--accent-border);
  border-radius:var(--control-radius);
  background-color:var(--accent-surface);
  color:var(--accent);
}
.selected-count,.sort-tools button {height:38px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.roster-head h2 {min-height:38px;line-height:38px}
.roster-head .selected-count {height:38px}
.language {background-color:var(--neutral-surface)}
.language button {color:var(--neutral-text)}
.language button[aria-pressed=true] {background:var(--accent);color:#281b04}

.tools button:hover,.history-button:hover,.history-close:hover,
.profile-button:hover,.sort-tools button:hover,.profile-secondary:hover,
.profile-close:hover,
.tools button:focus-visible,.history-button:focus-visible,.history-close:focus-visible,
.profile-button:focus-visible,.sort-tools button:focus-visible,.profile-secondary:focus-visible,
.profile-close:focus-visible {
  border-color:var(--accent);
  background-color:var(--accent-surface);
  color:var(--accent);
  outline:none;
  box-shadow:none;
}
.tools button:active,.history-button:active,.history-close:active,
.profile-button:active,.sort-tools button:active,.profile-secondary:active,
.profile-close:active {border-color:var(--accent);background-color:#ffbd1624;color:var(--accent)}
.language button:focus-visible {outline:1px solid var(--accent);outline-offset:0;box-shadow:none}
.cards .card:focus-visible {outline:none;border-color:var(--accent);box-shadow:none}
.spin:focus-visible,.profile-primary:focus-visible {outline:1px solid var(--accent);outline-offset:3px}
.spin,.profile-primary {border:1px solid var(--accent)}
/* Keep the wheel's shadow behind the spin button in every interaction state. */
.spin {position:relative;z-index:1}
.profile-close {width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.profile-dialog .profile-message.has-feedback {border-color:var(--accent-border);background-color:var(--accent-surface)}

@media(max-width:740px){
  .history-button,.profile-button {width:36px;height:36px;padding:0}
}
@media(prefers-reduced-motion:reduce){
  .tools button,.history-button,.history-close,.profile-button,.sort-tools button,
  .profile-secondary,.profile-close,.language button {transition:none}
}