/* PATCH 32 — live appearance editor beside card, achievements in their own panel. */
#trainerAccountContent.ta-account{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#trainerAccountContent .ta-appearance-workspace{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:18px;min-width:0}
#trainerAccountContent .ta-appearance-workspace > .lb-panel{min-width:0;margin:0}
#trainerAccountContent .ta-appearance-workspace > .ta-card-section{position:sticky;top:84px}
#trainerAccountContent .ta-appearance-workspace > .ta-cosmetics{grid-column:auto;display:flex;flex-direction:column;gap:0}
#trainerAccountContent .ta-appearance-workspace .ta-cosmetics-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:14px 0 18px}
#trainerAccountContent .ta-appearance-workspace .ta-cosmetics-controls label{min-width:0;display:flex;flex-direction:column;gap:8px}
#trainerAccountContent .ta-appearance-workspace .ta-cosmetics-controls select{width:100%;min-width:0;max-width:100%;text-overflow:ellipsis}
#trainerAccountContent .ta-appearance-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
#trainerAccountContent .ta-appearance-actions .button{min-height:42px}
#trainerAccountContent .ta-appearance-workspace #taCosmeticsStatus,#trainerAccountContent .ta-appearance-workspace #tcAppearanceStatus{margin:6px 0 0;line-height:1.45}
#trainerAccountContent #trainerProgressPanel{grid-column:1/-1}
#trainerAccountContent #tcRewardsPanel{grid-column:1/-1;min-width:0;margin:0}
#trainerAccountContent #tcRewardsPanel .tc-badge-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
#trainerAccountContent .ta-preview-card-button{display:none}
@media(max-width:980px){
  #trainerAccountContent .ta-appearance-workspace{grid-template-columns:1fr}
  #trainerAccountContent .ta-appearance-workspace > .ta-card-section{position:static}
  #trainerAccountContent .ta-preview-card-button{display:inline-flex}
}
@media(max-width:760px){
  #trainerAccountContent.ta-account{grid-template-columns:1fr}
  #trainerAccountContent #trainerProgressPanel,#trainerAccountContent #tcRewardsPanel,#trainerAccountContent .ta-appearance-workspace{grid-column:1}
}
@media(max-width:520px){
  #trainerAccountContent .ta-appearance-workspace .ta-cosmetics-controls{grid-template-columns:1fr;gap:13px}
}

/* PATCH 33 — full-width cosmetics editor on desktop.
   The account is a two-column grid, while appearanceWorkspace used to make its
   own nested two-column grid.  That trapped cosmetics in a half-width column.
   Flatten the wrapper for grid placement without moving controls or listeners. */
@media (min-width: 761px) {
  #trainerAccountContent.ta-account {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  #trainerAccountContent .ta-appearance-workspace {
    display: contents;
  }
  #trainerAccountContent .ta-appearance-workspace > .ta-card-section {
    grid-column: 1;
    grid-row: 1;
    position: static;
    min-width: 0;
  }
  #trainerAccountContent #trainerProgressPanel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  #trainerAccountContent .ta-appearance-workspace > #taCosmeticsPanel {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  #trainerAccountContent #tcRewardsPanel {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Use the extra desktop space for controls instead of leaving the right blank. */
@media (min-width: 1120px) {
  #trainerAccountContent .ta-appearance-workspace #taCosmeticsPanel .ta-cosmetics-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
    width: 100%;
  }
}

/* On narrow screens keep the live preview above the editor. */
@media (max-width: 760px) {
  #trainerAccountContent .ta-appearance-workspace {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  #trainerAccountContent .ta-appearance-workspace > #taCosmeticsPanel {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}