/* These density settings only affect the character catalogue. */
.catalog-display-controls{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px 20px;margin-top:9px}
.catalog-display-controls>.sort-control{margin-left:0}
.catalog-layout-group{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}
.catalog-layout-label{font-size:12px;color:#63777f;margin-right:2px}
.catalog-layout-button{min-height:34px;border:1px solid #b9cbd0;border-radius:6px;padding:6px 10px;background:#fff;color:#48616a;font:inherit;font-size:12px;line-height:1.35;white-space:nowrap;cursor:pointer}
.catalog-layout-button:hover{background:#eaf8f5;border-color:#289c91}
.catalog-layout-button[aria-pressed="true"]{background:#167f75;border-color:#116e66;color:#fff;box-shadow:0 2px 0 #0e5b54;font-weight:700}
.catalog-layout-button:focus-visible{outline:3px solid #e6af3a;outline-offset:3px}
#catalog-view[data-layout="standard"]{--catalog-card-width:135px;--catalog-card-gap:15px}
#catalog-view[data-layout="dense"]{--catalog-card-width:64px;--catalog-card-gap:6px}
#catalog-view[data-layout] .character-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--catalog-card-width)),1fr));gap:var(--catalog-card-gap)}
#catalog-view[data-layout="dense"] .card-content,#catalog-view[data-layout="dense"] .card-art .element-badge{display:none}
#catalog-view[data-layout="dense"] .character-card{border-radius:5px;border-bottom-width:1px;box-shadow:none}
#catalog-view[data-layout="dense"] .card-art{border-width:2px;border-radius:4px}
@media(max-width:640px){
  .catalog-layout-group{gap:5px}
  .catalog-layout-label{font-size:10px}
  .catalog-layout-button{font-size:11px;padding:6px 8px}
  #catalog-view[data-layout="standard"] .character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  #catalog-view[data-layout="dense"] .character-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
}