/* Chrome palettes are screen-only. Music, selection gold and playback green stay semantic. */
@media screen {

  .appearance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-block:12px 18px; }
  #dialog .appearance-choice { display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:7px; min-width:0; min-height:110px; padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--canvas); color:var(--ink); text-align:left; white-space:normal; }
  #dialog .appearance-choice:hover { border-color:var(--line); background:var(--surface); }
  #dialog .appearance-choice[aria-pressed=true] { border-color:var(--selection); box-shadow:inset 0 0 0 1px var(--selection); }
  #dialog .appearance-choice:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .appearance-swatches { display:flex; gap:4px; min-height:19px; margin-bottom:2px; }
  .appearance-swatches > span { display:block; width:20px; height:19px; border:1px solid color-mix(in srgb,var(--ink) 15%,transparent); border-radius:5px; }
  .appearance-name { color:var(--ink); font-size:12px; font-weight:600; line-height:1.4; }
  .appearance-description { color:var(--muted); font-size:11px; line-height:1.45; }
  /* Workspace: palettes take the full width; the three layout/playback choices share one row beneath. */
  #dialog .workspace-preferences { grid-template-columns:minmax(0,1fr); gap:14px; }
  #dialog .workspace-preferences .appearance-grid { grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); margin-bottom:4px; }
  #dialog .workspace-preferences .appearance-choice { min-height:96px; }
  #dialog .workspace-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); align-items:end; gap:12px 18px; padding-top:14px; border-top:1px solid var(--border); }
  #dialog .workspace-options .field { min-width:0; margin:0; }
  #dialog .workspace-options .field select { width:100%; }
  #dialog .workspace-options > label { display:flex; align-items:center; gap:9px; min-height:37px; color:var(--ink); font-size:12px; }
}
@media screen and (max-width:560px) { .appearance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #dialog .appearance-choice { min-height:110px; padding:11px; } }