/* The appearance editor (character creation on the account page; the in-game cosmetics shop, v4 and v5): its layout
   only. The controls are dist/components.css's (r56 D, #322): buttons and the shared selected state, the fields (selects,
   colour and range inputs), the groups (option groups, head preview), the dialog (the shop), the primary Save. */
.appearance-editor{display:grid;grid-template-columns:minmax(320px,1.3fr) minmax(290px,1fr);gap:calc(var(--ui-space-xl) + var(--ui-space-md));
  text-align:left;align-items:start}
.appearance-editor figure{margin:0;min-width:0;position:sticky;top:0}
.appearance-editor canvas{width:100%;height:clamp(350px,51vh,580px);display:block;touch-action:none;border:var(--ui-border) solid var(--ui-line);
  border-radius:var(--ui-radius-md);background:var(--ui-surface-1)}
.appearance-editor figcaption{font-size:var(--ui-fs-lg);text-align:center;color:var(--ui-text-muted);margin:var(--ui-space-md) 0}
.appearance-editor label{margin:var(--ui-space-lg) 0;font-size:var(--ui-fs-num)}
.appearance-controls{max-height:calc(94dvh - 180px);overflow:auto;position:relative;scroll-padding-top:64px;padding:0 var(--ui-space-md) var(--ui-space-lg) 0}
.appearance-sections{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:var(--ui-space-sm);padding:0 0 var(--ui-space-lg);background:var(--ui-glass-strong);z-index:2}
.appearance-sections button{flex:1 1 calc(33% - 6px);min-width:0;min-height:var(--ui-h-md);padding:var(--ui-space-md) var(--ui-space-xs);font-size:var(--ui-fs-lg)}
.appearance-colour{display:flex;gap:var(--ui-space-md);align-items:center}
.appearance-colour input[type=color]{width:48px;flex:none;align-self:stretch;margin-top:var(--ui-space-sm)}
.cosmetics-dialog{width:min(1180px,96vw);max-width:96vw;max-height:94dvh;box-sizing:border-box;overflow:auto;
  padding:calc(var(--ui-space-xl) + var(--ui-space-xs)) calc(var(--ui-space-xl) + var(--ui-space-md))}
.cosmetics-dialog header{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-xl)}
.cosmetics-dialog header h2{margin:0;font-size:var(--ui-fs-display)}
.cosmetics-dialog>p{margin:var(--ui-space-md) 0 calc(var(--ui-space-xl) + var(--ui-space-sm));font-size:var(--ui-fs-num)}
.appearance-footer{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--ui-space-xl) + var(--ui-space-sm));position:sticky;bottom:-20px;
  background:var(--ui-glass-strong);border-top:var(--ui-border) solid var(--ui-line);padding:var(--ui-space-lg) 0 var(--ui-space-xs);margin-top:var(--ui-space-lg)}
.appearance-footer p{margin:0;flex:1}
.appearance-footer button{min-height:var(--ui-h-md);padding:var(--ui-space-lg) calc(var(--ui-space-xl) + var(--ui-space-md));font-weight:var(--ui-fw-strong)}
.title-screen:has(#character-create:not([hidden])){width:min(1180px,96vw)}
.head-preview{margin:var(--ui-space-lg) 0 0;padding:var(--ui-space-md) var(--ui-space-lg)}
.head-preview summary{cursor:pointer;padding:var(--ui-space-xs) 0}
.head-preview input[type=checkbox]{width:auto;margin:0 var(--ui-space-sm) 0 0}
.head-preview label:has(input[type=checkbox]){margin:var(--ui-space-xs) var(--ui-space-lg) var(--ui-space-xs) 0;font-size:var(--ui-fs-md)}
.head-preview-views{display:flex;gap:var(--ui-space-sm);flex-wrap:wrap;margin-top:var(--ui-space-md)}
.head-preview-views button{min-height:var(--ui-h-sm);padding:var(--ui-space-md) var(--ui-space-lg);font-size:var(--ui-fs-lg)}
@media(max-width:720px){.appearance-editor{grid-template-columns:1fr;gap:var(--ui-space-xl)}
  .appearance-editor figure{position:static}
  .appearance-editor canvas{height:340px}
  .appearance-controls{max-height:none;overflow:visible}
  .appearance-sections{position:static}
  .cosmetics-dialog{padding:var(--ui-space-xl)}
  .appearance-footer{bottom:-16px}
  .appearance-group{padding:var(--ui-space-md) var(--ui-space-lg)}}
.appearance-group[hidden]{display:none}
.appearance-stepper{display:flex;align-items:stretch;gap:var(--ui-space-xs);min-width:0;flex:1;margin-top:var(--ui-space-sm)}
.appearance-stepper select{min-width:0;margin-top:0;flex:1}
.appearance-stepper button{width:36px;flex:none;padding:0;font-size:var(--ui-fs-display);line-height:1}
.appearance-random{display:flex;gap:var(--ui-space-md);margin:var(--ui-space-xs) 0 var(--ui-space-lg)}
.appearance-random button{min-height:var(--ui-h-sm);padding:var(--ui-space-md) var(--ui-space-lg);font-size:var(--ui-fs-lg)}
/* The modal owns a fixed viewport; only its option pane scrolls. */
html:has(.cosmetics-dialog[open]),body:has(.cosmetics-dialog[open]){overflow:hidden;overscroll-behavior:none}
.cosmetics-dialog{height:min(900px,94dvh);overflow:hidden;overscroll-behavior:contain}
.cosmetics-dialog[open]{display:flex;flex-direction:column}
.cosmetics-dialog>header,.cosmetics-dialog>p,.cosmetics-dialog>.appearance-footer{flex:none}
.cosmetics-dialog>[data-editor]{flex:1;min-height:0;align-items:stretch}
.cosmetics-dialog .appearance-editor figure{position:static;display:flex;flex-direction:column;min-height:0}
.cosmetics-dialog .appearance-editor canvas{height:0;min-height:0;flex:1}
.cosmetics-dialog .appearance-controls{min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
.cosmetics-dialog .appearance-footer{position:static;margin-top:var(--ui-space-lg);padding-bottom:0}
@media(max-width:720px){.cosmetics-dialog>[data-editor]{grid-template-rows:minmax(260px,1fr) minmax(150px,.8fr);gap:var(--ui-space-lg)}
  .cosmetics-dialog .appearance-sections{position:sticky}
  .cosmetics-dialog .head-preview{margin-top:var(--ui-space-sm);padding:var(--ui-space-xs)}
  .cosmetics-dialog .head-preview-views{gap:var(--ui-space-xs);margin-top:var(--ui-space-xs)}
  .cosmetics-dialog .head-preview-views button{padding:var(--ui-space-xs) var(--ui-space-sm);font-size:var(--ui-fs-sm)}
  .cosmetics-dialog .appearance-editor figcaption{margin:var(--ui-space-xs) 0;font-size:var(--ui-fs-sm)}
  .cosmetics-dialog>p{margin-bottom:var(--ui-space-lg)}}
/* Global presentation and whole-look randomisation stay above the option tabs. */
.appearance-toolbar{position:sticky;top:0;z-index:2;background:var(--ui-glass-strong);padding-bottom:var(--ui-space-lg)}
.appearance-toolbar .appearance-sections{position:static;padding-bottom:0}
.appearance-identity{display:flex;align-items:end;gap:var(--ui-space-md);flex-wrap:wrap;margin-bottom:var(--ui-space-lg)}
.appearance-identity>label{flex:1;min-width:110px;margin:0}
.appearance-identity>button{min-height:var(--ui-h-md);padding:var(--ui-space-md) var(--ui-space-lg);font-size:var(--ui-fs-lg)}
.appearance-editor[data-detail=simple] [data-advanced]{display:none}
.appearance-editor label[hidden]{display:none}
/* Character creation (Joseph, 29 Sep): no scrolling past the title, and every options section button visible (they
   wrap instead of overflowing). */
.title-screen:has(#character-create:not([hidden])){padding:var(--ui-space-sm) 0}
.title-screen:has(#character-create:not([hidden])) .game-title h1{font-size:clamp(var(--ui-fs-display),3vw,var(--ui-fs-hero));margin:var(--ui-space-2xs) 0;letter-spacing:.06em}
.title-screen:has(#character-create:not([hidden])) .game-title h1 br{display:none}
.title-screen:has(#character-create:not([hidden])) .game-title>p:last-child{margin:var(--ui-space-2xs) 0 var(--ui-space-lg);font-size:var(--ui-fs-md)}
.title-screen:has(#character-create:not([hidden])) .login-frame{padding-top:var(--ui-space-lg)}
#character-create>h2{margin:0 0 var(--ui-space-sm)}
#character-form{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--ui-space-xl)}
#character-form>*{grid-column:1/-1}
#character-form>label{grid-column:auto;margin:var(--ui-space-xs) 0}
#character-form>p.quiet{margin:var(--ui-space-xs) 0}
#character-form .appearance-editor canvas{height:clamp(280px,calc(100vh - 420px),560px);height:clamp(280px,calc(100dvh - 420px),560px)}
#character-form .appearance-controls{max-height:calc(100vh - 330px);max-height:calc(100dvh - 330px)}
@media(max-width:720px){#character-form{grid-template-columns:1fr}
  #character-form .appearance-editor canvas{height:320px}
  #character-form .appearance-controls{max-height:none}}
/* Landscape phones (r56 D: the editor was wider than the card, its controls cut off). While creating a character, the
   card takes the whole width: the title is one line above it and the footer waits (both return once the character
   exists); the editor's two columns may shrink to fit. */
@media (orientation:landscape) and (max-height:500px){
  .title-screen:has(#character-create:not([hidden])){display:block;width:calc(100% - 20px)}
  .title-screen:has(#character-create:not([hidden])) .game-title>p:last-child,
  .title-screen:has(#character-create:not([hidden]))>footer{display:none}
  .title-screen:has(#character-create:not([hidden])) .game-title h1{font-size:var(--ui-fs-h2);margin:0 0 var(--ui-space-sm)}
  .title-screen:has(#character-create:not([hidden])) .login-frame{max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px)}
  #character-form .appearance-editor{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--ui-space-lg)}
  #character-form .appearance-controls{max-height:none;overflow:visible}
  /* the shop: the whole screen; the preview keeps a usable height beside its options; no intro line (no help lines) */
  .cosmetics-dialog{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;margin:0;border-radius:0;
    padding:var(--ui-space-md) calc(var(--ui-space-lg) + var(--safe-r,0px)) var(--ui-space-md) calc(var(--ui-space-lg) + var(--safe-l,0px))}
  .cosmetics-dialog>p,.cosmetics-dialog .appearance-editor figcaption{display:none}
  .cosmetics-dialog header h2{font-size:var(--ui-fs-h3)}
  .cosmetics-dialog>[data-editor]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;gap:var(--ui-space-lg);margin-top:var(--ui-space-sm)}
  .cosmetics-dialog .appearance-editor canvas{min-height:120px}
  .cosmetics-dialog .appearance-footer{margin-top:var(--ui-space-sm);padding-top:var(--ui-space-sm)}}