/* Меню выбора оформления: общая механика поверх обоих наборов CSS. */
.appearance-menu { position: relative; display: inline-block; flex: 0 0 auto; }
.appearance-menu > summary { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 6px; list-style: none; cursor: pointer; white-space: nowrap; }
.appearance-menu > summary::-webkit-details-marker { display: none; }
.appearance-summary { margin-left: 4px; }
.appearance-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: 238px;
  padding: 12px;
}
.appearance-options { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.appearance-options button { min-height: 26px; padding: 3px 7px; cursor: pointer; }
.appearance-options button[aria-pressed="true"] { font-weight: 700; }
.appearance-palette { margin-top: 12px; }
.appearance-palette[hidden] { display: none; }

html[data-style="work"] .appearance-popover {
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #555;
  box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
}
html[data-style="work"] .appearance-options button {
  border: 1px solid #d3d3d3;
  background: linear-gradient(#fff, #f3f3f3);
  color: #555;
  font: 12px Arial, Helvetica, sans-serif;
}
html[data-style="work"] .appearance-options button[aria-pressed="true"] { border-color: #8aaec0; background: #eaf3f7; color: #357b9e; }

html[data-style="editorial"] .appearance-popover {
  border: 2px solid var(--manga-ink, #17130e);
  background: var(--manga-paper, #f4efe3);
  color: var(--manga-ink, #17130e);
  box-shadow: 5px 5px 0 var(--manga-spot, #c81738);
}
html[data-style="editorial"] .appearance-options button {
  border: 1px solid var(--manga-ink-soft, #5b5347);
  background: var(--manga-paper-deep, #e9e1d2);
  color: var(--manga-ink, #17130e);
  font: inherit;
}
html[data-style="editorial"] .appearance-options button[aria-pressed="true"] { border-color: var(--manga-spot, #c81738); background: var(--manga-spot, #c81738); color: var(--manga-paper, #f4efe3); }

@media (max-width: 760px) { .appearance-summary { display: none; } }
