/* Native radio choices keep the appearance setting usable with a keyboard. */
.theme-settings { max-width: 960px; }
.theme-settings > p { color: var(--ink-2); }
.theme-options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  min-width: 0; margin: 22px 0 0; padding: 0; border: 0;
}
.theme-options > legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
.theme-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 5px 9px;
  min-width: 0; margin: 0; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius);
  color: var(--ink); background: var(--panel); cursor: pointer;
}
.theme-option:hover { border-color: var(--ink-3); }
.theme-option:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.theme-option:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.theme-option input[type="radio"] { grid-column: 1; grid-row: 2; margin: 5px 0 0; width: 16px; height: 16px; accent-color: var(--blue); }
.theme-option-name { grid-column: 2; grid-row: 2; font-size: 15px; font-weight: 600; align-self: center; }
.theme-option-description { grid-column: 2; grid-row: 3; color: var(--ink-2); font-size: 13px; font-weight: 400; line-height: 1.4; }
.theme-swatch {
  --swatch-page: #e9edf2; --swatch-side: #15233b; --swatch-panel: #fff;
  --swatch-line: #d9dfe7; --swatch-ink: #8592a5;
  display: grid; grid-template-columns: 22% minmax(0, 1fr); grid-column: 1 / -1; grid-row: 1;
  height: 112px; margin-bottom: 8px; overflow: hidden; border: 1px solid var(--swatch-line);
  border-radius: 6px; background: var(--swatch-page);
}
.theme-swatch-dark {
  --swatch-page: #181818; --swatch-side: #222; --swatch-panel: #303030;
  --swatch-line: #484848; --swatch-ink: #a3a3a3;
}
.theme-swatch-blue {
  --swatch-page: #101a28; --swatch-side: #15233b; --swatch-panel: #24354c;
  --swatch-line: #3c4e68; --swatch-ink: #91a4bf;
}
.theme-swatch-side { display: block; position: relative; background: var(--swatch-side); }
.theme-swatch-side::before, .theme-swatch-side::after {
  content: ""; position: absolute; left: 24%; right: 24%; height: 3px; border-radius: 2px;
  background: #fff; opacity: .45;
}
.theme-swatch-side::before { top: 22px; box-shadow: 0 13px 0 #fff, 0 26px 0 #fff; }
.theme-swatch-side::after { top: 70px; }
.theme-swatch-main { display: block; min-width: 0; padding: 12px; }
.theme-swatch-top { display: block; width: 55%; height: 5px; margin: 2px 0 12px; border-radius: 2px; background: var(--swatch-ink); }
.theme-swatch-card { display: block; height: 56px; border: 1px solid var(--swatch-line); border-radius: 4px; background: var(--swatch-panel); }
.theme-selection-status { min-height: 22px; margin: 18px 0 0; font-size: 14px; }
.theme-note { margin-bottom: 0; font-size: 13px; }
@media (max-width: 780px) {
  .theme-options { grid-template-columns: minmax(0, 1fr); }
  .theme-option { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .theme-swatch { height: 108px; }
}