@import url("npe-tokens.css?v=4190d233");
/* ==========================================================================
   My KCDC — KCDC One K9-PORTAL (spec §4.13). Loads only when `one_portal` is
   visible on a page carrying [npe_portal] or [npe_board_portal]
   (Plugin::enqueue_scripts) and applies only under .npe-my. Light-only.
   Tokens come from npe-tokens.css (imported above; KitTokensTest pins the
   values and the import). Mobile-first: pill tabs
   (prototype .tabsm) on phones, the 248px rail from 900px up; 44px targets.
   Plans K9-PORTAL-b/-c style their sections with these classes only.
   ========================================================================== */
.npe-my{
  font-family:var(--fsans); font-size:15px; line-height:1.5; color:var(--fg0);
}
.npe-my *,.npe-my *::before,.npe-my *::after{box-sizing:border-box;}
.npe-my :focus-visible{outline:2px solid var(--sig);outline-offset:2px;border-radius:4px;}
.npe-my a{color:var(--sig-text);}

/* ---- app frame: pinstripe, rail, main ---- */
.npe-my-app{display:flex;flex-direction:column;border-top:2px solid var(--sig);background:var(--canvas);min-height:60vh;}
.npe-my-rail{background:var(--bg0);border-bottom:1px solid var(--line);padding:12px 16px 10px;min-width:0;}
/* UX-PORTAL-a: one identity line ("Maria Jimenez · Volunteer, Donor, Guardian", prototype
   .phone .muted); the sections and the account block (Profile, Sign out) share one row of
   pills on phones. The trailing fade says more follow; portal-one.js sets data-fade="none"
   once the row is scrolled to its end, and centres the active pill. */
.npe-my-who{margin:0 0 var(--s2);font-size:var(--t-meta);color:var(--fg2);overflow-wrap:anywhere;}
.npe-my-who b{font-weight:600;color:var(--fg1);}
.npe-my-who [data-npe-my-roles]::before{content:" · ";}
.npe-my-navwrap{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);}
.npe-my-navwrap::-webkit-scrollbar{display:none;}
.npe-my-navwrap[data-fade="none"]{-webkit-mask-image:none;mask-image:none;}
.npe-my-nav,.npe-my-account{display:contents;}
.npe-my-navwrap a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--rpill);background:var(--bg1);color:var(--fg1);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;}
.npe-my-navwrap a:hover{color:var(--fg0);background:var(--bg2);}
.npe-my-navwrap a[aria-current="page"]{background:var(--sig-fill);color:#fff;}
.npe-my-navwrap a svg{flex:none;width:18px;height:18px;}
/* The app fills the space down to the site footer (npe-frontend.css makes .npe-fe a flex column on portal pages). */
body.npe-app-portal .npe-fe > .npe-my-app{flex:1 0 auto;}
.npe-my-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--rpill);background:var(--crit);color:#fff;font-size:11px;font-weight:700;line-height:1;}
.npe-my-main{display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px;}

/* ---- type + building blocks (prototype .pc / .check / .tabsm) ---- */
.npe-my-h{margin:0;font-family:var(--fdisp);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--fg0);}
.npe-my-eyebrow{margin:0 0 6px;font-family:var(--fmono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-my-muted{font-size:13px;color:var(--fg2);}
.npe-my-stack{display:flex;flex-direction:column;gap:14px;}
.npe-my-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.npe-my-card{background:var(--bg0);border:1px solid var(--line);border-radius:var(--rcard);padding:var(--s4);box-shadow:var(--sh-sm);min-width:0;}
.npe-my-card > b{display:block;font-size:15px;color:var(--fg0);}
.npe-my-card > span{display:block;font-size:13px;color:var(--fg2);}
.npe-my-head > b{display:block;font-size:15px;color:var(--fg0);}
.npe-my-head > span{display:block;font-size:13px;color:var(--fg2);}
.npe-my-check{background:var(--bg1);border:1px solid var(--line);border-radius:var(--rcard);padding:10px 12px;}
.npe-my-ci{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;}
.npe-my-ci i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);}
.npe-my-ci.is-done i{background:var(--ok);border-color:var(--ok);}
.npe-my-ci > a,.npe-my-ci > form{margin-left:auto;}
.npe-my .npe-my-btn,.npe-my .npe-c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--rbtn);border:1px solid var(--line);background:var(--bg0);color:var(--fg0);font:inherit;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer;}
.npe-my-btn:hover{background:var(--bg1);}
.npe-my-btn.is-primary,.npe-my .npe-c-btn.primary{background:var(--sig-fill);border-color:var(--sig-fill);color:#fff;}
.npe-my-btn.is-primary:hover,.npe-my .npe-c-btn.primary:hover{background:var(--sig-fill-hover);}
.npe-my-btn.is-danger{color:var(--crit);}
.npe-my-tabs{display:flex;gap:2px;box-shadow:inset 0 -1px 0 var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.npe-my-tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;font-weight:600;color:var(--fg2);border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;}
.npe-my-tabs a[aria-current="page"]{color:var(--sig-text);border-bottom-color:var(--sig);}
.npe-my-pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--rpill);background:var(--bg2);color:var(--fg1);font-size:12px;font-weight:600;}
.npe-my-pill.is-ok{background:var(--ok-bg);color:var(--ok);}
.npe-my-pill.is-warn{background:var(--warn-bg);color:var(--warn);}
.npe-my-notice{border:1px solid var(--line);border-radius:var(--rcard);padding:10px 14px;background:var(--bg0);font-size:14px;}
.npe-my-notice.is-ok{border-color:var(--ok);background:var(--ok-bg);color:var(--fg0);}
.npe-my-notice.is-error{border-color:var(--crit);color:var(--crit);}
.npe-my-notice.is-warn{border-color:var(--warn);background:var(--warn-bg);color:var(--fg0);}
.npe-my-table{width:100%;border-collapse:collapse;background:var(--bg0);border:1px solid var(--line);border-radius:var(--rcard);font-size:14px;}
.npe-my-table th,.npe-my-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.npe-my-table th{background:var(--bg1);color:var(--fg2);font-size:12px;font-weight:600;}
.npe-my-table td.num,.npe-my-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.npe-my-field{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--fg1);}
.npe-my-field input,.npe-my-field select,.npe-my-field textarea{min-height:44px;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font:inherit;font-size:15px;}
.npe-my-choice{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;}
.npe-my-choice input{width:20px;height:20px;}
.npe-my-scroll{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--rbtn);padding:8px 12px;background:var(--bg1);font-size:13px;}
/* The waiver text's bare <h3> section titles took the theme's heading style (Divi:
   22px, weight 800, line-height 1em) inside this 13px box: the box sets them itself. */
.npe-my-scroll :where(h1,h2,h3,h4,h5,h6){margin:12px 0 4px;padding:0;font-family:var(--fsans);font-size:14px;font-weight:700;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--fg0);}
.npe-my .npe-my-scroll>:first-child{margin-top:0;}

/* ---- K9-PORTAL-d: Profile form — one column on phones, side by side from 600px.
   Checkbox groups are a bare <fieldset>, never .npe-my-field: that block's `input` rule
   would give each checkbox a text field's 44px height, padding and border. ---- */
.npe-my-grid{display:grid;gap:12px;}
.npe-my fieldset{margin:0;padding:0;border:0;min-width:0;}
.npe-my legend{padding:0;margin:0 0 4px;font-size:13px;color:var(--fg1);}
.npe-my legend.npe-my-eyebrow{margin:0 0 6px;font-size:10px;color:var(--fg2);} /* a section label keeps the kc eyebrow size */
@media (min-width:600px){
  .npe-my-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
}

/* ---- UX-PORTAL-a: My KCDC on the console kit (UX assessment §4.22). console-kit.css loads
   before this file (handle npe-portal-kit). These rules keep the portal's 44px targets and
   16px inputs, and style the kit pieces that console-kit.css scopes to .npe-console.
   Views use .npe-k-card / .npe-k-grid / .npe-k-fields + Kit::field() / Kit::empty_state() /
   Kit::stat_row(); never copy a kit rule here. ---- */
.npe-my [hidden]{display:none!important;}
.npe-my .npe-k-card__title{margin:0;}
.npe-my .npe-k-card__bd.npe-k-form{display:flex;flex-direction:column;}
.npe-my .npe-k-fields{gap:var(--s3) var(--s4);}
.npe-my .npe-k-field>label,.npe-my .npe-k-field__label{font-size:var(--t-sm);}
.npe-my .npe-k-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.npe-my .npe-k-field select,
.npe-my .npe-k-field textarea{width:100%;min-height:44px;padding:0 var(--s3);border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font:inherit;font-size:var(--t-touch);}
.npe-my .npe-k-field textarea{min-height:96px;padding:var(--s2) var(--s3);}
.npe-my .npe-k-field input:focus,.npe-my .npe-k-field select:focus,.npe-my .npe-k-field textarea:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-my .npe-k-field__hint{font-size:var(--t-sm);}
.npe-my .npe-k-check{min-height:44px;font-size:14px;}
.npe-my .npe-k-check input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--sig);}
.npe-my .npe-k-form__actions{margin-top:auto;padding-top:var(--s4);}
.npe-my .npe-k-form__status{font-size:13px;}
.npe-my .npe-k-empty__text{font-size:13px;}
.npe-my .npe-k-note{margin:0;flex-wrap:wrap;font-size:14px;}
.npe-my .npe-k-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);}
/* Three tiles share a ~350px column: a flex column keeps the values on one line across
   the row when a label wraps ("Shifts served"), and the value steps down from the 28px KPI
   size so "1,312.5" stays on one line. */
.npe-my .npe-k-stat{display:flex;flex-direction:column;justify-content:space-between;gap:var(--s2);padding:var(--s3);min-width:0;overflow-wrap:anywhere;}
.npe-my .npe-k-stat__value{margin:0;font-size:var(--t-rec);}
.npe-my-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 var(--s3);}
.npe-my-checks.is-wide{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-height:14rem;overflow:auto;}
.npe-my-disclose>summary{list-style:none;cursor:pointer;width:fit-content;}
.npe-my-disclose>summary::-webkit-details-marker{display:none;}
.npe-my-disclose[open]>summary{margin-bottom:var(--s3);}
@media (max-width:899px){
  .npe-my .npe-k-grid.cols-2,.npe-my .npe-k-grid.cols-main{grid-template-columns:minmax(0,1fr);}
}

/* ---- UX-PORTAL-a: Home — a card's eyebrow, its title link and a checklist row on a phone ---- */
.npe-my-head .npe-my-eyebrow{margin:0 0 2px;}
.npe-my-head > b a{color:inherit;text-decoration:none;}
.npe-my-head > b a:hover{text-decoration:underline;}
.npe-my-ci > span{min-width:0;overflow-wrap:anywhere;}
.npe-my-check .npe-my-ci + .npe-my-ci{margin-top:var(--s1);}
.npe-my-ci > .npe-my-btn{flex:none;}

/* ---- UX-PORTAL-a: Profile — emergency contacts are read rows (never a card inside a
   card); an open Edit form takes the full width under its row ---- */
.npe-my-contact{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);}
.npe-my-contact .npe-my-head{flex:1 1 220px;min-width:0;overflow-wrap:anywhere;}
.npe-my-contact__actions{align-items:flex-start;}
.npe-my-contact:has(.npe-my-disclose[open]) .npe-my-contact__actions{flex:1 1 100%;}
.npe-my-contact__actions .npe-my-disclose[open]{flex:1 1 100%;}

/* ---- UX-PORTAL-a: the signed-out screen — one centred 440px card, not the two-column app
   grid (the guest view has no rail, so its only child used to land in the 248px column) ---- */
[data-npe-my-guest] .npe-my-app{display:block;}
[data-npe-my-guest] .npe-my-main{max-width:440px;margin:0 auto;padding:32px 16px 48px;}
/* A public page (sign-in, confirm links): no app canvas or top rule around the card, which read
   as a stray grey box inside the site's page; the card itself carries the brand. */
[data-npe-my-guest] .npe-my-app{background:transparent;border-top:0;min-height:0;}
[data-npe-my-guest] .npe-my-main{max-width:480px;padding:24px 16px 56px;}
[data-npe-my-guest] .npe-k-card{border-top:4px solid var(--npe-primary,var(--sig));border-radius:12px;box-shadow:0 10px 30px rgba(16,25,43,.10);}
[data-npe-my-guest] .npe-k-card__bd{padding:28px;}
[data-npe-my-guest] .npe-my-h{font-family:var(--npe-heading-font,inherit);font-size:1.6rem;font-weight:800;line-height:1.2;color:var(--npe-primary,var(--fg));}
/* The board page's "no access" card is the same centred card. */
.npe-my[data-npe-board-denied] .npe-my-app{display:block;}
.npe-my[data-npe-board-denied] .npe-my-main{max-width:440px;margin:0 auto;padding:32px 16px 48px;}
.npe-my-or{display:flex;align-items:center;gap:var(--s3);margin:0;font-size:var(--t-sm);color:var(--fg2);}
.npe-my-or::before,.npe-my-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---- UX-PORTAL-a: Messages — the thread (a card; no fixed minimum height) and its composer.
   On phones the textarea takes the full width and Send sits under it at 44px. ---- */
.npe-my-thread{display:flex;flex-direction:column;gap:var(--s1);max-height:56vh;overflow-y:auto;}
.npe-my-day{display:flex;align-items:center;gap:var(--s3);margin:var(--s2) 0;font-size:var(--t-meta);color:var(--fg2);}
.npe-my-day::before,.npe-my-day::after{content:"";flex:1;height:1px;background:var(--line);}
.npe-my-msg{display:flex;flex-direction:column;max-width:80%;margin-bottom:var(--s2);}
.npe-my-msg.is-you{align-self:flex-end;align-items:flex-end;}
.npe-my-msg.is-team{align-self:flex-start;align-items:flex-start;}
.npe-my-msg-who{margin-bottom:2px;font-size:var(--t-meta);font-weight:600;color:var(--fg1);}
.npe-my-msg-body{padding:10px 14px;border-radius:14px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.npe-my-msg.is-you .npe-my-msg-body{background:var(--sig-fill);color:#fff;border-bottom-right-radius:4px;}
.npe-my-msg.is-team .npe-my-msg-body{background:var(--bg1);color:var(--fg0);border-bottom-left-radius:4px;}
.npe-my-msg-stamp{margin-top:2px;font-size:var(--t-meta);color:var(--fg2);}
.npe-my-compose{display:flex;gap:var(--s2);align-items:flex-end;}
.npe-my-compose textarea{flex:1;min-width:0;min-height:44px;padding:10px var(--s3);border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font:inherit;font-size:var(--t-touch);resize:vertical;}
.npe-my-compose textarea:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-my-compose .npe-my-btn{flex:none;}
@media (max-width:720px){
  .npe-my-msg{max-width:90%;}
  .npe-my-compose{flex-direction:column;align-items:stretch;}
  .npe-my-compose textarea{flex:none;width:100%;}
  .npe-my-compose .npe-my-btn{align-self:flex-end;}
}

/* ---- UX-PORTAL-d: Family and waivers. One waiver pill (views/portal/one/waiver-pill.php);
   read rows with labelled facts (children, waivers) whose open Edit / Remove panel takes
   the full width under the row; the signing block (tight agreements, taller text from
   900px); the signed copy. Fields, cards and grids are the kit's. ---- */
.npe-my-pill.is-crit{background:var(--crit-bg);color:var(--crit);}
.npe-my-item{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--line);}
.npe-my-item:last-child{padding-bottom:0;border-bottom:0;}
.npe-my-item__main{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:var(--s2);overflow-wrap:anywhere;}
.npe-my-item__name{font-size:15px;font-weight:700;color:var(--fg0);}
.npe-my-facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;}
.npe-my-facts>div{min-width:0;}
.npe-my-facts dt{font-family:var(--fmono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-my-facts dd{margin:2px 0 0;font-size:14px;color:var(--fg0);}
.npe-my-item__actions{align-items:flex-start;}
.npe-my-item:has(.npe-my-disclose[open]) .npe-my-item__actions{flex:1 1 100%;}
.npe-my-item__actions .npe-my-disclose[open]{flex:1 1 100%;}
.npe-my-confirm{display:flex;flex-direction:column;gap:var(--s3);font-size:14px;}
.npe-my-confirm p{margin:0;}
/* A closed confirm is only its summary button: the column gap would add 12px under it (the
   hidden details content is still a flex item) and push a sibling button off its centre line. */
details.npe-my-confirm:not([open]){gap:0;}
.npe-my-sign{gap:var(--s3);}
.npe-my-acks,.npe-my-pick{display:flex;flex-direction:column;}
.npe-my-acks .npe-k-field__error,.npe-my-pick .npe-k-field__error{margin:0 0 var(--s2);font-size:var(--t-sm);color:var(--crit);}
.npe-my-youth>.npe-k-card{margin-top:0;}
.npe-my-youth[open]>summary.is-primary{background:var(--bg0);border-color:var(--line);color:var(--fg0);}
.npe-my-agreed{margin:0;padding-left:var(--s5);font-size:14px;}
.npe-my-copy .npe-my-scroll{max-height:none;overflow:visible;}
/* KCDC Households W2 — My KCDC › Household is kit cards, fields, items and pills. Only
   three things need a rule: the name + role line, a sentence inside a card, and the
   "Adults" / "Children" labels inside a list (no theme paragraph spacing on any of them). */
.npe-my-hh-head{margin:0;padding:0;font-size:15px;color:var(--fg0);}
.npe-my-hh-text{margin:0;padding:0;font-size:14px;color:var(--fg0);}
.npe-k-card__bd>.npe-my-eyebrow{margin:0;padding:0;}
@media (min-width:900px){
  .npe-my-scroll{max-height:420px;}
}
@media (max-width:599px){
  .npe-my-facts{flex-direction:column;gap:var(--s2);}
  .npe-my-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);}
  .npe-my-facts dd{margin:0;text-align:right;}
  .npe-my-item__actions{flex:1 1 100%;}
  /* Each action keeps its label on one line; two that do not fit side by side wrap to full-width rows (FF2 #9). */
  .npe-my-item__actions>.npe-my-disclose:not([open]),.npe-my-item__actions>a.npe-my-btn{flex:1 1 auto;}
  .npe-my-item__actions>a.npe-my-btn,.npe-my-item__actions>.npe-my-disclose:not([open])>summary{white-space:nowrap;}
  .npe-my-item__actions>.npe-my-disclose:not([open])>summary{width:100%;}
  /* Three or more actions (a manager row: Remove as manager, Hand over, Remove) stack full-width so no label wraps inside its button. */
  .npe-my-item__actions:has(>:nth-child(3))>.npe-my-disclose:not([open]),.npe-my-item__actions:has(>:nth-child(3))>a.npe-my-btn{flex-basis:100%;}
}

/* ==========================================================================
   UX-PORTAL-b — Volunteer: sub-tab row + view switch, Browse (toolbar, one card
   per opportunity, date chips), the calendar, the sign-up step, My shifts, Hours and
   Reports. Kit pieces (.npe-k-seg, .npe-k-filter, .npe-k-empty, .npe-k-cal, .npe-k-table)
   are drawn by console-kit.css; this block only maps them to portal sizes and adds what
   the kit has no piece for. Tokens only; 44px targets.
   ========================================================================== */
.npe-my .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---- sub-tab row with the List / Calendar switch. The switch is the kit's segmented
   control (.npe-k-seg, console-kit.css); its link rules are scoped to .npe-console there,
   so they are mapped here at portal sizes (the same way UX-PORTAL-a maps .npe-c-btn). ---- */
.npe-my-tabrow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2) var(--s4);}
.npe-my-tabrow .npe-my-tabs{flex:1 1 auto;min-width:0;}
.npe-my .npe-k-seg{flex:none;}
.npe-my .npe-k-seg>a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);border-radius:6px;font-size:var(--t-sm);font-weight:600;line-height:1.3;color:var(--fg1);text-decoration:none;white-space:nowrap;}
.npe-my .npe-k-seg>a:hover{color:var(--fg0);}
.npe-my .npe-k-seg>[aria-pressed="true"],.npe-my .npe-k-seg>[aria-pressed="true"]:hover{background:var(--bg0);color:var(--sig-text);box-shadow:var(--sh-sm);}
.npe-my-tabrow .npe-k-seg{margin-bottom:var(--s1);}
.npe-my .npe-my-btn.is-disabled,.npe-my .npe-my-btn[disabled]{opacity:.5;cursor:default;pointer-events:none;}

/* ---- the kit's filter bar (.npe-k-filter) above a list of cards: no card padding or rule
   under it, and 44px / 16px controls (the kit's control rules are scoped to .npe-console). ---- */
.npe-my .npe-k-filter{padding:0;border-bottom:0;gap:var(--s2) var(--s3);}
.npe-my .npe-k-search{min-height:44px;background:var(--bg0);border-color:var(--line2);}
.npe-my .npe-k-search input{flex:1;width:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;font:inherit;font-size:var(--t-touch);color:var(--fg0);}
.npe-my .npe-k-filter__field select{min-height:44px;max-width:100%;padding:0 var(--s3);border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font:inherit;font-size:var(--t-touch);}
.npe-my .npe-k-filter__field select:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-my .npe-k-filter__clear{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-sm);font-weight:600;color:var(--sig-text);}
.npe-my .npe-k-empty .link{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-sm);font-weight:600;color:var(--sig-text);}

/* ---- Browse: one card per opportunity, its next dates as chips ---- */
.npe-my-opp{display:flex;flex-direction:column;gap:10px;}
.npe-my-opp__title{display:block;margin:0;font-family:var(--fdisp);font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--fg0);}
.npe-my-opp__head p{margin:2px 0 0;}
.npe-my-opp__blurb{margin:0;max-width:72ch;font-size:14px;color:var(--fg1);}
.npe-my-opp__reqs{display:flex;flex-wrap:wrap;gap:6px;margin:0;}
.npe-vol-transport{display:flex;flex-direction:column;gap:4px;}
.npe-vol-transport p{margin:0;}
.npe-my-opp__roles{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;}
.npe-my-opp .npe-my-eyebrow{margin:4px 0 0;}
.npe-my-opp__more{margin:0;font-size:13px;font-weight:600;}
.npe-my-dates{display:flex;flex-wrap:wrap;gap:8px;}
.npe-my .npe-my-date{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font-size:14px;font-weight:600;text-decoration:none;}
.npe-my a.npe-my-date:hover{border-color:var(--sig);background:var(--arc0);}
.npe-my-date__state{padding:2px 8px;border-radius:var(--rpill);background:var(--arc1);color:var(--sig-text);font-size:12px;white-space:nowrap;}
.npe-my .npe-my-date.is-full{border-style:dashed;background:var(--bg1);color:var(--fg2);}
.npe-my-date.is-full .npe-my-date__state{background:var(--bg2);color:var(--fg1);}
.npe-my .npe-my-date.is-mine{border-color:var(--ok);background:var(--ok-bg);}
.npe-my-date.is-mine .npe-my-date__state{padding:0;background:none;color:var(--ok);}
.npe-my .npe-my-date.is-waiting{border-color:var(--warn);background:var(--warn-bg);}
.npe-my-date.is-waiting .npe-my-date__state{padding:0;background:none;color:var(--warn);}
.npe-my .npe-my-date.is-pending{border-color:var(--warn);}
.npe-my-date.is-pending .npe-my-date__state{background:var(--warn-bg);color:var(--warn);}
.npe-my .npe-my-date.is-selected{border-color:var(--sig);box-shadow:inset 0 0 0 1px var(--sig);}
.npe-my-date__act{display:inline-flex;align-items:center;align-self:stretch;margin-right:-12px;padding:0 12px;font-size:13px;font-weight:700;white-space:nowrap;}

/* ---- the kit's calendar (.npe-k-cal, console-kit.css) with what a volunteer needs on top:
   the Earlier / Today / Later group, a day number that selects its day, a grey tone for a
   full date, the seats under the name, the selected day's list, and the row of a day's
   list (time, what, state, one 44px action). The grid, cells, chips and the agenda's day
   headings are the kit's own rules. ---- */
.npe-my-cal__nav{display:flex;gap:6px;}
.npe-my .npe-k-cal__title{margin:0;}
.npe-my .npe-my-cal__pick{display:flex;align-items:center;justify-content:flex-end;gap:6px;color:inherit;text-decoration:none;}
.npe-my-cal__dayname,.npe-my-cal__dot{display:none;}
.npe-my .npe-k-cal.is-month .npe-k-cal__cell.is-selected{box-shadow:inset 0 0 0 2px var(--sig);}
/* A day off that closes volunteering: the kit's grey cell, a muted number and a "Closed" pill (dropped on a phone). */
.npe-my .npe-k-cal__cell.is-closed{background:var(--bg2);}
.npe-my .npe-k-cal__cell.is-closed .npe-k-cal__num{color:var(--fg2);}
.npe-my .npe-k-cal__chip.is-full{border-left-color:var(--line2);background:var(--bg1);color:var(--fg2);}
.npe-my .npe-k-cal__chip.is-ok{background:var(--ok-bg);}
.npe-my .npe-k-cal__chip.is-warn{background:var(--warn-bg);}
.npe-my .npe-k-cal__chip .npe-k-cal__sub{font-weight:600;color:var(--sig-text);}
.npe-my .npe-k-cal__chip.is-full .npe-k-cal__sub{color:var(--fg2);}
.npe-my .npe-k-cal__chip.is-ok .npe-k-cal__sub{color:var(--ok);}
.npe-my .npe-k-cal__chip.is-warn .npe-k-cal__sub{color:var(--warn);}
.npe-my .npe-k-cal.is-week .npe-k-cal__grid{grid-auto-rows:minmax(260px,1fr);}
.npe-my .npe-k-cal.is-week .npe-k-cal__line{flex-direction:column;align-items:flex-start;gap:0;}
.npe-my .npe-k-cal.is-week .npe-k-cal__name{white-space:normal;}
/* month cells are narrow: the time sits on its own line and the name gets the chip's full width, two lines at most */
.npe-my .npe-k-cal.is-month .npe-k-cal__grid .npe-k-cal__line{flex-direction:column;align-items:flex-start;gap:0;}
.npe-my .npe-k-cal.is-month .npe-k-cal__grid .npe-k-cal__name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow-wrap:anywhere;}
.npe-my .npe-k-cal.is-month .npe-k-cal__grid .npe-k-cal__sub{white-space:normal;} /* "You're signed up" is read whole */
.npe-my-cal__selected{border-top:1px solid var(--line);}
.npe-my .npe-k-cal__events{margin:0;padding:var(--s3) var(--s4);list-style:none;}
.npe-my-agenda__row{display:grid;grid-template-columns:132px minmax(0,1fr) auto minmax(120px,auto);align-items:center;gap:var(--s2) var(--s3);min-height:44px;}
.npe-my-agenda__what{display:flex;flex-direction:column;min-width:0;font-size:14px;}

/* ---- sign-up step: back link, action row, role options, who is coming, requirement checks ---- */
.npe-my-back{margin:0;font-size:13px;font-weight:600;}
.npe-my-actions{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:8px;}
.npe-my-pill.is-crit{background:var(--crit-bg,var(--bg2));color:var(--crit);}
.npe-my-options{display:flex;flex-direction:column;gap:8px;}
.npe-my .npe-my-option{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:44px;padding:8px 12px;border:1px solid var(--line2);border-radius:var(--rbtn);color:var(--fg0);font-size:14px;text-decoration:none;}
.npe-my .npe-my-option.is-selected{border-color:var(--sig);background:var(--arc0);box-shadow:inset 0 0 0 1px var(--sig);}
.npe-my-people{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;}
.npe-my-person{padding:4px 0;border-bottom:1px solid var(--line);}
.npe-my-person:last-child{border-bottom:0;}
/* a person's status pill stays one line and drops below the name when the row is narrow (FF2 #8) */
.npe-my-person>.npe-my-choice{flex-wrap:wrap;row-gap:4px;}
.npe-my-person>.npe-my-choice .npe-my-pill{white-space:nowrap;}
.npe-my-reqs{display:flex;flex-direction:column;gap:6px;margin:0 0 8px 30px;padding:0;list-style:none;font-size:13px;}
.npe-my-reqs li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.npe-my [data-npe-my-signup-waivers] .npe-fe-waiver{max-width:none;margin:0;}

/* ---- My shifts: facts, inline swap / cancel panel, plain lists and tables ---- */
.npe-my-facts{display:grid;gap:8px;margin:0;font-size:14px;}
.npe-my-facts > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;}
.npe-my-facts dt{padding-top:3px;font-family:var(--fmono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-my-facts dd{margin:0;color:var(--fg0);overflow-wrap:anywhere;}
.npe-my-shift .npe-my-actions{justify-content:flex-start;}
.npe-my-panel{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--line);}
.npe-my-panel p{margin:0;font-size:14px;}
.npe-my-panel.is-danger b{color:var(--crit);}
.npe-my-date--pick{cursor:pointer;}
.npe-my-date--pick input{width:18px;height:18px;margin:0;}
.npe-my .npe-my-date--pick:has(input:checked){border-color:var(--sig);box-shadow:inset 0 0 0 1px var(--sig);}
.npe-my-list{margin:0;padding:0;list-style:none;}
.npe-my-list__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;}
.npe-my-list > .npe-my-list__row{padding:8px 0;border-bottom:1px solid var(--line);}
.npe-my-list > .npe-my-list__row:last-child{border-bottom:0;}
.npe-my-list__row .npe-my-head{flex:1 1 200px;min-width:0;}
/* The kit table (.npe-k-table) sits flush in a kit card (.npe-k-card__bd.is-flush): no
   second border. What the kit has no rule for: a bold total row. A note under the table is .npe-k-card__ft. */
.npe-my-tablewrap{overflow-x:auto;}
.npe-my .npe-k-table th{position:static;}
.npe-my .npe-k-table td:first-child{white-space:nowrap;}
.npe-my .npe-k-table tfoot th{border-top:2px solid var(--line2);border-bottom:0;background:none;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--fg0);}

/* ---- Hours: one kit stat tile (Kit::stat_row) at a tile's width, the period filter on the
   left and the actions on the right. The form is the kit's (.npe-k-form + Kit::field()). ---- */
.npe-my .npe-my-solo .npe-k-stats{grid-template-columns:minmax(0,320px);}
.npe-my-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);}
.npe-my-toolbar .npe-k-seg{max-width:100%;overflow-x:auto;}
.npe-my .npe-k-card__hd .npe-my-head{padding:var(--s1) 0;}

/* ---- UX-PORTAL-b: Volunteer on a phone (kit breakpoint 720) ---- */
@media (max-width:720px){
  .npe-my-tabrow .npe-my-tabs{flex-basis:100%;}
  /* the sub-tabs scroll like the section pills: a trailing fade while more follow (portal-one.js
     sets data-fade="none" at the end and centres the current tab), no scrollbar */
  .npe-my-tabs{scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);}
  .npe-my-tabs::-webkit-scrollbar{display:none;}
  .npe-my-tabs[data-fade="none"]{-webkit-mask-image:none;mask-image:none;}
  .npe-my-tabrow .npe-k-seg{margin:0 0 0 auto;}
  .npe-my .npe-k-seg>a{min-height:44px;}
  .npe-my .npe-k-filter__spacer{display:none;}
  .npe-my-dates{flex-direction:column;}
  .npe-my .npe-my-date{justify-content:space-between;width:100%;}
  .npe-my-date__when{margin-right:auto;}
  /* The console's calendar is always the agenda on a phone. My KCDC keeps the month grid
     with a count per day (the wave's ruling): the selected day's list, under the grid, is
     how a day is read. */
  .npe-my .npe-k-cal.is-month .npe-k-cal__dow{display:grid;}
  .npe-my .npe-k-cal.is-month .npe-k-cal__dow span{padding:var(--s2) 0;text-align:center;letter-spacing:.06em;}
  .npe-my .npe-k-cal.is-month .npe-k-cal__grid{display:grid;grid-auto-rows:minmax(56px,1fr);}
  .npe-my .npe-k-cal.is-month .npe-k-cal__cell{padding:2px;}
  .npe-my .npe-k-cal.is-month .npe-k-cal__chip,.npe-my .npe-k-cal.is-month .npe-k-cal__more{display:none;}
  .npe-my .npe-k-cal.is-month .npe-my-cal__pick{flex-direction:column;justify-content:center;gap:2px;width:100%;min-height:52px;}
  .npe-my .npe-k-cal.is-month .npe-k-cal__num{align-self:center;}
  .npe-my .npe-k-cal.is-month .npe-k-cal__closed{display:none;}
  .npe-my .npe-k-cal.is-month .npe-my-cal__dot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--rpill);background:var(--arc1);color:var(--sig-text);font-size:11px;font-weight:700;line-height:1;}
  .npe-my .npe-k-cal.is-month .npe-my-cal__dot.is-full{background:var(--bg3);color:var(--fg1);}
  .npe-my .npe-k-cal.is-month .npe-my-cal__dot.is-mine{background:var(--ok-bg);color:var(--ok);}
  /* Week on a phone: the seven days stack. */
  .npe-my .npe-k-cal.is-week .npe-k-cal__grid{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;}
  .npe-my .npe-k-cal.is-week .npe-k-cal__cell{padding:10px var(--s4);border-right:0;}
  .npe-my .npe-k-cal.is-week .npe-my-cal__pick{justify-content:flex-start;font-size:14px;font-weight:700;color:var(--fg0);}
  .npe-my .npe-k-cal.is-week .npe-my-cal__dayname{display:inline;}
  .npe-my .npe-k-cal.is-week .npe-k-cal__num{display:none;}
  .npe-my .npe-k-cal.is-week .npe-k-cal__chip{display:flex;flex-direction:column;justify-content:center;min-height:44px;}
  .npe-my-agenda__row{grid-template-columns:minmax(0,1fr) auto;}
  .npe-my-agenda__row .npe-k-cal__time{grid-column:1 / -1;}
  .npe-my-agenda__row .npe-my-btn{grid-column:1 / -1;}
  .npe-my-actions{justify-content:stretch;}
  .npe-my-actions > .npe-my-btn{flex:1 1 auto;}
  .npe-my-shift .npe-my-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Definition rows read like the stacked table rows below: label left and value right on
     one line. A long text value (.is-long: Where, Good to know) sits left-aligned under its
     label. These must stay after the base ".npe-my-facts > div" grid rule to win. */
  .npe-my-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);}
  .npe-my-facts dt{flex:none;padding-top:0;}
  .npe-my-facts dd{min-width:0;margin:0;text-align:right;}
  .npe-my-facts > div.is-long{display:block;}
  .npe-my-facts > div.is-long dd{margin-top:2px;text-align:left;}
  /* The kit table on a phone: each row becomes a block of label: value pairs (the kit's own
     stack rules are scoped to .npe-console; these are the same reading at portal sizes). */
  .npe-my .npe-k-table,.npe-my .npe-k-table tbody,.npe-my .npe-k-table tfoot{display:block;width:100%;}
  .npe-my .npe-k-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .npe-my .npe-k-table tr{display:block;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
  .npe-my .npe-k-table tbody tr:last-child{border-bottom:0;}
  .npe-my .npe-k-table td{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);height:auto;padding:var(--s1) 0;border:0;text-align:right;white-space:normal;}
  .npe-my .npe-k-table td::before{content:attr(data-label);flex:0 0 40%;font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--fg2);}
  .npe-my .npe-k-table td:first-child{display:block;text-align:left;}
  .npe-my .npe-k-table td:first-child::before,.npe-my .npe-k-table td:empty{content:none;}
  .npe-my .npe-k-table tfoot tr{display:flex;justify-content:space-between;border-top:2px solid var(--line2);border-bottom:0;}
  .npe-my .npe-k-table tfoot th{display:block;padding:0;border:0;}
  /* ---- end UX-PORTAL-b phone ---- */
}

/* ---- the 248px rail from 900px ---- */
@media (min-width:900px){
  .npe-my-app{display:grid;grid-template-columns:var(--c-sb) minmax(0,1fr);}
  .npe-my-rail{border-bottom:0;border-right:1px solid var(--line);padding:22px 16px;}
  .npe-my-rail-in{position:sticky;top:16px;}
  .npe-my-navwrap{flex-direction:column;overflow:visible;gap:0;padding-bottom:0;-webkit-mask-image:none;mask-image:none;}
  .npe-my-nav,.npe-my-account{display:flex;flex-direction:column;gap:2px;}
  .npe-my-account{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);}
  .npe-my-navwrap a{border-radius:var(--rbtn);background:none;}
  .npe-my-navwrap a[aria-current="page"]{background:var(--arc1);color:var(--sig-text);}
  .npe-my-main{padding:28px 32px;max-width:960px;}
}

/* ---- UX-PORTAL-c: Pantry, Giving and Board. Every block below is this wave's; it only
   adds rules (it never edits one above), uses tokens only, and keeps 44px targets. ---- */
.npe-my-arrow{flex:none;width:14px;height:14px;}

/* day and time chips (views/portal/one/pantry/picker.php): a week per row, each row
   scrolls sideways on a phone; times wrap. 44px targets. */
.npe-my-picker{display:flex;flex-direction:column;gap:var(--s3);min-width:0;}
.npe-my-week{display:flex;flex-direction:column;gap:var(--s1);min-width:0;}
.npe-my-week__label{font-size:12px;font-weight:600;color:var(--fg2);}
.npe-my-chips{display:flex;gap:var(--s2);min-width:0;padding:2px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.npe-my-chips > *{flex:none;}
.npe-my-chips.is-wrap{flex-wrap:wrap;overflow:visible;}
.npe-my-chip{position:relative;display:inline-flex;}
.npe-my-chip input{position:absolute;width:1px;height:1px;opacity:0;}
.npe-my .npe-my-chip__face{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:var(--s1) var(--s3);border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font-size:14px;font-weight:600;line-height:1.25;text-decoration:none;white-space:nowrap;cursor:pointer;}
.npe-my .npe-my-chip__face small{font-size:12px;font-weight:600;color:var(--fg2);}
.npe-my .npe-my-chip__face:hover{background:var(--bg1);}
.npe-my .npe-my-chip__face.is-on,.npe-my .npe-my-chip input:checked + .npe-my-chip__face{border-color:var(--sig-fill);background:var(--sig-fill);color:var(--bg0);}
.npe-my .npe-my-chip__face.is-on small{color:var(--bg0);}
/* A day off on a day the pantry would run: greyed, struck through, not a link. */
.npe-my .npe-my-chip__face.is-closed{background:var(--bg2);border-style:dashed;color:var(--fg2);cursor:not-allowed;text-decoration:line-through;}
.npe-my .npe-my-chip__face.is-closed:hover{background:var(--bg2);}
.npe-my .npe-my-chip__face.is-closed small{text-decoration:none;}
.npe-my .npe-my-chip input:focus-visible + .npe-my-chip__face{outline:2px solid var(--sig);outline-offset:2px;}
/* Phone: a week of day chips wraps four across, so no day hides behind a sideways scroll. */
@media (max-width:599px){
  .npe-my-week .npe-my-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;}
  .npe-my .npe-my-week .npe-my-chip__face{min-width:0;padding-left:var(--s1);padding-right:var(--s1);}
}
.npe-my-times{display:flex;flex-direction:column;gap:var(--s2);}
.npe-my-times legend{font-size:13px;font-weight:600;color:var(--fg1);}

/* Pantry section: check-in card (two columns from 600px), inline cancel, lists */
.npe-my-qr{display:flex;flex-direction:column;gap:var(--s3);}
.npe-my-qr__code{width:100%;max-width:200px;}
.npe-my-qr__code svg{display:block;width:100%;height:auto;}
.npe-my-qr__text{display:flex;flex-direction:column;gap:var(--s1);min-width:0;}
.npe-my-qr__text b{font-size:15px;color:var(--fg0);}
.npe-my-mono{font-family:var(--fmono);font-size:13px;white-space:nowrap;color:var(--fg1);}
.npe-my-confirm[open]{flex:1 1 100%;}
.npe-my-list{margin:0;padding:0;list-style:none;}
.npe-my-list li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);font-size:14px;}
.npe-my-list li:last-child{border-bottom:0;}
.npe-my-list li > span:first-child{display:flex;flex-direction:column;min-width:0;}
.npe-my-recert{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;font-size:13px;color:var(--fg1);}
@media (min-width:600px){
  .npe-my-qr{flex-direction:row;align-items:center;gap:var(--s5);}
  .npe-my-qr__code{flex:none;width:160px;}
}

/* booking: program cards side by side from 600px; the three counts always on one row */
.npe-my-programs{display:grid;gap:var(--s3);}
.npe-my .npe-my-program{gap:2px;padding:var(--s4);color:var(--fg0);text-decoration:none;}
.npe-my .npe-my-program:hover{border-color:var(--sig);}
.npe-my-program > b{font-size:15px;}
.npe-my-program > span{font-size:13px;color:var(--fg2);}
.npe-my .npe-my-program > .npe-my-program__go{margin-top:auto;padding-top:var(--s2);font-size:14px;font-weight:600;color:var(--sig-text);}
.npe-my-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3);}
@media (min-width:600px){
  .npe-my-programs{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Giving: two tiles, tables inside cards, two-line gift rows under 600px */
.npe-my-two{display:flex;flex-direction:column;gap:var(--s2);}
.npe-my .npe-my-two .npe-k-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
.npe-my .npe-k-card .npe-my-table{border:0;border-radius:0;}
.npe-my .npe-k-card .npe-my-table tr:last-child td{border-bottom:0;}
.npe-my-gift__date{white-space:nowrap;}
.npe-my-block{display:block;}
.npe-my-tablewrap{min-width:0;overflow-x:auto;}
.npe-my-list li.npe-my-list__hd{background:var(--bg1);}
.npe-my-lines{margin:0;padding-left:var(--s5);font-size:13px;color:var(--fg1);}
@media (max-width:599px){
  .npe-my-gifts,.npe-my-gifts tbody{display:block;}
  .npe-my-gifts thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .npe-my-gifts tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s3);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);}
  .npe-my-gifts tr:last-child{border-bottom:0;}
  .npe-my-gifts td,.npe-my .npe-k-card .npe-my-gifts td{display:block;min-width:0;padding:0;border:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .npe-my-gifts td.npe-my-gift__amount{grid-column:1;grid-row:1;text-align:left;font-weight:700;color:var(--fg0);}
  .npe-my-gifts td.npe-my-gift__date{grid-column:2;grid-row:1;font-size:13px;color:var(--fg2);}
  .npe-my-gifts td.npe-my-gift__campaign{grid-column:1;grid-row:2;font-size:13px;color:var(--fg2);}
  .npe-my-gifts td.npe-my-gift__how{grid-column:2;grid-row:2;font-size:13px;color:var(--fg2);}
}

/* Board: KPI tiles (24px value, no stranded tile), "Your answer", stacked asks on a phone */
.npe-my-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);}
.npe-my-kpis > :last-child:nth-child(odd){grid-column:1 / -1;}
.npe-my .npe-my-kpi{gap:2px;padding:var(--s4);}
.npe-my-kpi b{display:block;font-family:var(--fdisp);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--fg0);}
.npe-my-kpi > span{font-size:13px;color:var(--fg2);}
/* Board › Updates: a card's actions on one row, the answer at the right like the Overview's acknowledge row. */
.npe-my-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);}
.npe-my-acts > :not(:first-child):last-child{margin-left:auto;}
.npe-my-answered{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);font-size:14px;}
.npe-my-answered .npe-my-disclose[open]{flex:1 1 100%;}
@media (min-width:900px){
  .npe-my-kpis.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .npe-my-kpis.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
  .npe-my-kpis.cols-3 > :last-child:nth-child(odd),.npe-my-kpis.cols-4 > :last-child:nth-child(odd){grid-column:auto;}
}
@media (max-width:599px){
  .npe-my-ask{flex-wrap:wrap;padding:var(--s2) 0;}
  .npe-my-ask > span{flex:1 1 0;min-width:0;}
  .npe-my-ask > form{flex:1 1 100%;flex-wrap:nowrap;margin-left:0;}
  .npe-my .npe-my-ask > form .npe-my-btn{flex:1 1 0;min-width:0;padding:0 var(--s2);font-size:13px;}
  /* A meeting's RSVP: three equal 44px buttons across the card, never "Maybe" alone on a second line. */
  .npe-my-rsvp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;}
  .npe-my .npe-my-rsvp .npe-my-btn{min-width:0;padding:0 var(--s2);font-size:13px;}
}

/* ---- UX-PORTAL-c part 2: the public pantry booking pages. .npe-pbk sits inside .npe-my,
   so the tokens, cards, chips, program cards, the counts row and the 44px controls above
   apply. Step header, steppers, and the page frame are the only new pieces. ---- */
.npe-pbk{max-width:760px;margin:0 auto;padding:var(--s4);border-top:2px solid var(--sig);background:var(--canvas);}
/* Divi sections and rows can carry a fixed height (set in the builder); the booking card grows as the visitor picks a pantry, a day and a time,
   so a fixed-height section let it spill over the heading that follows. */
.et_pb_section:has(.npe-pbk),.et_pb_row:has(.npe-pbk){height:auto!important;max-height:none!important;}
.npe-pbk [hidden]{display:none!important;}
/* the shared public page header (public-one.css's .npe-pub-head), on the sheet this page loads */
.npe-pbk .npe-pub-head h1{margin:0;padding:0;font-family:var(--fdisp);font-weight:800;font-size:var(--t-h1);letter-spacing:-.03em;line-height:1.1;color:var(--fg0);overflow-wrap:anywhere;}
.npe-pbk .npe-pub-head p{margin:var(--s1) 0 0;padding:0;max-width:72ch;font-size:var(--t-title);color:var(--fg1);}
.npe-pbk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:0;padding:0;list-style:none;}
.npe-pbk-steps li{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:var(--s2);border-top:3px solid var(--line2);font-size:12px;color:var(--fg2);}
.npe-pbk-steps li > span{font-family:var(--fmono);font-size:11px;}
.npe-pbk-steps li > b{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
.npe-pbk-steps li.is-current{border-top-color:var(--sig);color:var(--fg0);}
.npe-pbk-steps li.is-done{border-top-color:var(--ok);color:var(--fg1);}
.npe-pbk-stepper{display:flex;flex-direction:column;min-width:0;}
.npe-pbk-stepper > label{margin:0 0 6px;font-size:var(--t-sm);font-weight:600;color:var(--fg0);}
.npe-pbk-stepper__row{display:flex;align-items:stretch;gap:2px;min-width:0;}
.npe-my .npe-pbk-stepper__btn{flex:none;width:44px;min-height:44px;padding:0;border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font:inherit;font-size:18px;font-weight:600;line-height:1;cursor:pointer;}
.npe-my .npe-pbk-stepper__btn:hover{background:var(--bg1);}
.npe-my .npe-pbk-stepper__row input{flex:1 1 0;width:100%;min-width:0;min-height:44px;padding:0;border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);font:inherit;font-size:var(--t-touch);text-align:center;-moz-appearance:textfield;appearance:textfield;}
.npe-pbk-stepper__row input::-webkit-outer-spin-button,.npe-pbk-stepper__row input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none;}
@media (min-width:600px){
  .npe-pbk{padding:var(--s6);}
}
@media (max-width:599px){
  .npe-pbk .npe-pub-head h1{font-size:var(--t-rec);}
  .npe-pbk .npe-my-counts{grid-template-columns:1fr;} /* three steppers side by side left the number box about 40px wide on a phone */
  .npe-pbk-steps li > b{overflow:visible;white-space:normal;} /* "Your details" wraps under its number, it is never cut to "Your det…" */
}

/* ---- The pantry booking flow without a page load (PantryFlow, assets/js/pantry-flow.js): in the page on the public
   booking page, in a dialog in My KCDC (a full-screen sheet on a phone). The steps are the server's own markup, so
   the program cards, chips, fields and counts above apply. ---- */
.npe-pbf{display:flex;flex-direction:column;gap:var(--s4);min-width:0;}
.npe-pbf [hidden]{display:none!important;}
.npe-pbf__steps{grid-template-columns:repeat(6,minmax(0,1fr));}
.npe-pbf__caption{display:none;margin:0;font-size:var(--t-sm);font-weight:600;color:var(--fg1);}
.npe-pbf__panels{min-width:0;transition:opacity .12s;}
.npe-pbf.is-busy .npe-pbf__panels{opacity:.55;pointer-events:none;}
.npe-pbf__title{margin:0;font-family:var(--fdisp);font-weight:800;font-size:var(--t-h2);letter-spacing:-.01em;line-height:1.25;color:var(--fg0);}
.npe-pbf__title:focus-visible{outline:2px solid var(--sig);outline-offset:4px;border-radius:4px;}
.npe-my .npe-pbf__link{display:inline-block;margin:calc(var(--s3) * -1) 0;padding:var(--s3) var(--s1);border:0;background:none;color:var(--sig-text);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;}
.npe-pbf__summary{display:flex;flex-direction:column;margin:0;border:1px solid var(--line);border-radius:var(--rcard);background:var(--bg0);}
.npe-pbf__summary > div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line);}
.npe-pbf__summary > div:first-child{border-top:0;}
.npe-pbf__summary dt{font-size:var(--t-sm);color:var(--fg2);}
.npe-pbf__summary dd{margin:0;font-weight:600;overflow-wrap:anywhere;}
html.npe-pbf-lock,html.npe-pbf-lock body{overflow:hidden;}
/* Full-screen above the site header. The WordPress toolbar offset applies only while the toolbar is there (body.admin-bar):
   the variable is set on a phone even for a member who has no toolbar, which left a strip at the top where the header's logo showed. */
.npe-pbf-modal{position:fixed;inset:0;z-index:100001;display:flex;align-items:center;justify-content:center;padding:var(--s4);}
body.admin-bar .npe-pbf-modal{top:var(--wp-admin--admin-bar--height,0px);}
.npe-pbf-modal__scrim{position:absolute;inset:0;background:var(--scrim);}
.npe-pbf-modal__dialog{position:relative;display:flex;flex-direction:column;width:100%;max-width:640px;max-height:100%;background:var(--bg0);border-radius:var(--rrow);box-shadow:var(--sh-lg);}
.npe-pbf-modal__dialog:focus{outline:none;}
.npe-pbf-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);}
.npe-pbf-modal__title{margin:0;font-family:var(--fdisp);font-weight:800;font-size:var(--t-h2);color:var(--fg0);}
.npe-my .npe-pbf-modal__x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:calc(var(--s3) * -1);padding:0;border:0;border-radius:var(--rbtn);background:none;color:var(--fg1);cursor:pointer;}
.npe-my .npe-pbf-modal__x:hover{background:var(--bg1);}
.npe-pbf-modal__body{flex:1 1 auto;min-height:0;padding:var(--s5);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
@media (max-width:600px){
  .npe-pbf-modal{padding:0;align-items:stretch;}
  .npe-pbf-modal__dialog{max-width:none;height:100%;border-radius:0;}
  .npe-pbf-modal__head{padding:var(--s2) var(--s4);}
  .npe-pbf-modal__body{padding:var(--s4);}
  .npe-pbf__steps li > b{display:none;} /* six labels do not fit a phone: the numbers show the place, the caption says the step */
  .npe-pbf__caption{display:block;}
  .npe-pbf__summary > div{grid-template-columns:minmax(0,1fr);gap:0;}
}
@supports (height:100dvh){
  @media (max-width:600px){
    .npe-pbf-modal{bottom:auto;height:100dvh;}
    body.admin-bar .npe-pbf-modal{height:calc(100dvh - var(--wp-admin--admin-bar--height,0px));}
  }
}
@media (prefers-reduced-motion:reduce){
  .npe-pbf__panels{transition:none;}
}

/* ---- print (verified-hours report): hide the site chrome and the rail ---- */
@media print{
  body.npe-app-portal header,body.npe-app-portal footer,body.npe-app-portal #main-header,body.npe-app-portal #main-footer,
  body.npe-app-portal .et-l--header,body.npe-app-portal .et-l--footer{display:none!important;}
  .npe-my-rail,.npe-my-tabs,.npe-my-notice,.npe-my-noprint,.npe-my .npe-flash-message{display:none!important;}
  .npe-my-app{display:block;border-top:0;background:#fff;}
  .npe-my-main{padding:0;max-width:none;}
  .npe-my-card,.npe-my-table{box-shadow:none;}
}