/* =====================================================================
   Postpartum+ design layer
   Loaded after calm.css. Every rule here adds to or overrides the layers
   before it; none of them edit those files, so the work on calm.css can
   carry on without colliding with this one. Checked on a 390px iPhone, a 360px Android, a 320px iPhone SE and
   a computer; tests in tools/flows-design.mjs.
   ===================================================================== */

/* ---------- D1. The crisis line: one line on a phone ------------------ */
/* The short wording under 480px, the full sentence everywhere else. Still
   the first thing on every page. */
.crisis-bar .cb-short {
  display: none;
}
@media (max-width: 480px) {
  .crisis-bar .cb-full {
    display: none;
  }
  .crisis-bar .cb-short {
    display: inline;
  }
  .crisis-bar .container {
    min-height: 34px;
    padding: 4px 0;
    font-size: 0.8rem;
    font-weight: 500;
  }
  .crisis-bar a {
    padding: 3px 10px;
    margin-left: 4px;
    font-size: 0.78rem;
  }
}
/* With 911 beside Call and Text 988, a narrower phone keeps it to one
   line with "Crisis?": the three buttons say the rest. */
@media (max-width: 380px) {
  .crisis-bar .cb-more {
    display: none;
  }
}

/* ---------- D2. Phones: less scrolling for the same things ------------ */
/* Nothing is removed: the same content sits closer together, rows that
   were one per line share a line, and a few long stacks swipe sideways the
   way the circles already do. */
@media (max-width: 700px) {
  /* Page tops: a heading and a line, then the page. */
  /* Guides, a guide and the moms, dads & partners and family guide pages
     keep their original look (2.14.4), here and below. */
  .page-hero:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    padding: 22px 0 6px;
  }
  .page-hero h1:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    font-size: clamp(1.95rem, 8.2vw, 2.4rem);
    margin-bottom: 0.3em;
  }
  .page-hero .lead:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    font-size: 1rem;
    line-height: 1.55;
  }
  .page-hero + .section.tight:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)),
  .page-hero + .container.section.tight:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    padding-top: 18px;
  }
  .eyebrow:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    font-size: 0.72rem;
    margin-bottom: 8px;
  }

  /* Home: "I'm here as" is one swipeable row, not two lines of pills. The
     hero column may not grow to fit the row: it scrolls instead. */
  .hero > * {
    min-width: 0;
  }
  .role-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 4px;
    scrollbar-width: none;
  }
  .role-strip::-webkit-scrollbar {
    display: none;
  }
  .role-strip > * {
    flex: none;
  }

  /* The three "for each of you" cards swipe sideways, one and a bit at a
     time, like the circles. */
  .family-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 14px;
    gap: 12px;
    scrollbar-width: none;
  }
  .family-grid::-webkit-scrollbar {
    display: none;
  }
  .family-grid > .family-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* Every part of postpartum: two to a row. */
  .areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .area {
    min-height: 52px;
    padding: 10px 12px;
    gap: 8px;
    font-size: 0.92rem;
    line-height: 1.25;
  }
  .area .icon {
    width: 24px;
    font-size: 1.15rem;
    flex: none;
  }

  /* The village, how it works: three short rows, not three tall cards. */
  #villageArea h2.sr-only + .card-grid.cols-3 {
    gap: 8px;
  }
  #villageArea h2.sr-only + .card-grid.cols-3 > .card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 14px 16px;
  }
  #villageArea h2.sr-only + .card-grid.cols-3 .icon-badge {
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 1rem;
    margin: 0;
  }
  #villageArea h2.sr-only + .card-grid.cols-3 h3 {
    font-size: 1.05rem;
    margin: 0 0 2px;
  }

  /* Navigator: city and state share a line. */
  #navForm .form-row:has(#navCity) {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 10px;
  }

  /* The footer's links in two columns. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px 16px;
  }
  .footer-grid > div:first-child,
  .footer-grid > div:nth-child(4) {
    grid-column: 1 / -1;
  }
  .footer-grid > div:nth-child(4) ul {
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  /* Community's four tabs (Discussions, Circles, Events, People) share the
     width; at their desktop padding "People" was cut off at the edge. */
  #communityArea > .tabs[role="tablist"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    width: 100%;
  }
  #communityArea > .tabs[role="tablist"] .tab {
    padding-inline: 8px;
    text-align: center;
  }
}
@media (max-width: 700px) {
  /* Discussions: the three sorts (Trending, New, Needs an answer) share
     the width on their own line, and "whose posts" sits under them; side
     by side, the sorts were cut off after "Trending". */
  .feed-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .feed-toolbar > .tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    width: 100%;
  }
  .feed-toolbar > .tabs .tab {
    padding-inline: 8px;
    text-align: center;
  }
  .feed-toolbar select {
    width: 100%;
  }
}
@media (max-width: 359px) {
  .feed-toolbar > .tabs .tab {
    padding-inline: 4px;
    font-size: 0.8rem;
  }
  #communityArea > .tabs[role="tablist"] .tab {
    padding-inline: 4px;
    font-size: 0.8rem;
  }
}

/* ---------- D3. Posts and events: one glance each on a phone ---------- */
@media (max-width: 700px) {
  /* Posts: the helpful votes share the row with replies, save and report
     (it had a row of its own under them). Fits a 360px Android. */
  .post {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 4px;
    row-gap: 0;
  }
  .post > div:not(.vote) {
    display: contents;
  }
  .post .post-meta,
  .post h3,
  .post .excerpt,
  .post .moretext {
    grid-column: 1 / -1;
  }
  .post .vote {
    grid-row: auto;
    order: 10;
    grid-column: 1;
    align-self: start;
    margin: 2px 0 0;
    padding: 2px;
    gap: 0;
    border-radius: 999px;
    background: var(--paper-2);
  }
  .post .vote button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  .post .vote svg {
    width: 16px;
    height: 16px;
  }
  .post .vote b {
    min-width: 16px;
    text-align: center;
    font-size: 0.85rem;
  }
  /* Replies opened under a post take the full width, below its actions. */
  .post .post-replies {
    order: 12;
    grid-column: 1 / -1;
  }
  .post .post-actions {
    order: 11;
    grid-column: 2;
    align-self: start;
    min-width: 0;
  }
  .post-actions button,
  .post-actions a {
    padding: 6px 5px;
    gap: 4px;
    white-space: nowrap;
  }
  /* Replies keep their bubble; save and report say it in a word. */
  .post .post-actions [data-action="report"] > [aria-hidden],
  .post .post-actions [data-action="save-post"] > [aria-hidden] {
    display: none;
  }

  /* Events: the date sits beside the title, everything under it uses the
     full width, and the three buttons share one row. The date takes the
     first free row, so a photo across the top of the card (2.11.1) sits
     above both. */
  .event-card {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
  }
  .event-card > div:not(.event-date) {
    display: contents;
  }
  .event-card .event-date {
    grid-column: 1;
    grid-row: span 2;
    height: 56px;
  }
  .event-card .event-date b {
    font-size: 1.3rem;
  }
  .event-card .cluster,
  .event-card h3 {
    grid-column: 2;
  }
  .event-card h3 {
    margin-bottom: 0;
  }
  .event-card .when,
  .event-card .where,
  .event-card .desc,
  .event-card .counts,
  .event-card .event-actions {
    grid-column: 1 / -1;
  }
  .event-card .when {
    margin-top: 10px;
  }
  .event-actions {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .event-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 6px 10px;
  }
}

/* ---------- D4. Find Care: kinds of care as pills ---------------------- */
/* Nine tall tiles pushed the search box below the fold at every width. As
   pills they take a line or two (one swipeable row on a phone); what each
   kind covers is still said under the search box once it is picked. */
.care-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.care-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.care-cat:hover {
  transform: none;
}
.care-cat .icon {
  font-size: 1.1rem;
}
.care-cat b {
  font-size: 0.92rem;
  font-weight: 600;
}
.care-cat small {
  display: none;
}
.care-cat.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(31, 77, 64, 0.6);
}
html[data-night] .care-cat.active {
  background: #2f6453;
  border-color: #2f6453;
  color: #fff;
}
#findBody {
  margin-top: 18px !important;
}
@media (max-width: 700px) {
  .care-categories {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .care-categories::-webkit-scrollbar {
    display: none;
  }
  .care-cat {
    flex: none;
  }
  #findBody {
    margin-top: 12px !important;
  }
}

/* ---------- D5. Members' Community starts with the page ---------------- */
/* Signed in, Community already drops its introduction (calm.css 32); the
   heading steps down to match, so the feed starts near the top instead of
   under a banner-sized title and a band of empty space. */
body.signed-in #page-community .page-hero {
  padding: clamp(22px, 3vw, 36px) 0 0;
}
body.signed-in #page-community .page-hero h1 {
  max-width: none;
  font-size: clamp(1.95rem, 3.4vw, 2.7rem);
  margin-bottom: 0.2em;
}
body.signed-in #page-community .page-hero + .section.tight {
  padding-top: clamp(16px, 2vw, 24px);
}

/* ---------- D6. WCAG 2.2 and the phone platform ------------------------ */
/* Focus not obscured (2.4.11): moving through a page with a keyboard,
   Switch Control or a screen reader scrolls each control into view; the
   sticky header and the floating tab bar must not cover it. The same
   padding keeps "scroll to the comment" clear of the header. */
html {
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (max-width: 700px) {
  html {
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  /* iPhone Safari zooms the whole page into any field under 16px (the
     "whose posts" menu was 14.4px). */
  .feed-toolbar select {
    font-size: 16px;
  }
  /* Sheets measure the screen that is actually visible, so their bottom
     never sits behind Safari's toolbar. */
  .modal {
    max-height: 92dvh;
  }
}
/* Target size (2.5.8): 24px at least, single-line titles too, and the
   reply form's "Reply anonymously" (its inline style made it 22px). */
.post h3 button,
.event-card h3 button {
  min-height: 24px;
}
#replyForm label.check {
  min-height: var(--tap) !important;
  align-items: center;
}
/* A new page's heading takes focus so screen readers start there; it is
   not a control, so it needs no focus ring. */
.page h1[tabindex="-1"]:focus {
  outline: none;
}
/* Scrolling to the end of the menu or the notifications stops there
   instead of scrolling the page underneath. */
.account-menu,
.notif-panel {
  overscroll-behavior: contain;
}
/* Fewer lonely last words in paragraphs, where the browser can. */
p:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)),
li:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)),
.lead:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
  text-wrap: pretty;
}
/* "Edit about me" keeps the gap before its arrow, like every link-btn. */
.account-head .account-edit {
  display: inline-flex;
}
/* Windows high contrast (forced colors) drops background colors, so a
   chosen pill or tab looked like every other one, and fields that show
   focus with a soft shadow showed nothing. Use the system's own colors. */
@media (forced-colors: active) {
  .chip.active,
  .chip[aria-pressed="true"],
  .chip:has(input:checked),
  .care-cat.active,
  .tab.active,
  .tab[aria-selected="true"],
  .account-nav button.active,
  .bottom-nav .active,
  .vote button.on {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  input:focus,
  select:focus,
  textarea:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  .card,
  .post,
  .event-card,
  .modal,
  .bottom-nav {
    border: 1px solid CanvasText;
  }
}

/* ---------- D7. The tab bar steps aside while you read ---------------- */
/* design.js sets .nav-tucked on a phone while scrolling down, the way iOS
   26 does it. The bar slides below the screen; it never moves for anyone
   who asks for less motion (design.js never tucks then). */
@media (max-width: 700px) {
  .bottom-nav {
    transition:
      translate 0.42s var(--ease-soft),
      opacity 0.3s ease;
  }
  body.nav-tucked .bottom-nav {
    translate: 0 calc(100% + 16px + env(safe-area-inset-bottom));
    opacity: 0;
  }
  body.nav-tucked .bottom-nav:focus-within {
    translate: none;
    opacity: 1;
  }
}

/* ---------- D8. Small phones: nothing scrolls sideways ---------------- */
/* Checked at 360px (most Android phones) and 320px (the smallest iPhones):
   long answers, a friend request's two buttons and long button labels
   pushed the page wider than the screen. */
@media (max-width: 420px) {
  /* Answer chips in forms may wrap onto a second line (scrolling chip rows
     stay on one). */
  .chip-group:not(.scroll) .chip {
    white-space: normal;
    max-width: 100%;
    text-align: left;
  }
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
  /* A friend request's buttons take their own line under the name (their
     52px indent included), wrapping there if they must. */
  .person > .cluster {
    flex: 1 1 100% !important;
    min-width: 0;
    flex-wrap: wrap;
  }
}

/* ---------- D9. A guide's weekly-note box --------------------------- */
/* On a phone its row stacks (app.css), and the email field's 220px flex
   basis turned into a 220px-tall field. Stacked, it is one line high, like
   the sign-up in the footer. */
@media (max-width: 700px) {
  .guide-newsletter .newsletter-row input[type="email"] {
    flex: 0 0 auto;
  }
}

/* ---------- D10. Back, the way apps do it ------------------------------ */
/* back.js: the header button, the edge swipe and which way screens slide. */
.nav-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  max-width: 46vw;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 6px 18px rgba(27, 42, 38, 0.1), 0 1px 2px rgba(27, 42, 38, 0.06);
  color: var(--brand-800);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.2s var(--ease-soft), background 0.2s;
}
.nav-back[hidden] {
  display: none;
}
.nav-back svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-back-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-back:hover {
  background: #fff;
}
.nav-back:active {
  transform: scale(0.95);
}
html[data-night] .nav-back {
  background: rgba(35, 32, 28, 0.78);
  border-color: rgba(237, 229, 218, 0.14);
  color: var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
@media (max-width: 700px) {
  /* On a phone the back button takes the name's place, as in iOS; Home
     is in the tab bar. The page's own "← …" link goes when it would go
     to the same place. */
  body.has-back .site-header .brand {
    display: none;
  }
  body.has-back .inpage-back.dup-back:not(:where(#page-guide *)) {
    display: none !important;
  }
}

/* Screens slide: in from the right going forward, from the left going
   back. For anyone who asks for less motion, nothing moves. */
html[data-nav-dir] .page.active:not(.nav-in-fwd):not(.nav-in-back) {
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  .page.active.nav-in-fwd {
    animation: pp-in-fwd 0.34s var(--ease-soft) both;
  }
  .page.active.nav-in-back {
    animation: pp-in-back 0.34s var(--ease-soft) both;
  }
}
@keyframes pp-in-fwd {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pp-in-back {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* The edge swipe's arrow: it grows as you pull and fills when letting go
   will go back, like Android's predictive back. */
.swipe-back {
  --p: 0;
  position: fixed;
  z-index: 150;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 8px 24px rgba(27, 42, 38, 0.2);
  opacity: 0;
  pointer-events: none;
  translate: calc(-44px + var(--p) * 64px) -50%;
  scale: calc(0.6 + var(--p) * 0.4);
}
.swipe-back.show {
  opacity: calc(0.4 + var(--p) * 0.6);
}
.swipe-back.armed {
  background: var(--brand);
  color: #fff;
}
.swipe-back svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media print {
  .nav-back,
  .swipe-back {
    display: none !important;
  }
}

/* ---------- D11. Home: one door ----------------------------------------- */
/* The home page sells one thing. Two buttons start it (make our village,
   or start one for someone), the example under them is the product itself,
   small enough to try here, and the other paths are chips. On a phone the
   headline, both buttons and the example's first rows share the first
   screen; the longer sentence is for a role's invite link or a wider one. */
.hero-doors {
  margin-top: 22px;
  gap: 10px;
}
.hero-doors .btn-lg {
  min-height: 52px;
}
.hero-fine {
  margin: 10px 0 0;
}
.hero-try {
  margin: 18px 0 0;
  padding: 12px 14px 10px;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.try-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
}
.try-head b {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
}
.try-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}
.try-slot .try-what {
  min-width: 0;
  color: var(--muted);
}
.try-slot .btn {
  flex: none;
  white-space: nowrap;
}
.try-slot .try-what b {
  color: var(--ink);
  font-weight: 650;
}
.try-slot.taken .try-what {
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}
.try-slot.taken .try-what b {
  color: var(--muted);
  font-weight: 600;
}
.try-who {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-700);
  font-size: 0.82rem;
  font-weight: 650;
}
.try-who.you {
  background: var(--accent-soft, var(--peach-soft));
  color: var(--accent-700, var(--accent-600));
  animation: try-pop 0.4s var(--ease);
}
@keyframes try-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.try-note {
  margin: 8px 0 0;
}
.try-list {
  margin-top: 6px;
}
.hero-chips {
  margin-top: 16px;
}
.hero-chips .chip {
  text-decoration: none;
}
.how-band h2 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 1.5rem;
}
.how-steps {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #d8e4dd;
}
.how-steps b {
  color: #fff;
}
@media (max-width: 700px) {
  #page-home .hero {
    padding-top: 22px;
  }
  #page-home .hero h1 {
    font-size: clamp(1.9rem, 8.4vw, 2.4rem);
    margin-bottom: 12px;
  }
  #page-home .hero:not(.has-role) #heroLead {
    display: none;
  }
  .hero-doors {
    margin-top: 14px;
  }
  .hero-doors .btn {
    flex: 1 1 100%;
  }
  .hero-try {
    margin-top: 14px;
    padding: 10px 12px 8px;
  }
  .try-slot {
    font-size: 0.88rem;
  }
}
@media (max-width: 360px) {
  .hero-fine,
  .hero-try .try-slot:nth-child(n + 5) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .try-who.you {
    animation: none;
  }
}

/* ---------- D12. Home is the one dashboard ------------------------------ */
/* Under the three cards, what's yours to do: your jobs from Plan at home,
   your Navigator plan, today's check-in, and inviting your people. Each is
   there only while it has something to say. */
.home-more {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
.home-more:empty {
  display: none;
}
.home-more > .card {
  margin: 0;
}
/* Home's h1 is the greeting, so these cards' titles are h2s, at card size. */
.home-more .card h2 {
  font-size: 1.32rem;
  font-variation-settings: "opsz" 48;
}
.home-more .card h2.week-title {
  font-size: 1.3rem;
}
.home-more .invite-compact h2 {
  margin: 2px 0 4px;
}
.today-card.plan {
  background: linear-gradient(155deg, var(--lavender-soft, #ece8f7), rgba(255, 255, 255, 0.95) 70%);
  min-height: 0;
}
html[data-night] .today-card.plan {
  background: var(--paper);
  border-color: var(--paper);
}

/* ---------- D13. Discussions: one row, then the posts ------------------ */
/* Under the four tabs, one row: search, the posts waiting for a reply and
   Filter (kind, sort and whose posts, in a sheet). The composer keeps to
   one line and Helpers this month sits after the third post, so on a
   phone the first post is on the first screen. The tabs' gap moved here
   from an inline style, so a phone can close it up on Discussions. */
#communityArea > .tabs[role="tablist"] {
  margin-bottom: 22px;
}
.disc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.disc-bar .feed-search {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.disc-bar .feed-search input[type="search"] {
  max-width: none;
  min-height: 44px;
  padding-block: 8px;
  border-radius: 999px;
}
/* Chrome keeps room for the clear button even while the field is empty,
   which cut the end off "Search discussions" on a phone. */
.disc-bar .feed-search input[type="search"]:placeholder-shown::-webkit-search-cancel-button {
  display: none;
}
.disc-bar .chip {
  flex: none;
  min-height: 44px;
  padding-inline: 14px;
  font-weight: 600;
}
/* How many filters are on: a small count beside the word, read out as
   "2 filters on" (the words are in the button, visually hidden). */
.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
html[data-night] .filter-count {
  background: #2f6453;
  color: #fff;
}
.composer-prompt.one-line button.prompt {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Helpers this month, in the list: the list's own gap spaces it. */
.post-list > .helpers-slot .helpers-strip {
  margin: 0;
}
/* The sort in the Filter sheet: a segmented control made of radio
   buttons. The radio is out of sight (the segment shows the choice) but
   still takes focus and arrow keys. */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: auto;
  width: 100%;
}
.seg .tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
  text-align: center;
  cursor: pointer;
}
.seg .tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.seg .tab:has(input:checked) {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.seg .tab:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
html[data-night] .seg .tab:has(input:checked) {
  background: #2e2a25;
}
@media (forced-colors: active) {
  .seg .tab:has(input:checked) {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}
.disc-filters .filter-actions {
  justify-content: space-between;
  margin-top: 4px;
}
/* On a phone the composer drops its card (the prompt and Post are the
   same pills as the row above it) and the gaps close up. */
@media (max-width: 700px) {
  #communityArea[data-view="discussions"] > .tabs[role="tablist"] {
    margin-bottom: 8px;
  }
  .disc-bar {
    margin-bottom: 8px;
  }
  .disc-bar .chip {
    padding-inline: 11px;
    font-size: 0.875rem;
  }
  .disc-bar .feed-search input[type="search"] {
    padding-inline: 12px;
  }
  .composer-prompt.one-line {
    gap: 8px;
    padding: 0;
    margin-bottom: 10px;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .composer-prompt.one-line button.prompt {
    padding-block: 6px;
  }
  .composer-prompt.one-line .btn {
    min-height: 40px;
  }
}
/* A 320px phone: the row's buttons and the sorts close up to fit. */
@media (max-width: 380px) {
  .disc-bar {
    gap: 6px;
  }
  .disc-bar .chip {
    padding-inline: 10px;
  }
  .disc-bar .feed-search input[type="search"] {
    padding-inline: 10px;
  }
  .seg .tab {
    padding-inline: 4px;
    font-size: 0.82rem;
    white-space: normal;
  }
}

/* ---------- D14. You: one page for your things and your settings ------- */
/* The picture in the header opens You: plain groups of rows (the Settings
   page's rows), then each section on its own page under a plain title. */
.you-body {
  max-width: 720px;
}
.you-body .settings-group:first-child {
  margin-top: 8px;
}
.account-sub-head {
  margin-bottom: 18px;
}
.account-sub-head h1 {
  margin: 0;
  font-size: 1.6rem;
}
/* "Signed in as": a fact, not a button. */
.settings-row.static {
  cursor: default;
}
.settings-row.static:hover {
  background: var(--surface);
}
.settings-row.static small {
  overflow-wrap: anywhere;
}
.settings-row .tab-count {
  margin-left: 0;
}
/* The one row on Notifications that opens this phone's settings. */
.you-form .settings-row {
  margin: 4px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.people-invite {
  max-width: 640px;
  margin-bottom: 18px;
}
/* Messages sits beside the bell. On the narrowest phones the wordmark
   steps aside, so the P+ mark and the three round buttons fit. */
@media (max-width: 360px) {
  body.signed-in .site-header .brand .wordmark {
    display: none;
  }
}

/* Guides: who it's for, then a jump to each part of the page. */
.guides-top {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.guides-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.guides-row > b {
  flex: none;
  min-width: 80px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.guides-row .chip-group {
  flex: 1 1 auto;
  min-width: 0;
}
.guides-row .chip {
  flex: none;
  text-decoration: none;
}
@media (max-width: 700px) {
  .guides-row {
    display: grid;
    gap: 6px;
  }
  .guides-row .chip-group {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .guides-row .chip-group::-webkit-scrollbar {
    display: none;
  }
}

/* ---------- D15. Find Care: refine, ratings, insurance and reviews ------ */
/* The refine panel sits inside the search panel; on a phone it starts
   folded so the results come first. */
.refine {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.refine > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.refine > summary::-webkit-details-marker {
  display: none;
}
.refine > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s;
}
.refine[open] > summary::after {
  transform: rotate(180deg);
}
.refine-count:not(:empty) {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
}
html[data-night] .refine-count:not(:empty) {
  color: #161411;
}
.refine-body {
  display: grid;
  gap: 10px;
  padding-top: 6px;
}
.refine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 10px;
}
.refine-grid .field {
  gap: 4px;
}
.chip small {
  opacity: 0.7;
  margin-left: 2px;
}
.care-order {
  font-size: 0.85rem;
  color: var(--muted);
}
.care-order summary {
  cursor: pointer;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.care-order p {
  margin: 4px 0 0;
}
.care-active {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.care-more {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
.choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

/* Stars: a light row with the filled share drawn over it. */
.stars {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--line-strong);
  white-space: nowrap;
  vertical-align: -1px;
}
.stars::before {
  content: "★★★★★";
}
.stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #c98a1e;
}
html[data-night] .stars-fill {
  color: #e2b55a;
}
.stars-fill::before {
  content: "★★★★★";
}
.stars.sm {
  font-size: 0.85rem;
}
.stars.lg {
  font-size: 1.3rem;
}
.p-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
}
.p-rating > span:last-child {
  color: var(--muted);
}
.p-rating.none {
  color: var(--muted);
  font-size: 0.85rem;
}
.p-badges,
.pd-tags,
.review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.care-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 600;
}
.care-badge.good {
  background: var(--brand-soft);
  color: var(--brand-700);
}
.care-badge.bad {
  background: var(--warn-soft);
  color: var(--ink-2);
}
.care-badge.plan {
  background: var(--sky-soft);
  color: var(--ink);
}

/* Details, opened in place under a card. A card beside an open one grows
   to the row's height; its content stays at the top. */
.provider {
  align-content: start;
}
.provider.open {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.p-details:not([hidden]) {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
}
.pd {
  display: grid;
  gap: 16px;
}
.pd-sec h4 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.pd-sec .fine {
  margin: 6px 0 0;
}
.pd-evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pd-evidence li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 8px;
  font-size: 0.92rem;
}
.pd-evidence li::before {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--muted);
  content: "–";
}
.pd-evidence li.yes::before {
  content: "✓";
  background: var(--success-soft);
  color: var(--success);
}
.pd-evidence li.maybe::before {
  content: "?";
  background: var(--warn-soft);
  color: var(--ink-2);
}
.pd-evidence li span {
  color: var(--ink-2);
  font-size: 0.86rem;
}
.pd-plan {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: 0.9rem;
}
.pd-plan.yes {
  background: var(--sky-soft);
}
.pd-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 14px;
  margin: 0;
  font-size: 0.88rem;
}
.pd-dl dt {
  color: var(--muted);
}
.pd-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.pd-sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 10px;
}
.pd-avg {
  display: grid;
  justify-items: start;
  gap: 2px;
}
.pd-avg b {
  font: 600 2rem/1 var(--font-display);
}
.pd-avg > span {
  font-size: 0.8rem;
  color: var(--muted);
}
.pd-bars {
  display: grid;
  gap: 3px;
  font-size: 0.75rem;
  color: var(--muted);
}
.pd-bars .bar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 20px;
  gap: 6px;
  align-items: center;
}
.pd-bars i {
  height: 6px;
  border-radius: 99px;
  background: var(--paper-2);
  overflow: hidden;
}
.pd-bars i b {
  display: block;
  height: 100%;
  background: #c98a1e;
}
.pd-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.review {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
}
.review.mine {
  border-color: var(--brand);
}
.review-top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.review-top .fine {
  margin: 0;
}
.review .moretext p {
  margin: 0 0 6px;
}
.review-note {
  margin: 0;
}
.review-actions {
  display: flex;
  gap: 14px;
}
.review-actions .link-btn {
  min-height: 32px;
  font-size: 0.85rem;
}
.pd-google {
  margin-top: 10px;
}
.pd-g {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  font-size: 0.9rem;
}

/* The review form: five stars that fill up to the one chosen. The radios
   stay in the page for keyboards and screen readers. */
.star-pick {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.star-pick legend {
  font-weight: 600;
  margin-bottom: 4px;
}
.star-row {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.star-row input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.star-row label {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  font-size: 2rem;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
  border-radius: var(--radius-xs);
}
.star-row input:checked ~ label,
.star-row label:hover,
.star-row label:hover ~ label {
  color: #c98a1e;
}
html[data-night] .star-row input:checked ~ label,
html[data-night] .star-row label:hover,
html[data-night] .star-row label:hover ~ label {
  color: #e2b55a;
}
.star-row input:focus-visible + label {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.star-word {
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--muted);
}
.review-form fieldset.field {
  border: 0;
  padding: 0;
  margin: 0;
}
.review-form fieldset.field legend {
  font-weight: 600;
  margin-bottom: 6px;
}
@media (max-width: 700px) {
  .pd-sum {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .care-more {
    justify-content: flex-start;
  }
}
/* Edit, Delete and Report act in place; they don't lead anywhere. */
.review-actions .link-btn::after,
.pd-dl .link-btn::after {
  content: none;
}

/* ---------- D16. Village: for someone, approve, send it, thanks --------- */
/* A helper starts a village for the family (a notice says whose it is and
   that nothing goes out before they say yes); the family's approval is one
   card with one big button; Send it is a screen, not a corner; the helper
   who took something is thanked first and can pass it on. */
.village-for-note {
  margin: 0 0 14px;
}
.village-approve {
  text-align: center;
}
.village-approve .try-list {
  text-align: left;
  margin: 14px 0 0;
}
.village-approve .btn-row {
  justify-content: center;
}
.approve-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--brand-tint);
  font-size: 1.8rem;
}
.copyline {
  padding: 10px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.95rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.table-card-box img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.village-thanks {
  margin-bottom: 14px;
  border-color: var(--brand-soft);
  background: var(--brand-tint);
}
.village-forward {
  margin-top: 12px;
}
.village-forward .copyline {
  margin-top: 6px;
  background: var(--surface);
}
.village-start-one {
  margin-top: 4px;
}
.compare-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 6px 0 10px;
}
.compare-row > div {
  display: grid;
  justify-items: center;
}
.compare-row b {
  font-family: var(--font-display);
  font-size: 2.4rem;
  line-height: 1;
}
.compare-row small {
  color: var(--muted);
  font-size: 0.8rem;
}
.compare-vs {
  color: var(--line-strong);
  font-size: 2rem;
}
.compare-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 4px;
  font-size: 0.95rem;
}
@media print {
  #printSheet .table-card-box img {
    width: 6in;
    height: auto;
    border: 0;
  }
}

/* ---------- D17. The ladder of care, said plainly ----------------------- */
/* Each level carries the four facts families asked for (time, how long,
   the baby, how you get in); the Navigator and Find Care say in one line
   that IOP and day programs exist. */
.lv-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 10px 0 12px;
}
.lv-fact small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.lv-fact b {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
}
.care-how li {
  margin: 0 0 8px;
  line-height: 1.5;
}
.care-find {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
  margin-top: 8px;
}
.care-find p {
  margin: 4px 0 6px;
}
.nav-ladder.step-up {
  border-color: var(--brand-soft);
  background: var(--brand-tint);
}
.nav-ladder-lead {
  margin: 4px 0 8px;
  line-height: 1.5;
}
.ladder-rungs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: rung;
}
.ladder-rungs li {
  padding: 8px 8px 8px 10px;
  border-left: 3px solid var(--brand-soft);
  background: var(--surface);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  font-size: 0.82rem;
  line-height: 1.35;
}
.ladder-rungs li:nth-child(2),
.ladder-rungs li:nth-child(3) {
  border-left-color: var(--brand);
}
.ladder-rungs b {
  display: block;
}
.ladder-rungs span {
  color: var(--muted);
}
.find-ladder {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
}
.find-ladder > span {
  font-size: 1.4rem;
  line-height: 1;
}
.find-ladder p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .lv-facts {
    grid-template-columns: 1fr;
  }
  .ladder-rungs {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .ladder-rungs li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }
  .ladder-rungs b {
    display: inline;
  }
}

/* ---------- D18. The ☰ menu is back ------------------------------------ */
/* The drawer (app.css) holds the whole site at every width; the lines for
   a member's own pages show once signed in; the page you're on is lit.
   On a phone the top bar now carries four round buttons beside the mark,
   so the wordmark and the name step aside earlier than before. */
.drawer nav [data-signed-in] {
  display: none;
}
body.signed-in .drawer nav a[data-signed-in] {
  display: flex;
}
body.signed-in .drawer nav small[data-signed-in] {
  display: block;
}
.drawer nav a.active {
  background: var(--brand-tint);
  color: var(--brand-700);
}
.drawer-account .btn-row {
  margin-top: 10px;
}
body.has-drawer {
  overflow: hidden;
}
@media (max-width: 420px) {
  body.signed-in .site-header .brand .wordmark {
    display: none;
  }
  body.signed-in .account-btn .account-text {
    display: none;
  }
  body.signed-in .account-btn {
    padding: 4px;
  }
}
@media (max-width: 360px) {
  .site-header .brand .wordmark {
    display: none;
  }
  .site-header .container {
    gap: 12px;
  }
  .header-actions {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer,
  .shade {
    transition: none;
  }
}

/* ---------- D19. Site review, October 2026: the small certain fixes ----- */
/* 1. "Sign in" was two pixels short on a 390 px phone and read "Sign…":
   signed out, the button loses its chevron and a little padding. */
@media (max-width: 420px) {
  body:not(.signed-in) .account-btn {
    padding: 4px 12px;
    gap: 6px;
  }
  body:not(.signed-in) .account-btn .chev {
    display: none;
  }
  body:not(.signed-in) .account-text b {
    max-width: none;
  }
}
/* 2. Terms, Privacy, Health data: "On this page" in two columns on a
   screen wide enough, one on a phone (the columns collided). */
.legal-toc {
  margin: 8px 0 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 24px;
}
.legal-toc li {
  break-inside: avoid;
}
@media (max-width: 700px) {
  .legal-toc {
    columns: 1;
  }
}
/* 3. Village Score: the link under each fix sits on its own line. */
.step-go {
  display: block;
  margin-top: 2px;
}
/* 4. "I'll take this" stays on one line; the slot's text wraps instead. */
.saved-row.slot > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}
.saved-row.slot .cluster {
  flex: 0 0 auto;
}
.saved-row.slot .cluster .btn {
  white-space: nowrap;
}
/* 6. A few links under a form: one per line, no separators. */
.link-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.95rem;
}

/* ---------- D20. Site review, October 2026: the bigger changes ---------- */
/* 10. On a laptop the tool starts in the first screen: the page top is
   tighter, the heading a size smaller, the gap under it shorter. The
   guides pages keep their look. */
@media (min-width: 701px) {
  .page-hero:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    padding: 34px 0 18px;
  }
  .page-hero h1:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  }
  .page-hero .lead:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    max-width: 62ch;
  }
  .page-hero + .section.tight:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)),
  .page-hero + .container.section.tight:not(:where(#page-resources *, #page-guide *, #page-moms *, #page-partners *, #page-family *)) {
    padding-top: 16px;
  }
}
/* 11. (Reverted on the owner's ask, 6 October: the visitors' home page
   keeps its photo on phones, the mission band and the full footer, as
   before.) */
/* 12. One short footer (the signed-in one) on every page but the
   visitors' home page: the brand, the crisis line, one row of links, the
   note. The newsletter stays on the Guides, for visitors. */
:where(body.signed-in, body:not([data-page="home"])) .site-footer {
  padding-block: 22px;
}
:where(body.signed-in, body:not([data-page="home"])) .site-footer .newsletter,
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid > div:first-child > p:first-of-type,
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid > div:nth-child(2),
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid > div:nth-child(3),
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid h2 {
  display: none;
}
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid > div:first-child p {
  margin: 0 !important;
}
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-grid ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.85rem;
}
:where(body.signed-in, body:not([data-page="home"])) .site-footer .footer-note {
  margin-top: 10px;
  padding-top: 10px;
}
body:not(.signed-in)[data-page="resources"] .site-footer .newsletter {
  display: block;
  flex: 1 1 100%;
  max-width: 520px;
  margin-top: 8px;
}
/* 13. Find Care: the links inside Details sit in one row at the top. */
.pd-links {
  margin: 0 0 14px;
}
/* 15. Levels of care: the quick table is one neutral style; nothing in it
   reads as chosen. */
.level-scale div:nth-child(3),
.level-scale div:nth-child(5) {
  background: var(--surface);
}
/* 16. Guides: folded cards are hidden until Show all. */
.guide-card[hidden] {
  display: none;
}
.guides-more {
  margin: 12px 0 0;
}

/* 9. What a visitor sees of the community: the posts members chose to
   show, no names, then the sign-in. */
.community-visitor {
  max-width: 720px;
}
.community-pulse {
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--brand-700);
}
.post-preview {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.post-preview + .post-preview {
  margin-top: 10px;
}
.post-preview h3 {
  margin: 6px 0 4px;
  font-size: 1.1rem;
}
.post-preview h3 button {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}
.post-preview h3 button:hover {
  color: var(--brand);
}
.post-preview .excerpt {
  margin: 0 0 6px;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.post-preview .fine {
  margin: 0;
}
#communityGate {
  margin-top: 16px;
}

/* Two small links side by side under a form or a line: a gap, no dot. */
.fine-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
/* Four village tabs fit a phone: a little less padding, a size smaller. */
@media (max-width: 420px) {
  .village-tabs {
    gap: 2px;
    padding: 3px;
  }
  .village-tabs .vtab {
    padding: 8px 6px;
    font-size: 0.84rem;
    gap: 4px;
  }
  .village-tabs .vtab-n {
    padding: 1px 5px;
  }
}
/* On the narrowest phones two tabs use their short names. */
.vtab-s {
  display: none;
}
@media (max-width: 380px) {
  .village-tabs .vtab-l {
    display: none;
  }
  .village-tabs .vtab-s {
    display: inline;
  }
}