/* Styling for the "My Lesson Locations" account card. The markup is produced by
   account-locations.js; these class names exist nowhere else, so every rule is
   scoped under #my-lesson-locations-mount to prevent any leakage onto the rest
   of the account page. Tokens mirror styles.css (--green, --green-dark, --border,
   --text, --text-muted). "Guided cards" direction. */

#my-lesson-locations-mount {
  --lc-tint: rgba(45, 122, 58, 0.06);
}

/* ── Facet (step) blocks ─────────────────────────────────────────────── */
#my-lesson-locations-mount .facet + .facet {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
#my-lesson-locations-mount .facet-q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
}
#my-lesson-locations-mount .step {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
#my-lesson-locations-mount .facet-hint {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.87rem;
}
#my-lesson-locations-mount .facet-muted {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Private-court checkbox ─────────────────────────────────────────── */
#my-lesson-locations-mount .account-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
#my-lesson-locations-mount .account-checkbox-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.2em;
  accent-color: var(--green-dark);
}
#my-lesson-locations-mount .account-checkbox-label {
  display: block;
  line-height: 1.45;
}
#my-lesson-locations-mount .account-checkbox-help {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ── Step 1: area list ───────────────────────────────────────────────── */
#my-lesson-locations-mount .arearow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#my-lesson-locations-mount .arearow:hover { background: var(--lc-tint); }
#my-lesson-locations-mount .arearow.on {
  border-color: var(--green);
  background: var(--lc-tint);
  box-shadow: inset 0 0 0 1px var(--green);
}
#my-lesson-locations-mount .dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #c2d6c5;
}
#my-lesson-locations-mount .arearow.on .dot {
  border-color: var(--green);
  box-shadow: inset 0 0 0 3px var(--green);
}
#my-lesson-locations-mount .arearow-label { flex: 1; font-weight: 600; }
#my-lesson-locations-mount .cnt {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lc-tint);
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
#my-lesson-locations-mount .cnt.cnt-zero {
  background: #f1f1f1;
  color: var(--text-muted);
}
/* #f1f1f1 is OPAQUE and light, so it survives into dark mode while its ink
   inverts to #b0c8b4 — 1.58:1, and four of these render at once on a default
   profile (#549). The sibling .cnt above is already correct in dark for the one
   reason this rule was not: --lc-tint is TRANSLUCENT, so it composites over
   whatever is behind it instead of replacing it. Same property here, neutral
   rather than green so the zero state stays distinguishable from the active
   one (dE 8.1 apart). `color` is deliberately untouched — var(--text-muted)
   already inverts, and against this tint it lands at 8.27:1. */
[data-theme="dark"] #my-lesson-locations-mount .cnt.cnt-zero {
  background: rgba(255, 255, 255, 0.07);
}

/* ── Map link ────────────────────────────────────────────────────────── */
#my-lesson-locations-mount .maplink {
  display: inline-block;
  margin-top: 10px;
  color: var(--green);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}
#my-lesson-locations-mount .maplink:hover { text-decoration: underline; }

/* ── Step 2: preferred location ──────────────────────────────────────── */
#my-lesson-locations-mount .facet-field { margin-top: 4px; }
#my-lesson-locations-mount .facet-label {
  display: block;
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 0.9rem;
}
#my-lesson-locations-mount .facet-optional { color: var(--text-muted); font-weight: 400; }
#my-lesson-locations-mount .facet-confirmed {
  margin: 4px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--lc-tint);
}
#my-lesson-locations-mount .facet-stale {
  margin: 6px 0 0;
  color: #9a6a00;
  font-size: 0.85rem;
}

/* ── Step 2 empty-area note (zero active locations) ──────────────────── */
#my-lesson-locations-mount .facet-empty-area {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid #f0e3b8;
  border-radius: 12px;
  background: #fdf6e3;
}
#my-lesson-locations-mount .facet-empty-icon { font-size: 1.2rem; line-height: 1.2; }
#my-lesson-locations-mount .facet-empty-area p {
  margin: 0;
  font-size: 0.9rem;
  color: #5b5326;
}
#my-lesson-locations-mount .facet-empty-area strong { color: #3f3a18; }

/* ── Steps 3 & 4: choice rows ────────────────────────────────────────── */
#my-lesson-locations-mount .choice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
#my-lesson-locations-mount .choice:hover { background: var(--lc-tint); }
/* Selected state is anchored SOLELY to the radio's native :checked, so the
   highlight always tracks the actual radio with no JS re-render. It must NOT
   also key off a render-time class: the weather step (step 4) has no change
   handler, so a static class would never clear on click-away and a returning
   user's saved option would stay highlighted alongside the newly-clicked one
   (double-highlight). :checked is the single source of truth — exactly one
   option is ever highlighted. Progressive enhancement: pre-:has browsers
   (pre-2023) show no highlight, but the control still works and saves
   correctly (collectFacets reads native :checked). */
#my-lesson-locations-mount .choice:has(input:checked) {
  border-color: var(--green);
  background: var(--lc-tint);
  box-shadow: inset 0 0 0 1px var(--green);
}
#my-lesson-locations-mount .choice.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
#my-lesson-locations-mount .radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid #c2d6c5;
}
#my-lesson-locations-mount .choice:has(input:checked) .radio {
  border-color: var(--green);
  box-shadow: inset 0 0 0 3px var(--green);
}
#my-lesson-locations-mount .choice .sub {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.85rem;
}
#my-lesson-locations-mount .choice strong { font-weight: 700; }

/* ── Step 3: travel-area chips (specific_areas reveal) ───────────────── */
#my-lesson-locations-mount .reveal.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
#my-lesson-locations-mount .areachip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
#my-lesson-locations-mount .areachip:hover { background: var(--lc-tint); }
#my-lesson-locations-mount .areachip.on {
  border-color: var(--green);
  background: var(--lc-tint);
  color: var(--green-dark);
  font-weight: 600;
}