/* MD Bin Days Finder v2 - plugin/feature-owned CSS, deliberately kept OUT
   of the shared global Additional CSS (matching the established sitewide
   rule - see the 25 Aug 2026 BOM-corruption incident this rule exists to
   prevent). Reuses the site's own brand tokens (--md-green, --md-cream,
   --md-ink etc, already defined globally). Mobile (320-390px) is the
   primary design target; wider breakpoints add layout, never remove
   functionality.

   color-scheme:light is declared on the whole widget deliberately (7 Sep
   2026 dark-card fix): the site has no dark theme of its own anywhere,
   and without this declaration some browsers' own "auto dark mode for
   form controls" heuristic can invert an unstyled-enough <button>'s own
   native chrome independently of the rest of an already-light page.
   Every interactive state below also explicitly redeclares BOTH
   background AND color together (never border alone), so no state can be
   left with an ambiguous, browser-inferred foreground colour.

   UX/UI polish pass (7 Sep 2026, later same day): the manual council
   chooser is now a collapsed <details> AFTER the result (not a parallel
   "or" option sitting between the address step and the result), and
   several classes below are new/renamed to support the reordered result
   content (short explanation -> primary action -> change-lookup links ->
   collapsed "About your bins", for BOTH the exact-date and fallback
   result shapes) - see CLAUDE.md for the full before/after reasoning. */

.md-bindays-finder {
  color-scheme: light;
  background: var(--md-cream, #FAF7F0);
  border: 1px solid var(--md-border, #E4E0D6);
  border-radius: var(--md-radius, 10px);
  padding: 22px 18px;
  margin: 0 0 28px;
}
.md-bindays-finder-title {
  font-family: Georgia, serif;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  color: var(--md-ink, #1F2933);
  margin: 0 0 8px;
}
.md-bindays-finder-copy {
  margin: 0 0 18px;
  color: var(--md-ink, #1F2933);
  max-width: 46em;
}

.md-bindays-form { margin: 0; }
.md-bindays-label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--md-muted, #7B8794);
  margin: 0 0 6px;
}
.md-bindays-inputrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.md-bindays-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.05rem;
  padding: 13px 14px;
  border: 1px solid var(--md-border, #E4E0D6);
  border-radius: var(--md-radius, 10px);
  background: #fff;
  color: var(--md-ink, #1F2933);
  min-height: 48px;
}
#md-bindays-postcode { text-transform: uppercase; }
.md-bindays-input:focus-visible {
  outline: 3px solid var(--md-green, #0B6E4F);
  outline-offset: 1px;
}
.md-bindays-submit,
.md-bindays-address-confirm {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
}
.md-bindays-hint {
  font-size: .8rem;
  color: var(--md-muted, #7B8794);
  margin: 8px 0 0;
}

/* ---- Address-selection step (South Kesteven only) - a native <select>
   is used deliberately: genuinely large mobile tap target via the OS's
   own picker UI, fully keyboard-operable with zero extra work, and
   inherits the browser's own correct dark-mode handling for form
   controls rather than needing bespoke custom-list styling.

   UX pass: no border/divider here any more - this step is a direct
   continuation of "Step 1" (the postcode search), not a separate
   section, so it reads as one uninterrupted task rather than two
   dash-divided halves. Just a little breathing room above it. ---- */
.md-bindays-addressstep {
  margin-top: 16px;
}
.md-bindays-addressselect {
  flex: 1 1 auto;
  cursor: pointer;
}

/* ---- Result panel ---- */
/* scroll-margin-top matches the JS's own HEADER_OFFSET so a scrolled-to
   result or address step is never left peeking out from under the site's
   sticky header - carried over unchanged from the 7 Sep 2026 fix. */
.md-bindays-result,
.md-bindays-addressstep {
  scroll-margin-top: 84px;
}
.md-bindays-result { margin-top: 20px; }
.md-bindays-loading {
  padding: 16px;
  color: var(--md-muted, #7B8794);
  font-style: italic;
}
.md-bindays-councilresult {
  background: #fff;
  color: var(--md-ink, #1F2933);
  border: 1px solid var(--md-border, #E4E0D6);
  border-radius: var(--md-radius, 10px);
  padding: 22px 18px;
}
.md-bindays-yourcouncil-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-green, #0B6E4F);
  margin: 0 0 4px;
}
.md-bindays-yourcouncil-name {
  font-family: Georgia, serif;
  font-size: 1.3rem;
  margin: 0 0 6px;
  color: var(--md-ink, #1F2933);
}
/* "Postcode checked"/"Matched to X" - genuinely part of understanding the
   answer (confirms what was actually looked up), so this is deliberately
   NOT pale-grey small print any more (UX pass, public-service-clarity
   requirement): full ink colour, a comfortable reading size. */
.md-bindays-checked {
  font-size: .95rem;
  color: var(--md-ink, #1F2933);
  margin: 0 0 14px;
}
/* Geography/navigation cleanup pass (7 Sep 2026) - "Matched to X" only
   ever becomes a link when the matched settlement genuinely has its own
   dedicated area-hub page (see MD_BinDays::maybe_print_config()'s
   settlementPages map + md-bindays.js's renderCouncilPanel()) - every
   other settlement's mention stays plain text, unchanged. */
.md-bindays-checked a {
  color: var(--md-green-dark, #084C37);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-bindays-checked a:hover,
.md-bindays-checked a:focus-visible {
  color: var(--md-green, #0B6E4F);
}
.md-bindays-checked a:focus-visible {
  outline: 3px solid var(--md-green, #0B6E4F);
  outline-offset: 1px;
}
.md-bindays-transition {
  background: #FBF3E2;
  color: #8A5A12;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .9rem;
  margin: 0 0 14px;
}
.md-bindays-transition-live {
  background: rgba(11,110,79,.08);
  color: var(--md-green-dark, #084C37);
}
/* The fallback panel's ONE short explanation, shown prominently BEFORE
   the primary action button (UX pass requirement: "do not show lots of
   general bin-system information before that action" - this is the one
   sentence that's allowed to sit there, everything else moves into the
   collapsed "About your bins" section below). Full contrast, comfortable
   size - this sentence is doing real work (explaining why the answer
   isn't shown directly here), not decoration. */
.md-bindays-shortexplain {
  font-size: .98rem;
  color: var(--md-ink, #1F2933);
  margin: 0 0 16px;
  max-width: 46em;
}
.md-bindays-primaryaction {
  margin: 0 0 12px;
}
.md-bindays-primaryaction .md-btn {
  width: 100%;
  min-height: 48px;
  font-size: 1.02rem;
}
/* A general system description, e.g. "Wheelie bins with black and green
   bins collected on alternating fortnights..." - now only ever appears
   inside the collapsed "About your bins" section (both result shapes),
   so it reads as reference material, not the headline. */
.md-bindays-systemsummary {
  margin: 0 0 14px;
  font-weight: 500;
}
.md-bindays-bins {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.md-bindays-binrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--md-cream, #FAF7F0);
  border-radius: 8px;
}
.md-bindays-binrow-text { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.md-bindays-binrow-text span:last-child { color: var(--md-muted, #7B8794); font-size: .85rem; }
.md-binswatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.15);
  flex-shrink: 0;
  margin-top: 2px;
}
.md-bin-black { background: #2A2E33; }
.md-bin-silver { background: #9AA3AD; }
.md-bin-purple { background: #6B3FA0; }
.md-bin-orange { background: #D97A2B; }
.md-bin-green { background: var(--md-green, #0B6E4F); }
.md-bin-grey { background: #7B8794; }
.md-bin-brown { background: #7A5230; }
.md-bin-blue { background: #2E7D9A; }
/* A bin-type label South Kesteven's system returned that this adapter
   does not (yet) have a named colour for - shown honestly with a plain,
   neutral outline rather than an invented colour. */
.md-bin-unknown { background: #fff; border: 1.5px dashed var(--md-muted, #7B8794); }

.md-bindays-putout {
  font-size: .92rem;
  margin: 0 0 16px;
}
.md-bindays-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.md-bindays-actions .md-btn,
.md-bindays-actions .md-btn-outline {
  width: 100%;
  min-height: 44px;
}
/* The exact-date result's own visible action row (Report a missed bin /
   Verify with X) - genuinely time-sensitive actions kept above the
   collapsed section, unlike the general reference material. Reuses
   .md-bindays-actions' own layout rules as-is; this class exists only so
   the two contexts can be told apart in markup/analytics if ever needed. */
.md-bindays-keyactions { margin-top: 4px; }
.md-bindays-disruption {
  font-size: .85rem;
  color: var(--md-muted, #7B8794);
  border-top: 1px solid var(--md-border, #E4E0D6);
  padding-top: 12px;
  margin: 0 0 10px;
}
.md-bindays-source {
  font-size: .78rem;
  color: var(--md-muted, #7B8794);
  margin: 0;
}
.md-bindays-errorbox {
  background: #FBEEEE;
  color: #8A2C2C;
  border-radius: var(--md-radius, 10px);
  padding: 16px;
  font-size: .95rem;
}
.md-bindays-error-extra {
  font-size: .85rem;
  margin: 8px 0 0;
  color: #6b1f1f;
}

/* ---- "Change address" / "Check another postcode" - subtle text-button
   links, always reachable from a result with no page scroll-hunting or
   reload. Deliberately plain-text styling (not full buttons) since these
   are secondary to the primary action(s) above them, but still comfortably
   tappable (44px min touch target via padding, not text size alone). ---- */
.md-bindays-changerow {
  margin: 0 0 16px;
  font-size: .92rem;
}
.md-bindays-linkbtn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 2px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  color: var(--md-green, #0B6E4F);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-bindays-linkbtn:hover,
.md-bindays-linkbtn:focus-visible {
  color: var(--md-green-dark, #084C37);
}
.md-bindays-linkbtn:focus-visible {
  outline: 3px solid var(--md-green, #0B6E4F);
  outline-offset: 1px;
}
.md-bindays-changesep {
  margin: 0 10px;
  color: var(--md-muted, #7B8794);
}

/* ---- Exact-date result (South Kesteven) - "NEXT COLLECTION" is
   deliberately the single largest, boldest text in the whole panel, and
   (UX pass) sits with NOTHING general between it and the council/
   postcode reassurance line directly above it. ---- */
.md-bindays-nextcollection {
  background: var(--md-cream, #FAF7F0);
  border: 1px solid var(--md-border, #E4E0D6);
  border-radius: var(--md-radius, 10px);
  padding: 18px 16px;
  margin: 0 0 16px;
}
.md-bindays-nextcollection-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-green, #0B6E4F);
  margin: 0 0 6px;
}
.md-bindays-nextcollection-date {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  line-height: 1.15;
  color: var(--md-ink, #1F2933);
  margin: 0 0 14px;
}
.md-bindays-nextcollection-bins {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-bindays-binchip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--md-ink, #1F2933);
}
.md-bindays-binchip .md-binswatch { width: 24px; height: 24px; }

.md-bindays-upcoming { margin: 0 0 16px; }
.md-bindays-upcoming-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-muted, #7B8794);
  margin: 0 0 8px;
}
.md-bindays-upcoming-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--md-border, #E4E0D6);
  font-size: .96rem;
}
.md-bindays-upcoming-date { font-weight: 700; color: var(--md-ink, #1F2933); }
.md-bindays-upcoming-bins { color: var(--md-muted, #7B8794); }
/* Side-by-side only once there is genuinely enough width for a long date
   plus a long multi-bin label without squeezing either - a real 320px
   overflow was found and fixed this way in the previous pass; kept
   unchanged here. */
@media (min-width: 480px) {
  .md-bindays-upcoming-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .md-bindays-upcoming-date { flex: 0 0 auto; }
  .md-bindays-upcoming-bins { text-align: right; min-width: 0; }
}

.md-bindays-aboutbins {
  margin: 0 0 4px;
  border: 1px solid var(--md-border, #E4E0D6);
  border-radius: var(--md-radius, 10px);
  padding: 4px 14px;
}
.md-bindays-aboutbins summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 0;
  color: var(--md-ink, #1F2933);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.md-bindays-aboutbins-body { padding: 4px 0 12px; }
.md-bindays-aboutbins .md-bindays-bins,
.md-bindays-aboutbins .md-bindays-systemsummary,
.md-bindays-aboutbins .md-bindays-putout { margin-bottom: 14px; }

/* ---- Peterborough-only "More services" links, added 7 Sep 2026
   (activation pass) - restrained secondary links inside the collapsed
   "About your bins" section on a genuine exact result, never a giant CTA.
   Only ever rendered when a real property (postcode+UPRN) is known - see
   MD_BinDays_Peterborough_Adapter::more_services_for(). ---- */
.md-bindays-moreservices {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--md-border, #E4E0D6);
}
.md-bindays-moreservices-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--md-muted, #7B8794);
  margin: 0 0 8px;
}
.md-bindays-moreservices-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.md-bindays-moreservices-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .9rem;
  color: var(--md-green, #0B6E4F);
  font-weight: 600;
  text-decoration: none;
  min-height: 32px;
}
.md-bindays-moreservices-list a:hover,
.md-bindays-moreservices-list a:focus-visible {
  text-decoration: underline;
}

/* ---- Manual council chooser - collapsed by default (UX pass): this is
   the actual fix for the "Choose your area feels out of place in the
   middle of the flow" complaint. Deliberately muted summary styling (not
   brand-green, not bold like a CTA) so it reads as a genuine secondary/
   fallback option, one click away, never competing with the postcode
   field above it or a result below it. ---- */
.md-bindays-manualdetails {
  margin-top: 22px;
  padding-top: 4px;
  border-top: 1px solid var(--md-border, #E4E0D6);
}
.md-bindays-manualsummary {
  cursor: pointer;
  font-size: .92rem;
  font-weight: 600;
  color: var(--md-muted, #7B8794);
  padding: 12px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.md-bindays-manualsummary:hover,
.md-bindays-manualsummary:focus-visible {
  color: var(--md-ink, #1F2933);
}
.md-bindays-manual { padding: 4px 0 6px; }
.md-bindays-councilcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.md-bindays-councilcard {
  /* Root cause of a real, confirmed visual overflow (traced via
     elementFromPoint after scrolling the card genuinely into view, not
     assumed from a bounding-box number alone): this button had no
     box-sizing:border-box, unlike every other sized element in this
     stylesheet (.md-bindays-input etc). With the default content-box,
     the grid's own computed 222px track width was being applied to the
     CONTENT box only, and the button's 16px+16px padding plus 1px+1px
     border were added ON TOP of that - 222 + 32 + 2 = 256px, a real,
     measured 34px bleed past the button's own cream .md-bindays-finder
     container (confirmed via elementFromPoint resolving to the card
     itself well past the container's own right edge). This never grew
     document.body.scrollWidth enough to trigger a page-level horizontal
     scrollbar (the page's own margin absorbed it), so it was invisible
     to a scrollWidth-only check but still a real defect. min-width:0
     is kept alongside as a genuine second, independent fix - a grid
     item's implicit min-width:auto would otherwise still refuse to
     shrink below its own intrinsic content width (the settlement
     sub-text, e.g. "Market Deeping & Deeping St James") even with
     border-box sizing correctly applied. */
  box-sizing: border-box;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-height: 60px;
  text-align: left;
  padding: 12px 16px;
  background: #fff;
  color: var(--md-ink, #1F2933);
  border: 1.5px solid var(--md-border, #E4E0D6);
  border-radius: var(--md-radius, 10px);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.md-bindays-councilcard:hover {
  background: #fff;
  color: var(--md-ink, #1F2933);
  border-color: var(--md-green, #0B6E4F);
}
.md-bindays-councilcard:focus-visible {
  background: #fff;
  color: var(--md-ink, #1F2933);
  outline: 3px solid var(--md-green, #0B6E4F);
  outline-offset: 1px;
}
.md-bindays-councilcard.is-active,
.md-bindays-councilcard[aria-pressed="true"] {
  background: rgba(11,110,79,.06);
  color: var(--md-ink, #1F2933);
  border-color: var(--md-green, #0B6E4F);
  border-width: 2px;
}
.md-bindays-councilcard-name {
  font-weight: 700;
  color: var(--md-ink, #1F2933);
  font-size: 1rem;
}
.md-bindays-councilcard-sub {
  font-size: .82rem;
  color: var(--md-muted, #7B8794);
}
/* Windows High Contrast / forced-colors mode: the recommended approach
   (per MDN) is to keep the OS's own remapped palette rather than
   disabling it, only ensuring a state change stays visibly distinct via
   the semantic system colour keywords - never forced-color-adjust:none,
   which would fight the very accessibility feature a user has switched
   on. */
@media (forced-colors: active) {
  .md-bindays-councilcard { border-color: ButtonText; }
  .md-bindays-councilcard.is-active,
  .md-bindays-councilcard[aria-pressed="true"] { border-color: Highlight; }
}

/* ---- Tablet / desktop ---- */
@media (min-width: 640px) {
  .md-bindays-finder { padding: 30px 32px; }
  .md-bindays-inputrow { flex-direction: row; align-items: stretch; }
  .md-bindays-input { flex: 1 1 auto; }
  .md-bindays-submit,
  .md-bindays-address-confirm { flex: 0 0 auto; width: auto; padding-left: 24px; padding-right: 24px; }
  .md-bindays-primaryaction .md-btn { width: auto; }
  .md-bindays-councilcards { grid-template-columns: repeat(3, 1fr); }
  .md-bindays-actions { flex-direction: row; flex-wrap: wrap; }
  .md-bindays-actions .md-btn, .md-bindays-actions .md-btn-outline { width: auto; }
}
@media (min-width: 900px) {
  .md-bindays-councilresult { padding: 28px 32px; }
  .md-bindays-bins { display: grid; grid-template-columns: repeat(2, 1fr); }
}