/* Parent Portal: the front-end blocks. The same two colors as the coordinator
   screens, printed as custom properties by Appearance::css(); a block wraps its
   markup in .pp-front so nothing here touches the theme, and nothing of the
   theme's reaches in (issue 56, decision 0036). The rules of the house:

   - Every rule is scoped under .pp-front, the wrapper every block carries, so
     a plugin rule for a class is (0,2,0) in specificity and outranks a theme's
     content rule, `.entry-content a` or Elementor's `.elementor-kit-7 a`, at
     (0,1,1).
   - A theme's rule with a state, `.entry-content a:hover` at (0,2,1), outranks
     that, so a link or button class states its look in every state: one rule
     for what holds in all six (plain, :link, :visited, :hover, :focus, :active),
     then one for what changes under the pointer. The properties a theme sets
     on a state are color, text-decoration, border-bottom, box-shadow, and
     background; those are what the state rules carry, never size or spacing.
   - The baseline right below names, for each element a theme styles, every
     property it is likely to set. It names the wrapper's element too,
     `:is(div, main).pp-front a` at (0,1,2), so it outranks the theme's rule for
     the same element by a hair and stays under every class rule in this file.
   - Where the plugin paints a surface it names the ink: a white card, grid,
     panel, or field says its text is dark, so a theme's light-on-dark body
     text never lands on it.
   - A theme that styles content by an id, `#content a`, outranks all of this.
     No current default does; a theme's keyboard-focus style may still show,
     which is that theme's accessibility choice. */
:root {
	--pp-accent: #1f3a5f; --pp-on-accent: #ffffff; --pp-accent-dark: #192e4c; --pp-accent-light: #dee2e7;
	--pp-accent-80: rgba(31, 58, 95, 0.8); --pp-accent-60: rgba(31, 58, 95, 0.6); --pp-accent-40: rgba(31, 58, 95, 0.4); --pp-accent-20: rgba(31, 58, 95, 0.2); --pp-accent-10: rgba(31, 58, 95, 0.1);
	--pp-secondary: #6b7280; --pp-on-secondary: #ffffff; --pp-secondary-dark: #565b66; --pp-secondary-light: #e9eaec;
	--pp-secondary-80: rgba(107, 114, 128, 0.8); --pp-secondary-60: rgba(107, 114, 128, 0.6); --pp-secondary-40: rgba(107, 114, 128, 0.4); --pp-secondary-20: rgba(107, 114, 128, 0.2); --pp-secondary-10: rgba(107, 114, 128, 0.1);
}

/* The baseline: what a theme is likely to set on each element the blocks use,
   stated here so the blocks look the same under any theme. */
.pp-front, .pp-front *, .pp-front *::before, .pp-front *::after { box-sizing: border-box; }
:is(div, main).pp-front a { display: inline; margin: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-underline-offset: auto; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentColor; }
:is(div, main).pp-front a, :is(div, main).pp-front a:link, :is(div, main).pp-front a:visited, :is(div, main).pp-front a:hover, :is(div, main).pp-front a:focus, :is(div, main).pp-front a:active { color: var(--pp-accent-dark); text-decoration: underline; border-bottom: 0; box-shadow: none; background-color: transparent; background-image: none; text-shadow: none; }
:is(div, main).pp-front a:hover, :is(div, main).pp-front a:focus { color: var(--pp-accent); }
:is(div, main).pp-front :is(h1, h2, h3, h4) { padding: 0; border: 0; background: transparent; letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: none; }
:is(div, main).pp-front p { margin: 0 0 1em; padding: 0; font-size: inherit; line-height: inherit; }
:is(div, main).pp-front :is(ul, ol) { margin: 0 0 1em; padding: 0 0 0 1.2em; list-style: disc; }
:is(div, main).pp-front :is(ul, ol) > li { margin: 0; padding: 0; font-size: inherit; line-height: inherit; }
:is(div, main).pp-front :is(ul, ol) > li::marker { color: inherit; }
:is(div, main).pp-front :is(dl, dt, dd) { margin: 0; padding: 0; border: 0; background: transparent; float: none; width: auto; font: inherit; letter-spacing: normal; text-transform: none; color: inherit; }
:is(div, main).pp-front strong { color: inherit; font-weight: 700; }
:is(div, main).pp-front :is(img, svg) { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
:is(div, main).pp-front :is(button, select, textarea, input, summary, label) { font: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; color: inherit; }
:is(div, main).pp-front :is(button, select) { margin: 0; min-width: 0; min-height: 0; width: auto; height: auto; line-height: 1.4; background-image: none; box-shadow: none; transform: none; }
:is(div, main).pp-front :is(details, form, summary) { margin: 0; padding: 0; border: 0; background: transparent; }
:is(div, main).pp-front summary { list-style: none; }
:is(div, main).pp-front summary::-webkit-details-marker { display: none; }
:is(div, main).pp-front label { display: inline; margin: 0; font-weight: inherit; }

/* The pieces every block shares: buttons, chips, cards. A button is an a, a
   button, a summary, or a label, so its states cover all four. */
.pp-front .pp-btn { display: inline-block; margin: 0; padding: 10px 18px; min-width: 0; min-height: 0; width: auto; border: 1px solid transparent; border-radius: 4px; font: inherit; font-weight: 600; line-height: 1.4; letter-spacing: normal; text-transform: none; text-align: center; cursor: pointer; }
.pp-front .pp-btn, .pp-front .pp-btn:link, .pp-front .pp-btn:visited, .pp-front .pp-btn:hover, .pp-front .pp-btn:focus, .pp-front .pp-btn:active { text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; background-image: none; box-shadow: none; text-shadow: none; transform: none; }
.pp-front .pp-btn-accent, .pp-front .pp-btn-accent:link, .pp-front .pp-btn-accent:visited, .pp-front .pp-btn-accent:focus, .pp-front .pp-btn-accent:active { background-color: var(--pp-accent); color: var(--pp-on-accent); border-color: var(--pp-accent-dark); }
.pp-front .pp-btn-accent:hover { background-color: var(--pp-accent-dark); color: var(--pp-on-accent); border-color: var(--pp-accent-dark); }
.pp-front .pp-btn-secondary, .pp-front .pp-btn-secondary:link, .pp-front .pp-btn-secondary:visited, .pp-front .pp-btn-secondary:hover, .pp-front .pp-btn-secondary:focus, .pp-front .pp-btn-secondary:active { background-color: var(--pp-secondary); color: var(--pp-on-secondary); border-color: var(--pp-secondary-dark); }
.pp-front .pp-btn-outline, .pp-front .pp-btn-outline:link, .pp-front .pp-btn-outline:visited, .pp-front .pp-btn-outline:hover, .pp-front .pp-btn-outline:focus, .pp-front .pp-btn-outline:active { background-color: transparent; color: var(--pp-accent-dark); border-color: var(--pp-accent); }
.pp-front .pp-btn-tint, .pp-front .pp-btn-tint:link, .pp-front .pp-btn-tint:visited, .pp-front .pp-btn-tint:hover, .pp-front .pp-btn-tint:focus, .pp-front .pp-btn-tint:active { background-color: var(--pp-accent-10); color: var(--pp-accent-dark); border-color: var(--pp-accent-20); }
.pp-front .pp-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pp-accent-20); color: var(--pp-accent-dark); font-size: 0.85em; font-weight: 600; }
.pp-front .pp-card { border: 1px solid var(--pp-accent-40); border-left: 5px solid var(--pp-accent); border-radius: 6px; padding: 12px 16px; background: #fff; color: #1d2327; }
.pp-front .pp-card-title { color: var(--pp-accent-dark); margin: 0 0 6px; }
.pp-front .pp-muted { color: var(--pp-secondary-dark); }

/* The Calendar block (decision 0021): the bar, the month grid, the list, and print. */
.pp-front.pp-cal { max-width: 100%; }
.pp-front .pp-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; }
.pp-front .pp-cal-switch { display: inline-flex; border: 1px solid var(--pp-accent); border-radius: 6px; overflow: hidden; }
.pp-front .pp-cal-switch a { padding: 6px 14px; font-weight: 600; line-height: 1.4; }
.pp-front .pp-cal-switch a, .pp-front .pp-cal-switch a:link, .pp-front .pp-cal-switch a:visited, .pp-front .pp-cal-switch a:hover, .pp-front .pp-cal-switch a:focus, .pp-front .pp-cal-switch a:active { text-decoration: none; color: var(--pp-accent-dark); background-color: transparent; }
.pp-front .pp-cal-switch a.is-on, .pp-front .pp-cal-switch a.is-on:link, .pp-front .pp-cal-switch a.is-on:visited, .pp-front .pp-cal-switch a.is-on:hover, .pp-front .pp-cal-switch a.is-on:focus, .pp-front .pp-cal-switch a.is-on:active { background-color: var(--pp-accent); color: var(--pp-on-accent); }
.pp-front .pp-cal-months, .pp-front .pp-cal-range { display: inline-flex; align-items: center; gap: 8px; }
.pp-front.pp-cal[data-mode="list"] .pp-cal-months, .pp-front.pp-cal[data-mode="list"] .pp-cal-grid-wrap { display: none; }
.pp-front.pp-cal[data-mode="grid"] .pp-cal-range, .pp-front.pp-cal[data-mode="grid"] .pp-cal-list-wrap { display: none; }
/* The arrow is drawn, not typed (issue 61): a glyph sits where the theme's font puts it in its line box, and under one theme that was off the circle's center. The glyph stays in the markup for a reader and for a page without CSS; here it is sized to nothing and a two-sided border, rotated, is the chevron, in the circle's own color. */
.pp-front .pp-cal-prev, .pp-front .pp-cal-next { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; }
.pp-front .pp-cal-prev::before, .pp-front .pp-cal-next::before { content: ""; display: block; width: 9px; height: 9px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.pp-front .pp-cal-prev::before { margin-left: 4px; }
.pp-front .pp-cal-next::before { border-width: 0 2px 2px 0; transform: rotate(-45deg); margin-right: 4px; }
.pp-front :is(.pp-cal-prev, .pp-cal-next), .pp-front :is(.pp-cal-prev, .pp-cal-next):link, .pp-front :is(.pp-cal-prev, .pp-cal-next):visited, .pp-front :is(.pp-cal-prev, .pp-cal-next):hover, .pp-front :is(.pp-cal-prev, .pp-cal-next):focus, .pp-front :is(.pp-cal-prev, .pp-cal-next):active { border: 1px solid var(--pp-accent-40); color: var(--pp-accent-dark); text-decoration: none; background-color: transparent; }
.pp-front :is(.pp-cal-prev, .pp-cal-next):hover, .pp-front :is(.pp-cal-prev, .pp-cal-next):focus { border-color: var(--pp-accent); }
.pp-front .pp-cal-prev.is-off, .pp-front .pp-cal-next.is-off { opacity: 0.35; }
/* The month's name is a drop-down of the year's months (issue 44): the browser's own picker, which a phone opens as a wheel, dressed as the bold name it replaces, with a chevron drawn beside it in the accent. Go submits it without script and is hidden with it. */
.pp-front .pp-cal-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.pp-front .pp-cal-month-wrap { position: relative; display: inline-block; }
.pp-front .pp-cal-month-wrap::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border: solid var(--pp-accent-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.pp-front .pp-cal-month-name { width: auto; height: auto; min-width: 11ch; max-width: 100%; margin: 0; padding: 4px 30px 4px 12px; border: 1px solid var(--pp-accent-40); border-radius: 6px; background: #fff; color: var(--pp-accent-dark); font: inherit; font-size: 1.15em; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; text-align: center; box-shadow: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.pp-front .pp-cal-month-name:hover, .pp-front .pp-cal-month-name:focus { border-color: var(--pp-accent); background: #fff; color: var(--pp-accent-dark); box-shadow: none; }
.pp-front .pp-cal-month-name:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-front .pp-cal-go, .pp-front .pp-cal-print { margin: 0; padding: 5px 12px; min-width: 0; min-height: 0; border-radius: 4px; font: inherit; font-weight: 600; line-height: 1.4; letter-spacing: normal; text-transform: none; cursor: pointer; }
.pp-front :is(.pp-cal-go, .pp-cal-print), .pp-front :is(.pp-cal-go, .pp-cal-print):hover, .pp-front :is(.pp-cal-go, .pp-cal-print):focus, .pp-front :is(.pp-cal-go, .pp-cal-print):active { border: 1px solid var(--pp-accent); background: #fff; color: var(--pp-accent-dark); box-shadow: none; text-shadow: none; transform: none; }
.pp-front :is(.pp-cal-go, .pp-cal-print):hover, .pp-front :is(.pp-cal-go, .pp-cal-print):focus { background: var(--pp-accent-10); }
.pp-front.pp-cal.pp-js .pp-cal-go { display: none; }
.pp-front .pp-cal-print { margin-left: 6px; }
.pp-front .pp-cal-range a { padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.pp-front .pp-cal-range a, .pp-front .pp-cal-range a:link, .pp-front .pp-cal-range a:visited, .pp-front .pp-cal-range a:hover, .pp-front .pp-cal-range a:focus, .pp-front .pp-cal-range a:active { text-decoration: none; color: var(--pp-accent-dark); background-color: transparent; }
.pp-front .pp-cal-range a.is-on, .pp-front .pp-cal-range a.is-on:link, .pp-front .pp-cal-range a.is-on:visited, .pp-front .pp-cal-range a.is-on:hover, .pp-front .pp-cal-range a.is-on:focus, .pp-front .pp-cal-range a.is-on:active { background-color: var(--pp-accent-20); }
/* The month grid: a table, seven equal columns, the days around the month dimmed and empty, today marked. */
.pp-front.pp-cal .pp-cal-grid { width: 100%; min-width: 0; margin: 0; border-collapse: collapse; border-spacing: 0; table-layout: fixed; border: 1px solid var(--pp-accent-40); background: #fff; color: #1d2327; font-family: inherit; }
/* The grid's rows and cells carry the block's wrapper pair, three classes, so a theme's striped rows, `.entry-content tbody tr:nth-child(odd) td` at (0,2,3), never reach them. */
.pp-front.pp-cal .pp-cal-grid tr { background: transparent; }
.pp-front .pp-cal-caption { display: none; }
.pp-front.pp-cal .pp-cal-grid th { padding: 6px 4px; background: var(--pp-accent-10); color: var(--pp-accent-dark); font-family: inherit; font-size: 0.85em; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; text-align: left; vertical-align: bottom; border: 1px solid var(--pp-accent-20); }
.pp-front .pp-cal-dow-short { display: none; }
.pp-front.pp-cal .pp-cal-grid td { vertical-align: top; height: 96px; padding: 4px; border: 1px solid var(--pp-accent-20); background: #fff; color: #1d2327; font-size: 0.85em; line-height: 1.3; letter-spacing: normal; text-transform: none; text-align: left; }
.pp-front.pp-cal .pp-cal-grid td.pp-cal-out { background: var(--pp-secondary-10); }
.pp-front .pp-cal-daynum { display: inline-block; min-width: 22px; padding: 1px 4px; border-radius: 11px; color: var(--pp-secondary-dark); font-weight: 600; text-align: center; }
.pp-front .pp-cal-today .pp-cal-daynum { background: var(--pp-accent); color: var(--pp-on-accent); }
.pp-front .pp-cal-entries { list-style: none; margin: 4px 0 0; padding: 0; }
.pp-front .pp-cal-entries li { margin: 0 0 3px; padding: 0; list-style: none; font-size: 1em; line-height: 1.3; }
/* An entry is a link, which is what a theme styles most: the entry says its size, weight, and shape itself, in every state. */
.pp-front .pp-cal-entry { display: block; margin: 0; padding: 2px 6px; border-radius: 4px; font: inherit; line-height: 1.3; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.pp-front .pp-cal-entry, .pp-front .pp-cal-entry:link, .pp-front .pp-cal-entry:visited, .pp-front .pp-cal-entry:hover, .pp-front .pp-cal-entry:focus, .pp-front .pp-cal-entry:active { text-decoration: none; border-bottom: 0; box-shadow: none; background-image: none; text-shadow: none; }
.pp-front .pp-cal-opp, .pp-front .pp-cal-opp:link, .pp-front .pp-cal-opp:visited, .pp-front .pp-cal-opp:active { background-color: var(--pp-accent); color: var(--pp-on-accent); }
.pp-front .pp-cal-opp:hover, .pp-front .pp-cal-opp:focus { background-color: var(--pp-accent-dark); color: var(--pp-on-accent); }
.pp-front .pp-cal-info, .pp-front .pp-cal-info:link, .pp-front .pp-cal-info:visited, .pp-front .pp-cal-info:active { background-color: var(--pp-secondary-10); color: #1d2327; border-left: 3px solid var(--pp-secondary); }
.pp-front .pp-cal-info:hover, .pp-front .pp-cal-info:focus { background-color: var(--pp-secondary-20); color: #1d2327; border-left: 3px solid var(--pp-secondary); }
.pp-front .pp-cal-entry-time { color: var(--pp-secondary-dark); font-weight: 600; }
/* The count, or Completed, sits after a vertical bar, so "Fall Dance 9 open" never reads as one name (Zac, 2026-10-06). */
.pp-front .pp-cal-entry-sep { margin: 0 3px; opacity: 0.55; }
.pp-front .pp-cal-entry-count { display: inline-block; font-weight: 600; }
/* A day past three entries folds the rest behind "+N more" once script runs (CAL-22); without it every entry shows and the day grows taller. */
.pp-front.pp-cal.pp-js .pp-cal-cell:not(.is-open) .pp-cal-entries li:nth-child(n+4) { display: none; }
.pp-front .pp-cal-more { display: block; width: auto; min-width: 0; min-height: 0; margin: 2px 0 0; padding: 1px 4px; border-radius: 0; font: inherit; font-size: 0.85em; font-weight: 600; line-height: 1.3; letter-spacing: normal; text-transform: none; cursor: pointer; }
.pp-front .pp-cal-more, .pp-front .pp-cal-more:hover, .pp-front .pp-cal-more:focus, .pp-front .pp-cal-more:active { border: 0; background: transparent; color: var(--pp-accent-dark); text-decoration: underline; box-shadow: none; text-shadow: none; transform: none; }
.pp-front.pp-cal:not(.pp-js) .pp-cal-more { display: none; }
/* The phone's marks (CAL-21): hidden on a desktop, where the titles are. The icon is one color, filled or outlined by the stylesheet. */
.pp-front .pp-cal-marks { display: none; }
.pp-front .pp-cal-mark-icon { display: inline-block; width: 14px; height: 14px; vertical-align: middle; }
.pp-front .pp-cal-mark-open .pp-cal-mark-icon, .pp-front .pp-cal-mark-open .pp-cal-mark-icon * { fill: currentColor; stroke: none; }
.pp-front .pp-cal-mark-other .pp-cal-mark-icon, .pp-front .pp-cal-mark-other .pp-cal-mark-icon * { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* The mascot as the mark (SET-32): a white tile whatever the image's background, in color on a day with volunteering, full and past days included (decision 0047), black and white otherwise. */
.pp-front .pp-cal-mark-img { width: 22px; height: 22px; object-fit: contain; background: #fff; border-radius: 4px; }
.pp-front .pp-cal-mark-other .pp-cal-mark-img { filter: grayscale(1); opacity: 0.8; }
/* The hover card (CAL-22): small, about one cell, over the grid. */
.pp-front .pp-cal-grid-wrap { position: relative; }
.pp-front .pp-cal-card { position: absolute; z-index: 30; width: 270px; max-width: calc(100% - 8px); padding: 10px 12px 12px; background: #fff; color: #1d2327; border: 1px solid var(--pp-accent-40); border-top: 4px solid var(--pp-accent); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); font-size: 0.9em; line-height: 1.4; text-align: left; }
.pp-front .pp-cal-card[hidden] { display: none; }
.pp-front .pp-cal-card { overflow: hidden; }
.pp-front .pp-cal-card p { position: relative; margin: 0 0 4px; }
/* The look (decision 0025): one pictogram in the accent at 13 percent behind the words, bottom right, bleeding off the corner. */
.pp-front .pp-cal-card-look { position: absolute; right: -14px; bottom: -16px; width: 132px; height: 132px; color: var(--pp-accent); opacity: 0.13; pointer-events: none; }
.pp-front .pp-cal-card-look[hidden] { display: none; }
.pp-front .pp-cal-card-look .pp-look { display: block; width: 100%; height: 100%; }
.pp-front .pp-cal-card p[hidden] { display: none; }
.pp-front .pp-cal-card-title { margin-bottom: 6px; font-weight: 700; font-size: 1.3em; line-height: 1.2; color: var(--pp-accent-dark); }
.pp-front .pp-cal-card-kind { margin-bottom: 8px; }
.pp-front .pp-cal-card-when, .pp-front .pp-cal-card-place { color: var(--pp-secondary-dark); }
.pp-front .pp-cal-card-date, .pp-front .pp-cal-card-time { display: flex; align-items: baseline; gap: 6px; }
.pp-front .pp-cal-card-date { font-weight: 700; color: #1d2327; }
.pp-front .pp-cal-card-date[hidden], .pp-front .pp-cal-card-time[hidden] { display: none; }
/* The icons beside a date and a time (Zac, 2026-10-23): one em, in the words' color, never loaded from anywhere. */
.pp-front .pp-icon { flex: none; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; }
.pp-front .pp-cal-card-open { font-weight: 700; color: var(--pp-accent-dark); }
.pp-front .pp-cal-card-actions { margin-top: 10px; }
.pp-front .pp-cal-card .pp-btn { padding: 6px 14px; font-size: 0.95em; }
/* The day panel (CAL-21): under the grid on a phone, empty until a day is tapped. */
.pp-front .pp-cal-day { display: none; margin: 10px 0 0; padding: 10px 12px; background: #fff; color: #1d2327; border: 1px solid var(--pp-accent-40); border-left: 5px solid var(--pp-accent); border-radius: 0 6px 6px 0; }
.pp-front .pp-cal-day-title { margin: 0 0 4px; font-size: 1.05em; color: var(--pp-accent-dark); }
.pp-front .pp-cal-day-items { list-style: none; margin: 0; padding: 0; }
.pp-front .pp-cal-day-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; margin: 0; border-top: 1px solid var(--pp-accent-20); position: relative; overflow: hidden; }
.pp-front .pp-cal-day-item:first-child { border-top: 0; }
.pp-front .pp-cal-day-body { min-width: 0; }
.pp-front .pp-cal-day-time, .pp-front .pp-cal-day-place, .pp-front .pp-cal-day-open { display: block; font-size: 0.9em; color: var(--pp-secondary-dark); }
.pp-front .pp-cal-day-open { font-weight: 600; color: var(--pp-accent-dark); }
.pp-front .pp-cal-day-name, .pp-front .pp-cal-day-name:link, .pp-front .pp-cal-day-name:visited, .pp-front .pp-cal-day-name:hover, .pp-front .pp-cal-day-name:focus, .pp-front .pp-cal-day-name:active { font-weight: 700; color: var(--pp-accent-dark); text-decoration: none; border-bottom: 0; box-shadow: none; background-color: transparent; background-image: none; }
.pp-front .pp-cal-day-name:hover, .pp-front .pp-cal-day-name:focus { text-decoration: underline; }
.pp-front .pp-cal-day-details { flex: 0 0 auto; padding: 6px 12px; font-size: 0.9em; }
/* The look follows the event (decision 0025, amended 2026-09-29): the same drawing the card carries sits behind a row's words, inside the words' block so it is never behind the Details button, and behind the event page's facts; decoration only. As a texture, not a picture (Zac, 2026-10-01): the words' block fills the row, so the drawing lands in the same place on every row whatever the title's length, oversized, faint, tilted, and cropped by the row. Behind the start of the words, bleeding off the row's left edge, never in the middle of the panel, where a stack of them drew the eye (Zac, 2026-10-01). */
.pp-front .pp-cal-day-body, .pp-front .pp-cal-body { flex: 1 1 auto; }
.pp-front .pp-cal-day-body, .pp-front .pp-cal-body, .pp-front .pp-event-facts p { position: relative; z-index: 1; }
.pp-front .pp-cal-day-look, .pp-front .pp-cal-item-look { position: absolute; left: -30px; top: 50%; width: 150px; height: 150px; transform: translateY(-50%) rotate(-10deg); z-index: -1; color: var(--pp-accent); opacity: 0.07; pointer-events: none; }
.pp-front .pp-cal-item-look { left: auto; right: -12px; width: 110px; height: 110px; }
.pp-front .pp-event-look { position: absolute; right: -30px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%) rotate(-10deg); color: var(--pp-accent); opacity: 0.08; pointer-events: none; }
.pp-front .pp-cal-day-look .pp-look, .pp-front .pp-cal-item-look .pp-look, .pp-front .pp-event-look .pp-look { display: block; width: 100%; height: 100%; }
/* The list: grouped by month, a date badge beside each event. */
/* A list reads as a column, so it stops at a reading width, centered, with the switch and the ranges over it in the same column; the month grid and its bar keep the theme's full width (Zac, 2026-10-01; decision 0024, amended). */
.pp-front .pp-cal-list-wrap, .pp-front.pp-cal[data-mode="list"] .pp-cal-bar { max-width: 760px; margin-left: auto; margin-right: auto; }
.pp-front .pp-cal-month { margin: 18px 0 8px; color: var(--pp-accent-dark); }
.pp-front .pp-cal-items { list-style: none; margin: 0; padding: 0; }
.pp-front .pp-cal-item { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--pp-accent-20); position: relative; overflow: hidden; }
.pp-front .pp-cal-date { flex: 0 0 54px; padding: 5px 0; border-radius: 6px; background: var(--pp-secondary-10); color: var(--pp-secondary-dark); text-align: center; }
.pp-front .pp-cal-item-opp .pp-cal-date { background: var(--pp-accent); color: var(--pp-on-accent); }
/* An opportunity's tile is a link to the event, as the title is (issue 38): it keeps the tile's look whatever the theme does to links, and darkens a step under the pointer or on a tap. */
.pp-front a.pp-cal-date { display: block; margin: 0; padding: 5px 0; font: inherit; letter-spacing: normal; text-transform: none; }
.pp-front a.pp-cal-date, .pp-front a.pp-cal-date:link, .pp-front a.pp-cal-date:visited, .pp-front a.pp-cal-date:hover, .pp-front a.pp-cal-date:focus, .pp-front a.pp-cal-date:active { color: var(--pp-on-accent); background-color: var(--pp-accent); text-decoration: none; border-bottom: 0; box-shadow: none; background-image: none; }
.pp-front a.pp-cal-date:hover, .pp-front a.pp-cal-date:focus, .pp-front a.pp-cal-date:active { background-color: var(--pp-accent-dark); }
.pp-front .pp-cal-dow { display: block; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; }
.pp-front .pp-cal-dom { display: block; font-size: 1.5em; font-weight: 700; line-height: 1.1; }
.pp-front .pp-cal-body { min-width: 0; }
.pp-front .pp-cal-title, .pp-front .pp-cal-title:link, .pp-front .pp-cal-title:visited, .pp-front .pp-cal-title:hover, .pp-front .pp-cal-title:focus, .pp-front .pp-cal-title:active { font-weight: 700; color: var(--pp-accent-dark); text-decoration: none; border-bottom: 0; box-shadow: none; background-color: transparent; background-image: none; }
.pp-front .pp-cal-title:hover, .pp-front .pp-cal-title:focus { text-decoration: underline; }
.pp-front .pp-cal-when { color: var(--pp-secondary-dark); font-size: 0.95em; }
.pp-front .pp-cal-fill { color: var(--pp-accent-dark); font-weight: 600; font-size: 0.95em; }
.pp-front .pp-cal-empty { color: var(--pp-secondary-dark); }
@media (max-width: 640px) {
	/* The months bar on a phone: the drop-down at the copy's size, free to wrap so nothing runs off the screen (issue 44), and no Print, since nobody prints a Letter sheet from a phone (issue 109; Zac, 2026-10-20). The button stays in the markup for a laptop and for the sheet. */
	.pp-front .pp-cal-months { flex-wrap: wrap; }
	.pp-front .pp-cal-month-name { font-size: 1em; padding: 5px 26px 5px 10px; }
	.pp-front .pp-cal-print { display: none; }
	.pp-front.pp-cal .pp-cal-grid td { height: 64px; padding: 2px; font-size: 0.7em; }
	.pp-front .pp-cal-dow-long { display: none; }
	.pp-front .pp-cal-dow-short { display: inline; }
	.pp-front .pp-cal-entry { padding: 1px 3px; }
	/* On a phone a day holds its date and one mark, never titles: the mascot at 85 percent of the day's width, in color on a day with volunteering and gray otherwise, with the day's count beneath it; a tap shows the day below the grid (CAL-21). Without script the titles stay. */
	.pp-front.pp-cal.pp-js .pp-cal-entries, .pp-front.pp-cal.pp-js .pp-cal-more { display: none; }
	.pp-front.pp-cal.pp-js .pp-cal-marks { display: flex; flex-direction: column; align-items: center; gap: 2px; width: calc(100% + 4px); min-width: 0; min-height: 0; margin: 3px -2px 0; padding: 0; border-radius: 0; font: inherit; font-size: 1.05em; line-height: 1; letter-spacing: normal; text-transform: none; cursor: pointer; }
	.pp-front.pp-cal.pp-js .pp-cal-marks, .pp-front.pp-cal.pp-js .pp-cal-marks:hover, .pp-front.pp-cal.pp-js .pp-cal-marks:focus, .pp-front.pp-cal.pp-js .pp-cal-marks:active { border: 0; background: transparent; color: var(--pp-accent); box-shadow: none; text-shadow: none; transform: none; }
	.pp-front .pp-cal-mark { display: flex; justify-content: center; width: 100%; }
	.pp-front .pp-cal-mark .pp-cal-mark-icon { width: 85%; height: auto; aspect-ratio: 1 / 1; }
	.pp-front .pp-cal-mark .pp-cal-mark-img { padding: 3px; box-sizing: border-box; border-radius: 6px; }
	.pp-front .pp-cal-mark-n { font-weight: 700; font-size: 1em; }
	.pp-front .pp-cal-cell.pp-cal-has { cursor: pointer; }
	.pp-front.pp-cal .pp-cal-grid td.is-picked { background: var(--pp-accent); }
	.pp-front .pp-cal-cell.is-picked .pp-cal-daynum { color: var(--pp-on-accent); }
	.pp-front .pp-cal-cell.is-picked.pp-cal-today .pp-cal-daynum { background: var(--pp-on-accent); color: var(--pp-accent); }
	.pp-front.pp-cal.pp-js .pp-cal-cell.is-picked .pp-cal-marks, .pp-front.pp-cal.pp-js .pp-cal-cell.is-picked .pp-cal-marks:hover, .pp-front.pp-cal.pp-js .pp-cal-cell.is-picked .pp-cal-marks:focus, .pp-front.pp-cal.pp-js .pp-cal-cell.is-picked .pp-cal-marks:active { color: var(--pp-on-accent); }
	.pp-front.pp-cal.pp-js .pp-cal-day { display: block; }
	.pp-front.pp-cal.pp-js .pp-cal-day[hidden] { display: none; }
	.pp-front .pp-cal-card { display: none !important; }
}
@media print {
	/* The grid prints one month to a sheet, sideways, with nothing else from the block (CAL-4). */
	.pp-front .pp-cal-bar, .pp-front .pp-cal-list-wrap { display: none !important; }
	.pp-front .pp-cal-grid-wrap { display: block !important; }
	.pp-front .pp-cal-caption { display: table-caption; margin: 0 0 6pt; font-size: 16pt; font-weight: 700; text-align: left; }
	.pp-front.pp-cal .pp-cal-grid th { padding: 3pt 4pt; font-size: 8pt; }
	.pp-front.pp-cal .pp-cal-grid td { height: 0.85in; padding: 2pt 3pt; font-size: 8pt; line-height: 1.2; }
	.pp-front .pp-cal-daynum { min-width: 0; padding: 0 3pt; font-size: 8pt; }
	.pp-front .pp-cal-entries { margin-top: 2pt; }
	.pp-front .pp-cal-entries li { margin-bottom: 1.5pt; }
	.pp-front .pp-cal-entry { padding: 1pt 3pt; line-height: 1.2; }
	.pp-front .pp-cal-grid tr { page-break-inside: avoid; }
	.pp-front .pp-cal-marks, .pp-front .pp-cal-more, .pp-front .pp-cal-card, .pp-front .pp-cal-day, .pp-front .pp-cal-day-look, .pp-front .pp-cal-item-look, .pp-front .pp-event-look { display: none !important; }
	.pp-front .pp-cal-entries li { display: block !important; }
	.pp-front .pp-cal-opp { background: #ddd !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.pp-front .pp-cal-info { background: #f3f3f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	@page { size: landscape; margin: 0.5in; }
	.pp-print-sheet .pp-front.pp-cal { padding: 0; }
}
.pp-print-sheet .pp-front .pp-cal-caption { display: table-caption; margin: 0 0 8px; font-size: 20px; font-weight: 700; text-align: left; color: #1d2327; }
/* An event's page: the facts above the description, the shifts below it. */
.pp-front .pp-event-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; border-left: 5px solid var(--pp-accent); border-radius: 0 6px 6px 0; background: var(--pp-accent-10); position: relative; overflow: hidden; }
.pp-front .pp-event-facts p { margin: 0; }
@media (max-width: 640px) {
	/* On a phone the facts block is narrow, so the look is smaller (Zac, 2026-10-01). */
	.pp-front .pp-event-look { right: -24px; width: 170px; height: 170px; }
}
/* The date and the time as two rows, bold behind their icons (Zac, 2026-10-23). */
.pp-front .pp-event-date, .pp-front .pp-event-time { display: flex; align-items: baseline; gap: 8px; }
.pp-front .pp-event-time { margin-top: 2px; color: var(--pp-secondary-dark); }
/* Each block's header, When, Where, Details: bold in the accent, a step larger than the copy (Zac, 2026-10-06). */
.pp-front .pp-event-label { display: block; margin: 0 0 4px; padding: 0; border: 0; color: var(--pp-accent-dark); font-family: inherit; font-size: 1.08em; font-weight: 700; line-height: 1.3; letter-spacing: normal; text-transform: none; text-decoration: underline dotted var(--pp-accent-60); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pp-front h2.pp-event-details-label { margin: 16px 0 6px; font-size: 1.08em; text-decoration: underline dotted var(--pp-accent-60); }
.pp-front.pp-event-details p { margin-top: 0; }
/* On a laptop When and Where sit side by side with a dotted line between them; on a phone they stack and the line goes (Zac, 2026-10-06). */
@media (min-width: 641px) {
	.pp-front .pp-event-when { flex: 0 0 auto; }
	.pp-front .pp-event-where { flex: 1 1 200px; min-width: 0; padding-left: 24px; border-left: 1px dotted var(--pp-accent-60); overflow-wrap: anywhere; }
}
.pp-front .pp-event-where a, .pp-front .pp-event-where a:link, .pp-front .pp-event-where a:visited, .pp-front .pp-event-where a:hover, .pp-front .pp-event-where a:focus, .pp-front .pp-event-where a:active { text-decoration: underline; font-weight: 600; color: var(--pp-accent-dark); border-bottom: 0; box-shadow: none; background-color: transparent; background-image: none; }
/* Add to my calendar steps back from the date and the time: smaller, 35px below them (Zac, 2026-10-23). Written as p.pp-event-tools so it outranks the facts box's margin: 0 on every paragraph above. */
.pp-front .pp-event-tools { flex-basis: 100%; }
.pp-front .pp-event-facts p.pp-event-tools { margin-top: 35px; }
.pp-front .pp-event-requirements { margin: 0 0 16px; border-left-color: var(--pp-secondary); }
/* A past opportunity leads with it, above the facts, big and bold (Zac, 2026-10-06). */
.pp-front .pp-event-past { margin: 0 0 16px; background: var(--pp-accent-10); color: var(--pp-accent-dark); font-size: 1.35em; line-height: 1.3; font-weight: 700; }
/* The shifts sit under a dotted rule, apart from the details (Zac, 2026-10-06). */
.pp-front.pp-event-shifts { margin-top: 20px; padding-top: 16px; border-top: 1px dotted var(--pp-accent-60); }
.pp-front .pp-event-shifts-title { margin: 0 0 8px; color: var(--pp-accent-dark); }
.pp-front .pp-shift-list { list-style: none; margin: 0; padding: 0; }
/* Issue 127: every row pads 10px at both sides, so solo shifts line up with a group's line. */
.pp-front .pp-shift { padding: 10px; margin: 0; border-bottom: 1px solid var(--pp-accent-20); }
.pp-front .pp-shift-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pp-front .pp-shift-main { flex: 1 1 auto; min-width: 0; }
.pp-front .pp-shift-when, .pp-front .pp-shift-hours { display: block; color: var(--pp-secondary-dark); font-size: 0.95em; }
/* Decisions 0057 and 0058: where the shift's work is, by name, and what it involves as chips in the accent's tint, under its time. */
.pp-front .pp-shift-place { display: block; color: var(--pp-accent-dark); font-size: 0.95em; }
.pp-front .pp-shift-demands { display: block; margin-top: 3px; }
.pp-front .pp-demand-chip { display: inline-block; margin: 0 6px 3px 0; padding: 1px 8px; border-radius: 999px; background: var(--pp-accent-20); color: var(--pp-accent-dark); font-size: 0.78em; font-weight: 700; line-height: 1.6; }
.pp-front .pp-shift-grouped .pp-shift-place { color: var(--pp-secondary-dark); }
.pp-front .pp-shift-side { text-align: right; flex: 0 1 auto; max-width: 60%; } /* gives way on a phone, so a long held line wraps instead of crushing the shift's time (issue 60) */
.pp-front .pp-shift-open { display: block; font-weight: 700; color: var(--pp-accent-dark); }
.pp-front .pp-shift-full .pp-shift-open { color: var(--pp-secondary-dark); }
/* Issue 32 (decision 0018, amended 2026-10-07): a shift full with its waitlist says Full in a green box with a check, a little celebratory, since the guild is covered. A fixed green, WordPress's own, 6.3:1 under white text; "Full · waitlist open" stays plain, since that shift still takes people. */
.pp-front .pp-shift-filled .pp-shift-open { display: inline-block; padding: 3px 10px 3px 8px; border-radius: 6px; background: var(--pp-full); color: #fff; font-weight: 800; line-height: 1.3; }
.pp-front .pp-shift-filled .pp-shift-open::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin: 0 5px -0.08em 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") no-repeat center / contain; }
.pp-front .pp-shift-filled .pp-shift-open.pp-changed { animation: pp-full-pop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pp-full-pop { from { transform: scale(0.7); } 60% { transform: scale(1.12); } to { transform: scale(1); } }
.pp-front .pp-event-signup-note { margin-top: 10px; }

/* Signing up (decision 0026): a whole shift row is the tap target, phone first. */
.pp-front .pp-shift-pick { cursor: pointer; margin: -6px -8px; padding: 6px 8px; border-radius: 6px; }
.pp-front .pp-shift-pick:hover { background: var(--pp-accent-10); }
/* The box is the browser's own, whatever the theme draws for its checkboxes. */
.pp-front .pp-shift-pick input[type="checkbox"], .pp-front .pp-choice input[type="checkbox"], .pp-front .pp-choice input[type="radio"] { flex: 0 0 auto; width: 22px; height: 22px; min-width: 0; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; accent-color: var(--pp-accent); -webkit-appearance: auto; appearance: auto; }
.pp-front .pp-shift-pick:has(input:checked) { background: var(--pp-accent-10); box-shadow: inset 4px 0 0 var(--pp-accent); }
.pp-front .pp-shift-adults { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 0; }
.pp-front .pp-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
.pp-front .pp-choices { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; }
.pp-front .pp-shift-held { display: block; margin: 4px 0 0; font-weight: 600; color: var(--pp-accent-dark); }
.pp-front .pp-shift-mine { box-shadow: inset 4px 0 0 var(--pp-accent); }
.pp-front .pp-shift-open.pp-changed { animation: pp-changed 1.6s ease-out; }
/* Decision 0051: more than three shifts of one name fold into a group, closed, that opens to its times. The browser's own disclosure; the caret is ours. */
.pp-front .pp-shift-group { margin: 0; padding: 0; border-bottom: 1px solid var(--pp-accent-20); }
/* The pill on a group's line, in the accent: what the line is and how many it holds (Zac, 2026-10-26). */
.pp-front .pp-group-chip { display: inline-block; margin: 0 0 0 8px; padding: 1px 9px; border-radius: 999px; background: var(--pp-accent); color: var(--pp-on-accent); font-size: 0.72em; font-weight: 800; line-height: 1.6; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; vertical-align: 2px; }
.pp-front .pp-group-chip-length { background: var(--pp-accent-20); color: var(--pp-accent-dark); }
.pp-front .pp-myv-group-fold .pp-group-chip { margin: 2px 6px 2px 0; }
/* Issue 127: the line keeps 10px at both sides, so the caret and the count sit inside the hover tint. */
.pp-front .pp-shift-fold > summary { list-style: none; position: relative; padding: 10px 10px 10px 40px; cursor: pointer; }
.pp-front .pp-shift-fold > summary::-webkit-details-marker { display: none; }
/* The caret is big enough to read as a control (Zac, 2026-10-23), and the line says so on hover. */
.pp-front .pp-shift-fold > summary::before { content: ""; position: absolute; left: 12px; top: 13px; width: 0; height: 0; border: 8px solid transparent; border-left: 12px solid var(--pp-accent); transition: transform 0.15s; }
.pp-front .pp-shift-fold[open] > summary::before { transform: rotate(90deg); }
.pp-front .pp-shift-fold > summary:hover { background: var(--pp-accent-10); }
.pp-front .pp-shift-group-open { display: block; font-weight: 700; color: var(--pp-accent-dark); }
.pp-front .pp-shift-group.pp-need-soon .pp-shift-group-open { color: var(--pp-soon); }
.pp-front .pp-shift-group.pp-need-now .pp-shift-group-open { color: var(--pp-now); }
.pp-front .pp-shift-grouped { margin: 0 0 4px 40px; border-top: 1px solid var(--pp-accent-20); }
.pp-front .pp-shift-grouped > .pp-shift:last-child { border-bottom: 0; }
/* Inside a group the name is on the group's line, so each row leads with its time; the name stays for a screen reader and the checkbox's label. */
.pp-front .pp-shift-grouped .pp-shift-main > strong { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pp-front .pp-shift-grouped .pp-shift-when { color: inherit; font-weight: 700; font-size: 1em; }
@media (prefers-reduced-motion: reduce) { .pp-front .pp-shift-fold > summary::before { transition: none; } }
@keyframes pp-changed { from { background: var(--pp-accent-40); } to { background: transparent; } }
.pp-front .pp-signup-foot { margin-top: 16px; }
.pp-front .pp-signed-in-as { margin: 0 0 8px; font-weight: 600; color: var(--pp-accent-dark); }
.pp-front .pp-signed-in-as a, .pp-front .pp-signed-in-as a:link, .pp-front .pp-signed-in-as a:visited, .pp-front .pp-signed-in-as a:hover, .pp-front .pp-signed-in-as a:focus, .pp-front .pp-signed-in-as a:active { font-weight: 400; white-space: nowrap; color: var(--pp-accent-dark); text-decoration: underline; }
.pp-front .pp-fields { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pp-front .pp-field { flex: 1 1 200px; margin: 0 0 12px; }
.pp-front .pp-field-wide { flex-basis: 100%; }
.pp-front .pp-field label { display: block; margin: 0 0 4px; font: inherit; font-weight: 600; letter-spacing: normal; text-transform: none; color: inherit; }
/* A field is white with dark ink, at 16px so a phone does not zoom; the select keeps the browser's own arrow. */
.pp-front .pp-field input[type="text"], .pp-front .pp-field input[type="email"], .pp-front .pp-field input[type="tel"], .pp-front .pp-field select, .pp-front .pp-field textarea { box-sizing: border-box; display: block; width: 100%; max-width: 100%; height: auto; min-height: 44px; margin: 0; padding: 8px 10px; font: inherit; font-size: 16px; line-height: 1.4; letter-spacing: normal; text-transform: none; border: 1px solid var(--pp-secondary-60); border-radius: 4px; background: #fff; color: #1d2327; box-shadow: none; text-shadow: none; }
.pp-front .pp-field input[type="text"], .pp-front .pp-field input[type="email"], .pp-front .pp-field input[type="tel"], .pp-front .pp-field textarea { -webkit-appearance: none; appearance: none; }
.pp-front .pp-field select { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: auto; padding-right: 28px; }
.pp-front .pp-field input[type="text"]:focus, .pp-front .pp-field input[type="email"]:focus, .pp-front .pp-field input[type="tel"]:focus, .pp-front .pp-field select:focus, .pp-front .pp-field textarea:focus { outline: 2px solid var(--pp-accent); outline-offset: 1px; border-color: var(--pp-accent); background: #fff; color: #1d2327; box-shadow: none; }
.pp-front .pp-fields-inline { align-items: flex-end; }
.pp-front .pp-field-button { flex: 0 0 auto; }
.pp-front .pp-hint { display: block; margin-top: 4px; font-size: 0.9em; color: var(--pp-secondary-dark); }
.pp-front .pp-small { font-size: 0.9em; }
.pp-front .pp-btn-big { min-height: 48px; padding: 12px 28px; font-size: 1.05em; }
.pp-front .pp-step, .pp-front .pp-signin { margin: 0 0 16px; }
.pp-front .pp-step-buttons .pp-btn { margin: 0 8px 8px 0; }
.pp-front .pp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pp-front .pp-flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 6px; border-left: 5px solid var(--pp-accent); background: var(--pp-accent-10); }
.pp-front .pp-flash p { margin: 0 0 4px; }
/* The front end keeps to the guild's two colors, errors included (decision 0018, amended 2026-10-03). */
.pp-front .pp-flash-error { border-left-color: var(--pp-secondary); background: var(--pp-secondary-10); }
.pp-front.pp-door-page { max-width: 440px; margin: 0 auto; padding: 40px 16px; }
.pp-front.pp-door-page h1 { margin: 0 0 12px; color: var(--pp-accent-dark); font-size: 1.6em; }
.pp-front .pp-door-guild { margin: 0 0 8px; font-weight: 600; color: var(--pp-secondary-dark); }
@media (max-width: 640px) {
	.pp-front .pp-btn-big { width: 100%; }
}

/* CAL-23, decision 0018 amended 2026-10-03: the one place the front end leaves the guild's two colors. A shift or event
   with open spots turns amber "Needed soon" a week out and red "Needed now" three days out; the words always come with it. */
.pp-front { --pp-soon: #9a4a00; --pp-soon-10: #fff4e0; --pp-now: #b32d2e; --pp-now-10: #fcf0f1; --pp-full: #007017; --pp-new: #007017; }
.pp-front .pp-need-chip { display: inline-block; padding: 1px 9px; margin: 0 0 3px; border-radius: 999px; font-size: 0.8em; font-weight: 700; color: #fff; background: var(--pp-soon); }
.pp-front .pp-need-now .pp-need-chip { background: var(--pp-now); }
.pp-front .pp-need-chip[hidden] { display: none; }
.pp-front .pp-shift.pp-need-soon { background: var(--pp-soon-10); box-shadow: inset 4px 0 0 var(--pp-soon); }
.pp-front .pp-shift.pp-need-now { background: var(--pp-now-10); box-shadow: inset 4px 0 0 var(--pp-now); }
.pp-front .pp-shift.pp-need-soon .pp-shift-open { color: var(--pp-soon); }
.pp-front .pp-shift.pp-need-now .pp-shift-open { color: var(--pp-now); }
.pp-front .pp-shift-side .pp-need-chip { display: block; width: max-content; margin-left: auto; }
.pp-front .pp-shift-side .pp-need-chip[hidden] { display: none; }
.pp-front .pp-cal-fill.pp-need-soon, .pp-front .pp-cal-card-open.pp-need-soon, .pp-front .pp-cal-day-open.pp-need-soon { color: var(--pp-soon); font-weight: 700; }
.pp-front .pp-cal-fill.pp-need-now, .pp-front .pp-cal-card-open.pp-need-now, .pp-front .pp-cal-day-open.pp-need-now { color: var(--pp-now); font-weight: 700; }
.pp-front .pp-cal-entry.pp-need-soon .pp-cal-entry-count { color: var(--pp-soon); }
.pp-front .pp-cal-entry.pp-need-now .pp-cal-entry-count { color: var(--pp-now); }

/* My Volunteering (decision 0027). Phone first: one column of cards. */
.pp-front.pp-myv { max-width: 760px; margin: 0 auto; }
.pp-front .pp-myv-section { margin: 0 0 28px; }
.pp-front .pp-myv-section > h2 { color: var(--pp-accent-dark); margin: 0 0 10px; }
/* Decision 0041: below the page's top, each section is a summary line first: its name, the
   one fact, the alert word when there is something to do, and an arrow; a tap opens it in place. */
.pp-front .pp-myv-fold { margin: 0 0 12px; }
.pp-front .pp-myv-fold > summary.pp-myv-summary { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; min-height: 48px; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--pp-accent-20); border-left: 4px solid var(--pp-accent); border-radius: 8px; background: var(--pp-accent-10); cursor: pointer; list-style: none; }
.pp-front .pp-myv-fold > summary.pp-myv-summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-fold > summary.pp-myv-summary:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-front .pp-myv-fold > summary.pp-myv-summary > h2 { grid-column: 1; margin: 0; padding: 0; border: 0; font-size: 1.15em; line-height: 1.3; color: var(--pp-accent-dark); }
.pp-front .pp-myv-summary-line { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 0.95em; line-height: 1.35; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-summary-alert { color: var(--pp-now); font-weight: 700; }
.pp-front .pp-myv-summary-arrow { grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; margin: 0 4px 4px 0; border: solid var(--pp-accent-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s ease; }
.pp-front .pp-myv-fold[open] > summary .pp-myv-summary-arrow { transform: rotate(-135deg); margin: 4px 4px 0 0; }
.pp-front .pp-myv-fold[open] > summary.pp-myv-summary { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .pp-front .pp-myv-summary-arrow { transition: none; } }
.pp-front .pp-myv-share-why { margin: 4px 0 0; }
.pp-front .pp-myv-share-why > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 40px; }
.pp-front .pp-myv-share-why > summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-share-change { color: var(--pp-accent); font-weight: 600; text-decoration: underline; font-size: 0.95em; }
.pp-front .pp-myv-share-why[open] > summary { margin-bottom: 6px; }
.pp-front .pp-myv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-front .pp-myv-card.pp-myv-waiting { border-left-color: var(--pp-secondary); }
.pp-front .pp-myv-event { margin: 0 0 2px; font-size: 0.9em; }
.pp-front .pp-myv-card .pp-card-title { font-weight: 700; }
.pp-front .pp-myv-event a, .pp-front .pp-myv-event a:link, .pp-front .pp-myv-event a:visited, .pp-front .pp-myv-event a:hover, .pp-front .pp-myv-event a:focus, .pp-front .pp-myv-event a:active { color: var(--pp-secondary-dark); text-decoration: underline; }
.pp-front .pp-myv-line { margin: 0 0 6px; }
.pp-front .pp-myv-facts { margin: 8px 0; display: grid; gap: 6px; }
.pp-front .pp-myv-facts > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; }
.pp-front .pp-myv-facts dt { font-weight: 600; color: var(--pp-accent-dark); }
.pp-front .pp-myv-facts dd { margin: 0; }
.pp-front .pp-myv-actions { margin: 10px 0 6px; }
.pp-front .pp-myv-cancel > summary { list-style: none; }
.pp-front .pp-myv-cancel > summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-cancel[open] > summary { display: none; }
.pp-front .pp-myv-cancel-body { background: var(--pp-accent-10); border-radius: 6px; padding: 10px 12px; }
.pp-front .pp-myv-cancel-body p { margin: 0 0 10px; }
.pp-front .pp-myv-standing { display: grid; gap: 12px; }
.pp-front .pp-myv-meter-words { margin: 0 0 4px; }
.pp-front .pp-myv-bar { height: 10px; border-radius: 999px; background: var(--pp-accent-10); border: 1px solid var(--pp-accent-20); overflow: hidden; }
.pp-front .pp-myv-bar span { display: block; height: 100%; background: var(--pp-accent); }
.pp-front .pp-myv-also { margin: 0; font-weight: 600; }
.pp-front .pp-myv-connections, .pp-front .pp-myv-people { margin: 0 0 10px; padding-left: 1.2em; list-style: disc; }
.pp-front .pp-myv-tie { display: block; font-size: 0.85em; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-tie-ok { color: var(--pp-accent-dark); font-weight: 600; }
.pp-front .pp-myv-add { margin: 0 0 14px; }
.pp-front .pp-myv-add > summary { cursor: pointer; color: var(--pp-accent-dark); font-weight: 600; list-style: none; }
.pp-front .pp-myv-add .pp-card { margin-top: 8px; }
@media print { .pp-front .pp-myv-cancel, .pp-front .pp-myv-add, .pp-front .pp-myv-actions { display: none; } }
.pp-front .pp-myv-intro { margin: 0 0 12px; }
.pp-front .pp-myv-intro ul { margin: 0 0 10px; padding-left: 1.2em; list-style: disc; }
.pp-front .pp-myv-intro li { margin: 0 0 4px; }
.pp-front .pp-myv-intro .pp-card-title { font-size: 1.35em; line-height: 1.25; }
/* The celebration (MYV-12): the guild's thanks, once per credited shift. */
.pp-front .pp-myv-celebrate { position: relative; overflow: hidden; margin: 0 0 24px; background: var(--pp-accent-10); border-color: var(--pp-accent); }
.pp-front .pp-myv-celebrate ul { margin: 0 0 8px; padding-left: 1.2em; list-style: disc; }
.pp-front .pp-myv-celebrate p { margin: 0 0 8px; }
.pp-front .pp-myv-celebrate-from { color: var(--pp-accent-dark); font-style: italic; }
.pp-front .pp-myv-celebrate-mascot { float: right; width: 72px; height: 72px; object-fit: contain; margin: 0 0 8px 12px; }
.pp-front .pp-myv-celebrate .pp-card-title { font-size: 1.6em; line-height: 1.2; }

/* The celebration's moment (Zac, 2026-10-03): an overlay with the mascot,
   turning rays, and a burst of stars in the guild's two colors. The
   checkbox before it closes it without script; reduced motion keeps it
   still. */
.pp-front .pp-celebrate-done { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pp-front .pp-celebrate-done:checked + .pp-celebrate { display: none; }
.pp-front .pp-celebrate { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--pp-accent-rgb), 0.55); backdrop-filter: blur(3px); animation: pp-fade 0.3s ease-out both; }
.pp-front .pp-celebrate-panel { position: relative; width: 100%; max-width: 420px; max-height: 100%; overflow-x: hidden; overflow-y: auto; background: #fff; color: #1d2327; border-radius: 18px; padding: 0 22px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: pp-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.pp-front .pp-celebrate-panel ul { list-style: none; margin: 0 0 10px; padding: 0; font-weight: 600; }
.pp-front .pp-celebrate-panel p { margin: 0 0 10px; }
.pp-front .pp-celebrate-title { margin: 0 0 8px; color: var(--pp-accent-dark); font-size: 1.9em; line-height: 1.15; }
.pp-front .pp-celebrate-stage { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.pp-front .pp-celebrate-rays { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: repeating-conic-gradient(var(--pp-accent) 0 12deg, var(--pp-metal, #d4a72c) 12deg 24deg); -webkit-mask: radial-gradient(circle, transparent 17%, #000 24%, rgba(0, 0, 0, 0.8) 36%, transparent 54%); mask: radial-gradient(circle, transparent 17%, #000 24%, rgba(0, 0, 0, 0.8) 36%, transparent 54%); opacity: 0.5; animation: pp-spin 12s linear infinite; }
.pp-front .pp-celebrate-stage::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: radial-gradient(circle, #fff 55%, rgba(255, 255, 255, 0) 72%); }
.pp-front .pp-celebrate-mascot { position: relative; z-index: 2; width: 132px; height: 132px; object-fit: contain; animation: pp-bounce 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.15s both; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.pp-front .pp-celebrate-mascot-star { display: block; color: var(--pp-accent); }
.pp-front .pp-celebrate-mascot-star svg { width: 100%; height: 100%; }
.pp-front .pp-celebrate-star { position: absolute; left: 50%; top: 50%; z-index: 1; width: calc(var(--s) * var(--k, 1)); height: calc(var(--s) * var(--k, 1)); margin: calc(var(--s) * var(--k, 1) / -2) 0 0 calc(var(--s) * var(--k, 1) / -2); color: var(--pp-accent); opacity: 0; animation: pp-burst 1.5s cubic-bezier(0.1, 0.8, 0.3, 1) calc(0.25s + var(--t)) 2 both; }
.pp-front .pp-celebrate-star svg { display: block; width: 100%; height: 100%; }
.pp-front .pp-celebrate-star { color: #d4a72c; }
.pp-front .pp-celebrate-star-1 { color: var(--pp-accent); }
.pp-front .pp-celebrate-star-2 { color: #f2c94c; }
/* Gold confetti (decision 0018, amended 2026-10-03): the one moment the front end leaves the guild's two colors for the party's. */
.pp-front .pp-confetti { position: absolute; top: -24px; left: var(--x); z-index: 2; width: calc(var(--w) * var(--k, 1)); height: calc(var(--h) * var(--k, 1)); border-radius: var(--r); background: var(--c); opacity: 0; pointer-events: none; animation: pp-fall var(--f) cubic-bezier(0.3, 0.1, 0.6, 1) var(--t) 2 both; }
.pp-front .pp-celebrate-panel { z-index: 1; }
.pp-front .pp-celebrate-close { box-sizing: border-box; width: 100%; }
@keyframes pp-fall {
	0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
	50% { transform: translate3d(var(--sway), 55vh, 0) rotate(calc(var(--spin) / 2)); }
	90% { opacity: 1; }
	100% { opacity: 0; transform: translate3d(0, 110vh, 0) rotate(var(--spin)); }
}
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pp-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pp-spin { to { transform: rotate(360deg); } }
@keyframes pp-bounce { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes pp-burst {
	0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.2) rotate(0); }
	15% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d) * var(--k, 1))) scale(1) rotate(160deg); }
}
@media (prefers-reduced-motion: reduce) {
	.pp-front .pp-shift-filled .pp-shift-open.pp-changed { animation: none; }
	.pp-front .pp-celebrate, .pp-front .pp-celebrate-panel, .pp-front .pp-celebrate-mascot, .pp-front .pp-celebrate-rays { animation: none; }
	.pp-front .pp-celebrate-star { animation: none; opacity: 1; transform: rotate(var(--a)) translateY(calc(-0.8 * var(--d) * var(--k, 1))); }
	.pp-front .pp-confetti { display: none; }
}
/* On a projector or a laptop (Zac, 2026-10-03, 0.5.6): the same moment, larger, so the room can see it, in two steps so a short projector window still shows the button. Phones are unchanged. */
@media (min-width: 900px) and (min-height: 640px) {
	.pp-front .pp-celebrate { --k: 1.25; }
	.pp-front .pp-celebrate-panel { max-width: 580px; padding: 0 32px 22px; font-size: 1.1em; border-radius: 22px; }
	.pp-front .pp-celebrate-title { font-size: 2.1em; }
	.pp-front .pp-celebrate-stage { height: 250px; }
	.pp-front .pp-celebrate-rays { width: 470px; height: 470px; margin: -235px 0 0 -235px; }
	.pp-front .pp-celebrate-stage::before { width: 186px; height: 186px; margin: -93px 0 0 -93px; }
	.pp-front .pp-celebrate-mascot { width: 165px; height: 165px; }
}
@media (min-width: 1100px) and (min-height: 860px) {
	.pp-front .pp-celebrate { --k: 1.6; }
	.pp-front .pp-celebrate-panel { max-width: 700px; padding: 0 44px 32px; font-size: 1.3em; border-radius: 28px; }
	.pp-front .pp-celebrate-title { font-size: 2.3em; }
	.pp-front .pp-celebrate-stage { height: 330px; }
	.pp-front .pp-celebrate-rays { width: 610px; height: 610px; margin: -305px 0 0 -305px; }
	.pp-front .pp-celebrate-stage::before { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
	.pp-front .pp-celebrate-mascot { width: 212px; height: 212px; }
}
@media print { .pp-front .pp-celebrate { display: none; } }
.pp-front .pp-celebrate-preview { display: inline-block; margin: 0 0 10px; padding: 2px 12px; border-radius: 999px; background: var(--pp-accent-10); color: var(--pp-accent-dark); font-size: 0.8em; font-weight: 600; }

/* My Volunteering, more structure (Zac, 2026-10-04, 0.5.8): the event's look behind each card, a head with the date, facts stacked, actions side by side; the household as groups of rows. */
.pp-front .pp-myv-card { position: relative; overflow: hidden; isolation: isolate; padding: 14px 16px 16px; }
.pp-front .pp-myv-look { position: absolute; right: -26px; top: 50%; z-index: -1; width: 170px; height: 170px; transform: translateY(-50%) rotate(-12deg); color: var(--pp-accent); opacity: 0.08; pointer-events: none; }
.pp-front .pp-myv-look .pp-look { display: block; width: 100%; height: 100%; }
.pp-front .pp-myv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 2px; }
.pp-front .pp-myv-head .pp-myv-event { color: var(--pp-secondary-dark); font-size: 0.9em; }
.pp-front .pp-myv-date { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--pp-accent); color: var(--pp-on-accent); font-size: 0.8em; font-weight: 700; white-space: nowrap; }
.pp-front .pp-myv-waiting .pp-myv-date { background: #dcdcde; color: #3c434a; }
/* Decision 0031: a waitlisted card says so before anything else. */
.pp-front .pp-waitlist-band { margin: -14px -16px 12px; padding: 6px 16px; background: var(--pp-secondary); color: var(--pp-on-secondary); font-size: 0.8em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
/* Decision 0043: an event the reader coordinates says so first, in the accent; roll call spans the card in the accent's fill. */
.pp-front .pp-coord-band { margin: -14px -16px 12px; padding: 6px 16px; background: var(--pp-accent); color: var(--pp-on-accent); font-size: 0.8em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.pp-front .pp-myv-coord-owed { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: var(--pp-now-10); color: var(--pp-now); font-weight: 700; }
.pp-front .pp-myv-actions > a.pp-btn.pp-myv-roll, .pp-front .pp-myv-actions > a.pp-btn.pp-myv-roll:link, .pp-front .pp-myv-actions > a.pp-btn.pp-myv-roll:visited, .pp-front .pp-myv-actions > a.pp-btn.pp-myv-roll:focus, .pp-front .pp-myv-actions > a.pp-btn.pp-myv-roll:active { grid-column: 1 / -1; background-color: var(--pp-accent); color: var(--pp-on-accent); border-color: var(--pp-accent-dark); }
.pp-front .pp-myv-actions > a.pp-btn.pp-myv-roll:hover { grid-column: 1 / -1; background-color: var(--pp-accent-dark); color: var(--pp-on-accent); border-color: var(--pp-accent-dark); }
/* Decision 0043, amended: one card per event and day, the household's shifts as rows, each with its own small Cancel. */
.pp-front .pp-myv-rows-title { margin: 4px 0 0; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-rows { list-style: none; margin: 8px 0 10px; padding: 0; border-top: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-row-main { flex: 1 1 10em; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.pp-front .pp-myv-row-when { font-weight: 700; }
.pp-front .pp-myv-row-name { color: var(--pp-secondary-dark); }
.pp-front .pp-myv-row-place { color: var(--pp-accent-dark); font-size: 0.9em; }
.pp-front .pp-myv-row-who { margin: 0 0 3px; padding: 2px 10px; border-radius: 999px; background: var(--pp-accent); color: var(--pp-on-accent); font-size: 0.8em; font-weight: 800; line-height: 1.5; }
.pp-front .pp-myv-row-chip { margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--pp-secondary); color: var(--pp-on-secondary); font-size: 0.7em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.pp-front .pp-myv-row > .pp-myv-cancel { flex: none; }
.pp-front .pp-myv-row > .pp-myv-cancel > summary.pp-btn { padding: 6px 12px; min-height: 36px; font-size: 0.85em; background-color: #fff; }
.pp-front .pp-myv-row > .pp-myv-cancel[open] { flex: 1 1 100%; }
.pp-front .pp-myv-row-note { flex: 1 1 100%; margin: 0; font-size: 0.9em; }
.pp-front .pp-myv-rows + .pp-myv-welcome { margin-top: 0; }
.pp-front .pp-myv-rows ~ .pp-myv-facts { margin-top: 0; padding-top: 0; border-top: 0; }
.pp-front .pp-myv-actions > a.pp-btn.pp-myv-wide { grid-column: 1 / -1; }
.pp-front .pp-myv-welcome { margin: 0 0 10px; padding: 8px 10px; border-radius: 6px; background: var(--pp-secondary-10); }
.pp-front .pp-myv-card .pp-card-title { font-size: 1.3em; margin: 0 0 6px; }
.pp-front .pp-myv-facts { margin: 10px 0 12px; padding: 10px 0 0; border-top: 1px solid var(--pp-accent-20); gap: 10px; }
.pp-front .pp-myv-facts > div { display: block; }
.pp-front .pp-myv-facts dt { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-facts dd { font-weight: 600; }
/* Decision 0051: on a card, more than three rows of one name fold into a group, closed, that opens to its rows. */
.pp-front .pp-myv-group { margin: 0; padding: 0; border-bottom: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-group-fold > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 0; cursor: pointer; }
.pp-front .pp-myv-group-fold > summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-group-name { font-weight: 700; }
.pp-front .pp-myv-group-when { color: var(--pp-secondary-dark); }
.pp-front .pp-myv-group-arrow { flex: none; width: 14px; height: 14px; margin: 0 8px 7px 0; border: solid var(--pp-accent); border-width: 0 3px 3px 0; transform: rotate(45deg); transition: transform 0.15s ease; }
.pp-front .pp-myv-group-fold[open] > summary .pp-myv-group-arrow { transform: rotate(-135deg); margin: 7px 8px 0 0; }
.pp-front .pp-myv-group-fold > summary:hover { background: var(--pp-accent-10); }
.pp-front .pp-myv-rows-grouped { margin: 0 0 4px 14px; border-top: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-rows-grouped > .pp-myv-row:last-child { border-bottom: 0; }
.pp-front .pp-myv-rows-grouped .pp-myv-row-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .pp-front .pp-myv-group-arrow { transition: none; } }
/* Issue 76: two equal columns however long either label is (a bare 1fr grows to fit a label that will not wrap). */
.pp-front .pp-myv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pp-front .pp-myv-actions > a.pp-btn, .pp-front .pp-myv-actions > a.pp-btn:link, .pp-front .pp-myv-actions > a.pp-btn:visited, .pp-front .pp-myv-actions > a.pp-btn:hover, .pp-front .pp-myv-actions > a.pp-btn:focus, .pp-front .pp-myv-actions > a.pp-btn:active, .pp-front .pp-myv-actions > .pp-myv-cancel > summary, .pp-front .pp-myv-actions > .pp-myv-cancel > summary:hover, .pp-front .pp-myv-actions > .pp-myv-cancel > summary:focus, .pp-front .pp-myv-actions > .pp-myv-cancel > summary:active { background-color: #fff; }
.pp-front .pp-myv-actions > a.pp-btn, .pp-front .pp-myv-actions > .pp-myv-cancel > summary { box-sizing: border-box; width: 100%; text-align: center; padding-left: 8px; padding-right: 8px; }
.pp-front .pp-myv-actions .pp-myv-cancel[open] { grid-column: 1 / -1; }
.pp-front .pp-myv-household .pp-card { padding: 4px 16px; }
.pp-front .pp-myv-group { padding: 14px 0; }
.pp-front .pp-myv-group + .pp-myv-group { border-top: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-group-title { margin: 0 0 8px; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-people { list-style: none; margin: 0 0 10px; padding: 0; }
.pp-front .pp-myv-person { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.pp-front .pp-myv-initials { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pp-accent-10); border: 1px solid var(--pp-accent-20); color: var(--pp-accent-dark); font-weight: 700; font-size: 0.9em; }
.pp-front .pp-myv-person-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pp-front .pp-myv-person-name { font-weight: 600; }
.pp-front .pp-myv-person-detail { color: var(--pp-secondary-dark); font-size: 0.9em; }
.pp-front .pp-myv-chip { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--pp-accent-10); color: var(--pp-accent-dark); font-size: 0.75em; font-weight: 700; white-space: nowrap; }
.pp-front .pp-myv-chip-ok { background: var(--pp-accent); color: var(--pp-on-accent); }
.pp-front .pp-myv-chip-wait { background: var(--pp-secondary-10, #f0f0f1); color: var(--pp-secondary-dark); border: 1px dashed var(--pp-secondary); }
.pp-front .pp-myv-add { margin: 4px 0 0; }
.pp-front .pp-myv-add > summary.pp-myv-add-button { list-style: none; display: inline-block; padding: 6px 14px; font-size: 0.9em; }
.pp-front .pp-myv-add > summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-add[open] > summary { margin-bottom: 8px; }
.pp-front .pp-myv-actions > a.pp-btn, .pp-front .pp-myv-actions > .pp-myv-cancel > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 10px; font-size: 0.95em; line-height: 1.2; white-space: normal; text-wrap: balance; overflow-wrap: break-word; }
.pp-front .pp-myv-cancel > summary.pp-btn { display: flex; }
/* Issue 76: Cancel's box fills its half, so its button is as tall as a two-line Add to calendar beside it. */
.pp-front .pp-myv-actions > .pp-myv-cancel { display: flex; flex-direction: column; }
.pp-front .pp-myv-actions > .pp-myv-cancel > summary { flex: 1 1 auto; }
/* Issue 29: the opened box keeps its own filled button, and the Cancel that opened it steps aside. */
.pp-front .pp-myv-cancel[open] > summary { display: none; }
.pp-front .pp-myv-cancel-body .pp-btn-accent { width: 100%; background: var(--pp-accent); color: var(--pp-on-accent); }
.pp-front .pp-myv-phone { white-space: nowrap; }
.pp-front .pp-myv-person-chip { margin-top: 4px; }
.pp-front .pp-myv-past-card { padding: 4px 16px; }
@media (max-width: 374px) { .pp-front .pp-myv-actions > a.pp-btn, .pp-front .pp-myv-actions > .pp-myv-cancel > summary { font-size: 0.82em; } }
/* Issue 30: the student step nested in the household card gets room above its heading. */
.pp-front .pp-myv-add .pp-card { padding-top: 20px; padding-bottom: 18px; }
/* Guild Notices (MYV-23): the guild's cards, each its title first and the card behind a tap.
   New is green, never the alert color, since none of it is urgent; once read, only the guild's
   accent marks it (Zac, 2026-10-13). */
.pp-front .pp-myv-messages { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.pp-front .pp-myv-message { margin: 0; padding: 0; }
.pp-front .pp-myv-message > details { border-radius: 8px; background: #ffffff; border: 1px solid var(--pp-accent-20); border-left: 4px solid var(--pp-accent); }
.pp-front .pp-myv-message-more { margin: 0; }
.pp-front .pp-myv-optout { margin: 10px 0 0; }
.pp-front .pp-myv-message-new > details { border-left-color: var(--pp-new); }
.pp-front .pp-myv-message summary { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px 12px; cursor: pointer; list-style: none; }
.pp-front .pp-myv-message summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-message summary:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 2px; }
.pp-front .pp-myv-message-subject { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.pp-front .pp-myv-message-when { white-space: nowrap; font-size: 0.85em; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-message-body { padding: 0 12px; overflow-wrap: anywhere; }
.pp-front .pp-myv-message-body p { margin: 0 0 8px; }
.pp-front .pp-myv-message-state { margin: 0; padding: 0 12px 10px; font-size: 0.85em; color: var(--pp-secondary-dark); font-style: italic; }
.pp-front .pp-myv-chip-new { background: var(--pp-new); color: #ffffff; }
.pp-front .pp-myv-summary-new { color: var(--pp-new); font-weight: 700; }
.pp-front .pp-myv-mail { margin: 0 0 10px; }
.pp-front .pp-myv-mail-line { margin: 0 0 4px; font-weight: 600; }
.pp-front .pp-myv-mail-form { display: inline-block; margin: 6px 8px 0 0; }
@media (max-width: 420px) { .pp-front .pp-myv-message summary { grid-template-columns: 1fr; } .pp-front .pp-myv-message-when { white-space: normal; } }
@media print { .pp-front .pp-myv-optout form, .pp-front .pp-myv-mail-form { display: none; } }
.pp-front .pp-myv-add .pp-card > .pp-card-title { margin-top: 0; }

/* The day-of card (decision 0028): who, what, when, where, then "I'm here", big enough for a thumb in a parking lot. */
.pp-front .pp-dayof-card { border-left-width: 8px; margin: 0 0 14px; }
.pp-front .pp-dayof-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pp-front .pp-dayof-head .pp-myv-date { margin-top: 0.35em; }
.pp-front .pp-myv-card .pp-dayof-event { margin: 0; font-size: 1.35em; font-weight: 800; line-height: 1.15; }
.pp-front .pp-dayof-card .pp-dayof-event { font-size: 1.6em; }
.pp-front .pp-dayof-window, .pp-front .pp-myv-meet { display: block; }
.pp-front .pp-dayof-event a, .pp-front .pp-dayof-event a:link, .pp-front .pp-dayof-event a:visited, .pp-front .pp-dayof-event a:hover, .pp-front .pp-dayof-event a:focus, .pp-front .pp-dayof-event a:active { color: var(--pp-accent-dark); text-decoration: none; border-bottom: 0; box-shadow: none; background-color: transparent; background-image: none; }
.pp-front .pp-dayof-event a:hover, .pp-front .pp-dayof-event a:focus { text-decoration: underline; }
.pp-front .pp-dayof-shift { margin: 4px 0 0; font-size: 1.15em; font-weight: 600; color: var(--pp-secondary-dark); }
.pp-front .pp-dayof-who dd { display: flex; align-items: center; gap: 12px; }
.pp-front .pp-dayof-face { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pp-front .pp-dayof-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--pp-accent); color: var(--pp-on-accent); font-weight: 700; font-size: 1.1em; }
.pp-front .pp-dayof-who-words { min-width: 0; }
.pp-front .pp-dayof-text, .pp-front .pp-dayof-note { display: block; margin-top: 2px; font-weight: 400; }
.pp-front .pp-dayof-checkin { display: grid; gap: 8px; margin: 0 0 12px; }
.pp-front .pp-dayof-form { margin: 0; }
.pp-front .pp-dayof-button { width: 100%; min-height: 60px; font-size: 1.25em; font-weight: 700; }
.pp-front .pp-dayof-here { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--pp-accent-10); }
.pp-front .pp-dayof-tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pp-accent); color: var(--pp-on-accent); font-weight: 700; }
.pp-front .pp-dayof-wait, .pp-front .pp-dayof-late { margin: 0; padding: 10px 12px; border: 1px dashed var(--pp-accent-40); border-radius: 6px; }
.pp-front .pp-dayof .pp-myv-actions { grid-template-columns: 1fr; }

/* Past shifts, grouped by event and day (Zac, 2026-10-05): a date tile, the event, its hours, then each shift with who worked it. */
.pp-front .pp-myv-past-event { padding: 12px 0; border-bottom: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-past-event:last-child { border-bottom: 0; }
.pp-front .pp-myv-past-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.pp-front .pp-myv-past-day { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--pp-accent); color: var(--pp-on-accent); line-height: 1.05; }
.pp-front .pp-myv-past-day span { font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.pp-front .pp-myv-past-day strong { font-size: 1.35em; }
.pp-front .pp-myv-past-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 1.1em; line-height: 1.25; }
.pp-front .pp-myv-past-title a, .pp-front .pp-myv-past-title a:link, .pp-front .pp-myv-past-title a:visited, .pp-front .pp-myv-past-title a:hover, .pp-front .pp-myv-past-title a:focus, .pp-front .pp-myv-past-title a:active { color: var(--pp-accent-dark); text-decoration: none; border-bottom: 0; box-shadow: none; background-color: transparent; background-image: none; }
.pp-front .pp-myv-past-title a:hover, .pp-front .pp-myv-past-title a:focus { text-decoration: underline; }
.pp-front .pp-myv-past-total { flex: none; padding: 2px 10px; border-radius: 999px; background: var(--pp-accent-20); color: var(--pp-accent-dark); font-size: 0.85em; font-weight: 700; white-space: nowrap; }
.pp-front .pp-myv-past { list-style: none; margin: 0 0 0 60px; padding: 0; }
.pp-front .pp-myv-past-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-top: 1px dashed var(--pp-accent-20); }
.pp-front .pp-myv-past-row:first-child { border-top: 0; }
.pp-front .pp-myv-past-shift { grid-column: 1 / -1; }
.pp-front .pp-myv-past-shift strong { display: block; }
.pp-front .pp-myv-past-when { display: block; font-size: 0.9em; color: var(--pp-secondary-dark); }
.pp-front .pp-myv-past-who { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.9em; }
.pp-front .pp-myv-initials-small { width: 24px; height: 24px; font-size: 0.65em; }
.pp-front .pp-myv-past-credit { padding: 3px 10px; border-radius: 999px; font-size: 0.85em; font-weight: 700; white-space: nowrap; text-align: center; }
.pp-front .pp-myv-past-credited { background: var(--pp-accent); color: var(--pp-on-accent); }
.pp-front .pp-myv-past-waiting { border: 1px dashed var(--pp-accent-40); color: var(--pp-accent-dark); }
.pp-front .pp-myv-past-missed { background: var(--pp-secondary-20); color: var(--pp-secondary-dark); }
@media (max-width: 480px) { .pp-front .pp-myv-past { margin-left: 0; } }

/* The vouch request on My Volunteering (MYV-19, decision 0037): a question at the top of the page, two buttons, nothing else about the newcomer. */
.pp-front .pp-myv-vouch { margin: 0 0 24px; }
.pp-front .pp-myv-vouch-card { margin: 0 0 12px; background: var(--pp-accent-10); border-color: var(--pp-accent); }
.pp-front .pp-myv-vouch-ask { margin: 0 0 8px; font-size: 1.1em; }
.pp-front .pp-myv-vouch-card .pp-muted { margin: 0 0 10px; }
.pp-front .pp-myv-vouch-buttons { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; }

/* The About you step (decision 0038): the photo's file box reads like the other fields. */
.pp-front .pp-field input[type="file"] { box-sizing: border-box; display: block; width: 100%; max-width: 100%; margin: 0; padding: 8px 10px; font: inherit; font-size: 16px; line-height: 1.4; border: 1px dashed var(--pp-secondary-60); border-radius: 4px; background: #fff; color: #1d2327; }
.pp-front .pp-field input[type="file"]:focus { outline: 2px solid var(--pp-accent); outline-offset: 1px; }
.pp-front .pp-myv-vouch-why { margin: 10px 0 0; }
.pp-front .pp-myv-vouch-why summary { cursor: pointer; color: var(--pp-accent); font-weight: 600; text-decoration: underline; list-style: none; }
.pp-front .pp-myv-vouch-why[open] summary { margin-bottom: 6px; }
.pp-front .pp-myv-vouch-why p { margin: 0; }

/* Sharing shifts between connected households (decision 0039): the choice on the family's hours card, the checkbox on the vouch card, and Also volunteering. */
.pp-front .pp-myv-vouch-share { margin: 0 0 10px; }
.pp-front .pp-myv-vouch-share label { display: flex; gap: 8px; align-items: flex-start; font-size: 0.95em; color: #1d2327; }
.pp-front .pp-myv-vouch-share input[type="checkbox"] { margin: 3px 0 0; flex: none; width: 18px; height: 18px; }
.pp-front .pp-myv-connected-title { margin: 0 0 6px; font-weight: 600; }
.pp-front .pp-myv-share { margin: 0 0 10px; }
.pp-front .pp-myv-share p { margin: 0 0 8px; }

/* Your household: Edit and Remove on an adult, Remove on a student, privacy (decision 0045). */
.pp-front .pp-myv-person { flex-wrap: wrap; }
.pp-front .pp-myv-tools { flex: 1 1 100%; padding-left: 48px; }
.pp-front .pp-btn-small, .pp-front .pp-myv-tools > details > summary.pp-btn { padding: 4px 12px; min-height: 32px; font-size: 0.85em; }
.pp-front .pp-myv-edit > summary, .pp-front .pp-myv-remove > summary { list-style: none; display: inline-block; cursor: pointer; }
.pp-front .pp-myv-edit > summary::-webkit-details-marker, .pp-front .pp-myv-remove > summary::-webkit-details-marker { display: none; }
.pp-front .pp-myv-edit[open] > summary { margin-bottom: 8px; }
.pp-front .pp-myv-edit-form { margin: 0 0 10px; }
.pp-front .pp-myv-fixed { display: block; padding: 8px 0; font-weight: 600; }
.pp-front .pp-myv-remove { margin: 0 0 10px; }
.pp-front .pp-myv-remove[open] > summary { display: none; }
.pp-front .pp-myv-remove-why { margin: 0 0 10px; }
.pp-front .pp-myv-remove-why p { margin: 0 0 8px; }
.pp-front .pp-myv-remove-shifts { list-style: none; margin: 0; padding: 0; }
.pp-front .pp-myv-remove-shifts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-top: 1px solid var(--pp-accent-20); }
.pp-front .pp-myv-remove-shifts .pp-myv-remove-shift { flex: 1 1 200px; display: flex; flex-direction: column; }
.pp-front .pp-myv-remove-shifts .pp-myv-cancel > summary.pp-btn { padding: 6px 12px; min-height: 36px; font-size: 0.85em; background-color: #fff; }
.pp-front .pp-myv-remove-shifts .pp-myv-cancel[open] { flex: 1 1 100%; }
.pp-front .pp-myv-former { margin: 6px 0 0; }
.pp-front .pp-myv-share-off { margin: 10px 0 0; }
.pp-front .pp-myv-private { margin-bottom: 10px; }
.pp-front .pp-step-private { margin: 0 0 12px; }
.pp-front .pp-step-private > summary { cursor: pointer; color: var(--pp-accent-dark); font-weight: 600; }
.pp-front .pp-step-private[open] > summary { margin-bottom: 6px; }
.pp-front .pp-step-private .pp-muted { margin: 0 0 8px; }
@media print { .pp-front .pp-myv-tools, .pp-front .pp-step-private { display: none; } }