/* Shared navigation between livery resources and image works. */
body:is([data-page="resource"],[data-page="works"]) #sortBar.area-toolbar {
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:16px;
  /* Let the menu blur the resource images rather than a filtered toolbar layer. */
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.area-toolbar > .sort-right { justify-self:end; }
.area-trigger {
  position:relative; display:flex; align-items:center; width:100%; min-height:44px;
  padding:10px 48px 10px 20px; border:0; border-radius:999px;
  background:rgba(255,255,255,.055); color:#fff;
  font-family:inherit; font-size:16px; font-weight:600; line-height:24px;
  text-align:left; cursor:pointer; white-space:nowrap;
  transition:background .2s ease,box-shadow .2s ease;
}
.area-trigger:hover { background:rgba(255,255,255,.09); }
.area-trigger[aria-expanded="true"] { background:rgba(255,255,255,.105); }
.area-trigger-arrow {
  position:absolute; right:21px; top:17px; width:8px; height:8px;
  border-right:1.5px solid #ddd; border-bottom:1.5px solid #ddd;
  transform:rotate(45deg); transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.area-trigger[aria-expanded="true"] .area-trigger-arrow { transform:translateY(4px) rotate(225deg); }
.area-trigger:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.area-switcher { position:relative; width:clamp(220px,22vw,312px); justify-self:center; z-index:125; }
.area-menu[hidden] { display:none; }
.area-menu {
  position:absolute; top:calc(100% + 6px); left:50%; width:100%;
  box-sizing:border-box; max-width:calc(100vw - 32px); padding:6px;
  transform:translateX(-50%) translateY(-7px) scale(.98); transform-origin:50% 0;
  opacity:0; pointer-events:none; border:0; border-radius:16px;
  background:rgba(28,28,31,.82);
  -webkit-backdrop-filter:blur(24px) saturate(115%); backdrop-filter:blur(24px) saturate(115%);
  color:#fff; box-shadow:0 16px 40px #0005;
  transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1);
}
.area-menu.is-open { opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; }
.area-option { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 14px; border:0; border-radius:10px; background:transparent; color:#fff; font-family:inherit; text-align:left; cursor:pointer; transition:background .15s ease; }
.area-option + .area-option { margin-top:2px; }
.area-option:hover { background:#ffffff16; }
.area-menu .area-option:focus-visible { outline:2px solid #fff; outline-offset:-3px; background:#ffffff16; }
.area-option[aria-checked="true"] { background:#ffffff0d; }
.area-option[aria-checked="true"]:hover { background:#ffffff1c; }
.area-option-copy { flex:1; min-width:0; }
.area-option-copy strong { font-size:16px; font-weight:500; line-height:24px; }
.area-option[aria-checked="true"] strong { font-weight:600; }
.area-option-status { width:6px; height:10px; margin:0 4px 3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); flex:none; }
.area-option[aria-checked="false"] .area-option-status { visibility:hidden; }
@media(max-width:900px) {
  body:is([data-page="resource"],[data-page="works"]) #sortBar.area-toolbar { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:8px 16px; }
  .area-toolbar > .sort-right { grid-column:1 / -1; width:100%; justify-content:flex-end; gap:4px; }
  .area-toolbar > .sort-left { gap:4px; }
  .area-switcher { width:min(312px,44vw); justify-self:end; }
  .area-menu { left:auto; right:0; transform:translateY(-7px) scale(.98); transform-origin:100% 0; }
  .area-menu.is-open { transform:translateY(0) scale(1); }
  .area-toolbar .sort-item { padding:5px 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .area-menu,.area-trigger,.area-trigger-arrow,.area-option { transition:none; }
}
@media(max-width:480px) {
  .area-trigger { font-size:14px; padding-left:16px; padding-right:38px; }
  .area-trigger-arrow { right:17px; }
  .area-option { padding-left:10px; padding-right:10px; }
  .area-option-copy strong { font-size:14px; }
  .area-toolbar .sort-label { font-size:12px; }
}