/* Pepper redesign — the new nav and pages (Step 2, Founder1 2026-10-16).
   Every colour is a token here; nothing below hardcodes one.

   Colours (Step 6, Founder1's design of 2026-10-20, PEPPER-EXACT-UI-HANDOFF.md): page #edf3f8,
   panels white, text #21384c, borders #cfdee8, blue #195c91, soft blue #eaf3fb, warning
   #fff1d9 / #805317. Secondary text is #5b6e7f, one shade darker than the design's #617789, so it
   reads at 4.5:1 on the blue page as well as on white.

   Dark mode (Phase D, 2026-10-28) is on for every page, in the design's dark palette (the values
   Family today's .pp-x uses: page #172630, panels #243642, text #edf4fa, blue #9bd1ff). It used to
   be held back because the old views put white text on the blue in about fifteen places, and the
   dark blue is light. Now text on a solid fill is a token (--pp-accent-ink, --pp-on-fail here,
   --on-solid in index.html) that turns dark when the fill turns light, and every panel the new
   pages borrow from index.html takes dark values for the same names — so nothing is left drawn in
   a fixed colour. The tokens below stay the light values; the dark pairs and the switch are in
   the "Dark mode beyond Today (Phase D)" block at the end. Family today (.pp-x) keeps its own
   switch and palette, untouched; the Old today view stays light. */
:root{
  --pp-bg:#fff; --pp-page:#edf3f8; --pp-ink:#21384c; --pp-muted:#5b6e7f; --pp-faint:#5b6e7f; --pp-sub:#617789;
  --pp-line:#cfdee8; --pp-line-soft:#e3edf4;
  --pp-accent:#195c91; --pp-accent-ink:#fff; --pp-accent-wash:#eaf3fb; --pp-accent-soft:#cfe2f2;
  --pp-ride:#eaf3fb; --pp-ride-line:#b9d2ee;
  --pp-today:#fff8e6; --pp-shared:#f6f4fb; --pp-shared-line:#d9d2ee;
  --pp-warn:#805317; --pp-warn-bg:#fff1d9; --pp-ok:#286a50; --pp-good:#286a50; --pp-good-bg:#e3f4e8;
  --pp-fail:#a3352b; --pp-fail-bg:#f9ecea; --pp-fail-line:#e7c0ba;
  --pp-focus:#195c91; --pp-radius:11px; --pp-on-fail:#fff;
}

/* The old tab strip steps aside once the new nav is drawn. It stays in the page: the board's own
   script still lights its buttons and keeps the Needs-you badge, which the new nav mirrors. */
body.pp-on .legacy-tabs{display:none}
/* Rules was never offered on a phone (index.html: body.narrow #tRules) — keep it that way. */
body.narrow .pp-nav-item[data-panel="rules"]{display:none}

.pp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pp-nav button:focus-visible,.pp-page button:focus-visible,.pp-page input:focus-visible,.pp-page summary:focus-visible{outline:2px solid var(--pp-focus);outline-offset:2px}

/* ── nav ─────────────────────────────────────────────────────────────── */
.pp-nav{margin:6px 0 14px}
.pp-nav-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pp-nav-item{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--pp-line);background:var(--pp-bg);color:var(--pp-ink);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.pp-nav-item:hover{border-color:var(--pp-accent)}
.pp-nav-item.is-current{background:var(--pp-accent);border-color:var(--pp-accent);color:var(--pp-accent-ink)}
.pp-nav-item--extra{font-weight:400;color:var(--pp-muted);background:transparent}
.pp-nav-item--extra.is-current{color:var(--pp-accent-ink)}
.pp-nav-sep{width:1px;height:22px;background:var(--pp-line);margin:0 4px}
.pp-nav-badge{min-width:20px;padding:0 6px;border-radius:999px;background:var(--pp-fail);color:var(--pp-on-fail);font-size:12px;line-height:20px;text-align:center}
.pp-nav-badge[hidden]{display:none}

/* ── page frame ──────────────────────────────────────────────────────── */
.pp-page{background:var(--pp-bg);color:var(--pp-ink);border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:14px}
.pp-page[hidden]{display:none}
.pp-empty,.pp-muted{color:var(--pp-muted);font-size:14px}
.pp-soon h2{font-size:18px;margin-bottom:6px}
.pp-soon p{color:var(--pp-muted);margin-bottom:10px}
.pp-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--pp-line);background:var(--pp-bg);color:var(--pp-ink);font-weight:700;cursor:pointer}
.pp-btn:hover{border-color:var(--pp-accent)}
.pp-btn--icon{width:34px;padding:6px 0;font-size:18px;line-height:1}
.pp-link{background:none;border:0;padding:0;color:var(--pp-accent);font:inherit;font-weight:700;cursor:pointer;text-align:left}
.pp-link:hover{text-decoration:underline}

/* ── toolbar ─────────────────────────────────────────────────────────── */
.pp-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.pp-bar-nav{display:flex;align-items:center;gap:6px;min-width:0}
.pp-bar-title{font-size:18px;margin:0 0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-bar-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pp-date input{font:inherit;padding:5px 8px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink)}
.pp-segs{display:inline-flex;border:1px solid var(--pp-line);border-radius:8px;overflow:hidden}
.pp-seg{padding:6px 12px;border:0;border-right:1px solid var(--pp-line);background:var(--pp-bg);color:var(--pp-ink);font-weight:700;cursor:pointer}
.pp-seg:last-child{border-right:0}
.pp-seg.is-on{background:var(--pp-accent);color:var(--pp-accent-ink)}

/* ── status: failure and freshness ───────────────────────────────────── */
.pp-fail{background:var(--pp-fail-bg);border:1px solid var(--pp-fail-line);color:var(--pp-fail);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:14px}
.pp-stamp{color:var(--pp-faint);font-size:12.5px;margin-top:10px}
.pp-extra{margin:0 0 8px;font-size:14px}

/* ── grids (Day, Week, 2 weeks) ──────────────────────────────────────── */
.pp-scroll{overflow-x:auto;margin-bottom:12px;-webkit-overflow-scrolling:touch}
.pp-grid{display:grid;grid-template-columns:118px repeat(var(--pp-n),minmax(0,1fr));border-top:1px solid var(--pp-line);border-left:1px solid var(--pp-line);min-width:0}
.pp-grid--week{min-width:820px}
.pp-gridrow{display:contents}
.pp-cornerhead,.pp-colhead,.pp-rowhead,.pp-cell{border-right:1px solid var(--pp-line);border-bottom:1px solid var(--pp-line);padding:6px 7px;min-width:0}
.pp-colhead{background:var(--pp-accent-wash);font-size:13px;font-weight:700;color:var(--pp-ink)}
.pp-cornerhead{background:var(--pp-accent-wash)}
.pp-rowhead{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;background:var(--pp-bg)}
.pp-glyph{font-size:18px}
.pp-cell{font-size:13.5px;display:flex;flex-direction:column;gap:4px}
.pp-gridrow--shared > *{background:var(--pp-shared)}
.pp-gridrow--shared .pp-rowhead{font-weight:400;font-style:italic;color:var(--pp-muted);font-size:12.5px}
.is-today.pp-colhead,.is-today.pp-cell{background:var(--pp-today)}
.pp-none{color:var(--pp-faint);font-size:12.5px}

/* ── one event ───────────────────────────────────────────────────────── */
.pp-ev{border:1px solid var(--pp-line-soft);border-radius:7px;background:var(--pp-bg);overflow-wrap:break-word;hyphens:auto}
.pp-ev > summary{list-style:none;cursor:pointer;padding:3px 6px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.pp-ev > summary::-webkit-details-marker{display:none}
.pp-ev[open]{border-color:var(--pp-accent-soft)}
.pp-ev--ride{background:var(--pp-ride);border-color:var(--pp-ride-line)}
.pp-ev--allday{background:var(--pp-accent-wash)}
.pp-mk{flex:none}
.pp-time{color:var(--pp-muted);font-size:12px;white-space:nowrap}
.pp-label{min-width:0}
.pp-more{display:flex;flex-direction:column;gap:2px;padding:4px 6px 6px;color:var(--pp-muted);font-size:12.5px;border-top:1px solid var(--pp-line-soft)}
.pp-full{color:var(--pp-ink);font-weight:700}

/* ── month ───────────────────────────────────────────────────────────── */
.pp-month-head,.pp-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.pp-month-head .pp-colhead{border:1px solid var(--pp-line);border-width:1px 1px 0 0}
.pp-month-head .pp-colhead:first-child{border-left-width:1px}
.pp-month-grid{border-left:1px solid var(--pp-line);border-top:1px solid var(--pp-line)}
.pp-mcell{border-right:1px solid var(--pp-line);border-bottom:1px solid var(--pp-line);min-height:96px;padding:4px 5px;font-size:12.5px;min-width:0;display:flex;flex-direction:column;gap:2px}
.pp-mcell.is-out{background:var(--pp-page);color:var(--pp-faint)}
.pp-mcell.is-today{background:var(--pp-today)}
.pp-mday{align-self:flex-start;background:none;border:0;font:inherit;font-weight:700;color:inherit;cursor:pointer;padding:0 2px;border-radius:4px}
.pp-mday:hover{background:var(--pp-accent-wash)}
.pp-mcell ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.pp-mev{display:flex;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;padding:0 3px}
.pp-mev .pp-label{overflow:hidden;text-overflow:ellipsis}
.pp-more-n{font-size:12px}
/* On a phone the words are hidden, so an event with no marker needs SOMETHING to show it is there. */
.pp-dot{display:none;color:var(--pp-accent);font-weight:700}

/* ── phone cards (Day and Week on a narrow screen) ───────────────────── */
.pp-card{border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:10px;margin-bottom:10px;background:var(--pp-bg)}
.pp-card.is-today{background:var(--pp-today)}
.pp-card--shared{background:var(--pp-shared);border-color:var(--pp-shared-line)}
.pp-card-head{font-size:15px;margin-bottom:6px}
.pp-card-head .pp-rowhead{padding:0;border:0;background:none}
.pp-pwin{margin-top:6px}
.pp-pwin h4{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--pp-muted);margin-bottom:3px}
.pp-pwin .pp-ev+.pp-ev{margin-top:4px}
.pp-prow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px;padding:5px 0;border-top:1px solid var(--pp-line-soft)}
.pp-prow-who .pp-rowhead{padding:0;border:0;background:none;font-size:13.5px}
.pp-prow .pp-ev+.pp-ev{margin-top:4px}

/* ── Family today (Step 3) ───────────────────────────────────────────── */
.pp-tgrid{display:grid;gap:12px;margin-bottom:12px}
.pp-tgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-tcard{border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:12px;background:var(--pp-bg);min-width:0}
.pp-th{font-size:15px;margin:0 0 8px}
.pp-sub{font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--pp-muted);margin:10px 0 4px}
.pp-tcard p{margin:0 0 4px;font-size:14px}
.pp-tday{margin-bottom:12px}
.pp-brief{background:var(--pp-accent-wash);border-color:var(--pp-accent-soft);margin-bottom:12px}
.pp-brief ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.pp-bline{font-size:14px}
.pp-bline summary{cursor:pointer}
.pp-bline.is-warn .pp-bline-t{font-weight:700}
.pp-bline.is-fail{color:var(--pp-fail)}
.pp-checked{margin-left:8px;color:var(--pp-faint);font-size:12px;white-space:nowrap}
.pp-bdetail{list-style:disc;padding-left:20px;margin-top:4px;color:var(--pp-muted);font-size:13px}
.pp-wx{font-size:15px}
.pp-note{color:var(--pp-ink)}
.pp-note.is-warn,.pp-lunch.is-warn{color:var(--pp-fail)}
.pp-src{margin-top:4px;font-size:12.5px;color:var(--pp-muted)}
.pp-src summary{cursor:pointer;color:var(--pp-accent);font-weight:700}
.pp-bag{padding:6px 0;border-top:1px solid var(--pp-line-soft)}
.pp-bag-t{margin-bottom:2px}
.pp-ticks{list-style:none;display:flex;flex-direction:column;gap:2px}
.pp-tick{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;min-height:32px}
.pp-tick input{width:20px;height:20px;flex:none;accent-color:var(--pp-accent)}
.pp-tick input:checked + span{color:var(--pp-muted);text-decoration:line-through}
/* A finger-sized tick on a touch screen (the design's 44px targets; the 2026-11-03 sweep found
   the Activities packing ticks at 32px). */
@media (pointer:coarse){.pp-tick{min-height:44px}}
.pp-notices{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.pp-notices summary{cursor:pointer}
.pp-notices details > p{margin:4px 0 0 2px;color:var(--pp-muted);font-size:13px}
.pp-chip{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--pp-line);font-size:12px;font-weight:700;color:var(--pp-muted);background:var(--pp-bg)}
.pp-chip.is-warn{color:var(--pp-fail);border-color:var(--pp-fail-line);background:var(--pp-fail-bg)}
.pp-chip--proposed{border-style:dashed}
.pp-chip--assigned{color:var(--pp-accent);border-color:var(--pp-accent-soft)}
.pp-chip--accepted{color:var(--pp-accent-ink);background:var(--pp-accent);border-color:var(--pp-accent)}
.pp-rides{background:var(--pp-ride);border-color:var(--pp-ride-line)}
.pp-ride + .pp-ride{margin-top:12px;padding-top:12px;border-top:1px solid var(--pp-ride-line)}
.pp-ride-what{font-size:16px}
.pp-ride-when,.pp-ride-who{font-size:14.5px}
.pp-countdown{color:var(--pp-muted)}
.pp-caret{width:28px;height:28px;padding:0;font-size:14px;vertical-align:middle}
.pp-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.pp-btn--go{margin-top:6px;background:var(--pp-accent);border-color:var(--pp-accent);color:var(--pp-accent-ink);min-height:40px;padding:8px 18px}
.pp-rnote{margin-top:6px;font-size:14px}

/* ── tablet ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px){
  .pp-grid{grid-template-columns:84px repeat(var(--pp-n),minmax(0,1fr))}
  .pp-grid--week{min-width:660px}
  .pp-cornerhead,.pp-colhead,.pp-rowhead,.pp-cell{padding:5px 4px}
  .pp-colhead{font-size:12px}
  .pp-ev > summary{padding:3px 4px}
  .pp-mcell{min-height:80px}
}
/* ── phone ───────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .pp-nav-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .pp-page{padding:10px}
  .pp-bar-title{font-size:16px}
  .pp-bar-tools{width:100%;justify-content:space-between}
  .pp-seg{padding:6px 9px}
  .pp-prow{grid-template-columns:96px minmax(0,1fr)}
  .pp-tgrid--2{grid-template-columns:minmax(0,1fr)}
}
/* body.narrow is the board's own narrow mode (≤700px); treat it the same as a real phone. */
body.narrow .pp-nav-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
body.narrow .pp-bar-tools{width:100%;justify-content:space-between}
body.narrow .pp-prow{grid-template-columns:96px minmax(0,1fr)}
body.narrow .pp-tgrid--2{grid-template-columns:minmax(0,1fr)}

/* ── School + Activities, request box, bulletin board (Step 4) ─────────── */
.pp-kidcols .pp-kid{align-self:start}
.pp-plain{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.pp-class{padding:8px 0;border-top:1px solid var(--pp-line-soft)}
.pp-class:first-of-type{border-top:0;padding-top:0}
.pp-class-t{font-size:15px}
.pp-ok{color:var(--pp-accent);font-size:14px;margin:6px 0}
.pp-chip.is-go{color:var(--pp-accent-ink);background:var(--pp-accent);border-color:var(--pp-accent)}
.pp-chip.is-done{color:var(--pp-accent);border-color:var(--pp-accent-soft);background:var(--pp-accent-wash)}
.pp-rq{margin:12px 0}
.pp-rq-text,.pp-rq-fix textarea{width:100%;font:inherit;padding:8px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink);resize:vertical;margin:6px 0}
.pp-rq-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px}
.pp-rq-row select{font:inherit;padding:5px 8px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink);margin-left:4px}
/* Social's "Year unknown" box was a 20px tap on a phone. */
@media (pointer:coarse){.pp-rq-row>label{display:inline-flex;align-items:center;gap:6px;min-height:44px}}
.pp-rq-file input{font-size:13px;max-width:100%}
.pp-rq-list{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.pp-rq-head{font-size:14.5px}
.pp-rq-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.pp-rq-btns .pp-btn--go{margin-top:0}
.pp-rq-fix{margin-top:6px}
.pp-rq-orig{white-space:pre-wrap;color:var(--pp-ink)}
.pp-rq-corr{margin-top:4px}
.pp-bb{margin-bottom:12px}
.pp-bb li{line-height:1.45}
.pp-social-extra{margin-top:16px}
.pp-social-extra:empty{display:none}

/* ── whose schedule: person tabs (Founder1 2026-10-19) ───────────────────
   All seven people and "All" are always in view: the tabs wrap onto a second line instead of
   scrolling sideways (Founder1: "it should be 7 tabs" — a sideways row hid three of them on a
   phone). Each tab is a full 44px touch target. Shared by Schedule and Family today. */
.pp-ptabs{display:flex;flex-wrap:wrap;gap:6px;padding:2px 2px 6px;margin:0 0 10px;width:100%}
.pp-ptab{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 14px;border:1px solid var(--pp-line);border-radius:999px;background:var(--pp-bg);color:var(--pp-ink);font:inherit;font-weight:700;white-space:nowrap;cursor:pointer}
.pp-ptab:hover{border-color:var(--pp-accent)}
.pp-ptab.is-on{background:var(--pp-accent);border-color:var(--pp-accent);color:var(--pp-accent-ink)}
.pp-ptab:focus-visible{outline:3px solid var(--pp-accent-soft);outline-offset:2px}
.pp-ptab .pp-glyph{font-size:16px}
/* Phone: tighter tabs so the eight fit in two or three lines. */
@media (max-width: 640px){ .pp-ptab{padding:0 10px;gap:4px} }
body.narrow .pp-ptab{padding:0 10px;gap:4px}

/* ── Upcoming, Social birthdays, the Schedule's birthday layer (Step 5) ─── */
.pp-upc-needs{margin-bottom:14px}
.pp-upc-needs[hidden]{display:none}
.pp-upc-since{margin:0 0 10px}
.pp-upc-week p{font-size:14px}
.pp-upc-group{margin-bottom:12px}
.pp-checked-line{font-size:12.5px;color:var(--pp-faint);margin:-4px 0 8px}
.pp-checked-line.is-fail{color:var(--pp-fail)}
.pp-upc-cards,.pp-bdays,.pp-plans{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
.pp-upc-card summary,.pp-bdays summary,.pp-plans summary{cursor:pointer}
.pp-upc-card p,.pp-plans details p{margin:4px 0 0 2px;font-size:13.5px}
.pp-social-top{margin-bottom:16px}
.pp-social-top:empty{display:none}
.pp-social-h{margin-top:4px}
.pp-bday-row details{padding:4px 0;border-top:1px solid var(--pp-line-soft)}
.pp-bday-add{margin-top:10px}
.pp-bday-add input[type=text],.pp-bday-add input[type=number],.pp-bday-add select{font:inherit;padding:5px 8px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink);margin-left:4px}
.pp-bday{display:inline-block;font-size:12px;color:var(--pp-accent);font-weight:700}
.pp-bday--head{display:block;font-weight:400}
.pp-bday--month{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-bday-line{margin:0 0 8px;font-size:14px}

/* ── Text Messages (Founder1, 2026-10-20) ───────────────────────────────── */
.pp-tx-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.pp-tx-title{font-size:26px;margin:0}
.pp-tx-sub{margin:2px 0 0;font-size:16px}
.pp-tx-starts{display:flex;flex-wrap:wrap;gap:8px}
.pp-tx-start{min-height:44px;padding:8px 14px;color:var(--pp-accent)}
.pp-tx-start.is-on{background:var(--pp-accent-wash);border-color:var(--pp-accent)}
.pp-tx-cols{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:14px;align-items:start}
body.narrow .pp-tx-cols{grid-template-columns:1fr}
.pp-tx-list,.pp-tx-editor{border:1px solid var(--pp-line);border-radius:var(--pp-radius);background:var(--pp-bg)}
.pp-tx-editor{padding:16px}
.pp-tx-tabs{display:flex;gap:4px;border-bottom:1px solid var(--pp-line);padding:0 8px}
.pp-tx-tab{background:none;border:0;border-bottom:3px solid transparent;padding:12px 10px;font:inherit;font-weight:700;color:var(--pp-muted);cursor:pointer}
.pp-tx-tab.is-on{color:var(--pp-accent);border-bottom-color:var(--pp-accent)}
.pp-tx-n{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;background:var(--pp-accent-wash);color:var(--pp-accent);font-size:13px;text-align:center}
.pp-tx-none{padding:14px}
.pp-tx-row{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--pp-line-soft);padding:12px 14px;font:inherit;color:var(--pp-ink);cursor:pointer}
.pp-tx-row:hover{background:var(--pp-accent-wash)}
.pp-tx-row.is-on{background:var(--pp-accent-wash);border-left-color:var(--pp-accent)}
.pp-tx-row-t{font-weight:700;font-size:16px;grid-column:1}
.pp-tx-row-m{color:var(--pp-muted);font-size:14px;grid-column:1}
.pp-tx-row .pp-tx-pill{grid-column:1;justify-self:start;margin-top:4px}
.pp-tx-chev{grid-column:2;grid-row:1/4;align-self:center;color:var(--pp-muted);font-size:20px}
.pp-tx-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:700}
.pp-tx-pill--warn{background:var(--pp-warn-bg);color:var(--pp-warn)}
.pp-tx-pill--sent{background:var(--pp-good-bg);color:var(--pp-good)}
.pp-tx-ehead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:10px}
.pp-tx-etitle{font-size:22px;margin:0}
.pp-tx-ehead p{margin:2px 0 0}
.pp-tx-cal{padding:5px 12px;border-radius:999px;font-size:13.5px;font-weight:700;white-space:nowrap}
.pp-tx-cal--ok{background:var(--pp-good-bg);color:var(--pp-good)}
.pp-tx-cal--muted{background:var(--pp-line-soft);color:var(--pp-muted)}
.pp-tx-cal--warn{background:var(--pp-warn-bg);color:var(--pp-warn)}
.pp-tx-field{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;margin:12px 0}
body.narrow .pp-tx-field{grid-template-columns:64px 1fr}
.pp-tx-label{font-weight:700;display:block}
.pp-tx-to{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;border:1px solid var(--pp-line);border-radius:8px;padding:9px 12px}
.pp-tx-to .pp-link{margin-left:auto}
.pp-tx-src{color:var(--pp-faint);font-size:12.5px}
.pp-tx-choices{display:flex;flex-wrap:wrap;gap:6px}
.pp-tx-msg{width:100%;box-sizing:border-box;min-height:120px;margin-top:6px;padding:12px;border:1px solid var(--pp-line);border-radius:8px;font:inherit;font-size:16px;line-height:1.5;color:var(--pp-ink);background:var(--pp-bg);resize:vertical}
.pp-tx-msg[readonly]{background:var(--pp-line-soft)}
.pp-tx-save{min-height:18px;margin:4px 0 0;font-size:13px;color:var(--pp-muted)}
.pp-tx-policy{margin:4px 0 10px}
.pp-tx-missing{background:var(--pp-warn-bg);color:var(--pp-warn);border-radius:8px;padding:8px 10px;font-size:14px}
.pp-tx-review{background:var(--pp-warn-bg);color:var(--pp-warn);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.pp-tx-review p{margin:0 0 6px}
.pp-tx-kept{margin:-4px 0 8px}
.pp-tx-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
body.narrow .pp-tx-actions{grid-template-columns:1fr}
.pp-tx-actions .pp-btn{display:flex;align-items:center;justify-content:center;min-height:48px;font-size:16px;text-decoration:none;margin:0}
.pp-tx-open{color:var(--pp-accent);border-color:var(--pp-accent)}
.pp-tx-noopen{align-self:center;text-align:center}
.pp-tx-sent{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--pp-line);margin-top:16px;padding-top:14px}
.pp-tx-sent .pp-btn{min-height:44px;padding:8px 22px;color:var(--pp-accent)}
.pp-tx-sentbox{background:var(--pp-good-bg);color:var(--pp-good);border-radius:8px;padding:12px;margin-top:12px}
.pp-tx-sentbox p{margin:0 0 8px}
.pp-tx-foot{margin-top:12px}
.pp-tx-form{border:1px solid var(--pp-line);border-radius:8px;padding:12px;margin:-4px 0 12px;display:grid;gap:8px}
.pp-tx-form label{display:grid;gap:4px;font-weight:700;font-size:14px}
.pp-tx-form input,.pp-tx-form select,.pp-tx-tripform input,.pp-tx-tripform select{font:inherit;font-weight:400;padding:8px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink)}
.pp-tx-formbtns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pp-tx-picker{border:1px solid var(--pp-accent-soft);background:var(--pp-accent-wash);border-radius:var(--pp-radius);padding:12px 14px;margin-bottom:14px}
.pp-tx-pickhead{display:flex;justify-content:space-between;align-items:center}
.pp-tx-pickhead h3{margin:0 0 8px;font-size:17px}
.pp-tx-tripform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:6px}
.pp-tx-tripform label{display:grid;gap:4px;font-weight:700;font-size:14px}
.pp-tx-evlist{list-style:none;margin:8px 0;padding:0}
.pp-tx-evlist li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--pp-line)}
.pp-tx-ev{min-width:0;flex:1 1 260px}
/* Phone: the page menu wraps onto extra lines instead of scrolling sideways (Founder1
   2026-10-20 — "why does the phone view have a scroll bar"). Same idea as the person tabs. */
@media (max-width: 640px){
  .pp-nav-row{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;gap:5px}
  .pp-nav-item{padding:6px 10px;gap:4px;font-size:13px}
  /* The "Old … view" leftovers from the rebuild stay on the web view; on a phone they only push
     the page down. One that is open right now still shows, so nobody loses their place. */
  .pp-nav-sep,.pp-nav-item--extra:not(.is-current){display:none}
}
body.narrow .pp-nav-row{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;gap:5px}
body.narrow .pp-nav-item{padding:6px 10px;gap:4px;font-size:13px}
body.narrow .pp-nav-sep,body.narrow .pp-nav-item--extra:not(.is-current){display:none}
.pp-weather .pp-wear{margin:6px 0 0}

/* ── Trips, Almanac, New event (Step 7) ──────────────────────────────────
   The Almanac's old sections and the New event form are MOVED onto the new pages (their buttons
   keep the board's wiring). They are restyled by pointing the old page's colour names at the new
   tokens inside the host — the old rules then draw in blue and white without being rewritten. */
.pp-old-host{
  --surface:var(--pp-bg); --page:var(--pp-page); --ink:var(--pp-ink); --ink-2:var(--pp-muted); --muted:var(--pp-muted);
  --hairline:var(--pp-line); --hairline-soft:var(--pp-line-soft); --rail:var(--pp-line);
  --accent:var(--pp-accent); --accent-dark:var(--pp-accent); --accent-wash:var(--pp-accent-wash);
  --plum:var(--pp-accent); --plum-bg:var(--pp-accent-wash); --plum-line:var(--pp-accent-soft);
  --urgent:var(--pp-fail); --urgent-bg:var(--pp-fail-bg); --urgent-line:var(--pp-fail-line);
  --focus:var(--pp-focus);
}
.pp-old-host .sec-label{font-size:15px;margin:16px 0 8px}
.pp-old-host .sec-label:first-child{margin-top:12px}
.pp-old-host .form-card{border-radius:var(--pp-radius);max-width:640px}
.pp-old-host .submit{background:var(--pp-accent);color:var(--pp-accent-ink);border:1px solid var(--pp-accent);border-radius:8px;min-height:44px;padding:8px 18px;font-weight:700;cursor:pointer;margin-top:12px}
.pp-old-host input:focus-visible,.pp-old-host select:focus-visible,.pp-old-host textarea:focus-visible,.pp-old-host button:focus-visible{outline:2px solid var(--pp-focus);outline-offset:2px}
.pp-ne-title{margin:0 0 10px;display:block}
.pp-back{margin:0 0 10px}

/* form fields drawn by the new pages */
.pp-field{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:700;margin:0 0 10px;min-width:0}
.pp-field input,.pp-field select,.pp-field textarea{font:inherit;font-weight:400;font-size:16px;padding:8px 10px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink);min-height:44px;width:100%}
.pp-field textarea{min-height:64px;resize:vertical}
.pp-field input:focus-visible,.pp-field select:focus-visible,.pp-field textarea:focus-visible,.pp-page select:focus-visible,.pp-page textarea:focus-visible,.pp-page a:focus-visible{outline:2px solid var(--pp-focus);outline-offset:2px}
.pp-fieldrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pp-fieldrow--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-btn{min-height:36px}

/* Trips */
.pp-trip-lead{margin:0 0 10px}
.pp-trip-add{margin-bottom:12px;max-width:640px}
.pp-trips{display:flex;flex-direction:column;gap:14px}
.pp-trip{border-left:4px solid var(--pp-accent)}
.pp-trip.is-past{border-left-color:var(--pp-line)}
.pp-trip-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.pp-trip-head .pp-th{margin:0 6px 0 0;font-size:17px}
.pp-trip-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 14px;margin:0 0 8px}
.pp-trip-facts dt{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--pp-muted)}
.pp-trip-facts dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.pp-trip-note{font-size:14px;margin:0 0 6px;color:var(--pp-ink)}
.pp-trip-note.is-warn{color:var(--pp-fail);font-weight:700}
.pp-trip-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.pp-trip-sec{min-width:0;padding-top:2px}
.pp-trip-sec p{font-size:14px;margin:0 0 4px}
.pp-trip-items{list-style:none;display:flex;flex-direction:column;gap:8px}
.pp-trip-item{border:1px solid var(--pp-line-soft);border-radius:8px;padding:8px 10px}
.pp-trip-item[hidden]{display:none}
.pp-trip-item.is-warn{border-color:var(--pp-fail-line)}
.pp-trip-item-t{font-weight:700}
.pp-trip-school li.is-warn{color:var(--pp-fail)}
.pp-meter{height:8px;border-radius:999px;background:var(--pp-accent-wash);overflow:hidden;margin:2px 0 6px}
.pp-meter i{display:block;height:100%;background:var(--pp-accent)}
.pp-trip-okay{border:1px solid var(--pp-accent-soft);background:var(--pp-accent-wash);border-radius:8px;padding:10px;margin-top:6px}
.pp-trip-retire{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--pp-line-soft)}
.pp-trip-retire p{width:100%;font-size:14px;margin:0}
.pp-ok{color:var(--pp-accent)}

/* Almanac */
.pp-alm-lead{margin:0 0 10px;line-height:1.9}
.pp-alm-months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:6px}
.pp-alm-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.pp-alm-row{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:6px;font-size:14px}
.pp-alm-row.is-warn .pp-alm-t{font-weight:700}
.pp-alm-icon{grid-row:span 2}
.pp-alm-t{overflow-wrap:anywhere}
.pp-alm-when{grid-column:2;color:var(--pp-muted);font-size:12.5px}
.pp-alm-row.is-warn .pp-alm-when{color:var(--pp-fail)}
.pp-alm-rules{margin-top:16px;padding-top:12px;border-top:1px solid var(--pp-line-soft);font-size:14px}
.pp-alm-rules:empty{display:none}

@media (max-width: 1000px){
  .pp-alm-months{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .pp-alm-months,.pp-trip-cols,.pp-trip-facts,.pp-fieldrow{grid-template-columns:minmax(0,1fr)}
  /* Rules is desk work (Founder1 2026-08-03) — never offered on a phone, same as before. */
  .pp-alm-rules{display:none}
}
body.narrow .pp-alm-months,body.narrow .pp-trip-cols,body.narrow .pp-trip-facts,body.narrow .pp-fieldrow{grid-template-columns:minmax(0,1fr)}
body.narrow .pp-alm-rules{display:none}
/* The page title already says "New event"; the old form's own heading would say it twice. */
#ppNewEventForm > .sec-label:first-child{display:none}
/* ── Family today in Founder1's design (2026-10-20, PEPPER-EXACT-UI-HANDOFF.md) ──────────────────
   Copied from the design's final CSS (pepper-phone-child-rides.html): its palette as light-dark()
   pairs, the system font at 14px/1.45, 11px panels, the 4px blue ride line. Scoped to .pp-x so
   the old view ("Old today view") and the other pages are untouched. */
.pp-x{color-scheme:light;--x-bg:light-dark(#edf3f8,#172630);--x-paper:light-dark(#fff,#243642);--x-ink:light-dark(#21384c,#edf4fa);--x-sub:light-dark(#617789,#b6c8d5);--x-line:light-dark(#cfdee8,#496071);--x-blue:light-dark(#195c91,#9bd1ff);--x-soft:light-dark(#eaf3fb,#29495e);--x-amber:light-dark(#fff1d9,#514227);--x-warn:light-dark(#805317,#ffd398);--x-green:light-dark(#286a50,#9fdbbe);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--x-ink);background:var(--x-bg);padding:22px;border-radius:11px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pp-x{color-scheme:dark}}
:root[data-theme="dark"] .pp-x{color-scheme:dark}
.pp-x *{box-sizing:border-box}
.pp-x h1{font-size:25px;letter-spacing:-.6px;margin:0}
.pp-x h2{font-size:17px;margin:0}
.pp-x h3{font-size:15px;margin:0}
.pp-x p{margin:6px 0}
.pp-x small{font-size:12px;color:var(--x-sub)}
.pp-x-title{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.pp-x-link{font:inherit;font-size:12px;color:var(--x-blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.pp-x-weather{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:15px 18px;background:var(--x-soft);border-radius:9px;margin-bottom:18px}
.pp-x-panel{background:var(--x-paper);border:1px solid var(--x-line);border-radius:11px;overflow:hidden;margin-bottom:16px}
.pp-x-head{padding:14px 17px;border-bottom:1px solid var(--x-line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pp-x-body{padding:17px}
.pp-x-pad{padding:10px 14px;margin:0}
.pp-x-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pp-x-two>.pp-x-panel{margin-bottom:0}
.pp-x>.pp-x-two{margin-bottom:16px}
.pp-x-tag{display:inline-block;padding:4px 7px;border-radius:4px;background:var(--x-soft);color:var(--x-blue);font-size:11px;margin:0}
.pp-x-tag.is-warn{background:var(--x-amber);color:var(--x-warn)}
.pp-x-row{display:flex;justify-content:space-between;align-items:start;gap:14px;padding:12px 0;border-bottom:1px solid var(--x-line)}
.pp-x-row:first-child{padding-top:0}
.pp-x-row:last-child{border:0;padding-bottom:0}
.pp-x-sub{font-size:12px;color:var(--x-sub);margin:6px 0}
.pp-x-pe{font-size:13px;white-space:nowrap}
.pp-x-ae{white-space:nowrap}
.pp-x-none{color:var(--x-sub)}
.pp-x-scroll{overflow-x:auto}
.pp-x-table{width:100%;border-collapse:collapse;font-size:12px;background:var(--x-paper);min-width:650px;table-layout:fixed}
.pp-x-table th{text-align:left;background:var(--x-soft);padding:12px;color:var(--x-ink)}
.pp-x-table th:first-child{width:110px}
.pp-x-table td{padding:11px;border-bottom:1px solid var(--x-line);vertical-align:top}
.pp-x-table td+td,.pp-x-table th+th{border-left:2px solid light-dark(#91aabe,#7d94a5)}
.pp-x-table td small{display:block;margin-top:4px;font-size:11px}
.pp-x-periods{display:none}
.pp-x details{margin-top:10px}
.pp-x summary{min-height:34px;color:var(--x-blue);font-size:13px;cursor:pointer}
.pp-x-check{display:flex;align-items:center;gap:9px;min-height:40px}
.pp-x-check input{width:18px;height:18px;accent-color:var(--x-blue)}
.pp-x-check input:checked+span{text-decoration:line-through;color:var(--x-sub)}
.pp-x-insight{border-left:4px solid var(--x-blue);background:var(--x-soft);padding:16px 18px;border-radius:0 9px 9px 0;margin-bottom:18px}
.pp-x-insight details{margin-top:6px}
.pp-x-insight small{display:block}
.pp-x-ride{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;border-left:4px solid var(--x-blue)}
.pp-x-ride .pp-x-full{flex-basis:100%}
.pp-x-ride small{display:block}
.pp-x-driver{display:flex;align-items:center;gap:8px;font-size:12px;margin:0}
.pp-x-driver select{font:inherit;font-size:14px;font-weight:650;padding:10px;color:var(--x-blue);background:var(--x-soft);border:1px solid var(--x-line);border-radius:6px}
.pp-x button:focus-visible,.pp-x select:focus-visible,.pp-x input:focus-visible,.pp-x summary:focus-visible{outline:2px solid var(--x-blue);outline-offset:2px}
@media (pointer:coarse){.pp-x summary,.pp-x-check{min-height:44px}}
/* Phone (the design's final cascade). */
@media (max-width: 700px){
  .pp-x{padding:16px 12px}
  .pp-x h1{font-size:23px}
  .pp-x-title{margin-bottom:14px;gap:6px}
  .pp-x-title>small{font-size:11px}
  .pp-x-two{grid-template-columns:minmax(0,1fr);gap:0}
  .pp-x>.pp-x-two>.pp-x-panel{margin-bottom:16px}
  .pp-x>.pp-x-two{margin-bottom:0}
  .pp-x-body.pp-x-two{gap:12px}
  .pp-x-body{padding:14px}
  .pp-x-head{padding:12px 14px;gap:6px}
  .pp-x-weather{padding:12px;gap:5px}
  .pp-x-weather>*{flex-basis:100%}
  .pp-x-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:8px;background:var(--x-paper);border-bottom:2px solid var(--x-line)}
  .pp-x-periods button{font:inherit;font-size:12px;color:var(--x-ink);background:none;border:0;padding:7px 2px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;gap:2px;cursor:pointer}
  .pp-x-periods button small{font-size:11px}
  .pp-x-periods button[aria-checked="true"]{background:var(--x-soft);color:var(--x-blue);font-weight:650}
  .pp-x-day .pp-x-table{min-width:0;table-layout:auto}
  .pp-x-day .pp-x-table thead{display:none}
  .pp-x-day .pp-x-table tbody{display:block}
  .pp-x-day .pp-x-table tr{display:grid;grid-template-columns:105px minmax(0,1fr);border-bottom:1px solid var(--x-line)}
  .pp-x-day .pp-x-table td{display:none;padding:12px 9px;border-bottom:0;min-width:0;font-size:13px}
  .pp-x-day .pp-x-table td:first-child{display:block;background:var(--x-soft);font-weight:600}
  .pp-x-day[data-period="morning"] td[data-p="morning"],.pp-x-day[data-period="midday"] td[data-p="midday"],
  .pp-x-day[data-period="afternoon"] td[data-p="afternoon"],.pp-x-day[data-period="evening"] td[data-p="evening"]{display:block}
  .pp-x-row{flex-wrap:wrap;gap:7px}
  .pp-x-ride{gap:10px}
  .pp-x-driver{width:100%;justify-content:space-between}
  .pp-x-driver select{min-height:44px}
  .pp-x summary{min-height:44px;padding:9px 0}
  .pp-x-check{min-height:44px}
}

/* The same phone layout when the Phone/Web switch is on Phone, at any screen width — so the
   Morning/Midday/Afternoon/Evening buttons flip the day there too (Founder1, 2026-10-20). */
body.narrow .pp-x{padding:16px 12px}
body.narrow .pp-x h1{font-size:23px}
body.narrow .pp-x-title{margin-bottom:14px;gap:6px}
body.narrow .pp-x-title>small{font-size:11px}
body.narrow .pp-x-two{grid-template-columns:minmax(0,1fr);gap:0}
body.narrow .pp-x>.pp-x-two>.pp-x-panel{margin-bottom:16px}
body.narrow .pp-x>.pp-x-two{margin-bottom:0}
body.narrow .pp-x-body.pp-x-two{gap:12px}
body.narrow .pp-x-body{padding:14px}
body.narrow .pp-x-head{padding:12px 14px;gap:6px}
body.narrow .pp-x-weather{padding:12px;gap:5px}
body.narrow .pp-x-weather>*{flex-basis:100%}
body.narrow .pp-x-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:8px;background:var(--x-paper);border-bottom:2px solid var(--x-line)}
body.narrow .pp-x-periods button{font:inherit;font-size:12px;color:var(--x-ink);background:none;border:0;padding:7px 2px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;gap:2px;cursor:pointer}
body.narrow .pp-x-periods button small{font-size:11px}
body.narrow .pp-x-periods button[aria-checked="true"]{background:var(--x-soft);color:var(--x-blue);font-weight:650}
body.narrow .pp-x-day .pp-x-table{min-width:0;table-layout:auto}
body.narrow .pp-x-day .pp-x-table thead{display:none}
body.narrow .pp-x-day .pp-x-table tbody{display:block}
body.narrow .pp-x-day .pp-x-table tr{display:grid;grid-template-columns:105px minmax(0,1fr);border-bottom:1px solid var(--x-line)}
body.narrow .pp-x-day .pp-x-table td{display:none;padding:12px 9px;border-bottom:0;min-width:0;font-size:13px}
body.narrow .pp-x-day .pp-x-table td:first-child{display:block;background:var(--x-soft);font-weight:600}
body.narrow .pp-x-day[data-period="morning"] td[data-p="morning"],body.narrow .pp-x-day[data-period="midday"] td[data-p="midday"],body.narrow .pp-x-day[data-period="afternoon"] td[data-p="afternoon"],body.narrow .pp-x-day[data-period="evening"] td[data-p="evening"]{display:block}
body.narrow .pp-x-row{flex-wrap:wrap;gap:7px}
body.narrow .pp-x-ride{gap:10px}
body.narrow .pp-x-driver{width:100%;justify-content:space-between}
body.narrow .pp-x-driver select{min-height:44px}
body.narrow .pp-x summary{min-height:44px;padding:9px 0}
body.narrow .pp-x-check{min-height:44px}
@media (prefers-reduced-motion: no-preference){.pp-x-periods button{transition:background-color .15s ease,color .15s ease}}
/* The new Family today page sits on the design's own page color; the old view keeps its own. */
#ppToday:has(.pp-x){background:transparent;border:0;padding:0;box-shadow:none}
/* "Old today view" stays in the phone menu so the two can be compared. */


/* ── Step 6: the phone menu, the header, the design's geometry (Founder1 2026-10-20) ────────────
   Phone (≤640px, or the board's own narrow mode): one row — Today · Schedule · Upcoming · More —
   in equal columns, 2px apart, 44px targets, 9px corners. More opens a 280px panel (never wider
   than the screen) with two columns of 48px links. Wider screens keep the full row of names. */
.pp-qnav{display:none}
.pp-q,.pp-more-link{font:inherit;color:var(--pp-muted);background:none;border:0;cursor:pointer;text-decoration:none}
.pp-q{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:10px 4px;border-radius:9px;font-size:13px;font-weight:500;white-space:nowrap;min-width:0}
.pp-q .pp-nav-badge{position:absolute;top:2px;right:2px;min-width:16px;padding:0 4px;font-size:10.5px;line-height:16px}
.pp-q.is-current,.pp-q.is-open{background:var(--pp-accent-wash);color:var(--pp-accent);font-weight:650}
.pp-q--more::after{content:"⌄";font-size:14px;margin-left:3px}
/* Named pp-moremenu, not pp-more: pp-more is an event's own details box (schedule.js). */
.pp-moremenu{position:absolute;top:calc(100% - 4px);right:10px;z-index:20;width:280px;max-width:calc(100vw - 24px);background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:14px;padding:9px;box-shadow:0 12px 30px rgba(33,56,76,.15)}
.pp-moremenu[hidden]{display:none}
.pp-more-pages{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.pp-more-link{display:flex;align-items:center;gap:6px;min-height:48px;padding:12px;border-radius:8px;font-size:14px;color:var(--pp-ink);text-align:left}
.pp-more-link:hover{background:var(--pp-page)}
.pp-more-link.is-current{background:var(--pp-accent-wash);color:var(--pp-accent);font-weight:650}
.pp-more-h{margin:8px 4px 2px;font-size:11px;color:var(--pp-muted)}
.pp-more-me{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:10px 4px 2px;border-top:1px solid var(--pp-line);font-size:12px;color:var(--pp-muted)}
.pp-more-me .pp-link{min-height:44px;padding:0 6px}
.pp-q:focus-visible,.pp-more-link:focus-visible,.pp-more-me button:focus-visible{outline:2px solid var(--pp-focus);outline-offset:-2px}
@media (prefers-reduced-motion: no-preference){.pp-q,.pp-more-link,.pp-nav-item{transition:background-color .15s ease,color .15s ease}}
/* The big "N things left today" line is gone: Pepper's brief on Family today says what is left. */
body.pp-on .eve-line{display:none}
/* The ask box's answer area takes no room until there is an answer in it. */
body.pp-on #askOut:empty{margin:0}

@media (max-width: 640px){
  .pp-nav{position:relative;margin:0 -12px 12px;background:var(--pp-bg);border-bottom:1px solid var(--pp-line)}
  .pp-nav-row{display:none}
  .pp-qnav{display:grid;grid-template-columns:repeat(var(--pp-q),minmax(0,1fr));gap:2px;padding:5px 10px 9px}
  body.pp-on .whoami{display:none}
  /* Only the wordmark above the menu (the design): the date, the "Updated" stamp and the ask box
     step out of the header — each page carries its own date and stamp, and the ask box is in More. */
  body.pp-on #dateLbl,body.pp-on #genStamp,body.pp-on #board>.ask-bar{display:none}
  body.pp-on .topbar{padding:17px 17px 8px;margin:-16px -12px 0;background:var(--pp-bg)}
  /* The design's page padding (16px 12px). body.pp-on outranks the board's own .wrap rule, which
     loads after this file. */
  body.pp-on .wrap{padding:16px 12px}
  .pp-page{padding:14px 12px}
}
body.narrow .pp-nav{position:relative;margin:0 -12px 12px;background:var(--pp-bg);border-bottom:1px solid var(--pp-line)}
body.narrow .pp-nav-row{display:none}
body.narrow .pp-qnav{display:grid;grid-template-columns:repeat(var(--pp-q),minmax(0,1fr));gap:2px;padding:5px 10px 9px}
body.narrow.pp-on .whoami,body.narrow.pp-on #dateLbl,body.narrow.pp-on #genStamp,body.narrow.pp-on #board>.ask-bar{display:none}

/* ── Step 6: the Schedule on a phone ───────────────────────────────────────────────────────────
   Day: one part of the day at a time for all seven people (the person column is 105px). Week,
   2 weeks and Month keep their grid and scroll sideways inside their own box, with the person
   column held in place — the page itself never scrolls sideways, and no text is shrunk. */
.pp-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:8px;margin:0 0 8px;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius)}
.pp-period{font:inherit;font-size:12px;color:var(--pp-ink);background:none;border:0;padding:7px 2px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:6px;cursor:pointer}
.pp-period small{font-size:11px;color:var(--pp-muted)}
.pp-period-n{font-size:11px;font-weight:650;color:var(--pp-accent)}
.pp-period-n.is-none{font-weight:400;color:var(--pp-muted)}
.pp-period[aria-checked="true"]{background:var(--pp-accent-wash);color:var(--pp-accent);font-weight:650}
.pp-period:focus-visible{outline:2px solid var(--pp-focus);outline-offset:-2px}
@media (prefers-reduced-motion: no-preference){.pp-period{transition:background-color .15s ease,color .15s ease}}
.pp-pday{border:1px solid var(--pp-line);border-radius:var(--pp-radius);overflow:hidden;background:var(--pp-bg)}
.pp-pday-row{display:grid;grid-template-columns:105px minmax(0,1fr);border-bottom:1px solid var(--pp-line)}
.pp-pday-row:last-child{border-bottom:0}
.pp-pday-who{background:var(--pp-accent-wash);padding:12px 9px;font-weight:600;font-size:13px;display:flex;align-items:flex-start;gap:5px;min-width:0;overflow-wrap:anywhere}
.pp-pday-who .pp-glyph{font-size:13px}
.pp-pday-ev{padding:9px;display:flex;flex-direction:column;gap:4px;font-size:13px;min-width:0}
.pp-pday-row--shared .pp-pday-who{background:var(--pp-shared);font-weight:400;font-style:italic}
.pp-scroll .pp-rowhead,.pp-scroll .pp-cornerhead{position:sticky;left:0;z-index:1}
.pp-scroll .pp-cornerhead{background:var(--pp-accent-wash)}
@media (max-width: 640px){
  .pp-grid,.pp-grid--week{grid-template-columns:105px repeat(var(--pp-n),minmax(120px,1fr));min-width:calc(105px + var(--pp-n) * 120px)}
  .pp-scroll .pp-rowhead{font-size:13px}
  .pp-month{overflow-x:auto}
  .pp-month-head,.pp-month-grid{min-width:640px}
}
body.narrow .pp-grid,body.narrow .pp-grid--week{grid-template-columns:105px repeat(var(--pp-n),minmax(120px,1fr));min-width:calc(105px + var(--pp-n) * 120px)}
body.narrow .pp-month{overflow-x:auto}
body.narrow .pp-month-head,body.narrow .pp-month-grid{min-width:640px}
.pp-more-ask{display:flex;gap:6px;margin-top:8px;padding:10px 4px 0;border-top:1px solid var(--pp-line)}
.pp-more-ask input{flex:1;min-width:0;font:inherit;font-size:16px;min-height:44px;padding:8px 10px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink)}
.pp-more-ask .pp-btn{min-height:44px}
.pp-more-ask input:focus-visible,.pp-more-ask button:focus-visible{outline:2px solid var(--pp-focus);outline-offset:2px}
/* Family today, matched to the design as Founder1 sees it (2026-10-20 check against her screenshot):
   - headings and names render at medium weight, not bold;
   - on a phone the page runs edge to edge (the board's 20px side margin is cancelled), so the
     cards sit 12px from the screen edge as in the design;
   - the date and its "Updated" line share one row. */
.pp-x h1,.pp-x h2,.pp-x h3,.pp-x strong,.pp-x b{font-weight:500}
.pp-x-periods button[aria-checked="true"]{font-weight:650}
.pp-x-title{flex-wrap:nowrap}
.pp-x-title>h1{min-width:0}
.pp-x-title>small{white-space:nowrap}
@media (max-width: 700px){ .pp-x{margin-inline:-20px;border-radius:0} }
body.narrow .pp-x{margin-inline:-20px;border-radius:0}
/* At phone width the board's side padding is the design's 12px (Step 6 shell), not 20px — so
   Family today's edge-to-edge pull is 12px there. Between 641 and 700px it stays 20px. */
@media (max-width: 640px){ body.pp-on .pp-x{margin-inline:-12px} }

/* Phone mode on a computer (the Phone/Web switch): the design's phone page padding and header,
   as a real phone gets them at ≤640px — and Today's edge-to-edge pull matches that 12px. */
body.phone-view.pp-on .wrap{padding:16px 12px}
body.phone-view.pp-on .topbar{padding:17px 17px 8px;margin:-16px -12px 0;background:var(--pp-bg)}
body.phone-view .pp-page{padding:14px 12px}
body.phone-view.pp-on .pp-x{margin-inline:-12px}
/* ── The old day view's ride controls, on the event (Founder1 2026-10-20) ──────────────────── */
.pp-ev-warn{color:var(--pp-warn);font-weight:650}
.pp-ev--noride{border-color:var(--pp-warn-bg);box-shadow:inset 3px 0 0 var(--pp-warn)}
.pp-ev-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.pp-ev-move{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--pp-muted)}
.pp-btn--sm{min-height:36px;padding:4px 10px;font-size:13px}
@media (pointer:coarse){.pp-btn--sm{min-height:44px}}
/* Who can drive and coverage, at the bottom of Schedule (from the retired old day view). */
.pp-sched-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.pp-sched-side[hidden]{display:none}
.pp-sched-side .box{background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:12px;min-width:0}
.pp-sched-side .box-h{font-weight:650;font-size:15px;margin-bottom:8px;color:var(--pp-ink)}
.pp-sched-side .ico-white{filter:none}
@media (max-width:640px){.pp-sched-side{grid-template-columns:minmax(0,1fr)}}
body.narrow .pp-sched-side{grid-template-columns:minmax(0,1fr)}
/* Handouts and checks (School) and posting (Activities) — kid-tools.js. */
.pp-kt{margin:12px 0}
.pp-kt-asks,.pp-kt-checks,.pp-kt-shelf,.pp-kt-posts{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.pp-kt-ask{border:1px solid var(--pp-line);border-left:4px solid var(--pp-accent);border-radius:8px;padding:10px}
.pp-kt-check,.pp-kt-post,.pp-kt-shelf li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.pp-kt-lib .pp-bar{align-items:flex-start}
.pp-kt-libctl{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;margin:8px 0}
.pp-kt-libctl input[type=search]{font:inherit;font-size:16px}
.pp-kt-lib .pp-kt-shelf li{display:block}
.pp-kt-doc{border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg)}
.pp-kt-doc summary{display:flex;gap:8px;align-items:baseline;padding:10px 12px;min-height:44px;cursor:pointer}
.pp-kt-doc summary small{display:block}
.pp-kt-doc-body{padding:0 12px 10px 34px;font-size:14px}
@media (max-width: 640px){.pp-kt-libctl{grid-template-columns:1fr}}
.pp-kt-form{display:flex;flex-direction:column;gap:6px;margin:8px 0;max-width:640px}
.pp-kt-for{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.pp-kt-for legend{font-weight:700;font-size:14px;margin-bottom:4px}

/* ── The other pages in Founder1's design (2026-10-22, "new look first") ────────────────────────
   School, Activities, Schedule, Upcoming, Social, Trips, Almanac and New event take Family
   today's look: the blue page, white panels whose heading sits in a strip above a line, square
   tags (amber when something needs doing), a large page title with a small line under it, and
   medium-weight headings. Only the look changes — every page shows what it showed before.
   #ppToday is left out: its new view draws its own (.pp-x), and the old view keeps the old look. */
.pp-page:not(#ppToday){background:var(--pp-page);border:0;border-radius:11px;padding:22px}
.pp-page:not(#ppToday) .pp-tcard,.pp-page:not(#ppToday) .pp-upc-needs{--pp-muted:var(--pp-sub);--pp-faint:var(--pp-sub)}
/* The design's grey (#617789) reads at 4.66:1 on the white panels above, but only 4.16:1 on the blue
   page itself — under the 4.5:1 small text needs. So it is used inside panels, and text that sits
   straight on the page (the line under a title, the "put together at" stamp) keeps #5b6e7f. */
.pp-page:not(#ppToday) h2,.pp-page:not(#ppToday) h3{font-weight:650;letter-spacing:-.2px}
.pp-page:not(#ppToday) h4,.pp-page:not(#ppToday) strong,.pp-page:not(#ppToday) b{font-weight:600}
.pp-page:not(#ppToday) .pp-bar{margin-bottom:18px;align-items:flex-start}
.pp-page:not(#ppToday) .pp-bar-nav{flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.pp-page:not(#ppToday) .pp-bar-title{font-size:27px;line-height:1.18;font-weight:700;letter-spacing:-.8px;margin:0}
.pp-bar-sub{font-size:12px;color:var(--pp-muted)}
.pp-page:not(#ppToday) .pp-tgrid{gap:18px;margin-bottom:16px}
.pp-page:not(#ppToday) .pp-tcard{padding:17px;border-radius:11px;margin-bottom:16px}
.pp-page:not(#ppToday) .pp-tgrid>.pp-tcard{margin-bottom:0}
.pp-page:not(#ppToday) .pp-tcard>.pp-th:first-child{margin:-17px -17px 14px;padding:14px 17px;border-bottom:1px solid var(--pp-line);font-size:17px}
.pp-page:not(#ppToday) .pp-chip{border:0;border-radius:4px;padding:4px 7px;font-size:11px;font-weight:400;background:var(--pp-accent-wash);color:var(--pp-accent)}
.pp-page:not(#ppToday) .pp-chip.is-warn{background:var(--pp-warn-bg);color:var(--pp-warn)}
.pp-page:not(#ppToday) .pp-chip.is-go,.pp-page:not(#ppToday) .pp-chip--accepted{background:var(--pp-accent);color:var(--pp-accent-ink)}
.pp-page:not(#ppToday) .pp-chip--proposed{outline:1px dashed var(--pp-accent-soft)}
.pp-page:not(#ppToday) .pp-btn{background:var(--pp-accent-wash);border-radius:6px;font-weight:500;min-height:40px;padding:8px 12px}
.pp-page:not(#ppToday) .pp-btn--go{background:var(--pp-accent);color:var(--pp-accent-ink);font-weight:650}
.pp-page:not(#ppToday) .pp-src summary,.pp-page:not(#ppToday) .pp-bday-add summary{font-weight:400;font-size:13px;min-height:34px;display:flex;align-items:center}
.pp-page:not(#ppToday) .pp-sub{font-size:12px;font-weight:650;letter-spacing:.02em}
.pp-page:not(#ppToday) .pp-segs{border:0;border-radius:8px;padding:4px;gap:2px;background:var(--pp-bg)}
.pp-page:not(#ppToday) .pp-seg{border:0;border-radius:6px;font-weight:400;color:var(--pp-ink)}
.pp-page:not(#ppToday) .pp-seg.is-on{background:var(--pp-accent-wash);color:var(--pp-accent);font-weight:650}
@media (prefers-reduced-motion: no-preference){.pp-page:not(#ppToday) .pp-seg{transition:background-color .15s ease,color .15s ease}}
@media (pointer:coarse){.pp-page:not(#ppToday) .pp-src summary,.pp-page:not(#ppToday) .pp-bday-add summary{min-height:44px}}
/* Phone: the design's 16px 12px page, edge to edge like Family today, title 23px. */
@media (max-width: 700px){
  .pp-page:not(#ppToday){padding:16px 12px;margin-inline:-20px;border-radius:0}
  .pp-page:not(#ppToday) .pp-bar-title{font-size:24px}
  .pp-page:not(#ppToday) .pp-tcard{padding:14px}
  .pp-page:not(#ppToday) .pp-tcard>.pp-th:first-child{margin:-14px -14px 12px;padding:12px 14px}
  .pp-page:not(#ppToday) .pp-tgrid{gap:0}
  .pp-page:not(#ppToday) .pp-tgrid>.pp-tcard{margin-bottom:16px}
}
body.narrow .pp-page:not(#ppToday){padding:16px 12px;margin-inline:-20px;border-radius:0}
body.narrow .pp-page:not(#ppToday) .pp-bar-title{font-size:24px}
body.narrow .pp-page:not(#ppToday) .pp-tcard{padding:14px}
body.narrow .pp-page:not(#ppToday) .pp-tcard>.pp-th:first-child{margin:-14px -14px 12px;padding:12px 14px}
body.narrow .pp-page:not(#ppToday) .pp-tgrid{gap:0}
body.narrow .pp-page:not(#ppToday) .pp-tgrid>.pp-tcard{margin-bottom:16px}
body.phone-view.pp-on .pp-page:not(#ppToday){margin-inline:-12px}
body.phone-view .pp-page:not(#ppToday){padding:16px 12px}
/* The schedule's title is a date range, so it stays a size smaller than a page name. */
.pp-page#ppSchedule .pp-bar-title,body.narrow .pp-page#ppSchedule .pp-bar-title{font-size:20px;font-weight:650;letter-spacing:-.3px}
/* "Needs doing" reads amber in the design, not red; red stays for things that failed (.pp-fail). */
.pp-page:not(#ppToday) .pp-note.is-warn,.pp-page:not(#ppToday) .pp-lunch.is-warn{color:var(--pp-warn)}
/* At phone width the board's side padding is 12px, so the page's edge-to-edge pull is 12px too
   (after the body.narrow rule above, which is the 641–700px case). */
@media (max-width: 640px){ body.pp-on .pp-page:not(#ppToday){margin-inline:-12px} }
/* Needs you (the old panel's section, moved onto Upcoming) sits in a panel like the rest. */
.pp-page:not(#ppToday) .pp-upc-needs{background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:11px;padding:17px;margin-bottom:16px}
.pp-page:not(#ppToday) .pp-upc-needs>.pp-th:first-child{margin:-17px -17px 14px;padding:14px 17px;border-bottom:1px solid var(--pp-line);font-size:17px}
@media (max-width: 700px){
  .pp-page:not(#ppToday) .pp-upc-needs{padding:14px}
  .pp-page:not(#ppToday) .pp-upc-needs>.pp-th:first-child{margin:-14px -14px 12px;padding:12px 14px}
}
body.narrow .pp-page:not(#ppToday) .pp-upc-needs{padding:14px}
body.narrow .pp-page:not(#ppToday) .pp-upc-needs>.pp-th:first-child{margin:-14px -14px 12px;padding:12px 14px}
/* School: the line right under the shared panel when Main campus and South campus differ. */
.pp-campus-diff{margin:-4px 0 16px;padding:10px 14px;border-radius:9px;background:var(--pp-warn-bg);color:var(--pp-ink);font-size:13.5px;line-height:1.6}

/* ── Upcoming in two columns + "Update Pepper" (Founder1's design of 2026-10-24) ─────────────
   Left: Pepper's analysis. Right: the flags, each with Pepper's proposal and an answer box.
   One column below 960px and on the phone, analysis first, as in pepper-upcoming-inputs-phone. */
.pp-upc-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width: 960px){
  .pp-upc-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  .pp-upc-right{border-left:1px solid var(--pp-line);padding-left:22px}
}
body.narrow .pp-upc-cols{grid-template-columns:minmax(0,1fr)}
body.narrow .pp-upc-right{border-left:0;padding-left:0}
.pp-upc-col{min-width:0}
.pp-upc-colh{font-size:17px;font-weight:650;margin:0}
.pp-upc-colsub{color:var(--pp-muted);font-size:13px;margin:2px 0 12px}
#ppNeedsYouHost .ny-cols{grid-template-columns:minmax(0,1fr)}

/* the recommendation and the priority order */
.pp-upc-lead{background:var(--pp-accent-wash);border-left:4px solid var(--pp-accent);border-radius:0 12px 12px 0;padding:17px;margin-bottom:15px}
.pp-upc-eyebrow{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--pp-accent);font-weight:600;margin:0}
.pp-upc-lead h3{font-size:21px;line-height:1.25;margin:7px 0 8px;font-weight:650}
.pp-upc-lead p{font-size:14px;line-height:1.55;margin:0 0 8px}
.pp-upc-lead small{color:var(--pp-muted);font-size:12px}
.pp-upc-prio{margin:0 0 16px;border-bottom:1px solid var(--pp-line)}
.pp-upc-prio>summary,.pp-upc-basis>summary{min-height:44px;display:flex;align-items:center;font-size:13px;font-weight:600;cursor:pointer}
.pp-upc-prio-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.pp-upc-case{border:1px solid var(--pp-line);border-radius:12px;background:var(--pp-bg);overflow:hidden}
.pp-upc-case>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 12px;cursor:pointer;min-height:56px}
.pp-upc-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--pp-accent-wash);color:var(--pp-accent);font-weight:650;flex-shrink:0}
.pp-upc-case-copy{flex:1;min-width:160px}
.pp-upc-case-copy strong{display:block;font-size:14px;line-height:1.35}
.pp-upc-case-copy small,.pp-flag-copy small{display:block;color:var(--pp-muted);font-size:12px;margin-top:3px}
.pp-upc-case>:not(summary){margin:0 14px 10px}
.pp-upc-rec{border-top:1px solid var(--pp-line);padding-top:12px}
.pp-upc-rec b,.pp-flag-prop>b{display:inline-block;padding:3px 7px;border-radius:6px;background:var(--pp-accent-wash);color:var(--pp-accent);font-size:11px;font-weight:600}
.pp-upc-rec p{font-size:14px;font-weight:500;line-height:1.5;margin:5px 0 0}
.pp-upc-refresh{color:var(--pp-warn);background:var(--pp-warn-bg);border-radius:8px;padding:6px 9px;font-size:13px}
.pp-upc-based{font-size:13px}
.pp-upc-settled{border:1px solid var(--pp-line);border-radius:12px;padding:12px 14px;margin:0 0 16px;background:var(--pp-good-bg)}
.pp-upc-settled h4{font-size:14px;margin:0 0 6px}
.pp-upc-settled ul,.pp-upc-basis ul{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.pp-upc-basis{border-top:1px solid var(--pp-line);margin-top:6px}
.pp-upc-basis p{font-size:13px}

/* counts and the filter */
.pp-upc-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.pp-upc-counts>div{display:flex;flex-direction:column;padding:11px 10px;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:12px}
.pp-upc-counts strong{font-size:22px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums}
.pp-upc-counts span{font-size:12px;color:var(--pp-muted)}
.pp-upc-filter .pp-field{flex-direction:row;align-items:center;gap:8px;font-weight:500}
.pp-upc-filter select{width:auto;max-width:100%}
.pp-upc-group[hidden]{display:none}

/* a flag */
.pp-flag{border:1px solid var(--pp-line);border-radius:12px;background:var(--pp-bg);overflow:hidden}
.pp-flag-top{display:flex;align-items:flex-start;gap:10px;padding:12px 14px}
.pp-flag-copy{flex:1;min-width:0}
.pp-flag-copy strong{display:block;font-size:14px;line-height:1.35;font-weight:600}
.pp-flag-tag{font-size:12px;font-weight:500;line-height:1.3;padding:4px 7px;border-radius:6px;background:var(--pp-accent-wash);color:var(--pp-accent);flex-shrink:0;max-width:110px;text-align:center}
.pp-flag-tag.is-urgent{background:var(--pp-warn-bg);color:var(--pp-warn)}
.pp-flag-kept{padding:0 14px;font-size:13px}
.pp-flag-prop{border-top:1px solid var(--pp-line);background:var(--pp-accent-wash);padding:11px 14px}
.pp-flag-prop>b{background:var(--pp-bg)}
.pp-flag-prop>p{margin:5px 0 0;font-size:14px;line-height:1.5}
.pp-flag-check{margin-top:8px;font-size:13px}
.pp-flag-check p{margin:4px 0 0;font-size:13px}
.pp-flag-state{display:inline-block;margin:6px 0 0;padding:3px 8px;border-radius:999px;font-size:12px;border:1px solid var(--pp-line);background:var(--pp-bg)}
.pp-flag-state.is-wait{color:var(--pp-accent);border-color:var(--pp-accent-soft)}
.pp-flag-state.is-open{color:var(--pp-warn);background:var(--pp-warn-bg);border-color:var(--pp-warn-bg)}
.pp-flag-state.is-fail{color:var(--pp-fail);background:var(--pp-fail-bg);border-color:var(--pp-fail-line)}
.pp-flag-state.is-done{color:var(--pp-good);background:var(--pp-good-bg);border-color:var(--pp-good-bg)}
.pp-flag-why{padding:0 14px;border-top:1px solid var(--pp-line)}
.pp-flag-why>summary,.pp-fu>summary,.pp-fu-src>summary,.pp-fu-hist>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.pp-flag-why p{margin:0 0 8px;font-size:13px}

/* Update Pepper */
.pp-fu{border-top:1px solid var(--pp-line);padding:0 14px}
.pp-fu>summary{font-weight:600;color:var(--pp-accent)}
.pp-fu-ind{margin-left:auto;font-weight:400;font-size:12px;color:var(--pp-muted)}
.pp-fu-ind.is-dirty,.pp-fu-ind.is-uncertain{color:var(--pp-warn)}
.pp-fu-ind.is-error{color:var(--pp-fail)}
.pp-fu-ind.is-saved{color:var(--pp-good)}
.pp-fu-form{padding:2px 0 12px}
.pp-fu-q{font-size:14px;font-weight:600;margin:0 0 8px}
.pp-fu-src{margin:0 0 8px}
.pp-fu-src>summary{color:var(--pp-accent)}
.pp-fu-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pp-fu-actions small{color:var(--pp-muted);font-size:12px}
.pp-fu-actions .pp-btn--go{margin-top:0;min-height:44px}
.pp-fu-out{margin:8px 0 0;font-size:13px;min-height:1px}
.pp-fu-out.is-fail{color:var(--pp-fail)}
.pp-fu-out.is-ok{color:var(--pp-good)}
.pp-fu-hist{margin:0 0 10px}
.pp-fu-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.pp-fu-list p{margin:0}
.pp-fu--ro{padding-bottom:10px}
.pp-fu-rohead{font-size:12px;color:var(--pp-muted);margin:10px 0 0}
.pp-fu-slot{margin-top:10px;border:1px solid var(--pp-line);border-radius:10px;overflow:hidden}
.pp-fu-slot .pp-fu{border-top:0}
.pp-fu-wait{padding:8px 12px}
/* Family today: an event's bring line, under its time in the day table. */
.pp-x-table td small.pp-x-bring{margin-top:2px;color:var(--x-ink)}

/* ── The computer sidebar (the 2026-10-24 handoff; Founder1 2026-10-25) ──────────────────────────
   Wide screens only — 1,225px and up (1,204px of board plus room for a 15px scrollbar), and not with the Phone switch on. The board widens by the
   sidebar's 166px and its 18px gap, so every page keeps the width it had: Family today's table
   is exactly as wide as before. Narrower screens keep the row of page names; phones keep
   Today · Schedule · Upcoming · More. Line icons here; the emoji stay everywhere else. */
.pp-nav-svg{display:none}
@media (min-width: 1225px){
  body.pp-on:not(.phone-view) .wrap{max-width:1204px}
  body.pp-on:not(.phone-view) #board:not(.hidden){display:grid;grid-template-columns:166px minmax(0,1fr);column-gap:18px;align-items:start}
  body.pp-on:not(.phone-view) #board>*{grid-column:2;min-width:0}
  body.pp-on:not(.phone-view) #board>#ppNav{grid-column:1;grid-row:1 / span 60;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;margin:0;padding:16px 9px;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:11px}
  body.pp-on:not(.phone-view) .pp-nav-row{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:5px}
  body.pp-on:not(.phone-view) .pp-nav-item{position:relative;justify-content:flex-start;gap:9px;min-height:45px;padding:11px 9px;border:0;border-radius:9px;background:none;color:var(--pp-sub);font-size:12px;font-weight:500;white-space:normal;text-align:left}
  body.pp-on:not(.phone-view) .pp-nav-item:hover{background:var(--pp-page);color:var(--pp-ink)}   /* the grey is too faint on the blue */
  body.pp-on:not(.phone-view) .pp-nav-item.is-current{background:var(--pp-accent-wash);color:var(--pp-accent);font-weight:650}
  body.pp-on:not(.phone-view) .pp-nav-item:focus-visible{outline:2px solid var(--pp-focus);outline-offset:-2px}
  body.pp-on:not(.phone-view) .pp-nav-icon{display:none}
  body.pp-on:not(.phone-view) .pp-nav-svg{display:block;width:17px;height:17px;flex-shrink:0}
  body.pp-on:not(.phone-view) .pp-nav-badge{margin-left:auto}
  body.pp-on:not(.phone-view) .pp-nav-sep{width:auto;height:1px;margin:6px 4px}
}

/* Activities layout (Phase A) — symbol, class, ride tag on one row (design 2026-10-25). */
.pp-act{border-top:1px solid var(--pp-line);padding-top:10px;margin-top:10px}
.pp-act:first-of-type{border-top:0;padding-top:0;margin-top:0}
.pp-act-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:start}
.pp-act-sym{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--pp-page);font-size:18px}
.pp-act-row>.pp-chip{white-space:nowrap}
.pp-act-main p{margin:2px 0}
.pp-act-when,.pp-act-ride{font-size:13px}
@media (max-width: 640px){.pp-act-row{grid-template-columns:34px minmax(0,1fr)}.pp-act-row>.pp-chip{grid-column:2;justify-self:start}}
/* Trips, Almanac, New event layout (Phase A) */
/* Founder1's 2026-10-16 handoff, design sections 7–9 (desktop-source.html #v-trips, #v-almanac,
   #v-new). Layout only: every field, button and source line the pages had is still drawn. Scoped to
   the three pages by id, so nothing here reaches Family today or the other pages. Light tokens only —
   dark mode stays off outside Family today (see the top of this file). */

/* The page title: the design's line icon in a white tile, the title, the small line under it. */
#ppTrips .pp-bar-nav,#ppAlmanac .pp-bar-nav,#ppNewEvent .pp-bar-nav{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;row-gap:2px;align-items:center}
.pp-psym{grid-row:span 2;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:14px;color:var(--pp-accent);box-shadow:0 2px 5px rgba(33,56,76,.03)}
.pp-psym svg{width:23px;height:23px}
#ppNewEvent .pp-ne-title{margin:0;display:block}
#ppNewEvent .pp-bar-sub:empty{display:none}

/* Trips — one trip is an overview panel, the Leave / Away / Back strip, two panels side by side,
   then what needs sorting full width. Trips are spaced apart so each reads as one group. */
#ppTrips .pp-trips{gap:34px}
#ppTrips .pp-trip{border:0;display:flex;flex-direction:column;gap:16px;min-width:0}
#ppTrips .pp-trip-panel{background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:17px;min-width:0;box-shadow:0 2px 7px rgba(33,56,76,.02);--pp-muted:var(--pp-sub);--pp-faint:var(--pp-sub)}
#ppTrips .pp-trip-over{display:flex;align-items:flex-start;gap:18px;padding:22px}
#ppTrips .pp-trip.is-past .pp-trip-over{border-left:4px solid var(--pp-line)}
#ppTrips .pp-trip-over-t{flex:1;min-width:0}
.pp-trip-sym{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:17px;background:var(--pp-accent-wash);color:var(--pp-accent);flex-shrink:0}
.pp-trip-sym svg{width:29px;height:29px}
#ppTrips .pp-trip-head .pp-th{font-size:22px;font-weight:650;letter-spacing:-.4px}
#ppTrips .pp-trip-facts{margin:4px 0 6px}
#ppTrips .pp-trip-facts dd{font-size:13px;font-weight:500}
/* A date that still asks something needs doing, so amber; red stays for what failed. */
#ppTrips .pp-trip-note.is-warn{color:var(--pp-warn)}
#ppTrips .pp-trip-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#ppTrips .pp-trip-stage{background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:18px;min-width:0;--pp-muted:var(--pp-sub)}
.pp-trip-ssym{display:flex;align-items:center;justify-content:center;width:39px;height:39px;border-radius:11px;background:var(--pp-accent-wash);color:var(--pp-accent);margin-bottom:14px}
.pp-trip-ssym svg{width:20px;height:20px}
#ppTrips .pp-trip-sh{font-size:15px;font-weight:600;margin:0}
#ppTrips .pp-trip-stage p{font-size:13px;margin:8px 0 0}
#ppTrips .pp-trip-tags{display:flex;flex-wrap:wrap;gap:6px}
#ppTrips .pp-trip-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
/* A panel's heading sits in a strip above a line, with its small icon tile (the design's .head). */
#ppTrips .pp-trip-ph{display:flex;align-items:center;gap:9px;margin:-17px -17px 14px;padding:12px 17px;border-bottom:1px solid var(--pp-line);font-size:17px;font-weight:650;letter-spacing:-.2px}
.pp-ssym{width:31px;height:31px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:9px;background:var(--pp-accent-wash);color:var(--pp-accent)}
.pp-ssym svg{width:16px;height:16px}
#ppTrips .pp-trip-panel h5.pp-sub{margin:14px 0 6px;font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--pp-sub)}
#ppTrips .pp-trip-panel .pp-trip-ph+h5.pp-sub{margin-top:0}
#ppTrips .pp-trip-panel p,#ppTrips .pp-trip-school li{font-size:14px}
#ppTrips .pp-trip-retire{margin-top:0;padding-top:0;border-top:0}

/* Almanac — one panel per month: a blue line along the top, the month in small blue capitals,
   the kinds of date it holds, and each row hung off a thin rule (the design's #v-almanac). */
#ppAlmanac .pp-alm-months{gap:16px;margin-bottom:16px}
#ppAlmanac .pp-alm-month{background:var(--pp-bg);border:1px solid var(--pp-line);border-top:3px solid var(--pp-accent);border-radius:var(--pp-radius);padding:20px;min-width:0;--pp-muted:var(--pp-sub)}
#ppAlmanac .pp-alm-mname{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:500;color:var(--pp-accent);margin:0 0 8px}
#ppAlmanac .pp-alm-kinds{font-size:19px;font-weight:650;letter-spacing:-.4px;line-height:1.3;margin:0 0 12px}
#ppAlmanac .pp-alm-list{gap:0}
#ppAlmanac .pp-alm-row{padding:6px 0 6px 12px;border-left:2px solid var(--pp-line);margin:6px 0;font-size:13px}
#ppAlmanac .pp-alm-row.is-warn{border-left-color:var(--pp-warn)}
#ppAlmanac .pp-alm-row.is-warn .pp-alm-when{color:var(--pp-warn)}
#ppAlmanac .pp-alm-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
#ppAlmanac .pp-alm-from{margin:0 0 16px;padding:12px 17px;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius);font-size:13px;color:var(--pp-ink)}
#ppAlmanac .pp-alm-from ul{margin-top:8px}
/* The old panel's sections (moved in by almanac.js) sit in one panel like the rest. */
#ppAlmanac #ppAlmanacOld:not(:empty){background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:4px 17px 17px;margin-top:16px;min-width:0}
#ppAlmanac #ppAlmanacOld .sec-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:17px;font-weight:650;padding-top:14px;border-top:1px solid var(--pp-line)}
#ppAlmanac #ppAlmanacOld .sec-label:first-child{border-top:0;padding-top:0}

/* New event — the form on the left, "What happens next" beside it (the design's #v-new). */
#ppNewEvent .pp-ne-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start}
#ppNewEvent .pp-ne-grid>*{min-width:0}
#ppNewEvent .form-card{max-width:none}
#ppNewEvent .pp-ne-flow{background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius);padding:20px}
#ppNewEvent .pp-ne-flow[hidden],#ppNewEvent .pp-ne-steps[hidden]{display:none}
#ppNewEvent .pp-ne-flow h3{font-size:18px;font-weight:650;margin:0 0 6px}
.pp-ne-steps{list-style:none;margin:0;padding:0}
.pp-ne-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--pp-line)}
.pp-ne-steps li:last-child{border-bottom:0;padding-bottom:0}
.pp-ne-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--pp-accent-wash);border-radius:10px;color:var(--pp-accent)}
.pp-ne-ic svg{width:18px;height:18px}
.pp-ne-steps strong{display:block;font-size:14px;font-weight:600}
.pp-ne-steps li span:not(.pp-ne-ic){display:block;font-size:12px;color:var(--pp-sub);margin-top:4px}

/* Narrower screens: the panels stack, form first. */
@media (max-width: 900px){
  #ppNewEvent .pp-ne-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 700px){
  #ppTrips .pp-trip-stages,#ppTrips .pp-trip-two{grid-template-columns:minmax(0,1fr)}
  .pp-psym{width:42px;height:42px;border-radius:12px}
  .pp-psym svg{width:21px;height:21px}
  #ppTrips .pp-bar-nav,#ppAlmanac .pp-bar-nav,#ppNewEvent .pp-bar-nav{column-gap:11px}
  #ppTrips .pp-trip-over{padding:17px;gap:12px}
  .pp-trip-sym{width:47px;height:47px;border-radius:13px}
  .pp-trip-sym svg{width:23px;height:23px}
  #ppTrips .pp-trip-head .pp-th{font-size:20px}
  #ppTrips .pp-trip-panel{padding:14px}
  #ppTrips .pp-trip-ph{margin:-14px -14px 12px;padding:12px 14px}
}
body.narrow #ppTrips .pp-trip-stages,body.narrow #ppTrips .pp-trip-two,body.narrow #ppNewEvent .pp-ne-grid{grid-template-columns:minmax(0,1fr)}
body.narrow .pp-psym{width:42px;height:42px;border-radius:12px}
body.narrow #ppTrips .pp-trip-over{padding:17px;gap:12px}
body.narrow .pp-trip-sym{width:47px;height:47px;border-radius:13px}
body.narrow #ppTrips .pp-trip-head .pp-th{font-size:20px}
body.narrow #ppTrips .pp-trip-panel{padding:14px}
body.narrow #ppTrips .pp-trip-ph{margin:-14px -14px 12px;padding:12px 14px}
/* Social layout (Phase A) ───────────────────────────────────────────────────────────────────
   Founder1's design, 2026-10-27: Events & invitations at the top (each child's parties and
   get-togethers side by side, every party ONE card with its facts, the invitation checklist
   and the old party board folded in), then In the works, then Family & Community, then
   friends' birthdays. Scoped to #ppSocial so no other page, and not Family today, changes. */
#ppSocial .pp-social-top{margin-bottom:0}
#ppSocial .pp-social-h{font-size:19px;margin:4px 0 12px}
#ppSocial .pp-social-th-sub{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--pp-sub,var(--pp-muted));letter-spacing:0}
#ppSocial .pp-social-works,#ppSocial .pp-social-bdays,#ppSocial #ppSocialBoard .pp-bb{margin:0 0 16px}
#ppSocial .pp-social-works .sec-label{font-size:15px;margin:0 0 8px}
#ppSocial .pp-social-works #ppSocialRequests{margin-top:14px;padding-top:12px;border-top:1px solid var(--pp-line-soft)}
#ppSocial .pp-social-works #ppSocialRequests .pp-rq{border:0;padding:0;margin:0 0 10px;background:none}
#ppSocial .pp-social-works #ppSocialRequests .pp-rq>.pp-th:first-child{margin:0 0 6px;padding:0;border:0;font-size:15px}
#ppSocial .pp-social-extra{margin-top:0}
#ppSocial .pp-social-bdays-host:empty{display:none}
#ppSocial .gath-status{background:var(--pp-accent-wash);color:var(--pp-accent);border-color:var(--pp-accent-soft)}
/* One party: a card inside the child's column, its stripe the old prep card's urgency. */
#ppSocial .pp-soc-party{position:relative;border:1px solid var(--pp-line);border-left-width:4px;border-radius:10px;padding:12px;background:var(--pp-bg);min-width:0}
#ppSocial .pp-soc-party.is-urgent{border-left-color:var(--pp-fail)}
#ppSocial .pp-soc-party.is-soon{border-left-color:var(--pp-warn)}
#ppSocial .pp-soc-party-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;margin:0 0 6px}
#ppSocial .pp-soc-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 12px;margin:0 0 8px;font-size:13.5px}
#ppSocial .pp-soc-facts>div{display:contents}
#ppSocial .pp-soc-facts dt{color:var(--pp-sub,var(--pp-muted))}
#ppSocial .pp-soc-facts dd{margin:0;overflow-wrap:anywhere}
#ppSocial .pp-soc-chips{margin:0 0 8px}
#ppSocial .pp-soc-check,#ppSocial .pp-soc-todos{margin-top:8px}
#ppSocial .pp-soc-steps{list-style:none;margin:0;padding:0}
#ppSocial .pp-soc-step{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--pp-line-soft)}
#ppSocial .pp-soc-mark{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--pp-line);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--pp-sub,var(--pp-muted))}
#ppSocial .pp-soc-step.is-done .pp-soc-mark{background:var(--pp-accent);border-color:var(--pp-accent);color:var(--pp-accent-ink)}
#ppSocial .pp-soc-step-b{flex:1;min-width:0}
#ppSocial .pp-soc-step-b>p{margin:2px 0 0;font-size:13px}
#ppSocial .pp-soc-check-note{font-size:12px;margin:4px 0 0}
#ppSocial .pp-soc-step .rsvp-row{margin:6px 0 4px}
#ppSocial .pp-soc-step .rsvp-draft{margin:0 0 6px}
#ppSocial .pp-soc-gifts{margin-top:6px}
#ppSocial .pp-soc-gifts>summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--pp-accent);min-height:34px;display:flex;align-items:center}
#ppSocial .pp-soc-todos .todo{padding:8px 0}
#ppSocial .pp-soc-todos .prep-done{padding:6px 0 0}
#ppSocial .pp-soc-stage{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--pp-line-soft);font-size:13px}
#ppSocial .pp-soc-stage .bd-move{flex:1 1 160px;margin-top:0}
#ppSocial .pp-soc-others{margin:0 0 12px}
#ppSocial .pp-soc-others .pp-plans{margin-top:8px}
#ppSocial .pp-soc-foot{font-size:12.5px;margin:0 0 6px}
@media (pointer:coarse){#ppSocial .pp-soc-gifts>summary{min-height:44px}}

/* School agenda (Phase B) */
/* The month agenda on School (public/pepper/school-agenda.js): a date block, then the item's tags,
   title, time or "no time given", source and handout link. Stacks under 640px; nothing here is
   wider than the card. Its tags use the page's own chips (.pp-chip, .pp-chip.is-warn). */
#ppKidSchoolAgenda{margin:12px 0}
.pp-sa-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px;margin:0 0 8px}
.pp-sa-head .pp-th{margin:0 0 2px}
.pp-sa-pick{display:flex;align-items:flex-end;gap:6px;min-width:0}
.pp-sa-pick .pp-btn--icon{min-height:44px;width:44px}
.pp-sa-pick .pp-btn:disabled{opacity:.45;cursor:default}
.pp-sa-month{margin:0;min-width:0}
.pp-sa-month input{min-width:0;max-width:200px}
.pp-sa-list{list-style:none;margin:0;padding:0}
.pp-sa-item{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--pp-line-soft);min-width:0}
.pp-sa-item:first-child{border-top:0}
.pp-sa-item.is-past{opacity:.72}
.pp-sa-date{flex:none;width:58px;text-align:center;border:1px solid var(--pp-line);border-radius:10px;background:var(--pp-accent-wash);padding:6px 2px;align-self:flex-start}
.pp-sa-date strong{display:block;font-size:22px;line-height:1.1;color:var(--pp-accent)}
.pp-sa-date small{display:block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--pp-ink)}
.pp-sa-body{flex:1;min-width:0}
.pp-sa-tags{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px}
.pp-sa-t{font-size:15px;font-weight:650;margin:0 0 2px;overflow-wrap:anywhere}
.pp-tcard .pp-sa-when{font-size:13.5px;margin:0 0 2px}
.pp-tcard .pp-sa-when.is-unknown{color:var(--pp-warn)}
.pp-tcard .pp-sa-src{font-size:12.5px;color:var(--pp-sub);margin:0 0 2px;overflow-wrap:anywhere}
.pp-sa-doc{display:inline-block;font-size:13.5px;text-align:left;overflow-wrap:anywhere;min-height:32px;padding:4px 0}
.pp-tcard .pp-sa-empty{padding:10px 0;color:var(--pp-muted)}
.pp-tcard .pp-sa-foot{font-size:12.5px;margin:8px 0 0}
.pp-kt-doc:target>summary,.pp-kt-doc[open]>summary{scroll-margin-top:12px}
@media (pointer:coarse){.pp-sa-doc{min-height:44px}}
@media (max-width: 640px){
  .pp-sa-pick{width:100%}
  .pp-sa-month{flex:1}
  .pp-sa-month input{max-width:none}
  .pp-sa-date{width:50px}
}
/* Social checklist (Phase B) — the tick box under each of the invitation steps 1, 2, 4–7. */
#ppSocial .pp-soc-tickrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:4px 0 0;font-size:13px}
#ppSocial .pp-soc-tickrow .pp-tick{display:inline-flex;min-height:36px;font-size:13.5px}
#ppSocial .pp-soc-tickrow .pp-tick input:checked + span{text-decoration:none;color:inherit}
#ppSocial .pp-soc-tickrow .pp-tick input:disabled{cursor:progress;opacity:.6}
#ppSocial .pp-soc-auto{font-size:12px;margin:2px 0 0}
@media (pointer:coarse){#ppSocial .pp-soc-tickrow .pp-tick{min-height:44px}}
/* Trips and Almanac (Phase B) */
/* Founder1's 2026-10-16 handoff, sections 7–8: trip items grouped before departure / while away /
   return home / not sure when (src/trip-stages.js), and the Almanac's sources, school dates and
   family cover (src/almanac-sources.js). Scoped to the two pages; Family today is untouched. */
#ppTrips .pp-trip-sitems{margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--pp-line);font-size:13px;display:flex;flex-direction:column;gap:4px}
#ppTrips .pp-trip-sitems li{overflow-wrap:anywhere}
#ppTrips .pp-trip-unsure{margin:-6px 0 0;font-size:13px}
#ppTrips .pp-trip-group{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--pp-line)}
#ppTrips .pp-trip-group:first-of-type{border-top:0;padding-top:0}
#ppTrips .pp-trip-gh{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--pp-ink)}
#ppTrips .pp-trip-group--unsure .pp-trip-gh{color:var(--pp-warn)}
#ppTrips .pp-trip-why{font-size:12px;color:var(--pp-sub);margin:4px 0 0}
#ppAlmanac .pp-alm-more{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:3px;font-size:12px;min-width:0}
#ppAlmanac .pp-alm-more>*{overflow-wrap:anywhere;min-width:0}
#ppAlmanac .pp-alm-cover{color:var(--pp-ink)}
#ppAlmanac .pp-alm-src{font-size:12px}
#ppAlmanac a.pp-alm-src{color:var(--pp-accent)}
#ppAlmanac .pp-alm-standing,#ppAlmanac .pp-alm-left{margin:0 0 12px;font-size:13px}
#ppAlmanac details.pp-alm-standing{padding:12px 17px;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:var(--pp-radius)}
#ppAlmanac details.pp-alm-standing ul{margin-top:8px}
@media (pointer:coarse){#ppAlmanac .pp-alm-src.pp-link,#ppAlmanac .pp-alm-left .pp-link{min-height:44px}}
/* Social gift planner and In the works capture (Phase D) */
/* The gift planner sits under checklist step 4 on each party card; the capture box and the plans
   being talked over sit at the top of In the works. Scoped to Social; Family today is untouched. */
#ppSocial .pp-soc-gp{margin-top:6px}
#ppSocial .pp-soc-gp>summary{cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:36px;font-size:13px;font-weight:650;color:var(--pp-accent)}
#ppSocial .pp-soc-gp>summary .pp-chip{font-weight:500}
#ppSocial .pp-soc-gp-form,#ppSocial .pp-soc-works-form,#ppSocial .pp-soc-append{display:flex;flex-direction:column;gap:6px;margin:8px 0 0;font-size:13px;min-width:0}
#ppSocial .pp-soc-gp-form label,#ppSocial .pp-soc-works-form label,#ppSocial .pp-soc-append label{display:flex;flex-direction:column;gap:3px;min-width:0}
#ppSocial .pp-soc-gp-form .pp-tick,#ppSocial .pp-soc-works-kids .pp-tick{display:inline-flex;flex-direction:row;align-items:center;min-height:36px}
#ppSocial .pp-soc-gp-form input[type=text],#ppSocial .pp-soc-gp-form input[type=url],#ppSocial .pp-soc-gp-form textarea,
#ppSocial .pp-soc-works-form textarea,#ppSocial .pp-soc-append textarea{width:100%;max-width:100%;box-sizing:border-box}
#ppSocial .pp-soc-gp-form :is(input[type=text],input[type=url],input[type=date],textarea),#ppSocial .pp-soc-works-form :is(input[type=text],input[type=date],textarea),
#ppSocial .pp-soc-append :is(input[type=date],textarea){font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--pp-line);border-radius:8px;background:var(--pp-bg);color:var(--pp-ink);min-height:36px}
#ppSocial .pp-soc-gp-form .pp-tick input:checked + span,#ppSocial .pp-soc-works-kids .pp-tick input:checked + span{text-decoration:none;color:inherit}
#ppSocial .pp-soc-gp-ticks{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0}
#ppSocial .pp-soc-gp-list{margin:6px 0 0;padding-left:18px;font-size:13px}
#ppSocial .pp-soc-gp-list li,#ppSocial .pp-soc-msg-t{overflow-wrap:anywhere}
#ppSocial .pp-soc-gp-list a{color:var(--pp-accent)}
#ppSocial .pp-soc-gp-note{font-size:12px;margin:6px 0 0}
#ppSocial .pp-soc-works{margin:0 0 14px}
#ppSocial .pp-soc-works-kids{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
#ppSocial .pp-soc-works-list{margin-top:10px}
#ppSocial .pp-soc-msgs{list-style:none;margin:8px 0 0;padding:0}
#ppSocial .pp-soc-msg{padding:6px 0;border-top:1px solid var(--pp-line-soft)}
#ppSocial .pp-soc-msg>p{margin:0;font-size:13px}
#ppSocial .pp-soc-msg-t{white-space:pre-wrap}
@media (pointer:coarse){#ppSocial .pp-soc-gp>summary,#ppSocial .pp-soc-gp-form .pp-tick,#ppSocial .pp-soc-works-kids .pp-tick{min-height:44px}}
/* Handout For/type + ICIA parent notices (Phase D) */
/* The School library's For filter and the add-a-handout form's who/what controls; the bulletin
   board's All · ICIA parents · Family & community filter and each parent notice's facts and plan.
   Scoped to the School/Activities/Social pages; Family today is untouched. */
#ppKidSchoolLibrary .pp-kt-needs{margin:0 0 8px;font-size:13px}
#ppKidSchoolLibrary .pp-kt-libctl{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)}
#ppKidSchoolLibrary #ktLibUnset{margin:4px 0 8px;font-size:13px}
#ppKidSchoolLibrary .pp-kt-form .pp-kt-for{display:flex;flex-wrap:wrap;gap:4px 12px;border:0;padding:0;margin:8px 0}
#ppKidSchoolLibrary .pp-kt-form .pp-kt-for legend{font-size:13px;margin-bottom:4px}
#ppKidSchool .pp-bb-filter,#ppKidActivities .pp-bb-filter,#ppSocial .pp-bb-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
#ppKidSchool .pp-bb-filter [aria-pressed="true"],#ppKidActivities .pp-bb-filter [aria-pressed="true"],#ppSocial .pp-bb-filter [aria-pressed="true"]{border-color:var(--pp-accent);color:var(--pp-accent);font-weight:650}
#ppKidSchool .pp-bb-parent,#ppKidActivities .pp-bb-parent,#ppSocial .pp-bb-parent{overflow-wrap:anywhere}
#ppKidSchool .pp-bb-facts,#ppKidActivities .pp-bb-facts,#ppSocial .pp-bb-facts{display:grid;gap:4px;margin:6px 0;font-size:13px}
#ppKidSchool .pp-bb-facts div,#ppKidActivities .pp-bb-facts div,#ppSocial .pp-bb-facts div{display:grid;grid-template-columns:96px 1fr;gap:8px}
#ppKidSchool .pp-bb-facts dt,#ppKidActivities .pp-bb-facts dt,#ppSocial .pp-bb-facts dt{color:var(--pp-sub);font-weight:600}
#ppKidSchool .pp-bb-facts dd,#ppKidActivities .pp-bb-facts dd,#ppSocial .pp-bb-facts dd{margin:0;min-width:0}
#ppKidSchool .pp-bb-plan,#ppKidActivities .pp-bb-plan,#ppSocial .pp-bb-plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 0}
#ppKidSchool .pp-bb-k,#ppKidActivities .pp-bb-k,#ppSocial .pp-bb-k{font-size:13px;font-weight:600}
#ppKidSchool .pp-bb-small,#ppKidActivities .pp-bb-small,#ppSocial .pp-bb-small{font-size:12px;margin:4px 0 0}
@media (max-width:640px){#ppKidSchoolLibrary .pp-kt-libctl{grid-template-columns:1fr}}
@media (max-width:480px){#ppKidSchool .pp-bb-facts div,#ppKidActivities .pp-bb-facts div,#ppSocial .pp-bb-facts div{grid-template-columns:1fr;gap:0}}
@media (pointer:coarse){#ppKidSchool .pp-bb-filter .pp-btn,#ppKidActivities .pp-bb-filter .pp-btn,#ppSocial .pp-bb-filter .pp-btn,#ppKidSchool .pp-bb-plan .pp-btn,#ppKidActivities .pp-bb-plan .pp-btn,#ppSocial .pp-bb-plan .pp-btn{min-height:44px}}
/* Trips bookings from Danvers (Phase D) */
/* Danvers' own bookings on each trip, read-only (src/trip-bookings.js): the Bookings panel list and
   the bookings placed in the Leave / Away / Back strip. Scoped to Trips; Family today is untouched. */
#ppTrips .pp-trip-books{display:flex;flex-direction:column;gap:10px;margin:8px 0 0}
#ppTrips .pp-trip-book{padding:10px 0 0;border-top:1px solid var(--pp-line);overflow-wrap:anywhere}
#ppTrips .pp-trip-book:first-child{border-top:0;padding-top:0}
#ppTrips .pp-trip-book p{margin:0}
#ppTrips .pp-trip-book-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
#ppTrips .pp-trip-book.is-cancelled .pp-trip-book-t strong{text-decoration:line-through}
#ppTrips .pp-trip-blinks{margin:10px 0 0;font-size:13px}
#ppTrips .pp-trip-sbooks .pp-chip{font-size:11px}
@media (pointer:coarse){#ppTrips .pp-trip-blinks .pp-link{display:inline-flex;align-items:center;min-height:44px}}
/* Lunch choices (Phase D) */
/* School lunch / Pack lunch / Decide per child per school day — on the School page under each
   child's lunch line, and at the top of each child's cell on the Schedule's Week and 2 weeks
   (public/pepper/lunch.js). A packing day stands out: warm wash, a solid left bar, bold words.
   Scoped to those two pages; Family today is untouched. */
#ppKidSchool .pp-lunchdays{display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
#ppKidSchool .pp-lunchday,#ppSchedule .pp-lunchday{border:1px solid var(--pp-line-soft);border-left:3px solid var(--pp-line);border-radius:8px;padding:6px 8px;margin:0;font-size:13px;min-width:0;overflow-wrap:anywhere}
#ppKidSchool .pp-lunchday-t,#ppKidSchool .pp-lunchday-acts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
#ppKidSchool .pp-lunchday-acts{margin-top:4px}
#ppKidSchool .pp-lunchday.is-pack,#ppSchedule .pp-lunchday.is-pack{background:var(--pp-warn-bg);border-color:var(--pp-warn);border-left-width:4px}
#ppKidSchool .pp-lunchday.is-pack .pp-lunch-choice,#ppSchedule .pp-lunchday.is-pack .pp-lunch-choice{font-weight:700;color:var(--pp-warn)}
#ppKidSchool .pp-lunchday--off,#ppSchedule .pp-lunchday--off{border-left-color:var(--pp-line-soft)}
#ppKidSchool .pp-lunch-pick,#ppSchedule .pp-lunch-pick{display:flex;flex-wrap:wrap;gap:4px}
#ppKidSchool .pp-lunch-opt.is-on,#ppSchedule .pp-lunch-opt.is-on{background:var(--pp-accent);color:var(--pp-accent-ink);border-color:var(--pp-accent)}
#ppKidSchool .pp-lunch-opt--pack.is-on,#ppSchedule .pp-lunch-opt--pack.is-on{background:var(--pp-warn);border-color:var(--pp-warn)}
#ppKidSchool .pp-lunch-opt:disabled,#ppSchedule .pp-lunch-opt:disabled{cursor:progress;opacity:.6}
#ppKidSchool .pp-lunch-note,#ppSchedule .pp-lunch-note{font-size:12px}
#ppSchedule .pp-lunchcell{padding:3px 6px;font-size:12.5px}
#ppSchedule .pp-lunchcell>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center}
#ppSchedule .pp-lunchcell .pp-more{display:flex;flex-direction:column;gap:4px;margin-top:4px}
/* Dark mode beyond Today (Phase D) */
/* Every page but Family today follows the phone or computer's dark setting, or data-theme on <html>
   (the same two switches .pp-x uses). Each token is light-dark(light, dark): the light half is the
   value at the top of this file, unchanged, so the light page is exactly as before. Only where the
   browser understands light-dark() — an older one keeps the light page. The dark values are the
   design's (#172630 page, #243642 panel, #edf4fa text, #b6c8d5 grey, #496071 line, #9bd1ff blue,
   #29495e soft blue, #514227/#ffd398 amber, #9fdbbe green); the ones the design has no dark
   value for (red, the shared row's lilac, today's cream) are picked to keep 4.5:1 for small text.
   Text on the blue (--pp-accent-ink) and on the red badge (--pp-on-fail) turns dark ink, because
   both fills turn light. */
@supports (color: light-dark(#000,#fff)){
  :root{
    --pp-bg:light-dark(#fff,#243642); --pp-page:light-dark(#edf3f8,#172630); --pp-ink:light-dark(#21384c,#edf4fa);
    --pp-muted:light-dark(#5b6e7f,#b6c8d5); --pp-faint:light-dark(#5b6e7f,#b6c8d5); --pp-sub:light-dark(#617789,#b6c8d5);
    --pp-line:light-dark(#cfdee8,#496071); --pp-line-soft:light-dark(#e3edf4,#34495a);
    --pp-accent:light-dark(#195c91,#9bd1ff); --pp-accent-ink:light-dark(#fff,#172630); --pp-accent-wash:light-dark(#eaf3fb,#29495e); --pp-accent-soft:light-dark(#cfe2f2,#3d6680);
    --pp-ride:light-dark(#eaf3fb,#29495e); --pp-ride-line:light-dark(#b9d2ee,#4f7896);
    --pp-today:light-dark(#fff8e6,#3a3524); --pp-shared:light-dark(#f6f4fb,#2f3048); --pp-shared-line:light-dark(#d9d2ee,#4f4b70);
    --pp-warn:light-dark(#805317,#ffd398); --pp-warn-bg:light-dark(#fff1d9,#514227); --pp-ok:light-dark(#286a50,#9fdbbe); --pp-good:light-dark(#286a50,#9fdbbe); --pp-good-bg:light-dark(#e3f4e8,#1f4034);
    --pp-fail:light-dark(#a3352b,#ffb4a8); --pp-fail-bg:light-dark(#f9ecea,#4a2b2a); --pp-fail-line:light-dark(#e7c0ba,#7d4640);
    --pp-focus:light-dark(#195c91,#9bd1ff); --pp-on-fail:light-dark(#fff,#172630);
    color-scheme:light;
  }
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark}}
  :root[data-theme="dark"]{color-scheme:dark}
  /* The New event form's boxes never set a background, so the browser's own grey would show in
     the dark; they take the panel's. :where() keeps this below any rule that does set one, and in
     the light the panel is the same white the browser drew. */
  :where(.pp-old-host input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file]),.pp-old-host textarea){background-color:var(--pp-bg)}
  /* A text box's hint (placeholder) is the browser's #757575 — fine on white, under 3:1 on the
     dark panels. Dark only, so the light page keeps the browser's; Family today keeps it too. */
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) :not(#ppToday *)::placeholder{color:var(--pp-muted)}}
  :root[data-theme="dark"] :not(#ppToday *)::placeholder{color:var(--pp-muted)}
  /* Family today is frozen, so none of this reaches it:
     - the Old today view (the page without .pp-x) keeps its light look on the dark page;
     - inside the new view (.pp-x, which switches to dark on its own) the few board classes it
       borrows (.pp-countdown, .pp-fail, .pp-btn …) keep the plain light values they had before.
     Only the lines around it — the "put together at" stamp and a failure line — follow the page,
     so they stay readable once the page behind them is dark. */
  #ppToday:not(:has(.pp-x)){color-scheme:light}
  #ppToday .pp-x{
    --pp-bg:#fff; --pp-page:#edf3f8; --pp-ink:#21384c; --pp-muted:#5b6e7f; --pp-faint:#5b6e7f; --pp-sub:#617789;
    --pp-line:#cfdee8; --pp-line-soft:#e3edf4;
    --pp-accent:#195c91; --pp-accent-ink:#fff; --pp-accent-wash:#eaf3fb; --pp-accent-soft:#cfe2f2;
    --pp-ride:#eaf3fb; --pp-ride-line:#b9d2ee;
    --pp-today:#fff8e6; --pp-shared:#f6f4fb; --pp-shared-line:#d9d2ee;
    --pp-warn:#805317; --pp-warn-bg:#fff1d9; --pp-ok:#286a50; --pp-good:#286a50; --pp-good-bg:#e3f4e8;
    --pp-fail:#a3352b; --pp-fail-bg:#f9ecea; --pp-fail-line:#e7c0ba;
    --pp-focus:#195c91; --pp-on-fail:#fff;
  }
}

/* Readability touch-up (2026-10-28). The design grey reads 4.15:1 on the soft blue, under the 4.5
   small text needs, so text on the soft-blue boxes uses the ink: the School agenda's day label (the
   design's own .date-block small is ink) and the help line under the Trips final-okay button. */
#ppTrips .pp-trip-okay .pp-muted{color:var(--pp-ink)}

/* Family today bag sections (2026-10-28). One section per class in "Bags & preparation", a thin
   line between them, the class name and time on top — the family packs a bag per class. */
.pp-x-bag{padding:10px 0 4px;border-top:1px solid var(--x-line);margin-top:8px}
.pp-x-bag:first-of-type{border-top:0;margin-top:2px}
.pp-x .pp-x-bag-t{margin:0 0 2px}
.pp-x .pp-x-bag-t .pp-x-sub{margin:0}
.pp-x-bag .pp-x-tag{margin-top:4px}

/* Family today readability (2026-10-28, Founder1: "Yes, fix them"). Colours only. The small grey
   labels (period hours, stamps, the weather line) read 4.15:1 on the soft blue in light, so their
   light shade is the board's own muted grey (4.7:1); dark keeps its value. The ride countdown kept
   the light board grey on the dark card (2.37:1), so dark gets the Today grey for dark (7.3:1). */
.pp-x small{color:light-dark(#5b6e7f,#b6c8d5)}
.pp-x .pp-countdown{color:light-dark(#5b6e7f,#b6c8d5)}

/* "Leave by" with live traffic on the ride cards (today.js trafficLine). Amber when traffic makes
   the ride late — a warning, not a failure; red stays for a check that failed (.pp-fail). */
.pp-traffic{margin:4px 0 0;font-size:14px}
.pp-traffic.pp-fail{margin:6px 0}
.pp-traffic--late{background:var(--pp-warn-bg);color:var(--pp-warn);border-radius:8px;padding:6px 10px}
.pp-traffic--late .pp-muted{color:inherit;opacity:.85}

/* Kept from the Old today view when it retired (2026-11-01, Founder1: "Yes, tidy it up"): the
   Refresh button beside "Updated", and the tap-to-open "Where this comes from" notes. The button
   is a full 44px tap on a phone; the notes' summaries use Today's readable small grey. */
.pp-x-title>small{margin-left:auto}
.pp-x-refresh{min-height:44px;font-size:14px;font-weight:650}
.pp-x-src summary{font-size:12px;color:light-dark(#5b6e7f,#b6c8d5);cursor:pointer}
.pp-x-src p{margin:6px 0 0;font-size:13px}
.pp-x-weather>.pp-x-src{flex-basis:100%;margin-top:0}
.pp-x-bag .pp-x-src{margin-top:6px}