/* ==========================================================================
   NPE Console — the shared UI kit (UX-KIT, UX assessment §4).

   Always loaded right after console.css (Console::enqueue_console_bundle), on
   both mounts and whatever the rollout flags say. Every console view is built
   from these primitives; area waves add only what is unique to their screens
   in their own sheet.

   Rules for this file (tests/unit/KitCssTest.php):
     - tokens only: no colour literal, and every font-size is a var(--t-*)
       from npe-tokens.css;
     - breakpoints: only 1080, 900 and 720 (plus pointer:coarse, print, and "screen and"
       on the 720 block that stacks tables);
     - new classes are .npe-k-*; existing .npe-c-* classes are normalised here,
       never redefined in a view.

   Sections
     1  base            6  buttons          11  pills + notice
     2  page header     7  filter bar       12  shell fixes
     3  card + grid     8  table + pager    13  legacy aliases (delete as views migrate)
     4  stats           9  form             14  phone (<=720) + touch
     5  tabs + seg     10  empty state

   Composites (UX-KIT-b, UX assessment §4.12 and §4.16 – §4.21)
    15  drawer + dialog + toast   18  chart       21  record + key/value
    16  bulk bar                  19  calendar    22  composites on a phone
    17  board                     20  pickers
   ========================================================================== */

/* ---------- 1 base ---------- */
.npe-console [hidden]{display:none!important;}
.npe-console .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}
.npe-console .link{color:var(--sig-text);font-size:var(--t-sm);font-weight:600;font-family:inherit;background:none;border:0;padding:0;cursor:pointer;}
.npe-console .link:hover{text-decoration:underline;}
.npe-console .link.danger{color:var(--crit);}
.npe-k-stack{display:flex;flex-direction:column;gap:var(--s4);min-width:0;}

/* ---------- 2 page header + section header ---------- */
.npe-k-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin:0 0 var(--s4);}
.npe-k-head__main{flex:1 1 320px;min-width:0;}
.npe-k-head .npe-c-back{margin:0 0 var(--s2);}
.npe-k-head__row{display:flex;align-items:flex-start;gap:var(--s4);min-width:0;}
.npe-k-head__text{min-width:0;}
.npe-k-head h1{margin:0;font-family:var(--fdisp);font-weight:800;font-size:var(--t-h1);letter-spacing:-.03em;line-height:1.05;color:var(--fg0);overflow-wrap:anywhere;}
.npe-k-head.is-record h1{font-size:var(--t-rec);}
.npe-k-head__sub{margin:var(--s1) 0 0;max-width:72ch;font-size:var(--t-body);color:var(--fg1);}
.npe-k-phone{white-space:nowrap;} /* ConsoleKit::esc_phones(): a phone number never breaks across lines */
.npe-k-head__pills{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s2) 0 0;}
.npe-k-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:var(--rrow);background:var(--arc1);color:var(--sig-text);font-family:var(--fmono);font-weight:600;font-size:var(--t-h2);text-transform:uppercase;}
.npe-k-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);}
.npe-k-more{position:relative;}
.npe-k-more>summary{list-style:none;}
.npe-k-more>summary::-webkit-details-marker{display:none;}
.npe-k-menu{position:absolute;right:0;top:calc(100% + var(--s1));z-index:30;display:flex;flex-direction:column;min-width:200px;padding:var(--s1);background:var(--bg0);border:1px solid var(--line2);border-radius:var(--rbtn);box-shadow:var(--sh-sm);}
.npe-console .npe-k-menu .npe-c-btn{justify-content:flex-start;border-color:transparent;background:none;}
.npe-console .npe-k-menu .npe-c-btn:hover{background:var(--bg1);}
/* A row menu that holds fields (a group's More, Reject a report, Void a waiver): wide enough to type in, each label above a full-width field,
   every button full width, and placed inside the window by npeKit (field panels, below): flipped left / up when it would leave the screen.
   Written to beat the per-area `.npe-k-rowactions form` rules that put a form's fields in one row. A bottom sheet on a phone. */
.npe-console .npe-k-menu.is-panel{position:fixed;z-index:100000;box-sizing:border-box;text-align:left;gap:var(--s3);width:380px;min-width:360px;max-width:calc(100vw - 16px);max-height:calc(100vh - 48px);overflow-y:auto;padding:var(--s4);box-shadow:var(--sh-lg);}
.npe-console .npe-k-menu.is-panel form{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);margin:0;}
.npe-console .npe-k-menu.is-panel > .npe-c-btn + form,.npe-console .npe-k-menu.is-panel > form + form{padding-top:var(--s3);border-top:1px solid var(--line);}
.npe-console .npe-k-menu.is-panel .npe-k-field{width:100%;}
.npe-console .npe-k-menu.is-panel .npe-k-field>label,.npe-console .npe-k-menu.is-panel label.npe-k-field>span{margin:0 0 6px;font-size:var(--t-sm);font-weight:600;color:var(--fg0);}
.npe-console .npe-k-menu.is-panel input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),.npe-console .npe-k-menu.is-panel select,.npe-console .npe-k-menu.is-panel textarea{width:100%;box-sizing:border-box;}
.npe-console .npe-k-menu.is-panel .npe-c-btn{width:100%;justify-content:center;border-color:var(--line);}
.npe-console .npe-k-menu.is-panel .npe-c-btn.danger{color:var(--crit);}
@media (max-width:720px){
  .npe-console .npe-k-menu.is-panel{left:0;right:0;top:auto;bottom:0;z-index:100003;width:auto;min-width:0;max-width:none;max-height:85vh;padding:var(--s5) var(--s4) var(--s6);border-width:1px 0 0;border-radius:var(--rrow) var(--rrow) 0 0;}
  .npe-console .npe-k-menu.is-panel .npe-c-btn{min-height:44px;}
}

.npe-k-sec{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:var(--s6) 0 var(--s2);}
.npe-k-sec:first-child{margin-top:0;}
.npe-k-stack>.npe-k-sec{margin:var(--s2) 0 calc(var(--s2) * -1);}
.npe-k-stack>.npe-k-sec:first-child{margin-top:0;}
.npe-k-sec__title{display:flex;align-items:center;gap:var(--s2);margin:0;font-family:var(--fsans);font-size:var(--t-title);font-weight:700;letter-spacing:0;color:var(--fg0);}
/* the count pill sits on the canvas, where the idle grey would vanish */
.npe-console .npe-k-sec__title .npe-c-pill{background:var(--bg0);box-shadow:inset 0 0 0 1px var(--line);}

/* ---------- 3 card + grid ---------- */
.npe-k-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg0);border:1px solid var(--line);border-radius:var(--rcard);box-shadow:var(--sh-sm);}
.npe-k-card__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
.npe-k-card__title{margin:0;font-family:var(--fsans);font-size:var(--t-title);font-weight:700;letter-spacing:0;color:var(--fg0);}
.npe-k-card__hd .npe-c-muted{font-size:var(--t-sm);}
.npe-k-card__bd{flex:1 1 auto;min-width:0;padding:var(--s4);}
.npe-k-card__bd.is-flush{padding:0;}
.npe-k-card__bd:has(>.npe-k-empty:only-child){display:flex;flex-direction:column;justify-content:center;}
.npe-k-card__ft{padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--bg1);}

.npe-k-grid{display:grid;gap:var(--s4);align-items:stretch;min-width:0;}
.npe-k-grid>*{min-width:0;}
.npe-k-grid>.is-start{align-self:start;}
.npe-k-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.npe-k-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.npe-k-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.npe-k-grid.cols-main{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
@media (max-width:1080px){
  .npe-k-grid.cols-3,.npe-k-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- 4 stats: tiles (analytical pages) and counters (operational pages) ---------- */
.npe-k-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s4);}
.npe-k-stat{min-width:0;padding:var(--s4);background:var(--bg0);border:1px solid var(--line);border-radius:var(--rcard);box-shadow:var(--sh-sm);}
.npe-k-stat__label{margin:0;font-family:var(--fmono);font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-k-stat__value{margin:var(--s2) 0 var(--s1);font-family:var(--fdisp);font-weight:800;font-size:var(--t-kpi);letter-spacing:-.03em;line-height:1;color:var(--fg0);font-variant-numeric:tabular-nums;}
.npe-k-stat__delta{margin:0;font-size:var(--t-sm);color:var(--fg2);}
.npe-k-stat__delta.is-up{color:var(--ok);}
.npe-k-stat__delta.is-down{color:var(--crit);}
.npe-k-counters{display:flex;flex-wrap:wrap;gap:var(--s2);}
.npe-k-counter{display:inline-flex;align-items:center;gap:6px;min-height:var(--h-ctl-sm);padding:0 var(--s3);background:var(--bg0);border:1px solid var(--line);border-radius:var(--rpill);font-size:var(--t-sm);color:var(--fg1);}
.npe-k-counter b{font-weight:700;color:var(--fg0);font-variant-numeric:tabular-nums;}
.npe-k-counter b.is-ok{color:var(--ok);}
.npe-k-counter b.is-warn{color:var(--warn);}
.npe-k-counter b.is-crit{color:var(--crit);}
a.npe-k-counter:hover{background:var(--bg1);border-color:var(--line2);}
.npe-k-counter[aria-pressed="true"]{background:var(--arc1);border-color:var(--arc1);color:var(--sig-text);}

/* ---------- 5 tabs + segmented control ---------- */
.npe-k-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;}
.npe-k-tabs::-webkit-scrollbar{display:none;}
.npe-k-tabs.is-strip{padding:0 var(--s2);background:var(--bg0);border:1px solid var(--line);border-radius:var(--rcard);box-shadow:var(--sh-sm);}
.npe-k-tab{display:inline-flex;align-items:center;gap:6px;flex:none;padding:10px var(--s3);border:0;border-bottom:2px solid transparent;background:none;font-family:inherit;font-size:var(--t-body);font-weight:600;color:var(--fg2);white-space:nowrap;cursor:pointer;scroll-snap-align:start;transition:.12s;}
.npe-k-tabs:not(.is-strip) .npe-k-tab{margin-bottom:-1px;}
.npe-k-tab:last-child{scroll-snap-align:end;}
.npe-k-tab:hover{color:var(--fg0);}
.npe-k-tab.is-active,.npe-k-tab[aria-current="page"],.npe-k-tab[aria-selected="true"]{color:var(--sig-text);border-bottom-color:var(--sig);}
.npe-k-tab .ct{padding:1px 7px;border-radius:var(--rpill);background:var(--bg2);color:var(--fg2);font-family:var(--fmono);font-size:var(--t-count);font-weight:500;}
.npe-k-tab.is-active .ct,.npe-k-tab[aria-current="page"] .ct,.npe-k-tab[aria-selected="true"] .ct{background:var(--arc1);color:var(--sig-text);}
/* 24px edge fade on the side that has more tabs (data-fade is set by console-kit.js). */
.npe-k-tabs[data-fade="end"]{-webkit-mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,black calc(100% - 24px),transparent);}
.npe-k-tabs[data-fade="start"]{-webkit-mask-image:linear-gradient(to left,black calc(100% - 24px),transparent);mask-image:linear-gradient(to left,black calc(100% - 24px),transparent);}
.npe-k-tabs[data-fade="both"]{-webkit-mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,black 24px,black calc(100% - 24px),transparent);}

.npe-k-seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg1);border:1px solid var(--line);border-radius:var(--rbtn);}
/* its segments are styled at the end of section 6: they must come AFTER the unclassed-button reset */

/* ---------- 6 buttons ---------- */
/* .npe-c-btn normalised; an unclassed <button> / submit inside the console is the default variant.
   So are the last WordPress-class buttons (.button on In-kind and its receipt) and the Dev Portal's
   Remove: no browser-default grey button anywhere. Their views move to .npe-c-btn in their waves. */
.npe-console .npe-c-btn,
.npe-console button:not([class]),
.npe-console input[type="submit"]:not([class]),
.npe-console input[type="button"]:not([class]),
.npe-console .npe-c-wrap button.button,.npe-console .npe-c-wrap a.button,.npe-console .npe-c-wrap .npe-dev-remove{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-ctl);padding:0 14px;
  border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg0);color:var(--fg0);
  font-family:inherit;font-size:var(--t-body);font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;transition:.12s;
}
.npe-console .npe-c-btn:hover,
.npe-console button:not([class]):hover,
.npe-console input[type="submit"]:not([class]):hover,
.npe-console input[type="button"]:not([class]):hover,
.npe-console .npe-c-wrap button.button:hover,.npe-console .npe-c-wrap a.button:hover,.npe-console .npe-c-wrap .npe-dev-remove:hover{background:var(--bg1);border-color:var(--line2);color:var(--fg0);}
.npe-console .npe-c-btn svg{flex:none;width:15px;height:15px;}
.npe-console .npe-c-btn.primary,.npe-console .npe-c-wrap .button.button-primary{background:var(--sig-fill);border-color:var(--sig-fill);color:var(--bg0);}
.npe-console .npe-c-btn.primary:hover,.npe-console .npe-c-wrap .button.button-primary:hover{background:var(--sig-fill-hover);border-color:var(--sig-fill-hover);color:var(--bg0);}
.npe-console .npe-c-btn.ghost{background:transparent;border-color:transparent;color:var(--sig-text);}
.npe-console .npe-c-btn.ghost:hover{background:var(--arc0);border-color:transparent;color:var(--sig-text);}
.npe-console .npe-c-btn.danger{color:var(--crit);}
.npe-console .npe-c-btn.danger:hover{background:var(--crit-bg);border-color:var(--crit);color:var(--crit);}
.npe-console .npe-c-btn.sm,.npe-console .npe-c-btn.small{min-height:var(--h-ctl-sm);padding:0 10px;font-size:var(--t-sm);}
.npe-console .npe-c-btn:disabled,.npe-console .npe-c-btn[aria-disabled="true"],
.npe-console button:not([class]):disabled,.npe-console input[type="submit"]:not([class]):disabled{opacity:.5;cursor:not-allowed;}
/* segmented control: its segments are links or plain <button aria-pressed>. These rules sit after the
   reset above on purpose (same specificity, later wins), or an unclassed segment would be a full button. */
.npe-console .npe-k-seg>a,.npe-console .npe-k-seg>button{display:inline-flex;align-items:center;min-height:0;padding:5px 10px;border:0;border-radius:6px;background:none;box-shadow:none;font-family:inherit;font-size:var(--t-sm);font-weight:600;line-height:1.3;color:var(--fg1);white-space:nowrap;cursor:pointer;}
.npe-console .npe-k-seg>a:hover,.npe-console .npe-k-seg>button:hover{background:none;color:var(--fg0);}
.npe-console .npe-k-seg>[aria-pressed="true"],.npe-console .npe-k-seg>.is-active,
.npe-console .npe-k-seg>[aria-pressed="true"]:hover,.npe-console .npe-k-seg>.is-active:hover{background:var(--bg0);color:var(--sig-text);box-shadow:var(--sh-sm);}
.npe-k-file{display:inline-flex;align-items:center;gap:var(--s3);min-width:0;cursor:pointer;}
.npe-console .npe-k-file input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.npe-k-file:focus-within .npe-c-btn{outline:2px solid var(--sig);outline-offset:2px;}
.npe-k-file__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-sm);color:var(--fg2);}

/* ---------- 7 filter bar (first row inside the list card) ---------- */
.npe-k-filter{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:0;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
.npe-k-search{display:flex;align-items:center;gap:var(--s2);flex:0 1 280px;min-width:0;min-height:var(--h-ctl);padding:0 var(--s3);background:var(--bg1);border:1px solid var(--line);border-radius:var(--rbtn);color:var(--fg2);}
.npe-k-search svg{flex:none;width:15px;height:15px;}
.npe-console .npe-k-search input:not([type="hidden"]):not([hidden]){flex:1;width:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;font-family:inherit;font-size:var(--t-body);color:var(--fg0);}
.npe-k-search:focus-within{border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-k-filter__toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.npe-console .npe-k-filter__open,.npe-console .npe-k-filter__done,.npe-k-filter__scrim{display:none;}
.npe-k-filter__filters{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);}
.npe-k-filter__field{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);font-weight:600;color:var(--fg1);}
.npe-k-chip{display:inline-flex;align-items:center;gap:6px;padding:var(--s1) 10px;border-radius:var(--rpill);background:var(--arc1);color:var(--sig-text);font-size:var(--t-sm);font-weight:600;white-space:nowrap;}
.npe-k-chip a{font-weight:700;line-height:1;}
.npe-k-filter__spacer{flex:1 1 auto;}
.npe-k-filter__count{font-size:var(--t-sm);color:var(--fg2);white-space:nowrap;}
.npe-k-filter>.npe-k-seg{margin-left:auto;}
.npe-console .npe-k-filter__clear{font-size:var(--t-sm);font-weight:600;color:var(--sig-text);}

/* ---------- 8 table + pager ---------- */
.npe-k-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.npe-k-table{width:100%;border-collapse:separate;border-spacing:0;}
.npe-k-table th{position:sticky;top:0;z-index:1;padding:10px var(--s4);border-bottom:1px solid var(--line);background:var(--bg1);font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;white-space:nowrap;color:var(--fg2);}
.npe-k-table td{height:48px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:var(--t-body);color:var(--fg1);vertical-align:middle;}
.npe-k-table tbody tr:last-child td{border-bottom:0;}
.npe-k-table td:first-child,.npe-k-table td.sel + td{font-weight:600;color:var(--fg0);}
.npe-k-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.npe-k-table .sel{width:40px;text-align:center;}
/* The bulk-select boxes are the kit checkbox (18px, signal accent), bare or in a .npe-k-check label; a row's label is its 44px hit area on a phone. */
.npe-console .npe-k-table .sel input[type="checkbox"]{width:18px;height:18px;min-height:0;margin:0;vertical-align:middle;accent-color:var(--sig);}
.npe-k-table .sel .npe-k-check{justify-content:center;min-height:0;}
.npe-k-table .act{width:1%;text-align:right;white-space:nowrap;}
.npe-k-rowactions{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;}
/* Oct-B soft deletes: a Restore button is a one-button POST form; a deleted row reads muted. */
.npe-k-inline{display:inline;margin:0;padding:0;}
.npe-k-table tr.is-deleted td,.npe-console .is-deleted:not(tr){color:var(--fg2);}
.npe-k-table tr.is-link{cursor:pointer;}
.npe-k-table tr.is-link:hover td{background:var(--arc0);}
.npe-k-table th[aria-sort="ascending"]::after{content:" \2191";}
.npe-k-table th[aria-sort="descending"]::after{content:" \2193";}
.npe-k-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--fg2);}
.npe-k-pager__nav{display:flex;gap:var(--s2);}

/* ---------- 9 form ---------- */
.npe-k-form{margin:0;}
.npe-k-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}
.npe-k-fields.cols-1{grid-template-columns:minmax(0,1fr);}
.npe-k-fields.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.npe-k-field{display:flex;flex-direction:column;min-width:0;}
.npe-k-field.span-2{grid-column:span 2;}
.npe-k-field.span-all{grid-column:1 / -1;}
.npe-k-field>label,.npe-k-field__label{margin:0 0 6px;font-size:var(--t-sm);font-weight:600;color:var(--fg0);}
.npe-k-field__opt{font-weight:400;color:var(--fg2);}
.npe-console .npe-k-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.npe-console .npe-k-field select:not([hidden]),
.npe-console .npe-k-field textarea:not([hidden]),
.npe-console .npe-k-filter__field select:not([hidden]),
.npe-console .npe-k-filter__field input:not([type="hidden"]):not([hidden]){
  width:100%;min-height:var(--h-ctl);padding:0 var(--s3);box-sizing:border-box;
  border:1px solid var(--line);border-radius:var(--rbtn);background-color:var(--bg0);color:var(--fg0);
  font-family:inherit;font-size:var(--t-body);line-height:1.4;
}
.npe-console .npe-k-filter__field select:not([hidden]),.npe-console .npe-k-filter__field input:not([type="hidden"]):not([hidden]){width:auto;}
.npe-console .npe-k-field textarea:not([hidden]){min-height:96px;padding:var(--s2) var(--s3);resize:vertical;}
/* One select chevron for the console and its full-screen modes. */
.npe-console .npe-k-field select:not([hidden]),
.npe-console .npe-k-filter__field select:not([hidden]),
.npe-console.is-mode select,
.npe-console.is-mode .npe-m-main .npe-m-field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:var(--s7);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23727880' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s3) center;background-size:12px;
}
.npe-console .npe-k-field input:focus,.npe-console .npe-k-field select:focus,.npe-console .npe-k-field textarea:focus,
.npe-console .npe-k-filter__field select:focus,.npe-console .npe-k-filter__field input:focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-k-field__hint{margin:var(--s1) 0 0;font-size:var(--t-meta);color:var(--fg2);}
.npe-k-field__error{margin:var(--s1) 0 0;font-size:var(--t-meta);color:var(--crit);}
.npe-console .npe-k-field.has-error input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.npe-console .npe-k-field.has-error select:not([hidden]),
.npe-console .npe-k-field.has-error textarea:not([hidden]){border-color:var(--crit);}
.npe-k-check{display:flex;align-items:center;gap:var(--s2);min-height:44px;font-size:var(--t-body);color:var(--fg0);cursor:pointer;}
/* the second and third selectors outrank console-redesign.css's `input[type=checkbox]{width:auto}`, which otherwise leaves the browser's 13px box */
.npe-console .npe-k-check input,.npe-console .npe-k-check input[type="checkbox"]:not([hidden]),.npe-console .npe-k-check input[type="radio"]:not([hidden]){flex:none;width:18px;height:18px;min-height:0;margin:0;accent-color:var(--sig);}
.npe-k-choice{display:flex;flex-wrap:wrap;gap:var(--s2);}
.npe-k-choice label{position:relative;display:inline-flex;align-items:center;min-height:var(--h-ctl);padding:0 14px;border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg0);font-size:var(--t-body);font-weight:600;color:var(--fg1);cursor:pointer;}
.npe-console .npe-k-choice input{position:absolute;width:1px;height:1px;min-height:0;opacity:0;pointer-events:none;}
.npe-k-choice label:has(input:checked){background:var(--arc1);border-color:var(--sig);color:var(--sig-text);}
.npe-k-choice label:has(input:focus-visible){outline:2px solid var(--sig);outline-offset:2px;}
.npe-k-form__actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0;}
.npe-k-form__status{margin-right:auto;font-size:var(--t-sm);color:var(--fg2);}
.npe-k-form__actions.is-sticky{position:sticky;bottom:0;z-index:5;margin:var(--s4) calc(var(--s4) * -1) calc(var(--s4) * -1);padding:var(--s3) var(--s4);background:var(--bg0);border-top:1px solid var(--line);}

/* ---------- 10 empty state ---------- */
.npe-k-empty{display:flex;flex-direction:column;align-items:center;padding:48px var(--s6);text-align:center;}
.npe-k-empty__icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 var(--s3);border:1px solid var(--line);border-radius:var(--rrow);background:var(--bg1);color:var(--fg2);}
.npe-k-empty__icon svg{width:22px;height:22px;}
.npe-k-empty__title{margin:0;font-family:var(--fsans);font-size:var(--t-title);font-weight:700;letter-spacing:0;color:var(--fg0);}
.npe-k-empty__text{margin:var(--s1) 0 0;max-width:52ch;font-size:var(--t-sm);color:var(--fg2);}
.npe-k-empty__actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 0;}
.npe-k-empty.is-inline{padding:var(--s6) var(--s4);}
.npe-k-empty.is-inline .npe-k-empty__text{margin:0;}
.npe-k-empty.is-inline .npe-k-empty__actions{margin-top:var(--s2);}

/* ---------- 11 pills + notice ---------- */
.npe-console .npe-c-pill{padding:3px 9px;border-radius:var(--rpill);font-size:var(--t-meta);font-weight:600;}
.npe-console .npe-c-pill.is-crit{background:var(--crit-bg);color:var(--crit);}
.npe-console .npe-c-pill.is-outline{background:transparent;color:var(--sig-text);box-shadow:inset 0 0 0 1px var(--sig);}
.npe-k-note{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4);padding:var(--s3) var(--s4);background:var(--bg0);border:1px solid var(--line);border-left:3px solid var(--sig);border-radius:var(--rbtn);font-size:var(--t-body);color:var(--fg0);}
.npe-k-note.is-warn{border-left-color:var(--warn);}
.npe-k-note.is-crit{border-left-color:var(--crit);}
.npe-k-note__text{flex:1;min-width:0;margin:0;}
.npe-k-note__action{flex:none;}

/* ---------- 12 shell fixes (every page inherits these) ---------- */
/* page rhythm: 24px 32px 64px; the area header sits 20px above the page header */
.npe-c-wrap{padding:var(--s6) var(--s7) 64px;}
.npe-console.is-one .npe-c-area-in{max-width:1240px;margin:0 auto;padding:var(--s5) var(--s7) 0;}
.npe-console.is-one .npe-c-area .npe-c-eyebrow{margin:0 0 6px;}
.npe-console.is-one .npe-c-area + .npe-c-wrap{padding-top:var(--s5);}
/* exactly one eyebrow: the area header owns it. Only the eyebrow in a view's own .npe-c-head is
   hidden: the legacy donor record reuses the class for its stat labels, which must stay. */
.npe-console.is-one .npe-c-area ~ .npe-c-wrap .npe-c-head .npe-c-eyebrow{display:none;}
/* the content column may be narrower than its content: on the front-end mount .npe-c-main is not a
   scroll pane, so a nowrap tab strip or a wide table would otherwise widen the whole page. The
   sidebar too: with console_redesign off the front mount turns it into a nowrap top rail at <=900px
   (console.css), which scrolls inside itself instead of widening the page. */
.npe-console>.npe-c-sidebar,.npe-console>.npe-c-topbar,.npe-console>.npe-c-main,.npe-console>.npe-c-footer{min-width:0;}
/* command palette on the wp-admin mount: the console is a fixed layer under the WordPress admin
   bar, so its scrim can never cover the bar. Start the scrim (and the dialog's 14vh) below it. */
body.npe-mq-console .npe-c-palette-wrap{top:var(--wp-admin--admin-bar--height,32px);}
/* The front-end mount shows the same bar to signed-in staff (the variable is unset without it). */
.npe-console[data-context="front"] .npe-c-palette-wrap{top:var(--wp-admin--admin-bar--height,0px);}
/* topbar: the current page title beside the burger once the sidebar is a drawer */
.npe-c-pagetitle{display:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--fdisp);font-weight:800;font-size:var(--t-title);letter-spacing:-.02em;color:var(--fg0);}
/* row actions: a table cell stays a table cell (display:flex on a td broke the row line) */
.npe-console td.npe-c-rowactions{display:table-cell;width:1%;text-align:right;vertical-align:middle;white-space:nowrap;}
.npe-console td.npe-c-rowactions>*{display:inline-flex;vertical-align:middle;margin:0 0 0 6px;}
.npe-console td.npe-c-rowactions>*:first-child{margin-left:0;}
/* legacy shim: Funds — its Edit form is a <details> inside the actions cell. It opens under its
   button, wraps, and the cell takes the room the form needs. Remove when UX-GIVING-b rebuilds Funds. */
.npe-console td.npe-c-rowactions>details{display:block;margin:0;white-space:normal;}
.npe-console td.npe-c-rowactions:has(>details[open]){width:60%;}
/* panel headers: title left, action right, one row */
.npe-console .npe-c-panel .p-head,.npe-console .npe-c-panelhd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);}
/* inline text buttons keep their link look under the button reset above */
.npe-console .npe-c-notes .note-acts button,.npe-console .npe-c-tasks .task-acts button{display:inline;min-height:0;padding:0;border:0;border-radius:0;background:none;font-size:var(--t-sm);font-weight:400;color:var(--sig-text);}
.npe-console .npe-c-notes .note-acts button:hover,.npe-console .npe-c-tasks .task-acts button:hover{background:none;text-decoration:underline;}
/* a menu row is not a button: the profile "…" menu mixes links and unclassed buttons, and the reset's
   min-height made its rows unequal */
.npe-console [role="menu"] button:not([class]){min-height:0;}

/* ---------- 13 legacy aliases: .npe-c-panel and .npe-c-card are the kit card until their views migrate ---------- */
.npe-console .npe-c-card{padding:var(--s4);}
.npe-console .npe-c-panel .p-head h2,.npe-console .npe-c-panel .p-head h3,.npe-console .npe-c-panelhd h2,.npe-console .npe-c-card>h3{font-family:var(--fsans)!important;font-size:var(--t-title)!important;font-weight:700!important;letter-spacing:0!important;}
/* never a bordered box inside a card */
.npe-console .npe-c-panel .npe-c-table,.npe-console .npe-c-card .npe-c-table,.npe-console .npe-k-card .npe-c-table{border:0;border-radius:0;box-shadow:none;}
.npe-console .npe-c-panel .npe-c-empty,.npe-console .npe-c-card .npe-c-empty,.npe-console .npe-k-card .npe-c-empty{margin-top:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
/* raw legacy forms dropped straight into a panel (Board & funders, Mobile distribution) */
.npe-console .npe-c-panel>div[style]:not([class]){padding-left:var(--s4)!important;padding-right:var(--s4)!important;}
.npe-console .npe-c-panel>div[style]:not([class]):last-child{padding-bottom:var(--s4)!important;}
.npe-console .npe-c-panel>p:not([class]){margin:var(--s3) var(--s4);}
.npe-console .npe-c-panel>div[style]:not([class])>label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:var(--t-sm);font-weight:600;color:var(--fg0);}
.npe-console .npe-c-panel>div[style]:not([class])>label>br{display:none;}
.npe-console .npe-c-panel>div[style]:not([class])>label>input:not([type="checkbox"]):not([type="radio"]),
.npe-console .npe-c-panel>div[style]:not([class])>label>select,
.npe-console .npe-c-panel>div[style]:not([class])>label>textarea{width:100%;}
/* legacy grids never let a wide child push the page sideways */
.npe-console .npe-c-wrap :is(.npe-c-grid2col,.npe-c-lower,.npe-c-rec3,.npe-c-set2,.npe-c-cards,.npe-c-oppgrid,.npe-c-roster)>*{min-width:0;}

/* ---------- 14 phone (<=720px) and touch ---------- */
@media (max-width:900px){
  .npe-c-pagetitle{display:block;}
}
@media (max-width:720px){
  .npe-c-wrap{padding:var(--s4) var(--s4) 48px;}
  .npe-console.is-one .npe-c-area-in{padding:var(--s4) var(--s4) 0;}
  .npe-console.is-one .npe-c-area + .npe-c-wrap{padding-top:var(--s4);}
  .npe-c-topbar{padding:0 var(--s4);}
  .npe-console .npe-c-wrap{overflow-wrap:anywhere;}
  .npe-console .npe-c-wrap :is(input,select,textarea,img,svg,video,canvas,iframe){max-width:100%;}

  /* header actions: full-width primary */
  .npe-k-actions{width:100%;}
  .npe-console .npe-k-actions>.npe-c-btn.primary{flex:1 1 100%;order:-1;}
  .npe-k-menu{left:0;right:auto;}
  .npe-k-actions>.npe-k-more .npe-k-menu{left:auto;right:0;} /* the header's "…" is the group's right end */

  /* one column */
  .npe-k-grid.cols-2,.npe-k-grid.cols-3,.npe-k-grid.cols-4,.npe-k-grid.cols-main{grid-template-columns:minmax(0,1fr);}
  .npe-k-fields,.npe-k-fields.cols-3{grid-template-columns:minmax(0,1fr);}
  .npe-k-field.span-2{grid-column:auto;}
  .npe-console .npe-c-wrap [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;}

  /* filter bar: search full width; the filters open as a bottom sheet */
  .npe-k-search{flex:1 1 100%;}
  .npe-console .npe-k-filter__open{display:inline-flex;}
  .npe-k-filter__filters{display:none;}
  .npe-k-filter__toggle:checked ~ .npe-k-filter__filters{display:flex;flex-direction:column;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:100003;max-height:80vh;overflow-y:auto;padding:var(--s5) var(--s4) var(--s6);background:var(--bg0);border-top:1px solid var(--line);border-radius:var(--rrow) var(--rrow) 0 0;box-shadow:var(--sh-lg);}
  .npe-k-filter__toggle:checked ~ .npe-k-filter__scrim{display:block;position:fixed;inset:0;z-index:100002;background:var(--scrim);}
  .npe-k-filter__toggle:checked ~ .npe-k-filter__filters .npe-k-filter__field{display:flex;flex-direction:column;align-items:stretch;}
  .npe-console .npe-k-filter__toggle:checked ~ .npe-k-filter__filters .npe-k-filter__field select:not([hidden]),
  .npe-console .npe-k-filter__toggle:checked ~ .npe-k-filter__filters .npe-k-filter__field input:not([type="hidden"]):not([hidden]){width:100%;}
  .npe-console .npe-k-filter__toggle:checked ~ .npe-k-filter__filters .npe-k-filter__done{display:inline-flex;}
}
/* tables stack: each row is a block, each cell a label/value pair (data-label comes
   from the view, or from console-kit.js for legacy tables); no sideways scrolling.
   Screen only: a printed page can be under 720px wide (A4, or Letter with 0.5in margins),
   and a printed report (Compliance) must keep its tables. */
@media screen and (max-width:720px){
  .npe-console .npe-k-table,.npe-console .npe-c-table,
  .npe-console .npe-k-table tbody,.npe-console .npe-c-table tbody{display:block;width:100%;min-width:0;}
  /* a per-screen min-width (the People hub's 760px) must not keep a stacked table wide */
  .npe-console .npe-c-main table.npe-c-table,.npe-console .npe-c-main table.npe-k-table{min-width:0;}
  .npe-console .npe-k-table thead,.npe-console .npe-c-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .npe-console .npe-k-table tr,.npe-console .npe-c-table tr{display:block;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
  .npe-console .npe-k-table tbody tr:last-child,.npe-console .npe-c-table tbody tr:last-child{border-bottom:0;}
  .npe-console .npe-k-table td,.npe-console .npe-c-table tbody td{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);width:auto;height:auto;min-width:0;padding:var(--s1) 0;border:0;text-align:right;white-space:normal;}
  .npe-console .npe-k-table td::before,.npe-console .npe-c-table tbody td::before{content:attr(data-label);flex:0 0 40%;padding-top:2px;font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--fg2);}
  /* the row's title: its first cell, or the cell after a checkbox cell */
  .npe-console .npe-k-table td:first-child,.npe-console .npe-c-table tbody td:first-child,
  .npe-console .npe-k-table td.sel + td,.npe-console .npe-c-table tbody td.npe-c-cbcol + td,.npe-console .npe-c-table tbody td.npe-c-hub-sel + td{display:block;text-align:left;font-size:var(--t-title);font-weight:600;color:var(--fg0);}
  .npe-console .npe-k-table td.sel,.npe-console .npe-c-table tbody td.npe-c-cbcol,.npe-console .npe-c-table tbody td.npe-c-hub-sel{float:right;width:auto;padding:0 0 0 var(--s3);font-size:var(--t-body);}
  .npe-console .npe-k-table td.sel .npe-k-check{min-width:44px;min-height:44px;justify-content:flex-end;}
  .npe-console .npe-k-table td.sel + td::before,.npe-console .npe-c-table tbody td.npe-c-cbcol + td::before,.npe-console .npe-c-table tbody td.npe-c-hub-sel + td::before,
  .npe-console .npe-k-table td:first-child::before,.npe-console .npe-c-table tbody td:first-child::before,
  .npe-console .npe-k-table td.act::before,.npe-console .npe-c-table tbody td.npe-c-rowactions::before,
  .npe-console .npe-k-table td[colspan]::before,.npe-console .npe-c-table tbody td[colspan]::before{content:none;}
  .npe-console .npe-k-table td.act,.npe-console .npe-c-table tbody td.npe-c-rowactions{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:var(--s2);width:auto;padding-top:var(--s2);text-align:left;white-space:normal;}
  .npe-console .npe-c-table tbody td.npe-c-rowactions>*{margin:0;}
  .npe-console .npe-c-table tbody td.npe-c-rowactions>details{width:100%;min-width:0;}
  .npe-console .npe-k-table td[colspan],.npe-console .npe-c-table tbody td[colspan]{display:block;text-align:left;}
  .npe-console .npe-k-table td:empty,.npe-console .npe-c-table tbody td:empty{display:none;}
  /* a control in a stacked cell shrinks to the cell instead of being clipped */
  .npe-console .npe-k-table td>*,.npe-console .npe-c-table tbody td>*{min-width:0;}
  .npe-k-rowactions{flex-wrap:wrap;justify-content:flex-start;}
  .npe-console .npe-c-cell-user{min-width:0;}
}
@media (max-width:720px),(pointer:coarse){
  .npe-k-tab,.npe-console .npe-c-navitem{min-height:44px;}
  /* targets the button rule does not reach: drawer close, People peek close, the hub's "more" */
  .npe-console .npe-c-drawer .dx,.npe-console .npe-c-peek-x{width:44px;height:44px;}
  .npe-console .npe-c-hub-more{min-height:44px;}
  /* a picker's "Add a new person / organization" text button is a touch target too */
  .npe-console .npe-k-picker__add{min-height:44px;}
  /* a text link that is a table cell's own child, or sits in the actions cell, is a row action */
  .npe-console .npe-c-table td>.link,.npe-console .npe-k-table td>.link,.npe-console td.npe-c-rowactions .link{display:inline-flex;align-items:center;min-height:44px;}
  .npe-console .npe-c-view{display:inline-flex;align-items:center;min-height:44px;}
  .npe-console .npe-k-seg>a,.npe-console .npe-k-seg>button{min-height:40px;padding:0 var(--s3);}
  .npe-console input[type="checkbox"],.npe-console input[type="radio"]{width:18px;height:18px;}
  .npe-console .npe-k-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .npe-console .npe-k-field select:not([hidden]),
  .npe-console .npe-k-field textarea:not([hidden]),
  .npe-console .npe-k-search input:not([type="hidden"]):not([hidden]){font-size:var(--t-touch);}
}
@media print{
  .npe-k-actions,.npe-k-filter,.npe-k-pager{display:none;}
}

/* ==========================================================================
   Composites (UX-KIT-b)
   ========================================================================== */

/* ---------- 15 drawer (create / edit / peek) + dialog + toast ---------- */
/* The drawer skeleton is console.css's and stays: .npe-c-drawer-wrap[hidden] >
   .npe-c-drawer-backdrop[data-drawer-close] + aside.npe-c-drawer > ( form > ) .dh / .db / .dfoot,
   opened by [data-drawer-open="id"] or npeKit.openDrawer(). These rules bring every drawer to
   §4.19: 520px (peek 400px), head 16px 20px, a scrolling body, the footer's actions on the right. */
.npe-console .npe-c-drawer-backdrop{background:var(--scrim);}
.npe-console .npe-c-drawer.is-peek{width:400px;}
.npe-console .npe-c-drawer>form{margin:0;}
.npe-console .npe-c-drawer .dh{padding:var(--s4) var(--s5);}
.npe-console .npe-c-drawer .dh>div{flex:1;min-width:0;}
.npe-console .npe-c-drawer .dh h2{font-size:var(--t-h2);overflow-wrap:anywhere;}
.npe-console .npe-c-drawer .dh p{margin:2px 0 0;font-size:var(--t-sm);overflow-wrap:anywhere;} /* wraps: a subtitle often says where the rest is entered */
.npe-console .npe-c-drawer .dx{padding:0;background:var(--bg0);cursor:pointer;}
.npe-console .npe-c-drawer .db{flex:1;min-height:0;overflow-y:auto;padding:var(--s4) var(--s5);}
.npe-console .npe-c-drawer .db>.fsec:first-child{padding-top:0;}
.npe-console .npe-c-drawer .dfoot{justify-content:flex-end;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s5);}
.npe-k-form__status.is-crit{color:var(--crit);}
/* legacy forms opened in the kit drawer (console.js builds them as label-wrapped controls).
   Delete with the last one: each area wave replaces its own with a server-rendered drawer. */
.npe-console .npe-c-drawer .npe-swal-form label{font-size:var(--t-sm);}
.npe-console .npe-c-drawer .npe-swal-form :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%;min-height:var(--h-ctl);box-sizing:border-box;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);background-color:var(--bg0);color:var(--fg0);font-family:inherit;font-size:var(--t-body);font-weight:400;}
.npe-console .npe-c-drawer .npe-swal-form textarea{min-height:96px;padding:var(--s2) var(--s3);}
.npe-console .npe-c-drawer .npe-swal-form :is(input,select,textarea):focus{outline:none;border-color:var(--sig);box-shadow:0 0 0 3px var(--sig-glow);}
.npe-console .npe-c-drawer .npe-swal-form fieldset{margin:0;padding:0;border:0;}
.npe-console .npe-c-drawer .npe-swal-form legend{padding:0;font-size:var(--t-sm);font-weight:600;color:var(--fg0);}

/* the one confirm dialog (npeKit.confirm): above drawers and the palette */
.npe-k-scrim{position:fixed;inset:0;z-index:100010;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:var(--scrim);}
.npe-k-dialog{width:420px;max-width:100%;max-height:100%;overflow-y:auto;box-sizing:border-box;padding:var(--s5);border-radius:var(--rcard);background:var(--bg0);box-shadow:var(--sh-lg);}
.npe-k-dialog__title{margin:0;font-family:var(--fdisp);font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--fg0);overflow-wrap:anywhere;}
.npe-k-dialog__text{margin:var(--s2) 0 0;font-size:var(--t-body);line-height:1.5;color:var(--fg1);overflow-wrap:anywhere;}
.npe-k-dialog__actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0;}
.npe-console .npe-k-dialog.is-danger .npe-c-btn.danger{border-color:var(--crit);}

/* toasts (npeKit.toast): success, an error, or a done-with-Undo */
.npe-k-toasts{position:fixed;left:50%;bottom:var(--s6);z-index:100020;display:flex;flex-direction:column;align-items:center;gap:var(--s2);width:max-content;max-width:calc(100vw - var(--s7));transform:translateX(-50%);pointer-events:none;}
.npe-k-toast{display:flex;align-items:center;gap:var(--s3);max-width:100%;min-height:44px;box-sizing:border-box;padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:var(--rbtn);background:var(--fg0);color:var(--bg0);box-shadow:var(--sh-lg);font-size:var(--t-body);pointer-events:auto;}
.npe-k-toast.is-crit{background:var(--crit);}
.npe-k-toast__text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;}
.npe-k-toast__undo{flex:none;min-height:32px;padding:0 var(--s2);border:0;border-radius:6px;background:none;color:var(--arc1);font-family:inherit;font-size:var(--t-body);font-weight:700;cursor:pointer;}
.npe-k-toast__undo:hover{text-decoration:underline;}
.npe-k-toast__x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:none;color:inherit;opacity:.7;cursor:pointer;}
.npe-k-toast__x:hover{opacity:1;}
.npe-k-toast__x svg{width:14px;height:14px;}

/* ---------- 16 bulk bar (appears above the table when rows are ticked) ---------- */
.npe-k-bulk{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin:0;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--arc0);font-size:var(--t-sm);color:var(--fg0);}
.npe-k-bulk__count{margin-right:var(--s2);font-weight:700;}
.npe-k-bulk__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);}
.npe-k-bulk__spacer{flex:1;}
.npe-k-table tr.is-peek td,.npe-k-table tr.is-peek:hover td{background:var(--arc1);}
.npe-k-table tr.is-link:focus{outline:2px solid var(--sig);outline-offset:-2px;}

/* ---------- 17 board (kanban): fixed columns, compact cards, no buttons on cards ---------- */
.npe-k-board{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s4);overflow-x:auto;-webkit-overflow-scrolling:touch;}
.npe-k-board__switch{display:none;margin:var(--s4) var(--s4) 0;}
.npe-k-board__pick .ct{margin-left:6px;font-family:var(--fmono);font-size:var(--t-count);font-weight:500;color:var(--fg2);}
.npe-k-board__col{display:flex;flex-direction:column;flex:0 0 240px;min-width:0;box-sizing:border-box;padding:var(--s3);border:1px solid var(--line);border-radius:var(--rcard);background:var(--bg1);}
.npe-k-board__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:0 0 var(--s2);font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg1);}
.npe-k-board__cards{display:flex;flex-direction:column;gap:6px;min-width:0;}
.npe-k-board__card{display:block;min-width:0;padding:var(--s2) var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg0);color:inherit;text-decoration:none;}
a.npe-k-board__card:hover,a.npe-k-board__card:focus{border-color:var(--sig);outline:none;}
.npe-k-board__name{display:block;overflow:hidden;font-size:var(--t-sm);font-weight:600;color:var(--fg0);text-overflow:ellipsis;white-space:nowrap;}
.npe-k-board__meta{display:block;overflow:hidden;font-size:var(--t-meta);color:var(--fg2);text-overflow:ellipsis;white-space:nowrap;}
.npe-k-board__card .npe-c-pill{margin-top:var(--s1);}
.npe-k-board__rest>summary{list-style:none;}
.npe-k-board__rest>summary::-webkit-details-marker{display:none;}
.npe-k-board__more{display:block;margin-top:6px;padding:6px;border:1px dashed var(--line2);border-radius:var(--rbtn);font-size:var(--t-sm);color:var(--fg1);text-align:center;cursor:pointer;}
.npe-k-board__more:hover{border-color:var(--sig);color:var(--sig-text);}
.npe-k-board__rest[open]>summary{display:none;}
.npe-k-board__rest>.npe-k-board__cards{margin-top:6px;}
.npe-k-board__col .npe-k-empty.is-inline{padding:var(--s3) 0;}

/* ---------- 18 chart: a fixed-height plot that is never stretched ---------- */
/* Analytics::svg_bars() / svg_area() draw in pixels for the height and in percent for the width,
   so the plot keeps its height at any card width and text is never scaled. */
.npe-k-chart{min-width:0;}
.npe-k-chart__svg{display:block;width:100%;overflow:visible;}
.npe-k-chart__x,.npe-k-chart__y,.npe-k-chart__val{font-family:var(--fmono);font-size:var(--t-cap);fill:var(--fg2);}
.npe-k-chart__val{font-weight:600;fill:var(--fg0);opacity:0;}
.npe-k-chart__slot:hover .npe-k-chart__val{opacity:1;}
.npe-k-chart__grid{stroke:var(--line);}
.npe-k-chart__legend{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0 0;padding:0;list-style:none;font-size:var(--t-sm);color:var(--fg1);}
.npe-k-chart__legend li{display:inline-flex;align-items:center;gap:6px;}
.npe-k-chart__key{flex:none;width:10px;height:10px;border-radius:3px;background:var(--npe-chart-1);}
.npe-k-chart__key.is-2{background:var(--npe-chart-2);}
.npe-k-chart__key.is-3{background:var(--npe-chart-3);}
.npe-k-chart__key.is-4{background:var(--npe-chart-4);}
.npe-k-chart__key.is-5{background:var(--npe-chart-5);}
.npe-k-chart__key.is-ok{background:var(--ok);}
.npe-k-chart__key.is-warn{background:var(--warn);}
.npe-k-chart__key.is-crit{background:var(--crit);}

/* ---------- 19 calendar: one card, a weekday row, seven equal columns ---------- */
.npe-k-cal__bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
.npe-k-cal__title{margin:0 var(--s2);font-family:var(--fsans);font-size:var(--t-title);font-weight:700;letter-spacing:0;color:var(--fg0);}
.npe-k-cal__spacer{flex:1;}
/* bar=split: Previous left, the month centred, Next right (the public volunteer calendar) */
.npe-k-cal__bar.is-split{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);}
.npe-k-cal__bar.is-split .npe-k-cal__title{margin:0;text-align:center;}
.npe-k-cal__bar.is-split .npe-k-cal__prev{justify-self:start;}
.npe-k-cal__bar.is-split .npe-k-cal__next{justify-self:end;}
.npe-k-cal__bar .npe-c-btn.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}
.npe-k-cal__note{margin:0;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--arc0);font-size:var(--t-sm);font-weight:600;color:var(--sig-text);text-align:center;}
.npe-k-cal__dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--bg1);}
.npe-k-cal__dow span{padding:var(--s2) var(--s3);font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-k-cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(128px,1fr);}
.npe-k-cal.is-week .npe-k-cal__grid{grid-auto-rows:minmax(420px,1fr);}
/* cells are not cards: 1px lines, no radius, no shadow */
.npe-k-cal__cell{display:flex;flex-direction:column;gap:var(--s1);min-width:0;padding:var(--s2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.npe-k-cal__cell:nth-child(7n){border-right:0;}
.npe-k-cal__cell.is-out{background:var(--bg1);}
.npe-k-cal__num{align-self:flex-end;min-width:22px;height:22px;border-radius:var(--rpill);font-size:var(--t-sm);line-height:22px;text-align:center;color:var(--fg1);}
.npe-k-cal__cell.is-out .npe-k-cal__num{color:var(--fg2);}
.npe-k-cal__cell.is-today .npe-k-cal__num{background:var(--sig-fill);font-weight:700;color:var(--bg0);}
.npe-k-cal__chip{display:block;min-width:0;box-sizing:border-box;padding:var(--s1) var(--s2);border:0;border-left:3px solid var(--sig);border-radius:6px;background:var(--arc0);color:var(--fg0);font-family:inherit;text-align:left;text-decoration:none;}
a.npe-k-cal__chip:hover,a.npe-k-cal__chip:focus{background:var(--arc1);outline:none;}
.npe-k-cal__chip.is-ok{border-left-color:var(--ok);}
.npe-k-cal__chip.is-warn{border-left-color:var(--warn);}
.npe-k-cal__chip.is-idle{border-left-color:var(--line2);background:var(--bg1);color:var(--fg1);}
.npe-k-cal__count{flex:none;margin-left:auto;font-family:var(--fmono);font-size:var(--t-count);color:var(--fg1);white-space:nowrap;}
/* A company day off: a shaded cell with a "Closed" pill (and on the agenda's day heading). */
.npe-k-cal__cell.is-closed{background:var(--bg2);}
.npe-k-cal__closed{align-self:flex-start;}
.npe-k-cal__why{font-family:var(--fsans);font-weight:400;letter-spacing:0;text-transform:none;color:var(--fg2);}
.npe-k-cal__line{display:flex;align-items:baseline;gap:6px;min-width:0;}
.npe-k-cal__time{flex:none;font-family:var(--fmono);font-size:var(--t-count);color:var(--fg2);}
.npe-k-cal__name{min-width:0;overflow:hidden;font-size:var(--t-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap;}
.npe-k-cal__sub{display:block;overflow:hidden;font-size:var(--t-meta);color:var(--fg2);text-overflow:ellipsis;white-space:nowrap;}
.npe-k-cal__more{font-size:var(--t-meta);font-weight:600;color:var(--sig-text);text-decoration:none;}
.npe-k-cal__more:hover{text-decoration:underline;}
/* the fill meter: seats taken of seats offered (calendar chips, shift lists) */
.npe-k-fill{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--t-meta);color:var(--fg2);}
.npe-k-fill__bar{flex:1;min-width:24px;height:5px;overflow:hidden;border-radius:var(--rpill);background:var(--bg2);}
.npe-k-fill__bar i{display:block;height:100%;border-radius:var(--rpill);background:var(--sig);}
.npe-k-fill.is-ok .npe-k-fill__bar i{background:var(--ok);}
.npe-k-fill.is-warn .npe-k-fill__bar i{background:var(--warn);}
/* the agenda: List mode, and every mode on a phone */
.npe-k-cal__agenda{display:none;}
.npe-k-cal.is-list .npe-k-cal__agenda{display:block;}
.npe-k-cal__day{position:sticky;top:0;z-index:1;margin:0;padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--bg1);font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);}
.npe-k-cal__day.is-today{color:var(--sig-text);}
.npe-k-cal__events,.npe-console .npe-k-cal__events{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);list-style:none;}
.npe-k-cal__events li{margin:0;}
.npe-k-cal__agenda>.npe-k-cal__events:last-child{border-bottom:0;}

/* ---------- 20 pickers: person, organization (search or quick-create), shift ---------- */
.npe-k-picker__chosen{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:var(--h-ctl);box-sizing:border-box;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg1);}
.npe-k-picker__name{min-width:0;overflow:hidden;font-size:var(--t-body);font-weight:600;color:var(--fg0);text-overflow:ellipsis;white-space:nowrap;}
.npe-k-picker__search{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);}
.npe-k-picker__list{display:flex;flex-direction:column;width:100%;max-height:240px;overflow-y:auto;box-sizing:border-box;border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);box-shadow:var(--sh-sm);}
.npe-k-picker__opt{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);width:100%;min-height:var(--h-ctl);box-sizing:border-box;padding:var(--s2) var(--s3);border:0;border-bottom:1px solid var(--line);background:none;color:var(--fg0);font-family:inherit;font-size:var(--t-body);text-align:left;cursor:pointer;}
.npe-k-picker__opt:last-child{border-bottom:0;}
.npe-k-picker__opt:hover,.npe-k-picker__opt:focus{background:var(--arc0);outline:none;}
.npe-k-picker__opt b{font-weight:600;}
.npe-k-picker__meta{font-size:var(--t-meta);color:var(--fg2);}
.npe-k-picker__none{margin:0;padding:var(--s3);font-size:var(--t-sm);color:var(--fg2);}
.npe-k-picker__new{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--rbtn);background:var(--bg1);}
.npe-k-picker__matches,.npe-k-picker__new>.npe-k-field__error,.npe-k-picker__actions{grid-column:1 / -1;}
.npe-k-picker__matches{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);}
.npe-k-picker__ask{margin:0;font-size:var(--t-sm);font-weight:600;color:var(--fg0);}
.npe-k-picker__actions{display:flex;justify-content:flex-end;gap:var(--s2);}
/* location picker (Oct-B): the select and its tag filter side by side */
.npe-k-locpicker__row{display:flex;gap:var(--s2);width:100%;}
.npe-k-locpicker__row>[data-npe-k-loc-select]{flex:1 1 auto;min-width:0;}
.npe-k-locpicker__row>.npe-k-locpicker__tag{flex:0 0 auto;width:auto;max-width:40%;}
.npe-k-locpicker>.npe-k-picker__add{align-self:flex-start;}
.npe-k-locpicker>.npe-k-picker__new{margin-top:var(--s2);}

/* B2: the sidebar account block is a link to your notification settings while `notifications` is on. */
a.npe-c-acct{color:inherit;text-decoration:none;}
a.npe-c-acct:hover .who b,a.npe-c-acct:focus .who b{text-decoration:underline;}
/* B2: the @mention picker (assets/js/console-notifications.js), fixed under the textarea it serves. */
.npe-k-mention{position:fixed;z-index:100001;width:260px;max-height:260px;overflow-y:auto;box-sizing:border-box;border:1px solid var(--line2);border-radius:var(--rbtn);background:var(--bg0);box-shadow:var(--sh-lg);}
.npe-k-mention[hidden]{display:none;}
.npe-k-mention__opt{min-height:var(--h-ctl);display:flex;align-items:center;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);color:var(--fg0);font-size:var(--t-body);cursor:pointer;}
.npe-k-mention__opt:last-child{border-bottom:0;}
.npe-k-mention__opt.is-active,.npe-k-mention__opt:hover{background:var(--arc0);}
.npe-k-mention__none{margin:0;padding:var(--s2) var(--s3);color:var(--fg2);font-size:var(--t-sm);}

/* ---------- 21 record page + key/value list ---------- */
/* .npe-k-rec: a 280px facts rail, then the main column; add .has-right for a 280px right rail
   (leave the rail out, and the class off, when it would be empty). */
.npe-k-rec{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;gap:var(--s4);}
.npe-k-rec.has-right{grid-template-columns:280px minmax(0,1fr) 280px;}
.npe-k-rec__rail,.npe-k-rec__main{min-width:0;}
.npe-k-kv{margin:0;}
.npe-k-kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--line);}
.npe-k-kv>div:last-child{border-bottom:0;}
.npe-k-kv dt{flex:none;font-family:var(--fmono);font-size:var(--t-cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);}
.npe-k-kv dd{min-width:0;margin:0;font-size:var(--t-body);color:var(--fg0);text-align:right;overflow-wrap:anywhere;}

/* ---------- 22 composites on a phone ---------- */
@media (max-width:1080px){
  .npe-k-rec,.npe-k-rec.has-right{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:720px){
  /* drawers are full-screen; the footer stays at the bottom with full-width actions */
  .npe-console .npe-c-drawer,.npe-console .npe-c-drawer.is-peek{width:100%;max-width:none;}
  .npe-console .npe-c-drawer .dh,.npe-console .npe-c-drawer .db,.npe-console .npe-c-drawer .dfoot{padding-left:var(--s4);padding-right:var(--s4);}
  .npe-console .npe-c-drawer .dfoot{position:sticky;bottom:0;}
  .npe-console .npe-c-drawer .dfoot .npe-c-btn{flex:1 1 0;}
  .npe-console .npe-c-drawer .dfoot .npe-k-form__status{flex:1 1 100%;margin:0;}
  .npe-console .npe-k-dialog__actions .npe-c-btn{flex:1 1 0;}
  .npe-k-toasts{left:var(--s4);right:var(--s4);bottom:var(--s4);width:auto;max-width:none;transform:none;align-items:stretch;}
  /* the board shows one column; the switch above it picks which (console-kit.js) */
  .npe-k-board{flex-direction:column;align-items:stretch;overflow-x:visible;}
  .npe-k-board__col{flex:none;}
  .npe-console .npe-k-board__switch[data-npe-k-bound]{display:flex;overflow-x:auto;}
  .npe-k-board[data-npe-k-bound] .npe-k-board__col:not(.is-shown){display:none;}
  /* the calendar is always the agenda; the Month / Week / List switch is not offered */
  .npe-k-cal__dow,.npe-k-cal__grid,.npe-k-cal__modes{display:none;}
  .npe-k-cal__agenda{display:block;}
  .npe-k-chart__x.is-alt{display:none;}
  .npe-k-picker__new{grid-template-columns:minmax(0,1fr);}
  .npe-k-locpicker__row{flex-direction:column;}
  .npe-k-locpicker__row>.npe-k-locpicker__tag{max-width:none;}
}
@media (max-width:720px),(pointer:coarse){
  .npe-console .npe-k-toast__undo,.npe-console .npe-k-toast__x{min-width:44px;min-height:44px;}
  .npe-k-cal__chip{padding-top:var(--s2);padding-bottom:var(--s2);}
  .npe-console .npe-k-board__switch>button{flex:1 0 auto;justify-content:center;}
}