/* ============================================================
   Life's Food — Step Challenge
   Shared styles for all pages
   ============================================================ */

:root {
  --brand-red:        #D40000;
  --brand-red-dark:   #9B0000;
  --brand-red-deep:   #7A0000;
  --brand-red-bright: #E60012;

  --ink:              #141414;
  --ink-soft:         #3a3a3a;
  --muted:            #6b7280;
  --line:             #e5e7eb;

  --panel-dark:       #1c1c1e;
  --panel-dark-2:     #232326;
  --bg-page:          #f4f5f7;

  --white:            #ffffff;
  --success:          #16a34a;

  --radius-lg:        28px;
  --radius-md:        18px;
  --radius-sm:        12px;

  --shadow-card:      0 18px 50px rgba(0,0,0,.18);
  --shadow-soft:      0 8px 24px rgba(0,0,0,.08);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg-page);
  min-height: 100vh;
}

a { color: var(--brand-red); }

button { font-family: inherit; cursor: pointer; }

/* Phone-style app frame (used on login/signup/dashboard) */
.app-frame {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--white);
  position: relative;
  overflow: hidden;
}
@media (min-width: 520px) {
  body.centered { display: flex; align-items: center; justify-content: center; padding: 24px 0; }
  body.centered .app-frame {
    min-height: auto;
    border-radius: 34px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
}

/* ===================== Buttons ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 700;
  transition: transform .05s ease, filter .15s ease, opacity .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand-red); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-ghost {
  background: #fff;
  color: var(--brand-red);
  border: 2px solid var(--brand-red);
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { filter: brightness(1.05); }
.btn-danger:disabled { opacity: .55; cursor: not-allowed; }
.btn-link {
  background: none; border: none; color: var(--brand-red);
  font-weight: 800; text-decoration: underline; font-size: 16px; padding: 6px;
}
.btn-link.danger { color: #b91c1c; }

/* "Delete Account" sits apart from the normal account actions. */
.acct-danger { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eee; text-align: center; }
/* Warning panel inside the delete-account confirmation modal. */
.delete-warn {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fdeaea; border: 1px solid #f6caca; color: #7f1d1d;
  border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45;
  margin-bottom: 14px;
}
.delete-warn svg { flex: 0 0 auto; margin-top: 1px; color: #b91c1c; }

/* ===================== Forms ===================== */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--ink);
}
.input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 0 14px;
  background: #fafafa;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input-wrap:focus-within {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(212,0,0,.12);
  background: #fff;
}
.input-wrap svg { flex: 0 0 auto; color: var(--muted); }
.input-wrap input {
  border: none;
  background: none;
  outline: none;
  padding: 15px 0;
  width: 100%;
  font-size: 16px;
  color: var(--ink);
}
.input-wrap .toggle-eye {
  background: none; border: none; color: var(--muted); padding: 6px; display: flex;
}

select.select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  font-size: 16px;
  background: #fafafa;
  color: var(--ink);
}

.divider {
  display: flex; align-items: center; text-align: center;
  color: var(--muted); font-weight: 700; margin: 22px 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.divider span { padding: 0 14px; font-size: 14px; }

/* Alerts / messages */
.msg { border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 14px; display: none; }
.msg.show { display: block; }
.msg.error { background: #fdeaea; color: #b91c1c; border: 1px solid #f6caca; }
.msg.success { background: #e9f7ee; color: #12703a; border: 1px solid #c3ead1; }
.msg.info { background: #eef2ff; color: #3730a3; border: 1px solid #cdd6ff; }

/* ===================== Auth pages (login / signup) ===================== */
.auth-banner {
  background: linear-gradient(160deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
  border-bottom-left-radius: 44% 22px;
  border-bottom-right-radius: 44% 22px;
  /* Extend the red up behind the phone status bar (time/battery) so the app
     feels native. env(safe-area-inset-top) is the notch/status-bar height;
     it needs viewport-fit=cover on the <meta viewport> to be non-zero. */
  padding: calc(46px + env(safe-area-inset-top, 0px)) 24px 54px;
  text-align: center;
}
.auth-banner img.logo { width: 78%; max-width: 320px; height: auto; }

.auth-card {
  margin: -26px 22px 0;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 30px 24px 28px;
  position: relative;
  z-index: 2;
}
.auth-card h1 { text-align: center; font-size: 30px; margin: 0 0 6px; letter-spacing: -.5px; }
.auth-card .subtitle { text-align: center; color: var(--muted); margin: 0 0 24px; font-size: 15px; }

.auth-foot { text-align: center; padding: 26px 0 34px; }

/* ===================== Dashboard ===================== */
.dash { background: #0d0d0f; color: #fff; }

/* Single-screen app: the dashboard fills the viewport exactly and never
   scrolls. Children are a vertical stack; the hero flexes to absorb slack. */
html.dash, body.dash { height: 100%; overflow: hidden; }
.dash .app-frame {
  background: #0d0d0f;
  /* Fill the viewport at normal font sizes, but GROW past it when content is
     taller than the screen (large device font / Dynamic Type / browser zoom).
     min-height (not height) lets it expand; overflow-y:auto lets it scroll
     instead of clipping the button behind the nav row. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  /* NOTE: do not add -webkit-overflow-scrolling:touch here. On iOS it promotes
     .app-frame to its own stacking context, which traps the red header's
     z-index:40 inside the frame and lets the slide-up menu sheet (z-index:34)
     paint OVER the header — hiding the hamburger so the menu can't be closed.
     Plain overflow-y:auto scrolls fine on iOS 13+ without it. */
  /* Ring size scales with viewport height so the layout fits every phone.
     Sized so the ring block takes up a bit more of the vertical space, which
     tightens the empty bands above "Today's Steps" and below the button. */
  --ring: clamp(150px, 26vh, 232px);
}
.dash .dash-header { flex: 0 0 auto; }
.dash .nav-row     { flex: 0 0 auto; }
.dash .dash-footer { flex: 0 0 auto; }

.dash-header {
  background: linear-gradient(160deg, var(--brand-red-bright) 0%, var(--brand-red) 55%, var(--brand-red-dark) 100%);
  /* Top 29.4px keeps the avatar 29.4px below the status bar. The hero photo
     is lifted 16px over the banner (see .hero margin-top), covering the
     bottom of the red, so we add that 16px back here — 29.4 + 16 = 45.4px —
     to keep equal red space above and below the logo, greeting and avatar.
     env(safe-area-inset-top) extends the red up behind the status bar
     (time/battery) so it reads as a native app, not a page under a black bar.
     Requires viewport-fit=cover on the <meta viewport>. */
  padding: calc(29.4px + env(safe-area-inset-top, 0px)) 16px 45.4px;
  color: #fff;
  /* Rounded bottom corners so the red header reads as sitting IN FRONT
     of the photo below it. z-index lifts the red above the hero photo;
     the photo overlaps up 16px behind it (see .hero margin-top), so the
     image shows through the header's rounded corners with no gap. */
  position: relative;
  /* Raised above the slide-up sheets (z 34/36) so a sheet appears to pass
     BEHIND the red header. Still below the modals (50) and quote toast (80). */
  z-index: 40;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  /* Soft downward shadow so the red header reads as sitting IN FRONT of the
     hero photo below and the menu sheets that slide up behind it. */
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.dash-top {
  display: flex; align-items: center; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { height: 48px; width: auto; }
.brand .brand-txt { line-height: 1; }
.brand .brand-txt .b1 { font-weight: 900; font-size: 17px; letter-spacing: .3px; }
.brand .brand-txt .b2 { font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px; opacity: .9; margin-top: 3px; }

/* Greeting now sits inline between the logo and the avatar: small + regular weight */
.greeting {
  flex: 1 1 auto; min-width: 0;
  color: #fff;
  font-size: 14px; font-weight: 100; line-height: 1.2; letter-spacing: 0;
  text-align: right; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .95;
}
/* The name drops to its own line, right-justified under the greeting, and
   carries its own size (independent of the greeting word). It's semi-bold
   and uppercase. */
.greeting > span { display: block; font-weight: 600; font-size: 15.75px; text-transform: uppercase; }

.avatar-btn {
  width: 43.2px; height: 43.2px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  overflow: hidden; padding: 0;
}
.avatar-btn .avatar-ico { width: 24px; height: 24px; }
.avatar-btn .avatar-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Hero — time-of-day photograph */
.hero {
  position: relative;
  padding: 40px 20px 30px;
  /* Was a hard 430px floor, which forced overflow when text grew. Now the
     hero absorbs slack when there's room (flex:1) but is free to shrink so
     the ENTER & SUBMIT button never gets pushed under the nav row. */
  flex: 1 1 auto;
  min-height: min(430px, 52vh);
  display: flex; flex-direction: column; align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image .4s ease;
  /* The red banner now sits in front with rounded bottom corners, so the
     photo tucks up 16px behind it. Its top corners are hidden behind the
     red, so they're left square. */
  margin-top: -16px;
}
/* Darkening overlay so white text stays legible over any photo.
   Tuned against all three time-of-day images — the afternoon shot is the
   brightest and sets the floor (white text measures ~5.5:1 against it). */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.60) 55%, rgba(0,0,0,.80) 100%);
}
.hero > * { position: relative; z-index: 1; }
.hero .hero-title { font-size: 26px; font-weight: 600; margin: 4px 0 18px; text-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* "vs yesterday" pill, sitting below the ring */
.vs-yday {
  margin: 0 0 20px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.vs-yday[hidden] { display: none; }
.vs-yday .arrow { font-size: 11px; line-height: 1; }
.vs-yday.up   { color: #4ade80; }
.vs-yday.down { color: #fca5a5; }
.vs-yday.flat { color: rgba(255,255,255,.8); }

/* Uses the responsive --ring var (clamp 150–232px) already defined on
   .app-frame, so the ring shrinks on short screens instead of forcing overflow. */
.ring-wrap { position: relative; width: var(--ring, 210px); height: var(--ring, 210px); margin-bottom: 16px; }
.ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 12; }
.ring-fg {
  fill: none; stroke: var(--brand-red-bright); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1), stroke .4s ease;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25));
}
@media (prefers-reduced-motion: reduce) {
  .ring-fg { transition: stroke .4s ease; }
}
/* Goal reached (daily steps >= goal): ring turns green */
.ring-fg.ring-fg--done { stroke: #1DB954; }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.ring-center .shoe { width: 44px; height: 44px; margin-bottom: 6px; transform: none; }
.ring-center .num { font-size: 40px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.ring-center .unit { font-size: 13px; letter-spacing: 2px; font-weight: 700; opacity: .9; margin-top: 4px; }

.hero .btn { max-width: 340px; }

/* Safeguard for large device font sizes / short screens: when the viewport is
   short (which is also what a big Dynamic Type setting effectively produces once
   text grows), tighten the vertical rhythm so everything still fits before the
   scroll fallback kicks in. Adjust the 720px breakpoint if you want it to
   trigger sooner or later. */
@media (max-height: 720px) {
  .dash .app-frame { --ring: clamp(132px, 22vh, 180px); }
  .hero { padding: 20px 20px 18px; min-height: 0; }
  .hero .hero-title { margin: 2px 0 10px; }
  .ring-wrap { margin-bottom: 10px; }
  .nav-item { padding: 12px 6px; }
  .goal-card { padding: 14px 18px 12px; }
  .dash-footer { padding: 0 16px 18px; }
}

/* Nav row */
.nav-row {
  margin: -8px 16px 0;
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; z-index: 3;
}
.nav-item {
  background: none; border: none; color: #fff;
  padding: 16px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative;
}
.nav-item:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: rgba(255,255,255,.14);
}
.nav-item svg { width: 31.2px; height: 31.2px; color: var(--brand-red-bright); }
.nav-item span { font-size: 12.5px; font-weight: 700; }
.nav-item:hover { opacity: .85; }

/* Daily goal card — liquid glass */
.goal-card {
  /* Side margins removed so the card lines up edge-to-edge with the nav
     row above (both inset 16px — the nav via its own margin, this card via
     .dash-footer's padding). Top margin keeps the gap below the nav. */
  margin: 16px 0 0;
  border-radius: 22px;
  padding: 18px 20px 16px;
}
.glass-card {
  position: relative;
  color: #fff;
  background: rgba(20,22,26,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
}
/* Gradient sheen removed — the card is a flat dark panel now */
.glass-card::before { content: none; }
.glass-card > * { position: relative; }

.goal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.goal-top .goal-label { font-weight: 800; font-size: 17px; color: #fff; }
.goal-top .goal-count { color: rgba(255,255,255,.82); font-size: 13.5px; font-weight: 600; }
.goal-bar-row { display: flex; align-items: center; gap: 12px; }
.goal-bar {
  flex: 1; height: 12px; border-radius: 999px; overflow: hidden;
  /* Slightly lighter than the rest of the glass so the dark-red end of the
     fill still reads against it (see .goal-bar > i). */
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.22);
}
.goal-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--brand-red); /* solid #D40000, no gradient */
  transition: width .9s cubic-bezier(.22,1,.36,1);
}

/* Three stats replacing the old percentage */
.glass-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.20);
}
.glass-stat { text-align: center; position: relative; }
.glass-stat:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 12%; height: 76%; width: 1px;
  background: rgba(255,255,255,.18);
}
.glass-stat .gs-n {
  font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.4px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.glass-stat .gs-l {
  font-size: 11px; font-weight: 700; margin-top: 4px;
  color: rgba(255,255,255,.78); letter-spacing: .5px; text-transform: uppercase;
}

.dash-footer { padding: 0 16px 28px; }

/* ===================== Motivational quote toast ===================== */
.quote-toast {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  padding: 28px; pointer-events: none;
}
.quote-toast.show { display: flex; }
.quote-card {
  max-width: 340px; width: 100%;
  padding: 26px 24px;
  border-radius: 24px; text-align: center; color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.14) 100%);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  animation: quoteIn .28s cubic-bezier(.22,1,.36,1);
}
.quote-toast.hide .quote-card { animation: quoteOut .32s ease forwards; }
.quote-card .quote-mark { width: 28px; height: 28px; opacity: .65; margin-bottom: 8px; }
.quote-card .quote-text { font-size: 17px; font-weight: 700; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,.3); }

@keyframes quoteIn  { from { opacity: 0; transform: scale(.88) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes quoteOut { to { opacity: 0; transform: scale(.94) translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .quote-card, .quote-toast.hide .quote-card { animation: none; }
}

/* ===================== Rank-climb overlay ===================== */
/* Reuses the .quote-card glass recipe + quoteIn keyframe so it feels
   identical to the toast. Tokens (--brand-red, --ink) come from :root. */
.rank-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: none; align-items: center; justify-content: center;
  padding: 22px; pointer-events: none;
  background: rgba(20, 0, 0, .28);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity: 0; transition: opacity .4s ease;
}
.rank-overlay.show { display: flex; }
.rank-overlay.in   { opacity: 1; }

.rank-card {
  max-width: 360px; width: 100%;
  padding: 22px 20px 24px;
  border-radius: 24px; text-align: center; color: #fff;
  background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.14) 100%);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.45);
  animation: quoteIn .28s cubic-bezier(.22,1,.36,1);   /* reuse existing keyframe */
}

.rank-head { font-size: 16px; font-weight: 800; margin-bottom: 2px; text-shadow: 0 2px 10px rgba(0,0,0,.3); }
.rank-sub  { font-size: 12px; opacity: .85; letter-spacing: .3px; margin-bottom: 14px; }

.rank-list { list-style: none; margin: 0 0 14px; padding: 0; }
.rank-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; margin: 6px 0; border-radius: 12px;
  background: rgba(255,255,255,.92);
  transition: transform .65s cubic-bezier(.22,1,.36,1);   /* the climb */
}
.rank-list li.me { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 0 0 4px var(--brand-red); }
.rank-list li .rank {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 800; font-size: 13px;
  background: #f0f0f0; color: #555;
}
.rank-list li.me .rank { background: var(--brand-red); color: #fff; }
/* Row avatar: photo if present, otherwise the first initial. */
.rank-list li .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  font-weight: 800; font-size: 13px;
  background: #ffe1e1; color: var(--brand-red);
}
.rank-list li .avatar img, img.avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rank-list li.me .avatar { background: var(--brand-red); color: #fff; }
.rank-list li .name { flex: 1; text-align: left; font-weight: 700; color: var(--ink); font-size: 15px; }
.rank-list li .val  { font-weight: 800; color: #555; font-size: 15px; }
.rank-list li.me .val { color: var(--brand-red); }

/* "Up N spots since last entry" line under the list. */
.rank-delta {
  font-size: 13px; font-weight: 800; margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.rank-delta:empty { display: none; }
.rank-delta.up   { color: #9dfca9; }
.rank-delta.down { color: #ffb0b0; }
.rank-delta.flat { color: rgba(255,255,255,.9); }

.rank-quote {
  font-size: 15px; font-weight: 700; line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.25); padding-top: 14px;
}

/* Account opt-out row + native-style toggle switch (iOS/Android look). */
.acct-privacy { margin: 6px 0 14px; }

.switch-row {
  display: flex; align-items: center; gap: 14px;
  cursor: pointer; padding: 2px 0;
}
.switch-row-text { flex: 1; min-width: 0; }
.switch-row-text b { display: block; font-size: 15px; color: var(--ink); }
.switch-row-text small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* The switch itself: a hidden checkbox drives a pill track + sliding thumb. */
.switch { position: relative; flex: 0 0 auto; width: 52px; height: 32px; }
.switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.switch-track {
  position: absolute; inset: 0;
  border-radius: 999px; background: #e3e3e8;      /* off: neutral gray */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: background .25s ease;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.12);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.switch input:checked + .switch-track { background: var(--brand-red); }   /* on: brand red */
.switch input:checked + .switch-track .switch-thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px rgba(212,0,0,.30); }
.switch input:active + .switch-track .switch-thumb { width: 32px; }        /* subtle press stretch */

@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-thumb { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rank-overlay { transition: none; }
  .rank-list li { transition: none; }   /* rows appear already sorted; no climb */
}

/* ===================== Modal ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; padding: 16px; z-index: 50;
}
.modal-overlay.show { display: flex; }
/* Anchor this overlay's modal near the top of the screen. Keeping the steps
   input in the upper area means the on-screen keyboard opens BELOW it, so iOS
   never scrolls the fixed page up to reveal it (and so never leaves it stuck
   scrolled up afterwards). */
.modal-overlay.at-top { align-items: flex-start; }
.modal-overlay.at-top .modal { margin-top: max(12px, env(safe-area-inset-top, 0px)); }
/* While the steps keyboard is open, pin the whole dashboard in place so iOS
   cannot shift it up (and then leave it stuck up). Released on blur, after
   which we also reset the scroll to the top. Works with .at-top, which keeps
   the input visible above the keyboard. */
body.dash.kb-lock { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
.modal {
  background: #fff; color: var(--ink); border-radius: 22px;
  width: 100%; max-width: 460px; padding: 20px 22px;
  box-shadow: var(--shadow-card);
  max-height: calc(100dvh - 32px); overflow-y: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.modal-head h2 { font-size: 22px; margin: 0; }
.modal-close { background: none; border: none; color: var(--ink); padding: 6px; display: flex; }

/* Keep the nav-info modal clear of iPhone status bars / home indicators.
   The 44px close target follows the minimum comfortable mobile tap size. */
#infoModal {
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
#infoModal .modal {
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
#infoModal .modal-head {
  position: sticky; top: -1px; z-index: 3; background: #fff;
  padding: 2px 0 8px;
}
#infoModal .modal-close {
  padding: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center; flex: 0 0 44px;
  cursor: pointer; touch-action: manipulation;
}
.modal p.modal-sub { color: var(--ink-soft); text-align: center; margin: 4px 0 20px; font-size: 15px; }
.modal .input-wrap { margin-bottom: 14px; }
.modal .field { margin-bottom: 0; }
.modal .field > label { margin-bottom: 4px; }
.modal .field > .select { margin-bottom: 14px; }

/* "This will overwrite today's total" heads-up */
.overwrite-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff8e6; border: 1px solid #f5dfa8; color: #7a5300;
  border-radius: 14px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; text-align: left;
}
.overwrite-note[hidden] { display: none; }
.overwrite-note svg { flex: 0 0 auto; margin-top: 1px; color: #b8860b; }
.overwrite-note b { font-weight: 800; color: #5c3f00; }

/* Small list used in nav modals */
.list { margin: 0; padding: 0; list-style: none; }
.list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.list li:last-child { border-bottom: none; }
.list li .rank { width: 26px; height: 26px; border-radius: 50%; background: #f0f0f0; color: #555; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.list li .name { flex: 1; font-weight: 600; }
.list li .val { font-weight: 800; color: var(--ink); }
.list li.me { background: #fff5f5; border-radius: 10px; }
.list li.me .rank { background: var(--brand-red); color: #fff; }
.list li.me .val { color: var(--brand-red); }

/* Employee-facing leaderboard sections: top-five people + district totals. */
.leaderboard-section { margin-top: 2px; }
.leaderboard-section + .leaderboard-section {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.leaderboard-section-title {
  margin: 0 4px 6px; color: var(--ink); font-size: 14px;
  font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.stat-box { background: #f6f7f9; border-radius: 14px; padding: 16px; text-align: center; }
.stat-box .n { font-size: 26px; font-weight: 900; color: var(--brand-red); }
.stat-box .l { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }

/* Personal progress line chart (My Progress modal) */
.chart-wrap { background: #f6f7f9; border-radius: 14px; padding: 12px 10px 8px; margin-bottom: 12px; }
.prog-chart { width: 100%; height: auto; display: block; }
.prog-dot-hit { cursor: pointer; }
.prog-dot { transition: r 0.12s ease; }
.prog-dot.active { r: 4.2; }
.prog-tip { pointer-events: none; }

/* Account photo (dashboard account panel) */
.acct-photo { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 6px 0 4px; }
.acct-pic {
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  background: #f1f2f4; color: var(--muted);
  display: grid; place-items: center; border: 3px solid var(--line);
}
.acct-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct-photo-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.acct-photo-actions .btn-ghost { width: auto; padding: 10px 20px; }
.acct-photo-actions .btn-link { font-size: 14px; }

/* My Account — labelled sections (Account Information / Store Information) */
.acct-section { margin: 4px 0 20px; }
.acct-section + .acct-section { margin-top: 8px; }
.acct-section-title {
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--brand-red);
}
/* Field rows: label left, value right, hairline divider between rows */
.acct-fields { margin: 0; padding: 0; }
.acct-field {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.acct-field:last-child { border-bottom: 0; }
.acct-field[hidden] { display: none; }
.acct-field dt {
  flex: 0 0 auto;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
}
.acct-field dd {
  margin: 0; flex: 1 1 auto; min-width: 0;
  text-align: right; font-size: 15px; font-weight: 600; color: var(--ink);
  word-break: break-word;
}

/* ===================== Admin ===================== */
/* Employee name cell with photo/initials */
.emp-cell { display: flex; align-items: center; gap: 10px; }
.emp-pic {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; background: #eceef1; display: inline-grid; place-items: center;
  border: 1px solid var(--line); overflow: hidden;
}
.emp-pic--ph { color: var(--brand-red); font-weight: 800; font-size: 13px; background: #fff2f2; }
.emp-name { line-height: 1.25; }
.admin-body { background: var(--bg-page); }
.admin-shell { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }
.admin-bar {
  background: linear-gradient(120deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
  color: #fff; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
}
.admin-bar .brand img { height: 38px; }
.admin-bar .brand .b1 { font-weight: 900; font-size: 18px; }
.admin-bar .brand .b2 { font-size: 8.5px; letter-spacing: 1.5px; font-weight: 700; opacity: .9; }
.admin-bar .right { display: flex; align-items: center; gap: 16px; }
.admin-bar .right .who { font-size: 14px; opacity: .95; }
.admin-bar button { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; padding: 9px 14px; font-weight: 700; width: auto; }

.admin-title { font-size: 26px; font-weight: 900; margin: 30px 0 6px; }
.admin-sub { color: var(--muted); margin: 0 0 22px; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 30px; }
@media (max-width: 760px){ .cards { grid-template-columns: 1fr 1fr; } }
.metric {
  background: #fff; border-radius: 18px; padding: 20px; box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--brand-red);
}
.metric .n { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: -.5px; }
.metric .l { color: var(--muted); font-weight: 700; font-size: 13px; margin-top: 4px; text-transform: uppercase; letter-spacing: .6px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px){ .grid-2 { grid-template-columns: 1fr; } }

.panel { background: #fff; border-radius: 18px; box-shadow: var(--shadow-soft); padding: 22px; margin-bottom: 22px; }
.panel h3 { margin: 0 0 16px; font-size: 18px; }

/* ===================== Admin charts ===================== */
.chart-panel { padding-bottom: 18px; }
.chart-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.chart-head h3 { margin: 0 0 2px; }
.chart-sub { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.chart-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.chart-canvas-wrap { position: relative; height: 320px; }
@media (max-width: 560px){ .chart-canvas-wrap { height: 260px; } }

.chart-empty {
  min-height: 120px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); font-weight: 600; font-size: 14px;
  padding: 20px; line-height: 1.5;
}
.chart-empty code {
  background: #f4f5f7; border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; font-size: 13px; color: var(--ink-soft);
}

/* Timeframe select (compact version of the form select) */
.tf-select {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px;
  font-size: 14px; font-weight: 600; background: #fafafa; color: var(--ink); cursor: pointer;
}

/* Segmented toggle (Cumulative / Daily) */
.seg { display: inline-flex; background: #f1f2f4; border-radius: 12px; padding: 3px; gap: 2px; }
.seg button {
  border: none; background: transparent; color: var(--muted); font-weight: 700;
  font-size: 13px; padding: 7px 12px; border-radius: 9px; cursor: pointer; width: auto;
}
.seg button.active { background: #fff; color: var(--brand-red); box-shadow: var(--shadow-soft); }

/* Multi-select checkbox dropdown */
.ms { position: relative; }
.ms-btn {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px;
  font-size: 14px; font-weight: 600; background: #fafafa; color: var(--ink);
  cursor: pointer; width: auto; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.ms-btn .caret { color: var(--muted); font-size: 12px; }
.ms-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 260px; max-width: 78vw; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-card); padding: 10px; }
.ms-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.ms-actions button {
  flex: 1; border: 1px solid var(--line); background: #fafafa; color: var(--ink-soft);
  border-radius: 9px; padding: 7px 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; width: auto;
}
.ms-actions button:hover { background: #f1f2f4; }
.ms-list { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.ms-opt {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 9px;
  cursor: pointer; font-size: 14px; font-weight: 600;
}
.ms-opt:hover { background: #f6f7f9; }
.ms-opt input { width: 16px; height: 16px; accent-color: var(--brand-red); margin: 0; flex: none; }
.ms-opt .ms-opt-sub { color: var(--muted); font-weight: 600; font-size: 12px; }

@media (max-width: 560px){
  .chart-controls { width: 100%; }
  .ms, .ms-btn, .seg, .tf-select { width: 100%; }
  .seg { justify-content: stretch; }
  .seg button { flex: 1; }
  .ms-menu { left: 0; right: auto; width: 100%; }
}

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); }
table.data th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:last-child td { border-bottom: none; }
table.data .steps { font-weight: 800; color: var(--brand-red); }

/* Clickable name that opens the edit record */
.row-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: var(--brand-red); font-weight: 700;
  cursor: pointer; text-align: left; text-decoration: underline;
  text-decoration-color: rgba(212,0,0,.35); text-underline-offset: 2px;
}
.row-link:hover { text-decoration-color: var(--brand-red); }

/* Archive checkbox inside the edit modals */
.archive-toggle {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 12px; margin-bottom: 14px; background: #fafafa; cursor: pointer;
}
.archive-toggle input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--brand-red); cursor: pointer; }
.archive-toggle b { display: block; font-size: 15px; color: var(--ink); }
.archive-toggle small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; }

/* Archived rows are muted and grouped under a small divider */
table.data tr.archived td { color: var(--muted); background: #fafafa; }
table.data tr.archived td.steps { color: #c98d8d; }
table.data tr.archived .emp-name small { color: #9aa1ab; }
.archived-sep td {
  background: #f3f4f6; color: var(--muted); font-size: 11px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  text-align: left; padding: 8px 10px;
}
.badge-archived {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: #eceef1; color: #6b7280; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; vertical-align: middle;
}
/* The hidden attribute must win over the display rule above, so the
   "Archived" badge in a modal header only appears when actually archived. */
.badge-archived[hidden] { display: none; }
/* A red "Account deleted" badge marks a phone record whose owner deleted
   their account (the record itself is kept as a tombstone). */
.badge-deleted {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: #fdeaea; color: #b91c1c; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; vertical-align: middle;
}
table.data tr.deleted .deleted-name { color: #9aa1ab; font-weight: 700; font-style: italic; }
/* Email note under the two-column row in the edit-employee modal */
.modal .field-note { display: block; margin: -8px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.table-scroll { max-height: 420px; overflow: auto; }

.admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.admin-login-card { width: 100%; max-width: 420px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-card); overflow: hidden; }
.admin-login-card .head { background: linear-gradient(120deg, var(--brand-red), var(--brand-red-dark)); color: #fff; padding: 30px 26px; text-align: center; }
.admin-login-card .head img { height: 44px; margin-bottom: 10px; }
.admin-login-card .head h1 { margin: 6px 0 2px; font-size: 24px; }
.admin-login-card .head p { margin: 0; opacity: .9; font-size: 14px; }
.admin-login-card .body { padding: 26px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px){ .form-row { grid-template-columns: 1fr; } }

.hidden { display: none !important; }

.spinner {
  width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.center-load { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }

/* ===================== Add to Home Screen (mobile only) ===================== */
.a2hs-fab {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: none; align-items: center; gap: 9px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px 7px 7px; box-shadow: var(--shadow-card);
  font-weight: 800; font-size: 13.5px; -webkit-tap-highlight-color: transparent;
}
.a2hs-fab.show { display: inline-flex; }
.a2hs-fab img { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.a2hs-fab-txt { white-space: nowrap; }
.a2hs-fab .a2hs-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 2px; border-radius: 50%;
  color: var(--muted); background: #f1f2f4;
}
.a2hs-fab .a2hs-x:hover { background: #e5e7eb; }

.a2hs-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 70;
  display: none; align-items: flex-end; justify-content: center;
}
.a2hs-overlay.show { display: flex; }
.a2hs-sheet {
  background: #fff; color: var(--ink); width: 100%; max-width: 480px;
  border-radius: 24px 24px 0 0; padding: 10px 20px 26px;
  box-shadow: 0 -12px 40px rgba(0,0,0,.25);
  animation: a2hsUp .22s ease;
}
@keyframes a2hsUp { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.a2hs-grab { width: 42px; height: 5px; border-radius: 999px; background: #e2e4e8; margin: 0 auto 14px; }
.a2hs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.a2hs-head img { width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto; box-shadow: var(--shadow-soft); }
.a2hs-title { font-size: 19px; font-weight: 900; letter-spacing: -.2px; }
.a2hs-desc { color: var(--muted); font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.a2hs-sheet-close { margin-left: auto; background: none; border: none; color: var(--muted); padding: 4px; display: flex; }
.a2hs-steps { margin: 0; padding: 0; list-style: none; counter-reset: a2hs; }
.a2hs-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 600; color: var(--ink-soft); line-height: 1.35;
}
.a2hs-steps li:last-child { border-bottom: none; }
.a2hs-steps li b { color: var(--ink); font-weight: 800; }
.a2hs-steps .a2hs-ico, .a2hs-steps .a2hs-num {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: #fff5f5; color: var(--brand-red);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
}
.a2hs-install {
  width: 100%; margin-top: 18px; border: none; border-radius: 14px;
  background: var(--brand-red); color: #fff; font-weight: 800; font-size: 16px; padding: 15px;
}

/* Never show the mobile install box on desktop-sized windows */
@media (min-width: 1000px) {
  .a2hs-fab, .a2hs-fab.show, .a2hs-overlay { display: none !important; }
}

/* =====================================================================
   DESKTOP / WEBSITE LAYOUT
   Everything below only applies on wide (computer) screens. Phones and
   small tablets fall below this breakpoint and keep the mobile app UI
   exactly as-is.
   ===================================================================== */
@media (min-width: 1000px) {

  /* ---------- Dashboard becomes a wide, multi-panel website ---------- */
  html.dash, body.dash { background: #0d0d0f; color: #fff; }

  .dash .app-frame {
    max-width: 1220px;
    background: transparent;
    min-height: 100vh;
    overflow: visible;
    padding: 30px 32px 56px;
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 24px;
  }

  /* Header banner spans the full width */
  .dash-header {
    grid-column: 1 / -1;
    border-radius: 24px;
    padding: 38px 28px;
    box-shadow: var(--shadow-card);
  }
  .brand img { height: 50px; }
  .greeting { font-size: 16px; }
  .greeting > span { font-size: 18px; }
  .avatar-btn { width: 42px; height: 42px; }
  .avatar-btn .avatar-ico { width: 24px; height: 24px; }

  /* Hero (log steps) fills the left column — keeps its photo + gradient */
  .hero {
    grid-column: 1;
    grid-row: 2 / 4;
    border-radius: 24px;
    overflow: hidden;
    min-height: 540px;
    justify-content: center;
    padding: 40px 24px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--shadow-card);
  }
  .hero::after { border-radius: 24px; }
  .hero .hero-title { font-size: 30px; }

  /* Right rail: quick-nav card (row 2) + goal card (row 3) */
  .nav-row {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    background: rgba(20,20,22,.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.14);
    color: #fff;
    grid-template-columns: 1fr 1fr;
    border-radius: 22px;
    padding: 10px;
    box-shadow: var(--shadow-soft);
  }
  .nav-item {
    color: #fff;
    padding: 22px 10px;
    border-radius: 16px;
    gap: 10px;
  }
  .nav-item:hover { background: rgba(255,255,255,.08); opacity: 1; }
  .nav-item:not(:last-child)::after { display: none; }
  .nav-item svg { width: 28px; height: 28px; }
  .nav-item span { font-size: 13.5px; }

  .dash-footer {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    padding: 0;
  }
  .goal-card { margin: 0; }
  /* Desktop keeps the glass card + solid-white-ended bar — the dark-panel
     and solid-red-bar changes were requested for mobile only */
  .goal-card.glass-card {
    background: linear-gradient(145deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.12) 100%);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow:
      0 10px 34px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.45),
      inset 0 -1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
  }
  .goal-card.glass-card::before {
    content: ""; position: absolute; left: -20%; right: -20%; top: 0; height: 55%;
    background: linear-gradient(120deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
  }
  .goal-bar { background: rgba(255,255,255,.20); }
  .goal-bar > i {
    background: linear-gradient(90deg, #ff5a5a, #ffffff);
    box-shadow: 0 0 12px rgba(255,255,255,.45);
  }

  /* ---------- Auth pages become a two-panel website card ---------- */
  body.centered { padding: 32px; }
  body.centered .app-frame {
    max-width: 920px;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    grid-template-areas:
      "banner card"
      "banner foot";
    grid-template-rows: 1fr auto;
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-card);
  }
  body.centered .auth-banner {
    grid-area: banner;
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    padding: 48px 40px;
  }
  body.centered .auth-banner img.logo { width: 82%; max-width: 300px; }
  body.centered .auth-card {
    grid-area: card;
    align-self: center;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 46px 48px 22px;
  }
  body.centered .auth-card h1 { text-align: left; font-size: 32px; }
  body.centered .auth-card .subtitle { text-align: left; }
  body.centered .auth-foot { grid-area: foot; text-align: left; padding: 0 48px 36px; }
}

/* ============================================================
   Desktop / computer block
   ------------------------------------------------------------
   The Step Challenge is meant for phones and tablets. On a
   mouse-driven computer we cover the whole screen with a
   branded message.

   This is CSS-only on purpose: it shows instantly with no flash
   of the app behind it, and it keys off the device's PRIMARY
   input. A desktop or laptop (a fine pointer that can hover —
   even a touchscreen laptop) is blocked; touch-first phones and
   tablets, whose primary pointer is coarse and can't hover,
   pass straight through.

   >>> EASY ON/OFF SWITCH <<<
   To ALLOW desktop/computer browsers (e.g. so employees without
   a smartphone can log steps from a computer), change the value
   below from "flex" to "none". To turn the block back ON, change
   it back to "flex". That's the only edit needed — nothing else
   in this file or in the HTML/JS needs to change.
   ============================================================ */
:root {
  --device-gate-display: none;  /* "flex" = block desktop (default) · "none" = allow desktop */
}

.device-gate { display: none; }

@media (hover: hover) and (pointer: fine) {
  .device-gate {
    display: var(--device-gate-display);
    position: fixed;
    inset: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 32px;
    background: linear-gradient(160deg,
      var(--brand-red-bright) 0%, var(--brand-red) 55%, var(--brand-red-dark) 100%);
    color: #fff;
  }
}

.device-gate-logo {
  position: absolute;
  top: clamp(40px, 7vh, 72px);
  width: min(340px, 60%);
  height: auto;
}
.device-gate-inner { max-width: 520px; }
.device-gate-icon {
  width: 76px; height: 76px; margin: 0 auto 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 22px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.device-gate-icon svg { width: 38px; height: 38px; }
.device-gate-msg {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.2px;
  text-shadow: 0 2px 14px rgba(0,0,0,.28);
  margin: 0;
}
.device-gate-sub {
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 600;
  opacity: .82;
}

/* Store dropdown inside an icon input-wrap (phone sign-up) */
.input-wrap select {
  border: none;
  background: none;
  outline: none;
  padding: 15px 0;
  width: 100%;
  font-size: 16px;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
}
.input-wrap select:invalid { color: var(--muted); }

/* ---- Sign-up: first/last name side by side (stacks on small screens) ---- */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px){ .field-row { grid-template-columns: 1fr; } }

/* ---- Admin standings: search + page-size toolbar ---- */
.table-tools {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0 14px; flex-wrap: wrap;
}
.search-wrap {
  display: flex; align-items: center; gap: 8px; flex: 1 1 200px;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 0 12px; background: #fafafa;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-wrap:focus-within {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(212,0,0,.10);
  background: #fff;
}
.search-wrap svg { flex: 0 0 auto; color: var(--muted); }
.search-wrap input {
  border: none; background: none; outline: none;
  padding: 10px 0; width: 100%; font-size: 15px; color: var(--ink);
}
.search-wrap input::-webkit-search-cancel-button { cursor: pointer; }
.page-size {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap;
}
.page-size select {
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 8px 10px; font-size: 14px; background: #fafafa; color: var(--ink);
}

/* ---- Admin standings: pager ---- */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.pager:empty { display: none; }
.pager-info { font-size: 13px; color: var(--muted); font-weight: 600; }
.pager-btns { display: inline-flex; align-items: center; gap: 8px; }
.pager-page { font-size: 13px; color: var(--muted); font-weight: 600; }
.pager-btns button {
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 7px 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pager-btns button:hover:not(:disabled) { border-color: var(--brand-red); color: var(--brand-red); }
.pager-btns button:disabled { opacity: .45; cursor: default; }

/* ============================================================
   Splash screen (plays on every app open)
   Full-screen red gradient + centered white logo. Fades in,
   holds, then fades out to reveal the app behind it. On the
   login page it also runs a session check while covering the
   screen, so already-logged-in users are sent straight to the
   dashboard and never see the login form flash.
   ============================================================ */
.lf-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Same gradient family as the dashboard header */
  background: linear-gradient(160deg, var(--brand-red-bright) 0%, var(--brand-red) 55%, var(--brand-red-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cover the notch/status-bar area too */
  padding: env(safe-area-inset-top, 0px) 24px env(safe-area-inset-bottom, 0px);
  opacity: 1;
  transition: opacity 0.8s ease;   /* fade-out duration */
  will-change: opacity;
}
.lf-splash-logo {
  width: 76%;
  max-width: 360px;
  height: auto;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s ease, transform 0.8s ease;  /* fade-in duration */
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.25));
}
/* Added by JS one frame after load to start the fade-in */
.lf-splash.lf-in .lf-splash-logo { opacity: 1; transform: scale(1); }
/* Added by JS to fade the whole layer out */
.lf-splash.lf-out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .lf-splash, .lf-splash-logo { transition-duration: 0.2s; }
  .lf-splash-logo { transform: none; }
}

/* ===================== Header hamburger + slide-up sheets ===================== */

/* Hamburger button in the header, occupying the old avatar slot (top-right,
   next to the greeting). Same footprint as the avatar so the row is unchanged. */
.header-menu-btn {
  width: 43.2px; height: 43.2px;
  border: none;
  background: none;
  display: grid; place-items: center;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.header-menu-btn:active { opacity: .6; }
.header-menu-lines {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 24px; height: 17px;
}
.header-menu-lines i {
  display: block; height: 1.5px; width: 100%;
  border-radius: 2px; background: #fff;
  transform-origin: center;
  transition: transform .25s ease, opacity .2s ease;
}
/* When the menu is open, the three bars fold into an X so the same button
   closes it. Bars are 1.5px tall in a 17px column (space-between), so the
   top/bottom bars slide 7.75px to the vertical centre, then rotate. */
.header-menu-btn.is-open .header-menu-lines i:nth-child(1) { transform: translateY(7.75px) rotate(45deg); }
.header-menu-btn.is-open .header-menu-lines i:nth-child(2) { opacity: 0; }
.header-menu-btn.is-open .header-menu-lines i:nth-child(3) { transform: translateY(-7.75px) rotate(-45deg); }

/* Slide-up sheet: full-screen white panel that rises from the bottom on open
   (bottom-up). On close it reverses — sliding back down and off the bottom
   (top-down, via .closing). The .closing class is what keeps the panel VISIBLE
   during the downward slide; without it the base visibility:hidden would apply
   the instant .open is removed and the panel would just vanish with no motion. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 34;
  background: #fff;
  color: var(--ink);
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22,1,.36,1);
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#accountSheet { z-index: 36; } /* sits above the Menu sheet when opened */
.sheet.open {
  transform: translateY(0);
  visibility: visible;
}
/* Closing: slide down and off the bottom, staying visible so the motion shows.
   JS removes this class once the transition ends; the sheet is then hidden at
   its bottom resting position, ready to rise from the bottom again next open. */
.sheet.closing {
  transform: translateY(100%);
  visibility: visible;
}

/* Push sheet content below the red header. --dash-header-h is set from JS to the
   live header height; the fallback covers first paint before JS runs. */
.sheet-inner {
  padding-top: var(--dash-header-h, 120px);
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  min-height: 100%;
}

/* Control row sitting just under the red header: back arrow, title, X. */
.sheet-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 8px;
}
.sheet-title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.sheet-back,
.sheet-x {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  color: var(--ink);
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-back:active,
.sheet-x:active { background: rgba(0,0,0,.06); }
/* Empty spacer keeps the title centered on the Menu sheet (which has no back). */
.sheet-bar-slot { flex: 0 0 auto; width: 42px; height: 42px; }

.sheet-body { padding: 6px 22px 0; }

/* Tappable rows inside the Menu sheet. */
.menu-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 6px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-link:active { background: rgba(0,0,0,.04); }
.menu-link-ico { width: 26px; height: 26px; flex: 0 0 auto; color: var(--brand-red); }
.menu-link-text { flex: 1; }
.menu-link-chev { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }

/* Placeholder text shown inside stub menu sheets (Health Facts / Legal Stuff). */
.coming-soon {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  padding: 44px 12px;
  margin: 0;
}

/* Health Facts tab bar + panels. */
.hf-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-top: 4px;
}
.hf-tab {
  flex: 1 1 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hf-tab.is-active {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}
.hf-panel { display: none; }
.hf-panel.is-active { display: block; }

/* Health Facts + Legal readable content */
.hf-content { padding: 16px 0 8px; }
.hf-lead {
  margin: 0 0 18px;
  font-size: 15.5px; line-height: 1.5; font-weight: 600; color: var(--ink);
}
.hf-block { margin: 0 0 20px; }
.hf-block h4 {
  margin: 0 0 8px;
  font-size: 15px; font-weight: 800; color: var(--brand-red);
}
.hf-block p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.hf-list { margin: 0; padding: 0; list-style: none; }
.hf-list li {
  position: relative; padding: 0 0 0 26px; margin: 0 0 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
}
.hf-list li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red);
}
.hf-list li b { color: var(--ink); }

/* Daily Facts stat trio */
.hf-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 0 0 22px;
}
.hf-stat {
  background: #fff5f5; border: 1px solid #f6d6d6; border-radius: 16px;
  padding: 16px 8px; text-align: center;
}
.hf-stat-n { font-size: 22px; font-weight: 900; color: var(--brand-red); letter-spacing: -.5px; line-height: 1; }
.hf-stat-l { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3; }

.hf-note {
  margin: 22px 0 0; padding: 12px 14px;
  background: #f6f7f8; border-radius: 12px;
  font-size: 12.5px; line-height: 1.5; color: var(--muted); font-weight: 600;
}

/* Legal document */
.legal-doc { padding: 12px 0 8px; }
.legal-doc h4 {
  margin: 18px 0 6px;
  font-size: 15px; font-weight: 800; color: var(--brand-red);
}
.legal-doc p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.legal-doc a { color: var(--brand-red); font-weight: 700; }
.legal-updated { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 0 0 14px; }
.legal-intro { color: var(--ink); font-weight: 600; }
.legal-disclaimer {
  margin-top: 20px; padding: 12px 14px;
  background: #f6f7f8; border-radius: 12px;
  font-size: 12.5px; line-height: 1.55; color: var(--muted); font-weight: 600;
}

/* Help & Support email. */
.help-lead {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
  margin: 14px 0 18px;
}
.help-email-btn { text-decoration: none; }

/* Reused account content sits comfortably inside the sheet body. */
.sheet-body .acct-photo { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
}

/* ===================== Single-screen responsive sizing ===================== */
/* Everything below keeps the dashboard on one non-scrolling screen across phone
   sizes. The hero is the flexible middle; the ring and text scale with viewport
   height (vh) and are clamped so they never grow too large or shrink too small. */

.dash .hero {
  flex: 1 1 auto;
  min-height: 0;                 /* allow the hero to shrink inside the flex column */
  justify-content: center;       /* center the ring/text in whatever space is left */
  padding: clamp(9px, 2.25vh, 30px) 20px clamp(9px, 1.8vh, 22.5px);
}
.dash .hero .hero-title {
  font-size: clamp(19px, 4.2vh, 26px);
  margin: 0 0 clamp(8px, 1.8vh, 18px);
}

/* Ring scales with --ring (set on .app-frame). The SVG fills the wrapper and its
   viewBox stays 210x210, so the JS progress math is unaffected. */
.dash .ring-wrap { width: var(--ring); height: var(--ring); margin-bottom: clamp(8px, 1.6vh, 16px); }
.dash .ring-wrap svg { width: 100%; height: 100%; }
.dash .ring-center .shoe { width: clamp(30px, 5vh, 44px); height: clamp(30px, 5vh, 44px); margin-bottom: clamp(2px, .6vh, 6px); }
.dash .ring-center .num  { font-size: clamp(30px, 7.6vh, 40px); }
.dash .ring-center .unit { font-size: clamp(11px, 1.6vh, 13px); margin-top: clamp(2px, .5vh, 4px); }

.dash .vs-yday { margin: 0 0 clamp(8px, 1.6vh, 20px); }

/* Nav row: tighten row padding and icon size on shorter screens. */
.dash .nav-item { padding: clamp(9px, 1.7vh, 16px) 6px; gap: clamp(4px, .8vh, 8px); }
.dash .nav-item svg { width: clamp(24px, 4.4vh, 31.2px); height: clamp(24px, 4.4vh, 31.2px); }
.dash .nav-item span { font-size: clamp(11px, 1.5vh, 12.5px); }

/* Daily goal card: trim internal spacing on shorter screens. */
.dash .dash-footer { padding-bottom: clamp(12px, 2.4vh, 28px); }
.dash .goal-card { margin-top: clamp(10px, 1.8vh, 16px); padding: clamp(12px, 2vh, 18px) 20px clamp(10px, 1.8vh, 16px); }
.dash .goal-top { margin-bottom: clamp(8px, 1.4vh, 12px); }
.dash .glass-stats { margin-top: clamp(9px, 1.6vh, 16px); padding-top: clamp(8px, 1.4vh, 14px); }


/* ===================== Admin tabs + PWA usage ===================== */
.admin-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 22px;
  background: #eceef1; border-radius: 14px;
}
.admin-tab {
  width: auto; border: 0; background: transparent; color: var(--muted);
  padding: 10px 16px; border-radius: 10px; font-weight: 800; font-size: 14px; cursor: pointer;
}
.admin-tab.active { background: #fff; color: var(--brand-red); box-shadow: var(--shadow-soft); }
.admin-tab-panel { min-width: 0; }
.usage-cards { margin-bottom: 22px; }
.usage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.usage-note p { color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.usage-error { grid-column: 1 / -1; color: #9f1239; font-weight: 700; }
.usage-error code { background: #f6f7f9; padding: 2px 5px; border-radius: 5px; }
.usage-empty { text-align: center !important; color: var(--muted); padding: 22px !important; }
@media (max-width: 560px) {
  .admin-tabs { display: flex; width: 100%; }
  .admin-tab { flex: 1; padding: 10px 8px; }
}