body { color:#142223; background:#f7faf9; }
a { color:#0b626b; }
.btn-primary {
  --bs-btn-bg:#0b5b61;
  --bs-btn-border-color:#0b5b61;
  --bs-btn-hover-bg:#084a4f;
  --bs-btn-hover-border-color:#084a4f;
  --bs-btn-active-bg:#073f43;
  --bs-btn-active-border-color:#073f43;
}
.form-control:focus,.form-select:focus {
  border-color:#0e7a83;
  box-shadow:0 0 0 .25rem rgba(14,122,131,.22);
}
.family-panel { background:#fff; border:1px solid rgba(11,74,80,.10); border-top:4px solid #12a4af; box-shadow:0 4px 14px rgba(20,34,35,.06); padding:.85rem 1rem 1rem; margin-bottom:1rem; overflow-wrap:anywhere; }
.family-panel h2 { color:#0b4a50; font-size:1rem; font-weight:700; line-height:1.2; padding:0 0 .55rem; margin:0 0 .7rem; border-bottom:1px solid #cdeef1; }
.family-panel h3 { font-size:1.05rem; margin-top:1rem; }
.family-panel p:last-child { margin-bottom:0; }
.family-panel article + article { border-top:1px solid #b7cdce; padding-top:.75rem; margin-top:.75rem; }
.family-links { display:flex; flex-direction:column; gap:.25rem; }
.family-links a { padding:.6rem 0; }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
.family-photo { display:block; width:100%; max-width:360px; height:auto; border-radius:5px; margin-bottom:1rem; }
.family-search { width:100%; max-width:30rem; margin:0 0 1rem; }

@media print { nav, .no-print { display:none!important; } .family-panel { break-inside:avoid; } }

/* Cards side by side on a laptop and one photo box the same size for everyone
   (Samantha, 2026-09-23: "a preset size that didn't take up too much space on
   the directory page ... there is a box that is the same for everyone"). */
[data-directory-list] { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap:1.25rem; align-items:start; }
.directory-entry { background:#f4f1eb; border:1px solid #b7cdce; border-radius:6px; overflow:hidden; overflow-wrap:anywhere; }
.directory-entry[hidden] { display:none; }
.directory-photo { display:block; width:100%; aspect-ratio:3 / 2; object-fit:cover; }
.directory-information { padding:1rem 1.1rem; }
.directory-information h2 { font-size:1.25rem; font-weight:700; margin:0 0 .75rem; }
.directory-details { display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.6rem .75rem; font-size:1rem; margin:0; }
.directory-details dt { font-weight:400; }
.directory-details dd { margin:0; line-height:1.65; }
.directory-children { list-style:none; margin:0; padding:0; }
.directory-information > p { margin-top:1.25rem; }
/* One family fits one phone screen, photo included (Samantha, 2026-09-23: "it
   has to all fit on one screen, no scrolling for one family"): labels stay
   beside their values and the lines sit closer. */
@media(max-width:450px) {
  .directory-information { padding:.75rem .6rem; }
  .directory-information h2 { font-size:1.15rem; margin-bottom:.5rem; }
  /* Wide enough for "Birthdays" whole; labels break between words only, never mid-word
     ("Birthday / s", 2026-09-25). */
  .directory-details { grid-template-columns:6.4rem minmax(0,1fr); gap:.35rem .5rem; font-size:.95rem; }
  .directory-details dt { overflow-wrap:normal; word-break:normal; hyphens:none; }
  .directory-details a[href^="sms:"] { white-space:nowrap; }
  /* The email sits on one line (Samantha, 2026-09-23: "Can you just make that
     text move over slightly so it doesn't need to wrap at all?"): a narrower
     label column, and the address a touch smaller on the narrowest phones. */
  .directory-email { font-size:min(.95rem, 3.6vw); letter-spacing:-.01em; }
  .directory-details dt { font-weight:600; }
  .directory-details dd { line-height:1.4; }
}
@media print { .directory-entry { break-inside:avoid; } .family-search, label[for="family-search"] { display:none; } }

.reminder-family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: .75rem; align-items: start; }
.reminder-family-grid > article { min-width: 0; overflow-wrap: anywhere; }
.reminder-progress-item { border-top: 1px solid #b8c8c9; padding: .5rem 0; }
.reminder-progress-item p { margin-bottom: .35rem; }

.showcase-page { max-width: 900px; margin: 0 auto 2rem; }
.showcase-intro { text-align:center; padding:1.25rem .5rem 1rem; }
.showcase-kicker { color:#6d7774; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; margin:0 0 .35rem; }
.showcase-intro h1 { color:#173d55; font-family:Georgia,serif; font-size:clamp(2rem,6vw,3.5rem); margin:.15rem 0 .5rem; }
.showcase-lede { max-width:700px; margin:0 auto; font-size:1.05rem; line-height:1.55; }
.showcase-hero { display:block; width:100%; padding:0; border:0; background:none; margin:0 0 1rem; cursor:zoom-in; }
.showcase-hero img { display:block; width:100%; aspect-ratio:3.2; object-fit:cover; border-radius:7px; }
.showcase-photo-button { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.showcase-zoom { border:0; padding:0; background:transparent; max-width:96vw; max-height:92vh; }
.showcase-zoom::backdrop { background:rgba(10,20,25,.85); }
.showcase-zoom img { display:block; max-width:96vw; max-height:92vh; object-fit:contain; border-radius:5px; }
.showcase-zoom-close { position:absolute; top:.35rem; right:.35rem; width:2.75rem; height:2.75rem; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:#173d55; font-size:1.75rem; line-height:1; }
.showcase-note { background:#f4e3dc; border-radius:7px; color:#45606b; font-family:Georgia,serif; font-size:1.1rem; font-style:italic; padding:.7rem 1rem; text-align:center; margin:0 0 1rem; }
.showcase-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.showcase-card { background:#fff; border:1px solid #d6dfdb; border-radius:7px; padding:1.25rem; position:relative; }
.showcase-card h2,.showcase-reflections h2,.showcase-photos h2 { color:#173d55; font-family:Georgia,serif; font-size:1.45rem; margin:0 0 .55rem; }
.showcase-card p { line-height:1.5; }
.showcase-card ul { padding-left:1.2rem; }
.showcase-card li { margin:.35rem 0; }
.showcase-callout { background:#eef1ed; border-radius:6px; color:#3d5557; font-size:.92rem; padding:.7rem .8rem; }
.showcase-reflections { background:#e5f0f5; border-radius:7px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:1rem; margin:1rem 0; padding:1rem 1.25rem; }
.showcase-reflections p { margin-bottom:.25rem; }
.showcase-reflections ul { margin:0; padding-left:1.2rem; }
.showcase-reflections li { margin:.25rem 0; }
.showcase-photos { background:#fff; border:1px solid #d6dfdb; border-radius:7px; padding:1.25rem; }
.showcase-section-heading { margin-bottom:1rem; }
.showcase-section-heading p:last-child { margin-bottom:0; }
.showcase-photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
.showcase-photo { aspect-ratio:1.25; background:#e5ebe7; border-radius:5px; display:block; object-fit:cover; width:100%; }
.showcase-photo-placeholder { align-items:center; aspect-ratio:1.25; background:linear-gradient(145deg,#c8d7d0,#ead9c9); border:2px dashed #78908a; color:#36545a; display:flex; flex-direction:column; justify-content:center; padding:.5rem; text-align:center; }
.showcase-photo-placeholder span { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.showcase-photo-placeholder strong { font-family:Georgia,serif; margin-top:.25rem; }
@media(max-width:700px) { .showcase-columns,.showcase-reflections { grid-template-columns:minmax(0,1fr); } .showcase-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Family home in the dashboard's own look (Samantha, 2026-09-23: "should look
   the same as every other page we have designed"). The cards, titles, link
   tiles and date list come from app.css; only the family layout is here. */
.family-home-name { font-size:1.35rem; font-weight:700; color:#0b4a50; margin:0; }
.family-home .home-date { margin-bottom:.6rem; }
/* The heading with the Settings gear at its top right (Samantha, 2026-10-01). */
.family-home-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.family-home-title { min-width:0; }
.family-settings-link { flex:none; color:#0b4a50; font-size:1.6rem; line-height:1; padding:.1rem .2rem; text-decoration:none; }
.family-settings-link:hover, .family-settings-link:focus-visible { color:#15bcc9; }
.family-home-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
/* Never wraps (HOUSE_STYLE, 2026-09-24): scales down on a narrow phone instead. */
.family-absence-btn { white-space:nowrap; font-size:clamp(.72rem, 3.7vw, 1rem); padding-left:.6rem; padding-right:.6rem; max-width:100%; }
.family-home-cleaning { margin-bottom:1rem; }
/* Merrilee's and Leigh's own "Co-op" box (2026-09-25): the admin dashboard's
   Attendance card, reused verbatim, plus Add announcement and Find a family
   underneath it. Never appears for an ordinary family or for Samantha. */
.coop-admin-box { margin-bottom:1rem; }
.coop-box-row { display:flex; flex-wrap:wrap; gap:.9rem; align-items:flex-start; margin-top:.7rem; }
.coop-box-find { flex:1 1 220px; min-width:0; }
.coop-box-find > .home-section-link { display:block; font-size:.85rem; margin-bottom:.3rem; }
@media(max-width:767.98px) { .coop-box-row { flex-direction:column; } .coop-box-find { flex-basis:auto; width:100%; } }

/* Admin quick links mixed into the family grid, tinted so they stand out
   (Samantha, 2026-09-25: "What if you made the quick links a slightly
   different color if they are admin links?"). Green, not teal like the
   plain family tiles -- purely a differentiator, the same "one colour per
   card" idea already used across the dashboard, not a status colour. See
   HOUSE_STYLE.md "Admin tiles on the family home". */
.home-link-grid a.is-admin-link { background:var(--ub-green-tint); color:var(--ub-green-ink); }
.home-link-grid a.is-admin-link .bi { color:var(--ub-green-ink); }
.home-link-grid a.is-admin-link:hover { background:#D3EEDF; border-color:var(--ub-green-mid); color:var(--ub-green-ink); }
.family-home-columns { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:1rem; align-items:start; }
.family-home-stack { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.family-card { overflow-wrap:anywhere; }
.family-card > .home-section-title .home-section-link { margin-left:auto; text-align:right; }
.family-card article + article { border-top:1px solid #e9ecef; padding-top:.6rem; margin-top:.6rem; }
.family-card p:last-child { margin-bottom:0; }
.family-card-sub { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#0b6269; margin:.8rem 0 .3rem; }
.family-card-sub:first-of-type { margin-top:0; }
.family-class-list { list-style:none; margin:0; padding:0; }
.family-class-list li { display:flex; gap:.6rem; padding:.35rem 0; border-bottom:1px solid #e9ecef; }
.family-class-list li:last-child { border-bottom:0; }
.family-class-hour { flex:none; min-width:3.8rem; font-size:.8rem; font-weight:700; color:#0b6269; padding-top:.1rem; }
.family-class-body { display:flex; flex-direction:column; min-width:0; }
.family-class-body strong { font-weight:600; color:#142223; }
.family-class-meta { font-size:.8rem; color:#5b6b70; line-height:1.3; }
details.family-card > summary { cursor:pointer; list-style:none; }
@media(max-width:767.98px) { .family-home-columns { grid-template-columns:minmax(0,1fr); } .family-card > .home-section-title { flex-wrap:wrap; } .family-card > .home-section-title .home-section-link { flex-basis:100%; margin-left:0; text-align:left; font-size:.8rem; } }

/* Each child is its own block on the family schedule (Samantha, 2026-09-23:
   "Let's make it a little more clear here where each child's info is"). */
.family-child-block { border: 1px solid #cdeef1; border-radius: 8px; margin: 0 0 .75rem; overflow: hidden; }
.family-child-block:last-child { margin-bottom: 0; }
.family-child-name { margin: 0; padding: .45rem .75rem; background: #e6f6f8; color: #0b4a50; font-size: .95rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.family-child-block .family-class-list { padding: 0 .75rem; }

/* Directory sort and filter (2026-09-23). */
.directory-controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: .5rem 0 1rem; }
.directory-controls label { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.directory-controls select { width: auto; }

/* Collapsible cards (family-collapse) live in app.css: the admin home folds them too (2026-09-25). */

/* The absence page, one question at a time (Samantha, 2026-10-02: "People need
   a super simple, broken down approach to marking people absent"). Big
   whole-width buttons, 56px tall; nothing smaller than 44px to tap. */
.absence-wizard { max-width: 34rem; }
.absence-step-q { font-size: 1.25rem; font-weight: 700; margin: .25rem 0 .9rem; outline: none; }
.absence-step-q label { font: inherit; margin: 0; }
.absence-step-note { margin: -.5rem 0 .9rem; color: var(--ub-slate-dark); }
.absence-back { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: 0 .25rem; margin: -.25rem 0 0 -.25rem; border: 0; background: none; color: var(--ub-teal-link); font-weight: 600; }
.absence-choice { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 56px; padding: .7rem 1rem; margin: 0 0 .6rem; text-align: left; font-size: 1.08rem; font-weight: 600; color: var(--ub-ink); background: var(--ub-surface); border: 2px solid var(--ub-line); border-radius: .6rem; }
/* Hover only where there is a pointer: on a phone a tap leaves "hover" on
   the button that appears under the finger on the next step, which then
   looks chosen. */
@media (hover: hover) { .absence-choice:hover { border-color: var(--ub-teal-mid); } }
.absence-choice:focus-visible, .absence-hour:focus-visible { outline: 3px solid var(--ub-teal-mid); outline-offset: 2px; }
.absence-choice.is-on { border-color: var(--ub-teal-deep); box-shadow: inset 0 0 0 1px var(--ub-teal-deep); }
.absence-choice > .bi { font-size: 1.3rem; color: var(--ub-teal-ink); }
/* A person picked as out reads like an absent chip on the attendance page. */
.absence-person-choice.is-on { background: var(--ub-red-tint); border-color: var(--ub-red-line); box-shadow: inset 0 0 0 1px var(--ub-red-line); }
.absence-out-mark { display: none; margin-left: auto; font-size: .85rem; font-weight: 700; color: var(--ub-red-deep); }
.absence-person-choice.is-on .absence-out-mark { display: inline; }
/* The teaching parent, shaded exactly as on the attendance page
   (app.css .attendance-person-row-teaching). */
.absence-person-choice.is-teaching { border-left: 6px solid var(--ub-teal-mid); background: var(--ub-teal-tint); }
.absence-person-choice.is-teaching.is-on { background: var(--ub-red-tint); }
.absence-person-choice .attendance-teaches-badge { margin-left: 0; }
.absence-person-choice { flex-wrap: wrap; }
.absence-hours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.absence-hour { min-height: 56px; padding: .5rem; font-size: 1.05rem; font-weight: 600; color: var(--ub-ink); background: var(--ub-surface); border: 2px solid var(--ub-line); border-radius: .6rem; overflow-wrap: anywhere; }
.absence-hour[aria-pressed="true"] { background: var(--ub-red-tint); border-color: var(--ub-red-line); color: var(--ub-red-deep); box-shadow: inset 0 0 0 1px var(--ub-red-line); }
.absence-hour[aria-pressed="true"]::before { content: "\2713  "; }
.absence-hour-all { grid-column: 1 / -1; }
/* A day already marked here: done, not a button (2026-10-02 fix). */
.absence-day-done { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .5rem; min-height: 56px; padding: .7rem 1rem; font-size: 1.08rem; font-weight: 600; color: var(--ub-slate-dark); background: var(--ub-surface-2); border: 2px dashed var(--ub-line); border-radius: .6rem; }
.absence-day-done-mark { font-size: .95rem; color: var(--ub-green-ink); }
.absence-leaving-early { min-height: 44px; margin: .4rem 0 .9rem; }
.absence-more { min-height: 44px; }
.absence-summary { list-style: none; padding: .75rem 1rem; margin: 0 0 1rem; background: var(--ub-teal-tint); border-radius: .6rem; font-size: 1.05rem; }
.absence-summary li + li { margin-top: .35rem; }
/* "Cancel that request too?" after taking an absence back (2026-10-08): two
   whole-width answers on a phone, labels on one line (HOUSE_STYLE §10). */
.absence-takeback-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.absence-takeback-actions .btn { flex: 1 1 10rem; min-height: 48px; white-space: nowrap; }

/* Our cleaning days: one line per date, the next one open (2026-09-23). */
.family-cleaning-day { border-top: 1px solid #e6eeef; padding: .45rem 0; }
.family-cleaning-day > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; min-height: 44px; align-content: center; }
.family-cleaning-day > summary::-webkit-details-marker { display: none; }
.family-cleaning-day > summary::before { content: "\25B8"; color: #0b4a50; width: .9em; }
.family-cleaning-day[open] > summary::before { content: "\25BE"; }
.family-cleaning-day-body { padding: .35rem 0 .2rem 1.3rem; }
.family-cleaning-day-body p { margin-bottom: .45rem; }
.family-cleaning-history > summary { cursor: pointer; padding-top: .5rem; }
/* The upcoming date, boxed like the Prospects page's Family details (2026-09-23). */
.family-cleaning-day.is-next { background: #edf7f8; border: 1px solid #79999c; padding: .35rem .7rem .6rem; margin: .45rem 0; }
.family-cleaning-day.is-next + .family-cleaning-day { border-top: 0; }
/* One of the family's own duties on the change-requests page (2026-09-23). */
.cleaning-own-duty { padding: .75rem 0; }
.cleaning-own-duty + .cleaning-own-duty { border-top: 1px solid #e6eeef; }
.directory-email { overflow-wrap:normal; word-break:normal; }
/* Reminder progress: a family with nothing to show is one short line, not a
   tall empty card (2026-09-23, "Read this first" 2). */
.reminder-family-grid > .ub-card { margin-bottom: 0; }
/* A family with a current reminder, boxed like the Prospects page's Family
   details; and the review list up top (Samantha, 2026-09-23). */
.reminder-family-grid > .ub-card.has-current { background: #edf7f8; border: 1px solid #79999c; }
.reminder-family-grid > .ub-card.all-seen { background: var(--ub-green-tint, #e6f6ee); border: 1px solid var(--ub-green-mid, #1fa873); }
.reminder-review { background: #fff8e1; border: 1px solid #f0d48a; border-radius: 6px; padding: .75rem .9rem; }
.reminder-review-row + .reminder-review-row { border-top: 1px solid #f0d48a; margin-top: .5rem; padding-top: .5rem; }
.reminder-review-row .reminder-progress-item p { margin-bottom: .25rem; }

/* The family's children two across on a computer, three on a wide screen. */
@media (min-width: 992px) {
  .family-child-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: stretch; }
  .family-child-grid > .family-child-block { margin: 0; height: 100%; }
}
@media (min-width: 1600px) {
  .family-child-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Same rule as app.css: a checkbox's label is only as wide as its words. */
label:has(> input[type="checkbox"]) { width: fit-content; max-width: 100%; }


/* "Couldn't find anyone? Text ..." -- the fallback after finding a
   replacement, folded (2026-09-24). */
.cleaning-fallback { margin-top: .5rem; }
.cleaning-fallback > summary { color: var(--ub-teal-ink, #0B6269); font-weight: 600; cursor: pointer; padding: .35rem 0; }

/* Announcements and reminders on top, side by side on a computer (2026-09-24). */
.family-home-notices { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; margin-bottom:1rem; align-items:start; }

/* A parent's first name above their own number and email in the directory. */
.directory-contact-who { font-size:.8rem; color:var(--ub-slate-dark); margin-top:.2rem; }
.directory-contact-who:first-child { margin-top:0; }

/* The live-meeting banner is in app.css: admin pages show it too (2026-09-25). */

/* What a family has told Merrilee, under the absence button (2026-09-24). */
.family-reported-absences { list-style:none; margin:-.25rem 0 .75rem; padding:.5rem .75rem; background:var(--ub-teal-tint, #E4F6F8); border-radius:.5rem; font-size:.92rem; }
.family-reported-absences li + li { margin-top:.2rem; }
.family-reported-absences a { margin-left:.35rem; }


/* "My teaching" on the family home (2026-09-25). */
.family-teaching-off { color: var(--ub-slate); font-style: italic; }
.family-teaching-with { display: block; font-size: .85rem; color: var(--ub-slate-dark); margin-top: .1rem; }
.family-teaching-budget { display: block; font-size: .85rem; color: var(--ub-green-ink, #127E55); margin-top: .1rem; font-weight: 600; }
.family-teaching-budget.is-over { color: var(--ub-amber-ink, #9a5b00); }
.family-teaching-text { display: inline-block; padding: 0 .45rem; margin-left: .15rem; border: 1px solid var(--ub-teal-deep); border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ub-teal-deep); text-decoration: none; }
.family-teaching-text:hover { background: var(--ub-teal-deep); color: #fff; }

/* Reminders and announcements page: every family card the same shape
   (2026-09-25, "this format should match everything else"). */
.reminder-family-card .ub-card-title { margin-bottom: .4rem; }
.reminder-family-part { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; font-size: .9rem; padding: .2rem 0; }
.reminder-family-label { font-weight: 600; color: var(--ub-teal-deep, #0b4a50); min-width: 8.5rem; }
.reminder-unseen { color: var(--ub-amber-ink, #a16100); font-weight: 600; }
.reminder-seen { color: var(--ub-green-ink, #1f6b3f); }
.reminder-announcement-list { flex-basis: 100%; list-style: none; margin: .1rem 0 0; padding: 0; font-size: .82rem; }
.reminder-announcement-list li.is-seen { color: #6c757d; }

/* Merrilee's and Leigh's family home (2026-09-25 comparison): three top-bar
   buttons stay on the logo's line on a phone; the Co-op box is only as tall as
   what is in it (it borrowed the dashboard's grid-area and stretched); "Go"
   never breaks into "G / o". */
@media (max-width: 420px) {
  .portal-quick-links { gap: .3rem !important; flex-wrap: nowrap; }
  .portal-quick-links .nav-quick-link { padding-left: .45rem; padding-right: .45rem; }
}
.family-home .coop-admin-box { grid-area: auto; align-self: start; height: auto; }
.coop-admin-box .home-find-form .btn { flex-shrink: 0; white-space: nowrap; }

/* The Co-op box, tidied (2026-09-25): alert, figures, who's out folded, admin
   links in their own labelled row, then the two actions. */
.coop-box-out { margin: .3rem 0 .6rem; }
.coop-box-out > summary { cursor: pointer; font-weight: 600; color: var(--ub-teal-deep, #0b4a50); font-size: .9rem; }
.coop-box-links-label { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ub-slate, #5b6b73); margin: .6rem 0 .3rem; }
.coop-box-links { margin-bottom: .4rem; }

/* The Open / Close pill itself (.fold-pill) lives in app.css beside the fold
   it belongs to: the admin side folds with it too (Admins & sign-ins, 2026-10-07). */
details.family-collapse > summary.home-section-title { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fold-body-link { margin: .2rem 0 .6rem; font-size: .9rem; font-weight: 600; }
/* The Open button stays on the title's line; a subtitle drops under both. */
details.family-collapse > summary .home-electives-subtitle { order: 3; flex-basis: 100%; }
details.family-collapse { scroll-margin-top: 8px; }
/* "Request a date change or help another family" on one line on a phone: the
   type scales down before it would wrap (HOUSE_STYLE 10; Friday sweep, 2026-10-07). */
.family-cleaning-change { white-space: nowrap; max-width: 100%; }
@media (max-width: 575.98px) {
  /* Measured 2026-10-07: fits whole at 390, 375 and 360px wide. */
  .family-cleaning-change { font-size: min(.875rem, 3.05vw); padding-left: .45rem; padding-right: .45rem; }
}
/* Electives box: which rotation is on screen, and the button to the other. */
/* Merrilee's Attendance card (2026-09-25): the day, one big button, what is
   still to do, then the figures. */
.attendance-card-day { font-weight: 700; color: var(--ub-teal-deep, #0b4a50); margin: 0 0 .5rem; }
.attendance-card-open { display: block; width: 100%; font-size: 1.1rem; font-weight: 700; padding: .7rem 1rem; margin-bottom: .75rem; }
.attendance-card-todo { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .4rem; }
.attendance-card-todo li { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .7rem; border-radius: 8px; font-weight: 600; }
.attendance-card-todo li.is-urgent { background: #fdecea; color: #9b1c1c; }
.attendance-card-todo li.is-todo { background: #fff6e0; color: #7a4d00; }
.attendance-card-todo li.is-done { background: #e7f6ec; color: #1f6b3a; }
/* The participation agreement (2026-09-25): one section at a time, big
   tap targets for the answers, phone first. */
.agreement-page { max-width: 760px; margin: 0 auto; }
.agreement-title { font-size: 1.5rem; margin: .5rem 0 0; color: var(--ub-teal-deep, #0b4a50); }
.agreement-sub { color: #6b7280; margin: 0 0 1rem; }
.agreement-section { margin-bottom: 1rem; }
.agreement-section h3 { font-size: 1rem; margin: .8rem 0 .4rem; }
.agreement-text p { margin: 0 0 .7rem; line-height: 1.5; }
.agreement-text ul { margin: 0 0 .7rem 1.1rem; padding: 0; }
.agreement-text h3 { font-size: 1rem; text-decoration: underline; margin: .6rem 0 .3rem; }
.agreement-answers { border: 0; margin: .8rem 0 0; padding: 0; }
.agreement-option { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid #d8e4e5; border-radius: 8px; margin-bottom: .45rem; cursor: pointer; }
.agreement-option input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.agreement-option.is-agree { font-weight: 600; }
.agreement-option:has(input:checked) { border-color: var(--ub-teal-mid, #0e7a83); background: #eaf7f8; }
.agreement-other { margin: -.2rem 0 .5rem 2rem; width: calc(100% - 2rem); }
.agreement-note { color: #48585A; font-size: .95rem; }
.agreement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.agreement-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
.agreement-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 600px) { .agreement-grid { grid-template-columns: 1fr; } }
.agreement-signature { font-size: 1.15rem; margin: .4rem 0 .8rem; }
.agreement-submit { width: 100%; font-size: 1.1rem; font-weight: 700; padding: .7rem; }
/* Forms (2026-09-25): each form, To do with a button or Done with the date. */
.forms-page { max-width: 760px; margin: 0 auto; }
.forms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.forms-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: #fff; border-radius: 0; padding: .85rem 1rem; border: 1px solid #d8e4e5; border-left: 5px solid #d97706; }
.forms-item.is-done { border-left-color: #1f8a4c; }
.forms-item-text { display: flex; flex-direction: column; }
.forms-item-title { font-weight: 700; color: var(--ub-teal-deep, #0b4a50); }
.forms-item-kind { color: #6b7280; font-size: .9rem; }
.forms-status.is-done { color: #1f6b3a; font-weight: 600; white-space: nowrap; }
.forms-open { white-space: nowrap; font-weight: 700; }
.forms-badge { display: inline-block; margin-left: .35rem; background: #d97706; color: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .8rem; font-weight: 700; }
/* Orange top stripe from --accent, like every other home card; no side stripe (2026-09-25: "the colored stripe down the side is curved"). */
.agreement-step-count { color: #6b7280; font-weight: 600; font-size: .9rem; margin: 0 0 .3rem; }
.agreement-step-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.agreement-step-nav .btn-primary { margin-left: auto; min-width: 7rem; font-weight: 700; }
.agreement-step-missing { color: #9b1c1c; font-weight: 600; margin: .75rem 0 0; }
.agreement-welcome { background: #eaf7f8; border-radius: 8px; padding: .7rem .9rem; font-weight: 600; color: var(--ub-teal-deep, #0b4a50); }
.agreement-your-answer { margin: .6rem 0 0; font-weight: 600; color: #1f6b3a; }
a.forms-item-title { text-decoration: underline; }
@media (max-width: 600px) { .forms-item { flex-wrap: wrap; } .forms-status, .forms-open { margin-left: auto; } }
/* Icon and title on one line even when a long title wraps. */
.agreement-section > .home-section-title { flex-wrap: nowrap !important; align-items: flex-start; }

/* Co-op budget lines shown to the mom in charge (2026-10-02): under her own
   My teaching block, or in a small "My budget" box. */
.family-budget-heading { font-size: .9rem; font-weight: 700; color: var(--ub-teal-deep); margin: .6rem 0 .2rem; }
.family-budget-lines { list-style: none; margin: 0; padding: 0; }
.family-budget-lines .family-teaching-budget { font-size: .95rem; padding: .15rem 0; margin: 0; }