/* Bestway market map — shared tokens and components.
   Palette matches the market story (market-story/story.css): electric cobalt,
   pale lavender, cool off-white and near-black ink. */
:root {
  --bg: #F5F3FF;            /* story paper */
  --surface: #FFFFFF;
  --surface-muted: #EFECFB;
  --map-bg: #FAF9FF;
  --ink: #111124;           /* story ink */
  --ink-muted: #5E5D72;     /* story muted, darkened slightly for small text on lavender */
  --ink-subtle: #6B6982;
  --line: #CFC9EB;          /* story rule */
  --line-soft: #E4E0F5;
  --line-dashed: #A9A2C7;
  --marker-open: #6E6A8A;
  --brand: #1F00FF;         /* story cobalt */
  --brand-hover: #1700BF;
  --brand-tint: #DED8FF;    /* story lavender */
  --neighbor: #7D7299;      /* neighboring trade areas: the story map's gray, darkened to read on Google's basemap */
  --alert: #B23A0A;
  --shade-1: #DED8FF;
  --shade-2: #BFB3FF;
  --shade-3: #9D8CFF;
  --on-dark-muted: #C9C4E6;

  --font-body: Inter, system-ui, sans-serif;
  --font-display: 'Space Grotesk', Inter, sans-serif;
  --radius: 8px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
}
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* ---------- Story nav ---------- */
/* Light masthead, like the market story's: ink text, cobalt for the current step. */
.story-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px 32px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.story-nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border-radius: 6px; color: var(--ink-muted); text-decoration: none; font-weight: 500;
}
.story-nav a:hover { color: var(--ink); background: var(--surface-muted); }
.story-nav a[aria-current="page"] { color: #FFFFFF; background: var(--brand); }

/* ---------- Page shell ---------- */
.page {
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.page--loose { gap: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.row--stretch { align-items: stretch; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Header ---------- */
.page-header {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: flex-end; justify-content: space-between;
}
.page-header__intro { display: flex; flex-direction: column; gap: 4px; min-width: 280px; max-width: 820px; }
.eyebrow {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
}
h1 {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: 30px; line-height: 1.15;
}
.muted { color: var(--ink-muted); }
.small { font-size: 12px; }
.alert { color: var(--alert); }
.strong { font-weight: 600; }
.num { text-align: right; }

/* ---------- Stat tiles ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 16px; min-width: 140px;
}
.stat__value { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.stat__label { font-size: 12px; color: var(--ink-muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.card--wide { padding: 16px 20px; gap: 12px; }
.card--tight { padding: 12px; }
.card--pending { background: var(--surface-muted); border-style: dashed; border-color: var(--line-dashed); }
.card--dark { background: var(--brand); color: #FFFFFF; border: 0; padding: 20px 24px; gap: 16px; }
.card--dark .eyebrow, .card--dark .muted { color: var(--brand-tint); }
.card--scroll { overflow-x: auto; }
.card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.card__footnote { font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line-soft); padding-top: 8px; }

/* ---------- Form controls ---------- */
.check { display: flex; gap: 10px; align-items: center; min-height: 28px; cursor: pointer; }
.check input { margin: 0; accent-color: var(--brand); }
.check--disabled { color: var(--ink-muted); cursor: not-allowed; }

/* ---------- Buttons / badges ---------- */
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  background: var(--brand); color: #FFFFFF; border-radius: 6px; text-decoration: none; font-weight: 600;
}
.btn:hover { background: var(--brand-hover); color: #FFFFFF; }
.badge {
  display: inline-block; background: var(--brand); color: #FFFFFF;
  border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 600;
}
.badge--outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); }
.badge--lg { font-size: 14px; padding: 2px 10px; }
.pill {
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
}

/* ---------- Map ---------- */
.map { width: 100%; height: auto; display: block; background: var(--map-bg); border-radius: 6px; }
.legend {
  display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center;
  padding: 0 4px; font-size: 12px; color: var(--ink-muted);
}
.legend span { display: inline-flex; gap: 8px; align-items: center; }
.layer[hidden], .map[hidden] { display: none; }
.map-live--footprint { aspect-ratio: 864 / 440; min-height: 320px; }
.map-live--snapshot { aspect-ratio: 420 / 320; min-height: 280px; }
/* Store markers sit on a white ring with a shadow so they read on any basemap.
   Bestway is the larger mark (30px), edged in cobalt; Rent-A-Center keeps its round logo. */
.map-store-marker { position: relative; width: max-content; transform: translateY(50%); cursor: pointer; }
.map-store-marker__logo { display: block; width: 26px; height: 26px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #11112440, 0 2px 6px #11112459; }
.map-store-marker__logo img { display: block; width: 22px; height: 22px; max-width: none; }
/* The official wordmark's B tile (source pixels 5-89 x 3-79) is the compact marker; the source image stays intact. */
.map-store-marker__logo--bestway { width: 30px; height: 27.6px; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--brand), 0 2px 8px #11112473; }
.map-store-marker__logo--bestway img, .map-cluster__logo img { width: 146.8px; height: 35.5px; margin: -0.9px 0 0 -1.5px; }
.map-store-marker__logo--generic { display: flex; align-items: center; justify-content: center; background: var(--marker-open); color: #fff; font: 700 8px Inter,system-ui,sans-serif; }
.map-store-marker__closed { position: absolute; right: -6px; top: -6px; width: 14px; height: 14px; border: 1.5px solid #fff; border-radius: 50%; background: var(--alert); color: #fff; font: 700 13px/10px Inter,system-ui,sans-serif; text-align: center; }
.map-marker-label { padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: #fffffff2; box-shadow: 0 1px 2px #11112426; color: var(--ink); font: 600 11px/16px Inter,system-ui,sans-serif; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.map-store-marker__label { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); width: max-content; }
.map-store-marker__label[hidden] { display: none; }
.map-cluster { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 1px 4px #11112466; font: 700 12px/1 Inter,system-ui,sans-serif; transform: translateY(50%); cursor: pointer; }
.map-cluster--closed { background: var(--alert); }
.map-cluster--bestway { width: 30px; height: 27.6px; background: #fff; color: var(--brand); border-radius: 6px; box-shadow: 0 0 0 1.5px var(--brand), 0 2px 8px #11112473; }
.map-cluster__logo { display: block; width: 26px; height: 23.6px; overflow: hidden; border-radius: 4px; }
.map-cluster__logo img { display: block; max-width: none; }
.map-cluster--rac { width: 26px; height: 26px; background: #fff; box-shadow: 0 1px 2px #11112440, 0 2px 6px #11112459; }
.map-cluster__logo--rac { width: 22px; height: 22px; border-radius: 50%; }
.map-cluster__logo--rac img { width: 22px; height: 22px; margin: 0; }
.map-cluster--bestway .map-cluster__count, .map-cluster--rac .map-cluster__count { position: absolute; top: -9px; right: -11px; min-width: 18px; height: 18px; padding: 0 4px; border: 1.5px solid #fff; border-radius: 9px; background: var(--brand); color: #fff; box-shadow: 0 1px 3px #11112459; font: 700 10px/15px Inter,system-ui,sans-serif; text-align: center; }
.map-cluster--rac .map-cluster__count { background: var(--ink); }
.map-store-marker--selected .map-store-marker__logo, .map-cluster--selected { box-shadow: 0 0 0 3px var(--brand), 0 0 0 5px #fff, 0 2px 10px #11112480; }
.map-bestway-cluster-count { padding: 1px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--brand); }
.map-bestway-cluster-count--selected, .map-marker-label--selected { outline: 2px solid var(--brand); outline-offset: 2px; }
.map [data-layer="bestway"] .is-selected circle { stroke: var(--brand); stroke-width: 2.5px; r: 6px; }
.map-cluster__closed { position: absolute; right: -10px; top: -7px; min-width: 20px; padding: 3px; border: 1px solid #fff; border-radius: 10px; background: var(--alert); color: #fff; font-size: 9px; }
.map-store-chooser { max-width: 320px; color: var(--ink); }
.map-store-chooser__list { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; padding-top: 10px; }
.map-store-chooser__list button { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--brand); font: 500 12px/1.4 Inter,system-ui,sans-serif; text-align: left; cursor: pointer; }
.map-store-chooser__list button:hover, .map-store-chooser__list button:focus-visible { background: var(--surface-muted); outline: 2px solid var(--brand); outline-offset: 1px; }
.legend .chain-logo { display: block; width: 22px; height: 22px; object-fit: contain; }
.legend .chain-logo--bestway { width: 94px; height: 22px; }

/* ---------- Data grids ---------- */
.grid-head {
  font-size: 12px; font-weight: 600; color: var(--ink-muted);
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}
.grid-row { border-bottom: 1px solid var(--line-soft); align-items: center; min-height: 44px; }
.group-label { padding: 16px 0 4px; }

/* Footprint: store list */
.store-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px 48px 76px; gap: 8px; }
.store-grid.grid-head { border-bottom: 0; }
.store-grid--selected {
  min-height: 52px; padding: 0 8px; margin: 0 -8px; align-items: center;
  background: var(--brand); color: #FFFFFF; border-radius: 6px; text-decoration: none;
}
.store-grid--selected:hover { background: var(--brand-hover); color: #FFFFFF; }
.store-rows { max-height: 640px; overflow-y: auto; }
.store-grid .sort {
  all: unset; cursor: pointer; display: block; width: 100%;
}
.store-grid .sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Footprint: quarter strip */
.quarters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.quarters > div { border-top: 3px solid var(--line); padding-top: 8px; }
.quarters > .is-current { border-top-color: var(--alert); }

/* Competitor: profile table */
.profile-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
.profile-grid.grid-head { align-items: end; padding-bottom: 10px; }
.profile-grid.grid-row { min-height: 36px; }

/* Snapshot: competitor table */
.comp-grid { display: grid; grid-template-columns: 28px minmax(0, 2fr) minmax(0, 1.4fr) 60px 110px; gap: 12px; }

/* Questions table */
.q-grid {
  display: grid;
  grid-template-columns: 28px minmax(0, 2.3fr) minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 2fr);
  gap: 16px;
}
.q-grid.grid-head { padding: 12px 0 8px; }
.q-grid.grid-row { align-items: start; padding: 12px 0; border-bottom: 0; border-top: 1px solid var(--line-soft); }
.q-group { font-family: var(--font-display); font-size: 16px; font-weight: 600; padding: 20px 0 6px; }
.q-num { font-family: var(--font-display); font-weight: 600; color: var(--ink-muted); }
.q-title { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Market tiles */
.tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tile {
  flex: 1 1 150px; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.tile__label { font-size: 12px; color: var(--ink-muted); min-height: 34px; }
.tile__value { font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.tile__source { font-size: 12px; color: var(--ink-muted); border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 6px; }

/* Definition lists */
.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; font-weight: 600; }
.facts--pending dd { font-weight: 400; color: var(--ink-muted); }

/* Start: proposal cards */
.proposal {
  flex: 1 1 420px; min-width: 0; border-top: 4px solid var(--brand); padding: 20px 24px; gap: 16px;
}
.proposal h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; }
.proposal__head { display: flex; gap: 12px; align-items: center; }
.proposal__spec { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 16px; }
.proposal__spec > :nth-child(odd) { color: var(--ink-muted); }
.proposal__foot {
  margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 12px;
  display: flex; justify-content: space-between; gap: 12px; font-weight: 600;
}
.price { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; }

/* Start: what the alternatives cost */
.alt-cost { display: flex; flex-direction: column; gap: 12px; }
.alt-cost__lead { margin: 0 0 4px; max-width: 760px; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.25; }
.alt-cost__option { flex: 1 1 420px; min-width: 0; padding: 20px 24px; gap: 12px; }
.alt-cost__figure { display: flex; align-items: baseline; gap: 8px; color: var(--brand); font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; }
.alt-cost__figure span { color: var(--ink-muted); font-family: var(--font-body); font-size: 15px; font-weight: 500; }
.alt-cost__sub { margin: 0; color: var(--ink-muted); }
.cost-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cost-table td { padding: 8px 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.cost-table td + td { padding-left: 12px; }
.cost-table td .muted { display: block; font-size: 12px; }
.cost-table .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cost-table tfoot td { border-top: 2px solid var(--ink); font-weight: 600; }

/* Start: timeline */
.weeks { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.weeks--bars { row-gap: 6px; }
.bar { border-radius: 4px; padding: 8px 10px; font-weight: 500; }
.bar--prep { background: var(--shade-1); }
.bar--work { background: var(--brand); color: #FFFFFF; }
.bar--final { background: var(--ink); color: #FFFFFF; }

/* Spectrum (competitor) */
.spectrum { width: 100%; height: auto; display: block; }

/* ---------- Four-step market flow ---------- */
.footprint-header { flex-direction: column; align-items: stretch; gap: 20px; }
.footprint-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footprint-stats .stat { min-width: 0; padding: 14px 16px; }
.footprint-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.footprint-controls { gap: 10px; }
.footprint-controls .check { align-items: flex-start; }
.footprint-controls .check input { margin-top: 4px; }
.footprint-map { min-width: 0; gap: 12px; }
.footprint-map .map-live--footprint { min-height: 420px; }
.store-picker { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; }
.store-picker select { width: 100%; min-width: 0; padding: 9px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; }
.store-picker .btn { justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.store-picker select:focus-visible, .store-picker .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.flow-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
[data-store-notice][hidden] { display: none; }
.footprint-controls .store-picker { border: 0; padding-top: 0; margin-top: 0; }
.footprint-selection { display: grid; gap: 6px; border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 4px; }
.footprint-selection h3 { margin: 0; font: 600 18px/1.3 var(--font-display); }
.map-clear { min-height: 36px; padding: 6px 10px; background: var(--surface); color: var(--brand); border: 1px solid var(--line); border-radius: 5px; font: 500 13px/1.4 var(--font-body); cursor: pointer; }
.map-clear:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.map-context-controls { border: 0; border-top: 1px solid var(--line-soft); padding: 14px 0 0; margin: 4px 0 0; min-width: 0; }
.map-context-controls legend { padding: 0 0 4px; }
.map-context-controls .check { font-size: 13px; }
.map-context-controls .check:has(input:disabled) { color: var(--ink-muted); cursor: default; }
.store-picker .btn:disabled { opacity: .5; cursor: default; }
.legend span[hidden] { display: none; }
.area-swatch { display: inline-block; width: 18px; height: 12px; border: 1px solid var(--brand); background: #1F00FF24; border-radius: 2px; }
.area-swatch--adjacent { border-color: var(--neighbor); background: #8C84A833; }
.neighbor-links { padding: 0 4px; line-height: 1.6; }
.neighbor-links[hidden], [data-neighbor-legend][hidden] { display: none; }

@media (max-width: 900px) {
  .footprint-workspace { grid-template-columns: minmax(0, 1fr); }
  .footprint-controls { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
  .footprint-controls > h2, .footprint-controls > .card__footnote { width: 100%; }
  .store-picker { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .store-picker select { flex: 1 1 220px; width: auto; }
  .footprint-selection, .map-context-controls { width: 100%; }
  .footprint-map .map-live--footprint { min-height: 340px; }
}

/* ---------- Phone width ---------- */
@media (max-width: 640px) {
  .page { padding: 20px 16px; }
  .story-nav { padding: 8px 16px; }
  h1 { font-size: 24px; }
  .footprint-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quarters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proposal__spec { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .proposal__spec > :nth-child(even) { margin-bottom: 10px; }
  .weeks-scroll { overflow-x: auto; }
  .weeks-scroll > * { min-width: 560px; }
}
/* Ratings stay in Bestway store details, away from the overview markers. */
.btn--rating { padding: 8px 12px; font: inherit; font-size: 13px; }
.btn--rating:disabled { opacity: .55; cursor: default; }
.google-rating__source { display: inline-block; margin-right: 8px; font-size: 12px; color: #5e5e5e; font-weight: 400; white-space: nowrap; }