/* =============================================================================================
   Chrome and Settings: the menu (phone drawer and desktop sidebar, AppNavMenu) and the Settings
   screens (home, Devices, Edit profile, Blocked members, the alert and running-stats sheets).
   Mocks: Sidebar_Mobile, Sidebar_MobileAdmin, Sidebar_Desktop, Settings_Home, Settings_Devices.
   Plain CSS, linked after css/activation.css by Supwell/wwwroot/index.html (app) and
   Supwell.Web/Components/App.razor (web); Tailwind doesn't compile it, so no app.min.css rebuild.
   Unlayered on purpose: these are component classes, and an unlayered class beats MAUI's
   css/mobile.css h1-h3 sizes and the old global "nav a.active" yellow.
   Small muted copy (10-13px) uses --sw-ink-2-aa, the darkened muted that passes AA on white and
   on the cream ground (Phil 10/3: everywhere but the feed and marketplace).
   ============================================================================================= */

/* 1. MENU (AppNavMenu) ------------------------------------------------------------------------ */
.sw-drawer-scrim { background: var(--sw-scrim); }
.sw-drawer-panel {
  width: 288px; max-width: calc(100vw - 32px); height: 100%;
  border-radius: 0 25px 25px 0; background: var(--sw-card); overflow: hidden;
  box-shadow: var(--sw-shadow-pop);
}
.sw-sidebar { background: var(--sw-card); border-right: 1px solid var(--sw-line); }

.sw-nav { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; color: var(--sw-olive-2); font-family: var(--sw-font-inter); }
.sw-nav--drawer { padding-top: max(var(--sw-safe-t), 12px); }

.sw-nav__brand { flex: none; display: flex; align-items: center; height: 64px; padding: 0 20px; }
.sw-nav__logo { display: block; height: 40px; width: auto; }

.sw-nav__head { flex: none; display: flex; align-items: center; gap: 4px; padding: 8px 6px 10px 20px; border-bottom: .5px solid var(--sw-line-2); }
.sw-nav__head--bare { justify-content: flex-end; }
.sw-nav--desk .sw-nav__head { padding: 8px 20px 12px; }
.sw-nav__me { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sw-nav__me:hover, .sw-nav__me:visited { color: inherit; }
.sw-nav__me:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: 12px; }
.sw-nav__avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--sw-line); color: var(--sw-ink); font: 700 14px/1 var(--sw-font-inter);
}
.sw-nav__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-nav__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/18px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-nav__role { white-space: nowrap; font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2-aa); }
.sw-nav__close {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: #000; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-nav__close-disc { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sw-ground-2); }
.sw-nav__close:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -4px; border-radius: 50%; }

.sw-nav__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 8px; }
.sw-nav__label {
  margin: 16px 10px 6px; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking);
  text-transform: uppercase; color: var(--sw-ink-2-aa);
}
.sw-nav__body > .sw-nav__label:first-child { margin-top: 12px; }
.sw-nav__label--toggle { margin: 6px 0 0; }
.sw-nav__toggle {
  width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
  border: 0; border-radius: 12px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.sw-nav__toggle:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; }
.sw-nav__chev { transition: rotate var(--sw-dur) var(--sw-glide); }
.sw-nav__toggle[aria-expanded="true"] .sw-nav__chev { rotate: 180deg; }

.sw-nav__list { margin: 0; padding: 0; list-style: none; }
.sw-nav__list[hidden] { display: none; }
.sw-nav__item, .sw-nav__item:visited, .sw-nav__item:hover {
  width: 100%; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px;
  border: 0; border-radius: 12px; background: none; color: var(--sw-olive-2); text-align: left; text-decoration: none;
  font: 500 14px/26px var(--sw-font-inter); letter-spacing: var(--sw-tracking);
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--sw-dur-fast) ease;
}
.sw-nav--desk .sw-nav__item { height: 40px; }
.sw-nav__item .sw-cicon { flex: none; color: var(--sw-olive-2); }
.sw-nav__item.is-current { background: rgba(63, 69, 49, .08); font-weight: 600; }
.sw-nav__item.is-current .sw-cicon { stroke-width: 2; }
.sw-nav__item:active { background: rgba(63, 69, 49, .08); }
@media (hover: hover) { .sw-nav__item:hover { background: rgba(63, 69, 49, .05); } .sw-nav__item.is-current:hover { background: rgba(63, 69, 49, .08); } }
.sw-nav__item:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: -2px; }
.sw-nav__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-nav__badge, .sw-set__badge {
  flex: none; padding: 3px 8px; border-radius: 10px; background: var(--sw-olive); color: #fff;
  font: 600 11px/16px var(--sw-font-inter); letter-spacing: 0; white-space: nowrap;
}

.sw-nav__foot { flex: none; border-top: .5px solid var(--sw-line-2); padding: 6px 10px max(calc(var(--sw-safe-b) - 8px), 12px); }
.sw-nav--desk .sw-nav__foot { margin-top: auto; padding-bottom: 12px; }

/* 2. SETTINGS (shared by the home and its sub-pages) -------------------------------------------- */
.sw-set { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; padding: 8px 0 24px; color: var(--sw-ink); font-family: var(--sw-font-inter); }
.sw-set__titlerow { display: flex; align-items: center; min-height: 40px; }
.sw-set__title { margin: 0; font: 700 20px/24px var(--sw-font-head); letter-spacing: 0; color: var(--sw-olive-2); }
/* Desktop web shows the title in the top bar. */
@media (min-width: 1024px) { .sw-set__titlerow--web { display: none; } }

/* Sub-page header: MJ's 40px glass back disc and the 20px olive title (Settings_Devices). */
.sw-set__ph { min-height: 52px; padding: 0; }
.sw-set__ph .sw-icon-btn {
  width: 40px; height: 40px; border: 0; color: var(--sw-olive-2);
  background: linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .25) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .10);
}
.sw-set__ph .sw-ph__title { font: 700 20px/24px var(--sw-font-head); letter-spacing: 0; color: var(--sw-olive-2); }
.sw-set__intro { margin: 0; font: 500 12px/18px var(--sw-font-inter); color: var(--sw-olive-2); }

/* The box is the app's one card shell (.sw-surface on the element). */
.sw-set__card { padding: 14px 14px 2px; }
.sw-set__card--actions { padding: 2px 14px; }
.sw-set__card--pad { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sw-set__label {
  margin: 0; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking);
  text-transform: uppercase; color: var(--sw-ink-2-aa);
}

/* Account card (the seller-card pattern) */
.sw-set__account, .sw-set__account:visited, .sw-set__account:hover {
  display: flex; align-items: center; gap: 12px; padding: 14px; color: var(--sw-ink); text-decoration: none;   /* box: .sw-surface */
  -webkit-tap-highlight-color: transparent;
}
.sw-set__account:active { background: var(--sw-ground-2); }
.sw-set__account:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.sw-set__avatar {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--sw-line); color: var(--sw-ink); font: 700 14px/1 var(--sw-font-inter);
}
.sw-set__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-set__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/18px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-set__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2-aa); }

/* Rows: 18px olive icon, 14px title (12px sub), trailing value / tag / badge, sage chevron */
.sw-set__row, .sw-set__row:visited, .sw-set__row:hover {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 0; margin: 0;
  border: 0; border-bottom: .5px solid var(--sw-line-3); background: none; color: var(--sw-ink);
  text-align: left; text-decoration: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-set__row:last-child { border-bottom: 0; }
div.sw-set__row { cursor: default; }
a.sw-set__row:active, button.sw-set__row:active { opacity: .6; }
.sw-set__row:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: 4px; }
.sw-set__row:disabled { opacity: .45; cursor: default; }
.sw-set__icon { flex: none; color: var(--sw-olive-2); }
.sw-set__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-set__t { font: 500 14px/26px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-set__main--two .sw-set__t { line-height: 20px; }
.sw-set__sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2-aa); }
.sw-set__value { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2-aa); }
.sw-set__chev { flex: none; color: var(--sw-line-3); }
.sw-set__tag {
  flex: none; padding: 4px 8px; border-radius: var(--sw-r-xs); background: var(--sw-ground-2); white-space: nowrap;
  font: 700 10px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink);
}
.sw-set__tag--alert { background: var(--sw-line-3); color: #000; }
.sw-set__row--danger .sw-set__t, .sw-set__row--danger .sw-set__icon { color: #b84c41; }
.sw-set__skel { display: inline-block; width: 64px; height: 10px; border-radius: 5px; background: var(--sw-ground-2); }

/* Switch row (MJ's #F5F2EF well with the 40x26 switch) */
.sw-set__switch {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px;
  border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-ground-2);
}
.sw-set__switch-text { min-width: 0; display: flex; flex-direction: column; font: 14px/16px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-set__switch-text strong { font-weight: 700; }
.sw-set__switch-text span { margin-top: 2px; font-weight: 400; }

/* Footer: version (long-press for diagnostics). Text on the cream ground is olive ink for contrast. */
.sw-set__foot { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.sw-set__version {
  margin: 0; padding: 8px 12px; border: 0; background: none; cursor: default;
  font: 500 12px/18px var(--sw-font-inter); color: var(--sw-olive-2);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.sw-set__diag { display: flex; flex-direction: column; align-items: center; }
.sw-set__diag-url { margin: 0; font: 500 11px/16px var(--sw-font-mono); color: var(--sw-ink-2-aa); word-break: break-all; text-align: center; }
.sw-set__links { display: flex; gap: 16px; }
.sw-set__link {
  border: 0; background: none; padding: 13px 4px; cursor: pointer;
  font: 500 12px/18px var(--sw-font-inter); color: var(--sw-olive-2); text-decoration: underline;
}

/* Inline notice (a save that failed, a load that failed) */
.sw-set__note { margin: 0; padding: 10px 12px; border-radius: var(--sw-r-md); background: var(--sw-ground-2); font: 500 13px/18px var(--sw-font-inter); color: var(--sw-ink); }
.sw-set__note--error { background: rgba(184, 76, 65, .10); color: #b84c41; }
.sw-set__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 24px 24px; text-align: center; }
.sw-set__empty-t { margin: 0; font: 600 16px/22px var(--sw-font-inter); color: var(--sw-ink); }
.sw-set__empty-b { margin: 0; max-width: 300px; font: 500 13px/18px var(--sw-font-inter); color: var(--sw-ink-2-aa); }
.sw-set__cta {
  border: 0; border-radius: 12px; background: var(--sw-olive); color: #fff; padding: 10px 18px; cursor: pointer;
  font: 600 14px/20px var(--sw-font-inter); text-decoration: none;
}
.sw-set__cta:hover, .sw-set__cta:visited { color: #fff; }
.sw-set__cta:active { opacity: .8; }

/* Person rows (Blocked members) */
.sw-set__person { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--sw-line-3); }
.sw-set__person:last-child { border-bottom: 0; }
.sw-set__pill {
  flex: none; min-height: 36px; padding: 0 14px; border: 1px solid var(--sw-line); border-radius: 25px; background: var(--sw-card);
  color: var(--sw-olive); cursor: pointer; font: 600 14px/1 var(--sw-font-inter);
}
.sw-set__pill:disabled { opacity: .45; cursor: default; }

/* 3. FORMS (Edit profile, Running stats) ------------------------------------------------------ */
.sw-set__form { display: flex; flex-direction: column; gap: 14px; }
.sw-set__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-set__field-label { font: 700 12px/16px var(--sw-font-inter); letter-spacing: -.025em; text-transform: uppercase; color: var(--sw-ink-2-aa); }
.sw-set__help { margin: 0; font: 500 12px/18px var(--sw-font-inter); color: var(--sw-ink-2-aa); }
.sw-set__err { margin: 0; font: 500 12px/16px var(--sw-font-inter); color: #b84c41; }
.sw-set__grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sw-set__readonly { padding: 9px 12px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-ground-2); font: 500 16px/1.4 var(--sw-font-inter); color: var(--sw-ink); overflow-wrap: anywhere; }
@media (min-width: 768px) { .sw-set__readonly { font-size: 14px; } }
.sw-set__photo { display: flex; align-items: center; gap: 14px; }
.sw-set__photo-img { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--sw-line); }
.sw-set__photo-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--sw-line); border-radius: 25px; background: var(--sw-card); cursor: pointer;
  font: 600 14px/1 var(--sw-font-inter); color: var(--sw-olive);
}
.sw-set__photo-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sw-set__photo-btn:focus-within { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.sw-set__savebar { display: flex; gap: 10px; }
.sw-set__savebar > * { flex: 1 1 0; }

/* Choice tiles (wizard: experience, foot strike) */
.sw-set__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sw-set__choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-set__choice {
  min-height: 44px; padding: 9px 4px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card);
  color: var(--sw-ink); cursor: pointer; font: 500 14px/26px var(--sw-font-inter); letter-spacing: var(--sw-tracking);
  transition: background-color var(--sw-dur) ease, color var(--sw-dur) ease, border-color var(--sw-dur) ease;
}
.sw-set__choice[aria-pressed="true"] { border-color: var(--sw-olive); background: var(--sw-olive); color: #fff; }
.sw-set__choice:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.sw-set__time { display: flex; align-items: center; gap: 6px; }
.sw-set__time .sw-input { width: 64px; text-align: center; padding-left: 6px; padding-right: 6px; }
.sw-set__time-sep { color: var(--sw-ink-2-aa); font-weight: 600; }
.sw-set__form select.sw-input {
  padding-right: 36px; background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ea796' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.sw-set__range { width: 100%; accent-color: var(--sw-olive); }
.sw-set__ticks { display: flex; justify-content: space-between; font: 500 11px/14px var(--sw-font-mono); color: var(--sw-ink-2-aa); }
.sw-set__steps { display: flex; justify-content: center; gap: 6px; padding: 2px 0 10px; }
.sw-set__dot { width: 6px; height: 6px; border-radius: 50%; background: #d9d4cc; transition: background-color var(--sw-dur) ease; }
.sw-set__dot.is-on { background: var(--sw-olive); }

/* Alert switches inside a sheet: the check-row rhythm with a switch */
.sw-set__toggle { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--sw-line-3); }
.sw-set__toggle:last-child { border-bottom: 0; }
.sw-set__toggle .sw-set__main .sw-set__sub { white-space: normal; }