/* ===================== GullySport — My Fitness (fitness.html) =====================
   Built on the site tokens (style.css), like engage.css, so the app skin in
   css/native.css recolours it with everything else. Orange (--saffron) is a
   fill only; text in orange uses --violet (the site's orange INK). */

.fit-hero { padding-bottom: 18px; }
.fit-source { color: var(--ink-dim); font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
.fit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--win); flex: none; }

.fit-center { text-align: center; padding: 26px 18px; }
.fit-center h2 { font-size: 1.15rem; }
.fit-big-ic { font-size: 2.4rem; margin-bottom: 6px; }
.fit-actions { margin-top: 14px; justify-content: center; }
.fit-setting + .fit-actions { justify-content: flex-start; }
.fit-wide { width: 100%; justify-content: center; margin-top: 4px; }
.fit-danger { color: var(--live) !important; }

/* Today: ring + numbers */
.fit-today { display: flex; align-items: center; gap: 16px; }
.fit-ring { position: relative; width: 138px; height: 138px; flex: none; }
.fit-ring svg { width: 100%; height: 100%; }
.fit-ring circle { fill: none; stroke-width: 14; }
.fit-ring-bg { stroke: var(--bg-alt); }
.fit-ring-fg { stroke: var(--saffron); stroke-linecap: round; transition: stroke-dashoffset 0.6s ease-out; }
.fit-ring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fit-ring-c b { font-family: var(--font-display); font-weight: 900; font-size: 1.65rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.fit-ring-c small { font-size: 0.72rem; color: var(--ink-dim); font-weight: 600; }
.fit-mini { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.fit-mini div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 0.84rem; color: var(--ink-dim); border-bottom: 1px solid var(--border); padding-bottom: 7px; }
.fit-mini div:last-child { border: 0; padding: 0; }
.fit-mini b { color: var(--ink); font-size: 1rem; font-weight: 800; white-space: nowrap; }
.fit-mini b i { font-style: normal; font-size: 0.7rem; color: var(--ink-dim); font-weight: 600; margin-left: 2px; }

/* Week bars */
.fit-bars { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 120px; margin: 22px 0 24px; }
.fit-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.fit-bar i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: var(--bg-alt); }
.fit-bar.is-hit i { background: var(--navy); }
.fit-bar.is-today i { background: var(--saffron); }
.fit-bar span { position: absolute; bottom: -20px; font-size: 0.72rem; color: var(--ink-dim); font-weight: 600; }
.fit-bar.is-today span { color: var(--violet); font-weight: 800; }
.fit-goal { position: absolute; left: 0; right: 0; border-top: 1.5px dashed var(--ink-dim); opacity: 0.55; pointer-events: none; }
.fit-head { display: flex; justify-content: space-between; align-items: baseline; }
.fit-head span { font-size: 0.76rem; color: var(--ink-dim); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.fit-dash { width: 18px; border-top: 1.5px dashed var(--ink-dim); }
.fit-sum { margin-top: 14px; }
.fit-sum b { color: var(--ink); }

/* Connect */
.fit-src { display: flex; align-items: center; gap: 12px; }
.fit-src b { display: block; font-size: 1rem; color: var(--ink); }
.fit-src small { font-size: 0.78rem; color: var(--ink-dim); }
.fit-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.fit-logo--apple { background: #FFECEF; }
.fit-logo--hc { background: #E6F4EA; }
.fit-works { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 12px; }
.fit-perm { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.fit-perm:first-of-type { border-top: 0; }
.fit-perm > span { width: 26px; text-align: center; font-size: 1.1rem; }
.fit-perm small { display: block; font-weight: 500; color: var(--ink-dim); font-size: 0.76rem; }

.fit-privacy { display: flex; gap: 12px; font-size: 0.86rem; color: var(--ink-dim); line-height: 1.5; }
.fit-privacy b { color: var(--ink); }
.fit-privacy a { color: var(--violet); font-weight: 700; }
.fit-ic { font-size: 1.2rem; }

.fit-setting label { margin: 0; font-weight: 700; color: var(--ink); }
.fit-setting select { width: auto; margin: 0; }

@media (max-width: 380px) {
  .fit-today { flex-direction: column; align-items: stretch; }
  .fit-ring { align-self: center; }
}

/* health-privacy.html */
.hp-list { margin: 8px 0 6px 20px; display: grid; gap: 6px; color: var(--ink-soft); }