/* sprint 30 — the CLC Finder's own layout.
 *
 * Colours, fonts and spacing all come from the shared design system in assets/, which is the clinic's
 * theme mounted read-only. Nothing here redefines a palette value; it only arranges things the palette
 * already paints. If a colour looks wrong, it is wrong in BRAND.md and should be fixed there once. */

/* mv-section already carries the vertical rhythm; this only needs the side gutter, or the
   grid ends up marooned a screen below the hero. */
.clc-finder { padding: clamp(1.5rem, 4vw, 2.5rem) var(--mv-gutter, 1.5rem); }
.clc-finder-inner { max-width: 1080px; margin: 0 auto; }

/* the question above the grid — optional, and it has to look optional */
.clc-ask { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.clc-ask-label {
  display: block; font-family: var(--mv-display); font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: var(--mv-ink); margin-bottom: .75rem;
}
.clc-ask-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: stretch; }
.clc-ask-input {
  flex: 1 1 12rem; min-width: 0; padding: .85rem 1rem; font-size: 1.05rem; font-family: inherit;
  color: var(--mv-ink); background: var(--mv-paper); border: 2px solid var(--mv-muted);
  border-radius: .5rem; letter-spacing: .04em;
}
.clc-ask-input:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 2px; border-color: var(--mv-brand); }
.clc-ask-go {
  flex: 0 0 auto; padding: .85rem 1.4rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--mv-paper); background: var(--mv-deep); border: 2px solid var(--mv-deep); border-radius: .5rem;
}
.clc-ask-go:hover { background: var(--mv-brand); border-color: var(--mv-brand); }
.clc-ask-go:focus-visible { outline: 3px solid var(--mv-gold); outline-offset: 2px; }
.clc-ask-note { margin: .75rem 0 0; font-size: .9rem; color: var(--mv-muted); max-width: 46ch; }
.clc-ask-oops:empty { display: none; }
.clc-ask-oops { margin: .6rem 0 0; font-size: .95rem; color: var(--mv-brand); font-weight: 600; }

.clc-said {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: baseline;
  margin: 0 0 1.5rem; font-size: 1rem; color: var(--mv-ink);
}
.clc-again {
  font: inherit; font-size: .95rem; cursor: pointer; color: var(--mv-brand); background: none;
  border: 0; border-bottom: 2px solid currentColor; padding: 0;
}
.clc-again:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 3px; }

/* a band is "near you" or "by video". Two bands, never mixed — a video-only consultant is equally
   close to everybody and sorting them by distance would be a lie in one direction or the other. */
.clc-band { margin: 0 0 clamp(2.5rem, 6vw, 3.5rem); }
.clc-band-title {
  font-family: var(--mv-display); font-size: clamp(1.4rem, 3.5vw, 1.9rem); color: var(--mv-deep);
  margin: 0 0 .4rem;
}
.clc-band-note { margin: 0 0 1.5rem; font-size: .95rem; color: var(--mv-muted); max-width: 62ch; }

/* 7 October 2026 — rows, not cards. Amanda: "The cards are lovely but way too big. I'm hoping we
   will have hundreds in this list! Please give them a tighter look with their Photo, Name, and
   Clinic location, they can click to expand to see their bio and contact info."

   A grid of cards is a browsing shape and it stops working somewhere around thirty people: at two
   hundred it is a wall, and the thing a family is doing is scanning a list for a place name. So one
   row each, three facts, and everything else behind a press. The rows share edges rather than each
   carrying a border, which is what lets a hundred of them read as one list. */
.clc-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--mv-muted); }
.clc-row { border-bottom: 1px solid var(--mv-muted); }

.clc-row-head {
  display: flex; gap: .9rem; align-items: center; width: 100%;
  padding: .7rem .5rem; margin: 0; border: 0; background: none; text-align: left;
  font: inherit; color: var(--mv-ink); cursor: pointer;
}
.clc-row-head:hover { background: var(--mv-cream); }
.clc-row-head:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: -3px; }

/* initials, not a broken image. Somebody will always have no photograph. */
.clc-row-face {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mv-display); font-size: 1rem; letter-spacing: .02em;
  color: var(--mv-paper); background: var(--mv-deep);
  background-size: cover; background-position: center top;
}
.clc-row-face.has-photo { color: transparent; }

.clc-row-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; min-width: 0; flex: 1 1 auto; }
.clc-row-name { font-family: var(--mv-display); font-size: 1.1rem; line-height: 1.25; color: var(--mv-deep); }
.clc-row-cred { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mv-muted); }
/* the location gets the whole second line, because it is the thing being scanned for */
.clc-row-where { flex: 1 0 100%; font-size: .9rem; line-height: 1.35; color: var(--mv-ink); }

/* 7 October 2026 — how far, beside the name. Said as "~12 km" because it is measured to the middle
   of the area she covers rather than to a door, and the tilde is the cheapest way to say so on a
   row that has no space for a sentence. Tabular figures so a column of them lines up. */
.clc-row-km {
  flex: 0 0 auto; margin-left: auto; padding-left: .6rem;
  font-size: .85rem; color: var(--mv-muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}

.clc-row-chev {
  flex: 0 0 auto; width: .6rem; height: .6rem; margin-right: .35rem;
  border-right: 2px solid var(--mv-brand); border-bottom: 2px solid var(--mv-brand);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.clc-row.is-open .clc-row-chev { transform: rotate(-135deg) translate(-2px, -2px); }

/* the panel is hidden with the hidden attribute the script writes, never by a rule of its own: a
   missing script then leaves every panel open, which is a long page rather than an unusable one. */
.clc-row-panel { padding: 0 .5rem 1.1rem 4rem; }
.clc-row-place { margin: 0 0 .25rem; font-size: .95rem; line-height: 1.45; }
/* 8 October 2026 — out of the fold and onto the row's own line, beside where she is. Quieter than
   the place, because where she is comes first for most families and which languages comes first for
   the few who need it; both have to be readable at a glance. */
.clc-row-langs {
  flex: 1 0 100%; margin: .15rem 0 0;
  font-size: .86rem; line-height: 1.35; color: var(--mv-muted);
}
.clc-row-blurb {
  margin: .7rem 0 0; padding-left: .9rem; border-left: 3px solid var(--mv-gold);
  font-size: .95rem; line-height: 1.55;
}
/* 8 October 2026 — its own line. Amanda: "read her own words is crowding see her page. make them
   seperate." Both were inline-block, so on a row carrying both they ran together with no space
   between them and read as one sentence: "Read her own wordsSee her page and book". width:fit-content
   keeps the hover underline hugging the words rather than running the width of the row. */
.clc-row-go {
  display: block; width: fit-content; margin-top: .9rem; font-size: .95rem; font-weight: 600;
  color: var(--mv-brand); text-decoration: none;
}
.clc-row-go:hover { text-decoration: underline; }
.clc-row-go:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 3px; }

@media (max-width: 30rem) {
  .clc-row-panel { padding-left: 1rem; }
}

/* the most likely screen for the first year, so it is designed rather than left blank */
.clc-empty {
  padding: clamp(1.5rem, 4vw, 2.25rem); border: 2px dashed var(--mv-muted); border-radius: .75rem;
  background: var(--mv-cream); margin: 0 0 1.5rem;
}
.clc-empty-title { margin: 0 0 .6rem; font-family: var(--mv-display); font-size: 1.35rem; color: var(--mv-deep); }
.clc-empty-note { margin: 0; max-width: 62ch; line-height: 1.55; }
.clc-empty-out { margin: 0 0 2rem; font-size: .98rem; }
.clc-empty-out p { margin: 0 0 .4rem; max-width: 62ch; }
.clc-empty-link { color: var(--mv-brand); font-weight: 600; }

.clc-loading { color: var(--mv-muted); font-style: italic; }

/* the profile page.
   The biography is quoted because the consultant wrote it, and a quotation that is not visibly a
   quotation just reads as though the organisation wrote it about them. */
.mv-clc-blurb {
  margin: 0 0 2.5rem; padding: 0 0 0 1.5rem; border-left: 3px solid var(--mv-gold);
  max-width: 60ch;
}
.mv-clc-blurb p {
  margin: 0; font-family: var(--mv-display); font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.5; color: var(--mv-deep);
}
.mv-clc-about .mv-ref-steps { margin: 0; }
.mv-clc-about .mv-ref-steps li { margin-bottom: .5rem; }

/* sprint 30 — the profile's booking buttons use the design system's own dark-band classes
   (mv-cta / mv-cta-ghost) rather than colours of their own. The first version painted a deep green
   ghost button on a deep green band, which is invisible. Only the layout is ours now. */
.clc-book { margin: 1.5rem 0 0; }
.clc-book-note { margin: 1rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .78); max-width: 54ch; }

/* the draft banner. This property is pretending it can already grant what it describes, and a reader
   must never have to guess that. Loud on purpose, and it comes off with the sample data. */
.clc-draft {
  padding: .85rem var(--mv-gutter, 1.5rem); text-align: center; font-size: .92rem; line-height: 1.5;
  color: var(--mv-dark); background: var(--mv-gold-pale); border-bottom: 2px solid var(--mv-gold-deep);
}
.clc-draft strong { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .clc-card { transition: none; }
  .clc-card:hover { transform: none; }
}

/* sprint 30 - the links out, decided 19 August 2026. Shown under every result rather than only the
   empty ones: this register holds our members and is not every IBCLC in Ontario, and a list that says
   so is the only kind worth trusting the rest of. Quiet by default, and lifted when there is nothing
   else on the screen. */
.clc-elsewhere {
  margin: 2rem 0 0; padding: 1.25rem 1.5rem; border-top: 1px solid var(--mv-muted);
}
.clc-elsewhere.is-empty {
  margin-top: 0; border: 2px solid var(--mv-muted); border-radius: .75rem; background: var(--mv-paper);
}
.clc-elsewhere-lede { margin: 0 0 1rem; font-size: .98rem; color: var(--mv-ink); max-width: 62ch; }
.clc-elsewhere-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.clc-elsewhere-item { display: flex; flex-direction: column; gap: .15rem; }
.clc-elsewhere-link { color: var(--mv-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.clc-elsewhere-link:hover { color: var(--mv-deep); }
.clc-elsewhere-link:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 3px; }
.clc-elsewhere-note { font-size: .9rem; color: var(--mv-muted); }

/* sprint 30 - unclaimed listings, decided 19 August 2026.
 *
 * These were built by us from public directories. Nobody has confirmed them and we have not checked
 * anybody's certification, so they must not look like the verified ones. The distinction is carried by
 * the chrome and by a label, never by making the words harder to read: this project has now shipped two
 * contrast bugs and a "greyed out" state is the obvious way to ship a third. Text stays at full
 * strength; the frame is what recedes.
 *
 * Which I then got wrong on the first attempt: --mv-muted is #758287, and on cream that is 3.47:1,
 * under the 4.5 small text needs. --clc-quiet is the same idea two steps darker. It reads as muted
 * beside ink and it clears 5:1 on both grounds this state uses. */
.clc-band.is-grey, .clc-card.is-unclaimed { --clc-quiet: #5c686e; }
.clc-band.is-grey { padding-top: .5rem; border-top: 1px dashed var(--mv-muted); }
.clc-band.is-grey .clc-band-title { color: var(--clc-quiet); }
.clc-band.is-grey .clc-band-note { max-width: 68ch; }

.clc-card.is-unclaimed {
  background: var(--mv-cream);
  border-style: dashed;
}
.clc-card.is-unclaimed:hover { border-color: var(--mv-muted); }
/* initials on a muted ground rather than the deep green a verified consultant gets */
.clc-card.is-unclaimed .clc-card-face { background: var(--clc-quiet); }
.clc-card.is-unclaimed .clc-card-name { color: var(--mv-ink); }
.clc-card.is-unclaimed .clc-card-more { color: var(--clc-quiet); font-weight: 600; }
.clc-card.is-unclaimed .clc-card-more::before { content: "○ "; }

/* on the profile itself */
.mv-clc-unclaimed {
  padding: 1.1rem 1.4rem; margin: 0 0 1.5rem; border: 2px dashed var(--mv-muted);
  border-radius: .75rem; background: var(--mv-cream); color: var(--mv-ink);
}
.mv-clc-unclaimed p { margin: 0 0 .6rem; max-width: 62ch; line-height: 1.55; }
.mv-clc-unclaimed p:last-child { margin-bottom: 0; }

/* sprint 30 - the copy-and-search pair on an unclaimed profile. The copy button is built by
   clc-claim.js and carries the same classes as a wp:button, so it inherits the design system's own
   dark-band treatment rather than needing colours of its own. Only the layout is here. */
.clc-verify-row { margin-top: 1.25rem; }
.clc-verify-copy .wp-element-button { cursor: pointer; font: inherit; }
.clc-verify-copy.is-copied .wp-element-button::after { content: " ✓"; }
.clc-verify-note { margin: .85rem 0 0; font-size: .88rem; color: rgba(255, 255, 255, .78); max-width: 54ch; }
.clc-verify-said:empty { display: none; }
.clc-verify-said {
  display: block; margin: .75rem 0 0; font-size: .92rem; font-weight: 600;
  color: var(--mv-gold, #e9c471);
}

/* sprint 30 - the internal stats page. Big numbers, because the point of it is to be read across a
   kitchen table at breakfast, and a table of percentages is not that. */
.clc-stat-grid {
  display: grid; gap: 1rem; margin: 1.75rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.clc-stat {
  padding: 1.5rem 1.25rem; border-radius: .75rem; background: var(--mv-paper);
  border: 1px solid var(--mv-muted);
}
.clc-stat-n {
  margin: 0; font-family: var(--mv-display); font-size: clamp(2.4rem, 7vw, 3.4rem); line-height: 1;
  color: var(--mv-deep);
}
.clc-stat-l { margin: .5rem 0 0; font-size: 1rem; line-height: 1.35; color: var(--mv-ink); }
.clc-stat-note { margin: .4rem 0 0; font-size: .86rem; color: #5c686e; }

.clc-table { margin: 1.5rem 0 1.25rem; overflow-x: auto; }
.clc-table table { width: 100%; border-collapse: collapse; }
.clc-table th, .clc-table td {
  padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--mv-muted);
}
.clc-table th {
  font-family: var(--mv-display); font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  color: #5c686e;
}
.clc-table td:last-child, .clc-table th:last-child { text-align: right; white-space: nowrap; }
.clc-table tr:last-child td { border-bottom: 0; }

/* the distance control. It sits above the list rather than beside the postal box, because it is
   about the answer rather than about the question. */
.clc-reach { margin: 0 0 1.4rem; }
.clc-reach-label { display: block; font-size: .95rem; font-weight: 600; color: var(--mv-deep); }
.clc-reach-input { display: block; width: 100%; max-width: 26rem; margin: .5rem 0 .3rem; }
.clc-reach-input:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 4px; }
.clc-reach-said { margin: 0; font-size: .9rem; color: var(--mv-muted); }

/* 7 October 2026 — shown when the nearest consultant is more than 100 km away, or when nobody has
   said they work near this family at all. It points at the page's own last section rather than
   repeating it: one place says what to do, and this is a route to it. */
.clc-far {
  margin: 1.6rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--mv-gold);
  background: var(--mv-paper);
  font-size: .98rem;
  line-height: 1.55;
}
.clc-far-go { color: var(--mv-brand); font-weight: 600; text-underline-offset: 3px; }
.clc-far-go:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 3px; }

/* the register sits on ivory now, so the rows need their own ground to read against */
.clc-finder .clc-rows { background: var(--mv-paper); border-radius: .4rem; }
.clc-finder .clc-row-head:hover { background: var(--mv-cream); }

/* 7 October 2026 — her own words, a fold inside the fold. The control reads as a control rather
   than as a heading, because the row's own head is already a heading-sized press and two of those
   stacked would be ambiguous. */
.clc-row-words-go {
  display: block; width: fit-content; margin: .9rem 0 0; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--mv-brand); text-decoration: underline; text-underline-offset: 3px;
}
.clc-row-words-go:focus-visible { outline: 3px solid var(--mv-brand); outline-offset: 3px; }

/* quoted because she wrote it. A quotation that is not visibly a quotation reads as though the
   organisation wrote it about her. */
.clc-row-words {
  margin: .7rem 0 0; padding: 0 0 0 1rem;
  border-left: 3px solid var(--mv-gold);
  font-size: .95rem; line-height: 1.6;
}
.clc-row-words p { margin: 0 0 .7rem; }
.clc-row-words p:last-child { margin-bottom: 0; }