/* ============================================================
   SETTINGS APP — Reference-matched styles
   Mirrors https://antons-phone.pages.dev/ Settings app
   Shared styles are in apps-system.css
   ============================================================ */

/* Main view uses .view.grouped from apps-system.css */
/* Header/nav handled by layout.css */

/* Settings-specific styles only (overrides/additions to shared) */

.view[data-view^="settings-"] .set-ico {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.view[data-view^="settings-"] .set-ico svg {
  width: 19px;
  height: 19px;
}
.view[data-view^="settings-"] .set-tick {
  color: var(--blue);
  width: 22px;
  height: 22px;
  display: inline-flex;
}
.view[data-view^="settings-"] .set-tick svg {
  width: 22px;
  height: 22px;
}
.view[data-view^="settings-"] .row-sub .chev {
  display: inline-block;
  vertical-align: -1px;
  margin-left: 4px;
}
.view[data-view^="settings-"] .row-main > span:first-child {
  font-size: 17px;
}
.view[data-view^="settings-"] .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  flex-wrap: nowrap;
}
.view[data-view^="settings-"] .nav {
  display: block;
}

.view.grouped[data-view="settings-main"] .group .switch.on,
.view.grouped[data-view="settings-darkmode"] .group .switch.on { pointer-events: auto; }