/* ==========================================================================
   PN SHELL — Part E step 2 of PN_Design_Specification_v2026_0823_0941.
   REDESIGN-SHELL-1, 23 Aug 2026.

   The shared components, taken VERBATIM from the reference pages' own core
   (members-reference carries the richest superset; its first comment reads
   "Same core as the Pulpit Cover reference") and changed in exactly one way:
   every selector is scoped under body.pn-page-reset, so nothing here can
   collide with Divi or leak onto outside-facing pages, while markup copied
   from a reference page works untouched.

   Tokens (--navy, --t4, --s3, --r ...) come from pastor-signup.css's :root —
   REDESIGN-TOKENS-1. This file adds no colour literals beyond what the
   drawings themselves use.

   Components, in the spec's own list: chip, banner, gear, menu, tabs, pills,
   search row, row, status pill, dots menu, block, form card, buttons,
   feedback bar, the four states, pagination, bulk bar.
   ========================================================================== */

/* 1248 = 1200 of content + the s6 side pads. 1200 matches live's Divi row
   cap, so pages read the same width either side of the ship. */
body.pn-page-reset .pn-shell { max-width:1248px; box-sizing:border-box; margin:0 auto; padding:var(--s3) var(--s6) 96px;
  color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:var(--t4); line-height:1.5; }
body.pn-page-reset .pn-shell *, body.pn-page-reset .pn-shell *::before, body.pn-page-reset .pn-shell *::after { box-sizing:border-box; }
body.pn-page-reset .pn-shell svg { display:block; }

/* Same core as the Pulpit Cover reference. Nothing restyled — only added. */
body.pn-page-reset .page{max-width:1248px;box-sizing:border-box;margin:0 auto;padding:var(--s3) var(--s6) 96px;}

/* REDESIGN-FRAME-4: the theme's own content column must not be the thing
   that decides our width — local Divi defaults to 1080, live is set to 1200,
   and a block theme has its own ideas again. Lift every known column cap to
   1248 under the reset scope so module pages come out at 1200 of content on
   any install. Footer containers sit outside #main-content, so they keep
   the theme's width. */
/* REDESIGN-FRAME-5 (1 Sep 2026, live vs local): Divi's CUSTOMIZER prints
   its inline CSS after ours, so without !important the live site's boxed
   content width (and white content ground) won the tie while local — whose
   customizer holds different values — looked right. These app-page-only
   overrides now refuse to lose. Divi's .container is width:80% by default,
   hence the width:100% alongside the cap. */
body.pn-page-reset #main-content .container,
body.pn-page-reset #main-content .et_pb_row { max-width:1248px !important; width:100% !important; }

body.pn-page-reset .switch{display:flex;gap:var(--s2);background:#fff;border:1px solid var(--hair);border-radius:var(--rc);
  padding:var(--s1);margin-bottom:var(--s5);}
body.pn-page-reset .switch button{flex:1;border:none;background:none;font:inherit;font-size:var(--t4);font-weight:600;
  color:var(--muted);padding:10px;border-radius:var(--r);cursor:pointer;}
body.pn-page-reset .switch button.on{background:var(--navy);color:#fff;}

/* top line */
/* padding-top added 23 Aug (chips sat hard on the edge), TRIMMED 24 Aug on
   the second review — 20px read as too much dead air above the chips. */
body.pn-page-reset .topbar{display:flex;justify-content:space-between;align-items:flex-start;padding-top:var(--s2);padding-bottom:var(--s4);}
body.pn-page-reset .chip{display:inline-flex;align-items:center;gap:var(--s2);background:#fff;border:1px solid #cfd4df;
  border-radius:var(--r);padding:5px 12px 5px 6px;cursor:pointer;font:inherit;height:42px;transition:box-shadow .15s;}
body.pn-page-reset .chip:hover{box-shadow:0 2px 10px rgba(38,60,107,.10);}
body.pn-page-reset .chip .label{font-size:var(--t4);font-weight:600;color:var(--navy);white-space:nowrap;}
body.pn-page-reset .chip .chev{color:var(--muted);}
body.pn-page-reset .mark{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
body.pn-page-reset .mark.church{border-radius:8px;background:var(--parch);color:var(--gold);}
body.pn-page-reset .mark.you{border-radius:50%;background:var(--navy);color:#fff;font-size:var(--t5);font-weight:600;}
body.pn-page-reset .menuwrap{position:relative;}
body.pn-page-reset .pop{position:absolute;top:calc(100% + var(--s2));background:#fff;border:1px solid var(--hair);
  border-radius:10px;box-shadow:0 10px 30px rgba(38,60,107,.22);padding:6px;min-width:250px;z-index:60;display:none;}
/* THE MENU WIDTH is the one measurement the drawings do not agree on: sixteen
   define it and they carry seven different widths between 238 and 256, so
   there is no consensus for a test to hold us to. The shell had 238 - the
   smallest, and the one that appears once. 250 is the commonest and sits in
   the middle of the cluster, so it is the honest reading of what was drawn. */
body.pn-page-reset .pop.l{left:0}
body.pn-page-reset .pop.r{right:0}
body.pn-page-reset .pop.open{display:block}
body.pn-page-reset .pop a{display:flex;align-items:center;gap:11px;padding:9px 11px;font-size:13px;color:var(--ink);
  text-decoration:none;border-radius:7px;cursor:pointer;}
body.pn-page-reset .pop a:hover{background:#f2f4f7;}
body.pn-page-reset .pop a svg{color:var(--muted);flex-shrink:0;}
body.pn-page-reset .pop a.first{color:var(--navy);font-weight:600;}
body.pn-page-reset .pop a.first svg{color:var(--navy);}
body.pn-page-reset .pop .sep{height:1px;background:#eef0f3;margin:5px 6px;}
/* MEASURED AGAINST THE DRAWINGS (26 Aug 2026). Every rule below was taken
   from the reference files rather than judged by eye: the eighteen
   stylesheets were parsed, each shared selector compared property by
   property against this file, and only the differences acted on.

   The tokens were checked the same way and all twenty-five already matched
   exactly, which is why the differences below are small and specific rather
   than a wholesale colour or spacing drift. */
body.pn-page-reset .pop a.danger{color:var(--red);}
body.pn-page-reset .pop a.danger svg{color:var(--red);}

/* A menu item that has to POST is a button, not a link, and it should not
   have to carry twelve inline declarations to look like its neighbours.
   Every module was repeating that block by hand. */
body.pn-page-reset .pop button{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;
  padding:9px 11px;font:inherit;font-size:13px;color:var(--ink);text-align:left;background:none;
  border:0;border-radius:7px;cursor:pointer;}
body.pn-page-reset .pop button:hover{background:#f2f4f7;}
body.pn-page-reset .pop button.first,body.pn-page-reset .pop a.first{color:var(--navy);font-weight:600;}
body.pn-page-reset .pop .danger,body.pn-page-reset .pop button.danger{color:var(--red);}
body.pn-page-reset .pop form{margin:0;}
body.pn-page-reset .pop a .ontick{margin-left:auto;color:var(--gold);flex-shrink:0;}
/* AH4 (FOH brief, 31 Aug 2026): the photo variant of the shared avatar. */
body.pn-page-reset .av--img{overflow:hidden;background:none;}
body.pn-page-reset .av--img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
/* X1 (FOH brief, 31 Aug 2026): counts sit apart from their labels, on the
   far right in a light-blue pill — the reference pattern for every cog. */
body.pn-page-reset .pop a .pn-menu-label{flex:1;min-width:0;}
body.pn-page-reset .pop a .pn-count{margin-left:auto;flex-shrink:0;background:#dbe4f3;color:var(--navy);
  border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600;line-height:1.6;}
body.pn-page-reset .pop .ghead{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  padding:var(--s2) 11px 5px;}
body.pn-page-reset .pop .who{padding:10px 11px var(--s1);}
body.pn-page-reset .pop .who .n{font-size:var(--t4);font-weight:600;color:var(--navy);}
body.pn-page-reset .pop .who .r{font-size:var(--t5);color:var(--muted);margin-top:2px;}
body.pn-page-reset .cnt{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--navy);background:#dbe4f3;
  border-radius:10px;padding:1px 8px;}

/* banner */
body.pn-page-reset .hero{background:var(--navy);border-radius:14px;padding:18px var(--s6);position:relative;}
body.pn-page-reset .crumb{font-size:var(--t5);color:#b7c4dc;margin-bottom:11px;}
body.pn-page-reset .crumb a{color:#b7c4dc;text-decoration:none;}
body.pn-page-reset .crumb .cur{color:#eef2f8;font-weight:500;}
body.pn-page-reset .hero-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;}
body.pn-page-reset .hero-top h1{font-size:var(--t1);font-weight:600;color:#fff;margin:0;}
body.pn-page-reset .hero-desc{font-size:var(--t4);color:#dfe4ef;margin-top:10px;}
body.pn-page-reset .hero-desc:empty{display:none;} /* MOBILE-BUILD-2 §2: the slot is always printed; desktop hides an empty one */
body.pn-page-reset .hero-desc b{color:#fff;font-weight:600;}
body.pn-page-reset .hbtns{display:flex;align-items:center;gap:var(--s4);}
body.pn-page-reset .gearbtn{width:42px;height:42px;border:1px solid rgba(255,255,255,.55);border-radius:var(--r);
  background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex-shrink:0;transition:box-shadow .15s;position:relative;}
body.pn-page-reset .gearbtn:hover{box-shadow:0 2px 12px rgba(0,0,0,.22);}
body.pn-page-reset .gdot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--gold);
  border:1.5px solid var(--navy);}
body.pn-page-reset .hero .pop{right:var(--s6);top:calc(100% - 6px);}

/* buttons */
body.pn-page-reset .btn{border-radius:var(--r);font:inherit;font-size:var(--t4);font-weight:600;cursor:pointer;
  padding:10px 18px;transition:box-shadow .15s;border:none;display:inline-block;text-decoration:none;}
body.pn-page-reset .btn:hover{box-shadow:0 2px 10px rgba(38,60,107,.22);}
body.pn-page-reset .btn--onNavy{background:#fff;color:var(--navy);}
body.pn-page-reset .btn--onNavy:hover{box-shadow:0 2px 12px rgba(0,0,0,.22);}
/* A4.2 secondary in the banner: transparent, white text, translucent border */
body.pn-page-reset .btn--onNavySec{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55);font-weight:500;}
body.pn-page-reset .btn--onNavySec:hover{box-shadow:0 2px 12px rgba(0,0,0,.22);}
body.pn-page-reset .btn--primary{background:var(--navy);color:#fff;}
body.pn-page-reset .btn--quiet{background:#fff;color:var(--navy);border:1px solid #cfd4df;font-weight:500;}
body.pn-page-reset .btn--quiet:hover{box-shadow:0 2px 10px rgba(38,60,107,.12);}
body.pn-page-reset .btn--sm{padding:8px 15px;font-size:var(--t5);}
body.pn-page-reset .btn--full{display:block;width:100%;text-align:center;}
body.pn-page-reset .btn--danger{background:var(--red);color:#fff;border:1px solid #e5b4ac;font-weight:600;}

/* tabs, search row */
body.pn-page-reset .tabs{display:flex;gap:var(--s6);border-bottom:1px solid var(--hair);margin:var(--s5) 0 var(--s4);flex-wrap:wrap;}
/* TABS-NOTICE-GAP-1 (5 Sep 2026, walkthrough PC27): 5px of air between the tabs and a notice that follows them — the tabs' own bottom margin used to win. */
body.pn-page-reset .tabs:has(+ .pn-notice),body.pn-page-reset .tabs:has(+ .pn-tab-content > .pn-notice:first-child){margin-bottom:5px;}
body.pn-page-reset .tabs + .pn-notice,body.pn-page-reset .tabs + .pn-tab-content > .pn-notice:first-child{margin-top:0;}
body.pn-page-reset .tab{padding:10px 2px;font:inherit;font-size:14px;font-weight:500;background:none;border:none;
  border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--muted);cursor:pointer;}
body.pn-page-reset .tab.on{color:var(--navy);font-weight:600;border-bottom-color:var(--gold);}
/* THE DRAWINGS NAME A LIGHTER GREY HERE AND THE PLATFORM SAYS var(--muted), and the
   platform wins. That grey is on the retired list in the 23 August token
   pass - a deliberate, documented decision that post-dates the drawings and
   is guarded by verify-redesign-tokens.php. Re-introducing it to match a
   picture would undo a considered call and break the guard that protects it.

   The practical difference: --muted is a touch darker, so an inactive tab count
   reads slightly heavier than the drawing. Worth a look, and worth a new
   token if it bothers you - but not worth quietly reviving a banned one. */
/* COUNTS-IN-PILLS-1 (Gordon, 31 Aug 2026): every count on the platform sits
   in the same light-blue pill — tabs, filter pills and menus alike. */
body.pn-page-reset .tab .tn{display:inline-block;margin-left:5px;background:#dbe4f3;color:var(--navy);
  border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;line-height:1.6;}
body.pn-page-reset .tab.on .tn{background:#ccd9ee;color:var(--navy);}
/* THE GAP ABOVE THE FILTER ROW comes from what sits above it, not from the
   row itself. Counted across the drawings this splits eight to six - and
   the six that give the row a top margin are exactly the six with no tab
   strip. Where there are tabs, the tabs make the gap; where there are not,
   the hero does (see .hero below). Putting 20px on the row itself doubled
   it on every page that has tabs, which is most of them. */
/* THE PAGE GROUND (26 Aug 2026).

   Every one of the eighteen drawings opens with body{background:var(--page)}
   - a soft grey, #f4f5f7 - and the platform never set it. So every white
   card, row and panel was sitting on a white page, and the thing that makes
   the drawings read as a stack of objects was simply absent. It is the
   single biggest reason the build did not look like the design.

   Scoped to body.pn-page-reset, which is added only on module pages and
   already hides the theme header, so nothing outside the app changes.

   Also gives the hero the bottom margin the drawings get from the tabs.
   Sibling margins collapse to the larger of the two, so a page WITH tabs
   still gets exactly 20px rather than 40. */
body.pn-page-reset{background:var(--page) !important;}
/* Divi paints #main-content white across the full width, which covered the
   ground the line above sets. Scoped to pn-page-reset, so it applies on the
   app pages and nowhere on the marketing site. Named containers rather than a
   blanket rule: a wildcard here would flatten anything the theme legitimately
   paints. */
body.pn-page-reset #main-content,
body.pn-page-reset #content-area,
body.pn-page-reset #left-area,
body.pn-page-reset #main-content .et_pb_section,
body.pn-page-reset .entry-content{background:transparent !important;}
body.pn-page-reset #page-container{background:var(--page) !important;}
body.pn-page-reset .hero{margin-bottom:var(--s5);}

body.pn-page-reset .searchrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4);flex-wrap:wrap;}
/* MOBILE-BUILD-3 §1 (7 Sep 2026): the pill wrapper printed by pn_module_filters()
   vanishes from desktop layout; the pills are laid out by .searchrow as before.
   pn-mobile.css B3.1 turns it into a scrolling strip on the phone. */
body.pn-page-reset .filts{display:contents;}
body.pn-page-reset .search{flex:1;min-width:230px;display:flex;align-items:center;gap:11px;border:1px solid #d9dbe3;
  border-radius:var(--r);padding:0 14px;background:#fff;}
body.pn-page-reset .search input{flex:1;border:none;outline:none;padding:11px 0;font:inherit;font-size:14px;background:transparent;}
body.pn-page-reset .search .mag{color:var(--muted);}
body.pn-page-reset .filt{border:1px solid #d9dbe3;border-radius:20px;padding:6px 14px;font:inherit;font-size:var(--t5);
  font-weight:500;color:var(--muted);background:#fff;cursor:pointer;white-space:nowrap;}
body.pn-page-reset .filt.on{border-color:var(--navy);background:#eef2f8;color:var(--navy);}
/* The count inside a filter pill. Muted until the pill is the live one, so
   the row reads as one control rather than a line of competing numbers. */
body.pn-page-reset .filt__n{display:inline-block;margin-left:5px;background:#dbe4f3;color:var(--navy);
  border-radius:999px;padding:1px 7px;line-height:1.6;font-size:11px;font-weight:700;
  color:#8d93a0;font-variant-numeric:tabular-nums;}
body.pn-page-reset .filt.on .filt__n{color:var(--navy);}
body.pn-page-reset .filt:hover{border-color:#b9bfcd;}
body.pn-page-reset .filt:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
/* THE TWO SEARCH BOXES THAT ARE NOT FILTER ROWS (26 Aug 2026).

   Every list on the platform now searches through the shared filter row. Two
   boxes are left that legitimately are not one: the person-picker inside the
   Compliance assign pop-up, and the Help page search. Neither is in the
   drawings - there is no reference file for Help at all - but "not specified"
   is not a reason to look different from every other search box on the
   platform. Same border, same radius, same height, same magnifier.

   Matched to .search rather than replaced, because both sit inside their own
   markup and their scripts read them by id. */
body.pn-page-reset .pn-search-icon-wrap{display:flex;align-items:center;gap:11px;
  border:1px solid #d9dbe3;border-radius:var(--r);padding:0 14px;background:#fff;}
body.pn-page-reset .pn-search-icon-wrap .pn-search-icon{width:16px;height:16px;color:var(--muted);flex-shrink:0;}
body.pn-page-reset .pn-search-icon-wrap input,
body.pn-page-reset .pn-faq-search input{flex:1;border:none;outline:none;padding:11px 0;
  font:inherit;font-size:14px;background:transparent;}
body.pn-page-reset .pn-faq-search{display:flex;align-items:center;gap:11px;
  border:1px solid #d9dbe3;border-radius:var(--r);padding:0 14px;background:#fff;}

body.pn-page-reset .searchrow select{border:1px solid #d9dbe3;border-radius:var(--r);height:42px;font:inherit;font-size:13px;
  color:var(--ink);appearance:none;-webkit-appearance:none;padding:0 38px 0 13px;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235A6070' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;}
/* The design system's `body.pn-page-reset select` rule paints every select
   with `background:#fff !important` and a 48px height, which wiped the chevron
   above and stretched the row. Said again here with the same weight and one
   class more of specificity, so the filter row's select keeps its arrow. */
body.pn-page-reset .searchrow select{height:42px !important;padding:0 38px 0 13px !important;border:1px solid #d9dbe3 !important;
  border-radius:var(--r) !important;font-size:13px !important;color:var(--ink) !important;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235A6070' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;}
/* MOBILE-BUILD-3 §6 (7 Sep 2026): Calendar's range select and the Ask for Help form's
   category select are the two <select>s on app pages outside .searchrow/.field (the
   second is hidden on load, found by a picture). Same control as "Every kind". */
body.pn-page-reset .pn-calx-range,body.pn-page-reset .pn-support-select{height:42px !important;padding:0 38px 0 13px !important;border:1px solid #d9dbe3 !important;
  border-radius:var(--r) !important;font-size:13px !important;color:var(--ink) !important;appearance:none !important;-webkit-appearance:none !important;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235A6070' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;}
/* Five pixels of air above a notice, wherever it lands (Gordon, 30 Aug 2026). */
body.pn-page-reset .pn-notice{margin-top:5px;}
body.pn-page-reset .intro{font-size:13px;color:var(--muted);margin:0 2px var(--s4);}

/* rows */
body.pn-page-reset .row{display:flex;align-items:center;gap:var(--s4);background:#fff;border:1px solid var(--hair);
  border-radius:11px;padding:var(--s3) var(--s4);margin-bottom:9px;transition:box-shadow .15s;cursor:pointer;}
body.pn-page-reset .row:hover{box-shadow:0 2px 10px rgba(38,60,107,.08);}
body.pn-page-reset .row.picked{border-color:var(--navy);background:#f7f9fc;}
body.pn-page-reset .cbox{width:20px;height:20px;border:1.6px solid #c4c8d0;border-radius:5px;flex-shrink:0;display:none;
  align-items:center;justify-content:center;color:#fff;background:#fff;}
body.pn-page-reset .selmode .cbox{display:flex;}
body.pn-page-reset .cbox.on{background:var(--navy);border-color:var(--navy);}
/* THE DATE TILE. Every drawing that lists dated things puts one at the left of
   the row - a navy day-of-week cap over the number and month. Lifted from the
   drawings unchanged, because a date you can read at a glance is the whole
   point of the component. */
/* Read aloud, never drawn. The date tile shows SUN / 23 / Aug, which a screen
   reader would announce as three unrelated fragments; this carries the whole
   date for it. */
body.pn-page-reset .pn-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
/* line-height 1.5 is the drawing's. The page ground sets 1.7 on the body and
   the tile inherited it, so the navy day strip ran to 30px instead of 21 and
   the whole tile stood 89px tall against the drawing's 69 (30 Aug 2026). */
body.pn-page-reset .tile{width:58px;border:1px solid var(--hair);border-radius:8px;overflow:hidden;line-height:1.5;
  text-align:center;flex-shrink:0;background:#fff;}
body.pn-page-reset .tile .dow{background:var(--navy);color:#fff;font-size:10px;letter-spacing:.06em;
  padding:3px 0;font-weight:600;}
body.pn-page-reset .tile .d{font-size:19px;font-weight:700;color:var(--navy);line-height:1;padding-top:6px;
  font-variant-numeric:tabular-nums;}
body.pn-page-reset .tile .mo{font-size:10px;color:var(--muted);text-transform:uppercase;padding:2px 0 6px;}
/* A swap has no single date, so its tile carries the swap mark instead. */
body.pn-page-reset .tile.swap{display:flex;align-items:center;justify-content:center;height:58px;
  color:var(--gold);background:var(--parch);border-color:#ecdcae;}
/* Past dates read back rather than forward. */
body.pn-page-reset .tile.past .dow{background:#8d93a0;}
body.pn-page-reset .tile.past .d{color:var(--muted);}
body.pn-page-reset .av{width:40px;height:40px;border-radius:50%;background:#e9ebf2;color:var(--navy);display:flex;
  align-items:center;justify-content:center;font-weight:600;font-size:13px;flex-shrink:0;overflow:hidden;}
/* Rows are centred because almost every row is one line of name and one line
   of detail. Compliance carries a whole roles list in its left column, and
   centring that puts the ladder and the pill halfway down a tall row, level
   with nothing. */
body.pn-page-reset .row--top{align-items:flex-start;}
body.pn-page-reset .rmain{flex:1;min-width:0;}
body.pn-page-reset .rname{font-size:var(--t3);font-weight:600;color:var(--navy);}
body.pn-page-reset .rsub{font-size:var(--t5);color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
/* A NAME INSIDE A SUB-LINE IS NAVY, not muted. Nine drawings agree, and the
   pulpit rows depend on it: "covered by <b>Arthur Blackwood</b>" was
   rendering the one word that matters in the same grey as the rest. */
body.pn-page-reset .rsub b{color:var(--navy);font-weight:600;}
body.pn-page-reset .rsub .dot{color:#c4c8d0;}
/* ROW VARIANTS, from the drawings that list wording rather than names.
   Prayer, Notes and Ask for help all show a paragraph where Members shows a
   name, so the row has to align to the top and carry a text block. Same row,
   different contents - which is the point of having one row. */
body.pn-page-reset .row--text{align-items:flex-start;}
body.pn-page-reset .rtext{font-size:14.5px;color:var(--ink);line-height:1.5;}
body.pn-page-reset .row--done .rtext{color:var(--muted);}
body.pn-page-reset .row--arch{background:#fbfbfc;}
body.pn-page-reset .row--arch .rtext{color:var(--muted);}
/* The tick that marks a row done. Kept as a real control, not a decoration:
   it is a button, so it is reachable from the keyboard. */
body.pn-page-reset .tick{width:22px;height:22px;border:1.7px solid #c4c8d0;border-radius:6px;
  flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:center;
  color:#fff;cursor:pointer;padding:0;margin-top:2px;}
body.pn-page-reset .tick.on{background:var(--green);border-color:var(--green);}
body.pn-page-reset .tick:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
body.pn-page-reset .dot{color:#c4c8d0;}
body.pn-page-reset .withicon{display:inline-flex;align-items:center;gap:4px;}
body.pn-page-reset .pill--priv{color:var(--deepgold);border-color:#e0c079;background:#fdf8ee;}
body.pn-page-reset .rright{margin-left:auto;margin-top:1px;display:flex;align-items:center;gap:10px;flex-shrink:0;}
body.pn-page-reset .type{font-size:11px;font-weight:600;color:var(--muted);background:#f0f1f4;border:1px solid #e2e4ea;
  border-radius:12px;padding:2px 9px;}
body.pn-page-reset .tag{font-size:11px;font-weight:500;color:var(--navy);border:1px solid #c9d1e2;background:#eef2f8;
  border-radius:12px;padding:2px 9px;}
body.pn-page-reset .pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 11px;
  border-radius:20px;border:1px solid;background:#fff;white-space:nowrap;}
/* Compliance names its four states lapsed / expiring / current / none, and the
   reference drawing gives each the SAME three colours already defined here for
   you / wait / done / nil. They are aliased onto the same rules rather than
   copied, so red stays one red. A second set of literals is how two greens end
   up on one page a year later. */
body.pn-page-reset .pill--you,
body.pn-page-reset .pill--lapsed{color:var(--red);border-color:#f0c8c0;background:#fcece9;}
body.pn-page-reset .pill--wait,
body.pn-page-reset .pill--expiring{color:var(--deepgold);border-color:#e0c079;background:#fdf8ee;}
body.pn-page-reset .pill--done,
body.pn-page-reset .pill--current{color:var(--green);border-color:#8fc7a9;background:#f2f9f5;}
/* The neutral pill - a state with nothing to say about it. Eleven drawings
   carry it and the shell never had it, so anything reaching for pill--nil
   was rendering an unstyled pill. */
body.pn-page-reset .pill--nil,
body.pn-page-reset .pill--none{color:var(--muted);border-color:#e2e4ea;background:#f0f1f4;}
/* THE LADDER - one short bar per requirement, coloured by state, so "three
   requirements, one lapsed" reads at a glance without three pills competing for
   the same corner. Compliance is the only module with it today, but it lives
   here with the rest of the row furniture rather than inline in one file, which
   is where it was until now. Values are the drawing's. */
body.pn-page-reset .ladder{display:flex;gap:3px;align-items:center;}
body.pn-page-reset .lseg{width:22px;height:6px;border-radius:3px;background:#e2e4ea;}
body.pn-page-reset .lseg.ok{background:var(--green);}
body.pn-page-reset .lseg.warn{background:var(--gold);}
body.pn-page-reset .lseg.bad{background:var(--red);}
body.pn-page-reset .dotsbtn{color:#8d93a0;padding:var(--s1);cursor:pointer;background:none;border:none;flex-shrink:0;}
body.pn-page-reset .dotsbtn:hover{color:var(--navy);}
body.pn-page-reset .hhead{display:flex;align-items:center;gap:10px;font-size:var(--t5);font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.05em;padding-bottom:7px;border-bottom:2px solid var(--gold);
  margin:var(--s6) 0 var(--s3);}
/* COUNTS-IN-PILLS-1 round 3: group-heading counts join the pill. */
body.pn-page-reset .hhead .hc{display:inline-block;margin-left:6px;background:#dbe4f3;color:var(--navy);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;line-height:1.6;text-transform:none;letter-spacing:0;}

/* pagination */
body.pn-page-reset .pager{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s5);
  flex-wrap:wrap;}
body.pn-page-reset .pager .of{font-size:var(--t5);color:var(--muted);}
body.pn-page-reset .pnums{display:flex;gap:6px;}
body.pn-page-reset .pnum{min-width:36px;height:36px;border:1px solid #d9dbe3;background:#fff;border-radius:8px;
  font:inherit;font-size:13px;color:var(--navy);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0 10px;}
body.pn-page-reset .pnum.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600;}
body.pn-page-reset .pnum.gap{border:none;background:none;color:var(--muted);cursor:default;}

/* bulk bar */
body.pn-page-reset .bulkbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--navy);
  color:#fff;border-radius:12px;box-shadow:0 12px 34px rgba(20,28,48,.35);padding:12px var(--s5);
  display:none;align-items:center;gap:var(--s4);z-index:80;flex-wrap:wrap;
  /* left:50% caps the available width at half the viewport, which made the bar wrap. */
  width:max-content;max-width:calc(100vw - 40px);}
body.pn-page-reset .selmode .bulkbar{display:flex;}
body.pn-page-reset .bulkbar .n{font-size:var(--t4);font-weight:600;}
body.pn-page-reset .bulkbar .act{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;
  padding:7px 13px;font:inherit;font-size:var(--t5);font-weight:500;cursor:pointer;}
body.pn-page-reset .bulkbar .act:hover{background:rgba(255,255,255,.12);}
body.pn-page-reset .bulkbar .done{background:#fff;color:var(--navy);border:none;border-radius:8px;padding:7px 14px;
  font:inherit;font-size:var(--t5);font-weight:600;cursor:pointer;}

/* feedback */
body.pn-page-reset .bar{display:flex;align-items:center;gap:11px;border-radius:10px;padding:12px var(--s4);
  margin-bottom:var(--s4);font-size:var(--t4);}
body.pn-page-reset .bar--ok{background:#eef7f1;border:1px solid #bfe0cd;border-left:4px solid var(--green);color:#1a6644;}
body.pn-page-reset .bar .x{margin-left:auto;cursor:pointer;opacity:.6;}

/* detail */
body.pn-page-reset .block{background:#fff;border:1px solid var(--hair);border-radius:var(--rc);padding:18px var(--s5);
  margin-bottom:var(--s4);}
body.pn-page-reset .block h2{font-size:var(--t6);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin:0 0 var(--s3);display:flex;align-items:center;gap:10px;}
body.pn-page-reset .block h2 .more{margin-left:auto;font-size:var(--t5);color:var(--navy);font-weight:600;
  text-transform:none;letter-spacing:0;cursor:pointer;text-decoration:none;}
body.pn-page-reset .kv{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;
  border-bottom:1px solid #f0f1f4;gap:var(--s4);}
body.pn-page-reset .kv:last-child{border-bottom:none;}
body.pn-page-reset .kv .k{font-size:13px;color:var(--muted);}
body.pn-page-reset .kv .v{font-size:var(--t4);color:var(--navy);font-weight:600;text-align:right;}
body.pn-page-reset .kv .v.none{color:var(--muted);font-weight:400;}
body.pn-page-reset .mini{display:flex;align-items:center;gap:var(--s3);padding:9px 0;border-bottom:1px solid #f0f1f4;}
body.pn-page-reset .mini:last-child{border-bottom:none;}
body.pn-page-reset .mini .mt{font-size:13.5px;color:var(--ink);}
body.pn-page-reset .mini .mw{font-size:var(--t5);color:var(--muted);margin-top:2px;}
body.pn-page-reset .mini .mr{margin-left:auto;flex-shrink:0;}
body.pn-page-reset .detailgrid{display:grid;grid-template-columns:1fr 330px;gap:var(--s5);align-items:start;}
body.pn-page-reset .idcard{display:flex;align-items:center;gap:var(--s4);}
body.pn-page-reset .idcard .big{width:66px;height:66px;border-radius:50%;background:#e9ebf2;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:22px;flex-shrink:0;}

/* form */
body.pn-page-reset .formcard{background:#fff;border:1px solid var(--hair);border-radius:var(--rc);max-width:720px;overflow:hidden;}
body.pn-page-reset .formcard .fhead{padding:var(--s4) 22px;border-bottom:1px solid var(--hair);}
body.pn-page-reset .formcard .fhead h2{margin:0;font-size:16px;font-weight:600;color:var(--navy);}
body.pn-page-reset .formcard .f.formcard .ffoot{display:flex;justify-content:flex-end;gap:10px;padding:15px 22px;
  border-top:1px solid var(--hair);background:#fbfbfc;}
body.pn-page-reset .sechead{font-size:var(--t6);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);
  padding-bottom:7px;border-bottom:2px solid var(--gold);margin:0 0 var(--s4);}
body.pn-page-reset .sechead.mt{margin-top:var(--s8);}
/* MOBILE-BUILD-3 §3 (7 Sep 2026): a count pill after a section label. The pill
   is .pn-count (the tabs' and filters' one); in a small-caps heading it must
   not inherit the tracking or the transform. */
body.pn-page-reset .sechead .pn-count{vertical-align:middle;margin-left:8px;text-transform:none;letter-spacing:0;}
body.pn-page-reset .g2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}
body.pn-page-reset .field{margin-bottom:17px;}
body.pn-page-reset .field label{display:block;font-size:var(--t5);font-weight:600;color:#3a3f4c;margin-bottom:6px;}
body.pn-page-reset .field .opt{color:var(--muted);font-weight:400;}
body.pn-page-reset .field input, body.pn-page-reset .field select, body.pn-page-reset .field textarea{width:100%;border:1px solid #d4d7df;border-radius:var(--r);
  padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);background:#fff;}
body.pn-page-reset .field select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235A6070' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;}
body.pn-page-reset .field input:focus, body.pn-page-reset .field select:focus, body.pn-page-reset .field textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(38,60,107,.08);}
body.pn-page-reset .field .help{font-size:11.5px;color:var(--muted);margin-top:5px;}
body.pn-page-reset .mostopt{font-size:var(--t5);color:var(--muted);margin:-8px 0 var(--s4);}

body.pn-page-reset .about{background:#fff;border:1px solid var(--hair);border-left:4px solid var(--gold);
  border-radius:11px;padding:18px 22px;margin-top:var(--s8);}
body.pn-page-reset .about h3{font-size:14px;color:var(--navy);margin:0 0 var(--s3);}
body.pn-page-reset .about p{font-size:13px;line-height:1.7;margin:0 0 10px;color:var(--ink);}
body.pn-page-reset .about p:last-child{margin-bottom:0;}
body.pn-page-reset .about b{color:var(--navy);}
@media(max-width:900px){.detailgrid{grid-template-columns:1fr;}.g2{grid-template-columns:1fr;}}

/* == A11 — the four states (authored from the spec; the references show them
      per-page rather than as a shared class set) ============================ */

/* Never had anything (D37, D38) */
body.pn-page-reset .pn-state--first { background:#fff; border:1px dashed #cfd4dd; border-radius:var(--rc);
  padding:36px 26px; text-align:center; }
body.pn-page-reset .pn-state--first .pn-state__icon { width:48px; height:48px; border-radius:12px;
  background:var(--parch); color:var(--gold); display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
body.pn-page-reset .pn-state--first h3 { font-size:15.5px; font-weight:600; color:var(--navy); margin:0 0 var(--s2); }
body.pn-page-reset .pn-state--first p { font-size:var(--t4); color:var(--muted); max-width:430px; margin:0 auto var(--s4); }
/* MOBILE-BUILD-3 §7 (7 Sep 2026): every empty state's icon is an outline icon
   (pn_oicon), never an emoji; the bed keeps its half opacity. */
body.pn-page-reset .pn-empty-state__icon svg, body.pn-page-reset .pn-duplicates-empty__icon svg { color:var(--navy); display:inline-block; }

/* Filter hides everything — the page is not empty, the view is */
body.pn-page-reset .pn-state--filtered { background:#fff; border:1px solid var(--hair); border-radius:11px;
  padding:18px 20px; display:flex; align-items:center; gap:var(--s3); font-size:var(--t4); color:var(--muted); }
body.pn-page-reset .pn-state--filtered a { color:var(--navy); font-weight:600; text-decoration:none; }

/* Everything done — never apologetic */
body.pn-page-reset .pn-state--done { background:#f4faf6; border:1px solid #bfe0cd; border-radius:11px;
  padding:18px 20px; display:flex; align-items:center; gap:var(--s3); font-size:var(--t4); color:#1a6644; }

/* Switched off (D39–D42) — grey throughout, outline padlock, never an emoji */
body.pn-page-reset .pn-state--locked { background:#fff; border-radius:var(--rc); padding:36px 26px; text-align:center; }
body.pn-page-reset .pn-state--locked .pn-state__icon { width:48px; height:48px; border-radius:12px;
  background:var(--tint-grey-bg); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; margin-bottom:var(--s3); }
body.pn-page-reset .pn-state--locked h3 { font-size:15.5px; font-weight:600; color:var(--navy); margin:0 0 var(--s2); }
body.pn-page-reset .pn-state--locked p { font-size:var(--t4); color:var(--muted); max-width:430px; margin:0 auto var(--s4); }

/* == A10 — the feedback bars (success stays until dismissed, D34) ========== */
body.pn-page-reset .pn-feedback { border-radius:10px; padding:12px 16px; font-size:var(--t4);
  display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
body.pn-page-reset .pn-feedback--ok { background:#eef7f1; border:1px solid #bfe0cd; border-left:4px solid var(--green); color:#1a6644; }
body.pn-page-reset .pn-feedback--err { background:var(--tint-red-bg); border:1px solid var(--tint-red-bd); border-left:4px solid var(--red); color:var(--red); }
body.pn-page-reset .pn-feedback .pn-feedback__x { margin-left:auto; cursor:pointer; background:none; border:none; color:inherit; font-size:15px; }

/* == Block-theme furniture (REDESIGN-FRAME-2, 23 Aug 2026) ==================
   PN-Local runs a stock block theme while live runs Divi, and Gordon's
   design review found the difference immediately: the block theme's page
   title and header menu leaked above every module page, because the reset
   only knew Divi's selectors. Module pages hide the THEME's furniture
   whichever theme is wearing them — the frame IS the page chrome. */
body.pn-page-reset .wp-block-post-title,
body.pn-page-reset .wp-site-blocks > header.wp-block-template-part,
body.pn-page-reset header.wp-block-template-part:first-of-type {
    display: none !important;
}
body.pn-page-reset .wp-site-blocks,
body.pn-page-reset .wp-block-post-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Gordon's review, second pass: ~140px of dead air above the frame — the
   block theme's global padding (70px before .wp-site-blocks, 70px inside the
   group). Module pages own their spacing; the theme's goes. */
body.pn-page-reset { margin: 0 !important; padding-top: 0 !important; }
body.pn-page-reset .wp-site-blocks { margin-top: 0 !important; }
body.pn-page-reset main.wp-block-group,
body.pn-page-reset main .wp-block-group,
body.pn-page-reset .entry-content.wp-block-post-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* == Divi page furniture (REDESIGN-FRAME-3, 23 Aug 2026) ====================
   With Divi active, a page created WITHOUT per-page Divi settings renders
   the theme's defaults: page title top-left, right sidebar squeezing the
   app. Live's pages happen to carry the right settings; PN-Local's did not,
   and the difference showed the moment Divi arrived. Module pages own their
   chrome WHATEVER the page settings say — a forgotten dropdown on a new
   page can no longer break the app. */
body.pn-page-reset .entry-title { display: none !important; }
body.pn-page-reset #sidebar { display: none !important; }
body.pn-page-reset #left-area { width: 100% !important; padding-right: 0 !important; float: none !important; }
body.pn-page-reset #main-content .container:before { display: none !important; }

/* ============================================================
   pn-shell mobile (25 Aug 2026)

   The shell shipped with one media query, for two grids. Every list
   component in it - the row, the filter row, the tabs - was drawn at desktop
   width and never told what to do below it. As the modules move onto these
   classes that stops being a shell problem and becomes eleven module
   problems, so it is answered here, once.
   ============================================================ */
@media (max-width: 700px) {
  /* The row keeps its shape: the date tile is the thing you scan by, so it
     stays put; the pill and menu drop under the text rather than squeezing
     the name into two characters. */
  body.pn-page-reset .row{flex-wrap:wrap;gap:var(--s3);padding:var(--s3);}
  body.pn-page-reset .row .rmain{flex:1 1 60%;}
  body.pn-page-reset .row .rright{margin-left:0;width:100%;justify-content:flex-end;}

  /* Search takes the full width; the pills sit under it and scroll if they
     must, because a wrapped filter row pushes the list off the screen. */
  body.pn-page-reset .searchrow{gap:8px;}
  body.pn-page-reset .search{flex:1 1 100%;min-width:0;}
  body.pn-page-reset .searchrow select{flex:1 1 100%;}

  /* Tabs scroll sideways rather than stacking - stacked tabs read as a menu
     and lose the one thing a tab row tells you, which is where you are. */
  body.pn-page-reset .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:var(--s4);
    /* MOBILE-TABS-NOWRAP-1 (M3, 2 Sep 2026): the base rule says flex-wrap:wrap
       and nothing here undid it, so the strip wrapped ("Swaps" alone on a
       second line on Pulpit; Library, Processes and Compliance the same)
       before it ever got the chance to scroll. */
    flex-wrap:nowrap;}
  body.pn-page-reset .tabs::-webkit-scrollbar{display:none;}
  body.pn-page-reset .tab{white-space:nowrap;}

  /* MOBILE-PILL-WRAP-1 (M9, 2 Sep 2026): a status pill that cannot wrap
     ("Review overdue (was 11th August 2026)") made a 320px phone scroll
     sideways. On a phone it may wrap; desktop keeps the single line. */
  body.pn-page-reset .pill{white-space:normal;text-align:left;}

  /* MOBILE-TAP-1 (M10, 2 Sep 2026): the row ... button measured 19x26px and a
     thumb needs about 44. Room only - glyph, colour and the desktop look are
     unchanged. The search input goes to 16px so iOS Safari stops zooming the
     page when it is focused (it zooms on anything smaller and never zooms
     back out). The form inputs get the same in pn-design-system.css. */
  body.pn-page-reset .dotsbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  body.pn-page-reset .search input{font-size:16px;}

  body.pn-page-reset .hero{padding:var(--s4);}
  body.pn-page-reset .hero-top{flex-wrap:wrap;gap:var(--s3);}
  body.pn-page-reset .hbtns{width:100%;justify-content:flex-start;}
}

/* ============================================================
   PRINT (25 Aug 2026)

   One set of rules for every printable view the drawings ask for. The list
   survives; everything you cannot use on paper goes. See pn_print_header().
   ============================================================ */
body.pn-page-reset .pn-print-head{display:none;}
body.pn-page-reset .pn-print-head h1{font-size:22px;font-weight:700;color:var(--navy);margin:0 0 4px;}
body.pn-page-reset .pn-print-head p{font-size:12px;color:var(--muted);margin:0 0 18px;}

@media print {
  body.pn-page-reset .pn-print-head{display:block;}

  /* Chrome that cannot be pressed on paper. */
  body.pn-page-reset .topbar,
  body.pn-page-reset .hero,
  body.pn-page-reset .searchrow,
  body.pn-page-reset .tabs,
  body.pn-page-reset .menuwrap,
  body.pn-page-reset .dotsbtn,
  body.pn-page-reset .gearbtn,
  body.pn-page-reset .pop,
  body.pn-page-reset .hbtns,
  body.pn-page-reset .btn,
  body.pn-page-reset .tick,
  body.pn-page-reset .pn-modal,
  body.pn-page-reset .pn-bottom-nav,
  body.pn-page-reset form[method="post"],
  header, footer, nav[role="navigation"], .site-header, .site-footer {
    display: none !important;
  }

  /* Ink is expensive and grey backgrounds print as smudge. */
  body.pn-page-reset{background:#fff !important;}
  body.pn-page-reset .row{border:0;border-bottom:1px solid #ddd;border-radius:0;
    padding:8px 0;margin:0;box-shadow:none !important;break-inside:avoid;}
  body.pn-page-reset .pn-module-section{border:0;box-shadow:none;padding:0;background:#fff;}
  body.pn-page-reset .tile{border-color:#bbb;}
  body.pn-page-reset .tile .dow{background:#333 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  body.pn-page-reset .pill{border-color:#bbb;background:#fff !important;color:#333 !important;}

  /* A row split across a page break is a row you cannot read. */
  body.pn-page-reset .row, body.pn-page-reset .pn-card{break-inside:avoid;page-break-inside:avoid;}
  a[href]:after{content:"";}
}

/* ONE-WIDTH-1 (Gordon, 31 Aug 2026): the modules did not all sit at the same
   width — Members' wrap had its side padding zeroed while Calendar, Serving
   and others kept 24px a side, so their heroes and lists ran 48px narrower.
   Desktop gets one rule: every module wrap spans the full 1200, like the
   dashboard and Members. Mobile keeps its own padding rules. */
@media (min-width: 981px) {
  body.pn-page-reset .pn-wrap { padding-left: 0 !important; padding-right: 0 !important; }
}

/* COUNTS-IN-PILLS-1 round 3 (31 Aug 2026): .pn-count was styled only inside
   .pop menus, so the same markup in tab labels (Ask for Help) rendered bare.
   Styled globally; the menu-scoped rule still wins inside menus. */
/* COUNTS-CONTRAST-1 (Gordon, 31 Aug round 5): the pills read too faint. */
body.pn-page-reset .pn-count{display:inline-block;margin-left:5px;background:#dbe4f3;color:var(--navy);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;line-height:1.6;}