/* Volunteer page (/midterms/volunteer/). Loaded after app.css, which supplies .app and the page gutters (12px on
   phones). Classes are all vp-, so nothing collides with app.css or includes/sheet.php. */
.app.vp { max-width: 820px; }

/* one big white panel on the blue page (Dave, 2026-10-04: not lots of little modules) */
.vp-panel { margin: 22px 0 28px; padding: 20px 24px 22px; background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, .2); }
html.phone .vp-panel { margin: 10px 0 20px; padding: 14px 14px 16px; }
.vp-head { margin: 0; font-weight: 700; }   /* "Volunteer" / "Volunteer for …": .rc-code from app.css (30px / 26px phones), a step lighter than its 800 (Dave, 2026-10-06) */
/* title row: "Volunteer" (or "Volunteer for …"), centred */
.vp-bar { display: flex; align-items: center; justify-content: center; gap: 12px; }
/* the ZIP box, then the state menu, to the right of "Volunteer" (Dave, 2026-10-06) */
.vp-staterow { display: flex; justify-content: center; }
.vp-bar { flex-wrap: wrap; }
.vp-top { display: flex; justify-content: center; margin-top: 14px; padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; }
.vp-sel { appearance: none; -webkit-appearance: none; min-width: 0; font: inherit; font-size: 15.5px; font-weight: 500; color: #0f172a; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230f172a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 7px;
  border: 1.5px solid #cbd5e1; border-radius: 10px; padding: 7px 34px 7px 12px; }
button.vp-sel { min-width: 200px; }   /* the state menu's button (dropdown.js) */
.vp-staterow button.vp-sel { font-size: 20px; padding: 8px 40px 8px 14px; background-position: right 14px center; background-size: 13px 8px; }
html.phone .vp-staterow button.vp-sel { font-size: 17px; min-width: 0; padding: 8px 32px 8px 12px; background-position: right 12px center; }
.vp-staterow .dd-menu button { font-size: 17px; }
/* the day picker: chosen = bold + underlined (as the raters); days with no events greyed */
.vp-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; font-size: 16px; }
html.phone .vp-days { gap: 4px 14px; font-size: 15.5px; }
.vp-days button { padding: 3px 0; border: 0; background: none; font: inherit; color: #475569; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vp-days button.none { color: #b6c0cc; }
.vp-days button[aria-pressed="true"] { color: #0f172a; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (hover: hover) { .vp-days button:hover { color: #0f172a; } }

.vp-empty { margin: 18px 0 0; text-align: center; font-size: 15px; line-height: 1.4; color: #475569; }

/* one event: two lines at most. Left: the time (and "+N more" / "until"); right: the title, then races, place, host */
.vp-ev { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid #eef1f5; }
.vp-rows { margin-top: 4px; }
.vp-rows > .vp-ev:first-child { border-top: 0; }
html.phone .vp-ev { grid-template-columns: 74px minmax(0, 1fr); gap: 6px; }
html.phone .vp-sub { white-space: normal; }   /* phones, under Later: "8:00am PDT" wraps to "8:00am" / "PDT" in the narrow column */
/* phones: the title may take two lines, so more of it shows */
html.phone .vp-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.vp-when { display: flex; flex-direction: column; align-items: flex-start; font-size: 14.5px; line-height: 1.35; }
.vp-time { font-weight: 400; color: #0f172a; white-space: nowrap; }
.vp-sub { font-size: 13px; color: #64748b; white-space: nowrap; }
.vp-body { min-width: 0; line-height: 1.35; }
.vp-title, .vp-meta { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vp-title { font-size: 16px; font-weight: 400; color: #0f172a; text-decoration: none; }
@media (hover: hover) { .vp-title:hover { color: #1d4ed8; text-decoration: underline; } }
.vp-meta { font-size: 13.5px; color: #64748b; }
.vp-meta a { color: #1d4ed8; text-decoration: none; }
@media (hover: hover) { .vp-meta a:hover { text-decoration: underline; } }

/* a place with no in-person events coming up: the notice above the virtual list */
.vp-notice { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f1f5f9; font-size: 14.5px; color: #334155; text-align: center; }
/* one candidate's page (?race=PA-07): the card's host links, centred under the days; the rows are the card's (.vev, app.css) */
.vp-hosts { justify-content: center; margin: 12px 0 0; }
.vp-list > .vev:first-child { padding-top: 13px; }   /* the first event sits as far below the line (or the host links) as on the main Volunteer page (4px + 9px) */
.vp-hosts[hidden] { display: none; }
/* under the heading: the candidate's small photo and race, linking to the race card (Dave, 2026-10-06) */
.vp-who { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; color: #0f172a; font-size: 17px; font-weight: 700; text-decoration: none; }
.vp-who .avatar { width: 60px; height: 60px; font-size: 20px; }   /* the cards' opponent and related-race photo size */
@media (hover: hover) { .vp-who:hover span { text-decoration: underline; } }
.vp-bar .vp-head { text-align: center; }   /* a long "Volunteer for <name>" wraps centred, over the photo line */
/* a ZIP box beside the state menu; with a ZIP, in-person events show their distance (Dave, 2026-10-06) */
.vp-staterow { gap: 10px; align-items: center; }
.vp-zip { width: 92px; font: inherit; font-size: 20px; font-weight: 500; color: #0f172a; padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; }
html.phone .vp-zip { font-size: 17px; width: 80px; }
.vp-zip::placeholder { color: #64748b; }   /* "ZIP" in the darker grey, to read (Dave, 2026-10-06) */
.vp-zip:focus { outline: none; border-color: var(--d, #2563eb); }
.vp-zip[data-bad] { border-color: #dc2626; }
.vp-mi { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #0f172a; }
.vp-note { margin: 10px 0 0; font-size: 13px; color: #64748b; text-align: center; }
/* a ZIP in use: the state menu greyed (Dave, 2026-10-06); picking a state still works and clears the ZIP */
.vp-staterow.zip-on button.vp-sel { color: #94a3b8; border-color: #e2e8f0; background-color: #f8fafc; }
/* desktop, a place with in-person events: the races they help, in a centred row of photo tiles labelled with the race (app.css .st-race) */
.vp-races:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-top: 18px; }
.vp-races .st-race { width: 96px; text-decoration: none; }