/* public/match/match.css — Door 3 matchmaker (/find). PLATFORM surface: ONE fixed PerfectBarber
   identity (NOT per-shop themed — does not load themes.css). Refined black / white / gold — a clean,
   premium sibling of the shop doors, deliberately quieter than Barber Benson's neon: crisp type,
   restrained shadows, gold used sparingly for CTAs + active states. Michroma display + Inter body. */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#0B0B0D; --panel:#141416; --panel-2:#1B1B1E; --edge:#26262B;
  --txt:#FFFFFF; --ivory:#F3F1EC; --dim:#9A968E;
  --gold:#E0BC6B; --gold-rgb:224,188,107; --ink:#16130A;
  --disp:'Michroma',sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--body);background:var(--bg);color:var(--ivory);line-height:1.5;
  min-height:100vh;position:relative;overflow-x:hidden}
body::after{content:"";position:fixed;left:0;right:0;bottom:0;height:40vh;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 130%,rgba(var(--gold-rgb),.06),transparent 70%)}
#app{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:0 1.15rem 3.5rem;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,h1:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
h1:focus{outline:none}

/* Header / wordmark — clean PerfectBarber brand lockup */
.mmhead{padding:1.2rem 0 .6rem}
.mark{font-family:var(--disp);font-size:1.02rem;letter-spacing:.1em;line-height:1.15;color:var(--txt)}
.mark em{font-style:normal;color:var(--gold)}
.mark small{display:block;font-family:var(--body);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-top:.35rem}

/* Flow chrome */
.back{color:var(--gold);font-weight:700;font-size:.85rem;padding:.5rem 0;display:inline-block}
.backspace{height:.5rem}
.stepnote{font-family:var(--disp);font-size:.64rem;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin:.3rem 0 .1rem}
.dots{display:flex;gap:.4rem;margin:.55rem 0 1.1rem}
.dots i{width:26px;height:4px;border-radius:2px;background:var(--edge);flex:none}
.dots i.on{background:var(--gold)}

/* Headings */
.h1{font-family:var(--disp);font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:.01em;margin:.2rem 0 .4rem;color:var(--txt)}
.h1 em{font-style:normal;color:var(--gold)}
.h1.res{font-size:1.35rem}
.sub{font-size:.92rem;color:var(--dim);margin-bottom:1.1rem}
.hint{font-size:.85rem;color:var(--gold);margin:.6rem 0 .2rem}

/* Option list (service / hair / when) */
.opts{display:flex;flex-direction:column;gap:.6rem;margin-bottom:.4rem}
.opt{display:flex;align-items:center;gap:.8rem;width:100%;background:var(--panel);
  border:1.5px solid var(--edge);border-radius:14px;padding:.95rem 1rem}
.opt:hover{border-color:rgba(var(--gold-rgb),.5)}
.opt[aria-pressed="true"]{border-color:var(--gold);background:rgba(var(--gold-rgb),.06)}
.opt .opttxt{flex:1;min-width:0}
.opt b{display:block;font-size:1rem;color:var(--txt)}
.opt .d{display:block;color:var(--dim);font-size:.82rem;margin-top:.1rem}
.opt .tick{flex:none;color:var(--dim);font-size:1.1rem;font-weight:800}
.opt[aria-pressed="true"] .tick{color:var(--gold)}

/* "Why we ask" disclaimer */
.why{font-size:.86rem;color:var(--dim);border-left:2px solid rgba(var(--gold-rgb),.6);
  padding:.6rem .85rem;margin:1.1rem 0 .2rem;background:rgba(var(--gold-rgb),.03);border-radius:0 8px 8px 0}
.why b{color:var(--ivory)}

/* Location step */
.geo{display:block;width:100%;border-radius:14px;padding:1.05rem;text-align:center;font-weight:800;font-size:1.02rem;
  background:var(--gold);color:var(--ink);letter-spacing:.02em;margin-bottom:.4rem;
  box-shadow:0 10px 26px -14px rgba(var(--gold-rgb),.55)}
.geo.busy{opacity:.7}
.orline{display:flex;align-items:center;gap:.7rem;color:var(--dim);font-size:.8rem;margin:1rem 0 .7rem}
.orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--edge)}
.postal{width:100%;font:inherit;padding:.85rem .9rem;border:1.5px solid var(--edge);border-radius:12px;
  background:var(--panel);color:var(--ivory);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.postal::placeholder{color:var(--dim);opacity:.7;text-transform:none;letter-spacing:normal}

/* Primary CTA + skip */
.cta{display:block;width:100%;border-radius:14px;padding:1.05rem;text-align:center;font-weight:800;font-size:1.05rem;
  background:var(--gold);color:var(--ink);letter-spacing:.02em;margin-top:1rem;
  box-shadow:0 10px 26px -14px rgba(var(--gold-rgb),.55)}
.cta:disabled{opacity:.4;box-shadow:none;cursor:default}
.skip{display:block;width:100%;text-align:center;color:var(--dim);font-weight:600;font-size:.9rem;
  padding:.9rem;margin-top:.6rem;text-decoration:underline}
.skip:hover{color:var(--gold)}

/* Results */
.demonote{font-size:.78rem;color:var(--dim);letter-spacing:.04em;margin:-.5rem 0 .9rem}
.cards{display:flex;flex-direction:column;gap:.9rem;margin-bottom:1.2rem}
.pcard{display:block;background:var(--panel);border:1.5px solid var(--edge);border-radius:16px;
  padding:1rem 1rem .85rem;box-shadow:0 8px 26px -20px rgba(0,0,0,.9)}
.pcard:hover{border-color:rgba(var(--gold-rgb),.55)}
.prow{display:flex;align-items:center;gap:.8rem}
.av{width:54px;height:54px;flex:none;border-radius:50%;background:#000 center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(var(--gold-rgb),.4)}
.av.mono{display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);
  font-size:1rem;color:var(--gold);background:linear-gradient(160deg,var(--panel-2),var(--panel))}
.pmeta{flex:1;min-width:0}
.pmeta b{display:block;font-size:1.05rem;color:var(--txt)}
.pmeta .hl{display:block;font-size:.84rem;color:var(--gold);margin-top:.05rem}
.pmeta .shop{display:block;font-size:.8rem;color:var(--dim);margin-top:.12rem}
.nx{flex:none;text-align:right;font-size:.78rem;font-weight:700;color:var(--gold);white-space:nowrap}
.nx small{display:block;font-weight:400;color:var(--dim);font-size:.68rem}
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.02em;color:var(--ink);
  background:var(--gold);border-radius:999px;padding:.22rem .6rem}
.badge.demo{background:transparent;color:var(--dim);border:1px solid var(--edge)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.65rem}
.chip{font-size:.76rem;color:var(--dim);border:1px solid var(--edge);border-radius:999px;padding:.2rem .6rem}
.bookcta{display:block;margin-top:.85rem;text-align:center;font-weight:800;font-size:.92rem;color:var(--gold);
  border:1.5px solid rgba(var(--gold-rgb),.55);border-radius:12px;padding:.7rem}
.pcard:hover .bookcta{border-color:var(--gold)}

/* Barber acquisition nudge — subtle footer line on every step */
.barber-pitch{font-size:.8rem;color:var(--dim);text-align:center;margin-top:1.8rem}
.barber-pitch-link{color:var(--gold);font-weight:700;text-decoration:none}
.barber-pitch-link:hover{text-decoration:underline}

/* Loading */
.loading{text-align:center;padding:3rem 0;color:var(--dim)}
.spinner{width:38px;height:38px;margin:0 auto 1rem;border-radius:50%;
  border:3px solid var(--edge);border-top-color:var(--gold);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
@media (prefers-reduced-motion:no-preference){.view{animation:in .16s ease-out}@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1}}}