/* Leagues Lab form-control system — one component language across app, drawers and overlays. */
:root{
  --ll-control-height:42px;
  --ll-control-radius:12px;
  --ll-control-bg:#081520;
  --ll-control-bg-hover:#0b1b29;
  --ll-control-border:#31526d;
  --ll-control-border-hover:#47789d;
  --ll-control-focus:#45d7ff;
  --ll-control-text:#eff7ff;
  --ll-control-muted:#71889d;
}

:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(
  select,
  input[type="search"],input[type="text"],input[type="number"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],
  textarea
){
  width:auto;
  min-height:var(--ll-control-height);
  border:1px solid var(--ll-control-border)!important;
  border-radius:var(--ll-control-radius)!important;
  background-color:var(--ll-control-bg)!important;
  color:var(--ll-control-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(0,0,0,.28)!important;
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease,transform .15s ease;
}

:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) select{
  appearance:none;
  -webkit-appearance:none;
  padding:9px 40px 9px 12px!important;
  cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,#73d8ff 50%),
    linear-gradient(135deg,#73d8ff 50%,transparent 50%),
    linear-gradient(to right,rgba(75,124,164,.28),rgba(75,124,164,.28))!important;
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 13px) 18px,
    calc(100% - 36px) 8px!important;
  background-size:5px 5px,5px 5px,1px 26px!important;
  background-repeat:no-repeat!important;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) select::-ms-expand{display:none}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) select option{background:#081520;color:#eef7ff}

:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(
  input[type="search"],input[type="text"],input[type="number"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"],textarea
){padding:9px 12px!important}

:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) textarea{
  min-height:92px;
  line-height:1.5;
  resize:vertical;
}

:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input,textarea):hover:not(:disabled){
  border-color:var(--ll-control-border-hover)!important;
  background-color:var(--ll-control-bg-hover)!important;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input,textarea):focus-visible{
  outline:none!important;
  border-color:var(--ll-control-focus)!important;
  box-shadow:0 0 0 3px rgba(69,215,255,.14),0 0 22px rgba(43,134,255,.08),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(input,textarea)::placeholder{color:var(--ll-control-muted);opacity:1}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input,textarea):disabled{
  opacity:.52;
  cursor:not-allowed;
  background-color:#07111a!important;
  color:#7a8b9a!important;
  border-color:#263b4d!important;
  box-shadow:none!important;
}

/* Search fields should read as command/search surfaces. */
:where(.app,.ll-route-catalog-overlay) input[type="search"]{
  min-height:44px;
  padding-left:38px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2373d8ff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:12px center!important;
  background-size:16px 16px!important;
}
:where(.app,.ll-route-catalog-overlay) input[type="search"]::-webkit-search-cancel-button{filter:invert(1) opacity(.62);cursor:pointer}

/* Checkbox/radio controls: branded, keyboard-visible, and still native-semantic. */
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="checkbox"],
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  min-width:18px;
  margin:0;
  border:1px solid #3a607d;
  background:#081520;
  display:inline-grid;
  place-content:center;
  vertical-align:middle;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="checkbox"]{border-radius:5px}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]{border-radius:50%}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="checkbox"]::before{
  content:"";
  width:9px;height:5px;
  border-left:2px solid #09110b;
  border-bottom:2px solid #09110b;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .12s ease;
  margin-top:-2px;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:#08110b;
  transform:scale(0);
  transition:transform .12s ease;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="checkbox"]:checked,
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]:checked{
  border-color:#f3c65d;
  background:linear-gradient(180deg,#ffd978,#e8ad42);
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="checkbox"]:checked::before,
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]:checked::before{transform:rotate(-45deg) scale(1)}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]:checked::before{transform:scale(1)}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="checkbox"]:focus-visible,
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="radio"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(69,215,255,.16);border-color:#45d7ff}

/* Range and file inputs get intentional styling too. */
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="range"]{accent-color:#f3c65d}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="file"]{
  width:100%;
  min-height:44px;
  padding:5px;
  border:1px dashed #355b78;
  border-radius:12px;
  background:#081520;
  color:#91a8bb;
}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="file"]::file-selector-button{
  min-height:32px;
  margin-right:9px;
  border:1px solid #3c6481;
  border-radius:9px;
  padding:6px 10px;
  background:linear-gradient(180deg,#10263a,#0b1b2a);
  color:#e6f4ff;
  font-weight:800;
  cursor:pointer;
}

/* Labels and field groups share typography even where legacy markup is simple. */
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) label{color:#b9c9d7}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) fieldset{border:1px solid #29465e;border-radius:14px;padding:12px}
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) legend{padding:0 7px;color:#75d8ff;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}

/* High-signal selector groups. */
#profileSelect,#buildView [data-plan-region],#buildView [data-rejuvenated-secondary],#tasksView .controls select,#questsView select,#achievementsView select,.ll-skill-goal select{font-weight:760;letter-spacing:.005em}
#profileSelect{min-width:132px;border-color:#3a6485!important;background-color:#0a1824!important}
#buildView [data-plan-region]{width:100%;border-color:#3b6281!important;background-color:#081722!important}
#buildView .plannedRegionCard.ll-region-plan-filled [data-plan-region]{border-color:#80672e!important;background-color:#17160f!important;color:#fff0be!important}
#buildView .plannedRegionCard.ll-region-plan-unlocked [data-plan-region]{border-color:#397c55!important;background-color:#0e2118!important;color:#d5f7df!important}

/* Numeric entry should visually align digits and reduce jitter. */
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) input[type="number"]{font-variant-numeric:tabular-nums}

/* Error-ready convention for forms that opt into native required/validation states. */
:where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(input,select,textarea):user-invalid{
  border-color:#ed7480!important;
  box-shadow:0 0 0 3px rgba(237,116,128,.12)!important;
}

@media(max-width:680px){
  :where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input[type="search"],input[type="text"],input[type="number"],input[type="email"],input[type="url"],input[type="tel"],input[type="password"]){min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  :where(.app,.ll-route-catalog-overlay,.ll-build-intel-drawer,.ll-modal,.modal) :is(select,input,textarea){transition:none!important}
}