/* =========================================================
   Covara — Create account page
   Extends styles.css; reuses the site's palette + components.
   ========================================================= */

.account-hero { padding-top: 24px; padding-bottom: 12px; }
.account-hero-grid { max-width: 46rem; }
.account-hero h1 { margin-top: 4px; }

.account-wizard-section { padding-top: 4px; }
.account-shell { max-width: 760px; }

/* ---------- Account menu (2026-09) ----------
   The "⋮" overflow menu in dashboard.html's header -- mirrors Android/
   iOS's account menu. Replaces what used to be separate always-visible
   Report-an-issue/Change-password/Log-out/theme-toggle buttons plus a
   hamburger+mobile-nav duplicating the first three; this single control
   is visible at every viewport width, so the old
   ".dash-body .nav-toggle / .mobile-nav" mobile overrides below are gone
   too -- there's nothing left to collapse into a hamburger. */
/* Dashboard tab nav slot in the header (2026-09) -- see dashboard.html's
   #headerTabsBar comment and dashboard.js's render()/DASH_TAB_STYLES
   (.dash-tabs-bar) for the actual tab markup/behavior this hosts. Needs its
   own flex/min-width here (not just on the .dash-tabs-bar child it's given
   every render) so it can actually shrink below its content's natural width
   in the header row -- a flex item's default min-width is `auto`, which
   would otherwise stop it (and the tabs inside it) from ever getting
   narrower than the widest unbroken run of tab labels, pushing the account
   menu off the edge on a narrow viewport instead of letting the tabs
   scroll. */
.dash-header-tabs { display: flex; flex: 1 1 auto; min-width: 0; }
.account-menu-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.account-menu-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, border-color .2s ease;
}
.account-menu-btn:hover,
.account-menu-btn[aria-expanded="true"] { background: var(--panel-alt); }

.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 224px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(20, 20, 43, 0.14);
  padding: 6px;
}
.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  cursor: pointer;
  text-decoration: none;
}
.account-menu-item:hover { background: var(--panel-alt); }
.account-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.account-menu-label {
  padding: 8px 12px 2px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-soft);
}
.account-menu-options { display: flex; flex-direction: column; padding: 2px 4px 4px; }
.account-menu-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.account-menu-opt:hover { background: var(--panel-alt); }
.account-menu-opt .opt-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.6px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.account-menu-opt[aria-checked="true"] .opt-dot { border-color: var(--indigo); }
.account-menu-opt[aria-checked="true"] .opt-dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo);
}
.account-menu-version {
  padding: 6px 12px 4px;
  font-size: .76rem;
  color: var(--muted-soft);
  text-align: center;
}
@media (max-width: 760px) {
  .account-menu { right: -4px; min-width: 208px; }
}

/* ---------- Role toggle ---------- */
.role-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.role-tab {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.role-tab:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.role-tab-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  font-size: .72rem;
  color: var(--muted-soft);
  margin-bottom: 6px;
}
.role-tab-title { display: block; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.role-tab.active {
  border-color: var(--indigo);
  background: var(--softblush);
  box-shadow: var(--shadow-md);
}
.role-tab.active .role-tab-eyebrow { color: var(--blush-700); }
.role-tab-blush.active { border-color: var(--blush); }

/* ---------- Stepper ---------- */
.stepper { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.stepper .dot { flex: 1; min-width: 18px; height: 6px; border-radius: 4px; background: var(--line); }
.stepper .dot.done { background: var(--blush); }
.stepper .dot.current { background: var(--indigo); }
.step-meta { font-size: .85rem; color: var(--muted-soft); margin-bottom: 18px; }

/* ---------- Card ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.card h2 { margin-bottom: 6px; }

/* ---------- Signup + guide layout ----------
   The guide docks to the right of the wizard card on a wide screen and drops
   below it on a narrow one. Deliberately NOT floating: it should read as part
   of the page beside the form, not a chat widget hovering over it.
   minmax(0,1fr) so a long field can't push the guide off the grid. */
.signup-with-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.signup-guide-host { position: sticky; top: 92px; }
@media (max-width: 1040px) {
  .signup-with-guide { grid-template-columns: 1fr; }
  .signup-guide-host { position: static; }
}

/* ---------- Fields ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field .hint { font-size: .78rem; color: var(--muted-soft); margin-top: 5px; }
.hint { font-size: .85rem; color: var(--muted); }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=time], select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-sans);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }
textarea { resize: vertical; min-height: 76px; }

/* ---------- Password visibility toggle (login + registration) ---------- */
.pw-field { position: relative; }
.pw-field input[type=password], .pw-field input[type=text] { padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--muted-soft); cursor: pointer;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }
.pw-toggle svg { width: 19px; height: 19px; pointer-events: none; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
/* Opt-in modifier for a row2 whose two labels are known to differ in line
   count (e.g. "Physical assistance you're comfortable with" wrapping to 2
   lines next to "Your energy level" on 1) -- reserves 2 lines' worth of
   label height on both sides so their inputs still start at the same Y.
   Deliberately scoped to .row2--label2ln rather than applied to every
   row2/row3 (most pairs have short, equal-length labels and gain nothing
   from the extra reserved space -- it would just add an unwanted gap).
   Also deliberately NOT solved via align-items: end on the row -- that
   anchors the whole field box to the bottom, which fixes this case but
   breaks the opposite one (a field with hint text BELOW its input, like
   "Expected hourly rate ($)", sitting next to one without, like "Years of
   experience": the extra height there comes after the input, so
   bottom-anchoring pushes the shorter field's input down instead of
   lining the two up). Reserving label height only touches the space
   before the input, so it never disturbs that other case. */
.row2--label2ln .field > label { min-height: 2.2rem; line-height: 1.3; }

/* ---------- Check grid ---------- */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.check-item {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: .92rem; cursor: pointer; color: var(--ink);
}
.check-item input { margin: 0; }
.check-item.checked { border-color: var(--indigo); background: var(--softblush); }
.check-item.disabled { cursor: default; opacity: .6; background: var(--panel-alt); }

/* ---------- Service groups ---------- */
.service-group { margin-bottom: 4px; }
.service-group-title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-soft);
  margin: 0 0 8px;
}
.out-of-scope { margin-top: 4px; }

/* ---------- Day pills ---------- */
.day-row { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.day-pill {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; cursor: pointer; color: var(--ink);
}
.day-pill.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* ---------- Profile photo ---------- */
.profile-photo-field { margin-bottom: 18px; }
.profile-photo-row { display: flex; align-items: center; gap: 16px; }
.profile-photo-preview {
  width: 96px; height: 96px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--panel-alt);
  object-fit: cover; flex-shrink: 0;
}
.profile-photo-preview-sm { width: 64px; height: 64px; }

/* ---------- References ---------- */
.reference-add-form {
  border-top: 1px solid var(--line-strong);
  padding-top: 14px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .01em;
}
.badge.pending { background: #FBF3E3; color: #8A6A1F; }
.badge.good { background: #E5F1E8; color: #3F7A57; }
.badge.uncovered { background: #FBE9E7; color: #B23A2E; }

/* ---------- Subcards ---------- */
.subcard { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px; background: var(--panel-alt); }
.subcard h3 { font-size: 1rem; margin-bottom: 4px; }
.subcard p { font-size: .88rem; color: var(--muted); margin: 0 0 10px; }

/* ---------- Email code inputs ---------- */
.code-inputs { display: flex; gap: 8px; }
.code-inputs input { width: 46px; height: 54px; text-align: center; font-size: 1.25rem; font-weight: 700; }

/* ---------- Backup codes (shown once after email verification) ---------- */
.backup-codes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; margin-bottom: 14px; }
.backup-codes-grid code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem; letter-spacing: .06em; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  user-select: all;
}
.backup-codes-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.backup-codes-actions .hint { margin: 0; }
@media (max-width: 420px) { .backup-codes-grid { grid-template-columns: 1fr; } }

/* ---------- Actions ---------- */
.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
.btn-link { background: none; border: none; color: var(--indigo); font-size: .85rem; cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; }

/* ---------- Errors ---------- */
.error { color: #A23B3B; font-size: .8rem; margin-top: 6px; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #A23B3B; }
.field.invalid .error { display: block; }

/* ---------- Review ---------- */
.review-section { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review-section:last-child { border-bottom: none; }
.review-section h3 { font-size: .92rem; margin-bottom: 8px; }
.review-row { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; padding: 3px 0; color: var(--ink); }
.review-row span:first-child { color: var(--muted-soft); }

.terms { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); margin-top: 18px; }
.terms input { margin-top: 3px; }

/* ---------- Success ---------- */
.success { text-align: center; padding: 56px 20px; }
.success .mark {
  width: 60px; height: 60px; border-radius: 50%; background: #E5F1E8; color: #3F7A57;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 28px;
}
.status-track { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 24px auto 0; text-align: left; }
.status-track .item { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink); }
.status-track .item .ico {
  width: 20px; height: 20px; border-radius: 50%; background: #3F7A57; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .68rem; flex: none;
}
.status-track .item.future .ico { background: var(--line-strong); color: var(--muted-soft); }
.status-track .item.future { color: var(--muted-soft); }

/* ---------- Schedule calendar ---------- */
.calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.calendar-nav h4 { margin: 0; font-size: .95rem; }
.calendar-weekdays, .calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.calendar-weekdays { margin-bottom: 6px; }
.calendar-weekday { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-soft); text-align: center; }
.calendar-day {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel);
  min-height: 58px; padding: 6px; text-align: left; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; color: var(--ink);
}
.calendar-day.empty { visibility: hidden; pointer-events: none; border: none; background: none; }
.calendar-day.outside-horizon { opacity: .45; cursor: not-allowed; background: var(--panel-alt); }
.calendar-day.has-override { border-color: var(--indigo); }
.calendar-day.selected { box-shadow: 0 0 0 2px var(--indigo) inset; }
.calendar-day-num { font-weight: 700; font-size: .82rem; }
.calendar-day-tag { font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; align-self: flex-start; }
.calendar-day-tag.default { background: #EEF0F8; color: var(--muted-soft); }
.calendar-day-tag.override { background: #E5F1E8; color: #3F7A57; }
.calendar-day-tag.off { background: #FBF3E3; color: #8A6A1F; }
.override-editor { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }

@media (max-width: 760px) {
  /* Dashboard header (2026-09): the old "keep all four buttons visible
     instead of collapsing into a hamburger" overrides that used to live
     here are gone along with those buttons -- the account-menu button
     above is already visible at every width, nothing left to collapse. */
  .role-toggle { grid-template-columns: 1fr; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .card { padding: 22px; }
  .calendar-day { min-height: 44px; padding: 4px; }
  .calendar-day-tag { font-size: .56rem; padding: 1px 5px; }
}

/* Cloudflare Turnstile widget spacing (login + signup forms) */
.turnstile-widget { margin: 4px 0 18px; min-height: 65px; }

/* Address autocomplete dropdown (profile step) */
.addr-field { position: relative; }
.addr-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 28px rgba(20, 20, 43, 0.14);
  max-height: 244px;
  overflow-y: auto;
}
.addr-item {
  padding: 10px 12px;
  font-size: .88rem;
  line-height: 1.3;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.addr-item:last-child { border-bottom: none; }
.addr-item:hover,
.addr-item.active { background: var(--panel-alt); }

/* ---------- Family match filters ---------- */
.match-filters{
  display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end;
  margin-bottom:12px;
}
/* Dual-handle range slider: two <input type=range> stacked on one track, with
   a colored fill between the thumbs. pointer-events live on the thumbs so both
   handles stay grabbable even though the inputs overlap. */
.dual-range{ position:relative; height:26px; width:100%; }
.dual-range-track{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:5px; border-radius:999px; background:var(--line,#e5e5ef);
}
.dual-range-fill{
  position:absolute; top:50%; transform:translateY(-50%);
  height:5px; border-radius:999px; background:var(--indigo,#3A3A6E);
}
.dual-range-input{
  position:absolute; left:0; top:0; width:100%; height:26px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent;
  pointer-events:none;
}
.dual-range-input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto; cursor:pointer;
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:2px solid var(--indigo,#3A3A6E); box-shadow:0 1px 2px rgba(42,42,82,.25);
}
.dual-range-input::-moz-range-thumb{
  pointer-events:auto; cursor:pointer;
  width:18px; height:18px; border-radius:50%; background:#fff;
  border:2px solid var(--indigo,#3A3A6E); box-shadow:0 1px 2px rgba(42,42,82,.25);
}
.dual-range-input::-webkit-slider-runnable-track{ background:transparent; }
.dual-range-input::-moz-range-track{ background:transparent; }

.match-filters label{
  display:flex; flex-direction:column; gap:4px;
  font-size:12.5px; color:var(--muted,#5b5b6b); min-width:150px; flex:1 1 150px;
}
.match-filters label b{ color:var(--text,#1c1c28); font-weight:600; }
.match-filters input[type="range"]{ width:100%; }
.match-filters .btn{ flex:0 0 auto; }

/* ---------- CNA matches carousel ---------- */
.match-carousel{ position:relative; }
.match-car-track{
  display:flex; gap:0; overflow-x:auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; border-radius:12px;
}
.match-car-track::-webkit-scrollbar{ display:none; }
.match-car-slide{
  flex:0 0 100%; max-width:100%; min-width:0;
  scroll-snap-align:start; scroll-snap-stop:always;
  box-sizing:border-box; padding:2px 46px; /* keep card clear of the arrows */
}
.match-car-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong,#c9c9de);
  background:var(--panel,#fff); color:var(--indigo,#3A3A6E);
  font-size:20px; line-height:1; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(42,42,82,.12);
}
.match-car-nav:hover{ background:var(--panel-alt,#f7f7fb); }
.match-car-nav.prev{ left:2px; }
.match-car-nav.next{ right:2px; }
.match-car-dots{
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px;
}
.match-car-dot{
  width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--line-strong,#c9c9de);
}
.match-car-dot.active{ background:var(--indigo,#3A3A6E); transform:scale(1.25); }
@media (max-width:640px){
  .match-car-slide{ padding:2px 6px 2px 6px; }
  .match-car-nav{ width:30px; height:30px; opacity:.85; }
  .match-car-nav.prev{ left:-4px; }
  .match-car-nav.next{ right:-4px; }
}

/* ---------- Early coverage warning banner (recipient / profile edit) ---------- */
.cov-warn{ margin-top:12px; }
.cov-warn[hidden]{ display:none; }
.cov-warn-in{
  border:1px solid #E5C07B; background:#FBF3E3; color:#6b5216;
  border-radius:12px; padding:12px 14px; font-size:13.5px; line-height:1.5;
}
.cov-warn-in ul{ margin:6px 0 0; padding-left:18px; }
.cov-warn-in li{ margin:2px 0; }

/* ---------- CNA expected-rate reasonableness gauge ---------- */
.rate-gauge{ margin:6px 0 4px; }
.rate-gauge-wrap{ border:1px solid var(--line,#e5e5ef); border-radius:12px; padding:12px 14px; background:var(--panel-alt,#f7f7fb); }
.rg-head{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.rg-pill{ flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; color:#fff; background:#8A8799; }
.rg-pill.rg-reasonable{ background:#1f9d57; }
.rg-pill.rg-low, .rg-pill.rg-very_low{ background:#2f7dd1; }
.rg-pill.rg-high, .rg-pill.rg-very_high{ background:#d1483a; }
.rg-msg{ font-size:12.5px; line-height:1.5; color:var(--ink,#2A2A52); }
/* Cold (underpriced) -> reasonable -> hot (overpriced) */
.rg-bar{ position:relative; height:12px; border-radius:999px;
  background:linear-gradient(90deg,#2f7dd1 0%, #7fc8a0 32%, #1f9d57 50%, #e6b800 68%, #d1483a 100%); }
.rg-band{ position:absolute; top:-3px; bottom:-3px; border-radius:8px;
  background:rgba(31,157,87,.16); border:1.5px solid rgba(31,157,87,.65); }
.rg-marker{ position:absolute; top:-7px; bottom:-7px; width:3px; border-radius:2px; background:#2A2A52; transform:translateX(-50%); }
.rg-marker.rg-reasonable{ background:#136b3a; }
.rg-marker.rg-low, .rg-marker.rg-very_low{ background:#1f5da0; }
.rg-marker.rg-high, .rg-marker.rg-very_high{ background:#a5271b; }
.rg-marker-val{ position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:800; color:#2A2A52; white-space:nowrap; }
.rg-scale{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--muted-soft,#8A8799); }
.rg-pill.rg-agency{ background:#c8892a; }
.rg-pill.rg-none{ background:#6b6b80; }
.rg-marker.rg-agency{ background:#9a6717; }
.rg-marker.rg-none{ background:#4a4a63; }
/* Family agency-comparison gauge: good-value zone (independent rate → agency) */
.rg-goodzone{ position:absolute; top:-3px; bottom:-3px; border-radius:8px;
  background:rgba(31,157,87,.14); border:1.5px solid rgba(31,157,87,.55); }
/* Vertical marker for the agency bill rate (the ceiling) */
.rg-agency-line{ position:absolute; top:-8px; bottom:-8px; width:0; transform:translateX(-50%);
  border-left:2px dashed #9a6717; }
.rg-agency-cap{ position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; color:#9a6717; white-space:nowrap; }
.rg-median-line{ position:absolute; top:-8px; bottom:-8px; width:0; transform:translateX(-50%);
  border-left:2px solid var(--indigo,#3A3A6E); }
.rg-median-cap{ position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
  font-size:10px; font-weight:700; color:var(--indigo,#3A3A6E); white-space:nowrap; }
.rg-source{ margin-top:8px; font-size:10.5px; color:var(--muted-soft,#8A8799); }
.rg-note{ margin-top:10px; font-size:11.5px; line-height:1.5; color:var(--ink,#2A2A52);
  background:rgba(200,137,42,.10); border:1px solid rgba(200,137,42,.35); border-radius:8px; padding:7px 10px; }

/* ---- Travel-radius step map (mirrors dashboard.js's ".cov-*" coverage map —
   ported standalone since this signup page never loads dashboard.js/.css) ---- */
.cov-wrap { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:18px; align-items:start; margin-top:8px; }
@media (max-width:620px){ .cov-wrap { grid-template-columns:1fr; } }
/* Profile-edit "License & Coverage" step: the modal is narrower than the
   Coverage tab, which squeezed the two-column map down to a tiny square.
   Stack it and let the map take the full column (up to a comfortable cap)
   so the travel-radius disk is actually legible (2026-09-22). */
.cov-wrap--profile { grid-template-columns:1fr; gap:12px; }
.cov-wrap--profile .cov-map,
.cov-wrap--profile .cov-side { width:100%; max-width:520px; margin-left:auto; margin-right:auto; }
.cov-svg { width:100%; height:auto; display:block; border-radius:14px; }
.cov-bg { fill:var(--panel-alt,#ECE7F2); }
.cov-ring { fill:none; stroke:var(--line-strong,#c9c9de); stroke-width:1; stroke-dasharray:2 3; }
.cov-ring-label { fill:var(--muted-soft,#8A8799); font-size:9px; font-weight:600; }
.cov-radius { fill:rgba(58,58,110,0.10); stroke:var(--indigo,#3A3A6E); stroke-width:1.5; }
.cov-me { fill:var(--indigo,#3A3A6E); stroke:#fff; stroke-width:1.5; }
.cov-me-ring { fill:none; stroke:var(--indigo,#3A3A6E); stroke-width:1.5; opacity:.4; }
.cov-north { fill:var(--muted-soft,#8A8799); font-size:11px; font-weight:700; text-anchor:middle; }
.cov-slider label { display:block; font-size:12px; font-weight:600; color:var(--muted,#5E5B71); margin-bottom:6px; }
.cov-slider input[type=range] { width:100%; }