/* ==========================================================================
   BALENZ — release candidate design system
   Black / red / white BALENZ identity, mobile-first, app-store ready.
   ========================================================================== */

:root{
  --red:#ef1019;
  --red-deep:#b90812;
  --red-soft:rgba(239,16,25,.14);
  --black:#050505;
  --panel:#131313;
  --panel-2:#191919;
  --line:#272727;
  --line-strong:#3a3a3a;
  --text:#f7f7f7;
  --muted:#9b9b9f;
  --muted-2:#6f6f74;
  --success:#32d583;
  --warning:#fdb022;
  --danger:#f04438;
  --dating:#ff4f7d;
  --trainer:#54c6ff;
  --gold-1:#f7e3a1;
  --gold-2:#c9a227;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:64px;
  /* How much of the layout viewport the on-screen keyboard is covering.
     js/boot.js keeps it in step with visualViewport; 0 whenever no keyboard
     is up, so every calc() below is valid without it. */
  --keyboard:0px;
  --shell:520px;
  --radius:20px;
  --radius-sm:14px;
  --avatar-r:17px;      /* rounded-square profile images */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#000;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#000;color:var(--text);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
img{max-width:100%}
button{font:inherit}
input,select,textarea{font:inherit}

/* --------------------------------------------------------------- shell -- */
.app{
  position:relative;max-width:var(--shell);margin:0 auto;min-height:100dvh;
  background:radial-gradient(120% 60% at 50% -8%,#1c0709 0%,#0a0a0a 34%,#050505 70%);
  overflow-x:hidden;
}
.screen{
  display:none;min-height:100dvh;
  padding:calc(16px + var(--safe-top)) 18px calc(var(--nav-h) + 34px + var(--safe-bottom));
}
.screen.active{display:block;animation:screen-in .22s ease both}
.screen.plain{padding-bottom:calc(34px + var(--safe-bottom))}
/* Screen visibility is decided by .active and nowhere else. A screen variant
   that needs a different display type states it here, qualified by .active, so
   it can never make an inactive screen visible alongside the active one. */
.screen.active.splash{display:flex}
/* Until boot has resolved the Supabase session we do not know whether this
   member is signed in, so nothing in the app renders — the landing page must
   never flash over an account that is about to open. Gating the container
   rather than each screen means no screen variant can out-specify it. */
body:not(.ready) .app{display:none}
body:not(.ready) .nav{display:none}
.boot{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;background:var(--black);
}
body:not(.ready) .boot{display:flex}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ------------------------------------------------------------ app bars -- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;margin-bottom:14px;
}
.topbar .spacer{flex:1}
.mini-logo{width:106px;height:auto;display:block}
.header-icon{width:38px;height:38px;border-radius:12px}
.back{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;
  border:0;background:none;color:#cfcfcf;font-size:14px;font-weight:700;
  padding:0 8px 0 0;cursor:pointer;
}
.back:active{color:#fff}
.icon-btn{
  position:relative;display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:14px;border:1px solid var(--line);
  background:#101010;color:#e7e7e7;font-size:17px;cursor:pointer;
}
.icon-btn:active{background:#191919}
.icon-btn .dot{
  position:absolute;top:8px;right:9px;min-width:9px;height:9px;padding:0 3px;
  border-radius:999px;background:var(--red);border:2px solid #0b0b0b;
  font-size:9px;font-weight:900;line-height:9px;color:#fff;
}
.icon-btn .dot:empty{padding:0}

/* ----------------------------------------------------------- typography -- */
h1{font-size:31px;line-height:1.06;letter-spacing:-.035em;margin:8px 0 10px;font-weight:900}
h2{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:26px 0 10px;font-weight:800}
h3{font-size:15.5px;line-height:1.3;margin:0 0 4px;font-weight:800}
p{color:var(--muted);line-height:1.55;font-size:14px;margin:0 0 10px}
.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:900;color:var(--red);text-transform:uppercase}
.eyebrow.neutral{color:var(--muted-2)}
.tagline{font-size:14px;letter-spacing:.18em;font-weight:800;color:#ff2630;text-transform:uppercase;text-align:center}
.lead{font-size:16px;color:var(--muted);line-height:1.55}
.small{font-size:12px;line-height:1.5}
.tiny{font-size:11px;line-height:1.45}
.muted{color:var(--muted)}
.dim{color:var(--muted-2)}
.center{text-align:center}
.strong{color:#fff;font-weight:800}
.nowrap{white-space:nowrap}
.section-note{font-size:11px;color:var(--muted-2);line-height:1.55}
.screen-title{margin-top:0}

/* --------------------------------------------------------------- cards -- */
.card{
  background:linear-gradient(158deg,#181818 0%,#0e0e0e 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:12px 0;box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.card.tight{padding:13px}
.card.flat{background:#101010;box-shadow:none}
.card.accent{border-color:#4a1418;background:linear-gradient(158deg,#1b0d0f,#0d0d0d)}
.card.dating-card{border-color:#4d1a2c;background:linear-gradient(158deg,#1b0e14,#0d0d0d)}
.card.trainer-card{border-color:#173d4d;background:linear-gradient(158deg,#0e1519,#0d0d0d)}
.card.danger-zone{border-color:#5a171c}
.card.press{cursor:pointer;transition:transform .14s ease,border-color .14s ease}
.card.press:active{transform:scale(.99);border-color:var(--line-strong)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row.top{align-items:flex-start}
.stack{display:flex;flex-direction:column;gap:8px}
.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.divider{height:1px;background:#1f1f1f;margin:16px 0;border:0}
.hidden{display:none!important}

/* --------------------------------------------------------------- forms -- */
label{display:block;font-size:12.5px;font-weight:700;color:#dcdcdc;margin:14px 0 0}
label .hint{display:block;font-weight:500;color:var(--muted-2);font-size:11px;margin-top:3px}
.field{
  width:100%;min-height:50px;border:1px solid #2f2f2f;background:#0c0c0c;color:#fff;
  border-radius:var(--radius-sm);padding:14px 15px;outline:none;margin:7px 0;
  font-size:16px; /* 16px prevents iOS zoom-on-focus */
}
textarea.field{min-height:96px;resize:vertical;line-height:1.5}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#888 50%),linear-gradient(135deg,#888 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.field::placeholder{color:#5d5d61}
.field:focus{border-color:#7a1f25;box-shadow:0 0 0 3px var(--red-soft)}
.field:disabled{opacity:.55}
.field-row{display:flex;gap:10px}
.field-row .field{flex:1}
input[type=file].field{padding:12px;font-size:13px;color:#9b9b9f}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;border:0;border-radius:var(--radius-sm);
  padding:15px 18px;background:linear-gradient(135deg,var(--red),#cf0811);
  color:#fff;font-weight:900;letter-spacing:.02em;font-size:14px;
  margin-top:12px;cursor:pointer;box-shadow:0 10px 24px rgba(239,16,25,.18);
  transition:transform .12s ease,opacity .12s ease;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.secondary{background:#171717;border:1px solid #303030;box-shadow:none;color:#f0f0f0}
.btn.ghost{background:transparent;border:1px solid #2e2e2e;box-shadow:none;color:#ddd}
.btn.danger{background:linear-gradient(135deg,#8f0d14,#6a0a10);box-shadow:none}
.btn.small{width:auto;min-height:42px;padding:10px 14px;font-size:12px;border-radius:12px;margin:0}
.btn.tiny{width:auto;min-height:36px;padding:8px 11px;font-size:11px;border-radius:10px;margin:0}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn-row .btn{flex:1;margin-top:0;min-width:130px}
.link{background:none;border:0;color:#ff646c;text-decoration:underline;font-weight:700;cursor:pointer;padding:8px 2px;font-size:13px}

.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:44px}
.toggle{position:relative;width:52px;height:31px;flex:0 0 auto;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#2b2b2b;border:1px solid #3b3b3b;border-radius:999px;transition:.18s;cursor:pointer}
.slider:before{content:'';position:absolute;width:23px;height:23px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s}
.toggle input:checked+.slider{background:var(--red);border-color:var(--red)}
.toggle input:checked+.slider:before{transform:translateX(21px)}
.toggle input:focus-visible+.slider{box-shadow:0 0 0 3px var(--red-soft)}

/* ------------------------------------------------------------- notices -- */
.notice{
  border:1px solid #333;background:#101010;border-radius:var(--radius-sm);
  padding:12px 14px;margin:12px 0;font-size:13px;line-height:1.5;color:#dcdcdc;
}
.notice.error{border-color:#572126;background:#170b0c;color:#ffb4b9}
.notice.success{border-color:#16442f;background:#0a1611;color:#9de8c1}
.notice.warning{border-color:#51421b;background:#161206;color:#ffd67a}
.notice.info{border-color:#1e3a4d;background:#0a1116;color:#9ed8f5}
.notice b{color:#fff}

.empty{
  padding:34px 16px;text-align:center;color:var(--muted);
  border:1px dashed #262626;border-radius:var(--radius);margin:12px 0;
}
.empty .icon{font-size:28px;display:block;margin-bottom:10px;opacity:.55}
.empty h3{color:#e9e9e9;margin-bottom:6px}
.empty p{font-size:13px;margin:0 auto;max-width:290px}
.empty .btn{max-width:260px;margin:14px auto 0}

/* ------------------------------------------------------------ skeleton -- */
.skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#141414 25%,#1d1d1d 37%,#141414 63%);background-size:400% 100%;animation:shimmer 1.3s ease infinite}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.sk-card{height:104px;margin:12px 0}
.sk-line{height:12px;margin:8px 0;border-radius:8px}
.sk-row{display:flex;gap:12px;align-items:center;margin:12px 0}
.sk-avatar{width:58px;height:58px;border-radius:var(--avatar-r);flex:0 0 auto}

/* ------------------------------------------------------------- avatars --
   BALENZ profile images are ROUNDED SQUARES. The radius scales with the box so
   a 28px avatar and a 104px avatar read as the same shape rather than the small
   one looking like a circle. The image itself is cropped by object-fit with an
   object-position the member chose, which is what keeps the same framing at
   every size instead of the browser re-centring per box. */
.avatar{
  width:58px;height:58px;border-radius:var(--avatar-r);flex:0 0 auto;
  background:linear-gradient(140deg,#2b2b2b,#111);border:1px solid #343434;
  display:grid;place-items:center;font-weight:900;font-size:19px;color:#e6e6e6;overflow:hidden;
  position:relative;
}
.avatar.xs{width:28px;height:28px;font-size:10px;border-radius:9px}
.avatar.sm{width:42px;height:42px;font-size:14px;border-radius:12px}
.avatar.lg{width:88px;height:88px;font-size:28px;border-radius:24px}
.avatar.xl{width:104px;height:104px;font-size:32px;border-radius:28px}
.avatar img{
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  border-radius:inherit;display:block;transform-origin:center;
}
.avatar.ring{box-shadow:0 0 0 2px #0a0a0a,0 0 0 4px var(--red)}

/* -------------------------------------------------------------- badges -- */
.pill{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;
  padding:6px 10px;font-size:10.5px;font-weight:900;letter-spacing:.06em;
  background:#1e1e1e;border:1px solid #2d2d2d;color:#d6d6d6;text-transform:uppercase;
}
.pill.pending{color:#ffd67a;border-color:#4a3c17}
.pill.verified{color:#8fe6b6;border-color:#1c4a34}
.pill.rejected{color:#ffaaa5;border-color:#54222a}
.pill.role{color:#ff5b64;border-color:#4e1c20;background:#1a0c0d}
.pill.dating{color:var(--dating);border-color:#4d1a2c;background:#190d12}
.pill.trainer{color:var(--trainer);border-color:#1a4457;background:#0b1418}
.pill.ban{color:#ff9b96;border-color:#5a1e22;background:#190b0c}

/* DAY ONES — premium founding-member badge (wording is always "DAY ONES") */
.badge-dayones{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:6px 11px;font-size:10.5px;font-weight:900;letter-spacing:.14em;
  color:#1a1206;background:linear-gradient(120deg,var(--gold-1),var(--gold-2) 62%,#f3dd9e);
  border:1px solid #8d7018;box-shadow:0 4px 14px rgba(201,162,39,.22);text-transform:uppercase;
}
.badge-dayones .mark{font-size:11px}
.badge-dayones.lg{padding:8px 14px;font-size:12px;letter-spacing:.16em}
.badge-dayones.sm{padding:3px 7px;font-size:8.5px;letter-spacing:.1em}
.dayones-panel{
  border-color:#5d4a12;
  background:linear-gradient(158deg,#191408 0%,#0d0d0d 74%);
}

.verify-marks{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-top:6px;min-height:24px}
.verify-mark{color:var(--red);font-size:20px;font-weight:900;line-height:1}
.founder-badge{display:inline-flex;align-items:center;gap:6px;color:#ff4751;font-size:11px;font-weight:900;letter-spacing:.09em}

/* ---------------------------------------------------------------- tabs -- */
.tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.chip{
  white-space:nowrap;border:1px solid #2e2e2e;background:#111;color:#a9a9a9;
  border-radius:999px;padding:10px 13px;font-size:11.5px;font-weight:800;
  min-height:40px;cursor:pointer;letter-spacing:.03em;
}
.chip.active{background:#fff;color:#070707;border-color:#fff}
.chip.red.active{background:var(--red);color:#fff;border-color:var(--red)}
.segmented{display:flex;background:#101010;border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px;margin:12px 0}
.segmented button{
  flex:1;min-height:42px;border:0;border-radius:11px;background:transparent;
  color:#9d9d9d;font-size:12px;font-weight:800;cursor:pointer;letter-spacing:.04em;
}
.segmented button.active{background:#fff;color:#080808}

/* ---------------------------------------------------------------- grid -- */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:#111;border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.stat b{display:block;font-size:25px;font-weight:900;line-height:1.15;margin-top:2px}
.stat .label{font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action{
  display:block;text-align:left;min-height:104px;border-radius:18px;padding:14px;
  background:linear-gradient(158deg,#181818,#0e0e0e);border:1px solid var(--line);
  color:#fff;font-weight:800;font-size:14px;cursor:pointer;
}
.action:active{transform:scale(.99)}
.action span{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:6px;line-height:1.4}
.action .glyph{display:block;font-size:19px;margin-bottom:8px}
.action.wide{grid-column:1/-1;min-height:0}
.action.dating{border-color:#4d1a2c;background:linear-gradient(158deg,#1b0e14,#0d0d0d)}
.action.founder{border-color:#4a1418;background:linear-gradient(158deg,#1b0d0f,#0d0d0d)}

/* --------------------------------------------------------- people rows -- */
.person{display:flex;gap:12px;align-items:flex-start}
.person .meta{flex:1;min-width:0}
.person .meta h3{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.meta-line{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45;overflow-wrap:anywhere}
.meta-line b{color:#cfcfcf}
.handle{font-size:12px;color:var(--muted-2);overflow-wrap:anywhere}

/* --------------------------------------------------------------- inbox -- */
.thread-row{display:flex;gap:12px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:#101010;margin:9px 0;cursor:pointer}
.thread-row:active{background:#161616}
.thread-row.unread{border-color:#4a1418;background:linear-gradient(158deg,#180c0d,#0e0e0e)}
.thread-row .body{flex:1;min-width:0}
.thread-row .preview{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.thread-row .when{font-size:10.5px;color:var(--muted-2);white-space:nowrap}
.thread-row .unread-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:0 0 auto}

.chat-wrap{display:flex;flex-direction:column;min-height:calc(100dvh - 150px)}
.chat-thread{flex:1;display:flex;flex-direction:column;gap:8px;padding:6px 0 14px}
.bubble{max-width:82%;padding:11px 13px;border-radius:16px;background:#191919;font-size:14px;line-height:1.45;overflow-wrap:anywhere;border:1px solid #232323}
.bubble.mine{margin-left:auto;background:linear-gradient(140deg,#5a1218,#3d0c11);border-color:#66161d}
.bubble .when{display:block;font-size:10px;color:#a8a8a8;margin-top:5px;opacity:.8}
.bubble.official{background:linear-gradient(140deg,#1c0d0f,#121212);border-color:#4a1418}
.composer{
  position:sticky;bottom:calc(var(--nav-h) + var(--safe-bottom));
  display:flex;gap:8px;align-items:flex-end;padding:10px 0 4px;
  background:linear-gradient(transparent,#070707 22%);
}
.composer textarea{flex:1;margin:0;min-height:50px;max-height:130px}
.composer .btn{width:auto;min-width:64px;margin:0}

/* ----------------------------------------------------------- community -- */
.post{border:1px solid var(--line);background:#101010;border-radius:18px;padding:14px;margin:10px 0}
.post .post-head{display:flex;gap:10px;align-items:center;margin-bottom:9px}
.post .post-body{white-space:pre-wrap;overflow-wrap:anywhere;color:#e8e8e8;font-size:14px;line-height:1.55;margin:0}
.post.founder-post{border-color:#4a1418;background:linear-gradient(158deg,#1a0c0e,#0e0e0e)}
.post .official{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--red)}

.gym-row{
  display:flex;gap:12px;align-items:center;background:#111;border:1px solid var(--line);
  border-radius:17px;padding:14px;margin:9px 0;cursor:pointer;transition:.15s ease;
}
.gym-row:active{transform:scale(.99)}
.gym-row.selected{border-color:var(--red);box-shadow:0 0 0 1px var(--red-soft)}
.gym-row .category{font-size:9.5px;text-transform:uppercase;letter-spacing:.14em;color:#ff5c64;font-weight:900}
.gym-row .address{font-size:11.5px;color:var(--muted);margin-top:3px}
.check{width:28px;height:28px;border-radius:50%;border:1px solid #444;display:grid;place-items:center;font-weight:900;flex:0 0 auto;font-size:13px}
.gym-row.selected .check{background:var(--red);border-color:var(--red);color:#fff}
.search-wrap{position:sticky;top:0;z-index:8;background:linear-gradient(#0a0a0a 74%,transparent);padding:2px 0 10px}

/* -------------------------------------------------------------- dating -- */
.dating-mark{display:inline-flex;align-items:center;gap:7px;color:var(--dating);font-size:11px;font-weight:900;letter-spacing:.12em}

/* What opens on January 1, 2027, named without a single real member being
   rendered: the three ways to say hello, who picked you, dating messages. */
.dating-parts{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.dating-part{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-top:1px solid #1f1f1f}
.dating-part:first-child{border-top:0;padding-top:2px}
.dating-part-glyph{
  flex:none;width:30px;height:30px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;
  background:#190d12;border:1px solid #4d1a2c;color:var(--dating);
}
.dating-part-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dating-part-body b{font-size:13.5px;font-weight:800;color:#fff;overflow-wrap:anywhere}

/* The published price. Not a checkout — nothing on this screen takes money
   and nothing is charged before launch. */
.dating-price-row{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 10px}
.dating-price{
  flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:3px;
  padding:13px 13px 12px;border-radius:var(--radius-sm);
  border:1px solid #4d1a2c;background:#150c10;
}
.dating-price b{font-size:24px;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.dating-price-tag{
  display:inline-block;align-self:flex-start;max-width:100%;margin-bottom:3px;
  padding:4px 9px;border-radius:999px;background:var(--dating);color:#1a0a10;
  font-size:8.5px;font-weight:900;letter-spacing:.09em;overflow-wrap:anywhere;
}
.dating-price-tag.ghost{background:none;border:1px solid #4d1a2c;color:var(--dating)}
.dating-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;border:1px solid #2c2c2c;background:#111;display:block}
.dating-photo-wrap{position:relative}
.dating-photo-wrap .overlay{
  position:absolute;left:0;right:0;bottom:0;padding:16px 15px 14px;
  background:linear-gradient(transparent,rgba(5,5,5,.92));border-radius:0 0 18px 18px;
}
.dating-photo-wrap .overlay h2{margin:0;font-size:23px;color:#fff}
.intent-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px}
.intent{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;min-height:58px;
  border-radius:16px;padding:12px 14px;border:1px solid #333;background:#121212;color:#fff;
  font-weight:800;font-size:13.5px;cursor:pointer;
}
.intent:active{transform:scale(.99)}
.intent .glyph{font-size:19px;width:26px;text-align:center}
.intent .sub{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:3px}
.intent.train{border-color:#1d4a58}
.intent.train .glyph{color:var(--trainer)}
.intent.coffee{border-color:#4d3a1c}
.intent.coffee .glyph{color:#e0b160}
.intent.date{border-color:#4d1a2c}
.intent.date .glyph{color:var(--dating)}
.intent:disabled{opacity:.45;cursor:not-allowed}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.photo-grid figure{margin:0;position:relative}
.photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid #303030;display:block}
.photo-grid .remove{
  position:absolute;top:5px;right:5px;width:28px;height:28px;border-radius:50%;
  border:0;background:rgba(8,8,8,.82);color:#fff;font-size:14px;cursor:pointer;
}

/* --------------------------------------------------------------- lists -- */
.list-item{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #1c1c1c}
.list-item:last-child{border-bottom:0}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:54px;padding:14px;border:0;border-bottom:1px solid #1c1c1c;background:none;
  color:#efefef;font-size:14px;font-weight:700;text-align:left;cursor:pointer;
}
.setting-row:last-child{border-bottom:0}
.setting-row:active{background:#141414}
.setting-row .chev{color:#5a5a5a;font-size:16px}
.setting-group{background:#101010;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:12px 0}
.day-row{border-top:1px solid #202020;padding:12px 0}
.day-row:first-child{border-top:0}
.day-row b{color:#fff;display:block;margin-bottom:4px;font-size:13px}

/* ------------------------------------------------------------ bottom nav */
.nav{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:min(var(--shell),100%);height:calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);background:rgba(7,7,7,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid #202020;display:none;align-items:stretch;z-index:40;
}
.nav.show{display:flex}
.nav button{
  flex:1;min-width:0;border:0;background:none;color:#6f6f6f;
  font-size:8.5px;font-weight:800;letter-spacing:.03em;
  padding:9px 1px 8px;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  transition:color .15s ease;
}
.nav button.active{color:#fff}

/* BALENZ RED marks where you are. Six destinations share the width of a
   phone, so the mark is the glyph itself plus a short bar above it rather
   than a filled pill — at this size a pill crowds its neighbours. */
.nav button.active .sym{color:var(--red)}
.nav button::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:0;height:2px;border-radius:0 0 3px 3px;background:var(--red);
  transition:width .18s ease;
}
.nav button.active::before{width:22px}
.nav .sym{font-size:18px;line-height:1}
.nav .badge{
  position:absolute;top:5px;right:calc(50% - 18px);min-width:15px;height:15px;
  padding:0 3px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--red);border:2px solid #070707;
  color:#fff;font-size:9px;font-weight:900;line-height:1;
}
/* The narrow-phone steps for this bar live together under
   "six-tab bottom nav" further down the file. */

/* --------------------------------------------------------- sheet/modal -- */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:60;
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(3px);animation:fade .18s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{
  width:min(var(--shell),100%);max-height:86dvh;overflow-y:auto;
  background:#111;border:1px solid #262626;border-bottom:0;
  border-radius:24px 24px 0 0;padding:8px 18px calc(22px + var(--safe-bottom));
  animation:sheet-up .24s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes sheet-up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet .grabber{width:38px;height:4px;border-radius:999px;background:#333;margin:6px auto 14px}
.sheet h2{margin-top:4px}

.toast-host{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + 16px + var(--safe-bottom));z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toast{
  max-width:min(var(--shell),100%);width:100%;pointer-events:auto;
  border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700;line-height:1.45;
  background:#1b1b1b;border:1px solid #333;color:#f0f0f0;box-shadow:0 12px 30px rgba(0,0,0,.42);
  animation:toast-in .2s ease both;
}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast.success{border-color:#1c4a34;color:#a6ecc7}
.toast.error{border-color:#5a2229;color:#ffb4b9}
.toast.info{border-color:#2a3f4d;color:#bfe3f7}

/* --------------------------------------------------------------- misc --- */
.brand-logo{width:min(320px,86%);height:auto;display:block;margin:14px auto 10px;filter:drop-shadow(0 10px 26px rgba(239,16,25,.14))}
.app-icon{width:82px;height:82px;border-radius:22px;display:block;margin:22px auto 16px;box-shadow:0 0 30px rgba(239,16,25,.14)}
.splash{padding-top:calc(30px + var(--safe-top));flex-direction:column;min-height:100dvh}
.splash .fill{flex:1;min-height:22px}
.splash-copy{max-width:360px;margin:0 auto}
.footer-note{font-size:10px;color:#5c5c5c;text-align:center;margin-top:16px;letter-spacing:.06em}
.qr{width:230px;max-width:74vw;border-radius:18px;background:#fff;padding:12px;display:block;margin:16px auto}
.qr-frame{border:1px solid var(--line);border-radius:24px;padding:12px;background:linear-gradient(158deg,#151515,#0c0c0c);margin:14px 0}
.progress-dots{display:flex;gap:6px;justify-content:center;margin:14px 0}
.progress-dots i{width:7px;height:7px;border-radius:50%;background:#2e2e2e;display:block}
.progress-dots i.on{background:var(--red);width:20px;border-radius:999px}
.spinner{
  display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.center-spinner{display:flex;justify-content:center;padding:36px 0}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.legal-copy{font-size:13px;color:#b6b6b6;line-height:1.7}
.legal-copy h3{color:#fff;margin-top:16px}
.admin-detail-photo{width:100%;max-height:300px;object-fit:cover;border-radius:16px;margin-bottom:12px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid #1d1d1d;font-size:12.5px}
.kv:first-child{border-top:0}
.kv .k{color:var(--muted);font-weight:600}
.kv .v{color:#fff;font-weight:700;text-align:right;overflow-wrap:anywhere}
.kv-list{margin-top:10px}

/* onboarding steps */
.onboard-step{animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* tappable list rows (member directory, community lists, founder lists) */
.row-btn{
  display:flex;align-items:center;gap:12px;width:100%;min-height:60px;
  padding:12px 13px;margin-bottom:8px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:15px;
  color:var(--text);font-family:inherit;cursor:pointer;
  transition:border-color .14s ease,transform .14s ease
}
.row-btn:active{transform:scale(.995);border-color:var(--line-strong)}
.row-btn .grow{display:block;flex:1;min-width:0}
.row-btn b{display:block;font-size:14.5px;font-weight:800;overflow-wrap:anywhere}
.row-btn .handle{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.row-btn .chev{color:var(--muted);font-size:19px;flex:none}
.pill-row{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}

/* moderated content */
.post.removed{opacity:.55}
.post.removed p{text-decoration:line-through;color:var(--muted)}

.subtle-link{background:none;border:0;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer;padding:6px}

/* ---------------------------------------------- the on-screen keyboard --
   Both composers are sticky, and sticky is positioned against the LAYOUT
   viewport, which does not shrink when the keyboard opens. So while the
   keyboard is up the tab bar is hidden — nothing to clear — and the composer
   is lifted by --keyboard instead of by the height of a nav that is no longer
   on screen. Without this the composer sat behind the keyboard, or floated
   above it by the height of the missing tab bar. */
body.keyboard-open .nav{display:none}
body.keyboard-open .composer,
body.keyboard-open .comment-composer{
  bottom:calc(var(--keyboard) + 6px);
  padding-bottom:10px;
}

.ban-active{border-color:#6a1c22;background:#1a090b}
.count-big{font-size:26px;font-weight:900;line-height:1.1}

@media (max-width:340px){
  h1{font-size:27px}
  .action{min-height:96px}
  .stat b{font-size:22px}
}
@media (min-width:560px){
  .app{border-left:1px solid #151515;border-right:1px solid #151515}
}

/* ==========================================================================
   THE SIX DESTINATIONS
   HOME · PROFILE · MY GYM · INBOX · DATING · STORE

   HOME is the feed, and the rest of BALENZ is reached from the tab bar or
   from the destination it belongs to. The compact `hs-` content vocabulary
   further down — a stat, a card, a person row — is what MY GYM and the gym
   portals use to put real content on screen, along with `.panel-row`, the
   list row those screens share.

   Nothing in the app scrolls sideways now except the Stories strip and the
   segmented controls, and js/core.js deliberately refuses to read a swipe
   that starts inside either of them.
   ========================================================================== */
.home-screen{padding-bottom:calc(var(--nav-h) + 18px + var(--safe-bottom))}
/* A destination is one vertical column of real content. The gap is the only
   vertical rhythm on the page, which is what keeps spacing consistent across
   HOME, PROFILE and MY GYM without wrapping everything in a card. */
.page-stack{display:flex;flex-direction:column;gap:20px;margin-top:2px}
.page-stack > *{margin-top:0;margin-bottom:0}

/* One heading per block of content, with room for an action beside it. */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0}
.section-head h2{
  margin:0;font-size:12px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}
.section-head .link{
  border:0;background:none;padding:0;cursor:pointer;
  font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--red);text-transform:uppercase;
}

/* Buttons that belong together sit on one row and wrap, instead of stacking
   into a tower of full-width blocks. Equal heights and one gap value is most
   of what stopped these screens looking unfinished. */
.action-row{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.action-row:empty{display:none}
.action-row .btn{flex:1 1 auto;width:auto;min-width:142px;margin:0}

.panel-row{
  display:flex;align-items:center;gap:10px;min-width:0;
  border:1px solid #232323;border-radius:14px;padding:10px 12px;background:#0e0e0e;
}
.panel-row b{font-size:13px;font-weight:800;color:#fff;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-row .sub{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-top:2px}
.panel-row .grow{flex:1;min-width:0}
/* An information-only row: nothing to open yet, so it must not read as tappable. */
.panel-row.static{background:#0b0b0b;border-style:dashed;cursor:default}
/* Cart / wallet counts ride on their own icon button rather than the tab bar,
   so the badge needs a positioning context of its own up in the topbar. */
.icon-btn.badged{position:relative;overflow:visible}
.icon-btn.badged .badge{
  position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:9px;
  background:var(--red);color:#fff;font-size:10px;font-weight:800;line-height:1;
  border:2px solid #0a0a0a;
}

/* A content row is often a <button> because it opens something. Reset the UA
   button styling on exactly those rows — never on a real .btn, which keeps its
   own centred, full-width treatment inside an empty state. */
.hs-stat,.hs-card,.hs-person,button.panel-row{
  font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.hs-card:active,.hs-person:active,.hs-stat:active,button.panel-row:active{opacity:.7}
.hs-person .chev,.hs-card .chev,button.panel-row .chev{flex:none;color:var(--muted-2);font-size:17px}

/* ----------------------------------------------------- preview blocks ---
   The compact `hs-` (home surface) vocabulary every page uses to put its real
   content on screen: a stat grid, a labelled line, a card, a person row. */
.hs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.hs-grid.three{grid-template-columns:repeat(3,1fr)}
.hs-stat{
  display:block;width:100%;min-width:0;
  border:1px solid #232323;border-radius:14px;padding:10px 11px;background:#0e0e0e;
}
.hs-stat b{display:block;font-size:21px;font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.hs-stat span{
  display:block;margin-top:4px;font-size:9px;font-weight:900;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;overflow-wrap:anywhere;
}
.hs-line{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  border-left:2px solid var(--red);padding:2px 0 2px 10px;margin:10px 0;
}
.hs-key{font-size:9px;font-weight:900;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.hs-val{font-size:12.5px;font-weight:600;color:#cfcfcf;line-height:1.5;overflow-wrap:anywhere}
.hs-eyebrow{
  font-size:9px;font-weight:900;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;margin:14px 0 6px;
}
.hs-note{
  font-size:11.5px;line-height:1.55;color:var(--muted);margin:8px 0 0;overflow-wrap:anywhere;
  border:1px dashed #262626;border-radius:12px;padding:9px 11px;
}
.hs-note.plain{border:0;padding:0}
.hs-note.dayones{color:var(--gold-1);border-color:#4a3c17;font-weight:700}
.hs-card{
  display:block;width:100%;min-width:0;
  border:1px solid #232323;border-radius:14px;padding:11px 12px;margin:8px 0;background:#0e0e0e;
}
.hs-card b{display:block;font-size:13.5px;font-weight:800;color:#fff;line-height:1.3;overflow-wrap:anywhere}
.hs-tag{
  display:inline-block;font-size:8.5px;font-weight:900;letter-spacing:.12em;
  color:var(--red);text-transform:uppercase;margin-bottom:5px;
}
.hs-body{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:#a8a8a8;overflow-wrap:anywhere}
.hs-when{display:block;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted-2)}
.hs-code{
  display:flex;align-items:baseline;gap:8px;margin-top:8px;
  border-top:1px solid #1f1f1f;padding-top:8px;
}
.hs-code span{font-size:8.5px;font-weight:900;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.hs-code b{font-size:15px;font-weight:900;letter-spacing:.18em;color:var(--gold-1)}
.hs-hero{display:flex;align-items:center;gap:12px;min-width:0;margin:2px 0 4px}
.hs-hero-logo{
  flex:0 0 auto;width:54px;height:54px;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;background:#161616;border:1px solid #262626;
  font-size:17px;font-weight:900;color:#fff;
}
.hs-hero-logo img{width:100%;height:100%;object-fit:cover}
.hs-hero-txt{min-width:0;flex:1}
.hs-hero-txt b{display:block;font-size:17px;font-weight:900;color:#fff;line-height:1.2;overflow-wrap:anywhere}
.hs-hero-txt > span{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.hs-person{
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;
  border:1px solid #232323;border-radius:14px;padding:9px 11px;margin:6px 0;background:#0e0e0e;
}
.hs-person-txt{min-width:0;flex:1}
.hs-person-txt b{display:block;font-size:13px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-meals{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.hs-meal{border-left:2px solid #2a2a2a;padding-left:9px;min-width:0}
.hs-meal b{display:block;font-size:11px;font-weight:900;letter-spacing:.05em;color:#e4e4e4}
.hs-meal span{display:block;font-size:11px;line-height:1.5;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}

/* ----------------------------------------------------- STORIES grid ----
   Up to twelve Story previews as a GRID, deliberately not a nested horizontal
   strip: a sideways scroller here would compete with the home swipe. */
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 0}
.story-tile{
  display:block;min-width:0;padding:0;border:0;background:none;text-align:left;
}
.story-tile .tile-art{
  display:block;position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:14px;border:1px solid #242424;background:#111;
}
.story-tile.unseen .tile-art{border-color:var(--red);box-shadow:0 0 0 1px rgba(239,16,25,.35)}
.story-tile.official .tile-art{border-color:var(--gold-2)}
.story-tile .tile-art img{width:100%;height:100%;object-fit:cover;display:block}
.story-tile .tile-load{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#141414 25%,#1d1d1d 37%,#141414 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease infinite;
}
.story-tile .tile-text{
  position:absolute;inset:0;display:flex;align-items:center;padding:9px;
  font-size:10.5px;font-weight:800;line-height:1.35;color:#fff;overflow:hidden;overflow-wrap:anywhere;
}
.story-tile .tile-bg-red{background:linear-gradient(160deg,#ef1019,#7c0409)}
.story-tile .tile-bg-black{background:linear-gradient(160deg,#232323,#050505)}
.story-tile .tile-bg-white{background:linear-gradient(160deg,#f4f4f4,#cfcfcf);color:#0a0a0a}
.story-tile .tile-who{
  display:block;margin-top:5px;font-size:9.5px;font-weight:900;letter-spacing:.04em;color:#e4e4e4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.story-tile .tile-when{display:block;font-size:9px;font-weight:700;color:var(--muted-2)}
.sk-tile{aspect-ratio:3/4;border-radius:14px;margin:0}

/* ------------------------------------------------------- promo rows ----
   CHALLENGES and GYM OFFERS are the last two pages and may one day carry
   promoted or sponsored content. This wrapper is the ONLY preparation for
   that: a row that could be marked, and a label style for the mark. There is
   no advertising, sponsorship, billing or payment code anywhere in BALENZ,
   and the attribute below is not set by anything today. */
.promo-row{position:relative;min-width:0}
.promo-row[data-promoted="true"]::after{
  content:'PROMOTED';position:absolute;top:9px;right:10px;
  font-size:8px;font-weight:900;letter-spacing:.12em;color:var(--muted);
  border:1px solid #2c2c2c;border-radius:999px;padding:2px 6px;background:#0a0a0a;
}

/* ==========================================================================
   STORIES
   ========================================================================== */
.ring-rail{
  display:flex;flex-direction:row;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;
  margin:10px -18px 2px;padding:4px 18px 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.ring-rail::-webkit-scrollbar{display:none}
.ring{
  flex:0 0 auto;width:66px;background:none;border:0;padding:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ring .disc{
  /* Circular, not squircle — BALENZ Stories read as a standard mobile ring. */
  width:62px;height:62px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:#151515;border:1px solid #2c2c2c;overflow:hidden;color:#e6e6e6;font-weight:900;font-size:17px;
}
.ring .disc img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ring.unseen .disc{box-shadow:0 0 0 2px #050505,0 0 0 4px var(--red)}
.ring.seen .disc{box-shadow:0 0 0 2px #050505,0 0 0 4px #303030}
.ring.official .disc{box-shadow:0 0 0 2px #050505,0 0 0 4px var(--gold-2)}
.ring .who{
  font-size:10px;font-weight:800;color:#c3c3c3;max-width:66px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em;
  display:block;line-height:1.2;text-align:center;
}
.ring.add .disc{border:1px dashed #444;background:#0d0d0d;font-size:24px;color:var(--red)}
.sk-ring{flex:0 0 auto;width:62px;height:62px;border-radius:50%}

.story-card{
  display:flex;gap:12px;align-items:center;min-width:0;
  border:1px solid var(--line);border-radius:18px;padding:12px;margin:10px 0;background:#0e0e0e;
}
.story-card .thumb{
  width:56px;height:74px;border-radius:12px;flex:none;overflow:hidden;background:#181818;
  display:grid;place-items:center;font-size:19px;
}
.story-card .thumb img{width:100%;height:100%;object-fit:cover}
.story-card .grow{flex:1;min-width:0}
.story-card b{display:block;font-size:14px;font-weight:800;color:#fff;overflow-wrap:anywhere}
.story-card .line{font-size:12px;color:#a8a8a8;margin-top:3px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-card.official{border-color:#4a3c17;background:linear-gradient(150deg,#191308,#0b0b0b 70%)}

/* Full-screen viewer */
.viewer{
  position:fixed;inset:0;z-index:120;background:#000;
  display:flex;flex-direction:column;
  padding:calc(10px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
}
.viewer.hidden{display:none}
.viewer-bars{display:flex;gap:4px;height:3px;flex:none}
.viewer-bars i{flex:1;background:#3a3a3a;border-radius:999px;overflow:hidden;display:block}
.viewer-bars i b{display:block;height:100%;width:0;background:#fff;border-radius:999px}
.viewer-bars i.done b{width:100%}
.viewer-bars i.live b{width:100%;transition:width 5s linear}
.viewer-top{display:flex;align-items:center;gap:10px;padding:12px 2px;flex:none;z-index:2}
.viewer-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.viewer-who .avatar{width:38px;height:38px;font-size:13px}
.viewer-who .txt{min-width:0}
.viewer-who b{display:block;font-size:13.5px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer-who .sub{font-size:10.5px;color:#9a9a9a;font-weight:700;letter-spacing:.04em;margin-top:2px}
.viewer-x{
  background:rgba(255,255,255,.08);border:0;color:#fff;width:38px;height:38px;border-radius:50%;
  font-size:16px;cursor:pointer;flex:none;
}
.viewer-stage{
  flex:1;min-height:0;border-radius:20px;overflow:hidden;position:relative;
  display:grid;place-items:center;background:#0b0b0b;
}
.viewer-stage img{width:100%;height:100%;object-fit:contain;display:block}
.viewer-text{
  padding:30px 24px;text-align:center;font-size:24px;font-weight:900;line-height:1.3;
  color:#fff;overflow-wrap:anywhere;max-height:100%;overflow-y:auto;
}
.viewer-stage.bg-red{background:linear-gradient(160deg,#ef1019,#6d060b 78%)}
.viewer-stage.bg-black{background:linear-gradient(160deg,#242424,#050505 74%)}
.viewer-stage.bg-white{background:linear-gradient(160deg,#f4f4f4,#c9c9c9 80%)}
.viewer-stage.bg-white .viewer-text{color:#070707}
.viewer-nav{
  position:absolute;top:0;bottom:0;width:32%;background:transparent;border:0;cursor:pointer;z-index:1;
}
.viewer-nav.prev{left:0}
.viewer-nav.next{right:0}
.viewer-foot{flex:none;padding-top:10px;z-index:2}
.viewer-foot .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.viewer-caption{
  font-size:13px;color:#e4e4e4;margin:0 0 10px;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.react-btn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  border-radius:999px;padding:9px 13px;font-size:12px;font-weight:800;cursor:pointer;
}
.react-btn.on{background:var(--red);border-color:var(--red)}
.react-btn.danger{color:#ffb4b9;border-color:#5a2229}
/* SHARE sits in the same row as the reactions but is not one of them: it hands
   the Story to the device's own share sheet. A brighter border separates it
   without adding a second row the member has to look for. */
.react-btn.share-out{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.42);white-space:nowrap}
.story-tag{
  display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;
  font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#dcdcdc;
}
.story-tag.local{color:#bfe3f7;border-color:#2a3f4d}
.story-tag.gym{color:#8fe6b6;border-color:#1c4a34}
.story-tag.official{color:var(--gold-1);border-color:#8d7018;background:rgba(201,162,39,.14)}
.hidden-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px}

/* Audience picker */
.aud-option{
  display:flex;gap:11px;align-items:flex-start;text-align:left;width:100%;
  border:1px solid #2a2a2a;background:#0e0e0e;border-radius:16px;padding:13px;margin:8px 0;
  cursor:pointer;color:inherit;font:inherit;
}
.aud-option.on{border-color:var(--red);background:#16090a}
.aud-option.locked{opacity:.5}
.aud-option .box{
  width:20px;height:20px;border-radius:6px;border:1px solid #3a3a3a;flex:none;margin-top:2px;
  display:grid;place-items:center;font-size:12px;color:#fff;
}
.aud-option.on .box{background:var(--red);border-color:var(--red)}
.aud-option b{display:block;font-size:13.5px;font-weight:800;color:#fff}
.aud-option .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.bg-picker{display:flex;gap:8px;margin:10px 0}
.bg-swatch{width:38px;height:38px;border-radius:12px;border:2px solid transparent;cursor:pointer}
.bg-swatch.on{border-color:#fff}
.bg-swatch.red{background:linear-gradient(160deg,#ef1019,#6d060b)}
.bg-swatch.black{background:linear-gradient(160deg,#242424,#050505)}
.bg-swatch.white{background:linear-gradient(160deg,#f4f4f4,#c9c9c9)}

/* ==========================================================================
   GYM PORTALS · CHALLENGES · OFFERS
   Official gym content is deliberately unmistakable next to member content.
   ========================================================================== */
.portal-hero{
  border:1px solid var(--line);border-radius:24px;padding:18px;margin:12px 0;
  background:linear-gradient(165deg,#171717,#0a0a0a 70%);
}
.portal-hero.verified-gym{border-color:#4a3c17;background:linear-gradient(165deg,#1a1408,#0a0a0a 68%)}
.portal-hero h1{font-size:26px;margin:8px 0 6px;overflow-wrap:anywhere}
.portal-hero .where{font-size:12.5px;color:#a9a9a9;font-weight:600;overflow-wrap:anywhere}
.portal-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.portal-counts div{border:1px solid #232323;border-radius:14px;padding:10px 8px;text-align:center;background:#0d0d0d}
.portal-counts b{display:block;font-size:19px;font-weight:900;color:#fff}
.portal-counts span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-top:3px;text-transform:uppercase}
.official-card{
  border:1px solid #4a3c17;border-radius:18px;padding:14px;margin:10px 0;
  background:linear-gradient(158deg,#191308 0%,#0b0b0b 72%);
}
.official-card .tag{
  display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:900;letter-spacing:.12em;
  color:var(--gold-1);text-transform:uppercase;
}
.official-card h3{margin:7px 0 5px;font-size:16px;overflow-wrap:anywhere}
.official-card p{font-size:13px;color:#b7b7b7;margin:0;overflow-wrap:anywhere}
.official-card .when{font-size:11px;color:var(--muted);font-weight:700;margin-top:8px;display:block}
.claim-code{
  display:inline-block;margin-top:10px;border:1px dashed #8d7018;border-radius:12px;padding:9px 13px;
  font-size:15px;font-weight:900;letter-spacing:.18em;color:var(--gold-1);background:#120e05;
}
.challenge-card{border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0;background:#0e0e0e}
.challenge-card.joined{border-color:#1c4a34}
.challenge-card.done{opacity:.6}
.challenge-card h3{margin:6px 0 5px;font-size:16px;overflow-wrap:anywhere}
.challenge-card .goal{font-size:12px;color:#cfcfcf;font-weight:700;margin-top:6px}
.gate-note{
  border:1px dashed #2f2f2f;border-radius:16px;padding:14px;margin:12px 0;
  font-size:12.5px;color:#a5a5a5;line-height:1.6;
}

/* --------------------------------------------------------------------------
   Release additions: portal cards, official content states, claim codes and
   the small pills the new screens share.
   -------------------------------------------------------------------------- */
.pill.ok{color:#8fe6b6;border-color:#1c4a34}
.pill.live{color:#ffd9db;border-color:#54222a;background:#190b0c}
.pill.manage{color:var(--gold-1);border-color:#4a3c17;background:#120e05}
.pill.sm{font-size:8.5px;padding:3px 7px}

.segmented.scroll{
  display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;margin:14px -18px 0;padding:0 18px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.segmented.scroll::-webkit-scrollbar{display:none}
.segmented.scroll button{flex:0 0 auto;white-space:nowrap}

.portal-logo{
  width:56px;height:56px;border-radius:18px;display:grid;place-items:center;overflow:hidden;
  border:1px solid #262626;background:#131313;font-size:17px;font-weight:900;color:#fff;
}
.portal-logo img{width:100%;height:100%;object-fit:cover}
.portal-card{
  display:block;width:100%;text-align:left;background:#0e0e0e;border:1px solid var(--line);
  border-radius:18px;padding:14px;margin:10px 0;color:inherit;
}
.portal-card b{font-size:15px;overflow-wrap:anywhere}
.count-box{border:1px solid #232323;border-radius:14px;padding:10px 8px;text-align:center;background:#0d0d0d}

.official-card.pinned{border-color:#8d7018}
.official-card.offer{border-color:#4a3c17}
.official-card.expired{opacity:.55}
.official-card .kv{margin-top:8px}

.claim-code{
  display:flex;flex-direction:column;gap:3px;margin-top:12px;border:1px dashed #8d7018;
  border-radius:14px;padding:11px 13px;background:#120e05;
}
.claim-code span{font-size:9.5px;font-weight:900;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.claim-code b{font-size:20px;font-weight:900;letter-spacing:.2em;color:var(--gold-1)}
.claim-code.big b{font-size:26px}

.row-card{display:flex;align-items:center;gap:11px;text-align:left;width:100%;color:inherit}
.row-card .grow{min-width:0}
.dim-card{opacity:.6}
.btn-row.wrap{flex-wrap:wrap}
.lbl{
  display:block;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 5px;
}

/* ==========================================================================
   BALENZ PRE-LAUNCH — Stories 2.0, BALENZ REP, leaderboards, MVP, the Store,
   BALENZ Bucks, training statuses and the square crop editor.
   Mobile first throughout: nothing here relies on hover, every control clears
   a 44px tap target, and no row is allowed to push the layout sideways.
   ========================================================================== */

/* --------------------------------------------------------- viewer 2.0 --- */
.viewer-bars i.done b{width:100%}
.viewer.paused .viewer-top,
.viewer.paused .viewer-foot{opacity:.25;transition:opacity .15s}
.viewer-paused{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:11px;font-weight:900;letter-spacing:.22em;color:#fff;
  background:rgba(0,0,0,.55);border-radius:999px;padding:8px 16px;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:3;
}
.viewer.paused .viewer-paused{opacity:1}
.react-btn{min-height:40px}
.react-btn.static{
  display:inline-flex;align-items:center;gap:4px;padding:9px 13px;border-radius:999px;
  border:1px solid #2c2c2c;background:#121212;color:#cfcfcf;font-size:12.5px;font-weight:800;
}
.story-reply{
  width:100%;margin-top:10px;min-height:44px;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid #333;border-radius:999px;
  color:#dcdcdc;padding:12px 16px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
}
.pr-card{
  display:flex;flex-direction:column;gap:2px;margin-bottom:8px;padding:10px 14px;
  border:1px solid var(--gold-2);border-radius:14px;background:rgba(201,162,39,.12);
}
.pr-eyebrow{font-size:9.5px;font-weight:900;letter-spacing:.16em;color:var(--gold-1)}
.pr-card b{font-size:15px;font-weight:900;letter-spacing:.02em;color:#fff}
.pr-line{font-size:13px;font-weight:800;color:var(--gold-1)}
.story-card.seen{opacity:.62}
.story-card.seen .thumb{filter:grayscale(.4)}

/* --------------------------------------------------------- BALENZ REP --- */
.rep-hero{
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  background:linear-gradient(150deg,#1a0507,#0b0b0b 62%);text-align:center;margin:14px 0;
}
.rep-hero .figure{font-size:44px;font-weight:900;line-height:1;letter-spacing:-.02em;color:#fff}
.rep-hero .label{font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--muted);margin-top:8px}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.rep-stat{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:var(--panel);
  min-width:0;
}
.rep-stat b{display:block;font-size:24px;font-weight:900;color:#fff;line-height:1.1}
.rep-stat span{
  display:block;font-size:9.5px;font-weight:900;letter-spacing:.14em;color:var(--muted);margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;
}
.rep-note{
  font-size:12px;line-height:1.55;color:var(--muted);border-left:2px solid var(--red);
  padding-left:12px;margin:14px 0;
}

/* Leaderboard rows are deliberately NOT links. There is no data-act, no
   data-go and no cursor:pointer, because a rank is public but a member's
   profile is not something a leaderboard should hand out. */
.board{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:12px 0;background:var(--panel)}
.board-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px;background:#0d0d0d;border-bottom:1px solid var(--line);
}
.board-head h3{margin:0;font-size:13px;font-weight:900;letter-spacing:.08em;color:#fff;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-head .when{margin-left:auto;font-size:9.5px;font-weight:900;letter-spacing:.14em;color:var(--muted);flex:none}
.board-row{
  display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid #1c1c1c;min-width:0;
}
.board-row:first-child{border-top:0}
.board-row.me{background:rgba(239,16,25,.09)}
.board-rank{
  flex:0 0 auto;width:28px;font-size:14px;font-weight:900;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;
}
.board-row.top .board-rank{color:var(--gold-1)}
.board-name{min-width:0;flex:1}
.board-name b{display:block;font-size:13.5px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-name span{display:block;font-size:10.5px;color:var(--muted-2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-rep{flex:0 0 auto;font-size:14px;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums}
.board-empty{padding:20px 16px;text-align:center;font-size:12.5px;color:var(--muted)}

.mvp-card{
  border:1px solid var(--gold-2);border-radius:var(--radius);padding:16px;margin:12px 0;
  background:linear-gradient(150deg,rgba(201,162,39,.16),#0b0b0b 66%);
}
.mvp-card .crown{font-size:22px}
.mvp-card h3{margin:6px 0 2px;font-size:14px;font-weight:900;letter-spacing:.06em;color:var(--gold-1)}
.mvp-card b{font-size:17px;font-weight:900;color:#fff}
.mvp-card .sub{font-size:11.5px;color:var(--muted);margin-top:4px}

.achv-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:10px 0;
  background:linear-gradient(150deg,#1a0507,#0b0b0b 66%);display:flex;gap:12px;align-items:center;min-width:0;
}
.achv-card .grow{min-width:0}
.achv-card b{display:block;font-size:14.5px;font-weight:900;color:#fff;letter-spacing:.02em}
.achv-card .sub{font-size:11px;color:var(--muted);margin-top:3px}

/* -------------------------------------------- store / merchandise parts --
   Shared pieces used by the BALENZ merchandise store: release-state pills,
   sizes, quantities, cart rows and total lines. The retired merchandise
   storefront's own classes (.coll-card, .coll-art and its seasonal colour
   fields, .prod-card, .set-card and its "full set" savings badge) have been
   removed along with it. */
.drop-pill{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.1em;
  background:rgba(0,0,0,.62);border:1px solid #3a3a3a;color:#fff;backdrop-filter:blur(6px);
}
.drop-pill.live{border-color:var(--red);color:#fff;background:rgba(239,16,25,.85)}
.drop-pill.soon{border-color:#4a4a4a;color:#d6d6d6}
.drop-pill.ending{border-color:var(--warning);color:#ffd88a}
.drop-pill.ended{border-color:#333;color:#8a8a8a}
.countdown{font-variant-numeric:tabular-nums;letter-spacing:.04em}

.set-line{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;margin-top:7px;color:var(--muted)}
.set-line b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.set-line.total{border-top:1px solid #2b2b2b;margin-top:11px;padding-top:11px;font-size:15px}
.set-line.total b{color:var(--red);font-size:17px;font-weight:900}

.size-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.size-chip{
  min-width:48px;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid #333;
  background:#101010;color:#d8d8d8;font-size:12.5px;font-weight:800;cursor:pointer;font-family:inherit;
}
.size-chip.on{background:var(--red);border-color:var(--red);color:#fff}

.cart-row{
  display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #1d1d1d;min-width:0;
}
.cart-row .grow{min-width:0}
.cart-row b{display:block;font-size:13px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-row .sub{font-size:11px;color:var(--muted-2);margin-top:2px}
.qty{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.qty button{
  width:36px;height:36px;border-radius:10px;border:1px solid #333;background:#111;color:#fff;
  font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;
}
.qty span{min-width:26px;text-align:center;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------ BALENZ Bucks --- */
.wallet-hero{
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:14px 0;
  background:linear-gradient(150deg,#101010,#050505 70%);text-align:center;
}
.wallet-hero .bal{font-size:42px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em}
.wallet-hero .label{font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--muted);margin-top:8px}
.ledger-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #1c1c1c;min-width:0}
.ledger-row .grow{min-width:0}
.ledger-row b{display:block;font-size:13px;font-weight:800;color:#fff}
.ledger-row .sub{font-size:11px;color:var(--muted-2);margin-top:2px}
.ledger-amt{font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;flex:0 0 auto}
.ledger-amt.plus{color:var(--success)}
.ledger-amt.minus{color:var(--muted)}

/* ---------------------------------------------------- training status --- */
.status-chip{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  font-size:11.5px;font-weight:900;letter-spacing:.06em;border:1px solid #333;background:#101010;color:#ddd;
}
.status-chip.training{border-color:var(--red);color:#fff;background:rgba(239,16,25,.16)}
.status-chip.looking{border-color:var(--trainer);color:#cfeeff;background:rgba(84,198,255,.12)}
.status-row{
  display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #1c1c1c;min-width:0;
}
.status-row .grow{min-width:0}
.status-row b{display:block;font-size:13px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status-row .sub{font-size:11px;color:var(--muted-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis}

/* -------------------------------------------------------- crop editor --- */
.crop-stage{
  position:relative;width:100%;max-width:300px;aspect-ratio:1/1;margin:14px auto;
  border-radius:24px;overflow:hidden;background:#0a0a0a;border:1px solid #333;
  touch-action:none;cursor:grab;
}
.crop-stage img{
  position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none;pointer-events:none;
}
.crop-stage:active{cursor:grabbing}
.crop-guide{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);border-radius:inherit;
}
.crop-guide::before,.crop-guide::after{
  content:'';position:absolute;background:rgba(255,255,255,.14);
}
.crop-guide::before{left:33.33%;right:33.33%;top:0;bottom:0;border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);background:none}
.crop-guide::after{top:33.33%;bottom:33.33%;left:0;right:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);background:none}
.crop-zoom{width:100%;margin:8px 0 4px;accent-color:var(--red);height:44px}

.photo-slot{
  position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;
  border:1px dashed #3a3a3a;background:#0d0d0d;display:grid;place-items:center;
  color:var(--muted);font-size:24px;cursor:pointer;
}
.photo-slot.filled{border-style:solid;border-color:#2c2c2c}
.photo-slot img{width:100%;height:100%;object-fit:cover}
.photo-slot .tag{
  position:absolute;bottom:0;left:0;right:0;padding:4px;text-align:center;
  font-size:8.5px;font-weight:900;letter-spacing:.12em;background:rgba(0,0,0,.66);color:#fff;
}
.photo-slot .kill{
  position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:8px;
  background:rgba(0,0,0,.7);border:1px solid #444;color:#fff;font-size:13px;line-height:1;cursor:pointer;
}

/* -------------------------------------------------------- founder ops --- */
.admin-row{
  display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid #1c1c1c;min-width:0;
}
.admin-row .grow{min-width:0}
.admin-row label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.06em}
.admin-row input{
  width:110px;flex:0 0 auto;background:#0d0d0d;border:1px solid #333;border-radius:10px;
  color:#fff;padding:10px;font-size:13px;font-family:inherit;min-height:44px;
}

/* ---------------------------------------------------- crop editor 2.0 --- */
/* The framing editor is a full-screen sheet rather than an inline widget: on a
   phone the picture has to be big enough to place accurately with a thumb, and
   the three live previews below it are the actual avatar sizes BALENZ renders,
   so what is set here is what appears everywhere. */
.crop-backdrop{
  position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:flex-end;justify-content:center;
}
.crop-panel{
  width:100%;max-width:520px;max-height:94vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel);border:1px solid var(--line);border-radius:24px 24px 0 0;
  padding:18px 16px calc(20px + env(safe-area-inset-bottom,0px));
}
.crop-grid{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  background:
    linear-gradient(to right,transparent 33.33%,rgba(255,255,255,.13) 33.33%,rgba(255,255,255,.13) calc(33.33% + 1px),transparent calc(33.33% + 1px),transparent 66.66%,rgba(255,255,255,.13) 66.66%,rgba(255,255,255,.13) calc(66.66% + 1px),transparent calc(66.66% + 1px)),
    linear-gradient(to bottom,transparent 33.33%,rgba(255,255,255,.13) 33.33%,rgba(255,255,255,.13) calc(33.33% + 1px),transparent calc(33.33% + 1px),transparent 66.66%,rgba(255,255,255,.13) 66.66%,rgba(255,255,255,.13) calc(66.66% + 1px),transparent calc(66.66% + 1px));
}
.crop-previews{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:14px 0 4px;border-top:1px solid #1c1c1c;margin-top:12px;
}

/* -------------------------------------------------------- photo editor -- */
.photo-cell{
  position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;min-width:0;
  border:1px solid #2c2c2c;background:#0d0d0d;display:grid;place-items:center;
}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell.empty{border-style:dashed;border-color:#3a3a3a}
.photo-cell.primary{border-color:var(--red)}
.photo-cell .tag{
  position:absolute;bottom:0;left:0;right:0;padding:4px;text-align:center;
  font-size:8.5px;font-weight:900;letter-spacing:.12em;background:rgba(0,0,0,.68);color:#fff;
}
.photo-cell .mini{
  position:absolute;top:5px;right:5px;min-width:28px;min-height:28px;border-radius:9px;
  background:rgba(0,0,0,.72);border:1px solid #444;color:#fff;
  font-size:11px;font-weight:800;line-height:1;cursor:pointer;font-family:inherit;
}
.photo-cell .mini.danger{border-color:#5a1e22;color:#ff9b96}
.photo-cell .add{
  width:100%;height:100%;border:0;background:none;color:var(--muted);
  font-size:11px;font-weight:800;letter-spacing:.08em;cursor:pointer;font-family:inherit;
}
.showcase-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.showcase-strip img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;display:block}

/* ------------------------------------------- I'M TRAINING / LOOKING TO --- */
/* Both statuses are off by default, carry no coordinates and expire on the
   server. The card states that plainly rather than hiding it in settings. */
.status-card{
  display:flex;gap:12px;align-items:center;padding:14px;margin:10px 0;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
}
.status-card .grow{min-width:0}
.status-card b{display:block;font-size:14px;font-weight:900;color:#fff;letter-spacing:.02em}
.status-card .sub{display:block;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:3px}
.status-card.on{border-color:var(--red);background:linear-gradient(150deg,rgba(239,16,25,.12),#0b0b0b 70%)}
.looking-row{
  display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #1c1c1c;min-width:0;
}
.looking-row:last-child{border-bottom:0}
.looking-row .grow{min-width:0}
.looking-row b{display:block;font-size:13px;font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.looking-row .sub{display:block;font-size:11px;color:var(--muted-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.mini-person{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}

/* ------------------------------------------------------ message requests -- */
.request-row{
  padding:14px;margin:10px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
}
.request-body{
  font-size:13px;line-height:1.5;color:#dcdcdc;margin:10px 0 0;
  border-left:2px solid var(--red);padding-left:12px;overflow-wrap:anywhere;
}
.request-actions{display:flex;gap:8px;margin-top:12px}
.request-actions .btn{flex:1;min-width:0}

/* --------------------------------------------------- structured stories -- */
.cat-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.cat-chip{
  min-height:40px;padding:0 13px;border-radius:999px;border:1px solid #333;background:#101010;
  color:#cfcfcf;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;
}
.cat-chip.on{background:var(--red);border-color:var(--red);color:#fff}
.pr-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.pr-fields .wide{grid-column:1/-1}
.upload-bar{height:5px;border-radius:3px;background:#1c1c1c;overflow:hidden;margin:10px 0 4px}
.upload-bar i{display:block;height:100%;background:var(--red);width:0;transition:width .25s}

/* ------------------------------------------------------ gym portal 2.0 --- */
.portal-section{
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:12px 0;background:var(--panel);
}
.gym-rep-hero{
  border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:12px 0;text-align:center;
  background:linear-gradient(150deg,#1a0507,#0b0b0b 62%);
}
.gym-rep-hero b{display:block;font-size:38px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.02em}
.gym-rep-hero span{display:block;font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--muted);margin-top:8px}
.gym-rep-hero p{margin:10px 0 0;font-size:11.5px;line-height:1.5}
.mvp-who{display:flex;align-items:center;gap:12px;margin-top:10px;min-width:0}
.mvp-who .grow{min-width:0}
.mvp-who .sub{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}

/* ---------------------------------------------------- launch controls --- */
/* Founder-only. Every one of these calls is refused server side for anybody
   who is not a Founder or Admin; this is presentation, not permission. */
.setting-val{
  flex:0 0 auto;font-size:13px;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums;
  max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.month-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0}
.month-nav b{font-size:14px;font-weight:900;color:#fff;letter-spacing:.04em;text-align:center;flex:1;min-width:0}
.mvp-review .kv{font-size:12.5px}
.pill.warn{color:#ffd67a;border-color:#4a3c17;background:#161104}

/* ---------------------------------------------- add from BALENZ profile -- */
.pick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.pick-cell{
  padding:0;border:1px solid #2c2c2c;border-radius:14px;overflow:hidden;background:#0d0d0d;
  cursor:pointer;font-family:inherit;color:inherit;min-width:0;
}
.pick-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.pick-cell span{
  display:block;padding:6px 4px;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.setting-row .grow{min-width:0}
.setting-row .grow b{display:block;font-size:13.5px;font-weight:800;color:#fff}
.setting-row .grow .sub{
  display:block;margin-top:3px;font-size:11px;font-weight:600;line-height:1.45;color:var(--muted-2);
}


/* ==========================================================================
   BALENZ STORE — merchandise storefront
   ==========================================================================
   Presentation for js/shop.js. Two rules govern this block:

   1. No artwork is drawn here. There are no gradient "art fields", no icon
      glyphs, no seasonal colour treatments. A collection either shows its
      official uploaded artwork or shows the neutral pending placeholder.
   2. The BALENZ logo is never built here. There is no CSS wordmark. The
      primary brand asset is an image served through js/brand.js.
   ========================================================================== */

/* ------------------------------------------------ primary brand asset ---
   Presentation only for the centralized primary logo <img>. The asset itself
   is resolved in js/brand.js. */
.brand-primary{max-width:100%;height:auto;display:block}
.brand-slot{display:none}
.brand-slot.on{display:block;margin:22px auto 16px}
.brand-slot-img{width:min(300px,82%);height:auto;margin:0 auto}
/* Once the official primary asset is installed, the temporary icon that
   stands in for it is retired rather than shown alongside it. */
body.brand-official .brand-fallback-icon{display:none}

/* ----------------------------------------- sizing for the full lockup ----
   The official artwork is a full lockup: emblem, wordmark and phrase stacked,
   1402x1122 (aspect 1.25). The logo it replaces was 635x485 (aspect 1.31), so
   the two are nearly the same shape and the existing width-based sizing carries
   over almost unchanged — the new artwork is under 5% taller at a given width.
   That is why the width rules are left exactly as they were rather than
   rewritten: the established layout does not move.

   What is added here is a height ceiling per placement, in vh, as a guard for
   short viewports (small phones, landscape, a tall on-screen keyboard). On a
   normal portrait phone none of these ceilings bind. The artwork is never
   cropped or stretched — only the box it scales inside changes, and it always
   scales proportionally. */
body.brand-official .brand-logo{
  max-height:34vh;
  /* The red glow was a CSS treatment applied to the previous logo. The supplied
     artwork carries its own lighting, so nothing is added around it. */
  filter:none;
}
body.brand-official .mini-logo{max-height:14vh}
body.brand-official .brand-slot-img{max-height:30vh}
/* The Store masthead logo was removed: BALENZ is already in the permanent
   header on that screen, and the second copy of the same asset pushed the
   merchandise below the fold. Its .shop-masthead / .shop-masthead-logo rules
   went with it. */

/* The twelve monthly collections behind one disclosure, so SHOP BY PRODUCT
   and what is open right now come first. */
.shop-months{
  margin:22px 0 0;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#0d0d0d;overflow:hidden;
}
.shop-months>summary{
  display:flex;align-items:center;gap:10px;padding:14px;cursor:pointer;
  list-style:none;min-height:52px;
}
.shop-months>summary::-webkit-details-marker{display:none}
.shop-months>summary b{
  display:block;font-size:11px;font-weight:900;letter-spacing:.1em;color:#fff;
}
.shop-months>summary .sub{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.shop-months>summary .chev{transition:transform .18s}
.shop-months[open]>summary{border-bottom:1px solid var(--line)}
.shop-months[open]>summary .chev{transform:rotate(90deg)}
.shop-months>p{margin:12px 14px}
.shop-months .shop-coll-row{margin:0 10px 8px}

/* --------------------------------------------------- store introduction --- */
.shop-intro{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:#d9d9d9}
.shop-intro.dim{color:var(--muted);font-size:12.5px}

.dayones-strip{
  display:flex;align-items:center;gap:10px;margin:14px 0 4px;padding:11px 13px;
  border:1px solid #2b2b2b;border-radius:14px;background:#0d0d0d;
  font-size:11.5px;line-height:1.5;color:var(--muted);
}
.dayones-strip.on{border-color:#4a3b12;background:#12100a;color:#e8d9a8}
.dayones-strip .badge-dayones{flex:0 0 auto}

/* ---------------------------------------------------------- collection art
   Two states and no third. `.has-art` holds the official uploaded file.
   `.pending` is a flat neutral panel carrying the pending label — it is not a
   picture of anything and must never be styled to imitate one. */
.shop-art{
  position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--radius-sm);background:#0b0b0b;border:1px solid var(--line);
}
/* The official artwork is a complete lockup — emblem, wordmark and phrase.
   It is shown whole: `contain`, never `cover`, so no part of it is cropped by
   a frame whose aspect ratio differs from the file's. The supplied files are
   pure black at the edges, so a black frame makes the letterbox invisible and
   the artwork reads as if it were composed for the card. */
.shop-art.has-art{background:#000}
.shop-art.has-art img{width:100%;height:100%;object-fit:contain;display:block}
.shop-art.pending{
  display:flex;align-items:center;justify-content:center;padding:14px;
  background:#0b0b0b;border-style:dashed;border-color:#2e2e2e;
}
.art-pending-label{
  font-size:8.5px;font-weight:900;letter-spacing:.14em;line-height:1.6;
  text-align:center;color:#6a6a6a;text-transform:uppercase;
}
.shop-art.xs{width:56px;height:56px;flex:0 0 auto;border-radius:12px}
.shop-art.xs .art-pending-label{font-size:6px;letter-spacing:.06em;padding:0 2px}
.shop-art.sm{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.shop-art.lg{aspect-ratio:4/3;margin-bottom:14px}
.shop-art.lg .art-pending-label{font-size:10px;letter-spacing:.18em}
.shop-art-pill{position:absolute;inset:0;pointer-events:none}

/* --------------------------------------------------- collection cards --- */
.shop-coll-card{
  display:block;width:100%;padding:0;margin:0 0 12px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;font-family:inherit;color:inherit;
}
.shop-coll-card .shop-art{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.shop-coll-body{display:block;padding:14px}
.shop-coll-body > b{display:block;font-size:16px;font-weight:900;letter-spacing:.02em;color:#fff}
.shop-coll-body .phrase{
  display:block;margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--red);
}
.shop-coll-body .meta{display:block;margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--muted-2)}

.shop-coll-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;margin:0 0 8px;
  text-align:left;background:#0d0d0d;border:1px solid #212121;border-radius:14px;
  cursor:pointer;font-family:inherit;color:inherit;min-width:0;
}
.shop-coll-row.dim{opacity:.55}
.shop-coll-row .grow{min-width:0}
.shop-coll-row b{display:block;font-size:13.5px;font-weight:900;letter-spacing:.06em;color:#fff}
.shop-coll-row .sub{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:var(--muted-2)}
.shop-coll-row .chev{flex:0 0 auto;color:#5a5a5a;font-size:18px}

/* ------------------------------------------------- product type pricing ---
   The four product types and their four real prices. A collection is never
   summarised as a single "from" price. */
.shop-type-prices{
  display:grid;grid-template-columns:repeat(2,1fr);gap:6px 12px;
  margin-top:12px;padding-top:11px;border-top:1px solid #232323;
}
.shop-type-price{display:flex;justify-content:space-between;gap:8px;min-width:0}
.shop-type-price span{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--muted-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shop-type-price b{font-size:11.5px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.shop-tax{display:block;margin-top:8px;font-size:10px;letter-spacing:.04em;color:#6d6d6d}

.shop-type-grid{display:block}
.shop-type{
  display:flex;align-items:center;gap:12px;width:100%;padding:14px;margin:0 0 8px;
  text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  cursor:pointer;font-family:inherit;color:inherit;min-width:0;
}
.shop-type-body{flex:1;min-width:0}
.shop-type-body b{display:block;font-size:14px;font-weight:900;letter-spacing:.04em;color:#fff}
.shop-type-body span{
  display:block;margin-top:3px;font-size:12px;font-weight:800;color:var(--red);
  font-variant-numeric:tabular-nums;
}
.shop-type .chev{flex:0 0 auto;color:#5a5a5a;font-size:18px}
.shop-type-head{
  display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding:13px 14px;
  border:1px solid var(--line);border-radius:14px;background:#0d0d0d;
}
.shop-type-head b{font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.shop-type-head span{font-size:10.5px;letter-spacing:.06em;color:var(--muted-2)}

/* -------------------------------------------------------- product grid --- */
.shop-prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.shop-prod{
  display:block;padding:0;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;font-family:inherit;color:inherit;min-width:0;
}
.shop-prod.locked{opacity:.5}
.shop-prod-body{display:block;padding:10px}
.shop-prod-body b{
  display:block;font-size:11.5px;font-weight:900;letter-spacing:.08em;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shop-prod-body .sub{
  display:block;margin-top:2px;font-size:9.5px;font-weight:800;letter-spacing:.08em;color:var(--muted-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shop-prod-body .price{
  display:block;margin-top:6px;font-size:12.5px;font-weight:900;color:#fff;
  font-variant-numeric:tabular-nums;
}
.shop-prod-body .tag{
  display:inline-block;margin-top:4px;padding:2px 6px;border-radius:999px;
  border:1px solid #4a3b12;background:#12100a;color:#e8d9a8;
  font-size:8.5px;font-weight:900;letter-spacing:.08em;
}

/* --------------------------------------------------- collection phrase --- */
.shop-phrase{
  margin:0 0 6px;font-size:15px;font-weight:900;letter-spacing:.1em;line-height:1.4;color:var(--red);
}
.shop-phrase.sm{margin:6px 0 12px;font-size:11.5px;letter-spacing:.12em;color:var(--red)}

/* ------------------------------------------------------- product detail --- */
.shop-price-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0 0 6px;
}
.shop-price{font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.shop-price-was{font-size:14px;font-weight:700;color:var(--muted-2);text-decoration:line-through}
.shop-price-tag{
  padding:3px 8px;border-radius:999px;border:1px solid #4a3b12;background:#12100a;
  color:#e8d9a8;font-size:9px;font-weight:900;letter-spacing:.1em;
}
.shop-price-row .shop-tax{flex:1 0 100%;margin-top:0}

/* The approved apparel print rule, stated as text. Front and back both carry
   the complete official artwork, phrase included. */
.shop-print{
  display:block;margin:14px 0 0;padding:13px 14px;border:1px solid #212121;
  border-radius:14px;background:#0d0d0d;
}
.shop-print .eyebrow{display:block;margin-bottom:7px}
.shop-print span{display:block;font-size:11.5px;line-height:1.6;color:#cfcfcf}
.shop-print span.dim{margin-top:6px;font-size:10.5px;color:var(--muted-2)}

/* ------------------------------------------------------- cart / ordering --- */
.cart-row.locked{opacity:.55}
.shop-totals{margin-top:16px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#0d0d0d}
.set-line b.pending{font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--muted-2)}
/* FREE PERSONAL / LOCAL DELIVERY. Reads as a positive fact, not a caveat:
   b.pending is muted because a pending figure is something the customer is
   waiting on, whereas free delivery is a benefit that is already settled. */
.set-line b.free{font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--success)}
.shop-review{padding:13px 14px;border:1px solid #212121;border-radius:14px;background:#0d0d0d}
/* The product page has room for a comfortable tap target, so the stepper it
   shares with the tighter bag rows grows to 44px there. */
.qty.shop-qty{margin:6px 0 14px}
.qty.shop-qty button{width:44px;height:44px;font-size:19px}
.qty.shop-qty span{min-width:34px;font-size:14px}
.shop-empty{
  padding:16px;border:1px dashed #2b2b2b;border-radius:14px;background:#0b0b0b;
  font-size:12.5px;line-height:1.6;color:var(--muted);
}
/* .btn is inline-flex, so an anchor styled as a button needs its underline
   removed to match the real buttons beside it. */
a.btn{text-decoration:none}

/* ------------------------------------------------- six-tab bottom nav --- */
/* SHOP made the primary nav six items wide; the labels need room on the
   narrowest phones. */
@media (max-width:400px){
  .nav button{font-size:8.5px;letter-spacing:.02em;padding:8px 1px}
  .nav .sym{font-size:17px}
  .nav .badge{right:calc(50% - 16px)}
}
@media (max-width:340px){
  .nav button{font-size:7.5px;letter-spacing:0}
  .nav .sym{font-size:16px}
  .shop-prod-grid{grid-template-columns:1fr}
  .shop-type-prices{grid-template-columns:1fr}
}

/* ==========================================================================
   MY GYMS — HOME GYM + CUSTOM ORDER
   Reordering is vertical only. Nothing here introduces a horizontal gesture,
   so the BALENZ home swipe keeps every horizontal drag on the page.
   ========================================================================== */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}

.mini-btn{
  flex:none;min-width:34px;min-height:34px;padding:0 8px;border-radius:11px;
  background:#151515;border:1px solid #2c2c2c;color:#ddd;
  font-size:14px;font-weight:800;cursor:pointer;line-height:1;
}
.mini-btn:active{opacity:.65}
.mini-btn[disabled]{opacity:.28;cursor:default}
.mini-btn.on{background:#fff;border-color:#fff;color:#080808}
.mini-btn.danger{color:#ff8b8b;border-color:#3d1c20}

.gym-order{display:flex;flex-direction:column;gap:8px;touch-action:pan-y}
.order-row{align-items:center;gap:8px;flex-wrap:wrap;user-select:none;-webkit-user-select:none}
.order-row .grow{min-width:0;flex:1 1 auto}
.drag-handle{
  flex:none;width:34px;min-height:38px;display:grid;place-items:center;margin:-4px 0 -4px -4px;
  color:var(--muted-2);font-size:15px;cursor:grab;touch-action:none;
}
.order-tools{flex:none;display:flex;align-items:center;gap:5px;margin-left:auto}
/* Four 34px controls plus the gym name do not fit on a 320-375px phone without
   squeezing the name to nothing, so below 400px the tools drop to their own
   full-width line and grow to a comfortable 42px tap target. Same markup, same
   order — the drag handle and name keep the first line. */
@media (max-width:400px){
  .order-tools{flex:1 1 100%;margin-left:0;justify-content:space-between;gap:6px}
  .order-tools .mini-btn{flex:1 1 0;min-height:42px;font-size:15px}
}
.order-row.dragging{
  position:relative;z-index:5;border-color:#4a4a4a;background:#171717;
  box-shadow:0 10px 26px rgba(0,0,0,.55);
}
.gym-order.dragging-list .order-row:not(.dragging){opacity:.72}

.home-gym-card{position:relative}
.home-gym-card.is-home{border-color:#4a3c17;background:linear-gradient(160deg,#141005,#0d0d0d)}
.eyebrow.gold{color:var(--gold-1)}

/* ==========================================================================
   COACH / TRAINER — request, application, leads
   ========================================================================== */
.check-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.check-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:#0f0f0f;border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;min-height:48px;color:inherit;cursor:pointer;font:inherit;
}
.check-row:active{opacity:.7}
.check-row.on{border-color:#3d3d3d;background:#161616}
.check-row .box{
  flex:none;width:22px;height:22px;border-radius:7px;border:1px solid #363636;
  background:#0b0b0b;display:grid;place-items:center;font-size:12px;font-weight:900;color:#080808;
}
.check-row.on .box{background:#fff;border-color:#fff}
.check-row b{font-size:13px;font-weight:800;color:#fff;display:block}
.check-row .sub{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}

.tier-card{border-color:#242424}
.tick-list{margin:10px 0 0;padding:0 0 0 2px;list-style:none}
.tick-list li{
  position:relative;padding:0 0 0 20px;margin-top:7px;
  font-size:12.5px;color:#cfcfcf;font-weight:600;line-height:1.45;
}
.tick-list li::before{
  content:'✓';position:absolute;left:0;top:0;color:var(--trainer);font-weight:900;font-size:12px;
}

.demand-card{display:flex;align-items:center;gap:14px}
.demand-n{
  flex:none;font-size:34px;font-weight:900;color:var(--red);line-height:1;
  font-variant-numeric:tabular-nums;
}
.demand-card b{font-size:12px;letter-spacing:.06em}

.btn.ghost.danger{
  background:transparent;border:1px solid #3d1c20;color:#ff9b96;box-shadow:none;
}

/* ==========================================================================
   SCROLLING TAB STRIP (gym portal) — §9
   The strip already scrolled; what was missing was any sign that it does.
   A fade on whichever edge has more content, a visible rail, and 44px targets.
   ========================================================================== */
.segmented.scroll{
  scroll-behavior:smooth;scroll-padding:0 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 26px),transparent 100%);
}
.segmented.scroll.at-start{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.segmented.scroll.at-end{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 100%);
}
.segmented.scroll.at-start.at-end{-webkit-mask-image:none;mask-image:none}
.segmented.scroll button{
  min-height:44px;padding:0 15px;border:1px solid #232323;background:#101010;
  border-radius:12px;letter-spacing:.05em;
}
.segmented.scroll button.active{background:#fff;border-color:#fff;color:#080808}

/* The calorie-plan selector that used to live here went with NUTRITION; none
   of it had a caller left. The legacy NUTRITION *Story tag* is a different
   thing and is deliberately still supported — see js/stories.js. */
.hs-key.gold{color:var(--gold-1)}
.pill.home{color:var(--gold-1);border-color:#4a3c17;background:#120e05}
.alert-optin{
  margin-top:12px;padding:12px 14px;border-radius:14px;
  background:#0f0f0f;border:1px solid var(--line);gap:12px;
}
.alert-optin b{font-size:12.5px;font-weight:800;color:#fff;display:block}
.alert-optin .sub{font-size:11px;color:var(--muted);font-weight:600;display:block;margin-top:2px}
.alert-optin .grow{flex:1;min-width:0}

/* ------------------------------------------------ conversation header --- */
/* One tap target for the avatar AND the name, 56px tall so it clears the 44px
   minimum on iPhone with room to spare, and full width so a thumb cannot miss
   it. Styled as a row rather than a button so the conversation still reads as a
   conversation. */
.chat-head{
  display:flex;align-items:center;gap:11px;width:100%;margin:0 0 6px;
  padding:7px 9px 7px 7px;min-height:56px;text-align:left;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:inherit;font:inherit;cursor:pointer;
}
.chat-head:active{background:#141414;border-color:var(--line)}
.chat-head:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.chat-head .grow{min-width:0;display:block}
.chat-head-name{
  display:block;margin:0;font-size:18px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-head #chatContext{display:block;margin-top:2px}
.chat-head .chev{color:#5a5a5a;font-size:18px;flex:none}

/* ------------------------------------------------------- story tagging --- */
/* Selected members, before the Story is posted. Each chip carries its own
   remove control so a tag can be taken off without starting again. */
.tag-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.tag-chip{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  border:1px solid var(--line-strong);background:#111;border-radius:999px;
  padding:5px 5px 5px 6px;font-size:12px;
}
.tag-chip b{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.tag-chip i{font-style:normal;color:var(--muted-2);font-size:11px}
/* The visible circle stays small so a chip is compact, but the area a thumb
   actually has to hit is expanded to a comfortable size by the overlay below.
   Nothing shifts in the layout: the overlay is absolutely positioned. */
.tag-chip .x{
  position:relative;
  width:26px;height:26px;flex:none;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.09);color:#fff;font-size:11px;line-height:1;
  display:grid;place-items:center;font-family:inherit;
}
.tag-chip .x::after{content:'';position:absolute;inset:-9px}
.tag-chip .x:active{background:var(--red)}

.tag-results{max-height:250px;overflow-y:auto;-webkit-overflow-scrolling:touch;margin:8px 0 2px}
.tag-result{
  display:flex;align-items:center;gap:11px;width:100%;min-height:56px;
  border:1px solid var(--line);background:#0e0e0e;border-radius:var(--radius-sm);
  padding:8px 11px;margin:0 0 8px;text-align:left;color:inherit;font:inherit;cursor:pointer;
}
.tag-result.on{border-color:var(--red);background:#16090a}
.tag-result .grow{min-width:0}
.tag-result b{display:block;font-size:13.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag-result .handle{display:block}
.tag-result .sub{display:block;font-size:11px;color:var(--muted-2);margin-top:2px}
.tag-result .mark{
  flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;font-size:14px;font-weight:900;
}
.tag-result.on .mark{background:var(--red)}

/* Tagged members shown on a posted Story. Interactive, because the tag is
   stored beside the Story rather than burned into the image. */
.tagged-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px;margin-top:6px;font-size:12px}
.tagged-label{color:var(--muted);font-weight:700;margin-right:3px}
.tagged-sep{color:var(--muted-2)}
.tagged-link{
  position:relative;
  border:0;background:none;padding:2px 0;margin:0;cursor:pointer;font:inherit;font-size:12px;
  font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(255,255,255,.35);
}
/* A handle is short text, so the tap area is expanded vertically the same way
   the chip's remove button is — a tagged name has to be openable with a thumb
   over a photo, not just with a cursor. Static handles get no expander because
   they are not tappable. */
.tagged-link::after{content:'';position:absolute;left:-4px;right:-4px;top:-9px;bottom:-9px}
.tagged-link.static{text-decoration:none;color:#cfcfcf;cursor:default}
.tagged-link.static::after{display:none}
.tagged-link:active{color:var(--red)}
.viewer-foot .tagged-label{color:#cfcfcf}

/* ==========================================================================
   SOCIAL — Home feed, Posts, reactions, comments, Post grids, Create, people
   Black / red / white only. Everything below reuses the :root tokens and the
   existing primitives (.avatar, .chip, .pill, .btn, .link, .icon-btn) so a
   Post card looks like the rest of BALENZ rather than like a second app.
   ========================================================================== */

/* ------------------------------------------------- Stories strip (Home) -- */
/* The Stories rail itself is .ring-rail from the Stories module — this only
   gives it its own band at the top of the Feed and a rule underneath, so a
   temporary Story reads as a different surface from a permanent Post. */
.story-strip-wrap{
  margin:2px -18px 10px;padding:2px 0 6px;border-bottom:1px solid var(--line);
}

/* #storyStrip is deliberately NOT .ring-rail: the Home strip is tighter than
   the Stories screen rail, so it carries its own rail rules.

   THIS BLOCK IS LOAD-BEARING. A .ring is itself display:flex (disc over name),
   so if its parent is not a flex row every ring becomes a block-level box and
   the Stories STACK VERTICALLY down the whole screen — which is exactly what
   this pass was opened to fix. display:flex + flex-wrap:nowrap + overflow-x
   must all stay. overflow-x:auto also earns the strip its gesture: core.js
   swipeBlocked() hands any element with real sideways scroll the touch, so
   scrolling Stories can never flip between the six destinations. */
.story-strip{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;
  gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:4px 18px 2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.story-strip::-webkit-scrollbar{display:none}
/* Never shrink, never wrap, never grow — one row, always. */
.story-strip .ring{flex:0 0 auto;width:60px}
.story-strip .ring .disc{width:54px;height:54px;font-size:15px}
.story-strip .ring .who{max-width:60px;font-size:9px}

/* ------------------------------------------------------- the composer ----
   Creating is not a tab any more: it happens from the feed, which is where a
   member already is when they have something to share. The row reads as an
   invitation rather than a form — their own avatar, a prompt, a plus — and
   Stories get their own button beside it because a Story is a different
   thing from a Post: temporary, not permanent. */
.composer-row{display:flex;gap:8px;align-items:stretch;margin:0 0 14px}
.composer-open{
  flex:1;min-width:0;display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px 9px 9px;cursor:pointer;text-align:left;font:inherit;color:inherit;
  -webkit-appearance:none;appearance:none;transition:border-color .15s ease;
}
.composer-open:active{opacity:.75}
.composer-open:hover{border-color:var(--line-strong)}
.composer-hint{
  flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.composer-plus{
  flex:none;width:28px;height:28px;border-radius:999px;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;line-height:1;
}
.composer-story{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:72px;padding:8px 4px;cursor:pointer;font:inherit;
  background:#170b0c;border:1px solid #4e1c20;border-radius:var(--radius);
  color:#fff;font-size:8.5px;font-weight:900;letter-spacing:.09em;
  -webkit-appearance:none;appearance:none;
}
.composer-story span{font-size:17px;line-height:1;color:var(--red)}
.composer-story:active{opacity:.75}
@media (max-width:359px){
  .composer-story{width:60px}
}

/* ------------------------------------------------------------- the feed -- */
.feed{display:block}
.feed-more{margin:2px 0 10px}
.feed-end{
  text-align:center;color:var(--muted);font-size:12.5px;font-weight:600;
  padding:18px 6px 8px;line-height:1.7;
}
.feed-end .link{font-size:12.5px}

/* The Feed loads its next page itself. This is the sentinel the observer in
   js/social.js watches — it is a spinner because by the time it is visible a
   page is already being fetched, not a button waiting to be pressed. */
.feed-sentinel{display:flex;justify-content:center;align-items:center;padding:26px 0 30px}

/* ------------------------------------------------------------ post card --
   A Post is a person's photo, their words and what people did about it — not
   a panel on a dashboard. So: no card border, no card background, no rounded
   container inside a rounded container, no card gutter of its own. One
   hairline separates one Post from the next, and the media runs the full
   width of the phone. */
.post-card{
  background:none;border:0;border-radius:0;
  padding:14px 0 6px;margin:0;
  border-bottom:1px solid #191919;
}
.post-card:last-child{border-bottom:0}
.post-card.detail{border-bottom:0;padding-top:4px;margin-bottom:6px}

.post-head{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.post-who{
  display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;
  border:0;background:none;padding:0;margin:0;text-align:left;color:inherit;
  font:inherit;cursor:pointer;
}
.post-who .avatar{width:42px;height:42px;font-size:14px;border-radius:13px}
.post-who-text{display:block;min-width:0}
.post-who-text b{
  display:block;font-size:13.5px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.post-who-text .handle{display:block;font-size:11px;margin-top:1px}
.post-who:active .post-who-text b{color:var(--red)}
.post-badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.post-head .icon-btn{flex:none}

.post-meta{
  font-size:11px;color:var(--muted-2);font-weight:700;letter-spacing:.03em;
  margin:9px 0 0;line-height:1.5;
}

/* The photo IS the Post, so it runs the full width of the phone — the 18px
   screen gutter is cancelled here and nowhere else, which is what lets
   identity, caption and the interaction row keep their alignment. */
.post-media{
  display:block;position:relative;width:calc(100% + 36px);margin:11px -18px 0;
  border:0;padding:0;background:#0a0a0a;cursor:pointer;
}
.post-media.missing{
  display:grid;place-items:center;min-height:120px;cursor:default;
  color:var(--muted-2);font-size:12px;font-weight:700;text-align:center;padding:24px 18px;
}
/* Media whose signed URL has not been asked for yet. It holds the space the
   photo is about to take so the Feed does not jump as cards hydrate, and it
   is deliberately silent — no spinner, no "loading" text on every card. */
.post-media.pending{
  min-height:58vw;max-height:78vh;cursor:default;
  background:linear-gradient(100deg,#0d0d0d,#141414 40%,#0d0d0d);
}
.post-photo{display:block;width:100%;height:auto;max-height:78vh;object-fit:cover}
.post-video{display:block;width:100%;height:auto;max-height:78vh;background:#000}

.post-body{
  margin:12px 0 0;font-size:14px;line-height:1.62;color:#ededed;
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* --------------------------------------------- 🔥 💪 ❤️ reaction row ----- */
/* One reaction per member per Post. The active one is the red one — there is
   never more than one .react.on in a row. */
.react-row{display:flex;gap:6px;margin:0}
.react{
  display:inline-flex;align-items:center;gap:5px;min-height:40px;
  padding:8px 11px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:#101010;color:var(--muted);
  font:inherit;font-size:12.5px;font-weight:800;
  transition:background .14s,border-color .14s,color .14s;
}
.react .e{font-size:15px;line-height:1}
.react b{font-weight:900;font-size:12px;min-width:7px;text-align:left}
.react:active{background:#1b1b1b}
.react.on{border-color:var(--red);background:#190a0b;color:#fff}

/* ONE interaction area per Post: 🔥 💪 ❤️ on the left, comments and SEND on
   the right. This used to be two stacked rows with a rule between them. */
.post-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin:11px 0 0;
}
.post-bar .grow{flex:1 1 auto;min-width:0}
.post-act{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  border:0;background:none;color:var(--muted);font:inherit;font-size:11px;
  font-weight:800;letter-spacing:.06em;padding:9px 7px;cursor:pointer;
  min-height:40px;min-width:40px;justify-content:center;
}
.post-act b{font-size:12px;font-weight:900;color:inherit}
.post-act:active{color:#fff}

/* -------------------------------------------------- Posts sent to you --- */
.sent-strip{
  border:1px solid var(--line);background:#0e0e0e;border-radius:var(--radius-sm);
  padding:12px 12px 10px;margin:0 0 14px;
}
.sent-row{
  display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:2px 0 2px;
}
.sent-row::-webkit-scrollbar{display:none}
.sent-item{
  flex:0 0 auto;width:74px;border:0;background:none;padding:0;cursor:pointer;
  color:inherit;font:inherit;text-align:center;
}
.sent-item img,.sent-glyph{
  display:block;width:74px;height:74px;border-radius:16px;object-fit:cover;
  background:#161616;border:1px solid #2c2c2c;
}
.sent-glyph{display:grid;place-items:center;font-size:20px;color:var(--muted)}
.sent-who{
  display:block;margin-top:5px;font-size:10px;font-weight:800;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ====================================================================== 
   PROFILE — a social profile, not a settings page
   Who they are, then what they have posted. The identity block is one row so
   that a member's Posts start near the top of the screen instead of below a
   stack of cards.
   ====================================================================== */
.profile-head{display:flex;align-items:center;gap:14px;margin:2px 0 0}
.profile-id{flex:1;min-width:0}
.profile-name{
  margin:0;font-size:21px;font-weight:900;line-height:1.15;color:#fff;
  overflow-wrap:anywhere;
}
.profile-handle{
  display:block;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--muted);
  overflow-wrap:anywhere;
}
.profile-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.profile-badges:empty{display:none}
.profile-bio{
  margin:0;font-size:13.5px;line-height:1.65;color:#dcdcdc;overflow-wrap:anywhere;white-space:pre-wrap;
}
.profile-bio:empty{display:none}

/* The fitness facts as chips: city, goal, frequency, preferred time. They were
   a five-row key/value card, which is what made a profile read like a form. */
.chip-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.chip-facts:empty{display:none}
.fact{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:#101010;
  font-size:11.5px;font-weight:700;color:#d6d6d6;overflow-wrap:anywhere;
}
.fact-glyph{color:var(--red);font-size:11px;line-height:1;flex:none}

@media (max-width:359px){
  .profile-head{gap:11px}
  .profile-name{font-size:19px}
}

/* ------------------------------------------------- Post grid (profiles) -- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 0 0}
.tile{
  position:relative;aspect-ratio:1/1;border:0;padding:0;margin:0;cursor:pointer;
  background:#121212;border-radius:6px;overflow:hidden;color:inherit;font:inherit;
}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile-glyph{display:grid;place-items:center;width:100%;height:100%;font-size:22px;color:var(--muted)}
.tile-text{
  display:block;padding:8px;font-size:10.5px;line-height:1.45;color:#cfcfcf;
  text-align:left;font-weight:600;overflow:hidden;height:100%;
}
.tile-badge{
  position:absolute;top:5px;right:6px;font-size:10px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.tile-count{
  position:absolute;bottom:5px;left:6px;font-size:10px;font-weight:900;color:#fff;
  background:rgba(0,0,0,.55);border-radius:999px;padding:2px 7px;
}
@media (min-width:420px){.post-grid{gap:6px}}

/* -------------------------------------- profile stat row (POSTS/FOLLOW) -- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 0}
.stat-row .stat{
  padding:11px 6px;text-align:center;border-radius:14px;
  color:inherit;font:inherit;cursor:pointer;
}
.stat-row .stat b{font-size:19px;margin-top:0}
.stat-row .stat span{
  display:block;font-size:8.5px;color:var(--muted);letter-spacing:.07em;
  font-weight:800;margin-top:3px;
}
.stat-row button.stat:active{border-color:var(--red-deep);background:#151010}
.stat-row div.stat{cursor:default}
.member-social{margin-top:16px}

/* ------------------------------------------------------ segmented (new) -- */
/* .seg is the compact tab strip used by CREATE and DISCOVER. Same look as
   .segmented, sized for three-to-four short labels. */
.seg{
  display:flex;gap:4px;padding:4px;margin:14px 0;
  background:#101010;border:1px solid var(--line);border-radius:14px;
  overflow-x:auto;scrollbar-width:none;
}
.seg::-webkit-scrollbar{display:none}
.seg button{
  flex:1 0 auto;min-height:40px;border:0;border-radius:11px;background:none;
  color:var(--muted);font:inherit;font-size:11px;font-weight:800;letter-spacing:.06em;
  cursor:pointer;padding:9px 12px;white-space:nowrap;
}
.seg button.active{background:#fff;color:#080808}

.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0}

/* -------------------------------------------------------- create a post -- */
.media-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:172px;margin:0;padding:22px;cursor:pointer;
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  background:#0d0d0d;color:var(--muted);font:inherit;
}
.media-drop:active{border-color:var(--red);background:#140b0c}
.media-drop-glyph{font-size:30px;line-height:1;color:var(--red)}
.media-drop-label{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-align:center}
.media-preview{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#0a0a0a;
}
.media-preview img,.media-preview video{display:block;width:100%;max-height:60vh;object-fit:contain;background:#000}
.media-preview .btn{margin:10px 12px 12px;width:auto}

.upload-progress{height:5px;border-radius:3px;background:#1c1c1c;overflow:hidden;margin:14px 0 4px}
.upload-progress .bar{display:block;height:100%;width:0;background:var(--red);transition:width .3s}

.btn-inline{
  border:1px solid var(--red);background:var(--red);color:#fff;font:inherit;
  font-size:11.5px;font-weight:900;letter-spacing:.08em;cursor:pointer;
  min-height:40px;padding:9px 16px;border-radius:12px;flex:none;
}
.btn-inline:active{background:var(--red-deep);border-color:var(--red-deep)}
.btn-inline:disabled{opacity:.5}

/* ------------------------------------------------------------ comments -- */
.comment{display:flex;gap:10px;padding:12px 0;border-bottom:1px solid #1b1b1b}
.comment:last-child{border-bottom:0}
.comment.reply{padding-left:32px;border-bottom:0;padding-top:4px;padding-bottom:10px}
.comment.reply .avatar{width:28px;height:28px;font-size:10px;border-radius:9px}
.comment-who{border:0;background:none;padding:0;margin:0;cursor:pointer;flex:none}
.comment-body{flex:1;min-width:0}
.comment-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.comment-top b{font-size:12.5px;font-weight:800;color:#fff}
.comment-body p{
  margin:4px 0 0;font-size:13.5px;line-height:1.55;color:#e4e4e4;
  overflow-wrap:anywhere;white-space:pre-wrap;
}
.comment-acts{display:flex;gap:12px;margin-top:2px}
.comment-acts .link{padding:6px 0;font-size:11px}

.comment-composer{
  position:sticky;bottom:calc(var(--nav-h) + var(--safe-bottom));z-index:5;
  display:flex;gap:8px;align-items:center;margin:14px 0 0;padding:10px 0;
  background:linear-gradient(to top,#000 55%,rgba(0,0,0,.86));
}
.comment-composer .field{flex:1;min-width:0;margin:0}
.reply-hint{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);padding:2px 0 10px;
}
.reply-hint b{color:#fff}
.reply-hint .link{padding:4px 0;font-size:11px}

/* ------------------------------------------------------ people / follow -- */
.person-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px;margin:0 0 10px;
}
.person-card .post-who{width:100%}
.person-card p{margin:8px 0 0}
.person-card .btn-row{margin-top:11px}
/* FOLLOW · CONNECT · PROFILE in one row on a phone. The default .btn-row
   reserves 130px per button, which on a 320px screen gives each of the three
   its own line. They stay three separate buttons — FOLLOW and CONNECT are
   different relationships — they just share a line. */
.person-card .btn-row .btn,
#memberActions .btn{
  flex:1 1 78px;min-width:78px;padding:10px 8px;white-space:nowrap;
}
.person-badges{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.person-badges:empty{display:none}
.person-card .person-badges{margin-top:9px}
.person-row{
  display:flex;align-items:center;gap:11px;width:100%;min-height:58px;
  border:1px solid var(--line);background:#0e0e0e;border-radius:var(--radius-sm);
  padding:9px 12px;margin:0 0 8px;text-align:left;color:inherit;font:inherit;cursor:pointer;
}
.person-row:active{border-color:var(--red-deep);background:#150f10}

/* ----------------------------------------------------- radius slider ---- */
.range{
  -webkit-appearance:none;appearance:none;width:100%;height:32px;margin:6px 0 0;
  background:none;cursor:pointer;
}
.range::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#242424}
.range::-moz-range-track{height:5px;border-radius:3px;background:#242424}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10px;
  border-radius:50%;background:var(--red);border:2px solid #0a0a0a;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.range::-moz-range-thumb{
  width:24px;height:24px;border:2px solid #0a0a0a;border-radius:50%;
  background:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.6);
}
.range:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ==========================================================================
   MERCH — the Crop Top bundle, pending prices, recorded order reference
   ========================================================================== */

/* THE CROP TOP BUNDLE. Shown on the product-type page and the product page.
   Red-edged because it is a benefit the member gets, not a warning. */
.shop-bundle{
  display:block;margin:14px 0 0;padding:13px 14px;
  border:1px solid #4e1c20;border-radius:var(--radius-sm);background:#170b0c;
}
.shop-bundle-tag{
  display:inline-block;margin-bottom:7px;padding:4px 9px;border-radius:999px;
  background:var(--red);color:#fff;font-size:9px;font-weight:900;letter-spacing:.09em;
}
.shop-bundle-note{
  display:block;margin-bottom:6px;font-size:13px;font-weight:800;color:#fff;line-height:1.5;
}
.shop-bundle>span:last-child{display:block;font-size:12.5px;line-height:1.6;color:#e2e2e2}

/* Beside the price, so "$29.99" and "both included" are read together and a
   member can never take the Shorts for an extra charge. */
.shop-price-incl{
  flex:1 0 100%;margin-top:2px;font-size:11.5px;font-weight:800;
  letter-spacing:.02em;color:var(--red);
}

/* The included Shorts, on their own line in the bag. No price on it, ever. */
.cart-incl{
  display:block;margin-top:5px;font-size:10px;font-weight:800;letter-spacing:.05em;
  color:#e9b7ba;
}
.cart-incl b{display:inline;font-size:10px;font-weight:900;color:var(--red)}
.set-line.incl{color:#d6a7ab;font-size:11.5px;margin-top:4px}
.set-line.incl b{color:var(--red);font-size:10px;font-weight:900;letter-spacing:.07em}
.shop-prod-body .tag.incl{border-color:#4e1c20;background:#170b0c;color:#f0b8bc}
.shop-type-body .incl{
  display:block;margin-top:3px;font-size:8.5px;font-weight:900;letter-spacing:.07em;
  color:#f0b8bc;
}
.shop-type-body .alt{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted-2)}

/* A PRICE BALENZ HAS NOT SET. Neutral, never $0.00, never a guess. */
.shop-price.pending{font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--warning)}
.shop-type-head b.pending{font-size:13px;letter-spacing:.06em;color:var(--warning)}
.shop-type-body span.pending{color:var(--warning);font-weight:800}
.shop-prod-body .price.pending{font-size:9.5px;letter-spacing:.05em;color:var(--warning)}
.shop-type-price b.pending{font-size:10px;letter-spacing:.06em;color:var(--warning)}

/* The BLZ-… reference of an order BALENZ has actually recorded. */
.shop-order-ref{
  display:block;margin:0 0 16px;padding:14px;border-radius:var(--radius-sm);
  border:1px solid #1c4a34;background:#0a1410;text-align:center;
}
.shop-order-ref b{
  display:block;margin:5px 0 4px;font-size:21px;font-weight:900;letter-spacing:.06em;
  color:#8fe6b6;font-variant-numeric:tabular-nums;
}
.shop-order-ref>span:last-child{display:block;font-size:11px;color:var(--muted)}

/* HOW YOU PAY / SEND YOUR E-TRANSFER. One block, on the review screen and on
   the confirmation screen, holding the amount, the recipient and the order
   number that goes in the e-Transfer message. */
.shop-pay{
  display:block;margin:16px 0 0;padding:14px;border-radius:var(--radius-sm);
  border:1px solid #212121;background:#0d0d0d;
}
.shop-pay .eyebrow{display:block;margin-bottom:8px}
.shop-pay p{margin:10px 0 0}
/* payments@balenz.ca is one unbreakable token; on a 320px screen it has to be
   allowed to wrap rather than push the label off the row. */
.shop-pay .set-line b{overflow-wrap:anywhere;text-align:right}

/* The order went through. */
.shop-confirm{text-align:center;padding:20px 8px 6px}
.shop-confirm h2{margin:10px 0 6px;font-size:23px;letter-spacing:-.01em}
.shop-confirm p{margin:0}
.shop-confirm-mark{
  display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1px solid #1c4a34;background:#0a1410;color:#8fe6b6;font-size:24px;font-weight:900;
}
.shop-order-ref .pill{margin-top:2px}

/* PRE-MIGRATION ONLY. The server issued no authoritative payable amount, so
   the block is warned rather than inventing a figure in the browser. Delivery
   is free, so once the approved RPC is live this state cannot be reached. */
.shop-pay.pending{border-color:#4a3a12;background:#141005}
.shop-pay .set-line.total b.pending{
  font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--warning);
}

/* THE THREE PAYMENT STEPS. One block per step, each with the exact value it
   copies printed above a full-width button, so a member can read what they
   are about to paste. */
.shop-step{
  display:block;margin:14px 0 0;padding:14px;border-radius:var(--radius-sm);
  border:1px solid #212121;background:#0d0d0d;
}
.shop-step .eyebrow{display:block;margin-bottom:8px}
.shop-step-value{
  display:block;margin:0 0 11px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line);background:#050505;text-align:center;
  font-size:15px;font-weight:900;letter-spacing:.04em;color:#fff;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.shop-step .btn{margin:0}
/* Brief COPIED feedback. The label returns on its own. */
.shop-step .btn.copied{background:#0a1410;border-color:#1c4a34;color:#8fe6b6}
.shop-step p{margin:8px 0 0;text-align:center}
.shop-steps{margin:4px 0 0;padding-left:22px}
.shop-steps li{
  margin:0 0 7px;font-size:13px;line-height:1.55;color:#e2e2e2;
}
.shop-steps li b{color:#fff;font-weight:900;overflow-wrap:anywhere}

/* VIDEO STORIES — the stage player, the composer preview, the card thumbnail.
   Native controls are deliberately left in place: play, scrub, volume and mute
   belong to the member, not to BALENZ. */
.viewer-video{
  width:100%;height:100%;max-height:100%;object-fit:contain;display:block;background:#000;
}
.viewer-stage video::-webkit-media-controls-panel{background:rgba(5,5,5,.72)}
.compose-video{
  width:100%;max-height:300px;border-radius:16px;margin:6px 0;display:block;
  background:#000;border:1px solid var(--line);
}
.story-card .thumb.video{
  position:relative;background:#101010;color:var(--red);font-size:16px;
}
.story-card .thumb.video img{opacity:.82}
.story-card .thumb.video.has-poster::after{
  content:'▶';position:absolute;inset:auto 0 0 0;height:20px;
  display:grid;place-items:center;font-size:11px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));
}

/* ===========================================================================
   BALENZ + DATING — COMING SOON
   Dating has a launch date and has not reached it. The badge below is the
   member-facing statement of that, on the dating gate card.
   =========================================================================== */
.dating-soon{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,79,125,.13);border:1px solid rgba(255,79,125,.42);
  color:var(--dating);font-size:10px;font-weight:900;letter-spacing:.14em;
}
/* The distance chips reuse .size-row / .size-chip from the store so a chosen
   radius looks and behaves exactly like a chosen size. */
#datingRadiusRow{margin:4px 0 14px}