/* =============================================================================================
   Activation: the Devices panel, onboarding (/get-started), the feed's Get started card, the
   "your run synced" nudge, the Mileage empty state and the OAuth callback pages.
   Plain CSS, linked after sw/sw.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 also beats
   MAUI's css/mobile.css h1-h3 sizes. Values come from the approved mockups and STYLE_GUIDE:
   cream ground, white cards, one olive for actions, warm neutrals, no new colours.
   ============================================================================================= */

/* 1. DEVICES PANEL ---------------------------------------------------------------------------- */
.sw-dev { background: var(--sw-card); color: var(--sw-ink); font-family: var(--sw-font-inter); }
.sw-dev--card { padding: 14px 14px 0; }   /* the box is .sw-surface on the element */
.sw-dev--list { border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); padding: 0 16px; }
.sw-dev--flush { background: transparent; }
.sw-dev__label { margin: 0; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-2); }
.sw-dev__intro { margin: 0 0 12px; font: 500 12px/18px var(--sw-font-inter); color: var(--sw-olive-2); }

.sw-dev__row { display: flex; gap: 12px; padding: 14px 0; border-bottom: .5px solid var(--sw-line-3); }
.sw-dev--list .sw-dev__row { align-items: center; padding: 12px 0; }
.sw-dev--list .sw-dev__row.is-top { align-items: flex-start; }
.sw-dev__row:last-child { border-bottom: 0; }
.sw-dev__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sw-ground-2); color: var(--sw-olive-2); }
.sw-dev__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.sw-dev--list .sw-dev__row.is-top .sw-dev__main { padding-top: 3px; }
.sw-dev__name { margin: 0; font: 600 16px/18px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-dev__sub { margin: 2px 0 0; font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2); }
.sw-dev__chip {
  max-width: 100%; margin-top: 8px; padding: 4px 8px; border-radius: var(--sw-r-xs); background: var(--sw-ground-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 10px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink);
}
.sw-dev__chip--alert { background: var(--sw-line-3); color: #000; }
.sw-dev__note { margin: 6px 0 0; font: 500 12px/16px var(--sw-font-inter); color: var(--sw-ink-2); }
.sw-dev__note--error { color: #b84c41; }

.sw-dev__actions { display: flex; flex-wrap: wrap; align-items: center; margin: 2px 0 -14px -10px; }
.sw-dev__actions--alert { gap: 4px; margin: 10px 0 0; }
.sw-dev__actions--alert .sw-dev__text-btn { margin: 0; }
.sw-dev__text-btn {
  border: 0; border-radius: 25px; background: none; padding: 14px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 600 14px/16px var(--sw-font-inter); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-olive);
}
.sw-dev__text-btn:disabled { opacity: .45; cursor: default; }
.sw-dev__text-btn:focus-visible, .sw-dev__pill:focus-visible, .sw-dev__manual:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
@media (hover: hover) { .sw-dev__text-btn:hover:not(:disabled) { background: var(--sw-olive-wash); } }
.sw-dev__pill {
  border: 0; border-radius: 25px; background: var(--sw-olive); padding: 9px 14px; cursor: pointer;
  font: 600 14px/20px var(--sw-font-inter); color: var(--sw-on-olive);
}
.sw-dev__pill:disabled { background: var(--sw-disabled); cursor: default; }
.sw-dev__side { flex: none; display: flex; align-items: center; }
.sw-dev__side .sw-dev__text-btn { margin-right: -10px; padding: 10px; }
.sw-dev__check { display: flex; align-items: center; justify-content: flex-end; width: 38px; height: 40px; color: var(--sw-olive); }
.sw-dev__busy { display: inline-flex; align-items: center; gap: 8px; color: var(--sw-ink-2); font: 500 12px/16px var(--sw-font-inter); }

.sw-dev__manual {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 0; border: 0; background: none;
  text-align: left; text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.sw-dev__manual .sw-dev__main { align-items: stretch; }
.sw-dev__chev { flex: none; color: var(--sw-line-3); }

/* Disconnect sheet body (SwSheet supplies the chrome) */
.sw-disc { display: flex; flex-direction: column; gap: 10px; }
.sw-disc__what { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); }
.sw-disc__what-name { display: block; font: 600 16px/20px var(--sw-font-inter); color: var(--sw-ink); }
.sw-disc__what-meta { display: block; font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2); }
.sw-disc__label { margin: 0; font: 700 12px/26px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-2); }
.sw-disc__list { margin: 0; padding: 0; list-style: none; }
.sw-disc__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: .5px solid var(--sw-line-3); color: var(--sw-olive-2); }
.sw-disc__item:last-child { border-bottom: 0; }
.sw-disc__item .sw-icon { margin-top: 1px; }
.sw-disc__t { display: block; font: 600 14px/20px var(--sw-font-inter); color: var(--sw-ink); }
.sw-disc__d { display: block; font: 500 12px/18px var(--sw-font-inter); color: var(--sw-ink-2); }

/* 2. ONBOARDING SHELL (/get-started) ---------------------------------------------------------- */
/* OnboardingLayout (.onboarding-layout in app.css, shipped to both hosts since the login track)
   sizes the page to the screen between the safe areas. On the web the page also takes exactly the
   viewport itself (.sw-act--web; as a flex child of the shell it shrinks to the shell's box, and the
   web has no safe-area insets), so the body (flex 1, min-height 0, overflow-y auto) scrolls between
   the pinned header and footer, as in the app. The app's scroll pin (OnboardingLayout) snaps window
   scroll back to 0, so a tall step must scroll in the body, never the document. */
.sw-act { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--sw-ground); color: var(--sw-ink); font-family: var(--sw-font-inter); }
.sw-act--web { height: 100vh; height: 100dvh; padding-top: var(--sw-safe-t); padding-bottom: var(--sw-safe-b); }
/* Under 480px of height (a phone browser in landscape, a zoomed or short window) the shell lets the
   document grow and scroll (app.css), and the web page grows with it: pinned at 100dvh, the header
   and footer left the device list a sliver of a scroller (about 45px at 844x390). Here, not in
   app.css's block: this file loads after app.min.css, so the rule above would win the tie. The app
   never gets here (portrait only). */
@media (max-height: 480px) {
  .sw-act--web { height: auto; min-height: 100vh; min-height: 100dvh; }
}
.sw-act__head { flex: none; display: flex; flex-direction: column; align-items: center; padding: 16px 20px 0; }
.sw-act__logo { display: block; height: 48px; width: auto; }
.sw-act__title-wrap { display: flex; justify-content: center; width: 100%; max-width: 384px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(129, 125, 107, .5); }
.sw-act__title { margin: 0; text-align: center; font: 400 20px/24px var(--sw-font-serif); letter-spacing: 0; color: #000; }
.sw-act__dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.sw-act__dot { width: 6px; height: 6px; border-radius: 50%; background: #d9d4cc; transition: background-color var(--sw-dur) ease; }
.sw-act__dot.is-on { background: var(--sw-olive); }
.sw-act__body {
  box-sizing: border-box; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 448px; margin: 0 auto; padding: 16px 20px 8px;
  display: flex; flex-direction: column; gap: 14px; overflow-y: auto; overscroll-behavior: contain;
}
.sw-act__body--tight { gap: 10px; }
.sw-act__lead { margin: 0; text-align: center; font: 500 14px/20px var(--sw-font-inter); color: var(--sw-olive-2); text-wrap: pretty; }
.sw-act__line { margin: 0; text-align: center; font: 500 14px/20px var(--sw-font-inter); color: var(--sw-olive-2); }
.sw-act__link {
  margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: inherit; font-weight: 700; color: var(--sw-olive); text-decoration: underline;
}
.sw-act__link--solo { margin-left: 0; }
.sw-act__link:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: 2px; }
.sw-act__foot { box-sizing: border-box; flex: none; width: 100%; max-width: 448px; margin: 0 auto; padding: 16px 20px; }
.sw-act__foot .sw-act__line { margin-top: 12px; }
.sw-act__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px;
  border: 0; border-bottom: 1px solid rgba(0, 0, 0, .5); border-radius: var(--sw-r-card); background: var(--sw-olive); cursor: pointer;
  font: 600 16px/1 var(--sw-font-inter); letter-spacing: -0.025em; color: var(--sw-cream); -webkit-tap-highlight-color: transparent;
  transition: opacity var(--sw-dur-fast) ease, background-color var(--sw-dur) ease;
}
.sw-act__cta:active:not(:disabled) { opacity: .8; }
.sw-act__cta:disabled { background: var(--sw-disabled); cursor: default; }
.sw-act__cta[aria-busy="true"] { background: var(--sw-olive); cursor: progress; }
.sw-act__cta:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 3px; }
.sw-act__error { margin: 0; text-align: center; font: 500 13px/18px var(--sw-font-inter); color: #b84c41; }
.sw-act__skeleton { height: 96px; border-radius: var(--sw-r-md); }

/* Run block (date·device line + the feed's stat strip) */
.sw-run-line {
  margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 10px/12px var(--sw-font-head); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: #8a8c7f;
}

/* Pick a run */
.sw-act-runs { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.sw-act-run {
  position: relative; display: block; box-sizing: border-box; width: 100%; padding: 10px;
  border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); cursor: pointer;
  transition: border-color var(--sw-dur) ease; -webkit-tap-highlight-color: transparent;
}
.sw-act-run.is-on { border-color: var(--sw-olive); }
.sw-act-run:has(input:focus-visible) { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.sw-act-run__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sw-act-run__titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-act-run__name { font: 700 16px/22px var(--sw-font-head); color: var(--sw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-act-run .sw-run-line { margin-bottom: 0; }
.sw-act-radio { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--sw-line-2); border-radius: 50%; background: var(--sw-card); }
.sw-act-run.is-on .sw-act-radio { border-color: var(--sw-olive); background: var(--sw-olive); }
.sw-act-run.is-on .sw-act-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* Share your first run */
.sw-act-panel { padding: 12px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card); }
.sw-act-panel .sw-run-strip { margin-bottom: 8px; }
.sw-act-shoe {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box; width: 100%; padding: 8px 10px;
  border: 1px solid rgba(171, 148, 126, .98); border-radius: var(--sw-r-card); background: #f0e9e6; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-act-shoe:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.sw-act-shoe__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sw-act-shoe__img { flex: none; display: grid; place-items: center; box-sizing: border-box; width: 57px; height: 44px; border: 1px solid #8a8c7f; border-radius: 8px; background: #fff; }
.sw-act-shoe__img img { width: 35px; height: 34px; object-fit: contain; }
.sw-act-shoe__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; letter-spacing: var(--sw-tracking); }
.sw-act-shoe__brand, .sw-act-shoe__meta { font: 400 11px/14px var(--sw-font-head); text-transform: uppercase; color: #8a8c7f; white-space: nowrap; }
.sw-act-shoe__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/18px var(--sw-font-inter); color: var(--sw-olive-2); }
.sw-act-shoe .sw-icon { color: #8a8c7f; }
.sw-act-field { display: block; }
.sw-act-field__label { display: block; margin-bottom: 4px; font: 700 12px/16px var(--sw-font-inter); letter-spacing: -0.025em; text-transform: uppercase; color: var(--sw-olive-2); }
.sw-act-input {
  box-sizing: border-box; width: 100%; height: 44px; padding: 9px 16px; border: 1px solid var(--sw-line); border-radius: var(--sw-r-md); background: var(--sw-card);
  font: 500 16px/26px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); caret-color: var(--sw-olive);
  -webkit-appearance: none; appearance: none;
}
@media (min-width: 768px) { .sw-act-input { font-size: 14px; } }
.sw-act-input::placeholder { color: var(--sw-ink-3); }
.sw-act-input:focus { outline: none; border-color: var(--sw-ink-2); }
.sw-act-photo {
  position: relative; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 16px;
  border: 1px dashed var(--sw-line-2); border-radius: var(--sw-r-md); background: var(--sw-card); cursor: pointer;
  font: 500 14px/26px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink-2);
}
.sw-act-photo:has(input:focus-visible) { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.sw-act-photo input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.sw-act-photo .sw-icon { color: var(--sw-line-3); }
.sw-act-photo-preview { position: relative; overflow: hidden; border-radius: 10px; background: var(--sw-ground-2); }
.sw-act-photo-preview img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sw-act-photo-preview__remove {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer;
}
.sw-act-photo-preview__busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .55); color: var(--sw-olive); }

/* Waiting: what happens next */
.sw-act-h2 { margin: 0 0 12px; font: 700 12px/16px var(--sw-font-inter); letter-spacing: -0.025em; text-transform: uppercase; color: var(--sw-olive-2); }
.sw-act-steps { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; color: var(--sw-olive-2); }
.sw-act-steps li { display: flex; align-items: flex-start; gap: 12px; font: 500 16px/26px var(--sw-font-inter); }
.sw-act-steps__n { flex: none; font-family: var(--sw-font-head); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 3. GET STARTED CARD (feed; the shell is the feed card's own classes) ------------------------ */
.sw-gs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sw-gs__titles { display: flex; flex-direction: column; }
.sw-gs__count { font: 400 14px/20px var(--sw-font-inter); color: var(--sw-ink-2); }
.sw-gs__close {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -2px -8px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: rgba(63, 69, 49, .5); cursor: pointer;
}
.sw-gs__close:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }
.sw-gs__list { margin: 0; padding: 0; list-style: none; }
.sw-gs__item { border-bottom: .5px solid var(--sw-line-3); }
.sw-gs__item:last-child { border-bottom: 0; }
.sw-gs__row {
  display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; padding: 10px 0; margin: 0;
  border: 0; background: none; text-align: left; text-decoration: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
div.sw-gs__row { cursor: default; }
.sw-gs__item:last-child .sw-gs__row { padding-bottom: 0; }
.sw-gs__row:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; border-radius: 4px; }
.sw-gs__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sw-gs__t { font: 500 14px/20px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-gs__item.is-done .sw-gs__t { color: var(--sw-ink-2); }
.sw-gs__d { font: 500 12px/15px var(--sw-font-inter); color: var(--sw-ink-2); }
.sw-gs__box { flex: none; }
.sw-gs__chev { flex: none; color: var(--sw-line-3); }

/* 4. RUN-SYNCED NUDGE (SwSheet body) ---------------------------------------------------------- */
.sw-nudge { max-width: 378px; margin: 0 auto; }
.sw-nudge__title { margin: 0 0 4px; font: 700 16px/22px var(--sw-font-head); letter-spacing: 0; color: var(--sw-ink); }
.sw-nudge .sw-run-line { margin-bottom: 8px; }
.sw-nudge__note { margin: 10px 0 0; font: 500 13px/18px var(--sw-font-inter); color: var(--sw-ink-2); }

/* 5. MILEAGE EMPTY STATE ---------------------------------------------------------------------- */
.sw-mi-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 16px 20px; text-align: center; }
.sw-mi-empty__t { margin: 0; font: 600 16px/22px var(--sw-font-inter); color: var(--sw-ink); }
.sw-mi-empty__b { margin: 0; max-width: 32ch; font: 500 13px/18px var(--sw-font-inter); color: var(--sw-ink-2); text-wrap: pretty; }
.sw-mi-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 8px; }

/* 6. OAUTH CALLBACK PAGES + /devices bounce --------------------------------------------------- */
.sw-act-bounce { position: fixed; inset: 0; display: grid; place-items: center; background: var(--sw-ground); color: var(--sw-olive-2); }
.sw-cb { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: calc(var(--sw-safe-t) + 24px) 20px calc(var(--sw-safe-b) + 24px); background: var(--sw-ground); font-family: var(--sw-font-inter); }
.sw-cb__card { box-sizing: border-box; width: 100%; max-width: 380px; padding: 24px 20px 16px; border-radius: var(--sw-r-card); background: var(--sw-card); box-shadow: var(--sw-shadow-tile); text-align: center; }
.sw-cb__icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--sw-ground-2); color: var(--sw-olive); }
.sw-cb__title { margin: 0 0 6px; font: 600 18px/24px var(--sw-font-inter); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.sw-cb__msg { margin: 0; font: 500 14px/20px var(--sw-font-inter); color: var(--sw-ink-2); text-wrap: pretty; }
.sw-cb__actions { display: grid; gap: 4px; margin-top: 18px; }