/* Prevent iOS Safari auto-zoom on input focus (requires font-size >= 16px) */
input, textarea, select { font-size: 16px !important; }
:root {
  color-scheme: dark;   /* app is dark by default; also opts the page out of Chrome Auto Dark Theme */
  --bg0: #0A0A0A;
  --bg1: #141414;
  --bg2: #1E1E1E;
  --bg3: #282828;
  --bg4: #333333;
  --bd:  #2A2A2A;
  --bd2: #3D3D3D;
  --t1:  #FFFFFF;
  --t2:  #C7C7CC;
  --t3:  #8E8E93;
  --ac:  #FF4D00;
  --acdim: #1A0800;
  --acbrd: #5C2000;
  --gn:  #00E676;
  --gndim: #001208;
  --gnbrd: #005C30;
  --bl:  #4D9FFF;
  --bldim: #081020;
  --blbrd: #143A6B;
  --pu:  #BB86FC;
  --pudim: #110820;
  --rd:  #FF453A;
  --rddim: #2B0A08;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.5);
  --shadow-md: 0 6px 24px rgba(0,0,0,.7);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
}
/* ─── LIGHT MODE ─── */
html.light {
  color-scheme: light;
  --bg0: #F0F2F7;
  --bg1: #FFFFFF;
  --bg2: #E8EAF2;
  --bg3: #DDE0EC;
  --bg4: #D0D4E5;
  --bd:  #C5C9DC;
  --bd2: #AEB3CC;
  --t1:  #0B0D18;
  --t2:  #3A3E55;
  --t3:  #7A7F9A;
  --ac:    #E63000;
  --acdim: #FFF0E8;
  --acbrd: #FFAA80;
  --gn:    #00A854;
  --gndim: #E0FFF0;
  --gnbrd: #80DFB0;
  --bl:    #1A6BC0;
  --pu:    #7C4DFF;
  --bldim: #E8F0FF;
  --blbrd: #7AB0E8;
  --pudim: #F0E8FF;
  --rddim: #FFE8E6;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.10);
  --shadow-md: 0 6px 24px rgba(0,0,0,.14);
}
html.light body { background: #fff; }

/* ─── DIAGONAL STRIPE UTILITIES ─── */
.diag-stripes {
  position: relative; overflow: hidden;
}
.diag-stripes::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    transparent 0px, transparent 14px,
    rgba(255,77,0,.025) 14px, rgba(255,77,0,.025) 15px
  );
  pointer-events: none;
}
html.light .sr-icon[style*="1A1500"] { background: #FFF8D0 !important; }
html, body { height: 100%; margin: 0; padding: 0; background: #000; font-family: 'Barlow', sans-serif; color: var(--t1); overflow: hidden; touch-action: manipulation; -webkit-text-size-adjust: var(--tscale, 100%); text-size-adjust: var(--tscale, 100%); }
/* Signed-out (no stored session) shows the always-light auth screen; the profile's theme
   hasn't loaded yet so var(--bg0) is the dark default, which bleeds a dark band around/below
   the white login card (esp. behind the Safari toolbar / home indicator). Keep the page
   light while signed out so there's nothing to bleed. has-session is set pre-paint when a
   token exists, so this never affects signed-in screens. */
html:not(.has-session), html:not(.has-session) body { background: #fff; }

/* Fill the true viewport edge-to-edge. height:100dvh comes up short of the real screen on the
   iOS standalone PWA, leaving a white strip below the content. position:fixed + inset:0 pins
   #app to the real viewport edges. The "can't scroll to the bottom inside a fixed container"
   bug that this caused before was the deprecated -webkit-overflow-scrolling:touch on .scr-body
   (a no-op on iOS 13+ that builds a miscalculated scroll layer) — removed there. */
#app { display: flex; flex-direction: column; position: fixed; inset: 0; max-width: 480px; margin: 0 auto; overflow: hidden; }
#sbar { height: calc(var(--st) + 10px); background: #000; flex-shrink: 0; transition: background .1s; }
html.light #sbar { background: #fff; }


/* Persistent topbar — always visible above the screen stack */
#persistent-topbar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative; z-index: 50;
  display: none;
}
#persistent-topbar.visible { display: flex; }
html.light #persistent-topbar { background: #fff; border-bottom-color: rgba(0,0,0,0.1); }
#persistent-topbar .topbar-label { font-size: 12px; letter-spacing: 1.5px; color: rgba(255,255,255,0.7); }
#persistent-topbar .topbar-name { font-size: 24px; font-weight: 800; color: rgba(255,255,255,0.95); }
html.light #persistent-topbar .topbar-label { color: rgba(0,0,0,0.55); }
html.light #persistent-topbar .topbar-name { color: rgba(0,0,0,0.88); }
/* Coach hat — perches on top of the avatar when global coach mode is on. */
#coach-hat { position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: #fff; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
html.light #coach-hat { color: #111; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
/* In coach mode the topbar label reads as a status, not a cheer. */
#persistent-topbar.coach .topbar-label { color: rgba(255,255,255,0.92); font-weight: 800; letter-spacing: 1.8px; }
html.light #persistent-topbar.coach .topbar-label { color: rgba(0,0,0,0.82); }
#coach-whistle-badge { position: absolute; top: -4px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: none; align-items: center; justify-content: center; background: #fff; color: #000; border: 1.5px solid #000; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
html.light #coach-whistle-badge { background: #000; color: #fff; border-color: #fff; }
html.light #home-avatar { border-color: rgba(0,0,0,0.2) !important; background: rgba(0,0,0,0.06) !important; }
html.light #home-avatar-inits { color: rgba(0,0,0,0.7) !important; }

/* Squad subbar — shown when squad view is active */
#sq-subbar {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 8px;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 45;
}
#sq-subbar.visible { display: flex; }
html.light #sq-subbar { background: #fff; border-bottom-color: rgba(0,0,0,0.1); }
#sq-subbar-title {
  flex: 1; min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: .5px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
html.light #sq-subbar-title { color: rgba(0,0,0,0.85); }

/* Screens wrapper — contains the sliding screen stack */
#screens-wrap { flex: 1; position: relative; overflow: hidden; }

/* Screen stack */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #000;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.screen.active { transform: translateX(0); pointer-events: all; z-index: 2; }
.screen.slide-left { transform: translateX(-30%); pointer-events: none; z-index: 1; }
html.light .screen { background: #fff; }


/* Top bar */
.topbar {
  flex-shrink: 0; padding: 10px 18px 10px;
  display: flex; align-items: center; gap: 10px;
  background: transparent;   /* the screen's white/black page shows through */
  border-bottom: 1px solid var(--bd);
  position: relative; z-index: 10; overflow: hidden;
}
.home-action-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; padding: 0 11px; height: 36px; display: flex; align-items: center; font-size: 12px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #fff; cursor: pointer; transition: background .15s; white-space: nowrap; }
.home-action-btn:active { background: rgba(255,255,255,0.28); }
#home-subbar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: #000; border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 9; }
html.light #home-subbar { background: #fff; border-bottom-color: rgba(0,0,0,0.1); }
#home-subbar .icon-btn { width: 28px; height: 28px; }
.subbar-action-btn { background: var(--bg3); border: 1px solid var(--bd2); border-radius: 8px; padding: 0 13px; height: 36px; display: flex; align-items: center; font-size: 13px; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--t2); cursor: pointer; transition: background .15s; white-space: nowrap; }
.subbar-action-btn:active { background: var(--bg4); }
.subbar-icon-btn { background: none; border: none; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--t2); transition: opacity .15s; flex-shrink: 0; }
.subbar-icon-btn:active { opacity: .45; }
/* ── Tutorial overlay ─────────────────────────────────────── */
#tutorial-overlay { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:var(--bg1); opacity:0; pointer-events:none; transition:opacity .3s; padding-bottom:env(safe-area-inset-bottom,0px); }
#tutorial-overlay.open { opacity:1; pointer-events:all; }
.tut-header { flex-shrink:0; background:var(--bg1); border-bottom:1px solid var(--bd); padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 14px; display:flex; align-items:center; justify-content:space-between; }
.tut-header-wordmark { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--t1); }
.tut-skip { background:var(--bg2); border:1px solid var(--bd2); border-radius:8px; color:var(--t2); font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; padding:6px 12px; }
.tut-theme-btn { display:inline-flex; align-items:center; gap:6px; }
.tut-slides { flex:1; overflow:hidden; min-height:0; }
.tut-track { display:flex; height:100%; transition:transform .35s cubic-bezier(.4,0,.2,1); }
/* One simple flat icon + one line of copy, centred — readable when zoomed right in. */
.tut-slide { flex-shrink:0; width:100%; height:100%; overflow-y:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 30px; box-sizing:border-box; gap:30px; }
.tut-ico { width:88px; height:88px; flex-shrink:0; border-radius:24px; background:var(--bg2); border:1px solid var(--bd); color:var(--t1); display:flex; align-items:center; justify-content:center; }
.tut-ico svg { width:44px; height:44px; }
.tut-line { font-size:22px; line-height:1.5; font-weight:600; color:var(--t1); max-width:340px; }
.tut-line.big { font-family:'Barlow Condensed',sans-serif; font-size:42px; font-weight:800; letter-spacing:.3px; line-height:1.1; }
@media (prefers-reduced-motion: reduce) { #tutorial-overlay { transition:none; } }

/* Feature-reveal spotlight: dim everything except the highlighted control + explainer card */
/* "Default goal · change" chip inside the loggers — the way back to the goal chooser */
.log-chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:8px 18px 0; }
.log-default-chip { display:flex; align-items:center; gap:5px; width:fit-content; padding:5px 11px; border:1px solid var(--bd); border-radius:999px; background:var(--bg2); font-size:12px; font-weight:700; color:var(--t2); cursor:pointer; }
.log-default-chip span { color:var(--t3); font-weight:600; }
.log-default-chip:active { background:var(--bg3); }

#spot-overlay { position:fixed; inset:0; z-index:1300; cursor:pointer; }
#spot-ring { position:fixed; border-radius:12px; box-shadow:0 0 0 200vmax rgba(0,0,0,.72); border:1.5px solid rgba(255,255,255,.95); transition:top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1); pointer-events:none; }
#spot-ring.no-hole { border:none; }
#spot-card { position:fixed; left:50%; transform:translateX(-50%); width:min(330px, calc(100vw - 36px)); background:var(--bg1); border:1px solid var(--bd); border-radius:16px; padding:16px 18px 13px; box-shadow:0 12px 40px rgba(0,0,0,.4); animation:spotCardIn .3s cubic-bezier(.3,1.2,.5,1); }
@keyframes spotCardIn { from { opacity:0; transform:translateX(-50%) translateY(8px); } }
#spot-title { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:800; color:var(--t1); letter-spacing:.3px; margin-bottom:4px; }
#spot-body { font-size:14px; color:var(--t2); line-height:1.55; }
#spot-foot { display:flex; align-items:center; justify-content:space-between; margin-top:13px; }
.spot-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--bd2); margin-right:5px; }
.spot-dot.on { background:var(--t1); }
.spot-btn { background:var(--t1); color:var(--bg0); border:none; border-radius:9px; padding:8px 20px; font-size:14px; font-weight:700; cursor:pointer; }
.tut-footer { flex-shrink:0; padding:12px 24px 20px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.tut-dots { display:flex; gap:7px; align-items:center; }
.tut-dot { width:7px; height:7px; border-radius:50%; background:var(--bd2); transition:all .25s; cursor:pointer; }
.tut-dot.active { background:var(--t1); width:20px; border-radius:4px; }
.tut-btn { width:100%; max-width:320px; height:50px; border:none; border-radius:14px; background:#fff; color:#000; font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:opacity .15s; box-shadow:0 2px 14px rgba(0,0,0,.35); }
.tut-btn:active { opacity:.8; }
html.light .tut-btn { background:#000; color:#fff; box-shadow:0 2px 14px rgba(0,0,0,.18); }
.tut-btn-ghost { width:100%; max-width:320px; height:44px; border:1.5px solid var(--bd2); border-radius:14px; background:none; color:var(--t2); font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:background .15s; }
.tut-btn-ghost:active { background:var(--bg2); }

/* ── Trophy Room screen ───────────────────────────────────── */
.trophy-section { padding:18px 16px 4px; }
.trophy-section-title { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--t3); margin-bottom:12px; }
.trophy-grid { display:grid; gap:12px; }
.trophy-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.trophy-item.unearned svg { opacity:0.18; filter:grayscale(1) brightness(0.5); }
.trophy-item.unearned .trophy-item-name { color:var(--t3); }
.trophy-item-name { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; color:var(--t2); text-align:center; line-height:1.2; }
.trophy-item-date { font-size:10px; color:var(--t3); text-align:center; line-height:1.3; }
/* ── Achievement celebration overlay ─────────────────────── */
#ach-overlay { position:fixed; inset:0; z-index:950; display:none; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:24px; cursor:pointer; }
#ach-overlay.ach-show { display:flex; }
#ach-card { background:var(--bg2); border:1.5px solid var(--bd2); border-top:2.5px solid var(--bd2); border-radius:24px; padding:0 0 24px; max-width:310px; width:100%; text-align:center; position:relative; overflow:hidden; animation:achCardIn .45s cubic-bezier(.34,1.56,.64,1) both; cursor:default; }
@keyframes achCardIn { from{transform:translateY(48px) scale(.75);opacity:0} to{transform:none;opacity:1} }
#ach-card-glow { position:absolute; top:0; left:0; right:0; height:190px; border-radius:24px 24px 0 0; pointer-events:none; z-index:0; }
#ach-card-shine { position:absolute; top:0; left:15%; right:15%; height:1px; opacity:.65; z-index:1; }
#ach-badge-wrap { display:flex; justify-content:center; align-items:center; padding:26px 24px 8px; position:relative; z-index:1; animation:achBadgeSpin .7s cubic-bezier(.34,1.56,.64,1) .05s both; }
#ach-badge-wrap.ach-badge-locked { animation:none; opacity:.28; filter:grayscale(1) brightness(.6); }
@keyframes achBadgeSpin { from{transform:scale(0) rotate(-180deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
/* strip drop-shadow blur from popup badge shapes */
#ach-badge-wrap polygon, #ach-badge-wrap circle, #ach-badge-wrap path, #ach-badge-wrap rect { filter:none !important; }
.ach-text-body { position:relative; z-index:1; padding:0 22px; }
.ach-type-lbl { font-size:11px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--t2); margin-bottom:5px; }
.ach-name { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:900; color:var(--t1); line-height:1.1; margin-bottom:10px; }
.ach-divider { height:1px; background:var(--bd2); margin:0 0 11px; opacity:.45; }
.ach-desc { font-size:14px; color:var(--t2); line-height:1.5; margin-bottom:6px; }
.ach-squad-ctx { font-size:13px; font-weight:600; color:var(--t3); margin-bottom:4px; }
.ach-earned-date { font-size:12px; color:var(--t2); font-weight:600; letter-spacing:.3px; }
.ach-earned-date.ach-locked-lbl { color:var(--t3); font-style:italic; }
#ach-tap-hint { color:rgba(255,255,255,0.32); font-size:12px; margin-top:16px; letter-spacing:.4px; pointer-events:none; }
/* My Trophies grid */
#ach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:4px 0 16px; }
/* Squad badges section */
#sq-badges-btn { display:flex; align-items:center; gap:8px; margin:0 14px 12px; padding:12px 14px; background:var(--bg1); border:1px solid var(--bd); border-radius:12px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#sq-badges-btn:active { background:var(--bg2); }
#sq-badges-preview { display:flex; gap:6px; align-items:center; flex-wrap:wrap; flex:1; }

.topbar-back {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background .15s;
  color: var(--t2);
}
.topbar-back:active { background: var(--bg3); }
.topbar-title { flex: 1; min-width: 0; overflow: hidden; }
.topbar-label { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 1px; }
.topbar-name { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 700; color: var(--t1); letter-spacing: .5px; line-height: 1.1; white-space: nowrap; overflow: hidden; }
.topbar-actions { display: flex; gap: 7px; align-items: center; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.icon-btn:active { background: var(--bg3); border-color: var(--bd2); }
.icon-btn svg { width: 16px; height: 16px; stroke: var(--t2); }

/* Scrollable body */
.scr-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.scr-body::-webkit-scrollbar { display: none; }
.pad-b { padding-bottom: calc(var(--sb) + 24px); }

/* Section header */
.sh { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: 2px; padding: 16px 18px 7px; font-weight: 700; }

/* ─── HOME ─── */
.greeting-area { padding: 16px 18px 12px; }
.greeting-sub { font-size: 12px; color: var(--t3); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 3px; }
.greeting-h { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--t1); line-height: 1; }
.greeting-h em { color: var(--t1); font-style: normal; }

.squads-list { padding: 10px 14px 0; display: flex; flex-direction: column; gap: 14px; }

/* ── home sort / filter / view controls (flat, black/white only) ── */
#home-controls, #coach-controls, #browse-controls { display:flex; align-items:center; gap:4px; padding:8px 14px 4px; flex-shrink:0; }
.hc-btn, .hc-view-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; background:none; border:none; color:var(--t1); cursor:pointer; border-radius:9px; transition:background .15s,color .15s; flex-shrink:0; }
.hc-btn:active, .hc-view-btn:active { opacity:.55; }
.hc-btn.on { background:var(--t1); color:var(--bg0); }
.hc-badge { position:absolute; top:0; right:0; display:inline-flex; align-items:center; justify-content:center; min-width:14px; height:14px; padding:0 3px; border-radius:7px; background:var(--t1); color:var(--bg0); font-size:10px; font-weight:800; line-height:1; }
.hc-btn.on .hc-badge { background:var(--bg0); color:var(--t1); }
#home-filter-panel, #coach-filter-panel, #browse-filter-panel { margin:4px 14px 6px; border:1px solid var(--bd); border-radius:12px; padding:12px 13px; flex-shrink:0; max-height:55vh; overflow-y:auto; }
.coach-row { display:flex; align-items:center; gap:11px; margin:0 16px 8px; padding:10px 12px; border:1px solid var(--bd); border-radius:12px; background:var(--bg1); cursor:pointer; }
.coach-row:active { background:var(--bg2); }
.coach-row .coach-thumb { width:38px; height:38px; flex-shrink:0; }
.coach-row-main { flex:1; min-width:0; }
.coach-row-title { font-size:14.5px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coach-row-sub { font-size:12px; color:var(--t3); margin-top:2px; line-height:1.5; }
/* Coachee progress rows (coach By-goal cards) */
.coachee-prog-list { margin-top:9px; display:flex; flex-direction:column; gap:8px; }
.coachee-prog { display:flex; align-items:center; gap:8px; }
.coachee-prog .coach-chip-av { width:22px; height:22px; font-size:11px; }
.coachee-prog-name { flex:0 0 auto; max-width:34%; font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coachee-prog-bar { flex:1; height:7px; border-radius:4px; background:var(--bg3); overflow:hidden; }
.coachee-prog-fill { height:100%; border-radius:4px; background:var(--t1); }
.coachee-prog-pct { flex:0 0 auto; font-size:12px; font-weight:800; color:var(--t1); white-space:nowrap; }
/* By-coachee drill-down cards */
.coachee-goals-banner { margin:4px 16px 12px; font-size:14px; font-weight:700; color:var(--t2); line-height:1.5; }
.coachee-goal-card { margin:0 16px 12px; border:1px solid var(--bd); border-radius:16px; overflow:hidden; background:var(--bg1); box-shadow:var(--shadow-sm); cursor:pointer; }
.coachee-goal-card:active { transform:scale(.99); }
.cgc-photo { height:118px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.cgc-emoji { font-size:52px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.cgc-body { padding:12px 14px; }
.cgc-name { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:800; color:var(--t1); letter-spacing:.3px; line-height:1.1; }
.cgc-goal { font-size:14px; color:var(--t2); line-height:1.5; margin-top:3px; }
.cgc-prog { display:flex; align-items:center; gap:10px; margin-top:12px; }
.cgc-prog-bar { flex:1; height:8px; border-radius:4px; background:var(--bg3); overflow:hidden; }
.cgc-prog-fill { height:100%; border-radius:4px; background:var(--t1); }
.cgc-prog-pct { font-size:14px; font-weight:800; color:var(--t1); min-width:34px; text-align:right; }

/* ── Analytics / Insights (Premium) ── */
.set-link-pro { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--bg0); background:var(--t1); border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.ins-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(92px,1fr)); gap:8px; padding:12px 14px 4px; }
.ins-stat { background:var(--bg1); border:1px solid var(--bd); border-radius:12px; padding:12px 8px; text-align:center; box-shadow:var(--shadow-sm); }
.ins-stat-n { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800; color:var(--t1); line-height:1; }
.ins-stat-l { font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; line-height:1.3; }
.ins-heat { display:grid; grid-template-rows:repeat(7, 1fr); grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; margin:0 14px 12px; }
.ins-heat-cell { aspect-ratio:1; border-radius:2px; background:var(--bg3); }
.ins-heat-cell.empty { background:transparent; }
.ins-trend { display:flex; align-items:flex-end; gap:5px; height:92px; margin:0 14px 12px; padding:0 2px; border-bottom:1px solid var(--bd); }
.ins-bar-wrap { flex:1; height:100%; display:flex; align-items:flex-end; }
.ins-bar { width:100%; border-radius:3px 3px 0 0; background:rgba(46,160,90,.8); }
.ins-goals { margin:0 14px; }
.ins-goal { display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--bd); border-radius:12px; background:var(--bg1); margin-bottom:8px; cursor:pointer; box-shadow:var(--shadow-sm); }
.ins-goal:active { background:var(--bg2); }
.ins-goal-emoji { font-size:22px; flex-shrink:0; }
.ins-goal-main { flex:1; min-width:0; }
.ins-goal-name { font-size:14px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ins-goal-sub { font-size:12px; color:var(--t3); margin-top:2px; }

/* ── Enterprise org console ── */
.org-empty { max-width:420px; margin:40px auto; padding:0 18px; text-align:center; }
.org-empty-h { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800; color:var(--t1); }
.org-empty-s { font-size:14px; color:var(--t3); line-height:1.5; margin-top:6px; }
.org-grid { display:grid; grid-template-columns:1fr; gap:14px; padding:12px 14px; }
.org-col { background:var(--bg1); border:1px solid var(--bd); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow-sm); }
.org-sec-h { font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--t3); margin-bottom:10px; }
.org-team-row, .org-coach-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--bd); }
.org-team-row:last-child, .org-coach-row:last-child { border-bottom:none; }
.org-team-name, .org-coach-name { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-team-count { font-size:12px; color:var(--t3); white-space:nowrap; }
.org-coach-row .coach-chip-av { width:28px; height:28px; flex-shrink:0; }
.org-team-sel { background:var(--bg2); border:1px solid var(--bd); border-radius:8px; padding:5px 6px; font-size:13px; color:var(--t1); font-family:'DM Sans',sans-serif; outline:none; max-width:128px; }
.org-mini-btn { background:var(--bg2); border:1px solid var(--bd); border-radius:8px; padding:5px 10px; font-size:13px; font-weight:700; color:var(--t1); cursor:pointer; white-space:nowrap; }
.org-mini-btn:active { opacity:.7; }
.org-mini-btn.add { background:var(--t1); color:var(--bg0); border-color:var(--t1); }
.org-mini-btn.danger { color:var(--rd); }
.org-add { display:flex; gap:8px; margin-top:12px; }
.org-add-input { flex:1; min-width:0; background:var(--bg2); border:1px solid var(--bd); border-radius:8px; padding:8px 10px; font-size:14px; color:var(--t1); font-family:'DM Sans',sans-serif; outline:none; }
.org-add-input:focus { border-color:var(--t1); }
.org-footer { padding:6px 14px 20px; }
.org-section { padding:14px; }
.org-tabstrip { display:flex; gap:2px; padding:2px 10px 0; border-bottom:1px solid var(--bd); }
@media (min-width:760px) { .org-grid { grid-template-columns:1fr 1fr; max-width:900px; margin:0 auto; } }
.org-tpl { border:1px solid var(--bd); border-radius:14px; background:var(--bg1); padding:12px; margin-bottom:10px; }
.org-tpl-head { display:flex; align-items:flex-start; gap:10px; }
.org-tpl-emoji { font-size:22px; line-height:1; flex-shrink:0; }
.org-tpl-main { flex:1; min-width:0; }
.org-tpl-name { font-size:14px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-tpl-vis { flex-shrink:0; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--t3); border:1px solid var(--bd); border-radius:20px; padding:3px 8px; }
.org-tpl-actions { display:flex; gap:8px; margin-top:10px; }
.org-push-picker { margin-top:10px; padding-top:10px; border-top:1px solid var(--bd); display:flex; flex-direction:column; gap:2px; }
.org-push-opt { display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:14px; color:var(--t1); cursor:pointer; }
.org-push-opt input { width:16px; height:16px; flex-shrink:0; accent-color:var(--t1); }
.org-metric-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--bd); }
.org-metric-row:last-child { border-bottom:none; }
.org-metric-row .coach-chip-av { width:30px; height:30px; flex-shrink:0; }
.org-metric-main { flex:1; min-width:0; }
.org-metric-name { font-size:14px; font-weight:600; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-metric-pct { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:800; color:var(--t1); flex-shrink:0; }
.hfp-sec { margin-bottom:13px; }
.hfp-sec:last-child { margin-bottom:0; }
.hfp-sec-hd { font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--t3); margin-bottom:7px; }
.hfp-chips { display:flex; flex-wrap:wrap; gap:6px; }
.hfp-chip { display:inline-flex; align-items:center; gap:5px; background:none; border:1px solid var(--bd); color:var(--t2); border-radius:20px; padding:6px 11px; font-size:13px; font-weight:600; cursor:pointer; user-select:none; transition:all .12s; }
.hfp-chip.on { background:var(--t1); border-color:var(--t1); color:var(--bg0); font-weight:700; }
.hfp-chip svg { flex-shrink:0; }
.hfp-foot { display:flex; justify-content:flex-end; margin-top:11px; }
.hfp-clear { background:none; border:none; color:var(--t3); font-size:13px; font-weight:700; cursor:pointer; padding:4px 2px; }
.hfp-clear:active { color:var(--t1); }
.hfp-sort-row { display:flex; align-items:center; justify-content:space-between; padding:9px 2px; cursor:pointer; border-bottom:1px solid var(--bd); }
.hfp-sort-row:last-child { border-bottom:none; }
.hfp-sort-name { font-size:14px; font-weight:600; color:var(--t1); }
.hfp-sort-row.on .hfp-sort-name { font-weight:800; }
.hfp-sort-dir { font-size:12px; font-weight:700; color:var(--t3); }

/* ── compact goal row (minimized view) — flat, no fill ── */
.squad-row { display:flex; flex-direction:column; gap:3px; background:none; border:1px solid var(--bd); border-radius:12px; padding:11px 13px; cursor:pointer; transition:transform .12s; }
.squad-row:active { transform:scale(.99); }
.squad-row-top { display:flex; align-items:baseline; gap:8px; }
.squad-row-name { flex:1; font-size:14px; font-weight:700; color:var(--t1); line-height:1.25; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; }
.squad-row-pct { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:800; line-height:1; flex-shrink:0; }
.squad-row-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; font-weight:600; color:var(--t3); }
.squad-row-meta .recurrence-tag { font-size:8px; }
.squad-row-cat { display:inline-flex; align-items:center; color:var(--t2); flex-shrink:0; }
.squad-row-cat svg { flex-shrink:0; }
.squad-row-star { color:#FFD600; font-size:12px; flex-shrink:0; }
/* Minimized row: name line, then consistency line (left) + progress ring (right). */
.squad-row-head { display:flex; align-items:center; gap:7px; }
.squad-row-body { display:flex; align-items:center; gap:14px; margin-top:7px; }
.row-trend { flex:1 1 auto; min-width:0; }
.row-trend .spark-wrap { height:42px; }
.spark-wrap-flat { position:relative; height:42px; }
.spark-wrap-flat::after { content:''; position:absolute; left:0; right:0; top:50%; border-top:1.5px dashed var(--bd2); opacity:.55; }
.row-ring { position:relative; width:52px; height:52px; flex:none; }
.row-ring svg { width:100%; height:100%; display:block; }
.row-ring-track { fill:none; stroke:var(--bg3); }
.row-ring-arc { fill:none; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.row-ring-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:14px; letter-spacing:.3px; color:var(--t1); }
.row-ring-check { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--c); }
.row-ring-check svg { width:22px; height:22px; }
.squads-list.is-rows { gap:8px; }
.squads-list.is-rows .squad-group-body { gap:8px; }

.squad-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 0;
  display: flex; align-items: stretch; gap: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: pointer; transition: all .15s; position: relative;
  overflow: hidden;
  border-left: 3px solid transparent;
}
html.light .squad-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.72) 100%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 2px 14px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,0.9);
}
.squad-card .squad-name { color: rgba(255,255,255,0.96); }
.squad-card .squad-meta { color: rgba(255,255,255,0.52); }
html.light .squad-card .squad-name { color: var(--t1); }
html.light .squad-card .squad-meta { color: var(--t2); }
.squad-card.sq-dragging { opacity: 0.25; }
.squad-card.sq-drag-ghost { transform: scale(1.03) rotate(0.8deg); box-shadow: 0 16px 48px rgba(0,0,0,.7); }
.squad-card::before { display: none; }
.squad-card:active { transform: scale(.98); }

.squad-color { width: 96px; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 30px; background-size: cover; background-position: center; border-radius: 12px 10px 10px 12px; position: relative; overflow: hidden; }

/* Tier frames removed — no glow on card photos */
.squad-info { flex: 1; min-width: 0; padding: 11px 0 11px 11px; }
.squad-card-right-pad { padding: 11px 11px 11px 0; }
.squad-name { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .5px; max-width: 100%; }
.squad-meta { font-size: 12px; color: var(--t3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.squad-progress-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.squad-bar-wrap { flex: 1; height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.squad-bar-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.squad-progress-stack { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.squad-progress-stack .squad-bar-wrap { flex: none; }
@keyframes _sq-buzz {
  0%    { background-position: 220% center; }
  18%   { background-position: 220% center; }
  38%   { background-position: -220% center; }
  38.1% { background-position: 220% center; }
  100%  { background-position: 220% center; }
}
.squad-bar-wrap--spk { overflow: hidden; height: 5px; }
.squad-bar-sparkle { background-image: linear-gradient(90deg, var(--bar-c) 15%, rgba(255,255,255,.88) 50%, var(--bar-c) 85%) !important; background-size: 400% 100% !important; animation: _sq-buzz 2.8s linear infinite; transition: none !important; }
.squad-pct { font-size: 11px; color: var(--t3); white-space: nowrap; font-weight: 600; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.squad-card-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 6px; flex-shrink: 0; min-width: 64px; padding: 11px 11px 11px 0; }
.card-days-left { font-size:14px; font-weight:800; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; color:rgba(255,255,255,0.5); white-space:nowrap; }
.card-days-left.urgent { color:var(--rd); }
html.light .card-days-left { color:var(--t2); }
.recurrence-tag { font-size:9px; font-weight:800; font-family:'Barlow Condensed',sans-serif; letter-spacing:1.2px; text-transform:uppercase; padding:2px 5px; border-radius:4px; flex-shrink:0; white-space:nowrap; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.75); border:1px solid rgba(255,255,255,0.18); }
.recurrence-tag--weekly, .recurrence-tag--monthly, .recurrence-tag--yearly, .recurrence-tag--daily, .recurrence-tag--total {}
html.light .recurrence-tag { background:rgba(0,0,0,0.07); color:rgba(0,0,0,0.6); border-color:rgba(0,0,0,0.15); }
.fav-btn { cursor: pointer; padding: 2px; opacity: .5; transition: all .15s; display:flex; align-items:center; }
.fav-btn.on { opacity: 1; }
.fav-btn:active { transform: scale(1.3); }
.notif-btn { cursor:pointer; padding:4px; color:var(--t2); transition:color .15s, transform .15s; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-btn.off { color:var(--t3); }
.notif-btn:active { transform:scale(1.25); }
.boast-btn {
  background: none; border: none;
  width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .15s; color: var(--t1);
}
.boast-btn:active { opacity: .4; }
.my-done-chip { display:inline-flex; align-items:center; gap:6px; margin-top:5px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--gn); }
.my-done-check { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--gn); flex-shrink:0; box-shadow:0 0 8px rgba(74,222,128,.45); }

/* ─── HOME SQUAD CARD V2 (TALL ALBUM CARD) ─── */
.squad-card-v2 {
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform .15s, box-shadow .15s;
}
html.light .squad-card-v2 { box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.squad-card-v2:active { transform: scale(.985); }
.squad-card-v2.sq-dragging { opacity: .25; }
.squad-card-v2.sq-drag-ghost { transform: scale(1.02) rotate(.5deg); box-shadow: 0 20px 56px rgba(0,0,0,.7); border-radius: 16px; }
/* Custom goal photo as a soft backdrop over the whole card. No photo → plain card.
   Brighter than the old whisper-faint wash; a card-colour veil on .sc2-body keeps text + graphs
   legible over it (see below). */
.sc2-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .26; pointer-events: none;
}
html.light .sc2-bg { opacity: .18; }
/* title + goal summary sit at the top of the card body; the fav star rides the top-right corner */
.sc2-head-info { margin-bottom: 16px; position: relative; padding-right: 30px; }
.sc2-head-info .fav-btn { position: absolute; top: 1px; right: 0; }
.sc2-summary {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 600; color: var(--t2);
  line-height: 1.25; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sc2-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 23px; font-weight: 800; color: var(--t1);
  letter-spacing: .5px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Legibility veil: a card-colour gradient behind all the card content so the brighter backdrop
   photo never fights the title, summary or the ring/track graphs. */
.sc2-body { padding: 13px 14px 15px; position: relative; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg1) 42%, transparent), color-mix(in srgb, var(--bg1) 66%, transparent)); }
.sc2-name { text-shadow: 0 1px 3px color-mix(in srgb, var(--bg1) 80%, transparent); }
.sc2-foot-meta .notif-btn { padding: 0; }
.sc2-foot-meta .notif-btn svg { width: 16px; height: 16px; }
.sc2-contrib-row { display:flex; align-items:baseline; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
.sc2-contrib-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--t2); white-space:nowrap; flex-shrink:0; }
.sc2-contrib-val { font-size:13px; font-weight:600; color:var(--t1); line-height:1.35; }
.sc2-perf-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--t3); margin-bottom:3px; }
.sc2-goal-text { font-size:10px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--t2); font-style:italic; }
.sc2-goal-line { font-size:13px; font-style:italic; color:var(--t2); line-height:1.4; margin-bottom:8px; padding-right:38px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; overflow-wrap:break-word; }
.sc2-sub { margin:8px 0 9px; padding:8px 10px; background:var(--bg1); border:1px solid var(--bd); border-radius:10px; }
.sc2-sub-row { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--t2); font-weight:600; }
.sc2-sub-strong { color:var(--t1); font-weight:800; }
.sc2-sub-bar { height:7px; background:var(--bg3); border-radius:5px; overflow:hidden; margin:5px 0; }
.sc2-sub-fill { height:100%; background:linear-gradient(90deg, var(--bl), var(--gn)); border-radius:5px; transition:width .4s; }
.sc2-pct-row { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.sc2-pct-num { font-family:'Barlow Condensed',sans-serif; font-size:38px; font-weight:800; line-height:1; }
.sc2-pct-lbl { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; opacity:.75; }
/* You-vs-group goal breakdown table (home card): ultimate row + recurrence-step row */
.bd { display:grid; grid-template-columns:auto 1fr auto; column-gap:10px; row-gap:1px; align-items:baseline; margin:6px 0 9px; }
.bd-h { font-size:9px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--t3); padding-bottom:1px; }
.bd-h-r { text-align:right; }
.bd-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--t2); white-space:nowrap; }
.bd-you { font-size:13px; font-weight:700; color:var(--t1); white-space:nowrap; }
.bd-group { font-size:14px; font-family:'Barlow Condensed',sans-serif; font-weight:800; text-align:right; white-space:nowrap; }
.bd-bar { grid-column:1/-1; margin:2px 0 8px; }
.bd-bar:last-child { margin-bottom:0; }
.sc2-nudge { font-size:13px; font-weight:600; color:var(--t1); line-height:1.35; margin-bottom:2px; }
.sc2-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; }

/* ─── Goal-card progress tracks (you vs group, to the finish) ─── */
.sc2-tracks { margin: 4px 0 2px; display: flex; flex-direction: column; gap: 16px; }
.trk { position: relative; --c: var(--gn); }
.trk-head { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 22px; }
.trk-label { font-size: 10.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--t3); }
.trk-label-pct { color: var(--t1); }
/* rail tracks reserve headroom above the bar for the count + pace animal */
.trk-rail-track { padding-top: 32px; }
/* your count (e.g. 1/3) floats just above your face on the step bar */
.trk-mynum { position: absolute; bottom: calc(100% + 1px); transform: translateX(-50%); z-index: 5; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--t1); white-space: nowrap; pointer-events: none; }
.trk-stat { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--t1); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .3px; white-space: nowrap; }
.trk-stat svg { width: 12px; height: 12px; color: var(--t1); flex-shrink: 0; }
.trk-rail { position: relative; height: 36px; border-radius: 9px; background: var(--bg3); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.trk-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 9px; background-color: var(--c); background-image: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%); min-width: 8px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
/* Small-count rail rendered as softly-rounded segment tiles (each goal "part" its own tile). */
/* Segmented pills: no grey track and no border/shadow — the rail is transparent so the gaps blend
   into the card background; only the green pill fills are visible. */
.trk-rail-seg { background: transparent; box-shadow: none; }
.trk-segrow { position: absolute; inset: 0; display: flex; gap: 4px; }
.trk-seg { flex: 1; position: relative; background: transparent; overflow: hidden; border-radius: 5px; border: 1px solid var(--bd); }
.trk-seg-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px; background-color: var(--c); background-image: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 55%); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.trk-done .trk-rail-seg { box-shadow: none; }
/* "where you should be" pace target: a bullseye above the bar with a dotted plumb line through it.
   var(--t1) adapts to the theme (black in light mode, white in dark) so it always reads. */
/* a single dot bridges the bullseye to the top of the bar — it no longer runs down through the bars */
.trk-pace { position: absolute; bottom: 100%; height: 4px; width: 0; border-left: 2px dotted var(--t1); opacity: .85; transform: translateX(-1px); z-index: 4; }
/* target icon sits centred above the dot with clearance so it never clips the label/track above */
.trk-pace-flag { position: absolute; left: 0; bottom: calc(100% + 2px); transform: translateX(-50%); color: var(--t1); line-height: 0; pointer-events: none; }
.trk-pace-flag svg { width: 15px; height: 15px; display: block; }
/* custom bullseye target — themed by swapping the white/black asset (raster can't use currentColor) */
.trk-target-ico { width: 15px; height: 15px; display: block; background: center / contain no-repeat url('/img/pace-target.png'); }
html.light .trk-target-ico { background-image: url('/img/pace-target-light.png'); }
/* markers sit inside the bar; white with a dark halo so they pop on any fill colour */
.trk-mk { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3; color: #fff; line-height: 0; filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 1px 1.5px rgba(0,0,0,.6)); pointer-events: none; }
.trk-mk svg { width: 18px; height: 18px; display: block; }
.trk-together svg { width: 17px; height: 17px; }
/* avatar markers — real faces for you/the group. White ring so they pop on any fill and
   so overlapping faces in a stack stay separated. */
.trk-av { position: relative; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--bg4); box-shadow: 0 0 0 1.5px #fff; }
.trk-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trk-av-i { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; line-height: 1; color: var(--t1); }
.trk-av svg { width: 14px; height: 14px; color: var(--t1); }
.trk-av-more { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; color: var(--t1); background: var(--bg1); }
/* stack: each subsequent face overlaps the previous; earlier faces (you first) sit on top */
.trk-stack { display: inline-flex; align-items: center; }
.trk-stack .trk-av:not(:first-child) { margin-left: -11px; }
/* clusters near the start/end of the bar pack much tighter so they don't bulge inward */
.trk-stack-tight .trk-av:not(:first-child) { margin-left: -17px; }
.trk-stack .trk-av:nth-child(1) { z-index: 6; }
.trk-stack .trk-av:nth-child(2) { z-index: 5; }
.trk-stack .trk-av:nth-child(3) { z-index: 4; }
.trk-stack .trk-av:nth-child(4) { z-index: 3; }
.trk-stack .trk-av:nth-child(5) { z-index: 2; }
/* header legend faces sit inline with the stat text — slightly smaller, ring matches card */
.trk-stat .trk-av { width: 15px; height: 15px; box-shadow: 0 0 0 1.5px var(--bg1); }
.trk-stat .trk-av-i { font-size: 9px; }
.trk-stat .trk-av svg { width: 9px; height: 9px; }
/* label + optional "part X of N" caption sit centred BELOW the bar; deadline tucks top-right */
.trk-foot { position: relative; margin-top: 9px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.trk-part { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--t2); }
.trk-dl { position: absolute; top: 0; right: 0; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--t3); white-space: nowrap; }
.trk-dl.urgent { color: var(--rd); text-transform: uppercase; }
/* Dark mode: the muted progress labels read too faint (--t3 is #505050) — brighten for legibility. */
html:not(.light) .trk-label,
html:not(.light) .trk-dl   { color: rgba(255,255,255,0.72); }
html:not(.light) .trk-part { color: rgba(255,255,255,0.85); }
/* ultimate-as-histogram: one column per period, height + colour = that period's group %.
   0% / not-yet = a flat grey stub that grows + warms (amber→yellow→green) as the week fills */
.trk-hist { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 64px; padding: 0 1px; }
/* subtle 50% reference line so it's easy to read whether a column is above or below half */
.trk-hist::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--bd2); opacity: .6; z-index: 2; pointer-events: none; }
/* each period is a box (the slot) so you can see how full it's getting */
.trk-col { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; height: 100%; border: 1px solid var(--bd); border-radius: 3px; background: var(--bg2); overflow: hidden; }
.trk-col-bar { width: 100%; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.trk-col-future { opacity: .6; }
.trk-done .trk-rail:not(.trk-rail-seg) { box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
/* pulsing glow on YOUR marker when ahead of pace (moved off the bar onto the icon) */
.trk-mk-ahead { animation: trkMkPulse 1.8s ease-in-out infinite; }
@keyframes trkMkPulse {
  0%,100% { filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 2px var(--c)); }
  50%     { filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 7px var(--c)); }
}
/* an animal walks on top of the rail, above your marker: 🐇 when ahead of pace, 🐢 when behind */
.trk-animal { position: absolute; bottom: calc(100% + 17px); transform: translateX(-50%); font-size: 14px; line-height: 1; z-index: 5; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
/* emoji default-face left; flip to face right toward the finish line (inner span so the walk animation's transform is untouched) */
.trk-animal-ico { display: inline-block; transform: scaleX(-1); }
.trk-animal--ahead  { animation: trkHop 0.9s ease-in-out infinite; }
.trk-animal--behind { animation: trkPlod 2.8s ease-in-out infinite; }
@keyframes trkHop  { 0%,100% { transform: translateX(-50%) translateY(0); } 35% { transform: translateX(-50%) translateY(-4px); } 55% { transform: translateX(-50%) translateY(-2px); } }
@keyframes trkPlod { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-1.5px); } }
/* faint auto-stacked "overall to the finish" track */
.trk-faint .trk-rail { height: 28px; border-radius: 8px; opacity: .85; }
.trk-faint .trk-fill { border-radius: 8px; }
.trk-faint .trk-mk svg { width: 15px; height: 15px; }
.trk-faint .trk-av { width: 20px; height: 20px; }
.trk-faint .trk-av-i { font-size: 10px; }
.trk-faint .trk-pace-flag svg { width: 13px; height: 13px; }
.trk-faint .trk-animal { font-size: 13px; }
.trk-faint .trk-target-ico { width: 13px; height: 13px; }

/* ── Dual progress ring (actionable target): outer arc = group, inner arc = you ── */
.trk-ring { display: flex; flex-direction: column; align-items: center; }
.ring-wrap { position: relative; width: 132px; height: 132px; }
.trk-faint .ring-wrap { width: 104px; height: 104px; }
.ring-svg { width: 100%; height: 100%; display: block; }
.ring-track { fill: none; stroke: var(--bg3); }
.ring-arc { fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1); }
.ring-pace { stroke: var(--t1); stroke-width: 2.4; opacity: .8; }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.ring-c-main { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; color: var(--t1); letter-spacing: .5px; }
.trk-faint .ring-c-main { font-size: 24px; }
.ring-c-sep { opacity: .4; margin: 0 1px; font-weight: 600; }
.ring-c-sub { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); }
.ring-check { color: var(--c); line-height: 0; }
.ring-check svg { width: 36px; height: 36px; display: block; }
.ring-legend { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.ring-leg { display: inline-flex; align-items: center; gap: 5px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--t1); letter-spacing: .3px; }
.ring-leg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
html:not(.light) .ring-leg { color: rgba(255,255,255,.85); }

/* ── Consistency line (ultimate progress over time) ── */
.spark-wrap { position: relative; width: 100%; height: 66px; }
.trk-faint .spark-wrap { height: 50px; }
/* shaded zone above the 100% line; its lower edge IS the target line */
.spark-band { position: absolute; left: 0; right: 0; top: 0; height: var(--y100); background: linear-gradient(180deg, rgba(0,200,120,.12), rgba(0,200,120,.03)); border-bottom: 1px dashed var(--bd2); pointer-events: none; }
.spark-band-l { position: absolute; right: 3px; top: 1px; font-size: 9px; font-weight: 800; letter-spacing: .4px; color: var(--t3); z-index: 2; }
.spark-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.spark-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-area { stroke: none; opacity: .13; }
.spark-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 1.5px var(--bg1); z-index: 3; }
.spark-dot-dip { width: 8px; height: 8px; z-index: 4; }
.spark-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--bd2); opacity: .7; }
.spark-summary { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--t2); }
html:not(.light) .spark-summary { color: rgba(255,255,255,.8); }
.spark-empty-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 22px; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: var(--t3); }
/* Empty state has no trend line yet, so the 100% band's data-driven headroom is meaningless and
   makes "no data" cards differ. Pin it to a thin, consistent strip across every goal. */
.trk-spark-empty .spark-band, .trk-spark-empty .spark-band-l { display: none; }
.spark-empty-msg span { background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 12px; }

/* Card footer — graphic, minimal words */
.sc2-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.sc2-foot-meta { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
/* Deadline, absolutely centered in the foot between the bell (left) and the + (right). */
.sc2-foot-dl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--t3); white-space: nowrap; pointer-events: none; }
.sc2-foot-dl.urgent { color: var(--rd); text-transform: uppercase; letter-spacing: .5px; }
html:not(.light) .sc2-foot-dl { color: rgba(255,255,255,.7); }
.sc2-dl { font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--t3); }
.sc2-dl.urgent { color: var(--rd); text-transform: uppercase; letter-spacing: .5px; }
.sc2-streak { font-size: 13px; font-weight: 800; color: var(--t1); display: inline-flex; align-items: center; gap: 1px; font-family: 'Barlow Condensed', sans-serif; }

/* ─── SQUAD HERO OPEN / CLOSE ANIMATION ─── */
#s-squad.sq-hero-enter {
  transform: none !important;
}
#s-squad.sq-hero-enter { pointer-events: none; }

.new-squad-btn {
  margin: 10px 14px 0;
  background: var(--bg1); border: 1.5px dashed var(--bd2);
  border-radius: 12px; padding: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: all .15s;
}
.new-squad-btn:active { background: var(--bg2); border-color: var(--t1); }
.new-squad-btn span { font-size: 13px; color: var(--bl); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; }

/* ─── SQUAD DETAIL ─── */
.squad-header-card { margin: 10px 14px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--bd); }
.squad-photo { width: 100%; height: 180px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.squad-photo-emoji { font-size: 68px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
#sq-info-section { display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 4px; }
.sq-info-card { display: flex; flex-direction: column; gap: 8px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); }
.sq-info-card-lbl { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--t3); }
.squad-photo-name { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.sq-action-row { display: flex; gap: 10px; padding: 12px 14px; background: var(--bg1); border-top: 1px solid var(--bd); }
.sq-invite-btn { flex: 1; padding: 12px 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--bd); color: var(--t1); font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-transform: uppercase; transition: background .15s; }
.sq-invite-btn:active { background: var(--bg3); }
.sq-log-btn { flex: 2; padding: 14px 10px; border-radius: 12px; background: #fff; border: none; color: #000; font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; letter-spacing: .5px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; transition: opacity .15s, transform .1s; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
html.light .sq-log-btn { background: #000; color: #fff; }
.sq-log-btn:active { opacity: .75; transform: scale(.97); }
.sq-log-btn.ended { background: var(--bg2); color: var(--t3); box-shadow: none; cursor: default; }
html.light .sq-log-btn.ended { background: var(--bg2); color: var(--t3); }

#sq-deadline-row { margin: 10px 14px 16px; font-size: 13px; color: var(--t2); text-align: center; }
#sq-deadline-row strong { color: var(--t1); }
#sq-subgoal { margin: 10px 14px 0; background: var(--bg1); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; }
.sq-sub-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--t3); margin-bottom: 7px; }
.sq-sub-count { color: var(--t1); }
.sq-sub-bar { height: 8px; background: var(--bg3); border-radius: 6px; overflow: hidden; }
.sq-sub-fill { height: 100%; background: linear-gradient(90deg, var(--bl), var(--gn)); border-radius: 6px; transition: width .4s; }
.sq-sub-foot { font-size: 12px; color: var(--t2); margin-top: 7px; }
.sq-sub-foot strong { color: var(--t1); }
.squad-stats-row { display: flex; align-items: center; padding: 12px 14px; gap: 10px; background: var(--bg1); position: relative; overflow: hidden; }
.squad-stats-row::after { display: none; }
.squad-stat { text-align: center; flex: 1; }
.squad-stat-n { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 800; color: var(--t1); line-height: 1; }
.squad-stat-l { font-size: 10px; color: var(--t3); margin-top: 2px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* ── Goal view: Summary (compact) mode ── */
#sq-view-btn.on { color: var(--t1); }
#sq-summary-head { display: none; }
#s-squad.summary-view #sq-summary-head { display: block; }
/* the custom summary head replaces the full hero card + motiv card */
#s-squad.summary-view .squad-header-card,
#s-squad.summary-view #sq-motiv-card { display: none !important; }
/* compact summary top card: minimized full image left, goal + one-line stats right */
.sq-sum-card { display: flex; gap: 11px; align-items: center; margin: 12px 14px 9px; }
.sq-sum-thumb { width: 66px; height: 66px; border-radius: 12px; background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--bg2); border: 1px solid var(--bd); flex-shrink: 0; }
.sq-sum-info { flex: 1; min-width: 0; }
.sq-sum-goal { font-size: 15px; font-weight: 800; color: var(--t1); line-height: 1.25; margin-bottom: 4px; word-break: break-word; }
.sq-sum-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 5px; font-size: 13px; color: var(--t2); line-height: 1.5; }
.sq-sum-ult, .sq-sum-wk { font-weight: 700; color: var(--t1); }
.sq-sum-wk-label { font-weight: 700; color: var(--t2); }
.sq-sum-dl, .sq-sum-sep { color: var(--t3); }
#sq-summary-head .sq-log-btn { margin: 0 14px 10px; }

/* ── Phase 2: per-tile expand/collapse chevrons (summary view) ── */
.tile-chevron { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: var(--bg2); color: var(--t2); border-radius: 8px; cursor: pointer; padding: 0; flex-shrink: 0; }
.tile-chevron:active { transform: scale(.92); }
.corner-chev { position: absolute; top: 8px; right: 8px; z-index: 6; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* each summary log sits in a relatively-positioned wrapper so its chevron pins to the corner */
.tile-wrap { position: relative; margin: 0 14px 6px; }
.tile-wrap > .boast-compact, .tile-wrap > .boast-card { margin: 0 !important; }
.tile-wrap .boast-compact { padding-right: 42px; }
/* summary head card chevron */
.sq-sum-card { position: relative; }
.sq-sum-info { padding-right: 26px; }
.sq-sum-card .corner-chev { top: 0; right: 0; }
/* leaderboard section-header chevron — only in summary view */
.sh-tile { display: flex; align-items: center; justify-content: space-between; }
.sh-chevron { display: none; }
#s-squad.summary-view .sh-chevron { display: inline-flex; }
/* head full-card chevron (over the photo) — only in summary view */
.squad-header-card { position: relative; }
.head-chevron { position: absolute; top: 10px; right: 10px; z-index: 6; display: none; background: rgba(0,0,0,.5); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
#s-squad.summary-view .head-chevron { display: inline-flex; }
/* head expanded → swap the summary card for the full hero card */
#s-squad.summary-view.head-expanded #sq-summary-head { display: none; }
#s-squad.summary-view.head-expanded .squad-header-card { display: block !important; }
/* collapsed leaderboard: top 3 in one row — medal + avatar + current % */
.lb-compact { display: flex; align-items: center; justify-content: space-around; gap: 8px; padding: 11px 10px; }
.lb-compact-item { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lb-compact-item.lb-you { padding: 3px 8px; margin: -3px 0; border-radius: 999px; background: var(--bg3); }
.lb-compact-medal { font-size: 15px; line-height: 1; flex-shrink: 0; }
.lb-compact-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.lb-compact-pct { font-size: 14px; font-weight: 800; white-space: nowrap; }
/* expanded log: keep header text clear of the corner chevron */
.tile-wrap > .boast-card .boast-card-header { padding-right: 32px; }
/* rejected log in collapsed view: darker grey + muted so it reads as "doesn't count" */
.boast-compact--rejected { background: var(--bg0); opacity: .62; }
.boast-compact--rejected .boast-compact-name { color: var(--t3); text-decoration: line-through; }
/* compact log rows */
.boast-compact { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin: 0 14px 6px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--shadow-sm); }
.boast-compact-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; overflow: hidden; }
.boast-compact-name { font-size: 14px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.boast-compact-time { font-size: 11px; color: var(--t3); flex-shrink: 0; }
.boast-compact-stat { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--t2); flex-shrink: 0; }
.boast-compact-stat svg { display: block; }
.squad-stat-div { width: 1px; height: 30px; background: var(--bd); }
.squad-info-text { font-size: 14px; color: var(--t1); line-height: 1.5; flex: 1; }
.squad-info-people { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.squad-info-people .coach-chips { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.squad-info-people .coach-chip { margin: 0; }

/* ── Goal-view tabs ── */
/* Bottom nav bar (last flex child of #s-squad). A docked DARK bar in both themes (Steam-style)
   so it's clearly distinct from content and the home-indicator strip reads as part of the bar,
   not blank white. padding-bottom:var(--sb) fills the curve area with the bar's own background. */
#sq-tabhead { flex: 0 0 auto; z-index: 6; background: #000; border-top: 1px solid rgba(255,255,255,.10); padding-bottom: var(--sb); box-shadow: none; }
#sq-logbar { padding: 9px 14px 7px; }
#s-squad.coach-mode #sq-logbar { display: none; }
/* Log button pops white on the dark bar (overrides the theme-based .sq-log-btn colors). */
#sq-tabhead .sq-log-btn { background: #fff; color: #000; }
#sq-tabhead .sq-log-btn.ended { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); box-shadow: none; }
#sq-tabs { display: flex; padding: 0 4px; }
/* Goal screen: the bottom bar owns the safe area, so the scroll body doesn't reserve it. */
#s-squad .scr-body.pad-b { padding-bottom: 14px; }
.sq-tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 7px 2px 6px; background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; -webkit-tap-highlight-color: transparent; }
.sq-tab svg { width: 25px; height: 25px; }
.sq-tab.active { color: #fff; }
.sq-tab:active { opacity: .55; }
.sq-tab.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: #fff; }
.sq-tab-ico { position: relative; display: inline-flex; }
.sq-tab-dot { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; display: inline-block; }
/* Light mode: the bar inverts to a clean white surface (chrome must follow the theme). */
html.light #sq-tabhead { background: #fff; border-top-color: var(--bd); box-shadow: 0 -8px 24px rgba(0,0,0,.06); }
html.light #sq-tabhead .sq-log-btn { background: #000; color: #fff; }
html.light #sq-tabhead .sq-log-btn.ended { background: var(--bg2); color: var(--t3); }
html.light .sq-tab { color: var(--t3); }
html.light .sq-tab.active { color: var(--t1); }
html.light .sq-tab.active::after { background: var(--t1); }
html.light .sq-tab-dot { background: var(--t1); }
#sq-tab-content { padding-top: 10px; }
.sq-logs-total { margin: 2px 14px 12px; padding: 9px 13px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 10px; font-size: 14px; color: var(--t3); }
.sq-logs-total b { color: var(--t1); font-weight: 800; font-size: 15px; }
.sq-panel { display: none; }
.sq-panel.active { display: block; }

/* ── Global bottom nav (dark bar, create button is the center slot) ──
   #app-nav-wrap is the flex child (controls visibility).
   #app-nav is the DARK bar (Steam-style). The create button is just another flex slot in the
   middle of the row — inline with the tabs, not raised — so nothing sticks out above the bar.
   padding-bottom is INTERNAL — the bar bg always fills to the screen edge (flex pins it there) —
   so ~0.55×var(--sb) just lifts the icons off the home-indicator line without a floaty gap. */
#app-nav-wrap { display: none; flex: 0 0 auto; position: relative; z-index: 40; background: #000; }
#app-nav-wrap.visible { display: block; }
#app-nav { display: flex; background: #000; border-top: 1px solid rgba(255,255,255,.10); padding: 0 4px var(--sb); box-shadow: none; }
.app-tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 7px 2px 5px; background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .2px; -webkit-tap-highlight-color: transparent; }
.app-tab svg { width: 23px; height: 23px; }
.app-tab.active { color: #fff; }
.app-tab:active { opacity: .55; }
#app-nav { position: relative; }
#nav-ink { position: absolute; top: 0; left: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #fff; opacity: 0; transition: left .32s cubic-bezier(.3,.8,.3,1), opacity .2s; pointer-events: none; }
.app-tab-ico { position: relative; display: inline-flex; }
.app-tab-dot { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; display: inline-block; }
html.light #app-nav { background: #fff; border-top-color: var(--bd); box-shadow: 0 -8px 24px rgba(0,0,0,.06); }
html.light #app-nav-wrap { background: #fff; }
html.light .app-tab { color: var(--t3); }
html.light .app-tab.active { color: var(--t1); }
html.light #nav-ink { background: var(--t1); }

/* Center create slot — the disc is oversized and lifted so it breaks out of the bar's top edge,
   reading as the bar's own highlight. The thick bar-coloured ring makes the cut-out look clean. */
#fab-create { overflow: visible; }
#fab-create .fab-create-disc { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-top: -30px; border-radius: 50%; background: #fff; color: #000; border: 4px solid #000; box-shadow: 0 4px 16px rgba(0,0,0,.45); transition: transform .12s; }
#fab-create .fab-create-disc svg { width: 28px; height: 28px; }
#fab-create:active { opacity: 1; }
#fab-create:active .fab-create-disc { transform: scale(.92); }
html.light #fab-create .fab-create-disc { background: #000; color: #fff; border-color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.22); }

/* Suppress the horizontal slide when switching root tabs (instant swap, not a push). */
#screens-wrap.no-anim .screen { transition: none !important; }

/* ── Dashboard ── */
#dash-body { padding: 14px 14px 24px; }
.dash-card { background: var(--bg1); border: 1px solid var(--bd); border-radius: 16px; padding: 16px 16px 14px; margin-bottom: 14px; }
.dash-card-title { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t3); margin-bottom: 14px; }
.dash-card-sub { font-size: 12px; color: var(--t3); line-height: 1.5; margin: -9px 0 13px; }
.dash-glance { display: flex; }
.dash-glance-cell { flex: 1; text-align: center; padding: 2px 4px; border-left: 1px solid var(--bd); }
.dash-glance-cell:first-child { border-left: none; }
.dash-glance-n { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 800; color: var(--t1); line-height: 1.05; }
.dash-glance-l { font-size: 11px; color: var(--t3); font-weight: 600; margin-top: 3px; }
.dash-focus-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--bd); cursor: pointer; }
.dash-focus-row:first-of-type { border-top: none; }
.dash-focus-row:active { opacity: .6; }
.dash-focus-emoji { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.dash-focus-main { flex: 1; min-width: 0; }
.dash-focus-name { font-size: 14px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-focus-bar { margin-top: 5px; height: 7px; border-radius: 4px; background: var(--bg3); overflow: hidden; }
.dash-focus-bar i { display: block; height: 100%; border-radius: 4px; background: var(--t1); }
.dash-focus-right { flex: 0 0 auto; text-align: right; }
.dash-focus-right b { display: block; font-size: 13px; font-weight: 800; color: var(--t1); }
.dash-focus-right span { font-size: 11px; color: var(--t3); }
.dash-wheel-wrap { display: flex; align-items: center; gap: 18px; }
.dash-wheel { flex: 0 0 auto; position: relative; }
.dash-wheel-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dash-wheel-pct { font-family: 'Barlow Condensed', sans-serif; font-size: 34px; font-weight: 800; color: var(--t1); line-height: 1; }
.dash-wheel-sub { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--t3); margin-top: 3px; }
.dash-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.dash-legend-row { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.dash-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dash-legend-name { flex: 1; min-width: 0; color: var(--t2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-legend-name svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-legend-pct { font-weight: 700; color: var(--t1); font-variant-numeric: tabular-nums; }
.dash-chart-svg { width: 100%; display: block; overflow: visible; }
.dash-axis-row { display: flex; justify-content: space-between; margin-top: 6px; }
.dash-axis-lbl { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--t3); text-transform: uppercase; }
.dash-empty { text-align: center; color: var(--t3); font-size: 14px; padding: 26px 16px; line-height: 1.6; }
.dash-prow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bd); }
.dash-prow:first-of-type { border-top: none; }
.dash-prow-main { flex: 1; min-width: 0; }
.dash-prow-name { font-size: 14px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-prow-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }
.dash-prow-ring { flex: 0 0 auto; }
.dash-prow { cursor: pointer; }
.dash-prow:active { opacity: .6; }
.dash-prow-emoji { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* ── Log chooser (the + button): goal rows + default star ── */
.lp-row { display: flex; align-items: center; gap: 12px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 14px; padding: 13px 15px; cursor: pointer; transition: background .15s; }
.lp-row:active { background: var(--bg2); }
.lp-emoji { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--t1); }
.lp-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-star { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--t3); border-radius: 50%; }
.lp-star:active { background: var(--bg2); }
.lp-star.on { color: var(--t1); }
.lp-new { border-style: dashed; background: transparent; }
.lp-new .lp-emoji { background: transparent; border: 1.5px dashed var(--bd2); color: var(--t2); }

/* Chat/Hotline: fill the viewport so the composer is always anchored to the bottom */
#s-squad.chat-mode .scr-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
#s-squad.chat-mode #sq-tab-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 0; }
#s-squad.chat-mode .sq-panel.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#s-squad.chat-mode #sq-panel-chat .sq-chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#s-squad.chat-mode #sq-hotline-host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#s-squad.chat-mode #sq-hotline-host .sq-chat-list,
#s-squad.chat-mode #sq-hotline-host .hotline-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ── Goal chat ── */
.sq-chat-list { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 10px; }
.sq-chat-empty { text-align: center; color: var(--t3); font-size: 14px; padding: 30px 16px; line-height: 1.6; }
.sq-chat-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; }
.sq-chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.sq-chat-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--bg3); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--t2); }
.sq-chat-bubble { background: var(--bg2); border: 1px solid var(--bd); border-radius: 14px; padding: 7px 11px; min-width: 0; }
.sq-chat-msg.mine .sq-chat-bubble { background: var(--t1); border-color: var(--t1); }
.sq-chat-msg.mine .sq-chat-text, .sq-chat-msg.mine .sq-chat-meta { color: var(--bg0); }
.sq-chat-msg.mine .sq-chat-time { color: var(--bg0); opacity: .6; }
.sq-chat-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--t2); margin-bottom: 2px; }
.sq-chat-time { font-weight: 600; color: var(--t3); font-size: 11px; }
.sq-chat-text { font-size: 14px; color: var(--t1); line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; }
/* coach messages in the general chat: distinct font + Coach tag */
.sq-chat-msg.coach .sq-chat-bubble { background: var(--bg1); border-color: var(--bd2); }
.sq-chat-msg.coach .sq-chat-text { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; letter-spacing: .2px; font-weight: 600; }
.sq-chat-composer { position: sticky; bottom: 0; flex: 0 0 auto; display: flex; gap: 8px; align-items: center; padding: 10px 14px calc(var(--sb) + 10px); background: var(--bg0); border-top: 1px solid var(--bd); }
.sq-chat-input { flex: 1; background: var(--bg1); border: 1px solid var(--bd); border-radius: 20px; padding: 10px 14px; font-size: 14px; color: var(--t1); font-family: 'DM Sans', sans-serif; outline: none; }
.sq-chat-input:focus { border-color: var(--t1); }
.sq-chat-send { flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--t1); color: var(--bg0); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sq-chat-send:active { opacity: .7; }

/* ── Coach Hotline ── */
.hotline-list { padding: 6px 0; }
.hotline-row { display: flex; align-items: center; gap: 11px; padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--bd); }
.hotline-row:active { background: var(--bg2); }
.hotline-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; background: var(--bg3); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--t2); }
.hotline-row-main { flex: 1; min-width: 0; }
.hotline-row-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.hotline-row-prev { font-size: 13px; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.hotline-row-time { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--t3); }
.hotline-thread-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--bd); }
.hotline-back { background: none; border: none; color: var(--t1); font-size: 14px; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; padding: 0; }
.hotline-thread-name { font-size: 16px; font-weight: 800; color: var(--t1); font-family: 'Barlow Condensed', sans-serif; letter-spacing: .3px; }
.squad-info-text.rules { font-size: 13px; color: var(--t2); }
@keyframes legendary-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.squad-stats-row.legendary { background: linear-gradient(90deg, rgba(0,229,204,.18) 0%, rgba(0,200,160,.12) 25%, rgba(0,255,220,.22) 50%, rgba(0,200,160,.12) 75%, rgba(0,229,204,.18) 100%); background-size: 300% 100%; animation: legendary-shimmer 1.8s ease-in-out infinite; }
.squad-stats-row.legendary::after { display: none; }

/* Members */
.member-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.member-bar-wrap { margin-top: 5px; height: 4px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.member-bar-fill { height: 100%; border-radius: 3px; transition: width .7s cubic-bezier(.4,0,.2,1); }
/* Leaderboard rails — home-card style: segment tiles for small count goals, smooth bar otherwise */
.lb-rail { margin-top: 7px; height: 10px; border-radius: 5px; background: var(--bg3); overflow: hidden; }
.lb-rail.slim { margin-top: 6px; height: 6px; border-radius: 3px; }
.lb-seg.slim { height: 6px; border-radius: 3px; }
.lb-rail-fill { height: 100%; border-radius: 5px; transition: width .7s cubic-bezier(.4,0,.2,1); }
.lb-rail.seg { display: flex; gap: 3px; background: transparent; overflow: visible; }
.lb-seg { flex: 1; height: 10px; border-radius: 4px; background: var(--bg3); overflow: hidden; }
.lb-seg-fill { height: 100%; transition: width .7s cubic-bezier(.4,0,.2,1); }

.lb-sect-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.lb-sect-head > span:first-child { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--t3); }
.lb-sect-stat { flex: 1; font-size: 12px; color: var(--t2); font-weight: 600; }
.lb-sect-head b { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 800; }
.lb-mom-ico { display: inline-flex; color: var(--t2); margin-right: 1px; }
.lb-sect-stat svg { vertical-align: -1px; }
.lb-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.lb-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bg3); flex: 0 0 auto; }
.lb-dot.cur { box-shadow: 0 0 0 1.5px var(--t2); }
.lb-dot.future { opacity: .4; }
/* Encouragement marquee above the leaderboard */
#sq-motiv-card .lb-marquee, .lb-marquee { display: flex; overflow: hidden; background: var(--bg1); border: 1px solid var(--bd); border-radius: 999px; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lb-mq-half { flex-shrink: 0; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--t2); letter-spacing: .2px; animation: lbMq 22s linear infinite; }
@keyframes lbMq { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .lb-mq-half { animation: none; } }
.you-tag { font-size: 10px; background: var(--gndim); color: var(--gn); border: 1px solid var(--gnbrd); border-radius: 4px; padding: 1px 5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }

/* Leaderboard */
.lb-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--bd); transition: background .3s; }
.lb-row:last-child { border-bottom: none; }
.lb-row.lb-you { border-left: 3px solid var(--gn); padding-left: 11px; }
.lb-rank { width: 26px; text-align: center; flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; color: var(--t3); line-height: 1; }
.lb-rank.medal { font-size: 20px; }
.lb-info { flex: 1; min-width: 0; }
.lb-name-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; }
.lb-name { font-size: 14px; font-weight: 600; color: var(--t1); }
.lb-tier { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; }
.lb-pace-tag { font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; color: var(--rd); background: var(--rddim, rgba(220,60,60,.12)); border: 1px solid var(--rdbrd, rgba(220,60,60,.3)); white-space: nowrap; }
.lb-right { text-align: right; flex-shrink: 0; min-width: 44px; }
.lb-pct { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; line-height: 1; }
.lb-sub { font-size: 11px; color: var(--t3); margin-top: 2px; }

/* Feed */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gn); animation: pulse 2s infinite; box-shadow: 0 0 6px var(--gn); flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.4)} }
/* ── Chat bubbles (message kind) ── */
.feed-sep { display: flex; align-items: center; justify-content: center; height: 18px; }
.feed-sep::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--bd2); }

/* ── Boast cards (workout kind) ── */
.boast-card { margin: 4px 12px; border-radius: 16px; overflow: hidden; border: 1px solid var(--bd); box-shadow: 0 3px 14px rgba(0,0,0,.32); }
html.light .boast-card { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.boast-card-accent { height: 5px; }
.boast-card-body { padding: 14px 15px 11px; background: var(--bg1); }
.boast-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.boast-card-av { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; font-family: 'Barlow Condensed', sans-serif; overflow: hidden; }
.boast-card-meta { flex: 1; min-width: 0; }
.boast-card-nameline { display: flex; align-items: center; gap: 6px; }
.boast-card-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.boast-card-medal { font-size: 14px; line-height: 1; }
.boast-card-headline { font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-top: 1px; }
.boast-card-note { font-size: 14px; color: var(--t2); font-style: italic; margin: 8px 0; line-height: 1.45; padding: 7px 10px; background: rgba(255,255,255,0.04); border-radius: 8px; border-left: 2px solid var(--bd2); }
html.light .boast-card-note { background: rgba(0,0,0,.03); }
.boast-flag { font-size: 12px; font-weight: 600; color: var(--rd); background: var(--rddim, rgba(220,60,60,.1)); border: 1px solid var(--rdbrd, rgba(220,60,60,.28)); border-radius: 8px; padding: 6px 10px; margin: 8px 0 0; line-height: 1.4; }
/* Per-log approval (rule-breaking logs) */
.boast-approval { margin-top: 8px; border-radius: 10px; padding: 8px 11px; font-size: 13px; line-height: 1.45; }
.boast-approval.pending { background: var(--rddim, rgba(220,60,60,.1)); border: 1px solid var(--rdbrd, rgba(220,60,60,.28)); }
.boast-approval.rejected { background: var(--rddim, rgba(220,60,60,.12)); border: 1px solid var(--rdbrd, rgba(220,60,60,.32)); color: var(--rd); font-weight: 600; }
.appr-msg { color: var(--t2); margin-bottom: 7px; }
.appr-msg strong { color: var(--t1); }
.appr-actions { display: flex; gap: 8px; }
.appr-btn { flex: 1; border-radius: 8px; padding: 8px 0; font-size: 13px; font-weight: 800; letter-spacing: .3px; cursor: pointer; border: 1px solid; -webkit-tap-highlight-color: transparent; }
.appr-btn.approve { background: var(--gndim); border-color: var(--gnbrd); color: var(--gn); }
.appr-btn.reject { background: transparent; border-color: var(--rdbrd, rgba(220,60,60,.32)); color: var(--rd); }
.appr-wait { color: var(--t3); font-size: 12px; font-style: italic; }
/* Per-log reactions + comments */
.boast-social { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; touch-action: manipulation; }
.react-bar { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; touch-action: manipulation; }
.react-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 16px; padding: 7px 13px; font-size: 18px; min-height: 38px; cursor: pointer; line-height: 1; transition: transform .1s, background .12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.react-btn:active { transform: scale(.92); }
.react-btn.react-readonly { cursor: default; background: transparent; border-color: transparent; padding-left: 2px; }
.react-btn.react-readonly:active { transform: none; }
.react-btn.mine { background: var(--gndim); border-color: var(--gnbrd); }
.react-btn.pop { animation: reactPop .25s ease; }
@keyframes reactPop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ── Mailbox ── */
.mailbox-badge { position:absolute; top:5px; right:5px; width:9px; height:9px; border-radius:50%; background:var(--rd); box-shadow:0 0 0 2px var(--bg0); }
.mbx-sec { font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--t3); padding:14px 16px 6px; }
/* white-card activity items */
.mbx-card { position:relative; display:flex; gap:11px; align-items:center; background:var(--bg1); border:1px solid var(--bd); border-radius:14px; padding:13px 14px; margin:0 14px 10px; box-shadow:var(--shadow-sm); }
.mbx-card.req { align-items:flex-start; }
.mbx-card.unread { border-color:var(--gnbrd); }
/* Weekly goal suggestions — promo card (brand navy→green) + modal goal cards */
.wg-promo { background: linear-gradient(135deg, #0c1f3f 0%, #0c3a2b 100%); border: 1px solid rgba(255,255,255,0.14); color: #fff; cursor: pointer; touch-action: manipulation; }
.wg-promo .mbx-title { color: #fff; }
.wg-promo .mbx-sub { color: rgba(255,255,255,0.82); }
.wg-promo-ic { font-size: 22px; line-height: 1; flex-shrink: 0; width: 30px; text-align: center; }
.wg-promo > svg { stroke: #fff; }
.wg-goal { background: var(--bg2); border: 1px solid var(--bd); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.wg-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t2); background: var(--bg3); border: 1px solid var(--bd); border-radius: 6px; padding: 2px 7px; margin-bottom: 8px; }
.wg-cat svg { width: 11px; height: 11px; stroke: var(--t2); }
.wg-goal-title { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; font-weight: 800; color: var(--t1); letter-spacing: .3px; margin-bottom: 8px; line-height: 1.15; }
.wg-line { font-size: 13.5px; color: var(--t2); line-height: 1.5; margin-bottom: 5px; }
.wg-line span { font-weight: 700; color: var(--t1); text-transform: uppercase; font-size: 11px; letter-spacing: .6px; margin-right: 5px; }
.wg-start { margin-top: 10px; }
.mbx-card.unread::before { content:''; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--gn); }
.mbx-card.legendary .mbx-title { color:var(--gn); font-weight:700; }
.mbx-card.legendary .mbx-ic { color:var(--gn); }
.mbx-ic { width:34px; height:34px; border-radius:9px; background:var(--bg2); color:var(--t1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mbx-av { width:38px; height:38px; border-radius:50%; background:var(--bg2); color:var(--t2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; overflow:hidden; align-self:flex-start; }
.mbx-av img { width:100%; height:100%; object-fit:cover; }
.mbx-main { flex:1; min-width:0; }
.mbx-card.act .mbx-main { cursor:pointer; }
.mbx-title { font-size:14px; color:var(--t1); line-height:1.4; }
.mbx-sub { font-size:12px; color:var(--t3); margin-top:3px; overflow:hidden; text-overflow:ellipsis; }
.mbx-actions { display:flex; gap:8px; margin-top:10px; }
.mbx-approve { font-size:13px; font-weight:700; padding:6px 14px; border-radius:8px; border:none; background:var(--gn); color:#fff; cursor:pointer; }
.mbx-reject { font-size:13px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px solid var(--bd); background:var(--bg2); color:var(--t2); cursor:pointer; }
.mbx-x { flex-shrink:0; width:28px; height:28px; border-radius:50%; border:none; background:none; color:var(--t3); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.mbx-x:active { background:var(--bg2); }
.mbx-clear { float:right; background:none; border:none; color:var(--gn); font-size:12px; font-weight:700; letter-spacing:0; text-transform:none; cursor:pointer; padding:0; }
.mbx-sec { position:relative; }
.mbx-empty { text-align:center; padding:60px 28px; color:var(--t3); }
.mbx-empty-ic { color:var(--t1); margin-bottom:14px; line-height:0; }
.mbx-empty-t { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:800; color:var(--t1); letter-spacing:.5px; }
.mbx-empty-s { font-size:14px; margin-top:4px; }
/* Settings quick-links (moved from the home bar) */
.set-link { display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--bd); cursor:pointer; }
.set-link:active { background:var(--bg1); }
.set-link-ic { width:34px; height:34px; border-radius:9px; background:var(--bg2); display:flex; align-items:center; justify-content:center; color:var(--t2); flex-shrink:0; }
.set-link-t { font-size:14px; font-weight:600; color:var(--t1); }
.set-link-s { font-size:12px; color:var(--t3); }
.set-link-chev { color:var(--t3); flex-shrink:0; }

.boast-card.boast-highlight { animation: boastHighlight 2.2s ease; }
@keyframes boastHighlight { 0%,100% { box-shadow:0 0 0 rgba(0,200,120,0); } 15%,55% { box-shadow:0 0 0 3px var(--gn), 0 0 20px rgba(0,200,120,.5); } }
/* Freshly joined goal card flashing into view on the Goals tab. */
.squad-card-v2.card-highlight, .squad-row.card-highlight { animation: cardHighlight 2.4s ease; }
@keyframes cardHighlight { 0%,100% { box-shadow:0 0 0 rgba(0,200,120,0); } 12%,55% { box-shadow:0 0 0 3px var(--gn), 0 0 22px rgba(0,200,120,.5); } }

/* Encouragement nudge + reaction glow tiers on a teammate's log */
.boast-encourage { font-size: 12px; font-weight: 700; color: var(--gn); margin: 8px 0 2px; letter-spacing: .2px; }
.boast-card.glow-1 { border-color: rgba(0,200,120,.55) !important; animation: glowPulse1 2.6s ease-in-out infinite; }
.boast-card.glow-2 { border-color: rgba(0,220,140,.75) !important; animation: glowPulse2 2.2s ease-in-out infinite; }
.boast-card.glow-3 { border-color: rgba(255,190,0,.9) !important; animation: glowPulse3 1.8s ease-in-out infinite; }
@keyframes glowPulse1 { 0%,100% { box-shadow: 0 0 2px rgba(0,200,120,.15); } 50% { box-shadow: 0 0 16px rgba(0,200,120,.4); } }
@keyframes glowPulse2 { 0%,100% { box-shadow: 0 0 8px rgba(0,220,140,.35); } 50% { box-shadow: 0 0 24px rgba(0,230,150,.6); } }
@keyframes glowPulse3 { 0%,100% { box-shadow: 0 0 12px rgba(255,200,0,.5); } 50% { box-shadow: 0 0 32px rgba(255,170,0,.85); } }
.react-n { font-size: 13px; font-weight: 700; color: var(--t2); }
.react-btn.mine .react-n { color: var(--gn); }
.cmt-btn { background: var(--bg2); border: 1px solid var(--bd); border-radius: 16px; padding: 7px 12px; font-size: 14px; font-weight: 600; color: var(--t2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 38px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cmt-thread { margin-top: 8px; border-top: 1px solid var(--bd); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.cmt-row { font-size: 14px; color: var(--t1); line-height: 1.4; }
.cmt-author { font-weight: 700; color: var(--t1); margin-right: 4px; }
.cmt-empty, .cmt-loading { font-size: 13px; color: var(--t3); }
.cmt-compose { display: flex; gap: 6px; margin-top: 4px; }
.cmt-input { flex: 1; background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 7px 10px; font-size: 14px; color: var(--t1); outline: none; }
.cmt-send { background: var(--t1); color: var(--bg0); border: none; border-radius: 10px; padding: 0 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.boast-card-workout { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.boast-card-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.boast-card-wdetail { flex: 1; }
.boast-card-wtype { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: .5px; color: var(--t1); text-transform: uppercase; line-height: 1.1; }
.boast-card-dur { font-size: 13px; color: var(--t3); font-weight: 600; margin-top: 1px; }
.boast-card-tag { font-size: 9px; font-weight: 800; font-family: 'Barlow Condensed',sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; align-self: flex-start; }
.boast-card-media { border-radius: 10px; overflow: hidden; margin: 8px 0; border: 1px solid var(--bd); cursor: zoom-in; }
.boast-card-media img { width: 100%; display: block; max-height: 200px; object-fit: cover; }
.boast-card-gif { border-radius: 10px; overflow: hidden; margin: 8px 0; border: 1px solid var(--bd); background: var(--bg2); cursor: zoom-in; display: flex; justify-content: center; }
.boast-card-gif img { width: 100%; max-height: 300px; object-fit: contain; display: block; }
.boast-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bd); }
.boast-card-pct { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .5px; }
.boast-card-time { font-size: 10px; color: var(--t3); letter-spacing: .4px; }

.feed-load-more { text-align: center; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--t2); letter-spacing: .5px; cursor: pointer; border-top: 1px solid var(--bd); transition: color .15s; }
.feed-load-more:active { color: var(--t1); }
.chat-badge { display:inline-block; background:var(--rd); color:#fff; font-size:10px; font-weight:800; border-radius:8px; padding:1px 5px; min-width:14px; line-height:14px; pointer-events:none; vertical-align:middle; margin-left:5px; }

/* Evidence in feed */

/* ─── SETTINGS SCREEN ─── */
.settings-group { margin: 0 14px 12px; background: var(--bg1); border: 1px solid var(--bd); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); }
.settings-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--bd); cursor: pointer; transition: background .1s; }
.settings-row:last-child { border-bottom: none; }
.settings-row:active { background: var(--bg2); }
.sr-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-icon svg { width: 16px; height: 16px; }
.sr-body { flex: 1; }
.sr-label { font-size: 14px; font-weight: 600; color: var(--t1); }
.sr-value { font-size: 12px; color: var(--t3); margin-top: 1px; }
.sr-right { color: var(--t3); display: flex; align-items: center; gap: 6px; }
.day-chip { flex-shrink:0;background:var(--bg2);border:1px solid var(--bd);border-radius:6px;padding:5px 10px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .15s;text-transform:uppercase;letter-spacing:.4px; }
.day-chip.active { background:var(--t1);border-color:var(--t1);color:var(--bg0); }
.sr-right svg { width: 12px; height: 12px; stroke: var(--t3); }
.sr-right .val { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; color: var(--t2); }
.toggle { width: 44px; height: 26px; background: var(--bg3); border-radius: 13px; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; border: 1px solid var(--bd); }
.toggle.on { background: var(--t1); border-color: var(--t1); }
.toggle::after { content: ''; width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.toggle.on::after { transform: translateX(18px); background: var(--bg0); }
.danger-row .sr-label { color: var(--rd); }

/* ─── MODALS ─── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 300; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(6px); }
.modal-bg.open { opacity: 1; pointer-events: all; }
.modal-sheet { background: var(--bg1); border-radius: 20px 20px 0 0; border-top: 1px solid var(--bd); width: 100%; max-width: 430px; padding: 0 0 calc(var(--sb) + 16px); max-height: calc(100vh - env(safe-area-inset-top, 20px) - 56px); max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 56px); overflow-y: auto; transform: translateY(36px); transition: transform .3s ease; box-shadow: 0 -8px 40px rgba(0,0,0,.6); }
.modal-sheet::-webkit-scrollbar { display: none; }
.modal-bg.open .modal-sheet { transform: translateY(0); }
.modal-handle { width: 36px; height: 4px; background: var(--bg4); border-radius: 2px; margin: 10px auto 14px; }

/* Fullscreen photo cropper — fills the screen so the photo can be positioned with a
   two-finger drag+zoom. Overrides the bottom-sheet layout of .modal-bg. */
#m-photo-crop { align-items: stretch; justify-content: stretch; background: #000; backdrop-filter: none; z-index: 400; }
.crop-fs { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; background: #000; }
.crop-fs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px; }
.crop-fs-title { font-size: 15px; font-weight: 700; color: #fff; text-align: center; flex: 1; }
.crop-fs-cancel { background: rgba(255,255,255,.14); border: none; border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; }
.crop-fs-apply { background: #fff; border: none; border-radius: 10px; padding: 9px 18px; font-size: 14px; font-weight: 700; color: #000; cursor: pointer; }
.crop-fs-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; touch-action: none; cursor: grab; user-select: none; }
.crop-fs-stage img { position: absolute; pointer-events: none; user-select: none; will-change: transform; }
.crop-mask { position: absolute; pointer-events: none; box-shadow: 0 0 0 9999px rgba(0,0,0,.6); border: 2px solid rgba(255,255,255,.9); }
.crop-fs-hint { text-align: center; font-size: 13px; color: rgba(255,255,255,.6); padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 20px); letter-spacing: .2px; }
.modal-title { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 800; color: var(--t1); padding: 0 18px 4px; text-transform: uppercase; letter-spacing: .5px; }
.modal-sub { font-size: 13px; color: var(--t2); padding: 0 18px 14px; line-height: 1.5; }
/* Premium upsell sheet */
.upsell-badge { display: inline-block; margin: 0 18px 8px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--bg0); background: var(--t1); border-radius: 6px; padding: 3px 8px; }
.upsell-feats { display: flex; flex-direction: column; gap: 12px; padding: 0 18px; }
.upsell-feat { display: flex; gap: 10px; align-items: flex-start; }
.upsell-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--t1); color: var(--bg0); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.upsell-feat > div { display: flex; flex-direction: column; }
.upsell-feat strong { font-size: 14px; font-weight: 700; color: var(--t1); }
.upsell-feat span { font-size: 13px; color: var(--t3); line-height: 1.4; margin-top: 1px; }

/* ── New Squad fullscreen flow ── */
@keyframes _ns-in { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
/* SMART word indicator */
.smart-word { display:flex; gap:5px; margin-bottom:14px; }
.smart-word span { width:30px; height:30px; border-radius:7px; border:1.5px solid var(--bd2); display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:900; color:var(--t3); flex-shrink:0; }
.smart-word .sw-on { background:var(--t1); border-color:var(--t1); color:var(--bg0); }
/* Step 4 goal preview */
/* Step 4 fields */
.cl-avatar { width:42px; height:42px; border-radius:12px; flex-shrink:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:22px; border:1.5px solid var(--bd); }
.cl-qty-row { display:flex; align-items:baseline; gap:10px; justify-content:center; padding:24px 0 8px; }
/* Quantity slider — 0%–200% of the goal's required amount */
.cl-slider-wrap { padding:0 22px 6px; }
.cl-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:var(--bg3); outline:none; margin:0; }
.cl-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%; background:var(--t1); border:3px solid var(--bg2); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
.cl-slider::-moz-range-thumb { width:26px; height:26px; border-radius:50%; background:var(--t1); border:3px solid var(--bg2); box-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; }
.cl-slider-scale { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:12px; color:var(--t3); font-weight:600; }
.cl-slider-scale #cl-qty-pct { color:var(--t1); font-weight:700; }
.cl-qty-input { font-family:'Barlow Condensed',sans-serif; font-size:56px; font-weight:800; color:var(--t1); background:none; border:none; border-bottom:2px solid var(--bd2); width:110px; text-align:center; padding:0; outline:none; -moz-appearance:textfield; }
.cl-qty-input::-webkit-outer-spin-button,.cl-qty-input::-webkit-inner-spin-button{-webkit-appearance:none}
.cl-qty-input:focus { border-bottom-color:var(--t1); }
.cl-unit-label { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; letter-spacing:.5px; color:var(--t2); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Info modal */
.info-section { padding: 12px 18px; border-top: 1px solid var(--bd); }
.info-section:first-of-type { border-top: none; }
.info-label { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; margin-bottom: 6px; }
.info-text { font-size: 14px; color: var(--t1); line-height: 1.55; }
.rules-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rules-list li { font-size: 14px; color: var(--t1); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.rules-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--t2); flex-shrink: 0; margin-top: 6px; }

/* Invite */
.invite-link-row { margin: 0 16px 4px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.invite-link-row span { flex: 1; font-size: 13px; color: var(--bl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.copy-btn { background: var(--bg3); border: 1px solid var(--bd); border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 700; color: var(--t1); cursor: pointer; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.copy-btn:active { background: var(--bg4); }
.invite-option { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--bd); cursor: pointer; transition: background .15s; }
.invite-option:active { background: var(--bg2); }
.invite-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.invite-icon svg { width: 20px; height: 20px; }
.invite-option h4 { font-size: 14px; font-weight: 600; color: var(--t1); margin-bottom: 1px; }
.invite-option p { font-size: 12px; color: var(--t3); }

/* Inputs */
.modal-input { width: 100%; box-sizing: border-box; background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 12px 14px; font-size: 14px; font-family: 'Barlow', sans-serif; color: var(--t1); outline: none; transition: border .15s; margin: 0 0 10px; }
.modal-input:focus { border-color: var(--t1); }
.modal-input::placeholder { color: var(--t3); }
.modal-input-wrap { padding: 0 18px 4px; }

/* Action buttons */
.action-btn { width: calc(100% - 32px); margin: 4px 16px 0; background: #fff; border: none; border-radius: 10px; color: #000; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; padding: 14px; cursor: pointer; transition: opacity .15s; box-shadow: 0 2px 12px rgba(0,0,0,.25); text-transform: uppercase; letter-spacing: 1.5px; }
html.light .action-btn { background: #000; color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.action-btn:active { opacity: .75; }
.action-btn.secondary { background: var(--bg2); color: var(--t2); border: 1px solid var(--bd); box-shadow: none; }
html.light .action-btn.secondary { background: var(--bg2); color: var(--t2); }
.action-btn.danger { background: rgba(255,69,58,.12); color: var(--rd); border: 1px solid rgba(255,69,58,.3); box-shadow: none; }

/* Toast */
#toast { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%) translateY(14px); background: var(--bg3); border: 1px solid var(--bd2); border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; color: var(--t1); opacity: 0; transition: all .26s; z-index: 998; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-md); letter-spacing: .3px; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Float emoji */
@keyframes floatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-60px) scale(1.5)} }
.float-e { position: fixed; pointer-events: none; z-index: 500; font-size: 28px; animation: floatUp .8s ease-out forwards; }

/* Confetti */
#cfc { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999; display: none; }

/* ─── Boast / Log modal ─── */
.dur-chip { background: var(--bg2); border: 1.5px solid var(--bd); border-radius: 8px; padding: 6px 13px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; color: var(--t2); cursor: pointer; transition: all .15s; white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; }
.dur-chip:active { transform: scale(.92); }
.dur-chip.sel { background: var(--t1); border-color: var(--t1); color: var(--bg0); }
.dur-input { width: 80px; background: var(--bg2); border: 1.5px solid var(--bd); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-family: 'Barlow', sans-serif; color: var(--t1); outline: none; transition: border .15s; }
.dur-input:focus { border-color: var(--t1); }
.dur-input::placeholder { color: var(--t3); }
.boast-textarea { width: 100%; box-sizing: border-box; background: var(--bg2); border: 1.5px solid var(--bd); border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: 'Barlow', sans-serif; color: var(--t1); outline: none; resize: none; transition: border .15s; line-height: 1.5; }
.boast-textarea:focus { border-color: var(--t1); }
.boast-textarea::placeholder { color: var(--t3); }
/* Feedback mini-form (settings): one-tap mood + one open question */
.fb-faces { display: flex; gap: 8px; padding: 0 18px 12px; }
.fb-face { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 0 9px; background: var(--bg2); border: 1.5px solid var(--bd); border-radius: 12px; cursor: pointer; transition: all .15s; }
.fb-face:active { transform: scale(.96); }
.fb-face-emoji { font-size: 26px; line-height: 1; }
.fb-face-lbl { font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--t3); }
.fb-face.on { background: var(--t1); border-color: var(--t1); }
.fb-face.on .fb-face-lbl { color: var(--bg0); }
#m-feedback .boast-textarea { width: calc(100% - 36px); margin: 0 18px; display: block; }
#fb-send-btn:disabled { opacity: .55; cursor: default; }
.evidence-zone { width: 100%; height: 90px; background: var(--bg2); border: 1.5px dashed var(--bd2); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all .15s; position: relative; overflow: hidden; }
.evidence-zone:active { background: var(--bg3); }
.evidence-zone.has-img { border-style: solid; border-color: var(--gn); }
#evidence-placeholder { display: flex; align-items: center; gap: 7px; }
#evidence-placeholder span { font-size: 13px; color: var(--t3); font-weight: 600; }
.gif-scroll { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gif-scroll::-webkit-scrollbar { display: none; }
.gif-chip { flex-shrink: 0; width: 100px; height: 68px; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.gif-chip img { width: 100%; height: 100%; object-fit: cover; }
.gif-chip.sel { border-color: var(--t1); }
.gif-chip.sel::after { content: '✓'; position: absolute; top: 3px; right: 5px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.none-chip { background: var(--bg2); border: 1.5px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--t3); font-weight: 700; border-radius: 8px; text-transform: uppercase; letter-spacing: .5px; font-family: 'Barlow Condensed', sans-serif; }
.none-chip.sel { background: var(--t1); border-color: var(--t1); color: var(--bg0); }
.gif-search-wrap { display:flex; align-items:center; gap:8px; background:var(--bg3); border:1px solid var(--bd); border-radius:8px; padding:6px 10px; margin-bottom:8px; }
.gif-search-wrap:focus-within { border-color:var(--t1); }
.gif-search-inp { flex:1; background:transparent; border:none; outline:none; font-size:13px; color:var(--t1); font-family:'DM Sans',sans-serif; }
.gif-search-inp::placeholder { color:var(--t3); }
.gif-status { font-size:12px; color:var(--t3); padding:10px 0; white-space:nowrap; flex-shrink:0; }

/* Home search */
.home-search-wrap { flex: 1; display: flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--bd); border-radius: 10px; padding: 8px 13px; transition: border .15s; }
.home-search-wrap:focus-within { border-color: var(--t1); }
.home-search { flex: 1; background: transparent; border: none; outline: none; font-size: 13px; font-family: 'Barlow', sans-serif; color: var(--t1); font-weight: 500; }
.home-search::placeholder { color: var(--t3); }

/* Browse screen */
.browse-search-wrap { display: flex; align-items: center; gap: 9px; background: var(--bg1); border: 1.5px solid var(--bd); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-sm); transition: border .15s; }
.browse-search-wrap:focus-within { border-color: var(--t1); }
.browse-search { flex: 1; background: transparent; border: none; outline: none; font-size: 14px; font-family: 'Barlow', sans-serif; color: var(--t1); font-weight: 500; }
.browse-search::placeholder { color: var(--t3); }
.browse-search-clear { cursor: pointer; flex-shrink: 0; opacity: .7; }
.browse-filter-row { display: flex; gap: 6px; padding: 0 14px 8px; overflow-x: auto; scrollbar-width: none; }
.browse-filter-row::-webkit-scrollbar { display: none; }
.bf-chip { flex-shrink: 0; background: var(--bg2); border: 1px solid var(--bd); border-radius: 6px; padding: 6px 13px; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--t2); cursor: pointer; transition: all .15s; white-space: nowrap; text-transform: uppercase; letter-spacing: .5px; }
.bf-chip.active { background: var(--t1); border-color: var(--t1); color: var(--bg0); }
.bf-chip:active { transform: scale(.93); }
.browse-sort-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 10px; }
.browse-sort-row #browse-count { font-size: 12px; color: var(--t3); font-weight: 600; }
.browse-sort-wrap { display: flex; align-items: center; gap: 6px; color: var(--t2); background: var(--bg1); border: 1px solid var(--bd); border-radius: 9px; padding: 5px 9px; }
.browse-sort-wrap select { background: transparent; border: none; outline: none; font-size: 13px; font-weight: 600; color: var(--t1); font-family: 'Barlow', sans-serif; -webkit-appearance: none; appearance: none; cursor: pointer; }
.browse-card { background: var(--bg1); border: 1px solid var(--bd); border-radius: 14px; padding: 14px; display: flex; align-items: flex-start; gap: 13px; box-shadow: var(--shadow-sm); cursor: default; transition: border-color .15s, box-shadow .15s; }
.browse-card:active { box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.browse-photo { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; background-size: cover; background-position: center; border: 1px solid var(--bd); }
.browse-photo-emoji { font-size: 26px; line-height: 1; }
.browse-cat { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t2); background: var(--bg3); border: 1px solid var(--bd); border-radius: 6px; padding: 2px 7px; }
.browse-cat svg { width: 11px; height: 11px; stroke: var(--t2); }
.browse-emoji { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.browse-info { flex: 1; min-width: 0; }
.browse-name { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 800; color: var(--t1); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .5px; }
.browse-goal { font-size: 12px; color: var(--t2); margin-bottom: 7px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.browse-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.browse-badge { font-size: 11px; color: var(--t3); display: flex; align-items: center; gap: 3px; font-weight: 600; }
.browse-badge svg { width: 11px; height: 11px; stroke: var(--t3); }
.browse-code-hint { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; }
.browse-code-hint button { background:var(--t1); color:var(--bg0); border:none; border-radius:8px; padding:9px 16px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:opacity .15s; }
.browse-code-hint button:active { opacity:.8; }

/* Activity screen */
.act-toggle-wrap { display: flex; background: var(--bg2); border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; }
.act-toggle-btn { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; padding: 6px 14px; cursor: pointer; color: var(--t3); transition: all .15s; text-transform: uppercase; letter-spacing: 1px; }
.act-toggle-btn.active { background: var(--t1); color: var(--bg0); }
.act-summary-row { display: flex; gap: 8px; padding: 8px 14px 10px; }
.act-stat-card { flex: 1; background: var(--bg1); border: 1px solid var(--bd); border-radius: 12px; padding: 13px 12px; box-shadow: var(--shadow-sm); }
.act-stat-n { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 800; color: var(--t1); line-height: 1; }
.act-stat-l { font-size: 10px; color: var(--t3); margin-top: 3px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.act-stat-trend { font-size: 11px; font-weight: 700; margin-top: 4px; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .5px; }
.heatmap-cell { width: 20px; height: 20px; border-radius: 4px; cursor: default; transition: transform .1s; }
.heatmap-cell:active { transform: scale(1.2); }
.act-member-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--bd); }
.act-member-row:last-child { border-bottom: none; }
.act-highlight-card { background: var(--bg1); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-sm); }
.act-hi-icon { font-size: 24px; flex-shrink: 0; }
.act-hi-label { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: .5px; }
.act-hi-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* Visibility pill */
.vis-pill { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 7px; letter-spacing: .5px; white-space: nowrap; text-transform: uppercase; }
.vis-pill.pub { background: rgba(77,159,255,.12); color: var(--bl); border: 1px solid var(--blbrd); }
.vis-pill.prv { background: var(--bg3); color: var(--t3); border: 1px solid var(--bd); }

/* Member cap controls */
.cap-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 5px; background: var(--bg3); outline: none; cursor: pointer; }
.cap-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--t1); cursor: pointer; border: 2px solid var(--bg1); }
.cap-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--t1); cursor: pointer; border: 2px solid var(--bg1); }
.cap-preset { flex: 1; text-align: center; background: var(--bg2); border: 1px solid var(--bd); border-radius: 7px; padding: 5px 4px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; color: var(--t2); cursor: pointer; transition: all .15s; text-transform: uppercase; }
.cap-preset.active { background: var(--t1); border-color: var(--t1); color: var(--bg0); }
.cap-preset:active { transform: scale(.93); }
.inline-edit { background: transparent; border: none; border-bottom: 1.5px solid var(--t1); outline: none; font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; color: var(--t1); width: 100%; padding: 0 0 2px; }

/* ─── MOTIVATIONAL QUOTE TICKER ─── */
/* Fixed-height, vertically-centred box so rotating quotes of different lengths can't change the
   top bar's height each cycle (that height-jump read as "flickering" on Android). */
#home-quote-wrap { overflow: hidden; flex-shrink: 0; max-width: 140px; height: 34px; display: flex; align-items: center; justify-content: flex-end; text-align: right; }
#home-quote-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: rgba(255,255,255,0.88);
  line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  will-change: transform, opacity; backface-visibility: hidden;
  animation: quoteIn 0.55s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}
html.light #home-quote-text { color: rgba(0,0,0,0.75); }
#home-quote-text.out { animation: quoteOut 0.5s cubic-bezier(0.55,0,0.85,0.4) forwards; }
/* Fly in from the right, then dissolve "into the distance": short travel + scale-down + blur,
   with opacity gone well before the box edge so the overflow clip never reads as a wall. */
@keyframes quoteIn  { from { transform:translateX(34px) scale(.92); opacity:0; filter:blur(3px); } to { transform:translateX(0) scale(1); opacity:1; filter:blur(0); } }
@keyframes quoteOut { from { transform:translateX(0) scale(1); opacity:1; filter:blur(0); } to { transform:translateX(-18px) scale(.82); opacity:0; filter:blur(4px); } }


/* Squad group headers */
.squad-group-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 5px; cursor:pointer; user-select:none; }
.squad-group-hdr-label { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--t3); }
.squad-group-count { font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; color:var(--t3); background:var(--bg3); border-radius:6px; padding:1px 6px; }
.squad-group-arrow { display:inline-flex; transition:transform .2s; color:var(--t3); }
.squad-group-arrow.collapsed { transform:rotate(-90deg); }
.squad-group-body { display:flex; flex-direction:column; gap:14px; }

/* Strava integration */
.strava-banner { margin:0 14px 12px; background:rgba(252,76,2,.12); border:1px solid rgba(252,76,2,.35); border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; }
.strava-banner:active { background:rgba(252,76,2,.18); }
.strava-banner-icon { width:32px; height:32px; flex-shrink:0; }
.strava-banner-body { flex:1 }
.strava-banner-title { font-size:14px; font-weight:700; color:var(--t1); }
.strava-banner-sub { font-size:12px; color:var(--t3); margin-top:1px; }
.strava-banner-badge { background:#FC4C02; color:#fff; font-size:12px; font-weight:700; border-radius:10px; padding:2px 9px; font-family:'Barlow Condensed',sans-serif; letter-spacing:.5px; white-space:nowrap; }
.strava-connect-btn { display:flex; align-items:center; gap:8px; background:#FC4C02; color:#fff; border:none; border-radius:8px; padding:8px 14px; font-size:14px; font-weight:700; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .15s; }
.strava-connect-btn:active { background:#d94000; }
.strava-connected-row { display:flex; align-items:center; gap:10px; }
.strava-connected-name { font-size:14px; font-weight:600; color:#FC4C02; }
.strava-disconnect-btn { background:transparent; border:1px solid var(--bd); color:var(--t3); border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer; font-family:'DM Sans',sans-serif; }
/* Pending review modal */
.pending-item { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--bd); border-radius:12px; background:var(--bg1); margin-bottom:10px; }
.pending-item-header { display:flex; align-items:center; gap:8px; }
.pending-item-type { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#FC4C02; font-family:'Barlow Condensed',sans-serif; }
.pending-item-name { font-size:14px; font-weight:600; color:var(--t1); flex:1; }
.pending-item-meta { font-size:12px; color:var(--t3); }
.pending-item-squad { font-size:12px; color:var(--bl); font-weight:600; }
.pending-item-actions { display:flex; gap:8px; margin-top:4px; }
.pending-post-btn { flex:1; background:#FC4C02; color:#fff; border:none; border-radius:8px; padding:8px 0; font-size:14px; font-weight:700; cursor:pointer; }
.pending-edit-btn { background:var(--bg3); color:var(--t2); border:1px solid var(--bd); border-radius:8px; padding:8px 12px; font-size:14px; font-weight:600; cursor:pointer; }
.pending-dismiss-btn { background:transparent; color:var(--t3); border:1px solid var(--bd); border-radius:8px; padding:8px 12px; font-size:14px; cursor:pointer; }

/* #float-log-btn (multi-post FAB) removed — archived in archive/homepage-floating-button.md */
/* ══ GOAL CREATION FLOW ══ */
#goal-creation-flow{position:fixed;inset:0;z-index:1100;display:flex;flex-direction:column;background:var(--bg1);opacity:0;pointer-events:none;transition:opacity .25s}
#goal-creation-flow.open{opacity:1;pointer-events:all}
.gcf-header{flex-shrink:0;background:var(--bg0);border-bottom:1px solid var(--bd);padding:calc(var(--st) + 12px) 16px 12px;display:flex;align-items:center;gap:10px}
.gcf-back-hdr{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--bd);border-radius:50%;color:var(--t2);font-size:16px;cursor:pointer;flex-shrink:0;transition:background .12s;-webkit-tap-highlight-color:transparent}
.gcf-back-hdr:active{background:var(--bg3)}
.gcf-wordmark{font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--t1);flex:1}
.gcf-close{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--bd2);border-radius:50%;color:var(--t2);font-size:14px;cursor:pointer;flex-shrink:0;transition:background .12s;-webkit-tap-highlight-color:transparent}
.gcf-close:active{background:var(--bg3)}
.gcf-tpl-lbl{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3);margin:22px 0 10px}
.gcf-templates{display:flex;flex-wrap:wrap;gap:8px}
.gcf-templates .gcf-chip{font-size:14px;padding:9px 14px}
.gcf-prog-wrap{flex-shrink:0;height:3px;background:var(--bg3)}
.gcf-prog-bar{height:100%;background:var(--t1);transition:width .4s cubic-bezier(.4,0,.2,1);width:0}
.gcf-sheet{flex:1;overflow-y:auto;overflow-x:hidden;padding:26px 22px;padding-bottom:max(calc(var(--sb) + 24px), 24px);-webkit-overflow-scrolling:touch}
.gcf-sheet::-webkit-scrollbar{display:none}
@keyframes _gcf-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes _gcf-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.gcf-step{display:none;flex-direction:column}
.gcf-step.active{display:flex;animation:_gcf-in .2s ease}
.gcf-step.back{animation:_gcf-back .2s ease}
.gcf-q{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:800;letter-spacing:.2px;color:var(--t1);margin-bottom:18px;line-height:1.1}
.gcf-subq{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--t3);margin-bottom:8px;margin-top:18px}
.gcf-hint{font-size:13px;color:var(--t3);line-height:1.55;margin-top:6px}
.gcf-goal-ta{width:100%;box-sizing:border-box;background:var(--bg2);border:1.5px solid var(--bd);border-radius:12px;padding:14px;font-size:16px;font-family:'Barlow',sans-serif;color:var(--t1);resize:none;outline:none;transition:border .15s;line-height:1.55;min-height:110px}
.gcf-goal-ta:focus{border-color:var(--t1)}
.gcf-goal-ta::placeholder{color:var(--t3)}
.gcf-yesno{display:flex;gap:8px;margin-bottom:4px}
.gcf-yesno-btn{flex:1;padding:13px 0;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:var(--bg2);border:1.5px solid var(--bd2);border-radius:10px;color:var(--t2);cursor:pointer;transition:all .12s;-webkit-tap-highlight-color:transparent}
.gcf-yesno-btn.active{background:var(--t1);border-color:var(--t1);color:var(--bg0)}
.gcf-chips{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 2px}
.gcf-chip{background:var(--bg2);border:1.5px solid var(--bd2);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--t2);cursor:pointer;transition:all .12s;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5px;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.gcf-chip.active{background:var(--t1);border-color:var(--t1);color:var(--bg0)}
.gcf-quickend{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.gcf-quickend-n{width:72px;height:44px;flex-shrink:0;text-align:center;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:800;outline:none;-moz-appearance:textfield}
.gcf-quickend-n::-webkit-inner-spin-button,.gcf-quickend-n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.gcf-quickend .gcf-chips{flex:1;min-width:170px;margin:0}
.gcf-chip--default{border-style:dashed}
.gcf-chip--default.active{border-style:solid}
.gcf-metric-scroll{display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:8px 0}
.gcf-metric-scroll::-webkit-scrollbar{display:none}
.gcf-metric-chip{flex-shrink:0;padding:9px 16px;font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;background:var(--bg2);border:1.5px solid var(--bd2);border-radius:10px;color:var(--t2);cursor:pointer;transition:all .12s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.gcf-metric-chip.active{background:var(--t1);border-color:var(--t1);color:var(--bg0)}
.gcf-stepper{display:flex;align-items:center;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;overflow:hidden;height:52px}
.gcf-stepper-btn{width:56px;height:100%;background:none;border:none;font-size:26px;color:var(--t1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.gcf-stepper-btn:active{background:var(--bg3)}
.gcf-stepper-val{flex:1;text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:32px;font-weight:800;color:var(--t1);background:none;border:none;outline:none;width:100%;-moz-appearance:textfield}
.gcf-stepper-val::-webkit-inner-spin-button,.gcf-stepper-val::-webkit-outer-spin-button{-webkit-appearance:none}
.gcf-recap{display:flex;flex-direction:column;gap:11px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:11px 14px;margin-bottom:20px}
.gcf-recap-item{display:flex;flex-direction:column;gap:5px}
.gcf-recap-lbl{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--t3)}
.gcf-recap-text{font-size:14px;color:var(--t1);line-height:1.5;font-weight:600;white-space:pre-wrap;word-break:break-word}
.gcf-live{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:13px 16px;margin-top:14px;font-size:14px;color:var(--t2);line-height:1.6;font-style:italic;min-height:46px}
.gcf-live em{font-style:normal;font-weight:700;color:var(--t1)}
.gcf-prose{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:16px 18px;margin-bottom:16px;font-size:14px;color:var(--t1);line-height:1.7}
.gcf-accountability{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:13px 16px;margin:0 0 16px;font-size:13px;color:var(--t2);line-height:1.65}
.gcf-accountability strong{color:var(--t1)}
.gcf-emoji-row{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:8px 0 16px}
.gcf-emoji-row::-webkit-scrollbar{display:none}
.gcf-emoji-btn{flex-shrink:0;width:46px;height:46px;border-radius:12px;font-size:24px;background:var(--bg2);border:1.5px solid var(--bd);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;-webkit-tap-highlight-color:transparent}
.gcf-emoji-btn.active{background:var(--t1);border-color:var(--t1)}

/* Inline emoji picker — tile sits next to the action input; picker drops below in flow */
.gcf-action-row{display:flex;gap:8px;align-items:stretch}
.gcf-emoji-tile{flex-shrink:0;width:46px;height:46px;border-radius:12px;font-size:24px;background:var(--bg2);border:1.5px solid var(--bd);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,border-color .12s;-webkit-tap-highlight-color:transparent;padding:0}
.gcf-emoji-tile:active{transform:scale(.94)}
.gcf-emoji-tile:focus-visible{outline:none;border-color:var(--t1)}
.gcf-emoji-pop{margin-top:8px;background:var(--bg3);border:1.5px solid var(--bd);border-radius:14px;padding:10px}
.gcf-emoji-pop .gcf-emoji-row{margin:0 0 8px}
.gcf-emoji-custom{margin:0}
.gcf-nav{display:flex;gap:8px;margin-top:24px}
.gcf-nav .action-btn{flex:1;margin:0}

/* ── Goal flow v3 (inference-first: Madlib confirm + add-a-rule) ── */
.gcf-madlib{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:700;line-height:1.55;color:var(--t1);margin:2px 0 12px}
.gcf-slot{display:inline-block;background:var(--bg2);border:1.5px solid var(--bd2);border-radius:8px;padding:0 9px;margin:3px 1px;color:var(--t1)}
/* Tap-a-word madlib: every slot is a button; the one being edited inverts. */
.gcf-madlib-tap{font-size:26px;line-height:1.9}
.gcf-madlib-tap .gcf-slot{cursor:pointer;border-style:dashed;-webkit-tap-highlight-color:transparent;transition:background .12s,color .12s,border-color .12s}
.gcf-madlib-tap .gcf-slot:active{background:var(--bg3)}
.gcf-madlib-tap .gcf-slot.editing{background:var(--t1);border-color:var(--t1);border-style:solid;color:var(--bg0)}
.gcf-madlib-tap .gcf-slot.dir{cursor:default;border-style:solid;background:var(--bg3)}
.gcf-tap-hint{font-size:13px;color:var(--t3);margin:-2px 0 14px;font-family:'Barlow',sans-serif}
.gcf-word-ed{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:14px;margin:0 0 16px}
.gcf-wgrp-row{display:flex;align-items:center;gap:10px}
.gcf-wgrp-row .gcf-input,.gcf-wgrp-row .gcf-stepper{flex:1}
.gcf-wgrp-foot{display:flex;justify-content:flex-end;margin-top:12px}
.gcf-tick{flex-shrink:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--t1);color:var(--bg0);border:none;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gcf-tick:active{opacity:.8}
.gcf-slider{width:100%;margin:2px 0 12px;accent-color:var(--t1);height:24px}
.gcf-more-hd{font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--t2);margin:6px 0 14px;padding-top:14px;border-top:1px solid var(--bd)}
.gcf-more-hd span{color:var(--t3);font-weight:600}
.gcf-ml-dl{display:block;margin-top:10px;font-size:14px;font-weight:600;color:var(--t3);font-family:'Barlow',sans-serif;text-transform:none;letter-spacing:0}
.gcf-guess{font-size:13px;color:var(--t3);margin:-4px 0 16px;font-style:italic}
.gcf-ed{margin:0 0 18px}
.gcf-ed-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--t3);margin-bottom:8px;font-family:'Barlow Condensed',sans-serif}
.gcf-input{width:100%;box-sizing:border-box;background:var(--bg1);border:1.5px solid var(--bd);border-radius:12px;padding:13px 14px;font-size:16px;font-family:'Barlow',sans-serif;color:var(--t1);outline:none;transition:border .15s}
.gcf-input:focus{border-color:var(--t1)}
.gcf-input::placeholder{color:var(--t3)}
textarea.gcf-input{resize:none;line-height:1.5}
.gcf-seg{display:flex;gap:8px}
.gcf-seg-btn{flex:1;background:var(--bg1);border:1.5px solid var(--bd);border-radius:12px;padding:12px 10px;font-size:14px;font-weight:700;color:var(--t2);cursor:pointer;transition:all .12s;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
.gcf-seg-btn.active{background:var(--t1);border-color:var(--t1);color:var(--bg0)}
.gcf-stepper button{width:56px;height:50px;background:none;border:none;font-size:26px;color:var(--t1);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.gcf-stepper button:active{background:var(--bg3)}
.gcf-stepper input{flex:1;text-align:center;font-family:'Barlow Condensed',sans-serif;font-size:30px;font-weight:800;color:var(--t1);background:none;border:none;outline:none;width:100%;-moz-appearance:textfield}
.gcf-stepper input::-webkit-outer-spin-button,.gcf-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gcf-dl-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gcf-dl-row .gcf-input{flex:1;min-width:150px}
.gcf-ed-hint{margin-top:8px;font-size:13px;line-height:1.4;color:var(--t3);font-family:'Barlow',sans-serif}

/* ── Trophy Room ───────────────────────────────────────────── */
.trophy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 14px 4px}
.trophy-card{position:relative;background:radial-gradient(140px 100px at 50% -10%, color-mix(in srgb, var(--tiermid, var(--bd2)) 16%, transparent), transparent), var(--bg1);border:1px solid color-mix(in srgb, var(--tier, var(--bd)) 30%, var(--bd));border-radius:18px;padding:16px 10px 13px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .1s,border-color .15s}
.trophy-card:active{transform:scale(.97)}
.trophy-card:hover{border-color:var(--bd2)}
.trophy-card-cup{margin-bottom:2px}
.trophy-card-name{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:800;color:var(--t1);text-align:center;line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trophy-card-tier{font-size:12px;font-weight:700;font-family:'Barlow',sans-serif}
.trophy-card-pct{font-family:'Barlow Condensed',sans-serif;font-size:20px;font-weight:900;color:var(--t1)}
.trophy-card-when{font-size:11px;color:var(--t3);font-weight:600}
.trophy-tier-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;border:1px solid;border-radius:999px;padding:2.5px 9px;background:color-mix(in srgb, currentColor 10%, transparent)}
.hist-edit-btn{font-size:13px;font-weight:700;padding:6px 13px;border:1px solid var(--bd);border-radius:9px;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hist-edit-btn:active{background:var(--bg2)}
/* Edit mode: wiggling cards with a remove badge (homescreen-style) */
.trophy-card-x{position:absolute;top:-8px;left:-8px;width:25px;height:25px;border-radius:50%;background:var(--t1);color:var(--bg0);display:none;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.35);cursor:pointer}
#history-body.editing .trophy-card-x{display:flex}
#history-body.editing .trophy-card{animation:trophyWiggle .28s ease-in-out infinite alternate}
#history-body.editing .trophy-card:nth-child(2n){animation-delay:.14s}
@keyframes trophyWiggle{from{transform:rotate(-1deg)}to{transform:rotate(1deg)}}
@media (prefers-reduced-motion: reduce){#history-body.editing .trophy-card{animation:none}}
.trophy-badges-link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px;padding:14px 16px;background:var(--bg1);border:1px solid var(--bd);border-radius:14px;cursor:pointer;font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;color:var(--t2)}
.trophy-badges-link:active{opacity:.7}

/* Trophy detail */
.trophy-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 20px 8px}
.trophy-hero-cup{margin-bottom:6px}
.trophy-hero-tier{font-family:'Barlow',sans-serif;font-size:15px;font-weight:800;letter-spacing:.3px}
.trophy-hero-pct{font-family:'Barlow Condensed',sans-serif;font-size:40px;font-weight:900;color:var(--t1);line-height:1}
.trophy-hero-pct span{font-size:15px;font-weight:700;color:var(--t3);margin-left:6px;letter-spacing:.5px}
.trophy-hero-goal{font-size:14px;font-style:italic;color:var(--t2);margin-top:8px;max-width:320px}
.trophy-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:10px 16px 4px}
.trophy-stat{flex:1;min-width:72px;background:var(--bg1);border:1px solid var(--bd);border-radius:12px;padding:12px 8px;text-align:center}
.trophy-stat-v{font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:800;color:var(--t1);line-height:1.1}
.trophy-stat-l{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-top:3px;font-weight:600}
.trophy-collage-btn{margin:14px 16px 4px;width:calc(100% - 32px);display:flex;align-items:center;justify-content:center;gap:8px}
.trophy-evidence-wrap{padding:16px 16px 4px}
.trophy-sect-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);font-weight:700;margin-bottom:8px;font-family:'Barlow Condensed',sans-serif}
.trophy-evidence{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.trophy-ev-cell{aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg2);cursor:pointer}
.trophy-ev-cell img{width:100%;height:100%;object-fit:cover;display:block}
.trophy-purged-note{margin:16px;padding:14px;background:var(--bg1);border:1px solid var(--bd);border-radius:12px;font-size:14px;color:var(--t2);text-align:center;line-height:1.5}
.trophy-remove-btn{margin:18px 16px 0;width:calc(100% - 32px);padding:13px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;color:var(--t2);font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;cursor:pointer}
.trophy-remove-btn:active{opacity:.7}
.trophy-danger-btn{margin:10px 16px 8px;width:calc(100% - 32px);padding:13px;background:var(--rddim,rgba(220,60,60,.08));border:1px solid var(--rdbrd,rgba(220,60,60,.32));border-radius:12px;color:var(--rd);font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;cursor:pointer}
.trophy-danger-btn:active{opacity:.7}

/* ── Collage poster overlay ────────────────────────────────── */
.collage-overlay{position:fixed;inset:0;z-index:5000;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center}
.collage-overlay.open{display:flex}
.collage-sheet{background:var(--bg0);width:100%;max-width:520px;max-height:94vh;border-radius:20px 20px 0 0;display:flex;flex-direction:column;padding:16px 16px max(16px,env(safe-area-inset-bottom));overflow:hidden}
.collage-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.collage-close{cursor:pointer;color:var(--t2);padding:4px}
.collage-stepper{display:flex;gap:6px;margin-bottom:10px}
.collage-step-pill{flex:1;border:1px solid var(--bd);background:none;border-radius:999px;padding:6px 0;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--t3);cursor:pointer}
.collage-step-pill.done{color:var(--t2);border-color:var(--bd2)}
.collage-step-pill.active{background:var(--t1);border-color:var(--t1);color:var(--bg0)}
.collage-hint{display:flex;align-items:center;justify-content:center;gap:10px;min-height:30px;margin:8px 0 2px;font-size:13px;color:var(--t3);text-align:center}
.collage-hint b{color:var(--t1)}
.collage-cycle{border:1px solid var(--bd);background:none;color:var(--t1);width:28px;height:28px;border-radius:50%;font-size:16px;font-weight:700;cursor:pointer;line-height:1;flex-shrink:0}
.collage-step-controls{display:flex;flex-direction:column;gap:8px;min-height:44px;justify-content:center}
.collage-seg{display:flex;background:var(--bg2);border-radius:10px;padding:3px;gap:3px;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.collage-seg::-webkit-scrollbar{display:none}
.collage-seg-btn{flex:1;border:none;background:none;padding:7px 12px;border-radius:8px;font-family:'Barlow',sans-serif;font-size:14px;font-weight:700;color:var(--t2);cursor:pointer;white-space:nowrap}
.collage-seg-btn.active{background:var(--t1);color:var(--bg0)}
.collage-custom-input{font-size:15px}
.collage-preview{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg2);border-radius:12px;padding:14px;overflow:hidden;touch-action:none}
.collage-canvas{max-width:100%;max-height:46vh;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.collage-loading,.collage-empty-note{color:var(--t3);font-size:13px;text-align:center}
.collage-empty-note{margin-top:10px}
.collage-actions{margin-top:10px;display:flex;gap:8px}
.collage-actions .action-btn{flex:1;width:auto;margin:0}

/* ── Goal completion card ──────────────────────────────────── */
.complete-overlay{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.74);display:none;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}
.complete-overlay.open{display:flex}
.complete-card{background:var(--bg1);border:1px solid var(--bd);border-radius:22px;width:100%;max-width:360px;padding:26px 22px 20px;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.5);animation:completePop .35s cubic-bezier(.2,1.2,.4,1)}
@keyframes completePop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.complete-cup{display:flex;justify-content:center;margin-bottom:6px}
.complete-tier{font-family:'Barlow',sans-serif;font-size:15px;font-weight:800;letter-spacing:.3px;margin-bottom:10px}
.complete-headline{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;color:var(--t1);line-height:1.05}
.complete-goalname{font-size:14px;font-weight:700;color:var(--t2);margin-top:2px}
.complete-pct{font-family:'Barlow Condensed',sans-serif;font-size:38px;font-weight:900;color:var(--t1);line-height:1;margin-top:10px}
.complete-pct span{font-size:14px;font-weight:700;color:var(--t3);margin-left:5px}
.complete-sub{font-size:14px;color:var(--t3);margin:8px 0 18px;line-height:1.4}
.complete-card .action-btn{width:100%;margin:0}
.gcf-prose-card{background:var(--bg1);border:1.5px solid var(--bd);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.gcf-prose-card .gcf-prose{background:none;border:none;border-radius:0;padding:0;margin:0}
.gcf-name-row{display:flex;gap:10px;align-items:center}
.gcf-name-row .gcf-input{flex:1}
.gcf-disclosure{width:100%;background:none;border:1.5px dashed var(--bd2);border-radius:12px;padding:12px;font-size:14px;font-weight:700;color:var(--t2);cursor:pointer;font-family:'Barlow Condensed',sans-serif;letter-spacing:.4px;text-transform:uppercase;margin:4px 0 8px;-webkit-tap-highlight-color:transparent}
#gcf-rules-adv{border:1.5px solid var(--bd);border-radius:14px;padding:16px;margin-bottom:8px;background:var(--bg1)}
#gcf-rules-adv .gcf-ed:last-child{margin-bottom:0}
.gcf-perlog-qty{display:flex;align-items:center;gap:12px}
.gcf-perlog-qty .gcf-stepper{flex:1}
.gcf-perlog-unit{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
/* neutralise the legacy orange accountability callout for the flat black/white flow */
.gcf-accountability{background:var(--bg2);border:1px solid var(--bd);color:var(--t2)}
.gcf-accountability strong{color:var(--t1)}
/* ══ END GOAL CREATION FLOW ══ */

/* Squad chips in multi-log */
.type-chip { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; border:1.5px solid var(--bd); background:var(--bg2); cursor:pointer; transition:all .15s; user-select:none; -webkit-tap-highlight-color:transparent; }
.type-chip.sel { border-color:var(--t1); background:var(--bg2); }
.type-chip-ico { font-size:20px; width:32px; text-align:center; flex-shrink:0; }
.type-chip-name { font-size:14px; font-weight:600; color:var(--t1); flex:1; }
.type-chip.sel .type-chip-name { color:var(--t1); }
.type-chip-check { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--bd2); background:var(--bg3); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.type-chip.sel .type-chip-check { background:var(--t1); border-color:var(--t1); }
#ml-type-body { max-height:0; overflow-y:auto; overflow-x:hidden; transition:max-height .28s ease; }
#ml-type-chev { transition:transform .2s; flex-shrink:0; }
.sq-chip { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; border:1.5px solid var(--bd); background:var(--bg2); cursor:pointer; transition:border-color .15s,background .15s; user-select:none; -webkit-tap-highlight-color:transparent; }
.sq-chip.sel { border-color:var(--t1); background:var(--bg2); }
.sq-chip-avatar { width:36px; height:36px; border-radius:8px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:18px; background-size:cover; background-position:center; }
.sq-chip-name { font-size:14px; font-weight:600; color:var(--t1); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sq-chip-goal { font-size:11px; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; }
.sq-chip-check { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--bd2); background:var(--bg3); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.sq-chip.sel .sq-chip-check { background:var(--t1); border-color:var(--t1); }
#ml-sq-body { max-height:500px; overflow:hidden; transition:max-height .28s ease; }
#ml-sq-chev { transition:transform .2s; flex-shrink:0; }

/* ─── AUTH SCREEN STYLES ─── */
/* ── Keyframes ── */
@keyframes auth-fade-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes auth-slide-up {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}
@keyframes auth-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
@keyframes auth-stripe-drift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}
@keyframes auth-logo-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,0,0,.0), 0 4px 24px rgba(0,0,0,.30); }
  50%     { box-shadow: 0 0 0 10px rgba(0,0,0,.0), 0 4px 24px rgba(0,0,0,.40); }
}

/* ── Root overlay ── */
/* ── Auth screen — always light ── */
#auth-screen {
  color-scheme: light;   /* always-light overlay — keep native inputs/autofill light, no auto-dark */
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  background: #fff;
  transition: opacity .35s ease, transform .35s ease;
}
#auth-screen.auth-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
}
/* Returning signed-in user (token in storage): keep the login form out of the DOM flow during
   restore so iOS doesn't trigger Face ID / password autofill mid-restore. Cleared by
   auth.js if the session turns out invalid (genuinely signed out). */
html.has-session #auth-screen { display: none; }

/* ── Top branding area ── */
.auth-brand {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 8px;
}
.auth-logo {
  width: 80px;
  height: 80px;
  border-radius: 22px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.auth-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #000;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}
.auth-wordmark em {
  color: #000;
  font-style: normal;
}
.auth-tagline {
  font-size: 12px;
  color: #888;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
}

/* ── Card sheet ── */
.auth-card {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.07);
  /* No transform-based entrance animation and no overflow:hidden clip here: the combo of an
     animated/transformed, border-radius + overflow:hidden container made the card's contents
     (fields, tabs, button) render blank-but-clickable on some Samsung/Adreno GPUs. */
}

/* ── Tabs ── */
.auth-tabs {
  display: flex;
  border-bottom: 1.5px solid #e8e8e8;
  position: relative;
}
.auth-tab {
  flex: 1;
  padding: 16px 0 14px;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaa;
  cursor: pointer;
  transition: color .2s;
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.auth-tab.active { color: #000; }
.auth-tab-ink {
  position: absolute;
  bottom: -1.5px;
  height: 2px;
  background: #000;
  border-radius: 2px 2px 0 0;
  transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}

/* ── Panels ──
   Both panels are stacked in one grid cell and always laid out + painted; switching only
   toggles opacity. We deliberately do NOT use display:none/flex here: that toggle left the
   switched-to panel blank-but-clickable on Samsung/Adreno GPUs (a paint-after-layout bug).
   Keeping both in the render tree means a switch needs no fresh layout/paint — no glitch,
   nothing to force, nothing to flicker. The card sizes to the taller panel (sign-up). */
.auth-panels { display: grid; }
.auth-panel {
  grid-area: 1 / 1;
  padding: 22px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
}
.auth-panel.active { opacity: 1; pointer-events: auto; }

/* ── Field group ── */
.auth-field { display: flex; flex-direction: column; gap: 5px; }
.auth-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  padding-left: 2px;
}
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-wrap svg.auth-field-icon {
  position: absolute;
  left: 13px;
  width: 15px; height: 15px;
  stroke: #bbb;
  pointer-events: none;
  transition: stroke .2s;
  flex-shrink: 0;
}
.auth-input {
  width: 100%;
  background: #f7f7f7;
  border: 1.5px solid #e0e0e0;
  border-radius: 11px;
  padding: 12px 14px 12px 40px;
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  color: #000;
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.auth-input::placeholder { color: #bbb; font-size: 14px; }
.auth-input:focus { border-color: #000; }
.auth-input-wrap:focus-within svg.auth-field-icon { stroke: #000; }
.auth-input-wrap svg.auth-field-icon { order: -1; }
.auth-pw-toggle {
  position: absolute; right: 13px; cursor: pointer;
  padding: 4px; opacity: .4; transition: opacity .15s; display: flex; align-items: center;
}
.auth-pw-toggle:hover { opacity: .75; }
.auth-pw-toggle svg { width: 15px; height: 15px; stroke: #777; }

/* ── Inline error ── */
.auth-error {
  display: none; font-size: 12px; color: #e53e3e;
  font-weight: 600; padding-left: 4px; letter-spacing: .3px;
  align-items: center; gap: 5px;
}
.auth-error.visible { display: flex; animation: auth-shake .35s ease; }
.auth-error svg { width: 12px; height: 12px; stroke: #e53e3e; flex-shrink: 0; }

/* ── Forgot password link ── */
.auth-forgot {
  text-align: right; font-size: 12px; color: #555;
  font-weight: 600; cursor: pointer; padding: 0 2px;
  letter-spacing: .3px; -webkit-tap-highlight-color: transparent;
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-forgot:active { opacity: .6; }
.auth-forgot.sent { color: #2d8a4e; cursor: default; pointer-events: none; text-decoration: none; }

/* ── Submit button ── */
.auth-submit {
  margin-top: 6px; width: 100%;
  background: #000; border: none; border-radius: 11px;
  padding: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: #fff; cursor: pointer;
  transition: opacity .15s, transform .12s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.auth-submit:active:not(:disabled) { opacity: .8; transform: scale(.98); }
.auth-submit:disabled { opacity: .35; cursor: default; }

/* ── Spinner ── */
.auth-spinner {
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: auth-spin .7s linear infinite;
  display: none; flex-shrink: 0;
}
.auth-submit.loading .auth-spinner { display: block; }
.auth-submit.loading .auth-btn-text { opacity: .6; }

/* ── Divider ── */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e8e8e8; }
.auth-divider span { font-size: 11px; color: #bbb; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }

/* ── Switch link ── */
.auth-switch { text-align: center; font-size: 13px; color: #888; padding: 6px 0 2px; }
.auth-switch a { color: #000; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; -webkit-tap-highlight-color: transparent; }

/* ── Global form error banner ── */
.auth-banner {
  margin: 0 20px;
  background: #fff0f0; border: 1px solid #fcc; border-radius: 10px;
  padding: 9px 13px; font-size: 13px; color: #c53030;
  font-weight: 600; display: none; align-items: center; gap: 8px;
  animation: auth-shake .35s ease;
}
.auth-banner.visible { display: flex; }
.auth-banner svg { width: 14px; height: 14px; stroke: #c53030; flex-shrink: 0; }

/* ── Coaching screen ─────────────────────────────────────────── */
.seg-toggle { display:flex; background:var(--bg1); border:1px solid var(--bd); border-radius:10px; padding:3px; gap:3px; }
.seg-opt { flex:1; text-align:center; padding:7px 0; font-size:13px; font-weight:700; color:var(--t2); border-radius:7px; cursor:pointer; transition:background .12s,color .12s; }
.seg-opt.active { background:var(--t1); color:var(--bg0); }
.coach-card { margin:0 16px 10px; padding:12px; border:1px solid var(--bd); border-radius:14px; background:var(--bg1); cursor:pointer; }
.coach-card:active { background:var(--bg2); }
.coach-card-head { display:flex; align-items:center; gap:10px; }
.coach-thumb { width:42px; height:42px; border-radius:10px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.coach-thumb-emoji { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.coach-card-title { font-size:14px; font-weight:700; color:var(--t1); }
.coach-card-sub { font-size:12px; color:var(--t3); margin-top:3px; line-height:1.5; }
.coach-chips { margin-top:8px; }
.coach-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg2); border-radius:20px; padding:3px 10px 3px 3px; font-size:12px; color:var(--t1); margin:4px 4px 0 0; }
.coach-chip-av { width:18px; height:18px; border-radius:50%; background-size:cover; background-position:center; background:var(--bg3); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--t2); flex-shrink:0; }
.coach-role-tag { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--bg0); background:var(--t1); border-radius:6px; padding:2px 6px; margin-left:2px; }
.coach-pct { color:var(--t3); }
.coach-req { margin:0 16px 8px; padding:12px; border:1px solid var(--bd); border-radius:14px; background:var(--bg1); }
.coach-req-actions { display:flex; gap:8px; margin-top:10px; }
.coach-req-btn { flex:1; padding:8px; border-radius:9px; font-size:13px; font-weight:700; text-align:center; cursor:pointer; border:1px solid var(--bd); color:var(--t1); }
.coach-req-btn.accept { background:var(--t1); color:var(--bg0); border-color:var(--t1); }
.coach-empty { margin:4px 16px; padding:18px 16px; text-align:center; font-size:13px; color:var(--t3); line-height:1.6; }
#s-squad.coach-mode .sq-log-btn { display:none !important; }

/* Coach view filters (multi-select) */
.coach-ms { position:relative; }
.coach-ms-btn { display:flex; align-items:center; gap:6px; background:var(--bg1); border:1px solid var(--bd); border-radius:8px; padding:6px 10px; font-size:13px; font-weight:600; color:var(--t1); cursor:pointer; }
.coach-ms-cnt { min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--t1); color:var(--bg0); font-size:11px; font-weight:800; display:none; align-items:center; justify-content:center; }
.coach-ms-cnt.on { display:inline-flex; }
.coach-ms-car { color:var(--t3); font-size:11px; }
.coach-ms-panel { display:none; position:absolute; top:calc(100% + 4px); left:0; z-index:60; background:var(--bg1); border:1px solid var(--bd); border-radius:10px; padding:6px; min-width:190px; max-height:260px; overflow:auto; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.coach-ms-panel.open { display:block; }
.coach-ms-opt { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:7px; font-size:14px; color:var(--t1); cursor:pointer; }
.coach-ms-opt:active { background:var(--bg2); }
.coach-ms-opt input { width:15px; height:15px; accent-color:var(--t1); flex-shrink:0; }
.coach-ms-clear { font-size:12px; color:var(--t3); padding:6px 8px 2px; cursor:pointer; }
.coach-bell { flex:none; cursor:pointer; color:var(--t3); padding:4px; }
.coach-bell.on { color:var(--t1); }

/* Home YOUR GOALS / COACH MODE tabs */
.home-tabs { display:flex; gap:18px; align-items:center; }
.home-tab { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:800; letter-spacing:.3px; color:var(--t3); cursor:pointer; text-transform:uppercase; background:none; border:none; padding:0; }
.home-tab.active { color:var(--t1); }
.home-coach-gear { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; margin-left:-8px; background:none; border:none; color:var(--t2); cursor:pointer; }
.home-coach-gear:active { color:var(--t1); }

/* Full-screen settings overlay (slides in from the left, scrollable) */
.screen-overlay { position:fixed; inset:0; z-index:900; background:#000; display:flex; flex-direction:column; transform:translateX(-100%); visibility:hidden; transition:transform .28s cubic-bezier(.4,0,.2,1), visibility .28s; }
html.light .screen-overlay { background:#fff; }
.screen-overlay.from-right { transform:translateX(100%); }
.screen-overlay.open { transform:translateX(0); visibility:visible; }
.so-topbar { display:flex; align-items:center; gap:12px; padding:calc(var(--st) + 12px) 16px 12px; border-bottom:1px solid var(--bd); flex-shrink:0; }
.so-title { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:800; color:var(--t1); letter-spacing:.3px; }
.so-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--sb) + 28px); }

/* Form label (shared: vision form, etc.) */
.ob-lbl { display:block; font-size:12px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }

/* ═══════ DESKTOP LAYER (≥1024px) — paying-persona console + roomy browser view ═══════
   The mobile SPA is unchanged below this width. On large screens we widen the app,
   lay goal lists out as grids (coach view especially), and keep text screens readable. */
@media (min-width: 1024px) {
  #app { max-width: 1120px; }

  /* Goal / browse / coach lists become responsive grids that fill the width.
     Home keeps its folder headers full-width — only the cards INSIDE each group grid. */
  .squads-list:not(.is-rows) .squad-group-body,
  #browse-list,
  #coach-coach-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    align-items: start;
  }
  /* Cards carry their own side margins on mobile — neutralize inside the grid so columns align. */
  #coach-coach-list .coach-card { margin-left: 0; margin-right: 0; }
  #browse-list > * { margin-left: 0; margin-right: 0; }

  /* The coach panel toolbar / filters / requests read better constrained, list stays wide. */
  #coach-panel, #coach-requests { max-width: 100%; }

  /* Text- and detail-heavy screens: center in a readable column instead of stretching. */
  #s-squad .scr-body > *,
  #s-mailbox .scr-body,
  #s-activity .scr-body,
  #s-squad-settings .scr-body,
  #m-settings-app .so-body {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Squad detail header image shouldn't be capped — only its inner content blocks are. */
  #s-squad .scr-body > #sq-photo-wrap, #s-squad .scr-body > .sq-hero { max-width: none; }

  /* Bottom-sheet modals: center as a card rather than a full-width bar. */
  .modal-sheet { max-width: 540px; margin-left: auto; margin-right: auto; border-radius: 18px; }

  /* Goal-creation flow + overlays keep a comfortable centered column. */
  #goal-creation-flow .gcf-step { max-width: 640px; margin-left: auto; margin-right: auto; }
}

/* Text-size slider (Settings) */
.tscale-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--bg3); outline: none; }
.tscale-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--t1); border: 3px solid var(--bg1); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer; }
.tscale-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--t1); border: 3px solid var(--bg1); cursor: pointer; }

/* ═══════ MOTION LAYER — global entrance animations ═══════
   Bars fill from zero, rings draw themselves, numbers pop, lists cascade.
   Everything is a one-shot entrance (re-renders replay it); transitions for
   later value changes are untouched. Disabled under prefers-reduced-motion. */

/* Progress bars: grow from 0 to their inline width on first paint */
@keyframes fillW { from { width: 0; } }
.trk-fill, .trk-seg-fill, .lb-rail-fill, .lb-seg-fill, .member-bar-fill,
.dash-focus-bar i, .sq-sub-fill, .tv-bar-fill { animation: fillW 1.5s cubic-bezier(.25,.8,.25,1) backwards; }

/* Rings (pathLength-normalized): the arc draws around the track */
@keyframes arcDraw { from { stroke-dasharray: 0 100; opacity: .4; } }
.ring-svg .ring-arc[pathLength], .row-ring-arc[pathLength] { animation: arcDraw 1.7s cubic-bezier(.3,.7,.25,1) backwards; }
.ring-svg .ring-arc[pathLength]:nth-of-type(4), .row-ring-arc[pathLength]:nth-of-type(4) { animation-delay: .3s; }

/* Big numbers settle into place (dashboard numbers stay solid — count-up provides the motion) */
@keyframes numPop { from { opacity: 0; transform: translateY(7px) scale(.9); } }
.squad-stat-n, .ring-c-main, .trophy-card-pct { animation: numPop .8s cubic-bezier(.25,1.3,.4,1) backwards; }

/* Cards and rows cascade in */
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } }
.lb-row, .trophy-card, .browse-card, .sq-info-card, .mbx-card {
  animation: riseIn .6s cubic-bezier(.25,.8,.3,1) backwards;
}
.lb-row:nth-child(2), .trophy-card:nth-child(2), .browse-card:nth-child(2), .mbx-card:nth-child(2) { animation-delay: .06s; }
.lb-row:nth-child(3), .trophy-card:nth-child(3), .browse-card:nth-child(3), .mbx-card:nth-child(3) { animation-delay: .12s; }
.lb-row:nth-child(4), .trophy-card:nth-child(4), .browse-card:nth-child(4), .mbx-card:nth-child(4) { animation-delay: .18s; }
.lb-row:nth-child(n+5), .trophy-card:nth-child(n+5), .browse-card:nth-child(n+5), .mbx-card:nth-child(n+5) { animation-delay: .24s; }

/* Leaderboard ultimate dots + sparkline dots pop in a wave */
@keyframes dotPop { from { opacity: 0; transform: scale(.3); } }
.lb-dot, .spark-dot { animation: dotPop .65s cubic-bezier(.3,1.5,.5,1) backwards; }
.lb-dot:nth-child(odd) { animation-delay: .08s; }
.lb-dot:nth-child(3n) { animation-delay: .16s; }



/* Line charts: the trend line draws itself forward, dots ride in along it, area fades up late */
@keyframes lineDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.dash-line, .spark-line { stroke-dasharray: 100 100; animation: lineDraw 2.4s cubic-bezier(.35,.1,.25,1) backwards; }
@keyframes svgDotPop { from { opacity: 0; transform: scale(0); } }
.dash-dot { transform-box: fill-box; transform-origin: center; animation: svgDotPop .6s cubic-bezier(.3,1.5,.5,1) backwards; }
@keyframes areaUp { from { opacity: 0; } }
.dash-area, .spark-area { animation: areaUp 1.3s ease 1.1s backwards; }
/* Bar charts: each bar rises from the baseline, left to right */
@keyframes barRise { from { transform: scaleY(0); } }
.dash-bar { transform-box: fill-box; transform-origin: bottom; animation: barRise 1.1s cubic-bezier(.25,.8,.3,1) backwards; }
/* At-a-glance cells cascade */
.dash-glance-cell:nth-child(2) .dash-glance-n { animation-delay: .08s; }
.dash-glance-cell:nth-child(3) .dash-glance-n { animation-delay: .16s; }
.dash-glance-cell:nth-child(4) .dash-glance-n { animation-delay: .24s; }
/* Legendary stats row gets a celebratory shimmer sweep */
@keyframes legendShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.squad-stats-row.legendary { background-image: linear-gradient(105deg, transparent 40%, rgba(0,229,204,.14) 50%, transparent 60%); background-size: 200% 100%; animation: legendShimmer 2.6s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .trk-fill, .trk-seg-fill, .lb-rail-fill, .lb-seg-fill, .member-bar-fill,
  .dash-focus-bar i, .sq-sub-fill, .tv-bar-fill,
  .ring-svg .ring-arc[pathLength], .row-ring-arc[pathLength],
  .squad-stat-n, .ring-c-main, .trophy-card-pct,
  .lb-row, .trophy-card, .browse-card, .sq-info-card, .mbx-card,
  .lb-dot, .spark-dot, .sh, .dash-card-title, .sq-info-card-lbl, .dash-chart-svg,
  .dash-line, .spark-line, .dash-dot, .dash-area, .spark-area, .dash-bar,
  .squad-stats-row.legendary { animation: none; }
}

/* App-icon picker (settings): horizontal row of live + previews */
.icon-picker { display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
.icon-picker::-webkit-scrollbar { display:none; }
.icon-swatch { flex-shrink:0; background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; }
.icon-swatch-tile { width:60px; height:60px; border-radius:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3), inset 0 0 0 1px rgba(128,128,128,.25); border:2px solid transparent; box-sizing:border-box; }
.icon-swatch-tile svg { width:30px; height:30px; }
.icon-swatch.active .icon-swatch-tile { border-color:var(--t1); box-shadow:0 0 0 2px var(--bg1), 0 0 0 4px var(--t1); }
.icon-swatch-lbl { font-size:11px; font-weight:700; color:var(--t3); letter-spacing:.3px; }
.icon-swatch.active .icon-swatch-lbl { color:var(--t1); }

/* Projected-trophy badge — its own card above the leaderboard trend-line; taps to a locked preview */
.proj-trophy { display:flex; align-items:center; gap:11px; margin:10px 14px 0; padding:9px 13px; background:var(--bg1); border:1px solid var(--bd); border-left:3px solid var(--proj-c,var(--bd)); border-radius:13px; cursor:pointer; transition:transform .12s, box-shadow .12s; -webkit-tap-highlight-color:transparent; }
.proj-trophy:active { transform:scale(.99); }
.proj-trophy-ico { flex-shrink:0; width:38px; display:flex; align-items:center; justify-content:center; }
.proj-trophy-ico svg { width:38px; height:auto; display:block; }
.proj-trophy-txt { min-width:0; flex:1; }
.proj-trophy-hd { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:800; letter-spacing:.3px; color:var(--t1); line-height:1.1; }
.proj-trophy-sub { font-size:11.5px; color:var(--t3); line-height:1.35; margin-top:2px; }
.proj-trophy-chev { flex-shrink:0; color:var(--t3); }

/* Locked projected-trophy preview modal */
.ptv-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:16px 0 4px; }
.ptv-stage::before { content:''; position:absolute; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle, var(--proj-c) 0%, transparent 70%); opacity:.20; }
.ptv-trophy { position:relative; filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.ptv-trophy svg { display:block; }
.ptv-lock { position:absolute; bottom:6px; left:calc(50% + 30px); width:30px; height:30px; border-radius:50%; background:var(--bg3); border:1.5px solid var(--bd2); color:var(--t1); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.4); }
.ptv-ribbon { display:inline-block; margin:6px auto 0; font-size:10px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--t3); background:var(--bg2); border:1px solid var(--bd); border-radius:999px; padding:3px 11px; }
.ptv-tier { font-family:'Barlow Condensed',sans-serif; font-size:24px; font-weight:800; letter-spacing:.5px; margin-top:10px; }
.ptv-sub { font-size:13px; color:var(--t2); line-height:1.5; margin:7px 18px 0; }
.ptv-deadline { font-size:12px; color:var(--t3); margin-top:10px; font-weight:600; }
.ptv-ladder-title { font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--t3); margin:18px 0 9px; }
.ptv-ladder { display:flex; flex-direction:column; gap:6px; margin:0 14px; text-align:left; }
.ptv-rung { display:flex; align-items:center; gap:9px; padding:8px 11px; border:1px solid var(--bd); border-radius:10px; background:var(--bg1); }
.ptv-rung.on { border-color:var(--proj-c, var(--t1)); box-shadow:inset 0 0 0 1px var(--proj-c, var(--t1)); }
.ptv-rung-ico { font-size:17px; flex-shrink:0; }
.ptv-rung-name { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:14px; letter-spacing:.3px; width:78px; flex-shrink:0; }
.ptv-rung-desc { font-size:11.5px; color:var(--t3); line-height:1.3; }

/* Log form: a required section the user tried to submit without filling — shake once, then
   hold a soft red ring until they pick something (cleared in _updateMlBtn). */
@keyframes mlMissShake { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }
.ml-missing { border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--rd); background: var(--rddim); animation: mlMissShake .45s cubic-bezier(.36,.07,.19,.97); }

/* Home empty states: bare = "filters hid everything"; hero = brand-new user, zero goals */
#home-empty { text-align:center; padding:28px 20px; color:var(--t3); font-size:14px; }
#home-empty.home-empty-hero { padding:48px 28px 32px; color:var(--t1); display:flex; flex-direction:column; align-items:center; }
.heh-emoji { font-size:52px; line-height:1; margin-bottom:14px; }
.heh-title { font-family:'Barlow Condensed',sans-serif; font-size:26px; font-weight:800; letter-spacing:.4px; color:var(--t1); margin-bottom:8px; }
.heh-sub { font-size:15px; line-height:1.55; color:var(--t2); max-width:300px; margin-bottom:22px; }
.home-empty-hero .action-btn { width:100%; max-width:300px; margin:0; }
.heh-join { background:none; border:none; color:var(--t3); font-family:'Barlow',sans-serif; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; margin-top:14px; padding:6px; }

/* Progressive unlocks: locked tabs keep their slot but render nothing — the + button and
   every unlocked tab sit at their FINAL position from day one, no reshuffling per unlock */
.app-tab.tab-locked { visibility: hidden; pointer-events: none; }
.app-tab.unlocking { animation: tab-pop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes tab-pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
/* Staged tutorial: the Summary slide is left out until that tab exists for the user */
.tut-slide.tut-hidden { display: none; }

/* Reveal gating: a card's data animations hold until the card scrolls into view. Line/bar
   charts hold until the chart SVG itself is in view — a tall card's title can be on screen
   while its chart is still behind the fold/bottom nav. */
.dash-card:not(.inview) .ring-arc[pathLength],
.dash-chart-svg:not(.inview) :is(.dash-line, .dash-dot, .dash-area, .dash-bar),
#home-squads-list :is(.squad-card-v2, .squad-row):not(.inview) :is(.ring-arc[pathLength], .row-ring-arc[pathLength], .trk-fill, .trk-seg-fill, .spark-line, .spark-dot, .spark-area, .lb-rail-fill, .lb-seg-fill) {
  animation-play-state: paused;
}

/* Odometer roll when the ring's centre count changes after a log */
@keyframes odoRoll { 0% { transform: translateY(55%); opacity: 0; } 60% { transform: translateY(-7%); opacity: 1; } 100% { transform: translateY(0); } }
.ring-c-main.odo { animation: odoRoll .8s cubic-bezier(.2,.9,.3,1.1); }

/* Pull-to-refresh ring */
#ptr-ind { position: fixed; top: calc(var(--st) + 52px); left: 50%; transform: translate(-50%, 0); width: 38px; height: 38px; border-radius: 50%; background: var(--bg1); border: 1px solid var(--bd); box-shadow: 0 4px 14px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; color: var(--t2); z-index: 800; opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s ease; }
#ptr-ind svg { width: 19px; height: 19px; }
#ptr-ind.ready { color: var(--t1); border-color: var(--t1); }
#ptr-ind.spinning svg { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* Goal-complete cinematic: ring draws shut, bursts into sparks, fades to the trophy card */
.complete-card { position: relative; }
.complete-cine { position: absolute; inset: 0; background: var(--bg1); border-radius: inherit; display: flex; align-items: center; justify-content: center; z-index: 6; pointer-events: none; animation: cineFade .45s ease 2.55s forwards; }
@keyframes cineFade { to { opacity: 0; visibility: hidden; } }
.cine-wrap { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.cine-ring { width: 140px; height: 140px; animation: cineSettle .5s ease 2.5s forwards; }
@keyframes cineSettle { to { opacity: 0; transform: scale(1.06); } }
.cine-tick { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%,-50%); }
.cine-tick polyline { stroke: #00E5CC; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: cineTickDraw .4s cubic-bezier(.3,.1,.3,1) 1.35s forwards, cineSettle .5s ease 2.5s forwards; }
@keyframes cineTickDraw { to { stroke-dashoffset: 0; } }
.cine-track { stroke: var(--bg3); fill: none; }
.cine-arc { stroke: #00E5CC; fill: none; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: cineDraw 1.15s cubic-bezier(.3,.1,.25,1) .15s forwards; }
@keyframes cineDraw { to { stroke-dashoffset: 0; } }
@keyframes cineBoom { to { transform: scale(1.9); opacity: 0; } }

.cine-lbl { position: absolute; left: 50%; bottom: -52px; transform: translateX(-50%); white-space: nowrap; text-align: center; font-family: 'Barlow Condensed', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: 2.5px; color: var(--t1); opacity: 0; animation: cineLbl .4s ease 1.6s forwards, cineSettle .45s ease 2.5s forwards; }
@keyframes cineLbl { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ring-c-main.odo, #ptr-ind.spinning svg, .complete-cine, .cine-ring, .cine-arc, .cine-lbl, .cine-tick polyline { animation: none; }
  .complete-cine { display: none; }
}

/* Goal view drag-to-close: keep inner bounce from fighting the pull */
#s-squad .scr-body { overscroll-behavior-y: contain; }



/* Compact leaderboard: momentum chip on the name line + explanatory legend below the list */
.lb-mom2 { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--t2); flex-shrink: 0; }
.lb-mom2 b { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; color: var(--t1); }
.lb-mom2 i { font-style: normal; font-size: 10px; font-weight: 800; color: var(--t3); }
.lb-legend { margin: 8px 16px 12px; font-size: 11px; color: var(--t3); line-height: 1.5; }

/* Settings dropdowns (visibility, category) */
.sr-select { background: var(--bg2); border: 1px solid var(--bd); border-radius: 9px; padding: 6px 10px; font-size: 14px; font-weight: 600; color: var(--t1); font-family: 'Barlow', sans-serif; outline: none; max-width: 150px; }