/* ============================================================
   GLOW — COMPONENT LIBRARY
   Every screen composes these. No screen-specific styling.
   ============================================================ */

/* ---------- AppHeader ---------------------------------- */
.app-header{
  height:var(--appbar-h);flex:0 0 auto;
  display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--page-x);background:var(--surface);
}
.app-header__side{width:var(--icon-md);display:flex;align-items:center}
.app-header__side--end{justify-content:flex-end}
.app-header__center{flex:1;display:flex;justify-content:center}
.wordmark{
  display:inline-flex;align-items:center;gap:4px;
  font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text-primary);
}
.wordmark__spark{color:var(--brand);font-size:13px;line-height:1}

/* ---------- LocationSelector --------------------------- */
.location-bar{display:flex;justify-content:center;padding:0 var(--page-x) var(--space-3)}
.location-selector{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:5px 12px;font-size:var(--fs-meta);font-weight:var(--fw-meta);
  color:var(--text-primary);background:var(--surface);
}
.location-selector__pin{width:var(--icon-sm);height:var(--icon-sm);color:var(--brand)}
.location-selector__caret{color:var(--text-muted);font-size:9px}

/* ---------- TabBar (pill) ------------------------------ */
.tabbar{display:flex;gap:var(--space-2);padding:0 var(--page-x) var(--space-3)}
.tabbar__tab{
  padding:6px 14px;border-radius:var(--radius-pill);
  font-size:var(--fs-meta);font-weight:var(--fw-button);color:var(--text-secondary);
}
.tabbar__tab--active{background:var(--brand);color:var(--text-on-brand)}

/* ---------- TabBar (underline) ------------------------- */
.tabs-underline{display:flex;gap:var(--space-6);border-bottom:1px solid var(--border-soft)}
.tabs-underline__tab{
  padding:10px 0;font-size:var(--fs-body);font-weight:var(--fw-meta);
  color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs-underline__tab--active{color:var(--brand);font-weight:var(--fw-button);border-color:var(--brand)}

/* ---------- Segmented (Poll | Question | Photo) -------- */
.segmented{display:flex;gap:var(--space-2)}
.segmented__item{
  padding:7px 16px;border-radius:var(--radius-pill);border:1px solid var(--border);
  font-size:var(--fs-meta);font-weight:var(--fw-button);color:var(--text-secondary);background:var(--surface);
}
.segmented__item--active{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}

/* ---------- Card --------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:var(--space-3);
}
.card + .card{margin-top:var(--space-3)}
.card__row{display:flex;gap:var(--space-3);align-items:flex-start}
.card__body{flex:1;min-width:0}

/* ---------- Badge / Chip ------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-label);font-weight:var(--fw-label);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;
}
.badge--poll{background:var(--brand-soft);color:var(--brand)}
.badge--discussion{background:var(--surface-soft);color:var(--text-secondary);border:1px solid var(--border-soft)}
.badge--featured{background:var(--featured-bg);color:var(--featured-text);border:1px solid var(--featured-line)}
.badge--sponsored{background:var(--sponsored-bg);color:var(--sponsored-text)}
.badge__icon{width:10px;height:10px}

.chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--border);
  font-size:var(--fs-meta);font-weight:var(--fw-meta);color:var(--text-secondary);background:var(--surface);
}
.chip--selected{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}

/* ---------- Buttons ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--fs-button);font-weight:var(--fw-button);
  border-radius:var(--radius-button);padding:12px 16px;width:100%;
}
.btn--primary{background:var(--brand);color:var(--text-on-brand)}
.btn--primary:hover{background:var(--brand-hover)}
.btn--secondary{background:var(--surface);color:var(--text-primary);border:1px solid var(--border)}
.btn--soft{background:var(--brand-soft);color:var(--brand)}
.btn--pill{border-radius:var(--radius-pill)}
.btn--sm{padding:7px 14px;width:auto;font-size:var(--fs-meta)}
.btn--block{width:100%}
.btn__icon{width:var(--icon-sm);height:var(--icon-sm)}
.btn--ghost{color:var(--text-secondary);background:none}
.link-brand{color:var(--brand);font-size:var(--fs-meta);font-weight:var(--fw-button)}

/* ---------- Inputs ------------------------------------- */
.input{
  display:flex;align-items:center;gap:var(--space-2);width:100%;
  border:1px solid var(--border);border-radius:var(--radius-input);
  padding:11px 12px;background:var(--surface);
  font-size:var(--fs-body);color:var(--text-primary);
}
.input::placeholder{color:var(--text-muted)}
.input--area{min-height:64px;align-items:flex-start;line-height:var(--lh-snug);resize:none}
.search-input{position:relative;display:flex;align-items:center}
.search-input__icon{position:absolute;left:12px;width:var(--icon-sm);height:var(--icon-sm);color:var(--text-muted)}
.search-input .input{padding-left:34px}

/* ---------- PollCard / PollOption ---------------------- */
.poll-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.poll-votes{font-size:var(--fs-meta);color:var(--text-muted)}
.poll-question{
  font-size:var(--fs-heading);font-weight:var(--fw-heading);
  line-height:var(--lh-tight);margin:var(--space-3) 0 0;
}
.poll-sub{font-size:var(--fs-meta);color:var(--text-secondary);margin:var(--space-2) 0 0}
.poll-options{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}
.poll-option{
  display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;
  border:1px solid var(--border);border-radius:var(--radius-button);
  padding:12px;font-size:var(--fs-body);background:var(--surface);
}
.poll-option__radio{
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);
  flex:0 0 auto;position:relative;
}
.poll-option--selected{border-color:var(--brand);background:var(--brand-soft)}
.poll-option--selected .poll-option__radio{border-color:var(--brand);border-width:5px}

/* ---------- ResultBar ---------------------------------- */
.results{display:flex;flex-direction:column;gap:var(--space-2)}
.result-bar{
  position:relative;display:flex;align-items:center;gap:var(--space-3);
  border:1px solid var(--border);border-radius:var(--radius-button);
  padding:8px 12px 8px 8px;overflow:hidden;
}
.result-bar__fill{position:absolute;left:0;top:0;bottom:0;background:var(--brand-soft);width:0}
.result-bar > *{position:relative}
.result-bar__thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.result-bar__name{flex:1;min-width:0;text-align:left;font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-bar__pct{font-size:var(--fs-body);font-weight:var(--fw-button);font-variant-numeric:tabular-nums}
.result-bar--mine{border-color:var(--brand)}
.result-bar--mine .result-bar__name{font-weight:var(--fw-button)}

/* ---------- Notice (vote counted) ---------------------- */
.notice{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--success);color:var(--success-text);
  border-radius:var(--radius-button);padding:10px 12px;
  font-size:var(--fs-body);font-weight:var(--fw-button);
}
.notice__icon{width:var(--icon-sm);height:var(--icon-sm)}

/* ---------- Avatar ------------------------------------- */
.avatar{border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--surface-soft)}
.avatar--sm{width:var(--avatar-sm);height:var(--avatar-sm)}
.avatar--md{width:var(--avatar-md);height:var(--avatar-md)}
.avatar--lg{width:var(--avatar-lg);height:var(--avatar-lg)}
.avatar-icon{
  width:var(--avatar-md);height:var(--avatar-md);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.avatar-icon--success{background:var(--success);color:var(--success-text)}
.avatar-icon--brand{background:var(--brand-soft);color:var(--brand)}
.avatar-icon svg{width:var(--icon-sm);height:var(--icon-sm)}

/* ---------- ImageCard / thumbs ------------------------- */
.thumb{border-radius:var(--radius-image);object-fit:cover;flex:0 0 auto;background:var(--surface-soft)}
.thumb--portrait{width:72px;height:88px}
.thumb--square{width:56px;height:56px}
.cover{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}

/* ---------- CategoryGrid ------------------------------- */
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4) var(--space-2)}
.category{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}
.category__img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.category__label{font-size:var(--fs-meta);font-weight:var(--fw-meta);line-height:var(--lh-tight);color:var(--text-primary)}

/* ---------- BusinessCard / actions --------------------- */
.business-row{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0}
.business-row + .business-row{border-top:1px solid var(--border-soft)}
.business-name{font-size:var(--fs-card-title);font-weight:var(--fw-card-title);line-height:var(--lh-tight)}
.business-meta{font-size:var(--fs-meta);color:var(--text-secondary);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.rating{display:inline-flex;align-items:center;gap:3px;font-weight:var(--fw-meta);color:var(--text-primary)}
.rating__star{color:var(--star);width:12px;height:12px}
.business-actions{display:flex;gap:var(--space-2)}
.business-actions .btn{flex:1}

/* ---------- Section heading ---------------------------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin:var(--space-4) 0 var(--space-2)}
.section-title{font-size:var(--fs-card-title);font-weight:var(--fw-card-title)}
.page-title{font-size:var(--fs-page-title);font-weight:var(--fw-page-title);line-height:var(--lh-tight)}
.heading{font-size:var(--fs-heading);font-weight:var(--fw-heading);line-height:var(--lh-tight)}
.meta{font-size:var(--fs-meta);color:var(--text-muted)}
.label{font-size:var(--fs-label);font-weight:var(--fw-label);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}

/* ---------- NotificationRow ---------------------------- */
.notification{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) 0}
.notification + .notification{border-top:1px solid var(--border-soft)}
.notification__text{flex:1;font-size:var(--fs-body);line-height:var(--lh-snug)}
.notification__time{font-size:var(--fs-meta);color:var(--text-muted);margin-top:2px}
.notification--unread .notification__text{font-weight:var(--fw-meta)}

/* ---------- Comment ------------------------------------ */
.comment{display:flex;gap:var(--space-3);padding:var(--space-3) 0}
.comment__body{flex:1}
.comment__text{font-size:var(--fs-body);line-height:var(--lh-snug);margin:0}
.comment__byline{font-size:var(--fs-meta);color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:var(--space-2)}
.comment__like{display:inline-flex;align-items:center;gap:4px;color:var(--brand)}
.comment__like svg{width:12px;height:12px}

/* ---------- List rows ---------------------------------- */
.list-row{display:flex;align-items:center;gap:var(--space-3);padding:14px 0;width:100%;text-align:left}
.list-row + .list-row{border-top:1px solid var(--border-soft)}
.list-row__label{flex:1;font-size:var(--fs-body)}
.list-row__icon{width:var(--icon-md);height:var(--icon-md);color:var(--brand)}
.list-row__chev{width:var(--icon-sm);height:var(--icon-sm);color:var(--text-muted)}
.check-circle{
  width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent;
}
.check-circle--on{background:var(--brand);border-color:var(--brand);color:var(--text-on-brand)}
.check-circle svg{width:11px;height:11px}

/* ---------- Stats -------------------------------------- */
.stats{display:flex;text-align:center;padding:var(--space-4) 0;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.stats > div{flex:1;min-width:0}
.stats__value{display:block;font-size:var(--fs-card-title);font-weight:var(--fw-card-title)}
.stats__label{font-size:var(--fs-meta);color:var(--text-muted)}

/* ---------- Hero pin (area selection) ------------------ */
.hero-pin{display:inline-flex;color:var(--brand)}
.hero-pin__icon{width:34px;height:34px}

/* ---------- Benefit row (signup) ----------------------- */
.benefit{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-body)}
.benefit__icon{width:18px;height:18px;color:var(--brand);flex:0 0 auto}

/* ---------- Toggle ------------------------------------- */
.toggle{width:40px;height:23px;border-radius:var(--radius-pill);background:var(--border);position:relative;flex:0 0 auto}
.toggle::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;background:var(--surface);top:2px;left:2px;box-shadow:var(--shadow-card)}
.toggle--on{background:var(--brand)}
.toggle--on::after{left:auto;right:2px}

/* ---------- BottomNavigation --------------------------- */
.bottom-nav{
  height:var(--nav-h);flex:0 0 auto;display:flex;align-items:center;justify-content:space-around;
  border-top:1px solid var(--border-soft);background:var(--surface);
}
.bottom-nav__item{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-muted);font-size:var(--fs-label);font-weight:var(--fw-meta)}
.bottom-nav__item svg{width:var(--icon-nav);height:var(--icon-nav)}
.bottom-nav__item--active{color:var(--brand)}
.bottom-nav__add{width:36px;height:36px;border-radius:50%;background:var(--brand);color:var(--text-on-brand);display:flex;align-items:center;justify-content:center}
.bottom-nav__add svg{width:18px;height:18px}
.bottom-nav__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brand);margin:-14px 0 0 14px}

/* ---------- EmptyState --------------------------------- */
.empty-state{text-align:center;padding:var(--space-8) var(--page-x);color:var(--text-secondary)}
.empty-state__title{font-size:var(--fs-card-title);font-weight:var(--fw-card-title);color:var(--text-primary);margin-bottom:var(--space-2)}

/* ---------- additions for the live directory (tokens only) ---------- */
.monogram{display:flex;align-items:center;justify-content:center;background:var(--brand-soft);
  color:var(--brand);font-size:var(--fs-heading);font-weight:var(--fw-heading)}
.muted{color:var(--text-muted)}
.btn.is-disabled{opacity:.4;pointer-events:none}
.result-count{font-size:var(--fs-meta);color:var(--text-muted);padding:0 0 var(--space-2)}
.attribution{font-size:var(--fs-label);color:var(--text-muted);padding:var(--space-4) 0 var(--space-2);text-align:center}
.biz-list .business-row:first-child{border-top:0}
.load-more{margin:var(--space-4) 0 var(--space-6)}
.zero-state{padding:var(--space-6) 0;text-align:center;color:var(--text-secondary);font-size:var(--fs-body)}

/* ---------- community additions (tokens only) ---------- */
.thread{margin-top:var(--space-2)}
.comment--reply{margin-left:var(--space-6);border-left:2px solid var(--border-soft);padding-left:var(--space-3)}
.comment__like{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted)}
.comment__like svg{width:12px;height:12px}
.notification--unread{background:var(--brand-soft);border-radius:var(--radius-card);padding-left:var(--space-2);padding-right:var(--space-2)}

/* ============================================================================
   V2 FEED
   Built for the loop: a big image that stops the scroll, one tap to answer, the
   truth revealed in place, and the next card already visible underneath.
   ========================================================================== */

.feed { padding: 0 0 var(--space-6); }

/* --- header ------------------------------------------------------------- */
.v2head { position: sticky; top: 0; z-index: 20; background: #fff;
          border-bottom: 1px solid var(--border-soft); }
.v2head__top { display: flex; align-items: flex-start; gap: var(--space-3);
               padding: 10px var(--space-4) 8px; }
.v2head__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.v2head__mark { font-size: 21px; font-weight: 700; letter-spacing: -0.03em;
                color: var(--text-primary); line-height: 1.05; }
.v2head__mark span { color: var(--brand); }
.v2head__area { display: inline-flex; align-items: center; gap: 3px;
                font-size: 12px; font-weight: 500; color: var(--text-secondary);
                background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.2; }
.v2head__spacer { margin-left: auto; }
.v2head__bell { position: relative; background: none; border: 0; padding: 6px; cursor: pointer;
                color: var(--text-primary); line-height: 0; }
.v2head__dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px;
               border-radius: 50%; background: var(--brand); }
.v2tabs { display: flex; justify-content: center; gap: var(--space-2);
           padding: 0 var(--space-4) 8px; }
.v2tab { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
         font-family: var(--font); font-size: 13px; font-weight: 600;
         letter-spacing: 0.02em; padding: 7px 16px; border-radius: var(--radius-pill);
         border: 1px solid transparent; background: none; color: var(--text-muted); }
.v2tab--on { background: var(--text-primary); color: #fff; }
.v2tab__ico { font-size: 13px; }

/* --- topic chips -------------------------------------------------------- */
.chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
         padding: var(--space-3) var(--space-4); -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
        font-family: var(--font); font-size: 13px; font-weight: 600; padding: 7px 13px 7px 9px;
        border-radius: var(--radius-pill); border: 1px solid var(--border);
        background: #fff; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.chip--on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.chip__ico { font-size: 15px; line-height: 1; }

/* --- card --------------------------------------------------------------- */
.fcard { padding: var(--space-4) var(--space-4) var(--space-3);
        border-bottom: 8px solid #F7F7F8; }
.fcard__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.series-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
                color: var(--brand); text-transform: uppercase; }
.series-badge__mark { font-size: 12px; }
.fcard__topic { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.fcard__q { margin: 0 0 var(--space-3); font-size: 19px; line-height: 1.25; font-weight: 700;
           letter-spacing: -0.02em; color: var(--text-primary); text-wrap: balance; }


/* --- media -------------------------------------------------------------- */
.frame { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card);
         width: 100%; }
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame__label { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 600;
                color: #fff; background: rgba(17,17,17,.6); backdrop-filter: blur(4px);
                padding: 4px 9px; border-radius: var(--radius-pill); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pair--static .frame { border-radius: var(--radius-card); }
.pair__side { padding: 0; border: 0; background: none; cursor: pointer; position: relative;
              border-radius: var(--radius-card); overflow: hidden;
              transition: transform .12s ease; }
.pair__side:active { transform: scale(.985); }
.pair__side[disabled] { cursor: default; }
.pair__side--done .frame { box-shadow: inset 0 0 0 2px var(--border-soft); }
.pair__side--mine .frame { box-shadow: inset 0 0 0 3px var(--brand); }
.pair__side--done:not(.pair__side--mine) .frame img { opacity: .45; }
/* after answering the label replaces the action: the result, not a dead button */
.pick--result { background: rgba(255,255,255,.94); color: var(--text-muted);
                font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 8px 0;
                box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.pick--won { background: var(--brand); color: #fff; border-color: var(--brand); }
/* the action sits on the image, large and unmistakable, so no instruction line is needed */
.pick { position: absolute; left: 10px; right: 10px; bottom: 10px; display: block;
        padding: 11px 0; text-align: center; border-radius: var(--radius-button);
        font-size: 14px; font-weight: 700; letter-spacing: 0.08em;
        background: rgba(255,255,255,.94); color: var(--text-primary);
        border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(6px);
        box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.pair__side--mine .pick { background: var(--brand); color: #fff; border-color: var(--brand); }
.pick__what { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 600;
        color: #fff; background: rgba(17,17,17,.55); backdrop-filter: blur(4px);
        padding: 4px 9px; border-radius: var(--radius-pill); max-width: calc(100% - 20px);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- choices ------------------------------------------------------------ */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.choice { flex: 1 1 calc(50% - var(--space-2)); min-width: 0; font-family: var(--font);
          font-size: 15px; font-weight: 700; padding: 15px 14px; cursor: pointer;
          border: 1.5px solid var(--brand-soft); border-radius: var(--radius-button);
          background: var(--brand-soft); color: #A8134F; text-align: center;
          transition: background .12s ease, border-color .12s ease, color .12s ease; }
.choices--ladder .choice { flex: 1 1 calc(50% - var(--space-2)); }
.choice:active { border-color: var(--brand); }
.choice--mine { border-color: var(--brand); background: var(--brand); color: #fff; }
.choice[disabled] { cursor: default; }
.choice[disabled]:not(.choice--mine) { background: #FAFAFA; border-color: var(--border-soft);
          color: var(--text-muted); }

/* --- reveal ------------------------------------------------------------- */
.reveal { margin-top: var(--space-3); }
.reveal__headline { margin: 0 0 var(--space-2); font-size: 15px; font-weight: 700;
                    color: var(--text-primary); }
.reveal__sub { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.reveal__n { color: var(--text-muted); }
.reveal--early { background: var(--brand-soft); border-radius: var(--radius-card);
                 padding: var(--space-3) var(--space-4); }
.reveal--early .reveal__headline { color: var(--brand); }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bar { display: grid; grid-template-columns: minmax(0,1fr) 92px 34px; align-items: center; gap: var(--space-2); }
.bar__label { font-size: 13px; color: var(--text-secondary); overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.bar--mine .bar__label { color: var(--text-primary); font-weight: 600; }
.bar__track { height: 7px; border-radius: var(--radius-pill); background: var(--border-soft); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: var(--radius-pill);
             background: var(--border); transition: width .45s cubic-bezier(.2,.7,.3,1); }
.bar--mine .bar__fill { background: var(--brand); }
.bar__pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; }
.bar--mine .bar__pct { color: var(--text-primary); font-weight: 600; }

/* --- commerce ----------------------------------------------------------- */
.shop { display: block; margin-top: var(--space-3); text-align: center; text-decoration: none;
        font-size: 14px; font-weight: 600; padding: 12px; border-radius: var(--radius-button);
        background: var(--text-primary); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .bar__fill { transition: none; }
  .pair__side:active { transform: none; }
}

/* ============================================================================
   LOCAL — conversational, dense, fast. Deliberately a different shape from the
   image-led For You card so the two tabs never feel like one feed twice.
   ========================================================================== */
.local { padding-bottom: var(--space-6); }
.local__intro { padding: var(--space-3) var(--space-4) 0; font-size: 13px; color: var(--text-muted); }

.askbar { display: flex; align-items: center; gap: var(--space-2); width: calc(100% - var(--space-4) * 2);
          margin: var(--space-3) var(--space-4); padding: 12px 14px; cursor: pointer;
          font-family: var(--font); font-size: 14px; color: var(--text-muted); text-align: left;
          background: #FAFAFA; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.askbar__mark { color: var(--brand); font-size: 13px; }

.lrow { padding: var(--space-4); border-bottom: 8px solid #F7F7F8; }
.lrow__top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 9px; }
.lrow__by { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-left: auto; }
.lrow__glow { color: var(--brand); font-weight: 600; }
.lrow__name { color: var(--text-secondary); font-weight: 500; }
.lrow__name--anon { color: var(--text-muted); font-style: italic; }
.lrow__when { color: var(--text-muted); }
.lrow__q { display: block; font-size: 18px; font-weight: 700; line-height: 1.3;
           letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none;
           text-wrap: balance; }

/* flair: the category badge that lets a text card interrupt an image feed */
.flair { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
         letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand);
         padding-bottom: 3px; border-bottom: 2px solid var(--brand); }
.flair--soft { color: var(--text-secondary); border-bottom-color: var(--brand-soft);
               letter-spacing: 0.05em; }
.lrow__q:hover { color: var(--brand); }
.lrow__body { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.lrow__answers { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.btags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.btag { font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: var(--radius-pill);
        background: var(--brand-soft); color: var(--brand); text-decoration: none;
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.fcard__foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.vote { display: inline-flex; align-items: center; gap: 2px; padding: 2px;
         border: 1px solid var(--border); border-radius: var(--radius-pill); background: #fff; }
.vote__btn { font-family: var(--font); font-size: 13px; line-height: 1; cursor: pointer;
             padding: 7px 10px; border: 0; background: none; color: var(--text-muted);
             border-radius: var(--radius-pill); }
.vote__btn:active { background: var(--brand-soft); }
.vote__btn--on { color: var(--brand); background: var(--brand-soft); }
.vote__n { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600;
           font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.vote__n--pos { color: var(--brand); }
.vote__n--neg { color: var(--text-muted); }

.ccta { display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
        padding: 9px 14px; border-radius: var(--radius-pill); text-decoration: none;
        background: #FAFAFA; border: 1px solid var(--border-soft);
        font-size: 13px; color: var(--text-muted); }
.ccta:hover { border-color: var(--border); color: var(--text-secondary); }
.ccta__ico { font-size: 13px; }

/* ---- Places ---- */
.places__lede { padding: var(--space-4) var(--space-4) 0; }
.places__lede h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.places__lede p { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); }
.pcats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
         padding: 0 var(--space-4); }
.pcat { display: flex; align-items: center; gap: 10px; padding: 12px; text-decoration: none;
        border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; }
.pcat__n { display: block; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pcat__t { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.pcat__dot { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.psec { margin-top: var(--space-6); }
.psec__h { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); }
.psec__h h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
              text-transform: uppercase; color: var(--text-muted); }
.psec__h span { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* ---- Create: anonymity + business tagging ---- */
.anon { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-4);
        padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card);
        cursor: pointer; }
.anon input { margin: 2px 0 0; accent-color: var(--brand); width: 17px; height: 17px; flex: 0 0 auto; }
.anon strong { display: block; font-size: 14px; font-weight: 600; }
.anon__sub { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.bsearch { margin-top: var(--space-2); border: 1px solid var(--border-soft);
           border-radius: var(--radius-card); overflow: hidden; }
.bsearch__row { display: block; width: 100%; text-align: left; padding: 10px 12px; cursor: pointer;
                background: #fff; border: 0; border-bottom: 1px solid var(--border-soft);
                font-family: var(--font); }
.bsearch__row:last-child { border-bottom: 0; }
.bsearch__row:hover { background: var(--brand-soft); }
.bsearch__n { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.bsearch__l { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.bsearch__none { margin: 0; padding: 12px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* ---- Profile + Saved ---- */
.phero { padding: var(--space-4) var(--space-4) var(--space-4);
         background: linear-gradient(180deg, var(--brand-soft) 0%, #fff 100%);
         border-bottom: 1px solid var(--border-soft); }
.phero__row { display: flex; align-items: center; gap: var(--space-4); }
.phero__av { width: 64px; height: 64px; font-size: 24px; flex: 0 0 auto; }
.phero__id { min-width: 0; }
.phero__id h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phero__id p { margin: 3px 0 0; font-size: 13px; color: var(--text-secondary); }
.phero__act { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.pstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
          margin-top: var(--space-4); }
.pstat { text-align: center; padding: 10px 4px; background: #fff;
         border: 1px solid var(--border-soft); border-radius: var(--radius-card); }
.pstat b { display: block; font-size: 17px; font-weight: 700;
           font-variant-numeric: tabular-nums; color: var(--text-primary); }
.pstat span { display: block; margin-top: 1px; font-size: 11px; color: var(--text-muted); }
.chips--wrap { flex-wrap: wrap; overflow: visible; padding: var(--space-2) 0 0; }
.chips--wrap .chip { text-decoration: none; }