/* css/screens/settings.css — Grand Mumtoz Director · Settings («Настройки / Sozlamalar», DESIGN-screen-misc §5.9)
   Calm page: preview postcard hero → identity → ledger groups (hairline rows on the page ground) → foot. Tokens only. */

.set { display: flex; flex-direction: column; gap: 4px; max-width: 640px; margin: 0 auto; }

/* ---- hero: preview postcard (repaints itself through the tokens; gleam sweep on theme/lang change) */
.set-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 8px; }
.set-hero__cap { text-align: center; }
.set-preview { position: relative; width: min(100%, 320px); aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  background: var(--bg-1); background-image: var(--lamp); border: 1px solid var(--line-strong); border-top-color: var(--line-gold); box-shadow: var(--shadow-2);
  display: grid; grid-template-rows: auto 1fr auto auto; padding: 10px 14px 8px; gap: 6px; transition: background-color var(--t-med), border-color var(--t-med); }
.set-preview__bar { display: flex; align-items: center; gap: 8px; }
.set-preview__mono { font: 600 12px/16px var(--font-display); color: var(--accent); letter-spacing: .08em; border: 1px solid var(--line-gold); border-radius: var(--r-xs); padding: 0 4px; }
.set-preview__title { font: 600 13px/16px var(--font-display); color: var(--text-1); flex: 1; }
.set-preview__bell { position: relative; width: 10px; height: 10px; border: 1.5px solid var(--text-3); border-radius: 4px 4px 2px 2px; }
.set-preview__bell i { position: absolute; top: -3px; right: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.set-preview__hero { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.set-preview__clock { font: 600 30px/32px var(--font-display); color: var(--text-1); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.set-preview__greet { font: 500 11px/14px var(--font-ui); color: var(--text-2); }
.set-preview__line { font: 500 9px/12px var(--font-ui); color: var(--text-3); }
.set-preview__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.set-preview__tile { height: 22px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-2); font: 700 9px/20px var(--font-ui); color: var(--text-2); text-align: center; font-variant-numeric: tabular-nums; }
.set-preview__tile.is-busy { background: var(--st-busy-bg); color: var(--st-busy-ink); border-color: var(--st-busy-line); }
.set-preview__tile.is-dirty { background: var(--st-dirty-soft); color: var(--st-dirty); border-color: var(--st-dirty); }
.set-preview__tile.is-cleaning { background: var(--st-cleaning-soft); color: var(--st-cleaning); border-color: var(--st-cleaning); }
.set-preview__nav { position: relative; display: flex; justify-content: space-around; align-items: center; height: 14px; margin: 0 -14px -8px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--bg-1); }
.set-preview__nav i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); opacity: .6; }
.set-preview__nav i.is-on { background: var(--accent); opacity: 1; }
.set-preview__bead { position: absolute; left: 10%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-strong); box-shadow: var(--bead-glow, 0 0 8px rgba(201,164,92,.5)); animation: setBeadPulse 4s ease-in-out infinite; }
.set-preview__gleam { position: absolute; inset: -20% -40%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 232, 196, .18) 50%, transparent 60%); transform: translateX(-60%); }
.set-preview.is-sweep .set-preview__gleam { animation: setGleam 520ms var(--e-velvet) forwards; }
.set-preview.is-still .set-preview__bead { animation: none; }
@keyframes setGleam { 0% { opacity: 0; transform: translateX(-60%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }
@keyframes setBeadPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* ---- identity line */
.set-id { display: flex; align-items: center; gap: 12px; padding: 8px 4px 12px; }
.set-id__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.set-id__name { font: 600 20px/24px var(--font-display); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-id .hstack { flex-wrap: wrap; }

/* ---- ledger groups */
.set-group { margin-top: 14px; }
.set-group__head { display: flex; align-items: center; gap: 12px; padding: 0 4px 2px; }
.set-group__head .overline { margin: 0; flex: none; }
.set-orn { flex: 1; height: 8px; color: var(--accent); opacity: .7; min-width: 40px; }
.set-group__rows { display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; font: inherit; }
.set-row:last-child { border-bottom: 0; }
button.set-row { cursor: pointer; border-radius: var(--r-sm); transition: background-color var(--t-micro); }
button.set-row:active { background: var(--bg-3); }
@media (hover: hover) { button.set-row:hover { background: var(--bg-2); } }
.set-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row__label { font: 500 14px/20px var(--font-ui); color: var(--text-1); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.set-row__tag { height: 18px; font-size: 10px; }
.set-row__cap { font: 500 12px/16px var(--font-ui); color: var(--text-3); transition: color var(--t-short); }
.set-row.is-warn .set-row__cap { color: var(--warning); }
/* Wi-Fi отеля (владелец, 22.09.2026) */
.set-wifi { display: flex; flex-direction: column; gap: 10px; }
.set-wifi__now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.set-wifi__ip { font: 700 16px/22px var(--font-ui); }
.set-wifi__list { display: flex; flex-direction: column; gap: 2px; }
.set-wifi__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; }
.set-wifi__row + .set-wifi__row { border-top: 1px solid var(--line); }
.set-wifi__del { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.set-wifi__hint { color: var(--text-2); }
.set-row__ctl { flex-shrink: 0; display: flex; align-items: center; gap: 8px; max-width: 60%; }
.set-row--diag .set-row__ctl { max-width: 52%; }
.set-diag__text { font: 500 12px/16px var(--font-mono); color: var(--text-2); text-align: right; white-space: normal; }
.set-push__extra { display: flex; flex-direction: column; gap: 10px; padding: 4px 4px 12px; border-bottom: 1px solid var(--line); }
.set-push__extra[hidden] { display: none; }
.set-push__kinds { display: flex; flex-direction: column; gap: 6px; }
.set-push__test { display: flex; }

/* ---- foot */
.set-foot { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding-bottom: 8px; }
.set-foot__v { text-align: center; color: var(--text-3); }

/* ---- what's new sheet */
.set-news { list-style: none; margin: 0; padding: 4px 0; display: flex; flex-direction: column; gap: 10px; }
.set-news__item { display: flex; gap: 12px; align-items: flex-start; font: 400 14px/20px var(--font-ui); color: var(--text-1); animation: setNewsIn 320ms var(--e-enter) both; animation-delay: calc(var(--i, 0) * 50ms); }
.set-news__dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@keyframes setNewsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- desktop: two-column ledger in a 640 px column, preview to the side of the identity line */
@media (min-width: 900px) and (min-height: 521px) {
  .set { max-width: 680px; gap: 0; }
  .set-hero { flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 20px; padding: 4px 4px 12px; }
  .set-hero__cap { text-align: left; max-width: 200px; }
  .set-preview { width: 340px; }
  .set-row { display: grid; grid-template-columns: minmax(200px, 42%) 1fr; gap: 16px; padding: 8px 12px; }
  .set-row__ctl { justify-self: end; max-width: 100%; }
  .set-row--diag .set-row__ctl { max-width: 100%; }
  .set-push__extra { padding-left: 12px; padding-right: 12px; }
  .set-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .set-foot .btn--block { width: auto; }
}

/* ---- reduced motion */
html[data-motion="reduced"] .set-preview__bead, html[data-motion="reduced"] .set-preview.is-sweep .set-preview__gleam, html[data-motion="reduced"] .set-news__item { animation: none; }
@media (prefers-reduced-motion: reduce) { .set-preview__bead, .set-preview.is-sweep .set-preview__gleam, .set-news__item { animation: none; } }