/* ============================================================================
   GLOW V2 — the consumer visual system.

   Thesis: the CHROME is quiet, the CONTENT is loud. Glow pink is an accent that
   marks what you can act on, not a wash over the whole app. Ink-black does the
   heavy lifting; the images do the rest.

   This file is additive and loads after components.css, so V1 admin surfaces
   keep working while every consumer surface is restyled.
   ========================================================================== */

:root {
  /* --- ink & paper: the app is not white, it is warm off-white ------------ */
  --ink:          #0B0B0F;
  --ink-2:        #3A3A44;
  --ink-3:        #74747F;
  --paper:        #FFFFFF;
  --paper-2:      #FAF8F9;   /* faint tint for inputs and rails, never a page background */
  --line:         #EDE9EB;
  --line-2:       #E3DDE0;

  /* --- accent: used sparingly, and always to mean "act here" -------------- */
  --hot:          #F72572;
  --hot-ink:      #F72572;   /* pink text stays pink; the maroon read as bruised */
  --hot-wash:     #FFF3F7;
  --hot-line:     #F7D7E4;

  /* --- format personalities: each franchise owns a hue -------------------- */
  --f-court:      #7C3AED;  --f-court-wash: #F3EDFF;
  --f-pay:        #0E9F6E;  --f-pay-wash:   #E6F7F1;
  --f-decide:     #FF2D6F;  --f-decide-wash:#FFEEF4;
  --f-before:     #E8590C;  --f-before-wash:#FFF0E6;
  --f-hype:       #D6336C;  --f-hype-wash:  #FFEDF3;
  --f-talk:       #1C7ED6;  --f-talk-wash:  #E7F2FD;

  /* --- shape: flatter and squarer than V1, which was all soft pills ------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* --- depth: one offset shadow language, not a blur soup ----------------- */
  --lift:       0 8px 24px -14px rgba(11,11,15,.22);

  /* --- type -------------------------------------------------------------- */
  /* Inter throughout the product. The serif is kept for the wordmark only, because that
     is the logo — a display serif reads editorial on a marketing page and reads wrong in
     an interface, which is exactly how it read here.
       post titles  600–700
       names        600
       body         400
       nav / tabs   500–600  */
  --display:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wordmark: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --mono:     'Inter', system-ui, sans-serif;
  --fs-display: 24px;
  --fs-post:    19px;
  --fs-lead:    15px;
}

/* ============================ chrome ==================================== */

.app { background: var(--paper); }
.app__scroll { background: var(--paper); }

/* --- header: compact, sticky, quiet ------------------------------------- */
.v2head { background: var(--paper); border-bottom: 1px solid var(--line); }
.v2head__top { padding: 10px 16px 8px; }
.v2head__brand { gap: 5px; }          /* the location sits clear of the wordmark */
.v2head__mark { display: flex; align-items: flex-start; gap: 2px;
                font-family: var(--wordmark); font-size: 28px; font-weight: 400;
                letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.v2head__mark span { color: var(--hot); font-size: 15px; line-height: 1;
                     transform: translateY(1px); }
.v2head__area { display: inline-flex; align-items: center; gap: 4px;
                font-size: 12.5px; font-weight: 500; color: var(--ink-3);
                letter-spacing: -0.01em; line-height: 1; }
.v2head__area:active { color: var(--ink); }
.v2head__caret { width: 15px; height: 15px; flex: 0 0 auto; }
.v2head__bell { color: var(--ink); padding: 8px; margin: -8px 0; }
.v2head__acts { display: flex; align-items: center; gap: 2px; margin-right: -6px; }
.v2head__dot { background: var(--hot); box-shadow: 0 0 0 2px var(--paper); }

/* --- HOT / NEW: a real segmented control, both halves obviously live ----- */
/* Deliberately a different species from the category chips below: serif, underlined,
   no pill. The sort is a section heading; the categories are filters. */
.v2tabs { justify-content: center; padding: 4px 16px 0; gap: 0; }
.seg { display: inline-flex; gap: 24px; border: 0; background: none; padding: 0; }
.seg__btn { display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
            font-family: var(--font); font-size: 15px; font-weight: 600;
            letter-spacing: -0.01em; padding: 2px 2px 10px; border: 0; border-radius: 0;
            background: none; color: var(--ink-3); position: relative;
            transition: color .18s ease; }
.seg__btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
                   height: 2px; border-radius: 2px; background: transparent;
                   transition: background .18s ease; }
.seg__btn--on { color: var(--ink); }
.seg__btn--on::after { background: var(--hot); }
.seg__ico { font-size: 13px; line-height: 1; opacity: .55; transition: opacity .18s ease; }
.seg__btn--on .seg__ico { opacity: 1; }

/* --- category strip: chunky, tactile, scrollable ------------------------ */
.chips { padding: 12px 16px 14px; gap: 7px; background: var(--paper);
         border-bottom: 1px solid var(--line); max-width: 100%; }
.chip { gap: 6px; padding: 7px 13px 7px 10px; border-radius: 999px;
        border: 1px solid var(--line-2); background: var(--paper);
        font-size: 13px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-2);
        transition: transform .1s ease, background .14s ease, border-color .14s ease,
                    color .14s ease; }
.chip:active { transform: scale(.96); }
.chip--on { background: var(--hot-wash); border-color: var(--hot); color: var(--hot);
            font-weight: 600; }
.chip__ico { font-size: 14px; }

/* --- ask bar ------------------------------------------------------------ */
.askbar { width: auto; margin: 14px 14px 0; padding: 13px 18px; border-radius: 999px;
          background: var(--paper); border: 1px solid var(--line-2);
          color: var(--ink-3); font-size: 14px; font-weight: 400; }
.askbar__mark { color: var(--hot); }
.askbar:active { transform: scale(.99); }

/* ============================ posts ===================================== */

/* Every post sits on its own sheet of paper, floating on the grey gutter.
   That gutter — not a hairline divider — is what separates one post from the next. */
/* minmax(0,1fr) and min-width:0: grid items default to min-content, and a single
   nowrap business chip is enough to push the whole feed wider than the phone. */
.feed { padding: 12px 0 100px; background: var(--paper);
        display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fcard, .lrow { min-width: 0; background: var(--paper); border: 1px solid var(--line);
                border-radius: var(--r-md); padding: 16px 15px 14px; margin: 0 14px; }

/* --- format flair: the personality carrier ------------------------------ */
.flair { display: inline-flex; align-items: center; gap: 5px; padding: 0;
         border: 0; border-radius: 0; font-family: var(--font);
         font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
         background: none; color: var(--hot); }
.flair--soft { background: none; color: var(--ink-3); }
.flair[data-f="BEAUTY_COURT"]      { background: var(--paper); color: var(--f-court); }
.flair[data-f="WOULD_YOU_PAY"]     { background: var(--paper); color: var(--f-pay); }
.flair[data-f="VISUAL_AB"]         { background: var(--paper); color: var(--f-decide); }
.flair[data-f="TRANSFORMATION"]    { background: var(--paper); color: var(--f-before); }
.flair[data-f="WORTH_THE_HYPE"]    { background: var(--paper); color: var(--f-hype); }
.flair[data-f="WOULD_YOU_WEAR"]    { background: var(--paper); color: var(--f-decide); }
.flair[data-f="WOULD_YOU_TRY"]     { background: var(--paper); color: var(--f-talk); }

.fcard__head, .lrow__top { margin-bottom: 9px; gap: 8px; }
.fcard__topic, .lrow__when { font-family: var(--font); font-size: 11px; font-weight: 500;
                             color: var(--ink-3); letter-spacing: 0.02em; }

/* --- the question: this is the loudest text on the screen --------------- */
.fcard__q, .lrow__q {
  font-family: var(--display); font-size: var(--fs-post); font-weight: 700;
  line-height: 1.3; letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 12px; text-wrap: balance; text-decoration: none; display: block;
}
.lrow__q:hover { color: var(--ink); }
.lrow__body { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: var(--ink-2);
              margin: -4px 0 0; }

/* --- imagery: edge to edge inside the sheet, never boxed in a box ------- */
.frame { border-radius: var(--r-md); background: var(--paper-2); }
.pair { gap: 8px; }

/* ====================== THIS / THAT: the signature ====================== */

.pair__side { border-radius: var(--r-md); overflow: visible; }
.pair__side .frame { border-radius: var(--r-md); }
/* The whole bottom of the image IS the button: one confident band, no floating pill and
   no grey. Tapping brightens it rather than moving it. */
.pick {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  font-family: var(--font); font-size: 17px; font-weight: 700;
  letter-spacing: 0.06em; padding: 15px 0; border-radius: 0;
  background: rgba(255,255,255,.93); color: var(--ink);
  border: 0; box-shadow: none; text-align: center; line-height: 1;
  backdrop-filter: blur(8px);
  transition: background .14s ease, color .14s ease;
}
.pair__side:active .pick { background: var(--hot); color: #fff; }
.pair { margin-bottom: 0; }
/* .pick__what is gone entirely: the headline, the images and THIS/THAT already say it,
   and the choice label survives on the button's aria-label for assistive tech. */

.pair__side--mine .pick { background: var(--hot); color: #fff; }
.pair__side--done .frame { box-shadow: none; }
.pair__side--mine .frame { box-shadow: 0 0 0 3px var(--hot); }
.pair__side--done:not(.pair__side--mine) .frame img { opacity: .38; filter: grayscale(.4); }
.pick--result { font-family: var(--font); font-size: 13px; font-weight: 500;
                letter-spacing: 0; padding: 11px 0; }
.pick--result:not(.pick--won) { background: rgba(255,255,255,.9); color: var(--ink-3); }
.pick--won { background: var(--hot); color: #fff; }

/* ====================== WOULD YOU PAY ================================== */

.choices { gap: 9px; margin-top: 12px; }
.choice {
  flex: 1 1 calc(50% - 9px); font-family: var(--font);
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  padding: 15px 10px; border-radius: var(--r-sm);
  background: var(--hot-wash); color: var(--hot);
  border: 1px solid var(--hot-line);
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.choice:active { background: var(--hot); border-color: var(--hot); color: #fff; }
.choice--mine { background: var(--hot); color: #fff; border-color: var(--hot); }
.choice[disabled]:not(.choice--mine) { background: var(--paper); border-color: var(--line);
                color: var(--ink-3); }

/* ====================== vote + save + comment row ====================== */

.fcard__foot, .lrow__foot { gap: 8px; margin-top: 12px; align-items: center; min-width: 0; }
.fcard__foot > *, .lrow__foot > * { flex: 0 0 auto; }
.fcard__foot .ccta, .lrow__foot .ccta { flex: 1 1 auto; }

.vote { gap: 0; padding: 0; border: 1px solid var(--line-2); border-radius: 999px;
        background: var(--paper); overflow: hidden; }
.vote__btn { font-size: 15px; line-height: 1; padding: 0 12px; height: 40px;
             color: var(--ink-2); border-radius: 0;
             transition: background .12s ease, color .12s ease, transform .09s ease; }
.vote__btn:active { transform: scale(.88); }
/* Only the arrow takes the colour — filling the whole control read as an error state. */
.vote__btn--on { color: var(--hot); background: none; }
.vote__btn[data-vote="-1"].vote__btn--on { color: var(--ink); background: none; }
.vote__n { min-width: 24px; font-size: 13px; font-weight: 600; color: var(--ink);
           font-variant-numeric: tabular-nums; }
.vote__n--pos { color: var(--hot); }
.vote__n--neg { color: var(--ink-3); }

.ccta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        height: 40px; padding: 0 16px; border-radius: 999px; gap: 8px;
        background: var(--paper); border: 1px solid var(--line-2);
        font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0;
        transition: background .14s ease, color .14s ease, border-color .14s ease; }
.ccta:hover, .ccta:active { background: var(--hot-wash); color: var(--hot); border-color: var(--hot-line); }
.ccta:active { transform: scale(.98); }

.bmk { display: inline-flex; align-items: center; justify-content: center;
       width: 40px; height: 40px; flex: 0 0 auto; cursor: pointer;
       border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper);
       color: var(--ink-2); font-size: 15px; line-height: 1;
       transition: transform .1s ease, background .14s ease, color .14s ease; }
.bmk:active { transform: scale(.88); }
.bmk--on { background: var(--paper); border-color: var(--hot); color: var(--hot); }

/* ====================== reveal ========================================= */

.reveal { margin-top: 14px; }
.reveal--early { background: var(--hot-wash); border-radius: var(--r-md); padding: 14px 16px; }
.reveal__headline { font-family: var(--font); font-size: 15px; font-weight: 700;
                    letter-spacing: -0.01em; color: var(--ink); }
.reveal--early .reveal__headline { color: var(--hot); }
.reveal__sub { font-size: 13.5px; color: var(--ink-2); }
.bar__fill { background: var(--ink-3); }
.bar--mine .bar__fill { background: var(--hot); }
.bar__pct { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ====================== business chips ================================= */

.btag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        background: var(--paper); color: var(--ink-2); font-weight: 400;
        font-size: 12px; padding: 6px 11px; border: 1px solid var(--line-2); }
.btag:active { background: var(--hot-wash); color: var(--hot); border-color: var(--hot-line); }
.btags { gap: 7px; margin-top: 11px; }

/* ====================== bottom nav ===================================== */

.bottom-nav { background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
              border-top: 1px solid var(--line); }
.bottom-nav__brand { display: none; }          /* rail only; the phone header has the mark */
.bottom-nav__item { color: var(--ink-3); font-weight: 500; }
.bottom-nav__item span { font-size: 10px; font-weight: 500; letter-spacing: -0.01em; }
.bottom-nav__item--active { color: var(--ink); }
.bottom-nav__item--active span { font-weight: 600; }
.bottom-nav__add { background: var(--hot); box-shadow: 0 6px 18px -6px var(--hot); }

/* ====================== empty states =================================== */

.zero { margin: 0 14px; padding: 44px 24px; text-align: center;
        background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.zero__art { font-size: 34px; line-height: 1; margin-bottom: 14px; }
.zero__t { font-family: var(--font); font-size: 18px; font-weight: 700;
           letter-spacing: -0.015em; color: var(--ink); margin: 0 0 8px; }
.zero__p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0 auto 18px;
           max-width: 30ch; }

/* ====================== buttons ======================================== */

.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        font-family: var(--font); font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
        padding: 13px 24px; border-radius: 999px; border: 1px solid var(--ink);
        background: var(--ink); color: #fff; cursor: pointer; text-decoration: none;
        transition: opacity .14s ease, transform .09s ease; }
.gbtn:active { transform: scale(.98); opacity: .9; }
.gbtn--hot { background: var(--hot); border-color: var(--hot); }
.gbtn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }

@media (prefers-reduced-motion: reduce) {
  .seg__btn, .chip, .pick, .choice, .vote__btn, .ccta, .bmk, .gbtn { transition: none; }
}

/* ====================== EXPLORE ======================================== */

.xsearch { padding: 12px 16px 4px; background: var(--paper); }
.xsearch__box { display: flex; align-items: center; gap: 10px; padding: 0 16px;
                height: 48px; border-radius: 999px; background: var(--paper-2);
                border: 1.5px solid var(--line); }
.xsearch__ico { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.xsearch__box input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
                      font-family: var(--font); font-size: 15px; font-weight: 600;
                      color: var(--ink); }
.xsearch__box input::placeholder { color: var(--ink-3); font-weight: 500; }

.xsec { margin-top: 22px; min-width: 0; }
.xsec__h { display: flex; align-items: baseline; gap: 10px; padding: 0 16px 11px; }
.xsec__h h2 { margin: 0; font-family: var(--font); font-size: 15px; font-weight: 700;
              letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink-3);
              font-size: 11px; letter-spacing: 0.08em; }
.xsec__h span { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3); }

/* 2 × 4 image-led tiles. Nine equal tiles was the layout accident; eight is a decision. */
.xgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.xtile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
         border-radius: var(--r-md); text-decoration: none; background: var(--paper-2);
         transition: transform .1s ease; }
.xtile:active { transform: scale(.97); }
.xtile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xtile__veil { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(11,11,15,0) 38%, rgba(11,11,15,.72) 100%); }
.xtile__t { position: absolute; left: 11px; right: 11px; bottom: 10px; color: #fff;
            font-family: var(--font); font-size: 14px; font-weight: 600;
            letter-spacing: -0.01em; line-height: 1.2; }
.xtile__n { position: absolute; right: 9px; top: 9px; font-size: 11px; font-weight: 800;
            color: var(--ink); background: rgba(255,255,255,.92); padding: 3px 8px;
            border-radius: 999px; font-variant-numeric: tabular-nums; }
.xmore { display: flex; justify-content: center; padding: 14px 16px 0; }

.xtalk { padding: 0 16px; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
.xtalk__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0;
              background: var(--paper); border-radius: var(--r-md); text-decoration: none; }
.xtalk__av { width: 40px; height: 40px; flex: 0 0 auto; font-size: 15px; }
.xtalk__body { min-width: 0; flex: 1; }
.xtalk__n { display: block; font-size: 14px; font-weight: 800; color: var(--ink);
            letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xtalk__q { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ink-3);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xtalk__chev { width: 18px; height: 18px; color: var(--ink-3); flex: 0 0 auto; }
.xbiz { padding: 0 16px; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
.xbiz > * { min-width: 0; }
.xbiz .card { background: var(--paper); border: 0; border-radius: var(--r-md); }

/* ====================== SAVED ========================================== */

.sgrid { columns: 2; column-gap: 10px; padding: 14px 16px 0; }
.stile { display: block; position: relative; break-inside: avoid; margin: 0 0 10px;
         border-radius: var(--r-md); overflow: hidden; text-decoration: none;
         background: var(--paper); transition: transform .1s ease; }
.stile:active { transform: scale(.97); }
.stile__img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.stile__veil { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(11,11,15,0) 40%, rgba(11,11,15,.78) 100%); }
.stile:not(.stile--text) .stile__t { position: absolute; left: 10px; right: 10px; bottom: 9px;
               color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600;
               letter-spacing: -0.01em; line-height: 1.25; }
.stile--text { padding: 14px; border: 1.5px solid var(--line); }
.stile--text .stile__t { display: block; font-family: var(--font); font-size: 14.5px;
               font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.stile__k { display: inline-block; margin-bottom: 8px; font-size: 10px; font-weight: 800;
            letter-spacing: 0.09em; text-transform: uppercase; color: var(--hot-ink);
            background: var(--hot-wash); padding: 4px 9px; border-radius: 999px; }
.stile__m { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-3); }

/* ====================== PROFILE ======================================== */

.pme { padding: 22px 16px 18px; text-align: center; background: var(--paper);
       border-bottom: 1px solid var(--line); }
.pme__av { width: 76px; height: 76px; margin: 0 auto 12px; font-size: 28px;
           border: 3px solid var(--paper); box-shadow: 0 0 0 3px var(--hot); }
.pme__n { margin: 0; font-family: var(--font); font-size: 21px; font-weight: 700;
          letter-spacing: -0.02em; color: var(--ink); }
.pme__a { margin: 3px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pme__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.pme__tags .chip { text-decoration: none; }
.pme__act { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }

.plist { display: grid; gap: 8px; padding: 14px 16px 0; }
.prow { display: block; padding: 14px 16px; background: var(--paper);
        border-radius: var(--r-md); text-decoration: none; }
.prow__t { display: block; font-family: var(--font); font-size: 15px; font-weight: 600;
           letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.prow__m { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* guest: an invitation, not four zeros */
.pjoin { margin: 16px; padding: 30px 24px; text-align: center; background: var(--paper);
         border-radius: var(--r-xl); }
.pjoin__art { font-size: 38px; line-height: 1; margin-bottom: 12px; }
.pjoin h1 { margin: 0 0 16px; font-family: var(--font); font-size: 23px; font-weight: 700;
            letter-spacing: -0.02em; color: var(--ink); }
.pjoin__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.pjoin__list li { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.pjoin__list li::before { content: '✦'; color: var(--hot); margin-right: 8px; font-weight: 800; }
.pjoin__note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); }


/* A single nowrap child inside a grid or flex column is enough to widen the whole phone,
   because both default to min-content. This is the backstop. */
.app__scroll, .app__scroll > *, .feed, .sgrid, .plist, .xgrid { max-width: 100%; }
.app__scroll { overflow-x: hidden; }

/* ====================== CREATE ========================================= */

.mk { padding: 18px 16px 0; }
.mk__h { margin: 0 0 4px; font-family: var(--font); font-size: 24px; font-weight: 700;
         letter-spacing: -0.02em; color: var(--ink); }
.mk__sub { margin: 0 0 20px; font-size: 14px; color: var(--ink-3); }
.mk__label { margin: 20px 0 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
             text-transform: uppercase; color: var(--ink-3); }
.mk__q { width: 100%; box-sizing: border-box; border: 1px solid var(--line-2);
         background: var(--paper); border-radius: var(--r-sm); padding: 15px;
         outline: none; font-family: var(--font); font-size: 16px; font-weight: 600;
         letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); }
.mk__q::placeholder { color: var(--ink-3); font-weight: 700; }
.mk__body { width: 100%; box-sizing: border-box; border: 0; background: var(--paper);
            border-radius: var(--r-md); padding: 14px 16px; margin-top: 8px; outline: none;
            font-family: var(--font); font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
            resize: vertical; }
.mk__opts { display: grid; gap: 8px; }
.mk__opts input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line);
                  background: var(--paper); border-radius: var(--r-sm); padding: 13px 14px;
                  outline: none; font-family: var(--font); font-size: 14.5px; font-weight: 700;
                  color: var(--ink); }
.mk__note { margin: 9px 0 0; font-size: 12px; color: var(--ink-3); }
.mk__anon { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding: 14px;
            background: var(--paper); border-radius: var(--r-md); cursor: pointer; }
.mk__anon input { margin: 1px 0 0; width: 19px; height: 19px; accent-color: var(--hot); flex: 0 0 auto; }
.mk__anon strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink);
                   letter-spacing: -0.02em; }
.mk__anon span span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45;
                      color: var(--ink-3); }
.mk__go { margin-top: 22px; display: flex; }
.mk__go .gbtn { flex: 1; }
.bsearch { border: 0; background: var(--paper); border-radius: var(--r-md); overflow: hidden;
           margin-top: 8px; }
.bsearch__row { border-bottom: 1px solid var(--line); }
.bsearch__row:active { background: var(--hot-wash); }

/* ====================== DETAIL SCREENS ================================= */

.dsheet { margin: 10px; padding: 16px 14px 14px; background: var(--paper);
          border-radius: var(--r-lg); }
.dsheet__q { margin: 10px 0 12px; font-family: var(--font); font-size: 21px; font-weight: 700;
             letter-spacing: -0.02em; line-height: 1.28; color: var(--ink); text-wrap: balance; }
.dsheet__by { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.dsec { margin: 18px 10px 0; }
.dsec__h { margin: 0 0 10px; padding: 0 4px; font-family: var(--display); font-size: 16px;
           font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }

/* detail screens inherit the feed's voice: display headline, flair, same action row */
.page .dsheet__q { margin: 8px 0 12px; }
.poll-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.poll-votes { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.dsec__h { font-family: var(--font); font-size: 15px; font-weight: 700;
           letter-spacing: -0.01em; color: var(--ink); }

/* ====================== screen headings ================================ */
.scrn__h { margin: 0; padding: 18px 16px 10px; font-family: var(--font);
           font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.joinmark { margin: 0; font-family: var(--wordmark); font-size: 36px; font-weight: 400;
            letter-spacing: -0.03em; color: var(--ink); }
.joinmark span { color: var(--hot); font-size: 20px; vertical-align: super; }

/* ====================== BUSINESS DETAIL ================================ */

.bhead { padding: 18px 16px 20px; border-bottom: 1px solid var(--line); }
.bhead__row { display: flex; align-items: flex-start; gap: 12px; }
.bhead__n { flex: 1; min-width: 0; margin: 0; font-family: var(--font); font-size: 23px;
            font-weight: 700; letter-spacing: -0.02em; line-height: 1.22; color: var(--ink); }
.bsave { flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center;
         justify-content: center; cursor: pointer; border: 1px solid var(--line-2);
         border-radius: 999px; background: var(--paper); color: var(--ink-2);
         transition: color .14s ease, border-color .14s ease; }
.bsave svg { width: 19px; height: 19px; }
.bsave--on { color: var(--hot); border-color: var(--hot); }
.bsave--on svg { fill: currentColor; }
.bhead__m { margin: 9px 0 0; font-size: 13px; color: var(--ink-3); display: flex;
            align-items: center; gap: 6px; flex-wrap: wrap; }
.bhead__sep { color: var(--line-2); }
.brate { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--ink); }
.brate__s { width: 14px; height: 14px; color: #F5B301; }

/* one primary action, then quiet secondaries — not five identical pills */
.bprimary { display: flex; align-items: center; justify-content: center; gap: 9px;
            margin-top: 16px; padding: 14px; border-radius: var(--r-sm);
            background: var(--ink); color: #fff; text-decoration: none;
            font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.bprimary:active { opacity: .9; }
.bacts { display: flex; gap: 8px; margin-top: 8px; }
.bact { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 11px 6px; border: 1px solid var(--line); border-radius: var(--r-sm);
        background: var(--paper); color: var(--ink-2); text-decoration: none;
        font-size: 11.5px; font-weight: 500; }
.bact:active { background: var(--paper-2); }
.bact__ico { width: 17px; height: 17px; }

.bsec { padding: 20px 16px 0; }
.bsec__h { margin: 0 0 11px; font-family: var(--font); font-size: 11px; font-weight: 600;
           letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* hours read as a table, with today pulled forward */
.bhours { margin: 0; display: grid; gap: 0; }
.bhours__r { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0;
             border-bottom: 1px solid var(--line); font-size: 14px; }
.bhours__r:last-child { border-bottom: 0; }
.bhours__r dt { color: var(--ink-3); font-weight: 400; }
.bhours__r dd { margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bhours__r--today dt, .bhours__r--today dd { color: var(--ink); font-weight: 500; }
.bhours__r--today dt span { margin-left: 8px; font-size: 10px; font-weight: 600;
             letter-spacing: 0.06em; text-transform: uppercase; color: var(--hot); }

/* services are a list of facts, not a wall of pills */
.bsvc { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.bsvc li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.bsvc li:last-child { border-bottom: 0; }

.bment { display: grid; gap: 0; }
.bment__r { display: flex; align-items: center; gap: 12px; padding: 12px 0;
            border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 14px; }
.bment__r:last-child { border-bottom: 0; }
.bment__r span { flex: 1; min-width: 0; }
.bment__c { width: 16px; height: 16px; color: var(--ink-3); flex: 0 0 auto; }
.baddr { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.battrib { margin: 26px 16px 0; font-size: 11px; font-weight: 400;
           color: var(--ink-3); }

/* poll results: the bar is the identity, the count is the fact */
.result-bar__n { font-size: 12px; color: var(--ink-3); margin-left: auto; padding-right: 10px;
                 font-variant-numeric: tabular-nums; }

/* ====================== avatar step ==================================== */
.avup { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.avup__img, .avup__ph { width: 116px; height: 116px; border-radius: 999px; object-fit: cover;
                        font-size: 40px; }
.avup__ph { box-shadow: 0 0 0 1px var(--line-2); }
.avup__pick { cursor: pointer; }
.pme__av { width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 999px;
           object-fit: cover; display: block; box-shadow: 0 0 0 3px var(--hot); }

/* ====================== DESKTOP ======================================== */
/* Not a phone floating in the middle of a monitor: the bottom bar becomes a left rail,
   the feed takes a comfortable reading column, and the grids use the width they have. */
@media (min-width: 900px) {
  /* base.css locks .app to --viewport (390px) for the phone layout. Desktop needs the
     whole window, so the clamp is released here rather than edited there — the phone
     behaviour is the default and stays untouched. */
  .app { max-width: none; width: 100%; }
  .app__scroll { padding-left: 232px; }
  /* margin, not padding: with padding the sticky header still spanned the full width and
     painted straight over the rail's wordmark. It now starts where the rail ends, and the
     rail sits above it regardless. */
  .v2head { margin-left: 232px; padding-left: 0; }
  .bottom-nav { z-index: 40; }

  .bottom-nav {
    position: fixed; left: 0; top: 0; bottom: 0; width: 232px; height: auto;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 26px 16px; background: var(--paper);
    border-top: 0; border-right: 1px solid var(--line); backdrop-filter: none;
  }
  .bottom-nav__brand { display: block; font-family: var(--wordmark); font-size: 32px;
    line-height: 1; letter-spacing: -0.03em; color: var(--ink); text-decoration: none;
    padding: 4px 12px 30px; }
  .bottom-nav__brand span { color: var(--hot); font-size: 17px; vertical-align: super; }
  .bottom-nav__item { flex-direction: row; justify-content: flex-start; gap: 13px;
                      padding: 11px 12px; border-radius: 999px; }
  .bottom-nav__item span { font-size: 14.5px; font-weight: 500; }
  .bottom-nav__item--active { background: var(--hot-wash); color: var(--hot); }
  .bottom-nav__item:has(.bottom-nav__add) { order: 9; margin-top: 10px; }
  .bottom-nav__add { width: 100%; height: 46px; border-radius: 999px; }

  .feed, .sgrid, .plist, .zero, .scrn__h,
  .v2tabs, .chips, .askbar, .xsearch, .xsec, .bhead, .bsec, .battrib, .page, .pme, .pjoin {
    max-width: 680px; margin-left: auto; margin-right: auto;
  }
  .fcard, .lrow { margin-left: 0; margin-right: 0; }
  /* The rail carries the wordmark, so the header drops only the mark — NOT the whole
     brand block, which also holds the area switcher. Hiding both left desktop users with
     no way to change area at all. */
  .v2head__top { max-width: 680px; margin: 0 auto; align-items: center; }
  .v2head__mark { display: none; }
  .v2head__area { font-size: 14px; font-weight: 600; color: var(--ink);
                  padding: 7px 14px 7px 12px; border: 1px solid var(--line-2);
                  border-radius: 999px; }
  .v2head__area:hover { border-color: var(--hot); color: var(--hot); }
  .v2head__caret { width: 16px; height: 16px; }
  .xgrid { grid-template-columns: repeat(4, 1fr); }
  .sgrid { columns: 3; }
  .bacts { max-width: 420px; }
}
@media (min-width: 1280px) {
  .feed, .sgrid, .plist, .zero, .scrn__h, .v2tabs, .chips, .askbar,
  .xsearch, .xsec, .bhead, .bsec, .battrib, .page, .pme, .pjoin, .v2head__top {
    max-width: 760px;
  }
}

/* ====================== comments ======================================= */
.csec { margin-top: var(--space-6); }
.cbar { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px;
        border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); }
.cbar__in { flex: 1; min-width: 0; border: 0; outline: none; background: none;
            font-family: var(--font); font-size: 14px; font-weight: 400; color: var(--ink); }
.cbar__in::placeholder { color: var(--ink-3); }
.cbar__go { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 999px;
            background: var(--ink); color: #fff; font-size: 16px; line-height: 1;
            cursor: pointer; transition: background .14s ease, transform .09s ease; }
.cbar__go:active { transform: scale(.92); }
.cbar:focus-within { border-color: var(--hot); }
.cbar:focus-within .cbar__go { background: var(--hot); }
.csec__none { margin: 18px 0 0; font-size: 14px; color: var(--ink-3); text-align: center; }

/* ====================== poll results =================================== */
/* `.result-bar > *{position:relative}` in components.css has the same specificity as
   `.result-bar__fill{position:absolute}` and is declared later, so the fill became an
   in-flow flex item and a 100% bar squeezed the label to zero width. */
.result-bar .result-bar__fill { position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--hot-wash); border-radius: inherit; }
.result-bar { border: 1px solid var(--line); border-radius: var(--r-sm); gap: 10px;
              padding: 13px 14px; }
.result-bar--mine { border-color: var(--hot); }
.result-bar__name { font-size: 14px; font-weight: 400; color: var(--ink); }
.result-bar--mine .result-bar__name { font-weight: 600; }
.result-bar__pct { font-size: 14px; font-weight: 600; color: var(--ink); }
.results { display: grid; gap: 8px; }

/* ====================== inline polls in the feed ======================= */
/* A text poll is answered where it is met, so the detail page is for reading the thread,
   not for tapping one of five options and coming back. */
.popts { display: grid; gap: 7px; margin: 2px 0 2px; }
.popt { width: 100%; text-align: left; cursor: pointer; font-family: var(--font);
        font-size: 14px; font-weight: 500; color: var(--ink); padding: 13px 15px;
        border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper);
        transition: background .14s ease, border-color .14s ease, color .14s ease; }
.popt:active { background: var(--hot-wash); border-color: var(--hot); color: var(--hot); }
.results--inline { margin: 2px 0; }
.results--inline .result-bar { padding: 11px 13px; }

/* numbers line up in a column of their own instead of drifting with the label */
.result-bar__n { margin-left: auto; padding-right: 0; min-width: 62px; text-align: right;
                 font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12.5px; }
.results--inline .result-bar__n { min-width: 34px; }
.result-bar__pct { min-width: 46px; text-align: right; }

/* ====================== vote buttons =================================== */
.votenow { width: 100%; cursor: pointer; font-family: var(--font); font-size: 19px;
           font-weight: 700; letter-spacing: -0.01em; padding: 17px; border: 0;
           border-radius: var(--r-sm); background: var(--hot); color: #fff;
           transition: opacity .14s ease, transform .09s ease; }
.votenow:active { transform: scale(.985); opacity: .92; }
.revote { width: 100%; cursor: pointer; font-family: var(--font); font-size: 14.5px;
          font-weight: 500; padding: 13px; border: 1px solid var(--line-2);
          border-radius: var(--r-sm); background: var(--paper); color: var(--ink-2);
          transition: background .14s ease, color .14s ease, border-color .14s ease; }
.revote:active { background: var(--paper-2); }

/* the send arrow carries the accent */
.cbar__go { background: var(--hot); }
.cbar:focus-within .cbar__go { background: var(--hot); }

/* the comment field takes the width the vote control used to occupy */
.fcard__foot .ccta, .lrow__foot .ccta { flex: 1 1 auto; justify-content: flex-start; }

/* ====================== refinements =================================== */

/* Hot / New: two pills, both obviously live, the selected one filled. The underline
   version left "New" looking switched off. */
.seg { gap: 6px; padding: 3px; background: var(--paper-2); border: 1px solid var(--line);
       border-radius: 999px; }
.seg__btn { padding: 8px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
            color: var(--ink-2); background: transparent; }
.seg__btn::after { display: none; }
.seg__btn--on { background: var(--hot); color: #fff; }
.seg__btn:not(.seg__btn--on):active { background: var(--paper); }

/* The + is the strongest action in the app, so it acts like it: larger than the bar and
   sitting proud of it rather than tucked inside. */
.bottom-nav { overflow: visible; }
.bottom-nav__add { width: 58px; height: 58px; margin-top: -26px;
                   box-shadow: 0 8px 22px -8px var(--hot), 0 0 0 5px var(--paper);
                   display: inline-flex; align-items: center; justify-content: center; }
.bottom-nav__add svg { width: 27px; height: 27px; stroke-width: 2.4; }

/* THIS / THAT carries the same accent as the + button */
.pick { background: var(--hot); color: #fff; backdrop-filter: none; }
.pair__side:active .pick { background: var(--hot-ink); }
.pick--result:not(.pick--won) { background: rgba(255,255,255,.92); color: var(--ink-3); }

/* poll options: a pink hairline so they read as something to tap */
.popt { border-color: var(--hot-line); }
.popt:active { background: var(--hot-wash); border-color: var(--hot); }
.poll-option { border: 1px solid var(--hot-line) !important; border-radius: var(--r-sm); }
.poll-option--selected { border-color: var(--hot) !important; background: var(--hot-wash); }
.result-bar { border-color: var(--hot-line); }

/* business rows in Explore / category results: the same card grammar as the feed */
.biz-list, .xbiz { display: grid; gap: 10px; }
/* pink hairline, like the poll options — a business row is something to tap */
.business-row { background: var(--paper); border: 1px solid var(--hot-line);
                border-radius: var(--r-md); padding: 14px; align-items: center;
                transition: border-color .14s ease, background .14s ease; }
.biz-list > a:active .business-row, .xbiz > a:active .business-row {
                border-color: var(--hot); background: var(--hot-wash); }
.biz-list > a, .xbiz > a { text-decoration: none; }
.business-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.business-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }