/* =========================================================================
   The MLD Register - theme.css (deployed to public/assets/css/theme.css,
   loaded AFTER main.css; overrides the engine's design tokens plus the few
   component rules whose colours are authored as literals in main.css).

   Identity: the 23 Aug 2026 premium refresh (brief:
   MLDUK/mld_register_colour_and_imagery_refresh_handoff.md in Rick's
   handoff doc). Midnight Ink #0F2137 carries authority (header, footer,
   dark bands, primary CTAs, links); Porcelain #F6F2ED is the principal
   light ground; Graphite #30353A is body copy; Champagne #CEA25F is the
   restrained premium accent. Supporting tones: Mist #EAEAEA (neutral
   surfaces), Lymphatic Blue #CAD9DD (washes, checked/verified family),
   Soft Lilac #D7D3E7 (one gentle band tint), Sage Grey #C4CEC9 (imagery).
   GREEN IS BANNED on every UI surface (Rick's brief) - the old bottle
   green must not reappear through an engine default, which is why every
   colour token is overridden here even where the value is close.

   Contrast pairs verified 23 Aug 2026 (WCAG AA):
   graphite on porcelain 11.1:1; porcelain on midnight 14.6:1; champagne
   #CEA25F on midnight 6.9:1 (CTA text); champagne-deep #7E6134 on
   porcelain 5.2:1 and on mist 4.8:1 (the text-safe champagne - display
   champagne #CEA25F is only 2.4:1 on porcelain and never carries small
   text); ink-mute #5B636B on porcelain 5.5:1; steel #2F5A70 on porcelain
   6.7:1; midnight on champagne CTA 6.9:1.

   Typography keeps the engine defaults (Source Serif 4 + Hanken Grotesk).
   ========================================================================= */

:root {
  /* Ink family: midnight for headings/strong ink, graphite tones for
     supporting text (body copy itself is set to graphite below). */
  --ink: #0F2137;            /* Midnight Ink - headings, strong ink */
  --ink-soft: #4A5157;       /* soft graphite, 7.2:1 on porcelain */
  --ink-mute: #5B636B;       /* muted graphite, >=4.5:1 on porcelain, mist and washes */

  /* Grounds */
  --paper: #F6F2ED;          /* Porcelain - principal page background */
  --paper-2: #EAEAEA;        /* Mist - secondary neutral surface */
  --surface: #FCFBF8;        /* white-leaning porcelain for cards */
  --filter-card: #FCFAF6;    /* filter panel cards, lifts off mist */
  --off-white: #FCFBF8;
  --line: #E3E0DA;
  --line-strong: #C9C5BC;

  /* Action colour. The engine calls it --green; for MLD it is Midnight
     Ink. Links, primary buttons, checkbox fills and selected states all
     flow from these two tokens. --green-deep doubles as the dark band
     ground (.section-green, .site-footer, .cta-band) so it stays the
     exact approved #0F2137; button hover darkens via a rule below. */
  --green: #0F2137;
  --green-deep: #0F2137;
  --green-wash: #E7EEF0;     /* lymphatic-blue wash for chips/active states */

  /* Champagne (the brass slots). Display value on light grounds, a
     brighter cut on midnight bands, and the text-safe deep tone for any
     small type. --brass-on-dark must move with --brass (main.css note). */
  --brass: #CEA25F;
  --brass-on-dark: #D9B57C;
  --brass-deep: #7E6134;
  --brass-soft: #E5D2AC;
  /* Rick, 1 Sep 2026. A muted sand for a full-width band that has to be
     clearly its own thing without becoming a second header. First use: the
     contents menu on a member profile, which sat on --surface, the same
     ground as the masthead directly above it, and so broke the standing
     rule that no two consecutive bands share a background. Greyer and
     quieter than --brass-soft, which is a decorative rule colour rather
     than a ground. Carries --ink at about 11:1. */
  --band-sand: #E3D8C9;

  /* Verified/checked family: steel blue (calm, clinical, lymphatic).
     Green success styling is banned, so "done" tones live here too. */
  --verified: #2F5A70;
  --verified-wash: #E4EDF1;
  --tone-success-border: #7FA3B5;
  --tone-success-ink: #24485C;
  --tone-verified-border: #6E93A6;
  --tone-verified-ink: #24485C;
  --tone-neutral-border: #5A6570;
  --tone-warn-ink: #7A5E30;
  --notice-border: #B4C6CE;

  /* Text on midnight grounds */
  --on-green: #F6F2ED;
  --on-green-soft: #C9CFD6;
  --on-green-mute: #97A2AC;
  --on-green-hairline: rgba(246, 242, 237, 0.16);
  --on-green-hairline-strong: rgba(246, 242, 237, 0.2);

  /* Header: Midnight Ink band, porcelain nav ink, champagne detail,
     champagne Apply CTA with midnight text (6.9:1). */
  --header-bg: #0F2137;
  --header-ink: #F6F2ED;
  --header-ink-soft: #C9CFD6;
  --header-accent: #D9B57C;
  --header-cta-bg: #CEA25F;
  --header-cta-ink: #0F2137;

  /* Details */
  --link-underline: rgba(206, 162, 95, 0.8);
  --btn-secondary-border: rgba(15, 33, 55, 0.5);
  --cta-ring: rgba(206, 162, 95, 0.38);
  --cta-ring-soft: rgba(206, 162, 95, 0.22);
  --cta-outline: rgba(246, 242, 237, 0.5);
  --cta-outline-wash: rgba(246, 242, 237, 0.1);
  --search-keyline: #AEC4CB;  /* lymphatic blue keyline on search fields */
  --filter-ink: #5F666D;
  --shadow-1: 0 1px 2px rgba(15, 33, 55, 0.07), 0 1px 8px rgba(15, 33, 55, 0.05);
  --shadow-2: 0 2px 8px rgba(15, 33, 55, 0.09), 0 12px 32px rgba(15, 33, 55, 0.08);
}

/* Body copy is Graphite; headings stay Midnight Ink. The engine gives both
   --ink, so the split is made here rather than by re-purposing the token. */
body { color: #30353A; }
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* Dark-band components whose greens are authored as literals in main.css. */
.notice-bar { background: #16324E; }
/* Graphite, not the navy band tone (Rick, 24 Aug 2026). */
.cookie-bar { background: #30353A; }
.sample-cta { background: #16324E; }

/* The gold band CTAs (Rick's 17 Aug pattern) move to champagne with
   midnight text (6.9:1; black read harsher against the new palette). */
.cta-band .btn-primary,
.cookie-bar .btn-primary,
.sample-cta .btn-primary { background: #CEA25F; color: #0F2137; }

/* =========================================================================
   24 Aug 2026: homepage Founding Membership section + pricing-page card
   treatment (Rick's redesign brief). MLD-only classes - the engine and
   WhatCounsellor never render them.
   ========================================================================= */

/* Hero accent word (Rick, 24 Aug 2026, replacing the earlier yellow
   marker): "postoperative" in the H1 carries this steel tone. */
.hero-accent-word { color: #48717e; }

/* Homepage founding section: centred intro, so the measure-capped
   paragraphs must centre as blocks, not just their text. */
.founding-invite .text-center { margin-left: auto; margin-right: auto; }
.founding-invite-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: var(--space-2);
}
/* The stat chips under the founding heading (24 Aug 2026): one quiet
   visual system in place of the old paragraph stack. */
.founding-invite-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-5) auto var(--space-2);
  max-width: 60rem;
}
.founding-invite-facts li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 0.75rem 1.2rem;
  font-size: 0.95rem;
  color: var(--ink-mute);
  text-align: center;
  flex: 1 1 12rem;
}
.founding-invite-facts li strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--ink);
}
.founding-invite .card { text-align: left; }
.founding-invite .card h3 { margin-top: var(--space-3); }
/* The engine's .card-icon is 3.25rem for the compact side-by-side cards;
   these step cards carry the icon as their visual, so it earns more room. */
.founding-invite .card-icon { width: 4.75rem; height: 4.75rem; }

/* Pricing cards. The founding card carries the champagne frame; the add-on
   and Newly Qualified cards a steel flag. Flags match the engine's
   .tier-flag chip so /pricing and /join read as one system. */
.tier-box-flag {
  display: inline-block;
  background: var(--brass-deep);
  color: var(--off-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-stamp);
  margin: 0 0 var(--space-3);
}
.tier-box-addon .tier-box-flag { background: var(--verified); }
/* The post-signup card step has one offer summary and one primary action. */
.offer-cards { align-items: stretch; }
.offer-card { display: flex; flex-direction: column; }
.offer-card .tier-box-head .offer-free { margin: 1rem 0 .35rem; color: #027797; font: 600 1.12rem var(--font-sans); }
.offer-card.tier-box-addon .offer-free { color: #7155bf; }
.page-pricing .offer-card .tier-box-price,
.page-join .offer-card .tier-box-price,
.page-for-therapists .offer-card .tier-box-price { margin: 0 0 1rem; font-family: var(--font-sans); line-height: 1.15; }
.offer-card .tier-box-price strong { font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 650; letter-spacing: -.04em; }
.offer-card .offer-then, .offer-card .offer-frequency { font-size: 1rem; font-weight: 400; letter-spacing: 0; }
.offer-card .tier-box-vat { display: inline; margin: 0; font-size: .85rem; }
.offer-card .offer-frequency { white-space: nowrap; }
.offer-card .tier-plus-lead { font-size: 1rem; line-height: 1.55; }
.offer-card .tier-features { font-size: .97rem; line-height: 1.6; }
.offer-card .offer-terms { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; font-size: .9rem; line-height: 1.65; }
.offer-card .offer-terms p { margin-bottom: 1rem; }
.offer-card .offer-terms p:last-child { margin-bottom: 0; }
.offer-card .offer-total { padding: .9rem 1rem; background: #f0edf8; border-radius: var(--radius-stamp); }
.offer-questions { max-width: 54rem; }
.offer-questions .faq-answer p:last-child { margin-bottom: 0; }
/* Compact MLD join choices: selections and totals stay outside disclosures. */
.page-join .offer-membership-selected { cursor: default; border-color: #CAD9DD; background: #f0f5f6; align-items: center; }
.offer-selection-tick { color: #027797; font-size: 1.35rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
.page-join .offer-essential { margin: 1rem 0; font-size: .9rem; line-height: 1.55; }
.page-join .offer-total { margin: 0 0 1rem; font-size: .9rem; line-height: 1.5; }
.offer-disclosure { border-top: 1px solid var(--line); }
.offer-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .75rem 0; list-style: none; cursor: pointer; font-size: .94rem; font-weight: 650; }
.offer-disclosure > summary::-webkit-details-marker { display: none; }
.offer-disclosure > summary::after { content: ''; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex-shrink: 0; margin-right: .2rem; }
.offer-disclosure[open] > summary::after { transform: rotate(225deg); }
.offer-disclosure > summary:focus-visible { outline: 2px solid #027797; outline-offset: 3px; border-radius: 2px; }
.offer-disclosure-body { padding: .15rem 0 .9rem; }
.offer-disclosure-body .tier-features { margin: 0; }
.offer-disclosure-body .offer-terms { border: 0; padding: 0; margin: 0; }
.page-join .join-selection-summary { display: flex; flex-direction: column; gap: .2rem; align-items: center; text-align: center; max-width: none; margin: 1.5rem 0 0; font-size: .94rem; line-height: 1.5; }
.page-join .join-selection-summary + .join-panel-actions { margin-top: .9rem; padding-bottom: 1.5rem; }
.page-join .join-offer-questions { margin-top: 0; }
@media (max-width: 799px) {
  .page-join .offer-card { padding: 1.1rem; }
  .page-join .offer-card .tier-box-name { font-size: 1.5rem; }
  .page-join .offer-card .tier-box-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; margin-bottom: .65rem; }
  .page-join .offer-card .tier-box-price strong { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .page-join .offer-card .offer-then, .page-join .offer-card .offer-frequency { font-size: .94rem; }
  .page-join .offer-card .tier-plus-lead { font-size: .94rem; line-height: 1.45; }
  .page-join .offer-card .offer-free { margin-top: .65rem; font-size: 1rem; }
  .page-join .offer-card .tier-billing { padding: .8rem; }
  .page-join .offer-card .tier-billing-note { font-size: .85rem; }
  .page-join .join-panel-actions-single { display: block; }
  .page-join .join-panel-actions-single .btn { width: 100%; }
}
.page-pricing p.text-center { margin-left: auto; margin-right: auto; }
/* Membership cards share ONE treatment across /join, /pricing and
   /for-therapists (Rick, 24 Aug 2026): steel-blue founding frame, soft-lilac
   Featured frame, ink prices, larger names, no lift. The :has() selector
   outranks the engine's radio:checked frame on /join, whose founding radio
   is pre-selected. */
.page-join .tier-box-founding,
.page-pricing .tier-box-founding,
.page-for-therapists .tier-box-founding,
.page-join .tier-box.tier-box-founding:has(input:checked) {
  border: 2px solid #CAD9DD;
  box-shadow: none;
}
.page-join .tier-box-founding .tier-box-flag,
.page-pricing .tier-box-founding .tier-box-flag,
.page-for-therapists .tier-box-founding .tier-box-flag { background: #CAD9DD; color: #027797; }
.page-join .tier-box-addon,
.page-pricing .tier-box-addon,
.page-for-therapists .tier-box-addon { border: 2px solid #D7D3E7; box-shadow: none; }
.page-join .tier-box-addon .tier-box-flag,
.page-pricing .tier-box-addon .tier-box-flag,
.page-for-therapists .tier-box-addon .tier-box-flag { background: #D7D3E7; color: #7a62db; }
.page-join .tier-box-name,
.page-pricing .tier-box-name,
.page-for-therapists .tier-box-name { font-size: 1.8rem; }
.page-join .tier-box-price,
.page-pricing .tier-box-price,
.page-for-therapists .tier-box-price { color: var(--ink); font-size: 1.7rem; font-weight: 500; margin: 0 0 var(--space-6); }
/* Featured reserve checkbox on /join: larger and aligned to its label. */
.page-join .tier-box-addon .tier-billing input[type="checkbox"] {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
}
/* Reusable lighter-green tick for feature checklists (Rick, 24 Aug 2026). */
.tickgreen li::before { border-left-color: #4FA46E; border-bottom-color: #4FA46E; }
/* Line up the head divider across the cards in a row: drop the trailing
   text's own bottom margin so the border sits at one height. */
.page-join .tier-box-head .tier-plus-lead,
.page-join .tier-box-head .tier-box-sub,
.page-pricing .tier-box-head .tier-plus-lead,
.page-pricing .tier-box-head .tier-box-sub,
.page-for-therapists .tier-box-head .tier-plus-lead,
.page-for-therapists .tier-box-head .tier-box-sub { margin-bottom: 0; }
/* Footer section headings in the champagne accent (Rick, 24 Aug 2026). */
.footer-heading { color: #CEA25F; }
.page-pricing .tier-box-head,
.page-join .tier-box-head,
.page-for-therapists .tier-box-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-4);
}
/* Air between each Reserve button and the small print under it. */
.page-pricing .tier-box > .btn-block,
.page-for-therapists .tier-box > .btn-block { margin-bottom: var(--space-4); }
/* Bottom-align the For Therapists pair too (no rate boxes there). */
.page-for-therapists .join-two-boxes:not(:has(.tier-billing)) .tier-box {
  display: flex;
  flex-direction: column;
}
.page-for-therapists .join-two-boxes:not(:has(.tier-billing)) .tier-box .tier-features {
  flex-grow: 1;
}

/* Bottom-align the card actions: the feature list absorbs the slack, so
   the small print under both Reserve buttons lines up. Scoped exactly like
   the engine's stretch rule, so a card with rate boxes is never touched. */
.page-pricing .join-two-boxes:not(:has(.tier-billing)) .tier-box {
  display: flex;
  flex-direction: column;
}
.page-pricing .join-two-boxes:not(:has(.tier-billing)) .tier-box .tier-features {
  flex-grow: 1;
}

/* About page (Rick, 24 Aug 2026): a wider gulf between the founder story
   and his photograph, and the signature sits under the picture. The plain
   space-8 rule is here so the intent is visible in DevTools; the 960px
   rule widens it further on desktop, where the two columns sit side by
   side. */
/* .page-about is part of the selector on purpose: main.css carries
   ".page-about .grid-2 { gap: var(--space-5) }" (18 Aug, for the governance
   cards), which outweighs any single-class rule - it is why the founder
   gap stayed 24px however the grid itself was styled. */
@media (min-width: 640px) {
  .page-about .about-founder-grid { gap: var(--space-8); }
}
@media (min-width: 960px) {
  .page-about .about-founder-grid { column-gap: 8rem; }
}
.cta-band .btn-primary:hover,
.cookie-bar .btn-primary:hover,
.sample-cta .btn-primary:hover { background: color-mix(in oklab, #CEA25F, #000 12%); color: #0F2137; }

/* Primary CTA hover: slightly darker midnight (the token pair is pinned to
   the exact band colour above, so the hover shade lives here). */
.btn-primary:hover { background: #0A1828; }

/* Link hover carries the champagne accent (text-safe tone). */
a:hover { color: var(--brass-deep); }

/* Warm shell band takes the one quiet Soft Lilac tint. */
.section-shell { background: #EDEAF2; }

/* Interior page headers and the for-therapists hero sit on porcelain. */
.page-for-therapists .hero { background: var(--paper); }

/* =========================================================================
   25 Aug 2026: Rick's revision round. The notice bar's own text tone, the
   brass pill used on every light ground, and the homepage "Our approach"
   band. MLD-only file - the engine and WhatCounsellor never see it.
   ========================================================================= */

/* Notice bar text (Rick, 25 Aug 2026). 5.8:1 on the #16324E band. */
.notice-bar p { color: #8db0d3; }

/* THE PILL TONE. One value for every pill on a light ground (Rick's
   #ac7826, 25 Aug 2026). A "pill" here is the small uppercase label that
   sits above a heading. .brass-pill carries the colour, and the three
   existing eyebrow classes are pointed at the same value so no pill can
   drift. Contrast on porcelain is 3.5:1 - large-text grade, under the
   4.5:1 small-text minimum. Rick's call, made with the number in front of
   him; recorded here so nobody "corrects" it silently later. */
.brass-pill,
.hero-eyebrow,
.welcome-eyebrow,
.founding-invite-eyebrow { color: #ac7826; }

.brass-pill {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  max-width: none;
  margin-bottom: var(--space-3);
}

/* "The standard behind every listing" band (Rick, 25 Aug 2026): porcelain
   ground, roomier block padding, pill and heading centred. Scoped to the
   homepage because /for-therapists renders its own .trust-strip and must
   not inherit this treatment. */
.page-home .trust-strip {
  background: #F6F2ED;
  padding-block: var(--space-8);
}
.page-home .trust-strip-pill,
.page-home .trust-strip-title-center { text-align: center; }

/* The closing note is measure-capped, so centring its TEXT leaves the block
   itself sitting in the left column (same trap as .founding-invite above).
   It has to centre as a block too. */
.page-home .trust-strip .text-center { margin-inline: auto; }

/* Routing-band cards (Rick, 26 Aug 2026): the engine tops each
   .editorial-item with a 2px var(--green) rule, which under this theme
   resolves to Midnight Ink and reads as a harsh dark line above the
   watercolour artwork. Rick's chosen tone for it is #dbc59d, a soft sand
   between porcelain and champagne. Theme-scoped, so no other brand moves. */
.editorial-item { border-top-color: #dbc59d; }

/* Dashboard fieldset border, Rick's exact colour, 2 Sep 2026. Brand-scoped so
   the engine default (var(--line)) still serves every other brand. */
.dash-fieldset { border-color: #d3d0c9; }

/* Location suggestions (join step 1 and the homepage hero) share the form's typography and navy focus colour. */
.location-input-wrap { position: relative; }
/* The hero (home.php) wraps its location input the same way. The wrap takes the input's flex slot in .search-box-row (main.css) and lets the input's own flex rule fill it, so the row and its wrap point are unchanged. */
.search-box-row .location-input-wrap { flex: 1 1 14rem; min-width: 0; display: flex; }
.location-suggestions { position: absolute; inset: calc(100% + .25rem) 0 auto; z-index: 12; list-style: none; margin: 0; padding: .25rem; max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: .4rem; box-shadow: 0 .5rem 1.5rem #0f21371a; }
.location-suggestions[hidden] { display: none; }
.location-suggestions [role="option"] { min-height: 44px; padding: .55rem .75rem; margin: 0; cursor: pointer; border-radius: .25rem; line-height: 1.4; overflow-wrap: anywhere; }
.location-suggestion-name, .location-suggestion-area { display: block; }
.location-suggestion-name { font-weight: 600; color: var(--ink); }
.location-suggestion-area { font-size: .85rem; color: var(--ink-soft); }
.location-suggestions [role="option"]:hover, .location-suggestions [aria-selected="true"] { background: var(--ink); }
.location-suggestions [role="option"]:hover span, .location-suggestions [aria-selected="true"] span { color: #fff; }
.location-status:empty { margin: 0; }
@media (max-width: 650px) { .location-suggestions { max-height: min(17rem, 40svh); } }
/* Review findings on the live hero list, 18 Sep 2026.
   1. A chosen place can be longer than the hero box ("Guildford, Sir Benfro - Pembrokeshire (SA62)"). Once the box loses focus the end shows as an ellipsis instead of being clipped; while it has focus the browser scrolls the text as it always did.
   2. The cookie bar is fixed at z-index 60 in the root context and .hero-bleed is an isolated stacking context at z-index auto (main.css), so no z-index on the list alone can lift it above the bar. While the list is open the hero itself sits one above the bar, still far below the sticky header at 600; the moment the list closes the hero drops back and the bar is exactly as before. */
.search-box-row input[type="search"] { text-overflow: ellipsis; }
.hero-bleed:has(.location-suggestions:not([hidden])) { z-index: 61; }
/* Featured chip in purple (Rick, 21 Sep 2026: "so it stands out"). Built
   from the brand's Soft Lilac #D7D3E7 wash with a deep purple ink at 5.2:1
   on it, so the chip is unmistakably different from the champagne Founding
   chip beside it. Engine default (main.css) shares the founding brass. */
:root { --featured: #5B4A8E; --featured-wash: #D7D3E7; --tone-featured-border: #8C7FBF; }
.chip-featured { background: var(--featured-wash); border-color: var(--tone-featured-border); color: var(--featured); }