/* Listing as a decision page (CTO plan Part 0): the four actions, the one
   calm line for missing basics, official records, Ofsted quotes, "around",
   the share menu and the report dialog. Loaded after nursery.css. Missing
   data is always neutral grey: never red, never a warning icon. */
@layer pages {
/* ---- top picture: the static map when the nursery has no photo ---- */
.g-mapcover { height: 200px; }
.g-mapcover .map { height: 100%; aspect-ratio: auto; }
@media (min-width: 768px) { .g-mapcover { height: 280px; } }

/* ---- first screen ---- */
.np-home .i { color: var(--muted-foreground); }
.np-home button { min-height: 32px; padding: 0 var(--sp-1); border: 0; background: none; color: var(--primary); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.np-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); }
.np-acts > .btn, .share > summary { justify-content: center; min-height: 44px; width: 100%; }
.np-acts .i { flex: none; }
.np-claim { margin-top: var(--sp-3); }
@media (min-width: 640px) {
  .np-acts { display: flex; flex-wrap: wrap; }
  .np-acts > .btn, .share > summary { width: auto; }
}
.np-acts[data-where="next"] { margin-top: var(--sp-6); }
.np-acts .np-cmp { grid-column: 1 / -1; justify-self: start; width: auto; min-height: 44px; padding-inline: var(--sp-1); }

/* ---- 1. is it good ---- */
.ni-word { margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; font-weight: 600; color: var(--muted-foreground); }
.oq { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.oq h3 { margin: 0 0 var(--sp-2); font-size: var(--text-base); }
.oq blockquote { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); border-left: 3px solid var(--border); max-width: var(--measure); }
.oq-src a { color: var(--primary); font-weight: 600; }
@media (min-width: 768px) { .oq { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-8); } .oq-src { grid-column: 1 / -1; } }
.orp { display: grid; gap: var(--sp-2); justify-items: start; margin-top: var(--sp-6); max-width: var(--measure); }
.orp-new { margin: 0; }
.orp-nojs a, .orp-status a { color: var(--primary); font-weight: 600; }
.orp-status:empty, .orp-widget:empty { display: none; }
.sec h3.or-h { margin-top: var(--sp-8); }
.offrec { max-width: 44rem; border-top: 1px solid var(--border); }
.offrec li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-0_5, 2px) var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.or-l { font-size: var(--text-sm); color: var(--muted-foreground); }
.or-v { font-weight: 600; }
.or-d { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--muted-foreground); }
.or-s { font-size: var(--text-xs); color: var(--subtle-foreground); }
.or-s a { color: inherit; }
@media (min-width: 640px) { .offrec li { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; } .or-s { text-align: right; } }

/* ---- 2. fees ---- */
.fees .amt { display: inline-block; text-align: right; }
.fees .hr { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); }
.fee-line { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-weight: 500; }
.fee-line .i { flex: none; color: var(--muted-foreground); }
.fee-line a, a.fee-line { color: var(--primary); font-weight: 600; text-underline-offset: 3px; }
.area-fb { max-width: var(--measure); margin-top: var(--sp-4); color: var(--muted-foreground); }
.area-fb a { color: inherit; }
.area-fb b { color: var(--foreground); font-variant-numeric: tabular-nums; }
.mini-calc { margin-top: var(--sp-4); }

/* ---- missing basics: one calm line, one ask (F2 rule 3) ---- */
.gap { display: grid; gap: var(--sp-3); max-width: 40rem; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); background: var(--sunken); }
.sec .gap + * { margin-top: var(--sp-4); }
.gap-line { display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--muted-foreground); }
.gap-line .i { flex: none; color: var(--subtle-foreground); }
.gap-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.gap-acts form { display: contents; }
.gap-acts form[hidden] { display: none; }
.gap-done { font-size: var(--text-sm); color: var(--muted-foreground); }
.nd-line { color: var(--muted-foreground); }
.sec .nd-line:not(:first-child) { margin-top: var(--sp-4); }
.hl-more { margin-top: var(--sp-4); }
.hl-more:first-child, .hours-list + .hl-more { margin-top: 0; }
.hours-list + .hl-more, .week + .hl-more { border-top: 0; }
.week + .hl-more { margin-top: var(--sp-4); border-top: 1px solid var(--border); }

/* ---- 4. getting there ---- */
.go { display: grid; gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-5); }
.go > .btn { justify-self: start; }
.home-pc { display: grid; gap: var(--sp-2); max-width: 26rem; }
.home-pc label { font-weight: 600; }
.home-out:empty { display: none; }
.home-out button { margin-left: var(--sp-2); padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .go { grid-template-columns: auto minmax(0, 26rem); align-items: end; gap: var(--sp-8); } }
.around { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.around h3 { margin-top: var(--sp-4); }
.around-p { color: var(--muted-foreground); }
.sf { display: inline-block; margin-left: var(--sp-2); padding: 0 var(--sp-2); border-radius: var(--radius-full); background: var(--muted); font-size: var(--text-xs); font-weight: 600; color: var(--muted-foreground); }
.sf:not(.no) { background: var(--ok-soft); color: var(--ok-ink); }

/* ---- 5. places ---- */
.places-ctx { max-width: var(--measure); margin-top: var(--sp-4); }
.places-ctx .muted { display: block; margin-top: var(--sp-1); font-size: var(--text-sm); }

/* ---- about ---- */
.sec h3.day-h { margin-top: var(--sp-10); }
.day-item h4 { margin: 0 0 var(--sp-2); font-size: var(--text-base); }
.lic { margin-top: var(--sp-3); }

/* ---- report a mistake ---- */
.rpt { margin-top: var(--sp-6); font-size: var(--text-sm); }
.rpt a { color: var(--subtle-foreground); text-underline-offset: 3px; }
.rpt a:hover { color: var(--primary); }
.rdlg { width: 100%; max-width: 100%; max-height: calc(100dvh - var(--sp-8)); margin: auto 0 0; padding: var(--sp-6) max(var(--gutter), var(--sp-5)) calc(var(--sp-6) + env(safe-area-inset-bottom));
  border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--card); color: var(--foreground); box-shadow: var(--shadow-lg); overflow-y: auto; }
.rdlg::backdrop { background: rgb(15 14 26 / .5); }
.rdlg form, .rdlg-done { display: grid; gap: var(--sp-4); }
.rdlg h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); outline: none; }
.rdlg textarea { min-height: 7rem; }
.rdlg-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rp-err:empty { display: none; }
.rp-err { font-size: var(--text-sm); color: var(--bad-ink); }
@media (min-width: 640px) { .rdlg { width: min(32rem, calc(100% - 2 * var(--gutter))); margin: auto; padding: var(--sp-8); border-radius: var(--radius-xl); } }
html:has(.rdlg[open]) { overflow: hidden; }

/* ---- side card and phone bar without fees ---- */
.book-none { font-size: var(--text-xl); font-weight: 600; color: var(--muted-foreground); }
.cta-price b.cta-none { font-family: var(--font-sans); font-size: var(--text-base); color: var(--muted-foreground); }
}