/* ============================================================
   MovingUtah.com / city-finder.css
   The Utah City Finder: the six pages under /resources/city-finder/.
   Loaded after tailwind.css and main.min.css, on those pages only.

   Layout: questions (accordion) | ranked list | map.
   The list leads: a town is one compact row, the full facts open
   in place. Text never drops below 14px (.875rem).

   Hooks the engine reads live in the markup (ids and data-slot);
   this file only styles. Brand tokens come from main.css; every
   var() carries its hex so the file stands alone.
   ============================================================ */

.mu-cf-hero,
.mu-cf-band {
  --cf-navy: var(--color-primary-500, #050E3D);
  --cf-navy-deep: var(--color-primary-900, #050929);
  --cf-navy-soft: #1B2654;
  --cf-gold: var(--color-accent-500, #C5A880);
  --cf-gold-soft: var(--color-accent-300, #DCC196);
  --cf-gold-deep: var(--color-accent-600, #AB936B);
  --cf-gold-tint: var(--color-accent-100, #F3EADA);
  --cf-bronze: #856C43;
  --cf-sky: var(--color-secondary-600, #1278A7);
  --cf-ivory: var(--color-surface-100, #F7F3EC);
  --cf-cream: var(--color-surface-50, #FBF8F2);
  --cf-line: #E6DFD1;
  --cf-line-strong: #CFC6B4;
  --cf-ink: var(--color-neutral-900, #1D1D1D);
  --cf-muted: #595959;
  --cf-serif: var(--font-display, "Source Serif 4", Georgia, serif);
  --cf-sans: var(--font-sans, "Poppins", ui-sans-serif, system-ui, sans-serif);
  --cf-ease: cubic-bezier(.22, 1, .36, 1);
  --cf-shadow: 0 1px 2px rgba(5, 14, 61, .05), 0 8px 24px -12px rgba(5, 14, 61, .18);
  --cf-shadow-lift: 0 2px 4px rgba(5, 14, 61, .06), 0 18px 40px -16px rgba(5, 14, 61, .28);
}

/* ------------------------------------------------------------
   HERO: the words on the left, the state on the right
   ------------------------------------------------------------ */
.mu-cf-hero-grid { display: grid; gap: 2.5rem; align-items: center; margin-top: 2.25rem; }
.mu-cf-hero-copy { min-width: 0; max-width: 44rem; }
.mu-cf-atlas { display: none; position: relative; margin: 0; }
.mu-cf-atlas svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 1024px) {
  .mu-cf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: 3.5rem; }
  .mu-cf-atlas { display: block; }
}
@media (min-width: 1280px) {
  .mu-cf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
}

.mu-cf-shortcuts { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(220, 193, 150, .22); }
.mu-cf-shortcuts-head { margin: 0; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cf-gold-soft); }
.mu-cf-shortcuts-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.mu-cf-shortcut { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(220, 193, 150, .38); background: rgba(255, 255, 255, .05); font-family: var(--cf-sans); font-size: .9375rem; font-weight: 500; line-height: 1.2; color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s, transform .3s var(--cf-ease); }
.mu-cf-shortcut svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--cf-gold-soft); }
.mu-cf-shortcut:hover { background: rgba(220, 193, 150, .16); border-color: var(--cf-gold-soft); transform: translateY(-1px); }
.mu-cf-shortcut:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }
.mu-cf-shortcut[aria-current="page"] { background: var(--cf-gold-soft); border-color: var(--cf-gold-soft); color: var(--cf-navy); font-weight: 600; }
.mu-cf-shortcut[aria-current="page"] svg { color: var(--cf-navy); }

/* ------------------------------------------------------------
   THE MAP DRAWING (shared by the hero figure and the map panel)
   ------------------------------------------------------------ */
.mu-cf-region-shape { fill: var(--rfill, #27507F); stroke: rgba(220, 193, 150, .55); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .25s ease, opacity .25s ease; }
.mu-cf-outline { fill: none; stroke: var(--cf-gold, #C5A880); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.mu-cf-place { font-family: var(--cf-sans); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; fill: #fff; paint-order: stroke; stroke: rgba(5, 9, 41, .85); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.mu-cf-place-tick { stroke: rgba(255, 255, 255, .7); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }

.mu-cf-dot { fill: #8E99C2; opacity: .6; pointer-events: none; transition: fill .3s ease, opacity .3s ease; }
.mu-cf-dot[data-tier="all"] { fill: var(--cf-gold-soft, #DCC196); opacity: .95; }
.mu-cf-dot[data-tier="look"] { fill: #F4EEE2; opacity: 1; }
.mu-cf-dot[data-tier="good"] { fill: var(--cf-navy-deep, #050929); stroke: var(--cf-gold-soft, #DCC196); stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 1; }
.mu-cf-dot[data-tier="strong"] { fill: var(--cf-gold-soft, #DCC196); stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 1; }
.mu-cf-dot.is-hot { fill: #fff; stroke: var(--cf-gold, #C5A880); stroke-width: 2.5; vector-effect: non-scaling-stroke; opacity: 1; }
.mu-cf-halo { fill: none; stroke: var(--cf-gold-soft, #DCC196); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .35; pointer-events: none; }
.mu-cf-spot { fill: none; stroke: #fff; stroke-width: 1.75; stroke-dasharray: 3 2.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.mu-cf-tag { font-family: var(--cf-sans); font-weight: 600; fill: #fff; paint-order: stroke; stroke: rgba(5, 9, 41, .9); stroke-linejoin: round; pointer-events: none; }

/* hero figure only */
.mu-cf-atlas svg { filter: drop-shadow(0 20px 44px rgba(3, 8, 36, .6)); }
.mu-cf-atlas [data-map-dots] { filter: drop-shadow(0 0 2.5px rgba(220, 193, 150, .75)); }
.mu-cf-atlas .mu-cf-region-shape { opacity: .82; }
@keyframes mu-cf-twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .45; } }
.mu-cf-atlas .mu-cf-dot[data-tier] { animation: mu-cf-twinkle 3.8s ease-in-out infinite; animation-delay: calc(var(--d, 0) * -1s); }

/* ------------------------------------------------------------
   THE TOOL BAND
   ------------------------------------------------------------ */
.mu-cf-band { position: relative; background: var(--cf-ivory); padding: 3rem 0 3.5rem; scroll-margin-top: 3rem; }
.mu-cf-band::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14rem; background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.mu-cf-wrap { position: relative; width: 100%; max-width: 112rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .mu-cf-wrap { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .mu-cf-band { padding: 4rem 0 5rem; } .mu-cf-wrap { padding: 0 2rem; } }

.mu-cf-intro { display: grid; gap: 1rem 3rem; align-items: end; }
.mu-cf-intro-text { margin: 0; max-width: 40rem; font-size: 1rem; line-height: 1.65; color: #404040; }
@media (min-width: 1024px) { .mu-cf-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* workspace grid */
.mu-cf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 2.25rem; }
.mu-cf-results { min-width: 0; scroll-margin-top: 4rem; container-type: inline-size; container-name: cfresults; }
@media (min-width: 1024px) {
  .mu-cf { grid-template-columns: 21.5rem minmax(0, 1fr); gap: 1.5rem 2rem; }
  .mu-cf-form { grid-column: 1; grid-row: 1 / span 2; }
  .mu-cf-map { grid-column: 2; grid-row: 1; }
  .mu-cf-results { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1280px) {
  .mu-cf { grid-template-columns: 23rem minmax(0, 1fr); }
}
@media (min-width: 1680px) {
  .mu-cf { grid-template-columns: 23rem minmax(0, 1fr) 22rem; }
  .mu-cf-form { grid-row: 1; }
  .mu-cf-results { grid-column: 2; grid-row: 1; }
  .mu-cf-map { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------
   THE QUESTIONS
   ------------------------------------------------------------ */
.mu-cf-form { min-width: 0; background: #fff; border: 1px solid var(--cf-line); border-radius: 1.25rem; box-shadow: var(--cf-shadow); overflow: hidden; }
.mu-cf-form-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem 1rem; background: var(--cf-navy); color: #fff; border-bottom: 2px solid var(--cf-gold); }
.mu-cf-form-title { margin: 0; font-family: var(--cf-serif); font-size: 1.375rem; font-weight: 600; line-height: 1.2; color: #fff; }
.mu-cf-form-count { margin: 0; font-family: var(--cf-sans); font-size: .875rem; font-weight: 500; line-height: 1.2; color: var(--cf-gold-soft); white-space: nowrap; }
.mu-cf-form-body { padding: .25rem 0 0; }
@media (min-width: 1024px) {
  .mu-cf-form { position: sticky; top: 3.75rem; display: flex; flex-direction: column; max-height: calc(100vh - 4.75rem); }
  .mu-cf-form-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cf-line-strong) transparent; }
}

.mu-cf-q { border-bottom: 1px solid var(--cf-line); }
.mu-cf-q > summary { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; align-items: center; gap: .85rem; min-height: 3.75rem; padding: .6rem 1.25rem; cursor: pointer; list-style: none; transition: background-color .2s; }
.mu-cf-q > summary::-webkit-details-marker { display: none; }
.mu-cf-q > summary:hover { background: var(--cf-cream); }
.mu-cf-q > summary:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: -2px; }
.mu-cf-q-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .7rem; background: var(--cf-ivory); color: var(--cf-navy); border: 1px solid var(--cf-line); transition: background-color .25s, color .25s, border-color .25s; }
.mu-cf-q-icon svg { width: 1.25rem; height: 1.25rem; }
.mu-cf-q-text { display: block; min-width: 0; font-family: var(--cf-sans); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--cf-navy); }
.mu-cf-q-val { display: block; margin-top: .15rem; font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--cf-sky); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-cf-q-val:empty { display: none; }
.mu-cf-q-chev { width: 1.25rem; height: 1.25rem; color: var(--cf-muted); transition: transform .3s var(--cf-ease); }
.mu-cf-q[open] > summary .mu-cf-q-chev { transform: rotate(180deg); }
.mu-cf-q[data-set="1"] .mu-cf-q-icon { background: var(--cf-navy); border-color: var(--cf-navy); color: var(--cf-gold-soft); }
.mu-cf-q-body { padding: 0 1.25rem 1.15rem; }
.mu-cf-q[open] > .mu-cf-q-body { animation: mu-cf-drop .3s var(--cf-ease); }
@keyframes mu-cf-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* the walk: Skip before an answer, Next after one, Done on the last question */
.mu-cf-q-foot { display: flex; justify-content: flex-end; margin-top: .85rem; }
.mu-cf-next { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 1.1rem; border: 1px solid var(--cf-line-strong); border-radius: 999px; background: #fff; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--cf-navy); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.mu-cf-next::after { content: "\2192"; font-weight: 400; transition: transform .3s var(--cf-ease); }
.mu-cf-next:hover { border-color: var(--cf-navy); background: var(--cf-cream); }
.mu-cf-next:hover::after { transform: translateX(3px); }
.mu-cf-next[data-on="1"] { background: var(--cf-navy); border-color: var(--cf-navy); color: #fff; }
.mu-cf-next[data-on="1"]:hover { background: #0B1750; }
.mu-cf-next:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; }
.mu-cf-q { scroll-margin-top: 4.5rem; }

.mu-finder-help { margin: 0 0 .75rem; font-size: .875rem; line-height: 1.55; color: var(--cf-muted); }
.mu-finder-sub { margin: 1rem 0 .5rem; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--cf-navy); }
.mu-finder-sub:first-child { margin-top: 0; }
.mu-finder-opts { display: grid; gap: .4rem; }
.mu-finder-opt { position: relative; display: block; cursor: pointer; }
.mu-finder-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mu-finder-opt span { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .5rem .8rem; background: #fff; border: 1px solid var(--cf-line-strong); border-radius: .7rem; font-size: .9375rem; line-height: 1.35; color: var(--cf-ink); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.mu-finder-opt span::before { content: ""; flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 2px solid #8C8C8C; border-radius: 50%; background: #fff; color: #fff; font-size: .875rem; font-weight: 700; line-height: 1; transition: border-color .2s, background-color .2s; }
.mu-finder-opt-check span::before { border-radius: .3rem; }
.mu-finder-opt:hover span { border-color: var(--cf-gold); background: var(--cf-cream); }
.mu-finder-opt input:checked + span { border-color: var(--cf-gold); background: color-mix(in oklab, var(--cf-gold-tint) 50%, #fff); box-shadow: 0 0 0 1px var(--cf-gold); font-weight: 600; color: var(--cf-navy); }
.mu-finder-opt input:checked + span::before { border-color: var(--cf-navy); background: var(--cf-navy); box-shadow: inset 0 0 0 3px #fff; }
.mu-finder-opt-check input:checked + span::before { content: "\2713"; box-shadow: none; }
.mu-finder-opt input:focus-visible + span { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; }
.mu-finder-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mu-finder-select { width: 100%; min-height: 48px; font-size: 1rem; font-weight: 600; }
.mu-cf-q-plain { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cf-line); }

.mu-finder-actions { display: grid; gap: .6rem; padding: 1rem 1.25rem 1.25rem; background: var(--cf-cream); border-top: 1px solid var(--cf-line); }
.mu-finder-actions .mu-btn { width: 100%; justify-content: center; }
.mu-cf-actions-row { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: space-between; }
.mu-cf-textbtn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0; border: 0; background: none; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--mu-link, #0F6699); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: .2em; cursor: pointer; }
.mu-cf-textbtn:hover { color: var(--cf-navy); text-decoration-color: currentColor; }
.mu-cf-textbtn:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; border-radius: .25rem; }
.mu-cf-textbtn svg { width: 1rem; height: 1rem; flex: none; }
@media (min-width: 1024px) { .mu-cf-go { display: none; } }

/* ------------------------------------------------------------
   RESULTS HEAD
   ------------------------------------------------------------ */
.mu-cf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; align-items: end; }
.mu-cf-head h3 { margin: 0; font-family: var(--cf-serif); font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--cf-navy); }
@media (min-width: 1024px) { .mu-cf-head h3 { font-size: 2rem; } }
.mu-cf-notes { grid-column: 1 / -1; }
#mu-finder-status { margin: .35rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--cf-ink); }
#mu-finder-status .mu-cf-n { font-family: var(--cf-serif); font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--cf-navy); }
#mu-finder-hint, #mu-finder-region { margin: .2rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--cf-ink); }
#mu-finder-drivenote { margin: .2rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--cf-muted); }

.mu-cf-views { display: inline-flex; padding: .2rem; border-radius: 999px; background: #fff; border: 1px solid var(--cf-line-strong); }
.mu-cf-view { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1rem; border: 0; border-radius: 999px; background: none; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; color: var(--cf-navy); cursor: pointer; transition: background-color .2s, color .2s; }
.mu-cf-view svg { width: 1rem; height: 1rem; }
.mu-cf-view[aria-pressed="true"] { background: var(--cf-navy); color: #fff; }
.mu-cf-view:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; }
@media (min-width: 1680px) { .mu-cf-views { display: none; } }

.mu-cf-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.mu-cf-chips:empty { display: none; }
@media (max-width: 639px) {
  .mu-cf-chips, .mu-cf-shortcuts-list { flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding: 2px 1rem 2px 2px; margin-left: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mu-cf-chips::-webkit-scrollbar, .mu-cf-shortcuts-list::-webkit-scrollbar { display: none; }
  .mu-cf-chips > li, .mu-cf-shortcuts-list > li { flex: none; }
  .mu-cf-chip > span:first-child { max-width: 15rem; }
}
.mu-cf-chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 100%; min-height: 40px; padding: .25rem .4rem .25rem .85rem; border-radius: 999px; border: 1px solid var(--cf-gold-soft); background: #fff; font-family: var(--cf-sans); font-size: .875rem; font-weight: 500; line-height: 1.25; color: var(--cf-navy); cursor: pointer; transition: background-color .2s, border-color .2s; }
.mu-cf-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-cf-chip-x { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--cf-ivory); color: var(--cf-navy); transition: background-color .2s, color .2s; }
.mu-cf-chip-x svg { width: .75rem; height: .75rem; }
.mu-cf-chip:hover { border-color: var(--cf-navy); }
.mu-cf-chip:hover .mu-cf-chip-x { background: var(--cf-navy); color: #fff; }
.mu-cf-chip:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; }

/* ------------------------------------------------------------
   THE LIST: one compact row per town
   Narrow: name, then a strip of four facts (icon and figure),
   then the reasons. The key above the list names the icons.
   Wide: the four facts line up in columns under one header.
   ------------------------------------------------------------ */
.mu-cf-cols { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 1rem 0 0; font-family: var(--cf-sans); font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--cf-muted); }
.mu-cf-cols[hidden] { display: none; }
.mu-cf-cols > span { display: inline-flex; align-items: center; gap: .35rem; }
.mu-cf-cols > span:first-child, .mu-cf-cols > span:last-child { display: none; }
.mu-cf-cols small { font-size: .875rem; font-weight: 400; }
.mu-cf-cols > span[data-k]::before, .mu-cf-glance dt::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: var(--cf-bronze); -webkit-mask: var(--cf-ico) center / contain no-repeat; mask: var(--cf-ico) center / contain no-repeat; }
[data-k="home_value"] { --cf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 9.8V20h13V9.8'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
[data-k="july"] { --cf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2v2.4M12 19.6V22M2 12h2.4M19.6 12H22M4.9 4.9l1.7 1.7M17.4 17.4l1.7 1.7M4.9 19.1l1.7-1.7M17.4 6.6l1.7-1.7'/%3E%3C/svg%3E"); }
[data-k="snow"] { --cf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5v19M3.8 7.2l16.4 9.6M20.2 7.2 3.8 16.8'/%3E%3Cpath d='M9.5 4.5 12 7l2.5-2.5M9.5 19.5 12 17l2.5 2.5'/%3E%3C/svg%3E"); }
[data-k="drive"] { --cf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17v-3.6a2 2 0 0 1 .3-1l2.1-3.8A2 2 0 0 1 7.7 7.5h8.6a2 2 0 0 1 1.8 1.1l2.1 3.8a2 2 0 0 1 .3 1V17'/%3E%3Cpath d='M3.5 17h17M5.5 17v2.2M18.5 17v2.2M3.8 12.5h16.4'/%3E%3C/svg%3E"); }

.mu-finder-list { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .6rem; }

.mu-finder-card { position: relative; scroll-margin-top: 5.5rem; background: #fff; border: 1px solid var(--cf-line); border-radius: 1rem; box-shadow: 0 1px 2px rgba(5, 14, 61, .04); transition: border-color .25s, box-shadow .3s var(--cf-ease); }
.mu-finder-card::before { content: ""; position: absolute; left: -1px; top: 1rem; bottom: 1rem; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background-color .25s; }
.mu-finder-card[data-tier="strong"]::before { background: var(--cf-gold); }
.mu-finder-card[data-open="1"]::before { bottom: auto; height: 3rem; }
.mu-finder-card:hover, .mu-finder-card.is-hot { border-color: var(--cf-gold-soft); box-shadow: var(--cf-shadow); }
.mu-finder-card[data-open="1"] { border-color: var(--cf-gold); box-shadow: var(--cf-shadow-lift); }
.mu-finder-card.is-new { animation: mu-cf-rise .45s var(--cf-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes mu-cf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mu-cf-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark id toggle" "glance glance glance" "why why why"; gap: .55rem .85rem; align-items: center; padding: .85rem 1rem .9rem 1.1rem; cursor: pointer; }
.mu-cf-mark { grid-area: mark; position: relative; align-self: center; }
.mu-cf-emblem { display: block; width: 3rem; height: 3rem; border-radius: .85rem; background: linear-gradient(160deg, #0B1750 0%, var(--cf-navy-deep) 100%); color: var(--cf-gold-soft); box-shadow: inset 0 0 0 1px rgba(220, 193, 150, .35); overflow: hidden; }
.mu-cf-emblem svg { display: block; width: 100%; height: 100%; }
.mu-cf-rank { position: absolute; top: -.45rem; left: -.55rem; display: grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; border-radius: 999px; background: #fff; border: 1px solid var(--cf-gold); font-family: var(--cf-sans); font-size: .875rem; font-weight: 700; line-height: 1; color: var(--cf-navy); box-shadow: 0 1px 3px rgba(5, 14, 61, .18); }
.mu-cf-rank:empty { display: none; }

.mu-cf-id { grid-area: id; min-width: 0; }
.mu-cf-name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .65rem; }
.mu-cf-county { display: none; }
.mu-finder-card h4 { margin: 0; font-family: var(--cf-serif); font-size: 1.3125rem; font-weight: 700; line-height: 1.2; color: var(--cf-navy); }
.mu-finder-card [data-slot="where"] { margin: .15rem 0 0; font-size: .875rem; line-height: 1.45; color: var(--cf-muted); }

.mu-finder-label { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 999px; border: 1px solid transparent; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.mu-finder-label::before { content: ""; flex: none; width: .55rem; height: .55rem; border-radius: 50%; box-sizing: border-box; }
.mu-finder-label[data-tier="strong"] { background: var(--cf-navy); color: #fff; }
.mu-finder-label[data-tier="strong"]::before { background: var(--cf-gold-soft); }
.mu-finder-label[data-tier="good"] { background: var(--cf-gold-tint); border-color: var(--cf-gold-soft); color: var(--cf-navy); }
.mu-finder-label[data-tier="good"]::before { border: 2px solid var(--cf-navy); background: transparent; }
.mu-finder-label[data-tier="look"] { background: #fff; border-color: var(--cf-line-strong); color: #404040; }
.mu-finder-label[data-tier="look"]::before { width: .4rem; height: .4rem; background: #8C8C8C; }
.mu-finder-label:empty { display: none; }

.mu-cf-glance { grid-area: glance; display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; padding: .55rem 0 0; border-top: 1px dashed var(--cf-line); }
.mu-cf-glance > div { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.mu-cf-glance dt { display: inline-flex; align-items: center; }
.mu-cf-glance dt > span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mu-cf-glance dd { margin: 0; font-family: var(--cf-sans); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--cf-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }

.mu-cf-why { grid-area: why; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.45; }
.mu-cf-why[hidden] { display: none; }
.mu-finder-card[data-open="1"] .mu-cf-why { display: block; overflow: visible; }
.mu-cf-why li { position: relative; display: inline; margin: 0 .9rem 0 0; padding-left: 1.05rem; font-size: .9375rem; line-height: 1.45; color: var(--cf-ink); }
.mu-cf-why li::before { content: ""; position: absolute; left: .1rem; top: .5rem; width: .4rem; height: .4rem; rotate: 45deg; border-radius: 1px; background: linear-gradient(135deg, var(--cf-gold-soft), var(--cf-gold-deep)); }

.mu-cf-toggle { grid-area: toggle; align-self: start; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0 -.25rem 0 0; border: 1px solid var(--cf-line-strong); border-radius: 50%; background: #fff; color: var(--cf-navy); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .35s var(--cf-ease); }
.mu-cf-toggle svg { width: 1.125rem; height: 1.125rem; }
.mu-cf-row:hover .mu-cf-toggle { border-color: var(--cf-navy); }
.mu-cf-toggle[aria-expanded="true"] { background: var(--cf-navy); border-color: var(--cf-navy); color: #fff; transform: rotate(180deg); }
.mu-cf-toggle:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; }

/* middle widths: the four facts sit to the right of the name, two by two */
@container cfresults (min-width: 36rem) and (max-width: 49.99rem) {
  .mu-cf-row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mark id glance toggle" "why why why why"; gap: .45rem 1rem; }
  .mu-cf-glance { display: grid; grid-template-columns: 5.25rem 6.75rem; gap: .15rem 1rem; padding: 0; border-top: 0; }
  .mu-cf-toggle { align-self: center; }
  .mu-cf-county { display: inline; }
}

/* wide list: the facts line up in columns, like a league table */
@container cfresults (min-width: 50rem) {
  .mu-cf-cols, .mu-cf-row { --cf-grid: 5rem 3.75rem 4.5rem 6.5rem 2.75rem; }
  .mu-cf-cols { display: grid; grid-template-columns: minmax(0, 1fr) var(--cf-grid); gap: 0 .75rem; align-items: end; margin: 1.1rem 0 0; padding: 0 1rem .45rem 1.1rem; border-bottom: 1px solid var(--cf-line-strong); font-weight: 600; line-height: 1.25; }
  .mu-cf-cols > span { display: block; }
  .mu-cf-cols > span:first-child, .mu-cf-cols > span:last-child { display: block; }
  .mu-cf-cols > span:first-child { padding-left: 3.75rem; }
  .mu-cf-cols > span[data-k]::before { content: none; }
  .mu-cf-cols small { display: block; }
  .mu-cf-cols + .mu-finder-list { margin-top: .6rem; }
  .mu-cf-row { grid-template-columns: 3rem minmax(0, 1fr) var(--cf-grid); grid-template-areas: "mark id g1 g2 g3 g4 toggle" "mark why why why why why toggle"; gap: .2rem .75rem; padding: .7rem 1rem .75rem 1.1rem; }
  .mu-cf-row-nowhy { grid-template-areas: "mark id g1 g2 g3 g4 toggle"; }
  .mu-cf-mark, .mu-cf-toggle { align-self: center; }
  .mu-cf-toggle { margin: 0; }
  .mu-cf-glance { display: contents; }
  .mu-cf-glance > div { display: block; }
  .mu-cf-glance > div:nth-child(1) { grid-area: g1; }
  .mu-cf-glance > div:nth-child(2) { grid-area: g2; }
  .mu-cf-glance > div:nth-child(3) { grid-area: g3; }
  .mu-cf-glance > div:nth-child(4) { grid-area: g4; }
  .mu-cf-glance dt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .mu-cf-glance dt::before { content: none; }
  .mu-cf-why, .mu-finder-card[data-open="1"] .mu-cf-why { display: flex; flex-wrap: wrap; gap: .1rem 1.1rem; overflow: visible; }
  .mu-cf-why li { display: block; margin: 0; font-size: .875rem; }
  .mu-cf-county { display: inline; }
}
@container cfresults (min-width: 58rem) {
  .mu-cf-cols, .mu-cf-row { --cf-grid: 6.5rem 5rem 5.75rem 8.5rem 2.75rem; }
  .mu-cf-cols { gap: 0 1rem; }
  .mu-cf-row { gap: .2rem 1rem; }
  .mu-cf-cols > span:first-child { padding-left: 4rem; }
}

/* ------------------------------------------------------------
   THE OPEN ROW: every fact, sorted into groups
   ------------------------------------------------------------ */
.mu-cf-detail { border-top: 1px solid var(--cf-line); background: var(--cf-cream); border-radius: 0 0 1rem 1rem; padding: 1.15rem 1.1rem 1.25rem; animation: mu-cf-drop .35s var(--cf-ease); }
.mu-cf-detail[hidden] { display: none; }
.mu-cf-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mu-cf-tags li { display: inline-flex; align-items: center; min-height: 2rem; padding: .2rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--cf-line-strong); font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--cf-navy); }
.mu-cf-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.mu-cf-group { min-width: 0; padding: 1rem 1.1rem 1.1rem; background: #fff; border: 1px solid var(--cf-line); border-radius: .85rem; }
.mu-cf-group[hidden] { display: none; }
.mu-finder-card h5 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; font-family: var(--cf-sans); font-size: .875rem; font-weight: 700; letter-spacing: .09em; line-height: 1.2; text-transform: uppercase; color: var(--cf-navy); }
.mu-finder-card h5 svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--cf-bronze); }
.mu-finder-card h5.mu-cf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mu-cf-facts { display: grid; gap: .75rem; margin: 0; }
.mu-cf-facts > div { min-width: 0; }
.mu-cf-facts dt { font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--cf-muted); }
.mu-cf-facts dd { margin: .1rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--cf-ink); }

.mu-cf-temp { position: relative; height: 1.9rem; margin: 0 0 .85rem; }
.mu-cf-temp-track { position: absolute; left: 0; right: 0; top: 1.25rem; height: .4rem; border-radius: 999px; background: var(--cf-ivory); box-shadow: inset 0 0 0 1px var(--cf-line); }
.mu-cf-temp-fill { position: absolute; top: 1.25rem; height: .4rem; border-radius: 999px; background: linear-gradient(90deg, #5FBCE2 0%, var(--cf-gold-soft) 55%, var(--cf-gold-deep) 100%); }
.mu-cf-temp-lo, .mu-cf-temp-hi { position: absolute; top: 0; font-family: var(--cf-sans); font-size: .875rem; font-weight: 700; line-height: 1; color: var(--cf-navy); font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.mu-cf-snow { display: flex; gap: .25rem; margin: 0 0 .85rem; }
.mu-cf-snow i { flex: 1 1 0; height: .4rem; border-radius: 999px; background: var(--cf-ivory); box-shadow: inset 0 0 0 1px var(--cf-line); }
.mu-cf-snow i.is-on { background: #5FBCE2; box-shadow: none; }

.mu-cf-homes { margin-top: .75rem; }
.mu-finder-card [data-slot="prices"] p { margin: 0 0 .55rem; font-size: .875rem; font-weight: 600; line-height: 1.4; color: var(--cf-muted); }
.mu-finder-card [data-slot="prices"] p + ul + p { margin: .6rem 0 0; font-weight: 500; color: var(--cf-ink); }
.mu-finder-card [data-slot="prices"] ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mu-finder-card [data-slot="prices"] a { display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--cf-line-strong); background: #fff; font-size: .875rem; font-weight: 500; line-height: 1.2; color: var(--cf-navy); text-decoration: none; transition: border-color .2s, background-color .2s; }
.mu-finder-card [data-slot="prices"] a:hover { border-color: var(--cf-navy); background: var(--cf-cream); }
.mu-finder-card [data-slot="prices"] a.font-bold { border-color: var(--cf-gold); background: var(--cf-gold-tint); box-shadow: 0 0 0 1px var(--cf-gold); font-weight: 700; }
.mu-finder-card [data-slot="prices"][hidden] { display: none; }
.mu-cf-census { display: grid; gap: .75rem 1.5rem; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--cf-line); }
.mu-cf-homes [data-slot="prices"][hidden] + .mu-cf-census { margin-top: 0; padding-top: 0; border-top: 0; }

.mu-cf-foot { display: grid; gap: 1rem; margin-top: .75rem; }
.mu-cf-links, .mu-cf-side { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.mu-cf-links a, .mu-cf-side a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .4rem 1rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s, transform .3s var(--cf-ease); }
.mu-cf-links a { background: var(--cf-navy); border: 1px solid var(--cf-navy); color: #fff; }
.mu-cf-links a::after { content: "\2192"; font-weight: 400; transition: transform .3s var(--cf-ease); }
.mu-cf-links a:hover { background: #0B1750; transform: translateY(-1px); }
.mu-cf-links a:hover::after { transform: translateX(3px); }
/* the homes for sale link leads; the rest stand back */
.mu-cf-links li:not(:nth-child(2)) a { background: #fff; border-color: var(--cf-line-strong); color: var(--cf-navy); }
.mu-cf-links li:not(:nth-child(2)) a:hover { border-color: var(--cf-navy); background: var(--cf-cream); }
.mu-cf-side a { background: #fff; border: 1px solid var(--cf-gold-soft); color: var(--cf-navy); }
.mu-cf-side a:hover { background: var(--cf-navy); border-color: var(--cf-navy); color: #fff; }
.mu-cf-links a:focus-visible, .mu-cf-side a:focus-visible, .mu-finder-card [data-slot="prices"] a:focus-visible { outline: 2px solid var(--mu-ring-light, #1278A7); outline-offset: 2px; }
.mu-cf-sidewrap[hidden] { display: none; }

.mu-cf-cta { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: .85rem; background: var(--cf-navy); color: #fff; }
.mu-cf-cta img { flex: none; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(220, 193, 150, .6); }
.mu-cf-cta p { margin: 0; font-size: .9375rem; line-height: 1.55; color: #F1EDE4; }
.mu-cf-cta a.mu-link { color: var(--cf-gold-soft); text-decoration-color: rgba(220, 193, 150, .5); font-weight: 600; }
.mu-cf-cta a.mu-link:hover { color: #fff; text-decoration-color: #fff; }
.mu-cf-cta a.mu-link:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }

@container cfresults (min-width: 40rem) {
  .mu-cf-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mu-cf-census { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container cfresults (min-width: 56rem) {
  .mu-cf-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mu-cf-foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
  .mu-cf-foot:has(.mu-cf-sidewrap[hidden]) { grid-template-columns: minmax(0, 1fr); }
}

.mu-cf-more { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.25rem; }
#mu-finder-more[hidden], #mu-finder-compare[hidden] { display: none; }
#mu-finder-compare { margin: 0; font-size: 1rem; }
#mu-finder-error { margin-top: 1rem; padding: 1rem 1.25rem; border-radius: .7rem; background: #FCEBED; border: 1px solid #F1A6AF; color: #861826; font-size: .875rem; font-weight: 500; }

/* ------------------------------------------------------------
   THE MAP PANEL
   ------------------------------------------------------------ */
.mu-cf-map { min-width: 0; border-radius: 1.25rem; background: radial-gradient(120% 90% at 80% 0%, #10205F 0%, var(--cf-navy) 45%, var(--cf-navy-deep) 100%); color: #fff; box-shadow: var(--cf-shadow-lift); overflow: hidden; }
.mu-cf-map[hidden] { display: none; }
.mu-cf-map-in { display: grid; gap: .25rem 1.5rem; padding: 1.15rem 1.25rem 1.25rem; }
.mu-cf-map-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.75rem; }
.mu-cf-map-title { margin: 0; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--cf-gold-soft); }
.mu-cf-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(220, 193, 150, .55); background: rgba(255, 255, 255, .07); font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; color: #fff; cursor: pointer; transition: background-color .2s; }
.mu-cf-back svg { width: 1rem; height: 1rem; }
.mu-cf-back:hover { background: rgba(220, 193, 150, .2); }
.mu-cf-back:focus-visible, .mu-cf-region:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }
.mu-cf-back[hidden] { display: none; }
.mu-cf-canvas { position: relative; }
.mu-cf-canvas svg { display: block; width: 100%; height: auto; max-height: 30rem; overflow: hidden; border-radius: .6rem; touch-action: manipulation; cursor: pointer; }
.mu-cf-region { outline: none; }
.mu-cf-region:hover .mu-cf-region-shape, .mu-cf-region:focus-visible .mu-cf-region-shape { fill: color-mix(in oklab, var(--rfill, #27507F) 70%, #DCC196); }
.mu-cf-map[data-zoom] .mu-cf-region:not(.is-on) .mu-cf-region-shape { opacity: .28; }
.mu-cf-map[data-zoom] .mu-cf-region.is-on .mu-cf-region-shape { fill: color-mix(in oklab, var(--rfill, #27507F) 80%, #050929); }
.mu-cf-map[data-zoom] .mu-cf-place, .mu-cf-map[data-zoom] .mu-cf-place-tick { display: none; }

.mu-cf-cap { min-height: 4.4rem; margin: .85rem 0 0; padding: .7rem .9rem; border-radius: .7rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(220, 193, 150, .25); }
.mu-cf-cap-name { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font-family: var(--cf-serif); font-size: 1.1875rem; font-weight: 600; line-height: 1.2; color: #fff; }
.mu-cf-cap-name .mu-finder-label[data-tier="strong"] { background: var(--cf-gold-soft); color: var(--cf-navy); }
.mu-cf-cap-name .mu-finder-label[data-tier="strong"]::before { background: var(--cf-navy); }
.mu-cf-cap-name .mu-finder-label[data-tier="off"] { background: transparent; border-color: rgba(255, 255, 255, .4); color: #E9E2D4; }
.mu-cf-cap-name .mu-finder-label[data-tier="off"]::before { display: none; }
.mu-cf-cap-text { margin: .2rem 0 0; font-size: .875rem; line-height: 1.5; color: #E9E2D4; }
.mu-cf-cap-acts { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .15rem; }
.mu-cf-cap-acts:empty { display: none; }
.mu-cf-cap .mu-cf-textbtn, .mu-cf-cap a.mu-link { min-height: 40px; display: inline-flex; align-items: center; color: var(--cf-gold-soft); font-size: .875rem; font-weight: 600; text-decoration-color: rgba(220, 193, 150, .5); }
.mu-cf-cap .mu-cf-textbtn:hover, .mu-cf-cap a.mu-link:hover { color: #fff; }
.mu-cf-cap .mu-cf-textbtn:focus-visible, .mu-cf-cap a.mu-link:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }

.mu-cf-regions { margin: .85rem 0 0; }
.mu-cf-regions-head { margin: 0 0 .5rem; font-family: var(--cf-sans); font-size: .875rem; font-weight: 600; line-height: 1.2; color: #fff; }
.mu-cf-regions-list { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mu-cf-rchip { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .2rem .45rem .2rem .85rem; border-radius: 999px; border: 1px solid rgba(220, 193, 150, .4); background: rgba(255, 255, 255, .06); font-family: var(--cf-sans); font-size: .875rem; font-weight: 500; line-height: 1.2; color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.mu-cf-rchip b { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; background: rgba(220, 193, 150, .2); font-size: .875rem; font-weight: 700; color: var(--cf-gold-soft); font-variant-numeric: tabular-nums; }
.mu-cf-rchip:hover { background: rgba(220, 193, 150, .18); border-color: var(--cf-gold-soft); }
.mu-cf-rchip[aria-pressed="true"] { background: var(--cf-gold-soft); border-color: var(--cf-gold-soft); color: var(--cf-navy); font-weight: 600; }
.mu-cf-rchip[aria-pressed="true"] b { background: var(--cf-navy); color: #fff; }
.mu-cf-rchip:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }
.mu-cf-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.mu-cf-legend li { display: inline-flex; align-items: center; gap: .45rem; font-size: .875rem; line-height: 1.3; color: #E9E2D4; }
.mu-cf-legend li[hidden] { display: none; }
.mu-cf-key { flex: none; box-sizing: border-box; border-radius: 50%; }
.mu-cf-key[data-tier="strong"] { width: .8rem; height: .8rem; background: var(--cf-gold-soft); box-shadow: 0 0 0 1px #fff; }
.mu-cf-key[data-tier="good"] { width: .7rem; height: .7rem; border: 2px solid var(--cf-gold-soft); }
.mu-cf-key[data-tier="look"] { width: .5rem; height: .5rem; background: #F4EEE2; }
.mu-cf-key[data-tier="other"] { width: .35rem; height: .35rem; background: #8E99C2; }
.mu-cf-key[data-tier="spot"] { width: .85rem; height: .85rem; border: 2px dashed #fff; }

/* a wide map panel (the map opened over the list) sets the drawing beside its notes */
@container cfmap (min-width: 38rem) {
  .mu-cf-map-in { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: center; }
  .mu-cf-map-head { grid-column: 1 / -1; }
  .mu-cf-canvas { grid-row: 2 / span 4; }
  .mu-cf-cap { margin-top: 0; }
}
.mu-cf-map { container-type: inline-size; container-name: cfmap; }
@media (min-width: 1680px) {
  .mu-cf-map { position: sticky; top: 3.75rem; max-height: calc(100vh - 4.75rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(220, 193, 150, .4) transparent; }
  .mu-cf-map[hidden] { display: block; }
  .mu-cf-canvas svg { max-height: min(26rem, calc(100vh - 31rem)); min-height: 14rem; }
  .mu-cf-rchip { min-height: 34px; padding: .1rem .3rem .1rem .7rem; }
  .mu-cf-rchip b { min-width: 1.45rem; height: 1.45rem; }
  .mu-cf-regions-list { gap: .3rem; }
  .mu-cf-cap { min-height: 0; }
}

/* ------------------------------------------------------------
   PHONE: the jump pill, above the site's bottom bar
   ------------------------------------------------------------ */
.mu-cf-jump { position: fixed; left: 50%; bottom: 4.4rem; z-index: 45; display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 1.25rem; border: 1px solid var(--cf-gold); border-radius: 999px; background: var(--cf-navy); font-family: var(--cf-sans); font-size: .9375rem; font-weight: 600; color: #fff; white-space: nowrap; box-shadow: 0 10px 30px -8px rgba(3, 8, 36, .6); cursor: pointer; translate: -50% 0; transition: opacity .25s, translate .35s var(--cf-ease), visibility .25s; }
.mu-cf-jump svg { width: 1rem; height: 1rem; color: var(--cf-gold-soft); transition: transform .3s var(--cf-ease); }
.mu-cf-jump[data-dir="up"] svg { transform: rotate(180deg); }
.mu-cf-jump[hidden] { display: inline-flex; opacity: 0; visibility: hidden; translate: -50% 1rem; pointer-events: none; }
.mu-cf-jump:focus-visible { outline: 2px solid var(--cf-gold); outline-offset: 2px; }
.mu-menu-open .mu-cf-jump { display: none; }
@media (min-width: 1024px) { .mu-cf-jump, .mu-cf-jump[hidden] { display: none; } }

/* ------------------------------------------------------------
   THE PAGES UNDER THE TOOL (preset pages) and the small print
   ------------------------------------------------------------ */
.mu-cf-small { max-width: 60rem; margin-top: 2.5rem; }
.mu-cf-learn { background: #fff; padding: 3.5rem 0; border-top: 1px solid var(--cf-line); }
.mu-cf-learn-grid { display: grid; gap: 1.25rem; margin-top: 2rem; }
.mu-cf-learn-card { padding: 1.5rem 1.5rem 1.65rem; border: 1px solid var(--cf-line); border-radius: 1.1rem; background: var(--cf-cream, #FBF8F2); }
.mu-cf-learn-card h2 { margin: 0; }
.mu-cf-learn-card p { margin: .9rem 0 0; font-size: 1rem; line-height: 1.7; color: #404040; }
.mu-cf-learn-lead { max-width: 46rem; margin: 0; font-size: 1.125rem; line-height: 1.7; color: #404040; }
@media (min-width: 1024px) {
  .mu-cf-learn { padding: 5rem 0; }
  .mu-cf-learn-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
  .mu-cf-learn-card:first-child { grid-row: span 2; }
}

@media (pointer: coarse) {
  .mu-cf-chip, .mu-cf-view, .mu-cf-rchip, .mu-cf-back, .mu-cf-next { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-finder-card.is-new, .mu-cf-detail, .mu-cf-q[open] > .mu-cf-q-body, .mu-cf-atlas .mu-cf-dot[data-tier] { animation: none; }
  .mu-cf-toggle, .mu-cf-q-chev, .mu-cf-jump, .mu-cf-shortcut, .mu-cf-links a, .mu-cf-next::after { transition: none; }
}

/* region fills: the value-stepped sky-navy field of the /cities/ map */
.mu-cf-region[data-region="southern-utah"] { --rfill: #3A4360; }
.mu-cf-region[data-region="salt-lake-county"] { --rfill: #3C6AA0; }
.mu-cf-region[data-region="utah-valley"] { --rfill: #27507F; }
.mu-cf-region[data-region="davis-county"] { --rfill: #4E7CB0; }
.mu-cf-region[data-region="weber-morgan"] { --rfill: #2A5488; }
.mu-cf-region[data-region="cache-valley"] { --rfill: #37669E; }
.mu-cf-region[data-region="box-elder"] { --rfill: #244B7E; }
.mu-cf-region[data-region="tooele-county"] { --rfill: #305C92; }
.mu-cf-region[data-region="wasatch-back"] { --rfill: #456FA2; }
.mu-cf-region[data-region="central-utah"] { --rfill: #22466F; }
.mu-cf-region[data-region="eastern-utah"] { --rfill: #1C3A66; }