/* =====================================================================
   City Match Finder - Page & View Layouts
   ===================================================================== */

/* ---------- HERO (landing) ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 8vw, 96px); }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 85% 8%, var(--blush-wash) 0%, transparent 60%),
    radial-gradient(50% 70% at 8% 90%, #F3EEDF 0%, transparent 55%);
}
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__copy .eyebrow { margin-bottom: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; }
.hero__copy .display { margin-bottom: 1.1rem; }
.hero__copy .display em { font-style: italic; color: var(--blush-deep); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.9rem; font-size: .86rem; color: var(--slate); }
.hero__trust b { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; margin-right: .3rem; }

/* floating sample card in hero */
.hero__visual { position: relative; }
.float-card { animation: floaty 7s var(--ease) infinite; }
.sample-card { padding: 1.5rem; }
.sample-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.sample-card__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.sample-card__meta { font-size: .82rem; color: var(--slate); margin-top: .15rem; }
.hero__spark { position: absolute; border-radius: var(--r); box-shadow: var(--shadow-md); background: var(--white); padding: .7rem 1rem; font-weight: 600; font-size: .85rem; display: flex; align-items: center; gap: .5rem; }
.hero__spark--1 { top: -18px; left: -14px; color: var(--sage); }
.hero__spark--2 { bottom: 6%; right: -10px; color: var(--blush-deep); }
.hero__spark svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 420px; margin-inline: auto; }
}

/* ---------- Steps / how it works ---------- */
.steps { grid-template-columns: repeat(3, 1fr); }
.step { padding: 1.7rem; }
.step__n { font-family: var(--font-display); font-size: 2.4rem; font-weight: 560; color: var(--blush); line-height: 1; }
.step__n small { font-size: .9rem; color: var(--slate-2); }
.step h3 { margin: .9rem 0 .4rem; }
.step p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 760px){ .steps { grid-template-columns: 1fr; } }

/* ---------- Feature / signal method grid ---------- */
.method-grid { grid-template-columns: repeat(3, 1fr); }
.method { padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.method__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--blush-wash); color: var(--blush-deep); margin-bottom: .3rem; }
.method__w { font-size: .78rem; font-weight: 700; color: var(--blush-deep); letter-spacing: .04em; }
.method h3 { font-size: 1.1rem; }
.method p { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 820px){ .method-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .method-grid { grid-template-columns: 1fr; } }

/* ---------- Sample city cards row (landing) ---------- */
.sample-row { grid-template-columns: repeat(3,1fr); }
@media (max-width: 820px){ .sample-row { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- Sources overview ---------- */
.src-grid { grid-template-columns: repeat(3,1fr); }
.src-cat { padding: 1.4rem; }
.src-cat h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.src-cat ul { margin-top: .7rem; display: grid; gap: .5rem; }
.src-cat li { font-size: .88rem; color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.src-cat li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--blush); }
@media (max-width: 820px){ .src-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; margin-inline: auto; display: grid; gap: .8rem; }
.faq details { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 1.3rem; box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 1.15rem 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform .25s var(--ease); color: var(--blush-deep); flex: none; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details > p { padding: 0 0 1.2rem; color: var(--ink-soft); font-size: .96rem; margin-top: -.2rem; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, #2A3247, var(--ink)); color: #fff; border-radius: var(--r-xl); padding: clamp(2.2rem, 5vw, 3.6rem); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content:""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(198,126,139,.4), transparent 70%); top: -120px; right: -80px; }
.cta-band h2 { color: #fff; position: relative; }
.cta-band p { color: #C7CCDA; max-width: 34rem; margin: .8rem auto 1.7rem; position: relative; }
.cta-band .btn { position: relative; }
.price-tag { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }

/* ---------- ACCESS SCREEN ---------- */
.access { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem;
  background: radial-gradient(70% 60% at 80% 0%, var(--blush-wash) 0%, transparent 55%), var(--cream); }
.access[hidden] { display: none; }
.access__card { width: min(440px, 100%); background: var(--white); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center; }
.access__mark { width: 56px; height: 56px; margin: 0 auto 1.1rem; }
.access__card h1 { font-size: 1.7rem; margin-bottom: .5rem; }
.access__card p.muted { font-size: .92rem; margin-bottom: 1.5rem; }
.access__form { display: grid; gap: .8rem; text-align: left; }
.access__input { text-align: center; letter-spacing: .18em; font-weight: 700; text-transform: uppercase; font-size: 1.05rem; }
.access__error { color: var(--blush-deep); font-size: .88rem; font-weight: 600; min-height: 1.2em; text-align: center; opacity: 0; transition: opacity .2s; }
.access__error.show { opacity: 1; }
.access__note { font-size: .82rem; color: var(--slate); margin-top: 1.2rem; }
.access__buy { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line-2); font-size: .9rem; color: var(--slate); }

/* ---------- APP shell ---------- */
.app-view { padding-block: clamp(28px, 4vw, 44px); }
.app-view[hidden] { display: none; }
.view-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.8rem; }
.view-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.view-head p { color: var(--ink-soft); margin-top: .35rem; max-width: 42rem; }
.crumb { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--blush-deep); margin-bottom: 1rem; }
.crumb:hover { text-decoration: underline; }

/* app home tiles */
.home-hero { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(1.8rem, 4vw, 3rem); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.home-hero::after { content:""; position:absolute; width: 260px; height: 260px; border-radius:50%; background: radial-gradient(circle, var(--blush-wash), transparent 70%); top:-90px; right:-60px; }
.home-hero > * { position: relative; }
.tiles { grid-template-columns: repeat(3,1fr); margin-top: 1.6rem; }
.tile { padding: 1.4rem; display: flex; flex-direction: column; gap: .35rem; text-align: left; }
.tile__icon { width: 42px; height: 42px; border-radius: 12px; background: var(--blush-wash); color: var(--blush-deep); display: grid; place-items: center; margin-bottom: .5rem; }
.tile h3 { font-size: 1.05rem; }
.tile p { font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 820px){ .tiles { grid-template-columns: 1fr; } }

/* ---------- QUIZ ---------- */
.quiz { max-width: 42rem; margin-inline: auto; }
.quiz__progress { height: 7px; background: var(--blush-wash); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 1.6rem; }
.quiz__progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--blush), var(--blush-deep)); width: 0; transition: width .4s var(--ease); }
.quiz__step { animation: pop .35s var(--ease); }
.quiz__count { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blush-deep); }
.quiz__q { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.05rem); font-weight: 560; margin: .5rem 0 .3rem; line-height: 1.12; }
.quiz__note { font-size: .9rem; color: var(--slate); margin-bottom: 1.5rem; }
.opts { display: grid; gap: .7rem; }
.opts.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width:520px){ .opts.grid-2 { grid-template-columns: 1fr; } }
.opt {
  display: flex; align-items: center; gap: .8rem; text-align: left; width: 100%;
  padding: 1rem 1.15rem; border-radius: var(--r); border: 1.5px solid var(--line);
  background: var(--white); font-weight: 600; font-size: .98rem; color: var(--ink);
  transition: border-color .18s, background .18s, transform .12s;
}
.opt:hover { border-color: var(--blush); background: var(--blush-wash-2); }
.opt.sel { border-color: var(--blush); background: var(--blush-wash); color: var(--blush-deep); }
.opt__check { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid var(--line); display: grid; place-items: center; color: #fff; transition: background .15s, border-color .15s; }
.opt.round .opt__check { border-radius: 50%; }
.opt.sel .opt__check { background: var(--blush); border-color: var(--blush); }
.opt.sel .opt__check svg { opacity: 1; }
.opt__check svg { opacity: 0; width: 13px; height: 13px; }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.8rem; }
.quiz__hint { font-size: .82rem; color: var(--slate); }

/* ---------- EXPLORER ---------- */
.explorer { display: grid; grid-template-columns: 268px 1fr; gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; }
.filters { position: sticky; top: 88px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 1.3rem; box-shadow: var(--shadow-sm); max-height: calc(100dvh - 108px); overflow: auto; }
.filters h3 { font-size: 1.05rem; }
.filters__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.fgroup { border-top: 1px solid var(--line-2); padding: 1rem 0; }
.fgroup:first-of-type { border-top: none; padding-top: .3rem; }
.fgroup > .flabel { font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); margin-bottom: .7rem; display: block; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .38rem .7rem; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  background: var(--white); font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  transition: all .15s;
}
.chip:hover { border-color: var(--blush); color: var(--blush-deep); }
.chip.on { background: var(--blush); border-color: var(--blush); color: #fff; }
.explorer__toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1.2rem; }
.explorer__toolbar .search { flex: 1 1 240px; }
.explorer__count { font-size: .88rem; color: var(--slate); font-weight: 600; }
.cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.filter-toggle { display: none; }

@media (max-width: 900px) {
  .explorer { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0; z-index: 90; border-radius: 0; max-height: 100dvh; transform: translateX(-105%); transition: transform .3s var(--ease); }
  .filters.open { transform: none; }
  .filter-toggle { display: inline-flex; }
}

/* ---------- Metro card ---------- */
.mcard { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.mcard__head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.mcard__name { font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; line-height: 1.1; }
.mcard__loc { font-size: .82rem; color: var(--slate); margin-top: .2rem; }
.mcard__persona { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .3rem; }
.fav-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--slate); border: 1.5px solid var(--line); background: var(--white); transition: all .18s; flex: none; }
.fav-btn:hover { border-color: var(--blush); color: var(--blush); }
.fav-btn.on { background: var(--blush-wash); border-color: var(--blush); color: var(--blush-deep); }
.fav-btn.on svg { fill: currentColor; }
.rank-pill { position: absolute; top: -12px; left: 1.2rem; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .82rem; padding: .28rem .7rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.rank-pill.gold { background: linear-gradient(135deg,#D9B96A,#B8862F); }

/* ---------- DETAIL ---------- */
.detail__hero { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(1.6rem, 3.4vw, 2.6rem); box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.detail__hero::after { content:""; position:absolute; width: 280px; height: 280px; border-radius:50%; background: radial-gradient(circle, var(--blush-wash), transparent 70%); top:-110px; right:-70px; }
.detail__top { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; position: relative; }
.detail__title h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.detail__title .loc { color: var(--slate); font-weight: 600; margin-top: .3rem; }
.detail__persona { margin-top: 1.2rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 40rem; position: relative; }
.detail__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.2rem,2.4vw,1.8rem); margin-top: 1.5rem; align-items: start; }
@media (max-width: 860px){ .detail__grid { grid-template-columns: 1fr; } }
.panel { background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.panel + .panel { margin-top: 1.2rem; }
.panel h3 { font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.panel h3 svg { color: var(--blush-deep); }
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width:600px){ .proscons { grid-template-columns: 1fr; } }
.pclist { display: grid; gap: .55rem; }
.pclist li { display: flex; gap: .55rem; align-items: flex-start; font-size: .93rem; color: var(--ink-soft); }
.pclist li svg { flex: none; margin-top: .18rem; }
.pclist.pros li svg { color: var(--sage); }
.pclist.cons li svg { color: var(--cons); }
.pclabel { font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem; }
.pclabel.pros { color: var(--sage); }
.pclabel.cons { color: var(--cons); }

/* expandable stat sections */
.acc { border-top: 1px solid var(--line-2); }
.acc:first-of-type { border-top: none; }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; font-weight: 600; font-size: 1rem; text-align: left; color: var(--ink); }
.acc__btn .chev { transition: transform .25s var(--ease); color: var(--blush-deep); flex: none; }
.acc.open .acc__btn .chev { transform: rotate(180deg); }
.acc__body { display: none; padding-bottom: 1.1rem; }
.acc.open .acc__body { display: block; animation: fade .3s var(--ease); }
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .5rem; }
@media (max-width:480px){ .statgrid { grid-template-columns: 1fr; } }
.stat { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--line-2); font-size: .9rem; }
.stat dt { color: var(--slate); }
.stat dd { font-weight: 600; text-align: right; }

.snapshot { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }
.snap { background: var(--cream); border-radius: var(--r); padding: .9rem 1rem; }
.snap dt { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); }
.snap dd { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-top: .2rem; }

.verified { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--slate); margin-top: 1rem; }
.verified svg { color: var(--sage); }

/* ---------- COMPARE ---------- */
.compare-pick { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1.6rem; }
.compare-scroll { overflow-x: auto; padding-bottom: .5rem; }
.compare-table { min-width: 620px; border-collapse: separate; border-spacing: 0; width: 100%; }
.compare-table th, .compare-table td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.compare-table thead th { position: sticky; top: 0; background: var(--cream); z-index: 1; }
.compare-table th.rowlab, .compare-table td:first-child { position: sticky; left: 0; background: var(--cream); font-weight: 700; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: var(--slate); z-index: 2; min-width: 140px; }
.compare-table .col-city { background: var(--white); }
.ccity-head { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.ccity-head strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.cbest { color: var(--sage); font-weight: 700; }
.empty-state { text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 1rem; }
.empty-state svg { color: var(--blush); margin: 0 auto 1rem; }
.empty-state h3 { margin-bottom: .5rem; }
.empty-state p { color: var(--slate); max-width: 26rem; margin: 0 auto 1.3rem; }

/* ---------- Top lists ---------- */
.toplist { padding: 1.5rem; }
.toplist h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.toplist p.muted { font-size: .88rem; margin-bottom: 1rem; }
.toplist ol { display: grid; gap: .5rem; counter-reset: t; }
.toplist li { display: flex; align-items: center; gap: .8rem; padding: .6rem .7rem; border-radius: var(--r); transition: background .15s; }
.toplist li:hover { background: var(--blush-wash-2); }
.toplist li .rk { font-family: var(--font-display); font-weight: 600; color: var(--blush); width: 1.6rem; font-variant-numeric: tabular-nums; }
.toplist li .nm { font-weight: 600; }
.toplist li .sc { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .9rem; }
.toplist-grid { grid-template-columns: repeat(2,1fr); }
@media (max-width:760px){ .toplist-grid { grid-template-columns: 1fr; } }

/* factor chips on results */
.factors { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.factor { font-size: .76rem; font-weight: 600; padding: .28em .6em; border-radius: var(--r-pill); }
.factor.up { background: var(--sage-wash); color: #37634b; }
.factor.down { background: #F6E4E0; color: var(--cons); }

/* Members home: one focused block, nothing competing with the quiz. */
.home-hero--solo {
  max-width: 46rem; margin: 3.4rem auto 4rem; text-align: center;
  padding: 3rem 2.2rem; border-radius: 1.4rem;
  background: var(--cream, #faf7f2); border: 1px solid var(--line, #e7e3dd);
}
.home-hero--solo .lead { margin-inline: auto; }
.home-hero__cta { justify-content: center; margin-top: 1.9rem; }
/* Before the quiz there are no nav links, so don't leave a hollow gap. */
.nav--locked { justify-content: flex-end; }

/* 1-10 importance scale. Reads as a continuum, which Low/Medium/High never did. */
.scale10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: .45rem; margin-top: 1.4rem; }
.opt--scale {
  display: flex; align-items: center; justify-content: center;
  padding: .85rem .2rem; font-family: var(--font-display); font-size: 1.05rem;
  border-radius: .7rem; text-align: center;
}
.opt--scale.sel { background: var(--ink); color: #fff; border-color: var(--ink); }
.scale10__ends {
  display: flex; justify-content: space-between; margin-top: .7rem;
  font-size: .78rem; color: var(--slate); letter-spacing: .02em;
}
@media (max-width: 560px) {
  .scale10 { grid-template-columns: repeat(5, 1fr); }
}

/* Economy card: a one-line explanation under each bar. */
.mini-metric__note {
  display: block; margin-top: .4rem;
  font-size: .75rem; color: var(--slate); line-height: 1.4;
}

/* About page: a reading column, not a dashboard. */
.wrap--narrow { max-width: 44rem; }
.about__head { text-align: center; margin-bottom: 2.6rem; }
.about p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 1.35rem; color: var(--ink); }
.about__media { margin: 2.4rem 0; }
.about__media video,
.about__media img {
  display: block; width: 100%; height: auto;
  border-radius: 1rem; border: 1px solid var(--line, #e7e3dd);
  box-shadow: 0 18px 45px -22px rgba(0,0,0,.35);
}
.about__media figcaption {
  margin-top: .8rem; text-align: center;
  font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--slate);
}
.about__verse {
  margin: 2.8rem 0 0; padding: 1.6rem 1.8rem;
  border-left: 3px solid var(--blush-deep, #b76e79);
  background: var(--cream, #faf7f2); border-radius: .6rem;
  font-family: var(--font-display); font-size: 1.15rem; font-style: italic; line-height: 1.6;
}
.about__verse cite { display: block; margin-top: .8rem; font-size: .85rem; font-style: normal; color: var(--slate); }
.view--narrow .wrap { max-width: 44rem; }

/* Before the quiz there is no match, so the ring is dimmed rather than pretending. */
.mcard--nomatch .ring { opacity: .38; }

/* Six signals: dots read as a level, a bar read as a percentage it never was. */
.signal--dot { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .9rem; padding: .5rem 0; }
.signal__dots { display: inline-flex; gap: 3px; }
.signal__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2, #e2ded7); }
.signal__dots i.on { background: var(--slate); }
.signal__dots[data-tier="high"] i.on { background: #2f7d5d; }
.signal__dots[data-tier="mid"]  i.on { background: #b08b3f; }
.signal__dots[data-tier="low"]  i.on { background: #b5675f; }
.signal--dot .signal__val { min-width: 2.4ch; text-align: right; font-variant-numeric: tabular-nums; }

/* City tags: one colour, and they actually go somewhere. */
.badge-row--tags { margin-top: 1.2rem; gap: .5rem; }
.tag-chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .32rem .85rem; border-radius: 999px;
  background: var(--cream, #faf7f2); border: 1px solid var(--line, #e7e3dd);
  color: var(--ink); font-size: .8rem; text-decoration: none; transition: background .15s, border-color .15s;
}
.tag-chip:hover { background: #fff; border-color: var(--slate); }
.tag-active {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  font-size: .9rem; color: var(--slate);
}
/* No quiz taken: the ring is real, it is just zero. Dim it, don't hide it. */
.detail__hero--nomatch .ring { opacity: .38; }

/* Safety caveats: the warning is the content, so it must not look like fine print. */
.caveat {
  margin-top: 1.3rem; padding: 1.1rem 1.25rem;
  background: var(--cream, #faf7f2);
  border: 1px solid var(--line, #e7e3dd);
  border-left: 3px solid #b08b3f;
  border-radius: .6rem;
}
.caveat h4 { margin: 0 0 .7rem; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.caveat ul { margin: 0; padding-left: 1.05rem; display: grid; gap: .65rem; }
.caveat li { font-size: .86rem; line-height: 1.55; color: var(--ink-soft, #4a4740); }
.caveat b { color: var(--ink); }

/* Mobile: give the compare table an obvious affordance that it scrolls sideways. */
@media (max-width: 820px) {
  .compare-scroll { position: relative; }
  .compare-scroll::after {
    content: "Swipe to see more";
    display: block; text-align: right; padding-top: .5rem;
    font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--slate);
  }
  /* Long safety caveats read better with a touch more room. */
  .caveat { padding: 1rem; }
  .caveat li { font-size: .84rem; }
}

/* External rankings: the outside view, shown next to the personal one. */
.rank-rows { display: grid; gap: 1.3rem; }
.rank-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.rank-row__head span { font-size: .9rem; }
.rank-row__head em { font-style: normal; color: var(--slate); font-size: .8rem; }
.rank-row__head b { font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; }
.rank-fill--high { background: #2f7d5d; }
.rank-fill--mid  { background: #b08b3f; }
.rank-fill--low  { background: #b5675f; }

/* .signal__track is an inline span that only gets width from the .signal grid.
   Used standalone (economy card, safety card, rankings panel) it collapsed to 0px,
   so every bar was invisible even though its fill had the right width set. */
.mini-metric .signal__track,
.rank-row .signal__track,
.panel > .signal__track {
  display: block;
  width: 100%;
  margin-top: .45rem;
}
/* .signal__fill is a <span>; width has no effect on an inline box, so the bar
   rendered at 0px everywhere it was used outside the .signal grid. */
.signal__track > .signal__fill { display: block; }

/* Signals explainer reads as one line, not a wrapped paragraph. */
.method-note--inline {
  display: flex; align-items: center; gap: .45rem;
  margin: .2rem 0 1.1rem; white-space: nowrap;
  overflow-x: auto; font-size: .82rem;
}
.method-note--inline svg { flex: none; }
@media (max-width: 820px) { .method-note--inline { white-space: normal; } }

/* Mobile: filter chips and quiet buttons were 35px, under the 44px touch minimum. */
@media (max-width: 820px) {
  .filters label,
  .filters .chip,
  .btn--quiet {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Subhead under a panel header (e.g. "Bars indicate how this metro ranks"). */
.panel-subhead { font-size: .82rem; color: var(--slate); margin: -.2rem 0 .3rem; }

/* City-page tabs: keep the hero always visible, split the detail behind tabs. */
.dtabs {
  display: flex; gap: .3rem; margin: 1.6rem 0 1.3rem;
  border-bottom: 1px solid var(--line, #e7e3dd);
}
.dtab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: .7rem 1.2rem; font-family: inherit; font-size: .96rem; font-weight: 600;
  color: var(--slate); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.dtab:hover { color: var(--ink); }
.dtab.is-active { color: var(--blush-deep); border-bottom-color: var(--blush-deep); }
.dpane { display: none; }
.dpane.is-active { display: block; }
@media (max-width: 520px) {
  .dtab { flex: 1; padding: .7rem .4rem; font-size: .9rem; }
}