/* «Настройки» (SET-01; SET-02 убран 21.10) — префикс .set-, только токены tokens.css.
   Дизайн-проход 22.10: группы — тонированные секции ядра (h.section({tone, wave, icon, eyebrow})): оформление lavender, напоминание peach,
   мои данные mint, поддержка cream. Свои волны/фоны не рисуем — только раскладка внутри полос. */

/* полосы чуть плотнее, чем на лентах: короткий служебный экран */
.set-sheet > .set-group { --band-pad: 28px; }
.set-sheet > .set-head + .set-group { margin-top: calc(var(--s-4) + var(--wave-h)); }
.set-group .ld-section__head { margin-bottom: var(--s-3); }
.set-group .ld-section__body > * + * { margin-top: var(--s-2); }

/* логотип над шапкой (правки v3, С1) — слева сверху, под системной строкой */
.set-brand { padding: var(--s-1) var(--s-1) 0; }
.set-sheet > .set-brand + .set-head { padding-top: var(--s-3); }

/* шапка с персонажем */
.set-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-1) 0; }
.set-head__text { min-width: 0; }
.set-head__title { margin-top: 2px; }
.set-head__lead { margin-top: var(--s-1); font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }

/* карточки внутри полос */
.set-group__note { margin: var(--s-2) var(--s-1) 0; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.set-card { overflow: hidden; }
.set-card > * + * { border-top: 1px solid var(--line); }
.set-card__pad { padding: var(--s-3); }
.set-card__foot { padding: var(--s-1) var(--s-2); }

/* выбор темы: плитки прямо на лавандовой полосе. «Автоматически по времени» во всю ширину, под ней три плитки.
   Выбранная — закатный градиент, иконка в кружке; только что нажатая «переворачивается» с отскоком, иконка проворачивается (.is-pop) */
.set-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.set-theme .pick__opt { position: relative; overflow: hidden; flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 6px;
  border-radius: calc(var(--r-1) - 6px); text-align: center; font-size: var(--fs-2); line-height: 18px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--card-border), var(--sh-1); transform-style: preserve-3d; }
.set-theme .pick__text { align-items: center; }
.set-theme .pick__opt > .ic { box-sizing: content-box; padding: 8px; border-radius: 50%; background: var(--card-lavender); color: var(--acc-violet-ink); transition: background-color .2s, color .2s; }
.set-theme .pick__opt[aria-pressed="true"] { background: linear-gradient(135deg, var(--fill-a), var(--fill-b)); color: var(--on-fill);
  box-shadow: 0 12px 24px -12px var(--acc-orange); }
.set-theme .pick__opt[aria-pressed="true"] > .ic { background: var(--on-fill); color: var(--fill-a); }
.set-theme .pick__opt[aria-pressed="true"] .pick__sub { color: var(--on-fill); }
.set-theme .pick__opt[aria-pressed="true"]::after { content: ""; position: absolute; right: -28px; top: -28px; width: 84px; height: 84px; border-radius: 50%;
  background: var(--on-fill); opacity: .08; pointer-events: none; }
.set-theme .pick__opt:first-child { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; gap: var(--s-3); min-height: 68px; padding: 10px 16px; text-align: left; }
.set-theme .pick__opt:first-child .pick__text { align-items: flex-start; }
.set-theme .pick__opt:first-child .pick__label { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.set-theme .pick__opt.is-pop[aria-pressed="true"] { animation: set-flip .7s cubic-bezier(.3, 1.4, .5, 1) both; }
.set-theme .pick__opt.is-pop[aria-pressed="true"] > .ic { animation: set-ic .8s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
@keyframes set-flip { 0% { transform: perspective(600px) rotateY(-28deg) scale(.92); } 55% { transform: perspective(600px) rotateY(6deg) scale(1.04); }
                      100% { transform: none; } }
@keyframes set-ic   { 0% { transform: rotate(-120deg) scale(.4); } 65% { transform: rotate(12deg) scale(1.15); } 100% { transform: none; } }
.is-shot .set-theme .pick__opt.is-pop, .is-shot .set-theme .pick__opt.is-pop > .ic { animation: none; }

/* строка «Напоминание» с полем времени */
.set-row { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-4); }
.set-row__ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--card-peach-ic); color: var(--card-peach-ic-on);
  box-shadow: 0 8px 16px -8px var(--card-peach-ic); }
.set-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-row__text b { font-size: var(--fs-3); line-height: 22px; font-weight: var(--fw-semibold); }
.set-row__text span { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.set-time { flex: none; height: var(--tap); min-width: 104px; border: 0; border-radius: var(--r-pill); padding: 0 14px; background: var(--field); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: var(--fs-3); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color-scheme: light; }
[data-theme="dark"] .set-time { color-scheme: dark; }
.set-time:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.set-saved--time { margin: var(--s-2) 0 0; }
.set-saved--time.is-pop { animation: set-saved .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes set-saved { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }

/* мои данные (21.10): форма + «Ещё в приложении» */
.set-form { padding: var(--s-3) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.set-select { position: relative; display: block; }
.set-select__el { width: 100%; appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.set-select > .ic { position: absolute; right: 14px; top: 50%; margin-top: -10px; transform: rotate(90deg); color: var(--ink-3); pointer-events: none; }
.set-err { margin: 0; font-size: var(--fs-2); line-height: var(--lh-2); color: var(--danger); }
.set-saved { margin: calc(-1 * var(--s-1)) 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-2); line-height: var(--lh-2);
  font-weight: var(--fw-semibold); color: var(--success); }
.set-saved[hidden] { display: none; }
.set-known { padding: var(--s-3) 0 var(--s-2); }
.set-known__title { padding: 0 var(--s-4); font-size: var(--fs-1); line-height: var(--lh-1); font-weight: var(--fw-semibold); letter-spacing: var(--caps-track); text-transform: uppercase; color: var(--ink-3); }
.set-data { margin: 0; padding: var(--s-1) 0 0; list-style: none; }
.set-data li { display: flex; align-items: flex-start; gap: var(--s-3); padding: 8px var(--s-4); }
.set-data .ic { margin-top: 2px; color: var(--acc-mint-ink); }
.set-data__t { min-width: 0; display: flex; flex-direction: column; }
.set-data__k { font-size: var(--fs-2); line-height: var(--lh-2); color: var(--ink-2); }
.set-data__v { font-size: var(--fs-3); line-height: 22px; color: var(--ink); }

.set-version { margin: var(--s-6) 0 0; text-align: center; font-size: var(--fs-1); line-height: var(--lh-1); color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .set-theme .pick__opt, .set-theme .pick__opt > .ic, .set-saved--time { animation: none !important; }
}