/* Settings > Appearance: the colour is the whole look. Each palette is a small card drawn in its own
   colours (whatever palette is active), so the choice can be seen before it is made. The page itself
   recolours through body[data-theme] (tokens.css). */
.appearance-scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.palette-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
  max-width: 660px;
  margin-top: 26px;
}
.palette-card[data-palette="gold"] { --pc-bg: #101011; --pc-raised: #202022; --pc-accent: var(--gold); }
.palette-card[data-palette="aurora"] { --pc-bg: #101b1b; --pc-raised: #213131; --pc-accent: #60c5ba; }
.palette-card[data-palette="ember"] { --pc-bg: #1a1518; --pc-raised: #30272b; --pc-accent: #e79a76; }
.palette-card[data-palette="crimson"] { --pc-bg: #151317; --pc-raised: #29262c; --pc-accent: #e36773; }
.palette-card[data-palette="ice"] { --pc-bg: #11191e; --pc-raised: #213037; --pc-accent: #81cbe4; }
.palette-card[data-palette="violet"] { --pc-bg: #19151c; --pc-raised: #2e2731; --pc-accent: #c6a4da; }
.palette-card {
  display: grid;
  gap: 10px;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
  text-align: left;
}
.palette-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-card);
  background: radial-gradient(90% 80% at 90% 0%, color-mix(in srgb, var(--pc-accent) 24%, transparent), transparent 70%), var(--pc-bg);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: transform var(--motion-card) var(--ease), box-shadow var(--motion-card) var(--ease);
}
/* The gold line in miniature: the logo's capsule, a selected tab and a card with its progress. */
.palette-preview::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 16%;
  width: 4px;
  height: 18%;
  border-radius: 99px;
  background: var(--pc-accent);
  box-shadow: 14px 3px 0 -1px rgb(255 255 255 / .5), 40px 3px 0 -1px rgb(255 255 255 / .25);
}
.palette-preview::after {
  content: "";
  position: absolute;
  left: 12%;
  bottom: 14%;
  width: 46%;
  height: 34%;
  border-radius: 6px;
  background: linear-gradient(var(--pc-accent), var(--pc-accent)) left bottom / 62% 3px no-repeat, var(--pc-raised);
}
.palette-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.palette-name svg {
  width: 16px;
  height: 16px;
  color: var(--pc-accent);
  opacity: 0;
}
.palette-card:is(:hover, :focus-visible) {
  outline: none;
  color: var(--text);
}
.palette-card:is(:hover, :focus-visible):not(:disabled) .palette-preview {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--pc-accent);
}
.palette-card[aria-checked="true"] {
  color: var(--text);
  font-weight: 700;
}
.palette-card[aria-checked="true"] .palette-preview {
  box-shadow: inset 0 0 0 2px var(--pc-accent), 0 12px 28px -12px var(--pc-accent);
}
.palette-card[aria-checked="true"] .palette-name svg {
  opacity: 1;
}
.palette-card:disabled {
  cursor: default;
  opacity: .55;
}
.appearance-status {
  min-height: 1.4em;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 600px) {
  .palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}