/*
 * settings.css — what only the settings screen looks like.
 *
 * The back row, heading, fields and stacked form are all the base
 * stylesheet's. `tally:change-password`/`tally:business-logo` (2026-09-20)
 * added several stacked forms sharing one screen for the first time, and
 * the logo picker — everything below is that.
 */

.settings-section + .settings-section {
  margin-block-start: 28px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--border);
}

.settings-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-block-end: 4px;
}

.settings-logo__preview {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--surface);
  border: 1px solid var(--border);
  flex: none;
}

.settings-logo__preview--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
  padding: 4px;
}

.settings-logo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}

.settings-logo__actions .btn {
  inline-size: auto;
  padding-inline: 16px;
}

/* ---- Chart theme picker, `tally:chart-themes` (2026-09-27) ---------------
 *
 * Three tappable cards rather than a select or a row of radio inputs — each
 * one is a small preview of the look it applies (a swatch in that theme's
 * own card background, with three dots in that theme's own line colours),
 * so choosing is recognising a look, not reading a label. */

.theme-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.theme-picker__option {
  flex: 1 1 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  min-block-size: 44px;
}

.theme-picker__option.is-selected {
  border-color: var(--accent);
}

.theme-picker__swatch {
  inline-size: 100%;
  block-size: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.theme-picker__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50%;
  flex: none;
}

.theme-picker__label {
  font-size: 0.8125rem;
  color: var(--text);
  font-weight: 500;
}

/* `tally:storage-warning` (2026-09-29) — photo storage used, owner only. */
.storage-meter {
  block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--border);
  overflow: hidden;
}
.storage-meter__fill { block-size: 100%; border-radius: inherit; background: var(--accent); }
.storage-meter.is-warning .storage-meter__fill { background: var(--amber); }
.storage-meter.is-critical .storage-meter__fill { background: var(--neg); }

/* ---- Permissions, `tally:permissions` (2026-09-30) ----------------------- */
.perm-card {
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.perm-card + .perm-card { margin-block-start: 10px; }
.perm-card > .perm-card__head, .perm-card__summary { padding: 12px 14px; }
.perm-card__summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  cursor: pointer;
}
.perm-card__summary::-webkit-details-marker { display: none; }
.perm-card__head { display: flex; align-items: center; gap: 12px; }
.perm-card__avatar {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.perm-card__who { display: flex; flex-direction: column; min-inline-size: 0; flex: 1 1 auto; }
.perm-card__name { font-weight: 600; overflow-wrap: anywhere; }
.perm-card__email { color: var(--text-muted); font-size: 0.8125rem; direction: ltr; text-align: end; overflow: hidden; text-overflow: ellipsis; }
.perm-card__role {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
}
.perm-card__role.is-owner { background: var(--accent-soft); color: var(--accent); }
.perm-card__sum { color: var(--text-muted); font-size: 0.8125rem; padding-inline-start: 48px; }
.perm-card__sum::after { content: ' ▾'; }
.perm-card[open] .perm-card__sum::after { content: ' ▴'; }
.perm-card__all { margin: 0; padding: 0 14px 12px 14px; padding-inline-start: 62px; color: var(--text-muted); font-size: 0.8125rem; }
.perm-card__body { padding: 4px 14px 14px; border-block-start: 1px solid var(--border); }
.perm-group__title { margin: 14px 0 4px; color: var(--text-muted); font-size: 0.75rem; font-weight: 600; }

.perm-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 48px;
  padding-block: 6px;
  cursor: pointer;
}
.perm-switch + .perm-switch { border-block-start: 1px solid var(--border); }
.perm-switch.is-locked { cursor: default; opacity: 0.55; }
.perm-switch__text { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; }
.perm-switch__label { font-size: 0.9375rem; }
.perm-switch__note { color: var(--text-muted); font-size: 0.75rem; }
.perm-switch__note:empty { display: none; }
.perm-switch__input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.perm-switch__track {
  position: relative;
  flex: none;
  inline-size: 44px;
  block-size: 26px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--text-muted) 35%, transparent);
  transition: background .15s ease;
}
.perm-switch__thumb {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: inset-inline-end .15s ease;
}
.perm-switch__input:checked + .perm-switch__track { background: var(--accent); }
.perm-switch__input:checked + .perm-switch__track .perm-switch__thumb { inset-inline-end: 21px; }
.perm-switch__input:focus-visible + .perm-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Business type (`tally:biz-types`, 2026-10-29) ------------------------ */
.biz-now { margin: 0; font-size: 1rem; }
.biz-now span { color: var(--text-muted); font-size: 0.875rem; }
.biz-points { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; line-height: 1.55; color: var(--text); }
.biz-log summary { cursor: pointer; color: var(--accent); font-size: 0.875rem; font-weight: 600; min-block-size: 36px; display: flex; align-items: center; }
.biz-log ul { margin: 4px 0 0; padding-inline-start: 18px; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.7; }
.biz-warn { margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--amber) 14%, transparent); font-size: 0.8125rem; line-height: 1.55; }
.biz-sheet .confirm-sheet__card { max-inline-size: 480px; max-block-size: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.biz-preview { display: flex; flex-direction: column; gap: 8px; }
.biz-preview:empty { display: none; }

/* Four designs: two by two on a phone, one row where they fit (`tally:liquid-design`). */
.theme-picker:has(> :nth-child(4)) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 560px) {
  .theme-picker:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* `tally:glass-level` — the glass clarity slider in Settings → עיצוב. */
.glass-slider__row { display: flex; align-items: center; gap: 12px; }
.glass-slider__end { flex: none; color: var(--text-muted); font-size: 0.8125rem; }
.glass-slider { flex: 1 1 auto; min-inline-size: 0; block-size: 32px; accent-color: var(--accent); cursor: pointer; touch-action: pan-y; }
.glass-slider__reset { align-self: flex-start; margin-block-start: 4px; }