/* ==========================================================================
   styles_modern.css
   NEW FILE, added 5 September 2026. Nothing in styles_new.css is touched.

   Loaded ONLY by pages that have opted in to the refreshed look. Every rule
   is scoped under body.mls-modern so that even if this file were loaded on
   a page by accident it cannot change anything.

   Phase 3 of MLS-Revitalisation-Plan.md. Roll out one page at a time.
   ========================================================================== */

body.mls-modern{
  --m-green:#0d7a3d; --m-green-dk:#0a5f30; --m-green-lt:#e8f5ed;
  --m-yellow:#f7c600; --m-ink:#16211c; --m-muted:#5d6b64;
  /* THE GROUND AND THE CARD EDGE, changed together 8 September 2026 after team
     feedback: "there is not a lot of love for the green background", "text isn't
     that clear to read", and the white boxes "looked plonked on the background
     instead of looking as though they are meant to be there".

     THE CAUSE, MEASURED. The old border #dfe6e2 against the old ground #e2ebe6
     is 1.04:1. The border was invisible, so a card had no edge at all and was
     defined only by a jump in lightness. That IS "plonked on": a shape floating
     on a surface rather than an object sitting in a layout.

     AND THE HISTORY MATTERS, because it was the wrong lever. On 6 September the
     ground was darkened from #f6f8f7 to #e2ebe6 specifically to stop the white
     boxes vanishing, and the note that used to sit here said so. The boxes were
     vanishing because the BORDER was too pale to do its job, so the ground was
     darkened to compensate. Give the card a real edge and the ground is free to
     be light again.

     WHY EGGSHELL #f4f1ea. It is the Trusted Trader ground, so it is already
     proven on Steve's other estate and the team likes it. It also READS BETTER,
     which was the other half of the complaint: --m-muted measures 4.96:1 on
     eggshell against 4.60:1 on the old green, and --m-ink measures 14.68:1.
     So this fixes the readability rather than trading against it.

     WHY #e0d9c9 FOR THE LINE. Warm, to sit with the ground. 1.25:1 against the
     eggshell and 1.41:1 against a white card, so it reads as an edge from both
     sides, which the old one did from neither.

     BEFORE CHANGING EITHER, re-check muted text sitting directly on the page. */
  /* --m-line-2 added 8 September 2026. SR asked whether the recent reviews panel
     and the review boxes carry the same grey, and whether both could be darker.
     They did NOT: the sidebar card used --m-line #e0d9c9 and the review boxes
     used the legacy #D5D5D5, which measures 1.47:1 on white against --m-line's
     1.41:1, so they were near enough identical and the difference he could see
     was the missing background rather than the border. Both now use this one
     token, at 1.70:1 on white and 1.50:1 on eggshell, a clear step up without
     turning into a box rule. Reserved for review containers: everything else
     keeps --m-line, so the reviews read as the heavier thing on the page, which
     is right, because they are what the page is for. */
  --m-line:#e0d9c9; --m-line-2:#cfc6b2; --m-bg:#f4f1ea; --m-radius:14px;
  --m-shadow:0 1px 2px rgba(16,32,24,.06),0 8px 24px rgba(16,32,24,.07);
  margin:0; background:var(--m-bg); color:var(--m-ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.mls-modern *{box-sizing:border-box}

/* ==========================================================================
   THE TYPE SCALE, set as a house rule 8 September 2026.

   SR: "font wise, the Sponsor Listing text is pretty small. Think gov.uk
   website standards, can we keep text size obvious and readable as a standard
   rule across the site on all pages."

   GOV.UK sets body copy at 19px on desktop and never puts reading text below
   16px. This site was running result content at 14px, breadcrumbs at 13px and
   badges at 12px, which is where the complaint comes from. It also produced an
   odd effect SR spotted straight away: the Google advert's own text was LARGER
   than ours, so the ad looked like the page and the page looked like a footnote.

   THE RULE, and it applies to every MLS page:

     content a visitor reads as information   16px minimum
     muted secondary detail                   16px
     pills and small badges                   14px
     breadcrumbs and captions                 15px
     uppercase micro-labels                   13px minimum, bold and letterspaced
     NOTHING ANYWHERE below 13px

   Headings are unchanged: h1 34, h2 21-22, card title 19.

   An uppercase label is the only thing allowed under 15px, and only because
   weight and letterspacing do the work that size would otherwise have to.
   ========================================================================== */

/* Neutralise the legacy page frame WITHOUT editing it. The div structure is
   left exactly as it was so every include still gets the DOM it expects. */
body.mls-modern .main_page,
body.mls-modern .main_content,
body.mls-modern .content_frame,
body.mls-modern .center_center,
body.mls-modern .page_default{
  max-width:none; width:auto; margin:0; padding:0; float:none;
  background:none; border:0; min-height:0;
}

/* ONE CONTAINER WIDTH FOR THE WHOLE SITE, 6 September 2026. Was 1060px here and 1180px
   on the homepage, which SR saw straight away: "index seems to take more screen space
   than list your business". Every container is now 1180px, so the header, the search
   band and the page content line up on every page and pages match each other.
   This is now a rule in MLS-Style-Guide.md section 5. A page that needs a different
   width overrides its OWN container and its header together, never one of them. */
body.mls-modern .m-wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
/* The yellow brand bar. Added 5 September 2026 at SR's request: the live site
   frames its header in yellow and dropping it entirely made the refresh read as
   a different company. Kept to a rule at the very top so it signals the brand
   without bringing the 2005 banding back. */
body.mls-modern .m-topbar{height:5px;background:var(--m-yellow)}
body.mls-modern .m-hdr{background:#fff;border-bottom:1px solid var(--m-line)}
body.mls-modern .m-hdr .m-in{max-width:1180px;margin:0 auto;padding:13px 20px;
  display:flex;align-items:center;gap:20px}
body.mls-modern .m-brand{display:block;line-height:0}
body.mls-modern .m-brand img{height:44px;width:auto;display:block}
body.mls-modern .m-spacer{flex:1}
/* 06/09/26. Was 14px in --m-muted. Measured against the three sites SR named:
   gov.uk, BBC News and Yell all use 16px header nav links, and grey-on-white at
   14px was the smallest, faintest thing in the header. Now 15.5px in ink.
   THIS IS THE SHARED HEADER, so it changes the SIGNUP page as well as the
   homepage. That is intended: one header, one size, and the same argument
   applies to both pages. */
body.mls-modern .m-nav{display:flex;gap:19px;font-size:16px}
body.mls-modern .m-nav a{color:var(--m-ink);text-decoration:none;padding-bottom:3px;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
body.mls-modern .m-nav a:hover{color:var(--m-green);border-bottom-color:var(--m-green)}
body.mls-modern .m-cta{background:var(--m-green);color:#fff;text-decoration:none;font-weight:700;
  font-size:16px;padding:9px 16px;border-radius:9px;box-shadow:0 2px 0 var(--m-green-dk);white-space:nowrap}
body.mls-modern .m-cta:hover{background:var(--m-green-dk)}
/* THE SEARCH BAND, REBUILT 8 September 2026. SR: "just need to fix the header
   search bar as thats ugly".

   What was wrong. It was three separate floating controls on a flat green
   slab: a white pill, an 8px gap, a second white pill, another gap, a yellow
   button. Nothing tied them together, so the eye read three unrelated objects
   rather than one search. Worse, the first field was flex:1 against a fixed
   230px location field, which on a 1180px container gave roughly 830px for
   "e.g. builders" and 230px for the town. The business field was three and a
   half times the width of the location field, which is not the ratio anyone
   types in and it made the whole band look lopsided.

   What it is now. ONE white card, with both fields and the button inside it,
   a hairline divider between the fields, and a proportional 58/42 split
   capped so the location field cannot run away on a wide monitor. The card
   carries the focus ring rather than the individual inputs, so tabbing
   through does not make the layout twitch.

   This is the SHARED header. Right now search.php is the only page in the
   rollout with $hdr_search true, index.php has its own hero search and every
   signup page sets it false, so this change is visible on search.php alone.
   That will stop being true as header.php pages convert, which is intended:
   one search band, one design. */
/* 11px rather than 16/13, 8 September 2026. The proof line under the card is
   gone, so the band is now just the search card and it no longer needs the
   asymmetric padding that balanced two stacked elements. Band height goes from
   112px to 74px, which gives the results roughly 40px more of the first
   screen. */
/* BRANDING CONSISTENCY WITH THE HOMEPAGE, 8 September 2026. SR: "can we have
   consistancy, and add a yellow line under the green as you have on the home
   page".

   Two changes, both copied from the homepage rather than invented here.
   styles_home.css closes its green hero with `border-bottom:4px solid var(--hy)`,
   so this uses the same 4px in the same yellow. Every page then carries the same
   bracket: 5px yellow at the very top from .m-topbar, white header, green band,
   4px yellow at the foot.

   THE GREEN CHANGED WITH IT, AND THAT WAS NOT ASKED FOR EXPLICITLY, so it is
   flagged here rather than buried. The homepage hero is --hg, #0a5f30. This band
   was --m-green, #0d7a3d. Two different greens in the same position on two pages
   is the opposite of consistency, and the homepage's is the darker one, so the
   band moves to it. To reverse only that half, put var(--m-green) back below and
   leave the border alone. */
/* THE YELLOW IS NOW IN ONE PLACE ONLY, 8 September 2026. SR, once the eggshell
   was live: "the yellow washed out bar under the green header is no longer
   needed, likewise the thin yellow bar on the home page. So lets amend the
   style guide and only place now is the yellow bar at very top page above MLS
   logo which works."

   He is right, and it is the eggshell that made it right. The yellow rule and
   then the wash both existed to close the green band against a cool grey-green
   ground that it did not sit well on. Warm eggshell and dark green already meet
   comfortably, so the yellow was solving a problem that no longer exists, and
   an accent that is not doing a job is decoration.

   THE RULE, and it is now in MLS-Style-Guide.md: yellow appears as the 5px bar
   at the very top of the page above the wordmark, and as a FILL behind dark
   text, the Search button and the tag pills. Nowhere else, and never as a thin
   bar or a left edge. Everything that used to be a yellow bar is green. */
body.mls-modern .m-searchband{background:var(--m-green-dk);padding:11px 20px;
  position:relative;z-index:20}
body.mls-modern .m-searchband .m-in{max-width:1140px;margin:0 auto;
  display:flex;align-items:stretch;gap:0;
  background:#fff;border-radius:12px;padding:5px;
  box-shadow:0 2px 10px rgba(6,32,18,.18)}
body.mls-modern .m-searchband .m-in:focus-within{
  box-shadow:0 0 0 3px rgba(247,198,0,.6),0 2px 10px rgba(6,32,18,.18)}
/* THE PLACEHOLDER SAT AT THE TOP OF THE CARD, fixed 8 September 2026. SR:
   "the 'eg builders or company name' sits at the top of the box and looks a
   little lost".

   The cause, found rather than guessed: styles_new.css carries
   `input[type=text]{border:1px solid #36903B;height:22px}`, a global rule from
   the old site. An explicit height BEATS align-items:stretch on a flex item,
   so the input stayed 22px tall inside a 42px row and sat at the top of it,
   with the vertical padding fighting the fixed height under border-box. That
   is why the text looked high rather than merely small.

   The fix is to give the input the height of the row, 52px card less its 10px
   of padding, and drop the vertical padding entirely. A single line input
   centres its own text vertically, so nothing else is needed and no
   line-height is set, because line-height on an input renders differently
   across browsers. */
/* The two fields are now WRAPPED, 8 September 2026, because the autocomplete
   panel has to be positioned against its own field and an <input> cannot
   contain anything. The flex sizing moves to the wrapper and the input simply
   fills it, so the 58/42 split and the 330px cap are unchanged. The divider
   moves from the input's left border to the wrapper's, which also makes it full
   height rather than input height. */
body.mls-modern .m-searchband .m-sfield{position:relative;display:flex;min-width:0}
body.mls-modern .m-searchband .m-sfield-what{flex:1 1 58%}
body.mls-modern .m-searchband .m-sfield-where{flex:1 1 42%;max-width:330px;
  border-left:1px solid var(--m-line)}
body.mls-modern .m-searchband input[type=text]{flex:1 1 auto;width:100%;min-width:0;
  border:0;border-radius:8px;background:transparent;color:var(--m-ink);
  height:42px;padding:0 14px;font-size:16px;font-family:inherit}
body.mls-modern .m-searchband input[type=text]::placeholder{color:#8a968f}
body.mls-modern .m-searchband input[type=text]:focus{outline:none}
body.mls-modern .m-searchband input[type=submit]{flex:0 0 auto;border:0;border-radius:8px;
  height:42px;padding:0 28px;margin-left:5px;
  background:var(--m-yellow);color:#3a2c00;font-weight:800;font-size:16px;
  font-family:inherit;cursor:pointer;transition:background .15s}
body.mls-modern .m-searchband input[type=submit]:hover{background:#e4b800}

/* --------------------------------------------------------------------------
   THE AUTOCOMPLETE PANEL. Added 8 September 2026 with the markup in
   header_modern.php. styles_new.css styles the LIST inside it but has no rule
   at all for the panel, so on the legacy site it drew as a bare block. This
   gives it the same card treatment as everything else: white, 1px line, 10px
   radius, a real shadow because it floats over the page.

   The markup is generated by autocomplete_search.php and cannot be changed
   without touching every legacy header, so these selectors match ITS class
   names, .autocomplete, .autocomplete_business_cats, .autocomplete_names and
   .autocomplete_namesnb, rather than anything of our own. The <b> tags around
   the matched characters come from the server.
   -------------------------------------------------------------------------- */
/* THE PANEL IS THE <ul>, NOT THE WRAPPER, and this was found by measuring
   rather than assumed. The first attempt put the card treatment on the wrapper
   div and it rendered 14px tall: styles_new.css carries
   `.autocomplete{position:absolute; width:209px; border:1px solid #36903B; ...}`,
   so the legacy design makes the LIST itself the floating panel and the wrapper
   div is only an anchor. An absolutely positioned only child is out of flow, so
   the wrapper collapsed to its own padding.

   So the wrapper stays a bare anchor and the card treatment goes on the list,
   with the legacy position, float and 209px width overridden. */
body.mls-modern .m-searchband .m-ac{
  position:absolute;top:calc(100% + 9px);left:0;
  /* width, not min-width. min-width:100% BEATS max-width in CSS, so the panel
     came out 687px wide on desktop, the full width of the field, which is a lot
     of empty white next to a list of category names. width:100% with a 440px cap
     gives the smaller of the two: 440px on desktop, the full field width on a
     phone. */
  width:100%;max-width:440px;z-index:30;text-align:left}
body.mls-modern .m-searchband .m-ac ul.autocomplete,
body.mls-modern .m-searchband .m-ac ul{
  position:static;float:none;width:auto;display:block;
  list-style:none;padding:6px 0;margin:0;
  background:#fff;border:1px solid var(--m-line);border-radius:10px;
  box-shadow:0 10px 30px rgba(6,32,18,.20);
  font-size:inherit;color:var(--m-ink);
  max-height:min(60vh,420px);overflow-y:auto}
body.mls-modern .m-searchband .m-ac li{list-style:none;margin:0;padding:0}
body.mls-modern .m-searchband .m-ac li a{
  display:block;padding:8px 14px;font-size:16px;line-height:1.35;
  color:var(--m-ink);text-decoration:none;cursor:pointer;border-radius:0}
body.mls-modern .m-searchband .m-ac li a:hover,
body.mls-modern .m-searchband .m-ac li a:focus{
  background:var(--m-green-lt);color:var(--m-green-dk)}
body.mls-modern .m-searchband .m-ac li a b{font-weight:700;color:var(--m-green)}
/* The three group headings. Same small uppercase label as the sidebar card
   heads on search.php, so a heading always looks like a heading on this site. */
body.mls-modern .m-searchband .m-ac .autocomplete_business_cats,
body.mls-modern .m-searchband .m-ac .autocomplete_names,
body.mls-modern .m-searchband .m-ac .autocomplete_namesnb{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-muted);padding:9px 14px 4px;margin:0;border:0}
body.mls-modern .m-searchband .m-ac .autocomplete_names{
  border-top:1px solid var(--m-line);margin-top:6px;padding-top:10px}
@media(max-width:760px){
  body.mls-modern .m-searchband .m-ac{max-width:none}
}

/* .m-proof removed 8 September 2026 with the markup that used it. See
   header_modern.php for the reason. */
body.mls-modern .m-crumb{font-size:13px;color:var(--m-muted);padding:14px 0 0}
body.mls-modern .m-crumb a{color:var(--m-muted)}
@media(max-width:760px){
  body.mls-modern .m-nav{display:none}
  body.mls-modern .m-hdr .m-in{gap:12px}
  body.mls-modern .m-brand img{height:34px}
  /* The card stacks rather than shrinks: two full width fields with the
     divider moved from the left edge to the top, then a full width button. */
  body.mls-modern .m-searchband .m-in{flex-wrap:wrap;gap:0}
  body.mls-modern .m-searchband .m-sfield{flex:1 1 100%}
  body.mls-modern .m-searchband .m-sfield-where{max-width:none;
    border-left:0;border-top:1px solid var(--m-line)}
  body.mls-modern .m-searchband input[type=submit]{width:100%;margin:5px 0 0}
}

/* 07/09/26. THE HEADER OVERFLOWED THE SCREEN ON A PHONE, and SR found it on the live site:
   the wordmark and the List your business button off the right hand edge, with the page
   scrolling sideways. Measured on the live page at a 390px viewport before touching it:
   brand image 218px, button 156px, one 12px gap and 40px of container padding, so 426px of
   content inside 390px of screen. document.scrollWidth 419 against a 390 viewport.
   THE FIX MAKES THE WORDMARK THE ONLY THING THAT CAN SHRINK. The button keeps its full
   label and never shrinks, because a mobile visitor who cannot read the one call to action
   is worse off than one who reads a smaller logo. The flexible spacer is dropped and the
   button is pushed right by margin instead, which removes one 10px gap. The image is
   width-driven rather than height-driven so it scales in proportion: height:34px with a
   max-width would have squashed it horizontally instead.
   Measured after: 390px viewport gives a 200x31 wordmark and a 142px button with
   scrollWidth 390, no horizontal scroll. 320px still does not overflow, the wordmark
   scaling to 140x22.
   THIS IS THE SHARED HEADER, so it fixes the homepage and the signup page in one upload.
   Breakpoint is 600px and not 760px deliberately: between the two the header still fits
   at its full size, and shrinking it there would be a change for no reason. */
@media(max-width:600px){
  body.mls-modern .m-hdr .m-in{padding:11px 14px;gap:10px}
  body.mls-modern .m-spacer{display:none}
  body.mls-modern .m-brand{flex:0 1 auto;min-width:0}
  body.mls-modern .m-brand img{height:auto;width:100%;max-width:200px}
  body.mls-modern .m-cta{flex:0 0 auto;margin-left:auto;font-size:14px;padding:9px 13px}
}

/* ---------- hero + form ---------- */
body.mls-modern .m-hero{display:grid;grid-template-columns:1fr;gap:28px;padding:26px 0 8px}
/* 07/09/26. ON A PHONE THE FORM STARTED 886px DOWN THE PAGE. Measured on the live page at
   a 390px viewport: h1 at 135, the pitch column below it 724px tall, the form card not
   beginning until 886 and its Next button at 1295. SR: a lot of members sign up from a
   phone, so the form has to be the first thing they see.
   Below 900px the h1 stays at the top, carrying the price, and the card is pulled above the
   supporting copy: headline, form, then everything else. Measured after: card top 182 and
   Next at 590, both inside a 780px viewport, whole card ending at 724.
   DESKTOP IS UNCHANGED AND WAS MEASURED BOTH WAYS at 1280px. Before and after are identical:
   h1 left 190 top 147, lede top 209, card left 742 top 147 460x550, hero height 602,
   columns 508.578px and 460.156px.
   grid-template-rows:auto 1fr IS NOT DECORATION. The card spans both rows and is taller than
   they are, so without it the grid shares the card's surplus height across both rows and
   pushes the lede 16px further from the h1 than it sits today. Measured, not assumed.
   THE HTML CHANGE THIS DEPENDS ON: the h1 is a direct child of .m-hero and the rest of the
   left column is wrapped in .m-pitch. Upload this file BEFORE list_your_business.php. The
   other way round, the h1 becomes an unplaced grid item and desktop auto-places the card
   into the wrong cell. */
body.mls-modern .m-hero h1{font-size:32px;line-height:1.15;margin:0 0 14px;letter-spacing:-.6px;
  color:var(--m-ink);border:0;padding:0;background:none}
@media(min-width:900px){body.mls-modern .m-hero h1{font-size:42px}}
body.mls-modern .m-hero h1 em{font-style:normal;color:var(--m-green)}

/* PLACED HERE ON PURPOSE, 07/09/26. These two blocks MUST sit after the .m-hero h1 rules
   above, not before them. `body.mls-modern .m-hero h1{margin:0 0 14px}` has exactly the same
   specificity as `body.mls-modern .m-hero > h1`, so whichever is written LAST wins. Written
   above it, the margin-bottom:0 below is silently overridden, the row gap and the margin both
   apply, and the desktop lede drops 16px. Caught by reading the file back after writing it,
   which is the same cascade fault as the review card border on 06/09/26. */
@media(min-width:900px){body.mls-modern .m-hero{grid-template-columns:1.05fr .95fr;
  grid-template-areas:"head card" "body card";grid-template-rows:auto 1fr;gap:14px 44px;
  align-items:start;padding:36px 0 16px}
  body.mls-modern .m-hero > h1{grid-area:head;margin-bottom:0}
  body.mls-modern .m-hero > .m-pitch{grid-area:body}
  body.mls-modern .m-hero > .m-card{grid-area:card}}
@media(max-width:899px){body.mls-modern .m-hero{gap:16px}
  body.mls-modern .m-hero > h1{order:1;margin-bottom:0}
  body.mls-modern .m-hero > .m-card{order:2}
  body.mls-modern .m-hero > .m-pitch{order:3}}
body.mls-modern .m-lede{font-size:18px;color:var(--m-muted);margin:0 0 22px;max-width:46ch}
/* 06/09/26. This was a pale green pill, --m-green-lt #e8f5ed, on a #f6f8f7 page. Once the
   page tint went to #e2ebe6 it was pale green on pale green and SR said the oval "doesn't
   work" any more. He is right and it is the SAME 1.05:1 fault as the homepage cards.
   White on the tint is 1.22:1, so the pill now reads as a raised chip like every other
   card on the site. The green stays where it belongs, in the figure itself. */
body.mls-modern .m-price{display:inline-flex;align-items:baseline;gap:10px;background:#fff;
  border:1px solid var(--m-line);border-radius:999px;padding:9px 18px;margin-bottom:22px;
  box-shadow:0 1px 2px rgba(16,32,24,.05),0 4px 14px rgba(16,32,24,.06)}
body.mls-modern .m-price b{font-size:24px;color:var(--m-green-dk);letter-spacing:-.5px}
body.mls-modern .m-price span{font-size:14px;color:var(--m-green-dk)}
body.mls-modern ul.m-ticks{list-style:none;margin:0 0 22px;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:8px 18px;font-size:15px}
@media(max-width:520px){body.mls-modern ul.m-ticks{grid-template-columns:1fr}}
body.mls-modern ul.m-ticks li{padding-left:26px;position:relative;color:#26332c}
body.mls-modern ul.m-ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;
  border-radius:50%;background:var(--m-green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M6.2 11.4 3.3 8.5l1.1-1.1 1.8 1.8 4.4-4.4 1.1 1.1z' fill='white'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8' fill='black'/><path d='M6.2 11.4 3.3 8.5l1.1-1.1 1.8 1.8 4.4-4.4 1.1 1.1z' fill='white'/></svg>") center/contain no-repeat}
body.mls-modern .m-chips{display:flex;flex-wrap:wrap;gap:10px}
body.mls-modern .m-chip{background:#fff;border:1px solid var(--m-line);border-radius:10px;
  padding:8px 13px;font-size:13px;color:var(--m-muted)}
body.mls-modern .m-chip b{color:var(--m-ink);font-size:15px}

body.mls-modern .m-card{background:#fff;border:1px solid var(--m-line);border-radius:var(--m-radius);
  box-shadow:var(--m-shadow);padding:26px}
@media(min-width:900px){body.mls-modern .m-card{position:sticky;top:20px;padding:30px}}
body.mls-modern .m-card h2{margin:0 0 4px;font-size:20px;letter-spacing:-.3px}
body.mls-modern .m-card .m-sub{color:var(--m-muted);font-size:14px;margin:0 0 20px}
body.mls-modern .m-field{margin-bottom:18px}
body.mls-modern .m-field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
body.mls-modern .m-field .m-opt{font-weight:400;color:var(--m-muted)}
body.mls-modern .m-field input[type=text],
body.mls-modern .m-field input[type=tel]{width:100%;padding:13px 14px;font-size:16px;
  border:1.5px solid var(--m-line);border-radius:10px;background:#fcfdfc;
  transition:border-color .15s,box-shadow .15s;max-width:none}
body.mls-modern .m-field input:focus{outline:0;border-color:var(--m-green);
  box-shadow:0 0 0 3px rgba(13,122,61,.14);background:#fff}
body.mls-modern .m-field .m-hint{font-size:13px;color:var(--m-muted);margin-top:6px}
body.mls-modern .m-err{background:#fdecec;border:1px solid #f3c2c2;color:#9d2020;
  border-radius:9px;padding:10px 13px;font-size:14px;margin-bottom:16px}
body.mls-modern .m-btn{display:block;width:100%;padding:15px 20px;border:0;border-radius:10px;
  cursor:pointer;background:var(--m-green);color:#fff;font-size:17px;font-weight:700;
  box-shadow:0 2px 0 var(--m-green-dk);transition:transform .06s,background .15s}
body.mls-modern .m-btn:hover{background:var(--m-green-dk)}
body.mls-modern .m-btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--m-green-dk)}
body.mls-modern .m-reassure{margin:14px 0 0;font-size:13px;color:var(--m-muted);text-align:center}

/* ---------- bands ---------- */
body.mls-modern .m-band{padding:34px 0}
body.mls-modern .m-band h2{font-size:24px;margin:0 0 20px;letter-spacing:-.4px;
  border:0;padding:0;background:none;color:var(--m-ink)}
body.mls-modern .m-steps{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){body.mls-modern .m-steps{grid-template-columns:repeat(3,1fr)}}
body.mls-modern .m-step{background:#fff;border:1px solid var(--m-line);
  border-radius:var(--m-radius);padding:20px}
body.mls-modern .m-step .m-n{display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--m-green-lt);color:var(--m-green-dk);font-weight:800;
  font-size:14px;margin-bottom:11px}
body.mls-modern .m-step h3{margin:0 0 6px;font-size:16px}
body.mls-modern .m-step p{margin:0;font-size:14.5px;color:var(--m-muted)}
body.mls-modern .m-plans{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){body.mls-modern .m-plans{grid-template-columns:1fr 1fr}}
body.mls-modern .m-plan{background:#fff;border:1.5px solid var(--m-line);
  border-radius:var(--m-radius);padding:22px}
/* 06/09/26, SR: drop the yellow bar along the top and the green border, just have the
   left hand yellow bar. Same treatment as .m-honesty, which is the box he liked, so the
   two information panels on this page now match each other instead of being decorated
   two different ways.
   IT ALSO FIXES THE RULE RATHER THAN BREAKING IT. The style guide says a green border
   means "this is the one to pick", and this panel is not something you pick, it is a
   price you read. The green border belongs on a card that carries the action, which is
   the List door on the homepage. Guide section 6 updated to say exactly that. */
body.mls-modern .m-plan.m-pick{border-left:4px solid var(--m-green)}
body.mls-modern .m-plan .m-tag{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--m-green-dk);background:var(--m-green-lt);
  border-radius:999px;padding:4px 10px;margin-bottom:10px}
body.mls-modern .m-plan .m-amt{font-size:30px;font-weight:800;letter-spacing:-.8px;margin:0 0 2px}
body.mls-modern .m-plan .m-per{color:var(--m-muted);font-size:16px;margin:0 0 10px}
body.mls-modern .m-plan p{margin:0;font-size:16px;color:var(--m-muted)}
body.mls-modern .m-honesty{background:#fff;border:1px solid var(--m-line);
  border-left:4px solid var(--m-green);border-radius:var(--m-radius);padding:24px}
body.mls-modern .m-honesty h2{font-size:19px;margin:0 0 10px}
body.mls-modern .m-honesty p{margin:0 0 12px;color:#33413a;font-size:17px}
body.mls-modern .m-honesty p:last-child{margin-bottom:0}
body.mls-modern .m-honesty a{color:var(--m-green-dk)}

/* ==========================================================================
   THE SHELL PASS. Added 8 September 2026, Phase 3 of MLS-Revitalisation-Plan.md.

   WHY THIS BLOCK HAD TO EXIST, and it is not obvious.
   The neutraliser near the top of this file strips .main_page, .main_content,
   .content_frame, .center_center and .page_default to nothing. That is correct
   for a page whose body markup has been REBUILT, like the homepage and
   list_your_business.php, because those pages provide their own .m-wrap.
   A page that keeps its LEGACY body markup has nothing else holding it in, so
   the neutraliser alone would drop that page's content edge to edge with no
   container at all. Applying the modern shell to an old page therefore takes
   three things and not two: the class, the header, and this block.

   HOW A PAGE OPTS IN: body class="mls-modern mls-shell".
   Two classes on the body, so every rule here is specificity 0,3,x and beats
   the single-class neutraliser above whatever the source order. It is placed
   at the end of the file as well, so both mechanisms agree.

   WHEN A PAGE LEAVES: drop mls-shell from its body when its markup is properly
   rebuilt to .m- classes. Nothing here fires without the class.

   DELIBERATELY NOT STYLED: .option_box, .search_check_boxes, .total_basket,
   .total_costs, .bus_premium and the other legacy component boxes. They keep
   their styles_new.css appearance. This is the shell, not the redesign, and
   restyling a component blind is how a page that looked fine stops meaning
   what it meant.
   ========================================================================== */

/* ---------- the frame the neutraliser removed ---------- */
body.mls-modern.mls-shell .main_page{max-width:1180px;margin:0 auto;padding:0 20px}
body.mls-modern.mls-shell .main_content,
body.mls-modern.mls-shell .center_center,
body.mls-modern.mls-shell .column-center,
body.mls-modern.mls-shell .column-center-full,
body.mls-modern.mls-shell .page_default{max-width:none;width:auto;margin:0;padding:0;
  float:none;background:none;border:0;min-height:0}
body.mls-modern.mls-shell .content_frame{background:#fff;border:1px solid var(--m-line);
  border-radius:var(--m-radius);box-shadow:var(--m-shadow);padding:26px;margin:22px 0 34px}
@media(max-width:560px){
  body.mls-modern.mls-shell .content_frame{padding:18px;border-radius:10px}
}

/* ---------- breadcrumbs ---------- */
/* .breadcrumblink is a DIV, so each crumb was taking its own line. */
body.mls-modern.mls-shell .breadcrumbs{font-size:13px;color:var(--m-muted);
  margin:0 0 18px;line-height:1.9}
body.mls-modern.mls-shell .breadcrumblink{display:inline}
body.mls-modern.mls-shell .breadcrumbs a{color:var(--m-muted);text-decoration:none}
body.mls-modern.mls-shell .breadcrumbs a:hover{color:var(--m-green);text-decoration:underline}

/* ---------- type, to the scale in MLS-Style-Guide.md section 4 ---------- */
body.mls-modern.mls-shell h1{font-size:34px;line-height:1.15;font-weight:700;
  color:var(--m-ink);margin:0 0 14px;letter-spacing:-.5px}
body.mls-modern.mls-shell h2{font-size:19px;font-weight:700;color:var(--m-ink);margin:26px 0 14px}
body.mls-modern.mls-shell h3{font-size:17px;font-weight:700;color:var(--m-ink);margin:22px 0 12px}
@media(max-width:900px){body.mls-modern.mls-shell h1{font-size:27px}}
/* CORRECTED 8 September 2026. This read
   `body.mls-modern.mls-shell .content_frame a`, specificity 0,3,1, which is
   heavier than any rule a page writes for its own buttons. On the upgrades page
   that broke both of them: `.total_costs a:hover` at 0,2,1 sets white text on a
   green fill and my green won, so SR got green on green and could not read the
   button; and `.lifetime a` sets white text on a green fill at rest, which my
   rule would also have overridden the moment a paid option was ticked and that
   button appeared.

   The scope is unchanged, the WEIGHT is lowered. `:where()` matches exactly the
   same pages and contributes nothing to specificity, so this lands at 0,1,1:
   above `a{color:#111}` in styles_new.css, which it needs to beat, and below any
   component that styles its own links, which it must not. That ordering is the
   point, and it removes this whole class of collision from the rest of the
   rollout rather than patching one button. */
:where(body.mls-modern.mls-shell) .content_frame a{color:var(--m-green)}
body.mls-modern.mls-shell .tip{font-size:13.5px;color:var(--m-muted);margin:6px 0 0}
body.mls-modern.mls-shell .red{color:#b3261e;font-size:15px;margin:0 0 8px}

/* ---------- form controls ---------- */
/* 16px minimum or iOS Safari zooms the page on focus. One explicit height,
   never height built out of padding plus line box. Style guide section 7.
   The pages carry inline width styles; those are left alone on purpose. */
body.mls-modern.mls-shell label{display:block;font-size:16px;color:var(--m-ink);margin:0 0 6px}
body.mls-modern.mls-shell .inputtext,
body.mls-modern.mls-shell input[type=text],
body.mls-modern.mls-shell input[type=password],
body.mls-modern.mls-shell input[type=email],
body.mls-modern.mls-shell input[type=tel],
body.mls-modern.mls-shell select{font-family:inherit;font-size:16px;height:46px;
  padding:0 12px;border:1px solid var(--m-line);border-radius:7px;
  background:#fff;color:var(--m-ink)}
body.mls-modern.mls-shell textarea{font-family:inherit;font-size:16px;padding:10px 12px;
  border:1px solid var(--m-line);border-radius:7px;background:#fff;color:var(--m-ink)}
body.mls-modern.mls-shell .inputtext:focus,
body.mls-modern.mls-shell input[type=text]:focus,
body.mls-modern.mls-shell input[type=password]:focus,
body.mls-modern.mls-shell input[type=email]:focus,
body.mls-modern.mls-shell input[type=tel]:focus,
body.mls-modern.mls-shell select:focus,
body.mls-modern.mls-shell textarea:focus{outline:0;border-color:var(--m-green);
  box-shadow:0 0 0 3px rgba(13,122,61,.15)}

/* ---------- buttons ---------- */
/* Primary first, secondary after, so a button carrying both classes lands
   secondary. The background shorthand also clears the legacy .button_fade
   gradient and .shadow, which is why neither needs a rule of its own. */
body.mls-modern.mls-shell input[type=submit],
body.mls-modern.mls-shell .submit,
body.mls-modern.mls-shell .next_button{font-family:inherit;font-size:15px;font-weight:700;
  height:46px;padding:0 22px;border:0;border-radius:7px;background:var(--m-green);
  color:#fff;cursor:pointer;box-shadow:none;text-shadow:none}
body.mls-modern.mls-shell input[type=submit]:hover,
body.mls-modern.mls-shell .submit:hover,
body.mls-modern.mls-shell .next_button:hover{background:var(--m-green-dk)}
body.mls-modern.mls-shell .submit_clear,
body.mls-modern.mls-shell .smaller_button{background:#fff;color:var(--m-green);
  border:2px solid var(--m-green);padding:0 20px}
body.mls-modern.mls-shell .submit_clear:hover,
body.mls-modern.mls-shell .smaller_button:hover{background:var(--m-green-lt)}

/* ---------- two faults found by measuring at 320px, 8 September 2026 ---------- */

/* .column-center and .column-center-full are display:inline-block in
   styles_new.css, with width:85% and 84% in two media queries. Setting
   width:auto above is right, but width:auto on an INLINE-BLOCK is
   shrink-to-fit, so a wide child stops being clipped and starts pushing the
   box out instead. Measured at 320px on list_your_business_checkout_confirm:
   the container had 244px available and the box computed to 312.8px, the
   min-content width of the business details table inside it, and the page
   scrolled sideways at 352px. Making it a block removes shrink-to-fit
   entirely. Not a change anyone would see on a wide screen, which is why it
   had to be measured rather than looked at. */
body.mls-modern.mls-shell .column-center,
body.mls-modern.mls-shell .column-center-full,
body.mls-modern.mls-shell .center_center{display:block}

/* And the table that was doing the pushing. No markup change: the legacy
   tables are label and value pairs, so they wrap rather than needing a
   scroller. */
body.mls-modern.mls-shell .content_frame table{width:100%;max-width:100%}
body.mls-modern.mls-shell .content_frame td,
body.mls-modern.mls-shell .content_frame th{word-break:break-word;vertical-align:top}

/* The green tick in .search_check_boxes on the checkout page is rgb(54,144,59)
   at 14.4px, which measures 4.03:1 on white and FAILS WCAG AA at 4.5. It is a
   legacy colour and predates this work, but it is on a page carrying the
   modern shell now, so it moves to the palette's dark green at 7.80:1. The
   only legacy component this block touches, and only because it fails. */
body.mls-modern.mls-shell .search_check_boxes{color:var(--m-green-dk)}

/* .option_box and .option_box_inline are inline-block with max-width:900px in
   styles_new.css. On the payment page at 320px the inline-block shrink-to-fit
   resolved to 284px inside 244px of space and pushed the page 3px sideways.
   Capping at 100% is a constraint, not a restyle: the box keeps its legacy
   border, radius and padding, it simply cannot exceed its container. */
body.mls-modern.mls-shell .option_box,
body.mls-modern.mls-shell .option_box_inline{max-width:100%}

/* THE 163px OF NOTHING. Found by measuring, 8 September 2026.
   Every funnel page includes menu_left_blank.php, whose entire contents are
   <div class="menu_left"> </div>, one space. styles_new.css floats .menu_left
   left at 15% to 18% wide. A float does not change the block box of what
   follows, it shortens the LINE BOXES inside it, so on desktop the h1 measured
   as a full width block starting at the card's left edge while its text
   rendered 163px in. Every line on the page was pushed the same distance. The
   legacy media queries already set it to display:none and width:0 below the
   desktop breakpoint, which is why the phone views were correct and only the
   desktop was wrong, and why it has never looked obviously broken.
   There is no left menu on any page in this chain, so the float holds a column
   open for content that does not exist. Scoped to .mls-shell, so a page with a
   real .menu_left is untouched. */
body.mls-modern.mls-shell .menu_left{display:none}

/* THE CARD WAS THE FULL 1140px AND THE FORMS ONLY FILLED THE LEFT HALF OF IT.
   SR, 8 September 2026, looking at the live pages: "still left aligned".
   Measured rather than guessed. The natural content width of each page in this
   chain, shrink-wrapped in a browser:

     addr 696   categories 627   details 699   final 663
     checkout1 957   confirm 862   checkout2 866

   So a 1140px card was between 18% and 45% wider than anything in it, and the
   content had nowhere to go but hard left. 860px suits the whole chain: the
   two widest pages fit it almost exactly, and the four form pages fill 86% of
   it instead of 61%. checkout1 compresses by about 100px, which costs nothing
   because its widest element is an example screenshot that scales and its text
   was too wide to read comfortably at 957px anyway.

   This caps the CARD, not the page. .main_page stays at the 1180px site
   container so the header and the page still line up, which is the rule in
   MLS-Style-Guide.md section 5. */
body.mls-modern.mls-shell .content_frame{max-width:820px;margin:22px auto 34px}

/* AND THE SECOND HALF OF THE SAME FAULT, which narrowing the card alone does
   not fix. SR, 8 September 2026: "box is centred, just left aligned inside the
   box". .option_box_inline is display:inline-block in styles_new.css, so it
   shrink-wraps to its content, about 625px on the address page, and then sits
   hard left inside the card with the rest of the width empty beside it.
   Making it a block lets it fill the card, so the bordered box is the width of
   the panel it lives in instead of a narrow column floating in it. The border,
   radius and padding are all still the legacy ones: this changes how wide the
   box is, not what it looks like. */
/* CORRECTED 8 September 2026 to flow-root, for the same reason as the form
   below. SR found it on the post-payment thank you page: the panel above the
   Facebook and X line rendered as an empty bordered rectangle with its content
   sitting outside it. That panel's only child is
   <div style="width:100%;margin-top:8px;float:left;">, and a plain block does
   not contain floats, so the box collapsed to nothing and drew its border
   around empty space. flow-root is full width AND contains floats, which is
   what inline-block was quietly doing before. */
body.mls-modern.mls-shell .option_box_inline{display:flow-root}

/* ---------- field spacing, 8 September 2026 ---------- */
/* SR, comparing the refreshed UK page against the untouched USA one: "a lot of
   dead space and compacting it would make it clearer on a desktop and mobile".

   WHERE THE SPACE CAME FROM. The legacy markup separates fields with literal
   line breaks, and the shell then added its own margins on top of them. Two
   shapes, both in this chain:

     </label><br><br>                       address, categories, final
     </label><div class="tip">..</div><br>  details, and anywhere with a hint

   A <br> contributes a whole line box, roughly 26px here, so each field carried
   26px to 52px of break PLUS the label and tip margins. About 60px between one
   input and the next label.

   WHY THE BREAKS ARE TARGETED AND NOT HIDDEN WHOLESALE. `br{display:none}`
   inside the card would also collapse the <br><br> that separate the real
   paragraphs inside the upgrade boxes on checkout1, and the <br> INSIDE each
   label that puts the input under its own text. So only the breaks that follow
   a label, a tip or an error line are removed. Everything else is untouched.

   The spacing is then stated explicitly rather than left to line boxes: 16px
   below each field, and a tip pulled up to sit 5px under its input. The tip's
   negative top margin collapses against the label's 16px bottom margin to
   exactly 5px, which is why both numbers are here and not one. */
body.mls-modern.mls-shell .content_frame label + br,
body.mls-modern.mls-shell .content_frame label + br + br,
body.mls-modern.mls-shell .content_frame .tip + br,
body.mls-modern.mls-shell .content_frame .red + br{display:none}
body.mls-modern.mls-shell .content_frame label{display:block;margin:0 0 16px}
/* The label's own <br>, between its text and its input, is the same 26px line
   box again. The input is made a block instead, so it starts on its own line
   without the break. `strong` stays INLINE deliberately: making it a block put
   "(optional)" and " - Use at least 8 characters" on a line of their own,
   because those words sit outside the <strong> in the markup. Checkboxes and
   radios are excluded, so the tick lists on the upgrades page still read
   inline. */
/* CORRECTED 8 September 2026. This previously read `label > strong + br`,
   which assumed the break after a label's bold text is always the one before
   its input. On list_your_business_final.php it is not: that label reads
   <strong>Brief summary</strong><br>Describe your business...<br><textarea>,
   so hiding the FIRST break ran the heading into the sentence and SR got
   "Brief summaryDescribe your business". Found on the live page.

   A break is now hidden only when the thing immediately after it is the field
   itself. Any break separating one piece of text from another is kept, whatever
   its position in the label. */
body.mls-modern.mls-shell .content_frame label > br:has(+ input[type=text]),
body.mls-modern.mls-shell .content_frame label > br:has(+ input[type=password]),
body.mls-modern.mls-shell .content_frame label > br:has(+ input[type=email]),
body.mls-modern.mls-shell .content_frame label > br:has(+ input[type=tel]),
body.mls-modern.mls-shell .content_frame label > br:has(+ select),
body.mls-modern.mls-shell .content_frame label > br:has(+ textarea){display:none}
body.mls-modern.mls-shell .content_frame label input[type=text],
body.mls-modern.mls-shell .content_frame label input[type=password],
body.mls-modern.mls-shell .content_frame label input[type=email],
body.mls-modern.mls-shell .content_frame label input[type=tel],
body.mls-modern.mls-shell .content_frame label select,
body.mls-modern.mls-shell .content_frame label textarea{display:block;margin:5px 0 0}
/* The pull-up is ONLY for a hint that sits under its own input. SR found the
   other case on the upgrades page: in the categories box the hint follows a
   paragraph, not a label, and the negative margin dragged it up into the line
   above so the two texts touched. Default is now a normal 5px gap, and the
   pull-up applies only where a label actually precedes it. */
body.mls-modern.mls-shell .content_frame .tip{margin:5px 0 16px}
body.mls-modern.mls-shell .content_frame label + .tip{margin:-11px 0 16px}
/* ...but not after a CHECKBOX label, which is inline and has no input sitting
   below it to tuck under. On the upgrades page that pulled "Premium content
   costs £x" up into the line above it. */
body.mls-modern.mls-shell .content_frame label:has(input[type=checkbox]) + .tip,
body.mls-modern.mls-shell .content_frame label:has(input[type=radio]) + .tip{margin:5px 0 16px}

/* CHECKBOX AND RADIO ROWS STAY INLINE, and this is the second thing SR found.
   The coverage options on the upgrades page are written with the price OUTSIDE
   the label:

     <label><input type="checkbox" ...>Show up within 10 miles</label> - £3.00<br>

   Making every label a block dropped that price onto a line of its own, and
   hiding the <br> after every label then ran it into the next option, so each
   price appeared to belong to the option below it. Both rules are reversed for
   labels that contain a checkbox or a radio, which are the only ones written
   this way. Same for the sponsored listing, promotion and remove-adverts rows.

   `:has()` is what makes this selectable, and it is supported by every current
   browser. On anything old enough to lack it these two rules are ignored and
   the page falls back to the behaviour above, which is untidy but readable.
   Nothing else depends on them. */
body.mls-modern.mls-shell .content_frame label:has(input[type=checkbox]),
body.mls-modern.mls-shell .content_frame label:has(input[type=radio]){display:inline;margin:0}
body.mls-modern.mls-shell .content_frame label:has(input[type=checkbox]) + br,
body.mls-modern.mls-shell .content_frame label:has(input[type=radio]) + br{display:revert}
body.mls-modern.mls-shell .content_frame .red{margin:0 0 6px}

/* The Brief summary box on list_your_business_final.php. SR, 8 September 2026.
   Its markup carries style="width:96%;max-width:420px" inline, and an inline
   style beats a stylesheet, so lifting the cap needs !important. That is the
   only reason it is here and it is used on nothing else.

   420px inside an 820px card is half the width available for the one free text
   field in the whole signup, where a business describes itself in 160
   characters. The cap goes to 100% of the card, and the inline width:96% is
   left alone, so the box is about 735px on a desktop and still 96% of a phone
   screen. Responsive by construction rather than by a second breakpoint. */
body.mls-modern.mls-shell .content_frame textarea{max-width:100% !important}

/* The third and last shrink-wrapper in this markup. Lifting the textarea's
   max-width alone only took it from 420px to 485px, because the <form> around
   it is display:inline-block in styles_new.css and so sizes itself to its
   widest child: the box could not grow past the form, and the form could not
   grow past the box. Measured, not guessed: form 505px inside a 766px panel.
   As a block the form fills the panel and the textarea's own width:96% then
   resolves against 766px instead of 505px. The other pages are unaffected
   because their inputs are capped by their own inline max-widths. */
/* CORRECTED 8 September 2026, within the hour, because `display:block` here
   broke the Next button on every page in the chain and SR caught it on
   list_your_business_final.php.

   `.next_button` is `float:right` in styles_new.css. An inline-block form
   establishes a block formatting context and therefore CONTAINS its floats,
   which is the only reason the button used to sit inside the bordered panel.
   Making the form a plain block removed that containment: the float stopped
   contributing to the form's height, the panel's border closed above it, and
   the button dropped out of the box.

   `flow-root` is the right answer and does both jobs at once: block-level and
   full width, so the textarea still resolves its width:96% against the panel,
   and it establishes a block formatting context, so the float is contained
   exactly as before. */
body.mls-modern.mls-shell .content_frame form{display:flow-root}

/* --------------------------------------------------------------------------
   THE SIDEBAR CARDS, shared by search.php and details_new.php.
   MOVED HERE from styles_search.css on 8 September 2026, when the details page
   was converted and needed the same cards. Scoped to plain `body.mls-modern`
   rather than to a page, so there is ONE copy of these rules and the two pages
   cannot drift apart.
   Panel treatment 2 from MLS-Style-Guide.md section 6: a bordered white panel,
   no lift, because the panel is not itself a link. Only the rows inside are.
   -------------------------------------------------------------------------- */
body.mls-modern .side_card{
  background:#fff;border:1px solid var(--m-line);border-radius:12px;
  padding:16px 18px;margin:0 0 16px;
  box-shadow:0 1px 2px rgba(16,32,24,.05)}
body.mls-modern .side_card_head{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--m-muted);margin:0 0 12px;padding-bottom:10px;
  border-bottom:1px solid var(--m-line)}

body.mls-modern .side_links{list-style:none;padding:0;margin:0}
body.mls-modern .side_links li{margin:0}
body.mls-modern .side_links li + li{border-top:1px solid #eef3f0}
body.mls-modern .side_links a{
  display:block;padding:9px 0;font-size:16px;font-weight:600;line-height:1.35;
  color:var(--m-ink);text-decoration:none}
body.mls-modern .side_links a:hover{color:var(--m-green)}
body.mls-modern .side_links_in{font-weight:400;color:var(--m-muted)}
body.mls-modern .side_links a:hover .side_links_in{color:var(--m-green)}
body.mls-modern .side_links_plain{margin-top:12px;border-top:1px solid var(--m-line);padding-top:4px}
body.mls-modern .side_links_plain a{font-weight:400;font-size:15px;color:var(--m-muted)}
body.mls-modern .side_links_plain a:hover{color:var(--m-green)}

body.mls-modern .side_action{
  display:block;text-align:center;font-size:16px;font-weight:700;
  padding:11px 12px;border-radius:9px;margin:0 0 9px;text-decoration:none;
  border:1px solid var(--m-green);background:#fff;color:var(--m-green);
  transition:background .15s ease,color .15s ease,border-color .15s ease}
body.mls-modern .side_action:hover{background:var(--m-green-lt)}
body.mls-modern .side_action_primary{background:var(--m-green);color:#fff}
body.mls-modern .side_action_primary:hover{
  background:var(--m-green-dk);border-color:var(--m-green-dk);color:#fff}

/* ==========================================================================
   THE LEGACY PAGE VARIANT. Added 14 September 2026, Stage 8.

   WHO CARRIES IT: any page converted by a HEADER WRAPPER rather than by editing
   the page itself. header_no_search_home.php is the first, and the wrapper sets
   all three classes: mls-modern mls-shell mls-legacy.

   WHY IT IS A THIRD CLASS AND NOT AN EDIT TO THE SHELL BLOCK ABOVE.
   The shell block is shared with the signup chain, and every number in it was
   measured against that chain's real content on 8 September. Pages converted by
   a wrapper have different content and different needs. Nothing that existed
   before today carries mls-legacy, so these three rules cannot reach the
   homepage, search, the listing pages or the signup chain.

   1. THE CARD FILLS THE SITE CONTAINER, AND THE CONTENT KEEPS ITS MEASURE.
   SR, 14 September 2026: the card looked compressed against a header and a
   homepage that both run the full 1180px. MEASURED AT A 1500px WINDOW BEFORE
   CHANGING ANYTHING, which is the part worth keeping: FAQ text ran 734px at
   16px inside the 820px card, about 94 characters a line, against 987px at
   16.6px and about 122 characters before the conversion. So the TEXT was never
   too narrow. It was already wider than the 45 to 75 characters the gov.uk
   scale this site copies works to. What looked wrong was the white sheet, not
   the measure. So the sheet widens to the container and the content inside
   keeps a measure and is centred in it. That is why 820 appears twice in this
   file meaning two different things: the CARD on the signup chain, and the
   CONTENT COLUMN here.

   2. THE LEGACY BOXES SHRINK-WRAP AGAIN.
   The shell sets .option_box_inline to flow-root so it fills the card, which is
   right on the signup chain where those boxes ARE the content. On login.php it
   stretched a box round a 280px field to 766px inside an 820px card, landing
   its border 27px inside the card edge on each side: two nested white
   rectangles 27px apart. That is what SR saw as the page's own boxes being
   lost, and he was right that the white on white predates this work. What the
   card did was accentuate it.
   inline-block restores the legacy shrink-wrap AND still establishes a block
   formatting context, so it contains floats exactly as it quietly did before
   8 September. The post-payment thank you page fault that flow-root was brought
   in to fix therefore cannot come back on these pages. Measured on login.php:
   the box goes from 699px back to 481px, its own width.

   NOT CHANGED, DELIBERATELY: the legacy component boxes themselves. No fill, no
   border, no radius is touched here. This changes how WIDE the box is and how
   wide the sheet is, not what either looks like, which keeps it a shell pass.
   ========================================================================== */
body.mls-modern.mls-shell.mls-legacy .content_frame{max-width:none;
  padding:34px 40px;margin:22px 0 34px}
body.mls-modern.mls-shell.mls-legacy .content_frame > *{max-width:820px;
  margin-left:auto;margin-right:auto}
body.mls-modern.mls-shell.mls-legacy .option_box_inline{display:inline-block}

/* ==========================================================================
   THE REAL LEFT MENU. Added 14 September 2026, Stage 10.

   THIS CORRECTS A RULE WHOSE OWN COMMENT SAYS THE OPPOSITE OF WHAT IT DOES,
   and that drift is the root cause of a live fault, so it is worth stating
   plainly rather than quietly fixing.

   The rule above, body.mls-modern.mls-shell .menu_left{display:none}, carries
   the note "Scoped to .mls-shell, so a page with a real .menu_left is
   untouched." That was true on 8 September, when the only pages carrying
   mls-shell were the signup chain and every one of them included
   menu_left_blank.php. It stopped being true the moment header wrappers began
   putting mls-shell on ordinary pages.

   WHAT IT COST. On 14 September edit_listing_page_preview.php lost its Publish
   this Page button, because that control is an <li> inside .menu_left. A member
   previewing their own edits had no way to publish them. That page is parked in
   the wrapper's escape hatch for other reasons, but this rule is why the button
   vanished, and header.php could not be converted at all without fixing it:
   aboutus, privacy, terms, sitemap and robot all carry the four button column,
   and add_review_search.php and the /l/ category pages carry a ten item one.

   WHY AN UN-HIDE RATHER THAN A CHANGE TO THE ORIGINAL SELECTOR. If :has() is
   ever unsupported the whole selector would be dropped, and rewriting the
   original as .menu_left:not(:has(.menu_left_item)) would then show the blank
   163px float again on every funnel page, which is the exact bug that rule was
   written to kill. Written as an un-hide, an unsupported :has() simply leaves
   today's behaviour in place. The stylesheet already depends on :has()
   elsewhere, and support was confirmed in the browser before this was written.
   ========================================================================== */
body.mls-modern.mls-shell .menu_left:has(.menu_left_item){display:block}

/* AND THE COLUMN BESIDE IT, or the two overlap.
   MEASURED ON THE LIVE privacy.php AT 1500px BEFORE THIS WAS WRITTEN, which is
   the only reason the numbers below are right rather than plausible.
   .menu_left floats left. The mls-legacy rule centres every direct child of the
   card at 820px, and a centred column starting at 333px ran straight into a
   float ending at 372px, so the first lines of every page indented to 404px
   while later lines started at 333px. A jag down the top of the text.
   display:flow-root makes the column its own block formatting context, so it
   sits BESIDE the float instead of flowing under it, and the auto margins come
   off so it starts where the menu ends. Measured after: menu 214 to 372,
   column 372 to 1192, every paragraph at 404 and 788px wide, which is the same
   reading measure as every other converted page. */
body.mls-modern.mls-shell.mls-legacy .content_frame:has(.menu_left .menu_left_item) > .column-center{
  display:flow-root; margin-left:0; margin-right:0;
}

/* ==========================================================================
   THE LEFT MENU BUTTONS, TEXT AND SHADES. Added 14 September 2026, Stage 11.
   A REGRESSION THIS ROLLOUT CAUSED, found by SR on the live pages the same day.

   THE SYMPTOM: on every wrapper-converted page carrying a real left menu, the
   four green buttons rendered GREEN TEXT ON GREEN. On darker_green, #0d7a3d on
   #0b8142, the words were effectively invisible.

   THE CAUSE, and it is a specificity TIE rather than an override.
   styles_new.css sets .brighter_green a{color:#FFF}, and the other three the
   same, at specificity 0,1,1.
   This file sets :where(body.mls-modern.mls-shell) .content_frame a{color:
   var(--m-green)}. :where() contributes NOTHING, so that selector is also
   0,1,1. On a tie the later stylesheet wins, and styles_modern.css loads after
   styles_new.css. The left menu sits inside .content_frame, so its buttons were
   caught by a rule meant for body copy links.

   PROVED BY COMPARISON, not by reading: /l/Builders/ is parked and unconverted
   and still renders white on green, while privacy.php rendered green on green.
   Same markup, same legacy stylesheet, one class difference.

   THE FIX IS A RESTORATION AND DELIBERATELY NOT A REDESIGN. It puts back the
   two values styles_new.css already declares, #fff on the coloured buttons and
   #111 on .plain, at a specificity that cannot tie. No background, border,
   radius or size is touched.

   AND THE GREENS ARE DARKENED TOO, on SR's instruction the same day.
   Restored to white but otherwise untouched, the buttons measured 2.25:1 on
   brighter_green, 2.90:1 on bright_green, 3.54:1 on bright_green2 and 4.96:1 on
   darker_green. The text is 1.6em bold, which counts as large, so the bar is
   3:1 and the two lightest did not meet it. They never had.

   WHY THREE VALUES MOVED WHEN SR ASKED FOR TWO, and it is a consequence rather
   than a liberty. Darkening only brighter_green and bright_green enough to pass
   pushes both PAST bright_green2 at 3.54:1, which inverts the ladder and stops
   the four buttons reading as a set. So the scale is rebuilt evenly instead:
   3.15, 3.75, 4.35 and 4.96, with darker_green left exactly as it was.

   THE RANGE IS NARROWER THAN IT WAS AND THAT IS UNAVOIDABLE. The old scale ran
   from 2.25 to 4.96 because its lightest end was unreadable. Everything has to
   sit above 3:1 now, so the visible steps between the shades are smaller. The
   buttons are told apart by their words, not their shade.

   HUE AND SATURATION ARE UNCHANGED, taken from the existing bright_green2, so
   these are the same green at four lightnesses rather than four new colours.
   Measured in the browser after applying them, not calculated and hoped for.
   ========================================================================== */
body.mls-modern.mls-shell .content_frame .menu_left a{color:#fff}
body.mls-modern.mls-shell .content_frame .menu_left .plain a{color:#111}
body.mls-modern.mls-shell .content_frame .menu_left .brighter_green a{background-color:#45A44C}
body.mls-modern.mls-shell .content_frame .menu_left .bright_green a{background-color:#3F9545}
body.mls-modern.mls-shell .content_frame .menu_left .bright_green2 a{background-color:#3A893F}

/* THE HOVER, and it had to be restored because the three rules above broke it.
   styles_new.css carries .menu_left_item a:hover{background-color:#36903B} at
   specificity 0,2,1. The background rules above are 0,5,1, so they won on hover
   as well as at rest and the buttons stopped responding to the mouse. SR spotted
   it immediately.

   STANDARDISED RATHER THAN JUST PUT BACK, on SR's instruction, and it cost
   nothing to do it properly: --m-green-dk is the same token .m-cta uses in the
   header and every .submit and .next_button uses in the shell, so the left menu
   now hovers exactly like every other button on the site instead of to its own
   legacy #36903B. White on it measures 7.80:1. */
body.mls-modern.mls-shell .content_frame .menu_left a:hover{
  background-color:var(--m-green-dk); color:#fff;
}

/* ==========================================================================
   LEGACY FORM BOXES FILL THE CONTENT COLUMN. Added 4 October 2026, Stage 14.
   The legacy variant above shrink-wraps .option_box_inline on purpose, for
   login.php. On a FORM WITH A FREE TEXT BOX that made the box only as wide as
   its longest label, so incorrect-data.php came out as a narrow box on the
   left while review-comments-issue.php, the same form with a longer label,
   came out wide. SR asked for them to match. Scoped by :has(textarea), so
   login.php and every box without a text area keep the shrink-wrap. A browser
   without :has() ignores the rule and keeps today's behaviour.
   ========================================================================== */
body.mls-modern.mls-shell.mls-legacy .option_box_inline:has(textarea){display:block}

/* ==========================================================================
   THE BRAND BAND, 14 October 2026 (agreed and locked by SR on 13 October).
   MLS-Style-Guide.md section 3a owns the rule and the list of pages. This is the
   one shared home for it. Five pages only: homepage, rate card, signup step 1,
   member area front page, log in. Never on search, listings, forum or checkout.

   Dark green #0a5f30, a 6px yellow #fece0b rule along the bottom, straight edges,
   the town and van artwork /images/new/mls-town.png on the right, a small yellow
   uppercase label, a white headline, a pale green intro line, and one yellow
   lozenge or button with dark text.

   Markup:
   <div class="m-bb"><div class="m-bb-in">
     <div class="m-bb-lbl">Label</div>
     <h1 class="m-bb-h1">Headline</h1>
     <p class="m-bb-p">Intro</p>
     <span class="m-bb-pill">...</span> or <a class="m-bb-btn">...</a>
     <img class="m-bb-art" src="/images/new/mls-town.png" width="1200" height="597" alt="">
   </div></div>
   For a page whose band carries more below the headline (the homepage doors), put the
   label, headline and intro in <div class="m-bb-row"><div>...</div><img class="m-bb-art m-bb-art-inline" ...></div>.
   ========================================================================== */
body.mls-modern .m-bb{background:#0a5f30;border-bottom:6px solid #fece0b;position:relative;overflow:hidden}
body.mls-modern .m-bb-in{max-width:1180px;margin:0 auto;padding:30px 20px;position:relative;min-height:176px;box-sizing:border-box}
body.mls-modern .m-bb-lbl{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fece0b;margin:0 0 6px}
body.mls-modern .m-bb .m-bb-h1,body.mls-modern.mls-shell .m-bb .m-bb-h1{font-size:36px;line-height:1.14;margin:0 0 8px;color:#fff;max-width:640px;letter-spacing:-.5px;font-weight:700}
body.mls-modern .m-bb .m-bb-h1 em{font-style:normal;color:#fece0b}
body.mls-modern .m-bb-p{font-size:18px;line-height:1.5;margin:0 0 16px;color:#e3f1e8;max-width:600px}
body.mls-modern .m-bb-pill{display:inline-flex;gap:8px;align-items:center;background:#fece0b;color:#16211c;border-radius:999px;padding:7px 16px;font-weight:700;font-size:16px}
body.mls-modern .m-bb-pill b{font-size:20px}
body.mls-modern a.m-bb-btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:9px;background:#fece0b;color:#16211c;font-weight:800;font-size:17px;text-decoration:none}
body.mls-modern a.m-bb-btn:hover{background:#ffd83d}
body.mls-modern .m-bb-art{position:absolute;right:10px;bottom:0;width:380px;height:auto}
body.mls-modern .m-bb-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
body.mls-modern .m-bb-art.m-bb-art-inline{position:static;flex:0 0 auto;width:300px;margin:0 0 -2px}
/* The homepage hero: label clear of the header, headline tight under the label. */
body.mls-home .m-bb-row{padding-top:26px}
body.mls-home .m-bb-row .h-h1{margin-top:0}
@media(max-width:900px){
  body.mls-modern .m-bb .m-bb-h1,body.mls-modern.mls-shell .m-bb .m-bb-h1{font-size:28px;max-width:none}
  body.mls-modern .m-bb-art{width:230px}
  body.mls-modern .m-bb-in{padding-bottom:136px}
  body.mls-modern .m-bb-row{flex-direction:column;align-items:flex-start}
  body.mls-modern .m-bb-art.m-bb-art-inline{width:220px;align-self:flex-end;margin:0}
  /* Homepage on a phone: smaller still, so the Find door is not pushed far down. */
  body.mls-home .m-bb-art.m-bb-art-inline{width:170px;margin:-6px 0 0}}

/* ---------- signup page, form on its own, 14/10/26 (Stage 20) ----------
   SR: people on list_your_business.php are already in "list my business" mode, so the
   ticks and chips came out of the hero and the form card stands alone, centred and as
   large as the fold allows. Scoped by .m-solo, which only that page carries, so the older
   two column .m-hero rules above are untouched and still valid.
   height:auto ON THE INPUTS IS A FIX, NOT DECORATION. The business name box carries the
   legacy class inputtext, which styles_new.css gives a fixed height, so it rendered
   visibly shorter than the two phone boxes beside it. */
body.mls-modern .m-hero.m-solo{display:block;padding:30px 0 10px}
body.mls-modern .m-solo .m-card{max-width:660px;margin:0 auto;position:static;padding:34px 40px 30px}
body.mls-modern .m-solo .m-card h2{font-size:30px;line-height:1.15;text-align:center;margin:0 0 24px}
body.mls-modern .m-solo .m-field label{font-size:16px}
body.mls-modern .m-solo .m-field input[type=text],
body.mls-modern .m-solo .m-field input[type=tel]{height:auto;padding:15px 16px;font-size:18px;font-family:inherit;box-sizing:border-box}
body.mls-modern .m-solo .m-pair{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
body.mls-modern .m-solo .m-btn{padding:18px 20px;font-size:20px;margin-top:6px}
body.mls-modern .m-solo .m-reassure{font-size:14px}
@media(max-width:599px){body.mls-modern .m-hero.m-solo{padding:18px 0 6px}
  body.mls-modern .m-solo .m-card{padding:22px 20px}
  body.mls-modern .m-solo .m-card h2{font-size:21px;margin:0 0 18px}
  body.mls-modern .m-solo .m-pair{grid-template-columns:1fr}}
body.mls-modern .m-includes ul.m-ticks{margin-bottom:18px}
@media(min-width:900px){body.mls-modern .m-includes ul.m-ticks{grid-template-columns:repeat(4,1fr)}}

/* ---------- the slim brand band, signup step 1 on a phone, 14/10/26 (Stage 20) ----------
   SR: most signups come from a phone, and there the full band filled the first screen and
   pushed the Next button out of sight. At 900px and below this page keeps only the headline
   on the green, with the yellow rule; the label, the intro line and the artwork are hidden.
   The page has no price lozenge at any width, SR's call the same day. Desktop above 900px is unchanged. Scoped by .m-bb-slim, which only
   list_your_business.php carries. MLS-Style-Guide.md section 3a records the exception. */
@media(max-width:900px){
  body.mls-modern .m-bb.m-bb-slim .m-bb-in{padding:16px 20px 18px;min-height:0}
  body.mls-modern .m-bb.m-bb-slim .m-bb-lbl,
  body.mls-modern .m-bb.m-bb-slim .m-bb-p,
  body.mls-modern .m-bb.m-bb-slim .m-bb-art{display:none}
  body.mls-modern .m-bb.m-bb-slim .m-bb-h1,
  body.mls-modern.mls-shell .m-bb.m-bb-slim .m-bb-h1{font-size:24px;margin:0}}

/* ---------- add_review.php, the review form, 14/10/26 (Stage 22) ----------
   SR: "the white page and white box are hard on the eyes, so make it clearer". No band and no
   artwork (section 3a: not a band page). The old bordered white box inside the white card is
   gone; each part of the form is a pale green panel (--m-green-lt, "tinted panels inside a
   white card", section 2) with its own heading. Yes, No and the 0 to 5 ratings are large
   tappable buttons over real radio inputs, so names, values and the page's JavaScript are
   unchanged. Scoped by .m-rv, which only add_review.php carries. */
body.mls-modern .m-rv h1{margin:0 0 18px}
body.mls-modern .m-rv h2{font-size:20px;line-height:1.2;margin:0 0 6px;padding:0;border:0;background:none;color:var(--m-ink)}
body.mls-modern .m-rv-q{margin:0 0 18px}
body.mls-modern .m-rv-qt{font-size:18px;font-weight:600;margin:0 0 10px;color:var(--m-ink)}
body.mls-modern .m-rv-yn{display:flex;gap:12px;flex-wrap:wrap}
body.mls-modern .m-rv-yn label,body.mls-modern .m-rv-opts label{display:block;position:relative;margin:0;cursor:pointer}
body.mls-modern .m-rv-yn input,body.mls-modern .m-rv-opts input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
body.mls-modern .m-rv-yn span,body.mls-modern .m-rv-opts span{display:flex;align-items:center;justify-content:center;
  height:46px;border:1.5px solid var(--m-line-2);border-radius:7px;background:#fff;color:var(--m-ink);
  font-weight:700;font-size:17px;box-sizing:border-box;transition:background .12s,border-color .12s}
body.mls-modern .m-rv-yn span{min-width:110px;padding:0 22px}
body.mls-modern .m-rv-yn label:hover span,body.mls-modern .m-rv-opts label:hover span{border-color:var(--m-green)}
body.mls-modern .m-rv-yn input:checked + span,body.mls-modern .m-rv-opts input:checked + span{background:var(--m-green);border-color:var(--m-green);color:#fff}
body.mls-modern .m-rv-yn input:focus-visible + span,body.mls-modern .m-rv-opts input:focus-visible + span{outline:3px solid rgba(13,122,61,.35);outline-offset:2px}
body.mls-modern .m-rv-note{background:var(--m-green-lt);border-radius:10px;padding:16px 18px;margin:0 0 18px;font-size:16px}
body.mls-modern .m-rv-note p{margin:10px 0 0}
body.mls-modern .m-rv-guide{border:1px solid var(--m-line);border-radius:10px;padding:14px 18px;margin:0 0 16px;font-size:14.5px;color:var(--m-muted)}
body.mls-modern .m-rv-guide strong:first-child{color:var(--m-ink)}
body.mls-modern .m-rv-guide ul{margin:6px 0 0 1.2em}
body.mls-modern .m-rv-guide li{margin:0 0 4px}
body.mls-modern .m-rv-panel{background:var(--m-green-lt);border-radius:10px;padding:20px 22px;margin:0 0 16px}
body.mls-modern .m-rv-hint{font-size:14px;color:var(--m-muted);margin:0 0 12px}
body.mls-modern .m-rv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid #cfe3d6}
body.mls-modern .m-rv-hint + .m-rv-row,body.mls-modern .m-err + .m-rv-row{border-top:0}
body.mls-modern .m-rv-lbl{font-weight:600;font-size:16px;color:var(--m-ink)}
body.mls-modern .m-rv-opts{display:flex;gap:6px;flex:0 0 auto}
body.mls-modern .m-rv-opts span{width:44px;font-size:16px}
body.mls-modern .m-rv-opts label:first-child span{width:52px;font-size:14px;color:var(--m-muted)}
body.mls-modern .m-rv-opts label:first-child input:checked + span{color:#fff}
body.mls-modern .m-rv-overall{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid #cfe3d6;font-weight:600}
body.mls-modern .m-rv-overall .stars{display:flex;gap:2px}
body.mls-modern .m-rv label.m-rv-f{display:block;font-weight:600;font-size:16px;margin:14px 0 2px}
body.mls-modern .m-rv .m-rv-panel h2 + .m-err + label.m-rv-f,body.mls-modern .m-rv .m-rv-panel h2 + label.m-rv-f{margin-top:8px}
body.mls-modern .m-rv input[type=text]{width:100%;max-width:420px;box-sizing:border-box}
body.mls-modern .m-rv textarea{display:block;width:100%;max-width:none;min-height:170px;box-sizing:border-box;margin-top:8px}
body.mls-modern .m-rv label.m-rv-check{display:flex;align-items:center;gap:10px;font-size:15px;margin:10px 0 0;cursor:pointer}
body.mls-modern .m-rv label.m-rv-check input{width:20px;height:20px;margin:0;accent-color:var(--m-green)}
body.mls-modern .m-rv-cap{margin:4px 0 16px;font-size:15px}
body.mls-modern .m-rv .m-rv-submit{max-width:360px;font-family:inherit}
@media(max-width:599px){
  body.mls-modern .m-rv-panel{padding:16px 14px}
  body.mls-modern .m-rv-row{flex-direction:column;align-items:stretch;gap:8px}
  body.mls-modern .m-rv-opts label{flex:1}
  body.mls-modern .m-rv-opts span,body.mls-modern .m-rv-opts label:first-child span{width:100%}
  body.mls-modern .m-rv-yn label{flex:1}
  body.mls-modern .m-rv-yn span{min-width:0}
  body.mls-modern .m-rv .m-rv-submit{max-width:none}}

/* ---------- the reply box, shared, 14/10/26 (Stage 24) ----------
   SR, on the Leave a review page: "I love the green box for a reply, can we make that a styling
   rule". MLS-Style-Guide.md section 6a. A business's public reply to a review always sits in
   this box, on every page that shows one: pale green (--m-green-lt), no border, the "Response
   from" line in bold on its own line, then the reply. Never a grey rule above plain text again. */
body.mls-modern .m-reply{margin:14px 0 4px;padding:12px 16px;background:var(--m-green-lt);border-radius:7px;
  font-size:15px;line-height:1.5;color:var(--m-ink)}
body.mls-modern .m-reply > strong:first-child{display:block;margin:0 0 4px}
body.mls-modern .m-reply .replies{margin:0;padding:0;border:0;background:none}

/* ---------- member area sub-pages, 14/10/26 (Stage 36) ----------
   The member pages (edit page, reviews, promotion, password, company details, listing type and
   the rest as they are done) carry class m-mem on their .page_default. One shared treatment
   instead of a rebuild of each: the white bordered form box becomes a pale green panel, the
   boxes go full width (the pages carry inline max-widths of 330px, hence !important), the old
   bevelled Save buttons become the standard green button, and the "Back to Listing Editor" link
   becomes a small pill. Selectors carry all three shell classes so they outrank the legacy
   variant's .option_box_inline{display:inline-block}. */
body.mls-modern.mls-shell.mls-legacy .m-mem .mgnb8{margin:0 0 14px}
body.mls-modern.mls-shell.mls-legacy .m-mem .mgnb8 a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;box-sizing:border-box;line-height:1.3;border-radius:999px;background:var(--m-green-lt);color:var(--m-green-dk);text-decoration:none;font-size:14px}
body.mls-modern.mls-shell.mls-legacy .m-mem .mgnb8 a:hover{background:var(--m-green);color:#fff}
body.mls-modern.mls-shell.mls-legacy .m-mem h1{margin:0 0 12px}
body.mls-modern.mls-shell.mls-legacy .m-mem .option_box_inline{display:block;border:0;box-shadow:none;background:var(--m-green-lt);border-radius:10px;padding:20px 22px;margin:14px 0 18px;max-width:none}
body.mls-modern.mls-shell.mls-legacy .m-mem .option_box_inline label{display:block;margin:0 0 14px}
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=text],
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=password],
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=email],
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=tel],
body.mls-modern.mls-shell.mls-legacy .m-mem select{width:100% !important;max-width:520px !important;box-sizing:border-box;background:#fff}
body.mls-modern.mls-shell.mls-legacy .m-mem textarea{width:100% !important;max-width:none !important;box-sizing:border-box;background:#fff}
body.mls-modern.mls-shell.mls-legacy .m-mem input.submit,
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=submit]{display:inline-flex;align-items:center;justify-content:center;height:48px;min-width:220px;padding:0 26px;border:0;border-radius:10px;background:var(--m-green);color:#fff;font-family:inherit;font-size:17px;font-weight:700;box-shadow:0 2px 0 var(--m-green-dk);background-image:none;text-shadow:none;cursor:pointer;margin:8px 0 0;float:none}
body.mls-modern.mls-shell.mls-legacy .m-mem input.submit:hover,
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=submit]:hover{background:var(--m-green-dk)}
body.mls-modern.mls-shell.mls-legacy .m-mem table.opening_times_table{width:auto;border-collapse:separate;border-spacing:6px 6px}
body.mls-modern.mls-shell.mls-legacy .m-mem table.opening_times_table select{width:auto !important;min-width:90px}
/* The "Choose an image file" controls on edit_listing_page.php did not read as buttons, parked in
   MLS-Open-Actions.md 0.7 on 4 October 2026. They now look like the secondary button. */
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=file]{font-family:inherit;font-size:15px;max-width:100%}
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=file]::file-selector-button{height:40px;padding:0 16px;margin:0 12px 0 0;border:1.5px solid var(--m-green);border-radius:7px;background:#fff;color:var(--m-green-dk);font-family:inherit;font-weight:700;font-size:15px;cursor:pointer}
body.mls-modern.mls-shell.mls-legacy .m-mem input[type=file]::file-selector-button:hover{background:var(--m-green);color:#fff}
body.mls-modern.mls-shell.mls-legacy .m-mem .detailsreview{background:#fff;border:1px solid var(--m-line-2);border-radius:10px;padding:16px 18px;margin:0 0 14px}
@media(max-width:599px){
  body.mls-modern.mls-shell.mls-legacy .m-mem .option_box_inline{padding:16px 14px}
  body.mls-modern.mls-shell.mls-legacy .m-mem input.submit,
  body.mls-modern.mls-shell.mls-legacy .m-mem input[type=submit]{width:100%;min-width:0}}

/* Stage 37, 14/10/26: member batch 2 adds the upgrade checkout pages, whose options sit in
   tables. Boxes and drop-downs inside a table keep their own width, so the price rows and
   coverage choices are not stretched across the table. */
body.mls-modern.mls-shell.mls-legacy .m-mem table input[type=text],
body.mls-modern.mls-shell.mls-legacy .m-mem table select{width:auto !important;max-width:none !important}

/* ---------- signup chain, 14/10/26 (Stage 42) ----------
   SR: the signup steps were white boxes on a white card, and did not look as good as the member
   pages. The steps after step 1 (address, categories, details, final, upgrades, confirm, payment)
   carry class m-su. Light touch only: the inputs and buttons were already modernised on 8
   September, so this block only turns the white bordered boxes into the pale green panel the
   member pages use, left aligns the confirm page labels, and brings the Stripe Pay button into
   line with the standard green button. These pages have no mls-legacy class, hence the two class
   prefix. */
body.mls-modern.mls-shell .m-su .option_box,
body.mls-modern.mls-shell .m-su .option_box_inline{display:block;border:0;box-shadow:none;background:var(--m-green-lt);border-radius:10px;padding:20px 22px;margin:14px 0 18px;max-width:none}
body.mls-modern.mls-shell .m-su .option_box h2,
body.mls-modern.mls-shell .m-su .option_box_inline h2{margin-top:0}
body.mls-modern.mls-shell .m-su .option_box table td[align=right]{text-align:left;padding-right:14px;color:#4a4a4a}
body.mls-modern.mls-shell .m-su .opening_times_table{margin-top:6px}
body.mls-modern.mls-shell .m-su button#submit{height:48px;min-width:220px;padding:0 26px;margin:12px 0 0;border:0;border-radius:10px;background:var(--m-green);color:#fff;font-size:17px;line-height:48px;box-shadow:0 2px 0 var(--m-green-dk)}
body.mls-modern.mls-shell .m-su button#submit:hover{background:var(--m-green-dk);border:0}
@media (max-width:600px){
  body.mls-modern.mls-shell .m-su .option_box,
  body.mls-modern.mls-shell .m-su .option_box_inline{padding:16px 14px}
  body.mls-modern.mls-shell .m-su button#submit{width:100%;min-width:0}}

/* ---------- tick boxes, site wide. Stage 50, 15 October 2026 ----------
   SR liked them on the signup extras step (Stage 49) and asked for them
   everywhere. 28px, white with a green edge, a white tick on green when ticked.
   styles_new.css draws its own 15px box and a tick with :before; that tick is
   switched off here, or it shows as a second tick. Radios are untouched. */
body.mls-modern input[type=checkbox]{
  -webkit-appearance:none;appearance:none;width:28px;height:28px;min-width:28px;margin:0 6px;
  vertical-align:middle;position:relative;top:-2px;cursor:pointer;
  background:#fff;border:2px solid var(--m-green);border-radius:7px;box-shadow:0 1px 2px rgba(16,32,24,.12);
  transition:background-color .12s ease}
body.mls-modern input[type=checkbox]:hover{background:var(--m-green-lt)}
body.mls-modern input[type=checkbox]:checked{
  background:var(--m-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
body.mls-modern input[type=checkbox]:focus-visible{outline:3px solid var(--m-yellow);outline-offset:2px}
body.mls-modern input[type=checkbox]::before,body.mls-modern input[type=checkbox]::after{content:none !important;display:none !important}
body.mls-modern label:has(> input[type=checkbox]){cursor:pointer}

/* Stage 53, 18/10/26: the Stripe payment form on the checkout pages. Each page's own
   style block sets form{width:30vw;min-width:500px}, and 80vw below 600px, which is
   wider than the green panel on a phone, so the Card, Apple Pay, PayPal and Revolut
   rows ran out past the panel edge. The form now fills its panel and never exceeds it. */
body.mls-modern #payment-form{width:100%;min-width:0;max-width:560px;box-sizing:border-box;display:block}
body.mls-modern #payment-element{max-width:100%}

/* USA Stage 109, 21/10/26, SR found it on the USA log in page on a phone: legacy pages size their
   text boxes with size="30" (280px), wider than the card on a 375px phone. Cap form fields at the
   width they sit in, and shrink the 304px reCAPTCHA box slightly on small phones. Carry to UK. */
body.mls-modern.mls-shell .content_frame input,body.mls-modern.mls-shell .content_frame select{max-width:100%}
@media (max-width:400px){body.mls-modern.mls-shell .content_frame .g-recaptcha{transform:scale(.88);transform-origin:0 0}}

/* Stage 100 (UK) and USA Stage 111, 21/10/26, SR: between 761px and 1000px wide (tablets, narrow
   desktop windows) the header nav and the List your business button ran off the right edge,
   because the full size wordmark, nav and button need about 900px. Measured in the browser at
   761px: everything fits with these sizes. Below 761px the nav is hidden as before. */
@media(min-width:761px) and (max-width:1000px){body.mls-modern .m-hdr .m-in{gap:12px;padding-left:16px;padding-right:16px}body.mls-modern .m-brand img{height:32px}body.mls-modern .m-nav{gap:11px;font-size:15px}body.mls-modern .m-nav a{white-space:nowrap}body.mls-modern .m-cta{white-space:nowrap;font-size:14px;padding:9px 13px}}